《物联网Web应用技术》教案 田美艳 - 项目4、5 JavaScript编程、Web开发框架

教案授课课次第34次课学时2总完成学时68章节/任务/模块/课题名称项目五Web开发框架任务四家庭用电统计界面编写一、Web图表库简介二、HighCharts使用课程类型理论课R实训课£习题课□复习课□活动课□其它□教学目标知识目标了解Web图表库的原理掌握Highcharts图表库的基本使用课程思政Web图表是数据可视化，引入“世界新冠疫情动态图”，讲述中国防疫措施和中国疫情数据变化，与世界疫情数据表化对比，凸显中国特色社会主义制度的优越性。教学条件/环境实训教室、实训服务器、实训计算机、实训网络，220V电源教学重点Highcharts图表库引用方法Highcharts配置教学难点Highcharts配置教学方法讲授法、演示法、实践练习法板书设计Web图表库简介HighCharts使用作业/思考题如何使用HighCharts创建柱形图表？如何使用HighCharts创建饼状图表？教学反思/后记（完成本次课的教学后填写）XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX教学过程教学内容备注课程回顾（5分钟）回顾上节课实训：创建jQuery入口函数添加获取屏幕尺寸和监控窗口变化代码添加绑定按钮点击事件函数代码添加鼠标移过效果代码提问互动（3选1）：请写出jQuery文档加载完成事件的简写方式？请写出监控文档窗口大小的jQuery事件方法？如何为HTML元素创建监听器？教师提问学生回答导入新课（1分钟）通过分析“家庭用电统计界面”，引入本次课程。教师讲述引导学生思考授课内容（2分钟）明确教学目标，介绍授课内容，指出重难点教师讲解授课模块1演示、讲授、讨论（37分钟）（10分钟）Web图表库简介讲解：介绍图表的作用和常见图表及图表特点。板书：AmCharts、FusionCharts、Chart.JS、HighCharts、GoogleCharts教师讲解学生记录笔记（5分钟）思政讲述：Web图表是数据可视化，引入“世界新冠疫情动态图”，讲述中国防疫措施和中国疫情数据变化，与世界疫情数据表化对比，凸显中国特色社会主义制度的优越性。育人价值：以帮助学生深刻认识和理解中国特色社会主义的制度优势，增强民族自信心（5分钟）讨论：讨论“全民战“疫”中如何为防疫贡献一份力量？”，自由发言讨论互动（15分钟）HighCharts使用强调：HighCharts引用方法是本次课重点。讲解并演示：介绍HighCharts图表库的特性、支持的图表类型和HighCharts库的引用方法，并演示图表库的引用方法。板书：免费使用、轻量、json格式配置、载入动态数据教师讲解、演示学生跟随操作、记录笔记（2分钟）提问：如何引用HighCharts的线上CDN库？提问互动课间休息授课模块2演示、讲授、讨论（34分钟）（15分钟）Highcharts配置步骤（一）强调：此内容是本次课重点和难点。讲解：介绍创建HTML页面、创建配置文件两个步骤，并演示操作步骤。板书：标题、副标题、X轴、Y轴教师讲解、演示学生跟随操作、记录笔记（2分钟）提问：如何为图表配置标题？提问互动（15分钟）Highcharts配置步骤（二）强调：此内容是本次课重点和难点。讲解：介绍创建json数据、绘制图表两个步骤，并演示操作步骤。板书：json数据、$('#container').highcharts(json)教师讲解、演示学生跟随操作、记录笔记（2分钟）提问：json数据都包含哪些信息？提问互动授课模块3实操练习（7分钟）（7分钟）实操练习：练习Highcharts配置。实操练习目的：掌握Highcharts配置步骤教师辅导、答疑学生实操练习巩固实践能力课程小结（3分钟）总结：本次课内容。再次强调重点：Highcharts图表库引用方法、Highcharts配置要求：掌握JHighcharts图表库引用方法，掌握Highcharts配置教师引导学生参与总结布置作业（1分钟）本次作业共2题教师布置作业授课课次第35次课学时2总完成学时70章节/任务/模块/课题名称项目五Web开发框架任务四家庭用电统计界面编写三、ECharts使用家庭用电统计界面设计——添加柱状图drawHighCharts.js源代码实训课程类型理论课R实训课R习题课□复习课□活动课□其它□教学目标知识目标掌握ECharts图表库的基本使用能力目标会使用HighCharts绘制用电量统计柱形图；能够完成家庭用电统计界面设计柱状图drawHighCharts.js源代码课程思政由家庭用电情况，引出2021年世界各国用电量排名，中国用电量居首，进而说明我国能源构成，传递节约用电的必要性。教学条件/环境实训教室、实训服务器、实训计算机、实训网络，220V电源教学重点ECharts配置HighCharts用电量图表配置教学难点ECharts配置HighCharts用电量图表配置教学方法讲授法、演示法、实践练习法板书设计家庭用电统计界面编写三、ECharts使用家庭用电统计界面设计添加柱状图drawHighCharts.js源代码实训作业/思考题如何使用ECharts创建柱形图表？如何使用ECharts创建饼状图表？教学反思/后记（完成本次课的教学后填写）XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

教学过程教学内容备注课程回顾（5分钟）回顾上节课实训：Web图表库简介HighCharts使用提问互动（3选1）：如何引用HighCharts的线上CDN库？如何为HighCharts图表配置标题？HighCharts图表json数据都包含哪些信息？教师提问学生回答导入新课（1分钟）通过分析“家庭用电统计界面”，引入本次课程。教师讲述引导学生思考授课内容（2分钟）明确教学目标，介绍授课内容，指出重难点教师讲解授课模块1演示、讲授、讨论（37分钟）（15分钟）ECharts使用强调：ECharts引用方法是本次课重点。讲解并演示：介绍ECharts图表库的特性、支持的图表类型和ECharts库的引用方法，并演示图表库的引用方法。板书：开源可视化库、免费商用、地图、热力图、千万级数据量、NPM方法教师讲解、演示学生跟随操作、记录笔记（2分钟）提问：如何引用ECharts的线上CDN库？提问互动（18分钟）ECharts配置步骤（一）强调：此内容是本次课重点和难点。讲解：介绍创建HTML页面、设置具备高宽的DOM容器、设置配置信息3个步骤，并演示操作步骤。板书：图例组件、X轴、Y轴、系列列表教师讲解、演示学生跟随操作、记录笔记（2分钟）提问：如何为图表配置图例组件？提问互动课间休息授课模块3演示、实操（41分钟）（7分钟）创建家居光强调节界面项目演示与实操：演示新建“家庭用电统计界面”项目，新建“家庭用电统计界面.html”，添加模板代码，并新建“drawHighCharts.js”和“drawECharts.js”源码文件，学生同步操作。教师演示、答疑学生跟随操作（4分钟）思政讲述：由家庭用电情况，引出2021年世界各国用电量排名，中国用电量居首，进而说明我国能源构成，传递节约用电的必要性。育人价值：崇尚节约光荣，增强节约意识，做到身体力行，坚持杜绝浪费行为（30分钟）添加柱状图drawHighCharts.js源代码演示与实操：创建图表入口函数，在入口函数中添加图表类型、X轴显示项、配置数据列选项、创建json数据等，学生同步操作。教师演示、答疑学生跟随操作课程小结（3分钟）总结：本次课内容。再次强调重点：ECharts配置、HighCharts用电量图表配置要求：会配置ECharts、HighCharts图表数据教师引导学生参与总结布置作业（1分钟）本次作业共1题教师布置作业授课课次第36次课学时2总完成学时72章节/任务/模块/课题名称项目五Web开发框架任务四家庭用电统计界面设计实训添加饼状图drawECharts.js源码添加家庭用电统计界面页面内容课程类型理论课£实训课R习题课□复习课□活动课□其它□教学目标能力目标会使用ECharts绘制用电量统计饼状图；能够完成家庭用电统计界面设计代码课程思政实训过程中，由家庭用电设备多，引出节能电器的必要性，格力空调等国内品牌，积极研发技能技术，推动技术创新教学条件/环境实训教室、实训服务器、实训计算机、实训网络，220V电源教学重点HighCharts用电量图表配置；教学难点HighCharts用电量图表配置；教学方法演示法、实训练习法板书设计添加饼状图drawECharts.js源码添加家庭用电统计界面页面内容运行测试作业/思考题在之前作业设计的班级信息页面中，用柱形图和饼状图分别显示男女生的身高和男女生的人数占比。教学反思/后记（完成本次课的教学后填写）XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

主要步骤教学内容师生活动课程回顾（5分钟）回顾上节课重点知识：ECharts使用添加柱状图drawHighCharts.js源代码实训提问互动（3选1）：如何引用ECharts的线上CDN库？如何为图表配置图例组件？如何配置显示在图表中的数据列？教师提问学生思考回答导入新课（1分钟）通过分析“家庭用电统计界面”，引入本次课程。教师讲述展示学生思考观看授课内容（2分钟）明确教学目标，介绍授课内容，指出重难点教师讲解授课模块1演示、实操（37分钟）（5分钟）思政讲述：由家庭用电设备多，引出节能电器的必要性，格力空调等国内品牌，积极研发技能技术，推动技术创新。压缩机是空调的心脏，在空调运行中发挥着压缩和输送冷媒的重要作用。空调的稳定性和节能性都和压缩机密切相关。格力自主研发出双级增焓变频压缩机、三缸双级变容压缩机、变频变容压缩机，比常规家庭多联机效率提升130%育人价值：引导学生提升、创新意识，强化民族自豪感和精益求精的工匠精神（32分钟）添加饼状图drawECharts.js源码演示与实操：初始化饼状图echarts图表，在option中设置配置项和数据，学生同步操作。教师演示、答疑学生跟随操作课间休息授课模块2演示、实操（30分钟）（25分钟）添加家庭用电统计界面页面内容并运行测试演示与实操：演示在head中添加标题和添加HightCharts和ECharts在线库；在body中添加“每月用电统计”模块和“当月峰谷用电占比”模块，学生同步操作。运行测试：测试家庭用电统计界面项目教师演示、答疑学生跟随操作（5分钟）讨论分析：与学生一起讨论分析家庭用电