JavaScript
1. What is JavaScript?
JavaScript (JS) is a programming language used to make web pages interactive and dynamic.
Examples:
• Button click actions
• Image sliders
• Form validation
• Calculations
2. Adding JavaScript to HTML
a) Internal JavaScript
JavaScript written inside HTML using <script>.
<script>
[Link]("Hello World");
</script>
b) External JavaScript
JavaScript stored in a separate .js file.
HTML file:
<script src="[Link]"></script>
[Link]:
alert("External JavaScript");
3. Changing HTML Content
Change text
HTML:
<p id="demo">Hello</p>
JavaScript:
[Link]("demo").innerHTML = "Welcome";
Output: Hello → Welcome
Calculations
let x = 10;
let y = 5;
let total = x + y;
[Link](total);
Output:
15
String Manipulation
let fname = "John";
let lname = "Smith";
let full = fname + " " + lname;
[Link](full);
Output:
John Smith
Change Images
[Link]("pic").src = "[Link]";
4. Changing HTML Styles
Syntax:
[Link](id).[Link] = "value";
Example:
[Link]("demo").[Link] = "red";
Change font size:
[Link]("demo").[Link] = "30px";
5. Show / Hide Elements
Visibility
Hidden but space remains.
Hide:
[Link]("box").[Link] = "hidden";
Show:
[Link]("box").[Link] = "visible";
Display
Hidden and space removed.
Hide:
[Link]("box").[Link] = "none";
Show:
[Link]("box").[Link] = "block";
6. Displaying Data
a) innerHTML
[Link]("demo").innerHTML = "Hello";
b) [Link]()
[Link]("Welcome");
c) alert()
[Link]("Warning!");
d) [Link]()
[Link]("Debug message");
7. HTML Events
Events happen when users interact with a webpage.
onload
Runs when page loads.
<body >
onchange
Runs when value changes.
<input >
onclick
<button >
onmouseover
Mouse enters.
<p me</p>
onmouseout
Mouse leaves.
<p out</p>
onkeydown
Key pressed.
<input >
8. User Interaction
prompt()
Gets user input.
let name = prompt("Enter name");
confirm()
Returns true or false.
confirm("Are you sure?");
alert()
alert("Saved");
9. JavaScript Syntax
A statement is an instruction.
Example:
let x = 5;
Statements contain:
Values
10
"Hello"
true
Variables
let age = 20;
Operators
Keywords
Examples:
let
if
else
function
10. Comments
Single-line
// This is comment
Multi-line
/*
This is
multi-line comment
*/
11. Functions
Reusable blocks of code.
function greet() {
alert("Hello");
Called using:
greet();
Event Function
<button >
Self-invoked Function
Runs automatically.
(function(){
alert("Auto run");
})();
12. Timing Events
setTimeout()
Runs once after delay.
setTimeout(function(){
alert("Hello");
}, 3000);
After 3 seconds → alert appears.
setInterval()
Runs repeatedly.
setInterval(function(){
[Link]("Running");
}, 2000);
Runs every 2 seconds.
13. Data Types
Number
let x = 5;
String
let name = "John";
Boolean
let pass = true;
Array
Stores multiple values.
let colors = ["red","blue","green"];
Object
Stores properties.
let student = {
name: "John",
age: 18
};
14. Type Conversion
String to Number:
Number("50")
Number to String:
String(50)
15. Arrays
let fruits = ["Apple","Orange","Mango"];
Access item:
fruits[0]
Output:
Apple
16. Operators
Arithmetic
+,-,*,/,%
Example:
5+3
17. Logical Operators
AND (&&)
Both must be true.
x > 5 && y < 10
OR (||)
One must be true.
x > 5 || y < 10
NOT (!)
Opposite.
!(x > 5)
18. Comparison Operators
Equal value:
==
Equal value & type:
===
Not equal:
!=
Not equal value & type:
!==
Greater than:
>
Less than:
<
Greater or equal:
>=
Less or equal:
<=
19. Conditional Statements
if
if(age >= 18){
alert("Adult");
if else
if(age >= 18){
alert("Adult");
else{
alert("Child");
}
else if
if(mark >= 75){
grade="A";
}
else if(mark >= 50){
grade="B";
}
switch
switch(day){
case 1:
alert("Monday");
break;
}
20. Ternary Operator
Short if-else.
let result = age >= 18 ? "Adult" : "Child";
21. Loops
Used to repeat code.
For Loop
for(let i=0; i<5; i++){
[Link](i);
Output:
01234
for/in Loop
Used for objects.
let person = {name:"John", age:20};
for(let x in person){
[Link](person[x]);
}
while Loop
let i = 0;
while(i < 5){
[Link](i);
i++;
do/while Loop
Runs at least once.
let i = 0;
do{
[Link](i);
i++;
while(i < 5);
22. break
Stops a loop.
for(let i=0;i<10;i++){
if(i==5){
break;
Loop stops at 5.
