《JavaScript 權威指南》讀書筆記 1 - 簡介

原文：https://keelii.github.io/2016/06/16/javascript-definitive-guide-note-0/

第一章 主要介紹 JavaScript 的大概狀況、基本語法。以前沒有 JavaScript 基礎的看不懂也不要緊，後續章節會有進一步的詳細說明，我會通讀一遍 《JavaScript 權威指南》，而後根據我的的理解整理出來我認爲重要的核心概念，同時我也會參考原版英文版 JavaScript The Definitive Guide，取一些關鍵性、重要的單詞作補充

中文排版指南遵照 中文文案排版指北，歡迎批評批正

JavaScript 簡介

JavaScript 是面向 web 的編程語言，是一門 高階的（high-level）、動態的（dynamic）、弱類型的（untyped）解釋型（interpreted）編程語言，適合面向對象（oop）和函數式的（functional）編程風格。JavaScript 語法源自 Java 和 C，一等函數（first-class function）來自於 Scheme，它的基於原型繼承來自於 Self

JavaScript 的版本

JavaScript 語言規範由 ECMA 國際發佈，版本號通常叫作 ECMAScript x，如：ECMAScript 3, ECMAScript 5, ECMAScript 6，簡稱 ES x

Mozilla 發佈的 JavaScript 版本通常叫作 JavaScript x.x，如：JavaScript 1.3, JavaScript 1.5

Micorsoft 發佈的 JavaScript 版本通常叫作 JScript

能夠這麼說 「Mozilla 和 Micorsoft 開發的瀏覽器中 JavaScript內核通常都實現了某個 ECMAScript 版本的規範」

JavaScript 語言核心有不少 API，好比：針對字符串、數組、正則、日期。但這些一般不包括輸入輸出 API（相似網絡、存儲、圖形相關的特性），輸入輸出 API 通常是由 JavaScript 的宿主環境（host environment）提供的，一般是瀏覽器

JavaScript 語言核心

變量/賦值

快速預覽下 JavaScript 變量的用法

// 雙斜線以後內容是單行註釋
/* 這是多行註釋 */

// 變動是表示值的一個符號名字，經過 var 關鍵字聲明
var x;              // 聲明一個變量 x

// 值能夠經過等號賦值給變量
x = 0               // 如今變量 x 的值爲 0
x                   // => 0 經過變量獲取其值

// JavaScript 支持多種數據類型
x = 1;              // 數字
x = 0.01;           // 整數和實數都是數字（number）類型
x = "hello world"   // 字符串
x = 'JavaScript';   // ...
x = true;           // 布爾值
x = false;          // ...
x = null;           // 是一個特殊的值，意思是「空」
x = undefined;      // 和 null 很是累似

對象/數組

JavaScript 中兩個很是重要的數據類型是對象和數組

// 對象是名/值對的集合，或字符串到值映射的集合
var book = {                // 對象由花括號括起來
    topic: 'JavaScript',    // book 對象的屬性 topic 的值是 "JavaScript"
    fat: true
};

// 經過「.」或「[]」來訪問對象屬性
book.topic                  // => "JavaScript"
book.['fat']                // => true
book.author = 'Flanagan'    // 經過賦值給 book 對象建立一個新屬性 author

// JavaScript 數組
var primes = [2, 3, 5, 7];
primes[0]                   // => 2 經過數組下標訪問第一個元素
primes.length               // => 4 數組中元素的個數
primes[4] = 9               // => 9 添加新元素
primes[6] = 11              // => 11 此時數組變成 [2, 3, 5, 7, 9, undefined, 11], 長度也變爲 7

// 對象數組
var points = [
    { x: 0, y: 0 },
    { x: 1, y: 1 }
];

// 數組對象
var data = {
    listA: [1, 3, 5],
    listB: [2, 4, 6]
};

表達式/運算符

經過方括號定義數組元素和經過花括號定義對象屬性名和值的語法稱爲 初始化表達式（initializer expression），表達式是 JavaScript 中的一個短語，這個短語能夠經過運算得出一個值。經過「.」和「[]」來引用對象屬性或數組元素的值就構成一個表達式。上面的代碼中註釋中箭頭（=>）後的值就是表達式的運算結果

JavaScript 中最多見的表達式寫法就是像下面代碼同樣使用運算符（operator）,運算符做用於操做數，生成一個新的值

// 最多見的是算術運算符
3 + 2                     // => 5 加法
3 - 2                     // => 1 減法
3 * 2                     // => 6 乘法
3 / 2                     // => 1.5 除法
points[1].x - points[0].x // => 1 複雜的操做數運算
'3' + '2'                 // => '32' 字符串鏈接

                          // 運算符簡寫形式
var count = 0;
count++;                  // 自增1
count--;                  // 自減1
count += 2;               // 自加2, 至關於 count = count + 2
count *= 3;               // ...
count                     // => 6 變量名自己也是表達式

var x = 2, y = 3
x == y                    // => false
x != y                    // => true
x < y                     // => true
x <= y                    // => true
x == y                    // => false
'two' == 'three'          // => false
'two' > 'three'           // => true 'tw' 在字母表中的索引大於 'th'
false == (x > y)          // => true

                          // 邏輯運算符
(x == 2) && (y == 3)      // true
(x > 2) && (y < 3)        // false
!(x == y)                 // true

若是 JavaScript 中的「短語」是表達式，那麼整個句子就稱作 語句（statement），以分號結束的行都是一條語句。語句和表達式有不少共同之處

粗略了講，表達式僅僅計算出一個值並不進行其它操做，不會改變程序的運行狀態，而語句並不包含一個值（或者說它包含的值咱們並不關心），但它們改變了程序運行狀態

函數

函數是帶有名稱（named）和參數的 JavaScript 代碼片斷，能夠一次定義屢次調用

function plus1(x) {        // 定義了一個名爲 plus1 的函數，帶有參數 x
    return x + 1;          // 返回一個比傳入參數大 1 的數值
}                          // 函數代碼塊是由花括號包裹起來的部分
plus1(3)                   // => 4 函數調用結果爲 3+1

var square = function(x) { // 函數是一種值，能夠賦值給變量
    return x * x;
};

square(plus1(3))           // => 16 在一個表達式中調用兩個函數

當函數和對象合寫在一塊兒時，當函數就變成了「方法」（method）:

// 當函數賦值給對象的屬性，咱們稱爲「方法」，全部 JavaScript 對象都含有方法
var a = [];             // 建立一個空數組
a.push(1, 2, 3);        // 調用數組的添加元素方法
a.reverse();            // 調用數組的次序反轉方法

// 自定義方法
points.dist = function() {
    var p1 = this[0];
    var p2 = this[1];
    var a = p2.x - p1.x;
    var b = p2.y - p1.y;
    return Math.sqrt(a*a + b*b) // 勾股定理，用 Math.sqrt 來計算平方根
}
points.dist();                  // => 求得兩個點之間的距離

面向對象

JavaScript 中的面向對象特性和傳統語言的很大的區別，下面展現一個類用來表示 2D 平面中的幾何點，這個類實例化後的對象有一個名爲 r() 的方法，能夠計算該點到原點的距離：

function Point(x, y) {
    this.x = x;
    this.y = y;
}

// 經過給構造函數的 prototype 對象賦值，來給 Point 對象定義方法
Point.prototype.r = function() {
    return Math.sqrt(this.x * this.x + this.y * this.y)
};

// 使用 new 關鍵字和構造函數來建立一個實例 p
var p = new Point(1, 1);

// Point 的實例對象 p（以及全部 Point 的實例對象）繼承了方法 r()
p.r()               // => 1.414...

客戶端的 JavaScript

嵌入到 HTML 中的 JavaScript

JavaScript 代碼能夠經過 <script> 標籤來嵌入到 HTML 文件中

<html>
<head>
    <script src="外鏈腳本文件.js"></script>
</head>
<body>
    <p>正常 HTML 段落</p>
    <script>
        // 這裏能夠寫 JavaScript 代碼
        // 經過彈出一個聖誕框來詢問用戶一個問題
        function moveon() {
            var answer = confirm('準備好了嗎？');
            // 單擊「確認」按鈕，瀏覽器會跳轉到 jd.com
            if (answer) window.location = 'jd.com';
        }

       setTimeout(moveon, 6000);
    </script>
</body>
</html>

使用 JavaScript 操做 DOM

JavaScript 能夠經過瀏覽器提供的 DOM API 來操做 HTML 元素

// 調用 debug 傳入字符串，JavaScript 會動態建立一個 HTML 節點並字符串內容顯示其中
function debug(msg) {
    var log = document.getElementById('debuglog');

    if (!log) {
        log = document.createElement('div');
        log.id = 'debuglog';
        log.innerHTML = '<h1> Debug Log </h1>';
        document.body.appendChild(log);
    }

    var pre = document.createElement('pre');
    var text = document.createTextNode(msg);
    pre.appendChild(text);
    log.appendChild(pre);
}

debug('this is debug message');

使用 JavaScript 操做 CSS 樣式

JavaScript 能夠經過瀏覽器提供的 DOM API 來操做 HTML 元素，從而影響 CSS 樣式

// 設置元素的 CSS 屬性 display/visiblity
function hide(el, reflow) {
    if (reflow) {
        el.style.display = 'none';    // 隱藏元素
    } else {
        el.style.visibility = 'hide'; // 隱藏元素，但元素仍然佔空間
    }
}
// 設置 HTML 元素的 class 屬性，class 屬性能夠是多個（空格分割），如：<div class="c1 c2 c3">
function highlight(e) {
    if (!e.className) {
        e.className = 'hilite';
    } else {
        e.className += ' hilite';
    }
}

使用 JavaScript 處理事件

JavaScript 經過註冊事件函數來定義文檔/用戶的行爲，好比：點擊，鼠標 hover 等

給 HTML 元素添加事件處理程序的一種方法是直接給 HTML 元素添加行內的 on[event name]，好比給按鈕綁定點擊事件

<script src="debug.js"></script>
<script src="hide.js"></script>
Hello
<button onclick="hide(this, true);debug('hide button1')">Hide1</button>
<button onclick="hide(this);debug('hide button2')">Hide2</button>
World

另一種方法是調用元素的 添加事件處理函數，一般是 addEventListener 或 attachEvent（IE專用）

// 註冊 onload 事件，效果和在 HTML 上寫 onload 是同樣的
// 不過只有部分 HTML 元素支持，好比： img 標籤的 onload
window.onload = function() {
    var images = document.getElementsByTagName('img');

    for (var i = 0, l = images.length; i < l; i++) {
        var image = images[i];
        if ( image.addEventListener )
            image.addEventListener('click', hide, false);
        else
            image.attachEvent('onclick', hide);
    }

    function hide(event) { event.target.style.visibility = 'hidden'; }
}

使用 jQuery 庫

使用 jQuery 類庫會使 DOM 操做、事件綁定等操做很是方便，並且不用擔憂瀏覽器兼容問題（JavaScript api 層面的兼容）

function debug(msg) {
    var $log = $('#debuglog');
    if (!$log.length) {
        log = $('<div id="debuglog"><h1>Debug Log</h1></div>');
        log.appendTo(document.body)
    }

    log.append($('<pre />').text(msg))
}

引用

• ECMAScript https://zh.wikipedia.org/wiki/ECMAScript

• JScript https://zh.wikipedia.org/wiki/JScript