javascript基础

一. JavaScript介绍

  1. 目标:知道JavaScript是什么和基本规范

  2. 学习路径

      1. JavaScript是什么
      2. JavaScript书写位置
      3. JavaScript的注释
      4. JavaScript的结束符
      5. 输入和输出语句

1.2 JavaScript书写位置

  1. 目标:知道如何向页面添加 JavaScript | cSS书写位置: | JavaScript书写位置: | | :—-: | :—-: | | 行内样式表 | 行内JavaScript | | 行内样式表 | 行内JavaScript | | 行内样式表 | 行内JavaScript |

  1. 行内JavaScript

    1. 代码写在以.js结尾的文件里

    2. 语法:通过script标签，引入到html页面中

    3. 注意:script标签中间无需写代码,否则会被忽略!

      1. <body>
      2. <!--外联形式:通过script的src属性引入独立的.js文件-->
      3. <script: src="demo.js"><lscnipt>
      4. </body>

1.5 JavaScript输入输出语句

  1. 目标:能写出常见JavaScript输入输出语句

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

  2. 输出语句:

    1. document.write(‘要输出的内容”);

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

    2. alert(‘要输出的内容’);

      • 页面弹出警告对话框

    3. prompt(‘要输入的内容’)；

      • 带输入语的输入框
        1. <script>
        2. // 输入语句，向body（页面上）输出内容和标签
        3. document.write('我来了，你在哪里')
        4. document.write('<h3>你好啊</h3>');
        5. // 弹框
        6. alert('黄瓜')
        7. // 带提示语的输入框
        8. prompt("请输入您的年龄！")
        9. </script>

        二．变量

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

    5. 学习路径

      1. 1.变量是什么
      2. 变量基本使用
      3. ☆变量的本质
      4. 变量命名规则与规范

2.2变量的基本使用

  • 目标:掌握变量的声明方式

  • 1.声明变量:

    • 要想使用变量，首先需要创建变量（专业说法:声明变量)语法:

    • let变量名

    • 3．更新变量:

      • 变量赋值后，还可以通过简单地给它一个不同的值来更新它。 ```css /声明了一个age变量,同时里面存放了18这个数据 let age = 18 //变量里面的数据发生变化更改为19 age = 19 //页面输出的结果为19 document.write(age)

//声明了一个age变量，同时里面存放了18这个数据 let age= 18 //这里不允许多次声明一个变量,没有理由重新声明变量 let age.= 19 //输出会报错 document.write(age)

  4. ```javascript
  5.  <script>
  6.         // 变量的作用：用来存储数据的容器
  7.         // 声明变量   变量名
  8.         // let age
  9.         //就是将  18这个数据存入草age这个变量里边去 = 赋值运算符
  10.         // age = 18
  11.         //变量不要加引号  "  "
  12.         // document.write(age)--------------
  14.         //声明变量且赋值，变量的初始化
  15.         let sex = '男'
  16.         //变量的更新  用let声明的变量可以多次赋值
  17.         sex = '女'
  18.         sex = '人妖'
  19.         document.write(sex)
  20.     </script>

总结:

  1. 变量就是一个容器，用来存放数据的。
  2. 变量通过let来声明通过=实现赋值。
  3. 变量通过变量名来获得里面的数据。
  4. 变量不允许多次声明。
  5. 最早变量声明使用var关键字，后期我们讲解var和 let区别

变量小练习：

  1. <script>
  2.         //用户在页面输入姓名,在页面上输出
  3.         // 将用户输入的名字（数据）保存到uname这个变量里边去
  4.         let uname = prompt('请输入您的姓名')
  5.         document.write(uname)
  6.     </script>

2.3 变量的本质

目标：能够说出变量的本质是什么

  • 内存:计算机中存储数据的地方，相当于一个空间
  • 变量:是程序在内存中申请的一块用来存放数据的小空间

2.4变量命名规则与规范

目标:能写出符合规范的变量名

  1. 规则:必须遵守，不遵守报错

  2. 规范:建议，不遵守不会报错，但不符合业内通识

    1. 规则:

      • 不能用关键字
      • 关键字:有特殊含义的字符，JavaScript内置的一些英语词汇。例如:let、var、if、for等
      • 只能用下划线、字母、数字、$组成，且数字不能开头
      • 字母严格区分大小写，如Age和l age是不同的变量

    2. 规范：

      1. 起名要有意义
      2. 遵守驼峰命名法
    3. 第一个单词首字母小写，后面每个单词首字母大写。例:userName
  1. <script>
  2.         //1.不能使用关键词来定义变量名
  3.         //2.let fot= 20
  4.         // 2.只能 —,字母，数字，$组成，不能是数字开头
  5.         // let $ = 20
  6.         //document.write($)
  7.         // 3.严格区分大小写
  8.         let age = 12
  9.         let AGE = 20
  10.         document.write(AGE)
  11.         // 4.驼峰命名法
  12.         let userName = 45
  13.     </script>

//用户在页面输入姓名，性别，年龄，在页面中输出案例

  1.  <script>
  2.         //用户在页面输入姓名，性别，年龄，在页面中输出
  3.         let userName = prompt('请输入您的姓名')
  4.         let sex = prompt('请输入您的性别')
  5.         let age = prompt('请输入您的年龄')
  6.         document.write(userName, sex, age)
  7.         //同时声明多个变量且赋值，逗号隔开
  8.         let pink = '王浩'
  9.         blue = "大小"
  10.         //在页面上输出多个变量
  11.         document.write(pink, blue)
  12.     </script>

二．数据类型

目标:知道JS里的数据类型有哪些，为后面的计算打基础

  1. 学习路径

    1. 数据类型
    2. 控制台输出语句和检测数据类型
  1.  <script>
  2.         //1.数字（数字）类型  number  数字类型不用加引号
  3.         let num = 20
  4.         let num2 = -12.3
  5.         //2.字符串类型  string 凡是用""包裹起来的都是字符串类型
  6.         // 字符串必须加引号
  7.         let uname = '小六'
  8.         let pig = '猪坚强'
  9.         let str = '12'
  10.         let str = `洗洗`
  11.         // 3.真假  布尔类型  只有两个值 true(真，对，开) false（假，错，关） Boolean
  12.         let boo = true
  13.         let boo2 = false
  14.         //4.undefined 声明了变量没有赋值  默认值就是undefined
  15.         let user
  16.         document.write(user)
  17.         //变量不生名，直接使用会报错
  18.         //document.write(abc)
  19.         //变量不声明，只赋值，不推荐使用
  20.         h = 20
  21.         document.write(h)
  22.     </script>

3.1数据类型–字符串类型(string)

通过单引号( “)、双引号(“”)或反引号包裹的数据都叫字符串，单引号和双引号没有本质上的区别，推荐使用单引号。

  1. let user_name = '小明";//使用单引号
  2. let gender =“男";//使用双引号
  3. let str = '123';//看上去是数字，但是用引号包裹了就成了字符串了
  4. let str1 ='' ;/这种情况叫空字符串

  • 注意事项:

    1. 无论单引号或是双引号必须成对使用
    2. 单引号/双引号可以互相嵌套，但是不以自已嵌套自已(口诀:外双内单，或者外单内双)
    3. 必要时可以使用转义符\，输出单引号或双引号

3.2 检测数据类型

  1. <script>
  2.         let age = 18
  3.         let uname = '猪八戒'
  4.         let flag = true
  5.         let pig
  6.         //控制台输出语句
  7.         //typeof  检测数据类型
  8.         console.log(typeof age); //number
  9.         console.log(typeof uname); //string
  10.         console.log(typeof true); //boolean
  11.         console.log(typeof pig);  //undefined
  12.     </script>

3.3 交换两个变量的值

  1.  <script>
  2.         //核心思路：使用一个临时变量  用来做中间的存储
  3.         //两个变量  num1 = 10 num2 = 20  交换2个变量的值
  4.         //交换之后  num1里边存的是20  num2里边存的是10
  5.         let num1 = 10,
  6.             num2 = 20
  7.         let temp
  8.         //将num1的值10赋值给temp，temp里边的值是 ~~~ 10
  9.         temp = num1
  10.         //将num2的值20赋值给num1,num1里边的值就是  ···20
  11.         num1 = num2
  12.         // 将temp 的值，赋值给num2，num2的值就是  ~~~ 10 
  13.         num2 = temp
  14.         console.log(num1, num2);
  15.     </script>
  16. </body>

3.4 算数运算符

小案例

  1.   //用户输入的半径，在页面中显示圆的面机  p*r*r
  2.         let r = prompt('请输入圆的半径')
  3.         let p = 3.14
  4.         let area = p * r * r
  5.         document.write(area)

显示姓名和年龄的案例

  1. let uname = prompt('请输入您的姓名')
  2. let age = prompt('请输入您的年龄')
  3. document.write('大家好,我叫' + uname + '今年' + age + '岁')
  4. /*另一种写发*/
  5.  document.write(`大家好，我叫${uname}今年 ${age}`)

三、数据类型的转换

1.1 隐士数据类型转换

某些运算符被执行时，系统内部自动将数据类型进行转换，这种转换称为隐式转换。

  1. 规则:≥+号两边只要有一个是字符串，都会把另外一个转成字符串
  2. 除了+以外的所有算术运算符都会把数据转成数值类型
  3. 缺点:转换类型不明确，靠经验才能总结

1.2 显示数据类型转换

  1.    <script>
  2.         //显示数据类型
  3.         let a = '30'
  4.         let b = 20
  5.         let c = true
  6.         let d = false
  7.         let e = '啊哈哈哈'
  8.         let f
  9.         //在转换类型（运算）的时候，true是1，false是0
  10.         let num1 = Number(a)
  11.         console.log(num1, typeof num1)
  12.         //在转换类型（运算）的时候，true是1，false是0 
  13.         let num2 = Number(d)
  14.         console.log(num2, typeof num2)
  15.         let num3 = Number(e)
  16.         // NaN not a number 不是一个数字，代表非数字，还是数字类型
  17.         let num4 = Number(f)
  18.         console.log(num4, typeof num4)
  19.     </script>

JavaScript 基础 - 第1天

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

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

一、介绍

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

1.1 引入方式

JavaScript 程序不能独立运行，它需要被嵌入 HTML 中，然后浏览器才能执行 JavaScript 代码。通过 script 标签将 JavaScript 代码引入到 HTML 中，有两种方式：

内联形式

通过 script 标签包裹 JavaScript 代码

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

外联形式

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

  1. // demo.js
  2. document.write('嗨，欢迎来传智播学习前端技术！');
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>JavaScript 基础 - 引入方式</title>
  6. </head>
  7. <body>
  8.   <!-- 外联形式：通过 script 的 src 属性引入独立的 .js 文件 -->
  9.   <script src="demo.js"></script>
  10. </body>
  11. </html>

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>JavaScript 基础 - 引入方式</title>
  6. </head>
  7. <body>
  8.   <!-- 外联形式：通过 script 的 src 属性引入独立的 .js 文件 -->
  9.   <script src="demo.js">
  10.     // 此处的代码会被忽略掉！！！！
  11.       alert(666);  
  12.   </script>
  13. </body>
  14. </html>

1.2 注释和结束符

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

单行注释

使用 // 注释单行代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>JavaScript 基础 - 注释</title>
  6. </head>
  7. <body>
  9.   <script>
  10.     // 这种是单行注释的语法
  11.     // 一次只能注释一行
  12.     // 可以重复注释
  13.     document.write('嗨，欢迎来传智播学习前端技术！');
  14.   </script>
  15. </body>
  16. </html>

多行注释

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>JavaScript 基础 - 注释</title>
  6. </head>
  7. <body>
  9.   <script>
  10.     /* 这种的是多行注释的语法 */
  11.     /*
  12.         更常见的多行注释是这种写法
  13.         在些可以任意换行
  14.         多少行都可以
  15.       */
  16.     document.write('嗨，欢迎来传智播学习前端技术！');
  17.   </script>
  18. </body>
  19. </html>

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

结束符

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>JavaScript 基础 - 结束符</title>
  6. </head>
  7. <body>
  9.   <script> 
  10.     alert(1);
  11.     alert(2);
  12.     alert(1)
  13.     alert(2)
  14.   </script>
  15. </body>
  16. </html>

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

1.3 输入和输出

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

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

输出

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

alert()、document.wirte()

以数字为例，向 alert() 或 document.write()输入任意数字，他都会以弹窗形式展示（输出）给用户。

输入

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>JavaScript 基础 - 输入输出</title>
  6. </head>
  7. <body>
  9.   <script> 
  10.     // 1. 输入的任意数字，都会以弹窗形式展示
  11.     document.write('要输出的内容');
  12.     alert('要输出的内容');
  14.     // 2. 以弹窗形式提示用户输入姓名，注意这里的文字使用英文的引号
  15.     prompt('请输入您的姓名:');
  16.   </script>
  17. </body>
  18. </html>

二、变量

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

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

  1. <script>
  2.   // x 符号代表了 5 这个数值
  3.   x = 5;
  4.   // y 符号代表了 6 这个数值
  5.   y = 6;
  7.   //举例： 在 JavaScript 中使用变量可以将某个数据（数值）记录下来！
  9.   // 将用户输入的内容保存在 num 这个变量（容器）中
  10.   num = prompt('请输入一数字!');
  12.   // 通过 num 变量（容器）将用户输入的内容输出出来
  13.   alert(num);
  14.   document.write(num);
  15. </script>

2.1 声明和赋值

声明

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>JavaScript 基础 - 声明和赋值</title>
  6. </head>
  7. <body>
  9.   <script> 
  10.     // let 变量名
  11.     // 声明(定义)变量有两部分构成：声明关键字、变量名（标识）
  12.     // let 即关键字，所谓关键字是系统提供的专门用来声明（定义）变量的词语
  13.     // age 即变量的名称，也叫标识符
  14.     let age;
  15.   </script>
  16. </body>
  17. </html>

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

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

赋值

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>JavaScript 基础 - 声明和赋值</title>
  6. </head>
  7. <body>
  9.   <script> 
  10.     // 声明(定义)变量有两部分构成：声明关键字、变量名（标识）
  11.     // let 即关键字，所谓关键字是系统提供的专门用来声明（定义）变量的词语
  12.     // age 即变量的名称，也叫标识符
  13.     let age;
  14.     // 赋值，将 18 这个数据存入了 age 这个“容器”中
  15.     age = 18;
  16.     // 这样 age 的值就成了 18
  17.     document.write(age);
  19.     // 也可以声明和赋值同时进行
  20.     let str = 'hello world!';
  21.     alert(str);
  22.   </script>
  23. </body>
  24. </html>

2.2 关键字

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

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

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

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

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

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

2.3 变量名命名规则

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

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

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>JavaScript 基础 - 变量名命名规则</title>
  6. </head>
  7. <body>
  9.   <script> 
  10.     let age = 18; // 正确
  11.     let age1 = 18; // 正确
  12.     let _age = 18; // 正确
  14.     // let 1age = 18; // 错误，不可以数字开头
  15.     let $age = 18; // 正确
  16.     let Age = 24; // 正确，它与小写的 age 是不同的变量
  17.     // let let = 18; // 错误，let 是关键字
  18.     let int = 123; // 不推荐，int 是保留字
  19.   </script>
  20. </body>
  21. </html>

三、数据类型

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

计算机程序可以处理大量的数据，为了方便数据的管理，将数据分成了不同的类型：

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>JavaScript 基础 - 数据类型</title>
  6. </head>
  7. <body>
  9.   <script> 
  10.     // 检测 1 是什么类型数据，结果为 number
  11.     document.write(typeof 1);
  12.   </script>
  13. </body>
  14. </html>

3.1 数值类型

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>JavaScript 基础 - 数据类型</title>
  6. </head>
  7. <body>
  9.   <script> 
  10.     let score = 100; // 正整数
  11.     let price = 12.345; // 小数
  12.     let temperature = -40; // 负数
  14.     document.write(typeof score); // 结果为 number
  15.     document.write(typeof price); // 结果为 number
  16.     document.write(typeof temperature); // 结果为 number
  17.   </script>
  18. </body>
  19. </html>

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

3.2 字符串类型

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

注意事项：

  1. 无论单引号或是双引号必须成对使用
  2. 单引号/双引号可以互相嵌套，但是不以自已嵌套自已
  3. 必要时可以使用转义符 \，输出单引号或双引号
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>JavaScript 基础 - 数据类型</title>
  6. </head>
  7. <body>
  9.   <script> 
  10.     let user_name = '小明'; // 使用单引号
  11.     let gender = "男"; // 使用双引号
  12.     let str = '123'; // 看上去是数字，但是用引号包裹了就成了字符串了
  13.     let str1 = ''; // 这种情况叫空字符串
  15.     documeent.write(typeof user_name); // 结果为 string
  16.     documeent.write(typeof gender); // 结果为 string
  17.     documeent.write(typeof str); // 结果为 string
  18.   </script>
  19. </body>
  20. </html>

3.3 布尔类型

表示肯定或否定时在计算机中对应的是布尔类型数据，它有两个固定的值 true 和 false，表示肯定的数据用 true，表示否定的数据用 false。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>JavaScript 基础 - 数据类型</title>
  6. </head>
  7. <body>
  9.   <script> 
  10.     //  pink老师帅不帅？回答 是 或 否
  11.     let isCool = true; // 是的，摔死了！
  12.     isCool = false; // 不，套马杆的汉子！
  14.     document.write(typeof isCool); // 结果为 boolean
  15.   </script>
  16. </body>
  17. </html>

3.4 undefined

未定义是比较特殊的类型，只有一个值 undefined，只声明变量，不赋值的情况下，变量的默认值为 undefined，一般很少【直接】为某个变量赋值为 undefined。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>JavaScript 基础 - 数据类型</title>
  6. </head>
  7. <body>
  9.   <script> 
  10.     // 只声明了变量，并末赋值
  11.     let tmp;
  12.     document.write(typeof tmp); // 结果为 undefined
  13.   </script>
  14. </body>
  15. </html>

注：JavaScript 中变量的值决定了变量的数据类型。

四、运算符

理解运算符是计算机处理数据的最基本方式，掌握常见运算符的使用

运算符中 JavaScript 处理数据有最基本方式，如加、减、乘、除等。

4.1 数学运算符

数学运算符也叫算术运算符，主要包括加、减、乘、除、取余（求模）。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>JavaScript 基础 - 运算符</title>
  6. </head>
  7. <body>
  9.   <script> 
  10.     // 1. 加法
  11.     // 班级有男生31名，女生 23名，问全班总共多少人？
  13.     let boy = 31;
  14.     let girl = 23;
  15.     // 合计 求和
  16.     let total = boy + girl;
  17.     console.log(total); // 结果为 54
  19.     // 2. 减法
  20.     // 全班总共 54 人，请假 2 人，问今日出勤人数？
  21.     // 缺席 2 人
  22.     let absence = 2;
  23.     console.log(total - absence); // 结果为 52
  25.     // 3. 乘法
  26.     // 每天背两个单词，150天后共记住多少单词？
  27.     let wordsPerDay = 3;
  28.     console.log(wordsPerDay * 150); // 结果为 300
  30.     // 4. 除法
  31.     // 学费总计 1980元，学习 100天，平均每天学费多少钱？
  32.     let fee = 22980
  33.     console.log(fee / 100); // 结果为 198
  35.     // 5. 取余
  36.     // 全班总共 54人，按报名顺序以5个人为单位进行分组
  37.     // 总共可以分成几组？
  38.     // 最后一组多少人？
  39.     console.log(total % 5); // 结果为 4
  41.     /*********** 华丽的分隔线 ***********/
  42.     // + 运算符有两层含义：
  43.     // 除了上述的数学运算外
  44.     // 还可以用于字符串的拼接
  46.     let str1 = 'hello ';
  47.     let str2 = 'world!';
  48.     console.log(str1 + str2); // 结果为 hello world!
  49.   </script>
  50. </body>
  51. </html>

4.2 优先级

同时使用多个运算符编写程序时，会按着某种顺序先后执行，我们称为优先级。优先级越高越先被执行，优先级相同时以书从左向右执行。

  1. 乘、除、取余优先级相同
  2. 加、减优先级相同
  3. 乘、除、取余优先级大于加、减
  4. 使用 () 可以提升优先级
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>JavaScript 基础 - 运算符优先级</title>
  6. </head>
  7. <body>
  8.   <script> 
  9.     let a = 10;
  10.     let b = 12;
  11.     let t = 5;
  12.     let f = 8;
  14.     // * 的优先级高，所以先计算 b * t = 60
  15.     // + 和 - 的优先级相同，从左向右执行
  16.     console.log(a + b * t - f); // 结果为 62
  18.     // * / % 优先级一致，从左向右执行
  19.     console.log(b * t / a % t); // 结果为 1
  21.     // 虽然 * 的优先级大于 + 但是通过 () 提升了优先级
  22.     // 先执行 + 运算，再执行 * 运算
  23.     console.log((t + f) * a); // 结果为 130
  24.   </script>
  25. </body>
  26. </html>

五、类型转换

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

在 JavaScript 中数据被分成了不同的类型，如数值、字符串、布尔值、undefined，在实际编程的过程中，不同数据类型之间存在着转换的关系。

5.1 隐式转换

某些运算符被执行时，系统内部自动将数据类型进行转换，这种转换称为隐式转换。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>JavaScript 基础 - 隐式转换</title>
  6. </head>
  7. <body>
  8.   <script> 
  9.     let num = 13; // 数值
  10.     let num2 = '2'; // 字符串
  12.     // 结果为 132
  13.     // 原因是将数值 num 转换成了字符串，相当于 '13'
  14.     // 然后 + 将两个字符串拼接到了一起
  15.     console.log(num + num2);
  17.     // 结果为 11
  18.     // 原因是将字符串 num2 转换成了数值，相当于 2
  19.     // 然后数值 13 减去 数值 2
  20.     console.log(num - num2);
  22.     let a = prompt('请输入一个数字');
  23.     let b = prompt('请再输入一个数字');
  25.     alert(a + b);
  26.   </script>
  27. </body>
  28. </html>

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

补充介绍模板字符串的拼接的使用

5.2显式转换

编写程序时过度依靠系统内部的隐式转换是不严禁的，因为隐式转换规律并不清晰，大多是靠经验总结的规律。为了避免因隐式转换带来的问题，通常根逻辑需要对数据进行显示转换。

Number

通过 Number 显示转换成数值类型，当转换失败时结果为 NaN（Not a Number）即不是一个数字。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>JavaScript 基础 - 隐式转换</title>
  6. </head>
  7. <body>
  8.   <script>
  9.     let t = '12';
  10.     let f = 8;
  12.     // 显式将字符串 12 转换成数值 12
  13.     t = Number(t);
  15.     // 检测转换后的类型
  16.     // console.log(typeof t);
  17.     console.log(t + f); // 结果为 20
  19.     // 并不是所有的值都可以被转成数值类型
  20.     let str = 'hello';
  21.     // 将 hello 转成数值是不现实的，当无法转换成
  22.     // 数值时，得到的结果为 NaN （Not a Number）
  23.     console.log(Number(str));
  24.   </script>
  25. </body>
  26. </html>

Boolean

布尔类型只有两个值，true 和 false，通过 Boolean 显式将其它数据类型转成布尔值。非零数值均被转成 true，非空字符串均被转成 true。

通过 Boolean 转换得到的布尔类型被称为真/假值，转换为 true 称为真值，转换为 false 称为假值。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>JavaScript 基础 - 隐式转换</title>
  6. </head>
  7. <body>
  8.   <script>
  9.     let zero = 0;
  10.     // zero = '0';
  12.     // 数值 0 会被转换为 false
  13.     // 字符串 0 会被转成 true
  14.     console.log(Boolean(zero));
  16.     let str1 = 'false';
  17.     // 字符串 false 会被转换为 true
  18.     console.log(Boolean('false'));
  20.     let empyStr = '';
  21.     // 空字符串，会被转换为 false
  22.     console.log(Boolean(empyStr))
  24.     // 能够通过 Boolean 转换为布尔类型的数据，被称为真/假值
  25.     // 如果被转换为 true 则为真值
  26.     // 如果被转换为 false 则为假值
  27.   </script>
  28. </body>
  29. </html>