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

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

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

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

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

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

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

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

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

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

9 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 除外）。 無法讀寫客戶端的硬碟。

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

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

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

13 範例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 的一個方法，可將一個字串印出於瀏覽器

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

15 範例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!"，

16 範例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 程式碼的偵錯。

17 範例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 有兩種加入註解的方法 單行註解 多行註解

18 範例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>

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

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

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

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

23 範例1-7 主題：使用者點選連結會出現罵人的警告視窗 說明 連結： alert01.htm
程式碼重點 <A 說明 若要讓使用者點選連結來執行 JavaScript 的程式碼，則連結的格式必須是<a href="javascript:[程式碼]">被連結文字</a>

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

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

26 範例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鍵壓著，否則程式有可能會再執行一次。

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

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

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

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

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

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

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

34 範例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 就是指文字欄位中的文字。

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

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

37 範例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，這是由小（控制項）到大（表單）的方式。

38 範例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)。

39 範例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值。

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

41 範例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標籤。

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

43 1-5：JavaScript 和 VBScript 的比較

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

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

46 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）。

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

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

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

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

51 網路資源(4) 此網站包含很多 JavaScript 的範例程式，介紹很完整。 此網站包含了很多現成的程式碼，是程式發展者的交換中心。 此網站包含了很多 DHTML 的範例，例如改變網頁拉霸的顏色、顯示漸進式長條圖等。