JavaScript语言基础：从入门到变量与运算符详解

JavaScript语言概述与嵌入方式

JavaScript 作为互联网上最具影响力的编程语言之一，其受欢迎程度日益提升。它具备跨平台和跨浏览器的兼容性，且并不排斥后端语言的使用。当前存在大量优秀的开发库，它们能显著缩短开发周期。然而，部分库与原生语言之间存在差异，导致初学者容易忽视对语言底层原理的理解。

本文旨在通过全面列举 JavaScript 的基础概念来阐述其核心原理，为初学者提供清晰的语言认知。文中穿插的代码示例旨在直观展示这些概念在实际语言中的应用方式。

JavaScript 是一种免费的客户端脚本语言，允许开发者为超文本标记语言 (HTML) 页面添加交互功能。“客户端”意味着脚本在浏览器中执行，而非服务器端。当网页从服务器传输至浏览器并加载完成后，客户端脚本即可响应用户操作。例如，Google Maps 利用 JavaScript 实现地图的移动、缩放等交互功能。若无 JavaScript，网页需针对每次用户交互进行刷新，除非使用 Adobe Flash 或 Microsoft Silverlight 等插件，而 JavaScript 无需此类插件支持。

由于 JavaScript 能为已加载的网页提供交互功能，开发者常利用它实现以下功能：

1. 动态添加、编辑和删除 HTML 元素及其属性值。

2. 在表单提交前进行数据校验。

3. 在用户计算机上创建 cookies，以便在未来访问时保存和检索数据。

1. 若要在 HTML 文件中嵌入 JavaScript 代码，必须将代码置于 script 标签内部，并指定 type 属性为 text/javascript（见清单1）。

2. 所有 JavaScript 语句必须以分号结尾。

3. 该语言严格区分大小写。

4. 所有变量名必须以字母或下划线开头。

5. 可使用注释说明脚本中的特定行，单行注释以双斜线 (//) 开头，后接注释内容。

6. 也可使用注释来屏蔽脚本。对于多行脚本，推荐的做法是使用 /* 你的脚本在这里 */ 包裹。星号内的脚本在运行过程中不会被执行。

<script type="text/javascript"></script>

若需隐藏浏览器不支持的 JavaScript 代码，或用户希望关闭代码执行，只需在 JavaScript 语句前后添加注释标记即可（见清单2）。

 
<script type="text/javascript">
<!-- 
Example statement here
//--> 
</script>

将 JavaScript 代码嵌入网页的最常用方式，是利用 script 标签中的 src 属性从外部 JavaScript 文件加载代码（见清单3）。

<script type="text/javascript" src="path/to/javascript.js" kesrc="path/to/javascript.js"></script>

外部 JavaScript 文件是包含代码的常见方式，主要原因如下：

1. 若 HTML 页面代码量较少，搜索引擎能更快速地抓取和索引网站。

2. 保持 JavaScript 代码与 HTML 分离，使代码结构更清晰，且最终更易于管理。

3. 由于 HTML 可包含多个 JavaScript 文件，因此可将 JS 文件分散存储在 Web 服务器不同的目录结构中，类似于图像存放方式，这有助于代码管理。清晰、有条理的代码始终是简化网站管理的关键。

变量声明与作用域

变量

变量用于存储数据，这些数据后续可被检索或通过新数据更新。存储在变量中的数据可以是值或表达式，JavaScript 有三种类型的表达式，表1对此进行了描述。

表1. JavaScript表达式

表达式描述

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

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

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

变量分为两种类型：局部变量和全局变量。局部变量需使用 var 关键字声明，而声明全局变量则无需使用 var。使用 var 声明的变量被视为局部的，因为除了声明它的作用域外，它在其他地方无法访问。例如，若在函数内部（文章末尾将讨论函数）声明局部变量，则该变量在函数外部不可访问，使其成为该函数局部的。若未使用 var 声明同一变量，则它在整个脚本中均可访问，不仅限于该函数。

清单4 展示了一个名为 num 的局部变量，其值为 10。

var num = 10;

若要在脚本的其他位置访问 num 变量的值，只需通过名称引用该变量，如清单5所示。

 
document.write("The value of num is: "+ num);

该语句输出结果为“The value of num is: 10”。此 document.write 函数将数据写入网页，在本文剩余部分，您将使用此函数将示例写入网页。

若要将算术表达式存储到变量中，只需将变量赋值为计算结果，如清单6所示。存储在变量中的是计算结果而非算式本身。因此，我们再次得到结果“The value of num is: 10”。

 
var num = (5 + 5);
document.write("The value of num is: "+ num);

若要修改变量的值，通过变量分配的名称引用变量，并使用等号赋予新值（见清单7）。此处的不同之处在于无需使用 var 关键字，因为变量已声明。

 
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）。

 
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 中编写的脚本的简写形式。

 
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 列出了 JavaScript 中所有可用的比较运算符及其描述。

表4. 比较运算符

运算符描述

==等于

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

!=不等于

>大于

<小于

>= 大于或等于

<= 小于或等于

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