iT邦幫忙

5

[鼠年全馬鐵人挑戰] Week02 - 超新手小知識:HTML、CSS、JavaScript的關連性

Hi~大家 我們又見面啦:)
上星期那篇文章出乎我的意料的有很多人關注真的嚇歪我啦XDDD
謝謝大家對於我這個剛碰程式的新手小嫩嫩那麼大的支持呀~
讓我有更多的動力去寫文
真的是很謝謝大家:)

好der~
前言結束開始切入正題
很多新手在剛接觸前端程式的時候會有些疑問

「我知道新手要先學HTML、CSS 可是那是什麼啊?」

「HTML、CSS差別在哪呢?」

「為什麼還要學JavaScript呢?這又跟HTML、CSS有什麼關係呀?」

一剛開始我也有這些疑問,我知道這些是網頁組成的基本原素,但一直不知道這三者的差別
在這裡,我用我理解到的來解釋,希望可以給剛接觸到前端程式的超新手一點幫助:)

HTML

HTML就是網頁的基本架構,一個網頁的最初始架構。
它會告訴瀏覽器應該如何呈現網頁,不論是簡單的或是較複雜的頁面都有辦法程現。
可以用不同的標籤來寫出不同的樣貌,如字體的大小、在文字或者是圖片設置超連結等。

在這裡,我們可以拿一台車來做比喻:

https://ithelp.ithome.com.tw/upload/images/20200213/201207898IROwsWnJd.png

HTML就好像一台車的組成,一開始設計車的設計師要先畫出一台車的雛形,要房車還是掀背車或是休旅車、cc數等等,
這台車的基本外觀支架要什麼樣式,這觀念就類似HTML網頁的呈現。

CSS

再來就是CSS,在寫出一個基本網頁之後會覺得怎麼都沒顏色,我也想要有美美的網頁呀~~
這時候,CSS就派上用場啦~
CSS就是一種視覺呈現,它可以修改網頁中的字體顏色、字體樣式(新細明體、娃娃體之類的)、背景顏色、版面位置設定等等,甚至也可以拿來寫出動畫的效果,CSS呈現出來的樣式是很多元的,也是我覺得很有趣的地方呢:)

在這裡一樣以車子做為例子:
當設計一台車子的雛形時,設計師會開始想這台車的外觀要有什麼顏色,方向盤的樣子、椅子的樣式是什麼、輪胎要有怎樣的設計、車子的內裝要有什麼配備,要放置在什麼位子等等都是等同於網頁中的CSS去做控制的。

JavaScript

當網頁的樣子出來了,也就是排版完成(也有另一種說法叫做切版)。
但你會發現一個問題,我的網頁點下去不會動耶,感覺像海報一樣XDD
這時候,就是JavaScript出動的時候啦~~
JavaScript就是寫出網頁的特殊效果,點下去會回饋反應互動的,例如:點登入輸入帳號密碼會登入到會員中心、網頁首頁會出現不同的圖片(例如廣告輪播)、填寫會員資料會有下拉式選單讓你選擇性別出生年月日等等。

OK,再度拿出車子來比喻。
當一台車的雛形、顏色出來了,輪胎也裝好了,椅墊也是你要的樣式,什麼都裝好了,準備就緒!!!
這時候就是JavaScript的工作啦~go!!!
JavaScript就好比車子上的引擎,引擎要發動車子才有動力,才會開動,引擎發動了車子也有電了,我們就可以拿來放車上的音響,邊開車邊聽音樂,除了放鬆心情更能提振精神唷!!!XDD

不知道以上的解說有沒有清楚呢?其實一直很怕會寫錯誤人子弟XDD
因為目前還是超新手的身份,所以寫出來不是非常專業,希望有一天能像其他專業的前輩一樣寫出好的技術文章
寫這篇的目的也希望,跟我一樣的新手能更了解 HTML、CSS、JavaScript三者之間的差異性,一起加油往前端工程師這條路邁進吧~GO!!!


0
心原一馬
iT邦新手 2 級 ‧ 2020-02-14 01:30:34

文章描述很生動哦,給你一個讚,
期待後續發文~

a841722 iT邦新手 5 級‧ 2020-02-20 21:53:16 檢舉

謝謝你:)

1
artoria3169
iT邦新手 5 級 ‧ 2020-02-14 17:02:26

本人也是前端工程師,老婆跟你一樣轉換跑道
目前也是六角學員
和你年齡也差不多
覺得情況很類似就追蹤了 XDDDD
期待您之後的文章~~加油

a841722 iT邦新手 5 級‧ 2020-02-20 21:53:46 檢舉

哇~好巧哦 以後有機會可以多交流XD

隨時歡迎

0
Robin
iT邦新手 5 級 ‧ 2020-02-15 16:32:54

加油~/images/emoticon/emoticon08.gif

a841722 iT邦新手 5 級‧ 2020-02-20 21:54:03 檢舉

謝謝^^

我要留言

立即登入留言