網(wǎng)頁(yè)制作腳本語言課件

第10章

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

腳本語言概述10.2

JavaScript基礎(chǔ)10.3函數(shù)和事件10.4對(duì)象10.5應(yīng)用JavaScript10.6本章小結(jié)主要內(nèi)容10.1腳本語言概述10.1腳本語言概述在互聯(lián)網(wǎng)中，很多網(wǎng)站都是通過腳本語言編寫行為，控制網(wǎng)頁(yè)中的對(duì)象，實(shí)現(xiàn)動(dòng)態(tài)的效果，這些動(dòng)態(tài)效果可以使網(wǎng)頁(yè)更加豐富多彩。在制作動(dòng)態(tài)效果時(shí)，可使用兩種語言：一種是JavaScript語言，另一種則是VBScript語言。在這兩種腳本語言中，JavaScript語言使用最為廣泛。10.1腳本語言概述在互聯(lián)網(wǎng)中，很多網(wǎng)站都是通過腳本語言JavaScript語言JavaScript的概念JavaScript是一種面向網(wǎng)絡(luò)應(yīng)用的、面向?qū)ο缶幊痰哪_本語言，是互聯(lián)網(wǎng)中最流行且應(yīng)用最廣泛的腳本語言。JavaScript與Java的區(qū)別Java語言是升陽計(jì)算機(jī)擁有版權(quán)的一種服務(wù)器端高級(jí)語言，而JavaScript最早由網(wǎng)景公司開發(fā)，并免費(fèi)發(fā)布。JavaScript的語法和語義更接近于C語言。JavaScript的應(yīng)用JavaScript是一種簡(jiǎn)單的面向?qū)ο竽_本語言，其使用者無需了解太多的編程理論和編譯方法，即可將代碼嵌入到網(wǎng)頁(yè)中。JavaScript語言JavaScript的概念主要內(nèi)容10.1腳本語言概述10.2

JavaScript基礎(chǔ)10.3函數(shù)和事件10.4對(duì)象10.5應(yīng)用JavaScript10.6本章小結(jié)主要內(nèi)容10.1腳本語言概述10.2JavaScript基礎(chǔ)JavaScript是一種基于對(duì)象和事件驅(qū)動(dòng)，并且具有較強(qiáng)安全性的腳本語言。它使得信息和用戶之間不僅只是一種顯示和瀏覽的關(guān)系，而是實(shí)現(xiàn)了一種實(shí)時(shí)的、可交互式的表達(dá)能力。10.2JavaScript基礎(chǔ)JavaScript是一語法

JavaScript在網(wǎng)頁(yè)中的用法JavaScript腳本語言可以通過嵌入或?qū)氲姆椒?，?shí)現(xiàn)在HTML語言中的功能。嵌入式導(dǎo)入式JavaScript的變量變量是程序中數(shù)據(jù)的臨時(shí)存放場(chǎng)所。使用變量之前首先進(jìn)行聲明，在JavaScript腳本程序中使用var關(guān)鍵字來聲明變量。語法JavaScript在網(wǎng)頁(yè)中的用法語法JavaScript的數(shù)據(jù)類型JavaScript有5種數(shù)據(jù)類型。Number類型：也就是數(shù)值數(shù)據(jù)類型，包括整型和浮點(diǎn)型。String類型也稱為字符串型，它在JavaScript中有兩種等價(jià)的表示方法。Boolean類型也稱為布爾型，它的數(shù)值只有兩個(gè)值：真有true或1表示；假用false或0表示。Undefined類型的值就是指在變量被創(chuàng)建后，但未給該變量賦值。Null類型的值即為空值，也就是說該變量沒有保存有效的數(shù)值、字符串、boolean等。語法JavaScript的數(shù)據(jù)類型運(yùn)算符JavaScript具有全范圍的運(yùn)算符，包括算術(shù)運(yùn)算符、邏輯運(yùn)算符、位運(yùn)算符、賦值運(yùn)算符、比較運(yùn)算符、字符串運(yùn)算符和特殊運(yùn)算符。運(yùn)算符JavaScript具有全范圍的運(yùn)算符，包括算術(shù)運(yùn)算符控制和循環(huán)語句與多數(shù)高級(jí)編程語言類似，JavaScript也可以通過語句控制代碼執(zhí)行的流程。這樣能使整個(gè)程序減少混亂，增加程序功能。選擇結(jié)構(gòu)選擇結(jié)構(gòu)通常用來指明程序代碼的多個(gè)運(yùn)行順序或方向，并為這些順序或方向創(chuàng)建一個(gè)交叉點(diǎn)。單一選擇結(jié)構(gòu)雙路選擇結(jié)構(gòu)內(nèi)聯(lián)三元運(yùn)算符多路選擇結(jié)構(gòu)控制和循環(huán)語句與多數(shù)高級(jí)編程語言類似，JavaScript也控制和循環(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)對(duì)對(duì)象的每個(gè)屬性都進(jìn)行操作在循環(huán)開頭測(cè)試表達(dá)式在循環(huán)末尾測(cè)試表達(dá)式控制和循環(huán)語句循環(huán)結(jié)構(gòu)主要內(nèi)容10.1腳本語言概述10.2

JavaScript基礎(chǔ)10.3函數(shù)和事件10.4對(duì)象10.5應(yīng)用JavaScript10.6本章小結(jié)主要內(nèi)容10.1腳本語言概述10.3函數(shù)和事件JavaScript函數(shù)JavaScript事件修改HTML和CSS10.3函數(shù)和事件JavaScript函數(shù)JavaScript函數(shù)通常在進(jìn)行一個(gè)復(fù)雜的程序設(shè)計(jì)時(shí)，總是將所要完成的復(fù)雜功能劃分為一些相對(duì)獨(dú)立的部分，每個(gè)部分編寫一個(gè)函數(shù)，使它們充分獨(dú)立、任務(wù)單一、程序清晰、易懂易讀易維護(hù)。然后根據(jù)需要來組合這些函數(shù)完成最終的功能。函數(shù)的定義形式如下：JavaScript函數(shù)通常在進(jìn)行一個(gè)復(fù)雜的程序設(shè)計(jì)時(shí)，總是JavaScript事件一個(gè)完整的事件過程包括事件源、監(jiān)聽以及對(duì)事件的處理等3個(gè)部分。事件源和監(jiān)聽在JavaScript中，事件源通常是指用戶對(duì)網(wǎng)頁(yè)文檔進(jìn)行的各種操作。事件源的監(jiān)聽者通常就是指網(wǎng)頁(yè)瀏覽器。事件的處理事件通常會(huì)與函數(shù)結(jié)合使用。通過事件的監(jiān)聽屬性，可以在事件發(fā)生執(zhí)行指定的函數(shù)，實(shí)現(xiàn)對(duì)事件的處理。消息框JavaScript可以在網(wǎng)頁(yè)中彈出3種消息框，即警告框、確認(rèn)框和提示框。JavaScript事件一個(gè)完整的事件過程包括事件源、監(jiān)聽以修改HTML和CSS例10-1如圖所示，單擊文字clickme，下面的盒子寬度就會(huì)變大。該實(shí)例綜合了函數(shù)、事件、對(duì)CSS的修改，包括了現(xiàn)在實(shí)際網(wǎng)頁(yè)中主流效果所需要的技術(shù)要素。修改HTML和CSS例10-1如圖所示，單擊文字clic主要內(nèi)容10.1腳本語言概述10.2

JavaScript基礎(chǔ)10.3函數(shù)和事件10.4對(duì)象10.5應(yīng)用JavaScript10.6本章小結(jié)主要內(nèi)容10.1腳本語言概述10.4對(duì)象JavaScript的一個(gè)重要功能就是基于對(duì)象功能。通過基于對(duì)象的程序設(shè)計(jì)，可以用更直觀、模塊化和可重復(fù)使用的方法進(jìn)行程序開發(fā)。String對(duì)象String對(duì)象是JavaScript最重要的核心對(duì)象之一，所有程序只要使用字符串?dāng)?shù)據(jù)，就需要String對(duì)象。document對(duì)象document對(duì)象即為文檔對(duì)象，用來描述當(dāng)前窗口或指定窗口對(duì)象的文檔，它包含文檔從<head>到</body>之間的內(nèi)容。10.4對(duì)象JavaScript的一個(gè)重要功能就是基于對(duì)10.4對(duì)象window對(duì)象window對(duì)象是瀏覽器顯示內(nèi)容的主要容器。Array對(duì)象Array對(duì)象即為數(shù)組對(duì)象，它是一個(gè)對(duì)象的集合，而且里邊的對(duì)象可以為不同類型。Date對(duì)象Date對(duì)象即為日期對(duì)象，可以用來表示任意的日期和時(shí)間，獲取當(dāng)前系統(tǒng)日期以及計(jì)算兩個(gè)日期的間隔。Math對(duì)象Math對(duì)象即為數(shù)學(xué)對(duì)象，提供對(duì)數(shù)據(jù)的數(shù)學(xué)計(jì)算。10.4對(duì)象window對(duì)象主要內(nèi)容10.1腳本語言概述10.2

JavaScript基礎(chǔ)10.3函數(shù)和事件10.4對(duì)象10.5應(yīng)用JavaScript10.6本章小結(jié)主要內(nèi)容10.1腳本語言概述10.5應(yīng)用JavaScript編寫JavaScript程序使用“代碼片段”面板表單校驗(yàn)10.5應(yīng)用JavaScript編寫JavaScript編寫JavaScript程序本節(jié)通過編寫一個(gè)簡(jiǎn)單JavaScript程序制作一個(gè)帶鏈接的水平滾動(dòng)字幕效果，在網(wǎng)頁(yè)中，這種效果用于廣告會(huì)非常醒目。編寫JavaScript程序本節(jié)通過編寫一個(gè)簡(jiǎn)單JavaSc使用“代碼片段”面板插入腳本標(biāo)記插入消息框的JavaScript代碼調(diào)用JavaScript函數(shù)使用“代碼片段”面板插入腳本標(biāo)記表單校驗(yàn)表單的校驗(yàn)首先要通過客戶端的JavaScript代碼來進(jìn)行有效性檢查，JavaScript代碼需要獲得表單控件的值，并根據(jù)響應(yīng)規(guī)則進(jìn)行檢查。例10-2

表單校驗(yàn)。運(yùn)行效果如圖所示。表單校驗(yàn)表單的校驗(yàn)首先要通過客戶端的JavaScript代碼主要內(nèi)容10.1腳本語言概述10.2

JavaScript基礎(chǔ)10.3函數(shù)和事件10.4對(duì)象10.5應(yīng)用JavaScript10.6本章小結(jié)主要內(nèi)容10.1腳本語言概述10.6本章小結(jié)本章全面講述了JavaScript語言的基本功能。首先，介紹了JavaScript與Java的區(qū)別和在網(wǎng)頁(yè)制作中的應(yīng)用。接下來，對(duì)JavaScript語言的特點(diǎn)進(jìn)行了分析。之后，分別講述了JavaScript的語法、運(yùn)算符、控制和循環(huán)語句、函數(shù)和事件以及JavaScript對(duì)象的類型和特點(diǎn)。最后，通過實(shí)例講述了JavaScript的應(yīng)用，包括編寫JavaScript程序、使用“代碼片段”面板及使用JavaScript進(jìn)行表單校驗(yàn)的方法。10.6本章小結(jié)本章全面講述了JavaScript語言第10章

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

腳本語言概述10.2

JavaScript基礎(chǔ)10.3函數(shù)和事件10.4對(duì)象10.5應(yīng)用JavaScript10.6本章小結(jié)主要內(nèi)容10.1腳本語言概述10.1腳本語言概述在互聯(lián)網(wǎng)中，很多網(wǎng)站都是通過腳本語言編寫行為，控制網(wǎng)頁(yè)中的對(duì)象，實(shí)現(xiàn)動(dòng)態(tài)的效果，這些動(dòng)態(tài)效果可以使網(wǎng)頁(yè)更加豐富多彩。在制作動(dòng)態(tài)效果時(shí)，可使用兩種語言：一種是JavaScript語言，另一種則是VBScript語言。在這兩種腳本語言中，JavaScript語言使用最為廣泛。10.1腳本語言概述在互聯(lián)網(wǎng)中，很多網(wǎng)站都是通過腳本語言JavaScript語言JavaScript的概念JavaScript是一種面向網(wǎng)絡(luò)應(yīng)用的、面向?qū)ο缶幊痰哪_本語言，是互聯(lián)網(wǎng)中最流行且應(yīng)用最廣泛的腳本語言。JavaScript與Java的區(qū)別Java語言是升陽計(jì)算機(jī)擁有版權(quán)的一種服務(wù)器端高級(jí)語言，而JavaScript最早由網(wǎng)景公司開發(fā)，并免費(fèi)發(fā)布。JavaScript的語法和語義更接近于C語言。JavaScript的應(yīng)用JavaScript是一種簡(jiǎn)單的面向?qū)ο竽_本語言，其使用者無需了解太多的編程理論和編譯方法，即可將代碼嵌入到網(wǎng)頁(yè)中。JavaScript語言JavaScript的概念主要內(nèi)容10.1腳本語言概述10.2

JavaScript基礎(chǔ)10.3函數(shù)和事件10.4對(duì)象10.5應(yīng)用JavaScript10.6本章小結(jié)主要內(nèi)容10.1腳本語言概述10.2JavaScript基礎(chǔ)JavaScript是一種基于對(duì)象和事件驅(qū)動(dòng)，并且具有較強(qiáng)安全性的腳本語言。它使得信息和用戶之間不僅只是一種顯示和瀏覽的關(guān)系，而是實(shí)現(xiàn)了一種實(shí)時(shí)的、可交互式的表達(dá)能力。10.2JavaScript基礎(chǔ)JavaScript是一語法

JavaScript在網(wǎng)頁(yè)中的用法JavaScript腳本語言可以通過嵌入或?qū)氲姆椒ǎ瑢?shí)現(xiàn)在HTML語言中的功能。嵌入式導(dǎo)入式JavaScript的變量變量是程序中數(shù)據(jù)的臨時(shí)存放場(chǎng)所。使用變量之前首先進(jìn)行聲明，在JavaScript腳本程序中使用var關(guān)鍵字來聲明變量。語法JavaScript在網(wǎng)頁(yè)中的用法語法JavaScript的數(shù)據(jù)類型JavaScript有5種數(shù)據(jù)類型。Number類型：也就是數(shù)值數(shù)據(jù)類型，包括整型和浮點(diǎn)型。String類型也稱為字符串型，它在JavaScript中有兩種等價(jià)的表示方法。Boolean類型也稱為布爾型，它的數(shù)值只有兩個(gè)值：真有true或1表示；假用false或0表示。Undefined類型的值就是指在變量被創(chuàng)建后，但未給該變量賦值。Null類型的值即為空值，也就是說該變量沒有保存有效的數(shù)值、字符串、boolean等。語法JavaScript的數(shù)據(jù)類型運(yùn)算符JavaScript具有全范圍的運(yùn)算符，包括算術(shù)運(yùn)算符、邏輯運(yùn)算符、位運(yùn)算符、賦值運(yùn)算符、比較運(yùn)算符、字符串運(yùn)算符和特殊運(yùn)算符。運(yùn)算符JavaScript具有全范圍的運(yùn)算符，包括算術(shù)運(yùn)算符控制和循環(huán)語句與多數(shù)高級(jí)編程語言類似，JavaScript也可以通過語句控制代碼執(zhí)行的流程。這樣能使整個(gè)程序減少混亂，增加程序功能。選擇結(jié)構(gòu)選擇結(jié)構(gòu)通常用來指明程序代碼的多個(gè)運(yùn)行順序或方向，并為這些順序或方向創(chuàng)建一個(gè)交叉點(diǎn)。單一選擇結(jié)構(gòu)雙路選擇結(jié)構(gòu)內(nèi)聯(lián)三元運(yùn)算符多路選擇結(jié)構(gòu)控制和循環(huán)語句與多數(shù)高級(jí)編程語言類似，JavaScript也控制和循環(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)對(duì)對(duì)象的每個(gè)屬性都進(jìn)行操作在循環(huán)開頭測(cè)試表達(dá)式在循環(huán)末尾測(cè)試表達(dá)式控制和循環(huán)語句循環(huán)結(jié)構(gòu)主要內(nèi)容10.1腳本語言概述10.2

JavaScript基礎(chǔ)10.3函數(shù)和事件10.4對(duì)象10.5應(yīng)用JavaScript10.6本章小結(jié)主要內(nèi)容10.1腳本語言概述10.3函數(shù)和事件JavaScript函數(shù)JavaScript事件修改HTML和CSS10.3函數(shù)和事件JavaScript函數(shù)JavaScript函數(shù)通常在進(jìn)行一個(gè)復(fù)雜的程序設(shè)計(jì)時(shí)，總是將所要完成的復(fù)雜功能劃分為一些相對(duì)獨(dú)立的部分，每個(gè)部分編寫一個(gè)函數(shù)，使它們充分獨(dú)立、任務(wù)單一、程序清晰、易懂易讀易維護(hù)。然后根據(jù)需要來組合這些函數(shù)完成最終的功能。函數(shù)的定義形式如下：JavaScript函數(shù)通常在進(jìn)行一個(gè)復(fù)雜的程序設(shè)計(jì)時(shí)，總是JavaScript事件一個(gè)完整的事件過程包括事件源、監(jiān)聽以及對(duì)事件的處理等3個(gè)部分。事件源和監(jiān)聽在JavaScript中，事件源通常是指用戶對(duì)網(wǎng)頁(yè)文檔進(jìn)行的各種操作。事件源的監(jiān)聽者通常就是指網(wǎng)頁(yè)瀏覽器。事件的處理事件通常會(huì)與函數(shù)結(jié)合使用。通過事件的監(jiān)聽屬性，可以在事件發(fā)生執(zhí)行指定的函數(shù)，實(shí)現(xiàn)對(duì)事件的處理。消息框JavaScript可以在網(wǎng)頁(yè)中彈出3種消息框，即警告框、確認(rèn)框和提示框。JavaScript事件一個(gè)完整的事件過程包括事件源、監(jiān)聽以修改HTML和CSS例10-1如圖所示，單擊文字clickme，下面的盒子寬度就會(huì)變大。該實(shí)例綜合了函數(shù)、事件、對(duì)CSS的修改，包括了現(xiàn)在實(shí)際網(wǎng)頁(yè)中主流效果所需要的技術(shù)要素。修改HTML和CSS例10-1如圖所示，單擊文字clic主要內(nèi)容10.1腳本語言概述10.2

JavaScript基礎(chǔ)10.3函數(shù)和事件10.4對(duì)象10.5應(yīng)用JavaScript10.6本章小結(jié)主要內(nèi)容10.1腳本語言概述10.4對(duì)象JavaScript的一個(gè)重要功能就是基于對(duì)象功能。通過基于對(duì)象的程序設(shè)計(jì)，可以用更直觀、模塊化和可重復(fù)使用的方法進(jìn)行程序開發(fā)。String對(duì)象String對(duì)象是JavaScript最重要的核心對(duì)象之一，所有程序只要使用字符串?dāng)?shù)據(jù)，就需要String對(duì)象。document對(duì)象document對(duì)象即為文檔對(duì)象，用來描述當(dāng)前窗口或指定窗口對(duì)象的文檔，它包含文檔從<head>到</body>之間的內(nèi)容。10.4對(duì)象JavaScript的一個(gè)重要功能就是基于對(duì)10.4對(duì)象window對(duì)象window對(duì)象是瀏覽器顯示內(nèi)容的主要容器。Array對(duì)象Array對(duì)象即為數(shù)組對(duì)象，它是一個(gè)對(duì)象的集合，而且里邊的對(duì)象可以為不同類型。Date對(duì)象Date對(duì)象即為日期對(duì)象，可以用來表示任意的日期和時(shí)間，獲取當(dāng)前系統(tǒng)日期以及計(jì)算兩個(gè)日期的間隔。Math對(duì)象Math對(duì)象即為數(shù)學(xué)對(duì)象，提供對(duì)數(shù)據(jù)的數(shù)學(xué)計(jì)算。10.4對(duì)象window對(duì)象主要內(nèi)容10.1腳本語言概述10.2

JavaScript基礎(chǔ)10.3函數(shù)和事件10.4