JavaScript詳細解析
2021-09-22 08:00:02
文章目錄
1、JavaScript詳細解析
1.1、JavaScript介紹
-
JavaScript 是一種使用者端指令碼語言。執行在使用者端瀏覽器中，每一個瀏覽器都具備解析 JavaScript 的引擎。
-
指令碼語言：不需要編譯，就可以被瀏覽器直接解析執行了。
-
核心功能就是增強使用者和 HTML 頁面的互動過程，讓頁面有一些動態效果。以此來增強使用者的體驗！
[外連圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片儲存下來直接上傳(img-AbUjw3O0-1632119279795)(…\images\js\img\javaScript表格介紹.png)]
1995 年，NetScape (網景)公司，開發的一門使用者端指令碼語言：LiveScript。後來，請來 SUN 公司的專家來 進行修改，後命名為：JavaScript。 1996 年，微軟抄襲 JavaScript 開發出 JScript 指令碼語言。 1997 年，ECMA (歐洲計算機制造商協會)，制定出使用者端指令碼語言的標準：ECMAScript，統一了所有客戶 端指令碼語言的編碼方式。
1.2、快速入門
- 實現步驟
- 建立一個 HTML。
- 在標籤下面編寫一個
- 具體實現
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS快速入門</title>
</head>
<body>
<button id="btn">點我呀</button>
</body>
</html>
引入js的方式一：內部方式
<script>
document.getElementById("btn").onclick=function () {
alert("點我幹嘛？");
}
</script>
引入js的方式一：外部方式
-
建立js檔案
document.getElementById("btn").onclick=function () { alert("點我幹嘛？"); } -
在html中參照外部js檔案
<script src="js/my.js"></script>
1.3、開發環境搭建
1.4、快速入門總結
-
JavaScript 是一種使用者端指令碼語言。
-
組成部分
ECMAScript、DOM、BOM -
和 HTML 結合方式
內部方式：<script></script> 外部方式：<script src=檔案路徑></script>
2、JavaScript基本語法
2.1、註釋
-
單行註釋
// 註釋的內容 -
多行註釋
/* 註釋的內容 */
2.2、輸入輸出語句
- 輸入框 prompt(「提示內容」);
- 彈出警告框 alert(「提示內容」);
- 控制檯輸出 console.log(「顯示內容」);
- 頁面內容輸出 document.write(「顯示內容」);
2.3、變數和常數
JavaScript 屬於弱型別的語言，定義變數時不區分具體的資料型別。
-
定義區域性變數 let 變數名 = 值;
//1.定義區域性變數 let name = "張三"; let age = 23; document.write(name + "," + age +"<br>"); -
定義全域性變數 變數名 = 值;
//2.定義全域性變數 { let l1 = "aa"; l2 = "bb"; } //document.write(l1); document.write(l2 + "<br>"); -
定義常數 const 常數名 = 值;
//3.定義常數 const PI = 3.1415926; //PI = 3.15; document.write(PI);
2.4、原始資料型別和typeof方法
2.4.1、原始資料型別
2.4.2、typeof
typeof 用於判斷變數的資料型別
let age = 18;
document.write(typeof(age)); // number
2.5、運運算元
- 算數運運算元
- 賦值運運算元
- 比較運運算元
- 邏輯運運算元
-
三元運運算元
-
三元運運算元格式
(比較表示式) ? 表示式1 : 表示式2;
-
執行流程
如果比較表示式為true，則取表示式1
如果比較表示式為false，則取表示式2
-
2.6、流程控制和迴圈語句
-
if 語句
//if語句 let month = 3; if(month >= 3 && month <= 5) { document.write("春季"); }else if(month >= 6 && month <= 8) { document.write("夏季"); }else if(month >= 9 && month <= 11) { document.write("秋季"); }else if(month == 12 || month == 1 || month == 2) { document.write("冬季"); }else { document.write("月份有誤"); } document.write("<br>"); -
switch 語句
//switch語句 switch(month){ case 3: case 4: case 5: document.write("春季"); break; case 6: case 7: case 8: document.write("夏季"); break; case 9: case 10: case 11: document.write("秋季"); break; case 12: case 1: case 2: document.write("冬季"); break; default: document.write("月份有誤"); break; } document.write("<br>");**for 迴圈** -
for迴圈
//for迴圈 for(let i = 1; i <= 5; i++) { document.write(i + "<br>"); } -
while 迴圈
//while迴圈 let n = 6; while(n <= 10) { document.write(n + "<br>"); n++; }
2.7、陣列
-
陣列的使用和 java 中的陣列基本一致，但是在 JavaScript 中的陣列更加靈活，資料型別和長度都沒有限制。
-
定義格式
-
let 陣列名 = [元素1,元素2,…];
-
let arr = [10,20,30];
-
-
索引範圍
- 從 0 開始，最大到陣列長度-1
- 陣列長度
- 陣列名.length
for(let i = 0; i < arr.length; i++) { document.write(arr[i] + "<br>"); } document.write("==============<br>");
-
陣列高階運運算元…
-
陣列複製
//複製陣列 let arr2 = [...arr]; //遍歷陣列 for(let i = 0; i < arr2.length; i++) { document.write(arr2[i] + "<br>"); } document.write("==============<br>"); -
合併陣列
//合併陣列 let arr3 = [40,50,60]; let arr4 = [...arr2 , ...arr3]; //遍歷陣列 for(let i = 0; i < arr4.length; i++) { document.write(arr4[i] + "<br>"); } document.write("==============<br>"); -
字串轉陣列
//將字串轉成陣列 let arr5 = [..."heima"]; //遍歷陣列 for(let i = 0; i < arr5.length; i++) { document.write(arr5[i] + "<br>"); }
-
2.8、函數
-
函數類似於 java 中的方法，可以將一些程式碼進行抽取，達到複用的效果
-
定義格式
function 方法名(參數列) { 方法體; return 返回值; } -
可變引數
function 方法名(…引數名) { 方法體; return 返回值; } -
匿名函數
function(參數列) { 方法體; }
2.9、小結
- 註釋：單行// 多行/**/
- 輸入輸出語句：prompt()、alert()、console.log()、document.write()
- 變數和常數：let、const
- 資料型別：boolean、null、undefined、number、string、bigint
- typeof 關鍵字：用於判斷變數的資料型別
- 運運算元：算數、賦值、邏輯、比較、三元運運算元
- 流程控制和迴圈語句：if、switch、for、while
- 陣列：資料型別和長度沒有限制，let 陣列名 = [長度/元素]
- 函數：類似方法，抽取程式碼，提高複用性
3、JavaScript DOM
3.1、DOM介紹
- DOM(Document Object Model)：檔案物件模型。
- 將 HTML 檔案的各個組成部分，封裝為物件。藉助這些物件，可以對 HTML 檔案進行增刪改查的動態操作。
3.2、Element元素的獲取操作
-
具體方法
-
程式碼實現
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>元素的獲取</title>
</head>
<body>
<div id="div1">div1</div>
<div id="div2">div2</div>
<div class="cls">div3</div>
<div class="cls">div4</div>
<input type="text" name="username"/>
</body>
<script>
//1. getElementById() 根據id屬性值獲取元素物件
let div1 = document.getElementById("div1");
//alert(div1);
//2. getElementsByTagName() 根據元素名稱獲取元素物件們，返回陣列
let divs = document.getElementsByTagName("div");
//alert(divs.length);
//3. getElementsByClassName() 根據class屬性值獲取元素物件們，返回陣列
let cls = document.getElementsByClassName("cls");
//alert(cls.length);
//4. getElementsByName() 根據name屬性值獲取元素物件們，返回陣列
let username = document.getElementsByName("username");
//alert(username.length);
//5. 子元素物件.parentElement屬性 獲取當前元素的父元素
let body = div1.parentElement;
alert(body);
</script>
</html>
3.3、Element元素的增刪改操作
- 具體方法
-
程式碼實現
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>元素的增刪改</title> </head> <body> <select id="s"> <option>---請選擇---</option> <option>北京</option> <option>上海</option> <option>廣州</option> </select> </body> <script> //1. createElement() 建立新的元素 let option = document.createElement("option"); //為option新增文字內容 option.innerText = "深圳"; //2. appendChild() 將子元素新增到父元素中 let select = document.getElementById("s"); select.appendChild(option); //3. removeChild() 通過父元素刪除子元素 //select.removeChild(option); //4. replaceChild() 用新元素替換老元素 let option2 = document.createElement("option"); option2.innerText = "杭州"; select.replaceChild(option2,option); </script> </html>
3.4、Attribute屬性的操作
-
具體方法
-
程式碼實現
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>屬性的操作</title> <style> .aColor{ color: blue; } </style> </head> <body> <a>點我呀</a> </body> <script> //1. setAttribute() 新增屬性 let a = document.getElementsByTagName("a")[0]; a.setAttribute("href","https://www.baidu.com"); //2. getAttribute() 獲取屬性 let value = a.getAttribute("href"); //alert(value); //3. removeAttribute() 刪除屬性 //a.removeAttribute("href"); //4. style屬性 新增樣式 //a.style.color = "red"; //5. className屬性 新增指定樣式 a.className = "aColor"; </script> </html>
3.5、Text文字的操作
-
具體方法
-
程式碼實現
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>文字的操作</title> </head> <body> <div id="div"></div> </body> <script> //1. innerText 新增文字內容，不解析標籤 let div = document.getElementById("div"); div.innerText = "我是div"; //div.innerText = "<b>我是div</b>"; //2. innerHTML 新增文字內容，解析標籤 div.innerHTML = "<b>我是div</b>"; </script> </html>
3.6、DOM小結
- DOM(Document Object Model)：檔案物件模型
- Document：檔案物件
- Element：元素物件
- Attribute：屬性物件
- Text：文字物件
- 元素的操作
- getElementById()
- getElementsByTagName()
- getElementsByName()
- getElementsByClassName()
- 子元素物件.parentElement屬性
- createElement()
- appendChild()
- removeChild()
- replaceChild()
- 屬性的操作
- setAtrribute()
- getAtrribute()
- removeAtrribute()
- style屬性
- 文字的操作
- innerText
- innerHTML
4、JavaScript 事件
4.1、事件介紹
事件指的就是當某些元件執行了某些操作後，會觸發某些程式碼的執行。
-
常用的事件
事件名 說明 onblur 元素失去焦點，在物件失去焦點時發生 onchange 域的內容被改變時發生 onclick 當使用者點選某個物件時呼叫的事件控制程式碼 ondblclick 當使用者雙擊某個物件時呼叫的事件控制程式碼 onfocus 元素獲得焦點時發生 onsubmit 確認按鈕被點選時發生 onreset 重置按鈕被點選，事件會在表單中的重置按鈕被點選時發生 -
瞭解的事件
4.2、事件操作
繫結事件
-
方式一
通過標籤中的事件屬性進行繫結。
<button id="btn" onclick="執行的功能"></button> -
方式二
通過 DOM 元素屬性繫結。
document.getElementById("btn").onclick = 執行的功能
4.3、事件小結
- 事件指的就是當某些元件執行了某些操作後，會觸發某些程式碼的執行。
- 常用的事件 onload onsubmit onclick ondblclick onblur onfocus onchange
- 繫結事件方式
- 方式一：通過標籤中的事件屬性進行繫結。
- 方式二：通過 DOM 元素屬性繫結。
5、JavaScript綜合案例
5.1、案例效果介紹
- 在「姓名、年齡、性別」三個文字方塊中填寫資訊後，新增到「學生資訊表」列表（表格）中。
5.2、新增功能的分析
- 為新增按鈕繫結單擊事件。
- 建立 tr 元素。
- 建立 4 個 td 元素。
- 將 td 新增到 tr 中。
- 獲取文字方塊輸入的資訊。
- 建立 3 個文字元素。
- 將文字元素新增到對應的 td 中。
- 建立 a 元素。
- 將 a 元素新增到對應的 td 中。
- 將 tr 新增到 table 中。
5.3、新增功能的實現
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>動態表格</title>
<style>
table{
border: 1px solid;
margin: auto;
width: 500px;
}
td,th{
text-align: center;
border: 1px solid;
}
div{
text-align: center;
margin: 50px;
}
</style>
</head>
<body>
<div>
<input type="text" id="name" placeholder="請輸入姓名" autocomplete="off">
<input type="text" id="age" placeholder="請輸入年齡" autocomplete="off">
<input type="text" id="gender" placeholder="請輸入性別" autocomplete="off">
<input type="button" value="新增" id="add">
</div>
<table id="tb">
<caption>學生資訊表</caption>
<tr>
<th>姓名</th>
<th>年齡</th>
<th>性別</th>
<th>操作</th>
</tr>
<tr>
<td>張三</td>
<td>23</td>
<td>男</td>
<td><a href="JavaScript:void(0);" onclick="drop(this)">刪除</a></td>
</tr>
<tr>
<td>李四</td>
<td>24</td>
<td>男</td>
<td><a href="JavaScript:void(0);" onclick="drop(this)">刪除</a></td>
</tr>
</table>
</body>
<script>
//一、新增功能
//1.為新增按鈕繫結單擊事件
document.getElementById("add").onclick = function(){
//2.建立行元素
let tr = document.createElement("tr");
//3.建立4個單元格元素
let nameTd = document.createElement("td");
let ageTd = document.createElement("td");
let genderTd = document.createElement("td");
let deleteTd = document.createElement("td");
//4.將td新增到tr中
tr.appendChild(nameTd);
tr.appendChild(ageTd);
tr.appendChild(genderTd);
tr.appendChild(deleteTd);
//5.獲取輸入框的文字資訊
let name = document.getElementById("name").value;
let age = document.getElementById("age").value;
let gender = document.getElementById("gender").value;
//6.根據獲取到的資訊建立3個文字元素
let nameText = document.createTextNode(name);
let ageText = document.createTextNode(age);
let genderText = document.createTextNode(gender);
//7.將3個文字元素新增到td中
nameTd.appendChild(nameText);
ageTd.appendChild(ageText);
genderTd.appendChild(genderText);
//8.建立超連結元素和顯示的文字以及新增href屬性
let a = document.createElement("a");
let aText = document.createTextNode("刪除");
a.setAttribute("href","JavaScript:void(0);");
a.setAttribute("onclick","drop(this)");
a.appendChild(aText);
//9.將超連結元素新增到td中
deleteTd.appendChild(a);
//10.獲取table元素，將tr新增到table中
let table = document.getElementById("tb");
table.appendChild(tr);
}
</script>
</html>
5.4、刪除功能的分析
- 刪除功能介紹
- 刪除功能分析
- 為每個刪除超連結新增單擊事件屬性。
- 定義刪除的方法。
- 獲取 table 元素。
- 獲取 tr 元素。
- 通過 table 刪除 tr。
5.5、刪除功能的實現
//二、刪除的功能
//1.為每個刪除超連結標籤新增單擊事件的屬性
//2.定義刪除的方法
function drop(obj){
//3.獲取table元素
let table = obj.parentElement.parentElement.parentElement;
//4.獲取tr元素
let tr = obj.parentElement.parentElement;
//5.通過table刪除tr
table.removeChild(tr);
}
6、JavaScript物件導向
6.1、物件導向介紹
在 Java 中我們學習過物件導向，核心思想是萬物皆物件。在 JavaScript 中同樣也有物件導向。思想類似。
6.2、類的定義和使用
- 結構說明
-
程式碼實現
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>類的定義和使用</title> </head> <body> </body> <script> //定義Person類 class Person{ //構造方法 constructor(name,age){ this.name = name; this.age = age; } //show方法 show(){ document.write(this.name + "," + this.age + "<br>"); } //eat方法 eat(){ document.write("吃飯..."); } } //使用Person類 let p = new Person("張三",23); p.show(); p.eat(); </script> </html>6.3、字面量類的定義和使用
-
結構說明
-
程式碼實現
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>字面量定義類和使用</title> </head> <body> </body> <script> //定義person let person = { name : "張三", age : 23, hobby : ["聽課","學習"], eat : function() { document.write("吃飯..."); } }; //使用person document.write(person.name + "," + person.age + "," + person.hobby[0] + "," + person.hobby[1] + "<br>"); person.eat(); </script> </html>
6.3、繼承
-
繼承：讓類與類產生子父類別的關係，子類可以使用父類別有許可權的成員。
-
繼承關鍵字：extends
-
頂級父類別：Object
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>繼承</title> </head> <body> </body> <script> //定義Person類 class Person{ //構造方法 constructor(name,age){ this.name = name; this.age = age; } //eat方法 eat(){ document.write("吃飯..."); } } //定義Worker類繼承Person class Worker extends Person{ constructor(name,age,salary){ super(name,age); this.salary = salary; } show(){ document.write(this.name + "," + this.age + "," + this.salary + "<br>"); } } //使用Worker let w = new Worker("張三",23,60000); w.show(); w.eat(); </script> </html>
6.4、小結
-
物件導向
把相關的資料和方法組織為一個整體來看待，從更高的層次來進行系統建模，更貼近事物的自然執行模式。
-
類的定義
class 類{} 字面量定義
-
類的使用
let 物件名 = new 類名(); 物件名.變數名 物件名.方法名()
-
繼承
讓類和類產生子父類別關係，提高程式碼的複用性和維護性。
子類 extends 父類別
Object 頂級父類別
7、JavaScript內建物件
7.1、Number
- 方法介紹
- 程式碼實現
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Number</title>
</head>
<body>
</body>
<script>
//1. parseFloat() 將傳入的字串浮點數轉為浮點數
document.write(Number.parseFloat("3.14") + "<br>");
//2. parseInt() 將傳入的字串整數轉為整數
document.write(Number.parseInt("100") + "<br>");
document.write(Number.parseInt("200abc") + "<br>"); // 從數位開始轉換，直到不是數位為止
</script>
</html>
7.2、Math
- 方法介紹
- 程式碼實現
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Math</title>
</head>
<body>
</body>
<script>
//1. ceil(x) 向上取整
document.write(Math.ceil(4.4) + "<br>"); // 5
//2. floor(x) 向下取整
document.write(Math.floor(4.4) + "<br>"); // 4
//3. round(x) 把數四捨五入為最接近的整數
document.write(Math.round(4.1) + "<br>"); // 4
document.write(Math.round(4.6) + "<br>"); // 5
//4. random() 亂數,返回的是0.0-1.0之間範圍(含頭不含尾)
document.write(Math.random() + "<br>"); // 亂數
//5. pow(x,y) 冪運算 x的y次方
document.write(Math.pow(2,3) + "<br>"); // 8
</script>
</html>
7.3、Date
-
方法說明
-
構造方法
-
成員方法
-
- 程式碼實現
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Date</title>
</head>
<body>
</body>
<script>
//構造方法
//1. Date() 根據當前時間建立物件
let d1 = new Date();
document.write(d1 + "<br>");
//2. Date(value) 根據指定毫秒值建立物件
let d2 = new Date(10000);
document.write(d2 + "<br>");
//3. Date(year,month,[day,hours,minutes,seconds,milliseconds]) 根據指定欄位建立物件(月份是0~11)
let d3 = new Date(2222,2,2,20,20,20);
document.write(d3 + "<br>");
//成員方法
//1. getFullYear() 獲取年份
document.write(d3.getFullYear() + "<br>");
//2. getMonth() 獲取月份
document.write(d3.getMonth() + "<br>");
//3. getDate() 獲取天數
document.write(d3.getDate() + "<br>");
//4. toLocaleString() 返回本地日期格式的字串
document.write(d3.toLocaleString());
</script>
</html>
7.4、String
-
方法說明
- 構造方法
- 成員方法
- 程式碼實現
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>String</title>
</head>
<body>
</body>
<script>
//1. 構造方法建立字串物件
let s1 = new String("hello");
document.write(s1 + "<br>");
//2. 直接賦值
let s2 = "hello";
document.write(s2 + "<br>");
//屬性
//1. length 獲取字串的長度
document.write(s2.length + "<br>");
//成員方法
//1. charAt(index) 獲取指定索引處的字元
document.write(s2.charAt(1) + "<br>");
//2. indexOf(value) 獲取指定字串出現的索引位置
document.write(s2.indexOf("l") + "<br>");
//3. substring(start,end) 根據指定索引範圍擷取字串(含頭不含尾)
document.write(s2.substring(2,4) + "<br>");
//4. split(value) 根據指定規則切割字串，返回陣列
let s3 = "張三,23,男";
let arr = s3.split(",");
for(let i = 0; i < arr.length; i++) {
document.write(arr[i] + "<br>");
}
//5. replace(old,new) 使用新字串替換老字串
let s4 = "你會不會跳傘啊？讓我落地成盒。你妹的。";
let s5 = s4.replace("你妹的","***");
document.write(s5 + "<br>");
</script>
</html>
7.5、RegExp
正規表示式：是一種對字串進行匹配的規則。
-
方法說明
- 構造方法&成員方法
- 規則
- 程式碼實現
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RegExp</title>
</head>
<body>
</body>
<script>
//1.驗證手機號
//規則：第一位1，第二位358，第三到十一位必須是數位。總長度11
let reg1 = /^[1][358][0-9]{9}$/;
document.write(reg1.test("18688888888") + "<br>");
//2.驗證使用者名稱
//規則：字母、數位、下劃線組成。總長度4~16
let reg2 = /^[a-zA-Z_0-9]{4,16}$/;
document.write(reg2.test("zhang_san123"));
</script>
</html>
7.6、Array
- 成員方法
- 程式碼實現
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Array</title>
</head>
<body>
</body>
<script>
let arr = [1,2,3,4,5];
//1. push(元素) 新增元素到陣列的末尾
arr.push(6);
document.write(arr + "<br>");
//2. pop() 刪除陣列末尾的元素
arr.pop();
document.write(arr + "<br>");
//3. shift() 刪除陣列最前面的元素
arr.shift();
document.write(arr + "<br>");
//4. includes(元素) 判斷陣列中是否包含指定的元素
document.write(arr.includes(2) + "<br>");
//5. reverse() 反轉陣列元素
arr.reverse();
document.write(arr + "<br>");
//6. sort() 對陣列元素排序
arr.sort();
document.write(arr + "<br>");
</script>
</html>
7.7、Set
JavaScript 中的 Set 集合，元素唯一，存取順序一致。
- 方法說明
- 程式碼實現
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Set</title>
</head>
<body>
</body>
<script>
// Set() 建立集合物件
let s = new Set();
// add(元素) 新增元素
s.add("a");
s.add("b");
s.add("c");
s.add("c");
// size屬性 獲取集合的長度
document.write(s.size + "<br>"); // 3
// keys() 獲取迭代器物件
let st = s.keys();
for(let i = 0; i < s.size; i++){
document.write(st.next().value + "<br>");
}
// delete(元素) 刪除指定元素
document.write(s.delete("c") + "<br>");
let st2 = s.keys();
for(let i = 0; i < s.size; i++){
document.write(st2.next().value + "<br>");
}
</script>
</html>
7.8、Map
JavaScript 中的 Map 集合，key 唯一，存取順序一致。
-
方法說明
-
程式碼實現
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Map</title>
</head>
<body>
</body>
<script>
// Map() 建立Map集合物件
let map = new Map();
// set(key,value) 新增元素
map.set("張三",23);
map.set("李四",24);
map.set("李四",25);
// size屬性 獲取集合的長度
document.write(map.size + "<br>");
// get(key) 根據key獲取value
document.write(map.get("李四") + "<br>");
// entries() 獲取迭代器物件
let et = map.entries();
for(let i = 0; i < map.size; i++){
document.write(et.next().value + "<br>");
}
// delete(key) 根據key刪除鍵值對
document.write(map.delete("李四") + "<br>");
let et2 = map.entries();
for(let i = 0; i < map.size; i++){
document.write(et2.next().value + "<br>");
}
</script>
</html>
7.9、Json
-
JSON(JavaScript Object Notation)：是一種輕量級的資料交換格式。
- 它是基於 ECMAScript 規範的一個子集，採用完全獨立於程式語言的文字格式來儲存和表示資料。
- 簡潔和清晰的層次結構使得 JSON 成為理想的資料交換語言。易於人閱讀和編寫，同時也易於計算機解析和 生成，並有效的提升網路傳輸效率。
-
方法說明
- 程式碼實現
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JSON</title>
</head>
<body>
</body>
<script>
//定義天氣物件
let weather = {
city : "北京",
date : "2088-08-08",
wendu : "10° ~ 23°",
shidu : "22%"
};
//1.將天氣物件轉換為JSON格式的字串
let str = JSON.stringify(weather);
document.write(str + "<br>");
//2.將JSON格式字串解析成JS物件
let weather2 = JSON.parse(str);
document.write("城市：" + weather2.city + "<br>");
document.write("日期：" + weather2.date + "<br>");
document.write("溫度：" + weather2.wendu + "<br>");
document.write("溼度：" + weather2.shidu + "<br>");
</script>
</html>
7.10、表單校驗
- 案例說明
- 程式碼實現
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表單校驗</title>
<link rel="stylesheet" href="css/style.css"></link>
</head>
<body>
<div class="login-form-wrap">
<h1>黑馬程式設計師</h1>
<form class="login-form" action="#" id="regist" method="get" autocomplete="off">
<label>
<input type="text" id="username" name="username" placeholder="Username..." value="">
</label>
<label>
<input type="password" id="password" name="password" placeholder="Password..." value="">
</label>
<input type="submit" value="註冊">
</form>
</div>
</body>
<script>
//1.為表單繫結提交事件
document.getElementById("regist").onsubmit = function() {
//2.獲取填寫的使用者名稱和密碼
let username = document.getElementById("username").value;
let password = document.getElementById("password").value;
//3.判斷使用者名稱是否符合規則 4~16位元純字母
let reg1 = /^[a-zA-Z]{4,16}$/;
if(!reg1.test(username)) {
alert("使用者名稱不符合規則，請輸入4到16位元的純字母！");
return false;
}
//4.判斷密碼是否符合規則 6位純數位
let reg2 = /^[\d]{6}$/;
if(!reg2.test(password)) {
alert("密碼不符合規則，請輸入6位純數位的密碼！");
return false;
}
//5.如果所有條件都不滿足，則提交表單
return true;
}
</script>
</html>
7.11、小結
- 內建物件是 JavaScript 提供的帶有屬性和方法的特殊資料型別。
- 數位日期 Number Math Date
- 字串 String RegExp
- 陣列集合 Array Set Map
- 結構化資料 JSON
8、JavaScript BOM
- BOM(Browser Object Model)：瀏覽器物件模型。
- 將瀏覽器的各個組成部分封裝成不同的物件，方便我們進行操作。
8.1、Windows視窗物件
- 定時器
- 唯一標識 setTimeout(功能，毫秒值)：設定一次性定時器。
- clearTimeout(標識)：取消一次性定時器。
- 唯一標識 setInterval(功能，毫秒值)：設定迴圈定時器。
- clearInterval(標識)：取消迴圈定時器。
- 載入事件
- window.onload：在頁面載入完畢後觸發此事件的功能。
- 程式碼實現
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>window視窗物件</title>
<script>
//一、定時器
function fun(){
alert("該起床了！");
}
//設定一次性定時器
//let d1 = setTimeout("fun()",3000);
//取消一次性定時器
//clearTimeout(d1);
//設定迴圈定時器
//let d2 = setInterval("fun()",3000);
//取消迴圈定時器
//clearInterval(d2);
//載入事件
window.onload = function(){
let div = document.getElementById("div");
alert(div);
}
</script>
</head>
<body>
<div id="div">dddd</div>
</body>
<!-- <script>
//一、定時器
function fun(){
alert("該起床了！");
}
//設定一次性定時器
//let d1 = setTimeout("fun()",3000);
//取消一次性定時器
//clearTimeout(d1);
//設定迴圈定時器
//let d2 = setInterval("fun()",3000);
//取消迴圈定時器
//clearInterval(d2);
//載入事件
let div = document.getElementById("div");
alert(div);
</script> -->
</html>
8.2、Location位址列物件
-
href 屬性
就是瀏覽器的位址列。我們可以通過為該屬性設定新的 URL，使瀏覽器讀取並顯示新的 URL 的內容。
- 程式碼實現
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>location位址列物件</title>
<style>
p{
text-align: center;
}
span{
color: red;
}
</style>
</head>
<body>
<p>
註冊成功！<span id="time">5</span>秒之後自動跳轉到首頁...
</p>
</body>
<script>
//1.定義方法。改變秒數，跳轉頁面
let num = 5;
function showTime() {
num--;
if(num <= 0) {
//跳轉首頁
location.href = "index.html";
}
let span = document.getElementById("time");
span.innerHTML = num;
}
//2.設定迴圈定時器，每1秒鐘執行showTime方法
setInterval("showTime()",1000);
</script>
</html>
8.3、案例-動態廣告
- 案例分析和實現
<!-- 廣告圖片 -->
<img src="img/ad_big.jpg" id="ad_big" width="100%"/>
- 在 css 樣式中，display 屬性可以控制元素是否顯示
style="display: none;"
- 設定定時器，3 秒後顯示廣告圖片
//1.設定定時器，3秒後顯示廣告圖片
setTimeout(function(){
let img = document.getElementById("ad_big");
img.style.display = "block";
},3000);
- 設定定時器，3 秒後隱藏廣告圖片
//2.設定定時器，3秒後隱藏廣告圖片
setTimeout(function(){
let img = document.getElementById("ad_big");
img.style.display = "none";
},6000);
8.4、小結
- **BOM(Browser Object Model)：**瀏覽器物件模型。
- 將瀏覽器的各個組成部分封裝成不同的物件，方便我們進行操作。
- Window：視窗物件
- Location：位址列物件
- Navigator：瀏覽器物件
- History：當前視窗歷史記錄物件
- Screen：顯示器螢幕物件
- Window 視窗物件
- setTimeout()、clearTimeout()：一次性定時器
- setInterval()、clearInterval()：迴圈定時器
- onload 事件：頁面載入完畢觸發執行功能
- Location 位址列物件 href 屬性：跳轉到指定的 URL 地址
9、JavaScript封裝
封裝思想
-
**封裝：**將複雜的操作進行封裝隱藏，對外提供更加簡單的操作。
-
獲取元素的方法
- document.getElementById(id值)：根據 id 值獲取元素
- document.getElementsByName(name值)：根據 name 屬性值獲取元素們
- document.getElementsByTagName(標籤名)：根據標籤名獲取元素們
-
程式碼實現
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>封裝</title> </head> <body> <div id="div1">div1</div> <div name="div2">div2</div> </body> <script src="my.js"></script> <script> let div1 = getById("div1"); alert(div1); // let div1 = document.getElementById("div1"); // alert(div1); // let divs = document.getElementsByName("div2"); // alert(divs.length); // let divs2 = document.getElementsByTagName("div"); // alert(divs2.length); </script> </html>js封裝
function getById(id){ return document.getElementById(id); } function getByName(name) { return document.getElementsByName(name); } function getByTag(tag) { return document.getElementsByTagName(tag); }
我們之前的操作都是基於原生 JavaScript 的，比較繁瑣。 JQuery 是一個前端框架技術，針對 JavaScript 進行了一系列的封裝，使得操作變得非常簡單！ 期待吧……