JavaScript程序設(shè)計實例教程教案第11單元

《用戶登陸及密碼修改》《JavaScript程序設(shè)計》課第11單元課程單元教學(xué)設(shè)計（2019～2020學(xué)年第1學(xué)期）所屬系部：計算機(jī)與通信工程學(xué)院制定人：合作人：制定時間：2020.8***學(xué)院教務(wù)處制

JavaScript程序設(shè)計課程單元教學(xué)設(shè)計單元標(biāo)題：密碼修改遮罩鎖屏效果單元教學(xué)學(xué)時2在整體設(shè)計中的位置第11次授課班級16移動開發(fā)班上課時間7周10月17日第1節(jié)至7周10月17日第2節(jié)上課地點計算機(jī)實驗室教學(xué)目標(biāo)能力目標(biāo)知識目標(biāo)素質(zhì)目標(biāo)1.能夠?qū)崿F(xiàn)用戶登陸及密碼修改的遮罩鎖屏效果。掌握窗口視口的獲取樹立學(xué)習(xí)信心；培養(yǎng)討論思考的習(xí)慣能力訓(xùn)練任務(wù)任務(wù)：用戶登陸及密碼修改的遮罩鎖屏效果教學(xué)組織：帶領(lǐng)學(xué)生了解課程任務(wù)講解javascript操作樣式屬性實現(xiàn)遮罩鎖屏效果設(shè)計實現(xiàn)用戶登陸及密碼修改的遮罩鎖屏效果。本次課使用的外語單詞css3div+cssJavaScriptDocumentgetElementByIdmenustyledisplaymarginpositionbackgroundbackground-repeat案例和教學(xué)材料案例：密碼修改的遮罩鎖屏效果教學(xué)材料：1.教材名稱：《JavaScript程序設(shè)計實例教程》第2版.主編：程樂、鄭麗萍、劉萬輝.出版社：機(jī)械工業(yè)出版社，出版日期：2020.32.教學(xué)多媒體課件，項目源文件3.多媒體資料：/course/HCIT-12067068284.儀器與設(shè)備：計算機(jī)等

單元教學(xué)進(jìn)度設(shè)計（綱要）步驟教學(xué)內(nèi)容及能力/知識目標(biāo)教師活動學(xué)生活動時間（分鐘）1情境導(dǎo)入介紹本節(jié)課的教學(xué)目標(biāo)．導(dǎo)入本次課教學(xué)情境學(xué)生了解工作情境22引入任務(wù)：密碼修改的遮罩鎖屏效果交代任務(wù)學(xué)生接受任務(wù)33知識點講解密碼修改的遮罩鎖屏效果講解元素的添加和樣式的建立掌握元素的添加和樣式的建立10講解動態(tài)改變元素的樣式掌握動態(tài)改變元素的樣式10講解獲取文檔的高度和寬度掌握獲取文檔的高度和寬度10教師巡視，發(fā)現(xiàn)問題實現(xiàn)不同方式獲取文檔的高度和寬度154頁面鎖屏密碼修改的遮罩鎖屏效果教師演示掌握密碼修改的遮罩鎖屏效果的步驟和方法10教師巡視，發(fā)現(xiàn)問題密碼修改的遮罩鎖屏效果205評比檢查學(xué)生完成情況抽查學(xué)生完成情況，講解出現(xiàn)的問題演示自己的功能，修改出現(xiàn)的問題56總結(jié)密碼修改的遮罩鎖屏效果重點強(qiáng)調(diào)學(xué)生練習(xí)中出現(xiàn)的問題學(xué)生思考反饋5作業(yè)Javascript如何改變元素的可見性？課后體會一、情境導(dǎo)入 介紹本節(jié)課的教學(xué)目標(biāo)二、引入 任務(wù)：密碼修改的遮罩鎖屏效果三、知識點講解增加元素如：<divid="screen1"></div>遮罩樣式設(shè)定：#change{ width:35px; height:30px; line-height:30px; cursor:pointer; } #screen1{ position:absolute; top:0; left:0; background:#000; z-index:9998; filter:alpha(opacity=30); opacity:0.3; display:none; } #login,#repass{ width:350px; height:250px; border:1pxsolid#ccc; position:absolute; z-index:9999; background:#fff; display:none; } #loginh2,#repassh2{ height:40px; line-height:40px; text-align:center; font-size:14px; letter-spacing:1px; color:#fff; background:#044599; margin:0; padding:0; border-bottom:1pxsolid#ccc; margin:0020px0; } #loginh2img,#repassh2img{ float:right; position:relative; top:14px; right:8px; cursor:pointer; } #logindiv.user, #logindiv.pass,#repassdiv.opass, #repassdiv.npass{ font-size:14px; color:#666; padding:5px0; text-align:center; } #logininput.text,#repassinput.text{ width:200px; height:25px; border:1pxsolid#ccc; background:#fff; font-size:14px; }使用javascript訪問元素的樣式 document.getElementById(menu).style.color='green';//鎖屏功能 functionlock(){ scree.style.width=getInner().width+'px'; scree.style.height=getInner().height+'px'; scree.style['display']='block'; };if(repass.style['display']=='block') lock();change.onclick=function(){ repass.style['display']='block'; lock(); }functiongetInner(){ if(typeofwindow.innerWidth!='undefined') return{ width:window.innerWidth, height:window.innerHeight } else return{