《Web前端开发技术》课程标准

2024年2月6日发(作者：)

《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.2网站规划 功能设计

1

1.化妆品网站需求分析与总1.1.3网站风格定掌握页面布局的1

设计与实现

体设计

页面布局分析与设计

位 知识

1.1.4化妆品网站总体设计

网站总体设计

掌握网站总体的设计流程

熟悉开发环

1

4

熟悉开发环境

1.2开发环境、1.2．1开发环境、

调试环境搭建 调试环境搭建 境，能够创建网站、网页等

掌握JavaScript1.3.1显示变量数制作动态显示变量数的变量、数据类据类型 据类型 型、运算符号等1

知识

1.3猜数游戏1.3.2学生成绩考制作学生成绩考评页掌握JavaScript评. 面 的选择结构语法

1

和计算器设计

掌握JavaScript

1.3.3猜数字游戏 制作猜数游戏页面

1

的循环结构

1.3.4简易计算器 制作简易计算器

掌握函数和自定义函数

1

在页面动态显示系统掌握Date对象和时间 定时器函数

1

掌握Math对象制作随机选号页面 的属性和常用方1

法

1.4.1动态显示系统时间及随机选制作简单的焦点图效掌握数组的属性1

号设计

果 和方法

验证注册页面信息

掌握String对象的属性和方法

1

1.4用户注册页面效果

使用正则表达式验证 掌握正则表达

1

注册页面信息 式的使用

使用CoreDOM方式动掌握查看、创建、1.4.2动态添加商品信息表

态添加表格

增加、删除、替换节点

3

使用HTMLDOM方式动掌握HTMLDOM态添加表格 对象的属性

1.4.3动态弹窗及注册页面弹出窗口的掌握window的

网页标题交替显实现 常用属性、方法

示 和事件

2

制作页面标题交替显

掌握document示效果、复选框全选效对象的常用属性2

果

和方法

掌握style、动态改变导航菜单样className、式 visibility、display1

属性

掌握style、制作图片轮显效果

className、1

1.5.1动态改变导visibility、display航菜单及图片轮属性

播 制作随光标滚动的广掌握获取样式的告图片 值和页面事件

1

制作Tab切换效果

掌握制作Tab切换效果的方法

1

1.5网站首页制作光标移到某图上掌握制作光标移交互效果实现

显示该图的大图

到某图上显示该2

图的大图的方法

1.5.2化妆品网站背景图轮播效果化妆品网站背景图轮实现

播效果实现

能综合运用JavaScript与CSS2

1.5.3搜索框文 化妆品网站索框文字

样式

字提示效果 提示效果

1.5.4品牌列表的网站品牌列表的显示jQuery开发工具显示与收起 与收起

和插件、jQuery4

选择器

1.5.5留言板前端制作图片展示效果 掌握jQuery的特效制作

DOM操作，获4

制作留言板前端局部

取、设置和删

更新效果

制作电子邮件删除效果

表格隔行变色和当前除属性掌握节点行变色 的操作

制作层叠图片横向平滑移动轮播切换效果

FAQ答案的显示与隐1.5.6图片横向移藏

掌握jQuery的动动效果 画

4

图片横向移动效果

返回顶部效果

在线客服效果

掌握综合运用1.5.7化妆品网站图片的Tab切换效果 CSS样式、jQuery首页效果

图片放大效果：制作动画、4

（续）

Fancybox图片播放插jQuery中的DOM件

操作

禁止鼠标右键效果

掌握加载DOM、微博数字统计 事件绑定、事件移除、简写事件

1.6.1微博网页特效设计 制作图片提示效果

掌握事件对象、4

事件冒泡

1.6产品列表页面交互效果改变图片透明度

掌握合成事件、特殊事件

实现

循环编程语法、1.6.2化妆品网站滚动条美化 TinyScrollbar插产品列表页面交件使用

4

互效果实现

产品列表Tab切换

jQuery事件编程

（手动、自动）

产品详细页特效

使用插件实现图片放大镜效果

1.7.1相册制作 使用插件实现图片播1.7订购页面交互效果

放效果

编写隔行变色插件

jQuery事件编程

掌握jQuery的插件应用jqZoom、Fancybox

4

1.7.2化妆品网站使用jQuery实现ul模综合运用知识实拟Select下拉框

4

订购页面交互效现页面效果

果

操作提示框效果

1.8.1名称验证 设计名称验证页面

1.8留言板异步刷新

1.8.2网页数据异步刷新

2.1展示完整的化妆品网站2主题网站设作品

计与实现

网页数据异步刷新

掌握jQuery中的Ajax应用

4

2.1展示完整的2.1展示完整的化妆品总结本课程的知化妆品网站作品 网站作品 识和技能

清晰理解课程设计的要求

4

2.2课程设计 课程设计要求

合计

72

课程设计要求

六、课程考核

6.1考核方式

本课程考核采取形成性考核和终结性考核两种方式进行，两部分的分数比例为：课程考核成绩=形成性考核成绩（60%）+终结性考核成绩（40%）

6.1.1形成性考核

6.1.1.1形成性考核种类及分数比例本课程形成性考核选择平时成绩和项目任务成绩。其中平时成绩主要指考勤和上课参与度；子项目成绩包括：操作和实训任务卡。分数比例为：形成性考核成绩=平时成绩（30%）+项目任务成绩（70%）

6.1.1.2形成性考核具体内容及评分标准

（1）平时成绩考核（100分）

随机对学生进行考勤，无故迟到或早退1次扣5分，请假一次扣5分，旷课一次扣

10分，扣满100分为止。随机抽取学生回答问题，答对一题奖励5分，平时成绩为100的不再增加。

（2）项目任务成绩（100分），如表2。

表2考核方式与考核标准设计表

项目名称

考核点及项目分建议考核方评价标准

值 式

提交系统需网站特效分析与规划设计

网站需求分析、网求分析与总正确理解任务，提站规划、网站风格体设计文档，交文档规范可实定位、网站总体设教师评

计（10%

）价

安装项目开发环DreamweaverCS6提交安装图境搭建

成功安装软件，并成功安装软施，并有一定的创新点。

正确理解任能理解任务，务，提交文档提交文档较5%

规范可实施 规范可实施。

优 良 及格

项目成绩比例

创建一个网站及部件，创建一个或SublimeText创片，教师评价 件

分静态页面 网站

建网站（5%）

成功安装软5%

提交完成的用户注册交

JavaScript基础及作品源码，演页面布局合理，回示，答辩教师jQueryBOM编程 答问题思路清晰、互模块

评价、小组互流畅、正确。

评

源程序准确无误，源程序准确无误，回答问题思路较清晰、流畅、正确。

源程序基本准确，回答问正确。

10%

题基本清晰、首页交互模块

JavaScript内置对提交完成的象编程、作品源码，教jQueryDOM编程 师评价

提交完成的源程序准确无误、页面布局合理。

源程序准确源程序基本无误、页面布无误、页面布10%

局比较合理。 局基本合理。

源程序准确无误，回答问题思路较清晰、流畅、正确。

源程序基本准确，回答问正确。

10%

题基本清晰、产品列表页jQuery事件编面交互模块 程、Ajax的应用

作品源码，演示，答辩教师评价、小组互评

源程序准确无误，页面布局合理，回答问题思路清晰、流畅、正确。

订购页面模jQuery插件的应提交完成的源程序准确无误、源程序准确源程序基本10%

块 用 页面布局合理。

作品源码，教无误、页面布无误、页面布

师评价 局比较合理。 局基本合理。

提交的自选提交的自选设计项目源程序基本准计作品文档一定的创新、误、有较强的创新、确、能实现其JavaScript文档规范、代码规及源代码，项能实现其功能完全实现其功基本功能，页50%

课程设计 范等 目演示，答辩能，页面布局能，页面布局合理，面布局基本作品演示答较合理，回答回答问题思路清合理，回答问辩教师评价 问题思路较晰、流畅、正确。 题思路基本清晰、流畅、清晰、正确。

正确。

合计

100%

提交自选设提交的自选设计项目源程序准确无设计项目源程序准确、有6.1.2终结性考核

6.1.2.1终结性考核具体内容及评分标准本课程终结性考核采取笔试考核（100分）。如表3。

表3课程考核命题双向细目表

题型（以分数计）

题型分值

客观性题

教学单元

选择

1

2

3

4

5

6

7

合计

网站特效分析与规划设计

项目开发环境搭建

用户注册交互模块

首页交互模块

产品列表页面交互模块

订购页面模块

JavaScript课程设计

10

14

14

10

12

10

10

80

填空

2

2

2

4

2

4

4

20

12

16

16

14

14

14

14

100

计

合

七、教学资源配置

7.1主教材

《JavaScript+jQuery交互式Web前端开发》，黑马程序员，人民邮电出版社。

7.2参考资料

1、《JavaScript与jQuery实战教程》,清华大学出版社，卢淑萍

2、《Web前端开发初级下册》，中国工信出版社集团电子工业出版社，工业和信息化部教育与考试中心。

7.3主要设备与设施

教-学-做一体化机房，机房应配有良好性能的教师机和学生机、投影仪、无线麦克风、教师机和学生机均需安装Office2003和CS6，并安装多媒体示教软件用于广播教学、文件分发、作业搜集等。

八、教师要求

教师应当非常熟悉本课程所有知识点的理论内容，并有丰富的相关实践能力，要求参加或主持过相关网站开发项目，与学生沟通能力强，能较好地掌握和分析学生的学情。