一，瞭解背景知識

 

如圖1所示，相關知識：

    互動：使用者操作，程式處理使用者的操作，返回處理結果

    JS：專門編寫互動的程式語言

2，歷史：

1995年，Nescape：導航瀏覽器，由於當時（如日期驗證12月32號，這個小事都需要發到伺服器驗證，然後又等發回來，一個操作一個來回，伺服器接待不過來的而且當時網路很差10k / s），於是網景公司提出說應該有一種客戶端程式語言：LiceScript，同年java出現（寫一次執行任何地方迷倒了網景公司上層）直到現在前端任何一種語言都不能做到一次編輯處理執行（比如nth-child ie瀏覽器就不行），在前端任何時候都要考慮相容性;為了趕時髦，把LiveScript改為javascript於是委派布蘭登。艾奇（Brendan Eich），10天時間間，像極了的Java的的的的的的的的但一定要比的的的的的的的的JavaScript的簡單。由於作者負氣加趕工寫出了JS，但是問題相當多。由於當時navigaror很出名，JS乘著此瀏覽器的東風傳遍了世界，雖然很多問題，但由於當時就這一種前端指令碼，大家只好硬著頭 使

1996：javaScript1.1 - > ECMA - >的ECMAScript標準（宋江被招安，成為正規軍，否則始終是草寇）

            同年微軟（要不是因為當年微軟搗亂，JS也不至於成為現在這樣）：做個人作業系統，一個視窗賣一臺電腦，它把柄即嵌入的作業系統中，稱也支援ECMAScript中 - >的Jscript

    ECMAScript JacaScript Jscript

    的的的的的的的的ECMAScript中：標準，規定（菜譜）

     JacaScript：netcape按照標準實現的的的的的的的的的JavaScript語言

    的的的的的的的Jscript指令碼：微軟遵照的的的的的的ECMAScript中的標準實現的自己的語言

    兩家競爭各加各的東西，導致程式設計師不得不寫兩套程式碼

1998年年年年年年年年年：W3C：

    DOM：基於ES標準制定的專門操作網頁內容的API（基本實現一次程式碼處處執行）

    API：瀏覽器已經實現的，開發人員直接使用的程式設計介面

BOM：專門操作瀏覽器視窗的API

        沒有標準，各瀏覽器廠商自行定義

所以大部分瀏覽器相容在BOM上

3，組成部分：

                    如圖1所示，EcmaScript的的的的的的的的（的JavaScript的的的的的的的核心語法）

                    2，文件物件模型（DOM）---專門操作網頁內容的API

                    3，瀏覽器物件模型（BOM）---專門操作瀏覽器視窗的API

如圖4所示，基本特點：1，解釋性語言：

                        2，弱型別語言：

                        3，基於物件：

5，用途：客戶端

                如圖1所示，客戶端資料計算（比如購物車數量，總價等等）

                2，表單輸入驗證（比如規定輸入字元個數）

                3，瀏覽器事件的觸發和處理（JS絕大對數正式的功能幾乎都是被事件觸發的）

                如圖4所示，網頁特殊效果的製作（JS，BOM，DOM可以對網頁上一切內容任何位置做任何你想要的操作）----（只有想不到沒有做不到----拼的是想法和創意）

                5，伺服器的非同步資料提交

 

 

 

二搭建環境

 

1，執行的相關知識：瀏覽器包含兩個小軟體

                                   內容排版引擎+ JS解釋引擎

        內容排版引擎：專門解析HTML和渲染CSS的軟體

        JS解釋引擎：專門解釋，執行JS程式的軟體

        解釋執行（JS，HTML，CSS）：預設從上到下，讀一行，執行一行，後讀到的相同內容會覆蓋先讀到的

       指令碼：不需要預編譯，邊解釋邊執行的程式

                  不像Java的的的的的的的的的那樣需要先編譯，查錯

2如何編寫和除錯：

    JS指令碼程式：就是普通文字，EditPlus的中的中的中的中的就可以編寫

    執行JS指令碼：2種：

        1，獨立安裝的JS直譯器中：Node.js的的的的的的的的的 

        2，瀏覽器的JS直譯器中：3處

            1，瀏覽器的控制檯中：控制檯

                （使用）什麼東西的什麼功能

                                的的的的的的的的console.log（“”）

              常用操作：

                再調出前邊執行過的語句，向上箭頭

                調出當前語句後邊執行過的語句：向下箭頭

                清屏：

                編寫多行：移+回車

            2，在網頁中編寫JS：2處

                如圖1所示，在<SCRIPT>元素中：頁面中專門編寫的JS程式的區域

                隨頁面載入過程而解釋執行

                可以在任意位置出現任意個

                想頁面中輸出一句話，

                    使用頁面的輸出功能：

                     document.write（）的的的的的的的的的直接在體元素中寫入HTML

                在當前視窗，彈出警告框，顯示資訊：

                使用視窗的警告功能：

                    [視窗]警報（“XXX”）

                    警告一次，彈一次框，每個框都會阻斷瀏覽器的載入和程式的執行過程

                2，在元素的事件處理函式中：僅能編寫少量程式碼

                    事件：瀏覽器自動或手動觸發的元素狀態改變

                    事件處理函式：在事件名

                                            本質是元素的一個屬性

                                             屬性值是JS語句

                    執行時機：只有事件觸發，才執行;

            3，使用外部的的的的的的的的的.js檔案，單獨儲存JS程式

                1，建立並編寫JS檔案

                2，在頁面中引入js檔案：<script src =“url”> </ script>

    除錯JS程式：都是在控制檯中

        錯誤：程式中的錯誤

        除錯：找出錯誤，並解決錯誤的過程

        如果一個指令碼中發生錯誤不會影響其他指令碼的執行，只會影響本指令碼中，出錯之後的程式碼

        控制檯中會包含重要錯誤資訊：

            錯誤型別：錯誤原因錯誤的位置連結

三，變數和常量

 

1，***變數：記憶體中儲存*一個*資料的儲存空間，再起一個名字

 何時使用：程式中反覆使用的資料，都要先儲存在變數中，在參與運算

如何使用：宣告賦值取值

    1，宣告：在記憶體中建立一個新變數

        如何宣告：var variable量名;

                僅宣告但暫未賦值，預設值為未定義

                變數名：1，不能以數字開頭，僅能包含母，數字和下劃線

                              2，不能用保留字，JS中已經預先

                                    使用的關鍵字;比如名字X

                              3，見名知意

                              4，駝峰命名：第一個單詞首字母

                                小寫，之後每個單詞首字母大寫

    2，賦值：

            *對已經包含值的變數賦新值，則新值會替換舊值

        建議：1，宣告的同時，初始化變數的值

                    VAR變數名=值;

    3，取值：只要使用變數名，在執行時，會被自動替換為變數中的值

    特殊情況：

        如圖1所示，變數僅宣告未賦值時，可以使用，值為未定義

        2，變數未宣告時不能使用（取值），否則報錯，XX未定義;

        3，未宣告的變數可以直接賦值，其實和VAR不同

        ***在程式正式執行前，無用功的宣告變數都會被提升到當前指令碼塊頂部集中宣告，再開始執行程式，賦值留在原地;

                                                          圖1-1 js變數宣告過程

2，常量

    注意點：

        1，常量常量名=值;常量名一般大寫

        2，一旦建立，其值修改不了，即使修改也修改不成功但也不報錯

 

四，資料型別：資料在記憶體中的儲存形式

為什麼要有不同的資料型別：現實中，不同型別的資料，都有專門的用途，如數字天生做比較做計算的，字元用來顯示資訊的

2大類：原始型別的值和引用型別的物件

            原始型別：值直接儲存在變數本地的型別，只有一個值還不能是多個，還不能太複雜

                            5類：數字字串布林值undefined null

            引用型別：值沒有直接儲存在變數本地的型別，變數儲存的是指向實際資料所在位置的地址

1，號碼：表示所有數字

    定義：不加引號的數字---數

    何時使用：只要做計算或比較的數字，都不加引號;反例：銀行卡號，手機號這些都應該是字元型別

                    如：年齡，價格

    所有空間：所有數字都是用64位位元（8位元組位元組）二進位制儲存，整數採用32位二進位制儲存1位元組= 8位

        1.toString（2）---------------- 00000000 00000000 00000000 00000001

        100000000.toString（2）----- 00000101 11110101 11100001 00000000

         不能直接使用數字的的的的的的的的的ToString（2）會報錯，應該先賦給變數;

        

        結論：數值大小和所佔空間，無關;如同現實生活中水杯裝水一樣，裝一點也是這個杯子裝，裝滿也是這個杯子

    特殊情況 - 舍入誤差：計算機中也有無法精確計算的數字而導致計算結果精度偏差; - 不可避免

                    特別是十進位制小數在進行計算時，由於程式執行的時候資料被轉成了二進位制，轉二進位制時小數很容易變為無限二進位制小數

            解決：按指定小數位數四捨五入= n.toFixed（2）將計算結果按2位小數四捨五入<= Math.round（n * 100）/ 100

2，字串：字串，表示所有文字資訊

    如何定義：凡是用作顯示的資訊都要加引號，單雙引號不分

    何時使用：凡是用作顯示的資訊都要加引號，如手機號，身份證號，QQ號

    JS中沒有字元型別，一個字也要加引號;

    所佔空間：每個英文字母或數字，1位元組

                     每個漢字，2位元組

        JS的記憶體中都是用字元的統一的號儲存字元

        '字元' .charCodeAt（指數）獲得字元中第第引用字元的Unicode的的的號

3，布林值：只有兩個值：真和假

    如何定義：不帶引號的真和假的就是布林型別

    何時使用：儲存對錯，真假，成立不成立都用布林型別

4，未定義：1，宣告變數未賦值; 2，物件屬性不存在

二：***資料型別轉換

    *** JS是弱型別程式語言：3點

    1，宣告變數時，不用考慮變數中將要儲存的資料型別

    2，賦值時，動態判斷資料的型別，同一個變數先後可儲存不同型別的資料

    3，運算時，JS會根據自己的需要，動態轉換資料型別

2大類：

如圖1所示，隱式轉換：無需程式設計師干預，自動完成的轉換

    先討論算數運算中的隱式轉換：

        規律：1，預設情況下，一切轉為數字型別，做算數計算

                        布林型別：真轉為1，假轉為0;

                        未定義轉為NaN的的的的的的的的

                        ''，[]，空轉為0

                  2，+法計算中，只要一個是字串，都轉為字串，+變為字串拼接符

                        其他型別轉為字串：在字面量前後直接加引號

        表示式：由資料，變數和運算子組成的公式

                    *預設從左向右兩兩計算

        楠：不是一個數字的數字（不是數字）  

                    意義型別

        何時遇到：當無法轉為數字或無法正常計算時結果為為NaN的的的的的的的的;

            特點：和任何資料做計算，結果永遠為NaN的的的的的的的

                        加法計算中，碰上字​​符串，也會轉為 '男'

            typeof運算運算運算（X）：返回X的資料型別名稱（是字串）：編號，字串，布林值，未定義的（沒有空因為空返回的是物件）

2，強制轉換：程式設計師主動呼叫專門的函式完成的轉換

    1，任意到字串：2種：

            var str = x.toString（）;

            var str = String（x）; - >相當於隱式轉換

            區域：String（x）萬能的（number型別資料，布林型資料（true - >'true'，false - >'false'undefined - >'undefined'null - >'null'））

                            x.toString（），不確定和空轉不了會報錯

        但是為NaN的都都以轉為'男'的字串

    何時使用：通常都是JS在需要時，自動呼叫

2，***任意toNumber：3種

    1，任意數字：var n = Number（x）; - 隱式

            何時使用：將非字串型別（針對布林值）轉為數字使用，和字串數字轉為數字型別數字

            特例：Number（''） - > 0，Number（[]） - > 0，Number（null） - > 0，Number（undefined） - > NaN

    2，字串到數字：

    1，整數：var n = parseInt（str，[radix]）;

        何時使用：將*字串*轉為整數時使用

        如果傳入的不是字串，則會自動隱式轉為字串

        原理：從頭開始讀取字串中的每個字元

                跳過開頭的空字元

                只讀取數字字元

                只要碰到第一個不是數字的字元，就退出

                不認識小數點

        也可用於其他進位制的資料轉為十進位制數，radix2-36，

       基數：如果省略該引數或其值為0，則數字將以10為基礎來解析如果它以“0X”或“0X”開頭，則以16為基數。

               如果該引數小於2或者大於36，則parseInt函式函式函式函式函式函式（）將返回的的NaN的的的的。

        轉不了就返回NaN，parseInt（''） - > NaN，parseInt（'$ 12'） - > NaN，parseInt（true） - > NaN

        數字（X）vs parseInt（str）

            數只認識純數字組成的字串，可轉布林型別

            parseInt函式函式函式函式函式函式函式函式認識包含非數字字元的字串開頭位置的數字，不可轉布林

    2，小數：var n = parseFloat（str）;只認第一個小數點

    3，任意型別為布林值：var bool = Boolean（x）

        “”，0，NaN，undefined，null - > false

      [視窗。]提示（ '輸入提示'）;凡是從頁面進來的都是字串

        例如：var salary = parseFloat（prompt（'輸入提示'））;在得到資料時就轉;

五，運算子和表示式：

    程式：人的想法在計算機中的執行步驟

    1，運算子：程式中模擬人的思維運算或判斷的符號

         表示式：由變數，資料，運算子組成的公式

1，算術運算子：+ - * /％++ -

    返回值只能是號碼型別，計算無效返回的為NaN的的的的的的     

    隱式轉換：預設轉數，

                        +法計算中，碰到字串，都轉字串

    1，％模運算（取餘數）：m％n：m / n，取除不盡的餘數部分

    何時使用：1，判斷能否整除 - 判斷奇偶數，

                     2，限制計算結果N，永遠小於除數 - > N％米

                            判斷閏年:(整除4和不能整除100）或能乘除400：var n = prompt（'輸入年份'）

       2，***遞增遞減運算：++， -

                的n ++：N = N + 1;

                ++ N：先將中的值+1，返回*新*值

                的的的的的的的n ++：先將ň中的值1，  返回*舊*值

                單獨使用，無影響

                參與其他表示式是，會影響表示式的結果

                var n = 2;

                n +++++ n + n +++ n ++

                n = 2 n = 3

                2+ ++ n

                           n = 3 n = 4

                            6+ n ++

                                      n = 4 n = 5

                                        10 + n ++

                                                n = 5 n = 6

                                                    15

2，關係運算   >，<，<=，<=，==，！=都帶隱式轉換

    返回值：真和假

    隱式轉換：預設都轉為數字再比較()

      特殊情況：     

                  1.null!=0,null!='',hull!=[],[]==0,[]=='',''==0

                    如圖1所示，如果無法轉為數字，轉為為NaN的的的的的的的

                           為NaN的的的的的的不等於，不大於，不小於任何值，包含自己

                            NaN！= x - > true;

                         ！isNaN（NUM）判斷一個NUM數值（如果不是NUM則會隱式轉為NUM）是否為NaN的的的的的的的，則是為NaN的的的的的的的返回真實的，不是為的為NaN的的的的的返回假的，

                            何時使用：判斷是不是數字，或者是否能隱式轉為數字

                   2，未定義的Vs null

                       未定義：很少主動使用，所有變數的預設初始值，自動賦值

                        空：釋放主動變數一個引用的物件說明好像的英文用來指向一個物件但是什麼都沒指向

                        typeof （undefined） - >'undefined'，typeof（null） - >'object'

                        未定義==空值>真

                        ===：全等，首先必須型別相同，其次值相同，全等不帶隱式轉換

                   3，如果兩個都是字串，則按位PK每個字元的Unicode的的的的的的的號

                    m = 0，n =''，console.log（m == n） - > true，因為Number（''） - “0，Number（''） - > 0  

                總結：凡是條件：一般都是關係運算或邏輯運算

3，***邏輯運算：多個條件（關係運算），綜合得出最後的結論

                            但是其返回值並非是返回布林型別的真和假，而是返回其運算子左右兩旁的一個值。

    隱式轉換：預設轉換為布林型別，：布林（X）的

    &&：邏輯與

        條件1 &&條件2

    || ：邏輯或

        條件1 ||條件2

！：取反

注意短路邏輯

4，位運算：將數值的二進位制左移或右移Ñ位

   x << n：x左移n位：2 << 1-> 4; x = x * 2 ^ n

    X >> N：X右移位置：X = X / 2 ^ N.

5，*擴充套件賦值運算  ：

        基本賦值運算：=

        所有表示式都會返回一個結果N = 100;

        賦值運算的結果就是等號右側表示式的值

        鍍鉻的控制檯中：輸入表示式，直接回車，控制檯中預設顯示錶達式的值

          var n = 100;輸出未定義;

            N = 100輸出100;

            4 && 5輸出5;

        擴充套件賦值運算：對變數內部的值進行修改的簡寫方法

                比如：總* = 0.8; + =， - =， * =，/ =，％=

6，***三目運算：根據不同條件，判斷執行不同操作，或返回不同的值

                三元，條件運算

        何時使用：多個條件多件事，必須多選一執行的時候;

        如何使用：條件1 ？操作1 |值1：

                            條件2 ？操作2 |值2：

                              .....

                               預設操作;

        特點：1，如果前一個條件已經滿足，則不再向下判斷，保證每次只可能有一個操作被執行

                  2，預設操作不能省略

六，邏輯結構

1，***函式：封裝一項任務的步驟清單的程式碼段，再起個任務名

     何時使用：任務需要被反覆呼叫，則先將任務步驟封裝為一個函式，載反覆呼叫

    宣告：函式函式名稱（[引數變數列表]）{

                程式碼段;

                [返回值]

}