Skip to main content

JavaScript Runtime and Its Components For Web Developers

· 6 min read

The core ecosystem of JavaScript consists of 3 main components which are ECMAScript, JavaScript Engine, and the JavaScript Runtime.

JavaScript is certainly one of those programming languages which you can get started within a few hours due to its simple syntax, but would probably take you years to master it.

To master JavaScript it does require an in-depth understanding of how the entire ecosystem works. The core ecosystem of JavaScript consists of 3 main components which are ECMAScript, JavaScript Engine, and the JavaScript Runtime. It all starts with understanding what is ECMAScript and how is it different from JavaScript and followed by an understanding of the JavaScript Engine and the JavaScript Runtime. It's because of the JavaScript runtime that NodeJS and Google Chrome can use the same JavaScript Engine and yet have very different implementations of JavaScript for developers.

What is a JavaScript Runtime Or A JavaScript Host?​

A JavaScript runtime (Or a JavaScript Host) can be understood as a container that uses the JavaScript Engine to generate APIs that can be used by software developers to create applications using JavaScript. Taking an example of a JavaScript runtime in a browser, it would typically contain the implementations of JavsScript which are more specific to a browser. Whereas a runtime for something like NodeJs would have specific implementations that are more specific to running and building a server-side application using JavaScript.

JavaScript Runtime In Your Browser For Web Development​

The JavaScript runtime in the browser has the implementation of JavaScript that enables the developers to develop applications for the web. The web browser's runtime has the following three important components:

Javascript environment and its components

  • The Core Based On ECMAScript - The base implementation of JavaScript with all the input and output functions that the developers can use.
  • Document Object Model (DOM) - This is what the browser renders as a hierarchy of nodes to be displayed to the client or the user for XML and HTML.
  • Browser Object Model (BOM) - This is what allows the developers to manipulate the browser window. Using the BOM the developers can access the browser features and manipulate them outside the context of the DOM or the page that is being rendered.

Let's dive deeper to understand each of these components in detail.

The Core IO Functions Based On ECMAScript​

A little understanding of the history of JavaScript would make it clear as to what ECMAScript is. ECMAScript is a general-purpose scripting language that has been build over the standards defined in ECMA-262 by European Computer Manufacturers Association (ECMA). This was done with the objective of standardization of JavaScript starting the year 1997.

JavaScript is an implementation of ECMAScript and all the web browsers have to adhere to ECMAScript while creating their JavaScript engine and runtime environments. ECMAScript does not contain any IO functions, instead, it's the JavaScript that implements the various functions using the guidelines set by ECMAScript. ECMAScript and JavaScript are different from each other. ECMAScript is a scripting language based on the standards defined in ECMA-262 and is not tied to web browsers. It is based on ECMAScript that a more robust scripting language like JavaScript has been built.

Document Object Model or the DOM​

The Document Object Model is a language-neutral interface for XML as well as HTML that maps out the entire document as a hierarchy of nodes creating a tree-like representation. The below-given HTML code is a perfect example of a hierarchy of nodes.

<!DOCTYPE html>
<html>
  <body>
    <h1>My First Heading</h1>
    <p>My first paragraph.</p>
  </body>
</html>

Why Was The Document Object Model (DOM) Needed?​

During the early years of the internet, there was a browser was between Netscape Navigator 4 and Internet Explorer 4. Both the browsers followed a different version of Dynamic HTML (DHTML) thus proving it difficult to run the same HTML code on different browsers. With increasing fears of the web losing its cross-platform nature a new independent body called the World Wide Web Consortium (W3C) was created. It was the responsibility of W3C to maintain the standards of web communication and that when it started working on the DOM. It is because of the DOM that JavaScript gets the ability to create dynamic HTML and a developer can manipulate the various nodes of a document.

There are various methods provided by the DOM as a programming interface that lets you alter the HTML document the way you would want to as a developer. Here are a few examples of features of the DOM API:

  • The ability to find an element on the web page based on its id or class.
  • The ability to change the styling or the content between the tags.
  • The ability to track various events on the page and to add the event listeners.
  • The ability to add or remove HTML nodes.
  • and so on

The DOM can be accessed using the document object in the browser. Here is a simple example of accessing an element with id="demo" with the help of the document object in the browser using JavaScript.

<html>
  <body>
    <p id="demo"></p>

    <script>
      document.getElementById("demo").innerHTML = "Hello World!";
    </script>
  </body>
</html>

Here is the official list of all the properties and methods of the document object in the browser.

Browser Object Model or the BOM​

Just like the DOM is an interface to interact with the document the Browser Object Model is the interface to interact with the browser outside the context of the document itself. The BOM was considered to be quite problematic due to it being the only part of JavaScript which had no standard governing it. However, with the launch of HTML5, most of the features related to BOM became apart of the official standard of HTML5, which led to a massive reduction in the confusion surrounding the BOM.

The BOM can be accessed using the window object which represents the browser window. All the global variables are a part of the window object in the browsers. Let's have a look at how you can access the window object and its properties:

<!DOCTYPE html>
<html>
  <body>
    <p id="demo"></p>

    <script>
      var w =
        window.innerWidth ||
        document.documentElement.clientWidth ||
        document.body.clientWidth;

      var h =
        window.innerHeight ||
        document.documentElement.clientHeight ||
        document.body.clientHeight;

      var x = document.getElementById("demo");
      x.innerHTML = "Browser inner window width: " + w + ", height: " + h + ".";
    </script>
  </body>
</html>

Here are a few examples of the features that are offered by the BOM API:

  • Opening or closing a window.
  • Moving or resizing the window.
  • Getting the dimensions of the window.
  • Requesting the location of the user.
  • Getting the history of the browser.
  • Accessing the cookies
  • and so on

Here is the official list of all the properties and methods of the Browser Object Model.

What Can You Do Next 🙏😊​

If you liked the article, consider subscribing to Cloudaffle, my YouTube Channel, where I keep posting in-depth tutorials and all edutainment stuff for ssoftware developers.

YouTube @cloudaffle