Scribd
Upload
30 views25 pages

4 JS Events EH (Unit 3)

Uploaded by

shwetank7744
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
30 views25 pages

4 JS Events EH (Unit 3)

Uploaded by

shwetank7744
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/ 25

WEB TECHNOLOGY

KCS-602

by

Dr. Seema Maitrey


M.Tech(CE), Ph.D(CSE)
Department of Computer Science & Engineering
Contents
❑ Objects

❑ Document Object

❑ Array Object

❑ Date Object

❑ Math Object

❑ Number Object

❑ Browser Object Model(BOM)


JS OBJECTS
• It is an entity having state and behavior (properties and method). For example: book, pen etc.
• JavaScript is an object-based language. Everything is an object in JavaScript.
• Here, we don't create class to get the object. But, we direct create objects.
In real life, a car is an object.
A car has properties like weight and color, and methods like start and stop:

ObjectProperties
1. car.name = Fiat 2. car.model = 500 3. car.weight = 850kg 4.car.color = white

Methods
1. car.start() 2. car.drive() 3. car.brake() 4. car.stop()

• All cars have same properties, but property values differ from car to car.
• All cars have same methods, but methods are performed at different times.
Creating Objects in JavaScript
There are 3 ways to create objects.
(i) By object literal
Syntax: object={property1:value1, property2:value2..... propertyN:valueN }

Ex. <script>
emp={ id:101, name:“Abhineet Maitrey", salary:90000 }
document.write(emp.id+" "+emp.name+" "+emp.salary);
</script>

(ii) By creating instance of Object directly (using new keyword)


Syntax: var objectname=new Object();
<script>
var emp=new Object();
emp.id=101;
Ex. emp.name=“Aviral Maitrey";
emp.salary=80000;
document.write(emp.id+" "+emp.name+" "+emp.salary);
</script>
Creating Objects……….
(iii) By using an Object constructor

• Here, it is required 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.

<script>
Ex. function emp(id,name,salary)
{
this.id=id;
this.name=name;
this.salary=salary;
}

e=new emp(102,“Shruti Pathak",60000);


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

</script>
OBJECTS(1)
Objects are variables too. But objects can contain many values.

• This code assigns many values (Fiat, 500, white) to a variable named car:
• The values are written as name:value pairs (name and value separated by a colon).

Object Properties
• The name:values pairs (in JS objects) are called properties.
Ex.: var person = {firstName:“Abhi", lastName:“Maitrey", age:15,
eyeColor:"blue"};

Object Methods:
• Methods are actions that can be performed on objects.
• Methods are stored in properties as function definitions.
OBJECTS(2)
Accessing Object Properties: objectName.propertyName. Ex. person.lastName;
Or

• Object properties accessed in two ways: objectName["propertyName"] . Ex. person["lastName"];

<html> <body>
<h2>Creating & accessing a JavaScript Object.</h2>
<script>
var car = {type:"Fiat", model:"500", color:“White"};
Example: document.write (“Type=>>”+car.type);
document.write(“Model=>>”+car[“model”]);
document.write(“Color=>>”+car.color);
</script>
</body> </html>

OP:
OBJECTS(3)
Creating and Accessing Object Methods

Syntax: objectName.methodName() Example: name= person.fullname();

<html><body>
<p>An object method is a function definition, stored as a property value.</p>
Access an object method➔ <script>
var person = {
firstName: "Abhi",
lastName : "Maitrey",
id : 5566,
fullName : function() {
return this.firstName + " " + this.lastName+" "+this.id; }
};
document.write(person.fullName());
</script></body></html>

OP:
THE DOCUMENT OBJECT

• A document is a web page that is being either displayed or created.


• It has a number of properties,used to manipulate the content of the page.

a) write or writeln
Html pages can be created by using the write or writeln methods of the document object.

Syntax: document.write (“String”); document.writeln (“String”);

Here, document is object name and write () or writeln () are methods. Symbol period is used as connector
between object name and method name. The difference between these two methods is new line character
automatically added into the document.

Example: document.write(“<body>”);

document.writeln(“<h1> Hello </h1>”);


ARRAY OBJECT
It is an object that represents a collection of similar type of elements.
Ex.
There are 3 ways to construct array: <script>
var emp=[“Abhi",“Avi",“Kunj"];
1. By array literal for (i=0;i<emp.length;i++){
Syntax: var arrayname=[value1,value2.....valueN]; document.write(emp[i] + "<br/>");
}
</script>
2. By creating instance of Array directly (using new keyword)
Syntax: var arrayname=new Array();
<script>
Ex. var i;
var emp = new Array(); 3. By using an Array constructor (using new keyword)
emp[0] = "Abhi";
emp[1] = “Avi"; <script>
emp[2] = “Kunj"; var emp=new Array(“Abhi",“Avi","Shruti");
for (i=0;i<emp.length;i++){ for (i=0;i<emp.length;i++){
document.write(emp[i] + "<br>"); document.write(emp[i] + "<br>");
} }
</script> </script>
Array Properties and Methods
The real strength of JavaScript arrays are the built-in array properties and methods: Examples
var x = cars.length; // The length property returns the number of elements in cars
var y = cars.sort(); // The sort() method sort cars in alphabetical order

Method Description

concat() Joins two or more arrays, and returns a copy of the joined arrays

Array Object Methods: indexOf() Search the array for an element and returns its position

join() Joins all elements of an array into a string

lastIndexOf() Search the array for an element, starting at the end, and returns its position

pop() Removes the last element of an array, and returns that element

push() Adds new elements to the end of an array, and returns the new length

reverse() Reverses the order of the elements in an array

valueOf() Returns the primitive value of an array


ARRAY: Examples
(1) Concat(): Joins two or more arrays, and returns a copy of the joined arrays.
Syntax: array.concat(array1,array2…..);
Ex:
var one = ["Cheenu", "Lovy"];
var two= ["Emily", "Tarun", "Lina"];
var three= ["Ranu"];
var children = one.concat(two,three);

(2) indexOf(): Searches the array for the specified item, and returns its position.
Returns -1 if the item is not found.
If the item is present more than once, the indexOf method returns the position of the first occurrence.

Syntax: array.indexOf(item);

Ex:
var fruits=[“Banana”,Orange”,”Apple”,”Mango”];
var x=fruits.indexOf(“Apple”);

Here the value of x is:2 i.e. Apple is at position 2.


ARRAY: Examples
(3) Join(): It joins the elements of an array into a string, and returns the string.
The elements will be separated by a specified separator. The default separator is comma (,).
Syntax: array.join();
Ex: var fruits=[“Banana” Orange”,”Apple”,”Mango”];
var x=fruits.join();

the result of x will be Banana,Orange,Apple,Mango.

(4) Slice(): It returns the selected elements in an array, as a new array object.
It selects the elements starting at the given start argument, and exclude the end argument.

Syntax: array.slice (start, end);


Ex: var fruits=[“Banana”,Orange”,”Apple”,”Mango”];
var x=fruits.slice(1, 3);

the result of x will be [Orange,Apple];


Arrays Operations and Properties

❖ Declaring new empty array: var arr = new Array();

❖ Declaring an array holding few elements: var arr = [1, 2, 3, 4, 5];

❖ Appending an element / getting the last element:


❖ arr.push(3);
❖ var element = arr.pop();

❖ Reading the number of elements (array length): arr.length;

❖ Finding element's index in the array: arr.indexOf(1);


DATE OBJECT
This object is used to get year, month and day.

• We can use different Date constructors to create date object.


• It provides methods to get and set day, month, year, hour, minute and seconds.

Constructor:
4 variant of Date constructor to create date object:

• Date()
• Date(milliseconds)
• Date(dateString)
• Date(year, month, day, hours, minutes, seconds, milliseconds)

<html> <body> <b>Current Date and Time:</b>


<script>
Example: Current date & time
var today=new Date();
document.writeln("<br>"+today);
</script> </body> </html>
Date Object(1)
<html>
<body>
Example:
<b>To print date/month/year</b>
date/month/year
<script>
var date=new Date();
var day=date.getDate();
var month=date.getMonth()+1;
var year=date.getFullYear();
document.write("<br>Date is:
"+day+"/"+month+"/"+year);
</script> </body> </html>

<html> <body> Current Time:


<script>
var today=new Date();
var h=today.getHours();
Example: var m=today.getMinutes();
Current Time var s=today.getSeconds();
document.write("<br><br>"+h+":"+m+":"+s);
</script> </body>
</html>
Date Object(2)

setUTCFullYear()
This method is used to set the year for the specified date on the basis of universal time.

<html>
<body>
<script>
Example: Print the var year=new Date();
value of current &
updated year.
document.writeln("Current year : "+year.getUTCFullYear()+"<br>");

year.setUTCFullYear(2019);
document.writeln("Updated year : "+year.getUTCFullYear());
</script>
</body>
</html>
Math Object
Provides several constants and methods to perform mathematical operation
<html> <body>
Example: <script>
document.writeln("<b><br>SQRT=></b>"+ Math.sqrt(17));
document.writeln("<b><br>RANDOM=></b>"+ Math.random());
document.writeln("<b><br>POW=></b>"+ Math.pow(3,4));
document.writeln("<b><br>FLOOR=></b>"+ Math.floor(4.6));
document.writeln("<b><br>CEIL=></b>"+ Math.ceil(4.6));
document.writeln("<b><br>ROUND=></b>"+ Math.round(4.6));
document.writeln("<b><br>ABSOLUTE=></b>"+ Math.abs(-4));
</script> </body> </html>
Number Object
It enables us to represent a numeric value.

Methods Description
isFinite() It determines whether the given value is a finite number.

isInteger() It determines whether the given value is an integer.

parseFloat() It converts the given string into a floating point number.

parseInt() It converts the given string into an integer number.

toExponential() It returns the string that represents exponential notation of the


given number.
toFixed() It returns the string that represents a number with exact digits
after a decimal point.
toPrecision() It returns the string representing a number of specified
precision.
toString() It returns the given number in the form of string.
Example of parseFloat() method:

<script>
var a="50";
var b="50.25"
var c="String";
var d="String50";
var e="50.25String"
document.writeln(Number.parseFloat(a)+"<br>");
document.writeln(Number.parseFloat(b)+"<br>");
document.writeln(Number.parseFloat(c)+"<br>");
document.writeln(Number.parseFloat(d)+"<br>");
document.writeln(Number.parseFloat(e));
</script>
BROWSER OBJECT MODEL

• The Browser Object Model (BOM) is used to interact with the browser

Default object of browser is window means all the functions of window can be called by specifying window
or directly.

For example: window.alert(“Hello! Dear Students");


is same as:
alert(“Hello! Dear Students");

Other properties defined underneath the window object like document, history, screen, navigator, location
Methods of window object:
Method Description
alert() displays the alert box containing message with ok button.
confirm() displays the confirm dialog box containing message with ok and cancel button.

prompt() displays a dialog box to get input from the user.


open() opens the new window.
close() closes the current window.
setTimeout() performs action after specified time like calling function, evaluating expressions etc.

<script>
function msg(){
Ex. open() open("http://www.kiet.edu"); Ex. setTimeout()
}
</script>
<script>
<input type="button" value=“KIET" onclick="msg()"/>
function msg(){
setTimeout(
function(){
alert("Welcome to KIET-CSE after 2 seconds")
},2000);
}
</script>
<input type="button" value="click" onclick="msg()"/>
History Object

• It represents an array of URLs visited by the user.


• Allows to load previous, forward or any particular page
• It can be accessed by: window.history Or, history

1 property of history object:


No. Property Description
1 length returns the length of the history URLs.

3 methods of history object:


No. Method Description

1 forward() loads the next page.


2 back() loads the previous page.
3 go() loads the given page number.

history.back(); //for previous page


usage of history object: history.forward(); //for next page
history.go(2); //for next 2nd page
history.go(-2); //for previous 2nd page
We Covered:

▪ Objects

▪ Document Object , Array Object

▪ Date Object , Math Object

▪ Number Object , Browser Object Model(BOM)


Thank
You

You might also like