042: JavaScript: Runtime, Console, Versions, and Script Loading

Outcomes

By the end of this lesson, you can:

describe JavaScript's role alongside HTML and CSS;
run expressions and statements in browser developer tools;
load an external classic script or an ES module correctly;
use console.log() to observe values;
write basic arithmetic and string expressions; and
distinguish source code, an evaluated value, and visible console output.

Prerequisites and Retrieval

You should know that HTML describes page structure and CSS controls presentation. Retrieve these ideas before starting:

What does an HTML <script> element do?
What is the difference between text shown in a page and text in its source file?
Predict the mathematical result of 8 + 2 * 3.

No previous programming knowledge is assumed. Use a current browser such as Firefox, Chrome, Edge, or Safari. Open its developer tools and select Console. The console is a learning and debugging tool, not the user interface of a finished application.

Terms

JavaScript: A cross-platform scripting language that adds behavior and interactivity to web pages. — Source: MDN: JavaScript Guide — Introduction
ECMAScript: The standardized language specification (ECMA-262) that JavaScript implements. — Source: ECMA-262
host environment: The runtime embedding the engine — browser or server — supplying timers, network, DOM. — Source: MDN: JavaScript execution model
engine: The component that parses and executes JavaScript code (V8, SpiderMonkey). — Source: MDN: Glossary — JavaScript
console: The developer tool surface where console methods print diagnostics. — Source: MDN: Console API
expression: Any valid unit of code that evaluates to (produces) a value. — Source: MDN: Grammar and types
statement: An instruction that performs an action; programs are sequences of statements. — Source: MDN: Grammar and types
literal: Notation for a fixed value written directly in source: 42, "hi", [1,2]. — Source: MDN: Grammar and types
comment: Source annotation ignored by the engine; // single-line, /* */ multi-line. — Source: MDN: Grammar and types
classic script: ordinary script code loaded with <script src="..."></script> (course term).
module: a script with its own scope and support for import and export, loaded with type="module" (course term).
Value (official): "A value is the data that an expression evaluates to." — Source: MDN: Values
JavaScript (official): "JavaScript is a lightweight, interpreted, compiled programming language with first-class functions." — Source: MDN: JavaScript Guide — Introduction
ECMAScript (official): "ECMAScript is the standardized specification for JavaScript, maintained by Ecma International (ECMA-262)." — Source: ECMAScript Language Specification

Beginner Explanation and Mental Model

Think of a webpage as a small production. HTML is the cast and scenery, CSS is the visual direction, and JavaScript is the set of instructions that reacts and makes decisions. JavaScript can calculate totals, respond to clicks, validate input, request data, and update the document. The language itself and browser APIs are related but distinct. 2 + 2 belongs to JavaScript; document and the developer console are supplied by the browser.

The engine reads source code and evaluates it. An expression produces a value. For example, 10 - 3 produces 7, and "web" + "site" produces "website". A statement tells the program to do something. Calling console.log(10 - 3); asks the console to display the expression's value. The return value shown by developer tools after a statement may be undefined; that is not another log and is not an error.

JavaScript is case-sensitive: console and Console are different names. Strings require matching quotes. Parentheses group a function's inputs; a semicolon clearly ends the statement. JavaScript can insert some semicolons automatically, but this course writes them consistently for readable beginner code.

Comments document intent:

js
// One-line comment

/* A block comment can
   continue across lines. */

Comments are not output. Prefer comments that explain why, not comments that merely repeat obvious code.

Loading code in a page

For a small external classic script, this is valid:

html
<script src="app.js" defer></script>

defer lets HTML parsing continue while the file downloads, then executes the script after parsing, preserving order among deferred scripts. A modern module is loaded with:

html
<script type="module" src="app.js"></script>

Modules defer by default and run in strict mode. Do not write the obsolete, redundant type="text/javascript". An unqualified classic external script can block parsing while it is fetched and executed. async executes as soon as available and does not guarantee order, so it is unsuitable when one script depends on another. For today's isolated examples, the console is simplest.

Worked Example: Cafe Receipt

Open the console and enter each line rather than pasting everything at once. First evaluate a plain expression:

js
2 + 3

The console displays 5 because the entered expression evaluates to that value. Next, run this complete beginner program:

js
// Prices are written directly as number literals for today's example.
console.log("Cafe receipt");
console.log("Tea:", 40);
console.log("Snack:", 25);
console.log("Subtotal:", 40 + 25);
console.log("Two teas:", 40 * 2);
console.log("Average item price:", (40 + 25) / 2);
console.log("Thank " + "you!");

Expected output:

text
Cafe receipt
Tea: 40
Snack: 25
Subtotal: 65
Two teas: 80
Average item price: 32.5
Thank you!

Trace it carefully. String literals produce text values. Number literals produce numeric values. +, *, and / create arithmetic expressions when used with numbers. Parentheses make the desired grouping explicit. In the final line, + joins two strings. console.log() accepts multiple arguments, which is why console.log("Tea:", 40) displays both values without manually joining them.

To run the same program from a file, create an HTML page that references app.js as a module, place the JavaScript in app.js, and open the HTML page. In this lesson, only observe that workflow; module organization is taught later.

Intermediate Example: Predict, Then Observe

Expressions can be nested. Predict each result before running it:

js
console.log("Order calculations");
console.log(12 + 6 * 2);
console.log((12 + 6) * 2);
console.log(17 % 5);
console.log(2 ** 4);
console.log("Room " + 3);
console.log(9 > 4);
console.log(10 === 10);

Expected output:

text
Order calculations
24
36
2
16
Room 3
true
true

Multiplication has higher precedence than addition, so 12 + 6 * 2 is 24. Parentheses change the order. % returns the remainder and ** performs exponentiation. 9 > 4 and strict equality 10 === 10 evaluate to Boolean values. Comparisons are studied in depth in 046, while coercion and equality edge cases are handled in 045; today, notice only that expressions can produce values other than numbers and strings.

Optional Advanced Extension: Script Loading Timeline

Make three tiny external files that each log its filename. Compare normal, defer, async, and module script elements while watching both the console and Network panel. The useful mental model is:

classic without async or defer: fetch and execute while parsing is blocked;
classic with defer: fetch alongside parsing, execute after parsing in document order;
classic with async: fetch alongside parsing, execute when ready, with no dependency order;
module without async: fetch the module graph alongside parsing, execute after parsing.

This is a browser loading rule, not a promise that network requests finish in source order. Do not use document.write() or timers to simulate dependencies.

Deep Dive: ECMAScript, Engines, and Execution Environments

JavaScript is the language; ECMAScript is the standardized specification that defines the core language. Browsers and runtimes implement that specification through engines such as V8, SpiderMonkey, and JavaScriptCore. The browser then adds Web APIs such as the DOM, fetch, timers, storage, and events. Node.js adds a different host environment.

This distinction matters because code can be valid JavaScript while still depending on APIs that do not exist in every runtime.

js
console.log(typeof Array);      // "function" in browser and Node.js
console.log(typeof document);   // "object" in a browser, usually "undefined" in Node.js
console.log(typeof process);    // usually "undefined" in a browser, "object" in Node.js

JavaScript versions without memorizing every year

You do not need to memorize every ECMAScript edition. You should understand the progression:

ES5 standardized many foundations still used today.
ES2015 (ES6) introduced let, const, classes, modules, arrow functions, promises, destructuring, and more.
Modern JavaScript evolves yearly, with smaller additions instead of rare giant releases.
Browser support and build tooling determine whether a feature is safe for your target users.

A practical habit is to verify support for unfamiliar syntax or APIs rather than assuming "modern" means "everywhere."

Classic scripts versus modules

html
<script src="legacy.js"></script>
<script type="module" src="app.js"></script>

Modules are deferred automatically, have their own module scope, support import/export, and run in strict mode. Classic scripts behave differently and may create globals more easily.

Execution context thought experiment

Predict the runtime dependency:

js
const tax = 0.18;
console.log(100 + 100 * tax);

This is core JavaScript and is portable.

js
document.querySelector("#total").textContent = "₹118";

This requires a browser DOM.

js
await fetch("/api/orders");

fetch is a host API. It is widely available in modern browsers and modern Node.js, but it is not part of the ECMAScript language specification itself.

The habit to build is: separate language behavior from host-environment behavior.

Mistakes and Debugging

ReferenceError: Console is not defined: use lowercase console.
SyntaxError near a string: check that opening and closing quotes match.
Unexpected concatenation: "5" + 2 is "52", because one operand is text. Do not rely on coercion; keep numeric data numeric.
Only undefined appears: a log call's result may be displayed separately. Look for the logged line immediately above it.
Nothing appears from a file: verify the src path, open the Network panel, and check the Console for a syntax or loading error.
Code runs before expected HTML exists: use a module or a deferred classic script rather than depending on a fragile script position.
Old console declarations collide: refreshing the page gives a fresh environment. Re-entering the same declaration can otherwise cause an error in some consoles.

Debug in small steps. Read the first error, including its file and line. Reduce a failing expression to simpler pieces and log each piece. Never use eval() to run text as code; it creates security and maintainability problems and is unnecessary here.

Best Practices

Use the browser console for experiments and temporary diagnostics, not permanent user-facing messages.
Prefer an external type="module" script for new browser projects; use defer for ordered classic scripts when modules are not suitable.
Write one clear statement per line and use consistent semicolons.
Use meaningful whitespace and parentheses when they clarify an expression.
Keep data and labels separate in logs: console.log("Total:", 65); is easy to inspect.
Do not log passwords, tokens, or personal information.
Write comments about intent or constraints, and remove stale comments.
Treat errors as precise evidence: inspect the type, message, file, and line.

Tiered Exercises

Run the JavaScript snippets in the browser console or as a classic script. For a file, save it as app.js and load it with <script src="app.js" defer></script>.

Core

In the console, calculate the sum, difference, product, division result, and remainder of 18 and 5.
Log the exact text JavaScript starts here.
Add a one-line comment that does not appear in output.

Practice

Write console statements for a cinema booking with three tickets costing 120 each and a booking fee of 30. Display a heading, ticket cost, fee, and final total. Use parentheses where they improve clarity.

Professional Extension

Predict and then check the outputs of 5 + 2 * 4, (5 + 2) * 4, 20 % 6, and "Day " + 31. Explain why each result has its value.

Complete Solutions

js
// Arithmetic practice
console.log(18 + 5); // 23
console.log(18 - 5); // 13
console.log(18 * 5); // 90
console.log(18 / 5); // 3.6
console.log(18 % 5); // 3
console.log("JavaScript starts here");

The comment is ignored. Every expression passed to console.log() is evaluated before the result is displayed.

js
console.log("Cinema booking");
console.log("Tickets:", 3 * 120);
console.log("Booking fee:", 30);
console.log("Total:", (3 * 120) + 30);

Expected output:

text
Cinema booking
Tickets: 360
Booking fee: 30
Total: 390

js
console.log(5 + 2 * 4);   // 13: multiplication first
console.log((5 + 2) * 4); // 28: grouped addition first
console.log(20 % 6);      // 2: remainder after division
console.log("Day " + 31); // 031: string concatenation

Recap and Exit Questions

JavaScript supplies page behavior and general-purpose logic. The engine evaluates expressions into values and executes statements. The console makes those steps observable. Scripts can be classic or modules, and loading choice affects execution timing.

What is the difference between an expression and a statement?
What does console.log() help a developer do?
Why do (2 + 3) * 4 and 2 + 3 * 4 differ?
When should a classic external script use defer?
What is one step you would take when a script produces no output?

Official References

References checked 2026-08-24.