JavaScript Web Development

1,905
-1

Published on

很久以前為了 training 而做的 slide,不過 2/2 後來因為懶得上傳,現在也找不到了 >.<
幸好 1/2 還有保留下來做記念...

Published in: Education
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,905
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
35
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

JavaScript Web Development

  1. 1. JavaScript Web Development Introduction (1/2) Vito Jeng [email_address]
  2. 2. Agenda <ul><li>Web 2.0 & Ajax Architecture
  3. 3. Unobtrusive 非侵入性
  4. 4. JavaScript
  5. 5. CSS </li></ul>
  6. 6. Web 2.0 Technology <ul><li>AJAX
  7. 7. JavaScript
  8. 8. CSS
  9. 9. HTML </li></ul>
  10. 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. 11. Ajax Running Scenario Browser Asynchronous Request Web Server HTTP Request HTML new page JSON Response <ul><li>input URL </li></ul><ul><li>after page loaded: GET data </li></ul>Asynchronous Request JSON Response click: for GET data Asynchronous Request JSON Response click: for POST data Asynchronous Request JSON Response <ul><li>ready for user browsing </li></ul>
  12. 12. Unobtrusive 非侵入性 <ul><li>網頁三劍客 : HTML, CSS, JavaScrript </li></ul><ul><ul><li>Content, Layout, Interaction </li></ul></ul><ul><li>Example </li></ul><ul><ul><li>內容 , 版面 Content, Layout </li></ul></ul><ul><ul><ul><li>http://transcendingcss.com/
  13. 13. http://jquery.com/ </li></ul></ul></ul><ul><ul><li>內容 , 版面 , 互動 Content, Layout, Interaction </li></ul></ul><ul><ul><ul><li>http://www.ihwy.com/labs/Demos/Current/jquery-listnav-plugin.aspx </li></ul></ul></ul>
  14. 14. JavaScript
  15. 15. Advantage <ul><li>Standard - most important things in the web world
  16. 16. Stable - save our investment
  17. 17. Widespread - every browser include
  18. 18. Script
  19. 19. Simple </li></ul>
  20. 20. Disadvantage <ul><li>Some different implement in browser </li></ul><ul><ul><li>javascript
  21. 21. object behavior in browser </li></ul></ul><ul><li>Not easy
  22. 22. No strong IDE support </li></ul>
  23. 23. CONTENT ONLY !! Content <ul><li>使用 HTML tag 組織文字內容
  24. 24. 增強 SEO ( S earch E ngine O ptimization)
  25. 25. 只使用與內容編排有關的 tag </li></ul><ul><ul><li>div, hx, ul, li, a, ...
  26. 26. font, b, strong, ... </li></ul></ul><html> <head> </head> <body> <div id=&quot;content&quot;> <h3></h3> <p></p> <h3></h3> <p></p> <h3></h3> <p></p> </div> <ul> <li></li> <li></li> </ul> </body> </html>
  27. 27. Layout <ul><li>Use CSS to organize static layout </li></ul>p { font-size:100%; margin-right:20px; } #content { padding:0.5em 0 1em; }
  28. 28. Interaction MOUSE OVER <ul><li>Use JavaScript to improve dynamic & interaction effect </li></ul>
  29. 29. JavaScript 使用JavaScript將HTML(內容)切割至不同的分頁(Tab) 使用JavaScript將HTML(內容)做篩選(Filter) 提昇客戶瀏覽體驗
  30. 30. JavaScript feature <ul><li>C like
  31. 31. dynamic type – duck typeing </li></ul><ul><ul><li>If it walks like a duck and quacks like a duck, I would call it a duck. </li></ul></ul><ul><li>prototype based
  32. 32. runtime evaluation </li></ul><ul><ul><li>eval function </li></ul></ul>
  33. 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. 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. 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. 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=&quot;{name: ‘John’,address: ‘Taiwan’,tel: ‘123456’,orders: [{pid: 1, qty: 3,amount: 120},{pid: 8, qty: 1, amount: 800}]}&quot;; var customer = eval ('(' + data + ')'); <ul><li>JavaScript Object Notation </li></ul><ul><ul><li>http://json.org/
  37. 37. widespread use
  38. 38. small ,simple to convert </li></ul></ul>
  39. 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. 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. 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. 42. Why CSS ?
  43. 43. CSS <ul><li>解除 HTML 的混亂狀態
  44. 44. 強大的樣式指令
  45. 45. 撰寫容易
  46. 46. 重覆使用
  47. 47. JavaScript Library 支援 </li></ul>
  48. 48. CSS .css file: p {font-size: 12px} h1,h2,h3,h,h5,div {color: red;} .content { font-size:12px; color:red; }
  49. 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. 50. CSS inline style: <div style='font-size:12px; color:red;'> <p></p> <p></p> </div>
  51. 51. CSS outline p { font-size: 12px; color: red; } p -> selector font-size, color -> property 12px, red -> value font-size: 12px; -> declaration
  52. 52. Selector 選取項 <ul><li>最強大的指令 – 大海撈針
  53. 53. 全部選取 ( 群組 ): *
  54. 54. 標籤選取 ( 群組 ) : div, p, ...
  55. 55. 類別選取 ( 群組 ) : .class_name
  56. 56. ID 選取 ( 單一 ): # id_name </li></ul>
  57. 57. Selector 選取項 * {font-size:12px;} .content {color:red;} div[class] {color: red;} div[class=‘content’] {color: red;}
  58. 58. 階層式選取 div {color: black;} div p a {color: blue;} div.content p a {color: mediumblue;} #special p a {color: navy;}
  59. 59. Case study <ul><li>Tutorials:Live Examples of jQuery </li></ul><ul><ul><li>http://docs.jquery.com/Tutorials:Live_Examples_of_jQuery </li></ul></ul><ul><li>Ajax using jQuery </li></ul><ul><ul><li>load HTML/JSON data </li></ul></ul><ul><ul><ul><li>http://docs.jquery.com/Ajax/load
  60. 60. http://docs.jquery.com/Ajax/jQuery.getJSON </li></ul></ul></ul><ul><ul><li>callback function </li></ul></ul><ul><ul><ul><li>http://docs.jquery.com/How_jQuery_Works#Callbacks_and_Functions </li></ul></ul></ul>
  61. 61. Learning path sharing <ul><li>選擇一個你喜歡的 Library, 持續使用 . </li></ul><ul><ul><li>Database WebAP: 使用 ExtJS
  62. 62. Content Web: 使用 jQuery </li></ul></ul><ul><li>立刻使用 Firefox 並裝上 Firebug !!
  63. 63. 拒絕使用 document.getElementById(), 提高生產力
  64. 64. 跨瀏覽器的問題 (javascript, css, browser) - 避免正面衝突 </li><ul><li>直接使用 Library, 避開大部份問題 </li></ul><li>透過 community 學習 : example, document
  65. 65. 逐步提昇 javascript 基本概念即可 .
  66. 66. CSS 能力 : </li></ul><ul><ul><li>Database WebAP: 具備 CSS 基本能力即可 +Firebug
  67. 67. Content Web: 提昇 CSS 能力 , 進入 Zen Garden 層次 </li></ul></ul>
  68. 68. 進入前 , 挑選稱手的工具吧 <ul><li>Ajax - Aptana
  69. 69. Html / CSS – Dreamweaver(commerical)
  70. 70. Javascript – Spket, Aptana
  71. 71. Debug – FireBug
  72. 72. Other </li></ul><ul><ul><li>Web Developer
  73. 73. PSPad </li></ul></ul>結論 : 沒有萬能工具
  74. 74. 謝謝 !!
  75. 75. Home work <ul><li>安裝 Firefox(FF) 及 Firebug(FB)
  76. 76. 建立一個空白 HTML 頁面 , 在 FF 開啟 FB, 在 Console 頁面使用 console api 顯示 &quot;Hello World&quot;( 分別以 info, error, log, warn 顯示 )
  77. 77. 請在 FB 的畫面 手動 輸入 p.15 內的程式 , 執行並觀察 window 物件的內容
  78. 78. 請在 FB 的畫面 手動 輸入 p.18 內的程式 , 執行並觀察 customer 物件的內容
  79. 79. 參考 p.20 建立 ftp 物件 , 並實際呼叫其方法 </li></ul>以下作業有時間 , 有興趣挑戰的同學 , 請完成 . <ul><li>使用 p.31 Case Study 的 getJSON 範例 , 讀取下列 picasa 的影像資料 : </li><ul><li>http://picasaweb.google.com/data/feed/base/user/documentingpicasa?category=album&alt=json&access=public
  80. 80. Hint: image src is here </li><ul><li>data.feed.entry[i].link[j].href </li></ul></ul></ul>
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×