Lesson 1 of 30

Introduction to JavaScript

What JavaScript Actually Does

A web page is built from three separate languages, and each one has a different job. HTML lists what is on the page — a heading, a paragraph, a button. CSS decides how those things look — colour, spacing, layout. JavaScript decides what happens. It is the only one of the three that can make a decision, remember something, or change the page after it has already loaded.

That difference matters more than it sounds. HTML and CSS describe a page that is finished the moment it reaches the browser. JavaScript is a real programming language: it has variables, conditions, loops, functions and error handling, so it can respond to whatever the user does. When suggestions drop down as you type in a search box, when a form tells you your email is missing an @ before you press submit, when a cart total updates as you change the quantity — that is JavaScript running on your own machine, with no trip back to the server.

JavaScript was created in 1995 for exactly this purpose: adding small pieces of behaviour to otherwise static pages. It has grown far past that. The same language now runs servers through Node.js, builds mobile apps, drives build tools, and powers almost every large web application you use. But the original job — react to the user, change the page — is still the one you will use every day, and it is where this course starts.

There is one very practical reason to learn it before any other language. JavaScript is the only programming language that runs natively in every browser. You install nothing and compile nothing. Open the browser you already have, press F12, click the Console tab, type 2 + 2 and press Enter. You have just run JavaScript.

  • Reacts to the user — clicks, typing, scrolling, form submissions
  • Changes the page after it has loaded — adds, removes and rewrites HTML and CSS
  • Remembers things — in variables while the page is open, or in browser storage between visits
  • Talks to servers in the background — loading fresh data without reloading the page
  • Runs outside the browser too — Node.js uses the same language to build backend APIs
  • Is interpreted, not compiled — the browser reads and runs your source code directly

The Two Places JavaScript Runs

The same JavaScript code can run in two very different environments, and knowing which one you are in explains most of the confusing errors beginners hit. In the browser, your code is handed a set of extra objects that describe the page and the window around it: document, window, localStorage, fetch. In Node.js — a program that runs JavaScript directly on a computer — none of those exist, because there is no page. Node hands you a different toolbox instead: files, network servers, process information.

The language itself is identical in both. let, arrays, functions, async and every method you learn in this course behave exactly the same way in each. Only the surrounding toolbox changes. So if you copy an example that uses document.getElementById into Node, you get ReferenceError: document is not defined — not because your JavaScript is wrong, but because you asked for a page in a place that has none.

This course teaches browser JavaScript, because that is where the language is easiest to see working: you write a line, you watch the page change. Everything you learn transfers directly to Node.js later. You only swap the toolbox, not the language.

Notes
  • The browser console is the fastest place to test an idea. Press F12, or right-click the page and choose Inspect, then open the Console tab. Anything you type there runs immediately and prints its result.

Putting JavaScript on a Page

Browsers find your JavaScript through the <script> tag. You can write code directly inside the tag, or — much better once a project grows past a few lines — put it in a separate .js file and point the tag at it with src. Keeping code in its own file means the browser can cache it, your editor can check it, and your HTML stays readable.

Where you put the tag used to matter a great deal. A plain <script> inside <head> runs before the body of the page exists, so any attempt to find an element fails and you get null. The old workaround was to move the tag to the very bottom of the body. The modern fix is the defer attribute: the browser downloads the file in parallel with parsing the HTML, then runs it once the page is fully built. You get the speed and the safety together.

Two ways of showing output will appear constantly from here on. console.log() writes to the developer console and is what working developers actually use. alert() pops up a dialogue box that freezes the page until it is dismissed — acceptable in a first demo, an annoyance in real code.

Example 
<!-- index.html -->

<!-- 1. Inline script: fine for a quick test -->
<script>
  console.log('Hello from an inline script');
</script>

<!-- 2. External file with defer: what real projects use -->
<script src="app.js" defer></script>


// app.js
console.log('The page has finished loading');

// Find the first <h1> on the page and rewrite it
const heading = document.querySelector('h1');
heading.textContent = 'Changed by JavaScript';

// Variables and a function, so the shape of the language is visible
const courseName = 'JavaScript';
let lessonsCompleted = 1;

function describeProgress(name, done) {
  return `${name}: ${done} lesson done`;
}

console.log(describeProgress(courseName, lessonsCompleted));
Notes
  • defer only works on external scripts — scripts that have a src. Adding it to an inline block does nothing at all.
  • JavaScript is case-sensitive. myName and myname are two different variables, and Console.log is an error while console.log is not.

Your First Interactive Page

The demo below is a complete page in three pieces, exactly as a real one would be. The HTML creates a heading and a button. The CSS styles the button. The JavaScript defines a function that finds the heading by its id and rewrites both its text and its colour.

Read the order of events carefully, because it is the pattern behind almost everything in this course. Nothing happens when the page loads. The function is defined and then simply waits. Only when the button is clicked does the browser call changeText(), which reaches into the page, finds the element whose id is demo, and edits it. The page never reloads and no server is contacted — the browser is editing a document it already holds in memory.

Change the text inside the quotes and run it again. Then deliberately break it: change getElementById('demo') to an id that does not exist, and watch the console. You will get an error about not being able to read a property of null. That is the single most common beginner error in JavaScript, and it always means the same thing — you asked for an element the browser could not find.

Change the page from JavaScript
HTML 
<h1 id="demo">JavaScript Demo</h1>
<button onclick="changeText()">Click Me</button>
CSS 
button { padding: 10px 20px; background: #d1039e; color: white; border: none; border-radius: 5px; cursor: pointer; }
JavaScript 
function changeText() {
  document.getElementById('demo').innerHTML = 'Text Changed!';
  document.getElementById('demo').style.color = '#d1039e';
}
Notes
  • Writing onclick straight into the HTML, as this demo does, is the quickest way to start. From Lesson 18 onwards you will use addEventListener instead, which keeps behaviour out of your markup and lets one element respond to several handlers.

Clearing Up Three Early Confusions

JavaScript is not Java. The name was a marketing decision taken in 1995, when Java was the fashionable language of the moment. The two share some surface syntax — curly braces, semicolons — and almost nothing else. Java is compiled and statically typed; JavaScript is interpreted and dynamically typed. If you are studying both at college, treat them as unrelated languages that happen to share four letters.

ECMAScript is JavaScript's official specification. When you see ES6, ES2015, ES2020 or ES2023 mentioned, those are versions of that specification. ES6 and ES2015 are the same release under two names, which is why both keep appearing. This course teaches modern JavaScript — roughly ES2015 and later — because that is what every current browser supports and what every interviewer expects you to know.

JavaScript is not a cut-down version of anything. It has closures, first-class functions, prototypal inheritance, modules, generators and a carefully defined concurrency model. Several of those ideas are genuinely harder than their equivalents in other beginner languages. The language is easy to start with and takes real study to use well, which is precisely why interviewers ask about it.

  • 1995 — created for Netscape Navigator, originally to validate forms inside the browser
  • 2009 — Node.js takes the language to the server
  • 2015 — ES6 adds let, const, arrow functions, classes, promises and modules
  • 2017 — async and await make asynchronous code read like ordinary code
  • 2020 onwards — optional chaining ?., nullish coalescing ?? and a yearly stream of smaller additions

How to Work Through This Course

Thirty lessons follow and they build on each other. Lessons 2 to 14 cover the language itself — variables, types, operators, functions, objects, arrays and the built-in helpers you reach for daily. Lessons 15 to 19 connect that language to a real page: selecting elements, changing them, and responding to events. Lessons 20 to 26 cover modern syntax and asynchronous code, which is where most interview questions live. The final four deal with debugging, good practice, performance and a complete project.

Type the examples out instead of copying them. That sounds like a trivial difference and it is not — typing forces you to notice the brackets, the commas and the exact spelling, and it builds the muscle memory that makes debugging quick later. When something does not work, open the console before you do anything else. JavaScript almost always tells you what went wrong and on which line.

Finally, resist the pull towards React or any other framework before you finish this. Every framework is written in JavaScript and assumes you already understand closures, this, promises and array methods. Students who skip the language end up spending months fighting the framework over problems that were never framework problems.

Notes
  • Two habits save more time than anything else in this course: keep the browser console open while you work, and read error messages from the first line downwards instead of guessing.
Ask AI