JavaScript+jQuery前端开发基础教程教案

1、教案课程名称JavaScript+jQuery前端开发基础教程课程代码系（部）教研室（实验室）授课教师职称课程 名称JavaScr ipt+jQuery前端开发基础教程（微课版）总计：64学时程别 课类专业课课程代码讲授：42学时实验：22学时其他：学时课师 授教学 分授课 对象材主参资 教和要考料教材:刘凡馨夏帮贵，JavaScript+jQuery前端开发基础教程（微课版）及人民 邮电出版社，2018.8参考资料：美达克特（JonDuckett）著JaveScript&jQuery交互式Web前端开 发第2版，清华大学出版社，2015.6程介 课简本课程注重基础、循序渐进，系统地讲

2、述了 JavaScript和jQuery前端开发的相 关基础知识。JavaScript部分涵盖了 JavaScript简介、核心语法基础、数组和函数、 异常和事件处理、JavaScript对象、浏览器对象、AJAX等主要内容。jQuery部分 涵盖了 jQuery简介、选择器和过滤器、操作页而元素、jQuery事件处理、jQuery 特效、jQuery AJAX等主要内容。最后综合应用本书介绍的各种知识，实现一个在 线咨询服务系统。对于每一个知识点，都尽量结合实例帮助读者学习理解。第1 13章的每章最后部分还给出了一个编程实践来说明本章知识的使用。学点点 教难重第1章JavaScript简介在

3、HTML中使用JavaScrip、JavaScript基本语法 第2章JavaScrip1核心语法基础数据类型和变量、运算符与表达式、流程控制语句 第3章数组和函数数组、函数、内置函数 第4章异常和事件处理 异常处理、事件处理处理 第5章JavaScript对象 原型对象和继承、内置对象 第6章浏览器对象Window对象、Document对象、衣单对象 第7章AJAX使用AJAX完成HTTP请求、使用script完成HTTP请求 第8章jQuery简介 引入jQuery第9章jQuery选择器和过滤器jQuery。函数、基础选择胎、层级选择器、过滤器2 / 17第10章操作页而元素元素内容操作

4、、插入结点、包装结点、替换结点、删除结点、复制结点、样式操作第11章jQuery事件处理jQuery事件对象、附加和解除事件处理函数、事件快捷方法第12章jQuery特效简单特效、透明度特效、滑动特效、自定义动画、动画相关的属性和方法第 13 章 jQuery AJAX加载服务器数据、get。和post。方法、获取JSON数据、获取脚本、事件处理授课题目：第1章JavaScript基础授课方式 理论课口讨论课口实验课口习题课 （请打J） 其他口课时理论课：2安排实验课：1教学大纲要求：让学生了解JavaScript版本、特点，掌握JavaScript编程工具Visual Studio Comm

5、unity 2017,熟悉 JavaScript 基本语法。教学重点及难点：重点：JavaScript 编程工具 Visual Studio Community 2017 JavaScript 基本语法 难点：作业、讨论题、思考题： 课后习题课后总结分析：教学内容备注理论课主要教学内容：1.1 JavaScript 简介1.1.1 JavaScript 版本1.1.2 JavaScript 特点1.2 JavaScript 编程工具1.2.1 F载安装 Visual Studio Community 20171.2.2 使用 Visual Studio1.2.3 使用浏览器开发人员工具1.3

6、在 HTML 中使用 JavaScript1.3.1 使用script标记嵌入脚本1.3.2 使用script）标记链接脚本1.3.3 作为事件处理程序1.3.4 作为 URL1.4 JavaScript 基本语法1.4.1 大小写敏感1.4.2 空格、换行符和制表符1.4.3 语句结束符号1.4.4 注释1.4.5 标识符命名规则实脸课内容：1.5 编程实践：HelloJavaScript授课题目：第2章JavaScript核心语法基础曲?当 理论课口讨论课口实验课口习题课口其他口 （请打V ）课时理论课：4 安排实验课：2教学大纲要求：让学生掌握数据类型和变量、运算符与表达式、流程控制语句

7、。教学重点及难点：重点：数据类型和变量、运算符与表达式难点：流程控制语句作业、讨论题、思考题： 课后习题课后总结分析：教学内容备注理论课主要教学内容：2.1 数据类型和变量2.1.1 数据类型2.1.2 变量2.2 运算符与表达式2.2.1 算术运算符2.2.2 字符串运算符2.2.3 关系运算符2.2.4 逻辑运算符2.2.5 位运算符2.2.6 赋值运算符2.2.7 特殊运算符2.2.8 运算符的优先级2.2.9 表达式中的数据类型转换2.3 流程控制语句2.3.1 if 语句2.3.2 switch 语句2.3.3 for 循环2.3.4 while 循环2.3.5 do/while 循

8、环2.3.6 continue 语句2.3.7 break 语句实脸课内容：2.4编程实践：输出数 字图形授课题目：第3章数组和函数啰?个 理论课口讨论课口实验课口习题课口其他口 （谓打V）课时 理论课：3安排实验课：2教学大纲要求：让学生掌握数组、函数和内置函数。教学重点及难点：重点：数组、函数和内置函数难点：作业、讨论题、思考题： 课后习题课后总结分析：教学内容备注理论课主要教学内容：3.1 数组3.1.1 创建数组3.1.2 使用数组3.1.3 数组的属性3.1.4 数组的方法3.2 函数3.2.1 定义函数3.2.2 调用函数3.2.3 带参数的函数3.2.4 函数的嵌套3.2.5 递

9、归函数3.3 内置函数实脸课内容：3.4编程实践：模拟汉 诺塔移动授课题目：第4章异常和事件处理啰?个 理论课口讨论课口实验课口习题课口其他口 （谓打V）课时 理论课：2安排实验课：1教学大纲要求：让学生掌握异常处理、事件处理。教学重点及难点：重点：异常处理、事件处理难点：作业、讨论题、思考题： 课后习题课后总结分析：教学内容备注理论课主要教学内容：4.1 异常处理4.1.1 捕获和处理异常4.1.2 抛出异常4.2 事件处理4.2.1 理解事件4.2.2 注册事件处理程序4.2.3 事件处理程序的调用4.2.4 阻止事件传播4.2.5 页而加载与卸载事件4.2.6 鼠标事件4.2.7 键盘事

10、件4.2.8 表单提交事件实脸课内容：4.3编程实践：实现标 记自由拖放授课题目：第5章JavaScript对象啰?个 理论课口讨论课口实验课口习题课口其他口 （谓打V）课时 理论课：2安排实验课：1教学大纲要求：让学生掌握使用对象、原型对象和继承、内置对象。教学重点及难点：重点：使用对象、原型对象和继承、内置对象难点：原型对象和继承作业、讨论题、思考题： 课后习题课后总结分析：教学内容备注理论课主要教学内容：5.1 使用对象5.1.1 什么是对象5.1.2 创建对象5.1.3 使用对象属性5.1.4 对象的方法5.1.5 构造函数5.1.6 with 语句5.2 原型对象和继承5.3 内置对

11、象5.3.1 Math 对象5.3.2 Date 对象5.3.3 String 对象实脸课内容：5.4编程实践：输出随 机素数授课题目：第6章浏览器对象授课方式 理论课口讨论课口实验课口习题课口其（请打J） 他口课时理论课：3安排实验课：2教学大纲要求：让学生掌握Window对象、Document对象和表单对象。教学重点及难点：重点：Window对象、Document对象和表单对象难点：作业、讨论题、思考题： 课后习题课后总结分析：教学内容备注理论课主要教学内容：6.1 Window 对象6.1.1 Window对象层次结构6.1.2 Window对象的常用属性和方法6.1.3 定时操作6.1

12、.4 错误处理6.1.5 Navigator 对象6.1.6 Screen 对象6.1.7 窗口操作6.1.8 用ID引用HTML标记6.2 Document 对象6.2.1 常用属性和方法6.2.2 动态输出文档6.2.3 了解 DOM6.2.4 获得HTML标记的引用6.2.5 遍历文档结点6.2.6 访问HTML标记属性6.2.7 访问HTML标记内容6.2.8 创建、添加和删除结点6.3 表单对象6.3.1 引用表单和表单元素6.3.2 表单事件实脸课内容：6.4编程实践：动态人员列 表授课题目：第7章AJAX曲?当 理论课口讨论课口实验课口习题课口其他口 （请打V ）课时 理论课：2

13、安排实验课：1教学大纲要求：让学生掌握使用AJAX完成HTTP请求、使用script完成HTTP请求。教学重点及难点：重点：使用AJAX完成HTTP请求、使用script完成HTTP请求 难点：使用AJAX完成HTTP请求作业、讨论题、思考题： 课后习题课后总结分析：教学内容备注理论课主要教学内容：7.1 使用AJAX完成HTTP请求7.1.1 AJAX 概述7.1.2 创建 XMLHttpRequest 对象7.1.3 XMLHttpRequest 对象常用属性7.1.4 XMLHttpRequest 对象常用方法7.1.5 处理普通文本响应结果7.1.6 处理XML响应结果7.1.7 处理

14、JSON响应结果7.2 使用script完成HTTP请求实脸课内容：7.3编程实践：用户注 册页而10授课题目：第8章jQuery简介曲?当 理论课口讨论课口实验课口习题课口其他口 （请打V ）课时 理论课：2安排实验课：1教学大纲要求：让学生了解jQuery主要功能、特点、资源，掌握如何在页面中引入jQuery教学重点及难点：重点：掌握如何在页面中引入jQuery难点：作业、讨论题、思考题： 课后习题课后总结分析：教学内容备注理论课主要教学内容：8.1 了解 jQuery8.1.1 jQuery主要功能8.1.2 jQuery主要特点8.2 jQuery 资源8.2.1 下载 jQuery8

15、.2.2 查看jQuery文档8.2.3 jQuery学习中心8.3 使用 jQuery8.3.1 引入 jQuery83.2 实例：访问HTML标记83.3 实例：动态操作样式83.4 4实例：动画效果实脸课内容：8.4编程实践：页而欢 迎对话框授课题目：第9章jQuery选择器和过滤器曲?当 理论课口讨论课口实验课口习题课口其他口 (请打V )课时 理论课：4 安排实验课：2教学大纲要求：让学生掌握jQuery。函数、基础选择器、层级选择器和过滤器。教学重点及难点：重点：jQuery。函数、基础选择器、层级选择器和过滤器难点：作业、讨论题、思考题： 课后习题课后总结分析：教学内容备注理论课

16、主要教学内容：9.1 jQuery。函数9.1.1 匹配HTML标记9.1.2 上下文1.1.3 使用 $(document).ready()1.1.4 封装现有标记1.1.5 使用链接方法调用1.1.6 jQuery命名空间9.2 基础选择器9.2.1 ID选择器9.2.2 类名选择器9.2.3 元素选择器9.2.4 复合选择器9.2.5 通配符选择器9.3 层级选择器9.3.1 祖孙选择器9.3.2 父子选择器9.3.3 相邻结点选择器9.3.4 兄弟结点选择器9.4 过滤器9.4.1 基础过滤器9.4.2 内容过滤器9.4.3 子元素过滤器9.4.4 可见性过滤器9.4.5 表单过滤器9

17、.4.6 属性过滤器实脸课内容：9.5编程实践：带提示 的课表授课题目：第10章操作页面元素啰?个 理论课口讨论课口实验课口习题课口其他口 （谓打V）课时 理论课：4安排实验课：2教学大纲要求：让学生掌握元素内容操作、插入结点、包装结点、替换结点、删除结点、 复制结点和样式操作。教学重点及难点：重点：掌握元素内容操作、插入结点、包装结点、替换结点、删除结点、复制结点和 样式操作难点：作业、讨论题、思考题： 课后习题课后总结分析：教学内容备注理论课主要教学内容：10.1 元素内容操作10.1.1 htmlO和 text()10.1.2 val()10.1.3 attr)10.2 插入结点10.2

18、.1 append。和 appendTo()10.2.2 prepend。和 prependTo()10.2.3 after。和 insert AfterO10.2.4 before。和 insertBefore()10.3 包装结点10.3.1 wrap()方法10.3.2 wrapAll。方法10.3.3 wraplnner()方法10.3.4 unwrap。方法10.4 替换结点10.4.1 replaceWith()10.4.2 replaceAHO10.5 删除结点10.5.1 emptyO10.5.2 removeO10.5.3 detach()10.6 复制结点10.7 样式操作

19、10.7.1 css()10.7.2 CSS类操作方法实验课内容：10.8编程实践:jQuery 版的动态人员列表授课题目：第11章jQuery事件处理?壬 理论课口讨论课口实验课口习题课口其他口（请打V ）课时 理论课：2安排实验课：1教学大纲要求：让学生掌握jQuery事件对象、附加和解除事件处理函数、事件快捷方法。教学重点及难点：重点：掌握jQuery事件对象、附加和解除事件处理函数、事件快捷方法 难点：作业、讨论题、思考题： 课后习题课后总结分析：教学内容备注理论课主要教学内容：11.1 jQuery事件对象11.1.1 事件对象构造函数11.1.2 事件对象属性11.13事件对象方法

20、11.2 附加和解除事件处理函数11.2.1 附加事件处理函数11.2.2 解除事件处理函数11.3 事件快捷方法11.3.1 浏览器事件快捷方法11.3.2 表单事件快捷方法11.3.3 键盘事件快捷方法11.3.4 鼠标事件快捷方法实脸课内容：11.4编程实践:jQuery 版的自由拖放授课题目：第12章jQuery特效?壬 理论课口讨论课口实验课口习题课口其他口（请打V ）课时 理论课：4 安排实验课：2教学大纲要求：让学生掌握简单特效、透明度特效、滑动特效、自定义动画、动画相关的 属性和方法。教学重点及难点：重点：简单特效、透明度特效、滑动特效、自定义动画、动画相关的属性和方法 难点：

21、作业、讨论题、思考题： 课后习题课后总结分析：教学内容备注理论课主要教学内容：12.1 简单特效12.1.1 隐藏元素12.1.2 显示元素12.1.3 隐藏/显不切换12.2 透明度特效12.2.1 淡入效果12.2.2 淡出效果12.2.3 调整透明度12.2.4 淡入淡出切换12.3 滑动特效12.3.1 滑入效果12.3.2 滑出效果12.3.3 滑入滑出切换效果12.4 自定义动画12.4.1 直接量动画12.4.2 相对量动画12.4.3 自定义显示或隐藏12.4.4 位置动画12.5 动画相关的属性和方法12.5.1 动画延时12.5.2 停止动画12.5.3 结束动画12.5.4 禁止动画效果实脸课内容：12.6编程实践：永不 停止的动画授课题13：第13