本K在经过三个静态站制作的狂风暴雨之后，终于开始了JavaScript的学习。作为一只从来没有正儿八经接受过计算机语言的小白，居然能够跟上浩哥的课程进度，我的内心都被我的才智震惊到了，果然本K是天生丽质难自弃，天生我材必有用哇，哦呵呵~
咳咳，废话不多说，咱们来开始我们的JS小课堂，希望能够帮助到跟我一样的第一次接受计算机语言的同志们。
一、什么是JS。
JavaScript，简称JS，它是一种基于浏览器的、基于对象的、用于事件驱动的脚本语言。简单来说，JS就是用来实现html页面上的一些动态效果的语言。它的作用有很多，它可以进行表单的验证，可以添加页面的动态效果，可以动态更改页面的内容，也可以通过Ajax来实现页面的局部更新。
二、JS的组成部分。
JS主要有三大部分组成。
1、ECMAScript语法标准，简称ES标准，它规范了JS中的语法、变量和数据类型、运算符、逻辑控制语句等重要内容。
2、BOM，浏览器对象模型，包括history（历史）、document（文档）、location（地址）等浏览器相关的重要信息。
3、DOM，文档对象模型，它的重要内容可以概括为“节点”，节点可以是html中的任意一个标签，像是head，body就是html文档中的两个节点，两者以下的所有分支都可以形成非常具有层次性的节点层。
三、JS的基本结构与使用方式
1、基本结构
我们大多数情况下见到的是在html文档中直接插入的JS代码，结构如下图↓
2、使用方式
JS的使用方式有三种，在这一点上和CSS的使用方式大致相同，但在某些细节上有所不同。
方式一：HTML标签中内嵌JS（不推荐！）
方式二：HTML页面中直接使用
方式三：引用外部JS文件（与CSS外部文件引用相区分！）
四、变量
1、变量声明的写法
1.1 先声明变量在赋值
var width; width=5；
使用var声明的变量，只在当前函数作用域有效（提倡使用）
1.2 不声明，直接赋值（默认全局变量）
width=5;
不使用var，直接赋值生成的变量，默认为全局变量，整个JS文件有效
1.3 同时声明和赋值变量
var catName="ppap"；
var x,y,z=10;
同一声明语句同时生命多个变量，变量之间用英文逗号分隔。但赋值需要单独赋，例如上式中，只有z赋为1，x,y为undefined（未定义）
【注意事项】
① JS中所有变量类型声明，均使用var关键字。变量的具体数据类型，取决于给变量赋值的执行；
② 同一变量，可以在多次不同赋值时，修改变量的数据类型：
var width=10;//width 为整形变量；
width="哈哈";// width 被改为字符串类型；
③ 变量可以使用var声明，也可以省略var。区别：不使用var，默认为全局变量；
④ 同一变量名，可以多次用var声明，但是并没有任何含义，也不会报错。第二次之后的声明，只会被理解为赋值；
⑤ JS末尾分号可以省略，但不建议省略。
2、变量的命名规则
2.1 变量名只能由字母，数字，下划线，$组成；
2.2 开头不能为数字；
2.3 变量区分大小写，大写字母与小写字母为不同变量。
3、变量名命名要符合（小）驼峰法则
变量开头为小写，之后每个单词首字母大写；或者单词之间用下划线分割。
4、JS中的变量的数据类型
4.1 Undefined：未定义，用var声明的变量，没有进行初始化赋值；
4.2 Null：表示为空的引用，例如空对象、空数组;
4.3 Boolean：真假，可选值true/false；
4.4 Number：数值类型，可以是小数，也可以是整数；
4.5 String：字符串，用双引号""或单引号''包裹的内容，成为字符串；
4.6 Object：（复杂数据类型）。
5、常用的数值函数
5.1 isNaN()：用于判断一个变量或常量是否为为NaN（非数值）
使用isNaN判断时，会尝试使用Number()函数进行转换，如果能转换为数字，则不是非数值，则结果为false；
"111" 纯数字字符串，false
""空字符串，false
"1a" 包含其他字符的字符串，true
true/false 布尔类型，false
5.2 Number()：
将其他类型转换为数值类型
【字符串类型转数值】
>>> 字符串为纯数字字符串会转为对应的数字，例如"111"会转换为111
>>> 字符串为空字符串时，会转为0 ，例如 ""会转换为0
>>> 字符串包含其他非数字字符时，不能转换 ，例如"111a"会转换为NaN
【布尔类型转换值】
true —— 1 flase —— 0
【null/undefined转数值】
null —— 0 undefined —— NaN
【object转数值】
先调用ValueOf方法，确定函数是否有返回值，再根据上述各种情况判断。
5.3 parseInt()：
将字符串转换为数值类型
>>> "" —— 不能转，结果为NaN
>>> 纯数字字符串 —— 能转，但是小数转化时会抹掉小数点后面的数字，不会进行四舍五入
>>> 包含其他字符的字符串 —— 会截取第一个非数值字符前的数值部分 "123a45"——123 "a123"——NaN
>>> parseInt只能转string类型，布尔、null、undefined均为NaN
5.4 parseFloat()：
将字符串转换为数值
>>> 使用方式同parseInt，但是当转换小数字符串时，保留小数点；转化整数字符串时，保留整数。
5.5 typeOf()：
用来检测变量数据类型
未定义——Undefined；字符串——string；true/false——Boolean；数值——Number；对象/null——Object；函数——function。
五、常用输出语句
1、 document.write("")
输出语句，将write的()中的内容打印在浏览器屏幕上；
使用时注意：除变量/常量以外的任何内容，打印时必须放到""中。变量/常量必须放到""外。
打印的内容有多部分组成时，之间用+链接；
例如：document.write("左手中的纸牌："+left+"<br/>")
2、 alert();
弹窗警告，()中的使用方式同上。
六、运算符
1、算术运算（单目运算符）
+ ：加 两种作用：
连接字符串（当加号两边有任意一边为非数字时，链接之后结果为字符串）
进行运算（当加号两边均为数字时）
- ：减
* ：乘
/ ：除 除出来是几就是几
% ：取余
++ ：自增 在原有基础上加1
-- ：自减 在原有基础上减1
n++ ++n的异同
不同点：
n++：先使用n的值进行计算，然后再把n+1 ；
++n：先把n的值+1，然后再用n+1以后的值运算。
相同点
不论n++还是++n，在执行完代码以后，均会把n+1。
2、赋值运算
= ：赋值
+=：a+=5; 相当于a=a+5；
-= ：a-=5;相当于a=a-5；
但是，前者的执行效率要比后者快
*=
/=
%=
3、关系运算
==：等于，类型相同的时候，同===；类型不同时，尝试将等式两边转为数字，再判断。
NaN == NaN false； null==undefined true。
===：严格等于，类型不同，直接返回false；类型相同，在进行下一步判断。
null===undefined false。
！=：不等于
>=：大于等于
<=：小于等于
4、条件运算（多目运算）
a>b?true:false
有两个关键符号： ？ 和 ：
当？前面的部分运算结果为true时执行：前面的代码；
当？前面的部分运算结果为false时执行：后面的代码。
多目运算符可以多层嵌套，例如：
var num = 5 ;
document.write(num>5?"呵呵":(num==5?"哈哈":"嗷嗷"));
5、逻辑运算符
&&逻辑与运算符
||逻辑或运算符
！非
6、运算符的优先级（优先级从高到低）
()
++ -- !
* / %
+ -
> < >= <=
== ！=
&&
||
各种赋值
七、分支结构
1、if-else结构
1.1 结构写法
if(条件){
语句
}else{
语句
}
1.2 if()中的表达式，运算之后的结果应该为：
① Boolean：true 真/false 假；
② String：非空字符串为真/空字符串为假；
③ Null/NaN/Undefined：全为假；
④ object：全为真；
⑤ Number：0为假/其他全部为真；
1.3 else{}结构，可以根据具体情况省略。
2、多重if、阶梯if、if-else-if 结构 （提倡）
2.1 结构写法
if(条件一){
// 条件一成立
}else if(条件二){
// 条件一不成立&&条件二成立
// else-if部分可以有n多个
}else{
// 条件一不成立&&条件二不成立
}
2.2 多重if结构中各个判断条件是互斥的！只能选择其中一条路。
2.3 if/else的{}可以省略，但是一般不提倡；
如果省略{}、则if/else结构包含的代码，仅为其后最近的一行（分号结束）；
如果省略{}、则else结构永远输入其前方最近的一个结构。
3、嵌套if结构（不提倡）
3.1 结构写法
if(条件一){
//条件一成立
if(条件二){
//条件一成立&&条件二成立
}else{
//条件一成立&&条件二不成立
}
}else{
//条件一不成立
}
3.2 if结构可以多重嵌套，但是原则上不超过3层
4、switch-case结构
4.1 结构写法
swith(表达式){
case 常量表达式一:
语句;
break;
case 常量表达式二;
语句;
break;
......
default:
语句;
break;
}
4.2 注意事项
① switch()中的表达式，以及每个case之后的表达式，可以为任何JS支持的数据类型,但不能是对象和数组；
② case后面的所有常量表达式必须各不相同，否则只会执行第一个；
③ case后的常量可以是任何数据类型；同一个switch结构的不同case可以是多种不同的数据类型；
④ switch结构在进行判断的时候，采取的是全等判断===；
⑤ break的作用：执行完case代码后，跳出当前的switch结构；
缺少break的后果：从正确的case项开始，依次执行所有的case和default；（原因 -> ⑥）
⑥ switch结构在判断时，当遇到正确的case项后，将会不在判断后续项目，依次往下执行；
⑦ switch结构的执行速率要快于多重if结构，在多路分支时，可优先考虑使用switch结构。
八、循环结构
1、循环结构的步骤
声明循环变量→判断循环条件→执行循环体（while的{}中的所有代码）操作→更新循环变量（缺失会导致死循环）→然后循环执行前2-4条
2、JS中循环条件支持的数据类型
① Boolean：true 真/false 假；
② String：非空字符串为真/空字符串为假；
③ Null/NaN/Undefined：全为假；
④ object：全为真；
⑤ Number：0为假/其他全部为真；
3、循环特点
while循环特点：先判断，在执行；
do-while循环特点：先执行，后判断；即便初始条件不成立，do-while循环也至少执行一次。
4、for循环
4.1 三个循环表达式：<初始化循环变量>;<判断循环条件>;<循环变量更新>，各个之间用；分割；
for循环三个条件都可以省略，两个；缺一不可。
4.2 for循环特点：先判断在执行。
4.3 for循环三个表达式均可以由多部分组成，之间用,分割；但是第二部分判断条件需要用&&链接，最终结果需要为真/假。
九、嵌套循环
1、循环控制语句
1.1 break 终止本层循环，继续执行循环后面的语句
当循环有多层时，break只会跳过一层循环；
1.2 continue 跳过本次循环，继续执行下一次循环
对于for循环，continue执行后，继续执行循环变量更新语句（n++）；
对于while、do while，continue执行后，继续执行循环条件判断；所以使用这两个循环时，必须注意：continue一定要在n++之后使用。
2、嵌套循环特点
外层循环控制行数，内层循环控制每行元素个数
3、图形题思路
3.1 确定图形一共几行，即为外层的循环次数；
3.2 确定每行有几种元素，代表有几个内层循环；
3.3 确定每种元素的个数，即为每个内层循环的次数；
Tips：通常找出每种元素个数与行号的关系式，即为当前内层循环的最大值；（从1开始循环）
①判断是否为一个数字：Number(num)不为NaN，说明为数字
②判断一个数字是否为正数：Number(num)>0
③判断一个数字是否为整数：parseInt(num)==parseFloat(num)
十、函数
1、函数定义的三个部分
函数名 function
参数列表： 有参函数；无参函数。
函数体
2、函数的声明及调用
2.1 函数的声明格式：
function 函数名(参数1,参数2,参数3){
//函数体
return 结果;
}
函数调用的格式：
直接调用 ： 函数名(参数1的值,参数2的值,......);
事件调用 ： 事件名=函数名();
2.2 函数声明的几点强调：
①函数名的命名必须符合小驼峰法则（首字母小写，之后每个单词首字母大写）；
②参数列表，可以有参数、可以无参数，分别叫做有参函数、无参函数；
③声明函数时的参数列表称为"形参列表"(变量的名)；调用函数时的参数列表称为"实参列表"(变量的值)；{函数中实际有效的参数取决于实参的赋值，未被赋值的形参将为undefined}；
④函数如果需要返回值，可用return返回结果。调用函数时，使用 var 变量名 = 函数名(); 的方式，接受返回结果；如果函数没有返回值，则接受的结果为Undefined。
⑤函数中变量的作用域：在函数中，使用var声明的变量，默认为函数局部变量，只在函数内容能用（不使用var声明的变量，默认为全局变量（函数中的全局变量，必须在函数调用后才能使用））；函数的形参列表，为函数局部变量，只在函数内部能用；
⑥函数声明与函数调用没有先后之分。即调用语句可写在声明语句之前。
JS中代码运行，会先进行检查、装载，即声明变量、函数等操作；然后再进入执行阶段，（变量的赋值等属于执行阶段）。所以函数的声明属于检查装载阶段，函数的调用属于执行阶段。所以，函数的调用语句卸载函数的声明语句之前，并没有任何关系。
//栗子如下↓
console.log(num);
var num = 10;
funN();
function funcN(){}
顺序为：
————检查装载阶段————
var num ; //声明变量
function funcN(){} //声明函数
————执行阶段————
console.log(num);
num = 10;
funN(); //执行函数的{}中代码
3、匿名函数的声明和调用
3.1 声明一个匿名函数，直接赋给某个事件；
window.onload = function (){}
3.2 使用函数表达式声明匿名函数；
var fun = function(){} //声明函数表达式
fun(); //调用函数表达式
>>>使用匿名函数表达式，则调用语句必须在声明语句之后，否则报错（对比常规函数声明与调用区别？）
3.3 使用自执行函数声明并直接调用匿名函数；
① !function(参数1){}(参数1的值);
使用任意运算符开头，一般使用!
② (function(){}());
使用()将匿名函数及之后的括号包裹
③ (function(){})();
使用()只包裹匿名函数表达式
三种写法的特点：
①结构清晰，开头加!，结尾加()，不容易乱，推荐使用；
②可以表明匿名函数与之后的小括号为一个整体，官方推荐使用；
③无法表明函数与之后()为一个整体，不推荐使用。
4、函数内部重要属性
4.1 arguments对象
①作用：用于保存调用函数式所赋值的实参列表。
>>>当调用函数并使用实参赋值时，实际上参数已经保存到arguments数组中，即使没有形参，也可以使用arguments[n]的形式调用参数。
②arguments数组的个数取决于实参列表，与形参无关（顺序，从0开始）；但当第n个位置的形参、实参、arguments都存在时，形参与arguments是同步的。（即在函数中修改其中一个的值，另一个会同步变化）
③arguments.callee时arguments的重要属性，用于返回arguments所在函数的引用（引用：地址）；可以调用自身函数执行；在函数内部调用函数自身的写法被称为“递归”，所以arguments.callee()是递归调用时常用的方法。
4.2 this
函数调用语句所在的作用域，即谁调用函数，this指向谁。
来源：https://www.cnblogs.com/wk1102/p/6681980.html