|
在 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中的頁面顯示
技巧與技術
本節介紹幾種有用的編寫腳本的技術
更新頁(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")+"");
}
JavaScript技術:javascript學習隨筆(編寫瀏覽器腳本 Navigator Scripting ),轉載需保留來源!
鄭重聲明:本文版權歸原作者所有,轉載文章僅為傳播更多信息之目的,如作者信息標記有誤,請第一時間聯系我們修改或刪除,多謝。