Web前端開發(fā)（JavaScript）課件 項(xiàng)目1-4 制作“開學(xué)迎新”網(wǎng)站 - 制作政務(wù)平臺(tái)系統(tǒng)首頁_第1頁
Web前端開發(fā)（JavaScript）課件 項(xiàng)目1-4 制作“開學(xué)迎新”網(wǎng)站 - 制作政務(wù)平臺(tái)系統(tǒng)首頁_第2頁
Web前端開發(fā)（JavaScript）課件 項(xiàng)目1-4 制作“開學(xué)迎新”網(wǎng)站 - 制作政務(wù)平臺(tái)系統(tǒng)首頁_第3頁
Web前端開發(fā)（JavaScript）課件 項(xiàng)目1-4 制作“開學(xué)迎新”網(wǎng)站 - 制作政務(wù)平臺(tái)系統(tǒng)首頁_第4頁
Web前端開發(fā)（JavaScript）課件 項(xiàng)目1-4 制作“開學(xué)迎新”網(wǎng)站 - 制作政務(wù)平臺(tái)系統(tǒng)首頁_第5頁
已閱讀5頁，還剩157頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

項(xiàng)目一制作“開學(xué)迎新”網(wǎng)站12任務(wù)1制作“歡迎”頁面任務(wù)2制作“個(gè)人信息”頁面任務(wù)3制作“答題小游戲”頁面制作“歡迎”頁面

任務(wù)131.?認(rèn)識(shí)JavaScript的組成及特性。2.?掌握J(rèn)avaScript的基本應(yīng)用。3.?能熟練使用輸出語句。4本任務(wù)的主要內(nèi)容是學(xué)會(huì)JavaScript應(yīng)用入門知識(shí)，使用外鏈?zhǔn)揭隞avaScript代碼，實(shí)現(xiàn)彈出對(duì)話框和在瀏覽器控制臺(tái)中輸出內(nèi)容的效果。5一、JavaScript概述1.認(rèn)識(shí)JavaScriptJavaScript（簡(jiǎn)稱JS）是一種運(yùn)行在瀏覽器上的編程語言，它嵌套在HTML（HyperTextMarkupLanguage，超文本標(biāo)記語言）文件中，由瀏覽器解釋執(zhí)行，主要用于實(shí)現(xiàn)網(wǎng)頁的動(dòng)態(tài)效果、用戶交互，以及前端和后端的數(shù)據(jù)傳輸?shù)取?對(duì)于網(wǎng)頁而言，HTML

構(gòu)成網(wǎng)頁的結(jié)構(gòu)，CSS（CascadingStyleSheets，串聯(lián)樣式表）形成網(wǎng)頁的外觀，JavaScript設(shè)定網(wǎng)頁的行為。若將制作網(wǎng)頁比作修建一座漂亮的房子，那么，HTML是房子的框架，CSS是房子精致的裝修，JavaScript則是房子內(nèi)可以提供互動(dòng)服務(wù)的各種智能電器，如圖所示。7圖解HTML、CSS、JavaScript的作用2.JavaScript的組成JavaScript由以下三個(gè)部分組成。（1）ECMAScript（EuropeanComputerManufacturersAssociationScript，簡(jiǎn)稱ES）：核心語法的組成部分，規(guī)定了JavaScript編程、發(fā)放和基礎(chǔ)核心內(nèi)容，是所有瀏覽器廠商共同遵守的一套JavaScript語法工業(yè)標(biāo)準(zhǔn)。8（2）

文檔對(duì)象模型（DocumentObjectModel，DOM）：

萬維網(wǎng)聯(lián)盟（WorldWideWebConsortium，W3C）推薦的處理可擴(kuò)展標(biāo)記語言（ExtensibleMarkupLanguage，XML）的標(biāo)準(zhǔn)編程接口。通過DOM提供的接口，開發(fā)人員可以操作頁面上的各種元素。（3）瀏覽器對(duì)象模型（BrowserObjectModel，BOM）：提供了獨(dú)立于內(nèi)容的、可以與瀏覽器窗口進(jìn)行互動(dòng)的對(duì)象結(jié)構(gòu)。通過BOM，開發(fā)人員可以操作瀏覽器窗口，如彈出框、控制窗口跳轉(zhuǎn)、獲取分辨率等。93.JavaScript的特性JavaScript作為一門流行的編程語言，具有以下優(yōu)秀特性。（1）基于對(duì)象JavaScript是一種基于對(duì)象的腳本語言，開發(fā)人員可以使用其中的對(duì)象和類來實(shí)現(xiàn)萬維網(wǎng)（WorldWideWeb，Web）系統(tǒng)中的各種功能，如數(shù)據(jù)封裝、屬性和方法的定義、繼承和多態(tài)等，從而更加快速地開發(fā)Web應(yīng)用。同時(shí)，使用對(duì)象和類也可以減少代碼的冗余程度，讓其更加模塊化、靈活和易于修改。10（2）數(shù)據(jù)安全性JavaScript作為一種安全性語言，不能訪問本地的硬盤，不能將數(shù)據(jù)存入服務(wù)器，也不能修改和刪除網(wǎng)絡(luò)文檔，只能通過瀏覽器實(shí)現(xiàn)信息瀏覽和動(dòng)態(tài)交互，從而有效地防止數(shù)據(jù)丟失和對(duì)系統(tǒng)的非法訪問。（3）動(dòng)態(tài)交互性JavaScript可以幫助開發(fā)人員實(shí)現(xiàn)各種動(dòng)態(tài)效果，如網(wǎng)頁的交互、動(dòng)態(tài)更新，并使網(wǎng)頁的響應(yīng)時(shí)間更短。它能夠通過處理用戶輸入或網(wǎng)頁事件來實(shí)現(xiàn)動(dòng)態(tài)交互性。除此之外，它還可以通過異步JavaScript和XML（AsynchronousJavascriptAndXML，AJAX）技術(shù)處理與服務(wù)器之間的異步通信，使網(wǎng)頁的響應(yīng)更加快速。11（4）跨平臺(tái)性JavaScript不依賴操作系統(tǒng)，僅需要瀏覽器的支持。這種跨平臺(tái)性使它成為Web開發(fā)中不可或缺的一部分，它可以在不同的瀏覽器和操作系統(tǒng)上運(yùn)行，并能連接各種數(shù)據(jù)庫和應(yīng)用程序編程接口（ApplicationProgrammingInterface，API）。這種跨平臺(tái)性還可以使JavaScript開發(fā)人員的工作更加簡(jiǎn)單，他們可以使用相同的代碼在不同的平臺(tái)上實(shí)現(xiàn)相同的功能。12二、JavaScript的基本應(yīng)用1.開發(fā)工具（1）瀏覽器瀏覽器對(duì)JavaScript的支持是JavaScript代碼能夠正常解析和運(yùn)行的基礎(chǔ)。13市場(chǎng)上的主流瀏覽器（2）代碼編輯器代碼編輯器是開發(fā)人員編寫代碼最常用的工具之一。一款優(yōu)秀的代碼編輯器往往可以幫助開發(fā)人員極大地提高程序的開發(fā)效率。常用的JavaScript集成開發(fā)環(huán)境（IntegratedDevelopmentEnvironment，IDE）工具如圖所示。14常用的JavaScript集成開發(fā)環(huán)境工具2.引入方式在HTML中，可以使用行內(nèi)式、內(nèi)聯(lián)式和外鏈?zhǔn)饺N方式引入JavaScript。（1）行內(nèi)式行內(nèi)式是指將JavaScript代碼作為HTML標(biāo)簽的屬性值來使用，通過行為觸發(fā)執(zhí)行。這種方式在實(shí)際開發(fā)中應(yīng)用很少。（2）內(nèi)聯(lián)式內(nèi)聯(lián)式是指將JavaScript代碼包裹在<script>標(biāo)簽中（通常將其放到<head>標(biāo)簽或<body>標(biāo)簽中），直接編寫在HTML文件內(nèi)。這種方式使用方便，適用于小篇幅代碼的開發(fā)。15（3）外鏈?zhǔn)酵怄準(zhǔn)绞侵笇avaScript代碼保存到一個(gè)單獨(dú)的擴(kuò)展名為“.js”的文件中，然后使用<script>標(biāo)簽的src屬性引入這個(gè)JS文件。在實(shí)際開發(fā)中推薦使用這種方式，以便代碼的后期維護(hù)和優(yōu)化，其語法格式如下。163.常用的輸出語句輸入和輸出是人和計(jì)算機(jī)的交互。用戶通過鍵盤、鼠標(biāo)等向計(jì)算機(jī)輸入信息，計(jì)算機(jī)處理這些信息后再將結(jié)果輸出并展示給用戶，這就是一次輸入和輸出過程。17為了方便信息的輸入和輸出，JavaScript提供了如下輸出語句。（1）頁面輸出語句alert()方法：創(chuàng)建一個(gè)警告對(duì)話框，一般用于調(diào)試程序。其參數(shù)可以是變量、字符串或表達(dá)式。document.write()方法：將內(nèi)容輸出到頁面中，若內(nèi)容中包含HTML標(biāo)簽，則會(huì)被瀏覽器解析。其參數(shù)可以是變量、字符串或表達(dá)式。confirm()方法：顯示一個(gè)帶有提示文本和兩個(gè)按鈕的對(duì)話框，即確認(rèn)對(duì)話框，為用戶提供選擇“確定”按鈕或“取消”按鈕的功能。18（2）控制臺(tái)輸出語句console.log()方法：在瀏覽器控制臺(tái)中輸出內(nèi)容。若要查看輸出結(jié)果，在瀏覽器中按下鍵盤上的F12鍵啟動(dòng)開發(fā)人員工具，在開發(fā)人員工具的“控制臺(tái)”標(biāo)簽中即可查看，示例代碼如下。輸出結(jié)果如圖所示。19console.log(?)方法的輸出結(jié)果4.注釋為了提高代碼的可讀性，往往需要在代碼中添加一些額外的信息來對(duì)其進(jìn)行描述說明，即注釋。注釋嵌套在代碼中，不會(huì)影響代碼的執(zhí)行，也不會(huì)在頁面中輸出。JavaScript中的注釋主要有兩種，分別是單行注釋和多行注釋。（1）單行注釋單行注釋以雙斜杠“//”開頭，“//”之后的所有內(nèi)容都會(huì)被看作注釋的內(nèi)容。（2）多行注釋多行注釋以“/*”開頭，以“*/”結(jié)尾，出現(xiàn)在“/*”和“*/”之間的所有內(nèi)容都會(huì)被看作注釋。20制作“個(gè)人信息”頁面任務(wù)2211.?能根據(jù)實(shí)際需求聲明并使用變量。2.?能熟練使用輸入語句。3.?能熟練輸出數(shù)據(jù)到頁面中。22本任務(wù)的主要內(nèi)容是在“個(gè)人信息”頁面中運(yùn)用輸入和輸出語句，實(shí)現(xiàn)彈出輸入框，提示用戶輸入內(nèi)容，將輸入內(nèi)容保存到變量中，再將數(shù)據(jù)輸出到頁面中的效果。23一、變量變量是存儲(chǔ)信息的容器，由變量名和變量值組成。變量的使用分為變量的聲明和賦值兩步，這兩步可以分開進(jìn)行，也可以同時(shí)進(jìn)行。241.變量的聲明在JavaScript中，變量通常使用var關(guān)鍵字聲明，示例代碼如下。使用var關(guān)鍵字聲明變量后，計(jì)算機(jī)會(huì)自動(dòng)為變量分配內(nèi)存空間。num是開發(fā)人員自定義的變量名，通過變量名可以訪問變量在內(nèi)存中被分配的空間。252.變量的賦值聲明后的變量默認(rèn)是沒有值的，因此，需要對(duì)其進(jìn)行賦值操作，示例代碼如下。上述代碼可在聲明變量后，將變量的值設(shè)置為100。3.變量的初始化聲明一個(gè)變量并為其賦值，這個(gè)過程就是變量的初始化。264.變量的命名規(guī)范（1）變量名由字母、數(shù)字、下劃線和符號(hào)“$”組成，如“age01”“_num”等。（2）變量名應(yīng)嚴(yán)格區(qū)分大小寫，如“app”“App”是兩個(gè)變量。（3）變量名不能以數(shù)字開頭，如“18age”是錯(cuò)誤的變量名。（4）變量名不能是關(guān)鍵字、保留字，如“var”“for”“while”等是錯(cuò)誤的變量名。27其次，在命名變量時(shí)應(yīng)遵循以下規(guī)則。（1）變量名須語義化，做到見名知義，如“age”代表年齡，“num”代表數(shù)字。（2）

采用駝峰命名法，即變量名首字母小寫，后面單詞的首字母大寫，

如“myFirstName”。（3）變量名一般為名詞。5.變量與字符串的拼接在JavaScript中，可以使用加號(hào)“+”來拼接變量與字符串。28二、常用的輸入語句prompt()方法：顯示一個(gè)對(duì)話框，對(duì)話框中包含一條信息（用于提示用戶輸入信息），語法格式如下。該方法有兩個(gè)參數(shù)，參數(shù)1為提示信息文本內(nèi)容（可選填），參數(shù)2為輸入框的默認(rèn)值（可選填）。29

制作“答題小游戲”頁面任務(wù)3301.?能根據(jù)具體需求使用對(duì)應(yīng)數(shù)據(jù)類型、運(yùn)算符和條件表達(dá)式完成運(yùn)算。2.?能靈活使用隨機(jī)數(shù)。3.?能根據(jù)需求選擇并運(yùn)用合適的分支語句。4.?能使用循環(huán)語句解決重復(fù)執(zhí)行的問題。5.?能根據(jù)需求在循環(huán)結(jié)構(gòu)中正確選擇并使用continue語句和break語句。31本任務(wù)的主要內(nèi)容是在“答題小游戲”頁面中運(yùn)用while循環(huán)，使網(wǎng)頁一直循環(huán)彈出隨機(jī)答題提示框，直到用戶結(jié)束答題并退出為止。32一、數(shù)據(jù)類型在JavaScript中，數(shù)據(jù)類型分為兩種，分別為基本數(shù)據(jù)類型（又稱值類型）和復(fù)雜數(shù)據(jù)類型（又稱引用類型），如圖所示。33JavaScript的數(shù)據(jù)類型341.基本數(shù)據(jù)類型（1）布爾型布爾型包含兩個(gè)值，分別為true

和

false，它常被用作判斷和循環(huán)的條件。注意，布爾型的值區(qū)分大小寫，只有全部字母為小寫的true和false才是布爾值，其他如大寫或大小寫混合的是標(biāo)識(shí)符。（2）數(shù)字型數(shù)字型包含兩種數(shù)值，分別為整型和浮點(diǎn)型。35（3）字符串型字符串型是程序中使用最廣泛的一種類型，由單引號(hào)或雙引號(hào)標(biāo)注，其中，單引號(hào)和雙引號(hào)可以相互嵌套，具體代碼如下。36（4）空型空型只有一個(gè)特殊值null，表示變量未指向任何對(duì)象。（5）未定義型未定義型只有一個(gè)特殊值undefined，表示聲明的變量還未被賦值。372.復(fù)雜數(shù)據(jù)類型在面向?qū)ο缶幊讨薪?jīng)常用到復(fù)雜數(shù)據(jù)類型，可通過new關(guān)鍵字創(chuàng)建復(fù)雜數(shù)據(jù)。復(fù)雜數(shù)據(jù)有對(duì)象（Object）、數(shù)組（Array）和日期（Date）等。二、轉(zhuǎn)義符在實(shí)際開發(fā)過程中，有時(shí)需要在頁面上顯示一些特殊字符，如引號(hào)或斜線等。但是在聲明字符串時(shí)，字符串內(nèi)容前后需用引號(hào)括起來，如此，字符串中的引號(hào)可能會(huì)與標(biāo)識(shí)符中的引號(hào)混同，此時(shí)就要使用轉(zhuǎn)義符。常用的轉(zhuǎn)義符見下表，這些字符都是以一個(gè)反斜線“\”開始的。38常用的轉(zhuǎn)義符三、運(yùn)算符運(yùn)算符用于執(zhí)行程序代碼運(yùn)算，主要針對(duì)一個(gè)以上操作數(shù)項(xiàng)目進(jìn)行運(yùn)算。JavaScript提供了算術(shù)運(yùn)算符、比較運(yùn)算符、賦值運(yùn)算符、邏輯運(yùn)算符等多種運(yùn)算符。1.算術(shù)運(yùn)算符算術(shù)運(yùn)算符用于執(zhí)行常見的數(shù)學(xué)運(yùn)算，如加法、減法、乘法、除法等。常用的算術(shù)運(yùn)算符見下表。3940常用的算術(shù)運(yùn)算符2.比較運(yùn)算符比較運(yùn)算符又稱關(guān)系運(yùn)算符，用于比較兩個(gè)值的大小，其返回結(jié)果是一個(gè)布爾值。比較運(yùn)算符不僅可以用于比較數(shù)字，還可以用于比較各種類型的值。JavaScript共提供了8種比較運(yùn)算符，見下表。418種比較運(yùn)算符3.賦值運(yùn)算符賦值運(yùn)算符用于給變量賦值。最常見的賦值運(yùn)算符是等號(hào)，它可以將右側(cè)的值賦給左側(cè)的變量。常用的賦值運(yùn)算符見下表。42常用的賦值運(yùn)算符4.邏輯運(yùn)算符邏輯運(yùn)算符可對(duì)操作數(shù)進(jìn)行布爾運(yùn)算，其結(jié)果返回的是一個(gè)布爾值，經(jīng)常與比較運(yùn)算符一起配合使用。常用的邏輯運(yùn)算符見下表。43常用的邏輯運(yùn)算符四、循環(huán)結(jié)構(gòu)JavaScript提供了3種循環(huán)語句，分別是for循環(huán)語句、while循環(huán)語句和

do-while循環(huán)語句。1.while循環(huán)語句while循環(huán)語句是JavaScript提供的最簡(jiǎn)單的循環(huán)語句，語法格式如下。44while循環(huán)在每次循環(huán)之前，會(huì)先對(duì)條件表達(dá)式進(jìn)行判斷，如果條件表達(dá)式的結(jié)果為true，則執(zhí)行｛

｝中的代碼；如果條件表達(dá)式的結(jié)果為false，則退出while循環(huán)，執(zhí)行while循環(huán)之后的代碼。while循環(huán)語句的執(zhí)行流程如圖所示。45while循環(huán)語句的執(zhí)行流程2.do-while循環(huán)語句對(duì)while循環(huán)而言，如果不滿足條件，那么就不能進(jìn)入循環(huán)。但在實(shí)際應(yīng)用中，有時(shí)即使不滿足條件，也要至少執(zhí)行一次循環(huán)體語句，這時(shí)就可以考慮使用do-while循環(huán)。do-while循環(huán)和while循環(huán)的功能相似，區(qū)別在于do-while循環(huán)至少會(huì)被執(zhí)行一次。do-while循環(huán)語句的語法格式如下。46該循環(huán)會(huì)在檢查條件表達(dá)式的結(jié)果是否為true之前執(zhí)行一次循環(huán)體語句，如果條件表達(dá)式的結(jié)果為true，那么就會(huì)重復(fù)這個(gè)循環(huán)。do-while循環(huán)語句的執(zhí)行流程如圖所示。47do-while循環(huán)語句的執(zhí)行流程五、分支語句JavaScript中的分支語句也稱條件判斷語句，分為

if單分支語句、if雙分支語句和多分支語句等。1.if單分支語句if單分支語句的語法格式如下。48if單分支語句會(huì)先對(duì)條件表達(dá)式的值進(jìn)行判斷，若其結(jié)果為true，則執(zhí)行｛｝中的代碼，否則不執(zhí)行。if單分支語句的執(zhí)行流程如圖所示。49

if單分支語句的執(zhí)行流程2.if雙分支語句if雙分支語句的語法格式如下。50if雙分支語句也會(huì)先對(duì)條件表達(dá)式的值進(jìn)行判斷，若其結(jié)果為true，則執(zhí)行第一個(gè)｛｝中的代碼；若其結(jié)果為false，則執(zhí)行else后面｛｝中的代碼。if雙分支語句的執(zhí)行流程如圖所示。51if雙分支語句的執(zhí)行流程3.多分支語句多分支語句是指有多個(gè)條件的語句，可以根據(jù)不同的條件執(zhí)行不同的操作，語法格式如下。52六、跳轉(zhuǎn)語句跳轉(zhuǎn)語句用于實(shí)現(xiàn)程序執(zhí)行過程中的流程跳轉(zhuǎn)。常用的跳轉(zhuǎn)語句有

continue語句和break語句。1.continue語句continue語句用于退出本次循環(huán)，即跳過continue語句后面的循環(huán)體語句，并繼續(xù)下一次循環(huán)，在實(shí)踐中一般用于排除或跳過某個(gè)選項(xiàng)。2.break語句break語句用于結(jié)束當(dāng)前循環(huán)，即退出整個(gè)循環(huán)，在實(shí)踐中一般用于已經(jīng)得到想要的結(jié)果且不再需要后續(xù)循環(huán)的情況。53七、Math.random()隨機(jī)數(shù)方法JavaScript提供了很多內(nèi)置方法，這些方法可以被直接使用以實(shí)現(xiàn)某項(xiàng)功能。例如，使用隨機(jī)數(shù)方法Math.random()配合其他數(shù)學(xué)函數(shù)可以限制隨機(jī)數(shù)的取值。生成指定隨機(jī)數(shù)的相關(guān)方法見下表。54生成指定隨機(jī)數(shù)的相關(guān)方法項(xiàng)目二制作“水果促銷”頁面5556任務(wù)1制作“新品水果資訊”模塊任務(wù)2制作“新品推薦”模塊任務(wù)3制作“價(jià)格計(jì)算”功能模塊任務(wù)4測(cè)試與提交“水果促銷”頁面制作“新品水果資訊”模塊

任務(wù)1571.?了解DOM樹結(jié)構(gòu)。2.?了解DOM中文檔、元素和節(jié)點(diǎn)的關(guān)系。3.?了解事件的概念。4.?掌握常見的鼠標(biāo)事件。5.?能根據(jù)不同的開發(fā)場(chǎng)景選擇合適的方法獲取元素。6.?能為頁面中的元素注冊(cè)事件。7.?能修改DOM元素的樣式。58本任務(wù)的主要內(nèi)容是獲取“新品水果資訊”模塊中的“字號(hào)+”“字號(hào)-”按鈕元素和資訊段落文字元素，并在兩個(gè)按鈕元素的單擊事件中實(shí)現(xiàn)對(duì)資訊段落文字元素的字號(hào)增大（最大字號(hào)為20px）和減?。ㄗ钚∽痔?hào)為12px）功能，方便用戶將字號(hào)調(diào)整至符合自己閱讀習(xí)慣的大小。增大字號(hào)和減小字號(hào)的顯示效果如圖所示。5960增大字號(hào)的顯示效果

減小字號(hào)的顯示效果一、文檔對(duì)象模型（DOM）使用JavaScript獲取網(wǎng)頁中的元素時(shí)，需要使用DOM。DOM是HTML的標(biāo)準(zhǔn)編程接口，通過DOM可以獲取和改變網(wǎng)頁的內(nèi)容、結(jié)構(gòu)和樣式。611.DOM樹結(jié)構(gòu)DOM以樹結(jié)構(gòu)表達(dá)HTML文檔，HTML文檔與DOM文檔的對(duì)應(yīng)關(guān)系如圖所示。62HTML文檔與DOM文檔的對(duì)應(yīng)關(guān)系2.DOM節(jié)點(diǎn)HTML文檔中的所有內(nèi)容都是節(jié)點(diǎn)。節(jié)點(diǎn)有很多種，整個(gè)HTML文檔是一個(gè)文檔節(jié)點(diǎn)，每個(gè)HTML元素是元素節(jié)點(diǎn)，HTML元素內(nèi)的文本是文本節(jié)點(diǎn)，HTML屬性是屬性節(jié)點(diǎn)，注釋是注釋節(jié)點(diǎn)。63節(jié)點(diǎn)類型示意圖3.獲取元素的方法DOM提供了多種獲取元素的方法，以下示例代碼中布局了6個(gè)按鈕元素。64獲取按鈕元素的方式如下。（1）使用標(biāo)簽名獲取1號(hào)按鈕getElementsByTagName()方法可獲取所有的相同標(biāo)簽的元素（如button標(biāo)簽），返回的結(jié)果為該標(biāo)簽元素的集合（如所有按鈕的集合），隨后可通過編號(hào)獲取集合中的指定元素（編號(hào)從0開始），示例代碼如下。（2）使用id屬性獲取2號(hào)按鈕getElementById()方法可獲取指定id的元素。由于在布局時(shí)為2號(hào)按鈕定義了id為btnId2，所以可以使用此方法獲取該按鈕，示例代碼如下。65（3）使用元素類名獲取3號(hào)和4號(hào)按鈕getElementsByClassName()方法可獲取所有的指定類名的元素（如btnBig類），返回的結(jié)果為該類元素的集合（此處為3號(hào)按鈕、4號(hào)按鈕的集合），隨后可使用編號(hào)0和1分別獲取這兩個(gè)按鈕，示例代碼如下。66（4）使用查詢選擇器獲取5號(hào)和6號(hào)按鈕querySelector()方法可根據(jù)條件查找元素，并返回第一個(gè)滿足條件的元素。使用條件#btnId5并根據(jù)id獲取5號(hào)按鈕，使用條件.btnClass6并根據(jù)類名獲取6號(hào)按鈕，示例代碼如下。67二、事件1.事件的概念事件是指可以被JavaScript偵測(cè)到的行為，是一種“觸發(fā)—響應(yīng)”機(jī)制，包括加載頁面、單擊或雙擊鼠標(biāo)、移動(dòng)鼠標(biāo)指針等具體的動(dòng)作，它對(duì)實(shí)現(xiàn)頁面的交互效果起著非常重要的作用。68事件的三要素包括事件源、事件類型和事件處理程序。（1）事件源：指觸發(fā)事件的元素。（2）事件類型：指事件的觸發(fā)方式（如鼠標(biāo)單擊或鍵盤輸入）。（3）事件處理程序：指事件觸發(fā)后要執(zhí)行的代碼（函數(shù)形式）。以上三要素可以被簡(jiǎn)單理解為“誰觸發(fā)了事件”“觸發(fā)了什么事件”“觸發(fā)了事件后要做什么”。692.常見的鼠標(biāo)事件JavaScript常見的鼠標(biāo)事件見下表。70JavaScript常見的鼠標(biāo)事件3.注冊(cè)事件的方法假設(shè)在布局中有一個(gè)id為testButton的按鈕元素，布局示例代碼如下。使用JavaScript獲取該按鈕并將其保存在變量btnTest中，示例代碼如下。71為DOM元素注冊(cè)事件有以下三種常用方法。（1）直接在布局HTML代碼中注冊(cè)事件以下示例代碼實(shí)現(xiàn)了為div節(jié)點(diǎn)注冊(cè)鼠標(biāo)單擊事件，當(dāng)用鼠標(biāo)左鍵單擊該div節(jié)點(diǎn)時(shí)，會(huì)執(zhí)行“alert('HelloWorld!')”代碼，在頁面中彈窗顯示“HelloWorld!”。72（2）使用DOM屬性注冊(cè)事件以下示例代碼實(shí)現(xiàn)了使用onclick屬性注冊(cè)鼠標(biāo)單擊事件（同理可注冊(cè)上表

中列舉的其他鼠標(biāo)事件）。若要移除btnTest的鼠標(biāo)單擊事件，則可將btnTest的事件賦值為null，示例代碼如下。73（3）使用事件監(jiān)聽器注冊(cè)事件addEventListener()方法可為元素添加指定的事件監(jiān)聽器。在以下示例代碼中，第1行代碼為btnTest元素注冊(cè)了click事件，即鼠標(biāo)單擊時(shí)將調(diào)用function1函數(shù)；第2行代碼為btnTest元素注冊(cè)了mousemove事件，即鼠標(biāo)移動(dòng)時(shí)將調(diào)用function2函數(shù)?？墒褂胷emoveEventListener()方法移除指定的事件監(jiān)聽器，若要移除btnTest的鼠標(biāo)單擊事件監(jiān)聽器，則示例代碼如下。

74制作“新品推薦”模塊任務(wù)2751.?能根據(jù)開發(fā)需求正確使用for循環(huán)語句。2.?能創(chuàng)建并使用數(shù)組。3.?能使用for循環(huán)語句實(shí)現(xiàn)數(shù)組的遍歷。4.?能根據(jù)不同的開發(fā)場(chǎng)景選擇合適的方法操作DOM元素內(nèi)容。76本任務(wù)的主要內(nèi)容是定義一個(gè)包含推薦水果圖片的數(shù)組（即推薦水果圖片數(shù)組），在獲取“新品推薦”圖片布局容器后，遍歷該數(shù)組并在布局容器中動(dòng)態(tài)顯示數(shù)組中的所有圖片，最終形成的“新品推薦”模塊的顯示效果如圖所示。77“新品推薦”模塊的顯示效果一、數(shù)組JavaScript的數(shù)組用于存儲(chǔ)一系列的值。本任務(wù)要求保存和讀取一系列的推薦水果圖片數(shù)據(jù)，因此可使用JavaScript數(shù)組來提高代碼開發(fā)與執(zhí)行的效率。781.數(shù)組的創(chuàng)建在JavaScript中可使用以下三種方式創(chuàng)建數(shù)組。

（1）常規(guī)方式此方式在定義一個(gè)數(shù)組變量后，通過數(shù)組下標(biāo)（即[0]～[n]）為數(shù)組設(shè)置每個(gè)位置的元素，示例代碼如下。79（2）簡(jiǎn)潔方式此方式作為常規(guī)方式的簡(jiǎn)潔寫法，在定義變量的同時(shí)，可直接設(shè)置數(shù)組元素，示例代碼如下。（3）字面量方式在JavaScript語法中，中括號(hào)“[]”表示一個(gè)數(shù)組，可直接使用中括號(hào)設(shè)置testArray變量的值，程序會(huì)自動(dòng)將該變量識(shí)別為數(shù)組，示例代碼如下。802.數(shù)組的訪問在程序中，通常使用數(shù)組下標(biāo)[n]來訪問數(shù)組中的元素（n的值從0開始）。若需要獲取testArray數(shù)組的第一個(gè)元素并將其保存在變量firstItem中，則示例代碼如下。3.數(shù)組的長(zhǎng)度數(shù)組的length屬性可以返回?cái)?shù)組的長(zhǎng)度，即一個(gè)數(shù)組中儲(chǔ)存的元素個(gè)數(shù)。若需要獲取testArray數(shù)組的長(zhǎng)度并將其保存在變量getLength中，則示例代碼如下。81二、for循環(huán)語句在JavaScript中可定義各種循環(huán)結(jié)構(gòu)，其中，for循環(huán)是最為常見且重要的一種，它可按照設(shè)定的規(guī)則自動(dòng)重復(fù)執(zhí)行指定的代碼。for循環(huán)主要包括三個(gè)部分，分別為變量初始值、條件和變量更新方式。首先，在for循環(huán)中設(shè)定一個(gè)初始值作為起點(diǎn)；然后，定義一個(gè)判斷條件來確定何時(shí)結(jié)束循環(huán)；最后，指定一個(gè)循環(huán)操作的任務(wù)。在循環(huán)執(zhí)行過程中，程序會(huì)循環(huán)檢查判斷條件，當(dāng)條件滿足時(shí)執(zhí)行循環(huán)體內(nèi)的操作；每次循環(huán)完成后，程序會(huì)自動(dòng)更新初始值并再次檢查判斷條件，以此循環(huán)往復(fù)，直到滿足終止條件時(shí)終止循環(huán)。82三、DOM元素內(nèi)容獲取推薦水果圖片數(shù)組中的所有圖片信息后，可使用JavaScript生成圖片顯示的代碼，然后動(dòng)態(tài)修改“新品推薦”圖片布局容器的內(nèi)容。HTML提供以下三個(gè)可用于修改DOM元素內(nèi)容的屬性。1.innerHTML屬性本屬性用于設(shè)置或獲取元素開始標(biāo)簽和結(jié)束標(biāo)簽之間的HTML內(nèi)容，返回結(jié)果包含HTML標(biāo)簽，并保留空格和換行。832.innerText屬性本屬性用于設(shè)置或獲取元素的文本內(nèi)容，獲取時(shí)會(huì)去除HTML標(biāo)簽和多余的空格、換行，在設(shè)置時(shí)會(huì)進(jìn)行特殊字符轉(zhuǎn)義。3.textContent屬性本屬性用于設(shè)置或獲取元素的文本內(nèi)容，并保留空格和換行。84

制作“價(jià)格計(jì)算”功能模塊任務(wù)3851.?能根據(jù)項(xiàng)目需求正確使用switch語句。2.?能根據(jù)項(xiàng)目需求定義函數(shù)并完成函數(shù)的調(diào)用與參數(shù)傳遞。3.?能根據(jù)屬性獲取DOM元素。86本任務(wù)主要內(nèi)容是獲取“+”“-”“立即購買”等按鈕元素，并為各按鈕注冊(cè)鼠標(biāo)單擊事件，使單擊“+”或“-”按鈕時(shí)可增加或減少水果數(shù)量，并自動(dòng)計(jì)算總價(jià)，顯示效果如圖所示。

87

增減水果數(shù)量并計(jì)算總價(jià)的顯示效果a）水果數(shù)量為0

b）水果數(shù)量為1

c）水果數(shù)量為7當(dāng)用戶單擊“立即購買”按鈕時(shí)，使用switch語句遍歷會(huì)員等級(jí)單選框，并調(diào)用自定義函數(shù)彈出窗口來顯示折扣的信息。若用戶為非會(huì)員，則單擊“立即購買”按鈕的彈窗顯示效果如圖所示。88非會(huì)員用戶單擊“立即購買”按鈕的彈窗顯示效果a）“立即購買”按鈕b）彈窗顯示效果若用戶為會(huì)員（VIP），則單擊“立即購買”按鈕的彈窗顯示效果如圖所示。89會(huì)員用戶單擊“立即購買”按鈕的彈窗顯示效果a）“立即購買”按鈕b）彈窗顯示效果若用戶為超級(jí)會(huì)員（SVIP），則單擊“立即購買”按鈕的彈窗顯示效果如圖所示。90超級(jí)會(huì)員用戶單擊“立即購買”按鈕的彈窗顯示效果a）“立即購買”按鈕b）彈窗顯示效果一、switch語句在“價(jià)格計(jì)算”功能模塊中，當(dāng)用戶單擊“立即購買”按鈕時(shí)，程序需要判斷該用戶選擇的會(huì)員類型（包括“否”“VIP”“SVIP”），并根據(jù)不同的會(huì)員類型計(jì)算對(duì)應(yīng)的優(yōu)惠價(jià)格，此時(shí)可以使用switch語句來實(shí)現(xiàn)該功能。9192switch語句可基于不同的條件來執(zhí)行不同的動(dòng)作，一般適用于有多個(gè)條件和選擇的情況，switch語句的語法格式如下。93switch語句的執(zhí)行流程如下。（1）將表達(dá)式的值依次與各個(gè)case值進(jìn)行比較，若匹配，則執(zhí)行該case對(duì)應(yīng)的代碼塊，在執(zhí)行的過程中，遇到break語句結(jié)束。（2）若表達(dá)式的值與所有case值都不匹配，則執(zhí)行default對(duì)應(yīng)的代碼塊。switch語句的執(zhí)行流程如圖所示。switch語句的執(zhí)行流程二、函數(shù)1.函數(shù)的語法JavaScript函數(shù)使用function關(guān)鍵詞定義，函數(shù)名可包含字母、數(shù)字、下劃線和美元符號(hào)，其命名規(guī)范與變量名相同。函數(shù)可指定不帶參數(shù)或帶多個(gè)參數(shù)，如果在定義函數(shù)時(shí)指定了參數(shù)（又稱形參）且未設(shè)置默認(rèn)值，那么在調(diào)用函數(shù)時(shí)也需要傳入對(duì)應(yīng)的參數(shù)（又稱實(shí)參）。94952.函數(shù)的調(diào)用一般情況下，函數(shù)只有在被調(diào)用時(shí)才會(huì)執(zhí)行。調(diào)用在上文中定義的showNumber()函數(shù)的示例代碼如下。3.函數(shù)的返回值在函數(shù)中，可以使用return語句將函數(shù)的運(yùn)行結(jié)果返回給調(diào)用函數(shù)的程序，返回值可以是任何類型（如空值、數(shù)組、對(duì)象或字符串等）。當(dāng)函數(shù)運(yùn)行到return語句時(shí)會(huì)立即停止，并返回到調(diào)用函數(shù)的地方繼續(xù)執(zhí)行后續(xù)代碼。測(cè)試與提交“水果促銷”頁面任務(wù)4961.?能使用多種瀏覽器對(duì)頁面進(jìn)行測(cè)試。2.?能根據(jù)項(xiàng)目需求測(cè)試頁面的各種交互功能。3.?能使用Git命令成功提交頁面代碼。97本任務(wù)的主要內(nèi)容是實(shí)現(xiàn)“水果促銷”頁面的測(cè)試和提交，先進(jìn)行網(wǎng)頁兼容性測(cè)試和各模塊測(cè)試，確認(rèn)頁面布局展示和各模塊功能均已符合項(xiàng)目需求，然后使用Git命令查看Git倉庫狀態(tài)，在本地版本庫中保存代碼后，將本地分支版本提交到遠(yuǎn)程Git倉庫中。98一、網(wǎng)頁兼容性測(cè)試為了確保網(wǎng)頁在各種瀏覽器上能良好顯示，應(yīng)進(jìn)行兼容性測(cè)試。由于不同瀏覽器采用不同的渲染引擎和技術(shù)標(biāo)準(zhǔn)，網(wǎng)頁在不同瀏覽器上的顯示效果也可能會(huì)有所差異。因此，在各種主流瀏覽器（包括Chrome、Firefox、MicrosoftEdge等）上進(jìn)行測(cè)試并確認(rèn)網(wǎng)頁顯示效果和交互功能的實(shí)現(xiàn)是一項(xiàng)非常重要的工作。99遵循標(biāo)準(zhǔn)規(guī)范，適配不同瀏覽器的特性，進(jìn)行網(wǎng)頁兼容性測(cè)試，可確保用戶能夠在主流瀏覽器上獲得一致的使用體驗(yàn)，提高用戶滿意度和網(wǎng)頁可用性。網(wǎng)頁兼容性測(cè)試內(nèi)容包括頁面布局、圖像顯示、表單輸入和功能交互等。為提升網(wǎng)頁的兼容性，在開發(fā)時(shí)需注意以下幾點(diǎn)技術(shù)要求。（1）遵循HTML和CSS的標(biāo)準(zhǔn)規(guī)范，使用正確的標(biāo)簽和屬性，確保代碼的結(jié)構(gòu)良好。（2）確保JavaScript代碼可在不同瀏覽器上正常工作。（3）確保網(wǎng)頁中的圖像、視頻和音頻在主流瀏覽器上能夠被正確顯示和播放。（4）測(cè)試網(wǎng)頁在不同瀏覽器上的異常情況處理和錯(cuò)誤提示。100二、Git倉庫代碼提交1.Git簡(jiǎn)介Git是一種分布式版本控制系統(tǒng)，常用于軟件開發(fā)過程中的版本管理。Git的優(yōu)點(diǎn)主要體現(xiàn)在以下5個(gè)方面。（1）分布式每個(gè)開發(fā)人員都可以在本地設(shè)備中擁有一套完整的代碼庫，該機(jī)制可以保證代碼的安全性和完整性。（2）高效的版本控制使用“快照”機(jī)制進(jìn)行版本管理，能夠快速進(jìn)行版本控制與回滾，也減少了對(duì)存儲(chǔ)空間的需求。101（3）分支管理支持創(chuàng)建與合并分支，使不同開發(fā)人員可在不干擾主線開發(fā)的情況下工作，大大提高了開發(fā)效率。（4）合并功能可自動(dòng)將不同分支的代碼合并到一起，以及處理大量的代碼沖突。（5）歷史記錄可記錄每一次提交的歷史，也可以在代碼出現(xiàn)問題時(shí)快速地回滾，為代碼的維護(hù)和追溯提供很大的便利。1022.Git倉庫的基本操作Git倉庫分為開發(fā)人員自身設(shè)備上的本地倉庫和服務(wù)器上的遠(yuǎn)程倉庫，以下為Git倉庫的基本操作方式。（1）克隆遠(yuǎn)程倉庫將遠(yuǎn)程倉庫克隆到本地設(shè)備上，命令如下。該命令將在當(dāng)前目錄下創(chuàng)建一個(gè)與遠(yuǎn)程倉庫名稱相同的文件夾，并將該遠(yuǎn)程倉庫的所有內(nèi)容下載到本地設(shè)備中。103（2）創(chuàng)建分支在開始修改代碼前，可先創(chuàng)建新的分支，從而將新功能的開發(fā)與主線隔離開，方便管理和合并，命令如下。該命令將創(chuàng)建一個(gè)新的分支并切換到該分支。（3）查看狀態(tài)顯示工作目錄和暫存區(qū)的狀態(tài)，命令如下。該命令可查看哪些更改已經(jīng)提交至?xí)捍鎱^(qū)，哪些尚未提交，以及Git未跟蹤哪些文件。104（4）拉取代碼取回遠(yuǎn)程主機(jī)的更新并與本地分支合并，命令如下。（5）添加修改的文件將修改的文件添加到Git的暫存區(qū)，命令如下。也可以將指定的文件添加到Git的暫存區(qū)，命令如下。105（6）提交代碼將修改的文件添加到Git的暫存區(qū)后，可將代碼提交到本地版本庫，命令如下。在提交代碼時(shí)，需要提供一段簡(jiǎn)短的提交說明，以便團(tuán)隊(duì)其他成員了解本次提交的目的與內(nèi)容。（7）推送到遠(yuǎn)程倉庫在將代碼提交到本地版本庫后，可將代碼推送到遠(yuǎn)程倉庫，命令如下。該命令可將本地分支的代碼推送到遠(yuǎn)程倉庫中。106項(xiàng)目三制作電影資訊頁面107108任務(wù)1開發(fā)“上映倒計(jì)時(shí)”功能任務(wù)2自定義視頻播放器任務(wù)3開發(fā)評(píng)論發(fā)表和刪除功能開發(fā)“上映倒計(jì)時(shí)”功能任務(wù)11091.?理解對(duì)象的概念，能夠使用不同的方法創(chuàng)建對(duì)象。2.?能正確創(chuàng)建并使用Date對(duì)象。3.?理解setTimeout(?)和setInterval(?)兩種定時(shí)器的區(qū)別和用法，能根據(jù)開發(fā)需求選擇正確的定時(shí)器。110本任務(wù)主要內(nèi)容是使用Date對(duì)象計(jì)算當(dāng)前系統(tǒng)時(shí)間距離影片上映時(shí)間的總秒數(shù)，并按照頁面顯示要求對(duì)數(shù)據(jù)進(jìn)行格式轉(zhuǎn)換，再使用setInterval()定時(shí)器每秒更新數(shù)據(jù)，實(shí)現(xiàn)“上映倒計(jì)時(shí)”功能?！吧嫌车褂?jì)時(shí)”模塊的靜態(tài)頁面顯示效果如圖所示。111“上映倒計(jì)時(shí)”模塊的靜態(tài)頁面顯示效果一、對(duì)象在JavaScript中，對(duì)象是一組無序的相關(guān)屬性和方法的集合，所有的事物都是對(duì)象，如字符串、數(shù)值、數(shù)組和函數(shù)等。對(duì)象是帶有屬性和方法的特殊數(shù)據(jù)類型，屬性指對(duì)象的特征，可以看作對(duì)象中保存的數(shù)據(jù)；方法指對(duì)象的行為，可以看作對(duì)象中保存的函數(shù)。112JavaScript中常用的創(chuàng)建對(duì)象的方式有三種，分別是利用字面量創(chuàng)建對(duì)象、利用構(gòu)造函數(shù)創(chuàng)建對(duì)象和利用Object()函數(shù)創(chuàng)建對(duì)象。1.利用字面量創(chuàng)建對(duì)象利用字面量創(chuàng)建對(duì)象的語法格式如下。在上述語法格式中，nameN表示對(duì)象成員的名稱，valueN表示對(duì)象成員的值，多個(gè)對(duì)象成員之間用“,”隔開。113在完成對(duì)象的創(chuàng)建后，可以使用以下幾種方式獲取對(duì)象的屬性。（1）使用點(diǎn)操作符“.”來獲取對(duì)象的屬性，具體示例代碼如下。（2）使用方括號(hào)操作符“[]”來獲取對(duì)象的屬性，具體示例代碼如下。當(dāng)對(duì)象不需要成員時(shí)，可以聲明一個(gè)空對(duì)象。創(chuàng)建一個(gè)空對(duì)象的示例代碼如下。1142.利用構(gòu)造函數(shù)創(chuàng)建對(duì)象在JavaScript中，使用new關(guān)鍵字來調(diào)用的函數(shù)被稱為構(gòu)造函數(shù)。構(gòu)造函數(shù)可以將一些具有相同特征（屬性）和行為（方法）的對(duì)象封裝起來，提高代碼的利用率，便于后期代碼的優(yōu)化和維護(hù)。定義構(gòu)造函數(shù)的語法格式如下。115定義構(gòu)造函數(shù)后，使用構(gòu)造函數(shù)創(chuàng)建對(duì)象的語法格式如下。3.利用Object()函數(shù)創(chuàng)建對(duì)象在JavaScript中，對(duì)象的構(gòu)造函數(shù)為Object()，使用Object()創(chuàng)建對(duì)象的語法格式如下。116二、Date對(duì)象Date對(duì)象又稱日期對(duì)象，用于處理日期和時(shí)間。1.Date對(duì)象的創(chuàng)建直接使用Date()構(gòu)造函數(shù)創(chuàng)建Date對(duì)象的語法格式如下。在上述代碼中，當(dāng)構(gòu)造函數(shù)不傳入?yún)?shù)時(shí)，表示使用系統(tǒng)的當(dāng)前時(shí)間；當(dāng)傳入的參數(shù)是一個(gè)整數(shù)值時(shí)，表示自1970年1月1日00:00:00以來的毫秒數(shù)，即時(shí)間戳。當(dāng)傳入的參數(shù)是表示

日期的字符串時(shí)，最少需要指定年份；當(dāng)傳入的參數(shù)是以數(shù)字表示的年（y）、月（m）、日（d）、時(shí)（h）、分（m）、秒（s）時(shí)，最少需要指定年、月兩個(gè)參數(shù)。117不同參數(shù)的示例代碼如下。1182.Date對(duì)象的使用創(chuàng)建Date對(duì)象后，可以通過調(diào)用Date對(duì)象的相關(guān)方法實(shí)現(xiàn)日期、時(shí)間的格式顯示。Date對(duì)象的常用方法有獲取日期和時(shí)間、設(shè)置日期和時(shí)間、格式化日期等，見下表。119Date對(duì)象的常用方法

設(shè)置日期和時(shí)間的方法與獲取日期和時(shí)間的基本一致，只是將get改為set。注意：沒有setDay()這種方法，因?yàn)樾瞧诓恍枰孕性O(shè)置，系統(tǒng)會(huì)根據(jù)設(shè)置的日期自主判斷。120Date對(duì)象的常用方法

三、定時(shí)器window對(duì)象提供了以下兩種方法來實(shí)現(xiàn)定時(shí)器的效果。（1）setTimeout()：在指定時(shí)間后執(zhí)行代碼（延遲執(zhí)行）。（2）setInterval()：每隔一段時(shí)間執(zhí)行代碼（間隔執(zhí)行）。1211.setTimeout()定時(shí)器setTimeout()方法用于設(shè)置一個(gè)定時(shí)器，該定時(shí)器在其到期后執(zhí)行調(diào)用函數(shù)，語法格式如下。在上述代碼中，需要注意以下幾點(diǎn)。（1）“window”可以省略。（2）調(diào)用函數(shù)時(shí)可以直接寫函數(shù)、函數(shù)名，以及字符串“函數(shù)名()”三種形式。（3）延遲的毫秒數(shù)的默認(rèn)值是0，可省略。1222.setInterval()定時(shí)器setInterval()方法用于重復(fù)調(diào)用一個(gè)函數(shù)，每隔指定的時(shí)間，調(diào)用一次函數(shù)，語法格式如下。3.清除定時(shí)器setTimeout()和setInterval()方法的返回值為定時(shí)器id（定時(shí)器的唯一標(biāo)識(shí)），將定時(shí)器id作為參數(shù)傳給clearTimeout()或clearInterval()方法可以清除定時(shí)器。定時(shí)器一旦被清除，則不再被執(zhí)行。123自定義視頻播放器任務(wù)21241.?能使用video對(duì)象的屬性和方法，完成視頻播放器常見功能的開發(fā)。2.?能正確獲取元素的大小和鼠標(biāo)指針位置。125本任務(wù)主要內(nèi)容是使用CSS樣式自定義視頻播放器的樣式，實(shí)現(xiàn)視頻播放器的常見功能，包括視頻播放和暫停、靜音和取消靜音、全屏展示和退出全屏、顯示視頻播放總時(shí)長(zhǎng)，以及更新視頻播放時(shí)間等。該視頻播放器的CSS樣式顯示效果如圖所示。126視頻播放器的CSS樣式顯示效果一、video對(duì)象video對(duì)象是HTML5中新增的對(duì)象，用于在HTML頁面中嵌入視頻元素。video對(duì)象常用的屬性見下表。127video對(duì)象常用的屬性

128video對(duì)象常用的屬性

video對(duì)象常用的方法見下表。129video對(duì)象常用的方法二、元素的獲取操作1.獲取元素的大小在JavaScript中，可以通過下表中的方法獲取元素的大?。ǔ叽纾?。130

獲取元素大?。ǔ叽纾┑姆椒?.獲取鼠標(biāo)指針的位置通過事件對(duì)象的鼠標(biāo)位置屬性可以獲取鼠標(biāo)指針的位置信息。常用的獲取鼠標(biāo)指針位置的方法見下表。131常用的獲取鼠標(biāo)指針位置的方法

開發(fā)評(píng)論發(fā)表和刪除功能任務(wù)31321.?理解節(jié)點(diǎn)的屬性和層級(jí)關(guān)系。2.?能正確操作節(jié)點(diǎn)的獲取、創(chuàng)建、添加和移除。3.?能正確操作textarea文本框的文本內(nèi)容。133本任務(wù)的主要內(nèi)容是通過節(jié)點(diǎn)的添加和移除操作，實(shí)現(xiàn)評(píng)論的發(fā)表和刪除功能。用戶可以在“發(fā)表短評(píng)”欄目輸入評(píng)論，由程序同步更新輸入文字的個(gè)數(shù)。若用戶輸入的評(píng)論字?jǐn)?shù)超過200字，則彈窗提示“輸入字?jǐn)?shù)已達(dá)上限”；若用戶輸入的評(píng)論為空，則彈窗提示“請(qǐng)輸入評(píng)論”?！鞍l(fā)表短評(píng)”欄目的初始效果如圖所示。134“發(fā)表短評(píng)”欄目的初始效果用戶在輸入評(píng)論后，單擊“我要寫短評(píng)”按鈕，該條評(píng)論就會(huì)顯示在“電影短評(píng)”欄目中評(píng)論列表的最下方。若用戶要?jiǎng)h除某條評(píng)論，則單擊該條評(píng)論右上角的刪除按鈕即可?！半娪岸淘u(píng)”欄目的初始效果如圖所示。135“電影短評(píng)”欄目的初始效果一、節(jié)點(diǎn)的獲取只有清晰地知道節(jié)點(diǎn)之間的層次關(guān)系，才能正確地使用節(jié)點(diǎn)的層次關(guān)系來獲取節(jié)點(diǎn)。在JavaScript中常用的節(jié)點(diǎn)的層次關(guān)系獲取方法見下表。136常用的節(jié)點(diǎn)的層次關(guān)系獲取方法二、節(jié)點(diǎn)的創(chuàng)建在實(shí)際開發(fā)過程中，創(chuàng)建元素節(jié)點(diǎn)的方法使用頻繁，其語法格式如下。注意，通過createElement()方法創(chuàng)建的元素并不屬于document對(duì)象，它只是被創(chuàng)建出來，并未被添加到HTML文檔中，需要調(diào)用特定的方法才能將其添加到HTML文檔中。137三、節(jié)點(diǎn)的添加成功創(chuàng)建節(jié)點(diǎn)后，一般都需要根據(jù)開發(fā)需求將節(jié)點(diǎn)添加到HTML文檔的指定位置。DOM提供了常用的添加節(jié)點(diǎn)的方法，見下表。138

常用的添加節(jié)點(diǎn)的方法四、節(jié)點(diǎn)的移除removeChild()方法用于刪除指定的子節(jié)點(diǎn)并返回子節(jié)點(diǎn)，語法格式如下。以上方法應(yīng)由被刪節(jié)點(diǎn)的父節(jié)點(diǎn)調(diào)用，刪除的是父節(jié)點(diǎn)里面的子節(jié)點(diǎn)。remove()方法用于刪除HTML元素，包括元素的子節(jié)點(diǎn)和屬性，語法格式如下。上述代碼表示刪除element元素，注意該方法沒有參數(shù)。139項(xiàng)目四制作政務(wù)平臺(tái)系統(tǒng)首頁140141任務(wù)1制作“通知公告”模塊任務(wù)2制作“熱點(diǎn)關(guān)注”模塊任務(wù)3制作“歡迎登錄”頁面制作“通知公告”模塊任務(wù)11421.?理解forEach語句與for...in語句的區(qū)別。2.?掌握forEach語句的語法，能使用forEach語句實(shí)現(xiàn)數(shù)組遍歷。3.?掌握for...in語句的語法，能使用for...in語句實(shí)現(xiàn)對(duì)象遍歷。143本任務(wù)的內(nèi)容主要是使用對(duì)象數(shù)組儲(chǔ)存從后端請(qǐng)求獲取的模擬新聞數(shù)據(jù)，再利用forEach語句和for...in語句循環(huán)數(shù)組，將得出的數(shù)據(jù)寫入到“通知公告”模塊的內(nèi)容列表中，實(shí)現(xiàn)動(dòng)態(tài)渲染頁面的效果，方便后期網(wǎng)站管理員動(dòng)態(tài)更新新聞消息。144一、forEach語句forEach語句是for語句的一種特殊簡(jiǎn)化版本，一般用于遍歷數(shù)組，具體語法格式如下。在上述語法格式中，array代表需要遍歷的數(shù)組。forEach()方法會(huì)對(duì)array數(shù)組的每個(gè)元素執(zhí)行一次提供的函數(shù)，因此forEach()方法遍歷數(shù)組循環(huán)的次數(shù)等于該數(shù)組的長(zhǎng)度。145forEach()方法調(diào)用的函數(shù)function中有3個(gè)參數(shù)，第一個(gè)參數(shù)item是必需項(xiàng)，表示遍歷的當(dāng)前元素；第二個(gè)參數(shù)是可選項(xiàng)，表示當(dāng)前元素的索引值；第三個(gè)參數(shù)是可選項(xiàng)，表示當(dāng)前元素所屬的數(shù)組對(duì)象。forEach()方法是不會(huì)對(duì)空數(shù)組執(zhí)行回調(diào)

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

最新文檔

評(píng)論

0/150

提交評(píng)論