本文共 2037 字，大约阅读时间需要 6 分钟。

JavaScript???????

1. JavaScript??

JavaScript(??JS)????????????HTML?CSS??????????????Java?????ECMAScript????????ES6?JS??????????????????

2. JS?????

2.1 ???JS??

alert("Hello world!!");

??JS???????????????

2.2 ????

console.log("??????"); // ?????

?????????????????F12??

3. ???????

3.1 ????

JS???????number?string?boolean?null?undefined?object?symbol?JS????????????Infinity?NaN????????????????Math.abs????

3.2 ?????

• ??????????????????????????undefined?
• ?????????????????????????????????????????????hasOwnProperty?

4. ??????

4.1 ???

• ?????????????
• ??????\'?\n?\t?\u####?\x41?
• ???????``???????????

4.2 ??

• ?????????????undefined?
• ?????push()?pop()?unshift()?shift()?sort()?reverse()?concat()?join()?

5. ????

if (??) {
    // ????
} else {
    // ??????
}
while (??) {
    // ????
}
for (?????; ????; ????) {
    // ?????
}

6. ES6???

6.1 Map?Set

const map = new Map([[?tom?, 100], [?cat?, 200]]);
const name = map.get(?tom?);

6.2 Iterator

for (const item of map) {
    // ??Map?
}

7. ?????

7.1 ????

• ??????function(abs(x) { ... })
• ?????var abs = function(x) { ... }
• ?????const abs = (x) => x > 0 ? x : 0

7.2 ??

function outer() {
    let x = 2;
    function inner() {
        console.log(x);
    }
    return inner;
}

8. ??????????

• var: ??????????????
• let/const: ???????????????
• ????????????????

9. DOM??

9.1 ????

document.getElementById('id');
document.getElementsByTagName('???');
document.querySelector('???');

9.2 ????

• ?????element.textContent = '???'
• ?????element.appendChild(newNode)
• ?????element.removeChild(oldNode)

10. ???????

10.1 ????

form.method = 'POST';
form.action = '/????';

11. JSON?AJAX

11.1 JSON??

{
    "key": "value"
}

• ???JSON.stringify(obj) ? JSON.parse(str)?

11.2 AJAX

const xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) {
        console.log(xhr.responseText);
    }
};
xhr.open('GET', '/api', true);
xhr.send();

12. jQuery??

12.1 ????

$(document).ready(function() {
    $('.???').css({'???':'??'});
});

12.2 DOM??

$('div').hide().show();

?????????????JavaScript???????????