Javascript程序設(shè)計 實訓(xùn)指導(dǎo)書+課程整體設(shè)計 實訓(xùn)項目1-7：JavaScript環(huán)境搭建-驗證登陸悠閑網(wǎng)

一、課程基本情況課程名稱：javascript程序設(shè)計課程編碼：學(xué)時：64適用專業(yè)：軟件技術(shù)課程類型：□“純理論課”（A類）t“實踐+理論課”（B類）□“純實踐課”（C類）課程性質(zhì)：□公共基礎(chǔ)課程□專業(yè)基礎(chǔ)課程t專業(yè)核心課程□專業(yè)拓展課程前導(dǎo)課程：后續(xù)課程：二、課程設(shè)置1.課程性質(zhì)（一）課程定位《Javascript程序設(shè)計》是軟件技術(shù)專業(yè)的專業(yè)核心課，符合WEB前端工程師和Javascript開發(fā)工程師崗位中對于使用javascript設(shè)計網(wǎng)站特效能力的需要。本課程培養(yǎng)學(xué)生具備JavaScript等腳本設(shè)計網(wǎng)站特效能力該課程深入淺出，結(jié)合實際案例系統(tǒng)地講解了使用css、JavaScript和jQuery設(shè)計動態(tài)網(wǎng)頁的知識和技巧，它定位于WEB技術(shù)開發(fā)，是WEB前端技術(shù)開發(fā)的必備課程，在學(xué)習(xí)了html+css網(wǎng)頁設(shè)計基礎(chǔ)、編程基礎(chǔ)、網(wǎng)頁美工的基礎(chǔ)下，為HTML5移動web開發(fā)技術(shù)、php框架開發(fā)技術(shù)、javaweb開發(fā)技術(shù)等課程的學(xué)習(xí)打下基礎(chǔ)，在整個課程體系中具有承前啟后的重要作用。（二）課程作用《Javascript程序設(shè)計》課程任務(wù)是培養(yǎng)網(wǎng)頁設(shè)計、網(wǎng)頁美工以及WEB綜合開發(fā)的初、中級專業(yè)人才，通過本課程的學(xué)習(xí)，學(xué)生能掌握JavaScript語言的基本編程思想，并能熟練利用JavaScript控制WEB頁面各級元素，擁有設(shè)計網(wǎng)站特效的能力，實現(xiàn)WEB前端的驗證、動態(tài)展示等任務(wù)。課程目標課程的整體目標是培養(yǎng)學(xué)生能夠使用javascript開發(fā)網(wǎng)站特效的實際工作技能，通過本課程的學(xué)習(xí)，使學(xué)生形成一定的學(xué)習(xí)能力、溝通與團隊的協(xié)作能力，形成良好的思考問題、分析問題和解決問題的能力，養(yǎng)成良好的職業(yè)素養(yǎng)。遵守國家關(guān)于軟件與信息技術(shù)的相關(guān)法律法規(guī)，形成關(guān)鍵性的軟件開發(fā)與應(yīng)用的能力。最終成為具備較全面的網(wǎng)站開發(fā)與信息服務(wù)的技術(shù)人才。根據(jù)高職教育的特點，按照學(xué)院“小學(xué)校、大課堂”的辦學(xué)思路和“校企融合、同興共贏”的辦學(xué)模式，積極探索“校企合作、工學(xué)結(jié)合”的人才培養(yǎng)模式，積極探索以實踐能力考核為主的課程評價方法，切實提高學(xué)生的職業(yè)能力和就業(yè)競爭力。

2.課程設(shè)計思路通過本課程的學(xué)習(xí)，使學(xué)生對HTML腳本、CSS代碼和JavaScript特效代碼等網(wǎng)頁基本組成元素有全面和充分的認識，能熟練地使用以上代碼開發(fā)出漂亮的靜態(tài)網(wǎng)頁，制作出炫酷的網(wǎng)頁效果，并為后繼的動態(tài)網(wǎng)站課程的學(xué)習(xí)打好基礎(chǔ)。為了學(xué)生能掌握JavaScript語言的基本編程思想，并能熟練利用JavaScript控制WEB頁面各級元素，實現(xiàn)WEB前端的驗證、動態(tài)展示等任務(wù)本課程通過設(shè)計包括JavaScript的基礎(chǔ)語法，常用開發(fā)工具和調(diào)試工具，簡單的CSS知識，DOM模型及事件機制和常見事件處理等內(nèi)容。針對學(xué)生的學(xué)情、層次和高職學(xué)生的特點，在本課程的日常教學(xué)中努力做到理論教學(xué)以應(yīng)用為目的，以必需、夠用為度，專業(yè)教學(xué)加強針對性和應(yīng)用性。以職業(yè)能力培養(yǎng)為主線，使教學(xué)內(nèi)容按照能力培養(yǎng)目標進行重組、整合與優(yōu)化，教學(xué)方法體現(xiàn)能力培養(yǎng)，廣泛采用“案例”、“參與式”、“討論式”、“啟發(fā)式”等生動活潑的教學(xué)形式，有效利用現(xiàn)代教育技術(shù)組織教學(xué)，并加強課程的組織管理、運行管理和質(zhì)量管理以及課程的過程評價與目標評價。具體措施體現(xiàn)在以下幾個方面：?基于典型工作過程分析，構(gòu)建課程體系；?職業(yè)能力培養(yǎng)為核心，設(shè)計教學(xué)內(nèi)容；?以提高學(xué)生職業(yè)能力和職業(yè)素養(yǎng)為目標，重視實踐教學(xué)；?融合職業(yè)資格標準，推行雙證書制；?校企合作，共建新型實踐教學(xué)基地；?校企合作，形成實踐技能課主要由企業(yè)兼職教師講授的機制。3.課程目標3.1知識目標熟練掌握靜態(tài)網(wǎng)頁設(shè)計所需要的HTML、CSS和JavaScript等知識掌握JavaScript、CSS、DOM、Ajax等技術(shù)能夠熟練地利用Javascript和Jquery等技術(shù)進行網(wǎng)站特效的設(shè)計。3.2能力目標能使用HTML、CSS和JavaScript設(shè)計靜態(tài)網(wǎng)站；能使用JavaScript等腳本文件設(shè)計網(wǎng)站特效。3.3素質(zhì)目標學(xué)生具備對程序設(shè)計的興趣，充分發(fā)揮學(xué)生的自主學(xué)習(xí)能力；學(xué)生具備與人交流、與人合作及信息處理的能力；學(xué)生具備分析問題、解決問題及創(chuàng)造思維能力；4.預(yù)期學(xué)習(xí)成果在完成課程后，學(xué)生將會：編號具體內(nèi)容1掌握Javascript基礎(chǔ)內(nèi)容2制作js幻燈片網(wǎng)站首頁3制作浮動的圖片廣告4設(shè)計Javascript仿Flash圖片輪翻5使用CSS完成神奇創(chuàng)意的相框6制作班級相冊網(wǎng)站7仿淘寶網(wǎng)站首頁設(shè)計8仿淘寶網(wǎng)站登陸頁面設(shè)計三、課程內(nèi)容與安排周次學(xué)習(xí)情境/項目/單元（選其一）子情境/子項目/子單元（選其一）學(xué)習(xí)內(nèi)容（支撐知識）教學(xué)方法及手段成果形式參考學(xué)時第1周JavaScript概述1.JavaScript的起源2.瀏覽器之爭3.Javascript的實現(xiàn)4．Javascript小體驗JavaScript的起源及實現(xiàn)案例教學(xué)法、項目教學(xué)法、任務(wù)驅(qū)動教學(xué)法、講授法JavaScript環(huán)境搭建2JavaScript案例演示搭建JavaScript開發(fā)環(huán)境第1-4周JavaScript基礎(chǔ)1.JavaScript語法2.變量、數(shù)據(jù)類型、關(guān)鍵字、保留字、條件語句、循環(huán)語句、函數(shù)、對象、bom基礎(chǔ)JavaScript類型案例教學(xué)法、項目教學(xué)法、任務(wù)驅(qū)動教學(xué)法、講授法輸入數(shù)字判斷程序網(wǎng)頁12JavaScript變量與關(guān)鍵字條件語句打印三角形循環(huán)語句函數(shù)注冊判斷函數(shù)網(wǎng)頁對象BOM基礎(chǔ)第4-5周JavaScript開發(fā)1.JavaScript應(yīng)用環(huán)境2.常用開發(fā)工具3.常用調(diào)試工具常用開發(fā)工具介紹案例教學(xué)法、項目教學(xué)法、任務(wù)驅(qū)動教學(xué)法、講授法簡易計算器4常用調(diào)試工具介紹第5-7周CSS基礎(chǔ)1.css的概念2.網(wǎng)頁設(shè)計中的css3.使用css控制頁面4.css選擇器5.css設(shè)置文字效果CSS的使用樣式案例教學(xué)法、項目教學(xué)法、任務(wù)驅(qū)動教學(xué)法、講授法文字環(huán)繞圖片效果8CSS選擇器鏈接文字樣式設(shè)定網(wǎng)頁CSS文字與圖片效果第7-9周CSS進階1.DIV和SPAN標記布局網(wǎng)頁2.CSS布局定位3.盒子浮動和定位DIV和SPAN標記布局網(wǎng)頁案例教學(xué)法、項目教學(xué)法、任務(wù)驅(qū)動教學(xué)法、講授法盒模型的應(yīng)用8第9-11周DOM模型1.DOM及DOM技術(shù)簡介2.網(wǎng)頁中的DOM模型框架3、DOM模型中的節(jié)點4.使用非標準DOMinnerHTML屬性DOM技術(shù)簡介案例教學(xué)法、項目教學(xué)法、任務(wù)驅(qū)動教學(xué)法、講授法動態(tài)修改頁面圖片8網(wǎng)頁中的DOM模型框架元素節(jié)點、文本節(jié)點、屬性節(jié)點檢查瀏覽器支持的DOM標準級別DOM與CSS第11-12周JavaScript高級篇1.事件機制簡介2.常用事件函數(shù)事件機制簡介案例教學(xué)法、項目教學(xué)法、任務(wù)驅(qū)動教學(xué)法、講授法屏蔽鼠標右鍵網(wǎng)頁伸縮的兩級菜單網(wǎng)頁4常用事件函數(shù)第12-14周表格與表單1.cs控制表格樣式2.DOM動態(tài)控制表格3.控制表單以及表單元素的使用使用CSS控制表格樣式案例教學(xué)法、項目教學(xué)法、任務(wù)驅(qū)動教學(xué)法、講授法自動提示的文本框8使用DOM動態(tài)控制表格用JavaScript控制多次提交網(wǎng)頁控制表單第14-15周JavaScript設(shè)計與優(yōu)化1．常見錯誤和異常2.錯誤處理3.使用調(diào)試器4.JavaScript優(yōu)化常見錯誤和異常案例教學(xué)法、項目教學(xué)法、任務(wù)驅(qū)動教學(xué)法、講授法通過try…catch逐漸縮小范圍查找錯誤其他設(shè)計常用注意事項6錯誤處理使用調(diào)試器JavaScript優(yōu)化Ajax異步交互3.Aja框架2.jQuery的$3.jQuery與CSS34.jQuery開發(fā)和調(diào)試工具2.直接獲取、編輯內(nèi)容3.處理表單元素的值4.處理頁面事件2.元素顯隱的漸入漸出效果3.幻燈片效果第16周復(fù)習(xí)4總結(jié)64四、教學(xué)方法與手段1.教學(xué)模式的設(shè)計與創(chuàng)新為了使學(xué)生更容易掌握新知識點，在授課時先將網(wǎng)頁特效運行效果演示，引導(dǎo)學(xué)生進行思考：如何實現(xiàn)這些效果，需要學(xué)習(xí)哪些知識；然后再糾正學(xué)生的思路，講解相應(yīng)知識點，學(xué)生根據(jù)自己的思路和教師所講思路知識點的對比，找到更好的方法進行實現(xiàn)特效，避免灌輸式教學(xué)，以達到快速掌握知識點的目的。1演示過程，講練結(jié)合。

這是計算機教學(xué)中使用最多的教學(xué)方法，可以在入門階段使用此方法。多數(shù)學(xué)校機房都配置了電子教室一類的多媒體教學(xué)軟件，這樣教師在講授新知識時可以鎖定學(xué)生機，演示操作過程，學(xué)生練習(xí)時可以開放學(xué)生機。但是這種方法用多了，學(xué)生會覺得枯燥，也不易培養(yǎng)學(xué)生創(chuàng)造力。2項目教學(xué)法通過項目設(shè)計培養(yǎng)學(xué)生的職業(yè)素養(yǎng)。在項目設(shè)計過程中，加深對知識的理解，提高對編程工具使用的熟練程度，掌握軟件項目開發(fā)的一般方法、步驟與流程，熟悉程序設(shè)計的基本工作規(guī)范，養(yǎng)成良好的編程習(xí)慣。同時，通過協(xié)作完成軟件項目開發(fā)，培養(yǎng)學(xué)生的溝通交流能力、組織協(xié)調(diào)能力、團隊合作能力和自主學(xué)習(xí)能力。項目開發(fā)過程中，每4-5人一組，在教師的指導(dǎo)下，制定項目開發(fā)計劃、時間進度、工作流程等，項目組成員可以具體的分工協(xié)作。完成項目測試，項目文檔制作等。如教師安排一個仿淘寶網(wǎng)頁設(shè)計，學(xué)生進行分組，合作完成，并且展示作品。2.教學(xué)方法的應(yīng)用預(yù)期學(xué)習(xí)成果教學(xué)方法方法1名稱方法2名稱方法3名稱方法4名稱成果1第一個JavaScript網(wǎng)頁案例教學(xué)法項目教學(xué)法

任務(wù)驅(qū)動教學(xué)法講授法成果2輸入數(shù)字判斷程序網(wǎng)頁案例教學(xué)法任務(wù)驅(qū)動教學(xué)法項目教學(xué)法

講授法成果3輸出99乘法表程序網(wǎng)頁任務(wù)驅(qū)動教學(xué)法講授法案例教學(xué)法項目教學(xué)法成果4注冊判斷函數(shù)網(wǎng)頁任務(wù)驅(qū)動教學(xué)法講授法案例教學(xué)法項目教學(xué)法成果5打開工具的動作案例教學(xué)法任務(wù)驅(qū)動教學(xué)法項目教學(xué)法

講授法成果6具有文字樣式的網(wǎng)頁講授法項目教學(xué)法

任務(wù)驅(qū)動教學(xué)法案例教學(xué)法成果7菜單頁面任務(wù)驅(qū)動教學(xué)法講授法案例教學(xué)法項目教學(xué)法成果8布局特色的網(wǎng)頁案例教學(xué)法項目教學(xué)法

任務(wù)驅(qū)動教學(xué)法講授法成果9屏蔽鼠標右鍵網(wǎng)頁、伸縮的兩級菜單網(wǎng)頁講授法項目教學(xué)法

任務(wù)驅(qū)動教學(xué)法案例教學(xué)法成果10自動提示的文本框網(wǎng)頁任務(wù)驅(qū)動教學(xué)法講授法案例教學(xué)法項目教學(xué)法成果11用JavaScript控制多次提交網(wǎng)頁任務(wù)驅(qū)動教學(xué)法講授法案例教學(xué)法項目教學(xué)法成果12測試內(nèi)容網(wǎng)頁講授法項目教學(xué)法

任務(wù)驅(qū)動教學(xué)法案例教學(xué)法成果13制作可自動校驗的表單網(wǎng)頁案例教學(xué)法任務(wù)驅(qū)動教學(xué)法項目教學(xué)法

講授法成果14Jquery的網(wǎng)頁講授法項目教學(xué)法任務(wù)驅(qū)動教學(xué)法案例教學(xué)法成果15快餐配送頁面案例教學(xué)法項目教學(xué)法

任務(wù)驅(qū)動教學(xué)法講授法成果16制作伸縮的導(dǎo)航條網(wǎng)頁任務(wù)驅(qū)動教學(xué)法講授法案例教學(xué)法項目教學(xué)法五、課程考核評價1.課程考核方式改革（一）教學(xué)方法和教學(xué)手段結(jié)合軟件與信息服務(wù)專業(yè)學(xué)生特點，基于行動導(dǎo)向，根據(jù)每個任務(wù)的內(nèi)容特點，以真實項目進行引導(dǎo)開展教學(xué)。整個課程以任務(wù)實訓(xùn)為主線，以技能培養(yǎng)為核心來組織教學(xué)。學(xué)生在完成項目分解的任務(wù)中學(xué)習(xí)相關(guān)知識，并利用這些知識解決項目中的問題。（1）項目教學(xué)法課程將WEB前端開發(fā)中的某個應(yīng)用作為一個項目，并分解為多個小的任務(wù)。每個任務(wù)的學(xué)習(xí)過程以工作過程為導(dǎo)向，最終形成學(xué)生的職業(yè)行動能力。（2）小組教學(xué)法以6人為一個單位，成立教學(xué)小組。單人完成的項目，組內(nèi)可以互相學(xué)習(xí)，督促和評價。大型復(fù)雜的項目，小組成員共同完成。（3）視頻展示法教師對講授內(nèi)容充分提煉，將復(fù)雜的操作錄制下來，方便學(xué)生反復(fù)觀看和模仿，形象生動的動態(tài)展示和講解。使抽象、難懂的教學(xué)內(nèi)容變得直觀、易懂和容易掌握；提高了教學(xué)效率；便于學(xué)生自主學(xué)習(xí)。（二）教學(xué)手段（1）充分利用多媒體實訓(xùn)室和多媒體課件本課程的課堂講授全部在實訓(xùn)室進行，便于使用投影設(shè)備，采用多媒體教學(xué)手段。開發(fā)和使用的多媒體課件制作精美并含有動態(tài)演示，其有效地增強了學(xué)生的學(xué)習(xí)興趣。（2）鼓勵自主學(xué)習(xí)制作網(wǎng)絡(luò)課件，并將教學(xué)大綱、教案、習(xí)題等同時上網(wǎng)開放，激發(fā)學(xué)生學(xué)習(xí)興趣，鼓勵學(xué)生自主學(xué)習(xí)，同時可以緩解課程信息量增加與壓縮授課學(xué)時之間的矛盾。（3）嚴格考評制度設(shè)計了內(nèi)容豐富、形式多樣的習(xí)題作業(yè)，以利于學(xué)生理解和掌握所學(xué)知識。嚴格檢查平時作業(yè)完成情況，及時反饋作業(yè)中反映的問題。采用定期模擬考試的方法及時檢驗學(xué)生階段性學(xué)習(xí)成果。建立科學(xué)合理的考核評價制度，以促進學(xué)生的學(xué)習(xí)積極性和自我學(xué)習(xí)的動力。（4）充分利用網(wǎng)絡(luò)環(huán)境和資源充分利用互聯(lián)網(wǎng)資源、本課程網(wǎng)站資源，在網(wǎng)上開展教學(xué)活動，包括網(wǎng)絡(luò)課程學(xué)習(xí)、自主學(xué)習(xí)、課后復(fù)習(xí)、課件下載、作業(yè)提交、專題討論、網(wǎng)上答疑等，使學(xué)生可以不受時間、地點的限制，方便地進行學(xué)習(xí)。2.課程評價標準本課程實施綜合考評，注重考核學(xué)生掌握技能的水平，同時注重學(xué)習(xí)態(tài)度和最終成績的關(guān)聯(lián)，以全面綜合地評定學(xué)生的能力。（1）平時技能考核：布置課堂作業(yè)以及拓展實訓(xùn)項目，使學(xué)生能獨立完成大部分的技能訓(xùn)練，小項目及活動的技能，均以個人為考核單位，在平時考核和記錄。成績包括學(xué)習(xí)態(tài)度及項目技能完成情況。（2）期末考試采取開卷方式，試卷根據(jù)本課程的教學(xué)要求，并結(jié)合教學(xué)實際進行設(shè)計。（3）按平時成績占40%、期末成績占60%的標準給出總評成績。具體如下圖所示。考勤課堂作業(yè)課后作業(yè)實訓(xùn)報告期末考試其他10%10%5%5%60%10%六、參考文獻與資料（一）選用教材： 校本教材《Javascript程