Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

OOP and JavaScript

858 views

Published on

  • Be the first to comment

  • Be the first to like this

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

×