javascript学习随笔(编写浏览器脚本 Navigator Scripting )
时间：2024-04-28 09:49:39
在 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.","<BR>")
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元素上移去 | onBlur |
| click | 用户在form元素或连接上接动鼠标 | onClick |
| change | 用户改变了文本,文本区或选择元素的值 | onChange |
| focus | 用户把input focus赋给form元素 | onFocus |
| load | 用户把页装入Navigato | onLoad |
| mouseover | 用户把鼠标光标从link或anchor上移过 | onMouseOve |
| select | 用户选择了form元素的输入域 | onSelect |
| submit | 用户提交了一个form | onSubmit |
| unload | 用户退出此页 | 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中的页面显示
0
投稿猜你喜欢
python commands模块的适用方式
Python绘制百分比堆叠柱状图并填充图案
python使用正则筛选信用卡
浅谈MySQL数据库崩溃(crash)的常见原因和解决办法
Python实现线程状态监测简单示例
MySQL 线上日志库迁移实例
python如何利用Mitmproxy抓包
jQuery中ajax和post处理json的不同示例对比
Access的特点及其概念问答
利用Python多处理库处理3D数据详解
多种语言下获取当前页完整URL及其参数
python数据分析:关键字提取方式
总结python爬虫抓站的实用技巧
CSS的优先级与特殊性
Django教程笔记之中间件middleware详解
