《网页设计与制作cs8第11章》由会员分享，可在线阅读，更多相关《网页设计与制作cs8第11章（30页珍藏版）》请在金锄头文库上搜索。
1、第11章 JAVASCRIPT,第11章 JAVASCRIPT,11.1 JavaScript的基本语法 11.2 综合实例,11.1 JavaScript的基本语法,11.1.1 脚本代码的位置 11.1.2 JavaScript程序的注释 11.1.3 常量 11.1.4 变量 11.1.5 运算符 11.1.6 流程控制 11.1.7 函数,11.1.1 脚本代码的位置,1.放置在标签对之间 标签对之间编写脚本程序代码，是用得最多的情况。的位置并不是固定的，可以出现在或中的任何地方。在一个HTML文档中可以有多个标签对来嵌入多段JavaScript代码，每段JavaScript代码可以相
2、互访问，这同将所有的代码放在一对之中的效果是一样的。,2.将JavaScript 代码放置在一个单独的文件中 可以将脚本代码放置在一个单独的文件中，这个文件以js为扩展名，称为JavaScript脚本文件。 例aa.js中有alert(“hello”); 在网页文件中可以引用： ,3.将脚本程序代码作为属性值 超链接标签的属性值除了http和mailto等协议外，还可以使用JavaScript协议，如下所示： javascript 还可经控件属性，如按钮的单击。 ,11.1.2 JavaScript程序的注释,为程序添加注释可以用来解释程序的某些部分的作用和功能，提高程序的可读性。此外，还可以
3、使用注释来暂时屏蔽某些程序语句，让浏览器暂时不要理会这些语句，等到需要时，只需要简单地取消注释标记，这些程序语句就又可以发挥作用了。 JavaScript有两种注释：第一种是单行注释，就是在注释内容前面加双斜线（/）；第二种是多行注释，就是在注释内容前面以单斜线加一个星形标记（/*）开头，并在注释内容末尾以一个星形标记加单斜线（*/）结束，当注释内容超过一行时一般使用这种方法。,11.1.3 常量,1.整型常量 整型常量可以使用十六进制、八进制和十进制表示。十六进制以0x或0x开头，如：0x8a。八进制必须以0开头，如：0123。十进制的第一位不能是0（数字0除外），如123。 2.实型常量
4、实型常量是由整数部分加小数部分表示，如12.32、193.98，实型常量也可以使用科学计数法来表示，如：5E7、4e5等。 3.布尔值 布尔常量用于区分一个事物的正反两面，不是真就是假。其值只有两件：true和false。,4.字符串型常量 JavaScript中没有单独的字符常量，而只有表示由若干字符所组成的字符串型常量。字符串型常量使用单引号（）或双引号（“”）引起来的若干字符，如“hello javascript!”、abc、a等。 5.null常量 JavaScript中有一个null常量，表示一个变量所指向的对象为空值。 6.undefined常量 undefined常量用于表示变量
5、还没有被赋值的状态或对象的某个属性不存在。uull表示赋给变量的值为“空”，“空”是一个有特殊意义的值；而undefined则是表示还没有对变量赋值，变量的值还处于未知状态。,11.1.4 变量,在程序运行期间，程序可以向系统申请分配若干内存单元，用来储存各种类型的数据。系统分配的内存单元要使用一个标识符来标识，并且其中的数据是可以更改的，所以称之为变量。标记内存单元的标记符就是变量名，内存单元中所装载的数据就是变量值。定义一个变量，系统就会为之分配一块内存，程序可以用变量名来表示这块内存中的数据。 由于JavaScript采用弱类型的变量形式，因而声明一个变量时不必确定类型，而是在使用或赋值
6、时自动确定其数据类型。在JavaScript中，声明变量要使用var 关键字，例如： var name;,11.1.5 运算符,1.算术运算符 +：加法运算符或正值运算符，例如：x+5，+6。 -：减法运算符或负值运算符，例如：7-3，-8。 *：乘法运算符，例如：3*6。 /：除法运算符，例如：9/4。 %：求模运算符，例如：5%2。 +：将变量值加1后再将结果赋给这个变量。 -：将变量值减1后再将结果赋给这个变量。,2.赋值运算符 =：将一个值或表达式的结果赋给变量，例如，x = 3。 +=：将变量与所赋的值相加后的结果再赋给该变量，例如，x += 3等价于x = x + 3。 -=：将变
7、量与所赋的值相加后的结果再赋给该变量，例如，x -= 3等价于x = x - 3。 *=：将变量与所赋的值相加后的结果再赋给该变量，例如，x *= 3等价于x = x * 3。 /=：将变量与所赋的值相加后的结果再赋给该变量，例如，x /= 3等价于x = x / 3。 %=：将变量与所赋的值相加后的结果再赋给该变量，例如，x %= 3等价于x = x % 3。,3.比较运算符 ：当左边操作数大于右边操作数时返回true，否则返回flase。 =：当左边操作数大于等于右边操作数时返回true，否则返回flase。 =：当左边操作数小于等于右边操作数时返回true，否则返回flase。 =：当左
8、边操作数等于右边操作数时返回true，否则返回flase。 !=：当左边操作数不等于右边操作数时返回true，否则返回flase。,4.逻辑运算符 &：逻辑与，当左右两边操作数都为true时，返回值为true，否则返回false。 |：逻辑或，当左右两边操作数都为false时，返回值为false，否则返回true。 ！：逻辑非，当操作数为true时，返回值为false，否则返回true。,11.1.6 流程控制,1.if条件选择语句 （1）单分支的if选择语句 if（条件） 执行语句 其中的条件语句可以是任何一种逻辑表达式，如果条件语句的返回结果为ture,则程序先执行后面大括号对中的执行语句
9、，然后接着顺序执行它后面的其他代码。如果条件语句的返回结果为false,则程序跳过条件语句后面的执行语句，直接去执行程序后面的其他代码。,（2）双分支的if语句 if（条件） 执行语句块1 else 执行语句块2 这种格式在if从句的后面添加了一个else从句，在第一种格式的单一if语句的基础上，在if条件语句的返回结果为false时，执行else后面部分的从句,（3）多分支的if语句 if（条件1） 执行语句块1 else if（条件2） 执行语句块2 else if（条件n） 执行语句块n else 执行语句块n+1 ,2.switch选择语句 switch语句用于将一个表达式的结果同多个
10、值进行比较，并根据比较结果来选择执行语句，switch语句的使用格式如下： switch（表达式） case 取值1:语句块1; break; case 取值n:语句块n;break; default: 语句块n+1; case语句只是相当于定义了一个标记位置，程序根据switch条件表达式的结果，直接跳转到第一个匹配的标记位置处，开始顺序执行后面的所有程序代码，包括后面的其他case语句下的代码，直到碰到break语句或函数返回语句为止。default语句是可选的，它匹配上面所有的case语句定义的值以外的其他值，通俗地讲，就是谁也不要的都归它。,3.循环结构 （1）while循环语句 wh
11、ile语句是循环语句，也是条件判断语句，while语句的语法结构如下所示： while（条件） 执行语句块; 当条件表达式的返回值为true时，则执行中的语句块，当执行完中的语句块后，再次检测条件表达式的返回值，如果返回值还为true，则重复执行中的语句块，如此往复，直到返回值为false时，结束整个循环过程，接着往下执行while代码段后面的程序代码。,（2）do while循环语句 do while语句的语法结构如下所示： do 执行语句块; while（条件表达式）; do while语句的功能和while语句差不多，只不过它是在执行完第一次循环之后才检测条件表达式的值，这意味着包含在大
12、括号中的代码块至少要被执行一次。,（3）for循环语句 for循环语句的基本使用格式如下： for（初始化表达式；循环条件表达式；循环后的操作表达式） 执行语句块; ,4.break与continue语句 （1）break语句 break语句可以中止循环体中的执行语句和switch语句。一个无标号的break语句会把控制传给当前循环（while、do、for或switch）的下一条语句。如果有标号，控制会被传递给当前方法中的带有这一标号的循环语句 （2） continue语句 continue语句只能出现在循环语句（while、do、for）的循环体语句块中，无标号的continue语句的作用
13、是跳过当前循环的剩余语句，接着执行下一次循环。,11.1.7 函数,在进行一个复杂的程序设计时，总是根据所要完成的功能，将程序划分为一些相对独立的部分，每部分用一个函数来完成，从而使各部分充分独立、任务单一、程序清晰、易懂、易读、易维护。 1.函数的定义 在JavaScript中定义一个函数，必须以function关键字开头，函数名跟在关键字后，接着是函数的参数列表和函数所执行的程序代码段。定义一个函数的格式如下： function 函数名（参数列表） 程序代码; return 表达式; ,2.函数的调用 如果函数没有返回值或调用程序不关心函数的返回值，可以用下面的格式调用定义的函数：函数名（
14、传递给函数的参数1，传递给函数的参数2，） 如果调用程序需要函数的返回结果，要用下面这样的格式调用定义的函数：变量 = 函数名（传递给函数的参数1，传递给函数的参数2，） 对于有返回值的函数调用，也可以在程序中直接使用返回的结果。,11.2 综合实例,11.2.1自动分时问候的网页 11.2.2表单的验证,11.2.1自动分时问候的网页,本例主要说明JavaScript可以实现动态显示“问候语”的功能，通过本实例要学会如何制作，如何保存，如何在HTML文件中调用等知识。,var now =new Date(); var hour =now.getHours(); if (hour4) docu
15、ment.write(“凌晨好“); else if (hour8) document.write(“早上好“); else if (hour12) document.write(“上午好“); else if (hour13) document.write(“中午好“); else if (hour17) document.write(“下午好“); else if (hour22) document.write(“晚上好“); else document.write(“深夜好“);,11.2.2表单的验证,本实例主要说明JavaScript可以实现Web访问时的表单验证。可以对文本框中的内容进行验证，通过本实例我们可以知道JavaScript可以用简单的程序完成很复杂的功能，并且实现了Web的交互性及动态性。,在网页上脚本的添加和函数的调用 ,对姓名文本框 if (form1.name.value=“) alert(“请输入你的姓名“); form1.name.focus(); return false;,
