This document provides an overview and agenda for a presentation on class construction using the Prototype JavaScript framework. The topics to be covered include a basic JavaScript refresher, an overview of the Ruby object model to help understand Prototype's implementation, different types of JavaScript code organization, Prototype class construction techniques, and a review of the HomeMarks v2.0 application which utilizes Prototype for object-oriented programming in JavaScript.
Advantages of Hiring UIUX Design Service Providers for Your Business
Â
Oo java script class construction
1. OO JavaScript
Class Construction
Using The Prototype JavaScript Framework
July 8th 2008
Ken Collins http://metaskills.net/
Thursday, July 10, 2008 1
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_programming
Thursday, July 10, 2008 5
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
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. 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 ďŹrebug and use console.log() liberally!
Thursday, July 10, 2008 8
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 ďŹrebug and use console.log() liberally!
Thursday, July 10, 2008 11
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 ďŹrebug and use console.log() liberally!
⢠Remember, that functions are objects too.
With non-strict argument options.
Thursday, July 10, 2008 11
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 ďŹrebug 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. 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
33. JavaScript Code Usage/
Organization Types
⢠Oh so uncool inline events.
⢠Procedural functions at the window level.
Thursday, July 10, 2008 22
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
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. 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. 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. 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. 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. 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. Prototype
Class
Construction
Thursday, July 10, 2008 26
45. Prototype Class Construction
⢠All examples from prototypejs.org
⢠Get very familiar with the whole API
http://www.prototypejs.org/api
Thursday, July 10, 2008 27
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/learn
Thursday, July 10, 2008 27
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-inheritance
Thursday, July 10, 2008 27
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. 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
Thursday, July 10, 2008 31
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.net
Thursday, July 10, 2008 34
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 ďŹles in the Github project.
Thursday, July 10, 2008 34
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. 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. 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. 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. 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.ďŹash() function to send dashboard messages.
Thursday, July 10, 2008 36
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.ďŹash() function to send dashboard messages.
Access to this.modal() for any fancy modal displays.
Thursday, July 10, 2008 36