Web Engineering 1

Lecture 12– JavaScript Part 2

Kandahar University – Faizullah Hamdard

2023/6/15
Contents
• Declaring Variables
• JavaScript Datatypes
• JavaScript Variable Scope
• JavaScript Variable Names
• JavaScript Reserved Words
• JavaScript Operators
• JavaScript Conditional Statements
• JavaScript Iteration Statements/LOOPs
• JavaScript Functions

2
 JavaScript Variables

JavaScript is untyped language. This means that a

JavaScript variable can hold a value of any data type. Unlike
many other languages, you don't have to tell JavaScript
during variable declaration what type of value the variable
will hold.
The value type of a variable can change during the
execution of a program and JavaScript takes care of it
automatically.

3
 JavaScript Datatypes

These are the type of values that can be represented and

manipulated in a programming language.
JavaScript allows you to work with three primitive data types −
• Numbers: e.g. 123, 120.50 etc.
• Strings of text: e.g. "This text string" etc.
• Boolean: e.g. true or false.
JavaScript also defines two trivial data types, null and undefined,
each of which defines only a single value.

4
 JavaScript Datatypes

Note − JavaScript does not make a distinction between

integer values and floating-point values. All numbers in
JavaScript are represented as floating-point values.
JavaScript represents numbers using the 64-bit floating-
point format defined by the IEEE 754 standard.

5
 JavaScript Variables

Variables can be thought of as named containers.

You can place data into these containers and then refer to the
data simply by naming the container.
Before you use a variable in a JavaScript program, you must
declare it. Variables are declared with the (var), (let),
(const) keywords as follows.

6
JavaScript Variables

7
 JavaScript Variable Scope

The scope of a variable is the region of your program in which it

is defined.
JavaScript variables have only two scopes:
• Global Variables − A global variable has global scope which
means it can be defined anywhere in your JavaScript code.
• Local Variables − A local variable will be visible only within a
function where it is defined. Function parameters are always
local to that function.

8
JavaScript Variable Scope

9
 JavaScript Variable Scope Overriding

Within the body of a function, a local variable takes precedence

over a global variable with the same name.
If you declare a local variable or function parameter with the
same name as a global variable, you effectively hide the global
variable.
Take a look into the next slide example.

10
JavaScript Variable Scope Overriding

11
JavaScript Variable Scope

12
 JavaScript Reserved Words

A list of all the reserved words in JavaScript are given in the

following table. They cannot be used as JavaScript variables,
functions, methods, loop labels, or any object names.
• Var
• Boolean
• Break
• Function
• Many More...

13
 Javascript - Operators

Let us take a simple expression 4 + 5 is equal to 9. Here 4 and

5 are called operands and ‘+’ is called the operator.
JavaScript supports the following types of operators.
• Arithmetic Operators
• Comparison Operators
• Logical (or Relational) Operators
• Assignment Operators
• Conditional (or ternary) Operators

14
 Arithmetic Operators
• + (Addition)
• - (Subtraction)
• * (Multiplication)
• / (Division)
• % (Modulus)
• ++ (Increment)
• -- (Decrement)
Note − Addition operator (+) works for Numeric as well as
Strings. e.g. "a" + 10 will give "a10".

15
Arithmetic Operators

16
 Comparison Operators
• = = (Equal)
• != (Not Equal)
• > (Greater than)
• < (Less than)
• >= (Greater than or Equal to)
• <= (Less than or Equal to)

17
Comparison Operators

18
 Logical Operators

• && (Logical AND)

• || (Logical OR)
• ! (Logical NOT)

19
Logical Operators

20
 Bitwise Operators
• & (Bitwise AND)
• | (Bitwise OR)
• ~ (Bitwise Not)
• ^ (Bitwise XOR)
• << (Left Shift)
• >> (Right Shift)
• >>> (Right shift with Zero)

21
Bitwise Operators

22
 Assignment Operators
• = (Simple Assignment )
• += (Add and Assignment)
• −= (Subtract and Assignment)
• *= (Multiply and Assignment)
• /= (Divide and Assignment)
• %= (Modules and Assignment)

23
Assignment Operators

24
 JavaScript Operators

We will discuss two operators here that are quite useful in

JavaScript: the conditional operator (? :) and the typeof
operator.

25
 Conditional Operator (? :)

The conditional operator first evaluates an expression for a

true or false value and then executes one of the two given
statements depending upon the result of the evaluation.
If Condition is true? Then value X : Otherwise value Y.

26
Conditional Operator (? :)

27
 typeof Operator

The typeof operator is a unary operator that is placed before its

single operand, which can be of any type. Its value is a string
indicating the data type of the operand.
The typeof operator evaluates to "number", "string", or
"Boolean" if its operand is a number, string, or Boolean value
and returns true or false based on the evaluation.

28
 typeof Operator
Here is a list of the return values for the typeof Operator.
Type String Returned by typeof
• Number "number"
• String "string"
• Boolean "boolean"
• Object "object"
• Function "function"
• Undefined "undefined"
• Null "object"
29
typeof Operator

30
 JavaScript - If...Else Statement

JavaScript supports conditional statements which are used to

perform different actions based on different conditions.
Here we will explain the if..else statement.

31
JavaScript - If...Else Statement

32
 JavaScript - If...Else Statement

JavaScript supports the following forms of if..else statement:

• if statement
• if...else statement
• if...else if... statement.

33
 If Statement

if statement The if statement is the fundamental control

statement that allows JavaScript to make decisions and execute
statements conditionally.
Syntax:
if (expression){
Statement(s) to be executed if expression is true
}

34
 If...Else Statement:

The 'if...else' statement is the next form of control

statement that allows JavaScript to execute statements in a
more controlled way.
Syntax
if (expression){
Statement(s) to be executed if expression is true
}
else{
Statement(s) to be executed if expression is false
}
35
If...Else Statement Example:

36
 If...Else If... Statement

The if...else if... statement is an advanced form of if…else that allows

JavaScript to make a correct decision out of several conditions.
Syntax:
if (expression 1){
Statement(s) to be executed if expression 1 is true
}
else if (expression 2){
Statement(s) to be executed if expression 2 is true
}
else{
Statement(s) to be executed if no expression is true
}
37
If...Else If... Statement Example

38
 Javascript - Switch Case

You can use multiple if...else…if statements, as in the previous

chapter, to perform a multiway branch.
However, this is not always the best solution, especially when all
of the branches depend on the value of a single variable.

39
Flow Chart For Switch

40
 JavaScript Switch syntax:
switch (expression)
{
case condition 1: statement(s)
break;
case condition 2: statement(s)
break; ...
case condition n: statement(s)
break;
default: statement(s)
}
41
JavaScript Switch Code Example

42
 Javascript - Loops

While writing a program, you may encounter a situation where

you need to perform an action over and over again.
In such situations, you would need to write loop statements to
reduce the number of lines.
JavaScript supports all the necessary loops to ease down the
pressure of programming.

43
 The while Loop

The most basic loop in JavaScript is the while loop which would
be discussed here.
The purpose of a while loop is to execute a statement or code block
repeatedly as long as an expression is true.
Once the expression becomes false, the loop terminates.

44
The while Loop Flow Chart

45
 The while Loop Syntax & Example
The syntax of while loop in JavaScript is as follows −
while (expression){
Statement(s) to be executed if expression is true
}
Example:

46
 The do...while Loop

The do...while loop is similar to the while loop except that the
condition check happens at the end of the loop.
This means that the loop will always be executed at least once,
even if the condition is false.

47
The do...while Loop Flow Chart

48
 The do...while Loop Syntax & Example
The syntax for do-while loop in JavaScript is as follows −
do{
Statement(s) to be executed;
} while (expression);
Note − Don’t miss the semicolon used at the end of the do...while
loop.
Example:

49
 Javascript - For Loop

The 'for' loop is the most compact form of looping.

It includes the following three important parts:
• The loop initialization where we initialize our counter to a starting
value. The initialization statement is executed before the loop
begins.
• The test statement which will test if a given condition is true or not.
If the condition is true, then the code given inside the loop will be
executed, otherwise the control will come out of the loop.
• The iteration statement where you can increase or decrease your
counter. You can put all the three parts in a single line separated by
semicolons.

50
Javascript - For Loop Flow Chart

51
 Javascript - For Loop Syntax
The syntax of for loop is JavaScript is as follows:
for (initialization; test condition; iteration statement){
Statement(s) to be executed if test condition is true
}
Example:

52
 Javascript For...In Loop

The for...in loop is used to loop through an object's properties.

As we have not discussed Objects yet, you may not feel
comfortable with this loop.
But once you understand how objects behave in JavaScript,
you will find this loop very useful.

53
 Javascript For...In Loop Syntax

for (variable_name in object){

statement or block to execute
}

In each iteration, one property from object is assigned to

variable_name and this loop continues till all the properties of
the object are exhausted.

54
Javascript For...In Loop Example

55
 Loop Control

JavaScript provides full control to handle loops and switch

statements.
There may be a situation when you need to come out of a loop
without reaching at its bottom.
There may also be a situation when you want to skip a part of
your code block and start the next iteration of the look.

56
 Loop Control

To handle all such situations, JavaScript provides break and

continue statements.
These statements are used to immediately come out of any
loop or to start the next iteration of any loop respectively.

57
 The Break Statement

The break statement, which was briefly introduced with the

switch statement, is used to exit a loop early, breaking out of
the enclosing curly braces.

58
The Break Statement Flow Chart

59
The Break Statement Example

60
 The continue Statement

The continue statement tells the interpreter to immediately

start the next iteration of the loop and skip the remaining
code block.
When a continue statement is encountered, the program flow
moves to the loop check expression immediately and if the
condition remains true, then it starts the next iteration,
otherwise the control comes out of the loop.

61
The continue Statement Example

62
 JavaScript Function

A function is a group of reusable code which can be called anywhere

in your program.
• This eliminates the need of writing the same code again and
again.
• It helps programmers in writing modular codes.
• Functions allow a programmer to divide a big program into a
number of small and manageable functions.

63
 Function Definition Ways

• Function Statement
• Function Constructor
• Function Literal

64
 1. Function Definition

Before we use a function, we need to define it.

The most common way to define a function in JavaScript is by using
the function keyword, followed by a unique function name, a list of
parameters (that might be empty), and a statement block
surrounded by curly braces.

65
 Function DefinitionSyntax & Example

<script type="text/javascript">

function functionName(parameter-list)
{
Example
statements
}

</script>
66
 Calling a Function
To invoke a function somewhere later in the script, you would
simply need to write the name of that function as shown in the
following code.

67
 Function Parameters

Till now, we have seen functions without parameters.

But there is a facility to pass different parameters while calling a
function.
These passed parameters can be captured inside the function and
any manipulation can be done over those parameters.
A function can take multiple parameters separated by comma.

68
Function Parameters Example

69
 The Return Statement

A JavaScript function can have an optional return statement. This is

required if you want to return a value from a function.
This statement should be the last statement in a function.
For example, you can pass two numbers in a function and then you
can expect the function to return their multiplication in your calling
program.

70
The Return Statement Example

71
 2. Function () Constructor

The function statement is not the only way to define a new

function;
You can define your function dynamically using Function()
constructor along with the new operation.
Syntax:

• var variableName = new Function(Arg1, Arg2..., "Function

Body");

72
 2. Function () Constructor

The Function() constructor expects any number of string

arguments.
The last argument is the body of the function – it can contain
arbitrary JavaScript statements, separated from each other by
semicolons.
Notice that the Function() constructor is not passed any argument
that specifies a name for the function it creates.
The unnamed functions created with the Function() constructor are
called anonymous functions.
73
2. Function () Constructor Example

74
 3. Function Literals

JavaScript 1.2 introduces the concept of function literals which is

another new way of defining functions. A function literal is an
expression that defines an unnamed function.
Syntax:
var variablename = function(Argument List){
Function Body
};

75
3. Function Literals Example

76
THANK YOU
[email protected]