Scribd
Upload
33 views9 pages

Computer 8 Module 11

This document discusses JavaScript functions, events, and timing events. It explains that a function is a reusable block of code that can be called anywhere. Events are actions detected by JavaScript like clicks or mouse movements. Timing events allow code to execute at set time intervals using functions like setTimeout.

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

Computer 8 Module 11

This document discusses JavaScript functions, events, and timing events. It explains that a function is a reusable block of code that can be called anywhere. Events are actions detected by JavaScript like clicks or mouse movements. Timing events allow code to execute at set time intervals using functions like setTimeout.

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

COMPUTER SCIENCE

8
Fundamentals of Web
Application Development
Module 11 (Week 1 and 2)

Name of Student: Set (A or B):

Grade and Section: School Year: 2020-2021

Teacher: __________________ Date:


Lesson 2 Introduction to JAVASCRIPT

 Functions
 Events
 Timing Events

What is a function in javascript program?

What is an array in javascript program?

This lesson covers functions, events and timing events. A function is a collection of
statements which is reusable and may be called whenever it is needed. An event is an action
detected by Javascript. A timing events execute its code in a specified time interval.

Page | 2
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>
<script type = “text/javascript”>
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.
<script type = “text/javascript”>
function sum(a,b)
{
var c
c = parseFloat(a) + parseFloat(b)
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.
<script type = “text/javascript”>
function sum(a, b)
{
var c
c = parseFloat(a) + parseFloat(b)
alert(“The sum of the two value is” + c)
}

Page | 3
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) + parsefloat(b) b = a % 2
alert(c)
} if (b==0) alert (“EVEN”)
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.
<script type = “text/javascript>
function sum()
{
c = parseFloat(a) + parseFloat(b)
alert(“The sum of the two values is “ + c)
}

function oddoreven()
{
c = (a + b) % 2
if(b == 0) alert(“EVEN”)
else alert(“ODD”)
}

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>

Page | 4
<title>Functions</title>
<script type = “text/javascript”>
function sum(a, b)
{
var c
c = parseFloat(a) + parseFloat(b)
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>
</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>
<title>Functions</title>
<script type = “text/javascript”>
function sum(a, b)
{
var c
c = parseFloat(a) + parseFloat(b)
return c
}

function oddoreven(a)
{
var b
b = a % 2
if(b == 0) return “EVEN”
else return “ODD”
}
</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))

Page | 5
//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
onfocus
it or by using the Tab key
The object loses the focus. The focus is lost when another object is
onblur
given focus
onsubmit The submit button is clicked

onreset The reset button is clicked


The page is loaded. In Netscape, the onload event happens while
onload
the page is loading
onunload The page is closed

Page | 6
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)

Page | 7
COMPUTER SCIENCE – 8 (MODULE 11)

Name: ____________________________________________ Date:


Teacher: __________________________________________ Grade & Section:

Write the syntax of defining a javascript function and give one example.

Syntax:

Example:

What is the importance of using functions in a javascript program?

Give 3 examples of an event and its description

Page | 8
Direction: Identify the result or output of the code below. (Practice the code and do not submit
your answer).
1. Create an HTML file and name it as functions.html. Load it in a browser and view the source
code to open Notepad.
2. Enter the following in Notepad:
<html>
<head>
<title>Functions</title>
<script type = “text/javascript”>
function sum(a, b)
{
var c
c = parseFloat(a) + parseFloat(b)
return c
}

function oddoreven(a)
{
var b
b = a % 2
if(b == 0) return “EVEN”
else return “ODD”
}
</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>

3. Save the HTML file and refresh the page in the browser to view the changes. Enter the
values asked by the page.
4. Go back to Notepad and make some changes so that it will also display the cube of each
number entered. Add a function named cube() to handle the task and return the value needed.

Page | 9

You might also like