一、学习一门编程语言基本步骤
1、了解背景知识：历史、现状、特点、应用场景
(1)历史
1995年，JS最早出现了NetScape的浏览器中
1996年，IE3中也开始出现了JS，称为JScript
1997年，JS被提交了国际组织ECMA，制定了JS的标准规范ECMAScript
2009年，JS遵循了CommonJS规范，开始向服务器端发展**
(2)现状
既可以运行在客户端，也可以运行在服务器端，可以进行全栈开发。
(3)特点
解释性语言，编译一行执行一行
弱类型语言
基于对象
跨平台
(4)应用场景
开发客户端中的交互效果
服务器端开发，例如web服务器的创建，数据库访问...
2、搭建开发环境，编写hello world
(1)浏览器
浏览器本身自带的JS解释器，执行JS代码。
谷歌/火狐/欧朋/IE/edge/Safari 有自己的内核
360/QQ浏览器/UC浏览器/搜狗/遨游/百度/2345/夸克...
(2)服务器端
Node.js运行在服务器端的JS解释器
官网: www.nodejs.org
在命令行cmd下运行 node -v
(3)运行JS
浏览器
创建01.js和01.html，把js嵌入到html文件中，运行html即可
<script src="01.js"></script>
Node.js
node 拖拽要运行的文件 回车
3.JS的语法规范
区分大小写
每行结束的分号可以省略
分为单行注释(//..)和多行注释(/.../)
3、变量和常量
用于存储数据的容器
(1)声明变量
var x=1;
使用关键字声明了变量x，然后把1赋给变量x。
var a=3, b=5;
可以一次声明多个变量，之间用逗号隔开
(2)变量的命名规则
可以由字母、数字、下划线、美元符号组成，不能以数字开头，不能使用关键字，不能使用汉字。
userName empName empId 驼峰命名（推荐）
user_name emp_name emp_id 下划线命名
可读、可维护
(3)变量的赋值
如果变量声明后未赋值则为undefined（未定义）
变量可以反复赋值，并且赋不同类型的值，这是弱类型语言的特点。
练习：声明变量分别保存多组商品的单价和数量，声明变量保存总价，最后打印出总价。
常量
const user='root';
使用const关键字声明常量
常量声明的时候必须赋值，声明后不允许重新赋值。
4、数据类型
分为两大类：原始类型和引用类型
原始类型：数值型、字符串型、布尔型、未定义型、空
引用类型属于对象，后边才会说到。
(1)数值型
分为整型和浮点型
十进制
1 2 3 4 ... 7 8 9 10 ... 15 16
八进制：以0开头的数字
1 2 3 4 ... 7 10 11 12
十六进制：以0x开头的数字，af代表1015，不区分大小写
1 2 3 4 ... 7 8 9 a ... f 10
3141.5e-1
314.15
31.415e+1
3.1415e+2
typeof 检测数据类型
'number' / 'string' / 'boolean'
(2)字符串型
被引号所包含的数据，不区分单双引号
'a'.charCodeAt() 查看某个字符的编码
(3)布尔型
只有两个值，分别是true和false，代表真和假
在一些运算结果会得到布尔型的值，例如：3>1
还可以用于保存两个状态的数据，例如：是否登录，是否注释...
(4)未定义型
只有一个值undefined
声明了变量未赋值为undefined，表示一个空的变量。
(5)空
只有一个值null，属于对象型
2.数据类型转换
分为隐式转换和强制转换
(1)隐式转换
在运算过程中自动发生的转换
①数值+字符串 数值转为字符串
1+'2' // '12'
②数值+布尔型 布尔型转为数值 true -> 1 false -> 0
2+true //3
2+false //2
③布尔型+字符串 布尔型转为字符串
true+'5' //'true5'
练习：查看以下程序的运行结果
var a=2,b=false,c='tedu';
console.log(a+b+c); //'2tedu'
console.log(b+c+a); //'falsetedu2'
console.log(c+a+b); //'tedu2false'
JS中加号(+)的作用
加法运算
执行字符串之间的拼接
减（-）、乘（*）、除（/）运算的时候，会将数据转为数值。
所有隐式转换为数值都会自动调用函数Number()
(2)强制转换
①强制转换为数值
Number()
Number('2') //2
Number('2a') //NaN
Number(true) //1
Number(false) //0
Number(undefined) //NaN
Number(null) //0
NaN： Not a Number，不是一个数字，将数据转数值失败的结果。NaN和任何数字执行加减乘除结果还是NaN
②强制转整型
parseInt()
用于将小数和字符串转整型，其它都是NaN
parseInt(3.54);//3
parseInt('6.18');//6
parseInt('6.18a');//6
parseInt('a6.18');//NaN
③强制转浮点型
parseFloat()
用于将字符串转为浮点型，其它都是返回NaN
parseFloat('3.14'); //3.14
parseFloat('5.33a'); //5.33
parseFloat('5a'); //5
parseFloat('a5.33');//NaN
④将数值和布尔型转字符串（了解）
toString()
var num=2;
var str=num.toString(); //'2'
5、运算符
表达式：由数据或者由运算符连接的操作数据组成的形式称为表达式
运算符分为算术运算符、比较运算符、逻辑运算符、位运算符、赋值运算符、三目运算符
(1)算术运算符
-
/ % ++ --
![]（
% 取余
++ 自增，在原来的基础之上加1
-- 自减，在原来的基础之上减1
|
var n1=5;
var n2=--n1;
var n3=n1--;
console.log(n1,n2,n3);
image.png
）
-
(2)比较运算符
< >= <= ==（等于） != ===（全等于） !==（不全等于）
== 等于，比较两个值是否相同
=== 全等于，先比较类型是否相同，再比较值是否相同
3>'10' 字符串转为数值
'3'>'10' 字符串比较的是首个字符的Unicode编码
3>'10a' //false
3<'10a' //false
3=='10a' //false
NaN==NaN //false
NaN和任何的值（包括自身）比较> < >= <= == === 结果都是false。
(3)逻辑运算符
&& 逻辑与，关联的两个条件都是true结果是true，否则就是false
|| 逻辑或，关联的两个条件有一个是true结果是true，否则false
! 逻辑非，取反
!true -> false !false -> true
短路逻辑
&& 当第一个条件为false，就不再执行第二个条件
|| 当第一个条件为true，就不再执行第二个条件
|
练习：查看以下程序是否会报错
num>0 && console.log(a);
num<5 || console.log(a);
(4)位运算符(了解)
模拟计算机底层的运算，先将值转为2进制然后进行运算，运算完以后再把结果转回成10进制。
1 2 3 4 5 6 7
1 10 11 100 101 110 111
& 按位与，上下两位都是1结果是1，否则是0
| 按位或，上下两位含有1结果是1，否则是0
^ 按位异或，上下两位不同结果是1，否则是0
按位右移，删除最后的若干位
<< 按位左移，在最后补若干个0
5<<1
101
1010
10100
5>>1
101
10
1
5&7 3&5 12&20 6|9 7^10
101 011 01100 0110 0111
111 101 10100 1001 1010
———————— ———— ———— ————
101 001 00100 1111 1101
6、逻辑结构
(5)赋值运算符
= += -= *= /= %= ...
赋值 运算赋值
练习：声明变量保存商品的价格，要求让该商品打八折，最后打印当前价格。
(6)三目运算符
一目运算符：由一个运算符连接的一个操作数据或者表达式 ++ -- !
二目运算符：由一个运算符连接的两个操作数据或者表达式
三目运算符：由两个运算符连接的三个操作数据或者表达式
条件表达式 ? 表达式1 : 表达式2
如果条件表达式为true选择执行表达式1
如果条件表达式为false选择执行表达式2
2.浏览器端的函数
alert() 弹出警示框
prompt() 弹出提示(输入)框，需要使用变量保存用户输入的值，类型是字符串型；如果什么也没输入得到是空字符串（''）；如果点击取消得到是null
练习：弹出两次提示框，要求用户分别输入数字，计算两个数字相加的和，最后将计算结果以警示框形式弹出。
程序=数据 + 算法
程序的执行方式：顺序执行、选择执行、循环执行
3.流程控制
(1)if语句
满30减20
if(条件表达式){
语句块
}
)
[图片上传失败...(image-5b2fb8-1620907758277)]
如果语句块中只有一行语句，则大括号可以省略的。
以下数据作为条件表达式隐式转换为false
0 NaN '' undefined null
(2)if-else语句
if(条件表达式){
语句块1
}else{
语句块2
}
[图片上传失败...(image-9d16e1-1620907758276)]
(3)if-else嵌套
if(条件表达式1){
语句块1
}else if(条件表达式n){
语句块n
}else{
语句块n+1 // 以上所有的条件表达式都是false
}
[图片上传失败...(image-d9f0d1-1620907758276)]
(4)switch-case语句
属于一种特殊的多项分支语句，根据表达式的值来选择执行对应的语句块
switch(表达式){
case 值1: //表达式的值和值1比较
语句块1
break; //跳出，就不再和后续case中的值比较
case 值n:
语句块n
break;
default:
语句块n+1 //表达式的值和每一个值比较都是false
}
表达式在和case后的值比较的时候，只有一种比较方式全等于(===)，要求值和类型都相同；
一旦表达式和case后的值比较为true的话，如果没有break就会继续往后执行，此时就不再和后边case后的值比较了。
对比switch-case和if-else嵌套
两者都是用于多项分支语句，switch-case中只能使用全等于的比较，if-else可以进行各种形式的比较;
switch-case使用的局限性比较大，if-else使用范围更加广泛
switch-case结构更为清晰，可读性更高。
1.循环
一遍又一遍执行相同或者相似的代码
两个要素
循环条件：可以控制循环的次数
循环体：要执行的相同或者相似代码
(1)while循环
while(循环条件){
循环体
}
[图片上传失败...(image-735e9-1620908356229)]
(2)break
在循环体中使用，跳出循环，不再执行循环。
练习：使用死循环的时候计算11~20之间所有整数的乘积，当20的时候跳出循环
(3)do-while循环
do{
循环体
}while(循环条件);
[图片上传失败...(image-56d621-1620908356229)]
(4)for循环
for(初始值; 循环条件; 增量){
循环体
}
[图片上传失败...(image-8be4e9-1620908356229)]
2.break和continue
break：跳出循环，不再执行任何循环中的代码
continue：跳过某一次（剩余的循环体），还会继续下一次循环
3.循环嵌套
一个循环的循环体中，又出现了其它的循环。
任意两个循环之间都可以相互嵌套
九九乘法表案例：
