OO JS for AS3 Devs

  • 1,237 views
Uploaded on

 

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
1,237
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
7
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • function myClass() {      this.add = function(a, b)          {          return a + b;      }; } var c = new 

Transcript

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