JavaScript入門經典（第7版）讀書筆記

斷斷續續看了十來天，終於看完了，仍是學到些東西，這本書仍是不錯的，各方面都有涉及。javascript

1 JavaScript 基礎

1.1 JavaScript 簡介

1.1.1 Web 腳本編程基礎

服務器端和客戶端編程
JavaScript 簡介
JavaScript 起源
瀏覽器的競爭
<script> 標籤
- html5 script 標籤不用指定屬性
DOM 簡介
W3C 和標準兼容
window 和 document 對象
對象表示法
與用戶交互
document.write()
讀取 document 對象的屬性

1.2 建立簡單的腳本

1.2.1 在 Web 頁面裏添加 JavaScript

把代碼放在 script 標籤內
經過 src 引用外部 js 文件

1.2.2 編寫 JavaScript 語句

代碼註釋
- 通常文件名後綴 .min.js 是去掉了空白和註釋

1.2.3 變量

1.2.4 操做符

算術操做符
操做符優先級
對字符串使用操做符+

1.2.5 捕獲鼠標事件

onClick 事件處理器
- HTML 裏不區分大小寫,因此屬性名 onclick 小寫也能夠
onMouseOver 和 onMouseOut 事件處理器
- 使用 this 引用 HTML 元素 html
```
<img src="1.png" onmouseover="this.src='2.png';">
```

1.3 使用函數

1.3.1 基本語法

1.3.2 調用函數

把 JavaScript 代碼放置到頁面的<head>區域
- 函數放到文檔開頭,確保在調用前已經被定義
- 函數若是屢次定義,會使用最後的定義
給函數傳遞參數
多參數
從函數返回值
- 若是沒有 return, 會返回 undefined

匿名函數

function sayHello() {
    alert("hello");
}

var sayHello = function() {
    alert("hello");
}

1.4 函數的更多知識

1.4.1 變量做用域

使用 this 關鍵字
使用 let 和 const
- 塊級做用域 let
用 const 關鍵字聲明變量

1.4.2 箭頭函數

var sayHello = function() { alert("hello"); };

var sayHello = () => alert('hello');

var myFunc = x => alert(x);

myFunc = (x, y) => alert(x + y);

myFunc = (x, y, z) => {
    let area = x*y + 5;
    let boxes = area / z;
    return boxes;
}

1.4.3 設置默認參數

1.5 DOM 對象和內置對象

1.5.1 與用戶交互

alert()
- 術語「模態」的含義
- confirm() html5
```
var answer = confirm("are you ok?");
```

prompt()

var answer = prompt("what is your full name?");
var answer = prompt("what is your full name?", "cai ji");

1.5.2 根據 id 選擇元素

var myDiv = document.getElementById("div1");

innerHTML 屬性

var myDivContents = document.getElementById("div1").innerHTML;
document.getElementById("div1").innerHTML = "heheda";

1.5.3 訪問瀏覽器歷史記錄

alert(history.length);
history.forward();
history.backward();
history.go(-3);
history.go(2);
history.go("baidu.com");

1.5.4 使用 location 對象

location 的屬性 .href .protocol .host .hostnmae .port .pathname .search .hash

用 location 對象導航
- 兩種導航到新頁面的方式 location.href = 「www.baidu.com」; location.replace(「www.baidu.com」); 前者會保留舊頁面在歷史記錄裏
刷新頁面
- location.reload(); 避免使用緩存 location.reload(true);
獲取瀏覽器信息: navigator 對象
- navigator 保留瀏覽器自己的數據
- navigator 的屬性 .appName .appCodeName .appVersion .language .cookieEnabled .cpuClass .onLine .platform .plugins.length
- navigator 返回的信息並不許確

1.5.5 日期和時間

建立具備當前日期和時間的 Date 對象

var mydate = new Date();
var year = mydate.getFullYear();
var month = mydate.getMonth();
var date = mydate.getDate();
var day = mydate.getDay();    // 星期
var hours = mydate.getHours();
var minutes = mydate.getMinutes();
var seconds = mydate.getSeconds();

建立具備指定日期和時間的 Date 對象

var d1 = new Date("October 22, 1995 10:57:22");
var d2 = new Date(95, 9, 22);
var d3 = new Date(95, 9, 22, 10, 57, 0);

設置和編輯日期與時間

var mydate = new Date();
document.write(mydate.getDay());
mydate.setDate(15);
document.write(mydate.getDat());
document.write(mydate.toDateString() + mydate.toTimeString());

利用 Math 對象簡化運算
- Math 的一些常見方法 .ceil(n) .floor(n) .max(a, b, c, …) .min(a, b, c, …) .round(n) 四捨五入 .random() 返回一個 0 到 1 的隨機數
取整
得到最大值和最小值

生成隨機數

function myRand(range) {
    return Math.round(Math.random() * range);
}

數字常數

.E 天然常數,約爲 2.718 .LN2 2 的天然對數,約爲 0.693 .LN10 10 的天然對數,約爲 2.302 .LOG2E 以 2 爲底 e 的對數,約爲 1.442 .LOG10E 以 10 爲底 e 的對數,約爲 0.434 .PI 圓周率,約爲 3.14159 .SQRT1₂ 2 的平方根的倒數,約爲 0.707 .SQRT2 2 的平方根,約爲 1.414 java

關鍵字 with

with (Math) {
    var myRand = random();
    var biggest = max(2, 3, 5);
    var height = round(11.22);
}

2 JavaScript 編程

2.1 數字和字符串

2.1.1 數值

整數
浮點數
十六進制數,二進制數和八進制數

2.1.2 全局方法

toString()

var x = 13;
alert(x.toString());
alert(x.toString(16));
(11).toString();

toFixed()

x.toFixed(0); // "13"
x.toFixed(3); // "13.000"

toExponential()

var num = 666;
num.toExponential(4); // "6.6600e+2"
num.toExponential(6); // "6.660000e+2"

2.1.3 Number 對象

Number.isNaN()
- 當試圖把一些非數值當作數值處理,卻沒法獲得數值時,返回值就是 NaN
- 示例 node
```
Number.isNaN(3); //false
Number.isNaN(0 / 0); // true
```
Number.isInteger()
Number.parseFloat() 和 Number.parseInt()
- 解析的字符串首字符若是是一個數字,函數會持續解析到數字結束
```
Number.parseFloat("21.4"); // 21.4
Number.parseInt("12px",10); // 12
```
無窮大
- 表示無窮的關鍵字 Infinity -Infinity
- isFinite() 會把參數轉換爲數值,若是結果是 NaN,正無窮大或負無窮大,函數返回 false

2.1.4 Number() 函數

該函數會盡量返回一個對等的數值,若是失敗,返回 NaN

2.1.5 布爾值

若是布爾值被用做計算,true 爲 1, false 爲 0
JS 裏被當作 false 的值
1. 布爾值 false
2. 未定義 undefined
3. null
4. 0
5. NaN
6. 「」

非操做符

2.1.6 null(空) 和 undefined(未定義)

undefined 不是關鍵字,是未定義的全局變量

2.2 操做字符串

2.2.1 字符串

length 屬性
轉義序列
字符串方法
- concat
- indexOf
- lastIndexOf
- repeat var inStr = 「a b」; var outStr = inStr.repeat(3)
- replace
- split
- substr string1.substr(4, 11); string1.substr(4);
- toLowerCase
- toUpperCase

2.2.2 模板字符串

var name = "aa";
var course = "bb";
var myString = `hell ${name}, welcome ${course}`;

2.3 數組

2.3.1 數組

JS 的數組可以存聽任何數據類型

建立新數組
- 數組也是一個對象 var myArray = new Array(); var myArray = [];

初始化數組

var myArray = ['111', '22'];
myArray[20] = "333e";
myArray.length

數組的方法
- concat
- join 把數組的所有元素鏈接在一塊兒造成一個字符串 var longDay = myArray.join(「-」);
- toString 至關於 myArray.join(「,」);
- indexOf 沒有找到返回-1
- lastIndexOf
- slice 能夠爲負數
- sort 把數組元素按字母順序排列
- splice myArray.splice(2, 1, 「heheda」); 指向索引爲 2 的元素,刪除 1 個元素,插入一個新元素,返回被刪除的元素

2.3.2 如何遍歷數組

使用 forEach()
- 接受一個函數做爲參數,並將函數依次應用與數組中的每一個元素 python
```
var myArray = [1, 2, 3, 4];
function cube(x) {
    console.log(x*x*x);
}
myArray.forEach(cube);
```
- forEach 不返回任何值

使用 map()

和 forEach 的區別在於 map 會返回和最初數組相同大小的新數組 jquery

var myArray = [1, 2, 3, 4];
fucntion cube(x) {
    return (x*x*x);
}
var newArray = myArray.map(cube);

使用 for-of 訪問數組

var myArray = [2,3,4,5];
functionn cube(x) {
    console.log(x*x*x);
}
for (var y of myArray) {
    cube(y);
}

2.3.3 三點表示法

組合多個數組
```
var array2 = [1, 2, ...array1, 3];
```

用參數的數組來調用函數

var myArray = [1, 2, 3];
alert(Math.min(...myArray));

收集數據
```
var [a, b, ...c] = [1, 2, 3, 4, 5];
```

2.4 用 JavaScript 處理事件

mousedown 和 mouseup 在 click 前觸發
ctrlKey shiftKey altKey metaKey

2.4.1 事件的類型

一些常見事件
1. 鼠標事件
  - onclick
  - oncontextmenu 鼠標右鍵彈出菜單
  - ondblclick
  - onmousedown
  - onmouseenter 鼠標移動到一個元素上時
  - onmouseleave
  - onmousemove 鼠標在一個元素上移動時
  - onmouseover 鼠標移動到一個元素或其子元素時
2. 鍵盤事件
  - onkeydown 按下按鍵
  - onkeypress 按下並放開按鍵
  - onkeyup 釋放按鍵
3. DOM 對象事件
  - onerror 加載一個外部文件出現錯誤時
  - onload
  - onresize
  - onscroll 滾動了元素的滾動條
4. 表單事件
  - onblur 元素失去焦點時
  - onchange
  - onfocus
  - onreset 重置表單
  - onselect
  - onsubmit

2.4.2 事件處理器

內聯事件處理器

<a href="http://www.baidu.com" onclick="alert('hello')">baidu</a>

做爲 DOM 對象的屬性的事件處理器

// <a href="xxx" id="a1">aa</a>
var myLink = document.getElementById('a1');
myLink.onclick = function() {
    alert("hello");
}

使用 addEventListener()

var myLink = document.getElementById('a1');
function sayHello() {
    alert("hello");
}
myLink.addEventListener('click', sayHello);
myLink.removeEventListener('click', sayHello);

添加多個監聽器
- 使用 addEventListener 能夠對一個事件添加多個函數

2.4.3 event 對象

myInputField = document.getElementById('a');
function myFunction(e) {
    var kc = e.keyCode;
    if (kc == 27) {
        alert("xx");
    }
}
myInputField.addEventListener('keydown', myFunction);

event 對象會自動傳遞給事件處理器
e.keyCode 表示按下了哪一個鍵,27 表示 Escape

阻止默認行爲

var myLink = document.getElementById('a');
function refuseAccess(e) {
    alert("wrong");
    e.preventDefault();
}
myLink.addEventListener('click', refuseAccess);

事件冒泡和捕獲
- 嵌套元素時,各層元素都有事件監聽器時,執行順序爲冒泡
- addEventListener 的第三個參數默認爲 false,對於嵌套元素,從內向外執行,像冒泡同樣.

關閉冒泡和捕獲

function myFunction(e) {
    var kc = e.keyCode;
    e.stopPropagation();
    if (kc == 27) {
        alert("1");
    }
}

2.5 程序控制

2.5.1 條件語句

和 C 差很少

if() 語句
比較操做符
- = 值和類型都相等
測試相等性
if 進階
測試多個條件
switch 語句
邏輯操做符

2.5.2 循環和控制結構

while
do…while
for
用 break 跳出循環

用 for…in 在對象集裏循環

var days = [1, 2, 3, 4];
for (i in days) {
    alert(i);
}

2.5.3 設置和使用定時器

這兩個方法都是 window 對象的方法

setTimeout()

function hide(elementId) {
    document.getElementById(elementId).style.display='none';
}
window.onload = function() {
    setTimtout("hide('id1')", 3000);
}
var timer1 = setTimeout("hide('id1')", 3000);
clearTimeout(timer1);

setInterval()

var timer1 = setInterval("updateClock()", 1000);
clearInterval(timer1);

3 理解 JavaScript 對象

3.1 面向對象編程

3.1.1 什麼是面向對象編程

3.1.2 建立對象

建立直接實例

myNewObject = new Object();
myNewObject.showInfo = myFunc;
myNewObject.info = 'this is a info';

使用關鍵字 this
- this 在 HTML 內聯 JS 裏指此 HTML 元素,也可指向它所屬的對象

匿名函數

myNewObject.showInfo = function() {
    alert(this.info);
}

使用構造函數

若是要建立一個類的多個實例,能夠建立構造函數程序員

function Car(Color, Year, Make, Miles) {
    this.color = Color;
    this.year = Year;
    this.make = Make;
    this.odometerReading = Miles;
    this.setOdometer = function(newMiles) {
        this.odometerReading = newMiles;
    }
}
var car1 = new Car("blue", "1998", "Ford", 77777);

3.1.3 用 prototype 擴展和繼承對象

擴展對象

function Person(personName) {
    this.name = personName;
    this.info = 'a';
    this.showInfo = function() {
        alert(this.info);
    }
}
var person1 = new Person('adam');
var person2 = new Person('hehe');
Person.prototype.sayHello = function() {
    alert(this.name + 'say hello');
}

繼承對象

function Pet() {
    this.animal = "";
}
function Dog() {
    this.breed = "";
}
Dog.prototype = new Pet();

3.1.4 封裝

function a(b, c, d) {
    function kk(m, n) {
        return m + n;
    }
}

3.2 對象進階

3.2.1 類

新引入的 class 關鍵字和 constructor

function Pet() {
    this.animal = "";
    this.setAnimal = function(newAnimal) {
        this.animal = newAnimal;
    }
}

class Pet {
    constructor(animal) {
        this.animal = animal;
    }
    setAnimal(newAnimal) {
        this.animal = newAnimal;
    }
}

使用 getter 和 setter

下劃線前綴防止被重複調用

class Pet {
    constructor(animal, name) {
        this.animal = animal;
        this.name = name;
    }
    get name() {
        return this._name;
    }
    set name(n) {
        n = n.charAt(0).toUpperCase() + n.slice(1).toLowerCase();
        this._name = n;
    }
}

Symbol
- 建立的 Symbol 必定是惟一的傳的參數只是說明
```
var myname = Symbol('nickname');
myCat[myname] = 'heheda';
```

3.2.2 對象繼承

使用 extends 和 super

class Dog extends Pet {
    constructor(name, breed) {
        super(name);
        this.breed = breed;
    }
}

3.2.3 使用功能檢測

if (document.getElementById) {
    // do something
} else {
    // other
}

typeof

if (typeof document.getElementById == 'function') {
    // do something
} else {
    // other
}

typeof 的返回值「number」「string」「boolean」「object」 null undefined

3.3 DOM 腳本編程

3.3.1 DOM 節點

節點類型
- nodeType 每種節點類型都有一個關聯的數值,保存在屬性 nodeType
  1. 元素
  2. 屬性
  3. 文本
  4. CDATA 區域
  5. 實體引用
  6. 實體
  7. 執行指令
  8. HTML 註釋
  9. 文檔
  10. 文檔類型(DTD)
  11. 文檔片斷
  12. 標籤
- childNodes 屬性
```
function countListItems() {
    var olElement = document.getElementById("toDoList");
    var count = 0;
    for (var i = 0; i < olElement.childNodes.length; i++) {
        if (olElement.chiodNodes[i].nodeType == 1)
            count++;
    }
}
window.onload = countListItems;
```
- firstChild lastChild myElement.childNodes[0] myElement.childNodes[myElement.childNodes.length - 1];
- parentNode 屬性
- nextSibling previousSibling
使用 nodeValue
使用 nodeName

3.3.2 用 getElementsByTagName() 選擇元素

基本用法 var myDics = document.getElementsByTagName(「div」);
document.getElementsByClassName()

3.3.3 讀取元素的屬性

var myNode = document.getElementById("id1");
alert(myode.getAttribute("title"));

3.3.4 Mozilla 的 DOM 查看器

建立新節點
- 建立步驟
  1. 建立新節點
    - createElement() var newDiv = document.createElement(「div」);
    - createTextNode() var newTextNode = document.createTextNode(「heheda」);
    - cloneNode() var myDiv = document.getElementById(「id1」); var newDiv = myDiv.cloneNode(true) true 表明會複製子節點通常須要修改 id 值
  2. 添加到 DOM 樹
操做子節點
- appendChild() var newText = document.createTextNode(「heheda」); var myDiv = document.getElementById(「id1」); myDiv.appendChild(newText);
- insertBefore() var newPara = document.createElement(「p」); var myDiv = document.getElementById(「id1」); var para2 = document.getElementById(「para2」); myDiv.insertBefore(newPara, para2);
- para.replaceChild(new, old)
- removeChild()
```
var myDiv = document.getElementById("id1");
var myPara = document.getElementById("para2");
var removedItem = myDiv.removeChild(myPara);
alert(removedItem.getAttribute("id"));
```

編輯元素屬性

var myPara = document.getElementById("para1");
myPara.setAttribute("title", "opening paragraph");

動態加載 JavaScript 文件

var scr = document.createElement("script");
scr.setAttribute("src", "newScript.js");
document.head.appendChild(scr);

3.4 JSON 簡介

3.4.1 JSON 是什麼

使用 JSON 表示法時,對象能夠方便的轉換爲字符串來進行存儲和轉換
JSON 的真正優雅之處在於對象在 JSON 裏以普通 JS 代碼表示,所以能夠利用 JS 「自動」解析功能

JSON 語法

var jsonObject = {
    "param1": "value1",
    "param2": "value2"
}

3.4.2 訪問 JSON 數據

eval 函數參數:
1. 表達式
2. 表達式字符串
3. 字符串,其中是括號包含的 json

var x = eval(1*2);
eval("a=1;b=2;document.write(a+b);");
var user = '{"user":"admin", "location": "spain"}';
var myObject = eval('(' + user + ')');

使用直接瀏覽器 JSON 支持
- 最新瀏覽器都對 JSON 提供直接支持,因此能夠不用 eval 函數
- 瀏覽器會建立一個名爲 JSON 的 JS 對象來管理 JSON 的編碼和解碼,這個對象有兩個方法,stringify() 和 parse()

使用 JSON.parse()

var Mary = '{"h": 1.9, "age": 12}';
var myObject = JSON.parse(Mary);
var out = "";
for (i in myObject) {
    out += i + " = " + myObject[i] + "\n";
}
alert(out);

3.4.3 JSON 的數據序列化

使用 JSON.stringify()

var Dan = new Object();
Dan.height = 1.85;
Dan.age = 41;
Dan.eyeColor = "blue";
alert(JSON.stringify(Dan));

3.4.4 JSON 數據類型

參數部分的規則
1. 不能是 JS 保留的關鍵字
2. 不能數字開頭
3. 特殊字符只能有下劃線和美圓符號
值能夠是如下數據類型
1. 數值
2. 字符串
3. 布爾值
4. 數組
5. 對象
6. null

3.4.5 模擬關聯數組

在 JS 中,object[「property」] 和 object.property 是對等的

var conference = {"a": "1", "b": "2"};
alert(conference["a"]);
alert(conference.a);

3.4.6 使用 JSON 建立對象

用方括號表示數組 var categories = [「news」, 「sports」];

屬性

var user = {「a」: 1, 「b」: 2}; var name = user.a;

方法

var user = {
    "a": 1,
    "setName": function(newName) {
        this.username = newName;
    }
}
user.setName("heheda");

當 JSON 做爲通用數據交換格式時,值不能放函數

數組

var bookListObject = {
    "a": [1, 2, 3]
}
var book = bookListObject.a[1];

對象

3.4.7 JSON 安全性

eval() 能執行任何 JS 命令,對於來源不明的 JSON 數據可能存在安全問題,安全的辦法是使用內置 JSON 解析器,它只識別 JSON 文本而不會執行腳本命令

4 用 JavaScript 操做 Web 界面

4.1 HTML 與 JavaScript 編程

4.1.1 HTML5 的新標籤

section
header
footer
nav
article
aside
figure
figcaption
summary

4.1.2 一些重要的新元素

用<video> 回放視頻
用 canPlayType() 測試可用的格式
- media.canPlayType(「video/webm」);

控制回放

var myVideo = document.getElementById("vid1").play();
var myVideo = document.getElementById("vid1").pause();

用<audio> 標籤播放聲音

var soundElement = document.createElement('audio');
soundElement.setAttibute('src', 'sound.ogg');
soundElement.play();
soundElement.currentTime = 12;

用<canvas> 在頁面上繪圖

4.1.3 拖放

4.1.4 本地存儲

兩個對象 localStorage sessionStorage

if (typeof(Storage) != "undefined") {
    localStorage.setItem("key", "value");
    localStorage["key"] = "value";
    alert(localStorage.getItem("key"));
    alert(localStorage["key"]);
}

4.1.5 操做本地文件

查看瀏覽器的支持狀況
- if (window.File && window.FileReader && window.FileList)

4.2 JavaScript 和 CSS

4.2.1 CSS 簡介

從內容分離樣式
CSS 樣式聲明
在哪裏保存樣式聲明

4.2.2 DOM 的 style 屬性

4.2.3 用 className 訪問類

4.2.4 DOM 的 styleSheets 對象

啓用,禁用和切換樣式表

4.3 CSS3 簡介

5 與 JavaScript 工具相關的高級技術

5.1 讀取和寫入 cookie

5.1.1 什麼是 cookie

cookie 的侷限性

5.1.2 使用 document.cookie 屬性

數據的編碼和解碼

var str = 'hehe (aa) .';
document.write(str + '<br />' + escape(str));

5.1.3 cookie 組成

cookieName 和 cookieValue
domain 用於指明 cookie 屬於哪一個域,若是爲 a.com ,則 b.a.com 能夠訪問這個 cookie
path 指定可使用 cookie 的路徑
secure 代表瀏覽器把 cookie 發給服務器時,是否要使用 SSL 標準
expires 以 UTC 標準的過時時間

5.1.4 編寫 cookie

var cookieDate = new Date ( 2018, 05, 15 );
var user = "heheda";
document.cookie = "username=" + escape(user)  + ";expires=" + cookieDate.toUTCString();

5.1.5 編寫一個函數來寫 cookie

5.1.6 讀取 cookie

5.1.7 刪除 cookie

把一個 cookie 的失效日期設置爲今天以前便可

5.1.8 在一個 cookie 裏設置多個值

5.2 用正則表達式匹配模式

5.2.1 建立正則表達式

JS 裏兩種生成正則表達式的方法

使用正則表達式字符串字面量
- var myRegExp = FooBar;
```
var myRepExp = /FooBar/;
if (document.getElementById("txt").value.search(myRegExp) == -1) {
    alert("not found");
} else {
    alert("The string occurs");
}
```
- 正則表達式修飾符
i 不區分大小寫 g 全局匹配,而不是找到第一個匹配就中止 m 多行匹配 var aa = /stupid/gi;
- 方括號[]指定範圍
- 處理特殊字符的快捷方式,元字符 \w 等
- 正則表達式限定符 + 重複次數等

使用 JS 的 RegExp 對象

var myPattern = new RegExp("Foobar");
var result = /boy/.exec("heheda");
console.log(result[0]);
myPattern.test("this is a test");
var result = myPattern.exec(myString);

對正則表達式使用字符串方法

match search replace split

var myString = "heheda dada";
var outString = myString.match(/\d+/g);

var myString = "1 ;2 3;4 5";
var outString = myString.split(/\s*;\s*/);

myString.replace(/stupid/ig, "cupid");

用一個函數做爲 replace() 的參數

function CtoF(match) {
    return ((match * 9) / 5) + 32;
}
var myString = "for 1 and 5";
myString = myString.replace(/\d+/g, CtoF);

5.3 理解並使用閉包

5.3.1 回顧做用域的相關知識

5.3.2 從一個函數返回另外一個函數

5.3.3 實現閉包

閉包是訪問父做用域的一個函數,即使是在該做用域已經結束以後.

傳遞參數

function sayHi(visitor) {
    let msg = visitor + ' says: hello world!';
    return function logMessage() {
        console.log(msg);
    }
}

編輯一個閉包變量

function sayHi(visitor) {
    let msg = visitor + ' says: ';
    return function logMessage(extra) {
        msg = msg + extra;
        console.log(msg);
    }
}
var helloPhil = sayHi("Phil");
var helloSue = sayHi("Sue");

閉包和變量

閉包也容許將一些數據和操做這些數據的函數關聯起來

function sayHi(visitor) {
    let msg = visitor + ' says: hello world';
    return function logMessage() {
        console.log(msg);
    }
}
var helloPhil = sayHi("Phil");
helloPhil()

對象提供了靈活性,可是處處均可以修改,容易出現錯誤.

5.4 用模塊組織代碼

5.4.1 爲什麼使用模塊

模塊使得代碼更容易維護
模塊幫助複用代碼
模塊有助於整齊的全局做用域

5.4.2 模塊基礎知識

一個文件一個模塊,模塊中的內容對外部不可見.
模塊是經過 CORS 跨源資源共享來獲取的

如何包含一個 JS 模塊

JS 要求對模塊使用相對路徑

<head>
  <script type="module" src="./myModule.js"></script>
</head>

nomodule 關鍵字

<script nomodule src=「fallback-option.js」></script>

5.4.3 導出

function fun1(x) {
    alert(x);
}
export func1;

一個簡單的示例模塊

function convertCtoF(c) {
    return (c*1.8) + 32;
}
function convertFtoC(c) {
    return (f-32) / 1.8;
}
export {convertCtoF, convertFtoC}

export var a = "something";
export function func1() {console.log("hello");};

如何在導出時重命名

export var distance = arr[1];
export {arr as routeProperties };

具名的和默認的導出

function mmToInches(d) {
    return d/25.4;
}
export default mmToInches;

5.4.4 導入

import {convertCtoF, convertFtoC} from './tempConvert.js';

默認導入

function mmToInches(d) {
    return d/25.4;
}
export default mmToInches;

import toInches from './convert.js';
console.log(toInches(100));

如何在導入的過程當中重命名

import {convertCtoF as cF } from ’./tempConvert.js’;
如何把一個模塊導入爲一個對象

import * as temps from ’./tempConvert.js’;

6 專業技能

6.1 良好的編程習慣

6.1.1 避免過分使用 JS

6.1.2 編寫易讀和易維護的代碼

明智地使用註釋
- 代碼較長地函數或對象地簡要說明
- 對易混淆或易誤解代碼地註釋
- 原做者本身地技巧或經驗
- 關於代碼修改地註釋
使用適當地文件名稱,屬性名稱和方法名稱
儘可能複用代碼
不要假設

6.1.3 平穩退化

6.1.4 漸進加強

分離樣式,內容和代碼

6.1.5 代碼分離的 JS

脫離 HTML
僅把 JS 做爲性能加強手段

6.1.6 功能檢測

6.1.7 妥善處理錯誤

使用 try 和 catch

6.2 調試代碼

6.2.1 調試簡介

錯誤類型
- 語法錯誤
- 運行時錯誤
- 邏輯錯誤
選擇程序員地編輯器
用 alert() 進行簡單調試

6.2.2 更高級地調試

控制檯
- console console.log() console.warn() console.info() console.error()
分組消息
- console.group() console.groupEnd() 之間的 log 信息會分組顯示
用斷點中止代碼執行
條件性斷點
從代碼中啓動調試器
- debugger;
驗證 JS

6.3 繼續深刻學習

6.3.1 爲何要使用庫

6.3.2 庫能作什麼

通常庫的功能
1. 封裝 DOM 方法
2. 動畫
3. 拖放
4. Ajax

6.3.3 一些常見的庫和框架

Prototype 框架
- 優點在於 DOM 擴展和 Ajax 處理
Dojo
- 可以簡化建立程序和用戶界面的工做
React
- 主要用於構建用戶界面
Node.js
- 容許在服務器上編寫和執行 JS
jQuery
- 簡化了 HTML 文檔轉換,事件處理,動畫等多種工做

6.3.4 jQuery 入門

在頁面裏引用 jQuery
- 本地下載 <script src=「jquery-3.3.1.js」></script>
- 遠程 <script src=「https://ajax.googleapis.com/ajax/libs/jquery/3.3..1/jquery.min.js」></script>
jQuery 的$(document).ready 處理器
- 相似於 window.onload
```
$(document).ready(function() {
    // code
});
```
選擇頁面元素
- $(「」) 便可選擇 HTML 元素 $(「span」) $(「#elem」) //id $(「.classname」) $(「div#elem」) $(「ul li a.menu」) / 類爲 menu,且嵌套在列表項裏的錨點 $(「p > span」) / p 的直接子元素 span $(「input[type=password]」) $(「p:first」) $(「p:even」) // 所有偶數段落 $(「:header」) //標題元素 $(「:button」) $(「:radio」) $(「:checkbox」) $(「:checked」)

操做 HTML 內容

html() 相似於 innerHTML

var htmlContent = $("#elem").html();
$("#elem").html("<p>here </p>");

text() 只是獲取文本內容

  var textContent = $("#elem").text()
  $("#elem").append("<p>hehe </p>");

attr()

var title = $("#elem").attr("title");
$("elem").attr("title", "new title");

顯示和隱藏元素

JS 中 document.getElementById(「elem」).style.visibility = 「visible」;

show()

$("div").show();
$("#elem").show("fast", function() {
    // 操做
});

hide()

$("#elem").hide("slow", function() {
    // 隱藏以後的操做
});

toggle()

$("#elem").toggle(1000, function() {
    // xx
});

命令鏈

jQuery 大多數方法都返回一個 jQuery 對象

$("#elem").fadeOut().fadeIn();
$("#elem").text("Hello ").fadeOut().fadeIn();

處理事件

經常使用方法

$("a").click(function() {
    //
});
function hello() {
    alert("hello");
}
$("a").click(hello);
$("a").on("click", hello);

常見事件 blur focus hover keypress change mousemove resize scroll submit select

6.3.5 The jQuery UI

jQuery UI 提供了高級的效果和能夠主題化的掛件

jQuery UI 是什麼
```
$("#datepicker").datepicker();
```

6.3.6 Ajax 簡介

Ajax 入門
XMLHttpRequest 對象
- XMLHttpRequest 可以創建與服務器的鏈接,發送 http 請求而不須要加載相應的頁面
- 默認 xhr 只能對同域發起請求,除非服務端作了設置
建立 request 對象
- var request = new XMLHttpRequest();
方法和屬性
- 屬性 onreadystatechage readyState responseText responseXML status statusText
- 方法 abort() getAllResponseHeaders() getResponseHeader(x) open(’method’,’URL’,’a’) // a 默認爲 true,表示異步 send(content) setRequestHeader(’x’,’y’)
與服務器通訊
在服務器端發生了什麼
處理服務器響應
還有更容易的方法,不是嗎?

6.3.7 用 jQuery 實現 Ajax

load()

$(function() {
    $("#elem").load("newContent.html");
});

$(function() {
    $("#elem").load("newContent.html #info");
});

get() post()

$.get("serverScript.php",
      {param1: "value1", param2: "value2"},
      function(data) {
          alert("server response: " + data);
      });

ajax()
對錶單數據進行序列化 var formdata = $(’#form1’).serialize();

6.3.8 Node.js 簡介

Node.js 使用 V8 JavaScript 引擎

使用一種非阻塞的代碼模式