Introduction to JavaScript

Difficulty: Beginner

JavaScript is the programming language of the web. Created by Brendan Eich in just 10 days in 1995 at Netscape, it was originally called Mocha, then LiveScript, before being renamed to JavaScript as a marketing move to ride the popularity of Java. Despite the similar name, JavaScript and Java are fundamentally different languages with different design philosophies, type systems, and use cases.

JavaScript was initially designed to add simple interactivity to web pages - things like form validation and dynamic content updates. Over the decades it has evolved into a powerful, general-purpose language. With the introduction of Node.js in 2009 by Ryan Dahl, JavaScript broke free from the browser and can now run on servers, build desktop applications (Electron), mobile apps (React Native), and even program IoT devices.

JavaScript is an interpreted (or more accurately, just-in-time compiled) language. Unlike C or Java, you do not need a separate compilation step before running your code. Modern JavaScript engines like V8 (Chrome, Node.js), SpiderMonkey (Firefox), and JavaScriptCore (Safari) use sophisticated JIT compilation techniques that compile frequently executed code paths into optimized machine code at runtime, giving near-native performance.

To include JavaScript in an HTML page you have three options: inline scripts using the <script> tag directly in HTML, internal scripts where you write code between opening and closing <script> tags, and external scripts where you link a separate .js file using the src attribute. The recommended modern approach is to use external .js files with the defer or async attribute, which prevents the script from blocking HTML parsing.

Every JavaScript developer should understand the execution environment. In the browser, JavaScript has access to the Document Object Model (DOM), the Window object, and various Web APIs like fetch, localStorage, and setTimeout. In Node.js, you get access to the file system, networking modules, and operating system utilities instead. The core language (ECMAScript) is the same in both environments, but the available APIs differ significantly.

Code examples

Your First JavaScript Program

// The classic first program
console.log("Hello, World!");

// JavaScript can handle multiple data types naturally
console.log(42);
console.log(true);
console.log([1, 2, 3]);

console.log() is the most basic way to output information. It works in both browsers (developer console) and Node.js (terminal). It can print strings, numbers, booleans, arrays, objects, and more.

Including JavaScript in HTML

<!-- Method 1: External file (recommended) -->
<script src="app.js" defer></script>

<!-- Method 2: Internal script -->
<script>
  console.log("This runs when the browser parses this tag");
</script>

<!-- Method 3: Inline (avoid this) -->
<button onclick="alert('Clicked!')">Click Me</button>

The defer attribute tells the browser to download the script in parallel with HTML parsing but execute it only after the document is fully parsed. This is the modern best practice for loading scripts.

JavaScript is Dynamic and Flexible

// Variables can hold any type
let message = "Hello";
console.log(typeof message);

message = 42;
console.log(typeof message);

message = true;
console.log(typeof message);

// Functions are first-class citizens
const greet = function(name) {
  return `Welcome, ${name}!`;
};
console.log(greet("Developer"));

JavaScript is dynamically typed, meaning variables can change types at runtime. Functions are first-class objects - they can be stored in variables, passed as arguments, and returned from other functions.

Key points

Concepts covered

JavaScript History, Runtime Environments, Script Tags, Interpreted Language, Node.js