用 HTML5 標準化網頁應用程式

對網頁設計師來說,藉由 Electron 用 HTML + CSS + JavaScript 開發 GUI 應用程式,確實比從頭學 Java 或 .NET 來得容易,使得 Web application 成為 2020 年代大家都想追上的潮流!以跨平台程式設計方案來說,基於 HTML5 也比基於 Java 和 .NET 來得通用,確實是值得推薦的程式設計方案,技術成本遠低於原生程式設計。

然而,這是因為網頁設計師早已熟悉 HTML 和 CSS,只要摸熟 JavaScript 就行!如果你是剛學電腦的新手,那我要勸阻你,別選這個「大家都說很簡單」的方案!它必須用 JavaScript 操控 HTML 和 CSS,等於你要學 HTML、CSS、JavaScript 三種語言,對前端的網頁設計師來說這很簡單,但對什麼端都不是的電腦新手,一點也不簡單,反而會讓事情變得複雜~

HTML + CSS 這種標記語言,和 JavaScript 這種程式語言,使用上是完全不同的概念!比起來,學 Java + Swing 或 C# + WinForms 還比較簡單,因為只需基於程式語言的概念去學習。

等你學通程式語言,再回頭來了解標記語言這個很簡單的東西,然後用 JavaScript 程式語言去操控標記出來的那些元素,就會一切順順利利的。反觀一次從頭學起三種語言,那 HTML 和 CSS 再簡單,也會成為壓倒駱駝的那根稻草。


JavaScript

[ 語法 ]

程式基本架構
總覽各版 ECMAScript 功能
語言特性珍百景MDN

[ 程式庫 ]

內建函式
內建物件(Array、Boolean、Function、Number、Object、String)
標準化物件(Date、JSON、Map、Math、Promise、RegExp、Set)
應用程式開發物件(Audio、Canvas、URL、Video)

瀏覽器物件 (document、event、history、location、navigator、screen、window)
插圖 網頁物件 (DOM)
API referenceMDN

[ 數據留存 ]

HTTP cookie
Web storage
IndexedDB … MDNlocalForage

[ 其它 ]

XMLHttpRequest 與 Fetch
DOMParser

複製文字到剪貼簿
FileInput + FileReaderWrite file
data- 標籤屬性和 dataset 物件
Drag and Drop
善用「事件可以覆寫」的特性
addEventListener() 簡單示範
onbeforeunload 事件
觸發 SELECT 元件的事件
使用多個 window.setInterval() 充當平行程序
關閉填表元件的作用


HTML

HTML 4.01 到 HTML5 的新做法
HTML5 可用的文字樣式
HTML5 語意文件結構
<html lang='zh'>
<meta>
何時使用 <hgroup>?
TH 是 table header,TR 是 table row,TD 是 table data。
填表元件展示
快取與離線應用

網路安全顏色值表Color Hex Color Codes
網頁顏色名稱表HTML Color Codes
實體符號
百分號編碼


CSS

CSS 速用表
CSS 釋疑
Selector 範例集
置中
網站變黑白
剪影


網頁瀏覽器

插圖

Chromium for 64-bit Windows All Codecswoolyss.com
Opera Web Browser
Yandex Browser
Sleipnir Tabbed Browser
Lunascape


雜項

Web Service

插圖 鍵盤訊號偵測器
URL 編碼和解碼
RGB 和 HEX 轉換
RGB 色調計算式

在網頁瀏覽器將 Markdown 轉為 HTML
如何使用 SyntaxHighlighter 顯示程式範例
光有網頁設計的能力不夠,還需要平面設計的專業。

會用 123456 和 abc123 當密碼,就表示他不想設定密碼,不是密碼強度不夠的問題。


相關資源

Dojo Toolkit - Save you time and scales with your development process.
Extjs - JavaScript frameworks and UI components.
jQuery - The write less, do more, JavaScript library.
JSLint - The JavaScript code quality tool.
Prototype JavaScript framework - Easy Ajax and DOM manipulation.
Rico - Developing RIA that uses Prototype and JSON.