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.

1. OO JavaScript
Class Construction
Using The Prototype JavaScript Framework
July 8th 2008
Ken Collins http://metaskills.net/
Thursday, July 10, 2008 1

2. Topic Overview
Thursday, July 10, 2008 2

3. Topic Overview
• Basic JavaScript Refresher
Thursday, July 10, 2008 2

4. Topic Overview
• Basic JavaScript Refresher
• The Ruby Object Model
Thursday, July 10, 2008 2

5. Topic Overview
• Basic JavaScript Refresher
• The Ruby Object Model
• JavaScript Code Usage/Organization Types
Thursday, July 10, 2008 2

6. Topic Overview
• Basic JavaScript Refresher
• The Ruby Object Model
• JavaScript Code Usage/Organization Types
• Prototype Class Construction
Thursday, July 10, 2008 2

7. Topic Overview
• Basic JavaScript Refresher
• The Ruby Object Model
• JavaScript Code Usage/Organization Types
• Prototype Class Construction
• Review HomeMarks v2.0
Thursday, July 10, 2008 2

8. Basic JavaScript
Refresher
Thursday, July 10, 2008 3

9. Basic JavaScript Refresher
Thursday, July 10, 2008 4

10. Basic JavaScript Refresher
• JavaScript is a prototype-based language.
Thursday, July 10, 2008 4

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

12. Basic JavaScript Refresher
• JavaScript is a prototype-based language.
Thursday, July 10, 2008 6

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. JavaScript Object Model
Thursday, July 10, 2008 7

15. JavaScript Object Model
Thursday, July 10, 2008 7

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 firebug and use console.log() liberally!
Thursday, July 10, 2008 8

18. http://getfirebug.com/releases/
Thursday, July 10, 2008 9

19. Thursday, July 10, 2008 10

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. 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. Thursday, July 10, 2008 12

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. 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. Inheritance in Ruby
Thursday, July 10, 2008 15

26. Module Mixins in Ruby
Thursday, July 10, 2008 16

27. Prototyping in Ruby
Thursday, July 10, 2008 17

28. http://www.pragprog.com/screencasts/v-dtrubyom/the-ruby-object-model-and-metaprogramming
Thursday, July 10, 2008 18

29. JavaScript Code
Usage/Organization
Types
Thursday, July 10, 2008 19

30. JavaScript Code Usage/
Organization Types
Thursday, July 10, 2008 20

31. JavaScript Code Usage/
Organization Types
• Oh so uncool inline events.
• Procedural functions at the window level.
Thursday, July 10, 2008 20

32. Inheritance in Ruby
Thursday, July 10, 2008 21

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

35. Inheritance in Ruby
Thursday, July 10, 2008 23

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

43. Prototype Class Construction
Thursday, July 10, 2008 27

44. Prototype Class Construction
• All examples from prototypejs.org
Thursday, July 10, 2008 27

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

48. Basic Class Constructor
Thursday, July 10, 2008 28

49. http://www.prototypejs.org/learn/class-inheritance
Thursday, July 10, 2008 29

50. Review
Thursday, July 10, 2008 30

51. HomeMarks v2.0 Review
Thursday, July 10, 2008 31

52. HomeMarks v2.0 Review
• Total rewrite for rails 2.1
Thursday, July 10, 2008 31

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

55. http://www.metaskills.net/2008/5/24/the-ajax-head-br-design-pattern
Thursday, July 10, 2008 32

56. http://www.metaskills.net/2008/6/18/restful-ajax-with-forgery-protection
Thursday, July 10, 2008 33

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 files in the Github project.
Thursday, July 10, 2008 34

59. http://github.com/metaskills/homemarks/tree/master/public/javascripts/homemarks
Thursday, July 10, 2008 35

60. HomeMarks Follow Up
Thursday, July 10, 2008 36

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.flash() 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.flash() function to send dashboard messages.
Access to this.modal() for any fancy modal displays.
Thursday, July 10, 2008 36