作为一个合格的后台开发人员，js是必须要掌握的知识，本人刚做开发的时候，使用的是前后端分离，但是一次离职之后，到了一家新公司，也是一家规模小的公司，需要自己做前台和后台的，后台这方面不用说了，前台是一个很大的难题，前台搞得我头大，特意制作一个简单的学习笔记，后续我也会制作一些常用的js特效来大家一起探讨，来帮助大家学习和进步，不对的地方希望大家能够指正!!!!。
我们首先简单介绍一下js，
第一课 1.JavaScript简介
JavaScript是NetScape公司为Navigator浏览器开发的，是卸载HTML文件中的一种脚本语言，能实现网页内容的交互显示。当用户在客户端显示该网页时，浏览器就会执行JavaScript程序，用户通过交互的操作来改变网页的内容，来实现HTML语言无法实现的效果。
2.如何使用JavaScript
（1）通过<script></script>中直接编写
<script type='text/javascript'>
js的位置
</script>
（2）通过<script src='目标文档的URL'></script>链接外部的Js文件
<script src="放在项目中js的位置"></script>
（3）作为某个元素的事件属性值或者是超链接的href属性值
<a href="javascript:confirm('您确定要删除吗')">删除</a>
3.代码屏蔽
标准的代码屏蔽方式
<script type='text/javascript'>
<!--
Js代码;
//-->
</script>
如果浏览器不支持Js，可以使用<noscript></noscript>标签，显示noscript中的内容（一般人都不知道吧）
4.JavaScript的基本语法
（1）JavaScript的执行顺序（很重要，一不小心放错位置可能会不执行啊）
按照在HTML文件中出现的顺序依次执行
如果需要在HTML文件执行函数或者全局变量，最好将其放在HTML的头部中。
（2）大小写敏感
JavaScript严格区分大小写
（3）忽略空白符和换行符
JavaScript会忽略关键字、变量名、数字、函数名或其它各种元素之间的空格、制表符或换行符
我们可以使用缩进、换行来使代码整齐，提高可读性
（4）使用;结束语句（这是一个很好的习惯）
（5）语句分隔符
(1)可以把多个语句写在一行
(2)最后一个语句的分号可以省略，但尽量不要省略
(3)可以使用{}括成一个语句组，形成一个块block（不是很常用，大家了解就好）
（6）通过\对代码进行折行操作
document.write(' hello\
world');
(7)注释(根据不同软件使用快捷键就好)
(1) 单行注释//
(2)多行注释/*注释内容*/
（8）JavaScript的保留字（也是一些关键字，大家可以简单看一看）
（9）通过document.write()向文档书写内容
（10）通过console.log()向控制台写入内容（在调试js中使用的是这个）
（11）JavaScript中的错误（介绍两个常用的处理异常或者是错误的方式，也是自己不断的调试才能真正的体会这个调试的技巧，后面也会详细地介绍）
（1）语法错误 ：通过控制台进行调试
（2）逻辑错误：通过alert()进行调试
第二课 数据类型与变量（和java一样，js也有自己独立的数据类型和变量，其实js和java完全是两种不同的语言）
1.原始数据类型
（1）数值型
JavaScript中的数值包含整数和浮点数，所有数值都以双精度浮点型来表示。
双精度浮点数可以表示-2的53次方到2的53次方的整数，也可以表示为正负1.7976的10的308次方的最大值和正负2.2250乘以10的-308次方的浮点数。
(1)十进制数
(2)十六进制
(3)八进制数
(4)特殊值
Infinity无穷大
当一个数值或数值表达式的值超出了可表示的最大值的范围，将被赋值为Infinity。可以有无穷大Infinity，也可以有无穷小-Infinity
例如： 1.79e309 -1.79e309（也就是特别大的值）
NaN （Not a number）
NaN代表Not a Number。当一个Undefined表达式的结果为数值型数据时，该数值型就是NaN值。NaN是唯一一个不能和自身做比较的值
例如： 0/0 可以通过isNaN()检测值是否为NaN
（2）字符串型
(1)定界符 ""|''
(2)转义符 \n->回车换行
\r->换行
\t->水平制表符
\"->"
\'->'
（3）boolean型
true|false
2.复合数据类型
(1)对象(object)
(2)数组(array)
(3)函数(function)
3.特殊数据类型
(1)无定义数据类型undefined(在开发中你可能会经常遇到啊，下面简单的解释一下)
undefined用来表示不存在的值或者尚未赋值的变量。对一个变量只声明不赋值或者赋予一个不存在 的属性值，都会使这个变量的值为Undefined
（2）空值null
null表示空值，表示什么都没有，相当于一个占位符。null和undefined的区别就是undefined表示变量未被赋值，而null表示变量被赋予了一个空值。
这里也做一个简单的例子来解释这些含义
<script type="text/javascript">
//十进制
var a=12;
a=-23;
a=12.3;
a=.23e4;
a=2e3;
a=3E-2;
//十六进制
a=0xABCDEF;
a=0X0;
a=0Xfff;
//八进制
a=0123;
a=01234324;
//正无穷大Infinity
a=1.79e310;
a=-1.79e310;
//NaN:Not a Number
a=0/0;
// alert(a);
//通过isNaN()来检测是否是NaN值
// alert(isNaN(a));
//NaN不能和自身比较
// alert(NaN===NaN);
//字符串类型
var str='this is a test';
var str1="hello world";
// var str2=aaaa;
// alert(str);
// alert(str1); king's
// var username="king's";
// var username='king\'s';
// alert(username);
// var str2='a\nb\rc\td"e\\f';
// alert(str2);
//布尔类型
var married=true;
// married=TRUE;
// alert(true);
//声明变量为赋值
// var test6;
//赋值为不存在的属性值
var test7=String.NotExists;
// alert(test7);
//null值
var test8=null;
alert(test8);
alert(null===undefined);
</script>4.变量（这个才是学习的重点地方）
（1）声明变量
(1) 通过var关键字声明变量
(2)可以声明变量的同时给变量赋值
(3)可以一次声明一个变量也可以一次声明多个看变量
(4)如果只声明变量未对其赋值，默认值为undefined
(5)如果变量重名产生覆盖
(6)注意：
(1)变量严格区分大小写
(2)变量名称不要包含特殊字符
(3)变量名称最好遵循驼峰标记法或者下划线法
(4)变量名称最好含义明确
下面一段代码解释这写（要是有不对的地方，大家直接@我我直接修改啊，以免造成误解）
<script type="text/javascript">
//声明变量
var a;
var b;
var c,d;
// alert(a);
//声明变量的同时并且赋值
var test='this is a test';
var test1=12;
var test2=1.2;
var test3=true;
var test4=false;
// alert(test);
//声明多个变量赋相同的初始值
var a=b=c=d=e=1;
// alert(a);
//变量重名会产生覆盖
a=33;
// alert(a);
//变量名称严格区分大小写
var username='king';
var USERNAME='QUEEN';
// alert(username);
// alert(USERNAME);
//变量名称最好含义明确，以字母或者下划线开始，跟上数字字母下划线
var age=12;
var test5='hello';
// var 12a='bb';
// alert(12a);
var _test='hello';
// alert(_test);
//驼峰标记法
var firstName='king';//小驼峰
var FirstName='queen';//大驼峰
var first_name='maizi';//下划线法
</script> （2）变量在内存中的存储与释放（在这里先不详细地讲，后面会做补充）
(1)收集方式
(2)收集内容
(3)回收算法
5.类型转换
5.1隐式转换
5.1.1 转换成布尔类型假
undefined->false
null->false
数值型0或0.0或NaN->false
字符串长度为0->false
其它对象->true
特别注意的是：：undefined->NaN
5.1.2 转换为数值型数据
null->0
true->1|false->0
内容为数字->数字，否则转换成NaN
其它对象->NaN
5.1.3转换为字符串型数据
特别注意的是： undefined->"undefined"
true->"true" false->"false"
数值型->NaN、0或者与数值对应的字符串
其它对象->如果存在这个对象则转换为toString()方法的值，否则转换为Undefined
5.2显示转换
5.2.1 转换成数值
（1）Number函数强制转换成数值
数值->转换成原来的值
字符串->如果可以解析为数值，则转换成数值；否则转换成NaN或者0
true->1,false->0
undefined->NaN
null->0
（2）转换成整型 praseInt()
（3） 转换成浮点型 praseFloat()
(4) 注意
Number函数将字符串转换为数值比praseInt函数严格很多。基本上只要有一个字符无法转换成数值，整个字符串就会被转换成NaN
5.2.2转换成字符串
(1)通过String函数转换成字符串
数值->数值本身
字符串->字符串本身
true->"true",false->"false"
undefined->"undefined"
null->"null"
(2)转换成字符串型 toString()函数
5.2.3转换成布尔类型
（1） 通过Boolean函数强制转换成布尔值
0、-0->false
NaN->false
空字符串->false
undefined->false
null->false
<script type="text/javascript">
/*
if(exp){
exp为true的代码段;
}else{
exp为false的代码段;
}
*/
//其它类型转换成布尔类型假的有
var a;//undefined->false
//typeof得到变量的类型
// alert(typeof a);
a=null;//null->false
//0 0.0 NaN->false
a=0;
a=0.0;
a=0/0; //NaN
a=NaN;
// alert(a);
a='';//空字符串->false
a='0';
a=' ';
// alert(typeof a);
// if(a){
// alert('真');
// }else{
// alert('假');
// }
//其它类型转换成数值型
var b=undefined;//undefined->NaN
b=null;//null->0
b=true;//true->1
b=false;//false->0
// alert(1+b);
var c='12';//'12'->12
c='3king';//'3king'->NaN
c='true';
// alert(2*c);
c='33';
// alert(typeof c);
// c=c*1;
// alert(typeof c);
</script> <h1>隐式转换的例子</h1>
<script type="text/javascript">
//其它类型转换成字符串型
document.write(undefined);//'undefined'
document.write('<br/>');
document.write(null);//'null'
document.write('<br/>');
document.write(NaN);//'NaN'
document.write('<br/>');
document.write(123);//'123'
document.write('<br/>');
document.write(true);//'true'
document.write('<br/>');
document.write(false);//'false'oujipjip
document.write('<br/>');
alert(1+"1");//拼接字符串
alert('2'+12);//拼接字符串
</script><script type="text/javascript">
//其它类型转换成布尔类型false的有
var test=Boolean(0);
test=Boolean(-0);
test=Boolean(NaN);
test=Boolean(undefined);
test=Boolean('');
test=Boolean(0.0);
test=Boolean('0');
//其它类型转换成字符串型
test=String(1234);
test=String(23.34);
test=String('this is a test');
test=String(true);
test=String(false);
test=String(null);
test=String(undefined);
test=String(NaN);
//其它类型转换成数值型
test=Number(12);
test=Number(232.3);
test=Number(true);
test=Number(false);
test=Number(undefined);
test=Number(NaN);
test=Number(null);
test=Number('3king');
test=Number('324');
//通过parseInt()进行转换成整型
test=parseInt('123');
test=parseInt('234',0);
test=parseInt('0xabcdef');
test=parseInt('012344');
test=parseInt(45,16);
test=parseInt('3ki23ng');
test=parseInt('true');
test=parseInt(true);
test=parseInt(' 35 6 a ');
//通过parseFloat()转换成浮点型
test=parseFloat('123.34abc');
test=parseFloat('123');
test=parseFloat('sdf');
test=parseFloat(' 2e3a');
alert(test);
</script>3 运算符和表达式
运算符和表达式是所有语言都有的知识点，这里把知识点列出，然后对知识点做一个简单的小例子，大家看一看就可以了。
1.表达式
表达式是用于JavaScript脚本运行时进行计算的式子，可以包含常量、变量、运算符
2.运算符
算术运算符
+、-、*、/、%、++、--
++、--分为前缀形式和后缀形式
前缀形式先加减1在执行
后缀形式先执行再加减1
注意
+号用来连接两个字符串
只要+连接的操作数中有一个是字符串型，Js就会自动把非字符串型数据作为字符串型数据来处理
Js代码的执行顺序是从左到右，所以在+连接的表达式中，遇到字符串型数据之前，所有出现的数值型数据(或者可以自动转换为数值型的数据)仍被作为数值来处理。为了避免这种情况，我们可以在表达式前拼一个空字符串
字符连接符
通过+连接字符串
赋值运算符
=、+=、-=、*=、/=、%=、.=
比较运算符
>、>=、<、<=、==、!=、===、!==
注意
比较运算符的结果为布尔类型
==只比较值是否相等、===比较值和类型
逻辑运算符
&&、||、!
注意
逻辑运算符的结果为布尔类型
&&如果第一个表达式为false，造成短路
||如果第一个表达式为true,造成短路
三元运算符
exp1?exp2:exp3
其它运算符
逗号运算符
逗号用来将多个表达式连接为一个表达式，新表达式的值为最后一个表达式的值，多用在变量声明处
void运算符
void运算符用来指明一个表达式无返回结果
typeof运算符
typeof运算符用来返回一个字符串，返回的是操作数的数据类型
3.运算符的优先级
通过()改变优先级
<script type="text/javascript">
var r=8;
var pi=3.14;
var s=pi*r*r;
alert('圆的面积'+s);
</script>//算术运算符的例子
var i=3,j=8;
document.write(i+j);
document.write('<br/>');
document.write(i-j);
document.write('<br/>');
document.write(i*j);
document.write('<br/>');
document.write(i/j);
document.write('<br/>');
document.write(i%j);
document.write('<br/>');
document.write(3%-8);
document.write('<br/>');
document.write(-3%8);
document.write('<br/>');
document.write(-3%-8);
document.write('<br/>');
//+比较特殊
document.write(i+'8');
document.write('<br/>');
document.write('2'+'8');
document.write('<br/>');
document.write(i+j+'3king');
document.write('<br/>');
document.write(''+i);
var z=''+i;
// alert(typeof z);
document.write('<br/>');
document.write(''+i+j+'3king');
document.write('<br/>');
//自增自减运算符 ++ --
//整型支持自增 自减运算符
var num1=1;
// alert(num1++);
// alert(num1);
// alert(++num1);
// alert(--num1);
//浮点型支持自增自减运算符
num1=12.3;
// alert(--num1);
num1=true;
num1=false;
// alert(++num1);
// alert(--num1);
//字符串型不支持自增自减运算符
num1='3b';
// alert(++num1);
// alert(--num1);
//null支持自增自减运算符
num1=null;
// alert(++num1);
// alert(--num1);
num1=undefined;
alert(++num1);
<script type="text/javascript">
//字符串连接符+
document.write('hello'+' maizi '+'<br/>');
document.write(1+'king'+'<br/>');
var i=1,j=2,z=3;
document.write(''+i+j+z);
document.write('<br/>');
//赋值运算符的例子
var username='king';
document.write('用户名为：'+username+'<br/>');
//+= -= *= /= %= .=
var a=1;
a+=3;//a=a+3;
// alert(a);
a-=6;
a*=8;
a/=4;
a%=9;
document.write(a);
document.write('<br/>');
var str1=' hello ',str2=' world ';
str2+=str1;//str2=str2+str1;
document.write(str2);
//比较运算符的例子
// alert(3>1);
// alert(3>=1);
// alert(3<=12);
// alert(3<2);
var res=1==true;
res=1=='1';
res=3=='3king';
res=0==null;//false
res=0!=null;
res=1===true;
res=1!==true;
// alert(res);
// alert(NaN==NaN);//false
alert(undefined==undefined);
</script>
<script type="text/javascript">
//逻辑运算符的例子
//要求两个表达式为true，结果才是true
// alert(true && true);
// alert(true && false);
// alert(false && true);
// alert(false && false);
//如果第一个表达式为false，整个结果为false，就把第二个表达式短路了
var i=0,j=1;
if(i-- && j++){//0->false &&
document.write('hello');
}else{
document.write('world');
}
// alert(i);
// alert(j);
//逻辑或||
//两个表达中有一个为true，整个结果为true
// alert(true || true);
// alert(true || false);
// alert(false || true);
// alert(false || false);
//如果第一个表达式为true，整个结果为true，把第二个表达式短路了
i=1;
j=0;
if(i-- || ++j){//1->true
document.write('aa');
}else{
document.write('bb');
}
// alert(i);
// alert(j);
//逻辑非 !,取反的作用
alert(!true);
alert(!false);
</script>
<script type="text/javascript">
/*
三元运算符的例子
if(exp){
exp为true的代码段;
}else{
exp为false的代码段;
}
exp1?exp2:exp3;
*/
if(3>1){
document.write('aa');
}else{
document.write('bb');
}
document.write('<br/>');
var res=3>1?'aa':'bb';
document.write(res);
document.write('<br/>');
var x=0/0;
var x=123;
res=isNaN(x)?0:x;
alert(res);
</script>
<script type="text/javascript">
//逗号表达式的例子
var a,b,c,d;
var i=1,j=2,k=3;
var z=(n=1,m=2,p=3);
// alert(z+"\n"+n+"\n"+m+"\n"+p);
// //void运算符
// z=void(n=1,m=2,p=3);
// alert(z);
var x;
x=123;
x='king';
x=true;
x=null;
x=undefined;
x=[1,2,3];
// alert(typeof x);
alert((1+2)*4);
</script>