JavaScript程序设计
教案赛项组别：高职课程专业一组
授课专业：计算机应用技术专业网站
开发方向
JS实现购物车（一）--商品全选、反选状态
课程名称JavaScript程序设计项目名称实现购物车功能任务名称商品全选、反选状态课时  2
项目性质□演示性□验证性□设计性 综合性
学情分析授课对象为计算机应用技术大一学生。
1.学生特点
学习主动性不强，不愿意预习复习，不愿学习理论知识，不愿思考，愿意动手。
2.学生基础
学生在学习本门课程前，已经学习了《网页制作基础》、《网页美工CSS+DIV》等基础课程，已具备基本的静态网页制作能力，掌握表格布局的页面制作、样式调整、盒子模型的作用及特点。
教学目标能力目标：
学会分析如何操作节点，学会全选反选功能的实现
知识目标：
掌握使用getElementsByClassName获取复选框和添加onclick事件实现全选反选素质目标：
1. 培养学生信息搜集能力
2. 培养学生的自主思考能力
教学重点使用getElementsByClassName和onclick点击事件实现商品全选反选教学难点获取复选框节点后进行判断复选框的checked状态
教学设计基本原则：将教学内容与实际项目结合，以网站开发项目为导向组织教学，力求做到“学做合一”，实现“做中教，做中学”。
教学组织：遵循学生的认知规律，以信息化学习情境为载体，以任务驱动为主线，将本次教学任务划分为“课前准备”、“任务说明”、“知识讲解与练习”、“任务实施”、“考核点评”和“布置作业”六个环节。
教学方法、手段：
1.任务驱动法
本情境教学开始引入实现模拟登录功能的任务，引出课程的重点和难点，实现学生的“做中学”。
2.过程互动教学法
教学过程中使学生积极回答，积极参与课堂，以学生为主体进行教学。
3.分阶段总结教学法
在内容的讲解和实操中，不断总结，强调重点和难点
参考教材《JavaScript程序设计基础教程（微课版）》人民邮电出版社
教学环节
教学内容与过程
（教学内容、教学方法、组织形式、教学手段）
课前准备（8分
钟）
1、 课前要求学生完成购物车页面的制作，要求务必有基础的复选框、表格结构，并作为课前作 业提交。javascript免费教程
2、 在课堂上随机打开几份学生作品，进行点评讲解，并将错误部分修正，重点强调页面样式的问 题和表格行列元素的class 设置。
任务说明”（2分
钟）
本次课将创建购物车页面，获取复选框节点并进行判断，实现购物车的全选反选功能。
知识讲解与练习 （40分钟）
相关知识点： 1、 页面加载事件load()
2、 类名获取节点getElementsByClassName()
3、 复选框绑定onclik 事件 案例讲解：
1.通过寻所有复选框节点 (15分钟)
学生在购物车页面中复选框设置class 为 check ，然后通过getElementsByClassName 获取复选框信息。
2.为复选框添加点击事件(13分钟)
提问：怎么给那么多个复选框添加类似按钮的事件呢? 学生回答：一个个单独加。
教师解答：一个个加很繁琐，由于getElementsByClassName 返回数组对象，可以考虑使用 for 循环遍历添加，接下来案例进行展开本节课学习。
3.事件处理 (12分钟)
这里主要考虑两种情况，一种是全选，一种是反选。如果是设置全选状态，则要获取所 有勾选框的节点，进行设置checked 状态为true ，可以与全选框状态一致即可；如果是设置反 选状态，则设置checked 为false ，上图也可体现。
任务实施
1、 通过编写js 文件，在页面加载事件load 进行创建所有节点对象，给所有复选框进 行绑定事件，由于全选框的class 属性有设置check-all 类名，可以进行判断如果是选择全选框，
（25分钟）即this.className.indexOf(‘check-all’)>=0，设置全选，否则，选择当前复选框即可。
2、学生自主思考，相互讨论，根据实训要求实现购物车全选、反选功能。
考核点评
（13分钟）
随机抽取3-4份作业进行点评讲解，完成的好的进行表扬，有错误的进行订正。
布置作业（2分钟）1.完成模拟购物车全选、反选状态实训报告。
2.下节课将继续讲解购物车中商品总数框和总价计算，要求学生在下节课之前预习知识点，实现购物车中商品总数框和总价的页面制作。
课后反思
由于学生对于理论知识点掌握不足，也不太愿意主动思考问题，因此在对功能实现运用到的知识点不能很流畅使用，需要旁击侧敲加以引导不过通过实训报告让学生进一步巩固知识，掌握全选、反选状态实现。
JS实现购物车（二）--商品总数和总价计算功能
课程名称JavaScript程序设计项目名称实现购物车功能任务名称商品总数和总计计算功能课时  2
项目性质□演示性□验证性□设计性 综合性
学情分析授课对象为计算机应用技术大一学生。
1.学生特点
学习主动性不强，不愿意预习复习，不愿学习理论知识，不愿思考，愿意动手。
2.学生基础
学生在学习本门课程前，已经学习了《网页制作基础》、《网页美工CSS+DIV》等基础课程，已具备基本的静态网页制作能力，掌握表格布局的页面制作、样式调整、盒子模型的作用及特点。
教学目标能力目标：
学会分析如何操作节点，学会统计商品总数和总价计算功能
知识目标：
掌握使用innerText插入文本节点和使用parseInt、parseFloat转化获取商品数量和总计值为整数和浮点类型
素质目标：
培养学生的自主思考能力
教学重点使用innerText插入文本节点
教学难点使用parseXxx方法对获取商品数量和总计值后强制转化类型
教学设计基本原则：将教学内容与实际项目结合，以网站开发项目为导向组织教学，力求做到“学做合一”，实现“做中教，做中学”。
教学组织：遵循学生的认知规律，以信息化学习情境为载体，以任务驱动为主线，将本次教学任务划分为“课前准备”、“任务说明”、“知识讲解与练习”、“任务实施”、“考核点评”和“布置作业”六个环节。
教学方法、手段：
1.任务驱动法
本情境教学开始引入实现模拟登录功能的任务，引出课程的重点和难点，实现学生的“做中学”。
2.过程互动教学法
教学过程中使学生积极回答，积极参与课堂，以学生为主体进行教学。
3.分阶段总结教学法
在内容的讲解和实操中，不断总结，强调重点和难点

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。