网页制作第1章 JavaScript入门.doc

第1章 JavaScript入门学习目标u 了解什么是JavaScript，掌握JavaScript的特点和应用。u 掌握JavaScript基本语法，能够编写简单的JavaScript程序。u 掌握JavaScript中的变量，能够使用变量声明和赋值。u 掌握流程控制语句，能够使用流程控制语句编写JavaScript程序。1.1 JavaScript概述JavaScript是Web上一种功能强大的编程语言，用于开发交互式的Web页面。它不需要进行编译，而是直接嵌入在HTML页面中，把静态页面转变成支持用户交互并响应事件的动态页面。本章将对JavaScript简介、JavaScript的引入方式和基本语法进行详细地讲解。1.1.1 JavaScript简介在浏览网页时，既能看到静态的文本、图像，也会看到浮动的动画、信息框以及动态变换的时钟信息等。要想实现页面上这些实时的、动态的、可交互的网页效果就需要使用JavaScript语言来编写实现。下面，将针对JavaScript的起源、JavaScript的主要特点以及JavaScript的应用进行详细讲解。1、 JavaScript的起源JavaScript是Web页面中的一种脚本编程语言，也是一种通用的、跨平台的、基于对象和事件驱动并具有安全性的脚本语言。JavaScript的前身叫做LiveScript，是由Netscape(网景)公司开发的脚本语言。后来在Sun公司推出著名的Java语言之后，Netscape公司和Sun公司于1995年一起重新设计了LiveScript，并把它改名为JavaScript。在概念和设计方面，JAVA和JavaScript是两种完全不同的语言。Java是面向对象的程序设计语言，用于开发企业应用程序，而JavaScript是在浏览器中执行，用于开发客户端浏览器的应用程序，能够实现用户与浏览器的动态交互。2、 JavaScript的主要特点JavaScript是一种基于对象（Object）和事件驱动（Event Driven）并具有安全性能的解释性脚本语言，它具有以下几个主要特点：l 解释性：JavaScript不同于一些编译性的程序语言（如C、C+等），它是一种解释性的程序语言，它的源代码不需要进行编译，而是直接在浏览器中解释执行。l 基于对象：JavaScript是一种基于对象的语言，它的许多功能来自于脚本环境中对象的方法与脚本的相互作用。在JavaScript中，既可以使用预定义对象，也可以使用自定义对象。l 事件驱动：JavaScript可以直接对用户或客户的输入做出响应，无需经过Web服务程序，而是以事件驱动的方式进行的。如按下鼠标、移动窗口、选择菜单等事件发生后，可以引起事件的响应。l 跨平台性：在HTML页面中，JavaScript依赖于浏览器本身，与操作环境无关。只要在计算机上安装了支持JavaScript的浏览器，那么程序就可以正确执行。l 安全性：JavaScript是一种安全性语言，它不允许访问本地硬盘，也不能对网络文档进行修改和删除，而只能通过浏览器实现信息浏览或动态交互。3、 JavaScript的应用作为一门独立的编程语言，JavaScript可以做很多事情，但它最主流是应用还是在Web上创建网页特效。使用JavaScript脚本语言实现的动态页面，在网页上随处可见。下面，将介绍JavaScript的几种常见应用。（1） 验证用户输入的内容使用JavaScript脚本语言可以在客户端对用户输入的内容进行验证。例如，在用户注册页面，要求用户输入注册信息，以确定用户输入的手机号、昵称及密码是否正确，如图1-1所示。如果用户在注册信息文本框中输入的信息不符合注册要求，或“确认密码”与“密码”文本框中输入的信息不同，将弹出相应的提示信息，如图1-2所示。图1-1 用户注册页面图1-2 弹出提示信息（2） 网页动画效果在浏览网页时，经常会看到一些动画效果，使页面显得更加活泼、生动。使用JavaScript脚本语言也可以实现动画效果，例如在页面中可以实现焦点图切换效果，如图1-3所示。图1-3 焦点图切换效果（3） 窗口的应用在打开网页时，经常会看到一些浮动的广告窗口，这些广告窗口是网站最大的盈利手段。广告窗口也可以通过JavaScript脚本语言来实现，如图1-4所示的广告窗口。图1-4 广告窗口（4） 文字特效使用JavaScript脚本语言可以使文字出现多种特效，例如跳动的文字，如图1-5所示。图1-5 跳动的文字1.1.2 JavaScript引入方式在HTML文档中，JavaScript脚本文件的使用和CSS样式文件类似。在HTML文档中引入JavaScript文件有两种方式，一种是在HTML文档中直接嵌入JavaScript脚本，另一种是链接外部的JavaScript脚本文件。具体讲解如下：1、 在HTML页面中嵌入JavaScript脚本在HTML文档中，通过标记及其相关属性可以引入JavaScript代码。标签的常用属性如表1-1所示。表1-1 标签的常用属性及说明属性说明language设置所使用的脚本语言及版本src设置一个外部脚本文件的路径位置type设置所使用的脚本语言，此属性已代替language属性defer表示当HTML文档加载完毕后再执行脚本语言l language属性language属性用于指定在HTML中使用的是哪种脚本语言及其版本。language属性的使用格式如下：l src属性src属性用来指定外部脚本文件的路径。外部脚本文件通常使用JavaScript脚本，其扩展名为.js。src属性的使用格式如下：l type属性type属性用来指定HTML中使用的是哪种脚本语言及其版本。该属性从HTML4.0标准开始，推荐使用type属性来代替language属性。type属性的使用格式如下：l defer属性defer属性的作用是当文档加载完毕后再执行脚本。当脚本语言不需要立即运行时，设置defer属性，浏览器将不必等待脚本语言装载，这样页面加载会更快。但当有一些脚本需要在页面加载过程中或加载完成后立即执行时，就不需要使用defer属性。defer属性的使用格式如下：在HTML文档中，可以通过标记嵌入JavaScript代码，具体代码如下： javascript代码 当HTML文件嵌入JavaScript程序代码后，浏览器程序在读到标签时，就解释执行其中的脚本。其中，标记可以放在Web页面的标记中，也可以放在标记中。例如，在标记中可以输入以下代码：alert(我要去传智播客学习JavaScript！)需要注意的是，JavaScript脚本可以放在标记中的任何位置。如果所编写的JavaScript程序用于输出网页的内容，应该将JavaScript程序置于HTML文件中需要显示该内容的位置。2、 在HTML页面中链入外部的JavaScript文件在Web页面引入JavaScript的另一种方法是采用链接外部JavaScript文件的形式。如果脚本代码比较复杂或是同一段代码需要被多个页面使用，则可以将这些脚本代码放置在一个单独的文件中（保存文件的扩展名是.js），然后在需要使用该代码的Web页面中链接该JavaScript文件即可。在Web页面中链接外部JavaScript文件的语法格式如下：需要注意的是，调用外部文件myjs.js时，首先需要编写外部的JavaScript文件，并命名为myjs.js。然后，在HTML页面中调用外部的JavaScript文件myjs.js。被包含的myjs.js文件代码如下：alert(我要去传智播客学习JavaScript！)1.1.3 JavaScript基本语法每一种计算机语言都有自己的基本语法，学好基本语法是学好编程语言的关键。同样，学习JavaScript语言，也需要遵从一定的语法规范，如执行顺序、大小写问题以及注释语句等。下面，将对JavaScript基本语法进行讲解，具体如下：1、 执行顺序JavaScript程序按照在HTML文件中出现的顺序逐行执行。如果某些代码（例如函数、全局变量等）需要在整个HTML文件中使用，最好将其放在HTML文件的标记中。某些代码，如函数体内的代码，不会被立即执行，只有当所在的函数被其他程序调用时，该代码才会被执行。2、 大小写敏感JavaScript严格区分字母大小写。也就是说，在输入关键字、函数名、变量以及其他标识符时，都必须采用正确的大小写形式。例如，变量username与变量userName是两个不同的变量。3、 每行结尾的分号可有可无JavaScript语言并不要求必须以分号（；）作为语句的结束标记。如果语句的结束处没有分号，JavaScript会自动将该行代码的结尾作为语句的结尾。例如，下面两行代码都是正确的。alert(您好，欢迎学习JavaScript！)alert(您好，欢迎学习JavaScript！); 注意：最好的代码编写习惯是在每行代码的结尾处加上分号，这样可以保证代码的严谨性、准确性。4、 注释在编写程序时，为了使代码易于阅读，通常需要为代码加一些注释。注释是对程序中某个功能或者某行代码的解释、说明，用来提高代码的可读性，而不会被JavaScript当成代码执行。 JavaScript为开发人员提供了两种注释：单行注释和多行注释，具体如下：l 单行注释使用双斜线“/”作为注释标记，将“/”放在一行代码的末尾或者单独一行的开头，它后面的内容就是注释部分。l 多行注释可以包含任意行数的注释文本。多行注释是以“/*”标记开始，以“*/”标记结束，中间的所有内容都为注释文本。这种注释可以跨行书写，但不能有嵌套的注释。下面是合法的JavaScript注释：/这里的单行注释/*这里是一段注释*/ /这里是另一段注释/*这里是多行注释*/1.1.4 一个简单的JavaScript程序Adobe公司的Dreamweaver工具是建立Web站点和应用程序的专业工具。下面，我们将继续使用Dreamweaver工具创建一个简单的JavaScript程序。具体操作如下：启动Dreamweaver编辑器，新建一个HTML默认文档。在HTML代码中嵌入JavaScript代码，如例1-1所示。例1-1 example01.html 1 3 4 5 6 第一个简单的JavaScript程序 7 8 9 10 11 alert(Hello,JavaScript！); /弹出信息警示框 12 prompt(请输入密码！); /弹出输入提示框 13 14 15 16 保存为.html文件格式后，在浏览器中运行，将弹出一个警示框，如图1-6所示。点击“确定”按钮后，将会继续弹出一个输入提示框，如图1-7所示。图1-6 弹出警示框图1-7 弹出输入提示框1.2 关键字和标识符任何一种计算机语言都有一定的使用规则和命名规范，而在计算机语言中，关键字是不能作为变量名和函数名使用的。下面，将针对JavaScript脚本语言中的关键字和标识符进行详细讲解。 1.2.1 关键字JavaScript关键字（Reserved Words），又被称为“保留字”，是指在JavaScript语言中被事先定义好并赋予特殊含义的单词。JavaScript关键字不能作为变量名和函数名使用，否则会使JavaScript在载入过程中出现编译错误。与其他编程语言一样，JavaScript中也有许多关键字，如表1-2所示。表1-2 JavaScript的关键字abstractcontinuefinallyinstanceofprivatethisbooleandefaultfloatintpublicthrowbreakdoforinterfacereturntypeofbytedoublefunctionlongshorttruecaseelsegotonativestaticvarcatchextendsimplementsnewsupervoidcharfalseimportnullswitchwhileclassfinalinpackagesynchronizedwith1.2.2 标识符在编程过程中经常需要定义一些符号来标记一些名称，如函数名、变量名等，这些符号被称为标识符。在JavaScript中，标识符用来命名变量和函数，或者用作JavaScript代码中某些循环的标签。在JavaScript中，标识符的命名规则和其他很多编程语言的命名规则相同，第一个字符必须是字母、下划线或美元符号（$），其后的字符可以是字母、数字、下划线或美元符号。例如，下面是合法的标识符：imy_name_name$strn1注意：1、 数字不允许作为首字符出现，这样JavaScript可以轻易地区别标识符和数字。2、 标识符不能和JavaScript中用于其他目的的关键字同名。1.3 变量与数据类型1.3.1 什么是变量在程序运行期间，随时可能产生一些临时数据，应用程序会将这些数据保存在一些内存单元中。变量是指程序中一个已经命名的存储单元，它的主要作用就是为数据操作提供存放信息的容器。对于变量的使用，首先必须明确其命名规则，具体如下：l 必须以字母或下划线开头，中间可以是数字、字母或下划线。l 变量名不能包含空格、加号、减号等符号。l 不能使用JavaScript中的关键字。l JavaScript的变量名是严格区分大小写的。例如，UserName与username代表两个不同的变量。1.3.2 变量的声明与赋值在JavaScript中，使用变量前需要先对其进行声明。所有的JavaScript变量都由关键字var声明，语法格式如下：var abc;在声明变量的同时也可以对变量进行赋值，例如：var abc=1;声明变量时，需要遵循的规则如下：1、 可以使用一个关键字var同时声明多个变量，例如：var a,b,c /同时声明a、b和c三个变量2、 可以在声明变量的同时对其赋值，即初始化，例如：var a=1,b=2,c=3； /同时声明a、b和c三个变量，并分别对其进行初始化3、 如果只是声明了变量，并未对其赋值，则其默认为undefined。4、 var语句可以用作for循环和for/in循环的一部分，这样就使循环变量的声明成为循环语法自身的一部分，使用起来比较方便。5、 使用var语句多次声明同一个变量，如果重复声明的变量已经有一个初始值，那么此时的声明就相当于对变量的重新赋值。当给一个尚未声明的变量赋值时，JavaScript会自动用该变量名创建一个全局变量。在一个函数内部，通常创建的只是一个仅在函数内部起作用的局部变量，而不是一个全局变量。要创建一个局部变量，并不是简单地赋值给一个已经存在的局部变量，而是必须使用var语句进行变量的声明。另外，由于JavaScript采用弱类型的形式，因此可以不理会变量的数据类型，即可把任意类型的数据赋值给变量。例如，声明一些变量，具体代码如下：var a=100 /数值类型var str=传智播客网页平面设计学院 /字符串类型var bue=true /布尔类型值得注意的是，在JavaScript中，变量可以先不声明，而在使用时，根据变量的实际作用来确定其所属的数据类型。但是，因为JavaScript是采用动态编译的，在变量命名方面并不容易发现代码中的错误，所以，建议在使用变量前就对其声明，以便能够及时发现代码中的错误。1.3.3 数据类型每一种计算机语言都有自己所支持的数据类型。在JavaScript脚本语言中采用的是弱类型的方式，即一个数据不必首先声明，可以在使用或赋值时再确定其数据的类型。当然，也可以先声明该数据的类型，即在赋值时自动说明其数据类型。接下来，将具体介绍JavaScript脚本中的几种数据类型。1、 数值型数字型（number）是最基本的数据类型。JavaScript和其他程序设计语言（如C和Java）的不同之处在于它并不区分整型数值和浮点型数值。在JavaScript中，所有数字都是数值型。JavaScript采用IEEE754标准定义的64位浮点格式表示数字，这意味着它能表示的最大值是1、7976 931 348 623 15710308，最小值是510-324。当一个数字直接出现在JavaScript程序中时，我们称它为数值直接量。JavaScript支持的数值直接量主要包括整型数值、十六进制和八进制、浮点型数据。例如：整型数值：123十六进制：0x5C八进制：023浮点型数据：3.14（即小数）2、 字符串型字符串(string)是由Unicode字符、数字、标点符号等组成的序列，它是JavaScript用来表示文本的数据类型。程序中的字符串型数据包含在单引号或双引号中，由单引号定界的字符串中可以包含双引号，由双引号定界的字符串中也可以包含单引号。具体示例如下：单引号括起来的一个或多个字符，代码如下：啊传智播客网页平面设计学院双引号括起来的一个或多个字符，代码如下：“快”“我要学习JavaScript”单引号定界的字符串中可以包含双引号，代码如下：name=“myname”双引号定界的字符串中可以包含单引号，代码如下：You can call meTom!”3、 布尔型数值数据类型和字符串数据类型的值有无穷多个，单布尔数据类型只有两个值，分别由“true”和“false”表示。一个布尔值代表一个“真值”，它说明某个事物是真还是假。在JavaScript程序中，布尔值通常用来比较所得的结果。例如：n=1这行代码测试了变量n的值是否和数值1相等。如果相等，比较的结果就是布尔值true，否则结果就是false。布尔值通常用于JavaScript的控制结构，例如，JavaScript的ifelse语句就是在布尔值为true时执行一个动作，而在布尔值为false时执行另一个动作。示例如下：if（n=1） m=n+1;else n=n+1;上述代码检测了n是否等于1。如果相等，则m+1，否则n+1。4、 特殊数据类型除了以上介绍的几种数据类型，JavaScript还包括一些特殊类型的数据，如转义字符、未定义值等。l 转义字符以反斜杠开头的，不可显示的特殊字符通常称之为控制字符，也被称为转义字符。通过转义字符可以在字符串中添加不可显示的特殊字符，或者避免引号匹配的混乱。JavaScript常用的转义字符如表1-3所示。表1-3 JavaScript常用的转义字符转义字符描述转义字符描述b退格v跳格（Tab、水平）n回车换行r换行tTab符号反斜杠f换页ooo八进制整数，范围000777单引号xHH十六进制整数，范围00FF双引号uhhhh十六进制编码的Unicode字符l 未定义值未定义类型的变量是undefined，表示变量还没有赋值，或者赋予一个不存在的属性值（如 var a=String.notProperty;）。此外，JavaScript中还有一种特殊类型的数字常量NaN，即“非数字”。当程序由于某种原因计算错误后，将产生一个没有意义的数字，此时JavaScript返回的数值就是NaN。l 空值（null）JavaScript中的关键字null是一个特殊的值，它表示空值，用于定义空的或不存在的引用。如果试图引用一个没有定义的变量，则返回一个null值。需要注意的是，null不等于空字符串（“”）和0。由此可见，null与undefined的区别是，null表示一个变量被赋予了一个空值，而undefined则表示该变量尚未被赋值。1.4 运算符与表达式运算符和表达式是构成计算机语言的基本要素，也是构成语句的基础，任何计算机语言都离不开运算符和表达式。下面，将针对JavaScript中的运算符与表达式进行详细讲解。1.4.1 运算符在程序中，经常出现一些特殊符号，如：+、*、=、等，这些都是用于各种运算的符号，因此被称为运算符。JavaScript中的运算符主要包括算数运算符、比较运算符、赋值运算符、逻辑运算符和条件运算符五种。下面，将具体介绍JavaScript中的常用的运算符。1、 算术运算符算术运算符用于连接运算表达式，主要包括加（+）、减（）、乘（*）、除（/）、取模（%）、自增（+）、自减（）等运算符，常用的算术运算符如表1-4所示。表1-4 常用的算术运算符算术运算符描述+加运算符-减运算符*乘运算符/除运算符+自增运算符。该运算符有i+(在使用i之后，使i的值加1)和+i（在使用i之前，先使i的值加1）两种。- -自减运算符。该运算符有i-(在使用i之后，使i的值减1)和-i（在使用i之前，先使i的值减1）两种。2、 比较运算符比较运算符通过连接操作数来组成比较表达式。其运算过程需要首先对操作数进行比较，然后返回一个布尔值true或false。常用的比较运算符如表1-5所示。表1-5 常用的比较运算符比较运算符描述大于=大于等于= =等于。只根据表面值进行判断，不涉及数据类型。例如，“27”= =27的值为true。= = =绝对等于。同时根据表面值和数据类型进行判断。例如，“27”= = =27的值为false。!=不等于。只根据表面值进行判断，不涉及数据类型。例如，“27”!=27的值为false。!= =不绝对等于。同时根据表面值和数据类型进行判断。例如，“27”!= =27的值为true。3、 逻辑运算符JavaScript支持常用的逻辑运算符，具体如表1-6所示。表1-6 逻辑运算符逻辑运算符描述!取反&=与运算后赋值&逻辑与|=或运算后赋值|位或运算=异或运算后赋值逻辑异或?:三目运算符|逻辑或= =等于!=不等于其中，三目运算符的格式如下：操作数？结果1：结果2若操作数的结果为真，则表达式的结果为结果1，否则为结果2。4、 赋值运算符最基本的赋值运算符是等于号“=”，用于对变量进行赋值。其他运算符可以和赋值运算符“=”联合使用，构成组合赋值运算符。常用的赋值运算符如表1-7所示。表1-7 赋值运算符赋值运算符描述=将右边表达式的值赋给左边的变量。例如，username=“name”+ =将运算符左边的变量加上右边表达式的值赋给左边的变量。例如，a+=b，相当于a=a+b- =将运算符左边的变量减去右边表达式的值赋给左边的变量。例如，a-=b，相当于a=a-b*=将运算符左边的变量乘以右边表达式的值赋给左边的变量。例如，a*=b，相当于a=a*b/ =将运算符左边的变量除以右边表达式的值赋给左边的变量。例如，a/=b，相当于a=a/b% =将运算符左边的变量用右边表达式的值求模，并将结果赋给左边的变量。例如，a%=b，相当于a=a%b5、 条件运算符条件运算符是JavaScript中的一种特殊的三目运算符，其语法格式如下：操作数？结果1：结果2若操作数的值为true，则整个表达式的结果为“结果1”，否则为“结果2”。例如，首先定义两个变量，初始化它们的值都为5，然后判断两个变量是否相等，如果相等则返回“true确”，否则则返回“flase”，具体代码如下： var a=5; var b=5; alert(a=b)？true：false); 注意：在JavaScript中，可以使用运算符（+）对两个字符串进行连接运算，即将两个字符串连接起来。1.4.2 运算符的优先级JavaScript运算符均有明确的优先级与结合性。优先级较高的运算符将先于优先级较低的运算符进行运算。结合性则是指具有同等优先级的运算符将按照怎样的顺序进行运算。结合性有向左结合和向右结合两种。例如，表达式a+b+c,向左结合就是先计算a+b，即（a+b）+c;而向右结合就是先计算b+c，即a+(b+c)。JavaScript运算符的优先级及其结合性如表1-8所示。表1-8 JavaScript运算符的优先级与结合性赋值运算符结合性运算符最高向左.、 、（）由高到低依次排列向右+、-、-、!、delete、new、typeof、void向左*、/、%向左+、-向左、向左、=、in、instanceof向左= =、!=、= = =、!= = =向左&向左向左|向左&向左|向右?:向右=向右*=、/=、%=、+=、-=、=、=、&=、=、|=最低向左，1.4.3 表达式表达式是一个语句集合，像一个组一样，计算结果是一个单一的值，该值可以是boolean、number、string、function或者object数据类型之一。一个表达式本身可以很简单，如一个数字或者变量，它还可以包含许多连接在一起的变量关键字以及运算符。在定义完变量后，可以对其进行赋值、改变、计算等一系列操作，这一过程需要通过表达式来完成。例如，表达式x=7将值7赋给变量x，整个表达式的计算结果为7，因此在一行代码中使用此类表达式是合法的。一旦将7赋值给x的工作完成，则x也将是一个合法的表达式。除了赋值运算符，还有许多可以形成一个表达式的其他运算符，如算术运算符、字符串运算符、逻辑运算符等。1.5 流程控制语句在生活中，人们需要通过大脑来支配自身行为。同样，在程序中也需要相应的控制语句来控制程序的执行流程。在Javascript中主要的流程控制语句有条件语句、循环语句和跳转语句等，本小节将针对这几种语句进行详细讲解。1.5.1 条件语句在实际生活中经常需要对某一事件作出判断，例如开车来到一个十字路口，这时需要对红绿灯进行判断，如果前面是红灯，就停车等候，如果是绿灯，就通行。Javascript中有一种特殊的语句叫做条件语句（也称“分支语句”），它也需要对一些事件作出判断，从而决定执行哪一段代码。条件语句分为if条件语句和switch条件语句，具体讲解如下：1、if条件语句if条件语句是最基本、最常用的条件控制语句。通过判断条件表达式的值为true或者false，来确定是否执行某一条语句。主要包括单向判断语句、双向判断语句和多向判断语句，具体如下：l 单向判断语句：是结构最简单的条件语句，如果程序中存在绝对不执行某些指令的情况，就可以使用单向判断语句，其语法格式如下：if（执行条件）执行语句 在上面的语法结构中，if可以理解为“如果”，“（）”用于指定if语句中的执行条件，“”用于指定满足执行条件后执行的相关事件。单向判断语句的执行流程如图1-8所示。图1-8 单向判断语句执行流程了解了单向判断语句的基本语法和执行流程，下面，通过一个比较数字大小的案例对单向判断语句的用法做具体演示，如例1-2所示。例1-2 example02.html 1 3 4 5 6 单向判断语句 7 8 9 10 var num1=100; /定义一个赋值为100的变量 11 var num2=200; /定义一个赋值为200的变量 12 if(num1num2) 13 alert(成立); /如果条件成立则弹出“成立” 14 15 alert(对不起，条件不成立) /如果条件不成立则弹出该对话框内容 16 17 18 在上述代码中，首先定义了两个变量，并对它们赋值。然后应用单向判断语句指定执行条件“num1num2”。如果条件成立则弹出“成立”提示信息，否则弹出不成立的提示信息。运行例1-2，运行结果如图1-9所示。图1-9 单向判断语句l 双向判断语句：双向判断语句是if条件语句的基础形式，只是在单向判断语句基础上增加了一个从句，其基本语法格式如下：if（执行条件）执行语句1 else执行语句2双向判断语句的语法格式和单向判断语句类似，只是在其基础上增加了一个else从句。表示如果条件成立则执行“执行语句1”，否则则执行“执行语句2”。双向判断语句的执行流程如图1-10所示。图1-10 双向判断语句执行流程了解了双向判断语句的基本语法和执行流程，下面，对例1-2中第11-18行代码进行简单修改，使其变成一个双向判断语句，具体代码如下： 1 2 var num1=100; 3 var num2=200; 4 if(num1num2) 5 alert(成立); /如果条件成立则弹出“成立” 6 else 7 alert(对不起，条件不成立); /如果条件成立则弹出“不成立” 8 9 alert(演示完成); /无论成立与否最后弹出“演示完成” 10 如果条件成立则弹出“成立”提示信息，否则弹出不成立的提示信息，最后弹出“演示完成”提示信息运行上述案例代码，结果如图1-11和图1-12所示。图1-11 双向判断语句1图1-12 双向判断语句2l 多向判断语句：多向判断语句可以在根据表达式的结果判断一个条件，然后根据返回值在做近一步的判断，其基本语法格式如下：if（执行条件1）执行语句1 else if（执行条件2）执行语句2else if（执行条件3）执行语句3.在多向判断语句的语法中通过else if语句可以对多个条件进行判断，并且根据判断的结果执行相关事件。多向判断语句的执行流程如图1-13所示。图1-13 多向判断语句执行流程了解了多向判断语句的基本语法和执行流程，下面，通过一个选车案例对多向判断语句的用法做具体演示，如例1-3所示。例1-3 example03.html 1 3 4 5 6 多向判断语句 7 8 9 10 var car = 房车; /定义了一个变量，并对其赋值 11 if(car = 跑车) /判断如果赋值为跑车，则弹出下面内容 12 alert(奖品:跑车); 13 else if(car = 马车) /判断如果赋值为马车，则弹出下面内容 14 alert(奖品：马车); 15 else if(car = 房车) /判断如果赋值为房车，则弹出下面内容 16 alert(奖品：房车); 17 18 19 20 在上述代码中，首先定义了一个变量，并对其赋值，然后应用多向判断语句指定了三个执行条件，最后根据执行条件依次进行判断，如果条件不成立则略过，如果条件成立，则执行大括号内的执行语句。运行例1-3，运行结果如图1-14所示。图1-14 多向判断语句2、switch条件语句switch条件语句是典型的多路分支语句，其作用与if语句类似，但switch条件语句比if语句更具有可读性。switch条件语句的基本语法格式如下：switch (表达式)case 目标值1:执行语句1break;case 目标值2:执行语句2break;case 目标值n:执行语句nbreak;default:执行语句n+1break;在上面的语法结构中， switch语句将表达式的值与每个case中的目标值进行匹配，如果找到了匹配的值，会执行对应case后的执行语句，如果没找到任何匹配的值，就会执行default后的执行语句。switch语句中的break关键字将在后面的小节中做具体介绍，此处，初学者只需要知道break的作用是跳出switch语句即可。了解了switch条件语句的基本语法，下面，通过一个班级成绩查询案例对switch条件语句的用法做具体演示，如例1-4所示。例1-4 example04.html 1 3 4 5 6 switch条件语句 7 8 9 10 var name=王丽; /定义了一个变量，并对其赋值 11 switch (name) /应用switch语句获取变量值 12 case 小明: /判断变量值与case标签目标值是否匹配 13 document.write(第一名：小明-657); /匹配则输出相应的名次成绩 14 break; /跳出循环 15 case 小丽: 16 document.write(第二名：小丽-621); 17 break; 18 case 小乔: 19 document.write(第三名：小乔-590); 20 break; 21 default: 22 alert(只限前三名分数查询); /如判断都不匹配则弹出该执行语句 23 break; 24 25 26 27 在上述代码中，首先定义了一个变量，并对其赋值，然后应用switch条件语句获取变量值，并判断变量值与case标签的目标值是否匹配，匹配则输出相应的执行语句并跳出循环，否则继续判断下一个case标签。如果case标签均不匹配，则执行“default”标签下的执行语句。运行例1-4，运行结果如图1-15所示。图1-15 switch条件语句1.5.2 循环语句在实际生活中经常会将同一件事情重复做很多次。比如在做眼保健操的第四节轮刮眼眶时，会重复刮眼眶的动作，打乒乓球时，会重复挥拍的动作等。在Javascript中有一种特殊的语句叫做循环语句，它可以实现将一段代码重复执行，例如循环打印100位学生的考试成绩。循环语句分为while循环语句、dowhile循环语句和for循环语句三种。本小节将针对这三种循环语句分别进