JavaScript 能够以不同方式“显示”数据:
window.alert()
写入警告框document.write()
写入 HTML 输出innerHTML
写入 HTML 元素console.log()
写入浏览器控制台 JavaScript 语句常常通过某个关键词来标识需要执行的 JavaScript 动作。
下面的表格列出了一部分将在教程中学到的关键词:
关键词 | 描述 |
---|---|
break | 终止 switch 或循环。 |
continue | 跳出循环并在顶端开始。 |
debugger | 停止执行 JavaScript,并调用调试函数(如果可用)。 |
do ... while | 执行语句块,并在条件为真时重复代码块。 |
for | 标记需被执行的语句块,只要条件为真。 |
function | 声明函数。 |
if ... else | 标记需被执行的语句块,根据某个条件。 |
return | 退出函数。 |
switch | 标记需被执行的语句块,根据不同的情况。 |
try ... catch | 对语句块实现错误处理。 |
var | 声明变量。 |
注释:JavaScript 关键词指的是保留的单词。保留词无法用作变量名。
JavaScript 语法是一套规则,它定义了 JavaScript 的语言结构。
var x, y; // 如何声明变量
x = 7; y = 8; // 如何赋值
z = x + y; // 如何计算值
JavaScript 语句定义两种类型的值:混合值和变量值。
混合值被称为字面量(literal)。变量值被称为变量。
书写混合值最重要的规则是:
写数值有无小数点均可:
15.90
10011
字符串是文本,由双引号或单引号包围:
"Bill Gates"
'Bill Gates'
在编程语言中,变量用于存储数据值。
JavaScript 使用 var
关键词来声明变量。
var x;
x = 7;
JavaScript 使用算数运算符(+
-
*
/
)来计算值:
(7 + 8) * 10
JavaScript 使用赋值运算符(=
)向变量赋值:
var x, y;
var x = 7;
var y = 8;
表达式是值、变量和运算符的组合,计算结果是值。
表达式也可包含变量值:
6 * 10
值可以是多种类型,比如数值和字符串:
x * 10
例如,"Bill" + " " + "Gates",计算为 "Bill Gates":
"Bill" + " " + "Gates"
JavaScript 关键词用于标识被执行的动作。
var
关键词告知浏览器创建新的变量:
var x = 7 + 8;
var y = x * 10;
并非所有 JavaScript 语句都被“执行”。
双斜杠 //
或 /*
与 */ 之间的代码被视为注释。
注释会被忽略,不会被执行:
var x = 7; // 会执行
// var x = 8; 不会执行
标识符是名称。
在 JavaScript 中,标识符用于命名变量(以及关键词、函数和标签)。
在大多数编程语言中,合法名称的规则大多相同。
在 JavaScript 中,首字符必须是字母、下划线(-)或美元符号($)。
连串的字符可以是字母、数字、下划线或美元符号。
提示:数值不可以作为首字符。这样,JavaScript 就能轻松区分标识符和数值。
所有 JavaScript 标识符对大小写敏感。
变量 lastName
和 lastname
,是两个不同的变量。
JavaScript 变量是存储数据值的容器。
在本例中,x、y 和 z 是变量:
var x = 7;
var y = 8;
var z = x + y;
从上例中,您可获得:
x 存储值 7, y 存储值 8, z 存储值 15在本例中,price1、price2 以及 total 是变量:
var price1 = 7; var price2 = 8; var price3 = 12; var total = price1 + price2 + price3;
亲自试一试
在编程中,类似代数,我们使用变量(比如 price1)来存放值。
在编程中,类似代数,我们在表达式中使用变量(total = price1 + price2)。
从上例中,您可以算出 total 的值是 27。
提示:JavaScript 变量是存储数据值的容器。
所有 JavaScript 变量必须以唯一的名称的标识。
这些唯一的名称称为标识符。
标识符可以是短名称(比如 x 和 y),或者更具描述性的名称(age、sum、totalVolume)。
构造变量名称(唯一标识符)的通用规则是:
名称可包含字母、数字、下划线和美元符号 名称必须以字母开头 名称也可以$
和 _
开头(但是在本教程中我们不会这么做) 名称对大小写敏感(y 和 Y 是不同的变量) 保留字(比如 JavaScript 的关键词)无法用作变量名称
提示:JavaScript 标识符对大小写敏感。
在 JavaScript 中,等号(=
)是赋值运算符,而不是“等于”运算符。
这一点与代数不同。下面的代码在代数中是不合理的:
x = x + 5
然而在 JavaScript 中,它非常合理:把 x + 5 的值赋给 x。
(计算 x + 5 的值并把结果放入 x 中。x 的值递增 5。)
注释:JavaScript 中的“等于”运算符是 ==
。
JavaScript 变量可存放数值,比如 100,以及文本值,比如 "Bill Gates"。
在编程中,文本值被称为字符串。
JavaScript 可处理多种数据类型,但是现在,我们只关注数值和字符串值。
字符串被包围在双引号或单引号中。数值不用引号。
如果把数值放在引号中,会被视作文本字符串。
var pi = 3.14; var person = "Bill Gates"; var answer = 'How are you!';
亲自试一试
在 JavaScript 中创建变量被称为“声明”变量。
您可以通过 var
关键词来声明 JavaScript 变量:
var carName;
声明之后,变量是没有值的。(技术上,它的值是 undefined
。)
如需赋值给变量,请使用等号:
carName = "porsche";
您可以在声明变量时向它赋值:
var carName = "porsche";
在上面的例子中,我们创建了名为 carName 的变量,并向其赋值 "porsche"。
然后,我们在 id="demo" 的 HTML 段落中“输出”该值:
亲自试一试
提示:在脚本的开头声明所有变量是个好习惯!
您可以在一条语句中声明许多变量。
以 var
作为语句的开头,并以逗号分隔变量:
var person = "Bill Gates", carName = "porsche", price = 15000;
声明可横跨多行:
var person = "Bill Gates",
carName = "porsche",
price = 15000;
在计算机程序中,被声明的变量经常是不带值的。值可以是需被计算的内容,或是之后被提供的数据,比如数据输入。
不带有值的变量,它的值将是 undefined
。
变量 carName 在这条语句执行后的值是 undefined
:
var carName;
如果再次声明某个 JavaScript 变量,将不会丢它的值。
在这两条语句执行后,变量 carName 的值仍然是 "porsche":
var carName = "porsche";
var carName;
与代数类似,您能够通过 JavaScript 变量进行算术运算,使用 =
和 +
之类的运算符:
var x = 3 + 5 + 8;
字符串也可以使用加号,但是字符串将被级联:
var x = "Bill" + " " + "Gates";
还可以试试这个:
var x = "8" + 3 + 5;
提示:如果把要给数值放入引号中,其余数值会被视作字符串并被级联。
现在试试这个:
var x = 3 + 5 + "8";
JavaScript 不会把 VAR 或 Var 译作关键词 var。
历史上,程序员曾使用三种把多个单词连接为一个变量名的方法:
first-name, last-name, master-card, inter-city.
注释:JavaScript 中不能使用连字符。它是为减法预留的。
first_name, last_name, master_card, inter_city.
FirstName, LastName, MasterCard, InterCity.
JavaScript 程序员倾向于使用以小写字母开头的驼峰大小写:
firstName, lastName, masterCard, interCity
JavaScript 注释用于解释 JavaScript 代码,增强其可读性。
JavaScript 注释也可以用于在测试替代代码时阻止执行。
单行注释以 //
开头。
任何位于 //
与行末之间的文本都会被 JavaScript 忽略(不会执行)。
本例在每条代码行之前使用单行注释:
// 改变标题:
document.getElementById("myH").innerHTML = "我的第一张页面";
// 改变段落:
document.getElementById("myP").innerHTML = "我的第一个段落。";
本例在每行结尾处使用了单行注释来解释代码:
var x = 5; // 声明 x,为其赋值 5
var y = x + 2; // 声明 y,为其赋值 x + 2
多行注释以 /*
开头,以 */
结尾。
任何位于 /*
和 */
之间的文本都会被 JavaScript 忽略。
本例使用多行注释(注释块)来解释代码:
/*
下面的代码会改变
网页中
id = "myH" 的标题
以及 id = "myP" 的段落:
*/
document.getElementById("myH").innerHTML = "我的第一张页面";
document.getElementById("myP").innerHTML = "我的第一个段落。";
注释:使用单行注释最为常见。
提示:注释块常用于官方声明。
使用注释来防止代码执行很适合代码测试。
在代码行之前添加 //
会把可执行的代码行更改为注释。
本例使用 //
来阻止代码行的执行:
//document.getElementById("myH").innerHTML = "我的第一张页面";
document.getElementById("myP").innerHTML = "我的第一个段落。";
本例使用注释块来阻止多行代码的执行:
/*
document.getElementById("myH").innerHTML = "我的第一张页面";
document.getElementById("myP").innerHTML = "我的第一个段落。";
*/
JavaScript 变量是存储数据值的容器。
在本例中,x、y 和 z 是变量:
var x = 7;
var y = 8;
var z = x + y;
从上实例中可获得:
在本例中,price1、price2 以及 total 是变量:
var price1 = 7;
var price2 = 8;
var price3 = 12;
var total = price1 + price2 + price3;
在编程中,类似代数,我们使用变量(比如 price1)来存放值。
在编程中,类似代数,我们在表达式中使用变量(total = price1 + price2)。
从上实例中,可以算出 total 的值是 27。
提示:JavaScript 变量是存储数据值的容器。
在 JavaScript 中,等号(=
)是赋值运算符,而不是“等于”运算符。
这一点与代数不同。下面的代码在代数中是不合理的:
x = x + 5
然而在 JavaScript 中,它非常合理:把 x + 5 的值赋给 x。
(计算 x + 5 的值并把结果放入 x 中。x 的值递增 5。)
注释:JavaScript 中的“等于”运算符是"=="
。
JavaScript 变量可存放数值,比如 100,以及文本值,比如 "Bill Gates"。
在编程中,文本值被称为字符串。
JavaScript 可处理多种数据类型,但是现在,我们只关注数值和字符串值。
字符串被包围在双引号或单引号中。数值不用引号。
如果把数值放在引号中,会被视作文本字符串。
var pi = 3.14;
var person = "Bill Gates";
var answer = 'How are you!';
在 JavaScript 中创建变量被称为“声明”变量。
您可以通过 var
关键词来声明 JavaScript 变量:
var carName;
声明之后,变量是没有值的。(技术上,它的值是 undefined
。)
如需赋值给变量,请使用等号:
carName = "porsche";
您可以在声明变量时向它赋值:
var carName = "porsche";
在上面的例子中,我们创建了名为 carName 的变量,并向其赋值 "porsche"。
然后,我们在 id="demo" 的 HTML 段落中“输出”该值:
"demo">
<script>
var carName = "porsche";
document.getElementById("demo").innerHTML = carName;
script>
您可以在一条语句中声明许多变量。
以 var
作为语句的开头,并以逗号分隔变量:
var person = "Bill Gates", carName = "porsche", price = 15000;
声明可横跨多行:
var person = "Bill Gates",
carName = "porsche",
price = 15000;
在计算机程序中,被声明的变量经常是不带值的。值可以是需被计算的内容,或是之后被提供的数据,比如数据输入。
不带有值的变量,它的值将是 undefined
。
变量 carName 在这条语句执行后的值是 undefined
:
var carName;
如果再次声明某个 JavaScript 变量,将不会丢它的值。
在这两条语句执行后,变量 carName 的值仍然是 "porsche":
var carName = "porsche";
var carName;
与代数类似,您能够通过 JavaScript 变量进行算术运算,使用 =
和 +
之类的运算符:
var x = 3 + 5 + 8;
字符串也可以使用加号,但是字符串将被级联:
var x = "Bill" + " " + "Gates";
还可以试试这个:
var x = "8" + 3 + 5;
提示:如果把要给数值放入引号中,其余数值会被视作字符串并被级联。
现在试试这个:
var x = 3 + 5 + "8";
JavaScript 函数是被设计为执行特定任务的代码块。
JavaScript 函数会在某代码调用它时被执行。
function myFunction(p1, p2) {
return p1 * p2; // 该函数返回 p1 和 p2 的乘积
}
JavaScript 函数通过 function
关键词进行定义,其后是函数名和括号 ()。
函数名可包含字母、数字、下划线和美元符号(规则与变量名相同)。
圆括号可包括由逗号分隔的参数:
(参数 1, 参数 2, ...)
由函数执行的代码被放置在花括号中:{}
function name(参数 1, 参数 2, 参数 3) { 要执行的代码 }
函数参数(Function parameters)是在函数定义中所列的名称。
函数参数(Function arguments)是当调用函数时由函数接收的真实的值。
在函数中,参数是局部变量。
在其他编程语言中,函数近似程序(Procedure)或子程序(Subroutine)。
函数中的代码将在其他代码调用该函数时执行:
您将在本教程中学到更多有关函数调用的知识。
当 JavaScript 到达 return
语句,函数将停止执行。
如果函数被某条语句调用,JavaScript 将在调用语句之后“返回”执行代码。
函数通常会计算出返回值。这个返回值会返回给调用者:
计算两个数的乘积,并返回结果:
var x = myFunction(7, 8); // 调用函数,返回值被赋值给 x
function myFunction(a, b) {
return a * b; // 函数返回 a 和 b 的乘积
}
x 的结果将是:
56
您能够对代码进行复用:只要定义一次代码,就可以多次使用它。
您能够多次向同一函数传递不同的参数,以产生不同的结果。
把华氏度转换为摄氏度:
function toCelsius(fahrenheit) {
return (5/9) * (fahrenheit-32);
}
document.getElementById("demo").innerHTML = toCelsius(77);
使用上面的例子,toCelsius
引用的是函数对象,而 toCelsius()
引用的是函数结果。
访问没有 () 的函数将返回函数定义:
function toCelsius(fahrenheit) {
return (5/9) * (fahrenheit-32);
}
document.getElementById("demo").innerHTML = toCelsius;
函数的使用方法与变量一致,在所有类型的公式、赋值和计算中。
使用变量来存储函数的值:
var x = toCelsius(77);
var text = "The temperature is " + x + " Celsius";
您能够把函数当做变量值直接使用:
var text = "The temperature is " + toCelsius(77) + " Celsius";
局部变量
在 JavaScript 函数中声明的变量,会成为函数的局部变量。
局部变量只能在函数内访问。
// 此处的代码不能使用 carName
function myFunction() {
var carName = "Volvo";
// 此处的代码可以使用 carName
}
// 此处的代码不能使用 carName
由于局部变量只能被其函数识别,因此可以在不同函数中使用相同名称的变量。
局部变量在函数开始时创建,在函数完成时被删除。