概述

概念：一門客戶端指令碼語言

執行在客戶端瀏覽器中的。每一個瀏覽器都有JavaScript的解析引擎
指令碼語言：不需要編譯，直接就可以被瀏覽器解析執行了

功能

可以來增強使用者的html頁面的互動過程，可以控制html元素，讓頁面有一些動態效果，增強使用者的體驗

JavaScript = ECMAScript + BOM + DOM

ECMAScript：客戶端指令碼語言的標準

基本語法

與html結合方式

內部JS
- 定義<script>標籤，標籤體內容就是js程式碼
外部JS
- 定義<script>標籤，通過src屬性引入外部的JS檔案
注意：
- 可以寫在HTML的任意位置
- 放置的順序會影響JS的執行順序
- <script>標籤可以定義多個

註釋

單行註釋：//註釋內容
多行註釋：/* 多行註釋 */

資料型別

原始資料型別（基本資料型別）：
- number：整數 / 小數 / NaN
- string：字串型別
- boolean：布林型別
- null：一個物件為空的佔位符
- undefined：未定義。如果一個變數沒有給初始化值，則會被認為是undefined
引用資料型別：物件

變數

概念：一塊儲存資料的記憶體空間
Java語言是強型別的語言，而JavaScript是弱型別語言
語法：var 變數名 = 初始化值; //初始化值可以是任意值
typeof運算子：要檢查的變數是什麼樣的資料型別
- 注意：null原酸後得到的是object

運算子

一元運算子：只有一個運算數的運算子
- ++，--，+(正號), -(負號)
- 在JS中，如果運算數不是運算子所要求的型別，那麼JS引擎會自動的講運算子進行型別轉換
  - 其他型別轉number
    - string轉number：按照字面之轉換，如果字面值不是數字，則轉換成NaN
算術運算子：
- +，-，*，/，% ...
賦值運算子：
- =，+=，-= ...
比較運算子：
- <, >, ==, ===(全等於), <=, >=
邏輯運算子：
- &&, ||, !
三元運算子：
- ? :
特殊語法：
- 語句以分號結尾，如果一行只有一條語句，則分號可以省略
- 宣告變數，不用加var也可以
  - 加var定義的是區域性變數
  - 不加var定義的是全域性變數（不建議使用）

流程控制語句

if ... else
switch:
- 在Java中switch可以接受的資料型別：byte, int, shor, char, 列舉, 字串
- 在JS中可以接受任何值
while
do ... while
for

練習：99乘法表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>九九乘法表</title>
    <style>
        td {
            border: 3px solid black;
        }
    </style>
    <script>
        document.write("<table align='center'>");
        for (var j = 1; j <= 9; j++){
            document.write("<tr>")
            for (var k = 1; k <= j; k++) {
                //輸出
                document.write("<td>"+j+"*"+k+"="+j*k+"</td>");
            }
            document.write("</tr>")
        }
        document.write("</table>");
    </script>
</head>
<body>

</body>
</html>

基本的物件

Function物件：描述一個函式物件
- 建立：
  - 方式一
    
    var fun = new Function(形參列表, 方法體);
  - 方式二
    
    function 方法名稱(形參列表) { 方法體 }
  - 方式三
    
    var 方法名 = function(形參列表) { 方法體 }
- 方法：
- 屬性：
  - length：形參的個數
- 特點：
  - 方法定義時，形參的型別不用寫，返回值型別也可不寫
  - 方法是一個物件，如果定義名稱相同的方法，會覆蓋
  - 在JS中，方法的呼叫只與方法的名稱有關和引數列表無關
  - 在方法宣告中，有一個隱藏的內建物件（陣列），arguments，封裝所有的實際引數，類似於Java中的可變長引數。
```
function fuc() {
    /* 檢視隱藏引數的長度 */
    alert(arguments.length);
}

//求一個函式所有引數的和
function sum() {
    var result = 0;
    for(int i = 0; i < arguments.length; i++){
        if(typeof(arguments[i]) == "number")
        	result += arguments[i];
    }
    return result;
}
```
- 呼叫：
  - 方法名稱(實際引數列表)
Array物件：陣列物件
- 建立：
  - var arr = new Array(元素列表);
  - var arr = new Array(預設長度);
  - var arr = [元素列表];
- 方法
- 屬性
- 特點
  1. JS中陣列的元素的型別是可變的

JS中的自定義物件

物件的定義

var obj = new Object();  // 物件例項（空物件）
obj.Attr = value;        // 定義一個屬性
obj.func = function (){}  // 定義一個函式

物件的訪問
```
alert(obj.Attr);
alert(obj.fuc());
```

花括號形式的自定義物件

var obj = {
    Attr1: value1,       // 定義一個屬性
    Attr2: value2,       // 定義一個屬性
    func: function() {}  // 定義一個函式
} // 物件例項

JS中的事件

onload：載入完成事件，頁面載入完成之後，常用與做頁面JS程式碼的初始化操作
onclick：單擊事件，常用按鈕的點選響應事件
onblur：失去焦點事件，常用語輸入框失去焦點後驗證其輸入內容是否合法
onchange：內容發生改變事件，常用於下拉列表和輸入框內容發生改變後的操作
onsubmit：表單提交事件，常用於表單提交前，驗證所有表單項是否合法

事件註冊

事件的註冊

告訴瀏覽器，當時間響應後要執行那些程式碼，叫做事件註冊或者事件繫結

靜態註冊事件：通過html標籤的屬性直接賦予時間響應後的程式碼，這種方式我們稱為靜態註冊
動態註冊事件：事先通過JS程式碼得到標籤的DOM物件，然後再通過DOM物件.事件名=function(){} 這種形式賦予事件

動態註冊基本步驟：
1. 獲取標籤物件
2. 標籤物件事件名 = function(){}

onload事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"\>
    <title>OnloadEvent</title>
    <script type="text/javascript">
        //onload事件的方法
        function onloadFun() {
            alert('靜態註冊onclick事件');
        }

        //onload動態註冊
        window.onload = function () {
            alert('動態註冊onclick事件');
        }
    </script>
</head>
<!-- 靜態註冊onload事件 -->
<!-- <body onload="onloadFun()"> -->
<!-- 動態註冊onload註冊 -->
<body >
</body>
</html>

onclick事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"\>
    <title>OnloadEvent</title>
    <script type="text/javascript">
        //靜態註冊
        function onclickFun() {
            alert('靜態註冊onclick事件');
        }
        //動態註冊
        window.onload = function () {
            // 1. 獲取標籤物件
            /*
            document 是 javascript語言的一個物件（文件）
            */
            var btnobj = document.getElementById("button2");
            // 2. 通過標籤獨享.事件名 = function(){}
            btnobj.onclick = function () {
                alert('動態註冊onclick事件');
            }
        }
    </script>
</head>

<body>
    <button onclick="onclickFun()">botton1</button>
    <button id="button2">botton2</button>
</body>

onblur事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"\>
    <title>OnblurEvent</title>
    <script type="text/javascript">
    // 靜態註冊
    function onblurFunc() {
        // console物件是控制檯物件，有JS提供的物件
        // 專門用於控制檯列印
        console.log("靜態註冊onblur事件");
    }

    // 動態註冊
    window.onload = function () {
        var textobj = document.getElementById("password");
        textobj.onblur = function () {
            console.log("動態註冊onblur事件");
        }
    }
    </script>
</head>

<body>
    使用者名稱：<input type="text" onblur="onblurFunc()"/><br>
    密碼：<input type="text" id="password"/><br>

</body>
</html>

onchange事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"\>
    <title>OnchangeEvent</title>
    <script type="text/javascript">
    // 靜態註冊
    function onchangeFunc() {
        alert("靜態註冊onchange事件");
    }

    // 動態註冊
    window.onload = function () {
        var textobj = document.getElementById("select");
        textobj.onchange = function () {
            alert("動態註冊onchange事件");
        }
    }
    </script>
</head>

<body>
    請選擇你的英雄：
    <select onchange="onchangeFunc()">
        <option>A1</option>
        <option>A2</option>
        <option>A3</option>
        <option>A4</option>
    </select>

    請選擇你的英雄：
    <select id="select">
        <option>B1</option>
        <option>B2</option>
        <option>B3</option>
        <option>B4</option>
    </select>

</body>
</html>

onsubmit事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"\>
    <title>OnsubmitEvent</title>
    <script type="text/javascript">
    // submit時，要驗證所有的表單是否正確
    // 如果有一個表單不合法便會阻止提交
    // 靜態註冊
    function onsubmitFunc() {
        alert("靜態註冊Onsubmit事件 -- 發現不合法");
        return false;
    }

    // 動態註冊
    window.onload = function () {
        var textobj = document.getElementById("form");
        textobj.onsubmit = function () {
            alert("動態註冊Onsubmit事件 -- 發現不合法");
            return false;
        }
    }
    </script>
</head>

<body>
    <form action="http://localhost:8080" method="GET" onsubmit="return onsubmitFunc();">
        <input type="submit" value="靜態註冊"/>
    </form>

    <form action="http://localhost:8080" method="GET" id="form">
        <input type="submit" value="動態註冊"/>
    </form>
</body>
</html>

DOM模型

DOM全稱是 Document Object Model 文件物件模型

吧文件中的標籤，屬性，文字轉換為物件來管理。

DOM模型，體現在 document 物件。Document文件，由一個樹狀結構儲存。

Document管理了所有的HTML物件內容
document他是一種樹狀結構的文件，有層級關係。
把所有的標籤都物件化
可以通過document訪問所有的標籤物件

Document物件的方法介紹

document.getElementById(elementId)

通過標籤的ID屬性查詢標籤dom物件，elementId是標籤的ID屬性值

document.getElementByName(elementName)

通過標籤的name屬性查詢標籤的dom物件，elementName標籤的name屬性值

document.getElementByTagName(tagname)

通過標籤名查詢標籤dom物件，tagname是標籤名

document.createElement(tagName)

通過給定的標籤名。建立一個標籤物件，tagName是要建立的標籤名

節點的常用屬性和方法

節點就是標籤物件

方法

getElementByTagName(tagname) 方法

通過具體的元素節點呼叫該方法，可以回去當前節點的制定標籤名子節點

appendChild(oChildNode) 方法

增加一個子節點，oChildNode是要增加的子節點

屬性

childNodes：當前節點的所有子節點
firstChild
lastChild
parentNode：當前節點的父節點
nextSibling：當前節點的下一個節點
previousSibling：當前節點的上一個節點
className：獲取或設定標籤的 class 屬性值
innerHTML：獲取/設定其實標籤和惡結束標籤中的內容
innerText：獲取/設定其實標籤和惡結束標籤中的文字

JavaScript知識簡單整理

概述