JS是什么

JS是一种运行在客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能

JS 的组成

JavaScript 是由 ECMAScript，DOM 和 BOM 三者组成的
ECMAScript: 定义了JavaScript 的语法规范,描述了语言的基本语法和数据类型
DOM (Document Object Model): 文档对象模型
    有一套成熟的可以操作页面元素的 API，通过 DOM 可以操作页面中的元素。比如： 增加个 div，减少个 div，给 div 换个位置等
BOM (Browser Object Model): 浏览器对象模型
    有一套成熟的可以操作浏览器的 API，通过 BOM 可以操作浏览器。比如： 弹出框、浏览器跳转、获取分辨率等

js 的三种书写方式

行内式:<button onclick="alert('你好')">按钮</button>
内嵌式:内嵌式的script标签一般推荐写在body标签的尾部
    <script>
        alert('我是内嵌的JS')
    </script>
外链式:<script src="main.js"></script>

js 定义变量

什么是变量？

变量是计算机内存中存储数据的标识符，根据变量名称可以获取到内存中存储的数据
变量其实就相当于一个容器，内部可以存储任意类型的数据，使用变量时，用的是内部存储的数据

为什么要定义变量？

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

如何定义变量?

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

变量赋值

变量定义之后，初始时没有进行赋值，内部有一个默认存储的值叫 undefined(未定义) 表示内部未赋值，但可以存储数据了
变量赋值的方式：通过等号 = 赋值，等号右边的值赋值给左边的变量

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

使用变量

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

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

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

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

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

js 数据类型

数据类型分类(以基本数据类型为主)

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

数据类型检测

为什么要有数据类型检测？
    将来使用变量时，需要知道内部存储的数据是什么类型，避免程序出错
检测方式：
    在 typeof 后面加小括号执行，将要检测的数据放在小括号内部

数据类型转换

转数值

1.Number(数据)方法
    转型函数Number()可以用于任何数据类型，将其他数据类型转为数字
    字符串：纯数字字符串转为对应数字，空字符串和空白字符串转为0，非空非纯数字字符串转为NaN
    布尔值：true转为1，false转为0
    undefined：转为NaN
    null：转为0
2.parseInt()方法：字符串转整数方法
    对数字取整直接舍弃小数部分，只保留整数将字符串转为整数数字
    将字符串转为整数数字，也包含取整功能
    字符串中，必须是纯数字字符串或者数字字符开头的字符串，才能转换为正常数字，且只取整数部分;如果不是数字打头的字符串，会转换为NaN
3.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
     逻辑运算符( `&&` / `||` / `!` )
     自增自减运算符( `++` / `--` )
     
运算符优先级:
    1. 小括号优先级最高
    2. 一元运算符++  --  !
    3. 算数运算符 先* / % 后+ -
    4. 比较运算符(大于小于)> >= < <=
    5. 比较运算符(等于不等于)== != === !==
    6. 逻辑运算符 先&& 后||
    7. 赋值运算符
     
 ! 两个等号与三个等号的区别:
     ==  在JS中判断时会隐式转换,也就是说 只会对比较值是否相等,不会对比数据类型
     ===  在JS中也叫全等,在判断的时候不会做隐式转换,也就是说,在对比时除了会对比值是否相等,还会判断数据类型是否一致

js 分支语句

if 分支语句

if 分支语句的基本书写:
    语法: `if (条件) { 想要执行的代码 }`
    if (true) {
    console.log('因为条件是 true 所以 我可以打印出来')
    }
    
    
   
if ... else 语句的基本书写:
    语法: `if (条件) { 条件为真时 执行的代码 } else { 条件为假时 执行的代码 }`
    if (true) {
    console.log('因为条件是 true 所以 我可以打印出来')
} else {
    console.log('因为条件是 true 所以 我不会被打印')
    }
    
    
    
if 嵌套语句的基本书写:
    语法: `if(条件1){条件1为true时执行} else if (条件2){条件2为true时执行}`
    会从头开始依次判断条件:
        如果第一个条件为 true 了, 那么就会执行后面的 {} 的内容
        如果第一个条件为 false, 那么就会判断第二个条件
        如果第二个条件也为 false, 那么会依次往后执行
    注意:
        多个 {} 只会有一个被执行, 一旦有一个条件为 true 了, 后面的就不再判断了
        如果所有的 条件都为 false, 那么会执行最后的 else {} 分支
        如果所有的条件都为 false, 且没有最后的 else {} 分支, 那么当前 if 分支不会有任何代码段会被执行

switch 分支语句

switch 也是 条件判断语句的一种, 是对于某一个变量的判断(全等的判断,数据类型不一致时会导致判断失败)
switch (要判断的变量) {
    case 情况1:
        情况1执行的代码
        break;
    case 情况2:
        情况2执行的代码
        break;
    case 情况3:
        情况3执行的代码
        break;
    default:
        上述情况都不满足时执行的代码
}


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

三元表达式(三元运算/三目运算/三目)

语法:`条件 ? 真-执行的代码 : 假-执行的代码`
意义:对 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 ? '男' : '女'

js 循环语句

循环必须要有某些固定的内容组成
- 初始化
- 条件判断
- 要执行的代码
- 自身改变

while 循环语句

当条件满足时就执行代码，一旦不满足了就不执行了
因为满足条件就执行, 所以我们写的时候一定要注意, 就是设定一个边界值, 不然就一直循环下去了, 简称: 死循环

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

do...while 循环语句

do...while 的循环是先不管条件, 先执行一次, 然后再开始进行条件判断
语法: do { 要执行的代码 } while (条件)

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

for 循环语句

语法: for (var i = 0; i < 10; i++) { 要执行的代码 }

// 把初始化, 条件判断, 自身改变, 都统一写在了一起
for (var i = 1; i <= 10; i++) {
    console.log(i)  // 会打印 1~10
}

流程控制语句

break 关键字

结束整个循环,不管循环后边还有几轮

for(var i = 1; i <= 5; i++){
    console.log('我吃了1个包子')
    if(i === 3){
      break  //当循环执行到 i=3 的时候,此时这个if判断的条件成立,开始执行内部代码,也就是执行break,结束整个循环
    }
   }

continue 关键字

跳出当前这一轮循环,直接开始下一轮循环

for(var i = 1; i <= 5; i++){
    if(i === 3){
      console.log('第三个包子掉地上了,我不吃他了')
      continue
    }
    console.log('我吃了1个包子')
   }

JS小白入门

JS是什么

JS 的组成

js 的三种书写方式

js 定义变量

什么是变量？

为什么要定义变量？

如何定义变量?

变量赋值

使用变量

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

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

js 数据类型

数据类型分类(以基本数据类型为主)

数据类型检测

数据类型转换

js 运算符

js 分支语句

if 分支语句

switch 分支语句

三元表达式(三元运算/三目运算/三目)

js 循环语句

while 循环语句

do...while 循环语句

for 循环语句

流程控制语句