2023年6月21日发(作者：)

课程名称：网页脚本技术(JavaScript+jQuery)

学 分：4

计划学时：64

适用专业：计算机应用技术

1．前言

1.1课程性质

该课程是计算机应用技术专业用户界面设计方向的一门专业拓展课，是在网站前端设计、移动Web开发(Html5+CSS3)等专业课的基础上开设的，与网站项目管理、网站后台开发()等后续课程也有着紧密联系。

本课程遵循“以就业为导向，以学生为主体，以培养职业技能为中心”的原则进行课程设计与教学。从实际应用的角度来理解JavaScript语言的语法和jQuery库的应用，引导学生在完成各个网页特效设计任务的过程中，熟练掌握形式多样的网页特效的设计方法，培养学生网页特效分析和设计能力。

1.2设计思路

本课程对就业方向所涵盖的岗位进行任务与职业能力分析，以实际工作任务为引领，以创新能力培养为主线，将课程知识体系整合为十个技能教学模块，在教学过程中注意体现学生设计能力培养的循序渐进性。在教学内容和方法上贯彻“技能培养为主，知识够用为度”的教学思想，旨在培养学生的创新意识，提高岗位实践能力和适应能力。

在每个教学单元中设置了3条主线：教学流程主线、理论知识主线和操作任务主线。充分考虑教学的要求，每个教学单元面向教学全过程设置了完整的教学环节，按照“教学导航->特效赏析->知识必备->引导训练->同步训练->考核评价”6个环节组织教学。

2．课程目标

2.1总体目标

通过本课程的学习使学生掌握JavaScript的基本语法概念和使用JavaScript进行页面效果开发的基本思想；能熟练地用JavaScript语言进行浏览器端的脚本开发；能熟练使用jQuery进行Web页面处理。培养学生规范编码和良好的程序设计风格；培养学生面向对象编程的思维和提高逻辑思维能力；培养学生发现问题、分析问题、解决问题的能力；培养良好的职业素质；培养团队协作和和谐的沟通能力；并为学生以后从事更专业化的软件开发工作或者学习后续课程打下良好的基础。

2.2具体目标 2.2.1知识目标

(1)了解JavaScript在建站过程中的任务，熟悉JavaScript的基础和基本语法。

(2)了解浏览器文档对象模型的发展及JavaScript对象的相关知识。

(3)熟悉JavaScript的核心语言。

(4)掌握JavaScript程序设计技术。

(5)掌握jQuery的基础，熟悉jQuery库的应用。

2.2.2能力目标

(1)能够使用JavaScript语言进行浏览器端的脚本开发。

(2)能够使用JavaScript事件处理机制。

(3)能够熟练的进行基于文档对象模型(DOM)、Document对象的编程。

(4)能够制作多种类型的网页特效。

(5)能熟练使用jQuery进行Web页面处理。

2.2.3素质目标

(1)学会注重细节设计，对网页特效制作和视觉效果有较好认识。

(2)良好的创意思维和理解能力，能及时把握客户需求。

(3)善于与人沟通，良好的团队合作精神，学习能力和高度的责任感。

3．课程内容与要求

序号 教学任务 教学内容

技能内容及要求：

(1)能在Web网页中嵌入Javascript脚本。

(2)会使用Javascript语言进行浏览器端的脚本开发。

1

JavaScript语言知识内容及要求：

基础 (1)了解JavaScript的概念。

(2)了解JavaScript的发展，特点与应用。

(3)理解JavaScript语言的类型及编写工具。

(4)掌握JavaScript的开发步骤。

技能内容及要求：

能使用Javascript事件处理机制。

2

JavaScript事件知识内容及要求：

处理 (1)掌握事件处理机制。

(2)灵活使用事件处理器。

(3)理解什么是事件及HTML文档事(1)教师给学生讲解各事件的概念、机制，并在讲解概念、工作机制后给学生演示例子。

(2)教学示范：学生仔细观察并将方法步骤记8

下。

(1)教师演示用记事本打开web网页文件，嵌入JavaScript脚本，并指导学生自己完成该内容。

(2)教师演示在web页面中使用JavaScript的两种方法，并指导学生自己完成该内容。

4

教学设计

参考学时 件。

(4)了解JavaScript如何处理事件，

事件处理器的返回值。

(5)掌握事件处理器的灵活设置。

技能内容及要求：

能熟练的进行基于文档对象模型(DOM)的编程。

3

文档对象模型知识内容及要求：

(DOM) (1)掌握DOM概念。

(2)掌握文档对象的产生过程。

(4)掌握对象的事件处理机制。

技能内容及要求：

(1)能熟练的进行基于Document对象的编程。

4 Document对象

知识内容及要求：

(1)掌握Document对象的使用。

教师讲解Document对象的概念、集合、属性、方法、事件、样式等内容。带领学生使用Document对象的集合、属性、方法、事件和7

教师给学生讲解DOM的概念、级别、产生过程，然后讲解对象的属性和方法、对象的事件处理工作原理并演示例子。

8

(3)灵活使用文档对象的属性和方法。

样式。

(2)灵活使用Document的集合、属性、演示示例后带领学生完成相关练习。

方法、样式。

(3)灵活使用Document对象时间。

技能内容及要求：

会修改按钮及按钮背景相关样式文件。

5

JavaScript与样式表

能改变Web页面样式。

知识内容及要求：

(1)掌握CSS样式表。

的方法。

(3)掌握JavaScript与DIV。

技能内容及要求：

会使用表单进行用户注册验证、登录验证。

6

JavaScript表单验证

能进行身份和邮箱验证。

知识内容及要求：

(1)掌握常用的表单验证机制。

(2)掌握正则表达式。

(3)灵活使用JavaScript对各类表单验证方法。

技能内容及要求：

能制作多种类型的网页特效。

知识内容及要求：

7

JavaScript常用特效

(1)掌握JavaScript处理文本内容的特效方法。

(2)掌握JavaScript处理DIV特效的方法。

(3)掌握JavaScript处理导航菜单、树、表单验证等特效。

8 JavaScript基于技能内容及要求： 10

教师讲解JavaScript对文本、图片等处理的常用特效，带领学生完成对DIV操作的常用特效，带领学生完成导航菜单、目录树、表单等练习。

6

(1)教师讲解常用表单验证机制、正则表达式的使用。

(2)完成用户注册验证、登录验证等示例。由4

学生完成身份证号、邮箱等常用表单验证练习。

(1)回顾CSS样式表，然后讲解JavaScript如何控制文本和DIV，改变按钮及按钮背景等相关样式。

(2)改变web页面样式的相关练习。

7

(2)掌握JavaScript处理文本、按钮 对象编程 (1)能使用Javascipt处理对象。

知识内容及要求：

教师讲解面向对象编程思想和基于对象编程的步骤。讲解JavaScript对象生成机制和核(1)掌握面向对象编程的基本方法。 心对象。带领学生完成JavaScript处理对象(2)掌握JavaScript对象生成机制。 的练习，然后布置练习让学生独立完成。

(3)掌握JavaScript核心对象。

(4)灵活使用JavaScript处理对象。

技能内容及要求：

(1)能熟练使用jQuery进行Web页面处理。

知识内容及要求：

9 jQuery基础 (1)掌握jQuery的基本语法；

(2)掌握jQuery常用方法；

本处理、CSS控制、事件处理、动画效果。

技能内容及要求：

(1)会使用jQuery改变样式、jQuery动画；

(2)会使用jQueryUI插件。

(3)能构建jQuery功能型表单。

10 jQuery高级编程

知识内容及要求：

(1)理解DOM操作；

(2)了解jQuery对表格操作的基本思路；

(3)了解jQuery如何改变属性；

教师讲解DOM操作原理，演示jQuery如何对操作表格，改变属性、样式和动画效果，演示JSON数据格式的使用，展示jQueryUI插6

件的案例和够条件功能性表单。带领学生完成一个综合案例，课上完成。

教师讲解jQuery的基本语法、常用方法、选择器、属性及文本处理、CSS控制、事件处理和动画效果示例。

带领学生完成事件处理案例，布置独立案例4

(3)掌握jQuery的选择器、属性及文由学生课上完成。

4．实施建议

4.1 教材选用和编写建议

参考教材：陈承欢，JavaScript+jQuery网页特效设计实例教程，人民邮电出版社.2015.02.

4.2教学建议

(1)教学组织——教学做一体化

本课程所有学时在专业实训室中完成，实现教、学、做结合，理论与实践一体化。每学完一个案例都进行核心技能实训，学生在校内课堂中完成教师精心设计的涵盖核心技能的实训题目。

(2)教学方法与手段

本课程为实际操作居多的课程，课程讲授方法为简单精炼的讲解工具和命令的操作方法，结合实例操作来进行理论知识的深入认识，再利用大量的上机训练来巩固和加深对操作方法的理解并提高熟练程度。学生能够对命令与工具进行熟练操作后，可布置相关的专题进行实际训练，将理论与实践相结合，深入理解软件对设计工作的帮助。课后可布置收集素材与教程的工作，让学生能够利用发达的互联网丰富软件的实际操作功能，并在收集过程中，对流行的设计元素增加认识，丰富可用的素材库。

4.3教学考核评价建议

(1)考核方式：上机操作考试(开卷)。

(2)各教学环节占总分的比例：作业及平时：20%，期中考试20%,期末上机考试：60%。

4.4课程资源的开发与利用

(1)课程教学资料：教材+经典实例、课程学习课件、课程上机指导书、参考用书等。

(2)图像、实物：学生的优秀作业及教师自备范例。

4.5教学条件配备建议

(1)教学辅助：计算机专业实训室、投影仪、DVD光驱、DreamweaverCS5软件、字库、图片素材库等。

(2)课程考核：上机操作考试安排在计算机专业实训室。

4.6其它说明

2023年6月21日发(作者：)

课程名称：网页脚本技术(JavaScript+jQuery)

学 分：4

计划学时：64

适用专业：计算机应用技术

1．前言

1.1课程性质

该课程是计算机应用技术专业用户界面设计方向的一门专业拓展课，是在网站前端设计、移动Web开发(Html5+CSS3)等专业课的基础上开设的，与网站项目管理、网站后台开发()等后续课程也有着紧密联系。

本课程遵循“以就业为导向，以学生为主体，以培养职业技能为中心”的原则进行课程设计与教学。从实际应用的角度来理解JavaScript语言的语法和jQuery库的应用，引导学生在完成各个网页特效设计任务的过程中，熟练掌握形式多样的网页特效的设计方法，培养学生网页特效分析和设计能力。

1.2设计思路

本课程对就业方向所涵盖的岗位进行任务与职业能力分析，以实际工作任务为引领，以创新能力培养为主线，将课程知识体系整合为十个技能教学模块，在教学过程中注意体现学生设计能力培养的循序渐进性。在教学内容和方法上贯彻“技能培养为主，知识够用为度”的教学思想，旨在培养学生的创新意识，提高岗位实践能力和适应能力。

在每个教学单元中设置了3条主线：教学流程主线、理论知识主线和操作任务主线。充分考虑教学的要求，每个教学单元面向教学全过程设置了完整的教学环节，按照“教学导航->特效赏析->知识必备->引导训练->同步训练->考核评价”6个环节组织教学。

2．课程目标

2.1总体目标

通过本课程的学习使学生掌握JavaScript的基本语法概念和使用JavaScript进行页面效果开发的基本思想；能熟练地用JavaScript语言进行浏览器端的脚本开发；能熟练使用jQuery进行Web页面处理。培养学生规范编码和良好的程序设计风格；培养学生面向对象编程的思维和提高逻辑思维能力；培养学生发现问题、分析问题、解决问题的能力；培养良好的职业素质；培养团队协作和和谐的沟通能力；并为学生以后从事更专业化的软件开发工作或者学习后续课程打下良好的基础。

2.2具体目标 2.2.1知识目标

(1)了解JavaScript在建站过程中的任务，熟悉JavaScript的基础和基本语法。

(2)了解浏览器文档对象模型的发展及JavaScript对象的相关知识。

(3)熟悉JavaScript的核心语言。

(4)掌握JavaScript程序设计技术。

(5)掌握jQuery的基础，熟悉jQuery库的应用。

2.2.2能力目标

(1)能够使用JavaScript语言进行浏览器端的脚本开发。

(2)能够使用JavaScript事件处理机制。

(3)能够熟练的进行基于文档对象模型(DOM)、Document对象的编程。

(4)能够制作多种类型的网页特效。

(5)能熟练使用jQuery进行Web页面处理。

2.2.3素质目标

(1)学会注重细节设计，对网页特效制作和视觉效果有较好认识。

(2)良好的创意思维和理解能力，能及时把握客户需求。

(3)善于与人沟通，良好的团队合作精神，学习能力和高度的责任感。

3．课程内容与要求

序号 教学任务 教学内容

技能内容及要求：

(1)能在Web网页中嵌入Javascript脚本。

(2)会使用Javascript语言进行浏览器端的脚本开发。

1

JavaScript语言知识内容及要求：

基础 (1)了解JavaScript的概念。

(2)了解JavaScript的发展，特点与应用。

(3)理解JavaScript语言的类型及编写工具。

(4)掌握JavaScript的开发步骤。

技能内容及要求：

能使用Javascript事件处理机制。

2

JavaScript事件知识内容及要求：

处理 (1)掌握事件处理机制。

(2)灵活使用事件处理器。

(3)理解什么是事件及HTML文档事(1)教师给学生讲解各事件的概念、机制，并在讲解概念、工作机制后给学生演示例子。

(2)教学示范：学生仔细观察并将方法步骤记8

下。

(1)教师演示用记事本打开web网页文件，嵌入JavaScript脚本，并指导学生自己完成该内容。

(2)教师演示在web页面中使用JavaScript的两种方法，并指导学生自己完成该内容。

4

教学设计

参考学时 件。

(4)了解JavaScript如何处理事件，

事件处理器的返回值。

(5)掌握事件处理器的灵活设置。

技能内容及要求：

能熟练的进行基于文档对象模型(DOM)的编程。

3

文档对象模型知识内容及要求：

(DOM) (1)掌握DOM概念。

(2)掌握文档对象的产生过程。

(4)掌握对象的事件处理机制。

技能内容及要求：

(1)能熟练的进行基于Document对象的编程。

4 Document对象

知识内容及要求：

(1)掌握Document对象的使用。

教师讲解Document对象的概念、集合、属性、方法、事件、样式等内容。带领学生使用Document对象的集合、属性、方法、事件和7

教师给学生讲解DOM的概念、级别、产生过程，然后讲解对象的属性和方法、对象的事件处理工作原理并演示例子。

8

(3)灵活使用文档对象的属性和方法。

样式。

(2)灵活使用Document的集合、属性、演示示例后带领学生完成相关练习。

方法、样式。

(3)灵活使用Document对象时间。

技能内容及要求：

会修改按钮及按钮背景相关样式文件。

5

JavaScript与样式表

能改变Web页面样式。

知识内容及要求：

(1)掌握CSS样式表。

的方法。

(3)掌握JavaScript与DIV。

技能内容及要求：

会使用表单进行用户注册验证、登录验证。

6

JavaScript表单验证

能进行身份和邮箱验证。

知识内容及要求：

(1)掌握常用的表单验证机制。

(2)掌握正则表达式。

(3)灵活使用JavaScript对各类表单验证方法。

技能内容及要求：

能制作多种类型的网页特效。

知识内容及要求：

7

JavaScript常用特效

(1)掌握JavaScript处理文本内容的特效方法。

(2)掌握JavaScript处理DIV特效的方法。

(3)掌握JavaScript处理导航菜单、树、表单验证等特效。

8 JavaScript基于技能内容及要求： 10

教师讲解JavaScript对文本、图片等处理的常用特效，带领学生完成对DIV操作的常用特效，带领学生完成导航菜单、目录树、表单等练习。

6

(1)教师讲解常用表单验证机制、正则表达式的使用。

(2)完成用户注册验证、登录验证等示例。由4

学生完成身份证号、邮箱等常用表单验证练习。

(1)回顾CSS样式表，然后讲解JavaScript如何控制文本和DIV，改变按钮及按钮背景等相关样式。

(2)改变web页面样式的相关练习。

7

(2)掌握JavaScript处理文本、按钮 对象编程 (1)能使用Javascipt处理对象。

知识内容及要求：

教师讲解面向对象编程思想和基于对象编程的步骤。讲解JavaScript对象生成机制和核(1)掌握面向对象编程的基本方法。 心对象。带领学生完成JavaScript处理对象(2)掌握JavaScript对象生成机制。 的练习，然后布置练习让学生独立完成。

(3)掌握JavaScript核心对象。

(4)灵活使用JavaScript处理对象。

技能内容及要求：

(1)能熟练使用jQuery进行Web页面处理。

知识内容及要求：

9 jQuery基础 (1)掌握jQuery的基本语法；

(2)掌握jQuery常用方法；

本处理、CSS控制、事件处理、动画效果。

技能内容及要求：

(1)会使用jQuery改变样式、jQuery动画；

(2)会使用jQueryUI插件。

(3)能构建jQuery功能型表单。

10 jQuery高级编程

知识内容及要求：

(1)理解DOM操作；

(2)了解jQuery对表格操作的基本思路；

(3)了解jQuery如何改变属性；

教师讲解DOM操作原理，演示jQuery如何对操作表格，改变属性、样式和动画效果，演示JSON数据格式的使用，展示jQueryUI插6

件的案例和够条件功能性表单。带领学生完成一个综合案例，课上完成。

教师讲解jQuery的基本语法、常用方法、选择器、属性及文本处理、CSS控制、事件处理和动画效果示例。

带领学生完成事件处理案例，布置独立案例4

(3)掌握jQuery的选择器、属性及文由学生课上完成。

4．实施建议

4.1 教材选用和编写建议

参考教材：陈承欢，JavaScript+jQuery网页特效设计实例教程，人民邮电出版社.2015.02.

4.2教学建议

(1)教学组织——教学做一体化

本课程所有学时在专业实训室中完成，实现教、学、做结合，理论与实践一体化。每学完一个案例都进行核心技能实训，学生在校内课堂中完成教师精心设计的涵盖核心技能的实训题目。

(2)教学方法与手段

本课程为实际操作居多的课程，课程讲授方法为简单精炼的讲解工具和命令的操作方法，结合实例操作来进行理论知识的深入认识，再利用大量的上机训练来巩固和加深对操作方法的理解并提高熟练程度。学生能够对命令与工具进行熟练操作后，可布置相关的专题进行实际训练，将理论与实践相结合，深入理解软件对设计工作的帮助。课后可布置收集素材与教程的工作，让学生能够利用发达的互联网丰富软件的实际操作功能，并在收集过程中，对流行的设计元素增加认识，丰富可用的素材库。

4.3教学考核评价建议

(1)考核方式：上机操作考试(开卷)。

(2)各教学环节占总分的比例：作业及平时：20%，期中考试20%,期末上机考试：60%。

4.4课程资源的开发与利用

(1)课程教学资料：教材+经典实例、课程学习课件、课程上机指导书、参考用书等。

(2)图像、实物：学生的优秀作业及教师自备范例。

4.5教学条件配备建议

(1)教学辅助：计算机专业实训室、投影仪、DVD光驱、DreamweaverCS5软件、字库、图片素材库等。

(2)课程考核：上机操作考试安排在计算机专业实训室。

4.6其它说明