MARY IMMACULATE SCHOOL(PARAÑAQUE), INC.

Run by the Missionary Sisters of Jesus the Eternal Priest, (MGES)

Sta. Natividad St., San Antonio Valley 6, Barangay San Isidro
Parañaque City, 1707 Philippines
Email: [email protected]; Tel. 8820-4456
A.Y. 2023-2024

HAPPY D WORKSHOP
SYLLABUS FOR SCHOOL YEAR 2022-2023

I. WEB PROGRAMMING (JAVASCRIPT)

II. COURSE DESCRIPTION

The Internet is a technology that has redefined so many aspects of the society. It has introduced us to new ways of presenting information, communicating with
people, and delivering products and services. The World Wide Web became the most widely used Internet tool. People of different ages and backgrounds use the Web for
communication, education, business, and entertainment.

This course is designed to provide the students with the skills in using the Internet technology and designing interactive websites. It will also introduce the students to
the basic concepts applied in creating programs for the Web. Students will be able to design and create interactive web pages using JavaScript.

III. GENERAL OBJECTIVES

At the end of the scholastic year, the first-year students are expected to:
1. Define Internet and other terms related to it;
2. Access resources using the Web;
3. Create and design websites using HTML;
4. Add interactive elements to the page;
5. Manipulate form data using JavaScript;
6. Apply the control structures to the script;
7. Define project’s goal and limiting factors;
1
Updated as of August 16, 2021
 8. Observe the proper etiquette in using the Internet; and
9. Recognize the importance of copyright when using a resource from the Web.

IV. TARGET SCOPE

Lesson 1: The Internet Lesson 16: Using Nested if
Lesson 2: Introduction to HTML Lesson 17: The switch Statement
Lesson 3: Document Organizers Lesson 18: Using Loops
Lesson 4: Text Formatting Lesson 19: More Loops
Lesson 5: Using Lists Lesson 20: Arrays
Lesson 6: Images and Links Lesson 21: Functions
Lesson 7: Tables Lesson 22: Events & Event Handlers
Lesson 8: Introduction to JavaScript Lesson 23: JavaScript Objects
Lesson 9: Displaying Messages Lesson 24: Document Object Model
Lesson 10: HTML Tags & Escape Characters Lesson 25: The window Object
Lesson 11: Data & Variables Lesson 26: The Document Element
Lesson 12: Expression and Operators Lesson 27: HTML Form
Lesson 13: Controlling the Program Flow Lesson 28: Accessing Form Elements
Lesson 14: Decision Making in JavaScript Lesson 29: Checkboxes and Radio Buttons
Lesson 15: Using If/Else Lesson 30: Using List Boxes

2
V. COURSE CONTENT
TIME REFERENCES & VALUES
SUBJECT MATTER OBJECTIVES STRATEGIES/ ACTIVITIES EVALUATION
FRAME MATERIALS INTEGRATION

1 Session Lesson 1 1. Define what the Internet is;  Web Programming  Motivation – Ask the students  Determination to  Written
(45 mins) 1. What is the Internet? 2. Recognize the importance (JavaScript) Student the following questions: What learn assessment
of the Internet; Manual, pp.1-6 are the uses of the Internet?  Cooperation pp. 5-6
2. How the Internet Works
 Presentation File: How does the Internet influence
3. Domain Names 3. Identify the types of servers  Conformity to rules
WPJS-Lesson01- their life?
and their corresponding and regulations
4. World Wide Web Presentation  Lecture/Discussion
protocols;
5. Browser  Sharing
4. Describe the features of the
World Wide Web;
5. Identify the parts of the
domain name;
6. Explain the function of the
browser; and
7. Participate actively in the
discussion.

3
 TIME REFERENCES & VALUES
SUBJECT MATTER OBJECTIVES STRATEGIES/ ACTIVITIES EVALUATION
FRAME MATERIALS INTEGRATION

1 Session Lesson 2 1. Differentiate web pages  Web Programming  Review – Ask the students the  Perseverance in  Written
(45 mins) 1. What is a Web Page? from HTML; (JavaScript) Student following questions: What is the learning Assessment
2. Compare the Manual, pp. 7-11 Internet? Can you give an  Responsibility p. 10
2. What is HTML?
characteristics of the types  Presentation File: example of a domain name?  Hands-on
3. Types of HTML What are the parts of a domain  Obedience
of HTML tag with each WPJS-Lesson02- Exercise
Commands/Tags name? What is the WWW? Can  Punctuality
other; Presentation p. 11
4. HTML Document Basic you name the parts of the
3. Create a web page by  Sample File (.html) –
Structure Google Chrome interface?
using the illustrated HTML sample
document basic structure;  Motivation – Show examples of
 Data File – Lesson02 – Web pages that the students will
4. Follow the steps in saving activity.txt
and viewing the web page; be creating during the course
and  Output File (.html) –  Lecture/Discussion
activity
5. Complete the required  Demonstration – Steps in
activity. creating, viewing, and editing a
web page
 Hands-on Activity – Creating a
web page

1 Session Lesson 3 1. Identify the tags that are  Web Programming  Review – Ask the students to  Being organized  Written
(45 mins) 1. Document Organizers used to organize HTML (JavaScript) Student define the following terms: Web  Obedience Assessment
documents; Manual, pp. 12-16 page, homepage, HTML, HTML p. 15
tags, and HTML document  Excellence
2. Apply tag attributes to  Presentation File:  Hands-on
enhance the appearance of WPJS-Lesson03- structure Exercise
the text; Presentation  Motivation –Ask the students to p. 16
3. Create the required web  Sample Files (html) – input the examples on the
page using the document rose manual and to describe the
organizers; and appearance of the output.
 Data File – Lesson03-
4. Practice the steps in apple.txt  Lecture/Discussion
creating, saving, and  Hands-on Activity – Using HTML
viewing the HTML  Output File (html) –
apple tags in organizing the document
document.

4
 TIME REFERENCES & VALUES
SUBJECT MATTER OBJECTIVES STRATEGIES/ ACTIVITIES EVALUATION
FRAME MATERIALS INTEGRATION

1 Session Lesson 4 1. Identify the color model  Web Programming  Review – Ask the students to  Respect for other  Written
(45 mins) 1. Using Colors used for web pages; (JavaScript) Student identify the functions of each people Assessment
2. Define what Web Safe Manual, pp.17-22 document organizer command.  Diligence p. 20
2. HTML Tags for Text
Formatting colors are;  Presentation File:  Motivation – Color Perception  Hands-on
 Appreciation of
3. Define what is a WPJS-Lesson04- Test beauty Exercise
hexadecimal code; Presentation  Lecture/Discussion pp. 21-22
4. Compare color names with  Sample Files (html) –  Hands-on Activity – Changing
hexadecimal codes; pear page colors, formatting text
5. Change the colors of the  Data File – Lesson04-
web page; poem.txt, peach.txt
6. Format the text; and  Output File (html) –
7. Complete all drills and poem, peach
exercises.

1 Session Lesson 5 1. Identify the tags that are  Web Programming  Review – Ask the students to  Determination to  Written
(45 mins) 1. HTML List Tags used to insert the list; (JavaScript) Student describe the codes used in learn Assessment
2. Differentiate each type of Manual, pp. 23-27 applying colors to the Web page.  Insight p. 25
list with each other;  Presentation File:  Motivation – Ask the student to  Hands-on
 Kindness
3. Create web pages that WPJS-Lesson05- identify the most popular colors Exercise
utilize lists; and Presentation in the class. pp. 26-27
4. Recognize the importance  Sample Files (html) –  Lecture/Discussion
of a list in formatting the plumcher  Hands-on Activity – Creating a
HTML document.  Data File – Lesson05- Web page containing list
listvitamins.txt, family.txt
 Output File (html) –
listvitamins, rosefamily

5
 TIME REFERENCES & VALUES
SUBJECT MATTER OBJECTIVES STRATEGIES/ ACTIVITIES EVALUATION
FRAME MATERIALS INTEGRATION

2 Session Lesson 6 1. Define the function of the  Web Programming  Review – Ask the students to  Commitment to  Written
(90 mins) 1. Using Graphics <img> tag; (JavaScript) Student identify the tags used in creating excellence Assessment
2. Enumerate the attributes of Manual, pp. 28-34 lists.  Creativity p. 33
2. Adding Links
the <img> tag;  Presentation File:  Motivation – Show to the class a  Hands-on
 Responsibility
3. Insert an image to a web WPJS-Lesson06- picture and ask the students to Exercise
Presentation create a story based on the  Discipline p. 34
page;
4. Define what a hyperlink is;  Sample Files (html) – story.
5. List the types of links; cherry, morerose  Lecture/Discussion
6. Create web pages that  Data File – Lesson06-  Hands-on Activity – Adding and
utilize images and links; vitamins.txt, family.txt formatting graphics, adding links
and  Output File (html) –
7. Complete the required drills vitamins, family
and exercises.

1 Session Lesson 7 1. Identify the function of the  Web Programming  Review – Ask the students to  Perseverance in  Written
(45 mins) 1. The <TABLE> tag <table>…</table> tag; (JavaScript) Student identify the function and learning Assessment
2. Name the tags that define Manual, pp. 35-38 attributes of the <img> and <a>  Being organized p. 37
2. Table Attributes
the rows and columns of  Presentation File: tags  Hands-on
 Punctuality
the table; WPJS-Lesson07-  Motivation – Tic-Tac-Toe Exercise
Presentation  Discipline p. 38
3. Format the appearance of  Lecture/Discussion
the table by changing its  Sample Files (html) –  Hands-on Activity – Creating
attributes; and table and formatting tables
4. Create a web page that  Data File – Lesson07-
features the use of a table. table-guide.txt
 Output File (html) –
table

6
 TIME REFERENCES & VALUES
SUBJECT MATTER OBJECTIVES STRATEGIES/ ACTIVITIES EVALUATION
FRAME MATERIALS INTEGRATION

1 Session Lesson 8 1. Define what JavaScript is;  Web Programming  Review – Ask the students the  Respect for history  Written
(45 mins) 1. What is JavaScript? 2. Identify the significance of (JavaScript) Student following questions: What are  Pursuit of truth Assessment
each milestone in the Manual, pp. 39-44 the uses of tables? What are the p. 43
2. History of JavaScript  Responsibility
JavaScript history;  Presentation File: tags used to create a table?  Hands-on
3. Development Tools  Diligence
3. List the tools needed to WPJS-Lesson08-  Motivation – Philippine history Exercise
4. Inserting JavaScript Presentation quiz p. 44
create JavaScript code;
Code
4. Insert JavaScript code in an  Sample Files (html) –  Lecture/Discussion
5. Your First JavaScript hello
HTML code; and  Hands-on Activity – Creating a
Program
5. Complete all the required  Data File – Lesson08- simple JavaScript program,
6. JavaScript Comments
drills and activities. javascript01.txt using the different types of
 Output File (html) – comments
activity01

1 Session Lesson 9 1. Enumerate the JavaScript  Web Programming  Review & Motivation – How do  Determination to  Written
(45 mins) 1. document.writeln() output commands; (JavaScript) Student you spell S-C-R-I-P-T? learn Assessment
2. Differentiate Manual, pp. 45-48  Lecture/Discussion  Cooperation and p. 47
2. document.write()
document.write() from  Presentation File: collaboration  Hands-on
3. alert()  Hands-on Activity – Displaying
document.writeln(); WPJS-Lesson09- Exercise
messages using  Tolerance of
3. Observe the guidelines in Presentation document.write(), difference p. 48
using the alert() command;  Sample Files (html) – document.writeln(), and alert()  Discipline
and sample01, sample02, commands
4. Complete the required drills sample03
and exercises.  Output File (html) –
activity02, activity02a

7
 TIME REFERENCES & VALUES
SUBJECT MATTER OBJECTIVES STRATEGIES/ ACTIVITIES EVALUATION
FRAME MATERIALS INTEGRATION

1 Session Lesson 10 1. Demonstrate the method of  Web Programming  Review – Ask the students to  Cooperation  Written
(45 mins) 1. Using HTML Tags in inserting HTML code inside (JavaScript) Student identify the commands used to  Equality Assessment
JavaScript the JavaScript code; Manual, pp. 49-52 display messages. p. 51
 Self-confidence
2. Using the Escape 2. Create a script that  Presentation File:  Motivation – Show to the class a  Hands-on
Character interprets HTML WPJS-Lesson10- set of common symbols and ask Exercise
commands; Presentation them to describe the meaning of p. 52
3. List the escape characters;  Sample Files (html) – each symbol
4. Use escape characters on sample04, sample05  Lecture/Discussion
the script; and  Output File (html) –  Hands-on Activity – Using
5. Participate actively during activity03 escape characters
the discussion.

1 Session Lesson 11 1. Enumerate JavaScript  Web Programming  Review – Ask the students to  Responsibility  Written
(45 mins) 1. JavaScript Data Types data types; (JavaScript) Student identify the escape characters  Confidence in Assessment
2. Follow the rules in creating Manual, pp. 53-58 that is applicable for expressing ideas p. 57
2. Creating Variables
variable names;  Presentation File: document.write() and alert()  Hands-on
3. Rules for Creating commands  Interdependence
Variable Names 3. List the JavaScript WPJS-Lesson11- Exercise
reserved words; Presentation  Motivation – Ask the students p. 58
4. prompt() what is the most important data
4. Identify the syntax of the  Sample Files (html) –
5. Built-in Variables sample06, sample07 in their life.
prompt() command;
5. Create scripts that accept  Output File (html) –  Lecture/Discussion
and display data; and activity04  Hands-on Activity – Creating
6. Complete all the required and using variables, using the
drills and exercises. prompt command to get input
from the user

8
 TIME REFERENCES & VALUES
SUBJECT MATTER OBJECTIVES STRATEGIES/ ACTIVITIES EVALUATION
FRAME MATERIALS INTEGRATION

2 Sessions Lesson 12 1. Define what an expression  Web Programming  Review – Ask the students to  Commitment to  Written
(90 mins) 1. What is an Expression? is; (JavaScript) Student identify the data types in excellence Assessment
2. Differentiate operators from Manual, pp. 59-66 JavaScript.  Self-reliance p. 65
2. Arithmetic Operators
operands;  Presentation File:  Motivation – Ask the students to  Hands-on
3. Assignment Operators  Appreciation of
3. Use the operators in WPJS-Lesson12- solve a mathematical problem. diversity Exercise
4. String Operator Presentation p. 66
manipulating the data;  Lecture/Discussion
5. Data Conversions  Confidence in
4. Convert string data to  Sample Files (html) –  Hands-on Activity – Creating expressing ideas
Commands sample08, sample09,
integer or floating point Web pages that contain contents
6. Math-Related number; sample10 that allow the users to solve
Commands
5. Describe the functions of  Output File (html) – mathematical problems
Math.round() and activity05, activity05a,
Math.random(); and activity05b
6. Shows self-reliance when
working independently.

1 Session Lesson 13 1. Define what a control  Web Programming  Review – Ask the students the  Diligence  Written
(45 mins) 1. Sequence Control structure is; (JavaScript) Student students to answer the following  Discipline Assessment
Structure 2. Describe how program flow Manual, pp. 67-70 questions: What is an p. 70
expression? Can you give an  Insight
2. Selection Control is controlled by each type of  Presentation File:
the control structure; and WPJS-Lesson13- example of an expression? What  Accountability for
Structure
Presentation is the difference between actions
3. Repetition Control 3. Listen attentively to the
operators and operands?
Structure presentation of topics.
 Motivation – Ask the students to
identify the synonyms of the
words control and structure.
 Lecture/Discussion

9
 TIME REFERENCES & VALUES
SUBJECT MATTER OBJECTIVES STRATEGIES/ ACTIVITIES EVALUATION
FRAME MATERIALS INTEGRATION

1 Session Lesson 14 1. Enumerate the symbols  Web Programming  Review – Ask the students to  Respect for  Written
(45 mins) 1. Comparison Operators that represent the (JavaScript) Student identify the types of control individual Assessment
comparison and logical Manual, pp. 71-75 structures. differences p. 74
2. if Statement
operators;  Presentation File:  Motivation – Administer a True  Responsibility  Hands-on
3. Logical Operators
2. Give examples of WPJS-Lesson14- or False quiz Exercise
4. confirm()  Discipline
conditions that use the Presentation p. 75
 Lecture/Discussion  Creativity
comparison and logical
 Sample Files (html) –  Hands-on Activity – Creating a
operators;  Critical thinking
sample11, sample12 JavaScript program that
3. Define the function and
 Output File (html) – illustrates the uses of the if
syntax of the if statement;
activity06 statement and relational
4. Identify the syntax of the operators
confirm() command;
5. Create a script that uses
the if statement and the
confirm() command; and
6. Complete all the required
drills and exercises.

1 Session Lesson 15 1. Define the syntax of the  Web Programming  Review – Identify the different  Determination to  Hands-on
(45 mins) 1. If…else Statement if/else statement; (JavaScript) Student relational and logical operators learn Exercise
2. Diagram the flow of control Manual, pp. 76-80  Motivation – Present to the class  Self-respect p. 78
in an if/else statement; and  Presentation File: scenarios that require them to  Hands-on
 Self-confidence
3. Create scripts that feature WPJS-Lesson15- make a decision. Exercise
Presentation  Discipline pp. 79-80
the use of the if/else  Lecture/Discussion
statement.  Sample Files (html) –  Hands-on Activity – Creating a
sample13, sample14, JavaScript program that
 Output File (html) – illustrates the function of the if…
activity07, activity08 else statement
 Cooperative Learning – Peer
tutoring

10
 TIME REFERENCES & VALUES
SUBJECT MATTER OBJECTIVES STRATEGIES/ ACTIVITIES EVALUATION
FRAME MATERIALS INTEGRATION

1 Session Lesson 16 1. Illustrate the flow of control  Web Programming  Review – Ask the students what  Interdependence  Hands-on
(45 mins) 1. Nested if in the nested if; (JavaScript) Student are the uses of the if…else  Trust Exercise
2. Identify the syntax of the Manual, pp. 81-84 statement. p. 83
 Honesty
nested if; and  Presentation File:  Motivation – Present to the class  Hands-on
3. Create scripts that evaluate WPJS-Lesson16- scenarios that require them to Exercise
the conditions using nested Presentation make choices based on a set of p. 84
if.  Sample Files (html) – options.
sample15, sample16,  Lecture/Discussion
 Output File (html) –  Hands-on Activity – Creating a
activity09, activity10 JavaScript program that
illustrates the function of the
nested if statement
 Cooperative Learning – Peer
tutoring

1 Session Lesson 17 1. Differentiate nested if from  Web Programming  Review – Ask the students the  Faith  Hands-on
(45 mins) 1. Switch Statement the switch statement; (JavaScript) Student different ways they can  Patience Exercise
2. Draw the diagram of the Manual, pp. 85-87 implement the nested if. p. 86
 Perseverance
flow of control in a switch  Presentation File:  Motivation – Show to the class a  Hands-on
statement; and WPJS-Lesson17- set of pictures and ask each Exercise
3. Create scripts that evaluate Presentation student to select a picture that p. 87
multiple conditions using  Sample Files (html) – best describes him/her.
the switch statement. sample17, sample16  Lecture/Discussion
 Data File (html) –  Hands-on Activity – Creating a
activity09 JavaScript program that
 Output File (html) – illustrates the function of the
activity11, activity12 switch statement

11
 TIME REFERENCES & VALUES
SUBJECT MATTER OBJECTIVES STRATEGIES/ ACTIVITIES EVALUATION
FRAME MATERIALS INTEGRATION

2 Sessions Lesson 18 1. Define what a loop is;  Web Programming  Review – Ask the student to  Commitment to  Written
(90 mins) 1. What is a Loop? 2. Compare the while (JavaScript) Student describe the difference between excellence Assessment
statement with the do… Manual, pp. 88-93 if...else statement and switch  Discipline p. 92
2. while Statement
while statement;  Presentation File: statement  Hands-on
3. do…while Statement  Punctuality
3. Identify the syntax of the WPJS-Lesson18-  Motivation – Ask the students to Exercise
Presentation create a program that will  Cooperation p. 93
while and do…while
statements;  Sample Files (html) – display their names 20 times.  Respect for
4. Create programs that utilize sample18, sample19  Lecture/Discussion teacher
the while and the do…while  Output File (html) –  Hands-on Activity – Creating a
statements; and activity13 JavaScript program that
5. Participate actively in the illustrates the functions of the
class discussion. while and do…while statements

1 Session Lesson 19 1. Define the syntax of the for,  Web Programming  Review – Ask the student to  Independence  Written
(45 mins) 1. for Statement break, and continue (JavaScript) Student identify the difference between  Responsibility Assessment
statements; Manual, pp. 94-98 the while statement and the p. 97
2. break Statement  Accountability
2. Create programs that utilize  Presentation File: do…while statement.  Hands-on
3. continue Statement
the for, break, and continue WPJS-Lesson19-  Motivation – Ask the students to Exercise
statements; and Presentation identify the meaning of the p. 98
3. Work independently in  Sample Files (html) – following quotation: There is
completing all the required sample20, break, REPETITION everywhere and
drills and exercises. continue nothing is found only once in the
world. – Johann Wolfgang Von
 Data File (html) – Goethe
activity13
 Lecture/Discussion
 Output File (html) –
activity14  Hands-on Activity – Create
JavaScript programs that
illustrate the functions of the for,
break, and continue statements
 Cooperative Learning – Peer
tutoring

12
 TIME REFERENCES & VALUES
SUBJECT MATTER OBJECTIVES STRATEGIES/ ACTIVITIES EVALUATION
FRAME MATERIALS INTEGRATION

1 Session Lesson 20 1. Define what an array is;  Web Programming  Review – Ask the students to  Courage to stand  Written
(45 mins) 1. What is an Array? 2. Differentiate an array from (JavaScript) Student identify the commands used to for what is right Assessment
a variable; Manual, pp. 99-103 implement the repetition control  Cooperation p. 102
2. Using for Statement in
 Presentation File: structure.  Hands-on
Arrays 3. Identify the method of  Discipline
accessing each element of WPJS-Lesson20-  Motivation – Using the for loop, Exercise
an array; Presentation ask the students to create a p. 103
4. Create a script that  Sample Files (html) – program that will ask the user to
accesses and manipulates sample21, sample22 input 10 names.
the elements of the arrays  Output File (html) –  Lecture/Discussion
using the for statement; and activity15, activity15a  Hands-on Activity – Creating an
5. Participate actively in the array, using the for statement in
discussion. manipulating the contents of an
array

1 Session Lesson 21 1. Define what function is;  Web Programming  Review – Ask the students to  Determination to  Written
(45 mins) 1. What is a Function? 2. Create a program that (JavaScript) Student identify the function of an array. learn Assessment
contains codes that call Manual, pp. 104-112  Motivation – Ask the students to  Self-worth p. 107
2. Calling a Function
functions;  Presentation File: solve a set of anagrams.  Hands-on
3. Function with Passing  Self-reliance
Parameters 3. Explain the techniques in WPJS-Lesson21-  Lecture/Discussion Exercise
Presentation  Respect for others pp. 108-110
passing data from one
4. return Statement  Hands-on Activity – Creating a
function to another function;  Sample Files (html) –  Hands-on
JavaScript program that defines
4. Create a function that sample23, sample24, and calls a function Exercise
passes data to another sample25 pp. 111-112
function; and  Cooperative Learning – Peer
 Output File (html) – tutoring
5. Show self-reliance when activity16, activity16a,
completing the required activity16b
drills and exercise.

13
 TIME REFERENCES & VALUES
SUBJECT MATTER OBJECTIVES STRATEGIES/ ACTIVITIES EVALUATION
FRAME MATERIALS INTEGRATION

1 Session Lesson 22 1. Differentiate event from  Web Programming  Motivation – Ask the students to  Empathy  Written
(45 mins) 1. What is an Event? event handlers; (JavaScript) Student describe the most important  Creativity Assessment
2. List the common JavaScript Manual, pp. 113-116 event in their life. p. 115
2. Common JavaScript  Discipline
Events and Event events and their  Presentation File:  Lecture/Discussion  Hands-on
corresponding event WPJS-Lesson22-  Cooperation Exercise
Handlers  Hands-on Activity – Creating a
handlers; Presentation p. 116
JavaScript program that
3. Create scripts that will be  Sample Files (html) – illustrates the effects of events
launched using an event; sample26
and
 Data File (html) – rose
4. Identify the importance of
event handlers in creating  Output File (html) –
JavaScript programs. activity17

1 Session Lesson 23 1. Define what an object is;  Web Programming  Motivation – Ask the students  Appreciation of  Written
(45 mins) 1. What is an Object? 2. Compare an object with a (JavaScript) Student what are their favorite things? beauty Assessment
variable; Manual, pp. 117-124  Lecture/Discussion  Respect for others’ p. 123
2. JavaScript Built-in
Objects 3. Differentiate properties from  Presentation File:  Hands-on Activity – Creating a rights  Hands-on
methods; WPJS-Lesson23- JavaScript program that features  Cooperation Exercise
4. Explain the method of Presentation JavaScript built-in objects p. 124
 Obedience
accessing an object’s  Sample Files (html) –
methods and properties; sample27, sample28
5. List the common properties  Data File (html) – rose
of the Date, Math, and  Output File (html) –
String objects; activity18, activity18a
6. Create scripts that
manipulate the date,
numbers, and string by
applying the methods and
properties of the JavaScript
built-in object; and
7. Participate actively in the
discussion.

14
 TIME REFERENCES & VALUES
SUBJECT MATTER OBJECTIVES STRATEGIES/ ACTIVITIES EVALUATION
FRAME MATERIALS INTEGRATION

1 Session Lesson 24 1. Define what the Document  Web Programming  Review – Ask the students to  Conformity to law  Written
(45 mins) 1. Document Object Model Object Model is; (JavaScript) Student answer the following questions:  Obedience Assessment
2. Describe the hierarchy of Manual, pp. 125-127 What is the difference between p. 127
an object and a class? What are  Responsibility
objects in the DOM; and  Presentation File:
WPJS-Lesson24- the built-in objects in  Accountability
3. Create scripts that access
Presentation JavaScript?
the elements of the page
through the use of the  Sample Files (html) –  Motivation – Listening quiz
DOM. sample29  Lecture/Discussion

1 Session Lesson 25 1. Define what the window  Web Programming  Review – Ask the students to  Curiosity  Written
(45 mins) 1. The window Object object is; (JavaScript) Student describe the DOM.  Determination to Assessment
2. Identify the position of the Manual, pp. 128-132  Motivation – Show to the learn p. 131
window object in the DOM;  Presentation File: students the output of program  Hands-on
 Confidence to
3. Lists the window object WPJS-Lesson25- they will be creating during class express ideas Exercise
properties; and Presentation  Lecture/Discussion p. 132
4. Create scripts that  Sample Files (html) –  Hands-on Activity – Using the
manipulate the properties sample30, sample31 window object
and use the methods of the  Output File (html) –
window object.  Evaluation – Recitation
activity19

15
 TIME REFERENCES & VALUES
SUBJECT MATTER OBJECTIVES STRATEGIES/ ACTIVITIES EVALUATION
FRAME MATERIALS INTEGRATION

1 Session Lesson 26 1. Define what the document  Web Programming  Motivation – Show to the  Curiosity  Written
(45 mins) 1. The document Object object is; (JavaScript) Student students the output of program  Determination to Assessment
2. Identify the objects under Manual, pp. 133-135 they will be creating during class learn p. 135
the document object;  Presentation File:  Lecture/Discussion  Confidence to
3. Manipulate the appearance WPJS-Lesson26- express ideas
of the page by creating a Presentation
script that modifies the  Sample Files (html) –
values of the document sample32
properties; and
4. Recognize the importance
of the document properties
and methods in creating
JavaScript programs.

1 Session Lesson 27 1. Identify the importance of  Web Programming  Review – Ask the students to  Respect the  Written
(45 mins) 1. Form Elements forms; (JavaScript) Student identify the tags used to create privacy of others Assessment
2. List the different form Manual, pp. 136-142 the HTML document structure p. 141
elements; and  Presentation File:  Motivation – Show to the class  Hands-on
3. Design an online form. WPJS-Lesson27- a biodata form or a registration Exercise
Presentation form. Ask them to describe the p. 142
 Sample Files (html) – uses and elements of the form
sample33a, sample33b  Lecture/Discussion
 Output File (html) –  Hands-on Activity – Creating an
activity20 HTML form containing different
types of form elements

16
 TIME REFERENCES & VALUES
SUBJECT MATTER OBJECTIVES STRATEGIES/ ACTIVITIES EVALUATION
FRAME MATERIALS INTEGRATION

2 Sessions Lesson 28 1. Explain the importance of  Web Programming  Review – Ask the students to  Curiosity  Written
(90 mins) 1. Methods of Accessing JavaScript in handling data (JavaScript) Student identify the different form  Critical thinking Assessment
Form Elements in the form; Manual, pp. 143-156 elements. p. 155
 Creativity
2. Form Object 2. Describe the method in  Presentation File:  Motivation – Ask the students  Hands-on
accessing form elements; WPJS-Lesson28- the importance of forms in the  Appreciation of Exercise
3. Button Object beauty
3. Lists the event handlers, Presentation Web site. p. 156
4. Submit/Reset Object
methods, and properties of  Sample Files (html) –  Lecture/Discussion
5. Text Fields the form, button, sample34, sample35,  Hands-on Activity – Creating a
6. Passing Form Data to submit/reset, and text field sample36, sample37, JavaScript program that access
Function objects; sample38 and manipulate the data from
4. Manipulate the contents of  Output File (html) – the form
the form using a JavaScript activity21
program; and
5. Complete all the required
drills and exercises.

1 Session Lesson 29 1. Differentiate the checkbox  Web Programming  Review – Ask the students to  Commitment to  Written
(45 mins) 1. Checkbox Object from the radio button; (JavaScript) Student identify the attributes of the excellence Assessment
2. List the event handlers, Manual, pp. 157-165 <input> tag.  Obedience p. 164
2. Radio Button Object
methods, and properties of  Presentation File:  Motivation – Show to the  Hands-on
 Diligence
the checkbox and radio WPJS-Lesson29- students the output of the Exercise
button objects; Presentation program that they will be  Responsibility p. 165
3. Manipulate data  Sample Files (html) – creating during the class.
represented by the sample39, sample40,  Lecture/Discussion
checkbox and radio button; sample41, sample42  Hands-on Activity – Creating a
and
 Output File (html) – JavaScript program that
4. Show self-reliance in activity22 manipulates the values of the
completing all the required radio button form elements
drills and activities.

17
 TIME REFERENCES & VALUES
SUBJECT MATTER OBJECTIVES STRATEGIES/ ACTIVITIES EVALUATION
FRAME MATERIALS INTEGRATION

2 Session Lesson 30 1. Identify the tags used to  Web Programming  Review – Ask the students to  Pursuit of  Written
(90 mins) 1. Select Object create list boxes; (JavaScript) Student identify the different form excellence Assessment
2. Enumerate the event Manual, pp. 166-170 elements.  Cooperation p. 168
handlers, methods, and  Presentation File:  Motivation – Show to the  Hands-on
 Discipline
properties of the select WPJS-Lesson30- students the output of the Exercise
object; Presentation program that they will be pp. 169-170
3. Create scripts that displays  Sample Files (html) – creating during the class.
the content to the list box; sample43  Lecture/Discussion
and
 Data File (html) –  Hands-on Activity – Creating a
4. Listen attentively while the activity22 program that display the value of
teacher is presenting the in a list box.
lesson.  Output File (html) –
activity23, activity23a,
activity23b

18
VI. PROJECTS
PROJECT 1: My Hobbies, My Favorites
The project requires the students to design web pages about their favorite collection: books, sports, songs, movies, gadgets, or artists, etc.
They can gather related images and information on the internet. The project is represented by a series of linked web pages. All files of the
project should be stored to a folder specified by the teacher.

PROJECT 2: Metric Conversion

The project requires the students to create web pages about metric conversion. They are required to create scripts that will convert the value
of measurement and display it into another equivalent value. The project is represented by a series of linked web pages. All files of the project
should be stored to a folder specified by the teacher.

PROJECT 3: Let’s Play

The project requires the students to create a set of web pages that contains different activities. The first web page should contain an activity
that utilizes a prompt tag that asks the user to enter a word and the switch case to display a paragraph related to the word given. The web
page should display a prompt indicating that the word entered is not included in the options for displaying text. The second web page should
be a translator for the word “hello” using if…else statements. The third web page should display user’s name multiple times using the prompt
tag and the for statement. The project is represented by a series of linked web pages. All files of the project should be stored in a folder
specified by the teacher.

PROJECT 4: Monthly Budget Expenses

The project requires the students to create a web page that will display the monthly budget expenses. The web page should contain a script
that has a function that will return values needed to generate the expenses such as: electricity, water, groceries, insurance, etc. The function
will receive the category of expenses, a number of bills, and total amount. It will also display the salary based on the user’s input and display
the remaining balance. All files of the project should be stored in a folder specified by the teacher.

PROJECT 5: Web Page Calculator

The project requires the students to create an online calculator. The calculator will allow the user to enter both numbers and operators by
clicking on the button that represents the number or the operator. Students may implement the eval(), parseInt(), parseFloat() and other Math
object methods in order to perform the required mathematical operation. Graphics and other elements can be added to enhance the
appearance of the page.

19
PROJECT 6: Interactive Quiz
The project requires the students to create an interactive quiz. Subject area and topics covered by the quiz will be assigned by the teacher.
Graphics and/or text can be used to represent the question. The quiz should have a feedback mechanism that will allow the users to know the
correct answers and the score. All files of the interactive quiz should be stored in a folder specified by the teacher.

PROJECT 7: Table of Elements

The project requires the students to create a page that will display the information from the Table of Elements. The appearance of the page
should mimic the appearance of the Table of Elements seen in publications. Interactivity is added to the page by creating a JavaScript
program. The program will be triggered when the user clicks on a specific element. The information about the element will be displayed in an
area on the page. The project is represented by a single web page. All files of the project should be stored in a folder specified by the teacher.

PROJECT 8: Gallery of Heroes

The project requires the students to design a set of web pages about our national heroes. Each page should contain a photograph and a short
biography of the hero. The project also requires the students to prepare a page that will serve as the main page for the set of web pages. The
main page should contain buttons that when clicked will display the information page of the particular hero.

20