Learn JavaScript

JavaScript Topics

Click on a topic to expand and learn in detail.

• 1. Introduction to JavaScript

JavaScript is a programming language used to make websites interactive and dynamic.

console.log("Hello World");
      

• 2. Variables & Data Types

// Variables
let name = "Alice";
const pi = 3.14;
var age = 25;

// Data types: string, number, boolean, undefined, null, object
      

• 3. Operators

// Arithmetic
let sum = 5 + 3;

// Comparison
console.log(5 > 3); // true

// Logical
console.log(true && false); // false
      

• 4. Conditions (if, else, switch)

let age = 18;
if(age >= 18){
  console.log("Adult");
} else {
  console.log("Minor");
}

switch(age){
  case 18:
    console.log("Exactly 18");
    break;
  default:
    console.log("Other age");
}
      

• 5. Loops (for, while, do-while)

// for loop
for(let i=0; i<5; i++){
  console.log(i);
}

// while loop
let j = 0;
while(j<5){
  console.log(j);
  j++;
}

// do-while
let k = 0;
do{
  console.log(k);
  k++;
}while(k<5);
      

• 6. Functions

function greet(name){
  return "Hello " + name;
}

console.log(greet("Alice"));

// ES6 Arrow Function
const add = (a,b) => a+b;
console.log(add(5,3));
      

• 7. Arrays

let fruits = ["Apple", "Banana", "Mango"];
console.log(fruits[0]); // Apple

fruits.push("Orange");
console.log(fruits.length);
      

• 8. Objects

let person = {
  name: "Alice",
  age: 25,
  greet: function(){
    console.log("Hello");
  }
};

console.log(person.name);
person.greet();
      

• 9. DOM Manipulation

// Select element
const heading = document.querySelector("h1");

// Change content
heading.textContent = "Hello World";

// Add class
heading.classList.add("highlight");
      

• 10. Events

const button = document.querySelector("button");

button.addEventListener("click", function(){
  alert("Button Clicked!");
});
      

• 11. Advanced JavaScript
• ES6 Features: let, const, arrow functions, template literals
• Objects & Arrays: Destructuring, Spread, Rest
• Fetch API / AJAX
• Async / Await & Promises
• LocalStorage & SessionStorage
• Modules & Import / Export
• JSON parsing & stringify
• Error Handling: try / catch / throw
• Events & Event Delegation
• Timers: setTimeout, setInterval
• DOM Traversal & Manipulation