Scribd
Upload
7 views10 pages

Unit 10

JavaScript is an Object Oriented Programming language that supports encapsulation, aggregation, inheritance, and polymorphism. Objects in JavaScript are collections of properties and methods, which can be defined using object literals or constructor functions. The document explains how to create and manipulate objects, access their properties and methods, and use the 'with' keyword for shorthand referencing.

Uploaded by

Punit Pandey
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
7 views10 pages

Unit 10

JavaScript is an Object Oriented Programming language that supports encapsulation, aggregation, inheritance, and polymorphism. Objects in JavaScript are collections of properties and methods, which can be defined using object literals or constructor functions. The document explains how to create and manipulate objects, access their properties and methods, and use the 'with' keyword for shorthand referencing.

Uploaded by

Punit Pandey
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 10

JavaScript (JS)

BLOCK – 10
JavaScript – Obejct
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.
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.
Real Life Objects, Properties, and Methods
In real life, a car is an object. A car has properties like weight and color, and methods
like start and stop:

All cars have the same properties, but the property values differ from car to car.
All cars have the same methods, but the methods are performed at different times.

JavaScript Objects
You have already learned that JavaScript variables are containers for data values.
This code assigns a simple value (Fiat) to a variable named car:
<html>
<head>
<title>Function</title></head>
<body>
<p>Creating a JavaScript Variable.</p>
<p id="demo"></p>
<script>
var car = "Fiat";
document.getElementById("demo").innerHTML = car;
</script></body></html>
Wizard-Tech Computer Academy. A-1264 G.D Colony Mayur Vihar III Delhi-96. 1
JavaScript (JS)

Note: Objects are variables too. But objects can contain many values.
This code assigns many values (Fiat, 500, white) to a variable named car:
<html>
<head>
<title>object</title></head>
<body>
<p>Creating a JavaScript Object.</p>
<p id="demo"></p>
<script>
var car = {type:"Fiat", model:"500", color:"white"};
document.getElementById("demo").innerHTML = car.type;
</script>
</body>
</html>

Note: The values are written as name:value pairs (name and value separated by a
colon).

Object Properties
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 −
objectName.objectProperty = propertyValue;

For example − The following code gets the person details using the "firstName,
lastName, age, eyeColor"property of the person object.

Wizard-Tech Computer Academy. A-1264 G.D Colony Mayur Vihar III Delhi-96. 2
JavaScript (JS)
var person={firstName:"Vikash",lastName:"Kumar",age:35,eyeColor:"black"};

Property Property Value

firstName Vikash
lastName Kumar
age 35
eyeColor Black

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 – at 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 complex mathematical operations on a group of local properties and
parameters.
fullName function() {return this.firstName + " " + this.lastName;}

Object Definition
You define (and create) a JavaScript object with an object literal:
<html>
<head>
<title>object</title></head>
<body>
<p>Creating a JavaScript Object.</p>
<p id="demo"></p>
<script>
var person ={firstName:"Vikash",lastName:"Kumar",age:35,eyeColor:"black"};
document.getElementById("demo").innerHTML =
person.firstName + " is " + person.age + " years old.";
</script>
</body>
</html>

Wizard-Tech Computer Academy. A-1264 G.D Colony Mayur Vihar III Delhi-96. 3
JavaScript (JS)
Spaces and line breaks are not important. An object definition can span multiple lines:
var person = {
firstName:"John",
lastName:"Doe",
age:50,
eyeColor:"blue"
};

Accessing Object Properties


You can access object properties in two ways:
objectName.propertyName or objectName["propertyName"]

Example1
<html>
<head>
<title>object</title></head>
<body>
<p>There are two different ways to access an object property: </p>
<p>You can use person.property or person["property"].</p>
<p id="demo"></p>
<script>
var person = {
firstName: "Vikash",
lastName : "Kumar",
id : 5566
};
document.getElementById("demo").innerHTML = person.firstName + " " +
person.lastName;
</script>
</body>
</html>

Wizard-Tech Computer Academy. A-1264 G.D Colony Mayur Vihar III Delhi-96. 4
JavaScript (JS)
Example2
<html>
<head>
<title>object</title></head>
<body>
<p>There are two different ways to access an object property: </p>
<p>You can use person.property or person["property"].</p>
<p id="demo"></p>
<script>
var person = {
firstName: "Vikash",
lastName : "Kumar",
id : 5566
};
document.getElementById("demo").innerHTML =
person["firstName"] + " " + person["lastName"];
</script>
</body>
</html>

Accessing Object Methods


You access an object method with the following syntax:
objectName.methodName()

Example
<html>
<head>
<title>object</title></head>
<body>
<p>Creating and using an object method.</p><p>An object method is a
function definition, stored as a property value.</p>
<p id="demo"></p>

Wizard-Tech Computer Academy. A-1264 G.D Colony Mayur Vihar III Delhi-96. 5
JavaScript (JS)
<script>
var person = {
firstName: "Vikash",
lastName : "Kumar",
id : 5566,
fullName : function() {
return this.firstName + " " + this.lastName;
}
};
document.getElementById("demo").innerHTML = person.fullName();
</script></body>
</html>

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, the constructor methods are Object(), Array(), and Date().
These constructors are built-in JavaScript functions.
var employee = new Object();
var books = new Array("C++", "Net", "Java");
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.
Wizard-Tech Computer Academy. A-1264 G.D Colony Mayur Vihar III Delhi-96. 6
JavaScript (JS)
Example 1
Try the following example; 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 = "JavaScript"; // Assign properties to the object
book.author = "Wizard-Tech Team";
</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
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">
Wizard-Tech Computer Academy. A-1264 G.D Colony Mayur Vihar III Delhi-96. 7
JavaScript (JS)
var myBook = new book("JavaScript", "Wizard-Tech Team");
document.write("Book title is : " + myBook.title + "<br>");
document.write("Book author is : " + myBook.author + "<br>");
</script>
</body>
</html>

Defining Methods for an Object


The previous examples demonstrate 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
Try the following example; it shows how to add a function along with an object.
<html>
<head>
<title>Object</title></head>
<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("JavaScript", "Wizard-Tech");
myBook.addPrice(550);
Wizard-Tech Computer Academy. A-1264 G.D Colony Mayur Vihar III Delhi-96. 8
JavaScript (JS)

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
The syntax for with object is as follows −
with (object){
properties used without the object name and dot
}

Example
Try the following example.
<html>
<head>
<title>Object</title></head>
<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;

Wizard-Tech Computer Academy. A-1264 G.D Colony Mayur Vihar III Delhi-96. 9
JavaScript (JS)
}
}
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("JavaScript", "Wizard-Tech Team");
myBook.addPrice(550);
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>

Wizard-Tech Computer Academy. A-1264 G.D Colony Mayur Vihar III Delhi-96. 10

You might also like