1. 啥是 javascript
1.1 简介
JavaScript 是运行在浏览器上的脚本语言，简称 JS。也就是说我们按照它的规范写一段 JS 代码，然后用浏览器打开，我们就能看到运行之后的效果了。
JS 还可以放在 HTML 代码中，浏览器会解释并执行 HTML 和 JS 代码。
那学这玩意有什么用？
比如有一天你想给女朋友做个表白网站，来证明一下自己的技术水平。
但是因为你之前只学了 html 和 css，再加上审美不是多好，可能你做成了这个B样：
女朋友看完你做的网站立马把你微信拉黑了。后来你奋发图强学会了JS，学会了如何制作特效，于是你又用 JS 给女朋友做了个表白网站：
女朋友看完又跟你和好了。
我们从上面坎坷的爱情故事中知道 JS 可以制作动态效果，可以挽救一段支离破碎的爱情。
哈哈哈，有点扯淡了。
其实JS的案例在我们日常生活中很常见，例如淘宝首页的轮播图：
登录网站时的账号校验：
这些网页的动态效果都是用 JS 技术完成的。
如果把 html 比作网页的骨架，那么 css 就是网页的外观样式。而 JS 就是人与网页交互之后产生的动态效果。
1.2 规范
JS 代码规范：
- HTML 中关于 JS 的代码必须位于 script 标签之间。
- JS 代码可以位于 body 和 head 标签中。
- HTML 页面中可以包含多个 script 标签。
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>一颗雷布斯</title>
<script>
document.write("<h1>好好学习，天天向上！</h1>");
</script>
</head>
<body>
<script>
document.write("<h2>人生贵在坚持，难在坚持！</h2>");
</script>
<script>
document.write("<h3>马上2022年了，当时立的flag实现了吗？</h3>");
</script>
</body>
</html>
复制代码运行结果：
2. 变量
变量就像一个房子，里面可以存东西。
JS 中使用 var 关键字声明变量，例如：
var name;
复制代码声明之后我们可以给变量赋值，例如：
name = "一颗雷布斯";
复制代码我们还可以在声明的同时给变量赋值，例如：
var name = "一颗雷布斯";
复制代码我们还可以在一行语句中声明多个变量，例如：
var name ="一颗雷布斯",age = 23,school = "哈尔滨佛教大学";
复制代码注：在 JS 代码中，如果我们使用了未赋值的变量，那么变量的值将会是undefined，意思是未定义的。
3. JS 三要素
3.1 ECMAScript
ECMAScript 规定了 JS 语言的组成部分：语法、类型、语句、关键字、保留字、操作符、对象。
说白了 ECMAScript 定义了 JS 都有啥东西，需要遵守啥规范。ECMAScript 最新版本是 ES6 。
3.2 DOM
3.2.1 DOM 简介
当我们写的 HTML 代码被浏览器加载运行时，浏览器会创建页面的文档对象模型：Document Object Model，简称 DOM。
DOM 是树形结构的，它长这个样子：
从上面可以看出，DOM 模型其实就是 HTML 代码的框架。
那 JS 中的 DOM 模型干啥用的？
DOM 模型告诉我们如何使用 JS 代码操作 HTML 中的元素以及元素的属性和文本信息。
例如通过 JS 代码动态修改 img 标签里的图片、修改 p 标签里面的文本信息等。
从上图我们可以看出 DOM 节点分为三大类：元素节点、属性节点、文本节点。其中文本节点、属性节点都属于元素节点的子节点。
如果把 DOM 模型当做一棵树，那元素节点就是树枝，而属性节点和文本节点就是果子。所以我们要想摘到果子，必须先找到果子所在的树枝。
也就是说我们要想修改属性节点和文本节点的值，必须先找到他们所在的元素节点。例如要想修改 P 标签的文本信息，必须先找到是哪个 P 标签。
那如何使用 JS 代码修改元素的属性值和文本信息呢？
3.2.2 获取元素节点
要想摘果子，必先找树枝。首先我们先看一下 JS 中获取元素节点的常用方法：
- 根据 id 属性获取元素节点
var 变量 = document.getElementById("id的值")
复制代码例如：
<body>
<p id="p1">中国人不骗中国人！</p>
<script>
var p = document.getElementById("p1");
console.log(p);
</script>
</body>
复制代码注：
我们可以使用 console.log() 在浏览器的控制台输出结果。
就像我们在 java 中使用 System.out.print() 一样。
复制代码运行结果：
注： 我们知道 id 属性是唯一的，所以如果在 html 中定义了 id 属性一样的多个元素，JS 代码只会获取第一个元素。
- 根据 name 属性获取元素节点
var 变量 = document.getElementsByName("name的值");
复制代码例如：
<body>
<button name="btn1">我是个时髦的按钮</button>
<script>
var btn = document.getElementsByName("btn1");
console.log(btn);
</script>
</body>
复制代码运行结果：
- 根据标签名获取元素节点
var 变量 = document.getElementsByTagName("标签");
复制代码例如：
<body>
<p>床前明月光</p>
<button>我是个时髦的按钮</button>
<script>
var btn = document.getElementsByTagName("button");
console.log(btn);
</script>
</body>
复制代码运行结果：
- 根据 class 属性获取元素节点
var 变量 = document.getElementsByClassName("class的值");
复制代码例如：
<body>
<p class="p1">床前明月光</p>
<button class="b1">我是个时髦的按钮</button>
<script>
var p = document.getElementsByClassName("p1");
console.log(p);
</script>
</body>
复制代码运行结果：
注：后面三个获取的元素节点都是数组类型。
3.2.3 获取/设置属性值
拿到元素节点后，我们就可以操作它的属性了。
- 获取属性节点的值：getAttribute
var 变量 = 元素节点.getAttribute("属性名");
复制代码例一：
<body>
<p id="p1" name="静夜思">床前明月光</p>
<script>
var p = document.getElementById("p1");
var name = p.getAttribute("name");
console.log(name);
</script>
</body>
复制代码运行结果：
例二：
<body>
<p class="p2" name="李白">床前明月光</p>
<script>
// 注意：getElementsByClassName getElementsByName getElementsByTagName 获取的元素节点是数组
var p = document.getElementsByClassName("p2");
var name = p[0].getAttribute("name");
console.log(name);
</script>
</body>
复制代码运行结果：
- 设置属性节点
元素节点.setAttribute("属性名","属性值");
复制代码例如：
<body>
<p id="p1" name="哈哈哈哈哈哈哈哈哈">床前明月光</p>
<script>
// 注意：getElementsByClassName getElementsByName getElementsByTagName 获取的元素节点是数组
var p = document.getElementById("p1");
p.setAttribute("name","没错，我就是李白！")
console.log(p.getAttribute("name"));
</script>
</body>
复制代码运行结果：
3.2.4 修改 CSS 样式
- 使用 .style 设置单个属性
例如：
<body>
<p id="p1" name="哈哈哈哈">床前明月光</p>
<p id="p2" name="吼吼吼吼">床前明月光</p>
<script>
// 注意：getElementsByClassName getElementsByName getElementsByTagName 获取的元素节点是数组
var p = document.getElementById("p2");
p.style.fontSize = "20px";
</script>
</body>
复制代码注：属性名要用驼峰命名法
- 使用 .style 设置多个属性
例如：
<body>
<p id="p1" name="哈哈哈哈">床前明月光</p>
<p id="p2" name="吼吼吼吼">床前明月光</p>
<script>
// 注意：getElementsByClassName getElementsByName getElementsByTagName 获取的元素节点是数组
var p = document.getElementById("p2");
p.style = "font-size:30px;color:red";
</script>
</body>
复制代码运行结果：
3.2.5 获取/设置文本信息
- .innerText：获取或设置节点里面的文字内容;
例如：
<body>
<p id="p1" name="哈哈哈哈">床前明月光</p>
<p id="p2" name="吼吼吼吼">疑是地上霜</p>
<script>
// 注意：getElementsByClassName getElementsByName getElementsByTagName 获取的元素节点是数组
var p = document.getElementById("p2");
console.log(p.innerText);
p.innerText="举头望明月";
console.log(p.innerText);
</script>
</body>
复制代码运行结果：
- .innerHTML：获取或设置节点里面的HTML代码；
例如：
<body>
<p id="p1" name="哈哈哈哈">床前明月光</p>
<p id="p2" name="吼吼吼吼">疑是地上霜</p>
<script>
// 注意：getElementsByClassName getElementsByName getElementsByTagName 获取的元素节点是数组
var p = document.getElementById("p2");
console.log(p.innerHTML);
p.innerHTML="<h1>哈哈哈哈哈哈</h1>";
console.log(p.innerHTML);
</script>
</body>
复制代码运行结果：
3.3 BOM
BOM 全称 Browser Object Model ，也就是浏览器对象模型 。主要是和浏览器打交道。
BOM 定义了操作浏览器的一些规范：包括对象和对象的方法。
3.3.1 window 对象
在浏览器中有个最高级的对象：window，它相当于皇上。
页面中所有东西都属于浏览器，也都属于 window 对象，所以我们可以使用 window 对象操作所有的对象和方法。
window 相当于一个全局的变量，因为页面中一切都属于 window ,所以它可以省略。
相关方法
- 弹出框：alert
例如：
<body>
<script>
window.alert("我爱我的祖国！！！");
</script>
</body>
复制代码运行结果：
因为 window 是一个全局变量，所以可以省略，效果一样。例如：
<body>
<script>
alert("两岸猿声啼不住，轻舟已过万重山！");
</script>
</body>
复制代码运行结果：
2. 确认框：confirm
例如：
<body>
<script>
confirm("你确定你要做我女朋友吗？");
</script>
</body>
复制代码运行效果：
- 控制台打印：console
<body>
<script>
window.console.log("你是电！");
// window 是全局变量，可以省略
console.log("我是光！")
</script>
</body>
复制代码运行结果：
- 间隔一段时间操作一次：setInterval
语法格式：
setInterval("函数",间隔的毫秒数);
复制代码例如：
<script>
setInterval(
function (){
document.writeln("我爱你中国！");
}
,300);
</script>
复制代码运行结果：
- 延迟一段时间之后再操作：setTimeout()
语法格式：
setTimeout("函数",延迟的毫秒数);
复制代码例如：
<script>
setTimeout(
function () {
document.writeln("床前明月光，<br>");
}
, 1000);
setTimeout(
function () {
document.writeln("疑是地上霜。<br>");
}
, 2000);
setTimeout(
function () {
document.writeln("举头望明月，<br>");
}
, 3000);
setTimeout(
function () {
document.writeln("低头思故乡。<br>");
}
, 4000);
</script>
复制代码运行结果：
- window.onload
该方法用于在网页加载完毕后立刻执行的操作，即当 html 加载完毕后，立刻执行某个方法等。
因为页面中的代码一般情况下按照从上到下，从左到右的顺序执行。
如果 script 标签在元素标签的前面，这时候 html 页面还没有加载完毕，还没有构建 DOM 树形模型。那么 JS 代码就获取不到元素节点，就会报错。例如：
<body>
<script>
var p = document.getElementById("p1");
document.write(p.innerText);
</script>
<p id="p1">改革春风吹满地，中国人民真争气！</p>
</body>
复制代码所以当使用 js 代码获取页面中的元素节点时，如果 script 标签在元素的前面，需要加 window.onload。如果 script 在元素节点后面，就不需要加 window.onload。
使用方法：
- 把 JS 中要执行的程序放在如下代码中：
window.onload = function () {
要执行的代码;
}
复制代码例如：
<body>
<script>
window.onload = function () {
var p = document.getElementById("p1");
document.write(p.innerText);
}
</script>
<p id="p1">改革春风吹满地，中国人民真争气！</p>
</body>
复制代码- 在 body 标签里面执行：
先将要执行的代码放到一个函数里面，然后在 body 标签使用 onload 加载该方法，例如：
<body onload="getText()">
<script>
function getText() {
var p = document.getElementById("p1");
document.write(p.innerText);
}
</script>
<p id="p1">改革春风吹满地，中国人民真争气！</p>
</body>
复制代码3.3.2 doument 对象
document 对象是 window 的子对象，我们在前面获取元素节点的时候讲过，这里就不再赘述了。
3.3.3 loation 对象
location 对象是 window 的子对象，包含有关当前 URL 的信息。
我们可以通过 window.location 属性来访问，当然也可以省略 window。
- 跳转到新页面
语法格式：
window.location= "新页面";
window.location.href="新页面";
复制代码例如：
<body>
<script>
window.location= "https://www.baidu.com/";
</script>
</body>
复制代码- 刷新页面
location.reload();
复制代码4. 输出语句
我们在前面讲过使用 alert 可以弹出信息，使用 innerHTML 可以修改文本信息，使用 console.log() 在浏览器控制台打印信息。
其实 JS 还可以使用 write 方法将内容直接写到 HTML 页面中，语法格式：
document.write("内容");
复制代码例如：
<script>
document.write("<h2>改革春风吹满地，</h2>");
document.write("<h2>中国人民真争气。<h2>");
</script>
复制代码运行结果：
5. 数据类型
JS 中主要包含一下几种数据类型：
| 数据类型 | 描述 |
|---|---|
| String | 字符串 |
| Number | 数字 |
| Boolean | 布尔 |
| Null | 空值 |
| Undefined | 未定义 |
| Object | 对象 |
| Array | 数组 |
| Function | 函数 |
6.对象
6.1 属性
前面我们在学 java 的时候讲过类与对象的关系，JS 中的对象和 JAVA 中的对象是一样的，都拥有属性和方法。
在 JS 中，对象也是一个变量。对象可以包含多个属性，每个属性也是一个变量。属性用 name:value 表示。例如：
var user = { name: "Jay", age: "42", job: "singer" };
复制代码有了对象，那我们如何获取对象的属性呢？有两种方式：
- 方式一
对象.属性名
复制代码例如：
<script>
var person = { name: "Jay", age: "42", job: "singer" };
document.write("<h3>姓名："+person.name+"</h3>");
document.write("<h3>年龄："+person.age+"</h3>");
document.write("<h3>职业："+person.job+"</h3>");
document.write("<h1>5年都没发新专辑了！！</h1>");
</script>
复制代码运行结果：
- 方式二
对象["属性名"];
复制代码例如：
<script>
var person = { name: "Jay", age: "42", job: "singer" };
document.write("<h3>姓名："+person["name"]+"</h3>");
</script>
复制代码运行结果:
6.2 方法
除了属性，对象还可以拥有方法，创建对象方法的语法格式：
方法名:function(){ 代码 }
复制代码例如：
var person = {
firstName: "Kobe",
lastName : "Bryant",
job:"basketball star",
fullName : function()
{
return this.firstName + " " + this.lastName;
}
};
复制代码访问对象的方法：
对象.方法名()
复制代码例如：
<script>
var person = {
firstName: "Kobe",
lastName: "Bryant",
job: "basketball star",
fullName: function () {
return this.firstName + " " + this.lastName;
}
};
document.write("完整名字："+person.fullName());
</script>
复制代码运行结果：
7. 函数
JS 中的函数其实就是方法，它可以被重复调用。当调用函数时，会执行函数中的代码块。
函数的语法格式：
function 函数名(参数)
{
// 代码
}
复制代码注： 关键字 function 必须小写。
调用函数的语法格式：
函数名(参数);
复制代码例一：调用无参无返回值函数
<script>
// 1. 定义无参数无返回值函数
function confirmInfo() {
confirm("杰伦你明年要发新专辑了吗？");
}
// 2. 调用函数
confirmInfo();
</script>
复制代码运行结果：
例二：调用有参数函数
<script>
// 1. 定义有参数无返回值的函数
function printInfo(name) {
document.write("一个叫<span style='color:red;font-size:20px'>"+name+"</span>的歌手竟然5年不发新专辑！");
}
// 2. 调用函数
printInfo("周杰伦");
</script>
复制代码运行结果：
例三：调用有返回值函数
<script>
// 1. 定义有参数有返回值的函数
function printInfo(name) {
return name;
}
// 2. 调用函数
var singer = printInfo("周杰伦");
document.write("一个叫<h1 style='color:red;font-size:20px'>"+singer+"</h1>的歌手竟然5年不发新专辑！");
</script>
复制代码运行结果：
8. 内置函数
除了自定义函数，JS 还内置一些函数。
8.1 日期函数
日期函数用于处理日期和时间。
例如：
<script>
var d = new Date();
// 获取当年年份
var year = d.getFullYear();
// 获取当前月份，js 中月份是个特殊值, 介于0 ~11
var month = d.getMonth() + 1;
// 获取当前天数
var day = d.getDate();
// 返回星期几
var week = d.getDay();
// 返回小时
var hour = d.getHours();
// 返回分钟
var minute = d.getMinutes();
// 返回秒
var second = d.getSeconds();
// 返回当前时间的时间戳
var time = d.getTime();
document.write("中国标准时间："+d+"<br>");
document.write("时间戳："+time+"<br>");
document.write(year + "-" + month + "-" + day + " " + hour + ":" + minute+":"+second+" 星期 "+week);
// 刷新页面
location.reload();
</script>
复制代码运行结果：
8.2 数组函数
创建数组方式：
方式一：
var animals = new Array();
animals[0] = "cat";
animals[1] = "dog";
animals[2] = "pig";
复制代码方式二：
var animals = new Array("cat","dog","pig");
复制代码方式三：
var animals = ["cat","dog","pig"];
复制代码下面用案例讲解 JS 中操作数组的方法：
8.2.1 返回数组长度
var arr= [1,12,8,30];
var len = arr.length;
console.log(len);//结果为4
复制代码8.2.2 将数组合并成字符串
var arr= [1,12,8,30];
var str = arr.join(",");
console.log(str)
复制代码打印结果：
8.2.3 添加元素：push 和 unshift
- push 是在数组尾部添加元素
- unshift 是在数组头部添加元素
var arr = [1,12,8,30];
arr.push(99);
arr.unshift(100);
console.log(arr);
复制代码打印结果：
8.2.4 替换元素：splice
- 第一个参数，要替换的元素的下标。注：数组下标从0开始
- 第二个参数：替换的元素的个数，从第一个下标开始
- 第三个参数：要替换成什么
var arr = [1,12,8,30];
arr.splice(2,1,"66");
console.log(arr);
复制代码打印结果：
8.2.5 删除元素：pop 和 splice
- pop 是删除数组最后一个元素
- splice 是根据元素下标删除元素，第一个参数：要删除的元素的初始坐标，第二个参数：要删除的元素个数
var arr = [1,12,8,30];
arr.pop();// 删除 30
arr.splice(0,1);// 删除 1
console.log(arr);
复制代码打印结果：
8.2.6 数组倒序
var arr = [1,12,8,30];
arr.reverse();
console.log(arr);
复制代码打印结果：
8.2.7 过滤条件返回新的数组：filter
var arr = [1,12,8,30];
const newArr = arr.filter(item => item >2);
console.log(arr);
console.log(newArr);
复制代码打印结果：
8.2.8 合并多个数组：concat
var a = [1,12,8,30];
var b = [666,777];
var c = a.concat(b);
console.log(c);
复制代码打印结果：
8.2.9 返回指定数组：slice
- slice 不会改变原来数组的值
- 第一个参数：要返回的数组的初始坐标
- 第二个参数：返回数组元素的个数
var arr = [1,12,8,30];
var newArr = arr.slice(0,2);
console.log(arr);
console.log(newArr);
复制代码打印结果：
9. 事件
事件是发生在 HTML 页面上的事情，我们可以使用 JS 来处理这些事件。
事件可以是浏览器的行为，也可以是用户的行为。例如浏览器加载页面时、用户点击按钮时都可以触发一些事件。
注： JS 中触发一个事件之后，一般会调用函数执行其中的一些代码。
下面讲一下常见的 HTML 事件：
9.1 点击事件：onclick
<body>
<button onclick="alertInfo()">点击弹出信息</button>
<script>
function alertInfo(){
alert("希望你在2022年好事成真！");
}
</script>
</body>
复制代码运行结果：
9.2 元素改变：onchange
<body>
<label >姓名：</label> <input type="text" value="张无忌" onchange="alertInfo(this.value)">
<script>
function alertInfo(value){
alert(value);
}
</script>
</body>
复制代码运行结果：
9.3 鼠标悬浮：onmouseover
当鼠标移动到该区域，就会触发该事件。
<body>
<p onmousemove="alertInfo()">女朋友你把鼠标移过来！</p>
<script>
function alertInfo(){
alert("女朋友我爱你！");
}
</script>
</body>
复制代码运行结果：
9.4 鼠标移开：onmouseout
当鼠标离开该区域，就会触发该事件。
<body>
<p onmouseleave="alertInfo()">女朋友可千万别把鼠标移走！</p>
<script>
function alertInfo(){
alert("爱我别走！");
}
</script>
</body>
复制代码运行结果:
9.5 用户按下键盘按键：onkeydown
<body>
<input type="text" name="" id="" onkeydown="alertInfo()">
<script>
function alertInfo(){
alert("祝你考研上岸！考公上岸！暴富!");
}
</script>
</body>
复制代码9.6 失去焦点：οnblur
鼠标离开该输入框就会触发该事件。
<body>
<input type="text" name="" id="" onblur="alertInfo()">
<script>
function alertInfo(){
alert("祝你考研上岸！考公上岸！暴富!");
}
</script>
</body>
复制代码运行结果：
9.7 获取焦点：οnfοcus
当鼠标点击输入框就会触发该事件
<body>
<input type="text" value="测试获取焦点" onfocus="testOnfocus()"/>
<script>
function testOnfocus(){
alert("祝你考研上岸！考公上岸！暴富!");
}
</script>
</body>
复制代码运行结果：
10. JSON
JSON 是一种格式，通常用于服务端向前端传递数据 。
JSON 语法规则：
- 数据为 键/值 对
- 数据由逗号分隔
- 大括号保存对象
{"name":"jay", "job":"singer"},
复制代码- 方括号保存数组
[
{"name":"jay", "job":"singer"},
{"name":"jj", "job":"singer"}
]
复制代码11. JS 小案例：轮播图
轮播图就是隔一段时间就会切换一张图片。
所以我们要想做轮播图，只需要三步：
- 页面先初始化一张照片
- 调用时间间隔函数 setInterval，然后修改图片的 src 属性的值
- 当显示最后一张照片时，就替换成第一张照片
例如：
<body>
<!-- 1.初始化一张照片 -->
<img style="width:600px;height:350px" src="image/1.jpg" width="100%" id="img1" />
<script>
// 2. 每隔一段时间调用修改图片的方法
setInterval("changeImg()", 1000);
var i = 0
// 3. 修改图片
function changeImg() {
i++;
// 修改图片路径
document.getElementById("img1").src = "image/" + i + ".jpg";
// 当为最后一张图片时，就替换成第一张图片
if (i == 3) {
i = 0;
}
}
</script>
</body>
复制代码运行结果：