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

在 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中的页面显示

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")+"");
}

时间： 2024-03-03 18:37:19

javascript学习随笔(编写浏览器脚本 Navigator Scripting )_javascript技巧的相关文章

JavaScript学习总结之JS、AJAX应用_javascript技巧

1.AJAX 简介 AJAX(音译为:阿贾克斯) = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML),是指一种创建交互式网页应用的网页开发技术,也就是在无需重新加载整个网页的情况下,能够更新部分网页的技术.AJAX 不是新的编程语言,而是一种使用现有标准的新方法,是一种用于创建快速动态网页的技术,通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新,传统的

每天一篇javascript学习小结（属性定义方法）_javascript技巧

定义(Definition).定义属性需要使用相应的函数,比如:Object.defineProperty(obj, "prop", propDesc) 如果obj没有prop这个自身属性,则该函数的作用是给obj添加一个自身属性prop并赋值, 参数propDesc指定了该属性拥有的特性(可写性,可枚举性等). 如果obj已经有了prop这个自身属性,则该函数的作用是修改这个已有属性的特性,当然也包括它的属性值.1.defineProperty       var book = {

原生javascript和jquery判断浏览器版本等信息_javascript技巧

复制代码 代码如下: <script type="text/javascript"> //jquery判断浏览器信息 $(function(){ var bro=$.browser;//获取浏览器用户代理信息; var bro_msie=bro.msie;//判断是否为ie浏览器,假如为ie浏览器就返回:true,否则返回:undefined; var bro_firefox=bro.mozilla;//判断是否为火狐浏览器:假如为火狐浏览器就返回:true,否则返回:un

javascript学习基础笔记之DOM对象操作_javascript技巧

DOM文档对象模型是HTML和XML的应用程序接口(API),DOM将整个页面规划成由节点层次构成的文档.DOM对象给予开发者对HTML的访问权限,并且使开发者能将HTML作为XML文档来处理和查看.DOM对象是与语言无关的API,意味着它的实现并不是与javascript绑定,这在于初学者来说可能会理解错误.DOM是针对XML的基于树的API,它关注的不仅仅是解析XML代码,而是用一系列相互关联的对象来表示这些代码,而这些对象可以被修改,而且无需重新解析代码就能直接访问它们.由于DOM的使用上

JavaScript实现复制功能各浏览器支持情况实测_javascript技巧

这两天在做Web前端时,遇到需求通过js实现文本复制的功能. 先不考虑浏览器的兼容性,看看各浏览器对复制功能的支持情况: 1.IE浏览器,解决方法有三种,代码如下: 复制代码 代码如下: function copy(txtid){ var txtObj = document.getElementById(txtid); if(window.clipboardData){ // 仅IE支持此对象,firefox.chrome不支持 //1.通过clipboardData对象实现复制 //windo

JavaScript 页面编码与浏览器类型判断代码_javascript技巧

获取页面的编码,如果是IE浏览器用document.charset即可获取,如果用firefox需要用document.characterSet获取. 复制代码 代码如下: function getPageCharset(){ var charSet = ""; var oType = getBrowser(); switch(oType){ case "IE": charSet = document.charset; break; case "FIREF

JavaScript学习点滴 call、apply的区别_javascript技巧

1.call call 方法 调用一个对象的一个方法,以另一个对象替换当前对象. call([thisObj[,arg1[, arg2[, [,.argN]]]]]) 参数 thisObj 可选项.将被用作当前对象的对象. arg1, arg2, , argN 可选项.将被传递方法参数序列. 说明 call 方法可以用来代替另一个对象调用一个方法.call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象. 如果没有提供 thisObj 参数,那么 Global

JavaScript编写检测用户所使用的浏览器的代码示例_javascript技巧

能力检测在编写代码之前先检测特定浏览器的能力.例如,脚本在调用某个函数之前,可能要先检测该函数首付存在.这种检测方法将开发人员从考虑具体的浏览器类型和版本中解放出来,让他们把注意力集中到相应的能力是否存在上.能力检测无法精确地检测特定的浏览器和版本. 怪癖检测怪癖实际上是浏览器实现中存在的bug,例如早期的webkit中就存在一个怪癖,即它会再for-in循环中返回被隐藏的属性.怪癖检测通常涉及到运行一段代码,然后确定浏览器是否存在某个怪癖.由于怪癖检测无法精确地检测特定的浏览器和版本. 用户代

JavaScript 判断浏览器类型及版本_javascript技巧

几天前,浏览器家族有刚诞生了一位小王子,就是Google推出的Chrome浏览器.由于Chrome出生名门,尽管他还是个小家伙,没有人敢小看他.以后,咱们常说浏览器的"四大才子"就得改称为"五朵金花"了. 在网站前端开发中,浏览器兼容性问题本已让我们手忙脚乱,Chrome的出世不知道又要给我们添多少乱子.浏览器兼容性是前端开发框架要解决的第一个问题,要解决兼容性问题就得首先准确判断出浏览器的类型及其版本. JavaScript是前端开发的主要语言,我们可以通过编写J