版權(quán)說明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請進(jìn)行舉報(bào)或認(rèn)領(lǐ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)框和提示框??蚝吞崾究颉5?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代碼需要獲
溫馨提示
- 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽,若沒有圖紙預(yù)覽就沒有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫網(wǎng)僅提供信息存儲空間,僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理,對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容,請與我們聯(lián)系,我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 買賣房屋委托服務(wù)合同模板
- 商鋪?zhàn)夥拷饧s合同模板
- 農(nóng)村橋梁維修合同模板
- 簡易建材購銷合同模板
- 眾湊合作合同模板
- 飯店雇傭廚師合同模板
- 非用工合同模板
- 二手房房東出租合同模板
- 外墻保溫質(zhì)保合同模板
- 租賃挖礦設(shè)備合同模板
- DL∕T 2010-2019 高壓無功補(bǔ)償裝置繼電保護(hù)配置及整定技術(shù)規(guī)范
- 班級管理智慧樹知到期末考試答案章節(jié)答案2024年九江職業(yè)大學(xué)
- Scratch少兒編程知識試題
- 大學(xué)生朋輩心理輔導(dǎo)智慧樹知到期末考試答案章節(jié)答案2024年浙江大學(xué)
- 2024版礦山買賣合同
- 建筑工程消防設(shè)施設(shè)備和配件進(jìn)場的檢驗(yàn)與驗(yàn)收規(guī)范
- 選擇性必修二《Unit 4 Journey across a vast land》單元教學(xué)設(shè)計(jì)
- 中醫(yī)學(xué)概論 知到智慧樹網(wǎng)課答案
- 收費(fèi)站安全培訓(xùn)
- 衛(wèi)生部婦產(chǎn)科診療規(guī)范及指南
- 新漢語水平考試HSK一級真題(含聽力材料和答案)
評論
0/150
提交評論