版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進行舉報或認領
文檔簡介
HTML5+CSS3+JavaScript網(wǎng)頁設計與制作項目教程項目7JavaScript應用——實現(xiàn)網(wǎng)頁交互功能目錄ENTERPRISEOPERATIONREPORT04.總結(jié)提升03.知識鏈接02.學習目標01.項目導入05.擴展訓練項目導入PART01項目導入使用JavaScript制作“旅行家--圖片輪播”效果JavaScript是Web頁面中的一種腳本語言，常用來為網(wǎng)頁添加各式各樣的動態(tài)功能，為用戶提供更流暢美觀的瀏覽效果。本章我們將使用JavaScript制作“旅行家——輪播圖”模塊，案例完成效果如圖7.1所示。學習目標PART0202知識目標能力目標1、理解JavaScript的基本概念及在網(wǎng)頁中的主要作用2、掌握JavaScript的引入方法及基本語法3、理解并掌握JavaScript對象的使用方法4、掌握JavaScript的事件處理方法1、會用JavaScript實現(xiàn)簡單的網(wǎng)頁交互功能2、會用JavaScript實現(xiàn)圖片輪播效果02知識鏈接PART0303一、JavaScript簡介1、什么是JavaScriptJavaScript是一種逐行執(zhí)行的腳本語言，常用來為網(wǎng)頁添加各式各樣的動態(tài)功能，為用戶提供更流暢美觀的瀏覽效果。除了JavaScript，網(wǎng)頁相關前端技術(shù)還包括Ajax（實現(xiàn)瀏覽器與服務器異步交互）及Node.js（在服務器端使用的JavaScript代碼）等。JavaScript在網(wǎng)頁中的用處很多，它可以對事件做出響應，可以將JavaScript設置為當某事件發(fā)生時才被執(zhí)行。例如：03一、JavaScript簡介（1）頁面載入完成或者用戶單擊某個HTML元素時發(fā)生相應的動作，如圖7.2所示的“TAB欄切換”，當用戶將鼠標分別移上“生活”、“VR”、“河南”等時，對應的內(nèi)容將會切換。03一、JavaScript簡介（2）JavaScript可以讀寫HTML元素，在數(shù)據(jù)被提交到服務器之前，JavaScript還可被用來驗證這些數(shù)據(jù)，如7.3所示的注冊頁面。03一、JavaScript簡介（3）JavaScript可被用來檢測訪問者的瀏覽器，并根據(jù)所檢測到的瀏覽器，為這個瀏覽器載入相應的頁面。（4）JavaScript可被用來創(chuàng)建cookies，還可被用來存儲和取回位于訪問者計算機中的信息等。032、JavaScript的特點JavaScript是一種描述性語言，也是一種基于對象（Object）和事件驅(qū)動（EventDriven）的，并具有安全性的腳本語言。最初由網(wǎng)景（現(xiàn)在的Mozilla）公司創(chuàng)建。主要有以下特點：解釋性：JavaScript是一種解釋性語言。由瀏覽器解釋并執(zhí)行代碼，不進行預編譯?；趯ο螅篔avaScript是一種基于對象的腳本語言,它不僅可以創(chuàng)建對象,也能使用現(xiàn)有的對象，語法和Java類似。動態(tài)性：JavaScript一般用來編寫客戶端的腳本，它不需要經(jīng)過Web服務器就可以對用戶的輸入做出響應。在訪問一個網(wǎng)頁時,鼠標在網(wǎng)頁中進行鼠標點擊或上下移、窗口移動等操作JavaScript都可直接對這些事件給出相應的響應?？缙脚_性：JavaScript腳本語言不依賴于操作系統(tǒng)，在絕大多數(shù)瀏覽器的支持下，可以在多種平臺下運行（如Windows、Linux、Mac、Android、iOS等）。一、JavaScript簡介033、JavaScript的組成JavaScript主要有三大組成部分，說明如下。(1)ECMAScript：JavaScript的核心，描述了語言的基本語法(var、for、if、array等)和數(shù)據(jù)類型(數(shù)字、字符串、布爾、函數(shù)、對象(obj、[]、{}、null)、未定義)。(2)瀏覽器對象模型（BOM）對瀏覽器窗口進行訪問和操作。例如彈出新的瀏覽器窗口，移動、改變和關閉瀏覽器窗口，提供詳細的網(wǎng)絡瀏覽器信息（navigatorobject），詳細的頁面信息（locationobject），詳細的用戶屏幕分辨率的信息（screenobject），對cookies的支持等等。BOM作為JavaScript的一部分并沒有相關標準的支持，每一個瀏覽器都有自己的實現(xiàn)，雖然有一些非事實的標準，但還是給開發(fā)者帶來一定的麻煩。一、JavaScript簡介03(3)文檔對象模型（DOM）：DOM（文檔對象模型）是HTML和XML的應用程序接口（API）。DOM將把整個頁面規(guī)劃成由節(jié)點層級構(gòu)成的文檔。HTML或XML頁面的每個部分都是一個節(jié)點的衍生物。如下面的HTML頁面：一、JavaScript簡介<html><head><title>SamplePage</title></head><body><p>helloworld!</p></body></html>03DOM通過創(chuàng)建樹來表示文檔，從而使開發(fā)者對文檔的內(nèi)容和結(jié)構(gòu)具有空前的控制力。用DOMAPI可以輕松地刪除、添加和替換節(jié)點（getElementById、childNodes、appendChild、innerHTML）。
上段代碼可以用DOM繪制如圖7.4所示的節(jié)點層次圖。一、JavaScript簡介034、JavaScript執(zhí)行原理（1）瀏覽器客戶端向服務器端發(fā)送請求。(即用戶在瀏覽器地址欄中輸入地址)（2）數(shù)據(jù)處理：服務器端將某個包含JavaScript的頁面進行處理。（3）發(fā)送響應：服務器端將含有JavaScript的HTML文件進行處理頁面發(fā)送到瀏覽器客戶端，然后由瀏覽器客戶端從上直下逐條解析HTML標簽和JavaScript標簽，將頁面效果呈給用戶。一、JavaScript簡介03二、JavaScript基本語法1、JavaScript引入方式通常JavaScript腳本是通過嵌入在HTML中來實現(xiàn)自身的功能的。在HTML文檔中引入JavaScript有三種方式，具體如下：（1）嵌入式：將代碼直接寫在HTML文檔中。通過<script>標簽及其相關屬性可以引入JavaScript代碼。當瀏覽器讀取到<script>標簽時，就解釋執(zhí)行其中的腳本。具體語法如下：
//
HTML5中默認腳本類型為JavaScript，編寫時可省略type屬性<scripttype="text/javascript"> //JavaScript代碼</script>03二、JavaScript基本語法（2）外鏈式：創(chuàng)建.js文件，使用src屬性引入文件。當腳本代碼比較復雜或者同一段代碼需要被多個網(wǎng)頁文件使用時，可以將這些腳本代碼放置在一個擴展名為.js的文件中，然后通過外鏈式引入該js文件。具體語法如下：<scriptsrc="js文件路徑"></script>注意：使用嵌入式或外鏈式時，JavaScript代碼可以放在HTML文檔的head標簽內(nèi)，也可放在body標簽中，元素標簽后。JavaScript代碼放在不同的位置會影響程序的運行順序。（3）行內(nèi)式：使用html標記中href屬性或通過事件引入//通過href屬性引入<ahref="響應函數(shù);"></a>//通過事件引入<inputtype="button"onclick="響應函數(shù);"/>03【例7-1】引入JavaScript代碼步驟一：定義HTML文檔<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>引入JavaScript</title><!--使用外鏈式引入--><scripttype="text/javascript"src="7-1.js"></script></head><body><!--使用行內(nèi)式引入--><!--點擊按鈕，調(diào)用hello()函數(shù)--><buttononclick="hello()">歡迎</button><br><!--使用內(nèi)嵌式引入--><scripttype="text/javascript">//使用document.write()方法，在頁面中輸出文字document.write("JavaScript學習第一課");</script></body></html>步驟二：定義js文檔function
hello(){
alert("歡迎學習JavaScript！");
}
運行例7-1，得到如圖7.5所示效果。點擊歡迎按鈕，調(diào)用js文件中定義的響應函數(shù)hello(),彈出警示框，如圖7.6所示。03二、JavaScript基本語法2、JavaScript基本語法（1）常用輸出語句JavaScript常用輸出語句如下所示：window.alert()：寫入警示框document.write()：寫入HTML輸出console.log()：寫入瀏覽器控制臺（2）注釋JavaScript注釋語句語法格式如下所示：//單行注釋/*多行注釋*/03二、JavaScript基本語法（3）數(shù)據(jù)類型JavaScript的數(shù)據(jù)類型，根據(jù)存儲方式不同可分為值類型和引用類型：值類型：值類型數(shù)據(jù)直接存儲在堆中，變量存儲的是簡單的數(shù)據(jù)段，存儲的是具體的值，是輕量級的數(shù)據(jù)存儲方式。包括整型、浮點型、布爾型等。引用類型：引用類型的變量，存儲的是對象引用地址。將數(shù)據(jù)的存儲位置存儲在堆中，講具體數(shù)據(jù)存儲在棧中。包括數(shù)組、對象等。03二、JavaScript基本語法（4）變量與常量的聲明
在JavaScript中聲明變量和常量，主要是用一下語句：var：聲明變量let：聲明僅在塊級作用范圍內(nèi)有效的變量，如if循環(huán)中的迭代條件。const：聲明常量（5）運算符JavaScript中常用的運算符如表所示：數(shù)學運算符：+、-、*、/、%、++、--連接運算符：+字符串：使用單引號’’或雙引號""比較運算符：>、<、==、>=、<=、!==、===（絕對等于：值和類型均相等：）03二、JavaScript基本語法（6）流程控制語句在JavaScript中，程序流程控制可分為順序結(jié)構(gòu)、分支結(jié)構(gòu)及循環(huán)結(jié)構(gòu)：順序結(jié)構(gòu)：標準的從上往下執(zhí)行的順序。
分支結(jié)構(gòu)：分支結(jié)構(gòu)也稱選擇結(jié)構(gòu)，通過對給定的條件進行判斷，從而決定執(zhí)行兩個或多個分支中的哪一支。主要包括：if語句、switch語句。循環(huán)結(jié)構(gòu)：根據(jù)判斷條件的結(jié)果選擇是否重復執(zhí)行某段代碼的結(jié)構(gòu)。主要包括：for語句、while語句。
在流程控制語句中，我們還經(jīng)常break語句及continue語句，用來實現(xiàn)程序跳轉(zhuǎn)。其中break語句表示跳出當前分支或循環(huán)；continue表示跳出當次分支或循環(huán)，進入下一次循環(huán)。03二、JavaScript基本語法（7）函數(shù)函數(shù)用于封裝一段完成特定功能的代碼。用戶在使用時只需關注參數(shù)及返回值，就能完成特定功能。JavaScript中定義函數(shù)的語法格式如下：
function函數(shù)名（形參1，形參2，……）{
函數(shù)體；
return返回值；}其中：形參：定義函數(shù)時使用的參數(shù)實參：調(diào)用函數(shù)式傳入的參數(shù)返回值：函數(shù)的返回值，不定義時返回值為undefined03【例】7-2數(shù)組嵌套實現(xiàn)三級聯(lián)動
<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>省份城市的三級聯(lián)動</title></head><body><form><selectid="province"><optionvalue="-1">請選擇</option></select><selectid="city"></select><selectid="country"></select></form><script>//省份數(shù)組varprovinceArr=['上海市','江蘇省','河南省'];//城市數(shù)組varcityArr=[['上海市'],['蘇州市','南京市','揚州市'],['鄭州市','洛陽市','新鄉(xiāng)市','南陽市']];//區(qū)域數(shù)組varcountryArr=[[['徐匯區(qū)','浦東區(qū)','靜安區(qū)','黃浦區(qū)','長寧區(qū)']],[['虎丘區(qū)','吳中區(qū)','相城區(qū)','姑蘇區(qū)','吳江區(qū)'],['玄武區(qū)','秦淮區(qū)','鼓樓區(qū)','浦口區(qū)'],['廣陵區(qū)','江都區(qū)']],[['二七區(qū)','金水區(qū)','中原區(qū)','鄭東新區(qū)','管城區(qū)','中牟市','新鄭市',],['澗西區(qū)','老城區(qū)','西工區(qū)'],['衛(wèi)濱區(qū)','紅旗區(qū)','鳳泉區(qū)'],['宛城區(qū)','臥龍區(qū)']]];//第1步functioncreateOption(obj,data){for(variindata){varop=newOption(data[i],i);//創(chuàng)建下拉列表中的option選項obj.options.add(op);//將選項添加到下拉列表中}}varprovince=document.getElementById('province');createOption(province,provinceArr);03//第2步varcity=document.getElementById('city');province.onchange=function(){city.options.length=0;//清空city下的原有<option>createOption(city,cityArr[province.value]);if(province.value>=0){city.onchange();//自動添加
城市對應區(qū)域
下拉列表
}else{country.options.length=0;//清空country下的原有<option>}};//第3步varcountry=document.getElementById('country');city.onchange=function(){country.options.length=0;//清空country下的所有原有<option>createOption(country,countryArr[province.value][city.value]);};</script></body></html>03二、JavaScript基本語法（8）JavaScript對象JavaScript是基于對象的腳本語言，在JavaScript中，所有類都是基類Object類的子類。定義和使用類的基本語法如下：//
定義類function
類名(參數(shù))
{
//
初始化類的屬性
this.屬性名
=
屬性值;
……
//
初始化類的方法
function
方法名(參數(shù))
{
//
方法體
}}
//
類的實例化var
對象名
=
new
類名(參數(shù));//
獲取類的屬性對象名.屬性名//
調(diào)用類的方法對象名.方法名(參數(shù))JavaScript中提供了大量的內(nèi)置對象供用戶使用，具體如下：Array：數(shù)組類Date：日期類Error：錯誤類Function：函數(shù)類Math：數(shù)學類，該對象包含相當多的執(zhí)行數(shù)學運算的方法Number：數(shù)值類Object：對象類String：字符串類03【例7-3】使用日期類
<!DOCTYPE
html><html><head>
<meta
charset="utf-8">
<title>獲取當前時間</title></head><body>
<script
type="text/javascript">
var
today
=
new
Date();
document.write("現(xiàn)在是："
+
today.getFullYear()
+
"年"
+
(today.getMonth()
+
1)
+
"月"
+
today.getDate()
+
"日<br/>");
document.write("本地時間格式："
+
today.toLocaleString()
+
"<br/>");
document.write("格林尼治標準時間："
+
today.toGMTString()
+
"<br/>");
</script></body>03三、DOM對象DOM（DocumentObjectModel，文檔對象模型）用于完成HTML和XML文檔的操作，對所有元素進行獲取、訪問、標簽屬性和樣式的設置。在JavaScript中利用DOM操作HTML元素和CSS樣式。1、DOM節(jié)點樹DOM節(jié)點樹主要包括以下元素：DOMHTML：DOM中為操作HTML文檔提供的屬性和方法element：HTML中的標簽元素node：節(jié)點，文檔中所有內(nèi)容。節(jié)點分為標簽節(jié)點、文本節(jié)點、屬性節(jié)點，其中標簽節(jié)點又被稱為元素節(jié)點，文檔中的注釋稱為注釋節(jié)點。03三、DOM對象DOM將網(wǎng)頁中文檔的對象關系規(guī)劃為節(jié)點層級，構(gòu)成它們之間的等級關系，這種各對象間的層次結(jié)構(gòu)被稱為節(jié)點樹。如圖7.9所示就是一個DOM樹。圖7.9文檔與對應的層次結(jié)構(gòu)圖03三、DOM對象一個文檔的樹形結(jié)構(gòu)就是由各種不同的節(jié)點組成的。文檔對象節(jié)點樹有以下特點：每個節(jié)點樹有一個根節(jié)點。除了根節(jié)點，每個節(jié)點都有一個父節(jié)點。每個節(jié)點都可以有許多的子節(jié)點。具有相同父節(jié)點的節(jié)點叫做“兄弟節(jié)點”。通過對象模型，JavaScript可以對節(jié)點元素實現(xiàn)如下操作：改變頁面中的所有HTML元素內(nèi)容改變頁面中的所有HTML屬性改變頁面中的所有CSS樣式刪除已有的HTML元素和屬性添加新的HTML元素和屬性對頁面中所有已有的HTML事件作出反應在頁面中創(chuàng)建新的HTML事件03三、DOM對象2、節(jié)點的訪問（1）訪問指定元素一個元素對象可以擁有元素節(jié)點、文本節(jié)點、子節(jié)點或其它類型的節(jié)點。訪問指定節(jié)點的常用方法如表7.1所示。表7.1訪問節(jié)點的方法方法說明getElementById(id)獲取擁有指定id的第一個元素對象的引用getElementsByName(name)獲取帶有指定名稱的元素對象集合getElementsByTagName(name)獲取帶有指定標簽名的元素對象集合getElementsByClassName(name)獲取指定類名的元素對象集合03三、DOM對象（2）訪問相關元素引用完成一個頁面元素對象后，可以使用DOM節(jié)點對象的parentNode、childNodes、firstChild、lastChild、previousSibling或nextSibling屬性訪問相對于該頁面元素的父、子或兄弟元素。具體如表7.11所示。表7.2訪問節(jié)點的方法屬性說明parentNode元素節(jié)點的父節(jié)點childNodes元素節(jié)點的子節(jié)點數(shù)組firstChild第一個子節(jié)點lastChild最后一個子節(jié)點previousSibling前一個兄弟節(jié)點nextSibling后一個兄弟節(jié)點03三、DOM對象3、元素對象常用操作由于HTMLDOM將HTML文檔表示為一顆DOM樹，每個節(jié)點對象表示文檔的特定部分，因此通過修改這些對象，就可以動態(tài)改變頁面元素的屬性。關于元素對象的常用操作如表7.3所示。document.createElement()是在對象中創(chuàng)建一個對象，要與appendChild()或insertBefore()方法聯(lián)合使用。其中，appendChild()方法在節(jié)點的子節(jié)點列表末添加新的子節(jié)點。insertBefore()方法在節(jié)點的子節(jié)點列表任意位置插入新的節(jié)點。表7.3修改頁面元素的方法方法說明createElement()創(chuàng)建元素節(jié)點createTextNode()創(chuàng)建文本節(jié)點appendChild()為當前節(jié)點增加一個子節(jié)點（作為最后一個子節(jié)點）insertBefore()為當前節(jié)點增加一個子節(jié)點（插入到指定子節(jié)點之前）removeChild()刪除當前節(jié)點的某個子節(jié)點03三、DOM對象4、元素屬性與內(nèi)容操作除了可以對元素進行添加刪除等操作，還可以對元素的屬性和內(nèi)容進行修改，具體方法如表7.4所示。表7.4元素屬性及屬性操作類型屬性/方法說明元素內(nèi)容innerHTML獲取或設置元素的HTML內(nèi)容樣式屬性className獲取或設置元素的class屬性style獲取或設置元素的style樣式屬性位置屬性offsetWidth、offsetHeight獲取或設置元素的寬和高（不含滾動條）scrollWidth、scrollHeight獲取或設置元素的完整的寬和高（含滾動條）offsetTop、offsetLeft獲取或設置包含滾動條，距離上或左邊滾動過的距離scrollTop、scrollLeft獲取或設置元素在網(wǎng)頁中的坐標屬性操作getAttribute()獲得元素指定屬性的值setAttribute()為元素設置新的屬性removeAttribute()為元素刪除指定的屬性03三、DOM對象5、元素樣式操作style屬性可以修改元素的樣式，className屬性可以修改元素的類名。（1）style屬性每個元素對象都有一個style屬性，常用style屬性如表7.5所示。使用這個屬性可以動態(tài)調(diào)整元素的內(nèi)嵌樣式，從而獲得所需要的效果。名稱說明background設置或返回元素的背景屬性backgroundColor設置或返回元素的背景色display設置或返回元素的顯示類型height設置或返回元素的高度left設置或返回定位元素的左部位置listStyleType設置或返回列表項標記的類型overflow設置或返回如何處理呈現(xiàn)在元素框外面的內(nèi)容textAlign設置或返回文本的水平對齊方式textDecoration設置或返回文本的修飾textIndent設置或返回文本第一行的縮進transform向元素應用2D或3D轉(zhuǎn)換03（2）className屬性元素對象的className屬性用于切換元素的類名，或為元素追加類名。例【7-4】操作DOM節(jié)點<!DOCTYPE
html><html><head>
<meta
charset="utf-8">
<title>添加節(jié)點</title></head><body>
<div
id="father"
style="height:
200px;width:
400px;">
<p
id="p1">node1</p>
<p
id="p2">node2</p>
<button
id='append'
onclick="addnode()">添加節(jié)點</button>
</div></body><script
type="text/javascript">
function
addnode()
{
var
child
=
document.createElement('p');
var
father
=
document.getElementById('father');
child.innerHTML
=
"This
is
a
test";
child.style.color
=
"red"
father.appendChild(child);
}</script></html>案例完成后，打開頁面，點擊“添加節(jié)點”按鈕，就會在按鈕下方添加段落節(jié)點，如圖7.9所示：03四、BOM對象BOM（BrowserObjectModel）是瀏覽器對象模型，它提供了一系列對象用于與瀏覽器窗口進行交互。BOM對象包括window（窗口）、navigator（瀏覽器程序）、screen（屏幕）、location（地址）、history（歷史）和document（文檔）等對象。其中，window對象是瀏覽器的窗口，它是整個BOM的核心，位于BOM對象的最頂層。關于BOM對象的層次結(jié)構(gòu)如圖7.10所示。圖7.10BOM對象的層次結(jié)構(gòu)圖03四、BOM對象window子對象包括：document（文檔對象）：DOM對象，是HTML頁面當前窗體的內(nèi)容。frame（框架對象）：包含了框架的版面布局信息，以及每一個框架所對應的窗口對象。history（歷史對象）：主要用于記錄瀏覽器的訪問歷史記錄，也就是瀏覽網(wǎng)頁的前進與后退功能。location（地址欄對象）：用于獲取當前瀏覽器中URL地址欄內(nèi)的相關數(shù)據(jù)。navigator（瀏覽器對象）：用于獲取瀏覽器的相關數(shù)據(jù)，如瀏覽器的名稱、版本，也稱為瀏覽器的嗅探器。screen（屏幕對象）：可獲取與屏幕相關的數(shù)據(jù)，例如屏幕的分辨率等。031、window對象window對象表示整個瀏覽器窗口，用于獲取瀏覽器窗口的大小、位置，或設置定時器等。window對象常用的屬性和方法如表7.6所示。表7.6window對象常用的屬性和方法屬性/方法說明Document、history、location、navigator、screen返回相應對象的引用。例如document屬性返回document對象的引用。parent、self、top分別返回父窗口、當前窗口和最頂層窗口的對象引用。screenLeft、screenTop、screenX、screenY返回窗口的左上角、在屏幕上的X、Y坐標。Firefox不支持screenLeft、screenTop，IE8及更早的IE版本不支持screenX、screenY。innerWidth、innerHeight分別返回窗口文檔顯示區(qū)域的寬度和高度。outerWidth、outerHeight分別返回窗口的外部寬度和高度。closed返回當前窗口是否已被關閉的布爾值。opener返回對創(chuàng)建此窗口的窗口引用。open()、close()打開或關閉瀏覽器窗口。alert()、confirm()、prompt()分別表示彈出警告框、確認框、用戶輸入框。moveBy()、moveTo()以窗口左上角為基準移動窗口，moveBy()是按偏移量移動，moveTo()是移動到指定的屏幕坐標。scrollBy()、scrollTo()scrollBy()是按偏移量滾動內(nèi)容，scrollTo()是滾動到指定的坐標。setTimeout()、clearTimeout()設置或清除普通定時器。setInterval()、clearInterval()設置或清除周期定時器。注意：window對象是最頂層對象，調(diào)用他的屬性和方法時，可以省去window，例如使用alert()彈出一個警告提示框，完整的寫法應該是window.alert()，即調(diào)用window對象的alert()方法。03四、BOM對象2、document對象document對象用于處理網(wǎng)頁文檔，通過該對象可以訪問文檔中所有的元素。下面列舉document對象常用的屬性和方法，如表7.7所示。表7.7document對象常用的屬性和方法屬性/方法說明body訪問<body>元素。lastModified獲得文檔最后修改的日期和時間。referrer獲得該文檔的來路URL地址，當文檔通過超鏈接被訪問時有效。title獲得當前文檔的標題。write()向文檔寫HTML或JavaScript代碼。03四、BOM對象3、location對象location對象用于獲取和設置當前網(wǎng)頁的URL地址，其常用的屬性和方法如表7.8所示。表7.8location對象常用的屬性和方法屬性/方法說明hash獲取或設置URL中的錨點，例如“#top”。host獲取或設置URL中的主機名，例如“”。port獲取或設置URL中的端口號，例如“80”。href獲取或設置整個URL，例如“/1.html”。pathname獲取或設置URL的路徑部分，例如“/1.html”。protocol獲取或設置URL的協(xié)議，例如“http:”。search獲取或設置URL地址中的GET請求部分，例如“?name=haha&age=20”。reload()重新加載當前文檔。03四、BOM對象4、history對象history對象最初的設計和瀏覽器的歷史記錄有關，但出于隱私方面的考慮，該對象不再允許獲取到用戶訪問過的URL歷史。history對象主要的作用是控制瀏覽器的前進和后退，其常用方法如表7.18所示。表7.18history對象常用的屬性和方法屬性/方法說明back()加載歷史記錄中的前一個URL（相當于后退）。forward()加載歷史記錄中的后一個URL（相當于前進）。go()加載歷史記錄中的某個頁面。03四、BOM對象5、screen對象screen對象用于獲取用戶計算機的屏幕信息，例如屏幕分辨率、顏色位數(shù)等。screen對象的常用屬性如表7.9所示。表7.9screen對象常用的屬性和方法屬性說明width、height屏幕的寬度和高度availWidth、availHeight屏幕的可用寬度和可用高度（不包括Windows任務欄）colorDepth屏幕的顏色位數(shù)03【例7-5】定時跳轉(zhuǎn)頁面
<!DOCTYPE
html><html
lang="en">
<head>
<meta
charset="UTF-8">
<meta
http-equiv="X-UA-Compatible"
content="IE=edge">
<meta
name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>定時跳轉(zhuǎn)頁面</title></head>
<body>
<p
style="text-align:
center;">
<span
id="time"
style="color:
red;">5</span>秒之后，自動跳轉(zhuǎn)百度首頁
</p>
<script>
var
second
=
5;
function
showtime()
{
second--;
//
判斷時間，如果second<=0，則跳轉(zhuǎn)
if
(second
<=
0)
{
location.href
=
"";
}
var
time
=
document.getElementById("time");
time.innerHTML
=
second
+
"";
}
//
設置定時器
setInterval(showtime,
1000);
</script></body>
</html>項目完成效果如圖所示，頁面中倒計時5秒后自動跳轉(zhuǎn)到百度首頁03五、事件事件是交互的橋梁，用戶可以通過多種方式與瀏覽器載入的頁面進行交互。Web應用程序開發(fā)者通過JavaScript腳本內(nèi)置的和自定義的事件來響應用戶的動作，就可以開發(fā)出更有交互性、動態(tài)性的頁面。最常見的JavaScript事件有：鼠標交互事件鍵盤事件表單事件03五、事件1、JavaScript事件與事件處理采用事件驅(qū)動是JavaScript語言的一個最基本特征，所謂的事件是指用戶在訪問頁面時執(zhí)行的操作。事件處理指的就是與事件關聯(lián)的JavaScript對象，當與頁面特定部分關聯(lián)的事件發(fā)生時，事件處理器就會被調(diào)用。事件處理的過程通常分為三步，具體如下：發(fā)生事件啟動事件處理程序事件處理程序作出反應03五、事件在使用事件處理程序?qū)撁孢M行操作時，關鍵在于如何通過對象的事件來調(diào)用事件處理程序。在JavaScript中，調(diào)用事件處理程序的方法有兩種，具體如下：在JavaScript中調(diào)用事件處理程序在JavaScript中調(diào)用事件處理程序，首先需要獲得處理對象的引用，然后將要執(zhí)行的處理函數(shù)賦值給對應的事件。在HTML中調(diào)用事件處理程序只需要在HTML標記中添加相應的事件，并在其中執(zhí)行要執(zhí)行的代碼或函數(shù)名即可。2、事件對象在JavaScript中，當發(fā)生事件時，都會產(chǎn)生一個事件對象event。這個對象包括所有與事件相關的信息，包括DOM元素、事件類型及特定時間相關的信息。03五、事件3、事件分類
根據(jù)監(jiān)聽的對象不同，常見的事件可以分為頁面事件、鼠標事件、表單事件、鍵盤事件等，具體如下：（1）頁面事件頁面事件是指通過頁面觸發(fā)的事件，常用的頁面事件如表7.10所示。表7.10頁面事件類別事件事件說明頁面事件onload
當頁面加載完成時觸發(fā)此事件onunload
當頁面卸載時觸發(fā)此事件03五、事件（2）鼠標事件鼠標事件是指通過鼠標動作觸發(fā)的事件，鼠標事件有很多，下面列舉幾個常用的鼠標事件，如表7.11所示。表7.11鼠標事件類別事件事件說明鼠標事件onclick
鼠標單擊時觸發(fā)此事件ondblclick
鼠標雙擊時觸發(fā)此事件onmousedown
鼠標按下時觸發(fā)此事件onmouseup
鼠標彈起時觸發(fā)的事件onmouseover
鼠標移動到某個設置了此事件的元素上時觸發(fā)此事件onmousemove
鼠標移動時觸發(fā)此事件onmouseout
鼠標從某個設置了此事件的元素上離開時觸發(fā)此事件03五、事件（3）表單事件表單事件是指通過表單觸發(fā)的事件。例如在用戶注冊的表單中可以通過表單事件完成用戶名合法性檢查、唯一性檢查、用戶密碼合法性檢查等等。下面列舉幾個常用的表單事件，如表7.12所示。表7.12表單事件類別事件事件說明表單事件onblur
當前元素失去焦點時觸發(fā)此事件onchange
當前元素失去焦點并且元素內(nèi)容發(fā)生改變時觸發(fā)此事件onfocus
當某個元素獲得焦點時觸發(fā)此事件onreset
當表單被重置時觸發(fā)此事件onsubmit
當表單被提交時觸發(fā)此事件03五、事件（4）鍵盤事件
鍵盤事件是指通過鍵盤動作觸發(fā)的事件，常用于檢查用戶向頁面輸入的內(nèi)容。下面列舉幾個常用的鍵盤事件，如表7.13所示。表7.13鍵盤事件類別事件事件說明鍵盤事件onkeydown
當鍵盤上的某個按鍵被按下時觸發(fā)此事件onkeyup
當鍵盤上的某個按鍵被按下后彈起時觸發(fā)此事件onkeypress
當輸入有效的字符按鍵時觸發(fā)此事件03【例7-6】表單驗證：編寫HTML代碼
<!DOCTYPE
html><html
lang="en">
<head>
<meta
charset="UTF-8">
<meta
http-equiv="X-UA-Compatible"
content="IE=edge">
<meta
name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>表單驗證</title>
<link
rel="stylesheet"
href="7.6表單驗證.css"></head>
<body>
<h2>增加管理員</h2><form
action="">
<table>
<tbody>
<tr>
<td>姓名：</td>
<td><input
type="text"
name="username"><span>*</span></td>
<td>
<div>5~10個字符以內(nèi)的字母、數(shù)字和下劃線組合</div>
</td>
</tr>
<tr>
<td>密碼：</td>
<td><input
type="text"
name="pwd"><span>*</span></td>
<td>
<div>密碼為6位數(shù)字</div>
</td>
</tr>
<tr>
<td></td>
<td>
<button
name="btn"
type="button">保存</button>
<button
type="reset">重置</button>
</td>
<td></td>
</tr>
</tbody>
</table>
</form>
<script
src="7.6表單驗證.js"></script>
</body>
</html>03【例7-6】表單驗證：編寫CSS代碼
tdspan{color:red;}
/*默認狀態(tài)*/tddiv{display:none;}
/*獲得焦點是的狀態(tài)*/.tips_info{display:block;}
/*驗證失敗*/.tips_error{display:block;color:red;padding-left:20px;background:url("err.png")no-repeatleftcenter;}
/*驗證成功*/.tips_success{display:block;padding-left:20px;background:url("ok.png")no-repeatleftcenter;width:0px;height:20px;overflow:hidden;}03【例7-6】表單驗證：編寫JavaScript代碼
varform=document.forms[0];//查找觸發(fā)事件的元素vartextName=form.username;vartxtPwd=form.pwd;
//定義兩個正則表達式varnamereg=/^\w{5,10}$/;varpwdreg=/^\d{6}$/;
//綁定事件處理函數(shù)
：獲得焦點，失去焦點
//獲得焦點
顯示提示信息
修改class為tips_infotextName.onfocus=getFocus;//不要加小括號！?。xtPwd.onfocus=getFocus;
//獲得焦點functiongetFocus(){this.parentElement.nextElementSibling.firstElementChild.className="tips_info";}
//失去焦點驗證格式textName.onblur=function(){verift(this,namereg);};txtPwd.onblur=function(){//傳參verift(this,pwdreg);};
//失去焦點驗證functionverift(input,reg){//拿到用戶輸入內(nèi)容vardiv=input.parentElement.nextElementSibling.firstElementChild;//驗證輸入是否匹配reg.test()if(reg.test(input.value)){//如果匹配，顯示成功修改class為tips_successdiv.className="tips_success";returntrue;}else{//如果不匹配顯示錯誤修改class為tips_errordiv.className="tips_error";returnfalse;}}
varbtn=form.btn;btn.onclick=function(){//驗證文本框varrn=verift(textName,namereg);varrp=verift(txtPwd,pwdreg);//判斷if(rn&&rp){form.submit();}}03案例完成效果如圖7.12所示，當填寫表單時，將會對表單輸入進行驗證，不符合驗證條件時，將會進行錯誤提示。03【項目實施】使用Javascript制作“旅行家——圖片輪播”效果任務一：布局頁面創(chuàng)建HTML文件、CSS文件及JavaScript文件，并關聯(lián)文件。項目布局結(jié)構(gòu)：輪播圖容器loopbox中包含3個部分：輪播圖圖片、箭頭切換按鈕以及圓點切換按鈕。具體代碼如下：03<!DOCTYPEhtml><html><head> <metacharset="utf-8"> <title>丹霞地貌輪播圖</title> <linkrel="stylesheet"href="loopimg.css"> <scriptsrc="/jquery/3.4.1/jquery.min.js"type="text/javascript"charset="utf-8"></script></head>
<body> <!--輪播圖容器--> <divclass="loopbox"> <!--圖片容器--> <ulclass="imglist"> <li><imgsrc="images/banner1.jpeg"></li> <li><imgsrc="images/banner2.jpeg"></li> <li><imgsrc="images/banner3.jpeg"></li> <li><imgsrc="images/banner4.jpeg"></li> <li><imgsrc="images/banner5.jpeg"></li> <li><imgsrc="images/banner1.jpeg"></li> </ul>
<!--箭頭按鈕--> <ul> <imgclass="left"onclick="changeleft()"src="images/left.png"> <imgclass="right"onclick="changeright()"src="images/right.png"> </ul> <!--圓點按鈕--> <ulclass="dots"> <liclass="dotactive">1</li> <liclass="dot">2</li> <liclass="dot">3</li> <liclass="dot">4</li> <liclass="dot">5</li> </ul> </div> <!--引入JavaScript--> <scripttype="text/javascript"src="loopimg.js"> </script></body></html>注意：輪播的只有5張圖片，這里布局了6張圖，第六張圖片與第1張圖片相同，這是為了實現(xiàn)無縫輪播。圓點切換按鈕有5個，即我們可以實時看到輪播圖目前所處的位置。箭頭按鈕有2個，可以通過它來控制前進與后退。03任務二：CSS布局根據(jù)整體布局，分別對整體及4個部分添加樣式代碼如下：整體樣式。/*整體樣式設置*/*{margin:0;padding:0;}ul,li{list-style:none;}03任務二：CSS布局2.輪播容器樣式我們?yōu)榱俗寛D片容納在loopbox中，需要限定其寬度和高度并且將overflow屬性設置為hidden，將其余的圖片隱藏起來。同時，loopbox是靜止的，輪播圖片時輪播圖片容器imglist相對于loopbox左右移動，因此將其position屬性設置為relative，具體代碼如下：/*輪播容器樣式*/.loopbox{width:1200px;height:550px;border:1pxsoliddarkgray;margin:40pxauto;position:relative;overflow:hidden;}03任務二：CSS布局3.輪播圖片樣式輪播圖容器imglist中布局了輪播圖片，在此對容器和圖片樣式分別進行設置。(1)輪播圖容器imglist樣式設置imglist的定位方式為相對定位，這樣就可以通過控制Left和Right兩個箭頭來控制圖片的移動了。由于布局了6張輪播圖片，所以將imglist的width設置為600%，只需讓圖片左浮動即可實現(xiàn)占滿一排了。/*
輪播圖容器樣式*/.loopbox
.imglist
{
width:
600%;
height:
100%;
position:
absolute;}.loopbox.imglistli{width:1200px;height:100%;float:left;}03任務二：CSS布局(2)輪播圖片樣式把圖片float屬性設置為left，并限定其大小，具體代碼如下所示：/*輪播圖片樣式*/.loopbox.imglistliimg{width:100%;height:100%;}03任務二：CSS布局4.箭頭切換按鈕樣式設置箭頭切換按鈕樣式，具體代碼如下：/*
箭頭按鈕樣式
*/.left,
.right
{
width:
50px;
height:
50px;
position:
absolute;
opacity:
0.5;}.left:hover,
.right:hover
{
opacity:
1;}.left
{
left:
20px;
top:
250px;}.right
{
right:
20px;
top:
250px;}03任務二：CSS布局5.圓點切換按鈕樣式（1）把顯示次序的圓點按鈕放在圖片的右下角。（2）設置li標記的樣式，及其激活狀態(tài)下樣式，
具體代碼如下：/*
圓點按鈕樣式
*/.dots
{
position:
absolute;
bottom:
20px;
right:
150px;}.dots
li
{
width:
20px;
height:
20px;
line-height:
20px;
background-color:
rosybrown;
border-radius:
50%;
float:
left;
margin-left:
20px;
text-align:
center;
font-size:
12px;
color:
white;
font-weight:
bolder;}.dot.active
{
background-color:
white;
color:
rosybrown;}03任務三：添加JS邏輯定義變量頁面加載完成后，首先獲取頁面中的對象，以便于進一步監(jiān)聽事件，調(diào)用對應的函數(shù)進行相應。圖片切換時，需要定義變量count來表示當前播放圖片的虛數(shù)。打開頁面時，輪播圖默認自動播放，這里需要調(diào)用自動播放函數(shù)，具體代碼如下所示：var
imglist
=
document.querySelector('.imglist');
//獲取需要移動的盒子var
ulEle
=
document.querySelector('ul');
//獲取ulvar
distance
=
ulEle.children[1].offsetWidth;
//獲取圖片寬度var
dotEle
=
document.querySelector('.dots').children;//獲取圓點children數(shù)組用于綁定事件var
loopbox
=
document.querySelector('.loopbox');//獲取盒子對象var
autamotic
=
null;
var
count
=
0;
//聲明計數(shù)器AutomaticallRound();//自動輪播und();//自動輪播03任務三：添加JS邏輯2.定義兩側(cè)箭頭按鈕響應函數(shù)
當點擊兩側(cè)箭頭按鈕時，圖片和圓點按鈕的樣式都發(fā)生變化，需要分別定義相應動作。需要注意的是，當圖片切換到第1張（索引為0）和第6張（索引為5）時，需要調(diào)整圖片位置，這里的兩張圖片為同一張，就是為了實現(xiàn)切換順暢的目的。左右兩側(cè)箭頭按鈕相應函數(shù)相似，定義好右側(cè)后，復制修改可得左側(cè)對應函數(shù)。具體代碼如下所示：
functionchangeright(){//右側(cè)箭頭按鈕點擊事件if(count===5){//0和5圖片是一樣的這一步目的使圖片運動銜接更緊密imglist.style.left='0px';//調(diào)到最前面count=0;}count++;changeimg(imglist,count);varactive=document.querySelector('.dot.active');if(count==5){//使圓點隨著圖片運動active.classList.remove('active');dotEle[0].classList.add('active');}else{active.classList.remove('active');dotEle[count].classList.add('active');}}function
changeleft()
{//綁定左點擊事件
if
(count
===
0)
{
imglist.style.left
=
-5
*
distance
+
'px';
count
=
5;
}
count--;
changeimg(imglist,
count);
var
active
=
document.querySelector('.dot.active');
active.classList.remove('active');
dotEle[count].classList.add('active');}033.定義函數(shù)實現(xiàn)自動切換效果（1）使用setInterval()定時器，并結(jié)合上面定義好的向左右切換的函數(shù)，即可可實現(xiàn)自動切換效果，代碼如下所示(左)：（2）當鼠標懸停在圖片上時，使用clearInterval()清除定時效果，暫停圖片自動切換；當鼠標離開圖片時，繼續(xù)調(diào)用自動輪播函數(shù)。具體代碼如下(右)：
functionAutomaticallRound(){//自動輪播autamotic=setInterval(function(){changeright();//調(diào)用方法},4000)}
loopbox.onmouseenter=function(){//鼠標hover盒子的時候停止輪播clearInterval(autamotic);}loopbox.onmouseleave=function(){//鼠標離開盒子輪播繼續(xù)AutomaticallRound();}034.設置圓點切換按鈕動作當點擊圓點切換按鈕時，按鈕樣式發(fā)生變化，同時切換圖片。分別定義點擊圓點切換按鈕的響應函數(shù)，以及切換圖片函數(shù)。（1）定義圓點切換按鈕切換動作：當點擊圓點按鈕時，首先遍歷按鈕對象，找出被點擊的圓點按鈕索引。接下來更換激活按鈕樣式，刪除上一次激活按鈕的激活屬性，為當前點擊按鈕添加激活屬性，并調(diào)用切換圖片函數(shù)，具體代碼如下：
for(vari=0;i<dotEle.length;i++){//給圓點綁定事件切換圖片dotEle[i].index=i;//聲明indexdotEle[i].onclick=function(){//綁定點擊事件document.querySelector('.dot.active').classList.remove('active');//刪除類名this.classList.add('active');//添加類名count=this.index;//給計數(shù)器賦值changeimg(imglist,count);//改變圖片}}03（2）定義點擊圓點按鈕時切換圖片函數(shù)，具體代碼如下：
functionchangeimg(ele,count){//改變圖片clearInterval(ele.timmer);//清除計時器防止連點時候發(fā)生錯誤ele.timmer=setInterval(function(){varstart=ele.offsetLeft;varstep=(-distance*count-start)/10;if(Math.abs(step)<1){step=step>0?1:Math.floor(step);}start+=step;ele.style.left=start+'px';if(start===-(distance*count)){//-是因為圖片的運動是反的clearInterval(ele.timmer);//清除定時器console.lo
溫馨提示
- 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責。
- 6. 下載文件中如有侵權(quán)或不適當內(nèi)容，請與我們聯(lián)系，我們立即糾正。
- 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 關于雇傭司機的合同協(xié)議
- 出租屋低價裝修合同協(xié)議
- 三人行課件教學課件
- 農(nóng)村建房木工支模協(xié)議合同范本
- 小兒推拿app課件
- 小兒手足口病的護理
- 期貨從業(yè)資格之期貨投資分析考前沖刺訓練試卷參考答案詳解
- 期貨從業(yè)資格之《期貨法律法規(guī)》綜合提升練習試題帶答案詳解（黃金題型）
- 期貨從業(yè)資格之《期貨法律法規(guī)》自測題庫及答案詳解【必刷】
- 難點詳解湖北省武穴市中考數(shù)學真題分類（數(shù)據(jù)分析）匯編達標測試試卷（含答案詳解）
- 物流園區(qū)安全管理制度
- (2025)事業(yè)單位考試(面試)試題附答案
- 生物信息學基礎知識與應用考試題及答案2025年
- 2025年國際檔案日知識競賽試題庫300題（含答案）
- 遺體整形協(xié)議書
- 特斯拉MODEL X用戶手冊
- 江蘇南通2025年公開招聘農(nóng)村（村務）工作者筆試題帶答案分析
- 2025-2030中國太陽能電池板清潔系統(tǒng)行業(yè)市場現(xiàn)狀供需分析及投資評估規(guī)劃分析研究報告
- 2025年初中語文教師招聘面試八年級下冊逐字稿大自然的語言
- 2025-2030加工芒果產(chǎn)品行業(yè)市場現(xiàn)狀供需分析及投資評估規(guī)劃分析研究報告
- 章義伍流程管理
評論
0/150
提交評論