Grade

11

TVL-ICT
PROGRAMMING .NET TECHNOLOGY NC
III
QUARTER 2 – MODULE 3
Create HTML5 document using advanced
techniques with JavaScript and CSS3
Write JavaScript code that manipulates the
HTML DOM and handle events
 I. INTRODUCTION
In this lesson you will:
 learn how to create function in JavaScript.
 learn how to call a function.
 learn how to identify and use JavaScript variable scope in more depth.
 learn how to use JavaScript operators.

In the previous lesson, you have learned the JavaScript syntax and how to insert it into
HMTL document. Most web applications that solve real-world problems are much larger than
the trivial project that are presented in the previous module. Real-world apps require hundreds
of thousands or even many millions of lines of code to perform several tasks and to make it
modern program.

II. CONTENT

Web developers develop and maintain a large web app by constructing it from small,
simple pieces. They modularize the app by separating its tasks into self contained units. There
are several motivations for modularizing an app by means of methods or function. One is
the divide and conquer approach.

In this module, we study the functions in simple way. We emphasize how to create
user-define functions, declare and use functions to facilitate the design, implementation,
operation and maintenance of web apps in JavaScript coding.

A function is a group of reusable code which can be called anywhere in your program.
This eliminates the need of writing the same code again and again. It helps programmers in
writing modular codes. Functions allow a programmer to divide a big program into a number
of small and manageable functions.
(https://www.tutorialspoint.com/javascript/javascript_functions.htm)
JavaScript also supports all the features necessary to write modular code using
functions like Java, C#, and other programming languages. You have already seen functions
like alert() and write() in the earlier module. We were using these functions again and again,
but they had been written in core JavaScript only once. JavaScript allows us to write our own
functions as well.

Defining function in JavaScript

<script type = "text/javascript">

function functionName(parameter) {
//statements
}

</script>

To define a function in JavaScript we use the function keyword inside the script element,
followed by a unique function name, a list of parameters (that might be empty), and a
statement block surrounded by curly braces.

1
Sample function to display message in pop-window.
function ShowMessage() {
alert( 'Hello SHS ICT!' );
}
Our new function can be called by its name: ShowMessage()
<script type = "text/javascript">

function ShowMessage() {
alert( 'Hello SHS ICT!' );
}
ShowMessage(); //calling the function.
</script>

The call showMessage() executes the code of the function

Variable
In the previous lesson, you have learned how to declare variables using the var
keyword. Storing a value in a variable is called variable initialization. Use the var keyword
only for declaration or initialization, once for the existence of any variable name in a
document. You should not re-declare same variable twice. JavaScript variable can hold a
value of any data type. Unlike Java and C# languages, you don't have to tell JavaScript
during variable declaration what type of value the variable will hold.
JavaScript Variable Scope
The scope of a variable is the region of your program in which it is defined.
Global Variables − A global variable has global scope which means it can be defined
anywhere in your JavaScript code.
Local Variables − A local variable will be visible only within a function where it is defined.
Function parameters are always local to that function.

2
 A. Global Variable declaration
var userName = “Beshi”;
function ShowMessage() {
var message = 'Hello, ' + userName;
alert(message);
}
ShowMessage(); // Hello, Beshi

B. Local Variable declaration

function ShowMessage() {
var message = "Hello SHS ICT!"; // local variable
alert( message );
}
ShowMessage(); // Hello SHS ICT!
alert( message ); // <-- Error! The variable is local to the function

JavaScript Arithmetic Operators

You can think of operators as the “verb” to an expression’s “noun.” That is, an
expression is a thing that results in a value; an operator is something you do to produce a
value. The outcome in both cases is a value. We’ll start our discussion of operators with
arithmetic operators: however, you may feel about math, most people have some experience
with arithmetic operators, so they are an intuitive place to start.

Operator Description Example

+ Addition (also 5+3
string
concatenation)
- Subtraction 5-3
/ Division 8/2
* Multiplication 5*3
% Remainder 5%3
++ Post-increment x++ // increments x by one, and evaluates to value of x
before the increment
++ Pre-increment ++x // increments x by one, and evaluates to the new
value
-- Pre-decrement --x // decrements x by one, and evaluates to the new
value
Post-decrement x-- // decrements x by one, and evaluates to value of x
before the decrement

3
The following code shows how to use arithmetic operators in JavaScript.
<html>
<body>

<script type = "text/javascript">

function Compute(){
var a = 33;
var b = 10;
var c = "Test";
var linebreak = "<br />";

document.write("a + b = ");
result = a + b;
document.write(result);
document.write(linebreak);

document.write("a - b = ");
result = a - b;
document.write(result);
document.write(linebreak);

document.write("a / b = ");
result = a / b;
document.write(result);
document.write(linebreak);

document.write("a % b = ");
result = a % b;
document.write(result);
document.write(linebreak);

document.write("a + b + c = ");
result = a + b + c;
document.write(result);
document.write(linebreak);

a = ++a;
document.write("++a = ");
result = ++a;
document.write(result);
document.write(linebreak);

b = --b;
document.write("--b = ");
result = --b;
document.write(result);
document.write(linebreak);
}
Compute();
</script>

</body>
</html>

4
Output
a + b = 43
a - b = 23
a / b = 3.3
a%b=3
a + b + c = 43Test
++a = 35
--b = 8

III. EXERCISES

A. Direction: Complete the source code to display the message “JavaScript is

fun” into a pop-window using alert() method.

<html>
<head>
<title> Basic JavaScript </title>
<script type= “text/javascript”>

function sms(){

</script>
</head>
<body>

</body>
</html>

B. Direction: Write a JavaScript function to compute the sum of variable a and b

and store its result to variable c.

IV. SUMMATIVE

Write all your answers in the ANSWER SHEET attached with this module.

A. Direction: Select the letter of the correct answer.

_____1. To assign the value “red” to the variable color, the correct syntax is
a. var color= “red”
b. var fruit = var =red
c. var fruit= “red”: color
d. None of the above
_____2. To create a variable student, the correct syntax is

5
 a. var “student”
b. var student
c. student
d. var
_____3. To assign the value of the variable gender, the correct syntax is
a. var gender= “FEMALE”
b. gender var
c. var
d. alert(gender)
_____4. To declare a variable y with a value of 10, the syntax is
a. var y=10;
b. y;10
c. y:10
d. y+10
_____5. The following syntax are correct except one.
a. var y=5;
b. var y;
c. integer x;
d. xy
_____6. What keyword use to declare a variable?

a. var
b. :
c. =
d. me
_____7. The keyword use to create a method name person.
a. script
b. function
c. alert()
d. body
_____8. Which of the following syntax is correct?
a. var person()
b. function person() { }
c. var person John
d. none of the above
_____9. To display a message that will pop on the browser
a. innerHTML
b. var
c. alert();
d. window
_____10. Declare variable x with value of 10.

6
 a. var x=10;
b. var x 10
c. x==10
d. var 10 x

B. Directions: Write “VALID” if the syntax is correct otherwise write “INVALID” if it is

incorrect. Write your answer on the space provided.
1. var x=true;
2. var x=true+10
3. alert (x);
4. function add(){}
5. function display {}

PERFORMANCE TASK
Direction: Write a JavaScript function name Counter to display numbers from 1 to 10. The
numbers should be displayed in element <p id= “test”></p>

7
NAME: ___________________________________ SCORE: ________
SUBJECT TEACHER: _______________________ GRADE/SECTION: ________

SUMMATIVE TEST ANSWER SHEET

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

B.
1. __________
2. __________
3. __________
4. __________
5. __________

PERFORMANCE TASK

8
ANSWER KEY
Exercises
A.
<html>
<head>
<title> Basic JavaScript </title>
<script type= “text/javascript”>

function sms(){

alert(“JavaScript is fun”)
}

</script>
</head>
sms();
<body>
</body>
</html>

Exercise B.
<html>
<head>
<title> Basic JavaScript </title>
<script type= “text/javascript”>

function computeSum(){
var a;
var b;
var c;

c=a+b;

}
computeSum();
</script>
</head>
<body>

</body>
</html>

References:

Vid Antani: Mastering JavaScript

Ethan Brown: Learning JavaScript Third Edition
JavaScript . Info. Retrieved from https://javascript.info/function-basics