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.
OO JS for AS3 Devs Object-Oriented JavaScript for ActionScript 3 Developers
Pirates vs Ninjas <ul><li>Pirate </li></ul><ul><li>Ninja </li></ul>
JS vs AS3 <ul><ul><li>Object </li></ul></ul><ul><ul><li>Number </li></ul></ul><ul><ul><li>String </li></ul></ul><ul><ul><l...
No Strong Types in JS <ul><li>var myVar1; </li></ul><ul><li>var myVar1 = 10; </li></ul><ul><li>var myVar1, myVar2, myVar3;...
'Classes' in JS     <ul><ul><li>Everything is an Object or Function </li></ul></ul><ul><ul><li>Functions are pushed to the...
<ul><li>function myClass() </li></ul><ul><li>{ </li></ul><ul><li>     this.add = function(a, b)     </li></ul><ul><li>    ...
Getters / Setters <ul><li>function Puppy() </li></ul><ul><li>{ </li></ul><ul><li>     var _evil = 1000; </li></ul><ul><li>...
Self Executing Functions <ul><li>function Puppy() </li></ul><ul><li>{ </li></ul><ul><li>     var _evil = 999; </li></ul><u...
Scope is a Pain! <ul><li>function level_1() </li></ul><ul><li>{ </li></ul><ul><li>     var good = 20; </li></ul><ul><li>  ...
Scope is a Pain - Part 2 <ul><li>function level_1() </li></ul><ul><li>{ </li></ul><ul><li>     var good = 20; </li></ul><u...
Inheritance <ul><li>Tons of ways to do Inheritance  </li></ul><ul><li>I will only cover one way </li></ul><ul><li>No &quot...
<ul><li>function Animal() </li></ul><ul><li>{ </li></ul><ul><li>     Animal.prototype.evil = 1000; </li></ul><ul><li>     ...
<ul><li>function Animal() </li></ul><ul><li>{ </li></ul><ul><li>     Animal.prototype.evil = 1000; </li></ul><ul><li>     ...
<ul><li>function Animal(){ </li></ul><ul><li>     Animal.prototype.color = &quot;Blood Red&quot;; </li></ul><ul><li>     A...
HTML5 <canvas> tag  <ul><li><body> </li></ul><ul><li><canvas id=&quot;gameCanvas&quot; width=&quot;600&quot; height=&quot;...
Get Pointer to <canvas> from JS <ul><li>// javaScript </li></ul><ul><li>var canvas = document.getElementById('gameCanvas')...
Draw on <canvas> with JS <ul><li>// javaScript </li></ul><ul><li>context.beginPath(); </li></ul><ul><li>context.moveTo(0,0...
&quot;Animation&quot; (in quotes) <ul><li>var intervalId = setInterval(drawCanvas, 1000 / 30); </li></ul><ul><li>function ...
&quot;Animation&quot; (in quotes) <ul><li>var intervalId = setInterval(smartDrawCanvas, 1000 / 30); </li></ul><ul><li>func...
Mouse Events on <canvas> <ul><ul><li>Cannot listen to events on any children on the <canvas> </li></ul></ul><ul><ul><li>Th...
Gotchas <ul><li>**JS** (for each works in FF, but not Chrome) </li></ul><ul><li>for (var x in myArray) </li></ul><ul><li>{...
Gotchas <ul><li>var timeout = setTimeout(function() </li></ul><ul><li>     {         </li></ul><ul><li>         var x = pa...
Upcoming SlideShare
Loading in …5
×

OO JS for AS3 Devs

1,531 views

Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

OO JS for AS3 Devs

  1. 1. OO JS for AS3 Devs Object-Oriented JavaScript for ActionScript 3 Developers
  2. 2. Pirates vs Ninjas <ul><li>Pirate </li></ul><ul><li>Ninja </li></ul>
  3. 3. JS vs AS3 <ul><ul><li>Object </li></ul></ul><ul><ul><li>Number </li></ul></ul><ul><ul><li>String </li></ul></ul><ul><ul><li>Boolean </li></ul></ul><ul><ul><li>Object </li></ul></ul><ul><ul><li>Object </li></ul></ul><ul><ul><li>Array (Object)  </li></ul></ul><ul><ul><li>Date </li></ul></ul><ul><ul><li>Function </li></ul></ul><ul><ul><li>Function </li></ul></ul><ul><ul><li>Prototype </li></ul></ul><ul><ul><li><Script src=&quot;&quot;/> </li></ul></ul><ul><ul><li>Function </li></ul></ul><ul><ul><li>Object </li></ul></ul><ul><ul><li>Number | int | unit </li></ul></ul><ul><ul><li>String </li></ul></ul><ul><ul><li>Boolean </li></ul></ul><ul><ul><li>Array </li></ul></ul><ul><ul><li>Dictionary </li></ul></ul><ul><ul><li>Array </li></ul></ul><ul><ul><li>Date </li></ul></ul><ul><ul><li>Function </li></ul></ul><ul><ul><li>Class </li></ul></ul><ul><ul><li>Prototype </li></ul></ul><ul><ul><li>Import </li></ul></ul><ul><ul><li>Getter / Setter </li></ul></ul>
  4. 4. No Strong Types in JS <ul><li>var myVar1; </li></ul><ul><li>var myVar1 = 10; </li></ul><ul><li>var myVar1, myVar2, myVar3; </li></ul><ul><li>var myVar = []; </li></ul><ul><li>myVar.push(&quot;foo&quot;); </li></ul><ul><li>const EVENT_NAME = &quot;name&quot; </li></ul>var myVar:Object public myVar public function myFunct():String function myFunct():String package {}, class {}  extends, implements, final, internal, public, private GOOD PUPPY  BAD PUPPY 
  5. 5. 'Classes' in JS     <ul><ul><li>Everything is an Object or Function </li></ul></ul><ul><ul><li>Functions are pushed to the limits </li></ul></ul><ul><ul><li>A JS Class is just a Function </li></ul></ul><ul><ul><li>Function 'scope' rules are used for to create public, private spaces </li></ul></ul><ul><ul><li>Inheritance is wacky ( will get to this later ) </li></ul></ul><ul><ul><li>Prototype is wacky ( will get to this later ) </li></ul></ul><ul><li>  </li></ul>
  6. 6. <ul><li>function myClass() </li></ul><ul><li>{ </li></ul><ul><li>     this.add = function(a, b)     </li></ul><ul><li>     { </li></ul><ul><li>         return a + b; </li></ul><ul><li>     }; </li></ul><ul><li>} </li></ul><ul><li>var c = new myClass(); </li></ul><ul><li>c.add(1, 1); </li></ul><ul><li>TEST IN FIREBUG </li></ul>
  7. 7. Getters / Setters <ul><li>function Puppy() </li></ul><ul><li>{ </li></ul><ul><li>     var _evil = 1000; </li></ul><ul><li>     this. getEvil = function() </li></ul><ul><li>     { </li></ul><ul><li>         return _evil; </li></ul><ul><li>     }; </li></ul><ul><li>     this. setEvil = function(value) </li></ul><ul><li>     { </li></ul><ul><li>         _evil  = value; </li></ul><ul><li>     } </li></ul><ul><li>} </li></ul><ul><li>var evilPuppy = new Puppy(); </li></ul><ul><li>evilPuppy. getEvil() ; </li></ul>
  8. 8. Self Executing Functions <ul><li>function Puppy() </li></ul><ul><li>{ </li></ul><ul><li>     var _evil = 999; </li></ul><ul><li>     this.getEvil = function() </li></ul><ul><li>     { </li></ul><ul><li>         return _evil; </li></ul><ul><li>     }; </li></ul><ul><li>     (function init(value) </li></ul><ul><li>     { </li></ul><ul><li>         _evil = v; </li></ul><ul><li>     })(45) </li></ul><ul><li>} </li></ul><ul><li>var evilPuppy = new Puppy(); </li></ul><ul><li>evilPuppy.getEvil(); </li></ul>
  9. 9. Scope is a Pain! <ul><li>function level_1() </li></ul><ul><li>{ </li></ul><ul><li>     var good = 20; </li></ul><ul><li>     this.evil = 99; </li></ul><ul><li>     var timeout = setTimeout(function() </li></ul><ul><li>         { </li></ul><ul><li>             console.log(good); </li></ul><ul><li>             console.log(evil); </li></ul><ul><li>             console.log(this.evil); </li></ul><ul><li>         }, 500); </li></ul><ul><li>} </li></ul><ul><li>var x = new level_1(); </li></ul>
  10. 10. Scope is a Pain - Part 2 <ul><li>function level_1() </li></ul><ul><li>{ </li></ul><ul><li>     var good = 20; </li></ul><ul><li>     this.evil = 99; </li></ul><ul><li>     var scope = this; </li></ul><ul><li>     var timeout = setTimeout(function() </li></ul><ul><li>         { </li></ul><ul><li>             console.log(good); </li></ul><ul><li>             console.log(scope.evil); </li></ul><ul><li>         }, 500); </li></ul><ul><li>} </li></ul><ul><li>var x = new level_1(); </li></ul>
  11. 11. Inheritance <ul><li>Tons of ways to do Inheritance  </li></ul><ul><li>I will only cover one way </li></ul><ul><li>No &quot;extends&quot; in JS </li></ul><ul><li>Completely different way of thinking about it </li></ul><ul><li>Special property on Object named Prototype </li></ul>
  12. 12. <ul><li>function Animal() </li></ul><ul><li>{ </li></ul><ul><li>     Animal.prototype.evil = 1000; </li></ul><ul><li>     Animal.prototype.getColor = function() </li></ul><ul><li>     { </li></ul><ul><li>         return &quot;Blood Red&quot;; </li></ul><ul><li>     } </li></ul><ul><li>} </li></ul><ul><li>function Puppy()  </li></ul><ul><li>{ </li></ul><ul><li>} </li></ul><ul><li>Puppy.prototype = Animal.prototype; </li></ul><ul><li>var p = new Puppy(); </li></ul><ul><li>p.getColor(); </li></ul>
  13. 13. <ul><li>function Animal() </li></ul><ul><li>{ </li></ul><ul><li>     Animal.prototype.evil = 1000; </li></ul><ul><li>     Animal.prototype.getColor = function() </li></ul><ul><li>     { </li></ul><ul><li>         return &quot;Blood Red&quot;; </li></ul><ul><li>     } </li></ul><ul><li>} </li></ul><ul><li>function Puppy()  </li></ul><ul><li>{ </li></ul><ul><li>} </li></ul><ul><li>new Animal(); //(GOTCHA!) </li></ul><ul><li>Puppy.prototype = Animal.prototype; </li></ul><ul><li>var p = new Puppy(); </li></ul><ul><li>p.getColor(); </li></ul>
  14. 14. <ul><li>function Animal(){ </li></ul><ul><li>     Animal.prototype.color = &quot;Blood Red&quot;; </li></ul><ul><li>     Animal.prototype.getColor = function() </li></ul><ul><li>     { </li></ul><ul><li>         return &quot;Evil &quot; + this.color; </li></ul><ul><li>     } </li></ul><ul><li>}; </li></ul><ul><li>var a = new Animal(); </li></ul><ul><li>console.log(&quot;Animal Color: &quot; + a.getColor()); </li></ul><ul><li>function Puppy() { </li></ul><ul><li>     this.color = &quot;Blue&quot;; </li></ul><ul><li>} </li></ul><ul><li>Puppy.prototype = Animal.prototype; </li></ul><ul><li>var p = new Puppy(); </li></ul><ul><li>console.log(&quot;Puppy Color: &quot; + p.getColor()); </li></ul>
  15. 15. HTML5 <canvas> tag  <ul><li><body> </li></ul><ul><li><canvas id=&quot;gameCanvas&quot; width=&quot;600&quot; height=&quot;600&quot;></canvas> </li></ul><ul><li></body> </li></ul>
  16. 16. Get Pointer to <canvas> from JS <ul><li>// javaScript </li></ul><ul><li>var canvas = document.getElementById('gameCanvas'); </li></ul><ul><li>var context = canvas.getContext('2d'); </li></ul>
  17. 17. Draw on <canvas> with JS <ul><li>// javaScript </li></ul><ul><li>context.beginPath(); </li></ul><ul><li>context.moveTo(0,0); </li></ul><ul><li>context.lineTo(0,100); </li></ul><ul><li>context.lineTo(100,100); </li></ul><ul><li>context.lineTo(100,0); </li></ul><ul><li>context.closePath(); </li></ul><ul><li>context.strokeStyle = &quot;#000000&quot;; </li></ul><ul><li>context.fill(); </li></ul><ul><li>context.fillStyle = &quot;#CCCCCC&quot;; </li></ul><ul><li>context.fill(); </li></ul>
  18. 18. &quot;Animation&quot; (in quotes) <ul><li>var intervalId = setInterval(drawCanvas, 1000 / 30); </li></ul><ul><li>function drawCanvas(){ </li></ul><ul><li>     // clear everything </li></ul><ul><li>     context.clearRect(0,0, myWidth, myHeight); </li></ul><ul><li>     // redraw everything </li></ul><ul><li>     // Yes, you better know exactly  </li></ul><ul><li>     // where every pixel is at all times so  </li></ul><ul><li>     // you can redraw it at 30 FPS </li></ul><ul><li>     // :( </li></ul><ul><li>} </li></ul>
  19. 19. &quot;Animation&quot; (in quotes) <ul><li>var intervalId = setInterval(smartDrawCanvas, 1000 / 30); </li></ul><ul><li>function smartDrawCanvas() </li></ul><ul><li>{ </li></ul><ul><li>     // Clear only part of the canvas </li></ul><ul><li>     context.clearRect(25, 25, 50, 50); </li></ul><ul><li>     // redraw SOME of the canvas </li></ul><ul><li>     // TODO .... </li></ul><ul><li>} </li></ul>
  20. 20. Mouse Events on <canvas> <ul><ul><li>Cannot listen to events on any children on the <canvas> </li></ul></ul><ul><ul><li>Think of <canvas> as AS3 Bitmap </li></ul></ul><ul><ul><li>You can only listen on the main <canvas> object </li></ul></ul><ul><ul><li>You need to know where every 'interactive' object is the <canvas> at all times. </li></ul></ul><ul><ul><li>For clicks you need to calculate what was under the pixel that was clicked on </li></ul></ul><ul><ul><li>Observer pattern helps with this work </li></ul></ul>
  21. 21. Gotchas <ul><li>**JS** (for each works in FF, but not Chrome) </li></ul><ul><li>for (var x in myArray) </li></ul><ul><li>{ </li></ul><ul><li>     var obj = myArray[x]; </li></ul><ul><li>     obj.selected = false; </li></ul><ul><li>} </li></ul><ul><li>**AS3** </li></ul><ul><li>for each (var x:Object in myArray) </li></ul><ul><li>{ </li></ul><ul><li>     x.selected = false; </li></ul><ul><li>} </li></ul>
  22. 22. Gotchas <ul><li>var timeout = setTimeout(function() </li></ul><ul><li>     {         </li></ul><ul><li>         var x = passThruVar1; </li></ul><ul><li>         // x is undefined!!! </li></ul><ul><li>     }, 500, passThruVar1 , passThruVar2 ); </li></ul>

×