What JavaScript Is and Where It Runs

JavaScript is the programming language that brings web pages to life: it reacts to clicks, validates forms and loads data without reloading the page. Browsers run it without any plugins, and it is also used to build servers, mobile and desktop apps. In this lesson you will learn where JavaScript fits next to HTML and CSS, how the language evolves, where it runs — and you will run your first line of code.

HTML, CSS and JavaScript: three layers of a page

It helps to think of a web page as three layers:

A "like" button that uses all three layers:

<!-- HTML: what is on the page -->
<button class="like">♥ 0</button>

<!-- CSS: what it looks like -->
<style>
  .like { padding: 8px 16px; border: none; border-radius: 8px; background: #ffe4ec; }
</style>

<!-- JavaScript: what happens on click -->
<script>
  let likes = 0;
  const button = document.querySelector('.like');
  button.addEventListener('click', () => {
    likes = likes + 1;
    button.textContent = '♥ ' + likes;
  });
</script>

HTML creates the button, CSS makes it pink with rounded corners, and JavaScript stores the number of likes in the likes variable, increases it on every click and updates the text: ♥ 1, ♥ 2 and so on. Without JavaScript the button would look the same but do nothing. We will study the details (let, document, addEventListener) in upcoming topics.

💡 HTML and CSS describe the page, JavaScript controls it. If CSS can solve a task (for example, a :hover effect), you do not need JavaScript for it.

Your first line of code: console.log

You do not need to install anything — every browser has a built-in console. Open any tab, press F12 or Ctrl+Shift+J (macOS: Cmd+Option+J), switch to the Console tab, type the lines and press Enter:

console.log('Hello, world!');
console.log(2 + 3);
console.log('Price:', 150, 'AZN');

Hello, world!
5
Price: 150 AZN

console.log() means "print to the console". The value in the parentheses is called an argument: text in quotes is printed as is, the expression 2 + 3 is evaluated first, and several comma-separated values are printed on one line separated by spaces. The console's features are covered in the topic "DevTools and the Console".

⚠️ A grey undefined after a command is not an error: the console is telling you that console.log() returned nothing. Your text is printed on the line above.

A small demo: JavaScript changes the page

In real projects code lives inside an HTML file or is linked to it. A minimal page where a script changes the heading text:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>First script</title>
</head>
<body>
  <h1 id="title">Hello!</h1>
  <script>
    // find the heading and replace its text
    document.getElementById('title').textContent = 'Hello from JavaScript!';
  </script>
</body>
</html>

The browser builds the "Hello!" heading, reaches <script> and runs the code: it finds the element with id="title" and replaces its text. The user sees "Hello from JavaScript!" right away. Ways of adding scripts are the subject of the next lesson; working with elements comes in the DOM section.

ECMAScript: the standard and language versions

JavaScript was created by Brendan Eich at Netscape in 1995 — the first version was written in about ten days. So that every browser understands the same code, the language was standardised: since 1997 its specification has been called ECMAScript (ECMA-262), and it is developed by the TC39 committee. ECMAScript is the rules of the language; JavaScript is their implementation plus the features of the environment (for example, document in the browser).

ES2015 changed the very style of the language:

// ES5: how code used to be written
var name = 'Aysel';
var greet = function (user) {
  return 'Hello, ' + user + '!';
};
console.log(greet(name)); // → Hello, Aysel!

// ES2015+: modern syntax
const userName = 'Aysel';
const greetUser = (user) => `Hello, ${user}!`;
console.log(greetUser(userName)); // → Hello, Aysel!

The result is the same, but the modern version is shorter: const instead of var, an arrow function, a template literal instead of joining with +. In this course we write modern code and study the old style so you can read other people's projects. Recent additions already work in browsers and in Node.js 22:

// ES2024: group an array by a property
const students = [
  { name: 'Aysel', course: 'js' },
  { name: 'Murad', course: 'php' },
];
console.log(Object.keys(Object.groupBy(students, (s) => s.course))); // → [ 'js', 'php' ]

// ES2025: intersection of two sets
const frontend = new Set(['html', 'css', 'js']);
console.log(frontend.intersection(new Set(['php', 'js']))); // → Set(1) { 'js' }

Feature support is checked on caniuse.com and MDN.

Engines and runtimes

Code is executed by a JavaScript engine: a program that reads the code, compiles it to machine instructions while it runs (JIT compilation) and executes it:

• V8 — Chrome, Edge, Opera, as well as Node.js and Deno;
• SpiderMonkey — Firefox;
• JavaScriptCore — Safari and every browser on iOS, as well as Bun.

The engine only knows the language itself: variables, functions, objects. Everything else comes from the runtime:

"Pure" JavaScript works in both. A file hello.js containing console.log('Welcome to JavaScript!') is run in Node.js with a terminal command:

node hello.js

Welcome to JavaScript!

We will install Node.js and VS Code in the topic "Dev Environment".

Java and JavaScript are not the same thing

The name "JavaScript" was a marketing move in 1995: Java was at the peak of its popularity at the time. In reality they are different languages: Java has static typing and compiles to bytecode for the JVM, while JavaScript has dynamic typing and is executed by the engine of a browser or Node.js. A program in Java:

public class Main {
    public static void main(String[] args) {
        String name = "Murad";
        System.out.println("Hello, " + name);
    }
}

In Java even the simplest program needs a class, a main method and an explicit String type. In JavaScript two lines are enough: const name = 'Murad'; and console.log('Hello, ' + name);.

⚠️ Search for learning materials with "JavaScript" or "JS" — articles about Java will not help you.

Common mistakes

1. Wrong letter case. Console and console are different names:

Console.log('Hi'); // ✗ ReferenceError: Console is not defined
console.log('Hi'); // ✓ Hi

2. "Smart" quotes from Word or a messenger. JavaScript does not understand typographic quotes like “…” and «…»:

console.log(“Hello”); // ✗ SyntaxError: Invalid or unexpected token
console.log("Hello"); // ✓ plain straight quotes

3. Expecting changes made in the console to stay. They live only in the current tab and disappear after a reload. Permanent code is written in project files.

Summary

• HTML is responsible for structure, CSS for presentation, JavaScript for behaviour.
• The rules of the language are defined by the ECMAScript standard; versions are released yearly, and ES2015 was the turning point.
• Code is executed by an engine: V8, SpiderMonkey or JavaScriptCore.
• The runtime adds its own features: document and window in the browser, files and networking in Node.js.
• console.log() prints values to the console — the main tool for your first experiments.
• Java and JavaScript are different languages.

Practice

1. In the browser console, print your name and then your city — each with a separate console.log() command.
2. Use the console as a calculator: print the number of seconds in a day and minutes in a year with a label, for example console.log('Seconds per day:', 24 * 60 * 60).
3. Sort these tasks into layers (HTML, CSS, JavaScript): add a login form; make a button blue; show "Wrong password" after the form is submitted; lay out cards in three columns; load exchange rates from a server; smoothly highlight a link on hover.
4. On any page with an h1, run document.querySelector('h1').textContent = 'Edited by me' and document.body.style.background = 'lightyellow' in the console. Then reload the page and explain where the changes went.