張智星 jang@mirlab.org http://mirlab.org/jang 台大資工系 多媒體檢索實驗室 第一章 JavaScript 基本介紹 張智星 jang@mirlab.org http://mirlab.org/jang 台大資工系 多媒體檢索實驗室

前言 本投影片適用於「JavaScript 程式設計與應用」，原書連結如下： http://mirlab.org/jang/books/jsBook 如果你是從此書光碟取得此投影片，可隨時連至上述連結，以取得最新版本的投影片及範例檔案。

本章大綱 大綱 主題 本章介紹 JavaScript 的背景及特性，並說明 JavaScript 的執行方式及基本範例。 1-1：背景及特色 1-2：執行方式一：循序執行 1-3：執行方式二：事件驅動 1-4：基本表單 1-5：JavaScript 和 VBScript 的比較 1-6：網路資源

1-1 背景及特色 本小節說明JavaScript程式語言的發展背景及相關特色。

背景 JavaScript程式語言的背景 由 Netscape Communications 公司所開發的一種解譯式程式語言，專門用在網頁中，並在用戶端的電腦執行，以提高網頁的互動性為主要目標 網頁內訂預設的客戶端程式語言。因此只有 JavaScript 能同時適用於 Chrome、FireFox 或 IE 等各大瀏覽器。 滿足 ECMA（European Computer Manufacturer‘s Association，歐洲電腦製造商協會）所制訂的標準。

可使用之平台 JavaScript 可發揮的平台 用戶端：預設的網頁程式語言，可用於 Chrome、FireFox 或 IE 等各大瀏覽器。 伺服器：適用於微軟 IIS 網頁伺服器的 ASP 語言環境，可在網頁送到客戶端之前，進行各種處理，或和資料庫進行資料存取。 單機版：適用於微軟的視窗作業系統（Win98、ME、2000、XP、Vista、Win7、Win8 等），可用於取代原先功能不強的 DOS 批次檔（Batch Files），特別適用於處理日常性或重複型的工作，例如網頁的抓取或帳號的建立，等等。

在網頁程式設計的主要功能 JavaScript 在網頁程式設計的主要功能 執行在用戶端的計算及驗證，以減少伺服器端的計算及網路流量，例如表單驗證（Form Validation）。 Cache功能，可將未用到的圖檔（或其他檔案）預先抓回，以增加使用者的便利。 AJAX 功能：在不換頁的情況下來存取伺服器資料並顯示於網頁

程式語言特性 JavaScript 語言特性 JavaScript 的程式碼是內嵌於 HTML 原始碼之中，並由瀏覽器的 JavaScript 解譯器（Interpreter）來執行程式碼，最後將結果呈現於瀏覽器。換句話說，JavaScript 的程式碼是由瀏覽器來執行，所以在用戶端可看到其原始碼，較難加以保護。 由於安全性的考量，除了讀寫 Cookies（請參見本篇教材後面的介紹）之外，JavaScript 並無法讀取用戶端的檔案或硬碟。 使用變數時，不需要宣告變數型態，JavaScript 會自動決定。 對於不同的資料型態（如字串與數值），JavaScript 可以根據不同情況，自動進行資料型態的合理轉換。

JavaScript vs. Java JavaScript 和 Java 沒有什麼親戚關係！ 比較表： Java 之於 JavaScript 的關係，就如同狗和熱狗。（source） 比較表： JavaScript Java Applets 由客戶端的 JavaScript 解譯器進行逐列解譯後執行。 由伺服器取得編譯後的 Bytecode，然後在客戶端由 Java Virtual Machine 執行。 物件基礎（Object-based）的語言，繼承（Inheritance）關係必須經由特殊方式才能達成，性質及方法可以動態地加到一個物件。 物件導向（Object-oriented）的語言，物件可分為類別（Classes）及實例（Instances），繼承關係來自於物件的階層性。類別及實例都無法具有動態產生的性質及方法。 程式碼內嵌於 HTML 網頁之中。 以特殊標籤來將 Java Applets 加入網頁之中。 所有變數不需要事先宣告資料型態，即可逕行指定變數值。 所有變數都必須事先宣告資料型態。 在執行程式碼時，才會檢查所到的物件是否存在。 在編譯程式碼時，即會檢查所用的物件是否存在。 無法讀寫客戶端的硬碟（Cookies 除外）。 無法讀寫客戶端的硬碟。

1-2：執行方式一：循序執行 本小節說明如何以「循序執行」的方式，來執行網頁中的 JavaScript 程式碼。

JavaScript 於網頁的執行方式 JavaScript 於網頁執行的兩種基本方式： 循序執行（Sequential Execution）: 瀏覽器讀入網頁後，即載入並執行 JavaScript 程式碼，最後將結果直接呈現在瀏覽器上。 事件驅動（Event Driven）: 瀏覽器讀入網頁後，即載入 JavaScript 程式碼，但必須等到使用者點選連結或影像，或是啟動其他滑鼠事件（例如當滑鼠離開某個影像），才能觸發 JavaScript 的執行。

如何加入JavaScript 於網頁 JavaScript 如何加入網頁 注意事項 <script language=javascript> JavaScript 程式碼… </script> 注意事項 標籤中的大小寫並無任何影響。 「language=javascript」也可以完全省略。 雖然 HTML 內的 JavaScript 標籤是可以不分大小寫，但是標籤內部的 JavaScript 程式碼本身會區分大小寫，這是要特別注意的地方！

範例1-1 主題：利用 JavaScript 來印出 "Hello World!" 說明 連結：以瀏覽器開啟hello01.htm、localhost、mirlab 程式碼重點 <script language="javascript"> str = "Hello World!"; document.write(str); </script> 說明 str 是一個字串變數，其值為 "Hello World!" document 則是一個物件，代表程式碼所在的文件 write 則是 document 的一個方法，可將一個字串印出於瀏覽器

「以物件為基礎」的語言 JavaScript 是「以物件為基礎」的語言 所有的變數在 JavaScript 中都是一個物件 一個物件通常有一些性質（Property）和方法（Method） 範例：把一個微波爐A看成一個物件 性質： 微波爐的顏色：A.color 微波爐的容量： A.volume 方法： 加熱：“溫水”=A.heat(“冷水”, 30秒) 加熱：“沸水”=A.heat(“冷水”, 300秒)

範例1-2 主題：document.write() 和 document.writeln() 的差別 說明 連結：writeln01.htm 程式碼重點 <script>document.write("Good"); document.write("Bye!");</script> <script>document.writeln("Good"); document.writeln("Bye!");</script> 說明 writeln() 和 write() 的最大差別在於 writeln() 在列印完畢後會換列，但 write() 不會。 如果連續呼叫 document.write("Good") 和 document.write("Bye!")，在網頁會呈現連在一起的 "GoodBye!"，但是如果連續呼叫 document.writeln("Good") 和 document.writeln("Bye!")，則在網頁會呈現中間有空格的 "Good Bye!"，

範例1-3 主題：呈現 JavaScript 印出的原始效果 說明 連結：writeln02.htm 程式碼重點 <pre> 使用 document.write(): <script>document.write("Good"); document.write("Bye!");</script> 使用 document.writeln(): <script>document.writeln("Good"); document.writeln("Bye!");</script> 使用 document.write() 再加上 "\n": <script>document.write("Good\n"); document.write("Bye!\n");</script> </pre> 說明 使用 <pre> 和 </pre> 來包夾 JavaScript 的程式碼，可以得到JavaScript 的原始輸出結果（未經瀏覽器排版）， 非常適用於JavaScript 程式碼的偵錯。

範例1-4 主題：利用 JavaScript 來印出 size 由 1 到 5 的"Hello World!" 說明 連結：hello02.htm 程式碼重點 <script> // 由 for 迴圈來產生 5 個由小變大的 "Hello World!" for (i=1; i<=5; i++) document.writeln("<font size=" + i + ">Hello World!</font><br>"); </script> 說明 JavaScript 的 for-loop 格式和 C 語言一樣 字串的並排是由「+」來達成。 JavaScript 有兩種加入註解的方法 單行註解 多行註解

範例1-5 主題：利用 <xmp> 和 </xmp> 來印出未經瀏覽器排版的結果 說明 連結：helloXmp01.htm 程式碼重點 <script> // 由 for 迴圈來產生 5 個由小變大的 "Hello World!" document.write('<xmp>'); for (i=1; i<=5; i++) document.writeln("<font size=" + i + ">Hello World!</font><br>"); document.write('</xmp>'); </script> 說明 若要得到未經瀏覽器排版前的 JavaScript 輸出結果，可以使用 <pre> 和 </pre>，但是對於含有 HTML 標籤的文字資料，我們就必須改用 <xmp> 和 </xmp>

HTML/JavaScript解譯及排版流程 原始碼 JavaScript: 解譯及執行 瀏覽器: 解譯標籤 瀏覽器: 排版 網頁 呈現結果 使用<xmp>來觀看資料 範例：helloXmp01.htm 使用<pre>來觀看資料 範例：writeln02.htm

範例1-6 主題：使用註解來隱藏程式碼，使不支援 JavaScript 的瀏覽器不會產生錯誤訊息 說明 連結：hello03.htm 程式碼重點 <script language="javascript"> <!-- 如果瀏灠器無法辨識JavaScript程式, 則從下行開始隱藏 str = "Hello World!"; document.write(str); // 隱藏至上行為止 --> </script> 說明 混合使用 HTML 及 JavaScript 的註解，可以避開無法解譯 JavaScript的瀏覽器。 現在各大瀏覽器都支援 JavaScript，所以使用這種「隱藏程式碼」的 JavaScript 的程式已經越來越少了。

1-3 執行方式二：事件驅動 本小節介紹JavaScript如何用事件驅動來執行程式碼。

內建視窗類別 JavaScript提供了三種和使用者互動的內建對話視窗 說明 警告視窗（Alert Window） 確認視窗（Confirm Window） 提示視窗（Prompt Window），或稱為輸入視窗 說明 所謂「滑鼠事件」（Mouse events），指的是能由瀏覽器偵測到的滑鼠動作，例如點選某一個連結、將游標移到一的影像上、游標的移動等。

範例1-7 主題：使用者點選連結會出現罵人的警告視窗 說明 連結： alert01.htm 程式碼重點 <A href="javascript:alert('!@#$%^&*!')">按了你會後悔喔！</A> 說明 若要讓使用者點選連結來執行 JavaScript 的程式碼，則連結的格式必須是<a href="javascript:[程式碼]">被連結文字</a> 程式碼內的字串（例如上例中'!@#$%^&*!'），可用單引號來界定，避免和「href=」之後的雙引號混淆。

範例1-8 主題：顯示網頁載入時間的警告視窗 說明 連結： alert02.htm 程式碼重點 <script> today = new Date(); hour = today.getHours(); minute = today.getMinutes(); second = today.getSeconds(); string = "網頁載入時間是"+hour+"點"+minute+"分"+second+"秒“; </script> 說明 我們產生字串 string，當連結被按下去時，再將字串送至警告視窗。 有關於日期物件和各種時間的用法，會在後面詳述。

範例1-9 主題：囉里叭唆的警告視窗 說明 連結： alert03.htm 字串可以用”+”連接在一起，而數字以”+”做相加運算，當數值和字串相加時，數值會被當成字串型態，兩者再用”+”相連接。 JavaScript 可以用雙引號（“）或單引號（‘）來定義字串的開始和結束。 若改用無窮迴圈，在Windows平台可同時按 Ctrl、Alt、Del 三鍵來開啟工作管理員，以關閉瀏覽器。

範例1-10 主題：沒完沒了的警告視窗(將執行1000次以上) 說明： 連結： alert05.htm 程式碼重點 function talk() { for (i=0; i<1000; i++) alert('第 ' + (i+1) + ' 次！'); } <a href="javascript:talk()">有膽你就給我按看看！</a> 說明： 可以用"javascript:talk()"直接呼叫自訂的函式talk()。 如果要快速跳出，請勿壓著Enter鍵，改以ESC鍵壓著，否則程式有可能會再執行一次。

範例1-11(1) 主題：使用確認視窗來確認連結動作 連結： confirm01.htm 程式碼重點 <a href="javascript:link2nthu()">清大首頁</a><br> <a href="javascript:if (confirm('你確定要連到交大的首頁嗎？')) location.href='http://www.nctu.edu.tw'">交大首頁</a><br> <a href="http://www.ntu.edu.tw" onClick="return(confirm('你確定要連到台大的首頁嗎？'))">台大首頁</a>

範例1-11(2) 說明 第一種方式呼叫函式link2nthu()，location.href 代表瀏覽器的網址，改變即可連到不同網址。 第二種方式直接寫在連結內，若按確定confirm會回傳true連結新網址，取消則回傳false。 第三種使用了 onClick 的屬性，所指定的字串格式是「return(程式碼)」，其中「程式碼」是一段 JavaScript 的程式碼，只有當此程式碼回傳的值是 true 時，對此連結的點選才會連到指定的網址，否則就完全沒有作用。 除了在用在上述範例之外，一般而言 onClick 可以觸發點擊事件，繼而執行 onClick 屬性字串中的程式碼。

範例1-12(1) 主題：使用輸入視窗來決定連結網址 說明 連結：prompt01.htm 程式碼重點 course = prompt("請輸入課程代碼：(webProgramming, scientificComputing, MSAR)", "webProgramming"); if ((course=="webProgramming") || (course=="scientificComputing") || (course=="MSAR")) location.href="http://mirlab.org/jang/courses/" + course; 說明 我們使用 if 敘述來判斷使用者輸入的字串是否等於 這四種字串。 "||" 代表邏輯運算的「或」，而 "&&" 則代表邏輯運算的「且」，這部分會在後面章節詳述。

範例1-12(2) 說明 alert()、confirm() 和 prompt() 都是 window 物件的方法，所以要呼叫這些方法，完整的寫法應該是 window.alert()、window.confirm() 和 window.prompt()，因為他們太常被用到，所以可以省略 window 此物件，直接呼叫這些函數。

1-4：基本表單 本小節介紹表單(form)各種元件的寫法以及使用方法。

form 基本結構 <form> <input…> … </form> 說明 input標籤可以不寫在form標籤裡面，但是這樣會失去傳送表單的功能(後面ASP的章節會提到)。

範例1-13 主題：基本表單範例 說明 連結：form01.htm form標籤中，action代表表單傳送的目的位址（也就是處理表單資訊的伺服器程式），method 則代表傳送方法，encType是資料編碼格式。 input標籤中，name是標籤的變數名稱，在之後操作javascript的時候會更常用到。 type是表單元件的型態，如果沒有指定預設是單行文字(text)，剩下的之後會列表說明。

範例1-14(1) 主題：將文字欄位的內容送到瀏覽器狀態列 說明 連結：formText2status01.htm 程式碼重點 <input name="theString" value="送到狀態列的預設訊息"> <input type=button value="送到狀態列" onClick="window.status=document.theForm.theString.value"> 說明 onClick中，document 是此文件，theForm 是我們定義的表單名稱，theString 也是我們定義的文字欄位名稱，而 value 則是文字欄位內建的一個性質名稱，因此 document.theForm.theString.value 就是指文字欄位中的文字。

範例1-14(1) 說明 將此文字送到狀態列：直接設定 window.status 即可。 在嘗試本範例時，你必須先顯示瀏覽器的狀態列 IE 10: 可經由「Alt/檢視/工具列/狀態列」來開啟或關閉瀏覽器的狀態列 Chrome: How??? （請同學們幫忙找答案！） 網頁內如果有多個表單，我們可以分別使用「document.forms[n]」來表示，其中 n = 0, 1, 2 等等。通常一個網頁只有一個表單，因此我們不定義此表單的名稱，也可以直接使用 document.forms[0] 來代表此表單。

範例1-15 主題：使用 onChange 事件將文字欄位送到狀態列 說明 連結： formText2status02.htm 程式碼重點 <input type=text value="送到狀態列的預設訊息" onChange="window.status=this.value"> 說明 文字轉換的動作定義於文字欄位的 onChange 屬性，可以省掉按鈕的使用（此事件只有在文字欄位失去滑鼠焦點時才會起作用）。 我們可以使用 this 來代表目前元件（即 this 所在之元件），使網頁更為簡潔。 在上述範例中，如果希望在文字欄位填入文字時，狀態列能夠立即改變，可將 onChange 改成 onKeyUp 即可。

範例1-16 主題：使用 this.form傳送兩個文字欄位的訊息 說明 連結： formTextMasterSlave01.htm 程式碼重點 <input type=button value="=====>" onClick="this.form.text2.value=this.form.text1.value"> 說明 this.form 就是代表按鈕所在的表單 一般而言，以「a.b」的方式來指到一個物件，例如 form1.input1 等，是由大（表單）到小（控制項）的方式，但唯一的例外，就是 this.form，這是由小（控制項）到大（表單）的方式。

範例1-17 主題：使用 this.form，傳送兩個核記欄位的訊息 說明 連結1： formCheckboxMasterSlave01.htm 連結2： formCheckboxMasterSlave02.htm 程式碼重點 <input type=button value="=====>" onClick="this.form.box2.checked=this.form.box1.checked"> <input type=button value="=====>" onClick="document.myForm.box2.checked=document.myForm.box1.checked"> 說明 checked 的值，true 代表勾選，false 代表不勾選。 如果不是用 this.form ，程式碼比較繁雜(連結2)。

範例1-18 主題：單選的下拉式選單 說明 連結： formSelectSingle01.htm 程式碼重點 <select name=courseList size=4 onChange="alert('你選的課程是「'+this.options[this.selectedIndex].text+'」')"> <option> 1. Linear Algebra … </select> 說明 下拉式選單不是使用input標籤，而是用select和option。 options[n]代表select中第幾個option標籤。 selectedIndex代表所選取option標籤的index值。

範例1-19 主題：多選的下拉式選單 說明 連結： formSelectMultiple01.htm 程式碼重點 <select name=courseList size=4 multiple onChange="listSummary(this.form)"> 說明 從單選變多選只要加入multiple屬性。 listSummary()函式中，我們在 result 變數之前加上了 var，這代表 result 是一個區域變數(Local Variable)，如果沒有，這個變數就預設成全域變數(Global Variable)，可以在函式以外的任何地方存取此變數。 一般我們建議在函式內的變數都盡量設定成局部變數，以減少函式呼叫後可能產生的非預期副作用。

範例1-20 主題：多列文字欄位(textarea) 說明 連結： formTextarea01.htm 程式碼重點 <textarea name=courseList cols=80 rows=10 onChange="alert('更改後的文字：\n'+this.value)"> This is the text within the textarea tag. 這是位於 textarea 標籤內的文字。 </textarea> 說明 和select一樣，不用input標籤。

表單元件一覽表 型態 說明 備註 button 按鈕物件 checkbox 核取方塊物件 file 檔案上傳物件 hidden 隱藏資訊物件 select…option 選單物件 不使用input標籤 password 密碼物件 radio 選取按鈕物件 reset 重設表單按鈕 submit 送出表單按鈕 text 單行文字欄位 textarea 多行文字欄位

1-5：JavaScript 和 VBScript 的比較

JavaScript 和VBScript差異(1) JavaScript 程式碼會分辨大小寫，VBScript 程式碼則不分大小寫。一般高階程式碼（如 C/C++ 等），都會分辨大小寫，因此 VBScript 不區分大小寫，是一個較大的缺失。 範例（jsVbsComp01.htm） xyz = 0 Xyz = 1 XYZ = 2 說明 這段程式碼在兩種script中所產生的結果不同。

JavaScript 和VBScript差異(2) 範例（jsVbsComp02.htm）

JavaScript 和VBScript差異(3) JavaScript 的語法接近 C 或 C++ 程式語言，VBScript 則接近於 Basic 程式語言。 JavaScript 適用大部分的瀏覽器（Chrome、Firefox、 IE、Opera、Netscape 等），但 VBScript 則只能用在 IE 瀏覽器。因此若為了跨瀏覽器平台，選用 JavaScript 是正確的抉擇。 JavaScript 和 VBScript 兩者都適用於 ASP（Active Server Pages） 和 WSH（Window Scripting Hosts）。

1-6：網路資源 本小節介紹幾個有關於 JavaScript 的重要網址，以便查詢最新的資訊。

網路資源(1) http://devedge.netscape.com/central/javascript/ 這是 Netscape 的官方網站，裡面有對於 JavaScript 的完整說明，包含使用手冊和參考資料等，都可以免費下載回來，安裝在自己的電腦，就不必再上網查詢了。 http://msdn.microsoft.com/library/ 這是 Microsoft 的官方網站，稱為 MSDN（Microsoft Developer Network），裡面提供了在 Microsoft 出產的平台上，對於程式開發者的所有線上支援，所以當然也包含了 JavaScript 和 VBScript。你可以在網頁左邊的選單選取「Web Development/Scripting/Downloads」，就可以在網頁右邊看到許多可以下載的腳本引擎、公用程式與說明手冊等。 http://www.ecma-international.org/publications/standards/stnindex.htm 這是 ECMA（European Computer Manufacturer's Association，歐洲電腦製造商協會）對於各種電腦軟體或協定的標準規範，裡面也包含了對於 ECMAScript 的規範文件。

網路資源(2) http://www.devguru.com/home.asp 這個網站資料很多，對於各種 Web 程式設計所需的工具或參考資料都很詳盡。對於 JavaScript 也有完整說明和範例，編排組織都很清楚。 http://www.w3schools.com 這也是一個內容以 Web 程式設計為主的網站，內容很多，當然也包含完整的 JavaScript 說明和範例，深入淺出，很容易瞭解。 http://www.webdeveloper.com 這也是一個綜合性的網站，內容以 Web 程式設計為主，也包含了各種 JavaScript 說明和範例。

網路資源(3) http://www.webreference.com 這也是一個綜合性的網站。 http://www.javascript.com 由網址就可以知道這是以 JavaScript 為中心的網站，三不五時可以找到很有趣的 JavaScript 程式碼。 http://javascriptkit.com 這也是以 JavaScript 為中心的網站，有很多範例程式，還有較進階的說明和範例，適合高手。

網路資源(4) http://hotwired.lycos.com/webmonkey/programming/javascript/ 此網站包含很多 JavaScript 的範例程式，介紹很完整。 http://www.devx.com 此網站包含了很多現成的程式碼，是程式發展者的交換中心。 http://www.dynamicdrive.com/ 此網站包含了很多 DHTML 的範例，例如改變網頁拉霸的顏色、顯示漸進式長條圖等。