《JavaScript项目式实例教程》(第2版)教案
电子工业出版社主编:张屹峰
目录
TOC\o1-3\h\z\u项目一对话框和页面输出——初步体验(共4学时) 2
项目二简单计算器——判断结构(共6学时) 6
项目三统计成绩单——循环结构(共10学时) 13
项目四注册页面设计——事件(共8学时) 25
项目五多窗体注册页面——窗体对象(共8学时) 35
项目六多功能相册——文档对象(共8学时) 43
项目七商品列表——DOM对象(共8学时) 52
项目八自制滚动条——事件的高级应用(共10学时) 62
项目九滑动的侧边栏——基础运动(共10学时) 71
项目一对话框和页面输出——初步体验(共4学时)
教案一:任务1和任务2——弹出对话框和页面打印
一、教学基本信息
授课单元:对话框和页面输出——初步体验(任务1和任务2)
学情分析:学生初步接触JavaScript,对HTML和CSS有一定了解,但对JavaScript的事件处理和函数调用尚不熟悉。
教学目标:
知识目标:熟悉JavaScript代码内嵌在HTML代码中的书写方法,了解onload事件和alert()、document.write()方法。
能力目标:能够编写简单的JavaScript代码,实现页面加载时弹出对话框和在页面中打印信息。
素养目标:培养学生对代码复用性和可维护性的初步认识。
教学重难点:
教学重点:onload事件的使用,alert()和document.write()方法的应用。
教学难点:理解事件触发的概念和JavaScript代码的执行时机。
教学法:讲授法、演示法、任务驱动法。
二、教学实施过程
课前导与思:
提问学生:如何在页面加载时执行特定任务?
引导学生思考JavaScript在网页中的作用。
教学环节:
引入(5分钟):
教师活动:简要介绍JavaScript在网页中的作用,引出onload事件。
学生活动:听讲并思考。
知识讲解(15分钟):
教师活动:讲解onload事件、alert()和document.write()方法,演示代码示例。
学生活动:听讲并记录笔记。
任务实施(20分钟):
教师活动:布置任务1和任务2,指导学生编写代码。
学生活动:编写代码,实现页面加载时弹出对话框和在页面中打印信息。
思政元素融入(5分钟):
教师活动:强调代码的规范性和可读性,引导学生养成良好的编程习惯。
学生活动:听讲并思考。
展示与点评(10分钟):
教师活动:选取部分学生的代码进行展示和点评,指出优点和不足。
学生活动:观看展示,听取点评。
课后练与拓:
布置作业:编写一个页面,实现页面加载时弹出对话框并打印欢迎信息。
拓展思考:如何优化代码,使其更具复用性?
三、教学反思
亮点与创新:
通过任务驱动法,让学生在实践中学习JavaScript。
融入思政元素,培养学生的编程习惯。
不足与改进:
部分学生对onload事件的理解不够深入,需要加强讲解和练习。
改进方法:增加更多实例,帮助学生理解。
教案二:任务3和任务4——先弹出对话框再打印信息及按钮触发
一、教学基本信息
授课单元:对话框和页面输出——初步体验(任务3和任务4)
学情分析:学生已掌握onload事件和alert()、document.write()方法,但对事件触发的灵活应用尚不熟悉。
教学目标:
知识目标:理解多个语句在事件处理中的执行顺序,掌握onclick事件的使用。
能力目标:能够编写代码,实现按钮触发弹出对话框和在页面中打印信息。
素养目标:培养学生对代码逻辑性和交互性的理解。
教学重难点:
教学重点:多个语句在事件处理中的执行顺序,onclick事件的使用。
教学难点:理解事件触发的逻辑性和交互性。
教学法:讲授法、演示法、任务驱动法。
二、教学实施过程
课前导与思:
提问学生:如何在按钮点击时执行特定任务?
引导学生思考事件触发的应用场景。
教学环节:
引入(5分钟):
教师活动:回顾onload事件,引出onclick事件。
学生活动:听讲并思考。
知识讲解(15分钟):
教师活动:讲解onclick事件,演示代码示例。
学生活动:听讲并记录笔记。
任务实施(20分钟):
教师活动:布置任务3和任务4,指导学生编写代码。
学生活动:编写代码,实现按钮点击时弹出对话框和在页面中打印信息。
思政元素融入(5分钟):
教师活动:强调代码的交互性和用户体验,引导学生关注用户需求。
学生活动:听讲并思考。
展示与点评(10分钟):
教师活动:选取部分学生的代码进行展示和点评,指出优点和不足。
学生活动:观看展示,听取点评。
课后练与拓:
布置作业:编写一