JS 的组成

JavaScript 是由 ECMAScript，DOM 和 BOM 三者组成的。
1. ECMAScript: 定义了JavaScript 的语法规范,描述了语言的基本语法和数据类型
2. DOM (Document Object Model): 文档对象模型
  - 有一套成熟的可以操作 ==页面元素的 API==，通过 DOM 可以操作页面中的元素。比如：增加个 div，减少个 div，给 div 换个位置等
    - API:
      - application programming interface 的简写;
      - 翻译：应用程序编程接口；大白话：别人写好的代码，或者编译好的程序，提供给你使用，就叫作api
3. BOM (Browser Object Model): 浏览器对象模型
  - 有一套成熟的可以操作 ==浏览器的 API==，通过 BOM 可以操作浏览器。比如：弹出框、浏览器跳转、获取分辨率等

js 的三种书写方式

行内式

<input type="button" value="按钮" onclick="alert('hello world')" />

内嵌式

<body>
    <script>
        alert('hello world')
    </script>
</body>

外链式
```
<script src="main.js"></script>
```

js 定义变量

什么是变量？

变量是计算机内存中存储数据的标识符，根据变量名称可以获取到内存中存储的数据；
- 翻译为大白话，我有一个东西需要暂时存储起来，比如说就是一个数字 100，我把它存放到了变量 a 中，我后续想要使用他的时候就可以直接通过变量 a 获取到数字 100
变量其实就相当于一个容器，内部可以存储任意类型的数据，使用变量时，用的是内部存储的数据。

为什么要定义变量？

使用变量可以方便的获取或者修改内存中的数据

如何定义变量

使用一个 var 的关键字进行定义，后面必须加一个空格，空格后面自定义变量名

var a;
var b;
var c;

变量赋值

变量定义之后，初始时没有进行赋值，内部有一个默认存储的值叫 undefined(未定义) 表示内部未赋值，但可以存储数据了
变量赋值的方式：通过等号 = 赋值，等号右边的值赋值给左边的变量 ==（等号在 JS 中叫做赋值号；书写时，等号 = 两侧习惯书写一个空格）==

// 变量定义
var a;
// 变量赋值
a = 1;
// 变量定义并赋值
var b = 2;

使用变量

直接写变量名即可使用变量；变量在使用前，必须先有定义，如果没有定义，会出现引用错误

课堂案例

交换变量, 需求: 交换两个变量所保存的值

变量命名规则（必须遵守，不遵守会报错）

由字母、数字、下划线、$符号组成，不能以数字开头
字母区分大小写
不能是关键字和保留字
- 关键字指的是js中有特殊功能的小词语，比如var、for等
- 保留字指的是现在没有特殊功能，但是将来新语法中有可能作为关键字使用

变量命名规范（建议遵守的，不遵守不会报错）

变量名必须有意义
遵守驼峰命名法

js 数据类型

JS中的值，无论是字面量还是变量，都有明确的类型

数据类型分类(以基本数据类型为主)
- Number 数字类型
  - 不区分整数、浮点数、特殊值，都是 Number 类型
- String 字符串类型
  - 所有的字符串都是 String 类型
- undefined undefined类型
  - ndefined本身就是一个数据，表示未定义，变量只声明不赋值的时候，值默认是 undefined
- Boolean 布尔类型
  - Boolean 字面量：只有 true 和 false 两个字面量的值，必须是小写字母
  - 计算机内部存储：true 为 1，false 为 0
- null null类型
  - null 本身就是一个数据
  - 从逻辑角度，null 值表示一个空对象指针
  - 如果定义的变量准备在将来用于保存对象，最好该变量初始化为 null
- Object 对象类型（后续课程详细讲解）

数据类型检测

为什么要有数据类型检测？
- JS语言是一门动态类型的语言，变量并没有一个单独的数据类型，而是会随着内部存储数据的变化，数据类型也会发生变化
- 变量的数据类型，与内部存储数据有关
- 将来使用变量时，需要知道内部存储的数据是什么类型，避免程序出错
使用 typeof 的方法进行数据检测
- 检测方式：在 typeof 后面加小括号执行，将要检测的数据放在小括号内部

数据类型转换(转数值 / 转字符串 / 转布尔)

转数值

Number(数据)方法
- 转型函数Number()可以用于任何数据类型，将其他数据类型转为数字
- 字符串：纯数字字符串转为对应数字，空字符串和空白字符串转为0，非空非纯数字字符串转为NaN
- 布尔值：true转为1，false转为0
- undefined：转为NaN
- null：转为0
parseInt()方法：字符串转整数方法
- 对浮点数进行取整操作
  - 对数字取整直接舍弃小数部分，只保留整数
- 将字符串转为整数数字
  - 将字符串转为整数数字，也包含取整功能
- 字符串中，必须是纯数字字符串或者数字字符开头的字符串，才能转换为正常数字，且只取整数部分
- 如果不是数字打头的字符串，会转换为NaN
parseFloat()方法：字符串转浮点数方法
- 将字符串转为浮点数数字
- 满足浮点数数字字符必须在字符串开始，如果不在开始返回值都是NaN

转字符串

变量.toString()方法
String(变量)方法，有些值没有toString()，这个时候可以使用String()。比如undefined和null
+ 号拼接字符串方式
- num + “” ,当 + 两边一个操作符是字符串类型，一个操作符是其他类型的时候，会先把其他类型转换成字符串在进行字符串拼接，返回字符串

转布尔

Boolean(变量)方法
- 转型函数Boolean()可以用于任何数据类型，将其他数据类型转为布尔类型的值
- 转为false：NaN、0、“”空字符串、null、undefined
- 转为true：非0 非NaN数字、非空字符串

js 运算符

什么是运算符？
- 也叫操作符，是 JS 中发起运算最简单的方式，例如： 5 + 6
- 表达式的组成包含操作数和操作符，表达式会得到一个结果，然后用结果参与程序

JS 运算符分类

算数运算符( + / - / * / / / % )
- 运算顺序与数学中的运算顺序一致，先乘除取余，后加减，有小括号先算小括号
赋值运算符( = / += / -= / *= / /= / %= )
比较运算符( > / < / >= / <= / == / === / != / !== )
- 比较结果只会返回一个布尔类型值，true 或者 false
逻辑运算符( && / || / ! )
自增自减运算符( ++ / -- )

什么是分支语句

JS 代码是从上往下按照顺序依次执行的, 从第一行代码一直执行到最后一行
如果有一种情况是我有两段代码, 我只需要执行其中一个即可, 那么就可以用到分支语句
简单来说: 分支语句就是根据我们设定好的条件来决定要不要执行某些代码

if 分支语句

if 分支语句的基本书写

语法: if (条件) { 想要执行的代码 }

if (true) {
    console.log('因为条件是 true 所以 我可以打印出来')
}
/**
 * 语法分析:
            if: 关键字,表明后续是一段if分支语句
            (): 小括号内部填写条件, 用于决定是否执行后续内容
            {}: 花括号内部填写要执行的分支代码, 如果条件为真, 则会执行
*/

if ... else 语句的基本书写

语法: if (条件) { 条件为真时执行的代码 } else { 条件为假时执行的代码 }

if (true) {
    console.log('因为条件是 true 所以 我可以打印出来')
} else {
    console.log('因为条件是 true 所以 我不会被打印')
}
if (false) {
    console.log('因为条件是 false 所以 我不会被打印')
} else {
    console.log('因为条件是 false 所以 我可以打印出来')
}
/**
 * 语法分析:
            if: 关键字,表明后续是一段if分支语句
            (): 小括号内部填写条件, 用于决定是否执行后续内容
            {}: 花括号内部填写要执行的分支代码, 如果条件为真, 则会执行
            else: 表明前边条件都为false时,执行后续的花括号内的代码

*/

if 嵌套语句的基本书写
- 可以通过 if 和 else if 来设置多个条件进行判断
- 语法: if(条件1){条件1为true时执行} else if (条件2){条件2为true时执行}
- 会从头开始依次判断条件
  - 如果第一个条件为 true 了, 那么就会执行后面的 {} 的内容
  - 如果第一个条件为 false, 那么就会判断第二个条件
  - 如果第二个条件也为 false, 那么会依次往后执行
- 注意
  - 多个 {} 只会有一个被执行, 一旦有一个条件为 true 了, 后面的就不再判断了
  - 如果所有的条件都为 false, 那么会执行最后的 else {} 分支
  - 如果所有的条件都为 false, 且没有最后的 else {} 分支, 那么当前 if 分支不会有任何代码段会被执行
尽可能多的使用案例帮助学员理解和使用

switch 分支语句

switch 也是条件判断语句的一种, 是对于某一个变量的判断(全等的判断,数据类型不一致时会导致判断失败)

switch 分支语句的基本书写

switch (要判断的变量) {
    case 情况1:
        情况1执行的代码
        break;
    case 情况2:
        情况2执行的代码
        break;
    case 情况3:
        情况3执行的代码
        break;
    default:
        上述情况都不满足时执行的代码
}

switch 通常是判断某一个变量等于某一个值的时候使用, 比如用户输入一个数字显示今天周几, 输入一个数字显示今天是几月

switch 穿透语句的基本书写

从第一个满足条件的 case 开始
如果没有 break, 后面的条件不在判断, 直接执行代码
直到遇到一个 break 或者 switch 结束

switch (2) {
    case 0:
        console.log('星期日')
    case 1:
        console.log('星期一')
    case 2:
        console.log('星期二')
    case 3:
        console.log('星期三')
    case 4:
        console.log('星期四')
    case 5:
        console.log('星期五')
    case 6:
        console.log('星期六')
    default:
        console.log('请填写一个 0 ~ 6 的数字')
}

尽可能多的使用案例帮助学员理解和使用

三元表达式

三元表达式(三元运算/三目运算/三目)
语法
- 条件 ? 真-执行的代码 : 假-执行的代码
意义
- 对 if else 语句的简写
注意
- 执行代码的位置只能写一句话
常用场景
- 利用三目执行代码(对if else 的优化)
- 利用三目给变量赋值

// 执行代码
var num = 5
num % 2 == 0 ? console.log('num 为偶数') : console.log('num 为奇数')

// 给变量赋值
var num = 1 // 我们暂且规定 num == 1 时代表为男性, num == 2 时代表为女性
var gender = num == 1 ? '男' : '女'
console.log(gender)

函数的概念

什么是函数？
- 首先明确一点，和我们数学中的函数是两个概念
- 在 JS 中，函数可以理解为将一段在程序中多次出现的代码封装起来的盒子，以便在多个地方调用执行
- 换句话说：函数就是一个内部封装了部分代码的盒子，可以在多个位置被调用
函数的使用
- 创建函数（定义函数）
- 调用函数

函数的定义

声明式定义

function fn() {
    
}
/**
 * 分析：
 *      function：声明函数的关键字，代表接下来这段代码是一个函数
 *      fn：函数名，调用函数时需要使用，函数名自定义，符合命名规范和见名知意即可（!** 匿名函数时可以不写）
 *      ()：小括号内存放函数的参数（后续讲解）
 *      {}：存放函数代码，调用函数时，想执行的代码都写在内部
*/

赋值式定义

var fn = function () {

}

函数的调用

function fn1() {
    
}
var fn2 = function () {

}

fn1()
fn2()

声明式与赋值式的区别

书写区别
调用区别

// 声明式
fn1()  // 可以执行
function fn1(){
    // 函数代码。。。。。。
}
fn1()  // 可以执行


fn2()   // 不可以执行（!**  声明时编程，其实就是相当于将一个函数赋值给一个变量，会有变量的声明提升，所以在变量声明前调用时，根据变量声明提升的规则，此时变量为 undefined ，所以不能被调用）
var fn2 = function () {
    // 函数代码。。。。。。。。。
}
fn2()   // 可以执行

函数的参数

参数是什么？
- 如果没有参数，那么函数的执行功能是固定的，写好函数后内部内容将不会变
- 比如：函数内部的代码为 1 + 1，那么始终执行时始终都是 1 + 1，如果此时想要计算 1 + 2 的值，需要重新封装一个 1+2 的函数
参数在哪里？如何使用
- 书写函数时有一个 () 内部就是书写参数的，函数分为两种，形参---实参
形参和实参的区别
- 形参：在函数声明时 function 后边的（）内书写，每写一个参数，就相当于在函数内部创建一个变量，其值为函数调用时传递的值，只能在函数内部使用，不能在外部使用
- 实参：顾名思义，实际的参数，也就是函数在调用时传递的参数

function num () {
    console.log(1 + 1)
}
num()   // 打印值为 1+1

function num (a, b) {   // 此处 a b 为形参
    console.log(a + b)
}
num(1, 1)   // 此处为 实参，分别传递给 a  和  b
num(1, 2)   // 此处打印值为 1 + 2

注意
- 函数的形参与实参是按照从左到右的顺序一一对应的

// 少传参数
function num1(a, b, c, d) {
    console.log(a,b,c,d)
}
num1(1, 2, 3, 4)    // 打印1，2，3，4
num1(1, 2, 4) // 打印1，2，4，undefined
num1(4) // 打印4，undefined，undefined，undefined
// 多传参数
function num2 (a) {
    console.log(a)
}
num2(1, 2)  // 打印 1
num2(1)  // 打印 1

函数的返回值

返回值是什么？有什么作用
- 函数内部默认有一个 return 他的值就是函数的返回值，如果函数内部不写 return 那么函数默认在函数体内部最底部返回一个 undefined
- 如果不想返回 undefined 需要手动在函数内部写上 return 并且跟上需要返回的值
- 可以中断函数（后续通过代码演示）

function num (a, b) {
    a+b
}
var ab = num(1,2)
console.log(ab)

function num (a, b) {
    // return a + b
    console.log('函数内部执行的 a + b =',a+b)
}
var ab = num(1,2)
console.log('函数外部执行的 a + b =',ab)

函数的优点

函数其实就是将一段需要多次调用的代码抽离出来封装到一个盒子内部，方便在多个地方调用时简单化代码
- 抽离公共代码，项目代码整体更加简洁
- 方便（复用），在需要的地方直接函数名 + 小括号调用即可

函数的预解析

什么是预解析
- 在代码运行前，先全部分析一遍代码，这个行为叫做预解析（预解释）
预解析的内容
- 声明式函数定义
- var 声明变量

// 正常书写代码
fn()
console.log(a)

function fn() {
    console.log(100)
}
var a = 100

// 预解析后可以理解为
function fn() {
    console.log(100)
}
var a

fn()
console.log(a)

a = 100

循环语句

什么是循环语句
- 根据某些给出的条件,重复执行同一段代码
循环必须要有某些固定的内容组成
- 初始化
- 条件判断
- 要执行的代码
- 自身改变

while 循环语句

while，中文叫当…时，其实就是当条件满足时就执行代码，一旦不满足了就不执行了
语法 while (条件) { 满足条件就会执行 }
因为满足条件就执行, 所以我们写的时候一定要注意, 就是设定一个边界值, 不然就一直循环下去了, 简称: 死循环, 电脑卡死的时间根据电脑性能有所不同, 建议不要尝试

// 1. 初始化条件
var num = 0
// 条件判断
while (num < 10) {
    // 3. 要执行的代码
    console.log('当前 num 的值是: ', num)
    // 4. 自身改变
    num += 1    // 如果没有这行代码, 那么自身就没有改变, 条件将会一直满足, 代码也就会一直执行
}

do...while 循环语句

是一个和 while 循环类似的循环
while 会先进行条件判断, 满足就执行, 不满足就直接不执行了
do...while 的循环是先不管条件, 先执行一次, 然后再开始进行条件判断
语法: do { 要执行的代码 } while (条件)

// 1. 初始化
var num = 10;
do {
    // 3. 要执行的代码
    console.log('我执行了一次')
    // 4. 自身改变
    num += 1
// 2. 条件判断
} while (num < 10)

for 循环语句

和 while do while 循环都不太一样的一种循环结构
但道理是和其他两种一样的, 都是循环执行代码的
语法: for (var i = 0; i < 10; i++) { 要执行的代码 }

// 把初始化, 条件判断, 自身改变, 都统一写在了一起
for (var i = 1; i <= 10; i++) {
    console.log(i)  // 会打印 1~10
}
// 初次使用时会觉得有一点繁琐与不习惯, 但是用起来比较好用

流程控制语句

break 关键字的应用
- 在循环没有进行完毕的时候, 因为我设置的条件满足了, 就直接提前终止循环
- 举个例子: 我要吃五个包子, 我吃了三个了, 这时候吃饱了吃不下去了, 我就停止了继续吃包子这件事
- 那么此时要停止循环, 就可以直接使用 break 关键字

for (var i = 1; i <= 5; i++) {
    // 每循环一次,就吃一个包子
    console.log('我吃了一个包子')
    // 当 i == 3 的时候, 条件为 true, 执行了 {} 里面的代码终止循环, 循环就不会继续向下执行了, 也就没有 4 和 5 了
    if (i == 3) {
        break
    }
}

continue 关键字的应用
- 在循环中, 把循环的本次跳过去, 继续执行后续的循环
- 举个例子: 还是吃五个包子, 要吃第三个的时候, 第三个掉地上了, 所以就不吃第三个了, 继续吃第四个和第五个
- 跳过本次循环, 就可以使用 continue 关键字

for (var i = 1; i <= 5; i++) {
    // 当 i == 3 的时候, 执行 {} 里面的代码
    // {} 里面有 continue, 那么本次循环后面的代码就都不执行了
    // 自动算作 i 为 3 的这一次结束了, 去继续执行 i == 4 的那次循环
    if (i == 3) {
        console.log('这是第三个包子, 掉地下了, 我不吃了')
        continue
    }
    console.log('我吃了一个包子')
}

循环嵌套的书写

循环嵌套其实就是一个循环内部又写了一个循环

for (var i = 0; i < 3; i++) {   // 这个循环称为 外层循环
    for (var k = 1; k < 4; k++) {   // 这个循环称为 内层循环
        /**
         * 重点!!!
         *          两个循环的循环变量不能相同, 会有冲突
        */
    }
}

初识JS/ 变量/数据类型/分支语句/函数/循环语句