Day1:什麼是Java Script？如何使用？

17th鐵人賽

elle0808

2025-09-15 18:08:06

25 瀏覽

分享至

什麼是Java Script？

Java Script作為目前最主要的網頁程式語言到底有什麼功用呢？
它能做動畫、互動、按鈕反應、表單檢查......在網頁上看到的互動功能幾乎都源自於java script！
它同時也是世界上使用最廣的程式語言之一，學好 JS 不只可以寫前端，還能用在後端，甚至小工具自動化。

網頁程式語言有三大支柱，HTML、CSS和Java Script。
HTML就像房子的骨架一樣負責網頁的結構，而CSS負責樣式，就像房子的裝潢，Java Script則是控制行為，為房子接通水電，才能讓房子成為一個溫馨的家！

Java Script的發展史

JavaScript 原本只是為了讓網頁「動起來」的小工具，起初它的功能很有限，只能在瀏覽器裡做些簡單互動。直到 2005 年，Gmail、Google Maps 等服務用 Ajax 技術打造出「不用重整頁面就能更新內容」的體驗，才讓大家發覺，原來JavaScript 不只是小腳本，還能支撐完整的應用程式，jQuery 等函式庫也因此大紅。
2009 年 Node.js 誕生，讓 JavaScript 跳出瀏覽器、能跑在伺服器端，前後端都能用同一種語言寫程式，開啟了「全端時代」。2015 年 ES6（ECMAScript 2015）釋出，語法大升級：let/const、箭頭函式、class、Promise、模組化……JS 變得現代、模組化，也能支撐大型專案。

近十年來，React、Vue、Angular 等框架相繼成熟，TypeScript 也在 JS 上加上型別保護，生態圈爆炸性成長。現在的 JS 不只是在瀏覽器裡跑，它還能寫桌面應用（VS Code、Slack）、手機 App（React Native）、甚至物聯網裝置。可以說，只要有網路、有螢幕的地方，就有 JavaScript 的身影。

如何在網頁程式中使用Java Script？

在網頁中要引用Java Script有兩種方式一種是直接在直接寫在標籤裡，或把程式碼分離到外部檔案再引入，為了讓程式碼更好維護，大部分都是用後者的方式引入。

1.直接使用標籤寫在HTML檔案裡

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>我的第一個 JS 範例</title>
</head>
<body>
  <h1>Hello</h1>

  <script>
    // 這裡直接寫 JavaScript 程式碼
    alert('Hello JavaScript!');
  </script>
</body>
</html>

2.引入外部檔案

先建立一個 script.js 檔案：

alert('Hello JavaScript!');

再在 HTML 裡用 src 屬性引入：

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
  <meta charset="UTF-8">
  <title>我的第一個 JS 範例</title>
</head>
<body>
  <h1>Hello</h1>

  <script src="script.js"></script>
</body>
</html>

就完成啦！

一般來說，標籤會放在body的最後面，這是因為瀏覽器讀取的時候是由上到下的，有的時候放在最前面有可能會失效，或是導致網頁內容讀取較慢喔。