oo java script class construction

OO JavaScript Class Construction

Using The Prototype JavaScript Framework

July 8th 2008Ken Collins http://metaskills.net/

1Thursday, July 10, 2008

Topic Overview

2Thursday, July 10, 2008

Topic Overview

• Basic JavaScript Refresher

2Thursday, July 10, 2008

Topic Overview

• Basic JavaScript Refresher

• The Ruby Object Model

2Thursday, July 10, 2008

Topic Overview

• Basic JavaScript Refresher

• The Ruby Object Model

• JavaScript Code Usage/Organization Types

2Thursday, July 10, 2008

Topic Overview

• Basic JavaScript Refresher

• The Ruby Object Model

• JavaScript Code Usage/Organization Types

• Prototype Class Construction

2Thursday, July 10, 2008

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

Basic JavaScript Refresher

3Thursday, July 10, 2008

Basic JavaScript Refresher

4Thursday, July 10, 2008

Basic JavaScript Refresher

• JavaScript is a prototype-based language.

4Thursday, July 10, 2008

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

Basic JavaScript Refresher

• JavaScript is a prototype-based language.

6Thursday, July 10, 2008

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

JavaScript Object Model

7Thursday, July 10, 2008

JavaScript Object Model

7Thursday, July 10, 2008

• 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

• 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

http://getfirebug.com/releases/

9Thursday, July 10, 2008

10Thursday, July 10, 2008

• 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

• 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

12Thursday, July 10, 2008

• 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

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

Inheritance in Ruby

15Thursday, July 10, 2008

Module Mixins in Ruby

16Thursday, July 10, 2008

Prototyping in Ruby

17Thursday, July 10, 2008

http://www.pragprog.com/screencasts/v-dtrubyom/the-ruby-object-model-and-metaprogramming

18Thursday, July 10, 2008

JavaScript Code Usage/Organization

Types

19Thursday, July 10, 2008

JavaScript Code Usage/Organization Types

20Thursday, July 10, 2008

• Oh so uncool inline events.

• Procedural functions at the window level.

JavaScript Code Usage/Organization Types

20Thursday, July 10, 2008

Inheritance in Ruby

21Thursday, July 10, 2008

• Oh so uncool inline events.

• Procedural functions at the window level.

JavaScript Code Usage/Organization Types

22Thursday, July 10, 2008

• 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

Inheritance in Ruby

23Thursday, July 10, 2008

• 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

• 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

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

• 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

• 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

• 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

PrototypeClass

Construction

26Thursday, July 10, 2008

Prototype Class Construction

27Thursday, July 10, 2008

• All examples from prototypejs.org

Prototype Class Construction

27Thursday, July 10, 2008

• All examples from prototypejs.org

• Get very familiar with the whole APIhttp://www.prototypejs.org/api

Prototype Class Construction

27Thursday, July 10, 2008

• 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

• 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

Basic Class Constructor

28Thursday, July 10, 2008

http://www.prototypejs.org/learn/class-inheritance

29Thursday, July 10, 2008

Review

30Thursday, July 10, 2008

HomeMarks v2.0 Review

31Thursday, July 10, 2008

• Total rewrite for rails 2.1

HomeMarks v2.0 Review

31Thursday, July 10, 2008

• 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

• 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

http://www.metaskills.net/2008/5/24/the-ajax-head-br-design-pattern

32Thursday, July 10, 2008

http://www.metaskills.net/2008/6/18/restful-ajax-with-forgery-protection

33Thursday, July 10, 2008

• 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

• 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

http://github.com/metaskills/homemarks/tree/master/public/javascripts/homemarks

35Thursday, July 10, 2008

HomeMarks Follow Up

36Thursday, July 10, 2008

• 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

• 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

• 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

• 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

• 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

• 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