網頁編程與應用程式：從靜態頁面到互動體驗
大家好！歡迎來到刺激的網頁編程世界。你有沒有想過YouTube、Instagram，甚至一個簡單的線上遊戲這些網站是如何運作的呢？它們不只是靜態頁面；它們是強大的網頁應用程式！在這一章，我們將會揭開其神秘面紗，看看它們是如何建構出來的。
你將學習如何使用HTML來建構網頁、使用CSS讓它變得美觀，最重要的是，如何利用客戶端和伺服器端編程為你的網站加入「大腦」。這將使你的網站能夠回應使用者、處理數據，並連接到資料庫。
即使這聽起來很複雜，也請不用擔心！我們會用簡單的解釋和真實世界的例子，把一切都拆解開來。讓我們開始吧！
第一部分：網頁創作與發佈 (基本要點)
在我們建構動態應用程式之前，我們需要一個地方來建構它。這意味著要理解創建和發佈網頁的基本知識。
1.1 骨架：使用HTML建構內容
把網站想像成一個人體。在你為它穿上衣服或教它跳舞之前，你需要一個骨架。在網絡世界裡，HTML (超文本標記語言)就是那個骨架。
HTML的主要作用是為你的內容提供結構和意義。它告訴瀏覽器什麼是標題、什麼是段落、什麼是列表等等。它是每個網站的基礎。
當你編輯HTML檔案時，你正在使用「標籤」(tags)。例如：
- `
這是一個標題
` 會創建一個主要標題。 - `
這是一段文字。
` 會創建一個標準段落。 - 要添加圖片，你會使用圖片標籤。要添加連結，你會使用錨點標籤。
比喻：將HTML想像成你用來建造房屋結構的積木（就像樂高積木）。你有用於牆壁的積木、用於門的積木和用於窗戶的積木。
重點摘要
HTML是用於內容和結構的。它定義了網頁的不同部分。
1.2 風格：使用CSS美化外觀
骨架很棒，但它不夠吸引人！我們需要添加風格——衣服、髮色等等。這就是CSS (層疊樣式表)發揮作用的地方。
CSS的主要作用是呈現和樣式設定。它告訴瀏覽器HTML元素應該如何呈現。這包括：
- 顏色和背景顏色
- 字體和文字大小
- 版面配置 (例如將內容排列成多個欄)
- 元素之間的間距
CSS最大的優勢是，你可以在多個頁面中創建一致的外觀和風格。你可以在一個檔案（外部樣式表）中編寫樣式規則，並將其連結到所有HTML頁面。如果你想將所有標題的顏色從藍色改為紅色，你只需在CSS檔案中的一個地方進行更改！
比喻：如果HTML是你的房屋的樂高結構，那麼CSS就是油漆、牆紙和家具，讓它看起來像個家。
快速回顧
HTML = 結構 (名詞)
例子：這是一個段落。
CSS = 呈現 (形容詞)
例子：把那個段落的文字變成藍色、粗體、並使用更大的字體。
1.3 上線：在網路上發佈內容
你已經在電腦上建立了一個漂亮的網頁。世界其他地方的人怎樣才能看到它呢？你需要發佈它。
有兩種主要方法可以做到這一點：
1. 建構傳統網站：這包括編寫HTML和CSS檔案，然後將它們上載到網頁寄存服務。網頁寄存服務商是一家擁有伺服器（強大的、長期運行的電腦）的公司，它們儲存你的網站檔案，並使其可在互聯網上供任何人存取。
2. 使用內容管理系統 (CMS)：這是一種非常流行的現代方法。CMS是一個基於網絡的工具，讓你無需從頭開始編寫所有代碼，就能建構和管理網站。你登入後，使用友好的介面添加文字和圖片，CMS會為你處理所有底層代碼和發佈工作。
- 現實世界中的例子：WordPress、Wix和Squarespace都是受歡迎的CMS平台。它們非常適合用於網誌、線上商店和作品集。
重點摘要
要發佈網站，你需要將檔案放在網頁伺服器上。你可以通過手動上傳檔案，或者使用使用者友好的內容管理系統 (CMS)來完成。
第二部分：讓網站變得互動 (「大腦」)
現在來到真正精彩的部分！讓我們讓我們的網站「做」點事情。這需要編程，而在網絡上，編程發生在兩個不同的地方：「客戶端」和「伺服器」。
2.1 兩個大腦：客戶端與伺服器端
這是網頁開發中最重要的概念之一。不用擔心，透過一個比喻就很容易理解了。
比喻：想像你在一家餐廳。
客戶端就是你，顧客。你有菜單（使用者介面），而且你可以在你的餐桌旁直接做出簡單的決定。
伺服器就是廚房。它隱藏起來，並處理所有繁重的工作，例如烹飪你的食物和檢查庫存（資料庫）。
客戶端技術：
- 運行位置：在使用者端的網頁瀏覽器中（在你的餐桌旁）。
- 用途：處理快速、互動性的事務，無需「廚房」參與。讓網站感覺反應靈敏、生動。
- 例子：你正在填寫點餐單（菜單）。客戶端腳本可以立即檢查你是否忘記寫名字。你無需叫侍應，就能即時獲得反饋！
- 常用語言：JavaScript。
伺服器端技術：
- 運行位置：在強大的網頁伺服器上（在廚房裡）。
- 用途：處理安全和複雜的任務。處理數據、與資料庫通信、處理登入。
- 例子：你把點餐單交給侍應。廚房（伺服器）接收你的訂單，檢查資料庫是否有足夠的食材，烹飪食物（處理數據），然後將它送回給你。
- 常用語言：PHP、Python、Node.js (你不需要知道如何編寫這些，只需知道它們存在)。
常見錯誤，請避免！
你絕不應該嘗試直接從客戶端連接到資料庫。這就像讓每個顧客都可以走進廚房和儲藏室一樣！這是一個巨大的安全風險。所有資料庫工作必須在安全的伺服器端完成。
2.2 客戶端的角色：介面與簡單的數據驗證
客戶端的一切都關乎使用者的體驗。
建立客戶端介面：
這是我們從使用者獲取資訊的方式。我們使用HTML表單來建立介面。表單只是一個由使用者可以填寫的輸入欄位組成的集合。
- `` 用於文字輸入。
- `` 用於數字輸入。
- `` 用於發送表單數據到伺服器的按鈕。
這些表單元素建立使用者互動的網頁或應用程式介面。
簡單數據驗證：
這是客戶端腳本的完美任務。在將數據發送到伺服器之前，我們可以檢查是否存在簡單錯誤。
例子：一個表單要求使用者輸入年齡。客戶端腳本可以檢查輸入是否為數字，並確認它是否在合理範圍內（例如，介於1到120之間）。如果使用者出錯，這會給予即時反饋，省去向伺服器發送請求的時間。
2.3 伺服器的角色：處理、資料庫和Cookies
伺服器負責處理繁重的工作，在幕後運作。
處理輸入數據：
當使用者提交表單時，數據會被發送到伺服器端腳本。這個腳本隨後可以執行計算或以任何需要的方式處理數據。
課程大綱例子：一個網頁有一個用於解二次方程的表單。使用者輸入a、b和c的值。伺服器端腳本接收這些數字，執行計算，然後將帶有答案的新頁面發回給使用者。
檢索和更新資料庫數據：
這是伺服器最強大的功能。伺服器端腳本可以與資料庫通信，以儲存、檢索和更新資訊。
- 檢索：當你登入社交媒體網站時，伺服器腳本會從資料庫檢索你的個人資料資訊（姓名、個人頭像、朋友列表）以顯示在你的頁面上。
- 更新：如果你更改個人頭像，伺服器腳本會接收你的新圖片，並在資料庫中更新你的記錄。
這一切都基於一個簡單的「請求與回應」模型。客戶端請求數據，伺服器回應數據。
使用Cookies儲存使用者資訊：
網站如何在不同頁面之間記住你？通常是通過Cookies！
Cookie是一個非常小的文字檔案，網站會要求你的瀏覽器將其儲存在你的電腦上。它包含一些微小的資訊，例如使用者ID或你的購物車內容。
比喻：Cookie就像你在活動中獲得的名牌。每次你與工作人員交談（從伺服器請求新頁面）時，他們可以查看你的名牌來記住你是誰，而你無需每次都重新介紹自己。
重點摘要
客戶端（瀏覽器）處理使用者介面（HTML表單）和快速檢查（驗證）。伺服器則處理重要的工作：計算、安全的資料庫存取以及使用cookies記住使用者。
第三部分：整合運用：一個簡單的網頁應用程式
讓我們追溯一個網頁應用程式中簡單請求的整個過程。我們將使用課程大綱的例子：一個「購物中心餐廳搜尋引擎」。
以下是客戶端和伺服器如何協同工作：
- 介面 (客戶端)：你看到一個網頁，上面有一個搜尋框和一個「搜尋」按鈕。這就是HTML表單。
- 使用者輸入 (客戶端)：你在搜尋框中輸入「壽司」，然後點擊按鈕。
- 發送請求 (客戶端到伺服器)：你的瀏覽器將你的搜尋詞「壽司」打包成一個HTTP請求，並通過互聯網發送到網頁伺服器。
- 處理 (伺服器端)：網頁伺服器上的伺服器端腳本接收到請求，並看到搜尋詞是「壽司」。
- 資料庫查詢 (伺服器端)：該腳本現在「與」餐廳資料庫「交談」。它發送一個查詢，例如「資料庫，請給我所有食物類型是『壽司』的餐廳。」
- 資料庫回應 (伺服器端)：資料庫找到所有壽司餐廳，並將列表發送回伺服器端腳本。
- 建構頁面 (伺服器端)：該腳本接收這些餐廳列表，並動態建構一個新的HTML頁面，整齊地列出每個結果。
- 發送回應 (伺服器到客戶端)：伺服器將這個全新的HTML頁面（你的搜尋結果）作為HTTP回應發送回你的瀏覽器。
- 顯示 (客戶端)：你的瀏覽器接收到HTML並顯示頁面，向你展示商場裡所有壽司餐廳。
整個過程在短短一兩秒內完成！通過整合客戶端和伺服器端腳本，我們開發了一個有用的網頁應用程式。
第四部分：接下來呢？網頁開發的新趨勢
網絡總是在不斷變化！你不需要知道技術細節，但了解使現代網頁應用程式如此強大的新趨勢是很有益的。
你知道嗎？
其中一個最大的趨勢是響應式設計。這是一種建構網站的做法，使其在任何設備上都能完美顯示和運行，無論是巨大的桌面顯示器、手提電腦、平板電腦，還是小小的智能手機螢幕。版面會自動調整以適應螢幕尺寸。這就是為什麼你在現代手機網站上，無需一直縮放！
我們的網頁編程與應用程式之旅到此結束。你現在對現代互動網站的建構方式有了紮實的理解，從骨架到大腦，你都清楚了！