JavaScript概述

来源:互联网 发布:淘宝的会员名可以改吗 编辑:程序博客网 时间:2024/05/01 07:55
JavaScript概述

2003-7-30 17:48:31      阅读403次

JavaScript应用 


       JavaScript是一种基于对象(Object)和事件驱动(Event Driven)并具有安全性能的脚本语言。

       使用它的目的是与HTML超文本标记语言、Java 脚本语言(Java小程序)一起实现在一个Web页面中链接多个对象,与Web客户交互作用。从而可以开发客户端的应用程序等。

       它是通过嵌入或调入在标准的HTML语言中实现的。它的出现弥补了HTML语言的缺陷,它是Java与HTML折衷的选择。

 

2


JavaScript和Java的区别 


    虽然JavaScript与Java有紧密的联系,但却是两个公司开发的不同的两个产品。

    Java是SUN公司推出的新一代面向对象的程序设计语言,特别适合于Internet应用程序开发;Java的前身是Oak语言。

    而JavaScript是Netscape公司的产品,其目的是为了扩展Netscape Navigator功能,而开发的一种可以嵌入Web页面中的基于对象和事件驱动的解释性语言, 它的前身是Live Script。

 

3


JavaScript 有什么特点


JavaScript 使网页增加互动性。

JavaScript 使有规律地重复的HTML文段简化,减少下载时间。

JavaScript 能及时响应用户的操作,对提交表单做即时的检查,无需浪费时间交由 CGI 验证。

JavaScript 的特点是无穷无尽的,只要你有创意。

 

4


开发 JavaScript 该用什么软件


    一个 JavaScript 程序其实是一个文档,一个文本文件。它是嵌入到 HTML 文档中的。所以,任何可以编写 HTML 文档的软件都可以用来开发 JavaScript。

    推荐大家用 FrontPage 2000 附带的 Microsoft 脚本编辑器(在 FrontPage 菜单 | 工具 | 宏 | Microsoft 脚本编辑器)。它是个像 Visual Basic / C++ 一样的程序开发器,能对正在输入的语句作出简要提示。配合 FrontPage 2000,使工作量大大减少。


 

5


在什么地方插入 JavaScript


  JavaScript 可以出现在 HTML 的任意地方。使用标记<script>…</script>,你可以在 HTML 文档的任意地方插入 JavaScript,甚至在<HTML>之前插入也不成问题。不过如果要在声明框架的网页(框架网页)中插入,就一定要在<frameset>之前插入,否则不会运行。


 

6


编写第一个JavaScript程序 


<html>
<head> 
<Script Language ="JavaScript">
// JavaScript Appears here.
alert("这是第一个JavaScript例子!");
alert("欢迎你进入JavaScript世界!"); 
alert("我们共同学习JavaScript知识!");
</Script> 
</Head>
<body>
</body>
</Html>


使用SRC=URL属性


<html>
<head> 
<Script SRC =“file.js">
</Script> 
</Head>
<body>
</body>
</Html>


使用language=“JavaScript”属性


         在HTML中, JavaScript源码用<!--,“语句”,-->中注释,其好处为:对于不能解释的浏览器不执行代码,而对于可以解释JavaScript的浏览器不会受到任何妨碍。

 

7


注意


相对于<script>标记,还有一个<server>标记。<server>标记所包含的是服务器端(Server Side)的脚本。

如果想在浏览器的“地址”栏中执行 JavaScript 语句,用这样的格式:javascript:<JavaScript语句>

这样的格式也可以用在连接中:

<a href="javascript:<JavaScript语句>">...</a>


 

8


JavaScript 基本语法


每一句 JavaScript 都有类似于以下的格式:

    <语句>;

其中分号“;”是 JavaScript 语言作为一个语句结束的标识符。

语句块 语句块是用大括号“{ }”括起来的一个或 n 个语句。在大括号里边是几个语句,但是在大括号外边,语句块是被当作一个语句的。语句块是可以嵌套的,也就是说,一个语句块里边可以再包含一个或多个语句块。

 

9


JavaScript 中的变量


变量的命名 变量的命名有以下要求:

  1)只包含字母、数字和/或下划线;
2)要以字母开头;
3)不能太长;
4)不能与 JavaScript 保留字重复。

而且,变量是区分大小写的,例如,variable 和 Variable 是两个不同的变量。

变量需要声明 没有声明的变量不能使用,否则会出错:“未定义”。声明变量可以用:

        var <变量> [= <值>]


 

10


数据类型


数据类型变量可以用的数据类型有:

整型 只能储存整数。可以是正整数、0、负整数,可以是十进制、八进制、十六进制。八进制数的表示方法是在数字前加“0”,如“0123”表示八进制数“123”。十六进制则是加“0x”:“0xEF”表示十六进制数“EF”。

浮点型 即“实型”,能储存小数。有资料显示,某些平台对浮点型变量的支持不稳定。没有需要就不要用浮点型。

字符串型 是用引号“" "”、“' '”包起来的零个至多个字符。用单引号还是双引号由你决定。


 

11


数据类型


转义字符 由于一些字符在屏幕上不能显示,或者 JavaScript 语法上已经有了特殊用途,在要用这些字符时,就要使用“转义字符”。

转义字符用斜杠“/”开头:/‘ 单引号、/“ 双引号、/n 换行符、/r 回车。于是,使用转义字符,就可以做到引号多重嵌套:’Micro 说:”这里是/“JavaScript 教程/”。“ ‘


布尔型 常用于判断,只有两个值可选:true(表“真”)和 false(表“假”)。true 和 false 是 JavaScript 的保留字。它们属于“常数”。

对象 关于对象,在“对象化编程”中详细讲到。

 

12


数据类型


由于JavaScript 对数据类型的要求不严格,一般来说,声明变量的时候不需要声明类型。而且就算声明了类型,在过程中还可以给变量赋予其他类型的值。

声明类型可以用赋予初始值的方法做到:

      var aString = '';

这将把aString定义为具有空值的字符串型变量。

      var anInteger = 0;

变量的赋值 一个变量声明后,可以在任何时候对其赋值。赋值的语法是:<变量> = <表达式>;

其中“=”叫“赋值符”,它的作用是把右边的值赋给左边的变量。

 

13


JavaScript常数


JavaScript常数 有下列几个:

null 一个特殊的空值。

NaN “Not a Number”。

true 布尔值“真”。用通俗的说法,“对”。
false 布尔值“假”。用通俗的说法,“错”。

在 Math 对象中还有一系列数学常数。这将在讨论“对象化编程”时谈到。


 

14


注释


像其他所有语言一样,JavaScript 的注释在运行时也是被忽略的。注释只给程序员提供消息。

JavaScript 注释有两种:单行注释和多行注释。

单行注释用双反斜杠“//”表示。当一行代码有“//”,那么,“//”后面的部分将被忽略。

多行注释是用“/*”和“*/”括起来的一行到多行文字。程序执行到“/*”处,将忽略以后的所有文字,直到出现“*/”为止。


 

15


语句


if 语句

if ( <条件> ) <语句1> [ else <语句2> ];

<条件>是布尔值,必须用小括号括起来;<语句1>和<语句2>都只能是一个语句,欲使用多条语句,请用语句块。

请看下例:

if (a == 1) {
  if (b == 0) alert(a+b);
} else {
  alert(a-b);
}


 

16


循环体


for (<变量>=<初始值>; <循环条件>; <变量累加方法>) <语句>;

本语句的作用是重复执行<语句>,直到<循环条件>为 false 为止。

for (i = 1; i < 10; i++) document.write(i);

和 if 语句一样,<语句>只能是一行语句,如果想用多条语句,你需要用语句块。

 

17


循环体


除了 for 循环,JavaScript 还提供 while 循环。

while (<循环条件>) <语句>;

while 循环的作用满足<循环条件>时执行<语句>。

break 和 continue

有时候在循环体内,需要立即跳出循环或跳过循环体内其余代码而进行下一次循环。

break;本语句放在循环体内,作用是立即跳出循环。

continue;本语句放在循环体内,作用是中止本次循环,并执行下一次循环。

 

18


循环体


switch 语句是解决多种条件判断的最好方法。

switch (e) {
  case r1: (注意:冒号)
    ...
    [break;]
  case r2:
    ...
    [break;]
  ...
  [default:
    ...]


 

19


循环体


switch 语句是解决多种条件判断的最好方法。

switch (e) {
  case r1: (注意:冒号)
    ...
    [break;]
  case r2:
    ...
    [break;]
  ...
  [default:
    ...]


 

20


编写第一个JavaScript程序 


<html>
<head> 
<Script Language ="JavaScript">
<!--

// JavaScript Appears here.
alert(“这是第一个JavaScript例子!”);
alert(“欢迎你进入JavaScript世界!”); 
alert(“我们共同学习JavaScript知识!”);

-->

</Script> 
</Head>
<body>
</body>
</Html>


   在HTML中, JavaScript源码用<!--,“语句”,-->中注释,其好处为:对于不能解释的浏览器不执行代码,而对于可以解释JavaScript的浏览器不会受到任何妨碍。

 

21


对象化编程 


        JavaScript 是使用“对象化编程”的,或者叫“面向对象编程”的。

        所谓“对象化编程”,意思是把 JavaScript 能涉及的范围划分成大大小小的对象,对象下面还继续划分对象直至非常详细为止,所有的编程都以对象为出发点,基于对象。

        对象:小到一个变量,大到网页文档、窗口甚至屏幕,都是对象。

 

22


对象的基本知识 


  对象是可以从 JavaScript“势力范围”中划分出来的一小块,可以是一段文字、一幅图片、一个表单(Form)等等。

  每个对象有它自己的属性、方法和事件。

  对象的属性是反映该对象某些特定的性质的,例如:字符串的长度、图像的长宽、文字框(Textbox)里的文字等等;

  对象的方法能对该对象做一些事情,例如,表单的“提交”(Submit),窗口的“滚动”(Scrolling)等等;

  而对象的事件就能响应发生在对象上的事情,例如提交表单产生表单的“提交事件”,点击连接产生的“点击事件”。

  不是所有的对象都有以上三个性质,有些没有事件,有些只有属性。引用对象的任一“性质”用“<对象名>.<性质名>”这种方法。

 

23


基本对象


Number “数字”对象

属性

1.MAX_VALUE 用法:Number.MAX_VALUE;返回“最大值”。2.MIN_VALUE 用法:Number.MIN_VALUE;返回“最小值”。
3.NaN 用法:Number.NaN 或 NaN;返回“NaN”。“NaN”(不是数值)

4.NEGATIVE_INFINITY 用法:Number.NEGATIVE_INFINITY;返回:负无穷大,比“最小值”还小的值。
5.POSITIVE_INFINITY 用法:Number.POSITIVE_INFINITY;返回:正无穷大,比“最大值”还大的值。

 

24


基本对象


Number “数字”对象

属性

1.MAX_VALUE 用法:Number.MAX_VALUE;返回“最大值”。2.MIN_VALUE 用法:Number.MIN_VALUE;返回“最小值”。
3.NaN 用法:Number.NaN 或 NaN;返回“NaN”。“NaN”(不是数值)

4.NEGATIVE_INFINITY 用法:Number.NEGATIVE_INFINITY;返回:负无穷大,比“最小值”还小的值。

5.POSITIVE_INFINITY 用法:Number.POSITIVE_INFINITY;返回:正无穷大,比“最大值”还大的值。

方法:toString() 用法:<数值变量>.toString();返回:字符串形式的数值。如:若 a =123;则 a.toString()='123'。

 

25


基本对象


String 字符串对象

属性

   length 用法:<字符串对象>.length;返回该字符串的长度。

方法

1.charAt() 用法:<字符串对象>.charAt(<位置>);返回该字符串位于第<位置>位的单个字符。注意:字符串中的一个字符是第 0 位的,第二个才是第 1 位的,最后一个字符是第 length - 1 位的。
2.charCodeAt() 用法:<字符串对象>.charCodeAt(<位置>);返回该字符串位于第<位置>位的单个字符的 ASCII 码。3.fromCharCode() 用法:String.fromCharCode(a, b, c...);返回一个字符串,该字符串每个字符的 ASCII 码由 a, b, c... 等来确定。

 

26


基本对象


String 字符串对象

4.indexOf() 用法:<字符串对象>.indexOf(<另一个字符串对象>[, <起始位置>]);该方法从<字符串对象>中查找<另一个字符串对象>(如果给出<起始位置>就忽略之前的位置),如果找到了,就返回它的位置,没有找到就返回“-1”。所有的“位置”都是从零开始的。
5.lastIndexOf() 用法:<字符串对象>.lastIndexOf(<另一个字符串对象>[, <起始位置>]);跟 indexOf() 相似,不过是从后边开始找。
6.split() 用法:<字符串对象>.split(<分隔符字符>);返回一个数组,该数组是从<字符串对象>中分离开来的,<分隔符字符>决定了分离的地方,它本身不会包含在所返回的数组中。例如:'1&2&345&678'.split('&')返回数组:1,2,345,678。

 

27


基本对象


String 字符串对象

7.substring() 用法:<字符串对象>.substring(<始>[, <终>]);返回原字符串的子字符串,该字符串是原字符串从<始>位置到<终>位置的前一位置的一段。
8.substr() 用法:<字符串对象>.substr(<始>[, <长>]);返回原字符串的子字符串,该字符串是原字符串从<始>位置开始,长度为<长>的一段。
9.toLowerCase() 用法:<字符串对象>.toLowerCase();返回把原字符串所有大写字母都变成小写的字符串。
10.toUpperCase() 用法:<字符串对象>.toUpperCase();返回把原字符串所有小写字母都变成大写的字符串。

 

28


基本对象


Array 数组对象。数组对象是一个对象的集合,里边的对象可以是不同类型的。数组的每一个成员对象都有一个“下标”,用来表示它在数组中的位置(既然是“位置”,就也是从零开始)。

数组的定义方法:

       var <数组名> = new Array();

这样就定义了一个空数组。以后要添加数组元素,就用:

      <数组名>[<下标>] = ...;

如果想在定义数组的时候直接初始化数据,请用:

var <数组名> = new Array(<元素1>, <元素2>, <元素3>...);


 

29


基本对象


Array 数组对象。

例如,var myArray = new Array(1, 4.5, 'Hi'); 定义了一个数组 myArray,里边的元素是:myArray[0] == 1;                myArray[1] == 4.5; myArray[2] == 'Hi'。

注意:JavaScript只有一维数组!千万不要用“Array(3,4)” 来定义 4 x 5 的二维数组,或者用“myArray[2,3]”这种方法来返回“二维数组”中的元素。任意“myArray[...,3]”这种形式的调用其实只返回了“myArray[3]”。要使用多维数组,请用这种虚拟法:

    var myArray = new Array(new Array(), new Array(), new Array(), ...);

其实这是一个一维数组,里边的每一个元素又是一个数组。调用这个“二维数组”的元素时:myArray[2][3] = ...;

 

30


基本对象


Array 数组对象。

属性

length 用法:<数组对象>.length;返回:数组的长度,即数组里有多少个元素。它等于数组里最后一个元素的下标加一。想添加一个元素,只需要:myArray[myArray.length] = ...

方法

1.join() 用法:<数组对象>.join(<分隔符>);返回一个字符串,该字符串把数组中的各个元素串起来,用<分隔符>置于元素与元素之间。这个方法不影响数组原本的内容。
2.reverse() 用法:<数组对象>.reverse();使数组中的元素顺序反过来。如果对数组[1, 2, 3]使用这个方法,它将使数组变成:[3, 2, 1]。

 

31


基本对象


Array 数组对象。

方法

3.slice() 用法:<数组对象>.slice(<始>[, <终>]);返回一个数组,该数组是原数组的子集,始于<始>,终于<终>。如果不给出<终>,则子集一直取到原数组的结尾。
4.sort() 用法:<数组对象>.sort([<方法函数>]);使数组中的元素按照一定的顺序排列。如果不指定<方法函数>,则按字母顺序排列。

 

32


基本对象


Math “数学”对象,提供对数据的数学计算。 用法为 “Math.<名>”这种格式。

属性

1.E 返回常数 e (2.718281828...)。
2.LN2 返回 2 的自然对数 (ln 2)。
3.LN10 返回 10 的自然对数 (ln 10)。
4.LOG2E 返回以 2 为低的 e 的对数 (log2e)。
5.LOG10E 返回以 10 为低的 e 的对数 (log10e)。
6.PI 返回π(3.1415926535...)。
7.SQRT1_2 返回 1/2 的平方根。
8.SQRT2 返回 2 的平方根。

 

33


基本对象


Math “数学”对象

方法

1.abs(x) 返回 x 的绝对值。
2.acos(x) 返回 x 的反余弦值(余弦值等于 x 的角度),用弧度表示。
3.asin(x) 返回 x 的反正弦值。
4.atan(x) 返回 x 的反正切值。
5.atan2(x, y) 返回复平面内点(x, y)对应的复数的幅角,用弧度表示,其值在 -π 到 π 之间。

 

34


基本对象


Math “数学”对象

方法

6.ceil(x) 返回大于等于 x 的最小整数。
7.cos(x) 返回 x 的余弦。
8.exp(x) 返回 e 的 x 次幂 (ex)。
9.floor(x) 返回小于等于 x 的最大整数。
10.log(x) 返回 x 的自然对数 (ln x)。
11.max(a, b) 返回 a, b 中较大的数。
 


 

35


基本对象


Date 日期对象。这个对象可以储存任意一个日期,从 0001 年到 9999 年,并且可以精确到毫秒数(1/1000 秒)。在内部,日期对象是一个整数,它是从 1970 年 1 月 1 日零时正开始计算到日期对象所指的日期的毫秒数。如果所指日期比 1970 年早,则它是一个负数。所有日期时间,如果不指定时区,都采用“UTC”(世界时)时区,它与“GMT”(格林威治时间)在数值上是一样的。

定义一个日期对象:

     var d = new Date;

这个方法使 d 成为日期对象,并且已有初始值:当前时间。

 

36


基本对象


Date 日期对象。

如果要自定初始值,可以用:

  var d = new Date(99, 10, 1);     //99 年 10 月 1 日
  var d = new Date('Oct 1, 1999'); //99 年 10 月 1 日

等等方法。

方法

    以下有很多“g/set[UTC]XXX”这样的方法,它表示既有“getXXX”方法,又有“setXXX”方法。“get”是获得某个数值,而“set”是设定某个数值。如果带有“UTC”字母,则表示获得/设定的数值是基于 UTC 时间的,没有则表示基于本地时间或浏览期默认时间的。

 

37


基本对象


Date 日期对象。

1.g/set[UTC]FullYear() 返回/设置年份,用四位数表示。如果使用“x.set[UTC]FullYear(99)”,则年份被设定为 0099 年。
g/set[UTC]Year() 返回/设置年份,用两位数表示。设定的时候浏览器自动加上“19”开头,故使用“x.set[UTC]Year(00)”把年份设定为 1900 年。
2.g/set[UTC]Month() 返回/设置月份。
3.g/set[UTC]Date() 返回/设置日期。
4.g/set[UTC]Day() 返回/设置星期,0 表示星期天。
5.g/set[UTC]Hours() 返回/设置小时数,24小时制。
6.g/set[UTC]Minutes() 返回/设置分钟数。
7.g/set[UTC]Seconds() 返回/设置秒钟数。
8.g/set[UTC]Milliseconds() 返回/设置毫秒数。

 

38


基本对象


Date 日期对象。

9.g/setTime() 返回/设置时间,该时间就是日期对象的内部处理方法:从 1970 年 1 月 1 日零时正开始计算到日期对象所指的日期的毫秒数。
10.getTimezoneOffset() 返回日期对象采用的时区与格林威治时间所差的分钟数。在格林威治东方的市区,该值为负,例如:中国时区(GMT+0800)返回“-480”。
11.toString() 返回一个字符串,描述日期对象所指的日期。这个字符串的格式类似于:“Fri Jul 21 15:43:46 UTC+0800 2000”。
12.toLocaleString() 返回一个字符串,描述日期对象所指的日期,用本地时间表示格式。

13.toUTCString() 返回一个字符串,描述日期对象所指的日期,用 UTC 格式。
14.parse() 用法:Date.parse(<日期对象>);返回该日期对象的内部表达方式。

 


 

39


全局对象


    全局对象从不现形,它可以说是虚拟出来的,目的在于把全局函数“对象化”。在 Microsoft JScript 语言参考中,它叫做“Global 对象”,但是引用它的方法和属性从来不用“Global.xxx”(况且这样做会出错),而直接用“xxx”。

方法

1.eval() 把括号内的字符串当作标准语句或表达式来运行。
2.isFinite() 如果括号内的数字是“有限”的就返回 true;否则返回 false。
3.isNaN() 如果括号内的值是“NaN”则返回 true 否则返回 false。
4.parseInt() 返回把括号内的内容转换成整数之后的值。如果括号内是字符串,则字符串开头的数字部分被转换成整数,如果以字母开头,则返回“NaN”。

 

40


全局对象


方法

5.parseFloat() 返回把括号内的字符串转换成浮点数之后的值,字符串开头的数字部分被转换成浮点数,如果以字母开头,则返回“NaN”。
6.toString() 用法:<对象>.toString();把对象转换成字符串。如果在括号中指定一个数值,则转换过程中所有数值转换成特定进制。
7.escape() 返回括号中的字符串经过编码后的新字符串。该编码应用于 URL,也就是把空格写成“%20”这种格式。“+”不被编码,如果要“+”也被编码,请用:escape('...', 1)。
8.unescape() 是 escape() 的反过程。解编括号中字符串成为一般字符串。

 

41


函数


    函数的定义:所谓“函数”,是有返回值的对象或对象的方法。

函数的种类。

    常见的函数有:构造函数,如 Array(),能构造一个数组;全局函数,即全局对象里的方法;自定义函数;等等。

自定义函数

定义函数用以下语句:

function 函数名([参数集]) {
    ...
    [return[ <值>];]
    ...
}  


function addAll(a, b, c) {
    return a + b + c;
}
 
var total = addAll(3, 4, 5);

 

42


事件处理 


事件处理概述

   事件处理是对象化编程的一个很重要的环节,没有了事件处理,程序就会变得很死,缺乏灵活性。事件处理的过程可以这样表示:发生事件 - 启动事件处理程序 - 事件处理程序作出反应。其中,要使事件处理程序能够启动,必须先告诉对象,如果发生了什么事情,要启动什么处理程序,否则这个流程就不能进行下去。事件的处理程序可以是任意 JavaScript 语句,但是我们一般用特定的自定义函数(function)来处理事情。

 

43


事件处理 


指定事件处理程序

  指定事件处理程序有三种方法:

方法一 直接在 HTML 标记中指定。方法:

<标记 ... ... 事件="事件处理程序" [事件="事件处理程序" ...]>

让我们来看看例子:

<body ... onload="alert('网页读取完成,请慢慢欣赏!')" onunload="alert('再见!')">

这样的定义<body>标记,能使文档读取完毕的时候弹出一个对话框,写着“网页读取完成,请慢慢欣赏”;在用户退出文档(或者关闭窗口,或者到另一个页面去)的时候弹出“再见”。

 

44


事件处理 


方法二 编写特定对象特定事件的 JavaScript。这种方法用得比较少,但是在某些场合还是很好用的。方法是:

<script language="JavaScript" for="对象" event="事件">
...
(事件处理程序代码)
...
</script>

例:

<script language="JavaScript" for="window" event="onload">
  alert('网页读取完成,请慢慢欣赏!');
</script>

 

45


事件处理 


方法三 在 JavaScript 中说明。方法:

<事件主角 - 对象>.<事件> = <事件处理程序>;

用这种方法要注意的是,“事件处理程序”是真正的代码,而不是字符串形式的代码。如果事件处理程序是一个自定义函数,如无使用参数的需要,就不要加“()”。例:


...
 
function ignoreError() {
  return true;
}
 
...
 
window.onerror = ignoreError; // 没有使用“()”

这个例子将 ignoreError() 函数定义为 window 对象的 onerror 事件的处理程序。它的效果是忽略该 window 对象下任何错误(由引用不允许访问的 location 对象产生的“没有权限”错误是不能忽略的)。 


 

46


事件处理 


事件详解

onblur 事件 发生在窗口失去焦点的时候。

 应用于:window 对象

onchange 事件 发生在文本输入区的内容被更改,然后焦点从文本输入区移走之后。捕捉此事件主要用于实时检测输入的有效性,或者立刻改变文档内容。

 应用于:Password 对象;Select 对象;Text 对象;Textarea 对象

 

47


事件处理 


    onclick 事件 发生在对象被单击的时候。单击是指鼠标停留在对象上,按下鼠标键,没有移动鼠标而放开鼠标键这一个完整的过程。

  一个普通按钮对象(Button)通常会有 onclick 事件处理程序。按钮上添加 onclick 事件处理程序,可以模拟“另一个提交按钮”,方法是:在事件处理程序中更改表单的 action, target, encoding, method 等一个或几个属性,然后调用表单的 submit() 方法。

  在 Link 对象的 onclick 事件处理程序中返回 false 值(return false),能阻止浏览器打开此连接。应用于:Button 对象;Checkbox 对象;Image 对象;Link 对象;Radio 对象;Reset 对象;Submit 对象

 

48


事件处理 


    onerror 事件 发生在错误发生的时候。它的事件处理程序通常就叫做“错误处理程序”(Error Handler),用来处理错误。上边已经介绍过,要忽略一切错误,就使用:

function ignoreError() {
  return true;
}
 
window.onerror = ignoreError;

 应用于:window 对象

onfocus 事件 发生在窗口得到焦点的时候。

 应用于:window 对象

 

49


事件处理 


    onload 事件 发生在文档全部下载完毕的时候。全部下载完毕意味着不但 HTML 文件,而且包含的图片,插件,控件,小程序等全部内容都下载完毕。本事件是 window 的事件,但是在 HTML 中指定事件处理程序的时候,我们是把它写在<body>标记中的。

 应用于:window 对象

onmousedown 事件 发生在用户把鼠标放在对象上按下鼠标键的时候。参考 onmouseup 事件。

 应用于:Button 对象;Link 对象

onmouseout 事件 发生在鼠标离开对象的时候。参考 onmouseover 事件。

 应用于:Link 对象

 

50


事件处理 


    onmouseover 事件 发生在鼠标进入对象范围的时候。这个事件和 onmouseout 事件,再加上图片的预读,就可以做到当鼠标移到图像连接上,图像更改的效果了。有时我们看到,在指向一个连接时,状态栏上不显示地址,而显示其它的资料,看起来这些资料是可以随时更改的。它们是这样做出来的:

<a href="..."
   onmouseover="window.status='Click Me Please!'; return true;"
   onmouseout="window.status=''; return true;">

 

 应用于:Link 对象

 

51


事件处理 


    onmouseup 事件 发生在用户把鼠标放在对象上鼠标键被按下的情况下,放开鼠标键的时候。如果按下鼠标键的时候,鼠标并不在放开鼠标的对象上,则本事件不会发生。

 应用于:Button 对象;Link 对象

    onreset 事件 发生在表单的“重置”按钮被单击(按下并放开)的时候。通过在事件处理程序中返回 false 值(return false)可以阻止表单重置。

 应用于:Form 对象

 

52


事件处理 


  onresize 事件 发生在窗口被调整大小的时候。

 应用于:window 对象

  onsubmit 事件 发生在表单的“提交”按钮被单击(按下并放开)的时候。可以使用该事件来验证表单的有效性。通过在事件处理程序中返回 false 值(return false)可以阻止表单提交。

 应用于:Form 对象

  onunload 事件 发生在用户退出文档(或者关闭窗口,或者到另一个页面去)的时候。与 onload 一样,要写在 HTML 中就写到<body>标记里。

 应用于:window 对象

 

53


关于对象化编程的语句 


  with 语句 为一个或一组语句指定默认对象。

  用法:with (<对象>) <语句>;

  with 语句通常用来缩短特定情形下必须写的代码量。在下面的例子中,请注意 Math 的重复使用:

x = Math.cos(3 * Math.PI) + Math.sin(Math.LN10);
y = Math.tan(14 * Math.E);

当使用 with 语句时,代码变得更短且更易读:

with (Math) {
  x = cos(3 * PI) + sin(LN10);
  y = tan(14 * E);
}

 

54


关于对象化编程的语句 


      this 对象 返回“当前”对象。在不同的地方,this 代表不同的对象。如果在 JavaScript 的“主程序”中(不在任何 function 中,不在任何事件处理程序中)使用 this,它就代表 window 对象;如果在 with 语句块中使用 this,它就代表 with 所指定的对象;如果在事件处理程序中使用 this,它就代表发生事件的对象。 


一个常用的 this 用法:

<script>
...
function check(formObj) {
  ...
}
...
</script>

<body ...>
...
<form ...>
...
<input type="text" ... onchange="check(this.form)">
...
</form>
...
</body>

这个用法常用于立刻检测表单输入的有效性。

 

55


关于对象化编程的语句 


    自定义构造函数 我们已经知道,Array(),Image()等构造函数能让我们构造一个变量。其实我们自己也可以写自己的构造函数。自定义构造函数也是用 function。在 function 里边用 this 来定义属性。

function <构造函数名> [(<参数>)] {
  ...
  this.<属性名> = <初始值>;
  ...
}

然后,用 new 构造函数关键字来构造变量:

var <变量名> = new <构造函数名>[(<参数>)];

    构造变量以后,<变量名>成为一个对象,它有它自己的属性——用 this 在 function 里设定的属性。

 

56


关于对象化编程的语句 


以下是一个从网上找到的搜集浏览器详细资料的自定义构造函数的例子: 


function Is() {
  var agent = navigator.userAgent.toLowerCase();
  this.major = parseInt(navigator.appVersion); 

//主版本号
  this.minor = parseFloat(navigator.appVersion);

//全版本号
  this.ns = ((agent.indexOf('mozilla')!=-1) &&
             ((agent.indexOf('spoofer')==-1) &&

//是否 Netscape
              (agent.indexOf('compatible') == -1)));
  this.ns2 = (this.ns && (this.major == 3));  

//是否 Netscape 2
  this.ns3 = (this.ns && (this.major == 3)); 

  //是否 Netscape 3
  this.ns4b = (this.ns && (this.minor < 4.04));

//是否 Netscape 4 低版本


this.ns4 = (this.ns && (this.major >= 4));    //是否 Netscape 4 高版本
  this.ie = (agent.indexOf("msie") != -1);      //是否 IE
  this.ie3 = (this.ie && (this.major == 2));    //是否 IE 3
  this.ie4 = (this.ie && (this.major >= 4));    //是否 IE 4
  this.op3 = (agent.indexOf("opera") != -1);    //是否 Opera 3
  this.win = (agent.indexOf("win")!=-1);        //是否 Windows 版本
  this.mac = (agent.indexOf("mac")!=-1);        //是否 Macintosh 版本
  this.unix = (agent.indexOf("x11")!=-1);       //是否 Unix 版本
}
 
var is = new Is();

 

57


范例


下面是一个跑马灯效果的JavaScript文档。


<html>
<head>
<script language="javascript">
var msg="这是一个跑马灯效果的JavaScript文档";
var interval = 100;
var spacelen = 120;
var space10=" ";
var seq=0;
function Scroll() { 
len = msg.length;
window.status = msg.substring(0, seq+1);
seq++;
if ( seq >= len ) { 
seq = spacelen;
window.setTimeout("Scroll2();", interval );
}
else
window.setTimeout("Scroll();", interval );
}


function Scroll2() {

Var out="";
for (i=1; i<=spacelen/space10.length; i++) out+=space10;
out=out+msg;
len=out.length;
window.status=out.substring(seq,len);
seq++;
if( seq >= len ) { seq = 0; };
window.setTimeout("Scroll2();", interval);

Scroll();
</script>
</head>
<body>
</body>
</html>

原创粉丝点击