MODULE 2: PROGRAMMING with JAVASCRIPT

Lesson 2: JavaScript Fundamentals – Variables and Input function

Learning Objectives:

At the end of this lesson students will be able to

 define a variable
 apply the rules of naming variable
 apply mathematical operators in programming equations
 identify JavaScript keywords
 identify JavaScript data types
 use JavaScript to solve problem sets

Lesson Proper

1.1 JavaScript Variables

As with algebra, JavaScript variables can be used to hold values (x=5) or expressions
(z=x+y).

Variable can have short names (like x and y) or more descriptive names (age, sum,
totalvolume)
Some common rules in using naming variable:
 Variable names must begin with a letter
 Variable names are case sensitive (y and Y are different variables)
 Variable names must not be a reserve word, words used by the programming
language such as JavaScript keywords or Browser keywords in our case.
 Variable names must not use special characters such as but not limited to *, (),
/, . , =, etc. except underscore _

Both JavaScript statements and JavaScript variables are case-sensitive.

JavaScript Keywords

break finally this

case for throw
catch function true
continue if try
debugger in typeof
default instanceof var
delete new void
do null while
else return with
false switch

1
Edukasyon Pantulay Pangkabuhayan (E2Ps) on ICT
 MODULE 2: PROGRAMMING with JAVASCRIPT

Browser Keywords

alert innerHeight outerWidth

blur innerWidth parent
closed length screen
document location screenX
focus navigator screenY
frames open Statusbar
history outerHeight windo

Scope
The scope of an identifier is either
 Global – An identifier that is accessible anywhere on the page
 Local – Is accessible only within the function it is declared within

A global variable is typically declared simply by assigning a value to it.

globalVariable = 100;

A local variable is declared within a function using the var keyword.

globalVariable = 100;

function someFunction() {
var counter = 0;
}

The identifier, counter, is local to the function and can only be used in that function.
However, the identifier, globalVariable, is not preceded by the var keyword and is thus a
global variable that can be used anywhere on the page, inside or outside of the function.

1.2 JavaScript Data Types

There are six data types in JavaScript :

 Numbers – Integer or floating point numbers

 Booleans – Either true/false or a number (0 being false) can be used for boolean
values
 Strings – Sequence of characters enclosed in a set of single or double quotes
 Objects – Entities that typically represents elements of a HTML page
 Null – No value assigned which is different from a 0
 Undefined – Is a special value assigned to an identifier after it has been declared
but before a value has been assigned to it

JavaScript is a dynamically typed language. The data type of the identifier is not assigned
when the identifier is declared. When a value is assigned to the identifier the identifier

2
Edukasyon Pantulay Pangkabuhayan (E2Ps) on ICT
 MODULE 2: PROGRAMMING with JAVASCRIPT

takes on that type. The data type of the variable is not important until an operator is
applied to the variable. The behavior of the operator is dependent of the data type being
acted upon.

For example:
var name = “Sally”;
name = 34;

The string, Sally, is first assigned to the variable. Next, the integer 34 is assigned to the
variable. Both are legal but usage of the identifier is inconsistent. It is better if we are
consistent when assigning a data type to a variable. This leads to less confusing code.

1.3 Sample JavaScript program with variables

The program below will compute for the sum of the values of 2 variables. It will also display
the values of the variables.

<script>
var x=5, y=2;
var sum=x+y;
document.write(“First number:” + x);
document.write(“<br>Second number: ” + y);
document.write(“<br>The sum is ” + sum);
</script>

Output

To display variable value using document.write()

Syntax: document.write(variableName)
Example: document.write(num)
This code displays the value given to num variable

3
Edukasyon Pantulay Pangkabuhayan (E2Ps) on ICT
 MODULE 2: PROGRAMMING with JAVASCRIPT

To display text and variable value

Syntax: document.write(variableName + “text”)
document.write(“text” + variableName)
document.write(“text” + variableName + “text”)

Example: document.write(sum + “ is the sum”)

document.write(“The sum is “ + sum)
document.write(“The sum of ” + x + “ and ” + y “ is ” + sum)

1.4 Prompt Box

Prompt box is one of the JavaScript Popup boxes that is used if you want the user to input
a value. When a prompt box pops up, the user will have to click either "OK" or "Cancel"
to proceed after entering an input value.

If the user clicks "OK" the box returns the input value. If the user clicks "Cancel" the box
returns null.

Syntax
window.prompt("sometext","defaultText");

The window.prompt() method can be written without the window prefix.

prompt("sometext","defaultText");

Sample:

<script>
var name=prompt("Enter your name","Name");
document.write("Welcome " + name);
</script>

Output:

4
Edukasyon Pantulay Pangkabuhayan (E2Ps) on ICT
 MODULE 2: PROGRAMMING with JAVASCRIPT

The value inputted in a Prompt box is treated as string. If you want to treat the input
number as a number literal use Number() to convert the prompt value to number
Example:
var x=Number(prompt(“Enter a number”, “”));

5
Edukasyon Pantulay Pangkabuhayan (E2Ps) on ICT
 MODULE 2: PROGRAMMING with JAVASCRIPT

Activity
I. Evaluate the following variable name whether valid or invalid.
1. Sum
2. 10percent
3. Street no
4. #five
5. num1
6. if
7. studentno.
8. 2num
9. average_of_a_b
10. product_of_x&y

II. Create a webpage for the following problem sets

1. Create JavaScript program that will compute and display the sum,
difference, product and quotient of two variables.
2. Create JavaScript program that will compute and display the square of a
number.
3. Create a program that will ask for the score and number of items of a quiz.
Compute and display the equivalent grade using the formula
grade=score / no. of items * 100.
4. Create a program that will ask for 5 quizzes grades then compute and
display the average.
5. Create a program that will ask for the radius of a circle then compute and
display the area of the circle.
6. Create a program that will ask for feet value then convert it to equivalent
inches value.
1 ft = 12 in
7. Create a program that will ask for the length and the width of a rectangle
then compute and display the perimeter.
8. ABC Sari-sari Store wants to make their sales transaction be
computerized. Given the following requirements create a program for the
new sales transactions flow.
Input: 5 items prices, discount, cash
Output: Total amount to pay, Discount amount, Discounted total
amount, change

6
Edukasyon Pantulay Pangkabuhayan (E2Ps) on ICT
 MODULE 2: PROGRAMMING with JAVASCRIPT

Summary
 JavaScript variables can be used to hold values (x=5) or expressions (z=x+y).
 Variable scope is global and local.
 JavaScript data types: Numbers, Booleans, Strings, Objects, Null, and
Undefined
 Prompt box is one of the JavaScript Popup boxes that is used if you want the
user to input a value.

7
Edukasyon Pantulay Pangkabuhayan (E2Ps) on ICT