y

nl
O
se
U
Programming with

tre
en
JavaScript

C
h
ec
pt
rA
Fo
Ice breaker

y
nl
O
se
U
tre
en
C
h
ec
pt
rA
Fo

© Aptech Limited
 y
nl
O
se
U
tre
en
C
Introduction to JavaScript

h
Session 1
ec
pt
rA
Fo

© Aptech Limited
Objectives

y
nl
By the end of this session, students will learn to:

O
Define JavaScript

se


U
 Differentiate between JavaScript and Java

tre
 Describe Web Applications and Websites

en
 Compare and contrast between server-side and client-side
scripting

C
h
 Explain basic concepts of JavaScript
ec
pt
rA
Fo

© Aptech Limited
Introduction to JavaScript

y
nl
O
se
U
JavaScript is a scripting language.

tre
en
Mainly used in Web pages to improve design, validate forms,

C
detect browsers, and create cookies.

h
ec
pt
By default, all Web browsers have in-built JavaScript
rA

support.
Fo

© Aptech Limited
HTML, CSS, and JavaScript

y
nl
O
se
• Is used to form the skeleton of a Website
• Acts as a building block of Web Scripting
HTML

U
• Describes the arrangement of the content

tre
en
Cascading • Is used to create an appealing Website
• Helps design graphic elements that improve the
Style Sheets

C
appearance of the Websites
(CSS) • Defines the color, size, and other visual aspects

h
ec
• Allows Web pages to be more interactive and
pt
independent
JavaScript • Enables the code to be embedded in HTML
rA

markup or stored in a separate file

Fo

© Aptech Limited
Example Website

y
nl
O
se
U
tre
en
C
h
ec
pt
rA
Fo

© Aptech Limited
JavaScript and Java

y
nl
O
JavaScript Java

se
Is a scripting language with light-weight Is an OOP language with advanced features

U
components
Needs only the browser engine to be Needs interpreters to convert it into a

tre
interpreted while loading a Web page machine language for a computer system to
understand

en
Has been developed by Netscape Has been developed by Sun Microsystems

C
h
Has some implications with different Web Ensures that programs written in Java run
browsers
ec exactly the same across different systems
pt
rA

Needs to be interpreted Needs to be compiled

Fo

© Aptech Limited
Websites and Web Applications

y
nl
O
se
U
• Usually contains more of static information and less of
user interaction.

tre
Website • Will not take any input from the user and does not
interact with the Web server.

en
• Can be built using HTML, CSS, and JavaScript.

C
h
• Is more interactive and require a connection with a

Web ec
Web server.
• Is dynamic as it takes input from users, interacts with
pt
Application the server, and provides response back to users.
rA

• Can be built with HTML, CSS, JavaScript, and

programming languages.
Fo

© Aptech Limited
Server-Side Script versus Client-Side

y
nl
Script

O
se
Server-side Script Client-side Script

U
tre
It runs on a Web server. It runs on a Web browser.

en
Additional components such as
Webserver, Application server, and Browser is the only component

C
Database are involved. involved.

h
Server provides results for user’s Response is faster; server load is
dynamic requests.
ec reduced.
pt
Specific response is sent back for Code runs on browser that is
rA

each user’s request. downloaded from the Web server

Fo

© Aptech Limited
JavaScript Data Types

y
nl
O
Data is classified into six major data types in JavaScript:

se
Numbers • The number type can be used both for integer and floating point numbers

U
such as var x=1234; and var y=12.34;

tre
Strings • One or more character values are represented by the string type.
• For example: var a="abcd"; and var b=' ' ;

en
Boolean • Boolean data type represents a true or false value.

C
• For example: var outcome = true; and Boolean(2>4);

h
• Objects are special data types used for the collection of various data.
Objects • For example: var vehicle = {type: "Suzuki", model: "Baleno", color: "Ray
Blue"};
ec
pt
Functions • A function is a block of code that is used to perform a specific task.
• For example: function mul(n1,n2) {return n1*n2;}
rA

• Undefined variables are those that do not have any data type such as
Undefined
Fo

number or string.
• For example: var undef;

V 1.0 ©©Aptech
AptechLimited
Limited
JavaScript Variables

y
nl
O
 Variable helps us to store values.

se
 A variable name is used to assign values.
The value changes during the execution of a program.

U


tre
en
Example:
var a= 2; Output:

C
var b= 4; The value of c is: 6
var c= a+ b;

h
ec
pt
rA
Fo

© Aptech Limited
Control Statements 1-2

y
nl
Control statements are blocks of code that perform a specific operation based on

O
conditions provided.

se
if … else switch…case

U
• Definition: • Definition:

tre
o The 'if' statement will execute a block of o The 'switch' statement checks different
code when a required condition is satisfied. conditions. It checks for each case against
the condition until a correct match is found.

en
• Syntax:
if (condition) • Syntax:

C
{ •switch (condition)
Statements to be executed If {

h
condition is true case condition 1: statements; break;

ec
} case condition 2: statements; break;
...
case condition n: statements; break;
pt
default: statements;}
rA
Fo

© Aptech Limited
Control Statements 2-2

y
nl
O
do…While While For loop

se
• Definition: • Definition: • Definition:
o The 'do...while' loop o The 'while' loop executes o The 'for' loop is used to
checks for the condition a statement or a block of execute a block of code

U
at the end of the loop. code repeatedly as long multiple times for a
o The 'do' loop will be as the condition is true. specific condition.

tre
executed at least once, o When condition is false, o It has three parts: the
even if the condition is the loop will exit. loop initialization, the

en
false. condition is true or not,
• Syntax: and the iteration
• Syntax: statement that can

C
while (condition)
do {Statements to be increase or decrease the
executed if condition counter.
{

h
Statements to be is true}
executed;
} ec • Syntax:
for (initialization;
pt
condition; iteration
while (condition);
statement)
rA

{Statements to be
executed if test
condition is true}
Fo

© Aptech Limited
Object-Oriented Programming (OOP)

y
nl
In OOP, the major building block of a script is an object.

O


 Each object is a scripting unit consisting of a state (variables) and behavior

se
(methods).

U
 JavaScript is an OOP-based scripting language.

tre
en
Polymorphism Inheritance

C
h
ec
Encapsulation
Classes and
and
Objects
Abstraction
pt
OOP
rA
Fo

© Aptech Limited
Creating Classes and Objects in

y
nl
JavaScript

O
se
 A class is similar to a function, but a class should be declared before accessing

U
it in the script.

tre
 Objects can be created using one of the three ways:

en
Using object literal

C
Using new keyword to create instance of Object directly

h
ec
Using an object constructor and new keyword
pt
rA
Fo

© Aptech Limited
JavaScript Modules

y
nl
O
A module is a piece of code that returns a specific value can be written in a
separate file and imported in the script.

se
U
JavaScript has standard syntax for using modules within a script:

tre
 export keyword can be used to export any data.

en
 A constant, a function, and any other variable can be exported.

C
 import keyword can be used to import the module from another module.

h
 repeat and ex functionality from the library module is used in the main
module.
ec
pt
rA

Modules differ from standard scripts.

 HTML-style comment syntax is not supported in modules.
Fo

 The export and import syntax is only available within modules.

© Aptech Limited
Session Summary

y
nl
O
se
 JavaScript is a scripting language used in Websites and Web applications.

U
 HTML is often used to form the skeleton of a Website.

tre
 A static Website will not take any input from the user nor interact with the

en
Web server.
 Web applications are interactive as compared to static Websites and require a

C
connection with a Web server.

h
 Server-side scripts run on a Web server that takes input from the client and
interacts with it. ec
pt
 Client-side scripts run on a Web browser that acts as an environment and
rA

processing of the script happens at the end user’s computer.

Fo

© Aptech Limited