F2e class #2

TonyQ

https://slid.es/tonyq/f2e-class-2  (http://goo.gl/4Lfnee )

請先抓 bootstrap 2.3.2 
jQuery 1.10.2 ( 如果打開是 js,右鍵另存檔案)

前情提要


上週我們講了  HTML 基礎

CSS ... 講了一點點

JavaScript ...講了一點點

但重點是實作。


萬用範例


手刻 TODO  List 

第一章

切版


第一章

切版

第一章

切版

第一章

mockup 


第一章

打底
bootstrap 套用
jQuery 引入

第二章

事件

          1. Enter => 送出
keydown


第二章

事件

2. 點擊刪除
hover
click

第二章

事件

3. 資料儲存
ajax (localstorage)

第二章

事件

4. 雙擊兩下修改
dblclick

第三章

validation / popup

驗證內容是空白時,在畫面提醒使用者


第四章

Reuse 

如何讓多個 Todo Board 在同一個畫面?

從綁定元素到條件契約

$("#todoboard") #=>  $(".todoBoard")

第四章

Reuse

跨元素互動
Pub-sub

第四章

Reuse 

讓程式碼 Load on demand #=> RequireJS




第四章

Reuse 
合併 JS 產出結果

NoteJS
r.js 

第五章

Security

XSS issue

第五章

Security
CSRF issue

第五章

Security
Phishing

Q&A



F2e class #2

By TonyQ Wang

F2e class #2

  • 3,895