Wednesday 5 February 2014

Working with Objects


Objects are made of attributes. If an attribute contains a function,
then we considered it is a method of the object otherwise, the attribute is considered a property.

The syntax for adding a property to an object is:

objectName.objectProperty = propertyValue;
Example:

var str = document.title;

Object Methods:

The methods are functions that tell the object do something or let something
be done to it. There is little difference between a function and a method,
except that a function is a standalone unit of statements and a method is
attached to an object and can be referenced by the this keyword.

Methods are useful for everything from displaying the contents of the object
to the screen to performing any complex mathematical operations on properties and parameters.

Example:

document.write("This is test");

User-Defined Objects:

All user-defined objects and built-in objects are composed of an object.

The new Operator:

The new operator is used to create an instance of an object. To create an object,
the new operator is followed by the constructor method.

In the following example, we see the constructor methods are Object(), Array(), and Date().
These constructors are built-in JavaScript functions.

var employee = new Object();
var books = new Array("C", "Perl", "Javascript");
var day = new Date("August 15, 1947");

The Object() Constructor:

A constructor is a function that creates and initializes an object.
JavaScript provides a special constructor function called Object() to build
the object. The return value of the Object() constructor is assigned to a variable.

The variable contains a reference to the new object. The properties assigned
to the object are not variables and are not defined with the var keyword.

Example 1:
create an object:

<html>
<head>
<title>User-defined objects</title>
<script type="text/javascript">
var book = new Object();   // Creating the object
    book.subject = "Perl"; // Assign properties to the object
    book.author  = "Mohtashim";
</script>
</head>
<body>
<script type="text/javascript">
   document.write("Book name is : " + book.subject + "<br>");
   document.write("Book author is : " + book.author + "<br>");
</script>
</body>
</html>

Example 2:

Creating an object with a User-Defined Function.
Here this keyword is used to refer to the object that has been passed to a function:

<html>
<head>
<title>User-defined objects</title>
<script type="text/javascript">
function book(title, author){
    this.title = title;
    this.author  = author;
}
</script>
</head>
<body>
<script type="text/javascript">
   var myBook = new book("Perl", "Mohtashim");
   document.write("Book title is : " + myBook.title + "<br>");
   document.write("Book author is : " + myBook.author + "<br>");
</script>
</body>
</html>

Defining Methods for an Object:

Example:

Here is a simple example to show how to add a function along with an object:

<html>
<head>
<title>User-defined objects</title>
<script type="text/javascript">

// Define a function which will work as a method
function addPrice(amount){
    this.price = amount;
}

function book(title, author){
    this.title = title;
    this.author  = author;
    this.addPrice = addPrice; // Assign that method as property.
}

</script>
</head>
<body>
<script type="text/javascript">
   var myBook = new book("Perl", "c++");
   myBook.addPrice(100);
   document.write("Book title is : " + myBook.title + "<br>");
   document.write("Book author is : " + myBook.author + "<br>");
   document.write("Book price is : " + myBook.price + "<br>");
</script>
</body>
</html>

The with Keyword:

The with keyword is used as a kind of shorthand for referencing an
object's properties or methods.

The object specified as an argument to with becomes the default object
for the duration of the block that follows. The properties and methods
for the object can be used without naming the object.

Syntax:

with (object){
    properties used without the object name and dot
}
Example:

<html>
<head>
<title>User-defined objects</title>
<script type="text/javascript">

// Define a function which will work as a method
function addPrice(amount){
    with(this){
       price = amount;
    }
}
function book(title, author){
    this.title = title;
    this.author  = author;
    this.price = 0;
    this.addPrice = addPrice; // Assign that method as property.
}
</script>
</head>
<body>
<script type="text/javascript">
   var myBook = new book("Perl", "c++");
   myBook.addPrice(100);
   document.write("Book title is : " + myBook.title + "<br>");
   document.write("Book author is : " + myBook.author + "<br>");
   document.write("Book price is : " + myBook.price + "<br>");
</script>
</body>
</html>
Abhishek Sinha

No comments:

Post a Comment