別人教你成為碼農，我們教你成為前端開發工程師！

第一階段
開發語言基礎

基礎開發工具入門

軟件開發主流工具掌握；編程語言入門，Java程序設計：變量、數據類型、
運算符與表達式、分支與循環、數組；養成良好的軟件編程習慣，強化軟件開發基本功

開發語言基礎的鞏固、內存管理

加強和鞏固開發工具，掌握在Eclipse下開發/調試程序

OOP面向對象

面向對象基本概念；面向對象特性：封裝（描述）、繼承、多態； 面向對象高級特性：內部類、抽象類、接口；異常處理；

API介紹

常用API,集合API，并了解Java的高級特性， 熟悉各種基本數據類型包裝類：String和StringBuffer等常用API

數據庫和SQL

掌握數據庫原理和SQL語句，鏈接數據庫的應用

IO概念、多線程、泛型

熟悉文件操作、字節流的操作和常見文件相關類, 分析IO性能，熟練使用常用包裝類IO；多線程；泛型與元數據（注解）；

設計模式理解

熟悉常用設計模式：Singleton、Template、Strategy、Adapter模式。 為搭建結構良好的Android應用程序奠定基礎。

主流WEB開發技術

了解 WEB開發技術的核心知識，拓展開發思路和眼界

 第二階段,JS基礎

JS入門：事件、原理、屬性、樣式、函數、if判斷
JS入門：style和行間樣式、函數傳參、屬性操作兩種方式
字符串和變量、字面量和變量
提取行間事件、onload、byTagName、數組
循環、全選、選項卡、innerHTML、字符串連接
調試工具的使用、如何調試JS
變量類型、typeof、JS常見類型
類型轉換、parseInt、NaN、隱式轉換
作用域、閉包、命名規范、運算符、流程控制
變量遮蔽
JS中的隨機數、隨機顏色、隨機范圍、隨機不重復
函數返回值
深入理解函數返回值
定時器：interval、timeout、時鐘、QQ資料框、自動播放選項卡、京東商城側邊欄
arguments、字符串操作、數組操作、Json
循環外i的問題、函數定義和調用的區別、不變的變量
DOM操作基礎：創建、添加、刪除
BOM基礎：窗口操作、UA、location
BOM應用：滾動、scrollTop、offset、clientHeight、瀏覽器類型檢測
事件對象：冒泡、clientX、keyCode、ctrl/alt/shift、默認行為、拖拽
QQ郵箱閃爍提示、回放路徑的拖拽
樹形菜單、多級右鍵菜單

 第三階段
JS中級+實戰

批量設置樣式：json、cssText、with
location、hash、query的處理，刷新保存頁碼
Date對象應用：setFullYear/Month等，時間戳、倒計時
Date高級應用
閉包的應用、封閉命名空間
ajax無刷新數據加載：創建、發送、接收、字符集和緩存
DOM應用：firstChild/lastChild、nextSibling/previousSibling
操作屬性的第三方式、自定義屬性的獲取、src的相對路徑
offsetParent、計算元素的頁面絕對位置
圖片延遲加載——迅雷
簡易瀑布流——花瓣
橫向瀑布流——百度
DOM與innerHTML、innerHTML的bug
天貓、淘寶吸頂導航條
天貓、京東placeholder輸入框
永遠在頁面的右鍵菜單、提示圖片
圖片預加載、Image對象的使用
Image對象批量加載
運動基礎、勻速運動、運動框架、側邊欄、淡入淡出
緩沖運動、頁面提示框
多物體運動框架、萬能運動框架、鏈式運動框架、完美運動框架
布局轉換、淘寶幻燈片
運動應用：劃動提示層、百度百科數字框、新浪滾動微博
永遠在頁面中放大的圖片
無縫滾動
手風琴幻燈片、淘寶網無縫滾動幻燈片
this的用法、完美拖拽
完美封裝可重用代碼
完美拖拽、吸附拖拽、帶框拖拽
程序思想——如何找思路，如何找規律，如何思考
碰撞檢測、模擬窗口拖拽大小
窗口拖拽大小的封裝和重用
自定義滾動條、鼠標滾輪
事件綁定、DOM事件流
cookie基礎
ajax高級應用：用戶注冊和登錄、表單提交
后臺接口的使用、接口文檔
編寫AJax的基本步驟
Jsonp跨域的方法——百度下拉提示
script標簽的怪異特性、callback的使用
Jsonp標簽的管理
封裝可重用的Jsonp方法
ajax制作簡易新浪微博：后臺、接口、分頁、頂、頁碼
其他常見數據格式及用法：CSV、XML

JS中的預解析機制、script出錯時的處理機制
預解析相關面試題
遞歸及其各種應用
遞歸相關面試題
遞歸的性能問題、遞歸的優化
棧溢出的原因和處理

引用、復制
JS中的異常：try...catch的使用
try的嵌套和性能問題
拋出異常、Exception對象、異常和返回值的區別及用途
JS變量生存周期、垃圾回收機制
閉包與JS垃圾回收
閉包的用法、保存i的值

JS性能優化——健壯性、維護性、性能的平衡
性能瓶頸的識別——性能檢測工具的使用：Chrome profiles、YSlow等
JS阻塞加載、圖片延遲加載、網絡性能優化、壓縮、CDN的使用
JS執行性能優化：DOM操作、循環、數組優化、局部變量、eval、parseInt、系統函數、字符串連接、正則等

實例：顏色選擇器組件
實例：輸入字數統計

正則表達式：RegExp對象、search方法、忽略大小寫
match方法和全局匹配、量詞的問題、replace方法
字符類、轉義字符、行首行為、中文、單詞邊界、括號
正則應用：可重用的表單校驗
自動表單校驗、批量表單校驗

表格操作：tBodies、tHead、tFoot、rows、cells
表格搜索、排序
自定義表單組件
DOM文本節點：創建、兼容、應用
firstChild怪異問題、childNodes的問題
實例：google日歷

domReady事件：優點、DOMContentLoaded、defer、onload
事件隊列、封裝ready事件函數
事件委托（事件代理）：冒泡的使用、srcElement屬性、target屬性、this的檢測
call的使用——解決this指向問題
mouseleave事件——作用、封裝，徹底解決mouseout冒泡的問題

運動高級：彈性運動、碰撞運動
彈性應用：滑動導航

 第四階段:JS面向對象

面向對象回顧：什么是面向對象、對象的組成、OOP的特點、this的本質、Object對象
工廠方式構造對象、原型（prototype）、混合法構造JS對象、實例：面向對象的選項卡
JS算法基礎：時間復雜度和空間復雜度
數據結構基礎：線性和隨機、線性表、O表示法、數據結構基本操作
線性表和排序：4大排序算法、適用范圍、蛻變和劣化、移動操作開銷
樹和排序：樹的查找、添加和平衡
散列：空間換取時間、空間利用率和算法效率
圖：路徑算法、預處理和隨機處理

模塊的規劃、接口
模塊的加載、依賴、循環依賴
模塊作用域和export
script加載和同步、請求合并、壓縮代碼
模塊的重用和沖突

MVC基礎：3層模型和耦合度
耦合的問題和消除
數據獨立性、獨立數據模型

設計模式：優點、常見模式
自定義事件、事件隊列管理、事件的傳遞、事件對象和參數、監聽模式的問題
數據隊列的管理、反向監聽和解耦合、模塊獨立性

 第五階段
JQuery

JQuery基礎：$、選擇器、獲取元素、添加事件
JQuery的選擇器：層級、屬性、偽類等
樣式和屬性操作：css、attr方法、JQuery的鏈式操作和可選參數
鼠標事件：click、hover、toggle
JQuery特效：slideDown/slideUp、fadeIn/fadeOut
JQuery動畫：animate、stop、速度控制、二級菜單
mouseleave和mouseenter事件的使用
實例：JQuery選項卡
JQuery的DOM操作：創建、添加、插入、包裹、刪除
JQuery的事件操作：冒泡、默認事件、事件綁定、事件委托、事件對象
JQuery中的大小、位置：height()/width()、outerHeight()、position()、offset()
JQuery中的其他操作：each、和DOM元素的轉換、class操作、html()
JQuery工具：$.browser、$.trim()
JQuery的Ajax：$.get()、$.ajax()
實例：JQuery拖拽、JQuery留言板
JQuery的各種bug
JQuery插件的使用：fancybox
編寫JQuery插件：靜態方法、extend()
實例：自定義JQuery插件——選項卡、自定義組件

第六階段
HTML5+CSS3

HTML5/CSS3新特性
文檔頭和編碼聲明
語義化標簽，HTML5標簽的兼容處理，HTML5標簽SEO
新的元素選擇器，HTML5中的選擇器
本地存儲，安全性、容量、和cookie區別
HTML5表單新特性，新的input類型，placeholder的使用和兼容，表單自動校驗
FileReader和文件拖拽
geoLocation
canvas，功能和操作，圖表、游戲和動畫
WebGL，全3D網頁瀏覽
video、audio
離線應用，Manifest文件編寫
桌面提醒
webSocket，優點，和Ajax的區別
webWorker，用途和優點
webSql
CSS3新特性，文本溢出，分欄模式，背景，圓角，陰影，漸變，transform，CSS3動畫，rgba等
HTML5的應用范圍
CSS3基礎
css3與css2的區別，CSS3的兼容性，瀏覽器前綴，不需要前綴的樣式
實例：CSS3旋轉
JS設置CSS3樣式，setStyle3()的封裝，IE前綴的問題
實例：CSS3運動框架基礎
transition基本使用，transition的參數，不同運動形式的區別
transition運用范圍，transition和JS平滑結合，transition的問題
實例：純CSS3滑動二級菜單
實例：淡入淡出幻燈片
border-radius的使用，圓角的單位，圓角大小的測量（PS中），圓角的各種參數
實例：圓角圖片框
rgba的使用，rgba和opacity的區別，rgba的應用，rgba和漸變
實例：半透明遮罩文字的新寫法
text-shadow的用法，各種參數，配合rgba的另類用途
實例：文字模糊效果
box-shadow的用法，內投影和外投影，擴展陰影
實例：CSS3按鈕
實例：CSS3模擬PS的外發光效果
實例：文本框模糊效果
線性漸變的使用，最簡形式，漸變方向的控制，多點漸變和rgba的結合
實例：CSS3進度條的繪制
圓形漸變的使用，中心點位置，形狀和大小
實例：CSS3彩虹圈
CSS3變形和應用
transform的作用，旋轉、縮放、位移、傾斜的使用，transform與內聯元素
實例：各種變形的使用和組合
rotate的使用，deg，origin的使用，origin的各種寫法，角度的換算
實例：CSS3時鐘
scale的使用，等比縮放和拉伸，翻轉和變形，scale和改變寬高的區別，CSS3屬性和盒模型尺寸 ，scale 的其他寫法
實例：CSS3圖片放大
實例：官網登錄框淡入淡出
skew的使用，PS中的傾斜，傾斜模擬旋轉
translate的使用，translate和left、top的區別
實例：CSS3傾斜導航條
多transform組合使用，順序的問題
CSS3 3D變換，3D旋轉，perspective的使用
實例：3D旋轉和2D旋轉的比較
實例：safari歷史記錄效果（官網作品展示）
3D變換的坐標系，旋轉方向的分辨，perspective的兩種用法
backface-visibility的使用和問題
實例：記憶力大考驗游戲
實例：官網登錄、注冊框
backface-visibility的bug，translate另類解決方法
transform-style的使用，3D空間的繼承
實例：翻書效果
實例：鼠標、鍵盤控制的3D盒子
實例：圖片拆分、翻轉
實例：3D圖片環
CSS3動畫
純CSS動畫animate，關鍵幀，格式和編寫
animate的調用，時間單位和重用
animate的可選屬性，運動類型、延遲、重復、重置
animate和JS的配合
實例：旋轉的風車
animate和transition的比較
動畫結束的檢測，Mozilla的問題和解決
自定義鏈式動畫庫
JS運動和CSS3動畫
實例：3D幻燈片
圓角的精確控制
CSS3多背景和背景尺寸控制
漸變高級應用，控制點、重復背景、漸變與背景結合
實例：CSS3+JS實現的圖片倒影
實例：光線劃過效果
本地存儲
本地存儲和cookie的區別，localStorage和sessionStorage的區別
localStorage的支持情況，兼容性檢測
添加、刪除數據，刪除數據
localStorage使用的注意事項
實例：基于localStorage的待辦事項
localStorage的方法和屬性，setItem、getItem
清空localStorage，遍歷localStorage的方法
實例：基于localStorage的記事本
localStorage的事件，onstorage的兼容性寫法，事件對象的各種屬性：key、oldValue、newValue、url/uri
Json對象的方法，stringify、parse，parse和eval的區別
調試工具的使用
窗口間通信
實例：所有頁面保持同步的列表
實例：同步拖拽
地理信息
geolocation的用法，地理信息的定位精度，測試geolocation的方法
兼容性和兼容檢測，getCurrentPosition()的使用
返回結果的作用：accuracy、latitude和longitude、altitude和altitudeAccuracy 、heading和speed
實例：配合百度地圖顯示當前位置
獲取失敗的處理，message、code，授權和常見錯誤
可選參數，高精度模式，超時處理
監聽地理位置變化
HTML5特性、表單
contenteditable的作用
實例：基于ajax的簡易excel
自定義數據的使用，兼容性，自定義數據配合JS，優點、缺點
HTML5表單特性，placeholder的使用，autocomplete和autofocus
新的input類型，控制手機輸入法
實例：JS處理placeholder兼容問題
HTML5表單驗證，required屬性的使用，pattern屬性的使用
實例：純HTML5表單驗證
下拉選擇框，search和datalist
novalidate屬性、multiple屬性
JS配合HTML5表單校驗，checkValidity()方法的使用

第七階段
PHP核心技術

PHP基礎：變量、函數、傳參、返回值、echo
數組、字符串、字符串連接
引號的問題、字符串中的變量、跨行字符串
常用操作：push、pop、substring等
PHP中的面向對象：class、parent、繼承、方法和屬性
PHP的表單操作：GET、POST、COOKIE和FILE

第八階段
Video、Audio、canvas

video、audio基礎，支持和兼容性
基本形式，src屬性，不支持的文字提示
可選參數：controls、autoplay、loop
文件格式支持，source標簽的使用
實例：原生視頻播放
各瀏覽器下的工具樣式
實例：編寫自己的播放器
play()方法、pause()方法，stop方法的模擬，currentTime屬性的使用
實例：播放、暫停和停止
duration屬性，durationchange事件，DOM3事件注意事項
實例：顯示和控制當前播放進度
timeupdate事件，onend事件
實例：播放結束彈出“相關推薦”彈出層
progress事件，buffer對象，end()方法
實例：顯示視頻加載進度
muted屬性，volume屬性
實例：控制播放音量
canplay、canplaythrough事件的使用，loadeddata事件
error和emptied事件的區別，加載錯誤處理
實例：數據緩沖和錯誤提醒
canPlayType()的使用
實例：打開外部文件并播放
實例：用localStorage和json持久化，完成播放列表和播放進度記錄
實例：繪圖板鉛筆工具
實例：繪圖板矩形工具
實例：繪圖板橡皮擦工具
drawImage()方法繪制圖片，drawImage()方法的三種形式
實例：繪圖板的拖拽上傳圖片
createPattern()方法創建平鋪圖案
實例：自定義填充
toDataURL()方法導出canvas圖像
實例：繪圖板“保存”功能的實現
實例：post將圖片上傳到服務器
drawImage()方法的高級應用，用精靈圖實現人物行走功能
實例：行走的小人
封裝ZImg對象，物體的定位、碰撞檢測
canvas中的事件檢測，繪制線程
實例：可以拖拽的canvas圖片
實例：canvas飛機游戲
實例：繪制柱狀圖
實例：繪制折線圖
實例：繪制餅圖
實例：繪制3D柱狀圖
ZObject類，基本屬性：位置、父級、子級，方法：appendChild()、removeChild()、draw()、ev()、pointIn()，事件：mousedown/mouseup/click/mousemove/mouseover/mouseout
實例：編寫并通過繼承擴展ZObject類
ZRect類、ZImg類，圖片裁切，設置各種樣式
實例：用ZRect類重寫canvas時鐘

第九階段
客戶端緩存

桌面通知基礎，webkitNotifications對象的使用
createNotification()方法的參數，設定通知圖標，設置標題和內容
用checkPermission()檢查用戶授權，requestPermission()請求權限
實例：彈出桌面通知
show()、close()方法的使用
實例：通知的延時自動關閉
通知的各種事件：ondisplay、onclick、onclose、onerror
實例：點擊通知后定位到指定消息
彈出HTML通知
離線應用基礎，緩存離線資源，在線狀態檢測，本地數據存儲和同步
實例：自動通知用戶在線狀態
manifest文件的編寫，manifest文件的引入，NETWORK段、CACHE段、FALLBACK段的使用
manifest文件實例
實例：可離線使用的記事本
緩存更新的兩種方法和策略，applicationCache對象的使用
UPDATEREADY狀態，update()方法
navigator.onLine屬性的檢測
online、offline事件的使用
實例：服務器、本地緩存同步
webWorker和webSql
WebWorker基本使用，多線程的概念
創建worker，onmessage事件
通過data獲取線程消息
實例：用webWorker計算菲波那切數列，與主線程分離
postMessage()方法傳遞數據
onerror事件
terminate()/close()方法終止線程運行
實例：用worker與服務器通信
子線程中的this
webWorker的問題
webSql基本使用
數據庫的基本使用：CREATE語句、SELECT語句、INSERT語句、DELETE語句、UPDATE語句
openDatabase()方法打開數據庫
transaction()方法進行事務處理，事務處理的原子性
事務上下文的使用
實例：創建數據庫，并創建數據表
executeSql()方法執行Sql語句
result的屬性和方法
實例：插入數據、獲取數據
實例：記賬管理系統

第十階段
webGL

webGL基礎
webGL效果演示
webGL的基本組成：場景、渲染器、光源、攝像機、物體
場景：創建、添加
渲染器：SVG、canvas、webGL三種渲染器的使用和區別
光源：平行光、點光源、環境光的區別和使用，制定光源的顏色、強度、照射距離
攝像機：矩形攝像機、景深攝像機的區別，攝像機的遠點、近點、寬高比等屬性的設置
物體的形狀和材質，簡單的立方體，朗伯材質的特點和使用，制定物體顏色、光特性，mesh的使用
實例：第一個全3D網頁程序
render()方法和渲染參數
物體的位置、旋轉、縮放屬性的設置
實例：鍵盤控制的3D方塊
循環渲染，requestAnimationFrame()的原理和使用
實例：鼠標控制攝像機移動
高品質渲染和抗鋸齒選項
線框渲染
物體投影，光源投影
實例：碰撞墻壁反彈的小球
webGL應用
系統自帶標準幾何形狀：平面、立方體、球體、圓臺、八面體、托雷斯體
實例：各種幾何形狀的使用
add()方法給物體添加子對象
平面體的使用
materials數組，為各個面單獨指定材質
faces數組，引用各個材質面
實例：構建復雜的3D模型 擺動的鐘
導入外部模型文件
骨骼的控制
讓外部模型動起來