Introduction to JavaScript

Welcome to the JavaScript for Beginners tutorial series on Scriptly. These 28 chapters take you from your first console.log() to asynchronous APIs, modules and object-oriented code — everything you need before touching a framework. This chapter explains what JavaScript is, where it runs, and how it fits together with the HTML and CSS you already know.

What is JavaScript?

JavaScript (JS) is the programming language of the web. Where HTML provides structure and CSS provides presentation, JavaScript provides behaviour: what happens when a user clicks, types, scrolls, or when data arrives from a server.

• Runs everywhere — every modern browser has a JavaScript engine (V8, SpiderMonkey, JavaScriptCore), so no installation is needed.
• Dynamic and lightweight — an interpreted, single-threaded language with first-class functions.
• Multi-purpose — besides browsers, JS powers servers (Node.js), desktop apps, mobile apps and build tooling.

The three-layer web

All three are used together — for example, an HTML form gets its layout from CSS's box model, and JavaScript makes it validate and submit without reloading the page.

A first program

The classic starting point — open your browser's developer tools (F12 or right-click → Inspect → Console) and type:

console.log('Hello, JavaScript!');
console.log(2 + 2);          // → 4
console.log('Learning ' + 3 + ' topics a day');

Expected output:

Hello, JavaScript!
4
Learning 3 topics a day

console.log() prints values to the console. The text after // is a comment — the engine ignores it; it exists for humans reading your code.

What JavaScript can do

• React to the user — buttons, menus, keyboard shortcuts, drag and drop.
• Validate input — check an email format before the form ever reaches a server.
• Update the page (the DOM) — insert, remove or restyle elements without refreshing.
• Fetch data — talk to APIs and render results (weather, search, feeds).
• Remember things — save preferences in browser storage (chapter 25).
• Animate — drive transitions and canvas or WebGL graphics.

Where JavaScript runs: browser vs Node.js

This course focuses on browser JavaScript — the fundamentals transfer to every other environment.

A taste of real interaction

Here is the shape of almost every JavaScript program: select something, listen for an event, change the page.

<button id="like-btn">Like</button>
<p id="count">0 likes</p>

<script>
  let likes = 0;
  const btn = document.getElementById('like-btn');
  const count = document.getElementById('count');

  btn.addEventListener('click', () => {
    likes++;
    count.textContent = `${likes} like${likes === 1 ? '' : 's'}`;
  });
</script>

Expected output: clicking Like updates the counter text to “1 like”, “2 likes”, and so on — no page reload. Every piece here is explained later: variables (chapter 3), DOM selection (chapter 14), events (chapter 16) and template literals (chapter 11).

How this course is organised

1. Foundations (1–13) — syntax, types, control flow, functions, arrays, objects, scope and context.
2. The browser (14–19) — DOM, events, forms, errors, the event loop.
3. Async and architecture (20–25) — Promises, async/await, Fetch, modules, classes, storage.
4. Production skills (26–28) — regular expressions, dates and numbers, best practices and next steps.

Every chapter ends with common mistakes and a short practice checklist. Type the examples yourself — reading alone does not build muscle memory.

Common mistakes

• Confusing JavaScript with Java — they are unrelated languages with an unfortunately similar name.
• Learning a framework first — React, Vue and friends assume you already know the DOM, functions and async JS this course teaches.
• Ignoring the console — console.log() is your microscope; get comfortable opening dev tools immediately.

Practice checklist

1. Open the console and run the three console.log() examples.
2. Try console.log(10 / 3) and predict the output before running it.
3. Skim the chapter list — note any topics you have heard of but never properly learned.

Next: the three ways to attach JavaScript to a page and the one you should always use — Adding JavaScript to HTML.