Class 2 – Introduction to JavaScript

Topics

• JavaScript basics: variables, types, operators
• Functions and scope
• DOM manipulation
• Event handling

Variables and Types

JavaScript offers three keywords for declaring variables:

// const – immutable reference
const PI = 3.14159;

// let – mutable reference, block-scoped
let count = 0;
count = 1; // OK

// var – avoid, function-scoped
var oldStyle = "don't use this";

DOM Manipulation

The Document Object Model (DOM) allows JavaScript to modify the page content:

// Select an element
const btn = document.querySelector('#my-button');

// Add an event handler
btn.addEventListener('click', () => {
  // Create a new element
  const p = document.createElement('p');
  p.textContent = 'You clicked!';
  document.body.appendChild(p);
});

Arrow Functions vs Traditional Functions

// Traditional function
function add(a, b) {
  return a + b;
}

// Arrow function
const multiply = (a, b) => a * b;

// With array methods
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(n => n * 2);
console.log(doubled); // [2, 4, 6, 8, 10]

Homework

Build a simple calculator that supports the four basic arithmetic operations.