【JavaScript你需要知道的基础知识~】

前言

最近开始学习JavaScript，整理了一些相关的基础知识

JS注释方式：

1. // 单行注释（Ctrl+/ ）
2. /*

   *段落注释(Ctrl+shift+/ )

   */

1JavaScript基础

JavaScript：

基于浏览器 、基于（面向）对象、事件驱动、脚本语言

JavaScript的作用：

表单验证,减轻服务的压力，添加页面动画效果，动态更改页面内容，Ajax网络请求（Ajax：可以实现页面局部刷新）

JavaScript组成部分；ECMAScript（5.1/6）、DOM、BOM

ECMAScript脚本程序语言：

语法标准：语法；变量和数据类型；运算符；逻辑控制语句；关键字、保留字；对象

DOM文档对象模型

BOM浏览器对象模型

JavaScript的基本结构：

<script type="text/javascript">

JS语句;

</script>

变量的声明和变量：

先声明变量再赋值：

var width; width=5;

var——用于声明变量的关键字；width——变量名

...

同时声明变量和赋值

不声明直接赋值

2使用JS的三种方式

1、HTML标签中内嵌JS；

<button onclick="alert('小样你真点啊！')">有本事点我呀！！！</button>

2、HTML页面中直接使用JS：

<script type="text/javascript">

JS语句;

</script>

3、引用外部JS文件：

<script language="JScript" src="JS文件路径"></script>

【注意事项】

1)页面中JS代码与引用JS代码，可以嵌入到HTML页面的任意位置。但是，位置不同会影响到JS代码的执行顺序；

例如：<script>在body前面，会在页面加载之前执行JS代码;

2)页面中JS代码，使用type="text/javascript"

引用外部的JS文件，使用language="JScript"

3)引用外部JS文件的<script></script>标签，必须成对出现，且标签内部不能有任何代码！

3JS中的变量

1、JS中变量声明的写法

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

　　【JavaScript声明变量注意事项】

　　　　1）JS中所有变量类型声明，均使用var关键字。变量的具体数据类型，取决于给变量赋值的执行。

　　　　2）同一变量可在多次不同赋值时，修改变量的数据类型

　　　　　　var width = 10;//width 为整型变量

　　　　　　width="hahaha";//width 被改为字符串类型

　　　　3）变量可以使用var声明，也可以省略var，[区别]不使用var，默认为全局变量

　　　　4）同一变量名，可以多次用var声明，但是并没有任何含义，也不会报错，

　　　　　　第二次之后的声明，只会被理解为赋值。

2、变量的命名规范

• 变量名，只能有字母，数字，下划线，$组成
• 开头不能是数字
• 变量区分大小写，大写字母与小写字母为不同变量

3、变量命名名要符合驼峰法则

　　变量开头为小写，之后每个单词首字母大写

　　举个栗子?

• 　　XiaoXiZhenMeng √
• 　　xiao_xi_zhen_meng √
• 　　xiaoxizhenmeng ×

4、JS中的变量的数据类型

• Undefined：未定义，用var声明的变量，没有进行初始化赋值。var a;
• Null：表示为空的引用。var a = null;（其中一种情况）eg:空对象，空数组。。。
• boolean:真假，可选值true/false
• Number:数值类型。可以是小数，也可以是正数。
• String：字符串类型。用""和''包裹的内容，称为字符串。
• Object（复杂数据类型）：后续讲解，函数、数组等。。。

5、常用的数值函数：

• isNaN：用于判断一个变量或常量是否为NaN（非数值）

使用isNaN判断时，会尝试使用Number（）函数进行转换，如果能转换为数字，则不是非数值，结果为false

"111" 纯数字字符串，false "" 空字符串，false "la" 包含其他字符，true

true/false 布尔类型，false

• Number():将其他类型转换为数值类型

[字符串类型转数值]

>>字符串为纯数值字符串，会转为对应的数字"111"->111

>>字符串为空字符串时，会转换为0 ""->0

>>字符串包含其他非数字字符时，不能转换 "111a"->NaN

[布尔Boolean类型转数值]

true->1 false->0

[null/Undefined转数值]

null->0 Undefined->NaN

[Object类型转数值]

（以后再了解哦~）先调用ValueOf方法，确定函数是否有返回值，再根据上述各种情况判断。

• parseInt:将字符串转成数值

>>>空字符串，不能转。结果为NaN

>>>纯数值字符串，能转。"123"->"123" "123.5"->123(小数转化时，会直接抹去小数点，不进行四舍五入)

>>>包含其他字符的字符串，会截取第一个非数值字符串前的数值部分。"123a456"->123 "a123b345"->NaN

>>>parseInt只能转String类型，Boolean/null/Undefined 均为NaN

• parseFloat:将字符串转为数值

>>>使用方式同parseInt，但是，当转化小数字符串时，保留小数点；转化整数字符串时，保留整数；

"123.5"->123.5 "123.0"->123

• typeOf:用来检测变量类型

未定义—>Undefined 字符串->string true/false->boolean 数值->Number

对象/null->Object 函数->function

4JS中的输出语句

document.write();

输出语句，将write的（）中的内容打印在浏览器屏幕上

使用时注意：除变量/常量以外的任何内容，打印时必须放在""中，变量/常量必须放到""外

打印的内容同时有多部分组成，之间用“+”链接

举个栗子?

　　document.write("输出互换前手中的纸牌："+left+"<br />");

　　alert();弹窗警告

1、算术运算

　　+ 加、- 减、* 乘、 / 除、 % 取余、++ 自增、-- 自减

• +:有两种作用，链接字符串/加法运算；当+两边均为数字时，进行加法运算；
• 当加号两边有任意一边为字符串时，进行字符串链接，链接之后的结果认为字符串
• ++：自增运算符，将变量在原来基础上+1；
• --：自减运算符，将变量在原来基础上-1；

【n++ 与 ++n 的异同】

n++：先使用n的值进行计算，然后再把n+1;

++n: 先使用n的值+1，然后再用n+1以后的值，去运算；

相同点：不论是n++还是++n，在执行完代码以后，均会把n+1;

举个栗子?

　　var a = 3;

　　var b,c;

　　b = a++ +2; //a=3 b=5 c=4

　　c = ++a +2; //a=4 b=5 c=7

document.write("a:"+a);

document.write("b:"+b);

document.write("c:"+c);

2、赋值运算

= 赋值、 += -= *= /= %=

+=：a += 5;相当于a = a + 5;但是，前者的执行效率要比后者快，

3、关系运算

== 等于、=== 严格等于、 ！= 不等于 、>、<、>=、<=

===：严格等于；类型不同，返回false；类型相同，再进行下一步判断

==：等于；类型相同，同===；类型不同，尝试将等式两边转为数字，再判断；

特例：null==Undefined √ ； null===Undefined ×

4、条件运算符(多目运算)

a>b?true:false

有两个关键符号：？和：

当？前面的部分运算结果为true时，执行：前面的代码；

当？前面的部分运算结果为false时，执行：后面的代码；

>>>多目运算符可以多层嵌套：

例如：var jieguo =

5、逻辑运算符

&& 与、|| 或、！ 非

6、运算符的优先级（由高到低）

（）

！ ++ --

% / *

+ -

> < >= <=

== !=

&&

||

各种赋值= =+ *= /= %=

5if-else结构 / switch-case结构

• if-else结构

1、结构写法：

if（判断条件）{

　　//条件为ture时执行

}else{

　　//条件为false时执行

}

2、if（）中的表达式，运算之后的结果应该为

1）Boolean：true 真 ; false 假

2）string：非空字符串为真 ；空字符串为假

3）Number：0为假 ；一切非0均为真

4）Null/NaN/Undefined:全为假

5)Object:全为真

3、else{}结构，可以根据具体情况省略

• 多重if、阶梯if

1、结构写法：

if(条件一){

//条件一成立

}else if(条件二){

//条件一不成立&&条件二成立

//else if 部分，可以有多个

}else{

//条件一不成立&&条件二不成立

}

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

3.if/else的大括号可以省略，但不提倡，如果省略，

则if/else包含的代码只包括其后最近的一行（分号结束）；

else结构永远属于其前方最近的一个if结构。

• 嵌套if结构

1、结构写法：

if（条件一）{

　　//条件一成立

if（条件二）{

　　//条件二成立

}else{

　　//条件为false时执行

}

}else{

　　//条件为false时执行

}

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

• Switch-Case结构

1、结构写法：

switch（表达式）{

　　case 常量表达式1：

　　　　语句一；

　　　　break；

　　case 常量表达式2：

　　　　语句二；

　　　　break；

　　　　。。。

　　default：

　　　　语句N

}

2、注意事项：

1）switch（）中的表达式，以及每个case后面的表达式，可以为任何JS支持的 数据类型；（对象和数组不同）；

2）case后面的所有常量表达式，必须各不相同，否则只会执行第一个；

3）case后的常量可以是任何数据类型；同一个switch结构的不同case，可以是多种不同的数据类型；

4）switch在进行判断时，采用的是全等判断===

5）break的作用：执行完case代码后，跳出当前switch结构；

缺少break的后果：从正确的case项开始，依次执行所有的case和defalse

6）switch结构在判断时，只会判断一次正确答案，当遇到正确的case项后，将会不再判断后续项目，依次往下执行；

7）switch结构的执行速率要快于多重if结构。在多路分支时，优先考虑switch结构。

• 循环结构的步骤

1)声明循环变量

2)判断循环条件

3)执行循环体(while的{}中所有代码)操作

4)更新循环变量

然后，循环执行2）3）4）

• JS中循环条件支持的数据类型

1）Boolean：true 真 ; false 假

2）string：非空字符串为真 ；空字符串为假

3）Number：0为假 ；一切非0均为真

4）Null/NaN/Undefined:全为假

5)Object:全为真

while循环特点:先判断，在执行

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

• For循环

1、for循环有三个表达式，分别为：①定义循环变量 ② 判断循环条件 ③更新循环变量（三个表达式之间，用;分隔。）

for循环三个表达式可以省略，两个;缺一不可

2、for循环特点：先判断，再执行；

3、for循环三个表达式，均可以有多部分组成，之间用逗号分隔，但是第二部分判断条件

需要用&&链接，最终结果需要为真/假

• 循环控制语句

1、break：终止本层循环，继续执行循环后面的语句；

当循环有多层时，break只会跳过一层循环；

2、continue：跳过本次循环，继续执行下一次循环；

对于for，continue执行后，继续执行循环变量更新语句n++

对于while，do-while，continue执行后，继续执行循环条件，

判断；所以使用这两个循环时必须注意continue一定要在n++之后，否则会造成死循环。