js教程

Javascript核心讀書有感之語言核心_基礎知識

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 04:16 PM

javascript核心

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

一：javascript語言核心

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

這裡有一些實例程式碼說明前兩章的重點內容。

複製程式碼程式碼如下:

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

複製程式碼程式碼如下:

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

javascript中最常見的表達式寫法是像下面程式碼這樣的運算子(oprartor)

複製程式碼程式碼如下:

 //運算符作為操作符，產生一個新的值

             //最常見的算術運算子

             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  true:小於

             x 
             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 false 兩個比較都不是true.||表示"或"

             ！ (x == y);           //=>true !表示求反

如果javascript中的「片語」是表達式話，那麼整個句子就稱作語句(statement)，第五章會詳細講解。

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

函數是帶有名稱和參數的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 
                    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 = "

Debug Log

"; //自訂初始內容
                document.body.appendChild(log); //將其新增至文件結尾
            }
            //將訊息包含在

中，並加入到log中<br>
            var pre = document.createElement("pre"); //建立pre元素<br>
            var text = document.createElement(msg); //將msg包含在一個文字節點上<br>
            pre.appendChild(text); //文字新增至pre<br>
            log.appendChild(pre); //pre新增至log<br>
        }<br>

在第十六章會講到如何使用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) { //以設定為以高亮顯示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的屬性指定一個事件處理程序。如下

複製程式碼程式碼如下: