DailyRNG

Basic

Your first program

What is a program, and how do you run one? Print a message to the console, read a line of code like a sentence, and feel the loop of edit → save → run → observe that most of programming is.

What you will see

ReferenceError: Hello is not defined

About 3 min of reading

Try It

What is a program, and how do you actually run one? Before any game, before any feature, there is this one tiny loop: write a line, run it, and watch what the computer says back. Let me write my very first program and break that loop open myself, so "edit, save, run, observe" stops being a diagram and starts being a reflex.

1

My very first program is one instruction that prints a message. I create the .js file, point Node at it, and watch the console reply for the first time. The moment it prints, the whole edit-run-observe loop is real instead of abstract.

echo 'console.log("Hello, world!");' > 01-first.js node 01-first.js

Before you run it, say out loud what it will print. Then open the answer.

What it prints

Hello, world!

The quotes around Hello, world! are part of the JavaScript, not decoration. Without them the engine would treat the words as a variable instead of as text, and nothing would print.

2

Same file, a different message. Save, run again, and watch only the output change. This single gesture is the entire feedback loop of programming in miniature: I change one thing, I run it, the computer honestly tells me what happened.

echo 'console.log("I am learning to build a game!");' > 01-first.js node 01-first.js

Before you run it, say out loud what it will print. Then open the answer.

What it prints

I am learning to build a game!

Each run reads the file fresh from disk, so the new line shows up even though the file now holds something different than before. That is the loop working exactly as drawn.

3

One instruction prints one line. I add a couple more console.log calls in the same file and see how they stack up, each landing on its own line in the order I wrote them. The engine carries them out top to bottom.

echo 'console.log("Step one:"); console.log("Hello, world!");' > 01-first.js node 01-first.js

Before you run it, say out loud what it will print. Then open the answer.

What it prints

Step one: Hello, world!

Each console.log(...) is its own instruction and its own output line. Forgetting a closing ) or the quotes is the most common first mistake, and the engine will tell me about it next.

4

Sometimes I want to leave a note inside the file that the engine ignores entirely. Those are comments, started by //. I put a note and the code on the same line and confirm the output does not change, the note is there for a reader, not the machine.

echo '// my first program console.log("Hello, world!");' > 01-first.js node 01-first.js

Before you run it, say out loud what it will print. Then open the answer.

What it prints

Hello, world!

// starts a comment that runs to the end of the line, so anything after it is skipped. Here the note and the console.log share one physical line, and only the code prints, proof the comment was ignored.

5

The loop is honest, which means it will also tell me when I am wrong. I drop the closing quote so the instruction is broken and run it again, to watch how the engine reports the problem instead of producing output. A red message is not failure; it is the computer teaching me a rule.

echo 'console.log(Hello)' > 01-first.js node 01-first.js

Before you run it, say out loud what it will print. Then open the answer.

What it prints

ReferenceError: Hello is not defined

A name without quotes is read as a variable, so the engine looks for one called Hello, finds none, and stops. That honest stop message is exactly what I want to learn to read early.

Data Flow

One instruction runs, the engine evaluates it, and the console prints the result as text.

1 Write a console.log(...) instruction in a .js file

↓

2 Node reads the file top to bottom

↓

3 The engine evaluates the .log call with the text inside

↓

4 The output text is printed to the console

↓

5 You read it, change something, and run again

Why this works

Where programs live

The engine that actually runs your JS is different depending on where you are:

In a browser, the engine is Chrome / Edge / Firefox, which is exactly how the finished game in app1/ runs.
On your computer, the engine is Node.js, the fastest way to see a program run.

A program is never special to the machine. It's just text the engine reads top to bottom and carries out, one instruction at a time.

This is how the real game starts. app1/js/main.js: the game's entry point, begins by grabbing the canvas and starting the loop, in the same "first instruction" spirit as console.log.

The edit → run feedback loop

The heart of learning to program is the feedback loop. You change something small, you run it, you watch what happened, and you learn one thing about how the language behaves. Repeat.

Edit text → Save → Run → Observe output → Learn → Edit again

This loop is honest: the computer does exactly what you tell it, never more. That honesty is what makes programming a great thing to learn, every mistake teaches you a rule.

Examples

Talking to the computer

A program is just text in a file. For JavaScript the file ends in .js. Your very first program does the simplest possible useful thing: it prints a message.

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

Read it like a sentence: console, .log(, the text 'Hello, world!', then ) to close the action. The quotes tell JavaScript this is text, not instructions. Then run it with Node:

node 01-first.js

You should see:

Hello, world!

Why it works: console is a tool the computer gives you to work with the console (a text box where programs print). .log prints a line. That output is the result of your first real program.

Edit, save, run, observe

Programming is interactive. Change the text, save, run again:

console.log("I am learning to build a game!");
console.log("Step one:");
console.log("Hello, world!");

Each console.log(...) is its own instruction, printed on its own line. The loop, **edit, save, run, observe*: is 90% of what you'll do as a programmer. It's not magic. It's practice.

Watch out: every console.log(...) call is a separate instruction. Forgetting the closing ) or the quotes is the most common first mistake.

Comments: talking to your future self

Sometimes you want to write a note inside your program that the computer ignores. Those are comments. In JavaScript // starts a single-line comment.

// This line is a note. The computer ignores it entirely.
console.log("Hello, world!");

Great programmers write comments constantly, not to explain the obvious, but to explain why something does what it does, so their future self understands later.

How it works: anything after // is text the JavaScript engine skips entirely.

Words this lesson uses

Each one is defined here on this site. Open the entry for the full definition and the other words it points at.

Next Lesson

Variables and Values

Variables and Values →