Computer 8 Module 12 and 13

COMPUTER 8
Fundamentals of Web
Application Development
Module 12 & 13 (Week 1, 2, & 3)
Introduction to
Lesson 2
Javascript
Name of Student: Set (A or B):

Grade and Section: School Year: 2020-2021
Teacher: __________________ Date:
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 Javascript Function
 Describe a Javascript Events
 Describe a Timing Events
Direction: Explain what is a javascript function?
What’s In
Direction: Explain what a javascript array is.
Direction: Give examples of javascript events.
M. FUNCTIONS
A function is a collection of statements. It is reusable and may be called whenever it is needed. A

function is created using the syntax:
function name(argument1, argument2, …, argumentN)
The name should follow the rules used in naming variables. The arguments or parameters are
optional. Functions can be declared both in the head and body section. However, it will be wise to declare
them in the head section to make sure that they will be loaded before they are called later by other scripts.
Below is an example of a function that displays a popup box whenever it is called. The function is
declared in the head but the actual script that uses the function is placed in the body.
<html>
<head>
<title>Functions</title>
<script type = “text/javascript”>
function thanks()
{
alert(“Thank you!”)
}
</script>
</head>
<body>
var a
var b
var c
a = prompt(“Please enter number”, 0 )
thanks()
b = prompt(“Please enter another number”, 0)
thanks()
c = parseFloat(a) + parseFloat(b)
document.write(“The sum of the values you entered is “,
c)
</script>
</body>
</html>
The next example shows a function that accepts arguments. The name of the function is sum() and accepts
two arguments using variable a and b.

function sum(a,b)
{
var c
alert(“The sum of the two values is “ + c)
}
</script>
The variables used in the function are local to the function. It means that the variables can only be used by
the function itself. The example below declares two functions named as sum() and oddoreven(). Both
have variables named as a and b.

function sum(a, b)
{
var c
alert(“The sum of the two value is” + c)
}
function oddoreven(a)
{
var b
b = a % 2
if(b == 0) alert(“EVEN”)
else alert(“ODD”)
}
</script>
Despite the names, the script will treat them locally and ignore the other variables in the other functions.
Such variables are called local variables. In the examples below, function sum(), has a, b and c as local
variables while function oddoreven() has variables, the local variable a and b.
function sum (a, b) function oddoreven (a, b)

{ {
var c var b
c = parsefloat(a) + b = a % 2
parsefloat(b) if (b==0) alert (“EVEN”)
alert(c) else alert (“ODD”)
} }
Variables declared in the main script or outside the functions can be accessed anywhere as long as the
page is open. These variables are called as global variables. Local variables are destroyed once all the
statements in the function have been executed.
The function below utilize the global variables declared in the script instead of creating their own.

function sum()
{
alert(“The sum of the two values is “ + c)
}
function oddoreven()
{
c = (a + b) % 2
}
var a, b, c
a = parseFloat(prompt(“Please enter a number”, 0))
b = parseFloat(prompt(“Please enter a number”, 0))
sum()
oddoreven()
</script>
While it is true that functions can use and rely on global variables, it very important that a function is
made independent and reusable. This means that you should be able to easily import and use the functions
that you create in your other scripts. This is made possible by making a function rely on its own set of
local variables.
The script below uses the sum() and oddoreven() functions to display the sum of two given numbers and
determine whether it is odd or even. Both functions are reusable.
<html>
<head>
function sum(a, b)
{
var c
alert(“The sum of the two value is “ + c)
}
{
var b
b = a % 2
}
</script>
</head>
<body>
<script type = “text/javascript>
var x
var y
x = parseFloat(prompt(“Please enter a number”, 0))
y = parseFloat(prompt(“Please enter another number”, 0))
sum (x,y)
c = x + y
oddoreven(c)
</script>
</body>
</html>
A function may be asked to return a value. You may use the value returned by a function in an expression
or simply store it in another variable. The script above may be improved by asking the functions to return
values rather than display them. The script below illustrates this:
<html>
<head>
function sum(a, b)
{
var c
return c
}
{
var b
b = a % 2
if(b == 0) return “EVEN”
else return “ODD”
}
</script>
</head>
<body>
<script type = “text/javascript>
var x
var y
//display the sum()

document.write(“The sum of the two values is “, sum(x,y))
document.write(“<br/> The sum is an”)
/*give the value returned by sum() to oddoreven() and use

alert() to display the value returned by oddoreven()*/
document.write(oddoreven(sum(x,y)))
document.write(“ number”)
</script>
</body>
</html>
The resulting page should be similar to the image below, assuming the values 2 and 5 were entered.
N. EVENTS
Events are actions detected by Javascript. You may use these event to perform Javascript statements or
triggers Javascript functions.
The following table contains the commonly used Javascript

EVENT DESCRIPTION
onmousedown The mouse button is pressed
onmouseup The mouse button is released
onmouseover The mouse pointer moves over an object
onmouseout The mouse pointer moved out from an object
onclick The mouse is clicked
ondblclick The mouse is double-clicked

The object gets the focus. The focus is given to an object by clicking it or by
onfocus
using the Tab key
The object loses the focus. The focus is lost when another object is given
onblur
focus
onsubmit The submit button is clicked
onreset The reset button is clicked

The page is loaded. In Netscape, the onload event happens while the page is
onload
loading
onunload The page is closed
O. TIMING EVENTS
The statements in a function are executed immediately once the function name is called. However, it is
also possible to have a function execute its code on a specified time interval. This is called timing events.
The following statements may be used to create or cancel timing events:

setTimeout() – used to execute code or function later after the given time
Syntax:
setTimeout(“statement”, milliseconds)
 statement – refers to a statement or function
 milliseconds – the time in milliseconds (1 second = 1000 milliseconds)
The setTimeout() function returns a value or timing information that should be saved for use by the
clearTimeout() function. The example below will display a popup box after 10 seconds. The timing
information is saved in variable t.
t = setTimeout(“alert(’10 seconds have passed’)”, 10000)
clearTimeout() – used to clear the timeout or cancel the timing event
Syntax:
clearTimeout(timingvariable)
 timingvariable – a variable that contains information about the timing event that was
saved using the setTimeout() function.
The example below clears the timeout right after it has been set
t = setTimeout(“alert(’10 seconds have passed’)”, 10000)
clearTimeout(t)
Direction: Identify the following questions. [10 points]
1. It is a collection of statements. It is reusable and may be called whenever it is needed.

2. An event when the mouse button is pressed.
3. An event when the mouse button is released.
4. An event when the mouse pointer moves over an object.
5. An event when the submit button is clicked.
6. An event when the reset button is clicked.
7. An event when the page is closed.
8. A function that execute its code on a specified time interval.
9. It returns a value or timing information that should be saved for use by the clearTimeout() function.
10. A variable that contains information about the timing event that was saved using the setTimeout() function.
Direction: Enumeration. [10 points]
1 – 10 List 10 JavaScript Events
Direction: Write the syntax of a javascript function and give 1 example. [10 points]
Direction: Identify the result or output of the code below, given the user’s input is 23 and 76.
1. Create an HTML file and name it as functions.html. Load it in a browser.
2. Open the file in Notepad to view the source code. Enter the following:
<html>
<head>
function sum(a, b)
{
var c
document.write(“The sum of the two values is “, c)
}
{
var b
b = a % 2
if(b == 0) document.write(“<br>The sum is an EVEN
number”)
else document.write(“<br>The sum is an ODD number”)
}
</script>
</head>
<body>
var x
var y
var total
sum(x,y)
c = x + y
oddoreven(c)
</script>
</body>
</html>
3. Save the HTML file and refresh the page in the browser to view the changes. Enter the values 23 and
76.
4. Identify the result of the javascript code with the two functions (sum and oddoreven). Write your
answer in the answer sheet.
COMPUTER SCIENCE 8 - MODULE 12 & 13
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. List 10 JavaScript Events [10 points]
1. 6.
2. 7.
3. 8.
4. 9.
5. 10.
III. What I Can Do [10 points]

Direction: Write the syntax of a javascript function and give 1 example. [10 points].
Syntax:
Example:
IV. Assessment [20 points]

Direction: Identify the result or output of the given javascript code (refer to page 8). [10 points]
Output/Result:
______________________________________
______________________________________
COMPUTER SCIENCE 8: Quarter 3 - Module 12 and 13 (2021-2022)

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

Computer 8 Module 12 and 13

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Computer 8 Module 12 and 13

Uploaded by

Copyright:

Available Formats

COMPUTER 8

Name of Student: Set (A or B):

What I Need To Know

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

Direction: Explain what is a javascript function?

Direction: Explain what a javascript array is.

Direction: Give examples of javascript events.

A function is a collection of statements. It is reusable and may be called whenever it is needed. A

<script type = “text/javascript”>

<script type = “text/javascript”>

function sum (a, b) function oddoreven (a, b)

<script type = “text/javascript”>

//display the sum()

/*give the value returned by sum() to oddoreven() and use

The following table contains the commonly used Javascript

onmousedown The mouse button is pressed

onmouseup The mouse button is released

onmouseover The mouse pointer moves over an object

onmouseout The mouse pointer moved out from an object

onclick The mouse is clicked

ondblclick The mouse is double-clicked

onreset The reset button is clicked

The following statements may be used to create or cancel timing events:

t = setTimeout(“alert(’10 seconds have passed’)”, 10000)

clearTimeout() – used to clear the timeout or cancel the timing event

Direction: Identify the following questions. [10 points]

1. It is a collection of statements. It is reusable and may be called whenever it is needed.

Direction: Enumeration. [10 points]

1 – 10 List 10 JavaScript Events

1. Create an HTML file and name it as functions.html. Load it in a browser.

Teacher: __________________________________________ Grade & Section: _________________________________

II. What I Have Learned

III. What I Can Do [10 points]

IV. Assessment [20 points]

COMPUTER SCIENCE 8: Quarter 3 - Module 12 and 13 (2021-2022)

You might also like

Teacher: __________ Grade & Section: _