文章目錄
- 1、JavaScript詳細決議
- 1.1、JavaScript介紹
- 1.2、快速入門
- 引入js的方式一：內部方式
- 引入js的方式一：外部方式
- 1.3、開發環境搭建
- 1.4、快速入門總結
- 2、JavaScript基本語法
- 2.1、注釋
- 2.2、輸入輸出陳述句
- 2.3、變數和常量
- 2.4、原始資料型別和typeof方法
- 2.4.1、原始資料型別
- 2.4.2、typeof
- 2.5、運算子
- 2.6、流程控制和回圈陳述句
- 2.7、陣列
- 2.8、函式
- 2.9、小結
- 3、JavaScript DOM
- 3.1、DOM介紹
- 3.2、Element元素的獲取操作
- 3.3、Element元素的增刪改操作
- 3.4、Attribute屬性的操作
- 3.5、Text文本的操作
- 3.6、DOM小結
- 4、JavaScript 事件
- 4.1、事件介紹
- 4.2、事件操作
- 4.3、事件小結
- 5、JavaScript綜合案例
- 5.1、案例效果介紹
- 5.2、添加功能的分析
- 5.3、添加功能的實作
- 5.4、洗掉功能的分析
- 5.5、洗掉功能的實作
- 6、JavaScript面向物件
- 6.1、面向物件介紹
- 6.2、類的定義和使用
- 6.3、字面量類的定義和使用
- 6.3、繼承
- 6.4、小結
- 7、JavaScript內置物件
- 7.1、Number
- 7.2、Math
- 7.3、Date
- 7.4、String
- 7.5、RegExp
- 7.6、Array
- 7.7、Set
- 7.8、Map
- 7.9、Json
- 7.10、表單校驗
- 7.11、小結
- 8、JavaScript BOM
- 8.1、Windows視窗物件
- 8.2、Location地址欄物件
- 8.3、案例-動態廣告
- 8.4、小結
- 9、JavaScript封裝
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、開發環境搭建
-
Node.js:JavaScript 運行環境
-
VSCode：撰寫前端技術的開發工具
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、事件小結
- 事件指的就是當某些組件執行了某些操作后，會觸發某些代碼的執行，
- 常用的事件 onl oad 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 進行了一系列的封裝，使得操作變得非常簡單！ 期待吧……
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/301991.html
標籤：其他
上一篇：【中秋】模擬太陽系行星的公轉
下一篇：[Vue專案實戰]登錄功能實作