1、瀏覽器的核心和JS引擎

1.1、瀏覽器核心

   網頁瀏覽器的核心就是渲染引擎(renderingEngine)，也被稱為排版引擎(Layout Engine)或模板引擎。它負責取得網頁的內容和結構（HTML、XML、影象等）、樣式資訊（CSS等）以及計算網頁的顯示方式，然後會輸出至顯示器。也就是說，渲染引擎決定了瀏覽器如何顯示網頁的內容以及格式，因為不同的瀏覽器核心對網頁編寫語法的解析有所不同，所以同一網頁在不同的核心瀏覽器裡的展示效果就可能不同。

    因為每一種渲染引擎都有其代表的瀏覽器，所以常常會把渲染引擎的名稱和瀏覽器的名稱混用，比如常說的IE核心、Chrome核心,其實這樣子是不太合理的，因為一個完整的瀏覽器不僅僅只有渲染引擎，還有自己的介面框架和其它的功能支撐，比如JS引擎，而且一個瀏覽器也可以支援多個核心。下面羅列一下幾款主流的排版引擎和瀏覽器。

1.2、JS引擎

    說完了渲染引擎，接下來說說 JS 引擎。顧名思義，JS引擎就是用來解釋JavaScript程式碼或者JScript程式碼的虛擬機器，內建在瀏覽器中。譬如說，一個算圓周率的網頁，渲染引擎把頁面的結構和樣式給顯示出來了，但最終的資料需要用Javascript 程式或者或者JScript程式來計算，而Javascript 程式或者或者JScript程式是需要JS引擎解釋執行的，所以JS引擎的執行效率對整個網頁的速度有著很大影響。瀏覽器支援不同JS引擎：

2、JavaScript介紹

2.1、是什麼

    JavaScript由網景公司推出，是執行在客戶端瀏覽器中的解釋性指令碼語言，依賴瀏覽器中的JS引擎解釋執行，程式碼不需要編譯；具有跨平臺特性，在絕大多數瀏覽器和作業系統下都能執行。

   備註：JScript是由微軟開發的語言，抄襲JavaScipt，使用方法和功能都一樣。1997年，Ecma國際制定ECMAScript標準，網景的JavaScript和微軟的JScript都遵循此標準各自發布新版本，但基本是相容互用的。

2.2、做什麼

    在前端技術中，Html負責結構，CSS負責樣式，Javascript通過在HTML頁面中嵌入動態文字讀寫HTML元素新增互動行為，具體用途有以下幾點：

    1、對客戶端瀏覽器的事件(載入、點選、移動滑鼠等)做出響應，修改HTML標籤屬性、增加、刪除HTML標籤等。

    2、在資料被提交到伺服器之前驗證資料

    3、檢測訪客的瀏覽器資訊

    4、控制cookies，包括建立和修改等

    5、基於node.js技術進行伺服器端程式設計。

2.3、組成部分

    該語言的提下架構有三部分組成:

2.4、在Html文件中如何使用

3、組成部分一：ECMAScript

3.1、變數及資料型別

    JavaScript是一種弱型別的程式設計語言，使用關鍵字var（也可以不用）宣告變數也可以，根據賦值自動識別該變數的資料型別。安全的程式設計是：使用var宣告同時初始化。

3.1.1、基本資料型別

b、常量

         就是字面變數，只要賦值在其生命週期內就不允許改變值，值可以是除undefined型別的基本資料型別和物件型別，語法格式為const 變數名:資料型別 = 值;。JavaScript中有個內建的數字常量NaN，表示“非數值”，程式由於某種原因發生計算錯誤後將會產生一個沒有意義的數值，此時JS引擎就會返回NaN。

b、Number型別

         主要是整數（varnum1 = 36;）和浮點數（var num2 = 36.00;）。

c、Boolean型別

         布林型別表示一個邏輯數值，只有兩個取值true和false，當把數值型別轉為Boolean型別時，只有0及0.0是false，其他數值都是true。var bool = true;

d、undefined型別

         指僅宣告未賦值的變數。如varperson;當在瀏覽器中使用documen t.write(person + '<br\>');打印出來時會輸出undefined。

e、null型別

         指該變數被賦予了空值，null不同於空的字串、0或undefined。如var car =null; 在瀏覽器中使用documen t.write(car + '<br\>');打印出來時會輸出null。

3.1.2、物件Object型別

    就是3.5中使用var宣告但是使用自定義物件或者內建物件賦值的變數，這種變數內部既包含屬性也包含方法。

3.1.3、JS變數的作用範圍

    是指可以訪問該變數的程式碼區域。

a、全域性變數

這種變數通常定義在函式體外，所以可以在整個HTML文件中使用。

b、區域性變數

這種變數通常定義在函式體內，所以只能在在函式體內使用

3.2、運算子和表示式

3.2.1、算術運算子

     普通運算子：  +加  -減  *剩   /除   %取餘  ++自加  --自減   

     位運算子：&與運算 |或運算  ^異或運算  ~取補運算  <<左移位  >>右移位

3.2.2、賦值運算子

     基本賦值運算子：=  

     與算術運算子組合型：+=  -= *=  /=  &=  |=   ^=

3.2.3、關係運算符

      == 、 != 、> 、>=、<、  <=

3.2.4、邏輯運算子

      &&邏輯與 、 ||邏輯或 、 ！邏輯非

3.2.5、條件運算子

      條件表示式？表示式1：表示式2

3.2.5、表示式

   表示式，是由字面資料、變數、運算子和分組符號（括號）等以能求得數值為目所進行的組合。可以分為兩種：算術表示式是是通過算術運算子來進行運算的數學公式，邏輯表示式是通過四種運算子判斷真假的表示式，比如賦值運算的結果永遠是True。

   一個表示式中，四種運算子和分組符號的優先級別大致為：分組符號→乘/除/餘→加/減→關係運算符→邏輯運算子→賦值運算子；同級的運算是按從左到右次序進行；多層括號由裡向外。

3.3、程式控制語句

3.3.1、條件判斷語句

    if語句     /   if-else語句     /    if...elseif語句

3.3.2、迴圈控制語句

    while(){}語句  /   do{}while()語句  /   for(語句1;語句2;語句3){語句4}語句

3.3.3、跳轉語句

     跳轉語句其實僅僅是屬於控制迴圈的，但實際應用中通常是放在迴圈語句內部的條件判斷語句中。

     break:  退出該語句所處的最內層的迴圈

     continue:終止本次迴圈，直接執行語句3開始下一次迴圈

3.4、函式

   JavaScript雖然也支援物件程式設計，但實際工作中仍然採用函數語言程式設計，一段js程式中大約95%的程式碼都包含在函式中。JavaScript是事件模型的程式語言，網頁中的頁面載入、使用者單機、移動游標等都會產生事件，當Html就通過事件屬性產生這些事件時，就會呼叫js中的對應函式響應這個事件。

3.5.1、自定義函式

第一步、定義函式

第二步、呼叫函式

3.4.2、JS引擎內建函式

    JS引擎中自帶一部分函式，這些函式不用引入也不用自定義就可以直接呼叫，使用這些函式可提高程式設計效率，以下是常用的5個......

a、eval函式

   接受一個字串型別的引數，將這個字串作為程式碼在上下文環境中執行，並return執行結果。

b、isFinite函式

   如果引數是數值型別且是有限型就返回true；如果是數值型別但非有限型或者是非數值型別就返回false。如isFinite(-3)就返回ture；isFinite(12/01)就返回false。

c、isNaN函式

   如果引數為為保留值NaN，就返回true；如果不是保留值就返回false。如isNaN(123)就返回false，isNaN(2009/1/1)就返回true。

d、parseInt和parseFloat函式

    parseInt函式可以把整數型字串轉換為整數，parseFloat函式可以把浮點型字串轉換為浮點數。

e、Number和String函式

    Number函式可以把引數物件轉換為數值，String函式可以把引數物件轉換字串。

f、JS引擎內建類和DOM物件/BOM物件提供的函式

3.5、JavaScript面向物件程式設計

3.5.1、自定義類和物件

   JavaScript雖然也支援物件程式設計，但實際工作中仍然採用函數語言程式設計，一段js程式中大約95%的程式碼都包含在函式中。所以這裡就不介紹JavaScript中類和物件的使用方法了，僅僅介紹JS引擎中內建的幾個物件。

3.5.2、JS引擎內建類

a、字串類String

b、數學類Math

使用邏輯和字串類是一樣的，實際使用的時候可以查閱手冊文件。

c、日期類Date

使用邏輯和字串類是一樣的，實際使用的時候可以查閱手冊文件。

d、陣列類Array

使用邏輯和字串類是一樣的，實際使用的時候可以查閱手冊文件。

3.5.3、內建物件：DOM和BOM

4、組成部分二：文件物件模型（DOM）

    提供處理html/xml文件的API，實現對元素節點屬性、文字和元素節點的動態的增刪改查。W3C DOM能處理html和xml文件；有些介面只適用於html文件，這些介面屬於HTML DOM；有些介面只適用於xml文件，這些介面屬於XML DOM；所以HTML DOM和XML DOM的方式基本不會使用到，使用W3C DOM就足夠了。

4.1、DOM主體架構繼承圖

a、node介面

此物件並不代表某個節點，而是代表文件所有節點的通性，主要有3個子物件

b、Document介面

    此介面並不代表某個節點，而是代表整個文件，有1個子物件HTMLDocument

c、Element介面

     此接口才是代表文件中某個節點，，有1個子物件、一個孫子物件和一批重孫子物件，繼承關係是Node—>Element—>HTMLElement，再往下就是一批重孫子物件了，具體對應html的一批標籤。

d、Text介面

   此介面代表文件中的文字節點，比如<p>我是段落</p>，“我是段落”並不是直接存在p節點裡，而是作為p節點內部的Text子節點的nodeValue存在。

   該介面的繼承關係是Node—>CharacterData —>Text。

4.2、DOM介面的實際應用

a、hmtl標籤屬性的增刪改查

b、hmtl文字的修改

c、獲取物件的第二種方式

d、建立HTML元素節點

e、建立新HTML文字節點

f、刪除節點

5、組成部分三：瀏覽器物件模型（BOM）

    BOM即瀏覽器物件模型，提供了處理瀏覽器物件的API，頂級物件是window物件，某些屬性和方法的返回值也是window，並且html裡或者js裡使用window物件的屬性和方法時不需要window.XXX這種新式，僅用屬性名和方法名就可以了，常用屬性和方法如下：

  BOM中的windows物件及其子物件雖然有很多屬性和方法，但常用只有建立對話方塊。對話方塊的作用是使用者與瀏覽器進行交流，有提示、選擇和獲取資訊的功能，JavaScript提供了三個標準的對話方塊。

5.1、提示對話方塊alert()

5.2、選擇對話方塊confirm()

5.3、輸入對話方塊prompt()

6、瀏覽器JS引擎相容案例及解決

6.1、為何會有相容問題

    瀏覽器的相容可以分為兩個方面，一是核心相容：核心負責解析html和css語言，渲染頁面，如果不同瀏覽器使用的核心不一樣，在開啟同一個HTML網頁時就可能出現頁面顯示不一致的問題，主要體現在CSS樣式方面；二是JS引擎相容：JS引擎負責解釋JavaScript程式，提供互動功能，如果不同瀏覽器使用的JS引擎不一樣，在通過HTML頁面解釋同一個Java Script程式時就可能出現互動效果不一致的問題。

6.2、核心相容的案例及及解決方案

案例一

         以《3.5.1、呼叫函式》為例，在表單提交中，如果<input>使用submit按鈕觸發提交操作後，在IE和Firefox瀏覽器就會維持終端列印介面，但Chrome就一閃即過。解決方按：<input>使用button按鈕觸發提交操作，IE、Firefox和Chrome瀏覽器都可以維持終端列印介面。

案例二

    W3CDOM裡node節點下的insertBefore()函式，只有一個引數時，在IE瀏覽器裡和appendChild()函式的功能是一樣的，用以把引數元素物件插入在父節點的最後子節點後；但在Chrome和Firefox瀏覽器裡，當呼叫此函式時console裡就會報錯缺少一個引數。解決方案：不要投機取巧，按W3C的標準規範書寫，基於兩個物件，第一個是被插入物件；第二個是參考物件。

案例三

     形如的結構，在IE瀏覽器裡元素節點HTMLDivElement只有兩個子節點，節點名是

，但是在Chrome和Firefox瀏覽器裡元素節點HTMLDivElement就有5個子節點，節點的nodeName是。這種差異會導致的兩種情況是，根據childNodes陣列的下標、firstChild屬性、lastChild屬性等插入新子節點時，要特別留意那三個看不見的節點；根據childNodes陣列的下標、firstChild屬性、lastChild屬性等刪除子節點時，也要特別留意那三個看不見的節點。

  ...................