JavaScript 具有如下特征:
一段 JavaScript 脚本由包含在网页页面中 <script>... </script>
标签内的 JavaScript 语句组成。
编程人员可以随意将由 <script>
标签包含着的 JavaScript 脚本置于网页的任意位置,但是通常都会放在 <head>
标签内。
<script>
标记用来让浏览器明白这个标签之间的语句需要作为脚本来解释。所以,JavaScript 脚本可以简单的按照如下形势来表示:
<script ...>
JavaScript code
</script
<script>
标签有两个很重要的属性:
所以 JavaScript 片段是如下形式:
<script language="javascript" type="text/javascript">
JavaScript code
</script>
我们试着利用 JavaScript 脚本写一个打印 “Hello word” 的功能。
<html>
<body>
<script language="javascript" type="text/javascript">
<!--
document.write("Hello World!")
//-->
</script>
</body>
</html>
上面的脚本会显示如下结果:
Hello World!
JavaScript编译器会忽略掉脚本中的所有空白、缩进符、换行符。
因此,程序员可以在脚本中自用使用空格、缩进和换行符,这样程序员就可以随意缩进格式化程序格式,以便代码更易于阅读和理解。
与 C、C++ 和 Java一样,通常 JavaScript 语句以分号结尾。但是, JavaScript 允许在每行只有一句脚本的情况下省略分号。比如,下方的脚本就是可以省略分号的:
<script language="javascript" type="text/javascript">
<!--
var1 = 10
var2 = 20
//-->
</script
但是一行中存在多个脚本语句时,分号是不能省略的,比如:
<script language="javascript" type="text/javascript">
<!--
var1 = 10; var2 = 20;
//-->
</script>
注意:使用分号是一个比较实用的编程习惯
JavaScript是一门大小写敏感的语言。这意味着关键词、变量、函数名及其他任何标识符在输入时都要保持一样的书写格式。
所以,Time,TIme 和 TIME 在 JavaScript 中表示不同的意思。
注意:在编写JavaScript脚本时一定要注意变量和函数名的书写。
JavaScript 同样支持 C 和 C++ 那样的注释方式:
在 HTML 文件中何处书写 JavaScript 脚本是非常灵活的。但是,通常情况下都会将脚本书写在 HTML 文件中的如下位置内:
<head>...</head>
内 <body>...</body>
内 <body>...</body>
和<head>...</head>
同时书写 <head>...</head>
内 JavaScript中可以市容下述三种数据类型:
JavaScript也支持另外两个常用类型:null和undefined,这两个类型均仅限定一个单一的值。
和其他可编程语言相同,JavaScript也有“变量”的概念。“变量”可以认为是有名字的容器。你可以将数据置于这些容器中,然后通过容器的名称就可以知道数据的类型。
值得注意的是,在JavaScript编程过程中,必须先声明一个变量,这个变量才能被使用。
此外,变量是通过“var”来声明的,例子如下:
<script type="text/javascript">
<!--
var money;
var name;
//-->
</script>
一个变量的作用域就是该变量定义后在程序中的作用范围。JavaScript变量有两个变量作用域。
JavaScript中变量的命名规则如下:
下面是JavaScript中的保留关键字。他们不能用来命名JavaScript中的变量、行数、方法、循环标签或任何对象名称。
abstract | else | instanceof | switch |
boolean | enum | int | synchronized |
break | export | interface | this |
byte | extends | long | throw |
case | FALSE | native | throws |
catch | final | new | transient |
char | finally | null | TRUE |
class | float | package | try |
const | for | private | typeof |
continue | function | protected | var |
debugger | goto | public | void |
default | if | return | volatile |
delete | implements | short | while |
do | import | static | with |
double | in | super |
JavaScript语言支持以下算术运算符
给定 A=10,B=20,下面的表格解释了这些算术运算符:
运算符 | 描述 | 例子 |
---|---|---|
+ | 两个运算数相加 | A + B = 30 |
- | 第一个运算数减去第二个运算数 | A - B = -10 |
* | 运算数相乘 | A * B = 200 |
/ | 分子除以分母 | B / A = 2 |
% | 模数运算符,整除后的余数 | B % A = 0 |
++ | 增量运算符,整数值逐次加1 | A++ = 11 |
-- | 减量运算符,整数值逐次减1 | A-- = 9 |
JavaScript语言支持以下比较运算符
给定 A=10,B=20,下面的表格解释了这些比较运算符:
运算符 | 描述 | 例子 |
---|---|---|
== | 检查两个运算数的值是否相等,如果是,则结果为true | A == B 为false |
!= | 检查两个运算数的值是否相等,如果不相等,则结果为true | A != B 为true |
> | 检查左边运算数是否大于右边运算数,如果是,则结果为true | A > B 为false |
< | 检查左边运算数是否小于右边运算数,如果是,则结果为true | A < B 为true |
>= | 检查左边运算数是否大于或者等于右边运算数,如果是,则结果为true | A >= B 为false |
<= | 检查左边运算数是否小于或者等于运算数,如果是,则结果为true | A <= B 为true |
JavaScript语言支持以下逻辑运算符
给定 A=10,B=20,下面的表格解释了这些逻辑运算符
运算符 | 描述 | 例子 |
---|---|---|
&& | 称为逻辑与运算符。如果两个运算数都非零,则结果为true。 | A && B 为true |
|| | 称为逻辑或运算符。如果两个运算数中任何一个非零,则结果为true。 | A || B 为 true |
! | 称为逻辑非运算符。用于改变运算数的逻辑状态。如果逻辑状态为true,则通过逻辑非运算符可以使逻辑状态变为false | !(A && B) 为false |
JavaScript语言支持以下逻辑运算符
给定 A=2,B=3,下面的表格解释了这些逻辑运算符
运算符 | 描述 | 例子 |
---|---|---|
& | 称为按位与运算符。它对整型参数的每一个二进制位进行布尔与操作。 | A & B = 2 . |
| | 称为按位或运算符。它对整型参数的每一个二进制位进行布尔或操作。 | A | B = 3. |
^ | 称为按位异或运算符。它对整型参数的每一个二进制位进行布尔异或操作。异或运算是指第一个参数或者第二个参数为true,并且不包括两个参数都为true的情况,则结果为true。 | (A ^ B) = 1. |
~ | 称为按位非运算符。它是一个单运算符,对运算数的所有二进制位进行取反操作。 | ~B = -4 . |
<< | 称为按位左移运算符。它把第一个运算数的所有二进制位向左移动第二个运算数指定的位数,而新的二进制位补0。将一个数向左移动一个二进制位相当于将该数乘以2,向左移动两个二进制位相当于将该数乘以4,以此类推。 | A << 1 = 4. |
>> | 称为按位右移运算符。它把第一个运算数的所有二进制位向右移动第二个运算数指定的位数。为了保持运算结果的符号不变,左边二进制位补0或1取决于原参数的符号位。如果第一个运算数是正的,运算结果最高位补0;如果第一个运算数是负的,运算结果最高位补1。将一个数向右移动一位相当于将该数乘以2,向右移动两位相当于将该数乘以4,以此类推。 | A >> 1 = 1. |
>>> | 称为0补最高位无符号右移运算符。这个运算符与>>运算符相像,除了位移后左边总是补0. | A >>> = 1. |
JavaScript语言支持以下赋值运算符
运算符 | 描述 | 例子 |
---|---|---|
= | 简单赋值运算符,将右边运算数的值赋给左边运算数 | C = A + B 将A+B的值赋给C |
+= | 加等赋值运算符,将右边运算符与左边运算符相加并将运算结果赋给左边运算数 | C += A 相当于 C = C + A |
-= | 减等赋值运算符,将左边运算数减去右边运算数并将运算结果赋给左边运算数 | C -= A 相当于C = C - A |
*= | 乘等赋值运算符,将右边运算数乘以左边运算数并将运算结果赋给左边运算数 | C *= A 相当于C = C * A |
/= | 除等赋值运算符, 将左边运算数除以右边运算数并将运算结果赋值给左边运算数 | C /= A 相当于 C = C / A |
%= | 模等赋值运算符,用两个运算数做取模运算并将运算结果赋值给左边运算数 | C %= A 相当于 C = C % A |
有一种运算符叫条件运算符。首先判断一个表达式是真或假,然后根据判断结果执行两个给定指令中的一个。条件运算符语法如下
运算符 | 描述 | 例子 |
---|---|---|
? : | 条件表达式 | 如果条件为真 ? X值 : Y值 |
typeof 是一个置于单个参数之前的一元运算符,这个参数可以是任何类型的。它的值是一个表示运算数的类型的字符串。
typeof 运算符可以判断“数值”,“字符串”,“布尔”类型,看运算数是一个数字,字符串还是布尔值,并且根据判断结果返回true或者false。
if语句是基本的控制语句,能使JavaScript做出决定并且按条件执行语句。
if (expression){
Statement(s) to be executed if expression is true
}
if...else 语句是另一种控制语句,它能使JavaScript选择多个代码块之一来执行。
if (expression){
Statement(s) to be executed if expression is true
}else{
Statement(s) to be executed if expression is false
}
if...else if... 语句是一种推进形式的控制语句,它能使 JavaScript 选择多个代码块之一来执行。
if (expression 1){
Statement(s) to be executed if expression 1 is true
}else if (expression 2){
Statement(s) to be executed if expression 2 is true
}else if (expression 3){
Statement(s) to be executed if expression 3 is true
}else{
Statement(s) to be executed if no expression is true
}
语句的基本语法是给定一个判断表达式以及若干不同语句,根据表达式的值来执行这些语句。编译器检查每个case是否与表达式的值相匹配。如果没有与值相匹配的,则执行default缺省条件。
switch (expression)
{
case condition 1: statement(s)
break;
case condition 2: statement(s)
break;
...
case condition n: statement(s)
break;
default: statement(s)
}
循环是 JavaScript 中最基本的循环模式,下边将加以介绍。
while(expression){
statement
}
do...while 循环和 while 循环非常相似,它们之间的区别是 while 语句为先判断条件是否成立在执行循环体,而 do...while 循环语句则先执行一次循环后,再判断条件是否成立。也就是说即使判断条件不成立,do...while 循环语句中“{}”中的程序段至少要被执行一次。
do{
statement
}while(expression);
循环是一种最简洁的循环模式,包括三个重要部分
可以将这三个部分放在同一行,用分号隔开。
for(initialize;test condition;iteration statement)
{
statement;
}
for (variablename in object){
statement
}
在每次迭代中将一个对象的属性赋值给变量,这个循环会持续到这个对象的所有属性都枚举完。
Break语句用于提前跳出循环,打破封闭的循环体。
Continue语句告诉解释器立即开始下一次迭代的循环和跳过剩余的代码块。
当遇到continue语句,程序流将立即循环检查表达式,如果条件保持真那么下个迭代开始,否则控制跳出循环体。
使用一个函数之前,我们需要定义该函数。在 JavaScript 中最常见的定义一个函数的方式是使用函数关键字,紧随其后的是一个独特的函数名,参数列表(也可能是空的),和一个被花括号包围的语句块。这里显示的基本语法
<script type="text/javascript">
<!--
function functionname(parameter-list)
{
statements
}
//-->
</script>
在脚本中调用某个函数之后,你会需要简单的编写的函数的名称如下
<script type="text/javascript">
<!--
sayHello();
//-->
</script>
异常通常使用 try/catch/finally 结构来进行处理。
<script type="text/javascript">
<!--
try {
statementsToTry
} catch ( e ) {
catchStatements
} finally {
finallyStatements
}
//-->
</script>
try部分后面必须紧随catch后者finally部分(同时或者其一)。当在catch部分中发生异常事件后,异常会被存储于e变量中,然后catch部分会被执行。而finally部分会在try/catch之后必然执行。
警告对话框是最常用的,它通常被用来给用户提示一些警告信息。比如,某个输入区域需要用户输入一些文本信息,但是用户并没有输入任何信息,那么为了使用户输入有效的信息,你可以利用警告对话框来提示警告信息,如下:
<head>
<script type="text/javascript">
<!--
alert("Warning Message");
//-->
</script>
</head>
确认对话框是最常用来获取用户对任何选项的赞成的观点。确认对话框会显示两个按钮:Ok 和 Cancel。
你可以像如下的方式使用确认对话框:
<head>
<script type="text/javascript">
<!--
var retVal = confirm("Do you want to continue ?");
if( retVal == true ){
alert("User wants to continue!");
return true;
}else{
alert("User does not want to continue!");
return false;
}
//-->
</script>
</head>
你可以使用如下的方式来实现提示对话框
<head>
<script type="text/javascript">
<!--
var retVal = prompt("Enter your name : ", "your name here");
alert("You have entered : " + retVal );
//-->
</script>
</head>
利用 JavaScript 在客户端进行重定向是非常简单的。为了重定向你的网站,你仅仅只需要在网页代码的头部中添加一行代码,如下
<head>
<script type="text/javascript">
<!--
var retVal = prompt("Enter your name : ", "your name here");
alert("You have entered : " + retVal );
//-->
</script>
</head>
JavaScript 中 void 是一个重要的关键字。它可以用作一个一元运算符,此时它会出现在一个操作数之前,这个操作数可以是任意类型的。
这个操作符指定要计算一个表达式但是不返回值。它的语法可能是下列之一
<head>
<script type="text/javascript">
<!--
void func()
javascript:void func()
or:
void(func())
javascript:void(func())
//-->
</script>
</head>
JavaScript 能使用 window 对象的打印函数print来帮你实现这个功能。
当JavaScript的打印方法 window.print() 执行后,就会打印当前的 web 页面。
你可以使用 onclick 事件直接调用这个函数,如下所示
<head>
<script type="text/javascript">
<!--
//-->
</script>
</head>
<body>
<form>
<input type="button" value="Print" onclick="window.print()" />
</form>
</body>
创建 Cookie 最简单的方式就是给 document.cookie 对象赋值一个字符串值,它的语法如下
document.cookie = "key1=value;key2=value2;expires=date";
读取 Cookie 就像写它一样简单,因为 document.cookie 对象的值就是 Cookie 的属性值。因此你可以利用这个字符串在任何时候对 Cookie 进行访问。
document.cookie 字符串会保存一系列用分号分开的 name = value 键值对,这里的 name 就是一个 Cookie 名称,value 是它的值。