《网页制作及应用（第二版）教学课件潘明寒网页 二版 第6章》由会员分享，可在线阅读，更多相关《网页制作及应用（第二版）教学课件潘明寒网页 二版 第6章（45页珍藏版）》请在金锄头文库上搜索。
1、网页制作及应用,第六章 在网页中使用JavaScript,本章学习目标,1. JavaScript的概念 2. JavaScript的数据类型和变量 3. JavaScript的语句 4. JavaScript的内置对象和函数 5. JavaScript的事件,6.1 JavaScript 简介,JavaScript是一种基于对象和事件驱动、具有安全性能、嵌入式的客户端脚本语言。利用JavaScript编写一些模块，可以实现动态的、实时的、可交互的网页功能。JavaScript开发的是客户端应用程序，它的功能是通过嵌入或调入方法在标准的HTML语言中实现的。例如验证和处理用户输入的信息。 1.
2、 JavaScript主要优点 简单、易操作 、减少服务器开销 、动态 、跨平台 。,2.JavaScript程序格式,（1）JavaScript 代码要用HTML标签和括起来，可以 插入在 HTML 文档的任意地方。 （2）基本格式： JavaScript代码 其中，Language属性用来指定脚本语言，可以是JavaScript，也可以是VBScript。 （3） JavaScript有单行注释和多行注释，单行注释用“/”开头， “/”后面的部分不被执行。多行注释用“/*”和“*/”括起来， “/*” 与“*/”之间的语句不执行。 （4）可以用花括号将一个或多个语句括起来成为语句块，语句块
3、可以嵌套。,3.在Dreamweaver中设置脚本标记符为可显示 “编辑”菜单“首选参数”在对话框左边“分类”列表中选“不可见元素”在对话框右边“不可见元素”列表中勾选“脚本”单击“确定”。如图所示。,4在Dreamweaver中设置不可见元素为可见 “查看”菜单“可视化助理”“不可见元素”。如图所示。,5在Dreamweaver设计视图中插入脚本 “插入”菜单“HTML”“脚本对象”“脚本”，如图所示。,6.2 数据类型与变量,1. JavaScript中的数据类型 （1）数值类型（number） （2）字符串类型（String） （3）对象类型(object) （4）布尔类型(Boolea
4、n) （5）空数据类型(null) （6）未赋值类型（undefined）,2. JavaScript常量,（1）Null，是一个特殊的空值。 （2）NaN ，是Not a Number的缩写。当运算无法返回正确数值时，就会返回NaN值。 （3）true ，布尔值“真”。 （4）false， 布尔值“假”。 （5）在 Math 对象中还有一系列数学常量。,变量是存储数据的内存单元。JavaScript是一种对数据类型要求不太严格的的语言，不必声明每一个变量的类型。声明变量用 var 语句完成，格式为：var 变量名称 =初始值 方括号中的内容是可选项。 说明：可以一次定义多个变量，变量之间用逗
5、号分隔。可以在定义变量的同时初始化变量。举例如下： var student= false; / 变量的数据类型为Boolean ，初值为false。 var computer = 32 / 变量的数据类型为Number ，初值为32。 var aString =“ / 变量的数据类型为String ，初值为空字串。 var a1,a2,a3 / 同时声明3个变量 var b1=0,b2=false,b3=“ok“ / 同时初始化3个变量,3. 声明JavaScript变量,4 .命名JavaScript变量,变量的命名必须遵循以下规则： （1）第一个字符必须以字母（大小写均可）、或下划线、或美
6、元符$开始。例如_md和md都是合法的变量名称。而2md和md都是非法的。 （2）后续的字符可以是字母、数字、下划线或美元符。 （3）变量名中不能包含空格。例如 text name就是不合法的变量名。 （4）变量名称不能是保留字。例如var是JavaScript中定义变量的保留字，在给变量起名字的时候就不能使用var。 （5）变量名区分大小写。JavaScript 是一种区分大小写的语言，变量名 name 和变量名 Name是不一样的。,6.3 表达式与运算符,1. 表达式 表达式是指用运算符把常数和变量连接起来的、具有一定的值的代数式。一个表达式可以只包含一个常量或一个变量。 运算符可以是四
7、则运算符、关系运算符、位运算符、逻辑运算符、复合运算符。 例如：(a = 0)|(b = 0) 是一个用关系运算符和逻辑运算符连接起来的表达式。,2. 运算符 JavaScript提供许多运算符，在学习运算符时要密切注意运算符的优先级。编程时如果不记得运算符的优先级，可以使用括号( )加以区分。 常用的运算符有：,（1）求相反数 、逻辑非、自增、自减 （2）乘、除、取模 （3）加、减 （4）大于、大于等于、小于、小于等于 （5）等于、不等于 （6）逻辑与 （7）逻辑或 （8）赋值,6.4 JavaScript的语句结构,1. if条件语句 ifelse 语句是JavaScript中最基本的控制
8、语句，通过判断条件是否成立，决定语句的执行顺序。 语句格式如下: if（条件表述式） 语句段； else 语句段； 功能如下: 如果条件成立（表达式值为true），执行语句段，否则执行语句段。,举例: 使用if条件语句 var x=prompt(“请输入x的值：“,0) if (x0) document.write(“x是正数!“); else if (x=0) document.write(“x的值为0!“); else document.write(“x是负数!“); ,2. switch条件语句 switch语句是多分支选择语句，根据一个变量的不同取值采取不同的处理方法。 switch语
9、句格式如下: switch (表达式) case 值1：语句段1; break; case 值2：语句段2; break; case 值3：语句段3; break; case 值m：语句段m; break; default：语句段n; ,语句功能: 首先计算表达式的值，然将用表达式的值与下边case后的各值相比较，当找到一个等于表达式值的case语句时，就执行该case后的语句段，直到遇到 break 语句或 switch 段落结束符“”为止。如果表达式的值与程序提供的任何一条case的值都不匹配，就执行default后边的语句段，如果没有 default 语句，switch 语句什么也不做就
10、结束。 语句说明: （1）switch后面的表达式可以是字符型表达式或整型表达式。 （2）如果没有break语句，程序会从匹配的case语句段一直执行下去，不再判断与后面case的值是否匹配。所以，要想让程序只执行相应的语句段后结束，应该在语句段后面加上break语句。 （3）case 与后面的值之间要加空格。,举例: switch语句练习 var day=new Date(); var hour=day.getHours(); var s=“; switch (hour) case 5: case 6: case 7: case 8: s=“早晨好！“;break; case 9: case
11、 10: case 11: case 12:,case 13: s=“中午好！“;break; case 14: case 15: case 16: case 17: case 18: s=“下午好！“;break; case 19: case 20: case 21: case 22: s=“晚上好！。“;break; default: s=“您好，您该休息了！“; document.write(s); alert(s); ,3. for循环语句 如果一个语句段需要反复使用多次，用循环语句编写代码。for是最常用的循环语句。 格式如下： for（循环变量=初始值; 循环条件; 循环变量更新）
12、 循环体语句段 功能如下： 首先给循环变量赋初始值，然后判断循环条件是否成立，如果成立就执行语句段，然后更新循环变量的值，再判断循环条件是否成立，只要条件成立，循环体就会重复执行下去。如果循环条件不成立就退出循环。,举例： for语句练习 document.write(“”) /用表格使显示排列整齐 for(i=1;i“) for(j=1;j“+j+“*“+i+“=“+i*j+“); document.write(“); document.write(“); ,4. while循环语句 while语句也是先判断后执行的循环语句，它的格式比for语句简单，没有变量初始化部分和变量更新部分，所以要
13、特别注意循环体外的变量初始化和循环体内的变量更新。 while语句格式如下： while（循环条件） 循环体语句段 while语句功能如下： 当循环条件成立执行循环体，如果条件始终成立就会一直循环，直到条件不再成立时才退出循环。,举例： while语句练习 i=1; while(i“); ,5. dowhile循环语句 dowhile循环语句是先执行后判断的语句，不管循环条件是否成立都会先执行一次循环体，然后判断条件是否成立。也就是说dowhile语句的循环体至少执行一次。 dowhile语句的格式： do 循环体 while (循环条件) dowhile语句的功能： 先执行循环体，然后判断循
14、环条件，若条件成立继续执行循环体，否则结束循环。,举例： do-while语句练习 i=0; /循环变量初始化 do i+=2; /循环变量更新 document.write(“+i+“ “+“); /使文字加粗 while(i ,6. for.in循环语句 for.in语句与for语句稍有不同，它的循环范围是一个集合，这个集合是一个对象的所有属性或一个数组的所有成员，用for.in语句将遍历所有元素。 for.in语句格式： for ( 循环变量 in 对象集合或数组) 循环体 for.in语句功能： 用循环变量遍历对象集合或数组。,举例： for-in语句练习 var a=Array(2,
15、4,6,8) /建立数组并为数组赋初值 for (i in a) document.write(ai+“ “); ,7. break和continue语句 break语句使循环中途结束， continue语句提前结束当前循环进入下一轮循环。 continue语句举例（在数字110中不打印3和7）： continue语句练习 for (i=1; i ,break语句练习（当数字累加结果超过100时结束循环） break语句练习 var i=1,s=0,n=1; /初始化变量 for ( ;i100) break; /如果n超过100结束循环 document.write(“i=“+i+“); d
16、ocument.write(“n=“+n); ,6.5 JavaScript的对象与函数,1. JavaScript的自定义函数 函数是能够完成某种功能的语句集合，可以在程序中反复调用。在这里我们只介绍自定义函数。 自定义函数的语句格式： function 函数名 （参数表） 函数执行部分; return 表达式; 说明： （1）函数名区分大小写。 （2）关键字function的第一个字母f要小写。 （3）参数表可选，多个参数之间用逗号分隔，可以无参数。 （4）函数功能由大括号中的语句描述。 （5）return语句返回函数值，如果函数无返回值，可以不写return语句。,举例： 自定义函数练习 function add(a1,a2) /定义函数 var a3; a3= a1+a2; return a3; /函数返回值 va
