第一章JavaScript基本介绍.ppt
《第一章JavaScript基本介绍.ppt》由会员分享,可在线阅读,更多相关《第一章JavaScript基本介绍.ppt(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程式語言的背景 由 Netscape Communications 公司所開發的一種解譯式程式語言,專門用在網頁中,並在用戶端的電腦執行,以提高網頁的互動性為主要目標 網頁內訂預設的客戶端程式語言。因此只有 JavaScript 能同時適用於 Chrome、FireFox 或 IE 等各大瀏覽器。 滿足 ECMA(European Computer Manufa
3、cturers Association,歐洲電腦製造商協會)所制訂的標準。,5 /50,可使用之平台,JavaScript 可發揮的平台 用戶端:預設的網頁程式語言,可用於 Chrome、FireFox 或 IE 等各大瀏覽器。 伺服器:適用於微軟 IIS 網頁伺服器的 ASP 語言環境,可在網頁送到客戶端之前,進行各種處理,或和資料庫進行資料存取。 單機版:適用於微軟的視窗作業系統(Win98、ME、2000、XP、Vista、Win7、Win8 等),可用於取代原先功能不強的 DOS 批次檔(Batch Files),特別適用於處理日常性或重複型的工作,例如網頁的抓取或帳號的建立,等等。,
4、6 /50,在網頁程式設計的主要功能,JavaScript 在網頁程式設計的主要功能 提高網頁互動性及趣味性,例如以 JavaScript 所發展出來的各種遊戲或教材。 執行在用戶端的計算及驗證,以減少伺服器端的計算及網路流量,例如表單驗證(Form Validation)。 Cache功能,可將未用到的圖檔(或其他檔案)預先抓回,以增加使用者的便利。 AJAX 功能:在不換頁的情況下來存取伺服器資料並顯示於網頁,7 /50,程式語言特性,JavaScript 語言特性 JavaScript 的程式碼是內嵌於 HTML 原始碼之中,並由瀏覽器的 JavaScript 解譯器(Interpret
5、er)來執行程式碼,最後將結果呈現於瀏覽器。換句話說,JavaScript 的程式碼是由瀏覽器來執行,所以在用戶端可看到其原始碼,較難加以保護。 由於安全性的考量,除了讀寫 Cookies(請參見本篇教材後面的介紹)之外,JavaScript 並無法讀取用戶端的檔案或硬碟。 使用變數時,不需要宣告變數型態,JavaScript 會自動決定。 對於不同的資料型態(如字串與數值),JavaScript 可以根據不同情況,自動進行資料型態的合理轉換。,8 /50,JavaScript vs. Java,JavaScript 和 Java 沒有什麼親戚關係! Java 之於 JavaScript 的關
6、係,就如同狗和熱狗。(source) 比較表:,9 /50,1-2:執行方式一:循序執行,本小節說明如何以循序執行的方式,來執行網頁中的 JavaScript 程式碼。,10 /50,JavaScript 於網頁的執行方式,JavaScript 於網頁執行的兩種基本方式: 循序執行(Sequential Execution): 瀏覽器讀入網頁後,即載入並執行 JavaScript 程式碼,最後將結果直接呈現在瀏覽器上。 事件驅動(Event Driven): 瀏覽器讀入網頁後,即載入 JavaScript 程式碼,但必須等到使用者點選連結或影像,或是啟動其他滑鼠事件(例如當滑鼠離開某個影像),
7、才能觸發 JavaScript 的執行。,11 /50,如何加入JavaScript 於網頁,JavaScript 如何加入網頁 JavaScript 程式碼 注意事項 標籤中的大小寫並無任何影響。 language=javascript也可以完全省略。 雖然 HTML 內的 JavaScript 標籤是可以不分大小寫,但是標籤內部的 JavaScript 程式碼本身會區分大小寫,這是要特別注意的地方!,12 /50,範例1-1,主題:利用 JavaScript 來印出 “Hello World!“ 連結:以瀏覽器開啟hello01.htm、localhost、mirlab 程式碼重點 str
8、 = “Hello World!“; document.write(str); 說明 str 是一個字串變數,其值為 “Hello World!“ document 則是一個物件,代表程式碼所在的文件 write 則是 document 的一個方法,可將一個字串印出於瀏覽器,13 /50,以物件為基礎的語言,JavaScript 是以物件為基礎的語言 所有的變數在 JavaScript 中都是一個物件 一個物件通常有一些性質(Property)和方法(Method) 範例:把一個微波爐A看成一個物件 性質: 微波爐的顏色:A.color 微波爐的容量: A.volume 方法: 加熱:“溫水”
9、=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() 的最大差別在於 writeln() 在列印完畢後會換列,但 write() 不會。 如果連續呼叫 d
10、ocument.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“); document.write(“Bye!“); 使用 document.
11、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 World!“ 連結:hello02
12、.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; iHello World!“); d
13、ocument.write(); 說明 若要得到未經瀏覽器排版前的 JavaScript 輸出結果,可以使用 和 ,但是對於含有 HTML 標籤的文字資料,我們就必須改用 和 ,18 /50,HTML/JavaScript解譯及排版流程,JavaScript: 解譯及執行,瀏覽器: 解譯標籤,瀏覽器: 排版,HTML 原始碼,網頁 呈現結果,使用來觀看資料 範例:helloXmp01.htm,使用來觀看資料 範例:writeln02.htm,HTML/JavaScript解譯及排版流程,19 /50,範例1-6,主題:使用註解來隱藏程式碼,使不支援 JavaScript 的瀏覽器不會產生錯誤訊
14、息 連結:hello03.htm 程式碼重點 說明 混合使用 HTML 及 JavaScript 的註解,可以避開無法解譯 JavaScript的瀏覽器。 現在各大瀏覽器都支援 JavaScript,所以使用這種隱藏程式碼的 JavaScript 的程式已經越來越少了。,20 /50,1-3 執行方式二:事件驅動,本小節介紹JavaScript如何用事件驅動來執行程式碼。,21 /50,內建視窗類別,JavaScript提供了三種和使用者互動的內建對話視窗 警告視窗(Alert Window) 確認視窗(Confirm Window) 提示視窗(Prompt Window),或稱為輸入視窗 說
15、明 所謂滑鼠事件(Mouse events),指的是能由瀏覽器偵測到的滑鼠動作,例如點選某一個連結、將游標移到一的影像上、游標的移動等。,22 /50,範例1-7,主題:使用者點選連結會出現罵人的警告視窗 連結: alert01.htm 程式碼重點 按了你會後悔喔! 說明 若要讓使用者點選連結來執行 JavaScript 的程式碼,則連結的格式必須是被連結文字 程式碼內的字串(例如上例中!#$%&*!),可用單引號來界定,避免和href=之後的雙引號混淆。,23 /50,範例1-8,主題:顯示網頁載入時間的警告視窗 連結: alert02.htm 程式碼重點 today = new Date(
16、); hour = today.getHours(); minute = today.getMinutes(); second = today.getSeconds(); string = “網頁載入時間是“+hour+“點“+minute+“分“+second+“秒“; 說明 我們產生字串 string,當連結被按下去時,再將字串送至警告視窗。 有關於日期物件和各種時間的用法,會在後面詳述。,24 /50,範例1-9,主題:囉里叭唆的警告視窗 連結: alert03.htm 說明 字串可以用”+”連接在一起,而數字以”+”做相加運算,當數值和字串相加時,數值會被當成字串型態,兩者再用”+”相
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 第一章 JavaScript 基本 介绍
链接地址:https://www.31doc.com/p-2567813.html