Friday, August 31, 2012

JavaScript Objects Examples


Examples of using the built-in JavaScript objects.

String Object

More String object examples in our JavaScript reference.

Date Object

More Date object examples in our JavaScript reference.

Array Object

More Array object examples in our JavaScript reference.

Boolean Object

More Boolean object examples in our JavaScript reference.

Math Object

General

More Math object examples in our JavaScript reference.

JavaScript Examples


Basic JavaScript Examples


JavaScript Statements, Comments and Blocks


JavaScript Variables


JavaScript Conditional If ... Else


JavaScript Popup Boxes


JavaScript Functions


JavaScript Loops


JavaScript Events


JavaScript Error Handling


Advanced JavaScript Examples


Have You Learned JavaScript?


JavaScript Summary

This tutorial has taught you how to add JavaScript to your HTML pages, to make your web site more dynamic and interactive.

You have learned how to create responses to events, validate forms and how to make different scripts run in response to different scenarios.

You have also learned how to create and use objects, and how to use JavaScript's built-in objects.
For more information on JavaScript, please look at our JavaScript examples and our JavaScript reference.

Now You Know JavaScript, What's Next?

The next step is to learn about the HTML DOM, jQuery, and AJAX.
If you want to learn about server-side scripting, the next step is to learn ASP or PHP.

HTML DOM
The HTML DOM defines a standard way for accessing and manipulating HTML documents.
The HTML DOM is platform and language independent and can be used by any programming language like Java, JavaScript, and VBScript.

If you want to learn more about the DOM, please visit our HTML DOM tutorial.

jQuery
jQuery is a JavaScript Library.
jQuery greatly simplifies JavaScript programming.

If you want to learn more about jQuery, please visit our jQuery tutorial.

AJAX
AJAX = Asynchronous JavaScript and XML.
AJAX is not a new programming language, but a new way to use existing standards.
AJAX is about exchanging data with a server, and update parts of a web page - without reloading the whole page.

Examples of applications using AJAX: Google Maps, Gmail, Youtube, and Facebook tabs.
If you want to learn more about AJAX, please visit our AJAX tutorial.

ASP / PHP
While scripts in an HTML file are executed on the client (in the browser), scripts in an ASP/PHP file are executed on the server.

With ASP/PHP you can dynamically edit, change or add any content of a Web page, respond to data submitted from HTML forms, access any data or databases and return the results to a browser, customize a Web page to make it more useful for individual users.

Since ASP/PHP files are returned as plain HTML, they can be viewed in any browser.

If you want to learn more about ASP, please visit our ASP tutorial.
If you want to learn more about PHP, please visit our PHP tutorial.

JavaScript Create Your Own Objects


Objects are useful to organize information.

Try it Yourself - Examples


JavaScript Objects

Earlier in this tutorial we have seen that JavaScript has several built-in objects, like String, Date, Array, and more. In addition to these built-in objects, you can also create your own.

An object is just a special kind of data, with a collection of properties and methods.

Let's illustrate with an example: A person is an object. Properties are the values associated with the object. The persons' properties include name, height, weight, age, skin tone, eye color, etc. All persons have these properties, but the values of those properties will differ from person to person. Objects also have methods. Methods are the actions that can be performed on objects. The persons' methods could be eat(), sleep(), work(), play(), etc.

Properties

The syntax for accessing a property of an object is:

objName.propName

You can add properties to an object by simply giving it a value. Assume that the personObj already exists - you can give it properties named firstname, lastname, age, and eyecolor as follows:

personObj.firstname="John";
personObj.lastname="Doe";
personObj.age=30;
personObj.eyecolor="blue";

document.write(personObj.firstname);

The code above will generate the following output:
John

Methods

An object can also contain methods.

You can call a method with the following syntax:

objName.methodName()

Note: Parameters required for the method can be passed between the parentheses.
To call a method called sleep() for the personObj:
personObj.sleep();


Creating Your Own Objects

There are different ways to create a new object:

1. Create a direct instance of an object

The following code creates a new instance of an object, and adds four properties to it:

personObj=new Object();
personObj.firstname="John";
personObj.lastname="Doe";
personObj.age=50;
personObj.eyecolor="blue";
alternative syntax (using object literals):
personObj={firstname:"John",lastname:"Doe",age:50,eyecolor:"blue"};
Adding a method to the personObj is also simple. The following code adds a method called eat() to the personObj:
personObj.eat=eat;

2. Create an object constructor

Create a function that construct objects:

function person(firstname,lastname,age,eyecolor)
{
this.firstname=firstname;
this.lastname=lastname;
this.age=age;
this.eyecolor=eyecolor;
}

Inside the function you need to assign things to this.propertyName. The reason for all the "this" stuff is that you're going to have more than one person at a time (which person you're dealing with must be clear). That's what "this" is: the instance of the object at hand.

Once you have the object constructor, you can create new instances of the object, like this:

var myFather=new person("John","Doe",50,"blue");
var myMother=new person("Sally","Rally",48,"green");
You can also add some methods to the person object. This is also done inside the function:
function person(firstname,lastname,age,eyecolor)
{
this.firstname=firstname;
this.lastname=lastname;
this.age=age;
this.eyecolor=eyecolor;

this.newlastname=newlastname;
}

Note that methods are just functions attached to objects. Then we will have to write the newlastname() function:

function newlastname(new_lastname)
{
this.lastname=new_lastname;
}

The newlastname() function defines the person's new last name and assigns that to the person. 

JavaScript knows which person you're talking about by using "this.". So, now you can write: myMother.newlastname("Doe").