JavaScript 基礎講解

>>JavaScript 是嵌入HTML中在瀏覽器中的腳本語言，具備與java和C語言相似的語法。
>>特色：    
    <1>由瀏覽器解釋逐行執行代碼，不進行預編譯。
    <2>基於對象，內置有大量現成對象
>>使用方式：
    <1>在事件定義時直接寫JS
    <2>嵌入式：使用<script>標籤
    <3>HTML頁面引用.JS文件
    *注*：script標籤要麼用來寫JS，要麼用來引入JS。script標籤必須寫成雙標籤，不管有無內容 
>>註釋與JAVA相同
>>單引號和雙引號做用相同
>>定義變量使用var關鍵字
>>JavaScript數據類型分爲四類：
    <1>特殊類型：null 空  undefined 未定義
    <2>基本類型（內置對象）：
        number 數字 string 字符串 Boolean 布爾 Function 函數 Array 數組
    <3>外部對象：Window 瀏覽器對象 document 文檔對象
    <4>自定義對象
>>數據的隱式轉換
    字符串+數字 ：數字轉換爲字符串
    字符串+布爾值：布爾值轉換爲字符串
    數字+布爾值：布爾值轉換爲數值 true：1   false：0
    布爾值+布爾值：數值相加
>>當使用其餘值作條件時，表明空的值等價於false，表明非空的值等價於true。
    空：null/""/undefined/0/NaN

>>>>>>>>>>>>>>>1.內置對象<<<<<<<<<<<<<<<<<<<<
1）    String
    ---JS的string有length屬性，而JAVA中是length（）方法
    ---JS中多了一個方法，X.charCodeAt(index):返回指定位置字符的Unicode編碼
    ---JS中少了一個方法。S.replaceAll().
    ---JS中的String和JAVA差很少，以瞭解爲主。
2) Number
    ---toFixed(m) m爲須要保留的小數位數
        將數字轉換爲字符串，並保留相應的小數位數
3) Array（*）
    >>>JS中的數組都是Object數組，例：var a1 = ["zhangsan",23,false];
    ---建立:
        //已知數據時這樣建立
        var a1 = ["zhangsan",23,false];
        //未知數據時這樣建立
        var a2 = new Array();
        //放數據
        a2.push("list");
        a2.push(26);
        a2.push(true);
    ---數組倒轉：x.reverse()
    ---數組排序: x.sort([SortFunc]):sortFunc爲比較方法
        JS中的數組都是Object數組，因此它默認將全部元素的轉換爲toString，而後進行排序。
4) Math
    >>與JAVA中的Math類似，瞭解。
5）Date
    ----建立：
        var now = new Date();(獲取客戶端時間)
        var now2 = new Date("2016/8/31 11:55:23");
    ----方法：
        toLocaleTimeString();
        toLocaleDateString();
6） 正則：RegExp對象 **重要**
    \d：表示任意一個數字
    \w：表示任意一個單詞字符（只能是 數字，字母，下劃線）
    \s：表示任意一個空白字符(\t \r \n \f \x0B)
    \D：表示任意一個非數字字符
    \W：表示任意一個非單詞字符
    \S：表示任意一個非空白字符
    <1>建立正則對象
    ----var reg = /\d/g;
    ----var reg = new RegExp("\d",g);
    <2>檢測模式
     1.  i:ignore 忽略大小寫
     2.  g:globle 全局模式

    <3>正則對象的檢測方法
    ---reg.test(str) **重要**
        檢查Str中，是否包含與reg匹配的字串,返回Boolean值。
    ---reg.exec(str)
        >>在非全局模式下，從str中找出和reg匹配的第一個字串
          >>在全局模式下，第N次調用此方法，就是，從str中找出第N個和reg    匹配的字串
    <4>字符串支持正則的方法
    ---str.replace(reg,"目標") **重要**
        >>>>將str中和reg匹配的子串替換成目標，並返回新的字符串
        ◆修改字符串的API都是產生新字符串，原來的字符串是不變的
    ---str.match()
        從str中找出和正則匹配的全部字串
    ---str.sereach()
        從str中找出和reg首次匹配的字串的索引
7)Function對象
    --關鍵字function 用於定義函數
    ---返回值 默認爲undefined 也可以使用return返回具體值
    ---JS中函數沒有重載
        >>>>arguments數組對象：函數的參數數組   **重要**
            沒有收到實參的參數值是undefined
    <1>匿名函數
        建立匿名函數：function(arg1,...,argN){函數體};
        用於特殊環境，如數組排序。
    <2>全局函數：
    --parseInt/parseFloat
        字符串轉換爲數字
    --isNaN
        判斷字符串是否爲非數字，非數字：true 數字：false
    --eval   **重要**
        用於計算表達式字符串；如eval("2+4");//6
    --typeof
        查詢當前值的類型

>>>>>>>>>>>>>>>2.外部對象 **重要**<<<<<<<<<<<<<<<<
    >>外部對象就是瀏覽器提供的API
      >>BOM和DOM
      <a>BOM:Browser Object Model 瀏覽器對象模型
      --用來訪問和操縱瀏覽器窗口，使JS有能力與瀏覽器"對話"
      --可移動窗口，更改狀態欄文本、執行其餘不予頁面內容發生直接聯繫的操做
      <b>DOM:Document Object Model 文檔對象模型
      --用來操做文檔(網頁)
      --定義了訪問和操做HTML文檔的表中方法。
      **注：** BOM包含了DOM
>>>>> windows 對象
    --調用window的屬性和方法能夠省略"window."
  <1>經常使用的屬性對象
  --document 文檔
  --history 
  --location 地址欄
  --screen 屏幕
  --navigator 內核
  <2>經常使用的方法：
  -->對話框：
    --alert():彈出框
    --confirm():確認框，返回Boolean值
    --prompt():輸入框，返回輸入的字符
  -->定時器：
    一次性定時器：
    --setTimeout(exp,time):exp:須要執行的代碼或函數 time：多少毫秒  返回一個ID
    --clearTimeout(tID):中止執行定時器
    週期性定時器：
    --setInterval(exp,time): exp:須要執行的代碼或函數 time：多少毫秒  返回一個ID
    --clearInterval(tID):中止執行定時器
  <3>子類對象
  <<1>>location 對象
    --屬性：localtion.href 更改當前網頁
    --方法：location.reload() 刷新當前網頁
  <<2>>history 對象
    --方法：
      --back() 後退
      --forward() 前進
      --go(num) 跳轉，前進或後退取決於num的值是正或負
  <<3>>screen
    --屬性：
    --screen.width 屏幕的寬
    --screen.height 屏幕的高
    --screen.availWidth 有效寬
    --screen.availHeight 有效高
  <<4>>navigator對象
    --navigator.userAgent
  <<5>>document文檔節點（根節點） ----> DOM 對象  **重要**
    --DOM 操做：查找節點，讀取節點信息，修改節點信息，建立新節點，刪除節點
    1.讀寫節點的類型和名稱：
      --屬性：nodeType 、nodeName
    2.讀寫節點的內容
      --兩個屬性：
      --innerHTML：支持子標籤 
      --innerText：不支持子標籤 
    3.讀寫表單控件的值
      --包括：input、select、textarea
      --讀：input.value
      --寫：input.value=""
    4.讀寫節點的屬性
      4.1使用方法：這些方法都是標準的API，任何版本的瀏覽器都支持
        --getAttribute() 獲取節點的屬性
        --setAttribute() 設置節點的屬性
        --removeAttribute() 刪除屬性
    4.2使用屬性
      4.2.1標準屬性：這些屬性是標準的API，任何版本的瀏覽器都支持
        標準屬性包括：id/className/style 其餘爲非標準
      4.2.2非標準屬性：這些不是標準API，低版本的瀏覽器不支持
    5.根據標籤名查詢節點
      5.1在整個文檔內查詢
        --var li = document.getElementsByTagName("li");
      5.2在某個節點下查詢
        --var ul = document.getElementById("city");
        --var uli = ul.getElementsByTagName("li");  
    6.根據層次查詢節點
      6.1查詢某節點的父親
        --xx.parentNode
      6.2查詢某節點的全部孩子(帶空格/回車,因此通常不用)
        --xx.childNodes
      6.3查詢某節點的元素孩子
        --xx.getElementsByTagName("某個節點名");
      6.4查詢某節點的兄弟
        --節點.父親.孩子們[i]:
        gz.parentNode.getElementsByTagName("某個節點名")[i];
    7.根據name屬性查詢節點
      --一般用來獲取一組radio或checkbox
      --document.getElementsByName("name");
    8.建立添加新節點
      --建立:document.createElement(ElementName)
      --添加：
        1>>appendChild(newNode) 添加在最後
        2>>insertBefore(newNode,已有節點) 添加在已有節點前
>>>>>>>>>>>>>>>3.自定義對象<<<<<<<<<<<<<<<<
1）直接量（JSON）
  ---var obj = {"name":"zs","age":35,"job":function(){}};
  ---{}表明一個對象，內置鍵值對
  ---一般key是字符串，value是任意類型數據（包括函數）
  ---特色：採用這種方式建立對象簡單
2）構造器（用來new的函數就是構造器）
  2.1） JS內置的構造器
      ---特定：Date，String，Array,RegExp
      ---通用：Object
      ---優勢：簡單，缺點：不夠直觀
  2.2） 自定義構造器
      ---寫一個函數來充當構造器
      ---函數名首字母大寫，加參數接收傳入的數據
      ----優勢：直觀 缺點：麻煩

  ◆注：使用建議：
      ◆若封裝出來的對象給被人使用，建議用2.2
      ◆若封裝的對象中沒有方法，建議用1
      ◆若封裝的對象中有方法，建議用2.1

>>>>>>>>>>>>>>> 4.事件 Event <<<<<<<<<<<<<<<<
  1.事件的概述
    --事件就是操做、動做
    ---事件就是JS被調用的時機
    分爲：鼠標事件，鍵盤事件，狀態事件
    >>>>>狀態事件：某條件達成時自動觸發的事件
  2.事件的定義
    1）直接定義
      --直接在標籤上經過屬性定義事件
      --標籤和JS耦合度高
    2）事件後綁定
      --在頁面記載以後
      --獲取到要綁定事件的那個元素節點 (也是標準的)
      --input.onclick = function(){};
    3）取消事件
      -在事件函數內取消事件：return false
  3.事件對象
    1）什麼是事件對象
      --事件發生時瀏覽器對此事件建立的一個對象
      --該對象中封裝了本次事件的詳細信息，如鼠標的位置
    2）如何得到事件對象
    >>直接得到
      --在調用函數時直接傳入event
      onclick = "f1(event);"
      在開發f1()時須要加參數來接收這個event事件
    >>後綁定事件
      --瀏覽器在調用函數時會自動傳入enent
      --在函數上增長參數接收event便可
  4.事件冒泡機制
   >>冒泡機制
       --多層元素都定義相同的事件
       --點擊內層的則外層元素事件也會觸發
       --事件觸發順序是由內向外執行，稱爲冒泡機制

   ----經過事件對象能夠取消冒泡機制
   --根據瀏覽器的不一樣有兩種方法：
      >>event.stopPropagation();
      >>event.cancelBubble = true;
  5.事件源
    獲取事件源：
      根據瀏覽器的不一樣有兩種方法：
      >>event.srcElement
      >>event.target

    ◆注：冒泡機制的做用：
        ◆用來簡化事件的定義
        ◆能夠在父元素上定義一次事件，經過獲取事件源來獲取事件