01-JavaScript介绍

问题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标签中

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

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

1.3 js两种注释写法

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

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

1.4-输入与输出语句

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

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

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

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

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

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

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

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

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

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

02-数据类型

1.1-五种基本数据类型

1. string类型 : 字符串一切以单引号'' 双引号"" 反引号``包起来的内容

作用 : 用于展示文本

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 )

1.2-typeof检测数据类型

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

03-变量

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

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

问题2：变量的作用？

将数据存储在内存中

问题3：变量原理

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

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

    <script>    
        变量作用： 在内存中存储数据

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

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

1.2-变量使用注意点

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

1.3-变量命名规则与规范

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

        存名字--let name = '鹏哥'
        存年龄--let age = 23
        存性别--let gender = '男'
</script>

1.4-常量

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

04-运算符与表达式

1.1-算术运算符

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

1.2-赋值运算符

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

1.3-自增自减运算符

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

1.4-关系运算符

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

1.5-逻辑运算符

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

1.6-运算符优先级

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

js基础<一>——数据类型，变量，运算符与表达式