iT邦幫忙

2021 iThome 鐵人賽

DAY 4
0
Modern Web

你阿嬤成為網頁前端工程師的第一步系列 第 4

[Day 4] 阿嬤都看得懂的 CSS, JavaScript 在幹嘛

阿嬤都看得懂的 CSS, JavaScript 在幹嘛

那麼,我們要怎麼看 CSS 扮演的角色呢?

許多時候,我們的 CSS 會放在 <head> 這個 HTML 標籤中。剛好,Apple 這個網頁的主要 CSS 就是放在 head 當中。所以,想看這個網站中 CSS 的影響,就刪除 <head> 這個 HTML 標籤就可以囉!(甜笑)

那麼,就讓我們 剝光 我是說,洗淨蘋果這位美人的鉛華:

找到 <head> 這個 HTML 標籤 (會在整份 HTML 的頂部),並且按照前面描述過的方式刪除。我們就會看見網頁素顏的樣子囉!

到這邊,我們已經介紹了 HTML 與 CSS 這兩個前端工程師告訴瀏覽器怎麼渲染出網頁的語言了:

  • HTML 標籤用來告訴瀏覽器,網頁裡哪些元素
  • CSS 用來告訴瀏覽器,這些元素的樣式

那麼,使用 HTML 和 CSS,我們就已經可以製作出精美網頁了對嗎?

對的--前提是,這個網頁完全不會和使用網頁的人互動。注意,我這裡說的「互動」,是指在同個網頁中,使用者做了某些動作後,網頁也會相應發生改變。那麼,怎麼樣算是「同個網頁」呢?仔細觀察網址列,假使網址列中的網址都沒有變化,我們就算是「同個網頁」。

反過來說,當我們點選了某個按鈕,或某段文字,結果網址列中的網址改變了,所以整個網頁也跟著改變,這樣並不算是在同個網頁中發生的改變,也就不算這個網頁有和使用網頁的人產生互動喔!

如果某個網頁並未和使用網頁的人產生互動,我們把這種網頁稱作「靜態網頁」,指需要 HTML 和 CSS 就可以製作出來;畢竟,只要告訴瀏覽器網頁有哪些元素,這些元素又長怎樣,靜態網頁的任務就完成了。

你會說,這樣很好啊!我們怎麼會需要網頁和使用者互動呢?難道網頁還會和使用者聊天交朋友嗎?

回答這個問題之前,先讓我們回到剛剛被剝光的蘋果網頁:

有沒有發現素顏的蘋果網頁長得有點奇怪?底下那個「快速連結」啦、「尋找直營店」啦、「Apple 直營店線上選購」、「配件」這些元素,都沒在原本的網頁上出現啊!

不,其實那些元素早就出現了,只是我們暫且看不見而已。讓我們重新整理,幫蘋果網頁重新恢復存在 CSS 的樣貌。然後,點選頁面右上角的放大鏡:

有沒有發現這些元素出現了!

但是網址列中的網址都完全沒有改變喔!因此,我們剛剛和蘋果網頁這位美人產生了一次互動喔!是不是令人臉紅心跳呢!

那麼,這樣的互動是怎麼產生的呢?讓我們稍微揣測看看。現在的線索有:

  1. 這些元素原本就存在於網頁上;不過,
  2. 我們原本看不見這些元素;直到
  3. 我們按下放大鏡按鈕後,我們才看見這些元素。

阿嬤們都去玩過遊樂園的鬼屋嗎?如果擔心煞到,可以叫乖孫去再告訴我們就好。在鬼屋當中假扮幽靈的工作人員,原本就存在那個角落,只是因為某些障眼法,我們看不見那些工作人員。直到我們走過了某個轉角,或者碰觸了某項道具,那些工作人員才按照設定好的腳本,消除那些障眼法,讓他們從看不見的狀態,突然變成看得見了。

在蘋果網頁的互動中,前端工程師也使用了類似的策略。

  1. 這些元素原本就存在於網頁上

這句話的意思,其實就是

  1. 在網頁上這些元素;

前端工程師怎麼跟瀏覽器說這些元素呢?很好,就是使用 HTML 標籤。而

  1. 我們原本看不見這些元素

這句話的意思,其實就是

  1. 這些元素長得像這樣--處於看不見的狀態;

聰明的阿嬤們可以想到,這就是前端工程師使用 CSS 告訴瀏覽器的事情囉~接著前端工程師使用設定好的腳本,讓這些元素在

  1. 我們按下放大鏡按鈕後,我們才看見這些元素。

也就是說,

  1. 我們按下放大鏡按鈕後,這些元素長得像這樣了--處於看得見的狀態;。

這表示,在前端工程師設定好的腳本中,只要使用者按下放大鏡按鈕,這些元素的 CSS 就被改變了。當然,我們有些方法,可以使用 CSS 設定這些 CSS 的改變方式,但是相對來說比較侷限。這些互動,通常都還是必須依賴 JavaScipt 進行,尤其如果這些互動牽涉到一些網頁內容相關的運算,例如數字計算啦、規劃路線等等。

而這個我反覆提到,前端工程師給予瀏覽器的設定好的腳本,就是使用 JavaScript 這個語言來做溝通的喔!只有透過這個設定好的腳本,網頁才可能和使用者產生互動,這都是 JavaScript 的功勞喔!

最後,就讓我們稍微統整這 3 個語言的主要功能吧:

  • HTML 標籤用來告訴瀏覽器,網頁裡哪些元素
  • CSS 用來告訴瀏覽器,這些元素的樣式
  • JavaScript 用來告訴瀏覽器,在使用者做出某些行為後,這些元素如何改變。

小作業:打開臉書,我們來幫乖孫的貼文點讚!在點讚的時候,你覺得 HTML、CSS、JavaScript 各自的功能是什麼呢?


上一篇
[Day 3] 阿嬤都看得懂的 HTML 在幹嘛
下一篇
[Day 5] 阿嬤都看得懂的 HTML 標籤怎麼寫
系列文
你阿嬤成為網頁前端工程師的第一步30

尚未有邦友留言

立即登入留言