Scribd
Upload
1 views

Topic 5 Variables , Control Statements , Arrays and Functions

The document covers key concepts in JavaScript, including variables, control statements, arrays, and functions. It explains the rules for creating identifiers, the use of conditional statements, and the syntax for defining and invoking functions. Additionally, it discusses the advantages of using external JavaScript files and provides examples of arrays and loops.

Uploaded by

ahmdabdi177
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
1 views

Topic 5 Variables , Control Statements , Arrays and Functions

The document covers key concepts in JavaScript, including variables, control statements, arrays, and functions. It explains the rules for creating identifiers, the use of conditional statements, and the syntax for defining and invoking functions. Additionally, it discusses the advantages of using external JavaScript files and provides examples of arrays and loops.

Uploaded by

ahmdabdi177
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 34

Course Title:-

Web Development II
Topic 5:- Variables,
Control Statements, Arrays and
Functions

Course Teacher:-
Eng. Abdullahi M.
1
JavaScript Arithmetic
 Arithmetic operators perform arithmetic on
numbers (literals or variables).

2
Operators and Operands
 The numbers (in an arithmetic operation) are
called operands.
 The operation (to be performed between the
two operands) is defined by an operator.

3
JavaScript Variables
 JavaScript variables are containers for storing data
values.
 In this example, x, y, and z, are variables:

4
JavaScript Identifiers
 All JavaScript variables must
be identified with unique names.
 These unique names are called identifiers.
 Identifiers can be short names (like x and y) or
more descriptive names (age, sum,
totalVolume).

5
Rules for Identifiers
The general rules for constructing names for
variables (unique identifiers) are:
 Names can contain letters, digits, underscores,
and dollar signs.
 Names must begin with a letter
 Names can also begin with ($ and _)

6
Continued…
 Names are case sensitive (y and Y are different
variables)
 Reserved words (like JavaScript keywords)
cannot be used as names

7
JavaScript if else and else if
 Conditional statements are used to perform
different actions based on different conditions.
 Use the if statement to specify a block of JavaScript
code to be executed if a condition is true.
 Use else to specify a block of code to be executed, if
the same condition is false
 Use else if to specify a new condition to test, if the
first condition is false

8
JavaScript if Example

9
JavaScript if else Example

10
An Example that tells Even/Odd

11
How to validate for an Empty Text
box

12
isNaN() to check a number

13
JavaScript Functions and Events

 A JavaScript function is a block of code


designed to perform a particular task.
 A JavaScript function can be executed when
"called" for.
For example, a function can be called when
an event occurs, like when the user clicks a
button.

14
JavaScript Function Syntax
A JavaScript function is defined with
the function keyword, followed by a name,
followed by parentheses ().
 Function names can contain letters, digits,
underscores, and dollar signs (same rules as
variables).
 The parentheses may include parameter names
separated by commas:(parameter1,
parameter2, ...) 15
JavaScript Function Syntax
 Function parameters are listed inside the
parentheses () in the function definition.
 Function arguments are the values received
by the function when it is invoked.
 Inside the function, the arguments (the
parameters) behave as local variables.

16
JavaScript in <head> or <body>

 You can place any number of scripts in an HTML


document.
 Scripts can be placed in the <body>, or in
the <head> section of an HTML page, or in
both.

17
JavaScript in <head>

 In this example, a JavaScript function is placed


in the <head> section of an HTML page.
 The function is invoked (called) when a button
is clicked:

18
19
JavaScript in <body>

 In this example, a JavaScript function is placed


in the <body> section of an HTML page.
 The function is invoked (called) when a button
is clicked:

20
21
Functions Passing Parameters

22
External JavaScript
 Scripts can also be placed in external files.
 External scripts cannot contain <script> tags.

External file: myScript.js

23
Continued…
 External scripts are practical when the same
code is used in many different web pages.
 JavaScript files have the file extension (.js).
 To use an external script, put the name of the
script file in the src (source) attribute of
a <script> tag:
Example

24
25
External JavaScript Advantages
 Placing scripts in external files has some
advantages:
 It separates HTML and code
 It makes HTML and JavaScript easier to read
and maintain
 Cached JavaScript files can speed up page
loads

26
JavaScript Arrays
 An array is a special variable, which can hold
more than one value.
 An array can hold many values under a single
name, and you can access the values by
referring to an index number.
Creating an Array

 It is a common practice to declare arrays with


the const keyword. 27
Example of Array ---- WAY ONE----

28
Example of Array ---- WAY TWO----

29
Example of Array ---- WAY
THREE----

30
JavaScript Loops
 Loops can execute a block of code a number of
times.
 Loops are handy, if you want to run the same
code over and over again, each time with a
different value.
Different Kinds of Loops
 For Loop
 While Loop
31
For Loop Example

32
While Loop Example

33
THANKS…

34

You might also like