十天学前端之JS篇(四)

前言：经过这节的学习，我们知道了变量是用来存储数据的容器，数据又有很多类型

1.数据类型

1.1 为什么需要数据类型

在计算机中，不同的数据类型所占用的存储空间是不同的，为了便于吧数据分成所需内存大小不同的数据，充分利用存储空间，于是定义了不同的数据类型。

简单来说，数据类型就是数据的类型型号。比较姓名"张三",年龄18，这些数据的类型是不一样的。

1.2 变量的数据类型

变量是用来存储值的所在处，它们有名字和数据类型。变量的数据类型决定了如何将代表这些值的位存储到计算机的内存中。JavaScript是一种弱类型或者说动态语言。这意味着不用提前声明变量的类型，在程序运行过程中，类型会被自动确定。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nuAXC8je-1660441584957)(Typora_image/039.png)]

新建.html文件

<!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>Document</title>
    <script>
        // int num = 10; 在java里面，声明时会定义数据类型，这样里面存放的数据一定是定义好的数据类型
        var num;  // 在JS里面，此时num不知道属于什么数据类型，给它赋值之后，它才会确认
        var num = 10;  // 此时num属于数字型；
        var num = '张三';  // 此时num数据字符串型
        //JS 的变量数据类型是只有程序在运行过程中，根据等号右边的值来确定的
        var str;  // 此时str并不知道属于什么数据类型
        var str= 'str1'; //此时才知道str属于字符串型
        // JS是动态语言，变量的数据类型是可以变化的
        var x = 10;  // x是数字型
         x = 'today'; // x是字符串型
    
    </script>
</head>
<body>
    
</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

1.3 数据类型的分类

JS把数据类型分为两类：

简单数据类型(Number,String,Boolean,Undefind,Null)

复杂数据类型(object)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4tArbbEq-1660441584958)(Typora_image/040.png)]

1.3.1 数字型 Number

JavaScript数字类型可以用来保存整数值，也可以保存小数(浮点数)。

var age = 21;     //  不管是不是整型，都是数字型
var Age = 21.2323;   // 不管是不是浮点型，都是数字型
1
2

1.3.1.1 数字型进制

最常见的进制有二进制、八进制、十进制、十六进制。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-y1wCOkfb-1660441584959)(Typora_image/041.png)]

1.3.1.2 数字型范围

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-b5CiBSJC-1660441584960)(Typora_image/042.png)]

1.3.1.3 数字型三个特殊值

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ONq60287-1660441584961)(Typora_image/043.png)]

新建.html文件，执行如下代码：

<!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>Document</title>
    <script>
        var num = 10;   // num 数字型
        var PI = 3.14  // pI 数字型
        // 1.八进制 范围：0~7  程序里面数字前面加0,表示八进制
        var num1 = 010;
        console.log('010转化成十进制是:',num1);   // 8
        var num2 = 020;
        // 快捷键 输入log,选中底边有很多点的那个符号，回车  自动生成console.log()
        console.log('020转化成十进制是:',num2);
        // 2.十六进制  范围 0~9 a~f     比如：#ffffff 表示白色   数字前面加 0x 表示十六进制
        var num3 = 0x9;
        console.log('0x9转化成十进制是:',num3);
        var num4 = 0xa;
        console.log('0xa转化成十进制是:',num4);
        // 3. 数字型的最大值
        console.log('数字型的最大值是:',Number.MAX_VALUE);
        // 4. 数字型的最小值
        console.log('数字型的最小值是:',Number.MIN_VALUE);
        // 5.无穷大
        console.log('数字型的无穷大是:',Number.MAX_VALUE * 2);    // Infinity
        // 6.无穷小
        console.log('数字型的无穷小是:',-Number.MAX_VALUE * 2); // -Infinity
        // 7. 非数字
        console.log('字符串减去数字的值为:','张三' - 100);      //  NaN

    </script>
</head>
<body>
    
</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

效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ej2FU9Od-1660441584963)(Typora_image/044.png)]

1.3.1.4 isNaN()

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6OeC6rHB-1660441584968)(Typora_image/045.png)]

新建.html文件，执行如下代码：

<!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>Document</title>
    <script>
        // isNaN()  这个方法用来判断非数字   并且返回一个值  如果是数字返回的是false  如果不是数字返回的是true
        // 自动换行快捷键  alt + z
        console.log('判断12是不是数字:',isNaN(12));  // false  表示不为空，是数字
        console.log('判断张三是不是数字:',isNaN('张三'));  // true  表示为空，是数字
    </script>
</head>
<body>
    
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WGj9Pkpg-1660441584970)(Typora_image/046.png)]

1.3.2 字符串型String

字符串型可以是引号中的任意文本，其语法为双引号""和单引号’'。

1.3.2.1 字符串引号嵌套

对于嵌套字符串，引号是用法是：外双内单，外单内双。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nZu2j8Ci-1660441584972)(Typora_image/047.png)]

1.3.2.2 字符串的转义符

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wTppeJBT-1660441584974)(Typora_image/048.png)]

新建.html文件，执行如下代码：

<!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>Document</title>
    <script>
        // 对于嵌套字符串，外双内单，外单内双。
        var str1 = '大家下午好，我是"张三"';
        var str2 ="大家晚上好，我是'李四'";
        // 快捷键 输入log,选中底边有很多点的那个符号，回车  自动生成console.log()
        console.log('str1:',str1);
        console.log('str2:',str2);
        var str3 = '今天天气晴朗，是吧"张三",你说的\n都对!'
        console.log('str3:',str3);
        var str4 = '今天天气晴朗，是吧"张三",你说的\n都对!,晴晴晴\\晴晴\'晴晴晴\"晴晴晴\t晴晴晴晴\b晴晴晴晴晴'
        console.log('str4:',str4);
        var str5 = '\b今天今天今天'
        console.log('str5:',str5);
    </script>
</head>
<body>
    
</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

效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EpgmUGwG-1660441584976)(Typora_image/049.png)]

1.3.2.3 弹出网页警示框

警示框内容：（考察换行效果）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xFQE60XF-1660441584977)(Typora_image/050.png)]

新建.html文件，执行如下代码：

<!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>Document</title>
    <script>
        //查看里面，可以设置，自动换行
        alert('今天天气很热，快接近四十度了，不敢出门。\n没有地方乘凉，火辣辣的，地面都可以煮鸡蛋了。\n这一刻，我仰天大喊一声:"好热啊~"')
    </script>
</head>
<body>
    
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

1.3.2.4 字符串长度

字符串是由若干字符串组成的，这些字符的数量就是字符串的长度。通过字符串的length属性可以获取整个字符串的长度。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vuYR801E-1660441584980)(Typora_image/051.png)]

1.3.2.5 字符串的拼接

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dnxa2zez-1660441584981)(Typora_image/052.png)]

新建.html文件，执行代码

<!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>Document</title>
    <script>
        // 1.检测获取字符串的长度 length
        var str = 'my name is "张三"';
        console.log(str);
        console.log(str.length);   // 15
        // 2.字符串的拼接 +      只要有字符串和其他类型相拼接  最终的结果是字符串类型
        console.log("沙漠"+"骆驼");   // 沙漠骆驼   字符串型
        console.log('张三'+ 25);      // 张三25
        // JS里面字符串更推荐使用单引号
        console.log('张三' + true);   // 张三true
        console.log(12 + 12);         // 24
        console.log('12' + 12);       //  1212
    </script>
</head>
<body>
    
</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

效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZrBJJXlC-1660441584982)(Typora_image/053.png)]

1.3.2.6 字符串拼接加强

经常会将字符串和变量来拼接，因为变量可以很方便地修改里面的值。

变量是不能添加引号的，因为加引号的变量会变成字符串

如果变量两侧都有字符串拼接，口诀"引引加加"，删掉数字，变量写加中间

新建.html文件，执行代码如下：

<!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>Document</title>
    <script>
        // 常规写法
        console.log('张三' + 18);   // 张三18
        console.log('张三' + 18 + '岁');  // 张三18岁
        
        // 字符串的加强写法
        var age = 18;
        // 我们变量不要写到字符串里面，是通过 和字符串相连的方式实现的
        // 变量和字符串相连的口诀： 引引加加
        console.log('张三' + age + '岁');  // 张三18岁
    </script>
</head>
<body>
    
</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

效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jFVHGLJk-1660441584983)(Typora_image/054.png)]

1.3.2.7 案例：显示年龄

弹出一个输入框，需要用户输入年龄，之后弹出一个警示框显示"您今年xx岁啦" (xx表示刚才输入的年龄)

案例分析：这是利用JS编写的一个非常简单的交互效果程序

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nDB6rvGM-1660441584984)(Typora_image/055.png)]

新建.html文件，执行代码如下：

<!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>Document</title>
    <script>
        var age = prompt('请输入您的年龄')
        var str = '您今年已经'+ age + '岁了';
        alert(str)
    </script>
</head>
<body>
    
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3eIrXz0G-1660441584985)(Typora_image/056.png)]

1.3.3 布尔型 Boolean

布尔类型有两个值: true 和false,其中 true 表示真(对)，而false表示假(错)。

布尔型和数字型相加的时候，true的值为1，false的值为0

1.3.4 Undefined 和 Null

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wLMYQFcu-1660441584986)(Typora_image/057.png)]

新建.html文件，执行代码如下：

<!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>Document</title>
    <script>
        var flag = true;   // flag 布尔型
        var flag1 = false;  // flag1 布尔型
        console.log(flag + 1); // true参与加法运算当1看，结果是2
        console.log(flag1 + 1); // false 参与加法运算当0来看，结果是1
        // 如果一个变量声明未赋值  就是undefined未定义数据类型
        var str;
        console.log(str);  // undefined

        var variable = undefined;  // 此时varable就是undefined类型
        console.log(variable + '张三');   // undefined张三
        console.log(variable + 1);  // NaN   undefined 和数字相加，最后结果是NaN
        // null 空值
        var space = null;
        console.log(space + '张三');  // null张三
        console.log(space + 1);    // 1

    </script>
</head>
<body>
    
</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

【注意】undefined类型和字符串相加拼起来，和数值相加结果都是NaN

效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MdDRcKCg-1660441584988)(Typora_image/058.png)]

1.4 获取变量数据类型

1.4.1 获取检测变量的数据类型

1.4.1.1 方法一(typeof)

typeof——获取检测变量的数据类型

新建.html文件，执行代码：

<!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>Document</title>
    <script>
        var num = 10;
        console.log(typeof num);    // number
        var str = '张三';
        console.log(typeof str);   // string
        var flag = true;
        console.log(typeof flag);   // boolean
        var vari = undefined;
        console.log(typeof vari);  // undefined
        var timer = null;
        console.log(typeof timer);  // object

        // prompt 取过来的值是  字符型的
        var age = prompt('请输入您的年龄')
        console.log(age);             
        console.log(typeof age);     // string
    </script>
</head>
<body>
    
</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

效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UrCr2j3R-1660441584988)(Typora_image/059.png)]

1.4.1.2 方法二（通过在控制台表现的颜色)

新建.html文件，执行代码如下：

<!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>Document</title>
    <script>
        console.log(18);
        console.log('18');
        console.log(true);
        console.log(undefined);
        console.log(null);
    </script>
</head>
<body>
    
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uJNvJY5j-1660441584989)(Typora_image/060.png)]

由图可以看出来，黑色的是字符串类型；蓝色的要么是数字要么是布尔。

1.4.2 字面量

字面量是在源代码中一个固定值的表示发，通俗来说，就是字面量表示如何表达这个值。(就是一看就知道什么类型) ，比如

数字字面量	8，9，10
字符串字面量	‘张三’ ， ‘李四’
布尔字面量	true， false

1.5 数据类型转换

1.5.1 什么是数据类型转换

使用表单、prompt获取过来的数据默认是字符串类型的，此时就不能直接简单的进行加法运算，而需要转换变量的数据类型。通俗来说，就是把一种数据类型的变量转换成另外一种数据类型。

比如：

'18' + 18 的结果是  '1810'
1

我们通常会实现3种方式的转换：

转换为字符串类型

转换为数字型

转换为布尔型

1.5.2 转换为字符串(三种方法)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-L3yF5FS7-1660441584990)(Typora_image/061.png)]

方法中，加号拼接字符串方法最常用。

新建.html文件，执行代码：

<!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>Document</title>
    <script>
        // 1.把数字型转换为字符串型   变量.toString()
        var num = 10;
        console.log(typeof num);
        var str = num.toString();
        console.log(str);
        console.log('转成字符串型方法一',typeof str);
        // 2.我们利用String(变量)
        var age = 18
        console.log(typeof age);   // number
        console.log(String(age));  //  18 
        console.log(typeof age);   // number
        console.log('转成字符串型方法二',typeof String(age));  // string

        //  3.利用  + 拼接字符串的方法实现转换效果  这种也称为隐式转换
        // 任何数据类型和字符串进行拼接操作，都会转换成字符串
        console.log(num);
        console.log(typeof num);
        // 输入log,选择左上右实线，下虚线的，回车操作，就可以得到console.log()
        console.log('转成字符串型方法三',num + '');
        var c = num + '';
        console.log(typeof c);   // string 

    </script>
</head>
<body>
    
</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

效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mGqUpdX1-1660441584991)(Typora_image/062.png)]

1.5.3 转换为数字型(重点)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rIVySYzx-1660441584992)(Typora_image/063.png)]

新建.html文件，执行代码：

<!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>Document</title>
    <script>
        var age = prompt('请输入您的年龄')
        console.log(age);   // 18
        console.log(typeof age);  // string
        // 1.parseInt(变量) 可以把字符型的转换为数字型  得到是整数
        console.log(typeof parseInt(age));  // number
        var age1 = '18.2'
        console.log(typeof age1);  //string
        console.log(parseInt(age1));  // 18 取整
        console.log(typeof parseInt(age1)); //number
        var age2 = '18.99'
        console.log(parseInt(age2));  // 18  取整
        console.log(parseInt('3.94'));  // 3  取整
        console.log(parseInt('120px'));  // 120  会去掉px这个单位
        console.log(parseInt('rem120px')); // NaN

        console.log('--------------------------------');
        // 2.parseFloat(变量)  可以把字符型的转换为数字型  得到是小数  浮点数
        console.log(typeof '3.14');  // string
        console.log('3.14');  // 3.14  黑色 字符串型
        console.log(typeof parseFloat('3.14')); // number 
        console.log(parseFloat('120px'));  // 120
        console.log(parseFloat('rem120px'));  // NaN

        console.log('-----------------------');
        // 3.利用 Number(变量)
        var age3 = '123';
        console.log(typeof age3);  //  黑色  string
        console.log(Number(age3));          // 123
        console.log(typeof Number(age3)); // number
        console.log(Number('12'));         // 12
        console.log(typeof Number('12'));  // number

        console.log('------------------------------------');
        // 4.利用了算数运算  - * / 隐式转换
        console.log('12');  // 12  黑色
        console.log(typeof '12');  //string
        var c = '12' - 0;  
        console.log(c);  // 12   蓝色  number型
        console.log(typeof c);  // number

        console.log('123' - '120'); // 3
        // 拓展：
        console.log('123'+ '120');   //123120

        console.log(typeof '123');  //string
        var d = '123' *1
        console.log('123'*1);  //  123 蓝色 number
        console.log(typeof d); // number

        console.log('5');  // 5  黑色  字符串型
        console.log('5' / 1);  // 5 蓝色  number型
    </script>
</head>
<body>
    
</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

效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eanDc085-1660441584994)(Typora_image/064.png)]

1.5.3.1 案例1：计算年龄

此案例要求在页面弹出一个输入框，我们输入出生年份后，能计算出我们的年龄。

案例分析

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KIPDTEfy-1660441584996)(Typora_image/066.png)]

新建.html文件，执行代码如下：

<!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>Document</title>
    <script>
        // 弹出一个输入框(prompt),让用户输入出生年份(用户输入)
        // 把用户输入的值用变量保存起来，然后用今年的年份减去变量值；结果就是现在的年龄
        // 弹出警示框(alert),把计算的结果输出(输出结果)

        var year = prompt('请输入您的出生年份')
        var age = 2022 - year;   // year 取过来的是字符串型，但是这里用的减法，有隐式转换
        alert('您今年已经'+ age + '岁了');
    </script>

</head>
<body>
    
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AiZ1cTBH-1660441584996)(Typora_image/065.png)]

1.5.3.2 案例2：简单加法器

问题：计算两个数的值，用户输入第一个值后，继续弹出第二个输入框并输入第二个值，最后通过弹出窗口显示出两次输入值相加的结果

案例分析：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-m2cFnj0f-1660441584998)(Typora_image/067.png)]

新建.html文件，执行代码：

<!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>Document</title>
    <script>
        var num1 = prompt('请您输入第一个值：');
        var num2 = prompt('请您输入第二个值：');
        // var result = num1 + num2;  此时不能这样直接加，因为字符型加字符型是拼接效果
        var result = parseFloat(num1)+ parseFloat(num2);
        alert('您的结果是：'+ result);
    </script>
</head>
<body>
    
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fH1kgjU0-1660441584999)(Typora_image/068.png)]

1.5.4 转换为布尔型

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yHdy2t4V-1660441585000)(Typora_image/069.png)]

新建.html文件，执行代码：

<!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>Document</title>
    <script>
        console.log(Boolean(''));  // false
        console.log(Boolean(0));   // false
        console.log(Boolean(NaN));    // false
        console.log(Boolean(null));    // false
        console.log(Boolean(undefined));    // false
        console.log('******************************');
        console.log(Boolean('1'));   // ture
        console.log(Boolean('张三'));   // ture
        console.log(Boolean('null'));    // ture   因为此时里面是字符串，非空值
        console.log(Boolean('NaN'));    // ture     因为此时里面是字符串，非空值
        console.log(Boolean('undefined'));    // ture     因为此时里面是字符串，非空值

    </script>
</head>
<body>
    
</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

效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BCiJ1fED-1660441585002)(Typora_image/070.png)]

2. 基础概念梳理

2.1 解释型语言和编译型语言

1.概述

计算机不能直接理解任何除机器语言以外的语言，所以必须要把程序员所写的程序语言翻译成机器语言才能执行程序。程序语言翻译成机器语言的工具，被称为翻译器。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hd2PXNPB-1660441585004)(Typora_image/071.png)]

2.2 标识符、关键字、保留字

2.2.1 标识符

标识(zhi)符：就是指开发人员为变量、属性、函数、参数取的名字。

标识符不能是关键字或保留字。

2.2.2 关键字

关键字：是指JS本身已经使用了的字，不能再用它们充当变量名、方法名。

"""
break   case         catch     continue   default  delete
do      else         finally   for        function  if
in      instanceof   new       return     switch    this
throw    try         typeof    var         void     while
with 等
""""
1
2
3
4
5
6
7

2.2.3 保留字

保留字：实际上就是预留的"关键字"，意思是现在虽然还不是关键字，但是未来可能会成为关键字，同样不能使用它们当变量名或方法名。

"""
包括： boolean      byte     char      class     const     debugger        double
       enum        export  extends    fimal      float     goto            implements
       import      int     interface  long       mative    package         private 
       protected   public   short     static     super     synchronized    throws
       transient   volatile等
"""
1
2
3
4
5
6
7

相关阅读:
如何创建美观的邮件模板并通过qq邮箱的SMTP服务向用户发送
 微服务项目：尚融宝（13）（前端平台：搭建管理平台前端程序）
uniapp 小程序拍照上传，百度识别人体关键点，显示拖拽元素，生成海报
 有一本零基础入门Python的编程书上架！
游戏如何做到无视攻击
 爬虫 — 多线程
 众和策略：小盘和大盘的关系？
Meta Learning 元学习
 一致性检验-简单Kappa
1.5状态压缩DP
原文地址：https://blog.csdn.net/m0_57021623/article/details/126328571

十天学前端之JS篇(四)

1.数据类型

1.1 为什么需要数据类型

1.2 变量的数据类型

1.3 数据类型的分类

1.3.1 数字型 Number

1.3.1.1 数字型进制

1.3.1.2 数字型范围

1.3.1.3 数字型三个特殊值

1.3.1.4 isNaN()

1.3.2 字符串型String

1.3.2.1 字符串引号嵌套

1.3.2.2 字符串的转义符

1.3.2.3 弹出网页警示框

1.3.2.4 字符串长度

1.3.2.5 字符串的拼接

1.3.2.6 字符串拼接加强

1.3.2.7 案例：显示年龄

1.3.3 布尔型 Boolean

1.3.4 Undefined 和 Null

1.4 获取变量数据类型

1.4.1 获取检测变量的数据类型

1.4.1.1 方法一(typeof)

1.4.1.2 方法二 （通过在控制台表现的颜色)

1.4.2 字面量

1.5 数据类型转换

1.5.1 什么是数据类型转换

1.5.2 转换为字符串(三种方法)

1.5.3 转换为数字型(重点)

1.5.3.1 案例1：计算年龄

1.5.3.2 案例2：简单加法器

1.5.4 转换为布尔型

2. 基础概念梳理

2.1 解释型语言和编译型语言

2.2 标识符、关键字、保留字

2.2.1 标识符

2.2.2 关键字

2.2.3 保留字

1.4.1.2 方法二（通过在控制台表现的颜色)