PRAYER

In the name of the Father, and of the Son, and of the Holy Spirit. Amen.

Under your patronage, dear Mother, and calling on the mystery of your Immaculate Conception,
I desire to pursue my studies and my literary labors:
I hereby solemnly declare that am giving myself to these studies chiefly to the following end:
That I may better contribute o to the glory of God and to the promotion of your veneration among men.
I pray you, therefore, most loving Mother, who are the Seat of Wisdom, to bless my labors in your loving-kindness.
Moreover, I promise with true affection and a willing spirit, as it is right that I should do, to ascribe all the good that shall
come to me therefrom, wholly to your intercession for me in God's holy presence. Amen.

Our Father, who art in heaven, hallowed be thy name; thy kingdom come; thy will be done on earth as it is in heaven. Give us
this day our daily bread; and forgive us our trespasses as we forgive those who trespass against us; and lead us not into
temptation, but deliver us from evil. Amen.

Hail, Mary, full of grace, the Lord is with you.

Blessed are you among women,
and blessed is the fruit of your womb, Jesus.
Holy Mary, Mother of God, pray for us sinners,
now and at the hour of our death. Amen.

Glory Be to the Father, and to the Son, and to the Holy Spirit. As it was in the beginning, is now, and ever shall be, world
without end. Amen.

Our Lady of Immaculate Concepcion, Pray for us!

In the name of the Father, and of the Son, and of the Holy Spirit. Amen.
 ICT 8
MODULE 3 – JAVASCRIPT

With the content structure of our webpage ready, the lessons on CSS3 will teach you how to display the
elements and tags using properties. CSS or Cascading Styling Sheets provide properties to control how your web
page will look like. The lesson will be all about making your web page beautiful and presentable the latest version
of CSS, which is CSS3, offers more properties that will further enhance the appearance of your webpage.

In this module, you will learn the basics in designing your webpage using.

1. Identify what is JavaScript

2. Enumerate different JavaScript reference
3. Identify the JavaScript variables
4. Analyse different function with arguments

In this module, you will examine this question when you take the following lessons:

LESSON 1 : Introduction to JavaScript

LESSON 2 : The Box Model and Background Properties
LESSON 3 : Border Properties
LESSON 4: Font and Text Properties
 ICT-8
MODULE 3 – JAVASCRIPT

Webpage

JavaScript Behavior/Operation

Conditional
Reference Description Variables Functions Objects
Statement

To do well in this module, you need to remember and do the following:

1. Look up the meaning of words you do not know.
2. Complete all activities and exercises.
3. Always read the instruction when answering your activity sheets.
4. Maximize the use of resources (if available) in our lesson.

ICT-8
NAME: TEACHER: Mr. Ragel R. Banaag DATE:

SECTION: ADDRESS: Contact No.

Instructions: Write your answer on the space provided

Identification
_________1. This is the third layer in web design
_________2. It is a scripting language that adds interactivity to a website.
_________3. It is what describes the object like an adjective
_________4. It is a special kind of data in JavaScript that has properties and methods.
_________5. This is the syntax to call the method for an object.
True or False
_________1. Lines of code are executed in programming.
_________2. In JavaScript, end your statement with colon.
_________3. You can group statements that are related and enclose them in curly brackets.
_________4. The document.write instruction print or display something in monitor.
_________5. Statements that are grouped should be placed inside a pair of curly brackets.
_________6. A string include numbers.
_________7. You can perform addition for strings
_________8. The * operation can be used in string
_________9. A function is a block of codes
_________10. An argument is actually a variable

ICT-8

MODULE 3 – JAVASCRIPT
Given below is an IRF sheet. Fill in the first row with your answer to the question:

Why is it important to learn how to operate a webpage using JavaScript?

Initial____________________________________________________________________________________
_________________________________________________________________________________________

Revised
Final

You have just given your initial ideas what is CSS. Find out in the next section if
your ideas are correct. What you will learn in the next sections will also enable you to
do the final activity.

ICT-8
MODULE 3 – JAVASCRIPT
LESSON 1 – INTRODUCTION TO JAVASCRIPT
 ICT-8
MODULE 3 – JAVASCRIPT

Go back to the website and press f5 on your keyboard or click refresh/reload button. Observe that almost
 ICT - 8
MODULE 3– JAVASCRIPT
PROPERTY DESCRIPTION

String Object Properties

 Constructor Return the function that created the prototype of the string
object

length Returns the length of a string

Document.write An instruction to print or display something

String Object Methods

charAt() Returns the character at the specified index

charCodeAt() Returns the Unicode of the character at the specified index

Concat() Joins two or more strings and returns a copy of joined strings

Fromcharcode() Converts Unicode values of characters

indexOf() Returns the position of the first found occurrence of a specified

value in a string

lastindexOf() Returns the position of the last found occurrence of a specified

value in a string

Match() Searches for a match between a regular expression and a string

and return the matches

Search() Searches for a match between a regular expression and a string

and return the position of the match

Slice() Extracts the characters from a string, beginning at a specified

position, and through the specified number of character

Tolowercase() Converts a string to lower case letters

toUppercase() Converts a string to uppercase letters

Trim() Removes white space from both ends of a string

Number Object Properties

MAX_VALUE Return the largest number possible in JavaScript

MIN_VALUE Return the smallest number possible in JavaScript

NEGATIVE_INFINITY Represent negative infinity

NaN Represent a “Not a Number” value

POSITIVE_INFINITY Represent positive infinity

Number Object Methods

toExponential(x) Converts number into an exponential notation

toFixed(x) Formats a number wioth x number of a digits after the decimal

point

toPrecision(x) Formats a number to x length

toString() Converts a number object to a string

Valueof() Returns primitive value of a number object

ICT - 8
MODULE 3 – JAVASCRIPT
PROPERTY DESCRIPTION
Mouse Events
Onclick The event occurs when the user click on an element
Ondbclick The event occurs when the user double-click on an
 ICT-8
MODULE 3 – JAVASCRIPT

ASSESSMENT 2: Fill in the blank

 ICT-8
MODULE 3 – JAVASCRIPT

LESSON 2 : VARIABLES
In JavaScript and all other programming languages, variable are important components. A variable is
like a storage box that contains information or data. To avoid confusion, you have to label your storage box
so you can refer to it. In JavaScript, you give your variable a name. a name can be as simple as a single letter
like x, y, or z. Better names would be descriptive like total and balance. You can use underscore symbol (_) to
separate words in your variable names (i.e., average_grade). Always start your name with a letter. Take note
that variable are case sensitive meaning a capital X is defferent from small x. do not use any symbols aside
from letters, number and the underscore symbol.
Once you already have a variable with a name, you can start putting data or information
inside it. To assign data to a variable, you use assignment operator (=). But before anything else, you need to
tell JavaScript that you have variables and that you will be using them. Below is a complete variable
statement.
var my_name = “Monkey D. Luffy”;
var my_age = 18;
The var is telling the JavaScript that you are creating a variable and its name is my_name and
my_age. then, using the assignment operator = you are putting data inside the variable and that data is
Monkey D. Luffy and 18. At the end of the statement is a semi colon. So every time you refer to the variable
my_name or my_age, it will return the value that it contains.
Variable Types for Different Data
A variable can accept different data types. Below is a guide for two different data types that you are
going to use throughout the course of this module. Keep in mind that there are other data types.
DATA TYPE CAN ACCEPT EXAMPLE REMARKS
Strings Characters or text “Web Design” Always put inside quotation
“!webdesign!” marks your character or text.
Number Whole number, decimal, negative 25, 4.80, -7, 95 Do not put inside quotation
numbers, exponential marks
Let’s Do It!
Type the code below with your text editor and save it.
 ICT-8
MODULE 3 – JAVASCRIPT
Your output should be like this.

The code states that variables are created with a name of my_name with assign value Monkey D. Luffy and my_age
with assign value 18. So when you call the variable my_name or my_age, it will return whatever value is inside of it.
Mathematical Operations
You can do mathematical calculations in JavaScript. You can even do them with variables and the result is
automatically computed for you. Below is the list of the basic mathematical operation used in programming.

OPERATOR WHAT IT DOES EXAMPLE X=2 RESULT REMARKS

+ Addition Y = 10 + X 12 10 is added with a variable
- Subtraction Y = 10 – X 8 10 is deducted with a variable
* Multiplication Y = 10 * X 20 10 is multiplied to a variable
/ Division Y = 10 / X 5 10 is divided by a variable
++ Increment X++ 3 This is a shortcut for increasing value of variable by 1
-- Decrement X-- 1 This is a shortcut for decreasing value of variable by 1
Let’s Do It!
Type the code below and save it as html file.
 ICT-8
MODULE 3 – JAVASCRIPT

This should be you result.

Now do not be confused if you receive a 5 value on the last line. You might think it should be 4 and it is giving
you a wrong answer. The result is actually correct, because in your code, you already increased tha value of
your variable by 1, so the default value of x increased by 1 and became 6. By decreasing the value of X by 1 it
became 5.
String Operation
String are data types that accept letters or characters. The operator + is used in string operation, but the
process of adding numbers is not involve here.
Let’s Do It!
Type the code below and save it. Take not of the spaces inside the quotation marks.

Here is your output.

 MODULE 3 – JAVASCRIPT

Did you notice how easy it was to add strings? By simply typing the variables and including the + operator, you
can add strings together.
ASSESSMENT 3: Multiple Choice.
Choose the letter of the correct answer.
______1. It is like a storage box that contains information or data.
a. Number b. Variable c. String d. Text
______2. What symbol can you use to separate words in your variable name?
a. Period b. coma c. semicolon d. underscore
______3. It is a data type that accept character or text.
a. Number b. Variable c. String d. Text
______4. It is a data type that accept exponentials.
a. Number b. Variable c. String d. Text
______5. What operator can be used for string operation?
a. - b. * c. + d. /
ACTIVITY 3: Table – Mathematical Operations
Complete the table below.
OPERATOR WHAT IT EXAMPLE X=5 RESULT REMARKS
DOES
+
-
*
/
++
--

Given below is an IRF sheet. Fill in the first row with your answer to the question:
Why is it important to learn How to design a webpage using CSS3?

Initial
Revised____________________________________________________________________
__________________________________________________________________________
___________________________________________________
Final

ICT-8
 LESSON 3: FUNCTION
A function is like a set of codes in JavaScript that execute whenever it is called. A function can be automatically
loaded or executed. You can also assign button that when clicked, becomes a signal for the function to be
executed. A function is useful if you often keep a particular block of code.
Instead of writing the code again and again inside your program, you can create a function for it. You can
just call this function so it will be executed. In order to call a function, you have to give it a name, just like
variables. When giving a name to a function, do not use predefined names like those found in the reference list to
avoid confusion. Below is the complete syntax for function, with block of codes inside curly braces {}.
Function functionname()
{
Block of code waiting to be executed
}
Let’s Do It!
Type the code below and save it as html document.

What you did is to create a button, labeled “Click Me”. When this button gets clicked, it will execute a function
named msg().
Here is the result

ICT-8
MODULE 3 – JAVASCRIPT
 ICT-8
MODULE 2 –CSS3
Let’s Do It!
 ICT-8
MODULE 3 – JAVASCRIPT
Let’s Do It!
Type the code and save it as html document.
<!doctype html>
 ICT-8

MODULE 2 –CSS3
ASSESSMENT 4: ESSAY.
1.Discuss how function work.

2.What is an argument?

ACTIVITY 4: Text Analysis – Function

Analyze the code below and find the wrong syntax. Write the correct code in the box provided.

<!doctype html>
<html>
<head>
<title>Javacscript</title>
</head>
<body>
<pre>
<scared>
function anime(classification);
<
document.writeln("Some anime are classified as " + classification)
>
anime("The Best")!
anime("The Greatest")!
anime("The Coolest")!
</script>
</pre>
</body>
</html>