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: - The base implementation of JavaScript with all the input and output functions that the developers can use. The Core Based On ECMAScript - This is what the browser renders as a hierarchy of nodes to be displayed to the client or the user for XML and HTML. Document Object Model (DOM) - 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. Browser Object Model (BOM) Let’s dive deeper to understand each of these components in detail. The Core IO Functions Based On ECMAScript A little understanding of the 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. history of JavaScript 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. My First Heading My first paragraph. <!DOCTYPE html> < > html < > body < > h1 </ > h1 < > p </ > 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 object in the browser. Here is a simple example of accessing an element with " with the help of the object in the browser using JavaScript. document id="demo document Here is the official of the document object in the browser. list of all the properties and methods 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 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. outside 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 w = .innerWidth
|| .documentElement.clientWidth
|| .body.clientWidth; h = .innerHeight
|| .documentElement.clientHeight
|| .body.clientHeight; x = .getElementById( );
x.innerHTML = + w + + h + ; var window document document var window document document var document "demo" "Browser inner window width: " ", height: " "." </ > 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 of the Browser Object Model. list of all the properties and methods These three components form the JavaScript runtime in the browser and give you an API to interact with the JavaScript Engine. Please spread some love by giving this article a thumbs up if you liked it, keep me motivated. You can watch this space for the next article or you can and I would notify you as soon as the next article is published. Don’t forget to leave a like or share the article if it was helpful! subscribe to my Newsletter Previously published at https://cloudaffle.com/javascript-runtime-components-ecmascript-dom-bom/

Google

Winner of Noonies 2020 for the award Hacker Noon Contributor of the Year - DEVELOPER.

2020 - Hacker Noon Contributor of the Year in DEVELOPER

Download My JavaScript CheatSheet

Read My Stories

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

Three Main Components of JavaScript

Too Long; Didn't Read

People Mentioned

Company Mentioned

Manik

About Author

TOPICS

Languages

THIS ARTICLE WAS FEATURED IN...

Three Main Components of JavaScript

Too Long; Didn't Read

People Mentioned

Company Mentioned

Manik

About Author

TOPICS

Languages

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES