JS基础语法篇

一、JS基础篇组成

javascript的组成

• ecmascript语法和dom和bom三部分组成。

JavaScript 的书写位置

• 1：内联的js代码，就是在标签内部书写js代码（不推荐）
• 2：内部js代码 写在script标签里面！
• 3：外部js代码 需要script标签引入（使用src属性）

javascript的常用输出：

//弹出窗
alert(123)
//控制台打印
console.log(321);
//写入页面，但是会重绘页面！
document.write('1122')
//弹出输入框
let num = prompt('请输入什么？')

二、JS基础篇之变量

1：变量的定义和使用

  var a = 10;//var 声明的变量是全局变量var b = 10;a = 10;//虽然可以使用，但是定义的是全局变量，还有就是在严格模式下，会报错注意：1.一个变量名只能存储一个值2.当再次给一个变量赋值的时候，前一次的值就被覆盖掉了3.变量名称区分大小写（js区分大小写）

2：变量的命名规则

  01：只能是字符，下划线,-，$等组成，以字符开头最合适，但是不能使用数字开头02：区分大小写03：不能使用关键字和保留字 int class 等等04：声明变量的建议语义化定义变量驼峰式写法： className 还有以-连接符(下划线）： class-name class_name

3：js之注释

1、单行注释

一般就是用来描述下面一行代码的作用
可以直接写两个 /（快捷键L:ctrl + /）

// 我是一个单行注释// 下面代码表示在浏览器里面出现一个弹出层
alert('我是一个弹出层')

2、多行注释

一般用来注释一大段的文字或者代码
可以直接写/* /,然后在两个号之间写注释的内容（快捷键：shift + alt + a）

/*我是一个多行注释我是一个多行注释我是一个多行注释
*//*注释的代码不会执行alert('我是一个弹出层')alert('我是一个弹出层')
*/
alert('我是一个弹出层')

4：js数据类型

1：简单数据类型
01：number — 数字型
02:string — 单引号或双引号 外单内双 内双外单 `` —模板字符串
03:boolean —布尔值 true或false
04:null — 空
05:undefined —只声明为赋值

注意点：typeof (a) 使用typeof来查看这些的数据类型
console.log(typeof (a) + "---" + typeof (num));
注意点2：NAN --- 非数字

2：复杂数据类型 —对象 函数 数组 字符串对象

5：数据类型的判断和转化

1：数据类型的判断：

使用typeof(变量)方法来判断数据类型属于那种类型！
或者使用 typrof 变量名
返回值为：数据类型，这个是一个字符串的数据类型！isNAN(变量) ---判断是否为非数字 是非数字的话，则是返回true，否则为false

2：数据类型的转换

 - * /   ---隐式转换Number(变量) ---把其他类型完全转化为number类型parstFloat(变量) ---转换为带有小数的number类型parseInt(变量) ---转化为整数变量.toString() ---转化为字符串类型的数据String(变量) ---转化为字符串类型隐式转换 + ---字符串的拼接（两边都是字符串的时候，是拼接的效果，或者一边字符串一边数值的时候也是拼接。 若是两边的都是数字（number类型）就相加）Boolean(变量) ---转化为布尔型注意点：在boolean转化中，只有NAN，undefined,0,null转化为false，其他的都是为true

3：运算符

  01：算数运算符 - + %  / * 执行顺序为从右到左02：赋值运算符= ---把右边的值赋值给左边+= --- num += 4 ==> num = num + 4;-=%=/=*=03: 关系运算符 ---返回值为布尔值><==    等于 判断左边的是否等于右边的值 是等于就为true 否则为false （2 == '2' 是true的）===   全等于 假如 2 === '2' 值相等但是数据类型不同，所以为false<= >= !=   不等于 就是值不相等的时候，就是为true(不考虑数据类型)!==  不全等 就是2 ！== '2'  就是值相等的时候，数据类型不同，返回的是true04：逻辑运算符 返回的是布尔值&& ---逻辑与 全为真就为真|| ---逻辑或 全为假久违假！ ---逻辑非 把true转为false false转化为true注意点：|| --- 就是这个运算的时候是从左到右，假如第一个为真，就直接以true输出结果，若是为false就才会继续想想判断

6：进制介绍

• 计算机只识别 二进制

• 计算机 输出的都是 十进制

• 进制

  • 十进制：0-9
  • 二进制：0-1组成，以 0b或者0B开头的为二进制
  • 八进制：0-7组成，以 0o 或者 0O开头的叫做 八进制
  • 十六进制：0-9a-f组成，以0x 或者 0X 开头的叫做十六进制

三、JS基础篇之语法

（1）：js控制语句

• JavaScript 语言中 流程控制语句，包括：顺序，选择，和循环三种 控制结构 以及 具体的控制语句，如if else while 等基本用法

1.分支结构

• if(条件){ 执行语句 }
• if(条件){ 执行语句 } else { 执行语句 }
  就是当条件成立，就执行，否则就执行else
• if(条件1) {条件1为true就执行这里的代码} else if(条件2) {条件1为false且条件2 为true的时候执行这里的代码} else {当条件1 和条件2都为false的时候执行这里的代码}
• switch 是对某一个变量的判断

switch (要判断的变量) {case 情况1:情况1要执行的代码breakcase 情况2:情况2要执行的代码breakcase 情况3:情况3要执行的代码breakdefault:上述情况都不满足的时候执行的代码
}let score = prompt("请输入你的成绩")
score = Math.ceil(score / 10);
switch(score){case 10:console.log("A")bredk:case 9:console.log("B")bredk:
defalut:conselo.log("E")

注意点：就是switch是需要严格相等的，也就是数据类型和值都相等才执行语句

• 三元运算，就是用 两个符号 组成一个语句

var age = 18;
age >= 18 ? alert('已经成年') : alert('没有成年')
-   三元运算只是对 if else 语句的一个简写形式
-   语法：`条件 ? 条件为true的时候执行 : 条件为false 的时候执行`

2.循环控制结构

• 循环结构，就是根据某些给出的条件，重复的执行同一段代码
• 循环必须要有的某些固定的内容组成
  • 初始化
  • 条件判断
  • 要执行的代码
  • 自身改变

注意点：循环都需要以上的内容，别忘记了初始化和改变自身的值（也就是在循环类递增等）

1.while循环结构

• while 中文叫 当····时, 其实就是当条件满足的时候执行代码，一旦不满足了就不执行代码
• 语法： while(条件){满足条件就执行}
• 因为满足条件就要执行，所以我们写的时候一定要注意，就是设定一个边界值，不然就是一直执行下去（死循环）

// 1. 初始化条件 必须初始化哦，还有使用这个值，来递增等功能
var num = 0;
// 2. 条件判断
while (num < 10) {// 3. 要执行的代码console.log('当前的 num 的值是 ' + num)// 4. 自身改变num = num + 1
}

2.do while 循环

• 是一个 和 while循环类似的循环
• while会先进行条件判断，满足就执行，不满足直接就不执行了
• 但是 do while循环是先执行一次，再进行条件判断
• 语法：do {要执行的代码} while(条件)

// 下面这个代码，条件一开始就不满足，但是依旧会执行一次 do 后面 {} 内部的代码
var num = 10
do {console.log('我执行了一次')num = num + 1
} while (num < 10)

3.for 循环

组成：初始化条件，条件，表达式，
初始化：let i = 0;
条件： i < 100;
表达式： i++
for循环的执行顺序：先初始化条件，然后判断条件，执行循环体，再执行表达式（i++)
执行过上面一层后，从（i++) — 条件 – 循环体 （然后就是一直在这边循环） 直到条件不符合的时候，跳出循环
注意点：就是for循环外面使用var定义变量的时候，在执行for后面打印i的话，是打印的是跳出循环的值

    for (var i = 0; i < 10; i++) {}console.log(i); //11

4：for循环嵌套

就是一个for循环里面在嵌套一个for循环 — 使用的时候，就是多行多列的方式使用
外层for循环控制行，内层的for循环控制列
注意点：先实现内部的，然后在实现外部的

        for (var j = 0; j < 3; j++) {for (var i = 0; i < 3; i++) {document.write('*')}document.write('<br>')}/*j = 0  j < 3 成立 执行内层循环i = 0 这个执行完成 继续判断内层循环的条件满足的时候，继续执行内层循环i = 1 这个执行完成 继续判断内层循环的条件满足的时候，继续执行内层循环i = 2 这个执行完成 继续判断内层循环的条件满足的时候，继续执行内层循环i = 3 这个执行完成 继续判断内层循环的条件，不满足，跳出内层循环，继续执行外层循环j = 1 j <3 成立，执行内层循环i = 0 这个执行完成 继续判断内层循环的条件满足的时候，继续执行内层循环i = 1 这个执行完成 继续判断内层循环的条件满足的时候，继续执行内层循环i = 2 这个执行完成 继续判断内层循环的条件满足的时候，继续执行内层循环i = 3 这个执行完成 继续判断内层循环的条件，不满足，跳出内层循环，继续执行外层循环j = 2 j < 3 成绩，执行内层循环i = 0 这个执行完成 继续判断内层循环的条件满足的时候，继续执行内层循环i = 1 这个执行完成 继续判断内层循环的条件满足的时候，继续执行内层循环i = 2 这个执行完成 继续判断内层循环的条件满足的时候，继续执行内层循环i = 3 这个执行完成 继续判断内层循环的条件，不满足，跳出内层循环，继续执行外层循环j = 3  j < 3 不成立， 跳出外层循环（整个循环结束）*/

注意点：正常的思路就是，先考虑内层循环的执行，等待内层循环代码实现的时候，就是在外层添加循环的次数

5.break 终止循环

• 在循环没有进行完毕的时候，因为我设置的条件满足，提前终止循环
• 比如：我要吃五个包子，吃到三个的时候，不能在吃了，我就停止吃包子这个事情
• 要终止循环，就可以直接使用 break 关键字
• 只能终止当前循环
• 如果当有循环嵌套的时候，想要跳出外层循环，那么就给循环添加一个标识符，然后 break outer

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

4-1拓展点 —循环的标识符

 // 循环的标识符 ,outer 和inner是for标识符，名字自己取outer: for (var i = 0; i < 5; i++) {inner: for (var j = 0; j < 5; j++) {// 如果 i = j的是不打印if (i === j) {// 跳过 本次的内层循环// continue/* 当i = j的时候，本次的外层循环不在执行，进入下一次的外层循环怎么在内层循环中结束（跳过） 外层循环在哪个循环中写break和continue ，那么只会结束这个循环*/// 跳过 outer 本次循环，继续执行下一次outer的循环continue outer;}console.log(i, j);}}

5.continue 结束本次循环

• 在循环中，把循环的本次跳过去，继续执行后续的循环
• 比如：吃五个包子，到第三个的时候，第三个掉地下了，不吃了，跳过第三个，继续吃第四个和第五个
• 跳过本次循环，就可以使用 continue 关键字

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