首頁 > 開發者 > JavaScript
JavaScript能以兩種方式嵌入HTML:
使用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部分定義頁(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後的引號內,多個語句之間用分號隔開.這些語句只在當使用者按動此按鈕時才被執行.
一般說來,把自己的事件處理常式定義成函數是一種好習慣,因為:
請注意,在此例中,使用this.form來引用當前form, 關鍵字this用來引用當前對象,此處即指button對象,於是this.form結構被用來引用包含此button的form. 上例中onClick事件處理常式是以this.form(當前form)為參數調用compute()函數.
能用於HTML標記中的事件如下:
如果一事件可用在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 |
<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")+"");
}
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
