4 JS Events EH (Unit 3)
4 JS Events EH (Unit 3)
KCS-602
by
❑ Document Object
❑ Array Object
❑ Date Object
❑ Math Object
❑ Number Object
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>
<script>
Ex. function emp(id,name,salary)
{
this.id=id;
this.name=name;
this.salary=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
<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
<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) write or writeln
Html pages can be created by using the write or writeln methods of the document object.
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>”);
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
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
(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”);
(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.
Constructor:
4 variant of Date constructor to create date object:
• Date()
• Date(milliseconds)
• Date(dateString)
• Date(year, month, day, hours, minutes, seconds, milliseconds)
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.
<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.
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.
<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
▪ Objects