语法

1
var x =1; // 赋值语句
数据类型

  • number

  • 字符串

  • 布尔值（始终坚持使用===运算符）

  • null 和 undefined

  • 数组 [1, 2, 3.14, ‘hello’, null, true];

  • 对象 

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    var person = 
        {
    	  name:'wkn',
          age:22,
          tags:['java','python','javascript'],
          city:'guangzhou',
          'has-girlfriend':false,//有特殊字符要圈起来
          zipcode:null
    	}
    //获取时使用 person.name //wkn
字符串

用单引号或者双引号引起来的。如果字符串内部既包含'又包含"怎么办？可以用转义字符\来标识。

多行字符串可以用反引号引起来 

1
2
3
4
5
var s = "hello javascript";
s.length=20;
s[0]='h';
s.toUpperCase() = "HELLO JAVASCRIPT"  s.toLowerCase()
s.substring(0,4) = "hello";
数组
1
2
3
var arr = [1, 2, 3.14, 'Hello', null, true];
arr.length; // 6
//push()向Array的末尾添加若干元素，pop()则把Array的最后一个元素删除掉
Map 和 Set
1
2
3
4
5
6
7
8
9
10
11
var m = new Map([['Michael', 95], ['Bob', 75], ['Tracy', 85]]);
m.get('Michael'); // 95
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
var s = new Set([1, 2, 3, 3, '3']);
s; // Set {1, 2, 3, "3"}
iterable

ES6 引入新的iterable 类型，Array,map,set 都属于iterable 类型。具有iterable 类型的集合可以用for of 循环来遍历。

1
2
3
4
5
6
7
8
9
10
11
12
var a = ['A', 'B', 'C'];
var s = new Set(['A', 'B', 'C']);
var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);
for (var x of a) { // 遍历Array
    alert(x);
}
for (var x of s) { // 遍历Set
    alert(x);
}
for (var x of m) { // 遍历Map
    alert(x[0] + '=' + x[1]);
}

函数

1
2
3
4
5
6
7
function abs(x) {
    if (x >= 0) {
        return x;
    } else {
        return -x;
    }
}

由于JavaScript允许传入任意个参数而不影响调用，因此传入的参数比定义的参数多也没有问题，虽然函数内部并不需要这些参数。

argument and rest

JavaScript还有一个免费赠送的关键字arguments，它只在函数内部起作用，并且永远指向当前函数的调用者传入的所有参数。arguments类似Array但它不是一个Array

1
2
3
4
5
6
7
8
function foo(x) {
    alert(x); // 10
    for (var i=0; i<arguments.length; i++) {
        alert(arguments[i]); // 10, 20, 30
    }
}
foo(10, 20, 30);
//为了获得剩下的参数，使用rest 关键字。rest参数只能写在最后，前面用...标识，从运行结果可知，传入的参数先绑定a、b，多余的参数以数组形式交给变量rest。
作用域

由于JavaScript的变量作用域实际上是函数内部，我们在for循环等语句块中是无法定义具有局部作用域的变量的。为了解决块级作用域，ES6引入了新的关键字let，用let替代var可以申明一个块级作用域的变量。

方法
1
2
3
4
5
6
7
8
9
10
var xiaoming = {
    name: '小明',
    birth: 1990,
    age: function () {
        var y = new Date().getFullYear();
        return y - this.birth;
    }
};
xiaoming.age; // function xiaoming.age().
xiaoming.age(); // 今年调用是25,明年调用就变成26了.

标准对象

JSON

序列化（将对象转化为JSON 字符串）

1
2
3
4
5
6
7
8
9
10
11
12
var xiaoming = {
    name: '小明',
    age: 14,
    gender: true,
    height: 1.65,
    grade: null,
    'middle-school': '\"W3C\" Middle School',
    skills: ['JavaScript', 'Java', 'Python', 'Lisp']
};
JSON.stringify(xiaoming); // '{"name":"小明","age":14,"gender":true,"height":1.65,"grade":null,"middle-school":"\"W3C\" Middle School","skills":["JavaScript","Java","Python","Lisp"]}'
//调整下格式。
JSON.stringify(xiaoming, null, '  ');

反序列化

JSON 字符串变成js 对象

1
2
3
4
JSON.parse('[1,2,3,true]'); // [1, 2, 3, true]
JSON.parse('{"name":"小明","age":14}'); // Object {name: '小明', age: 14}
JSON.parse('true'); // true
JSON.parse('123.45'); // 123.45

浏览器

window 对象

window对象不仅充当全局作用域，还标识浏览器窗口。window对象有innerWidth和innerHeight属性，可以获取浏览器窗口的内部宽度和高度。内部宽高是指除去菜单栏、工具栏、边框等占位元素后，用于显示网页的净宽高。还有一个outerWidth和outerHeight属性，可以获取浏览器窗口的整个宽高。

navigator对象表示浏览器的信息，最常用的属性包括：

  • navigator.appName：浏览器名称；
  • navigator.appVersion：浏览器版本；
  • navigator.language：浏览器设置的语言；
  • navigator.platform：操作系统类型；
  • navigator.userAgent：浏览器设定的User-Agent字符串。
screen 对象

screen对象表示屏幕的信息，常用的属性有：

  • screen.width：屏幕宽度，以像素为单位；
  • screen.height：屏幕高度，以像素为单位；
  • screen.colorDepth：返回颜色位数，如8、16、24。
location
1
2
3
4
5
6
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'
document

document对象表示当前页面。由于HTML在浏览器中以DOM形式表示为树形结构，document对象就是整个DOM树的根节点。

document的title属性是从HTML文档中的<title>xxx</title>读取的，但是可以动态改变。

document对象还有一个cookie属性，可以获取当前页面的Cookie。

操作dom

HTML 文档被浏览器解析后就是一颗DOM树。操作ＤＯＭ 节点实际上就是更新，遍历，添加，删除的操作。

在操作一个DOM节点前，我们需要通过各种方式先拿到这个DOM节点。最常用的方法是document.getElementById()（返回一个结点）和document.getElementsByTagName()（返回一组），以及CSS选择器document.getElementsByClassName()（返回一组）。

更新DOM

修改内容1.修改innerHTML 属性 2.修改innerText 或者textContext属性。

修改css: DOM节点的style属性对应所有的CSS，可以直接获取或设置。因为CSS允许font-size这样的名称，但它并非JavaScript有效的属性名，所以需要在JavaScript中改写为驼峰式命名fontSize.

1
2
3
4
5
6
// 获取<p id="p-id">...</p>
var p = document.getElementById('p-id');
// 设置CSS:
p.style.color = '#ff0000';
p.style.fontSize = '20px';
p.style.paddingTop = '2em';

插入DOM

1如果这个DOM节点是空的，例如，<div></div>，那么，直接使用innerHTML = '<span>child</span>'就可以修改DOM节点的内容，相当于“插入”了新的DOM节点。

2.非空

（1） 使用 appendChild

(2) 如果我们要把子节点插入到指定的位置怎么办？可以使用parentElement.insertBefore(newElement, referenceElement);，子节点会插入到referenceElement之前。

删除DOM

要删除一个节点，首先要获得该节点本身以及它的父节点，然后，调用父节点的removeChild把自己删掉.

操作表单

1
2
3
4
5
6
7
8
9
10
11
文本框，对应的<input type="text">，用于输入文本；

口令框，对应的<input type="password">，用于输入口令；

单选框，对应的<input type="radio">，用于选择一项；

复选框，对应的<input type="checkbox">，用于选择多项；

下拉框，对应的<select>，用于选择一项；

隐藏文本，对应的<input type="hidden">，用户不可见，但表单提交时会把隐藏文本发送到服务器。

获取值

如果获取了一个input结点的引用，直接调用value 获取对应用户输入值。这种方式可以应用于text、password、hidden以及select。但是，对于单选框和复选框，value属性返回的永远是HTML预设的值，而我们需要获得的实际是用户是否“勾上了”选项，所以应该用checked判断。

提交表单

  • 通过

    元素的submit（）方法提交一个表单，例如相应一个

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <!-- HTML -->
    <form id="test-form">
        <input type="text" name="test">
        <button type="button" onclick="doSubmitForm()">Submit</button>
    </form>

    <script>
    function doSubmitForm() {
        var form = document.getElementById('test-form');
        // 可以在此修改form的input...
        // 提交form:
        form.submit();
    }
    </script>

  • 相应

    本身的onsubmit事件，在提交form 时作修改：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <form id="test-form" onsubmit="return checkForm()">
        <input type="text" name="test">
        <button type="submit">Submit</button>
    </form>

    <script>
    function checkForm() {
        var form = document.getElementById('test-form');
        // 可以在此修改form的input...
        // 继续下一步:
        return true;
    }
    </script>

AJAX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
function success(text) {
    var textarea = document.getElementById('test-response-text');
    textarea.value = text;
}

function fail(code) {
    var textarea = document.getElementById('test-response-text');
    textarea.value = 'Error code: ' + code;
}

var request = new XMLHttpRequest(); // 新建XMLHttpRequest对象

request.onreadystatechange = function () { // 状态发生变化时，函数被回调
    if (request.readyState === 4) { // 成功完成
        // 判断响应结果:
        if (request.status === 200) {
            // 成功，通过responseText拿到响应的文本:
            return success(request.responseText);
        } else {
            // 失败，根据响应码判断失败原因:
            return fail(request.status);
        }
    } else {
        // HTTP请求还在继续...
    }
}

// 发送请求:
request.open('GET', '/api/categories');
request.send();

alert('请求已发送，请等待响应...');

当创建了XMLHttpRequest对象后，要先设置onreadystatechange的回调函数。在回调函数中，通常我们只需通过readyState === 4判断请求是否完成，如果已完成，再根据status === 200判断是否是一个成功的响应。

XMLHttpRequest对象的open()方法有3个参数，第一个参数指定是GET还是POST，第二个参数指定URL地址，第三个参数指定是否使用异步，默认是true，所以不用写.

最后调用send()方法才真正发送请求。GET请求不需要参数，POST请求需要把body部分以字符串或者FormData对象传进去。