1.概念

• 一門客戶端指令碼語言
  • 執行在客戶端瀏覽器中，每一個瀏覽器都有JavaScript指令碼的解析引擎
  • 指令碼語言：不與要編譯，直接就可以被瀏覽器解析執行
• 功能
  • 可以用來增強使用者和html頁面的互動，可以用來控制html元素，增加動態效果

2.ECMAScript：客戶端指令碼語言的標準

• 基本語法
  • 與html結合
    • 定義<script>,標籤體內容就是js程式碼
    • 定義<script>,通過src屬性引入外部js檔案
    • <script>可以定義在html頁面的任何地方，但定義位置會影響執行的順序
    • <script>可以定義多個

3.資料型別

• JavaScript 原始值

原始值指的是沒有屬性或方法的值。

原始資料型別指的是擁有原始值的資料。

JavaScript 定義了 5 種原始資料型別：

• string
• number ：數字、NaN
• boolean
• null：佔位
• undefined

原始值是一成不變的（它們是硬編碼的，因此不能改變）。

假設 x = 3.14，能夠改變 x 的值。但是您無法改變 3.14 的值。

• 關鍵詞var:用是區域性變數，不用是全域性變數

• 字串

• 陣列

  • 可以包含任意資料型別

  • 陣列大小可變

  • push壓入尾部，pop彈出尾部的一個元素(類似於棧)

  • unshift壓入頭部，shift彈出頭部

  • concat()返回一個新陣列，不會改變原陣列

• 物件

  • var 物件名 = {
        屬性名：屬性值,
        屬性名：屬性值，
        屬性名：屬性值
    }//使用逗號隔開，最後一個鍵值對不用加括號，鍵是字串
    

  • 使用一個不存在的物件屬性不會報錯，undefined

  • 可以動態的刪減屬性

    delete 物件名.屬性名 //刪除屬性
    物件名.屬性名=值 //新增屬性
    

• 流程控制

  • if，while，for，switch

  • for/in 遍歷物件鍵,for/of遍歷物件值

    var person = {fname:"Bill", lname:"Gates", age:62}; 
    
    var text = "";
    var x;
    for (x in person) {
        text += person[x];
    }
     
    

• Map/Set

  var map = new Map([key,value],[key,value],[key,value]);
  map.get("key") //取值 
  map.set("key",value) //存值
  var set = new Set([value,value,value]);
  set.has(value) //判斷是否包含
  

• Function物件

  • 建立方式：

    //引數型別不用寫
    function 方法名(形式引數列表){
        //方法體
        //不需要定義返回值型別
    }
    
    var 方法名 = function(形式引數列表){
        //方法體
    }
    

  • 方法是一個物件。如果定義一個名稱相同的方法會覆蓋。

  • 方法的呼叫只與方法的名稱有關與引數列表無關。

    function fun(a,b){
        alert(a+b);
    }
    fun(1) //此時b為undefind
    fun(1,2,3,4) //方法宣告中有一個隱藏的內建物件(陣列)，arguments,封裝所有的實際引數，3，4被其接收。
    //一個使用內建物件的示例
    function add(){
        var sum=0;
        for(var i=0;i<arguments.length;i++){
            sum += arguments[i];
        }
        return sum;
    }
    

• Date日期物件

  var date = new Date(); //建立一個當前瀏覽器的時區並將日期顯示為全文字的字串
  //Fri Oct 23 2020 11:12:25 GMT+0800 (中國標準時間)
  

• Global物件

  • encodeURL()

    • url編碼:將對應的字串編碼成頁面所指定格式的16進位制碼

    • "你好嗎？"=%E4%BD%A0%E5%A5%BD%E5%90%97%EF%BC%9F

  • dedecodeURL()

    • url解碼

  • encodeURLComponent()

    • 較上面的編\解的字元更多

  • deencodeURLComponent()

  • parseInt()

    • 解析一個字串轉換為數字

  • isNaN ()

    • 檢查是否不是數字

  • eval()

    • 將字串解析為為指令碼程式碼執行

4.DOM

• 概念：Document Object Model 文件物件模型，將標記語言文件的各個組成部分封裝為物件，可以使用這些物件對文件進行增刪改查的動態操作。

  • DOM樹，對應HTML文件的結構

    ​

  • 包括：Core DOM - 所有文件型別的標準模型
    XML DOM - XML 文件的標準模型
    HTML DOM - HTML 文件的標準模型

• document文件物件

  • 獲取Element物件：

    • getElementById()：查詢具有指定的唯一 ID 的元素

    • getElementsByTagName()：返回所有具有指定標籤名稱的元素節點，返回值是一個數組

    • getElementsByNam()：返回所有具有指定Name屬性的元素節點，返回值是一個數組

    • getElementsByClassName()：返回所有具有指定Class屬性的元素節點，返回值是一個數組

    • 程式碼：獲取頁面標籤物件 Element

        document.getElementById("test") //通過元素(標籤)的id值獲取指定的標		籤
      

  • 建立其他DOM物件：

    • createAttribute(name) 建立擁有指定名稱的屬性節點，並返回新的 Attr 物件

    • createComment() 建立註釋節點

    • createElement() 建立元素節點

      var table = document.createElement("table")
      

    • createTextNode() 建立文字節點

  • 操作標籤物件

    • 修改屬性值

    • 修改標籤體內容

      anchorObject.innerHTML=text
      

• Element元素物件：

  • 獲取/建立方法：通過documen來獲取和建立

  • 方法：

    • setAttribute()

      elementNode.setAttribute(name,value) //name	必需。規定要設定的屬性名 value	必需。規定要設定的屬性值。
      

    • removeAttribute()

      elementNode.removeAttribute(name) //name	必需。規定要刪除的屬性名
      

• Node節點物件：

  • 特點：其他所有DOM物件都可以認為是一個節點

  • 方法：增刪改查DOM樹：

    • appendChild() 向節點的子節點列表的結尾新增新的子節點

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

      var div1 = getElementById("div1");
      var div2 = getElementById("div2");
      div1.removeChild("div2");
      

    • replaceChild() 用新節點替換一個子節點

  • 屬性：

    • parentNode 返回節點的父節點

    • childNodes 返回節點到子節點的節點列表

      var x=nodeObject.childNodes;
      
      for (i=0;i<x.length;i++)
        {
      	//操作
        }
      

• HTML DOM

  • 標籤體的設定和獲取：innerHTML

    /*修改 HTML 文件內容最簡單的方法是，使用 innerHTML 屬性。
    如需修改 HTML 元素的內容，使用此語法：*/
    document.getElementById(id).innerHTML = new text
    

  • 使用HTML元素的物件和屬性：

    document.getElementById(id).attribute = new value //attribute屬性，value值
    <!--本例修改了 <img> 元素的 src 屬性的值-->
    <img id="myImage" src="smiley.gif">
    <script>
    document.getElementById("myImage").src = "landscape.jpg";
    </script>
    

  • 設定樣式:

  • 方法一：

    document.getElementById(id).style.property = new style
    
    <p id="p2">Hello World!</p>
    
    <script>
    document.getElementById("p2").style.color = "blue";
    </script>
    

  • 方法二：

    document.getElementById(id).className="name"
    
    .name{
        //css樣式控制
    }
    

5.事件

• 功能：HTML 事件可以是瀏覽器或使用者做的某些事情：

  • 下面是 HTML 事件的一些例子：

    • HTML 網頁完成載入
    • HTML 輸入欄位被修改
    • HTML 按鈕被點選

    通常，當事件發生時，使用者會希望做某件事，JavaScript 允許在事件被偵測到時執行程式碼。

  • 通過 JavaScript 程式碼，HTML 允許向 HTML 元素新增事件處理程式。

• 事件源：元件，如：按鈕，文字輸入框... ...

• 事件繫結/註冊事件:

  • 直接在html頁面上，指定事件的屬性(操作),屬性值就是js程式碼

    <button onclick="displayDate()">時間是？</button>
    
    <script>
    function displayDate() {
        document.getElementById("demo").innerHTML = Date();
    }
    </script>
    //程式碼耦合度太高
    

  • 通過js獲取元素物件，指定事件屬性，設定一個函式

    <img src="#" id=image>
    
    
    var object = getElementById("image");
    object.onclik=fun;
    function fun(){
        alert("點了一下！")
    }
    

• 常見的事件：

  • 點選事件：

    • onclick 當用戶點選某個物件時呼叫的事件控制代碼
    • ondblclick 當用戶雙擊某個物件時呼叫的事件控制代碼

  • 焦點事件：

    • onblur 元素失去焦點

      • 一般用於表單校驗

    • onfocus 元素獲得焦點

  • 載入事件：

    • onload 一張頁面或一幅影象完成載入

      • 可以與window繫結

  • 滑鼠事件：

    • onmousedown 滑鼠按鈕被按下
      • 將會傳遞一個引數 ,定義方法時定義一個形參，指示哪一個滑鼠按鍵被點選
    • ,onmouseup 滑鼠按鍵被鬆開
    • onmousemove 滑鼠被移動
    • onmouseout 滑鼠從某元素移開
    • onmouseover 滑鼠移到某元素之上

  • 鍵盤事件：

    • onkeydown 某個鍵盤按鍵被按下
    • onkeypress 某個鍵盤按鍵被按下並鬆開
    • onkeyup 某個鍵盤按鍵被鬆開

  • 選中和改變：

    • onchange 域的內容被改變
    • onselect 文字被選中

  • 表單事件

    • onsubmit 確認按鈕被點選

      • 只支援表單form，返回true則被提交，要注意此處是否需要新增return，事件註冊的方法一需要return，方法二不需要。

    • onreset 重置按鈕被點選

6.BOMze

• 概念：Browser object model 瀏覽器物件模型

  • 將瀏覽器各個組成部分封裝成物件

    • 1.window ：瀏覽器視窗物件

      • 特點：window不需要建立，可以直接使用

      • window.方法名()，可以直接省略window

      • 與彈出框有關的方法：

        alert()		//顯示帶有一段訊息和一個確認按鈕的警告框
        confirm()		//顯示帶有一段訊息及確認和取消按鈕的警告框，有boolean型別的返回值
        prompt()		//顯示提示使用者輸入的對話方塊，有返回值
        

      • 與開發關閉有關的視窗：

        open()		//開啟一個新視窗
        close()		//關閉已經開啟的視窗，誰呼叫關閉誰
        

      • 與定時器有關的方法：

        setTimeout(code,millisec)		//code：要呼叫的函式後要執行的JavaScript程式碼串；millise：在執行程式碼前需等待的毫秒數，返回值為唯一標識，用於取消計時。
        clearTimeout(id_of_settimeout)		//id_of_settimeout：由 setTimeout() 返回的 ID 值。該值標識要取消的延遲執行程式碼塊。
        setInterval(code,millisec)		//code：要呼叫的函式後要執行的JavaScript程式碼串；millise：在執行程式碼前需等待的毫秒數。setInterval() 方法會不停地呼叫函式，直到clearInterval() 被呼叫或視窗被關閉。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的引數。
        clearInterval()		//取消由 setInterval()設定的 timeout。
        

      • 獲取其他BOM物件

        window.history
        history		//可以直接省略window
        

      • 獲取DOM物件

        document
        

    • 2.location ：位址列物件

      • 屬性：

        • href 屬性是一個可讀可寫的字串，可設定或返回當前顯示的文件的完整 URL。

            location.href //得到當前位址列的值，或者設定當前位址列的值
          

        • reload() 方法用於重新載入當前文件

        location.reload(force) //引數是 false，它就會用 HTTP 頭 If-Modified-Since 來檢測伺服器上的文件是否已改變。如果文件已改變，reload() 會再次下載該文件。如果文件未改變，則該方法將從快取中裝載文件。如果把該方法的引數設定為 true，那麼無論文件的最後修改日期是什麼，它都會繞過快取，從伺服器上重新下載該文件。

    • history：歷史記錄物件

    • screen：顯示器螢幕物件

    • Navigator：瀏覽器物件

​

​