大家好，我是 31 歲的小米，一個每天都被技術“精神按摩”的程序員。你要問我為什麼？大概是因為，每次接觸技術，我都能像拆開盲盒一樣，發現裏面的驚喜和坑點並存，讓我每天都能深刻感受到：生活不易，但寫代碼真香。

今天，我想跟你講一個關於 JavaScript 的故事。不，是“一次前端世界奇妙旅行”的故事。

我第一次遇見 JavaScript，是在一個深夜的 debug 現場

事情發生在很久很久以前，那晚我獨自加班，辦公室只剩下我和空調的嗡嗡聲。我盯着一個“不聽話的按鈕”發呆——明明點得很用力，它就是不響應。那一刻我懷疑人生：

• 是按鈕壞了嗎？
• 是頁面卡了嗎？
• 還是…我電腦被隔壁部門的同事下了詛咒？

就在我開始胡思亂想時，一個前端大佬悠悠走來，喝着奶茶，用一種“凡爾賽般輕柔”的語氣説：

“加個 JavaScript 就好了。”

JavaScript。就這三個字，像一個新的世界入口，把我從黑暗 debug 的深淵裏，拽向了一條奇怪但迷人的道路。

於是我開始查資料、翻教程、瘋狂敲 demo，然後我驚訝地發現：

原來網頁裏的互動、動畫、數據更新、各種動來動去的小玩意兒，都是 JavaScript 在背後操控！

那天之後，我對 JavaScript 的感覺，就像乘上了小火車，突然闖進了一個色彩絢麗的技術樂園。

JavaScript 到底是什麼？一個前端世界最活潑的靈魂角色

如果你問我 JavaScript 是什麼，我會這樣形容：

它是網頁世界的小精靈，負責讓整個頁面動起來。

沒有它，網頁就是一張靜態海報；

有了它，你能點按鈕、展開菜單、輸入表單、看到動態效果、聽到交互聲音……

JavaScript 的出現，讓網頁從“紙片人”變成了“會走路的 NPC”。它是一門運行在瀏覽器裏的腳本語言，它能做的事情包括但不限於：

• 監聽用户事件，例如點擊、滑動、輸入；
• 修改網頁內容和樣式；
• 實現網頁交互效果；
• 與服務器通信（例如 AJAX、fetch）；
• 實現動畫、渲染 UI、處理數據；
• 打造整個應用（例如 Vue、React 都是 JavaScript 的孩子）。

你甚至可以用 JavaScript 寫後端（Node.js）、寫桌面程序（Electron）、寫小程序、寫遊戲、寫腳本工具……

就像一個萬能膠，哪兒都能粘一口。所以，我腦海中常常出現這樣一個場景：

HTML 是網頁的骨骼CSS 是網頁的衣服和妝容JavaScript 則是網頁的靈魂、情緒、性格和行動力

它們組成了現代 Web 的“三件套”，缺一不可。

ECMAScript：JavaScript 背後那套“法律與憲章”

我曾經特別困惑：為什麼教程裏不斷提到 ECMAScript？難道 JavaScript 還有親兄弟？

後來我才明白，ECMAScript 不是語言，是標準。就像 JavaScript 的“憲法”。JavaScript 只是 ECMAScript 的一種實現。你可以把 ECMAScript 理解為“規則”，而 JavaScript 是“規則的執行者”。

舉個生活中的例子：

• ECMAScript 是法律
• JavaScript 是按照法律執業的律師
• 你這個前端開發者，是一名在各種 bug 中掙扎的普通老百姓

每一版 ECMAScript 都會更新一些 JavaScript 新能力，比如：

• ES5（歷史經典版）
• ES6（又叫 ES2015，改變 JavaScript 命運的一代）
• ES7、ES8、ES9……每一年都更新

比如你現在經常看到的：

• let、const
• 箭頭函數
• Promise
• async/await
• class
• 解構賦值、展開運算符
• 模塊化 import/export

這些全都是 ECMAScript 標準裏定義出來的。所以，如果把 JavaScript 比成一個不斷升級的戰士，那 ECMAScript 就是給它不斷頒佈新技能、新武器的新版本規則書。

每年都會變強一點

每年都會變帥一點

每年都會變複雜一點（對，我們開發者都懂這種痛苦）

DOM：JavaScript 與網頁之間的“秘密通道”

當我第一次理解 DOM 的時候，我感覺像我終於學會了偷看網頁的“內部構造圖”。

DOM，全稱 Document Object Model。聽起來很嚴肅，但其實它的作用很簡單：

它把網頁的結構（HTML）變成一棵“可以用 JavaScript 操作的樹”。

你點一下一個按鈕，JavaScript 想知道哪個按鈕被點了，這時候 DOM 就會出來説：

“我來，我來！這個按鈕就是我家第 3 層第 2 個兒子，我幫你找到。”

DOM 就像一箇中間人，讓 JavaScript 可以做到：

• 修改文本內容（innerText）
• 修改樣式（style）
• 增加節點（appendChild）
• 刪除節點（remove）
• 監聽事件（addEventListener）

簡單來説：

DOM 就是網頁世界的“骨肉通道”，讓 JavaScript 能改寫頁面、操縱頁面、重繪頁面。

如果沒有 DOM，JavaScript 就像有魔法卻施展不出來的巫師。它能唸咒語，但不能動人蔘果。

BOM：瀏覽器世界的“大總管”

如果説 DOM 是“管網頁內容的管家”，那 BOM（Browser Object Model）就是“整個瀏覽器的總管”。

BOM 讓你用 JavaScript 控制瀏覽器外的元素，比如：

• 瀏覽器窗口（window）
• 地址欄（location）
• 歷史記錄（history）
• 本地存儲（localStorage、sessionStorage）
• navigator（瀏覽器信息）

我第一次知道 window.alert() 是 BOM 的時候，驚訝地以為：

“原來我能操控的不止是頁面，還有整個瀏覽器！！”

BOM 就像瀏覽器的遙控器，讓 JavaScript 具備更強大的“系統級能力”。比如：

導航跳轉？location.href = ‘…’

前進後退？history.back()

存點用户數據？localStorage.setItem()

你甚至能檢測瀏覽器類型、屏幕信息、網絡狀態！

某種意義上，DOM 讓 JavaScript 能操控頁面；BOM 讓 JavaScript 能操控瀏覽器；這兩者加起來，JavaScript 就成了“網頁世界的全能王者”。

JavaScript 在今天，是一種跨宇宙的存在

當我告訴很多剛入行的朋友：

“JavaScript 不只是寫網頁的語言，你甚至能用它寫服務器、桌面應用、遊戲。”

他們的表情就像第一次吃到麻辣火鍋一樣複雜：

“真的假的？這居然也能用 JS 寫？！”

我很理解這種震驚，因為 JavaScript 的發展太快、太強了。

Node.js 讓 JavaScript 跑進後端；

Electron 讓 JavaScript 寫桌面應用；

React Native 讓 JavaScript 寫手機 App；

小程序更是把 JavaScript 推到了更多領域。

所以我經常説：

學 JavaScript，不是在學一門語言，而是在解鎖整個科技世界的門。

它就像一個萬能鑰匙，你能用它打開各種不同的技術房間，它永遠不會過時，永遠會進化，永遠能讓你感受到技術的魅力。

總結：為什麼我願意一遍又一遍分享 JavaScript？

• 因為我走過的每一步困惑、迷茫、卡殼、興奮，都真實發生過；
• 因為在學習前端的路上，我曾被一個又一個概念搞得懷疑人生；
• 也因為我知道，只要你理解了 JavaScript、ECMAScript、DOM、BOM，你就真正入門了前端世界。

而這四樣東西，就像你第一次進入一個全新宇宙時的“基礎法則”。掌握它們，你就能：

• 看懂網頁的運作邏輯
• 寫出會動的頁面
• 構建自己的應用
• 擁抱一個超級巨大、超級熱鬧的技術生態

最重要的是：

你會發現，JavaScript 真的是一個有靈魂、有温度、有趣得不像話的語言。

END

我是小米，一個喜歡分享技術的31歲程序員。如果你喜歡我的文章，歡迎關注我的微信公眾號“軟件求生”，獲取更多技術乾貨！

我們下期再見~