JavaScript基础入门教程（完整版）

1、主要内容一一 了解了解JavaScript二二 JavaScript入门入门三三 语言基础语言基础四四 内置对象内置对象五五 对象与对象与DOM六六 图像处理图像处理七七 框架框架八八 表单与事件处理表单与事件处理一、了解一、了解JavaScript 1.了解了解JavaScript 2. JavaScript与与Java 3.JavaScript与与Java不同点不同点 4.JavaScript工作流程工作流程 5.JavaScript可以做什么可以做什么 6.JavaScript不可以做什么不可以做什么了解了解JavaScriptv是一种基于对象对象和事件驱动事件驱动并具有安全性的解释性解

2、释性语言，其目的就是增强Web客户交互。弥补了HTML的缺陷。页面页面标准行为表示 CSS结构 HTMLJavaScript与与Javav处于两家不同的公司，属于两种完全不同的产品。vJava是SUN公司推出的新一代面向对象的程序设计语言，特别适合Internet应用程序开发，前生是Oak语言。vJavaScript是Netscape公司的产品，是一种可嵌入到WEB当中的基于对象和事件驱动的解释性语言，前生是LiveScript。JavaScript与与Java不同点不同点v基于对象和面向对象 v解释和编译 v强变量和弱变量 v代码格式不一样v嵌入方式不一样 v静态联编和动态联编 （对象引用在

3、运行时进行检查，对象引用必须在编译时的进行）JavaScirpt可以做什么可以做什么v使网页更具有交互性，给用户提供更好，更令人兴奋的体验。v确保用户在表单中输入有效的信息，可以节省你的业务开支。v即时创建HTML页面。v还可以处理表单，设置cookie，创建基于Web的应用程序。JavaScirpt不可以做什么不可以做什么v不允许读写客户机器上的文件。v不允许写服务器上的文件。v不能关闭不是由它打开的窗口。v不能从来自另一个服务器的已经打开的网页中读取信息。二二.JavaScript入门入门1.脚本写在哪里？脚本写在哪里？2.第一个第一个JavaScript程序程序3.在脚本中写注释在脚本中

4、写注释4.弹出对话框弹出对话框5.关闭一个浏览器窗口关闭一个浏览器窗口 脚本写在哪里？脚本写在哪里？ . . HTML文档文档 function HELLO() . src=第一个第一个JavaScript程序程序vvvvdocument.write(Hello World!);vvv在脚本中写注释在脚本中写注释v两种注释示例 /* */ 与 /v/*This is an example of a long JavaScript comment.Note the characters at the beginning ending of the comment.*/vFunction Emg(

5、) / This is writeMessage. v弹出对话框弹出对话框v三种对话框三种对话框 function DialogBox() /alert(welcome!); 一个按钮/ confirm(can you speak english?);两个按钮prompt (“how old are you?”,”23”);有默认回答，两个按钮关闭一个浏览器窗口关闭一个浏览器窗口v两种关闭方式 标签关闭标签关闭与按钮关闭按钮关闭关闭窗口 function NVGClose() window.close(); 三三.语言基础语言基础1.基本数据类型基本数据类型 常量常量2.基本数据类型基本数据类

6、型变量变量3.转义字符转义字符4.表达式表达式5.运算符运算符6.控制语句控制语句7.JavaScript函数函数8.错误处理错误处理基本数据类型基本数据类型 常量常量 v整型整型 只能储存整数。可以是正整数、0、负整数，可以是十进制、八进制、十六进制。八进制数的表示方法是在数字前加“0”，如“0123”表示八进制数“123”。十六进制则是加“0 x”：“0 xEF”表示十六进制数“EF”。v浮点型浮点型 即“实型”，能储存小数。有资料显示，某些平台对浮点型变量的支持不稳定。没有需要就不要用浮点型。v字符串型字符串型 是用引号“” “”、“ ”包起来的零个至多个字符，而且单双引号可嵌套使用。v

7、布尔型布尔型 常用于判断，只有两个值可选：true（表“真”）和 false（表“假”）。true 和 false 是 JavaScript 的保留字。它们属于“常数”。基本数据类型基本数据类型变量变量v变量的命名变量的命名 变量的命名有以下要求： 1.只包含字母、数字和/或下划线；2.要以字母开头；3.不能太长；4.不能使用JavaScript中的关键字作为变量； 变量是区分大小写的，例如，variable 和 Variable 是两个不同的变量v变量需要声明变量需要声明 没有声明的变量不能使用，否则会出错：“未定义”。声明变量可以用： var = v变量作用域变量作用域。全局变量是定义在所

8、有函数体之外，其作用范围是整个函数；而局部变量是定义在函数体之内，只对其该函数是可见的，而对其它函数则是不可见的。 转义字符转义字符v由于一些字符在屏幕上不能显示，或者 JavaScript 语法上已经有了特殊用途，在要用这些字符时，就要使用“转义字符”。 v转义字符用斜杠“”开头： 单引号、“ 双引号、n 换行符、r 回车。于是，使用转义字符，就可以做到引号多重嵌套：Micro 说：”这里是“JavaScript 教程” 。表达式表达式v表达式表达式在定义完变量后，就可以对它们进行赋值、改变、计算等一系列操作，这一过程通常又叫称一个叫表达式来完成，可以说它是变量、常量、布尔及运算符的集合，因

9、此表达式可以分为算术表述式、字串表达式、赋值表达式以及布尔表达式等。v var m=1+9;v var m=“hello”+”world”;v var m=100;v var m=false;运算符运算符 v1算术运算符算术运算符JavaScript中的算术运算符有单目运算符和双目运算符。双目运算符： +（加） 、-（减）、 *（乘）、 /（除）、 %（取模） 、|（按位或）、&(按位与)、（右移）、 （右移，零填充）。单目运算符： -（取反）、（取补）、+（递加1）、-（递减1）。v2比较运算符比较运算符比较运算符它的基本操作过程是，首先对它的操作数进行比较，然后再返回一个true或Fals

10、e值，有个比较运算符:(大于)、=(大于等于)、=(等于)、!=(不等于)。v3布尔逻辑运算符布尔逻辑运算符!（取反)、&=（与之后赋值）、 &（逻辑与）、 |=（或之后赋值）、 |（逻辑或）、 =（异或之后赋值）、 （逻辑异或）、 ?:（三目操作符）、|（或）、=(等于)、|=(不等于)。控制语句控制语句v第一种是选择结构第一种是选择结构1.单一选择结构（if） 2.二路选择结构（if/else）3.内联三元运算符 ?: 4.多路选择结构（switch）v第二种类型的程序控制结构是循环结构。第二种类型的程序控制结构是循环结构。1.由计数器控制的循环（for） 2.在循环的开头测试表达式（wh

11、ile）3.在循环的末尾测试表达式（do/while） 4.对对象的每个属性都进行操作（for/in） 条件语句条件语句v基本格式if（表述式）语句段；.else语句段；.功能：若表达式为true，则执行语句段；否则执行语句段。 三元运算符三元运算符v基本格式 条件表达式“?:”，当为真时执行 ，否则执行 eg： var m=5; var n=3; var bol=(mn)?m:n;多目选择多目选择v基本格式解决多种条件判断 switch (e) case r1: （注意：冒号） . break; case r2: . break; default: . 循环语句循环语句forv基本格式for

12、（初始化；条件；增量）语句集； 功能：实现条件循环，当条件成立时，执行语句集，否则跳出循环体 循环语句循环语句whilev基本格式while（条件）语句集；该语句与For语句一样，当条件为真时，重复循环，否则退出循环。 *break和continue语句与C+语言相同，使用break语句使得循环从For或while中跳出，continue使得跳过循环内剩余的语句而进入下一次循环。 do-while循环循环v基本格式 do while(条件); 功能：do.while 循环与 while 循环相似，在循环的末尾检查条件，它总是至少运行一次。forin循环循环vJScript 提供了一种特别的循环

13、方式来遍历一个对象的所有用户定义的属性或者一个数组的所有元素。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.alert(The property + prop + is

14、 + myObjectprop);JavaScript函数函数vFunction 函数名 （参数,变元）函数体;.Return 表达式;说明：当调用函数时,所用变量或字面量均可作为变元传递。函数由关键字Function定义。函数名：定义自己函数的名字。参数表，是传递给函数使用或操作的值，其值可以是常量 ，变量或其它表达式。通过指定函数名（实参）来调用一个函数。必须使用Return将值返回。函数名对大小写是敏感的 JavaScript函数函数v在函数的定义中，我们看到函数名后有参数表，这些参数变量可能是一个或几个。那么怎样才能确定参数变量的个数呢？在JavaScript中可通过arguments

15、 .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);错误处理错误处理v基本语句 try/throw/catchtry 语句块 throw new Error(“”); catch(errMsg) alert(errMsg.message);eg:

16、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); 四、内置对象四、内置对象1.对象化编程对象化编程2.对象的基本知识对象的基本知识3.内置对象内置对象4.String字符串字符串5.5.ArrayArray数组数组6.Math7.7.DateDate日期日期8.全局对象全局对象9.自定义构造函数自定义构造函数10.自定义对象自定义对象11.11

17、.expandoexpando属性属性12使用原型对象使用原型对象13.数组对象数组对象14.With语句语句对象化编程对象化编程vJavaScript语言是基于对象的（Object-Based），而不是面向对象的（object-oriented）。之所以说它是一门基于对象的语言，主要是因为它没有提供象抽象、继承、重载等有关面向对象语言的许多功能。而是把其它语言所创建的复杂对象统一起来，从而形成一个非常强大的对象系统。v虽然JavaScript语言是一门基于对象的，但它还是具有一些面向对象的基本特征。它可以根据需要创建自己 的对象，从而进一步扩大JavaScript的应用范围，增强编写功能强大

18、的Web文文件。对象的基本知识对象的基本知识v对象对象是可以从 JavaScript“势力范围”中划分出来的一小块，可以是一段文字、一幅图片、一个表单（Form）等等。v每个对象有它自己的属性属性、方法方法和事件事件。v对象的属性属性是反映该对象某些特定的性质的，例如：字符串的长度、图像的长宽、文字框（Textbox）里的文字等等；v对象的方法方法能对该对象做一些事情，例如，表单的“提交”(Submit)，窗口的“滚动”(Scrolling)等等；v而对象的事件事件就能响应发生在对象上的事情，例如提交表单产生表单的“提交事件”，点击连接产生的“点击事件”。v不是所有的对象都有以上三个性质，有些

19、没有事件，有些只有属性。引用对象的任一“性质”用“.”这种方法。内置对象内置对象vMicrosoft Jscript 提供了 11 个内部（或“内置”）对象。它们是Array、Boolean、Date、Function、Global、Math、Number、Object、RegExp、Error 以及 String 对象。每一个对象有相关的方法和属性，这在语言参考中有详细的描述。String字符串字符串属性属性vlength 用法：.length；返回该字符串的长度。v方法方法vcharAt() 用法：.charAt()；返回该字符串位于第位的单个字符。注意：字符串中的一个字符是第 0 位的，

20、第二个才是第 1 位的，最后一个字符是第 length - 1 位的。charCodeAt() 用法：.charCodeAt()；返回该字符串位于第位的单个字符的 ASCII 码。fromCharCode() 用法：String.fromCharCode(a, b, c.)；返回一个字符串，该字符串每个字符的 ASCII 码由 a, b, c. 等来确定。String字符串字符串vindexOf() 用法：.indexOf(, )；该方法从中查找（如果给出就忽略之前的位置），如果找到了，就返回它的位置，没有找到就返回“-1”。所有的“位置”都是从零开始的。vlastIndexOf() 用法：.

21、lastIndexOf(, )；跟 indexOf() 相似，不过是从后边开始找v。split() 用法：.split()；返回一个数组，该数组是从中分离开来的，决定了分离的地方，它本身不会包含在所返回的数组中。例如：1&2&345&678.split(&)返回数组：1,2,345,678。关于数组，我们等一下就讨论。String字符串字符串vsubstring() 用法：.substring(, )；返回原字符串的子字符串，该字符串是原字符串从位置到位置的前一位置的一段。 - = 返回字符串的长度（length）。如果没有指定或指定得超过字符串长度，则子字符串从位置一直取到原字符串尾。如果所

22、指定的位置不能返回字符串，则返回空字符串。vsubstr() 用法：.substr(, )；返回原字符串的子字符串，该字符串是原字符串从位置开始，长度为的一段。如果没有指定或指定得超过字符串长度，则子字符串从位置一直取到原字符串尾。如果所指定的位置不能返回字符串，则返回空字符串。vtoLowerCase() 用法：.toLowerCase()；返回把原字符串所有大写字母都变成小写的字符串。vtoUpperCase() 用法：.toUpperCase()；返回把原字符串所有小写字母都变成大写的字符串。ArrayArray数组数组v数组的定义方法：vvar = new Array();v这样就定义

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

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

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

26、t()；使数组中的元素按照一定的顺序排列。如果不指定，则按字母顺序排列。在这种情况下，80 是比 9 排得前的。如果指定，则按所指定的排序方法排序。比较难讲述，这里只将一些有用的介绍给大家。mathvMath 对象，提供对数据的数学计算。 用法为 “Math.”这种格式。v属性属性vE 返回常数 e (2.718281828.)。vLN2 返回 2 的自然对数 (ln 2)。vLN10 返回 10 的自然对数 (ln 10)。vLOG2E 返回以 2 为低的 e 的对数 (log2e)。vLOG10E 返回以 10 为低的 e 的对数 (log10e)。vPI 返回（3.1415926535.

27、)。vSQRT1_2 返回 1/2 的平方根。vSQRT2 返回 2 的平方根。mathv方法方法vabs(x) 返回 x 的绝对值。acos(x) 返回 x 的反余弦值（余弦值等于 x 的角度），用弧度表示。asin(x) 返回 x 的反正弦值。atan(x) 返回 x 的反正切值。atan2(x, y) 返回复平面内点(x, y)对应的复数的幅角，用弧度表示，其值在 - 到 之间。ceil(x) 返回大于等于 x 的最小整数。cos(x) 返回 x 的余弦。exp(x) 返回 e 的 x 次幂 (ex)。floor(x) 返回小于等于 x 的最大整数。mathvlog(x) 返回 x 的自

28、然对数 (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 的正切。 DateDate日期日期v这个对象可以储存任意一个日期，从 0001 年到 9999 年，并且可以精确到毫秒数（1/1000 秒）。在内部，日期对象是一个整数，它是从 1970 年 1 月 1 日零时正开始计算到日期对象所指

29、的日期的毫秒数。如果所指日期比 1970 年早，则它是一个负数。所有日期时间，如果不指定时区，都采用“UTC”（世界时）时区，它与“GMT”（格林威治时间）在数值上是一样的。v定义一个日期对象： var d = new Date(); 这个方法使 d 成为日期对象，并且已有初始值：当前时间。DateDate日期日期v如果要自定初始值，可以用： var d = new Date(99, 10, 1); /99 年 10 月 1 日 var d = new Date(Oct 1, 1999); /99 年 10 月 1 日 等等方法。 方法 以下有很多“g/setUTCXXX”这样的方法，它表示既

30、有“getXXX”方法，又有“setXXX”方法。“get”是获得某个数值，而“set”是设定某个数值。如果带有“UTC”字母，则表示获得/设定的数值是基于 UTC 时间的，没有则表示基于本地时间或浏览期默认时间的。DateDate日期日期vg/setUTCFullYear() 返回/设置年份，用四位数表示。如果使用 “x.setUTCFullYear(99)”，则年份被设定为 0099 年。vg/setUTCYear() 返回/设置年份，用两位数表示。设定的时候浏览器自动加上“19”开头，故使用“x.setUTCYear(00)”把年份设定为 1900 年。vg/setUTCMonth()

31、返回/设置月份。vg/setUTCDate() 返回/设置日期。vg/setUTCDay() 返回/设置星期，0 表示星期天。vg/setUTCHours() 返回/设置小时数，24小时制。vg/setUTCMinutes() 返回/设置分钟数。vg/setUTCSeconds() 返回/设置秒钟数。vg/setUTCMilliseconds() 返回/设置毫秒数。DateDate日期日期vg/setTime() 返回/设置时间，该时间就是日期对象的内部处理方法：从 1970 年 1 月 1 日零时正开始计算到日期对象所指的日期的毫秒数。如果要使某日期对象所指的时间推迟 1 小时，就用：“x.

32、setTime(x.getTime() + 60 * 60 * 1000);”（一小时 60 分，一分 60 秒，一秒 1000 毫秒）。vgetTimezoneOffset() 返回日期对象采用的时区与格林威治时间所差的分钟数。在格林威治东方的市区，该值为负，例如：中国时区（GMT+0800）返回“-480”。vtoString() 返回一个字符串，描述日期对象所指的日期。这个字符串的格式类似于：“Fri Jul 21 15:43:46 UTC+0800 2000”。vtoLocaleString() 返回一个字符串，描述日期对象所指的日期，用本地时间表示格式。如：“2000-07-21 1

33、5:43:46”。vtoGMTString() 返回一个字符串，描述日期对象所指的日期，用 GMT 格式。vtoUTCString() 返回一个字符串，描述日期对象所指的日期，用 UTC 格式。vparse() 用法：Date.parse()；返回该日期对象的内部表达方式。 全局对象全局对象 v全局对象从不现形，它可以说是虚拟出来的，目的在于把全局函数“对象化”。在 Microsoft JScript 语言参考中，它叫做“Global 对象”，但是引用它的方法和属性从来不用“Global.xxx”（况且这样做会出错），而直接用“xxx”。 v方法方法veval() 把括号内的字符串当作标准语句

34、或表达式来运行。isFinite() 如果括号内的数字是“有限”的（介于 Number.MIN_VALUE 和 Number.MAX_VALUE 之间）就返回 true；否则返回 false。isNaN() 如果括号内的值是“NaN”则返回 true 否则返回 false。parseInt() 返回把括号内的内容转换成整数之后的值。如果括号内是字符串，则字符串开头的数字部分被转换成整数，如果以字母开头，则返回“NaN”。全局对象全局对象vparseFloat() 返回把括号内的字符串转换成浮点数之后的值，字符串开头的数字部分被转换成浮点数，如果以字母开头，则返回“NaN”。toString()

35、 用法：.toString()；把对象转换成字符串。如果在括号中指定一个数值，则转换过程中所有数值转换成特定进制。escape() 返回括号中的字符串经过编码后的新字符串。该编码应用于 URL，也就是把空格写成“%20”这种格式。“+”不被编码，如果要“+”也被编码，请用：escape(., 1)。unescape() 是 escape() 的反过程。解编括号中字符串成为一般字符串。 自定义构造函数自定义构造函数v我们已经知道，Array()，Image()等构造函数能让我们构造一个变量。其实我们自己也可以写自己的构造函数。自定义构造函数也是用 function。在 function 里边用

36、this 来定义属性。vfunction () . this. = ; .v然后，用 new 构造函数关键字来构造变量：vvar = new ();v构造变量以后，成为一个对象，它有它自己的属性用 this 在 function 里设定的属性。自定义构造函数自定义构造函数例如，下面的示例为 pasta 对象定义了构造函数。注意 this 关键字的使用，它指向当前对象。/ pasta 是有四个参数的构造器。function pasta(grain, width, shape, hasEgg) this.grain = grain; / 是用什么粮食做的？ this.width = width;

37、/ 多宽？（数值） this.shape = shape; / 横截面形状？（字符串） this.hasEgg = hasEgg; / 是否加蛋黄？（boolean） this.toString = pastaToString; / 这里添加 toString 方法（如下定义）。 / 注意在函数的名称后没有加圆括号； / 这不是一个函数调用，而是对函数自身的引用。自定义构造函数自定义构造函数/ 实际的用来显示 past 对象内容的函数。 function pastaToString() / 返回对象的属性。 return Grain: + this.grain + n + Width: + t

38、his.width + n + Shape: + this.shape + n + Egg?: + Boolean(this.hasEgg);自定义对象自定义对象 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(); 使用自己的对象

39、使用自己的对象定义了对象构造器后，用 new 运算符创建对象实例。var spaghetti = new pasta(wheat, 0.2, circle, true);/ 将调用 toString() 并显示 spaghetti 对象 的属性。window.alert(spaghetti);expandoexpando属性属性可以给对象实例添加属性(expando属性) 以改变该实例，但是用相同的构造器生成的其他对象定义中并不包括这些属性，而且除非你特意添加这些属性那么在其他实例中并不显示出来。spaghetti.color = pale straw;spaghetti.drycook =

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

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

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

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

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

45、.sin(Math.LN10);y = Math.tan(14 * Math.E);当使用 with 语句时，代码变得更短且更易读： with (Math) x = cos(3 * PI) + sin(LN10); y = tan(14 * E);五五.对象与对象与DOMv1、宿主对象宿主对象v2 2、浏览器对象浏览器对象(Navigator)v3、屏幕对象屏幕对象(screen)v4、窗口对象窗口对象(Windows)v5、位置对象位置对象(Location)v6、历史对象历史对象(History)v7、文档对象文档对象(Document)v8、文档文档DOMv9、DOM结构图结构图v10、

46、添加节点添加节点v11、删除节点删除节点v12、插入节点插入节点v13、替换节点替换节点宿主对象宿主对象 使用浏览器的内部对象系统（宿主对象）, 可实现与HTML文档进行交互。它的作用是将相关元素组织包装起来，提供给程序设计人员使用，从而减轻编程人的劳动，提高设计Web页面的能力。 浏览器对象(Navigator) 提供有关浏览器的信息 屏幕对象(screen) 反映了当前用户的屏幕设置 窗口对象(Windows)Window对象处于对象层次的最顶端，它提供了处理Navigator窗口的方法和属性。位置对象(Location)Location对象提供了与当前打开的URL一起工作的方法和属性，它

47、是一个静态的对象。历史对象(History)History对象提供了与历史清单有关的信息。文档对象(Document) document对象包含了与文档元素(elements)一起工作的对象，它将这些元素封装起来供编程人员使用。浏览器对象浏览器对象(Navigator)v属性：vappCodeName：返回浏览器的代码名，IE返回MozillavappName：返回浏览器名，IE返回“Microsoft Internet Explorer”vappVersion：返回浏览器版本，包括版本号、语言、操作平台等vlanguage：返回浏览器编译语言vplatform：返回操作平台vNavigato

48、r对象的plugin属性以数组表示已安装的外挂程序vdescription 外挂程序模块的描述 vfilename 外挂程序模块的文件名 vlength 外挂程序模块的个数 vname 外挂程序模块的名称浏览器对象浏览器对象(Navigator)vEg:vvvar len = navigator.plugins.length;vwith (document) vvwrite (你的浏览器共支持 + len + 种外挂插件：);vwrite ()vwrite (外挂插件清单)vwrite ( 名称描述文件名)vfor (var i=0; ilen; i+)vwrite( + i +v + nav

49、 +v + navigator.pluginsi.description + v + navigator.pluginsi.filename);v v屏幕对象屏幕对象(screen)v属性vscreen对象屏幕对象，描述屏幕的显示及颜色属性vavailHeight 屏幕区域的可用高度 vavailWidth 屏幕区域的可用宽度 vcolorDepth 颜色深度 256/8 16/16 32M/32 vheight 屏幕区域的实际高度 vwidth 屏幕区域的实际宽度 屏幕对象屏幕对象(screen)vEg：v vif ( screen.width 800

50、 | screen.colorDepth 8 )vvvar msg = 本网站最佳浏览模式为 800 * 600 * 256;valert(msg);vv窗口对象窗口对象(Windows)v属性：vname：窗口名称vstatus：改变状态栏的信息vself：当前窗口vtop：最顶端的框架页vparent：窗口所属的框架页窗口对象窗口对象(Windows)vEg：vvfunction cfm()vvvif (confirm(确定离开么?)v/关闭当前窗口,下面两个方法都可以v/window.close();vself.close();velsevreturn falsevv窗口对象窗口对象(W

51、indows)vwindow对象的open()方法：打开一个新窗口v参数：valwaysLowered 是否将窗口显示的堆栈后推一层 valwaysRaised 是否将窗口显示的堆栈上推一层 vdependent 是否将该窗口与当前窗口产生依存关系 vfullscreen 是否满屏显示 vdirectories 是否显示连接工具栏 vlocation 是否显示网址工具栏 vmenubar 是否显示菜单工具栏 vscrollbars 是否显示滚动条窗口对象窗口对象(Windows)v status 是否显示状态栏 vtitlebar 是否显示标题栏 vtoolbar 是否显示标准工具栏 vres

52、izable 是否可以改变窗口的大小 vscreenX 窗口左边界距离 vscreenY 窗口上边界距离 vtop 窗口上边界 vwidth 窗口宽度 vheight 窗口高度 vleft 窗口左边界 vouterHeight 窗口外边界的高度 vpersonalbar 是否显示个人工具栏 位置对象位置对象(Location)v属性：vhash 锚点名称 vhost 主机名称 vhostname host:port vhref 完整的URL字符串 vpathname 路径 vport 端口 vprotocol 协议 vsearch 查询信息v方法：vreload() 重新加载 vreplace

53、() 用指定的网页取代当前网页，并且当按下浏览器的 “后退”键时将不能返回原先的网页位置对象位置对象(Location)vEg:vvv 历史对象历史对象(History)v属性：vcurrent 当前历史记录的网址 vlength 存储在记录清单中的网址数目 vnext 下一个历史记录的网址 vprevious 上一个历史记录的网址 v方法：vback() 回到上一个历史记录中的网址（和按下“后退”键等效） vforward() 回到下一个历史记录中的网址 （和按下“前进”键等效）vgo(整数或URL) 前往历史记录中的网址（如果整数x0，则前进x个地 址，如果整数x0，则后退x个地址，如果x

54、=0，则刷新当前页面）历史对象历史对象(History)vEg:v后退两页v后退一页v前进一页v前进两页文档对象文档对象(Document)v属性：vlinkColor 设置超链接的颜色 valinkColor 作用中的超链接的颜色 vvlinkColor 链接的超链接颜色 vlinks 以数组索引值表示所有超链接 vURL 该文件的网址 vanchors 以数组索引值表示所有锚点 vbgColor 背景颜色 vfgColor 前景颜色 vclasses 文件中的class属性 vcookie 设置cookie v domain 指定服务器的域名 v formName 以表单名称表示所有表单文

55、档对象文档对象(Document)v属性：v forms 以数组索引值表示所有表单 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 文件最后修改时间 文档对象文档对象(Document)v方法：vopen() 打开文档v

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

57、。还有一种看待HTML页面的方式：将它看做由节点（node）组成的树结构。DOM结构图结构图vvvMy pagevvvvThis is text on my pagevhtmlbodyheadptitle“My page”“This is text on my page”texttext添加节点添加节点vEg：vvvvvvvv v vvv添加节点添加节点vwindow.onload=initAll;vfunction initAll()v document.getElementsByTagName(form)0.onsubmit=function()return addNode();vvfun

58、ction 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.appendChild(newGraf);vreturn false;v添加节点添加节点vvar newTe

59、xt=document.createTextNode(inText) ;v/使用createTextNode()方法创建一个新的文本节点（名为newText），它将包含在textArea中找到的文本。vvar newGraf=document.createElement(“p”);v/createElement()方法使用创建一个新的元素节点，()里的内容可以是任何HTML容器。vnewGraf.size=“15”/给属性添加节点添加节点vnewGraf.appendChild(newText);v/将新文本添加到新段落中，我们调用appendChild().vvar docBody=docu

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