《JavaScript+jQuery交互式Web前端开发（第2版）》教学大纲

《JavaScript+jQuery交互式Web前端开发（第2版）》课程教学大纲（课程英文名称）课程编号：学分：x学分课时：66课时（其中：44讲课课时22上机课时）先修课程：计算机基础、HTML+CSS网页制作适用专业：信息技术及其计算机相关专业一、课程的性质与目标JavaScript+jQuery交互式Web前端开发是一门面向计算机相关专业的课程，适用于广大前端开发的初学者。本课程主要包括JavaScript基础、数组、函数、对象、DOM、BOM、jQuery、JavaScript面向对象和正则表达式等。通过丰富实用的案例，使学生对JavaScript语言有一个全方位的应用，能够使用JavaScript和jQuery制作网页特效，增强网页的交互性。二、课程设计思路和教学要求课程设计理念：通过本课程的学习，使学生掌握JavaScript和jQuery的理论知识，并具备动手实践的能力。本课程采用知识点与案例相结合的方式对学生进行基础知识的讲解，按照学习的难易程度及先后顺序安排具体内容，可以有效地将学生学过的内容串联起来，从而培养学生分析问题和解决问题的能力。课程设计思路：本课程针对具有网页制作基础（HTML+CSS）的人群，采用“知识讲解+案例实践”的方式来安排课程内容，布局合理，结构清晰，将抽象的概念具体化，将知识实践化，使学生掌握如何运用JavaScript和jQuery进行交互式Web前端开发，并为今后学习Vue.js等前端开发框架奠定基础。操作系统：Windows7或更高版本开发工具：Chrome浏览器、VisualStudioCode编辑器三、课程的主要内容及基本要求第1章初识JavaScript学习单元初识JavaScript课时4课时学习目标了解JavaScript基本概念，能够描述JavaScript的作用、由来、组成和特点了解浏览器的组成，能够描述浏览器的特点以及作用掌握下载和安装VisualStudioCode编辑器的方法，能够独立下载和安装编辑器掌握JavaScript代码的引入方式，能够灵活运用行内式、内部式、外部式的方式引入JavaScript代码掌握JavaScript常用的输入输出语句，能够灵活运用prompt()、alert()、document.write()、document.log()语句掌握JavaScript注释的使用，能够合理运用单行注释、多行注释增强代码的可读性了解什么是变量，能够描述变量的概念掌握变量的命名规则，能够根据变量的命名规则为变量命名掌握变量的声明与赋值，能够声明变量并为其赋值学习内容知识点掌握程度重点难点JavaScript概述了解JavaScript的由来了解JavaScript的组成了解JavaScript的特点了解浏览器了解代码编辑器掌握JavaScript初体验掌握JavaScript代码引入方式掌握√JavaScript常用的输入输出语句掌握√JavaScript注释掌握√什么是变量了解变量的命名规则掌握√变量的声明与赋值掌握√【案例】使用变量保存商品信息掌握【案例】使用变量保存用户输入的值掌握【案例】交换两个变量的值掌握√第2章JavaScript基础学习单元JavaScript基础课时6课时学习目标了解数据类型的分类，能够描述JavaScript中的基本数据类型和复杂数据类型掌握常用的基本数据类型，能够根据实际需求定义基本数据类型的变量掌握数据类型转换，能够根据实际需求将数据转换为布尔型、数字型或字符串型掌握运算符的使用，能够灵活运用运算符完成运算掌握选择结构语句，能够根据实际需求选择合适的选择结构语句掌握循环结构语句，能够根据实际需求选择合适的循环结构语句掌握跳转语句，能够灵活运用continue语句或break语句完成程序中的流程跳转学习内容知识点掌握程度重点难点数据类型分类了解常用的基本数据类型掌握将数据转换为布尔型数据掌握将数据转换为数字型数据掌握将数据转换为字符串型数据掌握算术运算符掌握√字符串运算符掌握√赋值运算符掌握√比较运算符掌握√逻辑运算符掌握√三元运算符掌握√位运算符掌握√数据类型检测运算符掌握√运算符优先级掌握√【案例】计算圆的周长和面积掌握选择结构掌握√√【案例】查询蔬菜的价格掌握循环结构掌握√√【案例】for语句的使用掌握√循环嵌套掌握√跳转语句掌握√第3章数组学习单元数组课时6课时学习目标了解数组的概念，能够描述数组的组成掌握数组的创建，能够灵活运用数组字面量的方式创建数组掌握获取和修改数组长度的方法，能够实现数组长度的获取和修改掌握访问数组的方法，能够访问数组元素掌握遍历数组的方法，能够使用for语句实现数组的遍历掌握添加、修改、删除和筛选数组元素的方法，能够实现添加、修改、删除和筛选数组元素掌握反转数组元素顺序的方法，能够实现数组元素顺序的反转掌握数组的排序，能够实现数组的冒泡排序和插入排序掌握创建与访问二维数组的方法，能够实现二维数组的创建与访问掌握遍历二维数组的方法，能够实现二维数组的遍历学习内容知识点掌握程度重点难点初识数组了解创建数组掌握√获取和修改数组长度掌握√访问数组掌握√遍历数组掌握√添加和修改数组元素掌握√删除数组元素掌握√筛选数组元素掌握√反转数组元素顺序掌握√【案例】查找班级最高分和最低分掌握√冒泡排序掌握√√插入排序掌握√√创建与访问二维数组掌握√遍历二维数组掌握√【案例】使用二维数组实现矩阵转置掌握√第4章函数学习单元函数课时6课时学习目标了解函数的概念，能够阐述函数的作用掌握函数的定义与调用，能够根据实际需求在程序中定义并调用函数掌握函数参数的设置，能够根据实际需求在程序中设置相关参数掌握函数的返回值，能够通过函数的返回值将函数的处理结果返回掌握函数表达式，能够实现函数表达式的定义与调用掌握匿名函数，能够实现匿名函数的定义与调用掌握回调函数，能够实现回调函数的定义与调用掌握递归函数，能够实现递归函数的定义与调用熟悉作用域，能够区别全局变量、局部变量和块级变量，并且能够归纳什么是作用域链掌握闭包函数，能够实现闭包函数的定义与调用熟悉预解析，能够说明JavaScript代码如何进行预解析学习内容知识点掌握程度重点难点什么是函数了解函数的定义与调用掌握√函数的参数掌握√函数的返回值掌握√【案例】函数的综合应用掌握√函数表达式掌握√匿名函数掌握√√回调函数掌握√√递归函数掌握√√作用域的分类熟悉作用域链熟悉闭包函数掌握预解析熟悉什么是函数了解第5章对象学习单元对象课时6课时学习目标了解什么是对象，能够阐述JavaScript中对象的概念掌握对象的创建方式，能够灵活应用3种方式创建对象掌握对象的遍历，能够遍历对象的属性和方法掌握Math对象的使用，能够使用Math对象的常用方法和属性实现有关数学的运算掌握日期对象的使用，能够使用日期对象的常用方法处理日期和时间掌握数组对象的使用，能够使用数组对象的常用方法对数组进行操作掌握字符串对象的使用，能够使用字符串对象的常用方法处理字符串掌握MDNWeb文档的查阅方式，能够在MDNWeb文档中查询对象学习内容知识点掌握程度重点难点初识对象了解利用字面量创建对象掌握√利用构造函数创建对象掌握√利用Object()创建对象掌握√对象的遍历掌握√Math对象的使用掌握√生成指定范围的随机数掌握√【案例】猜数字游戏掌握√日期对象的使用掌握√【案例】统计代码运行时间掌握√【案例】倒计时掌握√创建数组对象掌握√添加或删除数组元素掌握√【案例】筛选数组元素掌握数组元素排序掌握√数组元素索引掌握√【案例】去除数组中的重复元素掌握数组转换为字符串掌握√创建字符串对象掌握√根据字符返回索引掌握√根据索引返回字符掌握√【案例】统计字符串中出现最多的字符和相应的次数掌握√字符串操作方法掌握√√【案例】判断用户名是否合法掌握√查阅MDNWeb文档掌握第6章DOM（上）学习单元DOM（上）课时6课时学习目标了解WebAPI的概念，能够阐述WebAPI的作用了解什么是DOM，能够描述DOM中文档、元素和节点的关系掌握获取元素的方法，能够根据不同场景选择合适的方法获取元素了解事件的概念，能够描述事件的3个要素掌握事件的注册，能够为页面中的元素注册事件掌握操作元素内容的方法，能够根据不同场景选择合适的方法操作元素内容掌握操作元素属性的方法，能够根据不同场景选择合适的方法操作元素属性掌握操作元素样式的方法，能够根据不同场景选择合适的方法操作元素样式学习内容知识点掌握程度重点难点WebAPI简介了解DOM简介了解根据id属性获取元素掌握√根据标签名获取元素掌握√根据name属性获取元素掌握√根据类名获取元素掌握√根据CSS选择器获取元素掌握√获取基本结构元素掌握√事件概述了解事件注册掌握√√操作元素内容掌握√√操作元素属性掌握√√操作元素样式掌握√√【案例】操作元素的综合运用掌握√第7章DOM（下）学习单元DOM（下）课时6课时学习目标掌握节点操作，能够完成节点的获取、创建、添加、移除和复制操作掌握事件的进阶操作，能够完成事件的监听、移除熟悉DOM事件流，能够说明事件捕获和事件冒泡的区别掌握事件对象，能够使用事件对象进行事件操作掌握鼠标事件，能够使用鼠标事件对象进行鼠标操作掌握键盘事件，能够使用键盘事件对象进行键盘操作掌握元素偏移量操作，能够使用offset系列属性进行元素偏移量操作掌握元素可视区域操作，能够使用client系列属性进行元素可视区域操作掌握元素滚动操作，能够使用scroll系列属性进行元素滚动操作学习内容知识点掌握程度重点难点获取节点掌握√创建并添加节点掌握√移除节点掌握√【案例】简易留言板掌握√复制节点掌握√事件监听掌握√事件移除掌握√DOM事件流熟悉获取事件对象掌握√事件对象的常用属性和方法掌握√√常用的鼠标事件掌握√鼠标事件对象掌握√【案例】图片跟随鼠标指针移动掌握√【案例】下拉菜单掌握√常用的键盘事件掌握√键盘事件对象掌握√【案例】文本框提示信息掌握√元素位置操作-元素偏移量操作掌握√元素位置操作-【案例】模态框拖曳效果掌握√元素位置操作-元素可视区域操作掌握元素位置操作-元素滚动操作掌握第8章BOM学习单元BOM课时3课时学习目标了解BOM的概念，能够阐述BOM的概念掌握BOM对象的使用，能够灵活应用BOM对象实现浏览器操作掌握窗口事件的使用，能够在窗口加载、窗口卸载或窗口大小改变时运行特定的代码掌握定时器方法的使用，能够应用定时器延迟一段时间运行代码或间歇运行代码熟悉同步和异步的概念，能够区分同步和异步学习内容知识点掌握程度重点难点BOM简介了解window对象掌握√location对象掌握√navigator对象掌握√history对象掌握√screen对象掌握√窗口加载与卸载事件掌握√√窗口大小改变事件掌握√√设置定时器的方法掌握√√【案例】3秒后自动关闭广告掌握√【案例】60秒内只能发送一次验证码掌握√同步和异步熟悉第9章jQuery（上）学习单元jQuery（上）课时6课时学习目标了解什么是jQuery，能够描述jQuery的特点掌握jQuery的下载和引入，能够独立完成jQuery的下载并且能够使用两种方式引入jQuery掌握jQuery的简单使用，能够使用jQuery实现简单的页面效果熟悉jQuery对象，能够区别jQuery对象和DOM对象掌握jQuery选择器的使用，能够根据不同场景使用不同的jQuery选择器获取元素掌握jQuery内容操作，能够灵活应用jQuery中操作元素内容的方法掌握jQuery样式操作，能够根据不同场景使用jQuery实现元素的样式操作掌握jQuery属性操作，能够灵活应用prop()方法、attr()方法和data()方法操作元素的属性学习内容知识点掌握程度重点难点什么是jQuery了解下载和引入jQuery掌握jQuery的简单使用掌握jQuery对象熟悉基本选择器掌握√层次选择器掌握√√筛选选择器掌握√√其他选择器掌握√√jQuery内容操作掌握√css()方法操作元素的样式掌握√操作元素样式类掌握√prop()方法掌握√attr()方法掌握√data()方法掌握√第10章jQuery（下）学习单元jQuery（下）课时10课时学习目标掌握jQuery元素操作，能够实现元素的遍历、查找、过滤、追加、复制、替换和删除操作掌握jQuery尺寸和位置操作，能够灵活应用尺寸和位置操作方法获取或设置元素的尺寸、位置掌握jQuery事件操作，能够根据实际场景完成事件注册、触发、委托等操作掌握jQuery动画，能够根据不同场景使用jQuery实现元素的显示、隐藏、滑动、停止、淡入淡出和自定义动画的效果了解jQuery其他方法，能够描述$.extend()方法和$.ajax()方法的作用学习内容知识点掌握程度重点难点元素遍历操作掌握√元素查找和过滤操作掌握√【案例】精品展示掌握√元素追加操作掌握√元素复制操作掌握元素替换和删除操作掌握尺寸操作方法掌握√位置操作方法掌握√页面加载事件掌握事件注册掌握√事件触发掌握事件委托掌握√事件解除掌握√事件对象掌握【案例】Tab栏切换掌握√显示和隐藏效果掌握√滑动效果掌握√停止效果掌握√淡入淡出效果掌握√自定义动画掌握√√【案例】手风琴效果掌握√$.extend()方法了解$.ajax()方法了解【案例】使用jQuery实现购物车功能掌握√第11章JavaScript面向对象学习单元JavaScript面向对象课时4课时学习目标了解面向过程与面向对象，能够阐述面向过程与面向对象的区别熟悉面向对象的特征，能够归纳面向对象的三大特征了解类与对象的概念，能够阐述类与对象的区别掌握类的定义和继承，能够定义类及类中的属性和方法、实现子类继承父类掌握调用父类的方法，能够使用super关键字调用父类的构造方法或普通方法掌握原型对象的使用，能够实现原型对象的访问与使用了解成员查找机制，能够描述成员查找的顺序熟悉原型链的相关知识，能够绘制原型链掌握this指向的更改，能够灵活应用apply()方法、call()方法和bind()方法更改this指向掌握错误处理的方式，能够通过try…catch语句处理错误了解错误类型，能够列举常见的错误类型掌握错误对象的抛出，能够在程序出错时抛出错误对象了解错误对象的传递，能够列举错误对象的传递方式学习内容知识点掌握程度重点难点面向过程与面向对象的区别了解面向对象的特征熟悉类与对象了解类的定义和继承掌握√调用父类的方法掌握√√原型对象掌握成员查找机制了解原型链熟悉【案例】利用原型对象扩展数组方法掌握√更改this指向掌握√√错误处理的方式掌握√√错误类型了解错误对象的抛出掌握√错误对象的传递了解第12章正则表达式学习单元正则表达式课时3课时学习目标了解正则表达式，能够描述正则表达式的概念和作用掌握正则表达式的使用，能够使用正则表达式匹配字符串掌握正则表达式中元字符的使用，能够根据实际需求选择合适的元字符掌握正则表达式常用方法，能够实现字符串的匹配、分割和替换学习内容知识点掌握程度重点难点认识正则表达式了解使用正则表达式掌握√正则表达