腳本之家服務器常用軟件

快捷導航

javascript學習隨筆(編寫瀏覽器腳本 Navigator Scripting )

更新時間：2007年03月08日 00:00:00 作者：

在 HTML 中使用JavaScript

JavaScript能以兩種方式嵌入HTML:

作為語句和函數(shù)使用時,用 SCRIPT 標記
作為事件處理程序使用時,用 HTML 標記

SCRIPT 標記

使用SCRIPT標記把腳本嵌入在HTML中,格式如舷:

<SCRIPT> _ JavaScript 語句 </SCRIPT>LANGUAGE屬性作為可選項,用于指定腳本語言,用法如下:

<SCRIPT LANGUAGE="JavaScript"> _JavaScript 語句 </SCRIPT></SCRIPT>是<SCRIPT>的結束標志,之間可以包括任意多的JavaScript語句.

JavaScript是區(qū)分大小寫檔

例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的注釋標記括起來:

定義和調用函數(shù)

在頁(page)被裝載后,被置于SCRIPT標記之間的腳本被分析.函數(shù)被存貯起來,但并未執(zhí)行. 函數(shù)由頁內的事件調用執(zhí)行.

正確理解定義函數(shù)與調用函數(shù)之間的區(qū)別是很重要的,定義函數(shù)僅僅是命名了這個函數(shù)和說明當此函數(shù)被調用時做什么,而調用函數(shù)才利用傳來的參數(shù)真正執(zhí)行指定的動作.

例2 一個帶有函數(shù)和注釋的腳本

<HEAD> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> </HEAD> <BODY> <BR> All done. </BODY>

例2中的頁面顯示:

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

HEAD標記

通常,應該在文檔的HEAD部分定義頁(page)的所有函數(shù),因為HEAD被首先裝載,這就保證了用戶做任何可能調用函數(shù)的動作前,函數(shù)已全部裝載.

例3 有兩個函數(shù)的腳本.

<HEAD> <SCRIPT>  </SCRIPT> </HEAD> <BODY> <SCRIPT>  </SCRIPT> <P> Thanks. </BODY>

例3的結果:

Make Me Big
Make me ordinary.undefinedundefined
Thanks.

引號

用單引號(')把字符串常量括起來,用雙引號把屬性的值括起來,這樣腳本能夠把二者區(qū)分開. 在上個例子中, 函數(shù)bar中,常量left被放在屬性值.再舉一個例子:

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

編寫事件處理程序腳本(Scripting Event Handlers)

Navigator上的JavaScript應用程序大部分是事件驅動的,事件常常是用戶動作的結果. 例如: 按動按鈕是一個事件, 結果是把focus賦與一個form元素.Navigator能夠識別一組特定的事件. 你可以定義event handlers腳本,這些腳本在事件發(fā)生時會被自動執(zhí)行.

事件處理程序是作為HTML標記的屬性放在文檔中的,把要執(zhí)行JavaScript代碼賦給HTML標記. 語法如下:

<TAG eventHandler="JavaScript Code">

其中, TAG是HTML的某一標記, eventHandler是事件處理程序的名稱.

例如, 假定已創(chuàng)建了一個名為compute的JavaScript函數(shù),你可以把對該函數(shù)的調用賦給這個按鈕的onClick事件處理程序,從而實現(xiàn)當用戶按此按鈕時,Navigator執(zhí)行函數(shù)compute.

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

你可以把任何JavaScript語句放在onClick后的引號內,多個語句之間用分號隔開.這些語句只在當用戶按動此按鈕時才被執(zhí)行.

一般說來,把自己的事件處理程序定義成函數(shù)是一種好習慣,因為:

這使你的代碼模塊化--- 同一個函數(shù)可以作為多個不同item的事件處理程序.
這使你的代碼容易讀懂.

請注意,在此例中,使用this.form來引用當前form, 關鍵字this用來引用當前對象,此處即指button對象,于是this.form結構被用來引用包含此button的form. 上例中onClick事件處理程序是以this.form(當前form)為參數(shù)調用compute()函數(shù).

能用于HTML標記中的事件如下:

Focus, Blur, Change事件: 文本域,文本區(qū)和選擇
Click事件: 按鈕,無線按鈕,核對框,遞交按鈕,復位按鈕,鏈接
Select事件: 文本域,文本區(qū)
MouseOver事件: 鏈接

如果一事件可用在HTML標記里, 則可以給它定義事件處理程序.通常事件處理程序的名稱是以on開頭,后跟事件名稱. 如, Focus的處理程序名為onFocus.

許多對象有模擬事件的方法(method).如,button有一個名為click的方法能模擬按鈕被按下. 注意: 模擬事件的方法不能觸發(fā)事件處理程序.如方法click并不能觸發(fā)事件處理程序onClick. 但是,你可以直接調用事件處理程序(如,在腳本中,顯式調用onClick).

事件	何時發(fā)生	事件處理程序
blur	用戶將input focus從form元素上移去	onBlur
click	用戶在form元素或連接上接動鼠標	onClick
change	用戶改變了文本,文本區(qū)或選擇元素的值	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 :

技巧與技術

本節(jié)介紹幾種有用的編寫腳本的技術

更新頁(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", 即使你能在屏幕上看到兩行.

使用引號

一定要區(qū)分雙引號和單引號,因為在HTML中事件處理程序必須用雙引號括起來,參數(shù)用單引號,例如:

<FORM NAME="myform"> <INPUT TYPE="button" NAME="button1" VALUE="Open Sesame!" onClick="window.open('stmtsov.html', 'newWin','toolbar=no,directories=no')"> </FORM>另外,你可以用前置反斜線(\)對引號進行轉義.

定義函數(shù)

在HTML頁的HEAD部分定義全部函數(shù)是一個好習慣.這樣,在顯示任何內容之前, 所有函數(shù)均已定義.否則在頁還在裝載時,用戶可能做一些事情觸發(fā)事件處理程序, 調用了未定義函數(shù),將導致錯誤.

創(chuàng)建數(shù)組

數(shù)組是一個有序的值的集合,利用數(shù)組名和索引來引用.例如,一個名為emp的數(shù)組存放著雇員的名字,并按雇員編號索引.于是,emp[1]是1號雇員,emp[2]是2號雇員, 依次類推.

JavaScript中沒有明確的數(shù)組數(shù)據(jù)類型,但由于數(shù)組與對象有類似之處(見 JavaScript Object Model),在JavaScript中,很容易創(chuàng)建數(shù)組.你可以定義一個數(shù)組對象類型如下:

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

這樣就定義了一個數(shù)組,第一個屬性length表示數(shù)組中元素個數(shù)(索引為0),其余各屬性初始值為0,索引為大于等于1的整數(shù).

調用new時帶上數(shù)組名和數(shù)組元素的個數(shù),就創(chuàng)建了一個數(shù)組.

emp=new makeArray(20);

該語句創(chuàng)建了一個名為emp的數(shù)組,有20個元素,初始值為0.

操作數(shù)組(Populating an Array)

通過給數(shù)組元素賦值的辦法來操作數(shù)組.如:

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

等等.

還可以創(chuàng)建對象的數(shù)組.如,定義一個名為Employees的對象類型:

function Employee(empno,name,dept) { 　this.empo= empno; 　this.name= name; 　this.dept= dept; }下列語句則創(chuàng)建了一個此對象的數(shù)組:

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)這時,利用函數(shù)show_props(在JavaScript Object Model中定義)來顯示該數(shù)組中的對象, 如下:

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

您可能感興趣的文章: