JavaScript初级教程

AirJD

没有录音文件

00:00/00:00

加收藏

发布者 snandy 简介 JD前端工程师

主页 http://snandy.cnblogs.com 发布于 1433742749592 浏览 10410 关键词 前端, JavaScript

分享到

第1页

JavaScript初级教程

JDC yfzhoutao/ liuwei1
2015.4

第2页

课程内容

JS简介
JS基本概念
浏览器中的JS
DOM编程
事件
jQuery

第3页

课程目标

了解JS基本概念，变量、引用、运算符、语句、函数，会利用函数进行简单抽象
了解浏览器提供的BOM对象，window,、loaction、 navigator等
了解DOM对象，树结构，元素增、删、替换、样式修改
会给元素添加事件，完成简单交互

第4页

1 ES简介

1995.12  Sun公司和Netscape公司一起推出了JavaScript
1996.11  NetScape公司将JavaScript提交给ECMA去审定，在1997年6月被ECMA采纳并发布了ES1
1998.06  ES2发布
1999.12  ES3发布
ES4由于技术委员会（Technical Committee 39）内部出现分歧。一些成员如JS之父Brendan Eich主张大幅度改变，即ES4，另一些人如JSON之父Douglas Crockford偏爱ES3，主张基于现有规格做语言API的扩充。最终导致第4版本被放弃，只进行了小幅更新并命名为ES3.1
2009.12   ES3.1继续修改最终更新为ES5并发布
2015.06   ES6发布？

第5页

1.1 ES各版本目前的实现

第6页

2 JS基本概念

2.1 变量
2.2 数据类型
2.3 运算符
2.4 语句
2.5 对象
2.6 函数

第7页

2.1 变量

变量声明
变量作用域

第8页

2.1.1 变量声明

使用变量前需要先声明，JS 使用关键字 var
标识符必须以字母、下划线（_）、美元符（$）开头

第9页

2.1.2 声明同时赋值

第10页

2.1.3 不使用var的声明

不使用var声明的变量默认转为全局变量，但在严格模式中将不允许，会报语法错误。

第11页

2.1.4 JS中8种直接量声明

表2.1 JS中8种直接量声明

第12页

2.1.5 变量作用域

作用域指变量的可见和使用范畴
两种作用域，全局和局部
块级作用域？ES6 let关键字

第13页

2.1.6 无块级作用域

无块级作用域

有块级作用域（ES6）

第14页

2.2 数据类型

数据类型描述了数值的表示法、解释和结构，及对应操作。

第15页

2.2.1 基本数据类型

第16页

2.2.2 数据类型示例

基本类型（Undefined、String、Number、Boolean）
复合类型（Object）
函数类型（Function）

第17页

2.2.3 值/引用类型

第18页

2.3 运算符

JS的运算符多数是标点符号，少数是单词，有如下分类
算术运算符
比较运算符
逻辑运算符
赋值表达式
对象属性运算符
数组元素运算符

第19页

2.3.1 运算符分类表

第20页

2.3.2 单词形式运算符

第21页

2.3.3 比较运算符

第22页

2.3.4 运算符优先级

第23页

2.3.5 使用“()”改变优先级

可以使用小括号“()”改变运算符的默认优先级

第24页

2.3.6 多义性 “+”

数值相加
字符串连接

第25页

2.3.7 多义性 “()”

函数/方法调用
创建对象
强制表达式运算

第26页

2.4 语句

如果表达式是短语，那么语句就是整句或命令，每条语句以分号结束（可选）。语句存在返回值，由最后一个表达式决定。
声明语句
表达式语句
分支语句
循环语句
跳转语句
其它

第27页

2.4.1 声明语句

声明不赋值
声明且赋值

第28页

2.4.2 表达式语句

变量赋值语句
函数调用语句
属性赋值语句
方法调用语句

第29页

2.4.3 分支语句

单分支
双分支
多分支

第30页

2.4.4 循环语句

for
while
do..while
for..in

第31页

2.4.5 跳转语句

continue
break
return

第32页

2.4.6 其它语句

异常捕获
空语句
with

第33页

2.5 对象

对象是JS的基本类型，是一种复合值，是许多原始值的集合。通过名字可以访问到这些值。也可把对象看成属性的无序集合，属性名是字符串，因此可以把对象看出是字符串到值的映射。对象也被称为“散列”（hash）、“字典”（dictionary）、“关联数组”（associaitve array）。

第34页

2.5 对象

创建对象
存取对象属性
枚举对象属性
删除对象属性
检测对象属性

第35页

2.5.1 创建对象

对象直接量
new
Object.create (ES5)

第36页

2.5.2 存取对象属性

点号（.）
中括号（[]）

第37页

2.5.2 存取对象属性

点号和中括号的区别？

第38页

2.5.3 枚举对象属性

for..in

第39页

小心 for..in

只枚举显示的对象属性，内置属性如valueOf/toString等不能枚举
给原型上添加新属性后，该属性for..in时是可见的
重写原型上内置属性后，for..in在各浏览器中表现不一致

第40页

ES5: Object.keys

Object.keys 返回一个数组，为对象所有的属性名

Object.values ？

第41页

2.5.4 删除对象属性

delete运算符

第42页

不能 delete 的成员

用 var 声明的变量
继承自原型的成员
内置对象的属性及方法（有些能delete，如isNaN、parseInt）

第43页

2.5.5 检测对象属性

in
hasOwnProperty

第44页

In 和 hasOwnProperty的区别

in无论是显示定义的name，还是原形链上的toString，都返回true
hasOwnProperty 原型链上继承过来的属性无法检测到，返回false

第45页

2.6 函数

函数概述
函数定义
形参和实参
函数调用
作为对象方法的函数
作为构造器的函数
函数上下文
匿名函数
我是谁，谁调我

第46页

2.6.1 函数概述

函数包含一组语句，它是JS的基础模块单元，用于代码复用，信息隐藏。它定义一次，可以执行任意次。
程序设计语言包含两种基本的抽象：过程抽象和数据抽象，函数属于过程抽象。
计算机历史上函数的别名有：子程序（routines）、过程（procedure）、方法（method）。

第47页

2.6.2 函数定义

使用function关键字定义，有两种方式函数声明和函数表达式。
函数名 + 圆括号（参数）+ 花括号（语句）

第48页

2.6.3 形参和实参

形参指函数定义时的参数，是可选的，通过 “函数名.length”可以获取形参的个数。
实参指函数调用时实际传入的参数，实参少于形参时，剩下的默认都是undefined。
实参对象：arguments，仅在函数内访问。

第49页

2.6.3 形参和实参

第50页

2.6.4 函数调用

()
call/apply
new

第51页

2.6.5 作为对象方法的函数

第52页

2.6.6 作为构造器的函数

第53页

2.6.7 函数上下文（this）

全局函数的上下文是window/global
对象方法的上下文是该对象
call/apply可以改变函数的执行上下文

第54页

2.6.7 函数上下文（this）

第55页

2.6.8 匿名函数

匿名函数（anonymous function）指没有函数名的函数，内部可以用arguments.callee取到函数自身
自执行
封装（模块）

第56页

2.6.8 匿名函数

第57页

2.6.9 我是谁，谁调我

我是谁：arguments.callee
谁调我：arguments.caller (非标准，但都实现)
严格模式以上两者均被禁用

第58页

3 浏览器中JS

script标签
浏览器对象模型（ BOM ）

第59页

3.1 script标签

直接嵌入在HTML
外部文件引入

第60页

3.2 浏览器对象模型（ BOM ）

BOM是Browser Object Model的缩写，简称浏览器对象模型
BOM提供了独立于内容而与浏览器窗口进行交互的对象
由于BOM主要用于管理窗口与窗口之间的通讯，因此其核心对象是window
BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性

第61页

3.2 浏览器对象模型（ BOM ）

第62页

3.2.1 window对象

窗体控制（moveBy/moveTo/resizeBy/resizeTo）
窗体滚动轴控制（scrollTo/scrollBy）
窗体焦点控制（focus/blur）
新建/关闭窗体（open/close）

第63页

3.2.2 History对象

back() 转到列表中的前一个 URL
forward() 转到列表中的下一个 URL
go(num) 转到列表中的某个具体页面

第64页

3.2.3 Location 对象

hash 设置或返回从井号 (#) 开始的 URL（锚）
host 设置或返回主机名和当前 URL 的端口号
hostname 设置或返回当前 URL 的主机名
href 设置或返回完整的 URL
pathname 设置或返回当前 URL 的路径部分
port 设置或返回当前 URL 的端口号
protocol 设置或返回当前 URL 的协议
search 设置或返回从问号 (?) 开始的 URL（查询部分）

第65页

3.2.4 Navigator对象

appCodeName 返回浏览器的代码名
appName 返回浏览器的名称
appVersion 返回浏览器的平台和版本信息
browserLanguage 返回当前浏览器的语言
cookieEnabled 返回指明浏览器中是否启用 cookie 的布尔值
cpuClass 返回浏览器系统的 CPU 等级
onLine 返回指明系统是否处于脱机模式的布尔值
platform 返回运行浏览器的操作系统平台
systemLanguage 返回 OS 使用的默认语言
userAgent 返回由客户机发送服务器的 user-agent 头部的值
userLanguage 返回 OS 的自然语言设置

第66页

4 DOM编程

DOM概览
DOM Tree
Node
DOM查询和获取
元素内容修改
元素创建/插入/删除/替换

第67页

4.1 DOM概览

window的document属性是一个核心对象，全称文档对象模型（Document Object Model）
由W3C标准化，DOM定义了访问 HTML 和 XML 文档的标准
分为DOM1, DOM2, DOM3，多数现代浏览器支持DOM3

第68页

4.2 DOM Tree

第69页

4.3 Node

第70页

4.4 DOM查询和获取

选取元素：JS多数时候都需要操作页面一个或多个元素，DOM提供了多种API来选取元素。
元素遍历：一旦选取了一个元素，就可以通过它获取与之相关联的其它元素。比如父节点、兄弟节点、子节点等。

第71页

4.4.1 选取元素API

document.getElementById
document.getElementsByName
document.getElementsByTagName
document.getElementsByClassName
document.querySelectorAll (现代浏览器)

第72页

4.4.2 元素遍历

parentNode
childNodes
firstChild/lastChild
nextSibling/previoursSibling

第73页

4.4.3 一些选择器lib

Nut(0.5kb)：https://github.com/pyrsmk/nut
Sly(3.6kb)：https://github.com/digitarald/sly
Qwery(0.6kb): https://github.com/ded/qwery
Zest(3.5kb): https://github.com/chjj/zest
Sizzle(4kb): https://github.com/jquery/sizzle

第74页

4.5 元素内容修改

HTML内容修改
innerHTML
insertAdjacentHTML
纯文本内容修改
innerText
textContent

第75页

4.6 元素创建/插入/删除/替换

createElement / createTextNode
appendChild / insertBefore
removeChild / replaceChild

第76页

5 事件

概述
事件流
原始API
添加事件
删除事件
派发事件

第77页

5.1 事件概述

事件指文档或浏览器窗口发生了一些特定的交互（鼠标，键盘等）瞬间，监听器订阅事件以便执行响应代码
在确定的时间发生的，可由用户代码响应的行为
面向对象PME（Properties-Method-Event）
事件属于DOM，由浏览器预先定义，JS引擎自身并没有事件系统

第78页

5.2 事件流

事件冒泡(event bubbling)
事件捕获(event capturing)

第79页

5.2.1事件冒泡

第80页

5.2.2 冒泡的兼容性

所有浏览器都支持事件冒泡
IE9/10,FF,Chrome,Safari, Opera一直冒泡到window
IE6/7/8仅冒泡到document

第81页

5.2.3 事件捕获

第82页

5.2.4 捕获的兼容性

IE6/7/8不支持事件捕获
DOM2要求从document开始捕获，但主流浏览器(IE9/10, FF, Safari, Chrome, Opera)都从window开始

第83页

5.2.5 阻止事件流的传播

老版本IE(6/7/8)
e.cancelBubble = true;
标准浏览器
e.stopPropagation();

注：Opera, FF也支持e.cancelBubble方式; Safari5.1.7/Chrome 21事件对象上也有cancelBubble属性，但不能阻止事件流传播。

第84页

5.3 原生API

W3C
addEventListener
removeEventListener
dispatchEvent
IE
attachEvent
detachEvent
fireEvent

第85页

5.4 添加事件

内联HTML(All Browsers)
DOM-0级 onXXX (All Browsers)
DOM-2级 addEventListener
IE低版本attachEvent (IE6/7/8)

注：addEventListener/attachEvent能为一个事件添加多个handler。

第86页

5.4.1 示例

第87页

5.4.2 事件函数的执行上下文

内联HTML (element)
内联HTML fn (window)
DOM-0级onXXX (element)
DOM-2级addEventListener (element)
IE低版本（IE6/7/8）attachEvent (window)

第88页

5.4.3 事件函数的执行顺序

attachEvent在IE6/7/8下添加同一个类型事件的多个handler执行无序。
attachEvent在IE6/7/8中添加同一个事件handler多次触发后会执行多次。

第89页

5.5 删除事件

内联: 删除onXXX属性
DOM-0: el.onXXX = null
DOM-2: el.removeEventListener
IE低版本: el.detachEvent

注：兼容性问题同添加事件模块

第90页

5.6 派发事件

用户触发（click，mouseover）
程序员代码触发
el.dispatchEvent (W3c)
el.fireEvent (IE低版本)

注：均可触发由四种方式添加的事件handler，且能维护事件流。

第91页

6 jQuery

简介
选择器
操作DOM
事件

第92页

6.1 jQuery简介

2006年 John Resig 发布 jQuery1.0，2015年jQuery1.11.2/jQuery2.1.3
强大的选择器（Sizzle）
链式操作
集合操作
开发常用API（events，Ajax，animate）

注：以1.6.4版本为基础

第93页

6.1 选择器

基本选择器：id/tag/class
属性选择器：[attr], [attr=“xx”]
过滤选择器：:eq, :even, :first
子选择器： :first-child, :last-child
内容选择器：:contains(text), :empty
表单选择器：:button, :checked, :radio
分级选择器：parent > child, prev+next

第94页

6.2 操作DOM

类名（className）
样式（style）
属性（attribute）
插入（insert）
删除（removal）
替换（replacement）
克隆（clone）

第95页

6.2.1 操作class

addClass
removeClass
hasClass
toggleClass

第96页

6.2.2 操作style

css
width/height
innerWidth/innerHeight
outerWidth/ounterHeight
offset/position
scrollLeft/scrollTop

第97页

6.2.3 操作属性

attr/removeAttr
prop/removeProp

第98页

6.2.4 插入元素

append/appendTo
prepend/prependTo
html/text
after/insertAfter
before/insertBefore
wrap/unwrap
wrapAll/wrapInner

第99页

6.2.5 删除元素

remove
empty
detach

第100页

6.2.6 替换元素

replaceWith
replaceAll

100

第101页

6.2.7 克隆元素

clone

101

第102页

6.4 jQuery事件

基本API
bind
one
live
delegate
快捷函数
click/dblclick/focus/blur/mousedown/mouseover
load/resize/scroll/change/submit/select

102

第103页

END

103