轻轻松松学用JavaScript编程.docx
《轻轻松松学用JavaScript编程.docx》由会员分享，可在线阅读，更多相关《轻轻松松学用JavaScript编程.docx（75页珍藏版）》请在冰点文库上搜索。
轻轻松松学用JavaScript编程
Status:
xxx
WEB应用开发
轻轻松松学用JavaScript编程
软件技术文档
V0.1
LastChange:
13-Feb-2004
SydongSun@
CopyrightbySYDONGSUN
------
Author
Approvedby
Name/Dept.:
Date:
Signature:
Name/Dept.:
Date:
Signature:
CopyrightSydongsun2004.Allrightsreserved..
WEB应用开发
SydongSun@
Domino_DOC.book1of48
CopyrightSydongsun2004.Allrightsreserved..
特别感谢Green，我在Green的鼓励下完成本文的书写！
本文来自于作者（Sydongsun@）的一本书稿，该书面向基于LOTUSDOMINO的办公自动化
（OA）软件开发。
书名暂为《轻轻松松学用基于Domino的WEB开发》。
该书稿中的其中有两个章节是关于JavaScript的一些简单介绍。
本文基于该书稿的关于JavaScript的两个章节的内容，有所增加和删改，单列出来。
便于其他学习WEB应用开发的初学JavaScript的参考。
由此可以看出，本文并不是一本集中讨论JavaScript的读物。
只是一本入门向导的快餐式的读物，适合初学者。
本文档的标题为《轻轻松松学用JavaScript编程》，前面的“轻轻松松”有两个含义：
第一，是直接继承
《轻轻松松学用基于Domino的WEB开发》的名字来源。
第二，本文力求简约，简单，篇幅短小，阅读起来容易；从我本身作为JavaScript的学习者的角度来写，我也是一个初学者，无法写就复杂的内容；本文完整的
组件包括三个部分：
本文档本身；本文档中涉及的JavaScript代码例子文件；本文档配套的视频教程（有声有
色的读物，并不是本文档的内容的简单重复，我自己听起来也常常入迷。
真的非常棒！
）；如果你拿到本文的话，一定要有本文配套的例子代码文件，否则学习来是不轻松的。
如果你想更加轻松，让你的学习成为一种享受的话，建议你向作者索取视频教程。
本人乐于将自己所学到的东西，和大家共享。
可以开展我所擅长的内容的培训，比如：
基于IBM（Rational）ClearCase的软件配置管理培训；
基于IBM（Lotus）LotusDomino的办公自动化软件开发培训；基于Oracle的数据库管理员的培训；
基于SAP的ERP某些模块的培训；
面向开发人员的TCP/IP网络协议簇的培训课程（以C语言讲述）；
Solaris系统管理的培训
作者主要采用网络会议系统进行培训。
我们排除距离上的限制，我们可以清晰的交谈。
你可以看到我的桌面操作情况。
如果你共享你的桌面的话，我可以远距离的来检查作业完成情况，帮助解决你开发中遇到的问题。
目录表
目录表..
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
3
配图列表
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
5
列表...
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
6
.
.
.
.
.
.
1说明.....
...........7
CopyrightSydongsun2004.Allrightsreserved.
2
3
1.1主要的内容........
.
.
...
.
.
.7
1.2学习目标.........
.
.
...
.
.
.7
了解JavaScript浏览器上的程序语言........8
2.1
JavaScript操作对象的简单介绍--属性和方法
.
.
...
.
.
.8
2.2
JavaScript代码的加入.......
.
.
...
.
.
10
2.2.1
加入JavaScript代码的方式一.
..
..
..
..
..
..
..
..
..
..
..
.10
2.2.2
加入JavaScript代码的方式二.
.
.
.
.
.
.
.
.
.
.
.
12
2.2.3
加入JavaScript代码的方式三.
.
.
.
.
.
.
.
.
.
.
.
12
JavaScript常用对象的例子...........14
3.1
一个最常用情景的例子..
....
.
.
.
...
.
.
14
3.2
JavaScript文档对象模型图.
....
.
.
.
...
.
.
17
3.3使用单选钮（Radio）和多选钮（Checkbox）的例子..............18
3.4JavaScript中的字符串和日期对象.
.
.
.
.
.
.
.
.
.
.
21
3.4.1字符串对象.......
.
.
.
.
.
.
.
.
.
.
21
3.4.2日期对象...............
..
..
..
..
..
..
..
..
..
..
.22
3.5桢结构和框架窗口（Frame,IFrame）..
..
..
..
..
..
..
..
..
..
..
.24
3.5.1了解链接的Target属性...
.
.
.
.
.
.
.
.
.
.
25
3.5.2由JavaScript，在不同的桢（窗口
）间
访
问
象
.
.
.
.
.
.
27
3.5.3了解IFrame.............
..
..
..
..
..
..
..
..
..
..
.27
对
4正则表达式和模式匹配............28
4.1定义正则表达式................28
4.2字符类...................30
4.3正则表达式的应用例子..............30
.
.
31
.
.
31
5可参考学习的，精美的代码例子........
5.1预载入图片，实现导航按钮的动态效果.......
5.2
显示对象的提示信息.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
34
5.3
一个精美的日历..
.
.
.
.
.
.
.
.
.
.
.
.
.
.
37
5.4
一个下拉菜单...
.
.
.
.
.
.
.
.
.
.
.
.
.
.
38
5.5
类似于资源管理器的树
图
.
.
.
.
.
.
.
.
.
.
.
.
.
42
5.6
一个很好的编辑器.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
45
CopyrightSYdongsunAG2004.Allrightsreserved..
6
总结和作业
..
.
.
.
.
..
.
.
.
.
..
.
.46
6.1总结.
...
.
.
.
.
...
.
.
.
.
...
.
.46
6.2作业....................47
CopyrightSydongxun2004.Allrightsreserved..
配图列表
Figure1:
网页显示效果图1.............................................10
Figure2:
验证用户输入的网页例子......................................14
Figure3:
JavaScript文档对象模型图.....................................17
Figure4:
使用Radio和CheckBox的例子.................................18
Figure5:
含有桢结构的网页文档........................................24
Figure6:
一个包含左右两个桢的例子....................................25
Figure7:
动态变换图片的按钮的网页....................................31
Figure8:
显示对象的提示信息的网页....................................34
Figure9:
精美的日历的例子............................................37
Figure10:
一个下拉菜单的网页例子......................................38
Figure11:
Windows操作系统下的资源管理器..............................42
Figure12:
一个采用Tree图组织内容的网页...............................43
Figure13:
所见即所得的编辑器的网页例子................................45
CopyrightSydongsun2004.Allrightsreserved..
列表
Table1:
Html对象的常用事件列举.........................................9
Table2:
字符串对象的常用方法例举......................................21
Table3:
日期对象的常用方法例举........................................22
Table4:
一些Target属性值..............................................26
CopyrightSydongsun2004.Allrightsreserved..
.
1说明
1.1主要的内容
◆简单介绍JavaScript语言，JavaScript所处理的对象――属性和方法；
◆JavaScript代码加入HTML文档中的方法；
◆JavaScript最常用情景的一个例子――验证用户输入；
◆JavaScript的文档对象模型图；
◆JavaScript的字符串对象和日期对象；
◆窗口对象和框架窗口（FrameSet、IFrame）；
◆正则表达式的模式（Pattern）匹配――验证用户输入；
◆可参考的JavaScript代码：
预载入图片实现导航按钮的动态变化效果；
◆可参考的JavaScript代码：
显示对象的提示信息；
◆可参考的JavaScript代码：
精美的日历；
◆可参考的JavaScript代码：
下拉菜单；
◆可参考的JavaScript代码：
类似于资源管理器的树图；
◆可参考的JavaScript代码：
一个所见所得的编辑器；
从上面这个大纲来看，本文档的内容明显的分为两个部分。
前半部分，也就是一章的内容，主要简单介绍JavaScript，是基础内容，必须要好好的理解。
而后面一部分内容，则是精心选择的代码，借此开拓学习者的视野。
其中精美的日历，下拉菜单，树图是来自国外的共享软件开发者――一些JavaScript专家写就的。
在本文中加以介绍性引用（版权属于原作者），让大家入门之后，如果想进一步深入JavaScript的开发的话，这是优美的，足够我们学习的代码。
当然如果你不想深入下去。
直接想修改使用它们，建议在财力许可和方便的话，请付给这些作品的原作者相应酬劳，尊重他们的劳动成果。
就像你的劳动成果也希望得到别人的尊重一样。
本文的格式上，尽量用褐色字体来表示代码。
本文中的一些名字概念的说法和其他的书本并不一定一致，这是作者的习惯的说法。
但是不会对于你理解
本文的内容有障碍。
为了更好的阅读效果，作者建议你打印本文档。
本文档不到50页，如果你缩印成50%打印的话，是很小的一本册子，也许会增加你学习的信心。
1.2学习目标
通过本文档的阅读，开发人员应该掌握下列内容：
1．用JavaScript来访问浏览器环境和HTML语言所构成的现成对象的方法；
2．熟悉JavaScript文档对象模型；在心中有个清楚的轮廓；
3．进一步学习JavaScript的能力获得；
CopyrightSydongsun2004.Allrightsreserved..
2了解JavaScript浏览器上的程序语言
为了提供给最终用户以使用方便、界面美观的用户感受，很多基于特定的客户端程序，都转向趋向于采用浏览器客户端的应用。
而早期的静态的、缺乏交互的HTML页面文档适应不了这种要求。
JavaScript是一种基于对象的脚本编程语言，是“浏览器”上的程序语言。
当Web服务器输出内容（包括JavaScript的程序代码）到浏览器时，此时，JavaScript可以操纵浏览器上的一切内容，在浏览器上提供用户交互，界面美化，增加Web界面的“智能性”。
我们知道：
JavaScript是一种脚本语言，是同HTML文档一起使用的，WEB服务器产生输出HTML内容的同时，也输出一些JavaScript程序代码到浏览器客户端。
JavaScript由浏览器解释执行，不同的浏览器，或者是同一浏览器的不同版本，对JavaScript的支持会有一些差异。
本书不讨论这些问题，并假定用户采用IE5.0以上版本的浏览器。
JavaScript是一种基于对象的语言，通过JavaScript代码来操作对象――访问或者设置对象的属性，编写对象的特定的事件（方法）代码。
2.1JavaScript操作对象的简单介绍--属性和方法
JavaScript中的对象是由属性（properties）和方法（methods）两个基本的元素的构成的。
前者是对象在实施其所需要行为的过程中，实现信息的装载单位，从而与变量相关联；后者是指对象能够按照设计者的意图而被执行，从而与特定的函数相联。
对象从哪里来？
JavaScript可以操作的对象有下列三个来源：
◆浏览器环境和HTML标签语句所构成的现成对象（链接、图像、插件、HTML表单元素、浏览器细节
等）；
◆通过JavaScript的内置类所创建的对象，比如Data（日期）和Number（数值）；
◆通过JavaScript编程，用户自己创建的对象；
本章的内容将涵盖以上三种情形的对象，一般来说，我们需要熟悉JavaScript的前两种的访问对象的方法。
那些精通JavaScript程序编写的设计人员，他们常通过JavaScript程序，实现复杂的类，然后由类来创建对象。
比如漂亮的日历、用于网站内容导航的下拉菜单、树状图，等等。
我们只是Domino程序设计人员，除非我们能够编写比他们更好的JavaScript类，一般我们可以直接借用那些精通JavaScript编程的设计者的成果。
Internet的目的之一是满足资源和信息的共享，毫无疑问，这也包括能够让我们共享到那些精通JavaScript的编程者的优秀成果。
一般的对象有哪些方法（事件）呢？
对于HTML标签语句所构成的现成的对象，我们列举一些用于说明。
在本书的第一部分，我们提及到：
万事万物皆对象，日常生活中的对象具有各自的特性和行为。
在面向对象的程序设计中，对应为属性和方法。
在JavaScript的对象中，有很多以on开头的方法，比如onLoad、onClick、onMouseOver、onMouseOut等等，代表特定的事件。
很多对象都具有以上方法。
比如onClick事件，当鼠标点击某个对象时，这个对象可以是一个按钮、或者是表格的一行、一个图片、一个链接等。
通过
onClick所关联的JavaScript程序代码，做各种处理。
onMouseOver和onMouseOut分别是指当鼠标移到和移出某个对象的区域时，所触发的事件，通过它们联接的JavaScript代码做各种处理。
我们来看下列HTML语句：
submitCreate（）;
name=btnHtmNewtitle=新建申请表单type=buttonvalue=新建>
CopyrightSydongsun2004.Allrightsreserved..
.
以上是一个“新建”按钮对象，从上面HTML标签语句，可以看出该按钮对象的属性有Class、Name、Value。
该按钮的事件代码有onMouserOver和onMouseOut以及onClick。
其中前两个事件（鼠标移到和移开按钮时）的作用是：
变更该对象的Class属性值，在该页面的所引用的CSS文件中，分别指定了
btnmenuview和btnmenuviewmouseover的外观风格，从而是当鼠标移动到按钮后，该按钮的外观
会发生变化的动态效果。
OnClick事件是当用户点击按钮时，触发的JavaScript代码。
这里将这些代码放置在
submitCreate（）函数当中。
再来看看onLoad事件，当用户把Web页导入到浏览器之后，与该页（或文档）相关联的onLoad事件处理程序被执行；下面是调用该事件的例子：
onLoad事件的应用较多，它的应用情景为：
当网页到入到浏览器后，需要完成一些自动处理过程，这些处理过程（比如执行运算，或者显示信息）的JavaScript代码可以放在
标签所指的对象的onLoad事件所关联的函数中。
下面表格中列出常用的一些事件、这些事件的触发原因以及常常使用这些事件的对象例举：
Table1:
Html对象的常用事件列举
事件名称
触发时间
对象例举
OnBlur
对象失去输入焦点
窗口和所有的表单对象
OnChange
用户改变对象的值
文本框、文本区域、选择列表等
OnClick
用户鼠标点击
链接、按钮、单选钮、多选钮等
OnFocus
获得输入焦点时
窗口和所有的表单对象
OnKeyDown
用户按下一个键时
表单对象，比如输入框、文本区域等
OnKeyUp
用户释放一个键时
表单对象，比如输入框、文本区域等
OnMouseDown
用户按下鼠标时
文档，按钮、链接、图像、表格等
OnMouseOut
鼠标从某个对象移开时
文档，按钮、链接、图像、表格等
OnMouseOver
鼠标移到某个对象
文档，按钮、链接、图像、表格等
OnReset
表单复位时
表单
OnResize
窗口尺寸变化时
窗口
OnSubmit
表单提交时
表单
CopyrightSydongsun2004.Allrightsreserved..
2.2JavaScript代码的加入
从上一小节内容，我们已经对JavaScript中的对象、对象的属性方法和方法有了初步的了解，我们进一步了解下一个问题：
JavaScript代码应该放在Web页的什么位置呢？
JavaScript的脚本包括在HTML中，它成为HTML文档的一部分。
与HTML标识相结合，构成动态
的、能够交互的网页。
JavaScript的代码的加入，通过在Web页中直接写入：
//JavaScript语言代码；
//JavaScript语言代码；
//…
注释：
◆通过标识指明其中包含的是Script脚本代码；
◆通过Language="J
升级会员 