Introduction to JavaScript
Introduction to Scripting
Department of Computer Science
July 29, 2026
Department of Computer Science Introduction to JavaScript July 29, 2026 1 / 45
Learning Objectives
Understand JavaScript.
Learn scripting concepts.
Know the features of JavaScript.
Write a simple JavaScript program.
Department of Computer Science Introduction to JavaScript July 29, 2026 2 / 45
What is JavaScript?
JavaScript is a scripting language.
It is used to make web pages interactive.
It works together with HTML and CSS.
Runs inside the web browser.
Department of Computer Science Introduction to JavaScript July 29, 2026 3 / 45
What is Scripting?
A script is a small program that performs a specific task automatically.
Examples:
Display messages
Validate forms
Perform calculations
Create animations
Department of Computer Science Introduction to JavaScript July 29, 2026 4 / 45
Features of JavaScript
Lightweight
Easy to Learn
Object-Oriented
Platform Independent
Event Driven
Fast Execution
Department of Computer Science Introduction to JavaScript July 29, 2026 5 / 45
Why JavaScript?
JavaScript is used for:
Form Validation
Dynamic Content
Games
Animations
Interactive Websites
Department of Computer Science Introduction to JavaScript July 29, 2026 6 / 45
JavaScript in HTML
JavaScript can be written inside the <script> tag.
Syntax
<script>
JavaScript Code
</script>
Department of Computer Science Introduction to JavaScript July 29, 2026 7 / 45
Example 1
HTML + JavaScript
<!DOCTYPE html>
<html>
<body>
<script>
[Link]("Hello JavaScript");
</script>
</body>
</html>
Department of Computer Science Introduction to JavaScript July 29, 2026 8 / 45
Output
Output displayed on the browser:
Hello JavaScript
Department of Computer Science Introduction to JavaScript July 29, 2026 9 / 45
Example 2
Using Alert Box
<script>
alert("Welcome");
</script>
Department of Computer Science Introduction to JavaScript July 29, 2026 10 / 45
Output
A popup dialog box appears.
Welcome
Department of Computer Science Introduction to JavaScript July 29, 2026 11 / 45
Advantages
Faster execution
Easy debugging
Supported by all browsers
Improves user interaction
Department of Computer Science Introduction to JavaScript July 29, 2026 12 / 45
Summary
JavaScript is a client-side scripting language.
It adds interactivity to web pages.
JavaScript is embedded using the <script> tag.
It is widely used in modern web development.
Department of Computer Science Introduction to JavaScript July 29, 2026 13 / 45
JavaScript Fundamentals
JavaScript programs are built using:
Variables
Data Types
Operators
Comments
Statements
Department of Computer Science Introduction to JavaScript July 29, 2026 14 / 45
Variables
A variable is used to store data.
Syntax
let variableName = value;
Example:
let name = "John";
let age = 20;
Department of Computer Science Introduction to JavaScript July 29, 2026 15 / 45
Variable Naming Rules
Must begin with a letter, or $.
Cannot start with a number.
Cannot use JavaScript keywords.
Variable names are case-sensitive.
Examples:
validName
studentAge
totalMarks
Department of Computer Science Introduction to JavaScript July 29, 2026 16 / 45
JavaScript Keywords
Keywords have predefined meanings.
Examples:
let
const
var
if
else
for
while
function
Department of Computer Science Introduction to JavaScript July 29, 2026 17 / 45
Data Types
Common JavaScript Data Types:
Data Type Example
Number 100
String ”Hello”
Boolean true
Undefined let x;
Null null
Object {name:”Ali”}
Array [10,20,30]
Department of Computer Science Introduction to JavaScript July 29, 2026 18 / 45
Example: Data Types
let a = 10;
let b = "JavaScript";
let c = true;
[Link](typeof a);
[Link]("<br>");
[Link](typeof b);
[Link]("<br>");
[Link](typeof c);
Department of Computer Science Introduction to JavaScript July 29, 2026 19 / 45
Output
number
string
boolean
Department of Computer Science Introduction to JavaScript July 29, 2026 20 / 45
Comments
Comments improve code readability.
Single-line comment:
// This is a comment
Multi-line comment:
/* This is
a multi-line comment */
Department of Computer Science Introduction to JavaScript July 29, 2026 21 / 45
Arithmetic Operators
Operator Meaning
+ Addition
- Subtraction
* Multiplication
/ Division
% Modulus
++ Increment
– Decrement
Department of Computer Science Introduction to JavaScript July 29, 2026 22 / 45
Example: Arithmetic
let a = 20;
let b = 10;
[Link](a+b);
[Link]("<br>");
[Link](a-b);
[Link]("<br>");
[Link](a*b);
[Link]("<br>");
[Link](a/b);
Department of Computer Science Introduction to JavaScript July 29, 2026 23 / 45
Output
30
10
200
2
Department of Computer Science Introduction to JavaScript July 29, 2026 24 / 45
Comparison Operators
Operator Meaning
== Equal
!= Not Equal
¿ Greater Than
¡ Less Than
¿= Greater Than or Equal
¡= Less Than or Equal
=== Strict Equal
Department of Computer Science Introduction to JavaScript July 29, 2026 25 / 45
Example: Comparison
let a = 10;
let b = 20;
[Link](a>b);
[Link]("<br>");
[Link](a<b);
[Link]("<br>");
[Link](a==b);
Department of Computer Science Introduction to JavaScript July 29, 2026 26 / 45
Control Statements
Control statements determine the order in which program statements are
executed.
JavaScript provides:
for loop
while loop
do-while loop
break statement
continue statement
Department of Computer Science Introduction to JavaScript July 29, 2026 27 / 45
for Loop
The for loop is used when the number of iterations is known.
Syntax
for(initialization;
condition;
increment)
{
statements;
}
Department of Computer Science Introduction to JavaScript July 29, 2026 28 / 45
Program: for Loop
for(let i=1; i<=5; i++)
{
[Link](i);
[Link]("<br>");
}
Department of Computer Science Introduction to JavaScript July 29, 2026 29 / 45
Output
1
2
3
4
5
Department of Computer Science Introduction to JavaScript July 29, 2026 30 / 45
while Loop
The while loop executes as long as the condition is true.
Syntax
while(condition)
{
statements;
}
Department of Computer Science Introduction to JavaScript July 29, 2026 31 / 45
Program: while Loop
let i = 1;
while(i <= 5)
{
[Link](i);
[Link]("<br>");
i++;
}
Department of Computer Science Introduction to JavaScript July 29, 2026 32 / 45
Output
1
2
3
4
5
Department of Computer Science Introduction to JavaScript July 29, 2026 33 / 45
do-while Loop
The do-while loop executes at least once.
Syntax
do
{
statements;
}
while(condition);
Department of Computer Science Introduction to JavaScript July 29, 2026 34 / 45
Program: do-while
let i = 1;
do
{
[Link](i);
[Link]("<br>");
i++;
}
while(i <= 5);
Department of Computer Science Introduction to JavaScript July 29, 2026 35 / 45
Output
1
2
3
4
5
Department of Computer Science Introduction to JavaScript July 29, 2026 36 / 45
break Statement
The break statement terminates the loop immediately.
Example:
if(i==6)
break;
Department of Computer Science Introduction to JavaScript July 29, 2026 37 / 45
Program: break
for(let i=1;i<=10;i++)
{
if(i==6)
break;
[Link](i);
[Link]("<br>");
}
Department of Computer Science Introduction to JavaScript July 29, 2026 38 / 45
Output
1
2
3
4
5
Department of Computer Science Introduction to JavaScript July 29, 2026 39 / 45
continue Statement
The continue statement skips the current iteration.
Example:
if(i==3)
continue;
Department of Computer Science Introduction to JavaScript July 29, 2026 40 / 45
Program: continue
for(let i=1;i<=5;i++)
{
if(i==3)
continue;
[Link](i);
[Link]("<br>");
}
Department of Computer Science Introduction to JavaScript July 29, 2026 41 / 45
Output
1
2
4
5
Department of Computer Science Introduction to JavaScript July 29, 2026 42 / 45
Program: Multiplication Table
let n =
Number(prompt("Enter Number"));
for(let i=1;i<=10;i++)
{
[Link](n + " x " + i
+ " = " + (n*i));
[Link]("<br>");
}
Department of Computer Science Introduction to JavaScript July 29, 2026 43 / 45
Sample Output
Input
5
Output
5x1=5
5 x 2 = 10
...
5 x 10 = 50
Department of Computer Science Introduction to JavaScript July 29, 2026 44 / 45
Applications
Control statements are used in:
Pattern Printing
Searching
Menu Driven Programs
Mathematical Calculations
Games and Simulations
Department of Computer Science Introduction to JavaScript July 29, 2026 45 / 45
Introduction to JavaScript
Introduction to Scripting
Department of Computer Science
July 29, 2026
Department of Computer Science Introduction to JavaScript July 29, 2026 1 / 80
Learning Objectives
Understand JavaScript.
Learn scripting concepts.
Know the features of JavaScript.
Write a simple JavaScript program.
Department of Computer Science Introduction to JavaScript July 29, 2026 2 / 80
What is JavaScript?
JavaScript is a scripting language.
It is used to make web pages interactive.
It works together with HTML and CSS.
Runs inside the web browser.
Department of Computer Science Introduction to JavaScript July 29, 2026 3 / 80
What is Scripting?
A script is a small program that performs a specific task automatically.
Examples:
Display messages
Validate forms
Perform calculations
Create animations
Department of Computer Science Introduction to JavaScript July 29, 2026 4 / 80
Features of JavaScript
Lightweight
Easy to Learn
Object-Oriented
Platform Independent
Event Driven
Fast Execution
Department of Computer Science Introduction to JavaScript July 29, 2026 5 / 80
Why JavaScript?
JavaScript is used for:
Form Validation
Dynamic Content
Games
Animations
Interactive Websites
Department of Computer Science Introduction to JavaScript July 29, 2026 6 / 80
JavaScript in HTML
JavaScript can be written inside the <script> tag.
Syntax
<script>
JavaScript Code
</script>
Department of Computer Science Introduction to JavaScript July 29, 2026 7 / 80
Example 1
HTML + JavaScript
<!DOCTYPE html>
<html>
<body>
<script>
[Link]("Hello JavaScript");
</script>
</body>
</html>
Department of Computer Science Introduction to JavaScript July 29, 2026 8 / 80
Output
Output displayed on the browser:
Hello JavaScript
Department of Computer Science Introduction to JavaScript July 29, 2026 9 / 80
Example 2
Using Alert Box
<script>
alert("Welcome");
</script>
Department of Computer Science Introduction to JavaScript July 29, 2026 10 / 80
Output
A popup dialog box appears.
Welcome
Department of Computer Science Introduction to JavaScript July 29, 2026 11 / 80
Advantages
Faster execution
Easy debugging
Supported by all browsers
Improves user interaction
Department of Computer Science Introduction to JavaScript July 29, 2026 12 / 80
Summary
JavaScript is a client-side scripting language.
It adds interactivity to web pages.
JavaScript is embedded using the <script> tag.
It is widely used in modern web development.
Department of Computer Science Introduction to JavaScript July 29, 2026 13 / 80
JavaScript Fundamentals
JavaScript programs are built using:
Variables
Data Types
Operators
Comments
Statements
Department of Computer Science Introduction to JavaScript July 29, 2026 14 / 80
Variables
A variable is used to store data.
Syntax
let variableName = value;
Example:
let name = "John";
let age = 20;
Department of Computer Science Introduction to JavaScript July 29, 2026 15 / 80
Variable Naming Rules
Must begin with a letter, or $.
Cannot start with a number.
Cannot use JavaScript keywords.
Variable names are case-sensitive.
Examples:
validName
studentAge
totalMarks
Department of Computer Science Introduction to JavaScript July 29, 2026 16 / 80
JavaScript Keywords
Keywords have predefined meanings.
Examples:
let
const
var
if
else
for
while
function
Department of Computer Science Introduction to JavaScript July 29, 2026 17 / 80
Data Types
Common JavaScript Data Types:
Data Type Example
Number 100
String ”Hello”
Boolean true
Undefined let x;
Null null
Object {name:”Ali”}
Array [10,20,30]
Department of Computer Science Introduction to JavaScript July 29, 2026 18 / 80
Example: Data Types
let a = 10;
let b = "JavaScript";
let c = true;
[Link](typeof a);
[Link]("<br>");
[Link](typeof b);
[Link]("<br>");
[Link](typeof c);
Department of Computer Science Introduction to JavaScript July 29, 2026 19 / 80
Output
number
string
boolean
Department of Computer Science Introduction to JavaScript July 29, 2026 20 / 80
Comments
Comments improve code readability.
Single-line comment:
// This is a comment
Multi-line comment:
/* This is
a multi-line comment */
Department of Computer Science Introduction to JavaScript July 29, 2026 21 / 80
Arithmetic Operators
Operator Meaning
+ Addition
- Subtraction
* Multiplication
/ Division
% Modulus
++ Increment
– Decrement
Department of Computer Science Introduction to JavaScript July 29, 2026 22 / 80
Example: Arithmetic
let a = 20;
let b = 10;
[Link](a+b);
[Link]("<br>");
[Link](a-b);
[Link]("<br>");
[Link](a*b);
[Link]("<br>");
[Link](a/b);
Department of Computer Science Introduction to JavaScript July 29, 2026 23 / 80
Output
30
10
200
2
Department of Computer Science Introduction to JavaScript July 29, 2026 24 / 80
Comparison Operators
Operator Meaning
== Equal
!= Not Equal
¿ Greater Than
¡ Less Than
¿= Greater Than or Equal
¡= Less Than or Equal
=== Strict Equal
Department of Computer Science Introduction to JavaScript July 29, 2026 25 / 80
Example: Comparison
let a = 10;
let b = 20;
[Link](a>b);
[Link]("<br>");
[Link](a<b);
[Link]("<br>");
[Link](a==b);
Department of Computer Science Introduction to JavaScript July 29, 2026 26 / 80
Logical Operators
Operator Meaning
&& AND
|| OR
! NOT
Example:
Age > 18 && Age < 60
Department of Computer Science Introduction to JavaScript July 29, 2026 27 / 80
Complete Program
<!DOCTYPE html>
<html>
<body>
<script>
let name = "John";
let marks = 85;
[Link](name);
[Link]("<br>");
[Link](marks);
</script>
</body>
</html>
Department of Computer Science Introduction to JavaScript July 29, 2026 28 / 80
Output
John
85
Department of Computer Science Introduction to JavaScript July 29, 2026 29 / 80
JavaScript Dialog Boxes
JavaScript provides three dialog boxes:
alert() - Displays a message.
prompt() - Accepts user input.
confirm() - Accepts Yes/No response.
Department of Computer Science Introduction to JavaScript July 29, 2026 30 / 80
alert() Function
The alert() function displays a popup message.
Syntax
alert("Welcome");
Department of Computer Science Introduction to JavaScript July 29, 2026 31 / 80
Example: alert()
<!DOCTYPE html>
<html>
<body>
<script>
alert("Welcome to JavaScript");
</script>
</body>
</html>
Department of Computer Science Introduction to JavaScript July 29, 2026 32 / 80
Output
Popup Message
Welcome to JavaScript
Department of Computer Science Introduction to JavaScript July 29, 2026 33 / 80
prompt() Function
The prompt() function accepts input from the user.
Syntax
prompt("Enter your name");
The entered value is stored as a string.
Department of Computer Science Introduction to JavaScript July 29, 2026 34 / 80
Example: prompt()
let name = prompt("Enter your name");
[Link]("Welcome " + name);
Department of Computer Science Introduction to JavaScript July 29, 2026 35 / 80
Applications
Arithmetic operations are used in:
Calculator Applications
Student Mark Calculation
Banking Systems
Billing Software
Shopping Websites
Department of Computer Science Introduction to JavaScript July 29, 2026 61 / 80
Summary
Arithmetic operators perform calculations.
Assignment operators update variable values.
Increment and decrement modify values by one.
JavaScript follows operator precedence.
Department of Computer Science Introduction to JavaScript July 29, 2026 62 / 80
Decision Making
Decision-making statements execute different blocks of code based on a
condition.
Common decision-making statements:
if
if-else
else-if ladder
switch
Department of Computer Science Introduction to JavaScript July 29, 2026 63 / 80
if Statement
The if statement executes a block only when the condition is true.
Syntax
if(condition)
{
statements;
}
Department of Computer Science Introduction to JavaScript July 29, 2026 64 / 80
Program: if Statement
let age = 20;
if(age >= 18)
{
[Link]("Eligible to Vote");
}
Department of Computer Science Introduction to JavaScript July 29, 2026 65 / 80
Output
Eligible to Vote
Department of Computer Science Introduction to JavaScript July 29, 2026 66 / 80
if-else Statement
The if-else statement selects one of two blocks.
Syntax
if(condition)
{
Block 1;
}
else
{
Block 2;
}
Department of Computer Science Introduction to JavaScript July 29, 2026 67 / 80
Program: if-else
let marks = 45;
if(marks >= 50)
{
[Link]("Pass");
}
else
{
[Link]("Fail");
}
Department of Computer Science Introduction to JavaScript July 29, 2026 68 / 80
Output
Fail
Department of Computer Science Introduction to JavaScript July 29, 2026 69 / 80
else-if Ladder
Used when multiple conditions need to be checked.
if(condition1)
{
}
else if(condition2)
{
}
else
{
}
Department of Computer Science Introduction to JavaScript July 29, 2026 70 / 80
Program: Grade Calculation
let mark = 82;
if(mark >= 90)
[Link]("Grade A+");
else if(mark >= 80)
[Link]("Grade A");
else if(mark >= 70)
[Link]("Grade B");
else
[Link]("Grade C");
Department of Computer Science Introduction to JavaScript July 29, 2026 71 / 80
Output
Grade A
Department of Computer Science Introduction to JavaScript July 29, 2026 72 / 80
Nested if
A nested if statement is an if statement inside another if statement.
Example:
if(age >= 18)
{
if(age < 60)
{
Eligible
}
}
Department of Computer Science Introduction to JavaScript July 29, 2026 73 / 80
Program: Nested if
let age = 25;
if(age >= 18)
{
if(age <= 60)
[Link]("Adult");
}
Department of Computer Science Introduction to JavaScript July 29, 2026 74 / 80
switch Statement
The switch statement selects one block from multiple choices.
Syntax
switch(expression)
{
case value:
statements;
break;
default:
statements;
}
Department of Computer Science Introduction to JavaScript July 29, 2026 75 / 80
Program: switch
let day = 2;
switch(day)
{
case 1:
[Link]("Monday");
break;
case 2:
[Link]("Tuesday");
break;
default:
[Link]("Invalid");
}
Department of Computer Science Introduction to JavaScript July 29, 2026 76 / 80
Output
Tuesday
Department of Computer Science Introduction to JavaScript July 29, 2026 77 / 80
Complete Program
let number =
Number(prompt("Enter Number"));
if(number % 2 == 0)
{
[Link]("Even Number");
}
else
{
[Link]("Odd Number");
}
Department of Computer Science Introduction to JavaScript July 29, 2026 78 / 80
Sample Output
Input
12
Output
Even Number
Department of Computer Science Introduction to JavaScript July 29, 2026 79 / 80
Applications
Decision making is used in:
Login Systems
ATM Software
Student Result Processing
Online Shopping
Banking Applications
Department of Computer Science Introduction to JavaScript July 29, 2026 80 / 80