《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分钟）：
教师活动：选取部分学生的代码进行展示和点评，指出优点和不足。
学生活动：观看展示，听取点评。
课后练与拓：
布置作业：编写一