JavaScript – Making the Web Interactive

About JavaScript

JavaScript adds interactivity, logic, and dynamic behavior to web pages. It works with the browser to respond to clicks, update content, fetch data, and control animations.

JavaScript answers the question: “What can this do?”

Important beginner concepts include:

• Variables – Used to store values. Modern JavaScript uses "let" and "const".



// Using let (CAN be reassigned)

let counter = 0;
counter = counter + 1;      // 1
counter + 1;                // 2

// Using const (CANNOT be reassigned)

const pi = 3.14159;
pi = 3.2;                   // Error: cannot reassign const



• Data Types – Common ones are strings, numbers, booleans, arrays, objects, and null/undefined.



let name = "Alice";        // string
let age = 25;              // number
let happy = true;          // boolean
let nothing = null;        // null
let notAssigned;           // undefined
let id = Symbol("id");     // symbol



• Functions – Reusable blocks of code. They take input, perform work, and return output.



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



• Objects – Collections of key/value pairs. They represent real-world things.



const person = { name: "Mark", age: 30 };



• Arrays – Ordered lists of data.



const fruits = ["apple", "banana", "orange"];
              
fruits.push("kiwi");
console.log(fruits[0]);      // "apple"
console.log(fruits.length);  // 4
console.log(fruits);         // ["apple", "banana", "orange", "kiwi"]



• Conditional Statements – Allow your code to make decisions and run different actions based on conditions.



// IF
let age = 20;

if (age >= 18) {
  console.log("You are an adult.");
}

// IF ELSE
let time = 15;

if (time < 12) {
  console.log("Good morning");
} else {
  console.log("Good afternoon");
}

// ELSE IF
let score = 85;

if (score >= 90) {
  console.log("A grade");
} else if (score >= 80) {
  console.log("B grade");
} else {
  console.log("Try again!");
}



• DOM Manipulation – Changing HTML content or styling using JavaScript.



document.querySelector("#myDiv").textContent = "Hello World!";



• Events – Code that runs when something happens, like a button click.



button.addEventListener("click", () => {
  console.log("Button clicked!");
});



• JSON – A text format for sending and storing data.

{
  "name": "Maria",
  "age": 28,
  "isStudent": false,
  "skills": ["JavaScript", "HTML", "CSS"],
  "address": {
    "city": "Berlin",
    "country": "Germany"
  }
}

Modern JavaScript includes helpful features like:

• Optional Chaining – Safely access nested properties: user?.profile?.email


• Nullish Coalescing – Default values: name ?? "Guest"


• Async/Await – Cleaner asynchronous code for fetching data.

JavaScript brings websites to life and lets developers create everything from simple interactions to full web apps.