01-JavaScript入门

1.1 js三个组成部分

问题1：为什么要学习JavaScript?

一个前端网页主要由三门语言组成，他们之间是缺一不可的关系
- HTML：确定网页的结构
- CSS: 确定网页的样式
- JavaScript: 确定网页的行为(交互)
  - 众所周知，在前端开发中一个网页的源代码主要由三部分组成（HTML,CSS,Javascript）,其中HTML确定网页的结构，CSS确定网页的样式,而JavaScript则主要负责网页的行为（动态效果，交互事件等）。

总结：因为前端网页由三部分组成,HTML、CSS、JavaScript

问题2：JavaScript作用？

JavaScript作用:确定网页的行为交互
- 说人话：教网页做事请。

问题3：JavaScript三个组成部分？

ECMAScript - JavaScript的核心
- ECMAScript定义了JavaScript的语言规范
- JavaScript的核心：描述了语言的基本语法和数据类型，ECMAScript是一套标准，定义了一种语言的标准与具体实现无关
DOM - 文档对象模型
- 一套操作页面元素的API
- DOM可以把HTML看做是文档树，通过DOM提供的API可以对树上的节点进行操作
BOM - 浏览器对象模型
- 一套操作浏览器功能的API
- 通过BOM可以操作浏览器窗口，比如：弹出框、控制浏览器跳转、获取分辨率等

1.2 js三种书写位置

1-复习CSS代码的三种写法

1.行内样式：不推荐，因为不便于维护
- <h1 style="background: bisque">哈哈哈</h1>
2.内部样式：写在style标签中,如果界面css样式比较简单可以使用，复杂的话不推荐
- <style>.div{background: hotpink;}</style>
3.外部样式：写在css文件中，使用link导入
- <link rel="stylesheet" href="./01-css外联样式.css">
  - css外联样式的本质其实就是字符串替换将下方这行代码替换成对应文件的所有代码

2-JS代码三种写法

JavaScript也有三种书写方式，并且与CSS的三种书写方式几乎一致
1.行内样式：不推荐，因为不便于维护
- <button onclick="window.alert('js行内写法')">欢迎来到黑马程序员</button>
2.内部样式：写在script标签中,如果界面js代码较少可以使用，复杂的话不推荐
- <script >alert("这是JS内联样式")</script >
3.外部样式：写在js文件中，使用script的src属性导入
- <script src="./01-JS外联写法.js"></script>

3-细节注意点

1.无论是CSS还是JS的三种写法，当一个html文件存在多种写法时要记住HTML的代码是从上往下解析的
2.如果script标签没有src属性则表示内联样式，如果有src属性则表示外联样式，外联样式JS代码只能写在 js文件中而不能写在script标签中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 2.js外部写法 -->
    <script src="./js外部.js"></script>
</head>
<body>

    <!-- 1.行内写法 -->
    <button onclick="alert('01-行内写法')">我是按钮</button>
    
    <!-- 2-内部写法  -->
    <script>
        alert('02-我是js内部写法')
    </script>

</body>
</html>

<!-- js三种书写位置(与css一致)
1.行内写法 : 写在标签行内
2.内部写法 : 写在script标签内部
3.外部写法 : 写在js外部文件中,使用script标签的src属性导入
    * 注意： 如果script标签写了src属性，就表示外部写法。此时内部的js代码不会执行。
-->

1.3 js两种注释写法

代码注释的作用：
- 1.理清思路，方便自己以后阅读代码
- 2.规范编程，方便以后别人接手代码便于维护

JS注释有两种写法
- // 注释内容:单行注释：注释内容只能是一行，适用于注释内容较少
  - vscode快捷键 CTRL + /
- /* 注释内容 */:多行注释：注释内容可以是多行，适用于注释内容较多，比如一行写不下
  - vscode快捷键 ALT + SHIFT + A

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

<script>

    //单行注释：注释内容只能是这一行
    /* 多行注释：注释内容可以是多行
    第一行
    第二行
    */
</script>
</body>

</html>

1.4-输入与输出语句

输出语句1 : 在网页弹出一个提示框，输出数据

//输出语句1:弹出一个提示框，通常用于提示用户，也可以用于调试
alert("hello world");

输出语句2：在控制台打印某个数据

//输出语句2:打印某个数据的值，查看数据是否成功
//这个写法不是给用户看的，而是给程序员自己调试看的
console.log("欢迎大家来到黑马程序员");

输出语句3：将数据显示到网页

//输出语句3:将数据显示到网页，相当于给body添加内容
document.write("黑马程序员是中国最牛逼的IT培训机构");

输入语句1：在网页弹出一个输入框，让用户输入数据

//输入语句1：弹出一个输入框，可以用来输入数据
prompt("深圳的前端平均薪资是多少呀？");

输入语句2：在网页弹出一个确认框，让用户输入确认/取消二选一

//输入语句2：在网页弹出一个确认框，让用户输入 确认/取消 二选一
confirm("你确定你已经成年了吗？");

1.5-js代码执行原理介绍

1-计算机组成

1.软件
- 应用软件：浏览器(chrome/ie/firefox)、QQ、Sublime、Word、webstorm
- 系统软件：windows，Linux，unix，OSX，iOS，android
2.硬件
- 三大件：CPU,内存,硬盘
- 输入设备：鼠标,键盘,摄像头等
- 输出设备：显示器,打印机,投影仪等

2-代码运行的原理

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
    <!--

        程序运行原理：
        1.计算机将存储在硬盘中的html文件读取到内存中
        2.浏览器内核编译器开始编译代码（cpu只能处理二进制数据，需要将我们写的代码转成二进制）
        3.CPU处理与计算
        4.CPU将我们代码在运行时产生的数据保存到内存中

    -->

</body>

</html>

02-数据类型

1.1-数据类型介绍

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script>
        /* 本小节仅为帮助大家理解概念，不需要编写 */ 
        
        /* 
        1.为什么需要有数据类型？
            * 每一种编程语言都有自己的语法规则,在处理数据的时候,也会有自己的规则,不是任何数据都可以处理的。
        2.什么是数据类型？
            * js编译器在解析代码的时候,会产生各种不同的数据。 而不同的数据'运算'与'存储'方式都不同, 计算机需要对这些数据进行分类,称之为数据类型。
        */

        console.log( '123' )//打印  黑色 123
        console.log( 123 )//打印 蓝色 123
        console.log( 'true' )//打印 黑色 true
        console.log( true )//打印 蓝色 true
        console.log( '武汉前端' )//打印 武汉前端
        console.log( 武汉前端 )//程序报错 Uncaught ReferenceError: 武汉前端 is not defined
        
    </script>
</body>
</html>

1.2-五种基本数据类型

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>

  <body>
    <script>
      /*本小节学习目标 :  
          1. 掌握js五种基本类型语法  
          2. 掌握 string number boolean 类型作用 
      */

      //1. string类型 : 字符串 一切以  单引号''  双引号""  反引号``包起来的内容
      //作用 : 用于展示文本

      console.log("黑马程序员")
      console.log("武汉前端")
      console.log(`黑马颜值担当`)
      console.log('我"爱"前端')//嵌套字符串

      //2. number类型 : 数值 一切数学中的数字。
      //作用 : 用于数学计算

      console.log(123) //整数,默认正整数
      console.log(-123) //负数
      console.log(9.9) //小数
      console.log(Infinity) //特殊数值,无穷大

      //3. boolean类型 : 布尔 只有两个值 :  true(真)  false(假)
      //作用 : 用于条件判断  true:条件成立  false:条件不成立

      console.log(true)
      console.log(false)

      //4. undefined : 未定义  只有一个值 undefined
      console.log( undefined )

      //5. null : 空值  只有一个值 null
      console.log( null )
    </script>
  </body>
</html>

1.3-随堂练习：数据类型与输出语句

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script>
        /* 
        此练习为随堂练习：没有标准答案,老师会随堂抽查 
        练习目的: 
            (1) 了解数据类型的概念,知道js只能识别符合要求的数据,养成书写正确数据类型语法规范
            (2) 记住每一种数据类型的作用,可以结合场景思考选择合适的数据类型
        */

        //需求1  浏览器弹出对话框:  你好,js   
        //需求2  页面打印你的姓名, 如 : 张三
        //需求3  控制台打印你的年龄,如 : 20
        //需求4  控制台打印教室, 如 : 201
        
        
    </script>
</body>
</html>

1.4-typeof检测数据类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script>
        //(1) typeof 数据   (2) typeof (数据)
        //语法结果：得到一个字符串来告诉你这个数据是什么类型。 
        console.log( typeof 123 )//'number'
        console.log( typeof '123' )//'string'
        console.log( typeof true )//'boolean'
        console.log( typeof undefined )//'undefined'
        console.log( typeof null )//'object'
    </script>
</body>
</html>

03-变量

问题1：为什么要学习变量？

需求：弹出一个输入框，让用户输入自己的年龄，我们如何拿到用户输入的数据，并且显示在网页呢？
- 使用变量就可以获取到用户输入的数据

问题2：变量的作用？

==将数据存储在内存中==

问题3：变量原理

变量原理：内存中一块存储数据的空间
- 说人话：内存相当于现实世界中的大酒店，而变量相当于这个酒店中的一个小房间

1.1-变量声明/取值/赋值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script>
        
        //变量作用： 在内存中存储数据

        //1.声明变量 ： 在内存中开辟一个空间
        let age
        //2.变量赋值
        // = : 赋值运算符（把右边的数据放入左边的变量中）
        age = 18
        //3.变量取值 ： 读取变量(容器)中存储的数据
        document.write( age )

        //变量可以在声明的时候赋值
        let name = '班长'//等价于 (1) let name  (2)name = '班长'
        document.write( name )
    </script>
</body>
</html>

1.2-变量使用注意点

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>

    <script>
        /* 
        1.变量作用 ： 在内存中存储数据
        
        2.变量语法：
            2.1 声明变量 ：   let 变量名;
            2.2 变量赋值 :    变量名 = 值;
            2.3 变量取值 :    变量名

        3.变量使用注意点：
            3.1 变量不能重复声明，程序会报错
            3.2 变量重复赋值，会先销毁旧值，然后存入新值
            3.3 一个变量 赋值给 另一个变量，会将自己的数据拷贝一份然后赋值
        */

        //声明变量并且赋值
        let num1 = 10;

        /* 注意点1 ： 变量不能重复声明，否则程序会报错 */
        // let num1 = 20;

        /* 注意点2 ： 变量重复赋值，会先销毁旧值，然后存入新值 */
        num1 = 20;

        /* 注意点3 ： 一个变量 赋值给 另一个变量，会将自己的数据拷贝一份然后赋值 */
        let num2 = num1;

        console.log(num1,num2);
        
    </script>
</body>

</html>

1.3-变量命名规则与规范

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>

</body>

<script>
    /* 
        1.变量(letiable)作用 ： 在内存中 存储数据

        2.变量语法
            a. 声明变量  ：  let 变量名;
            b. 变量赋值  ：  变量名 = 值
            c. 变量取值  :   变量名 

        2.变量补充说明
            a. 变量初始化
                语法： let 变量名 = 值;
            b. let变量 不允许重复声明
            c. 变量重新赋值
                语法 : 变量名 = 值;
                特点 : 先销毁旧值，然后存入新值
            d. 变量的值是另一个变量
                语法 : 变量名a = 变量名b
                特点 : 将变量b中的数据， 拷贝一份赋值给a

        3.变量命名规则
            * 3.1规则：必须要遵守，否则会报错。由语法决定
                * 1.变量只能以下划线、字母、$开头，后面接任意的数字、下划线、字母、$
                * 2.不能以JS的关键字作为变量名
                * 3.js是严格区分大小写的， 例如：age与Age这是两个不同的变量名
            * 3.2规范: 大家都遵守的一种编码习惯，主要是为了提高代码的易读性
                * 1.起名要有意义，最好用英语名词作为变量名
     *          * 2.使用驼峰命名法：变量名第一个单词首字母小写，后面如果由其他单词则每一个单词的首字母大写

    */

        //存名字
        let name = '坤哥'
        //存年龄
        let age = 30
        //存性别
        let gender = '男'
        //存女朋友
        let girlFriend = '代码'

</script>

</html>

1.4-练习：变量语法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script>
        /* 
        此练习为随堂练习：没有标准答案,老师会随堂抽查 
        练习目的:  熟悉变量的声明、赋值、取值 语法

        需求1 ： 弹出一个输入框,让用户输入姓名
        需求2 ： 弹出一个输入框,让用户输入年龄
        需求3 ： 在页面打印 用户输入的 姓名与年龄
        需求4 ： 弹出一个确认框, 让用户选择确定还是取消
        需求5 ： 在控制台打印 用户刚才选择的结果(观察确认框的结果是什么数据类型)
        */    
    </script>
</body>
</html>

1.5-练习：交换两个变量的值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script>
        //需求：交换两个变量里面的值
        
        let num1 = 10
        let num2 = 20

        //思考：能否直接交换
        // num1 = num2
        // num2 = num1
        // console.log( num1,num2)//20 20

        //正确方式：使用临时变量交换
        let temp = num1
        num1 = num2
        num2 = temp
        console.log( num1,num2 )//20 21
        
        
        
    </script>
</body>
</html>

1.6-常量

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script>
        /* 
        变量 :  值可以修改, 使用let声明
        常量 :  值不可以修改,使用const声明
            * 例如  let G = 9.8  let PI = 3.14 
        */ 
        
        //变量可以修改值
        let age = 18
        age = 19
        console.log(age)

        //常量不可以修改值
        const G = 9.8
        G = 10//程序报错
        console.log(G)
        
        
    </script>
</body>
</html>

1.7-字面量

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script>
        /* 本小节为概念知识点,不需要学生写代码 */
        
        /* 
        js中的数据有两种使用方法
        第一种 :  先存入变量中, 通过变量取值语法来使用
            变量 :  指的是内存中的一块空间,里面的数据是可变的。(变量是内存空间)
        第二种 :  不存入变量中,直接拿来使用
            字面量 : 指的是一个固定的数据（字面量是数据）
        */

        // name是变量, '张三'是字面量
        let name = '张三'
        console.log( name )//变量取值,控制台打印'张三'

        console.log( '李四' )//字面量(又叫直接量)

        //字面量举例
        console.log( 123 )//数字字面量
        console.log( '123' )//字符串字面量
        console.log( true )//布尔字面量
        console.log( [10,20,30] )//数组字面量
        console.log( {name:'ikun'} )//对象字面量
        
        
        
    </script>
</body>
</html>

04-运算符与表达式

1.1-算术运算符

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <script>
      /* 
        1.运算符 : 有运算作用的符号
        2.算术运算符 : 用于 数学算术运算
            + - * / %(求模运算,相当于取余数) 
        3.表达式 : 由运算符组成的式子
        4.算术表达式 ： 由算术运算符组成的式子  例如   1+1
        重点： 任何表达式,都一定会有运算结果
      */

      //将表达式的结果存入变量
      let num = 1 + 1
      console.log(num) //2

      //直接打印表达式结果
      console.log(10 - 1) //9
      console.log(10 % 3) // 10除以3, 余数 1
    </script>
  </body>
</html>

1.2-赋值运算符

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



<script>
    /*赋值运算符 
    =  +=  -=  *=  /=   %=
    */

    //+=
    let num1 = 10;
    num1 += 10;//这行代码相当于 num1 = num1 + 10 的简写形式
    console.log ( num1 );//20
    //-=
    let num2 = 70;
    num2 -= 10; //相当于  num2 = num2 - 10;
    console.log(num2);//60
    //*=
    let num3 = 20;
    num3  *=  4;  //相当于  num3 = num3 * 4;
    console.log(num3);//80
    // /=
    let num4 = 90;
    num4 /= 3;//相当于 num4 = num4 / 3
    console.log(num4);//30

    let num5 = 10;
    num5 %= 3; // num5 = num5 % 3;
    console.log(num5);//1

</script>

</body>
</html>

1.3-自增自减运算符

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

<script>

    //1.自增运算符 ++
    //自增表达式:   num++
    let num1 = 10;
    num1++;//这行代码相当于 num1 = num1 + 1 的简写形式
    console.log ( num1 );//11

    //2.自减运算符 --
    //自减表达式： num--
    let num2 = 20;
    num2--;//这行代码相当于 num2 = num2 - 1 的简写形式
    console.log ( num2 );//12

</script>
</body>


</html>

1.4-关系运算符

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

</body>

<script>
    /**1.关系运算符（比较运算符）：比较两个数据之间的关系（某种条件是否成立）
        * 八种： >  >=  <  <=  ==  !=  ===全等 !== 不全等
    * 2.关系表达式：由关系运算符组成的式子    例如:  2 > 1
            * 只要是表达式，就会有运算结果
     * 3.关系表达式的结果一定是布尔类型：true代表成立，false代表不成立
     */

    //1.基本使用
    console.log ( 5 > 3 );//true  成立
    console.log ( 100 < 1 );//false 不成立

    //2.相等与不等:只比较数据的值，不比较数据的类型
    //注意：一个 = 号表示赋值运算符  两个 == 是比较运算符，它们作用不一样，不要搞混淆了
    console.log ( 1 == 1 );//true   常用
    console.log ( "1" == 1 );//true  他们的值一样，只是数据类型不一样

    //3.全等不全等： 先比较数据的值，再比较数据的类型
    console.log ( "1" === 1 );//false  两者的值虽然相等都是1，但是他们数据类型不一样，所以不成立


</script>
</html>

1.5-逻辑运算符

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

</body>
<script>

    /* 
        0.关系运算符：某种条件的关系（成立/不成立），例如我的年龄大于你的年龄30>20
        1.逻辑运算符：多个条件之间的关系
        2.逻辑运算符只有三种
            * && :逻辑与 ，读作并且
            * || :逻辑或，读作或者
            * !  :逻辑非，读作取反
                * true（真）变false（假），false（假）变true（真）
     * 3.逻辑表达式: 表达式1 逻辑运算符 表达式2 
     */

    //1.逻辑与&&结果： 一假为假     （左右两边同时成立，才为真，否则为假）
    //表达式1    &&  表达式2       运算结果
    //真              真             真
    //真              假             假
    //假              真             假
    //假              假             假
    console.log ( 100 > 50 && 10 > 9 );//true  左右两边同时成立
    console.log ( 100 > 500 && 10 > 9 );//false   因为左边不成立

    //普通丈母娘找女婿 ：  有房 有车 有存款     三个条件都要满足，缺一不可    



    //2.逻辑或 ||结果 : 一真则真  （左右两边同时为假，才为假，否则为真）
    //表达式1    ||  表达式2    运算结果
    //真               真         真
    //真               假         真
    //假               真         真
    //假               假         假

    console.log ( 100 > 500 || 10 > 9 );//true  只要有一边为真则为真
    console.log ( 100 > 500 || 8 > 9 );//false 只有两边都不成立才为假

    //我的丈母娘找女婿 ： 要么有房 要么有车 要么有存款   三个条件满足任何一个即可
    
    //3.逻辑非！ ： 又叫做取反  真变假 假变真
    //    ！    表达式   结果
    //           假       真
    //           真       假
    let res = !false;
    console.log ( res );//true  假变真，真变假
    console.log ( ! ( 2 > 1 ) );//false     2>1的结果是true    与true相反的就是false

    //有的丈母娘找女婿 ：只要不是外地的。   `非xxxx`类似于一种否定逻辑


</script>
</html>

1.6-练习：运算符

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <script>
      //请计算a、b、c、d结果  
      let a = 3 > 5 && 2 < 7 && 3 == 4
      console.log(a) //

      let b = 3 <= 4 || 3 > 1 || 3 != 2
      console.log(b) //

      let c = 2 === "2"
      console.log(c)//

      let d = !c || (b && a)
      console.log(d)//
    </script>
  </body>
</html>

1.7-运算符优先级

实际开发中，我们不需要刻意去记忆运算符优先级。你想让哪个式子先计算，使用小括号 () 包起来即可

5.1-数据类型转换介绍

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script>
        /* 本小节仅为介绍数据类型转换意义,不需要课堂敲代码 
            * 数据类型不一致,得不到预期计算结果
        */

        //需求：让用户输入两个数字，然后相加，打印结果
        let num1 = prompt('请输入第一个数字')
        let num2 = prompt('请输入第二个数字')
        
        let res = num1 + num2//'10' + '20'
        console.log( res )//'1020'
    </script>
</body>
</html>

5.2-转换为number类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script>
        //需求 ： 输入两个数字，计算两个数字的和
        // prompt输入框 得到的是string类型
        // var num1 = +prompt('请输入第一个数字');
        // var num2 = +prompt('请输入第二个数字');
        // console.log(num1,num2);
        // console.log(typeof num1,typeof num2);

        // var res = parseInt(num1) + parseInt(num2);
        // console.log(res);

        //

        /*  1.其他数据类型 转 Number
                语义明确（提高代码阅读性）
                parseInt() : 转换整数
                parseFloat() :转换小数
                Number() : 其他数据类型转数字 （boolean，undefined，null）

            2.注意点： 数据类型转换并没有改变原有变量的值，而是产生一个新的值
         */

        //1. parseInt() : 转换整数
        // 从左往右依次解析字符，遇到非数字字符停止解析，并且返回解析好的整数
        var str = '10';
        var num = parseInt(str);
        console.log(num);// 10
        console.log(str);// '10'   类型转换不改变原有变量的值，而是产生一个新的值
        
        console.log(typeof num);
        console.log(parseInt('123.1.1a'));//123
        

        //2.parseFloat() : 转换小数
        //解析规则与parseInt一致，唯一的区别就是可以识别第一个小数点
        var str = '5';
        var num = parseFloat(str);
        console.log(num);
        console.log(parseFloat('123.1.1a'));//123.1

        //3. Number() : 其他数据类型转数字
        /* 
        a. 可以解析整数和小数
        b. 只要有任意非数字字符得到NaN
         */
        console.log(Number('6'));
        console.log(Number('6.6'));
        console.log(Number('123.1.a'));
        

        //布尔类型转数字会得到0false和1 true

        console.log(Number(true));//1
        console.log(Number(false));//0

        console.log(Number(undefined));//NaN
        console.log(Number(null));//0
        
        
        
        
        
    </script>
</body>
</html>

5.3-number类型特殊值NaN

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script>
        //1.NaN是number类型中一个特殊值
        // not a number:不是一个数字，表示错误的运算结果

        console.log('张三-100')//NaN
        console.log( Number('黑马程序员') )//NaN

        //2.NaN不能参与任何计算，结果一律为NaN
        //NaN实际场景： 开发中，我们一般不会接触到NaN，除非你的代码出bug了，数学计算出错
        let num
        console.log( num + 1 )//我们忘记给num赋值，导致undefined 与 1 相加得到NaN
        
    </script>
</body>
</html>

5.4-转换为string类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script>
        let num = 200
        
        //1. String(数据)
        console.log( String(num) )//'200'
        console.log( String(true) )//'true'
        console.log( String(undefined) )//'undefined'
        console.log( String(null) )//'null'

        //2. 变量名.toString()
        /* a. 如果是undefined与null，这种方式会报错 
           b. 这种方式可以支持进制转换。 例如把 十进制转十六进制
        */
        console.log( num.toString() )//'200'
        console.log( num.toString(16) )//'c8'
        
        
    </script>
</body>
</html>

==5.5-转换为boolean类型==

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script>
        // Boolean(数据)
        /* 
        1.false： 有7种数据会得到false 
            0 -0 NaN  ''  undefined  null  false
        2.true:  除false 7种之外的一切数据
        */    

        console.log( Boolean(0) )//false
        console.log( Boolean(-0) )//false
        console.log( Boolean(NaN) )//false
        console.log( Boolean('') )//false
        console.log( Boolean(undefined) )//false
        console.log( Boolean(null) )//false
        console.log( Boolean(false) )//false

    </script>
</body>
</html>

5.6-隐式转换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script>
       /* 
       隐式转换 ： 当运算符两边的 ‘数据类型不一致’ 的时候，编译器会转成一致后运算
            (1)转换数字 ： 算术运算符 + - * / %
            (2)转换字符串 ： 连接符+  (+号两边只要有一边是字符串，此时+就是连接符)
            (3)转换布尔: 逻辑非 !    
       */     
       
       //1.转换数字 : 算术运算符
       console.log( '100' - 10 )//90  Number('100') - 10
       console.log( 1 + true )//2  1 + Number(true)
       console.log( +'10' )//10  +数学正号 Number(10)  
       
       //2.转换字符串 : 连接符
       console.log( '1' + true )//'1true'  '1' + String('true')

       //3.转换布尔 : !
       console.log( !1 )//false   !Boolean(1)
       console.log( !undefined )//true   !Boolean(undefined)
       
    </script>
</body>
</html>

5.7-undefined与null区别

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script>
        /* 
        1. undefined : 未定义。 当变量只声明,但是没有赋值。此时默认值是undefined
            * 说人话 : undefined相当于期房。 买了房,但是房子还没建出来。(未定义)

        2. null : 有定义。 定义的值是空值。
            * 说人话 ： null相当于毛坯房。买了房,但是房子没住人,里面是空的。(空值)
        */  
       
        //相同点 : (1)值相等 (2)转布尔类型都是false
        console.log( undefined == null )//true
        console.log( Boolean(undefined) )//false
        console.log( Boolean(null) )//false

        //不同点 : (1)数据类型不同  (2)转number类型值不同
        console.log( undefined === null )//false
        console.log( Number(undefined) )//NaN
        console.log( Number(null) )//0
        
    </script>
</body>
</html>

感觉到瓶颈期了，源码看的又不是很懂，重新看了下之前的笔记，发现数据转换这方面真的要好好弄懂，真的在后面无处不在

01-JavaScript入门

1.1 js三个组成部分

问题1：为什么要学习JavaScript?

问题2：JavaScript作用？

问题3：JavaScript三个组成部分？

1.2 js三种书写位置

1-复习CSS代码的三种写法

2-JS代码三种写法

3-细节注意点

1.3 js两种注释写法

1.4-输入与输出语句

输出语句1 : 在网页弹出一个提示框，输出数据

输出语句2：在控制台打印某个数据

输出语句3：将数据显示到网页

输入语句1：在网页弹出一个输入框，让用户输入数据

输入语句2：在网页弹出一个确认框，让用户输入 确认/取消 二选一

1.5-js代码执行原理介绍

1-计算机组成

2-代码运行的原理

02-数据类型

1.1-数据类型介绍

1.2-五种基本数据类型

1.3-随堂练习：数据类型与输出语句

1.4-typeof检测数据类型

03-变量

问题1：为什么要学习变量？

问题2：变量的作用？

问题3：变量原理

1.1-变量声明/取值/赋值

1.2-变量使用注意点

1.3-变量命名规则与规范

1.4-练习：变量语法

1.5-练习：交换两个变量的值

1.6-常量

1.7-字面量

04-运算符与表达式

1.1-算术运算符

1.2-赋值运算符

1.3-自增自减运算符

1.4-关系运算符

1.5-逻辑运算符

1.6-练习：运算符

1.7-运算符优先级

5.1-数据类型转换介绍

5.2-转换为number类型

5.3-number类型特殊值NaN

5.4-转换为string类型

==5.5-转换为boolean类型==

5.6-隐式转换

5.7-undefined与null区别

输入语句2：在网页弹出一个确认框，让用户输入确认/取消二选一