JavaScript Object 

Description

JavaScript is not a full-blown object oriented programming language, such as Java, but it is designed on a simple object-based model. An object is a construct with properties that contain JavaScript variables or other objects. An object also has functions associated with it that are known as the object's method. You can define your own object in addition to JavaScript core (such as array or math) and client side objects.

Objects and Properties

An object is a collection of properties. JavaScript object has properties associated with it. You can access the properties of an object in the following way :

objectName.propertyName

In javaScript both object name and property name are case sensitive. You can define a property by assigning it a value. Let assume that there is an object called student with three properties name, class, rollno. They have defined as follows :

student.name = "David Rayy"
student.class = "V"
student.rollno = 1

Properties and arrays in JavaScript are closely related, actually they are different interfaces to the same data structure. You can access the properties of the said student object as follows :

student.["name"] = "David Rayy"
student.["class"] = "V"
student.["rollno"] = 1

The type of the said array is known as associative array as each index element is also associated with a string value. In the following example, the object name and properties have passed as arguments in the show_obj_property function which displays the properties of the object student.

function show_obj_property(obj, obj_name)
{
  var output = ""  
 for (var i in obj)     
 result += obj_name + "." + i + " = " + obj[i] + "\n";
return output;
}

Result of the above function :

student.name = David Rayy
student.class = V
student.rollno = 1 

Please Google+, Like this tutorial on FaceBook, Tweet, save it as bookmark andsubscribe with our Feed. Have suggestions? comment using Disqus down this page. Thanks.

JavaScript : Creating new Objects

In JavaScript there are many ways to create objects. You can create an object using an object initializer or write a constructor function to define the object type and create an instance of the object with new operator.

Using Object Initializers

Using object initializers can also be referred to as creating objects with literal notation. JavaScript's "Object initializer" is consistent with the terminology used by C++.

Syntax

objectName = { property1 : value1,
property2 : value2,
...,
propertyN : valueN}

where

objectName : Name of the new object.

property_1, property_2, .....property_n : An identifier (either a name, a number, or a string literal).

value1, value2,..,valueN : An expression whose values are identified by property_1, property_2, .....property_n.

Example : Object initializers

The following codes create an object "student" with three properties name, sclass and rollno. 

var student = {
name : "David Rayy",
sclass : "VI",
rollno : 12
};

Using a Constructor function

Here is an another way to create an object.

First define the object type by writing a constructor function, then create an instance of the object with new.

To write a constructor function, we should maintain the following rules.

The constructor function name will be the object type name.

In the constructor function, "this" keyword is used to add members to the object.

The properties/methods have their values defined after an equal sign '='.

There will be no "return" statement in the constructor function.

Example of Constructor function

Here is an example of a constructor function :

function student(name, sclass, rollno)

{
this.name = name;
this.sclass = sclass
this.rollno = rollno;
}

The type of the above object is student with three properties name, sclass and rollno. The value of the object's depends on the parameters passed to the function.

Lets create an object called studentv as follows :

studentv = new student("John", "V", 10)

The above statement creates an object called studentv and assigns it the specified values for its properties. Therefore the value of studentv.name is the string "John", studentv.sclass is the string "V" and student.rollno is the integer 10. We can create any number of student objects by calls to new.

Indexing Object Properties

In case you have created an object and its properties by using object constructor, and initially defined an object property with an index, such as name[5] = "Sara Rayy", later you must refer it as name[5].

In case of objects generated by HTML (like form array) though, if the first tag of a form in a document is named as "w3resource"
it can be referred by any of the following - document.forms[0] or document.forms["w3resource"] or document.w3resource.

Please Google+, Like this tutorial on FaceBook, Tweet, save it as bookmark andsubscribe with our Feed. Have suggestions? comment using Disqus down this page. Thanks.

JavaScript : Defining Methods

Description

A method is a function associated with an object. It can be defined as we define a function.

Syntax

myObject.methodname = my_function

Where "myObject" is the name of an existing object.

"methodname" is the name of the method.

"my_function" is the name of the function.

You can define methods for an object type by including a method definition in the object constructor function. For example, you could define a function that would format and display the properties (i.e. name, class, rollno) of the previously-defined student object; for example,

function studentDetails()
{
document.write( "The name of the student is " + this.name + " Class : " + this.class + " Roll No.: " + this.rollno)
}

where document.write - writes the details of a student.

To make this function a method following code can be used :

this.studentDetails = studentDetails; to the object definition.

Therefore the full definition of student would now look like :

function student(name, class, rollno)
{
this.name = name
this.class = class
this.class = rollno
this.studentDetails = studentDetails
}

Example : Student Object

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>JavaScript object : Properties and Methods</title>
</head>
<body>
<h1 style="color: red">JavaScript object : Properties and Methods.</h1>
<hr />
<script type="text/javascript">
//This is done to make the following JavaScript code compatible to XHTML. <![CDATA[
function studentDetails()
{
document.write( "The name of the student is " + this.name + " Class : " + this.class + " Roll No.: " + this.rollno+ '<br />')
}
function student(name, class, rollno)
{
this.name = name
this.class = class
this.rollno = rollno
this.studentDetails = studentDetails
}
studentv = new student("John", "V", 10);
studentv.studentDetails();
studentvi = new student("David Rayy", "VI", 12);
studentvi.studentDetails();
//]]>
</script>
</body>
</html>

View the example of document object's anchor property in the browser

Supported Browser

Internet Explorer 7	Firefox 3.6	Google Chrome 7	Safari 5.0.1	Opera 10
Yes	Yes	Yes	Yes	Yes

Defining Properties for an Object Type

Using prototype property we can add a property to a previously defined object type. This property will be available in all objects of the specified type. The following code adds a property acyear (academic year) to all objects of type student and then give a value to the acyear property of the object studentv (see the previous example).

student.prototype.acyear = null
studentv.acyear = "2010-2011"

Deleting Objects

Using delete operator we can remove an object. See the following codes how to remove an object.

myobj= new Array(element1, element2)

delete myobj

Please Google+, Like this tutorial on FaceBook, Tweet, save it as bookmark andsubscribe with our Feed. Have suggestions? comment using Disqus down this page. Thanks.