咩星征服計劃 用 js 征服地球part vi
DESCRIPTION
jQuery AJAX jQuery Plugin Front End SkillTRANSCRIPT
![Page 1: 咩星征服計劃 用 Js 征服地球Part VI](https://reader033.vdocuments.net/reader033/viewer/2022061618/554d0240b4c905d4568b4651/html5/thumbnails/1.jpg)
咩星征服計劃
用 JS 征服地球 最終回
![Page 2: 咩星征服計劃 用 Js 征服地球Part VI](https://reader033.vdocuments.net/reader033/viewer/2022061618/554d0240b4c905d4568b4651/html5/thumbnails/2.jpg)
羊小咩 Lamb [email protected]@lamb-mei.com
![Page 3: 咩星征服計劃 用 Js 征服地球Part VI](https://reader033.vdocuments.net/reader033/viewer/2022061618/554d0240b4c905d4568b4651/html5/thumbnails/3.jpg)
最終回
![Page 4: 咩星征服計劃 用 Js 征服地球Part VI](https://reader033.vdocuments.net/reader033/viewer/2022061618/554d0240b4c905d4568b4651/html5/thumbnails/4.jpg)
感想…
![Page 5: 咩星征服計劃 用 Js 征服地球Part VI](https://reader033.vdocuments.net/reader033/viewer/2022061618/554d0240b4c905d4568b4651/html5/thumbnails/5.jpg)
這麼拉賽的事情終於要結束了
![Page 6: 咩星征服計劃 用 Js 征服地球Part VI](https://reader033.vdocuments.net/reader033/viewer/2022061618/554d0240b4c905d4568b4651/html5/thumbnails/6.jpg)
前面這張放錯了
![Page 7: 咩星征服計劃 用 Js 征服地球Part VI](https://reader033.vdocuments.net/reader033/viewer/2022061618/554d0240b4c905d4568b4651/html5/thumbnails/7.jpg)
很開心有機會把自己所學所得分享給大家
![Page 8: 咩星征服計劃 用 Js 征服地球Part VI](https://reader033.vdocuments.net/reader033/viewer/2022061618/554d0240b4c905d4568b4651/html5/thumbnails/8.jpg)
course content
![Page 9: 咩星征服計劃 用 Js 征服地球Part VI](https://reader033.vdocuments.net/reader033/viewer/2022061618/554d0240b4c905d4568b4651/html5/thumbnails/9.jpg)
course content
• jQuery AJAX• jQuery Plugin• Front End Skill
![Page 10: 咩星征服計劃 用 Js 征服地球Part VI](https://reader033.vdocuments.net/reader033/viewer/2022061618/554d0240b4c905d4568b4651/html5/thumbnails/10.jpg)
jQuery AJAX
![Page 11: 咩星征服計劃 用 Js 征服地球Part VI](https://reader033.vdocuments.net/reader033/viewer/2022061618/554d0240b4c905d4568b4651/html5/thumbnails/11.jpg)
jQuery AJAX
非同步的 Javascript And XML
![Page 12: 咩星征服計劃 用 Js 征服地球Part VI](https://reader033.vdocuments.net/reader033/viewer/2022061618/554d0240b4c905d4568b4651/html5/thumbnails/12.jpg)
jQuery AJAX
W hat the 發
![Page 13: 咩星征服計劃 用 Js 征服地球Part VI](https://reader033.vdocuments.net/reader033/viewer/2022061618/554d0240b4c905d4568b4651/html5/thumbnails/13.jpg)
jQuery AJAX
AJAX Example
![Page 14: 咩星征服計劃 用 Js 征服地球Part VI](https://reader033.vdocuments.net/reader033/viewer/2022061618/554d0240b4c905d4568b4651/html5/thumbnails/14.jpg)
jQuery AJAX - Example
Auto Complete
![Page 15: 咩星征服計劃 用 Js 征服地球Part VI](https://reader033.vdocuments.net/reader033/viewer/2022061618/554d0240b4c905d4568b4651/html5/thumbnails/15.jpg)
jQuery AJAX - Example
置底更新
![Page 16: 咩星征服計劃 用 Js 征服地球Part VI](https://reader033.vdocuments.net/reader033/viewer/2022061618/554d0240b4c905d4568b4651/html5/thumbnails/16.jpg)
jQuery AJAX - Example
表單驗證
圖片來源 http://images.cnblogs.com/cnblogs_com/xiaobaigang/reg.jpg
![Page 17: 咩星征服計劃 用 Js 征服地球Part VI](https://reader033.vdocuments.net/reader033/viewer/2022061618/554d0240b4c905d4568b4651/html5/thumbnails/17.jpg)
jQuery AJAX
常用時機
![Page 18: 咩星征服計劃 用 Js 征服地球Part VI](https://reader033.vdocuments.net/reader033/viewer/2022061618/554d0240b4c905d4568b4651/html5/thumbnails/18.jpg)
jQuery AJAX
常用時機當做了一個動作
必須取得資料並更新畫面(不能 Reload 畫面)
![Page 19: 咩星征服計劃 用 Js 征服地球Part VI](https://reader033.vdocuments.net/reader033/viewer/2022061618/554d0240b4c905d4568b4651/html5/thumbnails/19.jpg)
jQuery AJAX
Create & SendXMLHttpRequest
Browser
AJAX Works
![Page 20: 咩星征服計劃 用 Js 征服地球Part VI](https://reader033.vdocuments.net/reader033/viewer/2022061618/554d0240b4c905d4568b4651/html5/thumbnails/20.jpg)
jQuery AJAX
Create & SendXMLHttpRequest
Browser
AJAX Works
![Page 21: 咩星征服計劃 用 Js 征服地球Part VI](https://reader033.vdocuments.net/reader033/viewer/2022061618/554d0240b4c905d4568b4651/html5/thumbnails/21.jpg)
jQuery AJAX
Create & SendXMLHttpRequest
Browser
AJAX WorksServer
![Page 22: 咩星征服計劃 用 Js 征服地球Part VI](https://reader033.vdocuments.net/reader033/viewer/2022061618/554d0240b4c905d4568b4651/html5/thumbnails/22.jpg)
jQuery AJAX
Create & SendXMLHttpRequest
Browser
AJAX Works
Process HttpRequest
Server
![Page 23: 咩星征服計劃 用 Js 征服地球Part VI](https://reader033.vdocuments.net/reader033/viewer/2022061618/554d0240b4c905d4568b4651/html5/thumbnails/23.jpg)
jQuery AJAX
Create & SendXMLHttpRequest
Browser
AJAX Works
Process HttpRequest
Create Response
Server
![Page 24: 咩星征服計劃 用 Js 征服地球Part VI](https://reader033.vdocuments.net/reader033/viewer/2022061618/554d0240b4c905d4568b4651/html5/thumbnails/24.jpg)
jQuery AJAX
Browser
AJAX Works
Process HttpRequest
Create Response
Server
![Page 25: 咩星征服計劃 用 Js 征服地球Part VI](https://reader033.vdocuments.net/reader033/viewer/2022061618/554d0240b4c905d4568b4651/html5/thumbnails/25.jpg)
jQuery AJAX
Process returmed Data
Browser
AJAX Works
Process HttpRequest
Create Response
Server
![Page 26: 咩星征服計劃 用 Js 征服地球Part VI](https://reader033.vdocuments.net/reader033/viewer/2022061618/554d0240b4c905d4568b4651/html5/thumbnails/26.jpg)
jQuery AJAX
Process returmed Data
Update page content
Browser
AJAX Works
Process HttpRequest
Create Response
Server
![Page 27: 咩星征服計劃 用 Js 征服地球Part VI](https://reader033.vdocuments.net/reader033/viewer/2022061618/554d0240b4c905d4568b4651/html5/thumbnails/27.jpg)
jQuery AJAX
.ajax( url [, settings ] )執行非同步 AJAX 請求
![Page 28: 咩星征服計劃 用 Js 征服地球Part VI](https://reader033.vdocuments.net/reader033/viewer/2022061618/554d0240b4c905d4568b4651/html5/thumbnails/28.jpg)
jQuery AJAX
.post( url [, data ] [, success(data, textStatus, jqXHR) ] [, dataType ] )
從 Server 使用 Post 取得資料
![Page 29: 咩星征服計劃 用 Js 征服地球Part VI](https://reader033.vdocuments.net/reader033/viewer/2022061618/554d0240b4c905d4568b4651/html5/thumbnails/29.jpg)
jQuery AJAX
.get( url [, data ] [, success(data, textStatus, jqXHR) ] [, dataType ] )
從 Server 使用 Get 取得資料
![Page 30: 咩星征服計劃 用 Js 征服地球Part VI](https://reader033.vdocuments.net/reader033/viewer/2022061618/554d0240b4c905d4568b4651/html5/thumbnails/30.jpg)
jQuery Plugin
![Page 39: 咩星征服計劃 用 Js 征服地球Part VI](https://reader033.vdocuments.net/reader033/viewer/2022061618/554d0240b4c905d4568b4651/html5/thumbnails/39.jpg)
Front End Skill
![Page 40: 咩星征服計劃 用 Js 征服地球Part VI](https://reader033.vdocuments.net/reader033/viewer/2022061618/554d0240b4c905d4568b4651/html5/thumbnails/40.jpg)
當你還在玩泥巴
![Page 41: 咩星征服計劃 用 Js 征服地球Part VI](https://reader033.vdocuments.net/reader033/viewer/2022061618/554d0240b4c905d4568b4651/html5/thumbnails/41.jpg)
別人已經…
![Page 42: 咩星征服計劃 用 Js 征服地球Part VI](https://reader033.vdocuments.net/reader033/viewer/2022061618/554d0240b4c905d4568b4651/html5/thumbnails/42.jpg)
別人已經…
![Page 43: 咩星征服計劃 用 Js 征服地球Part VI](https://reader033.vdocuments.net/reader033/viewer/2022061618/554d0240b4c905d4568b4651/html5/thumbnails/43.jpg)
http://sass-lang.com/
Syntactically Awesome Stylesheets
Front End Skill
![Page 44: 咩星征服計劃 用 Js 征服地球Part VI](https://reader033.vdocuments.net/reader033/viewer/2022061618/554d0240b4c905d4568b4651/html5/thumbnails/44.jpg)
http://compass-style.org/
Front End Skill
![Page 45: 咩星征服計劃 用 Js 征服地球Part VI](https://reader033.vdocuments.net/reader033/viewer/2022061618/554d0240b4c905d4568b4651/html5/thumbnails/45.jpg)
Front End Skill
![Page 46: 咩星征服計劃 用 Js 征服地球Part VI](https://reader033.vdocuments.net/reader033/viewer/2022061618/554d0240b4c905d4568b4651/html5/thumbnails/46.jpg)
Softwave
Front End Skill
![Page 48: 咩星征服計劃 用 Js 征服地球Part VI](https://reader033.vdocuments.net/reader033/viewer/2022061618/554d0240b4c905d4568b4651/html5/thumbnails/48.jpg)
Compass 不是神器只是方便處理 CSS 的工具
Front End Skill
![Page 50: 咩星征服計劃 用 Js 征服地球Part VI](https://reader033.vdocuments.net/reader033/viewer/2022061618/554d0240b4c905d4568b4651/html5/thumbnails/50.jpg)
Fire.app 可以處理 Layout & Prototype
Front End Skill
![Page 51: 咩星征服計劃 用 Js 征服地球Part VI](https://reader033.vdocuments.net/reader033/viewer/2022061618/554d0240b4c905d4568b4651/html5/thumbnails/51.jpg)
http://incident57.com/codekit/
Front End Skill
![Page 52: 咩星征服計劃 用 Js 征服地球Part VI](https://reader033.vdocuments.net/reader033/viewer/2022061618/554d0240b4c905d4568b4651/html5/thumbnails/52.jpg)
Next ?!
![Page 53: 咩星征服計劃 用 Js 征服地球Part VI](https://reader033.vdocuments.net/reader033/viewer/2022061618/554d0240b4c905d4568b4651/html5/thumbnails/53.jpg)
![Page 54: 咩星征服計劃 用 Js 征服地球Part VI](https://reader033.vdocuments.net/reader033/viewer/2022061618/554d0240b4c905d4568b4651/html5/thumbnails/54.jpg)