30、javaScript

javaScript：

概念：客戶端腳本語言，運行在客戶端瀏覽器中，每個瀏覽器都會有JavaScript的解析引擎。

          腳本語言：不須要編譯，直接就能夠被瀏覽器解析執行了

功能：能夠來加強用戶和html頁面的交互過程，能夠來控制html元素，讓頁面有一些動態的效果，來加強用戶的體驗

JavaScript = ECMAScript + JavaScript（BOM+DOM）

 

ECMAScript：

基本語法：一、與html結合方式

                    內部JS：定義<script> , 標籤體內容就是js代碼

<script>
    
</script>

                    外部JS：定義<script>，經過src屬性引入外部的js文件

<script src="DemoJs.js">

</script>

                    注意：<script>能夠定義在html頁面的任何地方，可是定義的位置會影響執行的順序。能夠定義多個<script>標籤

               二、註釋：

                    單行註釋：//

                    多行註釋：/* */

               三、數據類型

                    原始數據類型：一、number：數字。整數/小數/NaN

                                         二、string：字符串

                                         三、boolean：true/false

                                         四、null ：一個對象爲空的佔位符

                                         五、undefined：未定義。若是一個變量沒有給初始化值，則會被默認賦值爲undefined

                    引用數據類型：對象

                四、變量

                     一、變量：一小塊存儲數據的內存空間

                         java語言是強類型語言，而JS是弱類型語言

                         強類型：在開闢變量存儲空間時，定義了空間未來存儲的數據的數據類型，只能存儲固定類型的數據

                         弱類型：在開闢變量存儲空間時，不定義空間未來的存儲數據類型，能夠存聽任意類型的數據

                      二、語法： var 變量名 = 初始化值

                      三、typeof：獲取變量數據類型的方法，注意null運算後獲得object

<script>
    var a = 10;
    var b = "a";
    var c = true;
    var d =null;
    var e ;
    alert(typeof (a));
    alert(typeof (b));
    alert(typeof (c));
    alert(typeof (d));
    alert(typeof (e));
</script>

                五、運算符

                     一、一元運算符，例如；++，--，+

                         注意：在JS中，若是運算數不是運算符所要求的類型，那麼JS引擎會自動的將運算數進行類型轉換

                                  其餘類型轉number：String轉number，按照字面值轉換，若是字面值不是數字，則轉爲NaN

                                                               boolean轉number，true轉爲1，false轉爲0；

<script>
    var a ="a";
    var b = a++;
    alert(b);
    var c ="12";
    b=c++;
    alert(b);
    var d = true;
    b= d++;
    alert(b);
</script>

                     二、算數運算符，例如：+，-，*，/，%

                     三、賦值運算符，例如：= ，+=，-=

                     四、比較運算符，例如：>,<,>=,<=,==,===

                          注意：類型相同，直接比較

                                    類型不一樣，先進行類型轉換，再比較

                                    ===，全等於，在比較以前，先判斷類型，若是類型不同，則直接返回false

                     五、邏輯運算符，例如：&&，||，！

                          注意：其餘類型轉boolean：number， 0或者NaN爲假，其餘爲真

                                                                string ，除了空字符集（「」），其餘爲真

                                                                null和undefined，都是假

                                                                對象，全部對象都是true

                     六、三元運算符，例如：？

                六、JS的特殊語法：一、語句以；結尾，若是一行只有一條語句則；能夠省略,不建議省略

                                          二、變量的定義用var關鍵字，也能夠不使用，若是使用var則是局部變量，不使用則是全局變量

                七、流程控制語句：

                     一、if···else

                     二、switch 

                          注意：在Java中，switch語句能夠接受的數據類型：byte，int ，char，short，枚舉，String

                                    在JS中，switch語句能夠接受任意的原始數據類型

                     三、while

                     四、do····whlie

                     五、for                                                               

基本對象：

一、Function：函數對象

        建立：一、var fun = new Function （形參列表，方法體），不推薦

                 二、function 方法名 （形參列表）{方法體}

                 三、var 方法名 = function（形參列表）{方法體}

        方法：

        屬性：length：表明形參個數

        特色：一、方法定義時，形參的類型不用寫，返回值類型也不寫

                 二、方法是一個對象，若是定義名稱相同的方法，會覆蓋

                 三、在JS中，方法的調用只與方法的名稱有關，和參數列表無關

                 四、在方法聲明中有一個隱藏的內置對象，arguments封裝全部的實際參數

         調用：方法名稱（實參列表）

<script>
  function  addnumber(a , b ) {
      alert(a+b);
  }

  var addnumber1 = function (a ,b, c) {
      alert(a+b+c);
  }

  alert(addnumber1.length);
</script>

二、Array

         建立：一、var arr = new Array（元素列表）

                  二、var arr = new Array（默認長度）

                  三、var arr = [元素列表]

         方法：join（參數）：將數組中的元素按照指定的分隔符拼接爲字符串

                  push（）：向數組的末尾添加一個或更多元素，並返回新的長度

         屬性：length：數組長度

         特色：一、數組元素的類型可變的

                  二、數組長度可變的

<script>
  var arr1 = new Array(1,2,3,4,5,6);
  var arr2 = new Array(10);
  var arr2 = [1,2,3,4,5,6,7,8,9];
  alert(arr1.join(","));
  alert(arr2.length);
  alert(arr3)
</script>

三、Date

         建立：var date = new Date（）

         方法：toLocalString（）：返回當前date對象對應的時間本地字符串格式

                  getTime（）：獲取毫秒值。返回當前日期對象描述的時間到1970年1月1日零點的毫秒值差

<script>
  var data = new Date();
  alert(data);
  alert(data.toDateString());
  alert(data.getTime());
</script>

四、Math

         建立：不用建立直接使用，Math.方法名

         方法：random（），返回0-1之間的隨機數

                  ceil（），對數進行上舍入

                  floor（），對數進行下舍入

                  round（），對數進行四捨五入

         屬性：PI

<script>
  var a = 2.2;
  alert(Math.random());
  alert(Math.ceil(2.2));
  alert(Math.floor(2.2));
  alert(Math.round(2.2));
  alert(Math.PI);
</script>

五、RegExp：正則表達式對象

         正則表達式，定義字符串的組成規則

                        一、單個字符:[],例如： [a],[ab][a-zA-Z0-9_]

                            特殊符號表明特殊含義的單個字符

                            \d :單個數字字符

                            \w：單個單詞字符

                       二、量詞符號

                            ？：表示出現0次或1次

                            *：表示出現0次或屢次

                            +：表示出現1次或屢次

                            {m,n}:表示m<=數量 >=n

                                    若是{,n}:最多n次

                                    若是{m,}：最少m次

                        開始結束符號：^開始符號

                                             $結束符號

          正則對象：

                        建立：一、var reg = new RegExp（「正則表達式」）

                                 二、var reg = /正則表達式/

                        方法：text（參數），驗證指定字符串是否符合正則表達式

<script>
var reg = /1\d{10}/;
var b = reg.test("12345678901");
alert(b);
</script>

六、Global：    

            特色：全局對象，因此其中封裝的方法不須要對象就能夠直接調用

            方法：encodeURL（）：URL編碼

                     decodeURL（）；URL解碼

                    encodeURLComponent（）：URL編碼，編碼更多字符

                    decodeURLComponent（）：URL解碼

                    parseInt（）：將字符串轉換爲數字，逐一判斷每個字符是不是數字， 直到不是數字爲止，將前面數字部分轉爲number

                    isNaN（）：判斷一個值是不是NaN，由於NaN經常使用的比較都是false

                    eval（）：計算javaScript字符串，並將它做爲腳本代碼執行

 

DOM：

功能：控制html文檔內容

代碼：獲取頁面標籤對象 Element    

        document.getElementById("id值")：經過元素的id獲取元素對象

操做Element對象：

        一、修改屬性值

        二、修改標籤體內容

事件：

功能：某些組件被執行類某些操做後，觸發某些代碼的執行

綁定事件：一、直接在html標籤上，指定事件的屬性，屬性值就是js代碼

               二、經過js獲取元素對象，指定事件屬性，設置一個函數對象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script>
    function fun () {
        var div1 = document.getElementById("div1");
        div1.innerHTML ="點我了";
    }
    </script>
</head>
<body>
<div id = "div1">
    hello
</div>
<input type="button" onclick="fun()" value="點我吧">

</body>
</html>

BOM：

概念：瀏覽器對象模型，將瀏覽器各個組成部分封裝成對象

組成：

         一、window，窗口對象

                    建立：

                    方法：

                             一、與彈出框有關的方法

                                      alert（）：顯示帶有一段消息和一個肯定按鈕的警告框

                                      confirm（）：顯示帶有一段消息以及確認按鈕和取消按鈕的對話框

                                                          若是用戶點擊肯定按鈕，則方法返回true

                                                          若是用戶點擊取消按鈕，則方法返回false

                                     prompt（）：顯示可提示用戶輸入的對話框

                                                        返回值，獲取用戶輸入的值

                              二、與打開關閉有關的方法

                                    open（）：打開一個新的瀏覽器窗口

                                                    返回新的window對象

                                    close（）：關閉瀏覽器窗口

                                                    誰調用爲，我關誰

                               三、與定時器有關的方法

                                    setTimeout（）：在指定的毫秒數後調用函數或計算表達式

                                                            參數：一、JS代碼或者方法對象

                                                                     二、毫秒值

                                                            返回值：惟一標識，用於取消定時器

                                     clearTimeout（）：取消由setTimeout方法設置的定時器

                                     setInterval（）：按照指定的週期來調用函數或計算表達式

                                     clearInterval（）：取消由setInterval設置的定時器

<script>
    function fun () {
        open("http://www.baidu.com");
    }
   setTimeout(fun,5000,"bbb");
    </script>
</head>
<body>
<div id = "div1">
    hello
</div>
<input type="button" onclick="fun()" value="點我吧">

</body>

                                四、Location：地址欄對象

                                                    一、建立：一、window.location

                                                                 二、location

                                                    二、方法：reload(): 從新加載當前文檔，刷新

                                                    三、屬性：href 設置或返回完整的URL

<script>
    function fun () {
        location.reload();
    }
    alert(location.href);
    </script>
</head>
<body>
<div id = "div1">
    hello
</div>
<input type="button" onclick="fun()" value="點我吧">

</body>

                               五、History：歷史記錄對象

                                                    一、建立：window.history

                                                                 history

                                                    二、方法:back(),加載history列表中的前一個URL

                                                                forward()，加載history列表中的下一個URL

                                                                go()，加載history列表中的某個具體頁面

                                                                        參數：正數，前進幾個歷史記錄

                                                                                 負數，後退幾個歷史記錄

                                                    三、屬性：length 返回當前窗口歷史列表中的URL數量

<script>
    function fun () {
        alert(history.length);
    }
    </script>
</head>
<body>
<div id = "div1">
    hello
</div>
<input type="button" onclick="fun()" value="點我吧">

</body>

                    屬性：一、獲取其餘BOM對象

                                    history

                                    location

                                    Navigator

                                    Screen

                              二、獲取DOM對象

                                    document

                    特色：一、window對象不須要建立能夠直接使用，window.方法名（）

                             二、window也能夠直接忽略，方法名（）

 

DOM：

概念：文檔對象模型，將標記語言文檔的各個組成部分，封裝爲對象，可使用這些對象，對標記語言文檔進行CRUD的動態操做

分類： 一、核心DOM

          二、XML DOM

          三、HTML DOM

 

核心DOM：

一、Document：文檔對象

                       建立：針對html，window.document或者document

                       方法：一、獲取Element對象

                                    getElementById（），根據id屬性值獲取元素對象，id屬性值通常惟一

                                    getElementByTagName（），根據元素名稱獲取對象們，返回值是一個數組

                                    getElementByClassName（），根據Class屬性值獲取元素對象們，返回值是一個數組

                                    getElementByName（），根據name屬性值獲取元素對象們，返回值是一個數組

                                二、建立其餘DOM對象

                                    createAttribute（name）

                                    createComment（）

                                    createElement（）

                                    createTextNode（）

 

二、Element：元素對象

                        建立：經過document對象來建立

                        方法：removeAttribute（），刪除屬性

                                 setAttribute（），設置屬性

                        

三、Node：節點對象，全部對象的父類   

                    特色：全部DOM對象均可以被認爲是一個節點

                    方法：appendChild（）：向節點的子節點列表的結尾添加新的子節點

                             removeChild（）：刪除並返回當前節點的指定子節點

                             replaceChild（）：用新節點替換一個子節點

                     屬性：parentNode：返回節點的父節點

                        

四、Attribute：屬性對象

五、Text：文本對象

六、Comment：註釋對象

 

HTML DOM：  

一、標籤體的設置和獲取：innerHTML

二、使用html元素對象的屬性

三、控制樣式

                    一、使用元素的style屬性來設置

                    二、提早定義好類選擇器的樣式，經過元素的classname屬性來設置器class屬性值

 

事件：

概念：某些組件被執行了某些操做後，觸發某些代碼的執行

            事件：某些操做。例如：單擊，雙擊，鍵盤按下，鼠標移動

            事件源：組件。例如：按鈕，文本框

            監聽器：代碼

            註冊監聽：將事件，事件源，監聽器結合在一塊兒。當事件源上發生了某個事件，則觸發執行某個監聽器代碼

常見的事件：

            一、點擊事件：

                    onclick：單擊事件

                    ondblclick：雙擊事件

            二、焦點事件

                    onblur：失去焦點

                    onfocus：元素得到焦點

            三、加載事件

                    onload：一張頁面或者一幅圖像完成加載

            四、鼠標事件

                    onmousedown：鼠標按鈕被按下

                    onmouseup：鼠標按鈕被鬆開

                    onmousemove：鼠標被移動

                    onmouseover：鼠標移到某元素之上

                    onmouseout：鼠標從某元素移開

            五、鍵盤事件

                    onkeydown：某個鍵盤按鈕被按下

                    onkeyup：某個鍵盤按鈕被鬆開

                    onkeypress：某個鍵盤按鈕被按下並鬆開

            六、選擇和改變

                    onchange：域的內容被改變

                    onselect：文本被選中

            七、表單事件

                    onsubmit：確認按鈕被點擊

                    onreset：重置按鈕被點擊