前言與大綱

這個主題主要是介紹與「網頁開發」的「前端」部分比較相關的基礎內容,也會包含一些網路通訊協定(HTTP, HTTP2…)以及瀏覽器原理的基礎內容。

寫給誰的

這是一系列非常基礎的網頁開發入門文章, 我們會假設讀者目前是不具備任何程式開發或是網路通訊技術背景的, 原則上這系列文章是可以提供對網頁前端技術有興趣的朋友一塊敲門磚, 所以在閱讀這系列文章前你應該是:

  1. 沒有或很少任何程式設計相關經驗。
  2. 已具備一般使用電腦、瀏覽器的相關知識。
  3. 本身所使用的作業系統(Operation System)本身原則上並不影響文章內容的操作,但文中所使用的範例會以MacOS + Chrome Browser進行呈現。
  4. 對於網頁開發沒有相關經驗或是並不熟悉,如果你已經知悉前端/後端框架…等等相關的經驗,這系列文章對你來說可能過於基礎,並不適合你,若你是想要重新複習一下基礎的部分,可能需要請你用耐心來閱讀。

你可以在這系列文章中看到什麼?

這系列文章是前端網頁開發的基礎,因此,我們並不認為閱讀完後你能夠成為一位「前端工程師」,這也不是這系列文章所能夠帶給你的效益,為避免你產生錯誤的預期,我們認為這系列文章最多能為你帶來的效益是:

  1. 了解自己的是否合適從事網頁前端開發
  2. 具備深入前端開發的能力與先備知識
  3. 了解前端開發生態
  4. (可能)可以與前端工程師有一些共同話題溝通

除了上述的概念以及預期外,這謝列文章會提及的實質技術內容不外乎:HTML、CSS及Javascript,以下會列出這系列文章會提及的大綱:

  • 先備知識

    • HTTP / DNS 及網路運作原理
    • 程式語言基礎了解
  • 瀏覽器

    • 基礎開發工具
    • 基礎瀏覽器原理
  • 編輯器介紹
  • HTML

    • W3C
    • DOM
    • 發展與介紹
    • 標籤語言、標籤認識與實作
  • CSS

    • 語法及用途介紹
    • 常用語法
    • 選擇器
    • 排版與定位
  • Javascript

    • 發展歷史與介紹
    • 語法介紹

      • 變數、型別與宣告
      • 流程控制與運算子
      • 函數與回呼
      • 陣列與物件
      • 繼承與原型
      • 正規表達式
      • 非同步
    • JS與Web Client開發

      • Web API與window物件
      • Web Event:事件處理與控制
      • JS操作DOM、HTML與CSS
      • 儲存區:Client Side Storage
      • 非同步請求:HTTP Ajax Requesting與跨來源(Cross Origin)
      • 多媒體(Video, Audio)
      • 圖形:SVG與Canvas
      • 其他API

        • 地理位置:geolocation
        • 瀏覽紀錄:Browser history
        • Web Workers
        • Blobs
        • Socket