Scribd
Upload
15 views9 pages

Computer 8 Module 14

The document provides an introduction to JavaScript functions and the document object model (DOM) in HTML. It discusses JavaScript functions and their purpose. It lists learning objectives about the confirm popup box, other objects, and the DOM. It then proceeds to define and provide examples of the confirm popup box, other objects like the window and document objects, and the DOM.

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
15 views9 pages

Computer 8 Module 14

The document provides an introduction to JavaScript functions and the document object model (DOM) in HTML. It discusses JavaScript functions and their purpose. It lists learning objectives about the confirm popup box, other objects, and the DOM. It then proceeds to define and provide examples of the confirm popup box, other objects like the window and document objects, and the DOM.

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/ 9

Fundamentals of Web

Application Development
Module 14 (Week 1 & 2)

Name of Student: Set (A or B):


Grade and Section: School Year: 2020-2021
Teacher: __________________ Date:
Lesson 2 Introduction to Javascript
A JavaScript function is a block of code designed to perform a particular task. A JavaScript
function is executed when "something" invokes it (calls it).

What I Need To Know

At the end of this module, you will be able to:

 Describe a confirm popup box


 Describe a other objects
 Describe a HTML document object model

Direction: Explain what is a other objects funtion?

What’s In

Direction: Explain what a confirm popup box is.

Direction: Give examples of HTML document object model.

COMPUTER SCIENCE 8: Quarter 3 - Module 14 (2021-2022)


PHILIPPINE INTEGRATED SCHOOL FOUNDATION, INC. (PISFI)
Reference: Fundamentals of Web Application Development (K TO 12 CURRICULUM COMPLIANT)
2
P. THE CONFIRM POPUP BOX

You learned in the previous examples the use of the alert() and prompt() function to
display popup boxes. The confirm() function can also be used to create a popup box that asks
users to respond to a question.

Syntax
confirm(message)

The value returned by the confirm() function is either true or false.

Example:

var a
var n
var c
a = comfirm(“The program will compute for the square of a number.
Continue?”)
If (a==true)
{
n = parseInt(prompt(“Enter a number”,0))
Alert(“The square of the number is “+”n*n)
}

A value of true will be returned if the OK button is clicked. A value of false will be returned if
the Cancel button is clicked or the Esc key is pressed. Use the confirm() function to give the user a
warning before a task is performed.

Q. OTHER OBJECTS

Aside from the objects 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.
Some of them will be used in the exercise later.
The window object is the main or top-level object in Javascript. It has the following properties
and methods that you can use.

A. WNDOW OBJECT

COMPUTER SCIENCE 8: Quarter 3 - Module 14 (2021-2022)


PHILIPPINE INTEGRATED SCHOOL FOUNDATION, INC. (PISFI)
Reference: Fundamentals of Web Application Development (K TO 12 CURRICULUM COMPLIANT)
3
The alert(), prompt(), setTimeout(), and clearTimeout() discussed earlier in this chapter are
methods of the Window object.

B. DOCUMENT OBJECT

COMPUTER SCIENCE 8: Quarter 3 - Module 14 (2021-2022)


PHILIPPINE INTEGRATED SCHOOL FOUNDATION, INC. (PISFI)
Reference: Fundamentals of Web Application Development (K TO 12 CURRICULUM COMPLIANT)
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.

D. LOCATION OBJECT
The Location object is an object created by Javascript that contains information about
the page is currently loaded.

COMPUTER SCIENCE 8: Quarter 3 - Module 14 (2021-2022)


PHILIPPINE INTEGRATED SCHOOL FOUNDATION, INC. (PISFI)
Reference: Fundamentals of Web Application Development (K TO 12 CURRICULUM COMPLIANT)
5
R. 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 below 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.getElementByld("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" 1d="displaybox"></textarea>

</body>
</html>

The script above will display


a page similar to the image on the
right.

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 about the textarea and other similar objects in the next chapter. In the
meantime, 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:

 The addtext(E)- The function accepts a value through variable t


 var d - A variable is declared
 d document.getElementById( "displaybox) – Create a reterence to the textarea object using
the document. getElementByld() function. Creating a reference means that you are getting

COMPUTER SCIENCE 8: Quarter 3 - Module 14 (2021-2022)


PHILIPPINE INTEGRATED SCHOOL FOUNDATION, INC. (PISFI)
Reference: Fundamentals of Web Application Development (K TO 12 CURRICULUM COMPLIANT)
6
intormation 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 = dvalue +t - The value stored in the textarea will be replaced by its old value plus the
new value which is stored in variable t. The HTML DOM states that you can retrieve or set the
value of a textarea and other similar objects by using the value property.

You should see the text in


the textarea change as you
interact with the paragraph

COMPUTER SCIENCE 8: Quarter 3 - Module 14 (2021-2022)


PHILIPPINE INTEGRATED SCHOOL FOUNDATION, INC. (PISFI)
Reference: Fundamentals of Web Application Development (K TO 12 CURRICULUM COMPLIANT)
7
Direction: Identify the following questions. [10 points]

1. It can also be used to create a popup box that asks users to respond to a question.
2. A function that accept a value through variable t
3. A variable is declared
4. It creates a reterence to the textarea object using the document. getElementByld() function.
5. The value stored in the textarea will be replaced by its old value plus the new value which is stored in
variable t.
6. Its description is to provide a standardized way to access objects in HTML.
7. Its description is to return the title of the current page as specified in the <title> and </title> tags.
8. Its description is to print the contents of the current window.
9. Its description is to insert text or HTML elements into the page.
10. Its description is to return the URL of the current page.

Direction: Enumeration. [10 points]

1-4: Enumerate the properties/methods of the window object.


5-10: Enumerate atleast 6 the properties/methods of the window object.

Direction: Explain document object on own words. [10 points]

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>

COMPUTER SCIENCE 8: Quarter 3 - Module 14 (2021-2022)


PHILIPPINE INTEGRATED SCHOOL FOUNDATION, INC. (PISFI)
Reference: Fundamentals of Web Application Development (K TO 12 CURRICULUM COMPLIANT)
8
COMPUTER SCIENCE 8 - MODULE 14
Name: ____________________________________________ Date: ____________________________________________

Teacher: __________________________________________ Grade & Section: _________________________________

ANSWER SHEET
I. What’s More.
Direction: Identify the following questions (refer to page 7). [10 points]

1. 6.
2. 7.
3. 8.
4. 9.
5. 10.

II. What I Have Learned


Direction: Enumeration. [10 points]

1-4: Enumerate the properties/methods of the window object.


5-10: Enumerate atleast 6 the properties/methods of the window object.

1. 6.
2. 7.
3. 8.
4. 9.
5. 10.

III. What I Can Do [10 points]


Direction: Explain document object on own words. [10 points]
____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

IV. Assessment [20 points]

Direction: Explain what the code does. (Practice the code and do not submit your answer).
____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

COMPUTER SCIENCE 8: Quarter 3 - Module 14 (2021-2022)


PHILIPPINE INTEGRATED SCHOOL FOUNDATION, INC. (PISFI)
Reference: Fundamentals of Web Application Development (K TO 12 CURRICULUM COMPLIANT)
9

You might also like