JavaScript Fundamentals: Variables, Functions & the DOM
Make web pages come alive with JavaScript - variables, functions, the DOM, events, and fetch.
Greetings, brave adventurer! Welcome to JavaScript Fundamentals - the quest where your web pages stop being still portraits and start to move, listen, and respond. HTML gives a page its bones and CSS gives it skin and color, but JavaScript is the spark of life. It is the one language every browser on the planet speaks natively, and learning it unlocks interactivity, animation, and the ability to fetch fresh data from across the realm.
Whether you have never written a single line of code or you have dabbled in other languages and want to learn the browser’s native tongue, this adventure will teach you both the “how” and the “why” - one runnable spell at a time.
📖 The Legend Behind This Quest
In the early web, pages were parchment: you read them and that was all. Then in 1995 a language was forged in just ten days to make pages react to their readers. Named JavaScript, it grew from a humble scripting toy into one of the most widely used languages in the world. It now runs in every browser, on servers, and even on tiny devices. The truth its masters learned is simple: an interface that responds to the person using it feels alive, and JavaScript is how you grant that life.
This quest teaches the core incantations - variables, functions, collections, the DOM, events, and fetching data - that every later spell builds upon.
🎯 Quest Objectives
By the time you complete this journey, you will have mastered:
Primary Objectives (Required for Quest Completion)
- Variables & Types - Store and label data with
let,const, strings, numbers, and booleans - Functions - Package logic you can name, reuse, and pass values to
- Arrays & Objects - Group many values and model real-world things
- The DOM & Events - Select page elements and react when the user acts
Secondary Objectives (Bonus Achievements)
- Fetching Data - Call an API with
fetchand read the JSON it returns - Array Methods - Transform lists with
map,filter, andforEach - Debugging with DevTools - Read the console and inspect values as code runs
Mastery Indicators
You’ll know you’ve truly mastered this quest when you can:
- Explain the difference between
letandconstto a friend - Wire a button so that clicking it changes the page
- Fetch data from a public API and display one field on the page
🗺️ Quest Prerequisites
📋 Knowledge Requirements
- Comfort creating and saving plain text/HTML files
- Basic command line navigation (
cd,ls) - Recommended: completion of CSS Styling Basics
🛠️ System Requirements
- Modern operating system (Windows 10+, macOS 10.14+, or Linux)
- A modern browser (Chrome, Firefox, Edge, or Safari)
- A text editor or IDE (VS Code recommended)
- No installation needed - JavaScript runs in your browser
🧠 Skill Level Indicators
This 🟡 Medium quest expects:
- Beginner-friendly - no prior JavaScript experience required
- Willingness to open the browser console and experiment
- Ready for 75-90 minutes of focused learning
🌍 Choose Your Adventure Platform
The best part of JavaScript: it runs everywhere a browser does, so there is nothing to install. Pick how you want to run your code.
🍎 macOS Kingdom Path
Click to expand macOS instructions
```bash # Create a working folder and an HTML file to host your script mkdir -p ~/js-quest && cd ~/js-quest touch index.html # Open it in your default browser to see results open index.html ``` **macOS-Specific Notes:** - Open DevTools with `Cmd + Option + I`, then click the **Console** tab. - Edit `index.html` in VS Code and refresh the browser to see changes.🪟 Windows Empire Path
Click to expand Windows instructions
```powershell # Create a working folder and an HTML file mkdir $HOME\js-quest; cd $HOME\js-quest New-Item index.html # Open it in your default browser Start-Process index.html ``` **Windows-Specific Notes:** - Open DevTools with `F12` or `Ctrl + Shift + I`, then click **Console**. - The Console is a live JavaScript playground - type code and press Enter.🐧 Linux Territory Path
Click to expand Linux instructions
```bash # Create a working folder and an HTML file mkdir -p ~/js-quest && cd ~/js-quest touch index.html # Open it with your default browser xdg-open index.html ``` **Linux-Specific Notes:** - Open DevTools with `Ctrl + Shift + I`, then click the **Console** tab. - Any browser works; the console behaves the same across all of them.☁️ Cloud Realms Path
Click to expand Cloud/Container instructions
```bash # No local setup at all: use an online editor # Open https://playcode.io or https://codepen.io in your browser # Paste the examples below into the JS panel and watch them run live. ``` **Cloud-Specific Notes:** - Online editors show output instantly - ideal if you cannot install anything. - A GitHub Codespace also ships a full browser-based VS Code.🧙♂️ Chapter 1: Variables, Types & Functions - The Building Blocks
Every program stores data and acts on it. Variables are labeled boxes that hold values; functions are reusable spells that act on those values.
⚔️ Skills You’ll Forge in This Chapter
- Declaring variables with
letandconst - The core data types: string, number, boolean
- Writing and calling functions
🏗️ Your First Script
Create index.html and paste this. The <script> tag is where JavaScript lives:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>JS Quest</title>
</head>
<body>
<h1>Open the console (F12) to see output</h1>
<script>
// const = a value that never gets reassigned
const wizardName = "Gandalf";
// let = a value you expect to change
let healthPoints = 100;
healthPoints = healthPoints - 25; // now 75
// Three core types
const greeting = "Hello, adventurer"; // string
const level = 1; // number
const isApprentice = true; // boolean
console.log(greeting, wizardName, level, isApprentice, healthPoints);
</script>
</body>
</html>
Save the file, open it in your browser, and press F12 to view the Console. You should see the values printed. Now add a function - a named, reusable block of logic:
// A function takes inputs (parameters) and returns a result
function damageAfterArmor(damage, armor) {
const reduced = damage - armor;
return reduced < 0 ? 0 : reduced; // never go below zero
}
console.log(damageAfterArmor(30, 12)); // 18
console.log(damageAfterArmor(5, 10)); // 0
// Arrow functions are a shorter way to write the same thing
const double = (n) => n * 2;
console.log(double(21)); // 42
let vs const vs var, at a glance:
| Keyword | Reassignable? | Scope | Use it when |
|---|---|---|---|
const |
No | Block | The value never changes (your default) |
let |
Yes | Block | The value will change |
var |
Yes | Function | Avoid in new code - legacy behavior |
🔍 Knowledge Check: Variables & Functions
- When would you choose
constoverlet? - What does a function
return, and what happens if it returns nothing? - Rewrite
doubleas a regularfunctioninstead of an arrow function.
⚡ Quick Wins and Checkpoints
- Console opened: You saw your
console.logoutput in DevTools - First function: You called a function with arguments and got a result
🧙♂️ Chapter 2: Arrays & Objects - Grouping Your Treasure
One value is rarely enough. Arrays hold ordered lists; objects model a thing with named properties. Together they describe almost any data you will ever handle.
⚔️ Skills You’ll Forge in This Chapter
- Creating and reading arrays and objects
- Looping with
forEachand transforming withmap/filter - Combining the two to model real data
🏗️ Collections in Action
// An array: an ordered list of values
const inventory = ["sword", "shield", "potion"];
console.log(inventory[0]); // "sword" (indexes start at 0)
console.log(inventory.length); // 3
inventory.push("torch"); // add to the end
// An object: named properties describing one thing
const hero = {
name: "Aria",
level: 3,
skills: ["javascript", "css"],
};
console.log(hero.name); // "Aria"
console.log(hero.skills.length);// 2
// An array of objects models a whole roster
const party = [
{ name: "Aria", level: 3 },
{ name: "Bran", level: 1 },
{ name: "Cael", level: 5 },
];
Array methods are your power tools. They read like sentences:
// forEach: do something with every item
party.forEach((member) => console.log(member.name));
// map: build a NEW array by transforming each item
const names = party.map((member) => member.name);
console.log(names); // ["Aria", "Bran", "Cael"]
// filter: keep only items that pass a test
const veterans = party.filter((member) => member.level >= 3);
console.log(veterans.length); // 2
🔍 Knowledge Check: Arrays & Objects
- What index holds the first element of an array?
- How do
mapandfilterdiffer in what they return? - Access the
levelof the second member ofparty.
⚡ Quick Wins and Checkpoints
- Built a roster: You created an array of objects
- Transformed a list: You used
maporfilterto derive new data
🧙♂️ Chapter 3: The DOM, Events & Fetch - Bringing the Page to Life
The DOM (Document Object Model) is the browser’s live, in-memory tree of your page. JavaScript can read it, change it, and listen for events - clicks, typing, scrolling - so the page reacts to the user.
⚔️ Skills You’ll Forge in This Chapter
- Selecting and changing page elements
- Responding to user events
- Fetching live data from an API
🏗️ A Fully Interactive Page
Replace your index.html body with this complete, runnable example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Interactive JS</title>
</head>
<body>
<h1 id="title">Click the button</h1>
<button id="cast">Cast spell</button>
<p id="fact">Fact will appear here…</p>
<script>
// 1. Select elements from the DOM
const title = document.getElementById("title");
const button = document.getElementById("cast");
const fact = document.getElementById("fact");
let clicks = 0;
// 2. Listen for a click EVENT and react to it
button.addEventListener("click", async () => {
clicks += 1;
title.textContent = `Spell cast ${clicks} time(s)!`;
title.style.color = "rebeccapurple";
// 3. Fetch live data from a public API
const res = await fetch("https://catfact.ninja/fact");
const data = await res.json(); // parse JSON into an object
fact.textContent = data.fact; // show one field on the page
});
</script>
</body>
</html>
Open it and click the button. The heading changes, its color updates, and a fresh fact is fetched from the network and displayed. That is the full loop of modern front-end work: select, listen, react, fetch, render.
Three ideas you just used:
document.getElementById(...)finds an element by itsid.addEventListener("click", handler)runs your function on each click.await fetch(url)requests data;await res.json()turns the response into a usable object.async/awaitlets you write network code that reads top-to-bottom.
🔍 Knowledge Check: DOM, Events & Fetch
- What does
document.getElementByIdreturn, and how do you change its text? - Why do we use
async/awaitaroundfetch? - What is the difference between an event and an event handler?
🎮 Mastery Challenges
🟢 Novice Challenge: A Counter Button
Objective: Build a page with a button that increments a number each time it is clicked.
Requirements:
- A
<button>and a<span>showing the count - A click handler that updates the count
- The number visibly changes on screen
Validation: Clicking the button five times shows 5 on the page.
🟡 Intermediate Challenge: Filter a List
Objective: Given an array of objects, render only those that pass a test.
Requirements:
- An array of at least four objects
- Use
filterto keep a subset - Use
mapandtextContent/innerHTMLto display them
Validation: Only the matching items appear in the browser.
🔴 Advanced Challenge: Live Data Widget
Objective: Fetch from a public API and render the result, handling errors.
Requirements:
- Call any public JSON API with
fetch - Display at least one field from the response
- Wrap the fetch in
try/catchand show a friendly message on failure
Validation: The widget shows real data, and a network failure shows your error message rather than a blank page.
🏆 Quest Rewards & Achievements
🎖️ Badges Earned:
- 🏆 Spellcaster of the Browser - You made a page respond to a user
- 🌱 Sprout of Interactivity - Variables, functions, and events are second nature
🛠️ Skills Unlocked:
- DOM Manipulation - Read and reshape any page on the fly
- Event-Driven Thinking - Design interfaces that react to the user
🔓 Unlocked Quests:
- Jekyll Plugins - Extend your static site with build-time logic
- Analytics Integration - Measure how real users interact with your pages
📊 Progression Points: +50 XP
🗺️ Next Steps in Your Journey
Continue the Main Story:
- 🎯 Analytics Integration - Track the interactions you just built
Explore Side Adventures:
- ⚔️ CSS Styling Basics - Style the elements you now control
- ⚔️ Jekyll Plugins - Logic that runs at build time
Character Class Recommendations
💻 Software Developer: Continue to Analytics Integration
🏗️ System Engineer: Explore Jekyll Plugins
🎨 Frontend Specialist: Revisit CSS Styling Basics
📚 Resources
Official Documentation
- MDN JavaScript Guide - The canonical reference
- MDN: Introduction to the DOM - How the page tree works
- MDN: Using Fetch - Requesting data
Community Resources
- JavaScript.info - A thorough, modern tutorial
- freeCodeCamp JavaScript - Free interactive curriculum
- Stack Overflow: javascript - Tagged Q&A
Learning Materials
- Eloquent JavaScript (free book) - Deep, beginner-to-advanced
- Public APIs list - Free APIs to practice
fetchagainst
🤝 Quest Completion Checklist
- ✅ Completed all primary objectives
- ✅ Built an interactive page that responds to a click
- ✅ Answered all knowledge check questions
- ✅ Completed at least one mastery challenge
- ✅ Explored the resource library
- ✅ Identified your next quest in the journey
🕸️ Knowledge Graph
Structured wiki-links connect this quest to the IT-Journey knowledge graph. Open the Obsidian Graph View to explore connections.
Level hub: [[Level 0001 - Web Fundamentals]] Overworld: [[🏰 Overworld - Master Quest Map]] Unlocks: [[Jekyll Plugins]] · [[Analytics Integration]] Obsidian docs: [[Obsidian Knowledge Graph and Wiki Links]]
🎁 Rewards
Badges
- 🏆 Spellcaster of the Browser - Made a web page respond to a user
- 🌱 Sprout of Interactivity - Internalized variables, functions, and events
Skills unlocked
- 🛠️ DOM Manipulation
- 🧠 Event-Driven Thinking
Features unlocked
- Access to the data-driven quests of Level 0001 Web Fundamentals
🕸️ Quest Network
Referenced by
- Loading…