JavaScript 教程

JAVASCRIPT 入门指南
壕哥 (菜鸟UED)

演化史
1994年Netscape公司Navigator浏览器上诞生
1997年提交ECMA制定标准，称为ECMAScript(..ES5, ES6..)
借鉴C语言的基本语法
借鉴Java语言的数据类型和内存管理
借鉴Scheme语言，将函数提升到"第一等公民"的地位
借鉴Self语言，使用基于原型（prototype）的继承机制

角色
HTML 控制语义
CSS 控制表现
JavaScript 控制行为

引入方式
外嵌式
<script src="js/jquery.js"></script>
内嵌式
<script>
alert('Hello, world!');
</script>
标签式（禁用）
<button onclick="alert('Hello, world!');"></button>
<a href="javascript:alert('Hello, world!');"></a>

数据类型
五种原始类型（又叫基本类型）
Unde ned、Null、Boolean、Number 和 String
引用类型
对象和数组等。数组可视为特殊的对象。

变量
命名规范
第一个字符必须是一个字母, 下划线或一个美元符号$
其他字符可以是字母，下划线，美元符号或数字
不能用关键字或保留字作为变量名
区分大小写
类型系统是弱类型
使用var创建变量到当前作用域
（否则会创建到顶层作用域，在网页中是window对象）
初始值是unde ned

运算符
一元操作符 ++ -- - +
位操作符 ~ & | ^ << >> >>>
布尔操作符 ! && ||
乘性操作符 * / %
加性操作符 + -
关系操作符 < > <= >=
相等操作符 == != === !==
条件操作符 var max = (num1 > num2) ? num1 : num2
赋值操作符 = *= /= %= += -= <<= >>=
逗号操作符 var num = (5, 1, 4, 8); // num 的值为8

控制语句
if
while
for
for in
switch
break/continue
do while
with（禁用）
label（禁用）

函数声明
声明式声明
<script>
function fnname(arg0, arg1, … argN) {
// statements
}
</script>
函数表达式声明
<script>
var fnname = function(arg0, arg1, … argN) {
// statements
}
</script>

函数调用
标示符加上()运算符，如果该标示符是个函数，则调用该函数
<script>
function say(name, msg) {
console.log('Hello ' + name + msg);
}
var say2 = function(name, msg) {
console.log('Hello ' + name + msg);
};
say('jack', ' haha'); // 调用函数
say2('jack', ' haha'); // 调用函数
</script>

函数参数
没有参数类型
按值传递
函数不介意传递进来多少个参数，也不在乎传进来是什么
数据类型，也就是说即便你定义的函数只接收两个参数，
在调用这个函数时也未必一点要传递两个参数。可以传递
一个，三个甚至不传递参数，而解析器不会报错。
在ES内部函数是使用数组表示的，定义的型参只是这个数
组对应项一个别名。
<script>
function say() {
console.log(‘hello’ + arguments[0] + arguments[1]);
}
</script>

函数返回值
使用return语句返回返回值
return语句之后的东西不会执行
不定义return语句默认返回unde ned
<script>
function sum(num1, num2) {
return num1 + num2;
console.log(11);
}
var s = sum(2,6);
</script>

JAVASCRIPT 保留字(1/2)
abstract arguments boolean break byte
case catch char class* const
continue debugger default delete do
double else enum* eval export*
extends* false nal nally oat
for function goto if implements
import* in instanceof int interface

JAVASCRIPT 保留字(2/2)
let long native new null
package private protected public return
short static super* switch synchronized
this throw throws transient true
try typeof var void volatile
while with yield
带*的保留字是 ECMAScript 5中新引入的。

易错分析
Number使用浮点数实现，没有64位整数。错误场景：一
条记录使用64位整数id作为主键。
0开头的数字，表示一个八进制数字。错误场景：日期初始
化，为了好看使用08表示八号。
日期初始化时月份应该从0开始。
装箱后的String对象应该是引用类型。
数组越过上界赋值，数组长度变大。数组的length可以被
直接赋值，可能导致数组大小变化。
短路求值。只要最终的结果已经可以确定是真或假，求值
过程便终止。&&操作符，如果第一个值求值为false则返回
第一个参数；||操作符，如果第一个值求值为true则返回
第一个参数。

拓展阅读
JavaScript 高级教程
[http://www.w3school.com.cn/js/index_pro.asp]
JavaScript MDN 开发者手册
[https://developer.mozilla.org/en-
US/docs/Web/JavaScript]
JavaScript 保留字
[http://www.w3schools.com/js/js_reserved.asp]
回到本章开头

对象
JavaScript 中的对象(物体)，和其它编程语言中的对象一样，
可以比照现实生活中的对象(物体)来理解它。
在JavaScript中，一个对象可以是一个单独的拥有属性和类型
的实体。
JavaScript一样能实现继承、封装、抽象、多态。

对象和属性
通过点符号来访问一个对象的属性。属性也可以通过方括号
访问。对象有时也被叫作关联数组。
<script>
objectName.propertyName = 'Hello, world!';
car["make"] = "Ford"; car["model"] = "Mustang"; car["year"] = 1969;
</script>
for...in 遍历对象属性
<script>
function showProps(obj, objName) {
var result = "";
for (var i in obj) {
if (obj.hasOwnProperty(i)) {
result += objName + "." + i + " = " + obj[i] + "n";
}
}
return result;
}
</script>

创建新对象
使用对象初始化器
<script>
var obj = { property_1: value_1, // 属性 # 可以是标识符...
2: value_2, // 或数字...
// ...,
"property n": value_n }; // 或字符串等
</script>
使用构造函数
<script>
function Car(make, year) {
this.make = make;
this.year = year;
}
var mycar = new Car("Eagle", 1993);
</script>
使用 Object.create 方法
Object.create(proto, [ propertiesObject ])

通过 THIS 引用对象
<script>
function validate(obj, lowval, hival) {
if ((obj.value < lowval) || (obj.value > hival))
alert("Invalid Value!");
}
</script>
<input type="text" name="age" onchange="validate(this, 18, 99)">
<script>
function showColor() {
alert(this.color);
};
var oCar1 = new Object;
oCar1.color = "red";
oCar1.showColor = showColor;
var oCar2 = new Object;
oCar2.color = "blue";
oCar2.showColor = showColor;
oCar1.showColor(); // 输出 "red"
oCar2.showColor(); // 输出 "blue"
</script>

THIS 的使用场景(1/3)
对象方法调用
<script>
var point = {
x : 0,
y : 0,
moveTo : function(x, y) {
this.x = this.x + x;
this.y = this.y + y;
}
};
point.moveTo(1, 1); // this 绑定到当前对象，即 point 对象
</script>
函数调用
<script>
function makeNoSense(x) {
this.x = x;
}
makeNoSense(5); // this 绑定到全局对象，Web 环境下是 window
x; // x 已经成为一个值为 5 的全局变量
</script>

构造函数调用
<script>
function Point(x, y) {
this.x = x, this.y = y;
}
var point = new Point(1, 2); // this 绑定到新创建的对象
</script>
使用 apply 或 call 调用
<script>
function Point(x, y) {
this.moveTo = function(x, y) {
}
}
var p1 = new Point(0, 0), p2 = {x: 0, y: 0};
p1.moveTo(1, 1); // 直接调用 moveTo 时，this 是 p1
p1.moveTo.apply(p2, [10, 10]); // apply 调用 moveTo 时，this 绑定到 p2
</script>

使用 eval 调用
eval 中的 this 和 caller 调用者的 this 相同
<script>
function x() {
eval("console.log(this)");
}
x(); // ==> window 对象
x.apply({y:1}); // ==> {y:1} 对象
</script>
避免使用类似 var myeval = eval 间接使用 eval
（存在浏览器差异）

THIS 陷阱分析(1/2)
错误例子
<script>
var point = {
x : 0,
y : 0,
// 内部函数
var moveXY = function(x, y) {
// this 绑定到了哪里？
};
moveXY(x, y);
}
};
point.moveTo(1, 1);
point.x; // ==>0
x; // ==>1
</script>

THIS 陷阱分析(2/2)
使用 me/that 等帮助变量修复
<script>
var point = {
x : 0,
y : 0,
var me = this;
var moveXY = function(x, y) {
// 帮助变量避免 this 陷阱
me.x = x, me.y = y;
};
moveXY(x, y);
}
};
point.moveTo(1, 1);
point.x; // ==>1
</script>

比较对象
等号（含义是equality，等同）由双等号（==）表示，非等
号由感叹号加等号（!=）表示，都会进行类型转换。
全等号（含义是identity，恒等）（===）和非全等号（!==）
不执行类型转换。
表达式值表达式值
null == unde ned true "NaN" == NaN false
5 == NaN false NaN == NaN false
NaN != NaN true false == 0 true
true == 1 true true == 2 false
unde ned == 0 false null == 0 false
"5" == 5 true "5" === 5 false

对象作用域(1/2)
作用域指的是变量的适用范围。
ECMAScript 中的所有对象的所有属性和方法都是公用的。然
而，对象自身可以是局部变量（私有）。
<script>
(function closure() {
var color = "blue"; // 局部变量
alert(color);
})();
</script>
由于缺少私有作用域，开发者确定了一个规约，说明哪些属
性和方法应该被看做私有的。这种规约规定在属性前面或者
前后加下划线：
<script>
obj._color_ = "blue";
</script>

对象作用域(2/2)
<script>
// 全局作用域
function fn() {
// fn作用域
var max = 10;
return function bar(x) {
// bar作用域
if (x > max) {
console.log(x);
}
};
}
// 全局作用域
var f1 = fn, max = 100;
f1(15);
</script>

闭包
是指有权访问另外一个函数作用域中的变量的函数。创建闭
包的常见方式就是在一个函数内部创建另外一个函数。
<script>
var arr1 = new Array(100);
for (var i = 0; i < 100; i++) {
var value1 = i;
arr1[i] = {getValue: function() {return value1;}};
}
console.log(arr1[80].getValue()); // 99（普通写法无法得到期望结果）;
var arr2 = new Array(100);
for (var i = 0; i < 100; i++) {
(function() {
var value2 = i;
arr2[i] = {getValue: function() {return value2;}};
})();
}
console.log(arr2[80].getValue()); // 80（闭包写法Perfect！）;
</script>

原型链继承(1/2)
利用原型（prototype）实现链式继承，只能单继承，不支持
多继承。
<script>
function ClassA() {
}
ClassA.prototype.color = "blue";
ClassA.prototype.sayColor = function () {
alert(this.color);
};
function ClassB() {
}
ClassB.prototype = new ClassA(); // A的原型属性和实例属性作为B的原型属性。
</script>

原型链继承(2/2)
临时构造函数的改进
<script>
function ClassA() {
}
ClassA.prototype.color = "blue";
ClassA.prototype.sayColor = function () {
alert(this.color);
};
function F() {
}
F.prototype = ClassA.prototype;
function ClassB() {
}
ClassB.prototype = new F(); // A的原型属性作为B的原型属性。
ClassB.prototype.constructor = ClassB;
</script>

对象冒充继承(1/2)
调用超类构造函数实现对象冒充
<script>
function ClassZ() {
this.newMethod = ClassX;
this.newMethod();
delete this.newMethod;
this.newMethod = ClassY;
this.newMethod();
delete this.newMethod;
}
</script>
使用 call 实现对象冒充
<script>
function ClassB(sColor, sName) {
ClassA.call(this, sColor);
this.name = sName;
this.sayName = function () {
alert(this.name);
};
}
</script>

对象冒充继承(2/2)
使用 apply 实现对象冒充
<script>
ClassA.apply(this, new Array(sColor));
this.name = sName;
alert(this.name);
};
}
</script>
apply 实现对象冒充时可以利用 arguments
<script>
ClassA.apply(this, arguments);
this.name = sName;
alert(this.name);
};
}
</script>

混合继承
<script>
//继承函数
function inherit(C, P) {
var F = function () {};
F.prototype = P.prototype;
C.prototype = new F(); // 临时构造函数
C.prototype.constructor = C; // 修复constructor
C.uper = P; // 存储超类
}
function People(age) {
this.age = age;
}
People.prototype.getAge = function () {return this.age;};
function Student(age, num) {
Student.uber.call(this, age);
this.num = num;
}
inherit(Student, People); // 继承父构造函数
Student.prototype.getNum = function () {return this.num;};
</script>

不要忘记声明变量
时刻牢记用var声明变量
不声明就赋值，变量会挂靠在全局变量上（Web 环境下是
window）。
不声明变量，有可能导致执行逻辑与预期不符。
<script>
var b2016;
try {
a2016;
b2016 = 1;
}
catch (e) {
b2016 = 2;
}
console.log(b2016); // 期望1，却输出了2。
</script>

拓展阅读
《JavaScript 权威指南》
《JavaScript 高级程序设计》
《JavaScript DOM 编程艺术》
《JavaScript 设计模式》
《高性能 JavaScript》
回到本章开头

基本选择器
*
#id
element
.class
selector1,selector2,...,selectorN

层次选择器
parent > child
ancestor descendant
prev + next
prev ~ siblings

属性选择器
[name="value"]
[name!="value"]
[name]
[name^="value"]
[name$="value"]
[name="value"][name2="value2"]
[name*="value"]
[name~="word"]

过滤选择器
:eq
:not
:gt
:lt
: rst
:last
:even
:odd
:hidden
:visible
:checked
:selected

属性
attr
prop
removeAttr
removeProp
val

CSS
.addClass()
.removeClass()
.toggleClass()
.hasClass()
.css()
.show()
.hide()
.toggle()

高宽计算
.height()
.innerHeight()
.outerHeight()
.width()
.innerWidth()
.outerWidth()

位置计算
.o set()
.o setParent()
.position()
.scrollLeft()
.scrollTop()

DOM 操作
.html() vs .text()
.append() vs .appendTo()
.prepend() vs .prependTo()
.after() vs .insertAfter()
.before() vs .insertBefore()
.replaceAll() vs .replaceWith()
.empty()
.remove()
.detach()

动画效果
.fadeIn()
.fadeOut()
.fadeToggle()
.slideDown()
.slideUp()
.slideToggle()

DOM 遍历
.each()
.children()
. nd()
.siblings()
.parent()
.closest()

事件
.ready() & .resize() & .scroll()
.on() vs .o ()
.bind() vs .unbind()
.trigger() & .triggerHandler()
.click() & .dblclick()
.mousedown() vs .mouseup()
.mouseenter() vs .mouseleave()
.hover()
.focus() vs .blur()
.change()
.keydown() vs .keyup()
.keypress()

事件参数
e.type
e.data
e.target
e.currentTarget
e.preventDefault()
e.stopPropagation()
e.pageX
e.pageY
e.which

Ajax
async (default: true)
cache (default: true, false for dataType 'script' and
'jsonp')
type
url
jsonp, jsonpcallback
data, headers
dataType (default: Intelligent Guess (text, html, xml,
json, jsonp or script))
success, error, complete

Ajax 例子(1/2)
JSON
<script>
$.ajax({
cache: false, // false or true
type: 'get', // get or post
url: 'test.do?&_input_charset=utf-8',
data: {
id: 1001
},
dataType: 'json', // html or json
success: function(data) {
// do something here
},
error: function(xhr, status, error) {
}
});
</script>

Ajax 例子(2/2)
JSONP
<script>
$.ajax({
url: '//www.mysite.com/myapi/test.do?&_input_charset=utf-8',
jsonp: 'callback', // jQuery 中默认就是 callback，这里可以不用设置。
jsonpCallback: 'callback2016', // 一次性使用的临时函数名，可以不用设置。
data: {
id: 1001
},
dataType: 'jsonp',
success: function(data) {
},
error: function(xhr, status, error) {
}
});
</script>

工具函数
jQuery.each
jQuery.extend
jQuery.merge
jQuery.inArray
jQuery.isArray
jQuery.makeArray
jQuery.map
jQuery.parseJSON
jQuery.trim
jQuery.noop

易错分析
html()方法新引入片段中的JS会被执行。
parseJSON()严格遵循JSON标准，属性名必须是双引号，不
能解析带单引号的JSON数据。ajax()使用JSON时也类似。
VM 文件中单独的 $ 符号会导致 Velocity 引擎解析出错。
<script>
$.ajax({
success: function(html) {
}
});
</script> ✗
<script>
($).ajax({
success: function(html) {
}
});
</script> ✓

拓展阅读
《锋利的jQuery》
jQuery 官网 [http://jquery.com/]
回到本章开头

SeaJS 的设计理念
保持简单
遵守规范
避免重复
职责单一
约定胜于配置

定义模块
<script>
// 所有模块都通过 define 来定义
define(function(require, exports, module) {
// 通过 require 引入依赖
var $ = require('jquery');
var Spinning = require('./spinning');
// 通过 exports 对外提供接口
exports.doSomething = ...
// 或者通过 module.exports 提供整个接口
module.exports = ...
});
</script>
<script>
define('path/to/module',
['path/to/A', 'path/to/B'/*, ...*/],
function(require, exports, module) {
// 通过 require 引入依赖
var A = require('path/to/A');
var B = require('path/to/B');
/* 与前面对应地 require 其他模块... */
// module code goes here...
});
</script>

使用模块
<script>
seajs.use('path/to/module',
function(MyModule) {
// logic code goes here...
});
</script>
<script>
seajs.use(['path/to/A', 'path/to/B', 'path/to/C'/*, ...*/],
function(A, B, C/*, ...*/) {
// logic code goes here...
});
</script>

SeaJS 可用作模块加载器
page.html
<script>
seajs.use('./program');
</script>
program.js
var inc = require('./increment').increment;
var n = 1;
inc(n); // 2
});
increment.js
exports.increment = function(val) {
return val + 1;
};
});

拓展阅读
SeaJS 官网 [http://seajs.org/]
玉伯的个人站点 [https://lifesinger.wordpress.com/]
回到本章开头

冒泡(2/4)
bubble.css
#outer, #inner, #core {
position: relative;
display: inline-block;
vertical-align: top;
padding: 100px;
}
#outer > p, #inner > p, #core > p {
position: absolute;
margin-left: -30px;
left: 50%;
top: 0;
}
#outer {
background-color: blue;
}
#inner {
background-color: white;
}
#core {
background-color: red;
}

冒泡(3/4)
bubble.js
var core = document.getElementById('core');
core.addEventListener("click", function() {
alert('点击事件')
}, false);
function stopBubble(e) {
e.stopPropagation();
}

冒泡(4/4)
bubble.html
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="bubble.css"/>
</head>
<body>
<div id='outer' onclick="alert('outer');">
<p>outer!!!!!</p>
<div id='inner'
onclick="alert('inner'); stopBubble(arguments[0]);">
<p>inner!!!!!</p>
<div id='core' onclick="alert('core');">
<p>core!!!!!</p>
</div>
</div>
</div>
<script src="bubble.js"></script>
</body>
</html>

事件委托
<!doctype html>
<html>
<head>
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
$("div").on("click","p",function(){
$(this).slideToggle();
});
$("button").click(function(){
$("<p>A new paragraph.</p>").insertAfter("button");
});
});
</script>
</head>
<body>
<div style="background-color:yellow">
<p>A paragraph.</p>
<p>Click any p element to make it disappear. Including me.</p>
<button>Insert a new p element after this button</button>
</div>
</body>
</html>

查询页(1/3)
query.do
{
"data": [
{
"k": "text1",
"v": "value1"
},
{
"k": "<div></div>",
"v": "value2"
},
{
"k": "text3",
"v": "value3"
}
]
}

查询页(2/3)
queryPage.js
$(document).ready(function() {
var $el = $('<tr><td n="k"></td><td n="v"></td></tr>');
var opTpl = '<input type="button" value="delete">';
$('#result').on('click', 'input', function (e) {
$(this).closest('tr').remove();
}), $('#query').click(function() {
$('#result').empty(), $.ajax({
cache: false,
url: 'query.do?ie=utf-8&p1=' + encodeURIComponent('汉字'),
data: {p2: $('#input').val(), p3: '测试'},
dataType: 'json',
success: function(json) {
$.each(json.data, function(index, item) {
$el.clone().append(opTpl).appendTo($('#result'))
.find('[n]').text(function(index) {
return item[$(this).attr('n')];
});
});
}
});
});
});

查询页(3/3)
queryPage.html
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<div>
<input id="input" name="input" value=""/>
<button id="query">query</button>
</div>
<table id="result"></table>
<script src="queryPage.js"></script>
</body>
</html>

CHROME 调试(1/10)
打开 Chrome 开发者工具

CHROME 调试(2/10)
查看元素

CHROME 调试(3/10)
修改元素属性

CHROME 调试(4/10)
修改元素样式

CHROME 调试(5/10)
网络请求列表

CHROME 调试(6/10)
网络请求详情

CHROME 调试(7/10)
查看 JSON 请求

CHROME 调试(8/10)
资源面板和调试

CHROME 调试(10/10)
使用控制台学习JavaScript

JavaScript 教程

Recommended

Recommended

More Related Content

What's hot

What's hot (19)

Similar to JavaScript 教程

Similar to JavaScript 教程 (20)

JavaScript 教程