JavaScript Objects

1
Math Object

●
The math object provides you properties and methods for
mathematical constants and functions. Unlike other global
objects, Math is not a constructor. All the properties and
methods of Math are static and can be called by using
Math as an object without creating it.

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

<script>
Var radius=3;
var circleArea = Math.PI * radius * radius;
document.getElementById("demo").innerHTML = Math.PI;
</script>

2
Math Object(cont.)

●
Math Object Constants

Name Returned value

Math.E Returns Euler’s constant
Math.PI Return the value of  (PI)PI)
Math.SQRT2 Returns the square root of 2
Math.SQRT1_2 Returns the square root of 0.5
Math.LN2 Returns the natural logarithm of 2
Math.LN10 Returns the natural logarithm of 10
Math.LOG2E Returns the log base -2 of E
Math.LOG10E Returns the log base -10 of E

3
Math Object(cont.)

●
Math Object Methods

Name Example Returned value

cos(n) Math.cos(PI).4) 0.9210609940028851028
sin(n) Math.sin(PI)Math.PI) 0
Math.tan(PI)1.5 *
tan(n) infinity
Math.PI)
acos(n) Math.acos(PI).5) 1.047197551196597631
asin(n) Math.asin(PI)1) 1.570796326794896558
atan(n) Math.atan(PI).5) 0.4636476090008060935
exp(n) Math.exp(PI)8) 2980.957987041728302
sqrt(n) Math.sqrt(PI)9801) 99
log(n) Math.log(PI)5) 1.609437912434100282

4
Math Object(cont.)
●
Math Class Methods(cont.)

Name Example Returned value

max(x,y,…) Math.max(PI)1 , 700) 700
min(x,y,…) Math.min(PI)1 , 700,2) 1
pow(x,n) Math.pow(PI)2, 3) 8
abs(n) Math.abs(PI)-6.5) 6.5
random() Math.random(PI)) .7877896
floor(n) Math.floor(PI)8.9) 8
ceil(n) Math.ceil(PI)8.1) 9
round(n) Math.round(PI).567) 1

5
Date Object
●
To obtain and manipulate the date and time in a script.
●
Syntax:

<script>
var myDate= new Date(PI)) // holds current date

//var myDate = new Date(PI)datestring)

var myDate = new Date(PI)"October 13, 1975 11:13:00") ;

//var myDate = new Date(PI)yr, mon, day)

var myDate = new Date(PI)79,5,24);

//var myDate = new Date(PI)yr, mon, day, hrs, min, sec)

var myDate = new Date(PI)79,5,24,11,33,0);
</script>

6
Date Object(cont.)

●
Date Object Number Conventions:

Date Attribute Numeric Range

seconds, minutes 59 - 0
hours 23 - 0
6-0
day
)Sunday, 1 = Monday, and so on = 0(PI)
date 31 - 1
11 - 0
month
)January, 1 = February, and so on = 0(PI)
1900
year 90
2000

7
Date Object(cont.)
●
The Date object methods fall into these broad categories:

●
get" methods
●
for getting date and time values from date objects

●
"set" methods
●
for setting date and time values in date objects

●
"to" methods
●
for returning string values from date objects.

8
Date Object(cont.)

●
get Methods
var now = new Date ( "November 25,2006 11:13:55");

Name Example Returned Value

getDate() now.getDate(PI)) 25
getMonth() now.getMonth(PI)) 10
getYear() now.getYear(PI)) 2006
getDay() now.getDay(PI)) 0
getHours() now.getHours(PI)) 11
getMinutes() now.getMinutes(PI)) 13
getSeconds() now.getSeconds(PI)) 55
getTime() now.getTime(PI)) 11:13:55

9
Date Object(cont.)

●
Get Date Example:

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

<script>
var d = new Date();
document.getElementById("demo").innerHTML = d.getDate();
</script>

10
Date Object(cont.)

●
set Methods
var someDate = new Date ();
var now = new Date ( "November 25,2006 11:13:55");

Name Example
setDate(number) someDate.setDate(25)
setHours(number) someDate.setHours(14)
setMinutes(number) someDate.setMinutes(50)
setMonth(number) someDate.setMonth(7)
setSeconds(number) someDate.setSeconds(7)
setTime(TimeString) someDate.setTime(now.getTime())
setYear(number) someDate.setYear(88)

11
Date Object(cont.)

●
Set Date example:

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

<script>
var d = new Date();
d.setDate(15);
document.getElementById("demo").innerHTML = d;
</script>

12
Date Object(cont.)

●
to Methods
●
var now = new Date ( "November 25,2006 11:13:00");

Name Example Returned Value

toGMTString()
now.toGMTString(PI)) Sat, 25 Nov 2006 09:13:00 UTC
toUTCString()
‫‏‬11:13:00 ‫‏‬2006 ‫‏‬,‫‏ نوفمبر‬25
‫ص‬
toLocaleString() now.toLocaleString(PI))
(PI)Based on date format in your
OS)
now.toLocaleTimeString(PI)
toLocaleTimeString() 11:13:00 ‫ص‬
)
toLocaleDateString() now.toLocaleDateString(PI)) 2006 ‫‏‬,‫‏ نوفمبر‬01
Sat Nov 25 11:13:00
toString() now.toString(PI))
UTC+0200 2006
toDateString() now.toDateString(PI)) Sun Nov 1 2006

13
Date Object(cont.)

●
to Methods Example:

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

<script>
var d = new Date();
document.getElementById("demo").innerHTML = d.toDateString();
</script>

14
DOM Object
●
A Document object represents the HTML document that is displayed in
that window. The Document object has various properties that refer to
other objects which allow access to and modification of document content.
●
The way a document content is accessed and modified is called the
Document Object Model, or DOM. The Objects are organized in a
hierarchy. This hierarchical structure applies to the organization of objects
in a Web document.
●
Document object − Each HTML document that gets loaded into a window
becomes a document object. The document contains the contents of the
page.
●
In other words: The HTML DOM is a standard for how to get, change, add,
or delete HTML elements.

15
DOM Object (cont.)

●
Here is a simple hierarchy of a few important objects

16
DOM Object (cont.)

●
The document object represents your web page.
●
If you want to access any element in an HTML page, you
always start with accessing the document object.
●
HTML DOM methods are actions you can perform (on
HTML Elements).
●
HTML DOM properties are values (of HTML Elements) that
you can set or change.

17
DOM Object (cont.)

●
Properties:

Property Description
bgColor A string that specifies the background color.
fgColor A string that specifies the text color.
linkColor The color of text for a link that the user has not yet visited
(PI)read/write).
vlinkColor The color of text for a link that the user has already visited
(PI)read/write).
alinkColor The color of text for a link that the user clicks (PI)read/write).
lastModified A string that specifies the date the document was last modified.
title A string that specifies the contents of the TITLE tag.

18
DOM Object (cont.)

●
Methods for accessing document elements

Method Description
getElementById("ID") For accessing any element on the
page via its ID attribute
getElementsByName(“NAME”) Returns a collection of objects with
the specified name

getElementsByTagName(“TAGNAME”) Returns a collection of objects with

the specified tagname

19
Image element

●
The Image object is an image on an HTML form, created
by using the HTML 'IMG' tag.
●
Any images created in a document are then stored in an
array in the document.images property.
●
Image Object has its own set of Properties, Collections,
Methods & Event handlers.

20
Image element

●
Object Model reference:

[window.]document.imageName
[window.]document.imageID
[window.]document.images[i]
document.img1.
src=“img1.jpg”
document.image
s[0].src=“img1.j
<html>
pg” <body>
…..
<img name=“img1” src=“img1.jpg”>
document.img2.s <img name=“img2” src=“img2.jpg”>
rc=“img2.jpg” …
document.image </body>
s[1].src=“img2.j </html>
pg” 21
Image element

●
Properties:

name id src height width

●
Event handlers:
onabort onload onerror onclick ondblclick onmouseover

22
Form element

●
By using the form you have at your disposal information
●
about the elements in a form and their values.
●
A separate instance of the form object is created for each
●
form in a document.
●
Objects within a form can be referred to by a numeric
●
index or be referred to by name.
●
Object Model Reference:
[window.]document.formname
[window.]document.forms[i]
[window.]document.forms[“formNAME”]
[window.]document.forms[“formID”]

23
Form element

●
Properties:

Property Description
elements[] An array containing all of the elements of the form. Use it to
loop through form easily.
length The number of elements in the form.
name The name of the form.
id The id of the form.
target The name of the target window form is to be submitted to.

24
Form element

●
Methods:
Method Description
reset() Resets the form.
Clicking the reset button clears all contents that
the user has made.
submit() Submits a form.
Clicking the submit button submits the content
of the form to the server

25
Form element

form
form

button
button checkbox
checkbox Text
Text radio
radio reset
reset select
select submit
submit textarea
textarea

26
Button

●
Methods:
Method Description
blur() Removes focus from the field.

focus() Assigns focus to the field; places the cursor in

the control.

click() Simulates a mouse-click on a button

27
Button

●
Properties:
properties Description
value Sets or returns the text that is displayed on the
button

readOnly Sets or returns whether or not a button should

be read-only.

disabled Sets or returns whether or not a button should

be disabled

28
Button

●
Event Handlers:
Event Handler Event
The mouse is clicked and released with the
onclick
cursor positioned over the button.
The mouse is double-clicked with the
ondblclick
cursor positioned over the button.
The mouse is pressed down with the cursor
onmousedown
positioned over the button.
onmouseout The mouse cursor is moved off the button.
The mouse cursor is moved on top of the
onmouseover
button.
The mouse button is released with the
onmouseup
cursor positioned over the button.

29
Example

●
Example for DOM form
<!DOCTYPE html>
<html>
<body>

<h2>Finding HTML Elements Using document.forms</h2>

<form id="frm1" action="/action_page.php">

First name: <input type="text" name="fname" value="Donald"><br>
Last name: <input type="text" name="lname" value="Duck"><br><br>
<input type="text" value="Click Here" onfocus="document.getElementById('MSG').innerText='You
entered the field.';
value='Click Outside'" onblur= "document.getElementById('MSG').innerText='You exited the field.';
this.value='Click Here'"/>
<span id="MSG"></span>

</form>

<p>Click "Show" to display the value of each element in the form.</p>

<button onclick="myFunction()">Show</button>

<p id="test"></p>
30
Example(cont.)

<script>
function myFunction() {
var x = document.forms["frm1"];
var text = "";
var i;
for (i = 0; i < x.length ;i++) {
text += x.elements[i].value + "<br>";
}
document.getElementById("test").innerHTML = text;
}
</script>

</body>
</html>

31
Questions?

32