3.1 javascript objects_DOM

Javascript Objects
By: Jalpesh Vasa

• Objects are composed of attributes. If an attribute contains a function, it is considered
to be a method of the object otherwise, the attribute is considered a property.
• Object Properties:
– Object properties can be any of the three primitive data types, or any of the abstract data
types, such as another object.
– objectName.objectProperty = propertyValue;
– var str = document.title;
• Object Methods:
– The methods are functions that let the object do something or let something be done to it.
There is little difference between a function and a method, except that a function is a
standalone unit of statements and a method is attached to an object and can be referenced
by the this keyword
– Following is a simple example to show how to use write() method of document object to
write any content on the document:
– document.write("This is test");
• The new Operator:
– The new operator is used to create an instance of an object. To create an object, the new
operator is followed by the constructor method.
– var books = new Array("C++", "Perl", "Java");
– var day = new Date("August 15, 1947");
11-Apr-19 2

• Example:
point = new Object();
point.x=17;
point.y=22;
alert(point.x+' : '+point.y)
// Would alert: 17 : 22
• Example:
<script type="text/javascript">
var book = new Object(); // Create the object
book.subject = "Perl"; // Assign properties to the object
book.author = "Mohit";
</script>
</head>
<body>
document.write("Book name is : " + book.subject + "<br>");
document.write("Book author is : " + book.author + "<br>");
</script>
// would print Book name is: perl
Book author: Mohit
11-Apr-19 3

• Example:
This example demonstrates how to create an object with a User-Defined Function. Here this
keyword is used to refer to the object that has been passed to a function:
function book(title, author){
this.title = title;
this.author = author;
}
</script>
</head>
<body>
var myBook = new book("Perl", “abcd");
document.write("Book title is : " + myBook.title + "<br>");
document.write("Book author is : " + myBook.author + "<br>");
</script>
11-Apr-19 4

• Example:
Here is a simple example to show how to add a function along with an object:
<script type="text/javascript"> // Define a function which will work as a method
function addPrice(amount){
this.price = amount;
}
this.title = title;
this.addPrice = addPrice; // Assign that method as property.
}
</script>
</head>
<body> <script type="text/javascript">
var myBook = new book("Perl", "Mohtashim");
myBook.addPrice(100);
document.write("Book price is : " + myBook.price + "<br>");
</script>
11-Apr-19 5

• Example:
Here is a simple example to show how to add a function along with an object:
<script type="text/javascript"> // Define a function which will work as a method
function addPrice(amount){
this.price = amount;
}
this.title = title;
this.addPrice = addPrice; // Assign that method as property.
}
</script>
</head>
<body> <script type="text/javascript">
var myBook = new book("Perl", "Mohtashim");
myBook.addPrice(100);
document.write("Book price is : " + myBook.price + "<br>");
</script>
11-Apr-19 6

• JavaScript has only one type of number.
• Numbers can be written with, or without decimals.
• All JavaScript Numbers are 64-bit
• The Number object represents numerical date, either integers or floating-point numbers.
• var val = new Number(number);
• Number Properties:
11-Apr-19 8

function showValue()
{
var smallNumber = (-Number.MAX_VALUE) * 2
if (smallNumber == Number.NEGATIVE_INFINITY) {
alert("Value of smallNumber : " + smallNumber ); }
}
Value of val : -Infinity
function showValue()
{
var bigNumber = Number.MAX_VALUE * 2
if (bigNumber == Number.POSITIVE_INFINITY) {
alert("Value of bigNumber : " + bigNumber ); }
}
Value of val : Infinity
11-Apr-19 9

function showValue() {
var val = Number.MAX_VALUE;
alert("Value of Number.MAX_VALUE : " + val );
}
Value of Number.MAX_VALUE : 1.7976931348623157 x 10308
var val = Number.MIN_VALUE;
alert("Value of Number.MIN_VALUE : " + val );
}
Value of Number.MIN_VALUE : 5 x 10-324
11-Apr-19 10

var dayOfMonth = 50;
if (dayOfMonth < 1 || dayOfMonth > 31)
{
dayOfMonth = Number.NaN
alert("Day of Month must be between 1 and 31.")
}
alert("Value of dayOfMonth : " + dayOfMonth );
}
Day of Month must be between 1 and 31. Value of dayOfMonth : NaN
11-Apr-19 11

• Example
// The following example creates a Number object, myNum,
// then adds a description property to all Number objects.
// Then a value is assigned to the myNum object's description property.
myNum = new Number(65);
Number.prototype.description=null;
myNum.description="wind speed"
alert('The '+myNum.description+' is: '+myNum);
// Would alert: The wind speed is 65
11-Apr-19 12

• Number methods:
11-Apr-19 13

Example:
var num=77.1234;
var val = num.toExponential();
document.write("num.toExponential() is : " + val );
document.write("<br />");
val = num.toExponential(4);
document.write("num.toExponential(4) is : " + val );
val = num.toExponential(2);
document.write("num.toExponential(2) is : " + val);
val = 77.1234.toExponential();
document.write("77.1234.toExponential()is : " + val );
val = 77.1234.toExponential();
document.write("77 .toExponential() is : " + val);
</script>
num.toExponential() is : 7.71234e+1
num.toExponential(4) is : 7.7123e+1
num.toExponential(2) is : 7.71e+1
77.1234.toExponential()is:7.71234e+1
77 .toExponential() is : 7.71234e+1
11-Apr-19 14

• The Date object is a datatype built into the JavaScript language. Date objects are created with the
new Date( )
• Once a Date object is created, a number of methods allow you to operate on it. Most methods
simply allow you to get and set the year, month, day, hour, minute, second, and millisecond fields
• Syntax 1
var myDate = new Date()
Syntax 2
var myDate = new Date([parameters])
Syntax 3
var myDate = new Date(dateString)
Syntax 4
var myDate = new Date("month dd, yyyy")
Syntax 5
var myDate = new Date("month dd, yyyy hh:mm:ss")
Syntax 6
var myDate = new Date(yy, mm, dd)
Syntax 7
var myDate = new Date(yy, mm, dd, hh, mm, ss)
Syntax 8
var myDate = new Date("miliseconds")
11-Apr-19 16

• Example 1 :
var myDate=new Date();
alert('Right now it is: '+myDate.toLocaleString());
Example 2 :
myDate = new Date("October 13, 1966 13:35:00");
weekdays=new Array('Sun','Mon','Tues','Wednes','Thurs','Fri','Satur');
alert('I was born a '+weekdays[myDate.getDay()]+'day.');
Example 3 :
// Note: October is month number 9! (Cause January is 0)
// The reason for this is that it fits well for Arrays,
// cause first item in an Array is item number zero.
// Look at this example:
myDate = new Date(1966,9,13);
months=new Array('Jan','Feb','Mar','Apr','May','June',
'July','Aug','Sep','Oct','Nov','Dec');
alert('I was born in '+months[myDate.getMonth()]);
11-Apr-19 17

• Example 4 :
myDate = new Date(1966,9,13,13,35,0);
nowDate = new Date();
milliseconds=nowDate.getTime()-myDate.getTime();
days=Math.floor(milliseconds/(1000*60*60*24));
alert('I have lived for '+days+' days.');
Example 5 :
myDate = new Date(1966,9,13,13,35,0);
milliseconds=nowDate.getTime()-myDate.getTime();
hours=Math.floor(milliseconds/(1000*60*60));
alert('I have lived for '+hours+' hours.');
Example 6 :
xmasDate = new Date(nowDate.getYear(),11,24);
milliseconds=xmasDate.getTime()-nowDate.getTime();
days=Math.floor(milliseconds/(1000*60*60*24));
alert('There are '+days+' days left till christmas eve.');
11-Apr-19 18

• The math object provides you properties and methods for mathematical constants and functions.
• Unlike the other global objects, Math is not a constructor. All properties and methods of Math are
static and can be called by using Math as an object without creating it.
• Syntax 1
Math.property(value)
Syntax 2
Math.method(value)
• Properties:
E Euler's constant and the base of natural logarithms, approximately 2.718.
LN2 Natural logarithm of 2, approximately 0.693.
LN10 Natural logarithm of 10, approximately 2.302.
LOG2E Base 2 logarithm of E, approximately 1.442.
LOG10E Base 10 logarithm of E, approximately 0.434.
PI Ratio of the circumference of a circle to its diameter, approximately 3.14159.
SQRT1_2 Square root of 1/2; equivalently, 1 over the square root of 2, approximately
0.707.
SQRT2 Square root of 2, approximately 1.414.
11-Apr-19 20

• Properties Example:
var property_value = Math.LN2 (0.693)
var property_value = Math.E (Euler’s Constant – 2.718)
var property_value = Math.LN10 (2.302)
var property_value = Math.LOG2E (1.442)
var property_value = Math.LOG10E (0.434)
var property_value = Math.PI (3.141)
11-Apr-19 21

• Methods:
abs() Returns the absolute value of a number.
acos() Returns the arccosine (in radians) of a number.
asin() Returns the arcsine (in radians) of a number.
atan() Returns the arctangent (in radians) of a number.
atan2() Returns the arctangent of the quotient of its arguments.
ceil() Returns the smallest integer greater than or equal to a number.
cos() Returns the cosine of a number.
exp() Returns EN, where N is the argument, and E is Euler's constant, the base of the natural
logarithm.
floor() Returns the largest integer less than or equal to a number.
log() Returns the natural logarithm (base E) of a number.
max() Returns the largest of zero or more numbers.
min() Returns the smallest of zero or more numbers.
pow() Returns base to the exponent power, that is, base exponent.
random() Returns a pseudo-random number between 0 and 1.
round() Returns the value of a number rounded to the nearest integer.
sin() Returns the sine of a number.
sqrt() Returns the square root of a number.
tan() Returns the tangent of a number.
11-Apr-19 22

• Methods Example:
var value = Math.abs(-1); (1)
var value = Math.abs(null); (0)
var value = Math.abs(20); (20)
var value = Math.abs("string"); (NaN)
var value = Math.ceil(45.95); (46)
var value = Math.ceil(45.20); (46)
var value = Math.ceil(-45.95); (-45)
var value = Math.ceil(-45.20); (-45)
var value = Math.max(10, 20, -1, 100); (100)
var value = Math.max(-1, -3, -40); (-1)
var value = Math.max(0, -1); (0)
var value = Math.max(100); (100)
11-Apr-19 23

• What is RegExp?
 When you search in a text, you can use a pattern to describe what you are searching for.
 A simple pattern can be one single character.
 Regular expressions are very powerful tools for performing pattern matches.
 You can perform complex tasks that once required lengthy procedures with just a few lines of
code using regular expressions
 A more complicated pattern can consist of more characters, and can be used for parsing, format
checking, substitution and more.
 Regular expressions are used to perform powerful pattern-matching and "search-and-replace"
functions on text.
 A regular expression is an object that describes a pattern of characters.
11-Apr-19 25

• Syntax:
var pattern = new RegExp(pattern, attributes);
or simply
var pattern = /pattern/attributes(modifiers);
• pattern: A string that specifies the pattern of the regular expression or another regular expression.
• attributes: An optional string containing any of the "g", "i", and "m" attributes that specify global,
case-insensitive, and multiline matches, respectively.
• Modifiers are used to perform case-insensitive and global searches.
• The i modifier is used to perform case-insensitive matching.
• The g modifier is used to perform a global match (find all matches rather than stopping after the
first match).
11-Apr-19 26

• Examples:
<script>
var str = "Visit Mypage";
var patt1 = /mypage/i;
document.write(str.match(patt1));
</script>
<script>
var str="Is this all there is?";
var patt1=/is/g;
</script>
<script>
var patt1=/is/gi;
</script>
Mypage
is,is
Is,is,is
11-Apr-19 27

var string1="Peter has 8 dollars and Jane has 15"
parsestring1=string1.match(/d+/g) //returns the array [8,15]
var string2="(304)434-5454"
parsestring2=string2.replace(/[()-]/g, "") //Returns "3044345454" (removes "(", ")", and "-
")
var string3="1,2, 3, 4, 5"
parsestring3=string3.split(/s*,s*/) //Returns the array ["1","2","3","4","5"]11-Apr-19 35

function validateEmail(email)
{
var reg = /^w+([-+.']w+)*@w+([-.]w+)*.w+([-.]w+)*$/
if (reg.test(email)){
return true; }
else{
return false;
}
}
</script>
/^[a-zA-Z]*$/
11-Apr-19 36

• With the HTML DOM, JavaScript can access all the elements of an HTML document.
• What is the Document Object Model?
 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.
 It defines the logical structure of documents and the way a document is accessed
and manipulated. In the DOM specification, the term "document" is used in the broad
sense.
 With the Document Object Model, programmers can create and build documents,
navigate their structure, and add, modify, or delete elements and content. Anything
found in an HTML or XML document can be accessed, changed, deleted, or added using
the Document Object Model, with a few exceptions
 The Document Object Model (DOM) is the model that describes how all elements
in an HTML page, like input fields, images, paragraphs etc., are related to the topmost
structure: the document itself. By calling the element by its proper DOM name, we
can influence it.11-Apr-19 38

• With a programmable object model, JavaScript gets all the power it needs to create
dynamic HTML:
 JavaScript can change all the HTML elements in the page
 JavaScript can change all the HTML attributes in the page
 JavaScript can change all the CSS styles in the page
 JavaScript can react to all the events in the page
 JavaScript can remove existing HTML elements and attributes
 JavaScript can add new HTML elements and attributes
 JavaScript can create new HTML events in the page
HTML DOM defines:
The HTML elements as objects
The properties of all HTML elements
The methods to access all HTML elements
The events for all HTML element
11-Apr-19 39

HTML DOM Methods
• 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.
• document.getElementById("demo").innerHTML = "Hello
World!";
11-Apr-19 40

HTML DOM Document Object
• Adding and Deleting Elements
• Adding Events Handlers
Method Description
document.createElement(element) Create an HTML element
document.removeChild(element) Remove an HTML element
document.appendChild(element) Add an HTML element
document.replaceChild(new, old) Replace an HTML element
document.write(text) Write into the HTML output stream
Method Description
document.getElementById(id).onclick =
function(){code}
Adding event handler code to an onclick event
11-Apr-19 41

HTML DOM Document Object
• Finding HTML Elements
• Changing HTML Elements
document.getElementById(id) Find an element by element id
document.getElementsByTagName(name) Find elements by tag name
document.getElementsByClassName(name) Find elements by class name
Property Description
element.innerHTML = new html content Change the inner HTML of an element
element.attribute= new value Change the attribute value of an HTML element
element.style.property= new style Change the style of an HTML element
Method Description
element.setAttribute(attribute, value) Change the attribute value of an HTML element
11-Apr-19 42

HTML DOM Elements
• Finding HTML Elements
– Often, with JavaScript, you want to manipulate HTML
elements.
• Finding HTML elements by id
• Finding HTML elements by tag name
• Finding HTML elements by class name
• Finding HTML elements by CSS selectors
• Finding HTML elements by HTML object collections
• var myElement = document.getElementById("intro");
• var x = document.getElementsByTagName("p");
11-Apr-19 43

• Nodes
 In the Level 1 DOM, each object, whatever it may be exactly, is a Node. So if you do
<P>This is a paragraph</P>
 you have created two nodes: an element P and a text node with content 'This is a
paragraph'. The text node is inside the element, so it is considered a child node of the
element.
<P> <-- element node
|
|
This is a paragraph <-- text node
 <P>This is a <B>paragraph</B></P>
<P>
|
--------------
| |
This is a <B>
|
|
paragraph
11-Apr-19 44

To do so, you have to find the elements first. There are a couple of ways to do this:
 Finding HTML elements by id
 Finding HTML elements by tag name
 Finding HTML elements by class name
The following HTML objects (and object collections) are also accessible:
document.anchors
document.body
document.documentElement
document.embeds
document.forms
document.head
document.images
document.links
document.scripts
document.title
(1)
<body>
<p id="intro">Hello World!</p>
<p>This example demonstrates the <b>getElementById</b> method!</p>
<script>
x=document.getElementById("intro");
document.write("<p>The text from the intro paragraph: " + x.innerHTML + "</p>");
</script>
11-Apr-19 46

(2)
<body>
<p>Hello World!</p>
<div id="main">
<p>The DOM is very useful.</p>
<p>This example demonstrates the <b>getElementsByTagName</b> method</p>
</div>
<script>
var x=document.getElementById("main");
var y=x.getElementsByTagName("p");
document.write('First paragraph inside "main" is ' + y[0].innerHTML);
</script>
</body>
(3)
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML="New text!";
</script>
<p>The paragraph above was changed by a script.</p>
11-Apr-19 47

(5)
<body>
<img id="image" src="smiley.gif" width="160" height="120">
<script>
document.getElementById("image").src="landscape.jpg";
</script>
<p>The original image was smiley.gif, but the script changed it to landscape.jpg</p>
</body>
The HTML document above contains an <img> element with id="image"
We use the HTML DOM to get the element with id="image"
A JavaScript changes the src attribute of that element from "smiley.gif" to
"landscape.jpg“
(6)
<script>
document.getElementById("p2").style.color="blue";
document.getElementById("p2").style.fontFamily="Arial";
document.getElementById("p2").style.fontSize="larger";
</script>
<p>The paragraph above was changed by a script.</p>
11-Apr-19 48

(7)
<body>
<h1 id="id1">My Heading 1</h1>
<button type="button"
onclick="document.getElementById('id1').style.color='red'">
Click Me!</button>
</body>
(8)
<p>Hello World!</p>
<p class="intro">The DOM is very useful.</p>
<p class="intro">This example demonstrates the <b>getElementsByClassName</b>
method.</p>
<p id="demo"></p>
<script>
var x = document.getElementsByClassName("intro");
document.getElementById("demo").innerHTML =
'The first paragraph (index 0) with class="intro": ' + x[0].innerHTML;
</script>
11-Apr-19 49

(9)
<body>
<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="submit" value="Submit">
</form>
<p>Click "Try it" to display the value of each element in the form.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<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("demo").innerHTML = text;
}
</script>
</body>
11-Apr-19 50

HTML DOM Events
• Reacting to Events
• A JavaScript can be executed when an event occurs, like
when a user clicks on an HTML element.
• To execute code when a user clicks on an element, add
JavaScript code to an HTML event attribute: onclick = JS
• HTML events:
• When a user clicks the mouse
• When a web page has loaded
• When an image has been loaded
• When the mouse moves over an element
• When an input field is changed
• When an HTML form is submitted
• When a user strokes a key11-Apr-19 51

Example
(1)
<body>
<h1 onclick="this.innerHTML = 'Ooops!'">Click on this text!</h1>
</body>
(2)
<body>
<h1 onclick="changeText(this)">Click on this text!</h1>
<script>
function changeText(id) {
id.innerHTML = "Ooops!";
}
</script>
</body>
11-Apr-19 52

Example
(3)
<body>
<p>Click the button to display the
date.</p>
<button onclick="displayDate()">The
time is?</button>
<script>
function displayDate() {
document.getElementById("demo").in
nerHTML = Date();
}
</script>
<p id="demo"></p></body>
(4)
<body>
<p>Click "Try it" to execute the
displayDate() function.</p>
<button id="myBtn">Try it</button>
<p id="demo"></p>
<script>
document.getElementById("myBtn").o
nclick = displayDate;
function displayDate() {
nerHTML = Date();
}
</script></body>
11-Apr-19 53

Example
<body onload="checkCookies()">
<p id="demo"></p>
<script>
function checkCookies() {
var text = "";
if (navigator.cookieEnabled == true) {
text = "Cookies are enabled.";
} else {
text = "Cookies are not enabled.";
}
nerHTML = text;
}
</script></body>
<script>
var x =
document.getElementById("fname");
x.value = x.value.toUpperCase();
}
</script>
</head>
<body>
Enter your name: <input type="text"
id="fname"
onchange="myFunction()">
</body>
11-Apr-19 54

Example
<body>
<div onmouseover="mOver(this)"
onmouseout="mOut(this)"
style="background-
color:#D94A38;width:120px;height:20
px;padding:40px;">
Mouse Over Me</div>
<script>
function mOver(obj) {
obj.innerHTML = "Thank You"
}
function mOut(obj) {
obj.innerHTML = "Mouse Over Me"
}
</script></body>
<div onmousedown="mDown(this)"
onmouseup="mUp(this)"
style="background-
color:#D94A38;width:90px;height:20px;p
adding:40px;">
Click Me</div>
<script>
function mDown(obj) {
obj.style.backgroundColor = "#1ec5e5";
obj.innerHTML = "Release Me";
}
function mUp(obj) {
obj.style.backgroundColor="#D94A38";
obj.innerHTML="Thank You";
}
</script>11-Apr-19 55

Example
<form id="myForm" action="#">
First name: <input type="text" name="fname" value="Donald"><br>
Last name: <input type="text" name="lname" value="Duck"><br>
<input type="submit" value="Submit">
</form>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
var x = document.getElementById("myForm").elements[0].value;
document.getElementById("demo").innerHTML = x;}
</script>
11-Apr-19 56

JavaScript Window Object
11-Apr-19 57

• The window object is supported by all browsers. It represent the browser's window.
• All global JavaScript objects, functions, and variables automatically become members of
the window object.
• Global variables are properties of the window object.
• Global functions are methods of the window object.
11-Apr-19 58

Window Screen
• The window.screen object can be written without the window prefix.
Some properties:
• screen.availWidth - available screen width
• screen.availHeight - available screen height
<script>
document.write("Available Width: " + screen.availWidth);
</script>
The output of the code above will be: Available Width: 1366
11-Apr-19 59

Window Location
• The window.location object can be written without the window prefix.
Some examples:
• location.hostname returns the domain name of the web host
• location.pathname returns the path and filename of the current page
• location.port returns the port of the web host (80 or 443)
• location.protocol returns the web protocol used (http:// or https://)
11-Apr-19 60

The location.assign() method loads a new document.
<html>
<head>
<script>
function newDoc()
{
window.location.assign(“C:Documents and SettingsAdministratorDesktopa1.html")
}
</script>
</head>
<body>
<input type="button" value="Load new document" onclick="newDoc()">
</body>
</html>
11-Apr-19 61

Window History
• The window.history object can be written without the window prefix.
• To protect the privacy of the users, there are limitations to how JavaScript can access
this object.
Some methods:
• history.back() - same as clicking back in the browser
• history.forward() - same as clicking forward in the browser
<html>
<head>
<script>
function goBack()
{
window.history.back()
}
</script>
</head>
<body>
<input type="button" value="Back" onclick="goBack()“> </body> </html>
11-Apr-19 62

Window Navigator
• The window.navigator object contains information about the visitor's browser.
<div id="example"></div>
<script>
txt = "<p>Browser CodeName: " + navigator.appCodeName + "</p>";
txt+= "<p>Browser Name: " + navigator.appName + "</p>";
txt+= "<p>Browser Version: " + navigator.appVersion + "</p>";
txt+= "<p>Cookies Enabled: " + navigator.cookieEnabled + "</p>";
txt+= "<p>Platform: " + navigator.platform + "</p>";
txt+= "<p>User-agent header: " + navigator.userAgent + "</p>";
txt+= "<p>User-agent language: " + navigator.systemLanguage + "</p>";
document.getElementById("example").innerHTML=txt;
</script>
11-Apr-19 63

3.1 javascript objects_DOM

Recommended

More Related Content

What's hot (20)

Similar to 3.1 javascript objects_DOM (20)

More from Jalpesh Vasa (16)

Recently uploaded (20)

3.1 javascript objects_DOM