網(wǎng)頁制作腳本語言

1、網(wǎng)頁設(shè)計(jì)與制作教程第1章 網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ)第第10章章 網(wǎng)頁制作腳本語言網(wǎng)頁制作腳本語言第1頁本章概述 本章的學(xué)習(xí)目標(biāo)主要內(nèi)容網(wǎng)頁設(shè)計(jì)與制作教程第1章 網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ)本章概述本章概述l在網(wǎng)頁設(shè)計(jì)領(lǐng)域，特效發(fā)揮著非常重要的作用。在網(wǎng)頁設(shè)計(jì)領(lǐng)域，特效發(fā)揮著非常重要的作用。使用網(wǎng)頁特效，可以使網(wǎng)頁具備更強(qiáng)的交互性、使用網(wǎng)頁特效，可以使網(wǎng)頁具備更強(qiáng)的交互性、欣賞性，也可使網(wǎng)頁更加智能化。在編寫各種特欣賞性，也可使網(wǎng)頁更加智能化。在編寫各種特效時(shí)，最流行的腳本語言就是效時(shí)，最流行的腳本語言就是JavaScript腳本語腳本語言。本章主要介紹言。本章主要介紹JavaScript語言基礎(chǔ)知識和在語言基

2、礎(chǔ)知識和在網(wǎng)頁制作中的應(yīng)用。網(wǎng)頁制作中的應(yīng)用。第2頁網(wǎng)頁設(shè)計(jì)與制作教程第1章 網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ)本章的學(xué)習(xí)目標(biāo)本章的學(xué)習(xí)目標(biāo)l了解了解JavaScript的概念的概念l掌握掌握J(rèn)avaScript的語法的語法l了解了解JavaScript函數(shù)和事件函數(shù)和事件l了解了解JavaScript對象的使用方法對象的使用方法第3頁網(wǎng)頁設(shè)計(jì)與制作教程第1章 網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ)主要內(nèi)容主要內(nèi)容10.1腳本語言概述腳本語言概述10.2 JavaScript基礎(chǔ)基礎(chǔ)10.3函數(shù)和事件函數(shù)和事件10.4對象對象10.5應(yīng)用應(yīng)用JavaScript10.6本章小結(jié)本章小結(jié)第4頁網(wǎng)頁設(shè)計(jì)與制作教程第1章 網(wǎng)頁設(shè)計(jì)與制

3、作基礎(chǔ)10.1 腳本語言概述腳本語言概述l在互聯(lián)網(wǎng)中，很多網(wǎng)站都是通過腳本語言編寫行在互聯(lián)網(wǎng)中，很多網(wǎng)站都是通過腳本語言編寫行為，控制網(wǎng)頁中的對象，實(shí)現(xiàn)動(dòng)態(tài)的效果，這些為，控制網(wǎng)頁中的對象，實(shí)現(xiàn)動(dòng)態(tài)的效果，這些動(dòng)態(tài)效果可以使網(wǎng)頁更加豐富多彩。在制作動(dòng)態(tài)動(dòng)態(tài)效果可以使網(wǎng)頁更加豐富多彩。在制作動(dòng)態(tài)效果時(shí)，可使用兩種語言：一種是效果時(shí)，可使用兩種語言：一種是JavaScript語語言，另一種則是言，另一種則是VBScript語言。在這兩種腳本語語言。在這兩種腳本語言中，言中，JavaScript語言使用最為廣泛。語言使用最為廣泛。第5頁網(wǎng)頁設(shè)計(jì)與制作教程第1章 網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ)JavaScript

4、語言語言lJavaScript的概念的概念 JavaScript是一種面向網(wǎng)絡(luò)應(yīng)用的、面向?qū)ο缶幊痰哪_本是一種面向網(wǎng)絡(luò)應(yīng)用的、面向?qū)ο缶幊痰哪_本語言，是互聯(lián)網(wǎng)中最流行且應(yīng)用最廣泛的腳本語言。語言，是互聯(lián)網(wǎng)中最流行且應(yīng)用最廣泛的腳本語言。lJavaScript與與Java的區(qū)別的區(qū)別 Java語言是升陽計(jì)算機(jī)擁有版權(quán)的一種服務(wù)器端高級語言，語言是升陽計(jì)算機(jī)擁有版權(quán)的一種服務(wù)器端高級語言，而而JavaScript最早由網(wǎng)景公司開發(fā)，并免費(fèi)發(fā)布。最早由網(wǎng)景公司開發(fā)，并免費(fèi)發(fā)布。JavaScript的語法和語義更接近于的語法和語義更接近于C語言。語言。lJavaScript的應(yīng)用的應(yīng)用 JavaScr

5、ipt是一種簡單的面向?qū)ο竽_本語言，其使用者無是一種簡單的面向?qū)ο竽_本語言，其使用者無需了解太多的編程理論和編譯方法，即可將代碼嵌入到網(wǎng)頁需了解太多的編程理論和編譯方法，即可將代碼嵌入到網(wǎng)頁中。中。第6頁網(wǎng)頁設(shè)計(jì)與制作教程第1章 網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ)主要內(nèi)容主要內(nèi)容10.1腳本語言概述腳本語言概述10.2 JavaScript基礎(chǔ)基礎(chǔ)10.3函數(shù)和事件函數(shù)和事件10.4對象對象10.5應(yīng)用應(yīng)用JavaScript10.6本章小結(jié)本章小結(jié)第7頁網(wǎng)頁設(shè)計(jì)與制作教程第1章 網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ)10.2 JavaScript基礎(chǔ)基礎(chǔ)lJavaScript是一種基于對象和事件驅(qū)動(dòng)，并且具是一種基于對象和事件

6、驅(qū)動(dòng)，并且具有較強(qiáng)安全性的腳本語言。它使得信息和用戶之有較強(qiáng)安全性的腳本語言。它使得信息和用戶之間不僅只是一種顯示和瀏覽的關(guān)系，而是實(shí)現(xiàn)了間不僅只是一種顯示和瀏覽的關(guān)系，而是實(shí)現(xiàn)了一種實(shí)時(shí)的、可交互式的表達(dá)能力。一種實(shí)時(shí)的、可交互式的表達(dá)能力。第8頁網(wǎng)頁設(shè)計(jì)與制作教程第1章 網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ)語法語法l JavaScript在網(wǎng)頁中的用法在網(wǎng)頁中的用法 JavaScript腳本語言可以通過嵌入或?qū)氲姆椒?，?shí)現(xiàn)在腳本語言可以通過嵌入或?qū)氲姆椒ǎ瑢?shí)現(xiàn)在HTML語言中的功能。語言中的功能。 嵌入式嵌入式 導(dǎo)入式導(dǎo)入式lJavaScript的變量的變量 變量是程序中數(shù)據(jù)的臨時(shí)存放場所。使用變量之前

7、首先進(jìn)行變量是程序中數(shù)據(jù)的臨時(shí)存放場所。使用變量之前首先進(jìn)行聲明，在聲明，在JavaScript腳本程序中使用腳本程序中使用var關(guān)鍵字來聲明變量。關(guān)鍵字來聲明變量。第9頁網(wǎng)頁設(shè)計(jì)與制作教程第1章 網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ)語法語法lJavaScript的數(shù)據(jù)類型的數(shù)據(jù)類型 JavaScript有有5種數(shù)據(jù)類型。種數(shù)據(jù)類型。 Number類型類型：也就是數(shù)值數(shù)據(jù)類型，包括整型和浮點(diǎn)型。也就是數(shù)值數(shù)據(jù)類型，包括整型和浮點(diǎn)型。 String類型也稱為字符串型，它在類型也稱為字符串型，它在JavaScript中有兩種等價(jià)中有兩種等價(jià)的表示方法。的表示方法。 Boolean類型也稱為布爾型，它的數(shù)值只有兩個(gè)值

8、：真有類型也稱為布爾型，它的數(shù)值只有兩個(gè)值：真有true或或1表示；假用表示；假用false或或0表示。表示。 Undefined類型的值就是指在變量被創(chuàng)建后，但未給該變量類型的值就是指在變量被創(chuàng)建后，但未給該變量賦值。賦值。 Null類型的值即為空值，也就是說該變量沒有保存有效的數(shù)類型的值即為空值，也就是說該變量沒有保存有效的數(shù)值、字符串、值、字符串、boolean等。等。第10頁網(wǎng)頁設(shè)計(jì)與制作教程第1章 網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ)運(yùn)算符運(yùn)算符lJavaScript具有全范圍的運(yùn)算符，包括算術(shù)運(yùn)算具有全范圍的運(yùn)算符，包括算術(shù)運(yùn)算符、邏輯運(yùn)算符、位運(yùn)算符、賦值運(yùn)算符、比較符、邏輯運(yùn)算符、位運(yùn)算符、賦值

9、運(yùn)算符、比較運(yùn)算符、字符串運(yùn)算符和特殊運(yùn)算符。運(yùn)算符、字符串運(yùn)算符和特殊運(yùn)算符。第11頁網(wǎng)頁設(shè)計(jì)與制作教程第1章 網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ)控制和循環(huán)語句控制和循環(huán)語句l與多數(shù)高級編程語言類似，與多數(shù)高級編程語言類似，JavaScript也可以通也可以通過語句控制代碼執(zhí)行的流程。這樣能使整個(gè)程序過語句控制代碼執(zhí)行的流程。這樣能使整個(gè)程序減少混亂，增加程序功能。減少混亂，增加程序功能。l選擇結(jié)構(gòu)選擇結(jié)構(gòu) 選擇結(jié)構(gòu)通常用來指明程序代碼的多個(gè)運(yùn)行順序或方向，并選擇結(jié)構(gòu)通常用來指明程序代碼的多個(gè)運(yùn)行順序或方向，并為這些順序或方向創(chuàng)建一個(gè)交叉點(diǎn)。為這些順序或方向創(chuàng)建一個(gè)交叉點(diǎn)。 單一選擇結(jié)構(gòu)單一選擇結(jié)構(gòu) 雙路選

10、擇結(jié)構(gòu)雙路選擇結(jié)構(gòu) 內(nèi)聯(lián)三元運(yùn)算符內(nèi)聯(lián)三元運(yùn)算符多路選擇結(jié)構(gòu)多路選擇結(jié)構(gòu)第12頁網(wǎng)頁設(shè)計(jì)與制作教程第1章 網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ)控制和循環(huán)語句控制和循環(huán)語句l循環(huán)結(jié)構(gòu)循環(huán)結(jié)構(gòu) 在在JavaScript中，還可以使用循環(huán)結(jié)構(gòu)。循環(huán)結(jié)構(gòu)的特點(diǎn)中，還可以使用循環(huán)結(jié)構(gòu)。循環(huán)結(jié)構(gòu)的特點(diǎn)是根據(jù)一定的條件多次執(zhí)行，直到滿足一定的條件后停止。是根據(jù)一定的條件多次執(zhí)行，直到滿足一定的條件后停止。例如，打印輸出九九乘法表的程序，就需要使用這種結(jié)構(gòu)。例如，打印輸出九九乘法表的程序，就需要使用這種結(jié)構(gòu)。 由計(jì)數(shù)器控制的循環(huán)由計(jì)數(shù)器控制的循環(huán) 對對象的每個(gè)屬性都進(jìn)行操作對對象的每個(gè)屬性都進(jìn)行操作 在循環(huán)開頭測試表達(dá)式在循環(huán)

11、開頭測試表達(dá)式 在循環(huán)末尾測試表達(dá)式在循環(huán)末尾測試表達(dá)式第13頁網(wǎng)頁設(shè)計(jì)與制作教程第1章 網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ)主要內(nèi)容主要內(nèi)容10.1腳本語言概述腳本語言概述10.2 JavaScript基礎(chǔ)基礎(chǔ)10.3函數(shù)和事件函數(shù)和事件10.4對象對象10.5應(yīng)用應(yīng)用JavaScript10.6本章小結(jié)本章小結(jié)第14頁網(wǎng)頁設(shè)計(jì)與制作教程第1章 網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ)10.3 函數(shù)和事件函數(shù)和事件lJavaScript函數(shù)函數(shù)lJavaScript事件事件l修改修改HTML和和CSS第15頁網(wǎng)頁設(shè)計(jì)與制作教程第1章 網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ)JavaScript函數(shù)函數(shù)l通常在進(jìn)行一個(gè)復(fù)雜的程序設(shè)計(jì)時(shí)，總是將所要通常在進(jìn)

12、行一個(gè)復(fù)雜的程序設(shè)計(jì)時(shí)，總是將所要完成的復(fù)雜功能劃分為一些相對獨(dú)立的部分，每完成的復(fù)雜功能劃分為一些相對獨(dú)立的部分，每個(gè)部分編寫一個(gè)函數(shù)，使它們充分獨(dú)立、任務(wù)單個(gè)部分編寫一個(gè)函數(shù)，使它們充分獨(dú)立、任務(wù)單一、程序清晰、易懂易讀易維護(hù)。然后根據(jù)需要一、程序清晰、易懂易讀易維護(hù)。然后根據(jù)需要來組合這些函數(shù)完成最終的功能。函數(shù)的定義形來組合這些函數(shù)完成最終的功能。函數(shù)的定義形式如下：式如下：第16頁網(wǎng)頁設(shè)計(jì)與制作教程第1章 網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ)JavaScript事件事件l一個(gè)完整的事件過程包括事件源、監(jiān)聽以及對事件的處理一個(gè)完整的事件過程包括事件源、監(jiān)聽以及對事件的處理等等3個(gè)部分。個(gè)部分。l事件源和

13、監(jiān)聽事件源和監(jiān)聽 在在JavaScript中，事件源通常是指用戶對網(wǎng)頁文檔進(jìn)行的中，事件源通常是指用戶對網(wǎng)頁文檔進(jìn)行的各種操作。事件源的監(jiān)聽者通常就是指網(wǎng)頁瀏覽器。各種操作。事件源的監(jiān)聽者通常就是指網(wǎng)頁瀏覽器。l事件的處理事件的處理 事件通常會與函數(shù)結(jié)合使用。通過事件的監(jiān)聽屬性，可以在事件通常會與函數(shù)結(jié)合使用。通過事件的監(jiān)聽屬性，可以在事件發(fā)生執(zhí)行指定的函數(shù)，實(shí)現(xiàn)對事件的處理。事件發(fā)生執(zhí)行指定的函數(shù)，實(shí)現(xiàn)對事件的處理。l消息框消息框JavaScript可以在網(wǎng)頁中彈出可以在網(wǎng)頁中彈出3種消息框，即警告框、確認(rèn)種消息框，即警告框、確認(rèn)框和提示框?？蚝吞崾究颉５?7頁網(wǎng)頁設(shè)計(jì)與制作教程第1章 網(wǎng)頁

14、設(shè)計(jì)與制作基礎(chǔ)修改修改HTML和和CSSl例例10-1 如圖所示，單擊文字如圖所示，單擊文字click me，下面的盒，下面的盒子寬度就會變大。該實(shí)例綜合了函數(shù)、事件、對子寬度就會變大。該實(shí)例綜合了函數(shù)、事件、對CSS的修改，包括了現(xiàn)在實(shí)際網(wǎng)頁中主流效果所的修改，包括了現(xiàn)在實(shí)際網(wǎng)頁中主流效果所需要的技術(shù)要素。需要的技術(shù)要素。第18頁網(wǎng)頁設(shè)計(jì)與制作教程第1章 網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ)主要內(nèi)容主要內(nèi)容10.1腳本語言概述腳本語言概述10.2 JavaScript基礎(chǔ)基礎(chǔ)10.3函數(shù)和事件函數(shù)和事件10.4對象對象10.5應(yīng)用應(yīng)用JavaScript10.6本章小結(jié)本章小結(jié)第19頁網(wǎng)頁設(shè)計(jì)與制作教程第1章

15、 網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ)10.4 對象對象lJavaScript的一個(gè)重要功能就是基于對象功能。的一個(gè)重要功能就是基于對象功能。通過基于對象的程序設(shè)計(jì)，可以用更直觀、模塊通過基于對象的程序設(shè)計(jì)，可以用更直觀、模塊化和可重復(fù)使用的方法進(jìn)行程序開發(fā)?；涂芍貜?fù)使用的方法進(jìn)行程序開發(fā)。lString對象對象 String對象是對象是JavaScript最重要的核心對象之一，所有程序最重要的核心對象之一，所有程序只要使用字符串?dāng)?shù)據(jù)，就需要只要使用字符串?dāng)?shù)據(jù)，就需要String對象。對象。ldocument對象對象 document對象即為文檔對象，用來描述當(dāng)前窗口或指定窗對象即為文檔對象，用來描述當(dāng)前窗口

16、或指定窗口對象的文檔，它包含文檔從口對象的文檔，它包含文檔從到到之間的內(nèi)之間的內(nèi)容。容。第20頁網(wǎng)頁設(shè)計(jì)與制作教程第1章 網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ)10.4 對象對象lwindow對象對象 window對象是瀏覽器顯示內(nèi)容的主要容器。對象是瀏覽器顯示內(nèi)容的主要容器。lArray對象對象 Array對象即為數(shù)組對象，它是一個(gè)對象的集合，而且里邊對象即為數(shù)組對象，它是一個(gè)對象的集合，而且里邊的對象可以為不同類型。的對象可以為不同類型。lDate對象對象 Date對象即為日期對象，可以用來表示任意的日期和時(shí)間，對象即為日期對象，可以用來表示任意的日期和時(shí)間，獲取當(dāng)前系統(tǒng)日期以及計(jì)算兩個(gè)日期的間隔。獲取當(dāng)前系

17、統(tǒng)日期以及計(jì)算兩個(gè)日期的間隔。lMath對象對象 Math對象即為數(shù)學(xué)對象，提供對數(shù)據(jù)的數(shù)學(xué)計(jì)算。對象即為數(shù)學(xué)對象，提供對數(shù)據(jù)的數(shù)學(xué)計(jì)算。第21頁網(wǎng)頁設(shè)計(jì)與制作教程第1章 網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ)主要內(nèi)容主要內(nèi)容10.1腳本語言概述腳本語言概述10.2 JavaScript基礎(chǔ)基礎(chǔ)10.3函數(shù)和事件函數(shù)和事件10.4對象對象10.5應(yīng)用應(yīng)用JavaScript10.6本章小結(jié)本章小結(jié)第22頁網(wǎng)頁設(shè)計(jì)與制作教程第1章 網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ)10.5 應(yīng)用應(yīng)用JavaScriptl編寫編寫JavaScript程序程序l使用使用“代碼片段代碼片段”面板面板l表單校驗(yàn)表單校驗(yàn)第23頁網(wǎng)頁設(shè)計(jì)與制作教程第1章 網(wǎng)

18、頁設(shè)計(jì)與制作基礎(chǔ)編寫編寫JavaScript程序程序l本節(jié)通過編寫一個(gè)簡單本節(jié)通過編寫一個(gè)簡單JavaScript程序制作一個(gè)程序制作一個(gè)帶鏈接的水平滾動(dòng)字幕效果，在網(wǎng)頁中，這種效帶鏈接的水平滾動(dòng)字幕效果，在網(wǎng)頁中，這種效果用于廣告會非常醒目。果用于廣告會非常醒目。第24頁網(wǎng)頁設(shè)計(jì)與制作教程第1章 網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ)使用使用“代碼片段代碼片段”面板面板l插入腳本標(biāo)記插入腳本標(biāo)記l插入消息框的插入消息框的JavaScript代碼代碼l調(diào)用調(diào)用JavaScript函數(shù)函數(shù)第25頁網(wǎng)頁設(shè)計(jì)與制作教程第1章 網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ)表單校驗(yàn)表單校驗(yàn)l表單的校驗(yàn)首先要通過客戶端的表單的校驗(yàn)首先要通過客戶端的JavaScript代碼代碼來進(jìn)行有效性檢查，來進(jìn)行有效性檢查，JavaScript代碼需要獲