咩星征服計劃 用 js 征服地球part vi

咩星征服計劃

用 JS 征服地球 最終回

羊小咩 Lamb MeiLamb-mei@homakimi.comlamb@lamb-mei.com

最終回

感想…

這麼拉賽的事情終於要結束了

前面這張放錯了

很開心有機會把自己所學所得分享給大家

course content

course content

• jQuery AJAX• jQuery Plugin• Front End Skill

jQuery AJAX

jQuery AJAX

非同步的 Javascript And XML

jQuery AJAX

Ｗ hat the 發

jQuery AJAX

AJAX Example

jQuery AJAX － Example

Auto Complete

jQuery AJAX － Example

置底更新

jQuery AJAX － Example

表單驗證

圖片來源 http://images.cnblogs.com/cnblogs_com/xiaobaigang/reg.jpg

jQuery AJAX

常用時機

jQuery AJAX

常用時機當做了一個動作

必須取得資料並更新畫面（不能 Reload 畫面）

jQuery AJAX

Create & SendXMLHttpRequest

Browser

AJAX Works

jQuery AJAX

Create & SendXMLHttpRequest

Browser

AJAX Works

jQuery AJAX

Create & SendXMLHttpRequest

Browser

AJAX WorksServer

jQuery AJAX

Create & SendXMLHttpRequest

Browser

AJAX Works

Process HttpRequest

Server

jQuery AJAX

Create & SendXMLHttpRequest

Browser

AJAX Works

Process HttpRequest

Create Response

Server

jQuery AJAX

Browser

AJAX Works

Process HttpRequest

Create Response

Server

jQuery AJAX

Process returmed Data

Browser

AJAX Works

Process HttpRequest

Create Response

Server

jQuery AJAX

Process returmed Data

Update page content

Browser

AJAX Works

Process HttpRequest

Create Response

Server

jQuery AJAX

.ajax( url [, settings ] )執行非同步 AJAX 請求

jQuery AJAX

.post( url [, data ] [, success(data, textStatus, jqXHR) ] [, dataType ] )

從 Server 使用 Post 取得資料

jQuery AJAX

.get( url [, data ] [, success(data, textStatus, jqXHR) ] [, dataType ] )

從 Server 使用 Get 取得資料

jQuery Plugin

jQuery Plugin

jQuery UI

jQuery Plugin

bootstrap Javascript

jQuery Plugin

Lightbox2

jQuery Plugin

magnific-popup

jQuery Plugin

Masonry

jQuery Plugin

flexslider

jQuery Plugin

flexslider 2

jQuery Plugin

File Upload

Front End Skill

當你還在玩泥巴

別人已經…

別人已經…

http://sass-lang.com/

Syntactically Awesome Stylesheets

Front End Skill

http://compass-style.org/

Front End Skill

Front End Skill

Softwave

Front End Skill

http://compass.kkbox.com/

Front End Skill

Compass 不是神器只是方便處理 CSS 的工具

Front End Skill

http://fireapp.kkbox.com/

Front End Skill

Fire.app 可以處理 Layout & Prototype

Front End Skill

http://incident57.com/codekit/

Front End Skill

Next ?!

羊小咩 Lamb MeiLamb-mei@homakimi.comlamb@lamb-mei.com

2014 / 01 / 09

Thank You!