轻轻松松学用javascript编程

《轻轻松松学用javascript编程》由会员分享，可在线阅读，更多相关《轻轻松松学用javascript编程（48页珍藏版）》请在装配图网上搜索。

1、Copyright Sydongsun 2004.All rights reserved.WEB 应用开发SydongSDomino_DOC.book1 of 48 V0.2Status:xxxLast Change:13-Feb-2004SydongS Copyright by SYDONGSUNWEB 应用开发WEB 应用开发轻轻松松学用 JavaScript 编程轻轻松松学用 JavaScript 编程软件技术文档软件技术文档-作者的个人技术交流网站：http:/ 从这个网站上你可以了解到有关基于Domino 的办公自动化软件开发的一些学习资料。2 of 48WEB 应用开发Sydong

2、SCopyright Sydongsun 2004.All rights reserved.轻轻松松学用 JavaScript 编程软件技术文档轻轻松松学用 JavaScript 编程软件技术文档WEB 应用开发WEB 应用开发 特别感谢 Green，我在 Green 的鼓励下完成本文的书写！本文来自于作者（S）的一本书稿，该书面向基于 LOTUS DOMINO 的办公自动化（OA）软件开发。书名暂为轻轻松松学用基于 Domino 的 WEB 开发。该书稿中的其中有两个章节是关于JavaScript 的一些简单介绍。本文基于该书稿的关于 JavaScript 的两个章节的内容，有所增加和删改，

3、单列出来。便于其他学习 WEB 应用开发的初学 JavaScript 的参考。由此可以看出，本文并不是一本集中讨论 JavaScript 的读物。只是一本入门向导的快餐式的读物，适合初学者。本文档的标题为轻轻松松学用 JavaScript 编程，前面的“轻轻松松”有两个含义：第一，是直接继承轻轻松松学用基于 Domino 的 WEB 开发的名字来源。第二，本文力求简约，简单，篇幅短小，阅读起来容易；从我本身作为 JavaScript 的学习者的角度来写，我也是一个初学者，无法写就复杂的内容；本文完整的组件包括三个部分：本文档本身；本文档中涉及的 JavaScript 代码例子文件；本文档配套的

4、视频教程（有声有色的读物，并不是本文档的内容的简单重复，我自己听起来也常常入迷。真的非常棒！）；如果你拿到本文的话，一定要有本文配套的例子代码文件，否则学习来是不轻松的。如果你想更加轻松，让你的学习成为一种享受的话，建议你向作者索取视频教程。本人乐于将自己所学到的东西，和大家共享。可以开展我所擅长的内容的培训，比如：基于 IBM(Rational)ClearCase 的软件配置管理培训；基于 IBM(Lotus)Lotus Domino 的办公自动化软件开发培训；基于 Oracle 的数据库管理员的培训；基于 SAP 的 ERP 某些模块的培训；面向开发人员的 TCP/IP 网络协议簇的培训课

5、程（以 C 语言讲述）；Solaris 系统管理的培训 3 of 48WEB 应用开发SCopyright Sydongsun 2004.All rights reserved.目录表WEB 应用开发目录表WEB 应用开发 轻轻松松学用 JavaScript 编程软件技术文档轻轻松松学用 JavaScript 编程软件技术文档目录表目录表 .3配图列表.5列表.61说明.7目录表目录表 .3配图列表.5列表.61说明.71.1主要的内容 .71.2学习目标 .72了解 JavaScript 浏览器上的程序语言 .82了解 JavaScript 浏览器上的程序语言 .82.1JavaScript

6、 操作对象的简单介绍-属性和方法.82.2JavaScript 代码的加入.102.2.1加入 JavaScript 代码的方式一 .102.2.2加入 JavaScript 代码的方式二.122.2.3加入 JavaScript 代码的方式三.123JavaScript 常用对象的例子 .143JavaScript 常用对象的例子 .143.1一个最常用情景的例子 .143.2JavaScript 文档对象模型图.173.3使用单选钮(Radio)和多选钮(Checkbox)的例子.183.4JavaScript 中的字符串和日期对象.213.4.1字符串对象.213.4.2日期对象.223

7、.5桢结构和框架窗口(Frame,IFrame).243.5.1了解链接的 Target 属性 .253.5.2由 JavaScript，在不同的桢(窗口)间访问对象.273.5.3了解 IFrame .274正则表达式和模式匹配 .284正则表达式和模式匹配 .284.1定义正则表达式 .284.2字符类.304.3正则表达式的应用例子 .305可参考学习的，精美的代码例子.315可参考学习的，精美的代码例子.315.1预载入图片，实现导航按钮的动态效果 .315.2显示对象的提示信息.345.3一个精美的日历 .375.4一个下拉菜单.385.5类似于资源管理器的树图 .425.6一个很好

8、的编辑器 .454 of 48WEB 应用开发SydongSCopyright SYdongsun AG 2004.All rights reserved.轻轻松松学用 JavaScript 编程软件技术文档轻轻松松学用 JavaScript 编程软件技术文档目录表WEB 应用开发目录表WEB 应用开发6总结和作业 .466总结和作业 .466.1总结 .466.2作业 .475 of 48WEB 应用开发SydongSCopyright Sydongxun 2004.All rights reserved.配图列表WEB 应用开发配图列表WEB 应用开发 轻轻松松学用 JavaScript

9、编程软件技术文档轻轻松松学用 JavaScript 编程软件技术文档配图列表配图列表Figure 1:网页显示效果图 1.10Figure 2:验证用户输入的网页例子.14Figure 3:JavaScript 文档对象模型图.17Figure 4:使用 Radio 和 CheckBox 的例子.18Figure 5:含有桢结构的网页文档.24Figure 6:一个包含左右两个桢的例子.25Figure 7:动态变换图片的按钮的网页.31Figure 8:显示对象的提示信息的网页.34Figure 9:精美的日历的例子.37Figure 10:一个下拉菜单的网页例子.38Figure 11:W

10、indows 操作系统下的资源管理器.42Figure 12:一个采用 Tree 图组织内容的网页.43Figure 13:所见即所得的编辑器的网页例子.456 of 48WEB 应用开发SydongSCopyright Sydongsun 2004.All rights reserved.轻轻松松学用 JavaScript 编程软件技术文档轻轻松松学用 JavaScript 编程软件技术文档列表WEB 应用开发列表WEB 应用开发列表列表Table 1:Html 对象的常用事件列举.9Table 2:字符串对象的常用方法例举.21Table 3:日期对象的常用方法例举.22Table 4:一

11、些 Target 属性值.267 of 48WEB 应用开发SydongShttp:/www.ACopyright Sydongsun 2004.All rights reserved.说明WEB 应用开发 说明WEB 应用开发 轻轻松松学用 JavaScript 编程软件技术文档轻轻松松学用 JavaScript 编程软件技术文档1 说明 1 说明 1.1 主要的内容1.2 学习目标1.1 主要的内容1.2 学习目标 简单介绍 JavaScript 语言，JavaScript 所处理的对象属性和方法；JavaScript 代码加入 HTML文档中的方法；JavaScript 最常用情景的一个

12、例子验证用户输入；JavaScript 的文档对象模型图；JavaScript 的字符串对象和日期对象；窗口对象和框架窗口（FrameSet、IFrame）；正则表达式的模式（Pattern）匹配验证用户输入；可参考的 JavaScript 代码：预载入图片实现导航按钮的动态变化效果；可参考的 JavaScript 代码：显示对象的提示信息；可参考的 JavaScript 代码：精美的日历；可参考的 JavaScript 代码：下拉菜单；可参考的 JavaScript 代码：类似于资源管理器的树图；可参考的 JavaScript 代码：一个所见所得的编辑器；从上面这个大纲来看，本文档的内容明显

13、的分为两个部分。前半部分，也就是一章的内容，主要简单介绍JavaScript，是基础内容，必须要好好的理解。而后面一部分内容，则是精心选择的代码，借此开拓学习者的视野。其中精美的日历，下拉菜单，树图是来自国外的共享软件开发者一些 JavaScript 专家写就的。在本文中加以介绍性引用（版权属于原作者），让大家入门之后，如果想进一步深入 JavaScript 的开发的话，这是优美的，足够我们学习的代码。当然如果你不想深入下去。直接想修改使用它们，建议在财力许可和方便的话，请付给这些作品的原作者相应酬劳，尊重他们的劳动成果。就像你的劳动成果也希望得到别人的尊重一样。本文的格式上，尽量用褐色字体来

14、表示代码。本文中的一些名字概念的说法和其他的书本并不一定一致，这是作者的习惯的说法。但是不会对于你理解本文的内容有障碍。为了更好的阅读效果，作者建议你打印本文档。本文档不到 50 页，如果你缩印成 50%打印的话，是很小的一本册子，也许会增加你学习的信心。通过本文档的阅读，开发人员应该掌握下列内容：1用 JavaScript 来访问浏览器环境和 HTML语言所构成的现成对象的方法；2熟悉 JavaScript 文档对象模型；在心中有个清楚的轮廓；3进一步学习 JavaScript 的能力获得；8 of 48WEB 应用开发SydongShttp:/www.ACopyright Sydongsu

15、n 2004.All rights reserved.轻轻松松学用 JavaScript 编程软件技术文档轻轻松松学用 JavaScript 编程软件技术文档了解了解 JavaScript 浏览器上的程序语言WEB 应用开发浏览器上的程序语言WEB 应用开发2 了解了解 JavaScript 浏览器上的程序语言浏览器上的程序语言2.1 JavaScript 操作对象的简单介绍-属性和方法2.1 JavaScript 操作对象的简单介绍-属性和方法 为了提供给最终用户以使用方便、界面美观的用户感受，很多基于特定的客户端程序，都转向趋向于采用浏览器客户端的应用。而早期的静态的、缺乏交互的 HTML

16、页面文档适应不了这种要求。JavaScript 是一种基于对象的脚本编程语言，是“浏览器”上的程序语言。当 Web 服务器输出内容（包括 JavaScript 的程序代码）到浏览器时，此时，JavaScript 可以操纵浏览器上的一切内容可以操纵浏览器上的一切内容，在浏览器上在浏览器上提供用户交互，界面美化，增加 Web 界面的“智能性”。我们知道：JavaScript 是一种脚本语言，是同 HTML文档一起使用的，WEB服务器产生输出 HTML内容的同时，也输出一些 JavaScript 程序代码到浏览器客户端。JavaScript 由浏览器解释执行，不同的浏览器，或者是同一浏览器的不同版本

17、，对 JavaScript 的支持会有一些差异。本书不讨论这些问题，并假定用户采用 IE5.0以上版本的浏览器。JavaScript 是一种基于对象的语言，通过 JavaScript 代码来操作对象访问或者设置对象的属性，编写对象的特定的事件（方法）代码。JavaScript 中的对象是由属性(properties)和方法(methods)两个基本的元素的构成的。前者是对象在实施其所需要行为的过程中，实现信息的装载单位，从而与变量相关联；后者是指对象能够按照设计者的意图而被执行，从而与特定的函数相联。对象从哪里来？JavaScript 可以操作的对象有下列三个来源：浏览器环境和 HTML标签语

18、句所构成的现成对象（链接、图像、插件、HTML表单元素、浏览器细节等）；通过 JavaScript 的内置类所创建的对象，比如 Data（日期）和 Number(数值)；通过 JavaScript 编程，用户自己创建的对象；本章的内容将涵盖以上三种情形的对象，一般来说，我们需要熟悉 JavaScript 的前两种的访问对象的方法。那些精通 JavaScript 程序编写的设计人员，他们常通过 JavaScript 程序，实现复杂的类，然后由类来创建对象。比如漂亮的日历、用于网站内容导航的下拉菜单、树状图，等等。我们只是 Domino 程序设计人员，除非我们能够编写比他们更好的 JavaScri

19、pt 类，一般我们可以直接借用那些精通 JavaScript 编程的设计者的成果。Internet 的目的之一是满足资源和信息的共享，毫无疑问，这也包括能够让我们共享到那些精通 JavaScript的编程者的优秀成果。一般的对象有哪些方法（事件）呢？对于 HTML标签语句所构成的现成的对象，我们列举一些用于说明。在本书的第一部分，我们提及到：万事万物皆对象，日常生活中的对象具有各自的特性和行为。在面向对象的程序设计中，对应为属性和方法。在 JavaScript 的对象中，有很多以 on 开头的方法，比如 onLoad、onClick、onMouseOver、onMouseOut 等等，代表特定

20、的事件。很多对象都具有以上方法。比如 onClick事件，当鼠标点击某个对象时，这个对象可以是一个按钮、或者是表格的一行、一个图片、一个链接等。通过onClick所关联的 JavaScript 程序代码，做各种处理。onMouseOver和 onMouseOut 分别是指当鼠标移到和移出某个对象的区域时，所触发的事件，通过它们联接的 JavaScript 代码做各种处理。我们来看下列 HTML语句：9 of 48WEB 应用开发SydongShttp:/www.ACopyright Sydongsun 2004.All rights reserved.了解了解 JavaScript 浏览器上的

21、程序语言WEB 应用开发 浏览器上的程序语言WEB 应用开发 轻轻松松学用 JavaScript 编程软件技术文档轻轻松松学用 JavaScript 编程软件技术文档Table 1:Html 对象的常用事件列举事件名称触发时间对象例举事件名称触发时间对象例举OnBlur对象失去输入焦点窗口和所有的表单对象OnChange用户改变对象的值文本框、文本区域、选择列表等OnClick用户鼠标点击链接、按钮、单选钮、多选钮等OnFocus获得输入焦点时窗口和所有的表单对象OnKeyDown用户按下一个键时表单对象，比如输入框、文本区域等OnKeyUp用户释放一个键时表单对象，比如输入框、文本区域等On

22、MouseDown用户按下鼠标时文档，按钮、链接、图像、表格等OnMouseOut鼠标从某个对象移开时文档，按钮、链接、图像、表格等OnMouseOver鼠标移到某个对象文档，按钮、链接、图像、表格等OnReset表单复位时表单OnResize窗口尺寸变化时窗口OnSubmit表单提交时表单 以上是一个“新建”按钮对象，从上面 HTML标签语句，可以看出该按钮对象的属性有 Class、Name、Value。该按钮的事件代码有 onMouserOver和 onMouseOut 以及 onClick。其中前两个事件（鼠标移到和移开按钮时）的作用是：变更该对象的 Class属性值，在该页面的所引用的

23、 CSS 文件中，分别指定了btnmenuview 和 btnmenuviewmouseover 的外观风格，从而是当鼠标移动到按钮后，该按钮的外观会发生变化的动态效果。OnClick事件是当用户点击按钮时，触发的 JavaScript 代码。这里将这些代码放置在submitCreate()函数当中。再来看看 onLoad 事件，当用户把 Web 页导入到浏览器之后，与该页（或文档）相关联的 onLoad 事件处理程序被执行；下面是调用该事件的例子：onLoad 事件的应用较多，它的应用情景为：当网页到入到浏览器后，需要完成一些自动处理过程，这些处理过程（比如执行运算，或者显示信息）的 Jav

24、aScript 代码可以放在标签所指的对象的 onLoad 事件所关联的函数中。下面表格中列出常用的一些事件、这些事件的触发原因以及常常使用这些事件的对象例举：10 of 48WEB 应用开发SydongShttp:/www.ACopyright Sydongsun 2004.All rights reserved.轻轻松松学用 JavaScript 编程软件技术文档轻轻松松学用 JavaScript 编程软件技术文档了解了解 JavaScript 浏览器上的程序语言WEB 应用开发浏览器上的程序语言WEB 应用开发2.2 JavaScript 代码的加入2.2 JavaScript 代码的加

25、入2.2.1 加入加入 JavaScript 代码的方式一代码的方式一Figure 1:网页显示效果图 1 从上一小节内容，我们已经对JavaScript中的对象、对象的属性方法和方法有了初步的了解，我们进一步了解下一个问题：JavaScript代码应该放在Web页的什么位置呢？JavaScript的脚本包括在HTML中，它成为HTML文档的一部分。与HTML标识相结合，构成动态的、能够交互的网页。JavaScript的代码的加入，通过在Web页中直接写入：/JavaScript语言代码；/JavaScript 语言代码；/注释：通过标识 指明其中包含的是Script脚本代码；通过Langua

26、ge=JavaScript说明标识中使用的语言，这里是JavaScript语言；下面是一个Htm页面JsTest1.htm的源文件：document.write(这里(红色文字)是通过JavaScript代码所输出的文字);这里(绿色文字)是Htm语句所产生的文字 该页面显示的结果为：11 of 48WEB 应用开发SydongShttp:/www.ACopyright Sydongsun 2004.All rights reserved.了解了解 JavaScript 浏览器上的程序语言WEB 应用开发 浏览器上的程序语言WEB 应用开发 轻轻松松学用 JavaScript 编程软件技术文档

27、轻轻松松学用 JavaScript 编程软件技术文档注释：document.write()是文档对象的输出函数，其功能是将括号中的字符或变量值输出到 Web 页面文档中；可将标识放入.或.之间。将 JavaScript 标识放置.在头部之间，使之在页面文档主体和其余部分代码之前装载。尤其是一些函数的代码，建议读者将这些代码放在.在头部之间。也可以将 JavaScript 标识放置在.主体之间以实现某些部分动态地创建文档。12 of 48WEB 应用开发SydongShttp:/www.ACopyright Sydongsun 2004.All rights reserved.轻轻松松学用 Ja

28、vaScript 编程软件技术文档轻轻松松学用 JavaScript 编程软件技术文档了解了解 JavaScript 浏览器上的程序语言WEB 应用开发浏览器上的程序语言WEB 应用开发2.2.2 加入加入 JavaScript 代码的方式二代码的方式二2.2.3 加入加入 JavaScript 代码的方式三代码的方式三 另一种加入 JavaScript 代码的方式，是在 HTML标签所定义的对象当中，直接写某些事件的非常简短代码，比如像上一小节的列举的“新建”按钮的事件代码。如果这些事件的代码较为复杂的话，建议在的.中间编写成一个函数，在按钮的标签中通过 onclick=javascript

29、:函数名称()来调用。JavaScript 函数的写法是在之间编写 function 函数名称()/具体的处理过程 在这里提醒一下：JavaScript 语句的写法是区分大小写的，比如函数submitCreate()和SubmitCreate()并不一样。在 JavaScript 程序语句的 IF 语句应该为小写 if，如果不小心写为 If 是错误的。初学 JavaScript，要注意防止发生这种错误。还有一种加入 JavaScript 代码方式是使用库函数：在 Web 页中加入类似于 来引入 JavaScript 库。程序员谈到库（Library），并不是指可以借书的图书库（在程序员眼中，库

30、就是一堆函数，有时是免费使用，有时候需要购买，当然也可以自己编写）。我们可以引用或在自己的代码中调用这些库函数。要实现库，需要以.js作为文件扩展名的文件来保存，在随书光盘的“JavaScript”目录下的“下拉菜单”目录下的 Index.htm页面中有 来引入下拉菜单的数据文件库和下拉菜单的 Class库文件。把一些 JavaScript 代码（尤其是用户自己编写的对象的类文件）组织成可以反复使用的库，具有下列好处：减少错误，减少 Web 页面的内容。JavaScript 库经过严格测试后，可以放心的反复调用，相对于通过拷贝和粘贴把 JavaScript 函数插入到每个想要调用它的 HTML

31、文件而言。同时也使 HTML文件看起来清楚易读。减少网络流量，提高响应速度。当一个 JavaScript 库的第一次下载到内存，无论多少页引用该库，浏览器都能访问它。不需要再次下载。13 of 48WEB 应用开发SydongShttp:/www.ACopyright Sydongsun 2004.All rights reserved.了解了解 JavaScript 浏览器上的程序语言WEB 应用开发 浏览器上的程序语言WEB 应用开发 轻轻松松学用 JavaScript 编程软件技术文档轻轻松松学用 JavaScript 编程软件技术文档要决提醒要决提醒:考虑 JavaScript 脚本的

32、位置，要注意下列两点：Web 内容在浏览器中是从上到下的顺序解释的。放在 HTML 的之间脚本比插入Web 的的脚本先处理。比较好的做法是将包含所有预定义函数的脚本放在 Web 的之间。这样，浏览器在前面遇到这些函数，确保 Web 的中的语句能够识别这些函数。同样的道理，在一些网页下载到浏览器中，就会执行的脚本（比如 Web 页的 onload 事件关联的脚本代码），如果这些脚本要访问 HTML 标签所定义的对象，那么要确保这些对象先于脚本执行，否则会出现“对象不存在”的错误。建议设置 IE 的浏览器的高级属性中启用脚本调试，可以发现错误存在的地方。应用外部脚本库，浏览器会在该 HTML文件所

33、在的目录下查找 menu_data.js 文件，如果把 js 文件存放在别的目录中，则RSC 属性值必须反映出那个目录，也就是必须确保该 HTML 文件能够找到 js 文件。14 of 48WEB 应用开发SydongShttp:/www.ACopyright Sydongsun 2004.All rights reserved.轻轻松松学用 JavaScript 编程软件技术文档轻轻松松学用 JavaScript 编程软件技术文档JavaScript 常用对象的例子WEB 应用开发JavaScript 常用对象的例子WEB 应用开发3 JavaScript 常用对象的例子3 JavaScri

34、pt 常用对象的例子3.1 一个最常用情景的例子3.1 一个最常用情景的例子Figure 2:验证用户输入的网页例子 学习 JavaScript 比较好的入门方法是去学习参考别人的例子，而不必去寻找一本复杂 JavaScript 语法大全之类的书。只需要我们经常上网冲浪，发现别人的用法不错，刚好我们自己也需要那样做，那么就仿照他们的做法。下面给出 JavaScript 最经常使用的一个场景的简单例子。如下图 2：该网页通过 JavaScript 实现下列功能：验证用户输入的功能，用户名称，用户密码，重复用户密码三项内容不能为空，同时两次密码录入应该一致。如果用户的输入正确，那么在“用户输入信息

35、的反馈”中显示一段反映用户录入的文本；15 of 48WEB 应用开发SydongShttp:/www.ACopyright Sydongsun 2004.All rights reserved.JavaScript 常用对象的例子WEB 应用开发 JavaScript 常用对象的例子WEB 应用开发 轻轻松松学用 JavaScript 编程软件技术文档轻轻松松学用 JavaScript 编程软件技术文档以上页面的 HTML代码为：function submitClick()var Userid=document.forms0.UserId.value;if(Userid=)alert(用户名

36、称不能为空);return false;var UserPwd=document.forms0.UserPwd.value;if(UserPwd=)alert(用户密码不能为空);return false;var reUserPwd=document.forms0.reUserPwd.value;if(reUserPwd=)alert(请重复密码输入);return false;if(UserPwd!=reUserPwd)alert(两次输入密码不一致！请重新输入);document.forms0.UserPwd.value=;document.forms0.reUserPwd.value=;

37、document.forms0.UserPwd.focus();return false;var strMsg=;strMsg=你的用户名称为：+Userid+;你的密码为：+reUserPwd+;document.forms0.DispInfo.value=strMsg alert(strMsg);function ResetClick()document.forms0.reset();function CallSubmitClick()document.forms0.Submit.click();请输入用户名称：请输入用户密码：请重复用户密码：用户输入信息的反馈：16 of 48WEB 应

38、用开发SydongShttp:/www.ACopyright Sydongsun 2004.All rights reserved.轻轻松松学用 JavaScript 编程软件技术文档轻轻松松学用 JavaScript 编程软件技术文档JavaScript 常用对象的例子WEB 应用开发JavaScript 常用对象的例子WEB 应用开发 详细分析：分析代码行 var Userid=document.forms0.UserId.value;该语句的功能是将 Web 页面上的名称为 UserId 的 Text 对象的值赋给一个变量 Userid。JavaScirpt 访问 HTML上标签所定义的

39、对象，最常常采用的是一种层层限定的逐步收缩法层层限定的逐步收缩法。大家比较熟悉传统的邮件通信，如果要让邮件到达某个人，你首先要确定首先是那个国家（比如中国），然后是某个省（比如浙江），然后是某个城市（比如杭州），某个区（比如西湖区），某个大街（比如文三路），最后交代门牌号码（比如 158号），然后就是那个人。同传统的邮件通信类似，JavaScript 访问 Web 页面 HTML标签语语句所构成的对象，也是层层限定的层层限定的 逐步缩法逐步缩法。在 JavaScript 的文档对象模型(DOM)中，窗口（Window）是对象模型的顶端对象，通常来说窗口就是你的浏览器。HTML页面文档是在浏览器

40、的窗口中显示的。目前我们假设页面不包含帧结构，在以后内容有专门的一个小节来讲述有关帧结构的问题。这里假设浏览器窗口中只显示一个 Web 页的情景。浏览器的窗口（Window）有它的属性，比如它显示的页面，窗口（Window）底部的状态条上的文字等等；它也有方法，比如打开和关闭。通常来说，因为窗口在 JavaScript 的文档对象模型(DOM)对象层次的顶层，JavaScript 就假设 Window已经存在了，你不必去在 JavaScript 程序中刻意写上它，也就是说“window.location”和“location”的作用是相同的。窗口里是 Web 页面，它的对象层次从文档（docu

41、ment）开始。可以用 Window.document来引用它，或者就是简单的 document，这同我们在国内邮件通信时，地址一般都不写“中国”。每个窗口只有一个文档（document）的时候。一般情况下，有收集用户输入信息的文档（document）包含至少一个表单（form），但是可以包含多个。可以通过 document.forms0来访问第一个表单。当然表单一般都有名称（Name）属性，也可以通过表单的名称来访问，比如：上面的一句 JavaScript 也可以写成 var Userid=document.InputForm.UserId.value;在 Microsoft的 IE 浏览器

42、环境下，可以不指明表单，还是直接用 all 替代（作者建议尽量不要采用这种办法），如：var Userid=document.all.UserId.value;表单中当中会包含很多 Input 对象，比如单行文本输入框（类型为 Text）、文本区域（类型为TextArea）、普通按钮（类型为 Button）、提交按钮（类型为 Submit）、重置按钮（类型为 Reset）、选择框（类型为 Select）等等。要访问例子中的用户名称录入的文本框 UserId 的 value属性，可以通过 document.InputForm.UserId.value;如果要将鼠标焦点停留该文本输入框中，可以通过

43、该对象的 focus方法：document.InputForm.UserId.focus();比如图 2-2 中“调用提交按钮”的 onclick事件所关联的函数的语句为：document.forms0.BtnSubmit.click();含义是：访问到 document（文档）下的 forms0（表单）下的 BtnSubmit 按钮，调用该按钮的 Click事件。17 of 48WEB 应用开发SydongShttp:/www.ACopyright Sydongsun 2004.All rights reserved.JavaScript 常用对象的例子WEB 应用开发 JavaScript

44、 常用对象的例子WEB 应用开发 轻轻松松学用 JavaScript 编程软件技术文档轻轻松松学用 JavaScript 编程软件技术文档3.2 JavaScript 文档对象模型图3.2 JavaScript 文档对象模型图Figure 3:JavaScript 文档对象模型图 分析代码 document.forms0.reset();关于表单中的关于表单中的Submit和和Reset类型的按钮类型的按钮：HTML的表单有个 Action 属性，该属性的值为某个页面的地址，当表单提交后，表单当中的用户输入内容将发送给 Action 所指定的页面，该页面做相应的处理，比如获得用户的输入，存入到

45、数据库系统中去。图 2的 Web 页面中没有指定 Action 的值。对于表单对象来说，有下列两个方法 submit()和 reset()方法。前者对应表单的提交，后者对应表单内容的复位（初始状态），以便重新录入。图 2 中的“重写”按钮所关联的函数的代码 document.forms0.reset();就是调用表单的 Reset()方法；表单中的 Input 对象有两种特别的按钮对象：类型为 Submit 的按钮对象和类型为 Reset 的按钮对象，点击这种按钮，它的动作就是触发表单的 submit()事件或者 reset()事件。在图 2 的例子中，我们采用类型为 Button的普通按钮对

46、象来完成这种功能。比如图 2 的“重写”按钮如果要用 Reset 类型的按钮替代的话，只需要直接 不需要写它的 Onclick事件代码函数，因为这种按钮的动作默认就是表单 reset()事件。从上一个小节中的例子，我们已经得到了 JavaScript 访问 HTML标签所定义的对象的方法。即层层限定的逐步搜索法层层限定的逐步搜索法。现在我们来看如下图：通过这个图层次结构，我们可以进一步熟悉层层限定的逐步搜索法层层限定的逐步搜索法，请读者在这个图上花费几分钟的时间，在以后的一些内容中，我们也是围绕这个图，来讲述这个“图片背后的故事”。顺便提一下，尽管我们常常采用逐步收缩逐步收缩的方法来访问 HT

47、ML标签所定义的对象。有时候我们也可以才采用下列方法：通过对象的 ID或者对象的名称来获得该对象。比如：在图 2 中的用户名称的输入框 Text 的名称为 UserId，它的 ID为 txtUserId，那么通过 var UserId=document.getElementById(txtUserId).value;或者 var UserId=document.getElementByName(UserId).value 来取得该对象的 Value的值。18 of 48WEB 应用开发SydongShttp:/www.ACopyright Sydongsun 2004.All rights r

48、eserved.轻轻松松学用 JavaScript 编程软件技术文档轻轻松松学用 JavaScript 编程软件技术文档JavaScript 常用对象的例子WEB 应用开发JavaScript 常用对象的例子WEB 应用开发3.3 使用单选钮(Radio)和多选钮(Checkbox)的例子3.3 使用单选钮(Radio)和多选钮(Checkbox)的例子Figure 4:使用 Radio 和 CheckBox 的例子 为了进一步加深对图 3 JavaScript 文档对象模型图文档对象模型图的印象，我们列举一个网页中使用单选钮（Radio）和多选钮的（Checkbox）的例子。该 Web 页的

49、程序清单在随书光盘的 JavaScript 目录下的 JsTest3.htm中。该Web 页显示的功能是：通过按钮来检测是否对单选钮（多选按钮）做了选择，并取得选择的单选钮（多选按钮）的值，如图：该 Web 页（随书光盘 JavaScript 目录下的 JsTest3.htm）的源文件为：19 of 48WEB 应用开发SydongShttp:/www.ACopyright Sydongsun 2004.All rights reserved.JavaScript 常用对象的例子WEB 应用开发 JavaScript 常用对象的例子WEB 应用开发 轻轻松松学用 JavaScript 编程软件

50、技术文档轻轻松松学用 JavaScript 编程软件技术文档 function submitClick()var selValue=Select_check(cbx);if(selValue=0)alert(你没有做出你喜爱的水果的任何选择，请作出选择！);return false;else var selActionValue=Select_check(radio1);if(selActionValue=0)alert(请你做出购买还是不够买的选择！);return false;else strMsg=你喜欢的水果有+selValue;strMsg=strMsg+，并且你决定了：+selAc

51、tionValue;alert(strMsg);function Select_check(objName)var obj=document.getElementsByName(objName);var selArray=new Array();for(var i=0;iobj.length;i+)if(obji.checked)selArrayi=obji.value;return selArray;你喜欢的水果有？红苹果 大西瓜 鲜梨子 大桃子 你决定的怎么做？购买上述产品 不购买上述产品 简单注释：JavaScript 脚本中函数 Select_check(objName)带有一个参数

52、objName，通过语句：var obj=document.getElementsByName(objName);来访问 Document 中的对象。对于相关成组单选钮和多选钮，在 Web 上总是以同名的一组对象出现，在函数中，遍历对象组的每个元素，如果该元素的是否 Checked，如果是，则把该元素的值存入到数组 selArray中，最后，函数返回值为数组selArray。20 of 48WEB 应用开发SydongShttp:/www.ACopyright Sydongsun 2004.All rights reserved.轻轻松松学用 JavaScript 编程软件技术文档轻轻松松学用

53、 JavaScript 编程软件技术文档JavaScript 常用对象的例子WEB 应用开发JavaScript 常用对象的例子WEB 应用开发要决提醒：要决提醒：到此为止，我们已经遇到表单（Form）和文档（Document）的多重含义，我们不能混淆，要自然的理解作者在不同的情景下提到他们所指的含义:在 Domino 系统中，设计元素对象表单（Form），用户通过表单来产生文档，并且通过表单来显示文档（在 Domino 的 Web 设计中，表单的作用有些扩展，有些表单只用来作内容的显示，比如显示嵌入视图的表单）。在 HTML 中也有表单对象（Form），HTML 表单的作用是用来收集用户录入

54、，它会包含一些文本录入框(Text)，文本区域（TextArea）,按钮（Button），选择框（Select），复选框（Checkbox），单选框（Radio）等等。这是两种差别很大的不同的对象概念。尽管如此，他们也存在一些联系，在 Web 方式打开 Domino 系统的表单，或者打开文档处于编辑状态，Domino 系统将表单后者文档“翻译”成 HTML 页面，将自动的产生一个 HTML的表单对象，而 Domino 系统的表单的不同类型的域将相应的转发为 HTML 表单对象中的不同Input 表单对象，比如可编辑的文本域将“翻译”成一个文本录入框（Text）对象，而 RTF 可编辑域将“翻译

55、”成文本区域（Textarea）。而这些 HTML 标签所定义的对象是 JavaScript 可以直接操作的对象。在 Domino 系统中，文档（Document）对象是指 Domino 文本数据库系统所存放信息的单元。而在 JavaScript 的对象模型中，也有 Document 对象的概念，JavaScript 文档对象代表 Web 页中的内容。对于图 3 JavaScript 对象模型的学习，我们通过两个例子有了对他们的初步了解。文档 对象（DOM）模型描述了 JavaScript 用到的有关文档和浏览器的全部详细资料，包括那些对象具有什么样的属性和方法。熟悉这些对象的比较好的办法就是

56、学习别人的例子，本书当中包含了 Domino 的 Web 设计所要应用的大多数对象的例子。通读本书，基本上可以达到：JavaScript 不会成为在基于 Domino的 Web 设计的一个障碍。当然，本书并不是专门讨论 JavaScript 的书籍。深入学习 JavaScript 的最好方法就是多上网冲浪，看看别人的源代码。在 BBS 上同那些精通 JavaScript 的设计者进行求助和讨论。推荐两个网址：中国软件（）的讨论区便于我们相互交流。MSDN 上的参考资源：http:/ 也可以多访问一些国外 JavaScript 开发专家的网站，研究学习他们的优秀的代码。21 of 48WEB 应

57、用开发SydongShttp:/www.ACopyright Sydongsun 2004.All rights reserved.JavaScript 常用对象的例子WEB 应用开发 JavaScript 常用对象的例子WEB 应用开发 轻轻松松学用 JavaScript 编程软件技术文档轻轻松松学用 JavaScript 编程软件技术文档3.4 JavaScript 中的字符串和日期对象3.4.1 字符串对象3.4 JavaScript 中的字符串和日期对象3.4.1 字符串对象Table 2:字符串对象的常用方法例举常用方法简要描述常用方法简要描述strTemp.toLowerCase(

58、)将字符串变成小写字母字符串strTemp.toUpperCase()将字符串变成大写字母字符串strTemp.indexOf(abc)字符串中是否存在 abe，有则返回一个正数，否则返回-1strTemp.substring(5,10)截取字符串，从字符串的第 5 位开始，直到第 10 位strTemp.replace(10,a)将 StrTemp 中的字符 10 用 a 替换var strAry=StrTemp.split(,)用,作为分割符，将 StrTemp 的内容分割成数组 strAryvar n=parseInt(111)将以数字开头的字符串变为数字 像其他编程一样，字符串对象是

59、JavaScript 语句中经常要处理的对象，在这里我们来了解字符串对象的常见属性和方法。创建字符串对象，一般可以通过：var strTemp=”This is a string”;该句得到一个值为 This is a string的字符串变量 strTemp。在 JavaScript 中，经常需要获得 HTML标签所定义的 Input 对象的属性（比如 Value属性）作为一个字符串变量的值。下表为同字符串对象有关的常用方法：请看下列检测用户浏览器信息的例子：function dispBrowser()var userAgent=navigator.userAgent.toLowerCase

60、();if(userAgent.indexOf(msie 6.0)=-1)alert(你的浏览器不是IE6.0的，本网页需要IE6.0才能得到理想显示效果！);简要注释：如果用户的浏览器为IE6.0的版本，通过 var userAgent=navigator.userAgent.toLowerCase();可以得到变量userAgent的值为“mozilla/4.0(compatible;msie 6.0;windows nt 5.0;i-navfourf)”，通过toLowercase()方法，将字符串转化为小写字母，有助于下面的判断字符串是否包含“msie 6.0”，不需要考虑大小写的问题

61、。Navigator对象是浏览器环境所构成的对象。22 of 48WEB 应用开发SydongShttp:/www.ACopyright Sydongsun 2004.All rights reserved.轻轻松松学用 JavaScript 编程软件技术文档轻轻松松学用 JavaScript 编程软件技术文档JavaScript 常用对象的例子WEB 应用开发JavaScript 常用对象的例子WEB 应用开发3.4.2 日期对象3.4.2 日期对象Table 3:日期对象的常用方法例举常用方法简要描述常用方法简要描述getDate()根据当地时间，返回指定日期的天检查用户字符串是否是为整数

62、：function CheckNum(strTemp)if(!isNaN(strTemp)alert(包含有非数字字符！);return false;else var n=parseInt(strTemp);if(n.toString!=strTemp)alert(不是一个正数！);return false;详细注释：该函数用来检查字符串是否为“整数”，常用于检查用户输入的校验。比如，在一些分页显示的Web应用中，需要跳转到某页，此时用户的输入应该为整数数字字符，该函数可以判定用户输入的字符串是否为一个整数。函数中isNaN()是JavaScript的内部函数，对参数进行运算，判断其是否为非数

63、字。若参数为NaN（注释：非数值值），则返回true；否者返回false；parseInt也是一个JavaScript的内部函数，分析一个字符串，并返回给定基数或底数的一个整数（若没有给定基数，则假定基数为10）。对这种应用，还有一个办法就是，在用户输入的时候就限制用户只能输入数字字符（“事先预防机制”比“事后审核机制”是否更好一些呢？通过JavaScript来对用户录入进行有效性验证，对Web服务器来说，也是“事先预防机制”，防止不符要求，不完整的数据信息提交到服务器端），可以采用下面的Input对象：=48&k 上面语句中使用了正则表达式，关于正则表达式的运用，请参看后面“正则表达式的模式

64、匹配”的内容。JavaScript 提供了特殊的内部对象Date对象。利用该对象能够处理日期和时间信息。比如在网页上显示当前日期信息，或者依据不同的时段，给予用户不同的问候（上午好，还是晚上好？周末好？），也可以跟踪用户在网页上逗留了多长时间（如果你不怕麻烦，刻意去提供这种不太重要的功能的话）。创建日期类型的对象的方法有：1。var d_today=new Date();创建一个包含当前时间和日期的 Data对象；2。通过 var d_time=new Date(2004,2,14,20,30,01)表示创建一个 d_time的 Data对象，它的值为 2004 年 2月 14 号 20 点

65、30 分 01 秒。其中的有些参数如果省略的话，JavaScript 会自动以零值补充。像其他语言一样（比如 LotusScript 对于日期对象也有很多方法），JavaScript 对于日期对象也有相应的 方法。以下是一些常用方法的举例：23 of 48WEB 应用开发SydongShttp:/www.ACopyright Sydongsun 2004.All rights reserved.JavaScript 常用对象的例子WEB 应用开发 JavaScript 常用对象的例子WEB 应用开发 轻轻松松学用 JavaScript 编程软件技术文档轻轻松松学用 JavaScript 编程软

66、件技术文档getDay()根据当地时间，返回指定日期的星期几getHours()根据当地时间，返回指定日期的小时getMonth()根据当地时间，返回指定日期的月份getMinutes()根据当地时间，返回指定日期的分钟getYear()根据当地时间，返回指定日期的年份setDate()根据当地时间，设置日期变量的天setHours()根据当地时间，设置日期变量的小时.Table 3:日期对象的常用方法例举常用方法简要描述常用方法简要描述 以下为一个格式化日期显示的例子，文件在随书光盘的 JavaScript 目录下的 JsTest4.htm，它的原来文件为：!-var isnMonths=new initArray(1 月,2 月,3 月,4 月,5 月,6 月,7 月,8 月,9 月,10 月,11 月,12 月)var isnDays=new initArray(星期日,星期一,星期二,星期三,星期四,星期五,星期六,星期日);today=new Date();function initArray()for(i=0;iinitArray.arguments.length;i+)t