什么是JavaScript
一、概述
JavaScript是一門世界上最流行的腳本語言
一個合格的后端人員，必須要精通JavaScript
快速入門
一、引入JavaScript
-
內部標簽
<!-- script標簽（可以放到檔案任何位置）：里面寫JavaScript代碼 --> <script> //...... </script> -
外部引入
<!-- 外部引入 --> <!-- 注意：script標簽必須成對出現 --> <script src="https://www.cnblogs.com/ylfmax-blog/archive/2022/03/07/js/demo01.js"></script> <!-- 不用顯示定義type，默認為javascript --> <script type="application/javascript"></script>
二、基本語法
// 1.定義變數 [變數型別 變數名 = 變數值]
const score = 70;
// 2.條件控制
if (score === 70) {
alert("良好");
} else {
alert("其它");
}
//在瀏覽器的控制臺輸出變數 console.log(score)
// 3.回圈
// while回圈 ( while(){} / do{}while() )
// for回圈 ( for i / forEach()（ES5.1） / for of / for in（ES6） )
瀏覽器必備除錯須知：
三、資料型別
數值、字符、布爾、文本、圖形、音頻、視頻等
-
數字 (number)
js不區分小數和整數12 //整數 12.1 //浮點數 1.12e2 //科學計數法 -99 //負數 NaN //非數值 Infinity //無窮大 -
字串
'abc' "abc" -
布林值
true false -
邏輯運算
&& || ! -
比較運算子（重要）
= == //等于（型別不一樣，值一樣，判斷為true） === //絕對等于（型別一樣，值一樣，判斷為true）堅持不要使用==比較
注意：
- NaN與所有數值都不相等，包括自己
- 只能通過isNaN(NaN)來判斷，數值是否為NaN
浮點數問題
console.log((1/3) === (1 - (2 / 3))); //false盡量避免使用浮點數進行運算，存在精度問題
Math.abs((1/3) - (1 - (2 / 3))) < 0.000000001 //解決方法 -
null 和 undefined
- null 空
- undefined 未定義
-
陣列
Java的陣列需要相同型別的物件，JS不需要，// 保證代碼的可讀性，盡量使用[] let array = [1, 2, 3, null, "hello", true]; array = new Array(1, 2, 3, null, "hello", true); // 越界輸出undefined console.log(array[2]); -
物件
let person = { name: "ylf", age: 18, tags: ["java", "python", "c/c++"] }; console.log(person.age);
四、嚴格檢查模式
// 嚴格檢查模式，預防JavaScript的隨意性導致的問題（必須寫在第一行）
"use strict";
// 默認為全域變數，建議區域變數都是用let定義
let i = 1;
資料型別
一、字串
-
正常字串使用單引號或雙引號包裹
-
轉義字符
\' 單引號 \n 換行 \t 制表符 \u4e2d \u#### unicode字符 \x41 \x## ascii字符 -
多行字串
// 反單引號 let msg = `Hello,world! nico,nico. `; console.log(msg); -
模板字串
let msg = "Hello, "; console.log(msg + "world!"); let name = "ylf!"; msg = `你好啊, ${name}`; console.log(msg); -
字串長度
string.length -
字串的可變性（不可變）
-
大小寫轉換（注意：不是屬性，是方法）
string.toUpperCase() string.toLowerCase() -
string.indexOf("string")（通過子字串獲取子字串第一個字符位置）
-
string.substring()（截取字串的一部分，回傳一個新字串）
[) string.substring(1) //從第一個字符截取到最后一個字符 string.substring(1,3) //[1,3)
二、陣列
array可以包含任意的資料型別
let array = [1, 2, 3, null, "hello", true];
-
長度
array.length注意：給array.length賦值，陣列大小會發生變化：陣列變大，增加下標對應元素為空；陣列變小，元素丟失
-
indexOf()（通過元素獲取下標索引）
-
slice()（截取陣列的一部分，回傳一個新陣列）類似字串中的substring()
-
push(), pop()（尾部）
push() //將元素壓入到尾部 pop() //彈出尾部的一個元素 -
unshift(), shift()（頭部）
unshift() //將元素壓入到頭部 shift() //彈出頭部的一個元素 -
sort()（排序）
-
reverse()（元素反轉）
-
concat()
concat()沒有修改陣列，只是回傳一個新陣列
-
join()（連接符）
列印拼接陣列，使用特定的字串連接
-
多維陣列
三、物件
若干個鍵值對
let 物件名 = {
屬性名: 屬性值,
屬性名: 屬性值,
屬性名: 屬性值
}
JavaScript中的鍵都是字串，值為任意物件！
- 物件賦值
- 使用不存在的物件屬性不報錯！undefined
- 動態刪減屬性
- 動態添加屬性
- 判斷屬性值是否在物件中
- 判斷屬性是否物件自身擁有的
四、Map和Set
ES6新特性
Map（鍵值對）
let map = new Map([["jack", 12], ["tom", 18], ["ylf", 20], ["jet", 30]]);
console.log(map.get("jack")); //獲取對應的鍵值
map.set("nico", 78); //添加鍵值對
map.delete("nico"); //洗掉鍵值對
console.log(map.has("nico")); //判斷指定鍵值對是否存在
// 遍歷Map
for (let mapElement of map) {
console.log(mapElement);
}
Set（無序不重復集合）
let set = new Set([3, 1, 1, 2]);
set.add(4); //添加不重復元素到末尾
set.delete(4); //洗掉指定元素
console.log(set.has(4)); //判斷指定元素是否存在
// 遍歷Set
for (let number of set) {
console.log(number);
}
函式
一、定義函式
// 定義方式一
function 函式名(形參) {
函式體;
return 回傳值;
}
// 定義方式二
// function(){} 為匿名內部類，但是可以把結果賦值給變數名，通過變數名呼叫函式
let 函式名 = function(形參) {
函式體;
return 回傳值;
}
// 如果沒有執行return，函式也會回傳結果undefined
引數問題
JavaScript函式可以傳入任意個引數，也可以不傳入引數
傳入引數是否合法存在，不合法存在如何規避？
let abs = function(x) {
// 手動拋出例外來判斷
if (typeof x !== "number") {
throw "Not a number!";
}
if (x < 0) {
return -x;
} else {
return x;
}
};
arguments（包含所有傳入函式的引數，是一個陣列）
多引數問題
rest（ES6引入新特性，獲取除了已經定義的引數之外的所有問題）
// 初始方法
if (arguments.length > 1) {
for (let i = 1; i < arguments.length; i++) {
console.log(arguments[i]);
}
}
function fun(a, ...rest) {
for (let restElement of rest) {
console.log(restElement);
}
}
rest引數只能寫在最后面，必須用...標識
二、變數作用域
三、方法
物件里的叫方法
// 定義方法方式（方法就是把函式放入物件里，物件由屬性和方法構成）
let person = {
name: "YLF",
birth: 1999,
// 方法
age: function () {
let fullYear = new Date().getFullYear();
return fullYear - this.birth;
}
}
面向物件語言中 this 表示當前物件的一個參考，
但在 JavaScript 中 this 不是固定不變的，它會隨著執行環境的改變而改變，
- 在方法中，this 表示該方法所屬的物件，
- 如果單獨使用，this 表示全域物件，
- 在函式中，this 表示全域物件，
- 在函式中，在嚴格模式下，this 是未定義的(undefined)，
- 在事件中，this 表示接收事件的元素，
- 類似 call() 和 apply() 方法可以將 this 參考到任何物件，
內部物件
標準物件
一、Date
let date = new Date();
console.log("date: ");
console.log(date);
console.log("星期: ");
console.log(date.getDay());
console.log("月: ");
console.log(date.getMonth());
console.log("日: ");
console.log(date.getDate());
console.log("年: ");
console.log(date.getFullYear());
console.log("時: ");
console.log(date.getHours());
console.log("分: ");
console.log(date.getMinutes());
console.log("秒: ");
console.log(date.getSeconds());
console.log("時間戳: ");
// 表示從 1970 年 1 月 1 日 00:00:00 UTC 到給定日期之間經過的毫秒數
console.log(date.getTime());
二、JSON
早期所有資料傳輸習慣使用XML檔案
- JSON(JavaScript Object Notation, JS 物件簡譜) 是一種輕量級的資料交換格式
- 簡潔和清晰的層次結構使得 JSON 成為理想的資料交換語言
- 易于人閱讀和撰寫，同時也易于機器決議和生成，并有效地提升網路傳輸效率
JSON 與 JS 物件的關系
JSON 是 JS 物件的字串表示法，它使用文本表示一個 JS 物件的資訊，（JSON）本質是一個字串，
如：
var obj = {a: 'Hello', b: 'World'}; //這是一個js物件，注意js物件的鍵名也是可以使用引號包裹的,這里的鍵名就不用引號包含
var json = '{"a": "Hello", "b": "World"}'; //這是一個 JSON 字串，本質是一個字串
JSON（格式字串） 和 JS 物件（也可以叫JSON物件 或 JSON 格式的物件）互轉（JSON.parse 和 JSON.stringify），
要實作從JSON字串轉換為JS物件，使用 JSON.parse() 方法：
var obj = JSON.parse('{"a": "Hello", "b": "World"}'); //結果是 {a: 'Hello', b: 'World'} 一個物件
要實作從JS物件轉換為JSON字串，使用 JSON.stringify() 方法：
var json = JSON.stringify({a: 'Hello', b: 'World'}); //結果是 '{"a": "Hello", "b": "World"}' 一個JSON格式的字串
說句不嚴謹的話：JSON.parse() 就是字串轉 js 物件， JSON.stringify()就是 js 物件轉字串，它們前提是要 json 格式才有意義，
三、Ajax
- 原生的js寫法 xhr 異步請求
- JQuery封裝的方法 $("選擇器").ajax("")
- axios請求
面向物件編程
一、什么是面向物件
JavaScript，Java，C#
類（JavaScript中又稱原型物件）
物件
二、原型繼承
let student = {
name: "student",
age: 0,
run: function () {
console.log(this.name + ", run!");
}
};
let me = {
name: "ylf"
};
me.__proto__ = student;
三、class繼承
定義類
// ES6之前
function Student(name) {
this.name = name;
// this.hello = function f() {
// alert("Hello");
// }
}
Student.prototype.hello = function () {
alert("Hello");
}
class關鍵字是ES6引入的
// ES6之后
class Student {
constructor(name) {
this.name = name;
}
hello() {
alert("Hello");
}
}
// class繼承
class Pupil extends Student {
constructor(name, grade) {
super(name);
this.grade = grade;
}
play() {
alert("play");
}
}
本質還是原型繼承
四、原型鏈
操作BOM物件（重點）
一、瀏覽器
Javascript 和瀏覽器的關系：Javascript誕生是為了能夠在瀏覽器運行
BOM（Browser Object Model）：瀏覽器物件模型
內核
- IE 6 - 11
- Chrome
- Safari
- FireFox
三方
- QQ瀏覽器
- 360瀏覽器
二、window物件（重要）
window代表瀏覽器視窗
window.innerHeight
182
window.innerWidth
1488
window.alert('hello')
三、navigator物件
封裝了瀏覽器的資訊
navigator.appName
'Netscape'
navigator.appVersion
'5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/98.0.4758.102 Safari/537.36 Edg/98.0.1108.62'
navigator.platform
'Win32'
盡量避免使用navigator物件，因為它會被認為修改
四、screen物件
// 螢屏解析度
screen.width
1536
screen.height
864
五、location物件（重要）
代表當前頁面的URL資訊
host: "developer.mozilla.org"
href: "https://developer.mozilla.org/zh-CN/docs/Web/API/Window/outerHeight"
protocol: "https:"
reload: ? reload() // 重繪網頁
// 設定新的地址
location.assign('https://www.baidu.com/')
六、document物件（重要）
代表當前頁面
獲取具體的檔案樹節點
<ul id="ul">
<li>Java</li>
<li>C++</li>
<li>Python</li>
</ul>
<script>
let ul = document.getElementById("ul");
console.log(ul);
</script>
獲取cookie
document.cookie
'BAIDUID_BFESS=A57FC6971D87A9172CD9952274273C6B:FG=1; BIDUPSID=A57FC6971D87A9172CD9952274273C6B; PSTM=1645402825; BD_UPN=12314753; baikeVisitId=37443825-845d-443f-aacd-9504a8d0e3eb; RT="z=1&dm=baidu.com&si=gpeanogruej&ss=l09ccw1h&sl=2&tt=1m3&bcn=https%3A%2F%2Ffclog.baidu.com%2Flog%2Fweirwood%3Ftype%3Dperf&ld=24y&ul=e6v0&hd=e6xc"; ZD_ENTRY=bing; BD_HOME=1; H_PS_PSSID=34429_35106_31253_34584_35871_35908_35946_35972_35984_35315_26350; BA_HECTOR=a42k0l248la1850he71h210ue0q'
截取cookie原理
服務器端可以設定cookie為httpOnly保證安全
七、history物件
代表瀏覽器歷史記錄
history.forward()
history.back()
操作DOM物件（重點）
DOM：檔案物件模型
瀏覽器網頁就是一個DOM樹形結構
- 更新DOM節點
- 遍歷DOM節點
- 洗掉DOM節點
- 添加DOM節點
操作DOM節點需要先獲取它！
一、獲取DOM節點
// 對應css選擇器
let elementsByTagName = document.getElementsByTagName("h1");
let elementById = document.getElementById("paragraph");
let elementsByClassName = document.getElementsByClassName("paragraph");
let container = document.getElementById("container");
let children = container.children; // 獲取父節點的所有子節點
let parentNode = elementById.parentNode; //獲取父節點
這是原生代碼，之后盡量使用JQuery
二、更新DOM節點
<div id="container">
</div>
<script>
let elementById = document.getElementById("container");
</script>
-
更新文本
elementById.innerText = 123 // 修改文本值 elementById.innerHTML = "<strong>123</strong>" // 可以決議HTML文本標簽 -
操作CSS
elementById.style.color = "red"; // 屬性值使用字串 elementById.style.fontSize = "50px" // -轉駝峰命名問題
三、洗掉DOM節點
步驟：先獲取父節點，然后通過父節點洗掉自己
<div id="container">
<h1>標題一</h1>
<p id="paragraph">段落一</p>
<p >段落二</p>
</div>
<script>
let elementById = document.getElementById("paragraph");
let parentNode = elementById.parentNode; //獲取父節點
parentNode.removeChild(elementById);
</script>
注意：洗掉節點時是動態的，children是時空變化的
四、創建和插入DOM節點
節點為空時，使用 innerText 或者 innerHTML 可以添加DOM節點，但不為空時，其會覆寫原來的DOM節點
追加DOM節點
<p id="outerParagraph">外部段落</p>
<div id="container">
<p id="innerParagraph1">內部段落一</p>
<p id="innerParagraph2">內部段落二</p>
<p id="innerParagraph3">內部段落三</p>
</div>
<script>
let outerParagraph = document.getElementById("outerParagraph");
let container = document.getElementById("container");
// DOM父節點追加一個已存在的DOM節點
container.appendChild(outerParagraph);
// 創建新DOM節點，并追加到DOM父節點后面
let htmlParagraphElement = document.createElement("p");
// htmlParagraphElement.setAttribute("id", "newNode");
htmlParagraphElement.id = "newNode";
htmlParagraphElement.innerText = "newNode";
container.appendChild(htmlParagraphElement);
</script>
向前插入DOM節點
<p id="outerParagraph">外部段落</p>
<div id="container">
<p id="innerParagraph1">內部段落一</p>
<p id="innerParagraph2">內部段落二</p>
<p id="innerParagraph3">內部段落三</p>
</div>
<script>
let outerParagraph = document.getElementById("outerParagraph");
let innerParagraph2 = document.getElementById("innerParagraph2");
let container = document.getElementById("container");
container.insertBefore(outerParagraph, innerParagraph2);
</script>
操作表單（驗證）
一、什么是表單
目的：提交資訊
二、獲取和修改表單提交資訊
<form action="#" method="post">
<span>用戶名：</span> <input type="text" id="username"> <br>
<input type="radio" id="male" name="sex" value="https://www.cnblogs.com/ylfmax-blog/archive/2022/03/07/male"> 男
<input type="radio" id="female" name="sex" value="https://www.cnblogs.com/ylfmax-blog/archive/2022/03/07/female"> 女
</form>
<script>
let username = document.getElementById("username");
let male = document.getElementById("male");
let female = document.getElementById("female");
//獲取文本框提交資訊 username.value
//修改文本框提交資訊 username.value = 'https://www.cnblogs.com/ylfmax-blog/archive/2022/03/07/123'
//獲取單選框提交資訊
if (male.checked = true) {
console.log(male.value);
}
</script>
三、表單提交驗證及密碼MD5加密
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表單提交驗證及密碼MD5加密</title>
<!-- MD5工具類 -->
<script src="https://cdn.bootcss.com/blueimp-md5/2.12.0/js/md5.min.js"></script>
</head>
<body>
<!--
表單系結事件
1.事件處理程式的回傳值
在JavaScript中通常事件處理程式不需要有回傳值，這時瀏覽器會按默認方式進行處理；
但很多情況下需要使用回傳值，來判斷事件處理程式是否正確進行處理，
2.回傳值型別：boolean值
瀏覽器根據回傳值的型別決定下一步如何操作，當回傳值為true，進行默認操作； 當回傳值為 false，阻止瀏覽器下一步操作，
3.基本語法：事件句柄=“return 函式名（引數）;"
-->
<form action="https://www.baidu.com" method="post" onsubmit="return check()">
<p>
<span>用戶名：</span>
<input type="text" name="username" id="username">
</p>
<p>
<span>密碼：</span>
<input type="password" name="password" id="password">
</p>
<p>
<!-- 按鈕系結事件 onclick 被點擊 -->
<input type="submit" value="https://www.cnblogs.com/ylfmax-blog/archive/2022/03/07/提交">
</p>
</form>
<script>
function check() {
let username = document.getElementById("username");
let password = document.getElementById("password");
// MD5加密
password.value = https://www.cnblogs.com/ylfmax-blog/archive/2022/03/07/md5(password.value);
return false;
}
</script>