JavaScript (JS)

JavaScript adds interactivity and dynamic behavior to web pages. It can manipulate the DOM, handle events, fetch data, and power entire web apps.

Hello World

console.log("Hello, World!");

Variables

let name = "Alice";
const age = 25;
var city = "New York";

Data Types

let str = "Hello";     // String
let num = 42;          // Number
let bool = true;       // Boolean
let arr = [1,2,3];     // Array
let obj = {a:1, b:2};  // Object
let n = null;          // Null
let u;                 // Undefined

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); // 0
console.log(a > b); // true

Functions

function greet(name) {
  return "Hello " + name;
}
console.log(greet("Alice"));

// Arrow function
const add = (x, y) => x + y;

Conditions

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

Loops

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

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

Arrays

let fruits = ["Apple","Banana","Mango"];
fruits.push("Orange");
console.log(fruits[0]); // Apple
fruits.forEach(f => console.log(f));

Objects

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

DOM Manipulation

document.getElementById("demo").innerText = "Changed!";
document.querySelector(".box").style.color = "red";

Events

<button onclick="sayHello()">Click</button>

<script>
function sayHello(){
  alert("Hello!");
}
</script>

ES6 Features

// Template literals
let name = "Alice";
console.log(`Hello, ${name}`);

// Destructuring
let [a,b] = [1,2];

// Spread operator
let arr = [1,2,3];
let arr2 = [...arr, 4,5];

Fetch API

fetch("https://jsonplaceholder.typicode.com/posts/1")
  .then(res => res.json())
  .then(data => console.log(data));

Async / Await

async function getData(){
  let res = await fetch("https://jsonplaceholder.typicode.com/posts/1");
  let data = await res.json();
  console.log(data);
}
getData();

Classes

class Person {
  constructor(name, age){
    this.name = name;
    this.age = age;
  }
  greet(){
    console.log(`Hello, I am ${this.name}`);
  }
}
let p1 = new Person("Alice", 25);
p1.greet();

Modules

// math.js
export function add(a,b){ return a+b; }

// main.js
import { add } from "./math.js";
console.log(add(2,3));