一，JavaScript是什麼？ 1，JavaScript簡稱：js，是一種瀏覽器解釋型語言，嵌套在HTML文件中交給瀏覽器解釋執行。主要用來實現網頁的動態效果，用戶交互及前後端的數據傳輸等。 2，JavaScript 組成 1，核心語法 - ECMAScript (ES5-ES6) 規範了Java ...
一，JavaScript是什麼？
1，JavaScript簡稱：js，是一種瀏覽器解釋型語言，嵌套在HTML文件中交給瀏覽器解釋執行。主要用來實現網頁的動態效果，用戶交互及前後端的數據傳輸等。
2，JavaScript 組成
1，核心語法 - ECMAScript (ES5-ES6) 規範了JavaScript的基本語法
2.1 瀏覽器對象模型 ：-BOM Browser Object Model，提供了一系列操作瀏覽器的方法
2.2 文檔對象模型： -DOM Document Object Model ，提供了一系列操作的文檔的方法
3. 使用方式
3.1元素綁定事件：
- 事件 ：指用戶的行為（單擊，雙擊等）或元素的狀態（輸入框的焦點狀態等）
- 事件處理：元素監聽某種事件併在事件發生後自動執行事件處理函數
- 常用事件：onclick (單擊事件)
- 語法 ：將事件名稱以標簽屬性的方式綁定到元素上，自定義事件處理
<!--實現點擊按鈕在控制台輸出-->
<button onclick="console.log('Hello World');">點擊</button>
3.2文檔內嵌：
<script type="text/javascript">
alert("網頁警告框");
</script>
3.3外部鏈接：
<script src="index.JavaScript"></script>
3.44
alert("")；普通的網頁彈框
console.log()；控制台輸出，多用於代碼調試
document.write("<h1>Hello</h1>")；實現在動態在網頁中寫入內容，
可以識別HTML標簽,腳本代碼可以在文檔任何地方書寫，如果是普通寫入（不涉及事件），
區分代碼的書寫位置插入
二、基礎語法
1.，語法規範：
-
JavaScript是由語句組成,語句由關鍵字，變數，常量，運算符，方法組成。
-
分號可以作為語句結束的標誌，也可以省略
-
JavaScript嚴格區分大小寫
-
註釋語法 單行註釋使用 // 多行註釋使用 /* */
2. JavaScript的變數與常量：
1，變數：
1.2語法 : 使用關鍵var聲明,自定義變數名
var a; //變數聲明 a = 100; //變數賦值 var b = 200; //聲明並賦值 var m,n,k; //同時聲明多個變數 var j = 10,c = 20; //同時聲明並賦值多個變數
1.3 命名規範 :
-
變數名，常量名，函數名，方法名自定義，可以由數字，字母，下劃線，$組成，禁止以數字開頭
-
禁止與關鍵字衝突(var const function if else for while do break case switch return class)
-
變數名嚴格區分大小寫
-
變數名儘量見名知意，多個單片語成採用小駝峰,例如："userName"
-
1.4使用註意 :
變數如果省略var關鍵字，並且未賦值，直接訪問會報錯
2，變數使用var關鍵字聲明但未賦值，變數初始值為undefined
2，常量
2.1 作用 : 存儲一經定義就無法修改的數據
2.2 語法 : 必須聲明的同時賦值
const PI = 3.14;
2.3 註意 :
常量一經定義，不能修改，強制修改會報錯
命名規範同變數，為了區分變數，常量名採用全大寫字母
2.4操作小數位：
toFixed(n)； 保留小數點後 n 位，並且四捨五入。
使用 ：
var num = 3.1415926; //保留當前變數小數點後兩位 var res = num.toFixed(2);
3. 數據類型
3.1number 數值類型：
整數：
十進位表示
var a = 100;
八進位表示 以0為首碼
var b = 021; //結果為十進位的 17
使用 : 整數可以採用不同進位表示，在控制台輸出時一律會按照十進位輸出
小數：
var m = 1.2345;
科學計數法 例 : 1.5e3 e表示10為底，e後面的數值表示10的次方數 1.5e3 等價於 1.5 * 10(3)
3.2string 字元串類型：
字元串：由一個或多個字元組成，使用""或''表示，每一位字元都有對應的Unicode編碼
var s = "100"; var s1 = "張三";
3.3boolean 布爾類型：
只有真和假兩個值，布爾值與number值可以互相轉換。true 為 1，false 為 0
var isSave = true; var isChecked = false;
3.4undefined 特殊值：
變數聲明未賦值時顯示undefined
var a; console.log(a);//undefined
3.5null 空類型 ：
定義對象引用時使用null，表示對象為空
- 引用數據類型 主要指對象，函數等
- 檢測數據類型 typeof 變數或表達式 typeof (變數或表達式)
var n = "asda"; console.log(typeof n);//string console.log(typeof(n));//string
4. 數據類型轉換
不同類型的數據參與運算時,需要轉換類型
1，轉換字元串類型 方法：toString() 返迴轉換後的字元串
var a = 100; a = a.toString(); //"100" var b = true; b = b.toString(); //"true"
2，轉換number類型
Number(param) 參數為要進行數據類型轉換的變數或值，返迴轉換後的結果: 如果轉換成功，返回number值 如果轉換失敗，返回NaN，(Not a Number)，是非number字元，一律轉換失敗，返回 NaN
4.2隱式類型轉換（自動轉換）
-
當字元串與其他數據類型進行"+"運算時，表示字元串的拼接，不再是數學運算 轉換規則 ：將非字元串類型的數據轉換成字元串之後進行拼接，最終結果為字元串
-
其他情況下，一律將操作數轉number進行數學運算
5. 運算符
5.1賦值運算符：
= 將右邊的值賦給左邊變數
+ - * / % 加 減 乘 除 取餘
5.3符合運算符：
+= -= *= /= %=
5.4 自增或自減運算符：
++ -- 變數的自增和自減指的是在自身基礎上進行 +1或-1 的操作
註意：自增或自減運算符在單獨與變數結合時，放前和放後沒有區別，如果自增或自減運算符與其他運算符結合使用，要區分首碼和尾碼，做首碼，那就先++/--，再進行賦值或其他運算，如果做尾碼，就先結合其他運算符，再進行++ / --
5.5關係運算符/比較運算符：
> <
>= <=
==(相等) !=(相等)
===(全等) !==(不全等)
1，關係運算符用來判斷表達式之間的關係，結果永遠是布爾值 true/false
2，使用
-
-
str.charCodeAt(index)
方法可返回指定位置的字元的 Unicode 編碼。這個返回值是 0 - 65535 之間的整數
3，相等與全等
-
-
相等：不考慮數據類型，只做值的比較(包含自動類型轉換)
-
全等：不會進行數據類型轉換，要求數據類型一致並且值相等才判斷全等
-
5.6邏輯運算符：
-
&& 邏輯與 ：表達式同時成立，最終結果才為true；1則1
-
|| 邏輯或 ：表達式中只要有一個成立，最終結果即為true；有1則1
-
! 邏輯非 ：對已有表達式的結果取反 註意：除零值以外，所有值都為真
5.7三目運算符：
語法 :
表達式1 ? 表達式2 : 表達式3;
過程 :
判斷表達式1是否成立，返回布爾值；
如果表達式1成立，執行表達式2；
如果表達式1不成立，執行表達式3；
1，事件函數分類
onclick //單擊 ondblclick //雙擊 onmouseover //滑鼠移入 onmouseout //滑鼠移出 onmousemove //滑鼠移動
1.2文檔或元素載入完畢：
onload //元素或文檔載入完畢
1.3表單控制項狀態監聽：
onfocus //文本框獲取焦點 onblur //文本框失去焦點 oninput //實時監聽輸入 onchange //兩次輸入內容發生變化時觸發,或元素狀態改變時觸發 onsubmit //form元素監聽,點擊提交按鈕後觸發,通過返回值控制數據是否可以發送給伺服器
2，獲取元素節點
2.1根據標簽名獲取元素節點列表：
var elems = document.getElementsByTagName(""); /* 參數 : 標簽名 返回值 : 節點列表,需要從節點列表中獲取具體的元素節點對象,添加相應下標。 */
2.2根據 class 屬性值獲取元素節點列表：
var elems = document.getElementsByClassName(""); /* 參數 : 類名(class屬性值) 返回值 : 節點列表 */
var elem = document.getElementById(""); /* 參數 : id屬性值 返回值 : 元素節點 */
2.4根據 name 屬性值取元素列表：
var elems = document.getElementsByName(""); /* 參數 : name屬性值 返回 : 節點列表 */
3，事件綁定方式
3.1內聯方式： 將事件名稱作為標簽屬性綁定到元素上
例 :
<button onclick="alert()">點擊</button>
3.2動態綁定 ：獲取元素節點，動態添加事件
btn.onclick = function (){ };
