JavaScript工作原理
前端三元素：
- HTML：通過各種元素搭建頁面結構
- CSS：負責頁面樣式：形狀，大小，顏色，動畫等
- JavaScript：控制頁面行為：部分動畫效果、頁面與用戶的交互、頁面功能
概念：
- 互聯網最流行的輕量級腳本語言
- 廣泛用於服務端、pc端、移動端
- 嵌入更大型的應用程序環境，去調用宿主環境提供的底層 API，比如結合瀏覽器使用
與宿主的關系：
- 各種宿主環境提供額外的 API（即只能在該環境使用的接口），以便 JavaScript 調用。
- 以瀏覽器為例，它提供的額外 API 可以分成三大類：
- 瀏覽器控制類：操作瀏覽器
- DOM 類：操作網頁的各種元素
- Web 類：實現互聯網的各種功能
- 如果宿主環境是服務器，則會提供各種操作系統的 API，比如 Node 環境中：
- 文件操作 API
- 網絡通信 API等
調試JavaScript的方法：
- alert
- console.log
- document.title
- vscode插件
ES6開啟JavaScript的新時代
- ECMAScript 6.0（以下簡稱 ES6）是 JavaScript 語言的下一代標准，已經在 2015 年 6 月正式發布了 。它的目標，是使得 JavaScript 語言可以用來編寫復雜的大型應用程序，成為企業級開發語言。
- ECMAScript 和 JavaScript 的關系是，前者是后者的標准，后者是前者的一種實現（另外的 ECMAScript 方言還有 Jscript 和 ActionScript）。
- ES6 既是一個歷史名詞，也是一個泛指，含義是 5.1 版以后的 JavaScript 的下一代標准，涵蓋了 ES2015、ES2016、ES2017 等
學習DOM：找到對象很重要
什么是DOM：
- DOM 是 JavaScript 操作網頁的接口，全稱為“文檔對象模型”（Document Object Model）。它的作用是將網頁轉為一個 JavaScript 對象，從而可以用腳本進行各種操作（比如增刪內容）。
- 瀏覽器會根據 DOM 模型，將結構化文檔（比如 HTML 和 XML）解析成一系列的節點，再由這些節點 組成一個樹狀結構（DOM Tree）。所有的節點和最終的樹狀結構，都有規范的對外接口。
- DOM 只是一個接口規范，可以用各種語言實現。所以嚴格地說，DOM 不是 JavaScript 語法的一部分 ，但是 DOM 操作是 JavaScript 最常見的任務，離開了 DOM，JavaScript 就無法控制網頁。另一方面 ，JavaScript 也是最常用於 DOM 操作的語言。后面介紹的就是 JavaScript 對 DOM 標准的實現和用法。
常見的DOM文檔對象模型：
document #節點
doucment.cookie #獲取cookie
document.links #返回當前文檔所有鏈接的數組,獲取所有的a
document.URL #獲取當前URL
document.location #當前網站位置信息
document.title #當前文檔標題
doucment.querySelector #取到元素
document.getElementsByTagName #取標簽列表，支持切片
document.getElementsByClassName #取class列表
document.getElementsByName #取name
document.getElementByID #根據ID取元素
Node 接口
所有 DOM 節點對象都繼承了 Node 接口，擁有一些共同的屬性和方法。這是 DOM 操作的基礎。
Node.prototype.nodename #節點名字
Node.prototype.nodevalue #節點值
Node.prototype.textcontent #文本內容
Node.prototype.nextsibling #同級別下一個節點
Node.prototype.previousSibling #同級別上一個節點
Node.prototype.firstchild #子節點第一個
Node.prototype.parentNode #父節點
Node.prototype.childnodes #所有子節點
var h4 = document.createElement('h4')
h4.textContent = '這是h4'
div.append(h4) #追加元素
Node.prototype.clonenode #克隆節點
div.parentNode.removeChild(div) #刪除節點
Node.prototype.contains #判斷節點是否存在
Element 節點
Element節點對象對應網頁的 HTML 元素。每一個 HTML 元素，在 DOM 樹上都會轉化成一個Element節點對象。
Element.id #取id
Element.tagName #標簽名
Element.attributes #取屬性
Element.classname #取類名字
Element.classlist #類列表
var attr = document.getElementById('屬性')
attr.classList.toggle('hljs', true) #如果是true就添加類
Element.dataset #獲取data屬性下的值
Element.innerHtml #獲取當前節點下html代碼
Element.outerHtml #獲取當前節點html
Element.style #獲取樣式
Element.closest #返回匹配該選擇器的、最接近當前節點的一個祖先節點（包括當前節點本身）
Element.matches #匹配元素返回一個布爾值
attribute 屬性
HTML 元素包括標簽名和若干個鍵值對，這個鍵值對就稱為“屬性”（attribute）。
Element.attributes #取屬性
id
name
value
href
img.src
for 改為htmlfor
class 改成classname
Element.getAttribute #獲取屬性
code.setAttribute('class', 'bg') #添加屬性
Element.hasAttribute() #當前元素節點是否包含指定屬性
Element.hasattributes() #方當前元素是否有屬性，如果沒有任何屬性，就返回false，否則返回true。
CSS 操作
CSS 與 JavaScript 是兩個有着明確分工的領域，前者負責頁面的視覺效果，后者負責與用戶的行為互動。但是，它們畢竟同屬網頁開發的前端，因此不可避免有着交叉和互相配合。如何通過 JavaScript 操作 CSS？
setAttribute('style', 'color:red;background-color:green') #設置樣式
element.style.屬性 = 值
element.style.cssText #設置css
element.style.lenght #長度
element.style.item() #取第幾個
element.style.removeProperty('color') #刪除樣式
element.style.setProperty('color', 'red') #添加樣式
window.getComputedStyle(el, 'before').content
ES6 內置類型number和boolean
number 表示方式
ob 或 0B #二進制
0o 或 0O #八進制
0x 或 0X #16進制
Number 特殊值
- Number.MAX_VALUE 最大數值
- Number.MIN_VALUE 最小數值
- Number.NaN 特殊的非數字值
- Number.NEGATIVE_INFINITY 負無窮大
- Number.POSITIVE_INFINITY 正無窮大
Number 方法
typeof 判斷類型
parseInt() #轉成數字
parseInt(10101, 2) #二進制轉十進制 最大36進制
null #空值
undefined #未定義
numObj.toExponential() #科學計數法
numObj.toFixed() #四舍五入為指定小數位數的數字
numObj.toPrecision #可在對象的值超出指定位數時將其轉換為指數計數法
numObj.tostring #將—個數字轉換成字符串
Number.valueOf() #返回原始值
toLocaleString('') #方法可根據本地時間把 Date 對象轉換為字符串，並返回結果
isFinite() #是否是數字
isNAN() #是否不是數字
parseFloat() #轉成小數
Boolean 類型
布爾值代表“真”和“假”兩個狀態。“真”用關鍵字true表示，“假”用關鍵字false表示。布爾值只有這兩個值。
- 前置邏輯運算符： ! (Not)
- 相等運算符：=，!，==，!=
- 比較運算符：>，>=，<，<=
轉換規則是除了下面六個值被轉為false，其他值都視為true： - undefined
- null
- false
- 0
- NaN
- ""或''（空字符串）
ES6的內置類型之string
表示方法
- 用 '' 或 ""
- 多行字符串：\n 連接
- ES6標准：用反引號
...，用 + 號連接
舉例
var name = 'de8ug';
var age = 17;
var hello = hi, 我是${name}, 今年${age};
常用方法
String.charAt() #返回字符串中的第n個字符
String.charCodeAt() #返回字符串中的第n個字符的代碼
String.concat() #連接字符串
String.fromCharCode() #從字符編碼創建—個字符串
String.indexOf() #檢索字符串
String.lastIndexOf() #從后向前檢索一個字符串
String.localeCompare() #用本地特定的順序來比較兩個字符串
String.match() #找到一個或多個正則表達式的匹配
String.replace() #替換一個與正則表達式匹配的子串
String.search() #檢索與正則表達式相匹配的子串
String.slice() #抽取一個子串
String.split() #將字符串分割成字符串數組
String.substr() #抽取一個子串
String.substring() #返回字符串的一個子串
String.toLocaleLowerCase() #把字符串轉換小寫
String.toLocaleUpperCase() #將字符串轉換成大寫
String.toLowerCase() #將字符串轉換成小寫
String.toString() #返回字符串
String.toUpperCase() #將字符串轉換成大寫
String.valueOf() #返回字符串
String.includes() #返回布爾值，表示是否找到了參數字符串
String.startsWith() #返回布爾值，表示參數字符串是否在原字符串的頭部
String.endsWith() #返回布爾值，表示參數字符串是否在原字符串的尾部
String.repeat() #方法返回一個新字符串，表示將原字符串重復n次
String.padStart() #用於頭部補全
String.padEnd() #用於尾部補全
ES6的內置類型之null與undefined
- null: 值為空，不是一個全局的標識符
- undefined: 全局標識符，表示初始值未定義
ES6的內置類型之symbol
一種新的類型，得到一個唯一的值
console.log(Symbol('foo') === Symbol('foo'));
用於對象的屬性名:
- 一種是字符串，
- 另一種是Symbol 類型，可以保證不會與其他屬性名產生沖突。
let s = Symbol(); #typeof s
使用 Symbol 值定義屬性時，Symbol 值必須放在方括號之中
let s = Symbol('name')
let obj = {}
obj[s] = 'dongli'
#s不能再給新的Symbol值
ES6的數據結構Set與Map
- Map是一組鍵值對的結構，有非常快的查詢速度。
- key值支持多種類型
- 按插入順序排列
- var map=new Map();
- const map = new Map([[1,2], ['a', 'b']])
- keys
- values
- forEach
- delete
- get
- set
- size
- clear
- Set也是一組key的集合，存儲唯一值
- var s1=new Set();
- var s2=new Set([1,2,3,1,2,3,1,2,3]);
- add
- delete
- has
- clear
- size
ES6的object對象
概念
- js對象是一種無序的集合數據類型，由若干個鍵值對組成。
- 對象是屬性的容器，每個屬性有名字和值，用k:v對應的關系表示，逗號隔開
- 對象是無類型的，k,v的值都可以自定義
- 對象可以嵌套，即對象包含對象，但不建議太多層
- 屬性可以動態添加
- 所有的屬性都是字符串，對應的值可以是任意的類型。
使用
- K：V的K不需要加引號
- 優先用. 其次考慮 []
- 屬性通過原型鏈往上查找，Object.prototype沒有的屬性，會產生undefined
- 屬性判斷：hasOwnProperty，不檢查原型鏈
- 刪除：delete，不涉及原型鏈的對象
- 全局變量：命名空間，唯一使用，靈活可讀