Difference between revisions of "JavaScript Object Basics"

From Techotopia
Jump to: navigation, search
m (Text replacement - "<table border="0" cellspacing="0"> " to "<table border="0" cellspacing="0" width="100%">")
 
(14 intermediate revisions by the same user not shown)
Line 1: Line 1:
<table border="0" cellspacing="0" width="100%">
+
<table border="0" cellspacing="0" width="100%"><tr>
<tr>
+
 
<td width="20%">[[Understanding JavaScript Functions|Previous]]<td align="center">[[JavaScript Essentials|Table of Contents]]<td width="20%" align="right">[[JavaScript String Object|Next]]</td>
 
<td width="20%">[[Understanding JavaScript Functions|Previous]]<td align="center">[[JavaScript Essentials|Table of Contents]]<td width="20%" align="right">[[JavaScript String Object|Next]]</td>
 
<tr>
 
<tr>
Line 6: Line 5:
 
</table>
 
</table>
 
<hr>
 
<hr>
 +
 +
 +
<htmlet>jscript</htmlet>
 +
  
 
This chapter is intended to provide an overview of working with objects in JavaScript.
 
This chapter is intended to provide an overview of working with objects in JavaScript.
  
 
== An Overview of JavaScript Objects ==
 
== An Overview of JavaScript Objects ==
 
+
<htmlet>adsdaqbox_flow</htmlet>
 
JavaScript Objects represent self contained entities consisting of variables (called ''properties'' in object terminology) and functions (called ''methods'') that can be used to perform tasks and store complex data. JavaScript objects fall into three categories: Built-in Objects, Custom Objects and Document Object Model (DOM) Objects.
 
JavaScript Objects represent self contained entities consisting of variables (called ''properties'' in object terminology) and functions (called ''methods'') that can be used to perform tasks and store complex data. JavaScript objects fall into three categories: Built-in Objects, Custom Objects and Document Object Model (DOM) Objects.
  
 
Built-in objects are objects that are provided with JavaScript to make your life as a JavaScript developer easier. In many of the examples given in this book we have used the document.write() mechanism to write text to the current web page. Whether you knew it or not, you have been using the write() method of the JavaScript built-in document ''object'' when you have run these scripts.
 
Built-in objects are objects that are provided with JavaScript to make your life as a JavaScript developer easier. In many of the examples given in this book we have used the document.write() mechanism to write text to the current web page. Whether you knew it or not, you have been using the write() method of the JavaScript built-in document ''object'' when you have run these scripts.
  
Document Object Model (DOM) Objects provide the foundation for creating dynamic web pages. The DOM provides the ability for a JavaScript script to access, manipulate, and extend the content of a web page dynamically (i.e without having to reload the page). The DOM essentially presents the web page as a tree hierarchy of objects representing the contents and elements of the web page. These objects, in turn, contain ''properties'' and ''methods'' which allow you to access and change parts of the web page.
+
Document Object Model (DOM) Objects provide the foundation for creating dynamic web pages. The DOM provides the ability for a JavaScript script to access, manipulate, and extend the content of a web page dynamically (i.e. without having to reload the page). The DOM essentially presents the web page as a tree hierarchy of objects representing the contents and elements of the web page. These objects, in turn, contain ''properties'' and ''methods'' that allow you to access and change parts of the web page.
  
Custom objects are objects that you, as a JavaScript developer, create and use. Creating a custom object is possibly the best way to fully understand what objects are, so in this chapter we will by looking at how to create custom objects before covering the Built-in and DOM Objects in later chapters.
+
Custom objects are objects that you, as a JavaScript developer, create and use. Creating a custom object is possibly the best way to fully understand what objects are, so in this chapter we will be looking at how to create custom objects before covering the Built-in and DOM Objects in later chapters.
  
 
== Creating a Custom JavaScript Object ==
 
== Creating a Custom JavaScript Object ==
Line 38: Line 41:
 
== Creating and Using Object Instances ==
 
== Creating and Using Object Instances ==
  
In the previous section we learned how to create an object definition. It is important to note that, at this point, we have only described what the object will do (we have bascically created blueprint of the object), we have not actually created an object we can work with (this is known as an ''object instance''). Object instances are created using the ''new'' keywrod and are assigned to an object variable that will be used to reference the object. For example, in  the following example we will create a new instance of the car object with the name myCar:
+
In the previous section we learned how to create an object definition. It is important to note that, at this point, we have only described what the object will do (we have basically created blueprint of the object), we have not actually created an object we can work with (this is known as an ''object instance''). Object instances are created using the ''new'' keyword and are assigned to an object variable that will be used to reference the object. For example, in  the following script we will create a new instance of the car object with the name myCar:
  
 
<pre>
 
<pre>
Line 46: Line 49:
 
We have also passed through parameters to initialize the properties of the object (make, model and color).
 
We have also passed through parameters to initialize the properties of the object (make, model and color).
  
Next we need to understand how to call a method on an object and access an object property. This is achieved by using what is called dot notation on the name of the object instance:
+
Next we need to understand how to call a method on an object and access an object property. This is achieved by using what is called ''dot notation'' on the name of the object instance:
  
 
To access a property:
 
To access a property:
Line 84: Line 87:
 
</pre>
 
</pre>
  
Lets now bring all of this together in a complete example within an HTML page:
+
Let's now bring all of this together in a complete example within an HTML page:
  
 
<pre>
 
<pre>
Line 124: Line 127:
 
<tt>objectType.prototype.propertyName</tt>
 
<tt>objectType.prototype.propertyName</tt>
  
Following this syntax we could add a ''year'' property to an our ''car'' class and initialize it to the year '2001' using the following:
+
Following this syntax we could add a ''year'' property to our ''car'' class and initialize it to the year '2001' using the following:
  
 
<pre>
 
<pre>
Line 131: Line 134:
  
 
When we now create an instance of the object it will contain this new property which can be read and manipulated in the same way as all the other properties in this class.
 
When we now create an instance of the object it will contain this new property which can be read and manipulated in the same way as all the other properties in this class.
 
This chapter provided the essential information to get started using objects in JavaScript. In the following chapters we will explore the built-in objects provided with JavaScript.
 
  
 
== Summary ==
 
== Summary ==
Line 139: Line 140:
  
  
 +
<htmlet>jscript</htmlet>
 +
 +
 +
 +
<htmlet>ezoicbottom</htmlet>
 
<hr>
 
<hr>
<table border="0" cellspacing="0" width="100%">
+
<table border="0" cellspacing="0" width="100%"><tr>
<tr>
+
 
<td width="20%">[[Understanding JavaScript Functions|Previous]]<td align="center">[[JavaScript Essentials|Table of Contents]]<td width="20%" align="right">[[JavaScript String Object|Next]]</td>
 
<td width="20%">[[Understanding JavaScript Functions|Previous]]<td align="center">[[JavaScript Essentials|Table of Contents]]<td width="20%" align="right">[[JavaScript String Object|Next]]</td>
 
<tr>
 
<tr>

Latest revision as of 20:13, 27 October 2016

PreviousTable of ContentsNext
Understanding JavaScript FunctionsJavaScript String Object


Purchase and download the full PDF version of this JavaScript eBook for only $8.99


This chapter is intended to provide an overview of working with objects in JavaScript.


Contents


An Overview of JavaScript Objects

JavaScript Objects represent self contained entities consisting of variables (called properties in object terminology) and functions (called methods) that can be used to perform tasks and store complex data. JavaScript objects fall into three categories: Built-in Objects, Custom Objects and Document Object Model (DOM) Objects.

Built-in objects are objects that are provided with JavaScript to make your life as a JavaScript developer easier. In many of the examples given in this book we have used the document.write() mechanism to write text to the current web page. Whether you knew it or not, you have been using the write() method of the JavaScript built-in document object when you have run these scripts.

Document Object Model (DOM) Objects provide the foundation for creating dynamic web pages. The DOM provides the ability for a JavaScript script to access, manipulate, and extend the content of a web page dynamically (i.e. without having to reload the page). The DOM essentially presents the web page as a tree hierarchy of objects representing the contents and elements of the web page. These objects, in turn, contain properties and methods that allow you to access and change parts of the web page.

Custom objects are objects that you, as a JavaScript developer, create and use. Creating a custom object is possibly the best way to fully understand what objects are, so in this chapter we will be looking at how to create custom objects before covering the Built-in and DOM Objects in later chapters.

Creating a Custom JavaScript Object

Creating a custom JavaScript object is quite similar to constructing a function. The syntax is as follows:

function object(''parameter1, parameter2, parameter3,...'')
{
     this.property1 = parameter1;
     this.property2 = parameter2;
     this.property3 = parameter3;
     this.method1 = function1;
     this.method2 = function2;
     this.method3 = function3;
}

In the above outline object refers to the name of the object - this can be any valid (and hopefully descriptive) name you choose to use. The parameters define the values that you will pass into the object when you instantiate it later. Each of these parameters is subsequently assigned to the corresponding internal properties of the object (the this keyword references the current object). The functions represent the methods of the object and are declared the same way as any other functions and reside outside the object definition.


Creating and Using Object Instances

In the previous section we learned how to create an object definition. It is important to note that, at this point, we have only described what the object will do (we have basically created blueprint of the object), we have not actually created an object we can work with (this is known as an object instance). Object instances are created using the new keyword and are assigned to an object variable that will be used to reference the object. For example, in the following script we will create a new instance of the car object with the name myCar:

carObject = new car ("Ford", "Focus", "Red");

We have also passed through parameters to initialize the properties of the object (make, model and color).

Next we need to understand how to call a method on an object and access an object property. This is achieved by using what is called dot notation on the name of the object instance:

To access a property:

objectInstance.propertyName

To call a method of an object:

objectInstance.methodName()

In our example we have a method called displayCar() to display the 3 properties of the object. Following the above dot notation syntax we can call this method as follows:

carObject.displayCar()

We can also access a property, for example the color as follows:

document.write ("The make property of myCar is " + myCar.make );

Finally, we can also change one of the properties of an object instance:

myCar.make = "BMW";

Let's now bring all of this together in a complete example within an HTML page:

<html>
<head>
<title>A Simple JavaScript Function Example</title>
<script language="JavaScript" type="text/javascript">

function car (make, model, color)
{
  this.make = make;
  this.model = model;
  this.color = color
  this.displayCar = displayCar;
}
function displayCar()
{
     document.writeln("Make = " + this.make)
}
</script>

</head>

<script language="JavaScript" type="text/javascript">
myCar = new car ("Ford", "Focus", "Red");
myCar.displayCar();
myCar.make = "BMW";
myCar.displayCar();
</script>

</body>
</html>

Extending Objects

JavaScript object instances are extremely flexible in that they can easily be extended. To extend an object that you have already created use object prototypes. The syntax for prototyping is as follows:

objectType.prototype.propertyName

Following this syntax we could add a year property to our car class and initialize it to the year '2001' using the following:

car.prototype.year = "2001";

When we now create an instance of the object it will contain this new property which can be read and manipulated in the same way as all the other properties in this class.

Summary

This chapter has covered the basics of working with objects in JavaScript. The next chapter will focus on the JavaScript String object.


Purchase and download the full PDF version of this JavaScript eBook for only $8.99



PreviousTable of ContentsNext
Understanding JavaScript FunctionsJavaScript String Object