Meet JavaScript

You’ve already learned how HTML builds a page and CSS makes it look good. Now it’s time to make that page respond. JavaScript lets you change words, react to clicks, check answers, and create experiences that feel alive.

Think about a button that reveals a message. HTML creates the button, CSS styles it, and JavaScript makes something happen when it’s clicked.

Say Hello to the Console

Let’s begin with a single instruction. The browser’s console is a place where developers can see messages from their code.

console.log("Hello, JavaScript!");

console.log() prints a value in the developer console. The words inside quotation marks are a string — a piece of text.

The semicolon ends the statement. JavaScript often works without it, but using it consistently can make code easier to read.

Give Your Page Instructions

JavaScript can be placed inside an HTML <script> element. When the browser reaches that element, it runs the code.

<h1>My First JavaScript Page</h1>

<script>
  console.log("My page is ready!");
</script>

For larger websites, developers usually keep their JavaScript in a separate file and link to it with <script src="app.js" defer></script>.

The defer attribute lets the browser finish parsing the page before running the script.

Change What Visitors See

Printing to the console is useful, but what if you want to change something on the page? JavaScript can find an element by its ID and replace its text.

<p id="message">Waiting for JavaScript...</p>

<script>
  document.getElementById("message").textContent =
    "JavaScript changed this message!";
</script>

document represents the webpage. getElementById("message") finds the paragraph, and textContent changes its text.

The script runs after the paragraph exists, so the browser can find it.

Make a Button Interactive

Websites become interactive when JavaScript responds to events. A click is an event. You can tell a button what to do when that event happens.

<button id="helloBtn">Say Hello</button>
<p id="greeting">Waiting...</p>

<script>
  const button = document.getElementById("helloBtn");
  const greeting = document.getElementById("greeting");

  button.addEventListener("click", function() {
    greeting.textContent = "Hello, developer!";
  });
</script>

addEventListener("click", ...) waits for a click. The instructions inside the function run only when the visitor presses the button.

We’ll explore functions and events in depth in later lessons.

Small Habits Make a Difference

Good JavaScript is easier to understand when each instruction has a clear purpose. Use descriptive names, indent related lines, and add comments when they explain something useful.

// Find the welcome message on the page.
const welcomeMessage = document.getElementById("welcome");

// Change its text.
welcomeMessage.textContent = "Welcome to mC0de!";

A line beginning with // is a comment. JavaScript ignores it. Comments help another developer understand why something is happening, but clear names are just as important.

Your First Interactive Page

You’ve seen how to print a message, find an element, and respond to a click. Now bring those skills together.

Start with a heading and a button, then use JavaScript to change the greeting when the button is pressed.

You don’t need to memorize every command. Learn to recognize the pieces, try changing them, and pay attention to what happens.