JavaScript Web Development

1. JavaScript Web Development Introduction (1/2) Vito Jeng [email_address]

2. Agenda Web 2.0 & Ajax Architecture

3. Unobtrusive 非侵入性

4. JavaScript

5. CSS

6. Web 2.0 Technology AJAX

7. JavaScript

8. CSS

9. HTML

10. AJAX Architecture Browser HTTP Request HTML new page Classic Web Server Browser Asynchronous Request AJAX Web Server HTTP Request HTML new page Asynchronous Response (HTML/XML/JSON/Raw data)‏ simple javascript function ajax library

11. Ajax Running Scenario Browser Asynchronous Request Web Server HTTP Request HTML new page JSON Response input URL after page loaded: GET data Asynchronous Request JSON Response click: for GET data Asynchronous Request JSON Response click: for POST data Asynchronous Request JSON Response ready for user browsing

12. Unobtrusive 非侵入性網頁三劍客 : HTML, CSS, JavaScrript Content, Layout, Interaction Example 內容 , 版面 Content, Layout http://transcendingcss.com/

13. http://jquery.com/ 內容 , 版面 , 互動 Content, Layout, Interaction http://www.ihwy.com/labs/Demos/Current/jquery-listnav-plugin.aspx

14. JavaScript

15. Advantage Standard - most important things in the web world

16. Stable - save our investment

17. Widespread - every browser include

18. Script

19. Simple

20. Disadvantage Some different implement in browser javascript

21. object behavior in browser Not easy

22. No strong IDE support

23. CONTENT ONLY !! Content 使用 HTML tag 組織文字內容

24. 增強 SEO ( S earch E ngine O ptimization)

25. 只使用與內容編排有關的 tag div, hx, ul, li, a, ...

26. font, b, strong, ... <html> <head> </head> <body> <div id="content"> <h3></h3> <p></p> <h3></h3> <p></p> <h3></h3> <p></p> </div> <ul> <li></li> <li></li> </ul> </body> </html>

27. Layout Use CSS to organize static layout p { font-size:100%; margin-right:20px; } #content { padding:0.5em 0 1em; }

28. Interaction MOUSE OVER Use JavaScript to improve dynamic & interaction effect

29. JavaScript 使用JavaScript將HTML(內容)切割至不同的分頁(Tab) 使用JavaScript將HTML(內容)做篩選(Filter) 提昇客戶瀏覽體驗

30. JavaScript feature C like

31. dynamic type – duck typeing If it walks like a duck and quacks like a duck, I would call it a duck. prototype based

32. runtime evaluation eval function

33. variable scope varA = ‘Hello’; console.log(varA); console.log(window.varA); function testScope (){ var varB = ‘javascript’; console.log(varB); } testScope(); console.log(varB); function logMessage (msg){ console.log(msg); }; logMessage('Hi'); window['logMessage']('Hi');

34. Array var cars = new Array(car1, car2, car3); var cars = [car1, car2, car3]; // array initializer cars.push( car4 ); var mix = [100, ‘Good’, [1,2,3], cars];

35. Object var customer = { name: ‘John’, address: ‘Taiwan’, tel: ‘123456’, orders: [ {pid: 1, qty: 3, amount: 120}, {pid: 8, qty: 1, amount: 800} ] }; var car = new Object(); var car = {color:’red’, price: 1500}; // object initializer car.color = ‘red’; car.price = 1500; car[‘door’] = 2; console.log( car[‘color’] ); console.log( car[‘price’] ); console.log( car.door ); delete car.price; if ('price' in car) car.price = 1200; if (car.price !== undefined) car.price = 1600

36. JSON data format var customer = { name: ‘John’, address: ‘Taiwan’, tel: ‘123456’, orders: [ {pid: 1, qty: 3, amount: 120}, {pid: 8, qty: 1, amount: 800} ] }; var data="{name: ‘John’,address: ‘Taiwan’,tel: ‘123456’,orders: [{pid: 1, qty: 3,amount: 120},{pid: 8, qty: 1, amount: 800}]}"; var customer = eval ('(' + data + ')'); JavaScript Object Notation http://json.org/

37. widespread use

38. small ,simple to convert

39. Loop var cars = [] for (var i=0; i<cars.length; i++){ // do something... } var car = {color:’red’, price: 1500000}; // object initializer for (var name in car) { console.log(car[name]); }

40. Function function sum(a, b) { return a+b; } console.log(sum(1,2)); var sum = function(a, b){ return a+b; } var b = sum; console.log( b(1,2) ); var sum = function(){ var a = arguments[0]; var b = arguments[1]; return a+b; } console.log( sum(1,2) ); var ftp = { download: function(file){ // do something }, upload: function(file){ // do something } }

41. Function // constructor var Customer = function(name, address){ this.name = name; this.address = address; this.say = function(msg){ alert(this.name+':'+msg); } } var c1 = new Customer('vito', 'Hsinchu'); var c2 = new Customer('john', 'Taipei'); console.log(c1); console.log(c2); c1.say('JavaScript'); c2.say('Python'); c1.say.call(c2, 'JavaScript');

42. Why CSS ?

43. CSS 解除 HTML 的混亂狀態

44. 強大的樣式指令

45. 撰寫容易

46. 重覆使用

47. JavaScript Library 支援

48. CSS .css file: p {font-size: 12px} h1,h2,h3,h,h5,div {color: red;} .content { font-size:12px; color:red; }

49. CSS .html file: <style type='text/css'> p {font-size: 12px} h1,h2,h3,h,h5,div {color: red;} .content { font-size:12px; color:red; } </style>

50. CSS inline style: <div style='font-size:12px; color:red;'> <p></p> <p></p> </div>

51. CSS outline p { font-size: 12px; color: red; } p -> selector font-size, color -> property 12px, red -> value font-size: 12px; -> declaration

52. Selector 選取項最強大的指令 – 大海撈針

53. 全部選取 ( 群組 ): ＊

54. 標籤選取 ( 群組 ) : div, p, ...

55. 類別選取 ( 群組 ) : .class_name

56. ID 選取 ( 單一 ): # id_name

57. Selector 選取項 * {font-size:12px;} .content {color:red;} div[class] {color: red;} div[class=‘content’] {color: red;}

58. 階層式選取 div {color: black;} div p a {color: blue;} div.content p a {color: mediumblue;} #special p a {color: navy;}

59. Case study Tutorials:Live Examples of jQuery http://docs.jquery.com/Tutorials:Live_Examples_of_jQuery Ajax using jQuery load HTML/JSON data http://docs.jquery.com/Ajax/load

60. http://docs.jquery.com/Ajax/jQuery.getJSON callback function http://docs.jquery.com/How_jQuery_Works#Callbacks_and_Functions

61. Learning path sharing 選擇一個你喜歡的 Library, 持續使用 . Database WebAP: 使用 ExtJS

62. Content Web: 使用 jQuery 立刻使用 Firefox 並裝上 Firebug !!

63. 拒絕使用 document.getElementById(), 提高生產力

64. 跨瀏覽器的問題 (javascript, css, browser) - 避免正面衝突直接使用 Library, 避開大部份問題透過 community 學習 : example, document

65. 逐步提昇 javascript 基本概念即可 .

66. CSS 能力 : Database WebAP: 具備 CSS 基本能力即可 +Firebug

67. Content Web: 提昇 CSS 能力 , 進入 Zen Garden 層次

68. 進入前 , 挑選稱手的工具吧 Ajax - Aptana

69. Html / CSS – Dreamweaver(commerical)

70. Javascript – Spket, Aptana

71. Debug – FireBug

72. Other Web Developer

73. PSPad 結論 : 沒有萬能工具

74. 謝謝 !!

75. Home work 安裝 Firefox(FF) 及 Firebug(FB)

76. 建立一個空白 HTML 頁面 , 在 FF 開啟 FB, 在 Console 頁面使用 console api 顯示 "Hello World"( 分別以 info, error, log, warn 顯示 )

77. 請在 FB 的畫面手動輸入 p.15 內的程式 , 執行並觀察 window 物件的內容

78. 請在 FB 的畫面手動輸入 p.18 內的程式 , 執行並觀察 customer 物件的內容

79. 參考 p.20 建立 ftp 物件 , 並實際呼叫其方法以下作業有時間 , 有興趣挑戰的同學 , 請完成 . 使用 p.31 Case Study 的 getJSON 範例 , 讀取下列 picasa 的影像資料 : http://picasaweb.google.com/data/feed/base/user/documentingpicasa?category=album&alt=json&access=public

80. Hint: image src is here data.feed.entry[i].link[j].href

JavaScript Web Development

Recommended

More Related Content

What's hot (19)

Viewers also liked (20)

Similar to JavaScript Web Development (20)

More from vito jeng (6)

Recently uploaded (20)

JavaScript Web Development