【从无到有】JavaScript新手教程——1.简介、变量和运算符

今天带大家来学习一下在网页制作过程中很常用的JavaScript（简称JS）。

 

一、JS的作用：

　　表单验证，减轻服务端的压力

　　添加页面动画效果

　　动态更改页面内容

　　Ajax网络请求

二、【使用JS的三种方式】

 

　　1、HTML标签中内嵌JS： (不提倡使用)

<button onclick="alert('你还真点了')">点我点我点我点我点我</button>

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

<script type="text/javascript">
        //JS代码
</script>   

　　3、引用外部JS文件：

<script language="JavaScript" src=" "></script>

　　

　　【注意事项】

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

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

　　　②页面中JS代码使用type="text/javascript"

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

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

 

三、【JS中的变量】

 

　　1、JS中变量声明的写法：

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

 

　　[声明变量注意事项]

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

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

var width=10；　　//width为整形变量
width="哈哈"　　//width被改为字符串类型

　　　③变量可以使用var声明，也可以省略var。

　　　　[区别]：不使用var，默认为全局变量

　　　④同一变量名可以多次用var声明，但是并没有任何含义，也不会报错，第二次之后的声明只会被理解为赋值

 

　　2、变量的命名规范：

　　　　①变量名只能有字母，数字，_，$组成

　　　　②开头不能是数字

　　　　③变量区分大小写，大写字母与小写字母为不同变量

 

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

　　　　变量开头为小写，之后每个单词首字母大写(或下划线分隔)；

　　　　例如：zhenHaoWan √

　　　　　　　zhen_hao_wan √

　　　　　　　zhenhaowan ×

 

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

　　　　undefined：未定义，用var声明的变量，没有进行初始化赋值。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方法，确定函数是否有返回值，再根据上面各种情况判断。

 

　　　　③parseInt()：将字符串转为数值类型

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

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

　　　　　　>>>包含其他字符的字符串，会截取第一个非数值字符前的数值部分。

　　　　　　　　"123a456" => "123" "a1234b23" => NaN

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

　　　　④parseFloat():将字符串转为数值

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

　　　　　　　　"123.5" => "123.5" "123" => "123"

　　　　⑤typeof()：用来检测变量数据类型

　　　　　　未定义 => undefined

　　　　　　字符串 => string

　　　　　　true/false => boolean

　　　　　　数值 =>number

　　　　　　对象/null => object

　　　　　　函数 => function

 

四、【JS中的输出语句】

　　

document.write();

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

 

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

　　打印的内容由多部分组成时，直接用+连接；

 

五、【JS中的运算符】:

 

　　1、算术运算（单目运算符）

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

 

　　　　+:有两种作用，链接字符串/加法运算；当+两边都为数字时，进行加法运算，当+两边有任意一边为字符串时，进行字符串连接，连接之后的结果仍为字符串

　　　　++:自增运算符，将变量在原有基础上+1

　　　　--:自建运算符，将变量在原有基础上-1

 

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

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

　　　++n：先把n的值+1,然后再用+1以后的值进行运算；

 

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

 

　　2、赋值运算
　　　　= 赋值、 += -= *= /= %=

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

　　3、关系运算
　　　　== 等于、=== 严格等于、 ！= 不等于 、 > 、 < 、 >= 、 <=

　　　　===：严格等于；类型不同，返回false；类型相同，再进行下一步判断；
　　　　==：等于；类型相同，同===；类型不同，尝试将两边转为转为数值再判断
　　　　　　null==Undefined √ null===Undefined ×

　　4、条件运算符(多目运算)
　　　　a>b?true:false

　　　　有两个关键符号： ?和:
　　　　当?前面的部分运算结果为true时，执行:前面的代码；
　　　　当?前面的部分运算结果为false时，执行:后面的代码；

　　　　>>>多目运算付可以多层嵌套：var name = num>5? "da":(num==5?"dda":"dada")

　　5、逻辑运算符
　　　　&& 与 、 || 或 、 ！ 非

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