《WEB前端开发技术实用教程》课件第05章 交互动态大师-Javascript技术.pptx

1、1 1目录5.1 Javascript脚本语言概述5.2 网页中引入Javascript脚本5.3 Javascript语法规范及特点5.4 Javascript变量与数据类型5.5 Javascript运算符与表达式5.7 Javascript自定义函数5.6 Javascript流程控制语句5.8 Javascript常见系统函数5.1 Javascript概述u由Netscape(网景)公司开发开发，最初取名LiveScript,于1995年11月与Sun公司联合把其改名为JavaScript。uJavascript并不是Java语言，而是两种独立的语言u是世界上流行的编程语言之一,Ja

2、vaScript的流行完全在于它作为WWW的脚本语言的角色。u JavaScript是一种面向对象和事件驱动，并具有安全性能的脚本语言。5.1 Javascript概述uJavascript语言特点：脚本编写语言 基于对象的语言 简单性 动态性 跨平台5.1 Javascript概述Javascript的主要功能：制作网页特效 提供表单前端数据验证 窗口动态操作 减轻服务器端的负担 提高系统工作效率5.2 网页中引入Javascript脚本u1、直接在网页中使用标签插入Javascript代码：将JavaScript代码放入标记符中 document.write(“欢迎进入Javascript

3、教学课堂!);尽情享受学习的快乐!设置语言脚本代码5.2 网页中引入Javascript脚本为避免某些浏览器不完全支持JavaScript，而造成错误，可将JavaScript代码用注释语句括起来例如：5.2 网页中引入Javascript脚本u2、在网页中引入Javascript文件，后缀名为.js将代码独立存储为以.js 为扩展名的文件，利用src属性将该文件调入如：/此处不能再加Javascript语句。common.js文件内容如下：document.write(欢迎您学习JavaScript!);5.2 网页中引入Javascript脚本u3、在地址栏或标签中加入javascript

4、脚本例：例：javascript 5.3 Javascript语法规范及特点u语法规则u变量、常量、转义符u数据类型u数组u运算符、表达式u程序控制结构u函数5.3 Javascript语法规范及特点uJavaScript中的标识符 标识符是指JavaScript中定义的符号，合法的标识符举例：indentifler、username、user_name、_userName、$username 非法的标识符举例：int、98.3、Hello World（有空格）uJavaScript严格区分大小写 computer和Computer是两个完全不同的符号uJavaScript程序代码的格式 每条

5、功能执行语句的最后用分号（;）结束；每个词之间用空格、制表符、换行符或大括号、小括号这样的分隔符隔开 所有语句中的符号一律用半角uJavaScript程序的注释/*.*/中可以嵌套“/”注释，但不能嵌套“/*.*/”5.4 Javascript变量与数据类型u1、变量 变量的主要作用是存取数据、提供存放信息的容器。变量是一种使用方便的占位符，用于引用计算机内存地址，该地址可以存储Script运行时可更改的程序信息。5.4 Javascript变量与数据类型u变量的命名 以字母或下划线开头（不能以数字开头），后面接数字、字母或下划线。不能使用JavaScript中的关键字作为变量。如下图：变量名

6、区分大小写。如：变量myVar、myVAR 和myvar 是不同的变量breakdeletefunctionreturntypeofcasedoifswitchvarcatchelseinthisvoidcontinuefalseinstanceofthrowwhiledebuggerfinallynewtruewithdefaultfornulltry Javascript关键字5.4 变量、常量与数据类型u定义变量：var count；u变量赋值：count=5;u同时声明和赋值变量：var count=10;u声明多个变量：var x,y,z;u声明多个变量并赋值：var x=1,y=1

7、0,z=100;用于声明变量的关键字变量名格式：变量名=值；5.4 Javascript变量、常量与数据类型 var strWelcome=欢迎您！;var iCounter=10;iCounter=iCounter+1;document.write(strWelcome);document.write(iCounter);变量定义实例：变量定义实例：5.4 Javascript变量、常量与数据类型u常量：值不改变的量，如123、8.8、科学计数法等数值以及字符、字符串等。u转义符字符字符说明说明示例示例b退格符退格符alert(“这是第一句这是第一句b 这是第二句这是第二句”);f换页符换页

8、符alert(“这是第一句这是第一句f 这是第二句这是第二句”);n换行符换行符alert(“这是第一句这是第一句n 这是第二句这是第二句”);r回车符回车符alert(“这是第一句这是第一句r 这是第二句这是第二句”);t 制表符制表符alert(“这是第一句这是第一句t 这是第二句这是第二句”);5.4 Javascript变量、常量与数据类型数据类型数据类型说明说明示例示例整型整型整数整数1、20、-209浮点型浮点型带小数带小数5.5、89.45、555.68字符型字符型单个的字符，用单引号包围单个的字符，用单引号包围 a、b、c 字符串型字符串型多个字符，用双引号包围多个字符，用双引

9、号包围“hello”、“55.55”、“我我”布尔型布尔型真或假真或假true、false空空特殊关键字，表示不存在值特殊关键字，表示不存在值 null由于JavaScript采用弱类型的形式，因而一个数据的变量或常量不必首先作声明，而是在使用或赋值时确定其数据的类型的。5.4Javascript变量、常量与数据类型u判断类型：utypeof：用来判断操作数的类型 格式：typeof 操作数 或 typeof(操作数)说明：typeof 运算符把类型信息当作字符串返回。typeof 返回值有六种可能：number,string,boolean,object,function,和 undefin

10、ed.u如：typeof(“abc”)=string5.5 Javascript运算符与表达式u在定义完变量后，就可以对它们进行赋值、改变、计算等一系列操作，这一过程通常由表达式来完成，可以说它是变量、常量、布尔及运算符的集合。u表达式可以分为算术表述式、字符串表达式、赋值表达式以及布尔表达式等。5.5 Javascript运算符与表达式运算符类型运算符类型符号符号算术运算符算术运算符 +,-,*,/,%,+,-,逻辑运算符逻辑运算符&,|,!比较运算符比较运算符 =,!=,=,=,!=字符串运算符字符串运算符 +赋值运算符赋值运算符 =,+=,-=,*=,/=,%=,条件运算符条件运算符 c

11、ondition?value1:value25.5 Javascript运算符与表达式u1、算术运算符运算符意义运算符意义运算符意义+加加(Addition)/除除(Division)-递减递减(Decrement)-减减(Subtraction)%求余求余(Modulus)-取负值取负值(Unary Negation)*乘乘(Multiplication)+递增递增(Increment)5.5 Javascript运算符与表达式u2、赋值运算符运算符运算符意义意义运算符运算符意义意义=x=5/=x=x/y+=x=x+y%=求余赋值求余赋值=x=x-y*=x=x*yx+=y 等价于等价于 x=

12、x+yx%=y 等价于等价于 x=x%y5.5 Javascript运算符与表达式u3、比较运算符操作符操作符描述描述举例举例A=B如果两个操作数相等，如果两个操作数相等，返回返回truePsw=passwordA!=B如果两个操作数不等，如果两个操作数不等，返回返回truemobile.length!=11A=B如果如果A大于或者等于大于或者等于B，返回，返回truetries=2AB如果如果A大于大于B，返回返回truemflag20A=b如果如果A小于或等于小于或等于B，返回返回truei=0AB如果如果A小小于于B，返回返回truetries10注意比较：注意比较：=与与=的区别的区别

13、思考：你能说出思考：你能说出a=b与与a=b的含义吗？的含义吗？5.5 Javascript运算符与表达式u4、逻辑运算符操作符操作符描述描述口诀口诀举例举例A&B逻辑与逻辑与(AND)，若，若a,b都是都是ture，则结果为则结果为ture一假即为假，全一假即为假，全真才为真真才为真(59)|(4=2)!A逻辑非逻辑非(NOT)，若，若a是是ture，则结果为则结果为false。真变为假，假变真变为假，假变为真为真!(3=8)5.5 Javascript运算符与表达式u5、字符串运算符 操作符操作符描述描述A+B将将A与与B的字符串内容连接的字符串内容连接A+=B将将A与与B的字符串连接并存

14、储到的字符串连接并存储到A中中5.5 Javascript运算符与表达式u5、字符串运算符 实例：var strHello=网页编程;var strResult=你好，;strResult+=strHello;/等价于：strResult=strResult+strHello;document.write(strResult);5.5 Javascript运算符与表达式u6、条件运算符形式：条件?值1:值2说明：当条件满足时，表达式返回值1；不满足时，返回值2也叫三目运算符5.5 Javascript运算符与表达式u6、条件运算符 a=(43)?5:7;b=(43)?5:7;document.

15、write(a);document.write();document.write(b);5.5 Javascript运算符与表达式u操作符的优先级：表中由上至下列出了操作符从高到低的优先级。5.6 Javascript流程控制语句u常见的基本流程结构有三种：顺序结构；分支结构（或选择结构）；循环结构u顺序结构流程图画法：5.6 Javascript流程控制语句u分支结构流程图画法：5.6 Javascript流程控制语句u循环结构流程图画法：5.6 Javascript流程控制语句u顺序结构uif条件选择语句uswitch选择语句uwhile循环语句udo while语句ufor循环语句ubr

16、eak与continue语句5.6 Javascript流程控制语句u选择结构：if语句if 语句语句else 语句语句 if 语句组语句组 else 语句组语句组 if 语句组语句组 else if 语句组语句组 else 语句组语句组 5.6 Javascript流程控制语句u选择结构：if语句实例：实例：var iHour=13;if(iHour 12)document.write(早上好！早上好！);else document.write(下午好！下午好！);5.6 Javascript流程控制语句uif练习：制作一个考试成绩自动分级程序 输入学生考试成绩 90分以上，评定为“优”75

17、到90分，评定为“良”60到75分，评定为“中”60分以下，评定为“差”5.6 Javascript流程控制语句uIf练习：计算个人工资所得税级数扣除三险一金后月收入（元）税率(%)速算扣除数（元）183000元45134755.6 Javascript流程控制语句u步骤1：u算出自己的应纳税额本人月收入-个税“起征点”3000元u步骤2：u算出自己的个税应纳税额对应的税率-速算扣除数u举例：u某公司职员在扣除三险一金后的月收入为10000元，位于上表中的第3档。u对应的税率为20%，速算扣除数为525，u则应纳税额为（10000元-个税起征点3000元）7000元u个税700020%-525

18、元=875元。5.6 Javascript流程控制语句u选择结构：switch语句switch()case：；break;case：；break;default：；5.6 Javascript流程控制语句switch语句实例：var x=2;switch(x)case 1:alert(“monday”);break;case 2:alert(“Tuesday”);break;case 3:alert(“wendnesday”);break;default:alert(“sorry,I dont know”);var x=2;switch(x)case 1:case 2:case 3:case

19、4:case 5:alert(“working day”);break;default:alert(“off day”);5.6 Javascript流程控制语句uswitch练习：获取指定月份的天数 根据用户输入月份返回当月天数 例如输入1,给用户返回1月为31天5.6 Javascript流程控制语句u循环语句：u包括：for语句 while语句 dowhile语句 break语句和continue语句 5.6 Javascript流程控制语句u循环结构：for语句for(初始值初始值；条件条件；变化量变化量)for(var i=5;i 0;i-)document.write(i=,i,)

20、;5.6 Javascript流程控制语句 for 语句举例：var iSum=0;for(i=0;i=100;i+)iSum+=i;document.write(iSum);5.6 Javascript流程控制语句如何实现5.6 Javascript流程控制语句u课后习题：u自动生成一个取值从1950-2015范围的下拉列表5.6 Javascript流程控制语句语法语法:while（条件）语句段说明说明:当条件为真时，重复循环，否则退出循环。var x=1;while(x 3)/如果这里加上分号会怎样呢？alert(“x=”+x);x+;u 循环结构：循环结构：while语句语句5.6 J

21、avascript流程控制语句u循环结构：while语句 var iSum=0;var i=0;while(i=100)iSum+=i;i+;document.write(iSum);5.6 Javascript流程控制语句u循环结构：do while 语句u语法：do 执行语句块;while(条件表达式语句）;/注意这里的分号 var i=5;do document.write(i=,i,);i-;while(i 0)5.6 Javascript流程控制语句ubreak与continue语句：ubreak：中断，中止；说明：强制中止并退出当前循环uContinue:继续 说明：中止此次循环进

22、入下一轮循环5.6 Javascript流程控制语句 break语句：for(i=1;i 20;i+)if(i%5=0)break;document.write(i+);5.6 Javascript流程控制语句Continue语句：for(i=1;i 20;i+)if(i%5=0)continue;document.write(i+);5.6 Javascript流程控制语句 u作业：制作一个猜价格游戏u问题描述：用户随意猜一件商品价格，根据用户猜测的价格与标准值进行对比，并给出相应提示，以便下次猜测能接近标准值，每个用户有五次机会。5.7 Javascript自定义函数u函数的定义和调用u全

23、局变量与局部变量u函数的返回值5.7 Javascript自定义函数u作用：一次定义，多次使用；减少代码量，程序结构清晰，易于管理。函数1。函数2。函数1。主程序。函数3。函数1。函数2。函数35.7 Javascript自定义函数u函数的定义：定义函数的注意事项：定义函数的注意事项：易于识别易于识别 功能模块化功能模块化 放置在程序开始放置在程序开始部分部分function 函数名(参数1，参数2，)return 5.7 Javascript自定义函数u定义无参函数的一般形式为:u调用：函数名();function函数名()函数体;5.7 Javascript自定义函数u定义有参函数的一般形

24、式:u调用：函数名(实际参数表列);function 函数名(形式参数表列)语句部分 5.7 Javascript自定义函数u函数参数：形参和实参 形参：函数名后面括号中的变量名称为“形式参数”（简称“形参”）实参：主调函数中调用一个函数时，函数名后面括号中的参数(可以是一个表达式)称为“实际参数”（简称“实参”）5.7 Javascript自定义函数u函数的实际参数：arguments arguments数组用来存储各个参数的值 arguments.length 获取参数个数 arguments0,arguments1,argumentsarguments.length-1 分别用来引用各个

25、参数的值实例：求任意个数的最大值function s_max()var temp=arguments0;for(var i=1;iarguments.length;i+)if(tempargumentsi)temp=argumentsi;return temp;document.write(s_max(12,-1,234,998,13);5.7 Javascript自定义函数u函数返回值：return后面的括号中的值作为函数带回的值（称函数返回值）u有返回值的函数调用：变量 函数名（传递给函数的参数1,传递给函数的参数2,）在程序中直接使用返回的结果，例如：alert(“sum=”+squar

26、e(2,3);5.7 Javascript自定义函数u函数定义和调用实例：function getsqrt(inum)var itemp=inum*inum;return itemp;var result=getsqrt(8);document.write(result);inum形参“8”为实参调用函数函数的定义返回itemp的值将得到结果用变量保存函数function2局部变量b函数function3局部变量c全局变量ff函数function1局部变量a全局变量ff可以被function1、function2、function3访问局部变量a、b、c只能在function1、functio

27、n2、Function3内部调用5.7 Javascript自定义函数u变量的作用域 全局变量（Global variable）：每个函数都可以访问的变量 局部变量（Local variable）：只能在函数体内部使用的变量5.7 Javascript自定义函数u变量的作用域 var gv=JavaScript;/gv是全局变量是全局变量 function test()var lv=VBScript;/lv是局部变量是局部变量 document.write(gv=+gv+);document.write(lv=+lv+);test();document.write(document的输出：的输

28、出：);document.write(gv=+gv+);document.write(lv=+lv+);函数定义2：Function()构造函数u形式：uvar 变量=new Function(参数1,参数2,函数体);u如：var f=new Function(x,y,return x*y;);u基本等价于：function f(x,y)return x*y;Function()构造函数可以接受任意多个字符串参数，最后一个参数时函数主体，可以包含任何javascript语句，之间用分号分隔；如果定义的函数没有参数，只需给构造函数传递一个字符串（即函数主体）即可。Function()构造函数的

29、用途：允许动态的简历和编译一个函数，不会将我们限制在function语句预编译的函数体中。负效应就是每次调用一个函数是，Function()构造函数都要对它进行编译。在循环体或经常使用的函数中，不想频繁地调用这个构造函数。能将函数定义为javascript表达式的一部分，而不是将其定义为一个语句在javascript1.1及以后版本中使用函数定义3：函数直接量u函数直接量是一个表达式，可以定义匿名函数。u形式：var 变量=function(x,y)return x*y;三种函数定义形式比较：1)function f(x,y)return x*y;2)var f=new Function(x,

30、y,return x*y);3)var f=function(x,y)return x*y;函数直接量与Function（）方式更适合只是用一次无需命名的函数在javascript1.2及其后版本中使用递归函数u所谓递归函数就是函数在自身的函数体内调用自身，使用递归函数时一定要当心，处理不当将会使程序进入死循环，递归函数只在特定的情况下使用，比如处理阶乘问题。u语法：function functionName(parameters1)functionName(parameters2);参数说明：functionName：递归函数名称。递归函数u实例：求阶乘function f(x)if(x=1

31、)return 1;elsereturn x*f(x-1);document.write(10的阶乘为：+f(10);定义递归函数时需要两个必要条件：1、包括一个结束递归的条件，如上例：return 1;2、包括一个递归调用语句，如上例：return x*f(x-1);5.8 Javascript常见系统函数ueval()：用于计算字符串表达式的值 uparseInt()：将数据类型转换成整型uparseFloat()：将数据类型转换成浮点型uisNaN()：用于验证参数是否为 NaN（非数字）uescape()：对 String 对象编码以便它们能在所有计算机上可读uunescape()：解

32、码用 escape方法进行了编码的 String 对象。udecodeURI-解码encodeURI函数编码的字符串udecodeURIComponent-解码encodeURIComponent函数编码的字符串uencodeURI-转义某些字符串对URI编码uencodeURIComponent-转义某些字符串对URI的组件编码5.8 Javascript常见系统函数ueval 函数：用于计算字符串表达式的值 uisNaN 函数：用于验证参数是否为 NaN（非数字）var str1=prompt(“输入一个表达式，我给您计算,1+1);var result=eval(str1);document.write(str1+=+result);var x=prompt(输入一些数据,0);if(isNaN(x)alert(x+不是一个数字);else alert(x+是一个数字);5.8 Javascript常见系统函数u实例：var a=parseint(123china);var b=parsefloat(123.12china);document.write(a+);document.write(b);课后习题u编写一个函数，根据税前工资求出实际工资u编写一个函数，做一个简易计算器传道，授业，解惑