JavaScript 基础1：变量与数据类型及其转换

Date: September 17, 2022

了解变量、数据类型、运算符等基础概念，能够实现数据类型的转换，结合四则运算体会如何编程。

体会现实世界中的事物与计算机的关系
理解什么是数据并知道数据的分类
理解变量存储数据的“容器”
掌握常见运算符的使用，了解优先级关系
知道 JavaScript 数据类型隐式转换的特征

Untitled

一、介绍

掌握 JavaScript 的引入方式，初步认识 JavaScript 的作用

0.0 认识 JavaScript

总结：

JS是高级编程语言，它又是一门脚本语言（浏览器解释一句再执行一句）

Untitled

1.1 引入方式

JavaScript 程序不能独立运行，它需要被嵌入 HTML 中，然后浏览器才能执行 JavaScript 代码。

通过 script 标签将 JavaScript 代码引入到 HTML 中，有两种方式：

内部形式

通过 script 标签包裹 JavaScript 代码

 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <title>JavaScript 基础 - 引入方式</title>
 </head>
 <body>
   <!-- 内联形式：通过 script 标签包裹 JavaScript 代码 -->
   <script>
     alert('嗨，欢迎来传智播学习前端技术！');
   </script>
 </body>
 </html>

外部形式

一般将 JavaScript 代码写在独立的以 .js 结尾的文件中，然后通过 script 标签的 src 属性引入

 // demo.js
 document.write('嗨，欢迎来传智播学习前端技术！');

 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <title>JavaScript 基础 - 引入方式</title>
 </head>
 <body>
   <!-- 外部形式：通过 script 的 src 属性引入独立的 .js 文件 -->
   <script src="demo.js"></script>
 </body>
 </html>

如果 script 标签使用 src 属性引入了某 .js 文件，那么标签的代码会被忽略！！！如下代码所示：

 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <title>JavaScript 基础 - 引入方式</title>
 </head>
 <body>
   <!-- 外部形式：通过 script 的 src 属性引入独立的 .js 文件 -->
   <script src="demo.js">
     // 此处的代码会被忽略掉！！！！
     alert(666);
   </script>
 </body>
 </html>

1.2 注释和结束符

通过注释可以屏蔽代码被执行或者添加备注信息，JavaScript 支持两种形式注释语法：

单行注释

使用 // 注释单行代码

 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <title>JavaScript 基础 - 注释</title>
 </head>
 <body>

   <script>
     // 这种是单行注释的语法
     // 一次只能注释一行
     // 可以重复注释
     document.write('嗨，欢迎来传智播学习前端技术！');
   </script>

 </body>
 </html>

多行注释

使用 /* */ 注释多行代码

 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <title>JavaScript 基础 - 注释</title>
 </head>
 <body>

   <script>
     /* 这种的是多行注释的语法 */
     /*
         更常见的多行注释是这种写法
         在些可以任意换行
         多少行都可以
       */
     document.write('嗨，欢迎来传智播学习前端技术！');
   </script>
 </body>
 </html>

注：编辑器中单行注释的快捷键为 ctrl + /

结束符

在 JavaScript 中 ; 代表一段代码的结束，多数情况下可以省略 ; 使用回车（enter）替代。

 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <title>JavaScript 基础 - 结束符</title>
 </head>
 <body>

   <script>
     alert(1);
     alert(2);
     alert(1)
     alert(2)
   </script>
 </body>
 </html>

JavaScript 跟 HTML 和 CSS 一样，会忽略【一些】空白符，但是换行符（回车）会被识别成结束符 ;，因此在实际开发中有许多人主张书写 JavaScript 代码时省略结束符 ;

1.3 输入和输出

输出和输入也可理解为人和计算机的交互，用户通过键盘、鼠标等向计算机输入信息，计算机处理后再展示结果给用户，这便是一次输入和输出的过程。

举例说明：如按键盘上的方向键，向上/下键可以滚动页面，按向上/下键这个动作叫作输入，页面发生了滚动了这便叫输出。

输出

JavaScript 可以接收用户的输入，然后再将输入的结果输出：

document.wirte()

向body内输出内容

如果输出的内容写的是标签，会被解析成网页元素

eg：

Untitled

<body>
    <script>
        document.write('我愿意')
        document.write('<h1>H1</h1>')
    </script>
</body>

alert()

页面弹出警告对话框

eg：

Untitled

<body>
    <script>
        alert('黑马')
    </script>
</body>

console.log()

控制台输出语法，程序员调试使用

eg：

<body>
    <script>
        console.log('test')
    </script>
</body>

Untitled

输入

prompt()

输入任意内容会以弹窗形式出现在浏览器中，一般提示用户输入一些内容。

promt() 输入的数据类型是字符型的

eg：

Untitled

<body>
    <script>
        prompt('您今年多大了？')
    </script>
</body>

总结：

JavaScript是什么？

它是一门编程语言，可以实现很多的网页交互效果

JavaScript书写位置？

内部：写在body里面

外部：通过src引入html页面中，但是

JavaScript的注释？

单行：//

多行：/**/

JavaScript的结束符？

分号：;

JavaScript输入输出语句？

输入：prompt

输出：alert() document.write() console.log()

二、变量

理解变量是计算机存储数据的“容器”，掌握变量的声明方式

变量是计算机中用来存储数据的“容器”，它可以让计算机变得有记忆，通俗的理解变量就是使用【某个符号】来代表【某个具体的数值】（数据）

 <script>
   // x 符号代表了 5 这个数值
   x = 5;
   // y 符号代表了 6 这个数值
   y = 6;

   //举例： 在 JavaScript 中使用变量可以将某个数据（数值）记录下来！
 
   // 将用户输入的内容保存在 num 这个变量（容器）中
   num = prompt('请输入一数字!');
 
   // 通过 num 变量（容器）将用户输入的内容输出出来
   alert(num);
   document.write(num);
 </script>

2.1 声明和赋值

声明

声明(定义)变量有两部分构成：声明关键字、变量名（标识）

 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <title>JavaScript 基础 - 声明和赋值</title>
 </head>
 <body>

   <script>
     // let 变量名
     // 声明(定义)变量有两部分构成：声明关键字、变量名（标识）
     // let 即关键字，所谓关键字是系统提供的专门用来声明（定义）变量的词语
     // age 即变量的名称，也叫标识符
     let age;
   </script>
 </body>
 </html>

关键字是 JavaScript 中内置的一些英文词汇（单词或缩写），它们代表某些特定的含义，如 let 的含义是声明变量的，看到 let 后就可想到这行代码的意思是在声明变量，如 let age;

let 和 var 都是 JavaScript 中的声明变量的关键字，推荐使用 let 声明变量！！！

赋值

声明（定义）变量相当于创造了一个空的“容器”，通过赋值向这个容器中添加数据。

 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <title>JavaScript 基础 - 声明和赋值</title>
 </head>
 <body>
   <script>
     // 声明(定义)变量有两部分构成：声明关键字、变量名（标识）
     // let 即关键字，所谓关键字是系统提供的专门用来声明（定义）变量的词语
     // age 即变量的名称，也叫标识符
     let age;
     // 赋值，将 18 这个数据存入了 age 这个“容器”中
     age = 18;
     // 这样 age 的值就成了 18
     document.write(age);

     // 也可以声明和赋值同时进行
     let str = 'hello world!';
     alert(str);
   </script>
 </body>
 </html>

2.2 let 和 var

let为了解决var的一些问题

JavaScript 使用专门的关键字 let 和 var 来声明（定义）变量，在使用时需要注意一些细节：

以下是使用 let 时的注意事项：

允许声明和赋值同时进行
不允许重复声明
允许同时声明多个变量并赋值
JavaScript 中内置的一些关键字不能被当做变量名

以下是使用 var 时的注意事项：

允许声明和赋值同时进行
允许重复声明
允许同时声明多个变量并赋值

大部分情况使用 let 和 var 区别不大，但是 let 相较 var 更严谨，因此推荐使用 let，后期会更进一步介绍二者间的区别。

2.3 变量名命名规则

关于变量的名称（标识符）有一系列的规则需要遵守：

只能是字母、数字、下划线、$，且不能能数字开头
字母区分大小写，如 Age 和 age 是不同的变量
JavaScript 内部已占用于单词（关键字或保留字）不允许使用
尽量保证变量具有一定的语义，见字知义

注：所谓关键字是指 JavaScript 内部使用的词语，如 let 和var，保留字是指 JavaScript 内部目前没有使用的词语，但是将来可能会使用词语。

 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <title>JavaScript 基础 - 变量名命名规则</title>
 </head>
 <body>

   <script>
     let age = 18; // 正确
     let age1 = 18; // 正确
     let _age = 18; // 正确
 
     // let 1age = 18; // 错误，不可以数字开头
     let $age = 18; // 正确
     let Age = 24; // 正确，它与小写的 age 是不同的变量
     // let let = 18; // 错误，let 是关键字
     let int = 123; // 不推荐，int 是保留字
   </script>
 </body>
 </html>

总结：

Untitled

2.4 变量拓展-数组

声明语法：

let 数组名 = [数据1, 数据2, 数据3, ......]
		变量      数组字面量

三、数据类型

JavaScript是一种动态语言

Untitled

计算机世界中的万事成物都是数据。

Untitled

3.0 检测数据类型

通过 typeof 关键字检测数据类型

eg：

<body>
   <script>
     // 检测 1 是什么类型数据，结果为 number
     document.write(typeof 1);
   </script>
</body>

3.1 数字类型

即我们数学中学习到的数字，可以是整数、小数、正数、负数

 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <title>JavaScript 基础 - 数据类型</title>
 </head>
 <body>

   <script>
     let score = 100; // 正整数
     let price = 12.345; // 小数
     let temperature = -40; // 负数
 
     document.write(typeof score); // 结果为 number
     document.write(typeof price); // 结果为 number
     document.write(typeof temperature); // 结果为 number
   </script>

 </body>
 </html>

JavaScript 中的数值类型与数学中的数字是一样的，分为正数、负数、小数等。

3.2 字符串类型

通过单引号（ ''）、双引号（ ""）或反引号（ ````）包裹的数据都叫字符串，单引号和双引号没有本质上的区别，推荐使用单引号。

注意事项：

无论单引号或是双引号必须成对使用
单引号/双引号可以互相嵌套，但是不可以自已嵌套自已
必要时可以使用转义符 \，输出单引号或双引号

 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <title>JavaScript 基础 - 数据类型</title>
 </head>
 <body>
   <script>
     let user_name = '小明'; // 使用单引号
     let gender = "男"; // 使用双引号
     let str = '123'; // 看上去是数字，但是用引号包裹了就成了字符串了
     let str1 = ''; // 这种情况叫空字符串

     documeent.write(typeof user_name); // 结果为 string
     documeent.write(typeof gender); // 结果为 string
     documeent.write(typeof str); // 结果为 string
   </script>
 </body>
 </html>

模板字符串

作用：拼接字符串和变量

符号： ````

优点：内容可以多行呈现

eg:

Untitled

<body>
    <script>
        let age = 81
        document.write(`我今年${age - 20}岁了`)
    </script>
</body>

eg：

Untitled

<body>
    <script>
        document.write(`
            line1
            line2
        `)
    </script>
</body>

3.3 布尔类型

说明：

表示肯定的数据用 true，表示否定的数据用 false

eg：

 <body>
   <script>
     let isCool = true;
     isCool = false;
     document.write(typeof isCool); // 结果为 boolean
   </script>
 </body>

3.4 undefined

说明：

只声明变量，不赋值的情况下，变量的默认值为 undefined

工作中使用：

我们开发中经常声明一个变量，等待传送过来的数据

我们通过检测这个变量是不是undefined，来判断用户是否有数据传送过来

eg：

<body>
   <script>
     // 只声明了变量，并末赋值
     let tmp;
     document.write(typeof tmp); // 结果为 undefined
   </script>
 </body>

3.5 null

说明：

null作为尚未创建的对象

将来变量里会存放一个对象，但是对象还没有创建好，可以先给个null

案例：

let obj = null

总结：

情况	说明	结果
let age; console.log(age)	只声明不赋值	undefined
console.log(age)	不声明不赋值直接使用	报错
age = 10; console.log(age)	不声明只赋值	10（不提倡）

四、类型转换

理解弱类型语言的特征，掌握显式类型转换的方法

说明：

类型转换就是把一种数据类型的变量转换成我们需要的数据类型

4.1 隐式转换

隐式转换：

某些运算符被执行时，系统内部自动将数据类型进行转换

规则：

+号两边只要有一个是字符串，都会把另一个转成字符串

除了+以外的算术运算符比如 - * / 等都会把数据转成数字类型

缺点：

转换类型不明确，靠经验才能总结

eg：

<body>
   <script>
		 //eg1

     let num = 13; // 数值
     let num2 = '2'; // 字符串 
     console.log(num + num2);  // 132
		       // 原因是将数值 num 转换成了字符串，相当于 '13'
	  	     // 然后 + 将两个字符串拼接到了一起

		 //eg2

     console.log(num - num2);  //11
		      // 原因是将字符串 num2 转换成了数值，相当于 2
		      // 然后数值 13 减去 数值 2

		 //eg3

		 let num3 = '10'
		 console.log(num3)  // 字符串10
		 console.log(+num3)  // 数字10
		 console.log(10+ +'10')  // 数字20

   </script>
 </body>

注：数据类型的隐式转换是 JavaScript 的特征，后续学习中还会遇到，目前先需要理解什么是隐式转换。

4.2显式转换

隐式转换规律不清晰，大多靠经验。因此，为避免隐式转换带来的问题，我们通常使用显示转换

转换为数字型

Number（数据）

通过 Number 显示转换成数值类型，当转换失败时结果为 NaN

即（Not a Number）即不是一个数字

parseInt（数据）

只保留整数

parseFloat（数据）

可以保留小数

        parseFloat会自动过滤数字，常用于把单位过滤掉
        比如 100px 过滤出 100 这个数字

eg：

<body>
    <script>
        console.log(Number('10'))  //数字10
        console.log(Number('10.11'))  //数字10.11
        console.log(Number('10abc'))  //NaN
            //Number()里面只能放数字

        console.log(parseInt('10.11'))  //数字10
        console.log(parseInt('10.99'))  //数字10

        console.log(parseFloat('10.99')) //数字10.99
        console.log(parseFloat('10abc')) //数字10 
            //parseFloat会自动过滤数字，常用于把单位过滤掉
            //比如 100px 过滤出 100 这个数字
    </script>
</body>

转换为字符型

使用见代码

<body>
    <script>
        console.log(String(10))
        let age = 10
        console.log(age.toString())
        console.log(age.toString(2))  
            //()里是2，把age转换成二进制
    </script>
</body>

综合案例

Untitled

Code:

<!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">

    <style>
        
        * {
            margin: 0;
            padding: 0;
        }

        table {
            margin: 0 auto;
            text-align: center;
            border-collapse: collapse;
        }

        table th, td {
            border: 1px solid #000;
            padding: 15px;
        }

        table caption {
            margin: 15px auto;
        }

    </style>

    <title>Document</title>
</head>
<body>
    <script>
        //1、输入基础数据
            //注意：最后的时候会有隐式转换，所以这边不用数据类型转换
        let price = prompt('请输入 商品价格：');
        let c_num = prompt('请输入 商品数量：');
        let address = prompt('请输入 收货地址：');
        let total = price * c_num

        //2、渲染表格 填充数据
        document.write(`
        <table>
            <caption>
                <h2>订单确定</h2>
            </caption>
            <tr>
                <th>商品名称</th>
                <th>商品价格</th>
                <th>商品数量</th>
                <th>总价</th>
                <th>收货地址</th>
            </tr>
            <tr>
                <td>小米手机</td>
                <td>${price}</td>
                <td>${c_num}</td>
                <td>${total}</td>
                <td>%{address}</td>
            </tr>
        </table>
        `)
    </script>
</body>
</html>