職業(yè)技術學?！禞avaScript程序設計》課程標準

《JavaScript程序設計》課程標準課程名稱：JavaScript程序設計專業(yè)大類：電子信息大類JavaScript程序設計課程代碼：0311124課程名稱：JavaScript程序設計課程性質(zhì)：必修課程類別：職業(yè)技術基礎課程適用專業(yè)：計算機應用技術、軟件技術、移動互聯(lián)應用技術開設學期：第一學期授課學時：48（理實一體）+16學時項目強化一、課程定位《JavaScript程序設計》是計算機應用技術、軟件技術、移動互聯(lián)應用技術專業(yè)的一門職業(yè)技術基礎課程，由淺入深地講解了JavaScript的基本語法、函數(shù)、事件、瀏覽器對象模型、文檔對象模型、對象、動畫、繪畫等內(nèi)容，采用理論結合實戰(zhàn)的方式闡釋JavaScript的語言特性功能。通過學習本門課程，學生能很好地掌握JavaScript腳本語言，提升網(wǎng)頁的可交互性及動畫效果，實現(xiàn)并且將新技術運用到實際的開發(fā)當中，提高自己開發(fā)Web程序的水平。二、課程設計以就業(yè)為導向，以能力為本位，不局限于單純的技能訓練，在培養(yǎng)學生職業(yè)崗位能力的基礎上，圍繞高素質(zhì)復合型技術技能型人才專業(yè)培養(yǎng)目標，培養(yǎng)學生的終身學習的能力和職業(yè)生涯發(fā)展所需的綜合素養(yǎng)。課程建設優(yōu)化傳統(tǒng)JavaScrip程序設計類課程教學內(nèi)容，設計教學情境，開發(fā)課程案例，建設課程教學資源，實施基于混合式教學的“教學做”一體化教學方式，采用過程式考核方式，提高課程教學質(zhì)量。課程教學按照：“提出工程實際案例、分析案例所需知識、知識準備、師生共同完成案例、布置任務、學生自主完成任務、小組交流、教師點評”的步驟進行。將課程基本知識點融于案例中，圍繞著案例來開展課堂教學活動，引導學生參與分析、討論，讓學生在具體的問題情境中，積極思考，主動探索。課程教學內(nèi)容符合職業(yè)技能培養(yǎng)要求，注重實踐環(huán)節(jié)，實踐性教學內(nèi)容占課程內(nèi)容的60﹪以上，課程既具有針對性、又具有技術性和綜合性，有效地培養(yǎng)了學生復雜靜態(tài)頁面的設計與開發(fā)能力。三、課程目標（一）課程總目標通過基于工作過程的教學實施，使學生學生能掌握JavaScript語言的基本編程思想，并能熟練利用JavaScript控制WEB頁面各級元素，實現(xiàn)WEB前端的驗證、動態(tài)展示等任務。讓學生能夠根據(jù)工作任務和要求，按網(wǎng)站設計的基本流程、需求規(guī)范，運用JavaScript腳本語言，獨立自主完成基于JavaScript技術的交互式復雜頁面的設計與制作，具有動態(tài)頁面設計實現(xiàn)的能力，具有交互式網(wǎng)頁設計的綜合運用能力。同時對接行業(yè)標準和崗位要求強化學生的職業(yè)道德意識和職業(yè)素質(zhì)養(yǎng)成意識；通過小組合作學習，培養(yǎng)學生團隊合作、協(xié)議溝通能力；為后續(xù)Web前端開發(fā)打下堅實的基礎。（二）課程具體目標1.知識目標（1）JavaScript基本語法（2）JavaScript函數(shù)和事件（3）BOM對象常用屬性和方法（4）DOM文檔對象和節(jié)點的操作方法（5）JavaScrip對象使用（6）JavaScrip動畫（7）Canvas繪畫和動畫。2.能力目標（1）能夠設計、制作和調(diào)試交互式動態(tài)頁面；（2）熟練掌握JavaScript基本語法、函數(shù)、事件（3）熟練使用BOM對象操作瀏覽器；（4）熟練使用DOM操作文檔和節(jié)點；（5）熟練使用JavaScrip對象實現(xiàn)表單的驗證；（6）能使用JavaScrip動畫實現(xiàn)動態(tài)頁面效果；（7）能使用Canvas繪畫和動畫實現(xiàn)動態(tài)頁面效果；3.素質(zhì)目標（1）培養(yǎng)學生良好的語言表達能力；（2）培養(yǎng)學生自主學習習慣和團隊合作能力，身心參與、手腦并用的勞動意識；（3）培養(yǎng)學生嚴謹細致的學習態(tài)度和追求完美的工匠精神；（4）樹立堅定的理想信念，厚植愛國主義情懷；四、課程內(nèi)容及學習情境根據(jù)Web前端開發(fā)工程師職業(yè)崗位的要求，遴選課程內(nèi)容，課程內(nèi)容打破學科體系，進行解構和重構。以真實的項目和任務為載體，基于Web前端開發(fā)的設計、開發(fā)與維護崗位的工作流程設置四個情境：1.JAVASCRIPT，2.CSS基礎應用，3.網(wǎng)頁布局設計，4.項目強化。課程的主要內(nèi)容和要求見表1。表1課程內(nèi)容和學習情境表序號學習情境學習載體主要學習內(nèi)容學習目標學時1情境1JavaScript程序設計技術儲備同學會網(wǎng)站任務1：任務1：技術儲備—JavaScript基本語法項目任務：無1.掌握JavaScript核心語法；2.掌握JavaScript表達式和運算符；3.掌握JavaScript流程控制語句4任務2：任務2：技術儲備—JavaScript函數(shù)與事件項目任務：無1.掌握JavaScript自定義函數(shù)；2.掌握JavaScript系統(tǒng)函數(shù)；3.掌握JavaScript事件；4.掌握JavaScript常用事件；4情境2使用DOM進行文檔和節(jié)點操作同學會網(wǎng)站任務3：使用BOM操作瀏覽器對象項目任務：編寫頁面加載時執(zhí)行的方法（global.js)1.掌握瀏覽器對象模型；2.掌握window對象；3.掌握history對象和location對象；4.掌握screen對象和navigator對象；4任務4：使用DOM對象獲取節(jié)點元素項目任務：編寫獲取元素和設置元素樣式的方法1.理解文檔對象模型基礎；2.掌握document對象；3.掌握節(jié)點對象；4任務5：使用DOM設置節(jié)點內(nèi)容和樣式實現(xiàn)圖片庫項目任務：使用圖片庫效果完成往昔歲月頁面1.掌握獲取和設置節(jié)點內(nèi)容；2.掌握設置節(jié)點樣式；3.綜合案例：圖片庫；42任務6：使用DOM動態(tài)添加和刪除節(jié)點實現(xiàn)購物車項目任務：實現(xiàn)在線留言頁面的留言添加和刪除功能1.掌握創(chuàng)建新節(jié)點；2.掌握動態(tài)添加節(jié)點；3.掌握動態(tài)刪除節(jié)點；4.綜合案例：購物車；43情境3JavaScript對象進階同學會網(wǎng)站任務7：使用JavaScript對象和數(shù)組實現(xiàn)省市聯(lián)動項目任務：使用數(shù)組實現(xiàn)報名參加頁面的省市聯(lián)動效果1.掌握JavaScript常用內(nèi)部對象；2.掌握自定義對象；3.掌握對象常用語句；4.掌握數(shù)組4任務8：使用String和RegExp對象實現(xiàn)表單驗證項目任務：為報名參加頁面添加表單驗證功能1.掌握String對象；2.掌握RegExp正則表達式對象；3.綜合案例：表單驗證；4情境4使用JavaScript動畫和繪畫同學會網(wǎng)站任務9：使用JavaScript實現(xiàn)動畫效果項目任務：編寫逐漸顯示、逐漸放大的動畫函數(shù)1.掌握使用setTimeOut迭代實現(xiàn)動畫；2.掌握使用setInterval實現(xiàn)定時動畫；3.掌握使用requestAnimationFrame請求動畫；4任務10：使用JavaScript動畫實現(xiàn)輪播圖片項目任務：使用輪播圖片效果完成校園風光頁面1.綜合案例1：鼠標懸停預覽；2.綜合案例2：輪播圖片4任務11：任務11：使用Canvas畫布繪制時鐘項目任務：首頁繪制動態(tài)時鐘1.掌握使用Canvas繪畫2.掌握使用Canvas操作圖片；3.掌握使用Canvas動畫；4.綜合案例：繪制時鐘4任務12：項目總結項目任務：編寫隨機生成姓名等通用方法1.復習JavaScript基本語法2.復習JavaScript文檔和節(jié)點3復習JavaScript對象4.復習JavaScript動畫和繪畫；44情境5項目強化同學會網(wǎng)站任務13：完善首頁功能1.定義菜單數(shù)組2.頁面加載時根據(jù)菜單數(shù)組添加頂部導航元素.3.完成首頁導航菜單項鼠標懸停事件：懸停顯示圖片介紹4任務14：制作班級名冊頁面功能1.初始化班級學生信息2.編寫顯示學生信息和姓名列表的方法3.為tab標簽（第N排）綁定點擊事件：點擊顯示第N排學生姓名列表4.為學生信息元素綁定點擊事件：點擊查看學生詳情4任務3：制作日程表頁面1.設置表格顏色隔行變色，鼠標懸停變色2.標題元素綁定點擊事件：點擊折疊或展開4任務4：完善在線留言頁面1.編寫通用清空表單函數(shù)（form.js)2.編寫通用驗證非空、郵件格式函數(shù)（form.js)3.編寫通用驗證表單函數(shù)（form.js)4.實現(xiàn)清空按鈕功能，5.在表單提交前添加驗證表單功能4五、教學設計學習情境一：JavaScript程序設計技術儲備項目名稱：“同學會”網(wǎng)站學時：8教學目標掌握JavaScrip核心語法掌握JavaScript表達式與運算符掌握JavaScript流程控制語句掌握JavaScript自定義函數(shù)掌握JavaScript系統(tǒng)函數(shù)掌握JavaScript事件教學重點掌握JavaScript核心語法掌握JavaScript流程控制語句掌握JavaScript事件學習難點掌握JavaScript自定義函數(shù)掌握JavaScript事件子任務主要教學內(nèi)容任務1：技術儲備—JavaScript基本語法1.掌握三種JavaScript腳本書寫位置；2.掌握JavaScript數(shù)據(jù)類型，定義變量、書寫注釋3.掌握算術、比較和邏輯運算符的使用4.掌握順序、條件和循環(huán)結構的使用，使用switch結構判斷當前是否為工作日項目任務：無任務2：技術儲備—JavaScript函數(shù)與事件1.掌握自定義函數(shù)的定義、參數(shù)、返回值，掌握使用匿名函數(shù)；2.掌握系統(tǒng)函數(shù)：parseInt()、parseFloat()、isNaN()、eval()3.掌握使用內(nèi)聯(lián)和腳本模式綁定事件4.掌握基本的鼠標、頁面、鍵盤和表單事件項目任務：無教學方法建議任務驅(qū)動方式組織教學內(nèi)容，采用理實一體化教學方式，學生按照任務進行實操并進行自我評價以及小組互評，老師按照每個小組的完成情況對小組進行評分并總結。備注學習情境二：使用DOM進行文檔和節(jié)點操作項目名稱：“同學會”網(wǎng)站學時：16教學目標1.理解瀏覽器對象模型；2.掌握window,history,location,screen,navigator對象使用；3.理解文檔對象模型；4.掌握document對象使用5.掌握節(jié)點對象使用6.掌握如何獲取節(jié)點對象7.掌握獲取和設置節(jié)點內(nèi)容8.掌握獲取和設置節(jié)點樣式9.掌握動態(tài)添加和刪除節(jié)點教學重點1.理解文檔對象模型；；2.掌握document對象使用；3.掌握節(jié)點對象使用；4.掌握如何獲取節(jié)點對象5.掌握獲取和設置節(jié)點內(nèi)容6.掌握獲取和設置節(jié)點樣式學習難點1.掌握window,history,location,screen,navigator對象使用；2.掌握動態(tài)添加和刪除節(jié)點；子任務主要教學內(nèi)容任務3：使用BOM操作瀏覽器對象1.理解瀏覽器對象模型；2.使用window對象操作彈出框和窗口3.使用history對象實現(xiàn)頁面的跳轉(zhuǎn)4.使用location對象獲得頁面地址及端口信息5.使用screen對象獲取屏幕相關信息6.使用navigator對象獲得瀏覽器相關信息項目任務：編寫頁面加載時執(zhí)行的方法（global.js)任務4：使用DOM對象獲取節(jié)點元素1.理解文檔對象模型；2.使用document對象常用屬性和方法3.掌握通過id、name、標簽名及類名獲取節(jié)點元素的方法4.掌握判斷節(jié)點類型的方法5.使用節(jié)點層級關系獲取節(jié)點項目任務：編寫獲取元素和設置元素樣式的方法（global.js)任務5：使用DOM設置節(jié)點內(nèi)容和樣式實現(xiàn)圖片庫1.使用innerHTML\innerText\textContent獲取節(jié)點文本內(nèi)容；2.使用屬性名和getAttribute\setAttribute方法獲取和設置節(jié)點屬性3.使用value值獲取控件的輸入4.掌握通過style屬性和class屬性設置樣式5.完成綜合案例：圖片庫項目任務：使用圖片庫效果完成往昔歲月頁面任務6：使用DOM動態(tài)添加和刪除節(jié)點實現(xiàn)購物車1.掌握創(chuàng)建新節(jié)點和克隆新節(jié)點的方法；2.使用appendChild和insertBefore方法向父節(jié)點中添加子節(jié)點3.掌握刪除節(jié)點的兩種方法：刪除當前節(jié)點和刪除子節(jié)點5.完成綜合案例：購物車項目任務：現(xiàn)在線留言頁面的留言添加和刪除功能教學方法建議任務驅(qū)動方式組織教學內(nèi)容，采用理實一體化教學方式，學生按照任務進行實操并進行自我評價以及小組互評，老師按照每個小組的完成情況對小組進行評分并總結。備注學習情境三：JavaScript對象進階項目名稱：“同學會”網(wǎng)站學時：8教學目標1.掌握Date對象使用2.掌握Image對象使用3.掌握Math對象使用4.掌握自定義對象的聲明和使用方法5使用with和forin語句操作對象6掌握數(shù)組的定義和遍歷7.掌握string對象的常用方法8.掌握正則表達式的使用教學重點1.掌握Date對象使用2.掌握自定義對象的聲明和使用方法3.掌握string對象的常用方法4.掌握JAVASCRIPT動畫屬性5.掌握正則表達式的使用學習難點1.使用with和forin語句操作對象2.掌握數(shù)組的定義和遍歷3.正則表達式的使用子任務主要教學內(nèi)容任務7：使用JavaScript對象和數(shù)組實現(xiàn)省市聯(lián)動1.使用Date對象展示格式化日期時間；2.使用Image對象緩存圖像資源；3.使用Math對象制作猜數(shù)字游戲；4.使用多種方式自定義對象5.使用with和forin語句簡化對象操作6.使用非數(shù)字下標的數(shù)組項目任務：使用數(shù)組實現(xiàn)報名參加頁面的省市聯(lián)動效果任務8：使用使用String和RegExp對象實現(xiàn)表單驗證1.使用string對象的常用方法做簡單的表單驗證；2.使用正則表達式對象結合string對象的相關方法做復雜的表單樣式；3.綜合案例；表單驗證項目任務：為報名參加頁面添加表單驗證功能教學方法建議任務驅(qū)動方式組織教學內(nèi)容，采用理實一體化教學方式，學生按照任務進行實操并進行自我評價以及小組互評，老師按照每個小組的完成情況對小組進行評分并總結。備注學習情境四：使用JavaScript動畫和繪畫項目名稱：“同學會”網(wǎng)站學時：16教學目標1.理解動畫的基本原理2.掌握使用setTimeOut迭代實現(xiàn)動畫3.掌握使用setInterval實現(xiàn)定時動畫4.掌握使用requestAnimationFrame請求動畫幀5.掌握使用Canvas繪畫6.掌握使用Canvas動畫教學重點1.理解動畫的基本原理2.掌握使用setTimeOut迭代實現(xiàn)動畫3.掌握使用setInterval實現(xiàn)定時動畫4掌握使用requestAnimationFrame請求動畫幀學習難點1.掌握使用Canvas動畫子任務主要教學內(nèi)容任務9：使用JavaScript實現(xiàn)動畫效果1.使用setTimeOut迭代實現(xiàn)移動元素的動畫2.使用setInterval實現(xiàn)電子時鐘3.使用requestAnimationFrame請求動畫幀實現(xiàn)元素平移項目任務：編寫逐漸顯示、逐漸放大的動畫函數(shù)（global.js)任務10：使用JavaScript動畫實現(xiàn)輪播圖片1.完成綜合案例1：鼠標懸停預覽2.完成綜合案例2：輪播圖片項目任務：使用輪播圖片效果完成校園風光頁面任務11：使用Canvas畫布繪制時鐘1.使用Canvas畫布繪制矩形2.使用Canvas畫布繪制路徑3.使用Canvas畫布操作圖片4.使用Canvas動畫實現(xiàn)飛像蝴蝶效果5.使用Canvas動畫繪制動態(tài)電子時鐘項目任務：首頁繪制動態(tài)時鐘任務12：項目總結1.復習JavaScript基本語法2.復習JavaScript文檔和節(jié)點3.復習JavaScript對象4.復習JavaScript動畫和繪畫項目任務：編寫隨機生成姓名等通用方法教學方法建議以理論講解、演示為主，學生按照教學內(nèi)容進行實操并進行自我評價以及小組互評，老師按照每個小組的完成情況對小組進行評分并總結，采用任務驅(qū)動教學。備注學習情境五：項目強化項目名稱：“同學會”網(wǎng)站學時：16教學目標1.掌握站點中腳本的編寫規(guī)范和語法2.掌握使用腳本操作節(jié)點的方法3.掌握使用字符串和正則表達式完成表單驗證4.掌握JavaScript動畫的設計實現(xiàn)教學重點1.握使用腳本操作節(jié)點的方法2.掌握使用字符串和正則表達式完成表單驗證學習難點1.掌握JavaScript動畫的設計實現(xiàn)子任務主要教學內(nèi)容任務13：完善首頁功能1.初始化班級學生信息2.編寫顯示學生信息和姓名列表的方法3.為tab標簽（第N排）綁定點擊事件：點擊顯示第N排學生姓名列表4.為學生信息元素綁定點擊事件：點擊查看學生詳情任務14：制作班級名冊頁面功能1.設置表格顏色隔行變色，鼠標懸停變色2.標題元素綁定點擊事件：點擊折疊或展開任務15：制作日程表頁面功能1.編寫通用清空表單函數(shù)（form.js)2.編寫通用驗證非空、郵件格式函數(shù)（form.js)3.編寫通用驗證表單函數(shù)（form.js)4.實現(xiàn)清空按鈕功能，5.在表單提交前添加驗證表單功能任務16：完善在線留言表單頁面功能1.初始化班級學生信息2.編寫顯示學生信息和姓名列表的方法3.為tab標簽（第N排）綁定點擊事件：點擊顯示第N排學生姓名列表4.為學生信息元素綁定點擊事件：點擊查看學生詳情教學方法建議以理論講解、演示為主，學生按照教學內(nèi)容進行實操并進行自我評價以及小組互評，老師按照每個小組的完成情況對小組進行評分并總結，采用任務驅(qū)動教學。備注六、實施建議（一）教材選用與編寫根據(jù)專業(yè)人才培養(yǎng)方案和課程教學目標選用理論實踐一體化或項目課程教材。推薦教材1.HTML5+JAVASCRIPTJAVASCRIPT程序設計，黑馬程序員，人民郵電出版社，2019參考書：1.工業(yè)和信息化部教育與考試中心.Web前端開發(fā)（初級）上冊北京:電子工業(yè)出版社,20192.工業(yè)和信息化部教育與考試中心.Web前端開發(fā)（初級）下冊北京:電子工業(yè)出版社,20193.北京新奧時代科技有限責任公司.Web前端開發(fā)實訓案例教程（初級）北京:電子工業(yè)出版社,20194.網(wǎng)站5.MDN網(wǎng)站（二）課程資源的開發(fā)與利用1.開發(fā)課件、微課等教學資源；2.選用符合教學要求的錄像、課件、視頻、資料文獻等資源輔助教學；3.依托學校職教云教學平臺進行課程資源建設。（三）教學基本條件1．專業(yè)教師的要求（1）具有前端新知識、新技能的學習能力和創(chuàng)新創(chuàng)業(yè)能力；（2）具備前端架構設計能力；（3）具備移動端開發(fā)能力；（4）具備前端組件化能力；（5）具備網(wǎng)站性能優(yōu)化能力（6）具有較強的工作過程系統(tǒng)課程教學設計能力；（7）具有較強的行動導向教學組織與實施能力。2．學習場地、設施的要求為保證項目、任務的實施與完成，本課程必須在實踐理論一體化教室完成教學過程。（四）教學建議1.本課程以實際的典型應用為基礎構建學習載體，建議在每個學習情境的教學實施中，完全采用項目引導、任務驅(qū)動的行動導向教學，并以小組協(xié)作方式完成各項工作任務。2.以Web項目的設計、實現(xiàn)作為驅(qū)動主線，實現(xiàn)理論實踐一體化教學。學生通過感性認識，理性思維，動手操作，完成Web項目的分析、設計、編碼、調(diào)試和運行，在做中學，在學中做，最終達到真正聽得懂，學得會，做得好，切實提高動手能力和分析問題、解決問題的綜合素質(zhì)。3.在教學過程中，要創(chuàng)設工作情景，同時應加大實踐實操的容量，要緊密結合職業(yè)技能等級證書的考證，加強考證的實操項目的訓練，在實踐實操過程中，使學生掌握HTML靜態(tài)頁面設計與制作應有的技能，提高學生的崗位適應能力。4.在教學過程中，要盡量應用多媒體、動畫視頻、演示等教學資源輔助教學，幫助學生理解相關概念。5.在教學過程中，在教學過程中，關注軟件產(chǎn)業(yè)發(fā)展新業(yè)態(tài)、新模式，對接新技術、新工藝、新規(guī)范發(fā)展趨勢，貼近生產(chǎn)現(xiàn)場。為學生提供職業(yè)生涯發(fā)展的空間，努力培養(yǎng)學生參與社會實踐的創(chuàng)新精神和職業(yè)能力。6.教學過程中教師應積極引導學生提升職業(yè)素養(yǎng)，培養(yǎng)職業(yè)道德。七、教學評價（一）成績構成本課程主要以過程考核為主，考核涵蓋學習情境全過程，既評價學生專業(yè)能力，也評價學生交流溝通、團隊協(xié)作、自主學習、問題的分