JS Cheese
JavaScript

JavaScript Basics

The spicy pepper jack that makes everything interactive! ⚡🧀

1 What is JavaScript?

JavaScript (JS) is the programming language of the web. If HTML is the cheese block and CSS is how it's presented, JavaScript is the chef who makes the cheese do things — melt on command, change shape, react to clicks, and fetch fresh cheese from the internet!

JavaScript runs in the browser and can respond to user actions, update content without reloading the page, and communicate with servers.

💡 JavaScript has nothing to do with the Java programming language — despite the similar name! It was named for marketing reasons in 1995.
hello.js 
// This is a comment - the browser ignores it
console.log('Hello, CHEESY World! 🧀');

// Show a popup alert
alert('Welcome to JavaScript!');

2 Variables

Variables store data. In modern JavaScript you use const (can't be reassigned) and let (can be reassigned). Avoid the old var keyword in new code.

variables.js 
// const - value cannot be changed
const cheeseName = 'Gouda';
const cheeseAge  = 5;         // years aged
const isDelicious = true;

// let - value CAN be changed
let currentTemp = 20;
currentTemp = 37;            // now it's warmer 🔥

// Template literals - embed variables in strings
console.log(`${cheeseName} is ${cheeseAge} years old!`);
// Output: "Gouda is 5 years old!"

3 Data Types

JavaScript has several basic data types you'll use constantly:

data-types.js 
const name    = 'Cheddar';       // String
const age     = 3;              // Number
const isTasty = true;           // Boolean
const nothing = null;           // Null (intentionally empty)
let   mystery;                  // undefined (not yet set)

// Arrays - ordered lists of values
const cheeses = ['Cheddar', 'Brie', 'Gouda'];
console.log(cheeses[0]); // 'Cheddar'

// Objects - key-value pairs
const cheese = {
  name: 'Gouda',
  aged: true,
  rating: 9.5
};
console.log(cheese.name); // 'Gouda'

4 Functions

Functions are reusable blocks of code. Define them once, call them many times. Functions can take parameters (inputs) and return a result.

functions.js 
// Classic function declaration
function greetCheese(name) {
  return `Hello, ${name}! You're looking gouda today! 🧀`;
}

console.log(greetCheese('Brie'));
// Output: "Hello, Brie! You're looking gouda today! 🧀"

// Arrow function (modern syntax)
const addCheese = (a, b) => a + b;
console.log(addCheese(3, 4)); // 7

// Function with multiple steps
function makeGrilledCheese(bread, cheese) {
  const sandwich = `${bread} + ${cheese}`;
  const result = `🥪 ${sandwich} = Delicious!`;
  return result;
}

console.log(makeGrilledCheese('Sourdough', 'Cheddar'));
// Output: "🥪 Sourdough + Cheddar = Delicious!"

5 Conditionals (if / else)

Conditionals let your code make decisions. If a condition is true, run one block; otherwise, run the else block.

conditionals.js 
const cheeseRating = 8.5;

if (cheeseRating >= 9) {
  console.log('Top-tier cheese! 🏆');
} else if (cheeseRating >= 7) {
  console.log('Pretty gouda! 🧀');
} else {
  console.log('Needs more aging...');
}
// Output: "Pretty gouda! 🧀"

// Comparison operators
// ===  equals          !==  not equals
// >    greater than    <    less than
// >=   greater or eq  <=   less or eq

6 Loops

Loops repeat code. The for loop runs a set number of times. The for...of loop is great for iterating over arrays.

loops.js 
// Classic for loop
for (let i = 1; i <= 3; i++) {
  console.log(`Slice ${i} of cheese! 🧀`);
}
// Slice 1 of cheese!
// Slice 2 of cheese!
// Slice 3 of cheese!

// For...of loop over an array
const cheeses = ['Cheddar', 'Brie', 'Gouda'];
for (const cheese of cheeses) {
  console.log(`I love ${cheese}!`);
}

// Array .forEach() method
cheeses.forEach(cheese => {
  console.log(cheese.toUpperCase());
});

7 DOM Manipulation

The DOM (Document Object Model) is the browser's live representation of your HTML page. JavaScript can read and change the DOM to update what the user sees — without reloading the page!

dom.js 
// Get element by its id
const title = document.getElementById('main-title');

// Change text content
title.textContent = 'Cheese is AMAZING!';

// Change CSS style
title.style.color = 'orange';
title.style.fontSize = '3rem';

// Get element by CSS selector (like querySelector in CSS)
const btn = document.querySelector('.my-button');

// Add an event listener - run code when user clicks!
btn.addEventListener('click', () => {
  alert('You clicked the cheese button! 🧀');
});
🎯 Try it yourself! Click the button below — it's powered by JavaScript right here on this page.

8 Events

Events let your page respond to user actions — clicks, key presses, mouse movements, form submissions, and more. Use addEventListener to listen for events.

events.js 
const button = document.getElementById('cheese-btn');
const input  = document.getElementById('cheese-input');

// Click event
button.addEventListener('click', () => {
  console.log('Button was clicked!');
});

// Keyup event - fires when user lifts a key
input.addEventListener('keyup', (event) => {
  console.log(`You typed: ${event.target.value}`);
});

// Common events:
// click, dblclick, mouseover, mouseout
// keydown, keyup, keypress
// submit, change, input, focus, blur
// load, scroll, resize
← Back: CSS Take the Quiz! 🏆 →