Post by Schubaltz on Apr 4, 2008 22:47:37 GMT -5
By no means a tutorial I still support. But it's got some good info. 
This tutorial is intended for intermediate to advanced JavaScripters.
We've seen plenty of objects in our JavaScripting careers. Math, Number, String, Array, etc. These objects also had their own properties and methods (ex: Array.length and Math.round()). The object's properties are simply it's characteristics while it's methods are simply the operations it can perform. Let's take a proboarder for example. Each PBer has their own properties (posts, age, username, date registered, etc). They also have their own methods or operations they perform (post(), pm(), bookmark(), changeProfile(), etc). Objects allow us to organize scripts and update information more easily which is why JavaScript enables you to create your own.
Let's start off by creating our object:
function member(username, age, posts, rank)
{
this.username = username;
this.age = age;
this.posts = posts;
this.rank = rank;
}
Alright, so to create an object, we use a function. This object's parameters will work as it's properties. Each member will have a username, age, post count, and rank. Inside the function you will see "this.property = property." Why "this?" Because "this" will reference the currently called instance of the object (instead of all instances). So how do we create new instances of our object? Why, just as we do with others:
var aaron = new member("Aaron", 14, 100, "Pwnage");
We use "new." So, variable aaron holds an instance of the object with a username of "Aaron," an age of "14," a post count of "100," and a rank of "Pwnage." I'm sure you're now attempting to alert the object or something. =P You'll simply get [Object object]. You can't call a custom made object any different than a pre-existing one. You have to address it's properties:
alert(aaron.username);
As you can see, i've called the object instance and addressed it's username property. Now that we know how to create an object and address and set it's properties, let's get into methods:
function changeName(new_username)
{
this.username = new_username;
}
Our method works as a function acting upon the object. In use, "this" will address the member object and NOT the changeName() function. Now let us look within the function. "this.username = new_username" says that the instance of the member object's username is now the equivalent of "new_username."
Before we can use our method, we must address it within our object:
function member(username, age, posts, rank)
{
this.username = username;
this.age = age;
this.posts = posts;
this.rank = rank;
this.changeName = changeName;
}
Now that we've done so, we can use our changeName function as so:
aaron.changeName("Der Fleurer");
Now let's try alerting aaron's username again:
alert(aaron.username);
Instead of "Aaron," we will recieve the alert "Der Fleurer." =) A quick overview:
function member(username, age, posts, rank)
{
this.username = username;
this.age = age;
this.posts = posts;
this.rank = rank;
this.changeName = changeName;
}
function changeName(new_username)
{
this.username = new_username;
}
We created a function named "member." This function will work as our object. We've given it 4 properties: username, age, posts, and rank. Then we created another function which will work as our method. This function (when called) will change the username property of the current instance of object "member."
var aaron = new member("Aaron", 14, 100, "Pwnage");
Now that the core of the script is complete, we can call new instances. In the above line i've called a new instance and stored it in variable "aaron." This instance has a username property of "Aaron," an age property of "14," a posts property of "100," and a rank property of "Pwnage." Now let's mess around with the function and it's method a bit (just to get a feel for it):
function member(username, age, posts, rank)
{
this.username = username;
this.age = age;
this.posts = posts;
this.rank = rank;
this.changeName = changeName;
}
function changeName(new_username)
{
this.username = new_username;
}
var aaron = new member("Aaron", 14, 100, "Pwnage");
alert(aaron.username);
aaron.changeName("Der Fleurer");
alert(aaron.username);
Take this script for a test-drive. The first alert you'll recieve is "Aaron." The second being "Der Fleurer." This is because after the first alert, we use our changeName() function to adjust the current instance's username property. =)
Now try this script:
function member(username, age, posts, rank)
{
this.username = username;
this.age = age;
this.posts = posts;
this.rank = rank;
}
var aaron = new member("Aaron", 14, 100, "Pwnage");
alert(aaron.username);
aaron.username = "Der Fleurer";
alert(aaron.username);
=0 It does the exact same thing! And with half the length. Changing properties in such a simple manner doesn't call need for methods. I was simply setting an example by creating one as I did. But don't worry, all is not lost! Methods still have their uses as they keep the code clean and allow for easy cut-and-paste when applying them to other scripts. Now let's create a more useful method.
function mergeProperties(separator)
{
return this.username + separator + this.age + separator + this.posts + separator + this.rank;
}
When this function is inserted within our script we will be able to return a string of all the properties of the object:
function member(username, age, posts, rank)
{
this.username = username;
this.age = age;
this.posts = posts;
this.rank = rank;
this.changeName = changeName;
this.mergeProperties = mergeProperties;
}
function changeName(new_username)
{
this.username = new_username;
}
function mergeProperties(separator)
{
return this.username + separator + this.age + separator + this.posts + separator + this.rank;
}
var aaron = new member("Aaron", 14, 100, "Pwnage");
alert(aaron.mergeProperties(", "));
The first few parts you should already know. What I want you to focus on is the "return" operation. You know how some methods return a boolean and others a string? Or some the actual object, etc etc? Well, that's basically what "return" does. When the mergeProperties() function is called, it will "return" as a string. That string of course being a collection of the instance's properties.
Next example:
function changeName(new_username)
{
new_username;
}
alert(changeName("Bonjour"));
Ok, we created a changeName() function. Inside it we simply restate the variable. Now then, what will changeName("Bonjour") alert? It will alert "undefined" because no return value was specified. So why not make it return the string?
function changeName(new_username)
{
return "Input: " + new_username;
}
alert(changeName("Bonjour"));
Alright, when the function is called it says to return the string "Input: " + new_username. Since we declared new_username to be the string "Bonjour," the function will return "Input: Bonjour." Think of it this way, the changeName() function "becomes" a string.
Alright. Ready to make use of this handy little operation? Good! 'Cause this is 2 hours of my life i'm never gonna get back.
I figured to finish off the lesson we'd return the object itself each time the changeName() function or any of the other change functions are executed.
function member(username, age, posts, rank)
{
this.username = username;
this.age = age;
this.posts = posts;
this.rank = rank;
this.changeName = changeName;
this.changeAge = changeAge;
this.changePosts = changePosts;
this.changeRank = changeRank;
}
function changeName(new_username)
{
this.username = new_username;
return this;
}
function changeAge(new_age)
{
this.age = new_age;
return this;
}
function changePosts(new_posts)
{
this.posts = new_posts;
return this;
}
function changeRank(new_rank)
{
this.rank = new_rank;
return this;
}
var aaron = new member("Aaron", 14, 100, "Pwnage");
Ok. So we've added on three new functions. Each will change a certain property and then return the object instance they were applied to. This means each time we use one, we get back "aaron." So we can stack layer upon layer of methods:
aaron.changeName("Der Fleurer").changeAge(15).changePosts(120).changeRank("Major Pwnage");
Again, each time one of the change functions is executed, it returns the instance. So after changeName(blah) executes, it returns "aaron" meaning we can apply any of our methods AGAIN. Last example:
alert(aaron.changeName("Der Fleurer").username);
The above will change the username property of instance "aaron" to "Der Fleurer" and return that instance. Because the instance is returned, we can address any of it's methods and properties as if it were simply aaron.blah. The above will alert the username of the instance "aaron" AFTER it has been changed. =)
This tutorial is intended for intermediate to advanced JavaScripters.
We've seen plenty of objects in our JavaScripting careers. Math, Number, String, Array, etc. These objects also had their own properties and methods (ex: Array.length and Math.round()). The object's properties are simply it's characteristics while it's methods are simply the operations it can perform. Let's take a proboarder for example. Each PBer has their own properties (posts, age, username, date registered, etc). They also have their own methods or operations they perform (post(), pm(), bookmark(), changeProfile(), etc). Objects allow us to organize scripts and update information more easily which is why JavaScript enables you to create your own.
Let's start off by creating our object:
function member(username, age, posts, rank)
{
this.username = username;
this.age = age;
this.posts = posts;
this.rank = rank;
}
Alright, so to create an object, we use a function. This object's parameters will work as it's properties. Each member will have a username, age, post count, and rank. Inside the function you will see "this.property = property." Why "this?" Because "this" will reference the currently called instance of the object (instead of all instances). So how do we create new instances of our object? Why, just as we do with others:
var aaron = new member("Aaron", 14, 100, "Pwnage");
We use "new." So, variable aaron holds an instance of the object with a username of "Aaron," an age of "14," a post count of "100," and a rank of "Pwnage." I'm sure you're now attempting to alert the object or something. =P You'll simply get [Object object]. You can't call a custom made object any different than a pre-existing one. You have to address it's properties:
alert(aaron.username);
As you can see, i've called the object instance and addressed it's username property. Now that we know how to create an object and address and set it's properties, let's get into methods:
function changeName(new_username)
{
this.username = new_username;
}
Our method works as a function acting upon the object. In use, "this" will address the member object and NOT the changeName() function. Now let us look within the function. "this.username = new_username" says that the instance of the member object's username is now the equivalent of "new_username."
Before we can use our method, we must address it within our object:
function member(username, age, posts, rank)
{
this.username = username;
this.age = age;
this.posts = posts;
this.rank = rank;
this.changeName = changeName;
}
Now that we've done so, we can use our changeName function as so:
aaron.changeName("Der Fleurer");
Now let's try alerting aaron's username again:
alert(aaron.username);
Instead of "Aaron," we will recieve the alert "Der Fleurer." =) A quick overview:
function member(username, age, posts, rank)
{
this.username = username;
this.age = age;
this.posts = posts;
this.rank = rank;
this.changeName = changeName;
}
function changeName(new_username)
{
this.username = new_username;
}
We created a function named "member." This function will work as our object. We've given it 4 properties: username, age, posts, and rank. Then we created another function which will work as our method. This function (when called) will change the username property of the current instance of object "member."
var aaron = new member("Aaron", 14, 100, "Pwnage");
Now that the core of the script is complete, we can call new instances. In the above line i've called a new instance and stored it in variable "aaron." This instance has a username property of "Aaron," an age property of "14," a posts property of "100," and a rank property of "Pwnage." Now let's mess around with the function and it's method a bit (just to get a feel for it):
function member(username, age, posts, rank)
{
this.username = username;
this.age = age;
this.posts = posts;
this.rank = rank;
this.changeName = changeName;
}
function changeName(new_username)
{
this.username = new_username;
}
var aaron = new member("Aaron", 14, 100, "Pwnage");
alert(aaron.username);
aaron.changeName("Der Fleurer");
alert(aaron.username);
Take this script for a test-drive. The first alert you'll recieve is "Aaron." The second being "Der Fleurer." This is because after the first alert, we use our changeName() function to adjust the current instance's username property. =)
Now try this script:
function member(username, age, posts, rank)
{
this.username = username;
this.age = age;
this.posts = posts;
this.rank = rank;
}
var aaron = new member("Aaron", 14, 100, "Pwnage");
alert(aaron.username);
aaron.username = "Der Fleurer";
alert(aaron.username);
=0 It does the exact same thing! And with half the length.
Changing properties in such a simple manner doesn't call need for methods. I was simply setting an example by creating one as I did. But don't worry, all is not lost! Methods still have their uses as they keep the code clean and allow for easy cut-and-paste when applying them to other scripts. Now let's create a more useful method. function mergeProperties(separator)
{
return this.username + separator + this.age + separator + this.posts + separator + this.rank;
}
When this function is inserted within our script we will be able to return a string of all the properties of the object:
function member(username, age, posts, rank)
{
this.username = username;
this.age = age;
this.posts = posts;
this.rank = rank;
this.changeName = changeName;
this.mergeProperties = mergeProperties;
}
function changeName(new_username)
{
this.username = new_username;
}
function mergeProperties(separator)
{
return this.username + separator + this.age + separator + this.posts + separator + this.rank;
}
var aaron = new member("Aaron", 14, 100, "Pwnage");
alert(aaron.mergeProperties(", "));
The first few parts you should already know. What I want you to focus on is the "return" operation. You know how some methods return a boolean and others a string? Or some the actual object, etc etc? Well, that's basically what "return" does. When the mergeProperties() function is called, it will "return" as a string. That string of course being a collection of the instance's properties.
Next example:
function changeName(new_username)
{
new_username;
}
alert(changeName("Bonjour"));
Ok, we created a changeName() function. Inside it we simply restate the variable. Now then, what will changeName("Bonjour") alert? It will alert "undefined" because no return value was specified. So why not make it return the string?
function changeName(new_username)
{
return "Input: " + new_username;
}
alert(changeName("Bonjour"));
Alright, when the function is called it says to return the string "Input: " + new_username. Since we declared new_username to be the string "Bonjour," the function will return "Input: Bonjour." Think of it this way, the changeName() function "becomes" a string.
Alright. Ready to make use of this handy little operation? Good! 'Cause this is 2 hours of my life i'm never gonna get back.
I figured to finish off the lesson we'd return the object itself each time the changeName() function or any of the other change functions are executed.
function member(username, age, posts, rank)
{
this.username = username;
this.age = age;
this.posts = posts;
this.rank = rank;
this.changeName = changeName;
this.changeAge = changeAge;
this.changePosts = changePosts;
this.changeRank = changeRank;
}
function changeName(new_username)
{
this.username = new_username;
return this;
}
function changeAge(new_age)
{
this.age = new_age;
return this;
}
function changePosts(new_posts)
{
this.posts = new_posts;
return this;
}
function changeRank(new_rank)
{
this.rank = new_rank;
return this;
}
var aaron = new member("Aaron", 14, 100, "Pwnage");
Ok. So we've added on three new functions. Each will change a certain property and then return the object instance they were applied to. This means each time we use one, we get back "aaron." So we can stack layer upon layer of methods:
aaron.changeName("Der Fleurer").changeAge(15).changePosts(120).changeRank("Major Pwnage");
Again, each time one of the change functions is executed, it returns the instance. So after changeName(blah) executes, it returns "aaron" meaning we can apply any of our methods AGAIN. Last example:
alert(aaron.changeName("Der Fleurer").username);
The above will change the username property of instance "aaron" to "Der Fleurer" and return that instance. Because the instance is returned, we can address any of it's methods and properties as if it were simply aaron.blah. The above will alert the username of the instance "aaron" AFTER it has been changed. =)