🕷️

JavaScript Basics Cheat Sheet

Make your websites actually do stuff

🚀 Adding JavaScript

Put this at the bottom of your HTML, just before </body>:

                <script>

  // Your JavaScript here

</script>

Or link an external file: <script src="script.js"></script>

💡 Why at the bottom?

JavaScript runs as soon as it loads. If it's in the <head>, it runs before the page content exists. Put it at the bottom so the HTML is ready first.

Variables

Declaring Variables

Three ways to store data. Use const by default, let when you need to change it.

                const name = "Jaclyn";     // Can't be changed

let score = 0;             // Can be changed

var old = "don't use";    // Old way, avoid it

Data Types

                const text = "Hello";        // String (text)

const num = 42;             // Number

const decimal = 3.14;      // Also a number

const isOn = true;         // Boolean (true/false)

const empty = null;        // Intentionally empty

const mystery;             // undefined (no value yet)

Arrays (Lists)

Store multiple values in order.

                const colors = ["red", "green", "blue"];

colors[0];          // "red" (first item, index 0)

colors[2];          // "blue" (third item)

colors.length;      // 3

colors.push("yellow");  // Add to end

colors.pop();        // Remove from end

Objects

Store related data with named properties.

                const person = {

  name: "Jaclyn",

  age: 30,

  city: "Chicago"

};

person.name;       // "Jaclyn"

person["age"];     // 30 (alternate syntax)

person.job = "Designer";  // Add new property

Functions

Basic Function

Reusable blocks of code.

                function sayHello(name) {

  return "Hello, " + name;

}

sayHello("Jaclyn");  // "Hello, Jaclyn"

Arrow Functions

Shorter syntax, same thing.

                const sayHello = (name) => {

  return "Hello, " + name;

};

// Even shorter for one-liners:

const double = (n) => n * 2;

Conditionals

If / Else

                if (score > 90) {

  console.log("A");

} else if (score > 80) {

  console.log("B");

} else {

  console.log("Keep trying");

}

Comparison Operators

                x === y    // Equal (use this one!)

x !== y    // Not equal

x > y      // Greater than

x < y      // Less than

x >= y     // Greater or equal

x <= y     // Less or equal

// Combine with:

&&         // AND (both must be true)

||         // OR (either can be true)

!          // NOT (flips true/false)

💡 === vs ==

Always use === (triple equals). It checks value AND type. Double equals == does weird conversions and causes bugs.

Loops

For Loop

Run code a specific number of times.

                for (let i = 0; i < 5; i++) {

  console.log(i);

}

0, 1, 2, 3, 4

For...of (Arrays)

Loop through each item in an array.

                const fruits = ["apple", "banana", "cherry"];

for (const fruit of fruits) {

  console.log(fruit);

}

apple, banana, cherry

forEach (Modern Way)

                fruits.forEach((fruit) => {

  console.log(fruit);

});

DOM (Changing the Page)

Selecting Elements

                // Get one element

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

const header = document.querySelector("#main-header");

// Get multiple elements

const items = document.querySelectorAll(".list-item");

Changing Content

                // Change text

element.textContent = "New text";

// Change HTML inside

element.innerHTML = "<strong>Bold text</strong>";

Changing Styles

                // Direct style

element.style.color = "red";

element.style.backgroundColor = "#000";

// Add/remove CSS class (better)

element.classList.add("active");

element.classList.remove("active");

element.classList.toggle("active");

Event Listeners

Make things happen when users interact.

                // When button is clicked

btn.addEventListener("click", () => {

  console.log("Button clicked!");

});

// Common events:

// "click" - mouse click

// "submit" - form submitted

// "keydown" - key pressed

// "mouseover" - hover

// "change" - input value changed

Practical Examples

Toggle Dark Mode

                const btn = document.querySelector("#dark-mode-btn");

btn.addEventListener("click", () => {

  document.body.classList.toggle("dark");

});

Show/Hide Element

                const menu = document.querySelector(".menu");

const toggle = document.querySelector(".menu-toggle");

toggle.addEventListener("click", () => {

  menu.classList.toggle("hidden");

});

Form Input Value

                const input = document.querySelector("#email");

const form = document.querySelector("form");

form.addEventListener("submit", (e) => {

  e.preventDefault();  // Stop page refresh

  const email = input.value;

  console.log("Email:", email);

});

💡 console.log() is Your Friend

Use console.log() constantly to see what your code is doing. Open browser DevTools (F12) → Console tab to see the output. It's how you debug.

💡 Where to Learn More

This covers the basics. When you're ready for more: MDN Web Docs (mozilla.org) is the best free reference. Search "MDN [whatever you need]".