【正文】 第一章 JavaScript 基本介紹 張智星 臺大資工系 多媒體檢索實驗室 1/50 JavaScript 程式設計與應用：用於網(wǎng)頁用戶端 前言 ? 本投影片適用於「 JavaScript 程式設計與應用」，原書連結如下： ? ? 如果你是從此書光碟取得此投影片，可隨時連至上述連結，以取得最新版本的投影片及範例檔案。 2 /50 JavaScript 程式設計與應用：用於網(wǎng)頁用戶端 本章大綱 ? 大綱 ? 本章介紹 JavaScript 的背景及特性，並說明 JavaScript 的執(zhí)行方式及基本範例。 ? 主題 ? 11：背景及特色 ? 12：執(zhí)行方式一：循序執(zhí)行 ? 13：執(zhí)行方式二：事件驅動 ? 14：基本表單 ? 15： JavaScript 和 VBScript 的比較 ? 16：網(wǎng)路資源 3 /50 JavaScript 程式設計與應用：用於網(wǎng)頁用戶端 11 背景及特色 ? 本小節(jié)說明 JavaScript程式語言的發(fā)展背景及相關特色。 4 /50 JavaScript 程式設計與應用：用於網(wǎng)頁用戶端 背景 ? JavaScript程式語言的背景 ? 由 Netscape Communications 公司所開發(fā)的一種解譯式程式語言，專門用在網(wǎng)頁中，並在用戶端的電腦執(zhí)行，以提高網(wǎng)頁的互動性為主要目標 ? 網(wǎng)頁內訂預設的客戶端程式語言。因此只有 JavaScript 能同時適用於 Chrome、 FireFox 或 IE 等各大瀏覽器 。 ? 滿足 ECMA（ European Computer Manufacturer‘s Association，歐洲電腦製造商協(xié)會）所制訂的標準。 5 /50 JavaScript 程式設計與應用：用於網(wǎng)頁用戶端 可使用之平臺 ? JavaScript 可發(fā)揮的平臺 ? 用戶端：預設的網(wǎng)頁程式語言，可用於 Chrome、FireFox 或 IE 等各大瀏覽器。 ? 伺服器：適用於微軟 IIS 網(wǎng)頁伺服器的 ASP 語言環(huán)境，可在網(wǎng)頁送到客戶端之前，進行各種處理，或和資料庫進行資料存取。 ? 單機版：適用於微軟的視窗作業(yè)系統(tǒng)（ Win9ME、 20 XP、 Vista、 Win Win8 等），可用於取代原先功能不強的 DOS 批次檔（ Batch Files），特別適用於處理日常性或重複型的工作，例如網(wǎng)頁的抓取或帳號的建立，等等。 6 /50 JavaScript 程式設計與應用：用於網(wǎng)頁用戶端 在網(wǎng)頁程式設計的主要功能 ? JavaScript 在網(wǎng)頁程式設計的主要功能 ? 提高網(wǎng)頁互動性及趣味性，例如以 JavaScript 所發(fā)展出來的各種遊戲或教材。 ? 執(zhí)行在用戶端的計算及驗證，以減少伺服器端的計算及網(wǎng)路流量，例如表單驗證（ Form Validation）。 ? Cache功能，可將未用到的圖檔（或其他檔案）預先抓回，以增加使用者的便利。 ? AJAX 功能：在不換頁的情況下來存取伺服器資料並顯示於網(wǎng)頁 7 /50 JavaScript 程式設計與應用：用於網(wǎng)頁用戶端 程式語言特性 ? JavaScript 語言特性 ? JavaScript 的程式碼是內嵌於 HTML 原始碼之中，並由瀏覽器的 JavaScript 解譯器（ Interpreter）來執(zhí)行程式碼，最後將結果呈現(xiàn)於瀏覽器。換句話說， JavaScript 的程式碼是由瀏覽器來執(zhí)行，所以在用戶端可看到其原始碼，較難加以保護。 ? 由於安全性的考量，除了讀寫 Cookies（請參見本篇教材後面的介紹）之外， JavaScript 並無法讀取用戶端的檔案或硬碟。 ? 使用變數(shù)時，不需要宣告變數(shù)型態(tài)， JavaScript 會自動決定。 ? 對於不同的資料型態(tài)（如字串與數(shù)值）， JavaScript 可以根據(jù)不同情況，自動進行資料型態(tài)的合理轉換。 8 /50 JavaScript 程式設計與應用：用於網(wǎng)頁用戶端 JavaScript vs. Java ? JavaScript 和 Java 沒有什麼親戚關係！ ? Java 之於 JavaScript 的關係，就如同狗和熱狗。（ source） ? 比較表： JavaScript Java Applets 由客戶端的 JavaScript 解譯器進行逐列解譯後執(zhí)行。 由伺服器取得編譯後的 Bytecode，然後在客戶端由 Java Virtual Machine 執(zhí)行。 物件基礎（ Objectbased）的語言，繼承（ Inheritance）關係必須經由特殊方式才能達成，性質及方法可以動態(tài)地加到一個物件。 物件導向（ Objectoriented）的語言，物件可分為類別（ Classes）及實例（ Instances），繼承關係來自於物件的階層性。類別及實例都無法具有動態(tài)產生的性質及方法。 程式碼內嵌於 HTML 網(wǎng)頁之中。 以特殊標籤來將 Java Applets 加入網(wǎng)頁之中。 所有變數(shù)不需要事先宣告資料型態(tài)，即可逕行指定變數(shù)值。 所有變數(shù)都必須事先宣告資料型態(tài)。 在執(zhí)行程式碼時，才會檢查所到的物件是否存在。 在編譯程式碼時，即會檢查所用的物件是否存在。 無法讀寫客戶端的硬碟（ Cookies 除外）。 無法讀寫客戶端的硬碟。 9 /50 JavaScript 程式設計與應用：用於網(wǎng)頁用戶端 12：執(zhí)行方式一：循序執(zhí)行 ? 本小節(jié)說明如何以「循序執(zhí)行」的方式，來執(zhí)行網(wǎng)頁中的 JavaScript 程式碼。 10 /50 JavaScript 程式設計與應用：用於網(wǎng)頁用戶端 JavaScript 於網(wǎng)頁的執(zhí)行方式 ? JavaScript 於網(wǎng)頁執(zhí)行的兩種基本方式： ? 循序執(zhí)行（ Sequential Execution） : 瀏覽器讀入網(wǎng)頁後，即載入並執(zhí)行 JavaScript 程式碼，最後將結果直接呈現(xiàn)在瀏覽器上。 ? 事件驅動（ Event