0
OO JavaScript                          Class Construction                           Using The Prototype JavaScript Framewo...
Topic OverviewThursday, July 10, 2008                    2
Topic Overview                     • Basic JavaScript RefresherThursday, July 10, 2008                             2
Topic Overview                     • Basic JavaScript Refresher                     • The Ruby Object ModelThursday, July ...
Topic Overview                     • Basic JavaScript Refresher                     • The Ruby Object Model               ...
Topic Overview                     • Basic JavaScript Refresher                     • The Ruby Object Model               ...
Topic Overview                     • Basic JavaScript Refresher                     • The Ruby Object Model               ...
Basic JavaScript            RefresherThursday, July 10, 2008      3
Basic JavaScript RefresherThursday, July 10, 2008                                4
Basic JavaScript Refresher                 •        JavaScript is a prototype-based language.Thursday, July 10, 2008      ...
Prototype-based programming is a style of object-oriented            programming in which classes are not present, and beh...
Basic JavaScript Refresher                 •        JavaScript is a prototype-based language.Thursday, July 10, 2008      ...
Basic JavaScript Refresher                 •        JavaScript is a prototype-based language.                 •        Jav...
JavaScript Object ModelThursday, July 10, 2008                             7
JavaScript Object ModelThursday, July 10, 2008                             7
Basic JavaScript Refresher                 •        JavaScript is a prototype-based language.                 •        Jav...
Basic JavaScript Refresher                 •        JavaScript is a prototype-based language.                 •        Jav...
http://getfirebug.com/releases/Thursday, July 10, 2008                                    9
Thursday, July 10, 2008   10
Basic JavaScript Refresher                 •        JavaScript is a prototype-based language.                 •        Jav...
Basic JavaScript Refresher                 •        JavaScript is a prototype-based language.                 •        Jav...
Thursday, July 10, 2008   12
Basic JavaScript Refresher                 •        JavaScript is a prototype-based language.                 •        Jav...
The Ruby                 Object Model               Knowing Ruby’s object model will help you with               Prototype...
Inheritance in RubyThursday, July 10, 2008                         15
Module Mixins in RubyThursday, July 10, 2008                           16
Prototyping in RubyThursday, July 10, 2008                         17
http://www.pragprog.com/screencasts/v-dtrubyom/the-ruby-object-model-and-metaprogrammingThursday, July 10, 2008           ...
JavaScript Code                     Usage/Organization                           TypesThursday, July 10, 2008             ...
JavaScript Code Usage/                            Organization TypesThursday, July 10, 2008                            20
JavaScript Code Usage/                            Organization Types                     • Oh so uncool inline events.    ...
Inheritance in RubyThursday, July 10, 2008                         21
JavaScript Code Usage/                            Organization Types                     • Oh so uncool inline events.    ...
JavaScript Code Usage/                              Organization Types                     • Oh so uncool inline events.  ...
Inheritance in RubyThursday, July 10, 2008                         23
JavaScript Code Usage/                              Organization Types                     • Oh so uncool inline events.  ...
JavaScript Code Usage/                              Organization Types                     • Oh so uncool inline events.  ...
Do not think about DOM elements                    that have events attached to them,                  but instead think i...
Do not think about DOM elements                    that have events attached to them,                  but instead think i...
Do not think about DOM elements                    that have events attached to them,                  but instead think i...
Do not think about DOM elements                    that have events attached to them,                  but instead think i...
Prototype                             Class                          ConstructionThursday, July 10, 2008                  26
Prototype Class ConstructionThursday, July 10, 2008                            27
Prototype Class Construction           • All examples from prototypejs.orgThursday, July 10, 2008                         ...
Prototype Class Construction           • All examples from prototypejs.org           • Get very familiar with the whole AP...
Prototype Class Construction           • All examples from prototypejs.org           • Get very familiar with the whole AP...
Prototype Class Construction           • All examples from prototypejs.org           • Get very familiar with the whole AP...
Basic Class ConstructorThursday, July 10, 2008                             28
http://www.prototypejs.org/learn/class-inheritanceThursday, July 10, 2008                                                 ...
ReviewThursday, July 10, 2008            30
HomeMarks v2.0 ReviewThursday, July 10, 2008                           31
HomeMarks v2.0 Review               • Total rewrite for rails 2.1Thursday, July 10, 2008                           31
HomeMarks v2.0 Review               • Total rewrite for rails 2.1               • Completely Restful. App focuses solely o...
HomeMarks v2.0 Review               • Total rewrite for rails 2.1               • Completely Restful. App focuses solely o...
http://www.metaskills.net/2008/5/24/the-ajax-head-br-design-patternThursday, July 10, 2008                                ...
http://www.metaskills.net/2008/6/18/restful-ajax-with-forgery-protectionThursday, July 10, 2008                           ...
HomeMarks v2.0 Review               • Total rewrite for rails 2.1               • Completely Restful. App focuses solely o...
HomeMarks v2.0 Review               • Total rewrite for rails 2.1               • Completely Restful. App focuses solely o...
http://github.com/metaskills/homemarks/tree/master/public/javascripts/homemarksThursday, July 10, 2008                    ...
HomeMarks Follow UpThursday, July 10, 2008                         36
HomeMarks Follow Up               •          JS classes split into two virtual domains. A cluster of them are             ...
HomeMarks Follow Up               •          JS classes split into two virtual domains. A cluster of them are             ...
HomeMarks Follow Up               •          JS classes split into two virtual domains. A cluster of them are             ...
HomeMarks Follow Up               •          JS classes split into two virtual domains. A cluster of them are             ...
HomeMarks Follow Up               •          JS classes split into two virtual domains. A cluster of them are             ...
HomeMarks Follow Up               •          JS classes split into two virtual domains. A cluster of them are             ...
Upcoming SlideShare
Loading in...5
×

Oo java script class construction

1,271

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,271
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
10
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "Oo java script class construction"

  1. 1. OO JavaScript Class Construction Using The Prototype JavaScript Framework July 8th 2008 Ken Collins http://metaskills.net/Thursday, July 10, 2008 1
  2. 2. Topic OverviewThursday, July 10, 2008 2
  3. 3. Topic Overview • Basic JavaScript RefresherThursday, July 10, 2008 2
  4. 4. Topic Overview • Basic JavaScript Refresher • The Ruby Object ModelThursday, July 10, 2008 2
  5. 5. Topic Overview • Basic JavaScript Refresher • The Ruby Object Model • JavaScript Code Usage/Organization TypesThursday, July 10, 2008 2
  6. 6. Topic Overview • Basic JavaScript Refresher • The Ruby Object Model • JavaScript Code Usage/Organization Types • Prototype Class ConstructionThursday, July 10, 2008 2
  7. 7. Topic Overview • Basic JavaScript Refresher • The Ruby Object Model • JavaScript Code Usage/Organization Types • Prototype Class Construction • Review HomeMarks v2.0Thursday, July 10, 2008 2
  8. 8. Basic JavaScript RefresherThursday, July 10, 2008 3
  9. 9. Basic JavaScript RefresherThursday, July 10, 2008 4
  10. 10. Basic JavaScript Refresher • JavaScript is a prototype-based language.Thursday, July 10, 2008 4
  11. 11. Prototype-based programming is a style of object-oriented programming in which classes are not present, and behavior reuse (known as inheritance in class-based languages) is performed via a process of cloning existing objects that serve as prototypes. This model can also be known as class- less, prototype-oriented or instance-based programming. http://en.wikipedia.org/wiki/Prototype-based_programmingThursday, July 10, 2008 5
  12. 12. Basic JavaScript Refresher • JavaScript is a prototype-based language.Thursday, July 10, 2008 6
  13. 13. Basic JavaScript Refresher • JavaScript is a prototype-based language. • JavaScript objects are best thought about as hashes. New values and even functions can just be tacked on.Thursday, July 10, 2008 6
  14. 14. JavaScript Object ModelThursday, July 10, 2008 7
  15. 15. JavaScript Object ModelThursday, July 10, 2008 7
  16. 16. Basic JavaScript Refresher • JavaScript is a prototype-based language. • JavaScript objects are best thought about as hashes. New values and even functions can just be tacked on.Thursday, July 10, 2008 8
  17. 17. Basic JavaScript Refresher • JavaScript is a prototype-based language. • JavaScript objects are best thought about as hashes. New values and even functions can just be tacked on. • Get firebug and use console.log() liberally!Thursday, July 10, 2008 8
  18. 18. http://getfirebug.com/releases/Thursday, July 10, 2008 9
  19. 19. Thursday, July 10, 2008 10
  20. 20. Basic JavaScript Refresher • JavaScript is a prototype-based language. • JavaScript objects are best thought about as hashes. New values and even functions can just be tacked on. • Get firebug and use console.log() liberally!Thursday, July 10, 2008 11
  21. 21. Basic JavaScript Refresher • JavaScript is a prototype-based language. • JavaScript objects are best thought about as hashes. New values and even functions can just be tacked on. • Get firebug and use console.log() liberally! • Remember, that functions are objects too. With non-strict argument options.Thursday, July 10, 2008 11
  22. 22. Thursday, July 10, 2008 12
  23. 23. Basic JavaScript Refresher • JavaScript is a prototype-based language. • JavaScript objects are best thought about as hashes. New values and even functions can just be tacked on. • Get firebug and use console.log() liberally! • Remember, that functions are objects too. With non-strict argument options. • Knowing what “this” is can save you lots of debugging and headaches. (another topic)Thursday, July 10, 2008 13
  24. 24. The Ruby Object Model Knowing Ruby’s object model will help you with Prototype’s class construction and how it mimics inheritance and mixins.Thursday, July 10, 2008 14
  25. 25. Inheritance in RubyThursday, July 10, 2008 15
  26. 26. Module Mixins in RubyThursday, July 10, 2008 16
  27. 27. Prototyping in RubyThursday, July 10, 2008 17
  28. 28. http://www.pragprog.com/screencasts/v-dtrubyom/the-ruby-object-model-and-metaprogrammingThursday, July 10, 2008 18
  29. 29. JavaScript Code Usage/Organization TypesThursday, July 10, 2008 19
  30. 30. JavaScript Code Usage/ Organization TypesThursday, July 10, 2008 20
  31. 31. JavaScript Code Usage/ Organization Types • Oh so uncool inline events. • Procedural functions at the window level.Thursday, July 10, 2008 20
  32. 32. Inheritance in RubyThursday, July 10, 2008 21
  33. 33. JavaScript Code Usage/ Organization Types • Oh so uncool inline events. • Procedural functions at the window level.Thursday, July 10, 2008 22
  34. 34. JavaScript Code Usage/ Organization Types • Oh so uncool inline events. • Procedural functions at the window level. • Namespaced modules. Essentially just a hash of stateless functions.Thursday, July 10, 2008 22
  35. 35. Inheritance in RubyThursday, July 10, 2008 23
  36. 36. JavaScript Code Usage/ Organization Types • Oh so uncool inline events. • Procedural functions at the window level. • Namespaced modules. Essentially just a hash of stateless functions.Thursday, July 10, 2008 24
  37. 37. JavaScript Code Usage/ Organization Types • Oh so uncool inline events. • Procedural functions at the window level. • Namespaced modules. Essentially just a hash of stateless functions. • GO FULL OO IN JAVASCRIPT!Thursday, July 10, 2008 24
  38. 38. Do not think about DOM elements that have events attached to them, but instead think in terms of JavaScript objects that are instances of classes modeled in your domain which know about:Thursday, July 10, 2008 25
  39. 39. Do not think about DOM elements that have events attached to them, but instead think in terms of JavaScript objects that are instances of classes modeled in your domain which know about: • The DOM element(s) they represent.Thursday, July 10, 2008 25
  40. 40. Do not think about DOM elements that have events attached to them, but instead think in terms of JavaScript objects that are instances of classes modeled in your domain which know about: • The DOM element(s) they represent. • The behavior needed to change the page.Thursday, July 10, 2008 25
  41. 41. Do not think about DOM elements that have events attached to them, but instead think in terms of JavaScript objects that are instances of classes modeled in your domain which know about: • The DOM element(s) they represent. • The behavior needed to change the page. • The state changes to report to the application server. (with ajax)Thursday, July 10, 2008 25
  42. 42. Prototype Class ConstructionThursday, July 10, 2008 26
  43. 43. Prototype Class ConstructionThursday, July 10, 2008 27
  44. 44. Prototype Class Construction • All examples from prototypejs.orgThursday, July 10, 2008 27
  45. 45. Prototype Class Construction • All examples from prototypejs.org • Get very familiar with the whole API http://www.prototypejs.org/apiThursday, July 10, 2008 27
  46. 46. Prototype Class Construction • All examples from prototypejs.org • Get very familiar with the whole API http://www.prototypejs.org/api • You must learn! Tips and tricks. http://www.prototypejs.org/learnThursday, July 10, 2008 27
  47. 47. Prototype Class Construction • All examples from prototypejs.org • Get very familiar with the whole API http://www.prototypejs.org/api • You must learn! Tips and tricks. http://www.prototypejs.org/learn • Focus on classes and inheritance. http://www.prototypejs.org/learn/class-inheritanceThursday, July 10, 2008 27
  48. 48. Basic Class ConstructorThursday, July 10, 2008 28
  49. 49. http://www.prototypejs.org/learn/class-inheritanceThursday, July 10, 2008 29
  50. 50. ReviewThursday, July 10, 2008 30
  51. 51. HomeMarks v2.0 ReviewThursday, July 10, 2008 31
  52. 52. HomeMarks v2.0 Review • Total rewrite for rails 2.1Thursday, July 10, 2008 31
  53. 53. HomeMarks v2.0 Review • Total rewrite for rails 2.1 • Completely Restful. App focuses solely on the data’s state change. Like an web service.Thursday, July 10, 2008 31
  54. 54. HomeMarks v2.0 Review • Total rewrite for rails 2.1 • Completely Restful. App focuses solely on the data’s state change. Like an web service. • Articles on MetaSkills.netThursday, July 10, 2008 31
  55. 55. http://www.metaskills.net/2008/5/24/the-ajax-head-br-design-patternThursday, July 10, 2008 32
  56. 56. http://www.metaskills.net/2008/6/18/restful-ajax-with-forgery-protectionThursday, July 10, 2008 33
  57. 57. HomeMarks v2.0 Review • Total rewrite for rails 2.1 • Completely Restful. App focuses solely on the data’s state change. Like an web service. • Articles on MetaSkills.netThursday, July 10, 2008 34
  58. 58. HomeMarks v2.0 Review • Total rewrite for rails 2.1 • Completely Restful. App focuses solely on the data’s state change. Like an web service. • Articles on MetaSkills.net • Focus on these class files in the Github project.Thursday, July 10, 2008 34
  59. 59. http://github.com/metaskills/homemarks/tree/master/public/javascripts/homemarksThursday, July 10, 2008 35
  60. 60. HomeMarks Follow UpThursday, July 10, 2008 36
  61. 61. HomeMarks Follow Up • JS classes split into two virtual domains. A cluster of them are for the site, others for the app. Focus on the application cluster. Includes base, app, page, column, box...Thursday, July 10, 2008 36
  62. 62. HomeMarks Follow Up • JS classes split into two virtual domains. A cluster of them are for the site, others for the app. Focus on the application cluster. Includes base, app, page, column, box... • All domain classes like column, box, etc inherit from the HomeMarksApp class. This gives object from these sub classes access to things like 4 things every object needs to know:Thursday, July 10, 2008 36
  63. 63. HomeMarks Follow Up • JS classes split into two virtual domains. A cluster of them are for the site, others for the app. Focus on the application cluster. Includes base, app, page, column, box... • All domain classes like column, box, etc inherit from the HomeMarksApp class. This gives object from these sub classes access to things like 4 things every object needs to know: Shared knowledge of DOM elements common to all.Thursday, July 10, 2008 36
  64. 64. HomeMarks Follow Up • JS classes split into two virtual domains. A cluster of them are for the site, others for the app. Focus on the application cluster. Includes base, app, page, column, box... • All domain classes like column, box, etc inherit from the HomeMarksApp class. This gives object from these sub classes access to things like 4 things every object needs to know: Shared knowledge of DOM elements common to all. How to communicate to the server with AJAX. This allows the app to have one AJAX observer constructor.Thursday, July 10, 2008 36
  65. 65. HomeMarks Follow Up • JS classes split into two virtual domains. A cluster of them are for the site, others for the app. Focus on the application cluster. Includes base, app, page, column, box... • All domain classes like column, box, etc inherit from the HomeMarksApp class. This gives object from these sub classes access to things like 4 things every object needs to know: Shared knowledge of DOM elements common to all. How to communicate to the server with AJAX. This allows the app to have one AJAX observer constructor. A this.flash() function to send dashboard messages.Thursday, July 10, 2008 36
  66. 66. HomeMarks Follow Up • JS classes split into two virtual domains. A cluster of them are for the site, others for the app. Focus on the application cluster. Includes base, app, page, column, box... • All domain classes like column, box, etc inherit from the HomeMarksApp class. This gives object from these sub classes access to things like 4 things every object needs to know: Shared knowledge of DOM elements common to all. How to communicate to the server with AJAX. This allows the app to have one AJAX observer constructor. A this.flash() function to send dashboard messages. Access to this.modal() for any fancy modal displays.Thursday, July 10, 2008 36
  1. A particular slide catching your eye?

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

×