JavaScript Essentials

JavaScript is the only programming language that runs natively in web browsers. Every interactive element you've ever used on a website — dropdowns, modals, form validation, infinite scroll, real-time updates — is JavaScript.

But JavaScript is no longer just a browser language:

• Frontend: React, Vue, Angular — building user interfaces
• Backend: Node.js — running servers, APIs, databases
• Mobile: React Native — building iOS and Android apps
• Desktop: Electron — VS Code, Slack, Discord are all JavaScript
• AI/ML: TensorFlow.js — machine learning in the browser

Learning JavaScript is the highest-leverage coding skill you can develop. One language, every platform.

Setting up:

Open your browser. Press F12 (or right-click → Inspect → Console tab). You now have a JavaScript playground. Type:

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

Press Enter. You just ran JavaScript. No installation, no configuration, no IDE needed.

Variables store data. Three ways to declare them:

const name = "Ada";      // Cannot be reassigned. Use for most things.
let age = 30;            // Can be reassigned. Use when value changes.
var old = "don't use";   // Old syntax. Avoid. Use const and let.

Data types:

const text = "hello";           // String
const number = 42;              // Number
const decimal = 3.14;           // Number (JS doesn't separate int/float)
const isTrue = true;            // Boolean
const nothing = null;           // Null (intentionally empty)
const notDefined = undefined;   // Undefined (not yet assigned)
const list = [1, 2, 3];         // Array
const person = {                // Object
  name: "Ada",
  age: 30
};

Functions are reusable blocks of code:

// Function declaration
function greet(name) {
  return "Hello, " + name + "!";
}

// Arrow function (modern syntax)
const greet = (name) => {
  return `Hello, ${name}!`;  // Template literal with backticks
};

// Short arrow function (one line)
const double = (n) => n * 2;

// Using them
console.log(greet("Ada"));  // "Hello, Ada!"
console.log(double(5));      // 10

The mental model:

Variables are labeled boxes that hold values. Functions are machines: put something in, get something out. Programs are sequences of putting values into boxes and running them through machines.

The DOM (Document Object Model) is your browser's representation of the HTML page as a tree of objects. JavaScript can read, change, add, and remove any element.

Selecting elements:

// Select by ID
const header = document.getElementById("main-header");

// Select by CSS selector (returns first match)
const button = document.querySelector(".submit-btn");

// Select all matching (returns a list)
const items = document.querySelectorAll(".list-item");

Changing elements:

// Change text
header.textContent = "New Title";

// Change HTML inside
header.innerHTML = "New <em>Title</em>";

// Change styles
header.style.color = "#E8A838";
header.style.fontSize = "2rem";

// Add/remove CSS classes
header.classList.add("active");
header.classList.remove("hidden");
header.classList.toggle("visible");

Responding to events:

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

button.addEventListener("click", () => {
  console.log("Button was clicked!");
  button.textContent = "Clicked!";
  button.style.background = "#E8A838";
});

Creating elements:

const newParagraph = document.createElement("p");
newParagraph.textContent = "I was created by JavaScript!";
newParagraph.classList.add("dynamic-text");

document.body.appendChild(newParagraph);

A practical example — a to-do list:

const form = document.querySelector("#todo-form");
const input = document.querySelector("#todo-input");
const list = document.querySelector("#todo-list");

form.addEventListener("submit", (e) => {
  e.preventDefault();
  const li = document.createElement("li");
  li.textContent = input.value;
  li.addEventListener("click", () => li.remove());
  list.appendChild(li);
  input.value = "";
});

This is 10 lines of code and it's a working application. That's the power of DOM manipulation.