JavaScript
JavaScript是世界上最流行的脚本语言，是一种运行在浏览器中的解释型的编程语言。在Web世界里，只有JavaScript能跨平台、跨浏览器驱动网页，与用户交互。目前，新兴的Node.js把JavaScript引入到了服务器端，JavaScript已经变成了全能型选手。
由于网景公司希望能在静态HTML页面上添加一些动态效果，于是叫Brendan Eich这哥们在两周之内设计出了JavaScript语言
JavaScript的标准——ECMAScript，ECMAScript是javaScript语言的标准，而JavaScript是网景公司对ECMAScript标准的一种实现。讲到JavaScript的版本，实际上就是说它实现了ECMAScript标准的哪个版本。
JavaScript代码可以直接嵌在网页的任何地方，通常会选择把javaScript代码放到< head >中。由< script >...< /script >包含的代码就是javaScript代码，它将直接被浏览器执行。
第二个方法是把JavaScript代码放到一个单独的.js文件，然后在HTML中通过< script src = ""> < /script>引入该.js文件
要让浏览器运行javaScript，必须先有一个HTML页面，在HTML页面中引入JavaScript,然后，让浏览器加载该HTML页面，就可以执行JavaScript代码了。
调试
在网页开发者工具中的控制台(console)里可以直接输入JavaScript代码执行
或者在加载的javaScript代码里直接打断点
Sources Panel的左边是内容源，包含页面中的各种资源，又分Sources和Content scripts。Sources就是页面本身包含的各种资源，它是按照页面中出现的域来组织的，这是我们要关注的。异步加载的js文件，在加载后也会出现在这里。Content Scripts是Chrome的一种扩展程序，它是按照扩展的ID来组织的。
语法
var x = 1;
var lastname="Doe", age=30, job="carpenter";
重新声明 JavaScript 变量，该变量的值不会丢失：
//注释
NaN //特殊的Number
isNan()
null // 表示一个"空"的值
'' //表示长度为0的字符串
undefined //表示值未定义
数组可以包括任意数据类型
var arr =[1,2,3.14,'Hello',null,true]
arr[0]
arr[1]
JavaScript对象是一组由键-值组成的无序集合
var person={
name:'Bob',
age :20
};
键都是字符串类型，值可以是任意数据类型。键又称为对象的属性。要获取一个对象的属性，我们用对象变量.属性名的方式：
person.name;
变量本身类型不固定的语言称之为动态语言。
如果一个变量没有通过var申明就被使用，那么该变量自动被申明为全局变量
在strict模式下运行的JavaScript代码，强制通过var申明变量，未使用var申明变量就使用的，将导致运行错误。
启用strict模式的方法是在JavaScript代码的第一行写上：
'use strict';
+可以把字符串连接起来
字符串是不可变的，如果对字符串的某个索引赋值，不会有任何错误，也没有任何效果。
数组
a.length
a.indexOf(10)//返回元素10的索引
a.slice(0,3)//索引0,1,2对应的元素(不包括索引3)
a.slice(3)//从索引3开始到结束(包括索引3)
a.push(1)//向数组a的末尾添加元素
a.pop()//把a的最后一个元素删除掉
a.unshift('a',2)//往数组a的头部添加元素
a.shift()//删掉第一个元素
a.splice(2,2)//从索引2开始删除2个元素
a.splice(2,3,'Google','Facebook')//从索引2开始删除3个元素，然后再添加两个元素
var b= a.concat([1,2,3])//拼接成新的数组
concat()方法可以接收任意个元素和Array，并且自动把Array拆开，然后全部添加到新的Array里：
join()它把Array的每个元素都用指定的字符串连接起来，然后返回连接后的字符串：
var arr = ['A','B','C',1,2,3]
aee.join('-')
如果数组的某个元素又是一个数组，则可以形成多维数组
var arr=[[1,2,3],[400,500,600],'-']
对于特殊属性名，如包含特殊字符，就必须用''括起来：
var xiaohong={
name： '小红',
'middle-school': 'No.1 Middle School'
}
xiaohong['middle-school']
xiaohong['name']
xiaohong.name
delete xiaohong.name
'name' in xiaohong //in判断一个属性存在，这个属性不一定是xiaohong的，它可能是xiaohong继承得到的
要判断一个属性是否是xiaohong自身拥有的，可以用hasOwnPropert()
xiaohong.hasOwnProperty('name')
for循环
1.
for(i=0;i< arr.length;i++)
{
}
2.把一个对象的所有属性依次循环出来
for(var key in o)
{
console.log(key);
}
JavaScript的默认对象表示方式{}可以视为其他语言的Map或Dict的数据结构，即一组键值对。JavaScript的对象的键必须是字符串，但实际上Number或其他数据类型作为键也是合理的，为了解决该问题，引入了新的数据类型Map。
var m = new Map([['Michael', 95], ['Bob', 75], ['Tracy', 85]]);
m.get('Michael')
或者
var m = new Map(); // 空Map
m.set('Adam', 67); // 添加新的key-value
m.set('Bob', 59);
m.has('Adam'); // 是否存在key 'Adam': true
m.get('Adam'); // 67
m.delete('Adam'); // 删除key 'Adam'
m.get('Adam'); // undefined
Set（集合）
在set中，没有重复的元素
var s = new Set([1,2,3,3,'3']);
iterable
遍历Array可以采用下标循环，遍历Map和Set就无法使用。为了统一集合类型，引入了新的iterable类型，Array，Map和Set都属于iterable类型
for(var x of a){//a是一iterable类型
console.log(x)
}
更好的方式是直接调用iterable内置的forEach方法
var a = ['A', 'B', 'C'];
a.forEach(function (element, index, array) {
// element: 指向当前元素的值
// index: 指向当前索引
// array: 指向Array对象本身
console.log(element + ', index = ' + index);
});
var s = new Set(['A', 'B', 'C']);
s.forEach(function (element, sameElement, set) {
console.log(element);
});
var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);
m.forEach(function (value, key, map) {
console.log(value);
});
函数：
function abs(x){
if(x>0){
return x；
}
else{
return -x;
}
}
var abs = function (x) {
if (x >= 0) {
return x;
} else {
return -x;
}
};
由于JavaScript允许传入任意个参数而不影响调用，因而传入的参数比定义的参数多也没有问题，虽然函数内部并不需要这些参数：
abs(10,'dsadas')//返回10
传入的参数比定义的少也咩有问题：
abs();//返回NaN
arguments
arguments只在函数内部起作用，并且永远指向当前函数的调用者传入的所有参数；
JavaScript的函数可以嵌套，此时内部函数可以访问外部函数定义的变量。
一个var申明函数内部用到的所有变量。
function foo() {
var
x = 1, // x初始化为1
y = x + 1, // y初始化为2
z, i; // z和i为undefined
// 其他语句:
for (i=0; i<100; i++) {
...
}
}
JavaScript默认有一个全局对象window,全局作用域的变量实际上被绑定到window的一个属性：
名字空间：
全局变量会绑定到window上，不同的JavaScript文件如果使用了相同的全局变量， 或者定义了相同名字的顶层函数，都会造成命名冲突，并且很难被发现。 减少冲突的一个方法是把自己的所有变量和函数全部绑定到一个全局变量中
如：
var MYAPP={};
MYAPP.name= 'myapp';
MYAPP.version = 1.0;
MYAPP.foo = function(){
return 'foo';
}
用let代替var可以申明一个块级作用域的变量
const PI=3.14;//常量
解构赋值，直接对多个变量同时赋值
var [x,y,z] = ['hello','javaScript','ES6']
在一个对象中绑定函数，称为这个对象的方法
在一个方法内部,this是一个特殊变量，它始终指向当前对象
function getAge() {
var y = new Date().getFullYear();
return y - this.birth;
}
var xiaoming = {
name: '小明',
birth: 1990,
age: getAge
};
xiaoming.age(); // 25, 正常结果
高阶函数
JavaScript的函数其实都指向某个变量，既然变量可以指向函数，函数的参数能接收变量，那么一个函数就可以接收另一个函数作为参数，这种函数就称为高阶函数。
function add(x,y,f)
{
return f(x)+f(y)
}
map/reduce
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
var results = arr.map(pow); //[1,4,9,...,81]
arr.map(f) = [f(arr[0]),f(arr[1]),...,f(arr[arr.length-1])];
map()作为高阶函数，事实上它把运算规则抽象了。
map是对数组元素调用同一函数
reduce
[x1, x2, x3, x4].reduce(f) = f(f(f(x1, x2), x3), x4)
fliter
用于把数组的某些元素过滤掉，然后返回剩下的元素。
arr.fliter(f)//返回的结果是arr的一子集
fliter()接收的回调函数，其实可以有多个参数，通常我们仅用第一个参数，表示数组的某个元素。回调函数还可以接收另外两个参数，表示元素的位置和数组本身
高阶函数除了可以接受函数作为参数外，还可以把函数作为结果值返回。
typeof操作符获取对象的类型
typrof 123;
包装对象用new创建
var n =new Number(123);//123，生成了新的包装类型
typeof n //'object'
Data对象用来表示日期和时间
var now = new Date();
now; // Wed Jun 24 2015 19:49:22 GMT+0800 (CST)
var d = new Date(2015, 5, 19, 20, 15, 30, 123);
JavaScript的Date对象月份值从0开始，牢记0=1月，1=2月，2=3月，……，11=12月。
在正则表达式中，如果直接给出字符，就是精确匹配。用\d可以匹配一个数字，\w可以匹配一个字母或数字； 。.可以匹配任意字符。
要匹配变长的字符，在正则表达式中，用*表示任意个字符，用+表示至少一个字符，用？表示0个或1个字符，用{n}表示n个字符，用{n,m}表示n-m个字符；\s可以匹配一个空格
,\s+表示至少有一个空格
要做更精确地匹配，可以用[]表示范围，比如：
[0-9a-zA-Z_]可以匹配一个数字、字母或者下划线；
[0-9a-zA-Z_]+可以匹配至少由一个数字、字母或者下划线组成的字符串
[a-zA-Z_$][0-9a-zA-Z_$]*可以匹配由字母或下划线、\(开头，后接任意个由一个数字、字母或者下划线、\)组成的字符串，也就是JavaScript允许的变量名；
[a-zA-Z_$][0-9a-zA-Z_$]{0, 19}更精确地限制了变量的长度是1-20个字符（前面1个字符+后面最多19个字符）。
A|B可以匹配A或B，所以(J|j)ava(S|s)cript可以匹配'JavaScript'、'Javascript'、'javaScript'或者'javascript'。
表示行的开头，\d表示必须以数字开头。
$表示行的结束， \d$表示必须以数字结束。
你可能注意到了，js也可以匹配'jsp'，但是加上^js$就变成了整行匹配，就只能匹配'js'了。
JavaScript有两种方式创建一个正则表达式：
var re1 = /ABC\-001/;
var re2 = new RegExp('ABC\ \-001');
var re = /^\d{3}-\d{3,8}$/;
re.test('010-12345'); // true
RegExp对象的test()方法用于测试给定的字符串是否符合条件。
切分字符串
用正则表达式切分字符串比用固定的字符更灵活，请看正常的切分代码：
'a b c'.split(' '); // ['a', 'b', '', '', 'c']
嗯，无法识别连续的空格，用正则表达式试试：
'a b c'.split(/\s+/); // ['a', 'b', 'c']
无论多少个空格都可以正常分割。加入,试试：
'a,b, c d'.split(/[\s\,]+/); // ['a', 'b', 'c', 'd']
再加入;试试：
'a,b;; c d'.split(/[\s\,\;]+/); // ['a', 'b', 'c', 'd']
var re = /^(\d{3})-(\d{3,8})$/;//分别定义了两个组，可以直接从匹配的字符串中提取出区号和本地号码
re.exec('010-12345'); // ['010-12345', '010', '12345']
JSON是JavaScript Object Notation缩写，是一种数据交换格式
JSON实际上是JavaScript的一个子集。在JSON中，一共就几种数据结构：
number,boolen,string,null,array,object
JSON定死了字符集必须是UTF-8。字符串规定必须用双引号""
JavaScript内置了JSON的解析
把任何JavaScript对象变成JSON,就是把这个对象序列化为一个JSON格式的字符串，这样才能通过网络传递给其他计算机。
var s = JSON.stringify(xiaoming);//将对象xiaoming序列化成JSON格式的字符串
var s = JSON.stringify(xiaoming, null, ' ');要输出得好看一些，加上参数，按缩进输出
JSON.stringify(xiaoming, ['name', 'skills'], ' ');//只输出'name'和'skill'属性
function conver(key,value){
return 0 ;
}
JSON。stringify(xiaoming,conver,' ');传入一个函数，这样对象的每个键值对都会被函数先处理
JSON.parse()把一个JSON格式的字符串变成一个JavaScript对象
JavaScript没有类的概念，所有对象都是实力，所谓继承关系不过是把一个对象的原型指向另一个对象而已。
var Student = {
name: 'Robot',
height: 1.2,
run: function () {
console.log(this.name + ' is running...');
}
};
var Bird = {
fly: function () {
console.log(this.name + ' is flying...');
}
};
var xiaoming = {
name: '小明'
};
xiaoming.__proto__=Student;//把xiaoming的原型指向了对象Student
xiaoming.__proto__=Bird;//变成一只鸟了
var xiaomign=Object.create(Bird);//创建一个基于Bird的新对象
xiaoming.fly()
浏览器
window对象不但充当全局作用域，而且表示浏览器窗口。
window对象有innerWidth和innerHeight属性，可以获取浏览器窗口的内部宽度和高度。对应的，还有一个outerWidth和outerHeight属性，可以获取浏览器窗口的整个宽高。
navigator对象表示浏览器的信息
screen对象表示屏幕的信息
location对象表示当前页面的URL信息
location.href获取当前完整的URL
location.protocol; // 'http'
location.host; // 'www.example.com'
location.port; // '8080'
location.pathname; // '/path/index.html'
location.search; // '?a=1&b=2'
location.hash; // 'TOP'
要加载一个新页面，可以调用location.assign()。如果要重新加载当前页面，调用location.reload()方法非常方便。
document对象表示当前页面。
用document对象提供的getElemnetById()和getElementsByTagName()可以按ID获得一个DOM节点和按Tag名称获得一组DOM节点.
document对象还有一个cookie属性，可以获取当前页面的Cookie.
Cookie,指某些网站为了辨别用户身份，进行session跟踪而存储在用户本地终端上的数据(通常经过加密)
若引入的脚本有相同的函数,则调用的是最后引入的脚本里的函数
//函数内嵌
function add() {
var counter = 0;
function plus() {counter += 1;}
plus();
return counter;
}
//闭包
var add = (function () {
var counter = 0;
return function fun() {return counter += 1;}
})();
0点击文本!
点击文本!
var person={firstname:"John",lastname:"Doe",age:50,eyecolor:"blue"};
或者
function person(firstname,lastname,age,eyecolor){
this.firstname=firstname;
this.lastname=lastname;
this.age=age;
this.eyecolor=eyecolor;
}
myFather=new person("John","Doe",50,"blue");
事件监听
document.getElementById("myBtn").addEventListener("click", displayDate);等价
function displayDate(){
document.getElementById("demo").innerHTML=Date();
}
document.getElementById("myBtn").addEventListener("click", function() {
myFunction(p1, p2);//带参数addEventListener
});
function myFunction(a, b) {
var result = a * b;
document.getElementById("demo").innerHTML = result;
}
//当您声明新变量时，可以使用关键词 "new" 来声明其类型：
var carname=new String;
var x= new Number;
var y= new Boolean;
var person= new Object;
//值赋给尚未声明的变量，该变量将被自动作为全局变量声明。,可以通过delete删除
carname="Volvo";//将声明一个全局变量carname，即使它在函数内执行
常用HTML事件列表
onchange HTML 元素改变
onclick 用户点击 HTML 元素
onmouseover 用户在一个HTML元素上移动鼠标
onmouseout 用户从一个HTML元素上移开鼠标
onkeydown 用户按下键盘按键
onload 浏览器已完成页面的加载
//constructor 属性返回所有 JavaScript 变量的构造函数。
"dssd".constructor
异常处理
//trt catch
var x;
try {
if(x == "") throw "值为空";
if(isNaN(x)) throw "不是数字";
x = Number(x);
if(x < 5) throw "太小";
if(x > 10) throw "太大";
}
catch(err) {
document.getElementById("demo").innerHTML = "错误: " + err;
}
JavaScript 中，变量可以在使用后声明，也就是变量可以先使用再声明。但最好先声明再使用
因为变量提升：函数声明和变量声明总是会被解释器悄悄地被"提升"到方法体的最顶部。
(function () {
var x = "Hello!!";
console.log(x);
})();// 函数自调用
/*通过 id 找到 HTML 元素
var x=document.getElementById("intro");
通过标签名找到 HTML 元素
var x=document.getElementById("main");
var y=x.getElementsByTagName("p");
通过类名找到 HTML 元素
你好世界!
x=document.getElementsByClassName("intro");
*/
使用函数构造器来创建类对象
JavaScript 不定义不同类型的数字,只有64位浮点格式
Array类似python list,可以有不同数据类型的元素
可以创建数组方法，类似于map
/*
所有浏览器都支持 window 对象。它表示浏览器窗口。
所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
全局变量是 window 对象的属性。
全局函数是 window 对象的方法。
window.navigator 对象包含有关访问者浏览器的信息。
*/
//Cookie 用于存储 web 页面的用户信息。Cookie 以名/值对形式存储
//jQuery 允许链接（链式语法）。链接（Chaining）是一种在同一对象上执行多个任务的便捷方法。
浙公网安备 33010602011771号