本系列為筆者學習JavaWeb的課堂筆記，視頻資源為B站黑馬程序員出品的《黑馬程序員JavaWeb開發教程，實現javaweb企業開發全流程（涵蓋Spring+MyBatis+SpringMVC+SpringBoot等）》，章節分布參考視頻教程，為同樣學習JavaWeb系列課程的同學們提供參考。
01 什么是 JavaScript ?
JavaScript 是一門跨平臺、面向對象的腳本語言，其使得網頁可交互。
02 JavaScript 引入方式
標簽：<script>
<!-- 內部腳本 -->
<script>alert("Hello JavaScript");
</script><!-- 外部腳本 -->
<script src="demo.js"></script>
03 JavaScript 基礎語法
① 輸出語句
<script>window.alert("Hello JavaScript"); //彈出警告框document.write("Hello JavaScript"); //寫入HTML頁面console.log("Hello JavaScript"); //瀏覽器控制臺輸出（F12）
</script>
注：console / k?n?so?l / 控制臺。
② 變量
var a = 20;
a = "張藍天";
注：var 為全局變量，可重復定義。
③ 數據類型
var a = 20;
alert(typeof a); //獲取數據類型
④ 運算符
⑤ 流程控制語句
04 JavaScript 函數
//定義
function add(a, b){return a + b;
}var add = function(a, b){return a + b;
}//調用
var result = add(1, 2);
alert(result);
05 JavaScript 對象
① Array
var arr = new Array(1, 2, 3, 4);
var arr = [1, 2, 3, 4];arr[10] = "hello";
arr[9] = 'a';
arr[8] = true;
注：JavaScript數組相當于Java集合，其長度可變，類型可變。
<script>var arr = [1, 2, 3, 4];for(int i=0; i<arr.length; ++i){console.log(arr[i]);}arr.forEach(function(e){console.log(e); //僅遍歷有值的元素}) arr.forEach( (e) => {console.log(e);} ) //ES6 箭頭函數 (...) => {...}arr.push(7, 8, 9);console.log(arr);arr.splice(2, 2); //start numberconsole.log(arr);
</script>
② String
var str = new String("Hello JavaScript");
var str = "Hello JavaScript";
<script>var str = " Hello JavaScript ";console.log(str.length);console.log(str.charAt(4)); //oconsole.log(str.indexOf(o)); //4var str2 = str.trim();console.log(str2);console.log(str2.substring(0, 5)) //[start, end)
</script>
③ 對象
var user{//屬性名：屬性值name: "Tom";age: 10;gender: "male";//方法eat: function(){alert("干飯！");}drink(){alert("喝酒！");}
}alert(user.name);
user.eat();
④ JSON
JavaScript Object Notation為通過JavaScript對像標記法書寫的文本，由于其語法簡單，層次結構鮮明，多用于作為數據載體，在網絡中進行數據傳輸。
var 變量名 = '{"key1": value1, "key2": value2}'; //JSON字符串var jsonStr = '{"name": "Tom", "age": 18, "address": {"北京", "上海", "西安"}}';//JSON字符串 -> JavaScript對象
var obj = JSON.parse(jsonStr);
alert(obj.name);//JavaScript對象 -> JSON字符串
var str = JSON.string(obj);
alert(atr);
⑤ BOM
Browser Object Model為瀏覽器對象模型，允許JavaScript與瀏覽器對話，JavaScript將瀏覽器的各個組成部分封裝為對象。
Window：瀏覽器窗口對象Navigator：瀏覽器對象Screen：屏幕對象History：歷史記錄對象Location：地址欄對象
Ⅰ 瀏覽器窗口對象Window
window.alert("Hello Window");
alert("Hello Window");
<script>//confirm - 對話框 - 確認：true，取消：falsevar flag = confirm("確定刪除嗎？");alert(flag);//setInterval - 定時器 - 無限循環var i = 0;setInterval(function(){i++;console.log("第"i"次振翅")；}, 2000)//setTimeout() - 延遲器 - 延期執行setInterval(function(){alert("Hello JavaScript");}, 3000) //毫秒
</script>
Ⅱ 地址欄對象Location
window.location.href;
location.href;
⑤ DOM
Document Object Model為文檔對象模型，將標記語言的各部分封裝為對象。
Document：整個文檔對象Element：元素（標簽）對象Attribute：屬性對象Text：文本對象Comment：注釋對象
JavaScript通過DOM 就能夠對HTML文檔進行操作:
- 改變
HTML元素的內容 - 改變
HTML元素的樣式(CSS) - 對
HTML DOM事件作出反應 - 添加和制除
HTML元素
Ⅰ 獲取Element元素（標簽）對象
Ⅱ 修改Element元素（標簽）內容
<body><img id="h1" src="img/off.gif"> <br><br><div class="cls">傳智教育</div> <br><div class="cls">黑馬程序員</div> <br><input type="checkbox" name="hobby"> 電影<input type="checkbox" name="hobby"> 旅游<input type="checkbox" name="hobby"> 游戲
</body><script>//點亮燈泡var img = document.getElementById("h1");img.src = "img/on.gif";//very goodvar divs = document.getElementByClassName('cls');var div1 = divs[0];var div2 = divs[1];div1.innerHTML += "<font color="red">very good</font>"; div2.innerHTML += "<font color="red">very good</font>";//勾選方框var ins = document.getElementByName("hobby");for(let i=0; i<ins.length; ++i){const check = ins[i];check.checked = "true"; //問AI唄~}
</script>
06 JavaScript 事件監聽
HTML事件是發生在HTML元素上的事情，比如按鈕被點擊、鼠標移動到元素上或者按下鍵盤按鍵，JavaScript可以在事件被偵測到時執行代碼。
① 事件綁定
方式一：通過HTML標簽中的屬性進行綁定
<body>
<input type="button" onclick="on()" value="按鈕1">
</body>
<script>function on(){alert('我被點擊啦！');}
</script>
方式二：通過DOM元素屬性綁定
<body>
<input type="button" id="btn" balue="按鈕2">
</body><script>document.getElementById("btn").onclick=function(){alert('我被點擊啦！');}
</script>
② 常見事件
③ 案例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS-事件-案例</title>
</head>
<body><img id="light" src="img/on.gif"> <br><input type="button" value="點亮" onclick="on()"> <input type="button" value="熄滅" onclick="off()"><br> <br><input type="text" id="name" value="ITCAST" onfocus="lower()" onblur="upper()"><br> <br><input type="checkbox" name="hobby"> 電影<input type="checkbox" name="hobby"> 旅游<input type="checkbox" name="hobby"> 游戲<br><input type="button" value="全選" onclick="checkAll()"> <input type="button" value="反選" onclick="reverse()"></body><script>//1. 點擊 "點亮" 按鈕, 點亮燈泡; // 點擊 "熄滅" 按鈕, 熄滅燈泡; function on(){ //事件監聽var img = document.getElementsById("light"); //DOMimg.src="img/on.gif";}function off(){var img = document.getElementsById("light");img.src="img/off.gif";}//2. 輸入框聚焦后, 展示小寫; // 輸入框離焦后, 展示大寫; function lower(){var input = document.getElementById("name");input.value = input.toLowerCase();}function upper(){var input = document.getElementById("name");input.value = input.toUpperCase();}//3. 點擊 "全選" 按鈕使所有的復選框呈現選中狀態 ; // 點擊 "反選" 按鈕使所有的復選框呈現取消勾選的狀態 ; function checkAll(){var checks = document.getElementsByName("hobby");for(let i=0; i<checks.length; ++i){const check = checks[i];check.checked = true;}}function reverse(){var checks = document.getElementsByName("hobby");for(let i=0; i<checks.length; ++i){const check = checks[i];check.checked = false;}}</script>
</html>
