OO JS for AS3 Devs
Download as PPT, PDF1 like724 views
The document compares and contrasts object-oriented programming concepts between JavaScript and ActionScript 3. Some key differences include: - JavaScript uses prototypes instead of classes for inheritance and does not have keywords like "extends" - Scope in JavaScript functions can be tricky due to closures - Animation in JavaScript requires manually redrawing the entire canvas each frame rather than updating individual objects - Interactivity on HTML5 canvas elements only occurs at the canvas level rather than on child objects
![No Strong Types in JS var myVar1; var myVar1 = 10; var myVar1, myVar2, myVar3; var myVar = []; myVar.push("foo"); const EVENT_NAME = "name" var myVar:Object public myVar public function myFunct():String function myFunct():String package {}, class {} extends, implements, final, internal, public, private GOOD PUPPY BAD PUPPY](https://image.slidesharecdn.com/7502309/85/OO-JS-for-AS3-Devs-4-320.jpg)
![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; }](https://image.slidesharecdn.com/7502309/85/OO-JS-for-AS3-Devs-21-320.jpg)
OO JS for AS3 Devs
- 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=""/> 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("foo"); const EVENT_NAME = "name" 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 "extends" 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 "Blood Red"; } } function Puppy() { } Puppy.prototype = Animal.prototype; var p = new Puppy(); p.getColor();
- 13. function Animal() { Animal.prototype.evil = 1000; Animal.prototype.getColor = function() { return "Blood Red"; } } function Puppy() { } new Animal(); //(GOTCHA!) Puppy.prototype = Animal.prototype; var p = new Puppy(); p.getColor();
- 14. function Animal(){ Animal.prototype.color = "Blood Red"; Animal.prototype.getColor = function() { return "Evil " + this.color; } }; var a = new Animal(); console.log("Animal Color: " + a.getColor()); function Puppy() { this.color = "Blue"; } Puppy.prototype = Animal.prototype; var p = new Puppy(); console.log("Puppy Color: " + p.getColor());
- 15. HTML5 <canvas> tag <body> <canvas id="gameCanvas" width="600" height="600"></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 = "#000000"; context.fill(); context.fillStyle = "#CCCCCC"; context.fill();
- 18. "Animation" (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. "Animation" (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 );
Editor's Notes
- #7: function myClass() { this.add = function(a, b) { return a + b; }; } var c = new