HTML+CSS+JavaScript网页设计-第11章-JavaScript语法基础.ppt

1、HTML+CSS+JavaScript网页设计第11章JavaScript语法基础第1页第第11章章 JavaScript语法基础语法基础本章概述 本章的学习目标主要内容HTML+CSS+JavaScript网页设计第11章JavaScript语法基础第2页本章概述本章概述lJavaScript是一种属于网络的脚本语言，已经被是一种属于网络的脚本语言，已经被广泛用于广泛用于Web应用开发，常用来为网页添加各式应用开发，常用来为网页添加各式各样的动态功能，为用户提供更流畅美观的浏览各样的动态功能，为用户提供更流畅美观的浏览效果。效果。JavaScript同其他语言一样，有其自身的同其他语言一样，

2、有其自身的语法、表达式和运算符及程序的流程控制语句。语法、表达式和运算符及程序的流程控制语句。本章将从本章将从JavaScript的发展历程和特点将起，介的发展历程和特点将起，介绍绍JavaScript的基本语法、运算符、流程控制语的基本语法、运算符、流程控制语句等。通过本章的学习读者应掌握句等。通过本章的学习读者应掌握JavaScript的的基本语法，能够在基本语法，能够在HTML页面中使用页面中使用JavaScript实现简单的操作。实现简单的操作。HTML+CSS+JavaScript网页设计第11章JavaScript语法基础第3页本章的学习目标本章的学习目标l了解了解JavaScri

3、pt的起源与发展历程的起源与发展历程l掌握在掌握在HTML中使用中使用JavaScript的方法的方法l掌握常用的掌握常用的DOM方法和属性方法和属性l理解理解JavaScript中的变量和数据类型中的变量和数据类型l掌握掌握JavaScript中运算符的用法中运算符的用法l掌握掌握JavaScript中的选择语句中的选择语句l掌握掌握JavaScript中的循环语句和跳转语句中的循环语句和跳转语句HTML+CSS+JavaScript网页设计第11章JavaScript语法基础第4页主要内容主要内容11.1 JavaScript简介简介11.2 文档对象模型文档对象模型11.3 变量与数据类

4、型变量与数据类型11.4运算符运算符11.5 流程控制语句流程控制语句11.6 本章小结本章小结11.7 思考和练习思考和练习HTML+CSS+JavaScript网页设计第11章JavaScript语法基础第5页11.1 JavaScript简介简介lJavaScript一种直译式脚本语言，是一种一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内动态类型、弱类型、基于原型的语言，内置支持类型。它可以嵌入到置支持类型。它可以嵌入到HTML中，在客中，在客户端执行，是动态特效网页设计的最佳选户端执行，是动态特效网页设计的最佳选择，同时也是浏览器普遍支持的网页脚步择，同时也是浏览器普遍

5、支持的网页脚步语言。语言。HTML+CSS+JavaScript网页设计第11章JavaScript语法基础第6页JavaScript的发展历程的发展历程l在在JavaScript出现之前，出现之前，Web浏览器不过是一种浏览器不过是一种能够显示超文本文档的软件的基本部分。而在能够显示超文本文档的软件的基本部分。而在JavaScript出现之后，网页的内容不再局限于枯出现之后，网页的内容不再局限于枯燥的文本，它们的可交互性得到了显著的改善。燥的文本，它们的可交互性得到了显著的改善。lJavaScript最初由最初由Netscape的的Brendan Eich在在1995年设计，在年设计，在Ne

6、tscape导航者浏览器上首次导航者浏览器上首次实现，其最初的名称为实现，其最初的名称为LiveScript，后来因为，后来因为Netscape与与Sun合作，合作，Netscape管理层希望它管理层希望它外观看起来像外观看起来像Java，因此取名为，因此取名为JavaScript。但。但实际上它的语法风格与实际上它的语法风格与Self及及Scheme较为接近较为接近。HTML+CSS+JavaScript网页设计第11章JavaScript语法基础第7页JavaScript的发展历程的发展历程lJavaScript 1.0获得了巨大的成功，获得了巨大的成功，Netscape随随后在后在Net

7、scape Navigator 3浏览器中发布了浏览器中发布了JavaScript 1.1。之后作为竞争对手的微软在自。之后作为竞争对手的微软在自家的家的IE3中加入了名为中加入了名为Jscript(名称不同是为了避名称不同是为了避免侵权免侵权)的的JavaScript实现。而此时市面上有实现。而此时市面上有3个个不同的不同的JavaScript版本：版本：IE的的JScript、Netscape的的JavaScript和和ScriptEase中的中的CEnvi。当时还没有标准规定。当时还没有标准规定JavaScript的语法和特性的语法和特性。随着版本不同暴露的问题日益加剧，。随着版本不同暴

8、露的问题日益加剧，JavaScript的规范化最终被提上日程。的规范化最终被提上日程。HTML+CSS+JavaScript网页设计第11章JavaScript语法基础第8页JavaScript的发展历程的发展历程l1997年，以年，以JavaScript 1.1为蓝本的建议被提交给了欧洲计算机制造为蓝本的建议被提交给了欧洲计算机制造商协会商协会(ECMA，European Computer Manufactures Association)，该协会指定，该协会指定39号技术委员会号技术委员会(TC39)负责将其进行标准化，由来自负责将其进行标准化，由来自 Netscape、Sun、微软、微软

9、、Borland 和其他一些对脚本编程感兴趣的和其他一些对脚本编程感兴趣的公司的程序员组成的公司的程序员组成的 TC39 锤炼出了锤炼出了 ECMA-262，定义了一种名为，定义了一种名为ECMAScript的新脚本语言的标准。第二年，的新脚本语言的标准。第二年，ISO/IEC(国标标准化组国标标准化组织和国际电工委员会织和国际电工委员会)也采用了也采用了ECMAScript作为标准作为标准(即即ISO/IEC-16262)。从此，。从此，Web浏览器就开始努力将浏览器就开始努力将ECMAScript作为作为JavaScript实现的基础。实现的基础。l1998年年6月，月，ECMAScrip

10、t 2.0版发布。版发布。l1999年年12月，月，ECMAScript 3.0版发布，成为版发布，成为JavaScript的通行标准的通行标准l2000年，年，ECMAScript 4.0开始酝酿。开始酝酿。HTML+CSS+JavaScript网页设计第11章JavaScript语法基础第9页JavaScript的发展历程的发展历程l随后的几年，随后的几年，ECMAScript 相继推出了相继推出了ECMAScript 5.0和和ECMAScript 5.1，到，到2015年年6月，月，ECMAScript 6(ES6)正式通过，成为国际正式通过，成为国际标准，正式名称是标准，正式名称是“

11、ECMAScript 2015”(简称简称ES2015)。2016年年6月，小幅修订的月，小幅修订的“ECMAScript 2016”(简称简称ES2016或或ES7)标准标准发布，相当于发布，相当于ES6.1版，因为两者的差异非常小版，因为两者的差异非常小。l目前，各大浏览器的最新版本，都支持目前，各大浏览器的最新版本，都支持ES6。HTML+CSS+JavaScript网页设计第11章JavaScript语法基础第10页JavaScript的发展历程的发展历程l完整的完整的JavaScript实现包含实现包含3个部分：个部分：ECMAScript，文档对象模型，文档对象模型(DOM)，浏览

12、，浏览器对象模型器对象模型(BOM)。ECMAScript是核心，提供核心语言功能。是核心，提供核心语言功能。文档对象模型，提供访问和操作网页内容的方文档对象模型，提供访问和操作网页内容的方法和接口。法和接口。浏览器对象模型，提供与浏览器交互的方法和浏览器对象模型，提供与浏览器交互的方法和接口。接口。HTML+CSS+JavaScript网页设计第11章JavaScript语法基础第11页JavaScript的特点的特点lJavaScript是一种属于网络的解释性脚本是一种属于网络的解释性脚本语言，主要用来向语言，主要用来向HTML页面添加交互行为页面添加交互行为。在绝大多数浏览器的支持下，可

13、以在多。在绝大多数浏览器的支持下，可以在多种平台下运行种平台下运行(如如Windows、Linux、Mac、Android、iOS等等)。l(1)脚本语言。脚本语言。(2)基于对象。基于对象。(3)简单。简单。(4)动态性。动态性。(5)跨平台性。跨平台性。HTML+CSS+JavaScript网页设计第11章JavaScript语法基础第12页在在HTML中使用中使用JavaScript lJavaScript程序本身不能独立运行，它依程序本身不能独立运行，它依附于某个附于某个HTML页面，在浏览器端解释执行页面，在浏览器端解释执行。JavaScript可以直接放在可以直接放在HTML页面中

14、，页面中，也可以向也可以向css那样独立成一个外部文件，然那样独立成一个外部文件，然后在后在HTML页面中使用标签引入外部页面中使用标签引入外部JavaScript文件。文件。HTML+CSS+JavaScript网页设计第11章JavaScript语法基础第13页使用使用标签标签 l在在HTML中输入中输入JavaScript 时，需要使用时，需要使用标签，然后通过标签，然后通过type属性指定脚属性指定脚本的本的 MIME类型，对于类型，对于JavaScript，其，其MIME类型是类型是text/javascript。document.write(在在<head>标签内的脚本

15、输出的内容标签内的脚本输出的内容!)HTML+CSS+JavaScript网页设计第11章JavaScript语法基础使用外部使用外部JavaScriptl虽然可以直接将脚本代码写在虽然可以直接将脚本代码写在HTML页面中，但页面中，但在大型项目开发中，很少这样做，因为这样做，在大型项目开发中，很少这样做，因为这样做，对于页面性能及可维护性都比较差。对于页面性能及可维护性都比较差。l更好的做法是将更好的做法是将JavaScript代码写在文件扩展名代码写在文件扩展名为为.js的外部文档中，就像编写外部样式表文件那的外部文档中，就像编写外部样式表文件那样，然后在需要使用这些脚本的样，然后在需要使

16、用这些脚本的HTML页面中通页面中通过过的的src属性链接外部文件。在运行时，属性链接外部文件。在运行时，整个外部整个外部.js文件的代码全部嵌入到包含它的页面文件的代码全部嵌入到包含它的页面内，页面程序可以自由使用。内，页面程序可以自由使用。第14页HTML+CSS+JavaScript网页设计第11章JavaScript语法基础使用外部使用外部JavaScriptl使用外部使用外部JavaScript文件有如下好处：文件有如下好处：实现代码的复用。如果脚本用于多于一个页面，就不需要在每实现代码的复用。如果脚本用于多于一个页面，就不需要在每个使用该脚本的页面中重复其内容。个使用该脚本的页面中

17、重复其内容。易于修改和维护。如果需要更新脚本，则只需要修改一处内容易于修改和维护。如果需要更新脚本，则只需要修改一处内容l结构清晰。它使结构清晰。它使HTML页面更加整洁且更易读。页面更加整洁且更易读。l在在.js文件中，不需要文件中，不需要标签，所以，只需将标签，所以，只需将标签对中的代码移入一个独立的文件，并将其保标签对中的代码移入一个独立的文件，并将其保存为扩展名为存为扩展名为.js的文件的文件(如如main.js)即可。即可。l在需要引用该在需要引用该js文件的文件的HTML页面中使用类似下面的页面中使用类似下面的元素即可：元素即可：第15页HTML+CSS+JavaScript网页设

18、计第11章JavaScript语法基础添加到事件中添加到事件中 l除了以上两种使用除了以上两种使用JavaScript代码的方法代码的方法以外，对于简单的脚本还可以直接写在事以外，对于简单的脚本还可以直接写在事件处理中，例如，下面是一个件处理中，例如，下面是一个“打开打开”按按钮，在按钮的钮，在按钮的OnClick事件中，直接添加事件中，直接添加JavaScript代码，以弹出窗口的形式打开代码，以弹出窗口的形式打开11-1.html页面：页面：input type=button value=打开打开 onClick=window.open(11-1.html,big,height=200,w

19、idth=400,menubar=no)第16页HTML+CSS+JavaScript网页设计第11章JavaScript语法基础第17页主要内容主要内容11.1 JavaScript简介简介11.2 文档对象模型文档对象模型11.3 变量与数据类型变量与数据类型11.4运算符运算符11.5 流程控制语句流程控制语句11.6 本章小结本章小结11.7 思考和练习思考和练习HTML+CSS+JavaScript网页设计第11章JavaScript语法基础11.2 文档对象模型文档对象模型lDOM使用一系列对象表示浏览器载入的网使用一系列对象表示浏览器载入的网页。其中的主对象是页。其中的主对象是d

20、ocument对象，在【对象，在【例例11-1】中我们就使用的是】中我们就使用的是document对象对象的的write方法。方法。lDOM解释了脚本可以从一个文档中获取哪解释了脚本可以从一个文档中获取哪些属性，以及哪些属性可以修改。它还定些属性，以及哪些属性可以修改。它还定义了一些方法，用于在调用时在文档中执义了一些方法，用于在调用时在文档中执行某种动作。行某种动作。第18页HTML+CSS+JavaScript网页设计第11章JavaScript语法基础使用点符号访问值使用点符号访问值l为了访问在为了访问在JavaScript中遇到的不同对象的属性和方法，中遇到的不同对象的属性和方法，需要

21、依次列出对象、方法或属性。每个对象、属性或方法需要依次列出对象、方法或属性。每个对象、属性或方法应使用一个句点或完全停止符进行分隔。因此，这被称为应使用一个句点或完全停止符进行分隔。因此，这被称为点符号。点符号。l例如，要访问例如，要访问元素中的元素中的CSS类名，可以使用下面类名，可以使用下面的代码：的代码：document.body.classNamel该语句具有该语句具有3个使用句点分隔的部分以得到个使用句点分隔的部分以得到CSS的类名：的类名：document指明正在访问指明正在访问document对象。对象。body对应了对应了HTML页面中的页面中的元素。元素。className指

22、定需要访问附加在指定需要访问附加在body上的任何上的任何CSS类。类。第19页HTML+CSS+JavaScript网页设计第11章JavaScript语法基础常用的常用的DOM方法方法lHTML DOM定义了所有定义了所有HTML元素的对象和属性元素的对象和属性，以及访问它们的方法。，以及访问它们的方法。l常用的常用的HTML DOM方法方法getElementById(id)：获取带有指定：获取带有指定id的节点的节点(元素元素)。getElementsByClassName(className)：获取文档：获取文档中所有指定类名的元素集合，作为中所有指定类名的元素集合，作为 NodeL

23、ist 对象。对象。getElementsByName(name)：获取带有指定名称的：获取带有指定名称的对象集合。对象集合。appendChild(node)：插入新的子节点：插入新的子节点(元素元素)。removeChild(node)：删除子节点：删除子节点(元素元素)。第20页HTML+CSS+JavaScript网页设计第11章JavaScript语法基础常用的常用的HTML DOM属性属性l属性是能够获取或设置的元素的值，常用的属性属性是能够获取或设置的元素的值，常用的属性如下：如下：innerHTML：节点的文本值，即：节点的文本值，即HTML元素的内容。元素的内容。nodeNa

24、me：节点的名称。元素节点的：节点的名称。元素节点的nodeName就就是标签名；属性节点的是标签名；属性节点的nodeName是属性名。是属性名。nodeValue：节点的值。元素节点的：节点的值。元素节点的nodeValue是是undefined或或null；文本节点的；文本节点的nodeValue是文本本身是文本本身；属性节点的；属性节点的nodeValue是属性值。是属性值。parentNode：节点的父节点。：节点的父节点。childNodes：节点的子节点。：节点的子节点。attributes：节点的属性节点。：节点的属性节点。第21页HTML+CSS+JavaScript网页设计

25、第11章JavaScript语法基础第22页主要内容主要内容11.1 JavaScript简介简介11.2 文档对象模型文档对象模型11.3 变量与数据类型变量与数据类型11.4运算符运算符11.5 流程控制语句流程控制语句11.6 本章小结本章小结11.7 思考和练习思考和练习HTML+CSS+JavaScript网页设计第11章JavaScript语法基础11.3 变量与数据类型变量与数据类型l变量是存储信息的容器。在【例变量是存储信息的容器。在【例11-2】中】中的的addOption()中，我们就使用了变量中，我们就使用了变量x来来存储使用存储使用getElementById()方法得

26、到的节方法得到的节点对象，然后就可以使用点对象，然后就可以使用x来对该节点进行来对该节点进行操作了。操作了。第23页HTML+CSS+JavaScript网页设计第11章JavaScript语法基础第24页关键字关键字l在在JavaScript中，有多种关键字在起作用中，有多种关键字在起作用，如，如break、for、if以及以及while，所有这些，所有这些都有特殊含义。因此，这些单词不应该作都有特殊含义。因此，这些单词不应该作为变量、函数、方法，或对象的名称使用为变量、函数、方法，或对象的名称使用。abstractbooleanbreakbytecasecatchcharclasscons

27、tcontinuedefaultdodoubleelseextendsfalsefinalfinallyfloatforfunctiongotoifimplementsimportininstanceofintinterfacelongnativenewnullpackageprivateprotectedpublicreturnshortstaticsuperswitchsynchronizedthisthrowthrowstransientTruetryvarvoidwhilewith HTML+CSS+JavaScript网页设计第11章JavaScript语法基础第25页变量变量l变量

28、的名称需要遵循以下规则：变量的名称需要遵循以下规则：变量必须以字母、变量必须以字母、$或下划线或下划线(_)开头。开头。变量名称是区分大小写的。但是不建议使用不变量名称是区分大小写的。但是不建议使用不同的大小写形式区分两个变量同的大小写形式区分两个变量(例如例如username与与UserName)，因为这样很容易混淆，出现错，因为这样很容易混淆，出现错误。误。变量名不能是变量名不能是JavaScript关键字。关键字。尽量使用描述性名称定义变量。这样做将使代尽量使用描述性名称定义变量。这样做将使代码更易于维护和阅读。码更易于维护和阅读。HTML+CSS+JavaScript网页设计第11章J

29、avaScript语法基础第26页变量变量l在在JavaScript中，可以通过中，可以通过var语句来声明语句来声明变量，例如：变量，例如：var x;var carname;l变量声明结尾处的分号，表示一个语句的变量声明结尾处的分号，表示一个语句的结束。在以上声明之后，变量并没有值，结束。在以上声明之后，变量并没有值，也可以在声明它们时向变量赋值，例如：也可以在声明它们时向变量赋值，例如：var x=5;var carname=Volvo;HTML+CSS+JavaScript网页设计第11章JavaScript语法基础第27页变量变量l当在函数中声明一个变量时，它仅能够在该函数中被访问当

30、在函数中声明一个变量时，它仅能够在该函数中被访问(下一章将介绍函数下一章将介绍函数)。在函数执行过后，则无法再访问该。在函数执行过后，则无法再访问该变量。函数中的变量被称为局部变量。变量。函数中的变量被称为局部变量。l因为局部变量仅在函数内部工作，所以可以在不同函数中因为局部变量仅在函数内部工作，所以可以在不同函数中声明名称相同的变量声明名称相同的变量(因为每个变量仅在所在函数内部能因为每个变量仅在所在函数内部能够识别够识别)。l在函数内声明的变量，仅在函数被调用时使用内存，并且在函数内声明的变量，仅在函数被调用时使用内存，并且在函数运行完成后不再占用任何内存。在函数运行完成后不再占用任何内存

31、。l在所有函数之外声明的变量，称为全局变量，因为它对于在所有函数之外声明的变量，称为全局变量，因为它对于页面中的全部脚本全局可用，页面中的所有函数都可以访页面中的全部脚本全局可用，页面中的所有函数都可以访问它。这类变量的生命周期从变量声明开始，至页面关闭问它。这类变量的生命周期从变量声明开始，至页面关闭结束。结束。HTML+CSS+JavaScript网页设计第11章JavaScript语法基础第28页数据类型数据类型lJavaScript中包含以下中包含以下3种简单的数据类型。种简单的数据类型。数字类型：被用于进行算术操作数字类型：被用于进行算术操作(加法、减法、加法、减法、乘法以及除法乘法

32、以及除法)。任何不在引号之间的整数或小。任何不在引号之间的整数或小数都将作为数字对待。数都将作为数字对待。字符串类型：用于处理文本。它是一个字符的字符串类型：用于处理文本。它是一个字符的集合集合(包括数字、空格，以及标点符号包括数字、空格，以及标点符号)，包含在，包含在两个引号之间。两个引号之间。布尔类型：布尔值只有两种可能的取值布尔类型：布尔值只有两种可能的取值 true和和false。此类数据主要用来进行逻辑操作，。此类数据主要用来进行逻辑操作，并检查某项事物为真或假。并检查某项事物为真或假。HTML+CSS+JavaScript网页设计第11章JavaScript语法基础第29页数据类型

33、数据类型l除此之外，还有另外两种特殊的数据类型。除此之外，还有另外两种特殊的数据类型。空类型：指明该值不存在。使用关键字空类型：指明该值不存在。使用关键字null表示。它明表示。它明确声明未赋予任何值。确声明未赋予任何值。未定义类型：即该值在之前的代码中没有定义，使用关未定义类型：即该值在之前的代码中没有定义，使用关键字键字undefined表示。前面提到过，如果声明一个变量但表示。前面提到过，如果声明一个变量但不为其赋值，则该变量就被认为是未定义的。不为其赋值，则该变量就被认为是未定义的。l以上以上5种类型都是基本数据类型，种类型都是基本数据类型，JavaScript还有还有3大引用数据类型

34、：对象、数组和函数。这些将在第大引用数据类型：对象、数组和函数。这些将在第12章中详细介绍。章中详细介绍。HTML+CSS+JavaScript网页设计第11章JavaScript语法基础第30页主要内容主要内容11.1 JavaScript简介简介11.2 文档对象模型文档对象模型11.3 变量与数据类型变量与数据类型11.4运算符运算符11.5 流程控制语句流程控制语句11.6 本章小结本章小结11.7 思考和练习思考和练习HTML+CSS+JavaScript网页设计第11章JavaScript语法基础第31页11.4运算符运算符l运算符也叫操作符，是在表达式中用于对一运算符也叫操作符，

35、是在表达式中用于对一个值进行某些操作的关键字或符号。例如，个值进行某些操作的关键字或符号。例如，算术运算符算术运算符“+”会将两个值相加。会将两个值相加。lJavaScript的运算符包括算术运算符、赋值的运算符包括算术运算符、赋值运算符、比较运算符、逻辑运算符、条件运运算符、比较运算符、逻辑运算符、条件运算符和字符串运算符。算符和字符串运算符。HTML+CSS+JavaScript网页设计第11章JavaScript语法基础第32页算术运算符算术运算符l算术运算符对操作数进行数学运算操作算术运算符对操作数进行数学运算操作l需要说明的是自增和自减运算符有两种形式需要说明的是自增和自减运算符有两

36、种形式：一种是操作数在前：一种是操作数在前(如如x+)，一种是操作数，一种是操作数在后在后(如如+x)。这两种写法的区别是，操作数。这两种写法的区别是，操作数在前先引用变量的值，然后再进行自增或自在前先引用变量的值，然后再进行自增或自减操作；操作数在后，则是先进行自增或自减操作；操作数在后，则是先进行自增或自减操作，然后再引用变量的值减操作，然后再引用变量的值(此时变量的值此时变量的值已经是自增或自减操作后的新值已经是自增或自减操作后的新值)。HTML+CSS+JavaScript网页设计第11章JavaScript语法基础第33页赋值运算符赋值运算符l前面的示例中，我们曾使用过基本的赋值运算

37、符等号，它的前面的示例中，我们曾使用过基本的赋值运算符等号，它的作用是将值赋予等号左侧的变量。作用是将值赋予等号左侧的变量。除了等号以为，还可以与前面的简单算术运算符相结合，从而允许除了等号以为，还可以与前面的简单算术运算符相结合，从而允许将值赋予某个变量，并且同时进行某些操作。例如，下面的语句，将值赋予某个变量，并且同时进行某些操作。例如，下面的语句，其中带有一个赋值运算符和一个算术运算符：其中带有一个赋值运算符和一个算术运算符：total=total-profit;l此语句可被精简为以下形式：此语句可被精简为以下形式：total-=profit;l这里的这里的-=就是一个符合赋值运算符，类

38、似的还有就是一个符合赋值运算符，类似的还有+=、*=、/=和和%=，其含义和用法都类似。，其含义和用法都类似。HTML+CSS+JavaScript网页设计第11章JavaScript语法基础第34页比较运算符比较运算符l比较运算符是比较两个操作数的大小的运算符，根据比较结比较运算符是比较两个操作数的大小的运算符，根据比较结果返回果返回true或或false。l当进行比较的两个操作数是不同数据类型时，当进行比较的两个操作数是不同数据类型时，JavaScript会会自动进行类型转换，因此自动进行类型转换，因此“1=1”的比较结果是的比较结果是true，因为因为JavaScript会首先将字符串会

39、首先将字符串1转换为数字转换为数字1，类似地，类似地1=true的比较结果也是的比较结果也是true，因为，因为true转换为数字也是转换为数字也是1。l如果我们需要对操作数的类型和值都进行比较，希望上面这如果我们需要对操作数的类型和值都进行比较，希望上面这种情况的比较结果是种情况的比较结果是false，可以使用另一种检测相等性的，可以使用另一种检测相等性的方法，即恒等比较操作符方法，即恒等比较操作符“=”(3个等号个等号)。l恒等操作符对类型与值都进行检测，而且不进行任何类型转恒等操作符对类型与值都进行检测，而且不进行任何类型转换。下面的比较结果为换。下面的比较结果为false：1=“1”1

40、=trueHTML+CSS+JavaScript网页设计第11章JavaScript语法基础第35页逻辑运算符逻辑运算符l逻辑运算符用来比较两个布尔值，返回结果逻辑运算符用来比较两个布尔值，返回结果也是一个布尔值。也是一个布尔值。操操 作作 符符描描 述述示例示例(其中其中x=1且且y=2)&与，只有两个条件都是true时才返回true(x 1)返回返回true(x 2&y 1)返回返回false|或，两个条件中只要有一个为ture，结果就为true(x 2|y 2|y 1)返回返回false!非，只有一个操作非，只有一个操作数，结果与原操作数，结果与原操作数相反数相反!(x y)返回返回fa

41、lse!(x=y)返回返回trueHTML+CSS+JavaScript网页设计第11章JavaScript语法基础第36页条件运算符条件运算符l条件运算符是一个比较特殊的运算符，它需要条件运算符是一个比较特殊的运算符，它需要3个个操作数，语法格式如下；操作数，语法格式如下；(condition)?value1:value2 l其中其中,第第1个操作数个操作数condition是一个布尔指或一个返是一个布尔指或一个返回布尔值的表达式，如果其值为回布尔值的表达式，如果其值为ture，则条件表达，则条件表达式的结果为式的结果为value1，否则结果为，否则结果为value2。l例如，下面的语句用来

42、判断某年是否为闰年：例如，下面的语句用来判断某年是否为闰年：val=(year%4=0&year%100!=0|year%400=0)?闰闰年年:平年平年;HTML+CSS+JavaScript网页设计第11章JavaScript语法基础第37页字符串运算符字符串运算符l字符串运算符是指使用字符串运算符是指使用“+”运算符将两个字运算符将两个字符串连接为一个。例如，下面的语句：符串连接为一个。例如，下面的语句：var firstName=赵赵;var lastName=一凡一凡;name=firstName+lastName;l变量变量name的值为的值为“赵一凡赵一凡”。l还可以使用前面的比

43、较运算符比较两个字符还可以使用前面的比较运算符比较两个字符串。例如，在提交表单时，可以检查用户是串。例如，在提交表单时，可以检查用户是否向文本框中输入了某个特定值。否向文本框中输入了某个特定值。HTML+CSS+JavaScript网页设计第11章JavaScript语法基础第38页主要内容主要内容11.1 JavaScript简介简介11.2 文档对象模型文档对象模型11.3 变量与数据类型变量与数据类型11.4运算符运算符11.5 流程控制语句流程控制语句11.6 本章小结本章小结11.7 思考和练习思考和练习HTML+CSS+JavaScript网页设计第11章JavaScript语法基

44、础第39页11.5 流程控制语句流程控制语句lJavaScript提高了多种用于程序流程控制提高了多种用于程序流程控制的语句，这些语句可以分为选择、循环和的语句，这些语句可以分为选择、循环和跳转等类型。跳转等类型。HTML+CSS+JavaScript网页设计第11章JavaScript语法基础第40页选择语句选择语句l选择语句也叫条件语句，用于基于不同的选择语句也叫条件语句，用于基于不同的条件来执行不同的动作。在条件来执行不同的动作。在JavaScript中中，可使用以下条件语句：，可使用以下条件语句：if语句：用于当某个条件为真时，就执行一段语句：用于当某个条件为真时，就执行一段脚本的情况

45、。脚本的情况。if.else语句：当条件为语句：当条件为true时执行一操作，时执行一操作，当条件为当条件为false时，执行另一块语句。时，执行另一块语句。if.else if.else语句：用于多个条件分支的语句：用于多个条件分支的选择。选择。switch语句：用于多个条件分支的选择。语句：用于多个条件分支的选择。HTML+CSS+JavaScript网页设计第11章JavaScript语法基础第41页if语句语句lif语句允许代码在某个特定条件成立时得到语句允许代码在某个特定条件成立时得到执行。如果条件为真，则花括号中的代码执行。如果条件为真，则花括号中的代码段被执行。语法格式如下：段被

46、执行。语法格式如下：if(condition)/这里是要执行的代码块这里是要执行的代码块HTML+CSS+JavaScript网页设计第11章JavaScript语法基础第42页ifelse语句语句l当希望某个条件成立和不成立时执行不同的操作当希望某个条件成立和不成立时执行不同的操作，可以使用，可以使用ifelse语句。它的功能是：如果指定语句。它的功能是：如果指定的条件成立，则运行第一个代码块，否则运行第的条件成立，则运行第一个代码块，否则运行第二个代码块。语法格式如下：二个代码块。语法格式如下：if(condition)/条件为条件为true时执行时执行else /条件为条件为false时

47、执行时执行HTML+CSS+JavaScript网页设计第11章JavaScript语法基础第43页if.else if.else 语句语句lif.else if.else 语句用来从多个条件中选择一语句用来从多个条件中选择一个来执行，语法格式如下：个来执行，语法格式如下：if(condition1)当条件当条件 1 为为 true 时执行时执行 else if(condition2)当条件当条件 2 为为 true 时执行时执行 else if(conditionN)当条件当条件 N 为为 true 时执行时执行 else 当所有都不为当所有都不为 true 时执行时执行 HTML+CSS+

48、JavaScript网页设计第11章JavaScript语法基础第44页switch语句语句lswitch语句也是多条件选择结构，它需要语句也是多条件选择结构，它需要一个表达式或是变量，根据表达式的取值一个表达式或是变量，根据表达式的取值情况，与后面的情况，与后面的case分支进行比较。如果分支进行比较。如果有匹配的值，则开始执行相应的代码块；有匹配的值，则开始执行相应的代码块；如果所有如果所有case分支都不匹配，则执行分支都不匹配，则执行default分支。分支。HTML+CSS+JavaScript网页设计第11章JavaScript语法基础第45页switch语句语句lswitch(e

49、xpression)lcase option1:l /与与option1匹配时执行匹配时执行l break;lcase option2:l /与与option2匹配时执行匹配时执行l break;lcase option3:l /与与option3匹配时执行匹配时执行l break;lldefault:l /所有分支都不匹配时执行所有分支都不匹配时执行lHTML+CSS+JavaScript网页设计第11章JavaScript语法基础第46页循环语句循环语句l循环语句用于按指定的次数执行相同的操作，循环语句用于按指定的次数执行相同的操作，JavaScript 支持如下几种类型的循环：支持如下几

50、种类型的循环：while：只要指定的条件为真，就循环执行指定的代码：只要指定的条件为真，就循环执行指定的代码块。块。dowhile：与：与while循环不同，该循环会先执行一次循环不同，该循环会先执行一次循环结构，再检查条件是否为真。如果条件为真，则循环结构，再检查条件是否为真。如果条件为真，则继续执行直到条件为假，否则退出循环。继续执行直到条件为假，否则退出循环。for：通常用来指定循环次数的循环。：通常用来指定循环次数的循环。for/in：用来循环遍历对象的属性。：用来循环遍历对象的属性。HTML+CSS+JavaScript网页设计第11章JavaScript语法基础第47页while循