《Java 快车---基础教程》 www.javakc.com TEL:010-62972039 教学内容: JavaScript语言基础 JavaScript内置对象 窗口window对象 文档document对象 表单form对象 History与Navigator对象 JavaScript框架编程 JavaScript异常处理 自定义JavaScript对象 1 《Java 快车---基础教程》 www.javakc.com TEL:010-62972039 第一章 JavaScript 语言基础 什么是 JavaScript JavaScript 是一种基于对象(Object)和事件驱动(Event Driven)并具有安全性能的脚本语 言。 JavaScript 的出现弥补了 HTML 语言的不足,它是 Java 与 HTML 折中的选择,具有以下几个基 本特点。 1、 脚本编写 JavaScript 是一种脚本语言,它采用小程序段的方式实现编程。它作为一种解释性语言,不需要 进行编译,而是在程序运行过程中逐行地被解释。 2、 基于对象 JavaScript 是一种基于对象的语言,这意味着它能运用自己已经创建的对象。因此,许多功能可 能来自于 JavaScript 运行环境(即浏览器本身)中对象的方法与 JavaScript 的对象相互作用。 3、 简单性 JavaScript 的简单性首先主要体现在它基于 Java 的基本语句和控制流,是一种简单而紧凑的 语言,对于学习 Java 是一种非常好的过度;其次,它的变量类型是采用“弱类型”,并未使用严格 的数据类型。 4、 安全性 JavaScript 是一种安全性语言,它不允许访问本地的硬盘,而且不能将数据存入到服务器上; 不允许对网络文档进行修改和删除,只能通过浏览器实现信息浏览或动态交互,从而有效地防止数据 的丢失。 5、 动态性 JavaScript 是动态的,它可以直接对用户或客户输入做出响应而无需经过 Web 服务程序。它对 用户的响应是采用以事件驱动的方式进行的。所谓事件驱动,就是指在页面中执行某种操作所产生的动 作,比如按下鼠标、移动窗口或选择菜单等都可以视为事件,当事件发生后就会引起相应的事件响应。 6、 跨平台性 JavaScript 仅依赖于浏览器本身,与操作系统无关,只要是能运行浏览器的计算机,并支持 JavaScript 的浏览器就可以正确执行。从而实现“编写一下,走遍天下” 的梦想。 2 《Java 快车---基础教程》 www.javakc.com TEL:010-62972039 Java 和 Javascript 的区别 1、基于对象和面向对象 Java 是一种真正的面向对象的语言,即使是开发简单的程序,必须设计对象。 JavaScript 是种脚本语言,它可以用来制作与网络无关的,与用户交互作用的复杂软件。它是 一种基于对象(Object Based)和事件驱动(Event Driver)的编程语言。因而它本身提供了非 常丰富的内部对象供设计人员使用。 2、解释和编译 两种语言在其浏览器中所执行的方式不一样。Java 的源代码在传递到客户端执行之前,必须经过 编译,因而客户端上必须具有相应平台 上的仿真器或解释器,它可以通过编译器或解释器实现独立 于某个特定的平台编译代码的束缚。 JavaScript 是一种解释性编程语言,其源代码在发往客户端执行之前不需经过编译,而是将文 本格式的字符代码发送给客户编由浏览器 解释执行。 3、强变量和弱变量 两种语言所采取的变量是不一样的。 Java 采用强类型变量检查,即所有变量在编译之前必须作声明。 JavaScript 中变量声明,采用其弱类型。即变量在使用前不需作声明,而是解释器在运行时检 查其数据类型, 4、代码格式不一样 Java 是一种与 HTML 无关的格式,必须通过像 HTML 中引用外媒体那么进行装载,其代码以字节 代码的形式保存在独立的文档中。 JavaScript 的代码是一种文本字符格式,可以直接嵌入 HTML 文档中,并且可动态装载。编写 HTML 文档就像编辑文本文件一样方便。 5、嵌入方式不一样 在 HTML 文档中,两种编程语言的标识不同,JavaScript 使用来标 识,而 Java 使用...来标识,或采用 java 脚本语言。 6、静态联编和动态联编 Java 采用静态联编,即 Java 的对象引用必须在编译时的进行,以使编译器能够实现强类型检查。 JavaScript 采用动态联编,即 JavaScript 的对象引用在运行时进行检查,如不经编译则就 无法实现对象引用的检查。 3 《Java 快车---基础教程》 www.javakc.com TEL:010-62972039 第一节 语言基础 编写 JavaScript 程序 1、JavaScript 直接嵌入 HTML 文件中 写在 head 或 body 标记对之间,要加标记如下: 2、JavaScript 程序存放在单独的.js 文件中,再在 HTML 文件中链接
在.js 文件中直接书写 javascript 代码即可。 function show(){ document.write("hello world!"); } 基本数据类型 在 JavaScript 中有四种基本的数据类型: 数值型(整数和实数) 字符串型(用""号或''号括起来的字符或数值) 布尔型(使用 true 或 false 表示) 空值(null) 变量 在程序执行过程中值可变的量,是系统内存中的一个命名的存储单元。 变量的命名: 4 《Java 快车---基础教程》 www.javakc.com TEL:010-62972039 变量名以字母开头,中间可以出现数字,下划线。变量名不能有空格、+或其他符号 不能使用 JavaScript 的关键字作为变量。如:var、int、double、delete 变量名第一个单词全部小写,第二个单词开始每个单词的首字母大写,其余字母小写。 声明(定义)变量: var x, myString; var y=100, st="hello"; cost=23.6; JavaScript 中的保留字(关键字): abstract boolean break byte case catch char class const continue default do double else extends false final finally float for function goto if implements import in instanceof int interface long native new null package private protected public return short static super switch synchronized this throw throws transient true try var void while with 变量的作用域 在 JavaScript 中有全局变量和局部变量之分。全局变量时定义在所有函数体之外,其作用范围 是所有函数;而局部变量时定义在函数体之内,只对该函数是可见的。 常量 在程序执行过程中其值不可改变的量。 1、整型常量 如:123 ,512 2、实型常量 5 《Java 快车---基础教程》 www.javakc.com TEL:010-62972039 实型常量是由整数部分加小数部分表示,如 3.14,12.43 等,也可以使用科学或标准方法表示, 如 5E7,4e5 等。 3、布尔值 布尔常量只有两种取值 true 或 false。主要用来说明或代表一种状态或标志,用以控制操作流 程 4、字符型常量 字符型常量是指使用单引号(')括起来的字符或双引号(")括起来的字符串。例如,字符'a', 字符串 "hello"。 JavaScript 也支持以反斜杠(\)开头的不可显示的特殊字符,通常称为控制字符。例如换行符 ('\r')、制表符('\t')等 5、空值 JavaScript 中有一个空值 null,表示什么也没有。如试图引用没有定义的变量,就会返回一个 null 值。 运算符 运算符是完成某种操作的符号。 算术运算符:+, -, *, /, %, ++, -- 比较运算符:= =, >, >=, <, <=, != 逻辑运算符:&&, ||, ! 赋值运算符:=, +=, -=, *=, /=, 表达式 x=100; str="你好"; t=null; 表达式通常是由变量、常量和函数通过运算符构成的有意义的算式。 如:a, a*2/3, (x+y)*10+(z-3)*20, x==y 第二节 控制结构 1、if 语句 if (表达式){ 语句块; 6 《Java 快车---基础教程》 www.javakc.com TEL:010-62972039 } x=80; if (x>=60){ document.write( "恭喜你,及格了!"); } if (表达式){ 语句块 1 ; }else{ 语句块 2 ; } if (x>=0){ y=x; }else{ y=-x; } 2、switch 语句 switch(表达式) { case 值 1:语句 1; break; case 值 2:语句 2; break; case 值 3:语句 3; break; default: 语句 4; } 3、for 语句 for (初值表达式; 条件表达式; 更新语句) { //循环体语句 } 4、While 语句 while(条件表达式) { //循环体语句 } break 语句:结束当前的循环或 switch 语句。 continue 语句:用于 for 或 while 语句中,结束本次循环,继续下一次循环。 8 《Java 快车---基础教程》 www.javakc.com TEL:010-62972039 第三节 函数 函数是一个设定名字的一系列 JavaScript 语句的有效组合。 函数可以带参数,也可以不带,可以有返回值,也可以没有 1、函数的定义 function 函数名([参数列表]) { 语句块; [return 表达式;] } 2、调用函数 函数被调用时函数内的代码才真正被执行。 调用函数的方法就是使用函数的名称并赋给全部参数相应的值。 9 《Java 快车---基础教程》 www.javakc.com TEL:010-62972039 在 JavaScript 中调用函数时,可以向函数传递比在函数定义时参数数目要少的参数。在这种情 况下,只要不是试图去读那些没有传递过来的参数就行。 用 typeof 运算符可以得到参数的类型。对于未传递的参数,用 typeof 运算符得到的结果是 “undefined”。示例如下: 效果如下: 另外,JavaScript 也可以向函数传递比在函数定义时参数数目要多的参数,为了读取这样的参 数,可以使用 arguments 数组。传递给函数的第一个参数是 arguments 数组的第一个元素,我们可 以用“函数名称.arguments[0]”来进行引用。示例如下: 10 《Java 快车---基础教程》 www.javakc.com TEL:010-62972039 效果如下: 第四节 JavaScript 系统函数 JavaScript 中的系统函数又称为内部方法,它们不属于任何对象,可以直接使用。它们可以完成许 多很常用的功能。 1、 eval( 字符串表达式) 返回字符串表达式中的运算结果值。 例:test=eval("x=8+9+5/2"); document.write(test); //输出显示 19.5 2、 escape(字符串) 返回字符串的一种简单编码,将非字母数字的符号转换为%加其 unicode 码的十六进制表示。 例如: escape("Hello there") 返回 "Hello%20there" 3、unescape(字符串) 将已编码的字符串还原为纯字符串。 4、parseFloat(字符串) 返回浮点数 5、parseInt(字符串,radix) 其中 radix 是数的进制,默认是十进制数 parseInt(字符串) 第五节 事件驱动及事件处理 在 JavaScript 中编写的函数,通常是在其他代码进行调用时才会执行。不过我们也可以将某个 11 《Java 快车---基础教程》 www.javakc.com TEL:010-62972039 函数与某个事件(Event,通常是鼠标或热键的动作)联系起来,使得当事件发生时执行该函数。这个 方法称之为事件驱动(Event Driver)。而对事件进行处理的函数,称之为事件处理程序(Event Handler 事件句柄)。 1、事件 JavaScript 事件驱动中的事件是通过鼠标或热键的动作(点击或按下)引发的。下表中列出了 常见的事件及其说明。 FF: Firefox, N: Netscape, IE: Internet Explorer 属性 说明 FF N IE onabort 图像加载被中断 1 3 4 onblur 元素失去焦点 1 2 3 onchange 用户改变域的内容 1 2 3 onclick 鼠标点击某个对象 1 2 3 ondblclick 鼠标双击某个对象 1 4 4 onerror 当加载文档或图像时发生某个错误 1 3 4 onfocus 元素获得焦点 1 2 3 onkeydown 某个键盘的键被按下 1 4 3 onkeypress 某个键盘的键被按下或按住 1 4 3 onkeyup 某个键盘的键被松开 1 4 3 onload 某个页面或图像被完成加载 1 2 3 onmousedown 某个鼠标按键被按下 1 4 4 onmousemove 鼠标被移动 1 6 3 onmouseout 鼠标从某元素移开 1 4 4 onmouseover 鼠标被移到某元素之上 1 2 3 onmouseup 某个鼠标按键被松开 1 4 4 onreset 重置按钮被点击 1 3 4 onresize 窗口或框架被调整尺寸 1 4 4 onselect 文本被选定 1 2 3 12 《Java 快车---基础教程》 www.javakc.com TEL:010-62972039 onsubmit 提交按钮被点击 1 2 3 onunload 用户退出页面 1 2 3 2、事件与函数的关联 要将一个函数与某个 HTML 元素的事件关联起来,需要设置相应的 HTML 标记中的属性值。例如, 对于一个 button 元素的 click 事件的处理函数为 MyProc(),则可以用如下的形式将事件与函数关 联起来: 另一个示例,实现翻转图的效果,原来在网页上显示一幅图片,当用户把鼠标移到该图像上时,自 动将图像切换成新的一幅图片;当用户把鼠标移开时,最初的图像又被恢复回来。
13 《Java 快车---基础教程》 www.javakc.com TEL:010-62972039 课后练习题: 1、计算 1 加到 100 的和 2、使用 while 语句计算 1 加到 100 的和 3、打印 100 以内的偶数序列 :02468。。。 4、循环 1-100,单数次输出“好好学习!”,偶数次输出“天天向上!” 5、在死循环中用 if 和 break 实现连续打印 20 个*就结束循环。 6、编程查找满足下列条件的三个正整数:x+y+z=50 并且 x+2*y+5*z=100 7、编写函数输出下面的图案 * ** *** **** 最多的星数目为函数参数 n 所决定。 8、将 a,b,c 三个整数按它们数值的大小,从小到大的顺序打印显示。 (练习 if else 语句) 9、编写函数输出下面的图案 * ** *** **** *** ** * 行数为函数的参数 n 决定。 10、编写函数寻找水仙花数。 (三位数各位数字的立方和恰巧是该数本身,100 到 999 之间有四个这样的数)。 14 《Java 快车---基础教程》 www.javakc.com TEL:010-62972039 第二章 JavaScript 内置对象 对象概述 JavaScript 是一种基于对象的脚本语句,而不是面向对象的编程语言。 对象就是客观世界存在的实体,具有属性和方法两方面特性。 访问对象的属性和方法的方式如下: 对象名.属性 对象名.方法名() 第一节 数组对象类型 Array 数组可以存放很多相同类型的数据。有数组名代表所有这些数据,而用 数组名[下标]表示其中某个元素(下标从 0 开始)。 如:var myA=["张三","李四","王五"]; document.write(myA); //看到所有三个字符串 myA[0]指向第一个元素 myA[2]指向第三个元素 1、建立数组的三种方法: (1) 使用方括号,创建数组的同时赋初值 var myA=["张三", "李四","王五"]; var b=[10,20,30,40]; (2) 使用 new 操作符,创建数组的同时赋初值 var myA=new Array("张三", "李四","王五"); 注意圆括号和方括号的区别,不能任意使用。 (3) 先创建长度为 10 的数组,内容后面再赋值 var anArray = new Array(9); anArray[0]= "张三"; anArray[1]= "李四"; anArray[2]= "王五"; 15 《Java 快车---基础教程》 www.javakc.com TEL:010-62972039 2、数组的属性 length 数组名.length 返回数组中元素的个数 如:myA.length 为 3 例:使用 for 语句输出 myA 数组的各个元素。 for(i=0;i var a = [1,2,3]; document.write(a.concat(4,5)); //输出结果是: //1,2,3,4,5 下面的例子创建了两个数组,然后使用 concat() 把它们连接起来 下面的例子创建了三个数组,然后使用 concat() 把它们连接起来 pop() 方法用于删除并返回数组的最后一个元素。 删除数组的最后一个元素,把数组长度减 1,并且返回它删除的元素的值。如果数组已经为空, 则 pop() 不改变数组,并返回 undefined 值。 push() 方法可向数组的末尾添加一个或多个元素,并返回新的长度。 语法:arrayObject.push(newelement1,newelement2,....,newelementX) 17 《Java 快车---基础教程》 www.javakc.com TEL:010-62972039 push() 方法可把它的参数顺序添加到 arrayObject 的尾部。它直接修改 arrayObject,而 不是创建一个新的数组。push() 方法和 pop() 方法使用数组提供的先进后出栈的功能。 shift() 方法用于把数组的第一个元素从其中删除,并返回第一个元素的值。 如果数组是空的,那么 shift() 方法将不进行任何操作,返回 undefined 值。请注意,该方 法不创建新数组,而是直接修改原有的 arrayObject。 unshift() 方法可向数组的开头添加一个或更多元素,并返回新的长度。 unshift() 方法将把它的参数插入 arrayObject 的头部,并将已经存在的元素顺次地移到 较高的下标处,以便留出空间。该方法的第一个参数将成为数组的新元素 0,如果还有第二个参数, 它将成为新的元素 1,以此类推。 请注意,unshift() 方法不创建新的创建,而是直接修改原有的数组。 slice(start,end) 从已有的数组中返回选定的元素。 splice() 方法用于插入、删除或替换数组的元素。 语法:arrayObject.splice(index,howmany,element1,.....,elementX) 19 《Java 快车---基础教程》 www.javakc.com TEL:010-62972039 splice() 方法可删除从 index 处开始的零个或多个元素,并且用参数列表中声明的一个或多 个值来替换那些被删除的元素。 参数 描述 index 必需。规定从何处添加/删除元素。 该参数是开始插入和(或)删除的数组元素的下标,必须是数字。 howmany 必需。规定应该删除多少元素。必须是数字,但可以是 "0"。 如果未规定此参数,则删除从 index 开始到原数组结尾的所有元素。 element1 可选。规定要添加到数组的新元素。从 index 所指的下标处开始插入。 elementX 可选。可向数组添加若干元素。 下面的实例中,创建一个新数组,并向其添加一个元素: 下面的实例中,将删除位于 index 2 的元素,并添加一个新元素来替代被删除的元素: 下面的实例中,将删除从 index 2 ("Thomas") 开始的三个元素,并添加一个新元素 ("William") 来替代被删除的元素: 4、内部数组 在网页对象中,有很多本身就是数组对象。例如:document 对象的 forms 属性就是一个数组对 象,其中每个元素对应网页中的一个表单,示例如下:
表单中的一个选择列表的 options 属性也是一个数组对象,其中每个元素对应于列表中的一个 选择项目
21 《Java 快车---基础教程》 www.javakc.com TEL:010-62972039 第二节 字符串对象类型 String myStr="我们来自五湖四海!"; 或 myStr= new String("我们来自五湖四海!"); 1、字符串的长度属性 myStr.length 返回字符串中字符的个数 9,一个汉字算一个字符。 2、字符串的方法 分为两大类,如下: (1) 格式设置方法: big(), bold(), fontcolor(颜色字符串), fontsize(字体号), sub(), sup() (2) 通用字符串操作。 str="Hello"; 方法 描述 示例及结果 anchor() 创建 HTML 锚。 str.anchor("b"):Hello big() 用大号字体显示字符串。 str.big() : Hello blink() 显示闪动字符串。 str.blink() : Hello bold() 使用粗体显示字符串。 str.bold() : Hello charAt() 返回在指定位置的字符。 "北京欢迎你".charAt(2)结果是"欢" "北京欢迎你".charAt(0)结果是"北" charCodeAt() 返回在指定的位置的字符的 Unicode 编码。 "北京欢迎你".charCodeAt(2)结果是 27426 concat() 连接字符串。 "北京".concat("欢迎你")结果是"北京欢迎你" fixed() 以打字机文本显示字符串。 str.fixed() : Hello fontcolor() 使用指定的颜色来显示字符串。 str. Fontcolor ("Red") : Hello fontsize() 使用指定的尺寸来显示字符串。 str. fontsize () : Hello indexOf() 检索字符串。 "北京欢迎你".indexOf("欢迎")结果是 2 22 《Java 快车---基础教程》 www.javakc.com TEL:010-62972039 "北京欢迎你".indexOf("上海")结果是-1 "北京欢迎你,欢迎".indexOf("欢迎")结果是 2 italics() 使用斜体显示字符串。 str. italics () : Hello lastIndexOf() 从后向前搜索字符串。 "北京欢迎你,欢迎".lastIndexOf("欢迎")结果是 6 link() 将字符串显示为链接。 str.link("http://www.javakc.com") : Hello match() 找到一个或多个正则表达式的匹配。 replace() 替换与正则表达式匹配的子串。 search() 检索与正则表达式相匹配的值。 slice() 提取字符串的片断,并在新的字符 串中返回被提取的部分。 "北京欢迎你".slice(2,4) 结果是"欢迎" small() 使用小字号来显示字符串。 str.small():Hello split() 把字符串分割为字符串数组。 "北京|欢迎你|欢迎".split("|")结果是 数组{"北京","欢迎你","欢迎"} strike() 使用删除线来显示字符串。 str.strike():Hello sub() 把字符串显示为下标。 str.sub( ) : Hello substr() 从起始索引号提取字符串中指定数 目的字符。 "北京欢迎你".substr(1,2) 结果是"京欢" substring() 提取字符串中两个指定的索引号之 间的字符。 "北京欢迎你".substring(2,4)结果是"欢迎" sup() 把字符串显示为上标。 str.sup(): Hello 1 toLowerCase() 把字符串转换为小写。 (不改变旧的字符串) "Welcome to BeiJing".toLowerCase()结果 是 welcome to beijing toUpperCase() 把字符串转换为大写。 (不改变旧的字符串) "Welcome to BeiJing".toUpperCase()结果 是 WELCOME TO BEIJING 23 《Java 快车---基础教程》 www.javakc.com TEL:010-62972039 第三节 数学类 Math 包含了常用的数学常量和函数。不需要创建该类型的对象,而可以直接使用 Math.属性名或 Math.方法名来使用这些常量和方法。 Math.E 返回 2.718 Math.PI 返回 3.14159 Math 对象方法 方法 描述 abs(x) 返回数的绝对值。 acos(x) 返回数的反余弦值。 asin(x) 返回数的反正弦值。 atan(x) 以介于 -PI/2 与 PI/2 弧度之间的数值来返回 x 的反正切值。 atan2(y,x) 返回从 x 轴到点 (x,y) 的角度(介于 -PI/2 与 PI/2 弧度之间)。 ceil(x) 对数进行上舍入。 cos(x) 返回数的余弦。 exp(x) 返回 e 的指数。 floor(x) 对数进行下舍入。 log(x) 返回数的自然对数(底为 e)。 max(x,y) 返回 x 和 y 中的最高值。 min(x,y) 返回 x 和 y 中的最低值。 pow(x,y) 返回 x 的 y 次幂。 random() 返回 0 ~ 1 之间的随机数。 round(x) 把数四舍五入为最接近的整数。 sin(x) 返回数的正弦。 sqrt(x) 返回数的平方根。 tan(x) 返回角的正切。 24 《Java 快车---基础教程》 www.javakc.com TEL:010-62972039 toSource() 返回该对象的源代码。 valueOf() 返回 Math 对象的原始值。 第四节 日期时间类 Date 该类型对象中存放年月日时分秒等信息。 1、创建日期对象的几种办法: new Date() 不带参数,则以系统时间为新创建日期对象的内容。 new Date(毫秒数) 以距 1970 年 1 月 1 日零时到期望时间的毫秒数为参数,创建日期对象 new Date(2005,6,3,21,0,22) 设定 2005 年 7 月 3 日,注意月从 0 开始的 new Date("July 3, 2005 21:00:22") 以指定的时间为新创建日期对象的内容 2、日期对象的方法: getDate() 返回几号 getDay() 返回星期几 (0 代表星期日,1 到 6 代表星期一到星期六) getHours() 返回几点 getMinutes() 返回分钟数 getSeconds() 返回秒数 getTime() 返回距 1970 年 1 月 1 日零时到期望时间的毫秒数 getYear() 返回年份 setDate() 设置几号 setDay() 设置星期几 (0 代表星期日,1 到 6 代表星期一到星期六) setHours() 设置几点 setMinutes() 设置分钟数 setSeconds() 设置秒数 setTime() 以距 1970 年 1 月 1 日零时到期望时间的毫秒数为参数,设置时间 setYear() 设置年份 25 《Java 快车---基础教程》 www.javakc.com TEL:010-62972039 课后练习题: 1、倒序输出一个字符串的每个字符。 2、显示姓“李”和姓“王”的同学名单。 3、显示姓名中含“宁”的名单。 4、编写随机点名程序。 5、产生 50 个 100 以内的随机数,找出其中最大值和最小值,并统计大于等于 60 的有多少个。 6、编写倒计时程序(距明年春节的天数)。 26 《Java 快车---基础教程》 www.javakc.com TEL:010-62972039 第三章 窗口 window 对象 在 JavaScript 中可以使用 window 和 self 标志符来引用当前的浏览器窗口。 每个打开的窗口定义一个 window 对象,如果文档包含框架(frame 或 iframe 标签),浏览 器会为 HTML 文档创建一个 window 对象,并为每个框架创建一个额外的 window 对象。 可以使用 top 标识符引用最上层的窗口,或使用 parent 标志符引用当前窗口的父窗口。 第一节 Window 对象属性 属性 描述 closed 返回窗口是否已被关闭。 defaultStatus 设置或返回窗口状态栏中的默认文本。 document 对 Document 对象的只读引用。请参阅 Document 对象。 history 对 History 对象的只读引用。请参数 History 对象。 innerheight 返回窗口的文档显示区的高度。 innerwidth 返回窗口的文档显示区的宽度。 length 设置或返回窗口中的框架数量。 location 用于窗口或框架的 Location 对象。请参阅 Location 对象。 name 设置或返回窗口的名称。 Navigator 对 Navigator 对象的只读引用。请参数 Navigator 对象。 opener 返回对创建此窗口的窗口的引用。 outerheight 返回窗口的外部高度。 outerwidth 返回窗口的外部宽度。 pageXOffset 设置或返回当前页面相对于窗口显示区左上角的 X 位置。 pageYOffset 设置或返回当前页面相对于窗口显示区左上角的 Y 位置。 parent 返回父窗口。 27 《Java 快车---基础教程》 www.javakc.com TEL:010-62972039 Screen 对 Screen 对象的只读引用。请参数 Screen 对象。 self 返回对当前窗口的引用。等价于 Window 属性。 status 设置窗口状态栏的文本。 top 返回最顶层的先辈窗口。 window window 属性等价于 self 属性,它包含了对窗口自身的引用。 • screenLeft • screenTop • screenX • screenY 只读整数。声明了窗口的左上角在屏幕上的的 x 坐标和 y 坐标。IE、Safari 和 Opera 支 持 screenLeft 和 screenTop , 而 Firefox 和 Safari 支 持 screenX 和 screenY。 第二节 Window 对象方法 方法 描述 alert() 显示带有一段消息和一个确认按钮的警告框。 blur() 把键盘焦点从顶层窗口移开。 clearInterval() 取消由 setInterval() 设置的 timeout。 clearTimeout() 取消由 setTimeout() 方法设置的 timeout。 close() 关闭浏览器窗口。 confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。 createPopup() 创建一个 pop-up 窗口。 focus() 把键盘焦点给予一个窗口。 moveBy() 可相对窗口的当前坐标把它移动指定的像素。 moveTo() 把窗口的左上角移动到一个指定的坐标。 open() 打开一个新的浏览器窗口或查找一个已命名的窗口。 print() 打印当前窗口的内容。 prompt() 显示可提示用户输入的对话框。 resizeBy() 按照指定的像素调整窗口的大小。 resizeTo() 把窗口的大小调整到指定的宽度和高度。 28 《Java 快车---基础教程》 www.javakc.com TEL:010-62972039 scrollBy() 按照指定的像素值来滚动内容。 scrollTo() 把内容滚动到指定的坐标。 setInterval() 按照指定的周期(以毫秒计)来调用函数或计算表达式。 setTimeout() 在指定的毫秒数后调用函数或计算表达式。 第三节 常用方法示例 (1)打开和关闭窗口: open 打开另外一个窗口来显示新的页面。 window.open(URL,窗口名称,可选参数) close() 关闭用 Open 方法打开的窗口 可选参数:“toolbar=yes, width=500,height=200” (2)对话框方法 alert (提示字符串) 提示信息,只有一个“确定”按钮 confirm (提示字符串)  选择确定或取消,返回值:true, false 29 《Java 快车---基础教程》 www.javakc.com TEL:010-62972039 prompt(提示字符串,初始值) 让用户在对话框中输入 30 《Java 快车---基础教程》 www.javakc.com TEL:010-62972039 (3)移动窗口方法: (窗口左上角为坐标 0,0 点) moveBy 窗口横向纵向移动多少象素 moveBy(10,10) moveTo 窗口移动到参数指定的位置 moveTo(100,100) 31 《Java 快车---基础教程》 www.javakc.com TEL:010-62972039 (4)定时方法: 设置定时器,按指定时间间隔,反复执行某函数: setInterval 和 clearInterval (见跑马灯程序) 设置定时器,按指定时间间隔,执行一遍某函数: setTimeout 和 clearTimeout

点击上面的按钮。5 秒后会显示一个消息框。

(5)聚焦方法 : 让窗口处于激活状态。 window.focus() 33 《Java 快车---基础教程》 www.javakc.com TEL:010-62972039 第四章 文档 document 对象 DOM (文档对象模型) . window 整个浏览器窗口的统称,是最上层的唯一对象。这一级可以省略,是系统默认值。 . document 是 Window 的一个子对象,包含当前文档(HTML 文件)中所有的对象。 . form 即表单,包含许多子对象。 . window、document 和 history 对象是系统定义好的,其它对象是由我们程序员自己定义的。 我们要为每个对象起一个名称。 第一节 document 对象概述 document 对象最强大的一个特性在于它的组织性。如果给页面中的元素起个名字,则可以把该元 素当成 document 对象的一个属性来处理。例如,如果在 form 元素“form1”中有一个名叫 “ txtbox” 的 文 本 框 , 则 可 以 像 下 面 这 样 去 引 用 该 文 本 框 中 的 文 本 : document.form1.txtbox.value。 34 《Java 快车---基础教程》 www.javakc.com TEL:010-62972039 除了将 HTML 元素按名字组织起来外,document 对象还有许多属性、方法、事件,这些特点可以 帮助我们扩展程序的功能。 Document 对象集合 集合 描述 all[] 提供对文档中所有 HTML 元素的访问。 anchors[] 返回对文档中所有 Anchor 对象的引用。 applets 返回对文档中所有 Applet 对象的引用。 forms[] 返回对文档中所有 Form 对象引用。 images[] 返回对文档中所有 Image 对象引用。 links[] 返回对文档中所有 Area 和 Link 对象引用。 Document 对象属性 属性 描述 body 提供对 元素的直接访问。 对于定义了框架集的文档,该属性引用最外层的 。 cookie 设置或返回与当前文档有关的所有 cookie。 domain 返回当前文档的域名。 lastModified 返回文档被最后修改的日期和时间。 referrer 返回载入当前文档的文档的 URL。 title 返回当前文档的标题。 URL 返回当前文档的 URL。 Document 对象方法 方法 描述 close() 关闭用 document.open() 方法打开的输出流,并显示选定的数据。 getElementById() 返回对拥有指定 id 的第一个对象的引用。 getElementsByName() 返回带有指定名称的对象集合。 getElementsByTagName() 返回带有指定标签名的对象集合。 open() 打开一个流,以收集来自任何 document.write() 或 document.writeln() 方法的输出。 35 《Java 快车---基础教程》 www.javakc.com TEL:010-62972039 write() 向文档写 HTML 表达式 或 JavaScript 代码。 writeln() 等同于 write() 方法,不同的是在每个表达式之后写一个换行符。 第二节 document 对象的事件(body 标记中) onkeydown 按下任意键 onkeypress 将按下任意键 onkeyup 释放键 onclick 单击鼠标 ondblclick 双击鼠标 onmousedown 按下鼠标 onmouseup 释放鼠标 load 文档装载完毕 unload 文档卸载完毕 可以使用 attachEvent 方法,为 body 添加事件。 document.attachEvent ('onclick',getA); 36 《Java 快车---基础教程》 www.javakc.com TEL:010-62972039 第五章 表单 form 对象 第一节 表单对象的使用 1、什么是表单对象 表单(
)是 Web 页面中的基本元素。表单对象最主要的功能就是能够直接访问页面中的表 单。利用表单对象,可以实现与用户的交互;不需要服务器的介入,就可以实现动态改变 Web 页面的 行为。 对于 Web 页面表单,通常使用 document 对象的 forms 数组可以很方便地访问不同的表单。例如, 某 HTML 文件片段如下:
document 对象的 forms 数组有两个元素:forms[0]可以访问第一个表单,其中共有三个基本 元素:而 forms[1]对应表单 form2,其中只有两个元素。 除了用 forms 数组方式访问表单对象外,也可以直接用表单的名字进行访问。例如,对于上例, 也可以用 document.form1 和 document.form2 分别访问两个表单。 2、表单对象的方法 表单对象的 submit()方法用于实现表单信息的提交。例如,要提交页面中的一个名为 form1 的表单,可以使用下列语句: document.form1.submit(); 3、表单对象的属性 属性 描述 37 《Java 快车---基础教程》 www.javakc.com TEL:010-62972039 Name 表单的名称 action 提交表单后执行的程序 target 指定数据显示在哪个窗口(_blank,_parent,_self,_top) 或哪个框架(框架名称)中 encoding 默认为 text/html method “Get”或“Post” elements 数组 只读,表单中所有对象的索引,0,1,… 由 document.表单名.elements.length 可知该表单共有多少个对象 这里 elements 属性是一个数组,其中的元素对应于页面上表单内的各个控件。除了 elements 外,表单的其他几个属性均对应于 HTML 语法中
标记的属性。 4、表单对象使用示例 下面示例如果使用表单对象,效果及代码如下:
注意:单击“提交”按钮会触发表单的 onsubmit 事件。如果 onsubmit 的事件处理过程返回 false,则不进行表单数据的提交。但如果直接使用表单对象的 submit()方法,则直接将数据提交 出去。 第二节 表单中的基本元素 表单中的基本控件由按钮、单选按钮、复选按钮、提交按钮、重置按钮和文本框等组成。在 JavaScript 中要访问这些控件,可以使用以下两种方法实现:  表单.元素名称 例如:document.form1.check  表单.elements[下标] 例如:document.form1.elements[2] 下面分别介绍表单中的各个基本控件。 1、text 对象 text 对象对应于页面中的 text 输入框控件。 39 《Java 快车---基础教程》 www.javakc.com TEL:010-62972039 属性 accessKey 设置或返回访问文本域的快捷键。 使用 Alt + accessKey 为拥有指定快捷键的元素赋予焦点 alt 设置或返回当浏览器不支持文本域时供显示的替代文本。 defaultValue 设置或返回文本域的默认值。 disabled 设置或返回文本域是否应被禁用。 id 设置或返回文本域的 id。 maxLength 设置或返回文本域中的最大字符数。 name 设置或返回文本域的名称。 readOnly 设置或返回文本域是否应是只读的。 size 设置或返回文本域的尺寸。 tabIndex 设置或返回文本域的 tab 键控制次序。 type 返回文本域的表单元素类型。 value 设置或返回文本域的 value 属性的值。 方法 blur( ) 将当前焦点移到后台 select( ) 加亮文字,选取文本域中的内容。 focus() 在文本域上设置焦点。 主要事件 onfocus,onblur,onselect,onchange text 对象使用示例如下:
40 《Java 快车---基础教程》 www.javakc.com TEL:010-62972039 2、textarea 对象 textarea 对象对应于页面中的 textarea 输入控件。 属性 name textarea 输入框控件名称 value textarea 输入框控件中当前的文本 defaultvalue textarea 输入框控件的默认文本 方法 blur( ) 将当前焦点移到后台 select( ) 加亮文字 主要事件 onfocus,onblur,onselect,onchange 3、select 对象 select 对象对应于网页中的下拉列表框。 属性 disabled 设置或返回是否应禁用下拉列表 id 设置或返回下拉列表的 id。 length 返回下拉列表中的选项数目。 multiple 设置或返回是否选择多个项目。 name 设置或返回下拉列表的名称。 options 数组 返回包含下拉列表中的所有选项(option 对象)的一个数组。 其中 option 对象包括如下属性: text 该选项显示的文字 value 该选项的 value 值 selected 指明该选项是否别选中 41 《Java 快车---基础教程》 www.javakc.com TEL:010-62972039 selectedIndex 当前选中项的下标 size 设置或返回下拉列表中的可见行数。 方法 options.add() 向下拉列表添加一个选项。 blur() 从下拉列表移开焦点。 focus() 在下拉列表上设置焦点。 remove() 从下拉列表中删除一个选项。 主要事件 onfocus,onblur,onchange 4、button 对象 button 对象对应于网页中的按钮控件。 属性 accessKey 设置或返回访问按钮的快捷键。 alt 设置或返回当浏览器无法显示按钮时供显示的替代文本。 disabled 设置或返回是否禁用按钮。 id 设置或返回按钮的 id。 name 设置或返回按钮的名称。 tabIndex 设置或返回按钮的 tab 键控制次序。 value 设置或返回在按钮上显示的文本。 方法 blur() 把焦点从元素上移开。 click() 在该按钮上模拟一次鼠标单击。 focus() 为该按钮赋予焦点。 主要事件 onclick 5、checkbox 对象 checkbox 对象对应于网页中的复选框。 42 《Java 快车---基础教程》 www.javakc.com TEL:010-62972039 选项说明 属性 accessKey 设置或返回访问 checkbox 的快捷键。 alt 设置或返回不支持 checkbox 时显示的替代文本。 checked 设置或返回 checkbox 是否应被选中。 defaultChecked 返回 checked 属性的默认值。 disabled 设置或返回 checkbox 是否应被禁用。 id 设置或返回 checkbox 的 id。 name 设置或返回 checkbox 的名称。 tabIndex 设置或返回 checkbox 的 tab 键控制次序。 value 设置或返回 checkbox 的 value 属性的值 方法 blur() 从 checkbox 上移开焦点 click() 模拟在 checkbox 中的一次鼠标点击。 focus() 为 checkbox 赋予焦点。 主要事件 onclick 6、radio 对象 radio 对象对应于网页中的单选控件。当网页中具有多个相同名称的单选控件后,就形成了一个 radio 对象数组,其中每个单选控件即为一个 radio 对象。 选项说明 选项说明 ………… 属性 accessKey 设置或返回访问单选按钮的快捷键。 alt 设置或返回在不支持单选按钮时显示的替代文本。 checked 设置或返回单选按钮的状态。 defaultChecked 返回单选按钮的默认状态。 disabled 设置或返回是否禁用单选按钮。 43 《Java 快车---基础教程》 www.javakc.com TEL:010-62972039 id 设置或返回单选按钮的 id。 name 设置或返回单选按钮的名称。 tabIndex 设置或返回单选按钮的 tab 键控制次序。 value 设置或返回单选按钮的 value 属性的值。 方法 blur() 从单选按钮移开焦点。 click() 在单选按钮上模拟一次鼠标点击。 focus() 为单选按钮赋予焦点。 主要事件 onclick 7、hidden 对象 hidden 对象对应于网页中的隐藏域。 属性 alt 设置或返回当不支持隐藏输入域时显示的替代文本。 id 设置或返回隐藏域的 id。 name 设置或返回隐藏域的名称。 value 设置或返回隐藏域的 value 属性的值。 8、submit 对象 submit 对象对应于网页中的 submit 按钮。 属性 accessKey 设置或返回访问提交按钮的快捷键。 alt 设置或返回当浏览器不支持提交按钮时供显示的替代文本。 disabled 设置或返回提交按钮是否应被禁用。 id 设置或返回提交按钮的 id。 name 设置或返回提交按钮的名称。 44 《Java 快车---基础教程》 www.javakc.com TEL:010-62972039 tabIndex 设置或返回提交按钮的 tab 键控制次序。 value 设置或返回在提交按钮上显示的文本。 方法 blur() 从提交按钮上移开焦点。 click() 在提交按钮上模拟一次鼠标点击。 focus() 为提交按钮赋予焦点。 主要事件 onclick 9、password 对象 password 对象对应于网页中的密码输入框。 属性 accessKey 设置或返回访问密码字段的快捷键。 alt 设置或返回当不支持密码字段时显示的替代文字。 defaultValue 设置或返回密码字段的默认值。 disabled 设置或返回是否应被禁用密码字段。 id 设置或返回密码字段的 id。 maxLength 设置或返回密码字段中字符的最大数目。 name 设置或返回密码字段的名称。 readOnly 设置或返回密码字段是否应当是只读的。 size 设置或返回密码字段的长度。 tabIndex 设置或返回密码字段的 tab 键控制次序。 value 设置或返回密码字段的 value 属性的值。 方法 blur() 从密码字段移开焦点。 click() 为密码字段赋予焦点。 focus() 选取密码字段中的文本。 主要事件 onfocus,onblur,onselect,onchange 45 《Java 快车---基础教程》 www.javakc.com TEL:010-62972039 第六章 History 与 Navigator 对象 History 对象 History 对象包含用户(在浏览器窗口中)访问过的 URL。 History 对象是 window 对象的一部分,可通过 window.history 属性对其进行访问。 History 对象属性 属性 描述 length 返回浏览器历史列表中的 URL 数量。 History 对象方法 方法 描述 back() 加载 history 列表中的前一个 URL。 forward() 加载 history 列表中的下一个 URL。 go(number|URL) 加载 history 列表中的某个具体页面。 -1 表示前一个页面 Navigator 对象 Navigator 对象包含有关浏览器的信息。可以使用这些属性进行平台专用的配置。 Navigator 对象的实例是唯一的,可以用 Window 对象的 navigator 属性来引用它。 Navigator 对象集合 集合 描述 plugins[] 返回对文档中所有嵌入式对象的引用。 该集合是一个 Plugin 对象的数组,其中的元素代表浏览器已经安装的插件。Plug-in 对象提供的是有关插件的信息,其中包括它所支持的 MIME 类型的列表。 虽然 plugins[] 数组是由 IE 4 定义的,但是在 IE 4 中它却总是空的,因为 IE 4 不支持插件和 Plugin 对象。 Navigator 对象属性 属性 描述 appCodeName 返回浏览器的代码名。 46 《Java 快车---基础教程》 www.javakc.com TEL:010-62972039 appMinorVersion 返回浏览器的次级版本。 appName 返回浏览器的名称。 appVersion 返回浏览器的平台和版本信息。 browserLanguage 返回当前浏览器的语言。 cookieEnabled 返回指明浏览器中是否启用 cookie 的布尔值。 cpuClass 返回浏览器系统的 CPU 等级。 onLine 返回指明系统是否处于脱机模式的布尔值。 platform 返回运行浏览器的操作系统平台。 systemLanguage 返回 OS 使用的默认语言。 userAgent 返回由客户机发送服务器的 user-agent 头部的值。 userLanguage 返回 OS 的自然语言设置。 Navigator 对象方法 方法 描述 IE F O javaEnabled() 规定浏览器是否启用 Java。 4 1 9 taintEnabled() 规定浏览器是否启用数据污点 (data tainting)。 4 1 9 47 《Java 快车---基础教程》 www.javakc.com TEL:010-62972039 第七章 JavaScript 框架编程 一个 HTML 页面可以有一个或多个子框架,这些子框架以 在 上 面 代 码 中 , 定 义 了 一 个 iframe 框 架 并 把 TestB.html 文 件 放 在 其 中 , 如 果 需 要 在 TestB.html 中对 TestA.html 中的 username 文本框赋值,就应该在 TestB.html 中实现如下代码: 3、兄弟框架间的引用 如果两个框架为同一个框架的子框架,它们称为兄弟框架,可以通过父框架来实现互相引用,例 如一个页面包括 2 个子框架 在 frame1 中可以使用如下语句来引用 frame2。 self.parent.frames["frame2"] 4、不同层次框架间的相互引用 框架的层次是针对顶层框架而言的。当层次不同时,只要知道自己所在的层次以及另一个框架所在 49 《Java 快车---基础教程》 www.javakc.com TEL:010-62972039 的层次和名字,利用框架引用的 window 对象性质,就可以很容易地实现互相访问,例如: self.parent.frames["childName"].frames["targetFrameName"] 5、对顶层框架的引用 和 parent 属性类似,window 对象还有一个 top 属性,它表示对顶层框架的引用,可以用来一 个框架自身是否为顶层框架,例如: top.window.formA.username.value="javakc"; 也可以采用下面代码验证本框架是否为顶层框架 if(self==top){ //too do } 对于框架的引用就是对“window”对象的引用,利用 window 对象的 location 属性,可以改变 框架的导航,例如 window.frames[0].location="index.html"; 这就是将页面中的第一个框架的页面重定向到 index.html,利用这个性质,甚至可以使用一条 链接来更多的框架,例如: link 第二节 引用其他框架内的变量和函数 在一个框架中可以引用其他框架内的 JavaScript 变量和函数,例如: 如果运行这段代码,将会弹出 hello javakc 的显示对话框,这正是执行 hello()函数的结 50 《Java 快车---基础教程》 www.javakc.com TEL:010-62972039 果。事实上,一个页面内定义的所有全局变量和全局函数都是作为 window 对象的成员。例如: var a="javakc"; alert(window.a); 执行代码后就会弹出对话框显示为 javakc。同样,在不同框架之间共享变量和函数,就是通过 window 对象来调用的。 页面结构如下: 在 left.htm 页面中有如下 JavaScript 代码片段: 在 main.html 页面中有如下代码: 加入购物车 51 《Java 快车---基础教程》 www.javakc.com TEL:010-62972039 第八章 JavaScript 异常处理 在代码的运行过程中一般会发生两种错误:一是程序内部的逻辑或者语法错误;二是运行环境或 者用户输入中不可预知的数据造成的错误。JavaScript 可以捕获异常并进行相应的处理,从而避免 了浏览器向用户报错。 1、利用 try-catch-finally 处理异常 用户可以使用该结构处理可能发生异常的代码,如果发生异常,则由 catch 捕获异常并进行相应 的处理,其语法如下: try{ //要执行的代码 }catch(e){ //处理异常的代码 }finally{ //无论异常发生与否,都会执行的代码 } 这与 java 或者 C#异常处理的语言室一致的。通过异常处理,可以避免程序停止运行,从而具有 了一定的自我修复能力。在 Ajax 开发中,利用异常处理的一个典型应用就是创建 XMLHttpRequest 对象,不同浏览器创建它的方式也是不一样的,为了使代码能够跨浏览器运行,就可以利用异常。一种 方法不行,再可以用另一种方法,知道不发生异常为止,例如: 利用这种方式,就可以跨浏览器创建 XMLHttpRequest 对象。 52 《Java 快车---基础教程》 www.javakc.com TEL:010-62972039 2、利用 throw 处理异常 在 JavaScript 中有其内部的异常机制,在遇到非法操作的时候能自动抛出异常,但在实际的开 发中,随着程序的复杂,需要自己实现异常,可以通过 throw 语句来实现:“throw value”; 其 中 vlaue 就 是 要 抛 出的异常变量,它可以是 JavaScript 中 的 任 何 一 种 类 型 , 但 在 JavaScript 内 部 的 异 常 中 , 异 常 参 数 e 是 一 个 名 为 error 的 对 象 , 可 以 通 过 new Error(message)来创建这个对象,异常的描述被作为 error 对象的一个属性 message,可以由 构造函数传入,也可以之后赋值。通过这个异常描述,可以让程序获取异常的详细信息,从而自动处理, 例如,下面的程序用于计算两个数据的积,如果参数不是数字,则抛出异常: 程序中使用字母作为参数传递给 sum 函数是错误的,所以函数内跑粗了一个异常对象,这个对象 被 catch 语句获取,并使用 alert 语句显示了其详细信息, 53 《Java 快车---基础教程》 www.javakc.com TEL:010-62972039 第七章 自定义 JavaScript 对象 第一节 JavaScript 类的定义 一个类是对具有相似性质的一类事物的抽象,通过实例化一个类,可以获得属于该类的一个实例 (即对象)。 JavaScript 中定义一个类的方法如下: 上面定义的 HelloClass 既是一个类成员的定义也是一个类。如果看作是函数,可以把它理解为 类的构造方法,负责初始化的工作。可以应用 new 操作符来创建一个对象,例如: new Date(); var obj=new HelloClass(); 上 面 第 一 句代 码表示创 建 一 个日 期对 象 , 而 Date 就 是 表示 日 期的 类 ,但是 这 个 类 是由 JavaScript 内部提供的,而不是用户定义的。第二句是用 new 操作符创建用户定义的对象。 在 javaScript 中,每个对象都可以看作是多个属性(方法)的集合,引用一个属性(方法)的 格式如下: 对象名.属性(方法)名 除此之外,还可以用方括号的形式来引用(注意方括号中的双引号,不可省略): 54 《Java 快车---基础教程》 www.javakc.com TEL:010-62972039 对象名["属性(方法)名"] 这里所指的方法名和属性名是一个字符串,例如: var arrs=new Array(); arrs["push"]("javakc"); //添加一个元素(调用对象的方法) var len=arrs["length"]; //获得数组的长度(调用对象的属性) alert(len); 上面编写的代码等价于如下代码: var arrs=new Array(); arrs.push("javakc"); //添加一个元素(调用对象的方法) var len=arrs.length; //获得数组的长度(调用对象的属性) alert(len); 上面这种引用属性(方法)的方式,反应出一个 JavaScript 对象就是一组属性(方法)的集合 这个性质。 利用方括号的形式来引用,这种用法适用于不确定具体要调用哪一个属性(方法)的应用,例如 有一个用户资料的对象,通过一个字符串来表示要使用的属性,就可以用这种方式来引用,其代码如 下: 在上面的代码中,使用一个下拉列表框让用户选择 User 类的属性,每个选项的 value 就表示用 户对象的属性名称。 第二节 prototype 对象 prototype 对象是实现面向对象的一个重要机制。每个函数也是一个对象,它们对应的类就是 function,每个函数对象都具有一个子对象 prototype。Prototype 表示了该函数的原型 , prototype 表示了一个类的属性的集合。当通过 new 来生成一个类的对象时,prototype 对象的属 性就会成为实例化对象的属性。 下面以一个例子来介绍 prototype 的应用,代码如下: 当用 new 创建一个对象时,prototype 对象的属性将自动赋给所创建的对象,例如: 因为 prototype 是一个 JavaScript 对象,所以可以为 prototype 对象添加、修改方法和属性。 第三节 JavaScript 反射机制 反射机制是指程序在运行期间能够获取自身的信息,例如一个对象能够在运行时知道自己拥有哪 些方法和属性,并且可以调用这些方法和属性。在 C#和 Java 中都提供了反射机制,能够在运行时动 态判断和调用自己的属性或方法。在 JavaScript 中可用 for(…in…)语句来实现反射,其语法如下: 在以上代码中利用 var vs 声明的一个变量用来存储对象 obj 的属性(方法)名称,有了对象名 和属性(方法)名,就可以使用方括号语法来调用一个对象的属性(方法)了。 上面的程序语句用语遍历 obj 对象的所有属性和方法,遇到属性则显示它的值,遇到方法,就调 用执行。该语句就是遍历一个集合内的所有成员。在基于对象的 JavaScript 程序设计中,反射机制是 很重要的一种技术,它在实现类的继承中发挥了很大的作用。 第四节 JavaScript 类继承 利用共享 prototype 实现继承 类之间的继承关系是现实世界中遗传关系的直接模拟,它表示类之间的内在联系以及对属性和操 作的共享,即子类可以沿用父类(被继承的类)的某些特征。当然子类也可以具有自己独立的属性和操 作。 继承也是软件复用的一种形式,新类由已存在的类生成,通过保留它们的属性和行为并且根据新 57 《Java 快车---基础教程》 www.javakc.com TEL:010-62972039 类的要求对性能加以修改,添加新的属性和行为。虽然在 JavaScript 中没有专门的机制来实现类的 继承,但可以通过复制一个类的 prototype 到另外一个类来实现继承。下面是一种简单的继承实现, 代码如下: 在以上的代码中,首先是 HelloSubClass 具有了和 HelloClass 一样的 prototype,如果不考 虑构造方法,则两个类是等价的。随后,又通过 prototype 给 HelloSubClass 赋予了额外的属性和方法 所以 HelloSubClass 是在 HelloClass 的基础上增加了新的属性和方法,从而实现了类的继承。 JavaScript 提供了 instanceof 操作符来判断一个对象是否是某个类的实例,对于上面创建的 obj 对象,下面两条语句都是成立的: obj instanceof HelloSubClass //true obj instanceof HelloClass //true JavaScript 能 够 正 确 地 理 解 这 种 继 承 关 系 , 在 下 面 的 代 码 中 , 先 使 用 property 让 HelloSubClass 继承 HelloClass,然后再 HelloSubClass 中重复定义 method 方法,例如: 执 行 上 述 代 码 后 , 弹 出 两 个 对 话 框 都 显 示 HelloSubClass 字 样 。 由 此 可 见 , 当 对 HelloSubClass 进行 prototype 的改变时,HelloClass 的 prototype 也随之改变,即使对 HelloSubClass 对 prototype 增 减 一 些 成 员 , HelloClass 的 成 员 也 随 之 改 变 , 所 以 HelloClass 和 HelloSubClass 仅仅是构造方法不同的两个类,它们保持着相同的成员定义,也就 是说 HelloClass 和 HelloSubClass 的 prototype 是完全相同的,是对同一个对象的引用。 在 JavaScript 中,除了基本的数据类型外(数字、字符串、布尔),所有的赋值以及函数参数都 是引用传递,而不是值传递,所以上面的语句仅仅是让 HelloSubClass 的 prototype 对象引用 HelloClass 的 prototype , 造 成 了 类 成 员 定 义 始 终 保 持 一 致 的 效 果 。 从 这 里 也 可 以 看 到 instanceof 操作符的执行机制,它用于判断一个对象是否是一个 prototype 的实例,因为这里的 obj1 和 obj2 是对应同一个 prototype,所有它们的 instanceof 的结果是相同的。 利用反射机制和 prototype 实现继承 前面介绍的通过共享 prototype 来实现类的继承,并不是一种很好的方法,由于两个类共享同 一个 prototype,任何对成员的重定义都会相互影响,不是严格意义上的继承。可以利用反射机制来 实现类的继承,利用 for(…in…) 语句枚举所有基类 prototype 的成员,并将其赋值给子类的 59 《Java 快车---基础教程》 www.javakc.com TEL:010-62972039 prototype 对象,实现方法如下: 在以上的代码中,obj2 中重复定义的 method 方法已经覆盖了继承的 method 方法,同时 method2 方法未受影响,而且 obj1 中的 method 方法仍然保持了原有的定义。这样就实现了正确意 义上的类的继承,也可以为每个类添加一个公共的方法,用以实现类的继承,例如: 60 《Java 快车---基础教程》 www.javakc.com TEL:010-62972039 //为类添加静态方法inherit表示继承于某类 Function.prototype.inherit=function(baseClass){ for(var p in baseClass.prototype){ this.prototype[p]=baseClass.prototype[p]; } } 上面用所有函数对象(类)的共同类 Function 来添加继承方法,这样所有的类都会有一个 inherit 方法,用以实现继承。于是,上面代码中的类的继承可以写为: //让HelloSubClass继承于HelloClass HelloSubClass.inherit(HelloClass); 这样,代码逻辑变的更加清楚,也更容易理解。 61 《Java 快车---基础教程》 www.javakc.com TEL:010-62972039 练习题 单选题 1. 以下哪条语句会产生运行错误:(A) A. var obj = ( ); B. var obj = [ ]; C. var obj = { }; D. var obj = //; 2. 以下哪个单词不属于 javascript 保留字:(B) A. with B. parent C. class D. void 3. 请选择结果为真的表达式:(C) A. null instanceof Object B. null === undefined C. null == undefined D. NaN == NaN 不定项选择题 4. 请选择对 javascript 理解有误的:(ABCD) A.JScript 是 javascript 的简称 B.javascript 是网景公司开发的一种 Java 脚本语言,其目的是为了简化 Java 的开发难度 C.FireFox 和 IE 存在大量兼容性问题的主要原因在于他们对 javascript 的支持不同 D.AJAX 技术一定要使用 javascript 技术 5. foo 对象有 att 属性,那么获取 att 属性的值,以下哪些做法是可以的:(ACE) A. foo.att B. foo("att") C. foo["att"] D. foo{"att"} E. foo["a"+"t"+"t"] 62 《Java 快车---基础教程》 www.javakc.com TEL:010-62972039 6. 在不指定特殊属性的情况下,哪几种 HTML 标签可以手动输入文本:(AB) A. B. C. D.
7. 以下哪些是 javascript 的全局函数:(ABC) A.escape B.parseFloat C.eval D.setTimeout E.alert 8. 关于 IFrame 表述正确的有:(ABCD) A.通过 IFrame,网页可以嵌入其他网页内容,并可以动态更改 B.在相同域名下,内嵌的 IFrame 可以获取外层网页的对象 C.在相同域名下,外层网页脚本可以获取 IFrame 网页内的对象 D.可以通过脚本调整 IFrame 的大小 9. 关于表格表述正确的有:(ABCDE) A.表格中可以包含 TBODY 元素 B.表格中可以包含 CAPTION 元素 C.表格中可以包含多个 TBODY 元素 D.表格中可以包含 COLGROUP 元素 E.表格中可以包含 COL 元素 10. 关于 IE 的 window 对象表述正确的有:(ACD) A.window.opener 属性本身就是指向 window 对象 B.window.reload()方法可以用来刷新当前页面 C.window.location="a.html"和 window.location.href="a.html"的作用都是把当 前页面替换成 a.html 页面 D.定义了全局变量 g;可以用 window.g 的方式来存取该变量 11. 如何获取表单 select 域的选择部分的文本? 12. 在 JavaScript 中定时调用函数 foo() 如何写? 13. form 中的 input 可以设置 readonly 和 disable,请问这两项属性有什么区别? 63
还剩62页未读

继续阅读

下载pdf到电脑,查找使用更方便

pdf的实际排版效果,会与网站的显示效果略有不同!!

需要 15 金币 [ 分享pdf获得金币 ] 34 人已下载

下载pdf

pdf贡献者

liudengtan

贡献于2012-01-03

下载需要 15 金币 [金币充值 ]
亲,您也可以通过 分享原创pdf 来获得金币奖励!
下载pdf