Scribd
Upload
5 views

Index 14 Js Objects and Classes

The document provides an overview of JavaScript objects and object-oriented programming concepts, including abstraction, inheritance, encapsulation, and polymorphism. It explains how to create objects using object literals, instances, and constructors, along with examples of array, string, math, and date objects. Additionally, it demonstrates accessing object properties and methods through practical code snippets.

Uploaded by

prayogkhadka09
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
5 views

Index 14 Js Objects and Classes

The document provides an overview of JavaScript objects and object-oriented programming concepts, including abstraction, inheritance, encapsulation, and polymorphism. It explains how to create objects using object literals, instances, and constructors, along with examples of array, string, math, and date objects. Additionally, it demonstrates accessing object properties and methods through practical code snippets.

Uploaded by

prayogkhadka09
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 14

INDEX 20

Javascript objects

Javascript is an object oriented programming language.OOP provides four basic capabilities;


Abstraction, Inheritance, Encapsulation and Polymorphism.
IN OOP, an object is defined as people, person,thing etc that exists in the real world.
Every object has 2 fundamental characteristics;
a) The collection of properties
b) Set of behaviors

For example: car is an object;


Which has properties like make,model, year,color,plate_number etc.
Set of behaviors are start(), run(), stop(), break() , turn() reverse() etc.

A class is defined as the collection of similar types of objects .Therefore also known as blueprint or
template whereas an object is the instance of a class.

In javascript, users can define their own set of objects also known as user-defined objects.

How to write javascript program using object Based programming

There are 3 ways to create an object in javascript.


1. By object literal
2. By creating instance of an object ( using new keyword)
3. By using an object constructor

1. By object literal

An object literal is a comma separated list of paired values enclosed in curly braces.
The syntax for creating object literal is
Var object={
property1:value1,
property2:value2…………propertyN:valueN
};

Example Program:

<html>
<head>
<title>js object literal</title>
<h1>Compiled by Er.Gaurab Mishra</h1>
</head>
<body>
<script type="text/javascript">
var car={
make:'Toyota',
model:'RAV4',
year:2022,
number:"NEPAL-2345"
};
document.write(car.make + " " + car.model + " " + car.year +" " + car.number)
</script>
</body>
</html>

Accessing javascript object properties and methods

<html>
<head>
<title>Access js object properties and methods</title>
<h1>Compiled by Er.Gaurab Mishra</h1>
</head>
<body>
<script type="text/javascript">
var car={
make:'Toyota',
model:'RAV4',
year:2022,
number:"NEPAL-2345",
display:function(){
return this.make +" " + this.model + " " + this.year +" " + this.number;
}
};
document.write(car.display());
</script>
</body>
</html>

2. By creating an instance of an object ( using new keyword)

Instance refers to the copy of the object.

The syntax for creating an object directly is given below:


Var objectname=new Object();
Here a new keyword is used to create a new object and assigns that property to the created
object’s name.

Example Program:

<html>
<head>
<title>By creating instance of an object</title>
<h1>Compiled by Er.Gaurab Mishra</h1>
</head>
<body>
<script type="text/javascript">
var car=new Object();
car.make='Toyota';
car.model='RAV4';
car.year=2022;
car.number="NEPAL-2345";
document.write(car.make + " " + car.model
+ " " + car.year +" " + car.number)
</script>
</body>
</html>

3. By using an object constructor


It creates an object wrapper for given values.
The function name is the same name as we have created for the object using ‘new’.It means use
the object as a function.
The this keyword refers to the current object.

Syntax:
Var object1=new functionname(value1,value2….);
Here object1 is an object created with a new keyword and function name is the function used by
the programmer.
We will be using the same name for the function as created with the new keyword.That will be
called as object constructor function.

Example Program:

<html>
<head>
<title>By using an object constructor</title>
<h1>Compiled by Er.Gaurab Mishra</h1>
</head>
<body>
<script type="text/javascript">
function emp()//emp is an object constructor function
{
this.id=12;
this.name='sameer';
this.age=27;
}
var e=new emp();//object created with new
document.write(e.id + " " + e.name
+ " " + e.age)

</script>
</body>
</html>

Function() constructor

IN oop, a constructor is a special type of function which helps to create an object.It creates a new
object with some initial values for respective member variables.

The keywords new Function() are used to define a new constructor

The normal user-defined function is defined by using the keyword function whereas the
constructor is defined using new Function()

Syntax:

var variable_name=new Function(arg1,arg2,.......,”Function Body”);

Example program

<html>
<head>
<title>js function constructor</title>
<h1>Compiled by Er.Gaurab Mishra</h1>
</head>
<body>
<script type="text/javascript">
var area=new Function("l","b","return l*b");
function display()
{
var result;
result=area(10,20);
document.write(result);
}
</script>
<button type="button" onclick="display()">Click me</button>
</body>
</html>

Array objects

An array can also be defined as an object in js.An array is the collection of similar types of data treated
as a single unit.
Each of the items of the array can be accessed using array index which starts from 0 and ends with
arraysize-1, where size defines the length of an array.

An array is also defined by using the keyword new Array().


Syntax:
var array_name=new Array();

Example program:

<html>
<head>
<title>js array objects</title>
<h1>Compiled by Er.Gaurab Mishra</h1>
</head>
<body>
<script type="text/javascript">
var cars=new Array(5);
cars=['maruti','toyota','bmw','szk','abc'];
document.write(cars);//displays all
document.write("<br>");
document.write(cars.pop() + "<br>");
document.write(cars + "<br>");
document.write(cars.push('xyz') + "<br>");
document.write(cars.reverse() + "<br>");
document.write(cars.sort() + "<br>");
</script>
</body>
</html>
String objects
A string is defined as an array of characters .String automatically inserts a null character ‘\0’ at the end
of the string.
Syntax:
var string_name=new String(string);

Example program

<html>
<head>
<title>js string objects</title>
<h1>Compiled by Er.Gaurab Mishra</h1>
</head>
<body>
<script type="text/javascript">
var str=new String("Hello");
document.write(str.length + "<br>");
document.write(str.toLowerCase() + "<br>");
document.write(str.toUpperCase() + "<br>");
document.write(str.charAt(2) + "<br>");
</script>
</body>
</html>

Math objects

The math object allows you to perform mathematical tasks. The Math object includes several
mathematical constants and methods.

Example Program

<html>
<head>
<title>js Math objects</title>
<h1>Compiled by Er.Gaurab Mishra</h1>
</head>
<body>
<script type="text/javascript">
var pi_value=Math.PI;
var sqrt=Math.sqrt(16);
var round_value=Math.round(2.6);
var random_value=Math.random();
var floor_value=Math.floor(4.7);
var ceil_value=Math.ceil(2.3);
var max_value=Math.max(2,3,6,7,9);
var min_value=Math.min(56,89,4,7,8,2);
document.write(pi_value+"<br>");
document.write(sqrt+"<br>");
document.write(round_value+"<br>");
document.write(random_value+"<br>");
document.write(floor_value+"<br>");
document.write(ceil_value+"<br>");
document.write(max_value+"<br>");
document.write(min_value+"<br>");
</script>
</body>
</html>

Date Objects

The date object is used to work with date and times.

The Date object is used to work with dates and times.

You create an instance of the Date object with the "new" keyword.

To store the current date in a variable called "my_date":

var my_date=new Date()


Example Program

<html>
<head>
<title>js Date objects</title>
<h1>Compiled by Er.Gaurab Mishra</h1>
</head>
<body>
<script type="text/javascript">
var my_date=new Date();
document.write(my_date + "<br>");
//returns the day of the month(1-31)
document.write(my_date.getDate()+"<br>");
//returns the day of the week(0-6)
document.write(my_date.getDay()+"<br>");
//returns the year(4 digits)
document.write(my_date.getFullYear()+"<br>");
//returns the month ( 0-11)
document.write(my_date.getMonth()+"<br>");
//Returns the hour (0-23)
document.write(my_date.getHours()+"<br>");
//returns milliseconds(0-999)
document.write(my_date.getMilliseconds()+"<br>");
//returns minutes ( 0-59)
document.write(my_date.getMinutes()+"<br>");
//returns seconds (0-59)
document.write(my_date.getSeconds()+"<br>");
</script>
</body>
</html>

You might also like