本系列为笔者学习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>
