Grade

11

TVL-ICT
PROGRAMMING .NET TECHNOLOGY
NC III
QUARTER 2 – MODULE 5
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 use JavaScript Date object.
 learn how to use conditional statements (if else).
 learn how to use switch statement to perform a multiway branch.
 learn how to create JavaScript Array.
 learn how to use for loop to execute a block of code a number of
times.
In the previous lesson, you have learned the API document object model for
manipulating HTML. Manipulating the DOM allows you to create applications that update the
data of the page without needing a refresh. Also, you can create applications that are
customizable by the user and then change the layout of the page without a refresh. You can
drag, move, and delete elements. As we continue in this lesson, the next topics are using
how to use date object, statements and the loops in JavaScript.

II. CONTENT
Date Object

JavaScript provides Date object to work with date & time including days, months, years,
hours, minutes, seconds and milliseconds. The following example shows how to display
current date and time using Date object in JavaScript.

Date(); //current date

//or
var currentDate = new Date(); //current date
As you can see in the above example, we can display current date and time either by
calling Date as function or creating an object with new keyword.
In order to work with date other than current date and time, we must create a date object by
specifying different parameters in the Date constructor.

var dt = new Date();

var dt = new Date(milliseconds);
var dt = new Date('date string');
var dt = new Date(year, month[, date, hour, minute, second, millisecond]);

Conditional Statements

JavaScript includes if-else conditional statements to control the program flow,

similar to other programming languages.

1
 JavaScript includes following forms of if-else
conditions:

1. if condition
2. if-else condition
3. else if condition

The if statement is the fundamental control

statement that allows JavaScript to make
decisions and execute statements conditionally.

<script type = "text/javascript">

<!--
var age = 20;

if( age > 18 ) {

document.write("<b>Qualifies for driving</b>");
}
//-->
</script>

The 'if...else' statement is the next form of control statement that allows JavaScript to
execute statements in a more controlled way. Use else statement when you want to execute
the code every time when if condition evaluates to false.

var myGrade = 95;

var passGrade = 75;

if( myGrade > passGrade)

{
alert("Congratulations!");
}
else
{
alert("Sorry. Failed Grades.");
}

Use "else if" condition when you want to apply second level condition after if statement.
var myGrade = 95;
var passGrade = 75;

if( myGrade > passGrade)

{
alert("Great! You’re the best.");
}
else if( myGrade < passGrade)

{
alert("Sorry. You are failed.");
}

2
 //Next level condition
else if( myGrade == passGrade)

{
alert("Congratulations!");
}

Switch Statement

The switch is a conditional statement like if statement. Switch is useful when you
want to execute one of the multiple code blocks based on the return value of a specified
expression.

The getDay() method returns the weekday as a number between 0 and 6.

(Sunday=0, Monday=1, Tuesday=2 ..)

This example uses the weekday number to calculate the weekday name:

switch (new Date().getDay()) {

case 0:
day = "Sunday";
break;
case 1:
day = "Monday";
break;
case 2:
day = "Tuesday";
break;
case 3:
day = "Wednesday";
break;
case 4:
day = "Thursday";
break;
case 5:
day = "Friday";
break;
case 6:
day = "Saturday";
}
The result will be the date today.

JavaScript Array
You have learned that a variable can hold only one value, for example var i = 1,
we can assign only one literal value to i. We cannot assign multiple literal values to a
variable i. To overcome this problem, JavaScript provides an array.

An array is a special type of variable, which can store multiple values using special
syntax. Every value is associated with numeric index starting with 0. The following figure
illustrates how an array stores value.

3
 Values 100 25 Hello 300 42 10 -12 1 47 2

0 1 2 3 4 5 6 7 8 9
Index

Lower Upper
Bound Bound

The following example shows how to define and initialize an array using array literal
syntax.

var stringArray = ["one", "two", "three"];

var numericArray = [1, 2, 3, 4];

var mixedArray = [1, "two", "three", 4];

Array Constructor
You can initialize an array with Array constructor syntax using new keyword.
var stringArray = new Array();
stringArray[0] = "one";
stringArray[1] = "two";
stringArray[2] = "three";
stringArray[3] = "four";

Array includes "length" property which returns number of elements in the array.

Use for loop to access all the elements of an array using length property.

For Loops

JavaScript includes for loop like Java or C#. Use for loop to execute code
repeatedly.
The for loop requires following three parts.

• Initializer: Initialize a counter variable to start with

• Condition: specify a condition that must evaluate to true for next iteration
• Iteration: increase or decrease counter

for (var i = 0; i < 5; i++)

4
 {
console.log(i);
}
output

01234

Access Array using For Loop and display the output.

<script>
function TestArray()
{
var stringArray = new Array("one", "two", "three", "four");

for (var i = 0; i < stringArray.length ; i++)

{
document.write(stringArray[i] + “<br>”);
}
}
TestArray();
</script>

III. EXERCISES

A. Directions: Complete the source code below.

User Authentication.

<script>
var user= “ADMIN”
var pw= “12345”
var inputUser= ____________________________________;
var inputPassword= ____________________________________;

if (user == ________________ && pw == _____________)

{
alert(“Access granted!”);
}
else {
alert(“Access denied!”);
}

</script>

<body>
<input type = “text” id= “user” />
<input type = “text” id= “pw” />

5
 </body>

B. Direction: Complete the source code for date method.

1. Create a Date object and alert the current date and time.

var dt = ____________
alert(dt);
2. Use the correct Date method to extract the year out of a date object.

var year;
var dt=new Date();

year= _____________

3. Use the correct Date method to get the month (0-11) out of a date object.
var month;
var dt=new Date();

month= _____________
4. Use the correct Date method to set the year of a date object to 2020.
var dt=new Date();
dt= _____________

5. Convert the date today to a date string

var dt=new Date();
dt= _____________

IV. SUMMATIVE

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

A. Create an array of the following in JavaScript.

1. fruits [ apple, banana, mango, melon, oranges]

2. Use Array constructor.

colors [ red, green, blue, yellow]

B. Directions: Complete the source code below. Using for loop, iterate through
this array studentList = ["Arthan", "Dexter", "Erica", "Marcel"] to display all the
content in element <p id= “txt”>.

<body>
<h2>JavaScript For Loop</h2>

6
 <p id="txt"></p>

<script>
var studentList = ["Arthan", "Dexter", "Erica", "Marcel"];
var i;
var names=" ";
for(i=________; i< ________; i++){

names += studentList[____] +"<br>";

}
document.______________("txt").innerHTML = ______________;
</script>

</body>

PERFORMANCE TASK

Direction: Write a JavaScript function to determine if the month of February has 29

days or has 28 days base on the given year.
Month and Year No. of Days
1. February 1997
2. February 2001
3. February 2004
4. February 2008
5. February 2020
6. February 2024

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

SUMMATIVE TEST ANSWER SHEET

A.
1.

2.

B.

Performance Task

8
ANSWER KEY
EXERCISES
A.
<script>
var user= “ADMIN”
var pw= “12345”
var inputUser= document.getElementById(“user”).value;
var inputPassword= document.getElementById(“pw”).value;

if (user == inputUser && pw == inputPassword)

{
alert(“Access granted!”);
}
else {
alert(“Access denied!”);
}

</script>

<body>
<input type = “text” id= “user” />
<input type = “text” id= “pw” />

</body>

B.
1. var dt= new Date();
2. dt.getFullYear();
3. month = dt.getMonth();
4. dt.setFullYear(2020);
5. dt. toDateString();

References:

Vid Antani: Mastering JavaScript

Ethan Brown: Learning JavaScript Third Edition
JavaScript . Info. Retrieved from https://javascript.info/function-basics
W3Schools.com JavaScipt if else statement. Retrieved from
https://www.w3schools.com/js/js_if_else.asp
Tutorials point Date. Retrieved from
https://www.tutorialspoint.com/javascript/javascript_date_object.html