第02章-JavaScript语法.ppt

单击此处编辑母版标题样式,编辑母版文本样式,第二级,第三级,第四级,第五级,*,JavaScript,语言与,Ajax,应用,(,第二版）,*,JavaScript,语言与,Ajax,应用（第二版,）,主编 董宁 陈,丹,中国水利水电,出版社,第,2,章,JavaScript,语法,2.1 JavaScript,语法基础,2.2 JavaScript,数据类型,2.3 JavaScript,运算符,2.4 JavaScript,语句,2.5 JavaScript,函数,08 五月 2025,JavaScript,语言与,Ajax,应用,(,第二版）,2,2.1 JavaScript,语法基础,2.1.1,变量,2.1.2,关键字与保留字,2.1.3,原始值与引用值,08 五月 2025,JavaScript,语言与,Ajax,应用,(,第二版）,3,2.1.1,变量,变量（,variable,）是相对于常量而言的，常量通常是一个不会改变的固定值，而变量是对应到某个值的一个符号，这个符号中的值可能会随着程序的执行而改变，因此称为“变量”。,在,JavaScript,脚本语言中，声明变量的过程相当简单，,JavaScript,脚本语言使用关键字,var,作为其唯一的变量标识符，其用法为在关键字,var,后面加上变量名。,08 五月 2025,JavaScript,语言与,Ajax,应用,(,第二版）,4,2.1.1,变量,JavaScript,中的变量命名同其他语言非常相似，这里要注意以下几点：,第一个字符必须是字母（大小写均可），下划线（,_,）或者美元符号（,$,）；,后续的字符可以是字母、数字、下划线或者美元符号；,变量名称不能是关键字或保留字；,不允许出现中文变量名，且大小写敏感。,08 五月 2025,JavaScript,语言与,Ajax,应用,(,第二版）,5,2.1.2,关键字与保留字,ECMA-262,定义了,JavaScript,支持的一套关键字（,keyword,）。根据规定，关键字不能用作变量名或函数名。,08 五月 2025,JavaScript,语言与,Ajax,应用,(,第二版）,6,表,2-1 JavaScript,关键字,break,case,catch,continue,default,delete,do,else,finally,for,function,if,in,instanceof,new,return,switch,this,throw,try,typeof,var,void,while,with,2.1.2,关键字与保留字,JavaScript,还定义了一套保留字（,reserved word,）。保留字在某种意义上是为将来的关键字而保留的单词。因此，保留字也不能被用作变量名或函数名。,08 五月 2025,JavaScript,语言与,Ajax,应用,(,第二版）,7,表,2-2 JavaScript,保留字,abstract,boolean,byte,char,class,const,debugger,double,enum,export,extends,final,float,goto,implements,import,int,interface,long,native,package,private,protected,public,short,static,super,synchronized,throws,transient,volatile,2.1.3,原始值与引用值,在,JavaScript,中，变量可以存放两种类型的值，即原始值和引用值。,原始值指的就是代表原始数据类型（基本数据类型）的值，即,Undefined,、,Null,、,Number,、,String,、,Boolean,类型所表示的值。,引用值指的就是复合数据类型的值，即,Object,、,Function,、,Array,、以及自定义对象，等等。,08 五月 2025,JavaScript,语言与,Ajax,应用,(,第二版）,8,2.2 JavaScript,数据类型,2.2.1,基础数据类型,2.2.2,数据类型转换,2.2.3,引用类型,08 五月 2025,JavaScript,语言与,Ajax,应用,(,第二版）,9,2.2.1,基础数据类型,变量包含多种类型，,JavaScript,脚本语言支持的基本数据类型包括,Number,型、,String,型、,Boolean,型、,Undefined,型和,Null,型，分别对应于不同的存储空间。,08 五月 2025,JavaScript,语言与,Ajax,应用,(,第二版）,10,表,2-3,基本数据类型,类型,举例,简要说明,Number,45,-34,32.13,3.7E-2,数值型数据,String,name,Tom,字符型数据，需加双引号或单引号,Boolean,true,flase,布尔型数据，不加引号，表示逻辑真或假,Undefined,表示未定义,Null,null,表示空值,2.2.2,数据类型转换,JavaScript,会自动将某一个类型的数据转换成另一个类型的数据。,JavaScript,隐式类型转换的规则是：将类型转换到环境中应该使用的类型。,JavaScript,中除了可以隐式转换数据类型之外，还可以显式转换数据类型。显式转换数据类型可以增强代码的可读性。常用的类型转换的方法有以下几种。,08 五月 2025,JavaScript,语言与,Ajax,应用,(,第二版）,11,2.2.2,数据类型转换,1,转换成字符串,JavaScript,中三种主要的原始值布尔值、数字、字符串以及其它对象都有,toString(),方法，可以把它们的值转换成字符串。,各种类型向字符串转换的结果如下：,undefined,值：转换成“,undefined”,；,null,值：转换成“,null”,；,布尔值：值为,true,，转换成“,true”,；值为,false,，转换成“,false”,；,数字型值：,NaN,或数字型变量的完整字符串；,其他对象：如果该对象的,toString(),方法存在，则返回,toString,方法的返回值，否则返回,undefined,。,08 五月 2025,JavaScript,语言与,Ajax,应用,(,第二版）,12,2.2.2,数据类型转换,2,转换成数字,提取整数的,parseInt(),方法,parseInt(),方法用于将字符串转换为整数，其格式为：,parseInt(numString,，,radix),提取浮点数的,parseFloat(),方法,parseFloat(),方法用于字符串转换为浮点数，其格式为：,parseFloat(numString),08 五月 2025,JavaScript,语言与,Ajax,应用,(,第二版）,13,2.2.2,数据类型转换,3,基本数据类型转换,在,JavaScript,中可以使用如下,3,个函数来将数据转换成数字型、布尔型和字符串型，下面看一下它的几个强制转换的函数：,Boolean(value),：把值转换成,Boolean,类型,Nnumber(value),：把值转换成数字（整型或浮点数）,String(value),：把值转换成字符串,08 五月 2025,JavaScript,语言与,Ajax,应用,(,第二版）,14,2.2.3,引用类型,1,对象,JavaScript,中的对象是一个属性的集合，其中的每一个都包含一个基本值。对象中的数据时已命名的数据，通常作为对象的属性来引用，这些属性可以访问值。保存在属性中的每个值都可以是一个值或另一个对象，甚至是一个函数。对象使用花括号创建，例如下面的代码创建了一个名为,myObject,的空对象：,var myObject=;,这里有一个带有几个属性的对象：,var dvdCatalog=,identifier:1,name:Coho Vineyard,;,08 五月 2025,JavaScript,语言与,Ajax,应用,(,第二版）,15,2.2.3,引用类型,2,数组,数组和对象一样，也是一些数据的集合，这些数据也可以是字符串类型、数字型、布尔型，或者是引用型。例如下面的定义：,var score=56,34,23,76,45;,上述语句创建数组,score,，中括号“,”,内的成员为数组元素。由于,JavaScript,是弱类型语言，因此不要求目标数组中各元素的数据类型均相同，例如：,var score=56,34,23,76,45;,08 五月 2025,JavaScript,语言与,Ajax,应用,(,第二版）,16,2.3 JavaScript,运算符,2.3.1,算术运算符,2.3.2,逻辑运算符,2.3.3,关系运算符,2.3.4,位运算符,08 五月 2025,JavaScript,语言与,Ajax,应用,(,第二版）,17,2.3.1,算术运算符,算术运算符是最简单、最常用的运算符，可以使用它们进行通用的数学计算,08 五月 2025,JavaScript,语言与,Ajax,应用,(,第二版）,18,表,2-5,算术运算符,运算符,表达式,说明,示例,+,x+y,返回,x,加,y,的值,x=4+2,，结果为,6,-,x-y,返回,x,减,y,的值,x=8-6,，结果为,2,*,x*y,返回,x,乘以,y,的值,x=3*5,，结果为,15,/,x/y,返回,x,除以,y,的值,x=6/3,，结果为,2,%,x%y,返回,x,与,y,的模（,x,除以,y,的余数）,x=8%3,，结果为,2,+,x+,、,+x,返回数值递增、递增并返回数值,-,x-,、,-x,返回数值递减、递减并返回数值,2.3.2,逻辑运算符,逻辑运算符通常用于执行布尔运算，,JavaScript,脚本语言的逻辑运算符包括 “,&”,、“,|”,和“,!”,等，用于两个逻辑型数据之间的操作，返回值的数据类型为布尔型。,08 五月 2025,JavaScript,语言与,Ajax,应用,(,第二版）,19,表,2-7,逻辑运算符,运算符,表达式,说明,示例,&,表达式,1&,表达式,2,若两边表达式的值都为,ture,，则返回,ture,；任意一个值为,false,，则返回,false,53&53&56,返回,false,|,表达式,1|,表达式,2,只有表达式的值都为,false,时，才返回,false,，否则返回,true,53|56,返回,true,57|56,返回,false,!,!,表达式,求反。若表达式的值为,true,，则返回,false,，否则返回,true,!(53),返回,false,!(56),返回,ture,2.3.3,关系运算符,关系运算符用于比较两个操作数的大小，其比较的结果是一个布尔型的值。,08 五月 2025,JavaScript,语言与,Ajax,应用,(,第二版）,20,表,2-8,关系运算符,运算符,说明,示例,=,相等，若两数据相等，则返回布尔值,true,，否则返回,false,num=8,!=,不相等，若两数据不相等，则返回布尔值,true,，否则返回,false,num!=8,大于，若左边数据大于右边数据，则返回布尔值,true,，否则返回,false,num8,小于，若左边数据小于右边数据，则返回布尔值,true,，否则返回,false,num=,大于或等于，若左边数据大于或等于右边数据，则返回布尔值,true,，否则返回,false,num=8,=,小于或等于，若左边数据小于或等于右边数据，则返回布尔值,true,，否则返回,false,num,算术右移，将左侧数据的二进制值向左移动由右侧数值表示的位数，右边空位补,0,92,算术左移，将左侧数据的二进制值向右移动由右侧数值表示的位数，忽略被移出的位,9,逻辑右移，将左边数据表示的二进制值向右移动由右边数值表示的位数，忽略被移出的位，左侧空位补,0,92,2.4 JavaScript,语句,2.4.1,选择语句,2.4.2,循环语句,2.4.3,跳转语句,2.4.4,异常处理语句,08 五月 2025,JavaScript,语言与,Ajax,应用,(,第二版）,22,2.4.1,选择语句,1,if,语句,if,条件假设语句是比较简单的一种选择结构语句，若给定的逻辑条件表达式为真，则执行一组给定的语句。其基本结构如下：,if(conditions),statements;,08 五月 2025,JavaScript,语言与,Ajax,应用,(,第二版）,23,2.4.1,选择语句,switchcase,语句提供了,ifelse,语句的一个变通形式，可以从多个语句块中选择其中一个执行。,其基本语法结构如下：,switch(a),case a1:,statement 1;,break;,case a2:,statement 2;,break;,default:,statement n;,08 五月 2025,JavaScript,语言与,Ajax,应用,(,第二版）,24,2.4.1,选择语句,在,JavaScript,脚本语言中，“,?.:”,运算符用于创建条件分支。在动作较为简单的情况下，较之,ifelse,语句更加简便，其语法结构如下：,(condition)?statementA:statementB;,载入上述语句后，首先判断条件,condition,，若结果为真则执行语句,statementA,，否则执行语句,statementB,。,08 五月 2025,JavaScript,语言与,Ajax,应用,(,第二版）,25,2.4.2,循环语句,JavaScript,中的循环语句包括,while,语句、,dowhile,语句、,for,语句和,forin,语句,4,种。,1,while,语句,while,语句属于基本循环语句，用于在指定条件为真时重复执行一组语句。,while,语句的语法结构如下：,while(conditions),statements;,08 五月 2025,JavaScript,语言与,Ajax,应用,(,第二版）,26,2.4.2,循环语句,2,dowhile,语句,dowhile,语句类似于,while,语句，不同的是,while,语句是先判断逻辑条件表达式的值是否为,true,之后再决定是否执行循环体中的语句，而,dowhile,循环语句是先执行循环体中的语句之后，再判断逻辑条件表达式是否为,true,，如果为,true,则重复执行循环体中的语句。,dowhile,语句的语法结构如下：,do,statements;,while(condition);,08 五月 2025,JavaScript,语言与,Ajax,应用,(,第二版）,27,2.4.2,循环语句,3,for,语句,for,循环语句也类似于,while,语句，使用起来更为方便。,for,语句按照指定的循环次数，循环执行循环体内语句（或语句块），它提供的是一种常用的循环模式，即初始化变量、判断逻辑条件表达式和改变变量值。,for,语句的语法结构如下：,for(initialization;condition;loop-update),statements;,08 五月 2025,JavaScript,语言与,Ajax,应用,(,第二版）,28,2.4.2,循环语句,4,forin,语句,使用,forin,循环语句可以遍历数组或者对指定对象的属性和方法进行遍历，其语法结构如下：,for(,变量名,in,对象名,),statements;,08 五月 2025,JavaScript,语言与,Ajax,应用,(,第二版）,29,2.4.3,跳转语句,JavaScript,跳转语句分为,break,语句和,continue,语句。,1,break,语句,使用,break,语句可以无条件地从当前执行的循环结构或者,switch,结构的语句块中中断并退出，其语法如下所示：,break;,由于它是用来退出循环或者,switch,语句，所以只有当它出现在这些语句时，这种形式的,break,语句才是合法的。,08 五月 2025,JavaScript,语言与,Ajax,应用,(,第二版）,30,2.4.3,跳转语句,2,continue,语句,continue,语句的工作方式与,break,语句有点类似，但是其作用不同。,continue,语句是只跳出本次循环而立即进入到下一次循环；,break,语句则是跳出循环后结束整个循环。,08 五月 2025,JavaScript,语言与,Ajax,应用,(,第二版）,31,2.4.4,异常处理语句,JavaScript,可以捕获异常并进行相应的处理，通常用到的异常处理语句包括,throw,和,try-catch-finally,语句两种。,1,throw,语句,throw,（抛出）语句的作用是抛出一个异常。所谓的抛出异常，就是用新号通知发生了异常情况或错误。,throw,语句的预防代码如下所示：,throw,表达式,;,08 五月 2025,JavaScript,语言与,Ajax,应用,(,第二版）,32,2.4.4,异常处理语句,2,try-catch-finally,语句,try-catch-finally,语句是,JavaScript,中的用于处理异常的语句，该语句与,throw,语句不同。,throw,语句只是抛出一个异常，但对该异常并不进行处理，而,try-catch-finally,语句可以处理所抛出的异常。其语法形式如下所示：,try,/,语句块,1,：要执行的代码,catch(e),/,语句块,2,：处理异常的代码,finally,/,语句块,3,：无论异常发生与否，都会执行的代码,08 五月 2025,JavaScript,语言与,Ajax,应用,(,第二版）,33,2.5 JavaScript,函数,2.5.1,函数的创建与调用,2.5.2,函数的参数,2.5.3,函数的属性与方法,2.5.4,闭包,08 五月 2025,JavaScript,语言与,Ajax,应用,(,第二版）,34,2.5.1,函数的创建与调用,函数由函数定义和函数调用两部分组成，应首先定义函数，然后再进行调用，以养成良好的编程习惯。,函数的定义应使用关键字,function,，其语法规则如下：,function funcName(parameters),statements;,return,表达式,;,函数定义过程结束后，可在文档中任意位置调用该函数。引用目标函数时，只需在函数名后加上小括号即可。若目标函数需引入参数，则需在小括号内添加传递参数。如果函数有返回值，可将最终结果赋值给一个自定义的变量并用关键字,return,返回。,08 五月 2025,JavaScript,语言与,Ajax,应用,(,第二版）,35,2.5.2,函数的参数,在,JavaScript,中提供了一个,arguments,对象，该对象可以获取从,JavaScript,代码中传递过来的参数，并将这些参数存放在,arguments,数组中，因此也可以通过,arguments,对象来判断传递过来的参数的个数，引用属性,arguments.length,即可。,arguments,为数组，因此通过,argumentsi,可以获得实际传递的参数的值。,由于,JavaScript,是一种无类型的语言，因此在定义函数时，不需要为函数的参数指定数据类型。事实上，,JavaScript,也不会去检测传递过来的参数的类型是否符合函数的需要。如果一个函数对参数的要求很严格，那么可以在函数体内使用,typeof,运算符来检测传递过来的参数是否符合要求。,08 五月 2025,JavaScript,语言与,Ajax,应用,(,第二版）,36,2.5.3,函数的属性与方法,1,length,属性,函数的,length,属性与,arguments,对象的,length,属性不一样，,arguments,对象的,length,属性可以获得传递给函数的实际参数的个数，而函数的,length,属性可以获得函数定义的参数个数。,同时,arguments,对象的,length,属性只能在函数体内使用，而函数的,length,属性可以在函数体之外使用。,08 五月 2025,JavaScript,语言与,Ajax,应用,(,第二版）,37,2.5.3,函数的属性与方法,2,call(),和,apply(),方法,call(),方法的使用语法如下：,函数名,.call(,对象名,参数,1,参数,2,),apply(),方法的使用语法如下：,函数名,.apply(,对象名,数组,),由上可以看出，两个方法的区别是，,call(),方法直接将参数列表放在对象名之后，而,apply(),方法却是将列表放在数组里，并将数组放在对象名之后。,08 五月 2025,JavaScript,语言与,Ajax,应用,(,第二版）,38,2.5.4,闭包,JavaScript,支持闭包（,closure,）。,所谓闭包，是指词法表示包括不必计算的变量的函数，也就是说，该函数能使用函数外定义的变量。,在,JavaScript,中使用全局变量时一个简单的闭包实例。,var sMessage=Hello World!;,function sayHelloWorld(),alert(sMessage);,sayHelloWorld();,08 五月 2025,JavaScript,语言与,Ajax,应用,(,第二版）,39,