JavaScript, the Console and Dialog Boxes

Mission 4: Bring it to life. Your website has structure and style. Now JavaScript makes it react.

Quick check

Quick recall

10 XP

What JavaScript does

JavaScript is the programming language of web pages. It makes a page react: it opens a menu, checks a form, changes text. It runs in the visitor's browser, so it is fast. It looks a little like C and Java, but it is a separate language.

Where the code goes

Put <script> right before </body>: the browser shows the page first, and your code finds every element. The code can be in its own file:

  <script src="script.js"></script>
</body>

In the head, add defer: the script waits until the HTML is ready. Here, the practice space puts your JavaScript at the end of the page.

The console

On a computer, F12 or Ctrl+Shift+I (on a Mac Cmd+Option+I) opens the developer tools: Elements (HTML and CSS), Console (messages and errors) and Sources (your files). Phones have no developer tools, so every exercise here has a Console box.

Code	What you see
console.log("Age:", age);	A normal message; a comma adds values.
console.warn("Check this");	A yellow warning. The code keeps running.
console.error("Saving failed");	A red error message.
console.table(["Ayla", "Lena"]);	A table with an index and a value column.
console.clear();	An empty console.

The slide on console.error() has a lone } under the line. Nothing opened it, so the code stops. Leave it out.

Matching

What does each method do?

Required 15 XP

Now write all four kinds of messages. This exercise counts for the Console Detective badge.

Practice

Console messages

Required 30 XP

Mission 4 starts here. Add a warning, an error and a table, then read every message in the Console box.

The window and dialog boxes

window is the browser window. Everything lives inside it, so alert("Hi") is the same as window.alert("Hi").

• window.innerWidth and innerHeight: the size of the browser window in pixels.
• location.href: the page address. A new address opens another page; location.reload() loads the page again.
• alert("Saved!"): a message with an OK button.
• prompt("Your name?"): asks for text. You get the text, or null ("empty on purpose") after Cancel.
• confirm("Delete this?"): true for OK, false for Cancel.

let sure = confirm("Do you really want to delete this entry?");
if (sure) {
  console.log("The entry was deleted.");
} else {
  console.log("Nothing was deleted.");
}

Quick check

Which box asks for text?

Required 10 XP

Worked example: a simple redirect panel

The greeting is a template literal: backticks with ${name} inside (lesson 4.4). The slide sends visitors to a search engine; we use https://example.com, an address made for examples.

Practice

Simple redirect panel

Required 30 XP

The daily application from the course slides. Put the blocks in the right order. The practice space answers the boxes for you: OK, then the name Ayla.

JavaScript

The programming language that makes web pages react.

Console

A panel for developers with messages and errors.

Developer tools

Browser tools for HTML, CSS, files and the console.

Dialog box

A small box from alert(), prompt() or confirm().

null

A value that means "empty on purpose".

In short

• JavaScript makes a page react. <script> goes before </body>, or in the head with defer.
• console.log(), warn(), error() and table() show what your code does.
• alert() tells, prompt() asks for text, confirm() asks OK or Cancel.

Sources

1. MDN Web Docs (2026). What is JavaScript?
2. MDN Web Docs (2026). <script>: The Script element.
3. MDN Web Docs (2026). What are browser developer tools?
4. MDN Web Docs (2026). console and console.table().
5. MDN Web Docs (2026). Window: prompt() method and Window: confirm() method.
6. MDN Web Docs (2026). Window: innerWidth property and Location: href property.