Hello guys!! morning to you all. I want to welcome you to my tutorial on JavaScript. In my last tutorial we talked about the step by step guide on how to use JavaScript to print the content of your web page ( JavaScript Page Printing ).
In this tutorial we are going to be discussing about JavaScript Object Overview, and i will advice that you pay full attention to this topic because it is more advanced than the previous topics we have been treating on JavaScript.
JavaScript is an Object Oriented Programming (OOP) language. A programming language can be called object-oriented if it provides four basic capabilities to developers -
In this tutorial we are going to be discussing about JavaScript Object Overview, and i will advice that you pay full attention to this topic because it is more advanced than the previous topics we have been treating on JavaScript.
JavaScript is an Object Oriented Programming (OOP) language. A programming language can be called object-oriented if it provides four basic capabilities to developers -
- Encapsulation - The capability to store related information, whether data or methods, together in an object.
- Aggregation - The capability to store one object inside another object.
- Inheritance - The capability of a class to rely upon another class (or number of classes) for some of its properties and methods.
- Polymorphism - The capability to write one function or method that works in a variety of different ways.
You can also read our tutorial post on: Steps on how to implement JavaScript Nested functions with examples
Objects are composed of attributes. If an attribute contains a function, it is considered to be a method of the object, otherwise the attribute is considered a property.
Object Properties
Object properties can be any of the three primitive data types, or any of the abstract data types, such as another object. Object properties are usually variables that are used internally in the object's methods, but can also be globally visible variables that are used throughout the page.
The syntax for adding a property to an object is -
The syntax for adding a property to an object is -
objectName.objectProperty = properyValue;
For example - The following code gets the document title using the "title" property of the document object.
var str = document.title;
Object Methods
Methods are the functions that let the object do something or let something be done to it. There is a small difference between a function and a method. A function is a standalone 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 complex mathematical operations on a group of local properties and parameters.
Methods are useful for everything from displaying the contents of the object to the screen to performing complex mathematical operations on a group of local properties and parameters.
Example
Following is a simple example to show how to use the write() method of document object to write any content on the document.
document.write("This is a test");
You can also read our tutorial post on: How to enable JavaScript
User-Defined Objects
All user-defined objects and built-in objects are descendants of an object called 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 below, the constructor methods are Object(), Array(), and Date(). This constructors are built-in JavaScript functions.
In the following example below, the constructor methods are Object(), Array(), and Date(). This constructors are built-in JavaScript functions.
var employee = new Object();
var books = new Array("Html" , "Css" , "JavaScript");
var day = new Date(" April 5, 1993");
var books = new Array("Html" , "Css" , "JavaScript");
var day = new Date(" April 5, 1993");
You can also read our tutorial post on: Learn how to implement JavaScript Function() constructor with examples
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.
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
You can try the following example below. It demonstrates how to create an object.
<html>
<head>
<title>User-defined objects</title>
<script type = "text/Javascript">
var book = new Object(); // Create the object
book.subject = "Java"; // Assign properties to the object
book.author = "Kennedy"
</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>
<head>
<title>User-defined objects</title>
<script type = "text/Javascript">
var book = new Object(); // Create the object
book.subject = "Java"; // Assign properties to the object
book.author = "Kennedy"
</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>
Output
Below is the output of the above example
Book name is : Java
Book author is : Kennedy
Book author is : Kennedy
Example 2
This example demonstrates how to create 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("Java" , "Kennedy");
document.write("Book name is : " + myBook.title + "<br />");
document.write("Book author is : " + myBook.author + "<br />");
</script>
</body>
</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("Java" , "Kennedy");
document.write("Book name is : " + myBook.title + "<br />");
document.write("Book author is : " + myBook.author + "<br />");
</script>
</body>
</html>
Output
Below is the output of the above example
Book name is : Java
Book author is : Kennedy
Book author is : Kennedy
You can also read our tutorial post on: Step by step tutorial guide which explains how to implement JavaScript void keyword with examples
Defining Methods for an Object
The previous example demonstrates how the constructor creates the object and assigns properties. But we need to complete the definition of an object by assigning methods to it.
Example
You can try the following example below. It demonstrates 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; // Assigns that method as property
}
</script>
</head>
<body>
<script type = "text/Javascript">
var myBook = new book("Java" , "Kennedy");
myBook.addPrice(300);
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>
<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; // Assigns that method as property
}
</script>
</head>
<body>
<script type = "text/Javascript">
var myBook = new book("Java" , "Kennedy");
myBook.addPrice(300);
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>
Output
Below is the output of the above example
Book title is : Java
Book author is : Kennedy
Book price is : 300
Book author is : Kennedy
Book price is : 300
You can also read our tutorial post on: JavaScript Operators
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 blocks that follows. The properties and methods for the object can be used without naming the object.
The object specified as an argument to with becomes the default object for the duration of the blocks that follows. The properties and methods for the object can be used without naming the object.
Syntax
The syntax of with object is as follows.
with ( object ) {
properties used without the object name and dot
}
properties used without the object name and dot
}
Example
Try the following example below.
<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; // Assigns that method as property
}
</script>
</head>
<body>
<script type = "text/Javascript">
var myBook = new book("Java" , "Kennedy");
myBook.addPrice(300);
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>
<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; // Assigns that method as property
}
</script>
</head>
<body>
<script type = "text/Javascript">
var myBook = new book("Java" , "Kennedy");
myBook.addPrice(300);
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>
Output
Below is the output of the above example
Book title is : Java
Book author is : Kennedy
Book price is : 300
Book author is : Kennedy
Book price is : 300
JavaScript Native Objects
JavaScript has several bult-in or native objects. These objects are accessible anywhere in your program and will work the same way in any browser running in any operating system.
Here is the list of all important JavaScript Native Objects -
Here is the list of all important JavaScript Native Objects -
- JavaScript Number Object
- JavaScript Boolean Object
- JavaScript String Object
- JavaScript Array Object
- JavaScript Date Object
- JavaScript Math Object
- JavaScript RegExp Object
Alright guys, we have come to the end of this tutorial on JavaScript Objects overview. In my upcoming tutorials, we will be looking into the above listed JavaScript Native Objects and we will be starting with JavaScript Number Object.
Always feel free to ask your questions via the comment box, they will be attended to as soon as possible. Don't forget to follow us on our various social media platforms to stay updated with our latest tutorials. Thanks for reading and bye for now.
Always feel free to ask your questions via the comment box, they will be attended to as soon as possible. Don't forget to follow us on our various social media platforms to stay updated with our latest tutorials. Thanks for reading and bye for now.