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