Scribd
Upload
20 views8 pages

Computer 8 Module 10

This document provides an overview of different JavaScript objects used to manipulate web pages, including the Window, Document, and History objects. It describes properties and methods of each object like title, write(), getElementById(), and back(). The Window object allows accessing and printing the page title. The Document object allows retrieving the page URL and modifying content with getElementById(). The History object contains an array of visited URLs and its back() method loads the previous URL.

Uploaded by

Zamanoden D. Unda
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
20 views8 pages

Computer 8 Module 10

This document provides an overview of different JavaScript objects used to manipulate web pages, including the Window, Document, and History objects. It describes properties and methods of each object like title, write(), getElementById(), and back(). The Window object allows accessing and printing the page title. The Document object allows retrieving the page URL and modifying content with getElementById(). The History object contains an array of visited URLs and its back() method loads the previous URL.

Uploaded by

Zamanoden D. Unda
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/ 8

COMPUTER SCIENCE

8
Fundamentals of Web
Application Development
Module 12 (Week 3 and 4)

Name of Student: Set (A or B):

Grade and Section: School Year: 2020-2021

Teacher: __________________ Date:


Lesson 2 Introduction to JAVASCRIPT

 Other Objects
 The HTML Document Object Model

What is a document object model (DOM)?

What is an event in javascript program?

This lesson explains some objects that are used in javascript program (i.e. Window Object,
Document Object, History Object, and Location Object).

Page | 2
Q. OTHER OBJECTS
Aside from the objects that you encountered earlier in this chapter, there are additional
objects that you can use to manipulate or retrieve information about the page. There is no need
to memorize the properties and methods of the objects. Just go over and find out their possible
uses.
a. Window Object
The Window object is the main or top-level object in Javascript. It has the following
properties and methods that you can use

Property/ Method Description Example Result/Output


title Returns the title of var a the title of the
the current page as a = document.title page
specified in the document.write(a)
<title> and </title>
tags
print() Prints the contents <a href=”” onclick = the page is printed
of the current “window.print(); return
window false “>Print this page
</a>
setInterval (“statement”, Repeatedly t = displays a popup
milliseconds) performs a setInterval(“alert(‘this box every 10
statement or calls a is an alarm’)”, 10000) seconds
An alternative to the function between the
setTimeout() function set interval

clearInterval Clears or cancels <script type = displays a popup


(timingvariable) the timing event set “text/javascript”> box every 10
by setTime interval() seconds
t = setInterval(“ alert
An alternative to the (‘this is an alarm’)”,
clearTimeout() function 10000) the link stops the
alarm once clicked
</script>

<a href = “” onclick =


“clearInterval(t)”> Stop
the alarm </a>

The alert(), prompt(), setTimeout(), and clearTimeout() discussed


earlier in this chapter are methods of the Window object.
b. Document Object

Property/ Method Description Example Result/Output


title Returns the title of var a The title of the
the current page as a = document.title current page
specified in the document.write(a)
<title> and </title>
tags
referrer Returns the URL of var a The URL of the
the page that loaded a = document.referrer referrer
the current page. document.write(a)

This is useful to find


out the pages where
the document is
linked to. The
property will return
an empty string if
the current page is
loaded directly by
the browser.

Page | 3
URL Returns the URL of var a The URL of the
the current page a = document.URL current page
document.write(a)
write(value) Inserts text or HTML document.write( “Hello Hello World
elements into the World”)
Value can be any value. page
You may place two or
more values as
arguments. Use commas
to separate the values.

getElementById(Id) Returns a reference <body> Replaces the


to the first object <p id=”p1”> content of the
Id refers to the value having the specified This is a paragraph paragraph
</p>
given to the Id attribute ID element with
of an HTML element <script type = PARAGRAPH 1,
“text/javascript”>
The Id of the
var x paragraph
x = element is p1.
document.getElementbyId(
“p1”)
x.innerHTML = “PARAGRAPH
1”

</script>

getElementsByName Returns a collection <body> There are 3


(Name) of objects with the <input type=”text” textboxes that
name=”T1” />
specified use T1 name
<input type=”text”
Name refers to the value name=”T1” />
given to the Name <input type=”text”
attribute of an HTML name=”T1” />
object
<script
type=”text/javascript”>

var x
x =
document.getElementsByNa
me (“T1”)
alert (“There are” +
x.length + “textboxes
that use the T1 name”)

</script>
getElementsByTagName Returns a collection <body> There are 3 input
(Tagname) of objects with the <input name=”T1” /> elements
<input name=”T2” />
specified tagname
<input name=”T3” />
Tagname refers to the
HTML tagname <script type=
“text/javascript”>

var x
x =
document.getElementsByTa
gName (“input”)
alert (“There are” +
x.length + “input
elements”)

</script>

Page | 4
c. History Object
The History object is an object created by Javascript that contains an array of URLs that
have been visited by the user.
Property/ Method Description Example Result/Output
length Returns the number document.write(“You have displays the
of URLs in the visited”, history.length, number of visited
history list “pages”) pages
back() Loads the previous <a href = “” loads the
URL. Simulates the onclick=”history.back(); previous URL
clicking of the Back return false”> once the link is
Click to go back </a>
Button. clicked
forward() Loads the next URL. <a href = “” loads the next
Simulates the onclick=”history.forward() URL once the
clicking of the Next ; return false”> link is clicked
Click to go forward </a>
button
go(index) Loads a URL in the <a href = “” onclick = loads the next
history list based on “history.go(-1); return URL once the
Index is a numeric value the given number. false”> link is clicked
Click to go back</a>
that refers to a URL in <a href= “”
the history list. onclick=”history.go(1); loads the next
A negative number return false” URL once the
loads the previous URL Click to go forward </a> link is clicked

d. Location Object
The Location object is an object created by Javascript that contains information about
the page is currently loaded.

Property/ Method Description Example Result/Output


href Returns or sets the <a href = Loads the
URL of the window “http://www.yahoo.com” Google website
onclick = “location.href = instead of Yahoo
‘http://www.google.com’”>
Yahoo </a>
hash Returns the URL (Let us say that the #part1
from the hash (#) current URL is
sign http://www.javascript.com/
tutorial.html#part1)
document.write(location.ha
sh)
search Returns the URL (Let us say that the ?page=1
from the question current URL is
mark (?) http://www.javascript.com/
tutorial.html?page=1)
document.write(location.se
arch)
hostname Sets or returns the (let us say that the javascript.com
hostname of the current URL is
URL http://www.javascript.com/
tutorial.html)
document.write(location.ho
stname)
pathname Sets or returns the (Let us say that the /javascript/tutorial
pathname of the current URL is .html
current URL http://www.javascript.com/
javascript/tutorial.html)
document.write(location.pa
thname)
assign(URL) Loads a new <a href = Loads the
document to the “http://www.yahoo.com” Google Website
window onclick = “location.assign instead of Yahoo
(‘http://www.google.com’)”
>Yahoo</a>
reload(URL) Reloads the current <a href = “” onclick = Refreshes the
page. Simulates the “location.reload()”> page once the
clicking of the Reload </a> link is clicked
refresh button

Page | 5
R. THE HTML DOCUMENT OBJECT MODEL
The HTML Document Object Model (HTML DOM) provides a standardized way to
access objects in HTML. All HTML elements have their own set of properties and methods that
you can use. The History and Location objects are created by Javascript and are not part of the
HTML DOM.
Create an HTML file and copy the script beow to see how the contents of a multi-line textbox
can be accessed and changed using Javascript.
<html>
<head>
<script type = “text/javascript”>
function addtext(t)
{
var d
d = document.getElementById(“displaybox”)
d.value = d.value + t
}
</script>
</head>
<body>
<p align=”center” onclick=”addtext(‘click ‘)”
ondblclick = “addtext(‘double-click ‘)”
onmouseover = “addtext(‘mouseover ’)”
onmouseout = “addtext(‘mouseout ‘)”>
Click me
</p>

<textarea cols = “30” rows = “10” id=”displaybox”></textarea>


</body>
</html>

The script above will display a page similar to the image below.
The textarea (multi-line textbox) has an Id value of
displaybox while the paragraph element uses events to
trigger the addtext() function. The textarea in the
sample script is created by using the <textarea> tag:
<textarea cols = “30” rows = “10” id =
“displaybox”></textarea>
You will learn more aout the textarea and other similar
objects in the next chapter. In the meantime, let us
focus on how to access and modify the content of the
textarea using Javascript.
The addtext() function modifies values of the textbox by
performing the following:

 Addtext(t) – the function accepts a value through variable t


 Var d - a variable is declared
 D = document.getElementById(“displaybox”) – Create a reference to the textarea object
using the document.getElementById() function. Creating a reference means that you are
getting information on how to access the properties and methods of particular object. In
this case, the reference information is now stored in variable d.
 D.value = d.value + t – the value stored in the textarea will be replaced by its old value
plus the new value which is stored in the variable t. The HTML DOM states that you can
retrieve or set the value of a textare and other similar objects by using the value property.

You should see the text in the textarea change as you interact with the paragraph element.

Page | 6
COMPUTER SCIENCE 8 (MODULE 12)

Name: ____________________________________________ Date:


Teacher: __________________________________________ Grade & Section:

Identify the following questions. Specify the name of the object and write a period (.) before the
property/method. (Example: document.referrer – returns the URL of the page that loaded the
current page.)

1. Inserts the text or HTML elements into the page.

2. Returns or sets the URL of the window

3. Loads the next URL.

4. Sets or returns the pathname of the current URL.

5. Loads the previous URL.

6. Prints the contents of the current window

7. Returns the URL of the current page.

8. Clears or cancels the timing event set by setTimeInterval()

9. Reloads the current page.

10. Loads a new document to the window.

Define the setInterval(“statement”, milliseconds) from Window Object and give 1 example with
its result/output.

Page | 7
Enumerate the Property/Method of the following objects

A. Window Object: C. History Object


1. 9.
2. 10.
3. 11.
4. 12.
B. Document Object: D. Location Object
5. 13.
6. 14.
7. 15.
8. 16.

Direction: Explain what the code does. (Practice the code and do not submit your answer).
<html>
<head>
<title>DOM</title>
<script type = "text/javascript">
function changeBackground(eventDone){

if (eventDone == 1){
document.body.style.backgroundColor = "red"
document.getElementById("context").innerHTML = "CLICKED"
}else if(eventDone == 2){
document.body.style.backgroundColor = "blue"
document.getElementById("context").innerHTML = "DOUBLE-CLICKED"
}else if(eventDone == 3){
document.body.style.backgroundColor = "green"
document.getElementById("context").innerHTML = "MOUSEOVER"
}else{
document.body.style.backgroundColor = "brown"
document.getElementById("context").innerHTML = "MOUSEOUT"
}
}
</script>
</head>
<body>
<div style="text-align: center">
<button onclick="changeBackground(1)"
ondblclick = "changeBackground(2)"
onmouseover = "changeBackground(3)"
onmouseout = "changeBackground(4)">
Click me
</button>
</div>

<h1 id="context" style="text-align: center;">DEFAULT VIEW</h1>


</body>
</html>

Page | 8

You might also like