JavaScript 语言正越来越受欢迎，可以说是是互联网上最突出的语言之一。你可以跨平台和浏览器使用它，其并不排斥后端语言。现在有许多不同的开发库——有些非常棒—— 这些库对开发很有帮助，比如说加快了开发的时间等等。问题是，有时候这些库与原始语言之间很是有一些距离，这使得刚入门的开发者缺乏一种对语言的基础了解。

本文通过全面列举基础的JavaScript概念这一方式来阐述该语言的基本原理，以此来为初学者提供一个对语言的基本了解，随处可见的代码例子则是用来说明所有的这些概念是如何在语言中体现出来的。

了解JavaScript语言

JavaScript语言是一种免费的客户端脚本语言，其能够让你往超文本标记语言(Hypertext Markup Language，HTML)页面中加入交互行为。客户端(client-side)意味着JavaScript运行在浏览器中，而不是用在服务器端。在网页被服务器送达并被浏览器加载后，客户端脚本就允许用户与网页进行交互。例如，Google Maps就是使用JavaScript语言来支持用户与地图之间的交互的，交互的方式有移动地图、放大和缩小等。没有JavaScript语言的话，网页需要为每次和每个用户的交互行为进行刷新，当然，除非页面用到了诸如Adobe Flash或是Microsoft® Silverlight一类的插件。JavaScript语言不需要插件。

因为JavaScript语言为加载后的网页提供用户交互行为，因此开发者通常会用它来实现下面的一些功能：

1. 动态添加、编辑和删除HTML元素及它们的值。

2. 在提交之前校验表单。

3. 在用户的计算机上创建cookies以用于在将来的访问中保存和检索数据。

在开始之前，只要知道语言的几个基本原则就行了：

1. 要在HTML文件中把JavaScript代码包含进来的话，你必须要把代码放在脚本标签(script)的内部，并加入text/javascript这一类型(type)属性(清单1)。

2. 所有的JavaScript语句以分号结束。

3. 语言是大小写敏感的。

4. 所有的变量名都必须以字母或是下划线作为开始。

5. 你可以使用注释来说明脚本中的某些行，注释的编写方式是，以一个双斜线(//)为开始，后面跟着注释。

6. 你还可以使用注释来把脚本注释掉。要注释脚本的多行的话，一种好的做法是使用/* 你的脚本在这里 */。任何位于星号之内的脚本在执行过程中都不会运行。

清单1.需要使用script标签和type属性来把JavaScript代码包含到HTML文件中来

<script type="text/javascript"></script>
要隐藏浏览器不支持的JavaScript的代码，或是用户想把代码关掉的话，只要在JavaScrip语句的前后使用注释标签就可以了(清单2)。

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

最常用的把JavaScript代码包含到网页中的方式是，使用脚本(script)标签中的src属性来把代码从一个外部的JavaScript文件中加载进来(清单3)。

清单3. 在HTML文件中包含外部的JavaScript文件
<script type="text/javascript" src="/UploadFiles/2021-04-02/javascript.js">外部JavaScript文件是最常见的包含JavaScript代码的方式，这是有一些很实在的原因的：

1. 如果你的HTML页面中有着更少的代码的话，搜索引擎就能够以更快的速度来抓取和索引你的网站。

2. 保持JavaScript代码和HTML的分离，这样代码显得更清晰，且最终更易于管理。

3. 因为可以在HTML代码中包含进多个JavaScript文件，因此你可以把JavaScript文件分开放在web服务器上不同的文件目录结构中，这类似于图像的存放方式，这是一种更容易管理代码的做法。清晰、有条理的代码始终是让网站管理变得容易起来的关键。

变量

变量存储数据，这些数据稍后要被检索的或是要使用新的数据来更新。存储在变量中的数据可以是一个值或表达式，JavaScript语言有三种类型的表达式，表1对此做了描述。

表1. JavaScript表达式

表达式描述

算术　计算的结果为一个数值

字符串计算的结果为一个字符串

逻辑　计算的结果为一个布尔值(true或者false)

变量有两种类型：局部的和全局的。局部变量使用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函数把数据写到网页中，在本文余下的部分中你都是使用这一函数来把例子写到网页中。

要把算术表达式存储到变量中的话，你只要把变量指配给计算的值就可以了，如清单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);

// 把num的值更新成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语言中有四种运算符。

1. 算术

2. 赋值

3. 比较

4. 逻辑

算术运算符

算术运算符执行基本的数学运算，比如说加减乘除等。表2列出并描述了JavaScript语言中的所有可用的算术运算。

表2. 算术运算符

运算符描述

+ 加法

- 减法

* 乘法

/ 除法

% 取模(找出余数)

++　 递增

--递减
赋值运算符

算术运算符执行基本的数学运算，而赋值运算符则是把值赋给JavaScript变量。当你在前面一节中把值赋给变量时，你已经见到了最常用的赋值运算符。表3列出并描述了JavaScript语言中所有可用的赋值运算符。

表3. 赋值运算符

运算符描述

=等于

+=把加法值(变量加上值的结果值)赋给变量

-=把减法值(变量减去值的结果值)赋给变量

*=把乘法值(变量乘上值的结果值)赋给变量

/=把除法值(变量除以值的结果值)赋给变量

%=把取模值(变量对值取模的结果)赋给变量

你已经看到了如何使用等号来把值或是表达式赋给变量，但现在我会给展示如何使用一个令人稍加困惑的赋值运算符。把一个加法值赋给一个变量可能是一个很奇怪的概念，但实际上很简单(清单8)。

清单8. 把一个加法值赋给一个变量
复制代码 代码如下:
var num = 10;
document.write("The value of num is: "+ num);

// 把num的值更新为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);

// 把num的值更新为15
num = (num + 5);
document.write("The new value of num is: "+ num);

比较运算符

比较运算符确定变量或是它们的值之间的关系。你在条件语句中使用比较运算符，通过比较变量或是它们的值来计算出语句为true还是为false，以此创建逻辑。表4列出并描述了JavaScrpit语言中所有可用的比较运算符。

表4. 比较运算符

运算符描述

==等于

===　全等，用于值和对象类型

!=不等于

>大于

<小于

>=　大于或等于

<=　小于或等于

在编写任何类型的逻辑时，变量和值的比较都是最基本的。清单10中的例子展示了如何使用等于这一比较运算符(==)来确定10是否等于1。

12下一页阅读全文