Introduction to Frontend Development

# JavaScript

JavaScript adds behavior and application logic to web pages. HTML provides structure, CSS provides presentation, and JavaScript can read or change the DOM, react to events, and communicate with servers.

# A short history

Netscape recruited Brendan Eich in 1995 to create a scripting language for the browser. The first prototype was written under an unusually short deadline—often summarized as “JavaScript was created in ten days”; Eich describes the initial prototype as roughly a week of work in May 1995. This means the first prototype was made quickly for a browser demonstration, not that the complete modern language was designed, standardized, and production-hardened in ten days.

The language was first called Mocha, then LiveScript, and finally JavaScript as part of a marketing relationship with Java. The language later became standardized as ECMAScript, while browsers and the language continued to evolve.

See Brendan Eich’s JavaScript history retrospective (opens new window) for more context.

# What kind of language is JavaScript?

  • Dynamically typed: variables do not have fixed declared types; values have types that are checked at runtime. The same binding can refer to different types, although predictable code usually avoids unnecessary changes.

  • Runtime-compiled rather than simply “interpreted”: engines parse and execute JavaScript while a program runs, and modern engines often JIT-compile frequently used code to machine code. “Interpreted language” is a useful historical shortcut, but it does not describe modern engines completely.

  • Duck-typed: JavaScript usually cares whether a value supports the operation it needs rather than whether it implements a named interface. If an object has a callable render method, code can often use it without checking its class:

    function renderWidget(widget) {
  if (typeof widget.render !== 'function') {
    throw new TypeError('Expected a renderable value');
  }
  widget.render();
}

  • Prototype-based and object-capable: objects inherit through prototype chains. The class syntax provides a convenient class-like style, but it is built on prototypes; JavaScript also has primitives, functions, and object literals, so it is not a purely class-based or purely object-oriented language.

  • Multiparadigm: it supports imperative, object-oriented, and functional techniques. Functions are first-class values and can be stored, passed as callbacks, and returned from other functions; closures preserve access to lexical variables.

  • Garbage-collected: the engine automatically reclaims objects that can no longer be reached by the program. Developers still need to remove unnecessary event listeners and references in long-lived applications.

ECMAScript describes the language itself. The DOM, fetch, timers, and XMLHttpRequest are host APIs supplied by browsers or other runtimes, not core JavaScript syntax.

# In the browser

A JavaScript engine executes code. Browser Web APIs provide capabilities such as the DOM, timers, events, and networking. The event loop coordinates callbacks and other asynchronous work so the page can respond while a request is in progress.

Continue with:

  1. Basics
  2. Functions and closures
  3. Objects and JSON
  4. DOM and events
  5. Async HTTP
  6. Pet project

Build a small page from the snippets in these lessons, open it in a browser, use the Console to evaluate an expression, and inspect the DOM and Network panels in DevTools.

← JavaScript basics →