JavaScript Beginner Cheat Sheet - johnverz22/webdev1-lessons GitHub Wiki

🔹 1. JavaScript Objects 

// Create Object
let person = {
  name: "Alex",
  age: 25,
  greet: function() {
    console.log("Hello!");
  }
};

// Access Properties
console.log(person.name);      // dot notation
console.log(person["age"]);    // bracket notation

// Add Property
person.email = "[email protected]";

// Delete Property
delete person.age;

🔹 2. DOM (Document Object Model)

✅ Selecting Elements 

document.getElementById("id");
document.getElementsByClassName("class");   // returns HTMLCollection
document.getElementsByTagName("div");       // returns HTMLCollection
document.querySelector(".class");           // returns first match
document.querySelectorAll("div");           // returns NodeList

✅ Reading & Changing Content 

element.textContent = "Text";        // Plain text
element.innerHTML = "<b>Bold</b>";   // HTML content
element.value                       // For input values

✅ Modifying Styles 

element.style.color = "blue";
element.style.backgroundColor = "yellow";

✅ Attributes 

element.setAttribute("class", "highlight");
element.getAttribute("id");
element.removeAttribute("style");

✅ Creating and Inserting Elements 

let newDiv = document.createElement("div");
newDiv.textContent = "I'm new!";
document.body.appendChild(newDiv);

✅ Removing Elements 

element.remove();

🔹 3. Events

✅ Add Event Listener 

element.addEventListener("click", function() {
  alert("Clicked!");
});

✅ Common Events

Event Type Trigger Example
click Clicking a button or element
mouseover Hovering over an element
keydown Pressing a key
submit Submitting a form
change Input value change
load Page finishes loading

✅ Access Event Object 

element.addEventListener("click", function(event) {
  console.log(event.target); // Element that was clicked
});

🔹 4. Arrays & Array Methods 

let nums = [1, 2, 3];

// Add/Remove
nums.push(4);          // Add to end
nums.pop();            // Remove from end
nums.shift();          // Remove from start
nums.unshift(0);       // Add to start

// Loop
nums.forEach(function(n) {
  console.log(n);
});

// Transform
let doubled = nums.map(n => n * 2);

// Filter
let evens = nums.filter(n => n % 2 === 0);

🔹 5. Functions 

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

// Arrow function
const greet = (name) => "Hello, " + name;

// Calling
greet("Alex");

🔹 6. Control Flow 

if (score >= 90) {
  console.log("A");
} else {
  console.log("Not A");
}

for (let i = 0; i < 5; i++) {
  console.log(i);
}

while (x < 5) {
  x++;
}

🔹 7. Timers 

setTimeout(() => {
  alert("Waited 2 seconds!");
}, 2000);

let intervalId = setInterval(() => {
  console.log("Repeats every 1s");
}, 1000);

// To stop
clearInterval(intervalId);

🔹 8. Local Storage 

localStorage.setItem("name", "Alex");
let name = localStorage.getItem("name");
localStorage.removeItem("name");

// JSON for objects/arrays
let user = { name: "Alex" };
localStorage.setItem("user", JSON.stringify(user));
let saved = JSON.parse(localStorage.getItem("user"));

✅ Pro Tip for Beginners

Need Use This
Access HTML document.querySelector()
React to clicks .addEventListener("click")
Show message alert("Hello!")
Change text element.textContent = "..."
Save data localStorage.setItem()
⚠️ **GitHub.com Fallback** ⚠️