Introduction to JavaScript

What JavaScript does, where it runs, and your first lines of code.

Lesson 1 of 56Beginner13 min read

JavaScript (JS) is a programming language that runs in every web browser. If HTML provides the nouns of a page (heading, button, image) and CSS provides the adjectives (large, blue, rounded), JavaScript provides the verbs: click, show, calculate, load and save.

Unlike HTML and CSS, JavaScript is a full programming language. It can store information, make decisions, repeat tasks and respond to what visitors do. That makes it more challenging than the first two languages, but also far more powerful. It's the language that turns a static document into an app.

In this lesson you'll learn what JavaScript can do and write your first lines of code. There's nothing to install, because every example runs right here in the page.

What can JavaScript do?

  • React when someone clicks, types or scrolls
  • Change text, styles and images on the page without reloading it
  • Check a form before it's sent
  • Load fresh data from a server, such as weather, messages or scores
  • Store data in the browser so it's still there next time
  • Run games, maps, chat apps and complete office software

Outside the browser, with a tool called Node.js, JavaScript also runs web servers, command-line tools and desktop apps. Learning it once opens a lot of doors.

Your first line of JavaScript code

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

console.log() prints a message to the console, a panel developers use to see what their code is doing. Every example on this site has a console under the code. In a normal browser, press F12 and open the Console tab.

The console is also where error messages appear. Whenever code doesn't behave as expected, the console is the first place to look.

Statements, semicolons and comments

  • A statement is one instruction. JavaScript runs statements from top to bottom, one at a time.
  • End statements with a semicolon ;. JavaScript can often add them for you, but writing them yourself avoids surprises.
  • // starts a single-line comment, and /* … */ wraps a comment over several lines. Comments are ignored by the computer.
  • JavaScript is case-sensitive: console.log works, but Console.Log doesn't.

How JavaScript fits with HTML and CSS

A web page loads in layers. The browser first reads the HTML to build the page's structure, applies the CSS to style it, and then runs the JavaScript, which can read and change both. A good habit is to make sure the page's essential content works with HTML alone, then use JavaScript to make it better. That way, the page is still useful if a script fails to load.

JavaScript Syntax

A JavaScript statement

// a comment
console.log("message");

JavaScript Summary

  • JavaScript is the programming language of the web and runs in every browser.
  • It reacts to visitors, changes the page, checks forms and loads data.
  • console.log() prints messages to the console, where errors also appear.
  • Statements run from top to bottom and should end with a semicolon.
  • JavaScript is case-sensitive, and comments start with // or /*.

JavaScript Examples

Each example runs in the page. Edit the code and press Run to see what changes.

Example 1

Hello, console

Press Run. Then change the messages and run again.

console.log("Hello, world! 👋");
console.log("I'm learning JavaScript.");
console.log(2 + 3);
ConsoleEdit the code, then press Run or Ctrl+Enter
Line-by-line explanation
  1. Line 1Print a piece of text, called a string. Text goes inside quotes.
  2. Line 2Statements run in order, so this prints second.
  3. Line 3JavaScript can do maths. No quotes = it's a number, so it prints 5.
Example 2

A tiny program

Programs combine small steps. This one calculates a pizza bill.

// Split a pizza bill between friends
let pizzas = 3;
let pricePerPizza = 12;
let friends = 4;

let total = pizzas * pricePerPizza;
let each = total / friends;

console.log("Total bill:", total);
console.log("Each person pays:", each);
ConsoleEdit the code, then press Run or Ctrl+Enter
Line-by-line explanation
  1. Line 1A comment explaining what the program does.
  2. Lines 2 to 4Store three numbers in variables (named boxes). More on these in Variables.
  3. Line 6Multiply to get the total: 36.
  4. Line 7Divide it between friends: 9.
  5. Lines 9 to 10Print labels and values. Commas let you print several things at once.
Example 3

Making a web page react

JavaScript's superpower: changing the page. Click the button in the result.

const button = document.querySelector("#btn");
const message = document.querySelector("#msg");

button.addEventListener("click", () => {
  message.textContent = "You clicked! JavaScript is alive 🎉";
});
ResultEdit the code, then press Run or Ctrl+Enter
Line-by-line explanation
  1. Lines 1 to 2Find the button and paragraph on the page.
  2. Line 4When the button is clicked, run the code inside { }.
  3. Line 5Change the paragraph's text. You'll master this in DOM Manipulation.

Common JavaScript Mistakes

Capital letters

Don't
Console.Log("Hi");
Do
console.log("Hi");

JavaScript is case-sensitive. Console and console are different names, and only one exists.

Text without quotes

Don't
console.log(Hello world);
Do
console.log("Hello world");

Without quotes, JavaScript thinks Hello is the name of something and throws a ReferenceError.

JavaScript in Real Projects

JavaScript runs the modern web

Every "Like" button, autocomplete search box, image carousel, shopping cart counter, and live chat widget is JavaScript. Apps such as YouTube, Netflix and Figma send enormous amounts of it to your browser. Learning JS is learning how the interactive web actually works.

JavaScript Exercises

Answer each one and check it instantly. If you get stuck, open the hint before the answer.

Fill in the blankseasy

Print the message "Ready!" to the console.

.("Ready!");
Predict the outputeasy

What does this print?

console.log(10 - 4);
console.log("10 - 4");
Multiple choiceeasy

Which is a JavaScript comment?

Fix the bugeasy

This code should print two lines, but it throws errors. Fix it.

Console.log("Good morning!");
console.log(Have a great day);
ConsoleEdit the code, then press Run or Ctrl+Enter
Checks
  • Prints "Good morning!"
  • Prints "Have a great day"
  • No errors

JavaScript Quiz

4 questions to check what you learned.

  1. Where does console.log() show its output?

    • On the web page
    • In a pop-up window
    • In the browser's developer console
    • In the address bar

  2. JavaScript and Java are the same language.

    • True
    • False

  3. In what order do statements run?

    • Bottom to top
    • Shortest first
    • Randomly
    • Top to bottom, one after another

  4. What does console.log(3 + 4) print?

    • 34
    • 7
    • 3 + 4
    • Nothing

JavaScript Challenge

Introduce yourself in the console

Write a program that prints three lines:

  1. Hello!
  2. A line that starts with My name is followed by any name
  3. The result of 2026 - 2010 (no quotes, so JavaScript calculates it)
// Your code here
ConsoleEdit the code, then press Run or Ctrl+Enter
Checks
  • Prints "Hello!"
  • A line starts with "My name is "
  • Prints 16 (calculated)
  • At least three lines

Related JavaScript topics

02Where to Put JSThe script tag, external files, and why defer matters.03Output & ConsoleShow results with console.log, console.table, warnings and the page itself.04Variables (let, const)Store values in named boxes with let and const.
Esc
↑↓ to navigateEnter to open