JavaScript前端開發(fā)模塊化教程-全套課件

任務(wù)1搭建JavaScript開發(fā)環(huán)境JavaScript前端開發(fā)模塊化教程1任務(wù)一搭建javascript開發(fā)環(huán)境.pptx2任務(wù)二斑馬線表格制作.pptx3任務(wù)三彈出消息框.pptx4任務(wù)四圖片縮放特效.pptx5任務(wù)五網(wǎng)頁換膚.pptx6任務(wù)六下拉廣告.pptx7任務(wù)七輪播圖.pptx8任務(wù)八滾動公告.pptx9任務(wù)九貸款計算器.pptx10任務(wù)十計算器.pptx11任務(wù)十一投票.pptx12任務(wù)十二折疊面板.pptx13任務(wù)十三銀行客服電話查詢.pptx14任務(wù)1十四省市區(qū)聯(lián)動菜單.pptx15任務(wù)十五滾動監(jiān)聽.pptx16任務(wù)十六視頻播放器.pptx17任務(wù)十七刮刮樂.pptx18任務(wù)十八微信運動步數(shù)統(tǒng)計圖.pptx19任務(wù)十九相冊.pptx20任務(wù)二十選項卡.pptx21任務(wù)二十一JavaScript抽獎器.pptx22任務(wù)二十二座位預(yù)定程序.pptx23任務(wù)二十三注冊表單驗證.pptx任務(wù)導(dǎo)入contents目錄成果目標(biāo)核心知識任務(wù)實施強化訓(xùn)練學(xué)習(xí)成果評量PART1任務(wù)導(dǎo)入要想成為Web開發(fā)工程師，掌握JavaScript必不可少。正式開始學(xué)習(xí)JavaScript前端開發(fā)之前，需要先配置JavaScript編輯器和Web瀏覽器，其中JavaScript編輯器用于編寫HTML、CSS和JavaScript前端代碼，Web瀏覽器用于Web應(yīng)用的開發(fā)測試。本任務(wù)您將學(xué)會如何配置JavaScript前端編碼和測試環(huán)境，并體驗鼠標(biāo)mouseover、mouseout事件時表格行背景變色效果開發(fā)，從此開啟您的前端征程。任務(wù)導(dǎo)入PART2成果目標(biāo)知識目標(biāo)技能目標(biāo)素質(zhì)目標(biāo)知識目標(biāo)技能目標(biāo)素質(zhì)目標(biāo)了解JavaScript發(fā)展歷程；了解Web頁面渲染過程；了解VisualStudioCode；理解EMMET語法；理清DOM對象選取模式；理解addEventListener參數(shù)。安裝和配置VisualStudioCode；使用Chrome開發(fā)者工具；安裝與配置http-server；前端頁面開發(fā)流程；合理確定JavaScript在HTML文檔中的位置；善用addEventListener；善用style對象操作樣式。能梳理JavaScript演進；感受前端開發(fā)過程；培養(yǎng)前端開發(fā)的思維習(xí)慣。成果目標(biāo)PART3核心知識1.3.1JavaScript演進1.3.2JavaScript介紹1.3.3Web頁面渲染過程1.3.4VisualStudioCode介紹1.3.5VisualStudioCode快捷鍵1.3.6EMMET語法1.3.7Node.js介紹1.3.8http-server介紹1.3.9在HTML中使用JavaScript1.3.10高性能JavaScript1.3.11JavaScript執(zhí)行順序1.3.12腳本位置1.3.13組織腳本1.3.14無阻塞腳本1.3.15選取DOM對象1.3.16addEventListener1.3.17讀寫HTMLDOMstyle對象屬性1.3.18cssTextPART4任務(wù)實施1.4.1安裝和配置VisualStudioCode1.4.2安裝常用擴展

1.4.3Chrome瀏覽器

1.4.4Chrome開發(fā)者工具

1.4.5安裝Node.js1.4.6安裝與配置http-server1.4.7編寫HTML和CSS1.4.9測試頁面PART5強化訓(xùn)練結(jié)合本任務(wù)實施過程，重置本地環(huán)境，重新搭建JavaScript前端編碼和測試環(huán)境，將Web站點根目錄設(shè)置為”d:/wwwroot”，編寫一個鼠標(biāo)懸停圖片透明度變化的頁面，具體要求是從百度下載6張同類主題的圖片，規(guī)范文件名稱和調(diào)整大小后，使用ul和li標(biāo)簽插入到網(wǎng)頁中，定義樣式表讓6張圖片排成2行3列，設(shè)置當(dāng)鼠標(biāo)懸停圖片在任意圖片上時，圖片透明度改為半透明（opacity為0.5），當(dāng)鼠標(biāo)移開后恢復(fù)到正常透明度，保存并測試你的頁面。強化訓(xùn)練PART6學(xué)習(xí)成果評量學(xué)習(xí)成果測評等級評分指標(biāo)得分及格P1.能搭建和使用Web前端開發(fā)環(huán)境

P2.能編寫前端頁面JavaScript模板

P3.能設(shè)計制作表格行懸停變色的HTML和樣式表

P4.能基于表格行懸停變色原理實現(xiàn)表格行背景及文本樣式變換效果

良好M1.能夠根據(jù)項目需求局部修改表格懸停狀態(tài)相關(guān)參數(shù)

優(yōu)秀D1.能夠根據(jù)項目需求定制重復(fù)類元素的響應(yīng)狀態(tài)及樣式；

D2.能夠從性能效率角度整體優(yōu)化HTML、CSS和JavaScript代碼，實現(xiàn)特定事件觸發(fā)界面變化效果；

評語

感謝聆聽，祝您進步！任務(wù)2斑馬線表格制作JavaScript前端開發(fā)模塊化教程任務(wù)導(dǎo)入contents目錄成果目標(biāo)核心知識任務(wù)實施強化訓(xùn)練學(xué)習(xí)成果評量PART1任務(wù)導(dǎo)入表格行較少時，可以直接定義樣式表實現(xiàn)斑馬線表格，但當(dāng)表格行較多或者后臺生成表格行數(shù)不確定時，或者是行可能隨時增刪的表格，再或者表格需要響應(yīng)交互事件時，手動設(shè)置表格類樣式和修改樣式，工作量巨大且效率低下，使用CSS3的高級選擇器:nth-child()會存在瀏覽器兼容性問題，JavaScript特別擅長處理重復(fù)性任務(wù)，能實現(xiàn)比樣式表更為豐富的DOM操作。一般當(dāng)表格第一行有背景色時，從第三行設(shè)置背景色，第一行沒有背景色時，從第二行設(shè)置背景色。本任務(wù)完成后的效果如圖21斑馬線表格最終效果所示。任務(wù)導(dǎo)入PART2成果目標(biāo)知識目標(biāo)技能目標(biāo)素質(zhì)目標(biāo)知識目標(biāo)技能目標(biāo)素質(zhì)目標(biāo)1.闡述表格常用標(biāo)簽；2.理解條紋表格實現(xiàn)原理；3.理解變量命名規(guī)范；4.理解變量作用域；5.理解元素style屬性；6.理解HTML中使用JavaScript方式。1.設(shè)計表格結(jié)構(gòu)和樣式；2.設(shè)計函數(shù)；3.善用getElementsByClassName；4.善用getElementsByTagName；5.善用addClass；6.善用mouseover、mouseout事件；7.善用事件委托；8.設(shè)置元素style屬性；9.HTML中使用JavaScript的方法。1.遵循Web開發(fā)規(guī)范；2.培養(yǎng)嚴(yán)謹?shù)木幊塘?xí)慣；3.培養(yǎng)分析和解決前端問題的能力；4.培養(yǎng)演繹思維能力；5.培養(yǎng)歸納思維能力。成果目標(biāo)PART3核心知識2.3.1表格常用標(biāo)簽

2.3.2表格斑馬線原理

2.3.3讀寫HTMLDOMclassName屬性

2.3.4嚴(yán)格模式（usestrict）

2.3.5定義變量

2.3.6常量

2.3.7變量命名規(guī)則

2.3.8JavaScript語法規(guī)范

2.3.9變量類型

2.3.10變量作用域

2.3.11避免變量污染

2.3.12閉包函數(shù)

2.3.13JavaScript轉(zhuǎn)義字符

2.3.14相等操作符

2.3.15toNumber2.3.16使用typeof檢測類型

2.3.17使用constructor檢測類型

2.3.18使用toString()檢測封裝類型

2.3.19事件委托

PART4任務(wù)實施2.4.1編寫HTML 2.4.2編寫CSS樣式 2.4.3編寫JavaScript 2.4.4測試頁面 PART5強化訓(xùn)練結(jié)合本任務(wù)實施過程，制定班級通訊錄表格斑馬線效果，具體要求是搜集班級通訊錄信息，要求包含姓名、性別、電話、QQ號和微信號碼，先制作表格，再定義表格樣式表，表格設(shè)置奇數(shù)行有背景色（顏色自選），設(shè)置當(dāng)鼠標(biāo)懸停某行時改變背景色，當(dāng)鼠標(biāo)移開后恢復(fù)到原來背景色，保存并測試你的頁面。強化訓(xùn)練PART6學(xué)習(xí)成果評量學(xué)習(xí)成果測評感謝聆聽，祝您進步！任務(wù)3彈出消息框JavaScript前端開發(fā)模塊化教程任務(wù)導(dǎo)入contents目錄成果目標(biāo)核心知識任務(wù)實施強化訓(xùn)練學(xué)習(xí)成果評量PART1任務(wù)導(dǎo)入彈出消息框具有alert()和confirm()類型的功能，用于提醒用戶或者讓用戶進行選擇操作，本任務(wù)模擬app開發(fā)彈出消息框組件，單擊“彈層”按鈕打開對話框，如圖，彈出層效果所示，單擊對話框右上角“X”、“取消”或者“立即開通”都可以關(guān)閉該對話框任務(wù)導(dǎo)入PART2成果目標(biāo)知識目標(biāo)技能目標(biāo)素質(zhì)目標(biāo)知識目標(biāo)技能目標(biāo)素質(zhì)目標(biāo)理解基于負邊距的垂直居中原理；理解基于transform屬性的垂直居中原理；理解警告框alert()使用場景；理解確認框confirm()使用場景；理解提示框prompt()使用場景；理解BOM對象；理解window對象常用屬性與方法。設(shè)計彈出框HTML結(jié)構(gòu)；設(shè)計彈出框CSS樣式；設(shè)計display顯示與隱藏控制；設(shè)計彈出框事件交互。遵循Web開發(fā)規(guī)范；培養(yǎng)嚴(yán)謹?shù)木幊塘?xí)慣；培養(yǎng)分析和解決前端問題的能力；培養(yǎng)演繹思維能力；培養(yǎng)歸納思維能力。成果目標(biāo)PART3核心知識3.3.1基于負邊距的垂直居中 3.3.2基于transform屬性的垂直居中 3.3.3元素動畫制作 3.3.4警告對話框alert() 3.3.5確認對話框confirm() 3.3.6提示對話框prompt() 3.3.7BOM介紹 3.3.8window對象 3.3.9location對象 3.3.10screen對象 3.3.11history對象PART4任務(wù)實施3.4.1編寫HTML 3.4.2編寫CSS樣式 3.4.3編寫JavaScript 3.4.4測試頁面PART5強化訓(xùn)練參照Bootstrap4信息提示框效果圖，并訪問地址：/bootstrap4/bootstrap4-alerts.html，使用原生JavaScript設(shè)計開發(fā)信息提示框效果，如圖3?6信息提示框效果所示。強化訓(xùn)練PART6學(xué)習(xí)成果評量學(xué)習(xí)成果測評等級評分指標(biāo)得分及格P1.能設(shè)計彈出層HTML和樣式表

P2.能基于彈出層原理和事件處理實現(xiàn)彈出層顯隱功能

良好M1.能夠根據(jù)項目需求局部彈出層界面和交互方式

優(yōu)秀D1.能夠根據(jù)項目需求定制彈出層界面和功能

評語

感謝聆聽，祝您進步！任務(wù)4圖片縮放特效JavaScript前端開發(fā)模塊化教程任務(wù)導(dǎo)入contents目錄成果目標(biāo)核心知識任務(wù)實施強化訓(xùn)練學(xué)習(xí)成果評量PART1任務(wù)導(dǎo)入

圖片縮放特效的應(yīng)用可以增強頁面的動感，吸引用戶關(guān)注。本任務(wù)使用JavaScript技術(shù)實現(xiàn)對元素樣式的讀取和設(shè)置，并通過間隙執(zhí)行setInterval()函數(shù)實現(xiàn)動畫效果，任務(wù)完成后如圖，圖片縮放特效所示。任務(wù)導(dǎo)入PART2成果目標(biāo)知識目標(biāo)技能目標(biāo)素質(zhì)目標(biāo)知識目標(biāo)技能目標(biāo)素質(zhì)目標(biāo)1.理解DOM編程；2.理解字符串連接模式；3.理解選擇器API；4.了解減少重排和重繪來優(yōu)化JavaScript性能。1.編寫圖片列表結(jié)構(gòu)；2.編寫圖片列表CSS樣式；3.善用DOM操作技術(shù)；4.善用字符串連接技術(shù)；5.能夠優(yōu)化DOM操作性能。1.遵循Web開發(fā)規(guī)范；2.培養(yǎng)嚴(yán)謹?shù)木幊塘?xí)慣；3.培養(yǎng)分析和解決前端問題的能力；4.培養(yǎng)演繹思維能力；5.培養(yǎng)歸納思維能力。成果目標(biāo)PART3核心知識4.3.1DOM編程 4.3.2DOM訪問與修改 4.3.3DOM遍歷 4.3.4innerHTML對比DOM方法 4.3.5字符串連接 4.3.6HTML集合length 4.3.7減少瀏覽器重排與重繪 PART4任務(wù)實施4.4.1編寫頁面結(jié)構(gòu) 4.4.2編寫CSS樣式 4.4.3編寫JavaScript 4.4.4測試頁面 PART5強化訓(xùn)練參考本任務(wù)，從京東、淘寶、微店等網(wǎng)站搜集新鮮果蔬的圖片，設(shè)計開發(fā)圖片透明度漸變動畫效果。強化訓(xùn)練PART6學(xué)習(xí)成果評量學(xué)習(xí)成果測評等級評分指標(biāo)得分及格P1.能設(shè)計制作圖片列表HTML結(jié)構(gòu)

P2.能設(shè)計編寫圖片列表界面樣式

P3.能使用JavaScript技術(shù)根據(jù)讀取和設(shè)置元素style屬性

良好M1.能夠根據(jù)項目需求局部修改圖片縮放界面和觸發(fā)條件

優(yōu)秀D1.能夠根據(jù)項目需求定制圖片效果

D2.能夠根據(jù)項目需求定制圖片屬性修改功能

評語

感謝聆聽，祝您進步！任務(wù)5

網(wǎng)頁換膚JavaScript前端開發(fā)模塊化教程任務(wù)導(dǎo)入contents目錄成果目標(biāo)核心知識任務(wù)實施強化訓(xùn)練學(xué)習(xí)成果評量PART1任務(wù)導(dǎo)入Web界面主要由版式和圖文樣式?jīng)Q定的，而樣式表決定圖文樣式的決定性因素。更改單個選擇器的樣式定義會影響局部元素表現(xiàn)，更改系列選擇器的樣式定義則會引發(fā)頁面界面的更大范圍的變化，把頁面共有樣式和個性化皮膚分離，通過切換個性化皮膚所對應(yīng)的樣式表文件即可實現(xiàn)網(wǎng)頁的換膚功能，進而滿足用戶界面?zhèn)€性化的需求，提高內(nèi)容的可讀性和適應(yīng)性，完成后的效果如圖51網(wǎng)頁換膚界面所示。任務(wù)導(dǎo)入PART2成果目標(biāo)知識目標(biāo)技能目標(biāo)素質(zhì)目標(biāo)知識目標(biāo)技能目標(biāo)素質(zhì)目標(biāo)1.理解網(wǎng)頁換膚原理；2.理解HTMLDOM；3.理解document對象屬性和方法；4.理解element對象屬性和方法；5.理解sessionStorage對象；6.理解localStorage對象；7.理解cookie。1.設(shè)計換膚模塊的HTML；2.設(shè)計換膚的CSS；3.善用JavaScript換膚技術(shù)；4.善用getAttribute()；5.善用setAttribute()；6.善用localStorage存儲數(shù)據(jù)。1.遵循Web開發(fā)規(guī)范；2.培養(yǎng)嚴(yán)謹?shù)木幊塘?xí)慣；3.培養(yǎng)分析和解決前端問題的能力；4.培養(yǎng)演繹思維能力；5.培養(yǎng)歸納思維能力。成果目標(biāo)PART3核心知識5.3.1網(wǎng)頁換膚原理 5.3.2HTML文檔對象模型 5.3.3HTMLDOM節(jié)點樹 5.3.4document對象屬性和方法 5.3.5element對象屬性和方法 5.3.6獲取元素屬性getAttribute() 5.3.7設(shè)置元素屬性setAttribute() 5.3.8本地數(shù)據(jù)存儲方案 5.3.9WebStorage 5.3.10WebStorage基本屬性和方法 5.3.11使用sessionStorage對象 5.3.12使用localStorage對象 5.3.13使用storage事件 5.3.14cookie介紹 5.3.15cookie構(gòu)成 5.3.16寫入cookie信息 5.3.17讀取cookie信息PART4任務(wù)實施5.4.1編寫HTML 5.4.2編寫CSS 5.4.3編寫JavaScript 5.4.4測試頁面 PART5強化訓(xùn)練結(jié)合本任務(wù)實施過程，編寫一個新聞頁面，制作“大”、“中”、“小”和“打印”四個鏈接，實現(xiàn)頁面文字放大、縮小和打印功能，保存并測試你的頁面。參考效果頁面：/xinwen/2018-06/06/content_5296663.htm，如圖56頁面文字縮放及打印效果圖所示。強化訓(xùn)練PART6學(xué)習(xí)成果評量學(xué)習(xí)成果測評等級評分指標(biāo)得分及格P1.能設(shè)計制作換膚功能的HTML和樣式表

P2.能基于換膚原理實現(xiàn)換膚基本功能和效果

良好M1.能夠根據(jù)項目需求局部修改換膚界面和換膚參數(shù)

優(yōu)秀D1.能夠根據(jù)項目需求定制換膚界面、功能；

D2.能夠根據(jù)Web設(shè)計風(fēng)格定制多套Web皮膚；

評語

感謝聆聽，祝您進步！任務(wù)6下拉廣告JavaScript前端開發(fā)模塊化教程任務(wù)導(dǎo)入contents目錄成果目標(biāo)核心知識任務(wù)實施強化訓(xùn)練學(xué)習(xí)成果評量PART1任務(wù)導(dǎo)入下拉廣告是在用戶瀏覽頁面時，以全屏方式強制插入一個廣告頁面或彈出廣告窗口，以增加可視區(qū)域大小吸引訪問者關(guān)注，保證廣告的傳達率，具有一定的強制性，廣告持續(xù)3秒至5秒的廣告逐漸縮成banner尺寸的網(wǎng)絡(luò)廣告形式，或者直接隱藏掉。廣告內(nèi)容有靜態(tài)的頁面，也可以純動畫（gif或者flash）或者視頻片段。瀏覽者可以通過關(guān)閉按鈕手工關(guān)閉廣告，也可以主動打開重播廣告。任務(wù)導(dǎo)入PART2成果目標(biāo)知識目標(biāo)技能目標(biāo)素質(zhì)目標(biāo)知識目標(biāo)技能目標(biāo)素質(zhì)目標(biāo)1.理解transition屬性；2.理解setTimeout()用法。1.設(shè)計下拉廣告HTML；2.設(shè)計下拉廣告CSS樣式；3.能使用transition設(shè)計動畫；4.善用setTimeout()。1.遵循Web開發(fā)規(guī)范；2.培養(yǎng)嚴(yán)謹?shù)木幊塘?xí)慣；3.培養(yǎng)分析和解決前端問題的能力；4.培養(yǎng)演繹思維能力；5.培養(yǎng)歸納思維能力。成果目標(biāo)PART3核心知識6.3.1transition屬性 6.3.2超時調(diào)用setTimeout()方法PART4任務(wù)實施6.4.1編寫HTML 6.4.2編寫CSS樣式 6.4.3編寫JavaScript代碼 6.4.4測試頁面 PART5強化訓(xùn)練結(jié)合本任務(wù)實施過程和相關(guān)技術(shù)，設(shè)計編寫一個廣告效果組件，實現(xiàn)廣告的自動彈出、關(guān)閉和界面定制功能，保存并測試你的頁面。強化訓(xùn)練PART6學(xué)習(xí)成果評量學(xué)習(xí)成果測評等級評分指標(biāo)得分及格P1.能設(shè)計下拉廣告HTML頁面和樣式表

P2.能使用setTimeout()和樣式實現(xiàn)廣告控制

良好M1.能夠根據(jù)項目需求定制廣告控制功能

優(yōu)秀D1.能夠根據(jù)項目需求實現(xiàn)廣告手動控制功能

評語

感謝聆聽，祝您進步！任務(wù)7輪播圖JavaScript前端開發(fā)模塊化教程任務(wù)導(dǎo)入contents目錄成果目標(biāo)核心知識任務(wù)實施強化訓(xùn)練學(xué)習(xí)成果評量PART1任務(wù)導(dǎo)入輪播（Carousel）有人叫旋轉(zhuǎn)輪播，也有人叫焦點圖，還有人叫幻燈片。無論是淘寶、京東、亞馬遜等購物網(wǎng)站，還是中國政府網(wǎng)、鳳凰、人民網(wǎng)等政府新聞網(wǎng)站，輪播圖幾乎成了所有網(wǎng)站是標(biāo)配，也是網(wǎng)站的一大看點和亮點，輪播默認情況下是循環(huán)向右（向后）輪播，如果單擊某個指示塊，會直接跳轉(zhuǎn)到所單擊的那張輪播圖，并且圖片標(biāo)題及輪播指示器會同步跳轉(zhuǎn)。輪播圖內(nèi)容可以是圖像、內(nèi)嵌框架、視頻或者其他任何類型的內(nèi)容。如何高效便捷地設(shè)計輪播圖的HTML結(jié)構(gòu)、樣式排版以及javascript控制輪播行為及交互，成了前端工程師修煉的基本功。本任務(wù)完成后如圖71百度AI輪播效果圖所示。任務(wù)導(dǎo)入PART2成果目標(biāo)知識目標(biāo)技能目標(biāo)素質(zhì)目標(biāo)知識目標(biāo)技能目標(biāo)素質(zhì)目標(biāo)1.理解間歇調(diào)用setInterval()方法；2.列舉常見JavaScript錯誤；3.理解Error對象；4.了解錯誤處理思路；5.理解使用瀏覽器控制臺。1.編寫輪播的HTML結(jié)構(gòu)；2.編寫輪播的CSS樣式；3.善用setInterval()方法；4.善用JavaScript使用斷點調(diào)試程序；5.善用try-catch處理異常。1.遵循Web開發(fā)規(guī)范；2.培養(yǎng)嚴(yán)謹?shù)木幊塘?xí)慣；3.培養(yǎng)分析和解決前端問題的能力；4.培養(yǎng)演繹思維能力；5.培養(yǎng)歸納思維能力。成果目標(biāo)PART3核心知識7.3.1間歇調(diào)用setInterval() 7.3.2避免常見JavaScript錯誤 7.3.3理解Error對象 7.3.4錯誤處理思路 7.3.5使用瀏覽器控制臺調(diào)試程序 7.3.6使用斷點調(diào)試程序 7.3.7使用try-catch處理異常PART4任務(wù)實施7.4.1編寫HTML 7.4.2編寫CSS樣式

7.4.3編寫JavaScript 7.4.4測試頁面PART5強化訓(xùn)練訪問Swiper中文網(wǎng)（/），熟悉輪播圖的形式、樣式及API用法，嘗試使用swiper.min.js和swiper.min.css等文件，從百度圖片（/）搜索圖片，參照本任務(wù)制作輪播圖。強化訓(xùn)練PART6學(xué)習(xí)成果評量學(xué)習(xí)成果測評等級評分指標(biāo)得分及格P1.能設(shè)計輪播HTML和樣式表

P2.能基于輪播原理實現(xiàn)輪播基本功能和效果

良好M1.能夠根據(jù)項目需求局部修改輪播界面和輪播參數(shù)

優(yōu)秀D1.能夠根據(jù)項目需求定制輪播界面和功能

評語

感謝聆聽，祝您進步！任務(wù)8滾動公告JavaScript前端開發(fā)模塊化教程任務(wù)導(dǎo)入contents目錄成果目標(biāo)核心知識任務(wù)實施強化訓(xùn)練學(xué)習(xí)成果評量PART1任務(wù)導(dǎo)入Web頁面的滾動公告非常像銀行、醫(yī)院、政務(wù)服務(wù)大廳的LED顯示屏，會定時顯示預(yù)設(shè)的公告內(nèi)容，有左右滾動式的，也有上下滾動式的，如鳳凰金融APP首頁中部“活動”的滾動公告，如圖8?1上下滾動公告效果所示。任務(wù)導(dǎo)入本任務(wù)實現(xiàn)公告欄滾動顯示效果，如圖82上下滾動公告效果所示，限于篇幅僅實現(xiàn)滾動公告部分，默認會3000毫秒換下一條公告，單擊右側(cè)的“<”可以跳到上一條公告信息，單右側(cè)的“>”可以跳到下一條公告信息。PART2成果目標(biāo)知識目標(biāo)技能目標(biāo)素質(zhì)目標(biāo)知識目標(biāo)技能目標(biāo)素質(zhì)目標(biāo)1.理解HTML事件模型；2.理解DOM0級事件模型；3.理解DOM2級事件模型；4.理解IE事件模型。1.設(shè)計滾動公告HTML結(jié)構(gòu)；2.設(shè)計滾動公告CSS樣式；3.善用setInterval()方法；4.善用addEventListener()；5.善用匿名函數(shù)。1.遵循Web開發(fā)規(guī)范；2.培養(yǎng)嚴(yán)謹?shù)木幊塘?xí)慣；3.培養(yǎng)分析和解決前端問題的能力；4.培養(yǎng)演繹思維能力；5.培養(yǎng)歸納思維能力。成果目標(biāo)PART3核心知識8.3.1HTML事件模型 8.3.2DOM0級事件模型 8.3.3DOM2級事件模型 8.3.4IE事件模型PART4任務(wù)實施8.4.1編寫HTML 8.4.2編寫CSS樣式 8.4.3編寫JavaScriptPART5強化訓(xùn)練訪問中國政府網(wǎng)（/）首頁，找到首頁輪播區(qū)，如圖84中國政府網(wǎng)首頁輪播圖，將首頁輪播區(qū)的圖片標(biāo)題整理出來，參照本任務(wù)的實現(xiàn)過程，制作成標(biāo)題左右滾動公告效果強化訓(xùn)練PART6學(xué)習(xí)成果評量學(xué)習(xí)成果測評等級評分指標(biāo)得分及格P1.能設(shè)計滾動公告HTML和樣式表

P2.能基于滾動公告原理實現(xiàn)字幕滾動功能和效果

良好M1.能夠根據(jù)項目需求局部修改滾動字幕界面和滾動參數(shù)

優(yōu)秀D1.能夠根據(jù)項目需求定制滾動方式、界面和功能

評語

感謝聆聽，祝您進步！任務(wù)9貸款計算器JavaScript前端開發(fā)模塊化教程任務(wù)導(dǎo)入contents目錄成果目標(biāo)核心知識任務(wù)實施強化訓(xùn)練學(xué)習(xí)成果評量PART1任務(wù)導(dǎo)入貸款計算器根據(jù)用戶輸入的貸款金額、貸款年利率和貸款年限自動計算每月還款額、總還款額和總利息。設(shè)計開發(fā)一個貸款計算器將涉及到客戶端數(shù)值輸入與獲取、表單事件、數(shù)值轉(zhuǎn)換與計算、設(shè)置元素HTML內(nèi)容等內(nèi)容。任務(wù)導(dǎo)入PART2成果目標(biāo)知識目標(biāo)技能目標(biāo)素質(zhì)目標(biāo)知識目標(biāo)技能目標(biāo)素質(zhì)目標(biāo)1.理清表單類型；2.善用表單結(jié)構(gòu)；3.理解form對象；4.理解表單事件；5.理解JavaScript操作符；6.理解Math對象；7.理解條件語句；8.理解循環(huán)語句。1.設(shè)計表單HTML；2.設(shè)計表單CSS樣式；3.能獲取表單值；4.能定義函數(shù)；5.能創(chuàng)建表達式；6.能創(chuàng)建條件語句；7.善用innnerHTML修改元素文本。1.遵循Web開發(fā)規(guī)范；2.培養(yǎng)嚴(yán)謹?shù)木幊塘?xí)慣；3.培養(yǎng)分析和解決前端問題的能力；4.培養(yǎng)演繹思維能力；5.培養(yǎng)歸納思維能力。成果目標(biāo)PART3核心知識9.3.1表單類型 9.3.2表單結(jié)構(gòu) 9.3.3form對象 9.3.4表單事件 9.3.5表達式與操作符 9.3.6轉(zhuǎn)換為數(shù)字 9.3.7設(shè)置小數(shù)位數(shù) 9.3.8Math對象 9.3.9條件語句 9.3.10for循環(huán) 9.3.11while循環(huán) 9.3.12do-while循環(huán) 9.3.13for-in 9.3.14優(yōu)化循環(huán)性能 9.3.15forEach()PART4任務(wù)實施9.4.1編寫HTML 9.4.2編寫CSS樣式 9.4.3編寫JavaScript 9.4.4測試頁面PART5強化訓(xùn)練訪問查詢網(wǎng)/hl.asp?from=USD&to=CNY&q=100頁面，如圖94匯率計算器所示，試用匯率匯率換算工具，熟悉界面和功能后，設(shè)計制作一款美元到人民幣的轉(zhuǎn)換工具。強化訓(xùn)練PART6學(xué)習(xí)成果評量學(xué)習(xí)成果測評等級評分指標(biāo)得分及格P1.能設(shè)計制作計算器表單結(jié)構(gòu)

P2.能設(shè)計編寫表單及輸出界面樣式

P3.能基于數(shù)值關(guān)系實現(xiàn)計算功能

良好M1.能夠根據(jù)項目需求局部修改計算器界面和計算規(guī)則

優(yōu)秀D1.能夠根據(jù)項目需求定制計算器界面

D2.能夠根據(jù)項目需求定制計算器功能，實現(xiàn)數(shù)據(jù)驗證和各類復(fù)雜計算

評語

感謝聆聽，祝您進步！任務(wù)10計算器JavaScript前端開發(fā)模塊化教程任務(wù)導(dǎo)入contents目錄成果目標(biāo)核心知識任務(wù)實施強化訓(xùn)練學(xué)習(xí)成果評量PART1任務(wù)導(dǎo)入計算器根據(jù)用戶單擊按鈕面板中按鈕輸入的數(shù)值和運算符號計算表達式結(jié)果。設(shè)計開發(fā)一個計算器涉及到計算器界面生成、按鈕交互及數(shù)值計算、設(shè)置input元素值等內(nèi)容。本任務(wù)完成后的效果如圖101計算器效果所示。任務(wù)導(dǎo)入PART2成果目標(biāo)知識目標(biāo)技能目標(biāo)素質(zhì)目標(biāo)知識目標(biāo)技能目標(biāo)素質(zhì)目標(biāo)1.理解函數(shù)；2.理解函數(shù)參數(shù)；3.理解函數(shù)調(diào)用方式；4.理解slice()語法。1.設(shè)計計算器HTML；2.設(shè)計計算器CSS樣式；3.善用addEventListener；4.善用條件語句；5.掌握表單值的獲取與設(shè)置；6.設(shè)計表達式。1.遵循Web開發(fā)規(guī)范；2.培養(yǎng)嚴(yán)謹?shù)木幊塘?xí)慣；3.培養(yǎng)分析和解決前端問題的能力；4.培養(yǎng)演繹思維能力；5.培養(yǎng)歸納思維能力。成果目標(biāo)PART3核心知識10.3.1函數(shù)介紹 10.3.2定義函數(shù) 10.3.3嵌套函數(shù) 10.3.4調(diào)用函數(shù) 10.3.5函數(shù)的實參和形參 10.3.6將對象屬性用做實參 10.3.7實參類型 10.3.8作為值的函數(shù) 10.3.9自定義函數(shù)屬性 10.3.10slice() 10.3.11isNaN()PART4任務(wù)實施10.4.1編寫HTML 10.4.2編寫CSS樣式 10.4.3編寫JavaScript 10.4.4測試頁面PART5強化訓(xùn)練參考本任務(wù)，查閱華氏溫度和攝氏溫度的轉(zhuǎn)換公式，設(shè)計開發(fā)一款華氏溫度和攝氏溫度轉(zhuǎn)換工具。強化訓(xùn)練PART6學(xué)習(xí)成果評量學(xué)習(xí)成果測評等級評分指標(biāo)得分及格P1.能設(shè)計制作計算器表單結(jié)構(gòu)

P2.能設(shè)計編寫計算器界面樣式

P3.能根據(jù)用戶輸入生成表達式并實現(xiàn)計算功能

良好M1.能夠根據(jù)項目需求局部修改計算器界面和計算規(guī)則

優(yōu)秀D1.能夠根據(jù)項目需求定制計算器界面

D2.能夠根據(jù)項目需求定制計算器功能，實現(xiàn)特定計算類型

評語

感謝聆聽，祝您進步！任務(wù)11投票JavaScript前端開發(fā)模塊化教程任務(wù)導(dǎo)入contents目錄成果目標(biāo)核心知識任務(wù)實施強化訓(xùn)練學(xué)習(xí)成果評量PART1任務(wù)導(dǎo)入投票是收集民意的一種方式，網(wǎng)絡(luò)上有各種各樣的投票模塊，特別是微信投票、問卷星（/）、騰訊問卷（/）等投票功能應(yīng)用廣泛，本任務(wù)主要運用閉包函數(shù)實現(xiàn)Web頁面投票功能，完成后的效果如圖111投票頁面效果所示。任務(wù)導(dǎo)入PART2成果目標(biāo)知識目標(biāo)技能目標(biāo)素質(zhì)目標(biāo)知識目標(biāo)技能目標(biāo)素質(zhì)目標(biāo)1.理解匿名函數(shù)；2.理解函數(shù)作用域；3.理解閉包函數(shù)。1.編寫投票HTML；2.編寫投票CSS樣式；3.編寫閉包函數(shù)。1.遵循Web開發(fā)規(guī)范；2.培養(yǎng)嚴(yán)謹?shù)木幊塘?xí)慣；3.培養(yǎng)分析和解決前端問題的能力；4.培養(yǎng)演繹思維能力；5.培養(yǎng)歸納思維能力。成果目標(biāo)PART3核心知識11.3.1匿名函數(shù) 11.3.2數(shù)據(jù)存取方式 11.3.3對象成員 11.3.4函數(shù)作用域 11.3.5閉包 11.3.6閉包函數(shù) 11.3.7遞歸函數(shù)PART4任務(wù)實施11.4.1編寫HTML 11.4.2編寫CSS樣式 11.4.3編寫JavaScript 11.4.4測試頁面PART5強化訓(xùn)練結(jié)合本任務(wù)實施過程和相關(guān)技術(shù)，以“紅芯瀏覽器，到底算不算國產(chǎn)？”為主題設(shè)計編寫一個投票組件，實現(xiàn)投票和結(jié)果呈現(xiàn)，保存并測試你的頁面。強化訓(xùn)練PART6學(xué)習(xí)成果評量學(xué)習(xí)成果測評等級評分指標(biāo)得分及格P1.能設(shè)計投票HTML頁面和樣式表

P2.能使用閉包函數(shù)實現(xiàn)投票的功能

良好M1.能夠根據(jù)項目需求修改投票界面

優(yōu)秀D1.能夠根據(jù)項目需求定制投票功能

評語

感謝聆聽，祝您進步！任務(wù)12折疊面板JavaScript前端開發(fā)模塊化教程任務(wù)導(dǎo)入contents目錄成果目標(biāo)核心知識任務(wù)實施強化訓(xùn)練學(xué)習(xí)成果評量PART1任務(wù)導(dǎo)入折疊面板非常適合在有限空間里顯示大量信息，可以設(shè)置頁面加載后，默認第一個列表項處于展開狀態(tài)，用戶可以單擊折疊項目標(biāo)題欄切換當(dāng)前標(biāo)題下的內(nèi)容是否顯示，本任務(wù)完成后的效果如圖121折疊面板效果圖所示。任務(wù)導(dǎo)入PART2成果目標(biāo)知識目標(biāo)技能目標(biāo)素質(zhì)目標(biāo)知識目標(biāo)技能目標(biāo)素質(zhì)目標(biāo)1.理解折疊面板HTML結(jié)構(gòu)；2.理解nextElementSibling使用場景。1.設(shè)計折疊面板HTML；2.設(shè)計折疊面板CSS樣式；3.善用for循環(huán)；4.善用addEventListener；5.善用對象style屬性。1.遵循Web開發(fā)規(guī)范；2.培養(yǎng)嚴(yán)謹?shù)木幊塘?xí)慣；3.培養(yǎng)分析和解決前端問題的能力；4.培養(yǎng)演繹思維能力；5.培養(yǎng)歸納思維能力。成果目標(biāo)PART3核心知識12.3.1nextElementSiblingPART4任務(wù)實施12.4.1編寫HTML 12.4.2編寫CSS 12.4.3編寫JavaScripPART5強化訓(xùn)練參考本任務(wù)，訪問微軟網(wǎng)頁/zh-cn/download/faq.aspx，如圖123微軟FAQ頁面所示，設(shè)計制作企業(yè)FAQ列表頁面。強化訓(xùn)練PART6學(xué)習(xí)成果評量學(xué)習(xí)成果測評等級評分指標(biāo)得分及格P1.能設(shè)計制作折疊面板結(jié)構(gòu)

P2.能設(shè)計編寫折疊面板界面樣式

P3.能實現(xiàn)折疊面板折疊和激活狀態(tài)指示功能

良好M1.能夠根據(jù)項目需求局部定制折疊面板功能和效果

優(yōu)秀D1.能夠根據(jù)項目需求定制折疊面板界面

D2.能夠根據(jù)項目需求定制折疊面板折疊和激活狀態(tài)指示功能

評語

感謝聆聽，祝您進步！任務(wù)13銀行客服電話查詢JavaScript前端開發(fā)模塊化教程任務(wù)導(dǎo)入contents目錄成果目標(biāo)核心知識任務(wù)實施強化訓(xùn)練學(xué)習(xí)成果評量PART1任務(wù)導(dǎo)入全國銀行主要有中國銀行、工商銀行、建設(shè)銀行、農(nóng)業(yè)銀行等，在辦理銀行相關(guān)業(yè)務(wù)時，可以查詢各大銀行的服務(wù)電話，先電話咨詢后再選擇合適渠道辦理。本任務(wù)綜合使用Ajax+JSON技術(shù)實現(xiàn)各大銀行的服務(wù)電話查詢功能，任務(wù)完成后如圖131銀行客服電話查詢模塊效果圖所示。任務(wù)導(dǎo)入PART2成果目標(biāo)知識目標(biāo)技能目標(biāo)素質(zhì)目標(biāo)知識目標(biāo)技能目標(biāo)素質(zhì)目標(biāo)1.列舉Ajax應(yīng)用場景；2.理解Ajax原理；3.理解JSON數(shù)據(jù)格式。1.設(shè)計查詢表單結(jié)構(gòu)；2.設(shè)計CSS樣式；3.開發(fā)Ajax模板；4.處理Ajax響應(yīng)數(shù)據(jù)。1.遵循Web開發(fā)規(guī)范；2.培養(yǎng)嚴(yán)謹?shù)木幊塘?xí)慣；3.培養(yǎng)分析和解決前端問題的能力；4.培養(yǎng)演繹思維能力；5.培養(yǎng)歸納思維能力。成果目標(biāo)PART3核心知識13.3.1Ajax簡介 13.3.2Ajax原理 13.3.3HTTP請求 13.3.4HTTP狀態(tài)碼 13.3.5定義XMLHttpRequest對象 13.3.6建立XMLHttpRequest連接 13.3.7跟蹤狀態(tài) 13.3.8中止請求 13.3.9Ajax請求與響應(yīng)模板 13.3.10獲取數(shù)據(jù) 13.3.11獲取純文本 13.3.12使用Ajax加載HTML 13.3.13使用Ajax加載JSON 13.3.14獲取JavaScript腳本 13.3.15使用Ajax加載其他服務(wù)器的數(shù)據(jù) 13.3.16獲取頭部信息 13.3.17JSONP工作原理PART4任務(wù)實施13.4.1編寫HTML 13.4.2編寫CSS樣式

13.4.3編寫JSON 13.4.4編寫JavaScript 13.4.5測試頁面PART5強化訓(xùn)練參考本任務(wù)，搜索中國銀行各城市支行地址和電話，設(shè)計開發(fā)中國銀行網(wǎng)點信息查詢模塊。強化訓(xùn)練PART6學(xué)習(xí)成果評量學(xué)習(xí)成果測評等級評分指標(biāo)得分及格P1.能設(shè)計制作查詢頁面結(jié)構(gòu)

P2.能設(shè)計編寫查詢界面樣式

P3.能使用Ajax技術(shù)根據(jù)用戶輸入關(guān)鍵字進行JSON數(shù)據(jù)集查詢

良好M1.能夠根據(jù)項目需求局部修改查詢界面、觸發(fā)條件和模糊匹配規(guī)則

優(yōu)秀D1.能夠根據(jù)項目需求定制信息查詢界面

D2.能夠根據(jù)項目需求定制JSON存儲鍵值和匹配方式

評語

感謝聆聽，祝您進步！任務(wù)14省市區(qū)聯(lián)動菜單JavaScript前端開發(fā)模塊化教程任務(wù)導(dǎo)入contents目錄成果目標(biāo)核心知識任務(wù)實施強化訓(xùn)練學(xué)習(xí)成果評量PART1任務(wù)導(dǎo)入在Web界面中，涉及到特別多選項時（如送貨地址、圖書分類號），要么提供用戶關(guān)鍵詞搜索查詢功能，要么按信息的層級關(guān)系進行分層組織，省市區(qū)縣聯(lián)動的下拉列表設(shè)計，可以解決大量存在層級關(guān)聯(lián)的信息的快捷選擇問題，比如像京東收貨地選擇組件。本任務(wù)綜合使用Ajax+JSON技術(shù)實現(xiàn)在全國行政區(qū)域JSON中47495條的下拉列表組織，方便用戶查詢，任務(wù)完成后如圖141中國行政區(qū)聯(lián)動下拉列表效果圖。任務(wù)導(dǎo)入PART2成果目標(biāo)知識目標(biāo)技能目標(biāo)素質(zhì)目標(biāo)知識目標(biāo)技能目標(biāo)素質(zhì)目標(biāo)1.理解下拉列表結(jié)構(gòu)；2.理解列表項增刪的方法；3.理解JSON數(shù)據(jù)格式1.編寫級聯(lián)菜單HTML；2.編寫級聯(lián)菜單CSS樣式；3.編寫JSON數(shù)據(jù)文檔；4.善用Ajax讀取JSON數(shù)據(jù)；5.善用JavaScript處理JSON數(shù)據(jù)；6.根據(jù)表單值的變化生成和刪除列表項。1.遵循Web開發(fā)規(guī)范；2.培養(yǎng)嚴(yán)謹?shù)木幊塘?xí)慣；3.培養(yǎng)分析和解決前端問題的能力；4.培養(yǎng)演繹思維能力；5.培養(yǎng)歸納思維能力。成果目標(biāo)PART3核心知識14.3.1下拉列表select 14.3.2HTMLDOMOption對象 14.3.3selectadd()方法 14.3.4JSON簡介 14.3.5JSON語法 14.3.6JSON與XML比較 14.3.7訪問JSON對象值 14.3.8遍歷JSON對象 14.3.9修改JSON值 14.3.10刪除對象屬性 14.3.11解析JSON對象 14.3.12JSON.stringify() 14.3.13JSON轉(zhuǎn)換為JavaScript對象PART4任務(wù)實施14.4.1編寫HTML 14.4.2編寫CSS 14.4.3json數(shù)據(jù)準(zhǔn)備 14.4.4編寫JavaScript 14.4.5測試頁面PART5強化訓(xùn)練參考本任務(wù)，搜索中國銀行各城市支行地址和電話，設(shè)計開發(fā)中國銀行網(wǎng)點信息聯(lián)動查詢下拉表單強化訓(xùn)練PART6學(xué)習(xí)成果評量學(xué)習(xí)成果測評等級評分指標(biāo)得分及格P1.能設(shè)計制作下拉列表頁面結(jié)構(gòu)

P2.能設(shè)計編寫下拉列表界面樣式

P3.能使用Ajax技術(shù)根據(jù)用戶下拉列表選擇項進行JSON數(shù)據(jù)集查詢

良好M1.能夠根據(jù)項目需求局部修改查詢界面和觸發(fā)條件

優(yōu)秀D1.能夠根據(jù)項目需求定制下拉列表聯(lián)動界面

D2.能夠根據(jù)項目需求定制JSON存儲鍵值和匹配方式

評語

感謝聆聽，祝您進步！任務(wù)15滾動監(jiān)聽JavaScript前端開發(fā)模塊化教程任務(wù)導(dǎo)入contents目錄成果目標(biāo)核心知識任務(wù)實施強化訓(xùn)練學(xué)習(xí)成果評量PART1任務(wù)導(dǎo)入手機版淘寶網(wǎng)進入具體商品頁面時，當(dāng)向下拉動時，會根據(jù)滾動條位置自動滑動到寶貝、評價、詳情和推薦。類似的，百度百科進入百科詞條后，會出現(xiàn)該詞條的滾動導(dǎo)航效果，運用JavaScript來制作這一滾動監(jiān)聽效果。本任務(wù)模仿百度百科，實現(xiàn)類似的效果。任務(wù)導(dǎo)入PART2成果目標(biāo)知識目標(biāo)技能目標(biāo)素質(zhì)目標(biāo)知識目標(biāo)技能目標(biāo)素質(zhì)目標(biāo)1.理解滾動監(jiān)聽原理；2.CSS腳本化3.訪問CSS行內(nèi)樣式4.使用styleSheets對象5.計算樣式6.元素尺寸7.window.scrollY1.編寫頁面結(jié)構(gòu)2.編寫CSS樣式3.編寫JSON4.編寫JavaScript1.遵循Web開發(fā)規(guī)范；2.培養(yǎng)嚴(yán)謹?shù)木幊塘?xí)慣；3.培養(yǎng)分析和解決前端問題的能力；4.培養(yǎng)演繹思維能力；5.培養(yǎng)歸納思維能力。成果目標(biāo)PART3核心知識15.3.1滾動監(jiān)聽 15.3.2CSS腳本化 15.3.3訪問CSS行內(nèi)樣式 15.3.4使用styleSheets對象 15.3.5計算樣式 15.3.6元素尺寸 15.3.7window.scrollYPART4任務(wù)實施15.4.1編寫HTML 15.4.2編寫CSS樣式 15.4.3編寫JavaScript 15.4.4測試頁面PART5強化訓(xùn)練參考本任務(wù)，搜索淘寶某一商品的信息，實現(xiàn)“寶貝”、“評價”和“詳情”3個選項卡的自動鑒別切換，設(shè)計開發(fā)商品頁面的滾動監(jiān)聽效果，如圖153電商頁面滾動監(jiān)聽效果所示。強化訓(xùn)練PART6學(xué)習(xí)成果評量學(xué)習(xí)成果測評等級評分指標(biāo)得分及格P1.能設(shè)計制作滾動監(jiān)聽頁面結(jié)構(gòu)

P2.能設(shè)計編寫滾動監(jiān)聽界面樣式

P3.能使用JavaScript實現(xiàn)滾動監(jiān)聽導(dǎo)航提示

良好M1.能夠根據(jù)項目需求局部修改滾動監(jiān)聽導(dǎo)航界面和關(guān)聯(lián)的元素

優(yōu)秀D1.能夠根據(jù)項目需求定制滾動監(jiān)聽導(dǎo)航界面

D2.能夠根據(jù)項目需求定制滾動監(jiān)聽導(dǎo)航交互功能

評語

感謝聆聽，祝您進步！任務(wù)16視頻播放器JavaScript前端開發(fā)模塊化教程任務(wù)導(dǎo)入contents目錄成果目標(biāo)核心知識任務(wù)實施強化訓(xùn)練學(xué)習(xí)成果評量PART1任務(wù)導(dǎo)入視頻是多媒體的重要媒體類型之一，隨著網(wǎng)絡(luò)速度和用戶端性能的提升，越來越多的視頻被插入到Web頁面中，在很多購物網(wǎng)站中逐漸用視頻來代替靜態(tài)圖片，表達更多豐富的商品信息。以網(wǎng)絡(luò)視頻為主的網(wǎng)站，如土豆網(wǎng)（）、優(yōu)酷（/）、騰訊視頻（/）等發(fā)展迅速，本任務(wù)主要運用HTML5Video實現(xiàn)Web視頻播放功能，完成后的效果如圖161視頻播放界面效果所示。任務(wù)導(dǎo)入PART2成果目標(biāo)知識目標(biāo)技能目標(biāo)素質(zhì)目標(biāo)知識目標(biāo)技能目標(biāo)素質(zhì)目標(biāo)1.理解HTMLvideo標(biāo)簽；2.理解視頻格式；3.理解播放器界面與功能。1.設(shè)計播放器HTML；2.設(shè)計CSS樣式；3.在頁面中插入視頻；4.開發(fā)播放控制功能；5.開發(fā)進度提示功能。1.遵循Web開發(fā)規(guī)范；2.培養(yǎng)嚴(yán)謹?shù)木幊塘?xí)慣；3.培養(yǎng)分析和解決前端問題的能力；4.培養(yǎng)演繹思維能力；5.培養(yǎng)歸納思維能力。成果目標(biāo)PART3核心知識16.3.1HTMLvideo標(biāo)簽 16.3.2HTML音頻/視頻方法 16.3.3HTML音頻/視頻屬性 16.3.4HTML音頻/視頻事件 16.3.5瀏覽器支持的視頻格式 16.3.6瀏覽器視頻能力檢測 16.3.7實現(xiàn)播放列表功能PART4任務(wù)實施16.4.1編寫HTML 16.4.2編寫CSS樣式 16.4.3編寫JavaScript 16.4.4測試頁面PART5強化訓(xùn)練結(jié)合本任務(wù)實施過程和相關(guān)技術(shù)，設(shè)計編寫一個音樂播放器，實現(xiàn)音樂文件指定、播放控制和界面定制功能，保存并測試你的頁面。強化訓(xùn)練PART6學(xué)習(xí)成果評量學(xué)習(xí)成果測評等級評分指標(biāo)得分及格P1.能設(shè)計播放器HTML頁面和樣式表

P2.能使用video方法、屬性和事件實現(xiàn)播放控制

良好M1.能夠根據(jù)項目需求定制播放控制按鈕功能

優(yōu)秀D1.能夠根據(jù)項目需求實現(xiàn)跨瀏覽器多格式播放功能

評語

感謝聆聽，祝您進步！任務(wù)17刮刮樂JavaScript前端開發(fā)模塊化教程任務(wù)導(dǎo)入contents目錄成果目標(biāo)核心知識任務(wù)實施強化訓(xùn)練學(xué)習(xí)成果評量PART1任務(wù)導(dǎo)入刮獎是網(wǎng)站經(jīng)常使用的一種提升用戶參與興趣和意愿的方式，網(wǎng)頁設(shè)計者設(shè)計刮獎的背景圖片和刮獎方式，模擬現(xiàn)實生活的刮獎情境，本任務(wù)主要運用畫布HTML5canvas技術(shù)實現(xiàn)Web頁面刮獎功能，完成后的效果如圖171刮獎頁面效果所示。任務(wù)導(dǎo)入PART2成果目標(biāo)知識目標(biāo)技能目標(biāo)素質(zhì)目標(biāo)知識目標(biāo)技能目標(biāo)素質(zhì)目標(biāo)1.理解事件概念；2.理解事件流；3.理解事件對象；4.理解事件模擬過程。1.設(shè)計畫布的HTML；2.設(shè)計畫布的CSS樣式；3.設(shè)計繪畫參數(shù)；4.設(shè)計繪制事件。1.遵循Web開發(fā)規(guī)范；2.培養(yǎng)嚴(yán)謹?shù)木幊塘?xí)慣；3.培養(yǎng)分析和解決前端問題的能力；4.培養(yǎng)演繹思維能力；5.培養(yǎng)歸納思維能力。成果目標(biāo)PART3核心知識17.3.1事件基礎(chǔ) 17.3.2事件流 17.3.3事件冒泡 17.3.4事件捕獲 17.3.5事件對象 17.3.6IE中的事件對象 17.3.7跨瀏覽器的事件對象 17.3.8事件委托 17.3.9事件類型 17.3.10UI事件 17.3.11焦點事件 17.3.12鼠標(biāo)事件 17.3.13鍵盤事件 17.3.14鼠標(biāo)/鍵盤事件對象屬性 17.3.15鼠標(biāo)/鍵盤事件方法 17.3.16框架/對象（Frame/Object）事件 17.3.17表單事件 17.3.18剪貼板事件 17.3.19打印事件 17.3.20拖動事件 17.3.21多媒體（Media）事件 17.3.22動畫事件 17.3.23過渡事件 17.3.24其他事件 17.3.25模擬事件過程 17.3.26模擬鼠標(biāo)事件 17.3.27模擬鍵盤事件 17.3.28globalCompositeOperation屬性PART4任務(wù)實施17.4.1編寫HTML 17.4.2編寫CSS樣式 17.4.3編寫JavaScript 17.4.4測試頁面PART5強化訓(xùn)練結(jié)合本任務(wù)實施過程和相關(guān)技術(shù)，設(shè)計編寫一個刮刮樂組件，設(shè)計刮獎圖和實現(xiàn)刮獎功能，保存并測試你的頁面。強化訓(xùn)練PART6學(xué)習(xí)成果評量學(xué)習(xí)成果測評等級評分指標(biāo)得分及格P1.能設(shè)計刮獎HTML頁面和樣式表

P2.能使用實現(xiàn)刮獎的功能

良好M1.能夠根據(jù)項目需求修改刮獎界面

優(yōu)秀D1.能夠根據(jù)項目需求定制刮獎功能

評語

感謝聆聽，祝您進步！任務(wù)18微信運動步數(shù)統(tǒng)計圖JavaScript前端開發(fā)模塊化教程任務(wù)導(dǎo)入contents目錄成果目標(biāo)核心知識任務(wù)實施強化訓(xùn)練學(xué)習(xí)成果評量PART1任務(wù)導(dǎo)入微信運動是由騰訊開發(fā)的一個類似計步數(shù)據(jù)庫的公眾賬號。用戶可以通過關(guān)注微信運動公眾號查看自己每天行走的步數(shù)，同時也可以和其他用戶進行運動量的PK或點贊。在微信運動“我的主頁”可以查看個人本周的步數(shù)統(tǒng)計，該統(tǒng)計圖以折線圖形式直觀地反映了本周各天的步數(shù)變化。本任務(wù)使用HTML5canvas開發(fā)微信運動步數(shù)統(tǒng)計圖。任務(wù)導(dǎo)入PART2成果目標(biāo)知識目標(biāo)技能目標(biāo)素質(zhì)目標(biāo)知識目標(biāo)技能目標(biāo)素質(zhì)目標(biāo)1.理解canvas畫布標(biāo)簽；2.理解canvas繪圖步驟；3.理解canvas繪圖參數(shù)。1.設(shè)計統(tǒng)計圖HTML；2.設(shè)計canvas樣式；3.繪制漸變背景；4.繪制坐標(biāo)；5.繪制數(shù)據(jù)文本；6.繪制折線。1.遵循Web開發(fā)規(guī)范；2.培養(yǎng)嚴(yán)謹?shù)木幊塘?xí)慣；3.培養(yǎng)分析和解決前端問題的能力；4.培養(yǎng)演繹思維能力；5.培養(yǎng)歸納思維能力。成果目標(biāo)PART3核心知識18.3.1HTML5canvas 18.3.2canvas坐標(biāo) 18.3.3canvas繪圖步驟 18.3.4canvas繪制漸變色 18.3.5canvas繪制文本 18.3.6canvas繪制直線 18.3.7canvas繪制矩形 18.3.8canvas繪制圓形 18.3.9canvas繪制曲線PART4任務(wù)實施18.4.1編寫HTML 18.4.2編寫JavaScript 18.4.3測試頁面PART5強化訓(xùn)練參照本任務(wù)，使用自己本周的微信運動數(shù)據(jù)，設(shè)計開發(fā)微信運動統(tǒng)計圖強化訓(xùn)練PART6學(xué)習(xí)成果評量學(xué)習(xí)成果測評等級評分指標(biāo)得分及格P1.能設(shè)計統(tǒng)計圖HTML和樣式表

P2.能使用畫面canvas繪制折線統(tǒng)計圖

良好M1.能夠根據(jù)項目需求進行數(shù)據(jù)收集和預(yù)處理

優(yōu)秀D1.能夠根據(jù)項目需求定制折線統(tǒng)計圖

評語

感謝聆聽，祝您進步！任務(wù)19相冊JavaScript前端開發(fā)模塊化教程任務(wù)導(dǎo)入contents目錄成果目標(biāo)核心知識任務(wù)實施強化訓(xùn)練學(xué)習(xí)成果評量PART1任務(wù)導(dǎo)入圖片是網(wǎng)頁中最為重要的媒體類型之一，當(dāng)有大量圖片需要呈現(xiàn)時，先用各張圖片生成縮略圖，然后用戶通過單擊感興趣的縮略圖查看更大尺寸的圖像，并支持以大尺寸圖像方式前后翻閱相冊中的圖片。本任務(wù)開發(fā)如圖181相冊效果圖所示，單擊任意縮略圖，即可以大尺寸方式查看該圖片，并支持以大尺寸視圖前后翻頁，翻頁可以由用戶單擊左右兩側(cè)的按鈕觸發(fā)，也可以使用鍵盤上的左右方向換圖。任務(wù)導(dǎo)入PART2成果目標(biāo)知識目標(biāo)技能目標(biāo)素質(zhì)目標(biāo)知識目標(biāo)技能目標(biāo)素質(zhì)目標(biāo)1.理解transform水平垂直居中對齊原理；2.理解事件委托技術(shù)；3.理解圖片切換原理。1.設(shè)計相冊HTML結(jié)構(gòu)；2.設(shè)計相冊CSS樣式；3.開發(fā)事件委托應(yīng)用；4.開發(fā)圖片切換功能。1.遵循Web開發(fā)規(guī)范；2.培養(yǎng)嚴(yán)謹?shù)木幊塘?xí)慣；3.培養(yǎng)分析和解決前端問題的能力；4.培養(yǎng)演繹思維能力；5.培養(yǎng)歸納思維能力。成果目標(biāo)PART3核心知識PART4任務(wù)實施19.3.1編寫HTML 19.3.2編寫CSS樣式 19.3.3編寫Javascript 19.3.4測試頁面PART5強化訓(xùn)練參照本任務(wù)開發(fā)過程和技術(shù)，設(shè)計開發(fā)主題相冊，實現(xiàn)縮略圖與大尺寸圖像的切換和翻頁功能。強化訓(xùn)練PART6學(xué)習(xí)成果評量學(xué)習(xí)成果測評等級評分指標(biāo)得分及格P1.能設(shè)計相冊HTML和樣式表

P2.能基于相冊原理和事件處理實現(xiàn)大尺寸圖像的顯隱功能

良好M1.能夠根據(jù)項目需求局部相冊界面和界面交互

優(yōu)秀D1.能夠根據(jù)項目需求定制相冊界面和功能

評語

感謝聆聽，祝您進步！任務(wù)20選項卡JavaScript前端開發(fā)模塊化教程任務(wù)導(dǎo)入contents目錄成果目標(biāo)核心知識任務(wù)實施強化訓(xùn)練學(xué)習(xí)成果評量PART1任務(wù)導(dǎo)入選項卡（Tabs）組件是Web頁面中常用功能，類似于Windows操作系統(tǒng)的選項卡，單擊一個標(biāo)簽項，就切換到該標(biāo)簽對應(yīng)的面板，而對于網(wǎng)頁，其行為也是非常類似。如新浪網(wǎng)的首頁大量應(yīng)用了選項卡，如圖191新浪選項卡所示。任務(wù)導(dǎo)入PART2成果目標(biāo)知識目標(biāo)技能目標(biāo)素質(zhì)目標(biāo)知識目標(biāo)技能目標(biāo)素質(zhì)目標(biāo)1.闡述表格常用標(biāo)簽；2.理解條紋表格實現(xiàn)原理；3.理解變量命名規(guī)范；4.理解變量作用域；5.理解元素style屬性；6.理解HTML中使用JavaScript方式。1.設(shè)計表格結(jié)構(gòu)和樣式；2.設(shè)計函數(shù)；3.善用getElementsByClassName；4.善用getElementsByTagName；5.善用addClass；6.善用mouseover、mouseout事件；7.善用事件委托；8.設(shè)置元素style屬性；9.HTML中使用JavaScript的方法。1.遵循Web開發(fā)規(guī)范；2.培養(yǎng)嚴(yán)謹?shù)木幊塘?xí)慣；3.培養(yǎng)分析和解決前端問題的能力；4.培養(yǎng)演繹思維能力；5.培養(yǎng)歸納思維能力。成果目標(biāo)PART3核心知識20.3.1選項卡HTML模型 20.3.2重置ul屬性 20.3.3浮動float 20.3.4絕對定位absolute 20.3.5選項卡切換原理PART4任務(wù)實施20.4.1編寫HTML 20.4.2編寫CSS 20.4.3編寫JavaScript腳本 20.4.4瀏覽器測試PART5強化訓(xùn)練結(jié)合本任務(wù)實施過程和相關(guān)技術(shù)，模仿制作新浪網(wǎng)（/）首頁選項卡。強化訓(xùn)練PART6學(xué)習(xí)成果評量學(xué)習(xí)成果測評等級評分指標(biāo)得分及格P1.能設(shè)計選項卡HTML頁面和樣式表

P2.能使用實現(xiàn)標(biāo)簽切換功能

良好M1.能夠根據(jù)項目需求修改選項卡界面

優(yōu)秀D1.能夠根據(jù)項目需求定制切換事件及效果

評語

感謝聆聽，祝您進步！任務(wù)21JavaScript抽獎器JavaScript前端開發(fā)模塊化教程任務(wù)導(dǎo)入contents目錄成果目標(biāo)核心知識任務(wù)實施強化訓(xùn)練學(xué)習(xí)成果評量PART1任務(wù)導(dǎo)入本任務(wù)利用數(shù)組操作開發(fā)一個適用于抽獎、房產(chǎn)搖號、車位搖號、學(xué)位搖號的抽獎原型，支持由數(shù)字序號方式抽獎，支持黑名單功能，完成后如圖211抽獎器效果圖所示，抽獎時，在表單中輸入抽獎總?cè)藬?shù)、排除范圍（黑名單）和抽獎人數(shù)，單擊抽獎按鈕生成抽獎號碼。任務(wù)導(dǎo)入PART2成果目標(biāo)知識目標(biāo)技能目標(biāo)素質(zhì)目標(biāo)知識目標(biāo)技能目標(biāo)素質(zhì)目標(biāo)1.理解數(shù)組的使用場景；2.理解數(shù)組的屬性和方法；3.理解數(shù)據(jù)的慣用法。1.編寫頁面結(jié)構(gòu)2.編寫CSS樣式3.編寫JavaScript1.遵循Web開發(fā)規(guī)范；2.培養(yǎng)嚴(yán)謹?shù)木幊塘?xí)慣；3.培養(yǎng)分析和解決前端問題的能力；4.培養(yǎng)演繹思維能力；5.培養(yǎng)歸納思維能力。成果目標(biāo)PART3核心知識21.3.1數(shù)據(jù)存儲 21.3.2數(shù)組 21.3.3創(chuàng)建數(shù)組 21.3.4數(shù)組元素的讀和寫 21.3.5數(shù)組元素的添加和刪除 21.3.6稀疏數(shù)組 21.3.7數(shù)組長度 21.3.8數(shù)組遍歷PART4任務(wù)實施21.4.1編寫HTML 21.4.2編寫CSS 21.4.3編寫JavaScript 21.4.4測試頁面PART5強化訓(xùn)練參