Saturday, November 25, 2006

Creating Objects Using Object Literal

This method offers a much more convenient way to create objects without first predefining a constructor function. This method could be viewed as one of JavaScript's strength because of how it makes the creation of object so easy.

The object literal is actually a list of property-value pairs enclosed in curly brackets and separated by colon.

The syntax look thus

var myvarobject = {'propert1':'value1','property2':'value2','propertyN':'valuen'};

To see this in action lets see how it is used in creating objects.
So if i want to create a monitor object with the following properties: make,screensize and color, i will write:

var mymonitor = {'make':'Dell','screensize':'19inches','color':'graphite'};
and i have my object created.
Once this is done, i could check to see if the object was successfully created.
Writing:
alert(mymonitor.make) should display 'Dell'. Other properties of the object can thus be accessed.

Saturday, November 11, 2006

Creating Objects in Javascript 1.0 using constructor function.

Javascript offers various methods of creating objects and this method I am going to share is just one of them. Javascript 1.0 has two methods: the object literal method and the function constructor method (which this post is about). Javascript 2.0 to also comes with its own method of making objects. The choice of which method to use depends on your personal preference and the JavaScript version most of your audience will be running…Having said that, lets get down to business

The constructor method


This method imitates the process of first defining a class and then afterwards instantiate an object. So the first thing we are going to do is to define the class. The syntax of creating a class is similar to what you have when defining a function. So let say we want to create a class called ‘webdevelopers’ you will then write

function webdevelopers()
{

}

Since a class is supposed to be a template that objects are created from; a list of the properties peculiar to that class must therefore be listed. To do that you write

function webdeveloper(identity,location,technologies,portfolio)
{
this.identity = identity;
this.location = location;
this.technologies = technologies;
this.portfolio = portfolio;
}


So the next thing to do is to create an object from this class. To illustrate let me use my friend who is a web developer as an example. Here are some of his characteristics;
• His name is Tim
• He stays in lagos
• Php is one of the technologies he uses
• Searchnigeria.info is part of his portfolio

So to model him as an object I will just write

var Tim = new webdeveloper(‘tim’ , ‘lagos’ , ‘php’, ‘searchnigeria.net’);

And so I have a ‘Tim’ object.

To see if the object is well created, try to access the listed properties. For example, including this:

alert(Tim.location);
Should result into an alert box with the message “lagos”

What about adding methods to your objects? That is also easy
i.e if I want a method that will write my name in an alert box, I will need to add the following code to the function that defines the webdevelopers class:

this.saymyname = function myfunction() {alert('dade');}

So whenever I call the method by writing ‘this.saymyname()’ the function ‘myfunction()’ will be executed and i will have my name shout at you from the alert box.