1、介紹

JavaScript

JavaScript：一種直譯式指令碼語言，是一種動態型別、弱型別、基於原型的語言，
內建支援型別。它的直譯器被稱為 JavaScript 引擎，為瀏覽器的一部分，廣泛用於客戶端的指令碼語言。

組成部分：

• ECMAScript： JS 基礎語法(規定 關鍵字 運算子 語句 函式等等…)
• BOM： 瀏覽器物件模型
• DOM： 文件物件模型

作用：修改html頁面的內容；修改html的樣式；完成表單的驗證。

注意：JS 可以在頁面上直接寫，也可以單獨出去；JS 的檔案的字尾名 .js

JS 和 HTML 的整合：

• 方式1：在頁面上直接寫，將 js 程式碼放在 <script></script>
  標籤中,一般放在head 標籤中

<script type="text/javascript">
    funtion fuc1(){
        alert(111);
    }
</script>

• 方式2：獨立的 js 檔案，通過 script 標籤的src屬性匯入。eg：<script type="text/javascript" src="test.js" ></script>

2、JavaScript 基礎

JS 中的變數宣告：

• var 變數名=初始化值;
• var 變數名; 變數名=初始化值;

注：var可以省略，建議不要省略；一行要以分號結尾，最後一個分號可以省略,建議不要省略。

JS 的資料型別：

1、原始型別（5種）

• Null
• String
• Number
• Boolean
• Undefined

通過 typeof 運算子可以判斷一個值或者變數是否屬於原始型別，若屬於原始型別，還可以判斷出屬於那種原始型別。typeof 變數|值;

若變數為 null，使用 typeof 彈出的值 object

使用 typeof 的返回值：

• undefined - 如果變數是 Undefined 型別的
• boolean - 如果變數是 Boolean 型別的
• number - 如果變數是 Number 型別的
• string - 如果變數是 String 型別的
• object - 如果變數是一種引用型別或 Null 型別的

2、引用型別

運算子：

• 關係運算符：

  • 兩邊值都是字元，比較 ascii 碼
  • 兩邊都是數字，和 java 一樣
  • 一邊是數字，一遍是字串形式的數字 eg：3>"2" 可以比較，將字串形式的數字轉換成數字在進行比較。
  • 一邊是數字，一遍是普通字串 eg：3>"hello" 可以比較，值永遠是 false

• 等性運算子：== 只判斷值是否相同；=== 不僅判斷是否相同,還要判斷型別是否相同

  "66"==66  true
  "666"===666 false

JS 的語句：

if、while、for 等和 java 一樣，switch 和 java 一樣(區別：switch 後面跟字串，還可以跟變數)

JS 操作：

獲取元素：var obj=document.getElementById("id值");
獲取元素的value屬性：var val=document.getElementById("id值").value;
設定元素的value屬性：document.getElementById("id值").value="sdfsdf";
獲取元素的標籤體：var ht=document.getElementById("id值").innerHTML;
設定元素的標籤體：document.getElementById("id值").innerHTML="ssss";

定義函式：

• 方式1：function 函式名(引數列表){函式體}

• 方式2：var 函式名=function(引數列表){函式體}

  注意：函式宣告的時候不用宣告返回值型別；引數列表上不要寫引數型別；通過return 結束方法和將值返回；函式呼叫的時候：函式名(引數)

事件：

• onclick 單擊
• onsubmit 表單提交，加在 form 表單上的 onsubmit="return 函式名()" ，函式返回值為boolean型別
• onload 頁面載入成功或者元素載入成功

事件和函式繫結：

• 方式1：通過元素的事件屬性，<xxx onxxx="函式名(引數列表)">，若引數為 this 是將當前的 dom 物件傳遞給了函式

• 方式2：給元素派發事件（相當於給元素繫結事件）

  document.getElementById("id值").onxxx=function(){...};
  document.getElementById("id值").onxxx=函式名;

  注意：記憶體中應該存在該元素才可以派發事件，怎麼理解？因為網頁是從前往後解析，如果把派發事件寫在頁面元素的前面，而HTML頁面其實還沒載入完畢，在這之前獲取元素是獲取不到，即不能派發事件。

  做法：

  1. 將 js 程式碼放在html頁面的最下面
  2. 在頁面載入成功之後在執行 js 程式碼 onload 事件.
     ​

3、BOM（瀏覽器物件模型）

所有的瀏覽器都有 5 個物件。

• window:視窗
• location:定位資訊 (位址列)
• history:歷史

▶ Windows 物件詳解

如果文件包含框架（frame 或 iframe 標籤），瀏覽器會為 HTML 文件建立一個 window 物件，併為每個框架建立一個額外的 window 物件。

PS：若是 window 物件的屬性和方法,呼叫的時候可以省略 window

• 常用的屬性：通過 window 可以獲取其他的四個物件

  • window.location 等價於 location
  • window.history 等價於 history
  • …

• 常用的方法：

  • 訊息框：
    alert("....") 警告框
    confirm("你確定要刪除嗎?")確定框，返回值：boolean
    prompt("請輸入您的姓名") 輸入框，返回值：你輸入的內容

  • 定時器：
    設定定時器：setInterval(code,毫秒數):週期執行；setTimeout(code,毫秒數):延遲 多長事件後 只執行一次，例如：setInterval(showAd,4000);，serInterval("showAd()",4000);
    清除定時器：clearInterval(id):，clearTimeout(id):

  • 開啟和關閉：open(url) 開啟；close() 關閉

▶ location 物件：定位資訊，位址列

常用屬性：

• href 獲取或者設定當前頁面的 url(定位資訊)
• location.href; 獲取 url
• location.href=”…”;設定 url，相當於 a 標籤，超連結

▶ history 物件：操作歷史*

• back(); 後退
• forward(): 向前

• go(int)

  • go(-1) 相當於 back()
  • go(1) 相當於 forward()

4、DOM（文件物件模型）

就是我們的 HTML 程式碼載入到記憶體中會形成一顆 document 樹。

節點：

• 文件節點 document
• 元素節點 element
• 屬性節點 attribute
• 文字節點 text

獲取一個元素節點：通過 document 獲取
操作元素的屬性：dom物件.屬性
操作元素的標籤體：dom物件.innerHTML

5、其他及注意

1、在方法中 (function()) this 指代的是當前的元素（當前的 dom 物件）
例如：

<input type="text" name="username" id="username" onblur="loseFocus(this.value)">
方法:
    function loseFocus(obj){
        alert(obj);
    }

2、事件總結：

常見事件：

• 焦點事件★：onfocus、onblur
• 表單事件：onsubmit、onchange 改變
• 頁面載入事件★：onload
• 滑鼠事件（掌握）：onclick
• 滑鼠事件（瞭解）：ondblclick 雙擊、onmousedown 按下、onmouserup 彈起、onmousemove 移動、onmouserover 懸停、onmouserout 移出
• 滑鼠事件（理解）：onkeydown 按下、onkeyup 彈起、onkeypress 按住

3、阻止預設事件的發生；阻止事件傳播

4、引用型類似總結：

• 原始型別中的 String Number Boolean 都是偽物件，可以呼叫相應的方法
• Array：陣列

• String：

  語法:
      new String(值|變數);//返回一個物件
      String(值|變數);//返回原始型別
  常用方法:
      substring(start,end):[start,end)
      substr(start,size):從索引為指定的值開始向後擷取幾個
  
      charAt(index):返回在指定位置的字元。
      indexOf(""):返回字串所在索引
  
      replace():替換
      split():切割
  
  常用屬性:length 

• Boolean：

  語法：
      new Boolean(值|變數);
      Boolean(值|變數);
      非0數字 非空字串 非空物件 轉成true

• Number：語法

  語法:
      new Number(值|變數);
      Number(值|變數);
  注意:
  
      null====>0 
      fale====>0 true====>1
      字串的數字=====>對應的數字
      其他的NaN

• Date：

  new Date();
  常用方法:
      toLocalString()

• RegExp:正則表示式

  語法:
      直接量語法  /正則表示式/引數
      直接量語法  /正則表示式/
  
      new RegExp("正則表示式")
      new RegExp("正則表示式","引數") 
      引數:
          i:忽略大小寫
          g:全域性
      常用方法:
          test() :返回值為boolean

• Math：

  Math.常量|方法
  Math.PI
  Math.random()  [0,1)

• 全域性：

  decodeURI() 解碼某個編碼的 URI。 
  encodeURI() 把字串編碼為 URI。
  
  Number():強制轉換成數字
  String():轉成字串
  
  parseInt():嘗試轉換成整數
  parseFloat():嘗試轉換成小數
  
  eval() 計算 JavaScript 字串，並把它作為指令碼程式碼來執行。