網頁程式設計教學:介紹

【分享本文】
Facebook Twitter LinkedIn LINE Skype EverNote GMail Yahoo Email

    前言

    網頁應用程式 (web application) 是指以全球資訊網 (the Web) 為載體的應用程式。更精確地說,是使用 HTTP 協定和外界溝通的應用程式。本文短短的內容無上馬上讓讀者會寫網頁應用程式,但可以對寫網頁有一個起點和方向。

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

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

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

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

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

    • 混合模式行動軟體 (hybrid applications),像是 Cordova
    • 使用 JavaScript 寫行動軟體,像是 React Native 或 NativeScript
    • 應用網頁技術的桌面軟體 (desktop applications),像是 Electron
    • 將網頁程式做為物聯網程式的一部分

    網頁 (Web Page)

    全球資訊網一開始的目的是為了傳播靜態文字資訊,後來才慢慢加入各種檔案格式的支援;網頁 (web page) 一開始只是靜態的文件,沒有漂亮的樣式。網頁之間可透過連結 (hyperlinks) 相互串連,是其一大特色。

    靜態網頁的例子像是由 doxygen 或其他同質軟體生成的函式庫 API 文件。這類網頁可線上 (online) 或離線 (offline) 觀看。

    對於甚少變動的內容,使用靜態網頁仍然是最快的。因為靜態網頁不需要由後端程式動態生成頁面,而是直接從網頁伺服器傳頁面到瀏覽器。

    網站 (Website)

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

    現在想做內容型網站的話,幾乎不會從頭寫內容管理系統。因為透過 WordPress 或其他內容管理系統,可以在完全不寫程式碼或僅寫少量程式碼的前提下,很快地建立一個網站。

    網頁應用程式 (Web Application)

    網頁應用程式 (web applications) 則是透過全球資訊網發佈的應用程式,和行動應用程式 (mobile applications) 是兩種最受一般使用者 (general users) 喜好的應用程式的媒介;一些知名的網頁應用程式有 Gmail 或 Google Maps。

    網頁應用程式很難直接用 Wordpress 或其他同質的內容管理系統來做,往往需要依專案的需求重新開發,這也是程式人比較能發揮專長的地方。

    Web API

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

    我需要那一種形式的網頁?

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

    網頁程式學習地圖

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

    • HTTP 協定

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

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

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

    看起來東西很多,好像要學很久,但初學者不用妄自菲薄,即使完全不用後端技術,光會前端技術就可以寫一些網頁小軟體了。

    後端程式主要的功能是:

    • 做為前端和資料庫間連結的橋樑
    • 隱藏一些敏感的數據和程式邏輯
    • 串接其他不易或無法在前端使用的應用程式

    筆者自己是先學一些可用在後端的通用型程式語言,像 Python 或 Golang,再回頭學寫網頁程式,但倒過來學習也無妨。

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

    【分享本文】
    Facebook Twitter LinkedIn LINE Skype EverNote GMail Yahoo Email
    【追蹤新文章】
    Facebook Twitter Plurk