javascript学习随笔(编写浏览器脚本 Navigator Scripting )

时间：2021-05-26

在 HTML 中使用JavaScript

JavaScript能以两种方式嵌入HTML:

  • 作为语句和函数使用时,用 SCRIPT 标记
  • 作为事件处理程序使用时,用 HTML 标记

SCRIPT 标记

使用SCRIPT标记把脚本嵌入在HTML中,格式如舷:

<SCRIPT>
_ JavaScript 语句
</SCRIPT>

LANGUAGE属性作为可选项,用于指定脚本语言,用法如下:

<SCRIPT LANGUAGE="JavaScript">
_JavaScript 语句
</SCRIPT>

</SCRIPT>是<SCRIPT>的结束标志,之间可以包括任意多的JavaScript语句.

JavaScript是区分大小写档


例1 一个简单的脚本

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
document.write("Hello net.")
</SCRIPT>
</HEAD>
<BODY>
That's all, folks.
</BODY>
</HTML>

例1中的页面显示:

Hello net.That's all folks.


代码隐匿

在不识别JavaScript的旧版本浏览器上,可以把脚本放置在注释域中,这样JavaScript代码就不会被显示出来. 把整个脚本用HTML的注释标记括起来:

<!-- 开始隐匿的脚本内容,不被旧版本浏览器显示
// 隐匿在此结束. -->

定义和调用函数

在页(page)被装载后,被置于SCRIPT标记之间的脚本被分析.函数被存贮起来,但并未执行. 函数由页内的事件调用执行.

正确理解定义函数与调用函数之间的区别是很重要的,定义函数仅仅是命名了这个函数和说明当此函数被调用时做什么,而调用函数才利用传来的参数真正执行指定的动作.

例2 一个带有函数和注释的脚本

<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- 开始隐匿的脚本内容,不被旧版本浏览器显示
　function square(i) {
　　document.write("The call passed ",i, " to the function.","&lt;BR&gt;")
　　return i*i
　}
　　document.write("The function returned ",square(5),".")
// 隐匿在此结束. -->
</SCRIPT>
</HEAD>
<BODY>
<BR>
All done.
</BODY>


例2中的页面显示:

We passed 5 to the function.
The function returned 25.
All done.

HEAD标记

通常,应该在文档的HEAD部分定义页(page)的所有函数,因为HEAD被首先装载,这就保证了用户做任何可能调用函数的动作前,函数已全部装载.

例3 有两个函数的脚本.

<HEAD>
<SCRIPT>
<!--- hide script from old browsers
function bar() {
　document.write("<HR ALIGN='LEFT' WIDTH=25%>")
}
function output(head,level,string) {
　document.write("<H" + level + ">" + head + "</H" + level + "><p>" + string)
}
// end hiding from old browsers -->
</SCRIPT>
</HEAD>

<BODY>
<SCRIPT>
<!--- hide script from old browers
document.write (bar(),output("Make Me Big",3,"Make me ordinary."))
// end hiding from old browsers -->
</SCRIPT>
<P>
Thanks.
</BODY>

例3的结果:

Make Me Big
Make me ordinary.undefinedundefined
Thanks.

引号

用单引号(')把字符串常量括起来,用双引号把属性的值括起来,这样脚本能够把二者区分开. 在上个例子中, 函数bar中,常量left被放在属性值.再举一个例子:

<INPUT TYPE="button" VALUE="Press Me" onClick="myfunc('astring')">

编写事件处理程序脚本(Scripting Event Handlers)

Navigator上的JavaScript应用程序大部分是事件驱动的,事件常常是用户动作的结果. 例如: 按动按钮是一个事件, 结果是把focus赋与一个form元素.Navigator能够识别一组特定的事件. 你可以定义event handlers脚本,这些脚本在事件发生时会被自动执行.

事件处理程序是作为HTML标记的属性放在文档中的,把要执行JavaScript代码赋给HTML标记. 语法如下:

<TAG eventHandler="JavaScript Code">

其中, TAG是HTML的某一标记, eventHandler是事件处理程序的名称.

例如, 假定已创建了一个名为compute的JavaScript函数,你可以把对该函数的调用赋给这个按钮的onClick事件处理程序,从而实现当用户按此按钮时,Navigator执行函数compute.

<INPUT TYPE="button" VALUE="Calculate" onClick="compute(this.form)">

你可以把任何JavaScript语句放在onClick后的引号内,多个语句之间用分号隔开.这些语句只在当用户按动此按钮时才被执行.

一般说来,把自己的事件处理程序定义成函数是一种好习惯,因为:

  • 这使你的代码模块化--- 同一个函数可以作为多个不同item的事件处理程序.
  • 这使你的代码容易读懂.

请注意,在此例中,使用this.form来引用当前form, 关键字this用来引用当前对象,此处即指button对象,于是this.form结构被用来引用包含此button的form. 上例中onClick事件处理程序是以this.form(当前form)为参数调用compute()函数.

能用于HTML标记中的事件如下:

  • Focus, Blur, Change事件: 文本域,文本区和选择
  • Click事件: 按钮,无线按钮,核对框,递交按钮,复位按钮,链接
  • Select事件: 文本域,文本区
  • MouseOver事件: 链接

如果一事件可用在HTML标记里, 则可以给它定义事件处理程序.通常事件处理程序的名称是以on开头,后跟事件名称. 如, Focus的处理程序名为onFocus.

许多对象有模拟事件的方法(method).如,button有一个名为click的方法能模拟按钮被按下. 注意: 模拟事件的方法不能触发事件处理程序.如方法click并不能触发事件处理程序onClick. 但是,你可以直接调用事件处理程序(如,在脚本中,显式调用onClick).

事件何时发生事件处理程序blur用户将input focus从form元素上移去onBlurclick用户在form元素或连接上接动鼠标onClickchange用户改变了文本,文本区或选择元素的值onChange focus用户把input focus赋给form元素onFocusload用户把页装入NavigatoonLoadmouseover用户把鼠标光标从link或anchor上移过onMouseOveselect用户选择了form元素的输入域onSelectsubmit用户提交了一个formonSubmitunload用户退出此页onUnload


例4 有一个form和一个event handler属性的脚本

<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function compute(form) {
　if (confirm("Are you sure?"))
　　form.result.value=eval(form.expr.value)
　else
　　alert("Please come back again")
}
</SCRIPT>
</HEAD>

<BODY>
<FORM>
Enter an expression:
<INPUT TYPE="text" NAME="expr" SIZE=15>
<INPUT TYPE="button" VALUE="Calculate" ONCLICK="compute(this.form)">
<BR>
Result:
<INPUT TYPE="text" NAME="expr" SIZE=15>
<BR>
</FORM>
</BODY>

例4中的页面显示

Enter an expression:
Result:


例5 有一个form的脚本, event handler属性置于BODY标记中

<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--- hide script from old browsers
function checkNum(str,min,max) {
if (str=="")
　alert("Enter a number in the field, please.")
　return false
　}
for (var i=0; i<str.length;i++) {
　var ch=str.substring(i,i+1)
　if (ch < "0" || ch > "9") {
　　alert("Try a number , please.")
　　return false
　　}
}


var val=parseInt(str, 10)
if ((val <min ) || (val> max)) {
　alert("Try a number from 1 to 10.")
　return false
}
　return true
}

function thanks() {
　alert("Thank you for your input.")
}
// end hiding from old browsers -->
</SCRIPT>
</HEAD>

<BODY>
<FORM NAME="ex5">
Enter a small number :
<INPUT NAME="num"
　onChange="if (!checkNum(this.valu,1,10))
　{this.focus();this.select; else thanks()}">
</FORM>
</BODY>

例5中的页面显示

Enter a number in the field and then click your mouse anywhere OUTSIDE of the field. Depending on what you enter,you will be prompted to enter another number,or thanked.

Enter a small number :

技巧与技术

本节介绍几种有用的编写脚本的技术

更新页(Updating Pages)

在Navigator上JavaScript是按从页的顶部到下的顺序生成结果. 一旦有些东西被重新设计(format),你只能靠重新装载此页的办法来改变,目前,你只能更新整 个页, 而不能只更新某一部分. 但是你可以单独更新frame中的"sub-window".

打印

目前, 还不能把用JavaScript产生的输出打印出来. 例如,若你的页上有如下内容,

<P>This is some text
<SCRIPT>document.write("<P>And some generated text")</SCRIPT>

当打印时,你只会打出"This is some text", 即使你能在屏幕上看到两行.

使用引号

一定要区分双引号和单引号,因为在HTML中事件处理程序必须用双引号 括起来,参数用单引号,例如:

<FORM NAME="myform">
<INPUT TYPE="button" NAME="button1" VALUE="Open Sesame!"
onClick="window.open('stmtsov.html', 'newWin','toolbar=no,directories=no')">
</FORM>

另外,你可以用前置反斜线(\)对引号进行转义.

定义函数

在HTML页的HEAD部分定义全部函数是一个好习惯.这样,在显示任何内容之前, 所有函数均已定义.否则在页还在装载时,用户可能做一些事情触发事件处理程序, 调用了未定义函数,将导致错误.

创建数组

数组是一个有序的值的集合,利用数组名和索引来引用.例如,一个名为emp的数组存放着雇员的名字,并按雇员编号索引.于是,emp[1]是1号雇员,emp[2]是2号雇员, 依次类推.

JavaScript中没有明确的数组数据类型,但由于数组与对象有类似之处(见 JavaScript Object Model),在JavaScript中,很容易创建数组.你可以定义一个 数组对象类型如下:

function MakeArray(n) {
　this.length=n;
　for (var i=1; i <= n; i++)
　　this[i] = 0
　　return this
　}
}

这样就定义了一个数组,第一个属性length表示数组中元素个数(索引为0),其余各属性初始值为0,索引为大于等于1的整数.

调用new时带上数组名和数组元素的个数,就创建了一个数组.

emp=new makeArray(20);

该语句创建了一个名为emp的数组,有20个元素,初始值为0.

操作数组(Populating an Array)

通过给数组元素赋值的办法来操作数组.如:

emp[1]="Casey Jones"
emp[2]="PHil Lesh"
emp[3]="August West"

等等.

还可以创建对象的数组.如,定义一个名为Employees的对象类型:

function Employee(empno,name,dept) {
　this.empo= empno;
　this.name= name;
　this.dept= dept;
}

下列语句则创建了一个此对象的数组:

emp=new MakeArray(3)
emp[1]=new Employee(1,"Casey Jones", "Engineering")
emp[2]=new Employee(2,"Phil Lesh", "Music")
emp[3]=new Employee(3,"August",""Admin)

这时,利用函数show_props(在JavaScript Object Model中定义)来显示该 数组中的对象, 如下:

for (var n=1; n<=3; n++) {
　document.write(show_props(emp[n],"emp")+"");
}

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章