CHAPTER 5:

Basic Client-Side
Scripting ( JavaScript )

Prepared for:
CSC264 – Introduction to Web and Mobile Application
OVERVIEW OF THIS CHAPTER

In this chapter, you will learn about:

➢ Operators,Expressions,and Evaluation
➢ Formatting Numbers
➢ Mathematical Built-in Methods & Constants
➢ Date & Time Objects
➢ Selection Structure
➢ Repetition Structure (Loop)
➢ Array
➢ Functions
 JAVASCRIPT: OPERATORS
Operators:
➢ Are used to handle variables

➢ There are many types of operators, which include:

1. Assignment operators:
▪ Are used to assign values to variables
 JAVASCRIPT: OPERATORS
Operators:
➢ There are many types of operators, which include:
2. Arithmetic operators:
▪ Are used to perform arithmetic between variables and/or values

Binary
Operator

Unary
Operator
 JAVASCRIPT: OPERATORS
Operators:
➢ There are many types of variables, which include:
2. Arithmetic operators:
▪ Increment and Decrement operators can be evaluated in 2 forms:
i. Pre-fix Form (Before):
The value in the variable will be increased/decreased before the
value in the variable is used for calculation/evaluation

For example: ++num --num

i. Post-fix Form (After):

The value in the variable will be increased/decreased after the
statement of the equation has been performed

For example: num++ num--

 JAVASCRIPT: OPERATORS
Operators:
➢ There are many types of operators, which include:
2. Arithmetic operators:
▪ Order of Precedence:
When you have multiple arithmetic expression to evaluate, order of
precedence needs to be followed:

Operator Remark
Highest level - Negative
() Parenthesis
*, /, Multiply, Divide,Modulus
Lowest level +, - Add, Subtract

Same level
 JAVASCRIPT: OPERATORS
Operators:
➢ There are many types of operators, which include:
3. Comparison operators:
▪ Are used to compare between 2 values or variables
▪ The result of the comparison will either be:
• True
• False

Comparison Operator Description Example

== / === Equal to X == Y / X === Y
!= Not equal to X != Y
< Less than X <Y
<= Less than or equal to X <= Y
> Greater than X >Y
>= Greater than or equal to X >= Y
 JAVASCRIPT: OPERATORS
Operators:
➢ There are many types of operators, which include:
4. Logical operators:
▪ Are used when there are more than one comparison expression to
evaluate at a time
▪ Allows you to combine the comparison expressions
▪ The result of the comparison will either be:
• True
• False

Logical Operator Description Rule Example

! NOT Produce opposite relation ! (a < b)
&& AND Both operand must be true (a < b) && (a < c)
|| OR At least one operand must (a == b) || (a ==
be true c)
 JAVASCRIPT: OPERATORS
Operators:
➢ There are many types of operators which include:
5. “+”operator:
▪ Can be used for both arithmetic expression and string
▪ For arithmetic expression:
It will add up numbers as usual
▪ For string:
It will concatenate (combine) string variables or text values together
JAVASCRIPT: FORMATTING NUMBERS
Formatting Numbers:
➢ To format a number by using a specified number of trailing decimals,
the toFixed() method is used:

variable.toFixed(x)

The number of digits after the decimal point

(optional: default is 0)

➢ The number will be rounded up, and nulls are added after the decimal
point (if needed) to create the desired decimal length
EXAMPLE
 JAVASCRIPT: SPECIAL NUMBERS
Numbers:
➢ Below is a list of special numbers supported by JavaScript:
EXAMPLE
 JAVASCRIPT: MATH OBJECT
Math Object:
➢ To perform mathematical tasks on numbers, Math object can be used:

Math.method()
EXAMPLE
 JAVASCRIPT: CONSTANT
Math Object:
➢ With the Math object, you can also use the constant that it provides:

Math.constant()
EXAMPLE
 JAVASCRIPT: DATE AND TIME
Date and Time:
➢ To work with date and time, a Date object needs to be created
➢ A date consists of:
A year,a month, a day,an hour, a minute, a second, and milliseconds
➢ The syntax used is:
variable = new Date();
 JAVASCRIPT: DATE AND TIME
Date and Time:
➢ The following method can be used on a Date object: Date.method()
EXAMPLE

Why is the month added with 1?

 JAVASCRIPT: SELECTION
Selection Structure:
➢ Is used when you need to make certain decisions within your program:
Therefore, it will involve a condition that needs to be evaluated

➢ In JavaScript, to perform branching you can use:

1. if.. else..statement:
if (condition)
{
// codes here will execute if condition is true
}
else if (condition)
{
// codes here will execute if condition is true
}
else
{
// code here will execute if all of the previous condition is false
}
EXAMPLE
 JAVASCRIPT: SELECTION
Selection Structure:
➢ In JavaScript, to perform nching
bra you can use:
QUICK QUESTION:
2. switch statement: When can you use
switch?

switch(expression)
{
case 1:
execute this code block
break;
case 2:
execute this code block
break;
default:
otherwise execute this code block
}
EXAMPLE
EXAMPLE

▪ These cases can share

the same code block
▪ The default case does
not have to be the last
case
 JAVASCRIPT: REPETITION
Repetition Structure (Loop): QUICK QUESTION:
When should you use
➢ In JavaScript, the following loops can be used: for loop and while loop?
1. for Loop:
Will repeat a block of code a specified number of times

for(initial_statement; condition; update_statement)

{
//code to be executed
}

2. while Loop:
Will repeat a block of code while a specified condition is true
initial_statement;
while(condition)
{
//code to be executed
update_statement;
}
 JAVASCRIPT: REPETITION
Repetition Structure (Loop):

1. for Loop:
for(var i=1; i<=5; i++)
{
document.write(“<p>The number is “ + i + “</p>”);
}

2. while Loop:
var i=1;
while(i<=5)
{
document.write(“<p>The number is “ + i + “</p>”);
i++;
}
 JAVASCRIPT: REPETITION

Repetition Structure (Loop):

➢ In JavaScript, the following loops can be used:
3. do.. while Loop:
Will execute a block of code ONCE, and then it will repeat the block of
code as long as the specified condition is true

initial_statement;
do
{
//code to be executed
update_statement;
}
while(condition);
 JAVASCRIPT: REPETITION

Repetition Structure (Loop):

3. do.. while Loop:

var i = 6;
do
{
document.write(“<p>The number is “ + i + “</p>”);
i++;
}
while(i <=5);
 JAVASCRIPT: ARRAY

Array:
➢ Is a special variable, which can hold more than one value at a time
➢ The syntax to declare an array without a fixed size:

var variableName = []; This is better

OR
var variableName = new Array();

➢ The syntax to declare an array with a fixed size:

var variableName = [];

variableName.length = num; This is better
OR
var variableName = new Array(num);
 JAVASCRIPT: ARRAY

Array:
➢ To assign initial values to an array, you can use any of the following ways:

var variableName = new Array(“value1”, “value2”, ...);

OR
var variableName = [“value1”, “value2”, ...];

This is better
 JAVASCRIPT: ARRAY
Array:
➢ To assign values to an array,you need to use the“index number”of the array

➢ To access elements of an array,you also need to access the“index number”of

the array
 JAVASCRIPT: ARRAY
Array Method: arrayName.method()

➢ The followings are methods that you can use on arrays:

Method Description
concat( ) Combines the elements of two or more arrays into one new array
join( ) Combines the elements of an array into a single string with a separator character
pop( ) Removes the last element
push( ) Adds elements to the end of an array
reverse( ) Reverse the direction of the elements
shift( ) Remove the first element of an array
unshift( ) Adds elements to the beginning
slice( ) Pulls out the specified section of an array
splice( ) Removes elements from an array or replace elements in an array
sort( ) Sorts elements of an array into alphabetical order based on the string values of the
elements
Str
 JAVASCRIPT: FUNCTIONS
Function:
➢ QUICK QUESTION:
Is a group of instructions intended to perform a particular task
What is the
➢ To use a function, you need to use the function keyword advantage of using
function?
➢ The syntax for function definition is:

function functionName (parameters) QUICK QUESTION:

{
Are parameters optional?
//group of code
}

➢ The statement inside a function will only be executed when a function call is
performed
➢ The syntax for function call is:

functionName (parameters);
EXAMPLE

Function
Definition

Function Call
 JAVASCRIPT: FUNCTIONS

Function as Data:
➢ Function can also be assigned to variables