- 1. Getting from Scripts to Applications Donald J. Sipe|Refresh
Jacksonville|November 11 th2008
2. JavaScript
Pseudoclassical Inheritance Hello World! 3. JavaScript
- What well be talking about
4. But First... Some handy tools
- Here are some handy things you might not know JavaScript can
do:
- Dot-styleandarray-style access of properties
5. Handy Tools
- Object Literal Notation Makes JSON possible
- // The old way varmyObject = new Object(); myObject.val =
test;
- // Using object literal notation varmyObject = { val: test
};
6. Handy Tools
- // The old way varmyArray = new Array(1, 30, Refresh);
- // Using object literal notation varmyArray = [1, 30,
Refresh];
7. Handy Tools
- In JavaScript, functions are treated as values, which
means:
-
- Functions can be assigned to variables
-
- Functions can be passed as arguments to other functions
8. Handy Tools
- // Using an anonymous function as an argument
setTimeout(function() { alert( Refresh ); }, 1000 );
- // Using a function as a variable varmyFunc =function() {alert(
Refresh );}; setTimeout(myFunc, 1000);
9. Handy Tools
- Anonymous Functions : Building a scope bubble Using an
anonymous function to wrap code you dont want in the global
scope
- varglobalVar = Refresh;// Global scope
- // Create a scope bubble (function() { varprivateVar =
Jacksonville; alert( globalVar + + privateVar ); } )();
- alert (privateVar ==undefined );
10. Handy Tools
- Binary Assignment Set a default value only if the variable
doesnt have a value yet
- // Traditional ternary assignment varmyVar =
myVar?myVar:0;
- // Binary assignment varmyVar = myVal || 0;
11. Handy Tools
- Dot-Style and Array-Style property access
- varsampleObj = { color: blue, width: 16px };
- // Traditional dot-style access alert( sampleObj.color == blue
);
- // Alternative array-style access alert( sampleObj[width] ==
16px );
12.
- Scope, Closures, and Context
13. Scope
- Only functions have scope.Blocks ( if ,while ,for ,switch ) do
not.
- All variables are within the global scope unless they are
defined within afunction .
- All global variables actually become properties of thewindow
object
- When variables arenotdeclared using thevar keyword, they
decared globally.
14. Scope
- varfoo = orig;//foois now a global variable
- if( true ) { foo = new;// Globalfoonow equals new }
- // create function to modify its ownfoovariable functiontest ()
{ varfoo = old; }
- test(); alert( foo == new );// Globalfoostill equals new
15. Scope
- If you forget to use thevar keyword to define a value within a
functioneven if its only used within the functionthe value will be
defined globally.
- varfoo = new; alert( foo == new );
- // Omitting the var keyword reverts scope // offooto global
level functionbadTest () { foo = bad news; }
- badTest(); // Globalfoonow equals bad news alert( foo == bad
news );
16. Scope:Inner Functions
- Functions can be defined within one another
- Inner functions have access to the outer functions variables
and parameters.
- functiongetRandomInt(max) { varrandNum = Math.random() * max;
functionceil() { returnMath.ceil(randNum); } returnceil();// Notice
that no arguments are passed } // Alert random number between 1 and
5 alert(getRandomInt(5));
17. Closures
- Inner functions maintain the scope they enjoyed when their
parent function was calledevenafterthe parent function has
terminated.
- This allows you to effectively pass variables to functions that
may not be called for some time.
18. Closures
- functiondelayedAlert (message, delay) { // Set an enclosed
callback setTimeout(function() { // Usemessagevariable passed to
outer function alert(message); }, delay); }
- // Display a message with a 5 second delay
delayedAlert(Refresh, 5000);
19. Context
- Your code will always be running within thecontextof another
object
- Context is maintained through the use of thethisvariable.
- function increment() { this .x =this .x || 0; return this .x++;
};
- alert( increment() == 0 );
- alert( increment() == 1 );
20. Context
- varmyObject = { set:function(newVal) {this .val = newVal; }
};
- alert( myObject.val ==null);//valproperty not set yet
- myObject.set(Refresh); alert( myObject.val == Refresh );
//valequals Refresh
- // Change the context ofset()to the window objectwindow.set =
myObject.set;window.set( Refresh Jacksonville );
- alert( myObject.val == Refresh );
- alert( window.val == Refresh Jacksonville );
21. Context:Changing Contexts
- JavaScript provides two handy functions for executing a
function within the context of another function:
22. Context:Changing Contexts
- Usingcall() Arguments passed by name
- // Simple function to change the color style of a node
functionchangeColor (newColor) { this .style.color = newColor;
}
- // window.changeColor has nostyleproperty, so call fails
changeColor( red );
- // Grab the DOM node with the id required varreqField =
document.getElementById( required );
- // Call changeColor() within reqFields context
changeColor.call( reqField, red );
23. Context:Changing Contexts
- Usingapply() Arguments passed as an array
- // Simple function to change the color style of a node
functionchangeColor (newColor) { this .style.color = newColor;
}
- // Set the text color of the body element function
setBodyTextColor () { changeColor.apply( document.body,arguments);
}
- setBodyTextColor( black );
24.
25. Object Oriented Programming
- Now lets apply all of this information to a more classical view
of OOP in JavaScript:
26. About Objects
- Almost everything written in JavaScript is an object
- Objects can be though of as a collection of propertiesmuch like
ahashin other languages
- JavaScript doesnt have a concept of classes like other
object-oriented languages
- Classes are simulated using a concept calledprototypal
inheritance
27. Constructors
- Like other languages, JavaScript uses thenew operator to create
new instances of objects.
- // Create User object constructor functionUser ( name ) { this
.name = name; }
- // Create a new instance of a User varme = new User(Bob);
- // Alert new users name alert( me.name == Bob );
- // Cannot call User directly alert( User.name ==undefined); //
window.name is undefined
28. Methods 29. Public Methods
- One way to create a public methoda function that can be freely
reference by code outside your objectis to attach it to the
objectsprototype .
- An objectsprototypeis a special property that acts as a base
reference of your object.
- Thisprototypeobject is copied and applied to all new instances
of your object.
30. Public Methods
- // Our User object written a different way varUser
=function(name) { this .name = name; }
- // Add a public accessor method for name User. prototype
.getName = function () { return this .name; }
- alert( me.getName() == Bob );
31. Private Methods
- Private methods are functions that are only accessible to
methodsinsideyour object and cannot be accessed by external
code.
32. Private Methods
- // Our User object with some changes varUser =function(name) {
this .name = name; functionwelcome () { alert( Welcome back, +this
.name + .); } welcome(); }
- // Create a new Uservarme =newUser( Bob );// Alerts: Welcome,
Bob.
- // Fails because welcome is not a public method
me.welcome();
33. Privileged Methods
- The termprivileged methodwas coined by Douglas Crockford.It is
not a formal construct, but rather a technique.
- Privileged methods essentially have one foot in the door:
-
- Then can access private methods and values within the
object
-
- They are also publicly accessible
34. Privileged Methods
- // Our User object with some tweaks varUser =function(name,
age) { varyear = (new Date()).getFullYear() age; this .getYearBorn
= function () { returnyear; }; };
- // Create a new Uservarme =newUser( Bob, 28 );
- // Access privileged method to access privateyearvalue alert(
me.getYearBorn() == 1980 );
- // Fails becauseyearis private alert( me.year == null );
35. Grand Finale
- UsingScope ,Closures ,Contexts , and what weve discussed about
OOP, we can dynamically generate classes based on information
supplied to the constructor.
36. Grand Finale
- // Our User object modified to accept an object of properties
functionUser (properties) { // Loop through properties and create
getter and setter methods for(variinproperties ) {function() { this
[get + i] =function() { returnproperties[i]; }; this [set + i]
=function(val) { properties[i] = val; }; })(); } }
- // Create a new user, automatically creating get and set
methods varme =newUser( { name: Bob, age: 28 });
37. Grand Finale
- // Note thatnameis private withinproperties alert( me.name
==null);
- // Access privilegedgetname()method alert( me.getname() == Bob
);
- // Use the dynamically generated setter// to change the users
age me.setage(21); alert( me.getage() == 21 );
38. 39. References
- Pro JavaScript Techniques, by John Resig
- YUI Theater Presentations
- http://developer.yahoo.com/yui/theater