OOP and JavaScript

790 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
790
On SlideShare
0
From Embeds
0
Number of Embeds
62
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

OOP and JavaScript

  1. 1. JavaScript + OOPDustin Tauer :: Easel Solution @dtauer
  2. 2. Dustin TauerDeveloper (11 years) Instructor (7 years) Web :: Mobile :: eLearning @dtauer
  3. 3. Easel Solutions Training • Design, Web, Mobile, eLearning, Strategy, Social, etc. Customized Training Consulting Adobe Connect @dtauer
  4. 4. Topics OOP Techniques • Scope • Classes • Public/Private • Inheritance A bit of framework talk • RequireJS, BackboneJS, etc @dtauer
  5. 5. Who’s down with OOP?Classes, Inheritance, Interfaces, etc. @dtauer
  6. 6. Flash History1997 2006 2012Flash Flash FlashPlayer Player Player 2 9* 11.4 2003 2008 Flash Flash Player Player 5 10 @dtauer
  7. 7. .Net History2002 2006 2012v1.0 v3.0 v4.5 2005 2010 v2.0 v4.0 @dtauer
  8. 8. JavaScript History 1996JavaScript Is that it? 2005 AJAX @dtauer
  9. 9. Languages need to evolve tosurviveJavaScript has survived because offrameworks @dtauer
  10. 10. JavaScript is like cementFoundation for frameworks build on @dtauer
  11. 11. JavaScript is Object OrientedPolymorphism, encapsulation, andinheritance are all possible. @dtauer
  12. 12. Most OOP languages havekeywordsclass, extends, implements, override, public,private, protected, final @dtauer
  13. 13. jQuery Plugin (Class)(function($){ $.yourPluginName = function(el, radius, options){ var base = this; base.$el = $(el); base.el = el; base.$el.data("yourPluginName", base); base.init = function(){ if( typeof( radius ) === "undefined" || radius === null ) radius ="20px"; base.radius = radius; base.options = $.extend({},$.yourPluginName.defaultOptions,options); }; base.init(); }; $.yourPluginName.defaultOptions = { radius: "20px" }; $.fn.yourPluginName = function(radius, options){ return this.each(function(){ (new $.yourPluginName(this, radius, options)); }); }; @dtauer
  14. 14. Why are they doing it thatway?Less stuff in memory (scope) @dtauer
  15. 15. DemoNo frameworks :: Just JavaScript @dtauer
  16. 16. Please, use a framework There are far too many to list • TodoMVC is a good resource • http://todomvc.com/ RequireJS is manditory • Manages your files/modules • http://requirejs.org/ @dtauer
  17. 17. Use a good code editor Above all, get yourself some code hinting and snippets • Aptana (http://www.aptana.com/) • Sublime Text (http://www.sublimetext.com/) • Brackets (https://github.com/adobe/brackets)  Free, open source • Adobe Edge Code (http://html.adobe.com/edge/code/)  Current Version: “Preview”  Built on Brackets  Free with Creative Cloud Membership @dtauer
  18. 18. Killer Font: Source Code Prohttp://sourceforge.net/projects/sourcecodepro.adobe/ @dtauer
  19. 19. THANKS!Dustin Tauer :: Easel Solutions @dtauer

×