[正文]
要在你的網(wǎng)頁中使用 JavaScript ,你首先必須要知道該將它放在哪兒。其實(shí)很簡單,只要在你的網(wǎng)頁(HTML文件)中插入 <SCRIPT> 和 </SCRIPT> 標(biāo)記對,你就可以在這兩個(gè)標(biāo)記隊(duì)之間插入你的 JavaScript 代碼了:
<script>
alert("Hello world!");
</script>
另外,你也可以將 JavaScript 代碼放在另一個(gè)單獨(dú)的文件里,然后在網(wǎng)頁(HTML文件)中使用 “SRC= 此單獨(dú)文件的路徑/地址(URL)”來使用此單獨(dú)文件里的 JavaScript 程序代碼。一般將這個(gè)單獨(dú)的文件保存為擴(kuò)展名為 .JS 的文件:
<script src="mycode.js"></script>
你可以在一個(gè) HTML 文件中使用 <SCRIPT> </SCRIPT> 標(biāo)記對任意多次。 雖然在通常情況下你都會將所有代碼放在 HTML 文件的某一處,但有些時(shí)候?yàn)榱吮WC你的JavaScript程序能夠正確運(yùn)行,你不得不將它們分散地放在 HTML 文件的多個(gè)地方。
不管你是在 HTML 文件中直接插入代碼還是通過外部的單獨(dú)的文件來使用 JavaScript ,通常都是將 <SCRIPT> </SCRIPT> 標(biāo)記對放在 <HEAD> 和 </HEAD> 標(biāo)記對之間。這樣能夠保證在你的網(wǎng)頁被下載到客戶端后開始執(zhí)行 JavaScript 的時(shí)候你的 JavaScript 代碼也已經(jīng)被下載到客戶端了。 這同時(shí)也是放置你的 JavaScript 函數(shù)的好地方,如果你想要某些代碼在你的網(wǎng)頁顯示出來之后才執(zhí)行的話,你最好將這些代碼放在函數(shù)里,等網(wǎng)頁顯示以后再通過調(diào)用函數(shù)來執(zhí)行它們,
請看示例。
另外一些時(shí)候,你有可能需要將你的腳本代碼放在 <BODY> 和 </BODY> 標(biāo)記對之間。這樣做沒什么不對的,因?yàn)槿绻阆胍ㄟ^ JavaScript 代碼來生成網(wǎng)頁中的 HTML 語句,你就非常需要這樣做,
請看示例。
<SCRIPT> 標(biāo)記還可以通過“ LANGUAGE = JavaScript 的版本”語句來指定所要使用的 JavaScript 的版本, “=”號后邊的值可以是:"JavaScript"、"JavaScript1.1" 或者 "JavaScript1.2"。大部分的瀏覽器都會自動識別它所支持的 JavaScript 的版本,而忽略它不支持的 JavaScript 。
你可以針對不同版本的瀏覽器使用不同的 JavaScript 腳本代碼,下邊的列表中列出了不同版本的 Netscape 瀏覽器所支持的不同版本的 JavaScript: JavaScript - Netscape 2.0 JavaScript1.1 - Netscape 3.0 JavaScript1.2 - Netscape 4.0
所以對于 Netscape 2.0 瀏覽器,它將會忽略標(biāo)記 <SCRIPT LANGUAGE="JavaScript1.2"> 中定義的 JavaScript1.2 版本的腳本代碼,但是 Netscape 4.0 將會執(zhí)行此版本的腳本代碼(同時(shí)也可以執(zhí)行前邊兩個(gè)版本的腳本代碼)。 你還可以在同一個(gè)網(wǎng)頁(HTML 文件)中通過 <SCRIPT LANGUAGE="......"> 標(biāo)記使用不同版本的 JavaScript 代碼:
<script language="JavaScript">
function f1() {
// 舊版本的 JavaScript 代碼。
...
}
</script>
<script language="JavaScript1.2">
function f1() {
// JavaScript 1.2 版的代碼。
...
}
</script>
在這個(gè)例子里,Netscape 2.0 瀏覽器將會執(zhí)行第一個(gè) <SCRIPT>....</SCRIPT> 標(biāo)志對之間的函數(shù) f1() 而忽略第二個(gè) <SCRIPT>....</SCRIPT> 標(biāo)志對之間的函數(shù) f1() 。而對于Netscape 4.0 瀏覽器來說,它將會對兩個(gè) f1() 函數(shù)都進(jìn)行處理,因?yàn)樗С诌@兩個(gè)版本的 JavaScript,但是由于兩個(gè)函數(shù)名字相同,瀏覽器會自動使用第二個(gè)函數(shù) f1() 來覆蓋掉第一個(gè)函數(shù) f1(),因此執(zhí)行的結(jié)果應(yīng)該是第二個(gè)函數(shù) f1() 的執(zhí)行結(jié)果。
想要了解更多這方面的信息請參考:
Netscape‘s JavaScript Reference.在你開始編寫代碼之前,你必須知道一些基本的 JavaScript 語法和結(jié)構(gòu)。
JavaScript 語法與 C/C++、Java 的語法很相似,如果你想要了解非常詳盡的語法,可以參考
Netscape‘s JavaScript Reference 或者
Microsoft‘s JScript Reference ,在那里你可以看到很多關(guān)于 JavaScript 語句、運(yùn)算符、內(nèi)建函數(shù)等等的內(nèi)容列表,而我們這里只是講一些在你開始學(xué)習(xí) JavaScript 的時(shí)候需要掌握的一些基礎(chǔ)語法知識!
【變量】
變量的聲明使用關(guān)鍵字 var ,變量名可以是任意長度的字母、數(shù)字和下劃線組成(“_”),同時(shí)變量名第一個(gè)字符不能是數(shù)字。注意:JavaScript 是對大小寫敏感的,也就是說去分大小寫,如變量 count 和變量 Count 是兩個(gè)不同的變量!
在函數(shù)外邊聲明的變量是全局變量,在腳本代碼或函數(shù)中的任何地方都可以對全局變量進(jìn)行訪問和使用。需要注意的是:在函數(shù)外邊聲明變量的時(shí)候,關(guān)鍵字 var 是可選的(即可用可不用,你可以直接給一個(gè)沒有被聲明的變量賦值), 但是如果你在一個(gè)函數(shù)中想要使用一個(gè)局部變量(即變量的有效使用范圍只是在函數(shù)里邊),而且這個(gè)變量與函數(shù)外邊的一個(gè)全局變量具有相同的變量名,那么你就必須在函數(shù)里邊通過 var 來重新聲明這個(gè)變量,這個(gè)變量亦即是一個(gè)局部變量。
下邊是一些例子:
var text;
var high_score;
var count3 = 1;
var ErrorMessage = "Connect to host failed."
var daysLeft = 5.7;
var 82much = true; // 這行代碼是有語法錯(cuò)誤的。
【字符串】
JavaScript 中使用使用但英文的單引號(‘)或雙引號(")將字符串括起來。如果你想在字符串中使用引號的話,只要在引號前邊加上“\”號即可,請看下邊示例:
var text1 = "Hello world.";
var text2 = ‘Hello again.‘;
var text3 = "Don‘t click here.";
var text4 = "I said "No""; // 這行代碼是有語法錯(cuò)誤的,因?yàn)殡p引號里邊又有雙引號.
var text5 = ‘I said "No"‘; // text5 為: I said "No".
var text6 = "I said \"No\""; // text6 為: I said "No".
【運(yùn)算操作符和表達(dá)式】
JavaScript 大部分的運(yùn)算符和表達(dá)式都和 C/C++、Java 是一樣的,例如,下邊的語句都是合法:
total += 4;
i++;
msg = "Error code " + code; // 字符串合并
【語句】
JavaScript 大部分的語法也是和 C/C++、 Java 一樣的,請看下邊列表: 注釋 - 使用‘//‘ 來注釋一個(gè)單行, ‘/*‘ 和 ‘*/‘ 可以注釋多行; 循環(huán) - for、do、while等等; 條件語句 - if....then....else;switch....case; 對象 - new、this、with 等等。
【函數(shù)】
使用 function 關(guān)鍵字來定義一個(gè)函數(shù):
function name(arg1, arg2, ...) {
JavaScript statements...
}
函數(shù)名必須符合變量名的命名規(guī)則,調(diào)用函數(shù)的時(shí)候,使用函數(shù)名以及函數(shù)需要的參數(shù)即可:
var w = 5;
var h = 3;
setDimensions(w, h);
正如我們前邊所講的,函數(shù)最好是放在 <HEAD>.....</HEAD> 標(biāo)記對之間,那樣可以保證當(dāng)任何語句調(diào)用函數(shù)的時(shí)候函數(shù)已經(jīng)被下載到客戶端了,這樣才不會出錯(cuò),否則可能會產(chǎn)生找不到函數(shù)之類的錯(cuò)誤!
在函數(shù)中可以使用 return 語句返回一些值,例如:
function add(x, y) {
return x + y;
}
...
var total = add(7, 10);
當(dāng)瀏覽器下載(Load)一個(gè)頁面時(shí),任何嵌在網(wǎng)頁中的 JavaScript 代碼將會在瀏覽器解釋執(zhí)行網(wǎng)頁的時(shí)候執(zhí)行。實(shí)際上,JavaScript 代碼可能會在圖片(images)、背景聲音(background sound)或頁面的剩余部分下在完成之前執(zhí)行。
顯然,這樣可能會發(fā)生一些問題。在這個(gè)
在線示例 中,我們試圖通過 document.linkColor 對象獲得用于超文本鏈接(hypertext links)的顏色,第一次嘗試的代碼是在 <HEAD>....</HEAD> 標(biāo)記對之間,第二次嘗試是在 <BODY>....</BODY> 標(biāo)志對之間,下邊的是簡化后的源代碼:
<html>
<head>
<title></title>
<script>
// 獲得頁面超鏈接的顏色.
var lc1 = document.linkColor;
</script>
</head>
<body bgcolor="#ffffff" text="#000000" link="#ff0000">
<font face="Arial,Helvetica" size=3>
<script>
// 獲得頁面超鏈接的顏色.
var lc2 = document.linkColor;
// 顯示出顏色的 RGB 十六進(jìn)制值.
document.writeln(‘link color: ‘ + lc1 + ‘<br>‘);
document.writeln(‘link color: ‘ + lc2);
</script>
</body>
</html>
此例運(yùn)行的結(jié)果如下:
link color: #0000ff
link color: #ff0000
在第一次嘗試中,超鏈接的顏色是瀏覽器默認(rèn)的藍(lán)色 #0000ff(或是其它顏色,這取決于你對瀏覽器的設(shè)置),然而超鏈接的顏色在 <BODY> 標(biāo)記中卻被修改/設(shè)置了(修改處:link="#ff0000"),改成了紅色(#ff0000),在 <BODY> 被下載之前獲得的顏色值 lc1 不是 #ff0000 而是瀏覽器的默認(rèn)值 #0000ff;我們的第二次嘗試是在 <BODY> 標(biāo)記已經(jīng)被下載完成的情況下獲得超鏈接顏色的,所以獲得的顏色是經(jīng)過 <BODY> 修改/設(shè)置后的顏色 #ff0000 (即 lc2 的值)。
對于函數(shù)中的代碼,只有調(diào)用這個(gè)函數(shù)的時(shí)候才會執(zhí)行,但是你知道應(yīng)該在什么時(shí)候調(diào)用函數(shù)嗎?請看我們的下一個(gè)主題:事件。
瀏覽器可以識別很多的事件,例如“頁面下載(Load)完成”這一事件,“用戶鼠標(biāo)移動到超鏈接或按鈕上”這一事件等等。這也就給你提供了一些方便,你可以通過捕捉事件來執(zhí)行相應(yīng)的 JavaScript 代碼。
一種捕捉事件的方法是定義一個(gè)事件句柄,這是針對 HTML 標(biāo)記對象而言的,不同的 HTML 標(biāo)記對應(yīng)不同的對象,不同的這些對象又對應(yīng)不同的時(shí)間句柄 (可以參照下邊的表格)。但是并不是所有的瀏覽器都支持所有相同的事件,我們這里所有例子中使用到的事件都是被 Netscape 和 IE 這兩種瀏覽器所共同支持的。
【定義一個(gè)事件句柄】
定義一個(gè)事件句柄其實(shí)很簡單,就是將 事件名稱 和 事件觸發(fā)是要執(zhí)行的 JavaScript 代碼 一同加到 HTML 的標(biāo)記中去即可,例如:
<a href="page2.html" onClick="count++">下一頁</a>
在這個(gè)例子中,用戶每次點(diǎn)擊一下“下一頁”的超鏈接,就會觸發(fā) onclick 事件,然后在執(zhí)行跟在 onclick 事件后的 JavaScript 代碼:變量 count 增加 1 (count++)。
你可以在事件句柄后邊使用任何合法的 JavaScript 腳本代碼,如果你想使用多條 JavaScript 語句,那么使用分號(;)將各條語句隔開, 對于調(diào)用函數(shù)也是一樣的。但是有一點(diǎn)要提醒你:在事件句柄后邊的字符串中加入 JavaScript 代碼的時(shí)候一定要注意如何正確使用引號。
【圖片的翻滾效果(Rollover)】
看一下這個(gè)
在線示例 ,這個(gè)例子演示了被人熟知的通過鼠標(biāo)移動來改變圖片(Image)的效果,即圖片的翻滾(Rollover),注意:此例無法在 Internet Explorer 3.0 以及更早的版本中正確運(yùn)行。
<IMG> 標(biāo)記沒有鼠標(biāo)移動到其上邊的事件句柄 onMouseOver,但是超鏈接標(biāo)記 <A> 由這個(gè)事件句柄,所以我們在 <IMG> 標(biāo)記兩邊分別加了標(biāo)記 <A HREF=...> 和 </A>。
讓我們看一下代碼先。我們事先編寫了一個(gè)函數(shù) setImage() 用來改變圖片,此函數(shù)需要兩個(gè)參數(shù),name 參數(shù)是要改變圖片的 <IMG> 標(biāo)記對象的名字,參數(shù) source 是名字為 name 的 <IMG> 標(biāo)記對象改變后(不是改變前的)的圖片文件名,改變圖片的關(guān)鍵在于改變圖片對象 <IMG> 的 src 屬性:
function setImage(name, source) {
document.images[name].src = source;
return true;
}
下邊是對每一個(gè)超鏈接使用了三個(gè)事件句柄,一個(gè)是鼠標(biāo)移動到超鏈接上邊是的事件 onMouseOver,一個(gè)是鼠標(biāo)從超鏈接上邊移走的時(shí)候觸發(fā)的事件 onMouseOut,最后一個(gè)事件是鼠標(biāo)點(diǎn)擊超鏈接時(shí)觸發(fā)的 onClick,代碼如下:
<a href="#"
onMouseOver="setImage(‘image1‘, ‘button_on.gif‘)"
onMouseOut="setImage(‘image1‘, ‘button_off.gif‘)"
onClick="return false;">
<img name="image1" border=0 src="button_off.gif"> <b>Item 1</b>
</a>
onMouseOver 和 onMouseOut 事件都調(diào)用了函數(shù) setImage() ,同時(shí)傳遞了參數(shù) name 的值 (這個(gè)值在 <IMG> 標(biāo)記中通過 “NAME= 圖片英文名字” 來定義給出) 以及參數(shù)source 的值,這個(gè)值是我們想要改變后顯示的圖片的文件名 (包括路徑/URL),我們將在后邊講到對象的細(xì)節(jié)問題,在這里請集中注意力對付事件句柄的相關(guān)問題。
注意到 onClick 事件,觸發(fā)后它只執(zhí)行 return false 語句,用來告訴瀏覽器制止/忽略這個(gè)事件的默認(rèn)動作,否則,瀏覽器將會執(zhí)行超鏈接的默認(rèn)動作,跟隨超鏈接所指向的地址/URL,下載一個(gè)新的頁面,而通過返回 false 值,我們可以告知瀏覽器不要這樣做。當(dāng)然,如果你想要讓它轉(zhuǎn)到另一個(gè)新的頁面的話,你可以使用 return true 或者干脆就不要定義 onClick 事件(即刪除上邊語句中的 onClick 事件)。
【另一個(gè)實(shí)用的東東】
另一個(gè)實(shí)用的事件句柄是 onLoad 事件,它用于 <BODY> 標(biāo)記中。在這里,為了說明這一個(gè)事件句柄,我們將以前的一個(gè)
在線示例 修改一下,將會得到同樣的結(jié)果,請看下邊代碼:
<html>
<head>
<title></title>
</head>
<body bgcolor="#ffffff" link="#ff0000" onLoad="alert(document.linkColor);">
<font face="Arial,Helvetica" size=3>
An example of using the <b>onLoad</b> event. Use your browser‘s
RELOAD button to run the example again.
</font>
</body>
</html>
你可以試一下修改后的
在線示例 ,alert() 函數(shù)是 JavaScript 的一個(gè)內(nèi)建函數(shù)(擊JavaScript自帶的函數(shù)),此函數(shù)的作用是顯示一個(gè)消息框,消息框里的消息即是此函數(shù)的字符串參數(shù),在這個(gè)例子里,消息框顯示的是超鏈接顏色 document.linkColor 的 RGB 十六進(jìn)制值,這個(gè)值是在 <BODY> 標(biāo)記中定義的。
下邊是 HTML 標(biāo)記和對應(yīng)的事件句柄的列表,列表中還附帶說明了什么時(shí)候會觸發(fā)相應(yīng)的事件,如果想詳細(xì)了解事件句柄,可以參閱
Netscape HTML Reference 和
Microsoft IE Events Reference 。
HTML標(biāo)記事件當(dāng)....時(shí)候觸發(fā)此事件
<A>onClick用戶點(diǎn)擊超鏈接
onMouseOver鼠標(biāo)移動到超鏈接上邊
onMouseOut鼠標(biāo)離開超鏈接
<AREA>onMouseOver鼠標(biāo)移動到圖片 map 區(qū)域上邊
onMouseOut鼠標(biāo)離開圖片 map 區(qū)域
<BODY>onBlur包含這個(gè)頁面的窗口 window 或 幀 frame 失去焦點(diǎn)的時(shí)候
onFocus包含這個(gè)頁面的窗口 window 或 幀 frame 獲得焦點(diǎn)的時(shí)候
onLoad這個(gè)頁面下載完成的時(shí)候
onUnload退出這個(gè)頁面的時(shí)候
<FORM>onReset按下 RESET (重置) 按鈕的時(shí)候
onSubmit按下 SUBMIT (提交) 按鈕的時(shí)候
<IMG>onAbort下載圖片的過程被用戶手動停止的時(shí)候
onLoad圖片下載完成的時(shí)候
onError在客戶端接收圖片時(shí)有錯(cuò)誤發(fā)生
<INPUT> with
TYPE="BUTTON"
或 "CHECKBOX"
或 "RADIO"
或 "RESET"onClick鼠標(biāo)點(diǎn)擊時(shí)候
<INPUT> with
TYPE="TEXT"
或 <TEXTAREA>onBlur獲得焦點(diǎn)的時(shí)候
onChange輸入框/文本框中的文本被改變的時(shí)候
onFocus獲得焦點(diǎn)的時(shí)候
onSelect輸入框/文本框中的文本被選中 (高亮顯示) 的時(shí)候
<INPUT> with
TYPE="SELECT"onBlur失去焦點(diǎn)的時(shí)候
onChange用戶改變了下拉列表框中的選擇
onClick用戶使用鼠標(biāo)點(diǎn)擊的時(shí)候
onFocus獲得焦點(diǎn)的時(shí)候