Day3｜與JavaScript初次相遇

2025 iThome 鐵人賽

DAY 3

Modern Web

程式小白的 30 天轉職挑戰系列第 3 篇

17th鐵人賽 html css javascript

團隊好想工作室 v 9.0

2025-09-17 12:09:08

25 瀏覽

分享至

JavaScript是什麼

JavaScript 的誕生，其實有點戲劇化。

為了輔助Java的存在,
Brendan Eich在當年網景公司(Netscape)時間緊迫的情況下,
花了短短十天打造出第一個版本 - Mocha的prototype。
在語法設計上,JavaScript參考了C、AWK、Scheme以及Self等程式語言。

雖然起初只是個「臨時拼湊」的語言，但如今它已經是現代網頁不可或缺的靈魂。

讓網頁「活起來」的程式語言

JavaScript的設計初衷,就是讓靜態的HTML網頁「動起來」。
這類程式通常被稱為腳本(script)。

幾個關鍵特色：

直接寫在HTML裡：加載頁面時自動運行。
VanillaJavaScript：指「純JavaScript」,不依賴額外的library或框架。
功能強大：隨著標準更新,越來越多網站選擇使用原生JavaScript。

JavaScript 引擎與瀏覽器支援

每個瀏覽器都有自己的JS引擎,負責讀取並執行JavaScript程式碼：

Chrome->V8
Firefox->SpiderMonkey
Safari->JavaScriptCore(又稱Nitro)
Edge->早期是Chakra,後來也轉向V8

如果要確認某個功能在不同瀏覽器是否支援,可參考=>Can I use

為什麼`<script>`放在頁面底部？

許多網站訪客進來後,可能只停留幾秒鐘。

為了讓他們先看到主要內容(文字與圖片),我們通常會：

先讓瀏覽器可以加載HTML、CSS
再慢慢解析JavaScript

這樣用戶無需等待JavaScript完全跑完，就能馬上看到網頁主要資訊。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>我是程式小白</title>
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
        <h1>Hello,JavaScript </h1>

    <!-- 將 JS 放在這裡 -->
    <script>
        console.log("Hello,JavaScript");
    </script>
  </body>
</html>

如上<script>被放在<body>的最下方。
讓頁面先完成渲染，再來執行JavaScript。