Download - Oo java script class construction
![Page 1: Oo java script class construction](https://reader033.vdocuments.mx/reader033/viewer/2022051817/548787d8b4795984178b50b1/html5/thumbnails/1.jpg)
OO JavaScript Class Construction
Using The Prototype JavaScript Framework
July 8th 2008Ken Collins http://metaskills.net/
1Thursday, July 10, 2008
![Page 2: Oo java script class construction](https://reader033.vdocuments.mx/reader033/viewer/2022051817/548787d8b4795984178b50b1/html5/thumbnails/2.jpg)
Topic Overview
2Thursday, July 10, 2008
![Page 3: Oo java script class construction](https://reader033.vdocuments.mx/reader033/viewer/2022051817/548787d8b4795984178b50b1/html5/thumbnails/3.jpg)
Topic Overview
• Basic JavaScript Refresher
2Thursday, July 10, 2008
![Page 4: Oo java script class construction](https://reader033.vdocuments.mx/reader033/viewer/2022051817/548787d8b4795984178b50b1/html5/thumbnails/4.jpg)
Topic Overview
• Basic JavaScript Refresher
• The Ruby Object Model
2Thursday, July 10, 2008
![Page 5: Oo java script class construction](https://reader033.vdocuments.mx/reader033/viewer/2022051817/548787d8b4795984178b50b1/html5/thumbnails/5.jpg)
Topic Overview
• Basic JavaScript Refresher
• The Ruby Object Model
• JavaScript Code Usage/Organization Types
2Thursday, July 10, 2008
![Page 6: Oo java script class construction](https://reader033.vdocuments.mx/reader033/viewer/2022051817/548787d8b4795984178b50b1/html5/thumbnails/6.jpg)
Topic Overview
• Basic JavaScript Refresher
• The Ruby Object Model
• JavaScript Code Usage/Organization Types
• Prototype Class Construction
2Thursday, July 10, 2008
![Page 7: Oo java script class construction](https://reader033.vdocuments.mx/reader033/viewer/2022051817/548787d8b4795984178b50b1/html5/thumbnails/7.jpg)
Topic Overview
• Basic JavaScript Refresher
• The Ruby Object Model
• JavaScript Code Usage/Organization Types
• Prototype Class Construction
• Review HomeMarks v2.0
2Thursday, July 10, 2008
![Page 8: Oo java script class construction](https://reader033.vdocuments.mx/reader033/viewer/2022051817/548787d8b4795984178b50b1/html5/thumbnails/8.jpg)
Basic JavaScript Refresher
3Thursday, July 10, 2008
![Page 9: Oo java script class construction](https://reader033.vdocuments.mx/reader033/viewer/2022051817/548787d8b4795984178b50b1/html5/thumbnails/9.jpg)
Basic JavaScript Refresher
4Thursday, July 10, 2008
![Page 10: Oo java script class construction](https://reader033.vdocuments.mx/reader033/viewer/2022051817/548787d8b4795984178b50b1/html5/thumbnails/10.jpg)
Basic JavaScript Refresher
• JavaScript is a prototype-based language.
4Thursday, July 10, 2008
![Page 11: Oo java script class construction](https://reader033.vdocuments.mx/reader033/viewer/2022051817/548787d8b4795984178b50b1/html5/thumbnails/11.jpg)
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_programming
5Thursday, July 10, 2008
![Page 12: Oo java script class construction](https://reader033.vdocuments.mx/reader033/viewer/2022051817/548787d8b4795984178b50b1/html5/thumbnails/12.jpg)
Basic JavaScript Refresher
• JavaScript is a prototype-based language.
6Thursday, July 10, 2008
![Page 13: Oo java script class construction](https://reader033.vdocuments.mx/reader033/viewer/2022051817/548787d8b4795984178b50b1/html5/thumbnails/13.jpg)
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.
6Thursday, July 10, 2008
![Page 14: Oo java script class construction](https://reader033.vdocuments.mx/reader033/viewer/2022051817/548787d8b4795984178b50b1/html5/thumbnails/14.jpg)
JavaScript Object Model
7Thursday, July 10, 2008
![Page 15: Oo java script class construction](https://reader033.vdocuments.mx/reader033/viewer/2022051817/548787d8b4795984178b50b1/html5/thumbnails/15.jpg)
JavaScript Object Model
7Thursday, July 10, 2008
![Page 16: Oo java script class construction](https://reader033.vdocuments.mx/reader033/viewer/2022051817/548787d8b4795984178b50b1/html5/thumbnails/16.jpg)
• JavaScript is a prototype-based language.
• JavaScript objects are best thought about as hashes. New values and even functions can just be tacked on.
Basic JavaScript Refresher
8Thursday, July 10, 2008
![Page 17: Oo java script class construction](https://reader033.vdocuments.mx/reader033/viewer/2022051817/548787d8b4795984178b50b1/html5/thumbnails/17.jpg)
• 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!
Basic JavaScript Refresher
8Thursday, July 10, 2008
![Page 18: Oo java script class construction](https://reader033.vdocuments.mx/reader033/viewer/2022051817/548787d8b4795984178b50b1/html5/thumbnails/18.jpg)
http://getfirebug.com/releases/
9Thursday, July 10, 2008
![Page 19: Oo java script class construction](https://reader033.vdocuments.mx/reader033/viewer/2022051817/548787d8b4795984178b50b1/html5/thumbnails/19.jpg)
10Thursday, July 10, 2008
![Page 20: Oo java script class construction](https://reader033.vdocuments.mx/reader033/viewer/2022051817/548787d8b4795984178b50b1/html5/thumbnails/20.jpg)
• 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!
Basic JavaScript Refresher
11Thursday, July 10, 2008
![Page 21: Oo java script class construction](https://reader033.vdocuments.mx/reader033/viewer/2022051817/548787d8b4795984178b50b1/html5/thumbnails/21.jpg)
• 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.
Basic JavaScript Refresher
11Thursday, July 10, 2008
![Page 22: Oo java script class construction](https://reader033.vdocuments.mx/reader033/viewer/2022051817/548787d8b4795984178b50b1/html5/thumbnails/22.jpg)
12Thursday, July 10, 2008
![Page 23: Oo java script class construction](https://reader033.vdocuments.mx/reader033/viewer/2022051817/548787d8b4795984178b50b1/html5/thumbnails/23.jpg)
• 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)
Basic JavaScript Refresher
13Thursday, July 10, 2008
![Page 24: Oo java script class construction](https://reader033.vdocuments.mx/reader033/viewer/2022051817/548787d8b4795984178b50b1/html5/thumbnails/24.jpg)
The Ruby Object ModelKnowing Ruby’s object model will help you with Prototype’s class construction and how it mimics
inheritance and mixins.
14Thursday, July 10, 2008
![Page 25: Oo java script class construction](https://reader033.vdocuments.mx/reader033/viewer/2022051817/548787d8b4795984178b50b1/html5/thumbnails/25.jpg)
Inheritance in Ruby
15Thursday, July 10, 2008
![Page 26: Oo java script class construction](https://reader033.vdocuments.mx/reader033/viewer/2022051817/548787d8b4795984178b50b1/html5/thumbnails/26.jpg)
Module Mixins in Ruby
16Thursday, July 10, 2008
![Page 27: Oo java script class construction](https://reader033.vdocuments.mx/reader033/viewer/2022051817/548787d8b4795984178b50b1/html5/thumbnails/27.jpg)
Prototyping in Ruby
17Thursday, July 10, 2008
![Page 28: Oo java script class construction](https://reader033.vdocuments.mx/reader033/viewer/2022051817/548787d8b4795984178b50b1/html5/thumbnails/28.jpg)
http://www.pragprog.com/screencasts/v-dtrubyom/the-ruby-object-model-and-metaprogramming
18Thursday, July 10, 2008
![Page 29: Oo java script class construction](https://reader033.vdocuments.mx/reader033/viewer/2022051817/548787d8b4795984178b50b1/html5/thumbnails/29.jpg)
JavaScript Code Usage/Organization
Types
19Thursday, July 10, 2008
![Page 30: Oo java script class construction](https://reader033.vdocuments.mx/reader033/viewer/2022051817/548787d8b4795984178b50b1/html5/thumbnails/30.jpg)
JavaScript Code Usage/Organization Types
20Thursday, July 10, 2008
![Page 31: Oo java script class construction](https://reader033.vdocuments.mx/reader033/viewer/2022051817/548787d8b4795984178b50b1/html5/thumbnails/31.jpg)
• Oh so uncool inline events.
• Procedural functions at the window level.
JavaScript Code Usage/Organization Types
20Thursday, July 10, 2008
![Page 32: Oo java script class construction](https://reader033.vdocuments.mx/reader033/viewer/2022051817/548787d8b4795984178b50b1/html5/thumbnails/32.jpg)
Inheritance in Ruby
21Thursday, July 10, 2008
![Page 33: Oo java script class construction](https://reader033.vdocuments.mx/reader033/viewer/2022051817/548787d8b4795984178b50b1/html5/thumbnails/33.jpg)
• Oh so uncool inline events.
• Procedural functions at the window level.
JavaScript Code Usage/Organization Types
22Thursday, July 10, 2008
![Page 34: Oo java script class construction](https://reader033.vdocuments.mx/reader033/viewer/2022051817/548787d8b4795984178b50b1/html5/thumbnails/34.jpg)
• Oh so uncool inline events.
• Procedural functions at the window level.
• Namespaced modules. Essentially just a hash of stateless functions.
JavaScript Code Usage/Organization Types
22Thursday, July 10, 2008
![Page 35: Oo java script class construction](https://reader033.vdocuments.mx/reader033/viewer/2022051817/548787d8b4795984178b50b1/html5/thumbnails/35.jpg)
Inheritance in Ruby
23Thursday, July 10, 2008
![Page 36: Oo java script class construction](https://reader033.vdocuments.mx/reader033/viewer/2022051817/548787d8b4795984178b50b1/html5/thumbnails/36.jpg)
• Oh so uncool inline events.
• Procedural functions at the window level.
• Namespaced modules. Essentially just a hash of stateless functions.
JavaScript Code Usage/Organization Types
24Thursday, July 10, 2008
![Page 37: Oo java script class construction](https://reader033.vdocuments.mx/reader033/viewer/2022051817/548787d8b4795984178b50b1/html5/thumbnails/37.jpg)
• 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!
JavaScript Code Usage/Organization Types
24Thursday, July 10, 2008
![Page 38: Oo java script class construction](https://reader033.vdocuments.mx/reader033/viewer/2022051817/548787d8b4795984178b50b1/html5/thumbnails/38.jpg)
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:
25Thursday, July 10, 2008
![Page 39: Oo java script class construction](https://reader033.vdocuments.mx/reader033/viewer/2022051817/548787d8b4795984178b50b1/html5/thumbnails/39.jpg)
• The DOM element(s) they represent.
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:
25Thursday, July 10, 2008
![Page 40: Oo java script class construction](https://reader033.vdocuments.mx/reader033/viewer/2022051817/548787d8b4795984178b50b1/html5/thumbnails/40.jpg)
• The DOM element(s) they represent.
• The behavior needed to change the page.
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:
25Thursday, July 10, 2008
![Page 41: Oo java script class construction](https://reader033.vdocuments.mx/reader033/viewer/2022051817/548787d8b4795984178b50b1/html5/thumbnails/41.jpg)
• The DOM element(s) they represent.
• The behavior needed to change the page.
• The state changes to report to the application server. (with ajax)
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:
25Thursday, July 10, 2008
![Page 42: Oo java script class construction](https://reader033.vdocuments.mx/reader033/viewer/2022051817/548787d8b4795984178b50b1/html5/thumbnails/42.jpg)
PrototypeClass
Construction
26Thursday, July 10, 2008
![Page 43: Oo java script class construction](https://reader033.vdocuments.mx/reader033/viewer/2022051817/548787d8b4795984178b50b1/html5/thumbnails/43.jpg)
Prototype Class Construction
27Thursday, July 10, 2008
![Page 44: Oo java script class construction](https://reader033.vdocuments.mx/reader033/viewer/2022051817/548787d8b4795984178b50b1/html5/thumbnails/44.jpg)
• All examples from prototypejs.org
Prototype Class Construction
27Thursday, July 10, 2008
![Page 45: Oo java script class construction](https://reader033.vdocuments.mx/reader033/viewer/2022051817/548787d8b4795984178b50b1/html5/thumbnails/45.jpg)
• All examples from prototypejs.org
• Get very familiar with the whole APIhttp://www.prototypejs.org/api
Prototype Class Construction
27Thursday, July 10, 2008
![Page 46: Oo java script class construction](https://reader033.vdocuments.mx/reader033/viewer/2022051817/548787d8b4795984178b50b1/html5/thumbnails/46.jpg)
• All examples from prototypejs.org
• Get very familiar with the whole APIhttp://www.prototypejs.org/api
• You must learn! Tips and tricks.http://www.prototypejs.org/learn
Prototype Class Construction
27Thursday, July 10, 2008
![Page 47: Oo java script class construction](https://reader033.vdocuments.mx/reader033/viewer/2022051817/548787d8b4795984178b50b1/html5/thumbnails/47.jpg)
• All examples from prototypejs.org
• Get very familiar with the whole APIhttp://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-inheritance
Prototype Class Construction
27Thursday, July 10, 2008
![Page 48: Oo java script class construction](https://reader033.vdocuments.mx/reader033/viewer/2022051817/548787d8b4795984178b50b1/html5/thumbnails/48.jpg)
Basic Class Constructor
28Thursday, July 10, 2008
![Page 49: Oo java script class construction](https://reader033.vdocuments.mx/reader033/viewer/2022051817/548787d8b4795984178b50b1/html5/thumbnails/49.jpg)
http://www.prototypejs.org/learn/class-inheritance
29Thursday, July 10, 2008
![Page 50: Oo java script class construction](https://reader033.vdocuments.mx/reader033/viewer/2022051817/548787d8b4795984178b50b1/html5/thumbnails/50.jpg)
Review
30Thursday, July 10, 2008
![Page 51: Oo java script class construction](https://reader033.vdocuments.mx/reader033/viewer/2022051817/548787d8b4795984178b50b1/html5/thumbnails/51.jpg)
HomeMarks v2.0 Review
31Thursday, July 10, 2008
![Page 52: Oo java script class construction](https://reader033.vdocuments.mx/reader033/viewer/2022051817/548787d8b4795984178b50b1/html5/thumbnails/52.jpg)
• Total rewrite for rails 2.1
HomeMarks v2.0 Review
31Thursday, July 10, 2008
![Page 53: Oo java script class construction](https://reader033.vdocuments.mx/reader033/viewer/2022051817/548787d8b4795984178b50b1/html5/thumbnails/53.jpg)
• Total rewrite for rails 2.1
• Completely Restful. App focuses solely on the data’s state change. Like an web service.
HomeMarks v2.0 Review
31Thursday, July 10, 2008
![Page 54: Oo java script class construction](https://reader033.vdocuments.mx/reader033/viewer/2022051817/548787d8b4795984178b50b1/html5/thumbnails/54.jpg)
• 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
HomeMarks v2.0 Review
31Thursday, July 10, 2008
![Page 55: Oo java script class construction](https://reader033.vdocuments.mx/reader033/viewer/2022051817/548787d8b4795984178b50b1/html5/thumbnails/55.jpg)
http://www.metaskills.net/2008/5/24/the-ajax-head-br-design-pattern
32Thursday, July 10, 2008
![Page 56: Oo java script class construction](https://reader033.vdocuments.mx/reader033/viewer/2022051817/548787d8b4795984178b50b1/html5/thumbnails/56.jpg)
http://www.metaskills.net/2008/6/18/restful-ajax-with-forgery-protection
33Thursday, July 10, 2008
![Page 57: Oo java script class construction](https://reader033.vdocuments.mx/reader033/viewer/2022051817/548787d8b4795984178b50b1/html5/thumbnails/57.jpg)
• 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
HomeMarks v2.0 Review
34Thursday, July 10, 2008
![Page 58: Oo java script class construction](https://reader033.vdocuments.mx/reader033/viewer/2022051817/548787d8b4795984178b50b1/html5/thumbnails/58.jpg)
• 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.
HomeMarks v2.0 Review
34Thursday, July 10, 2008
![Page 59: Oo java script class construction](https://reader033.vdocuments.mx/reader033/viewer/2022051817/548787d8b4795984178b50b1/html5/thumbnails/59.jpg)
http://github.com/metaskills/homemarks/tree/master/public/javascripts/homemarks
35Thursday, July 10, 2008
![Page 60: Oo java script class construction](https://reader033.vdocuments.mx/reader033/viewer/2022051817/548787d8b4795984178b50b1/html5/thumbnails/60.jpg)
HomeMarks Follow Up
36Thursday, July 10, 2008
![Page 61: Oo java script class construction](https://reader033.vdocuments.mx/reader033/viewer/2022051817/548787d8b4795984178b50b1/html5/thumbnails/61.jpg)
• 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...
HomeMarks Follow Up
36Thursday, July 10, 2008
![Page 62: Oo java script class construction](https://reader033.vdocuments.mx/reader033/viewer/2022051817/548787d8b4795984178b50b1/html5/thumbnails/62.jpg)
• 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:
HomeMarks Follow Up
36Thursday, July 10, 2008
![Page 63: Oo java script class construction](https://reader033.vdocuments.mx/reader033/viewer/2022051817/548787d8b4795984178b50b1/html5/thumbnails/63.jpg)
• 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.
HomeMarks Follow Up
36Thursday, July 10, 2008
![Page 64: Oo java script class construction](https://reader033.vdocuments.mx/reader033/viewer/2022051817/548787d8b4795984178b50b1/html5/thumbnails/64.jpg)
• 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.
HomeMarks Follow Up
36Thursday, July 10, 2008
![Page 65: Oo java script class construction](https://reader033.vdocuments.mx/reader033/viewer/2022051817/548787d8b4795984178b50b1/html5/thumbnails/65.jpg)
• 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.
HomeMarks Follow Up
36Thursday, July 10, 2008
![Page 66: Oo java script class construction](https://reader033.vdocuments.mx/reader033/viewer/2022051817/548787d8b4795984178b50b1/html5/thumbnails/66.jpg)
• 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.
HomeMarks Follow Up
36Thursday, July 10, 2008