最新JavaScript语言与Ajax应用第02章 JavaScript语法(共40张PPT课件)

《最新JavaScript语言与Ajax应用第02章 JavaScript语法(共40张PPT课件)》由会员分享，可在线阅读，更多相关《最新JavaScript语言与Ajax应用第02章 JavaScript语法(共40张PPT课件)（40页珍藏版）》请在装配图网上搜索。

1、JavaScript语言(yyn)与Ajax应用（第二版）主编(zhbin)董宁 陈丹中国水利水电出版社第一页，共四十页。第2章 JavaScript语法(yf)2.1 JavaScript语法基础(jch)2.2 JavaScript数据类型 2.3 JavaScript运算符 2.4 JavaScript语句 2.5 JavaScript函数 05 五月 2023JavaScript语言与Ajax应用(第二版）2第二页，共四十页。2.1 JavaScript语法(yf)基础 2.1.1 变量(binling)2.1.2 关键字与保留字 2.1.3 原始值与引用值 05 五月 2023Jav

2、aScript语言与Ajax应用(第二版）3第三页，共四十页。2.1.1 变量(binling)变量（variable）是相对于常量而言的，常量通常是一个不会改变的固定值，而变量是对应到某个值的一个符号，这个符号中的值可能会随着程序的执行而改变，因此(ync)称为“变量”。在 JavaScript脚本语言中，声明变量的过程相当简单，JavaScript 脚本语言使用关键字 var作为其唯一的变量标识符，其用法为在关键字 var后面加上变量名。05 五月 2023JavaScript语言与Ajax应用(第二版）4第四页，共四十页。2.1.1 变量(binling)JavaScript中的变量(b

3、inling)命名同其他语言非常相似，这里要注意以下几点：第一个字符必须是字母（大小写均可），下划线（_）或者美元符号（$）；后续的字符可以是字母、数字、下划线或者美元符号；变量名称不能是关键字或保留字；不允许出现中文变量名，且大小写敏感。05 五月 2023JavaScript语言与Ajax应用(第二版）5第五页，共四十页。2.1.2 关键字与保留字 ECMA-262定义(dngy)了JavaScript支持的一套关键字（keyword）。根据规定，关键字不能用作变量名或函数名。05 五月 2023JavaScript语言(yyn)与Ajax应用(第二版）6t表表2-1 JavaScript

4、关键字关键字breakcasecatchcontinuedefaultdeletedoelsefinallyforfunctionifininstanceofnewreturnswitchthisthrowtrytypeofvarvoidwhilewith第六页，共四十页。2.1.2 关键字与保留字 JavaScript还定义了一套保留字（reserved word）。保留字在某种意义上是为将来(jingli)的关键字而保留的单词。因此，保留字也不能被用作变量名或函数名。05 五月 2023JavaScript语言与Ajax应用(yngyng)(第二版）7t表表2-2 JavaScript2-

5、2 JavaScript保留字保留字 abstractbooleanbytecharclassconstdebuggerdoubleenumexportextendsfinalfloatgotoimplementsimportintinterfacelongnativepackageprivateprotectedpublicshortstaticsupersynchronizedthrowstransientvolatile第七页，共四十页。2.1.3 原始(yunsh)值与引用值 在 JavaScript 中，变量可以存放两种类型的值，即原始值和引用值。原始值指的就是代表原始数据类型（基本

6、数据类型）的值，即Undefined、Null、Number、String、Boolean类型所表示(biosh)的值。引用值指的就是复合数据类型的值，即Object、Function、Array、以及自定义对象，等等。05 五月 2023JavaScript语言与Ajax应用(第二版）8第八页，共四十页。2.2 JavaScript数据类型 2.2.1 基础数据类型 2.2.2 数据类型转换 2.2.3 引用(ynyng)类型 05 五月 2023JavaScript语言与Ajax应用(yngyng)(第二版）9第九页，共四十页。2.2.1 基础(jch)数据类型变量(binling)包含多

7、种类型，JavaScript 脚本语言支持的基本数据类型包括Number 型、String 型、Boolean 型、Undefined 型和Null 型，分别对应于不同的存储空间。05 五月 2023JavaScript语言与Ajax应用(第二版）10t表表2-3 基本数据类型基本数据类型类型类型 举例举例简要说明简要说明Number 45,-34,32.13,3.7E-2数值型数据数值型数据String name,Tom字符型数据，需加双引号或单引号字符型数据，需加双引号或单引号Boolean true,flase布尔型数据，不加引号，表示逻辑布尔型数据，不加引号，表示逻辑真或假真或假Und

8、efined表示未定义表示未定义Nullnull表示空值表示空值第十页，共四十页。2.2.2 数据(shj)类型转换 JavaScript会自动将某一个类型的数据转换成另一个类型的数据。JavaScript隐式类型转换的规则是：将类型转换到环境中应该使用的类型。JavaScript中除了可以隐式转换数据类型之外，还可以显式转换数据类型。显式转换数据类型可以增强代码的可读性。常用的类型转换的方法(fngf)有以下几种。05 五月 2023JavaScript语言与Ajax应用(第二版）11第十一页，共四十页。2.2.2 数据(shj)类型转换 1转换成字符串JavaScript中三种主要的原始值

9、布尔值、数字、字符串以及其它对象都有toString()方法，可以把它们的值转换成字符串。各种类型向字符串转换的结果如下：undefined值：转换成“undefined”；null值：转换成“null”；布尔值：值为true，转换成“true”；值为false，转换成“false”；数字型值：NaN或数字型变量的完整(wnzhng)字符串；其他对象：如果该对象的toString()方法存在，则返回toString方法的返回值，否则返回undefined。05 五月 2023JavaScript语言与Ajax应用(第二版）12第十二页，共四十页。2.2.2 数据(shj)类型转换2转换成数字

10、提取整数(zhngsh)的parseInt()方法parseInt()方法用于将字符串转换为整数，其格式为：parseInt(numString，radix)提取浮点数的parseFloat()方法parseFloat()方法用于字符串转换为浮点数，其格式为：parseFloat(numString)05 五月 2023JavaScript语言与Ajax应用(第二版）13第十三页，共四十页。2.2.2 数据(shj)类型转换3基本数据类型转换 在JavaScript中可以(ky)使用如下3个函数来将数据转换成数字型、布尔型和字符串型，下面看一下它的几个强制转换的函数：Boolean(value

11、)：把值转换成Boolean类型 Nnumber(value)：把值转换成数字（整型或浮点数）String(value)：把值转换成字符串 05 五月 2023JavaScript语言与Ajax应用(第二版）14第十四页，共四十页。2.2.3 引用(ynyng)类型1对象JavaScript中的对象是一个属性的集合，其中的每一个都包含一个基本(jbn)值。对象中的数据时已命名的数据，通常作为对象的属性来引用，这些属性可以访问值。保存在属性中的每个值都可以是一个值或另一个对象，甚至是一个函数。对象使用花括号创建，例如下面的代码创建了一个名为myObject的空对象：var myObject=;这

12、里有一个带有几个属性的对象：var dvdCatalog=identifier:1,name:Coho Vineyard;05 五月 2023JavaScript语言与Ajax应用(第二版）15第十五页，共四十页。2.2.3 引用(ynyng)类型2数组数组和对象一样，也是一些数据的集合，这些数据也可以是字符串类型、数字型、布尔型，或者是引用型。例如下面的定义：var score=56,34,23,76,45;上述语句创建数组 score，中括号“”内的成员为数组元素。由于 JavaScript 是弱类型语言，因此不要求目标(mbio)数组中各元素的数据类型均相同，例如：var score=5

13、6,34,23,76,45;05 五月 2023JavaScript语言与Ajax应用(第二版）16第十六页，共四十页。2.3 JavaScript运算符 2.3.1 算术(sunsh)运算符 2.3.2 逻辑运算符 2.3.3 关系运算符 2.3.4 位运算符 05 五月 2023JavaScript语言与Ajax应用(yngyng)(第二版）17第十七页，共四十页。2.3.1 算术(sunsh)运算符算术运算符是最简单、最常用的运算符，可以使用(shyng)它们进行通用的数学计算 05 五月 2023JavaScript语言与Ajax应用(第二版）18t表表2-5 算术运算符算术运算符运算

14、符运算符表达式表达式说明说明示例示例+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 逻辑(lu j)运算符逻辑(lu j)运算符通常用于执

15、行布尔运算，JavaScript 脚本语言的逻辑运算符包括 “&”、“|”和“!”等，用于两个逻辑型数据之间的操作，返回值的数据类型为布尔型。05 五月 2023JavaScript语言与Ajax应用(第二版）19t表表2-7 逻辑运算符逻辑运算符运算运算符符表达式表达式说明说明示例示例&表达式表达式1&表达式表达式2若两边表达式的值都为若两边表达式的值都为ture，则返回，则返回ture；任意一个值为；任意一个值为false，则返回，则返回false53&53&56 返回返回false|表达式表达式1|表达式表达式2只有表达式的值都为只有表达式的值都为false时，才返回时，才返回false

16、，否则返回，否则返回true53|56 返回返回true57|56 返回返回false!表达式表达式求反。若表达式的值为求反。若表达式的值为true，则返回，则返回false，否则返回，否则返回true!(53)返回返回false!(56)返回返回ture第十九页，共四十页。2.3.3 关系(gun x)运算符关系运算符用于比较两个(lin)操作数的大小，其比较的结果是一个布尔型的值。05 五月 2023JavaScript语言与Ajax应用(第二版）20t 表表2-8 关系运算符关系运算符运算运算符符说明说明示例示例=相等，若两数据相等，则返回布尔值相等，若两数据相等，则返回布尔值true，

17、否则返回，否则返回falsenum=8!=不相等，若两数据不相等，则返回布尔值不相等，若两数据不相等，则返回布尔值true，否则返回，否则返回falsenum!=8大于，若左边数据大于右边数据，则返回布尔值大于，若左边数据大于右边数据，则返回布尔值true，否则返回，否则返回falsenum8小于，若左边数据小于右边数据，则返回布尔值小于，若左边数据小于右边数据，则返回布尔值true，否则返回，否则返回falsenum=大于或等于，若左边数据大于或等于右边数据，则返回布尔值大于或等于，若左边数据大于或等于右边数据，则返回布尔值true，否则返回，否则返回falsenum=8=小于或等于，若左边

18、数据小于或等于右边数据，则返回布尔值小于或等于，若左边数据小于或等于右边数据，则返回布尔值true，否则返回，否则返回falsenum算术右移，将左侧数据的二进制值向左移动由右侧数值表示的算术右移，将左侧数据的二进制值向左移动由右侧数值表示的位数，右边空位补位数，右边空位补092算术左移，将左侧数据的二进制值向右移动由右侧数值表示的算术左移，将左侧数据的二进制值向右移动由右侧数值表示的位数，忽略被移出的位位数，忽略被移出的位9逻辑右移，将左边数据表示的二进制值向右移动由右边数值表逻辑右移，将左边数据表示的二进制值向右移动由右边数值表示的位数，忽略被移出的位，左侧空位补示的位数，忽略被移出的位，

19、左侧空位补092第二十一页，共四十页。2.4 JavaScript语句(yj)2.4.1 选择语句(yj)2.4.2 循环语句 2.4.3 跳转语句 2.4.4 异常处理语句 05 五月 2023JavaScript语言与Ajax应用(第二版）22第二十二页，共四十页。2.4.1 选择(xunz)语句1if语句if条件假设语句是比较简单的一种选择(xunz)结构语句，若给定的逻辑条件表达式为真，则执行一组给定的语句。其基本结构如下：if(conditions)statements;05 五月 2023JavaScript语言与Ajax应用(第二版）23第二十三页，共四十页。2.4.1 选择(x

20、unz)语句switchcase语句提供(tgng)了ifelse语句的一个变通形式，可以从多个语句块中选择其中一个执行。其基本语法结构如下：switch(a)case a1:statement 1;break;case a2:statement 2;break;default:statement n;05 五月 2023JavaScript语言与Ajax应用(第二版）24第二十四页，共四十页。2.4.1 选择(xunz)语句在 JavaScript 脚本语言中，“?.:”运算符用于创建条件分支。在动作较为简单的情况(qngkung)下，较之 ifelse 语句更加简便，其语法结构如下：(co

21、ndition)?statementA:statementB;载入上述语句后，首先判断条件 condition，若结果为真则执行语句 statementA，否则执行语句 statementB。05 五月 2023JavaScript语言与Ajax应用(第二版）25第二十五页，共四十页。2.4.2 循环(xnhun)语句JavaScript中的循环语句包括while语句、dowhile语句、for语句和forin语句4种。1while语句while语句属于基本(jbn)循环语句，用于在指定条件为真时重复执行一组语句。while语句的语法结构如下：while(conditions)statemen

22、ts;05 五月 2023JavaScript语言与Ajax应用(第二版）26第二十六页，共四十页。2.4.2 循环(xnhun)语句2dowhile语句dowhile语句类似于while语句，不同的是while语句是先判断逻辑条件表达式的值是否为true之后再决定(judng)是否执行循环体中的语句，而dowhile循环语句是先执行循环体中的语句之后，再判断逻辑条件表达式是否为true，如果为true则重复执行循环体中的语句。dowhile语句的语法结构如下：do statements;while(condition);05 五月 2023JavaScript语言与Ajax应用(第二版）27

23、第二十七页，共四十页。2.4.2 循环(xnhun)语句3for语句for 循环语句也类似于while语句，使用起来更为方便。for语句按照指定的循环次数，循环执行循环体内语句（或语句块），它提供的是一种(y zhn)常用的循环模式，即初始化变量、判断逻辑条件表达式和改变变量值。for语句的语法结构如下：for(initialization;condition;loop-update)statements;05 五月 2023JavaScript语言与Ajax应用(第二版）28第二十八页，共四十页。2.4.2 循环(xnhun)语句4forin语句使用 forin循环语句可以遍历数组或者对指定

24、对象的属性和方法(fngf)进行遍历，其语法结构如下：for(变量名 in 对象名)statements;05 五月 2023JavaScript语言与Ajax应用(第二版）29第二十九页，共四十页。2.4.3 跳转语句(yj)JavaScript跳转语句分为break语句和continue语句。1break语句使用break语句可以无条件地从当前执行的循环结构或者switch结构的语句块中中断(zhngdun)并退出，其语法如下所示：break;由于它是用来退出循环或者switch语句，所以只有当它出现在这些语句时，这种形式的break语句才是合法的。05 五月 2023JavaScript

25、语言与Ajax应用(第二版）30第三十页，共四十页。2.4.3 跳转语句(yj)2continue语句(yj)continue语句的工作方式与break语句有点类似，但是其作用不同。continue语句是只跳出本次循环而立即进入到下一次循环；break语句则是跳出循环后结束整个循环。05 五月 2023JavaScript语言与Ajax应用(第二版）31第三十一页，共四十页。2.4.4 异常处理(chl)语句 JavaScript可以捕获异常并进行相应的处理，通常用到的异常处理语句包括throw和try-catch-finally语句两种。1throw语句throw（抛出(po ch)）语句的

26、作用是抛出(po ch)一个异常。所谓的抛出(po ch)异常，就是用新号通知发生了异常情况或错误。throw语句的预防代码如下所示：throw 表达式;05 五月 2023JavaScript语言与Ajax应用(第二版）32第三十二页，共四十页。2.4.4 异常处理(chl)语句 2try-catch-finally语句try-catch-finally语句是JavaScript中的用于处理异常的语句，该语句与throw语句不同。throw语句只是抛出一个异常，但对该异常并不进行处理，而try-catch-finally语句可以处理所抛出的异常。其语法形式如下所示：try /语句块1：要执行

27、的代码catch(e)/语句块2：处理异常的代码finally /语句块3：无论(wln)异常发生与否，都会执行的代码05 五月 2023JavaScript语言与Ajax应用(第二版）33第三十三页，共四十页。2.5 JavaScript函数(hnsh)2.5.1 函数的创建与调用 2.5.2 函数的参数(cnsh)2.5.3 函数的属性与方法 2.5.4 闭包 05 五月 2023JavaScript语言与Ajax应用(第二版）34第三十四页，共四十页。2.5.1 函数的创建(chungjin)与调用函数由函数定义(dngy)和函数调用两部分组成，应首先定义(dngy)函数，然后再进行调用

28、，以养成良好的编程习惯。函数的定义应使用关键字 function，其语法规则如下：function funcName(parameters)statements;return表达式;函数定义过程结束后，可在文档中任意位置调用该函数。引用目标函数时，只需在函数名后加上小括号即可。若目标函数需引入参数，则需在小括号内添加传递参数。如果函数有返回值，可将最终结果赋值给一个自定义的变量并用关键字 return 返回。05 五月 2023JavaScript语言与Ajax应用(第二版）35第三十五页，共四十页。2.5.2 函数(hnsh)的参数在JavaScript中提供了一个arguments对象，该

29、对象可以获取从JavaScript代码中传递过来的参数，并将这些参数存放在arguments数组中，因此也可以通过arguments对象来判断传递过来的参数的个数，引用属性arguments.length即可。arguments为数组，因此通过argumentsi可以获得实际传递的参数的值。由于JavaScript是一种无类型的语言，因此在定义函数时，不需要为函数的参数指定数据类型。事实上，JavaScript也不会去检测传递过来的参数的类型是否符合函数的需要。如果一个函数对参数的要求很严格，那么可以在函数体内(t ni)使用typeof运算符来检测传递过来的参数是否符合要求。05 五月 20

30、23JavaScript语言与Ajax应用(第二版）36第三十六页，共四十页。2.5.3 函数(hnsh)的属性与方法 1length属性函数的length属性与arguments对象的length属性不一样，arguments对象的length属性可以(ky)获得传递给函数的实际参数的个数，而函数的length属性可以获得函数定义的参数个数。同时arguments对象的length属性只能在函数体内使用，而函数的length属性可以在函数体之外使用。05 五月 2023JavaScript语言与Ajax应用(第二版）37第三十七页，共四十页。2.5.3 函数的属性(shxng)与方法 2ca

31、ll()和apply()方法 call()方法的使用语法如下：函数名.call(对象名,参数1,参数2,)apply()方法的使用语法如下：函数名.apply(对象名,数组)由上可以看出，两个方法的区别是，call()方法直接将参数列表(li bio)放在对象名之后，而apply()方法却是将列表放在数组里，并将数组放在对象名之后。05 五月 2023JavaScript语言与Ajax应用(第二版）38第三十八页，共四十页。2.5.4 闭包 JavaScript支持闭包（closure）。所谓闭包，是指词法表示包括不必计算的变量的函数，也就是说，该函数能使用(shyng)函数外定义的变量。在J

32、avaScript中使用全局变量时一个简单的闭包实例。var sMessage=Hello World!;function sayHelloWorld()alert(sMessage);sayHelloWorld();05 五月 2023JavaScript语言(yyn)与Ajax应用(第二版）39第三十九页，共四十页。内容(nirng)总结JavaScript语言与Ajax应用（第二版）。undefined值：转换成“undefined”。null值：转换成“null”。数字型值：NaN或数字型变量(binling)的完整字符串。若两边表达式的值都为ture，则返回ture。53&56 返回true。throw（抛出）语句的作用是抛出一个异常。/语句块1：要执行的代码。/语句块2：处理异常的代码。/语句块3：无论异常发生与否，都会执行的代码。39第四十页，共四十页。