javascript基础入门[沐风书苑]

1、JavaScript 1参考幻灯 主要内容 一一 了解了解JavaScript 二二 JavaScript入门入门 三三 语言基础语言基础 四四 内置对象内置对象 五五 对象与对象与DOM 六六 图像处理图像处理 七七 框架框架 八八 表单与事件处理表单与事件处理 2参考幻灯 一、了解一、了解JavaScript 1.了解了解JavaScript 2. JavaScript与与Java 3.JavaScript与与Java不同点不同点 4.JavaScript工作流程工作流程 5.JavaScript可以做什么可以做什么 6.JavaScript不可以做什么不可以做什么 3参考幻灯 了解了解J

2、avaScript v是一种基于对象对象和事件驱动事件驱动并具有安全性的解释性解释性语言，其 目的就是增强Web客户交互。弥补了HTML的缺陷。 页面页面标准 行为 表示 CSS 结构 HTML 4参考幻灯 JavaScript与与Java v处于两家不同的公司，属于两种完全不同的产品。 vJava是SUN公司推出的新一代面向对象的程序设计语言，特 别适合Internet应用程序开发，前生是Oak语言。 vJavaScript是Netscape公司的产品，是一种可嵌入到WEB当 中的基于对象和事件驱动的解释性语言，前生是LiveScript。 5参考幻灯 JavaScript与与Java不同点

3、不同点 v基于对象和面向对象 v解释和编译 v强变量和弱变量 v代码格式不一样 v嵌入方式不一样 v静态联编和动态联编 （对象引用在运行时进行检查，对象引用必 须在编译时的进行） 6参考幻灯 JavaScirpt可以做什么可以做什么 v使网页更具有交互性，给用户提供更好，更令人兴奋的体验。 v确保用户在表单中输入有效的信息，可以节省你的业务开支。 v即时创建HTML页面。 v还可以处理表单，设置cookie，创建基于Web的应用程序。 7参考幻灯 JavaScirpt不可以做什么不可以做什么 v不允许读写客户机器上的文件。 v不允许写服务器上的文件。 v不能关闭不是由它打开的窗口。 v不能从来

4、自另一个服务器的已经打开的网页中读取信息。 8参考幻灯 二二.JavaScript入门入门 1.脚本写在哪里？脚本写在哪里？ 2.第一个第一个JavaScript程序程序 3.在脚本中写注释在脚本中写注释 4.弹出对话框弹出对话框 5.关闭一个浏览器窗口关闭一个浏览器窗口 9参考幻灯 脚本写在哪里？脚本写在哪里？ . . HTML文档文档 function HELLO() . src= 10参考幻灯 第一个第一个JavaScript程序程序 v v v vdocument.write(Hello World!); v v v 11参考幻灯 在脚本中写注释在脚本中写注释 v两种注释示例 /* *

5、/ 与 / v/*This is an example of a long JavaScript comment.Note the characters at the beginning ending of the comment.*/ vFunction Emg() / This is writeMessage. v 12参考幻灯 弹出对话框弹出对话框 v三种对话框三种对话框 function DialogBox() /alert(welcome!); 一个按钮 / confirm(can you speak english?);两个按钮 prompt (“how old are you?”

6、,”23”);有默认回答，两个按钮 13参考幻灯 关闭一个浏览器窗口关闭一个浏览器窗口 v两种关闭方式 标签关闭标签关闭与按钮关闭按钮关闭 关闭窗口 function NVGClose() window.close(); 14参考幻灯 三三.语言基础语言基础 1.基本数据类型基本数据类型 常量常量 2.基本数据类型基本数据类型变量变量 3.转义字符转义字符 4.表达式表达式 5.运算符运算符 6.控制语句控制语句 7.JavaScript函数函数 8.错误处理错误处理 15参考幻灯 基本数据类型基本数据类型 常量常量 v整型整型 只能储存整数。可以是正整数、0、负整数，可以是十进制、八进制、十

7、六 进制。八进制数的表示方法是在数字前加“0”，如“0123”表示八进制数“123”。 十六进制则是加“0 x”：“0 xEF”表示十六进制数“EF”。 v浮点型浮点型 即“实型”，能储存小数。有资料显示，某些平台对浮点型变量的支持 不稳定。没有需要就不要用浮点型。 v字符串型字符串型 是用引号“” “”、“ ”包起来的零个至多个字符，而且单双引 号可嵌套使用。 v布尔型布尔型 常用于判断，只有两个值可选：true（表“真”）和 false（表“假”）。 true 和 false 是 JavaScript 的保留字。它们属于“常数”。 16参考幻灯 基本数据类型基本数据类型变量变量 v变量的命

8、名变量的命名 变量的命名有以下要求： 1.只包含字母、数字和/或下划线； 2.要以字母开头； 3.不能太长； 4.不能使用JavaScript中的关键字作为变量； 变量是区分大小写的，例如，variable 和 Variable 是两个不同的变量 v变量需要声明变量需要声明 没有声明的变量不能使用，否则会出错：“未定义”。声明变量可以用： var = v变量作用域变量作用域。全局变量是定义在所有函数体之外，其作用范围是整个函数；而局部变量是 定义在函数体之内，只对其该函数是可见的，而对其它函数则是不可见的。 17参考幻灯 转义字符转义字符 v由于一些字符在屏幕上不能显示，或者 JavaScri

9、pt 语法上 已经有了特殊用途，在要用这些字符时，就要使用“转义字 符”。 v转义字符用斜杠“”开头： 单引号、“ 双引号、n 换行 符、r 回车。于是，使用转义字符，就可以做到引号多重 嵌套：Micro 说：”这里是“JavaScript 教程” 。 18参考幻灯 表达式表达式 v表达式表达式在定义完变量后，就可以对它们进行赋值、 改变、计算等一系列操作，这一过程通常又叫称 一个叫表达式来完成，可以说它是变量、常量、 布尔及运算符的集合，因此表达式可以分为算术 表述式、字串表达式、赋值表达式以及布尔表达 式等。 v var m=1+9; v var m=“hello”+”world”; v

10、var m=100; v var m=false; 19参考幻灯 运算符运算符 v1算术运算符算术运算符 JavaScript中的算术运算符有单目运算符和双目运算符。 双目运算符： +（加） 、-（减）、 *（乘）、 /（除）、 %（取模） 、|（按位或）、 var n=3; var bol=(mn)?m:n; 23参考幻灯 多目选择多目选择 v基本格式解决多种条件判断 switch (e) case r1: （注意：冒号） . break; case r2: . break; default: . 24参考幻灯 循环语句循环语句for v基本格式 for（初始化；条件；增量） 语句集； 功能

11、：实现条件循环，当条件成立时，执行语句集，否 则跳出循环体 25参考幻灯 循环语句循环语句while v基本格式 while（条件） 语句集； 该语句与For语句一样，当条件为真时，重复循环， 否则退出循环。 *break和continue语句 与C+语言相同，使用break语句使得循环从For或while 中跳出，continue使得跳过循环内剩余的语句而进入下一次 循环。 26参考幻灯 do-while循环循环 v基本格式 do while(条件); 功能：do.while 循环与 while 循环相似，在循环的末 尾检查条件，它总是至少运行一次。 27参考幻灯 forin循环循环 vJS

12、cript 提供了一种特别的循环方式来遍历一个对象的所有用户定义 的属性或者一个数组的所有元素。for.in 循环中的循环计数器是一个 字符串，而不是数字。它包含当前属性的名称或者当前数组元素的下 标。 / 创建具有某些属性的对象 var myObject = new Object(); myO = James; myObject.age = 22; myObject.phone = 555 1234; / 枚举（循环）对象的所有属性 for (prop in myObject) / 显示 The property name is James，等等。 window.aler

13、t(The property + prop + is + myObjectprop); 28参考幻灯 JavaScript函数函数 vFunction 函数名 （参数,变元） 函数体;. Return 表达式; 说明： 当调用函数时,所用变量或字面量均可作为变元传递。 函数由关键字Function定义。 函数名：定义自己函数的名字。 参数表，是传递给函数使用或操作的值，其值可以是常量 ，变量或其 它表达式。 通过指定函数名（实参）来调用一个函数。 必须使用Return将值返回。 函数名对大小写是敏感的 29参考幻灯 JavaScript函数函数 v在函数的定义中，我们看到函数名后有参数表，这些

14、参数变量可能是一 个或几个。那么怎样才能确定参数变量的个数呢？在JavaScript中可通 过arguments .Length来检查参数的个数。 Function function_Name(exp1,exp2,exp3,exp4) Number =function _Name . arguments .length; if (Number1） document.wrile(exp2); if (Number2) document.write(exp3); if(Number3) document.write(exp4); 30参考幻灯 错误处理错误处理 v基本语句 try/throw/ca

15、tch try 语句块 throw new Error(“”); catch(errMsg) alert(errMsg.message); eg: function Age() try var m=age; var n=20; document.write(parseInt(m)+n); /抛出语句 throw new Error(not a valid number); catch (errMsg) alert(errMsg.message); 31参考幻灯 四、内置对象四、内置对象 1.对象化编程对象化编程 2.对象的基本知识对象的基本知识 3.内置对象内置对象 4.String字符串字符

16、串 5.5.ArrayArray数组数组 6.Math 7.7.DateDate日期日期 8.全局对象全局对象 9.自定义构造函数自定义构造函数 10.自定义对象自定义对象 11.11.expandoexpando属性属性 12使用原型对象使用原型对象 13.数组对象数组对象 14.With语句语句 32参考幻灯 对象化编程对象化编程 vJavaScript语言是基于对象的（Object-Based），而不是面向对象的（object-oriented）。 之所以说它是一门基于对象的语言，主要是因为它没有提供象抽象、继承、重载等有关面 向对象语言的许多功能。而是把其它语言所创建的复杂对象统一起来

17、，从而形成一个非常 强大的对象系统。 v虽然JavaScript语言是一门基于对象的，但它还是具有一些面向对象的基本特征。它可以 根据需要创建自己 的对象，从而进一步扩大JavaScript的应用范围，增强编写功能强大的 Web文文件。 33参考幻灯 对象的基本知识对象的基本知识 v对象对象是可以从 JavaScript“势力范围”中划分出来的一小块，可以是一段文字、一幅图片、一个表单 （Form）等等。 v每个对象有它自己的属性属性、方法方法和事件事件。 v对象的属性属性是反映该对象某些特定的性质的，例如：字符串的长度、图像的长宽、文字框（Textbox） 里的文字等等； v对象的方法方法能

18、对该对象做一些事情，例如，表单的“提交”(Submit)，窗口的“滚动”(Scrolling)等等； v而对象的事件事件就能响应发生在对象上的事情，例如提交表单产生表单的“提交事件”，点击连接产生的 “点击事件”。 v不是所有的对象都有以上三个性质，有些没有事件，有些只有属性。引用对象的任一“性质”用“.”这种方法。 34参考幻灯 内置对象内置对象 vMicrosoft Jscript 提供了 11 个内部（或“内置”）对象。它们是Array、 Boolean、Date、Function、Global、Math、Number、Object、 RegExp、Error 以及 String 对象。

19、每一个对象有相关的方法和属性，这 在语言参考中有详细的描述。 35参考幻灯 String字符串字符串 属性属性 vlength 用法：.length；返回该字符串的长度。 v方法方法 vcharAt() 用法：.charAt()；返回该字符串位于第位的单个字 符。注意：字符串中的一个字符是第 0 位的，第二个才是第 1 位的，最后一个字符是第 length - 1 位的。 charCodeAt() 用法：.charCodeAt()；返回该字符串位于第位 的单个字符的 ASCII 码。 fromCharCode() 用法：String.fromCharCode(a, b, c.)；返回一个字符串

20、，该字符串每 个字符的 ASCII 码由 a, b, c. 等来确定。 36参考幻灯 String字符串字符串 vindexOf() 用法：.indexOf(, )；该方法从中查找（如果给出就忽略之前的位置），如 果找到了，就返回它的位置，没有找到就返回“-1”。所有的“位置”都是从零开始的。 vlastIndexOf() 用法：.lastIndexOf(, )；跟 indexOf() 相似，不过是从后边开始找 v。 split() 用法：.split()；返回一个数组，该数组是从中分离开来的，决定了分离的地方，它本身不会包含在所返回的数组中。 例如：1 v这样就定义了一个空数组。以后要添加数

21、组元素，就用： v = .; v注意这里的方括号不是“可以省略”的意思，数组的下标表示方法就是用方括号 括起来。 v如果想在定义数组的时候直接初始化数据，请用： vvar = new Array(, , .); 39参考幻灯 ArrayArray数组数组 v例如，var myArray = new Array(1, 4.5, Hi); 定义了一个数组 myArray，里边 的元素是：myArray0 = 1; myArray1 = 4.5; myArray2 = Hi。 v但是，如果元素列表中只有一个元素，而这个元素又是一个正整数的话，这 将定义一个包含个空元素的数组。 v注意：JavaScr

22、ipt只有一维数组！千万不要用“Array(3,4)”这种愚蠢的方法来 定义 4 x 5 的二维数组，或者用“myArray2,3”这种方法来返回“二维数组” 中的元素。任意“myArray.,3”这种形式的调用其实只返回了“myArray3”。 要使用多维数组，请用这种虚拟法： vvar myArray = new Array(new Array(), new Array(), new Array(), .); v其实这是一个一维数组，里边的每一个元素又是一个数组。调用这个“二维 数组”的元素时：myArray23 = .; 40参考幻灯 ArrayArray数组数组 v属性属性 vleng

23、th 用法：.length；返回：数组的长度，即数组里有多少个元素。它等 于数组里最后一个元素的下标加一。所以，想添加一个元素，只需要： myArraymyArray.length = .。 v方法方法 vjoin() 用法：.join()；返回一个字符串，该字符串把数组中的各个 元素串起来，用置于元素与元素之间。这个方法不影响数组原本的内容。 reverse() 用法：.reverse()；使数组中的元素顺序反过来。如果对数组1, 2, 3使用这个方法，它将使数组变成：3, 2, 1。 slice() 用法：.slice(, )；返回一个数组，该数组是原数组的子集， 始于，终于。如果不给出，

24、则子集一直取到原数组的结尾。 sort() 用法：.sort()；使数组中的元素按照一定的顺序排列。 如果不指定，则按字母顺序排列。在这种情况下，80 是比 9 排得前的。如 果指定，则按所指定的排序方法排序。比较难讲述， 这里只将一些有用的介绍给大家。 41参考幻灯 math vMath 对象，提供对数据的数学计算。 用法为 “Math.”这种格式。 v属性属性 vE 返回常数 e (2.718281828.)。 vLN2 返回 2 的自然对数 (ln 2)。 vLN10 返回 10 的自然对数 (ln 10)。 vLOG2E 返回以 2 为低的 e 的对数 (log2e)。 vLOG10E

25、 返回以 10 为低的 e 的对数 (log10e)。 vPI 返回（3.1415926535.)。 vSQRT1_2 返回 1/2 的平方根。 vSQRT2 返回 2 的平方根。 42参考幻灯 math v方法方法 vabs(x) 返回 x 的绝对值。 acos(x) 返回 x 的反余弦值（余弦值等于 x 的角度），用弧度表示。 asin(x) 返回 x 的反正弦值。 atan(x) 返回 x 的反正切值。 atan2(x, y) 返回复平面内点(x, y)对应的复数的幅角，用弧度表示，其值在 - 到 之间。 ceil(x) 返回大于等于 x 的最小整数。 cos(x) 返回 x 的余弦。

26、exp(x) 返回 e 的 x 次幂 (ex)。 floor(x) 返回小于等于 x 的最大整数。 43参考幻灯 math vlog(x) 返回 x 的自然对数 (ln x)。 max(a, b) 返回 a, b 中较大的数。 min(a, b) 返回 a, b 中较小的数。 pow(n, m) 返回 n 的 m 次幂 (nm)。 random() 返回大于 0 小于 1 的一个随机数。 round(x) 返回 x 四舍五入后的值。 sin(x) 返回 x 的正弦。 sqrt(x) 返回 x 的平方根。 tan(x) 返回 x 的正切。 44参考幻灯 DateDate日期日期 v这个对象可以储

27、存任意一个日期，从 0001 年到 9999 年， 并且可以精确到毫秒数（1/1000 秒）。在内部，日期对象 是一个整数，它是从 1970 年 1 月 1 日零时正开始计算到 日期对象所指的日期的毫秒数。如果所指日期比 1970 年早， 则它是一个负数。所有日期时间，如果不指定时区，都采用 “UTC”（世界时）时区，它与“GMT”（格林威治时间）在数 值上是一样的。 v定义一个日期对象： var d = new Date(); 这个方法使 d 成为日期对象，并且已有初始值：当前时 间。 45参考幻灯 DateDate日期日期 v如果要自定初始值，可以用： var d = new Date(9

28、9, 10, 1); /99 年 10 月 1 日 var d = new Date(Oct 1, 1999); /99 年 10 月 1 日 等等方法。 方法 以下有很多“g/setUTCXXX”这样的方法，它表示既有“getXXX”方法，又有 “setXXX”方法。“get”是获得某个数值，而“set”是设定某个数值。如果带有 “UTC”字母，则表示获得/设定的数值是基于 UTC 时间的，没有则表示基于本地 时间或浏览期默认时间的。 46参考幻灯 DateDate日期日期 vg/setUTCFullYear() 返回/设置年份，用四位数表示。如果使用 “x.setUTCFullYear(9

29、9)”，则年份被设定为 0099 年。 vg/setUTCYear() 返回/设置年份，用两位数表示。设定的时候浏览器自 动加上“19”开头，故使用“x.setUTCYear(00)”把年份设定为 1900 年。 vg/setUTCMonth() 返回/设置月份。 vg/setUTCDate() 返回/设置日期。 vg/setUTCDay() 返回/设置星期，0 表示星期天。 vg/setUTCHours() 返回/设置小时数，24小时制。 vg/setUTCMinutes() 返回/设置分钟数。 vg/setUTCSeconds() 返回/设置秒钟数。 vg/setUTCMillisecon

30、ds() 返回/设置毫秒数。 47参考幻灯 DateDate日期日期 vg/setTime() 返回/设置时间，该时间就是日期对象的内部处理方法：从 1970 年 1 月 1 日零时正开始计算到日期对象所指的日期的毫秒数。如果要使某日期对象 所指的时间推迟 1 小时，就用：“x.setTime(x.getTime() + 60 * 60 * 1000);” （一小时 60 分，一分 60 秒，一秒 1000 毫秒）。 vgetTimezoneOffset() 返回日期对象采用的时区与格林威治时间所差的分钟数。 在格林威治东方的市区，该值为负，例如：中国时区（GMT+0800）返回“- 480”

31、。 vtoString() 返回一个字符串，描述日期对象所指的日期。这个字符串的格式类似 于：“Fri Jul 21 15:43:46 UTC+0800 2000”。 vtoLocaleString() 返回一个字符串，描述日期对象所指的日期，用本地时间表示 格式。如：“2000-07-21 15:43:46”。 vtoGMTString() 返回一个字符串，描述日期对象所指的日期，用 GMT 格式。 vtoUTCString() 返回一个字符串，描述日期对象所指的日期，用 UTC 格式。 vparse() 用法：Date.parse()；返回该日期对象的内部表达方式。 48参考幻灯 全局对象

32、全局对象 v全局对象从不现形，它可以说是虚拟出来的，目的在于把全局函数“对象化”。在 Microsoft JScript 语 言参考中，它叫做“Global 对象”，但是引用它的方法和属性从来不用“Global.xxx”（况且这样做会 出错），而直接用“xxx”。 v方法方法 veval() 把括号内的字符串当作标准语句或表达式来运行。 isFinite() 如果括号内的数字是“有限”的（介于 Number.MIN_VALUE 和 Number.MAX_VALUE 之间） 就返回 true；否则返回 false。 isNaN() 如果括号内的值是“NaN”则返回 true 否则返回 false

33、。 parseInt() 返回把括号内的内容转换成整数之后的值。如果括号内是字符串，则字符串开头的数字部分 被转换成整数，如果以字母开头，则返回“NaN”。 49参考幻灯 全局对象全局对象 vparseFloat() 返回把括号内的字符串转换成浮点数之后的值，字符串开头的数字部分被转 换成浮点数，如果以字母开头，则返回“NaN”。 toString() 用法：.toString()；把对象转换成字符串。如果在括号中指定一个数值， 则转换过程中所有数值转换成特定进制。 escape() 返回括号中的字符串经过编码后的新字符串。该编码应用于 URL，也就是把空 格写成“%20”这种格式。“+”不被

34、编码，如果要“+”也被编码，请用：escape(., 1)。 unescape() 是 escape() 的反过程。解编括号中字符串成为一般字符串。 50参考幻灯 自定义构造函数自定义构造函数 v我们已经知道，Array()，Image()等构造函数能让我们构造一个变量。 其实我们自己也可以写自己的构造函数。自定义构造函数也是用 function。在 function 里边用 this 来定义属性。 vfunction () . this. = ; . v然后，用 new 构造函数关键字来构造变量： vvar = new (); v构造变量以后，成为一个对象，它有它自己的属性用 this 在

35、function 里设定的属性。 51参考幻灯 自定义构造函数自定义构造函数 例如，下面的示例为 pasta 对象定义了构造函数。注意 this 关键字的使用，它指向当前对象。 / pasta 是有四个参数的构造器。 function pasta(grain, width, shape, hasEgg) this.grain = grain; / 是用什么粮食做的？ this.width = width; / 多宽？（数值） this.shape = shape; / 横截面形状？（字符串） this.hasEgg = hasEgg; / 是否加蛋黄？（boolean） this.toStri

36、ng = pastaToString; / 这里添加 toString 方法（如下定义）。 / 注意在函数的名称后没有加圆括号； / 这不是一个函数调用，而是对函数自身的引用。 52参考幻灯 自定义构造函数自定义构造函数 / 实际的用来显示 past 对象内容的函数。 function pastaToString() / 返回对象的属性。 return Grain: + this.grain + n + Width: + this.width + n + Shape: + this.shape + n + Egg?: + Boolean(this.hasEgg); 53参考幻灯 自定义对象自定

37、义对象 function Student(name) = name; this.getName = getName; function getName() return ; function Button1_onclick() var s = new Student(lijie, 20, asdad, 13971212); alert(s.getName(); alert(); 54参考幻灯 使用自己的对象使用自己的对象 定义了对象构造器后，用 new 运算符创建对象实例。 var spaghetti = new pasta(wheat, 0.

38、2, circle, true); / 将调用 toString() 并显示 spaghetti 对象 的属性。 window.alert(spaghetti); 55参考幻灯 expandoexpando属性属性 可以给对象实例添加属性(expando属性) 以改变该实例，但是用相同的构 造器生成的其他对象定义中并不包括这些属性，而且除非你特意添加这 些属性那么在其他实例中并不显示出来。 spaghetti.color = pale straw; spaghetti.drycook = 7; spaghetti.freshcook = 0.5; var chowFun = new pasta

39、(rice, 3, flat, false); / chowFun 对象或其他现有的 pasta 对象 / 都没有添加到 spaghetti 对象的三个新属性。 56参考幻灯 使用原型对象使用原型对象 v如果要将对象所有实例的附加属性显示出来，必须将它们添加到构造函 数或构造器原型对象中。 v例如： 将属性foodgroup加到 pasta 原型对象 中，这样 pasta 对 象的所有实例都可以有该属性， 包括那些已经生成的实例。 totype.foodgroup = carbohydrates v现在 spaghetti.foodgroup、chowFun.foodgrou

40、p，等等 均包含值 “carbohydrates”。 57参考幻灯 使用原型对象使用原型对象 例如，如果想要能够删除字符串的前后空格（与 VBScript 的 Trim 函数类似），就 可以给 String 原型对象创建自己的方法。 Stotype.trim = function() / 用正则表达式将前后空格用空字符串替代。 return this.replace(/(s*)|(s*$)/g, ); var s = leading and trailing spaces ; / 显示 leading and trailing spaces (35) window.alert

41、(s + ( + s.length + ); / 删除前后空格 s = s.trim(); / 显示leading and trailing spaces (27) window.alert(s + ( + s.length + ); 58参考幻灯 数组和对象数组和对象 通常，使用点运算符“.”访问对象的属性。例如， myObject.aProperty 也可以用索引运算符“”访问对象的属性。在这里，是把对象看作一个关联 数组。关联数组是一种数据结构，它可以动态地将任意的数据的值与任 意的字符串相关联。例如 myObjectnot a valid identifier= This is the

42、 property value; myObject100 =100; 索引“” 字符串文字 能被作为数据处理 在运行之前并不知道属性名称时，这个差异会有用（比如基于用户输入构 造对象时）。要想从一个关联数组提取所有的属性，必须用 for in 循 环。 59参考幻灯 数组和对象数组和对象 由于所有的数组也是对象，也支持expando属性。请注意，虽然如此，添加 的属性并不以任何方式与 length 属性相交互。例如： / 三个元素的数组 var myArray = new Array(3); myArray0 = Hello; myArray1 = 42; myArray2 = new Dat

43、e(2000, 1, 1); window.alert(myArray.length);/ 显示数组的长度 3 myArray.expando = JScript!;/ 添加某些 expando 属性 myArrayanother Expando = Windows; / 仍然显示 3，因为两个 expando 属性，并不影响长度。 window.alert(myArray.length); 60参考幻灯 with with 语句语句 为一个或一组语句指定默认对象。 用法：with () ; with 语句通常用来缩短特定情形下必须写的代码量。在下面 的例子中，请注意 Math 的重复使用：

44、x = Math.cos(3 * Math.PI) + Math.sin(Math.LN10); y = Math.tan(14 * Math.E); 当使用 with 语句时，代码变得更短且更易读： with (Math) x = cos(3 * PI) + sin(LN10); y = tan(14 * E); 61参考幻灯 五五.对象与对象与DOM v1、宿主对象宿主对象 v2 2、浏览器对象浏览器对象(Navigator) v3、屏幕对象屏幕对象(screen) v4、窗口对象窗口对象(Windows) v5、位置对象位置对象(Location) v6、历史对象历史对象(History

45、) v7、文档对象文档对象(Document) v8、文档文档DOM v9、DOM结构图结构图 v10、添加节点添加节点 v11、删除节点删除节点 v12、插入节点插入节点 v13、替换节点替换节点 62参考幻灯 宿主对象宿主对象 使用浏览器的内部对象系统（宿主对象）, 可实现与HTML文档进行交互。它的作用是将 相关元素组织包装起来，提供给程序设计人员使用，从而减轻编程人的劳动，提高设 计Web页面的能力。 浏览器对象(Navigator) 提供有关浏览器的信息 屏幕对象(screen) 反映了当前用户的屏幕设置 窗口对象(Windows) Window对象处于对象层次的最顶端，它提供了处理

46、Navigator窗口的方法和属性。 位置对象(Location) Location对象提供了与当前打开的URL一起工作的方法和属性，它是一个静态的对 象。 历史对象(History) History对象提供了与历史清单有关的信息。 文档对象(Document) document对象包含了与文档元素(elements)一起工作的对象，它将这些元素封装 起来供编程人员使用。 63参考幻灯 浏览器对象浏览器对象(Navigator) v属性： vappCodeName：返回浏览器的代码名，IE返回Mozilla vappName：返回浏览器名，IE返回“Microsoft Internet Exp

47、lorer” vappVersion：返回浏览器版本，包括版本号、语言、操作平台等 vlanguage：返回浏览器编译语言 vplatform：返回操作平台 vNavigator对象的plugin属性以数组表示已安装的外挂程序 vdescription 外挂程序模块的描述 vfilename 外挂程序模块的文件名 vlength 外挂程序模块的个数 vname 外挂程序模块的名称 64参考幻灯 浏览器对象浏览器对象(Navigator) vEg: v vvar len = navigator.plugins.length; vwith (document) v vwrite (你的浏览器共支持

48、 + len + 种外挂插件：); vwrite () vwrite (外挂插件清单) vwrite ( 名称描述文件名) vfor (var i=0; ilen; i+) vwrite( + i + v + + v + navigator.pluginsi.description + v + navigator.pluginsi.filename); v v 65参考幻灯 屏幕对象屏幕对象(screen) v属性 vscreen对象屏幕对象，描述屏幕的显示及颜色属性 vavailHeight 屏幕区域的可用高度 vavailWidth 屏幕区域

49、的可用宽度 vcolorDepth 颜色深度 256/8 16/16 32M/32 vheight 屏幕区域的实际高度 vwidth 屏幕区域的实际宽度 66参考幻灯 屏幕对象屏幕对象(screen) vEg： v vif ( screen.width 800 | screen.colorDepth 8 ) v vvar msg = 本网站最佳浏览模式为 800 * 600 * 256; valert(msg); v v 67参考幻灯 窗口对象窗口对象(Windows) v属性： vname：窗口名称 vstatus：改变状态栏的信息 vself：当前窗口 vtop：最顶端的框架页 vpare

50、nt：窗口所属的框架页 68参考幻灯 窗口对象窗口对象(Windows) vEg： v vfunction cfm() v v vif (confirm(确定离开么?) v/关闭当前窗口,下面两个方法都可以 v/window.close(); vself.close(); velse vreturn false v v 69参考幻灯 窗口对象窗口对象(Windows) vwindow对象的open()方法：打开一个新窗口 v参数： valwaysLowered 是否将窗口显示的堆栈后推一层 valwaysRaised 是否将窗口显示的堆栈上推一层 vdependent 是否将该窗口与当前窗口产

51、生依存关系 vfullscreen 是否满屏显示 vdirectories 是否显示连接工具栏 vlocation 是否显示网址工具栏 vmenubar 是否显示菜单工具栏 vscrollbars 是否显示滚动条 70参考幻灯 窗口对象窗口对象(Windows) v status 是否显示状态栏 vtitlebar 是否显示标题栏 vtoolbar 是否显示标准工具栏 vresizable 是否可以改变窗口的大小 vscreenX 窗口左边界距离 vscreenY 窗口上边界距离 vtop 窗口上边界 vwidth 窗口宽度 vheight 窗口高度 vleft 窗口左边界 vouterHei

52、ght 窗口外边界的高度 vpersonalbar 是否显示个人工具栏 71参考幻灯 位置对象位置对象(Location) v属性： vhash 锚点名称 vhost 主机名称 vhostname host:port vhref 完整的URL字符串 vpathname 路径 vport 端口 vprotocol 协议 vsearch 查询信息 v方法： vreload() 重新加载 vreplace() 用指定的网页取代当前网页，并且当按下浏览器的 “后退”键时将不能返回原先的网页 72参考幻灯 位置对象位置对象(Location) vEg: v v v 73参考幻灯 历史对象历史对象(His

53、tory) v属性： vcurrent 当前历史记录的网址 vlength 存储在记录清单中的网址数目 vnext 下一个历史记录的网址 vprevious 上一个历史记录的网址 v方法： vback() 回到上一个历史记录中的网址（和按下“后退”键等效） vforward() 回到下一个历史记录中的网址 （和按下“前进”键等效） vgo(整数或URL) 前往历史记录中的网址（如果整数x0，则前进x个地 址， 如果整数x0，则后退x个地址，如果x=0，则刷新当前页面） 74参考幻灯 历史对象历史对象(History) vEg: v后退两页 v后退一页 v前进一页 v前进两页 75参考幻灯 文档

54、对象文档对象(Document) v属性： vlinkColor 设置超链接的颜色 valinkColor 作用中的超链接的颜色 vvlinkColor 链接的超链接颜色 vlinks 以数组索引值表示所有超链接 vURL 该文件的网址 vanchors 以数组索引值表示所有锚点 vbgColor 背景颜色 vfgColor 前景颜色 vclasses 文件中的class属性 vcookie 设置cookie v domain 指定服务器的域名 v formName 以表单名称表示所有表单 76参考幻灯 文档对象文档对象(Document) v属性： v forms 以数组索引值表示所有表单

55、v images 以数组索引值表示所有图像 v layers 以数组索引值表示所有layer v embeds 文件中的plug-in v applets 以数组索引值表示所有applet v plugins 以数组索引值表示所有插件程序 v referrer 代表当前打开文件的网页的网址 v tags 指出HTML标签的样式 v title 该文档的标题 v width 该文件的宽度（px） v lastModified 文件最后修改时间 77参考幻灯 文档对象文档对象(Document) v方法： vopen() 打开文档 vclose() 关闭文档，停止写入数据 vclear() 清空文

56、档 vwrite() 向文档写入数据 vwriteln() 向文档写入数据并换行 78参考幻灯 文档文档DOM vDOM(Document Object Model)文档对象模型，规范于2000年11月，尽管这个规 范已经发布了好多年，但是当期使用的许多浏览器任然只具有不完整的DOM-2 的支持，好消息是，当今的大多数网上冲浪者都使用IE6+,Firefox或Safari，而这 些浏览器都能很好的运行这些脚本。 v我们将Javascript称为”组合式（snap-together）语言“，因为可以将对象，属 性和方法组合在一起来构建出javascript应用程序。还有一种看待HTML页面的方

57、式：将它看做由节点（node）组成的树结构。 79参考幻灯 DOM结构图结构图 v v vMy page v v v vThis is text on my page v html bodyhead ptitle “My page” “This is text on my page” texttext 80参考幻灯 添加节点添加节点 vEg： v v v v v v v v v v v v 81参考幻灯 添加节点添加节点 vwindow.onload=initAll; vfunction initAll() v document.getElementsByTagName(form)0.onsu

58、bmit=function()return addNode(); v vfunction addNode() vvar inText =document.getElementById(textArea).value; vvar newText=document.createTextNode(inText) ; vvar newGraf=document.createElement(“p”); v newGraf.appendChild(newText); vvar docBody=document.getElementsByTagName(body)0; v docBody.appendChi

59、ld(newGraf); vreturn false; v 82参考幻灯 添加节点添加节点 vvar newText=document.createTextNode(inText) ; v/使用createTextNode()方法创建一个新的文本节点（名为 newText），它将包含在textArea中找到的文本。 vvar newGraf=document.createElement(“p”); v/createElement()方法使用创建一个新的元素节点，()里的 内容可以是任何HTML容器。 vnewGraf.size=“15”/给属性 83参考幻灯 添加节点添加节点 vnewGraf

60、.appendChild(newText); v/将新文本添加到新段落中，我们调用appendChild(). vvar docBody=document.getElementsByTagName(body)0; v/为了把节点添加到文档的body中，需要查明body的位置。这个 getElementsByTagName()方法调用会给出页面上的每个body标签。如果页面符 合标准，那么应该只有一个body标签。0属性是第一个body标签，我们将它存 储在docBody中。 vdocBody.appendChild(newGraf); v/将其追加的docbody中。 84参考幻灯 删除节点删