JavaScript

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

三大部分

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

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

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

運行過程

使用方式

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

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

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

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

ECMAScript

數據類型

數組

/*定義數組*/
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樹

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

獲取標簽對象的相關方法

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

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

創建元素的相關方法

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

父元素對象.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 提交按鈕被點擊

事件的傳播特性

**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("校驗的字元串");

規則

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

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

量詞:

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

使用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 的值