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
