Introduction to JavaScript

JavaScript is a programming language commonly used to add logic and interactivity to websites.

A useful way to think about the three technologies is:

HTML describes the structure and content of a page.
CSS controls how that content looks.
JavaScript controls what the page does.

For example, HTML can create a button, CSS can make the button look good, and JavaScript can make something happen when the user clicks it.

This lesson starts with JavaScript in the browser console and gradually moves toward using JavaScript in an actual web page.

1. What Can JavaScript Do?

JavaScript is used for many different things on the web.

Show messages

JavaScript can show a message to the user.

alert("Hello, world!");

Get user input

JavaScript can ask the user for some input.

const name = prompt("What is your name?");

The value entered by the user is stored in name.

Perform calculations

JavaScript can perform mathematical operations.

const price = 10000;
const quantity = 3;

const total = price * quantity;

console.log(total);

The result is:

Make decisions

JavaScript can run different code depending on a condition.

const age = 20;

if (age >= 18) {
    console.log("You are an adult.");
} else {
    console.log("You are not an adult.");
}

Work with user interactions

JavaScript can respond to things that happen on a web page, such as:

clicking a button
typing into an input
submitting a form
moving the mouse
scrolling
pressing a keyboard key

Fetch data

JavaScript can request data from a server or an API and use that data on a web page.

For example:

fetch("https://example.com/api/data")
    .then(response => response.json())
    .then(data => {
        console.log(data);
    });

This is one of the most important uses of JavaScript in modern web development.

2. Where Does JavaScript Run?

JavaScript can run in different environments, but when we are building a website, JavaScript commonly runs inside the web browser.

Modern browsers such as Chrome, Firefox, Edge, and Safari contain a JavaScript engine.

When the browser encounters JavaScript, the JavaScript engine executes it.

A simplified view looks like this:

Your JavaScript code
        ↓
      Browser
        ↓
 JavaScript engine
        ↓
    Executes code

This is why you can write JavaScript directly in the browser's developer console without creating a project first.

3. Try JavaScript in the Browser Console

Open your browser's Developer Tools and go to the Console tab.

You can usually open Developer Tools with:

F12

or:

Ctrl + Shift + I

Then select Console.

Try:

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

You should see:

Hello, JavaScript!

You can also perform calculations directly:

10 + 20

The console will return:

Try:

5 * 8

Then:

100 / 4

The console is useful because you can experiment with JavaScript immediately.

4. JavaScript Syntax

JavaScript has a relatively simple syntax, especially if you have seen languages such as C, C++, Java, or similar languages.