第一章：Javascript語言核心

時間 2019-11-19

原文原文鏈接

本節是javascript語言的一個快速預覽，也是本書的第一部分快速預覽。javascript

讀此書以前，感謝淘寶技術團隊對此javascript核心的翻譯，感謝弗拉納根寫出此書。感謝大家無私的分享，僅以此筆記獻給大家的辛勤付出。css

一：javascript語言核心html

本章以後，咱們將主要關注javascript的基礎知識。第二章咱們講解javascript的註釋，分號和unicode字符集；第三章會更有意思，主要講解javascript的變量和賦值html5

這裏有一些實例代碼說明前兩章的重點內容。java

<script type="text/javascript">
             //雙斜槓以後以後的內容都於屬於註釋
             //仔細閱讀這裏的註釋，它將會對javascript代碼作解釋
             // 變量是表示值的一個符號名字
             // 變量是經過var關鍵字聲明
            var x; //聲明一個變量x
             //值能夠經過符號賦值給變量
            x = 0; //如今變量x的值爲0
            x //經過變量名獲取其值。

             //javascript支持多種數據類型

             x = 1; //數字
            x = 0.01; //整數和實數共用一種數據類型
            x = "hello world"; //由雙引號內的文本構成字符串
            x = 'hello world'; //單引號一樣構成字符串。
            x = true; //布爾值
            x = false; //另一個布爾值
            x = null; //null是一個特殊的值。意思是空
            x = undefined; //undefined和null很是相似
        </script>

在javascript中，最重要的類型就是對象和數組，第六章介紹對象，第7章介紹數組。對象和數組在 javascript是如此重要。以致於在本書中處處能看到他們的身影。c++

<script type="text/javascript">
             //javascript中最重要的類型就是對象
             //對象是名/值對的集合，或字符串值到映射值的集合。

            var book = { //對象是由花括號括起來的
                topic: "javascript", //屬性"topic"的值是javascript
                fat: true //屬性fat的值是true
            }; //右邊的花括號結束。
             //經過「.」或「[]」來訪問對象屬性。
            book.topic //=>"javascript"
             book["fat"] //=>true另一種獲取屬性的方式、
             book.author = "ahthw"; //經過賦值建立一個新的屬性
            book.content = {}; //{}是一個空對象。它沒有屬性

             //javascript一樣支持數組（以數組爲索引的列表）
            var primes = [2, 3, 5, 7]; //擁有4個值的組合，由「[」「]」劃定邊界
            primes[0] //=>2：數組的第一個對象，索引爲0
            primes.length //=>4,數組中元素的個數
            primes[primes.length-1]  //=>7:數組中最後一個元素
            primes[4] =9; //經過賦值來增長新的元素
            primes[4] =11;//經過賦值來改變已有的元素
            var empty = [];//空數組，有0個元素
            empty.length   //=>:0
            
            //數組和對象中均可以包含另外一個數組或者對象。
            var point =[   //具備兩個元素的數組
            {x:0,y:0},        //每一個元素都是一個對象
            {x:1,y:1}
            ];
            var data ={           //一個包含兩個屬性的對象
                trial1:[[1,2],[3,4]],  //每個對象都是數組
                trial2:[[2,3],[4,5]]     //數組的元素也是數組
            };
        </script>

上面代碼中經過方括號定義數組元素和經過花括號定義對象屬性名和屬性值之間的映射關係的語法陳偉初始化表達式(initalizer expression),第四章有專門介紹.表達式是javascript中的一個短語，這個短語能夠經過運算得出一個值，經過","和"[]"來引用對象屬性或數組元素的值構成一個表達式。程序員

javascript中最多見的表達式寫法是像下面代碼這樣的運算符(oprartor)web

 //運算符做爲操做符，生成一個新的值
             //最多見的算術運算符
             3+2  // =>5 加法
             3-2   // =>減法
             3*2    // =>乘法
             3/2   // =>除法
             point[1].x -point[0].x     //=>複雜的運算也能照常工做
             "3"+"2"   // => 32.能夠完成加法運算，也能夠完成 字符串拼接。
             
             //javascript定義了一些算術運算符做爲簡寫形式
             var count = 0; //定義一個變量
             count++;      //自增1
             count--;       //自減1
             count +=2;     //自增2 和 "count = count + 2;"寫法同樣
             count *=3      //自乘3. 和"count = count*3; "寫法同樣
             count          //=> 6: 變量名自己也是一個表達式
             
             //相等關係運算符用來判斷兩值是否相等
             //不等，大於，小於運算符運算結果是true或false
             var x=2,y=3;       //這裏的等號是賦值的意思，不是比較相等
             x == y;          //=>false 相等
             x ！= y;          //=> true 不等
             x < y;            //=> true: 小於
             x <= y;           //true  小於等於
             x > y;             //false 大於
             x >= y;            //false 大於等於
             "two"=="three";     //false 兩個字符串不相等
             "two" > "three";    //true "tw"在字母表中的索引大於"th"
             false == (x>y);     //ture false =false;
             
             //邏輯運算符是對布爾值的合併或求反
             (x == 2)&&(y==3);   //=>true兩個比較都爲true.&&爲"與"
             (x > 3)||(y<3);      //=> false 兩個比較都不是true. ||表示"或"
             ！(x == y);           //=>true !表示求反

若是javascript中的「短語」是表達式話，那麼整個句子就稱做語句(statement)，第五章會詳細講解。正則表達式

在上述代碼中，以分號結束的行均是一條語句，粗略的講，表達式僅僅計算出一個值（或者它包含的值咱們並不關心）但他們改變程序運行狀態。在上文中，已經見過變量聲明語句和賦值語句。另外一類語句是「控制結構」（control structure），好比條件判斷和循環，在介紹完函數後，咱們給出相關示例代碼。express

函數是帶有名稱和參數的javascript代碼段，可一次定義屢次使用。第8章會正式詳細地講解函數。與對象和數組同樣，本書不少地方提到函數，這裏給一些簡單的示例代碼。

         //函數是一段待遇參數的javascript代碼段，能夠屢次調運
             
            function plus1(x) { //定義了一個名爲plus1的函數，並帶有參數x
                    return x + 1; //返回一個比傳入大1的值。
                } //函數的代碼塊是由花括號包裹起來的部分
                
            plus1(y) //
            var square =function(x){       //函數是一種值，能夠賦值給變量
                return x*x;               //計算函數的值
            };                         //分號表示了賦值語句的結束
            square(plus1(y));           //在一個表達式中石油兩個函數

當將函數和對象和寫在一塊兒時，函數就編程了「方法」（method）

     //當函數賦值給對象的屬性，咱們稱爲
             //"方法",全部的javascript對象都包含方法
              var a =[];          //建立一個空數組
              a.push(1,2,3);        //向push()方法向數組中添加對象
              a.reverse();           //數據反轉
                               //  document.write(a)
             //咱們能夠定義子的方法，"this"關鍵字是對定義方法
             //的對象的引用，這裏的例子是上文中提到的包含兩個點位置信息的數組。
             points.dist =function(){   //定義一個方法計算兩點之間的距離
                 var p1 =this[0];    //經過this關鍵字得到當前數組的引用
                 var p2 =this[1];   //並取得調用的數組前兩個元素
                 var a =p2.x- p1.y;  // x座標軸上的距離
                 var b =p2.y - p1.y;  //y座標軸上的距離
                 return Math.sqrt(a * a + "咱們稱爲" + b * b); //勾股定理
             };   //Math.sqrt()計算平方根
             points.dist()          // =>求兩個點之間的距離

如今，給出一些控制語句的例子，這裏的示例函數體內包含了最多見的javascript的控制語句

 //這裏javascript語句使用該語法包含條件判斷和循環
             //使用了相似java c++和其它語言的語法

            function abs(x) { //求絕對值函數
                if (x >= 0) { //if
                    return x; //若是true則執行這裏代碼
                } else { //false執行
                    return -x;
                }
            }

            function factprial(n) { //計算階乘
                var product = 1; //給product賦值爲1
                while (n > 1) { //()值表達式爲 true時循環執行{}內容
                    product *= n; //product = product * n的簡寫
                    n--; // n = n-1寫法
                } //循環結束
                return product; //返回 product
            }
            factprial(4) // =>24  1*4*3*2  document.write(factprial(4))

            function factorial2(n) { //實現循環的另一種寫法
                var i, product = 1; //
                for (i = 2; i <= n; i++) //將i從2自增到n
                    product *= i; //循環體，當循環體中只有一句代碼，省略{}
                return product; //計算返回好的階乘
            }
            factorial2(5) //document.write(factorial2(5))  =>120 : 1*2*3*4*5

javascript是一種面向對象的編程語言，但和傳統的頁面對象有有很大的區別，第9章將詳細講解的javascript的面向對象，這章會有大量的示例代碼，是本書最長的一章。

這裏有一個簡單的示例，這段代碼展現瞭如何在javascript中定義一個類來表示2D面的幾何中的點。這個類實例化的對象擁有一個名爲r()的方法，用來計算改點到原點的距離。

         //定義一個構造函數以初始化一個新的point對象
            function Point(x, y) { //構造函數通常均以大寫字母開始
                this.x = x; //關鍵字this指代初始化的實例
                this.y = y; //將函數參數存儲爲對象的屬性
            }

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

             //經過構造函數prototype對象賦值
             //來給Point對象定義方法
            Point.prototype.r = function() {
                return Math.sqrt( //返回x平方+y平方的平方根
                    this.x * this.x + //this指代調運這個方法的對象
                    this.y * this.y);
            };
            
            //Point的實例對象p（以及全部的point實例對象）繼承了方法r()
            p.r() // => 1.4142135623730951 /document.write(p.r())

第9章是第一部分的精華所在，後續的各章作了零星的延伸，將帶領咱們走向對javascript探索的尾聲。

第十章主要講正則表達式進行的文本匹配模式。

第11章主要護額石膏javascript的語言核心的子集和超集。

在進入客戶端的javascript的內容以前，第12章咱們只要介紹兩種在web以外的javascript運行環境。

2.客戶端javascript

javascript語言核心部分的內容知識點交叉引用比較多，且知識層次感不分明。在客戶端javascript的內容編排有了很大的改變。依照本章學習，徹底能夠在web瀏覽器中使用javascript。（但你若是想經過閱讀本書學習javascript的話，不能只將眼光放在第二部分）第13章是第二部分的第一章，該章介紹如何讓javascript在web瀏覽器中運行起來。第14章講解到web瀏覽器腳本技術，並涵蓋客戶端javascirpt的一席重要的全局函數。

例如：

    function moveon() {
            //經過對話框詢問一個問題
            var answer = confirm("準備好了嗎？");
            //單擊肯定，瀏覽器會加載一個新的頁面
            if (answer) window.location = "http://www.baidu.com";
        }
        //在1分鐘(60000毫秒後執行這個函數)
        setTimeout(moveon,300);

第十五章會講述javascript如何操縱html樣式定義內容的展現方式.第十五章的內容將更加務實，經過腳本操做html文檔內容，它將展現如何選取特定的網頁元素，如何給html元素設置屬性，若是修改元素的內容，以及如何給文檔添加新的節點

如下實例函數展現了若是查找和修改基本的文章內容

//在document中的一個指定信息的區域樹超調試信息
         //若是document上不存在這個元素，則建立一個
        function debug(msg) {
            //經過查看html元素的    id屬性來查找文檔的調試部分
            var log = document.getElementById("debuglog");

            //若是元素不存在，則建立一個
            if (!log) {
                log = document.createElement("div"); //建立一個新的div元素
                log.id = "debuglog"; //爲在各方元素的id賦值
                log.innerHTML = "<h1>Debug Log</h1>"; //自定義初始內容
                document.body.appendChild(log); //將其添加到文檔末尾
            }
            //將消息包含在<pre>中，並添加到log中
            var pre = document.createElement("pre"); //建立pre元素
            var text = document.createElement(msg); //將msg包含在一個文本節點上
            pre.appendChild(text); //文本添加到pre
            log.appendChild(pre); //pre添加到log
        }

在第十六章會講到如何使用javascript操做元素，這一般會使用到元素的style和class屬性

function hide(e, reflow) { //經過jvascript操縱元素和隱藏元素e
                if (reflow) { //若是第二個參數爲true
                    e.style.display = "none" //隱藏這個元素，其佔用的空間也銷售
                } else {
                    e.style.visibility = "hidden"; //將e隱藏，保留其佔用的空間
                }
            }

            function highlight(e) { //經過設置css來高亮顯示e
                if (!e.className) e.className = "highcss";
                else
                    e.className += "highcss";
            }

能夠經過javascript來控制元素的內容和css樣式，一樣也能夠經過事件處理程序(event handler)來定義文檔行爲，事件處理辰星是一個在瀏覽器中心註冊的javascript函數，當特定的事件發生時瀏覽器即可以調用這個函數。
一般咱們關注的事件類型是鼠標點擊和鍵盤按鍵事件（智能手機爲各類觸碰事件）。或者說當瀏覽器完成文檔的加載，當用戶改變窗口的大小或當用戶向表單中輸入數據時便會觸發一我的事件。
第17章會詳細描述如何定義，註冊時間處理程序，以及在事件發生時瀏覽器是如何調用他們的。
自定義事件處理程序最簡單的方法，給html的以on爲前綴的屬性綁定一個回調，當寫一些簡單的程序測試時，最實用的方法就是給「onclick」處理程序綁定回調。假設以上將上文的debug()和hide()這個函數保存至debug.js和hide.js的文件中，那麼就能夠簡單些一個html測試文件，來給onclick的屬性指定一個事件處理程序。以下

<script type="text/javascript">
         //在document中的一個指定信息的區域樹超調試信息
         //若是document上不存在這個元素，則建立一個
        function debug(msg) {
            //經過查看html元素的    id屬性來查找文檔的調試部分
            var log = document.getElementById("debuglog");

            //若是元素不存在，則建立一個
            if (!log) {
                log = document.createElement("div"); //建立一個新的div元素
                log.id = "debuglog"; //爲在各方元素的id賦值
                log.innerHTML = "<h1>Debug Log</h1>"; //自定義初始內容
                document.body.appendChild(log); //將其添加到文檔末尾
            }
            //將消息包含在<pre>中，並添加到log中
            var pre = document.createElement("pre"); //建立pre元素
            var text = document.createElement(msg); //將msg包含在一個文本節點上
            pre.appendChild(text); //文本添加到pre
            log.appendChild(pre); //pre添加到log
        }

        function hide(e, reflow) { //經過jvascript操縱元素和隱藏元素e
            if (reflow) { //若是第二個參數爲true
                e.style.display = "none" //隱藏這個元素，其佔用的空間也銷售
            } else {
                e.style.visibility = "hidden"; //將e隱藏，保留其佔用的空間
            }
        }

        function highlight(e) { //經過設置css來高亮顯示e
            if (!e.className) e.className = "highcss";
            else
                e.className += "highcss";
        }
    </script>

    hello
    <button onclick="hide(this,true); debug('hide buttoon 1');">hide1</button>
    <button onclick="hide(this);debug('hide button 2');">hide2</butotn>

下面的這些客戶端javascript用到了事件，它給了一個很重要的事件：「load」事件註冊了一個事件處理辰星。同事也展現註冊"click"事件處理函數更高級的一種方法

<script type="text/javascript">
         //"load"事件在只有在文檔加載後才能完成觸發
         //如一般須要等待load事件發生後才能執行javascript代碼
        window.onload = function() {
            //找到文檔中全部的img標籤
            var images = document.getElementsByTagName("img");

            //遍歷images，給每一個節點的click事件添加處理程序
            //在點擊圖片的時候將圖片隱藏
            for (var i = 0; i < images.length; i++) {
                var imge = images[i];
                if (imge.addEventListener) //註冊時間處理程序的另一種方法
                    imge.addEventListener("click", hide, false);
                else //兼容ie8之前操做
                    imge.attachEvent("onclick", hide);
            }
            //這即是上面註冊事件的處理函數
            function hide(evnet) {
                event.target.style.visibility = "hidden";
            }
        };
    </script>

在15-17章講述瞭如何使用javascript來控制網頁的內容，樣式以及行爲（事件處理），這章討論api多少有些複雜，並且至今有糟糕的瀏覽器兼容性，正是這個緣由，不少javascript程序員選擇使用"庫"或「框架」來簡化他們的編碼工做，最流行的莫非jQuery，第19章介紹jQuery庫

function debug(msg) {
                var log = $("#debuglog");

                if (log.length == 0) {
                    log = $("<div id='debuglog'><h1>debuglog</h1></div>");
                    log.appendTo(document.body);
                }

                document.write(log)
                log.append($("<pre/>").text(msg));
            };

目前咱們所提到的第二個部分的4章都是圍繞網頁展開討論的，後續的4章將着眼店轉向web應用，這幾張內容不是討論如何編寫操控內容。樣式和興旺的腳本使用web瀏覽器來渲染文檔；而是講解如何將web瀏覽器做爲應用平臺。並描述了用於支持更復雜精細的客戶端web應用和現代瀏覽器的api。
第18章講解如何使用javascript來發起http請求。
第20章描述數據存儲機制以及客戶端應用的會話狀態保持，第21章涵蓋基於講解html5所驅動的新一代應用api/網絡存儲圖形，這些都是基於哪些支持新api的瀏覽器開發。浙江是你做爲javascript程序員最激動人心的時刻。最後4章沒有太多的示例代碼。下面的例子使用了這些新的api.

例子：http://file.ahthw.com/lx/c0001.html

（本篇已經完結）