前情提要

「我有問題！」

艾草：「來，請說。」

「JavaScript 到底是什麼？」

艾草：「就程式語言啊！」

「... ？ 這不是在說廢話嗎？」

艾草：「好吧，既然你誠心誠意的發問了。且聽我娓娓道來。」

JavaScript 是什麼？

說到網頁離不開 HTML 、 CSS 、 JavaScript，來介紹它們的差異吧！

HTML

寫 HTML 時，其實跟寫一篇文章差不多，我們會去決定一篇文章的架構，並會去區分文章的標題、段落、列表、圖片等，來表示各個不同的地方。
而在網頁上，我們可以透過 HTML 的不同標籤來達成這個目的。

例如：撰寫 h1 標籤代表標題、撰寫 p 標籤代表段落等。

<h1>標題</h1>

<p>標題</p>

CSS

CSS 可以加入樣式，例如在撰寫文章時，可能會透過不同顏色的筆繪製出各種色系，像小時候會用色鉛筆去為文章與畫作填滿色彩樣式一樣，而 CSS 能設定網頁上的諸多樣式。

例如：字體顏色、字體粗細、字體大小、背景顏色等。

h1 {
  color: red;
  font-weight: 300;
  font-size: 40px;
  background-color: #000;
}

JavaScript

剛剛的案例都是透過文章來做範例，但接下來就要提到網頁與文章很不一樣的地方了，而這正是 JavaScript 帶來的魔法，網頁可以動態與使用者互動，這是靜態的文章很難做到的點，接下來讓我們了解一下 JavaScript 能實現什麼功能吧！

JavaScript 實現功能

實現功能最常見的例子就是「彈跳式視窗」，相信大家對彈跳式視窗都不陌生，尤其是經歷過 Window XP 彈跳式視窗後，應該聽到 「登登～ 」都會有恐懼感吧！

除了彈跳式視窗外在舉幾個很生活化的例子，例如「購物車」：

如果大家有在電商網站上購物過的經驗，一定有經歷過點擊購物車到結帳的流程，這一系列顧客與網頁互動的效果，就是藉由 JavaScript 來實現的！

總結

HTML 、 CSS 、 JavaScript 又被稱為前端三劍客，正是因為它們是網頁上不可或缺的存在，又分別起著不一樣的作用。

• HTML 負責網頁的架構
• CSS 負責網頁的樣式
• JavaScript 負責讓網頁動起來

簡單瞭解前端三劍客的差異後，下一篇文章來學習 JavaScript 的基礎-變數與值吧！

參考文獻

https://developer.mozilla.org/zh-TW/docs/Learn/JavaScript/First_steps/What_is_JavaScript