《Web前端開發(fā)（JavaScript）》技工中職全套教學課件_第1頁
《Web前端開發(fā)（JavaScript）》技工中職全套教學課件_第2頁
《Web前端開發(fā)（JavaScript）》技工中職全套教學課件_第3頁
《Web前端開發(fā)（JavaScript）》技工中職全套教學課件_第4頁
《Web前端開發(fā)（JavaScript）》技工中職全套教學課件_第5頁
已閱讀5頁，還剩335頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

Web前端開發(fā)（JavaScript）1全套可編輯PPT課件

2項目一制作“開學迎新”網(wǎng)站項目二制作“水果促銷”頁面項目三制作電影資訊頁面項目四制作政務平臺系統(tǒng)首頁項目五制作“2048”小游戲

項目六使用Vue框架開發(fā)企業(yè)門戶網(wǎng)站項目七使用Vue框架開發(fā)電商網(wǎng)站項目一制作“開學迎新”網(wǎng)站34任務1制作“歡迎”頁面任務2制作“個人信息”頁面任務3制作“答題小游戲”頁面制作“歡迎”頁面

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

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

文檔對象模型（DocumentObjectModel，DOM）：

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

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

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

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

和

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

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

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

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

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

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

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

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

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

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

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

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

89

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

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

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

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

設置日期和時間的方法與獲取日期和時間的基本一致，只是將get改為set。注意：沒有setDay()這種方法，因為星期不需要自行設置，系統(tǒng)會根據(jù)設置的日期自主判斷。122Date對象的常用方法

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

130video對象常用的屬性

video對象常用的方法見下表。131video對象常用的方法二、元素的獲取操作1.獲取元素的大小在JavaScript中，可以通過下表中的方法獲取元素的大小（尺寸）。132

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

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

常用的添加節(jié)點的方法四、節(jié)點的移除removeChild()方法用于刪除指定的子節(jié)點并返回子節(jié)點，語法格式如下。以上方法應由被刪節(jié)點的父節(jié)點調用，刪除的是父節(jié)點里面的子節(jié)點。remove()方法用于刪除HTML元素，包括元素的子節(jié)點和屬性，語法格式如下。上述代碼表示刪除element元素，注意該方法沒有參數(shù)。141項目四制作政務平臺系統(tǒng)首頁142143任務1制作“通知公告”模塊任務2制作“熱點關注”模塊任務3制作“歡迎登錄”頁面制作“通知公告”模塊任務11441.?理解forEach語句與for...in語句的區(qū)別。2.?掌握forEach語句的語法，能使用forEach語句實現(xiàn)數(shù)組遍歷。3.?掌握for...in語句的語法，能使用for...in語句實現(xiàn)對象遍歷。145本任務的內容主要是使用對象數(shù)組儲存從后端請求獲取的模擬新聞數(shù)據(jù)，再利用forEach語句和for...in語句循環(huán)數(shù)組，將得出的數(shù)據(jù)寫入到“通知公告”模塊的內容列表中，實現(xiàn)動態(tài)渲染頁面的效果，方便后期網(wǎng)站管理員動態(tài)更新新聞消息。146一、forEach語句forEach語句是for語句的一種特殊簡化版本，一般用于遍歷數(shù)組，具體語法格式如下。在上述語法格式中，array代表需要遍歷的數(shù)組。forEach()方法會對array數(shù)組的每個元素執(zhí)行一次提供的函數(shù)，因此forEach()方法遍歷數(shù)組循環(huán)的次數(shù)等于該數(shù)組的長度。147forEach()方法調用的函數(shù)function中有3個參數(shù)，第一個參數(shù)item是必需項，表示遍歷的當前元素；第二個參數(shù)是可選項，表示當前元素的索引值；第三個參數(shù)是可選項，表示當前元素所屬的數(shù)組對象。forEach()方法是不會對空數(shù)組執(zhí)行回調函數(shù)的。148forEach語句與for語句雖然同樣可用于遍歷數(shù)組，但在實際應用中有如下區(qū)別。（1）for循環(huán)可以使用break跳出循環(huán)，但forEach語句不能。（2）for循環(huán)可以控制循環(huán)起點，forEach語句的索引只能默認從0開始。（3）for循環(huán)支持在過程中修改索引，而forEach語句不支持（因為底層控制index自增，無法通過程序改變它）。149二、for...in語句for...in語句是一種特殊類型的循環(huán)，一般用于循環(huán)遍歷對象的屬性，語法格式如下。在上述語法格式中，key是遍歷對象的屬性名稱，object是要遍歷的對象。150【例4-1-2】已定義一個人物對象person，其包含name、sex和age共3個屬性，要求遍歷該對象并將其所有屬性和對應的屬性值打印到控制臺中。參考代碼如下。151運行結果如圖所示。152運行結果

制作“熱點關注”模塊任務21531.?掌握操作元素屬性的方法。2.?能根據(jù)開發(fā)需求選擇合適的方法操作元素屬性。154本任務主要內容是實現(xiàn)Tab欄切換，在有限的網(wǎng)頁空間內展示多塊內容，用戶可以通過單擊標題欄選項卡在多個內容列表之間進行切換。網(wǎng)頁默認顯示“熱點關注”選項卡，以及相應的內容板塊，Tab欄效果如圖所示。155Tab欄效果當用戶單擊“國家時事”選項卡后，該選項卡的樣式會被切換成被選中的狀態(tài)，并且“熱點關注”選項卡的被選中狀態(tài)失效，內容列表也隨之切換為對應的板塊。此時，Tab欄效果如圖所示。同理，在單擊“廣北要聞”選項卡后，選項卡與內容列表的切換效果與單擊“熱點關注”選項卡和“國家時事”選項卡類似。156Tab欄效果一、setAttribute()方法setAttribute()方法用于設置指定元素的屬性值，語法格式如下。在以上代碼中，setAttribute()方法接受兩個參數(shù)，第一個參數(shù)name是要設置的屬性名稱，第二個參數(shù)value是屬性的值。通過調用setAttribute()方法，可以在JavaScript中動態(tài)地設置元素的屬性值，從而實現(xiàn)對元素的樣式、標識或行為的修改。通過setAttribute()方法設置的屬性值會覆蓋原有屬性值，如果該屬性不存在，則會創(chuàng)建該屬性。157二、getAttribute()方法getAttribute()方法用于獲取元素的屬性值，如果屬性值存在，返回對應的值；如果屬性值不存在，返回null。getAttribute()方法的語法格式如下。三、removeAttribute()方法removeAttribute()方法用于移除元素的屬性值，該方法沒有返回值，語法格式如下。158

制作“歡迎登錄”頁面任務31591.?掌握表單的常用屬性。2.?掌握表單兩種提交方法之間的區(qū)別。3.?能根據(jù)需求正確提交表單。160本任務主要內容是注冊表單的onsubmit事件來完成用戶驗證登錄功能。若用戶輸入的用戶名與密碼不符合要求，提示用戶數(shù)據(jù)錯誤，并阻止表單的自動提交；若用戶輸入的用戶名與密碼符合要求，則調用表單submit()方法將表單數(shù)據(jù)提交到網(wǎng)址鏈接，并實現(xiàn)頁面跳轉。161一、表單的常用屬性表單（<form>）是網(wǎng)站開發(fā)的重要組成部分，它可以收集用戶提交的信息。表單的作用是收集各種不同類型用戶輸入的各種數(shù)據(jù)信息，并通過標簽提交操作，把收集到的信息發(fā)送至Web服務器進行處理。表單的常用屬性見下表。162

表單的常用屬性二、表單的提交方法表單的兩種提交方法get和post的區(qū)別如下。1.get方法在使用此方法時，表單數(shù)據(jù)會被附加在URL的查詢參數(shù)中，通過get請求發(fā)送給服務器。這種方式適用于對數(shù)據(jù)安全性要求不高、數(shù)據(jù)量較小的情況，如搜索表單。2.post方法在使用此方法時，表單數(shù)據(jù)會作為請求的內容體被發(fā)送給服務器，這種方式適用于傳輸敏感數(shù)據(jù)或數(shù)據(jù)量較大的情況，如用戶注冊或登錄表單。163三、表單的提交和重置表單還提供了提交和重置的方法，具體說明見下表。在使用submit()方法的過程中，需要注意以下兩點。（1）必須確保提交的表單在當前頁面中存在。（2）必須確保表單的action屬性指定了正確的URL。164

表單提交和重置的方法項目五制作“2048”小游戲165166任務1開發(fā)游戲界面布局

任務2開發(fā)游戲邏輯任務3開發(fā)游戲交互開發(fā)游戲界面布局任務11671.?能定義并使用CSS變量。2.?能根據(jù)UI效果圖編寫布局和樣式代碼。168本任務主要內容是使用HTML、CSS技術根據(jù)UI效果圖樣式創(chuàng)建布局文件和樣式文件，并編寫相應的代碼，實現(xiàn)游戲場景的靜態(tài)布局效果，為后續(xù)JavaScript動態(tài)交互開發(fā)打下基礎。169一、變量的定義在CSS代碼中可定義變量，并為其分配相應的值，示例代碼如下。上述代碼定義了兩個變量，--primary-color和

--font-size，并分別指定了對應的值。170二、變量的使用在樣式代碼中使用var()函數(shù)可引用變量，示例代碼如下。上述代碼將變量--primary-color和--font-size應用于.button元素的背景顏色和字號大小。171三、變量的修改可以使用CSS的:root偽類或:var()偽類修改變量的值，示例代碼如下。上述代碼使用:root偽類將變量

--primary-color的值從#007bff更改為#ff3b3b。172四、變量的繼承使用inherit關鍵字可將變量繼承到子元素中，示例代碼如下。在上述代碼中，.child元素從其父元素.parent中繼承font-size變量的值。173

開發(fā)游戲邏輯任務21741.?能根據(jù)需求定義變量。2.?能定義初始化項目函數(shù)。3.?能隨機生成游戲初始狀態(tài)。175本任務主要內容是使用JavaScript定義游戲相關變量，定義初始化游戲函數(shù)，并調用初始化游戲函數(shù)生成游戲初始狀態(tài)。176在使用CSS選擇器引擎的querySelectorAll()方法時，可獲取與其參數(shù)匹配的DOM元素。querySelectorAll()方法是querySelector()方法的增強版本，可以接受一個或多個CSS選擇器作為參數(shù)，并返回與這些選擇器匹配的所有元素，示例代碼如下。在上述代碼中，querySelectorAll()方法根據(jù).class-name選擇器獲取所有匹配的DOM元素，返回一個NodeList對象，并將其存儲在elements變量中。177如果需要將NodeList對象轉換為普通數(shù)組，可以使用Array.from()方法，示例代碼如下。NodeList對象與普通數(shù)組有所不同，兩者的差異主要體現(xiàn)在以下幾個方面。（1）構造方法不同。NodeList對象是通過querySelectorAll()方法返回的，而普通數(shù)組是通過Array()構造函數(shù)創(chuàng)建的。178（2）元素存儲方式不同。NodeList對象存儲的是一個DOM節(jié)點列表，而普通數(shù)組存儲的是一個數(shù)字或其他類型對象的列表。（3）方法不同。NodeList對象和普通數(shù)組都有一些常用的方法，如push()、pop()、shift()等，但NodeList對象還具有一些與DOM節(jié)點操作相關的方法，如item()、append()、remove()等。（4）可伸縮性不同。NodeList對象的大小可以動態(tài)改變，而普通數(shù)組的大小是固定不變的。179開發(fā)游戲交互任務31801.?熟練使用switch分支語句。2.?能監(jiān)聽用戶的鍵盤輸入事件。181本任務主要內容是監(jiān)聽用戶的鍵盤輸入事件，并使用switch語句根據(jù)用戶按下的鍵調用相應的處理函數(shù)。182一、鍵盤事件的類型JavaScript鍵盤事件主要分為以下三類。（1）keydown：表示用戶按下按鍵時觸發(fā)的事件。（2）keypress：表示用戶按下鍵盤上的某個鍵并產(chǎn)生一個字符時觸發(fā)的事件。注意，某些特殊鍵（如方向鍵、功能鍵等）可能不會觸發(fā)此事件。（3）keyup：表示用戶按下鍵盤上的某個鍵而后松開時觸發(fā)的事件。183二、鍵盤事件的監(jiān)聽當用戶按下鍵盤上的某個鍵時，window.onkeydown函數(shù)會被觸發(fā)，這個函數(shù)可以執(zhí)行需要的操作，示例代碼如下。上述代碼通過event.keyCode獲取到按下的鍵的鍵碼，并將其保存到變量keyCode中，然后判斷keyCode的值，若其值為13（表示Enter鍵的鍵碼），則彈窗顯示“您按下了Enter鍵！”。184三、按鍵信息的獲取獲取按鍵信息可以通過event.key和event.keyCode兩種方法實現(xiàn)，兩者都表示鍵盤事件的屬性，其不同之處為：event.key描述的是按鍵的文本表示，如字母、數(shù)字、功能鍵等；而event.keyCode描述的是按鍵的鍵碼，如Enter鍵的鍵碼為13，空格鍵的鍵碼為32，以此類推。常用按鍵的keyCode與key對應表見下表。185186常用按鍵的keyCode與key對應表項目六使用Vue框架開發(fā)企業(yè)門戶網(wǎng)站187188任務1搭建Vue開發(fā)環(huán)境任務2創(chuàng)建企業(yè)門戶項目任務3定義與使用Vue組件任務4開發(fā)首頁頁面任務5開發(fā)“產(chǎn)品介紹”頁面任務6開發(fā)“聯(lián)系我們”頁面搭建Vue開發(fā)環(huán)境任務11891.?了解前端框架的概念。2.?了解Vue框架的特點。3.?了解MVVM軟件架構設計模式。4.?能使用Vue?CLI工具創(chuàng)建Vue項目。190本任務的內容主要是安裝和配置Vue框架開發(fā)和運行所需的Node.js環(huán)境，安裝VueCLI工具，為后期創(chuàng)建Vue項目做好準備。191一、前端框架1.前端框架的特點前端框架是一種為了簡化和加速前端開發(fā)而創(chuàng)建的工具、庫和軟件系統(tǒng)。它提供了一套結構、規(guī)范和工具，用于組織、管理和展示UI元素，并協(xié)助開發(fā)人員構建交互性高、可維護且具有良好用戶體驗的網(wǎng)頁或應用程序。192前端框架主要包含以下組成部分。（1）模板引擎（TemplateEngine）模板引擎用于定義和渲染UI的布局和內容，它可以將數(shù)據(jù)動態(tài)地綁定到界面上，實現(xiàn)數(shù)據(jù)與視圖的同步更新。（2）組件系統(tǒng)（ComponentSystem）組件系統(tǒng)提供了一種組織、復用和分割UI的方法。將界面拆分成獨立的組件，可以更好地管理代碼，提高代碼的可維護性和重用性。組件系統(tǒng)包括路由管理（RoutingManagement）、狀態(tài)管理（StateManagement）、構建工具（BuildTools）和響應式設計（ResponsiveDesign）。1932.前端框架的種類（1）Vue框架Vue（發(fā)音為/vju:/）框架是一款用于構建UI的JavaScript框架。它基于標準HTML、CSS和JavaScript構建，并提供了一套聲明式的、組件化的編程模型，能幫助開發(fā)人員高效地開發(fā)UI。無論是構建簡單還是復雜的界面，Vue框架都可以勝任。Vue框架的官方網(wǎng)站為/，Vue框架的圖標如圖所示。194Vue框架的圖標（2）React框架React框架是用于構建UI的JavaScript庫，其核心理念是將UI分解成一系列可復用的組件，每個組件負責渲染頁面上的某一部分，且各個組件可以獨立更新而不影響其他部分。這種模塊化的結構使代碼更易于理解和維護。React框架使用JSX（一種JavaScript的語法擴展）來編寫組件，允許在同一個文件中混合HTML標簽和JavaScript代碼，從而用更直觀的方式來描述頁面布局及其行為。React框架的官方網(wǎng)站為https://react.dev/，其圖標如圖所示。195React框架的圖標（3）AngularJS框架AngularJS框架誕生于2009年，由MiskoHevery等人創(chuàng)建，是一款構建UI的前端框架，后為谷歌（Google）公司所收購。AngularJS框架是一個應用設計框架與開發(fā)的平臺，用于創(chuàng)建高效、復雜、精致的單頁面應用，通過新的屬性和表達式擴展HTML，實現(xiàn)一套框架適用于多種平臺、移動端和桌面端。AngularJS框架有著諸多特性，其中，最為核心的是MVVM、模塊化、自動化雙向數(shù)據(jù)綁定、語義化標簽、依賴注入等。Angular框架的圖標如圖所示。196Angular框架的圖標二、MVVM架構設計模式MVVM（Model-View-ViewModel）是一種軟件架構設計模式，也是一種簡化UI的事件驅動編程方式。其中，Model為數(shù)據(jù)層，是各種業(yè)務邏輯處理和數(shù)據(jù)操控的部分，包含POJO結構；View為視圖層，指前端UI，主要由HTML和CSS構成；ViewModel

為視圖數(shù)據(jù)層，是數(shù)據(jù)層與視圖層的橋梁，實現(xiàn)了數(shù)據(jù)與視圖的分離。197在MVVM架構設計模式下，Model和View之間沒有直接的聯(lián)系，而是通過ViewModel進行交互，View數(shù)據(jù)的變化會同步到ViewModel上，ViewModel對數(shù)據(jù)的操作也會立即反映到View上。ViewModel發(fā)起異步請求通知Model對數(shù)據(jù)進行處理，Model就將數(shù)據(jù)的處理結果回傳給ViewModel。MVVM模式的結構如圖所示。198MVVM模式的結構創(chuàng)建企業(yè)門戶項目任務21991.?了解單文件組件的特點。2.?了解Vue項目目錄結構。3.?能創(chuàng)建自定義頁面。4.?能配置自定義路由。200本任務主要內容是使用VueCLI工具創(chuàng)建項目，并使用npm命令啟動該項目，按項目UI設計效果圖的要求創(chuàng)建項目所需頁面，并配置對應的路由。201一、VueRouter的核心概念和功能VueRouter是Vue.js官方提供的路由器，用于在Vue應用中實現(xiàn)單頁面應用（SinglePageApplication，SPA）的路由功能，它允許開發(fā)人員通過定義路由規(guī)則和組件映射來管理不同URL路徑的渲染。VueRouter具有以下核心概念和功能。2021.路由器的實例創(chuàng)建一個VueRouter實例可初始化路由器。路由器實例可以與Vue根實例進行關聯(lián)，并作為Vue應用的插件使用。2.路由的規(guī)則路由規(guī)則由路徑和對應的組件組成，使用路由規(guī)則可定義URL路徑與組件之間的關系。2033.路由的視圖在Vue組件中定義路由視圖的區(qū)域，可渲染與當前URL路徑匹配的組件，可使用標簽來展示匹配到的組件。4.路由的導航通過路由鏈接或編程式導航，可以在應用程序中的不同頁面之間進行導航?？梢允褂脴撕瀯?chuàng)建帶有路由鏈接的導航菜單，也可以使用編程式導航函數(shù)進行導航。2045.路由的參數(shù)在路由規(guī)則中定義動態(tài)參數(shù)，可以根據(jù)不同參數(shù)的值加載相應的組件。參數(shù)可以通過路由URL的占位符來進行定義，其中“:id”為動態(tài)參數(shù)。6.路由的嵌套創(chuàng)建嵌套的路由結構，可在父級路由組件內部定義子級路由規(guī)則和視圖，這種方式可以實現(xiàn)更復雜的應用程序導航和頁面結構。205二、VueRouter的模式VueRouter在創(chuàng)建路由器實例時，有Hash（音譯為哈希）模式和歷史模式兩種模式。1.Hash模式在Hash模式下，URL看起來類似于“/#/route”，其中，哈希標記“#”后面的部分被視為路由器的狀態(tài)，“#/route”部分被稱為哈希路徑。瀏覽器不會將哈希路徑發(fā)送到服務器，因此可以在前端應用中進行路由狀態(tài)管理，而不會引起頁面刷新。它適用于單頁面應用程序、需要兼容性和簡單部署的場景。然而，它的URL友好性和對搜索引擎優(yōu)化（SearchEngineOptimization，SEO）的影響在正式使用時是需要被考慮的，并且它無法直接定位到頁面的特定狀態(tài)。2062.歷史模式在歷史模式下，URL中不包含“#”符號。該模式使用瀏覽器的HistoryAPI來管理路由狀態(tài)，這意味著URL看起來更加友好和清晰，類似于常規(guī)網(wǎng)站的URL結構，支持SEO和服務端渲染。在使用歷史模式時，需要服務器配置來正確處理針對路由的請求，以便在服務器端正確地重定向到相應的頁面。207三、單文件組件Vue組件是Vue.js框架中的核心概念之一，它允許將頁面拆分成各個獨立的、可復用的模塊，每個模塊都有自己的模板、樣式和邏輯。Vue組件由三部分組成，分別為模板（Template）、腳本（Script）和樣式（Style）。單文件組件（SingleFileComponent，SFC）

是Vue.js框架中的一種組織和編寫Vue組件的方式，它將模板、腳本和樣式組合在一個單獨的文件中，以提高組件的可讀性和可維護性。2081.模板模板定義組件的結構和布局，是HTML5中的一個元素，用于在文檔中定義可復用的HTML模板。2.腳本腳本定義組件的行為和邏輯，用于組件的數(shù)據(jù)、計算屬性、方法等的定義，以及與組件相關的任何邏輯的定義。2093.樣式樣式定義組件的外觀。可以在單文件組件中封裝和管理組件的樣式，使樣式與組件的結構和行為緊密相連，提高組件的可維護性和可復用性。除了直接編寫CSS規(guī)則，還可以使用預處理器進行樣式的編寫，并在單文件組件中引用預處理器中的語法和功能。<style>標簽中的樣式默認為全局樣式，可以使用scoped屬性來限定該樣式僅作用于當前組件的模板部分，這個特性被稱為樣式作用域。210四、Vue項目資源文件目錄在Vue.js項目中，“as

溫馨提示

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

評論

0/150

提交評論