【自學程式】如果網頁是一台小車車？淺談網頁三巨頭：HTML、CSS及JavaScript
許多初學網頁開發的朋友們，一開始都不太理解HTML、CSS、 JavaScript之間的差異性，導致初期規劃學習計畫時毫無頭緒。
會有這樣的困擾，主要在於不了解HTML、CSS、 JavaScript之間的關係，以及這三者在網頁運作時所扮演什麼角色，導致越學越阿雜的狀況。
今天就要跟大家聊聊，什麼是網頁三巨頭？以及初學網頁開發該注意些什麼：
如果網頁是一台小車車⋯⋯
你可以想像現在有一台粉紅色的車，這台車有很多的配件：車窗、引擎、座椅⋯⋯所有你看的到以及看不到的車零件。
賣車的業務會跟你說，這些車子零件組裝的方式及配備規格會影響到它的性能，但座椅、烤漆外觀相關的要素，可以隨意更改。
但身為飆仔的你怎麼可能什麼都不改只改座椅？所以你可會接著改排氣管、改車輪匡，爆改一通後，性能可能變好，可能變差。
而你買了這台車後，開上路後你可以選擇要開去哪，可以開去旅遊、上班，當然也可以停在那邊都不動。
聽到這裡，是不是覺得這台小車車是不是跟什麼東西很像？
沒有錯！其實網頁的運作原理就跟一台車運作的原理很相似：網頁會有他的零件架構，就好比車會有引擎、零件；同樣地，就跟你可以改變車子的烤漆顏色、選擇車尾燈要不要像七彩霓虹燈一樣，我們可以隨意改變網頁的外觀、顏色。
HTML、CSS、 JavaScript
一個成功的網頁，主要由HTML、CSS、 JavaScript三種程式語言所構成。
你可以藉由使用HTML來控制網頁要有幾個欄位，藉由CSS來決定字要多大、什麼顏色，透過JavaScript控制網頁會在你點擊「購買」時，跳出結帳頁面。
我在初學網頁開發時，總會有非常多疑問，像是：「為什麼不能用一種語言解決所有網頁的事？要三個語言來處理？」
又或者是，HTML明明也可以控制「網頁外觀」這件事，我們會什麼不這樣做？
試想看看，如果網頁開發就好比產製一台車，你會把所有的工作都交給一個公司嗎？還是會透過分工合作，分別將任務指派給專精零件、烤漆、電路系統的廠商呢？
我們都在公民課上學過，將工作任務依照比較利益分配給適合的人，最後得出的效益會更高。
網頁的建構開發也是如此，網頁三巨頭，正是構成網頁的主要要素：
HTML專門負責網頁的架構、CSS 負責網頁的外觀，JavaScript則是控制網頁的行為。
透過HTML控制網頁架構、CSS負責外觀，而JavaScript負責網頁行為的方式，程式碼才能有效率的分工、溝通，有效做出一個「效能好」的網站，而效能好的網站才會帶來流量。
網頁的零件結構：HTML
先前提到，HTML就好比是網頁的零件，組裝的好不好，用的零件恰不恰當，會嚴重影響到網頁的SEO（影響到網站被搜尋到的機率）、使用者的瀏覽方便度。
HTML（Hypertext Markup Language）是一種專門用來管理網頁內容的標注語言，透過HTML所建立出來的檔案，會建立出以.html結尾的文件格式，需要透過網頁瀏覽器才可以把它打開。
我們可以透過操作HTML標籤（HTML Tag），來幫網頁新增元素（element），像是新增圖片、段落標題等。
常見的網頁標籤像是：建立標題以h開頭的標籤，依照標題的大小從h1排列至h6，或是用來建立文字段落的p標籤。
另外值得一提的是，我們常見一頁式網站、單欄、雙欄、三欄的網頁樣式，也都需要透過HTML的區塊（div）元素，來做切割與排版，這就好比是幫一台車建立出基本的「型」，要有好的基礎才能跑得快、讓使用者喜歡。
標籤的使用範例如上，我使用了h1標籤建立出一段標題，也使用了p標籤建立出一個字型較小的段落。
通常這些建立文字的標籤會有一個opening tag（起始標籤）及closing tag（結尾標籤），而我們要呈現文字的就會被包裹在標籤中間。
雖然h1與p標籤都是屬於建立文字的標籤，但是預設字體、大小，以及對瀏覽器的功能不同，HTML裡其他的標籤也是用此方式建立出網頁的架構。
那重點來了，如果我不想要標題那麼大怎麼辦？想要改顏色怎麼辦？
外觀交給我：CSS
CSS是專門用來更改HTML檔案樣式的文件格式，可以藉由CSS選擇器（CSS selector）來選擇你要更改的HTML元素，並在該元素裡加上你想要的樣式。
CSS選擇器使用的方式，是在你想要選擇的HTML標籤，去掉外面的後，會變成我們所謂的CSS選擇器，之後加上兩個大括號（curly braces），並在大括號的中間加上CSS屬性（Attribute），並賦予該屬性值（value），就能用來操控網頁呈現的樣式。
像是：h1 { color:red;}。
通常一開始學程式時，上面那一段文字一定非常不好懂，但簡單用車子案例來說就是：車頂{烤漆： 紅色}。
這又是什麼意思呢？
如果網頁是一台小車車，我們可以選擇想改變的區塊，今天我想要車頂跟其他地方的烤漆顏色長得不一樣，所以我跟老闆說：「老闆我的『車頂{烤漆： 紅色}。」老闆就會幫你車頂的烤漆換成紅色。
也會有人說：「我難道不行只跟老闆說，我要『車頂紅色』嗎？」
在這裡要跟大家說明一下：
電腦就跟車行老闆一樣，你不講清楚，他們會聽不懂！搞不好你這樣說，老闆還以為你的車頂的透天窗玻璃弄成紅色的。
所以這個時候我們就需要一套標準化的溝通方式，讓我們與各家車行老闆的認知對齊（對齊開發者與各家瀏覽器的認知），這就是CSS selector。
回到剛剛的案例，我們有兩個文字段落，而一開始的大標題顏色是黑色的，我們覺得不太顯眼，想要把它改成紅色的，這樣怎麼做呢？
我們在h1選擇器後面加上{ }，並在其中加入「color:red; 」，把標題預設的字體顏色改成紅色的，如果要更改其他元素的樣式，也需要用同樣的方式去做更改。
在這裡補充：網頁的程式語法使用規範，是由W3C這個機構制定的，為的就是所有開發者可以用同一套「標準化」的溝通方式與瀏覽器交流，才不會有早期網頁開法語法使用都不一致，導致同一套語法可能不能適用大部分瀏覽器的狀況出現。
網頁的大腦：JavaScript
如果說有一台漂亮到不行的小車車，但它卻發不動，也不能開上路，這像話嗎？
JavaScript是專門為網頁開發而生的程式語言，與HTML跟CSS功能完全不同，如果說HTML是車子的零件架構，CSS是掌管車子的外觀，那JavaScript就是掌管車子往哪開的大腦了。
在剛開始初學網頁開發時，我曾經詢問使用Java開發Android的朋友J：「JavaScript跟Java是親戚嗎？」
朋友J大傻眼說：「Java跟JavaScript的差異就好像car跟carpet一樣。」
當年Java這個程式語言誕生時，紅極一時，於是JavaScript的名字改了又改，最後名字竟然還跟Java長得像兄弟。
但實際上這兩者的關係，就好像car跟carpet這兩個單字一樣，雖然長得很像，但做的事跟意思完全不一樣。
雖然這兩者是完全不一樣的東西，但在JavaScript發展的過程中，借鑒了不少類似C語言的（像是Java）的語法，學習起來倒是有幾分相似。
那麼JavaScript是如何操作網頁這台小車車呢？
相較於HTML及CSS，JavaScript才真正涉及到運算、邏輯判斷，我們會透過DOM（文件物件模型）去選取網頁元素，並進行邏輯判斷，決定網頁的呈現方式。
舉例來說，我希望使用者可以點擊網頁上的按鈕，而不是其他地方，我就可以設置一套邏輯，當點擊到錯誤地方時，就跳出警示訊息。
然而我們要如何知道點錯地方呢？這時候就必須要對HTML元素有很深的了解，才有辦法透過JavaScript開這部網頁小車車。
之後的章節，我們會來解析更多有關HTML元素、標籤的應用！關於網頁技術的問題，歡迎你下方留言跟我討論與交流：）
我是Vivian，我們下次見。
關於我：
2019年從英文系畢業，2021下定決心開啟轉職工程師的新生活，相信不斷學習會有成長的一天。
｜Instagram: Vivian Yeh｜vivian_enlife
｜聯絡我：vivian.enlife@gmail.com
分享至
成為作者繼續創作的動力吧！
作者的相關文章
你可能也想看
- 美股定期定額從國泰世華 CUBE App 輕鬆開始
- 上華蒙特梭利小學在台南是一所獨特且充滿創意的實驗學校，提供從小學到高中完整的教育體系。這所學校自成立以來已有七年 介紹
- 兒童自學程式
- 程式題目練習：我離夢想身高還差多遠｜文組生的自學程式之路｜芽芽的程式之旅
- 程式題目練習：怎麼判斷質數？如何把觀念應用到題目，用程式解決問題？文組生的自學程式之路｜芽芽的程式之旅
- 文組生的自學程式之路：為什麼選擇Java、哪裡有Java教學、怎麼學Java｜芽芽的程式之旅
- 【入門自學程式語言必看】學程式最重要的東西是甚麼?
- 【入門自學程式語言必看】學程式要注意什麼？數學不好也沒關係嗎？
- 【入門自學程式語言必看】如何debug?
- 【入門自學程式語言必看】如何把目標拆分成簡單可執行的元素?
- 【入門自學程式語言必看】如何抱持正確的自學態度?
發表回應
成為會員 後即可發表留言
© 2024 vocus All rights reserved.