Objects

1. Objects public properties class{ public: int x; private: int y; } private code & data getValue() print() construct()

2. Variable Scope • Where a declared variable can be used • Global variables • Declared outside a function • accessible everywhere

3. Variable Scope • Local variable • Declared inside a function and is only available within the function it is declared • var keyword required • Global and local variables can use same identifier

4. var myGlobal= “look at me”; • { • //code blocks are denoted by braces {} • // used for loops, functions, if, switch … • var myTemporary= “life is short”; • } • function test(){ • alert(myGlobal); //displayed • alert(myTemporary); //not defined • }

5. with(){} • with(window.document){ • getElementById('test'); • }

6. this • this refers to the current scope • HTML tags: this = the tag's HTMLElement Object • <a … onclick=”f(this);”></a> • Javascript: it depends on the caller • Function.call() method (all functions have it) can set this to anything you give it

7. <script> • function hide(o){ • o.style.display='none'; • } • </script> • <div onclick=”hide(this);”>click me</div> • //this becomes the tag (HTMLDIVElement) • // notice the style css object

8. function experiment(){ • alert(this); • } • experiment(); //browser calls from window • //this == window object • //alert says window • experiment.call(document); • //this == window.document; • //alert says document

9. Hackin’ Objects • You can modify objects properties! • Use existing objects for storage • data related to the object can be stored directly on that object • Methods can be added to objects or replace existing methods*

10. The old “donut” model for talking about objects public properties private code & data getValue() print() construct()

11. Javascript’s Perspective of the Object property properties are just Objects property property property

12. Example: Image

13. Function ≈ Method • Functions are methods without a "home" • Functions live within global variables • Methods are functions stored in object variables • Methods of the same object can share • this is set to the object for function calls

14. My function properties My properties … Hacking Objects property properties are just Objects property property property

15. Objects vs Classes • Class • Abstract: Definition / Classification • ex: DOG = Canis lupus familiaris • Object • Concrete / Exists. • ex: "Sparky" is a DOG.

16. .bounceMe() .Click Counter .last Position Image Object A Image Object B properties are just Objects properties are just Objects property property property property property property

17. var A = new Image(); • A.ClickCounter = 1; • A.bounceMe = function(){…}; • // anonymous function, could also copy • // a function by just using its NAME • var B = new Image(); • B.lastPosition = 500;

18. document.myvar = "hello world"; • document.myfunction = function(){ • window.alert(this.myvar); • } • document.myfunction(); • // javascript is actually doing this: • document.myfunction.call( document );

19. //this ADDS a property onto anything you pass to the function • function clicked( someTagObject ){ • if( ! someTagObject.clickCount) { • someTagObject.clickCount = 0; • } • someTagObject.clickCount ++; • }

20. function initGame(){ • o=document.getElementById(’ user’); • o.isAlive = true; • } • …somewhere else in the code… • if( • document.getElementById(’user’).isAlive) { • //keep moving around • }

21. Review • Javascript can ADD properties to objects • Methods are just properties with function Objects • Function objects have properties! • .call( make_into_this, parameters... ); • arguments ≡ parameters