針對前端開發所要瞭解的技術作一個簡介

1. 前端開發學習簡介
Front-End tech. learning intro.
講師 朱孝國
2017-03-12

2. 前端開發技術學習大綱
網頁基礎技術
■ HTML
■ CSS
■ Javascript
網頁開發基本概念
■ 網頁編輯器
■ 文字編碼
■ 換列符號
■ 跨瀏覽器相容性
■ 指令列
■ 版本管理
前端開發學習拓樸
https://coggle.it/diagram/WLy5L3J77QABCBpk
函式庫與套件管理
■ Bootstrap
■ Font Aweasome / Material Icons
■ jQuery
■ NPM
前端進階技術
■ 預處理
□ Pug(Jade)
□ Less
□ TypeScript
■ MVVM 與框架
■ 自動化工作管理

3. 網頁開發基本概念
Web Basic Concept
Base on Windows

5. VS Code mit license
現代化網頁編輯器，擁有支援多種語法提示、外掛擴充功能、跨平台等特性，
常用的編輯器有 VS Code、Atom、Sublime Text、Notepad++等。
VS Code 是由微軟根據 Electron 技術所打造的開放原始碼文字編輯器，內
建語法提示、Git版本控制、與偵錯工具。

6. Code 設定採用 json 格式
檔案 ／ 喜好設定 ／ 設定，複製下方的常用設定至右側的大括弧中
"editor.fontSize": 18,
"editor.mouseWheelZoom": true,
"editor.formatOnType": true,
"editor.renderIndentGuides": true,
"files.autoSave": "afterDelay",
"files.autoSaveDelay": 1000,
"workbench.colorTheme": "Monokai",
"terminal.integrated.shell.windows": "C:Windowssysnativecmd.exe",
"terminal.integrated.fontSize": 16

7. Open with code
安裝時啟用資料夾按右鍵
Emmet
html:5>h1+ul>li*3^p [Tab]
切換終端機
Ctrl+`
擴充功能
■ Auto Rename Tag
■ open in browser
■ Sublime Material Theme
■ vscode-icons
Code 功能嘗鮮
Emmet 快速鍵列表 http://docs.emmet.io/cheat-sheet/

8. Shift+Alt+Upon 複製本行，游標維持不動
Shift+Alt+Down 複製本行，游標游標往下
Ctrl+X 刪掉游標所在行
Ctrl+Enter 下方增加一空行
Ctrl+Shift+Enter 上方增加一空行
Ctrl+/ 游標所在行加註解符號，再按一次則取消
Ctrl+] 增加縮排
Ctrl+[ 減少縮排
Alt+Up 與上一行交換位置
Alt+Down 與下一行交換位置
Code 常用編輯按鍵
官方對應表 https://code.visualstudio.com/docs/customization/keybindings

9. 文字編碼
● UTF-8 / UTF-16
● Big5 /ANSI
換列符號
● Windows：nr
● UNIX / Linux：n
● Mac：r

10. 跨瀏覽器相容性
Cross-Browser
Compatibility

11. 跨瀏覽器
相容性
正確使用 DOCTYPE
➢ Standards mode
➢ Quirks mode
➢ Almost-Standards
Mode
使用
Normalize.css
如何指定使用 IE 瀏覽器的版本
<meta http-equiv="x-ua-compatible" content="IE=9" >
搞懂X-UA-Compatible IE相容設定 http://blog.darkthread.net/post-2016-
05-26-x-ua-compatible-setting.aspx

12. cmder mit license
cmder 植基於ConEmu這個
Windows console 模擬器，
整合了 msysgit 這個
Windows 下的 Git 與常用的
Linux Shell 指令、Clink
Readline函式庫與Monokai
color 佈景主題。
Windows 下的 cmd 與
Mac 的 terminal、
Linux 的 Shell 相比之下
的確略遜一籌，為了前
端工程師跨平台的指令
環境一致性，強烈建議
更換為 cmder。

13. ■ 找出 c:windows 目錄下所有的檔案
ls -l c:windows | grep "^-" | awk '{print $9}'
■ 快速鍵
□ Ctrl+L 清除螢幕
□ Ctrl+` 快速切換 cmder 視窗
□ Alt+Shift+1 系統管理員權限開啟 cmder
□ Alt+Shift+2 開啟 cmder
□ Alt+Shift+3 系統管理員權限開啟 powershell
□ Alt+Shift+4 開啟 powershell
cmder 功能嘗鮮

14. Git GNU GPL v2 license
Git是Linux之父 Linus Torvalds 所設計的分散式版本控制軟體
(Distributed Version Control Systems, 簡稱DVCSs)。除了在遠端儲
存庫(Remote Repository)上，擁有集中的完整程式碼之外，在每一
個開發者本機端也還有一個本地端儲存庫( Local Repository)，用來
儲存自己變更過的檔案各版本歷史紀錄。

15. Local / Remote Workflow

16. 參考：
● 30 天精通 Git 版本控管
● Git 教學
mkdir project && cd project
git config --global user.name "Ur Name"
git config --global user.email "Ur@ab.com"
git init && git status
code read.txt
git add readme.txt && git status
git commit -m “Add read.txt”
code read.txt && git status
git diff
git add . && git status
git commit -m “Update read.txt”
code read.txt
git checkout read.txt

18. HTML5
HTML5 是 HTML 最新的修訂版本，2014 年 10 月由全球資訊網協會
（W3C）完成標準制定。目標是取代 1999 年所制定的 HTML 4.01
和XHTML 1.0標準，HTML5用語意標籤(Semantics)如<section>、
<article>、<header>和<nav>來取代傳統標籤，同時添加了多媒體
和圖片內容如<video>、<audio>和<canvas>。

19. HTML5 元素

20. HTML5 的排版元素

21. HTML5test HTML5 在不同瀏覽器的支援程度

22. CSS3
串接樣式表(Cascading Style Sheet; CSS)是用來進行網頁的外觀
呈現語言，其中最基礎的概念就是樣式(Style)、 串接(Cascade) 與
盒子模型(Box model)，CSS 沒有程式語言區分變數區域或全域生
命週期的差別，樣式都作用在全域之中，因此具有串接、覆寫、繼
承的特性，最新版本為 3.0。

23. 盒子模型(Box model)

24. Javascript
Javascript 是一種跑在瀏
覽器端的腳本語言
(Scripting Language)，
目的是要讓靜態的網頁能
夠透過這個語言而產生動
態的變化。
JS的三個構面：
■ ECMAScript標準
基本物件 (Array, Function, Object)
與存取 DOM 與 BOM 的能力
■ 文件物件模型
■ 瀏覽器物件模型

25. 文件物件模型
(Document Object Model; DOM)
瀏覽器對應 HTML 產生的樹狀結構物件

26. 瀏覽器物件模型
(Browser Object Model; BOM)
與瀏覽器進行互動的方法 (window, XMLHttpRequest)

27. JS 的型別
JS 的型別(或稱資料型態)是針對變數的值而非變數本身，因此變數
能夠在任何時間持有任何型別的值，稱之為弱型別(weak typing)或
動態型別(dynamic typing)

29. JS Library
Javascript 函式庫(JS Library) 指的是使用 JS 撰寫，具有簡化 JS 物
件使用、操作 DOM 物件、繪圖功能的一組函數集合，學習
Javascript 函式庫能幫助我們寫更少的代碼而能做更多的功能。
jQuery 可以用最精簡的程式碼來達到跨瀏覽器 DOM 操作、事
件處理、設計頁面元素動態效果、AJAX 互動等功能的一套高效、
輕量而且功能豐富的 Javascript 函式庫。

30. Unobtrusive JavaScript
jQuery受到 CSS 將樣式與結構分離的啟發，對於事件的
處理也希望進行將行為與結構分離的設計，也就是不建議
在 HTML 標籤上撰寫 onclick="..."，讓 body 區域的 html
更乾淨，這種作法稱為 Unobtrusive JavaScript。
傳統的事件處理範例
<p id="msg">Unobtrusive JavaScript</p>
<button onclick="document.getElementById('msg').style.color='red';">請
點我</button>

31. 不使用jQuery的
Unobtrusive JavaScript 事件處理範例
<script>
window.onload = function () {
document.getElementById('Unobtrusive').onclick=changeColor;
}
function changeColor() {
document.getElementById('msg').style.color='red';
}
</script>
<p id="msg">Unobtrusive JavaScript</p>
<button id="Unobtrusive">請點我</button>

32. 使用jQuery的
Unobtrusive JavaScript 事件處理範例
<script>
$(function() {
$("#Unobtrusive").on('click',function(){ $("#msg").css("color","red"); });
});
</script>
<p id="msg">Unobtrusive JavaScript</p>
<button id="Unobtrusive">請點我</button>

33. CSS Framework
使用 CSS 框架(CSS Framework)可以快速提高網頁的顏值，雖然
套用框架以後會發現許多網站的外觀都很相似，但還是有加速web
網頁的開發(Fast prototyping)、適應化設計、套用JS UI 元件的設
計好處，使用框架的時候請留意我們要學習其背後使用到的 CSS
觀念，而不是 Framework 本身。

34. Pure.css
Pure 是 Yahoo! 推出的一個基於 Normalize.CSS 的 CSS 框架，它沒有
使用任何 JavaScript，只有 HTML 和 CSS，因此檔案十分的小。

35. Bootstrap
Bootstrap 是由 Twitter 釋出的「高彈性」網頁呈現框架，其程式碼主要
是用 LESS 和 jQuery 所架構出來的，LESS 負責網頁排版的部份，而
jQuery 則負責動態的程式部份，在跨瀏覽器顯示一致化的部分也使用了
Normalize.CSS，是最常被使用的適應性網頁框架。

36. 圖示字型
在製作網頁時，都會使用一些小圖示來作裝飾，為
避免圖片檔風格不統一且縮放失真的問題，將小圖
示都製作成文字的字型 (向量化)，然後再透過 CSS
的技術去呼叫 Icon Fonts 出來。

37. Bootstrapd搭配的圖示字型
Glyphicons.com
<span class="glyphicons glyphicons-asterisk"></span>

38. 套件管理
套件管理，主要管理專
案用的元件，元件彼此
間的相依性。更進一步
的，還有版本管理、升
級、相容警示、劇本執
行。
npm 全名為 Node
Package Manager，
是 Node.js 的套件管理
工具，也可以來安裝或
管理所有網頁前端所使
用的套件

39. Thanks!
Any questions?
You can find me at
peterju.tw@gmail.com