JavaScript 客户端脚本语言
-
JavaScript发展史
-
JavaScript介绍
-
基本使用
-
事件
-
选择器
-
JS操作HTML
-
数据类型：字符串、数组、对象
-
操作符、流程控制
-
函数
1 JavaScript 发展史
1.1 JavaScript 介绍
JavaScript（简称JS）：是一种轻量级客户端脚本语言，通常被直接嵌入 HTML 页面，在浏览器上执行。
JavaScript的主要用途：
-
使网页具有交互性，例如响应用户点击，给用户提供更好的体验
-
处理表单，检验用户输入，并及时反馈提醒
-
浏览器与服务端进行数据通信，主要使用 Ajax 异步传输
-
在网页中添加标签，添加样式，改变标签属性等
2 JavaScript基本使用
1、内部方式（内嵌样式），在body标签中使用
<script type="text/javascript">
<!--
javaScript语言
-->
</script>2、外部导入方式（推荐），在head标签中使用，这是单独将 js 文件独立到一个文件中被，然后直接引用即可
<script type="text/javascript" src="my.js"></script>示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试js</title>
</head>
<body>
<div>
测试
</div>
<script>
// 定义 name 变量，采用 ; 号结尾
var name = "hello";
// alert 内置警告弹窗的方法，这里是将 name 变量进行输出
</script>
</body>
</html>可以看到已经弹出 hello
然后当我们点击确定以后就会出现在 div 中写入的测试
2.1 事件
在我们日常的前端开发中都是以事件为导向来编写 js
事件：就是指在 HTML 中发生一个什么样的行为，然后做什么样的事。例如点击按钮，点击后做相应操作，例如弹出一句话
JS 就是更具这样的一个事件来做操作的
演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试js</title>
</head>
<body>
<div>
<button onclick="alert('你好前端!')">普通按钮</button>
</div>
</body>
</html>当我们点击普通按钮，就会弹出你好前端
-
onclick：是一个常用CSS事件属性，当元素有鼠标点击时触发JS脚本。 -
alert()：是一个JS内置函数，在浏览器输出警告框。一般于代码测试，可判断脚本执行位置或者输出变量值。
一般两种情况会使用到 js：
- 访问页面时，进行页面准备工作，例如数据渲染从后端获取数据
- 点击某个元素的时候才会使用到 js，并实现相应的操作，例如表单的提交
2.2 选择器
想操作元素，必须先找到元素，主要通过以下三种方法：
-
通过id（常用）
-
通过类名
-
通过标签名
2.2.1 通过 ID 查找元素
这里通过 ID 查找元素，当他点击元素的时候就会触发一个事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试js</title>
</head>
<body>
<div>
<button id="btn">点我</button>
</div>
<script>
// 通过 id 获取元素,并将返回值传递给 x
var x = document.getElementById('btn');
// 调用 onclick 点击动作，并绑定给 x 元素，赋值一个匿名函数
x.onclick = function () {
// 逻辑动作：输出 hello
alert('hello !')
}
</script>
</body>
</html>当我点击点我按钮的时候就会弹出 hello
2.2.2 通过标签名
使用标签名的方式并不是很多，一般我都是采用 id 的方法实现
示例：通过标签名
<div id="main">
<p>Hello world！1</p>
<p>Hello world！2</p>
<p>Hello world！3</p>
</div>
<script type="text/javascript">
var x = document.getElementById(“main”); //获取id为main的元素
var y = x.getElementsByTagName("p"); // 返回的是一个集合，下标获取
document.write(“div中的第二段文本是：” + y[1].innerHTML); //向当前文档写入内容
</script>2.3 JS 操作 HTML
插入内容：
document.write("<p>这是JS写入的段落</p>"); // 向文档写入HTML内容
x = document.getElementById('demo'); // 获取id为demo的元素
x.innerHTML="Hello" // 向元素插入HTML内容改变标签属性：
document.getElementById("image").src="b.jpg" // 修改img标签src属性值改变标签样式：
x = document.getElementById("p") //获取id为p的元素
x.style.color="blue" //字体颜色2.3.1 示例一：插入内容
当我点击这个按钮的时候我向 p 标签中添加一个类，然后在 p 这个标签中定义一个 ID ，而我们要实现的就是等会往 pp id 中放入内容，然后当我们点击点我这个按钮时就会自动将我们定义的内容显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试js</title>
</head>
<body>
<div>
<button id="btn">点我</button>
<p id="pp"></p>
</div>
<script>
// 通过 id 获取元素,并将返回值传递给 x
var x = document.getElementById('btn');
// 调用 onclick 点击动作，并绑定给 x 元素，赋值一个匿名函数
x.onclick = function () {
// 因为获取 p 标签是在 div 中的 id = pp
var p = document.getElementById('pp');
// p.innerHTML 可以理解为就是向元素设置内容
p.innerHTML="这是一个段落"
}
</script>
</body>
</html>未点击的情况
点击之后，就会弹出"这是一个段落"
2.3.2 示例二：修改标签属性
改变标签属性：
document.getElementById("image").src="b.jpg" // 修改img标签src属性值这里我将导入两张图片。默认显示是第一个，然后我想让他在显示上面要有修改，那么我们就能够通过 js 实现
实现的效果就是，当我们点击按钮的时候就会实现图片的更换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试js</title>
</head>
<body>
<div>
<button id="butimg">点我更换图片</button>
<!-- 这里导入图片，并且给该 img 标签添加 id -->
<img src="images/testIMG.png" id="test">
</div>
<script>
//
var x = document.getElementById("butimg");
x.onclick = function () {
// 获取 img 标签的 test id
var y = document.getElementById("test");
// 当上面点击了 点我更换图片 的标签时就会直接更换为 钻戒 的图片，改变 img 标签的 src 属性
y.src="images/钻戒.jpg"
}
</script>
</body>
</html>未点击前
当我们点击按钮后就会变为钻戒
2.3.3 示例三：改变标签样式
x = document.getElementById("p") // 获取id为p的元素
x.style.color="blue" // 字体颜色代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试js</title>
</head>
<body>
<div>
<button id="but1">点我显示 p 标签</button>
<p id="pp"></p>
<button id="but2">点我更换 p 标签颜色</button>
</div>
<script>
// 通过获取 button 标签的 but1 id 来显示 p 标签的内容
var x = document.getElementById("but1");
x.onclick = function () {
// 获取 p 标签的 pp id 然后将 这是用来改变颜色演示的 p 标签 进行渲染
var p = document.getElementById("pp");
p.innerHTML = "这是用来改变颜色演示的 p 标签"
}
// 当点击 but2 的 id 按钮是就会直接触发 p.style.color = "blue" 动作，将字体变为蓝色
var x1 = document.getElementById("but2");
x1.onclick = function () {
var p = document.getElementById("pp");
p.style.color = "blue"
}
</script>
</body>
</html>1 先点击显示 p 标签
2 点击更换 p 标签颜色字体变为蓝色
2.4 数据类型：字符串
在 JS 中，数据类型有：字符串、数字、布尔、数组、对象、Null、Undefined
字符串处理：
var s = "hello world";
s.length; // 字符串长度
s[4] // 根据索引获取值
s.replace('h','H'); // 替换某个字符
s.split("分隔符") // 分隔为数组
s.match("w") // 找到返回匹配的字符，否则返回null字符串拼接：“+”
2.4.1 示例一：字符串处理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试 js</title>
</head>
<body>
<div>
</div>
<script>
// 字符串处理,定义 s 变量为字符串值为 hello world
var s = "hello world!"
a = s.length; // 输出字符串长度
b = s[4]; // 输出下标为 4 的索引，这里为 o
c = s.replace('h','H'); // 字符串替换，将 h 替换为 H
d = s.split("分隔符号"); // 分隔为数组
e = s.match("w"); // 匹配 s 变量字符串中是否包含 w ，如果没有包含则输出 null，匹配成功就返回数组
// 通过 console.log 方法将 a b c d e 变量输出到控制台
console.log(a,b,c,d,e)
</script>
</body>
</html>通过浏览器访问，并点击 F12 查看 console
12 = 当前 s 变量的字符串长度为 12
o = s 字符串下标为 4 的字符
Hello world! = 可以看到 h 已经替换为 H
['w', index: 6, input: 'hello world!', groups: undefined] = 匹配字符串成功并且索引为 6
2.4.2 示例二：字符串拼接
在这个案例中，我想把字符串长度进行拼接就需要看下面案例，在 js 中通过 + 实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试 js</title>
</head>
<body>
<div>
</div>
<script>
// 字符串处理,定义 s 变量为字符串值为 hello world
var s = "hello world!"
a = s.length; // 输出字符串长度
b = s[4]; // 输出下标为 4 的索引，这里为 o
c = s.replace('h','H'); // 字符串替换，将 h 替换为 H
d = s.split("分隔符号"); // 分隔为数组
e = s.match("w"); // 匹配 s 变量字符串中是否包含 w ，如果没有包含则输出 null
// 通过 console.log 方法将 a b c d e 变量输出到控制台
console.log(a,b,c,d,e)
// 字符串拼接
console.log("字符串长度: "+a )
</script>
</body>
</html>
2.5 数据类型：数组
数组：是一个序列的数据结构。
应用场景：
临时数据存储，从服务器端获取 json 数据，转为 js 对象后里面就包含了数组，然后就直接按照下面方法进行操作
定义：
var computer = new Array();
或
var computer = ["主机","显示器","键盘","鼠标"]
向数组添加元素：
computer[0]="主机";
computer[1]="显示器";
computer[2]="键盘"; 或
array.push("鼠标")
通过索引获取元素：
computer[2]
2.5.1 示例一：定义数组
先初始化空数组然后在添加元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试 js</title>
</head>
<body>
<div>
</div>
<script>
// 定义空数组
arr = new Array();
// 往数组中添加数据
arr.push('主机');
arr.push('显示器');
// 在浏览器控制器输出 arr 数组
console.log(arr);
</script>
</body>
</html>可以看到已经将数组输出
在初始化的同时直接添加元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试 js</title>
</head>
<body>
<div>
</div>
<script>
// 定义 arr 的同时直接赋值
newArr = ['新主机','新键盘','新显示器']
// 在浏览器控制器输出 arr 数组
console.log(newArr);
</script>
</body>
</html>可以看到这就是初始化的同时直接赋值
2.5.2 示例二：替换元素
这里我想替换原有的下标的元素就直接指定对应下标即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试 js</title>
</head>
<body>
<div>
</div>
<script>
// 定义 arr 的同时直接赋值
newArr = ['新主机','新键盘','新显示器'];
// 直接替换 [0] 的下标
newArr[0] = "比新主机还新"
// 在浏览器控制器输出 arr 数组
console.log(newArr);
</script>
</body>
</html>
2.5.3 示例三：获取元素
直接通过下标获取
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试 js</title>
</head>
<body>
<div>
</div>
<script>
// 定义 arr 的同时直接赋值
newArr = ['新主机','新键盘','新显示器'];
// 直接输出 2 的下标
console.log(newArr[2]);
</script>
</body>
</html>
2.6 数据类型：对象
和 golang 中的 map 类似
对象：是一个具有映射关系的数据结构。用于存储有一定关系的元素。
格式：d = {'key1':value1, 'key2':value2, 'key3':value3}
注意：对象通过 key 来访问 value，因此字典中的 key 不允许重复。
定义：
var user = {
name:"老张",
sex : "男",
age : "30",
}通过键查询值：
n = user.name;
或
sex = user['sex'];
增加或修改：
user.height = "180cm"
user['height'] = "180cm"2.6.1 示例一：定义对象并操作
定义一个对象用于保存用户信息
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试 js</title>
</head>
<body>
<div>
</div>
<script>
var user = {
name:"老张",
sex : "男",
age : "30",
};
// 打印至浏览器终端中
console.log(user)
</script>
</body>
</html>
2.6.2 示例二：向对象添加数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试 js</title>
</head>
<body>
<div>
</div>
<script>
var user = {
name:"老张",
sex : "男",
age : "30",
};
// 向 user 对象中添加一个 key = city value = 北京 的新数据
user['city']= '北京';
// 打印至浏览器终端中
console.log(user)
</script>
</body>
</html>添加成功
2.6.3 示例三：获取指定的值
通过指定 key 获取对应 value
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试 js</title>
</head>
<body>
<div>
</div>
<script>
var user = {
name:"老张",
sex : "男",
age : "30",
};
// 指定获取 name 的 key
console.log(user.name)
</script>
</body>
</html>
2.6.4 示例四：修改指定的key
这里通过指定的 key ，并将对应的 value 修改为我们想要的新值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试 js</title>
</head>
<body>
<div>
</div>
<script>
var user = {
name:"老张",
sex : "男",
age : "30",
};
// 指定修改 user.name
user.name = "新老张"
// 指定获取 name 的 key
console.log(user.name)
</script>
</body>
</html>
2.6.5 示例五：嵌套自定义类型
这里我将或在 user 的这个对象中嵌套一个数组，当然这种方式还可以嵌套其他的数据类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试 js</title>
</head>
<body>
<div>
</div>
<script>
// 定义数组
arr = ['数组1','数组2','数组3']
var user = {
name:"老张",
sex : "男",
age : "30",
};
// 往 user 对象中嵌套数组
user['arr'] = arr
// 获取 user
console.log(user)
// 获取指定数组
console.log("获取下标为 2 的数组："+user.arr[1])
</script>
</body>
</html>
2.7 操作符
操作符：
一个特定的符号，用它与其他数据类型连接起来组成一个表达式。常用于条件判断，根据表达式返回True/False采取动作。
2.8 条件判断
if条件判断：判定给定的条件是否满足（True或False），
根据判断的结果决定执行的语句。
语法：
if (表达式) {
<代码块>
} else if (表达式) {
<代码块>
} else {
<代码块>
}2.8.1 示例一：如何在 html 中使用 if
在这个例子中我将实现开灯和关灯
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试 js</title>
</head>
<body>
<div>
<!-- 先获取图片默认是关灯状态 -->
<img src="./images/off.png" alt="" id="deng">
<!-- 设置 onclick 为 changeImage 函数并且写 on 和 off ，用于触发 changeImage 函数 -->
<button onclick="changeImage('on')">开灯</button>
<button onclick="changeImage('off')">关灯</button>
</div>
<script>
// 定义函数，用于接收 status 参数
function changeImage(status) {
// 通过 id 获取 img 标签，用于下面的判断实现修改状态
x = document.getElementById("deng")
// 如果状态为 on 这就是开灯，从而调用 ./images/on.png 图片
if (status == "on"){
x.src = './images/on.png'
// 如果状态为 off 这就是关灯，从而调用 ./images/off.png 图片
} else if (status == "off") {
x.src = './images/off.png'
}
}
</script>
</body>
</html>默认为关灯状态
点击开灯
点击关灯
2.9 循环
for循环：一般用于遍历数据类型的元素进行处理，例如字符串、数组、对象。
语法：
for (<变量> in <序列>) {
<代码块>
}2.9.1 示例：遍历数组
// 定义数组
var computer = ["主机","显示器","键盘","鼠标"];
方式1：
for(i in computer) {
console.log(computer[i]) // 使用索引获取值
}
方式2：
computer.forEach(function (e) {
console.log(e)
})2.9.1.1 方式一
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试 js</title>
</head>
<body>
<div>
</div>
<script>
// 定义数组
var computer = ["主机","显示器","键盘","鼠标"]
// i 获取 computer 中的元素下标
for (i in computer) {
// 输出对应的每个下标元素
console.log("i="+i,computer[i])
}
</script>
</body>
</html>
2.9.1.2 方式二
通过匿名函数的写法实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试 js</title>
</head>
<body>
<div>
</div>
<script>
// 定义数组
var computer = ["主机","显示器","键盘","鼠标"]
// 通过匿名函数实现遍历，这里将 computer 数组中的元素传递给了 i
computer.forEach(function (i) {
console.log(i)
})
</script>
</body>
</html>
2.9.2 示例：遍历对象
其实遍历对象和遍历数组差不多的
var user = {name:"老张",sex:"男",age:"30"};
方式1：
for(let k in user) {
console.log(k + ":" + user[k])
}
方式2：
Object.keys(user).forEach(function (k) {
console.log(k + ":" + user[k])
})2.9.2.1 方式一
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试 js</title>
</head>
<body>
<div>
</div>
<script>
// 定义对象
var user = {
name:"老张",
age :"26",
sex:"男"
}
// k 等于 user 中获取的对象 key
for (k in user) {
// 浏览器终端输出
console.log(k + ":" + user[k])
}
</script>
</body>
</html>
2.9.2.2 方式二
这种方法和遍历数组的第二种方法很像
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试 js</title>
</head>
<body>
<div>
</div>
<script>
// 定义对象
var user = {
name:"老张",
age :"26",
sex:"男"
}
// 通过 object.keys 内置方法调用匿名函数来实现
Object.keys(user).forEach(function (k) {
console.log(k + ":" + user[k])
})
</script>
</body>
</html>
2.10 函数：定义与调用
函数：是指一段可以直接被另一段程序或代码引用的程序或代码。在编写代码时，常将一些常用的功能模块编写成函数，放在函数库中供公共使用，可减少重复编写程序段和简化代码结构。
语法：
function 函数名称(参数1, 参数2, ...) {
<代码块>
return <表达式>
}2.10.1 函数参数：接收参数
示例：
<button type="button" onclick="myFunc('老张', '30')">点我</button>
<script type="text/javascript">
function myFunc(name, age) {
alert("欢迎" + name + ", 今年" + age);
}
</script>2.10.2 函数：匿名函数与箭头函数
匿名函数与箭头函数：没有名字的函数，一般仅用于单个表达式。
一般匿名函数或者箭头函数都是用于直接被别的方法接收
示例：
<script type="text/javascript">
// 普通函数
function sum1(x,y) {
return x+y;
}
// 匿名函数
sum2 = function(x,y) {
return x+y;
}
// 箭头函数，相比匿名函数又简化了很多
sum3 = (x,y) => {
return x+y;
}
console.log(sum1(1,2)) // 3
console.log(sum2(3,4)) // 7
console.log(sum3(5,6)) // 11
</script>3 window对象：location属性处理URL
location 是 js 中内置的属性
示例：刷新按钮
<button type="button" onclick="location.reload()">刷新当前页面</button>
<!-- 直接请求的就是 location.href 内置函数 -->
<button type="button" onclick="location.href=location.href">重新请求当前页面</button>
<!-- 直接跳转到百度 -->
<button type="button" onclick="location.href='http://www.baidu.com'">请求别的页面</button>