数码管时钟显示制作 冉钧芸_图文_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
数码管时钟显示制作 冉钧芸
上传于||暂无简介
阅读已结束，如果下载本文需要使用2下载券
想免费下载本文？
下载文档到电脑，查找使用更方便
还剩34页未读，继续阅读
你可能喜欢妙味课堂 - JavaScript 实战开发课程大纲 -
+ 全部展开
- 全部收缩
↑返回顶部
妙味课堂 JS 实战开发课程大纲
第一章（上）：JS入门基础
网页特效原理分析
腾讯、微博广场……
运用 JavaScript 完成浏览器端各种交互应用
编写JS的流程
布局：HTML+CSS
原理：手动修改代码，使效果实现
编程思路的形成
排除HTML+CSS兼容性问题
JS入门三部曲：找到谁、加什么事件、发生什么事
第一个JS特效实例
获取元素、添加事件
getElementById
事件：鼠标、键盘、窗口、表单、自定义……
检测代码：alert()方法
函数：定义、调用
声明变量、变量定义方式
window是什么、onload事件
匿名函数、用法、区别
JS中的属性操作
属性操作语法
属性读操作：获取
实例：获取input值
实例：获取select值
字符串连接
属性写操作：修改、添加
实例：修改value值
实例：添加图片的src地址
实例：模拟短信发送
属性操作的注意事项
JS中不允许出现的特殊字符
实例：网页字体大小控制
给元素添加class
实例：替换皮肤
行间样式与className
关键字、保留字
相对路径的读取问题
表单元素的type值修改
IE6、IE7、IE8 兼容性问题及解决思路
float的兼容性问题
IE（styleFloat）、非IE（cssFloat）
属性操作中的：[]
实例：任意修改DIV的值
if 判断基本形式
if(){}else{}
if(){}else if(){}
if(){}else if(){}else{}
实例：限制提交、输入错误提示
实例：隐藏、显示菜单
实例：通关口令
为A链接添加事件
&a href=&javascript:;&&&/a&
图片切换综合实例
长度length和[]
图片切换综合实例
存放图片地址、图片说明
动态生成图片总数、图片说明
添加切换功能
第一章（下）：JS入门基础
元素获取的第二种方法
getElementsByTagName
获取一组元素、必须加[]
与getElementById方法的区别
for循环执行顺序
数字由小到大、从大到小
由一组数字推算出任意递增数字
实例：转化绝对定位坐标值
选取多个元素
生成多个元素：先生成、后获取
for套for筛选多组指定元素
关键字：this
this是什么
当前方法、函数的调用对象
通过事件调用函数的对象
函数套函数中的this指向
嵌套函数中的this
this的变量引用
this选取当前元素
this选取当前元素内的子元素
自定义属性
什么是自定义属性
运用for循环为一组元素添加开关
实例：点击当前列表，切换各自的class
添加索引值
index 索引值
索引值运用：图片切换实例
思路一：全部清除；
思路二：消除上一个；
图片切换实例扩展
for循环嵌套
for 循环嵌套中 i 与 j 的使用
for 循环嵌套选取元素
for 循环嵌套实例
第二章（上）：JavaScript数据类型、函数传参
JS语言核心：ECMAScript
定义JS的语法、基本对象、数据类型……
JS的数据类型
typeof运算符
字符串、数字、布尔、函数、对象、未定义、数组、null…
数据类型使用原则：一个变量只存放一种类型数据
数据类型转换
强制类型转换：
Number、parseInt、parseFloat
实例：两个输入框相加
实例：判断输入值是否为小数
隐式类型转换：
== ! ++ --
数据类型转换不成功：
数字类型：NaN详解
非数字的数字类型
检测数字的方法：isNaN()
讨厌数字：
isNaN内部实现机制
实例：判断输入值是否为数字
函数括号()的作用
传递各种数据类型
传递函数的调用
传递多个数据类型
函数传参实例
多组图片切换实例
商城价格加减计算
按钮控制元素左右移动
第二章（下）：作用域、JavaScript运算符、流程控制
作用域概念
JS解析器执行方式
标签解析、函数解析
JS预解析机制
函数内部执行环境、参数
获取函数内数据：全部变量、传参
作用域应用场景
this、for函数中 i 的取值
算术：+ 加、- 减、* 乘、/ 除、% 取模（求余数）
实例：腾讯首页隔行变色
实例：隔行变色扩展
实例：京东商城秒转时间
赋值：=、+=、-=、*=、/=、%=
关系：、=、==、!=、===、!==
逻辑：&& 与、|| 或、! 否
实例：全选、不选与反选
运算符优先级：括号
程序流程控制
判断：if、switch（case break default）、?:
循环：while、for
跳出：break、continue
什么是真、什么是假
真：非零的数字、字符串、true、函数、object：[] {} 元素（存在）
假：零、NaN、空字符串、false、null、未定义
第三章节（上）：函数详解、定时器基础
回顾函数传参
函数返回值：return
JS的数据类型有哪些？函数可以是任何数据类型
实例：通过ID名、配合函数传参特性获取元素
可变参（不定参）：arguments
参数的个数： arguments.length
arguments 和 形参 的关系
实例：求和函数
封装getStyle函数
获取元素样式：
实例：通过ID名、配合函数传参特性获取元素
obj.currentStyle[attr]
getComputedStyle(obj,2)[attr]
使用注意事项：
不能有空格
获取到的是计算后的样式
只能获取非复合样式
所获取的样式要设初使值
获得的值是字符串
定时器基础
什么是定时器
每隔一段时间，执行一次函数
setInterval、clearInterval
setTimeout、clearTimeout
两种定时器的区别
实例：自动播放的焦点图
实例：查看QQ资料
第三章节（下）：定时器应用、倒计时
定时器深入应用：
案例研究：让元素移动
定时器管理原则：每次只开一个定时器
配合getStyle获取速度
速度限制与赋值
定时器关闭
封装运动函数
方向判断设置
区分判断条件
函数传参应用：回调函数
实例："抖屏"实现原
获取关键数组
定时器控制抖屏
定时器清除
封装"抖动"函数
设置函数接口
设置回调函数
时间对象实例研究
获取时间对象：new Date()
getFullYear()
getMonth()
getHours()
getMinutes()
getSeconds()
实例：网站电子时钟
Date对象参数
数字形式：new Date(,9,48,12);
字符串形式：new Date('June 10,:12');
January、February、March、April、May、June、July、August、September、October、
November、D
时间转换公式
天：Math.floor(t/86400)
时：Math.floor(t%)
分：Math.floor(t%/60)
时间戳：getTime()
返回从日0点0分0秒0毫秒
第四章节（上）：字符串方法、Json、数组方法
charAt ——获取指定位置的字符
charCodeAt——获取指定位置字符的编码
数字、大小写字母、空格、制表符
fromCharCode——把编码转换成字符（静态方法）
Unicode 字符大全
indexOf，lastIndexOf
查找子字符串出现的位置和次数
比较类：>, <, ==
toUpperCase, toLowerCase
Json与数组
什么是Json
json定义与访问
Json和数组
各自优缺点
Json的循环：for、for…in
Json与数组的区别
下标不同、json没有length
var arr=[12, 5, 8, 9];
var arr=new Array(12, 5, 8, 9);
两种定义的差异
数组的属性
length：可读、可写
实例：快速清空数组
数组使用原则：数组中应该只存一种类型的数据
数组的方法
push(元素)，从尾部添加
unshift(元素)，从头部添加
pop()，从尾部弹出
shift()，从头部弹出
返回值的区别
splice(开始, 长度,元素…)
先删除，后插入
splice(开始,长度)
splice(开始, 0, 元素…)
实例：数组去重
第四章节（下）：数组排序、Math对象、字符串与数组方法深入应用
sort([比较函数])，排序一个数组
排序一个字符串数组
排序一个数字数组
sort排序默认规则：
字符串排序规则
正数交换位置、负数不交换。零表示两数相等
随机函数：random()
实例：打乱数组顺序
实例：求一组随机数字
常见方法：ceil()、floor()、round()
常用的取整公式
Math.round(Math.random()*(y-x) + x)
Math.round(Math.random()*x)
Math.ceil(Math.random()*x)||1
Math.floor(Math.random()*x)
concat、reverse
concat() 连接多个数组，并生成新数组
arr1.concat(val1, val2, ...);
concat(arr1, arr2, ...)
reverse() 反转数组
实例：反转数组、字符串
第五章节（上）：DOM
JS 组成：ECMAScript \ DOM \ BOM
用 iframe 查看document位置
childNodes
1、在标准及ie9以上 ： 会获取空文本节点。
2、在ie6/7/8 : 没有空文本节点。
查看节点类型：nodeType、nodeName、nodeValue
1 - 元素节点
2 - 属性节点
3 - 文本节点
8 - 注释节点
9 - document
children 属性
children 与 childNodes 的区别
标准属性、非标准属性
实例：childNodes 的类型判断
注意：xhtml 文档的严谨：符合标签嵌套规则
DOM节点-子节点
firstChild : 第一个子节点
在标准和ie9下会获取到空白文本节点。
firstElementChild : 标准下获取第一个子元素节点，ie6/7/8不支持。
lastChild :
最后一个子节点
在标准和ie9下会获取到空白文本节点。
lastElementChild :
标准下获取最后一个子元素节点，ie6/7/8不支持。
nextSibling：下一个兄弟节点
在标准和ie9下会获取到空白文本节点。
nextElementSibling：标准下获取下一个兄弟节点，ie6/7/8不支持。
previousSibling：上一个兄弟节点
在标准和ie9下会获取到空白文本节点。
previousElementSibling：标准下获取上一个兄弟节点，ie6/7/8不支持。
实例：兼容性处理
原则：标准在左，非标准在右
实例：封装四个方法 first()、last()、next()、prev();
parentNode
获取父节点，点击链接隐藏整个li
offsetParent
1.当前节点上面没有节点有定位属性：
在ie8及标准以上浏览器 ： body
在ie6/7 ： html
2.当前节点上面有节点有定位属性： 最近的一个有定位属性的节点。
注意： 在ie6/7下，如果当前节点没有定位属性，那么它的offsetParent其实就是它的parentNode.
offsetLeft : 当前节点的左外边框到offsetParent的左内边框之间的距离。
offsetTop : 当前节点的上外边框到offsetParent的上内边框之间的距离。
实例：封装元素在document中的绝对位置：posLeft()、posTop()
offsetWidth\offsetHeight\clientWidth\clientHeight :
指的是元素在页面所占的空间大小, 如果元素没有占页面空间，那么这四属性的值都为0
(比如给元素设置了 display: 属性)
操作元素属性的第三种方式：
前两种方式：
第三种方式：
获取属性：getAttribute('')
1.可以获取行间的自定义属性。
2.可以获取到src,href,url等的相对地址。(需要带上第二个参数 ： 2)
设置属性： setAttribute('','')
删除属性： removeAttribute('')
1.当碰到关键字、保留字的时候，ie6/7需要避开，而ie8以上不需要考虑。
2.操作第二层以上属性的时候，标准浏览器不支持。
创建和插入元素
createElement : 创建一个dom节点。
appendChild ： 往一个节点里面追加一个新的子节点。
实例：留言板插入内容
insertBefore ： 往一个子节点里面的某个子节点前面插入一个新的子节点。
insertBefore(准备要插入的节点，插入到哪个节点的前面)
实例：倒序留言板插入内容
removeChild : 从一个节点里面删除掉某个指定的子节点。
实例：删除留言
replaceChild ： 用一个节点替换掉另一个节点里面的指定子节点。
实例：只显示一条留言
appendChild / insertBefore / replaceChild :
1.既可以操作创建的元素，也可以操作页面已有的元素。
2.操作已有元素时，是直接把元素从一个位置移动到另一个位置，而不是复制。
第五章节（下）：DOM
用className选择元素
getElementsByClassName - 不兼容低版本浏览器。
自定义方法：
如何用className选择元素
选出所有元素
通过className条件筛选
封装成函数
getByClass()
addClass() 添加class
removeClass() 移除class
tBodies、tHead、tFoot、rows、cells
表格的创建
实例：数据添加
实例：表格版隔行变色
实例：删除一行
checkbox 全选、反选
打开、关闭窗口
window.open : 打开一个新窗口。
参数： 四个
1、指定要打开的页面地址。
2、打开方式 ： _blank \ _self ...
（target）
3、浏览器的窗口特征 （宽，高，窗口位置等）
4、是否覆盖历史记录。
实例： 新窗口运行代码
window.close : 关闭当前窗口
不同的浏览器有不同的处理方式，存在兼容问题。
在ff/O下面 : 只允许关闭由window.open方法所打开的窗口。
window.navigator.userAgent ： 用户代理信息
操作系统 、 浏览器内核 、浏览器版本等
实例 ： 判断ie6函数
window.location ： 地址栏信息。
search : 地址栏查询信息
（问号到#号之间的所有内容）
hash : 锚信（#号后面的所有内容）
可视区尺寸
document.documentElement.clientWidth
document.documentElement.clientHeight
viewW() / viewH()
滚动高度： document.body.scrollTop / document.documentElement.scrollTop
滚动宽度： document.body.scrollLeft / document.documentElement.scrollLeft
scrollY() / scrollX()
内容高度 : 被内容所撑出来的高度
document.body.scrollHeight
chrome: 内容高度没有可视区高，scrollHeight就是可视区的高度。
其它浏览器 : 内容的实际高度。
文档高度 ：容器设置的高度
document.body.offsetHeight
如果没有设置初始值，就是与scrollHeight相等
window对象常用事件
onscroll : 滚动条滚动所触发的事件。
onresize : 窗口尺寸发生改变所触发的事件。
实例： 优酷弹窗的实例
第六章节：事件基础
获取焦点事件onfocus \
失去焦点事件 onblur
实例：输入框提示文字
select()、focus()、blur()应用
This关键字
This指向 ：谁调用的this就指向谁
获取事件详细信息（事件信息清单）
Event对象的兼容：ev = ev || window.event
Event对象下的获取鼠标位置：clientX clientY
实例：方块跟着鼠标移动（消除滚动条影响）
取消冒泡：ev.cancelBubble=true
实例：仿select控件
实例："分享到"实例
事件函数绑定的第2种机制
addEventListener \ attachEvent
call()：改变函数内 this 指向
实例：封装bind()方法
实例：捕获特性演示
事件注销：
DOM1事件注销
DOM2事件注销
键盘事件详解
基于键盘事件：onkeydown、onkeyup、onkeypress
keyCode 键值
获取用户按下键盘的哪个按键
实例：键盘控制Div移动
ctrlKey、shiftKey、altKey
实例：提交留言（回车、ctrl+回车）
注：ios 下的 control 键
事件默认行为
什么是事件默认行为
阻止事件默认行为
DOM1事件默认行为的阻止：
实例：屏蔽右键菜单（oncontextmenu）
实例：弹出自定义右键菜单
第七章节：事件应用及cookie
鼠标和Div的相对距离不变
把拖拽加到document上
注：FF下, 空Div拖拽bug（18.0版本前）
实例：简易拖拽
修复简易拖拽bug
Ie下设置全局捕获: setCapture(选中文字)
标准下阻止默认事件（拖拽图片）
封装拖拽函数：drag(obj)
实例：限制拖拽范围
实例：磁性吸附
碰撞检测原理：
半径检测（Math.abs）
九宫格（检测重叠、排除法）
实例：拖拽中的碰撞检测
实例：拖拽改变层大小
自定义滚动条
滚动条实现原理：
限制范围——范围的大小
计算比例——当前值/最大值
控制其他对象变化（比例值应用）
实例1：控制物体的大小
实例2：控制物体的透明度
实例3：控制文字滚动
鼠标滚轮事件
Ie/chrome：onmousewheel
firefox：DOMMouseScroll
滚轮属性：wheelDelta \ detail
DOM2事件默认行为的阻止：
attachEvent：
addEventListener：event下的preventDefault();
实例：滚轮控制图片缩放
实例：鼠标滚轮与自定义滚动条结合
滚轮事件封装：addMouseWhell(obj, upFn, downFn);
cookie的作用：保存数据到客户端浏览器
cookie的存储范围
cookie的存储格式：document.cookie = '名字＝值';
cookie使用限制：
cookie过期时间限制：toUTCString();
cookie读取：'username= age=3'
cookie相关函数封装：
setCookie();
getCookie();
delCookie();
实例：用cookie记录上一次拖拽的位置
实例：Cookie登录后删除信息
第八章节：jQuery
什么是JQ？
一个优秀的JS库，大型开发必备
JQ的好处？
简化JS的复杂操作
不再需要关心兼容性
提供大量实用方法
如何学习JQ？
JQ只是辅助工具，要正确面对
需要分阶段学习
JQ设计思想
选择网页元素
模拟CSS选择元素
独有表达式选择
多种筛选方法
方法函数化
取值赋值合体
JQ与JS关系
可以共存，不能混用
JQ演示实例
$()下的常用方法：获取元素相关操作
has()&&not()&&filter()&&next() prev()&&find()&&eq()&&index()&&attr()
实例：JQ版选项卡
$()下的常用方法：DOM操作
addClass()&&removeClass()&&width()&&innerWidth()&&outerWidth()&&insertBefore()&&before()&&
insertAfter()&&after()&&appendTo()&&append()&&prependTo()&&prepend()&&remove()&&on()&&off()&& scrollTop()
实例：JQ版弹窗
$()下的常用方法：事件
ev&&pageX&&which&&preventDefault&&stopPropagation
one()&&offset()&&offsetParent()&&val()&&size()&&each()
实例：JQ版拖拽
$()下的常用方法：运动
toggle()&&hover()&&show()&&hide()&&fadeIn()&&fadeOut()&&fadeTo()&&slideDown()&&slideUp()&&slice()
第九章节：AJAX基础、瀑布流项目开发、留言本实战开发
什么是Ajax
Asynchronous JavaScript and XML（异步JavaScript和XML)
节省用户操作，时间，提高用户体验，减少数据请求
传输获取数据
实例：使用ajax获取某一文本文件的内容
Ajax过程详解
创建对象XMLHttpRequest()
ActiveXObject('Microsoft.XMLHTTP')
三个参数的含义
1、提交方式 Form-method
2、提交地址 Form-action
3、异步（同步）
发送数据请求，相当于Form的submit
请求状态监控
onreadystatechange事件
readyState属性：请求状态
0（未初始化）还没有调用open()方法
1（载入）已调用send()方法，正在发送请求
2（载入完成）send()方法完成，已收到全部响应内容
3（解析）正在解析响应内容
4（完成）响应内容解析完成，可以在客户端调用了
status属性：服务器(请求资源)的状态
返回的内容：
responseText：返回以文本形式存放的内容
responseXML：返回XML形式的内容
发送请求(get和post的区别)
send(要发送的数据)：发送请求
POST：setRequestHeader(类型, 内容)：设置请求头
"Content-Type","application/x-www-form-urlencoded"
数据类型(返回数据的处理)
服务器返回的数据
XML或文本（html\类数组\类JSON）
数据解析处理
Eval解析JSON的时候需要注意的地方（不推荐）
JSON.parse() : 字符串解析成对象
AJAX的封装：ajax(json)
JSON格式的参数
瀑布流项目开发
瀑布流实现原理分析
浮动与定位、优缺点
数据格式分析
页面数据填充
判断数据加载时机
留言本实战开发
用户名验证
留言数据获取
留言列表展现（瀑布流的形式）
第十章节（上）：JS中的运动-基础
基础运动过程回顾
基础运动框架形成：startMove();
运动框架实例
实例：淡入淡出的图片
用变量存储透明度
实例："分享到"侧边栏
与摩擦力的区别:可以精确的停到指定目标点
距离越远速度越大
速度由距离决定
速度=(目标值-当前值)/缩放系数
Bug：速度取整
当前值取整：由 offsetLeft \ getComputedStyle……引发的"数值血案"
实例：一个Div，鼠标移入变宽
多物体运动
实例：多个Div，鼠标移入变宽
单定时器，存在问题
每个元素一个定时器
实例：多个图片淡入淡出
任意值运动
支持不同属性，能让某个值运动起来
用currentStyle代替offset
运动属性作为参数
封装opacity
给属性默认值
第十章节（下）：JS中的运动-应用
经典运动框架（速度版）——原"完美运动框架"
所有的值都到达目标点的时候，才停止
链式运动框架（回调函数）
运动停止时，执行函数
运动停止时，开始下一次运动
实例：方块先变宽，再变高
经典运动框架应用
实例：多图片展开、收缩（照片墙）
实例：新浪微博（动画效果的留言本）
实例：缓冲运动的幻灯片
实例：返回顶部
图片预加载、延迟加载
原理：不直接修改img元素的src，加载完成后，再显示
图片对象：new Image();
图片预加载事件
onload，加载完成后显示图片
onerror，加载失败时，进行其他处理(跳过、显示信息等)
实例：淡雅图片预加载实例
图片预加载——自动加载下一张图片
图片延迟加载——加载可视区图片，其他图片等进入可视区再加载
第十一章：面向对象
什么是对象
数组 Array
时间 Date 字符串 String
对象是一个整体，对外提供一些操作
数组 sort()
时间 getHours() 字符串 charAt()
什么是面向对象
用对象的思想去编程，对外提供方法的接口
其他人使用的时候，只要告诉他怎么用，不用关心内部实现的细节
面向对象是一种通用思想，并非只有编程中能用，任何事情都可以用
对象的组成
方法（行为、操作）——函数：过程、动态的
属性——变量：状态、静态的
面向对象编程(OOP)的特点
抽象：抓住核心问题
封装：不考虑内部实现，只考虑功能使用
继承：从已有对象上，继承出新的对象
编写复杂效果就像搭积木
第一个面向对象程序
为对象添加方法和属性
this详解，事件处理中this的本质
object对象：
实例：创建两个人，重复代码太多
用构造函数创建一个类
什么是类、对象（实例）：模具和零件
对象的引用问题
问题：所有操作集中在构造函数中、函数重复定义
原型：prototype
为Array添加sum方法
一次只能为一个对象添加，类似于行间样式
什么是原型
原型是class，修改他可以影响一类元素
原型是加到构造函数上的(Sum方法添加到原型上)
普通方法优先级高于原型方法
系统对象注意事项
1.不要覆盖原有方法
2.不要轻易添加方法
流行的面向对象编写方式
用混合方式构造对象
混合的的构造函数/原型方式(这坑爹的名字，真长)
Mixed Constructor Function/Prototype Method
构造函数：加属性
原型：加方法
对象命名规范
类名首字母大写
面向对象的选项卡
把面向过程的程序，改写成面向对象的形式
不能有函数套函数、但可以有全局变量
onload → 构造函数
全局变量 → 属性
this、事件、闭包、传参
对象与闭包
通过闭包传递this
第十二章：正则表达式（火星文）
复习字符串操作
获取子字符串
获取某个字符
分割字符串，获得数组
找出字符串中的所有数字
用传统字符串操作完成
用正则表达式完成
什么是正则表达式
什么叫"正则"
规则、模式
强大的字符串匹配工具
正则的写法
new RegExp("a")
正则表达式常用方法
字符串判断
正则.test(字符串)
实例：是否有不是数字的字符
字符串搜索
返回出现的位置
字符串.search(正则)
忽略大小写：i——ignore
获取匹配的项目
全局匹配：g——global
实例：找出所有数字
替换所有匹配
返回替换后的字符串
字符串.replace(正则,想替换的)
实例：敏感词过滤
实例：日期格式化
正则表达式字符类
任意字符 - [abc]
实例：o[usb]t——obt、ost、out
范围 - [a-z]、[0-9]
实例：id[0-9]——id0、id5
排除 - [^a]
实例：o[^0-9]t——oat、o?t、o t
组合 - [a-z0-9A-Z]
实例：偷小说
过滤HTML标签
自定义innerText方法
.（点）——任意字符
\d、\w、\s 、\b
\D、\W、\S 、\B
重复的元素
获取class元素
找重复项最多的字符和个数
什么是量词
出现的次数
{n,m}，至少出现n次，最多m次
实例：查找QQ号
{n,} 至少n次
任意次 {0,}
？ 零次或一次 {0,1}
+ 一次或任意次{1,}
{n} 正好n次
实例：是不是QQ号
实例：去掉前后空格
常用正则实例（数据校验）
匹配中文：[\u4e00-\u9fa5]
行首行尾空格：^\s*|\s*$
Email：^\w+@[a-z0-9]+(\.[a-z]+){1,3}$
网址：[a-zA-z]+://[^\s]*
QQ号：[1-9][0-9]{4,9}
邮政编码：[1-9]\d{5}
身份证：[1-9]\d{14}|[1-9]\d{17}|[1-9]\d{16}x
正则与JSON
静态类：正则静态类化
使用：对象方法访问
JS高级专题之一：JS中面试题
课程知识点总结
事件、DOM、BOM、js基础、Ajax、面向对象、常用方法、常用技巧、运动
理解函数声明与函数表达式
什么是闭包，作用有那些
闭包面试题实例解析
callee和caller
函数自身和被调用的函数
call和apply
参数的区别
变量预解析
谁调用指向谁
Null == undefined
取个随机数
样式的获取currentStyle getComputedStyle
Event对象：ev
|| window.event
滚动距离: document.documentElement.scrollTop || document.body.scrollTop
childNodes:
滚轮事件：mousewheel
DOMMouseScroll
减少全局变量：作用域链
只加载可视区的内容
减少dom操作：事件委托、文档碎片document.createDocumentFragment()
能使用正则的尽量用正则
Get和post区别
json、字符串互转
其他要了解的
后台、数据库、seo、Jquery(或任意类库)、Firebug、svn、html5、css3、node.js、响应式设计……
JS高级专题之二：JS综合应用实例
标签嵌套+运动时出现子级影响父级的问题
解决方案：
onmouseenter、onmouseleave（chrome不支持）
兼容chrome实现原理：判断标签是否存在包含关系
2、CSS：覆盖透明度（缺陷：生成多余标签）
苹果菜单展示
勾股定理、计算鼠标当前位置与各图片中心点距离
计算比例关系
照片墙（WEB-QQ图标拖拽换位）
照片墙展示
布局转换、拖拽+层级设置、碰撞检测、中心点距离计算、运动切换、随机切换位置
JS高级专题之三：JS游戏开发实战
WEB版小蜜蜂演示
开发模式：单体模式、命名空间、与面向对象差异
游戏开发功能确定：游戏开发规则和游戏难点分析
JS项目开发规范：
注释、数据与操作分离、函数功能模块化、功能难点独立demo实现
具体开发流程：
1、创建积分
2、创建敌人
3、敌人移动
4、相关数据：敌人数据、关卡数据、飞机数据……
5、创建飞机
6、操作飞机
7、创建子弹
8、子弹飞行
9、碰撞检测
10、单兵作战（单兵追踪算法）
JS高级专题之四：模块化开发
为什么要进行模块化开发：
当你的网站开发越来越复杂的时候，会经常遇到这些问题吗？
一个适合web端的模块加载器
解决冲突、性能、依赖等问题，提升代码的可维护性
http://seajs.org
模块的概念
seajs如何解决?
①引入sea.js的库
②如何变成模块？
③如何调用模块？
④如何依赖模块？
实例：seajs模块化开发 Web-QQ
深入学习seajs
define、require、seajs.use、seajs.config、alias、preload、debug、seajs.modify、插件
模块化历史
ECMAScrpt第六版将正式支持模块语法
跟seajs一样，web端模块化
seajs采用cmd规范
JS高级专题之五：高级运动
加减速运动
速度不断增加或减少
速度减小到负值，会向反方向运动
在目标点左边，加速；在目标点右边，减速
根据距离，计算加速度
带摩擦力的弹性运动
弹性运动+摩擦力
速度+=(目标值-初始值)/5
距离足够近 并且 速度足够小
实例：仿官网导航条效果
弹性运动的问题：运动过界
撞到目标点，速度反转
无重力的漂浮Div
滚动条闪烁的问题
过界后反弹
反转速度的同时，减小速度
纵向碰撞，横向速度也减小
横向速度小数问题（负数）
实例：Iphone弹性拖拽
实例：碰撞弹窗：两点间距离求出速度
JS高级专题之六：VQuery
什么是VQuery
一个小型的JQuery
学习VQuery具备的知识
常用方法:bindEvent getByClass
VQuery选择器
elements属性，存储选中的元素
typeof的使用
class、ID、tagName
核心方法：
$函数、click方法、on方法、show方法、hide方法、hover方法
简单形式——设置、获取
获取计算后的样式
找父级, 找子集, 循环所有兄弟
实例: VQuery选项卡
函数"链式操作"
css方法链式操作
阻止冒泡、默认事件
插件机制 extend
可以任意扩展库的功能
为VQuery添加方法
实例：size
JS高级专题之七：JS高级面向对象
JS基于原型的程序
String Number Boolean
实例对象与原型之间的连接，叫做原型链
__proto__( 隐式连接 )
Object对象类型是原型链的最外层
面向对象的一些属性和方法
toString() :
object上的方法
hasOwnProperty()
: 看是不是对象自身下面的属性
constructor :
查看对象的构造函数
每个原型都会自动添加constructor属性
For in 的时候有些属性是找不到的
避免修改construtor属性
instanceof :
对象与构造函数在原型链上是否有关系
什么是继承
在原有对象的基础上，略作修改，得到一个新的对象
不影响原有对象的功能
如何添加继承
属性：call
方法：for in
继承的拖拽
继承的其他形式
利用构造函数(类)继承的方式
借助原型来实现对象继承对象
JS高级专题之八：JS组件开发
对象的多种表现形态
提高对象的复用性
如何配置参数和默认参数
例子 : 拖拽
例子 : 弹窗
什么是组件？
对面向对象的深入应用（UI组件，功能组件）
将 配置参数、方法、事件，三者进行分离
创建自定义事件
有利于多人协作开发代码
如何去挂载自定义事件与事件函数
基于JQ的选项卡的组件开发模式
Trigger() extend()等方法的使用
JS高级专题之九：运动框架(时间版)
JQ的animate
一个典型的时间版的运动框架
与经典startMove的区别
以时间为单位，而不是以速度为单位
例子 : 从中间放大的图片
一个来自flash的运动算法
JQ中也在使用tween算法
t：current
time（当前时间）
b：beginning
value（初始值）
c： change
value（变化量）
d：duration（持续时间）
（目标点）
新运动框架
如何获取当前时间
( new Date()
).getTime()
老版本中的BUG，可以在新版本中修复
定时器缓慢的问题（切换页面时）
循环轮播图
扩展JQ的运动形式
通过extend进行扩展
JS高级专题之十：jQuery高级开发
基础方法扩充
get():下标和length属性
outerWidth(): 针对隐藏元素和参数true
text():合体的特例
remove():detach()
$():$(document).ready()
$()下的常用方法1
parents()&&closest()&&siblings()&&nextAll()&&prevAll()&&parentsUntil()
nextUntil()&&prevUntil()&&clone()&&end()&&wrap()&&wrapAll()
wrapInner()&&unwrap()&&add()&&andSelf()&&serialize()&&serializeArray()
$()下的常用方法2
animate()&&stop()&&delay()&&focusin()&&focusout()&&mouseenter()&&mouseleave()&&delegate()&&undelegate()
delegateTarget&&trigger()&&ev.data&&ev.target&&ev.type
$下的常用方法1
type()&&trim()&&each()&&inArray()&&contains():只针对原生对象
proxy()&&noConflict()&&extend()&&parseJSON()&&param()&&makeArray()&&fx.off
$下的常用方法2
ajax():json形式的配置参数&&&&url&&success&&error&&contentType&&data&&type&&dataType&&cache&&timeout
抽象出来的方法&&get()&&post()&&getJSON()&&支持jsonp的形式:指定?callback=?
$.fn.extend
继续深入的话，我们还应该掌握哪些？
$.Callbacks():回调对象
deferred():延迟对象
$.hodeReady():持有和释放ready
$.sub():新的JQ副本
$.dequeue():执行队列
$.support:功能检测
JS高级专题之十一：AJAX跨域问题解决方案之-JSONP
跨域的问题和常用解决方式
JSONP 的概念
JSONP 的原理
JSONP 的实际应用
百度/淘宝下拉提示
书籍（或者电影）搜索
搜索数据（书籍）的展现
获取特定数据（书籍）的详细信息
获取特定数据（书籍）的评论信息
妙味课堂 - JS 结课标准：JavaScript 课程实战项目开发辅导
1、考验程序逻辑、算法、代码组织能力，完成一款至少3关以上的
2、考验AJAX，独立完成一个项目、或前端功能实现
3、考验前端开发综合实例，独立完成一款RIA-桌面级项目，如：
注意：学完以上课程以后，可继续学习《HTML5+CSS3》课程
学完以上 JS 课程以后，妙味课堂再赠送全套《HTML5+CSS3》课程视频
第一章：CSS3课程入门
前言内容介绍：
css3主要内容在各个浏览器的兼容情况
浏览器内核前缀:
Transition简介
各浏览器下的兼容性写法
老版Chrome&&-webkit-xxx
FF&&-moz-xxx
IE9&&-ms-xxx
opera&&-o-xxx
标准、高版本Chrome&xxx
JS兼容型写法
大写：Webkit Transition =…
全都加一遍：Webkit…、Moz…、O…、ms…、…
CSS3 选择器 -- 属性选择器
E[attr]只使用属性名，但没有确定任何属性值
E[attr="value"]指定属性名，并指定了该属性的属性值
E[attr~="value"]指定属性名，并且具有属性值，此属性值是一个词列表，并且以空格隔开，其中词列表中包含了一个value词，而且等号前面的"?"不能不写
E[attr^="value"]指定了属性名，并且有属性值，属性值是以value开头的
E[attr$="value"]指定了属性名，并且有属性值，而且属性值是以value结束的
E[attr*="value"]指定了属性名，并且有属性值，而且属值中包含了value
E[attr|="value"]指定了属性名，并且属性值是value或者以"value-"开头的值（比如说zh-cn）
实例：百度文库;
备注：IE7及以上支持;
CSS3 选择器 -- 结构性伪类
E:nth-child(n)
表示E父元素中的第n个字节点
p:nth-child(odd){background:red}/*匹配奇数行*/
p:nth-child(even){background:red}/*匹配偶数行*/
p:nth-child(2n){background:red}
E:nth-last-child(n) 表示E父元素中的第n个字节点，从后向前计算
E:nth-of-type(n)
表示E父元素中的第n个字节点，且类型为E
E:nth-last-of-type(n)表示E父元素中的第n个字节点，且类型为E,从后向前计算
E:empty 表示E元素中没有子节点。注意：子节点包含文本节点
E:first-child 表示E元素中的第一个子节点
E:last-child 表示E元素中的最后一个子节点
E:first-of-type 表示E父元素中的第一个子节点且节点类型是E的
E:last-of-type 表示E父元素中的最后一个子节点且节点类型是E的
E:only-child表示E元素中只有一个子节点。注意：子节点不包含文本节点
E:only-of-type 表示E的父元素中只有一个子节点，且这个唯一的子节点的类型必须是E。注意：子节点不包含文本节点
实例：新浪头部导航
CSS3 选择器 -- 伪类
E:target 表示当前的URL片段的元素类型，这个元素必须是E
E:disabled 表示不可点击的表单控件
E:enabled 表示可点击的表单控件
E:checked 表示已选中的checkbox或radio
E:first-line 表示E元素中的第一行
E:first-letter 表示E元素中的第一个字符
E::selection表示E元素在用户选中文字时
E::before 生成内容在E元素前
E::after 生成内容在E元素后
E:not(s) 表示E元素不被匹配
E~F表示E元素毗邻的F元素
Content 属性
新增颜色模式
实例: 背景透明，文字不透明
问题：注意边框颜色透明有问题
S saturation 饱和度
L Lightness 亮度
文字阴影：
text-shadow：x y blur color, …
文字阴影应用：
text-shadow:2px 2px 4px black
text-shadow:2px 2px 0px red, 2px 2px 4
先渲染后面的，再渲染前面的
代码艺术实践：
光晕：color: font-size:100 text-shadow:0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00
层叠：color: font-size:100 font-weight: text-shadow:2px 2px 0px white, 4px 4px 0
火焰：text-shadow: 0 0 20px #fefcc9, 10px -10px 30px #feec85, -20px -20px 40px #ffae34, 20px -40px 50px #ec760c, -20px -60px 60px #cdpx 70px #px -90px 80px #451b0e; font-family:Verdana, Geneva, sans- font-size:100 font-weight: color:
文字描边：
-webkit-text-stroke:宽度 颜色
新增文本功能
定义文字排列方式(全兼容)
Rtl 从右向左排列
Ltr 从右向左排列
配合unicode-bidi 使用
Text-overflow 定义省略文本的处理方式
Ellipsis 省略号 (配合overflow:hidden、white-space:nowrap)
自定义文字
@font-face {
font-family: 'miaov';
src: url('111-webfont.eot');
src: url('111-webfont.eot?#iefix') format('embedded-opentype'),
url('111-webfont.woff') format('woff'),
url('111-webfont.ttf') format('truetype'),
url('111-webfont.svg#untitledregular') format('svg');
font-weight:
font-style:
第二章：盒模型设计、响应式布局
弹性盒模型：
display:box 或 display:inline-box
Box-orient 定义盒模型的布局方向
Horizontal
box-direction 元素排列顺序
box-ordinal-group 设置元素的具体位置
Box-flex 定义盒子的弹性空间
子元素的尺寸=盒子的尺寸*子元素的box-flex属性值 / 所有子元素的box-flex属性值的和
box-pack 对盒子富裕的空间进行管理
Star 所有子元素在盒子左侧显示，富裕空间在右侧
End 所有子元素在盒子右侧显示，富裕空间在左侧
Center 所有子元素居中
Justify 富余空间在子元素之间平均分布
box-align 在垂直方向上对元素的位置进行管理
Star 所有子元素在据顶
End 所有子元素在据底
Center 所有子元素居中
盒模型阴影
box-shadow:[inset] x y blur [spread] color
inset：投影方式
inset：内投影
不给：外投影
x、y：阴影偏移
blur：模糊半径
spread：扩展阴影半径
盒模型新增属性
box-reflect 倒影
above|below|left|
渐变（可选）
resize 自由缩放
Both 水平垂直都可以缩放
Horizontal 只有水平方向可以缩放
Vertical 只有垂直方向可以缩放
注：配合overflow:auto、水平方向可以缩放
box-sizing 盒模型解析模式
Content-box 标准盒模型 width/height=border+padding+content
Border-box
怪异盒模型 width/height=content
CSS3 分栏布局
column-width
column-count
column-gap
column-rule
栏目间隔线
column-fill
栏目高度是否统一
CSS3 响应式布局
link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"
link rel="stylesheet" media="all and (orientation:landscape)"href="landscape.css"
@media screen and (min-width:400px) and (max-width:500px) {.box {margin: 0}}
link rel="stylesheet" type="text/css" href="styleA.css"
media="screen and (min-width: 800px)"
link rel="stylesheet" type="text/css" href="styleB.css" media="screen and (min-width: 600px) and (max-width: 800px)"
link rel="stylesheet" type="text/css" href="styleC.css"
media="screen and (max-width: 600px)"
第三章：新的UI方案
border-radius: 1-4个数字 / 1-4个数字
前面是水平，后面是垂直
不给"/"则水平和垂直一样
border-radius: 10px/5
各种长度单位都可以：px，%，…
%有时很方便
宽高不一致时不太好
1个：都一样
border-radius: 一样
border-radius: 左上&右下 右上&左下
3个：斜对角
border-radius: 左上 右上&左下 右下
4个：全部，顺时针
border-radius: 左上 右上 右下 左下
边框图片 border-image
border-image-sourceg 引入图片
border-image-slice 切割图片
border-image-width 边框宽度
border-image-repeat 图片的排列方式
round 平铺,repeat 重复,stretch拉伸
边框颜色 border-colors
线性渐变格式
linear-gradient([ || ,]? , …)
只能用在背景上
IE：filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#ff0000',GradientType='1');
起点：从什么方向开始渐变
left、top、left top
角度：从什么角度开始渐变
xxx deg的形式
点：渐变点的颜色和位置
black 50%，位置可选
线性渐变实例（1）
red, green
left top, red, green
30deg, red, green
repeating-linear-gradient
线性渐变实例(2)
加入点的位置
top, red 40%, green 60%
top, red 50%, green 50%
同一个位置两个点——直接跳变
也可以用px
top, rgba(255,255,255,1), rgba(255,255,255,0)
加入背景图片
background: -webkit-linear-gradient (top, rgba(255,255,255,1) 30%, rgba(255,255,255,0)), url(a.gif)
实例：百度音乐图片光影效果
radial-gradient([]? [ || ,]? , …);
起点：可以是关键字（left,top,right,bottom），具体数值或百分比
形状：ellipse、circle
大小：具体数值或百分比，也可以是关键字（最近端，最近角，最远端，最远角，包含或覆盖 (closest-side, closest-corner, farthest-side, farthest-corner, contain or cover)）;
注意firefox目前只支持关键字
逗号分开：background: url(a.jpg) 0 0, url(b.jpg) 0 100%;
background-size:x y
background-size:100% 100%
Cover 放大
Contain 缩小
background-origin ： border | padding | content
border-box：从border区域开始显示背景。
padding-box：从padding区域开始显示背景。
content-box：从content区域开始显示背景。
background-clip
border：从border区域向外裁剪背景。
padding：从padding区域向外裁剪背景。
content：从content区域向外裁剪背景。
no-clip：从border区域向外裁剪背景。
实例：iphone开机动画
Mask-image
Mask-position
Mask-repeat
实例：特殊形状的幻灯片效果
第四章：过渡和2d变换
Transition过渡
transition-property
要运动的样式
（all || [attr] || none）
transition-duration 运动时间
transition-delay 延迟时间
transition-timing-function 运动形式
ease：（逐渐变慢）默认值
linear：（匀速）
ease-in：(加速)
ease-out：（减速）
ease-in-out：（先加速后减速）
cubic-bezier 贝塞尔曲线（ x1, y1, x2, y2 ） /ceaser/
实例：幻灯片效果
过渡完成事件
Webkit内核： obj.addEventListener('webkitTransitionEnd',function(){},false);
firefox: obj.addEventListener('transitionend',function(){},false);
实例2：360浏览器 ipad 版导航
旋转函数 取值度数
Transform-origin 旋转的基点
skew() 倾斜函数 取值度数
scale() 缩放函数 取值 正数、负数和小数
translate() 位移函数
translateX()
translateY()
实例1：钟表效果
实例2：怪异的导航
Transform 执行顺序问题 — 后写先执行
matrix(a,b,c,d,e,f) 矩阵函数
通过矩阵实现缩放
x轴缩放 a=x*a
y轴缩放 b=y*b
通过矩阵实现位移
x轴位移: e=e+x
y轴位移: f=f+y
通过矩阵实现倾斜
x轴倾斜: c=Math.tan(xDeg/180*Math.PI)
y轴倾斜: b=Math.tan(yDeg/180*Math.PI)
通过矩阵实现旋转
a=Math.cos(deg/180*Math.PI);
b=Math.sin(deg/180*Math.PI);
c=-Math.sin(deg/180*Math.PI);
d=Math.cos(deg/180*Math.PI);
变换兼容IE9以下IE版本只能通过矩阵来实现
filter: progid:DXImageTransform.Microsoft.Matrix( M11= 1, M12= 0, M21= 0 , M22=1,SizingMethod='auto expand');
IE下的矩阵没有E和F两个参数 M11==a; M12==c; M21==b; M22==d
第五章：3d变换和动画
transform-style（preserve-3d） 建立3D空间
Perspective 景深
Perspective- origin 景深基点
backface-visibility 隐藏背面
Transform 新增函数
translateZ()
实例1：3D盒子
实例2：3D图片切换
实例3：折纸效果
关键帧——keyFrames
类似于flash
只需指明两个状态，之间的过程由计算机自动计算
关键帧的时间单位
数字：0%、25%、100%等
字符：from(0%)、to(100%)
@keyframes 动画名称
@keyframes
miaov_test
from { background: }
to { background: }
可以只有to
animate——调用动画
调用的标签(#div1、xxx:hover之类的)
animation-name
动画名称（关键帧名称）
animation-duration
动画持续时间
-webkit-animation-name: 'miaov';
-webkit-animation-duration: 4s;
实例：进度条
animation-play-state 播放状态（ running 播放 和paused 暂停 ）
animate——可选属性
animation-timing-function 动画运动形式
linear 匀速。
ease 缓冲。
ease-in 由慢到快
ease-out 由快到慢
ease-in-out 由慢到快再到慢。
cubic-bezier(number, number, number, number)：特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内
animation-delay 动画延迟
只是第一次
animation-iteration-count 重复次数
infinite为无限次
animation-direction 播放前重置
动画是否重置后再开始播放
alternate 动画直接从上一次停止的位置开始执行
normal 动画第二次直接跳到0%的状态开始执行
animate——和JS结合
在class里加入animation的各种属性
直接给元素加-webkit-animation-xxx样式
animation的问题
写起来麻烦
没法动态改变目标点位置
obj.addEventListener('webkitAnimationEnd', function (){}, false);
实例1：无缝滚动
实例2：3D图片轮换
第一章：初识 HTML5
HTML5页面结构、宽松的语法规范
&#8249;!doctype html&#8250;
&#8249;meta charset="utf-8"/&#8250;
&#8249;title&#8250;miaov—html5&#8249;/title&#8250;
&#50;妙味课堂html5语义化标签&#8249;/h1&#8250;
新的结构化元素
语义化标签的由来
/articles/572/idlist-url.htm
语义化标签
header：页眉-主要用于页面的头部的信息介绍，也可用于板块头部
hgroup：页面上的一个标题组合
nav：导航 （包含链接的的一个列表）列举nav实际应用框架
footer：页脚
页面的底部 或者 版块底部
section：页面上的版块-用于划分页面上的不同区域,或者划分文章里不同的节
article：用来在页面中表示一套结构完整且独立的内容部分
aside：元素标签可以包含与当前页面或主要内容相关的引用、侧边栏、广告、nav元素组，以及其他类似的有别与主要内容的部分
figure：用于对元素进行组合。一般用于图片或视频
figcaption：figure的子元素 用于对figure的内容 进行说明
figure、figcaption
time：用来表现时间或日期
datalist：选项列表。与 input 元素配合使用，来定义 input 可能的值
details：用于描述文档或文档某个部分的细节
summary：details 元素的标题
dialog：定义一段对话
address：定义文章 或页面作者的详细联系信息
mark：需要标记的词或句子
keygen：给表单添加一个公钥
progress：定义进度条
IE下的兼容
标签兼容性解决方案
&#8249;script&#8250;
document.createElement("header");
document.createElement("nav");
document.createElement("footer");
&#8249;/script&#8250;
样式兼容性解决方案
HTML5语义化标签用js创建后全新设置默认样式
Forms 新的输入型控件
email：电子邮箱文本框，跟普通的没什么区别
当输入不是邮箱的时候，验证通不过
移动端的键盘会有变化
tel：电话号码
url：网页的URL
search：搜索引擎
chrome下输入文字后，会多出一个关闭的X
range：特定范围内的数值选择器
min、max、step( 步数 )
用JS来显示当前数值
number：只能包含数字的输入框
color：颜色选择器
datetime：显示完整日期
datetime-local：显示完整日期，不含时区
time：显示时间，不含时区
date：显示日期
week：显示周
month：显示月
新的表单特性和函数
placeholder
输入框提示信息
微博的密码框提示
autocomplete
是否保存用户输入值
默认为on，关闭提示选择off
指定表单获取输入焦点
list和datalist
为输入框构造一个选择列表
list值为datalist标签的id
此项必填，不能为空
Pattern : 正则验证
pattern="\d{1,5}"
Formaction 在submit里定义提交地址
validity对象
oText.addEventListener("invalid",fn1,false);
ev.preventDefault()
valueMissing
输入值为空时
typeMismatch :
控件值与预期类型不匹配
patternMismatch
输入值不满足pattern正
超过maxLength最大限制
rangeUnderflow : 验证的range最小值
rangeOverflow：验证的range最大值
stepMismatch: 验证range 的当前值 是否符合min、max及step的规则
customError 不符合自定义验证
setCustomValidity(); 自定义验证
Invalid事件
input.addEventListener('invalid',fn,false)
阻止默认验证：ev.preventDefault()
formnovalidate属性
第二章：HTML5的新特性
课程内容介绍:
HTML5新特性的浏览器支持情况
新的选择器——querySelector querySelectorAll
新的选择器——getElementsByClassName
获取class列表属性——classList length add remove toggle
Json的新方法——parse():把字符串转成json
Json的新方法—stringify():把json转化成字符串
Json的新方法——新方法与eval的区别及应用
Json的新方法应用——深度克隆新对象
Json的新方法兼容性——json2.js
data自定义数据 dataset Data数据在jquery mobile中有着重要作用
Html5的defer和async
defer:延迟加载，会按顺序执行，在onload执行前被触发
async:异步加载，加载完就触发，有顺序问题
Labjs库介绍
历史管理——onhashchange：改变hash值来管理
历史管理——pushState : 三个参数：数据 标题(都没实现)地址(可选)
历史管理——popstate事件:读取数据 event.state
拖放事件——draggable：设置为true，元素就可以拖拽了
拖放事件——拖拽元素事件 dragstart drag dragend
拖放事件——事件的执行顺序 drop不触发的时候如何执行
dragstart > drag > dragenter > dragover > dragleave > dragend
拖放事件——事件的执行顺序 drop触发的时候如何执行
dragstart > drag > dragenter > dragover > drop > dragend
解决火狐拖放问题：必须设置dataTransfer对象才可以拖拽除图片外的其他标签
dataTransfer对象——setData() :设置数据 key和value(必须是字符串)
dataTransfer对象——getData() :获取数据，根据key值，获取对应的value
dataTransfer对象——effectAllowed:设置光标样式
dataTransfer对象——dropEffect:获取光标样式
dataTransfer对象——dropEffect:必须写在dragover中
dataTransfer对象——setDragImage 三个参数：指定的元素，坐标X，坐标Y
dataTransfer对象——files 获取外部拖拽的文件，返回一个filesList列表
FileReader——readAsDataURL参数为要读取的文件对象
FileReader——当读取文件成功完成的时候触发此事件
FileReader——实例 拖拽删除列表 拖拽购物车 上传图片预览功能
第三章：canvas（上）
课程内容介绍:
标签canvas——不支持canvas的浏览器可以看到的内容
绘制环境——getContext('2d') : 目前支持2d的场景
绘制方块——fillRect(L,T,W,H) :默认颜色是黑色
绘制方块—— strokeRect(L,T,W,H):带边框的方块
设置绘图——fillStyle填充颜色 lineWidth线宽度 strokeStyle边线颜色
边界绘制——lineJoin:边界连接点样式lineCap:端点样式
绘制路径——beginPath closePath moveTo lineTo stroke
绘制路径——fill rect clearRect save restore
实例——鼠标画线 方块移动
绘制圆——arc(x, y, 半径, 起始弧度, 结束弧度, 旋转方向)
实例——用arc去画个钟表
绘制其他曲线——arcTo(x1,y1,x2,y2,r)第一组坐标、第二组坐标、半径
quadraticCurveTo(dx,dy,x1,y1)贝塞尔曲线：一组控制点的
bezierCurveTo(dx1,dy1,dx2,dy2,x1,y1)贝塞尔曲线 ：两组控制点的
变换——translate rotate scale
变换实例：旋转加缩放的小方块
插入图片——等图片加载完，再执行canvas操作drawImage(oImg,x,y,w,h)
实例——微博的图片旋转效果
设置背景——createPattern(oImg,平铺方式)
渐变——createLinearGradient(x1,y1,x2,y2) 线性渐变
渐变——createRadialGradient(x1,y1,r1,x2,y2,r2)放射性渐变
第四章：canvas（下）
课程内容介绍：
文本——strokeText(文字,x,y) 文字边框 fillText(文字,x,y) 文字填充
文本——font 文字大小 : '60px impact'
文本——textAlign 默认是start 跟left一样的效果 end right center
文本——textBaseline 文字上下的位置的方式 默认 : alphabetic
文本——measureText() measureText(str).width : 只有宽度，没有高度
阴影——shadowOffsetX、shadowOffsetY X轴偏移、Y轴偏移
阴影——shadowBlur 高斯模糊值 shadowColor 阴影颜
像素——getImageData(x,y,w,h) 获取图像数据
像素——putImageData(获取图像,x,y) 设置新的图像数据
像素——属性 width Height data
像素——createImageData(w,h)生成新的像素矩阵，即(0,0,0,0)
实例——像素显字
像素——获取和设置指定坐标 封装 : getXY、setXY
像素——图片的像素操作 必须是同源下 实例：反色、倒影、渐变等
实例——马赛克效果
合成——globalAlpha
globalCompositeOperation属性
source-over
destination-over
source-atop
destination-atop
destination-in等
将画布导出为图像——toDataURL
事件操作——isPointInPath:是否在点击范围内
jCanvaScript(canvas中的jquery)库:简单使用
让IE支持canvas jCanvaScript(canvas中的jquery)
Three.js(canvas中的3D库) Box2dWeb(canvas中的物理引擎库)
第五章：跨文档消息通信
课程内容介绍：
postMessage对象—— 一参 : 发送的数据，二参 : 发送的域
交互方式iframe父页面 : contentWindow、子页面 : window.top
交互方式窗口页 : 父页面 : window.open、子页面 : window.opener
接收事件：message ev.origin : 发送数据来源的域 ev.data : 发送的数据
XMLHttpRequest 改进版 请求页面与数据页面必须属性不同的域
服务器要设置响应头信息 Origin值展现 新的事件 : onload等
进度事件 upload. onprogress : 上传onprogress : 下载
实例:仿QQ邮箱上传文件，带进度条
websocket——互联网协议 TCP/IP协议 HTTP协议 实时web交互
websocket——基于TCP的双向的、全双工的数据连接 建立socket应用
node.JS——环境搭建和基础语法
node.JS一个简单的web服务器——创建HTTP服务 监听客户端HTTP请求连接
node.JS——处理请求响应，向客户端输出返回内容,基于http
Websocket连接——客户端发送Websocket连接请求
Websocket连接——服务器监听来自Websocket连接请求
实例:基于Websocket的聊天室
JS跨域总结方案
第六章：地理信息 本地存储 离线存储
课程内容介绍：
地理位置——IP地址 GPS全球定位系统 Wi-Fi无线网络
地理位置对象——navigator.geolocation
单次定位请求：getCurrentPosition(请求成功，请求失败，数据收集方式)
请求成功函数——经度 : coords.longitude 纬度 : coords.latitude
准确度 : coords.accuracy 海拔 : coords.altitude
海拔准确度 : coords.altitudeAcuracy 行进方向 : coords.heading
地面速度 : coords.speed
navigator.geolocation 时间戳 : new Date(position.timestamp)
国家 : address.country 省 : address.region 市 : address.city
navigator.geolocation 请求失败函数 失败编号 ：code
数据收集 : json的形式 enableHighAcuracy : 更精确的查找，默认false
timeout : 获取位置允许最长时间，默认infinity
maximumAge : 位置可以缓存的最大时间，默认0
navigator.geolocation 多次定位请求
关闭更新请求 : clearWatch(像clearInterval)
百度地图API实例
本地存储——Cookie Cookie的特点
本地存储——Storage sessionStorage localStorage
本地存储——Storage的特点存储量限制(5M)客户端完成，不会请求服务器处理
本地存储——sessionStorage数据是不共享、 localStorage共享
Storage API——setItem() getItem() removeItem() clear()
Storage API——存储事件 Key newValue oldValue storageArea
实例——保存注册信息 同步购物车
applicationCache 离线应用 离线存储 搭建离线应用程序 检测离线状态
服务器设置头信息 : AddType text/cache-manifest .manifest
navigator.onLine : 当前是否在线 online\offline:在线离线的两个事件
applicationCache API——status(0,1,2,3,4,5): 缓存状态
事件——oncached onchecking ondownloading onupdateready
事件——onobsolete onerror onnoupdate onprogress
综合实例——行走日记APP
第七章：音频与视频 webWorkers 移动端HTML5
课程内容介绍：
音频和视频——标签audio，video，source
音频和视频——视频容器，容器文件，类似于压缩了一组文件
编解码器 原始的视频容器非常大，添加需编码，播放需解码
媒体元素——controls : 显示或隐藏用户控制界面
媒体元素——autoplay : 媒体是否自动播放
媒体元素——loop :媒体是否循环播放
媒体元素——currentTime : 开始到播放现在所用的时间
媒体元素——duration : 媒体总时间(只读)
媒体元素——volume : 0.0-1.0的音量相对值
媒体元素——muted : 是否静音 等。。。
相关方法——play() pause()
相关事件——play
pause ended等
Video额外特性——poster : 视频播放前的预览图片
Video额外特性——width、height : 设置视频的尺寸
Video额外特性——videoWidth、 videoHeight : 视频的实际尺寸(只读)
实例：视频与canvas结合
实例：自制播放器
什么是worker——JS的单线程，可以让web应用程序具备后台处理能力。
Worker API——new Worker 利用postMessage传输数据 importScripts
Worker运行环境——navgator: appName、appVersion、userAgent
Worker运行环境——location: 所有属性都是只读的
Worker运行环境——self: 指向全局 worker 对象
Worker运行环境——所有的ECMA对象，Object、Array、Date等
Worker运行环境——XMLHttpRequest构造器
Worker运行环境——setTimeout和setInterval方法
Worker运行环境——close()方法，立刻停止worker运行
实例：利用Worker来提高canvas的性能
内容编辑——contenteditable="true"
语言输入——&#8249;input type="text" x-webkit-speech /&#8250
桌面提醒——window.webkitNotifications
app是什么——Web App Native App
Hybrid App
视口——viewport : width=device-width,initial-scale=1
样式模块——Media Queries适配不同设备
横向和纵向设置
移动端事件——touchstart touchmove touchend
移动端事件——方向事件orientationchange
移动端事件——多手指事件gesturestart gesturechange
实体班售前咨询QQ：}