網頁程式設計教學:介紹

PUBLISHED ON NOV 13, 2018 — WEB
FacebookTwitter LinkedIn LINE Skype EverNote GMail Yahoo Email

    網頁應用程式 (web application) 是指使用全球資訊網 (the Web) 為載體的應用程式。本文短短的內容無上馬上讓讀者會寫網頁應用程式,但可以有一個起點和方向。

    註:網頁應用程式其實有點誤譯,因網頁應用程式有可能沒有頁面 (web pages)。中文維基將 web application 翻為網路應用程式,但這樣可能會和涵蓋更廣的 network applications 搞混,故我們仍沿用原有的翻譯。

    你可能不需要網頁程式設計

    我們談到網頁時,其實可能代表以下數種意義之一:

    • 單一的網頁 (web pages)
    • 網站 (websites)
    • 網頁應用程式 (web applications)
    • Web API

    除此之外,還有一些不典型的網頁應用程式:

    • 混合模式行動軟體 (hybrid applications),像是 Cordova
    • 應用網頁技術的桌面軟體 (desktop applications),像是 Electron

    網頁一開始的目的是為了傳播靜態文字資訊,後來才慢慢加入各種檔案格式的支援;網頁之間可透過連結 (hyperlinks) 相互串連,是其一大特色。靜態網頁的例子像是一些由 doxygen 或其他同質軟體生成的函式庫 API 文件。這類網頁可線上 (online) 或離線 (offline) 觀看。

    網站是以靜態內容為主,可說是網頁的集合,會用有組織的方式將頁面間串連起來;一些網站的例子像是部落格 (blogs)、維基 (wikis)、討論區 (forums) 等。依據其生成方式,可生成靜態和動態兩種,前者像是以靜態站台產生器產生的部落格,後者像是以 Wordpress 架設的部落格或以 phpBB 架設的討論區等 (參考這裡)。

    網頁應用程式則是透過全球資訊網發佈的應用程式,和行動應用程式 (mobile applications) 是兩種最受一般使用者 (general users) 喜好的應用程式的媒介;一些知名的網頁應用程式有 Gmail 或 Google Maps。網頁應用程式很難直接用 Wordpress 或其他同質的內容管理系統來做,往往需要重新開發,這也是程式人比較能發揮專長的地方。

    Web API 是將網頁應用程式視為一種 remote API,這類應用程式沒有頁面 (web pages),以網址做為其對外的介面 (interfaces)。比起函式庫 (libraries) 來說,開發者對 web API 有較高的管控權、可保護其程式碼、易於處理運算資源,而且 web API 是跨平台的,因此,近年來許多大型科技公司以 web API 發佈其產品。

    根據不同的需求,可決定學習的深度。如果只是要做靜態內容為主的網站,重頭打造內容管理系統往往是在繞遠路,選擇現有的軟體來製作網站會比較快,這時的重點就會放在 HTML 和 CSS 上。如果是想做應用程式,除了前述兩項技術外,JavaScript 目前仍是必學的。當然,還要學一些其他的東西,我們下一節會談。

    學習地圖

    在理論面來說,需要學習:

    • HTTP 協定

    在技術面來說,需要學習:

    • 前端 (front end)
      • HTML 和其前置語言
      • CSS 和其前置語言
      • JavaScript 和其前置語言
    • 後端 (back end)
      • 至少一種後端語言
    • 資料端
      • 關連式資料庫 (relational databases)
      • NoSQL 資料庫
    • (選擇性) 其他
      • 第三方 API
      • GNU/Linux 系統管理
      • 版本控制軟體
      • 其他工具

    註:前置語言經由前置處理器 (preprocessor) 會轉為相對應的原生語言。

    看起來東西很多,好像要學很久,但初學者不用妄自菲薄,即使完全不用後端技術,光會前端就可以寫一些網頁小軟體了。後端主要的功能是 (1) 做為前端和資料庫間連結的橋樑或是 (2) 隱藏一些敏感的數據和程式邏輯,像是電腦遊戲,還有 (3) 串接其他不易或無法在前端使用的應用程式,像是一些命令列軟體等。筆者自己是先學一些可用在後端的通用型程式語言,像 Python,再學寫網頁程式,但倒過來也無妨。

    由於篇幅限制,我們不會全部介紹,目前主要目標放在 HTTP 協定、HTML、CSS 的介紹,會加入一些現代化工具和前置語言的相關內容。至於其他的就等以後有機會再開新的系列文。

    TAGS: WEB