1. JavaScript Basics
Inline, internal, and external JavaScript setup
<script>alert('Hello JavaScript');</script>
<script src="script.js"></script>
2. Variables & Constants
// Declaring variables
var name = 'Umar';
let age = 25;
const country = 'Pakistan';
console.log(name, age, country);
3. Operators
Arithmetic and comparison operators
let a = 10, b = 5;
console.log(a + b); // 15
console.log(a - b); // 5
console.log(a * b); // 50
console.log(a / b); // 2
console.log(a == b); // false
console.log(a > b); // true
4. Conditional Statements
let marks = 85;
if (marks >= 80) {
console.log('Grade: A');
} else if (marks >= 60) {
console.log('Grade: B');
} else {
console.log('Grade: C');
}
5. Loops
// For loop
for(let i = 1; i <= 5; i++) {
console.log('Number:', i);
}
// While loop
let x = 1;
while (x <= 3) {
console.log('Loop', x);
x++;
}
6. Functions
// Function declaration
function greet(name) {
return 'Hello ' + name;
}
console.log(greet('Umar'));
// Arrow function
const add = (a, b) => a + b;
console.log(add(5, 10));
7. Objects & Arrays
// Object
const person = {
name: 'Umar',
age: 25,
job: 'Developer'
};
console.log(person.name);
// Array
const colors = ['Red', 'Green', 'Blue'];
colors.push('Yellow');
console.log(colors);
8. DOM Manipulation
// Accessing elements
document.getElementById('demo').textContent = 'Hello World';
document.querySelector('.box').style.backgroundColor = 'blue';
// Creating elements
let div = document.createElement('div');
div.textContent = 'New Box';
document.body.appendChild(div);
9. Events
<button onclick="alert('Button Clicked!')">Click Me</button>
document.getElementById('btn').addEventListener('click', function() {
alert('Hello from event listener!');
});