Introduction to JavaScript

Welcome to your first lesson in JavaScript programming! JavaScript is the language that makes the web interactive and dynamic. Whether you're clicking a button, filling out a form, or watching animations, JavaScript is making it happen.

What You'll Learn

By the end of this lesson you will have written and run a small program of your own: one that computes a total, builds a labelled line of text, and prints both. You will also open a real web page in your browser and watch a click change it.

Nothing is assumed. This is where you start — there is no earlier lesson and no prerequisite. If you can open this page, you have everything you need.

This lesson is not required for the final project, but it is where the habit the whole course runs on begins: print a value, look at it, decide whether it is what you expected. The Task Manager you build in 15-capstone-project is debugged that way from the first line to the last, and every build task between here and there reports its own pass or fail the same way.

What is JavaScript?

JavaScript is a high-level, interpreted (or just-in-time compiled) programming language that runs in web browsers and on servers. Brendan Eich built the first working prototype in about ten days in May 1995. It reached the public that September in a Netscape Navigator 2.0 beta, got the name "JavaScript" that December, and shipped for real in Navigator 2.0 in March 1996 — and it kept growing for years after. It has since become one of the most popular programming languages in the world.

The language, and everything around it

It helps to draw a line early, because almost every beginner tutorial blurs it. JavaScript the language is defined by one document, the ECMA-262 standard: it owns things like let, function, if, arithmetic, and the built-in objects such as Math and JSON. Everything else you will use comes from the environment the language is running inside — a browser, or a server runtime like Node.js — and those environments add their own tools, called Web APIs (or host APIs).

console.log is the first one you will meet. It comes from the browser and other runtimes, not from the JavaScript language itself. That is not a technicality: it is why the same console.log line works in a browser tab and in Node.js (both environments provide a console), while document and alert work only in a browser, and reading a file works only on a server. When something does not exist, this is usually why — you asked the wrong environment for it, not the wrong language.

Key Features

• Universal: Runs in every web browser without installation
• Versatile: Used for front-end, back-end, mobile apps, and more
• Beginner-friendly: Easy to start learning with immediate results
• Powerful: Can build everything from simple scripts to complex applications

Your First JavaScript Program

Let's start with the classic "Hello, World!" program:

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

When you run this code, you'll see "Hello, World!" appear in the output. console.log() is the tool you will reach for most while learning — it lets you see what's happening inside your code.

The same idea, in a real page

The Run button above is a Node.js runtime, so it has a console but no web page. To see JavaScript doing the thing it was invented for — changing a page in response to a click — you need a browser. Save the following as hello.html anywhere on your computer, then double-click it to open it in your browser:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>My first interaction</title>
</head>
<body>
  <h1 id="heading">Click the button</h1>
  <button id="go">Say hello</button>

  <script>
    // This runs when the page loads.
    console.log("The page is ready.");

    // This runs later — only when the button is clicked.
    document.getElementById("go").addEventListener("click", function () {
      document.getElementById("heading").textContent = "Hello, World!";
      console.log("The button was clicked.");
    });
  </script>
</body>
</html>

What to expect. The page shows the heading Click the button and a button. Open the browser's developer tools (F12, or right-click → Inspect → Console) and you will already see The page is ready. printed there. Click the button: the heading changes to Hello, World! and a second line, The button was clicked., appears in the console.

Two things worth noticing, because the rest of the course turns on them. First, console.log behaves identically in both places — same call, same output — because both environments provide a console. Second, document exists only here: it is a browser Web API, and asking for it in the Run button above would fail. You will build on this page properly in 10-dom-and-events.

Understanding Console Output

The console.log() function prints messages to the console. You can print text, numbers, and more:

// A string argument prints exactly as written, quotes stripped.
console.log("Welcome to JavaScript!");

// Numbers need no quotes — quoting one would make it text instead.
console.log(42);
console.log(3.14);

// Commas separate arguments. Use them instead of gluing values into one
// string: console.log prints them space-separated and keeps each one's type.
console.log("The answer is:", 42);

// An argument is evaluated FIRST, then handed over — so what arrives is the
// result of the expression, not the characters you typed.
console.log("5 + 3 =", 5 + 3);

Now finish one yourself. Copy this into the Run box and replace each ___ before running it — then check your prediction against what prints:

// Print the label "Minutes in a day:" followed by the answer as a NUMBER.
// Do the arithmetic inside the call; do not type the answer yourself.
console.log("Minutes in a day:", ___ * ___);

If you filled in 24 * 60, it prints Minutes in a day: 1440. If you wrote "24 * 60" with quotes, it prints the characters 24 * 60 instead — the quotes made it text, so there was nothing to evaluate.

console.log("The answer is:", 42);
console.log("5 + 3 =", 5 + 3);

How JavaScript Runs Your Code

You now have enough to state the model this whole course rests on, and it is worth stating precisely, because a vague version of it will mislead you.

Statements run one at a time, top to bottom. Within a single statement, the innermost expressions are evaluated first, and what gets passed along is the resulting value — never the text you typed.

That second half is the part beginners skip, and it is the half that predicts things you have not been shown. Three consequences:

1. Arguments are values, not text. console.log("5 + 3 =", 5 + 3) prints 5 + 3 = 8, because 5 + 3 was reduced to 8 before console.log was called at all. The function has no way to know an addition ever happened.
2. Nesting resolves inside-out. Given console.log(2 + 3 * 4), the 3 * 4 runs first (multiplication binds tighter than addition), giving 2 + 12, then 14. Add parentheses and you change the answer, not just the appearance: (2 + 3) * 4 prints 20.
3. A name holds whatever value it had when the line ran. Later lines see earlier results; earlier lines cannot see later ones. This is why order matters at all.

Use it as a prediction tool: before running any line, ask what value does each piece reduce to, and in what order? If your prediction and the output disagree, one of them is wrong and finding out which is the whole job.

Comments in JavaScript

Comments help you explain your code. JavaScript has two types of comments:

// This is a single-line comment
console.log("This will run"); // Comment at the end of a line

/*
This is a
multi-line comment
that spans several lines
*/
console.log("Comments are ignored by JavaScript");

Ordering a Program

Reading the model is one thing; applying it is another. Here are four lines of a function body, scrambled. Only one arrangement works.

Why that order? Because a value has to exist before it can be used. withTax is computed from price, line is built from withTax, and the print shows line. Each arrow points forward in time, and reversing any one of them asks for a value that has not been produced yet.

Finding a Bug That Does Not Crash

The most expensive bugs in JavaScript are not the ones that crash. They are the ones that run perfectly, exit cleanly, and print the wrong answer — and this is the first one you will meet.

// A tiny receipt. It should print each label followed by the number.
// Two of the three lines are wrong, and none of them raises an error.

console.log("Items: " + 2 + 3);
console.log("Price each: " + 4);
console.log("Total: " + 2 + 3 * 4);

Items: 5
Price each: 4
Total: 20

Try It Yourself

Reading about console.log is not the same as writing a program with it. This is a build task: a small program that reports its own pass or fail. You are given two fixed values and three unfinished const declarations, each one leaning on something this lesson taught — joining text, doing arithmetic inside an expression, and keeping a number a number. Run it as-is and it fails immediately, naming the first value that is still wrong. Fill each declaration in until every check passes and it prints All checks passed.

The starter already has the data, the placeholders, and the checks. You replace only the right-hand side of each const — the undefined after the =.

const assert = require('assert');

// The data: fixed values to report on. Do NOT change these.
const courseName = "JavaScript";
const lessonNumber = 1;

// TODO 1: a greeting string that reads exactly: Hello, JavaScript!
//   courseName is "JavaScript" -> "Hello, JavaScript!"
const greeting = undefined; // replace undefined with your code

// TODO 2: the sum of 10 and 20, as a number.
//   10 + 20 -> 30
const total = undefined; // replace undefined with your code

// TODO 3: the next lesson number: lessonNumber plus 1, as a number.
//   lessonNumber is 1 -> 2
const nextLesson = undefined; // replace undefined with your code

// --- Build checks: these must all pass. Do not edit below this line. ---
assert.strictEqual(
greeting,
"Hello, JavaScript!",
"greeting should be the words Hello, then courseName, then an exclamation mark",
);
assert.strictEqual(
typeof total,
"number",
"total should be a number, not a string — do not put quotes around it",
);
assert.strictEqual(total, 30, "total should be 10 + 20");
assert.strictEqual(
nextLesson,
2,
"nextLesson should be lessonNumber plus 1",
);

console.log("All checks passed.");
console.log(greeting);
console.log("Total:", total);
console.log("Next lesson:", nextLesson);

All checks passed.
Hello, JavaScript!
Total: 30
Next lesson: 2

Once it passes, try two variations and predict each before running:

1. Quote the arithmetic. Change total to "10 + 20" — the calculation written as text instead of an expression. Predict which of the two checks on total fails first, and what message it prints, before running. (One check asks about the type; the other asks about the value. Which one does the file reach first?)
2. Hard-code the greeting. Change greeting to the literal "Hello, World!". Predict whether the greeting check passes before running. Then put your correct greeting back, change courseName at the top to "Node", and predict again before you re-run. The two runs together are the point: decide what each one does to the check before you look.

Taking It Somewhere New

function double(n) {
console.log("double was called");
return n * 2;
}

const total = 5 + double(3);
console.log("total:", total);

Key Takeaways

• JavaScript is the programming language of the web
• console.log() prints output — and it comes from the environment (browser or Node.js), not from the JavaScript language itself
• Comments start with // for single lines or /* */ for multiple lines
• Statements run top to bottom, but within a statement the innermost expression is evaluated first, and what is passed on is the resulting value

Next Steps

In the next lesson, we'll learn about variables and data types - how to store and work with different kinds of information in JavaScript.

Pro Tip: The best way to learn JavaScript is by experimenting! Try changing the code examples above and see what happens. Don't be afraid to make mistakes - that's how you learn!