這是我對軟體(或是網頁)工程師進軍的首篇文章，可能還會有，但時間間隔會略長，因為這也只是我個人的起手式，盡可能搜索正確(或我認為正確的)資訊，配合著正職工作，利用下班、追劇之餘，嘗試新的領域。
這裡不談論未來社會對軟體工程師的需求、薪資、優缺點，我出發點是認為「這很酷、很有樂趣」，才是真正對學習這項技能的最佳動力
本篇文章有大量外部連結，我僅以個人口吻描述功能，便於記憶與理解，網路上有大量的資源，試著找出答案，培養我自己「發現問題並找方法解決的能力」。
話不多說，救我目前所學、所知介紹；HTML、CSS、Javascript 是「靜態網頁」的三元素，HTML是網站建置的架構基礎，CSS排版後，搭配 Javascript 優化；
有靜態，當然有「動態網頁」，雖然課程尚未到那，不過馬上就會接觸到，動態網頁主要有PHP、ASP、JSP、Perl來連結資料庫以及更新，常見功能就是會員服務、購物車、討論區、留言板等，多用在資料較多、更新頻繁的網頁。參考來源：新視野網頁設計
目前只略知一二靜態網頁的部分，因此請大家陪我一起從頭開始。
首先是Javascript
它跟 Java 一點關係都沒有，單純是開發語言的人命名時的喜好；
Javascript 要跟網頁(html、css)搭配，有一個DOM (Document Object Model) 文件物件模型，根據W3C解釋其概念是：DOM是個平台與中性的程式語言介面，使文件與腳本可互通並更新內容、架構、版面風格。
白話一點解釋就是，文件( html、css )用設定的事件(按鈕、懸浮、時間等)，可以透過 DOM 被腳本( Javascript )改變。
而基礎的Javascript有幾個必須要先清楚了解的知識：
變數
舊版的只有var可以宣告變數，而後來ES6標準(對！Javascript有標準)，使用let跟const來宣告；
看單字就知道，let是一般變數，指定後還可以改變，const原則上指定後就不行改變了，
因此一般會說let宣告變數、const宣告常數，任何要使用的變數、常數都要先宣告後再指定。
更多關於變數的知識，可以參考Sealman在W3C上的投稿
在變數命名上，常用有意義的英文單字或縮寫，例如：scoreTable(駝峰式命名)、interest_rate(底線分隔)，還有一些注意事項如下：
- 開頭字元需要是ASCII字元(英文大小寫字元)，或是下底線(_)、錢號($)。注意，數字不可用於開頭字元。
- 接下來的字元可以使用英文字元、數字或下底線(_)。
- 大小寫是有差異的。
- 名稱不可使用JavaScript語言保留字詞。
基本資料型別
有了變數，當然要指定(assign)值進去，賦值後就可以用變數來操作。
型別分為兩種，
首先「基本資料型態 (primitive data types)」，有布林值(Boolean)、null(變數無內容)、undefined(未定義或未指定)、數值(Number)、字串(String)、Symbol；
再來是「複合資料型態 (composite data types)」，有陣列(Array)、物件(Object)。
在指定資料給變數時，不用告訴它資料型別，Javascript 會自行判斷，指定後可以用 typeof 來確認其型別，這裡有五篇型別的示範操作( 一 二 三 四 五 )可以參考，使用時須非常確定前後的型別變化，否則會出現 1 + ‘1’ = 11 的笑話。
運算子
a + b 中a跟b是運算元，而+就是運算子，很直覺的，大部分運算子都跟一般電腦使用雷同，例如+(加)、-(減)、*(乘)、/(除)，
但還以些特殊的例如++(增加一)、--(減少一)、!(邏輯上的”否”)、~(二位元上的”否”)、typeof(檢查型別)、delete(一般用來刪除key-value object內的值)、void(用來回傳undefined)，詳細使用方式可以參考 這裡。
流程控制
程式之所以為程式(或腳本之所以為腳本)，除了可以宣告變數、賦值、運算外，還要有一系列流程(一行行照順序的程式碼)，
有兩種常用的流程控制：條件式( if-else )跟迴圈( for與while )；
條件式好理解，如果符合條件就…，不符合檢查下一個…直到檢查符合或全部檢查不合，可參考MDN的說明 ；
迴圈常用的有 for 與 while，for 用在已知邊界的重複動作，while 則常用在不確定最後一次執行次數時候，不只這兩項，還有 do…while (先做一次在開始迴圈)、for…in (在物件的 key 遞迴)、for…of (在物件的 value 遞迴)，詳細操作與解說 在這。
簡易的 Javascript 快速介紹，我個人學習到的部分有限，跟 python (已學過)或大多數程式語言類似，只須注意使用的規則與方式有無差異；
接下來就快速跳到HTML與CSS的部分，這之前需要先理解 Wireframe 與 user flow，
Wireframe 直接引用我在上課的公司部落格 ( Alpha camp: Wireframe是什麼？ )，簡單來說，是設計者與工程師的溝通方式，設計者將概念與需求「完整」繪製出來，釐清架構、內容、功能、互動行為、資訊結構，而工程師就可以清晰的知道需求，而專注在Coding上；
通常在製作 Wireframe 前，要先完成 user flow (使用者流程，可參考 這裡) 以及 sitemap (網站地圖，可以參考 這裡)，確認所需要的頁面功能，再用Wireframe 表達清晰給工程師來製作 prototype (原型)或開始開發；兩造在溝通上有共同語言，資訊對等的情況下，減少錯誤與誤會；
基本上的流程是：
業主討論 → 使用者情境(故事) → 使用者流程 → 網站地圖 → Wireframe → 視覺稿 → 原型 → 業主討論 →
接下來有幾種發展 a.重新再修正 b.細部設計討論 c.開始開發
組件網頁的內容架構，由HTML來執行
打開任何網頁都會看到<head>與<body>兩個標籤，
head內的內容是不會出現在可看見的網頁上的，用在載入 metadata，
例如文件編碼、預設語言、SEO描述、外參圖庫、字形、CSS文件、Javascript 文件等；
而body則是會顯示在可見的網頁範圍，
常見標籤有：標頭<header>、邊欄位<aside>、導覽列<nav>、主區塊<main>、註腳<footer>、段落文字<p>、標題<h1>~<h6>、按鈕<button>、超連結<a>、有序清單<ol>、無序清單<ul>、清單內容<li>、表單<table>、表單內容<tbody><tr><th><td>、文章<article>等，標籤使用內容請參考連結。
美化網頁與排版使用 CSS
當然也可以寫在 html 內容，使用 style 標籤，或在標籤內下 style 屬性，
而使用CSS對於文件管理相對簡易，使用選擇器選出對應的 HTML 元素(標籤、class、id等)，就能夠設定顏色、背景色、間距、邊界等；
初學 CSS 必須要知道的 Box model 與 flex 功能 也請參考網路的大神們。
組件一個網頁，從 HTML架構下手，慣例上分析是由上而下、由大到小、由左至右的原則，再接著套用CSS再由上而下、由大到小、由左至右排版。
HTML 與 CSS 屬於標籤程式，使用上不困難，掌握邏輯、善用網路資源，我想我應該可以很快上手，先入行，再精進！
學習排版最快的方式，除了跟著 Alpha camp 學習，另外就是概略理解 html 及 css 的標籤功能後，找到一個喜歡的網頁樣式，打開 Google Chrome 的「開發人員工具」，看看別人怎麼寫，模擬一次，對照一下理解的 html 與 css ，多試幾次就能逐漸上手囉！
事不宜遲，我繼續前往我的軟體工程師之路！
留言列表
