精品伊人久久大香线蕉,开心久久婷婷综合中文字幕,杏田冲梨,人妻无码aⅴ不卡中文字幕

打開APP
userphoto
未登錄

開通VIP,暢享免費電子書等14項超值服

開通VIP
JavaScript教程 - 第一部分 接觸 JavaScript
userphoto

2006.02.23

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

聯系客服

主站蜘蛛池模板: 天台县| 深泽县| 韶山市| 于田县| 六安市| 仁布县| 文昌市| 右玉县| 临颍县| 布尔津县| 祥云县| 巴林左旗| 新化县| 右玉县| 临汾市| 绍兴市| 仁化县| 宣威市| 夏河县| 佛学| 上饶县| 井冈山市| 上杭县| 广宁县| 横峰县| 金华市| 巨鹿县| 阜新市| 二连浩特市| 永春县| 茶陵县| 云和县| 昌黎县| 红原县| 成都市| 资源县| 厦门市| 九江市| 丰宁| 贺兰县| 墨竹工卡县|