JavaScript · Lesson 1 of 6

Hello, JavaScript

Run JavaScript in the browser and in Node.js, and print your first output.

Beginner
10 min read
3 objectives

What you will learn

Run code in the console and Node
Use console.log
Understand where JS runs

JavaScript began as a small scripting language for web pages and now runs almost everywhere: every browser, servers through Node.js, mobile apps and desktop tools. It is the only language browsers run natively, so anyone who builds for the web meets it sooner or later.

What JavaScript is for

Every web page has three layers. HTML is the structure (headings, paragraphs, buttons). CSS is the look (colours, spacing, layout). JavaScript is the behaviour: what happens when you click, type, scroll or wait. Without it a page is a poster; with it a page is an application. Since Node.js arrived, the same language also runs servers, scripts and command-line tools.

That makes JavaScript unusual: learn it once and you can build the front end, the back end and everything in between.

Two places to run it

The browser console: open developer tools (F12, or Cmd+Option+J on a Mac) and type code straight in. Nothing to install.
Node.js: install it from nodejs.org, save code in a file and run it from the terminal.

console.log("Hello, stackcone!");
console.log(2 + 2);
console.log("2 + 2 =", 2 + 2);

Output

Hello, stackcone!
4
2 + 2 = 4

node hello.js

Statements, semicolons and comments

Statements usually end with a semicolon. JavaScript can insert them automatically, but relying on that occasionally causes surprises, so pick a style and stay consistent. Comments use // for one line and /* ... */ for blocks.

// a single-line comment
const greeting = "hi"; /* inline block comment */
console.log(greeting);

JavaScript is not Java

The names are a marketing accident. The languages are unrelated: JavaScript is dynamically typed and runs in an engine (V8 in Chrome and Node), while Java is compiled and statically typed.

Try it right now in your browser

You already have a JavaScript playground installed. In any browser, press F12 (or Cmd+Option+J on a Mac), open the Console tab, type a line and press Enter. It runs immediately, and you can experiment without saving anything.

console.log("Hello from the console");
console.log(2 + 3 * 4);
console.log("5" + 1, "5" - 1);

Output

Hello from the console
14
51 4

Look at the last line: the same 5 behaves differently with + and -. JavaScript quietly converts between types, which is powerful and occasionally surprising. The next lesson explains the rules so they stop being surprising.

console.log is your best friend

When you want to know what a value is, print it. console.log accepts several values and understands objects and arrays, so it is the fastest debugging tool you have.

const user = { name: "Ada", langs: ["JS", "Python"] };
console.log(user);
console.log("Name:", user.name, "| count:", user.langs.length);
console.table([{ id: 1, ok: true }, { id: 2, ok: false }]);

Output

{ name: 'Ada', langs: [ 'JS', 'Python' ] }
Name: Ada | count: 2
┌─────────┬────┬───────┐
│ (index) │ id │ ok    │
├─────────┼────┼───────┤
│ 0       │ 1  │ true  │
│ 1       │ 2  │ false │
└─────────┴────┴───────┘

Your first HTML page with JavaScript

Save this as index.html and double-click it. The <script> tag holds your code, and document.title is a value the browser gives you for free.

<!DOCTYPE html>
<html>
  <body>
    <h1 id="title">Hello</h1>
    <script>
      const heading = document.getElementById("title");
      heading.textContent = "Hello, JavaScript!";
      console.log("page title is", document.title);
    </script>
  </body>
</html>

Refresh the page and the heading changes: your code reached into the page and rewrote it. You will do exactly this in the DOM lesson.

Common mistakes

Forgetting quotes around text, giving ReferenceError: Hello is not defined.
Typing Console.log with a capital C; names are case sensitive.
Ignoring the console: red errors there almost always tell you the file, line and cause.

Key takeaways

JavaScript adds behaviour to HTML and CSS, and also runs on servers through Node.js.
The browser console and node file.js are the two quickest places to run code.
console.log prints values and objects; use it constantly while learning.
JavaScript converts types automatically, so learn the rules in the next lesson.

// Write your solution here

Up next · Lesson 2Variables and Typeslet, const, primitive types, template strings and the equality traps.