JS 简介

[JS的三种方式]
1、HTML标签中内嵌JS
<button onclick="javascript:alert(‘白痴‘)">呵呵呵</button>

2、HTML页面中直接使用JS
<script type="text/javascript">
//JS代码
</script>

3、引用外部JS文件
<script language="JavaScript" src="http://www.mamicode.com/JS文件路径"></script>


[注意事项]
①页面中JS代码与引用JS代码，可以镶嵌到HTML页面的任何位置。但是位置不同会影响到JS代码的执行顺序；
例如：<script>在body前面，会在页面加载之前执行JS代码
②页面中JS代码，使用type="text/javascript"
引用外部JS文件使用language="JavaScript"
③引用外部JS代码的<script></script>标签，必须成对出现，且标签内不能有任何代码！

JS中的变量
1、JS中变量声明的写法
var width=10;//使用var声明的变量，只能在当前函数作用域有效。
width=12;//不使用var，直接赋值生成的变量。默认为全家变量，整个JS文件有效
var a,b,c=1;//同一声明语句同时声明多个变量，变量之间用英文逗号分隔。但赋值需要单独赋值，
例如上式中只有c=1，a/b未定义[underfined]

[声明变量注意事项]
① JS中所有变量类型声明，均使用var关键字。变量的具体数据类型，取决于给变量赋值的类型
② 同一变量可以在多次不同赋值时，修改变量的数据类型：
var width=10;//width为整形变量
width="哈哈";//width被改为字符串类型
③ 变量可以使用var，也可以省略var。[区别]不使用var，默认为全局变量
④ 同一变量名，可以多次var声明。但是并没有任何含义，也不会报错。第二次之后的声明，只会被理解为赋值；

2、变量的命名规范
① 变量名只能有字母/数字/下划线/$组成
② 开头不能是数字
③ 变量区分大小写，大写字母与小写字母为不同变量

3、变量名命名要符合驼峰法则：
变量开头为小写，之后每个单词首字母大写
或用下划线分割

4、JS中的变量的数据类型
Undifined:未定义，用var声明的变量，没有进行初始化赋值。var a;
Null:代表特殊的变量类型。唯一值为null，表示空的。var a = null;
boolean：真假，可选值true/false
Number:数值类型。可以是小数，也可以是整数。
String:字符串类型。用""或‘‘包裹的内容，成为字符串。
Object(复杂数据类型)：后续讲解，函数、数组等...

5、常用的数值函数:
① isNaN:用于判断一个变量或常亮，是否是NaN(非数值)
使用isNaN判断时，会尝试使用Number() 函数进行转换，如果能转换为数字，则不是非数值结果为false
"111"纯数字字符串，false ""空字符串，false "1a"包含其他字符，true
true/false布尔类型，false
② Number():将其他类型转化为数值类型
[字符串类型转数值]
>>>字符串为纯数值字符串,会转为对应的数字 "111"->111
>>>字符串为空字符串时，会转为0 ""->0
>>>字符串包含其他非字符串时,不能转化 "111a"->NaN

[布尔boolean类型转数值]
true->1 false->0

[null/undefined转数值]
null->0 undefined->NaN

[Object类型转数值]
先调用ValueOf函数，确定函数是否有返回值，再根据上述各种情况判断。

③ parsInt:将字符串转为数值类型
>>>空字符串，不能转。结果为NaN
>>>纯数字字符串，能转。 "123"->123 "123.5"->123(小数转化时，直接抹掉小数点，不进行四舍五入)
>>>包含其他字符的字符串，会截取第一个非数值字符前的数值部分。
"123a45"->123 "a123b45"->NaN
>>>parsInt只能转string类型，boolean/Null/Undifined均为NaN

④ parseFloat:将字符串转为数值
>>>使用方法同③。但是转换小数时会保留小数点
"123.5"->123.5

⑤typeof:用来检测数据类型
未定义->Undifined 字符串->string true/false->boolean
数值->NUmber 对象/null->Object 函数->function

[JS中的输入/输出语句]
1、在文档中打印输入：document.write();
输出语句，将write的()中的内容在浏览器屏幕上：

使用时注意：除变量/常量意外的任何内容，打印时必须放到""中；变量/常量必须放到""外。
打印的内容同时有多部分组成的时候，之间用+链接：
例如：document.write("左手中的纸牌："+left+"<br/>");

2、弹窗输出：alert();
弹窗警告，()中的使用方式，同上

3、弹窗输入prompt("请输入您的名字："，"XX");
两部分参数：①输入框上面的提示信息
②输入框里面的默认信息
两者之间用逗号分隔，只有一部分时，默认为提示信息；
默认接收到的数据为字符串

可以定义变量接收输入内容，例如var name=prompt("请输入您的名字："，"XX");
点击确认按钮，输入更改点击取消按钮，name=null

JS运算符

[算术运算]
【 + 加】【- 减】【* 乘】【 / 除】【 % 取余】【++ 自增】【-- 自减】
+:有两种作用，链接字符串/加法运算；
① 当+两边均为数字时进行加法运算；
② 当+两边任意一边为字符串时进行字符串的链接，链接后的记过认为是字符串。
++：自增运算符，将变量在原有基础上+1；
--：自减运算符，将变量在原有基础上-1；
【N++与++N的异同】
N++：先使用N的值进行计算，然后再把N+1;
++N：先把N的值+1，再用N+1以后的值，运算;
相同点：不论N++还是++N，再执行完代码以后，均会把N+1。

[赋值运算]
【 = 赋值】【 += 】【 -= 】 【 *= 】 【 /= 】 【 %= 】
+=:a+=5;相当于a=a+5;前者的执行效率要比后者快。

[关系运算]
【== 等于】 【 ！= 不等于】【=== 严格等于】【>】【<】【>=】、【<=】
===：严格等于；类型不同返回false；类型相同，再进行下一步判断。
==：等于；类型相同，再进行下一步判断；类型不同，均用Number转化为数字再判断；
null==Undefined[对] null===Undefined[错]

[条件运算符(多目运算)]
a>b?true:false
有两个关键字符号 【 ?和:】
当?前面的部分运算结果为true时，执行前面的代码
当?前面的部分运算结果为false时，执行后面的代码
可以多次嵌套；例如：var jieguo=num>5?"输入太大":(num==5?"蒙对了！":"太小了");

[逻辑运算符]
【&& 与】【|| 或】【！ 非】

[运算符的优先级]
()
! ++ --
% / *
+ —
> < >= <=
== ！=
&&
||
各种赋值= += *= /= %=

JS条件语句

[if-else结构]
1、写法：
if(判断条件){
//条件为true时执行
}else{
//条件为flase时成立
}
2、if()中的表达式，运算之后的结果应该为：[重点]
①Boomlean:true真 flase假
②string：非空字符串为真；空字符串为假。
③Number:0为假；一切非0均为真。
④Null/NaN/Undefined:全为假
⑤Object:全为真
3、 else{}结构，可以根据具体情况省略；

[多重if/阶梯if]
1、写法：
if(条件一){
//条件一成立
}else if(条件二){
//条件一不成立，条件二成立
}else if(条件三){
//条件一不成立，条件不二成立，条件三成立
}else if(条件N){
//......
}

2、多重if结构中，各个判断条件是互斥的！只能选择一条。

3、if/else最好不要省略{}
如果省略{}则if/else结构包含的代码，仅为其后最近的一行（分号结束）；
如果省略{}则else结构永远输入其前方最近的一个if结构。

[嵌套if]
1、写法
if(条件一){
//条件一成立
if(条件二){
//条件一成立&&条件二成立
}else{
//条件一成立&&条件二不成立
}
}else {
//条件一不成立
}

2、if结构可以多重嵌套，但原则上不超过3层

[switch-Case结构]
1、结构写法：
switch（表达式）{
case常量表达式1;
语句1;
break;
case常量表达式2;
语句2;
break;
....
default;
语句N;
break;
}
2、注意事项：
① switch()的表达式，以及每个case后面的表达式，可以为任何JS支持的数据类型(对象和数组不行)；
② case后面的常量表达式，必须各不相同，否则只会执行第一个；
③ case后的常量可以是任何数据；同一个switch结构的不同case，可以是多种不同的数据类型；
④ switch在进行判断的时候，采用的是全等判断===
⑤ break的作用，执行完case代码后，跳出当前switch结构；
缺少break的后果，从正确的case项开始，依次执行所有的case和default
⑥ switch结构在判断时只会判断一次正确答案，当遇到正确的case项后，将不再判断后续项目。依次执行下去
⑦ switch结构的执行速率要快于多重if结构。在多分枝时可优先考虑使用switch结构。

JS循环结构

循坏控制语句
1.break:终止本层循坏，继续执行本次循坏后面的语句；
当循坏有多层时，break只会跳过一层循坏

2.continue：跳过本次循坏，继续执行下次循坏
对于for循环，continue执行后，继续执行循环变量更新语句n++；
对于while，do-while，continue执行后，继续执行循环条件判断，
所以使用俩个循环是，必须注意，continue一定要在n++之后使用。




[嵌套循环特点]
外层循环控制行数，内层循环控制每行元素个数；

[做图形题思路]
1、确定图形一共几行，即为外层循环的次数
2、确定每行有几种元素，代表有几个内层循环的个数；
3、确定每种元素的个数，即为每个内层循环的次数；
Tips：通常，找出每个元素个数，与行号的关系式，即为当前内层循环的最大值；（从1开始循环）

[循环结构的步骤]
①声明循环变量
②判断循环条件
③执行循环体（while的{}中所有代码的操作）
④更新循环变量
然后循环执行2、3、4

[js中循环结构支持的数据类型]
① Boolean: true真 flase 假
② String:非空字符串为真 空字符串为假
③ Null/NaN/Undefined:全为假
④ Object：全为真
⑤ Number:0为假，一切非0均为真；

while循环

while循环特点：先判断，再执行；

[while写法:]
var n=1;// ① 声明循环变量
while (n<=5){// ② 判断循环条件
document.write("while你好啊<br/>");// ③ 执行循环体(while的{}中所有代码)操作
n++;// ④ 更新循环变量
}

do-while循环
do-while循环特点：先执行，再判断；即使初始条件不成立，do-while循环也至少执行一次；

[do-while写法:]
var m=1;
do{
document.write("do-while你好啊<br/>");
m++;
}while(m<=5);



[for循环]
1、for循环有三个表达式，分别为 ：①定义循环变量; ② 判断循环条件; ③ 更新循环变量
三个表达式之间，用;分隔
for循环三个表达式均可以省略，但是两个;不可省略
2、for循环特点：先判断，再执行
3、for循环三个表达式，均可以有多部分组成，之间用逗号分隔;但是第二部分判断条件需要用&&链接，最终结果需要为真/假


for(var x=1;x<=5;x++){
document.write("for你好啊？<br/>")
}

JS基础与循环