在web前端中，假設用戶需要提交表單，在表單提交到服務器進一步處理之前，Javascript程序會檢查表單，以確認用戶輸入的信息是符合規範要求的。這些工作可以使用正則表達式完成，正則表達式是一個描述字符模式的對象，ECMAscript的RegExp類表示正則表達式。在正則表達式中，定義了功能強大的【模式匹配】，【文本檢索】，【替換】函數。
正則表達式創建： ig忽略大小寫和全局匹配，全局匹配表示是匹配/替換 所有的滿足條件的，否則只返回第一個
<script>
let box0 = new RegExp("box", "ig"); // 匹配字符串(主體)，匹配模式(修飾符)
let box1 = RegExp("box", "ig"); // 匹配字符串(主體)，匹配模式(修飾符)
let box2 = /box/ig;
</script>
正則表達式對象的屬性和方法：
1. test
格式是： 正則.test(string): 在字符串中匹配正則是否存在， 返回布爾值
2.exec
格式是： 正則.exec(string): 在字符串中匹配正則是否存在， 返回數組，數組中存儲的是匹配到的字符，匹配失敗返回的是null
3. 在字符串中的很多方法都可以使用正則表達式：參數是正則表達式
match() ， 在字符串中匹配是否有合法的正則，返回值： 數組和null
replace()， 字符串.replace(oldstr/ RegExp, newstr), 用新的字符串匹配就的字符串，舊的字符串可以用正則表示
返回值： 替換成功的新字符串
split() ，字符串分割，分隔符可以是正則表達式，返回值是分割後的字符串
search()， 字符串搜索，參數可以是正則表達式， 返回值：>=0的下標， 否則返回值爲-1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
let box = RegExp("are"); // 匹配字符串(主體)，匹配模式(修飾符)
let sen = "How are you";
alert(box.test(sen));
let box1 = RegExp("are", "i"); // 忽略大小寫
let sen1 = "How Are you";
alert(box1.test(sen1));
</script>
</head>
<body>
</body>
</html>
元字符：
在正則表達式中有特殊含義的字符
1. 單個數字和字符的元字符
"."表示可以匹配任何單個字符
[ ] 匹配單個範圍內的字符 , 例如[a-z][A-Z][0-9], 匹配單個數字或者字母，[a-zA-Z0-9_],匹配單個數字，字母或者下劃線
[^]與[ ]匹配的內容相反，例如 [^0-9]匹配處0-9之外的單個字符
\w 匹配數字，字母或者下劃線，等價於[a-zA-Z0-9_]
\W 與\w正好相反
\d 表示匹配單個數字，等價於[0-9]
\D表示匹配非數字
2. 重複字符：（假設x代表任意的單個字符）
x? 表示匹配0或者1個字符x
x* 表示匹配任意多個字符x
x+ 表示匹配1或者多個字符x（至少一個）
x{m,n}匹配至少m個，最多n個字符
x{n} 表示必須匹配n個字符x
（xyz）+ 此時括號裏面的內容xyz是當作單個字符去處理的
3. 空白字符
空白字符包括：
(null字符，空格字符，進紙字符，換行字符，回車字符，製表符等等)
\s 匹配任意單個的空白字符
\S 匹配任意單個的非空白字符
4. 錨字符
^ 行首匹配
$ 行尾匹配
例如： ^g.*d$ 匹配的字符串必須以g開頭，以d結尾。
5. 替代字符
| 表示或運算字符
6. 修飾符
i 忽略大小寫
g 全局匹配
m 換行匹配
7.轉義字符：
\. 代表本來 . 字符的意思
\* 代表本來*字符的意思
正則表達式應用：
1. 匹配壓縮文件
<script>
let reg = /^\w+\.(zip|rar|gz)$/;
let file_name = "shell.rar";
alert(reg.test(file_name));
</script>
2. 匹配手機號
<script>
let phone_reg = /^1[0-9]{10}/
alert(phone_reg.test("18834659876"));
</script>
3. 驗證身份證號：
<script>
let id_reg = /^[1-9]\d{16}(\d|x)$/i;
alert(id_reg.test("62172118850265478X"));
</script>
4. 驗證中文字符串
<script>
let chinese_reg = /^[\u4e00-\u9fa5]+$/;
alert(chinese_reg.test("前端腳本"));
</script>
表單驗證與密碼強度：
1.驗證用戶名的合法性，包括用戶名的長度，字母開頭，只能包含數字，字母，下劃線
2. 密碼強度驗證，包括密碼的長度，強度等級劃分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script rel="script" src="../JavaScript/tool.js"></script>
<script>
window.onload = function () {
let tag_userName = $("username");
let tag_password = $("passwd");
let tag_span = $("username-span");
let tag_code = $("code");
let tag_testCode = tag_code.getElementsByTagName("div");
tag_userName.onblur = function () {
let username = tag_userName.value;
// 判斷長度
if(username.length < 6 || username.length >18)
{
tag_span.innerHTML = "！用戶名長度6~18";
tag_span.style.color = "red";
}
//判斷首字母開頭
else if(! /[a-zA-Z]/.test(username[0]))
{
tag_span.innerHTML = "!用戶名必須以字母開頭";
tag_span.style.color = "red";
}
else if (/\W/.test(username))
{
tag_span.innerHTML = "!用戶名只能包含數字字母下劃線";
tag_span.style.color = "red";
}
else
{
tag_span.innerHTML = "!該用戶名可註冊";
tag_span.style.color = "green";
}
};
tag_password.onkeyup = function () {
let password = tag_password.value;
if(password.length >= 6)
{
// 可以開始驗證密碼強度
// 分類
// 1. 弱密碼： 純數字 純小寫 純大寫
// 2. 中密碼： 兩者混合
// 3. 三種混合
if (/^[0-9]+$/.test(password) || /^[a-z]+$/.test(password) ||/^[A-Z]+$/.test(password))
{
tag_testCode[0].style.background = "orange";
tag_testCode[1].style.background = "gray";
tag_testCode[2].style.background = "gray";
}
else if(/\d/.test(password) && /[a-z]/.test(password) && /[A-Z]/.test(password))
{
tag_testCode[0].style.background = "gray";
tag_testCode[1].style.background = "gray";
tag_testCode[2].style.background = "orange";
}
else
{
tag_testCode[0].style.background = "gray";
tag_testCode[1].style.background = "orange";
tag_testCode[2].style.background = "gray";
}
}
}
}
</script>
<style>
#form{
width: 300px;
height: 200px;
margin: 20px auto;
border: 1px solid black;
background: #66c5b4;
text-align: center;
}
#form #username{
margin: 40px 5px 10px 5px;
}
#username-span{
display: block;
font-size: 10px;
height: 16px;
line-height: 16px;
color: gray;
}
#passwd{
margin: 10px 0 0 0;
}
#code
{
height: 30px;
margin: 10px 60px 0 60px;
}
#code .testCode{
width: 60px;
height: 25px;
line-height: 25px;
background: gray;
color: black;
text-align: center;
float: left;
}
</style>
</head>
<body>
<div id="form">
<input id="username" type="text" placeholder="郵箱">
<span id="username-span">字母，數字，下劃線，長度6~18</span>
<input id="passwd" type="password" placeholder="密碼">
<!--密碼輕度-->
<div id="code">
<div class="testCode">若</div>
<div class="testCode">中</div>
<div class="testCode">強</div>
</div>
</div>
</body>
</html>
localStore本地存儲：
在HTML5中，加入了一個localStorage特性，主要用來作爲本地存儲使用，解決了cookie存儲空間不足的問題，cookie中每條cookie的存儲空間爲4k,localStorage中瀏覽器支持的是5M大小。
例如，首次登陸，點擊記住用戶名和密碼，下次登陸就無需在輸入用戶名和密碼
本地存儲技術：
localStorage: 1. 永久存儲 2.最大支持5M (客戶端微型數據庫) 3. 只能存儲字符串
cookie: 1. 可以設置過期時間 2. 最大可以存儲4k 3. 每一個域名下最多可以存儲50條數據
sessionStorage : （結合後臺使用）
--------------------------------------------------------------------------------------------------------------------
localStorage對象：
1. setItem(name, value)
2. getItem(name, value)
3. removeItem(name, value)
<script>
if (!window.localStorage)
{
alert("不支持localStore");
}
else
{
localStorage.setItem("name", "kitty");
localStorage.setItem("age", "33");
}
window.onclick = function () {
alert(localStorage.getItem("name"));
localStorage.removeItem("age");
}
</script>
localStorage應用：
在頁面刷新後，依然能夠保持頁面的狀態：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script rel="script" src="../JavaScript/tool.js"></script>
<script>
window.onload = function () {
let slide = $("slide");
let full = $("full");
let block = $("block");
// 加載本地存儲的位置信息
if (!window.localStorage)
{
alert("不支持localStorage");
}
else
{
let pos = localStorage.getItem("position");
if (pos){
block.style.left = pos + "px";
full.style.width = pos + "px";
}
else{
pos = 0;
block.style.left = pos + "px";
full.style.width = pos + "px";
}
}
block.onmousedown = function (ev) {
let e = ev || window.event;
let offset_x = e.clientX - slide.offsetLeft;
document.onmousemove = function (ev) {
let e = ev || window.event;
let current_x = e.clientX - slide.offsetLeft;
if (current_x < 0)
{
current_x = 0;
}
if(current_x > slide.offsetWidth - block.offsetWidth)
{
current_x = slide.offsetWidth - block.offsetWidth;
}
block.style.left = current_x + "px";
full.style.width = current_x + "px";
// 對滑塊的位置進行存儲到本地
if (window.localStorage) {
localStorage.setItem("position", current_x.toString());
}
else {
alert("不支持storage");
}
}
};
window.onmouseup = function () {
document.onmousemove = null;
};
}
</script>
<style>
*{
margin: 0;
padding: 0;
}
#slide{
position: relative;
width: 600px;
height: 30px;
border: 1px solid black;
margin: 100px auto;
}
#block{
width: 30px;
height: 30px;
background-color: blue;
position: absolute;
left: 0;
top: 0;
}
#full
{
width: 0;
height: 30px;
background-color: orange;
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div id="slide">
<div id="full"></div>
<div id="block"></div>
</div>
</body>
</html>
在頁面上拖動進度條之後，即使刷新頁面，也會保持上次的進度條的位置。
強制改變this指向：
每一個函數中都有一個內置的變量this,this指向當前函數的主人，函數的主人需要根據上下文進行判斷
強制數據類型轉換：強制使得this指向統一的對象
1. call
例如，定義show(x, y)函數
格式：通過show.call()調用函數
參數：show.call(newObj, x, y） newObj表示新綁定的對象，後面的表示函數參數
<script>
function show(x, y) {
alert(this); // this->window
alert(x + "," + y);
}
show(1,2);
show.call("call", 1, 2); // this->call
</script>
2.apply()方法
格式：show.apply()
參數： show.apply(newObj, [x, y]);
<script>
function show(x, y) {
alert(this); // this->window
alert(x + "," + y);
}
show(1,2);
show.apply("call", [1, 2]); // this->call
</script>
3. bind()方法：預設this指向
格式：show.bind(newObj)
返回值：在執行show.bind(newObj)之後，show函數並不會被執行，而是會返回一個show()函數,但是此時的show()函數中this已經指向了newObj。
<script>
function show(x, y) {
alert(this); // this->window
alert(x + "," + y);
}
show(1,2);
let show1 = show.bind("call");
show1(4,5);
</script>
apply使用技巧，在Math.min()和Math.max()中，查找數組的最大最小值，由於Math.min()和Math.max()只能傳入一個一個的數，如果想找到數組中的最值，可以藉助apply方法：
<script>
alert(Math.max(1,2,3,4,5));
alert(Math.max.apply("null", [1,2,3,4,5]));
</script>
let和const關鍵字:
let關鍵字：用於聲明變量，變量作用域範圍更小，只要遇到大括號，就形成作用域，例如，for循環，if判斷，switch條件判斷
var關鍵字：用於聲明變量，且聲明的變量是要遵循內存的垃圾回收機制，即將當前函數所在的大括號最爲一個作用域進行處理。
所以將let關鍵字形成的作用域稱爲塊作用域，將var關鍵字形成的作用域稱爲局部作用域。
例如：
<script>
window.onload = function () {
let btns = document.getElementsByTagName("button");
for (var i=0; i<btns.length; i++)
{
btns[i].onclick = function () {
alert(i);
}
} // 每個按鈕都哦輸出的是3，for循環下是整個作用域
for (let i=0; i<btns.length; i++)
{
btns[i].onclick = function () {
alert(i);
}
} // 因爲每次循環，都會i都會產生一個獨立的作用域，所以會生成三個獨立的作用域
// 所以輸出的是0，1，2；
}
</script>
const關鍵字：用於聲明常量，變量的值只能在聲明的時候確定，後續不能修改
箭頭函數
一種新的函數的寫法，只是寫法上的一種改變，並沒有實質上新的功能，也沒有對程序的執行效率有所提高，且這樣的代碼可讀性不好。由於不推薦，就不深入學習了。
<script>
window.onload = function () {
function add(x) {
return x+10;
}
// 箭頭函數的寫法
var add = x => x + 10;
}
</script>
解構與ECMA6字符串：
解構:
1. 中括號解構
2. 大括號解構
<script>
window.onload = function () {
// 中括號解構
let x, y, z = [1, 2, 3];
alert(x + "," + y + "," + z);
// 大括號解構
let {name, age} = {
name: "wang",
age: "23"
}
}
</script>
解構的應用：
1. 可以很方便的交換兩個變量的值
2. 使得函數可以返回多個值
3. 函數定義參數，傳入參數的順序
<script>
window.onload = function () {
// 1. 交換值
[x, y] = [1, 2];
[x, y] = [y, x];
// 2. 返回值
function test() {
return [12, 45, 11];
}
[a, b, c] = test();
// 3. 傳參順序
function show({name, age=13, sex}) {
alert("I am " + name + "," + age + "years old" + "," +sex);
}
show({ // 參數的順序可以打亂, 參數還可以有默認值
age: 13,
sex: "female",
name: "zhang"
})
}
</script>