Unit - 4

Rofel BBA and BCA College-Vapi
UNIT-4 JAVASCRIPT OBJECT

4.1:JavaScript Objects
A javaScript object is an entity having state and behavior (properties and method). For example: car, pen, bike, chair, glass,
keyboard, monitor etc.
JavaScript is an object-based language. Everything is an object in JavaScript.
JavaScript is template based not class based. Here, we don't create class to get the object. But, we direct create objects.
Creating Objects in JavaScript

There are 3 ways to create objects.
1. By object literal
2. By creating instance of Object directly (using new keyword)
3. By using an object constructor (using new keyword)
1) JavaScript Object by object literal

The syntax of creating object using object literal is given below:
object={property1:value1,property2:value2.....propertyN:valueN}
As you can see, property and value is separated by : (colon).
Let’s see the simple example of creating object in JavaScript.
<script>
emp={id:102,name:"Shyam Kumar",salary:40000}
document.write(emp.id+" "+emp.name+" "+emp.salary);
</script>
Output of the above example

102 Shyam Kumar 40000
Page 1
2) By creating instance of Object

The syntax of creating object directly is given below:
var objectname=new Object();
Here, new keyword is used to create object.
Let’s see the example of creating object directly.
<script>
var emp=new Object();
emp.id=101;
emp.name="Ravi Malik";
emp.salary=50000;
document.write(emp.id+" "+emp.name+" "+emp.salary);
</script>
101 Ravi 50000
3) By using an Object constructor

Here, you need to create function with arguments. Each argument value can be assigned in the current object by using this keyword.
The this keyword refers to the current object.
The example of creating object by object constructor is given below.
<script>
function emp(id,name,salary)
{
this.id=id;
this.name=name;
this.salary=salary;
}
e=new emp(103,"Vimal Jaiswal",30000);
document.write(e.id+" "+e.name+" "+e.salary);

</script>

103 Vimal Jaiswal 30000
Page 2
Defining method in JavaScript Object

We can define method in JavaScript object. But before defining method, we need to add property in the function with same
name as method.
The example of defining method in object is given below.
<script>
function emp(id,name,salary)
{
this.id=id;
this.name=name;
this.salary=salary;
this.changeSalary=changeSalary;
function changeSalary(otherSalary)
{
this.salary=otherSalary;
}
}
e=new emp(103,"Sonoo Jaiswal",30000);
document.write(e.id+" "+e.name+" "+e.salary);
e.changeSalary(45000);
document.write("<br>"+e.id+" "+e.name+" "+e.salary);
</script>

103 Sonoo Jaiswal 30000
103 Sonoo Jaiswal 45000
Page 3
4.2:Date Object
4.2.1:Date Constructure
Date Object
The Date object is used to work with dates and times.
Date objects are created with new Date().
There are four Constrcture of instantiating a date:
1. var d = new Date();

2. var d = new Date(milliseconds);
3. var d = new Date(dateString);
4. var d = new Date(year, month, day, hours, minutes, seconds, milliseconds);
1.Date():
<html>
<body>
<h2>JavaScript new Date()</h2>
<p id="demo"></p>
<script>
const d = new Date();
document.getElementById("demo").innerHTML = d;
</script>
</body>
</html>
2. Date(milliseconds):
<html>
<body>
<p>Using new Date(milliseconds), creates a new date object as January 1, 1970, 00:00:00 Universal Time (UTC) plus the
milliseconds:</p>
<p id="demo"></p>
Page 4
<script>
const d = new Date(890009);
</script>
</body>
</html>
3.Date(dateString):
<html>
<body>
<p>A Date object can be created with a specified date and time:</p>
<p id="demo"></p>
<script>
const d = new Date("October 13, 2014 11:13:00");
</script>
</body>
</html>
4.new Date(year, month, day, hours, minutes, seconds, milliseconds)

<html>
<body>
<p>Using new Date(7 numbers), creates a new date object with the specified date and time:</p>
<p id="demo"></p>
<script>
const d = new Date(2018, 11, 24, 10, 33, 30, 0);
</script>
</body>
</html>
Page 5
4.2.2:Date Methods
1.getDate():
Javascript date getDate() method returns the day of the month for the specified date according to
local time. The value returned by getDate() is an integer between 1 and 31.
e.g
<html>
<head>
<title>JavaScript getDate Method</title>
<script type = "text/javascript">
var dt = new Date("December 25, 1995 23:15:00");
document.write("getDate() : " + dt.getDate() );
</script>
</head>
</html>
Output:
25
2. getDay():
Javascript date getDay() method returns the day of the week for the specified date according to local
time. The value returned by getDay() is an integer corresponding to the day of the week: 0 for Sunday, 1
for Monday, 2 for Tuesday, and so on.
e.g
<html>
<head>
<title>JavaScript getDay Method</title>
Page 6
document.write("getDay() : " + dt.getDay() );
</script>
</head>
</html>
Output:
3. getMonth():
Javascript date getMonth() method returns the month in the specified date according to local time. The
value returned by getMonth() is an integer between 0 and 11. 0 corresponds to January, 1 to February,
and so on.
e.g
<html>
<head>
document.write("getMonth() : " + dt.getMonth() );
</script>
</head>
</html>
Output:
11
Page 7
4. getHours() :
Javascript Date getHours() method returns the hour in the specified date according to local time. The
value returned by getHours() is an integer between 0 and 23.
e.g
<html>
<head>
document.write("getHours() : " + dt.getHours() );
</script>
</head>
</html>
Output:
23
5.setDate():
Javascript date setDate() method sets the day of the month for a specified date according to local time.
E.g
<html>
<head>
<title>JavaScript setDate Method</title>
Page 8
var dt = new Date( "Aug 28, 2008 23:30:00" );
dt.setDate( 24 );
document.write( dt );
</script>
</head>
</html>
Output:
Sun Aug 24 2008 23:30:00 GMT+0530 (India Standard Time)
6. setMonth() :
Javascript date setMonth() method sets the month for a specified date according to local time.
E.g
<html>
<head>
<title>JavaScript setMonth Method</title>
var dt = new Date( "Aug 28, 2008 23:30:00" );
dt.setMonth( 2 );
document.write( dt );
</script>
</head>
</html>
Output:
Sun Mar 24 2008 23:30:00 GMT+0530 (India Standard Time)
Page 9
7.setDay():
The JavaScript date setDay() method sets the particular day of the week on the basis of local time.
<html>
<Head>
<script>
var date =new Date("May 11, 2019 21:00:10");
document.writeln(date.getDate() + "<br>");
date.setDate(23);
document.writeln(date.getDate());
</script>
</head>
</html>
Output:
11
23
8.toString():
This method returns a string representing the specified Date object.

e.g
<html>
<head>
<title>JavaScript toString Method</title>
var dateobject = new Date(1993, 6, 28, 14, 39, 7);
stringobj = dateobject.toString();
document.write( "String Object : " + stringobj );
</script>
</head>
</html>
Output:
String Object : Wed Jul 28 1993 14:39:07 GMT+0530 (India Standard Time)
Page 10
4.3.1:Document Object Model

The document object represents the whole html document.
When html document is loaded in the browser, it becomes a document object. It is the root element that
represents the html document. It has properties and methods. By the help of document object, we can
add dynamic content to our web page.
According to W3C - "The W3C Document Object Model (DOM) is a platform and language-neutral interface
that allows programs and scripts to dynamically access and update the content, structure, and style of a
document."
4.3.2:Properties of document object
Page 11
4.3.3:Methods of document object

We can access and change the contents of document by its methods.
The important methods of document object are as follows:
Method Description
write("string") writes the given string on the doucment.
writeln("string") writes the given string on the doucment with newline

character at the end.
getElementById() returns the element having the given id value.
getElementsByName() returns all the elements having the given name value.
Page 12
Accessing field value by document object

In this example, we are going to get the value of input text by user. Here, we are
using document.form1.name.value to get the value of name field.
Here, document is the root element that represents the html document.
form1 is the name of the form.
name is the attribute name of the input text.
value is the property, that returns the value of the input text.
Let's see the simple example of document object that prints name with welcome message.
<script type="text/javascript">
function printvalue()
{
var name=document.form1.name.value;
document.write("Welcome: "+name);
document.writeln("Welcome: "+name);
}
</script>
<form name="form1">
Enter Name:<input type="text" name="name"/>
<input type="button" onclick="printvalue()" value="print name"/>
</form>
document.getElementById() method
The document.getElementById() method returns the element of specified id.
In the previous page, we have used document.form1.name.value to get the value of the input value.
Instead of this, we can use document.getElementById() method to get value of the input text. But we need
to define id for the input field.
Let's see the simple example of document.getElementById() method that prints cube of the given
number.
Page 13
function getcube(){
var number=document.getElementById("number").value;
alert(number*number*number);
}
</script>
<form>
Enter No:<input type="text" id="number" name="number"/><br/>
<input type="button" value="cube" onclick="getcube()"/>
</form>
document.getElementsByName() method
The document.getElementsByName() method returns all the element of specified name.
function totalelements()
{
var allgenders=document.getElementsByName("gender");
alert("Total Genders:"+allgenders.length);
}
</script>
<form>
Male:<input type="radio" name="gender" value="male">
Female:<input type="radio" name="gender" value="female">
<input type="button" onclick="totalelements()" value="Total Genders">

</form>
Page 14
Page 15

Unit - 4

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Unit - 4

Uploaded by

Copyright:

Available Formats

Rofel BBA and BCA College-Vapi

UNIT-4 JAVASCRIPT OBJECT

JavaScript is an object-based language. Everything is an object in JavaScript.

Creating Objects in JavaScript

1) JavaScript Object by object literal

As you can see, property and value is separated by : (colon).

Let’s see the simple example of creating object in JavaScript.

Output of the above example

2) By creating instance of Object

var objectname=new Object();

Here, new keyword is used to create object.

Let’s see the example of creating object directly.

Output of the above example

101 Ravi 50000

3) By using an Object constructor

The this keyword refers to the current object.

The example of creating object by object constructor is given below.

document.write(e.id+" "+e.name+" "+e.salary);

Output of the above example

Defining method in JavaScript Object

The example of defining method in object is given below.

Output of the above example

103 Sonoo Jaiswal 45000

Date objects are created with new Date().

There are four Constrcture of instantiating a date:

1. var d = new Date();

<h2>JavaScript new Date()</h2>

const d = new Date();

<h2>JavaScript new Date()</h2>

const d = new Date(890009);

<h2>JavaScript new Date()</h2>

const d = new Date("October 13, 2014 11:13:00");

4.new Date(year, month, day, hours, minutes, seconds, milliseconds)

<h2>JavaScript new Date()</h2>

const d = new Date(2018, 11, 24, 10, 33, 30, 0);

<title>JavaScript getDate Method</title>

<script type = "text/javascript">

var dt = new Date("December 25, 1995 23:15:00");

document.write("getDate() : " + dt.getDate() );

<title>JavaScript getDay Method</title>

<script type = "text/javascript">

var dt = new Date("December 25, 1995 23:15:00");

document.write("getDay() : " + dt.getDay() );

<title>JavaScript getDay Method</title>

<script type = "text/javascript">

var dt = new Date("December 25, 1995 23:15:00");

document.write("getMonth() : " + dt.getMonth() );

<title>JavaScript getDay Method</title>

<script type = "text/javascript">

var dt = new Date("December 25, 1995 23:15:00");

document.write("getHours() : " + dt.getHours() );

<title>JavaScript setDate Method</title>

<script type = "text/javascript">

var dt = new Date( "Aug 28, 2008 23:30:00" );

Sun Aug 24 2008 23:30:00 GMT+0530 (India Standard Time)

<title>JavaScript setMonth Method</title>

<script type = "text/javascript">

var dt = new Date( "Aug 28, 2008 23:30:00" );

Sun Mar 24 2008 23:30:00 GMT+0530 (India Standard Time)

This method returns a string representing the specified Date object.

4.3.1:Document Object Model

4.3.2:Properties of document object