《JavaScript与jQuery网页前端开发与设计-第2版》教学大纲（64课时）

JavaScript与jQuery网页前端开发与设计-第2版教学大纲（64课时版）课程名称:JavaScript与jQuery网页前端开发与设计一、课程概况课程编号：20231201001开课部门：XX系学分：X学分学时：64学时（其中理论学时：32学时上机学时：32学时）先修课程：计算机基础、计算机网络、计算机应用后续课程：数据库应用、软件开发等适用专业：信息技术及其计算机相关专业二、课程描述JavaScript与jQuery网页前端开发与设计是学习Web前端开发的必修课程。本课程介绍了开发Web前端网页应具备的基础知识，包括JavaScript技术入门以及jQuery选择器与过滤器、事件、特效等知识。通过理论教学和上机练习训练学生编写程序的熟练度和规范性；在项目经验的积累方面，通过完成项目案例，增加对实际软件项目开发的经验。三、课程目标知识目标：了解Web原理基础和前端新技术的由来，掌握JavaScript数据类型与运算符、语句与函数、BOM和DOM的应用，掌握jQuery选择器与过滤器、事件、特效、DOM、遍历以及jQueryAJAX技术。技能目标：能综合应用HTML5、CSS3与JavaScript技术开发Web项目，能够在开发过程中熟练掌握JavaScript函数的封装和使用、jQuery各类选择器的使用和样式的表达，以及jQueryAJAX技术的应用，提高开发者网页前端实战项目分析能力以及强化综合应用能力。四、教学要求一、严格按照课表规定的时间、地点上课，不迟到、不早退。二、根据大纲要求，认真备课完成教案与讲稿编写等各项课前准备工作；授课过程力求内容充实、概念准确、思路清晰、详略得当、逻辑性强、重难点突出，力戒平铺直叙、照本宣科，三、重视对学生的学习方法指导和课堂教学效果信息的反馈，实现教与学的双向互动；四、做好考核内容设计，并严格按照大纲要求做好出勤率统计、作业评价。五、学生根据课程大纲要求制定本门课程学习计划，加强学业管理，严格自我要求，提升自主学习能力，主动适应课程学习要求。参与课堂教学活动不迟到、不早退，无正当理由不请假，上课认真听讲，不做任何与课堂教学无关事宜，不使用手机，积极与授课教师进行教学互动，同时利用课余时间做好预习、复习、课外书籍阅读等工作，主动与同学开展合作学习，认真完成任课教师布置的课程作业。五、课程内容第1章 概述一、教学目标：1. 了解JavaScript的概念与特点；2. 了解jQuery的概念与特点；3. 掌握任意一款Web开发工具。二、教学重点和难点：重点：熟悉JavaScript和jQuery的概念与特点；难点：jQuery的版本比较。三、教学方法与手段：采取互动式教学方法，理论教学使用多媒体投影教室。四、课程简介：本章是全书的绪论部分，主要介绍JavaScript、jQuery概述以及Web开发工具的选择。JavaScript和HTML、CSS一起被称为是Web开发的三大核心技术，当今所有浏览器都支持JavaScript，无需额外安装第三方插件。而jQuery是一个轻量级的跨平台JavaScript函数库，它化简了JavaScript代码复杂度，其语法能用让用户更方便地选取和操作HTML元素、处理各类事件、实现JavaScript特效与动画，并且能为不同类型的浏览器提供更便捷的API用于AJAX交互。第2章 JavaScript入门一、教学目标：1. 了解JavaScript的使用方式；2. 了解JavaScript的基本语法规则；3. 熟悉JavaScript的变量声明与命名规范。二、教学重点和难点：重点：了解JavaScript的基本语法规则；难点：JavaScript的使用方式（内部和外部的用法）。三、教学方法与手段：采取互动式教学方法，理论教学使用多媒体投影教室。四、课程简介：本章主要内容是JavaScript基础知识，包括JavaScript的使用方式、语法规则、变量声明与明明规范等内容。第3章 JavaScript数据类型与运算符一、教学目标：1. 掌握JavaScript的基本数据类型与对象类型；2. 掌握JavaScript类型转换方法；3. 掌握JavaScript运算符的使用。二、教学重点和难点：重点：JavaScript的基本数据类型与对象类型；难点：JavaScript类型转换方法。三、教学方法与手段：采取互动式教学方法，理论教学使用多媒体投影教室。四、课程简介：本章主要内容是JavaScript基础知识，包括JavaScript的使用、语法、变量等内容。基本数据类型、对象、类型转换、运算符、条件和循环语句、函数、DOM与BOM的用法。第4章 JavaScript语句与函数一、教学目标：1. 掌握JavaScript条件语句的用法；2. 掌握JavaScript循环语句的用法；3. 掌握JavaScript函数的使用。二、教学重点和难点：重点：JavaScript语句；难点：JavaScript函数的使用。三、教学方法与手段：采取互动式教学方法，理论教学使用多媒体投影教室。四、课程简介：本章主要内容是JavaScript语句与函数，包括JavaScript的条件语句、循环语句的使用，以及JavaScript函数的应用。第5章 JavaScriptBOM和DOM一、教学目标：1. 掌握JavaScriptDOM的用法；2. 掌握JavaScriptBOM的用法。二、教学重点和难点：重点：JavaScriptDOM的用法；难点：JavaScriptBOM的用法。三、教学方法与手段：采取互动式教学方法，理论教学使用多媒体投影教室。四、课程简介：本章主要内容是JavaScript文档对象模型DOM和浏览器对象模型BOM的用法，在DOM部分主要包括对HTML元素的查找、动态创建、内容/属性修改，以及事件和节点；在BOM部分主要包括了5种常用对象。第6章jQuery入门一、教学目标：1. 了解jQuery的下载与使用；2. 掌握jQuery的基础语法结构；3. 掌握jQuery文档就绪函数的用法；4. 掌握jQuery名称冲突的解决方案。二、教学重点和难点：重点：jQuery的基础语法结构；难点：jQuery名称冲突的解决方案。三、教学方法与手段：采取互动式教学方法，理论教学使用多媒体投影教室。四、课程简介：本章主要介绍jQuery基础知识入门，包括jQuery的下载和使用、jQuery基础语法结构、jQuery文档就绪函数以及jQuery名称冲突的解决方案。第7章jQuery选择器与过滤器一、教学目标：1. 理解jQuery选择器和过滤器的作用；2. 掌握jQuery选择器的常见用法；3. 掌握jQuery过滤器的常见用法。二、教学重点和难点：重点：jQuery选择器的用法；难点：jQuery过滤器的用法。三、教学方法与手段：采取互动式教学方法，理论教学使用多媒体投影教室。四、课程简介：本章主要介绍jQuery选择器与jQuery过滤器的相关知识。jQuery选择器包括基础选择器、属性选择器、表单选择器、层次选择器以及CSS选择器；jQuery过滤器包括基础过滤器、子元素过滤器、内容过滤器和可见性过滤器。第8章jQuery事件一、教学目标：1. 了解jQuery事件的基础语法格式；2. 掌握常见jQuery文档/窗口事件的用法；3. 掌握常见jQuery键盘事件的用法；4. 掌握常见jQuery鼠标事件的用法；5. 掌握常见jQuery表单事件的用法；6. 掌握jQuery事件绑定与解除的用法；7. 掌握jQuery临时事件的用法。二、教学重点和难点：重点：jQuery的各类事件（文档/窗口、键盘、鼠标、表单）；难点：jQuery事件绑定与解除。三、教学方法与手段：采取互动式教学方法，理论教学使用多媒体投影教室。四、课程简介：本章主要介绍jQuery事件的相关知识，包括jQuery事件的含义及语法格式、常用jQuery事件以及jQuery事件的绑定与解除。第9章jQuery特效一、教学目标：1. 掌握jQuery隐藏/显示相关函数hide()、show()和toggle()的用法；2. 掌握jQuery淡入/淡出相关函数fadeIn()、fadeOut()、fadeToggle()、fadeTo()的用法；3. 掌握jQuery滑动相关函数slideDown()、slideUp()、slideToggle()的用法；4. 掌握jQuery动画（Animation）的用法；5. 掌握jQuery方法链接（Chaining）的用法；6. 掌握jQuery停止动画相关函数stop()的用法。二、教学重点和难点：重点：jQuery常用特效（隐藏/显示、淡入淡出、滑动）；难点：jQuery动画和方法链接的用法。三、教学方法与手段：采取互动式教学方法，理论教学使用多媒体投影教室。四、课程简介：本章主要介绍jQuery常用特效，包括jQuery隐藏和显示、淡入和淡出、滑动、动画、方法链接以及停止动画效果。第10章jQueryHTMLDOM一、教学目标：1. 掌握jQuery获取和设置相关函数text()、html()、val()、attr()、css()的使用；2. 掌握jQuery添加相关函数append()和prepend()、after()和before()的使用；3. 掌握jQuery删除相关函数remove()、empty()和removeAttr()的使用；4. 掌握jQuery类属性设置相关函数addClass()、removeClass()和toggleClass()的使用；5. 掌握jQuery尺寸相关width()、height()系列函数的使用。二、教学重点和难点：重点：jQuery常用DOM函数的用法（获取/设置、添加、删除）；难点：jQuery类属性设置相关函数的使用。三、教学方法与手段：采取互动式教学方法，理论教学使用多媒体投影教室。四、课程简介：DOM指的是DocumentObjectModel（文档对象模型），jQuery提供了一系列与DOM相关的方法能让用户更方便的选择和操作HTML文档中的元素及其属性。本章主要内容是jQueryHTMLDOM技术的应用，包括jQuery获取和设置、添加、删除、类属性设置以及尺寸相关函数的应用。第11章jQuery遍历一、教学目标：1. 了解什么是HTML家族树结构；2. 掌握jQuery后代遍历相关函数children()、find()的使用；3. 掌握jQuery同胞遍历相关函数siblings()、next()系列函数、prev()系列函数的使用；4. 掌握jQuery祖先遍历相关函数parent()、parents()、parentsUntil()的使用。二、教学重点和难点：重点：jQuery后代和同胞遍历相关函数的用法；难点：jQuery祖先遍历相关函数的用法。三、教学方法与手段：采取互动式教学方法，理论教学使用多媒体投影教室。四、课程简介：jQuery遍历指的是在HTML页面上沿着某个指定元素节点位置进行移动，直到查找到需要的HTML元素为止。本章主要内容是jQuery遍历技术的应用，包括HTML家族树概念的介绍、jQuery后代遍历、同胞遍历以及祖先遍历的相关函数用法。第12章jQueryAJAX技术一、教学目标：1. 了解什么是AJAX以及AJAX技术的组成部分；2. 了解什么是jQueryAJAX；3. 掌握jQueryload()、get()、post()以及ajax()等常用方法的使用；4. 掌握jQueryAJAX事件的用法。二、教学重点和难点：重点：掌握jQueryAJAX常用方法（load、get、post和ajax）；难点：jQueryAJAX事件的用法。三、教学方法与手段：采取互动式教学方法，理论教学使用多媒体投影教室。四、课程简介：AJAX是一种可以与服务器异步交互数据的网页开发技术，使用该技术可以在不重新加载整个页面的前提下直接更新当前页面中的指定内容。本章主要内容是jQueryAJAX技术的应用，包括jQueryAJAX技术简介、常用方法和事件处理三个部分组成。第13章天气预报查询的设计与实现一、教学目标：1. 学习掌握第三方服务平台密钥申请和调用方法；2. 学习掌握JavaScript和jQuery基础知识；3. 学习掌握jQueryAJAX的用法实现服务器请求和回调处理。二、教学重点和难点：重点：jQuery中ID选择器、类选择器等各类选择器的综合应用；难点：jQueryajax()方法的理解与应用。三、教学方法与手段：采取互动式教学方法，理论教学使用多媒体投影教室。四、课程简介：本章将从零开始详解如何调用第三方服务平台接口制作一款天气预报查询程序。通过对完整项目实例的解析与实现，提高开发者项目分析能力以及强化对于JavaScript和jQuery的综合应用能力。第14章思政答题程序的设计与实现一、教学目标：1. 学习掌握服务器的部署和启停；2. 学习掌握JSON格式文件制作题库数据和接口的编写；3. 学习掌握JavaScript和jQuery基础知识；4. 学习掌握jQueryAJAX的用法实现服务器请求和回调处理。二、教学重点和难点：重点：jQueryAJAX的用法实现服务器请求和回调处理；难点：JSON格式文件制作题库数据和接口的编写。三、教学方法与手段：采取互动式教学方法，理论教学使用多媒体投影教室。四、课程简介：本章将从零开始详解如何开发实现一个基于Windows+Apache/Nginx+PHP服务器环境的思政答题程序。通过对完整项目实例的解析与实现，提高开发者项目分析能力以及强化对于JavaScript和jQuery的综合应用能力。六、实验环节本课程建议课内上机32个学时，针对每章节知识点进行基础项目案例开发训练。教师可根据实际情况从相关章节的阶段案例一节选取上机的具体内容。该书除了概述和入门介绍章节外，其余每章节均配有一个阶段案例，外加本书的最后2章均为综合案例，教师可每次选择对应章节中一个案例作为上机课主题，最后2章综合案例（二选一）作为期末课程实训的内容。具体安排见下表。章节上机课时实验内容第1章概述0无第2章JavaScript入门2JavaScript弹窗第3章JavaScript数据类型与运算符2生肖计算第4章JavaScript语句和函数2猜数字小游戏第5章JavaScriptDOM和BOM2Nim博弈小游戏第6章jQuery入门2jQuery的下载和使用第7章jQuery选择器与过滤器2网页一键换肤第8章jQuery事件2鼠标悬停切换图片第9章jQuery特效2动态下拉菜单特效第10章jQueryHTMLDOM4简易留言版第11章jQuery遍历4仿电商购物车效果第12章jQueryAJAX4简易单词查询第13章综合设计示例1（2选1）4天气预报查询第14章综合设计示例2（2选1）思政答题平台上机实验环节可以巩固学生对理论知识的理解，提高学生的实践操作能力和解决问题的逻辑思维能力，课后还可布置思考题培养学生的创新思