JavaScript程序设计实例教程教案第11单元.docx

1、用户登陆及密码修改JavaScript程序设计课第11单元课程单元教学设计（2019 2020学年第1学期） 所属系部： 计算机与通信工程学院 制定人： 合作人： 制定时间： 2020.8 *学院 教务处 制JavaScript程序设计课程单元教学设计 单元标题：密码修改遮罩锁屏效果单元教学学时2在整体设计中的位置第11次授课班级16移动开发班上课时间7周10月17日第1节至 7周10月17日第2节上课地点计算机实验室教学目标能力目标知识目标素质目标1.能够实现用户登陆及密码修改的遮罩锁屏效果 。掌握窗口视口的获取树立学习信心；培养讨论思考的习惯能力训练任务任务：用户登陆及密码修改的遮罩锁屏效

2、果教学组织：1. 带领学生了解课程任务讲解javascript操作样式属性实现遮罩锁屏效果 2. 设计实现用户登陆及密码修改的遮罩锁屏效果 。本次课使用的外语单词css3 div+css JavaScript Document getElementByIdmenu style displaymargin position background background-repeat 案例和教学材料案例：密码修改的遮罩锁屏效果教学材料：1.教材名称：JavaScript程序设计实例教程第2版.主编：程乐、郑丽萍、刘万辉.出版社：机械工业出版社，出版日期：2020.32.教学多媒体课件，项目源文件3.

3、多媒体资料：http:/www.icourse163.org/course/HCIT-12067068284.仪器与设备：计算机等单元教学进度设计（纲要）步骤教学内容及能力/知识目标教师活动学生活动时间（分钟）1情境导入介绍本节课的教学目标导入本次课教学情境学生了解工作情境22引入任务：密码修改的遮罩锁屏效果交代任务 学生接受任务33知识点讲解密码修改的遮罩锁屏效果讲解元素的添加和样式的建立 掌握元素的添加和样式的建立10讲解动态改变元素的样式 掌握动态改变元素的样式10讲解获取文档的高度和宽度 掌握获取文档的高度和宽度 10教师巡视，发现问题实现不同方式获取文档的高度和宽度154 页面锁屏密

4、码修改的遮罩锁屏效果教师演示掌握密码修改的遮罩锁屏效果的步骤和方法10教师巡视，发现问题密码修改的遮罩锁屏效果205评比检查学生完成情况抽查学生完成情况，讲解出现的问题演示自己的功能，修改出现的问题56 总结密码修改的遮罩锁屏效果重点强调学生练习中出现的问题学生思考反馈 5作业Javascript如何改变元素的可见性？课后体会一、情境导入介绍本节课的教学目标二、引入任务 ：密码修改的遮罩锁屏效果三、知识点讲解增加 元素 如 ：遮罩样式设定：#change width: 35px;height: 30px;line-height: 30px;cursor: pointer;#screen1 po

5、sition: absolute;top: 0;left: 0;background: #000;z-index: 9998;filter: alpha(opacity=30);opacity: 0.3;display: none;#login,#repasswidth: 350px;height: 250px;border: 1px solid #ccc;position: absolute;z-index: 9999;background: #fff; display:none;#login h2,#repass h2 height: 40px;line-height: 40px;text

6、-align: center;font-size: 14px;letter-spacing: 1px;color: #fff;background: #044599;margin: 0;padding: 0;border-bottom: 1px solid #ccc;margin: 0 0 20px 0;#login h2 img,#repass h2 imgfloat: right;position: relative;top: 14px;right: 8px;cursor: pointer;#login div.user,#login div.pass,#repass div.opass,

7、#repass div.npassfont-size: 14px;color: #666;padding: 5px 0;text-align: center;#login input.text,#repass input.textwidth: 200px;height: 25px;border: 1px solid #ccc;background: #fff;font-size: 14px;使用javascript访问元素的样式document.getElementById(menu).style.color = green; /锁屏功能 function lock() scree.style

8、.width = getInner().width + px;scree.style.height = getInner().height + px;scree.styledisplay = block; if(repass.styledisplay = block)lock();change.onclick = function() repass.styledisplay = block;lock();function getInner() if(typeof window.innerWidth != undefined)return width: window.innerWidth,height: window.innerHeight elsereturn width: document.documentElement.clientWidth,height: document.documentElement.clientHeight 学生练习：密码修改的严谨验证五、评比检查学生完成情况六、总结密码修改的遮罩锁屏效果