Skip to content
← Back to JavaScript for Beginners

You are viewing a free preview of this lesson.

Subscribe to unlock all 10 lessons in this course and every other course on LearningBro.

View PricingCreate Account

Getting Started with JavaScript

Getting Started with JavaScript

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.

What Is JavaScript?

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.

A Brief History

  • 1995 — Brendan Eich creates "Mocha" at Netscape in 10 days; it is renamed LiveScript, then JavaScript
  • 1997 — ECMAScript 1 (ES1) becomes the official standard managed by ECMA International
  • 2009 — ES5 brings strict mode, JSON support, and array methods like forEach, map, and filter
  • 2009 — Ryan Dahl creates Node.js, bringing JavaScript to the server
  • 2015 — ES6 (ES2015) is a landmark release: let/const, arrow functions, classes, template literals, promises, modules
  • 2016–present — Annual releases add features like async/await (ES2017), optional chaining (ES2020), and top-level await (ES2022)

Where JavaScript Runs

1. The Browser

Every 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.

2. The Server (Node.js / Deno / Bun)

Server-side runtimes let JavaScript run outside the browser. Node.js, built on Chrome's V8 engine, is the most widely used.

Using the Browser Console

The fastest way to start experimenting with JavaScript is the browser developer console.

  1. Open your browser (Chrome, Firefox, Edge, or Safari)
  2. Press F12 (or Cmd + Option + J on macOS in Chrome)
  3. Click the Console tab
  4. Type a line of JavaScript and press Enter

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.

Adding JavaScript to a Web Page

There are three ways to include JavaScript in an HTML document.

Inline Script

<!DOCTYPE html>
<html>
<head>
  <title>My Page</title>
</head>
<body>
  <h1>Hello</h1>
  <script>
    alert("Welcome to JavaScript!");
  </script>
</body>
</html>

External Script File (Recommended)

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>

The 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 the defer attribute so they do not block page rendering.

Your First Program

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.

Key JavaScript Tools

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

Summary

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.

Subscribe to continue