Oo java script class construction
Upcoming SlideShare
Loading in...5
×
 

Oo java script class construction

on

  • 1,413 views

 

Statistics

Views

Total Views
1,413
Views on SlideShare
1,413
Embed Views
0

Actions

Likes
1
Downloads
9
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Oo java script class construction Oo java script class construction Presentation Transcript

  • 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 View slide
  • Topic Overview • Basic JavaScript Refresher • The Ruby Object ModelThursday, July 10, 2008 2 View slide
  • 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
  • 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 firebug and use console.log() liberally!Thursday, July 10, 2008 8
  • http://getfirebug.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 firebug 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 firebug 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 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
  • 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
  • Inheritance in RubyThursday, July 10, 2008 21
  • 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
  • Inheritance in RubyThursday, July 10, 2008 23
  • 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 files 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.flash() 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.flash() function to send dashboard messages. Access to this.modal() for any fancy modal displays.Thursday, July 10, 2008 36