web程序设计第7章.ppt

第7章 JavaScript,概述,JavaScript是介于Java与HTML之间，基于对象和事件驱动的编程语言。它提供了一种实时的、动态的、可交互的表达能力，用交互式的Web页面取代了静态的HTML页面，有效实现了网络计算和网络计算机的蓝图。,7.1 第一个JavaScript程序,演示,7.1 第一个JavaScript程序,使用JavaScript编写程序的特点： JavaScript是一种脚本语言，采用小程序段的方式实现编程，可以直接嵌入HTML文档中。 在标识之间可以加入JavaScript脚本。 可将标识放在或之间。将JavaScript脚本置于之间，可使之在主页和其余部分代码之前装载。 JavaScript是一种基于对象的语言，许多功能可以来自于脚本环境中对象的方法与脚本的相互作用。,7.1 第一个JavaScript程序,使用JavaScript编写程序的特点： 对于不支持JavaScript的浏览器，所有在中的代码均被忽略；对于支持JavaScript的浏览器，则执行中的代码。 / 是JavaScript的注释标识，其后的信息不被浏览器解释。,7.2 JavaScript基本数据结构,JavaScript脚本语言同其他语言一样，有它自身的基本数据类型、表达式、运算符以及程序的基本框架结构。 基本数据类型和常量 数值型：最基本的数据类型，包括整型和实型 整型常量：可以使用十进制、八进制或十六进制表示，如1234、0745、0x93C等； 实型常量：可以使用小数或指数方法表示，如12.34、5e7、4e-5等。 字符串型：表示字符序列的数据类型 字符串常量：用“ “或 括起来的若干个字符，如“JavaScript“、 This is a book of C+等； 控制字符：以反斜杠 开头的具有特殊功能的字符，如n 、 r、t等。,7.2 JavaScript基本数据结构,基本数据类型和常量 布尔型：表示状态的数据类型 布尔常量：只有两个可能的值true和false，表示“真”和“假”两种状态。 null和undefined null：null的类型是Object，用来表示一个变量没有任何数值。例如： var empty=null; /empty的值为null undefined：undefined的类型也是undefined，表示变量没有定义任何值。 例如：var value; /value的值为undefined,7.2 JavaScript基本数据结构,变量 变量的主要作用是存取数据和提供存放信息的容器，在JavaScript程序中必须明确变量的命名、声明和作用域。 变量的命名：必须以字母或下划线开头，后面可以跟数字、字母和下划线。不能使用JavaScript中的关键字作为变量名。例如： 正确的变量名：num1、_value、thisbook 错误的变量名：1_max、C+、this、true 变量的声明：在JavaScript中，不论变量的数据类型为什么，都用var关键字来声明。例如： var num = 1; var str = “JavaScript Language“;,7.2 JavaScript基本数据结构,变量的实际类型视变量数据的内容而定。例如，上例中的num为数值型变量，str为字符串型变量。 变量的类型也可以随时被改变，只要指定不同类型的数据，变量的类型就会跟着改变。例如： var num = 1; /num为数值型变量 num = “Hello World!“; /num为字符串型变量 变量也可以不用var声明而直接使用，这时必须设定变量的初始值，否则会产生编译错误。例如： x = 100; /x为数值型变量 y = “China“; /y为字符串型变量 z = true /z为布尔型变量 好的编程风格：每个变量在第一次使用时都用var声明！,7.2 JavaScript基本数据结构,变量的作用域：分为全局变量和局部变量 全局变量：在所有函数外声明的变量，在程序的每个地方都可以使用； 局部变量：在某函数内声明的变量，只对该函数可见。 例如： var attr = 1; /attr为全局变量 function testFunc( ) var tmp = attr + 1; /tmp为局部变量 return tmp; var sum = testFunc( ); /sum为全局变量 document.write(“attr = “, attr, “); document.write(“sum = “, sum, “); document.write(“tmp = “, tmp);,演示,？,7.2 JavaScript基本数据结构,运算符和表达式 JavaScript提供了丰富的运算符，包括算术运算符、逻辑运算符等。表达式是常量、变量及运算符的集合，根据运算符类型不同，表达式可分为算术表达式、逻辑表达式等。 算术运算符及算术表达式,7.2 JavaScript基本数据结构,比较运算符及比较表达式,当操作数类型不同时进行类型转换,当操作数类型不同时不进行类型转换,7.2 JavaScript基本数据结构,逻辑运算符及逻辑表达式,7.2 JavaScript基本数据结构,位运算符及位表达式,7.2 JavaScript基本数据结构,赋值运算符及赋值表达式,7.2 JavaScript基本数据结构,字符串运算符及字符串表达式,7.2 JavaScript基本数据结构,条件运算符及条件表达式 条件运算符有3个操作数，格式如下： var varA = 条件式 ? valueB : valueC 当条件式成立时，valueB会被赋给varA，否则将 valueC赋给varA。 例如： var min = 67 ? 6 : 7; 思考：假设x、y、z三个变量均以赋值，请写出求三个变量中最大值和最小值的条件表达式。,7.3 JavaScript程序构成,JavaScript程序的基本构成包括语句、函数、对象、方法和属 性等，通过它们来实现编程。 程序控制结构 选择结构：通过判断给定的条件是否成立，从给定的各种可能中选择一种执行。 if语句的三种形式： 单分支结构：if(表达式) 语句段 例1：if(count 10) count = 0; 例2：if(count 10) count = 0; alert(“count被重设为0!“); 注意：如果语句段中的语句不止一条，应用大括号将它们括起来。,7.3 JavaScript程序构成,双分支结构：if(表达式) 语句段1 else 语句段2 例1：if(num%2=0) alert(“num是一个偶数“); else alert(“num是一个奇数“); 注意：else不能单独使用，必须与if配对使用；每一个else总是与离它最近的一个尚未匹配的if配对。 例2：if(a=b) if(a=c) alert(“a是最大值“); else alert(“c是最大值“); else if(b=c) alert(“b是最大值“); else alert(“c是最大值“);,7.3 JavaScript程序构成,多分支结构：if(表达式1) 语句段1 else if(表达式2) 语句段2 else if(表达式n-1) 语句段n-1 else 语句段n 例如：if(x=10“);,7.3 JavaScript程序构成,例 根据用户的不同操作在页面上显示不同的信息 ,演示,7.3 JavaScript程序构成,switch语句 基本格式： switch(表达式) case 常量表达式1: 语句段1; break; case 常量表达式2: 语句段2; break; case 常量表达式n-1: 语句段n-1; break; default: 语句段n; 执行过程：首先计算表达式的值，当表达式的值与某个case后面的常量表达式的值相等时，就执行此case后面的语句段；若所有case后的常量表达式的值都不与表达式的值相等，就执行default后面的语句段。,7.3 JavaScript程序构成,例 根据用户的不同操作在页面上显示不同的信息 var name=prompt(“请输入您的大名：“, “); /弹出提示窗口 var user=“Da Vinci“; switch(name) case “: document.write(“您没有输入任何信息!“); break; case null: document.write(“您取消了操作!“); break; case user: document.write(“欢迎 “,name,“ 光临!“); break; default: document.write(“欢迎 “,name,“ 加入!“); ,演示,7.3 JavaScript程序构成,switch语句 break的作用： 当某个case后面的语句段执行完后，直接跳出整个switch控制语句。如果省略break，在执行完某个case后面的语句段后会继续执行下一个case后面的语句段，直到遇上break或者所有的语句段都被执行完。 思考：省略上例中所有的break语句，当用户在提示窗口中执行不同操作时，页面上会显示什么信息？,演示,7.3 JavaScript程序构成,JavaScript程序的基本构成包括语句、函数、对象、方法和属 性等，通过它们来实现编程。 程序控制结构 循环结构：在某条件成立时反复执行相同的语句段(循环体)。 循环语句的三种形式 for语句 格式：for(表达式1; 表达式2; 表达式3) 循环体; 各部分的作用： 表达式1：给循环控制变量赋初值； 表达式2：设置循环条件； 表达式3：修改循环控制变量的值； 循环体：当循环条件成立时反复执行。,7.3 JavaScript程序构成,执行流程： 求解表达式1； 求解表达式2，若其值为true，则进入 c；若为false，则进入 f； 执行循环体； 求解表达式3； 返回 b 继续执行; 结束循环，执行for语句的后续语句。 例如：var sum = 0, i; for( i=1; i=100; i+ ) sum = sum + i; 注意：如果循环体中的语句不止一条，应用大括号将它们 括起来。,7.3 JavaScript程序构成,while语句 格式：while(循环条件) 循环体; 功能：当循环条件为true时，反复执行循环体；当循环条件为false时，退出循环，执行while语句的后续语句。 例如：var sum = 0, i = 1; while( i = 100 ) sum = sum + i; i +; ,7.3 JavaScript程序构成,do-while语句 格式：do 循环体; while(循环条件); 执行流程：先执行循环体，再判断循环条件，若为true，则重新执行循环体，如此反复，直到循环条件为false时退出循环，执行do-while语句的后续语句。 例如：var sum = 0, i = 1; do sum = sum + i; i +; while( i = 100 );,7.3 JavaScript程序构成,例 求1!+2!+3!+10! var i, t=1, s=0; for( i=1; i ,演示,7.3 JavaScript程序构成,程序控制结构 break和continue语句 break语句 格式：break; 功能：提前退出循环或从switch结构中直接跳出。 例：var sum = 0, i = 1; while( i=100 ) if( i %2 = 0 ) break; sum = sum + i; i +; ,程序运行结果： sum = 1,7.3 JavaScript程序构成,continue语句 格式：continue; 功能：跳过循环体内剩余的语句，提前进入下一次循环。 例：var sum = 0, i = 0; while( i=100 ) i +; if( i %2 = 0 ) continue; sum = sum + i; ,程序运行结果： sum = 2601,7.3 JavaScript程序构成,函数 JavaScript函数用来封装那些在程序中要多次用到的功能模块，并可作为事件驱动的结果而被调用。 定义方式：function 函数名(参数表) 函数体; function：定义函数的关键字； 函数名：自定义函数的名称； 参数表：包含若干个参数，不同参数间用逗号间隔。当调用函数时，可以向参数表中传入常量值、变量值或其他表达式的值，函数体可通过参数名来引用这些传进来的值； 函数体：实现函数功能的程序代码。当函数体包含的语句不止一条时，应用大括号将它们括起来。,7.3 JavaScript程序构成,例 定义一个求阶乘的函数 function fact (n) var s = 1, i; for( i=1; i=n; i+ ) s=s*i; return s; ,7.3 JavaScript程序构成,调用方式：函数名(实参表); 实参是传送给被调用函数的实际参数值。实参可以是常量、变量和表达式，实参必须有确定的值； 在函数体内改变某个传进来的参数值，并不会对函数外的实参值造成影响。 例如：function inc(n) n+; alert(n); var x = 5; inc(x); alert(x);,程序运行结果： n=6 x=5,7.3 JavaScript程序构成,返回值：在JavaScript中经常需要将函数的执行结果传回程序，一般格式为： return 返回值; 例如：function inc(n) n+; return n; var x = 5; var y = inc(x); alert(x); alert(y);,程序运行结果： x=5 y=6,7.3 JavaScript程序构成,变量的作用范围：在函数内才会用到的局部变量应该用var声明，否则一旦函数执行完毕，没有用var声明的局部变量会变成全局变量。 例如：,程序运行结果： sum = 8,程序运行结果： y 未定义,function inc(n) y = +n; return y; var x = 3; var sum = inc(x) + y; alert(sum);,function inc(n) var y = +n; return y; var x = 3; var sum = inc(x) + y; alert(sum);,7.3 JavaScript程序构成,事件驱动及事件处理 JavaScript是基于对象和事件驱动的脚本语言，通常把由鼠标或热键引发的一连串程序的动作称为事件驱动。对事件进行处理的程序或函数，称为事件处理程序。 JavaScript主要有以下一些常用事件： 单击事件onClick：当用户单击元件时，触发onClick事件，同时onClick指定的事件处理程序将被调用执行。通常在下列基本对象中产生： button（按钮） checkbox（复选框） radio （单选按钮）,7.3 JavaScript程序构成,例 单击按钮激活btnClick( )处理程序 function btnClick( ) alert(“You have clicked the button!“); ,演示,7.3 JavaScript程序构成,改变事件onChange：当text、textarea和select元件失去焦点且内容被改变时，触发该事件。 例如： function textChange(textObj) alert(textObj.value); ,演示,7.3 JavaScript程序构成,载入事件onLoad：当网页载入完成时，触发该事件。 卸载事件onUnload：当用户离开网页时，触发该事件。 例如： function loadFile( ) do var name=prompt(“请输入您的大名：“,“); while(name=“ | name=null); alert(“欢迎 “+name+“ 光临!“); ,演示,7.4 JavaScript对象,利用JavaScript基于对象的功能，可以大大简化程序的设计，用更直观、模块化和可复用的方式进行程序开发。 对象的基本知识 对象的基本结构：对象是由属性和方法两个基本元素构成的。属性用来描述对象的数据特征，与变量相关联；方法用来描述作用在属性上的操作(行为)，与函数相关联。 例如：大型客机可视为对象，它具有位置、速度、颜色、容量等属性，对于该对象可施行起飞、降落、加速、维修等操作，这些操作将或多或少地改变飞机的属性值。,7.4 JavaScript对象,引用对象的方式：要么创建新的对象，要么利用现存的对象。 引用JavaScript内部对象，如Date、Math等； 由浏览器环境中提供，如window、document等； 使用new运算符创建新对象。 对象属性的引用 方式一：通过点运算符(.)实现引用 例如：vince = “湖北省“; = “武汉大学“; university.date = “1893“; university是一个已经存在的对象，province、 name和date是它的三个属性。,7.4 JavaScript对象,方式二：通过对象的下标实现引用 例如：university0 = “湖北省“; university1 = “武汉大学“; university2 = “