Javascript核心讀書有感之語言核心

更新時間：2015年02月01日 16:56:30 投稿：hebedich

本節(jié)是javascript語言的一個快速預(yù)覽，也是本書的第一部分快速預(yù)覽。有想閱讀此書的小伙伴，建議先讀下本系列文章。

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

一：javascript語言核心

本章之后，我們將主要關(guān)注javascript的基礎(chǔ)知識。第二章我們講解javascript的注釋，分號和unicode字符集；第三章會更有意思，主要講解javascript的變量和賦值

這里有一些實例代碼說明前兩章的重點內(nèi)容。

<script type="text/javascript">

             //雙斜杠之后之后的內(nèi)容都于屬于注釋

             //仔細閱讀這里的注釋，它將會對javascript代碼做解釋

             // 變量是表示值的一個符號名字

             // 變量是通過var關(guān)鍵字聲明

            var x; //聲明一個變量x

             //值可以通過符號賦值給變量

            x = 0; //現(xiàn)在變量x的值為0

            x //通過變量名獲取其值。

             //javascript支持多種數(shù)據(jù)類型

             x = 1; //數(shù)字

            x = 0.01; //整數(shù)和實數(shù)共用一種數(shù)據(jù)類型

            x = "hello world"; //由雙引號內(nèi)的文本構(gòu)成字符串

            x = 'hello world'; //單引號同樣構(gòu)成字符串。

            x = true; //布爾值

            x = false; //另外一個布爾值

            x = null; //null是一個特殊的值。意思是空

            x = undefined; //undefined和null非常類似

        </script>

在javascript中，最重要的類型就是對象和數(shù)組，第六章介紹對象，第7章介紹數(shù)組。對象和數(shù)組在 javascript是如此重要。以至于在本書中到處能看到他們的身影。

復制代碼代碼如下:

<script type="text/javascript">

             //javascript中最重要的類型就是對象

             //對象是名/值對的集合，或字符串值到映射值的集合。

            var book = { //對象是由花括號括起來的

                topic: "javascript", //屬性"topic"的值是javascript

                fat: true //屬性fat的值是true

            }; //右邊的花括號結(jié)束。

             //通過“.”或“[]”來訪問對象屬性。

            book.topic //=>"javascript"

             book["fat"] //=>true另外一種獲取屬性的方式、

             book.author = "ahthw"; //通過賦值創(chuàng)建一個新的屬性

            book.content = {}; //{}是一個空對象。它沒有屬性

             //javascript同樣支持數(shù)組（以數(shù)組為索引的列表）

            var primes = [2, 3, 5, 7]; //擁有4個值的組合，由“[”“]”劃定邊界

            primes[0] //=>2：數(shù)組的第一個對象，索引為0

            primes.length //=>4,數(shù)組中元素的個數(shù)

            primes[primes.length-1]  //=>7:數(shù)組中最后一個元素

            primes[4] =9; //通過賦值來增加新的元素

            primes[4] =11;//通過賦值來改變已有的元素

            var empty = [];//空數(shù)組，有0個元素

            empty.length   //=>:0

            //數(shù)組和對象中都可以包含另一個數(shù)組或者對象。

            var point =[   //具有兩個元素的數(shù)組

            {x:0,y:0},        //每個元素都是一個對象

            {x:1,y:1}

            ];

            var data ={           //一個包含兩個屬性的對象

                trial1:[[1,2],[3,4]],  //每一個對象都是數(shù)組

                trial2:[[2,3],[4,5]]     //數(shù)組的元素也是數(shù)組

            };

        </script>

上面代碼中通過方括號定義數(shù)組元素和通過花括號定義對象屬性名和屬性值之間的映射關(guān)系的語法陳偉初始化表達式(initalizer expression),第四章有專門介紹.表達式是javascript中的一個短語，這個短語可以通過運算得出一個值，通過","和"[]"來引用對象屬性或數(shù)組元素的值構(gòu)成一個表達式。

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

復制代碼代碼如下:

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

             //最常見的算術(shù)運算符

             3+2  // =>5 加法

             3-2   // =>減法

             3*2    // =>乘法

             3/2   // =>除法

             point[1].x -point[0].x     //=>復雜的運算也能照常工作

             "3"+"2"   // => 32.可以完成加法運算，也可以完成 字符串拼接。

             //javascript定義了一些算術(shù)運算符作為簡寫形式

             var count = 0; //定義一個變量

             count++;      //自增1

             count--;       //自減1

             count +=2;     //自增2 和 "count = count + 2;"寫法一樣

             count *=3      //自乘3. 和"count = count*3; "寫法一樣

             count          //=> 6: 變量名本身也是一個表達式

             //相等關(guān)系運算符用來判斷兩值是否相等

             //不等，大于，小于運算符運算結(jié)果是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)，第五章會詳細講解。

在上述代碼中，以分號結(jié)束的行均是一條語句，粗略的講，表達式僅僅計算出一個值（或者它包含的值我們并不關(guān)心）但他們改變程序運行狀態(tài)。在上文中，已經(jīng)見過變量聲明語句和賦值語句。另一類語句是“控制結(jié)構(gòu)”（control structure），比如條件判斷和循環(huán)，在介紹完函數(shù)后，我們給出相關(guān)示例代碼。

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

復制代碼代碼如下:

         //函數(shù)是一段待遇參數(shù)的javascript代碼段，可以多次調(diào)運

            function plus1(x) { //定義了一個名為plus1的函數(shù)，并帶有參數(shù)x

                    return x + 1; //返回一個比傳入大1的值。

                } //函數(shù)的代碼塊是由花括號包裹起來的部分

            plus1(y) //

            var square =function(x){       //函數(shù)是一種值，可以賦值給變量

                return x*x;               //計算函數(shù)的值

            };                         //分號表示了賦值語句的結(jié)束

            square(plus1(y));           //在一個表達式中石油兩個函數(shù)

當將函數(shù)和對象和寫在一起時，函數(shù)就編程了“方法”（method）

復制代碼代碼如下:

     //當函數(shù)賦值給對象的屬性，我們稱為

             //"方法",所有的javascript對象都包含方法

              var a =[];          //創(chuàng)建一個空數(shù)組

              a.push(1,2,3);        //向push()方法向數(shù)組中添加對象

              a.reverse();           //數(shù)據(jù)反轉(zhuǎn)

                               //  document.write(a)

             //我們可以定義子的方法，"this"關(guān)鍵字是對定義方法

             //的對象的引用，這里的例子是上文中提到的包含兩個點位置信息的數(shù)組。

             points.dist =function(){   //定義一個方法計算兩點之間的距離

                 var p1 =this[0];    //通過this關(guān)鍵字獲得當前數(shù)組的引用

                 var p2 =this[1];   //并取得調(diào)用的數(shù)組前兩個元素

                 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()          // =>求兩個點之間的距離

現(xiàn)在，給出一些控制語句的例子，這里的示例函數(shù)體內(nèi)包含了最常見的javascript的控制語句

復制代碼代碼如下:

 //這里javascript語句使用該語法包含條件判斷和循環(huán)

             //使用了類似java c++和其它語言的語法

            function abs(x) { //求絕對值函數(shù)

                if (x >= 0) { //if

                    return x; //如果true則執(zhí)行這里代碼

                } else { //false執(zhí)行

                    return -x;

                }

            }

            function factprial(n) { //計算階乘

                var product = 1; //給product賦值為1

                while (n > 1) { //()值表達式為 true時循環(huán)執(zhí)行{}內(nèi)容

                    product *= n; //product = product * n的簡寫

                    n--; // n = n-1寫法

                } //循環(huán)結(jié)束

                return product; //返回 product

            }

            factprial(4) // =>24  1*4*3*2  document.write(factprial(4))

            function factorial2(n) { //實現(xiàn)循環(huán)的另外一種寫法

                var i, product = 1; //

                for (i = 2; i <= n; i++) //將i從2自增到n

                    product *= i; //循環(huán)體，當循環(huán)體中只有一句代碼，省略{}

                return product; //計算返回好的階乘

            }

            factorial2(5) //document.write(factorial2(5))  =>120 : 1*2*3*4*5

javascript是一種面向?qū)ο蟮木幊陶Z言，但和傳統(tǒng)的頁面對象有有很大的區(qū)別，第9章將詳細講解的javascript的面向?qū)ο螅@章會有大量的示例代碼，是本書最長的一章。

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

復制代碼代碼如下:

         //定義一個構(gòu)造函數(shù)以初始化一個新的point對象

            function Point(x, y) { //構(gòu)造函數(shù)一般均以大寫字母開始

                this.x = x; //關(guān)鍵字this指代初始化的實例

                this.y = y; //將函數(shù)參數(shù)存儲為對象的屬性

            }

             //使用new關(guān)鍵字和構(gòu)造函數(shù)來創(chuàng)建一個實例

            var p = new Point(1, 1); //平面幾何中的點1,1,

             //通過構(gòu)造函數(shù)prototype對象賦值

             //來給Point對象定義方法

            Point.prototype.r = function() {

                return Math.sqrt( //返回x平方+y平方的平方根

                    this.x * this.x + //this指代調(diào)運這個方法的對象

                    this.y * this.y);

            };

            //Point的實例對象p（以及所有的point實例對象）繼承了方法r()

            p.r() // => 1.4142135623730951 /document.write(p.r())

第9章是第一部分的精華所在，后續(xù)的各章做了零星的延伸，將帶領(lǐng)我們走向?qū)avascript探索的尾聲。

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

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

在進入客戶端的javascript的內(nèi)容之前，第12章我們只要介紹兩種在web之外的javascript運行環(huán)境。

2.客戶端javascript

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

例如：

復制代碼代碼如下:

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

第十五章會講述javascript如何操縱html樣式定義內(nèi)容的展示方式.第十五章的內(nèi)容將更加務(wù)實，通過腳本操作html文檔內(nèi)容，它將展示如何選取特定的網(wǎng)頁元素，如何給html元素設(shè)置屬性，如果修改元素的內(nèi)容，以及如何給文檔添加新的節(jié)點

以下實例函數(shù)展示了如果查找和修改基本的文章內(nèi)容

復制代碼代碼如下:

//在document中的一個指定信息的區(qū)域樹超調(diào)試信息
         //如果document上不存在這個元素，則創(chuàng)建一個
        function debug(msg) {
            //通過查看html元素的    id屬性來查找文檔的調(diào)試部分
            var log = document.getElementById("debuglog");

            //如果元素不存在，則創(chuàng)建一個
            if (!log) {
                log = document.createElement("div"); //創(chuàng)建一個新的div元素
                log.id = "debuglog"; //為在各方元素的id賦值
                log.innerHTML = "<h1>Debug Log</h1>"; //自定義初始內(nèi)容
                document.body.appendChild(log); //將其添加到文檔末尾
            }
            //將消息包含在<pre>中，并添加到log中
            var pre = document.createElement("pre"); //創(chuàng)建pre元素
            var text = document.createElement(msg); //將msg包含在一個文本節(jié)點上
            pre.appendChild(text); //文本添加到pre
            log.appendChild(pre); //pre添加到log
        }

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

復制代碼代碼如下:

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

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

可以通過javascript來控制元素的內(nèi)容和css樣式，同樣也可以通過事件處理程序(event handler)來定義文檔行為，事件處理辰星是一個在瀏覽器中心注冊的javascript函數(shù)，當特定的事件發(fā)生時瀏覽器便可以調(diào)用這個函數(shù)。
通常我們關(guān)注的事件類型是鼠標點擊和鍵盤按鍵事件（智能手機為各種觸碰事件）。或者說當瀏覽器完成文檔的加載，當用戶改變窗口的大小或當用戶向表單中輸入數(shù)據(jù)時便會觸發(fā)一個人事件。

第17章會詳細描述如何定義，注冊時間處理程序，以及在事件發(fā)生時瀏覽器是如何調(diào)用他們的。

自定義事件處理程序最簡單的方法，給html的以on為前綴的屬性綁定一個回調(diào)，當寫一些簡單的程序測試時，最實用的方法就是給“onclick”處理程序綁定回調(diào)。假設(shè)以上將上文的debug()和hide()這個函數(shù)保存至debug.js和hide.js的文件中，那么就可以簡單些一個html測試文件，來給onclick的屬性指定一個事件處理程序。如下

復制代碼代碼如下:

<script type="text/javascript">

         //在document中的一個指定信息的區(qū)域樹超調(diào)試信息

         //如果document上不存在這個元素，則創(chuàng)建一個

        function debug(msg) {

            //通過查看html元素的    id屬性來查找文檔的調(diào)試部分

            var log = document.getElementById("debuglog");

            //如果元素不存在，則創(chuàng)建一個

            if (!log) {

                log = document.createElement("div"); //創(chuàng)建一個新的div元素

                log.id = "debuglog"; //為在各方元素的id賦值

                log.innerHTML = "<h1>Debug Log</h1>"; //自定義初始內(nèi)容

                document.body.appendChild(log); //將其添加到文檔末尾

            }

            //將消息包含在<pre>中，并添加到log中

            var pre = document.createElement("pre"); //創(chuàng)建pre元素

            var text = document.createElement(msg); //將msg包含在一個文本節(jié)點上

            pre.appendChild(text); //文本添加到pre

            log.appendChild(pre); //pre添加到log

        }

        function hide(e, reflow) { //通過jvascript操縱元素和隱藏元素e

            if (reflow) { //如果第二個參數(shù)為true

                e.style.display = "none" //隱藏這個元素，其占用的空間也銷售

            } else {

                e.style.visibility = "hidden"; //將e隱藏，保留其占用的空間

            }

        }

        function highlight(e) { //通過設(shè)置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用到了事件，它給了一個很重要的事件：“l(fā)oad”事件注冊了一個事件處理辰星。同事也展示注冊"click"事件處理函數(shù)更高級的一種方法

復制代碼代碼如下:

            //遍歷images，給每個節(jié)點的click事件添加處理程序
            //在點擊圖片的時候?qū)D片隱藏
            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);
            }
            //這便是上面注冊事件的處理函數(shù)
            function hide(evnet) {
                event.target.style.visibility = "hidden";
            }
        };
    </script>

在15-17章講述了如何使用javascript來控制網(wǎng)頁的內(nèi)容，樣式以及行為（事件處理），這章討論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章都是圍繞網(wǎng)頁展開討論的，后續(xù)的4章將著眼店轉(zhuǎn)向web應(yīng)用，這幾張內(nèi)容不是討論如何編寫操控內(nèi)容。樣式和興旺的腳本使用web瀏覽器來渲染文檔；而是講解如何將web瀏覽器作為應(yīng)用平臺。并描述了用于支持更復雜精細的客戶端web應(yīng)用和現(xiàn)代瀏覽器的api。

第18章講解如何使用javascript來發(fā)起http請求。

第20章描述數(shù)據(jù)存儲機制以及客戶端應(yīng)用的會話狀態(tài)保持，第21章涵蓋基于講解html5所驅(qū)動的新一代應(yīng)用api/網(wǎng)絡(luò) 存儲圖形，這些都是基于哪些支持新api的瀏覽器開發(fā)。浙江是你作為javascript程序員最激動人心的時刻。最后4章沒有太多的示例代碼。下面的例子使用了這些新的api.

您可能感興趣的文章: