Web - Front End Basic Introduction

Front End & Back End

關於什麼是前端與後端可以參考 Web Intro
買早餐也能了解前端 vs 後端？ - 沒一村隨便說

Front End

• 跑在瀏覽器上的文件、檔案、資料、程式
• Chrome、HTML、CSS、JavaScript

Back End

• 跑在伺服器上的服務、資料、程式
• IIS、Tomcat、ASP.NET、JSP、Python、DataBase

UI & UX

• UI (User Interface)：整體介面視覺呈現，包含顏色、元件的樣貌設計
• UX (User Experience)：以用戶習慣為基礎設計出合適或更好的體驗產品

Front End Introduction

HTML

• 超文本標記語言 HyperText Markup Language
• 網站的骨架
• <div>
  • 文件區塊，以一整行為單位，結尾會自動換行
• <span>
  • 與 <div> 概念類似，但結尾不會自動換行
• <table>
  • 表格
  • <tr> 單位為行，包起來的範圍內為一行
  • <td> 單位為欄，包起來為此欄內容
• <form>
  • 表單
  • <label> 標籤顯示文字
  • <input> 輸入方塊，結尾不須關起來
  • <br> 換行
• <href>
  • 超連結
  • <a href="超連結">超連結顯示文字</a>
• <button>
  • 按鈕

CSS

• 階層樣式表：Cascading Style Sheets
• 網站的衣服
• <style>
  • #ID
    • 找出 id = “ID” 加上 CSS 效果
  • .ID
    • 找出 class = “ID” 加上 CSS 效果
  • p.ID
    • 找出 <p> 且 class = “ID” 加上 CSS 效果
  • *
    • 對所有 <> 加上 CSS 效果
  • p, div
    • 對 <p> 和 <div> 加上 CSS 效果
• margin
• border
• padding

JavaScript

因為內容有點多，所以另外開了一篇文章撰寫，抵家：WEB - JavaScript

jQuery

因為內容也比較多，所以另外開了一篇文章撰寫，抵家：WEB - jQuery

HTTP

HTTP Method

HTTP 常見的請求方法

GET

查詢書籍編號為 10 的書籍

GET /Book/BookID=10

POST

新增一本書名為哈利波特的書籍

POST /Book Body: {BookName: 哈利波特}

PUT

修改書籍編號為 10 的書籍，將名稱改為哈哈波特

PUT /Book Body: {BookID: 10, BookName: 哈哈波特}

DELETE

刪除書籍編號為 10 的書籍

DELETE /Book Body: {BookID: 10}

HTTP Status Code

HTTP 常見回應代碼

• 2xx 成功
  • 200 請求正確完成
  • 201 新增請求完成
• 4xx
  • 400 使用者輸入錯誤
  • 403 使用者沒有訪問權限
  • 404 頁面不存在
• 5xx
  • 500 伺服器內部錯誤
  • 503 伺服器未提供服務

Reference

• 買早餐也能了解前端 vs 後端？ - 沒一村隨便說
• HTML Intro
• CSS Intro
• Bootstrap Intro
• Chrome 開發人員工具介紹