一、JS语法与变量
1、初识JavaScript
前端三层
| 语言 | 功能 | |
|---|---|---|
| 结构层 | HTML | 搭建结构、放置部件、描述语义 |
| 样式层 | CSS | 美化页面、实现布局 |
| 行为层 | JavaScript | 实现交互效果、数据收发、表单验证等 |
NodeJS让JavaScript的触角伸到了服务器端。
ECMAScript是JavaScript的标准：
JavaScript实现了ECMAScript；ECMAScript规范了JavaScript。
JavaScript体系，分为三部分：（1）语言核心，又分为ECMAScript5和ECMAScript6,7,8,9；（2）DOM；（3）BOM。
2、JavaScript语法与变量
JavaScript的书写位置：
1.在<body>中<script>标签，在内部书写JavaScript代码；
2.将代码单独保存为.js格式文件，然后在HTML文件中引入它；
注：JavaScript不能脱离HTML网页运行(当然，今后学习的NodeJS将成为JavaScript独立的运行平台)。
3、输出语句
1.alert()语句 -弹出警告框；
2.console.log()语句 -控制台输出。
认识输出语句
1.alert('慕课网');
alert：alert()是内置函数，函数就是功能的“封装”,调用函数需要使用圆括号。
'慕课网'三个字是函数的参数，因为它是字符串，我们需要将它用引号包裹。
语句的末尾应该书写分号，请注意要在输入法为英语状态下输入。
2.console.log('慕课网');
console是JS内置对象，通过“打点”可以调用它内置的log“方法”。所谓“方法”就是对象能够调用的函数。
4、学会处理报错
1.结尾处不小心写成了中文分号；
uncaught SyntaxError: Invalid or unexpected token
未捕获的语法错误:不合法或错误的符号。
注：发生错误的行号(可能有1行误差)。
2.字符串中内容忘记用引号包裹；
Uncaught ReferenceError:慕课网is not defined
未捕获的引用错误:慕课网没有被定义。
3.错误拼写alert；
Uncaught ReferenceError: alret is not defined；
未捕获的引用错误: alret没有被定义。
REPL环境：控制台也是一个REPL环境，可以使用它临时测试表达式的值。
5、变量
变量是什么：变量是在内存中存储值的符号；变量不是数值本身，它们仅仅是一个用于存储数值的容器。
定义变量：要想使用变量，第一步就是声明它，并给它赋值。
var a =5;
使用var关键字定义变量；等号表示赋值。
变量的使用：当变量被赋值后，就可以使用它了；变量使用时不能使用引号。
console.log( a);
变量的默认值：
变量的默认值 一个变量只定义，但没有赋初值，默认值是undefined；
一个变量只有被var定义，并赋初值之后，才算正式初始化完成。
var a = 10;
console.log(a);// undefined
a=10;
console.log(a) ;//10
变量的常见错误：
1.不用var定义，而直接将值赋予它，虽不引发报错，但会产生作用域问题。定义变量时必须写var。
2.尝试使用一个既没有被var定义过，也没有赋过值的字符，就会产生引用错误。变量必须先赋值再使用
标识符的命名规则（变量、函数、类名、对象的属性等也都要遵守这个命名规则）：
1.只能由字母、数字、下划线、$组成，但不能以数字开头；
2.不能是关键字或保留字；
3.大小写敏感,a和A两个不同的变量。
优秀的变量命名法：驼峰命名法:mathTestScore。
变量声明：
使用逗号同时声明和初始化两个变量；
var a =0 , b =0 ;
变量声明提升：
变量声明的提升:你可以提前使用一个稍后才声明的变量，而不会引发异常。
变量声明提升时，只提升变量的定义，不会提升它的值。
注意事项：
变量声明的提升是JavaScript的特性，所以经常出面试题；
在实际开发时，一定要先定义并给变量赋初值，然后再使用变量。
6、重点内容
1.前端开发主要有哪些层?语言和功能是什么?
2.JavaScript的书写位置是哪里?
3.JavaScript有哪些输出语句?
4.如何定义变量?变量的合法命名规则有哪些?
7、难点内容
1.只var定义一个变量，但是没有赋初值，这个变量的值是?
2.什么是变量声明的提升?
3.JavaScript中，等号的功能是什么?
二、JS基本数据类型
1、数据类型简介和检测
JavaScript中两大类数据类型：
1.基本数据类型：Number、String、Boolean、Undefined和Null；
2.复杂数据类型：Object、Array、Function、RegExp、Date、Map、Set、Symbol等等。
typeof运算符：使用typeof运算符可以检测值或者变量的类型。
注：typeof不是函数，是个操作符；不需要加括号。
5种基本数据类型的typeof检测结果：
| 类型名 | typeof检测结果 | 值举例 |
|---|---|---|
| 数字类型 | number | 5 |
| 字符串类型 | string | '慕课网' |
| 布尔类型 | boolean | true、false |
| undefined类型 | undefined | undefined |
| null类型 | object（记） | null |
2、Number（数字）类型
所有数字不分大小、不分整浮、不分正负,都是数字类型。
小数中0可以省略。介于0和1之间的小数，可以不书写0。 .5; //0.5 typeof .5; //number
科学计数法:较大数或较小数(绝对值较小)可以写成科学计数法.
3e8;//300000000
typeof 3e8; //number
一个特殊的数字型值NaN:
NaN是英语“not a number”的意思，即“不是一个数”，但它是一个数字类型的值.
typeof NaN;//number
0除以0的结果是NaN，事实上，在数学运算中，若结果不能得到数字，其结果往往都是NaN.
NaN有一个“奇怪”的性质:不自等。这个知识点将在后续课程中讲解.
3、String(字符串)类型
字符串就是“人类的自然语言”。字符串要用引号包裹，双引号或者单引号均可。
分清数字和字符串：数字11和字符串'11'在语义上是不同的,前者表达一个数量，后者是一个文本。
typeof 11; // number
typeof '11'; //string
字符串的拼接:加号可以用来拼接多个字符串.
'imo' + 'oc '; //'immoc'
字符串和变量的拼接: 要将一个变量的值“插入”到字符串中,要“斩断链接”.
var year = 2022; var str ='北京冬季奥运会在'+ year +年召开'; 注：year表示斩断链接； 新版ES中增加了反引号表示法，可以更方便进行变量插值，后续课程将进行介绍。
空字符串：一些时候需要使用空字符串，直接书写闭合的引号对即可。
var str =' ';
字符串的length属性:
字符串的length 属性表示字符串的长度。
'我喜欢JS'.length //5
' '.length //0
字符串的常用方法:
“方法”就是能够打点调用的函数，字符串有丰富的方法.
| 方法 | 功能 |
|---|---|
| charAt() | 得到指定位置字符 |
| substring() | 提取子串 |
| substr() | 提取子串 |
| slice() | 提取子串 |
| toUpperCase() | 将字符串变为大写 |
| toLowerCase() | 将字符串变为小写 |
| indexOf() | 检索字符串 |
1.charAt()方法
charAt()方法可以得到指定位置的字符。
'我喜欢JS，我也喜欢HTML'.charAt(0) //'我'
'我喜欢JS，我也喜欢HTML'.charAt(11) //'T'
'我喜欢JS，我也喜欢HTML'.charAt(74) //' '
2.substring()方法
substring(a, b)方法得到从a开始到b结束(不包括b处)的子串。
'我喜欢JS，我也喜欢HTML'.substring(3,5) //'JS'
'我喜欢JS，我也喜欢HTML'.substring(10,14) //'HTML'
substring(a, b)方法如果省略第二个参数，返回的子串会一直到字符串的结尾。
'我喜欢JS，我也喜欢HTML'.substring(6) //'我也喜欢HTML'
substring(a, b)中,a可以大于b，数字顺序将自动调整为小数在前。
'我喜欢JS，我也喜欢HTML'.substring(5,3) //'JS'
3.substr()方法
substr (a, b)中，将得到从a开始的长度为b的子串。
'我喜欢JS，我也喜欢HTML'.substr(3,2) //'JS'
substr(a, b)中，b可以省略，表示到字符串结尾。
'我喜欢JS，我也喜欢HTML'.substr(3) //'JS，我也喜欢HTML'
substr (a, b)中，a可以是负数，表示倒数位置。
'我喜欢JS，我也喜欢HTML'.substr(-4,2) //'HT'
4.slice()方法
slice(a, b)方法得到从a开始到b结束(不包括b处)的子串。
'我喜欢JS，我也喜欢HTML'.slice(3,5) //'JS'
slice(a, b)的参数a可以是负数。
'我喜欢JS，我也喜欢HTML'.slice(-4,-1) //'HTM'
slice(a, b)中，参数a必须小于参数b。
'我喜欢JS，我也喜欢HTML'.slice(5,2) //' '
5.substring(). substr()和slice()对比总结
substring(a，b)和slice(a，b)功能基本一致，都是得到从a开始到b结束（不包括b)的子串，区别:
(1)substring()可以自动交换两个参数位置，而slice()不行;slice()的参数a可以是负数，而substring()不行。
(2)substr(a， b)中参数b是子串长度，而不是位置编号
6.toUpperCase()和toLowerCase()
toUpperCase()转为大写
toLowerCase()转为小写
'i love you'.toUppercase( );//"I LOVE YOU"
'IMOOC' .toLowerCase();//"imooc"
7.indexOf()方法
indexOf()方法返回某个指定的字符串值在字符串中首次出现的位置。如果要检索的字符串值没有出现，则该返回-1。
'abcdeb' .indexOf('b')//1
'abcdeb' .indexOf('de')//3
'abcdeb'.indexOf('m')//-1
4、Boolean（布尔）类型
布尔型值只有两个: true和false，分别表示真和假。
typeof true;//boolean
typeof false;//boolean
5、Undefined类型
一个没有被赋值的变量的默认值是undefined，而undefined的类型也是undefined。
即: undefined又是值，又是一种类型，这种类型只有它自己一个值。
typeof undefined;//undefined
6、null类型
null表示“空”，它是“空对象”。 当我们需要将对象销毁、数组销毁或者删除事件监听时，通常将它们设置为null。
使用typeof检测null值，结果是object,这点尤其要注意。
typeof null;//object
类型和typeof检测结果并不总是——对应，比如数组用typeof检测结果也是object。
JavaScript可能看起来“千疮百孔”,一定需要刻意记忆。这些点往往也是面试常考的。
7、数据类型的转换
1.其他值→数字
（1）使用Number()函数
字符串→数字,纯数字字符串能变为数字，不是纯数字的字符串将转为NaN。
Number('123');//123
Number('123.4');//123.4
Number('123年');//NaN
Number('2e3');//2000
Number(' ');//0
布尔值→数字
true变为1, false变为0。
Number(true);//1
Number(false);//0
undefined和null→数字：undefined变为NaN，null变为0。
Number(undefined);//NaN
Number(null);//0
（2）使用parselnt()函数
parselnt()函数的功能是将字符串转为整数。
parseInt('3.14');//3 parselnt()将自动截掉第一个非数字字符之后的所有字符
parseInt( '3.14是圆周率');//3 所有文字都将被截掉
parseInt('圆周率是3.14'); // NaN 如果字符串不是以数字开头，则转为NaN
parseInt('3.99'); // 3 parselnt()函数不四舍五入
(3)使用parseFloat()函数 parseFloat()函数的功能是将字符串转为浮点数。
parseFloat('3.14');//3.14 parseFloat()可以将小数字符串转为数字小数
parseFloat('3.14是圆周率');//3.14 parseFloat0将自动截掉第一个非数字字符、非小数点之后的所有字符
parseFloat('圆周率是3.14');//NaN 如果字符串并不是以数字开头，则转为NaN
parseFloat('3.99');//3.99 不四舍五入
2.其他值→字符串
（1）使用String()函数
数字→字符串:
变为“长得相同”的字符串。科学计数法和非10进制数字会转为10进制的值。
string(123); //'123'
string(123.4);//'123.4'
String(2e3);//'2000'
string(NaN);//'NaN'
String(Infinity);//'Infinity'
String(0xf);//'15'
布尔值→字符串:
变为“长得相同”的字符串
String(true);//'true'
string(false);//'false'
undefined和null→字符串:
变为“长得相同”的字符串
string(undefined) ;//'undefined'
String(null);//'null'
(2)使用toString()方法
几乎所有值都有toString()方法，功能是将值转为字符串。
3.其他值→布尔值
（1）使用Boolean()函数
数字→布尔值
0和NaN转为false，其他数字都转为true。
Boolean(123);//true
Boolean(0);//false
Boolean(NaN);//false
Boolean(Infinity);//true
Boolean(-Infinity); //true
布尔值→布尔值
空字符串变为false，其他都转为true。
Boolean(‘ ’);//false
Boolean(‘abc’);//true
Boolean(‘false’);//true
undefined和null→布尔值
转为false
Boolean(‘undefined’);//false
Boolean(‘null’);//false
8、小案例：小小加法计算器
使用prompt()函数弹出输入框，让用户输入两个数字。
对用户输入两个数字进行加法运算，而由于用户输入的内容是字符串类型，所以必须先转为数字类型，才能做加法运算。
最后用alert()显示结果。
普遍计算机程序执行步骤:
用户输入->计算机处理->显示结果
9、复杂数据类型
除基本类型值外，JS的世界中还有复杂数据类型。如：
[1，2，3] { a: 1,b: 2 } function () {}
复杂数据类型都是“引用类型”，引用类型的特性将在数组一课中介绍。
10、重点内容
1.JavaScript中有哪些基本类型值?它们的typeof检测结果是什么?
2.说出下面几个特殊值是什么:①NaN ②undefined ④null
3.各种类型值相互转换的方法和转换规律
11、难点内容
1.下面表达式的结果是?
parseInt( '3.6’+ '5.1'); //3
Boolean( 'false'); //true
0/0; //NaN
4/0; //Infinity
2.请说出substring(). substr()和slice()方法的区别
'abcde'.substr(1,3); //"bcd" 'abcde'.substring(1,3); //"bc" 'abcde'.slice(3,2); //"" 重 'abcde'.substring(3,1); //"bc"
三、表达式与操作符
1、表达式和运算符
表达式种类：算术；关系；逻辑；赋值；综合。
2、算术表达式
| 运算符 | 意义 |
|---|---|
| + | 加 |
| - | 减 |
| * | 乘 |
| / | 除 |
| % | 取余 |
加减乘除：加减的符号和数学一致，乘法是*号，除法是/号。
默认情况，乘除法的优先级要高于加法和减法﹔必要时可以使用圆括号来改变运算的顺序。
加号的两种作用：加号有“加法”和“连字符”两种作用。
如果加号两边的操作数都是数字，则为“加法”，否则为连字符。
1+2 //3
1+'2' //'12'
'1'+'2' //'12'
取余运算
也叫作“求模运算”，用百分号“%”表示。
a % b表示求a除以b的余数，它不关心整数部分，只关心余数。
隐式类型转换
如果参与数学运算的某操作数不是数字型，那么JavaScript会自动将此操作数转换为数字型。隐式转换的本质是内部调用Number()函数。
3*'4' //12
true + true //2
false + 2 //2
3*'2天' //NaN
有关IEEE754
在JavaScript中，有些小数的数学运算不是很精准。
0.1+0.2 //0.30000000000000004
JavaScript使用了IEEE754二进制浮点数算术标准,这会使一些个别的小数运算产生“丢失精度”问题。
解决办法:在进行小数运算时，要调用数字的toFixed()方法保留指定的小数位数。
(0.1+0.2).toFixed(2) //"0.30"
Number((0.1+0.2).toFixed(2)) //0.3
幂和开根号
JavaScript中没有提供幂计算、开根号的运算符。需要使用Math对象的相关方法进行计算。
Math.pow(2,3) //8
Math.pow(3,2) //9
Math.sqrt(81) //9
Math.sqrt(-81) //NaN 负数不能开根号
向上取整和向下取整
Math.ceil()向上取整;Math.floor)向下取整。
Math.ceil(2.4) //3 Math.floor(2.4) //2
Math.ceil(-2.4) //-2 Math.floor(-2.4) //-3
Math.ceil(2) //2 Math.floor(-2) //2
3、关系表达式
关系运算符
| 运算符 | 意义 |
|---|---|
| 大于 | |
| < | 小于 |
| >= | 大于等于 |
| <= | 小于等于 |
| == | 等于 |
| != | 不等于 |
| === | 全等于 |
| !== | 不全等于 |
大于和小于：大于>、小于<两个符号和数学相同。
“大于等于”运算符是>=，“小于等于”运算符是<=。
8>5 //true
7<4 //false
8>=7 //true
8>=8 //true
8<=8 //true
8<=11 //true
判断是否相等
如果想比较两个值是否相等，此时应该使用==运算符。
JavaScript中等号=表示赋值，而并不是相等。判断相等应该使用==运算符。
3 == 3 //true
3===3 //true
3=3 //错误语句
相等和全等
两个等号==运算符不比较值的类型，它会进行隐式转换后比较值是否相等。
三个等号===运算符，不仅比较值是否相同，也比较类型是否相同。
5 == '5'; //true
5==='5'; //false
1==true //true
1===true //false
0==false //true
0===false //false
undefined==null //true
undefined==null //false
NaN不自等
NaN作为一个特殊的数字类型值，它在用==比较的时候也有特殊的结果。
NaN ==NaN //false
NaN ===NaN //false
如何判断某变量值为NaN
isNaN()函数可以用来判断变量值是否为NaN。
isNaN(NaN) //true
isNaN(5) //false
但isNaN()也不好用，它的机理是︰只要该变量传入Number)的执行结果是NaN，则isNaN()函数都会得到true。
isNaN(undefined) //true
isNaN('3天') //true
isNaN(null) //false
特殊值的相等关系
null == undefined //true
null == 0 //false
NaN ==NaN //false
不相等和不全等
!=表示不相等，!==表示不全等。
5 !=6 //true
5 !==6 //true
5!='5' //false
5!=='5' //true
4、逻辑表达式
逻辑运算符
| 运算符 | 意义 |
|---|---|
| ! | 非 |
| && | 与 |
| || | 或 |
1.非运算
!表示“非”，也可以称为“置反运算”。!是一个“单目运算符”，只需要一个操作数。
置反运算的结果一定是布尔值
!true //false
!false //true
!0 //true
!undefined //true
!'' //true
!'imooc' //false
!!true //ture
!!0 //false
!!'' //false
!!'imooc' //true !!表示该值的布尔值
2.与运算
&&表示“并且”，称为“与运算”，口诀:都真才真。(下面式子也符合短路计算)
true && true //true
true && false//false
false && true//false
false && false//false
3.或运算
||表示“或者”，称为“或运算”，口诀:有真就真。(下面式子也符合短路计算)
true || true //true
true || false//true
false || true//true
false || false//false
4.短路计算（短路计算在工作编程中很有用，在后续课程讲解）
（1）a&&b都真才真。
思路：若a真，b真总结果就真，b假总结果就假；若a假，不用看b了，被“短路”。 a && b运算中:a真，表达式值为b;a假，表达式值为a。
3&&6 //6
undefined&&15 //undefined
15&&undefined //undefined
null&&2 //null
''&&16 //''
NaN&&undefined //NaN
(2)a||b 有真就真。
思路：若a真，不用看b了被“短路”；
若a假，b真总结果就真，b假总结果就假。
a|| b运算中: a真，表达式值为a; a假，表达式值为b。
3||6 //3
0||6 //6
null||undefined //undefined
'a'||'b' //'a'
NaN||null //null
5.逻辑运算顺序
逻辑运算的优先级是︰非→与→或。
!true||true //true
3&&4||5&&6 //4
5、赋值表达式
赋值运算符
| 运算符 | 意义 |
|---|---|
| = | 赋值 |
| +=,-=,*=,/=,%= | 快捷赋值 |
| ++ | 自增运算 |
| -- | 自减运算 |
JS中，=表示赋值，==判断是否相等(不判断类型)，===判断是否全等。
赋值运算符会将等号右边的数值，赋予等号左边的变量。
赋值运算也产生值
赋值运算也产生值，等号后面的值将作为“赋值运算的值”。
var a;
console.log(a = 4); //4
这就意味着，可以连续使用赋值运算符。
var a, b,c;
a = b = c = 15;
console.log(a) ; //15
console.log(b) ; //15
console.log(c) ; //15
自增/自减运算符 ++和--是自增/自减运算符，表示在自身基础上加1或减1
var a = 3;
a++;
console.log(a); //4
a++和++a的区别 a++先用再加;++a先加再用。
var a=3;
var b=a++;
console.log(b);//3
console.log(a);//4
var a=3;
var b=++a;
console.log(b);//4
console.log(a);//4
6、综合表达式
运算顺序:非运算→数学运算→关系运算→逻辑运算（非数关逻）。
5<3+3 //true
3>2 && 8>3+4 //true
3>2 && 8>3+5 //false
!13 <5-3 //true
!13 <5-5 //false
小案例:闰年判断
公历闰年的简单计算方法（符合以下条件之一即可) 1．能被4整除且不能被100整除。 2．能被100整除也能被400整除。
7、重点内容
1.表达式有哪几种?每种表达式分别有哪些运算符?
2.每种表达式中运算顺序是什么?综合运算顺序是什么?
8、难点内容
1.什么是短路计算? 3 &&13的结果是多少? 3 ||13呢?
13,3
2.a++和++a有什么区别?
a++先用在加，++a先加在用。
var a = 3;
var b = 4;
alert(a++ + b++ + ++a + ++b);
思路：a++，alert中a的值为3；之后a++，所以a=4；
b++，alert中b的值为4，之后b++，所以b=5；
++a，先加再用，a=4+1=5,；
++b，b=5+1=6；
所以一共是3+4+5+6=18;
