jsの进阶之路
一、初识js
1.1.js脚本语言
- js是运行在客户端（无须搭建服务器，只需要有浏览器就行）的脚本语言（无须编译，运行时由js解释器逐行解释并执行）
- 解释型语言(js脚本语言)和编译型语言(java)的区别
翻译的时间点不一样，解释型语言通过解释器运行时及时解释，编译型语言通过编译器在代码执行前全部先进行编译，会产生一个class中间文件
- js的作用
1.2.浏览器执行js的过程
浏览器分为两个部分：渲染引擎（解析html与css，俗称内核，如chrome的blink和老版本的webkit）和js引擎（js解释器，逐行读取并解释转换为机器语言[读一行解释一行，如果上一行报错，下一行就不再执行]，比如chrome的v8）
浏览器断点调试
1.3.js的组成
ECMAscript（JavaScript[网景公司]和Jscript[微软公司]）：基础语法
DOM（文档对象模型）：对页面上的各种元素进行操作
BOM（浏览器对象模型）：与浏览器窗口进行互动
1.4.js的三种写法
1.行内式：
<input type="button" onclick="alert('这是行内js')" value="点击按钮"></input>
2.内嵌式：<script>alert('这是内嵌js')</script>
3.外部引入式：<script src="js/index.js"></script>|alert('这是外部index.js')
1.5.js的注释
//：单行注释
/**/：多行注释
在vscode中进行修改js注释：右下角设置，keyboard shortcuts，可以修改为ctrl+shift+/
1.6.js的输出语句
1.var myname=prompt(“这是一个输入框，请输入您的姓名”)，可以使用变量直接获取到用户在弹出的输入框中输入的内容
注意：prompt取出来的值是字符型的，可以看控制台打印颜色来判断数据类型（数字型晶蓝色，布尔类型纯蓝色，字符串类型黑色，undefined和null是灰色）2.alert(“这是一个警示框，我的名字是”+myname)
3.console.log(“这是打印到控制台的消息，用于测试”)
1.7.js的变量
- 为什么需要变量：因为有些变量需要保存
- 变量是什么：是存放数据的容器 （本质是内存中的一块空间），可以通过变量名获取和修改数据
- 变量的使用：声明变量（var age，本质是去内存申请空间） - - 赋值（age=18）
- 声明多个变量：var name=‘张三’，age=18；
- 变量的初始化：声明并赋值（var age=18）
- 变量的变更：以最后一次的更新值为准（age=19）
- 变量命名规范：字母、数字、下划线、$组成，命名有意义，区分大小写，不能以数字开头，不能是关键字，驼峰命名法(myFirstSalary)
- 交换两个变量的值：借助临时变量，temp=a，a=b，b=temp
注：只声明不赋值，结果输出undefined，不声明不赋值会报错，不声明直接赋值正常使用
1.8.js数据类型
- 为什么需要数据类型：因为不用数据占用的存储空间不同（为了充分利用存储空间）
- js属于弱类型（动态语言），声明变量时不确定变量类型，数据类型是在程序运行时根据等号右边的值来确定的，并且变量数据类型是可以变换的
- 检测变量的数据类型：typeof 变量名（要注意typeof null得到的类型是object类型）
- 简单数据类型：
Number（数字型，包含整型和浮点型，二进制，八进制010=8，十进制，十六进制0xa=10）
数字型最大值：Number.MAX_VALUE，数字型最小值：Number.MIN_VALUE
无穷大：Infinity，无穷小：-Infinity
非数字：NaN，isNaN(x)函数，如果x是数字返回false，如果是非数字返回true
String（字符串型）：文本可以是单引号（推荐使用 ），也可以是双引号
字符串引号嵌套（ 外双内单，内双外单 ）
获取字符串的长度：str.length
字符串拼接：字符串+任意类型的都会拼接为字符串（使用+号，数字相加，字符相连）
Bollean（布尔型，true=1，false=0，参与加法运算时当做1，0来看）
Undefined（未定义）
undefined+‘pink’=undefinedpink，undefined+1=NaN
Null（空）
null+‘pink’=nullpink，null+1=1
复杂数据类型：
**Object **
1.9.js数据类型的转换
- 转换为字符串类型
| 方式 | 案例 |
|---|---|
| toString() | var num=1； num.toString() |
| String()函数强制转换 | var num=1； String(num) |
| +（是一种隐式转换） | var num=1； num+‘现在我变成字符串了’ |
- 转换为数字类型
| 方式 | 案例 |
|---|---|
| parseInt(string) | 转为整数，parseInt(‘78’)=78，parseInt(‘78.88’)=78（如果string是小数的话会进行取整），parseInt(‘120px’)=120（如果string是前面数字加字符的话会去掉后面的字符，因为前面的数字认识，后面的字符不认识了）parseInt(‘rem120px’)=NaN |
| parseFloat(string) | 转为浮点数，parseFloat(‘120.88’)=120.88，parseFloat(‘120.88px’)=120.88，parseFloat(‘rem120.88px’)=NaN |
| Number()函数强制转换 | Number(‘12’) |
| -，*，/（隐式转换） | ‘12’-3=9，‘123’-‘120’=3（区别加号，‘123’+‘120’=123120） |
- 转化为布尔类型
代表空、否定的值会被转换为false，如0，NaN，null，undefined，其余的都会被转换为false
| 方式 | 案例 |
|---|---|
| Boolean() | Boolean(‘true’)=true |
1.10.js的标识符，关键字，保留字
- 标识符：自己定义的变量，属性，函数，参数等
- 关键字：js本身已经使用了的字
- 保留字：预留的关键字，在未来可能会成为关键字
1.11.js的表达式，返回值，运算符
- 表达式：由数字、运算符和变量等组成的式子，1+1
- 返回值：表达式的结果（复制给左边的变量）
- 算术运算符：+，-，*，/，%（取余，取模，判断一个数是否会被整除）
注意：alert(1/0) ，结果是Infinity（无穷大）
浮点数会产生一些精度的问题（最高精度17位），一般不要拿浮点数直接相比较（转换为二进制，精度有误差）- 前置递增运算符：++a（相当于a=a+1），先+1，再赋值
- 后置递增运算符：a++（相当于a=a+1），先赋值，再+1
var age1=10,age2=10
// age1++ = 10,age1=11
// ++age1 = 11,age1=11
alert(++age1 + 10) //21,先加1再赋值
alert(age2++ + 10) //20,先赋值再加1,先把age2++=10返回回来,10+10=20,再把age2+1,这时age2=11
- 比较（关系）运算符：返回一个布尔值
<，>，>=，<=，==（判断），!=，===（全等）
注意：==，>=，<=默认会转换数据类型，将字符型转换为数字型，18=='18'，结果为true===：要求数值和数据类型都一样才会为true，18==='18'，结果为false- 逻辑运算符：对布尔值进行运算，返回值也是布尔值
&&（与，and，一假则假），||（或，or，一真则真），！（非，not）
3>5 && 3>2 ，结果为false- 短路运算（逻辑中断）：如果左边表达式确定结果的话，就不再继续运算右边表达式的值
| 逻辑与语法与案例 | 结果 |
|---|---|
| 表达式1 && 表达式2 | 如果第一个表达式为真，则返回表达式2，如果第一个表达式为假，则返回表达式1 |
| 123 && 456 | 结果为456 |
| 0 && 456 | 结果为0（0为false） |
| ‘’ && 456 | 结果为’’（’'为false） |
| 逻辑或语法与案例 | 结果 |
|---|---|
表达式1 || 表达式2 |
如果第一个表达式为真，则返回表达式1，如果第一个表达式为假，则返回表达式2 |
123 || 456 |
结果为123 |
0 || 456 |
结果为456（0为false） |
‘’ || 456 |
结果为456（’'为false） |
var num=0
alert(123 || num++)
alert(num) //num=0,因为产生了逻辑中断，只执行了前面的123，后面的num++没有执行，所以num=0
- 赋值运算符：=，+=，-=，*=，/=，%=
num += 2（相当于num=num+2）- 运算符的优先级：注意先&&后||
二、js的流程控制
流程控制的三种结构：顺序（按照代码顺序依次执行）、分支、循环
2.1.分支结构 if
根据不同条件，执行不同路径，得到不同结果（多选一）
单分支，双分支，多分支
var age=prompt("请输入您的年龄") //虽然age是字符串类型，但是<=会进行数据类型的转换，所以不需要变换字符串类型
if(age<=12){
alert("打哭，并通知家长")
}else if(age>12&&age<=18){
alert("未成年人，不允许进入网吧")
}else{
alert("欢迎进入网吧")
}
//判断闰年，能被4整除且不能被100整除的为闰年，或者能被400整除的为闰年
2.2.分支结构 switch
- 拿switch后面的表达式（多数是一个变量）和case后面的值做匹配，匹配成功进入分支执行后跳出，如果都不匹配就执行default中的语句
注意1：必须是全等（数值和类型必须全匹配）
注意2：如果case中不加break的后果，会继续执行下一个case（无论结果是否匹配），直到遇到一个break为止，如果所有case中都没有break，则执行完default后为止
var day=prompt("请输入今天星期几")
dayint=parseInt(day)
switch(dayint){ //day是表达式
case 6:
alert("今天星期六，可以出去玩")
break
case 7:
alert("今天星期日，需要去练书法")
break
default:
alert("工作日，上学..") //最后执行的语句
}
2.3.分支结构 三元表达式
能做一些简单的条件选择，类似于if的双分支
条件表达式?表达式1:表达式2，如果条件表达式为真，则执行表达式1，否则执行表达式2
alert(5>10 ? true : false)
// 数字补0案例
var num=prompt("请输入您的学号")
var num=num<10?0+num:num
alert("您的学号为"+num)
2.4.switch与if的区别
- switch是针对的是特定值的选项，if是针对特定范围的选项
- switch是直接执行满足条件的语句（分支多时效率更高，结构更清晰），if是从上到下依次判断条件是否满足（但如果分支少，if的效率比switch效率更高）
2.5.循环结构 for循环
重复执行某些代码，通常与计数有关
循环的执行过程，先执行初始化变量（只执行1次），再执行条件表达式（进行判断），如果满足条件，则执行循环体，然后执行操作表达式，再执行条件表达式，满足条件执行循环体…
for(初始化变量(做计数器使用);条件表达式(终止的条件);操作表达式(用来更新变量)){
console.log("这里是循环体")
}
for(var i=0;i<10;i++){
console.log("这里是循环")
}