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,302

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,302
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • function myClass() {      this.add = function(a, b)          {          return a + b;      }; } var c = new 
  • 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>
    1. ¿Le ha llamado la atención una diapositiva en particular?

      Recortar diapositivas es una manera útil de recopilar información importante para consultarla más tarde.

    ×