js詳解

一、 JavaScript的組成

• ECMAScript (核心)：規定了JS的語法和基本對象。
• DOM 文檔對象模型：處理網頁內容的方法和接口
• BOM 瀏覽器對象模型：與瀏覽器交互的方法和接口

二、JavaScript的引入方式

• 外部引入：

  格式：<script type=”text/javascript” src=”javascript文件路徑” ></script>
  注意：在引入外部的script時，將不會執行內部的script

• 內部引入：
  格式：<script>代碼塊</script>
  注意：理論上講可以放在HTML代碼中的任何位置，但是建議放在body結束標籤的上面，可以保證頁面先加載，保證用戶體驗。

三、JavaScript的數據

• 變量
  變量：標示內存中的一塊空間，用於存儲數據，且數據是可變的。
  變量的聲明：var 變量名;

• 基本數據類型

• 1. string 字符串類型。””和’’都是字符串。JavaScript中沒有單個字符
  2. boolean 布爾類型。固定值爲true和false
  3. number 數字類型。任意數字
  4. null 空，一個佔位符。
  5. undefined 未定義類型，該類型只有一個固定值，即undefined，表示變量聲明卻未定義具體的值。

四、正則對象

• 在js中可以使用正則對象進行檢驗：
• 定義正則：var reg = /^表達式$/;
• 正則對象.test(string); 用來校驗字符串是否匹配正則。
• 可以在網上查找到相關的正則表達式（這裏引用一下別人整理好的）：
  https://www.cnblogs.com/zxin/archive/2013/01/26/2877765.html
  注意事項：
  /^表達式$/ 只要有無法成立正則的字符存在，即爲false。
  /表達式/ 只要有成立正則的字符存在，即爲true。

五、數組

注意：JS數組可以看做 Java中的ArrayList 集合。沒有類型限制

• 創建
  var arr = [1,2,3,”a”,true]; //常用的JS數組。 長度5
  var arr = new Array();創建一個數組對象，數組長度默認爲0

• 常用的方法
  lenght：設置或者返回數組中元素的數目
  join()：把數組的所有元素放入一個字符串
  pop()：刪除並返回數組的最後一個元素
  push()：向數組的末尾添加一個或更多元素，並返回新的長度
  reverse()：顛倒數組中元素的順序

六、global

• 執行eval()：
  計算JavaScript字符串，並把它作爲腳本代碼來執行
  注意：只可以傳遞原始數據類型string，傳遞String對象無作用。

• 編碼encodeURL()

• 解碼decodeURL()

七、函數

• 定義的格式
  
  注意：
• 參數列表無需使用var關鍵字，否則報錯；
• 參數列表可以寫，亦可以寫；
• JavaScript函數調用執行完畢一定有返回值，值及類型根據return決定， 如果未return具體值，返回值爲undefined；

八、BOM

主要使用的方法：

1. alert()：警告框，用來彈出警告消息。

2. confirm()：確認框，用於告知用戶信息並收集用戶的選擇
   注意：該方法有返回值，用戶通過選擇“確定”或者“取消”，方法結束會返回 boolean類型的值。這個時候就可以使用這個true或false來做判斷，進行下一步的操作

3. 定時器
   setInterval(調用方法,毫秒值)：啓動循環定時器
   clearInterval(定時器ID)：停止循環定時器
   setTimeout(調用方法,毫秒值)：啓動一次性定時器
   clearTimeout (定時器ID)：停止一次性定時器

4. location對象
   href屬性：設置或者返回完整的URL

九、DOM

1. 一個HTML文檔加載到內存中就會形成一個DOM對象
2. 獲取元素對象
   getElementById(); —通過元素ID獲取對應元素對象
   getElementsByName(); —通過元素的name屬性獲取符合要求的所有元素 getElementsByTagName(); —通過元素的元素名屬性獲取符合要求的所有元素
   getElementsByClassName(); —通過元素的class屬性獲取符合要求的所有元素
3. 示例：其中的document對象爲文檔對象

     document.getElementById("repassword");

4. 元素對象常見屬性

• value：修改元素的值
  元素對象.value， 獲取元素對象的value屬性值。
  元素對象.value=屬性值 設置元素對象的value屬性值。

• checked：修改單選/複選的 選中與否
  元素對象.checked， 獲取元素對象的checked屬性值。
  元素對象. checked =屬性值 設置元素對象的checked屬性值。
  注：HTML中checked=”checked”，JavaScript中返回true，false

• innerHTML：操作元素的內容體
  元素對象.innerHTML， 獲取元素對象的內容體(標籤與標籤之間的內容)。
  元素對象.innerHTML=值 設置元素對象的內容體

• className：修改元素樣式
  元素對象.className， 獲取元素對象的class屬性值。
  元素對象. className =屬性值 設置元素對象的class屬性值。

十、事件

1. 驅動機制
   事件源（按鈕）
   事件（onclick）
   監聽器(方法,例如run())
   註冊監聽器(onclick = “run()”)
2. 常見的js事件
   點擊事件（onclick）
   獲取焦點事件(onfocus)
   失去焦點事件（onblur）
   域內容改變事件（onchange）
   加載完畢事件（onload）
   表單提交事件（onsubmit）
   鍵位彈起事件（onkeyup）
   鼠標移入事件（onmouseover）
   鼠標移出事件（onmouseout）