Scribd
Upload
4 views

Unit 3_oops and Dom

The document provides an overview of Object Oriented Programming in JavaScript, detailing how to create objects using literals, constructors, and instances. It also covers predefined objects like Date, Number, String, Array, and Math, along with their methods. Additionally, the document explains event handling in JavaScript, including how to manage events related to images, links, and forms.

Uploaded by

Harsh Sharma
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
4 views

Unit 3_oops and Dom

The document provides an overview of Object Oriented Programming in JavaScript, detailing how to create objects using literals, constructors, and instances. It also covers predefined objects like Date, Number, String, Array, and Math, along with their methods. Additionally, the document explains event handling in JavaScript, including how to manage events related to images, links, and forms.

Uploaded by

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

Object Oriented Programming with JavaScript and Event Handling “DOM”

 Java script is an Object Based Language.


 Everything is an object in javaScript.
 JavaScript is an entity having state and behavior. For example : pen, Chair etc
 Java script is template based not class based. here we do not create a class but
directly create a objects.
There are 3 way to create object in Javascript
1. By object literal
2. By creating an instance of object directly (using new keyword)
3. By using an object constructor(using new keyword)

1. By object literal
An object literal is a list of name:value pairs inside curly braces {}.
Syntax: Object={property1:value, pro2:value,……}
Example:
<!DOCTYPE html>
<html>
<body>
<h1>Creating JavaScript Objects</h1>
<h2>Using an Object Literal</h2>

<p id="demo"></p>

<script>
// Create an Object:
const person = {firstName:"RAM", lastName:"Das", age:20, eyeColor:"black"};

// Display Data from the Object:


document.getElementById("demo").innerHTML =
person.firstName + " is " + person.age + " years old.";
</script>
</body>
</html>
2. By creating instance of directly(using new keyword)
Use a new keyword to create an object.
Syntax:
<!DOCTYPE html>
<html>
<body>
<h1>Creating JavaScript Objects</h1>

<p id="demo"></p>

<script>
// Create an Object:
let person= new Object()
person.fname=”RAM”;
person.age=20;

// Display Data from the Object:


document.getElementById("demo").innerHTML =
person.fname+ " is " + person.age + " years old.";
</script>
</body>
</html>
3. By using an object constructor
Need to create function with argument. Each argument value can be assigned in the
current object by using this keyword.
this-refer to current object
<!doctype html>
<html>
<head> <title> using an object constructor </title>
</head>
<body>
<script>
function emp(id,name,salary)
{
this.id=id;
this.name=name;
this.salary=salary;
}
e= new emp(1, “Ram”, 20000);
document.write(e.id+ “ “+ e.name+ “ “+ e.salary);
</script>
<body>
</html>

Predefined Object in JavaScript


1: Date object: The date object is a datatype built into javaScript
language. Date objects are created with the new keyword.
Syntax:
new Date();

Some method:

getDate()- return day of the month for the specified date according to local
time.

getDay()-return day of the week for the specified date according to local time.

getFullYear()-return the year of the specified date according to local time.

etc.

Example:

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Dates</h1>
<h2>Using new Date()</h2>
<p>Create a new date object with the current date and time:</p>

<p id="demo"></p>
<p id="demo1"></p>
<p id="demo2"></p>

<script>
const d = new Date();
document.getElementById("demo").innerHTML = d;
const d1 = new Date("October 13, 2014 11:13:00");
document.getElementById("demo1").innerHTML = d1;

const d2 = new Date("2021-03-25")


document.getElementById("demo2").innerHTML = d2.getFullYear();
</script>

</body>
</html>

2. Number Object:
The Number object represents numerical date, either integers or floating-
point numbers.
Syntax: let val=new Number(number);

3. String Object:
The string object is used to work with a series of characters.
Syntax: let val= new String(string);
There are 2 ways to create sting in javascript
1. By string literal
Syntax
let str= “string here”
2. By sting object (new keyword)
Syntax:
let str= new String(“string here”);
some methods are:
concat()- combine two text
slice()- Extract a section of a string
spit()- splits a string object into an array of string by separating the string
into substing.
toUpperCase()- converted into Upper case
toLowerCase()- convert Upper into lower case.
Example:
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Strings</h1>
<h2>The slice() Method</h2>
<p>The sliced (extracted) part of the string is:</p>
<p id="demo"></p>
<script>
let text = "Apple, Banana, Kiwi";
let part = text.slice(7,13);
document.getElementById("demo").innerHTML = part;
</script>

</body>
</html>
4. Array Object:
JavaScript array is an object that represents a collection of similar type of elements.
There are 3 ways to construct array in JavaScript

1. By array literal
2. By creating instance of Array directly (using new keyword)
3. By using an Array constructor (using new keyword)
1) JavaScript array literal

Syntax
var arrayname=[value1,value2.....valueN];

example:

<script>
var emp=["Sonoo","Vimal","Ratan"];
for (i=0;i<emp.length;i++){
document.write(emp[i] + "<br/>");
}
</script>
Test it Now
The .length property returns the length of an array.
2) JavaScript Array directly (new keyword)
The syntax of creating array directly is given below:
var arrayname=new Array();
Here, new keyword is used to create instance of array.
<script>
var i;
var emp = new Array();
emp[0] = "Arun";
emp[1] = "Varun";
emp[2] = "John";

for (i=0;i<emp.length;i++){
document.write(emp[i] + "<br>");
}
</script>
Tes
Output of the above example
Arun
Varun
John

3) JavaScript array constructor (new keyword)


Here, you need to create instance of array by passing arguments in constructor so
that we don't have to provide value explicitly.
The example of creating object by array constructor is given below.
<script>
var emp=new Array("Jai","Vijay","Smith");
for (i=0;i<emp.length;i++){
document.write(emp[i] + "<br>");
}
</script>
4. math Object
The Math object is static.
All methods and properties can be used without creating a Math object first.

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Math Constants</h2>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
"<p><b>Math.E:</b> " + Math.E + "</p>" +
"<p><b>Math.PI:</b> " + Math.PI + "</p>" +
"<p><b>Math.SQRT2:</b> " + Math.SQRT2 + "</p>" +
"<p><b>Math.SQRT1_2:</b> " + Math.SQRT1_2 + "</p>" +
"<p><b>Math.LN2:</b> " + Math.LN2 + "</p>" +
"<p><b>Math.LN10:</b> " + Math.LN10 + "</p>" +
"<p><b>Math.LOG2E:</b> " + Math.LOG2E + "</p>" +
"<p><b>Math.Log10E:</b> " + Math.LOG10E + "</p>";
</script>

</body>
</html>

Event Handling

JavaScript’s interaction with HTML elements is handled through events that occur when the
user or the browser manipulates a page. When the page loads, it is called an event.
Examples include events like pressing any key, closing window, or resizing a window.
Event handlers are the code that invokes a specific piece of code when a particular action
happens on an HTML elements.

Image, Event, and Form Object


Image Object

It embeds an image or video clip into the current document. The img tag allows the
insertion of .jpg, .png, .bmp abd .gif image files into HTML document. In many web
application, it is important to know whether a specific image has been loaded, or in the
process of loading or the loading process is interrupted. The image event handling provides
this capability.

Event Event Handling Description


Attribute
Load OnLoad This event handling occurs when an image is loaded
and displayed into the browser window.
Error OnError This image event occurs when an error occurs during
the loading process of an image.
Abort OnAbort This image event occurs when the user interrupts or
cancels the loading of an image.
KeyDown OnKeyDown This image event is occurred when the user presses
the down key of the keyboard.
<html>
<head>
</body>
<h1>Testing Image Event Handling</h1>
<img src="test.jpg" alt="test" onLoad='alert("image successfully loaded");'
onError='alert("Error in loading image");'/>
</body>
</html>
Event Objects
Event Event Handling Description
Attribute
Click OnClick This link event occurred when a user clicks the
link.
DblClick OnDblClick This link event occurred when a user double
clicks the link.
MouseDown OnMouseDown This link event occurred when a user presses the
mouse button over the link.
MouseUp OnMouseUp This link event occurred when a user releases the
pressed mouse button.
MouseOver OnMouseOver This link event occurs when the user moves the
mouse pointer over a link.
<html>
<head>
<script type="text/JavaScript">
function test(x)
{
alert(x);
}
</script>
</head>
<body>
<h1>Testing Link Event</h1>
<a href="https//:www.programmingdigest.com" onClick='test("you have clicked the
link");'</a >
</body>
</html>
Form Object

A form provides different GUI (Graphical User Interface) objects or elements that are used
to send and receive information to and from the webserver. These objects include buttons,
text boxes, checkboxes, radio buttons, etc. each object is associated with a number of
events.

Event Event Handling Description


Attribute
Submit OnSubmit This event occurs when a user clicks the submit button in
order to submit the form data to the form processor.
Reset OnReset This event handling is occurs when the user clicks the reset
button of the form.

<html>
<head>
</head>
<<body>
<h1>Testing Form Event Handling </h1>
<form onSubmit='alert("You are submitting data");'>
Enter your name: <input type="text" >
<input type="submit" value ="submit data">
</form>
<body>
</html>

You might also like