参考资料:《JavaScript从入门到精通》、《PHP、MySQL与JavaScript学习手册》
JavaScript在HTML中的使用
在页面中直接嵌入JavaScript代码
JavaScript是完全在网页浏览器上运行的客户端脚本语言。在HTML文档中可以使用标记将JavaScript脚本嵌入到其中。
JavaScript不以分号结尾,因为在JavaScript中,换行起到了和PHP中分号相同的作用。但是,如果想在一行中放置多条语句,则需要在除了最后一句之外的每条语句后都加一个分号。当然,也可以在没条语句后面都加一个分号。
当要为不支持或不可用JavaScript浏览器的用户提供可选的HTML是,可以使用这对标记。
在HTML文档中可以使用多个
或者,也可以从网上获取JavaScript文件:
注意:在外部JS文件中,不需要将脚本代码用标签括起来。
使用JavaScript显示"Hello, World"
Hello, World
在文档头部使用JavaScript
除了在文档的body内放置脚本外,也可以把脚本放在
段。把脚本放在这里可以在页面加载的时候执行脚本;把关键代码放在这里,也可确保这些代码能够被文档中任意依赖它们的脚本立即使用。
在老式和非标准浏览器中使用JavaScript
如果要支持那些不能提供脚本的浏览器,需要使用HTML注释标记。
以下实例是为无JavaScript的浏览器修改“Hello, World”例子:
Hello, World
用在JavaScript中的注释符//表示这一行的剩余部分是注释。支持JavaScript的浏览器会忽略-->,而不支持JavaScript的浏览器会忽略//而执行-->来结束HTML注释。
数据结构
JavaScript脚本语言的数据结构包括标识符、关键字、常量、变量等。
标识符
标识符是一个名称。在JavaScript中,标识符用来命名变量和函数,或者用作某些循环的标签。
在JavaScript中,合法的标识符第一个字符必须是字母、下划线或美元符号,其后可以是字母、数字、下划线或美元符号。
注意:标识符不能和JavaScript中用于其他目的的关键字同名。
关键字
关键字是指在JavaScript语言中有特定含义,成为JavaScript语法中的一部分的那些字。使用关键字作为变量名或函数名,会使JavaScript发生编译错误。
常量
当程序运行时,值不能改变的量为常量。
常量主要用于为程序提供固定和精确的值,如数字、逻辑值真/假等都是常量。
通常使用const来声明常量,语法格式如下:
const 常量名 : 数据类型 = 值;
变量
变量是指程序中一个已经命名的存储单元,它的主要作用就是为数据操作提供存放信息的容器。
变量的命名
JavaScript中,没有特定的字符标识变量。JavaScript变量使用以下命名规则:
- 一个变量止咳包含字母a-z、0-9和美元符号$及下划线_。
- 变量名中不允许有空格或标点符号。
- 变量名的第一个字符只可以是a-z、A-Z或$和_。
- 变量名区分大小写。
- 变量名的长度没有限制。
- 不能使用JavaScript的关键字。
变量的声明与赋值
使用变量前需要先对其进行声明。所有的JavaScript变量都由关键字var声明。
声明变量的格式如下:
var variable;
可以在声明变量的同时对其赋值:
var variable = 11;
声明变量时所遵循的规则如下:
- 可以使用一个关键字var同时声明多个变量。
- 可以在声明变量的同时对其赋值,即初始化。
- 如果声明了变量而没有对其赋值,其值默认为undefined。
- var语句可以用作for循环和for/in循环的一部分。
- 可以使用var语句多次声明同一个变量。
由于JavaScript是弱类型,所以可以把任意类型的数据赋值给变量。
例如:
var varible = 100; //数值类型
var str = "Hello, World"; //字符串
var bue = true; //布尔类型
变量的作用域
变量的作用域是指某些变量在程序中的有效范围,也就是程序中定义该变量的区域。
JavaScript的变量有两种:局部变量和全局变量。
局部变量是定义在函数体内,只作用于函数体的变量,函数的参数也是局部性的。
全局变量是定义在所有函数之外,作用于整个脚本代码的变量。
变量的生存期
变量的生存期是指变量在计算机中存在的有效时间,可以简单理解为该变量所赋的值在程序中的有效范围。
JavaScript中变量的生存期有两种:全局变量和局部变量。
全局变量在主程序定义,其有效范围从其定义开始,一直到本程序结束为止。
局部变量在程序的函数中定义,其有效范围只在该函数中。
注释和语句块
JavaScript中用“//”作为单行注释标记,用/*和*/作为多行注释标记,用{和}包装成语句块。
数据类型
JavaScript脚本语言中采用的是弱类型的方式,即一个数据不必首先作声明,可以在使用或者赋值时再确定其数据的类型,当然也可以先声明该数据的类型,即通过在复制时自动说明其数据类型。
数字型
JavaScript不区分整型数值和浮点型数值,而是所有的数字都用浮点型表示的。
当一个数字直接出现在JavaScript程序中时,称它为数值直接量。
整型数据
在JavaScript程序中,十进制的整数是一个数字序列。
十六进制和八进制
JavaScript可以识别十六进制的数据。
所谓十六进制的数据,是以“0X”或“0x”开头,其后跟随十六进制数字串的直接量。
JavaScript的某些实现允许采用八进制格式的整型数据。
八进制数据以数字0开头,其后跟随一个数字序列。
注:最好不要使用以0开头的整型数据。
浮点型数据
浮点型数据可以具有小数点,它们采用的是科学计数法的语法。一个实数值可以被表示为整数部分后加小数点和小数部分。
还可以用指数法表示浮点型数据,即实数后跟随字母E或e,后加正负号,其后再加一个整型指数。语法格式如下:
1.234E-12 //3.12×10^11
3.12e11 //1.234×10^-12
字符串型
字符串是由Unicode字符、数字、标点符号等组成的序列,是JavaScript用来表示文本的数据类型。
字符串型数据是包含在单引号或双引号中的,由单引号定界的字符串中可以含有双引号,由双引号定界的字符串中也可以含有单引号。
例如:
'Hello, World'
"QNKCDZ0"
'name = "myname"'
"You can call me 'Tom'!"
注意:双引号内出现双引号或单引号内出现单引号必须进行转义。
布尔型
布尔数据类型只有两个,这两个合法的值分别由直接量true和false表示,用来说明某个事物是真还是假。
布尔值通常在JavaScript程序中用来比较所得结果,也用于JavaScript的控制结构。
数组
JavaScript的数组和PHP很相似,像其他数值一样,其数组也可以包含字符串或数值数据。
要给数组赋值,可以使用以下语法:
toys = ['bat', 'ball', 'whistle', 'puzzle', 'doll'];
创建多维数组,是把小数组放在大数组中,可以用如下代码:
face =
[
['R', 'G', 'Y'],
['W', 'R', 'O'],
['Y', 'W', 'G']
];
或者
face = [['R', 'G', 'Y'], ['W', 'R', 'O'], ['Y', 'W', 'G']];
要访问该二维数组中向下第二,向右第三的元素,可以用如下方式(数组下标从0开始):
document.write(face[1][2]);
特殊数据类型
转义字符
以反斜杠开头的不可显示的特殊字符通常称为控制字符,也称为转义字符。
通过转义字符可以防止引号匹配混乱的问题。
以下是JavaScript常用的转义字符:
转义字符 | 说明 |
---|---|
\b | 退格 |
\n | 回车换行 |
\t | tab符号 |
\f | 换页 |
' | 单引号 |
" | 双引号 |
\v | 跳格(tab,水平) |
\r | 换行 |
\OOO | 八进制整数 |
\xHH | 十六进制整数 |
\uhhhh | 十六进制编码的Unicode字符 |
\\ | 反斜杠 |
未定义值
未定义类型的变量是undefined,表示变量还没有赋值或者赋予了一个不存在的属性值。
JavaScript中有一种特殊类型的数字常量NaN,即“非数字”,即没有意义的数字。
空值
关键字null表示空值,用于定义空的或者不存在的引用。如果试图引用一个没有定义的变量,则返回一个null值。
注意:null与undefined的区别是,null表示变量被赋予了一个空值,而undefined表示变量尚未被赋值。
运算符
算术运算符
算术运算符用于进行数学运算。
运算符 | 描述 |
---|---|
+ | 加 |
- | 减 |
* | 乘 |
/ | 除 |
% | 求模 |
++ | 自增 |
-- | 自减 |
注意:自增、自减运算符有两种使用情况:i++(i--)表示在使用i之后使i的值加(减)1,++i(--i)表示在使用i的值之前先使i增(减)1。
例1 算术运算符的使用
运用JavaScript运算符
var num1 = 120, num2 = 25;
document.write("120 + 25 = "+(num1 + num2)+"
");
document.write("120 - 25 = "+(num1 - num2)+"
");
document.write("120 * 25 = "+(num1 * num2)+"
");
document.write("120 / 25 = "+(num1 / num2)+"
");
document.write("120++ = "+(num1++)+"
");
document.write("++120 = "+(++num1)+"
");
输出:
120 + 25 = 145
120 - 25 = 95
120 * 25 = 3000
120 / 25 = 4.8
120++ = 120
++120 = 122
比较运算符
比较运算符首先对操作数进行比较,然后返回一个布尔值。
运算符 | 描述 |
---|---|
< | 小于 |
> | 大于 |
<= | 小于等于 |
>= | 大于等于 |
== | 等于。只根据表面值进行判断,不涉及数据类型。 |
=== | 绝对等于。根据表面值和数据类型同时判断。 |
!= | 不等于。只根据表面值进行判断,不涉及数据类型。 |
!=== | 不绝对等于。根据表面值和数据类型同时判断。 |
例2 比较运算符的使用
输出:
age变量的值为:25
age >= 20:true
age < 20:false
age != 20:true
age > 20:true
赋值运算符
JavaScript中的赋值运算可以分为简单赋值运算和复合赋值运算。
简单赋值运算是将赋值运算符(=)右边的表达式的值保存到左边的变量中。
符合赋值运算混合了算术运算、位操作等其他操作和赋值操作。
运算符 | 描述 |
---|---|
= | 赋值 |
+= | 相加后赋值 |
-= | 相减后赋值 |
*= | 相乘后赋值 |
/= | 左边的变量除以右边的变量后赋给左边的变量 |
%= | 左边的便利用右边的变量求模后赋给左边的变量 |
&= | 进行与逻辑运算后赋值 |
|= | 进行或逻辑运算后赋值 |
^= | 进行异或运算后赋值 |
逻辑运算符
逻辑运算符 | 描述 |
---|---|
! | 取反 |
& | 逻辑与 |
&& | 与运算符 |
| | 逻辑或 |
^ | 异或运算符 |
?: | 条件运算符 |
|| | 或运算符 |
其他运算符
位操作运算符
位运算符分两种,普通位运算符和位移运算符。
在进行运算前,都先将操作数转换为32位的二进制整数,然后再进行相关运算,最后输出结果将以十进制表示。
位操作运算符对数值的位进行操作。
位操作运算符 | 描述 |
---|---|
& | 与运算符 |
| | 或运算符 |
^ | 异或运算符 |
~ | 非运算符 |
<< | 左移 |
>> | 带符号右移 |
>>> | 填0右移 |
typeof运算符
typeof运算符用于返回它的操作数当前所容纳的数据类型。
例3 用typeof运算符返回当前所容纳的数据类型
输出:
a的类型为number
b的类型为string
c的类型为object
注意:typeof运算符的返回值有6种可能:number,string,boolean,object,function和undefined。
new运算符
通过new运算符来创建一个新对象。
例如:
Object1 = new Object;
Array2 = new Array();
Date3 = new Date("August 8 2008");
运算符的优先级
优先级 | 结合性 | 运算符 |
---|---|---|
1 | 向左 | . [] () |
2 | 向右 | ++ -- - ! delete new typeof void |
3 | 向左 | * / % |
4 | 向左 | + - |
5 | 向左 | << >> >>> |
6 | 向左 | < <= > >= in instanceof |
7 | 向左 | == != === !== |
8 | 向左 | & |
9 | 向左 | ^ |
10 | 向左 | |
11 | 向左 | && |
12 | 向左 | |
13 | 向右 | ?: |
14 | 向右 | = |
15 | 向右 | *= /= %= += -= <<= >>= >>>= &= ^= |
16 | 向左 | , |
表达式
表达式是一个语句集合,计算结果是一个值,这个值被JavaScript归入boolean,number,string,function,object这五种数据类型之一。
数据类型的转换规则
其他类型转换为数值型
类型 | 转换后结果 |
---|---|
undefined | NaN |
null | 0 |
逻辑型 | 若其值为true,结果为1,否则为0 |
字符串型 | 若内容为数字,结果为相应数字,否则为NaN |
其他对象 | NaN |
其他数据类型转换为逻辑型
类型 | 转换后结果 |
---|---|
undefined | false |
null | false |
数值型 | 若其值为0或NaN,则结果为false,否则为true |
字符串型 | 若长度为0,则结果为false,否则为true |
其他对象 | true |
其他数据类型转换为字符串型
类型 | 转换后结果 |
---|---|
undefined | "undefined" |
null | "NaN" |
逻辑型 | NaN、0或与数值相对应的字符串 |
字符串型 | 若其值为true,则结果为"true",否则为"false" |
其他对象 | 若存在,则其结果为toString()方法的值,否则期结果为"undefined" |