編寫你的第一段 JavaScript 代碼
JavaScript 是一種充滿驚喜的編程語言。許多人第一次遇到 JavaScript 時，它通常是作為一種 Web 語言出現的。所有主流瀏覽器都有一個 JavaScript 引擎；并且，還有一些流行的框架，如 JQuery、Cash 和 Bootstrap 等，它們可以幫助簡化網頁設計；甚至還有用 JavaScript 編寫的編程環境。它似乎在互聯網上無處不在，但事實證明，它對于 ??Electron?? 等項目來說也是一種有用的語言。Electron 是一個構建跨平臺桌面應用程序的開源工具包，它使用的語言就是 JavaScript。
JavaScript 語言的用途多到令人驚訝，它擁有各種各樣的庫，而不僅僅是用于制作網站。它的基礎知識十分容易掌握，因此，它可以作為一個起點，助你跨出構建你想象中的東西的第一步。
安裝 JavaScript
隨著你的 JavaScript 水平不斷提高，你可能會發現自己需要高級的 JavaScript 庫和運行時環境。不過，剛開始學習的時候，你是根本不需要安裝 JavaScript 環境的。因為所有主流的 Web 瀏覽器都包含一個 JavaScript 引擎來運行代碼。你可以使用自己喜歡的文本編輯器編寫 JavaScript，將其加載到 Web 瀏覽器中，接著你就能看到代碼的作用。
上手 JavaScript
要編寫你的第一個 JavaScript 代碼，請打開你喜歡的文本編輯器，例如 Atom 或 VSCode 等。因為它是為 Web 開發的，所以 JavaScript 可以很好地與 HTML 配合使用。因此，我們先來嘗試一些基本的 HTML：
保存這個文件，然后在 Web 瀏覽器中打開它。
瀏覽器中顯示的 HTML
要將 JavaScript 添加到這個簡單的 HTML 頁面，你可以創建一個 JavaScript 文件并在頁面的 ??<head>?? 中引用它，或者只需使用 ??<script>?? 標記將 JavaScript 代碼嵌入 HTML 中。在這個例子中，我嵌入了下面的代碼：
在瀏覽器中重新加載頁面。
在瀏覽器中顯示帶有 JavaScript 的 HTML
如你所見，??<p>?? 標簽仍然包含字符串 ??"Nothing here"??，但是當它被渲染時，JavaScript 會改變它，使其包含 ??"Hello world"??。是的，JavaScript 具有重建??（或只是幫助構建）網頁的能力。
這個簡單腳本中的 JavaScript 做了兩件事。首先，它創建一個名為 ??myvariable?? 的變量，并將字符串 ??"Hello world!"?? 放置其中。然后，它會在當前文檔（瀏覽器呈現的網頁）中搜索 ID 為 ??example?? 的所有 HTML 元素。當它找到 ??example?? 時，它使用了 ??innerHTML?? 函數將 HTML 元素的內容替換為 ??myvariable?? 的內容。
當然，我們也可以不用自定義變量。因為，使用動態創建的內容來填充 HTML 元素也是容易的。例如，你可以使用當前時間戳來填充它：
重新加載頁面，你就可以看到在呈現頁面時生成的時間戳。再重新加載幾次，你可以觀察到秒數會不斷增加。
JavaScript 語法
在編程中，語法syntax 指的是如何編寫句子（或“行”）的規則。在 JavaScript 中，每行代碼必須以分號（??;??）結尾，以便運行代碼的 JavaScript 引擎知道何時停止閱讀。（LCTT 譯注：從實用角度看，此處的“必須”其實是不正確的，大多數 JS 引擎都支持不加分號。Vue.js 的作者尤雨溪認為“沒有應該不應該，只有你自己喜歡不喜歡”，他同時表示，“Vue.js 的代碼全部不帶分號”。詳情可以查看他在知乎上對于此問題的 ??回答??。）
單詞（或 字符串strings）必須用引號（??"??）括起來，而數字（或 整數integers）則不用。
幾乎所有其他東西都是 JavaScript 語言的約定，例如變量、數組、條件語句、對象、函數等等。
在 JavaScript 中創建變量
變量是數據的容器。你可以將變量視為一個盒子，你在其中放置數據，以便與程序的其他部分共享它。要在 JavaScript 中創建變量，你可以選用關鍵字 ??let?? 和 ??var?? 中的一個，請根據你打算如何使用變量來選擇：??var?? 關鍵字用于創建一個供整個程序使用的變量，而 ??let?? 只為特定目的創建變量，通常在函數或循環的內部使用。（LCTT 譯注：還有 ??const?? 關鍵字，它用于創建一個常量。）
JavaScript 內置的 ??typeof?? 函數可以幫助你識別變量包含的數據的類型。使用第一個示例，你可以修改顯示文本，來顯示 ??myvariable?? 包含的數據的類型：
接著，你就會發現 Web 瀏覽器中顯示出 “string” 字樣，因為該變量包含的數據是 ??"Hello world!"??。在 ??myvariable?? 中存儲不同類型的數據（例如整數），瀏覽器就會把不同的數據類型打印到示例網頁上。嘗試將 ??myvariable?? 的內容更改為你喜歡的數字，然后重新加載頁面。
在 JavaScript 中創建函數
編程中的函數是獨立的數據處理器。正是它們使編程得以 模塊化。因為函數的存在，程序員可以編寫通用庫，例如，調整圖像大小或統計時間花費的庫，以供其他和你一樣的程序員在他們的代碼中使用。
要創建一個函數，你可以為函數提供一個自定義名稱，后面跟著用大括號括起來的、任意數量的代碼。
下面是一個簡單的網頁，其中包含了一個剪裁過的圖像，還有一個分析圖像并返回真實圖像尺寸的按鈕。在這個示例代碼中，??<button>?? 這個 HTML 元素使用了 JavaScript 的內置函數 ??onclick?? 來檢測用戶交互，它會觸發一個名為 ??get_size?? 的自定義函數。具體代碼如下：
保存這個文件，并將其加載到 Web 瀏覽器中以嘗試這段代碼。
自定義的 get_size 函數返回了圖像尺寸
使用 JavaScript 的跨平臺應用程序
你可以從代碼示例中看到，JavaScript 和 HTML 緊密協作，從而創建了有凝聚力的用戶體驗。這是 JavaScript
的一大優勢。當你使用 JavaScript 編寫代碼時，你繼承了現代計算中最常見的用戶界面之一，而它與平臺無關，那就是 Web
瀏覽器。你的代碼本質上是跨平臺的，因此你的應用程序，無論是簡單的圖像大小分析器還是復雜的圖像編輯器、視頻游戲，或者你夢想的任何其他東西，都可以被所有人使用，無論是通過
Web 瀏覽器，還是桌面（如果你同時提供了一個 Electron 應用）。
學習 JavaScript 既簡單又有趣。網絡上有很多網站提供了相關教程，還有超過一百萬個 JavaScript 庫可幫助你與設備、外圍設備、物聯網、服務器、文件系統等進行交互。在你學習的過程中，請將我們的 ??JavaScript 備忘單?? 放在身邊，以便記住語法和結構的細節。
