《Web前端开发技术》课程标准
一、课程基本信息
课程编码 | z01100426 | 课程类型 | 理论□实践□理论+实践√ | |||
总学时 | 72 | 实践学时 | 48 | 学分 | 4.5 | |
适应对象 | 高等职业学校软件技术相关专业（） | |||||
适用专业 | 软件技术 | |||||
先修课程 | 高级语言程序设计、数据结构、HTML5 | |||||
后续课程 | 动态网站开发、毕业设计 | |||||
编写教师 | 编写时间 | 2021年7月 | ||||
院（部）审批 | 审批时间 | |||||
二、课程定位
《JavaScript》课程是计算机软件技术专业的一门重要的专业课，定位于WEB技术开发工作岗位。它是WEB前端技术开发的必备课程，在整个课程体系中具有重要的作用。本课程的前
导课程：高级语言程序设计、数据结构、HTML5。后续课程：动态网站开发、毕业设计等。
通过学习本课程的学习，使学生掌握JavaScript的基本知识与应用，能运用所学知识开发出企事业单位需要的各种形式网站（网上商店、论坛、新闻发布等）的特效。强化学生项目开发能力（系统分析/设计，编程，测试等）。培养学生应用动态网站技术进行网页特效开发的能力，并形成良好的编程习惯和团队合作精神；培养学生的自主学习和创新能力，为其成长为一名合格的WEB前端技术开发程序员奠定良好的基础。
三、课程能力标准要求
（一）知识要求
使学生掌握常用的网页设计工具，熟练运用多种网页设计技术，具备Web网页设计、制作及站点管理的基本知识和基本技能，学生能够独立制作中小型的网站。
1、掌握JavaScript语言的基本语法。
2、掌握JavaScript中的BOM对象操作。
3、掌握JavaScript操作文档对象模型。
4、掌握jQuery选择器。
5、掌握jQuery中的事件与动画特效。
6、掌握jQuery中的DOM操作。
7、掌握表单验证。
8、掌握jQuery中的Ajax。
（二）能力要求
1、具有网站功能规划的能力。
2、具有网站布局的能力。
3、具有规范化、专业化的编码能力
4、具有规范化、专业化的测试能力；熟悉项目实施过程，如：需求分析、系统设计、编码、测试、提交产品等；
（三）素质要求形成一定的学习能力、沟通与团队的协作能力，形成良好的思考问题、
分析问题和解决问题的能力，养成良好的职业素养。遵守国家关于软件与信息技术的相关法律法规，形成关键性的软件开发与应用的能力。
1、自主、开放的学习能力
2、诚实、守信、坚韧不拔的性格
3、良好自我表现、人际沟通能力、良好的团队合作精神
四、知识体系(思维导图、知识要点)
见图1知识体系思维导图
五、课程主要内容课程教学能力训练项目设计表
见表1课程教学能力训练项目设计表
图1知识体系思维导图
表1课程教学能力训练项目设计表
总项目（活动） | 子项目（活动） | 训练项目名称 | 训练任务 | 拟实现的能力目标和素质目标 | 学时 |
1.化妆品网站设计与实现 | 1.1主题网站需求分析与总体设计 | 1.1.1网站需求分析 | 编写需求规格说明书 | 掌握需求分析的过程与规范 | 1 |
1.1.2网站规划 | 功能设计 | 掌握网站规划的流程 | 1 | ||
1.1.3网站风格定位 | 页面布局分析与设计 | 掌握页面布局的知识 | 1 | ||
1.1.4化妆品网站总体设计 | 网站总体设计 | 掌握网站总体的设计流程 | 1 | ||
1.2开发环境、调试环境搭建 | 1.2．1开发环境、调试环境搭建 | 熟悉开发环境 | 熟悉开发环 境，能够创建网站、网页等 | 4 | |
1.3猜数游戏和计算器设计 | 1.3.1显示变量数据类型 | 制作动态显示变量数据类型 | 掌握JavaScript的变量、数据类型、运算符号等知识 | 1 | |
1.3.2学生成绩考评. | 制作学生成绩考评页面 | 掌握JavaScript的选择结构语法 | 1 | ||
1.3.3猜数字游戏 | jquery在线免费学习技术制作猜数游戏页面 | 掌握JavaScript 的循环结构 | 1 | ||
1.3.4简易计算器 | 制作简易计算器 | 掌握函数和自定义函数 | 1 | ||
1.4用户注册页面效果 | 1.4.1动态显示系统时间及随机选号设计 | 在页面动态显示系统时间 | 掌握Date对象和定时器函数 | 1 | |
制作随机选号页面 | 掌握Math对象的属性和常用方法 | 1 | |||
制作简单的焦点图效果 | 掌握数组的属性和方法 | 1 | |||
验证注册页面信息 | 掌握String对象的属性和方法 | 1 | |||
使用正则表达式验证 | 掌握正则表达 | 1 | |||
1.4.2动态添加商品信息表 | 注册页面信息 | 式的使用 | |||
使用CoreDOM方式动态添加表格 | 掌握查看、创建、增加、删除、替换节点 | 3 | |||
使用HTMLDOM方式动态添加表格 | 掌握HTMLDOM对象的属性 | ||||
1.4.3动态弹窗及网页标题交替显示 | 注册页面弹出窗口的实现 | 掌握window的常用属性、方法和事件 | 2 | ||
制作页面标题交替显 示效果、复选框全选效果 | 掌握document对象的常用属性和方法 | 2 | |||
1.5网站首页交互效果实现 | 1.5.1动态改变导航菜单及图片轮播 | 动态改变导航菜单样式 | 掌握style、className、visibility、display属性 | 1 | |
制作图片轮显效果 | 掌握style、className、visibility、display属性 | 1 | |||
制作随光标滚动的广告图片 | 掌握获取样式的值和页面事件 | 1 | |||
制作Tab切换效果 | 掌握制作Tab切换效果的方法 | 1 | |||
制作光标移到某图上显示该图的大图 | 掌握制作光标移到某图上显示该图的大图的方法 | 2 | |||
1.5.2化妆品网站背景图轮播效果实现 | 化妆品网站背景图轮播效果实现 | 能综合运用JavaScript与CSS样式 | 2 | ||
1.5.3搜索框文 字提示效果 | 化妆品网站索框文字 提示效果 | ||||
1.5.4品牌列表的显示与收起 | 网站品牌列表的显示与收起 | jQuery开发工具和插件、jQuery选择器 | 4 | ||
1.5.5留言板前端特效制作 | 制作图片展示效果 | 掌握jQuery的DOM操作，获取、设置和删 | 4 | ||
制作留言板前端局部 更新效果 | |||||
制作删除效果 | 除属性掌握节点的操作 | ||||
表格隔行变和当前行变 | |||||
制作层叠图片横向平滑移动轮播切换效果 | |||||
1.5.6图片横向移动效果 | FAQ答案的显示与隐藏 | 掌握jQuery的动画 | 4 | ||
图片横向移动效果 | |||||
1.5.7化妆品网站首页效果 （续） | 返回顶部效果 | 掌握综合运用CSS样式、jQuery制作动画、jQuery中的DOM操作 | 4 | ||
效果 | |||||
图片的Tab切换效果 | |||||
图片放大效果：Fancybox图片播放插件 | |||||
禁止鼠标右键效果 | |||||
1.6产品列表页面交互效果实现 | 1.6.1微博网页特效设计 | 微博数字统计 | 掌握加载DOM、事件绑定、事件移除、简写事件 | 4 | |
制作图片提示效果 | 掌握事件对象、事件冒泡 | ||||
改变图片透明度 | 掌握合成事件、特殊事件 | ||||
1.6.2化妆品网站产品列表页面交互效果实现 | 滚动条美化 | 循环编程语法、TinyScrollbar插件使用 | 4 | ||
产品列表Tab切换 （手动、自动） | jQuery事件编程 | ||||
产品详细页特效 | jQuery事件编程 | ||||
1.7订购页面交互效果 | 1.7.1相册制作 | 使用插件实现图片放大镜效果 | 掌握jQuery的插件应用jqZoom、Fancybox | 4 | |
使用插件实现图片播放效果 | |||||
编写隔行变插件 | |||||
1.7.2化妆品网站订购页面交互效果 | 使用jQuery实现ul模拟Select下拉框 | 综合运用知识实现页面效果 | 4 | ||
操作提示框效果 | |||||
1.8留言板异步刷新 | 1.8.1名称验证 | 设计名称验证页面 | 掌握jQuery中的Ajax应用 | 4 | |
1.8.2网页数据异步刷新 | 网页数据异步刷新 | ||||
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论