JavaScript First Steps: Values, Variables, and the Console

Your page already has structure and deliberate styling. This lesson does not change how it looks. It puts JavaScript on the page for the first time. You add a <script> at the end of <body>. You store a value under a name. You use console.log so you can see that value in the CONSOLE pane. Real projects give JavaScript its own file the same way CSS got one. We keep it inline here to stay on one idea at a time.

The concept

Here is your page as Act II left it. Run it:

WHERE YOU LEFT OFF · HTML

▸WHAT'S ALREADY IN THIS PAGE

New here? This starter already carries the standard HTML frame. You do not need to change it to do the exercise — each piece is taught in its own lesson.

<!DOCTYPE html> — Tells the browser to use modern rendering rules. Taught in lesson 2.
<html> … </html> — The root element that wraps the whole document. Taught in lesson 2.
lang="en" — Sets the page's language. Taught in lesson 6.
<head> — Holds information about the page; nothing in it is drawn on screen. Taught in lesson 2.
<meta charset="UTF-8" /> — Sets how the browser decodes the text. Taught in lesson 6.
<title> — Sets the browser-tab text. Taught in lesson 2.
<body> — Holds everything a visitor actually sees. Taught in lesson 2.

Untitled

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Your Name</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <header>
      <img src="https://placehold.co/240x240" alt="A placeholder profile photo" />
      <h1>Your Name</h1>
      <nav>
        <a href="#about">About</a>
        <a href="#skills">Skills</a>
        <a href="#contact">Contact</a>
      </nav>
    </header>
    <main>
      <section id="about" class="block">
        <h2>About</h2>
        <p>I like turning ideas into things anyone can open in a browser. The part that keeps me coming back is watching <strong>a page respond to something I typed</strong>, <em>even something this small</em>.</p>
      </section>
      <section id="skills" class="block">
        <h2>Skills</h2>
        <ul class="skill-row">
          <li class="skill-card">HTML</li>
          <li class="skill-card">CSS</li>
          <li class="skill-card">JavaScript</li>
        </ul>
      </section>
      <section id="contact" class="block">
        <h2>Contact</h2>
        <p>Find my code on <a href="https://github.com/octocat" class="btn">GitHub</a> or connect on <a href="https://www.linkedin.com/in/example" class="btn">LinkedIn</a>.</p>
        <form>
          <label for="name">Name</label>
          <input type="text" id="name" name="name" />
          <label for="email">Email</label>
          <input type="email" id="email" name="email" />
          <button>Send</button>
        </form>
      </section>
    </main>
    <footer>
      <p>Built while learning HTML.</p>
    </footer>
  </body>
</html>

RUN TO SEE YOUR PAGE

The "where you left off" demos show the placeholder version of the page. Your own page, with your real content, is safe in the exercise below.

There is no <script> on that page yet. Act II never needed one. HTML describes structure. CSS describes look. JavaScript describes behaviour: values, decisions, and reactions. This lesson stays in the dark on purpose. You will not change the preview. You will change the CONSOLE pane under it.

When the browser reaches your script, it runs what is inside, top to bottom, one line at a time, once. Everything above the script has already been drawn. That order is why the rest of this act keeps asking when a line runs, not only what it says.

Run this tiny page, then look under the preview for a section labelled CONSOLE:

ONE LINE PRINTED TO THE CONSOLE · HTML

▸WHAT'S ALREADY IN THIS PAGE

New here? This starter already carries the standard HTML frame. You do not need to change it to do the exercise — each piece is taught in its own lesson.

<!DOCTYPE html> — Tells the browser to use modern rendering rules. Taught in lesson 2.
<html> … </html> — The root element that wraps the whole document. Taught in lesson 2.
lang="en" — Sets the page's language. Taught in lesson 6.
<head> — Holds information about the page; nothing in it is drawn on screen. Taught in lesson 2.
<meta charset="UTF-8" /> — Sets how the browser decodes the text. Taught in lesson 6.
<title> — Sets the browser-tab text. Taught in lesson 2.
<body> — Holds everything a visitor actually sees. Taught in lesson 2.
<script> — Holds JavaScript for the page. Taught in lesson 23.

Untitled

RUN TO SEE YOUR PAGE

The heading stayed the same. The CONSOLE pane shows Hello from JavaScript. That line came from console.log, a method: a function that belongs to a value, written with a dot after that value (console). Methods print, select, listen, and change pages later in this act. Here console.log only prints so you can see what the script produced.

Earlier lessons said browsers never show error messages for HTML. That claim was about HTML parsing. JavaScript is different. When JavaScript cannot run, this sandbox writes a red line in the CONSOLE, often with a line number. You will force that on purpose later in this lesson. It is the first time this track shows you a browser-reported error.

Now store a value under a name, then print that name:

A VALUE STORED UNDER A NAME · HTML

▸WHAT'S ALREADY IN THIS PAGE

New here? This starter already carries the standard HTML frame. You do not need to change it to do the exercise — each piece is taught in its own lesson.

<!DOCTYPE html> — Tells the browser to use modern rendering rules. Taught in lesson 2.
<html> … </html> — The root element that wraps the whole document. Taught in lesson 2.
lang="en" — Sets the page's language. Taught in lesson 6.
<head> — Holds information about the page; nothing in it is drawn on screen. Taught in lesson 2.
<meta charset="UTF-8" /> — Sets how the browser decodes the text. Taught in lesson 6.
<title> — Sets the browser-tab text. Taught in lesson 2.
<body> — Holds everything a visitor actually sees. Taught in lesson 2.
<script> — Holds JavaScript for the page. Taught in lesson 23.

Untitled

RUN TO SEE YOUR PAGE

The console shows Your Name. You did not type that string into console.log. You typed pageOwner, and the script looked up the value stored under that name. That named storage is a variable.

Two values, two logs:

TWO NAMES, TWO LINES · HTML

▸WHAT'S ALREADY IN THIS PAGE

New here? This starter already carries the standard HTML frame. You do not need to change it to do the exercise — each piece is taught in its own lesson.

<!DOCTYPE html> — Tells the browser to use modern rendering rules. Taught in lesson 2.
<html> … </html> — The root element that wraps the whole document. Taught in lesson 2.
lang="en" — Sets the page's language. Taught in lesson 6.
<head> — Holds information about the page; nothing in it is drawn on screen. Taught in lesson 2.
<meta charset="UTF-8" /> — Sets how the browser decodes the text. Taught in lesson 6.
<title> — Sets the browser-tab text. Taught in lesson 2.
<body> — Holds everything a visitor actually sees. Taught in lesson 2.
<script> — Holds JavaScript for the page. Taught in lesson 23.

Untitled

RUN TO SEE YOUR PAGE

Two console lines: a string, then a number. Each const line creates one name and gives it one value.

The syntax

JavaScript for this track lives in a <script> element at the end of <body>. Put it after the markup it will later work with:

<body>
  <!-- page content -->
  <script>
    console.log("Hello from JavaScript");
  </script>
</body>

console.log(...) prints whatever you put in the parentheses into the CONSOLE pane.

A value is a piece of data: a string in quotes, or a number without quotes.

A variable is a name that holds a value. This track declares variables with const:

const pageOwner = "Your Name";
const skillCount = 3;

const means the name is created on that line and given that value once. After that line, writing pageOwner means the string "Your Name". Writing skillCount means the number 3.

Strings use quotes. Numbers do not:

console.log(pageOwner);
console.log(skillCount);

A minimal working example

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>First script</title>
  </head>
  <body>
    <h1>Look at the console</h1>
    <script>
      const pageOwner = "Your Name";
      console.log(pageOwner);
    </script>
  </body>
</html>

One script at the end of the body. One variable. One console line. The heading does not need to change for the lesson to succeed.

Common mistakes

You Run, the preview looks identical, and you assume nothing happened. Scroll to the CONSOLE pane under the preview. console.log does not restyle the page. An unchanged preview with a new console line is success for this lesson.

You write a broken line and both your console.log calls disappear. Run this:

A SYNTAX ERROR IN THE CONSOLE · HTML

▸WHAT'S ALREADY IN THIS PAGE

New here? This starter already carries the standard HTML frame. You do not need to change it to do the exercise — each piece is taught in its own lesson.

<!DOCTYPE html> — Tells the browser to use modern rendering rules. Taught in lesson 2.
<html> … </html> — The root element that wraps the whole document. Taught in lesson 2.
lang="en" — Sets the page's language. Taught in lesson 6.
<head> — Holds information about the page; nothing in it is drawn on screen. Taught in lesson 2.
<meta charset="UTF-8" /> — Sets how the browser decodes the text. Taught in lesson 6.
<title> — Sets the browser-tab text. Taught in lesson 2.
<body> — Holds everything a visitor actually sees. Taught in lesson 2.
<script> — Holds JavaScript for the page. Taught in lesson 23.

Untitled

RUN TO SEE YOUR PAGE

The CONSOLE shows a red SyntaxError with a line number. Neither before the break nor after the break appears. A syntax error means the whole script is invalid, so none of it runs. That is the opposite of HTML's silent recovery. It is the signal you will use when a carried-forward script suddenly does nothing later in this act.

Try it yourself

Your profile page still has no running JavaScript. Add the script element yourself, then fill it. Confirm your work in the CONSOLE pane, not in the preview.

Run the starting code below. Confirm the preview still shows your styled profile page, and that the CONSOLE pane is empty or absent until something prints. Confirm there is no <script> in index.html yet.
Right before </body>, add an empty <script></script> pair. Run it. Confirm the preview is unchanged and the CONSOLE still has nothing new (an empty script runs nothing).
Inside that <script>, add console.log("Profile script running");. Run it. Confirm the CONSOLE pane under the preview shows that exact sentence.
Above that log, add const pageOwner = "Your Name"; (use your real name if you want). Change the log to console.log(pageOwner);. Run it. Confirm the console shows the name stored in pageOwner, not the word pageOwner.
Add a second variable, const skillCount = 3;, and a second line console.log(skillCount);. Run it. Confirm the console shows two lines: your name, then 3.
Break it on purpose: change the skillCount line to const skillCount = ; with nothing after the equals sign. Run it. Confirm the CONSOLE shows a red syntax error, and that neither of your log lines appears.
Fix it: put 3 back after the equals sign. Run it. Confirm both console lines return.

TRY IT YOURSELF · HTML

▸WHAT'S ALREADY IN THIS PAGE

New here? This starter already carries the standard HTML frame. You do not need to change it to do the exercise — each piece is taught in its own lesson.

<!DOCTYPE html> — Tells the browser to use modern rendering rules. Taught in lesson 2.
<html> … </html> — The root element that wraps the whole document. Taught in lesson 2.
lang="en" — Sets the page's language. Taught in lesson 6.
<head> — Holds information about the page; nothing in it is drawn on screen. Taught in lesson 2.
<meta charset="UTF-8" /> — Sets how the browser decodes the text. Taught in lesson 6.
<title> — Sets the browser-tab text. Taught in lesson 2.
<body> — Holds everything a visitor actually sees. Taught in lesson 2.

Untitled

RUN TO SEE YOUR PAGE

Your page still looks the same, and that is correct for this lesson. You now have a script at the end of the body. You have values stored under names. You have a console that tells you when JavaScript runs or fails. The next lesson uses those variables to change something on the page itself.