JavaScript基本介紹

《JavaScript基本介紹》由會員分享，可在線閱讀，更多相關(guān)《JavaScript基本介紹（51頁珍藏版）》請在裝配圖網(wǎng)上搜索。

1、第一章 JavaScript 基本介紹 張智星 jangmirlab.org http:/mirlab.org/jang 臺大資工系 多媒體檢索實驗室 1/50 JavaScript 程式設(shè)計與應(yīng)用：用於網(wǎng)頁用戶端 前言 本投影片適用於 JavaScript 程式設(shè)計與應(yīng) 用，原書連結(jié)如下： http:/mirlab.org/jang/books/jsBook 如果你是從此書光碟取得此投影片，可隨時連 至上述連結(jié)，以取得最新版本的投影片及範(fàn)例 檔案。 2 /50 JavaScript 程式設(shè)計與應(yīng)用：用於網(wǎng)頁用戶端 本章大綱 大綱 本章介紹 JavaScript 的背景及特性，並說明 Java

2、Script 的 執(zhí)行方式及基本範(fàn)例。 主題 1-1：背景及特色 1-2：執(zhí)行方式一：循序執(zhí)行 1-3：執(zhí)行方式二：事件驅(qū)動 1-4：基本表單 1-5： JavaScript 和 VBScript 的比較 1-6：網(wǎng)路資源 3 /50 JavaScript 程式設(shè)計與應(yīng)用：用於網(wǎng)頁用戶端 1-1 背景及特色 本小節(jié)說明 JavaScript程式語言的發(fā)展背景及 相關(guān)特色。 4 /50 JavaScript 程式設(shè)計與應(yīng)用：用於網(wǎng)頁用戶端 背景 JavaScript程式語言的背景 由 Netscape Communications 公司所開發(fā)的一種 解譯式程式語言，專門用在網(wǎng)頁中，並在用戶端的

3、電腦執(zhí)行，以提高網(wǎng)頁的互動性為主要目標(biāo) 網(wǎng)頁內(nèi)訂預(yù)設(shè)的客戶端程式語言。因此只有 JavaScript 能同時適用於 Chrome、 FireFox 或 IE 等各大瀏覽器 。 滿足 ECMA（ European Computer Manufacturers Association，歐洲電腦製造商協(xié)會）所制訂的標(biāo)準(zhǔn)。 5 /50 JavaScript 程式設(shè)計與應(yīng)用：用於網(wǎng)頁用戶端 可使用之平臺 JavaScript 可發(fā)揮的平臺 用戶端：預(yù)設(shè)的網(wǎng)頁程式語言，可用於 Chrome、 FireFox 或 IE 等各大瀏覽器。 伺服器：適用於微軟 IIS 網(wǎng)頁伺服器的 ASP 語言 環(huán)境，可在網(wǎng)頁送

4、到客戶端之前，進(jìn)行各種處理， 或和資料庫進(jìn)行資料存取。 單機(jī)版：適用於微軟的視窗作業(yè)系統(tǒng)（ Win98、 ME、 2000、 XP、 Vista、 Win7、 Win8 等），可用 於取代原先功能不強的 DOS 批次檔（ Batch Files），特別適用於處理日常性或重複型的工作， 例如網(wǎng)頁的抓取或帳號的建立，等等。 6 /50 JavaScript 程式設(shè)計與應(yīng)用：用於網(wǎng)頁用戶端 在網(wǎng)頁程式設(shè)計的主要功能 JavaScript 在網(wǎng)頁程式設(shè)計的主要功能 提高網(wǎng)頁互動性及趣味性，例如以 JavaScript 所 發(fā)展出來的各種遊戲或教材。 執(zhí)行在用戶端的計算及驗證，以減少伺服器端的計 算及網(wǎng)

5、路流量，例如表單驗證（ Form Validation）。 Cache功能，可將未用到的圖檔（或其他檔案）預(yù) 先抓回，以增加使用者的便利。 AJAX 功能：在不換頁的情況下來存取伺服器資料 並顯示於網(wǎng)頁 7 /50 JavaScript 程式設(shè)計與應(yīng)用：用於網(wǎng)頁用戶端 程式語言特性 JavaScript 語言特性 JavaScript 的程式碼是內(nèi)嵌於 HTML 原始碼之中，並由瀏 覽器的 JavaScript 解譯器（ Interpreter）來執(zhí)行程式碼， 最後將結(jié)果呈現(xiàn)於瀏覽器。換句話說， JavaScript 的程式 碼是由瀏覽器來執(zhí)行，所以在用戶端可看到其原始碼，較 難加以保護(hù)。 由

6、於安全性的考量，除了讀寫 Cookies（請參見本篇教材後 面的介紹）之外， JavaScript 並無法讀取用戶端的檔案或 硬碟。 使用變數(shù)時，不需要宣告變數(shù)型態(tài)， JavaScript 會自動決 定。 對於不同的資料型態(tài)（如字串與數(shù)值）， JavaScript 可以 根據(jù)不同情況，自動進(jìn)行資料型態(tài)的合理轉(zhuǎn)換。 8 /50 JavaScript 程式設(shè)計與應(yīng)用：用於網(wǎng)頁用戶端 JavaScript vs. Java JavaScript 和 Java 沒有什麼親戚關(guān)係！ Java 之於 JavaScript 的關(guān)係，就如同狗和熱狗。（ source） 比較表： JavaScript Java

7、 Applets 由客戶端的 JavaScript 解譯器進(jìn)行逐列解 譯後執(zhí)行。 由伺服器取得編譯後的 Bytecode，然後 在客戶端由 Java Virtual Machine 執(zhí)行。 物件基礎(chǔ)（ Object-based）的語言，繼承 （ Inheritance）關(guān)係必須經(jīng)由特殊方式才 能達(dá)成，性質(zhì)及方法可以動態(tài)地加到一個 物件。 物件導(dǎo)向（ Object-oriented）的語言，物 件可分為類別（ Classes）及實例 （ Instances），繼承關(guān)係來自於物件的階 層性。類別及實例都無法具有動態(tài)產(chǎn)生的 性質(zhì)及方法。 程式碼內(nèi)嵌於 HTML 網(wǎng)頁之中。 以特殊標(biāo)籤來將 Java

8、Applets 加入網(wǎng)頁之中。 所有變數(shù)不需要事先宣告資料型態(tài)，即可 逕行指定變數(shù)值。 所有變數(shù)都必須事先宣告資料型態(tài)。 在執(zhí)行程式碼時，才會檢查所到的物件是 否存在。 在編譯程式碼時，即會檢查所用的物件是 否存在。 無法讀寫客戶端的硬碟（ Cookies 除外）。 無法讀寫客戶端的硬碟。 9 /50 JavaScript 程式設(shè)計與應(yīng)用：用於網(wǎng)頁用戶端 1-2：執(zhí)行方式一：循序執(zhí)行 本小節(jié)說明如何以循序執(zhí)行的方式，來執(zhí) 行網(wǎng)頁中的 JavaScript 程式碼。 10 /50 JavaScript 程式設(shè)計與應(yīng)用：用於網(wǎng)頁用戶端 JavaScript 於網(wǎng)頁的執(zhí)行方式 JavaScript

9、於網(wǎng)頁執(zhí)行的兩種基本方式： 循序執(zhí)行（ Sequential Execution） : 瀏覽器讀入網(wǎng) 頁後，即載入並執(zhí)行 JavaScript 程式碼，最後將 結(jié)果直接呈現(xiàn)在瀏覽器上。 事件驅(qū)動（ Event Driven） : 瀏覽器讀入網(wǎng)頁後， 即載入 JavaScript 程式碼，但必須等到使用者點 選連結(jié)或影像，或是啟動其他滑鼠事件（例如當(dāng)滑 鼠離開某個影像），才能觸發(fā) JavaScript 的執(zhí)行。 11 /50 JavaScript 程式設(shè)計與應(yīng)用：用於網(wǎng)頁用戶端 如何加入 JavaScript 於網(wǎng)頁 JavaScript 如何加入網(wǎng)頁 JavaScript 程式碼 注意事項 標(biāo)

10、籤中的大小寫並無任何影響。 language=javascript也可以完全省略。 雖然 HTML 內(nèi)的 JavaScript 標(biāo)籤是可以不分大小寫，但是 標(biāo)籤內(nèi)部的 JavaScript 程式碼本身會區(qū)分大小寫，這是要 特別注意的地方！ 12 /50 JavaScript 程式設(shè)計與應(yīng)用：用於網(wǎng)頁用戶端 範(fàn)例 1-1 主題：利用 JavaScript 來印出 Hello World! 連結(jié)： 以瀏覽器開啟 hello01.htm、 localhost、 mirlab 程式碼重點 str = Hello World!; document.write(str); 說明 str 是一個字串變數(shù)，其

11、值為 Hello World! document 則是一個物件，代表程式碼所在的文件 write 則是 document 的一個方法，可將一個字串印出於瀏 覽器 13 /50 JavaScript 程式設(shè)計與應(yīng)用：用於網(wǎng)頁用戶端 以物件為基礎(chǔ)的語言 JavaScript 是以物件為基礎(chǔ)的語言 所有的變數(shù)在 JavaScript 中都是一個物件 一個物件通常有一些性質(zhì)（ Property）和方法 （ Method） 範(fàn)例：把一個微波爐 A看成一個物件 性質(zhì)： 微波爐的顏色： A.color 微波爐的容量： A.volume 方法： 加熱： “溫水 ”=A.heat(“冷水 ”, 30秒 ) 加熱

12、： “沸水 ”=A.heat(“冷水 ”, 300秒 ) 14 /50 JavaScript 程式設(shè)計與應(yīng)用：用於網(wǎng)頁用戶端 範(fàn)例 1-2 主題： document.write() 和 document.writeln() 的差別 連結(jié)： writeln01.htm 程式碼重點 document.write(Good); document.write(Bye!); document.writeln(Good); document.writeln(Bye!); 說明 writeln() 和 write() 的最大差別在於 writeln() 在列印完畢後會換列， 但 write() 不會。 如果

13、連續(xù)呼叫 document.write(Good) 和 document.write(Bye!)， 在網(wǎng)頁會呈現(xiàn)連在一起的 GoodBye!，但是如果連續(xù)呼叫 document.writeln(Good) 和 document.writeln(Bye!)，則在網(wǎng)頁會 呈現(xiàn)中間有空格的 Good Bye!， 15 /50 JavaScript 程式設(shè)計與應(yīng)用：用於網(wǎng)頁用戶端 範(fàn)例 1-3 主題： 呈現(xiàn) JavaScript 印出的原始效果 連結(jié)： writeln02.htm 程式碼重點 使用 document.write(): document.write(Good); document.wri

14、te(Bye!); 使用 document.writeln(): document.writeln(Good); document.writeln(Bye!); 使用 document.write() 再加上 n: document.write(Goodn); document.write(Bye!n); 說明 使用 和 來包夾 JavaScript 的程式碼，可以得 到 JavaScript 的 原始 輸出結(jié)果 （ 未經(jīng)瀏覽器排版 ） ， 非常適用於 JavaScript 程式 碼 的偵錯。 16 /50 JavaScript 程式設(shè)計與應(yīng)用：用於網(wǎng)頁用戶端 範(fàn)例 1-4 主題： 利用 Ja

15、vaScript 來印出 size 由 1 到 5 的 Hello World! 連結(jié)： hello02.htm 程式碼重點 / 由 for 迴圈來產(chǎn)生 5 個由小變大的 Hello World! for (i=1; i=5; i+) document.writeln(Hello World!); 說明 JavaScript 的 for-loop 格式和 C 語言一樣 字串的並排是由 +來達(dá)成。 JavaScript 有兩種加入註解的方法 單行註解 多行註解 17 /50 JavaScript 程式設(shè)計與應(yīng)用：用於網(wǎng)頁用戶端 範(fàn)例 1-5 主題： 利用 和 來印出未經(jīng)瀏覽器排版的結(jié) 果 連結(jié)：

16、 helloXmp01.htm 程式碼重點 / 由 for 迴圈來產(chǎn)生 5 個由小變大的 Hello World! document.write(); for (i=1; i=5; i+) document.writeln(Hello World!); document.write(); 說明 若要得到未經(jīng)瀏覽器排版前的 JavaScript 輸出結(jié)果，可以使用 和 ，但是對於含有 HTML 標(biāo)籤的文字資料，我們就必須改用 和 18 /50 JavaScript 程式設(shè)計與應(yīng)用：用於網(wǎng)頁用戶端 HTML/JavaScript解譯及排版流程 JavaScript: 解譯及執(zhí)行 瀏覽器 : 解譯標(biāo)

17、籤 瀏覽器 : 排版 HTML 原始碼 網(wǎng)頁 呈現(xiàn)結(jié)果 使用 來觀看資料 範(fàn)例： helloXmp01.htm 使用 來觀看資料 範(fàn)例： writeln02.htm HTML/JavaScript解譯及排版流程 19 /50 JavaScript 程式設(shè)計與應(yīng)用：用於網(wǎng)頁用戶端 範(fàn)例 1-6 主題： 使用註解來隱藏程式碼，使不支援 JavaScript 的瀏覽 器不會產(chǎn)生錯誤訊息 連結(jié)： hello03.htm 程式碼重點 說明 混合使用 HTML 及 JavaScript 的註解，可以避開無法解譯 JavaScript 的瀏覽器。 現(xiàn)在各大瀏覽器都支援 JavaScript，所以使用這種隱藏

18、程式碼的 JavaScript 的程式已經(jīng)越來越少了。 20 /50 JavaScript 程式設(shè)計與應(yīng)用：用於網(wǎng)頁用戶端 1-3 執(zhí)行方式二：事件驅(qū)動 本小節(jié)介紹 JavaScript如何用事件驅(qū)動來執(zhí)行 程式碼。 21 /50 JavaScript 程式設(shè)計與應(yīng)用：用於網(wǎng)頁用戶端 內(nèi)建視窗類別 JavaScript提供了三種和使用者互動的內(nèi)建對 話視窗 警告視窗（ Alert Window） 確認(rèn)視窗（ Confirm Window） 提示視窗（ Prompt Window），或稱為輸入視窗 說明 所謂滑鼠事件（ Mouse events），指的是能 由瀏覽器偵測到的滑鼠動作，例如點選某一

19、個連 結(jié)、將游標(biāo)移到一的影像上、游標(biāo)的移動等。 22 /50 JavaScript 程式設(shè)計與應(yīng)用：用於網(wǎng)頁用戶端 範(fàn)例 1-7 主題：使用者點選連結(jié)會出現(xiàn)罵人的警告視窗 連結(jié)： alert01.htm 程式碼重點 按了你會後悔喔！ 說明 若要讓使用者點選連結(jié)來執(zhí)行 JavaScript 的程式碼，則連 結(jié)的格式必須是 被連結(jié)文字 程式碼內(nèi)的字串（例如上例中 !#$% hour = today.getHours(); minute = today.getMinutes(); second = today.getSeconds(); string = 網(wǎng)頁載入時間是 +hour+點 +minut

20、e+分 +second+秒 “; 說明 我們產(chǎn)生字串 string，當(dāng)連結(jié)被按下去時，再將字串送至 警告視窗。 有關(guān)於日期物件和各種時間的用法，會在後面詳述。 24 /50 JavaScript 程式設(shè)計與應(yīng)用：用於網(wǎng)頁用戶端 範(fàn)例 1-9 主題：囉里叭唆的警告視窗 連結(jié)： alert03.htm 說明 字串可以用 ”+”連接在一起，而數(shù)字以 ”+”做相加運算，當(dāng) 數(shù)值和字串相加時，數(shù)值會被當(dāng)成字串型態(tài)，兩者再用 ”+”相連接。 JavaScript 可以用雙引號（ “）或單引號（ ）來定義字串 的開始和結(jié)束。 若改用無窮迴圈，在 Windows平臺可同時按 Ctrl、 Alt、 Del 三鍵

21、來開啟工作管理員，以關(guān)閉瀏覽器。 25 /50 JavaScript 程式設(shè)計與應(yīng)用：用於網(wǎng)頁用戶端 範(fàn)例 1-10 主題：沒完沒了的警告視窗 (將執(zhí)行 1000次以上 ) 連結(jié)： alert05.htm 程式碼重點 function talk() for (i=0; i1000; i+) alert(第 + (i+1) + 次！ ); 有膽你就給我按看看！ 說明： 可以用 javascript:talk()直接呼叫自訂的函式 talk()。 如果要快速跳出，請勿壓著 Enter鍵，改以 ESC鍵壓著，否 則程式有可能會再執(zhí)行一次。 26 /50 JavaScript 程式設(shè)計與應(yīng)用：用於網(wǎng)頁

22、用戶端 範(fàn)例 1-11(1) 主題：使用確認(rèn)視窗來確認(rèn)連結(jié)動作 連結(jié)： confirm01.htm 程式碼重點 清大首頁 交大首頁 臺大首頁 27 /50 JavaScript 程式設(shè)計與應(yīng)用：用於網(wǎng)頁用戶端 範(fàn)例 1-11(2) 說明 第一種方式呼叫函式 link2nthu()， location.href 代表瀏覽 器的網(wǎng)址，改變即可連到不同網(wǎng)址。 第二種方式直接寫在連結(jié)內(nèi)，若按確定 confirm會回傳 true 連結(jié)新網(wǎng)址，取消則回傳 false。 第三種使用了 onClick 的屬性， 所指定的字串格式是 return(程式碼 )，其中程式碼是一段 JavaScript 的 程式碼

23、，只有當(dāng)此程式碼回傳的值是 true 時，對此連結(jié) 的點選才會連到指定的網(wǎng)址，否則就完全沒有作用。 除了在用在上述範(fàn)例之外，一般而言 onClick 可以觸發(fā)點 擊事件，繼而執(zhí)行 onClick 屬性字串中的程式碼。 28 /50 JavaScript 程式設(shè)計與應(yīng)用：用於網(wǎng)頁用戶端 範(fàn)例 1-12(1) 主題：使用輸入視窗來決定連結(jié)網(wǎng)址 連結(jié)： prompt01.htm 程式碼重點 course = prompt(請輸入課程代碼： (webProgramming, scientificComputing, MSAR), webProgramming); if (course=webProgr

24、amming) | (course=scientificComputing) | (course=MSAR) location.href=http:/mirlab.org/jang/courses/ + course; 說明 我們使用 if 敘述來判斷使用者輸入的字串是否等於 這四 種字串。 | 代表邏輯運算的或，而 & 則代表邏輯運算的 且，這部分會在後面章節(jié)詳述。 29 /50 JavaScript 程式設(shè)計與應(yīng)用：用於網(wǎng)頁用戶端 範(fàn)例 1-12(2) 說明 alert()、 confirm() 和 prompt() 都是 window 物 件的方法，所以要呼叫這些方法，完整的寫法應(yīng) 該是

25、 window.alert()、 window.confirm() 和 window.prompt()，因為他們太常被用到，所以 可以省略 window 此物件，直接呼叫這些函數(shù)。 30 /50 JavaScript 程式設(shè)計與應(yīng)用：用於網(wǎng)頁用戶端 1-4：基本表單 本小節(jié)介紹表單 (form)各種元件的寫法以及 使用方法。 31 /50 JavaScript 程式設(shè)計與應(yīng)用：用於網(wǎng)頁用戶端 form 基本結(jié)構(gòu) 說明 表單是由 form 標(biāo)籤所形成，可包含數(shù)個表單元件，而這 些元件大部分是使用 input 標(biāo)籤。 input標(biāo)籤可以不寫在 form標(biāo)籤裡面，但是這樣會失去傳 送表單的功能 (後

26、面 ASP的章節(jié)會提到 )。 32 /50 JavaScript 程式設(shè)計與應(yīng)用：用於網(wǎng)頁用戶端 範(fàn)例 1-13 主題：基本表單範(fàn)例 連結(jié)： form01.htm 說明 form標(biāo)籤中， action代表 表單傳送的目的位址（也就是處 理表單資訊的伺服器程式） ， method 則代表傳送方法， encType是資料編碼格式。 input標(biāo)籤中， name是標(biāo)籤的變數(shù)名稱，在之後操作 javascript的時候會更常用到。 type是表單元件的型態(tài)，如果沒有指定預(yù)設(shè)是單行文字 (text)，剩下的之後會列表說明。 33 /50 JavaScript 程式設(shè)計與應(yīng)用：用於網(wǎng)頁用戶端 範(fàn)例 1-1

27、4(1) 主題：將文字欄位的內(nèi)容送到瀏覽器狀態(tài)列 連結(jié)： formText2status01.htm 程式碼重點 說明 onClick中， document 是此文件， theForm 是我們定義的 表單名稱， theString 也是我們定義的文字欄位名稱，而 value 則是文字欄位內(nèi)建的一個性質(zhì)名稱，因此 document.theForm.theString.value 就是指文字欄位中的 文字。 34 /50 JavaScript 程式設(shè)計與應(yīng)用：用於網(wǎng)頁用戶端 範(fàn)例 1-14(1) 說明 將此文字送到狀態(tài)列：直接設(shè)定 window.status 即可。 在嘗詴本範(fàn)例時，你必須先顯示瀏

28、覽器的狀態(tài)列 IE 10: 可經(jīng)由 Alt/檢視 /工具列 /狀態(tài)列來開啟或關(guān)閉瀏覽器的 狀態(tài)列 Chrome: How? （請同學(xué)們幫忙找答案?。?網(wǎng)頁內(nèi)如果有多個表單，我們可以分別使用 document.formsn來表示，其中 n = 0, 1, 2 等等。通 常一個網(wǎng)頁只有一個表單，因此我們不定義此表單的名稱 ，也可以直接使用 document.forms0 來代表此表單。 35 /50 JavaScript 程式設(shè)計與應(yīng)用：用於網(wǎng)頁用戶端 範(fàn)例 1-15 主題：使用 onChange 事件將文字欄位送到狀態(tài)列 連結(jié)： formText2status02.htm 程式碼重點 說明 文字

29、轉(zhuǎn)換的動作定義於文字欄位的 onChange 屬性，可以 省掉按鈕的使用（此事件只有在文字欄位失去滑鼠焦點時 才會起作用）。 我們可以使用 this 來代表目前元件（即 this 所在之元件 ），使網(wǎng)頁更為簡潔。 在上述範(fàn)例中，如果希望在文字欄位填入文字時，狀態(tài)列 能夠立即改變，可將 onChange 改成 onKeyUp 即可。 36 /50 JavaScript 程式設(shè)計與應(yīng)用：用於網(wǎng)頁用戶端 範(fàn)例 1-16 主題：使用 this.form傳送兩個文字欄位的訊息 連結(jié)： formTextMasterSlave01.htm 程式碼重點 onClick=this.form.text2.valu

30、e=this.form.text1.value 說明 this.form 就是代表按鈕所在的表單 一般而言，以 a.b的方式來指到一個物件，例如 form1.input1 等，是由大（表單）到小（控制項）的方式 ，但唯一的例外，就是 this.form，這是由?。刂祈棧?到大（表單）的方式。 37 /50 JavaScript 程式設(shè)計與應(yīng)用：用於網(wǎng)頁用戶端 範(fàn)例 1-17 主題：使用 this.form，傳送兩個核記欄位的訊息 連結(jié) 1： formCheckboxMasterSlave01.htm 連結(jié) 2： formCheckboxMasterSlave02.htm 程式碼重點 onCl

31、ick=this.form.box2.checked=this.form.box1.checked onClick=document.myForm.box2.checked=document.myForm.box 1.checked 說明 checked 的值， true 代表勾選， false 代表不勾選。 如果不是用 this.form ，程式碼比較繁雜 (連結(jié) 2)。 38 /50 JavaScript 程式設(shè)計與應(yīng)用：用於網(wǎng)頁用戶端 範(fàn)例 1-18 主題：單選的下拉式選單 連結(jié)： formSelectSingle01.htm 程式碼重點 1. Linear Algebra 說明 下拉式

32、選單不是使用 input標(biāo)籤，而是用 select和 option。 optionsn代表 select中第幾個 option標(biāo)籤。 selectedIndex代表所選取 option標(biāo)籤的 index值。 39 /50 JavaScript 程式設(shè)計與應(yīng)用：用於網(wǎng)頁用戶端 範(fàn)例 1-19 主題：多選的下拉式選單 連結(jié)： formSelectMultiple01.htm 程式碼重點 說明 從單選變多選只要加入 multiple屬性。 listSummary()函式中，我們在 result 變數(shù)之前加上了 var，這 代表 result 是一個區(qū)域變數(shù) (Local Variable)，如果沒有

33、，這個 變數(shù)就預(yù)設(shè)成全域變數(shù) (Global Variable)，可以在函式以外的任 何地方存取此變數(shù)。 一般我們建議在函式內(nèi)的變數(shù)都盡量設(shè)定成局部變數(shù)，以減少 函式呼叫後可能產(chǎn)生的非預(yù)期副作用。 40 /50 JavaScript 程式設(shè)計與應(yīng)用：用於網(wǎng)頁用戶端 範(fàn)例 1-20 主題：多列文字欄位 (textarea) 連結(jié)： formTextarea01.htm 程式碼重點 This is the text within the textarea tag. 這是位於 textarea 標(biāo)籤內(nèi)的文字。 說明 和 select一樣，不用 input標(biāo)籤。 41 /50 JavaScript 程

34、式設(shè)計與應(yīng)用：用於網(wǎng)頁用戶端 表單元件一覽表 型態(tài) 說明 備註 button 按鈕物件 checkbox 核取方塊物件 file 檔案上傳物件 hidden 隱藏資訊物件 selectoption 選單物件 不使用 input標(biāo)籤 password 密碼物件 radio 選取按鈕物件 reset 重設(shè)表單按鈕 submit 送出表單按鈕 text 單行文字欄位 textarea 多行文字欄位 不使用 input標(biāo)籤 42 /50 JavaScript 程式設(shè)計與應(yīng)用：用於網(wǎng)頁用戶端 1-5： JavaScript 和 VBScript 的比較 本小節(jié)主要解釋 JavaScript 和 VBSc

35、ript在寫作 上的差異性。 43 /50 JavaScript 程式設(shè)計與應(yīng)用：用於網(wǎng)頁用戶端 JavaScript 和 VBScript差異 (1) JavaScript 程式碼會分辨大小寫， VBScript 程式碼 則不分大小寫。一般高階程式碼（如 C/C+ 等） ，都會分辨大小寫，因此 VBScript 不區(qū)分大小寫， 是一個較大的缺失。 範(fàn)例（ jsVbsComp01.htm） xyz = 0 Xyz = 1 XYZ = 2 說明 這段程式碼在兩種 script中所產(chǎn)生的結(jié)果不同。 44 /50 JavaScript 程式設(shè)計與應(yīng)用：用於網(wǎng)頁用戶端 JavaScript 和 VBS

36、cript差異 (2) VBScript 不能把多項敘述寫在同一列，每列 敘述尾端不需加分號。 JavaScript可以把多項敘述寫在同一列，但是 每個敘述間要用結(jié)尾。若每行如果只有一個 敘述，則尾端之分號可以省略。 範(fàn)例（ jsVbsComp02.htm） 45 /50 JavaScript 程式設(shè)計與應(yīng)用：用於網(wǎng)頁用戶端 JavaScript 和 VBScript差異 (3) JavaScript 的語法接近 C 或 C+ 程式語言， VBScript 則接近於 Basic 程式語言。 JavaScript 適用大部分的瀏覽器（ Chrome、 Firefox、 IE、 Opera、 Ne

37、tscape 等），但 VBScript 則只能用在 IE 瀏覽器。因此若為了 跨瀏覽器平臺，選用 JavaScript 是正確的抉 擇。 JavaScript 和 VBScript 兩者都適用於 ASP（ Active Server Pages） 和 WSH（ Window Scripting Hosts）。 46 /50 JavaScript 程式設(shè)計與應(yīng)用：用於網(wǎng)頁用戶端 1-6：網(wǎng)路資源 本小節(jié)介紹幾個有關(guān)於 JavaScript 的重要網(wǎng) 址，以便查詢最新的資訊。 47 /50 JavaScript 程式設(shè)計與應(yīng)用：用於網(wǎng)頁用戶端 網(wǎng)路資源 (1) http:/ 這是 Netscap

38、e 的官方網(wǎng)站，裡面有對於 JavaScript 的完整說明，包含 使用手冊和參考資料等，都可以免費下載回來，安裝在自己的電腦，就 不必再上網(wǎng)查詢了。 http:/ 這是 Microsoft 的官方網(wǎng)站，稱為 MSDN（ Microsoft Developer Network ），裡面提供了在 Microsoft 出產(chǎn)的平臺上，對於程式開發(fā)者的所有線上 支援，所以當(dāng)然也包含了 JavaScript 和 VBScript。你可以在網(wǎng)頁左邊的 選單選取 Web Development/Scripting/Downloads，就可以在網(wǎng)頁右 邊看到許多可以下載的腳本引擎、公用程式與說明手冊等。 ht

39、tp:/www.ecma- international.org/publications/standards/stnindex.htm 這是 ECMA（ European Computer Manufacturers Association，歐洲電 腦製造商協(xié)會）對於各種電腦軟體或協(xié)定的標(biāo)準(zhǔn)規(guī)範(fàn)，裡面也包含了對 於 ECMAScript 的規(guī)範(fàn)文件。 48 /50 JavaScript 程式設(shè)計與應(yīng)用：用於網(wǎng)頁用戶端 網(wǎng)路資源 (2) http:/ 這個網(wǎng)站資料很多，對於各種 Web 程式設(shè)計所需的 工具或參考資料都很詳盡。對於 JavaScript 也有完 整說明和範(fàn)例，編排組織都很清楚。

40、http:/ 這也是一個內(nèi)容以 Web 程式設(shè)計為主的網(wǎng)站，內(nèi)容 很多，當(dāng)然也包含完整的 JavaScript 說明和範(fàn)例， 深入淺出，很容易瞭解。 http:/ 這也是一個綜合性的網(wǎng)站，內(nèi)容以 Web 程式設(shè)計為 主，也包含了各種 JavaScript 說明和範(fàn)例。 49 /50 JavaScript 程式設(shè)計與應(yīng)用：用於網(wǎng)頁用戶端 網(wǎng)路資源 (3) http:/ 這也是一個綜合性的網(wǎng)站。 http:/ 由網(wǎng)址就可以知道這是以 JavaScript 為中心的網(wǎng)站 ，三不五時可以找到很有趣的 JavaScript 程式碼。 http:/ 這也是以 JavaScript 為中心的網(wǎng)站，有很多範(fàn)例程 式，還有較進(jìn)階的說明和範(fàn)例，適合高手。 50 /50 JavaScript 程式設(shè)計與應(yīng)用：用於網(wǎng)頁用戶端 網(wǎng)路資源 (4) http:/ ng/javascript/ 此網(wǎng)站包含很多 JavaScript 的範(fàn)例程式，介紹很完 整。 http:/ 此網(wǎng)站包含了很多現(xiàn)成的程式碼，是程式發(fā)展者的 交換中心。 http:/ 此網(wǎng)站包含了很多 DHTML 的範(fàn)例，例如改變網(wǎng)頁 拉霸的顏色、顯示漸進(jìn)式長條圖等。 51 /50