If HTML is the map of your webpage and CSS is the wardrobe, JavaScript (JS) is your magic spellbook. JS brings life to your content allowing treasure chests to open, torches to flicker, and buttons to respond.
Many actions such as what happens when clicking a button, displaying a notification, updating text, and more are all functions of JavaScript.
In this tutorial, you’ll learn how to put a tiny bit of JavaScript on your page and respond to a button click.
How to Add JavaScript to Your Webpage
Similar to our examples in our CSS tutorial, you can add JS to your webpage in these three common ways:
1. External file (most common/recommended):
<script src="app.js"></script>2. Inline script at the bottom of the HTML (good for practice or quick demos):
<script> your JavaScript code goes here </script>3. Inline attribute (Okay for certain functions)
<button onclick="myFunction()">Click Me</button>
Inline JS works, but in modern projects it’s better to keep JavaScript in <script> tags at the bottom of your HTML or in external files.JavaScript Building Blocks:
Variables
Variables store values. Use let for information that may change, and const for information that won't.
let message = "Hello";
const siteName = "Side Quest XP";Functions
Functions group actions together so you can reuse them.
function greet(name) {
console.log("Hello, " + name + "!");
}The Console
The console.log() function is your best friend when testing. It allows you to view messages in your browser’s developer tools that help you know what is or isn't working. It's kind of like scribbling in your adventurer notebook - you can store notes that can only be seen with developer tools which is useful when tracking changes and making sure your coding quest goes smoothly.
console.log("This is a test message!");The DOM (Document Object Model)
DOM means “Document Object Model”. Think of it as the magical blueprint of your webpage. JavaScript can read the blueprint and make changes you've programmed such as moving characters, lighting torches, and other actions.
// Select a paragraph by its ID
const status = document.getElementById("status");
// Change its text
status.textContent = "Updated by JavaScript!";💡 A note on comments: In JavaScript you can write comments in two ways:
// Single-line comment
/*
Multi-line comment
(great for longer notes)
*/
Practice Time!
Below we've added some JavaScript to our running example from the HTML and CSS tutorials. In the JS tab you'll see that when you click the button, the paragraph text updates and a message appears in the console.
See the Pen Basic Interactivity With JavaScript by Side Quest Studios (@sidequestxp) on CodePen.
Summary
Victory! You just learned some basic spells...or um... JavaScript! That's some major XP right there.
- What JavaScript is used for
- Where to put JS on a page
- How to use variables and functions
- How to interact with the DOM
- How to respond to a button click
From here, you can start exploring things like how to hide or show content, fetch data, and more. With practice you'll unlock even greater code-wizardry powers on your adventure!