BA

GH
EL
CO
M
PU
TE
R
CE
N
TR
E
 Index

What is JavaScript?.......................... 3

E
Comparison between JavaScript and Java:.. 6

TR
How can apply..................................7

N
Print hello world............................... 8

CE
What is variable and data?................... 9

R
Rules to declare a variable.................. 25
TE
PU
M
CO
EL
GH
BA
 What is JavaScript?

JavaScript is a popular programming and

E
scripting language used to make web pages

TR
interactive.

N
CE
JavaScript is a scripting language because it is

R
mainly used to control web pages by adding
TE
interactive features like buttons, animations,
PU

and pop-ups.
M

It is also a programming language because it

CO

can handle complex tasks, store data, and even

EL

run on servers using [Link].

GH
BA
5 Easy Features of JavaScript

1.​Makes Websites Interactive – Adds

animations, buttons, and effects.

E
2.​Runs in Web Browsers – No need to install

TR
extra software.

N
3.​Handles User Actions – Responds to clicks,

CE
typing, and mouse movements.

R
TE
4.​Updates Web Content Dynamically –
Changes text, images, and styles without
PU

reloading the page.

M

5.​Works with HTML & CSS – Controls

CO

webpage layout and design.

EL
GH
BA
5 Important Uses of JavaScript

1.​Web Development – Powers interactive

websites.

E
2.​Form Validation – Checks if users enter

TR
correct details (e.g., email, password).

N
3.​Games & Animations – Creates fun

CE
web-based games.

R
TE
4.​Mobile & Web Apps – Used in apps like
WhatsApp Web and Instagram.
PU

5.​Server-Side Development – Works with

M

[Link] to build backend systems.

CO

Founder & Date:

EL

Founder: Brendan Eich

GH

●​

Year: 1995
BA

●​
 Comparison between JavaScript and
Java:

E
TR
JavaScript Java

N
Used to make websites Used to create big

CE
interactive. software and mobile apps.
Runs inside a web Runs on computers,

R
TE
browser. mobiles, and servers.
Easier to learn and write. More complex and requires
PU

setup.
M

Interpreted language Compiled language

CO

(executes line by line). (converted into machine

code before running).
EL

Mainly used for web Used for many types of

GH

development. software, including Android

apps.
BA
 How can apply

Internal
-inside head tag

E
TR
-inside body tag
-inside both head and body tag

N
CE
External
-save file with .js extension.

R
TE
-For link javascript file with html use.
<script src=”[Link]”></script>
PU
M
CO
EL
GH
BA
 Print hello world

Input

E
TR
N
CE
R
TE
Output
PU
M
CO
EL
GH
BA
 What is variable and data?

1. Variable

E
A variable is like a container that holds a

TR
value. You can think of it as a labeled box

N
where you store information. We use variables

CE
to save data that we want to use or change

R
later in the program.
TE
PU
M
CO
EL
GH
BA
Understanding Variable Scope

[Link] Scope – A variable that can be used

anywhere in the program.

E
TR
[Link] Scope – A variable that can be used
only inside a function.

N
CE
[Link] Scope – A variable works inside

R
the whole function, even inside {} blocks.
TE
[Link] Scope – A variable works only inside {}
PU

where it is declared.
M
CO
EL
GH
BA
 ●​To create a variable, we use keywords like
let, const, or var.

E
TR
N
CE
R
TE
Syntax for variable declare:-
PU
M
CO
EL
GH
BA
Types of Variables in JavaScript
var – Old way to declare variables (can be
changed and used anywhere).

E
let – Modern way, can be changed but only

TR
inside its block.

N
const – Stores fixed values that cannot be

CE
changed.​

R
TE
PU
M
CO
EL
GH
BA
 Let
Redeclare - no

E
TR
N
CE
R
TE
Reassign- yes
PU
M
CO
EL
GH
BA
BA
GH
Blockscope-yes

EL
CO
M
PU
TE
R
CE
N
TR
E
Functional scope-yes

E
TR
N
CE
R
TE
PU
M
CO
EL
GH
BA
BA
GH
EL
Global scope-no

CO
M
PU
TE
R
CE
N
TR
E
BA
GH
EL Redecalre-no

CO
M
PU
Const

TE
R
CE
N
TR
E
BA
GH
Reassign-no

EL
CO
M
PU
TE
R
CE
N
TR
E
Global scope-no

E
TR
N
CE
R
TE
Blockscope-yes
PU
M
CO
EL
GH
BA
Functional scope- yes

E
TR
N
CE
R
TE
PU
M
CO
EL
GH
BA
 Var
Functional scope-yes

E
TR
N
CE
R
TE
PU
M
CO
EL
GH
BA
BA
GH
Block scope-no

EL
CO
M
PU
TE
R
CE
N
TR
E
Redeclare - yes

E
TR
N
CE
R
TE
PU
M

Reassign - yes
CO
EL
GH
BA
Global scope-yes

E
TR
N
CE
R
TE
PU

Output
M
CO
EL
GH
BA
2. Data

Data refers to the actual information or values

stored in variables. In JavaScript, data can

E
come in different types, including:

TR
N
●​Numbers: Like 5, 3.14

CE
●​Strings: Text values, like "Hello, World!"
●​Booleans: True or false values, like true or
R
TE
false
PU

●​Objects: Complex data with multiple

M

properties which contain key and values,

CO

like {name: "Alice", age: 25}

●​Arrays: Lists of values, like [1, 2, 3]
EL

●​Undefined : Variable declared but not

GH

assigned a value ,like( let x;)

BA

●​Null : Represents "nothing" or empty,​

let y = null;
 Rules to declare a variable

●​Variable names must start with a letter, _

E
(underscore), or $ (dollar sign).

TR
N
CE
R
●​Variable names cannot start with a number.
TE
PU
M

●​Variable names can only contain letters,

CO

numbers, _, and $.
EL
GH
BA
 ●​JavaScript is case-sensitive (uppercase and
lowercase are different).

E
TR
N
CE
●​Variable names cannot be JavaScript

R
reserved words (like var, if, function).
TE
PU
M
CO
EL
GH
BA
BA
GH
EL
CO
M
PU
TE
R
CE
N
TR
E
 Index

E
TR
Comments
Use /* ... */ to add comments that span multiple lines

N
JavaScript Operator Types

CE
1. Arithmetic Operators
2. JavaScript Assignment Operators

R
3. JavaScript Comparison Operators
TE
4. JavaScript Logical Operators
PU

[Link] Bitwise Operators

JavaScript Bitwise AND
M

JavaScript Bitwise OR
CO

JavaScript Bitwise XOR

JavaScript Bitwise NOT
EL

JavaScript Left shift (<<)

JavaScript Right shift (>>)
GH

[Link] operator
typeof
BA

instanceof
 Comments

Single-line Comments

E
TR
Use // for comments that fit on one line.

N
Multi-line Comments

CE
R
Use /* ... */ to add comments that span
TE
multiple lines
PU
M
CO
EL
GH
BA
 JavaScript Operator Types

list of different JavaScript operators:-

E
TR
1. Arithmetic Operators

N
2. Assignment Operators

CE
3. Comparison Operators

R
TE
4. Logical Operators
PU

5. Bitwise Operators
M

6. Special Operators
CO
EL
GH
BA
 1. Arithmetic Operators

Operator Name Example

+ Addition 3 + 4 // 7

E
TR
- Subtraction 5 - 3 // 2

N
* Multiplication 2 * 3 // 6

CE
/ Division 4 / 2 // 2

R
TE
% Remainder 5 % 2 // 1
PU

++ Increment ++5 // 6
M

(increments by 1)
CO

-- Decrement --4 // 3
(decrements by 1)
EL
GH

** Exponentiation 4 ** 2 // 16
(Power)
BA

INPUT
 With [Link]

E
TR
N
CE
R
TE
PU
M
CO
EL
GH
BA
BA
GH
EL
CO
M
PU
OUTPUT

TE
R
CE
N
TR
E
 Input

With [Link]()

E
TR
N
CE
R
TE
PU
M
CO
EL
GH
BA
 2. JavaScript Assignment Operators

Operator Name Example

= Assignment a = 7;

E
TR
Operator

N
+= Addition a += 5; // a = a + 5

CE
Assignment

R
TE
-= Subtraction a -= 2; // a = a - 2
Assignment
PU

*= Multiplication a *= 3; // a = a * 3
M

Assignment
CO

/= Division a /= 2; // a = a / 2
EL

Assignment
GH

%= Remainder a %= 2; // a = a % 2
Assignment
BA

**= Exponentiation a **= 2; // a = a**2

Assignment
 Input

With [Link]

E
TR
N
CE
R
TE
PU
M
CO
EL
GH
BA
BA
GH
EL
CO
M
PU
Output

TE
R
CE
N
TR
E
 Input

With [Link]()

E
TR
N
CE
R
TE
PU
M
CO
EL
GH
BA
BA
GH
EL
CO
M
PU
Output

TE
R
CE
N
TR
E
 3. JavaScript Comparison Operators

Operator Meaning Example

E
== Equal to 3 == 5 gives us false

TR
!= Not equal to 3 != 4 gives us true

N
CE
> Greater than 4 > 4 gives us false

R
TE
< Less than 3 < 3 gives us false
PU

>= Greater than or 4 >= 4 gives us true

M

equal to
CO

<= Less than or 3 <= 3 gives us true

EL

equal to
GH

=== Strictly equal 3 === "3" gives us

BA

to false
!== Strictly not 3 !== "3" gives us true
equal to

E
TR
Difference between == and === in

N
JavaScript:

CE
1. == (Equality Operator)

R
TE
Checks value only.
PU

2. === (Strict Equality Operator)

M

Checks value and type.

CO
EL
GH
BA
Input

With [Link]

E
TR
N
CE
R
TE
PU
M
CO
EL
GH
BA
BA
GH
EL
CO
M
PU
Output

TE
R
CE
N
TR
E
 Input

With [Link]()

E
TR
N
CE
R
TE
PU
M
CO
EL
GH
BA
BA
GH
EL
CO
M
PU
Output

TE
R
CE
N
TR
E
 4. JavaScript Logical Operators

Operator Syntax Description

E
&& (Logical && true only if both

TR
AND) expression1 and

N
expression2 are true

CE
|| (Logical OR) || true if either

R
TE
expression1 or
PU

expression2 is true
M

! (Logical ! false if expression is

CO

NOT) true and vice versa

EL
GH
BA
 Input

With [Link]

E
TR
N
CE
R
TE
PU
M
CO

Output
EL
GH
BA
 Input

With [Link]()

E
TR
N
CE
R
TE
PU
M
CO
EL
GH
BA
BA
GH
EL
CO
M
PU
Output

TE
R
CE
N
TR
E
 [Link] Bitwise Operators

Operators Name Example

E
TR
& Bitwise AND x & y

N
CE
| Bitwise OR x | y

R
TE
^ Bitwise XOR x ^ y
PU

~ Bitwise NOT ~x
M
CO

<< Left shift x << y

EL

>> right shift x >> y

GH
BA
 JavaScript Bitwise AND

Bitwise AND & returns 1 if the

corresponding bits of both operands are 1

E
else it returns 0.

TR
N
CE
Operand 1 Operand 2 AND

R
TE
Operation
PU

0 0 0 & 0 is 0
M
CO

0 1 0 & 1 is 0
EL

1 0 1 & 0 is 0
GH

1 1 1 & 1 is 1
BA
 Let's take a look at the bitwise AND
operation of two integers 12 and 25.

E
TR
N
CE
R
TE
PU
M
CO
EL
GH
BA
 Example 1: Bitwise AND Operator

E
TR
N
CE
R
TE
PU
M
CO
EL
GH
BA
 JavaScript Bitwise OR

Bitwise OR | returns 1 if either of the

corresponding bits of one operand is 1 else

E
TR
returns 0.

N
CE
Operand 1 Operand 2 OR Operation

R
TE
0 0 0 | 0 is 0
PU
M

0 1 0 | 1 is 1
CO
EL

1 0 1 | 0 is 1
GH

1 1 1 | 1 is 1
BA
Let's take a look at the bitwise OR operation
of two integers 12 and 25.

E
TR
N
CE
R
TE
PU
M
CO
EL
GH
BA
 Example 2: Bitwise OR Operator

E
TR
N
CE
R
TE
PU
M
CO
EL
GH
BA
 JavaScript Bitwise XOR

Bitwise XOR ^ returns 1 if the corresponding

bits are different and returns 0 if the

E
TR
corresponding bits are the same.

N
CE
Operand 1 Operand 2 XOR Operation

R
TE
0 0 0 ^ 0 is 0
PU
M

0 1 0 ^ 1 is 1
CO
EL

1 0 1 ^ 0 is 1
GH

1 1 1 ^ 1 is 0
BA
 E
TR
N
CE
R
TE
Example 3: Bitwise XOR Operator
PU
M
CO
EL
GH
BA
 JavaScript Bitwise NOT

Bitwise NOT ~ inverts the bit( 0 becomes 1, 1

becomes 0).

E
TR
Formula:

N
~a = -(a + 1)

CE
Example 4: Bitwise NOT Operator

R
TE
PU
M
CO
EL
GH
BA
 JavaScript Left shift (<<)

To shift 3 left by 2 positions:

1. Initial value: 3 in binary = 00000011.

E
TR
[Link] shift by 2: Move bits left by 2 and

N
add 0s on the right → 00001100.

CE
[Link]: 00001100 = 12 in decimal.

R
TE
Shortcut:
1- 3 << 2 = 3 * (2²) = 3 * 4 = 12.
PU
M

2- 5 << 3 = 5 * (2³) = 5 * 8 = 40.

CO
EL
GH
BA
 JavaScript Right shift (>>)

To shift 12 right by 2 positions:

1. Initial value: 12 in binary = 00001100.

E
TR
2. Right shift by 2: Move bits right by 2
and discard the rightmost bits →

N
CE
00000011.
3. Result: 00000011 = 3 in decimal.

R
TE
Shortcut:
PU

1. 12 >> 2 = 12 / (2²) = 12 / 4 = 3.
M

2. 40 >> 3 = 40 / (2³) = 40 / 8 = 5.
CO
EL
GH
BA
BA
GH
EL
CO
M
PU
TE
R
CE
N
TR
E
 [Link] operator

typeof

The typeof operator in JavaScript is used to

E
TR
determine the data type of a value or variable.
It returns a string indicating the type.

N
CE
It helps identify the type of a value, which is

R
especially useful in debugging and writing
TE
dynamic code.
PU
M
CO
EL
GH
BA
BA
GH
EL
CO
M
Input

PU

Output
TE
R
CE
N
TR
E
What is object

An object is a data structure that stores

key-value pairs. Each key is a unique

E
identifier, and the value can be any type of

TR
data.

N
CE
Note:- array is also a type of object.

R
Syntax Example:
TE
PU
M

let person = {
CO

name: "John", // key: "name", value: "John"

EL

age: 30 // key: "age", value: 30

GH

};
BA
Explanation:

● person is an object with two properties:

name and age.

E
● The key "name" has the value "John", and

TR
the key "age" has the value 30.

N
CE
Objects are written inside {} and each
key-value pair is separated by a comma.

R
TE
PU
M
CO
EL
GH
BA
 instanceof

Definition: instanceof checks if an object is

made from a specific type or class.

E
TR
It is true if the object is of that type,

N
otherwise false.

CE
Input

R
TE
PU
M
CO
EL
GH
BA
BA
GH
EL
CO
M
PU
Output

TE
R
CE
N
TR
E
 rt e
e n
r C
t e
p u
o m
C
"Conditional
g hel Statement "
B a
 Conditional Statement
● A conditional statement allows a program to
make decisions by running different code

rt e
depending on whether a condition is true or
false.
e n
C
● Types of Conditional Statements:
1. if Statement
e r
u t
2. if...else Statement
p Statement
m
3. if...else if...else

o
4. switch Statement
C
e l
g h
B a
 1- parseInt()
Meaning:
parseInt() converts a string to an integer by
parsing it and stopping at the first non-numeric

rt e
character.

2- parseFloat() e n
r C
Meaning:
t e
u
p decimals.
parseFloat() converts a string to a

m
floating-point number, allowing
o
l 3-
C prompt()
Meaning: h
e
a g
B
prompt() displays a dialog box that asks the
user for input and returns the input as a string.
 1-
if Statement
The if statement runs a block of code only if a
specified condition is true.

Syntax: rt e
e n
r C
t e
p u
o m
l C
he
a g
B
 2-
if...else Statement
The if...else statement runs one block of code if
the condition is true and another block if it is
false.
rt e
Syntax:
e n
r C
t e
p u
o m
l C
he
a g
B
 3-
if...else if...else Statement
The if...else if...else statement tests multiple
conditions in sequence and runs the block of
r e
code for the first condition that evaluates tot true.
e n
Syntax:
r C
t e
p u
o m
l C
h e
a g
B
 4-
switch Statement
The switch statement evaluates an expression
and runs the matching case’s block of code. If no

rt e
cases match, the default block is executed..

Syntax:
e n
r C
t e
p u
o m
l C
he
a g
B
BA
GH
EL
CO
M
PU
TE
R
CE
N
TR
E
 Index

Function in JavaScript

E
A function is a block of reusable code that

TR
performs a specific task. You can use functions

N
to organize and reuse code without having to

CE
write the same code repeatedly.

R
TE
Syntax of a Function:
PU
M
CO
EL
GH
BA
explanation:
● function: This keyword tells JavaScript
that you're defining a function.
● functionName: The name of the function.

E
TR
You can call this function by its name.
● { }: Curly braces contain the code that the

N
function will execute when it's called.

CE
R
TE
PU
M
CO
EL
GH
BA
🧩 Question 1: How to create a function that
prints "Hello, World!"?

E
TR
N
CE
R
TE
PU
M
CO
EL
GH
BA
🧩 Question 2: How to pass a name to a
function and print it?

E
TR
N
CE
R
TE
PU
M
CO
EL
GH
BA
🧩 Question 3: How to create a function that
adds two numbers and prints the result?

E
TR
N
CE
R
TE
PU
M
CO
EL
GH
BA
BA
GH
EL
Now user define

CO
M
PU
TE
R
CE
N
TR
E
🧩 Question 4: How to create a function that
checks if a number is even or odd?

E
TR
N
CE
R
TE
PU
M
CO
EL
GH
BA
🧩 Question 5: Which is the largest of the
two numbers?

E
TR
N
CE
R
TE
PU
M
CO
EL
GH
BA
Ba
gh
el
Co
m
pu
te
r
Ce
nt
re
 What is a JavaScript Event?

A JavaScript event is an action or something

that happens on a webpage.

re
1.​ onclick: Happens when you click on an

nt
element (like a button).

Ce
2.​ onmouseover: Activates when the mouse
pointer moves over an element (like

r
hovering over a button).
te
3.​ onmouseout: Happens when the mouse
pu

pointer leaves an element (like moving the

m

cursor off a button).

Co

4.​ onkeydown: Happens when a key is

pressed on the keyboard.
el

5.​ onload:Happens when a webpage or

gh

element finishes loading (like when the page

fully loads).
Ba

6.​ oninput: Happens when the value in an

input field changes in real-time (e.g., as
you type).
 7.​ onchange: Happens when the value in an
input field changes (e.g., typing in a text
box).
8.​ onfocus: Happens when an input element
(like a text box) is selected or clicked on.

re
9.​ onblur: Happens when you move away

nt
from an input element (like clicking out of a

Ce
text box).
10.​onsubmit: Happens when a form is

r
submitted, often used to validate the form
te
before submission.
pu
m
Co
el
gh
Ba
 Onclick
JavaScript Popup Boxes

1️⃣ Alert Box​

re
It shows a message to the user with an OK

nt
button.​

Ce
Syntax: alert();

r Input
te
pu
m
Co
el
gh
Ba
Ba
gh
el
Co
m
Output

pu
te
r
Ce
nt
re
2️⃣ Confirm Box​
It shows a message with OK and Cancel
buttons. It returns true if the user clicks OK,
and false if they click Cancel.​

re
Syntax: confirm();

nt
Input

Ce
r
te
pu
m
Co
el
gh
Ba
Ba
gh
el
Co
m
Output

pu
te
r
Ce
nt
re
3️⃣ Prompt Box​
It asks the user to enter something. It
returns the entered text or null if the user
clicks Cancel.​

re
Syntax: prompt();

nt
Input

Ce
r
te
pu
m
Co
el
gh
Ba
Ba
gh
el
Co
m
Output

pu
te
r
Ce
nt
re
 ONMOUSEOVER / ONMOUSEOUT

Input

re
nt
Ce
r
te
pu

Output
m
Co
el
gh
Ba
Ba
gh
el
Co
m
Input

Output
pu
ONLOAD

te
r
Ce
nt
re
Ba
gh
el
Co
m
Input

Output
pu
Oninput

te
r
Ce
nt
re
 ONKEYDOWN

Input

re
nt
Ce
r
te
pu
m
Co

Output
el
gh
Ba
Conclusion
●​ Use onkeydown if you want to detect key
presses, even when the value doesn’t
change.​

re
nt
●​ Use oninput if you want to detect actual
content changes in the input field.

Ce
r
te
pu
m
Co
el
gh
Ba
Ba
gh
el
Co
m
Input

Output
pu
Onchange

te
r
Ce
nt
re
 Onfocus /onblur
Input

re
nt
Ce
r
te
pu
m
Co

Output
el
gh

By click on input
Ba

By click outside input

Ba
gh
el
Co
m
Input

pu
Onsubmit

te
r
Ce
nt
re
Ba
gh
el
Co
m
Output

pu
te
r
Ce
nt
re