《一章JavaScript基本介绍学习资料》由会员分享，可在线阅读，更多相关《一章JavaScript基本介绍学习资料（51页珍藏版）》请在金锄头文库上搜索。
1、第一章JavaScript 基本介紹,張智星 jangmirlab.org http:/mirlab.org/jang 台大資工系 多媒體檢索實驗室,1/50,前言,本投影片適用於JavaScript 程式設計與應用，原書連結如下： http:/mirlab.org/jang/books/jsBook 如果你是從此書光碟取得此投影片，可隨時連至上述連結，以取得最新版本的投影片及範例檔案。,2 /50,本章大綱,大綱 本章介紹 JavaScript 的背景及特性，並說明 JavaScript 的執行方式及基本範例。 主題 1-1：背景及特色 1-2：執行方式一：循序執行 1-3：執行方式二：事件
2、驅動 1-4：基本表單 1-5：JavaScript 和 VBScript 的比較 1-6：網路資源,3 /50,1-1 背景及特色,本小節說明JavaScript程式語言的發展背景及相關特色。,4 /50,可使用之平台,JavaScript 可發揮的平台 用戶端：預設的網頁程式語言，可用於 Chrome、FireFox 或 IE 等各大瀏覽器。 伺服器：適用於微軟 IIS 網頁伺服器的 ASP 語言環境，可在網頁送到客戶端之前，進行各種處理，或和資料庫進行資料存取。 單機版：適用於微軟的視窗作業系統（Win98、ME、2000、XP、Vista、Win7、Win8 等），可用於取代原先功能不
3、強的 DOS 批次檔（Batch Files），特別適用於處理日常性或重複型的工作，例如網頁的抓取或帳號的建立，等等。,6 /50,在網頁程式設計的主要功能,JavaScript 在網頁程式設計的主要功能 提高網頁互動性及趣味性，例如以 JavaScript 所發展出來的各種遊戲或教材。 執行在用戶端的計算及驗證，以減少伺服器端的計算及網路流量，例如表單驗證（Form Validation）。 Cache功能，可將未用到的圖檔（或其他檔案）預先抓回，以增加使用者的便利。 AJAX 功能：在不換頁的情況下來存取伺服器資料並顯示於網頁,7 /50,程式語言特性,JavaScript 語言特性 Ja
4、vaScript 的程式碼是內嵌於 HTML 原始碼之中，並由瀏覽器的 JavaScript 解譯器（Interpreter）來執行程式碼，最後將結果呈現於瀏覽器。換句話說，JavaScript 的程式碼是由瀏覽器來執行，所以在用戶端可看到其原始碼，較難加以保護。 由於安全性的考量，除了讀寫 Cookies（請參見本篇教材後面的介紹）之外，JavaScript 並無法讀取用戶端的檔案或硬碟。 使用變數時，不需要宣告變數型態，JavaScript 會自動決定。 對於不同的資料型態（如字串與數值），JavaScript 可以根據不同情況，自動進行資料型態的合理轉換。,8 /50,JavaScrip
5、t vs. Java,JavaScript 和 Java 沒有什麼親戚關係！ Java 之於 JavaScript 的關係，就如同狗和熱狗。（source） 比較表：,9 /50,1-2：執行方式一：循序執行,本小節說明如何以循序執行的方式，來執行網頁中的 JavaScript 程式碼。,10 /50,JavaScript 於網頁的執行方式,JavaScript 於網頁執行的兩種基本方式： 循序執行（Sequential Execution）: 瀏覽器讀入網頁後，即載入並執行 JavaScript 程式碼，最後將結果直接呈現在瀏覽器上。 事件驅動（Event Driven）: 瀏覽器讀入網頁後
6、，即載入 JavaScript 程式碼，但必須等到使用者點選連結或影像，或是啟動其他滑鼠事件（例如當滑鼠離開某個影像），才能觸發 JavaScript 的執行。,11 /50,如何加入JavaScript 於網頁,JavaScript 如何加入網頁 JavaScript 程式碼 注意事項 標籤中的大小寫並無任何影響。 language=javascript也可以完全省略。 雖然 HTML 內的 JavaScript 標籤是可以不分大小寫，但是標籤內部的 JavaScript 程式碼本身會區分大小寫，這是要特別注意的地方！,12 /50,範例1-1,主題：利用 JavaScript 來印出 He
7、llo World! 連結：以瀏覽器開啟hello01.htm、localhost、mirlab 程式碼重點 str = Hello World!; document.write(str); 說明 str 是一個字串變數，其值為 Hello World! document 則是一個物件，代表程式碼所在的文件 write 則是 document 的一個方法，可將一個字串印出於瀏覽器,13 /50,以物件為基礎的語言,JavaScript 是以物件為基礎的語言 所有的變數在 JavaScript 中都是一個物件 一個物件通常有一些性質（Property）和方法（Method） 範例：把一個微波爐A
8、看成一個物件 性質： 微波爐的顏色：A.color 微波爐的容量： A.volume 方法： 加熱：“溫水”=A.heat(“冷水”, 30秒) 加熱：“沸水”=A.heat(“冷水”, 300秒),14 /50,範例1-2,主題：document.write() 和 document.writeln() 的差別 連結：writeln01.htm 程式碼重點 document.write(Good); document.write(Bye!); document.writeln(Good); document.writeln(Bye!); 說明 writeln() 和 write() 的最大差
9、別在於 writeln() 在列印完畢後會換列，但 write() 不會。 如果連續呼叫 document.write(Good) 和 document.write(Bye!)，在網頁會呈現連在一起的 GoodBye!，但是如果連續呼叫 document.writeln(Good) 和 document.writeln(Bye!)，則在網頁會呈現中間有空格的 Good Bye!，,15 /50,範例1-3,主題：呈現 JavaScript 印出的原始效果 連結：writeln02.htm 程式碼重點 使用 document.write(): document.write(Good); docu
10、ment.write(Bye!); 使用 document.writeln(): document.writeln(Good); document.writeln(Bye!); 使用 document.write() 再加上 n: document.write(Goodn); document.write(Bye!n); 說明 使用 和 來包夾 JavaScript 的程式碼，可以得到JavaScript 的原始輸出結果（未經瀏覽器排版）， 非常適用於JavaScript 程式碼的偵錯。,16 /50,範例1-4,主題：利用 JavaScript 來印出 size 由 1 到 5 的Hello
11、 World! 連結：hello02.htm 程式碼重點 / 由 for 迴圈來產生 5 個由小變大的 Hello World! for (i=1; iHello World!); 說明 JavaScript 的 for-loop 格式和 C 語言一樣 字串的並排是由+來達成。 JavaScript 有兩種加入註解的方法 單行註解 多行註解,17 /50,範例1-5,主題：利用 和 來印出未經瀏覽器排版的結果 連結：helloXmp01.htm 程式碼重點 / 由 for 迴圈來產生 5 個由小變大的 Hello World! document.write(); for (i=1; iHell
12、o World!); document.write(); 說明 若要得到未經瀏覽器排版前的 JavaScript 輸出結果，可以使用 和 ，但是對於含有 HTML 標籤的文字資料，我們就必須改用 和 ,18 /50,HTML/JavaScript解譯及排版流程,JavaScript: 解譯及執行,瀏覽器: 解譯標籤,瀏覽器: 排版,HTML 原始碼,網頁 呈現結果,使用來觀看資料 範例：helloXmp01.htm,使用來觀看資料 範例：writeln02.htm,HTML/JavaScript解譯及排版流程,19 /50,範例1-6,主題：使用註解來隱藏程式碼，使不支援 JavaScript
13、 的瀏覽器不會產生錯誤訊息 連結：hello03.htm 程式碼重點 說明 混合使用 HTML 及 JavaScript 的註解，可以避開無法解譯 JavaScript的瀏覽器。 現在各大瀏覽器都支援 JavaScript，所以使用這種隱藏程式碼的 JavaScript 的程式已經越來越少了。,20 /50,1-3 執行方式二：事件驅動,本小節介紹JavaScript如何用事件驅動來執行程式碼。,21 /50,內建視窗類別,JavaScript提供了三種和使用者互動的內建對話視窗 警告視窗（Alert Window） 確認視窗（Confirm Window） 提示視窗（Prompt Windo
14、w），或稱為輸入視窗 說明 所謂滑鼠事件（Mouse events），指的是能由瀏覽器偵測到的滑鼠動作，例如點選某一個連結、將游標移到一的影像上、游標的移動等。,22 /50,範例1-7,主題：使用者點選連結會出現罵人的警告視窗 連結： alert01.htm 程式碼重點按了你會後悔喔！ 說明 若要讓使用者點選連結來執行 JavaScript 的程式碼，則連結的格式必須是被連結文字 程式碼內的字串（例如上例中!#$%hour = today.getHours();minute = today.getMinutes();second = today.getSeconds();string = 網
15、頁載入時間是+hour+點+minute+分+second+秒“; 說明 我們產生字串 string，當連結被按下去時，再將字串送至警告視窗。 有關於日期物件和各種時間的用法，會在後面詳述。,24 /50,範例1-9,主題：囉里叭唆的警告視窗 連結： alert03.htm 說明 字串可以用”+”連接在一起，而數字以”+”做相加運算，當數值和字串相加時，數值會被當成字串型態，兩者再用”+”相連接。 JavaScript 可以用雙引號（“）或單引號（）來定義字串的開始和結束。 若改用無窮迴圈，在Windows平台可同時按 Ctrl、Alt、Del 三鍵來開啟工作管理員，以關閉瀏覽器。,25 /5
16、0,範例1-10,主題：沒完沒了的警告視窗(將執行1000次以上) 連結： alert05.htm 程式碼重點function talk() for (i=0; i有膽你就給我按看看！ 說明： 可以用javascript:talk()直接呼叫自訂的函式talk()。 如果要快速跳出，請勿壓著Enter鍵，改以ESC鍵壓著，否則程式有可能會再執行一次。,26 /50,範例1-11(1),主題：使用確認視窗來確認連結動作 連結： confirm01.htm 程式碼重點清大首頁 交大首頁台大首頁,27 /50,範例1-11(2),說明 第一種方式呼叫函式link2nthu()，location.href 代表瀏覽器的網址，改變即可連到不同網址。 第二種方式直接寫在連結內，若按確定confirm會回傳true連結新網址，取消則回傳false。 第三種使用了 onClick 的屬性，所指定的字串格式是return(程式碼)，其中程式碼是一段 JavaScript 的程式碼，只有當此程式碼回傳的值是 true 時，對此連結的點選才會連到指定的網址，否則就完全沒有作用。 除了
