1. js的四种引入方式：
（1）行内：直接将js代码写在html标签中
（2）内嵌：js代码用<script></script>包裹，可以在头部里面，也可以在body里任何位置，也可以写在body之后。一般放在body最后一行。
（3）外部引入：单独建一个script.js文件，在html页面通过<script src=”script.js”></script>引入js.注意引入js路径的<script src=”script.js”></script>标签之间不能再编写js内容了。一般放在body最后一行。如果需要就在在用另对<script></script>标签包裹要编写的js内容。
（4）a标签的js引入：
<a href="javaScript: /*代码块*/;"></a>
2.js注释
（1）单行注释 // ctrl + /
（2）多行注释 /* */ shift + alt + A
vscode里面可以修改快捷键
3.js输入、输出语句
（1）输入框 prompt()
（2）弹出框 alert() 输出框 给用户看的
（3）console.log() 控制台打印输出 给程序员看的
JS变量
1.什么是变量？
变量就是一个用来存储数据的盒子/容器。可以用变量来存储用户输入的数据，也可以通过变量输出用户输入的数据。变量里面可以装任何东西。
变量的本质：内存的一块存储空间，用来存储数据
声明变量的本质：向内存申请存储数据的空间
2.变量的使用？
（1）声明变量 关键字 var
var 变量名;
var age ;
（2）赋值 =
var 变量名=要存储的值;
age = 18；
（3）变量初始化：声明变量并赋值
var age=18;
（4）输出变量
console.log(age);
（5）变量的案例——简单对话框
//用户输入框存储数据
var name = prompt("请输入您的姓名");
//用户提示框/弹出框
alert(name);
//控制台输出
console.log(name);
（6）变量的语法扩展
（a）变量的更新
当同一变量有过多个值时，输出的变量值是最后赋予的值，即后面的值会覆盖前面的值。
（b）同时声明多个变量：只用一个var,变量之间用逗号隔开
var 变量1 = 值1，变量2 = 值2，...
（c）声明变量的特殊情况：
只声明不赋值 var age; 输出age为undefined
不声明也不赋值 age; 输出age时要报错
不声明只赋值 age=18； 输出age为18（不建议使用）
既声明又赋值 var age = 18; 输出age为18（建议最好使用）
（7）变量的命名规范
（a）大小写字母、下划线、数字、$符号组成
（b）不能以数字开头
（c）严格区分大小写
（d）不能是关键字或保留字 比如var
（e）名字要有意义，一眼看出代表什么
（f）驼峰命名法，第二个单词及其以后的首字母为大写
（g）name在js中有特殊含义，尽量不要用name声明变量
<script>
//交换变量
//创建一个临时变量
var temp;
//装青苹果的变量
var auqaApple = '青苹果';
//装红苹果的变量
var redApple = '红苹果';
//把青苹果的给temp
temp = auqaApple;
//把红苹果给auqaApple
auqaApple = redApple;
//把青苹果给redApple
redApple = temp;
console.log(auqaApple);
console.log(redApple);
</script>
输出结果：
JS数据类型
1.js的变量的数据类型是只有在程序在运行时（js引擎渲染时）根据变量等号右边的变量值来确定。
2.js的变量的数据类型是动态的，可以改变。
3.为什么要有数据类型？
不同的数据类型会占据不同的存储空间，为了更好利用存储空间，需要不同的数据类型。
4.数据类型的分类：
（1）简单数据类型：
数字型 number 浮点型、整型 默认值为0
布尔型 boolean true/false 1/0 默认值为false
字符型 string 变量值用引号括起来的内容 默认值为""
undefined undefined 未定义 默认值为undefined
null null 空字符 默认值为null
（2）复杂数据类型：
对象类型 object 数组
5.number类型
（1）
var age = 18; age为数字中的整型
var PI = 3.14; PI为数字中的浮点型
（2）数字进制：二进制、八进制、十进制、十六进制
（a）二进制 0和1组成
(b) 八进制 js中在数字首部填一个0代表八进制
八进制转换为十进制 : 0~7 逢8进1
var num = 012; 1*8+2 ===> 输出num为10
var num = 010; 1*8+0 ===> 输出num为8
（c）十六进制 0~9 a~f(代表10~15)
js中在数字首部添加0x代表十六进制
十六进制转换为十进制 ：
var num = 0x9; ===> 输出num为9
var num = 0xf; ===> 输出num为15
var num = 0xdd; 16*13+13 ===> 输出num为221
(3) 数字最大值和最小值
Number.MAX_VALUE
Number.MIN_VALUE
（4）无穷大和无穷小
无穷大：infinity
无穷小：-infinity
（5）isNaN(x) 判断数据x是否是非数字，如果x是非数字，则返回true;如果x是数字，则返回false
6.字符串类型
（1）字符串用双引号或者单引号包裹 比如： “12”是字符串而不是数字
（2）字符串中引号的嵌套
单引号里面嵌套双引号，双引号里面嵌套单引号。（外单内双，外双内单。并且执行就近原则：js中前一个单引号会找下一个离它最近的单引号关闭）
js中建议使用单引号，html中建议使用双引号
“我是一个‘程序员’” 或者 ‘我是一个“程序员”’
（3）转义字符
转义字符是写在引号里面的
\n ===> 换行
\\ ===> 反斜杠
\' ===> 单引号(英文)
\" ===> 双引号（英文）
\t ===> tab 缩进
\b ===> blank 空格
（4）字符串的length属性
string的length属性可以用来计算字符串的长度（包含多少个字符，字符包括空格和标点符号）
（5）字符串的拼接
通过加号+可以拼接多个字符串
字符串类型 + 任何类型 = 字符串类型
数值相加的结果是数值，字符相加的结果是字符
'12' + 12 ===> 1212
12 + 12 ===> 24
'12' - 12 ===> 0 隐式转换
'pink' - 12 ===> NaN
(6) 字符串拼接加强
在字符串中添加变量，方便修改值
变量不加引号，变量在引号外面
引引加加 '我是一个' + age + ’岁的程序员'
//用户输入数据,将数据用变量存储起来
var age = prompt("请输入你的年龄");
//程序处理数据
var str = '您今年已经'+ age +'岁了';
//输出结果 回答
alert(str);
7.布尔型
（1）值为true/false 默认值为false
布尔型 + number型 = number型
true + 1 = 2 ===> 1 + 1 = 2 布尔型参与加法运算时会变为1/0
flase + 1 = 1 ===> 0 + 1 = 1
布尔型 + 字符串型 = 字符串型
true + 'zifuchuan' ===> truezifuchuan
8.undefined型
（1）没赋值的变量为undefined型
（2）赋值为undefined的变量为undefined型
（3）undefined型 + number型 = NaN 结果是一个非数字
（4）undefined型 + 字符串型 = 字符串型
9.null型
（1）赋值为null的变量为object型
（2）null + number = number本身 null代表空值
（3）null + 字符串 = 字符串
10.typeof : 查看变量的类型
var num = 18;
console.log(typeof num);//number
var str = '18';
console.log(typeof str);//string
var boln = true;
console.log(typeof boln);//boolean
var unde = undefined;
console.log(typeof unde);//undefined
var kong = null;
console.log(typeof kong);//object
var array = [];
console.log(typeof array);//object
表单、prompt输入框输入的内容为字符串型，这时就需要转换数据类型。
JS数据类型转换
1.字面量
固定值的表示法。表示如何表达一个值。可以理解为变量等号右边的值。
(1)数字字面量 例如：10 , 8 …
(2)字符串字面量 例如：‘english’ , ‘黑马程序员’…
(3)布尔字面量 例如：true/false
(4)对象字面量 例如： var person= { name : ’ ',id : ’ ', … }
(5)数组字面量 例如：var array = [a,b,c…]
(6)函数字面量 function
2.数据类型转换为字符串型
（1）toString() 格式：变量.toString()
（2）String() 格式：String(变量)
（3）+ 加号连接字符串 隐式转换 格式：变量 + ‘ ’
var num = 18;
console.log(typeof num);//number
/* num = num.toString();
console.log(typeof num) */
/* num = String(num);
console.log(typeof num); */
console.log(typeof (num + ''));
3.数据类型转换为数字型
（1）parseInt(string) 转换为整型 向下取整 格式：parseInt(变量)
parseInt（‘18’） === > 18
parseInt（‘18.18’）=> 18
parseInt（‘18.88’）=> 18
可以识别去掉后面的非数字字符
parseInt（‘120px’）=> 120
不可以识别去掉首部的非数字字符
parseInt(‘rem120px’) => NaN
（2）parseFloat(string) 转换为浮点型 格式：parseFloat(变量)
parseFloat（‘18.18’）=> 18.18
可以识别去掉后面的非数字字符
parseFloat（‘120px’）=> 120
不可以识别去掉首部的非数字字符
parseFloat(‘rem120px’) ===> NaN
（3）number(变量) 强制转换 格式：number(变量)
number(‘123’) ===> 123
（4）-(减法)、*(乘法) 、/(除法) 利用算术运算隐式转换为数值
<script>
console.log('18'-2);//16
console.log('18'*2);//36
console.log('18'/3);//6
</script>
4.计算年龄
<script>
//计算年龄
//用户输入出生年,用变量将用户输入的数据保存下来
var year = prompt("请输入您的出生年");
//将输入的年份转换为数值型
//year = parseInt(year);
//获取当前年份
var curYear = new Date().getFullYear();
//程序处理 用当前年份减去出生年份 将结果用一个变量保存下来
var age = curYear - year;//这里有减法的隐式转换，所以可以不用转换year的数据类型
//输出结果
alert('您今年' + age + '岁了!')
</script>
5.计算任意两个数的和
//输入第一个值并用变量num1保存起来
var num1=prompt("请输入第一个加数");
//将第一个数字转换为数字型
num1 = parseFloat(num1);
//输入第二个值并用变量num2保存起来
var num2=prompt("请输入第二个加数");
//将第二个数字转换为数字型
num2 = parseFloat(num2);
//程序处理 num1和num2相加并将结果保存在sum中
var sum=num1 + num2;
//输出最后的和
alert(num1 + '+' + num2 + '=' + sum);
6.数据类型转换为布尔型
（1）Boolean(变量) ===> 将其他类型转换为布尔型
（2）!!变量 ===> !!123 ===true
代表空、否定的值转换后输出的都是false,如：“”，null，undefined，0，NaN。除了这五个值，其他类型转换为布尔类型输出的值都是true.
<script>
console.log(Boolean(''));//false
console.log(Boolean(null));//false
console.log(Boolean(undefined));//false
console.log(Boolean(NaN));//false
console.log(Boolean(0));//false
console.log(Boolean('123'));//true
console.log(Boolean('小白'));//true
console.log(Boolean(123));//true
</script>
（2）“!!变量” ===> 得到的是变量转为其本身布尔值
拓展：
编译型语言：JAVA 将所有程序代码写好后，编译器编译后才执行。
（相当于把所有的菜做好以后才能吃）
解释型语言：JavaScript 写一行代码JS渲染引擎渲染执行一行代码。
（相当于做好一个菜吃一个菜，边做边吃）
JS 标识符、关键字、保留字
1.标识符：程序员开发时为变量、属性、函数、参数取的名字。
标识符不能是关键字和保留字。
2.关键字：JS本身已经使用了的字。不能再作为变量名、方法名。
比如：var 、break 、while 、for…
3.保留字：JS预留的关键字，现在不是关键字，但未来可能会成为关键字。不能再作为变量名、方法名。
比如：let…
<script>
//输入用户姓名,用一个变量保存用户输入的姓名
var userName = prompt("请输入您的姓名");
//输入用户的年龄,用一个变量保存用户输入的年龄
var age = prompt("请输入您的年龄");
//输入用户的性别,用一个变量保存用户输入的性别
var sex = prompt("请输入您的性别");
//程序处理后输出用户的信息
alert("您的姓名是："+ userName +
"\n您的年龄是："+ age +
"\n您的性别是："+ sex);
</script>
JS运算符
1.算术运算符
+ 、-、*、/、%(取余)
注意：3%5=3
浮点型的数据使用算术运算符的时候会出问题，浮点型数据最高精确到小数点17位。
0.1+0.2 =0.30000000000000004
而不等于0.3
在做算术运算的时候最好不要用浮点数
我们不能直接拿浮点数来作比较 是否相等
优先级：先乘除后加减，有括号先计算加号里面的
2.表达式和返回值
（1）表达式：由数字、运算符和变量组成的结果为数值的有意义的式子
比如：1+1
（2）返回值：表达式有一个结果，这个结果就是返回值
比如：1+1=2 ===> 2就是1+1这个表达式的返回值
3.递增(++)递减(–)运算符（变量自身反复加1或减1）
（1）前置递增运算符，++写在变量前面，比如++num。前置递减（–num）运算同理。
var num = 6;
num = num +1; ===> ++num
结果：num为7 ===> 结果：num为7
（2）后置递增运算符，++写在变量后面，比如num++。后置递减运算同理
var num = 6;
num = num +1; ===> num++
结果：num为7 ===> 结果：num为7
注意：如果前置递增与后置递增单独使用，效果一样；
如果前置递增或后置递增与其他数值进行运算时，效果就有区别了
前置递增（先己后人）：先自加1再返回结果值，再用这个结果值做其他的运算；
后置递增（先人后己）：先返回原值，用原值做其他的运算后，原值再自加1。
前置递减：先自减1再返回结果值，再用这个结果值做其他的运算；
后置递减：先返回原值，用原值做其他的运算后，原值再自减1。
<script>
var b = 6;
++b;//++b的结果是7 b的结果也是7
var c = 6;
c++;//c++的结果是7 c的结果也是7
var num = 6;
console.log(++num + 2);//9
console.log(num);//7
var a = 6;
console.log(a++ +2);//8
console.log(a);//7
var x = 6;
console.log(--x +2);//7
console.log(x);//5
var y = 6;
console.log(y-- +2);//8
console.log(x);//5
var e = 10;
f = e++ + ++e;//e++返回10之后e的值已经为11，++e也就等于12，结果为10+12=22
console.log(f);//22
</script>
4.比较运算符
== 数值与字符数字作比较时，双等会将字符串类型的值转换为数字型，所以
‘18’ == 18 ===> 输出结果为true
5.逻辑运算符(布尔值类型参与运算)
与：&& 或：| | 非：!
6.逻辑中断（会影响程序运行的结果）
（1）逻辑与&& 的短路运算（值或直接得出值的表达式参与逻辑运算）
多个表达式（值非布尔值）用&&相连接时，如果左边的表达式能直接得出数值或者左边的表达式直接为数值，那么不管&&右边有多少表达式进行运算都不管了。
表达式1 && 表达式2…
如果表达式1为真，输出结果为表达式2；
如果表达式1为假，输出结果为表达式1。
<script>
console.log(123 && 456);//456
console.log(123 && 456 && 789);//789
console.log(0 && 123);//0
console.log('' && 123);//''
console.log(0 && 123 && '');//0
console.log('' && 123 && 0);//''
</script>
表达式1结果为非0数值时，输出结果为表达式2的结果
表达式1结果为0，‘ ’，null，undefined，NaN时，输出结果为表达式1的结果
（2）逻辑或| | 的短路运算
表达式1 | | 表达式2…
如果表达式1为真，输出结果为表达式1；
如果表达式1为假，输出结果为表达式2。
console.log(123 || 456);//123
console.log(123 || 456 || 789);//123
console.log(0 || 123);//123
console.log('' || 123);//123
console.log(0 || 123 || '');//123
console.log('' || 123 || 0);//123
（3）逻辑中断很重要，他会影响程序的运行结果
var num = 10;
console.log(8 || num++);//8
console.log(num);//10 因为或||逻辑中断,num++还没有实现就被中断了,所以num还是等于10
7.赋值运算符
8.运算符的优先级
一元运算符：只有一个操作数，比如：++num 只有num一个操作数
二元运算符：有两个操作数，比如 a+b 有a和b两个操作数
三元运算符：有三个操作数
关系表达式 ？关系表达式为真时执行 ：关系表达式为假时执行
<script>
var a=6;
var b=8;
a>b ? a=10 : b=10;
console.log(a);//6
console.log(b);//10
</script>
一元运算符中 ! 的优先级最高,逻辑运算符中 ! > && > | |
流程控制
1.流程控制：让代码按照一定的顺序（情况）执行。
2.顺序结构：按照代码的书写顺序，从上往下，一条代码一条代码地执行。
3.分支结构：代码从上往下执行的过程中，可以根据不同的条件，执行不同的代码块，得到不同的结果。
if(条件){ 代码 } //条件为真时执行花括号里的代码，条件为假时不执行。
双分支：（执行语句二选一）
if(条件){代码1}else{代码2}//如果条件为真执行代码1，否则 执行代码2。
多分支：（执行语句多选一）
if(条件1){ 代码1}else if(条件2){代码2}…else{ 代码n} //当所有条件都不为真时，执行代码n。
多个条件最好按照从大到小的思路去写。
var stuScore = parseFloat(prompt('请输入某同学的成绩'));
if(stuScore>=0 && stuScore<=100){
if(stuScore>=90 && stuScore<=100){
alert('该同学成绩为A');
}
else if(stuScore>=80){
alert('该同学成绩为B');
}
else if(stuScore>=70){
alert('该同学成绩为C');
}
else if(stuScore>=60){
alert('该同学成绩为D');
}else{
alert('该同学成绩为E');
}
}else{
alert('成绩在0~100以内，请输入正确的成绩范围!!!');
}
switch(表达式){
case value1:
执行语句1;
break;
case value2:
执行语句2;
break;
…
default:
上面所有的value值都不匹配时执行;
}
switch语句执行思路：
用表达式的值去匹配case后面的value值，能匹配哪一个就执行那块代码。
适用于针对变量有一系列的特定值的选项时使用。
switch使用的注意事项：
（1）开发时，一般将表达式写成变量
（2）表达式的值和case后面的value值是全等，数据类型和值都相同
（3）如果当前case没有写break,不会退出switch,不管有没有匹配上value值，都会继续执行下一个case。
switch语句和if … else if 语句的使用环境
（1）一般情况下，两者可以互换使用
（2）当变量的值是特定的固定值时用switch;当条件为范围时使用if … else if
（3）当分支少的时候用if … else if，效率更高
（4）当分支多的时候用switch,效率比较高而且结构比较清晰
4.循环的结构
循环的目的：让一些代码重复执行。
299
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
