JavaScript基本語法

JavaScript

JavaScript = ECMAScript + JavaScript本身特有的(BOM+DOM)

ECMAScrpit：客戶端腳本語言的標準

基本語法

1. js引入
   1. 內部js
      • 定義script,內部爲js代碼
   2. 外部js
      • 定義script,經過src屬性引入外部js文件
        注：同一級 直接寫文件名
        上一級 ../
        ​上上一級 ../../
2. 註釋
   1. 單行註釋 ：//註釋內容
   2. 多行註釋：/* 註釋內容 */
3. 數據類型
   1. 原始數據類型：
   1. number：整數/小數/NaN(not a number 一個不是數字的數字)
   2. string：字符串
   3. boolean：true/false
   4. null：一個對象爲空的佔位符
   5. undefined：未定義，默認值
   2. 引用數據類型：對象
4. 變量
   * 變量：一小塊儲存數據的內存空間
   * Java語言是強類型語言，而JavaScript是弱類型的語言。
   * 強類型：開闢空間時，定義了空間存儲數據的數據類型，只能存儲指定數據類型的數據
   * 弱類型：開闢空間時，不定義存儲的數據類型，能夠存聽任意數據類型的數據
   * 語法：var 變量名 = 初始化的值；
5. 運算符
   1. 一元運算符：只有一個運算數的運算符
   ++，--，+(正號)
   2. 算數運算符
   +，-，*，/，%...
   3. 賦值運算符
   =，+=，-=
   4. 比較運算符
   <,>,<=,>=,==,===(全等於)
   ==：數值大小相等便可，不須要數據類型也同樣
   ===：大小相等，數據類型同樣
   5. 邏輯運算符
   && ，||，！
   6. 三元運算符
   ？：
6. 流程控制語句
   1. if...else...
   2. switch
   3. while
   4. do...while
   5. for
7. JS特殊語法
   每行；可寫，可省略
   用var定義爲局部變量，不用var則爲全局變量

基本對象

1. Function函數對象
   1. var fun = new Function(形參，方法體) (不經常使用)
   2. function 方法名(形參){ 方法體 }
   3. var 方法名 = function(形參){ 方法體 }
   1. Array數組對象
      1. 建立數組
         1. var arr = new Array(元素列表)
         2. var arr = new Array(默認長度)
         3. var arr = [元素列表]
      2. 方法
         • join(參數)：將數組中的元素按指定分隔符拼接成字符串
         • push(參數)：向數組末尾添加一個或多個元素，並返回新的數組長度
      3. 屬性
         • length：數組的長度
      4. 特色
         1. JS中，數組元素的類型是能夠變的
         2. JS中，數組長度是可變的
   2. Boolean
   3. Date日期對象
      1. 建立
         var date = new Date()
      2. 方法
         • toLocaleString，返回當前date對應的時間本地字符串格式
         • getTime(),獲取1970年1月1日零點到如今的毫秒值
   4. Math
      1. 建立
         特色：不用建立直接使用。Math.方法名();
      2. 方法
         random()：返回一個0~1之間的隨機數 （含0不含1）
         cell()：對數進行向上取整
         floor()：對數進行向下取整
         round()：四捨五入取整
      3. 屬性
         PI
   5. Number
   6. String
   7. RegExp正則表達式對象
      1. 正則表達式：定義字符串的組成規則。
         1. 單個字符
            如：[a] [ab] [a-zA-Z0-9_]
            • 特殊符號表明特殊含義的單個字符
              \d：單個數字字符
              \w：[a-zA-Z0-9_]
         2. 量詞符號
            " ? ": 表示0次或1次
            " * ": 表示出現0次或屢次
            " + ": 出現1次或屢次
            {m,n}: 表示m<= X <=n
            m若是缺省:{,n}最多n次 ； n若是缺省:{m,}最少m次
            
         3. 開始結束符號
            ^: 開始符號
            $: 結束符號
      2. 正則對象
         1. 建立
            1. var reg = new RegExp("正則表達式")
            2. var reg = /^正則表達式&/
         2. 方法
            • test(參數)：驗證指定的字符串是否符合正則定義的規則
   8. Global
      1. 特色：全局對象，Global中封裝的方法不須要對象就能夠直接調用
         
      2. 方法：
         encodeURI(): url 編碼
         decodeURI(): url 解碼
         encodeURIComponent(): url 編碼，編碼的字符更多
         decodeURIComponent(): url 解碼
         parseInt(): 將字符串轉成數字,逐一判斷每一個字符是否爲數字，直到不是數字爲止，將前面數字部分轉爲number
         eval(): 將JavaScript字符串，並把它做爲腳本代碼來執行
         var code = "alert("123")"; //code本爲字符串
         eval(code); //被做爲腳本執行，將彈出123

BOM

1. 概念：Browser Object Model 瀏覽器對象模型
   * 瀏覽器的各個組成部分封裝成的對象
   1. 組成：
      • window ：窗口對象
      • Navigator：瀏覽器對象
      • Screen：顯示器屏幕對象
        
      • History：歷史記錄對象
        
      • Location：地址欄對象
   2. window：窗口對象
      1. 建立
      2. 方法
         1. 與彈出窗口有關的方法
            1. alert("Hello") = window.alert("Hello") 顯示一個帶有一段消息各一個確認按鈕的警告框
            2. confim() 顯示帶有一段消息以及確認按鈕和取消按鈕的對話框。
               • 若是用戶點擊肯定返回 true
               • 若是用戶點擊取消返回 false
            3. prompt() 顯示可提示用戶輸入的對話框。
               • 返回用戶輸入的值
         2. 與打開和關閉有關的方法
            1. close() 關閉瀏覽器窗口
               • 誰調用 關閉誰
            2. open("網址") 打開一個新的瀏覽器窗口
               • 返回一個新的window對象
         3. 與定時器有關的方法
            1. setTimeout() 設定定時器
               • 參數兩個
                 1. js代碼或者方法對象
                 1. 毫秒值
                 • 返回值，惟一標識，用於取消定時器
            2. clearTimeout() 關閉定時器
            3. setInterval() 設定循環定時器
            4. clearInterval() 關閉循環定時器
      3. 屬性
         1. 獲取其餘BOM對象
         hiatory、location、Navigator、Screan
         2. 獲取DOM對象
         document
      4. 特色
         * 不須要建立能夠直接使用
         * window引用能夠省略。
   3. Location地址欄對象
      1. 建立(獲取)
         1. window.location
         2. location
      2. 方法
         • reload() 從新加載當前文件(刷新)

      3. 屬性

         • href
   4. History歷史記錄對象
      1. 建立(獲取)
         1. window.history
         2. history
            

      2. 方法

         • back() 加載 history 列表中的前一個URL
         • forward() 加載 history 列表下一個URL
         • go() 加載 history 列表中某個具體頁面
      3. 屬性
         • length 返回當前窗口歷史列表中URL數量

DOM

1. 概念：Docunent Object Model 文檔對象模型
   • 將標記語言文檔的各個組成部分，封裝成對象。可使用這些對象，對標記語言文檔進行CRUD的動態操做
2. W3S DOM 標準被分爲3個不一樣的部分
   * 核心 DOM - 針對任何結構化文檔的標準模型
   1. Document：文檔對象
   2. Element：元素對象
   3. Attribute：屬性對象
   4. Text：文本對象
   5. Comment：註釋對象
   * Node：節點對象，其餘5個對象的父對象
   * XML DOM - 針對 XML 文檔的標準模型
   * HTML DOM - 針對 HTML 文檔的標準模型
   1. 核心 DOM 模型
      • Document：文檔對象
        1. 建立(獲取)：在HTML中能夠用window對象獲取
           1. window.document
           2. document
        2. 方法
           1. 獲取Element對象
              1. getElementById()：根據id得到屬性對象，id屬性值通常惟一
              2. getElementsByTagName()：根據元素標籤名稱獲取元素對象們。返回值爲一個數組
              3. getElementsByClassName()：根據class屬性值獲取元素對象們。返回值爲一個數組
              4. getElementsByName()：根據name屬性值獲取元素對象們。返回值爲一個數組
           2. 建立其餘DOM對象
              • createAttribute(name)：建立屬性
              • createComment()
              • createElement()：建立標籤
              • createTextNode()：建立節點
        3. 屬性
      • Element：元素對象
        1. 獲取/建立：經過document來完成
        2. 方法
           1. removeAttribute()：刪除屬性
           2. setAttribute()：設置屬性
      • Node：節點對象
        1. 特色：全部DOM對象均可以被認爲是一個節點
        2. 方法
           • CRUDdom樹：
           • appendChild()：向節點的子節點列表的結尾添加一個新的子節點
           • removeChild()：刪除(並返回)當前節點的指定子節點
           • replaceChild()：用新的節點替換子節點
        3. 屬性
           • parentNode 返回當前節點的父節點
   2. HTML DOM 模型
      1. 標籤體的設置和獲取：innerHTML
      2. 使用html元素對象的屬性
      * 查看API
      3. 控制元素樣式
      1. 使用元素的style屬性設置
      * div.style.border = "1px solid red";
      font-size --> fontSize
      2. 提早定義好類選擇器的樣式
      * div.className = "d1";

事件監聽機制

1. 概念：某些組件被執行了某些操做後，觸發某些代碼的執行。
   1. 事件：某些操做 如：單擊事件，雙擊事件，鍵盤事件，鼠標事件
   2. 事件源：組件。如：按鈕 文本輸入框
   3. 監聽器：代碼
   4. 註冊監聽：將事件，事件源，監聽器結合在一塊兒。當事件源上發生了某個事件，則觸發執行某個監聽器代碼。
   1. 常見的事件
      1. 點擊事件
         1. onclick：單擊事件
         2. ondblclick：雙擊事件
      2. 焦點事件
         1. onblur：失去焦點
         2. onfocus：得到焦點
      3. 加載事件
         • onload：加載事件
      4. 鼠標事件
         1. onmousedown 鼠標被按下
         2. onmouseup 鼠標被鬆開
         3. onmousemove 鼠標被移動
         4. onmouseover 鼠標移動到元素之上
         5. onmouseout 鼠標從元素上移開
      5. 鍵盤事件
         1. onkeydown 某個按鍵被按下
         2. onkeyup 某個按鍵被鬆開
         3. onkeypress 某個按鍵被按下並鬆開
      6. 選擇和改變
         1. onchange 域的內容被改變
         2. onselect 文本被選中
      7. 表單事件
         1. onsubmit 確認按鈕被點擊
            1. onreset 重置按鈕被點擊