棧初相識
JavaScript
一名合格的後端人員必須要精通JavaScript！
JS，是一門最流行的指令碼語言，嚴格區分大小寫，並且<script></script>必須成對出現。
歷史背景：
Nombas 和 ScriptEase
大概在 1992 年，一家稱作 Nombas 的公司開發了一種叫做 C 減減（C-minus-minus，簡稱 Cmm）的嵌入式指令碼語言。Cmm 背後的理念很簡單：一個足夠強大可以替代巨集操作（macro）的指令碼語言，同時保持與 C （和 C ++）足夠的相似性，以便開發人員能很快學會。這個指令碼語言捆綁在一個叫做 CEnvi 的共享軟體中，它首次向開發人員展示了這種語言的威力。
Nombas 最終把 Cmm 的名字改成了 ScriptEase，原因是後面的部分（mm）聽起來過於消極，同時字母 C “令人害怕”。現在 ScriptEase 已經成為了 Nombas 產品背後的主要驅動力。
Netscape 發明了 JavaScript
當 Netscape Navigator 嶄露頭角時，Nombas 開發了一個可以嵌入網頁中的 CEnvi 的版本。這些早期的試驗被稱為 Espresso Page（濃咖啡般的頁面），它們代表了第一個在全球資訊網上使用的客戶端語言。而 Nombas 絲毫沒有料到它的理念將會成為全球資訊網的一塊重要基石。
當網上衝浪越來越流行時，對於開發客戶端指令碼的需求也逐漸增大。此時，大部分因特網使用者還僅僅通過 28.8 kbit/s 的調變解調器連線到網路，即便這時網頁已經不斷地變得更大和更復雜。而更加加劇使用者痛苦的是，僅僅為了簡單的表單有效性驗證，就要與伺服器進行多次地往返互動。設想一下，使用者填完一個表單，點選提交按鈕，等待了 30 秒的處理後，看到的卻是一條告訴你忘記填寫一個必要的欄位。
那時正處於技術革新最前沿的 Netscape，開始認真考慮開發一種客戶端指令碼語言來解決簡單的處理問題。
Netscape 的 Brendan Eich (布倫丹·艾奇)，開始著手開發一個稱之為 LiveScript 的指令碼語言，當時的目的是在瀏覽器和伺服器（本來要叫它 LiveWire）端使用它。Netscape 與 Sun 共同完成 LiveScript 實現。就在 Netscape Navigator 2.0 即將正式釋出前，Netscape 將其更名為 JavaScript，目的是為了利用 Java 這個因特網時髦詞彙。Netscape 的賭注最終得到回報，JavaScript 從此變成了因特網的必備元件。
資料型別
-
number：不區分整數和小數
-
字串
-
布林值
-
邏輯運算：&& || ！
-
比較運算：> < = == ===絕對等於
- ==是js的一個缺陷，值一樣型別不一樣也會判斷為true
- NaN與所有的數值都不相等，包括自己，只能通過isNaN（）來判斷這個數是否是NaN
js中的陣列和物件的定義和賦值
/* 陣列【】 */ var arr = [1, 2, 5, 4, 6, 3]; /* 物件{} ，賦值為：*/ var object = { name: "db", age: 18, tags: ['java', 'as', 'mysql'] }js中陣列：可以包含任意的資料型別
-
陣列中的方法：
toUpperCase(); //轉為大寫 toUpperCase(); //轉為小寫 substring(0,10); //擷取字串 [) 左閉右開 push('a','b'); //將a，b壓入陣列尾部 pop(); //彈出尾部的一個元素 unshift('a','b'); //壓入到頭部 shift(); //彈出頭部的一個元素 sort(); //升序排序 reverse(); //元素反轉 concat(); // join('-'); //連線符
js中的物件：
- 賦值
var person={ name : 'java', age : 18 }- 動態增、刪物件的屬性
delete person.name; person.name='mysql';- 判斷屬性是否在這個物件中，關鍵字
in
'name' in person;- Map和Set
/* Map */ var names = new Map([ ["tom", 1], ["cat", 2], ["rose", 3] ]); names.set("admin", 123456); names.get("admin"); names.delete("admin"); var set = new Set([3,1,1,1,22,22]); //Set可以去重 set.add(100); set.delete(1);- 遍歷陣列，Map，Set
/* for of 輸出陣列中所有值 */ for (var num of nums) { console.log(num); } /* for in 輸出陣列的下標 */ for (var num in nums) { console.log(num); } /* foreach 輸出value */ names.forEach(function name(value) { console.log(value); });
嚴格檢查模式---strict
var，let：用於定義區域性變數，儘量使用 let
/* 啟用嚴格檢查模式 */
'use strict';
/* 變數沒有宣告，會報錯：is not defined */
arr1 = [4, 5, 6];
let arr1 = [4, 5, 6];
字串
- 使用單引號，雙引號巢狀
- 轉義字元：
\'\n\t
函式
定義
所有的方法都由function來定義。
獲取引數之外的所有引數 -->rest，只能寫在所有引數之後，必須帶有標識...rest
function f_name(a,b,...rest){
console.log(a);
console.log(b);
console.log(rest);
}
變數的作用域
- 在函式體中宣告的變數，在函式體外部不可使用
- 全域性物件window
- 區域性作用域變數--->let
- 常量--->const，賦值後不可以被改變
方法的定義和apply()
/* this指向當前物件 */
var person = {
name: 'keke',
birth: 1997,
age: function() {
no = new Date().getFullYear();
return no - this.birth;
}
}
/*apply（Object, []），控制this的指向 */
function getAge() {
no = new Date().getFullYear();
return no - this.birth;
}
var keke={
name:'keke',
birth:2000,
age:getAge
}
getAge.apply(keke,[]);
內部物件
- 標準物件
typeof 1
"number"
typeof '1'
"string"
typeof true
"boolean"
typeof NaN
"number"
typeof isNaN
"function"
typeof []
"object"
typeof undefined
"undefined"
- 日期Date
getTime() //時間戳==> 全世界統一，從1970-01-01開始到現在的毫秒數
new Date(new Date().getTime()) //把當前 時間戳 轉 為時間
getFullYear()
getMonth()
getDate()
- JSON
主要兩個方法：
- JOSN.stringify() 把js物件轉換成字串
- JSON.parse() 把字串解析成js物件
繼承
-
原型繼承
object._proto_=anotherObject; -
class繼承，ES6引入
class關鍵字/* 定義一個類 */ class person { constructor(name) { this.name = name; } say() { alert("汪汪汪~"); } } class people extends person { constructor(name, xx) { super(name); this.xx = xx } mySay() { alert("喵喵喵~"); } } var xiaoho = new person('xiaoho'); var xiaomi = new people('xiaomi ', 'haha');
操作BOM物件（重點）
瀏覽器物件模型---Browser Object Model
瀏覽器
JavaScript的誕生就是為了能在瀏覽器中執行
瀏覽器：
- IE
- chrome
- Firefox
navigator（瞭解），history
navigator.appCodeName
"Mozilla"
navigator.appVersion
"5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.198 Safari/537.36"
navigator.userAgent
"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.198 Safari/537.36"
navigator.platform
"Win32"
/* navigator封裝了瀏覽器的資訊 */
navigator
Navigator {vendorSub: "", productSub: "20030107", vendor: "Google Inc.", maxTouchPoints: 0, userActivation: UserActivation, …}
appCodeName: "Mozilla"
appName: "Netscape"
appVersion: "5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.198 Safari/537.36"
cookieEnabled: true
credentials: CredentialsContainer {}
deviceMemory: 4
language: "zh-CN"
languages: (2) ["zh-CN", "en"]
locks: LockManager {}
platform: "Win32"
product: "Gecko"
productSub: "20030107"
userAgent: "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.198 Safari/537.36"
vendor: "Google Inc."
大多數時候都不使用navigator，因為會被人修改。
screen，代表螢幕
screen
Screen{availWidth: 1366, availHeight: 738, width: 1366, height: 768, colorDepth: 24,…}
lacation，代表當前頁面的URL資訊
location
Location{ancestorOrigins: DOMStringList, href: "file:///D:/Users/%E8%9C%98%E8%9B%9B%E5%95%8A%E5%85…%AB%AF%E5%AD%A6%E4%B9%A0%E4%B9%8B---JS/index.html", origin: "file://", protocol: "file:", host: "",…}
/* 設定新的地址 */
location.assign("https://www.cnblogs.com/")
document（重點），代表當前頁面
document.title
"Document"
document.title="柯柯"
"柯柯"
/* 獲得具體的文件樹節點0 */
document.getElementById(" ")；
操作DOM物件
Document Object Model --- 文件物件模型
獲取DOM物件
/* 對應css選擇器 */
document.getElementsByTagName("h1");
document.getElementById("id");
document.getElementsByClassName("class");
這是原生程式碼，之後使用的都是jQuery
更新節點
var app=document.getElementById("app")
/* 修改文字的值 */
app.innerText='1233333333'
app.innerHTML='<strong>123654789</strong>' //可解析html文字標籤
/* 修改css */
app.style.color='red'
刪除節點
先找到父節點，再通過父節點刪除自己
var dl=document.getElementById("id")
dl.parentElement.removeChild(dl)
插入節點
p=document.getElementById("p")
ul=document.getElementById("ul")
/* 移動已有的節點 */
ul.appendChild(p)
/* 建立一個新標籤 */
p1=document.createElement("p")
// p1.id="newp" //不推薦使用
p1.setAttribute("id","newp") //推薦這中，以鍵值對形式設定，萬能用法
p1.innerText="hello，哈哈!"
/* 插入 */
ul.appendChild(p1)
表單驗證
<div id="app">
<form name="myForm" action="" method="post">
姓名：<input type="text" name="fname">
<input type="submit" onclick="validateForm()" alue="Submit">
</form>
</div>
<script>
function validateForm() {
var x = document.forms["myForm"]["fname"].value;
if (x == "") {
alert("必須填寫姓名");
return false;
}
}
</script>
DOM事件
- onclick，點選觸發
- onchange，離開輸入框觸發
- onmouseover 和 onmouseout 事件可用於當用戶將滑鼠移至 HTML 元素上或移出時觸發
- onmousedown，滑鼠按下觸發
- onmouseup，滑鼠鬆開觸發
jQuery
jQuery就是一個js庫，裝有大量的js函式
獲取連結：
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>當網頁載入完後，響應事件：
$(function(){
})
選擇器$()
$('Tag_name').action()
$('. class_name').action()
$('# id_name').action()
操作HTML
/* 設定html元素 */
t.html("<p>Hello World</p>");
/* 獲取html元素 */
t.html();
/* 設定文字內容 */
t.text("Hello China!");
操作css
t.css("font-size","35px");
/* 隱藏 顯示*/
t.hide();
t.show();
操作DOM
$("#id").remove();//刪除節點
t.parent();//獲取父節點