j1JS的基本语法

1、第1讲 JavaScript的基本语法的基本语法课程及教师简介课程及教师简介课程：课程：JavaScript客户技术客户技术教师：宋锋教师：宋锋教研室：软件技术教研室：软件技术邮箱：邮箱：本课程内容：任务书本课程内容：任务书HTMLJavaOOP面向对象程序设计面向对象程序设计JavaScript客户端技术客户端技术JSP动态网页开发技术动态网页开发技术基于基于MVC的的Web应用开发应用开发Hibernate框架应用框架应用Java企业级开发技术企业级开发技术JavaScript客户端框架客户端框架本讲问题本讲问题大家已经学习了大家已经学习了HTML，为什么还要学习，为什么还要学习JavaS

2、cript？如何编写如何编写JavaScript脚本程序？脚本程序？JavaScript与与Java基本语法的异同？基本语法的异同？本讲任务本讲任务制作淘宝网购物车制作淘宝网购物车简易计算器页面简易计算器页面掌握脚本的基本结构掌握脚本的基本结构(Script标签标签)JavaScript基本语法基本语法变量的定义与赋值变量的定义与赋值数据类型与转换函数等数据类型与转换函数等运算符和控制语句运算符和控制语句灵活运用高级语法自定义函数灵活运用高级语法自定义函数function本讲目标本讲目标回顾回顾HTML-1 常用的常用的HTML标签有哪些？标签有哪些？标签名称标签名称说说 明明界定一个完整的界

3、定一个完整的HTML文档文档定义文档的头部定义文档的头部设定显示在浏览器左上方的标题内容设定显示在浏览器左上方的标题内容定义文档的主体定义文档的主体定义文字的字体、字号和颜色定义文字的字体、字号和颜色定义文本的段落定义文本的段落在文本中插入一个换行在文本中插入一个换行插入一张图像插入一张图像插入一条水平分隔线插入一条水平分隔线定义超级链接定义超级链接实现页面中文字或图片的滚动实现页面中文字或图片的滚动 请说明表格的基本结构以及跨行、跨列的用法？请说明表格的基本结构以及跨行、跨列的用法？ 单元格内容单元格内容 单元格内容单元格内容 回顾回顾HTML-2 请简述表单的基本结构？常用表单元素有哪些？

4、请简述表单的基本结构？常用表单元素有哪些？ 如何使用样式表定义统一的字体外观和文本框的细边如何使用样式表定义统一的字体外观和文本框的细边框样式？框样式？表单的基本结构：表单的基本结构：常用的表单元素有：常用的表单元素有：文本框（文本框（text）、密码框（）、密码框（password）、单选按钮（）、单选按钮（radio）、）、复选框（复选框（checkbox）、列表框（）、列表框（和和）、）、按钮（按钮（button、submit和和reset）、多行文本框（）、多行文本框（）。）。统一的字体外观：统一的字体外观：font-family:黑体黑体;font-size:18px;color:#

5、FF0000;细边框样式：细边框样式： border-width:1px;border-style:solid;为什么要学为什么要学JavaScript 表单验证表单验证 页面动态效果页面动态效果演示示例演示示例2 2：层的切换层的切换 和和 树形菜单树形菜单等等 演示示例演示示例1 1：注册表单验证注册表单验证什么是什么是JavaScript脚本的基本结构脚本的基本结构 var count=0; document.write(淘宝网欢迎您！淘宝网欢迎您！); for(i=0;i5;i+) document.write(淘宝网欢迎您！淘宝网欢迎您！); BODY部分的内容部分的内容如何使用如何

6、使用JavaScript实现页面显示内容？实现页面显示内容？查看完整源代码查看完整源代码什么是什么是JavaScript脚本的执行原理脚本的执行原理应用服务器应用服务器IEIE解析解析HTML标签和标签和JavaScript脚本脚本从服务器端下载含从服务器端下载含JavaScript的页面的页面返回响应返回响应客户端请求包含客户端请求包含JS的页面的页面发送请求发送请求1浏览器输入浏览器输入23JavaScript的基本语法的基本语法脚本的基本结构脚本的基本结构var count=0;document.write(淘宝网欢迎您！淘宝网欢迎您！);for(var i=0;i5;i+) docum

7、ent.write(淘宝网欢迎您！淘宝网欢迎您！); BODY部分的内容部分的内容大家想想上面大家想想上面JavaScript代码与我们学过的代码与我们学过的Java、C#语言有相似的地方吗？语言有相似的地方吗？JavaScript的基本语法的基本语法类型转换类型转换注释注释控制语句控制语句运算符号运算符号变量变量基本语法基本语法 变量的声明和赋值变量的声明和赋值 var count; count = 5;定义变量定义变量赋值赋值 var 用于声明变量的关键字用于声明变量的关键字 count 变量名变量名var x, y, z = 10;var count = 10;同时声明和赋值变量同时声明

8、和赋值变量声明多个变量声明多个变量运算符号运算符号运算符对一个或多个变量或值（操作数）进行运算，并返运算符对一个或多个变量或值（操作数）进行运算，并返回一个新值回一个新值根据所执行的运算，运算符可分为以下类别：根据所执行的运算，运算符可分为以下类别：算术运算符算术运算符 +、-、 * 、 / 、%、+、-、-(求反求反)比较运算符比较运算符=、!=、=、=逻辑运算符逻辑运算符 &、|、！、！赋值运算符赋值运算符=逻辑控制语句逻辑控制语句if条件语句条件语句switch多分支语句多分支语句for、while循环语句循环语句if(条件条件) /JavaScript代码代码;else /JavaSc

9、ript代码代码;switch (表达式表达式) case 常量常量1 : JavaScript语句语句1; break; case 常量常量2 : JavaScript语句语句2; break; . default : JavaScript语句语句3; for(初始化初始化; 条件条件; 增量增量) 语句集语句集; while(条件条件) 语句集语句集;注释注释单行注释以单行注释以 / 开始，以行末结束开始，以行末结束例如：例如： /表示表示JavaScript代码的开始代码的开始多行注释以多行注释以 /* 开始，以开始，以 */ 结束，符号结束，符号 /* */ 指示中间的语句是该程序指示

10、中间的语句是该程序中的注释。中的注释。例如：例如：/* helloWorld.html 2007-9-29 第一个第一个JavaScript程序程序 */类型转换类型转换parseInt (字符串字符串) 将字符串转换为整型数字将字符串转换为整型数字 如如: parseInt (86)将字符串将字符串“86”转换为整型值转换为整型值86parseFloat(字符串字符串) 将字符串转换为浮点型数字将字符串转换为浮点型数字 如如: parseFloat(34.45)将字符串将字符串“34.45”转换为浮点值转换为浮点值34.45什么是函数什么是函数函数的含义：类似于函数的含义：类似于Java中的

11、方法，是完成特定任务中的方法，是完成特定任务的代码语句块的代码语句块如果希望点击某个按钮后在页面显示如果希望点击某个按钮后在页面显示“HelloWorld”，并且能够控制语句显示的次数，怎么办？并且能够控制语句显示的次数，怎么办？演示示例演示示例3：调用函数输出调用函数输出“HelloWorld”什么是函数什么是函数1、在页面中放置一个文本框和一个按钮，让用户在文本框、在页面中放置一个文本框和一个按钮，让用户在文本框中输入需要语句显示的次数中输入需要语句显示的次数2、把循环显示的代码放置到函数中，当点击按钮时，才调、把循环显示的代码放置到函数中，当点击按钮时，才调用函数显示用函数显示Hello

12、World经过分析，该如何解决上面问题？经过分析，该如何解决上面问题？使用自定义函数使用自定义函数 如何使用函数如何使用函数 创建函数创建函数 function 函数名函数名( 参数参数1,参数参数2， ) 语句语句; 调用函数调用函数 函数调用一般和表单元素的事件一起使用，调用格式为：函数调用一般和表单元素的事件一起使用，调用格式为： 事件名事件名函数名函数名 ;function showHello( ) var count=document.myForm.txtCount.value ; for( i=0; icount; i+) document.write(HelloWorld);表示

13、单击此按钮时，调用函数表示单击此按钮时，调用函数showHello( )执行执行小结小结1 1编写如图所示，编写如图所示，具有能对两个具有能对两个操作数进行加、操作数进行加、减、乘、除运减、乘、除运算的简易计算算的简易计算器器名为名为myform的表单的表单普通按钮普通按钮buttontext文本框文本框练习答案练习答案练习代码练习代码提示：加、减、乘、除四个按钮分别调用四提示：加、减、乘、除四个按钮分别调用四个函数实现两个数相加、相减、相乘和相除个函数实现两个数相加、相减、相乘和相除如何使用函数如何使用函数在小结在小结1中，中，4个按钮调用的函数的代码很类似，个按钮调用的函数的代码很类似，怎

14、么优化代码？怎么优化代码？查看小结查看小结1练习答案代码练习答案代码 比较比较4个函数，只有运算符号不一样，将运算个函数，只有运算符号不一样，将运算符号作为函数的参数即可。怎么用一个函数来符号作为函数的参数即可。怎么用一个函数来代替代替4个结构相似的函数？个结构相似的函数？使用有参函数使用有参函数定义有参函数定义有参函数JavaScript 代码function compute(op) var num1,num2; num1=parseFloat(document.myform.txtNum1.value); num2=parseFloat(document.myform.txtNum2.va

15、lue);if (op=+) document.myform.txtResult.value=num1+num2 ; if (op=-) document.myform.txtResult.value=num1-num2 ; if (op=*) document.myform.txtResult.value=num1*num2 ; if (op=/ & num2!=0) document.myform.txtResult.value=num1/num2 ; 定义有参函数定义有参函数compute( )，完成计算功能，完成计算功能，op参数代表运算符号。参数代表运算符号。 调用有参函数调用有参函

16、数JavaScript 代码代码 调用有调用有参函数参函数查看完整代码查看完整代码常见错误常见错误1 function compute(op) x=5; var num1,num2; num1=parseFloat(document.myform.txtNum1.value); num2=parseFloat(document.myform.txtNum2.value); if (op=+) document.myform.txtResult.value=num1+num2 ; if (op=-) document.myform.txtResult.value=num1-num2 ; 变量可以

17、不声明而直接赋值。如变量可以不声明而直接赋值。如x=5; 不推荐使用，容易出错。不推荐使用，容易出错。常见错误常见错误2 function compute(op) var Num1,num2; num1=parseFloat(document.myform.txtNum1.value); num2=parseFloat(document.myform.txtNum2.value); if (op=+) document.myform.txtResult.value=num1+num2 ; if (op=-) document.myform.txtResult.value=num1-num2 ; JavaScript大小写非常敏感大小写非常敏感常见错误常见错误3 function compute(op) var num1,num2; num1=document.myform.txtNum1.value; num2=document.myform.txtNum2.value; if (op=+)document.myform.txtResult.value=num1+num2 ; i