1. 程式人生 > >網頁新手入門:初探網頁架構和前後端語言

網頁新手入門:初探網頁架構和前後端語言

誰適合讀這篇文章:想要入門學程式語言,特別想要學網站但目前還沒有基礎的人。如果你是單純想要學程式語言,而沒有特定目的,可以先參考:
看完這篇文章你會:用簡單的門外漢詞彙瞭解網站大概如何運作,前端後端各是什麼碗糕,以及可以從什麼語言開始學。

在瞭解哪種語言需要先學之前,我們要先對網站的基本架構有些認識。網站開發的世界浩瀚無垠,先釐清自己想要學做的網站會應用到哪些部分,才能知道該從哪一個語言開始先下手。

網站的基本架構

關於學習寫網站,我們最常聽到大家會說的就是什麼前端語言、後端語言。因此,要了解網站的基本架構,就讓我們先從前端後端下手吧!

前後端是什麼碗糕?

網頁前端 / 後端 就像 餐廳點餐 / 出餐

我們可以很直觀地從字面上瞭解,前端 (Front-end) 是網頁本身的前臺,像點餐櫃檯一樣直接面對使用者對網站的動作。而後端 (Back-end) 則是網頁的後臺,接收前端的要求並提供相對應的資料,就像廚房一樣,接受點餐櫃檯傳來的客戶需求,提供相對應的餐點。

因此,網頁前端跟後端的關係,其實就像是餐廳點餐跟出餐一樣。前者接受使用者的指令並呈現網頁內容,後者則處理使用者的指令並提供內容。(這個點餐與出餐的關係,推薦也可以看這篇《買早餐也能瞭解前端 vs 後端?》解釋的很清楚。)

舉一個實際的例子,就像你現在所讀 Medium 頁面上的留言制度,如果你在這篇文章底下留言,你留的內容就會從前端被丟給後端做管理,後端語言會把你是誰、什麼時間留的、留的內容管理好,等下次重新載入網頁時,把這些資訊再送給前端呈現。

看到這邊,想必我們對前端後端已經有一個清楚的概念了。但如果我們回想一下以前瀏覽網頁的經驗,我們所瀏覽過的網站中是不是有些其實根本沒有提供使用者跟網頁互動的功能呢?事實上,那些沒有提供互動的網站,我們通常會稱呼為靜態網站 (

static web pages)。而這篇文章主要介紹的,則都會是屬於有提供相關功能的動態網站 (dynamic web pages)。

接下來,瞭解完了網頁基本的前後端,讓我們先進一步瞭解前端有什麼語言是需要我們學的吧。

前端語言

前端語言三本柱

如果你想要自已動手寫一個簡單的網站介面(例如:自己的履歷網站),需要先學會的技能是 HTML,再來是 CSS。如果要在靜態網站上加點動畫或互動功能,才會需要用到 JavaScript (JS)。而寫前端網頁會主要用到的這三個工具,有些人會稱之為「前端三本柱」。

HTML 正確來說是「標籤語言 (Markup Language)」,是用來描述網站的架構、資訊。而 CSS 則是一種「樣式表 (StyleSheet)」,用來控制網站顯示的樣式,包含字型、顏色、背景等等。粗淺簡單的理解可以先把 HTML 想成網站的骨架、CSS 則是網站的整體外型(身高體重、面板顏色等)。

學會 HTML 與 CSS 後,就可以做出一個簡單的網站,甚至可以用 CSS 加上一些簡單的動畫以及與滑鼠動作的反應。但當我們要更深入做一個動態網站,處理網頁上所有可能的動作、或是做出更細節的動畫時,我們就需要 JavaScript 登場。(關於 CSS 和 JavaScript 實作的動畫詳細比較,你可以參考這篇文章

嚴格來說,JavaScript 才是寫網頁需要的第一個程式語言。JS 可以用來處理網站上需要邏輯判斷的功能,像是隨著使用者的行為動態載入網頁的不同內容。簡單來說,像現在你在閱讀的這個頁面,反白文字會出現回應,按旁邊的 clap 數字就會 +1,這些就是需要 JS 的地方了。在下面,我們來詳細一點的認識 JavaScript。

JavaScript