JavaScript

# 1. JavaScript 用途

JavaScript（简称 JS ）：是一种轻量级客户端脚本语言，通常被直接嵌入 HTML 页面，在浏览器上执行。HTML、CSS只能写出静态效果，JavaScript可以使页面动起来，并且可以添加一些用户交互交互的行为，例如：模态对话框、全选反选、可折叠菜单等。

JavaScript 的主要用途：

使网页具有交互性，例如响应用户点击，给用户提供更好的体验；
处理表单，检验用户输入，并及时反馈提醒；
浏览器与服务端进行数据通信，主要使用Ajax异步传输；
在网页中添加标签，添加样式，改变标签属性等。

JavaScript，是一门编程语言，而浏览器内置了JavaScript语言的解释器，所以JavaScript代码在浏览器上就可以运行。

DOM，（Document Object Model）是指文档对象模型，通过它，可以操作HTML文档的相关功能，例如：对标签内容进行删除和替换等。

BOM，（Browser Object Model）是指浏览器对象模型，通过他，可以操作浏览器相关的功能，例如：浏览器设置定时器，浏览器定时刷新页面。

他们三者之间的关系可以简单理解为：JavaScript 是编程语言，DOM 和 BOM 是两个模块，利用JavaScript语言再结合DOM、BOM模块可以让页面出现动态的效果。

# 2. JavaScript 介绍

注意：JavaScript和Java没有任何关系。

# 2.1 JS代码的存在形式

常见的JavaScript代码有两种存在形式：

Script代码块，只能在当前页面使用。

应用场景：所有功能仅当前页面需要（如果代码太多也推荐放入js文件）。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>JavaScript学习</title>
        <script type="text/javascript"> // 内部编写JavaScript代码</script>
    </head>
    <body>
    </body>
</html>

1
2
3
4
5
6
7
8
9
10

独立js文件，可以被多个引入之后使用。

应用场景：多个页面公共功能可以放入文件，避免重复编写。

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>JavaScript学习</title>
		<script type="text/javascript" src="JavaScript文件路径"></script>
	</head>
<body>

</body>
</html>

1
2
3
4
5
6
7
8
9
10
11

推荐位置

JS代码库和引入文件的存放位置也是有讲究的，推荐把js代码都放在body标签的底部。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript学习</title>
<!-- CSS代码推荐位置 -->
<link rel="stylesheet" href="CSS文件路径">
<style>
/* 内部编写CSS代码 */
</style>
</head>
<body>

<h1>HTML标签和样式</h1>
<!-- JavaScript代码推荐位置 -->
<script type="text/javascript" src="JavaScript文件路径"></script>
<script type="text/javascript">
// 内部编写JavaScript代码
</script>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

这是为什么呢？因为浏览器在解析HTML、CSS、JavaScript文件时，是按照从上到下逐步解释并执行，如果JavaScript代码或文件放在head中可能会有因为耗时（网络请求或代码）导致页面显示速度太慢，影响用户感受，例如：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript学习</title>
<script src="https://www.google.com"></script>
<script>
        alert(123);
</script>
</head>
<body>

<h1>HTML标签和样式</h1>

</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

注意：JS放在下面可以让用户快速看到页面上的 HTML和CSS效果，但JS的效果必须还要等耗时操作处理完才能用。

# 2.2 变量

JavaScript中变量的声明是一个非常容易出错的点，局部变量必须一个 var 开头，如果未使用var，则默认表示声明的是全局变量。

<script type="text/javascript">
// 全局变量
    name = '张三';

function func(){
// 局部变量
var age = 18;
// 全局变量
        gender = "男"
}
    func();
    console.log(gender); // 男
    console.log(name); // 张三
    console.log(age); // 报错：age是fun的局部变量，外部无法获取。
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

提醒：js中单行注释用 // ；多行注释用 /* */

# 3. 常见数据类型

# 3.1 数字 Number

JavaScript中不区分整数值和浮点数值，JavaScript中所有数字均用浮点数值表示。

// 声明
var page = 111;
var age = Number(18);
var a1 = 1,a2 = 2, a3 = 3;
// 转换
parseInt("1.2");  // 将某值转换成数字，不成功则NaN
parseFloat("1.2");  // 将某值转换成浮点数，不成功则NaN


/*
NaN，非数字。可使用 isNaN(num) 来判断。
Infinity，无穷大。可使用 isFinite(num) 来判断。
*/

1
2
3
4
5
6
7
8
9
10
11
12
13

扩展：可以用 typeof(“xx”) 查看数据类型。

# 3.2 字符串 String

// 声明
var name = "zhangsan";
var name = String("zhangsan");
var age_str = String(18);
// 常用方法
var name = "zhangsan";

var value = names[0]                    // 索引
var value = name.length                 // 获取字符串长度
var value = name.trim()                 // 去除空白
var value = name.charAt(index)          // 根据索引获取字符
var value = name.substring(start,end)   // 根据索引获取子序列

1
2
3
4
5
6
7
8
9
10
11
12

# 案例：标题跑马灯


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>xxx</title>
</head>
<body>

<h1>HTML标签和样式</h1>

<script type="text/javascript">

    setInterval(function () {
// 从HTML文档的title标签中获取标题文字
var title = document.title;

var lastChar = title.charAt(title.length - 1);
var preString = title.substring(0, title.length - 1);

var newTitle = lastChar + preString;
// 新字符串赋值到HTML文档的title标签中。
        document.title = newTitle;
}, 1000);
</script>
</body>
</html>

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

# 3.3 布尔类型 Boolean

布尔类型仅包含真假，与Python不同的是其首字母小写。

var status = true;
var status = false;

/*
在js中进行比较时，需要注意：
    ==       比较值相等
    !=       不等于
    ===      比较值和类型相等
    !===     不等于
    ||        或
    &&        且
*/

1
2
3
4
5
6
7
8
9
10
11
12

# 3.4. 数组 Array

JavaScript中的数组类似于Python中的列表。


// 声明
var names = ['zs', 'ls', 'ww']
var names = Array('zs', 'ls', 'ww')
// 常见方法
var names = ['zs', 'ls', 'ww']

names[0]                        // 索引
names.push(ele)                 // 尾部追加元素
var ele = names.obj.pop()       // 尾部移除一个元素
names.unshift(ele)              // 头部插入元素
var ele = obj.shift()           // 头部移除一个元素
names.splice(index,0,ele)       // 在指定索引位置插入元素
names.splice(index,1,ele)       // 指定索引位置替换元素
names.splice(index,1)           // 指定位置删除元素
names.slice(start,end)          // 切片
names.reverse()                 // 原数组反转
names.join(sep)                 // 将数组元素连接起来以构建一个字符串
names.concat(val,..)            // 连接数组
names.sort()                    // 对原数组进行排序

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

# 3.5 字典对象Object

JavaScript中其实没有字典类型，字典是通过对象object构造出来的。

// 声明
info = {
    name:'zhangsan',
	"age":18
}
// 常用方法
var val = info['name']      // 获取
info['age'] = 20            // 修改
info['gender'] = 'male'     // 新增
delete info['age']          // 删除

1
2
3
4
5
6
7
8
9
10

# 案例：动态表格


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript学习</title>
    <style>
        table{
            /*边框合并*/
            border-collapse: collapse;

        }
        table th,table td{
            border: 1px solid #ddd;
            padding: 8px;
        }
        table th{
            font-weight: bold;
        }
</style>
</head>
<body>

<table>
    <thead>
        <tr>
            <th>学号</th>
            <th>姓名</th>
            <th>性别</th>
        </tr>
    </thead>
    <tbody id="body">

    </tbody>
</table>

<script type="text/javascript">
    var userList = [
        {id:1,name:'zhangsan',gender:'男'},
        {id:2,name:'lisi',gender:'男'},
        {id:3,name:'wangwu',gender:'男'}
    ];
    // 笨方法
    for(var i in userList){
        var row = userList[i];

        var trNode = document.createElement('tr');

        var tdNodeId = document.createElement('td');
        tdNodeId.innerText = row.id;
        trNode.appendChild(tdNodeId);

        var tdNodeName = document.createElement('td');
        tdNodeName.innerText = row.name;
        trNode.appendChild(tdNodeName);

        var tdNodeGender = document.createElement('td');
        tdNodeGender.innerText = row.gender;
        trNode.appendChild(tdNodeGender);

        var bodyNode = document.getElementById('body');
        bodyNode.appendChild(trNode);
    }

    // 简便方法
    /*
    for(var i in userList){
        var row = userList[i];
        var trNode = document.createElement('tr');
        for(var key in row){
             var tdNode = document.createElement('td');
            tdNode.innerText = row[key];
            trNode.appendChild(tdNode);
        }
        var bodyNode = document.getElementById('body');
        bodyNode.appendChild(trNode);
    }
    */
</script>
</body>
</html>

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82

# 3.6 其他 null、undefine

null是 JavaScript 语言的关键字，它表示一个特殊值，常用来描述“空值”，相当于Python的None。
undefined 是一个特殊值，表示只是声明而变量未定义。
```
var name;console.log(typeof(name));
```
1

# 4. 条件判断

JavaScript 中的条件语句有两种，用于解决判断的问题。

if,else，用于判断。

var age = 18;
if(age <18){
    }else if(age>=18 and 1 == 1){

    }else if(age>=30){

    }else{

    }

1
2
3
4
5
6
7
8
9

switch,case，用于判断等于某些值。

var num = 18;
switch(num){
case 10:
        console.log('未成年');
break;
case 18:
        console.log('成年');
break;
case 35:
        console.log('油腻老男人');
break;
case 100:
        console.log('....');
break;
default:
        console.log('太大了');
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# 5. 循环语句

JavaScript 中循环有两种写法，用于解决循环问题。

for(var i in ['国产','日韩','欧美'])，默认生成索引。适用于：字符串、元组、字典。

var names = ['张三', '李四', '王五']

for(var index in names){
    console.log(index, names[index])
}

1
2
3
4
5

for(var i=0;i<10;i++)，自定义索引并设置增加步长。适用于：字符串、元组。（字典索引非有序）

var names = ['张三', '李四', '王五']

for(var i=0;i<names.lenght;i++){
    console.log(i, names[i])
}

1
2
3
4
5

# 6. 异常处理

在JavaScript的异常处理中有两个注意事项：

主动抛异常 throw “xx” 或 throw Error({code:1000,error:’错了’})
catch只能捕获一次，如果想要对异常精细化处理可以在catch代码块中再做类型判断。

try {
//这段代码从上往下运行，其中任何一个语句抛出异常该代码块就结束运行
var name = ''
}
catch (e) {
// 如果try代码块中抛出了异常，catch代码块中的代码就会被执行。
//e是一个局部变量，用来指向Error对象或者其他抛出的对象
}
finally {
//无论try中代码是否有异常抛出（甚至是try代码块中有return语句），finally代码块中始终会被执行。
}

1
2
3
4
5
6
7
8
9
10
11

# 7. 函数

JavaScript中的函数可以简单概括为以下三类：

函数

function func(arg){
    return arg + 1;
}

1
2
3

匿名函数

function (arg){
return arg + 1;
}
// 一般用于当做参数使用，例如：设置定时器 setInterval(function(){},1000)

1
2
3
4

自执行函数，自动触发执行。

(function(arg){
    console.log(arg);
})('zhangsan')

1
2
3

<!--【可选部分】一般用于做数据隔离使用，因为JS中是以函数为作用域，所以当js代码比较多时，通过自执行函数做数据隔离(闭包)。-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript学习</title>

</head>
<body>
<script type="text/javascript">
    funcList = [];
    (function () {
        var name = 'zhangsan';
        function f1() {
            console.log(name);
        }
        funcList.push(f1);
    })();
    (function () {
        var name = 'Alex';
        function f2() {
            console.log(name);
        }
        funcList.push(f2);
    })();
    funcList[0]()
</script>
</body>
</html>

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

# 8. json ==序列化==

JavaScript提供了json序列化功能，即：将对象和字符串之间进行转换。

JSON.stringify(object) ，序列化

var info = {name:'alex',age:19,girls:['钢弹','铁锤']}
var infoStr = JSON.stringify(info)
console.log(infoStr) # '{"name":"alex","age":19,"girls":["钢弹","铁锤"]}'

1
2
3

JSON.parse(str)，反序列化

var infoStr = '{"name":"alex","age":19,"girls":["钢弹","铁锤"]}'
var info = JSON.parse(infoStr)
console.log(info)

1
2
3

应用场景：网络中数据传输本质上是基于字符串进行，如果想要把一个js的对象通过网络发送到某个网站，就需要对对象进行序列化然后发送。（以后学习ajax会经常使用）。

上次更新: 2022/08/25, 10:11:06

← css js之DOM→

JavaScript

# 1. JavaScript 用途

# 2. JavaScript 介绍

# 2.1 JS代码的存在形式

# 2.2 变量

# 3. 常见数据类型

# 3.1 数字 Number

# 3.2 字符串 String

# 案例：标题跑马灯

# 3.3 布尔类型 Boolean

# 3.4. 数组 Array

# 3.5 字典 对象Object

# 案例：动态表格

# 3.6 其他 null、undefine

# 4. 条件判断

# 5. 循环语句

# 6. 异常处理

# 7. 函数

# 8. json ==序列化==

# 3.5 字典对象Object