iT邦幫忙

2021 iThome 鐵人賽

DAY 3
3
Modern Web

JavaScript 魔法入門 - 從入門到中階觀念系列 第 3

入門魔法 - JavaScript 是什麼?

前情提要

「我有問題!」

艾草:「來,請說。」

「JavaScript 到底是什麼?」

艾草:「就程式語言啊!」

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

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

https://ithelp.ithome.com.tw/upload/images/20210917/20139066ffjROKgwy3.png


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


上一篇
新增裝備 - VSCode 套件介紹
下一篇
入門魔法 - 變數與值
系列文
JavaScript 魔法入門 - 從入門到中階觀念30

尚未有邦友留言

立即登入留言