Please enable JavaScript.

Coggle requires JavaScript to display documents.

JS筆記 (陣列 (定義：可以儲存多個值的單一容器命名原則與變數相同, 使用[ ]包覆可以儲存各種型別的值，所以數字、字串、布林等可同時在同…

- - - - 字串名. length =>回傳字串長度
        字串名[ 索引值n ] =>回傳第n-1個字(從0開始)
      - 字串名.indexOf('xxx')尋找字串當中的子字串xxx，回傳xxx第一個字位置索引值，如未包含此子字串則回傳-1
      - 字串名.slice( a, b)，取出字串索引值第a至第b-1個字的子字串
        字串名.slice( a)，取出字串索引值第a至最後字的子字串
      - toLowerCase() and toUpperCase() 轉換所有的字元為大寫或小寫
      - 字串名.replace(xx,oo)以oo取代字串中的xx
      - 字串名.charAt(索引值n)回傳字串第n-1個字
      - str.substring(start, end) 返回從 start 到 end（不包括）之間的字元，start、end均為非負整數。若結束引數(end)省略，則表示從start位置一直擷取到最後
      - String.fromCharCode(num1, ..., numN) 返回一個asci碼轉換的字串
        字串名.charCodeAt()返回給定索引值處的文字的asci碼
        
        ASCII查詢
      - .repeat(n) =>回傳字串重覆n次
      - string.split ( 指定切割處 , 切割的最大數量)，回傳一個陣列
      - str.concat(str2 [, ...strN]) 合併字串，並回傳一新字串，str2 [, ...strN]為欲合併到str的字串
- - - - 節點屬性:
        Node.nodeType
        Node.nodeName
        會返回節點的名稱。
        Node.nodeValue
        用來取得 text, comment 和 CDATA 節點的內容，如果是 attribute 節點則會返回屬性內容。
        Element.innerHTML
        可以用來取得一個 DOM 元素節點中的 HTML 內容。
        innerHTML 屬性是可寫的，可以用來改變某元素下的 HTML 內容
        Element.innerText
        屬性和 innerHTML 用法類似，只是 innerText 會將 HTML 標籤去除。
        Node.textContent
        textContent 屬性和 innerText 用法類似，但有下面這些差異：
        textContent 會返回包含 <script> 和 <style> 的所有內容，但 innerText 不會。
        innerText 不會返回畫面中看不見的元素 (例如樣式是 visibility: hidden; 或 display: none;)，但 textContent 會返回。
        Element.outerHTML
        可以用來取得一個 DOM 元素節點的 HTML 內容，跟 innerHTML 的差別在於 outerHTML 還會返回節點本身的 HTML 內容。
        outerHTML 屬性還可以用來改變某元素的 HTML 內容，有點像取代掉原節點的意思：
      - 新增、修改、刪除 DOM 節點
        document.createElement(tagName)
        用來建立一個新的 HTML 元素。
        document.createTextNode(str)
        用來建立一個新的文字節點 (text node)
        ParentNode.appendChild(aChild)
        用來新增一個新的子元素到現有子元素的最後面。
        ParentNode.insertBefore(newNode, referenceNode)
        用來將一個新的元素加到某個元素的前面。
        也可以用來移動 DOM 元素的位置
        referenceNode如果是null，則會新增到現有子元素的最後
        ParentNode.removeChild(child)
        removeChild 方法用來移除 DOM 節點。
        ParentNode.replaceChild(newChild, oldChild)
        用新節點來取代某個子節點，這個新節點可以是某個已存在的節點或是新節點。
        Node.cloneNode(deep)
        可以用來複製一個節點，cloneNode 預設不會複製節點的內容，你可以傳入參數 true 來複製節點的內容。
        
        insertBefore補充
        There is no insertAfter method. It can be emulated by combining the insertBefore method with nextSibling.
        In the previous example, sp1 could be inserted after sp2 using:
        parentDiv.insertBefore(sp1, sp2.nextSibling);
  - - - Event Object 事件物件
        當事件處理函數被執行時，會傳入一個參數代表 event object。
        ex: element.onclick = function(event) {...}
        ex:element.addEventListener('click', function(event) {..}
        在 IE9 以下的 DOM Level 0 或 attachEvent 方法不會傳入 event object，但有一個 global 的 window.event object 可以用來代替，所以跨瀏覽器 (cross-browser) 的寫法可以改成：
        element.onclick = function(event) {
        event = event || window.event;
        } 參考連結
        
        bubbles : 表示這事件是否是在「冒泡」階段觸發 (true / false)
        pageX / pageY : 表示事件觸發時，滑鼠座標在網頁的相對位置
        
        Event Object 有幾個常用的屬性 (property)：
        type : 表示事件的名稱，例如 "click"
        target : 表示觸發事件的元素
        currentTarget：在 event bubbling 階段中，指向目前執行的事件處理函數是綁定在哪個 DOM element 上
        timeStamp：事件發生時的時間 timestamp (單位是 milliseconds 毫秒)
        eventPhase：返回為一個數字，表示事件處於目前所處的傳播狀態 (event flow)，有這些值：
        其它參考：
        滑鼠事件常用屬性：
        MDN參考
        鍵盤事件常用屬性：
        MDN參考
      - 事件委託 (Event Delegation)(事件監聽優化):
        如需監聽多個子元素，可將事件監聽綁定在父元素，之後再設定click的e.targit.nodeName的條件判斷真正需事件處理的子元素
    - - 介面相關：
        load事件：
        註冊在 window 物件上，指的是網頁資源 (包括CSS、JS、圖片等) 全數載入完畢後觸發。
        如果是 img 元素的 load 事件，則表示是此圖片載入完畢後觸發。
        unload 、 beforeunload 事件：
        與 load 事件相反，unload 與 beforeunload 事件分別會在離開頁面或重新整理時觸發，而 beforeunload 會跳出對話框詢問使用者是否要離開目前頁面。
        error 事件：
        會在 document 或是圖片載入錯誤時觸發。
        只有 error 事件最適合以 on-event handler 的寫法來處理
        resize 事件：
        當瀏覽器 (window) 或指定元素 (element) 的「尺寸變更」時觸發。
        scroll 事件：
        當瀏覽器 (window) 或指定元素 (element) 的「捲軸被拉動」時觸發。
        DOMContentLoaded 事件：
        是在 DOM 結構被完整的讀取跟解析後就會被觸發，不須等待外部資源讀取完成。
      - 滑鼠相關：
        mousedown / mouseup 事件:
        會在滑鼠點擊了某元素「按下」(mousedown) 按鈕，以及「放開」(mouseup) 按鈕時觸發
        click 事件:
        dblclick事件
        mouseenter / mousemove / mouseleave 事件：
        滑鼠游標在這個元素內「移動」時，會連續觸發 mousemove 事件
        contextmenu事件
        選單事件在點擊右鍵時(或鍵盤的contexmenu)觸發(系統預設)，可設定preventDefault()阻止，或設定oncontextmenu=>return false 兩種
        滑鼠相關的事件，都可以透過event.pageX 與 event.pageY 屬性去取得目前在網頁對應的座標。
      - 鍵盤相關事件
        大多數情況下會將鍵盤事件註冊在 input 的輸入框上
        keydown 事件:
        「壓下」鍵盤按鍵時會觸發 keydown 事件。可以捕獲組合鍵，若按著不放則會連續觸發。
        keypress 事件:
        只會針對可以輸出文字符號的按鍵有效，此外也會因為大小寫的不同取得不同的keyCode，若按著不放則會連續觸發。只能捕獲單個鍵。
        keyup 事件:
        「放開」鍵盤按鍵時觸發。可以捕獲組合鍵。
        ctrlKey事件: shiftKey. altKey.
        壓下ctrl、shift、alt鍵觸發事件，返回布林值
        用法：event.ctrlKey or e.ctrlKey
        repeat事件
        長按鍵事件，返回布林值，
        用法：Event.repeat
        若此時想要知道使用者按下的按鍵，則可以透過 event.keyCode 屬性來查詢。
        補充資料：
      - 表單事件：
        input 事件：
        當 input、 textarea 以及帶有 contenteditable 的元素內容被改變時，就會觸發 input 事件。
        change 事件：
        當 input、select、textarea、radio、checkbox 等表單元素被改變時觸發。但與 input 事件不同的是，input 事件會在輸入框輸入內容的當下觸發，而 change 事件則是在目前焦點離開輸入框後才觸發。
        submit 事件：
        當表單被送出時觸發，通常表單驗證都會在這一步處理，若驗證未通過則 return false;。
        focus 事件：
        當元素被聚焦時觸發。
        blur 事件：
        當元素失去焦點時觸發。
- - - - setTimeout()
        setTimeout(func, delay[, param1, param2, ...])
        func 是動作函式、delay是等候時間，單位是毫秒 (milliseconds)(1000毫秒=1秒)
        param1, ..., paramN 用來指定要傳入 func 函數的參數
        setTimeout() 執行後會返回一個數字，表示這個計時器的代號 id
        clearTimeout()
        語法：clearTimeout(timeoutID);
        timeoutID 就是執行 setTimeout() 時的返回值。
        setInterval()
        語法：setInterval(func, delay[, param1, param2, ...])
        clearInterval()
        語法：clearInterval(intervalID);
      - 當 setTimeout 遇到迴圈: IIFE