JavaScript 的语法(网摘)
JavaScript 的语法
如果你学过C,C++,或者Java的话,就可发现,javascript的语法和它们是一样的。javascript也有一些保留字,与C不同,javascript有一些预定义的内建函数,完成对浏览器和页面的基本操作。
特殊符号和操作符
Javascript的操作符主要用于算术运算、逻辑运算和字符串运算。大部分操作符都有两个操作对象,分别叫左操作数和右操作数。Javascript的操作符和C、C++的操作符几乎完全一样。
基本的算术操作符(运算符)是 + (加),- (减或一元负号),* (乘),/ (除),% (模,或者叫取余数)以及 ++ (整数自身加一), -- (整数自身减一)。以及位操作, || (OR), && (AND),! (各位取反),^ (XOR 异或),<< (左移位),<<< (左移位,并用0填充左边的位),>> (右移位) 和 >>> (右移位,用0 填充右边的位)。除了++,--和一元负(-)之外,所有这些算术、逻辑操作符都允许和 =连用,表示左操作数和右操作数运算的结果赋值给左操作数本身。 例如:
variable = variable * 42;
// 这句可写成 variable *= 42;
这些操作符符合一般的优先法则,可以用括号改变运算的次序。如果对运算的优先法则搞不清楚,也可以用括号保证运算的正确顺序。
zzz = (xxx * 32) / (yyy + xxx);
javascript 的关系运算符包括:<(小于),> (大于),== (等于),!= (不等于),<= (不大于),>= (不小于)。请注意区分<赋值符(=)和 关系运算符等于(==)。另一个经常出现的错误是将不等于(!=)写作<>。
每一个完整的语句之间用分号隔开。如下所示:
variable *= 42; zzz = (xxx * 32) / (yyy + xxx);
+号同时被用来表示两个字符串相连接。例如:
yourname = "Dave"
line_of_text = "What are you doing " + yourname + "?";
执行了上述语句后,line_of_text的值应该是,"What are you doing Dave?"
字符串常量要用引号(双引号或者单引号都可)括起来。两者之间的区别在于:用双引号括起来的字符串允许包括一些控制符。为了表示这些控制符,必须用以反斜杠 (\)开始的转义符,例如以 \n表示换行。由于\用于引导转义符,所以在字符串中用到反斜杠符时必须用\\表示。
括号被用于指定数组的元素。例如要指定数组myarrary的第一个元素,要写成 myarrary[0]。请注意,数组的元素是从 0开始编号的。
大括号({ 和 }),被用来组织语句块(某些地方也称复合语句,及几条语句被从逻辑上看作是一条语句)。这些语句块经常和控制语句(比如分支 if...then...else 、循环while )等一起出现。注意,函数也是由一个语句块构成的。
多行或单行注释由 /* 和*/括起来,单行的注释也可以用//开始,直到行尾。
最后要介绍的是一个三元操作符, 条件表达式 ? 结果表达式1 : 结果表达式2 。这个运算符的意思是:如果条件表达式成立,就取结果表达式1的值,反之,就取条件表达式2的值。任何时候,这个操作符都可以用if 和 else来模拟。例如:
if (notMine == true)
{
someoneElses = true;
}
else
{
someoneElses = false;
}
和下式等价:
someoneElses = (notMine == true) ? true : false;
上面介绍了所有的操作符。接下来,介绍javascript的数据类型。
数据类型和变量
JavaScript有四种基本的数据类型:对象( object,能用于任何对象)、数值型(number,浮点数或整数)、字符串型(string)、布尔型(boolean)。变量通过变量名来区分。变量名区分大小写,也就是说大写与小写是不同的。组成变量名的符号包括字母、数字和下划线(_),并且必须以字母开始。例如:
myvariable = "A line of text";
//这是字符串型变量
count = 0;
//数值型
Super_Long_VariableNamethatishardtoread = "";
//字符串,空串
WorldIsRound = true;
//布尔型
另外,数组和函数指针也是常见的数值类型。
语句
语句是程序的可执行部分。结构及控制语句决定了程序的结构,结构及控制语句通常使用了保留字。下面列出了所有的当前支持的保留字。
break comment continue
for for...in function
if...else return var
while with
除了上述保留字,下列保留字可能还不能被浏览器支持。它们也是Java的保留字。
abstract boolean byte case
catch char class const
default do double extends
false final finally float
goto implements import instanceof
int interface long native
null package private protected
public short static super
switch synchronized throw throws
transient try void
if...else结构
if..then...else 结构是最容易理解的控制语句。如果满足条件,就执行特定的语句序列,反之条件不满足,就执行另外的语句序列。请看下例:
if (variable > 20)
{
//如果成立,执行这一段...
...
}
else
{
//不成立时,执行这段...
}
if...else... 允许嵌套使用。if...else if...,这样的形式可以很好地表达多重分支结构。
while 循环
while 循环结构提供了一种手段,使得在条件满足的情况下重复一段程序。如果不小心,使得条件永远不能打破的话,程序将陷入死循环。下例重复10次:
count = 0;
while (count < 10)
{
write("Hello.\n");
count++;
}
for 循环
for循环是另一种选择。与上例相同的功能可以用for循环来实现。
for (count = 0; count < 10; count++)
{
write("Hello.\n");
}
for 循环的控制部分可分为三个部分,各部分用分号隔开。初始部分是count = 0;判断部分是count <10; 最后,count++是条件变动部分。循环的初始部分仅仅在循环开始时被执行一次,然后每一次循环都检查判断部分的条件是否满足,如不满足则就跳出循环,否则,执行循环体(即大括号括起来的语句块),执行条件变动部分,检查判断条件,周而周而复始,直到循环条件被破坏为止。
for..in结构
for..in 结构对集合里的每一个元素执行相同的操作。下面的例子显示myArray数组中的每一个元素的内容。
for count in myArray
{
write(myArray[count]);
}
break, continue
break和continue 这两个保留字用于在循环体内改变语句的流程。break强制打断循环,continue跳过循环体中余下的语句,直接回到循环体的起始。请看下例,当count的值等于5时,循环被打断,因此,最后一次的输出的值是4...:
count = 0;
while (count < 10)
{
if (count == 5)
break;
write(count + "...");
count++;
}
下面的例子说明了continue的作用:
for iteration in myArray
{
if (Math.odd(iteration))
continue;
writeln(myArray[iteration]);
}
if语句中的判断使得当iteration为奇数时,被跳过。
函数
保留字function用来定义一个函数。函数是一个子程序,可通过函数名在任何地方被调用。说明一个带两个参数(parameter1, parameter2)的函数(函数名myfunction)的格式如下所示:
function myfunction(parameter1, parameter2)
{
// 由若干条语句组成的函数体
}
function后面紧接着函数名(可以在别处通过函数名而调用函数)。函数名和变量名的命名方法是一样的。函数名后面紧接着参数表。在参数表中不需要说明参数的数据类型,这点与BASIC、Foxbase 等解释型语言一样。在函数体中定义具体的操作。在任何函数中都可以用保留字return返回一个结果给调用者。下面的示例定义了一个函数:
function Average(value1, value2)
{
average = (value1 + value2) / 2;
return average;
}
下面的程序调用了上面定义的函数:
xxx = 23;
yyy = 14;
averaged_value = Average(xxx, yyy);
执行了上述程序后,averaged_value 的值为(23 + 14)/2,等于18。
使用对象(object)类型
javascript预定义了一些范围很广预定义对象。javascript的对象,包含属性、方法两大类性质。方法,实际上就是C 语言里的库函数和BASIC 里的预定义函数,可以完成特定的功能。通俗地讲,面向对象的程序设计语言讲变量和函数(子程序)组织成以对象为单位的属性和方法,可以保证变量和方法仅在希望的范围内使用。面向对象的程序设计语言提供了一种全新的组织程序的方法。
下面列出了javascript支持的所有对象,其中包括了很多在FORM中使用的HTML标记对象。
anchor HTML 锚标记对象
applet Java applet 对象
button HTML INPUT 标记,按钮
checkbox HTML INPUT 标记,选择框
Date 数据对象,包括对数据的打印、处理、转换等操作
document 整个HTML页面
form 表单
history 浏览器的历史记录,记录了浏览过的url
link HTML 链接标记
location 当前URL
Math 数学函数集
password HTML INPUT 标记,口令框
radioButton HTML INPUT 标记,无线按钮
reset HTML INPUT 标记,"reset"
selection 在HTML TEXTAREA 标记或INPUT "text" 类型中选定文本
string 字符串对象,包括对字符串的一系列处理
submit HTML INPUT 标记,"submit"
text HTML INPUT 标记, "text"
textArea HTML TEXTAREA 标记
window 当前打开的浏览器窗口及页面
注:HTML INPUT标记(对象)一般在FORM中使用。
事件句柄(Event Handlers)
JavaScript的自定义函数或预定义对象方法的激活都依赖于事件句柄。所谓的事件句柄实际上就是函数的入口。这些句柄是某些HTML标记的组成部分,下面列举了一些常用的事件:
onBlur 当文本对象(text),选定文本对象(selection)
或文本区域对象(textarea)失去焦点时
onChange 当selection, text, textarea 内容被改变或
失去焦点
onClick 当按钮(button),检查框(checkbox),链接(link)
或选一按钮(radio object)被单击或选取
onFocus 当selection, text, textarea 获得焦点
onLoad 当浏览器窗口或帧(FRAME)加载了页面时
onMouseOver 当鼠标进入一个链接对象时
onMouseOut 当鼠标离开链接对象时
onSelect 当text 或 textarea 对象中的文本被选取时
onSubmit 当表单FORM 被提交时
onUnload 当浏览器窗口被关闭或刷新时
下面举例说明事件句柄的用法。
<INPUT TYPE="button" VALUE="Total Amount"
ONCLICK="doTotalAmount(this)">
上例说明当"Total Amount" 这个按钮被单击时(ONCLICK事件发生时),调用doTotalAmount(this)函数。
<A HREF="second_page.html"
ONMOUSEOVER="window.status='Go on to Page 2';
return true;">Next Page</A>
在这个例子中,当鼠标接触到链接对象时(ONMOUSEOVER),在浏览器的状态栏显示一行信息 -- Go on to Page 2 -- (window.status='Go on to Page 2')。
嵌入 JavaScript 在 HTML 中
你可以以如下的方式嵌入JavaScript到一个HTML文档:
* 在<SCRIPT>标记里作为语句和函数。见"使用SCRIPT标记"。
* 指定一个文件作为JavaScript源文件(而不是把JavaScript
嵌入在HTML中)。
* 指定一个JavaScript表达式作为一个HTML属性值。
* 在某些HTML标记中作为事件处理器(主要是表单元素)。
和HTML不同,JavaScript是大小写敏感的。
使用SCRIPT标记
<SCRIPT> 标记是 HTML 的一个扩展,用于封装任意数量的JavaScript语句,如下所示:
<SCRIPT>
JavaScript 语句...
</SCRIPT>
一个文档里可以有多个SCRIPT标记,每一个都能封装任意数量的JavaScript语句。
指定JavaScript的版本
LANGUAGE属性选项指定脚本语言和JavaScript版本:
<SCRIPT LANGUAGE="JavaScriptVersion">
JavaScript 语句...
</SCRIPT>
JavaScriptVersion指你的代码是为哪个版本的 JavaScript写的,如下所示:
* <SCRIPT LANGUAGE="JavaScript">对应Navigator 2.0。
* <SCRIPT LANGUAGE="JavaScript1.1">对应Navigator 3.0。
如果用户的浏览器不支持LANGUAGE属性所指定的JavaScript级别,则在<SCRIPT>标记中的语句就被忽略;例如:
* Navigator 2.0 执行在<SCRIPT LANGUAGE="JavaScript">标记中的代码,而忽略在<SCRIPT LANGUAGE="JavaScript1.1"> 标记中的代码。
* Navigator 3.0 执行在<SCRIPT LANGUAGE="JavaScript">或<SCRIPT LANGUAGE="JavaScript1.1">标记中的代码。
如果省略了 LANGUAGE 属性,Navigator 2.0 假定LANGUAGE="JavaScript"。Navigator 3.0 假定LANGUAGE="JavaScript1.1"
你可使用LANGUAGE属性写出包含Navigator 3.0特性的脚本,而它不会在Navigator 2.0中运行时引起错误。以下的例子表明使用LANGUAGE属性的一些方法。
例 一. 这个例子显示如何把一个函数定义两次,一次为JavaScript 1.0,另一次为JavaScript 1.1 。
<SCRIPT LANGUAGE="JavaScript">
// 定义1.0-兼容的函数,如doClick()
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript1.1">
// 重新使用1.1版特性定义这些函数
// 也定义只适于1.1的函数
</SCRIPT>
<FORM ...>
<INPUT TYPE="button" onClick="doClick(this)" ...>
. . .
</FORM>
例二. 这个例子显示怎样使用一个JavaScript文档的两个分离版本,一个为JavaScript1.0,另一个为JavaScript1.1 。默认的文档为 JavaScript1.0 ,如果用户正在运行Navigator 3.0,则replace方法就会替换这一页。
<SCRIPT LANGUAGE="JavaScript1.1">
// 用1.1版页面替换这一页
location.replace("js1.1/mypage.html")
</SCRIPT>
[以下是1.0版兼容页面...]
例 三. 这个例子显示如何测试navigator.userAgent属性,以确定用户用户运行的是否为 Navigator3.0。 当条件成立时执行1.1版特性。
<SCRIPT LANGUAGE="JavaScript">
if(navigator.userAgent.indexOf("3.0") != -1)
jsVersion = "1.1"
else
jsVersion = "1.0"
</SCRIPT>
[此后,在使用1.1版扩展特性前测试jsVersion == "1.1"]
例 四. 在许多情况下,通过新属性(如 navigator.javaEnabled 或 window.focus)与null的比较,就可以测试JavaScript 1.0和1.1的不同之处。 在 JavaScript 1.0和1.1中,未定义的属性的值等于null,而在Navigator3.0中1.1版的属性为非null值。
if (navigator.javaEnabled != null && navigator.
javaEnabled()) {
// 必须为3.0版且Java打开,使用LiveConnect...
} else {
// 2.0版,无Java
}
在注释标记中隐藏脚本
只有Navigator 2.0及以后版本识别 JavaScript(注:IE 对JavaScript的支持有所不同)。 为使其它浏览器忽略JavaScript代码,要将整个脚本放在 HTML注释标记中,并在注释标记结束前使用双斜线(//)表明一个JavaScript 单行注释:
<SCRIPT>
<!--对老的浏览器隐藏脚本内容。
JavaScript 语句...
// 结束隐藏。-->
</SCRIPT>
由于浏览器忽略未知的标记,因此非 JavaScript兼容的浏览器将忽略SCRIPT标记的开始和结尾。所有脚本语句都封装在HTML注释中,因此也被忽略。Navigator正确地解释SCRIPT标记,并忽略在脚本中以双斜线(//)开头的语句行。
虽然不要求你使用此方法,但这是一个良好的规范,这样你的页面在非Navigator 2.0 及以后版本中就不会产生非格式化脚本语句错误。
注:为简单起见,本处中的一些例子未隐藏脚本,因为这些例子是专门为Navigator 2.0写的。
例子:第一个脚本,下面是一个简单的脚本:
<HTML>
<BODY>
<SCRIPT language="JavaScript">
<!--- 对老的浏览器隐藏脚本。
document.write("Hello, net!")
// 结束隐藏。-->
</SCRIPT>
<P>That's all, folks.
</BODY>
</HTML>
此脚本在Navigator显示如下内容:
Hello, net!
That's all, folks.
注意 JScript 产生的第一行和HTML产生的第二行并无区别。有时你会看到有分号在每一 JavaScript 行的结尾。通常,分号是可选的,仅当你想把一条以上的语句放在一行时才需要。这一点在定义事件处理器时最有用,这在"描述事件处理器"中讨论。
指定一个JavaScript代码文件
<SCRIPT>标记的SRC属性让你可指定一个文件作为JavaScript源文件(而不是把JavaScript嵌入在HTML中)。例如:
<HEAD>
<TITLE>My Page</TITLE>
<SCRIPT SRC="common.js">
...
</SCRIPT>
</HEAD>
<BODY>
...
这个属性对于在多个不同的页面间共享函数特别有用。</SCRIPT>结束标记是必需的。
<SCRIPT>标记中的有SRC属性的JavaScript语句将被忽略,除非包含错误。比如,你会想把下面的语句放到<SCRIPT SRC="...">和</SCRIPT>之间:
document.write("Included JS file not found")
SRC属性可以指定任何URL,相对的或者绝对的。例如:
<SCRIPT SRC="http://home.netscape.com/functions/jsfuncs.js">
外部的 JavaScript文件不能包含任何 HTML 标记:只能包含JavaScript语句和函数定义。
外部的JavaScript文件应有文件扩展名.js,且服务器必需把.js扩展名影射为MIME类型的"application/x-javascript",这将在服务器HTTP头中传回。为把扩展名影射到MIME 类型,需要在服务器的配置目录加入以下内容到 mime.types文件中,然后重新启动服务器。
type=application/x-javascript exts=js
如果服务器没有把.js 文件扩展名影射到 "application/xjavascript"MIME 类型,Navigator将不会正确装载SRC属性所指定的JavaScript文件。
注:这个要求不适用于适用本地使用文件。
把JavaScript表达式作为HTML属性值
使用JavaScript 实体,你可以指定一个JavaScript表达式作为HTML 的属性值。实体的值被动态计算。这就允许你产生更灵活可变的HTML 结构,因为一个HTML元素的属性可以依赖于有关页面前面元素的信息。
你可能已经熟悉HTML字符实体,通过它你可以加前缀和号(&)的方式定义特定代码或名称的字符。如,你可以用字符实体 >加入一个大于号(>),用字符实体<加入小于号。
JavaScript 实体也可以以和号(&)开始,而以分号(;)结束。在{}里可以封装JavaScript 表达式,而不是名称或数字。你只能在HTML属性值正常运行的地方使用JavaScript 实体。比如,假设你定义个变量 barWidth。你可以以特定百分比的宽度定义一个水平线,如下所示:
<HR WIDTH="&{barWidth};%" ALIGN="LEFT">
因此,比如,如果barWidth为50,这将产生如下的显示效果:
--------------------------------------------------------------------------------
和其它 HTML一起,在布局出现后,页面的显示仅当你重新装载它后才会改变。
不象通常的实体可以出现在HTML文本流的任何地方,JScript实体仅当出现在HTML属性(名称/值)的右边时才被解释。例如,
<H4>&{myTitle};</H4>将显示 myTitle,而不是变量myTitle的值
用NOSCRIPT标记指定替换内容
用<NOSCRIPT>标记可以指定不支持 JavaScript的浏览器显示的内容。封装在<NOSCRIPT>标记里的HTML被不支持JavaScript 的浏览器显示,而被标记Navigator忽略。当然要注意的是,如果用户从Options菜单选择Network Preferences项关闭 JavaScript,Navigator将显示lt;NOSCRIPT>标记里的代码。
下面的例子显示<NOSCRIPT>标记的作用
<NOSCRIPT>
<B>本页面使用了JavaScript,因此你需要Netscape Navigator2.0或以后版本!
<BR>
<A HREF="http://home.netscape.com/comprod/mirror/index.
html">
<IMG SRC="NSNow.gif"></A>
如果你正在使用Navigator 2.0或以后版本,而你又看到此信息,你应当从 Options菜单里选择 Network Preferences 项打开JavaScript。</NOSCRIPT>
...
定义和调用函数
函数是 JavaScript一个基本的结构模块。一个函数就是一个JavaScript过程--一组执行特定任务的语句。 一个函数的定义有这些基本部分:
* function关键字。
* 一个函数名。
* 括弧中以逗号分隔的函数的参数列表。
* 在函数的{}中的语句。
弄懂定义函数和调用函数之间的区别是很重要的。定义一个函数是简单地命名函数,并指定一个函数被调用时做什么。调用函数才以指定的参数实际执行指定的作用。
事件处理器在"描述事件处理器"中介绍。
一般地,你应该在一个文档的HEAD部分给页面定义函数。这样,所有函数都在显示的内容之前定义。否则,当页面正在装载的时候用户可能执行一个激发事件处理器的动作而调用一个未定义的函数, 从而导致错误。
下面的的例子在文档的HEAD部分定义了一个简单的函数,然后在BODY部分调用:
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--对老的浏览器隐藏脚本
function square(number) {
return number * number
}
// 结束隐藏-->
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT>
document.write("函数返回 ", square(5), ".")
&;lt;/SCRIPT>
<P>结束。
</BODY>
函数square使用一个参数,为number。函数包含一个语句
return number * number
表明返回函数参数的积。return指令指定函数返回的值。在文档的BODY部分,指令square(5)
以参数5调用函数。函数执行它的语句然后返回值 25。脚本的结果如下所示:
函数返回25。
结束。
square函数使用
document.write(...)
在Navigator显示输出结果。此行用标准的JavaScript对象表示法调用Navigator中document 对象的write方法:
documentName.methodName(arguments...)
其中documentName是对对象的,methodName 是方法的名称,而arguments 是以逗号分隔的方法的参数列表。
除了定义函数外,你还可以定义function对象。
使用write方法
正如你在前一例子中所看到的,文档write方法在Navigator中显示输出结果。 "真蠢,"你说,"HTML已经这样做了。" 但是在脚本中你可以做各种你不可能用普通HTML作的事情。比如,你可以有条件地或根据变量参数来显示文本。由于这些,write 是JavaScript 方法中最经常用到的方法之一。
write方法使用任意数量的字符串或者变量作参数。在write中你可以用字符串连接符(+)从几个字符串产生一个字符串。
看看下面的脚本,它通过 Navigator JavaScript 动态地产生HTML:
<HEAD> <SCRIPT>
<!---对老的浏览器隐藏脚本
//此函数显示一指定的宽度水平线
function bar(widthPct) {
document.write("<HR ALIGN='left' WIDTH=" + widthPct +
"%>")
}
// This function displays a heading of specified level
and some text
function output(headLevel,headText,text) {
document.write("<H",headLevel,">",headText,"</H",
headLevel, "><P>",text)
}
//结束隐藏-->
</SCRIPT> </HEAD>
<BODY>
<SCRIPT>
<!---对老的浏览器隐藏脚本
bar(25)
output(2,"JavaScript Rules!","Using JavaScript is easy..")
//结束隐藏-->
</SCRIPT>
<P>This is some standard HTML,unlike the above that is generated.
</BODY>
此文档的HEAD部分定义了两个函数:
* bar,显示函数参数指定宽度的HTML水平线。
* output,显示一个HTML标题,第一个参数指定其级别,第二个参数指定其文字,第三个参数指定其段落文本。然后文档的BODY部分调用这两个函数产生如下的显示结果:
下行产生bar函数的输出:
document.write("<HR ALIGN='left' WIDTH=",widthPct,"%>")
注意:在 bar 的定义中,在双引号里使用的是单引号。无论什么时候你想在一个字符串里使用引号就必需这样。 然后以参数25 调用bar,就会产生与以下HTML相同的输出结果:
<HR ALIGN="left" WIDTH=25%>
write 有一个类似的方法:writeln,它在输出结果后加上一个新行标志( 依赖于操作平台的不同,可能为一个回车或者为一个回车加换行 )。因HTML常忽略新行标志,因此write和writeln没有什么不同,除了在诸如PRE这样的标记里,在这样的标记里回车不被忽略。
打印输出
Navigator 3.0能打印JavaScript产生的输出结果。从File菜单选择Print就可以打印输出结果。
要查 JavaScript的write和writeln方法产生的HTML代码,用户必需指定view-source:协议。如用户从View菜单选择 Document Source或者Frame Source,显示的内容是所见即所得(wysiwyg)的URL。下例显示一个view-source:URL:
view-source:wysiwyg://0/file:/c|/temp/genhtml.html
Navigator 2.0不打印JavaScript产生的输出结果。比如,如果用户从File菜单中选择Print打印前面例子的页面,你只会看到一行:"This is some standard HTML...,"即使你在屏幕上看到两行。
显示输出
JavaScript在Navigator中从上至下产生页面。一旦文本已经显示,不重新装载,你不可能改变它。 通常不更新整个页面是不可能更新页面的某一部分。然而,你可以更新
* 一个页框中的"subwindow(子窗口)"。
* 表单元素;请看"使用事件处理器"。
描述事件处理器
Navigator中的JavaScript应用程序大量用到事件驱动。事件通常是用户所做的某件事情而引发的动作。 比如单击按钮是一个事件,就象改变一个文本字段或鼠标移过一个超级链接。 你可以定义事件处理器,如onChange和onClick,使你的脚本对事件起作用。
每个事件以一定的对象(HTML 标记)来标识,如下表所示:
事件 适用于 出现于 事件处理器
abort 图像 用户中断图像的装载(比如:点击一个链接或者停止按钮) onAbort
blur 窗口、页帧和所有表单元素 用户从窗口、页整和表单元素移开输入焦点 onBlur
click 按钮、单选按钮、检查框、提交按钮、重设按钮、链接 用户点击表单元素或者链接 onClick
change 文本字段、文本框和选择列表 用户改变以上元素的值 onChange
error 图像、窗口 装载文档或者图像时引起错误 onError
focus 窗口、页帧和所有表单元素 用户获得窗口、页整和表单元素的输入焦点 onFocus
load 文档的body部分 用户在Navigator中装载页面 onLoad
mouseout 区域、链接 用户移动鼠标到一个区域(客户端可影射图像)或者链接以外 onMouseout
mouseover 链接 用户移动鼠标到一个链接上 onMouse-Over
reset 表单 用户重设表单(点击重设按钮) onReset
select 文本字段、文本框 用户选择表单元素的输入字段 onSelect
submit 提交表单 用户提交表单 onSubmit
unload 文档的body部分 用户离开当前页面 onUnload
如果一个事件适用于一个HTML标记,那么你就可以为它定义一个事件处理器。事件处理器的名称就是事件的名称,以"on"开头。比如,focus(获得焦点)事件的处理器就是onFocus。
加入一个事件处理器属性到一个标记中,就产生了一个HTML标记的事件处理器;把加引号的JavaScript代码作为属性值。一般的语法是:
<tag eventHandler="JavaScript Code">
其中tag是一HTML标记,eventHandler 是事件处理器名称。
比如,假定你定义了一个JavaScript函数 compute。通过把此函数指定为按钮的onClick事件处理器,你可让Navigator在用户点击按钮时执行此函数:
<INPUT TYPE="button" VALUE="Calculate" onClick="compute
(this.form)">
在onClick后的引号中可以用到任何JavaScript 语句。当用户点击按钮时这些语句被执行。如果要包含一个以上的语句,各语句之间用分号(;)分开。
注意,在前面例子中this.form是指当前表单。关键字 this指当前对象,就是按钮。结构 this.form就指包含按钮的表单。以当前表单作为参数,onClick事件处理器调用compute函数。
通常,给事件处理器定义函数是一个好的做法:
* 这使你的代码模块化--你可以在不同的项目中使用相同的函数作为事件处理器。
* 这也使代码更易于阅读。
使用引号
使用单引号 (')给字符串定界,这样脚本就能区分封装在双引号的字面量和属性值。在下面的例子中,函数 bar在双引号的属性值中包含字面量"left":
function bar(widthPct) {
document.write("<HR ALIGN='left' WIDTH=" + widthPct+"%>")
}
下面是另一个例子:
<INPUT TYPE="button" VALUE="Press Me" onClick="myfunc('astring')">
要确保交替使用双引号和单引号。HTML中的事件处理器必需封装在引号里,你必需使用单引号来界定字符串参数。比如:
<FORM NAME="myform">
<INPUT TYPE="button" NAME="Button1" VALUE="Open Sesame!" onClick="window.open('mydoc。html', 'newWin')">
</FORM>
例子:使用事件处理器
在下面的例子中,你可以在第一个文本字段里输入一个表达式(比如:2+2 ),然后点击按钮。第二个文本字段就显示表达式的值(比如:4)。
<HEAD> <SCRIPT>
<!---对老的浏览器隐藏脚本
function compute(f) {
if (confirm("Are you sure?"))
f.result.value = eval(f.expr.value)
else
alert("Please come back again。")
}
//结束隐藏-->
</SCRIPT> </HEAD>
<BODY>
<FORM>
输入一个表达式:
<INPUT TYPE="text" NAME="expr" SIZE=15>
<INPUT TYPE="button" VALUE="计算" onClick="compute(this.form)">
<BR> 结果:
<INPUT TYPE="text" NAME="result" SIZE=15>
&;lt;/FORM>
<BODY>
在Navigator中的显示结果如下:
输入一个表达式:
结果:
文档的HEAD部分定义了一个函数compute,使用一个Form对象作为参数f。此函数使用了Navigator的JavaScript方法confirm,它显示一个有OK和Cancel按钮的确认对话框。
如果用户点击OK,则confirm返回值为真,文本字段结果的值就等于eval(f.expr.value)的 值。内建的JavaScript函数eval调用参数,可以是代表JavaScript表达式或者语句的任意字符串。
如果用户点击Cancel,则confirm返回值为假,alert 方法将显示另一种信息。
表单中包含一个按钮,它的 onClick事件驱动器调用compute函数。当你点击按钮,JavaScript 以参数this.form调用compute,this.form即表示当前Form对象。在 compute中,此表单被引用为参数 f。
显式调用事件处理器
在JavaScript for Navigator3.0中,你可以用HTML重新设置事件处理器,如下例所示。
<SCRIPT LANGUAGE="JavaScript">
function fun1() {
...<br>
} ...<br>
}
</SCRIPT>
<FORM NAME="myForm">
<INPUT TYPE="button" NAME="myButton" onClick="fun1()">
</FORM>
<SCRIPT>
document.myForm.myButton.onclick=fun2
</SCRIPT>
注意事件处理器是以函数的形式引用的,所以须指定 fun2,而不是fun2()(后者调用fun2,返回任何类型和值)。
还有,由于作为 HTML属性的事件处理器是字面量函数体,在HTML中你不能用<INPUT onClick=fun1>使fun1作为输入的onClick处理器,而必须用fun1 如上例所示。
最后因为JavaScript是大小写敏感的,因此在 JavaScript中事件处理器名称必须为小写。
检查表单输入的有效性
如果你不可能运行基于服务器的程序,请跳过此部分。
JavaScript最重要的用途之一是检查表单输入的有效性,这些表单的输入被送往基于服务器的程序,诸如LiveWire应用程序或者CGI程序。这是很有用的,因为
* 它能减轻服务器的负担。 "无效数据"输入结果在传往基于服务器的程序前已经被滤除。
* 它能减少由于用户错误而产生的拖延。 如果不这样,有效性检查就得在服务器上执行,因此数据必须从客户端传到服务器,经过处理,然后为了获得有效的输入再返回到客户端。
* 它能简化基于服务器的程序。
通常,至少在两个地方你要检查输入的有效性:
* 当用户要输入数据时,在每个要检查有效性的表单元素中使用onChange事件处理器
* 当用户提交表单时,在提交表单的按钮中使用 onClick事件处理器
检查有效性的函数例子
下面是一些简单的检查有效性的函数。
<HEAD>
<SCRIPT LANGUAGE="javascript">
function isaPosNum(s) {
return (parseInt(s) > 0)
}
function qty_check(item,min,max) {
var returnVal = false
if (!isaPosNum(item.value))
alert("Please enter a postive number" )
else if (parseInt(item.value) < min)
alert("Please enter a " + item.name +" greater than "
+ min)
else if (parseInt(item.value) > max)
alert("Please enter a " + item.name + " less than " +
max)
else
returnVal = true
return returnVal
}
function validateAndSubmit(theform) {
if (qty_check(theform.quantity,0,999)) {
alert("Order has been Submitted")
return true
else {
alert("Sorry,Order Cannot Be Submitted!")
return false
}
}
</SCRIPT>
</HEAD>
isaPosNum是一个简单的函数,如果参数是正数则返回真值,否则返回假值。
qty_check使用三个参数:对应于需检查有效性的表单元素对象item,item 可以取的最小值和最大值(min和max)。它检查item的值是否在min和max之间,如果不在,则显示一个警告对话框。
validateAndSubmit 以Form对象作为参数;它用qty_check检查表单元素的值,如果输入有效则提交表单。 否则,显示一个警告对话框,并不提交表单。
使用有效性检查函数>
在下面的例子中,文档的的BODY部分使用qty_check作为文本字段的onChange事件处理器,validateAndSubmit作按钮 onClick事件处理器。
<BODY>
<FORM NAME="widget_order" ACTION="lwapp.htm" method=
"post">
How many widgets today?
<INPUT TYPE="text" NAME="quantity" onChange="qty_check
(this,0, 999)">
<BR>
<INPUT TYPE="button" VALUE="Enter Order" onClick=
"validateAndSubmit(this.form)">
</FORM>
</BODY>
这个表单提交一数值到LiveWire应用程序中的页面lwapp.htm。它也能用于提交表单到CGI程序。
此表单看起来就像这样:
How many widgets today?
当你改变了文本字段的值,并按Tab 或者在字段外点击鼠标移动输入焦点时,onChange事件处理器被触发。注意这两个事件处理器都用this来代表当前的对象:在文本字段中,它用于将对应于文本字段的 JavaScript 对象传递给 qty_check,在按钮中它用于将JavaScriptForm对象传递给validateAndSubmit。
如数据有效,例中用validateAndSubmit按钮,并用 submit方法提交表单到服务器程序。也可以用一个有着onSubmit事件处理器提交按钮(定义为<INPUT TYPE="submit">),如果数据无效则返回值为假。例如:
<INPUT TYPE="submit"
onSubmit="return qty_check(theform.quantity,0,999)">
当数据无效 qty_check返回值为假时,onSubmit处理器就禁止提交表单。