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

學習JavaScript編程的第一步：從“Hello, World!”開始

學習任何編程語言，編寫“Hello, World!”程序都是一個傳統且重要的入門步驟。這是一個簡單的程序，它將短語“Hello, World!”輸出到控制台，標誌著你編程之旅的開始。我們將遵循這一傳統，用JavaScript編寫這個程序。它將是一條簡單的語句，把“Hello, World!”打印到控制台。

你需要打開你常用的控制台（Node REPL、瀏覽器控制台或網頁上的ES6控制台）。控制台打開後，只需輸入以下代碼：

<code class="language-javascript">console.log('Hello, World!');</code>

然後按Enter鍵。如果一切順利，你應該會看到輸出“Hello, World!”，類似於下面的截圖。

恭喜你，你剛剛編寫了你的第一個JavaScript程序！它看起來可能微不足道，但正如一位智者所說，每個編程高手之路都始於一行代碼（或者類似的話）。

JavaScript在瀏覽器中的應用

JavaScript是一種解釋型語言，需要宿主環境才能運行。由於其起源，JavaScript主要運行環境是瀏覽器，但它也可以在其他環境中運行；例如，我們剛剛編寫的第一個程序就在Node REPL中運行。 Node還可以用於在服務器上運行JavaScript。但到目前為止，JavaScript最常見的用途仍然是使網頁具有交互性。因此，在我們繼續之前，我們應該了解一下網頁的構成。

網頁的三層結構

幾乎所有網頁都由三個關鍵要素組成——HTML、CSS和JavaScript。 HTML用於標記內容；CSS是表示層；JavaScript則增加了交互性。

每一層都建立在前一層的基礎之上。一個網頁僅僅依靠HTML層就能正常工作——事實上，許多網站會在“裸日”移除CSS層。僅使用HTML層的網站將以其最純粹的形式呈現，看起來非常老式，但仍然應該完全功能齊全。

保持層級分離

將每一層的關注點分開，使每一層只負責一件事情，被廣泛認為是最佳實踐。將它們放在一起會導致非常複雜的頁面，所有代碼混雜在一個文件中，造成“標籤湯”或“代碼意大利面”。這曾經是製作網站的標準方式，並且網上仍然有很多這樣的例子。

非侵入式JavaScript

最初使用JavaScript時，它被設計為直接插入HTML代碼中，如下例所示，當點擊按鈕時將顯示一條消息：

<code class="language-html"><button id="button" href="#" onclick='alert("Hello World")'>Click Me</button></code>

這使得難以看出發生了什麼，因為JavaScript代碼與HTML混雜在一起。這也意味著代碼與HTML緊密耦合，因此HTML的任何更改都需要更改JavaScript代碼才能防止其中斷。

可以通過將其放在它自己的標籤內來將JavaScript代碼與其餘HTML分開。以下代碼將實現與上述相同的結果：

<code class="language-javascript">console.log('Hello, World!');</code>

這樣更好，因為所有JavaScript代碼都位於一個地方，在兩個script標籤之間，而不是與HTML標籤混合在一起。

我們可以更進一步，將JavaScript代碼與HTML和CSS完全分開，放在它自己的文件中。這可以通過在script標籤中使用src屬性來指定要鏈接的文件來實現：

<code class="language-html"><button id="button" href="#" onclick='alert("Hello World")'>Click Me</button></code>

然後將JavaScript代碼放在與HTML文檔相同的目錄中名為main.js的文件中。將JavaScript代碼完全分開的這一概念是非侵入式JavaScript的核心原則之一。

同樣，CSS也應該放在單獨的文件中，因此網頁中唯一的代碼是實際的HTML以及指向CSS和JavaScript文件的鏈接。這通常被認為是最佳實踐，也是本書中將採用的方法。

自閉合標籤

如果您使用過XML或XHTML，您可能遇到過這樣的自閉合標籤：

<code class="language-html"><button id="button">Click Me</button>
</code>

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

優雅降級和漸進增強

優雅降級是構建網站的過程，使其在使用JavaScript的現代瀏覽器中運行效果最佳，但在舊版瀏覽器中或如果JavaScript或其某些功能不可用時，仍然可以以合理的標準運行。這方面的一個例子是高清（HD）廣播的程序——它們在高清電視上運行效果最佳，但在標準電視上仍然可以運行；只是畫面質量會較低。這些程序甚至可以在黑白電視上運行。

漸進增強是從頭開始構建網頁的過程，具有基本的功能級別，然後如果瀏覽器可用，則添加額外的增強功能。如果您遵循三層原則，JavaScript層增強網頁而不是成為頁面不可或缺的要素，那麼這應該感覺很自然。一個例子可能是電話公司提供基本級別的電話呼叫，但如果您的電話支持，則提供呼叫等待和主叫號碼顯示等額外服務。

每當您向網頁添加JavaScript時，都應該始終考慮您想要採取的方法。您是想從許多令人驚嘆的效果開始，突破界限，然後確保對於那些可能沒有最新和最棒瀏覽器的用戶來說體驗會優雅地降級？還是您想從構建可在大多數瀏覽器上運行的功能性網站開始，然後使用JavaScript增強體驗？這兩種方法相似，但細微之處有所不同。

你的第二個JavaScript程序

我們將用一個將在瀏覽器中運行的第二個JavaScript程序結束本章。此示例比前一個示例更複雜，其中包含許多將在後面章節中更詳細介紹的概念，因此如果您在此階段不了解所有內容，請不要擔心！其目的是向您展示JavaScript的功能，並介紹將在即將到來的章節中介紹的一些重要概念。

我們將遵循前面提到的非侵入式JavaScript的實踐，並將我們的JavaScript代碼放在單獨的文件中。首先創建一個名為rainbow的文件夾。在此文件夾中，創建一個名為rainbow.html的文件和另一個名為main.js的文件。

讓我們從HTML開始。打開rainbow.html並輸入以下代碼：

<code class="language-javascript">console.log('Hello, World!');</code>

(剩餘部分與原文類似，只是對語言進行了調整和部分段落合併，保持了原文意思不變。)

不要破壞網絡

JavaScript語言開發中的一個重要概念是它必須向後兼容。也就是說，所有舊代碼在由運行新規範的引擎解釋時必須以相同的方式工作（這有點像說PlayStation 4仍然必須能夠運行為PlayStation 1、2和3創建的遊戲）。這是為了防止JavaScript通過進行會使某些網站上的舊代碼無法在現代瀏覽器中按預期運行的重大更改而“破壞網絡”。

因此，新版本的JavaScript不能做以前版本的語言中不可能做的事情。變化的只是實現特定功能的表示法，以使其更易於編寫。這被稱為語法糖，因為它允許以更簡潔和更簡潔的方式編寫現有的代碼片段。

所有版本的JavaScript都向後兼容這一事實意味著我們可以使用轉譯器將代碼從一個版本的JavaScript轉換為另一個版本。例如，您可以使用最新的JavaScript版本編寫代碼，然後將其轉譯為版本5代碼，該代碼幾乎可以在任何瀏覽器中運行。

每年都有一個新的ECMAScript版本，這意味著在實現最新功能方面，瀏覽器可能總是稍有落後（它們正在更快地做到這一點，但大多數瀏覽器仍然需要兩年時間才能支持ES6模塊）。這意味著如果您想使用最新的編碼技術，您可能最終需要使用轉譯器（例如Babel）。

常見問題解答（FAQ）關於你的第一個JavaScript程序

（此部分內容與原文類似，只是對語言進行了調整，使之更流暢自然。）

以上是你好世界！您的第一個JavaScript程序的詳細內容。更多資訊請關注PHP中文網其他相關文章！