开始使用 JavaScript 语言,第 2 部分: 开始使用 JavaScript 语言

JavaScript 语言基础

想要对 JavaScript 语言有一个基本的了解?本文以向初学者介绍 JavaScript 概念开始,提供代码示例来说明一切是如何完成的。

Kris Hadlock, Web 开发人员/设计师, Studio Sedition

//www.ibm.com/developerworks/i/p-khadlock.jpgKris Hadlock 从 1996 年起就是一个签约 web 开发人员和设计师。他为很多公司开发过项目,比如,SPIN Magazine、IKEA、United Airlines、JP Morgan Chase、GoDaddy Software 和 Fire Mountain Gems。他也是 Ajax for Web Application Developers (Sams) 和 The ActionScript Migration Guide (New Riders) 的作者,还是各种网站和设计杂志的专栏作者,包括 Peachpit.com、InformIT.com 和 Practical Web Design 杂志。Kris 也是 www.studiosedition.com 的创始人,这是一个网站设计和软件开发工作室,一家专门从事形式和功能融合的工作室。



2012 年 4 月 11 日

JavaScript 语言变得越来越流行,可以说是 Internet 上最重要的语言。您可以跨越各种平台和浏览器使用它,且不会歧视后端语言。有很多个不同的库 — 其中一些很不错 — 可帮助开发、加快开发时间等等。问题是有时候这些开发库或者框架屏蔽了 JavaScript 的底层语法,以至于新开发人员对 JavaScript 语言基本原理缺乏理解。本文将介绍 JavaScript 语言的基本原理,通过介绍一些基本的 JavaScrip 概念,向初学者提供一个基本的理解。代码示例贯穿全文,说明一切是如何完成的。

理解 JavaScript 语言

JavaScript 是一个免费的客户端语言,允许您添加交互性到 Hypertext Markup Language (HTML) 页面。客户端 意味着 JavaScript 在浏览器中运行,而不是在服务器端运行。客户端脚本就是允许用户在将 web 页面发送到服务器端以及浏览器加载之后与一个 web 页面进行交互。例如,Google Maps 使用 JavaScript 允许用户与地图进行交互,向四周移动、放大、缩小。没有 JavaScript 语言的话,对于每个用户交互每次 web 页面都需要刷新,当然,除非它使用一个插件,比如 Adobe Flash 或 Microsoft® Silverlight。JavaScript 语言不需要插件。

由于 JavaScript 向用户提供在页面加载之后与 web 页面进行交互的功能,开发人员通常用它来实现以下功能:

  • 动态添加、编辑和删除 HTML 元素及其值
  • 在提交之前验证 web 表单
  • 创建 cookies 来存储和检索用户数据,以便将来进行访问。

开始之前,有几个基础知识需要注意:

  • 为了在 HTML 文件中包含 JavaScript 代码,您需要将代码放在脚本标记之内,并要包括 text/javascript 类型属性(见清单 1)。
  • 所有 JavaScript 语句以一个分号结束。
  • 该语言是大小写敏感的。
  • 所有变量名必须以字母或下划线开始。
  • 您可以使用注释来标识脚本的某些行,注释写在双斜线后面。
  • 您也可以使用注释来注释脚本。注释多行还有一个很好的方法是使用 /* 您的脚本 */。星号 /**/ 内的任何脚本在执行时都不会运行。
清单 1. 在 HTML 文件中包含 JavaScript 代码所需的脚本标记和类型属性
<script type="text/javascript"></script>

要隐藏浏览器不支持的 JavaScript 代码,或者如果一个用户不需要时,只需在 JavaScript 语句前后加上注释标记(见清单 2)。

清单 2. 使用注释隐藏浏览器不支持的 JavaScript 代码
<script type="text/javascript">
<!--
Example statement here
//-->
</script>

在一个 web 页面中包含 JavaScript 代码最常用的方法就是从一个外部 JavaScript 文件中加载,在脚本标记中使用 src 属性(见清单 13)。

清单 3. 在 HTML 文件中包含一个外部 JavaScript 文件
<script type="text/javascript" src="path/to/javascript.js"></script>

外部 JavaScript 文件是包含 JavaScript 代码最常用的方法,出于以下考虑:

  • 如果您的 HTML 页面中只有很少代码,搜索引擎可以更快地抓取和索引您的网站。
  • 将您的 JavaScript 代码与 HTML 分离,使您的 HTML 保持整洁易于管理。
  • 由于可以在 HTML 代码中包含多个 JavaScript 文件,因此可以将 JavaScript 文件分别放在服务器上不同的文件夹中,和镜像类似,这是管理您代码最简单的方法。整洁且有组织的代码是轻松管理网站的关键。

变量

变量存储稍后将被检索或者更新的数据。存储在变量中的数据可以是一个值或表达式。在 JavaScript 中有 3 种类型的 JavaScript 脚本,如表 1 所示。

表 1. JavaScript 表达式
表达式说明
Arithmetic计算一个数字
String计算一个字符串
Logical计算一个布尔值(真或假)

有两类变量:本地变量和全局变量。您可以使用 var 关键字声明本地变量,全局变量的声明不使用 var 关键字。使用 var 关键字的变量被认为是本地的,因为在您声明的范围之外不能访问。例如,如果您在一个函数(将在本文结尾处介绍)内声明一个本地变量,它就不能在该函数的外部进行访问,仅在本函数内部使用。如果您不使用 var 关键字声明该变量,它就可以在整个脚本中访问,而不再限于此函数之内。

清单 4 展示了一个本地变量示例,名为 num,且赋值为 10。

清单 4. 声明一个本地变量
var num = 10;

为了在脚本中其他地方访问 num 变量的值,您只需通过变量名来引用该变量,如清单 5 所示。

清单 5. 访问变量的值
document.write("The value of num is: "+ num);

这条语句的执行结果是 “The value of num is 10”。document.write 函数可以将数据写入到 web 页面。您将在本文其余部分使用该函数将示例写入 web 页面。

要在一个变量中存储算术表达式,您只需将变量分配给计算值,如清单 6 所示,变量中存储的是计算结果,而不是计算本身。因此,再次说明,结果是 “The value of num is: 10”。

清单 6. 存储一个算术表达式
var num = (5 + 5);
document.write("The value of num is: "+ num);

要修改一个变量的值,通过您所指定的变量名引用变量值,然后使用等号为变量赋一个新值(清单 7)。这次不同的是不需要使用 var 关键字,因为变量已经声明了。

清单 7. 更改现有变量的值
var num = 10;
document.write("The value of num is: "+ num);

// Update the value of num to 15
num = 15;
document.write("The new value of num is: "+ num);

此脚本的结果是 “The value of num is: 10”,接着是 “The new value of num is: 15”。

除了变量之外,本小节还将介绍下一个主题:运算符。等号(=)是一个赋值运算符,用于为变量赋值,加号(+)是一个算术运算符,用于计算 5 + 5 的值。下一小节将介绍 JavaScript 中的所有变量运算符,以及如何使用。


运算符

在 JavaScript 中执行运算时就需要运算符,运算包含加、减、比较等。JavaScript 中有 4 类运算符:

  • 算术
  • 赋值
  • 比较
  • 逻辑

算术运算符

算术运算符完成基本的数学运算,比如,加、减、乘、除,等等。表 2 列出了 JavaScript 中的所有算术运算符。

表 2. 算术运算符
运算符描述
+
-
*
/
%模(取余)
++自加
--自减

赋值运算符

算术运算符执行基本的算术运算,而赋值运算符为 JavaScript 变量赋值。在前面部分为变量赋值时,您看到了最常见的赋值运算符。表 3 列出并描述了 JavaScript 中提供的所有赋值运算符。

表 3. 赋值运算符
运算符描述
=等号
+=加一个值然后赋给变量
-=减一个值然后赋给变量
*=乘一个值然后赋给变量
/=除一个值然后赋给变量
%=对该值取模然后赋给变量

您已经看到了如何使用等号将一个值和表达式赋给一个变量,但是现在我将向您介绍可能引起混乱的那个运算符。加一个值然后赋给该变量,刚开始可能觉得有点奇怪,但实际上很简单(清单 8)。

清单 8. 加一个值然后赋给该变量
var num = 10;
document.write("The value of num is: "+ num);

// Update the value of num to 15
num += 5;
document.write("The new value of num is: "+ num);

该脚本的结果是 “The value of num is: 10”,接着是 “The new value of num is: 15”。在脚本中,您可以看到加了一个值之后再赋给该变量。这也是一个快速编写脚本的方法,见清单 9。

清单 9. 加一个值后再赋给变量的常见方法
var num = 10;
document.write("The value of num is: "+ num);

// Update the value of num to 15
num = (num + 5);
document.write("The new value of num is: "+ num);

比较运算符

比较运算符判断两个变量或者它们的值之间的关系。您可以在条件语句里使用比较运算符通过比较变量或值创建逻辑,来估算语句是真还是假。表 4 列出并描述了 JavaScript 中提供的所有比较运算符。

表 4. 比较运算符
运算符描述
==等于
===全等,用于值或对象类型
!=不等于
>大于
<小于
>=大于或等于
<=小于或等于

比较变量和值是编写任何逻辑语句的基础。清单 10 中的示例展示了如何使用等于比较运算符(==)来判断 10 是否等于 1。

清单 10. 使用一个比较运算符
document.write(10 == 1);

逻辑运算符

逻辑运算符通常用于条件语句中,结合比较运算符。表 5 列出并描述了 JavaScript 中提供的所有逻辑运算符。

表 5. 逻辑运算符
运算符描述
&&
||
!

现在,您已经掌握了变量和运算符了,可以开始学习创建复杂对象(存储的内容比变量多)了。


数组

数组类似于变量,但又不同于变量,它可以在一个变量名下存储多个值和表达式。在一个变量中存储多个值正是数组功能的强大之处。对于您在一个 JavaScript 数组中存储的数据数量或类型没有限制,只要是在范围之内,在脚本中声明了之后,您就可以在任何时间访问任何项的任何值。数组可以存储 JavaScript 中的任何类型的数据,包括数组,最常见的是在一个数组中存储相似数据,然后赋一个与其中所含项有关的名称。清单 11 提供了一个使用两个独立数组存储相似数据的示例。

清单 11. 在一个数组中存储相似的值
var colors = new Array("orange", "blue", "red", "brown");
var shapes = new Array("circle", "square", "triangle", "pentagon");

正如您所看到的,可以在一个数组中存储所有项,这不符合逻辑,在后面的脚本中可能引起问题,比如,确定脚本中的数据。

访问数组中的值很容易,但是也有一些问题。数组 ID 总是从 0 开始,而不是从 1 开始,第一次使用时可能会混淆。ID 从 0 开始递增,例如 0、1、2、3,等等,要访问一个数组项,必须使用其 ID,它指的是该项在数组中的位置(见清单 12)。

清单 12. 在一个数组中存储类似数据
var colors = new Array("orange", "blue", "red", "brown"); 
document.write("Orange: "+ colors[0]);
document.write("Blue: "+ colors[1]);
document.write("Red: "+ colors[2]);
document.write("Brown: "+ colors[3]);

也可以给数组中的每一项赋值,或者更新每一项,操作和访问数组项一样(见清单 13)。

清单 13. 给数组中的每一项赋值
var colors = new Array();
colors[0] = "orange";
colors[1] = "blue";
colors[2] = "red";
colors[3] = "brown";
document.write("Blue: "+ colors[1]);

// Update blue to purple
colors[1] = "purple";
document.write("Purple: "+ colors[1]);

现在,您已经了解了变量、运算符和数组。接下来,开始创建一些逻辑语句,将您所学付诸实践。


条件语句

在脚本和编程语言中,条件语句是创建任何逻辑类型的关键,JavaScript 也不例外。条件语句决定执行什么操作。JavaScript 中有 4 种编写条件语句的方法,如表 6 所示。

表 6. 条件语句
语句描述
if如果条件为真,执行脚本。
if...else如果条件为真执行一个脚本,如果条件为假执行另一个脚本。
if...else if...else如果无数条件中的一个为真,执行一个脚本,如果所有条件都为假,执行另一个脚本。
switch用于执行许多脚本中的一个。

如果您只想在条件为真时执行一个脚本,使用 if 语句。清单 14 展示了如何使用一个带有比较运算符的 if 语句,当条件为真时执行一个脚本。

清单 14. 使用 if 语句
var num = 10;
if(num == 5)
{
   document.write("num is equal to 5");
}

如果要在一个条件为真时执行一个脚本,为假时执行另一个脚本,则使用 if...else 语句,如清单 15 所示。

清单 15. 使用 if...else 语句
var num = 10;
if(num == 5)
{
   document.write("num is equal to 5");
}
else
{
   document.write("num is NOT equal to 5, num is: "+ num);
}

如果要根据不同条件执行不同脚本,则使用 if...else if...else 语句,见清单 16。

清单 16. 使用 if...else if...else 语句
var num = 10;
if(num == 5)
{
     document.write("num is equal to 5");
}
else if(num == 10)
{
   document.write("num is equal to 10");
}
else
{
  document.write("num is: "+ num);
}

Switch 语句不同于 if 语句,它不能用于确定一个值是否大于或小于另一个值。清单 17 展示了何时适合使用一个 switch 语句来确定执行哪个脚本。

清单 17. 使用 switch 语句
var num = 10;
switch(num)
{
   case 5:
      document.write("num is equal to 5");
      break;
   case 10:
      document.write("num is equal to 10");
      break;
   default:
      document.write("num is: "+ num);
}

您可能已经注意到,清单 17 中使用了 case 子句、break 语句和 default 子句。这些子句和语句对于 switch 语句都是至关重要的。case 子句确定 switch 的值是否等于 case 子句的值。break 语句中断 — 或停止—switch 语句执行其余语句。如果没有case 语句被执行或者如果执行的 case 语句没有 break 语句,则 default 子句指定默认运行的脚本。例如,清单 18 展示了如果在执行 case 语句时没有使用 break 语句,那么多个 case 语句和 default 语句将如何执行。

清单 18. 通过不包含 break 语句来执行多行代码
var num = 10;
switch(num)
{
   case 5:
      document.write("num is equal to 5");
      break;
   case 10:
      document.write("num is equal to 10");
   default:
      document.write("num is: "+ num);
}

这个脚本的执行结果是 “num is equal to 10”,接着是 “num is: 10”。这有时称为 switch 落空。

正如我们在本小节开始处所提到的,在任何脚本和编程语言中,条件语句都是所有逻辑的支柱,但是没有函数,您的代码将一团糟。


函数

函数非常有用。函数是只能通过一个事件或者一个对该函数的调用执行的脚本的容器。因此,当浏览器最初加载和执行 web 页面中包含的脚本时,函数不能执行。函数的功能是包含一个含有任务的脚本,使您能够在任何时间执行该脚本、运行该任务。

构造一个函数很简单;开始是 function,接着是一个空格,然后是函数名。函数名可以任意选择;但是,有一点也很重要,就是使其与它所执行的任务相关。清单 9 显示一个更改已有变量值的函数的示例。

清单 19. 构造一个简单函数
var num = 10;
function changeVariableValue()
{
   num = 11;
}
changeVariableValue();
document.write("num is: "+ num);

清单 19 中的示例不仅显示了如何构造一个函数,也显示了如何调用一个函数以及修改变量值。在这个案例中下您可以修改变量值,因为变量是在主脚本范围内声明的,且在函数中声明,因此函数知道该变量。如果变量是声明在此函数中,那么您不能在该函数的外部进行访问。

函数也能够通过函数参数接收数据。函数可以有一个或多个参数,函数调用时根据形参( parameters)的个数调用一个或多个实参(arguments)。形参和实参可能有点混乱;形参 是函数定义的一部分,而实参 是调用函数时使用的表达式。清单 20 的示例展示了一个带形参的函数和一个使用实参进行调用的函数。

清单 20. 使用函数参数
var num = 10;
function increase(_num)
{
   _num++;
}
increase(num);
document.write("num is: "+ num);

这个函数是一个增加实参值的示例。在这个示例中实参是一个已声明的变量。通过一个形参将其传递给函数,使其值增加为 11。

return 语句也是函数中常用的。在函数执行一个脚本后返回一个值。例如,您可以将函数返回值赋给一个变量。清单 21 的示例展示了一个函数执行脚本后返回一个值。

清单 21. 在函数中使用 return 语句
function add(_num1, _num2)
{
   return _num1+_num2;
}
var num = add(10, 10);
document.write("num is: "+ num);

该脚本的执行结果是 “num is: 20”。这个函数的好处是可以添加任何两个您想要传递的数字,然后返回一个值,可以赋给任何变量,而不像清单 20 那样只能更改同一个变量的值。


循环

如您所见,数组是一个存储大量重复使用数据的好方法,但这只是一个开始;forwhile 循环提供迭代数组、访问其值以及在其中执行脚本的功能。

JavaScrip 中最常见的循环是 for 循环。for 循环通常由一个有具体值的变量构成,该变量使用一个比较运算符来将它同一个值进行比较,最后这个值自增或自减。for 循环中的比较通常确定初始变量的数值大于或小于另一个数。当条件为真时,循环运行、变量自增或自减,直至条件为假。清单 22 中的示例展示了如何编写一个 for 循环,当变量值小于数组长度时运行。

清单 22. 构造一个 for 循环,遍历数组
var colors = new Array("orange", "blue", "red", "brown");
for(var i=0; i<colors.length; i++)
{
   document.write("The color is: "+ colors[i] +"<br/>");
}

数组的长度属性有一个值,该值等于数组项的个数,再一次强调,数组的 ID 是从 0 开始的,如果数组中有 4 个元素,长度为 4,但是数组的下标分别是 0、1、2、3 — 没有 4。

另一个循环类型是 while 循环。while 循环比 for 循环执行得更快,但适合除迭代数组之外的所有情况,比如当某一条件为真时执行一个脚本。清单 23 展示了如何编写一个 while 循环,当变量值小于 10 时执行一个脚本。

清单 23. 构造一个 while 循环
var i = 0;
while(i<10)
{
   document.write(i +"<br/>");
   i++;
}

注意,while 循环中的脚本包含了一行代码,用于遍历数值变量直至 while 循环的值为假。如果没有这一行,您将无法结束循环。


结束语

JavaScript 语言可以说是最流行的语言之一,现在您明白为什么了吧!这个简单但丰富的脚本语言有很多功能。事实上它提供在页面加载之后允许网站访问者与 web 页面交互的强大功能。本文是掌握 JavaScript 基本原理的基础,现在您可以更轻松地理解 JavaScript 库的工作方式,以及如何使用它们简化为您 web 页面编写客户端逻辑的过程。下一步是将这些概念用于实践,以及探索 JavaScript 对象。

参考资料

学习

获得产品和技术

  • 当您对 JavaScript 语言有一个基本了解之后,jQuery 库 是一个很不错的提高开发速度的方法。

讨论

条评论

developerWorks: 登录

标有星(*)号的字段是必填字段。


需要一个 IBM ID?
忘记 IBM ID?


忘记密码?
更改您的密码

单击提交则表示您同意developerWorks 的条款和条件。 查看条款和条件

 


在您首次登录 developerWorks 时,会为您创建一份个人概要。您的个人概要中的信息(您的姓名、国家/地区,以及公司名称)是公开显示的,而且会随着您发布的任何内容一起显示,除非您选择隐藏您的公司名称。您可以随时更新您的 IBM 帐户。

所有提交的信息确保安全。

选择您的昵称



当您初次登录到 developerWorks 时,将会为您创建一份概要信息,您需要指定一个昵称。您的昵称将和您在 developerWorks 发布的内容显示在一起。

昵称长度在 3 至 31 个字符之间。 您的昵称在 developerWorks 社区中必须是唯一的,并且出于隐私保护的原因,不能是您的电子邮件地址。

标有星(*)号的字段是必填字段。

(昵称长度在 3 至 31 个字符之间)

单击提交则表示您同意developerWorks 的条款和条件。 查看条款和条件.

 


所有提交的信息确保安全。


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=10
Zone=Web development
ArticleID=809639
ArticleTitle=开始使用 JavaScript 语言,第 2 部分: 开始使用 JavaScript 语言
publish-date=04112012