java script 学习资料

1、 JavaScript 一. JavaScript基础 JavaScript特点,JavaScript 语言可以设计和访问一个 web 页面中的所有元素，如：图片元素（images）、 表单元素（form elements）、链接（links）等等。 这些对象属性等在 JavaScript 程序运行中可以被复制、修改。JavaScript 还可以捕捉客户端用户对当前网页的动作，如：鼠标的点击动作或者键盘的输入动作等等。JavaScript 的这些功能使我们能够对用户的输入等动作做出想对应的反应动作，从而实现一些交互性。,1.特点,解释性脚本,不需要编译, 客户端运行,不需要在网络中传数据, 弱

2、类型语言, 安全: 不允许操作硬盘,不能操作数据库,不能直接访问网络文档.只能直接和浏览器直接交互. 动态性: 事件驱动, 在网页上的操作可以驱动javascript 跨平台: 由支持JavaScript的浏览器运行, 独立于操作系统.,2.于Java的区别,1. Java由Sun开发, 前身是oak, 是适合编写Internet应用程序的新一代面向对象语言(object-oriented). JavaScript由Netscape（网景公司）开发, 前身是Live Script, 是一种可以嵌入Web页面的基于对象(Object-Base)和事件驱动的解释性语言. 2. 由于没有提供抽象继承

3、重载等功能, JavaScript只是基于对象的. 3. Java源代码需要经过编译, 在服务器端执行, JavaScript是解释性的, 直接发送到客户端浏览器执行. 4. Java的数据类型严格匹配, 使用的变量必须首先有定义, JavaScript是弱类型的, 可以直接使用变量, 变量的类型由它引用的值由解释器动态检查. 5. 语法不一样.,3.JavaScript代码的加入,在Html文件中, 任意次数,任意位置使用(保证标签不存在交错,并正确配对.) /javascript 代码 你可以针对不同版本的浏览器使用不同的language=”JavaScript版本”，下边的列表中列出了不

4、同版本的 Netscape 浏览器所支持的不同版本的 JavaScript： JavaScript - Netscape 2.0 JavaScript1.1 - Netscape 3.0 JavaScript1.2 - Netscape 4.0,所以对于 Netscape 2.0 浏览器，它将会忽略标记 中定义的 JavaScript1.2 版本的脚本代码，但是 Netscape 4.0 将会执行此版本的脚本代码（同时也可以执行前边两个版本的脚本代码）。 function f1() / 旧版本的 JavaScript 代码。 . function f1() / JavaScript 1.2 版

5、的代码。 . ,在这个例子里，Netscape 2.0 浏览器将会执行第一个 . 标志对之间的函数 f1() 而忽略第二个 . 标志对之间的函数 f1() 。而对于Netscape 4.0 浏览器来说，它将会对两个 f1() 函数都进行处理，因为它支持这两个版本的 JavaScript，但是由于两个函数名字相同，浏览器会自动使用第二个函数 f1() 来覆盖掉第一个函数 f1()，因此执行的结果应该是第二个函数 f1() 的执行结果。,4.JavaScript代码的位置,通常都是将 标记对放在 和 标记对之间。这样能够保证在你的网页被下载到客户端后开始执行 JavaScript 的时候你的 Ja

6、vaScript 代码也已经被下载到客户端了。 这同时也是放置你的 JavaScript 函数的好地方，如果你想要某些代码在你的网页显示出来之后才执行的话，你最好将这些代码放在函数里，等网页显示以后再通过调用函数来执行它们， 另外一些时候，你有可能需要将你的脚本代码放在 和 标记对之间。这样做没什么不对的，因为如果你想要通过 JavaScript 代码来生成网页中的 HTML 语句，你就非常需要这样做，,5.引入js文件, src属性,可以把javascript函数定义放在一个.js文件中, 则网页文件中引入它,则在该网页中就可以使用js文件中的函数了. 可以同时引用几个js文件,JavaSc

7、ript语言基础 6.定义变量 var,变量的声明使用关键字 var ，变量名可以是任意长度的字母、数字和下划线组成（“_”），同时变量名第一个字符不能是数字。注意：JavaScript 是对大小写敏感的，也就是说去分大小写，如变量 count 和变量 Count 是两个不同的变量！,在函数外边声明的变量是全局变量，在它定义之后的脚本代码或函数中的任何地方都可以对全局变量进行访问和使用。 需要注意的是：在函数外边声明变量的时候，关键字 var 是可选的（即可用可不用，你可以直接给一个没有被声明的变量赋值）， 但是如果你在一个函数中想要使用一个局部变量（即变量的有效使用范围只是在函数里边），而且

8、这个变量与函数外边的一个全局变量具有相同的变量名，那么你就必须在函数里边通过 var 来重新声明这个变量，这个变量亦即是一个局部变量。,7.基本数据类型,数值(整数, 实数) 布尔值, true/false 字符串: 双引号或者单引号括起来. Null : 空,尚未有具体的值 其他对象类型 由于没有严格类型匹配, 定义变量可以使用关键字var 变量名, 也可以直接”变量名=值;” 使用变量. 而且变量类型可以随时改变, 只有给它赋另一个类型的值.,8.运算符,算术运算:+ - * / %(取余) 逻辑运算符:= != = 问号表达式: 布尔表达式 ? A : B ;,9.注释, 同C, C+,

9、 Java,/ /* */,10.流程控制,if , if else for, while break, continue,11.JavaScript函数,function 函数名(形式参数) 函数体; 返回; 函数调用时主要以函数名匹配,可以只传递部分参数. 必须在函数定义之后才能调用. 在函数体内使用arguments.length可以得到调用函数时实际传递的参数个数.,二.JavaScript的基于对象 对象基础 12.对象的构成,由属性和方法构成. 对属性的引用使用 对象.属性, 还可以使用属性的下标访问,比如man0, man1, 还可以使用字符串下标访问, man“name”, m

10、an“age” 这种方法可以支持动态属性, 并且属性名可以不满足标识符规则,比如可以在属性名中包含空格.,对方法的调用使用 对象.方法(参数) ; new 可以创建对象 date = new Date(); 创建一个日期对象. this关键字指向当前属性的引用.,13.定义类,定义类就是定义一个函数: 参数列表不要使用类型关键字,只能使用变量名. function Man(name, height, blood, birth) = name; this.height = height; this.blood = blood; this.birth = birth; this

11、.study = study; /声明一个方法 ,/定义方法 function study(language) alert( + 学习 + language); /不要定义Man mike = var mike = new Man(Mike,177,AB,new Date(); mike.study(java !); ,14.for x in ,or(对象属性名 in 对象名) 在不知到对象内详细情况下, 循环对其属性访问: for( var prop in Desk ) document.write( Deskprop );,15. with,with className

12、 在花括号里面的语句, 默认为取类className的属性和方法.其他类的属性方法就必须加上”类名.” 前缀 . 需要用()把对象变量括起来。 with (Math) document.write(cos(10); document.write(cos(20); document.write(cos(30); document.write(cos(40); , with (navigator ) document.write(你的浏览器版本是：+navigator.appName+navigator.appVersion ); document.write(你的浏览器版本是：+appName+

13、appVersion ); document.write(你的次浏览器是：+appMinorVersion); document.write(你的浏览器的当前语言是：+browserLanguage ); document.write(永久 cookie 是否在浏览器中启用：+cookieEnabled ); document.write(你的CPU 等级是：+cpuClass );,document.write(你是否处于全局脱机模式：+onLine ); document.write(你的操作系统名称：+platform ); document.write(你操作系统适用的默认语言：+sy

14、stemLanguage ); document.write(你HTTP 用户代理请求头的字符串：+userAgent ); document.write(你操作系统的自然语言设置：+userLanguage ); / alert(plugins.length); ,16.this关键字,指向当前对象,17. new 创建新对象,var a = new Date();,18.对象类型: 静态对象, 动态对象,在JavaScript中对于对象属性与方法的引用，有两种情况：其一是说该对象是静态对象，即在引用该对象的属性或方法时不需要为它创建实例；而另一种对象则在引用它的对象或方法是必须为它创建一个

15、实例，即该对象是动态对象。,19.动态属性,Jscript 中所有的对象均支持“expando”属性或那些可以在运行时动态添加和删除的属性。这些属性可以有包含数字的任意名称。 如果属性的名称是简单的标识符，可以在对象名称的后面加句点，例如： var myObj = new Object(); / 添加两个 expando 属性，name 和 age myO = Fred; myObj.age = 42;,如果属性名称不是一个简单的标识符，或者在写脚本的时候不知道，可以在方括号中使用任意表达式来索引属性。 在 Jscript 中所有 expando 属性的名称在被添加到对象之前被转

16、换为字符串。 var myObj = new Object(); / 添加两个无法写在 perty 语 / 法中的 expando 属性。 / 第一个属性包含无效字符（空格）， / 所以必须写在方括号里。而且使用引号. myObjnot a valid identifier = This is the property value; / 第二个 expando 名称是一个数字， / 所以也必须写在方括号里。 myObj100 = 100;,三.核心 (Core) 对象 20.核心对象简介,在 JavaScript 中可供使用的最基本的数据类型被称为核心 (core) 对象，

17、这些对象是： Array - 数组对象； Boolean - 布尔对象； Date - 时间对象； Math 数值计算； Number - 数值对象，可以是整数和浮点数； String - 字符串对象，可以是单引号 () 或双引号 () 括起来的任何字符串。,对于上边给出的对象，你都可以使用 new 操作符创建相应的对象实例，其实你也可以隐含地声明/创建 Boolean、Number 和 String 这几个对象，就像下边那样： var found = false; var max = 47.9; var name = Fred; / 等价于：var name = new String(Fre

18、d);常用内部对象,21. String对象：内部静态性,该对象只有一个属性，即length mytest=This is a JavaScript mystringlength=mytest.length; / 19 toLowerCase()小写转换，toUpperCase()大写转换。 indexOfcharactor, fromIndex substring(start,end),转义序列 字符 b 退格 f 走纸换页 n 换行 r 回车 t 横向跳格 (Ctrl-I) 单引号 “ 双引号 反斜杠,请注意，由于反斜杠本身用作转义符，因此不能直接在脚本中键入一个反斜杠。如果要产生一个反斜

19、杠，必须一起键入两个反斜杠 ()。,22. math对象, 静态对象,个属性，它们是数学中经常用到的常数E、以10为底的自然对数LN10、以为底的自然对数LN2、3.14159的PI、1/2的平方根SQRT1-2,2的平方根为SQRT2 静态的对象只能通过Math.方法名执行 主要方法 绝对值：abs() 弦余弦值：sin(), cos() 反正弦反余弦 :asin(), acos() 正切反正切：tan(), atan() 四舍五入：round() 平方根：sqrt() 基于几方次的值：pow(base,exponent),23. Date日期及时间对象, 动态性,MyDate=New Da

20、te(); /创建了当前时间对象. Date对象没有提供直接访问的属性。只具有获取和设置日期和时间的方法。 日期起始值:9年月日:。 获取日期的时间方法 getYear(): 返回年数 getMonth(): 返回当月号数 getDate(): 返回当日号数 getDay(): 返回星期几 getHours(): 返回小时数 getMinutes(: 返回分钟数 getSeconds(): 返回秒数 getTime() : 返回毫秒数,设置日期和时间： setYear();设置年 setDate():设置当月号数 setMonth():设置当月份数 setHours():设置小时数 setMi

21、ntes():设置分钟数 setSeconds():设置秒数 setTime ():设置毫秒数,24. Array 对象, 动态性,数组下标可以被认为是对象的属性，它是通过数字索引来引用的。注意添加到数组中的已命名的属性不能通过数字来索引；它们是与数组元素分离的。 使用 new 运算符和 Array() 构造器生成一个新的数组， 如下面的示例。 var theMonths = new Array(12); theMonths0 = Jan; theMonths1 = Feb; theMonths2 = Mar; theMonths3 = Apr; theMonths4 = May;,theMo

22、nths5 = Jun; theMonths6 = Jul; theMonths7 = Aug; theMonths8 = Sep; theMonths9 = Oct; theMonths10 = Nov; theMonths11 = Dec; myArray100 = hello，然后 length 属性将自动地被更新为 101（新长度）。同样，如果修改数组的 length 属性，将删除不再是数组部分的元素。 如果指定一个数值，则将长度设置为该数。 如果指定了不止一个参数，则这些参数被用作数组的入口。另外，参数的数目被赋给 length 属性。,如下面的示例与前一个示例是等价的。 var t

23、heMonths = new Array(Jan, Feb, Mar, Apr, May, Jun, Jul, Aug, Sep, Oct, Nov, Dec); 当向用关键字 Array 生成的数组中添加元素时，Jscript 自动改变属性 length 的值。Jscript 中的数组索引总是以 0 开始，而不是 1，所以属性 length比数组的最大索引大 1。,25. Number 对象,除了 Math 对象中可用的特殊数值属性（例如 PI）外，在 Microsoft Jscript 中， Number 对象有几个其他的数值属性。 Number.NaN 是一个特殊的属性，被定义为“不是数

24、值”。例如被 0 除返回 NaN。试图解析一个无法被解析为数字的字符串同样返回 Number.NaN。把 NaN 与任何数值或本身作比较的结果都是不相等。不能通过与 Number.NaN 比较来测试 NaN 结果，而应该使用 isNaN() 函数。,四.系统函数 26.eval（字串表达式）,返回字符串表达式中的值 test=eval(8+9+5/2);,27. unEscape (string),返回字符串ASCII码,28. escape(character),返回字符的编码：,29. parseFloat(floustring),返回实数,30. parseInt(numbestring

25、 ,radix),返回不同进制的数： 其中radix是数的进制，numbs字符串数,31.编写一个脚本，该脚本在 IE 中写脚本,当解释程序遇到 标记时会终止当前脚本。要显示 本身，请将其改写为至少两个字符串，例如 ，这样就可以在输出语句中将其连接在一起。,五.网页文档中的对象 当页面已经被下载到客户端时，浏览器就会创建几个用来存储页面信息和页面内容的对象。这些对象构成了一个树状结构 (对象的引用也是根据这种树一层一层引用的，引用时使用 “.” 号)，在这棵“树”中，最高层的对象是 window 对象.,32. window属性,任何隐式的窗口引用都被指向当前窗口。对于其他窗口必须使用显式引用

26、。 属性 location - 页面的地址 (URL) 信息； history - 包括了当前打开的这个浏览器访问过的地址 (URL) 列表； frames - 如果页面使用了帧 (frame) 的话，这个对象包含了帧的版面布局的信息以及每一个帧所对应的窗口 (window) 对象； document - 包含了页面的内容信息； opener 属性(窗口对象)指向打开此窗口的母窗口 screen - 描述屏幕的尺寸和颜色 (仅限于Netscape 4.0)。,例如，要获得当前页面的地址 (URL) 信息，我们可以这样用： var url = window.location.href; 还可以简

27、便的写成： var url = location.href;,33. window方法,alert() 显示一个消息框，只有一个 OK (确定) 按钮； confirm() 显示一个对话框，带有 OK (确定) 和 Cancel (取消) 按钮； prompt(“提示”, 默认值) 显示一个可以让用户输入信息的对话框。 window.open(URL, WindowName, 窗口属性) 打开一个窗口创建新的 window (窗口) 对象 close() 关闭当前窗口 setTimeout() 方法。此方法可以让 JavaScript 每隔一段间隔时间执行一段代码，代码的执行遵循事件句柄中的规

28、则，也就是说，在这个函数中，每隔一段时间就会执行几条 JavaScript 代码 (每条代码使用“;”隔开) 或者执行调用的函数：,setTimeout(count+; alert(Hello world!);, 500); setTimeout() 方法的返回值是一个数值，使用 clearTimeout() 方法来终止，需要一个参数，这个参数就是 setTimeout() 方法的返回值 (数值)， var id = setTimeout(myFunction(arg1, arg2);, 3000); if (error) clearTimeout(id); / 出现错误时终止 setTime

29、out() 方法的执行 首先执行的是head里面的内容，再执行body里面的内容，如果要获取一个标签里面的内容，必须要让标签先生成以后才能获取，所以必须把js代码写在标签之后。,34. location对象,window 对象的 location 属性包含了当前页面的地址 (URL) 信息，你可以直接改变此属性值，将其设置成新的地址 (URL)： window.location = ; 或者 location = ;,你还可以通过下边的两种方法中的任何一种来使浏览器从服务器上下载 (Load) 页面： reload() - 促使浏览器重新下载当前的页面，也就是“刷新”当前页面了。 replac

30、e(URL) - 促使浏览器根据 URL 参数中给出的地址 (URL) 下载页面，同时在当前浏览器存储的历史记录 (即所浏览过的页面的列表) 中使用新的地址(即此方法中的 URL 参数) 覆盖当前的页面。 使用 replace() 方法意味着用户将不能通过按 “返回” 按钮回到前边浏览过的那个页面，但这并不是说用户完全不能回到原来的所有页面，他们只不过是无法回到被 replace() 方法替换的那一个页面 (注意：只是被替换的那一个页面)。,35. history 对象,history 对象是一个很有用的对象，此对象记录着浏览器所浏览过的每一个页面，这些页面组成了一个历史记录列表。histor

31、y 对象具有两种方法： forward() - 将历史记录向前移动一个页面； back() - 将历史记录向后移动一个页面； 而还有一个 go() 方法也可以控制历史纪录，而且功能更加强大，使用此方法需要一个参数，这个参数值可以是正负整数、零和字符串，例如 history.go(-2) 将是当前页后退两页；如果给定的参数是字符串，那么浏览器就会搜索列表，找到最接近当前页面位置的并且地址 URL 中含有此字符串的页面，然后转到该页面。,下边的两条语句是等价的： history.go(-1); history.back(); 下边的代码将页面转到距离本页面位置最近的同时页面地址 URL 中含有字符

32、串 netscape (不区分字母的大小写) 的页面： history.go(netscape); 在使用这三个方法的时候，如果没有找到符合条件的历史记录的话，将不会发生任何变化，不会改变当前的页面，也不会显示错误。,小技巧：如果在你的网站中有很多页面，那么提供一个 “返回” 功能是很必要的，这样可以方便用户浏览你的网站，但是你并不知道用户是从哪一个页面来到当前页面的，于是你就不能使用 . 的方式来做超链接了，但是可以使用下边的代码来做“返回”的超链接： 返回,36. navigator,包含了浏览器的类型、版本、安装的插件等等信息。 属性： appCodeName ： 获取浏览器的代码名称。

33、 appMinorVersion ：获取应用程序的次版本值。 appName：获取浏览器的名称。 appVersion ：获取浏览器运行的平台和版本。 browserLanguage：获取浏览器的当前语言。 cookieEnabled：获取客户端的永久 cookie 是否在浏览器中启用。永久 cookies 是储存在客户端计算机上的。,cpuClass：获取指示 CPU 等级的字符串。 onLine：获取表明系统是否处于全局脱机模式的值。 platform：获取用户的操作系统名称。 systemLanguage：获取操作系统适用的默认语言。 userAgent：获取等同于 HTTP 用户代理请

34、求头的字符串。 userLanguage：获取操作系统的自然语言设置。 具有集合plugins： 获取文档中所有 EMBED 对象的集合。,37. frame 对象,frame 即是帧，每一个帧对应一个窗口，每一个帧都是由一个 window 对象来指定的，当有一个页面使用了帧设置 (frameset) 的时候，主窗口 (又称为母窗口或母帧) 的 window 对象就包含了一个名为 frames 的数组，这个数组的每一个元素对应一个子帧 (或叫子窗口) ，而每一个子帧都对应一个 window 对象。 那些子窗口/子帧也可以通过使用帧设置 (frameset) 拥有子窗口 (对于最顶层的窗口来说就

35、是孙子窗口了)，这样的话它们也就同时拥有了对应于它们的子窗口的数组 frames 。 在某一窗口/帧的页面上使用,window.parent 或者只是 parent 即可指向此窗口的父窗口对象。同理，可以使用 window.parent.parent 指向此窗口的父窗口的父窗口，而使用 window.top 则可以直接指向所有帧中最高层的父窗口。 frame 帧其实是单独的窗口，它对应于单独的窗口对象，有自己的 location、history 和 document 属性。, function setFrameColor(fname, color) window.parent.framesfn

36、ame.document.bgColor = color; return false; ,38. document对象属性,bgColor - 页面的背景色； fgColor - 页面的前景色，即文本的颜色； linkColor - 超文本链接的颜色； lastModified - 此页面 (HTML 文件) 最后被修改的时间； images - 图片对象组成的数组，数组中的每一个元素对应于网页中的每一个 标记，数组元素对应的顺序是在 HTML 文件代码中标记出现的先后顺序； forms - 表单 (form) 对象组成的数组，数组中的每一个元素对应于网页中的每一个 标记，数组元素对应的顺序是

37、在 HTML 文件代码中标记出现的先后顺序；,links - 超文本链接对象组成的数组，数组中的每一个元素对应于网页中的每一个 标记，数组元素对应的顺序是在 HTML 文件代码中标记出现的先后顺序. var abc = document.images3; 这样变量 abc 指向的是网页中的第四个 (因为在 JavaScript 中数租下标是从 0 开始的) 标记对应的图片对象，这样用起来其实并不方便，因为如果图片太多，你就必须知道每一个图片在网页中排在第几，要不然就无法知道数组的下标应该是几。不过不用担心， JavaScript 提供了一个方便的方法让你指向图片对象，那就是通过各个图片元素的名

38、字： var abc = document.imagesmenu;,要使用这种方法，你就必须在 标记中加入 NAME= 图片的英文名 的代码，此例中， 标记的代码为：，这样你就再也不用担心你要引用的图片对象在网页中的排位顺序了，只要给它取个名字就可以了。 (在 Netscape 3.0 中，这种给图片命名的方法并不好用，可能会的不到正确的结果，这也是 Netscape 3.0 的一个 bug。) 在使用这种方法给网页中的图片对象取名子的时候，千万注意不要有重名的情况，否则就得不到正确结果了。此外，你还可以使用下边的代码一样代替上边的代码： var abc = document.menu; /

39、这条语句和 var abc = document.imagesmenu; 是等价的,39. Link,BgColor, fgColor, vlinkColor, alinkColor 等.,40. document.write,你可以重新书写一个页面中的内容，这就要用到 document 对象的 write() (此方法输出的时候不换行) 和 writeln() (此方法输出完成后自动换行)方法了。这两个方法需要一个字符串参数，这个参数就是要在页面中输出的字符串，可以在字符串中带上HTML代码，那样输出的结果就和其它网页是一样的了.,document.writeln(blah!)在网页中写HT

40、ML document.write(The image path is C:webstuffmypagegifsgarden.gif.); document.write(The caption reads, After the snow of 97. Grandmas house is covered.); window.parent.framestext.document.writeln(document.forms0.text.value); window.parent.framestext.document.close(); 第一条语句是将表单 (form) 的 text 中输入的内容写

41、到下边的帧中，第二行代码是调用 document.close() 的方法告诉浏览器向页面写的操作已经结束。如果你想你的输入覆盖掉以前的，那就要使用 document 对象的 close() 方法。,【一个小小的改进】 你可能会注意到上边的例子中，当你点击浏览器的后退按钮的时候，你会看到你的每一次 “提交” 动作都产生了一个新的页面，他们都留在了历史记录中，所以像前边说的一样，你要按很多此 “后退” 才能会回到最初的页面，如果你想除掉这种情况，可以使用 document 对象的 open() 方法，只要在 rewriteFrame() 中加一条语句即可： window.parent.frames

42、text.document.open(text/html, replace); window.parent.framestext.document.writeln(document.forms0.text.value); window.parent.framestext.document.close(); open() 方法的第一个参数值 text/html 是用来告诉浏览器准备接受 HTML 数据，而第二个参数值 replace 告诉浏览器不要将新写入的页面加入到浏览器的历史记录列表中，和 location.replace(URL) 是很相似的，功能是一样的.,41. form表单对象,fo

43、rm 对象自身用的并不是很多，但是 form 对象包含了很多别的元素对象，这些对象组成了表单 form。这些对象包括：文本框对象 (text)、密码框对象 (password)、单选框对象 (radio button)、复选框对象 (check box)、多行文本域 (text area)、隐藏域 (hidden field)、选择列表/下拉列表 (selection list option)、提交按钮 (submit button)、重置按钮 (reset button)，它们对应的 HTML 标记可以参照相关的 HTML 语言参考。,这些对象都有共同的属性 name 和 value，val

44、ue 属性是用户输入的数据或 HTML 文件给定的值，在 HTML 标记中，这两个属性分别对应的代码是 NAME=. 和 VALUE=.。 在使用 form 里的那些元素对象之前，首先你必须要引用 form 对象才行，因为 form 对象是那些对象的父对象，而 form 对象前边也要引用它的上一层父对象 document，这种层层引用是很重要的： document.forms0. / 指向页面中的第一个 form 对象 document.formsorder / 指向名为 order 的 form 对象，即标记中包含有代码 NAME=order 的表单 document.order/ 这和上一

45、行的代码是等价的,你可以通过表单 form 对象的 elements 数组访问每一个 input 对象，同时也可以使用表单中各个元素对象的名字来访问这些对象。input 对象的名字也是通过 标记中的 NAME=. HTML 代码来命名的： document.forms0.elements3 / 第一个表单 form 中的第三个 input 元素 document.formsorder.elementsaddress / 指向名为 order 的表单中名为 address 的对象 document.order.address / 指向名为 order 的表单中名为 address 的对象，和上一

46、行代码是一样的 通常我们使用表单对象来检查用户的输入是否正确或者用户提交的数据是否正确，这种检查是在表单数据被提交到服务器之前进行的，这样做可以节省用户填表的时间，保证用户只提交一次表单。 我们在 标记中使用了 onSubmit 事件，此事件在用户按下“提交”按钮的时候，调用函数 checkForm() 来检查用户输入；,在函数 checkForm() 中，无论表单中的哪一项没有填写，都会弹出一个带有错误信息的消息框，并使用 focus() 方法将鼠标的焦点放在相应的输入框 (input) 中； 如果表单中有项目没有填写，checkForm() 函数会返回 false 值，而 onSubmit

47、() 函数在获得 false 值之后，不执行提交表单内容的动作。如果返回true，onSubmit() 则会执行提交的动作。,form 对象各元素类型 42.form 子对象, 等标记创建的，他们被存放在数组 elements,( input type=image 对象不在此集合内) 在前边我们已经讲过了如何使用 elements 数组了。每一种元素类型 (type) 多对应每一种不同的对象，这些对象有一些共同的属性和方法，如：value 属性和 focus() 方法，此外，它们还有自己独特的属性和方法，下边我们将会按顺序对每一种元素类型进行讲解。 你可以通过元素的 type 属性知道元素是什

48、么类型, 比如文本输入框就返回”text”.,通常一个 标记中含有 ACTION=. 的语句，这个语句是用来指定一个表单提交后的服务器端处理文件的文件名 (包括路径，即整个URL)，在的一部分中，我们曾经使用过 onSubmit 事件来判断用户的输入是否正确，如果正确就将这些信息提交到服务器进行处理，而服务器上用来处理这些信息的程序所在的文件就是通过 ACTION=. 来指定的。,43. button 按钮对象,按钮有三种类型，一般的按钮 (button)，“提交” (submit) 按钮和 “重置” (reset) 按钮，它们有共同的属性和方法，也有各自不同的属性和方法。这三种按钮可以在 标

49、记中通过 TYPE=. 来创建，例如： ,它们三个的不同之处在于，submit 提交按钮有个默认动作是点击此类按钮以后自动提交表单的内容；reset 重置按钮的默认动作是点击此类按钮以后自动将表单的内容恢复到最初的状态；而对于一般的 button 按钮来说，则没有默认动作，需要通过使用 onClick 事件句柄，在此事件触发时调用函数才行。 JavaScript 的内建函数 parseInt()，此函数将文本框里的字符串对象转换成数值对象。否则字符 2 和字符 2 进行 + 运算的结果是 22，而不是 4。,44.文本框,【text (文本框)、password (密码输入框)、hidden

50、(隐藏域) 和 textarea (多行文本框) 对象】 这几个对象都很相似，输入的都是字符串，它们仅仅是显示的方式不一样而已： text - 一个单行的文本输入框 password - 一个单行的密码输入框，输入的字符将不会显示出来，显示出来的只是 * 号 hidden - 一个单行的文本域，但是它不会在页面上显示任何东西，而且使用网页的用户不能直接修改它的值，但是你却可以通过代码修改它的值 textarea - 多行的文本输入框，可以在框中使用 “回车” 换行,技巧：hidden 域是一个很有用的对象，它可以将一些不想在页面上显示的信息传给服务器，但是，虽然这些信息不会显示在页面上，你还是

51、不能将重要的信息，如密码等信息放到此域中，因为用户在客户端是可以通过查看源文件知道这些信息的。 text 和 textarea 元素提供了 onChange 事件，当这些输入框的内容发生变化时就会触发此事件。,45. checkbox 和 radio,checkbox 和 radio 按钮可以为用户提供一序列选项，checkbox 用于可以多选的选项中，而 radio 用于只能单选的选项中。 checkbox 对象通过 VALUE=. 来设置值，但表单提交之后，服务器接收到的只是选中的项的值，此对象有一个 checked 的属性，此属性用来判断每一个复选框的状态，即选中还是没选中，例如： 表示

52、此复选框被选中；而 表示此复选框没有被选中。,你可以通过 JavaScript 代码修改、设置 checkbox 的 checked 属性，就像这个 在线示例 中的那样，将 checkbox 的 checked=false 则不选中该复选框，checked=true 则相反。 单选框 radio 按钮与 checkbox 不同，它是在一序列选项中只能选一个，例如，我们对来访用户的年龄进行调查，看他们属于哪一个年龄段，则可以使用下边的代码：,21岁以下 21岁到35岁 36岁到45岁 46岁到65岁 65岁以上,我们注意到这些选项对应的 radio 按钮对象有一个相同的对象名 agegroup，

53、这是说明这些按钮都是在一个组里的，在这个组里，任何时候都只能有其中的一项 (不可能有两个或两个以上) 被选中，当表单被提交到服务器的时候，服务器接收到的值就是选中的那一项。同时，agegroup 对象的值也是选中的那一项的 value 属性的值。 一个组中的每一个 radio 按钮都代表一个 radio 对象，和 checkbox 类似，每一个都有 checked 和 value 属性，此属性对应于 HTML 标记中的 VALUE=. 代码，和 checkbox 所不同的是当组里的一个 radio 按钮被选中时，则其它 radio 按钮将不会被选中。,现在问题来了：在一组 radio 按钮中，

54、如何去访问其中的任何一个 radio 按钮？使用 radio 按钮组的名字 (如上边的 agegroup) 是不行的，它的值只是选中的按钮的值，那你要访问其它没有被选中的值该怎么办呢？看看下边的代码就知道了： var rb; for (i = 0; i document.formsmyform.agegroup.length; i+) rb = document.formsmyform.agegroupi; if (rb.checked) . ,46. select 和 option 对象,使用 select 选项列表 (即是通常的下拉列表框之类的) 也是一种给用户提供选项的有用方法，看一下下边的代码