JavaScript JavaScript（簡稱“JS”）是一種具有函數優先的輕量級，解釋型或即時編譯型的高級編程語言，弱類型，腳本語言三大部分核心（ECMAScript）：語法、類型、語句、關鍵字等文檔對象模型（DOM）：專門用於完成網頁之間的交互瀏覽器對象模型（BOM）：主要用於對瀏覽器 ...

JavaScript

JavaScript（簡稱“JS”）是一種具有函數優先的輕量級，解釋型或即時編譯型的高級編程語言，弱類型，腳本語言

三大部分

核心（ECMAScript）：語法、類型、語句、關鍵字等

文檔對象模型（DOM）：專門用於完成網頁之間的交互

瀏覽器對象模型（BOM）：主要用於對瀏覽器視窗進行操作

運行過程

說明: clipboard.png

使用方式

1、在html文件中的**<script></script>**標簽中直接編寫

script標簽可以寫多個
script標簽可以出現在任意位置

2、在js文件中編寫，在HTML文件中引用

<script src="Script文件地址"></script>

ECMAScript

數據類型

說明: clipboard.png

數組

/*定義數組*/
var a = new Array();
//或
var a = [1,"lucy"];
/*數組索引操作*/
a[0] = 12;
a[1] = "lucy";
document.write(a[0] + "," + a[1]);

允許存放不同的數據類型，但是一般存放統一的數據類型

數組元素沒有存放的位置，預設值undefined

常用方法

a.length(); //數組長度
a.push(); //往數組尾部添加元素，類似與進棧
a.pop(); //取值數組最後一個元素，並且移除該元素，類似與出棧

對象

/* 聲明對象 */
var student = {name:"lucy",age:12,sex:"男"};
/*對象屬性賦值*/
student.age = 15;
/*使用對象的屬性,對象名.屬性*/
document.write(student.name + "," + student.age + "," + student.sex);

變數

JavaScript使用var、let關鍵字定義變數

var 變數名 = 值;
let 變數名 = 值;

變數名稱對大小寫敏感

註釋

單行註釋：//
多行註釋：/* ... */

運算符

算數運算符

除法和java不一樣，數/數 = 數學結果，1 / 2 = 0.5

其餘運算符與java中一致

關係運算符

==：只比較值是否相等，和類型無關（基本數據類型）

===：絕對等於（值和類型都相等）

!=：只比較值是否不相等，和類型無關（基本數據類型）

!==：絕對不等於（值和類型都不相等）

邏輯運算符

&、|的結果為數值0（false）、1（true）

其餘運算符和java相似

函數

函數可以將一些代碼放置在一起，形成一個代碼塊，該代碼塊可以反覆的進行使用

格式

/*定義函數*/
function 函數名(參數列表){
    return 返回值    //可選
}
/*調用函數*/
函數名();

註意

1、函數可以多個，如果一旦方法的名字相同的話，函數沒有重載，後面同名函數會覆蓋前面的同名函數

2、調用函數時，可以傳入比函數定義參數更多的參數，只是多出來的參數不會被處理

3、對象的屬性也可以是函數，可以使用**對象名.函數名()**進行調用

如果需要在對象中的函數調用對象的屬性的話，不可以直接寫屬性名進行調用
需要使用this.屬性進行調用

4、變數的作用域是在一個函數中

分支結構

if...else if...else的使用方法和java中的類似

switch...case的使用方法和java中的類似，使用時需要註意數據類型，在匹配時，需要絕對等於

迴圈結構

for迴圈

和java中的類似

for...in迴圈

//迴圈遍曆數組
for(var i in arr) {
    alert(i + "..." + arr[i]);
}

while迴圈

和java類似

do...while迴圈

和java類似

迴圈中的break和continue關鍵字的效果和java中一樣

常用API

document.write("輸出的內容，可以帶html標簽")
console.log("在瀏覽器控制台輸出，調試模式下可以看到")
Math.random()  //隨機數
parseInt(將數值解析為整數)
prompt("請輸入"); //彈窗輸入
eval("1+1"); // 可以計算字元串的結果

DOM

文檔對象模型（Document Object Model）

在網頁被載入時，瀏覽器會創建頁面文檔對象模型，形成DOM樹

DOM樹

說明: clipboard.png

Document：樹對象，文檔對象
Element：元素對象，標簽對象
Attribute：屬性對象
Text：文本對象
Comment：註釋對象
Node：節點對象

獲取標簽對象的相關方法

方法	作用	備註
getElementById()	根據標簽的id屬性值來獲取標簽對象	一般id屬性是用來獲取標簽對象
getElementsByName()	根據標簽的name屬性值來獲取標簽對象們	一般name屬性是用來給後臺獲取數據用的
getElementsByTagName()	根據標簽名來獲取標簽對象們
getElementsByClassName()	根據標簽的class屬性值來獲取標簽對象們	一般class屬性是用來進行樣式設置的，使用類選擇器

如果直接在script標簽中執行獲取標簽對象的方法，頁面沒有載入，獲取的對象為null

//頁面載入完成，再執行函數
window.onload = function(){}

創建元素的相關方法

方法	方法
createElement()	創建元素節點
createAttribute(name)	創建擁有指定名稱的屬性節點，並返回新的 Attribute 對象
createTextNode()	創建文本節點
createComment()	創建註釋節點

==註意：創建出來的對象，都是游離狀態,需要放置在父元素對象上==

父元素對象.appendChild(創建的子元素對象);
//刪除子元素對象
父元素對象.removeChild(需要刪除的子元素對象);

對元素對象內容進行操作

操作的是元素對象，不可以操作元素對象數組，如果需要批量操作，只能寫迴圈進行

獲取修改標簽內容

標簽對象.innerHTML = "字元串";
標簽對象.innerText = "字元串";
//區別
innerHTML，獲取到的是HTML語句，用於處理標簽，會解析字元串中的標簽內容
innerText，獲取到的是內容，用於處理文本，不會解析字元串中的標簽內容

獲取修改標簽屬性

標簽對象.屬性名 = "屬性值";

獲取修改標簽樣式

//在標簽上添加樣式(樣式多的話，不推薦)
標簽對象.style.樣式名 = "值";
//給元素對象添加類屬性,在style標簽中添加類樣式
標簽對象.className = "類名"  //只可以加一個類名
標簽對象.classList.add("類名1","類名2",...); //可以添加多類名
//刪除多類名元素對象的一個類名
標簽對象.classList.remove("類名");

事件

事件的綁定方式

1、在標簽元素上添加onXXX屬性的方式綁定（xxx代表事件名稱）onXXX的值為js代碼，缺點是耦合度高

2、獲取標簽元素的對象，通過標簽.onXXX = function(){}，綁定事件

3、通過dom元素對象的addEventListener("事件名稱",function(){}，傳播特性)方法綁定事件（事件名稱不需要on首碼），推薦

JS中的事件

點擊事件：
- onclick：滑鼠點擊某個對象
- ondblclick：滑鼠雙擊某個對象
焦點事件：
- onblur：元素失去焦點
- onfocus：元素獲得焦點
- blur()：一調用，就會失去焦點
- focus()：一調用，就會獲取焦點
鍵盤相關事件：
- onkeydown：某個鍵盤的鍵被按下
- onkeypress：某個鍵盤的鍵被按下或按住，某個鍵盤按鍵被按下並鬆開。
- onkeyup：某個鍵盤的鍵被鬆開
載入事件：
- onload：某個頁面或圖像被完成載入
- onunload：用戶離開某個頁面
滑鼠相關事件：
- onmousedown：某個滑鼠按鍵被按下
- onmousemove：滑鼠被移動
- onmouseout：滑鼠從某元素移開
- onmouseover：滑鼠被移到某元素之上
- onmouseup：某個滑鼠按鍵被鬆開
表單相關事件：
- onchange：用戶改變域的內容
  - 支持該事件的 HTML 標簽：<input type="text">, <select>, <textarea>
- onselect：文本被選定
  - 支持該事件的 HTML 標簽：<input type="text">, <textarea>
- onsubmit 提交按鈕被點擊

事件的傳播特性

說明: clipboard.png

**addEventListener("事件名稱",function(){}，傳播特性)：**預設的傳播方式是false，冒泡

事件的冒泡

如果點擊最內層的紅色元素的話，點擊事件也會傳播到外層的藍色元素，稱為事件的冒泡

事件的捕獲

==addEventListener可以改變事件的傳播方式，第三個參數為true==

如果點擊最外層的藍色元素的話，點擊事件會傳播到內層的紅色元素，稱為事件的捕獲

事件的委托

將一個元素A中的子元素的點擊事件交給元素A處理，稱為事件的委托

例如，接收表格中的按鈕的點擊事件

//變數e用於接收瀏覽器傳入的點擊目標對象信息
table.onclick = function(e){
    //獲取到事件的觸發元素對象
    var t = e.target;
    //獲取觸發元素對象的名稱
    var butName = t.innerText;
    //篩選按鈕類型
    switch(butName){
        case "購買":
            //獲取購買按鈕的父元素對象
            var td = but.parentElement;
            //獲取td對象的父元素對象
            var tr = td.parentElement;
            //獲取tr的td子元素
            var tds = tr.children;
            alert("購買：" + tds[0].innerText);
            break;
        case "加入購物車":
            break;
        case "查看詳情":
            break;
    }
}

正則表達式

格式

//正則表達式格式
/正則表達式主體/修飾符(可選)
//正則表達式驗證
var regExp = /正則表達式/;
regExp.test("校驗的字元串");

規則

方括弧用於查找某個範圍內的字元：

表達式	描述
[abc]	查找方括弧之間的任何字元。
[0-9]	查找任何從 0 至 9 的數字。
(x	y)
n{x}	n恰好出現x次
n{x,}	n最少出現x次
n{x,y}	n最少出現x次，最多y次

元字元是擁有特殊含義的字元：

元字元	描述
\d	查找數字。
\s	查找空白字元。
\w	匹配數字、字母、下劃線
\W	匹配任意不是數字、字母、下劃線
.	匹配除換行符以外的任意單個字元
^	行的開頭
$	行的結尾
\uxxxx	查找以十六進位數 xxxx 規定的 Unicode 字元。

量詞:

量詞	描述
n+	匹配任何包含至少一個 n 的字元串。
n*	匹配任何包含零個或多個 n 的字元串。
n?	匹配任何包含零個或一個 n 的字元串。

修飾符可以在全局搜索中不區分大小寫:

修飾符	描述
i	執行對大小寫不敏感的匹配。
g	執行全局匹配（查找所有匹配而非在找到第一個匹配後停止）。
m	執行多行匹配。

使用String類型的match方法，可以匹配正則表達式

var a = "abcABC";
var r = a.match(/b/gi);

使用String類型的replace方法，可以替換字元串中的字元

var a = "sb,fuck";
var r = a.replace(/(sb)|(fuck)/gi,"*");

使用String類型的search方法，可以查詢匹配的類型首次開始位置索引

var a = "abc,efg,123,hig";
var r = a.search(/\d/g);

使用String類型的split方法，可以按照特定規則分割字元串

var a = "abc12def34";
var r = a.split(/\d+/);

漢字的Unicode編碼：[\u4e00-\u9fa5]

在表單標簽相關屬性：

pattern：相關文本規則，正則表達式不需要//

required：值為required，值不可以為空

BOM

瀏覽器對象模型（Browser Object Model）尚無正式標準

Window對象

所有瀏覽器都支持 window 對象。它表示瀏覽器視窗。

所有 JavaScript 全局對象、函數以及變數均自動成為 window 對象的成員。

全局變數是 window 對象的屬性。

全局函數是 window 對象的方法。

Window 常用屬性、方法

window.innerHeight - 瀏覽器視窗的內部高度(包括滾動條)

window.innerWidth - 瀏覽器視窗的內部寬度(包括滾動條)

window.open("新視窗地址","新視窗名稱","新視窗其餘屬性設置") - 打開新視窗

window.close() - 關閉當前視窗

window.moveTo() - 移動當前視窗

window.resizeTo() - 調整當前視窗的尺寸

Screen對象

window.screen 對象包含有關用戶屏幕的信息。

Screen常用屬性、方法

screen.availWidth - 可用的屏幕寬度

screen.availHeight - 可用的屏幕高度

screen.colorDepth - 色彩深度

screen.pixelDepth - 色彩解析度

Location對象

window.location 對象用於獲得當前頁面的地址 (URL)，並把瀏覽器本視窗重定向到新的頁面。

Location常用屬性、方法

location.hostname - 返回 web 主機的功能變數名稱

location.pathname - 返回當前頁面的路徑和文件名

location.port - 返回 web 主機的埠（80 或 443）

location.protocol - 返回所使用的 web 協議（http: 或 https:）

location.href 返回當前頁面的 URL

location.href = 'URL' - 可以重定向到新的頁面

location.assign() 方法載入新的文檔

history對象

window.history 對象包含瀏覽器的歷史。

history常用屬性、方法

history.go()：載入 history 列表中的某個具體頁面,go方法中可以傳遞參數，如果是正數，就是下某頁，如果是負數，就是上某頁

history.length：返回瀏覽器歷史列表中的 URL 數量

history.back() - 與在瀏覽器點擊後退按鈕相同

history.forward() - 與在瀏覽器中點擊向前按鈕相同

計時事件

setInterval()：按照指定的周期（以毫秒計）來調用函數或計算表達式

第一個參數：時間到了要執行的方法
第二個參數：周期（毫秒）
如果不關閉，它會一直執行下去

clearInterval()：取消由setInterval()設置的timeout

setTimeout()：在指定的毫秒數後調用函數或計算表達式

第一個參數：時間到了要執行的方法
第二個參數：過多長時間執行該方法（毫秒）
執行完一次之後，就不再執行

clearTimeout()：取消由 setTimeout()方法設置的timeout

彈窗

可以在 JavaScript 中創建三種消息框：警告框、確認框、提示框。

警告框

alert("警告信息");

確認框

confirm("提示信息");

返回值為boolean類型，選擇確定返回true，選擇取消返回false

提示框

當提示框出現後，用戶需要輸入某個值，然後點擊確認或取消按鈕才能繼續操縱。

如果用戶點擊確認，那麼返回值為輸入的值。如果用戶點擊取消，那麼返回值為 null。

window.prompt("提示信息","預設值");

Cookie對象

Cookie 用於存儲 web 頁面的用戶信息。

Cookie 是一些數據, 存儲於你電腦上的文本文件中。

當 web 伺服器向瀏覽器發送 web 頁面時，在連接關閉後，服務端不會記錄用戶的信息。

創建Cookie

JavaScript 可以使用 document.cookie 屬性來創建、讀取、及刪除 cookie。

document.cookie="key=value";

添加過期時間

以 UTC 或 GMT 時間，預設情況下，cookie 在瀏覽器關閉時刪除

document.cookie="key=value; expires=Thu, 18 Dec 2043 12:00:00 GMT";

可以使用 path 參數告訴瀏覽器 cookie 的路徑。預設情況下，cookie 屬於當前頁面。

document.cookie="key=value; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";

讀取 Cookie

document.cookie 將以字元串的方式返回所有的 cookie，類型格式： key1=value;key2 =value; key3=value;

var x = document.cookie;

刪除 Cookie

只需要設置 expires 參數為以前的時間即可

document.cookie = "key=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

刪除時不必指定 cookie 的值

java Script

JavaScript

三大部分

運行過程

使用方式

ECMAScript

數據類型

數組

常用方法

對象

註釋

運算符

算數運算符

關係運算符

邏輯運算符

函數

格式

註意

分支結構

迴圈結構

for迴圈

for...in迴圈

while迴圈

do...while迴圈

常用API

DOM

DOM樹

獲取標簽對象的相關方法

創建元素的相關方法

對元素對象內容進行操作

獲取修改標簽內容

獲取修改標簽屬性

獲取修改標簽樣式

事件

事件的綁定方式

JS中的事件

事件的傳播特性

事件的冒泡

事件的捕獲

事件的委托

正則表達式

格式

規則

BOM

Window對象

Window 常用屬性、方法

Screen對象

Screen常用屬性、方法

Location對象

Location常用屬性、方法

history對象

history常用屬性、方法

計時事件

彈窗

警告框

確認框

提示框

Cookie對象

創建Cookie

添加過期時間

讀取 Cookie

刪除 Cookie