1.4 JavaScript

1.4.1 JavaScript概述

JavaScript是目前在Web前端開發領域十分流行且十分重要的一種腳本語言，其功能強大，用途廣泛，可以響應瀏覽器事件、操作HTML元素、制作炫酷特效、驗證用戶數據、與服務器進行交互甚至進行服務器端編程等。雖然JavaScript語言的學習門檻較低，但限于篇幅，本書僅介紹一些JavaScript的基礎知識。

要想在頁面中使用JavaScript腳本，必須要有＜script＞標簽，而具體的程序代碼既可以在此標簽中，也可以來自外部的．js文件。像.css文件一樣，我們也推薦將JavaScript代碼單獨保存在一個獨立的．js文件中，這樣既使網頁的文件結構更加清晰，便于搜索和高度，又可提高代碼的復用性。

    ＜script src=＂cjs/jquery-3.2.1. min.js＂＞＜/script＞  //引入站內js文件
    ＜script src=＂https://unpkg.com/bootstrap@4.2.1/dist/js/bootstrap.min.js＂＞＜/script＞
     //引入站外js文件
    ＜script＞

      window. alert（＂hello, world! ＂） //彈出警告框
  ＜/script＞

1.4.2 JavaScript的基本語法

JavaScript語法嚴格區分大小寫；一行代碼可以用分號（;）表示結束，也可以直接回車換行表示結束；注釋方法分為單行注釋（//）和多行注釋（/*. . . */）；其運算符也包括算術運算符、邏輯運算符、比較運算符、賦值運算符等，使用方法與其他編程語言相似。

（1）變量。在JavaScript中，變量可以不用先聲明而直接使用；聲明而未賦值的變量為undefined；可以看出，JavaScript屬于弱類型語言。

創建數組的方法有三種：

①利用Array（）函數創建空數組：stu=new Array（）。

②利用下標方式直接賦值：stu [0]=＂張三＂。

③利用Array函數創建數組并立即賦值：stu=new Array（＂張三＂）。

JavaScript中數組的創建和使用在真實開發中較為常見，一定要深入學習并靈活掌握其用法。

（2）字符串。字符串是JavaScript中比較常見的一類數據類型。其常用屬性有：

length：返回字符串長度。

常用方法有：

charAt（）：返回某一字符或子串的起始位置序號。

indexOf（）：返回某一位置序號所對應的字符。

replace（）：字符替換。

split（）：根據某一字符進行分割，結果為一個數組。

substr（n, l）：從第N位開始，獲取長度為l的子串。

substring（s, e）：獲取從第s位到第n位的子串。

我們推薦讀者要熟練掌握后4種方法，在真實開發工作中極為常用。

（3）函數。JavaScript中函數的意義與其他語言中函數的意義相同，它把一些JavaScript程序放在一個獨立、完整的結構中，用于實現一些特定的功能，并且可以被多個頁面重復使用。

函數定義方法：

      function funName（paras） //parasV為形式參數，可有多個。
      {代碼塊；}

函數調用方法：

      funName（paras） //parasR為實際參數，類型與數量要與形式參數一一對應。

通常情況下，函數要先定義后使用。

（4）條件分支與循環。JavaScript也提供if else語句來實現條件分支，與其他編程語言的用法完全相同，包括：

      if（）{. . .}
      if（）{. . .}else {. . .}

      if（）{. . .}else if（）{. . .}else if（）{. . .}……else {. . .}

與其他編程語言仍然相同的是，JavaScript也有for循環和while循環，但除此之外它還獨有一種for in循環結構，專門用于遍歷可序列化的數據，具有較強的實用性。其語法結構為：

for（i in obj）{. . .} //obj為可序列化的數據變量（如數組、JSON等）, i為循環變量，是每個元素的下標。

上述結構的含義是：從第一個元素開始，依次從obj變量中獲取每一個元素的下標，并把此下標值循環地交給循環變量i，然后在循環體中就可以使此下標變量i來完成各類操作。如：

    stu=new Array（＂張三＂, ＂李四＂, ＂王五＂, ＂趙六＂）；
    lis=＂＂；
    for（eachStu in stu）{
        lis += ＂＜p＞＂ + stu [eachStu]+ ＂＜/p＞＂；
    }；
    document. write（lis）; //向頁面寫入數據

一定要注意的是，for in結構中循環變化的是下標，而不是每一個元素。

1.4.3 JSON數據格式

JSON（JavaScript Object Notation, JavaScript對象標記）是一種輕量級的數據交換格式，是JavaScript的一個子集，采用完全獨立于編程語言的文本格式來存儲和表示數據，本質上是一個字符串，易于閱讀和編寫，現在很多Web后端編程語言都能處理JSON數據，如PHP、C#、JAVA、Python等。JSON比XML在多個方面都有突出優勢，因此是目前Web上應用最為廣泛的數據交互與傳輸格式。

JSON數據格式的結構特點包括：

①用鍵值對表示對象；

②相鄰的同級數據用逗號分隔；

③用大括號保存對象；

④用方括號保存對象數組；

⑤結構可嵌套。

讀者可通過以下示例了解JSON數據格式的結構特點與使用方法。

例1：純JSON數組，用方括號表示。

      var jsonArr= [＂張三＂, ＂李四＂, ＂王五＂, ＂趙六＂];  //定義純json數組
      for（i in jsonArr） //利用for in循環遍歷jsono數組元素
      {
          document. write（i+＂:＂+jsonArr [i]+＂＜br/＞＂）; //將所有元素拼接為一個字
  符串并顯示在頁面中
      }

例2：多個對象且對象值為單一元素的JSON數據，大括號保存多個對象，每個對象為鍵值對，整體上類似數據表中的一條記錄。

      var jsonObj= {
          ＂name＂:＂張三＂，
          ＂sex＂:＂男＂，
          ＂age＂:100，
      }
      tempStr=＂姓名：＂+jsonObj. name+＂，性別：＂+jsonObj. sex+＂，年齡：＂+jsonObj. age +＂＜
  br/＞＂
       /*或者下面這種寫法*/
      tempStr=＂姓名：＂+jsonObj [′name′]+＂，性別：＂+jsonObj [′sex′]+＂，年齡：＂+jsonObj
  [′age′]+＂＜br/＞＂
  document. write（tempStr）

例3：對象數組，大括號與中括號結合使用，類似數據表中多條記錄。

    var jsonObjArr=
    [
        {
            ＂name＂:＂張三＂，
            ＂sex＂:＂男＂，
            ＂age＂:100
        }，
        {
            ＂name＂:＂李四＂，
            ＂sex＂:＂女＂，
            ＂age＂:56
        }，
        {
            ＂name＂:＂王五＂，
            ＂sex＂:＂男＂，
            ＂age＂:36
        }
    ]；
    for（i in jsonObjArr）
    {
        tempStr=＂姓名：＂+jsonObjArr [i][′name′]+＂，性別：＂+jsonObjArr [i][′sex′]+
＂，年齡：＂+jsonObjArr [i][′age′]+＂＜br/＞＂；
document. write（tempStr）
}

例4：復雜的JSON結構嵌套。最外層是key為data和info的普通對象，data對應的值為對象數組，info對應值為一個字符串。類似于多張數據表（本例可視為有data表和info表），每個數據表中可分別放入不同的數據內容。仍然根據對象的key值分別進行遍歷。

      var jsonMultiObj=
        {
          ＂data＂：
                  [
                      {
                      ＂name＂:＂張三＂, ＂sex＂:＂男＂, ＂age＂:100

                      }，
                      {
                      ＂name＂:＂李四＂, ＂sex＂:＂女＂, ＂age＂:56
                      }，
                      {
                      ＂name＂:＂王五＂, ＂sex＂:＂男＂, ＂age＂:36
                      }
                  ]，
                ＂info＂:＂這里有三條人員信息記錄。＂
              }；
            document. write（jsonMultiObj. info+＂＜br/＞＂）; //讀取key為info的值
            for（i in jsonMultiObj. data）//利用for in循環遍歷key為data的所有值
              {
          tempStr=＂姓名：＂+jsonMultiObj [′data′]  [i]  [′name′]+＂，性別：＂+jsonMultiObj. data [i][′sex′]+＂，年齡：＂+jsonMultiObj. data [i][′age′]+＂＜br/＞＂；
          document. write（tempStr）
        }

1.4.4 BOM與DOM

JavaScript語言中的BOM（Browser Object Model，瀏覽器對象模型）與DOM（Document Object Model，文檔對象模型）擁有大量包含豐富屬性與方法的子對象，提供了豐富的用戶與頁面進行交互的功能。

（1）window對象：表示整個瀏覽器窗口，屬于最頂層的BOM。

常用方法：

window. open（）; // 打開新窗口。

window. close（）; // 關閉當前窗口。

window. alert（）; // 彈出警告框。

window. confirm（）; // 彈出確認框。

window. print（）; //打印當前窗口。

（2）location對象：獲取當前頁面的url，或者跳轉至新頁面。

常用屬性與方法：

location. href; //獲取當前頁面的url。

location. href=＂url＂; //頁面重定向（跳轉至url）。

location. reload（）; //重新加載當前URL，即刷新當前頁。

location. replace（）; //用新文檔替換當前文檔，相當于頁面跳轉。

（3）document對象（DOM對象）:DOM實際上是BOM的一個子集，在網頁上，組成頁面的所有內容被組織在一個樹形結構中（稱為DOM樹）。通俗地說，DOM就是指頁面中所有HTML代碼所組成的結構，因此document對象可以直接對頁面內容進行操作。

常用屬性：

document. title; //獲取當前文檔的標題。

document. URL; // 獲取當前文檔的URL。

常用方法：

document.getElementById（）; //根據id屬性值查找頁面中對象（比如某標簽）。

document.getElementsByClassName（）; //根據class屬性值查找頁面對象集合。

document.getElementsByName（）; //返回帶有指定name屬性值的對象集合。

document.getElementsByTagName（）; //返回帶有指定標簽名的對象集合。

document. write（）; //向文檔寫HTML表達式或JavaScript代碼。

document. writeln（）; //等同于write（）方法，不同的是在輸出完成后會追加一個換行符。

對象．屬性名=屬性值；//設置對象屬性。

對象．innerHTML[=值]; //獲取[設置]非表單元素的內容。

對象．value [=值]; //獲取[設置]表單元素的內容。

對象．style．樣式名[=值]; //獲取[設置]對象的某樣式值。

1.4.5 JavaScript中的事件

JavaScript中的事件通常是指用戶在網頁中執行中的某一動作，比如點擊鼠標左鍵、雙擊鼠標左鍵、按下鍵盤等。用戶執行這些動作往往是為了完成某一任務，比如提交表單等，而完成對應任務的過程要通過JavaScript代碼（如函數等）來實現。JavaScript語言支持多種事件，整體上事件可以分為鼠標事件、鍵盤事件、頁面加載與退出事件等。

常見的事件有：onclick（鼠標單擊事件）、ondblclick（鼠標雙擊事件）、onfocus（獲得焦點事件）、onblur（失去焦點事件）、onmousedown（鼠標按鍵按下事件）、onmouseup（鼠標按鍵彈起事件）、onmousemove（鼠標光標移動事件）、onmouseover（鼠標光標懸停事件）、onmouseout（鼠標光標移開事件）、onkeypress（鍵盤按鍵按下或按住事件）、onkeyup（鍵盤按鍵彈起事件）、onkeydown（鍵盤按鍵按下事件）、onchange（內容或值改變事件）、onload（頁面或內容加載完成事件）、onunload（頁面退出或關閉事件）等。

讀者可通過以下示例了解JavaScript中事件的創建與使用方法。要注意的是，為對象創建事件的代碼通常要放在對象之后，否則將產生異常錯誤。

例1：點擊按鈕實現頁面跳轉。

        ＜button onclick=＂window.open（′http://www.xynun.edu.cn′）＂＞xynun＜/button＞
          //新窗口打開
        ＜button onclick=＂window. location. href=′http://www.xynun.edu.cn′＂＞xynun＜/
        button＞ //原窗口打開

例2：實時獲取用戶在文本框里輸入的內容，并顯示到另一個文本框中。

      ＜input type=＂text＂ id=＂temp1＂/＞
      ＜input type=＂text＂ id=＂temp2＂＞
      ＜script＞
          var t1=document.getElementById（＂temp1＂）; //捕獲第一個文本框對象
          var t2=document.getElementById（＂temp2＂）; //捕獲第二個文本框對象
          t1. onkeyup=function（）{; //為第一個文本框添加鍵盤彈起事件
              t2. value=t1. value；
          }
          t1. onblur=function（）{; //為第一個文本框添加失去失去焦點事件
              t1. value=＂我失去了焦點＂
          }
          t2. onfocus=function（）; //為第二個文本框添加獲得焦點事件
          {
              t2. value=＂我獲得了焦點＂
          }
      ＜/script＞

例3：簡單的表單驗證。在＜form＞標簽中添加onsubmit事件，事件調用自定義的表單驗證函數checkForm（），當checkForm（）函數返回值為true時提交表單，否則不提交表單。這是表單驗證的一般過程。

      ＜form action =＂ http://www.xynun.edu.cn＂ method =＂ get＂ onsubmit =＂ return
  checkForm（）＂＞
          ＜input type=＂text＂ name=＂＂ id=＂username＂＞
          ＜input type=＂submit＂ value=＂提交＂ id=＂submitBtn＂＞
     ＜/form＞
     ＜script＞
          function checkForm（）
          {
            var username=document.getElementById（＂username＂）；
            var temp=＂＂；
            if（username. value==＂＂）
              {
                temp=＂內容不能為空＂；
            }

            else if（username. value. length＜6）
            {
                temp=＂內容長度不能少于6位＂；
            }
            else if（username. value. length＞15）
            {
                temp=＂內容長度不能多于15位＂；
            }
            else
            {
                temp=true；
            }
            if（temp! =true）
            {
                alert（temp）；
                return false；
            }
            else
            {
                alert（＂通過＂）；
                return true；
            }
        }
    ＜/script＞