1、第10章 網(wǎng)頁制作腳本語言,第1頁,本章概述 本章的學(xué)習(xí)目標(biāo) 主要內(nèi)容,本章概述,在網(wǎng)頁設(shè)計(jì)領(lǐng)域，特效發(fā)揮著非常重要的作用。使用網(wǎng)頁特效，可以使網(wǎng)頁具備更強(qiáng)的交互性、欣賞性，也可使網(wǎng)頁更加智能化。在編寫各種特效時(shí)，最流行的腳本語言就是JavaScript腳本語言。本章主要介紹JavaScript語言基礎(chǔ)知識和在網(wǎng)頁制作中的應(yīng)用。,第2頁,本章的學(xué)習(xí)目標(biāo),了解JavaScript的概念 掌握J(rèn)avaScript的語法 了解JavaScript函數(shù)和事件 了解JavaScript對象的使用方法,第3頁,主要內(nèi)容,10.1腳本語言概述 10.2 JavaScript基礎(chǔ) 10.3函數(shù)和事件 10.4

2、對象 10.5應(yīng)用JavaScript 10.6本章小結(jié),第4頁,10.1 腳本語言概述,在互聯(lián)網(wǎng)中，很多網(wǎng)站都是通過腳本語言編寫行為，控制網(wǎng)頁中的對象，實(shí)現(xiàn)動(dòng)態(tài)的效果，這些動(dòng)態(tài)效果可以使網(wǎng)頁更加豐富多彩。在制作動(dòng)態(tài)效果時(shí)，可使用兩種語言：一種是JavaScript語言，另一種則是VBScript語言。在這兩種腳本語言中，JavaScript語言使用最為廣泛。,第5頁,JavaScript語言,JavaScript的概念 JavaScript是一種面向網(wǎng)絡(luò)應(yīng)用的、面向?qū)ο缶幊痰哪_本語言，是互聯(lián)網(wǎng)中最流行且應(yīng)用最廣泛的腳本語言。 JavaScript與Java的區(qū)別 Java語言是升陽計(jì)算機(jī)擁有

3、版權(quán)的一種服務(wù)器端高級語言，而JavaScript最早由網(wǎng)景公司開發(fā)，并免費(fèi)發(fā)布。JavaScript的語法和語義更接近于C語言。 JavaScript的應(yīng)用 JavaScript是一種簡單的面向?qū)ο竽_本語言，其使用者無需了解太多的編程理論和編譯方法，即可將代碼嵌入到網(wǎng)頁中。,第6頁,主要內(nèi)容,10.1腳本語言概述 10.2 JavaScript基礎(chǔ) 10.3函數(shù)和事件 10.4對象 10.5應(yīng)用JavaScript 10.6本章小結(jié),第7頁,10.2 JavaScript基礎(chǔ),JavaScript是一種基于對象和事件驅(qū)動(dòng)，并且具有較強(qiáng)安全性的腳本語言。它使得信息和用戶之間不僅只是一種顯示和瀏

4、覽的關(guān)系，而是實(shí)現(xiàn)了一種實(shí)時(shí)的、可交互式的表達(dá)能力。,第8頁,語法,JavaScript在網(wǎng)頁中的用法 JavaScript腳本語言可以通過嵌入或?qū)氲姆椒ǎ瑢?shí)現(xiàn)在HTML語言中的功能。 嵌入式 導(dǎo)入式 JavaScript的變量 變量是程序中數(shù)據(jù)的臨時(shí)存放場所。使用變量之前首先進(jìn)行聲明，在JavaScript腳本程序中使用var關(guān)鍵字來聲明變量。,第9頁,語法,JavaScript的數(shù)據(jù)類型 JavaScript有5種數(shù)據(jù)類型。 Number類型：也就是數(shù)值數(shù)據(jù)類型，包括整型和浮點(diǎn)型。 String類型也稱為字符串型，它在JavaScript中有兩種等價(jià)的表示方法。 Boolean類型也稱為

5、布爾型，它的數(shù)值只有兩個(gè)值：真有true或1表示；假用false或0表示。 Undefined類型的值就是指在變量被創(chuàng)建后，但未給該變量賦值。 Null類型的值即為空值，也就是說該變量沒有保存有效的數(shù)值、字符串、boolean等。,第10頁,運(yùn)算符,JavaScript具有全范圍的運(yùn)算符，包括算術(shù)運(yùn)算符、邏輯運(yùn)算符、位運(yùn)算符、賦值運(yùn)算符、比較運(yùn)算符、字符串運(yùn)算符和特殊運(yùn)算符。,第11頁,控制和循環(huán)語句,與多數(shù)高級編程語言類似，JavaScript也可以通過語句控制代碼執(zhí)行的流程。這樣能使整個(gè)程序減少混亂，增加程序功能。 選擇結(jié)構(gòu) 選擇結(jié)構(gòu)通常用來指明程序代碼的多個(gè)運(yùn)行順序或方向，并為這些順序或

6、方向創(chuàng)建一個(gè)交叉點(diǎn)。 單一選擇結(jié)構(gòu) 雙路選擇結(jié)構(gòu) 內(nèi)聯(lián)三元運(yùn)算符 多路選擇結(jié)構(gòu),第12頁,控制和循環(huán)語句,循環(huán)結(jié)構(gòu) 在JavaScript中，還可以使用循環(huán)結(jié)構(gòu)。循環(huán)結(jié)構(gòu)的特點(diǎn)是根據(jù)一定的條件多次執(zhí)行，直到滿足一定的條件后停止。例如，打印輸出九九乘法表的程序，就需要使用這種結(jié)構(gòu)。 由計(jì)數(shù)器控制的循環(huán) 對對象的每個(gè)屬性都進(jìn)行操作 在循環(huán)開頭測試表達(dá)式 在循環(huán)末尾測試表達(dá)式,第13頁,主要內(nèi)容,10.1腳本語言概述 10.2 JavaScript基礎(chǔ) 10.3函數(shù)和事件 10.4對象 10.5應(yīng)用JavaScript 10.6本章小結(jié),第14頁,10.3 函數(shù)和事件,JavaScript函數(shù) Ja

7、vaScript事件 修改HTML和CSS,第15頁,JavaScript函數(shù),通常在進(jìn)行一個(gè)復(fù)雜的程序設(shè)計(jì)時(shí)，總是將所要完成的復(fù)雜功能劃分為一些相對獨(dú)立的部分，每個(gè)部分編寫一個(gè)函數(shù)，使它們充分獨(dú)立、任務(wù)單一、程序清晰、易懂易讀易維護(hù)。然后根據(jù)需要來組合這些函數(shù)完成最終的功能。函數(shù)的定義形式如下：,第16頁,JavaScript事件,一個(gè)完整的事件過程包括事件源、監(jiān)聽以及對事件的處理等3個(gè)部分。 事件源和監(jiān)聽 在JavaScript中，事件源通常是指用戶對網(wǎng)頁文檔進(jìn)行的各種操作。事件源的監(jiān)聽者通常就是指網(wǎng)頁瀏覽器。 事件的處理 事件通常會與函數(shù)結(jié)合使用。通過事件的監(jiān)聽屬性，可以在事件發(fā)生執(zhí)行指

8、定的函數(shù)，實(shí)現(xiàn)對事件的處理。 消息框 JavaScript可以在網(wǎng)頁中彈出3種消息框，即警告框、確認(rèn)框和提示框。,第17頁,修改HTML和CSS,例10-1 如圖所示，單擊文字click me，下面的盒子寬度就會變大。該實(shí)例綜合了函數(shù)、事件、對CSS的修改，包括了現(xiàn)在實(shí)際網(wǎng)頁中主流效果所需要的技術(shù)要素。,第18頁,主要內(nèi)容,10.1腳本語言概述 10.2 JavaScript基礎(chǔ) 10.3函數(shù)和事件 10.4對象 10.5應(yīng)用JavaScript 10.6本章小結(jié),第19頁,10.4 對象,JavaScript的一個(gè)重要功能就是基于對象功能。通過基于對象的程序設(shè)計(jì)，可以用更直觀、模塊化和可重復(fù)

9、使用的方法進(jìn)行程序開發(fā)。 String對象 String對象是JavaScript最重要的核心對象之一，所有程序只要使用字符串?dāng)?shù)據(jù)，就需要String對象。 document對象 document對象即為文檔對象，用來描述當(dāng)前窗口或指定窗口對象的文檔，它包含文檔從到之間的內(nèi)容。,第20頁,10.4 對象,window對象 window對象是瀏覽器顯示內(nèi)容的主要容器。 Array對象 Array對象即為數(shù)組對象，它是一個(gè)對象的集合，而且里邊的對象可以為不同類型。 Date對象 Date對象即為日期對象，可以用來表示任意的日期和時(shí)間，獲取當(dāng)前系統(tǒng)日期以及計(jì)算兩個(gè)日期的間隔。 Math對象 Math

10、對象即為數(shù)學(xué)對象，提供對數(shù)據(jù)的數(shù)學(xué)計(jì)算。,第21頁,主要內(nèi)容,10.1腳本語言概述 10.2 JavaScript基礎(chǔ) 10.3函數(shù)和事件 10.4對象 10.5應(yīng)用JavaScript 10.6本章小結(jié),第22頁,10.5 應(yīng)用JavaScript,編寫JavaScript程序 使用“代碼片段”面板 表單校驗(yàn),第23頁,編寫JavaScript程序,本節(jié)通過編寫一個(gè)簡單JavaScript程序制作一個(gè)帶鏈接的水平滾動(dòng)字幕效果，在網(wǎng)頁中，這種效果用于廣告會非常醒目。,第24頁,使用“代碼片段”面板,插入腳本標(biāo)記 插入消息框的JavaScript代碼 調(diào)用JavaScript函數(shù),第25頁,表單校驗(yàn),表單的校驗(yàn)首先要通過客戶端的JavaScript代碼來進(jìn)行有效性檢查，JavaScript代碼需要獲得表單控件的值，并根據(jù)響應(yīng)規(guī)則進(jìn)行檢查。 例10-2 表單校驗(yàn)。運(yùn)行效果如圖所示。,第26頁,主要內(nèi)容,10.1腳本語言概述 10.2 JavaScript基礎(chǔ) 10.3函數(shù)和事件 10.4對象 10.5應(yīng)用JavaScript 10.6本章小結(jié),第27頁,10.6 本章小結(jié),本章全面講述了JavaScript語言的基本功能。 首先，介紹了JavaScript與Java的區(qū)別和在網(wǎng)頁制作中的應(yīng)