@wy 2017-09-08T19:19:59.000000Z 字数 6468 阅读 684

课程大纲

远程课

课程大纲

第一节：变量、事件、函数、style属性操作

知识点共：7个，案例：2

javascript介绍

使用javaScript能做什么
javaScript特点

javascript出现的位置

行间
内嵌
外链

从实例开始

实例的需求和实现
涉及的知识点学习

获取元素

通过id获取元素：document.getElementById

变量

什么是变量
什么是数据
声明变量
变量初始化
赋值运算符
变量命名组成和命名规则
关键字保留字
命名风格

事件

什么是事件
绑定监听器

初始函数

函数的作用
函数的定义：函数声明和函数表达式
函数的调用

属性操作

什么是属性
增加属性、删除属性、改写属性、查找属性
操作属性的方式：点（.）、中括号（[]）
操作元素的style属性改变样式
【案例】：设置改变元素样式

第二节：元素的其他属性、字符串、classList的使用、流程控制---if、数组

知识点共：7个，案例：3

元素的其他属性

id、
className
value
innerHTML

[案例]：留言板

需求分析、实现步骤
涉及知识点：+=运算符、value、innerHTML

字符串

字符串定义
字符串的注意事项
字符串拼接符：+

classList的使用

增加class --- node.classList.add()
删除class --- node.classList.remove()
切换class --- node.classist.toggle()

程序的流程控制

顺序执行
条件分支
循环语句

流程控制---if分支语句

使用if的场景
if语句的语法
两个或多个条件分支：if...else...、if...else if...else...
运算符：==、<、>
布尔值：true、false
ing的src
自增和自减
【案例】：切换两张图片
【案例】：切换多张图片

数组

数组的定义
数组的length
数组取值：下标
下标从0开始
判断边界

第三节：获取元素的方法、类数组、流程控制---for、this关键字、模拟单选/多选、选项卡思维

知识点共：5个，案例：4

获取元素的方法

通过id获取元素：document.getElementById()
通过标签获取元素：document/node.getElementsByTagName(标签名)
通过class获取元素：document/node.getElementsByClassName(class名字)
通过css选择器获取元素：document/node.querySelector/querySelectorAll(css选择器)

类数组

和数组的相似和不同之处
类数组的length
类数组取值：下标

流程控制---for循环语句

for语句使用的场景
for循环语法分析和执行过程示意
【实例】生成多个div
【实例】给每一个元素绑定点击处理

this关键字

位于全局和函数中
this的值不固定，随着执行环境（上下文）的改变而改变
点击处理中this的指向
【实例】模拟单选
【实例】模拟多选

选项卡思维

选项卡基本原理分析
应用场景
自定义属性

第四节：京东无缝滚动幻灯片、百度音乐全选

知识点共：2个，案例：2

第五节：数据类型、数据类型转换、运算符、【实例】找数据

知识点共：10个，案例：1

数据类型

简单（基本）数据类型：Number、String、Boolean、Undefined、Null
复合（引用）数据类型：Object

数据类型转换

显示类型转换、隐式类型转换
转数字类型 => Number(要转换的值)
转字符串类型 => String(要转换的值)
转布尔值类型 => Boolean(要转换的值)
parseInt、parseFloat
NaN
isNaN

运算符

算术运算符：+ 加、- 减、* 乘、/ 除、% 取模（求余数）、++、--
赋值运算符：=、+=、-=、*=、/=、%=
关系运算符： <、>、<=、>=、==、!=、===、!==
逻辑运算符：&& 与、|| 或、! 否、三目运算符
运算符优先级、结合性
【实例】找数据

第六节：深入理解函数、作用域、作用域链、闭包

知识点共：7个，案例：2

深入理解函数

函数作用
函数定义：函数声明和函数表达式
匿名函数、模块化
函数调用和注意点
函数参数：形参和实参
arguments对象
函数返回值
[实例]获取计算后元素的指定样式

作用域

标识符（变量和函数）可被访问的范围
全局作用域和局部作用域
变量对象和活动对象
作用域链的形成和作用
闭包的使用
声明提升：进入执行环境和执行代码
【实例】商品累计

第七节：开启定时器、停止定时器、延迟消失的广告、无缝轮播图片

知识点共：4个，案例：3

开启定时器

定时器的应用场景
重复执行定时器：setInterval()
延迟执行定时器：setTimeout()
定时器中this的问题
offsetLeft、offsetTop

【实例】让一个元素运动起来

【实例】延迟消失菜单

停止定时器

定时器编号
停止重复执行定时器：clearInterval()
停止延迟执行定时器：clearTimeout()

【实例】延迟消失的广告

mTween函数的使用

参数说明

【实例】无缝轮播图片

需求分析
无缝轮播图片的原理

第八节：日期对象、获取/设置时间和日期的方法、字符串方法学习、打字机案例

知识点共：14个，案例：4

日期对象

创建日期对象：new Date()
参数：不传参、传入字符串、传入时间戳

获取时间和日期的方法

设置时间和日期的方法

【例子】获取当前月份有多少天

【例子】获取一个月的1号星期几

【例子】倒计时

如何学习一个方法

这个方法操作哪一类数据
这个方法的作用是什么
传入指定类型的参数
返回值，类型
是否影响原数据

字符串方法学习

charAt()：返回字符串中指定位置的字符
indexOf()：返回指定值在调用该方法的字符串中首次出现的位置
slice()：截取指定位置之间的字符串
substring()：截取指定位置之间的字符串
substr()：截取指定起始位置和指定长度的子字符串
split()：通过一个指定的字符串把原字符串分割成一个数组
toLowerCase()：把字符串全部转成小写
toUpperCase()：把字符串全部转成大写
trim()：去掉字符串首尾的全部空格
repeat():重复指定个数

【实例】打字机

第九节：数组方法学习、筛选人物信息、数组去重、Math方法

知识点共：20个，案例：1

数组方法学习

push()：添加一个或多个元素到数组的末尾
unshift()：添加一个或多个元素到数组的头部
pop()：删除数组最后一个元素
shift()：删除数组第一个元素
concat()：将传入的数组或非数组值与原数组合并,返回合并后的新数组
reverse()：颠倒数组中元素的位置
join()：将数组中的所有元素连接成一个字符串
slice()：截取数组中一部分，并返回这个新的数组
splice()：用新元素替换旧元素，以此修改数组的内容
forEach()：循环数组的每一项
map()：每个元素都调用一个提供的函数后返回的结果，放在新数组中
filter():根据回调函数的返回值过滤数组中的项，放在新数组中

【案例】筛选人物信息

数组去重

对比方式
对象key值唯一性

Math方法

Math.ceil() 对数进行向上取整
Math.floor() 对数进行向下取整
Math.round() 对数进行四舍五入
Math.abs() 取数的绝对值
Math.random() 返回0-1之间的随机数，不包含1

第十节：冒泡排序、快速排序、sort方法、递归原理分析、无限级菜单

知识点共：4个，案例：3

冒泡排序和快速排序原理分析

sort方法排序时候的注意点

递归原理分析

【实例：递归的运营---无限级菜单】

第十一节：Es6基础语法、let、const、解构赋值、数组扩展、对象扩展、函数的扩展

知识点共：15个，案例：1

声明变量的方式

let和var的异同点

定义常量const

数组的解构赋值

数组扩展：Array.from()、Array.isArray()

对象扩展：Object.is()、Object.assign()

函数的扩展：rest参数、参数默认值、箭头函数=>

第十二节：DOM介绍、DOM节点类型和关系、DOM属性操作、无限级菜单展开收缩操作

知识点共：15个，案例：1

DOM节点类型和关系

DOM属性操作:getAttribute、setAttribute、removeAttribute

DOM元素操作：createElement、appendChild、insertBefore、removeChild、replaceChild、cloneNode

【实例---无限级菜单展开收缩操作】

第十三节：元素尺寸、登录框实例、定位父级、getBoundingClientRect

知识点共：10个，案例：2

元素尺寸：可视区域宽高、元素宽高

滚动触发事件、浏览器大小改变触发事件

定位父级：offsetParent

getBoundingClientRect:返回元素的大小及其相对于视口的位置

【实例：居中显示的登录框】

【实例：tip特别提醒框】

第十四节：BOM介绍、用户代理信息、BOM常用方法、地址栏信息、BOM常用事件、招聘信息的实例

知识点共：7个，案例：2

回顾js的组成：ECMAscript、DOM --- 文档对象模型、BOM --- 浏览器对象模型

BOM介绍

BOM常用方法：open、close

用户代理信息：window.navigator.userAgent

URL完整的组成

【实例：判断是否是移动端】

【实例：招聘信息】

第十五节：事件、绑定事件处理程序、事件对象、事件流、冒泡的利弊、阻止浏览器默认行为

知识点共：12个，案例：2

事件的产生

绑定事件处理程序：HTML事件处理程序、DOM1级事件处理程序、DOM2级事件处理程序

事件对象的获取

事件流：事件流描述的是从页面中接收事件的顺序。

事件的三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段

冒泡的利弊、阻止浏览器默认行为

【实例：事件委托的利用】

【实例：拖拽元素的实现】

第十六节：鼠标事件、鼠标事件实例---放大镜、鼠标滚轮事件、call和apply、焦点事件

知识点共：8个，案例：1