简介与变量

JavaScript 简介

JavaScript 是由 Brendan Eich 于 1995 年创建的一种编程语言，它使网页具备交互功能，是现代 Web 应用不可或缺的一部分。

如果你想了解更多关于这门语言的历史及其名称的由来，建议阅读这篇简短的文章。

如何在 HTML 中插入 JavaScript

如果你曾经打开过 Chrome 开发者工具或类似的调试工具，可能已经见过 JavaScript 是如何被嵌入到 HTML 页面中的。

我们通过使用 script 标签来实现，可以将 JavaScript 代码直接写在标签内部，也可以引用外部文件。

在 script 标签内直接写代码：

1<script type="text/javascript"> [你的脚本内容] </script>

引用外部文件：

1<script src="/home/script.js"></script>

当然，你可以添加任意多个 script 标签，并且可以使用相对路径、绝对路径或完整的 URL，例如：

1<!-- 从项目根目录出发的绝对路径 -->
2<script src="/home/script.js"></script>
3<!-- 相对于当前目录的相对路径 -->
4<script src="script.js"></script>
5<!-- jQuery 库的完整 URL -->
6<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/core.js"></script>

注意： 更好的做法是不要把代码写在 script 标签内部，而是将其保存在独立的文件中。这样浏览器可以缓存该文件，无论多少页面引入它，都只需下载一次。后续加载时会使用缓存版本，从而提升性能。

变量

我们使用变量来存储值，这些值可以是用户名、地址，或是电商网站中的某个商品等。

在 ES6（ES2015）之前，声明变量的方式是：

1var username = "Alberto Montalesi"

现在，我们有了两种新的变量声明方式：

1let username = "Alberto Montalesi"
2const username = "Alberto Montalesi"

我们将在课程后续部分深入探讨这三种关键字的区别，但先简单说明一下。

使用 const 关键字声明的变量，正如其名，是常量，意味着它们不能被重新赋值。

打开你的 Chrome 开发者工具，尝试输入以下代码：

1const age = 26;
2age = 27;
3// Uncaught TypeError: Assignment to constant variable

可以看到，我们无法给常量重新赋值。

而如果使用 let：

1let height = 190;
2height = 189

这次不会报错，let 可以被重新赋值，这一点与旧的 var 关键字类似。

既然 var 和 let 都可以重新赋值，那为什么我们要用 let 而不是 var？这个问题需要更深入地理解 JavaScript 的工作机制，我们将在后面的课程中详细讲解。

很多人对 let 和 const 的最佳实践有不同看法。我的建议是：始终优先使用 const，除非你明确知道将来需要重新赋值。

如果之后发现某个 const 需要重新赋值，只需将其改为 let 即可。我个人习惯默认使用 const，这样一旦不小心试图重新赋值，就会立刻出现错误提示，而不是等到后期调试时才发现误用了变量。

关于变量命名的一些建议

为变量命名有一些必须遵守的规则，不过大多数都很容易记住。

以下命名是不允许的：

1// 变量名不能以数字开头
2let 1apple = "one apple";

1// 变量名不能包含空格、符号或标点符号
2let hello! = "hello!";

还有一些保留字，不能用作变量名或函数名。

为变量命名的基本原则是：尽量做到描述清晰。避免使用缩写、首字母缩写或无意义的名称。

1// 不好
2let cid = 12; // cid 是什么？
3// 好
4let clientID = 12; // 原来是客户 ID
5
6// 不好
7let id = 12; // 是用户 ID？狗 ID？猫 ID？
8// 好
9let userID = 12; // 尽量具体明确

如果希望变量名尽可能具有描述性，通常会使用多个单词。此时最常见的两种命名方式是 camelCase（驼峰命名法）和 snake_case（蛇形命名法）。

1// 不好
2let lastloggedin = ''; // 难以阅读
3// 好
4let lastLoggedIn = ''; // 驼峰命名法
5let last_logged_in = ''; // 蛇形命名法

无论选择 camelCase（首字母小写，后续每个单词首字母大写）还是 snake_case（单词间用下划线连接），请务必保持一致性，并坚持使用同一种风格。