You are viewing a free preview of this lesson.
Subscribe to unlock all 10 lessons in this course and every other course on LearningBro.
JavaScript is the language of the web. Every modern browser includes a JavaScript engine, and it is the only programming language that runs natively in the browser. Originally created in just ten days in 1995 by Brendan Eich at Netscape, JavaScript has grown into one of the most popular and versatile programming languages in the world.
JavaScript is a high-level, interpreted, dynamically typed programming language. It was designed to make web pages interactive, but today it powers far more than just browser animations:
| Domain | Examples |
|---|---|
| Front-end web | React, Vue, Angular, Svelte |
| Back-end servers | Node.js, Deno, Bun |
| Mobile apps | React Native, Ionic |
| Desktop apps | Electron (VS Code, Slack, Discord) |
| Game development | Phaser, Three.js |
| Machine learning | TensorFlow.js |
Key fact: JavaScript is not related to Java. The name was a marketing decision made in the 1990s to capitalise on Java's popularity.
forEach, map, and filterlet/const, arrow functions, classes, template literals, promises, modulesEvery browser ships with a JavaScript engine:
| Browser | Engine |
|---|---|
| Chrome, Edge | V8 |
| Firefox | SpiderMonkey |
| Safari | JavaScriptCore (Nitro) |
When a web page loads, the browser parses the HTML, encounters <script> tags (or linked .js files), and hands the code to the engine for execution.
Server-side runtimes let JavaScript run outside the browser. Node.js, built on Chrome's V8 engine, is the most widely used.
The fastest way to start experimenting with JavaScript is the browser developer console.
Try these examples:
// Simple arithmetic
2 + 3; // 5
// A greeting
"Hello, world!";
// Using a built-in function
Math.random();
The console is your interactive playground. Use it throughout this course to test snippets quickly.
There are three ways to include JavaScript in an HTML document.
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
</head>
<body>
<h1>Hello</h1>
<script>
alert("Welcome to JavaScript!");
</script>
</body>
</html>
Create a separate file called app.js:
// app.js
console.log("Script loaded successfully!");
Then link it from your HTML:
<script src="app.js"></script>
defer and async Attributes| Attribute | Behaviour |
|---|---|
| (none) | Script is fetched and executed immediately, blocking HTML parsing |
| defer | Script is fetched in parallel and executed after the HTML is fully parsed |
| async | Script is fetched in parallel and executed as soon as it is ready (order not guaranteed) |
Best practice: Place
<script>tags at the bottom of the<body>or use thedeferattribute so they do not block page rendering.
Create an index.html file and an app.js file in the same folder:
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS Starter</title>
</head>
<body>
<h1 id="heading">JavaScript for Beginners</h1>
<script src="app.js" defer></script>
</body>
</html>
// app.js
console.log("Hello from JavaScript!");
document.getElementById("heading").style.color = "blue";
Open index.html in your browser. The heading should turn blue, and "Hello from JavaScript!" should appear in the console.
| Tool | Purpose |
|---|---|
| console.log() | Print messages to the developer console |
| alert() | Show a popup dialog in the browser |
| prompt() | Ask the user for input via a dialog |
| confirm() | Show a yes/no dialog and return true or false |
| document | The DOM object representing the web page |
JavaScript is a dynamic, versatile language that runs in every browser and on the server via Node.js. You can start experimenting immediately using the browser console or by linking a .js file to an HTML page. In the next lesson, we will explore variables, data types, and operators — the fundamental building blocks of every JavaScript program.