联系方式：www.rzchina.net 北京源智天下科技有限公司 第一讲：JavaScript概述 讲师：杨贵 e-mail:jtclass@163.com 1-2 北京源智天下科技有限公司 联系方式：www.rzchina.net 课程内容安排 • JavaScript背景知识 • 简单的脚本语言 • 第一个JavaScript程序 • 注意事项 1-3 北京源智天下科技有限公司 联系方式：www.rzchina.net JavaScript背景知识 • JavaScript的历史 – Netscape – LiveScript – JavaApplet – JavaScript • 制定标准 – 97年发布了 ECMA-262语言 规范 – ECMAScript • JavaScript现况 • JavaScript的未来 1-4 北京源智天下科技有限公司 联系方式：www.rzchina.net 简单的脚本语言 • 什么是脚本语言 – 脚本语言是一种应用程序扩展语言，用于系统的扩展， 使其按用户的意愿去运行。 – 所有的基础功能由系统提供，脚本语言在更高一层次描 述如何调用系统的接口。 – 解释执行。 • 脚本语言的分类 – 嵌入式 – 非嵌入式 • JavaScript能做什么 • JavaScript和其它语言的异同 • JavaScript同Java的异同 1-5 北京源智天下科技有限公司 联系方式：www.rzchina.net 第一个JavaScript程序 • 预备知识 – document对象的 write方法将字符串“ Hello World”输 出显示在浏览器客户区里。 – 使用window对象的alert方法以消息框的形式输出信息。 – JavaScript程序嵌入HTML文档的常用方法就是将代码 放在“ 11 12 • 嵌入方式 – 本书使用的方式 1-7 北京源智天下科技有限公司 联系方式：www.rzchina.net 第一个JavaScript程序 • JavaScript编辑器的选择 – 记事本 – VS2005 – Aptana • 编写“HelloWorld” – 打开记事本，输入以下代码： – 另存为“ helloworld.html”,扩展名为“html”或“htm”. – 在IE中打开网页文件，运行程序。 01 02 03 06 07 1-8 北京源智天下科技有限公司 联系方式：www.rzchina.net 注意事项 • 浏览器对JavaScript的支持 – 在互联网发展的过程中，几大浏览器之间也存在激烈的 竞争。JavaScript是Netscape公司的技术，其它浏览 器并不能和 Navigator一样良好的支持 JavaScript，因 为得不到使用许可。微软公司为能使其 IE浏览器能抢占 一定市场份额，于是在 IE中实现了称为 JScript的脚本 语言，其兼容JavaScript，但是和JavaScript间仍然存 在版本差异。因此，编程人员在编码时仍然考虑不同浏 览器间的差别。 • 检测当前所用的浏览器 01 1-9 北京源智天下科技有限公司 联系方式：www.rzchina.net 注意事项 • 大小写敏感 – JavaScript代码是大小写敏感的， Name和name是不 同的标识符，编码时应当予以注意。同一个词如果如果 各个字母间大小写不同时，系统将当作不同的标识符来 处理，相互之间没有任何联系 • 代码示例 01 Name = “sunsir”; // 大写字母开头 02 name = “foxsir”; // 汪写字母开头 1-10 北京源智天下科技有限公司 联系方式：www.rzchina.net 注意事项 • 空格与换行 – 代码中多余的空格会被忽略，同一个标识符的所有字母 必须连续。 – 一行代码可以分成多行书写。 • 单行： – 代码写于一行中，用分号作为语句结束标志 if(1==1 && 6>3 ){alert(“return true”);}else{alert( “return false” );} • 分成多行、规范的书写如下： 01 If( 1==1 && 6>3 ) // 如果1等于1，且6大于3，则 02 { 03 alert(“return true” ); // 输出“true” 04 } 05 else // 否则 06 { 07 alert( “return false” ); // 输出“false” 08 } 1-11 北京源智天下科技有限公司 联系方式：www.rzchina.net 课程内容安排 • 多余的空格会被忽略 01 if ( 1 // 一个语句分多行书写 02 ==1 // 将一行代码分成多行书 03 && 6> 3 // 将一行代码分成多行书 04 ) // 将一行代码分成多行书 05 { alert( // 将一行代码分成多行书 06 “return true”); }else // 将一行代码分成多行书 07 { // 将一行代码分成多行书 08 alert( “return false” ); // 将一行代码分成多行书 09 } // 将一行代码分成多行书 • 分成多行的字符串 01 var Message = “JavaScript编程，简单，有趣！”; // 单行中的字符串 02 var message = “JavaScript编程，” + // 多行中的字符串 03 “简单，有趣！”; • 可有可无的分号 – 当两个程序语句处于一行中时用分号隔开，否则可以不 用分号. 联系方式：www.rzchina.net 北京源智天下科技有限公司 第二讲：数据类型 讲师：杨兴 e-mail:jtclass@163.com 1-2 北京源智天下科技有限公司 联系方式：www.rzchina.net 课程内容安排 • 基本数据类型 • 复合数据类型 • 其他数据类型 • 数据类型的转换 1-3 北京源智天下科技有限公司 联系方式：www.rzchina.net 基本数据类型 • 在JavaScript中，字符串型数据是用引号括起的文本字 符串。 – 在JavaScript中不区分“字符”和“字符串”，字符也 被当作字符串处理。字符串中可以包含用于特殊目的字 符。 01 1-4 北京源智天下科技有限公司 联系方式：www.rzchina.net 基本数据类型 • 数值型数据 – JavaScript中用于表示数字的类型称为数字型，不像其 它编程语言那样区分整型、浮点型。数字型用双精度浮 点值来表示数字数据，可以表示（-253，+253）区间中 的值。数字的值可以用普通的记法也可以使用科学记数 法。 表示方法如下所示： 10; // 数字 10.1; // 数字 0.1; // 数字 3e7; // 科学记数 0.3E7; // 科学记数 1-5 北京源智天下科技有限公司 联系方式：www.rzchina.net 复合数据类型 • 对象的概念。 – 在面向对象的设计模式中，将数据和处理数据的方法捆 绑在一起形成的整体，称为对象。它封装了数据和操作 数据的方法 ，使用时要先创建这个对象，用new运算符 来调用对象的构造函数。 • 日期对象 。 – JavaScript将与日期相关的所有特性封装进Date对象， 主要用来进行一些与时间相关的操作，比如获取当前系 统时间，使用前要先创建该对象的一个实例： date = new Date( ); // 直接创建 date = new Date( val ); // 指定日期创建 date = new Date( y , m, d [, h [, min [, sec [,ms]]]] ); // 指定日期创建 1-6 北京源智天下科技有限公司 联系方式：www.rzchina.net 复合数据类型 • 全局对象。 – 全局对象是所有全局方法的拥有者，用来统一管理全局 方法，全局方法也就是指全局函数。该对象不能使用 new运算符创建对象实例，所有方法直接调用即可。 • 数学对象 – 数学对象（Math）封装了与数学相关的特性，包括一些 常数和数学函数，主要使用简单一些基本的数学计算。 比如求正弦、正切、余弦、取绝对值等。 – 下面是这个对象的应用实例。 1-7 北京源智天下科技有限公司 联系方式：www.rzchina.net 复合数据类型 01 从Math对象中获取圆周率常数，计算一个半径为 2单位的圆的面积 1-8 北京源智天下科技有限公司 联系方式：www.rzchina.net 复合数据类型 • 字符串对象 – String对象封装了与字符串有关的特性，主要用来处理字符串。通过 String对象，可以对字符串进行剪切、合并、替换等等。可以调用该 对象的构造函数创建一个实例，其实在定义一个字符串类型变量时 就也创建了一个String对象实例。 – 调用String对象的方法或属性形式如“对象名.方法名”或“对象名. 属性名”，构造函数如下： String([strVal]);。 – 看这样的一个实例，文本串中将李白《静夜思》的各个部分分别提取 出来，并格式化输出。标题加粗，文本居中对齐，诗歌正文颜色为 灰色。 示例代码如下所示。 1-9 北京源智天下科技有限公司 联系方式：www.rzchina.net 复合数据类型 01 1-10 北京源智天下科技有限公司 联系方式：www.rzchina.net 复合数据类型 • 数组 – 数组是JavaScript中另一重要的基本数据类型。内部对象Array封装 了所有和数组相关的方法和属性，其内存在多个数据段组合存储。 可以形象的理解为一种有很多连续房间的楼层，每个房间都可以存 放货物，提取货物时只需要给出楼层号和房间编号即可 。 – 下面是一个实例，创建一个数组用于保存古代几个大诗人的名字， 通过遍历数组逐一输出每个诗人的名字 。 01 1-11 北京源智天下科技有限公司 联系方式：www.rzchina.net 其他数据类型 • 函数 – 在JavaScript中，“函数”充当了两个角色，一个运用在数据类型方 面，另一个运用在子程序设计方面 。关于函数在本书后面的章节中 会进一步讲到，这里先就不多讲了。 • 空值 – 之前所讲过的每一种JavaScript数据类型都有自己的内容，而编程中 却需要一种类型来表示“什么都没有”。null类型就是为此目的而产 生，其表示一个空值。可以使用null和一个变量进行比较以测试该变 量是否拥有内容，通常用来判断对象的创建或引用是否成功。 – 编写程序，测试null值 ，示例代码如下所示。 1-12 北京源智天下科技有限公司 联系方式：www.rzchina.net 其他数据类型 01 • 不确定的类型 – null值表示一个变量拥有空值。可以理解为已经把给“空”给了某个 变量，而undefined则表示一个变量什么都没有得到，连“空”都没 有。通常用来判断一个变量是否已经字义或已经赋值。 1-13 北京源智天下科技有限公司 联系方式：www.rzchina.net 数据类型的转换 • 隐式转换 – 在程序运行时，系统根据当前上下文的需要，自动将数据从一种类 型转换为另一种类型的过程称为隐式类型转换。其实这个转换很多 时候都在我们身边悄悄发生，比如我们使用document.write和alert方 法时，很多时候就发生了隐式转换，也就是无论你向这两个方法 中 输入什么类型的数据，最后都被转换为字符串型数据。 • 显式 转换 – 与隐式类型转换相对应的是显式类型转换，此过程需要手动转换到 目标类型。要将某一类型的数据转换为另一类型的数据需要用到特 定的方法。 – 下面是这两种方法使用的示例。 1-14 北京源智天下科技有限公司 联系方式：www.rzchina.net 数据类型的转换 01 1-5 北京源智天下科技有限公司 联系方式：www.rzchina.net 变量 • 什么是变量 – 顾名思义，变量是指在程序运行过程中值可以发生改变 的量。更为专业的说是指可读写的内存单元。可以形象 的理解为一个个可以装载东西的容器，变量名代表着系 统分配给它的内存单元，如图 所示。 • 变量的定义方式 – JavaScript中，用如下方式定义一个变量。 var 变量名 = 值; 变量名 = 值; 1-6 北京源智天下科技有限公司 联系方式：www.rzchina.net 变量 • 练习变量的定义和使用。定义一组各种常见类型的变量 并输出其值。 01 1-8 北京源智天下科技有限公司 联系方式：www.rzchina.net 变量 • 变量的命名规则 – JavaScript变量的命名必须以字母或下划线开始，后可 跟下划线或数字，但不能使用特殊符号。 name // 合法的变量名 _name // 合法的变量名 name10 // 合法的变量名 name_10 // 合法的变量名 name_n // 合法的变量名 12name // 不合法的变量名 $name //不合法的变量名 $#name //不合法的变量名 下面来看关于变量命名的实例： 1-9 北京源智天下科技有限公司 联系方式：www.rzchina.net 变量 01 1-10 北京源智天下科技有限公司 联系方式：www.rzchina.net 变量 • 变量的作用范围 – 作用域是指有效范围， JavaScript变量的作用域有全局 和局部之分。全局作用域的变量在整个程序范围都有效， 局部作用域指作用范围仅限于变量所在的函数体。 JavaScript不像其它语言那样有块级作用域。变量同名 时局部作用域优先于全局作用域。 – 下面来看一个相关的例子。 01 1-11 北京源智天下科技有限公司 联系方式：www.rzchina.net 变量 01 • 变量的用途 – 变量主要用于存储数据，比如计算的结果、存储用户输 入的数据等。一部分变量作为对象的引用，通过变量来 操作对象的内容或调用对象的方法 。这些作用在以后的 学习过程中会体会到。下面举一个例子来简单的说明。 1-12 北京源智天下科技有限公司 联系方式：www.rzchina.net JavaScript中关键字 • 关键字 – 关键字为系统内部保留的标识符，其用途特殊， 用户的标识符不能与关键字相同。下面列出 JavaScript中常见关键字 。所列出的是一些常 用的关键字，其中大部分内容读者现在不必去详 细了解，以后用到相关内容时将再作讲解。 1-13 北京源智天下科技有限公司 联系方式：www.rzchina.net JavaScript中关键字 联系方式：www.rzchina.net 北京源智天下科技有限公司 第四讲：表达式与运算符 讲师：杨兴 e-mail:jtclass@163.com 1-2 北京源智天下科技有限公司 联系方式：www.rzchina.net 课程内容安排 • 表达式 • 操作数 • 运算符介绍 • 算术运算符 • 关系运算符 • 字符串运算符 • 赋值运算符 • 逻辑运算符 • 位运算符 • 其它运算符 • 运算符的优先级 1-3 北京源智天下科技有限公司 联系方式：www.rzchina.net 表达式 • 表达式 – 表达式是产生一个结果值的式子， JavaScript的表达式 是由常量、变量和运算符等组成。 – 表达式可以作为参数传递给函数，或将表达式结果赋予 给变量保存起来。 – 表达式的结果值有多种类型，比如布尔型、字符串型或 数值型等，因此常有逻辑表达式、数值表达式和布尔表 达式之说。 – 下面举例说明如何定义和使用表达式。 1-4 北京源智天下科技有限公司 联系方式：www.rzchina.net 操作数 • 操作数 – 操作数是指表达式中的变量或常量，在 javascript中也 包含表达式的返回值（实际上就是一个常量），常提供 计算用的数据。 – 下面是操作数在表达式中的形态。 ( A + B + C ) / D 其中A、B、C、D就是操作数，而“ +”和“/”则是操作 符，操作符将在下一节介绍。操作数的数据类型由表达 式的类型和运算符所支持的数据类型来决定的，上述代 码中若表达式是数值表达式则需要 A、B、C和D的类型 皆为数值或可以转换为数值。 1-5 北京源智天下科技有限公司 联系方式：www.rzchina.net 运算符介绍 • 运算符 – 运算符是指程序设计语言中有运算意义的符号，类似于普通 数学里运算符。通常，每一门数学都定义了一个数集和在数 集上可以进行的运算。程序设计语言也一样，规定了其支持 的数据类型以及数据可以进行的运算。 JavaScript的运算符 包含算术运算符、逻辑运算符和一些特殊的运算符。 – 在JavaScript中有单目和多目之分，单目运算符带一个操作 数，多目运算符带多个操作数 ，如下所示。 ( 1 ＋ 2 ) × 3 // 数学表达式 ++A // 左结合递增 • 操作数的类型 – 表达式中的操作数要么是常量要么是变量，常量和变量都有 其特定的数据类型。构成表达式的操作数的数据类型是由变 量或常量的类型来确定 。下面来看一个例子。 1-6 北京源智天下科技有限公司 联系方式：www.rzchina.net 算术运算符 • 加法运算符 – 加法运算符使用数学符号“ +”，属于双目运算运算符， 返回两个操作数的算术和。操作数的类型要求为数值型 ，如果是字符串型则意义不同，主要运用在数值求和的 场合，其语法如下代码所示。 操作数1 + 操作数2。 – 示例如下所示。 01 1-7 北京源智天下科技有限公司 联系方式：www.rzchina.net 算术运算符 • 减法运算符 – 减法运算符使用数学符号“－”，属于双目运算符，返 回两个操作数的算术差，操作数类型要求为数值型。含 义与数学上的减法计算完全一样，使用的形式如下代码 所示。 操作数1 – 操作数 2 01 1-8 北京源智天下科技有限公司 联系方式：www.rzchina.net 算术运算符 • 乘法运算符 – 乘法运算符使用符号“*”，属于双目运算符，返回两个 操作数的算术积。运算意义上完全等同于数学上的乘法 计算，使用语法如下所示 。 操作数* 操作数2 01 1-9 北京源智天下科技有限公司 联系方式：www.rzchina.net 算术运算符 • 除法运算符 – 除法运算符使用符号“ /”，也是属于双目运算符，操作 数类型要求为数值型。其返回两个操作数之商， JavaScript返回的商是实数集内的数据，也就是浮点型 数据。意义上等同于数学中的除法运算，因此可用在求 商的场合，使用语法如下。 操作数1 / 操作数2 01 1-10 北京源智天下科技有限公司 联系方式：www.rzchina.net 算术运算符 • 模运算符 – 取模运算符使用符号“ %”，其作用是求一个数除以另一 个数的余数。操作数的类型要求为数值型或能转换为数 值型的类型，属于双目运算符。事实上“模”可以这样 理解，如手表上的小时刻度，每到 12点以后就是 1点， 此钟表的模为 12。通常取模运算可以取求某个数的倍数 。 01 1-11 北京源智天下科技有限公司 联系方式：www.rzchina.net 算术运算符 • 负号运算符 – 负号运行符使用符号“ -”，取负也就是等于取反。等同 于数学意义的上负号，属于单目运算符，语法如下。 -操作数 这里就负号运算符来看一个例子。 01 1-12 北京源智天下科技有限公司 联系方式：www.rzchina.net 算术运算符 • 正号运算符 – 正号运算符使用符号“ +”，针对数值类型操作数，意义上等同于数学 上的正号。属于单目运算符，语法如下。 + 操作数 • 递增运算符 代码的装入 – 递增运算符使用符号“ ++”，也称为自增运算符，属于单目运算符。 可使数值类型的变量值自增一，操作数只能是变量。使用形式分左结 合与右结合两种，左结合在表达式中的效果是先递增再使用，右结果 则是先使用再递增。语法如下： 变量名++; // 右结束递增 ++变量名; // 左结合递增 代码的执行 1-13 北京源智天下科技有限公司 联系方式：www.rzchina.net 算术运算符 • 递减运算符 – 递减运算符使用符号“--”，也称为自减运算符，可使变量的值自减一。 效果与递增运算符完全相反，也有左结合与右结合之分，情况与递增 运算符相同，此不赘述，下面来看一个例子。 01 1-14 北京源智天下科技有限公司 联系方式：www.rzchina.net 关系运算符 • 相等运算符 – 相等运算符使用符号“ ==”，判断两个操作数是否相等 。如果相等返回布尔值 true，否则返回 false。属于双目 运算符，两个操作数的数据类型可以任意。运行时， “==”操作符将两端的操作数转换为同一种数据类型后 再作比较。使用语法如下： 操作数A == 操作数B • 等同运算符 – 前述及的相等运算符“ ==”进行的是非严格意义上的相 等性判断，即通过类型转为后相等的也返回 true。而等 同运算符“ ===”是严格意义上的相等，两个值和它们的 类型完全一致时才返回 true，使用语法如下： 操作数1 === 操作数 2 1-15 北京源智天下科技有限公司 联系方式：www.rzchina.net 关系运算符 • 不等运算符 – 不相等运算符使用符号“ !=”，属于双目运算符，返回 一个布尔值表示两个操作数是否相等。两个操作数类型 任意，同时可以是变量也可以是常量。使用语法如下： 操作数1 != 操作数2 • 不等同运算符 – 不等同运算符，使用符号“ !==”，属于双目运算符。效 果与等同运算符正好相反，如果两个数严格不相等则返 回true，使用语法如下。 操作数1 !== 操作数2 1-16 北京源智天下科技有限公司 联系方式：www.rzchina.net 关系运算符 • 小/大于运算符 – 小于运算符是判断第一个操作数是否小于第二个操作数 的运算符，返回一个布尔值。使用符号“ <”表示，常用 于逻辑表达式中。使用语法如下： 操作数1 < 操作数2 – 大于运算符与小于运算符相似，效果相反。 • instanceof运算符 – instanceof运算符返回一个布尔值，表明某对象是否是 某个类的实例。得到一个对象时，有时需要得知其属于 哪个类，确定对象的身份。使用语法如下： result = Obj instanceof ClassEditPlus 1-17 北京源智天下科技有限公司 联系方式：www.rzchina.net 关系运算符 • 小/大于或等于运算符 – 小于或等于符运算符判断第一个操作数和第二个操作数 间是否是小于等于关系，使用符号“ <=”。当第一个操 作数小于或等于第二个操作数时表达式返回 true，否则 返回false。 大于或等于运算符相似，这里就不多讲了。 • in运算符 – in运算符检查对象中是否有某特定的属性。可以通过 in 运算符取得数组索引集合，这是个非常有用的运算符。 语法如下： Result = property in Object; 1-18 北京源智天下科技有限公司 联系方式：www.rzchina.net 字符串运算符 • 字符串运算符 – 字符串是一种数据类型，同样也存在相应的计算，因此 程序设计语言也为字符串定义了相应的运算符。主要包 括+、>、<、>=和<=这几种，这里主要讲解运算符“+”。 – 运算符“+”，称为连接运算符，它的作用是将两个字符 串按顺序连接成为新的字符串。大大简化了字符串表达 式的写法 。这个运算符在字符串处理中使用是相当的广 泛。在前面见得也比较多了，这里就不详细讲解了。 var str1 = “今天星期几了？”; // 字符串变量 var str2 = “星期五”; // 字符串变量 document.write( str1 + str2 ); // 输出连接后的字符串 联系方式：www.rzchina.net 北京源智天下科技有限公司 赋值运算符 • 赋值运算符 – 赋值运算符用“=”表示，用于给变量赋值。赋值运算符 将值与变量绑定起来，也就是说，值写入了变量所引用 的内存单元。 – 通常，给变量填入数据最直接的办法就是使用赋值运算 符将值赋予变量。如下代码所示： var name = “Jet”; – 以上代码将“Jet”赋予变量name，“=”运算符左边的操 作数称为左值，其右边的操作数称为右值。左值必须是 变量，右值可以是变量、常量或表达式。 联系方式：www.rzchina.net 北京源智天下科技有限公司 逻辑运算符 • 逻辑与、或、非运算符 – 逻辑与运算符用“&&”表示，逻辑或运算符用“||”表示 ，它们属于双目运算符，操作数被当成布尔类型，可以 是变量也可以是常量。 – 逻辑与运算符使用语法如下所示。 操作数1 && 操作数2 – “||”运算符语法如下： 操作数1 || 操作数2 – 逻辑非运算符“!”，属于单目运算符，对操作数的逻辑 值取反，操作数可以是变量或常量。 联系方式：www.rzchina.net 北京源智天下科技有限公司 位运算符 • 位与、位或、位异或和位非运算符 – 位与、位或、位异或分别使用符号“ &”、“|”、“^” ，属于双目运算符。 – 位与运算是指把两个操作数所对应的二进制位相与，对 应两个位都为1时结果值中对应位也为 1，否则为 0。 – 位或是指对应位间如果都不为 0则结果的相应位为 1，否 则为0。 – 位异或是当两个操作数对应位不相同时结果的相应位即 为1，否则为0 – 位非运算符“~”实现对操作数按位取反运算，属于单目 运算符。操作数可以是任意 JavaScript类型的常量或变 量 联系方式：www.rzchina.net 北京源智天下科技有限公司 逻辑运算符 • 左移运算符 、带符号右移运算符 和高位补0右移运算符 – 左移位运算符“ <<”，实现整体向左移动低位补 0的功能 ，属于双目运算符 。 – 当移动的是有符号数，左边空出的位用数的符号位填充 。向右移动超出的位将被丢弃，称为带符号右移位操作。 其运算符为“>>” 。 – 前面已经提及右移运算时符号位的处理问题，是针对有符 号数的情况。当数是无符号数时，右移后在左边空出的位 上填充0，称为无符号右移位。对应的运算符是“ >>>” 。 联系方式：www.rzchina.net 北京源智天下科技有限公司 其它运算符 • 条件运算符 、new运算符 、void运算符 、类型检测运算 符 、对象属性存取运算符 、数组存取运算符 、delete运 算符、 this运算符 等等。 – 条件运算符 ，可以根据条件在两个语句间选择一个来执 行。使用符号“?:”，属于三目运算符，语法如下： 条件表达式 ? 语句1：语句2 如果语句1为真，则执行语句1，否则则执行语句2。 – new运算符，它是创建对象的一种方式。可以直接使用 new运算符创建一个类的实例对象 。 – void运算符是用在表达式不需要返回值时，可以使用void 运算符来避免表达式返回值 。 – 通过使用typeof运算符即可获得数据的类型名。typeof返 回一个表达式的值的类型名 。 联系方式：www.rzchina.net 北京源智天下科技有限公司 其它运算符 – 对象属性存取运算符 ，用符号“.”表示。其作用是读取对象 的属性、或保存值到对象的属性、或调用对象的方法。 – 数组存取运算符 ，JavaScript提供“[]”运算符用于存取数组 元素，方括号中是要存取的元素的下标。这个运算符大大方 便了数组的编程 。 – delete运算符，它可以删除对象的一个属性或数组的一个元 素，JavaScript对象的属性可以动态添加。对于动态添加的 属性可以用delete运算符将其删除 。 – this运算符 ，“this”严格的说是一个关键字，也可以理解为 运算符。面向对象的编程中要引用当前对象，this运算符可以 返回当前对象的引用。this通常用在对象构造函数中，用来引 用函数对象本身。 – 下面来看一个例子。 联系方式：www.rzchina.net 北京源智天下科技有限公司 运算符的优先级 •运算符的优先级 –JavaScript中的运算符优先级是一套规则。该规则在计算表达式时控制 运算符执行的顺序。具有较高优先级的运算符先于较低优先级的运算符 得到执行。同等级的运算符按左到右的顺序进行 ，下面这个表把运算符 的优先级从高到低进行了归纳。 联系方式：www.rzchina.net 北京源智天下科技有限公司 运算符的优先级 . [] () 字段访问、数组下标、函数调用以及表达式分组 ++ — - ~ ! delete new typeof void 一元运算符、返回数据类型、对象创建、未定义值 * / % 乘法、除法、取模 + - + 加法、减法、字符串连接 << >> >>> 移位 < <= > >= instanceof 小于、小于等于、大于、大于等于、instanceof == != === !== 等于、不等于、严格相等、非严格相等 & 按位与 ^ 按位异或 | 按位或 && 逻辑与 || 逻辑或 ?: 条件 = oP= 赋值、运算赋值 , 多重求值 联系方式：www.rzchina.net 北京源智天下科技有限公司 第五讲：控制语句 讲师：杨贵 e-mail:jtclass@163.com 1-2 北京源智天下科技有限公司 联系方式：www.rzchina.net 课程内容安排 • JS控制语句概述 • 选择语句 – if语句 、if-else语句 、if-else-if语句、switch语句 • 循环语句 – for语句 、while语句 、do-while语句 、for-in语句、 break和continue语句 • 异常处理语句 – try-catch语句 、try-catch-finally语句 、throw语句 1-3 北京源智天下科技有限公司 联系方式：www.rzchina.net JS控制语句概述 • JavaScript中提供了多种用于程序流程控制的语句，这 些语句分为选择和循环两大类 • 选择语句是指根据条件来选择一个任务分支的语句统称， 实现分支程序设计 • switch实现多路选择功能，在给定的多个选择中选择 一个符合条件的分支来执行 • 在编程中有些指令需要重复执行很多遍，这就要编写大 量的代码。而计算机则是专门用来快速完成重复和繁琐 的工作，因此编程语言也就提供循环语句来减少重复指 令的编写 1-4 北京源智天下科技有限公司 联系方式：www.rzchina.net if语句 • if语句 – 生活中一个形象的例子， 某人在看钟表上的时间，如果 小于凌晨 6点就决定继续睡，如果大于 6点，就起床去上 班 。编程中也有类似的问题，此时可用 if语句来描述之， 其测试一个 Boolean表达式，结果为真则执行某段程序。 if( <表达式> ) // 条件语句 { [ 语句组 ; ] // 程序语句序列 } 1-5 北京源智天下科技有限公司 联系方式：www.rzchina.net if-else语句 • if-else语句 – if语句仅根据表达式的值决定是否执 行某个任务，没有其它更多的选择， 而if-else语句则提供双路选择功能。 if ( <表达式> ) // 表达式成立时 { [ 语句组1; ] // 有效的程序语句 } else // 表达式不成立时 { [ 语句组2; ] // 有效的程序语句 } 1-6 北京源智天下科技有限公司 联系方式：www.rzchina.net if-else-if语句 • if-else-if语句 – 当有多个可供判断选择的条件时，单个 if-else语句显然 不能表达，于是有了 if-else-if语句。严格的说 if-else-if 不是单独的语句，而是由多个 if-else组合而成，实现多 路判断 if( <表达式1> ){ [ 语句组1; ] } [ else if( <表达式2> ){ [ 语句组2; ] } else{ [ 语句组3; ] } ] 联系方式：www.rzchina.net 北京源智天下科技有限公司 switch语句 • switch语句 – 用if-else语句实现多路选择结构使程序看起来不清晰，也不容 易维护，于是可以选择 switch语句代替之。 switch实现多路选 功能，在给定的多个选择中选择一个符合条件的分支来执行。 switch ( <表达式> ) { case < 标识1 >: [ 语句组1; ] case < 标识2 >: [ 语句组2; ] … [default:] [ 语句组3; ] } 1-8 北京源智天下科技有限公司 联系方式：www.rzchina.net 循环语句 • 在编程中有些指令需要执行很多遍，这就要编写大量的 代码。而计算机则是专门用来快速完成重复和繁琐的工 作，因此编程语言也就提供循环语句来减少重复指令的 编写 • 将重复执行的动作放在循环语句中，计算机将根据条件 执行之。 • JavaScript的循环语句包括： for、while、do-while、 for-in等4种 1-9 北京源智天下科技有限公司 联系方式：www.rzchina.net for语句 • 遇到重得执行指定次数的代码时，使用 for循 环比较合适 – 在执行for循环执行体中的语句前，有三个语 句将得到执行，这三个语句的运行结果将决 定是否要进入 for循环体 for( [表达式1]; [表达式2] ; [表达式3] ) { 语句组; } 1-10 北京源智天下科技有限公司 联系方式：www.rzchina.net while语句 • while循环在执行循环体前测试一个条件，如果条件成 立则进入循环体，否则跳到循环后的第一条语句。 – 一些重复执行动作的情形比较简单时就不需要用 for循环， 可以使用 while循环代替 while( 条件表达式 ) { 语句组; } 1-11 北京源智天下科技有限公司 联系方式：www.rzchina.net do-while语句 • do-while语句先执行一遍循环体,循环体内的语句执行 之后再测试一个条件表达式 。 – 如果表达式成立则继续执行下一轮循环，否则跳到 do- while代码段后的第一条语句。 do { 语句组; } while( 条件表达式 ); 1-12 北京源智天下科技有限公司 联系方式：www.rzchina.net for-in语句 • for-in语句是for语句的一个变体，同样是for循环语句 – for-in通常用于遍历某个集合的每个元素，比如数组由很 多元素，其元素索引构成了一个集合，使用 for-in语句可 以遍历该集合，进而取得所有元素数据 。 for ( n in set) { 语句组; } • break语句将无条件跳出并结束当前的循环结构 • continue语句的作用是忽略其后的语句并结束此轮循 环和开始新的一轮循环 1-13 北京源智天下科技有限公司 联系方式：www.rzchina.net 异常处理语句 • 程序运行过程中难免会出错，出错后的运行结果往往是 不正确的，因此运行时出错的程序通常被强制中止。运 行时的错误统称为异常 • try-catch • try-catch-finally • throw • 为了能在错误发生时得到一个处理的机会， JavaScript 提供了异常处理语句 1-14 北京源智天下科技有限公司 联系方式：www.rzchina.net try-catch语句 • try-catch是一个异常捕捉和处理代码结构，当try块中 的代码发生异常时，将由 catch块捕捉以及处理。 try { tryStatements } catch(exception) { catchStatements } 1-15 北京源智天下科技有限公司 联系方式：www.rzchina.net try-catch-finally语句 • try-catch-finally语句作用与try-catch语句一样，唯一 的区别就是当所有过程执行完毕之后前者的 finally块无 条件被执行 • throw语句 – 当多个结构嵌套时，处于里层 try-catch语句不打算自己 处理异常则可以将其抛出，父级 try-catch语句可以接收 到子级抛出的异常。 try{ tryStatements; }catch( exception ){ handleStatements; }finally{ fianllyStatements; } 联系方式：www.rzchina.net 北京源智天下科技有限公司 联系方式：www.rzchina.net 北京源智天下科技有限公司 第六讲：函数 讲师：杨贵 e-mail:jtclass@163.com 1-2 北京源智天下科技有限公司 联系方式：www.rzchina.net 课程内容安排 • 函数概述 • JS中函数的定义方式 • arguments对象 • 函数返回类型 • 函数的作用域 • this关键字 1-3 北京源智天下科技有限公司 联系方式：www.rzchina.net 函数概述 • 函数是完成特定任务的可重复调用的代码段，是 JavaScript组织代码的单位 。 • 函数的功能 – 函数的主要功能是将代码组织为可复用的单位，可以完 成特定的任务并返回数据 – 可以这样形象的理解，函数相当于一台磨面机，麦子 （数据）从进料口进入机器内（函数体）进行加工，出 料口出来的是面粉（返回值）。机器可以重复用来加工 其它粮食，好比代码复用。 1-4 北京源智天下科技有限公司 联系方式：www.rzchina.net 定义函数 • JavaScript的函数属于Function对象，因此可以使用 Function对象的构造函数来创建一个函数 。 • 可以使用function关键字以普通的形式来定义一个函数 1-5 北京源智天下科技有限公司 联系方式：www.rzchina.net 函数的普通定义方式 • 普通定义方式使用关键字 function，也是最常用的方式， 形式上跟其它编程语言一样。语法格式如下： function 函数名( [ 参数1, [ 参数2, [ 参数N ] ] ] ) { [ 语句组 ]; [ return [表达式] ]; } – function：必选项，定义函数用的关键字。 – 函数名：必选项，合的 JavaScript标识符。 – 参数：可选项，合法的 JavaScript标识符，外部的数据可以通过参数传送到 函数内部。 – 语句组：可选项，JavaScript程序语句，当为空时函数没有任何动作 – return：可选项，遇到此指令函数执行结束并返回，当省略该项时函数将在 右花括号处结束。 – 表达式：可选项，其值作为函数返回值。 • 演示：范例 6-1 1-6 北京源智天下科技有限公司 联系方式：www.rzchina.net 函数的变量定义方式 • 函数变量定义方式是指以定义变量的方式定义函数。 – JavaScript中所有函数都属于 Function对象，于是可以 使用Function对象的构造函数来创建一个函数 。 – 变量定义方式实质上就是创建一个函数对象。 var 变量名 = new Function( [ 参数1, [ 参数2, [ 参数N ] ] ], [ 函数体 ] ); – 函数变量名：必选项，代表函数名。是合法的 JavaScript标识符。 – 参数：可选项，作为函数参数的字符串，必须是合法的 JavaScript标 识符，当函数没有参数时可以忽略此项。 – 函数体：可选项，一个字符串。相当于函数体内的程序语句序列，各 语句使用分号格开，当忽略此项时函数不执行任何操作。 • 演示：范例6-2 1-7 北京源智天下科技有限公司 联系方式：www.rzchina.net 函数的指针调用方式 • 回调 ：其机制是通过指针来调用函数 。 – 前面的代码中，函数的调用方式是常见而且普通的，但 JavaScript中函数调用的形式比较多，非常灵活。有一 种重要的、在其它语言中也经常使用的调用形式叫做回 调 。 • 回调函数按调用者的照约定实现函数的功能，由调用者 调用 • 演示：编写一个排序函数，实现数字排序。排序方法由 客户函数实现，函数参数个数为两个，两个参数的关系 作为排序后的元素间的关系 。 1-8 北京源智天下科技有限公司 联系方式：www.rzchina.net 演示回调函数 1-10 北京源智天下科技有限公司 联系方式：www.rzchina.net 函数的参数 • 函数的参数是函数与外界交换数据的接口。外部的数据 通过参数传入函数内部进行处理，同时函数内部的数据 也可以通过参数传到外界。 • 函数定义时圆括号里的参数称为形式参数，调用函时传 递的参数称为实际参数 1-11 北京源智天下科技有限公司 联系方式：www.rzchina.net arguments对象 • arguments对象代表正在执行的函数和调用它的参数 – 函数对象的 length属性说明函数定义时指定的参数个数 – arguments对象的length属性说明调用函数时实际传递 的参数个数 • arguments对象不能显式创建，函数在运行时并被调用 时由JavaScript运行时环境创建并设定各个属性值，其 中包括各个参数的值 。 – 通常使用 arguments对象来验证所传递的参数是否符合 函数要求 • 演示：使用arguments对象验证函数的参数是否合法 。 1-12 北京源智天下科技有限公司 联系方式：www.rzchina.net 使用arguments对象 01 1-14 北京源智天下科技有限公司 联系方式：www.rzchina.net 函数返回类型 • 值类型使用的是值传递方式，即传递数据的副本。 – 一般情况下，函数返回的非对象数据都使用值返回方式， 如下面的代码所示：•01 fcuntion sum( a , b ) // 加法函数 •02 { •03 return a + b; // 返回两个数之和 •04 } •05 var c = sum( 1, 2 ); • 引用类型返回的是数据的地址，而不是数据本身 。 – 引用传递的优点是速度快，但系统会为维护数据而付出 额外的开销。通常返回复合类型数据时使用引用传递方 式，如下代码所示 ： 1-15 北京源智天下科技有限公司 联系方式：www.rzchina.net 函数返回类型 01 fcuntion getNameList() 定义函数，以获取名单 02 { 03 var List = new Array(“Lily”, “Petter”, “Jetson” ); // 名单 04 return List; // 返回名单引用 05 } 06 var nameList = getNameList(); // 测试 07 nameList = null; // 删除引用 • 返回函数 :函数可以返回一个函数指针 。 – 外部代码可以通过指针调用其引用的函数对象，调用方 式和一般函数完全一样。 – 一般情况下私有函数不能被外界直接调用，因此可以将 一个私有函数的地址作为结果返回给外界使用，如下代 码所示： 联系方式：www.rzchina.net 北京源智天下科技有限公司 01 function getSum() // 定义加法函数 02 { 03 function sum( a, b ) // 定义私有函数 04 { 05 return a+b; // 返回两个数之和 06 } 07 return sum; // 返回私有函数的地址 08 } 09 var sumOfTwo = getSum(); // 取得私有函数地址 10 var total = sumOfTwo( 1, 2 ); // 求和 •上述代码中函数 getSum将其内部的函数 sum的地址当作 返回值返回，第 09行通过调用 getSum获得sum函数的指 针。第10行通过指针调用 sum函数，求两个值的和。 联系方式：www.rzchina.net 北京源智天下科技有限公司 函数的作用域 • 公有函数：是指定义在全局作用域中，每一个代码都可 以调用的函数 。 – 例如大家公有的物品，理论上谁都可以看得到，每个人 都可以去使用 。 02 function GetType( obj ) // 函数处于项级作用域，用于求操作数类型 03 { 04 return typeof( obj ); // 返回对象的类型 05 } 06 function fruit( name, price) // 水果类构造函数 07 { 08 if( GetType( price ) != "number" ) // 调用顶级作用域中的函数GetType 09 { 10 var e = new Error(); // 定义错误信息对象 11 e.message = "Price if not a number"; // 填写错误描述 12 throw e; // 抛出错误对象 13 } 14 } 15 var apple = new fruit( "apple", 2.0 ); // 测试 联系方式：www.rzchina.net 北京源智天下科技有限公司 函数的作用域 • 私有函数 ：是指处于局部作用域中的函数 。 – 当函数嵌套定义时，子级函数就是父级函数的私有函数。 外界不能调用私有函数，私有函数只能被拥有该函数的 函数代码调用 。 • 演示：私有函数的使用 ，代码如下： 联系方式：www.rzchina.net 北京源智天下科技有限公司 私有函数的使用 01 联系方式：www.rzchina.net 北京源智天下科技有限公司 this关键字 • this关键字引用运行上下文中的当前对象，JavaScript的 函数调用通常发生于某一个对象的上下文中。 – 如果尚未指定当前对象，则调用函数的默认当前对象是 Global，使用call方法可以改变当前对象为指定的对象 。 • 演示：范例6-6 联系方式：www.rzchina.net 北京源智天下科技有限公司 第七讲：数组 讲师：杨贵 e-mail:jtclass@163.com 1-2 北京源智天下科技有限公司 联系方式：www.rzchina.net 课程内容安排 • 数组介绍 • 创建数组 • 数组元素的基本操作 • 数组对象常见的操作 1-3 北京源智天下科技有限公司 联系方式：www.rzchina.net 数组介绍 • 数组的概念 ：JavaScript数组是指将多个数据对象编码 存储、提供一致的存取方式的集合 。 – 与其它程序语言不同的是， JavaScript的数组元素的数 据类型可以不相同。 实际开发中，总是面临大量数据存储的问题。 JavaScript语言不像 C/C++那样合适用于数据结构的设计，因此需要系统内部提供针对大量 数据存储的工具，数组因此而产生。 JavaScript数组的目标是能组织存 储各种各样的数据，并且访问方式和其它语言一样，特点是能混合存储 类型不相同的数据。 • 数组元素：是指存储在数组中并赋予唯一索引号的数据 段 。 – 各元素的数据类型可以是任意有效的 JavaScript数据类 型，元素按添加进数组的顺序存储于数组中。 示意图 如下： 1-4 北京源智天下科技有限公司 联系方式：www.rzchina.net 数组介绍 • 单维数组 • 与多维数组等效的数组 1-5 北京源智天下科技有限公司 联系方式：www.rzchina.net 创建数组 • 创建一个空数组 • 通过指定数组长度创建数组 • 通过指定数组元素创建数组 • 直接创建数组 1-6 北京源智天下科技有限公司 联系方式：www.rzchina.net 创建数组 • 创建一个空数组 – 数组在创建时可以不包含任何元素数据，即空数组。创 建后返回一个数组对象，使用该对象可以往数组中添加 元素。语法如下： – 上述语句将创建一个空数组。变量 Obj引用创建后的数 组对象，通过此变量可以操作数组， Array()为数组对 象的构造函数。 var Obj = new Array(); 1-7 北京源智天下科技有限公司 联系方式：www.rzchina.net 创建数组 • 通过指定数组长度创建数组 – 在创建数组时可以指定数组的元素长度，通过这种方式 可以创建一个有指定元素个数的数组对象 。语法如下： – Size指明新建的数组有多少个元素。数组对象的 length 将被设置为 Size，仅指定长度但没有实际填充元素及其 数据的数组将得不到数据存储空间 var Obj = new Array( Size ); 1-8 北京源智天下科技有限公司 联系方式：www.rzchina.net 创建数组 • 通过指定数组元素创建数组 – 新建的数组将包含创建时指定的元素，通常用在数据已 经准备就绪的场合。语法如下： var Obj = new Array( 元素1, 元素2, …, 元素N ); • 创建数组演示：数组善于将每个独立的数据组织起来， 提供一致的访问方式。现在创建一个数组用于保存 “Peter”、“Tom”、“Vicky”和“Jet”这几个学生的 名字 。 1-9 北京源智天下科技有限公司 联系方式：www.rzchina.net 创建数组演示 01 02

通过指定元素创建数组

03 10 • 直接创建数组 – JavaScript创建数组的另一种简便的方式是使用“ []”运 算符直接创建，数组的元素也是创建时被指定。这种方 法的目标也是创建数组，与前面的方法相比仅仅是语法 上的不同 。 var Obj = [ 元素1, 元素2, 元素3, …, 元素N ]; 1-10 北京源智天下科技有限公司 联系方式：www.rzchina.net 数组元素的基本操作 • 读取数组元素 • 添加数组元素 • 删除数组元素 • 数组元素的个数 以下是最基本的数组操作，我们在使用数组时基本上都涉及到， 后面我们将对它们逐一进行讲解。 提示：尽管有很多种创建方式，但通常使用其中一种就足够。 1-11 北京源智天下科技有限公司 联系方式：www.rzchina.net 数组元素的基本操作 • 读取数组元素 – 读取数组元素最简单的方法就是使用“ []”运算符，此运 算符在第四章已经讲过。使用“ []”运算符可以一次读取 一个数组元素，语法如下： – 目标元素通常由下标索引号决定，例如读取第一个元素 为“数组名 [0]”，依此类推 – 下面的代码从一个填有商品名字数组中读出第二种商品 的名字。 数组名[下标索引 ]; var products = new Array( “洗衣粉”, “香皂”, “洗洁精” ); // 商品列表 var product = products[ 1 ]; // 取出第二种商品 1-12 北京源智天下科技有限公司 联系方式：www.rzchina.net 数组元素的基本操作 • 添加数组元素 – JavaScript的数组可以动态添加新元素，也可以动态删 除原有的元素，下一小节讲解如何删除。添加新元素通 常使用Array对象的push方法，push方法是将新元素 添加到数组的尾部。使用 unshift可以将指定个数的新 元素插入数组的开始位置，形成新的数组 ,下面是添加 元素的一般形式： – 也可以使用“[]”运算符指定一个新下标来添加新元素， 新元素添加到指定的下标处。如果指定的下标超过数组 的长度，数组将被扩展为新下标指定的长度。 var students = new Array(); // 创建一个没有任何元素的数组 students.push( “Lily” ); // 将Lily的名字添加到数组中 1-13 北京源智天下科技有限公司 联系方式：www.rzchina.net 数组元素的基本操作 • 删除数组元素 – 通常使用 delete运算符删除一个指定的元素，如果需要 删除全部元素只需要删除数组对象即可。使用语法如下： – 例如，使用数组作为学生名单，现要删除数组中第一个 元素，代码如下 ： delete 数组名[下标]; var names = Array( “李莉”, “杨杨” ); // 有两个名字的名单 delete names[0]; // 删除第一名字“莉莉” 1-14 北京源智天下科技有限公司 联系方式：www.rzchina.net 数组元素的基本操作 • 数组元素的个数 – 数组对象的 length（长度）属性指示了数组元素的个数。 – 通过设定 length属性可以指定数组的长度。 – 在得知长度情况下可以方便的遍历整个数组，读取数组 元素个数信息的方法如下代码所示： – 尽管指定了数组的 length属性，真正的有效元素只包含 已经存入数据的元素，其它没有真正填充数据的元素仍 然为空。 var Obj = new Array( 1, 2, 3 ); var count = Obj.length; 1-15 北京源智天下科技有限公司 联系方式：www.rzchina.net 数组对象常见的操作 • 将数组转换为字符串 – toString方法将数组表示为字符串，各个元素按顺序排 列组合成为字符串返回 。 – radix为可选项参数，表示进制。当对象是数字对象时， 该参数起作用。对象名是数组对象变量名，方法执行后 各元素以“，”隔开按顺序加入字符串中 。 • 将数组元素连接成字符串 – 可以使用 join方法将各元素组合为字符串，连接符号由 用户指定。语法如下： – 分隔符：必选项，是一个字符串串对象，作为各元素间 的分隔字符串。 对象名.toString( [radix] ); 数组名.join(分隔符); 1-16 北京源智天下科技有限公司 联系方式：www.rzchina.net 数组对象常见的操作 • 在数组尾部添加元素 – push方法一次可以添加单个元素或多个元素到数组末 端。使用语法如下： – 元素：可选项，可以是一个或多个 JavaScript对象，使 用“，”分隔。 数组名.push( [ 元素1, [ 元素2, […, [元素N ] ] ] ] ); • 删除数组的最后一个元素 – pop方法的作用是移除数组末尾的一个元素。前面讲过 使用delete运算符删除指定的元素，与 delete不同， pop方法删除最后一个元素后还将其返回。 语法如下： 数组名.pop(); 1-17 北京源智天下科技有限公司 联系方式：www.rzchina.net 数组对象常见的操作 • 移除数组顶端的元素 – pop方法是移除数组末端的一个元素，而 shift方法正好 相反，其移除数组的第一个元素并将其返回。该方法执 行后数组剩下的元素向前移动，下标索引号重新调整从 0开始按顺序赋予所有元素。 Shift的语法如下： – 在大家所熟知的基本数据结构中，队列非常有用，其遵 循选进先出（FIFO）的规则，与堆栈不同。 shift和 push方法结合使用，可以将数组当成队列使用。 数组名.shift( ); 1-18 北京源智天下科技有限公司 联系方式：www.rzchina.net 数组对象常见的操作 • 在数组顶端插入元素 – unshift是将元素插入数组的首部。一次可以插入单个 或多个元素，所有元素按顺序插入，操作完成后返回新 数组的引用。语法如下。 ： – unshift方法的使用与前面讲过的各方法一样。如果不 计较元素插入的位置，则推荐使用 push方法。因为 unshift方法将引发所有下标的改动，可能会影响依靠 下标才能准确进行的计算 。 数组名.unshift( [元素1, [ 元素2, [ 元素3, […, [元素N ] ] ] ] ] ); 1-19 北京源智天下科技有限公司 联系方式：www.rzchina.net 数组对象常见的操作 • 添加元素并生成新数组 – concat方法可以将多个数组的元素连接一起成为新的数 组，新数组中的元素按连接时的顺序排列。当需要合并 多个数组时，此方法比较方便。语法如下： – item：可选项，要连接到“数组名”引用的数组末尾的 其它项目。可以是数组对象也可以是单个数组元素，或 者是其它 JavaScript对象。 数组名.concat( [ item1, [ item2, [ item3 , […, [ itemN ] ] ] ] ] ); 1-20 北京源智天下科技有限公司 联系方式：www.rzchina.net 数组对象常见的操作 • 删除、替换或插入数组元素 – splice方法的作用是，从一个数组中移除一个或多个元 素。剩下的元素组成一个数组，移除的元素组成另一个 数组并返回它的引用。同时，原数组可以在移除的开始 位置处顺带插入一个或多个新元素，达到修改替换数组 元素的目的。 – start：必选项，表示从数组中剪切的起始位置下标索引 号。 – deleteCount：必选项，表示将从数组中切取的元素的 个数。 – item：可选项，表示切取时插入原数组切入点开始处的 一个或多个元素，要求为有效的 JavaScript 数组名. splice( start, deleteCount, [ item1 [, item2 [ , . . . [ , itemN ] ] ] ] ); 1-21 北京源智天下科技有限公司 联系方式：www.rzchina.net 数组对象常见的操作 • 删除、替换或插入数组元素 – splice方法的作用是，从一个数组中移除一个或多个元 素。剩下的元素组成一个数组，移除的元素组成另一个 数组并返回它的引用。同时，原数组可以在移除的开始 位置处顺带插入一个或多个新元素，达到修改替换数组 元素的目的。 – start：必选项，表示从数组中剪切的起始位置下标索引 号。 – deleteCount：必选项，表示将从数组中切取的元素的 个数。 – item：可选项，表示切取时插入原数组切入点开始处的 一个或多个元素，要求为有效的 JavaScript 数组名. splice( start, deleteCount, [ item1 [, item2 [ , . . . [ , itemN ] ] ] ] ); 1-22 北京源智天下科技有限公司 联系方式：www.rzchina.net 数组对象常见的操作 • 颠倒数组元素的顺序 – 可以使用 reverse方法将一个 Array对象中所有元素的次 序反转，然后返回元素顺序反转后的 Array对象的引用。 数组名.reverse( ); • 对数组元素进行排序 – Array对象的sort方法可以将一个数组中的所有元素排 序。执行时先将调用该方法的数组中的元素按用户指定 的方法进行排序，排序后的所有元素构成一个新数组并 返回之。通常用来对数据排序，语法如下： 数组名.sort( [ sortfunction ] ) 1-23 北京源智天下科技有限公司 联系方式：www.rzchina.net 数组对象常见的操作 – sortfunction：可选项。用来确定元素顺序的函数的名称。如果这个参数 被省略，那么元素将按照 ASCII字符顺序进行升序排列。 – 负值：表示传给sortfunction两个实参中，第一个的值比第二个的小。 – 零：表示传给sortfunction两个实参的值相等。 – 正值：表示传给sortfunction两个实参中，第一个的值比第二个的大。 1-24 北京源智天下科技有限公司 联系方式：www.rzchina.net 结束语 硬爬过那道坎后，你会发现原来的挑战主要是来自已的内心 。 联系方式：www.rzchina.net 北京源智天下科技有限公司 第八讲：面向对象基础 讲师：杨贵 e-mail:jtclass@163.com 1-2 北京源智天下科技有限公司 联系方式：www.rzchina.net 课程内容安排 • 面向对象术语 • 对象应用 • JavaScript的对象层次 • 事件驱动与事件处理 1-3 北京源智天下科技有限公司 联系方式：www.rzchina.net 面向对象术语 • 面向过程：面向结构的设计方法中最经典的一句话是 “自顶向下，逐步细化” • 面向对象的特性 – 封装，此特性可隐藏对象内部的实现细节，对外提供一 致的访问接口 。 – 聚合，将多个对象组合起来，实现更复杂的功能。 – 继承，简单的代码复用机制，使子类拥有父类的特性。 – 多态 ，以一致的方式使用不同的实现，实现接口不变 性。 • 属性：属性描述了对象的状态 。 • 方法 ：是对象具有可实施的动作 。 1-4 北京源智天下科技有限公司 联系方式：www.rzchina.net 对象应用 • 严格的讲，JavaScript不是一种面向对象的语言，因为 它没有提供面向对象语言所具有的一些明显特征，例如 继承和多态。因此， JavaScript设计者把它称为“基于 对象”，而不是“面向对象”的语言。 • 声明和实例化 （new） – JavaScript中没有类的概念，创建一个对象只要定义一 个该对象的构造函数并通过它创建对象即可 。 • 演示：创建一个Card（名片）对象，每个对象又有这 些属性：name（名字）、 address（地址）、phone （电话）。 代码贴于下文： 1-5 北京源智天下科技有限公司 联系方式：www.rzchina.net 对象应用 • 用于输出卡片上的信息 01 function Card( _name, _address, _phone ) // 定义构造函数 02 { 03 this.name=_name; // 初始化“名字”属性 04 this.address=_address; // 初始化“地址”属性 05 this.phone=_phone; // 初始化“电话”属性 06 } •名片对象的构造函数 01 function printCard() //打印信息 02 { 03 line1="Name:"+this.name+"
\n"; // 读取name 04 line2="Address:"+this.address+"
\n"; // 读取address 05 line3="Phone:"+this.phone+"
\n" // 读取phone 06 document.writeln(line1,line2,line3); 07 } 1-6 北京源智天下科技有限公司 联系方式：www.rzchina.net 对象应用 • 修改Card对象，在Card对象中添加 printCard函数的引 用。 01 function Card(name,address,phone) // 构造函数 02 { 03 this.name=name; // 初始化name、address、phone 04 this.address=address; 05 this.phone=phone; 06 this.printCard=printCard; // 创建printCard函数的定义 07 } • 实例化对象 01 Tom=new Card( "Tom", "BeiJingRoad 123", "0851-12355" ); // 创建名片 02 Tom.printCard(); // 输出名片信息 1-7 北京源智天下科技有限公司 联系方式：www.rzchina.net 对象应用 • 对象的引用 ：JavaScript中对象存活的依据。 • 对象的废除 – Null – 必须把对象的所有引用都设为 null，对象才会被清除 • 对象的早绑定和晚绑定 – 早绑定也就是静态绑定，也称为编译时联编。像 C++这 样的静态语言，它的多态表现在两方面，重载机制是静 态多态，也就是编译时多态。 – 晚绑定也就是动态绑定，类型在运行时才能确定，一般 动态语言都具有这样的特征。 1-8 北京源智天下科技有限公司 联系方式：www.rzchina.net JavaScript的对象层次 • JavaScript包含几大部分 – 包括语言核心 :变量常量、运算符、表达式、数据类型、 控制语句等 。 – 基本的内置对象： String、Date、Math等 。 – 浏览器对象：window、Navigator、Location等 。 – 文档对象 ：Document、Form、Image等。 1-9 北京源智天下科技有限公司 联系方式：www.rzchina.net JavaScript的对象层次 • 客户端对象层次图 1-10 北京源智天下科技有限公司 联系方式：www.rzchina.net 事件驱动与事件处理 • “发生――处理” 模式 – Web页中存在很多“发生－处理”这样的关系，比如一 个文本框突然没有了焦点或字符数量改变了，当发些事 件时系统就调用监听这些事件的函数。如此，整个系统 可以使用事件的发生来驱动运作，这就是所谓的事件驱 动。 • 事件应用演示：响应编辑框的“ onkeyup”事件，当用 户按回车键时将文本框中的内容显示在对话框中 。 1-11 北京源智天下科技有限公司 联系方式：www.rzchina.net 事件驱动与事件处理 • 事件示例 01 02 03 04 14 15 16

事件处理示例

17 18 19 20 联系方式：www.rzchina.net 北京源智天下科技有限公司 第九讲：窗口和框架 讲师：杨兴 e-mail:jtclass@163.com 1-2 北京源智天下科技有限公司 联系方式：www.rzchina.net 课程内容安排 • window对象 • window对象事件及使用方法 • 对话框 • 状态栏 • 窗口操作 • 超时与时间间隔 • 框架操作 1-3 北京源智天下科技有限公司 联系方式：www.rzchina.net window对象 • window对象介绍 – 简而言之， window对象是浏览器窗口对文档提供一个 显示的容器，是每一个加载文档的父对象。 window对 象还是所有其他对象的顶级对象，通过对 window对象 的子对象进行操作，可以实现更多的动态效果。 • window对象的使用方法 – window对象代表当前打开的浏览器窗口，其作为顶级 对象。window对象的方法和属性的调用和其它对象一 样，区别是 window对象不需要创建即可直使用。需要 注意的是 window对象名称是小写，下面是其属性和方 法的调用语法。 window.属性名 window.方法名(参数列表) 1-4 北京源智天下科技有限公司 联系方式：www.rzchina.net window对象 window对象的使用方法举例 1-5 北京源智天下科技有限公司 联系方式：www.rzchina.net window对象事件及使用方法 • 装载文档 – 网页加载完毕时激发一个 onload事件。通常在该事件处理程序中进 行与网页加载完毕相关的操作，该事件是 BODY标签的属性。该事 件也可以作用于 IMG元素，通常借助该事件以实现图片预加载功能 。当作用在BODY元素中时，只有当整个网页都加完毕后才会被激 发。 • 卸载文档 – 与load事件相反， unload事件是在浏览器窗口卸载文档时所激发的 事件。所谓卸载是浏览器的一个功能，即在加载新文档之前，浏览 器会清除当前的窗口的内容。用这个事件可以在卸载文档时给用户 一个提示信息，比如说一个问候。 1-6 北京源智天下科技有限公司 联系方式：www.rzchina.net window对象事件及使用方法 • 得到焦点与失去焦点 – 得到焦点是指浏览器窗口为当前的活动窗口，得到焦点 时触发窗口对象的 focus事件。相反的是当浏览器窗口 变为后台窗口时，称为失去焦点。发生这种转换时触发 名为blur的事件。通常将 focus事件与blur事件都会联合 起来，使用在与窗口活动状态有关的场合 。 – 窗口对象提供两个方法用于调整窗口的大小，分别是 resizeTo和resizeBy。其中， resizeBy是相对于当前尺 寸调整窗口大小，而 resizeTo是把把窗口设置成指定的 宽度和高度。当浏览器窗口大小被调整时，将会触发 resize事件。 1-7 北京源智天下科技有限公司 联系方式：www.rzchina.net window对象事件及使用方法 • 错误处理 – window对象中有一个可以用来处理错误信息的 事件error，该事件由浏览器产生。以 IE浏览器 为例，一旦产生了 JavaScript错误，就会在窗 口状态栏中显示错误提示。只有在当前窗口中发 生了JavaScript错误才激发 error事件，虽然能 得到错误通过，但与“ try…catch…finally”异 常处理结构不同，后者是语言机制，在这种机制 下错误是可以挽回的。 – 下面举例说明. 1-8 北京源智天下科技有限公司 联系方式：www.rzchina.net window对象事件及使用方法 • 错误处理 1-9 北京源智天下科技有限公司 联系方式：www.rzchina.net 对话框 • 警告对话框 – 警告对话框是一个带感叹图标的小窗口，显示文 本信息并且使扬声器发出“当～”的声音。通常 用来输出一些简单的文本信息，通过调用 window对象的alert方法即可显示一个警告对话 框 • 询问对话框 – 询问对话框是具有双向交互的信息框，系统在对 话框上放置按钮，根据用户的选择返回不同的值。 设计程序时可以根据不同的值予以不同的响应， 实现互动的效果。通常放在网页中，对用户进行 询问并根据其选择而做选择不同的流程。 – 使用语法如下: window.confirm(string) 1-10 北京源智天下科技有限公司 联系方式：www.rzchina.net 对话框 • 输入对话框 – 很多情况下需要向网页中的程序输入数据，简单 的鼠标交互显然不能满足。此时就可以使用 window对象提供的输入对话框，通过该对话框 可以输入数据。通过 window的prompt方法即 可显示输入对话框，使用方法如下： window.prompt( 提示信息，默认值 ) 1-11 北京源智天下科技有限公司 联系方式：www.rzchina.net 对话框 • 输入对话框实例 1-12 北京源智天下科技有限公司 联系方式：www.rzchina.net 状态栏 • 状态栏介绍 – 浏览器的状态栏通常位于窗口的底部，用于显示 一些任务状态信息等。在通常情况下，状态显示 当前浏览器的工作状态或用户交互提示信息 ,如 图所示。 1-13 北京源智天下科技有限公司 联系方式：www.rzchina.net 状态栏 • 默认状态栏信息 – 默认情况下，状态栏里的信息都是空的，只有在加载网页 或将鼠标放在超链接上时，状态栏中才会显示与任务目标 相关的瞬间信息。 window对象的defaultStatus属性可以 用来设置在状态栏中的默认文本，当不显示瞬间信息时， 状态栏可以显示这个默认文本。 defaultStatus属性是一个 可读写的字符串 。 • 状态栏瞬间信息 – 在默认情况下，将鼠标放在一个超链接上时，状态栏会显 示该超链接的URL，此时的状态栏信息就是瞬间信息。当 鼠标离开超链接时，状态栏就会显示默认的状态栏信息， 瞬间信息消失 。 1-14 北京源智天下科技有限公司 联系方式：www.rzchina.net 状态栏 • 状态栏瞬间信息 1-15 北京源智天下科技有限公司 联系方式：www.rzchina.net 窗口操作 • 打开新窗口 – 使用window对象的open方法可以打开一个新的浏览器窗 口，新窗口作为本窗口的子窗口。相应的本窗口作为新窗 口的次窗口，并持有对新窗口的一个引用，通过该引用可 以适度的操作新窗口。open方法的语法如下： window.open(url,name,features,replace) 其中,features是描述窗口的特征, replace指明是否允许url 替换窗口的内容。 • 窗口名字 – 窗口的名字在窗口打开时可以设定，仍然用open方法，只 是充分运用它的参数的设置。window.open方法可以设置 新开窗口的名称，该窗口名称在a元素和form元素的target 属性中使用 。 1-16 北京源智天下科技有限公司 联系方式：www.rzchina.net 窗口操作 • 关闭窗口 – 如果获得一个window对象的引用时，通过该引用去调用其 close方法就可以关掉一个与之相关的窗口。通常情况下， 父窗口通过这种方式关闭子窗口。语法如下： 窗口名.close() • 窗口的引用 – 上文已经提到通过窗口的引用可以操作内容，同时可以操 作窗口的内容。使用些特性可以在一个窗口中控制另一个 窗口的内容，例如向一个新开的浏览器窗口中输出内容。 1-17 北京源智天下科技有限公司 联系方式：www.rzchina.net 状态栏 • 滚动文档 – 浏览器中的内容大于其显示区域时，一般会出现滚动条便 于查看被遮内容。用户可以拖动滚动条，也可以通过程序 来控制窗口的滚动。调用 window对象的scrollBy或 scrollTo方法即可滚动文档。使用方法如下面代码所示： 1-18 北京源智天下科技有限公司 联系方式：www.rzchina.net 窗口操作 • 关闭窗口 – 如果获得一个window对象的引用时，通过该引用去调用其 close方法就可以关掉一个与之相关的窗口。通常情况下， 父窗口通过这种方式关闭子窗口。语法如下： 窗口名.close() • 窗口的引用 – 上文已经提到通过窗口的引用可以操作内容，同时可以操 作窗口的内容。使用些特性可以在一个窗口中控制另一个 窗口的内容，例如向一个新开的浏览器窗口中输出内容。 1-19 北京源智天下科技有限公司 联系方式：www.rzchina.net 超时与时间间隔 • 延迟代码执行 – 使用window对象的 setTimeout方法可以延迟代码的执行 时间，也可以用该方法来指定代码的执行时间。 setTimeout方法的语法代码如下所示： window.setTimeout(code,delay) 联系方式：www.rzchina.net 北京源智天下科技有限公司 超时与时间间隔 • 周期性执行代码 – 代码延迟执行机制在执行一次后就失效，而在应用中，有 时希望某个程序能反复执行，比如说倒计时等，需要每秒 执行一次。为此可以使用window方法的setInterval方法， 该函数设置一个定时器，每当定时时间到时就调用一次用 户设定的定时器函数。 • 停止周期性执行代码 – 使用setInterval方法可以可以设定计时器，设定计时器时将 返回一个计时器的引用。当不再需要的时候可以使用 clearInterval方法移除计时器，其接收一个计时器ID作为参 数，语法如下： window.clearInterval(id) 联系方式：www.rzchina.net 北京源智天下科技有限公司 超时与时间间隔 • 取消延迟执行 – window对象中的clearTimeout方法也可以取消延迟执行的 代码。因为在实际应用中，如果有时出现特殊情况，不再 需要程序自延迟执行的时候，就得想办法取消延迟。 clearTimeout方法可以做到这一点。语法如下所示： window.clearTimeout(id) 01 09 10 11 12 联系方式：www.rzchina.net 北京源智天下科技有限公司 框架操作 • 框架介绍 – 框架是指一个浏览器窗口中，同时显示的多个相互独立的 网页。简单的说，在上网浏览网页时，时常会看到一些特 别的页面，这种页面将网页分割成不同的几个区域，这些 区域是相对独立但又有一定的联系的，可以在不同的地方 加载不同的网页，这里所应用的正是框架。 • 父窗口与子窗口 – 在window对象中有一个frames属性，该属性返回一个数组 ，数组中的元素代表着框架中所包含的窗口。因此，在框 架页中可以使用frames[0]表示第1个子窗口、frames[1]表 示第2个子窗口，依此类推。如果一个窗口中没有包含框架 ，那么frames[]数组中的元素个数为0。 联系方式：www.rzchina.net 北京源智天下科技有限公司 框架操作 • 窗口之间的关系 – 对于一个复杂的框架，窗口之间可以相互访问，它主要包 括对框架自身的引用、对父窗口对子窗口的引用、子窗口 对父窗口及其他窗口的引用、对顶级窗口的引用。下面是 一个对父窗口的引用的例子的演示。 联系方式：www.rzchina.net 北京源智天下科技有限公司 框架操作 • 窗口的名字 – 每一个窗口都有一个name属性，其表示一个窗口名，可以 通过窗口来索引一个窗口的引用。在多框架页中name属性 使用的比较多，通过name属性可以取得框架窗口的引用。 当用户在menu窗口中点击该链接时，文档item1.html将在main框架窗口中打 开。 联系方式：www.rzchina.net 北京源智天下科技有限公司 第十讲：屏幕和浏览器对象 讲师：杨兴 e-mail:jtclass@163.com 1-2 北京源智天下科技有限公司 联系方式：www.rzchina.net 课程内容安排 • 屏幕对象 • 浏览器对象 1-3 北京源智天下科技有限公司 联系方式：www.rzchina.net 屏幕对象 • 屏幕对象介绍 – 屏幕对象（screen）提供了获取显示器信息的功能，显 示器信息的主要用途是确定网页在客户机是所能达到的 最大显示空间。很多情况下，用户的显示器大小尺寸不 尽相同，以同一尽寸设计的网页往往得不到期望的效果。 为此需得知用户显示器的信息，在运行时确定网页的布 局 • 检测显示器参数 – 检测显示器参数有助于确定网页在客户机上所能显示的 大小，主要使用screen对象提供的接口。显示的参数一 般都包括显示面积的宽、高度和色深等，其中宽、高度 是比较有意义的，直接与网布局相关，色深只是影响图 形色彩的逼真程度 。 1-4 北京源智天下科技有限公司 联系方式：www.rzchina.net 屏幕对象 • 客户端显示器屏幕分辨率 – 显示器分辨率是指显示器所能显示的宽度和高度，通常 以像素（pixel）为单位，例如笔者的显示器的分辨率为 1280*800。在实际应用中，为了使制作的网页能适应不 同的浏览器环境，最好使用JavaScript程序对用户的显 示器进行检测，动态调整网页的布局 。 – 下面来看一个相关的实例。 01 1-5 北京源智天下科技有限公司 联系方式：www.rzchina.net 屏幕对象 1-6 北京源智天下科技有限公司 联系方式：www.rzchina.net 屏幕对象 • 客户端显示器屏幕的有效宽度和高度 – 有效宽度和高度，是指打开客户端浏览器，所能达到的 最大宽度和高度。在不同的操作系统中，操作系统本身 也要占用一定的显示区域，所以在浏览器窗口以最大化 打开时，不一定占满整个显示器屏幕。因此，有效宽度 和高度就是指浏览器窗口所能占据的最大宽度和高度 。 01 with(document) // 设置上下文 02 { 03 writeln(" 网页可见区域宽："+ document.body.clientWidth+"
"); // 网页可见区域宽 04 writeln( " 网页可见区域高："+ document.body.clientHeight+"
"); // 网页可见区域高 05 writeln(" 网页可见区域宽："+ document.body.offsetWidth + " (包括边线和滚动条的宽)"+"
"); 06 writeln( " 网页可见区域高："+ document.body.offsetHeight + " (包括边线的宽)"+"
"); 07 writeln(" 网页正文全文宽："+ document.body.scrollWidth+"
"); // 网页正文全文宽 08 writeln(" 网页正文全文高："+ document.body.scrollHeight+"
"); // 网页正文全文高 09 writeln( " 网页被卷去的高(ff)："+ document.body.scrollTop+"
"); // 网页被卷去顶部分(ff) 10 writeln(" 网页被卷去的高(ie)："+ document.documentElement.scrollTop+"
"); 11 writeln( " 网页被卷去的左："+ document.body.scrollLeft+"
"); // 网页被卷去左部分 1-7 北京源智天下科技有限公司 联系方式：www.rzchina.net 屏幕对象 • 网页开屏 – 网页开屏是一种特效，在网页打开时，窗口由小变大逐 渐展开到最大，增强视觉效果。使用这章所介绍的 screen对象即可实现。方法是在打开新窗口时，将其尺 寸设置为最小，然后通过用定时器逐渐增加其尺寸，当 增加到一个合适的尺寸时移除定时器即可 – 下面来看这个实例。 12 writeln( " 网页正文部分上："+ window.screenTop+"
"); // 网页正文部分上 13 writeln( " 网页正文部分左："+ window.screenLeft+"
"); // 网页正文部分左 14 writeln( " 屏幕分辨率的高："+ window.screen.height+"
"); // 分辨率高 15 writeln(" 屏幕分辨率的宽："+ window.screen.width+"
"); // 分辨率宽 16 writeln(" 屏幕可用工作区高度："+ window.screen.availHeight+"
");// 有效工作区高度 17 writeln( " 屏幕可用工作区宽度："+ window.screen.availWidth+"
");// 有效工作区宽度 18 } 19 1-8 北京源智天下科技有限公司 联系方式：www.rzchina.net 浏览器对象 • 获取浏览器对象的属性值 – 在进行Web开发时，通过Navigator对象的属性来确定用户浏览器的版 本，进而编写有针对某一浏览器版本的代码。appCodeNam，浏览器 的代码名称 。 – appName，浏览器的实际名称 。 – appVersion，浏览器的版本号和平台信息 。 • MimeType对象和Plugin对象 – MimeType对象提供当前浏览器所支持的MIME类型信息，其中MIME 类型信息以数组的形式保存。Plugin主要管理当前浏览器中已经安装 的插件或外挂程序的信息，在应用中该对象非常重要。例如检测当前 浏览器是否已经安装FLASH播放器插件，如果还没有则可以提醒用户 下载并安装，这对包含FLASH内容的网页非常重要。下面通过例子说 明如何枚举浏览器所支持的MIME类型。 – 下面是关于这两个对象的一段代码。 1-9 北京源智天下科技有限公司 联系方式：www.rzchina.net 浏览器对象 1-10 北京源智天下科技有限公司 联系方式：www.rzchina.net 浏览器对象 • 浏览器对象的javaEnabled – javaEnabled方法用于判断当前浏览器是否已经启用 Java支持功能。该 方法对于包含 JavaApplet（在本书第19章专门讲解）程序的网页非常 有用，由此方法得出的结果以确定是否使用 Java程序。对于不包含 Java程序的网页意义不大 。 联系方式：www.rzchina.net 北京源智天下科技有限公司 第十一讲：文档对象 讲师：杨兴 e-mail:jtclass@163.com 1-2 北京源智天下科技有限公司 联系方式：www.rzchina.net 课程内容安排 • 文档对象概述 • 文档对象的应用 • 图像对象 • 链接对象 • 锚对象 1-3 北京源智天下科技有限公司 联系方式：www.rzchina.net 文档对象概述 • 文档对象 – 文档对象即document对象，为操作HTML文档提供接口 ，拥有大量的属性和方法，它有大量的子级对象，例如 图像对象、超级接对象、表单对象等等 。 – 不需要手工创建，在文档初时化时就已经由系统内部创 建。直接调用其方法或属性即可。 调用语法如下 ： 01 document.location=’’; //设置链接 02 document.lastModfied; //查看文档最后修改时间 1-4 北京源智天下科技有限公司 联系方式：www.rzchina.net 文档对象概述 • 引用标签中的值 – 在前面的章节中，要引用表中文本框的值，所用的方法 是访问文本框的value属性。而在document对象中则不 必要用这种方法了，可以使用getElementById方法，他 的功能比前面那种更强，是通过标签的id来访问标签中 的值 。 01 10

单击这里

1-5 北京源智天下科技有限公司 联系方式：www.rzchina.net 文档对象概述 • 引用文档中对象的方法。 – 既然文档中有对象，自然地就会去想象究竟应该怎样去引用这些对 象引用这些对象的方法如下所示 ： document.forms[0] document.forms[1] – 一般地，文档中的

标记确定了文档中文档对象的顺序，这种 引用对象的方法就是引用表单的一种方法，因此可以使用表单名来 引用。如果页面中只有一个表单，则使用下面这两种方法都可以。 document.entryForm.entry.value document.forms[0].entry.value 1-6 北京源智天下科技有限公司 联系方式：www.rzchina.net 文档对象的应用 • 文档信息 – 浏览器中的每一个 HTML文档都包含最后修改日期、标 题、url地址等信息，于是 document对象中也有相应的 属性保存这些信息。通过读取 lastModified、title和url 即可获得，在HTML文件的最下方输出这些信息，可以 方便用户查看文档是否已经更新，也可以根据这些信息 来确定是否需要重新打印文档。 – 下面来看一个实例。 1-7 北京源智天下科技有限公司 联系方式：www.rzchina.net 文档对象的应用 1-8 北京源智天下科技有限公司 联系方式：www.rzchina.net 文档对象的应用 • document对象的title属性与window的setInterval方法相 结合，可以让在浏览器窗口显示动态标题，也就是可以 在标题栏里实现信息的滚动 。见如下实例。 1-9 北京源智天下科技有限公司 联系方式：www.rzchina.net 文档对象的应用 • 盗链就是自己网站上的链接的目标不在自己的服务器上， 而在别人的服务器上，也就是使用别人的资源的一种行 为。 具体操作见下面的例子。 03 var frontURL = document.referrer; //上一个文档的URL 04 var host=location.hostname; //当前主机域名 05 if(frontURL !="") //判断上一文档地址是否为空 06 { 07 var frontHost=frontURL.substring(7,host.length+7) //取得上一文档的域名 08 if(host==frontHost) //判断两个文档的域名是否一致 09 { 10 alert("没有盗链！") //域名一致提示用户访问合法 11 } 12 else 13 { 14 alert("您是非法链接，请通过本部访问") //域名不一致提示用户访问非法 15 } 16 } 17 else 18 { 19 alert("您是直接打开该文档的，没有盗链") //用户直接打开的文档 20 } 1-10 北京源智天下科技有限公司 联系方式：www.rzchina.net 文档对象的应用 • 在网页中输出内容 – 在网页中输出内容的方法有多种，可以简单地输出文 字，也可以将多个字符串连接后输出。一般使用write 方法和writeln方法。但要注意write方法和writeln方法 的区别和使用write方法和writeln方法的注意事项。 • 在其他文档中输出内容 – 使用document对象的write方法和writeln方法除了可以在 当前文档中输出内容之外，还可以在其他浏览器窗口的 文档中输出内容，一般是接合close和open方法一起使 用。 1-11 北京源智天下科技有限公司 联系方式：www.rzchina.net 文档对象的应用 • 输出非HTML文档 – 一般来说默认方法打开 的是一个HTML文档，如果要 输出一个非HTML文档。则要使用open方法可以打开一 个文档流，给open方法传递一个参数 。使用方法如下 1-12 北京源智天下科技有限公司 联系方式：www.rzchina.net 文档对象的应用 • 在网页中输出所有的HTML元素 – IE浏览器为Document对象扩展了一个all属性，该属性 可以返回一个数组，数组中的元素为HTML文档中的所 有HTML元素。document.all[]是文档中所有标签组成的 一个数组变量，包括了文档对象中所有元素。 • 引用文档元素中的子元素 – 在现实运用中，很少有需要获得所有元素的情况，通常 需要获得某个元素下的子元素。为此IE浏览器又扩展了 一个children属性，该属性用来返回一个文档中的某个 元素的所有子元素。 1-13 北京源智天下科技有限公司 联系方式：www.rzchina.net 图像对象 • 图像对象介绍 – Image对象，又称为图像对象。它是一个特殊数组中 的元素。这个数组就是document对象的images属性的 返回值，这个返回值是一个数组。只是这个数组中的每 一个元素都是一个Image对象。它是用来设置图片的属 性方法和事件等。 • 创建和使用图像对象 – 要使用图像对象，首先得知道如何创建一个图像对象。 创建一个对象的方法和前面第八章中所介绍的方法一样 。这是一个内置对象，可以直接创建。方法如下所示。 newImg = new Image() 可以通过改变所创建对象的方法和属性来调整图像的显 示 。 1-14 北京源智天下科技有限公司 联系方式：www.rzchina.net 图像对象 • 图像对象的onerror事件 – 图片的onerror事件中将图片的src属性设置为网站上已 存在的有效图片。这样可以避免网站中出现无效图片， 也就是说当网页中有图片显示无效时，就用已经设置好 的这张图片替换掉。 • 显示图片的信息 – 运用Image对象的属性，大多都可以获取图片的相关信 息，而图片的这些信息是在标签中指定，同时这 些属性不是只读的，也可以在程序中更改。 – 图片的一些常用属性有，src(图片的地址)、alt 属性、（ border （边框属性）、以及图片的长和宽等等。 1-15 北京源智天下科技有限公司 联系方式：www.rzchina.net 图像对象 02 1-16 北京源智天下科技有限公司 联系方式：www.rzchina.net 图像对象 • 置换图片 – 在Image对象中的大多数属性都是只读属性，但其中的 src属性却是一个可读写的属性，通过改变Image对象中 的src属性值，可以改变置换图片。 • 随机图片 – 产生一个随机图片的原理与置换图片的原理类似，在产 生随机图片之前先产生一个随机数，再根据随机数来显 示一张图片。下面的例子可以在网页上循环地显示图片 ，并且图片显示是无规律的。这种方式常用在网页的广 告中，使用户在浏览网页时随机显示图片广告。 1-17 北京源智天下科技有限公司 联系方式：www.rzchina.net 图像对象 • 动态改变图片大小 – 通常要想使制作的网页图片可以动态改变其大小，则要 使用Image对象的width属性和height属性，它们可以动 态改变图片的大小，这是通过改变width和height的值来 •随机图片示例 1-18 北京源智天下科技有限公司 联系方式：www.rzchina.net 链接对象 • 链接对象的介绍 – Link对象是指引用的文档中的超链接，包括标签、 标签以及这两个标签之间的文字。由于超链接元素 的href属性值为文件URL，因此Link对象的大多数属性 与Location对象的属性相同，如href（完整的URL）、 host（包括冒号和端口号的URL的主机名部分）、 search等等。JavaScript会将每一个超链接都以Link对 象的形式存放在link[]数组中，link[]数组中的每一个元素 所代表的就是HTML文档中的每一个超链接，可以使用 以下方法来引用links[]数组中的元素 – Link对象可以支持的事件与Image对象可以支持的事件 大致相同。如onclick(点击)和onmouseover(鼠标移到对 象上)等。 1-19 北京源智天下科技有限公司 联系方式：www.rzchina.net 图像对象 • 感知鼠标移动事件 – 使用Link对象可以让链接更具特色，程序更人性化。 Link对象可以支持鼠标移动事件，这样可以根据事件驱 动原理来实现一些特殊的效果。 • 查看一个网页上的所有超链接 – 使用Link对象可以查看一个网页上有哪些超链接，并且 可以设置这些超链接的属性 – 具体实现如下： 1-20 北京源智天下科技有限公司 联系方式：www.rzchina.net 图像对象 1-21 北京源智天下科技有限公司 联系方式：www.rzchina.net 锚对象 • 锚对象介绍 – 对象也就是anchor对象，它是指由document对象的 anchors属性可以返回的一个数组中的每个元素。它也 是document对象的一个属性，是通过在标签中设置 name属性来创建的。创建danchor对象的格式如下： 01 02 name="文章" 03 [traget="窗口名称"]> 04 字符串 05 1-22 北京源智天下科技有限公司 联系方式：www.rzchina.net 锚对象 • 锚对象与链接对象的区别 – 锚对象与链接对象都是由标签所创建的，但并不是 每个标签都能创建link对象或anchor对象。要创建 Link对象，标签中必须要有href属性；如果要创建 anchor对象，标签中必须要有name属性。如果 标签中即有href属性又有name属性，那么将同时创建 link对象和anchor对象。 01 02

链接到第一个文本
链接到第二个文本
04 链接到第三个文本
05 第一锚点 06 第二锚点 07 第三锚点 08 1-23 北京源智天下科技有限公司 联系方式：www.rzchina.net 锚对象 • 创建文档索引 – 当网页内容比较多的时候，可以在网页的不同位置设置 不同的锚，通过对锚的引用让用户直接跳转到锚所在位 置。使用anchor对象，可以很方便的为一个网页上的锚 创建索引。 – 具体实现如下（ 见范例11-26）： 联系方式：www.rzchina.net 北京源智天下科技有限公司 第十二讲：历史对象和地址对象 讲师：杨兴 e-mail:jtclass@163.com 1-2 北京源智天下科技有限公司 联系方式：www.rzchina.net 课程内容安排 • 历史对象 • 地址对象 • 历史对象和地址对象的相关应用 1-3 北京源智天下科技有限公司 联系方式：www.rzchina.net 历史对象 • 历史对象的介绍 – history对象其主要作用是用来跟踪窗口中曾经使用的 URL，由document对象的history属性保持引用。通过使 用history对象可以获知浏览器窗口近来访问过的网页个 数，还可以实现从一个页面跳到另一个页面，在实际应 用中，如涉及到页面的跳转问题，可以用这个对象来解 决 。 • 前进到上一页和后退到下一页 – 使用history对象的back和forward方法，可以实现和浏览 器提供的后退和前进功能。 history.back() history.forward() 1-4 北京源智天下科技有限公司 联系方式：www.rzchina.net 历史对象 • 跳转 – 有时候，需要从一个页面直接跳到另一个页面。此时可以通过调用 history对象的go方法来实现，该方法可以直接跳转到某个历史URL 。例如以下代码可以跳转到地址列表中编号为当前位置减n的地址所 指的页面。 – 语法如下: history.go( n ) – 当n>0时，装入历史表中的往前数的第n个页面；n=0时装入当前页 面；n<0时，装入历史表中往后数的第n个页面。另一种更为直接的 跳转方法是使用地址对象，设置地址对象的location属性即可打开指 定的地址卸载文档 。下面是一个具体的实例。 1-5 北京源智天下科技有限公司 联系方式：www.rzchina.net 历史对象 1-6 北京源智天下科技有限公司 联系方式：www.rzchina.net 地址对象 • URL介绍 – URL也就是路径地址的意思，在网页中指的是访 问的路径。它的构成是有一定的规范的，通常情 况下，一个URL会有下面的格式：协议（//）+主 机:端口（/）+路径名称（#）+哈希标识(?)+搜索 条件。这些部分是满足这样的要求的： – “协议”是URL的起始部分，直到包含到第一个 冒号； – “主机”描述了主机和域名，或者一个网络主机 的IP地址； – “端口”描述了服务器用于通讯的通讯端口；路 径名称描述了URL的路径方面的信息； 1-7 北京源智天下科技有限公司 联系方式：www.rzchina.net 地址对象 – “哈希标识”描述了URL中的锚名称，包括哈希 掩码(#)。此属性只应用于HTTP的URL； – “搜索条件”字符串包含变量和值的配对；每对 之间由一个“&”连接。 • 获取指定地址的各属性值 – 通常在网页编程时，会涉及对地址的处理的问题， 如页面间的参数传递等，这些都与地址本身的一 些属性有关。这些属性大多都是用来引用当前文 档的URL的各个部分。 – 示例如下: 1-8 北京源智天下科技有限公司 联系方式：www.rzchina.net 地址对象 • 获取指定地址的各属性值 1-9 北京源智天下科技有限公司 联系方式：www.rzchina.net 地址对象 • 加载新网页 – 在网页设计过程中，时常会用到加载一个新的网 页的情况。这时仍然可以用Location对象。它的 href属性就可以轻松完成这一功能，该属性返回 值为当前文档的URL，如果将该属性值设置为新 的URL，那么浏览器会自动加载该URL的内容， 从而达到加载一个新的网页的目的。具体的事例 如下 ： 1-10 北京源智天下科技有限公司 联系方式：www.rzchina.net 地址对象 • 获取参数，获取参数可以说是通过Location对象的search属 性，可以获得从URL中传递过来的参数和参数值。然后在 JavaScript代码中可以处理这些参数和参数值。 • 具体的操作见下一页的示例。 1-11 北京源智天下科技有限公司 联系方式：www.rzchina.net 地址对象 1-12 北京源智天下科技有限公司 联系方式：www.rzchina.net 地址对象 • 装载新文档与重新装入当前文档 – 文档的装载在应用中也是比较常见的，然而它的装方式一 共就三种，即assign、replace和reload这三个方法。其中 reload方法用于根据浏览器reload按钮定义的策略重新装入 窗口的当前文档。replace方法取一个URL参数,从当前文档 历史清单中装入URL,并显示指定页面。 – 具体的使用方法如下面代码所示。 1-13 北京源智天下科技有限公司 联系方式：www.rzchina.net 地址对象 01 02 03 16 17 18 19 20 21 1-14 北京源智天下科技有限公司 联系方式：www.rzchina.net 地址对象 • 刷新文档 – 在实际应用中，经常会涉及到对文档的刷新，JavaScript提 供了一种刷新方法。使用Location对象的reload()方法可以 刷新当前文档。reload()方法的语法代码如下所示： location.reload(loadType) • 加载新文档 – 加载一个新文档，除了用open方法以外还可以用Location 对象所提供的方法。Location对象所提供的replace方法可 以用一个URL来取代当前窗口的URL，以达到加载新文档 的效果 。replace方法的语法代码如下所示： – location.replace(url) 1-15 北京源智天下科技有限公司 联系方式：www.rzchina.net 地址对象 • 加载新文档 示例。 01 15 联系方式：www.rzchina.net 北京源智天下科技有限公司 第十三讲：表单对象和表单元素 讲师：杨兴 e-mail:jtclass@163.com 1-2 北京源智天下科技有限公司 联系方式：www.rzchina.net 课程内容安排 • 表单对象概述 • 表单对象的应用 • 表单元素 • 文本框 • 按钮 1-3 北京源智天下科技有限公司 联系方式：www.rzchina.net 表单对象概述 • 表单对象介绍 – 表单就是

之间部分。一个表单一般由三 个基本组成部分组成：表单标签、表单域和表单按钮。 它是域、按钮、文本、图像和其他元素的容器。 – 一个表单对象代表了HTML文档中的表单，由于HTML 中的表单会由很多表单元素组成，因此form对象也会包 含很多子对象。JavaScript会为每个

标签创建一 个form对象，并将这些form对象存放在forms[]数组中。 因此，可以使用以下代码来获得文档中的form对象。 document.forms[i] 1-4 北京源智天下科技有限公司 联系方式：www.rzchina.net 表单对象概述 • 大小写的转换 – 大小写转换也是一个比较常见的技术，通常在网页中需要处理大小 写的问题，比如在输入验证码的时候，假若不要求大小写，就可以 统一转化成大写或小写。 – 将小写转换成大写的方法是toUpperCase，将大写转换成小写，则 用toLowerCase方法。 01 function setCase (caseSpec) //自定义处理大小写转换的函数 02 { 03 if (caseSpec == "upper") //判断是否是转换成大写 04 { 05 document.myForm.firstName.value=document.myForm.firstName.value.toUpperCase(); 06 document.myForm.lastName.value=document.myForm.lastName.value.toUpperCase(); 07 } 08 else{ //转换成小写 09 document.myForm.firstName.value=document.myForm.firstName.value.toLowerCase(); 10 document.myForm.lastName.value=document.myForm.lastName.value.toLowerCase() 11 } 12 } 1-5 北京源智天下科技有限公司 联系方式：www.rzchina.net 表单对象概述 • 提交表单和重置表单 – reset和submit。这两个方法类似于单击了“重置”和 “提交”按钮。其中reset相当于重置按钮，sumit相 当于提交按钮 。 04 1-6 北京源智天下科技有限公司 联系方式：www.rzchina.net 表单对象概述 • 响应表单的提交和重置 – 前面讲了表单的提交和重置。现在来考虑，当一个表单 按下提交或重置后，它是怎样来响应提交和重置的。其 实也是很简单，只要运用form对象的两个事件onreset （重置时触发事件）和onsubmit（提交时触发事件）就 可以了 。 – 示例如下: 01 1-7 北京源智天下科技有限公司 联系方式：www.rzchina.net 表单对象概述 11 12 name:

13 address:

14 city:

15 男 16 女

17 同意

18 19 20

1-8 北京源智天下科技有限公司 联系方式：www.rzchina.net 表单对象的应用 • 表单验证 – JavaScript常用的功能之一就是表单验证，表单验证是指验 证表单中输入的内容是否合法。它一般用在提交表单前进 行表单验证，这样可以节约服务器处理的时间，同时也为 用户节省了等待时间。所做的工作很比较简单，而执行的 效率又最高，这是JavaScript最优越的性能之一 。 – 下面来看一个例子。 1-9 北京源智天下科技有限公司 联系方式：www.rzchina.net 表单对象的应用 • 循环验证表单 – 通过元素名称判断每一个文本框是否输入了文字，这种方法使 用起来比较方便，源代码看上去也比较直观。然而，Form对 象的elements属性可以返回所有表单中的元素，因此可以使用 一个循环来判断elements[]数组中对象的value属性值的长度是 否为0来验证表单。 • 设置表单的提交方式 – 一般来说当用户填写完表单之后，就可以将表单提交到一个指 定的地方然后进行处理。这个指定的地方通常有两处，一处就 是直接提交到动态网页，另一种是提交给邮件。这两种方式的 目的都是一样的，就是要将当前提交的信息存储起来，以供日 后使用。而前者可能是保存在数据库中，后者则保存在邮箱中 ，但都能达到目的。 1-10 北京源智天下科技有限公司 联系方式：www.rzchina.net 表单对象的应用 • 重置表单的提示 – 在默认情况下，如果用户单击了重置表单按钮，浏览器窗口就 会马上将表单中的所有元素的值设置为初始状态。如果用户一 不小心单击了该按钮，则会清除所有已经填写完毕的数据。为 了防止这种意外情况的出现，在单击重置按钮时，弹出一个确 认框，让用户确认是否重置表单 。 03 1-11 北京源智天下科技有限公司 联系方式：www.rzchina.net 表单对象的应用 • 不使用提交按钮提交表单 – 通常在表单中，都是使用单击提交按钮的方法来提交表单。然 而，在form对象中有一个submit()方法，使用该方法可以在不 使用提交按钮的情况下提交表单 。 03 1-12 北京源智天下科技有限公司 联系方式：www.rzchina.net 表单元素 • 表单元素概述 – 在HTML中定义的表单元素有很多，这些表单元素可以让用户输入文 字，如文本框、密码框等；或者让用户选择可选项，如下拉列表框、 复选框等；也可以让用户提交信息或重置表单，如提交按钮、重置按 钮等；甚至还可以为程序员提供开发上的便利，如隐藏框等。所以一 个表单元素看起来下面代码所示这样子的： 01

02 03 04 05 06

1-13 北京源智天下科技有限公司 联系方式：www.rzchina.net 表单元素 • 表单元素的命名 –

标签与

标签之间可以存在很多表单元素。form 对象中可以使用elements[]数组来获得代表这些表单元素的子 对象。elements[]数组中存放的是各种类型的form对象的子对 象，elements[]数组中的元素是由

标签与

标签之 间表单元素所组成的，因此可以使用以下代码来获得代表 HTML文档中的第1个Form对象中的第2个元素的对象。 – 在下一页有一个相关的实例。 form1.elements[1] 1-14 北京源智天下科技有限公司 联系方式：www.rzchina.net 表单元素

姓名： 年龄：

密码：

// 1-15 北京源智天下科技有限公司 联系方式：www.rzchina.net 文本框 • 文本框的创建方式 – 要使用文本框，首先得学会如何创建一个文本框。创建一 个文本框的方式有多种，在HTML代码中，创建单行文本框 与创建密码框所使用的元素都是input元素，虽然是同一元 素，但根据不同的文本框种类其创建的方式也不同。文本 框的创建语法格式如下： – 要创建一个单行文本其格式如下所示。 – 创建一个密码框类型的文本，则用如下所示的语句。 – 综上可以看出，创建一个文本框都主要是用 input元素。 1-16 北京源智天下科技有限公司 联系方式：www.rzchina.net 文本框 • 查看一个文本框的属性值 – 代表文本框的对象称为text对象、代表多行文本框的对象称为 textarea对象、代表密码框的对象称为password对象。无论是 text对象、textarea对象，还是Password对象，所拥有的属性 大多都是相同的。因此可以用统一的方法来访问它们的属性。 – 在下一页有一个相关的实例。 01 02 03 04 10 11 12

13 14 15 16

17 1-19 北京源智天下科技有限公司 联系方式：www.rzchina.net 按钮 • 按钮的介绍 – 按钮常用的属性主要有form、name、type、value等。name是 指定了按钮名称的字符串。type是对于所有的Button对象， type属性都是“button”。该属性指定了表单元素的类型。 value是指对应于按钮的value属性的字符串。同时还支持很多 方法和事件。 • 按钮的创建方式 – 在HTML中有两种元素都可以创建按钮，这两种元素分别为 input元素和button元素。创建方式有两种，分别是使用button 元素创建按钮和使用input元素创建按钮。使用input元素创建 如下所示： 1-20 北京源智天下科技有限公司 联系方式：www.rzchina.net 按钮 • 网页调色板 – 在设计网页时，常常需要设计网页的前景色和背景色。只有前 景色与背景色搭配协调，网页才会好看。然而在网页上调试前 景色和背景色并不是很方便，因此可以制作一个简单的网页调 色板程序，用来测试前景色与背景色的搭配是否协调。 – 在下一页有一个相关的实例。 1-21 北京源智天下科技有限公司 联系方式：www.rzchina.net 按钮 01 02 03 12 13 14

15

WinRar

16      17

WinRAR 是 32 位 Windows 版本的 RAR 压缩文件管理器 18 -一个允许你创建、管理和控制压缩文件的强大工具。存在一系列的 RAR 版本，应用于数个 19 操作系统环境：Windows 、Linux、 FreeBSD 、DOS、OS/2、MacOS >。 20 X 1-22 北京源智天下科技有限公司 联系方式：www.rzchina.net 按钮 21

22 文字颜色： 23 24
25 背景颜色： 26 27
28 29

30 联系方式：www.rzchina.net 北京源智天下科技有限公司 第十四讲：脚本化 cookie 讲师：杨兴 e-mail:jtclass@163.com 1-2 北京源智天下科技有限公司 联系方式：www.rzchina.net 课程内容安排 • Cookie的介绍 • 创建与读取cookie • 获取cookie的值 • cookie的编码 • cookie的生存期 • cookie的路径和域 • cookie的安全性 1-3 北京源智天下科技有限公司 联系方式：www.rzchina.net cookie的介绍 • 什么是cookie – cookie其实就是一些数据信息，只是它们以文件的方式 保存起来，可以读取和修改。可以利用它与某个网站进 行联系，并在浏览器与服务器之间传递信息。也就是它 的最经典的用途是cookie是保存状态，识别身份。 – 从另一个角度来讲，也可以将它看成一个变量。当然一 种确定的变量是有大小之分的，比如说整型类型， cookie也一样，它也是有大小限制的。每个cookie所存 放的数据不会超过4KB，而每个cookie文件则不会多于 300个cookie。 1-4 北京源智天下科技有限公司 联系方式：www.rzchina.net cookie的介绍 01 02 03 04 05 06 16 17 1-5 北京源智天下科技有限公司 联系方式：www.rzchina.net cookie的介绍 • cookie的作用和检测用户浏览器是否支持cookie – cookie的主要作用是保存状态，识别身份。因此在很多 情况下都可以使用到cookie，特别是在用户身份验证的 时候。 – coiokie与浏览器的连系是比较紧密的，不同的浏览器会 带来一些意想不到的情况，你必须确定一个用户在它的 浏览器设置中是否关闭了cookies。 1-6 北京源智天下科技有限公司 联系方式：www.rzchina.net 创建与读取cookie • 在JavaScript中，创建cookie是通过cookie名和值的方 式来完成的。一个网站中cookie一般来说是不唯一的， 可以有多个，而且这些不同的cookie还可以拥有不同的 值。例如要存放放用户名和密码，则可以用两个cookie， 一上用于存放用户名，另一个用于存放密码。然后再使 用document对象的cookie属性可以用来设置和读取 cookie。每个cookie都是一个名/值成对出现的，也就是 键值对 。 • 下面是创建与读取cookie的具体实例。 1-7 北京源智天下科技有限公司 联系方式：www.rzchina.net 创建与读取cookie • 创建并读取cookie的例子。 01 1-8 北京源智天下科技有限公司 联系方式：www.rzchina.net 获取cookie的值 • 获取cookie的值 – 在上一节谈到了读取cookie的名与值，可以看到，只能 够一次获取所有的cookie值，而不能指定cookie名称来 获得指定的值，这样就必须从cookie中找到你要那个值 ，因此处理起来可能有点麻烦，用户必须自己分析这个 字符串，所以得用到几个常见的字符处理函数来获取指 定的cookie值。 – 具体的实现方法如下所示。 1-9 北京源智天下科技有限公司 联系方式：www.rzchina.net 获取cookie的值 01 1-10 北京源智天下科技有限公司 联系方式：www.rzchina.net cookie的编码 • cookie的编码 – cookie都是使用未编码的格式存入在cookie文件中的。 但是在cookie中是不允许包含空格、分号、逗号等特殊 符号的。如果要将这些特殊符号也写入cookie中，那就 必须在写入cookie之前，先将cookie用escape编码，再 在读取cookie时再通过unescape函数将其还原 。 – 具体的方法见如下的例子。 1-11 北京源智天下科技有限公司 联系方式：www.rzchina.net cookie的生存期 • cookie的生存期 – 在默认情况下， cookie是临时存在的。在一个浏览器窗 口打开时，可以设置 cookie，只要该浏览器窗口没有关 闭，cookie就一直有效，而一旦浏览器窗口关闭后， cookie也就随之消失。 – 如果想要 cookie在浏览器窗口之后还能继续使用，就需 要为cookie设置一个生存期。也就是 cookie的终止日 期，在这个终止日期到达之前，浏览器都可以读取该 cookie。一旦终止日期到达之后，该 cookie将会从 cookie文件中删除。 1-12 北京源智天下科技有限公司 联系方式：www.rzchina.net cookie的生存期 01 02 cookie名： 03 04
05 cookie值： 06 07
08 cookie时间： 09 10 一天 11 二天 12 三天 13 四天 14 五天 15 六天 16 七天 17 八天 18 19 //javascript标签的结束 43 1-14 北京源智天下科技有限公司 联系方式：www.rzchina.net cookie的路径和域 • cookie的路径和域 – cookie虽然是由一个网页所创建，但并不只是创建 cookie的网页才能读取该cookie。在默认情况下，与创 建cookie的网页在同一目录或子目录下的所有网页都可 以读取该cookie。但如果在这个目录下还有子目录，则 要使在子目录中也可以访问，则需要使用path参数设置 cookie。语法如下： document.cookie="name=value; path=cookieDir"; 如果要使cookie在整个网站下可用，可以将cookieDir指定为根目录，例如： document.cookie="userId=320; path=/"; 1-15 北京源智天下科技有限公司 联系方式：www.rzchina.net cookie的安全性 • cookie的安全性 – 在默认情况下，cookie都是采用不加密的HTTP的传输 方法，这种方法传输容易被别人窃听。但如果cookie中 的信息很重要，就不能用这种方法了。因此，在 JavaScript提供了cookie的secure，可以解决这个问题 – Secure就是安全的意思。当设置了cookie的secure之后 ，cookie就只能通过HTTP或其他安全协议来传输，这 样消息就不容易被别人窃听了。cookie的secure是一个 布尔类型的值。 1-16 北京源智天下科技有限公司 联系方式：www.rzchina.net 使用cookie的注意事项 • 使用cookie的注意事项 – cookie是存放在客户端上的文件，可以使用第三方工具 来看来cookie的内容。因此，cookie并不是很安全的。 – 每个cookie存放的数据最多不能超过4KB ，每个cookie 文件最多只能存储300个cookie 。 – cookie是与浏览器相关的。也就是说不同浏览器之间所 保存的cookie也是不能互相访问的 。 – 由于每个cookie都是硬盘上的一个文件，因此很有可能 被用户无意间删除。 – cookie安全性不够高。所有的cookie都是以纯文本的形 式记录于文件中，因此如果要保存用户名密码等信息时 ，最好事先经过加密处理。 联系方式：www.rzchina.net 北京源智天下科技有限公司 第十五讲：JavaScript与XML技术 讲师：杨贵 e-mail:jtclass@163.com 1-2 北京源智天下科技有限公司 联系方式：www.rzchina.net 课程内容安排 • XML简介 • 使用DOM • HTML DOM • 综合练习 1-3 北京源智天下科技有限公司 联系方式：www.rzchina.net XML简介 • XML应用背景 – XML技术已经为成为中间数据的标准格式，使用 XML 描述的数据可以在任何系统间进行数据交换。近年来 XML已经广泛的使用在了应用开发的各个方面，当中 也包含Internet。在Web开发中，XML用于描述各种 各样的数据用以交换，比如最近流行的 Ajax技术就使 用XML来描述在浏览器端到服务器端的数据。 • XML是Extensible Markup Language的缩写，它是 一种类似于HTML的标记语言，用来描述数据的层次 结构及存储数据 。 1-4 北京源智天下科技有限公司 联系方式：www.rzchina.net XML简介 • XML是一种描述数据结构的语言，与之相应的是 XML 语言解析器。 – 如果没有解析器它所描述的数据就无法理解，同时也失 去了意义。 • 程序接口对程序员来说统称为 API，最先出现针对 XML 的API是SAX（Simple API for XML），它是一套程序 包。 – SAX提供了一套基于事件的 XML解析的 API。SAX解析 器从XML文件的开头出发，每当遇到节点标签、文本或 者其他的 XML语法时，就会激发一个事件。事件处理程 序由应用开发人员编写，因此可以在事件处理程序中决 定如何处理 XML文件当前节点的数据。 1-5 北京源智天下科技有限公司 联系方式：www.rzchina.net XML简介 • W3C的DOM规范制定了一系列标准用于描述结构化、 层次化的数据，例如 HTML和XML。使用DOM接口 处理XML文件是当前WEB客户端开发常用的方法， 大多数浏览器都实现 W3C制定的DOM接口。 • 节点的层次 – DOM以树的形式组织文档中的数据，树的结构也就 是由HTML或XML文档的元素节点组成的结构。遍历 一个文档中所有结点就是遍历 DOM树的操作，第一 个节点使用一个 Node对象来表示，该对象提供了操 作节点的接口 – document是最顶层的节点，所有的其他节点都是附 属于它的 。 1-6 北京源智天下科技有限公司 联系方式：www.rzchina.net XML简介 • XML文档节点层次如下 XML代码片段所示 01 02 03 04 IBM Thinkpad R61i 7732CJC 05 5300 06 07 08 CGX 09 100 10 11 12 13 14 Peter 15 123456 16 17 18 Zognan 19 456789 20 21 1-7 北京源智天下科技有限公司 联系方式：www.rzchina.net XML简介 1-8 北京源智天下科技有限公司 联系方式：www.rzchina.net XML简介 • 特定语言的文档模型 – DOM模型是以 XML为核心，所有遵循 DOM规范 的文档都可以使用 DOM接口来处理。但已经得到 广泛应用的 HTML却没有完全遵循 DOM规范，因 此为了能支持HTML，W3C提出针对 HTML的 DOM规范。 1-9 北京源智天下科技有限公司 联系方式：www.rzchina.net 使用DOM • DOM接供操作遵循DOM规范文档的能力，使用DOM来 操作页面中的元素 。 – 诸如，更改元素显示的内容、添加删除节点、遍历统计 节点、过滤特定内容等等 。 • 访问相关的节点 – JavaScript在Web客户端的编程工作基本上都围绕 DOM展开，DOM的常用操作就是创建、访问、修改各 个元素节点 。 – childNodes：每一个节点的所有下一级子节点组成一个 集合，该集合作为该节点的 childNodes属性 。 1-10 北京源智天下科技有限公司 联系方式：www.rzchina.net 使用DOM • 下面是Node对象的常用方法和属性: – firstChild，表示头一个子节点。 – lastChild，表示最后一个子节点。 – hasChildNodes()，判断是否拥有子节点。 – childNodes，子节点集合。 – parentNode，其父节点的引用。 • 演示：范例15-1，检测当前HTML文档BODY标签下 的所有节点，并将节点名输出 。 • 处理节点属性 – DOM的节点对象都拥有一些从 Node对象继承而来的 属性，也可以拥有自己独有的属性。属性可以用来存 储一些与节点相关的数据，读取一个属性通常调用节 点元素的 getAttribute方法，设置某个属性的值通常 调用节点元素的 setAttribute方法。 1-11 北京源智天下科技有限公司 联系方式：www.rzchina.net 使用DOM • 演示：范例15-3，给当前WEB页的BODY标签添加自定 义属性“Author”并设值为“ Zognan”，表示创建该 WEB页的作者 。 • 访问指定节点 ：DOM接口提供了更快更方便的方法访问 一个指定的节点，例如通过指定节点标签名、节点名称 或节点ID来获得目标节点的引用。 – getElementsByTagName，该方法返回一个与指定标签 名吻合的节点对象的引用，如果传入的标签名为“ *”， 则返回文档中所有的节点元素。 – getElementsByName，该方法返回与指定 name属性相 吻合的元素集合。 – getElementById，该方法返回与指定 ID相同元素节点。 1-12 北京源智天下科技有限公司 联系方式：www.rzchina.net 使用DOM • 创建新节点 ：DOM接口对节点的操作不仅仅只有访问， 还可以为一个节点创建任意数目的子节点 。 – createTextNode，创建文本节点。 – createDocumentFragment，创建文档碎片。 – createElement，通过指定标签名创建节点。 • 修改节点 ：在文档对象（ DOM）中，可以动态的插入、 删除或替换某一个节点。节点对象（ Node）提供实现这 些操作的方法，这方法都通过节点对象（Node）来调用。 – removeChild，删除一个指定的子节点。 – insertBefore，在指定的子节点前插入一个子节点。 – replaceChild，用一个节点替换一个指定的节点。 – appendChild，将一个节点添加到子节点集合的尾部。 1-13 北京源智天下科技有限公司 联系方式：www.rzchina.net HTML DOM特性 • HTML DOM特性 – JavaScript是动态语言，属性、方法、事件在其中称为特 性。属性用于描述对象的状态，但在使用上却和事件一样， 通过给事件赋予一个函数的地址即可完成绑定的任务，操 作方式和给属性赋值一样。在标准 DOM中，通常使用 getAttribute和setAttribute操作的特性，但特定于 HTML 的DOM为能更方便的操作对象的特性，将操作方式统一 起来。 1-14 北京源智天下科技有限公司 联系方式：www.rzchina.net 综合练习 • 演示：综合练习1 • 回顾本章的内容 1-15 北京源智天下科技有限公司 联系方式：www.rzchina.net 联系方式：www.rzchina.net 北京源智天下科技有限公司 第十六讲：正则表达式 讲师：杨兴 e-mail:jtclass@163.com 1-2 北京源智天下科技有限公司 联系方式：www.rzchina.net 课程内容安排 • 正则表达式基础 • 简单模式 • 复杂模式 • 常用模式 1-3 北京源智天下科技有限公司 联系方式：www.rzchina.net 正则表达式基础 • 为什么使用正则表达式 – 在这之前曾有过字符验证例子，其中验证字符的代码非常繁 琐冗长。有了正则表达式，验证程序的代码变得简洁而更强 大，代码运行的速度更快。为了判断某个字符串是否符合某 种格式，使用正规表达的最为合适。通常，人们在表单数据 发送到服务器之前，都需要进行数据合法性验证。例如，客 户所填写的电子邮件地址格式是否正确等。使用正则表达式 可以使程序代码简单高效 。 1-4 北京源智天下科技有限公司 联系方式：www.rzchina.net 正则表达式基础 • 使用RegExp对象 – RegExp是JavaScript提供的一个对象，用来完成有关正则 表达式的操作和功能，每一条正则表达式模式对应一个 RegExp实例。JavaScript使用RegExp对象封装与正则表达 式相关的功能和操作，每一个该对象的实例对应着一条正 则表达式。和其他对象一样，在使用之前必须取得其引用 或新建一个对象实例。创建一个RegExp实例语法如下： var regObj = new RegExp( “pattern” [,” flags ”] ); 参数说明： pattern：必选项，正则表达式的字符串。 flags：可选项，是一些标志组合。 1-5 北京源智天下科技有限公司 联系方式：www.rzchina.net 正则表达式基础 – 在标志组合中，“g”表示全局标志。设定时将搜索整个字符 串，以找匹配的内容，每一次新的探索都从RegExp对象的 lastIndex标记的字符起，否则只搜索到第一个匹配的内容。 “i”表示忽略大小写标志，若设置该项，则在搜索匹配项时 忽略大小写，否则将区别大小写。以上所述是创建正则表达 式对象的方式之一，另一种创建方式如下： var regObj = /pattern/[flags]; – 参数的意义和第一种方式一样，但这种方式不能用引号将 pattern和flags括起来。正则表达式的使用非常简单，只要用一 个test方法就行了，如下所示。 regObj.test( string ); 1-6 北京源智天下科技有限公司 联系方式：www.rzchina.net 正则表达式基础 – regObj表示正则表达式对象，是一个RegExp对象实例。 string为源字符串，即将在其中进行匹配操作的字符串。test 方法返回一个布尔值，表明是否已经在源串中找到了正则表 达式所定义的模式。 – 下面举一个例子来说明。 01 1-7 北京源智天下科技有限公司 联系方式：www.rzchina.net 简单模式 • 元字符 – 元字符是正则表达式最为简单的情况。它指的是与字符序 列相匹配，例如范例16-1中的正则表达式filter。其简单的查 找语句said中是否存在“一枪爆头”这个语句，这个语句中 没有其他有特别含义的字符 。 01 1-8 北京源智天下科技有限公司 联系方式：www.rzchina.net 简单模式 • 量词 – 量词就是指定某个特定模式出现的次数。分为简单量词 、贪婪量词、惰性量词和支配量词几种。目前IE浏览器 并没有实现这些特性，下面简单的介绍这几种量词。 – 贪婪量词，它是首先匹配整个字符串，如果不匹配，则 去掉最后一个字符，然后再比较。如果仍然不匹配，则 继续去掉最后一个字符再比较，如此一直下去，直到找 到匹配或者字符串的字符被取完为止。 – 惰性量词是先看字符串中的第一个字符是不是匹配。如 果不匹配，就读入下一个字符，将这两个字符连接成一 个字符串。如果还是不匹配，则继续从字符串添加字符 直到发现匹配或找完整个字符串为止。 1-9 北京源智天下科技有限公司 联系方式：www.rzchina.net 简单模式 – 支配量词，它只尝试整个字符串的匹配，如果不能匹配 ，则不再尝试，也就说它只比较一次。 – 具体的方法见如下的例子。 05 23 <--文档头的结束--> 24 <--文档主体--> 25

<--居中的段落--> 26 用户名合法性检测程序 <--文本--> 27

<--段落结束--> 28

<--段落--> 29 规则:数字或英文字符串+数字 30

<--段落结束--> 31 <--文本框--> 32 <--按钮--> 33 34 1-11 北京源智天下科技有限公司 联系方式：www.rzchina.net 复杂模式 • 分组 – 前面用简单模式可以找整个表达式的结果，但是如果要 找的是表达式内的子表达，或者找的是目标字符串中重 复出现子串，则仅仅依靠前面的简单模式的知识是绝对 无法实现的。 – 为了解决上面的问题，正则表达式引入分组的概念。它 的语法是“(pattern)”，也就是用括号括起一些字符、字 符类或量词，它是一个组合项或子匹配，可统一操作。 – 下面是一个简单的分组的例子。 1-12 北京源智天下科技有限公司 联系方式：www.rzchina.net 复杂模式 01 • 候选 – 候选就是用“|”来表示的模式或关系，它表示的是在匹配时可以 匹配“|”的左边或右边。这个“|”相当于“或”。这个功能一般 用在检验某个指定的字符串是否存在。 – 下面是一个简单的候选的例子。 1-13 北京源智天下科技有限公司 联系方式：www.rzchina.net 复杂模式 01 • 非捕获性分组 – 非捕获性分组是指将目标字符串分组合成一个可以统一操作 的组合项，只是不会把它作为子匹配来捕获，匹配的内容不 编号也不存储在缓冲区，这个功能适合用在对非捕获性分组 方法在必须进行组合、但又不想对组合的部分进行缓存的情 况下有用。 – 下面是一个简单的非捕获性分组的例子。 1-14 北京源智天下科技有限公司 联系方式：www.rzchina.net 复杂模式 01 1-15 北京源智天下科技有限公司 联系方式：www.rzchina.net 复杂模式 • 前瞻 – 前瞻是指对所要匹配的字符作一些限定条件。比如在检 查用户输入的是否为电子邮箱时，其中有一个特殊的符 号@，这就算是一个限定 。前瞻又分正向前瞻和负向前 瞻 – 正向前瞻是指在目标字符串的对应位置处要有指定的某 一特殊的值。不过这个值不作为匹配结果处理，当然也 不会存储在缓冲区内。 – 负向前瞻则和正向相反，是在指定的位置不能有指定的 值，它的处理结果也不作为匹配结果处理，也不会存储 在缓冲区内。 1-16 北京源智天下科技有限公司 联系方式：www.rzchina.net 常用模式 • 验证电子邮件 – 正确格式的电子邮件地址如yx1209@163.com，它必须 符合以下几个条件。电子邮件地址中同时含有“@”和 “.”字符；字符“@”后必须有字符“.”，且中间至少间 隔一个字符；字符“@”不为第一个字符，“.”不为最后 一个字符。所有的电子邮件都是这样的。 – 根据上述条件，可构造验证电子邮件地址的正则表达式 如下所示： /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/ – 下面是具体的实现过程。 1-17 北京源智天下科技有限公司 联系方式：www.rzchina.net 复杂模式 02 23 24

验证电子邮件地址合法性

25

26 27 28

29 联系方式：www.rzchina.net 北京源智天下科技有限公司 第十七讲：Ajax基础 讲师：杨贵 e-mail:jtclass@163.com 1-2 北京源智天下科技有限公司 联系方式：www.rzchina.net 课程内容安排 • 引言 • 传统的Web技术和 Ajax的由来、原理 • Ajax技术的组成部分 • XMLHttpRequest对象 • 局部更新 • 实现Ajax 1-3 北京源智天下科技有限公司 联系方式：www.rzchina.net 引言 • 最近兴起的一种称为 Ajax的技术，可以实现网页局部 刷新，从而带省了大带的网络带宽并且提高了网络传输 的速度。Ajax含义可以理解为异步JavaScript和XML， 其技术核心是通过将少量数据用 XML语言来描述并且 在浏览器和服务器间进行异步传输。基于这样技术，网 页可以实现动态刷新 1-4 北京源智天下科技有限公司 联系方式：www.rzchina.net 传统的Web技术及Ajax的由来 • 使用异步通信组件与服务器通信 – 使用XMLHttpRequest组件与服务器异步通信 • 客户端用JavaScript实现网页内容的更新显示 传统的Web浏览器与服务器间采用同步交互的技术，用户 表单完整的发送到服务器端进行处理后再返回一个新页面到浏 览器。这一过程中因为网速延迟而导致浏览器有一定等待时间 ，交互体验比较差。 1-5 北京源智天下科技有限公司 联系方式：www.rzchina.net 浏览器和服务器间的交互 1-6 北京源智天下科技有限公司 联系方式：www.rzchina.net Ajax技术的组成部分 • Ajax技术的组成部分 – Ajax并不是什么新技术，而是一些老技术的组合。 • JavaScript – Ajax引擎就是运行于浏览器中的一组 JavaScript程序 。 • XMLHttpRequest – XMLHttpRequest允许以异步方式从服务器中获取数据， 而不需要每次都刷新网页，也不需要将所有的数据都交 付给服务器处理。 • CSS – 控制数据在浏览器中呈现的样式 。 • DOM – 脚本程序通过DOM来操作文档。 • XML – 用于描述和服务器间交换的数据。 1-7 北京源智天下科技有限公司 联系方式：www.rzchina.net XMLHttpRequest对象 • XMLHttpRequest对象是浏览器中实现通过http协议和 服务器交换DOM数据的程序集合 。 – Ajax应用中主要使用它和服务器间的异步调用机制 。 • XMLHttpRequest创建 – 创建XMLHttpRequest的方式和其它 JavaScript对象一 样，只是针对IE浏览器时稍有差别，因为其在 IE中是以 ActiveX控件的形式出现 。语法如下： – 通常先判断当前浏览器的类型，再针对不同的浏览器采 用不同的创建方式 。 var xmlHttpRqObj = new XMLHttpRequest(); // 普通创建方式 var xmlHttpRqObj = new ActiveXObject(“Microsoft.XMLHTTP”); // IE浏览器中的方式 1-8 北京源智天下科技有限公司 联系方式：www.rzchina.net 实现Ajax • 实现Ajax的步骤 ： – 创建XMLHttpRequest对象 。 – 创建一个 HTTP请求。 – 设置响应 HTTP请求回调函数。 – 发送HTTP请求。 – 等待请示的响应。 – 使用DOM实现局部刷新。 1-9 北京源智天下科技有限公司 联系方式：www.rzchina.net 创建HTTP请求 • HTTP请求是指 Web浏览器向一个 Web服务器发送加载网页的请求 – HTTP请求一般包括服务器的地址、所要请求的文件以及传送的参数 等。 – 设置了HTTP请求之后XMLHttpRequest才知道从何处加载数据，其 机理与先前介绍的浏览器 HTTP请求一样。 – 调用XMLHttpRequest对象的 open方法即可设置请求以及请求的方 式 。 01 var XmlHtpRq = new ActiveX( “Microsoft.XMLHTTP” ); // 创建XMLHttpRequest对象 02 XmlHtpRq.open(“GET”,”index.php?id=12”); // 创建HTTP请求 提示：HTTP请求方式分两种，即POST和GET方式。 1-10 北京源智天下科技有限公司 联系方式：www.rzchina.net 设置HTTP响应回调函数 • XMLHttpRequest对象根据自身状态的变化调用相应的 函数，用户因此也抓到处理数据的时机。 • 通过设置readystatechange事件的处理函数，即可监 听XMLHttpRequest对象状态的变化 。 01 1-11 北京源智天下科技有限公司 联系方式：www.rzchina.net 发送HTTP请求 • 通常使用XMLHttpRequest对象的send方法完成任务， 该方法带一个可选参数。当请求是 POST方式时该参数 包含发往服务器的数据，是 GET方式是该参数被忽略。 XMLHttpRequest.send(data); // 带参数 XMLHttpRequest.send(null); // 不带参数 1-12 北京源智天下科技有限公司 联系方式：www.rzchina.net 一个完整的 Ajax实例 • 很多网站的会员注册页面，利用 Ajax技术在用户填写 表单但还未发送表单时将已经填好用户名发送到服务器 进行验证，如果存在相同用户名的用户则输出提示。 • 在会员注册页面实现用户重名检测的功能，如果填写的 用户名已经存在则给出更换提示，客户端程序如 下： 1-13 北京源智天下科技有限公司 联系方式：www.rzchina.net 一个完整的Ajax实例 05 06 用户名： 07 08 (填入用户名，例如admin)

09

10 35 1-15 北京源智天下科技有限公司 联系方式：www.rzchina.net 一个完整的 Ajax实例 01 联系方式：www.rzchina.net 北京源智天下科技有限公司 第十八讲：Ajax高级应用 讲师：杨贵 e-mail:jtclass@163.com 1-2 北京源智天下科技有限公司 联系方式：www.rzchina.net 课程内容安排 • 客户端脚本语言 • 服务器脚本语言 • Ajax与服务器互动 1-3 北京源智天下科技有限公司 联系方式：www.rzchina.net 客户端脚本语言 • Ajax的客户端技术，主要实现浏览器与服务器间的异 步通信。 • 通过基础通信组件将客户端数据发往服务器处理，并且 接收从服务器返回的数据。 • 客户端脚本程序从基础通信组件中获取数据并用于更新 本地网页，通常只更新发生改变的部分，称为局部刷新。 • 客户端脚本语言主要包括 JavaScript、VBScript等 。 – 这些语言都可以用来实现 Ajax的客户端功能 ，只要能 调用DOM接口即可。 1-4 北京源智天下科技有限公司 联系方式：www.rzchina.net 客户端脚本语言 • 使用JavaScript的局部刷新技术 – 没有使用脚本程序的纯 HTML文档中，打算改变一个元 素的内容，则需要更改服务器上的源文档，然后再通过 浏览器重新加载。 – 使用JavaScript语言结合 DOM编程，控制 HTML文档中 所有的元素及内容 。 • 演示：范例18-1，实现一个加法计算器，当用户填完第 二个操作数后自动在结果文本框中显示计算结果。 1-5 北京源智天下科技有限公司 联系方式：www.rzchina.net • 使用iframe的局部刷新技术 – 在超级链接的“ target”属性上填写一个有效的窗口名或 框架名，可以将链接的页面显示到指定窗口中。因此在 当前页面中设置 iframe，并将需要刷新的内容显示在其 中，刷新 iframe时不需要刷新当前页的全部 。 • 演示：范例18-2，使用iframe实现局部刷新。在不刷新 整个当前的情况下根据用户在文章列表中的选择显示相 应的文章。 客户端脚本语言 1-6 北京源智天下科技有限公司 联系方式：www.rzchina.net 服务器脚本语言 • 真正意义上的Ajax都包含客户端和服务端技术。 – 客户端程序负责页面显示的更新和事务逻辑。 – 服务端程序负责数据的存储等等 。 • 服务端程序运行在服务器上，可以用任何一种程序语言 实现，比如C/C++、Java、perl……等等。 – 现在比较流行的有 asp.net、jsp、php等 。 – 不管是何种语言，都只有一个目的，实现服务器端的事 务处理。 1-7 北京源智天下科技有限公司 联系方式：www.rzchina.net 服务器脚本语言 • Ajax与服务器互动 – 与服务器交互是 Ajax技术中的核心内容 ，如何通信在 第17讲中已经讲过。 • 演示：利用Ajax技术实现文章内容的更新。在选择某 一个文章标题后浏览器在后面加载文章，在数据加载未 完成时用户可以做其它工作而不必等待。 1-8 北京源智天下科技有限公司 联系方式：www.rzchina.net 服务器脚本语言 • 客户端HTML文件第一部分如 下： 01 47

Big Big World
48

My Heart Will Go On
49

服务器脚本语言 50
51

当前没有文章

• 服务器程序主要负责响应 XMLHttpRequest对象的HTTP请 求。从URL参数中提取文件名，打开服务器的文件，读取内 容并作为HTTP响应数据返回给XMLHttpRequest对象。 1-11 北京源智天下科技有限公司 联系方式：www.rzchina.net 服务器脚本语言 • 服务器程序代码； 01 联系方式：www.rzchina.net 北京源智天下科技有限公司 第十九讲：JavaScript与插件 讲师：杨贵 e-mail:jtclass@163.com 1-2 北京源智天下科技有限公司 联系方式：www.rzchina.net 课程内容安排 • 创建ActiveX控件 • 使用ActiveX控件 • 创建Flash • 使用FLASH 提示：JavaApplet与Flash的使用方法相似，在此只讲当 前十分流行的 Flash 1-3 北京源智天下科技有限公司 联系方式：www.rzchina.net 创建ActiveX控件 • ActiveX是微软公司提出的一套二进制组件发布方案、 实现规范和工具集合的总称。 • Windows平台上只要遵循COM规范的软件都能相互访 问并且实现二进制组件的复用。 • ActiveX控件本质上是一个 COM服务器，自动化语言运 行时库就是自动化客户机。 – Visual Basic、JavaScript等脚本语言是使用 ActiveX 控件的最佳选择 • 开始创建ActiveX 1-4 北京源智天下科技有限公司 联系方式：www.rzchina.net 创建ActiveX控件 • 开始创建ActiveX控件 – 在VS2005主界面窗口中，选择菜单栏“新建” |“项目”命令，打开“新建项目”对话 框。 – 在“项目类型”列表框中单击“ Visual C++”|“ATL”项目。选择“模板”视图中单击 “ATL项目”，在“名称”编辑框中输入项目名称“ MessageBoard”，在“位置” 编辑框中输入项目保存的路径。单击“确定”按钮，打开“ ATL项目向导”对话框。 – 单击“应用程序设置”标签，勾选“允许合并代理 /存根（ stub）代码”复选框，单击 “完成”按钮完成项目的创建。 • 添加ATL控件 – 选择菜单栏“视图”｜“类视图”命令，打开“类视图”列表框。在其中右击 “MessageBoard”项目，选择右键菜单“添加”｜“类”命令，打开“添加类” 对话框。 – 选择“类别”列表框中的“ ATL”项目，选择“模板”列表框中的“ ATL控件” 项目，如图19-3所示。单击“添加”按钮，打开“ ATL控件向导”对话框。 – 单击“名称”标签，在“简称”编辑框中输入“ MsgBoardCtl”（不包括引号）。 – 单击“选项”标签，勾选“连接点”复选框。单击“外观”标签，勾选“可插 入”复选框，单击“完成”按钮完成控件的添加操作。 1-5 北京源智天下科技有限公司 联系方式：www.rzchina.net • 为控件添加属性 – 右击“类视图”列表框中的“ IMsgBoardCtl”项目，选择右键菜单“添加” |“添 加属性”命令，打开 “添加属性向导”窗口。 – 单击“属性类型”下拉列表框的下三角按钮，选择“ BSTR”项目。在“属性名” 编辑框中输入“msgText”，单击“完成”按钮完成操作。 • 为实现类添加成员变量 – 右击“类视图”列表框中的“ CMsgBoardCtl”项目，选择若键菜单“添 加”|“添加变量”命令，随即打开“添加成员变量向导”对话框。 – 在“变量类型”列表框中填写“ BSTR”，在“变量名”编辑框中填写 “m_bstrMessage”，单击“完成”按钮退出向导。 创建ActiveX控件 1-6 北京源智天下科技有限公司 联系方式：www.rzchina.net • 改写相关函数 – 在“类视图”列表框中找到“ OnDraw”方法并双击它 。 – 此时代码编辑器中的光标定位到 OnDraw方法的代码中，将 OnDraw方法中原有 的代码全删除，然后添加下列代码，使 OnDraw方法看起来如下： 创建ActiveX控件 HRESULT OnDraw(ATL_DRAWINFO& di) // 绘图函数 { RECT& rc = *(RECT*)di.prcBounds; // 获取ActiveX对象所占区域大小 Rectangle( di.hdcDraw, rc.left, rc.top, rc.right, rc.bottom ); // 画出矩形框 HFONT hfont = CreateFont( 14, 7, 0, 0, FW_NORMAL, FALSE, FALSE, 0, ANSI_CHARSET, OUT_DEFAULT_PRECIS, CLIP_DEFAULT_PRECIS, DEFAULT_QUALITY, DEFAULT_PITCH|FF_SWISS,"宋体"); // 创建字体 SelectObject( di.hdcDraw, hfont ); // 将字体选入设备上下文 RECT msgRc; // 文字输出区域 msgRc.left = rc.left + 5; // 设置区域大小 msgRc.top = rc.top + (rc.bottom - rc.top)/2; // 上 msgRc.right = rc.right - 5; // 右 msgRc.bottom = rc.bottom - 5; // 下 char *pcmsg = ConvertBSTRToString( this->m_bstrMessage ); // 将COM字符串转为多字节字符串 DrawText( di.hdcDraw, pcmsg, strlen( pcmsg ), &msgRc, 0 ); // 输出字符消息 return S_OK; // 返回成功代码 } 1-7 北京源智天下科技有限公司 联系方式：www.rzchina.net 创建ActiveX控件 HRESULT OnDraw(ATL_DRAWINFO& di) // 绘图函数 { RECT& rc = *(RECT*)di.prcBounds; // 获取ActiveX对象所占区域大小 Rectangle( di.hdcDraw, rc.left, rc.top, rc.right, rc.bottom ); // 画出矩形框 HFONT hfont = CreateFont( 14, 7, 0, 0, FW_NORMAL, FALSE, FALSE, 0, ANSI_CHARSET, OUT_DEFAULT_PRECIS, CLIP_DEFAULT_PRECIS, DEFAULT_QUALITY, DEFAULT_PITCH|FF_SWISS,"宋体"); // 创建字体 SelectObject( di.hdcDraw, hfont ); // 将字体选入设备上下文 RECT msgRc; // 文字输出区域 msgRc.left = rc.left + 5; // 设置区域大小 msgRc.top = rc.top + (rc.bottom - rc.top)/2; // 上 msgRc.right = rc.right - 5; // 右 msgRc.bottom = rc.bottom - 5; // 下 char *pcmsg = ConvertBSTRToString( this->m_bstrMessage ); // 将COM字符串转为多字节字符串 DrawText( di.hdcDraw, pcmsg, strlen( pcmsg ), &msgRc, 0 ); // 输出字符消息 return S_OK; // 返回成功代码 } 1-8 北京源智天下科技有限公司 联系方式：www.rzchina.net • 修改文件“MsgBoardCtl.h”的开头。添加“ comutil.h”头文件的引用和链 接器命令“pragma comment( lib, "comsupp.lib" )”，声明使用 “_com_util”名字空间。使其看起来像下面代码所示的样子： 创建ActiveX控件 01 // MsgBoardCtl.h : CMsgBoardCtl 的声明 02 #pragma once 03 #include "resource.h" // 主符号 04 #include "MessageBoard.h" 05 #include "_IMsgBoardCtlEvents_CP.h" 06 #include 07 #include // 添加的：COM实用工具头文件 08 using namespace _com_util; // 添加的：使用“_com_util”名字空间 09 #pragma comment( lib, "comsupp.lib" ) // 添加的：添加引入库命令 10 #if 11 defined(_WIN32_WCE)&&!defined(_CE_DCOM)&&!defined(_CE_ALLOW_SINGLE_THREADED_OBJECT 12 S_IN_MTA) 13 // 下面的内容省略 • 在文件“MsgBoardCtl.h”中找到构造函数“ CMsgBoardCtl()”并将其修改 成如下代码所示的样子，实现对成员变量m_bstrMessag的初始化。 01 CMsgBoardCtl() 02 { 03 this->m_bstrMessage = L"没有消息内容"; // 初始化成员变量m_bstrMessag 04 } 1-9 北京源智天下科技有限公司 联系方式：www.rzchina.net • 选择菜单栏“视图”｜“解决方案资源管理器”命令，在“解决方案资源管 理器”列表框中双击打开“MsgBoardCtl.cpp”文件。找到“get_msgText” 方法和“put_msgText”方法，将它们修改成如下代码所示的样子。 创建ActiveX控件 01 STDMETHODIMP CMsgBoardCtl::get_msgText(BSTR* pVal) 02 { 03 *pVal = this->m_bstrMessage; // 传出外部请求的msgText属性的值 04 return S_OK; // 返回成功代码 05 } 06 07 STDMETHODIMP CMsgBoardCtl::put_msgText(BSTR newVal) // 设置消息文本 08 { 09 this->m_bstrMessage = newVal; // 保存外部设置的msgText属性的值 10 this->FireViewChange(); // 激发控件重绘事件 11 return S_OK; // 返回成功代码 12 } 1-10 北京源智天下科技有限公司 联系方式：www.rzchina.net • 添加事件功能：ActiveX控制可以处理消息，藉此实现用户交互。为控件 MsgBoardCtl添加事件传出功能，当用户在控件上单击时，将单击事件传 递给控件容器。 – 展开“类视图”列表窗口中的类型库“ MessageBoardLib”。右击 “_IMsgBoardCtlEvents”接口，选择右键菜单“添加” |“添加方法”命令，打 开“添加方法向导”对话框。 – “添加方法向导”对话框的 “返回类型”列表框中填入“ void”。在“方法名称” 编辑框中填入“ ClickIn”，勾上“参数属性”下的“ in”复选框，在“参数类型” 下拉列表框中填入“ LONG”，在“参数名”编辑框中填入“ x”，单击“添加” 按钮。重复添加参数操作，和第一遍不同的是在“参数名”编辑框中填入“ y”。 添加x、y两个参数后单击“完成”按钮退出“添加方法向导”对话框 。 – 因为在此使用了老版本的导入库，此时项目编译链接会出两个小问题，所以须 将项目配置为使用多字节字符集而不是 unicode字符集，并设置 C++默认内置字 符类型为多字节。右击“类视图”列表框中的项目名称“ MessageBoard”，选 择右键菜单“属性”命令，打开“属性页”对话框，在左边的列表框中选择 “配置属性”｜“常规”项目，选择右边列表框中的“项目默认值”｜“字符 集”下拉列表框中的“使用多字节字符集”。 创建ActiveX控件 1-11 北京源智天下科技有限公司 联系方式：www.rzchina.net – 选择“属性页”左边列表框中的“配置属性”｜“ C/C＋＋”｜“语言”项目。 单击右边列表框中的“将 wchar_t视为内置类型”下拉列表框的下三角按钮，选 择“否（/Zc:wchar_t-）”，单击“确定”按钮关闭“属性页”对话框。 – 编译项目，重新生成类型库。选择“生成” |“生成解决方案”命令，系统开始编 译构建项目。生成完毕后，在“类视图”列表框右击“ CMsgBoardCtl”项目， 选择右键菜单“添加” |“添加连接点”命令。打开“实现连接点向导”对话框。 双击“源接口”列表框中的“ _IMsgBoardEvents”项目， “_IMsgBoardEvents”将出现在“实现连接点”列表框中，单击“完成”按钮 退出。 创建ActiveX控件 • 添加事件激发功能 ：为了能够激发事件，必须让控件响应鼠标相关消息， 并在消息处理程序中将事件传递给控件容器。 – 右击“类视图”列表框中的“ CMsgBoardCtl”项目，选择右键菜单“属性”命 令，打开“属性”窗口。单击“消息”按钮，在消息列表框中找到 “WM_LBUTTONDOWN”项目，双击其右边的空白表项， VS2005自动添加该 消息处理程序并命名为“ OnLButtonDown”。 – 打开“MsgBoardCtl.cpp”文件，修改“ OnLButtonDown”方法，使其看起来 如下代码所示的样子。 1-12 北京源智天下科技有限公司 联系方式：www.rzchina.net • 将发布方式配置为 Release。Release方式将去掉目标 代码中的调试信息并做了一些优化，发行版的产品通常 采用这种方式，代码体积变小并且运行速度快 创建ActiveX控件 01 LRESULT CMsgBoardCtl::OnLButtonDown( UINT uMsg, WPARAM wParam, 02 LPARAM lParam, BOOL& bHandled ) // 左键按下消息处理 03 { 04 WORD x = LOWORD( lParam ); // 从消息参数中提取鼠标点击时的x坐标 05 WORD y = HIWORD( lParam ); // 从消息参数中提取鼠标点击时的y坐标 06 this->Fire_ClickIn( x, y ); // 触发事件 07 return 0; // 返回0 08 } 1-13 北京源智天下科技有限公司 联系方式：www.rzchina.net • 开始使用一个新的 ActiveX控件之前必须先在机器上注 册，注册MessageBoard组件的操作如下。 – 单击“开始”菜单，选择“运行”命令，打开“运行” 对话框。 – 在“打开”编辑框中输入 regsvr32加空格加 MessageBoard.dll文件的完整路径名，笔者已经将该 文件复制到 C盘的根目录下。因此输入的命令应该为 “regsvr32 C:\MessageBoard.dll”，单击“确定”按 钮执行命令。 使用控件 • 创建ActiveX控件的语法： – obj：引用新建的 ActiveX对象。 – progID：一个字符串，表示 ActiveX组件的程序 ID，组 件注册后该字符串记录在系统注册表中。 var obj = new ActiveXObject( progID ); 1-14 北京源智天下科技有限公司 联系方式：www.rzchina.net • 嵌入ActiveX控件的关键代码 使用ActiveX控件 04 05 21 // 绑定MessageBoard的ClickIn消息处理程序 22 • 为ActiveX控件添加事件处理程序 1-15 北京源智天下科技有限公司 联系方式：www.rzchina.net • 创建一个新 AS3.0FLASH文档，贴上如 下代码： 创建FLASH 01 package { 02 import flash.display.Sprite; // 导入下面使用到的各个类 03 import flash.events.Event; 04 import flash.external.ExternalInterface; 05 import flash.system.Security; 06 import flash.text.TextField; 07 import flash.text.TextFormat; 08 import flash.text.TextFieldAutoSize; 09 public class MessageBoard extends Sprite 10 { 11 public var msg:TextField; // 消息文本域引用 12 public function MessageBoard() // SWF对象构造函数 13 { 14 Security.allowDomain("*") ;// 允许所有域访问 15 this.loaderInfo.addEventListener(Event.INIT,onInit); 16 msg = new TextField(); // 创建消息文本域对象 17 msg.text = "Ready"; // 显示消息，“ready” 18 msg.autoSize=TextFieldAutoSize.LEFT;// 文本靠左对齐 19 msg.x = 30; // 文本域对象在舞台的坐标为（30,30） 20 msg.y = 30; 21 this.addChild( msg ); // 添加文本域对象到舞台 22 } 1-16 北京源智天下科技有限公司 联系方式：www.rzchina.net 创建FLASH public function SetMessage( msgTxt:String ) // 设置消息文本方法 { msg.text = msgTxt; // 设置消息文本域对象的文本 } public function onInit(event:Event) // 初始化完毕事件的侦听器 { try // 开始异常捕获 { if( ExternalInterface.available) // 如果外部API可用 { // 注册回调函数“SetMessage”供外部使用 ExternalInterface.addCallback("SetMessage",SetMessage); // 调用外部JavaScript函数“SwfIsReady”，检查网页是否已经准备就绪 ExternalInterface.call( "SwfIsReady", 1 ); } else { msg.text = "警告：SWF外部API被禁用!"; // 如果外部API不可用则显示警告} } catch( e:Error ) // 异常处理 { msg.text = e.message;// 仅显示出错消息 } } } } 1-17 北京源智天下科技有限公司 联系方式：www.rzchina.net • 编译生成Flash影片 – 可按SHIFT+F12组合键编译生成 SWF影片 . 使用FLASH • 在网页中使用FLASH影片 function thisMovie(movieName) // 定义函数区分不同的浏览器 { if (navigator.appName.indexOf ("Microsoft") !=-1) // 如果是IE { return window[movieName]; // 以Window属性的形式返回影片对象 } else // 其它 { return document[movieName]; // 以DOM对象的形式返回影片对象 } } 联系方式：www.rzchina.net 北京源智天下科技有限公司 第二十讲：JavaScript的调试与优化 讲师：杨贵 e-mail:jtclass@163.com 1-2 北京源智天下科技有限公司 联系方式：www.rzchina.net 课程内容安排 • JavaScript开发工具 • Javacript的调试 • 日志输出 • 代码优化 1-3 北京源智天下科技有限公司 联系方式：www.rzchina.net JavaScript开发工具 • Microsoft Visual Studio 2005（下文简称 VS2005） – 是一套功能强大的开发套件，其对 WEB开发也提供了 强大的支持。 • 创建Web页 • 编辑Web页 1-4 北京源智天下科技有限公司 联系方式：www.rzchina.net Javacript的调试 • 调试前的准备工作： 启用IE的调试功能。 – 打开IE浏览器，选择菜单栏“工具” |“Internet选项”命令， 打开“Internet选项”对话框 。 – 单击“高级”选项卡，拖动“设置”列表框的垂直滚动条。 在“设置”列表框中找到两个“禁用脚本调试”复选框， 将它们前面的勾去掉。最后单击“确定”按钮确认修改并 退出 • 开始调试 – 正确安装 VS2005和设置IE浏览器后，可以开始调试 JavaScript程序 。 – 在IE中打开包含 JavaScript程序的HTML网页，选择菜单 栏“查看” |“脚本调试程序” |“打开”命令，打“ Visaul Studio实时调试引擎”对话框 。 – 在“可能的调试器”列表中选择一个调试器，例如选择 “新实例 Visual Studio 2005”，单击“是”按钮进入调试。 1-5 北京源智天下科技有限公司 联系方式：www.rzchina.net Javacript的调试 • 跟踪代码 ：调试的主要工作是反复地跟踪代码，找出 错误并修正，可参考如下步骤。 – 在代码编辑器窗口中，将光标移动到需要添加断点的行 上。 – 按一次F9键，当前行的背景色变为红色，并且在窗口左 边界上标上红色的圆点。当程序在断点处暂停的时候， 只要按一下 F5、F10或F11键就可以继续向下执行，看 具体的需要来操作。 F10键逐过程执行，按 F11键可以 逐语句执行。 – 将鼠标移动源代码编辑窗口中的变量名上时，鼠标光标 将显示变量当前时刻的值。点击变量信息框中的变量值 可以修改变量的当前值。 • 更多的调试操作：查看调用关系、监视特定变量的值等。 1-6 北京源智天下科技有限公司 联系方式：www.rzchina.net 日志输出 • 程序运行过程中，有些中间数据需要记录，以便检查程 序运行的状态。 • 对于JavaScript记录中间数据通常是以日志的形式记录 需要记录的数据，再发送到服务器上保存起来。 • 日志记录的内容可以是任意的信息，根据开发者的需要 而定。 • 演示：范例20-2，日志输出。 1-7 北京源智天下科技有限公司 联系方式：www.rzchina.net 代码优化 • 代码不但要给机器运行，同时也要供人阅读。因此，易 于阅读的同时也要注意运行速度，尤其是脚本程序。 – 可读性 – 运行效率 • 针对诃读性而言。 – “标识符短而含义清晰” – “代码缩进对齐” – “尽可能注释” – “尽可能避免使用全局变量 ” function getMod( num, n ){if( typeof( num ) !=="number" ){return -1;}return num%n;}难读： 1-8 北京源智天下科技有限公司 联系方式：www.rzchina.net 代码优化 • “尽可能注释” – 下面是个很漂亮的注释。 01 /*---------------------------------------------------------------------------------------- 02 -名称：getMod 03 -功能：求余数 04 -参数：num,n 05 -num：为被除数 06 -n：除数 07 -返回：成功时返模值，失败时返回-1 08 ----------------------------------------------------------------------------------------*/ 09 function getMod( num, n ) // 取模函数 10 { 11 if( ( typeof( num ) != "number") || 12 ( typeof( n ) != "number" ) ) // 检查参数是否都是数字 13 { 14 return -1; // 非数字则返回-1 15 } 16 return num%n; // 返回余数 17 } 1-9 北京源智天下科技有限公司 联系方式：www.rzchina.net 代码优化 • “代码缩进对齐” – 可参考的缩进对齐方式。 – 缩进好，缺少注释。 01 function getMod( num, n ) // 无注释的程序片段 02 { 03 if( typeof( num ) !=="number" ) 04 { 05 return -1; 06 } 07 return num%n; 08 } 1-10 北京源智天下科技有限公司 联系方式：www.rzchina.net 代码优化 • 与运行效率相关的优化 – 优化算法以求高效 ：针对所有的编程语言 – 调整代码的书写：针对解释执行方式的脚本程序语言 • 对象不再被使用时（也就是说没必须再保留下去了）给 引用对象的变量赋予“ null”值，表明对象已经不再使 用 。 • 尽量删除无用的空白字符，和其它字符一样每一个空格 都会占用存储空间。 – 执行时解释程序同样要对空格字符进行分析，因此为了 节约存储空间和运行时间，尽量删除不必要的空格。 • 变量名等标识符尽量简洁，以缩短词法分析所占用的时 间。 联系方式：www.rzchina.net 北京源智天下科技有限公司 第二十一讲：综合实例 讲师：杨贵 e-mail:jtclass@163.com 1-2 北京源智天下科技有限公司 联系方式：www.rzchina.net 课程内容安排 • 引言 • 创作思路及基本场景的实现 • 设计游戏角色 • 游戏进程控制 • 运行测试 1-3 北京源智天下科技有限公司 联系方式：www.rzchina.net 引言 • 休闲游戏介绍 • 休闲游戏的实现 1-4 北京源智天下科技有限公司 联系方式：www.rzchina.net 创作思路及基本场景的实现 • 软件开发步骤 – 需求分析 – 设计实现 – 运行测试 – 发布维护 • 《捡馅饼》的创作思路 – 捡馅饼，游戏情景可以这样理解。从屏幕的上方随机飘 下十几带有不同分值的馅饼，它们左右飘摇着落向人间。 当任何一个落到游戏窗口的下方时，自动消失后又一个 新的馅饼在天上出现。玩家用鼠标点击飘落的馅饼，被 点中者自动消失并且玩家的分数增加，但当鼠标碰上带 负分的倒霉熊时玩家分数剧减。 1-5 北京源智天下科技有限公司 联系方式：www.rzchina.net 创作思路及基本场景的实现 • 分析游戏场景，知游戏中包含如下对象，游戏结构如图 所示。 – Pie ：代表馅饼，实现馅饼本身的移动、资源复位等等 功能，接口操作馅饼的接口。 – PieCore ：代表饼馅，受 Pie的部分功能委托，实现根 据不同的图片更新自身的分值和音效。 1-6 北京源智天下科技有限公司 联系方式：www.rzchina.net 创作思路及基本场景的实现 • 游戏中包含不断循环播放的背景音乐，要求其节奏风格 轻快明亮，以哄托快乐的气氛。 游戏界面结构如图所 示： 1-7 北京源智天下科技有限公司 联系方式：www.rzchina.net 创作思路及基本场景的实现 • 场景效果图： 1-8 北京源智天下科技有限公司 联系方式：www.rzchina.net 设计游戏角色 • 馅，被抽象为一个逻辑对象，此处命名为PieCore 。 – PieCore控制着当前馅应该用什么样的图片来显示馅饼 的样子并记录分数。 PieCore引用的图片是可以替换的， 分数也是动态可更改的。 PieCore引用一个具体的 元素，一个PieCore被一个饼对象引用。 1-9 北京源智天下科技有限公司 联系方式：www.rzchina.net 设计游戏角色 • PieCore对象的特性 名称 类别 描述 imgID 属性 IMG对象标识 score 属性 饼馅分值 src 属性 饼馅图片地址 initImg 方法 初始化图片 • 饼对象的设计 1-10 北京源智天下科技有限公司 联系方式：www.rzchina.net 设计游戏角色 • 饼对象 – 饼对象是整个角色的实现，它实现了馅饼的移动、响应用户操作、对 象复位、音效播放等等。一个饼对象保持对一个

元素的引用， 该

元素作为PieCore所引用的元素的父节点。随

移动。 Pie对象 名称 类别 描述 divID 属性 DIV对象标识 imgID 属性 Img对象标识 pieCore 属性 饼馅引用 moveTo 方法 移动到目标位置 addGameLoopEventListener 方法 添加游戏循环事件侦听器 gameLoopEventListener 方法 侦听游戏循环事件，主要的状态刷新在这里完成 reSet 方法 复位状态，负责饼的信息复位 addMouseEventListener 方法 添加鼠标事件侦听器 x 属性 饼在视口中的x坐标 y 属性 饼在视口中的x坐标 1-11 北京源智天下科技有限公司 联系方式：www.rzchina.net 游戏进程控制 • 初始化游戏 – 游戏页面在加载时先创建一系列表示馅饼的 DIV和IMG 元素，在此总共 17个。定义函数 InitResource并在其中 初始化资源，主要是创建 DIV和IMG元素，并设置游戏 视口的初始位置。 • 游戏启动控制 – 游戏启动是在用户单击“开始按钮”之后发生，一般游 戏在启动的时候需要加载初始化资源等操作。在此也需 要创建一些游戏资源，比如创建馅饼对象和初始化环境 变量等。 1-12 北京源智天下科技有限公司 联系方式：www.rzchina.net 游戏进程控制 • 初始化游戏 – 游戏页面在加载时先创建一系列表示馅饼的 DIV和IMG 元素，在此总共 17个。定义函数 InitResource并在其中 初始化资源，主要是创建 DIV和IMG元素，并设置游戏 视口的初始位置。 • 游戏启动控制 – 游戏启动是在用户单击“开始按钮”之后发生，一般游 戏在启动的时候需要加载初始化资源等操作。在此也需 要创建一些游戏资源，比如创建馅饼对象和初始化环境 变量等。主要完成下面的工作： 1-13 北京源智天下科技有限公司 联系方式：www.rzchina.net 游戏进程控制 • 游戏启动控制 – (1)初始化全局变量。 – (2)创建17个Pie对象，并将它们 设置为可见状态。 – (3)播放背景音乐，并启动计时 器。 • 游戏循环 – 在游戏循环中刷新游戏世界，是 游戏世界向前发展的源动力 。 1-14 北京源智天下科技有限公司 联系方式：www.rzchina.net 游戏进程控制 • 游戏结束控制 – 当玩家单击“结束游戏”按钮时，移除游戏定时器，停止 游戏的运转并隐藏馅饼对象。最后在对话框中输出成绩评 估信息，并设置相应的游戏状态信息，例如“游戏已经停 止”等。成绩评估数学模型为“玩家总分 /（系统总分 × 游戏经历的时间）”。 • 运行测试 – 测试的目的是找到代码错误和逻辑错误，反复测试之后就 可以发布了 。 1-15 北京源智天下科技有限公司 联系方式：www.rzchina.net 结束语