Here’s an Object Oriented Javascript tutorial.
Here’s the source code for the tutorial being executed so you can follow along if you like. To grab the source just view the source of that page.
I had never _really_ touched Javascript until a couple of months ago when I realised I had to get serious and learn it. I am very glad I made that move. Javascript is pretty nifty, but when you start to work with it at first it’s hard to take seriously. For example, my 700 page long Javascript book dedicates 26 pages to Object Orientation, but if you’re building anything substantial in JS you will want to use OO techniques. Here’s a quick JS OO primer (mind you, I’m no JS guru) and some info on Javascript callbacks in the OO world. This will be particularly helpful to those jumping on the AJAX wave and integrating with “Prototype”:http://prototype.conio.net/.
OO JS seems to go against the current JS usage trend. As I quickly discovered, OO JS can be confusing, messy, and tricky. OO JS uses a “quirky” prototype style method to define your classes, and methods. I say quirky because no doubt this style has been discussed thoroughly in academic circles, but for you’re typical developer coming from a C++/Java background it can be daunting. Lets define a person class:
/*************************************************************
Person
*************************************************************/
//You don't need to define class variables but it's
//good practice for neatness sake.
Person.prototype.name = null;
function Person(name) {
this.name = name;
}
Person.prototype.talk = function() {
document.write("Hi! My name is "+this.name+"
");
}
Person.prototype.setName = function(name) {
this.name = name;
}
And then use it:
person = new Person('alex');
person.talk(); // Hi! My name is alex
document.write(person.name+"
"); // alex
//Alex moves to Italy"
person.setName("alexio")
person.talk(); // Hi! My name is alexio
“That’s whack”, I hear you say. That’s exactly what I thought! You kind of have to think outside the class paradigm because they are “theoretically different paradigms”:http://en.wikipedia.org/wiki/Prototype-based_programming. In OO JS “prototype” is a special object that defines the entity. You can hang stuff off the prototype including methods (Person.prototype.talk) and properties/class variables (Person.prototype.name). When ever you try to use a method of property of an object, the language will refer to the prototype to work out what you want to do.
Fundemental to OO is inheritance. Here’s Employee inherting from Person, and we’re overriding the talk() prototype.
/*************************************************************
Employee
*************************************************************/
function Employee() {}
//Employee is "extending" Person.
Employee.prototype = new Person();
Employee.prototype.vocabulary = new Array(
"Yes sir!",
"I agree whole heartedly and without dispute, sir.",
"Good one sir!",
"Anyone for coffee?",
"Anyone for water?",
"Home time!",
"Yeh, I'm still paying off my student loan.",
"*Sigh* Another monday."
);
//Employee is overriding the talk() method of Person.
Employee.prototype.talk = function()
{
saying = Math.round(Math.random() * (this.vocabulary.length-1) );
document.write(this.vocabulary[saying]+"
");
}
And again we then use the Employee prototype to create a real employee.
employee = new Employee();
employee.talk();
<p>So we interhit the Person prototype by cloning an example of the prototype and calling it Employee. We then override the talk() method. That"s pretty much the basic OO functions covered. Now we get a little trickier. In the next example we"re going to create an UpperManagement prototype that will inherit from Person once again. The difference in this example is that we are going to dynamically modify the prototype instance so that instead of UpperManagement saying what they want, we tell them what to say.</p>
<pre>
/*************************************************************
Upper Management
*************************************************************/
function UpperManagement() {}
UpperManagement.prototype = new Person('God');
UpperManagement.prototype.talk = function() {
document.write("Don't worry, last years losses will be made up by this years projections.<br/>");
}
your_boss = new UpperManagement();
your_boss.talk();
document.write("
<h1>Modified Upper Management</h1>
");
//If only we could do this in real life.
your_boss.talk = function() {
document.write("Double salary for all!<br/>");
}
your_boss.talk();
Cool huh? So initially we simply define UpperManagement and let them talk their gibberish. Then we redefine the way they talk to something we can stomach.
Now, for my final trick I will present a way to use a method from an object as a callback for another function. This is trickier than you may think!
Talk Oscar!</div>
<div id="talking_advanced">Say Hello!</div>
<script type="text/javascript">
/*************************************************************
Person Callback
*************************************************************/
//My dog Oscar may as well be human sometimes...
myDog = new Person(\'Oscar\');
myDog.talk = function() {
placeholder = document.getElementById(\'talking\');
placeholder.innerHTML += " ... woof! woof!<br/>";
}
//Lets see if we can get him to talk after a 2 second pause.
setTimeout(myDog.talk, 2000);
//You should have seen the "Talk Oscar!" text on the page change after two seconds.
//Lets say we want him to say something really advanced.
myDog.talk_advanced = function() {
placeholder = document.getElementById("talking_advanced");
placeholder.innerHTML += " " Hurro! ry rame is r"+this.name;
}
//Oops! This doesn"t work! We set the callback of the timer to call a function
//prototype the requires "this" to be set. Unfortunately, because it"s only a
//prototype the request of "this" will fail :(
setTimeout(myDog.talk_advanced, 2000);
//We need to create a function that knows the object at the time the callback is required.
function FunctionInvoker(me) {
this.me = me;
this.invoke = function() {
me.talk_advanced();
}
}
myDogTalking = new FunctionInvoker(myDog);
setTimeout(myDogTalking.invoke, 5000);
</script>
Let me run through it briefly. FIrstly we create an instance of my Beagle called Oscar. He’s like a person sometimes so it’s OK if we clone the Person prototype. Next we get him to talk more dog like. Then we get him to talk after a two second pause, which works fine. Oscar is a smart dog and obedient at times, so I set a harder command for him where he has to say his name. The command requires Oscar to use his instance variable “this.name”. This wont work in the standard way because we simply “clone” the function prototype and use it as the callback function. The problem with this is that the function is no longer part of an instance. We require the assistance of an agent, FunctionInvoker. We tell FunctionInvoker the object we want to call, and we define a function (this.invoke =…) that acts as a proxy to the object’s method we really intend on calling.
That’s pretty hardcore and if you understood it then well done! If you didn’t then don’t worry. Trace it through and you’ll get it.
That’s a wrap for this tutorial. If there’s any mistakes or corrections required then please let me know by commenting to this post! Enjoy!
Posted in Technical |
No Comments »
March 28th, 2006
We’ve all heard that China is growing at a massive rate, but “something I read this morning”:http://www.theage.com.au/articles/2006/03/28/1143441151218.html just about floored me. Here’s a few quotes.
“_…China aims to increase its nuclear energy production six-fold by 2020._”
“_To achieve this, China will have to launch at least two new generators every year, with a capacity of at least 1 million kilowatts._”
Further down the article there are some specifics…
“_Another two generators are being built with plans for another 30 much more powerful reactors by 2020 that would bring annual output to about 40 gigawatts of energy._”
“_Australia, which has 40 per cent of the world’s uranium reserves, and a proven track record as a reliable resources supplier, is ideally placed to meet China’s future uranium needs. _”
It appears the numbers are realistic too. Not being a nuclear scientist I did some follow up to put this in context (see the “Context’ heading below).
What I’ve just read seems like a massive task and it puts their “growth” in a more digestible perspective. Draw your own conclusions, but I think the geographic distance between China and Australia is blinding me from what is happening over in China. Sure, they’re staggering growth is all over the papers but there’s a difference between knowing it’s happening and understanding enough to take advantage of the situation.
On top of this, I have been told that China’s stock markets are expected to be the second largest (just behind USA) by 2010. From memory, China is currently fifth largest, and the sum total of the second, third, and fourth markets only just equate to the size of the American markets.
*Context*
1 million kilowatts = 1,000,000,000 watts = 1 gigawatt
According to “wikipedia”:http://en.wikipedia.org/wiki/Nuclear_power, “_In 2005, there were 441 commercial nuclear generating units throughout the world, with a total capacity of about 368 gigawatts._”
Which means the average plant is generating 368 % 441 ~ 0.83 gigawatts.
Wikipedia goes on to say, “_The 1600MW EPR reactor being built in Olkiluoto, Finland, will be the largest in the world._”
Posted in General Business |
1 Comment »
