JavaScript(JS)
| 组成 |
说明 |
| ECMAScript |
规定了JS基础语法核心知识，包括变量、数据类型、流程控制、函数、对象等。 |
| BOM |
浏览器对象模型，用于操作浏览器本身，如：页面弹窗、地址栏操作、关闭窗口等。 |
| DOM |
文档对象模型，用于操作HTML文档，如：改变标签内的内容、改变标签内字体样式等。 |
JS核心语法
引入方式
- 内部脚本
1
2
3
4
5
6
7
8
| <body></body>
<script>
alert("hello world");
</script>
</body>
|
- 外部脚本（JS代码放在外部JS文件中
demo.js
1
| alert('Hello JavaScript');
|
引入到HTML页面中
1
2
3
| <body>
<script src="demo.js"></script>
</body>
|
示例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS-引入方式</title>
</head>
<body>
<script src="js/demo.js"></script>
</body>
</html>
|
基础语法
- 变量&常量
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| <script>
const PI = 3.14;
console.log(PI);
</script>
|
- 数据类型（基本数据类型和引用数据类型）
| 基本数据类型 |
说明 |
number |
数值类型，包括整数、浮点数和特殊值 NaN（Not a Number）。 |
boolean |
布尔类型，只有两个值：true 和 false。 |
null |
表示“空值”或“无对象”，是一个表示“无”的特殊对象类型。 |
undefined |
表示变量已声明但未赋值，是变量的默认初始值。 |
string |
字符串类型，可用单引号 '、双引号 " 或反引号 `，推荐使用单引号。 |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
| <script>
let name = 'Tom';
let age = 18;
console.log('我是'+name+', 我今年'+age+'岁');
console.log(`我是${name}, 我今年${age}岁`);
</script>
|
- 函数（function）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
| <script>
let add = (a,b) => {
return a + b;
}
let result = add(1000,2000);
console.log(result);
</script>
|
- 自定义对象（object）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <script>
let obj = {
name: '张三',
age: 18,
sayName: function(){
console.log(this.name);
}
}
obj.sayName();
</script>
|
json
概念:JavaScript 0biect Notation，JavaScript对象标记法(JS对象标记法书写的文本)
由于其语法简单，层次结构鲜明，现多用于作为数据载体，在网络中进行数据传输。
1
2
3
4
5
6
7
8
9
10
11
12
| <script>
let person = {
name: 'itcast',
age: 18,
gender: '男'
}
alert(JSON.stringify(person));
let personJson = '{"name": "heima", "age": 18}';
alert(JSON.parse(personJson).name);
</script>
|
DOM（文档对象模型）
| 节点类型 |
说明 |
Document |
整个文档对象，DOM 的根节点，代表整个 HTML 或 XML 文档 |
Element |
元素节点，表示页面上的各类 HTML 元素（如 <div>、<p> 等） |
Attribute |
属性节点，表示元素的属性（如 class="box" 中的 class） |
Text |
文本节点，表示元素或属性中的纯文本内容 |
Comment |
注释节点，表示文档中的注释内容（<!-- 注释内容 -->） |
DOM参考文档：https://www.w3school.com.cn
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS-DOM</title>
</head>
<body>
<h1 id="title1">11111</h1>
<h1>22222</h1>
<h1>33333</h1>
<script>
let hs = document.querySelectorAll('h1');
hs[0].innerHTML = '修改后的文本内容';
</script>
</body>
</html>
|
JS事件监听
语法：事件源.addEventListener(‘事件类型’, 事件触发执行的函数)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS事件</title>
</head>
<body>
<input type="button" id="btn1" value="点我一下试试1">
<input type="button" id="btn2" value="点我一下试试2">
<script>
document.querySelector('#btn1').addEventListener('click', () => {
console.log('试试就试试~~');
});
document.querySelector('#btn1').addEventListener('click', () => {
console.log('试试就试试22~~');
});
document.querySelector('#btn2').onclick = () => {
console.log('试试就试试~~');
}
document.querySelector('#btn2').onclick = () => {
console.log('试试就试试22~~');
}
</script>
</body>
</html>
|
就这样吧，匆忙结束…
