Your SlideShare is downloading. ×
JavaScript Web Development
JavaScript Web Development
JavaScript Web Development
JavaScript Web Development
JavaScript Web Development
JavaScript Web Development
JavaScript Web Development
JavaScript Web Development
JavaScript Web Development
JavaScript Web Development
JavaScript Web Development
JavaScript Web Development
JavaScript Web Development
JavaScript Web Development
JavaScript Web Development
JavaScript Web Development
JavaScript Web Development
JavaScript Web Development
JavaScript Web Development
JavaScript Web Development
JavaScript Web Development
JavaScript Web Development
JavaScript Web Development
JavaScript Web Development
JavaScript Web Development
JavaScript Web Development
JavaScript Web Development
JavaScript Web Development
JavaScript Web Development
JavaScript Web Development
JavaScript Web Development
JavaScript Web Development
JavaScript Web Development
JavaScript Web Development
JavaScript Web Development
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

JavaScript Web Development

1,807

Published on

很久以前為了 training 而做的 slide,不過 2/2 後來因為懶得上傳,現在也找不到了 >.< …

很久以前為了 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,807
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
31
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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
  • 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=&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. 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=&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 + ')');
    • 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
    結論 : 沒有萬能工具
  • 74. 謝謝 !!
  • 75. Home work
    • 安裝 Firefox(FF) 及 Firebug(FB)
    • 76. 建立一個空白 HTML 頁面 , 在 FF 開啟 FB, 在 Console 頁面使用 console api 顯示 &quot;Hello World&quot;( 分別以 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

×