java script 学习资料.ppt

JavaScript一 JavaScript基础JavaScript特点 JavaScript语言可以设计和访问一个web页面中的所有元素 如 图片元素 images 表单元素 formelements 链接 links 等等 这些对象属性等在JavaScript程序运行中可以被复制 修改 JavaScript还可以捕捉客户端用户对当前网页的动作 如 鼠标的点击动作或者键盘的输入动作等等 JavaScript的这些功能使我们能够对用户的输入等动作做出想对应的反应动作 从而实现一些交互性 1 特点 解释性脚本 不需要编译 客户端运行 不需要在网络中传数据 弱类型语言 安全 不允许操作硬盘 不能操作数据库 不能直接访问网络文档 只能直接和浏览器直接交互 动态性 事件驱动 在网页上的操作可以驱动javascript跨平台 由支持JavaScript的浏览器运行 独立于操作系统 2 于Java的区别 1 Java由Sun开发 前身是oak 是适合编写Internet应用程序的新一代面向对象语言 object oriented JavaScript由Netscape 网景公司 开发 前身是LiveScript 是一种可以嵌入Web页面的基于对象 Object Base 和事件驱动的解释性语言 2 由于没有提供抽象继承重载等功能 JavaScript只是基于对象的 3 Java源代码需要经过编译 在服务器端执行 JavaScript是解释性的 直接发送到客户端浏览器执行 4 Java的数据类型严格匹配 使用的变量必须首先有定义 JavaScript是弱类型的 可以直接使用变量 变量的类型由它引用的值由解释器动态检查 5 语法不一样 3 JavaScript代码的加入 在Html文件中 任意次数 任意位置使用 保证标签不存在交错 并正确配对 javascript代码你可以针对不同版本的浏览器使用不同的language JavaScript版本 下边的列表中列出了不同版本的Netscape浏览器所支持的不同版本的JavaScript JavaScript Netscape2 0JavaScript1 1 Netscape3 0JavaScript1 2 Netscape4 0 所以对于Netscape2 0浏览器 它将会忽略标记中定义的JavaScript1 2版本的脚本代码 但是Netscape4 0将会执行此版本的脚本代码 同时也可以执行前边两个版本的脚本代码 functionf1 旧版本的JavaScript代码 functionf1 JavaScript1 2版的代码 在这个例子里 Netscape2 0浏览器将会执行第一个 标志对之间的函数f1 而忽略第二个 标志对之间的函数f1 而对于Netscape4 0浏览器来说 它将会对两个f1 函数都进行处理 因为它支持这两个版本的JavaScript 但是由于两个函数名字相同 浏览器会自动使用第二个函数f1 来覆盖掉第一个函数f1 因此执行的结果应该是第二个函数f1 的执行结果 4 JavaScript代码的位置 通常都是将标记对放在和标记对之间 这样能够保证在你的网页被下载到客户端后开始执行JavaScript的时候你的JavaScript代码也已经被下载到客户端了 这同时也是放置你的JavaScript函数的好地方 如果你想要某些代码在你的网页显示出来之后才执行的话 你最好将这些代码放在函数里 等网页显示以后再通过调用函数来执行它们 另外一些时候 你有可能需要将你的脚本代码放在和标记对之间 这样做没什么不对的 因为如果你想要通过JavaScript代码来生成网页中的HTML语句 你就非常需要这样做 5 引入js文件 src属性 可以把javascript函数定义放在一个 js文件中 则网页文件中引入它 则在该网页中就可以使用js文件中的函数了 可以同时引用几个js文件 JavaScript语言基础6 定义变量var 变量的声明使用关键字var 变量名可以是任意长度的字母 数字和下划线组成 同时变量名第一个字符不能是数字 注意 JavaScript是对大小写敏感的 也就是说去分大小写 如变量count和变量Count是两个不同的变量 在函数外边声明的变量是全局变量 在它定义之后的脚本代码或函数中的任何地方都可以对全局变量进行访问和使用 需要注意的是 在函数外边声明变量的时候 关键字var是可选的 即可用可不用 你可以直接给一个没有被声明的变量赋值 但是如果你在一个函数中想要使用一个局部变量 即变量的有效使用范围只是在函数里边 而且这个变量与函数外边的一个全局变量具有相同的变量名 那么你就必须在函数里边通过var来重新声明这个变量 这个变量亦即是一个局部变量 7 基本数据类型 数值 整数 实数 布尔值 true false字符串 双引号或者单引号括起来 Null 空 尚未有具体的值其他对象类型由于没有严格类型匹配 定义变量可以使用关键字var变量名 也可以直接 变量名 值 使用变量 而且变量类型可以随时改变 只有给它赋另一个类型的值 8 运算符 算术运算 取余 逻辑运算符 问号表达式 布尔表达式 A B 9 注释 同C C Java 10 流程控制 if ifelsefor whilebreak continue 11 JavaScript函数 function函数名 形式参数 函数体 返回 函数调用时主要以函数名匹配 可以只传递部分参数 必须在函数定义之后才能调用 在函数体内使用arguments length可以得到调用函数时实际传递的参数个数 二 JavaScript的基于对象对象基础12 对象的构成 由属性和方法构成 对属性的引用使用对象 属性 还可以使用属性的下标访问 比如man 0 man 1 还可以使用字符串下标访问 man name man age 这种方法可以支持动态属性 并且属性名可以不满足标识符规则 比如可以在属性名中包含空格 对方法的调用使用对象 方法 参数 new可以创建对象date newDate 创建一个日期对象 this关键字指向当前属性的引用 13 定义类 定义类就是定义一个函数 参数列表不要使用类型关键字 只能使用变量名 functionMan name height blood birth this name name this height height this blood blood this birth birth this study study 声明一个方法 定义方法functionstudy language alert this name 学习 language 不要定义Manmike varmike newMan Mike 177 AB newDate mike study java 14 forxin or 对象属性名in对象名 在不知到对象内详细情况下 循环对其属性访问 for varpropinDesk document write Desk prop 15 with withclassName 在花括号里面的语句 默认为取类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 appVersion document write 你的次浏览器是 appMinorVersion document write 你的浏览器的当前语言是 browserLanguage document write 永久cookie是否在浏览器中启用 cookieEnabled document write 你的CPU等级是 cpuClass document write 你是否处于全局脱机模式 onLine document write 你的操作系统名称 platform document write 你操作系统适用的默认语言 systemLanguage document write 你HTTP用户代理请求头的字符串 userAgent document write 你操作系统的自然语言设置 userLanguage alert plugins length 16 this关键字 指向当前对象 17 new创建新对象 vara newDate 18 对象类型 静态对象 动态对象 在JavaScript中对于对象属性与方法的引用 有两种情况 其一是说该对象是静态对象 即在引用该对象的属性或方法时不需要为它创建实例 而另一种对象则在引用它的对象或方法是必须为它创建一个实例 即该对象是动态对象 19 动态属性 Jscript中所有的对象均支持 expando 属性或那些可以在运行时动态添加和删除的属性 这些属性可以有包含数字的任意名称 如果属性的名称是简单的标识符 可以在对象名称的后面加句点 例如 varmyObj newObject 添加两个expando属性 name 和 age myObj name Fred myObj age 42 如果属性名称不是一个简单的标识符 或者在写脚本的时候不知道 可以在方括号中使用任意表达式来索引属性 在Jscript中所有expando属性的名称在被添加到对象之前被转换为字符串 varmyObj newObject 添加两个无法写在object property语 法中的expando属性 第一个属性包含无效字符 空格 所以必须写在方括号里 而且使用引号 myObj notavalididentifier Thisisthepropertyvalue 第二个expando名称是一个数字 所以也必须写在方括号里 myObj 100 100 三 核心 Core 对象20 核心对象简介 在JavaScript中可供使用的最基本的数据类型被称为核心 core 对象 这些对象是 Array 数组对象 Boolean 布尔对象 Date 时间对象 Math 数值计算 Number 数值对象 可以是整数和浮点数 String 字符串对象 可以是单引号 或双引号 括起来的任何字符串 对于上边给出的对象 你都可以使用new操作符创建相应的对象实例 其实你也可以隐含地声明 创建Boolean Number和String这几个对象 就像下边那样 varfound false varmax 47 9 varname Fred 等价于 varname newString Fred 常用内部对象 21 String对象 内部静态性 该对象只有一个属性 即lengthmytest ThisisaJavaScript mystringlength mytest length 19toLowerCase 小写转换 toUpperCase 大写转换 indexOf charactor fromIndex substring start end 转义序列字符 b退格 f走纸换页 n换行 r回车 t横向跳格 Ctrl I 单引号 双引号 反斜杠 请注意 由于反斜杠本身用作转义符 因此不能直接在脚本中键入一个反斜杠 如果要产生一个反斜杠 必须一起键入两个反斜杠 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 NewDate 创建了当前时间对象 Date对象没有提供直接访问的属性 只具有获取和设置日期和时间的方法 日期起始值 9 年 月 日 获取日期的时间方法getYear 返回年数getMonth 返回当月号数getDate 返回当日号数getDay 返回星期几getHours 返回小时数getMinutes 返回分钟数getSeconds 返回秒数getTime 返回毫秒数 设置日期和时间 setYear 设置年setDate 设置当月号数setMonth 设置当月份数setHours 设置小时数setMintes 设置分钟数setSeconds 设置秒数setTime 设置毫秒数 24 Array对象 动态性 数组下标可以被认为是对象的属性 它是通过数字索引来引用的 注意添加到数组中的已命名的属性不能通过数字来索引 它们是与数组元素分离的 使用new运算符和Array 构造器生成一个新的数组 如下面的示例 vartheMonths newArray 12 theMonths 0 Jan theMonths 1 Feb theMonths 2 Mar theMonths 3 Apr theMonths 4 May theMonths 5 Jun theMonths 6 Jul theMonths 7 Aug theMonths 8 Sep theMonths 9 Oct theMonths 10 Nov theMonths 11 Dec myArray 100 hello 然后length属性将自动地被更新为101 新长度 同样 如果修改数组的length属性 将删除不再是数组部分的元素 如果指定一个数值 则将长度设置为该数 如果指定了不止一个参数 则这些参数被用作数组的入口 另外 参数的数目被赋给length属性 如下面的示例与前一个示例是等价的 vartheMonths newArray Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec 当向用关键字Array生成的数组中添加元素时 Jscript自动改变属性length的值 Jscript中的数组索引总是以0开始 而不是1 所以属性length比数组的最大索引大1 25 Number对象 除了Math对象中可用的特殊数值属性 例如PI 外 在MicrosoftJscript中 Number对象有几个其他的数值属性 Number NaN是一个特殊的属性 被定义为 不是数值 例如被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 radix 返回不同进制的数 其中radix是数的进制 numbs字符串数 31 编写一个脚本 该脚本在IE中写脚本 当解释程序遇到标记时会终止当前脚本 要显示 本身 请将其改写为至少两个字符串 例如 这样就可以在输出语句中将其连接在一起 五 网页文档中的对象当页面已经被下载到客户端时 浏览器就会创建几个用来存储页面信息和页面内容的对象 这些对象构成了一个树状结构 对象的引用也是根据这种树一层一层引用的 引用时使用 号 在这棵 树 中 最高层的对象是window对象 32 window属性 任何隐式的窗口引用都被指向当前窗口 对于其他窗口必须使用显式引用 属性location 页面的地址 URL 信息 history 包括了当前打开的这个浏览器访问过的地址 URL 列表 frames 如果页面使用了帧 frame 的话 这个对象包含了帧的版面布局的信息以及每一个帧所对应的窗口 window 对象 document 包含了页面的内容信息 opener属性 窗口对象 指向打开此窗口的母窗口screen 描述屏幕的尺寸和颜色 仅限于Netscape4 0 例如 要获得当前页面的地址 URL 信息 我们可以这样用 varurl window location href 还可以简便的写成 varurl location href 33 window方法 alert 显示一个消息框 只有一个 OK 确定 按钮 confirm 显示一个对话框 带有 OK 确定 和 Cancel 取消 按钮 prompt 提示 默认值 显示一个可以让用户输入信息的对话框 window open URL WindowName 窗口属性 打开一个窗口创建新的window 窗口 对象close 关闭当前窗口setTimeout 方法 此方法可以让JavaScript每隔一段间隔时间执行一段代码 代码的执行遵循事件句柄中的规则 也就是说 在这个函数中 每隔一段时间就会执行几条JavaScript代码 每条代码使用 隔开 或者执行调用的函数 setTimeout count alert Helloworld 500 setTimeout 方法的返回值是一个数值 使用clearTimeout 方法来终止 需要一个参数 这个参数就是setTimeout 方法的返回值 数值 varid setTimeout myFunction arg1 arg2 3000 if error clearTimeout id 出现错误时终止setTimeout 方法的执行首先执行的是head里面的内容 再执行body里面的内容 如果要获取一个标签里面的内容 必须要让标签先生成以后才能获取 所以必须把js代码写在标签之后 34 location对象 window对象的location属性包含了当前页面的地址 URL 信息 你可以直接改变此属性值 将其设置成新的地址 URL window location 或者location 你还可以通过下边的两种方法中的任何一种来使浏览器从服务器上下载 Load 页面 reload 促使浏览器重新下载当前的页面 也就是 刷新 当前页面了 replace URL 促使浏览器根据URL参数中给出的地址 URL 下载页面 同时在当前浏览器存储的历史记录 即所浏览过的页面的列表 中使用新的地址 即此方法中的URL参数 覆盖当前的页面 使用replace 方法意味着用户将不能通过按 返回 按钮回到前边浏览过的那个页面 但这并不是说用户完全不能回到原来的所有页面 他们只不过是无法回到被replace 方法替换的那一个页面 注意 只是被替换的那一个页面 35 history对象 history对象是一个很有用的对象 此对象记录着浏览器所浏览过的每一个页面 这些页面组成了一个历史记录列表 history对象具有两种方法 forward 将历史记录向前移动一个页面 back 将历史记录向后移动一个页面 而还有一个go 方法也可以控制历史纪录 而且功能更加强大 使用此方法需要一个参数 这个参数值可以是正负整数 零和字符串 例如history go 2 将是当前页后退两页 如果给定的参数是字符串 那么浏览器就会搜索列表 找到最接近当前页面位置的并且地址URL中含有此字符串的页面 然后转到该页面 下边的两条语句是等价的 history go 1 history back 下边的代码将页面转到距离本页面位置最近的同时页面地址URL中含有字符串 netscape 不区分字母的大小写 的页面 history go netscape 在使用这三个方法的时候 如果没有找到符合条件的历史记录的话 将不会发生任何变化 不会改变当前的页面 也不会显示错误 小技巧 如果在你的网站中有很多页面 那么提供一个 返回 功能是很必要的 这样可以方便用户浏览你的网站 但是你并不知道用户是从哪一个页面来到当前页面的 于是你就不能使用 的方式来做超链接了 但是可以使用下边的代码来做 返回 的超链接 返回 36 navigator 包含了浏览器的类型 版本 安装的插件等等信息 属性 appCodeName 获取浏览器的代码名称 appMinorVersion 获取应用程序的次版本值 appName 获取浏览器的名称 appVersion 获取浏览器运行的平台和版本 browserLanguage 获取浏览器的当前语言 cookieEnabled 获取客户端的永久cookie是否在浏览器中启用 永久cookies是储存在客户端计算机上的 cpuClass 获取指示CPU等级的字符串 onLine 获取表明系统是否处于全局脱机模式的值 platform 获取用户的操作系统名称 systemLanguage 获取操作系统适用的默认语言 userAgent 获取等同于HTTP用户代理请求头的字符串 userLanguage 获取操作系统的自然语言设置 具有集合plugins 获取文档中所有EMBED对象的集合 37 frame对象 frame即是帧 每一个帧对应一个窗口 每一个帧都是由一个window对象来指定的 当有一个页面使用了帧设置 frameset 的时候 主窗口 又称为母窗口或母帧 的window对象就包含了一个名为frames的数组 这个数组的每一个元素对应一个子帧 或叫子窗口 而每一个子帧都对应一个window对象 那些子窗口 子帧也可以通过使用帧设置 frameset 拥有子窗口 对于最顶层的窗口来说就是孙子窗口了 这样的话它们也就同时拥有了对应于它们的子窗口的数组frames 在某一窗口 帧的页面上使用 window parent或者只是parent即可指向此窗口的父窗口对象 同理 可以使用window parent parent指向此窗口的父窗口的父窗口 而使用window top则可以直接指向所有帧中最高层的父窗口 frame帧其实是单独的窗口 它对应于单独的窗口对象 有自己的location history和document属性 functionsetFrameColor fname color window parent frames fname document bgColor color returnfalse 38 document对象属性 bgColor 页面的背景色 fgColor 页面的前景色 即文本的颜色 linkColor 超文本链接的颜色 lastModified 此页面 HTML文件 最后被修改的时间 images 图片对象组成的数组 数组中的每一个元素对应于网页中的每一个标记 数组元素对应的顺序是在HTML文件代码中标记出现的先后顺序 forms 表单 form 对象组成的数组 数组中的每一个元素对应于网页中的每一个标记 数组元素对应的顺序是在HTML文件代码中标记出现的先后顺序 links 超文本链接对象组成的数组 数组中的每一个元素对应于网页中的每一个标记 数组元素对应的顺序是在HTML文件代码中标记出现的先后顺序 varabc document images 3 这样变量abc指向的是网页中的第四个 因为在JavaScript中数租下标是从0开始的 标记对应的图片对象 这样用起来其实并不方便 因为如果图片太多 你就必须知道每一个图片在网页中排在第几 要不然就无法知道数组的下标应该是几 不过不用担心 JavaScript提供了一个方便的方法让你指向图片对象 那就是通过各个图片元素的名字 varabc document images menu 要使用这种方法 你就必须在标记中加入NAME 图片的英文名 的代码 此例中 标记的代码为 这样你就再也不用担心你要引用的图片对象在网页中的排位顺序了 只要给它取个名字就可以了 在Netscape3 0中 这种给图片命名的方法并不好用 可能会的不到正确的结果 这也是Netscape3 0的一个bug 在使用这种方法给网页中的图片对象取名子的时候 千万注意不要有重名的情况 否则就得不到正确结果了 此外 你还可以使用下边的代码一样代替上边的代码 varabc document menu 这条语句和varabc document images menu 是等价的 39 Link BgColor fgColor vlinkColor alinkColor等 40 document write 你可以重新书写一个页面中的内容 这就要用到document对象的write 此方法输出的时候不换行 和writeln 此方法输出完成后自动换行 方法了 这两个方法需要一个字符串参数 这个参数就是要在页面中输出的字符串 可以在字符串中带上HTML代码 那样输出的结果就和其它网页是一样的了 document writeln blah 在网页中写HTMLdocument write TheimagepathisC webstuff mypage gifs garden gif document write Thecaptionreads Afterthesnowof 97 Grandma shouseiscovered window parent frames text document writeln document forms 0 text value window parent frames text document close 第一条语句是将表单 form 的text中输入的内容写到下边的帧中 第二行代码是调用document close 的方法告诉浏览器向页面写的操作已经结束 如果你想你的输入覆盖掉以前的 那就要使用document对象的close 方法 一个小小的改进 你可能会注意到上边的例子中 当你点击浏览器的后退按钮的时候 你会看到你的每一次 提交 动作都产生了一个新的页面 他们都留在了历史记录中 所以像前边说的一样 你要按很多此 后退 才能会回到最初的页面 如果你想除掉这种情况 可以使用document对象的open 方法 只要在rewriteFrame 中加一条语句即可 window parent frames text document open text html replace window parent frames text document writeln document forms 0 text value window parent frames text document close open 方法的第一个参数值 text html 是用来告诉浏览器准备接受HTML数据 而第二个参数值 replace 告诉浏览器不要将新写入的页面加入到浏览器的历史记录列表中 和location replace URL 是很相似的 功能是一样的 41 form表单对象 form对象自身用的并不是很多 但是form对象包含了很多别的元素对象 这些对象组成了表单form 这些对象包括 文本框对象 text 密码框对象 password 单选框对象 radiobutton 复选框对象 checkbox 多行文本域 textarea 隐藏域 hiddenfield 选择列表 下拉列表 selectionlistoption 提交按钮 submitbutton 重置按钮 resetbutton 它们对应的HTML标记可以参照相关的HTML语言参考 这些对象都有共同的属性name和value value属性是用户输入的数据或HTML文件给定的值 在HTML标记中 这两个属性分别对应的代码是NAME 和VALUE 在使用form里的那些元素对象之前 首先你必须要引用form对象才行 因为form对象是那些对象的父对象 而form对象前边也要引用它的上一层父对象document 这种层层引用是很重要的 document forms 0 指向页面中的第一个form对象document forms order 指向名为order的form对象 即标记中包含有代码NAME order 的表单document order 这和上一行的代码是等价的 你可以通过表单form对象的elements数组访问每一个input对象 同时也可以使用表单中各个元素对象的名字来访问这些对象 input对象的名字也是通过标记中的NAME HTML代码来命名的 document forms 0 elements 3 第一个表单form中的第三个input元素document forms order elements address 指向名为order的表单中名为address的对象document order address 指向名为order的表单中名为address的对象 和上一行代码是一样的通常我们使用表单对象来检查用户的输入是否正确或者用户提交的数据是否正确 这种检查是在表单数据被提交到服务器之前进行的 这样做可以节省用户填表的时间 保证用户只提交一次表单 我们在标记中使用了onSubmit事件 此事件在用户按下 提交 按钮的时候 调用函数checkForm 来检查用户输入 在函数checkForm 中 无论表单中的哪一项没有填写 都会弹出一个带有错误信息的消息框 并使用focus 方法将鼠标的焦点放在相应的输入框 input 中 如果表单中有项目没有填写 checkForm 函数会返回false值 而onSubmit 函数在获得false值之后 不执行提交表单内容的动作 如果返回true onSubmit 则会执行提交的动作 form对象各元素类型42 form子对象 等标记创建的 他们被存放在数组elements inputtype image对象不在此集合内 在前边我们已经讲过了如何使用elements数组了 每一种元素类型 type 多对应每一种不同的对象 这些对象有一些共同的属性和方法 如 value属性和focus 方法 此外 它们还有自己独特的属性和方法 下边我们将会按顺序对每一种元素类型进行讲解 你可以通过元素的type属性知道元素是什么类型 比如文本输入框就返回 text 通常一个标记中含有ACTION 的语句 这个语句是用来指定一个表单提交后的服务器端处理文件的文件名 包括路径 即整个URL 在的一部分中 我们曾经使用过onSubmit事件来判断用户的输入是否正确 如果正确就将这些信息提交到服务器进行处理 而服务器上用来处理这些信息的程序所在的文件就是通过ACTION 来指定的 43 button按钮对象 按钮有三种类型 一般的按钮 button 提交 submit 按钮和 重置 reset 按钮 它们有共同的属性和方法 也有各自不同的属性和方法 这三种按钮可以在标记中通过TYPE 来创建 例如 它们三个的不同之处在于 submit提交按钮有个默认动作是点击此类按钮以后自动提交表单的内容 reset重置按钮的默认动作是点击此类按钮以后自动将表单的内容恢复到最初的状态 而对于一般的button按钮来说 则没有默认动作 需要通过使用onClick事件句柄 在此事件触发时调用函数才行 JavaScript的内建函数parseInt 此函数将文本框里的字符串对象转换成数值对象 否则字符 2 和字符 2 进行 运算的结果是 22 而不是4 44 文本框 text 文本框 password 密码输入框 hidden 隐藏域 和textarea 多行文本框 对象 这几个对象都很相似 输入的都是字符串 它们仅仅是显示的方式不一样而已 text 一个单行的文本输入框password 一个单行的密码输入框 输入的字符将不会显示出来 显示出来的只是 号hidden 一个单行的文本域 但是它不会在页面上显示任何东西 而且使用网页的用户不能直接修改它的值 但是你却可以通过代码修改它的值textarea 多行的文本输入框 可以在框中使用 回车 换行 技巧 hidden域是一个很有用的对象 它可以将一些不想在页面上显示的信息传给服务器 但是 虽然这些信息不会显示在页面上 你还是不能将重要的信息 如密码等信息放到此域中 因为用户在客户端是可以通过查看源文件知道这些信息的 text和textarea元素提供了onChange事件 当这些输入框的内容发生变化时就会触发此事件 45 checkbox和radio checkbox和radio按钮可以为用户提供一序列选项 checkbox用于可以多选的选项中 而radio用于只能单选的选项中 checkbox对象通过VALUE 来设置值 但表单提交之后 服务器接收到的只是选中的项的值 此对象有一个checked的属性 此属性用来判断每一个复选框的状态 即选中还是没选中 例如 表示此复选框被选中 而表示此复选框没有被选中 你可以通过JavaScript代码修改 设置checkbox的checked属性 就像这个在线示例中的那样 将checkbox的checked false则不选中该复选框 checked true则相反 单选框radio按钮与checkbox不同 它是在一序列选项中只能选一个 例如 我们对来访用户的年龄进行调查 看他们属于哪一个年龄段 则可以使用下边的代码 21岁以下21岁到35岁36岁到45岁46岁到65岁65岁以上 我们注意到这些选项对应的radio按钮对象有一个相同的对象名 agegroup 这是说明这些按钮都是在一个组里的 在这个组里 任何时候都只能有其中的一项 不可能有两个或两个以上 被选中 当表单被提交到服务器的时候 服务器接收到的值就是选中的那一项 同时 agegroup对象的值也是选中的那一项的value属性的值 一个组中的每一个radio按钮都代表一个radio对象 和checkbox类似 每一个都有checked和value属性 此属性对应于HTML标记中的VALUE 代码 和checkbox所不同的是当组里的一个radio按钮被选中时 则其它radio按钮将不会被选中 现在问题来了 在一组radio按钮中 如何去访问其中的任何一个radio按钮 使用radio按钮组的名字 如上边的agegroup 是不行的 它的值只是选中的按钮的值 那你要访问其它没有被选中的值该怎么办呢 看看下边的代码就知道了 varrb for i 0 i document forms myform agegroup length i rb document forms myform agegroup i if rb checked 46 select和option对象 使用select选项列表 即是通常的下拉列表框之类的 也是一种给用户提供选项的有用方法 看一下下边的代码 AlabamaAlaskaArizonaArkansas