栏目导航

热点推荐

阅览排行

当前位置：主页>网络编程>Javascript教程>资讯:JavaScript基本语法－其他常用事

JavaScript基本语法－其他常用事

www.jz123.cn 2009-01-02 来源: 中国建站编辑整理我要投递新闻

在JavaScript脚本中，其他常用的事件如下表所示
常用事件

事件              描述
-----------------------------------------------------------------------------------
onAbort事件     当页面上图像没完全下载时，访问者单击浏览器上停止按钮的事件，适用于Netscape Communicator 3.0及以上，Internet Explore 4.0及以上浏览器。
onAfterUpdate事件     页面特定数据元素完成更新的事件，适用于Internet Explore4.0及以上浏览器
onBeforeUpdate事件     页面特定数据元素被改变且失去焦点的事件，适用于Internet Explore4.0及以上浏览器
onBounce事件     移动的Marquee文字到达移动区域边界的事件，适用于Internet Explore4.0及以上浏览器
onError事件     页面或页面图像下载出错事件，适用于Netscape Communicator 3.0及以上，Internet Explore 4.0及以上浏览器。
onFinish事件     移动的Marquee文字完成一次移动的事件，适用于Internet Explore4.0及以上浏览器
onHelp事件     访问者单击浏览器上帮助按钮的事件，适用于Internet Explore4.0及以上浏览器
onKeyDown事件     访问者按下键盘一个或几个键的事件，适用于Netscape Communicator 4.0及以上，Internet Explore 4.0及以上浏览器。
onKeyPress事件     访问者按下键盘一个或几个键后且释放的事件，适用于Netscape Communicator 4.0及以上，Internet Explore 4.0及以上浏览器。
onKeyUp事件     访问者按下键盘一个或几个键后且释放的事件，适用于Netscape Communicator 4.0及以上，Internet Explore 4.0及以上浏览器。
onMouseDown事件     访问者按下鼠标按钮的事件，适用于Netscape Communicator 3.0及以上，Internet Explore 4.0及以上浏览器。
onMouseMove事件     访问者鼠标在某页面元素范围内移动的事件，适用于Netscape Communicator 4.0及以上，Internet Explore 4.0及以上浏览器。
onMouseUp事件     访问者松开鼠标按钮的事件，适用于Netscape Communicator 3.0及以上，Internet Explore 4.0及以上浏览器。
onMove事件     窗口或窗框被移动的事件，适用于Internet Explore 4.0及以上浏览器。
onReadyStateChange事件     特定页面元素状态被改变的事件，适用于Internet Explore 4.0及以上浏览器。
onReset事件     页面上表单元素的值被重置的事件，适用于Netscape Communicator 3.0及以上，Internet Explore 3.0及以上浏览器。
onResize事件     访问者改变窗口或窗框大小的事件，适用于Netscape Communicator 4.0及以上，Internet Explore 4.0及以上浏览器。
onScroll事件     访问者使用滚动条的事件，适用于Internet Explore 4.0及以上浏览器。
onStart事件     Marquee文字开始移动的事件，适用于Internet Explore 4.0及以上浏览器。
onSubmit事件     页面上表单被提交的事件，适用于Netscape Communicator 3.0及以上，Internet Explore 3.0及以上浏览器。

JavaScript的对象

面向对象的程序设计方法并不是一个新概念，它的历史可以追溯到30年前。目前，面向对象的设计方法被认为是一种比较成功和成熟的设计方法，广泛地应用在各种程序设计语言中。典型的面向对象的程序设计方法有以下3个特性：
● 封装性（Encapsulation）：封装是面向对象的程序设计方法的一个重要的设计原则，也就是将对象中的各种属性和方法按照适当的安排，给定一组可以提供给外部使用者访问的权限，从而保证使用者不会因为错误的、恶意的或者是非授权的对象内部细节的访问而影响对象、甚至这个程序的各种行为。另外，如果这些对象的外部使用的方法和功能不发生改变，那么使用这些对象的程序也不会发生变化。
● 继承性（Inheritance）：从一种对象类型引申到另外一种对象的类型的主要的方法就是继承。这样，子对象就可以继承父对象所有已经定义好的属性和方法，而不必重新定义这些属性和方法。如果子对象有自己独有的属性和方法，可以在继承的时候单独定义。通过这样的操作，子对象就可以拥有一部分父对象的内容，并还可以拥有一部分自己独有的内容。
● 多态性（Polymorphism）：随着基本对象类型以及各种继承对象类型的不断增加，对这些对象所拥有的各种方法进行管理就成为一个非常重要的问题。在传统的面向过程的的语言中，一般不允许使用同样的名字来命名一个函数或是方法，即使这些函数的处理功能是相同的。在面向对象的程序设计中，由于各种方法所从属的对象本身旧有一定的层次关系。对完成同样功能的方法，就可以起同样的名字。于是，大大简化了对象方法的调用的过程，使用者只要记住一些基本的操作，剩余的工作交给程序完成就可以了。
JavaScript语言是基于对象的（Object-Based），把复杂对象统一起来，从而形成一个非常强大的对象系统。JavaScript实际上并不完全支持面向对象的程序设计方法。例如，它不支持分类、继承和封装等面向对象的基本特性。JavaScript可以说市一种基于对象的脚本语言，它支持开发对象类型以及根据这些对象产生一定数量的实例。同时它还支持开发对象的可重用性，以便实现一次开发、多次使用的目的。
在JavaScript中我们可以使用以下几种对象：
● 由浏览器根据Web页面的内容自动提供的对象
● JavaScript内置的对象，如Data、Math以及String
● 用户自定义的对象
浏览器对象
浏览器对象就是网页和浏览器本身各种实体元素在JavaScript程序中的体现。这样的浏览器对象主要包括以下几个
● Navigator：管理者当前使用浏览器的版本号、运行的平台以及浏览器使用的语言等信息。
● Windows对象：处于整个从属表的最顶级位置。每一个这样的对象代表一个浏览器窗口。
● Location对象：含有当前网页的URL地址。
● Document对象：含有当前网页的各种特性，例如标题、背景感以及使用的语言等。
● History对象：含有以前访问过的网页的URL地址。
使用浏览器的内部对象系统，可实现于HTML文档进行交互。它的作用是将相关元素组织包装起来，提供给程序设计人员使用，从而减轻编程人的劳动，提高设计Web页面的能力。
1.Navigator对象
Navigator对象提供关于整个浏览器环境的信息，浏览器对象Navigator中常用的属性有如下几项：
● AppName：提供字符串形式的浏览器名称。在使用Navigator时，appName的值为NetScape；在使用Internet Explorer时， appName的值为MSIE。
● AppVersion：反映浏览器的版本号。
● AppCodeName：反映用字符串表示的当前浏览器的代码名字。对于Navigator的所有版本，这个值都是Mozilla。
文件范例：15-24.htm
在脚本中使用Navigator对象。
01 
02 
03 
04 
05 <HTML>
06 <HEAD>
07 <TITLE>Navagator对象</TITLE>
08 </HEAD>
09 <BODY>
10 <script language="javascript">
11 
14 </Script>
15 </BODY>
16 </HTML>
文件说明
第12行调用浏览器的名称和版本号。
2.Windows对象
窗口对象包括许多有用的属性、方法和事件驱动程序，编程人员可以利用这些对象控制浏览器窗口显示的各个方面，如对话框、框架等。
下面列出一些常用Windows对象的方法。
● open（URL，windowName，parameterList）：open方法创建一个浏览器窗口，并在新窗口中载入一个指定的URL地址。
● close（）： close方法关闭一个浏览器窗口。
● alert（）：弹出一个消息框。
● confirm（）：弹出一个确认框。
● prompt（）：弹出一个提示框。
文件范例：15-25.htm
在脚本中使用Windows对象
01 
02 
03 
04 
05 <HTML>
06 <HEAD>
07 <TITLE>Window对象</TITLE>
08 </HEAD>
09 <BODY>
10 <script language="javascript">
11 
14 </Script>
15 </BODY>
16 </HTML>
文件说明
第12行使用Windows对象的 open方法打开9-1.htm页面，并设定了新窗口的名称、宽度、高度、位置及窗口属性。
3.Location对象
Location对象是当前网页的URL地址，可以使用Location对象来让浏览器打开某页。
文件范例：15-26.htm
在脚本中使用Windows对象
01 
02 
03 
04 
05 <HTML>
06 <HEAD>
07 <TITLE>Location对象</TITLE>
08 </HEAD>
09 <BODY>
10 <form>
11 <Input type="button" Value="请点击我" onclick="window.location.href='9-1.htm';">
12 </form>
13 </BODY>
14 </HTML>
文件说明
第11行使用Location对象，设定了打开页面的路径。
4.Document对象
在Document中主要有links、anchor、form等3个最重要的对象。
● Anchor锚对象
Anchor对象指的是<A Name=…> </A>标识在HTML源码中存在时产生的对象.它包含着文档中所有的anchor信息。
● Links链接对象
Links对象指的是用<A Href=…></A>标记链接一个超文本或超媒体的元素作为一个特定的URL
● Form窗体对象
窗体对象是文档对象的一个元素,它含有多种格式的对象储存信息,使用它可以在JavaScript脚本中编写程序进行文字输入,并可以用来动态改变文档的行为。通过Document.Forms[ ]数组来使得在同一个页面上可以有多个相同的窗体，使用Forms[ ]要比使用窗体名字方便的多。
文件范例：15-27.htm
在脚本中使用Document对象
01 
02 
03 
04 
05 <HTML>
06 <HEAD>
07 <TITLE>Document对象</TITLE>
08 </HEAD>
09 <BODY>
10 <form>
11 <input type=text onChange="document.my.elements[0].value=this.value;">
12 </form>
13 <form NAME="my">
14 <input type=text onChange="document.forms[0].elements[0].value=this.value;">
15 </form>
16 </BODY>
17 </HTML>
文件说明
第11行使用窗体，第14行使用窗体数组Forms[ ]。
5.History对象
History对象含有以前访问过的网页的URL地址。如下面的案例使用这个对象来制作页面中的前进和后退按钮。
文件范例：15-28.htm
在脚本中使用History对象。
01 
02 
03 
04 
05 <HTML>
06 <HEAD>
07 <TITLE>History对象</TITLE>
08 </HEAD>
09 <BODY>
10 <FORM>
11 <INPUT TYPE="button" VALUE="后退" onClick="history.go(-1)">
12 <INPUT TYPE="button" VALUE="前进" onClick="history.go(1)">
13 </FORM>
14 </BODY>
15 </HTML>
文件说明
第11行使用history.go(-1)制作后退，第12行使用history.go(1)制作前进。
JavaScript内置对象
作为一门编程语言，JavaScript提供了一些内置的对象和函数。内置对象提供编程的几种最常用的功能。JavaScript内置对象有以下几种。
● String对象：处理所有的字符串操作
● Math对象：处理所有的数学运算
● Date对象：处理日期和时间的存储、转化和表达
● Array对象：提供一个数组的模型、存储大量有序的数据
● Event对象：提供JavaScript事件的各种处理信息
内置对象都有自己的方法和属性，访问的方法如下：
    对象名.属性名称
    对象名.方法名称(参数表)
1.时间对象
时间对象是JavaScript的内置对象,使用前必须先声明。
基本语法
     var curr=new Data();
注意这里的关键字new的用法，Data()的首字母必须大写。
语法解释
利用new来声明一个新的对象实体。使用new操作符的语法如下：
    实例对象名称=new对象名称（参数列表）
Date对象提供了以下3类方法：
● 从系统中获得当前的时间和日期
● 设置当前的日期和时间
● 在时间、日期同字符串之间完成转换
下表介绍了最常用的获得系统的时间和日期的方法
Date对象中处理时间和日期的方法

方法种类              方法名称      功能描述
-------------------------------------------------------------------------------
      获得时间或日期         getDate       获得当前的日期
      获得时间或日期         getDay       获得当前的天
      获得时间或日期         getHours       获得当前的小时
      获得时间或日期         getMinutes       获得当前的分钟
      获得时间或日期         getMonth       获得当前的月份
      获得时间或日期         getSeconds       获得当前的秒
      获得时间或日期         getTime       获得当前的时间（毫秒为单位）
      获得时间或日期         getTimeZoneOffset       获得当前的时区偏移信息
      获得时间或日期         getYear       获得当前的年份
文件范例:15-29.htm
在脚本中使用时间对象
01 
02 
03 
04 
05 <HTML>
06 <HEAD>
07 <TITLE>使用时间对象</TITLE>
08 <script language=javascript>
09 var timestr,datestr;
10 function clock()
11 {
12 now=new Date();
13 hours=now.getHours();
14 minutes=now.getMinutes();
15 seconds=now.getSeconds();
16 timestr=""+hours;
17 timestr+=((minutes<10)?":0":":")+minutes;
18 timestr+=((seconds<10)?":0":":")+seconds;
19 document.clock.time.value=timestr;
20 date=now.getDate();
21 month=now.getMonth()+1;
22 year=now.getYear();
23 datestr=""+month;
24 datestr+=((date<10)?"/0":"/")+date;
25 datestr+="/"+year;
26 document.clock.date.value=datestr;
27 timer=setTimeout("clock()",1000);
28 }
29 </script>
30 </HEAD>
31 <BODY onLoad=clock()>
32 <form name=clock>
33 time:
34 <input type=text name=time size=8 value=""><br>
35 DATE:
36 <input type=text name=date size=8 value=""><br>
37 </form>
38 </BODY>
39 </HTML>
文件说明
第09行到第28行定义了函数，第27行的setTimeout("clock()",1000)语句的含义是每隔1000毫秒调用clock()一次，这样时钟就可以走了。第31行调用这个clock()函数。
2.数学对象
内置的Math对象可以用来处理各种数学运算.其中定义了一些常用的数学常数，例如圆周率PI=3.1415926等.各种运算被定义为Math对象的内置方法，可以利用直接调用的方法。
基本语法
    Math.数学函数(参数)
或者
01 with(Math)
02 {
03         数学函数
04 }
语法解释
with语句提供了一种简单和清晰的方法来表达其属性和方法之间的关系。简单地说，在 with与语句的作用范围之内，凡是没有指出对象的属性和方法，都是指默认的对象，这个默认的对象在 with语句的开头给出。使用 with语句的语法如下：
01 with（对象名称）
02 {
03          语句块……
04 }
文件范例：15-30.htm
在脚本中使用数学对象
01 
02 
03 
04 
05 <HTML>
06 <HEAD>
07 <TITLE>使用数学对象</TITLE>
08 </HEAD>
09 <BODY>
10 <script language="javascript">
11 a=Math.sin(1);
12 document.write(a)
13 </script>
14 </BODY>
15 </HTML>
文件说明
第11行使用了Math对象算出了弧度为1的角度的sin值。
3.字符串对象
一般利用String对象提供的函数来处理字符串。String对字符串的处理主要提供了下列方法。
● charAt（idx）：返回指定位置处的字符
● indexOf（Chr）：返回指定子字符串的位置，从左到右。找不到返回-1。
● lastIndexOf（chr）：返回指定子字符串的位置，从右到左。找不到返回-1。
● toLowerCase（）：将字符串中的字符全部转化成小写。
● toUpperCase（）：将字符串中的字符全部转化成大写。
文件范例：15-31.htm
在脚本中使用字符串对象
01 
02 
03 
04 
05 <HTML>
06 <HEAD>
07 <TITLE>使用字符串对象</TITLE>
08 </HEAD>
09 <BODY>
10 <script language="javascript">
11 var mystring="I am husong"
12 a=mystring.charAt(7)
13 b=mystring.indexOf("am")
14 document.write(a)
15 document.write ("<br>")
16 document.write (b)
17 </script>
18 </BODY>
19 </HTML>
文件说明
第12行使用了String对象的charAt方法得出了第7各字母的内容，第13行使用了String对象的indexOf方法得出指定字符串am的位置。
4.数组对象
基本上所有的编程语言都提供数组对象,数组将同类的数据组织在一起,访问起来非常方便而且效率高.如Java语言和C语言等.JavaScript和C语言一样，数组的下标是丛零开始的。创建数组后，能够用[ ]符号访问数组单个元素。
文件范例：15-32.htm
在脚本中使用数组对象
01 
02 
03 
04 
05 <HTML>
06 <HEAD>
07 <TITLE>使用数组对象</TITLE>
08 </HEAD>
09 <BODY>
10 <script language="javascript">
11 var my_array = new Array();
12 for (i = 0; i < 10; i++)
13 {
14 my_array[i] = i;
15 }
16 x = my_array[4];
17 document.write (x)
18 </script>
19 </BODY>
20 </HTML>
文件说明
由于数组的下标是从零开始的，第16行访问数组的第5个元素。该元素保存的值是4。
自定义对象
除了使用JavaScript预先定义好的一些对象以外，用户完全可以创建自己的对象。创建对象需要以下3各步骤。
● 定义一个构造用来说明这个对象的各种属性，以及对各种属性加以初始化
● 创建对象需要的各种方法
● 使用new语句创建这个对象的实例
定义一个对象的目的就是要使用这个对象，我们着种分析一下对象的属性和方法。一个对象含有自己的属性和方法，可以采用如下的方法来访问对象实例的属性：
对象实例名称.属性名称
使用下面的方法定义的Card对象,定义的属性有4个:name、address、work、home
01   function Card(name,address,work,home)
02   {this.name=name;
03   this.address=address;
04   this.work＿phone=work;
05   this.home＿phone=home;
06   this.PrintCard=PCard;
07   this.Pname=Pname;
08   }
这里的this指的是当前的对象。该对象包含两个处理方法：Pcard和Pname。所谓的方法就是一个函数，与普通函数的区别是：方法附属于一个对象。通俗地说，方法就是一个对象自己所属的函数。方法的定义过程和普通函数没有本质的区别。惟一的不同在于在于，定义一个对象的方法，除了要定义函数以外，还必须在适当的地方将方法和对象联系起来，让JavaScript的解释器知道每一种方法究竟属于那一个对象。
对象的方法定义完全和普通的函数一样，其中也可以调用其他函数，包括JavaScript内置的函数以及用户自定义的函数。用户自定义的函数包括当前对象中的方法。
文件范例：15-33.htm
在脚本中使用自定义对象
01 
02 
03 
04 
05 <HTML>
06 <HEAD>
07 <TITLE>使用自定义对象</TITLE>
08 <script language="JavaScript">
09 function PCard()
10 { document.write("<b>Name:</b>",this.name,"<br>");
11 document.write("<b>Address:</b>",this.address,"<br>");
12 document.write("<b>WorkPho:</b>",this.work_phone,"<br>");
13 document.write("<b>HomePhone:</b>",this.home_phone,"<hr>");
14 }
15 function Pname()
16 {
17 document.write("<b>Name:</b>",this.name,"<br>");
18 }
19 function Card(name,address,work,home)
20 { this.name=name;
21 this.address=address;
22 this.work_phone=work;
23 this.home_phone=home;
24 this.PrintCard=PCard;
25 this.Pname=Pname;
26 }
27 </script>
28 </head>
29 <body>
30 <script language="JavaScript">
31 sue=new Card("sueers","123-street","555-123","555-134");
32 phr=new Card("phre","145-street","555-137","555-234");
33 henry=new Card("heny","134-street","555-167","555-234");
34 sue.PrintCard();
35 phr.PrintCard();
36 henry.PrintCard();
37 sue.Pname();
38 </script>
39 </body>
40 </html>
文件说明
第8行到第18行定义的两个函数是对象中的方法，定义方法和定义普通函数没有任何区别。第19行道第26行是要定义对象的构造函数，对象的属性一般就是构造函数的参数。在这里将上面定义的两个函数声明为该对象的方法。第31行到第33行的3条语句利用new关键字定义了3各对象的实例：sue、phr、heny。第34行到第36行的3条语句输出的分别是sue、phr和henry的卡片的信息。

顶一下

上一篇：JavaScript confirm 确认提示框下一篇：JavaScript基本语法－JavaScript的事件

栏目导航

热点推荐

阅览排行

JavaScript基本语法－其他常用事

相关文章列表

评论总数：2 条 [ 查看全部 ] 网友评论