chapter07网页设计与Web编程教案.ppt

第七章 JavaScript 脚本编程 内容提要 p JavaScript概述 p 词法规则 p 基本数据类型 p 运算符和表达式 p 核心语句 p 函数 p 复合数据类型 p 对象模型 p 事件处理 JavaScript概述 JavaScript是由Netscape和Sun公司联 合开发的基于对象和事件驱动的客户 端脚本编程语言，通过它与HTML、 XML、DOM、CSS、JavaApplet等技 术的有机结合，可以开发出具有很强 交互性的动态页面。 第一个JavaScript程序 实时显示时间 当前时间：“+ s+“; / n基于对象 n事件驱动 n解释性语言 n简单性 n实时性 n跨平台性 n安全性 JavaScript的特点 nJavaScript脚本的引入方法 通过与标签对引入。将 JavaScript脚本代码放在与 之间，浏览器自动识别该标签对并逐行解释 其间的代码。 通过标签的src属性引入。将包含在 与标签对之间的代码放入扩 展名为.js的脚本文件中，然后在HTML文档 中通过标签的src属性来引用该脚本文 件。 在网页中嵌入JavaScript脚本 nJavaScript脚本的引入方法 通过JavaScript伪协议引入。伪协议是非标准化通 信机制的统称，JavaScript伪协议的一般格式为： javascript: URL。其中“javascript:”是伪协议说明 符，URL的主体可以是任意的JavaScript代码，多 个语句之间使用分号进行分隔。 例如： 在网页中嵌入JavaScript脚本 n JavaScript脚本的引入方法 通过HTML的事件属性引入。HTML元素的事件属性用于 指示如何处理特定的事件，方法是将脚本指定为事件属性 的值，以响应系统或用户的动作。事件属性名称由事件名 称加一个“on”前缀构成，如onClick，onMouseOver等。 例如： 在网页中嵌入JavaScript脚本 n 嵌入JavaScript脚本的位置 JavaScript脚本可放在HTML文档中任何需要的位置 。一般来说，可以在与标签对、 与标签对之间放置JavaScript脚本代 码。放置在与标签对之间的 JavaScript脚本一般用于提前载入，以响应用户的页 面动作，且一般不影响HTML文档的浏览器显示格局 。如果需要在页面载入时动态生成页面内容，应将 JavaScript脚本放置在与标签对之间 。 在网页中嵌入JavaScript脚本 n标识符 在JavaScript中，标识符用来命名变量和函数。 标识符的第一个字符必须是字母、下划线或美元 符号，后续字符可以是字母、数字、下划线或美 元符号。例如：x、user_name、U571、_pswd、 $money都是合法的标识符。 不能使用JavaScript中的关键字作为标识符。在 JavaScript中定义了20多个关键字，这些关键字 是JavaScript内部使用的，如var、for、function 、if等，它们都不能作为标识符使用。 词法规则 词法规则 n 关键字和保留字 关键字是JavaScript语法自身的一部分，具有特殊 的意义，不能用作标识符。 保留字是为将来的关键字而保留的单词，由于未来 浏览器可能会实现这些保留字，因此它们最好也不 要作为标识符使用。 breakcasecatchcontinuedefault deletedoelsefinallyfor functionifininstanceofnew returnswitchthisthrowtry typeofvarvoidwhilewith JavaScript的保留字 词法规则 n大小写敏感 JavaScript是一种区分大小写的脚本语言。在输入 关键字、变量名、函数名以及其它所有标识符时， 都必须采取一致的字符大小写形式。例如， “username”、“userName”、“UserName”代表三个 不同的变量名。 许多JavaScript对象的属性和它们所代表的HTML 标签的属性同名，在HTML中这些标签的属性可以 以任意大小写的方式输入，但是在JavaScript中它 们通常都有固定的大小写格式。例如，body标签的 背景颜色属性可以声明为“bgcolor”、“bgColor”或 者“BGCOLOR”，但代表body标签的document对 象的背景颜色属性只能声明为“bgColor”。 词法规则 n空白字符 空白字符包括空格、制表符和换行符等，在编 写脚本时占据一定的空间，以增强代码的可读 性，方便开发人员查看和维护。 空格是使用最为频繁的空白字符，常被用作分 隔符。 例1：sum = 3 + 10 ; sum=3+10; 空格被忽略 例2：var x=typeof “JavaScript“; 空格作为分隔 符 词法规则 n语句结束符 JavaScript使用分号作为语句结束符，多个语句 可写在不同行或同一行。 例如： var str=“Welcome to JavaScript World!“; document.write(str); 也可写成： var str=“Welcome to JavaScript World!“; document.write(str); 语句分行后，作为语句结束符的分号可以省略。 例如： var str=“Welcome to JavaScript World!“ document.write(str) 注意：省略分号不是一个好的编程习惯，它 可能导致程序产生一种不明确的状态。 词法规则 n注释 JavaScript有单行注释和多行注释两种形式。 单行注释以“/”开头，处于“/”和一行结尾之间的 任何文本都被当作注释而被浏览器忽略掉。 多行注释以“/*”开头，以“*/”结尾，处于“/*”和 “*/”之间的文本被当作注释，这些文本可以跨越 多行，但是其中不能有嵌套的注释。 例如： /这是单行注释 /* *这是多行注释 *它是多行的 *它是多行的 */ 基本数据类型 基本数据类型定义了一组不可再分的值的集合，以 及作用于该集合上的操作集。JavaScript支持的基本 数据类型包括数值型、字符串型和布尔型，分别对 应于不同的存储空间。 n基本数据类型和常量 当某种基本类型的数据项直接出现在程序中时，称之为常 量，即值不能被改变的量。 数值型：最基本的数据类型，包括整型和浮点型 整型常量：可以使用十进制、八进制或十六进制表示 ，如1234、0745、0x93C等。 浮点型常量：可以使用小数或指数方法表示，如12.34 、5.9e7、4.3e-5等。 特殊的数值型常量：Infinity表示正无穷大， -Infinity 表示负无穷大，NaN表示“不是一个数值”、“没有意 义的运算”或“无法转换成数值类型”。如5/0的运算结 果为Infinity，-5/0的运算结果为-Infinity，0/0的运算 结果为NaN。 基本数据类型 n基本数据类型和常量 字符串型：表示文本 的数据类型 字符串常量：用“ “ 或 括起来的若干 个字符，如 “JavaScript“、 This is a book of C+等。 转义字符：以反斜 杠 开头的具有特 殊功能的字符。 转义 字 符 功能说明 b退格 f换页 n换行 r回车 t制表 单引号 “双引号 反斜线 XXXASCII字符，每一个大X是一 个八进制数值，整个八进制 数的范围是0377。例如： 101表示“A“ xXXASCII字符，每一个大X是一 个十六进制数值，整个十六 进制数的范围是00FF。例 如：x65表示“e“ uXXXXUnicode字符，每一个大X是 一个十六进制数值。例如： u000A表示换行，和“n“结 果一样 基本数据类型 n基本数据类型和常量 布尔型：表示状态的数据类型 布尔常量：只有两个可能的值true和false，表 示“真”和“假”两种状态。如53的运算结果为 true，“Chinese”“China“Chinese“false大于 =12=“12“true大于或等于 =false=0true等于 !=“x“!=xfalse不等于 =true=1false恒等于 !=“2008“!=2008true恒不等于 运算符和表达式 n逻辑运算符和逻辑表达式 逻辑运算 符 逻辑表达式 运算结 果 简要说明 !falsetrue 逻辑非，操作数为 假则结果为真，否 则结果为假 思考：假设x、y、z三个变量均已赋值，请写出 求三个变量中最大值和最小值的条件表达式。 运算符和表达式 n字符串运算符和字符串表达式 字符串运算符说明例子 +连接两个字符串var strA = “Java“; var strB = “Script“; str = strA + strB; str的值是“JavaScript“ +=连接两个字符串，然后赋 值 var strA = “Hello “; var strB = “World“; strA += strB; strA的值是“Hello World“ 运算符和表达式 n逗号运算符和逗号表达式 逗号既可以作为分隔符，也可以作为运算符。 逗号表达式的一般格式如下： 表达式1, 表达式2, , 表达式n 逗号表达式的求值过程：先求表达式1的值，再 求表达式2的值，依次下去，最后求表达式n的 值，表达式n的值即为整个逗号表达式的值。 例如： var a=2, b=4, c=6, x, y; /逗号作为分隔符 y=(x=a+b, x+c); /逗号作为运算符 运算符和表达式 n基本控制结构 基本控制结构用来决定程序的处理流程，JavaScript 支持三种结构：顺序、选择和循环。 核心语句 开始 语句1 语句2 结束 顺序结构 分支结构 单分支选择和双分支选择结构 语句1 语句2 结束 开始 逻辑条件 true false 开始 逻辑条件 true false 语句1 结束 多分支结构 false 条件1 语句1 true false 开始 语句2 true 条件2 false 条件3 语句3 true 条件n false 语句n true 语句n+1 结束 多分支选择结构 循环结构 循环结构 当型循环 开始 逻辑条 件 true false 循环体 结束 直到型循环 开始 逻辑条 件 true false 循环体 结束 n表达式和复合语句 由各种类型的表达式加上分号组成的语句被称为表达式 语句。 例如： sum+; /算术表达式语句 str=“Olympic“ + 2008; /赋值表达式语句 用大括号“ ”括起来的语句序列称为复合语句，用来在 需要使用单行语句的地方完成多项任务。 例如： var angle=Math.PI; var cosine=Math.cos(angle); alert(“cos(“+angle+“)=“+cosine); 核心语句 n条件语句 选择结构的核心语句是条件语句，通过判断某个逻 辑条件是否成立，从给定的各种可能操作中选择一 种执行。条件语句包括if语句和switch语句。 if语句的三种形式 单分支选择。其一般格式如下： if (表达式) 语句; 功能：计算表达式的值，若计算结果为true，执行语句；否则跳过if 语句执行其后的语句。 例1：if(count 10) count = 0; 例2：if(count 10) count = 0; alert(“count被重设为0!“); 核心语句 双分支选择。其一般格式如下： if (表达式) 语句1; else 语句2; 功能：如果表达式的计算结果为true，执行语句1 ；否则执行语句2。 例如： var num=Math.round(Math.random( )*100); if(num%2=0) alert(num+“是一个偶数“); else alert(num+“是一个奇数“); 核心语句 多分支选择。其一般格式如下： if (表达式1) 语句1; else if (表达式2) 语句2; else if (表达式n) 语句n; else 语句n+1; 功能：如果表达式1的值为true，执行语句1；否则计算表 达式2的值，如果返回true则执行语句2；如果所有表达式 都不成立，则执行else后面的语句n+1。 例如：var age=parseInt(prompt(“请输入您的年龄“,“); if (age=b) if (a=c) max=a; else max=c; else if (b=c) max=b; else max=c; alert(“max=“+max); 核心语句 switch语句 switch语句用来实现多分支选择结构，其一般形式如下： switch (表达式) case 常量表达式1: 语句1; break; case 常量表达式2: 语句2; break; case 常量表达式n: 语句n; break; default: 语句n+1; 功能：比较表达式的值是否与某一个case后面的常量表达 式的值相等，如果相等，则执行相应的语句；如果所有 case后面常量表达式的值都不与表达式的值相等，则执行 default后面的语句。default子句可以省略，即所有常量表 达式的值都不满足条件时直接跳过switch语句执行其后的 语句。 核心语句 例如： var age=parseInt(prompt(“请输入您的年龄 “,“); age=Math.floor(age/10); switch(age) case 0: alert(“黄口小儿“); break; case 1: alert(“年方弱冠“); break; case 2: alert(“三十而立“); break; case 3: alert(“四十不惑“); break; default: alert(“英雄迟暮“); break语句用来直接跳出整个switch语句。如果省略 break语句，在执行完某个case子句后会继续执行下 一个case子句，直到遇上break语句或者所有的子句 都被执行完为止。 核心语句 n循环语句 循环语句允许在逻辑条件成立时反复执行相同 的语句(循环体)。 while语句 一般格式：while (表达式) 语句; 功能：计算表达式的值，如果计算结果为true，反复执行语 句；否则结束循环。语句可以是单行语句或者复合语句。 例如：用while语句编写求1+3+5+99累加和的程序： var sum=0, i=1; while(i“); for(j=1;j“); for(i=1;i“); for(j=1;j“); 核心语句 break和continue语句 break语句只能用在循环语句和switch语句中，作用是停止执 行尚未执行的部分，直接从循环语句或switch语句中跳出来。 continue语句只能用在循环语句中，作用是跳过循环体内剩 余的语句而提前进入下一次循环。 例如：var sum=0, i=0; while(true) i+; if(i100) break; if(i%2=0) continue; sum+=i; 核心语句 n标签语句 在JavaScript中，语句可以在其前面加上标签，一般格式为： 标识符: 语句; 标签必须是合法的JavaScript标识符，不能是关键字或保留字 。标签可以与程序中的变量或函数同名。 通过给语句加标签，达到在程序其他位置引用该语句的目的。 例如：outer: for(i=0; ii) document.write(“); continue outer; k=i*j; document.write(k+“ “) ; if(k=9) break outer; 核心语句 在JavaScript中，函数用来封装那些在程序中反复使用的程序段 ，常作为事件处理程序被调用。 n函数的基本组成 函数定义 一般格式：function 函数名(参数列表) 函数体; return 返回值; 说明： function：定义函数的关键字。 函数名：函数的标识符，表示函数的入口地址。 参数列表：包含若干个参数，不同参数间用逗号间隔。当调用函数 时，可以向参数列表中传入常量值、变量值或其它表达式的值，函 数内的程序语句可以通过参数名称来引用传进来的这些值。参数列 表也可以为空。 函数体：实现函数功能的程序语句。 return：指定函数返回值的关键字。return语句负责将函数的执行 结果返回到程序中函数调用的位置，一个函数中最多只能有一条 return语句。 函数 例 定义一个求阶乘的函数 function fact (n) var s = 1, i; for( i=1; i年龄2: “+p2.getAge( ); 复合数据类型 对象操作语句及运算符 for.in语句 一般格式：for(变量名 in对象名) 循环体; 该语句会将对象包含的所有属性逐个取出来，当取得对 象的一个属性后会将该属性的名称指定给变量，并继 续执行for循环直到取得对象的最后一个属性。该语句 的优点是无需知道对象中属性的名称和个数即可进行 操作。 例如：var p=new birthday(1978, 10, 1); for(var prop in p) document.write(“属性名: “+prop+ “ 属性值: “+pprop+“); 复合数据类型 对象操作语句及运算符 with语句 一般格式：with(对象名) 语句段; 该语句会将语句段内出现的任何变量和函数都认为是对 象的属性和方法，从而简化对象的引用过程。如果语 句段内的变量或函数不是对象的属性或方法，则会自 动引用with语句外部的变量或函数。 例如： var nativity=“湖北省武汉市“; var p=new birthday(1992, 11, 3); with(p) alert(“生于“+year+“-“+month+“-“+day); alert(“籍贯：“+nativity); 复合数据类型 对象操作语句及运算符 typeof运算符 一般格式：typeof 运算量 typeof运算符可放在任意类型的运算量之前，返回结果 是一个字符串，表明运算量的数据类型。 例如： var p=new birthday(1985, 8, 8); var str=“JavaScript“; var num=1000; var flag=false; function func( ) alert(typeof p); /返回object alert(typeof str); /返回string alert(typeof num); /返回number alert(typeof flag); /返回boolean alert(typeof func); /返回function alert(typeof x); /返回undefined 复合数据类型 对象操作语句及运算符 delete运算符 一般格式：delete 运算量 delete运算符用来删除放在其后的运算量，如果运算量 被删除，返回true，否则返回false。运算量可以是变量 、对象属性和数组元素。 例如： var str=“Hello World“; num=123; var p=new birthday(1985, 8, 8); var ary=new Array(1,2,3); alert(delete str); /返回false alert(delete num); /返回true alert(delete p.year); /返回true alert(delete Math.PI); /返回false alert(delete ary2); /返回true 注意：用关键字var声明的变量，内部对象的属性不能用 delete运算符删除。 复合数据类型 内部对象 JavaScript提供了非常丰富的内部对象，用户可以直接使 用这些对象的属性和方法来实现快速的程序开发。 String对象 创建String对象的一般格式为： var 对象名 = new String( ); 或 var 对象名 = new String (字符串参数); 例如：var strObj=new String(“Hello World!“); 注意：在实际应用中，很少通过new运算符和String( )构造函 数创建String对象，而是直接使用字符串变量或字符串常量。 例如： var strVar=“Java is a oriented-object language“; strVar是一个存储了字符串值的基本类型变量， JavaScript规 定可以将其作为拥有属性和方法的String对象处理。 复合数据类型 内部对象 Math对象 Math对象用于完成比简单算术运算更高级的数学处理 。Math对象不需要通过new运算符和构造函数创建， 用户可以通过以下方式直接访问它的属性和方法： Math.属性名 Math.方法名(实参列表) 例如：log=Math.LN10; root=Math.SQRT2; alert(Math.floor(log); alert(Math.ceil(log); alert(Math.round(root); alert(Math.max(log, root); alert(Math.floor(Math.random( )*6)+1); 复合数据类型 内部对象 Date对象 Date对象提供了处理日期和时间的强大功能，创建Date 对象的一般格式为： var 对象名 = new Date (实参列表); 例如：var d1=new Date( ); var d2=new Date(2008, 7, 8, 20, 0, 0); 注意：在使用Date对象进行日期和时间处理时要考虑时区的 因素。在JavaScript中，Date对象中包含的日期和时间信息实 际上是一个以毫秒为单位的值，该值从GMT(格林尼治标准时 间)时区的1970年1月1日0时0分0秒开始计算。以上面的d2对 象为例，如果PC内部时钟设置的时区为东八区(北京所在时区 )，那么可认为d2中包含的具体时间是北京时间2008年8月8日 20时0分0秒，但实际存储的是格林尼治标准时间2008年8月8 日12时0分0秒的毫秒值。 复合数据类型 内部对象 Date对象 Date对象的方法主要分为两类：一类用来读取存储在对 象中的日期和时间信息，方法名以get开始；一类用来 设置存储在对象中的日期和时间信息，方法名以set开 始。get或set方法又可以分为两类：一类以本地时间格 式来读取或设置存储在对象中的日期和时间信息，读 取时会完成GMT时间到本地时间的转换，设置时会完 成本地时间到GMT时间的转换。另一类以GMT时间格 式来直接读取或设置存储在对象中的日期和时间信息 。 例如：var d=Date.parse(“August 8, 2008 20:00:00“); alert(new Date(d).getUTCHours( ); /返回12 var t=Date.UTC(2008,7,8,20,0,0); alert(new Date(t).getUTCHours( ); /返回20 复合数据类型 n数组 数组是一种经常使用的复合数据类型，它包含若干编 码的数据段。每个编码的数据段被称为该数组的一个 元素，每个元素的编码被称为下标，下标从0开始。 数组在JavaScript中是以对象的方式实现的，同一数 组中的不同元素可以具有不同的数据类型，元素的个 数(数组长度)也可以是不固定的。 创建数组 方式一：var 数组名 = new Array( ); 用这种方式创建的数组是一个不包含元素的空 数组，数组长度为0。 例如：var ary=new Array( ); 复合数据类型 方式二： var 数组名 = new Array(初值1,初值2,初值3,初值n);用这种方 式创建的数组包含n个元素，通过构造函数Array( )带的实参列 表给每个元素赋予明确的初值，初值的数据类型可以各不相同 。 例如：Date d=new Date( ); var ary=new Array(123, “JavaScript“, true, d); 方式三：var 数组名 = new Array(数值); 用这种方式创建的数组具有指定的元素个数，传入构造函数 Array( )的数值参数明确指定了数组长度。 例如：var ary=new Array(10); 方式四：var 数组名 = 初值1,初值2,初值3,初值n; 例如：var ary=“Hello“, 5.68, false; 复合数据类型 引用数组元素 一般格式：数组名下标 其中下标的取值范围为0下标数组长度-1。 例如：var ary=new Array(4); ary0=123; ary1=true; ary2=“JavaScript“; ary3=new Date( ); for(var i=0;i“); 复合数据类型 不固定的数组长度 JavaScript中的数组可以具有任意个数的元素，可以 在任何时候改变数组的长度。 例如：var ary=new Array( ); /数组长度为0 ary0= “China“; /数组长度为1 ary1=new Date( ); /数组长度为2 ary2=78.59; /数组长度为3 数组的length属性可读可写。如果给length设置一个 比它当前值小的值，那么数组将会被截断，这个长 度之外的元素都会被抛弃；如果给length设置的值比 当前值大，那么新的、未定义初值的元素就会添加 到数组中，使数组增长到新指定的长度。 复合数据类型 例如：var ary=“China“, 3.14, true, 911; alert(ary.length); /数组长度为4 ary.length=3; /数组被截断，长度为3 alert(ary3); /ary3的值为undefined 多维数组 当数组元素是数组时，就可以定义出多维数组。例如 ，定义一个43的二维数组： var mulAry=new Array(4); for(var x=0;x 节点层次 简单文档 title html 节点层次 head body p 简单文档 document 对象模型 DOM Level 1 DOM Level 1规范由DOM Core和DOM HTML 两个模块构成。 DOM Core：提供了基于XML的文档结构图 ，以方便访问和操作文档的任意部分。 对象模型 var xmlDoc=new ActiveXObject(“Microsoft.XMLDOM“); xmlDoc.async=false; xmlDoc.load(“citylist.xml“); var cities=xmlDoc.getElementsByTagName(“city“); var csel=document.createElement(“select“); var op, cityName, txtNode, i; for(i=0;i 武汉 北京 上海 广州 citylist.xml DOM HTML：扩展DOM Core，增加了一些专门针对HTML文档 的属性和方法。 l 允许将HTML标签的属性作为DOM属性进行访问。例如： 在文档中显示边框宽度为1的图像pic1.jpg var oImg=document.createElement(“img“); oImg.setAttribute(“src“,“pic1.jpg“); oImg.setAttribute(“border“,“1“); document.body.appendChild(oImg); var oImg=document.createElement(“img“); oImg.src=“pic1.jpg“; oImg.border=“1“; document.body.appendChild(oImg); DOM Core DOM HTML 对象模型 l增加对应于特定HTML标签的DOM属性和方法。例如 ，创建一个1行2列的HTML表格： var oTable=document.createElement(“table“); oTable.setAttribute(“border“,“1“); oTable.setAttribute(“width“,“80%“); var oTbody=document.createElement(“tbody“); oTable.appendChild(oTbody); var oTr= document.createElement(“tr“); oTbody.appendChild(oTr); var oTd1= document.createElement(“td“); oTd1.appendChild(document.createTextNode(“DOM Core“); oTr.appendChild(oTd1); var oTd2= document.createElement(“td“); oTd2.appendChild(document.createTextNode(“DOM HTML“); oTr.appendChild(oTd2); document.body.appendChild(oTable); DOM Core var oTable=document.createElement(“table“); oTable.border=“1“; oTable.width=“80%“; var oTbody=document.createElement(“tbody“); oTable.appendChild(oTbody); oTbody.insertRow(0); oTbody.rows0.insertCell(0); oTbody.rows0.cells0.appendChild(document.createTextNode(“DOM Core“); oTbody.rows0.insertCell(1); oTbody.rows0.cells1.appendChild(document.createTextNode(“DOM HTML“); document.body.appendChild(oTable); DOM HTML 对象模型 n事件与事件处理器 JavaScript的事件处理机制使Web应用程序开发者 能开发出具有交互性的动态页面。 事件 定义了用户与页面交互时产生的各种操作。 例如：单击超链接或按钮会触发Clic