Here is a good example I wrote of javascript prototypes that extend other objects. (e:paul,4369) was part one and both were in reference to (e:zobar,59)
[box]<html>
<body>
<script type="text/javascript">
/*create a sound object for making sounds*/
sound = function(noise){
this.setNoise(noise);
}
/*add new prototype to output the noise */
sound.prototype = {
/*set the noise echoed on sound.out)*/
setNoise : function(noise){
this.noise = noise || 'plain sound';
},
/*output the noise*/
out : function(numTimes){
var noise ='"';
for(x=0;x<numTimes;x++){
noise += this.noise;
if(x<numTimes-1){ noise +=', ';}
}
return noise+'!"';
}
}
/*create a animal object for making animals that make sounds*/
animal = function(name, noise){
this.setName(name);
this.vocals = new sound(noise);
}
animal.prototype = {
/*set the name of the animal*/
setName : function(name){
this.name = name || 'another animal';
},
/*prototype to wrap sound.out*/
talk : function(times){
alert(this.name +" said "+this.vocals.out(times));
},
/*prototype to wrap sound.setNoise*/
changeVocals : function(noise){
mySquirrel.vocals.setNoise(noise);
}
}
/*instantiate an animal ( a squirrel that barks) and make it talk */
mySquirrel = new animal('squirrelio', 'bark');
mySquirrel.talk(3);
mySquirrel.changeVocals('ruff');
mySquirrel.talk(4);
</script>
</body>
</html>
[/box]
A lot of people have come up with different methods for dealing with inheritance. Here is one page that explains it and here is another that abstracts it a bit.
Once you are into the prototyping system you can make your own system to make extending and inheriting easier.
Paul's Journal
My Podcast Link
05/27/2006 10:37 #32630
Javascript Prototypes Part IICategory: programming
05/27/2006 00:11 #32629
Javascript PrototypesCategory: programming
Believe it or not, I love javascript so much.
SIDENOTE ON SUREBERT
If you want to use surebert for any AJAX stuff at artvoice, feel free. It allows you to easily post data to any page. Here is the non-compressed js version so you can see what is going on.
Prototypes
(e:zobar,59) if you already know this then maybe this is a waste because no one else is going to read it besides maybe (e:enknot) who already knows this because we talk shop all day at work, but in case you haven't thought about it, you can write very extensible objects in javascript using protypes.
In fact, I would argue that the prototype if the basis of complicated OOP in javascript. The prototype is applied to every instance of the object without having to copy the function as it is when declared as a function within the constructor.
Here is how I would write it
Greeter = function(yourName){
this.yourName = yourName;
}
Greeter.prototype.getTimeOfDay = function(timeOfDay){
alert('Good ' + timeOfDay + ', ' + this.yourName);
}
greetZ = new Greeter('Zobar');
greetP = new Greeter('Paul');
greetZ.getTimeOfDay('afternoon');//'Good afternoon, Zobar'
greetZ.getTimeOfDay('evening');// 'Good evening, Zobar'
greetZ.getTimeOfDay('evening');// 'Good evening, Paul'
[/box]
Because everything is an object in javascript, if you have mutliple prototypes for an object you can easily write them like below which look very neat and organized when used with large objects.
[box]
Greeter = function(yourName){
this.yourName = yourName;
}
//javascript object notation for attaching multiple protoypes to an object.Although you could write each one as Greeter.prototype.name of function, I think when have lots of protypes this looks neater. You can also add any of properties as a prototype. In this case I am also creating a property called job. that can be referred to as instanceName.job e.g. greetZ.job you can even attach protoype arrays this way
Greeter.prototype = {
'job' : 'programmer',
getTimeOfDay : function(timeOfDay){
alert('Good ' + timeOfDay + ', ' + this.yourName);
},
getRandNumber : function(min,max){
min = min || 0;
max = max || 100;
alert(Math.floor(Math.random()*max+min));
},
sayHello : function(){
alert("Hello, "+this.yourName);
}
}
greetZ = new Greeter('Zobar');
greetP = new Greeter('Paul');
greetZ.getTimeOfDay('afternoon');//'Good afternoon, Zobar'
greetZ.sayHello();// 'Hello, Zobar'
greetZ.getRandNumber(10,30);// 'Good evening, Paul'
SIDENOTE ON SUREBERT
If you want to use surebert for any AJAX stuff at artvoice, feel free. It allows you to easily post data to any page. Here is the non-compressed js version so you can see what is going on.
Prototypes
(e:zobar,59) if you already know this then maybe this is a waste because no one else is going to read it besides maybe (e:enknot) who already knows this because we talk shop all day at work, but in case you haven't thought about it, you can write very extensible objects in javascript using protypes.
In fact, I would argue that the prototype if the basis of complicated OOP in javascript. The prototype is applied to every instance of the object without having to copy the function as it is when declared as a function within the constructor.
Here is how I would write it
Greeter = function(yourName){
this.yourName = yourName;
}
Greeter.prototype.getTimeOfDay = function(timeOfDay){
alert('Good ' + timeOfDay + ', ' + this.yourName);
}
greetZ = new Greeter('Zobar');
greetP = new Greeter('Paul');
greetZ.getTimeOfDay('afternoon');//'Good afternoon, Zobar'
greetZ.getTimeOfDay('evening');// 'Good evening, Zobar'
greetZ.getTimeOfDay('evening');// 'Good evening, Paul'
[/box]
Because everything is an object in javascript, if you have mutliple prototypes for an object you can easily write them like below which look very neat and organized when used with large objects.
[box]
Greeter = function(yourName){
this.yourName = yourName;
}
//javascript object notation for attaching multiple protoypes to an object.Although you could write each one as Greeter.prototype.name of function, I think when have lots of protypes this looks neater. You can also add any of properties as a prototype. In this case I am also creating a property called job. that can be referred to as instanceName.job e.g. greetZ.job you can even attach protoype arrays this way
Greeter.prototype = {
'job' : 'programmer',
getTimeOfDay : function(timeOfDay){
alert('Good ' + timeOfDay + ', ' + this.yourName);
},
getRandNumber : function(min,max){
min = min || 0;
max = max || 100;
alert(Math.floor(Math.random()*max+min));
},
sayHello : function(){
alert("Hello, "+this.yourName);
}
}
greetZ = new Greeter('Zobar');
greetP = new Greeter('Paul');
greetZ.getTimeOfDay('afternoon');//'Good afternoon, Zobar'
greetZ.sayHello();// 'Hello, Zobar'
greetZ.getRandNumber(10,30);// 'Good evening, Paul'
05/26/2006 13:16 #32628
My house at 3:30amCategory: pets
At about 4:40 I decided to stop programming and head off to bed. The sugar glider seemed really unjhappy with this decision. Maybe it is because I shut off al the lights and she was hunting for ants. She ate one of those giant tanker ones. It was fun to watch her captture it. So when i wen tto bed she started barking like crazy. It is really as loud as a dog.
boxerboi - 05/26/06 14:53
wow, they sound just like little dogs. that's kinda cool
wow, they sound just like little dogs. that's kinda cool
leetee - 05/26/06 13:24
There is no way i could fall asleep with that barking noise. How do you do it? In fact, how do you survive the next day after going to sleep so late? I guess i'm just unfortunate or lazy, 'cause i need a solid 8 hours a night... or i am grumpier than i usually am.
There is no way i could fall asleep with that barking noise. How do you do it? In fact, how do you survive the next day after going to sleep so late? I guess i'm just unfortunate or lazy, 'cause i need a solid 8 hours a night... or i am grumpier than i usually am.
05/26/2006 23:27 #32627
Terrible FeelingCategory: dance
I feel the beginning of being sick on the night I wanted to go see Dieselboy and Dj Dara at the OPM lounge. I guess it cost $15 which was kind of expensive considering there would be very little dance space I am sure but it is probably the last opportunity I would have to see that combo in my life. I guess I have to start giving shit up in order to pay for the mansion.
05/25/2006 23:35 #32626
LunchesCategory: food
Everyday I eat lunch with (e:enknot). It is probably the favorite part of my day. We talk about nerdy computer stuff and get really excited about what we are doing, gossip a bit and eat good food. Today we decided to switch it up and eat at the sub shop on North.
Besides the walking and beautiful weather it was a waste. The food was really bad, as was the service. The counter girl was kind of nice, but the kitchen dude was kind of a jerk. The atomsphere was ueber tacky and the paneling wasn't even sheik in the 70s.
I didn't even take a picture of the food. My french fries tasted like fish and not in a good way.
It was so pale in comparison to the roswelll lunches. I feel bad that it was so plain the day (e:jenks) visited. The next day, this was the entree.
This morning at work we had a fire alarm that freaked me the hell out. I didn't even breathe because I was so scared of what could be burning in the cell and virology building. The alarm was so loud and scary.
Besides the walking and beautiful weather it was a waste. The food was really bad, as was the service. The counter girl was kind of nice, but the kitchen dude was kind of a jerk. The atomsphere was ueber tacky and the paneling wasn't even sheik in the 70s.
I didn't even take a picture of the food. My french fries tasted like fish and not in a good way.
It was so pale in comparison to the roswelll lunches. I feel bad that it was so plain the day (e:jenks) visited. The next day, this was the entree.
This morning at work we had a fire alarm that freaked me the hell out. I didn't even breathe because I was so scared of what could be burning in the cell and virology building. The alarm was so loud and scary.
Ah, but i did read it.. i didn't understand it, but i read it.
I have a newfound respect for Javascript. I did know about prototypes, but since I come from a class-based OOP background I probably don't grok them completely. Is there some way that prototypes can have their own prototypes, ie inheritance? Or am I missing a better way to do the same thing?
[The reason I'm all into this now is that I'm doing the database backend for our calendar in XUL :::link::: , and since XUL does not provide any kind of transactional form processing like X/HTML does, the only way to interact with the server is through XMLHttpRequest and its ilk.]
- Z