职业技术学校《JavaScript程序设计》课程标准

《JavaScript程序设计》课程标准课程名称：JavaScript程序设计专业大类：电子信息大类JavaScript程序设计课程代码：0311124课程名称：JavaScript程序设计课程性质：必修课程类别：职业技术基础课程适用专业：计算机应用技术、软件技术、移动互联应用技术开设学期：第一学期授课学时：48（理实一体）+16学时项目强化一、课程定位《JavaScript程序设计》是计算机应用技术、软件技术、移动互联应用技术专业的一门职业技术基础课程，由浅入深地讲解了JavaScript的基本语法、函数、事件、浏览器对象模型、文档对象模型、对象、动画、绘画等内容，采用理论结合实战的方式阐释JavaScript的语言特性功能。通过学习本门课程，学生能很好地掌握JavaScript脚本语言，提升网页的可交互性及动画效果，实现并且将新技术运用到实际的开发当中，提高自己开发Web程序的水平。二、课程设计以就业为导向，以能力为本位，不局限于单纯的技能训练，在培养学生职业岗位能力的基础上，围绕高素质复合型技术技能型人才专业培养目标，培养学生的终身学习的能力和职业生涯发展所需的综合素养。课程建设优化传统JavaScrip程序设计类课程教学内容，设计教学情境，开发课程案例，建设课程教学资源，实施基于混合式教学的“教学做”一体化教学方式，采用过程式考核方式，提高课程教学质量。课程教学按照：“提出工程实际案例、分析案例所需知识、知识准备、师生共同完成案例、布置任务、学生自主完成任务、小组交流、教师点评”的步骤进行。将课程基本知识点融于案例中，围绕着案例来开展课堂教学活动，引导学生参与分析、讨论，让学生在具体的问题情境中，积极思考，主动探索。课程教学内容符合职业技能培养要求，注重实践环节，实践性教学内容占课程内容的60﹪以上，课程既具有针对性、又具有技术性和综合性，有效地培养了学生复杂静态页面的设计与开发能力。三、课程目标（一）课程总目标通过基于工作过程的教学实施，使学生学生能掌握JavaScript语言的基本编程思想，并能熟练利用JavaScript控制WEB页面各级元素，实现WEB前端的验证、动态展示等任务。让学生能够根据工作任务和要求，按网站设计的基本流程、需求规范，运用JavaScript脚本语言，独立自主完成基于JavaScript技术的交互式复杂页面的设计与制作，具有动态页面设计实现的能力，具有交互式网页设计的综合运用能力。同时对接行业标准和岗位要求强化学生的职业道德意识和职业素质养成意识；通过小组合作学习，培养学生团队合作、协议沟通能力；为后续Web前端开发打下坚实的基础。（二）课程具体目标1.知识目标（1）JavaScript基本语法（2）JavaScript函数和事件（3）BOM对象常用属性和方法（4）DOM文档对象和节点的操作方法（5）JavaScrip对象使用（6）JavaScrip动画（7）Canvas绘画和动画。2.能力目标（1）能够设计、制作和调试交互式动态页面；（2）熟练掌握JavaScript基本语法、函数、事件（3）熟练使用BOM对象操作浏览器；（4）熟练使用DOM操作文档和节点；（5）熟练使用JavaScrip对象实现表单的验证；（6）能使用JavaScrip动画实现动态页面效果；（7）能使用Canvas绘画和动画实现动态页面效果；3.素质目标（1）培养学生良好的语言表达能力；（2）培养学生自主学习习惯和团队合作能力，身心参与、手脑并用的劳动意识；（3）培养学生严谨细致的学习态度和追求完美的工匠精神；（4）树立坚定的理想信念，厚植爱国主义情怀；四、课程内容及学习情境根据Web前端开发工程师职业岗位的要求，遴选课程内容，课程内容打破学科体系，进行解构和重构。以真实的项目和任务为载体，基于Web前端开发的设计、开发与维护岗位的工作流程设置四个情境：1.JAVASCRIPT，2.CSS基础应用，3.网页布局设计，4.项目强化。课程的主要内容和要求见表1。表1课程内容和学习情境表序号学习情境学习载体主要学习内容学习目标学时1情境1JavaScript程序设计技术储备同学会网站任务1：任务1：技术储备—JavaScript基本语法项目任务：无1.掌握JavaScript核心语法；2.掌握JavaScript表达式和运算符；3.掌握JavaScript流程控制语句4任务2：任务2：技术储备—JavaScript函数与事件项目任务：无1.掌握JavaScript自定义函数；2.掌握JavaScript系统函数；3.掌握JavaScript事件；4.掌握JavaScript常用事件；4情境2使用DOM进行文档和节点操作同学会网站任务3：使用BOM操作浏览器对象项目任务：编写页面加载时执行的方法（global.js)1.掌握浏览器对象模型；2.掌握window对象；3.掌握history对象和location对象；4.掌握screen对象和navigator对象；4任务4：使用DOM对象获取节点元素项目任务：编写获取元素和设置元素样式的方法1.理解文档对象模型基础；2.掌握document对象；3.掌握节点对象；4任务5：使用DOM设置节点内容和样式实现图片库项目任务：使用图片库效果完成往昔岁月页面1.掌握获取和设置节点内容；2.掌握设置节点样式；3.综合案例：图片库；42任务6：使用DOM动态添加和删除节点实现购物车项目任务：实现在线留言页面的留言添加和删除功能1.掌握创建新节点；2.掌握动态添加节点；3.掌握动态删除节点；4.综合案例：购物车；43情境3JavaScript对象进阶同学会网站任务7：使用JavaScript对象和数组实现省市联动项目任务：使用数组实现报名参加页面的省市联动效果1.掌握JavaScript常用内部对象；2.掌握自定义对象；3.掌握对象常用语句；4.掌握数组4任务8：使用String和RegExp对象实现表单验证项目任务：为报名参加页面添加表单验证功能1.掌握String对象；2.掌握RegExp正则表达式对象；3.综合案例：表单验证；4情境4使用JavaScript动画和绘画同学会网站任务9：使用JavaScript实现动画效果项目任务：编写逐渐显示、逐渐放大的动画函数1.掌握使用setTimeOut迭代实现动画；2.掌握使用setInterval实现定时动画；3.掌握使用requestAnimationFrame请求动画；4任务10：使用JavaScript动画实现轮播图片项目任务：使用轮播图片效果完成校园风光页面1.综合案例1：鼠标悬停预览；2.综合案例2：轮播图片4任务11：任务11：使用Canvas画布绘制时钟项目任务：首页绘制动态时钟1.掌握使用Canvas绘画2.掌握使用Canvas操作图片；3.掌握使用Canvas动画；4.综合案例：绘制时钟4任务12：项目总结项目任务：编写随机生成姓名等通用方法1.复习JavaScript基本语法2.复习JavaScript文档和节点3复习JavaScript对象4.复习JavaScript动画和绘画；44情境5项目强化同学会网站任务13：完善首页功能1.定义菜单数组2.页面加载时根据菜单数组添加顶部导航元素.3.完成首页导航菜单项鼠标悬停事件：悬停显示图片介绍4任务14：制作班级名册页面功能1.初始化班级学生信息2.编写显示学生信息和姓名列表的方法3.为tab标签（第N排）绑定点击事件：点击显示第N排学生姓名列表4.为学生信息元素绑定点击事件：点击查看学生详情4任务3：制作日程表页面1.设置表格颜色隔行变色，鼠标悬停变色2.标题元素绑定点击事件：点击折叠或展开4任务4：完善在线留言页面1.编写通用清空表单函数（form.js)2.编写通用验证非空、邮件格式函数（form.js)3.编写通用验证表单函数（form.js)4.实现清空按钮功能，5.在表单提交前添加验证表单功能4五、教学设计学习情境一：JavaScript程序设计技术储备项目名称：“同学会”网站学时：8教学目标掌握JavaScrip核心语法掌握JavaScript表达式与运算符掌握JavaScript流程控制语句掌握JavaScript自定义函数掌握JavaScript系统函数掌握JavaScript事件教学重点掌握JavaScript核心语法掌握JavaScript流程控制语句掌握JavaScript事件学习难点掌握JavaScript自定义函数掌握JavaScript事件子任务主要教学内容任务1：技术储备—JavaScript基本语法1.掌握三种JavaScript脚本书写位置；2.掌握JavaScript数据类型，定义变量、书写注释3.掌握算术、比较和逻辑运算符的使用4.掌握顺序、条件和循环结构的使用，使用switch结构判断当前是否为工作日项目任务：无任务2：技术储备—JavaScript函数与事件1.掌握自定义函数的定义、参数、返回值，掌握使用匿名函数；2.掌握系统函数：parseInt()、parseFloat()、isNaN()、eval()3.掌握使用内联和脚本模式绑定事件4.掌握基本的鼠标、页面、键盘和表单事件项目任务：无教学方法建议任务驱动方式组织教学内容，采用理实一体化教学方式，学生按照任务进行实操并进行自我评价以及小组互评，老师按照每个小组的完成情况对小组进行评分并总结。备注学习情境二：使用DOM进行文档和节点操作项目名称：“同学会”网站学时：16教学目标1.理解浏览器对象模型；2.掌握window,history,location,screen,navigator对象使用；3.理解文档对象模型；4.掌握document对象使用5.掌握节点对象使用6.掌握如何获取节点对象7.掌握获取和设置节点内容8.掌握获取和设置节点样式9.掌握动态添加和删除节点教学重点1.理解文档对象模型；；2.掌握document对象使用；3.掌握节点对象使用；4.掌握如何获取节点对象5.掌握获取和设置节点内容6.掌握获取和设置节点样式学习难点1.掌握window,history,location,screen,navigator对象使用；2.掌握动态添加和删除节点；子任务主要教学内容任务3：使用BOM操作浏览器对象1.理解浏览器对象模型；2.使用window对象操作弹出框和窗口3.使用history对象实现页面的跳转4.使用location对象获得页面地址及端口信息5.使用screen对象获取屏幕相关信息6.使用navigator对象获得浏览器相关信息项目任务：编写页面加载时执行的方法（global.js)任务4：使用DOM对象获取节点元素1.理解文档对象模型；2.使用document对象常用属性和方法3.掌握通过id、name、标签名及类名获取节点元素的方法4.掌握判断节点类型的方法5.使用节点层级关系获取节点项目任务：编写获取元素和设置元素样式的方法（global.js)任务5：使用DOM设置节点内容和样式实现图片库1.使用innerHTML\innerText\textContent获取节点文本内容；2.使用属性名和getAttribute\setAttribute方法获取和设置节点属性3.使用value值获取控件的输入4.掌握通过style属性和class属性设置样式5.完成综合案例：图片库项目任务：使用图片库效果完成往昔岁月页面任务6：使用DOM动态添加和删除节点实现购物车1.掌握创建新节点和克隆新节点的方法；2.使用appendChild和insertBefore方法向父节点中添加子节点3.掌握删除节点的两种方法：删除当前节点和删除子节点5.完成综合案例：购物车项目任务：现在线留言页面的留言添加和删除功能教学方法建议任务驱动方式组织教学内容，采用理实一体化教学方式，学生按照任务进行实操并进行自我评价以及小组互评，老师按照每个小组的完成情况对小组进行评分并总结。备注学习情境三：JavaScript对象进阶项目名称：“同学会”网站学时：8教学目标1.掌握Date对象使用2.掌握Image对象使用3.掌握Math对象使用4.掌握自定义对象的声明和使用方法5使用with和forin语句操作对象6掌握数组的定义和遍历7.掌握string对象的常用方法8.掌握正则表达式的使用教学重点1.掌握Date对象使用2.掌握自定义对象的声明和使用方法3.掌握string对象的常用方法4.掌握JAVASCRIPT动画属性5.掌握正则表达式的使用学习难点1.使用with和forin语句操作对象2.掌握数组的定义和遍历3.正则表达式的使用子任务主要教学内容任务7：使用JavaScript对象和数组实现省市联动1.使用Date对象展示格式化日期时间；2.使用Image对象缓存图像资源；3.使用Math对象制作猜数字游戏；4.使用多种方式自定义对象5.使用with和forin语句简化对象操作6.使用非数字下标的数组项目任务：使用数组实现报名参加页面的省市联动效果任务8：使用使用String和RegExp对象实现表单验证1.使用string对象的常用方法做简单的表单验证；2.使用正则表达式对象结合string对象的相关方法做复杂的表单样式；3.综合案例；表单验证项目任务：为报名参加页面添加表单验证功能教学方法建议任务驱动方式组织教学内容，采用理实一体化教学方式，学生按照任务进行实操并进行自我评价以及小组互评，老师按照每个小组的完成情况对小组进行评分并总结。备注学习情境四：使用JavaScript动画和绘画项目名称：“同学会”网站学时：16教学目标1.理解动画的基本原理2.掌握使用setTimeOut迭代实现动画3.掌握使用setInterval实现定时动画4.掌握使用requestAnimationFrame请求动画帧5.掌握使用Canvas绘画6.掌握使用Canvas动画教学重点1.理解动画的基本原理2.掌握使用setTimeOut迭代实现动画3.掌握使用setInterval实现定时动画4掌握使用requestAnimationFrame请求动画帧学习难点1.掌握使用Canvas动画子任务主要教学内容任务9：使用JavaScript实现动画效果1.使用setTimeOut迭代实现移动元素的动画2.使用setInterval实现电子时钟3.使用requestAnimationFrame请求动画帧实现元素平移项目任务：编写逐渐显示、逐渐放大的动画函数（global.js)任务10：使用JavaScript动画实现轮播图片1.完成综合案例1：鼠标悬停预览2.完成综合案例2：轮播图片项目任务：使用轮播图片效果完成校园风光页面任务11：使用Canvas画布绘制时钟1.使用Canvas画布绘制矩形2.使用Canvas画布绘制路径3.使用Canvas画布操作图片4.使用Canvas动画实现飞像蝴蝶效果5.使用Canvas动画绘制动态电子时钟项目任务：首页绘制动态时钟任务12：项目总结1.复习JavaScript基本语法2.复习JavaScript文档和节点3.复习JavaScript对象4.复习JavaScript动画和绘画项目任务：编写随机生成姓名等通用方法教学方法建议以理论讲解、演示为主，学生按照教学内容进行实操并进行自我评价以及小组互评，老师按照每个小组的完成情况对小组进行评分并总结，采用任务驱动教学。备注学习情境五：项目强化项目名称：“同学会”网站学时：16教学目标1.掌握站点中脚本的编写规范和语法2.掌握使用脚本操作节点的方法3.掌握使用字符串和正则表达式完成表单验证4.掌握JavaScript动画的设计实现教学重点1.握使用脚本操作节点的方法2.掌握使用字符串和正则表达式完成表单验证学习难点1.掌握JavaScript动画的设计实现子任务主要教学内容任务13：完善首页功能1.初始化班级学生信息2.编写显示学生信息和姓名列表的方法3.为tab标签（第N排）绑定点击事件：点击显示第N排学生姓名列表4.为学生信息元素绑定点击事件：点击查看学生详情任务14：制作班级名册页面功能1.设置表格颜色隔行变色，鼠标悬停变色2.标题元素绑定点击事件：点击折叠或展开任务15：制作日程表页面功能1.编写通用清空表单函数（form.js)2.编写通用验证非空、邮件格式函数（form.js)3.编写通用验证表单函数（form.js)4.实现清空按钮功能，5.在表单提交前添加验证表单功能任务16：完善在线留言表单页面功能1.初始化班级学生信息2.编写显示学生信息和姓名列表的方法3.为tab标签（第N排）绑定点击事件：点击显示第N排学生姓名列表4.为学生信息元素绑定点击事件：点击查看学生详情教学方法建议以理论讲解、演示为主，学生按照教学内容进行实操并进行自我评价以及小组互评，老师按照每个小组的完成情况对小组进行评分并总结，采用任务驱动教学。备注六、实施建议（一）教材选用与编写根据专业人才培养方案和课程教学目标选用理论实践一体化或项目课程教材。推荐教材1.HTML5+JAVASCRIPTJAVASCRIPT程序设计，黑马程序员，人民邮电出版社，2019参考书：1.工业和信息化部教育与考试中心.Web前端开发（初级）上册北京:电子工业出版社,20192.工业和信息化部教育与考试中心.Web前端开发（初级）下册北京:电子工业出版社,20193.北京新奥时代科技有限责任公司.Web前端开发实训案例教程（初级）北京:电子工业出版社,20194.网站5.MDN网站（二）课程资源的开发与利用1.开发课件、微课等教学资源；2.选用符合教学要求的录像、课件、视频、资料文献等资源辅助教学；3.依托学校职教云教学平台进行课程资源建设。（三）教学基本条件1．专业教师的要求（1）具有前端新知识、新技能的学习能力和创新创业能力；（2）具备前端架构设计能力；（3）具备移动端开发能力；（4）具备前端组件化能力；（5）具备网站性能优化能力（6）具有较强的工作过程系统课程教学设计能力；（7）具有较强的行动导向教学组织与实施能力。2．学习场地、设施的要求为保证项目、任务的实施与完成，本课程必须在实践理论一体化教室完成教学过程。（四）教学建议1.本课程以实际的典型应用为基础构建学习载体，建议在每个学习情境的教学实施中，完全采用项目引导、任务驱动的行动导向教学，并以小组协作方式完成各项工作任务。2.以Web项目的设计、实现作为驱动主线，实现理论实践一体化教学。学生通过感性认识，理性思维，动手操作，完成Web项目的分析、设计、编码、调试和运行，在做中学，在学中做，最终达到真正听得懂，学得会，做得好，切实提高动手能力和分析问题、解决问题的综合素质。3.在教学过程中，要创设工作情景，同时应加大实践实操的容量，要紧密结合职业技能等级证书的考证，加强考证的实操项目的训练，在实践实操过程中，使学生掌握HTML静态页面设计与制作应有的技能，提高学生的岗位适应能力。4.在教学过程中，要尽量应用多媒体、动画视频、演示等教学资源辅助教学，帮助学生理解相关概念。5.在教学过程中，在教学过程中，关注软件产业发展新业态、新模式，对接新技术、新工艺、新规范发展趋势，贴近生产现场。为学生提供职业生涯发展的空间，努力培养学生参与社会实践的创新精神和职业能力。6.教学过程中教师应积极引导学生提升职业素养，培养职业道德。七、教学评价（一）成绩构成本课程主要以过程考核为主，考核涵盖学习情境全过程，既评价学生专业能力，也评价学生交流沟通、团队协作、自主学习、问题的分