Oo java script class construction

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

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 10, 2008 2

Topic Overview • Basic JavaScript Refresher • The Ruby Object Model • JavaScript Code Usage/Organization TypesThursday, July 10, 2008 2

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

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

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 4

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

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

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

JavaScript Object ModelThursday, July 10, 2008 7

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

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

http://getﬁrebug.com/releases/Thursday, July 10, 2008 9

Thursday, July 10, 2008 10

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

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

Thursday, July 10, 2008 12

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

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

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 18

JavaScript Code Usage/Organization TypesThursday, July 10, 2008 19

JavaScript Code Usage/ Organization TypesThursday, July 10, 2008 20

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

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

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

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

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

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

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

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

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

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 27

Prototype Class Construction • All examples from prototypejs.org • Get very familiar with the whole API http://www.prototypejs.org/apiThursday, July 10, 2008 27

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

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

Basic Class ConstructorThursday, July 10, 2008 28

http://www.prototypejs.org/learn/class-inheritanceThursday, July 10, 2008 29

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 on the data’s state change. Like an web service.Thursday, July 10, 2008 31

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

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

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

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

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

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

HomeMarks Follow UpThursday, July 10, 2008 36

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

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

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

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

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

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

Oo java script class construction

by Ken Collins

Accessibility

Categories

Upload Details

Usage Rights

Statistics

Oo java script class construction Presentation Transcript