JavaScript前端开发模块化教程-全套课件

任务1搭建JavaScript开发环境JavaScript前端开发模块化教程1任务一搭建javascript开发环境.pptx2任务二斑马线表格制作.pptx3任务三弹出消息框.pptx4任务四图片缩放特效.pptx5任务五网页换肤.pptx6任务六下拉广告.pptx7任务七轮播图.pptx8任务八滚动公告.pptx9任务九贷款计算器.pptx10任务十计算器.pptx11任务十一投票.pptx12任务十二折叠面板.pptx13任务十三银行客服电话查询.pptx14任务1十四省市区联动菜单.pptx15任务十五滚动监听.pptx16任务十六视频播放器.pptx17任务十七刮刮乐.pptx18任务十八微信运动步数统计图.pptx19任务十九相册.pptx20任务二十选项卡.pptx21任务二十一JavaScript抽奖器.pptx22任务二十二座位预定程序.pptx23任务二十三注册表单验证.pptx任务导入contents目录成果目标核心知识任务实施强化训练学习成果评量PART1任务导入要想成为Web开发工程师，掌握JavaScript必不可少。正式开始学习JavaScript前端开发之前，需要先配置JavaScript编辑器和Web浏览器，其中JavaScript编辑器用于编写HTML、CSS和JavaScript前端代码，Web浏览器用于Web应用的开发测试。本任务您将学会如何配置JavaScript前端编码和测试环境，并体验鼠标mouseover、mouseout事件时表格行背景变色效果开发，从此开启您的前端征程。任务导入PART2成果目标知识目标技能目标素质目标知识目标技能目标素质目标了解JavaScript发展历程；了解Web页面渲染过程；了解VisualStudioCode；理解EMMET语法；理清DOM对象选取模式；理解addEventListener参数。安装和配置VisualStudioCode；使用Chrome开发者工具；安装与配置http-server；前端页面开发流程；合理确定JavaScript在HTML文档中的位置；善用addEventListener；善用style对象操作样式。能梳理JavaScript演进；感受前端开发过程；培养前端开发的思维习惯。成果目标PART3核心知识1.3.1JavaScript演进1.3.2JavaScript介绍1.3.3Web页面渲染过程1.3.4VisualStudioCode介绍1.3.5VisualStudioCode快捷键1.3.6EMMET语法1.3.7Node.js介绍1.3.8http-server介绍1.3.9在HTML中使用JavaScript1.3.10高性能JavaScript1.3.11JavaScript执行顺序1.3.12脚本位置1.3.13组织脚本1.3.14无阻塞脚本1.3.15选取DOM对象1.3.16addEventListener1.3.17读写HTMLDOMstyle对象属性1.3.18cssTextPART4任务实施1.4.1安装和配置VisualStudioCode1.4.2安装常用扩展

1.4.3Chrome浏览器

1.4.4Chrome开发者工具

1.4.5安装Node.js1.4.6安装与配置http-server1.4.7编写HTML和CSS1.4.9测试页面PART5强化训练结合本任务实施过程，重置本地环境，重新搭建JavaScript前端编码和测试环境，将Web站点根目录设置为”d:/wwwroot”，编写一个鼠标悬停图片透明度变化的页面，具体要求是从百度下载6张同类主题的图片，规范文件名称和调整大小后，使用ul和li标签插入到网页中，定义样式表让6张图片排成2行3列，设置当鼠标悬停图片在任意图片上时，图片透明度改为半透明（opacity为0.5），当鼠标移开后恢复到正常透明度，保存并测试你的页面。强化训练PART6学习成果评量学习成果测评等级评分指标得分及格P1.能搭建和使用Web前端开发环境

P2.能编写前端页面JavaScript模板

P3.能设计制作表格行悬停变色的HTML和样式表

P4.能基于表格行悬停变色原理实现表格行背景及文本样式变换效果

良好M1.能够根据项目需求局部修改表格悬停状态相关参数

优秀D1.能够根据项目需求定制重复类元素的响应状态及样式；

D2.能够从性能效率角度整体优化HTML、CSS和JavaScript代码，实现特定事件触发界面变化效果；

评语

感谢聆听，祝您进步！任务2斑马线表格制作JavaScript前端开发模块化教程任务导入contents目录成果目标核心知识任务实施强化训练学习成果评量PART1任务导入表格行较少时，可以直接定义样式表实现斑马线表格，但当表格行较多或者后台生成表格行数不确定时，或者是行可能随时增删的表格，再或者表格需要响应交互事件时，手动设置表格类样式和修改样式，工作量巨大且效率低下，使用CSS3的高级选择器:nth-child()会存在浏览器兼容性问题，JavaScript特别擅长处理重复性任务，能实现比样式表更为丰富的DOM操作。一般当表格第一行有背景色时，从第三行设置背景色，第一行没有背景色时，从第二行设置背景色。本任务完成后的效果如图21斑马线表格最终效果所示。任务导入PART2成果目标知识目标技能目标素质目标知识目标技能目标素质目标1.阐述表格常用标签；2.理解条纹表格实现原理；3.理解变量命名规范；4.理解变量作用域；5.理解元素style属性；6.理解HTML中使用JavaScript方式。1.设计表格结构和样式；2.设计函数；3.善用getElementsByClassName；4.善用getElementsByTagName；5.善用addClass；6.善用mouseover、mouseout事件；7.善用事件委托；8.设置元素style属性；9.HTML中使用JavaScript的方法。1.遵循Web开发规范；2.培养严谨的编程习惯；3.培养分析和解决前端问题的能力；4.培养演绎思维能力；5.培养归纳思维能力。成果目标PART3核心知识2.3.1表格常用标签

2.3.2表格斑马线原理

2.3.3读写HTMLDOMclassName属性

2.3.4严格模式（usestrict）

2.3.5定义变量

2.3.6常量

2.3.7变量命名规则

2.3.8JavaScript语法规范

2.3.9变量类型

2.3.10变量作用域

2.3.11避免变量污染

2.3.12闭包函数

2.3.13JavaScript转义字符

2.3.14相等操作符

2.3.15toNumber2.3.16使用typeof检测类型

2.3.17使用constructor检测类型

2.3.18使用toString()检测封装类型

2.3.19事件委托

PART4任务实施2.4.1编写HTML 2.4.2编写CSS样式 2.4.3编写JavaScript 2.4.4测试页面 PART5强化训练结合本任务实施过程，制定班级通讯录表格斑马线效果，具体要求是搜集班级通讯录信息，要求包含姓名、性别、电话、QQ号和微信号码，先制作表格，再定义表格样式表，表格设置奇数行有背景色（颜色自选），设置当鼠标悬停某行时改变背景色，当鼠标移开后恢复到原来背景色，保存并测试你的页面。强化训练PART6学习成果评量学习成果测评感谢聆听，祝您进步！任务3弹出消息框JavaScript前端开发模块化教程任务导入contents目录成果目标核心知识任务实施强化训练学习成果评量PART1任务导入弹出消息框具有alert()和confirm()类型的功能，用于提醒用户或者让用户进行选择操作，本任务模拟app开发弹出消息框组件，单击“弹层”按钮打开对话框，如图，弹出层效果所示，单击对话框右上角“X”、“取消”或者“立即开通”都可以关闭该对话框任务导入PART2成果目标知识目标技能目标素质目标知识目标技能目标素质目标理解基于负边距的垂直居中原理；理解基于transform属性的垂直居中原理；理解警告框alert()使用场景；理解确认框confirm()使用场景；理解提示框prompt()使用场景；理解BOM对象；理解window对象常用属性与方法。设计弹出框HTML结构；设计弹出框CSS样式；设计display显示与隐藏控制；设计弹出框事件交互。遵循Web开发规范；培养严谨的编程习惯；培养分析和解决前端问题的能力；培养演绎思维能力；培养归纳思维能力。成果目标PART3核心知识3.3.1基于负边距的垂直居中 3.3.2基于transform属性的垂直居中 3.3.3元素动画制作 3.3.4警告对话框alert() 3.3.5确认对话框confirm() 3.3.6提示对话框prompt() 3.3.7BOM介绍 3.3.8window对象 3.3.9location对象 3.3.10screen对象 3.3.11history对象PART4任务实施3.4.1编写HTML 3.4.2编写CSS样式 3.4.3编写JavaScript 3.4.4测试页面PART5强化训练参照Bootstrap4信息提示框效果图，并访问地址：/bootstrap4/bootstrap4-alerts.html，使用原生JavaScript设计开发信息提示框效果，如图3‑6信息提示框效果所示。强化训练PART6学习成果评量学习成果测评等级评分指标得分及格P1.能设计弹出层HTML和样式表

P2.能基于弹出层原理和事件处理实现弹出层显隐功能

良好M1.能够根据项目需求局部弹出层界面和交互方式

优秀D1.能够根据项目需求定制弹出层界面和功能

评语

感谢聆听，祝您进步！任务4图片缩放特效JavaScript前端开发模块化教程任务导入contents目录成果目标核心知识任务实施强化训练学习成果评量PART1任务导入

图片缩放特效的应用可以增强页面的动感，吸引用户关注。本任务使用JavaScript技术实现对元素样式的读取和设置，并通过间隙执行setInterval()函数实现动画效果，任务完成后如图，图片缩放特效所示。任务导入PART2成果目标知识目标技能目标素质目标知识目标技能目标素质目标1.理解DOM编程；2.理解字符串连接模式；3.理解选择器API；4.了解减少重排和重绘来优化JavaScript性能。1.编写图片列表结构；2.编写图片列表CSS样式；3.善用DOM操作技术；4.善用字符串连接技术；5.能够优化DOM操作性能。1.遵循Web开发规范；2.培养严谨的编程习惯；3.培养分析和解决前端问题的能力；4.培养演绎思维能力；5.培养归纳思维能力。成果目标PART3核心知识4.3.1DOM编程 4.3.2DOM访问与修改 4.3.3DOM遍历 4.3.4innerHTML对比DOM方法 4.3.5字符串连接 4.3.6HTML集合length 4.3.7减少浏览器重排与重绘 PART4任务实施4.4.1编写页面结构 4.4.2编写CSS样式 4.4.3编写JavaScript 4.4.4测试页面 PART5强化训练参考本任务，从京东、淘宝、微店等网站搜集新鲜果蔬的图片，设计开发图片透明度渐变动画效果。强化训练PART6学习成果评量学习成果测评等级评分指标得分及格P1.能设计制作图片列表HTML结构

P2.能设计编写图片列表界面样式

P3.能使用JavaScript技术根据读取和设置元素style属性

良好M1.能够根据项目需求局部修改图片缩放界面和触发条件

优秀D1.能够根据项目需求定制图片效果

D2.能够根据项目需求定制图片属性修改功能

评语

感谢聆听，祝您进步！任务5

网页换肤JavaScript前端开发模块化教程任务导入contents目录成果目标核心知识任务实施强化训练学习成果评量PART1任务导入Web界面主要由版式和图文样式决定的，而样式表决定图文样式的决定性因素。更改单个选择器的样式定义会影响局部元素表现，更改系列选择器的样式定义则会引发页面界面的更大范围的变化，把页面共有样式和个性化皮肤分离，通过切换个性化皮肤所对应的样式表文件即可实现网页的换肤功能，进而满足用户界面个性化的需求，提高内容的可读性和适应性，完成后的效果如图51网页换肤界面所示。任务导入PART2成果目标知识目标技能目标素质目标知识目标技能目标素质目标1.理解网页换肤原理；2.理解HTMLDOM；3.理解document对象属性和方法；4.理解element对象属性和方法；5.理解sessionStorage对象；6.理解localStorage对象；7.理解cookie。1.设计换肤模块的HTML；2.设计换肤的CSS；3.善用JavaScript换肤技术；4.善用getAttribute()；5.善用setAttribute()；6.善用localStorage存储数据。1.遵循Web开发规范；2.培养严谨的编程习惯；3.培养分析和解决前端问题的能力；4.培养演绎思维能力；5.培养归纳思维能力。成果目标PART3核心知识5.3.1网页换肤原理 5.3.2HTML文档对象模型 5.3.3HTMLDOM节点树 5.3.4document对象属性和方法 5.3.5element对象属性和方法 5.3.6获取元素属性getAttribute() 5.3.7设置元素属性setAttribute() 5.3.8本地数据存储方案 5.3.9WebStorage 5.3.10WebStorage基本属性和方法 5.3.11使用sessionStorage对象 5.3.12使用localStorage对象 5.3.13使用storage事件 5.3.14cookie介绍 5.3.15cookie构成 5.3.16写入cookie信息 5.3.17读取cookie信息PART4任务实施5.4.1编写HTML 5.4.2编写CSS 5.4.3编写JavaScript 5.4.4测试页面 PART5强化训练结合本任务实施过程，编写一个新闻页面，制作“大”、“中”、“小”和“打印”四个链接，实现页面文字放大、缩小和打印功能，保存并测试你的页面。参考效果页面：/xinwen/2018-06/06/content_5296663.htm，如图56页面文字缩放及打印效果图所示。强化训练PART6学习成果评量学习成果测评等级评分指标得分及格P1.能设计制作换肤功能的HTML和样式表

P2.能基于换肤原理实现换肤基本功能和效果

良好M1.能够根据项目需求局部修改换肤界面和换肤参数

优秀D1.能够根据项目需求定制换肤界面、功能；

D2.能够根据Web设计风格定制多套Web皮肤；

评语

感谢聆听，祝您进步！任务6下拉广告JavaScript前端开发模块化教程任务导入contents目录成果目标核心知识任务实施强化训练学习成果评量PART1任务导入下拉广告是在用户浏览页面时，以全屏方式强制插入一个广告页面或弹出广告窗口，以增加可视区域大小吸引访问者关注，保证广告的传达率，具有一定的强制性，广告持续3秒至5秒的广告逐渐缩成banner尺寸的网络广告形式，或者直接隐藏掉。广告内容有静态的页面，也可以纯动画（gif或者flash）或者视频片段。浏览者可以通过关闭按钮手工关闭广告，也可以主动打开重播广告。任务导入PART2成果目标知识目标技能目标素质目标知识目标技能目标素质目标1.理解transition属性；2.理解setTimeout()用法。1.设计下拉广告HTML；2.设计下拉广告CSS样式；3.能使用transition设计动画；4.善用setTimeout()。1.遵循Web开发规范；2.培养严谨的编程习惯；3.培养分析和解决前端问题的能力；4.培养演绎思维能力；5.培养归纳思维能力。成果目标PART3核心知识6.3.1transition属性 6.3.2超时调用setTimeout()方法PART4任务实施6.4.1编写HTML 6.4.2编写CSS样式 6.4.3编写JavaScript代码 6.4.4测试页面 PART5强化训练结合本任务实施过程和相关技术，设计编写一个广告效果组件，实现广告的自动弹出、关闭和界面定制功能，保存并测试你的页面。强化训练PART6学习成果评量学习成果测评等级评分指标得分及格P1.能设计下拉广告HTML页面和样式表

P2.能使用setTimeout()和样式实现广告控制

良好M1.能够根据项目需求定制广告控制功能

优秀D1.能够根据项目需求实现广告手动控制功能

评语

感谢聆听，祝您进步！任务7轮播图JavaScript前端开发模块化教程任务导入contents目录成果目标核心知识任务实施强化训练学习成果评量PART1任务导入轮播（Carousel）有人叫旋转轮播，也有人叫焦点图，还有人叫幻灯片。无论是淘宝、京东、亚马逊等购物网站，还是中国政府网、凤凰、人民网等政府新闻网站，轮播图几乎成了所有网站是标配，也是网站的一大看点和亮点，轮播默认情况下是循环向右（向后）轮播，如果单击某个指示块，会直接跳转到所单击的那张轮播图，并且图片标题及轮播指示器会同步跳转。轮播图内容可以是图像、内嵌框架、视频或者其他任何类型的内容。如何高效便捷地设计轮播图的HTML结构、样式排版以及javascript控制轮播行为及交互，成了前端工程师修炼的基本功。本任务完成后如图71百度AI轮播效果图所示。任务导入PART2成果目标知识目标技能目标素质目标知识目标技能目标素质目标1.理解间歇调用setInterval()方法；2.列举常见JavaScript错误；3.理解Error对象；4.了解错误处理思路；5.理解使用浏览器控制台。1.编写轮播的HTML结构；2.编写轮播的CSS样式；3.善用setInterval()方法；4.善用JavaScript使用断点调试程序；5.善用try-catch处理异常。1.遵循Web开发规范；2.培养严谨的编程习惯；3.培养分析和解决前端问题的能力；4.培养演绎思维能力；5.培养归纳思维能力。成果目标PART3核心知识7.3.1间歇调用setInterval() 7.3.2避免常见JavaScript错误 7.3.3理解Error对象 7.3.4错误处理思路 7.3.5使用浏览器控制台调试程序 7.3.6使用断点调试程序 7.3.7使用try-catch处理异常PART4任务实施7.4.1编写HTML 7.4.2编写CSS样式

7.4.3编写JavaScript 7.4.4测试页面PART5强化训练访问Swiper中文网（/），熟悉轮播图的形式、样式及API用法，尝试使用swiper.min.js和swiper.min.css等文件，从百度图片（/）搜索图片，参照本任务制作轮播图。强化训练PART6学习成果评量学习成果测评等级评分指标得分及格P1.能设计轮播HTML和样式表

P2.能基于轮播原理实现轮播基本功能和效果

良好M1.能够根据项目需求局部修改轮播界面和轮播参数

优秀D1.能够根据项目需求定制轮播界面和功能

评语

感谢聆听，祝您进步！任务8滚动公告JavaScript前端开发模块化教程任务导入contents目录成果目标核心知识任务实施强化训练学习成果评量PART1任务导入Web页面的滚动公告非常像银行、医院、政务服务大厅的LED显示屏，会定时显示预设的公告内容，有左右滚动式的，也有上下滚动式的，如凤凰金融APP首页中部“活动”的滚动公告，如图8‑1上下滚动公告效果所示。任务导入本任务实现公告栏滚动显示效果，如图82上下滚动公告效果所示，限于篇幅仅实现滚动公告部分，默认会3000毫秒换下一条公告，单击右侧的“<”可以跳到上一条公告信息，单右侧的“>”可以跳到下一条公告信息。PART2成果目标知识目标技能目标素质目标知识目标技能目标素质目标1.理解HTML事件模型；2.理解DOM0级事件模型；3.理解DOM2级事件模型；4.理解IE事件模型。1.设计滚动公告HTML结构；2.设计滚动公告CSS样式；3.善用setInterval()方法；4.善用addEventListener()；5.善用匿名函数。1.遵循Web开发规范；2.培养严谨的编程习惯；3.培养分析和解决前端问题的能力；4.培养演绎思维能力；5.培养归纳思维能力。成果目标PART3核心知识8.3.1HTML事件模型 8.3.2DOM0级事件模型 8.3.3DOM2级事件模型 8.3.4IE事件模型PART4任务实施8.4.1编写HTML 8.4.2编写CSS样式 8.4.3编写JavaScriptPART5强化训练访问中国政府网（/）首页，找到首页轮播区，如图84中国政府网首页轮播图，将首页轮播区的图片标题整理出来，参照本任务的实现过程，制作成标题左右滚动公告效果强化训练PART6学习成果评量学习成果测评等级评分指标得分及格P1.能设计滚动公告HTML和样式表

P2.能基于滚动公告原理实现字幕滚动功能和效果

良好M1.能够根据项目需求局部修改滚动字幕界面和滚动参数

优秀D1.能够根据项目需求定制滚动方式、界面和功能

评语

感谢聆听，祝您进步！任务9贷款计算器JavaScript前端开发模块化教程任务导入contents目录成果目标核心知识任务实施强化训练学习成果评量PART1任务导入贷款计算器根据用户输入的贷款金额、贷款年利率和贷款年限自动计算每月还款额、总还款额和总利息。设计开发一个贷款计算器将涉及到客户端数值输入与获取、表单事件、数值转换与计算、设置元素HTML内容等内容。任务导入PART2成果目标知识目标技能目标素质目标知识目标技能目标素质目标1.理清表单类型；2.善用表单结构；3.理解form对象；4.理解表单事件；5.理解JavaScript操作符；6.理解Math对象；7.理解条件语句；8.理解循环语句。1.设计表单HTML；2.设计表单CSS样式；3.能获取表单值；4.能定义函数；5.能创建表达式；6.能创建条件语句；7.善用innnerHTML修改元素文本。1.遵循Web开发规范；2.培养严谨的编程习惯；3.培养分析和解决前端问题的能力；4.培养演绎思维能力；5.培养归纳思维能力。成果目标PART3核心知识9.3.1表单类型 9.3.2表单结构 9.3.3form对象 9.3.4表单事件 9.3.5表达式与操作符 9.3.6转换为数字 9.3.7设置小数位数 9.3.8Math对象 9.3.9条件语句 9.3.10for循环 9.3.11while循环 9.3.12do-while循环 9.3.13for-in 9.3.14优化循环性能 9.3.15forEach()PART4任务实施9.4.1编写HTML 9.4.2编写CSS样式 9.4.3编写JavaScript 9.4.4测试页面PART5强化训练访问查询网/hl.asp?from=USD&to=CNY&q=100页面，如图94汇率计算器所示，试用汇率汇率换算工具，熟悉界面和功能后，设计制作一款美元到人民币的转换工具。强化训练PART6学习成果评量学习成果测评等级评分指标得分及格P1.能设计制作计算器表单结构

P2.能设计编写表单及输出界面样式

P3.能基于数值关系实现计算功能

良好M1.能够根据项目需求局部修改计算器界面和计算规则

优秀D1.能够根据项目需求定制计算器界面

D2.能够根据项目需求定制计算器功能，实现数据验证和各类复杂计算

评语

感谢聆听，祝您进步！任务10计算器JavaScript前端开发模块化教程任务导入contents目录成果目标核心知识任务实施强化训练学习成果评量PART1任务导入计算器根据用户单击按钮面板中按钮输入的数值和运算符号计算表达式结果。设计开发一个计算器涉及到计算器界面生成、按钮交互及数值计算、设置input元素值等内容。本任务完成后的效果如图101计算器效果所示。任务导入PART2成果目标知识目标技能目标素质目标知识目标技能目标素质目标1.理解函数；2.理解函数参数；3.理解函数调用方式；4.理解slice()语法。1.设计计算器HTML；2.设计计算器CSS样式；3.善用addEventListener；4.善用条件语句；5.掌握表单值的获取与设置；6.设计表达式。1.遵循Web开发规范；2.培养严谨的编程习惯；3.培养分析和解决前端问题的能力；4.培养演绎思维能力；5.培养归纳思维能力。成果目标PART3核心知识10.3.1函数介绍 10.3.2定义函数 10.3.3嵌套函数 10.3.4调用函数 10.3.5函数的实参和形参 10.3.6将对象属性用做实参 10.3.7实参类型 10.3.8作为值的函数 10.3.9自定义函数属性 10.3.10slice() 10.3.11isNaN()PART4任务实施10.4.1编写HTML 10.4.2编写CSS样式 10.4.3编写JavaScript 10.4.4测试页面PART5强化训练参考本任务，查阅华氏温度和摄氏温度的转换公式，设计开发一款华氏温度和摄氏温度转换工具。强化训练PART6学习成果评量学习成果测评等级评分指标得分及格P1.能设计制作计算器表单结构

P2.能设计编写计算器界面样式

P3.能根据用户输入生成表达式并实现计算功能

良好M1.能够根据项目需求局部修改计算器界面和计算规则

优秀D1.能够根据项目需求定制计算器界面

D2.能够根据项目需求定制计算器功能，实现特定计算类型

评语

感谢聆听，祝您进步！任务11投票JavaScript前端开发模块化教程任务导入contents目录成果目标核心知识任务实施强化训练学习成果评量PART1任务导入投票是收集民意的一种方式，网络上有各种各样的投票模块，特别是微信投票、问卷星（/）、腾讯问卷（/）等投票功能应用广泛，本任务主要运用闭包函数实现Web页面投票功能，完成后的效果如图111投票页面效果所示。任务导入PART2成果目标知识目标技能目标素质目标知识目标技能目标素质目标1.理解匿名函数；2.理解函数作用域；3.理解闭包函数。1.编写投票HTML；2.编写投票CSS样式；3.编写闭包函数。1.遵循Web开发规范；2.培养严谨的编程习惯；3.培养分析和解决前端问题的能力；4.培养演绎思维能力；5.培养归纳思维能力。成果目标PART3核心知识11.3.1匿名函数 11.3.2数据存取方式 11.3.3对象成员 11.3.4函数作用域 11.3.5闭包 11.3.6闭包函数 11.3.7递归函数PART4任务实施11.4.1编写HTML 11.4.2编写CSS样式 11.4.3编写JavaScript 11.4.4测试页面PART5强化训练结合本任务实施过程和相关技术，以“红芯浏览器，到底算不算国产？”为主题设计编写一个投票组件，实现投票和结果呈现，保存并测试你的页面。强化训练PART6学习成果评量学习成果测评等级评分指标得分及格P1.能设计投票HTML页面和样式表

P2.能使用闭包函数实现投票的功能

良好M1.能够根据项目需求修改投票界面

优秀D1.能够根据项目需求定制投票功能

评语

感谢聆听，祝您进步！任务12折叠面板JavaScript前端开发模块化教程任务导入contents目录成果目标核心知识任务实施强化训练学习成果评量PART1任务导入折叠面板非常适合在有限空间里显示大量信息，可以设置页面加载后，默认第一个列表项处于展开状态，用户可以单击折叠项目标题栏切换当前标题下的内容是否显示，本任务完成后的效果如图121折叠面板效果图所示。任务导入PART2成果目标知识目标技能目标素质目标知识目标技能目标素质目标1.理解折叠面板HTML结构；2.理解nextElementSibling使用场景。1.设计折叠面板HTML；2.设计折叠面板CSS样式；3.善用for循环；4.善用addEventListener；5.善用对象style属性。1.遵循Web开发规范；2.培养严谨的编程习惯；3.培养分析和解决前端问题的能力；4.培养演绎思维能力；5.培养归纳思维能力。成果目标PART3核心知识12.3.1nextElementSiblingPART4任务实施12.4.1编写HTML 12.4.2编写CSS 12.4.3编写JavaScripPART5强化训练参考本任务，访问微软网页/zh-cn/download/faq.aspx，如图123微软FAQ页面所示，设计制作企业FAQ列表页面。强化训练PART6学习成果评量学习成果测评等级评分指标得分及格P1.能设计制作折叠面板结构

P2.能设计编写折叠面板界面样式

P3.能实现折叠面板折叠和激活状态指示功能

良好M1.能够根据项目需求局部定制折叠面板功能和效果

优秀D1.能够根据项目需求定制折叠面板界面

D2.能够根据项目需求定制折叠面板折叠和激活状态指示功能

评语

感谢聆听，祝您进步！任务13银行客服电话查询JavaScript前端开发模块化教程任务导入contents目录成果目标核心知识任务实施强化训练学习成果评量PART1任务导入全国银行主要有中国银行、工商银行、建设银行、农业银行等，在办理银行相关业务时，可以查询各大银行的服务电话，先电话咨询后再选择合适渠道办理。本任务综合使用Ajax+JSON技术实现各大银行的服务电话查询功能，任务完成后如图131银行客服电话查询模块效果图所示。任务导入PART2成果目标知识目标技能目标素质目标知识目标技能目标素质目标1.列举Ajax应用场景；2.理解Ajax原理；3.理解JSON数据格式。1.设计查询表单结构；2.设计CSS样式；3.开发Ajax模板；4.处理Ajax响应数据。1.遵循Web开发规范；2.培养严谨的编程习惯；3.培养分析和解决前端问题的能力；4.培养演绎思维能力；5.培养归纳思维能力。成果目标PART3核心知识13.3.1Ajax简介 13.3.2Ajax原理 13.3.3HTTP请求 13.3.4HTTP状态码 13.3.5定义XMLHttpRequest对象 13.3.6建立XMLHttpRequest连接 13.3.7跟踪状态 13.3.8中止请求 13.3.9Ajax请求与响应模板 13.3.10获取数据 13.3.11获取纯文本 13.3.12使用Ajax加载HTML 13.3.13使用Ajax加载JSON 13.3.14获取JavaScript脚本 13.3.15使用Ajax加载其他服务器的数据 13.3.16获取头部信息 13.3.17JSONP工作原理PART4任务实施13.4.1编写HTML 13.4.2编写CSS样式

13.4.3编写JSON 13.4.4编写JavaScript 13.4.5测试页面PART5强化训练参考本任务，搜索中国银行各城市支行地址和电话，设计开发中国银行网点信息查询模块。强化训练PART6学习成果评量学习成果测评等级评分指标得分及格P1.能设计制作查询页面结构

P2.能设计编写查询界面样式

P3.能使用Ajax技术根据用户输入关键字进行JSON数据集查询

良好M1.能够根据项目需求局部修改查询界面、触发条件和模糊匹配规则

优秀D1.能够根据项目需求定制信息查询界面

D2.能够根据项目需求定制JSON存储键值和匹配方式

评语

感谢聆听，祝您进步！任务14省市区联动菜单JavaScript前端开发模块化教程任务导入contents目录成果目标核心知识任务实施强化训练学习成果评量PART1任务导入在Web界面中，涉及到特别多选项时（如送货地址、图书分类号），要么提供用户关键词搜索查询功能，要么按信息的层级关系进行分层组织，省市区县联动的下拉列表设计，可以解决大量存在层级关联的信息的快捷选择问题，比如像京东收货地选择组件。本任务综合使用Ajax+JSON技术实现在全国行政区域JSON中47495条的下拉列表组织，方便用户查询，任务完成后如图141中国行政区联动下拉列表效果图。任务导入PART2成果目标知识目标技能目标素质目标知识目标技能目标素质目标1.理解下拉列表结构；2.理解列表项增删的方法；3.理解JSON数据格式1.编写级联菜单HTML；2.编写级联菜单CSS样式；3.编写JSON数据文档；4.善用Ajax读取JSON数据；5.善用JavaScript处理JSON数据；6.根据表单值的变化生成和删除列表项。1.遵循Web开发规范；2.培养严谨的编程习惯；3.培养分析和解决前端问题的能力；4.培养演绎思维能力；5.培养归纳思维能力。成果目标PART3核心知识14.3.1下拉列表select 14.3.2HTMLDOMOption对象 14.3.3selectadd()方法 14.3.4JSON简介 14.3.5JSON语法 14.3.6JSON与XML比较 14.3.7访问JSON对象值 14.3.8遍历JSON对象 14.3.9修改JSON值 14.3.10删除对象属性 14.3.11解析JSON对象 14.3.12JSON.stringify() 14.3.13JSON转换为JavaScript对象PART4任务实施14.4.1编写HTML 14.4.2编写CSS 14.4.3json数据准备 14.4.4编写JavaScript 14.4.5测试页面PART5强化训练参考本任务，搜索中国银行各城市支行地址和电话，设计开发中国银行网点信息联动查询下拉表单强化训练PART6学习成果评量学习成果测评等级评分指标得分及格P1.能设计制作下拉列表页面结构

P2.能设计编写下拉列表界面样式

P3.能使用Ajax技术根据用户下拉列表选择项进行JSON数据集查询

良好M1.能够根据项目需求局部修改查询界面和触发条件

优秀D1.能够根据项目需求定制下拉列表联动界面

D2.能够根据项目需求定制JSON存储键值和匹配方式

评语

感谢聆听，祝您进步！任务15滚动监听JavaScript前端开发模块化教程任务导入contents目录成果目标核心知识任务实施强化训练学习成果评量PART1任务导入手机版淘宝网进入具体商品页面时，当向下拉动时，会根据滚动条位置自动滑动到宝贝、评价、详情和推荐。类似的，百度百科进入百科词条后，会出现该词条的滚动导航效果，运用JavaScript来制作这一滚动监听效果。本任务模仿百度百科，实现类似的效果。任务导入PART2成果目标知识目标技能目标素质目标知识目标技能目标素质目标1.理解滚动监听原理；2.CSS脚本化3.访问CSS行内样式4.使用styleSheets对象5.计算样式6.元素尺寸7.window.scrollY1.编写页面结构2.编写CSS样式3.编写JSON4.编写JavaScript1.遵循Web开发规范；2.培养严谨的编程习惯；3.培养分析和解决前端问题的能力；4.培养演绎思维能力；5.培养归纳思维能力。成果目标PART3核心知识15.3.1滚动监听 15.3.2CSS脚本化 15.3.3访问CSS行内样式 15.3.4使用styleSheets对象 15.3.5计算样式 15.3.6元素尺寸 15.3.7window.scrollYPART4任务实施15.4.1编写HTML 15.4.2编写CSS样式 15.4.3编写JavaScript 15.4.4测试页面PART5强化训练参考本任务，搜索淘宝某一商品的信息，实现“宝贝”、“评价”和“详情”3个选项卡的自动鉴别切换，设计开发商品页面的滚动监听效果，如图153电商页面滚动监听效果所示。强化训练PART6学习成果评量学习成果测评等级评分指标得分及格P1.能设计制作滚动监听页面结构

P2.能设计编写滚动监听界面样式

P3.能使用JavaScript实现滚动监听导航提示

良好M1.能够根据项目需求局部修改滚动监听导航界面和关联的元素

优秀D1.能够根据项目需求定制滚动监听导航界面

D2.能够根据项目需求定制滚动监听导航交互功能

评语

感谢聆听，祝您进步！任务16视频播放器JavaScript前端开发模块化教程任务导入contents目录成果目标核心知识任务实施强化训练学习成果评量PART1任务导入视频是多媒体的重要媒体类型之一，随着网络速度和用户端性能的提升，越来越多的视频被插入到Web页面中，在很多购物网站中逐渐用视频来代替静态图片，表达更多丰富的商品信息。以网络视频为主的网站，如土豆网（）、优酷（/）、腾讯视频（/）等发展迅速，本任务主要运用HTML5Video实现Web视频播放功能，完成后的效果如图161视频播放界面效果所示。任务导入PART2成果目标知识目标技能目标素质目标知识目标技能目标素质目标1.理解HTMLvideo标签；2.理解视频格式；3.理解播放器界面与功能。1.设计播放器HTML；2.设计CSS样式；3.在页面中插入视频；4.开发播放控制功能；5.开发进度提示功能。1.遵循Web开发规范；2.培养严谨的编程习惯；3.培养分析和解决前端问题的能力；4.培养演绎思维能力；5.培养归纳思维能力。成果目标PART3核心知识16.3.1HTMLvideo标签 16.3.2HTML音频/视频方法 16.3.3HTML音频/视频属性 16.3.4HTML音频/视频事件 16.3.5浏览器支持的视频格式 16.3.6浏览器视频能力检测 16.3.7实现播放列表功能PART4任务实施16.4.1编写HTML 16.4.2编写CSS样式 16.4.3编写JavaScript 16.4.4测试页面PART5强化训练结合本任务实施过程和相关技术，设计编写一个音乐播放器，实现音乐文件指定、播放控制和界面定制功能，保存并测试你的页面。强化训练PART6学习成果评量学习成果测评等级评分指标得分及格P1.能设计播放器HTML页面和样式表

P2.能使用video方法、属性和事件实现播放控制

良好M1.能够根据项目需求定制播放控制按钮功能

优秀D1.能够根据项目需求实现跨浏览器多格式播放功能

评语

感谢聆听，祝您进步！任务17刮刮乐JavaScript前端开发模块化教程任务导入contents目录成果目标核心知识任务实施强化训练学习成果评量PART1任务导入刮奖是网站经常使用的一种提升用户参与兴趣和意愿的方式，网页设计者设计刮奖的背景图片和刮奖方式，模拟现实生活的刮奖情境，本任务主要运用画布HTML5canvas技术实现Web页面刮奖功能，完成后的效果如图171刮奖页面效果所示。任务导入PART2成果目标知识目标技能目标素质目标知识目标技能目标素质目标1.理解事件概念；2.理解事件流；3.理解事件对象；4.理解事件模拟过程。1.设计画布的HTML；2.设计画布的CSS样式；3.设计绘画参数；4.设计绘制事件。1.遵循Web开发规范；2.培养严谨的编程习惯；3.培养分析和解决前端问题的能力；4.培养演绎思维能力；5.培养归纳思维能力。成果目标PART3核心知识17.3.1事件基础 17.3.2事件流 17.3.3事件冒泡 17.3.4事件捕获 17.3.5事件对象 17.3.6IE中的事件对象 17.3.7跨浏览器的事件对象 17.3.8事件委托 17.3.9事件类型 17.3.10UI事件 17.3.11焦点事件 17.3.12鼠标事件 17.3.13键盘事件 17.3.14鼠标/键盘事件对象属性 17.3.15鼠标/键盘事件方法 17.3.16框架/对象（Frame/Object）事件 17.3.17表单事件 17.3.18剪贴板事件 17.3.19打印事件 17.3.20拖动事件 17.3.21多媒体（Media）事件 17.3.22动画事件 17.3.23过渡事件 17.3.24其他事件 17.3.25模拟事件过程 17.3.26模拟鼠标事件 17.3.27模拟键盘事件 17.3.28globalCompositeOperation属性PART4任务实施17.4.1编写HTML 17.4.2编写CSS样式 17.4.3编写JavaScript 17.4.4测试页面PART5强化训练结合本任务实施过程和相关技术，设计编写一个刮刮乐组件，设计刮奖图和实现刮奖功能，保存并测试你的页面。强化训练PART6学习成果评量学习成果测评等级评分指标得分及格P1.能设计刮奖HTML页面和样式表

P2.能使用实现刮奖的功能

良好M1.能够根据项目需求修改刮奖界面

优秀D1.能够根据项目需求定制刮奖功能

评语

感谢聆听，祝您进步！任务18微信运动步数统计图JavaScript前端开发模块化教程任务导入contents目录成果目标核心知识任务实施强化训练学习成果评量PART1任务导入微信运动是由腾讯开发的一个类似计步数据库的公众账号。用户可以通过关注微信运动公众号查看自己每天行走的步数，同时也可以和其他用户进行运动量的PK或点赞。在微信运动“我的主页”可以查看个人本周的步数统计，该统计图以折线图形式直观地反映了本周各天的步数变化。本任务使用HTML5canvas开发微信运动步数统计图。任务导入PART2成果目标知识目标技能目标素质目标知识目标技能目标素质目标1.理解canvas画布标签；2.理解canvas绘图步骤；3.理解canvas绘图参数。1.设计统计图HTML；2.设计canvas样式；3.绘制渐变背景；4.绘制坐标；5.绘制数据文本；6.绘制折线。1.遵循Web开发规范；2.培养严谨的编程习惯；3.培养分析和解决前端问题的能力；4.培养演绎思维能力；5.培养归纳思维能力。成果目标PART3核心知识18.3.1HTML5canvas 18.3.2canvas坐标 18.3.3canvas绘图步骤 18.3.4canvas绘制渐变色 18.3.5canvas绘制文本 18.3.6canvas绘制直线 18.3.7canvas绘制矩形 18.3.8canvas绘制圆形 18.3.9canvas绘制曲线PART4任务实施18.4.1编写HTML 18.4.2编写JavaScript 18.4.3测试页面PART5强化训练参照本任务，使用自己本周的微信运动数据，设计开发微信运动统计图强化训练PART6学习成果评量学习成果测评等级评分指标得分及格P1.能设计统计图HTML和样式表

P2.能使用画面canvas绘制折线统计图

良好M1.能够根据项目需求进行数据收集和预处理

优秀D1.能够根据项目需求定制折线统计图

评语

感谢聆听，祝您进步！任务19相册JavaScript前端开发模块化教程任务导入contents目录成果目标核心知识任务实施强化训练学习成果评量PART1任务导入图片是网页中最为重要的媒体类型之一，当有大量图片需要呈现时，先用各张图片生成缩略图，然后用户通过单击感兴趣的缩略图查看更大尺寸的图像，并支持以大尺寸图像方式前后翻阅相册中的图片。本任务开发如图181相册效果图所示，单击任意缩略图，即可以大尺寸方式查看该图片，并支持以大尺寸视图前后翻页，翻页可以由用户单击左右两侧的按钮触发，也可以使用键盘上的左右方向换图。任务导入PART2成果目标知识目标技能目标素质目标知识目标技能目标素质目标1.理解transform水平垂直居中对齐原理；2.理解事件委托技术；3.理解图片切换原理。1.设计相册HTML结构；2.设计相册CSS样式；3.开发事件委托应用；4.开发图片切换功能。1.遵循Web开发规范；2.培养严谨的编程习惯；3.培养分析和解决前端问题的能力；4.培养演绎思维能力；5.培养归纳思维能力。成果目标PART3核心知识PART4任务实施19.3.1编写HTML 19.3.2编写CSS样式 19.3.3编写Javascript 19.3.4测试页面PART5强化训练参照本任务开发过程和技术，设计开发主题相册，实现缩略图与大尺寸图像的切换和翻页功能。强化训练PART6学习成果评量学习成果测评等级评分指标得分及格P1.能设计相册HTML和样式表

P2.能基于相册原理和事件处理实现大尺寸图像的显隐功能

良好M1.能够根据项目需求局部相册界面和界面交互

优秀D1.能够根据项目需求定制相册界面和功能

评语

感谢聆听，祝您进步！任务20选项卡JavaScript前端开发模块化教程任务导入contents目录成果目标核心知识任务实施强化训练学习成果评量PART1任务导入选项卡（Tabs）组件是Web页面中常用功能，类似于Windows操作系统的选项卡，单击一个标签项，就切换到该标签对应的面板，而对于网页，其行为也是非常类似。如新浪网的首页大量应用了选项卡，如图191新浪选项卡所示。任务导入PART2成果目标知识目标技能目标素质目标知识目标技能目标素质目标1.阐述表格常用标签；2.理解条纹表格实现原理；3.理解变量命名规范；4.理解变量作用域；5.理解元素style属性；6.理解HTML中使用JavaScript方式。1.设计表格结构和样式；2.设计函数；3.善用getElementsByClassName；4.善用getElementsByTagName；5.善用addClass；6.善用mouseover、mouseout事件；7.善用事件委托；8.设置元素style属性；9.HTML中使用JavaScript的方法。1.遵循Web开发规范；2.培养严谨的编程习惯；3.培养分析和解决前端问题的能力；4.培养演绎思维能力；5.培养归纳思维能力。成果目标PART3核心知识20.3.1选项卡HTML模型 20.3.2重置ul属性 20.3.3浮动float 20.3.4绝对定位absolute 20.3.5选项卡切换原理PART4任务实施20.4.1编写HTML 20.4.2编写CSS 20.4.3编写JavaScript脚本 20.4.4浏览器测试PART5强化训练结合本任务实施过程和相关技术，模仿制作新浪网（/）首页选项卡。强化训练PART6学习成果评量学习成果测评等级评分指标得分及格P1.能设计选项卡HTML页面和样式表

P2.能使用实现标签切换功能

良好M1.能够根据项目需求修改选项卡界面

优秀D1.能够根据项目需求定制切换事件及效果

评语

感谢聆听，祝您进步！任务21JavaScript抽奖器JavaScript前端开发模块化教程任务导入contents目录成果目标核心知识任务实施强化训练学习成果评量PART1任务导入本任务利用数组操作开发一个适用于抽奖、房产摇号、车位摇号、学位摇号的抽奖原型，支持由数字序号方式抽奖，支持黑名单功能，完成后如图211抽奖器效果图所示，抽奖时，在表单中输入抽奖总人数、排除范围（黑名单）和抽奖人数，单击抽奖按钮生成抽奖号码。任务导入PART2成果目标知识目标技能目标素质目标知识目标技能目标素质目标1.理解数组的使用场景；2.理解数组的属性和方法；3.理解数据的惯用法。1.编写页面结构2.编写CSS样式3.编写JavaScript1.遵循Web开发规范；2.培养严谨的编程习惯；3.培养分析和解决前端问题的能力；4.培养演绎思维能力；5.培养归纳思维能力。成果目标PART3核心知识21.3.1数据存储 21.3.2数组 21.3.3创建数组 21.3.4数组元素的读和写 21.3.5数组元素的添加和删除 21.3.6稀疏数组 21.3.7数组长度 21.3.8数组遍历PART4任务实施21.4.1编写HTML 21.4.2编写CSS 21.4.3编写JavaScript 21.4.4测试页面PART5强化训练参