你好世界！您的第一个JavaScript程序

学习JavaScript编程的第一步：从“Hello, World!”开始

学习任何编程语言，编写“Hello, World!”程序都是一个传统且重要的入门步骤。这是一个简单的程序，它将短语“Hello, World!”输出到控制台，标志着你编程之旅的开始。我们将遵循这一传统，用JavaScript编写这个程序。它将是一条简单的语句，把“Hello, World!”打印到控制台。

你需要打开你常用的控制台（Node REPL、浏览器控制台或网页上的ES6控制台）。控制台打开后，只需输入以下代码：

console.log('Hello, World!');

然后按Enter键。如果一切顺利，你应该会看到输出“Hello, World!”，类似于下面的截图。

恭喜你，你刚刚编写了你的第一个JavaScript程序！它看起来可能微不足道，但正如一位智者所说，每个编程高手之路都始于一行代码（或者类似的话）。

JavaScript在浏览器中的应用

JavaScript是一种解释型语言，需要宿主环境才能运行。由于其起源，JavaScript主要运行环境是浏览器，但它也可以在其他环境中运行；例如，我们刚刚编写的第一个程序就在Node REPL中运行。Node还可以用于在服务器上运行JavaScript。但到目前为止，JavaScript最常见的用途仍然是使网页具有交互性。因此，在我们继续之前，我们应该了解一下网页的构成。

网页的三层结构

几乎所有网页都由三个关键要素组成——HTML、CSS和JavaScript。HTML用于标记内容；CSS是表示层；JavaScript则增加了交互性。

每一层都建立在前一层的基础之上。一个网页仅仅依靠HTML层就能正常工作——事实上，许多网站会在“裸日”移除CSS层。仅使用HTML层的网站将以其最纯粹的形式呈现，看起来非常老式，但仍然应该完全功能齐全。

保持层级分离

将每一层的关注点分开，使每一层只负责一件事情，被广泛认为是最佳实践。将它们放在一起会导致非常复杂的页面，所有代码混杂在一个文件中，造成“标签汤”或“代码意大利面”。这曾经是制作网站的标准方式，并且网上仍然有很多这样的例子。

非侵入式JavaScript

最初使用JavaScript时，它被设计为直接插入HTML代码中，如下例所示，当点击按钮时将显示一条消息：

<button id='button' href='#' onclick='alert("Hello World")'>Click Me</button>

这使得难以看出发生了什么，因为JavaScript代码与HTML混杂在一起。这也意味着代码与HTML紧密耦合，因此HTML的任何更改都需要更改JavaScript代码才能防止其中断。

可以通过将其放在它自己的标签内来将JavaScript代码与其余HTML分开。以下代码将实现与上述相同的结果：

console.log('Hello, World!');

这样更好，因为所有JavaScript代码都位于一个地方，在两个script标签之间，而不是与HTML标签混合在一起。

我们可以更进一步，将JavaScript代码与HTML和CSS完全分开，放在它自己的文件中。这可以通过在script标签中使用src属性来指定要链接的文件来实现：

<button id='button' href='#' onclick='alert("Hello World")'>Click Me</button>

然后将JavaScript代码放在与HTML文档相同的目录中名为main.js的文件中。将JavaScript代码完全分开的这一概念是非侵入式JavaScript的核心原则之一。

同样，CSS也应该放在单独的文件中，因此网页中唯一的代码是实际的HTML以及指向CSS和JavaScript文件的链接。这通常被认为是最佳实践，也是本书中将采用的方法。

自闭合标签

如果您使用过XML或XHTML，您可能遇到过这样的自闭合标签：

<button id='button'>Click Me</button>
<🎜>

这在HTML5中是不必要的，但它仍然可以工作。

优雅降级和渐进增强

优雅降级是构建网站的过程，使其在使用JavaScript的现代浏览器中运行效果最佳，但在旧版浏览器中或如果JavaScript或其某些功能不可用时，仍然可以以合理的标准运行。这方面的一个例子是高清（HD）广播的程序——它们在高清电视上运行效果最佳，但在标准电视上仍然可以运行；只是画面质量会较低。这些程序甚至可以在黑白电视上运行。

渐进增强是从头开始构建网页的过程，具有基本的功能级别，然后如果浏览器可用，则添加额外的增强功能。如果您遵循三层原则，JavaScript层增强网页而不是成为页面不可或缺的要素，那么这应该感觉很自然。一个例子可能是电话公司提供基本级别的电话呼叫，但如果您的电话支持，则提供呼叫等待和主叫号码显示等额外服务。

每当您向网页添加JavaScript时，都应该始终考虑您想要采取的方法。您是想从许多令人惊叹的效果开始，突破界限，然后确保对于那些可能没有最新和最棒浏览器的用户来说体验会优雅地降级？还是您想从构建可在大多数浏览器上运行的功能性网站开始，然后使用JavaScript增强体验？这两种方法相似，但细微之处有所不同。

你的第二个JavaScript程序

我们将用一个将在浏览器中运行的第二个JavaScript程序结束本章。此示例比前一个示例更复杂，其中包含许多将在后面章节中更详细介绍的概念，因此如果您在此阶段不了解所有内容，请不要担心！其目的是向您展示JavaScript的功能，并介绍将在即将到来的章节中介绍的一些重要概念。

我们将遵循前面提到的非侵入式JavaScript的实践，并将我们的JavaScript代码放在单独的文件中。首先创建一个名为rainbow的文件夹。在此文件夹中，创建一个名为rainbow.html的文件和另一个名为main.js的文件。

让我们从HTML开始。打开rainbow.html并输入以下代码：

console.log('Hello, World!');

(剩余部分与原文类似，只是对语言进行了调整和部分段落合并，保持了原文意思不变。)

不要破坏网络

JavaScript语言开发中的一个重要概念是它必须向后兼容。也就是说，所有旧代码在由运行新规范的引擎解释时必须以相同的方式工作（这有点像说PlayStation 4仍然必须能够运行为PlayStation 1、2和3创建的游戏）。这是为了防止JavaScript通过进行会使某些网站上的旧代码无法在现代浏览器中按预期运行的重大更改而“破坏网络”。

因此，新版本的JavaScript不能做以前版本的语言中不可能做的事情。变化的只是实现特定功能的表示法，以使其更易于编写。这被称为语法糖，因为它允许以更简洁和更简洁的方式编写现有的代码片段。

所有版本的JavaScript都向后兼容这一事实意味着我们可以使用转译器将代码从一个版本的JavaScript转换为另一个版本。例如，您可以使用最新的JavaScript版本编写代码，然后将其转译为版本5代码，该代码几乎可以在任何浏览器中运行。

每年都有一个新的ECMAScript版本，这意味着在实现最新功能方面，浏览器可能总是稍有落后（它们正在更快地做到这一点，但大多数浏览器仍然需要两年时间才能支持ES6模块）。这意味着如果您想使用最新的编码技术，您可能最终需要使用转译器（例如Babel）。

常见问题解答（FAQ）关于你的第一个JavaScript程序

（此部分内容与原文类似，只是对语言进行了调整，使之更流畅自然。）

以上是你好世界！您的第一个JavaScript程序的详细内容。更多信息请关注PHP中文网其他相关文章！