JavaScript Web Development

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

3. Unobtrusive 非侵入性

4. JavaScript

5. CSS

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

14. JavaScript

16. Stable - save our investment

17. Widespread - every browser include

18. Script

19. Simple

22. No strong IDE support

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

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>

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

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

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 ?

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

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;}

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

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

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

69. Html / CSS – Dreamweaver(commerical)

70. Javascript – Spket, Aptana

71. Debug – FireBug

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

74. 謝謝 !!

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

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

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

JavaScript Web Development

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (20)

Similaire à JavaScript Web Development

Similaire à JavaScript Web Development (20)

Plus de vito jeng

Plus de vito jeng (6)

Dernier

Dernier (20)

JavaScript Web Development