JavaScript Simplified · One concept, one day, one project · Day 1 of 32

JavaScript and How It Works

What JavaScript is, where it runs, and how to make it say something. Then you write your first program: a short introduction, printed in the browser console.

A web page has three languages working together. HTML is the content, CSS is the look, and JavaScript is the behaviour: the part that makes a page do something when you click, type, or scroll. This course is about that third language, taken slowly.

The plan for every single day is the same, so you always know what you are getting: one concept, one small project. Today the concept is what JavaScript is and how it runs, and the project is a short program that introduces you in the browser console.

1. What JavaScript Is

Definition

JavaScript is a programming language that runs inside the web browser. It is the language that lets a page react: show a message, change a colour, add an item to a list, send a form.

Real-Life Scenario

Think of a light switch on a wall. The wall is the HTML (it is there, it holds the switch). The paint is the CSS (how the wall looks). JavaScript is the wiring behind the switch: the thing that makes something happen when you flip it. Without it, the switch is just a shape on the wall.

JavaScript, HTML and CSS: three jobs

2. The Browser and the Console

Definition

The browser (Chrome, Firefox, Edge) has a JavaScript engine built in: software that reads your JavaScript and runs it. It also has a console, a small window where JavaScript can print messages and where you can see errors. It is the first place a developer looks.

You print to the console with console.log(...). Whatever you put in the brackets is shown.

1
2

// console.log prints a message to the browser console.
console.log("Hello, Webbo3!");

➜ webbo3 node app.js
Hello, Webbo3!

To see this in a real browser: open any web page, press F12 (or right click and choose Inspect), and click the Console tab. Anything your JavaScript logs appears there.

3. Adding JavaScript to a Page

The <script> tag

JavaScript lives inside a <script> tag in your HTML, usually just before the closing </body>. The browser reads the page top to bottom, so putting the script at the end means the HTML is already there when your JavaScript runs.

1
2
3
4
5
6
7
8
9
10
11

<!DOCTYPE html>
<html>
  <body>
    <h1>My first page</h1>

    <!-- JavaScript goes here, at the end of the body -->
    <script>
      console.log("The page has loaded.");
    </script>
  </body>
</html>

Open this page, press F12, and "The page has loaded." is waiting in the Console tab.

4. Statements and Comments

Statements

A statement is one instruction. JavaScript runs them one after another, top to bottom. Each statement usually ends with a semicolon (;).

Comments

A comment is a note for humans that JavaScript ignores. You write one with two slashes (//) for a single line. Comments explain why, so your code makes sense later.

1
2
3
4

// This runs first.
console.log("Step one");
// This runs second. The order is top to bottom.
console.log("Step two");

➜ webbo3 node app.js
Step one
Step two

Today’s Mini Project

🧪 Console Introduction Program

Write a short program that introduces you in the console: your name, what you are learning, and one thing you are excited about. It is only a few lines, but it is a real program you wrote and ran.

1
2
3
4

// My introduction, printed line by line.
console.log("Hi, my name is Ada.");
console.log("I am learning JavaScript on Webbo3.");
console.log("I am excited to build real web apps.");

➜ webbo3 node app.js
Hi, my name is Ada.
I am learning JavaScript on Webbo3.
I am excited to build real web apps.

Checkpoint

Next: Day 2. A program that only prints fixed words is not very useful. Tomorrow you learn variables, so your program can remember information and work with it.