How a browser implements JavaScript

According to Wikipedia, JavaScript is the following: (please click the link and skim the wikipage)

JavaScript is a high-level, dynamic, untyped, and interpreted programming language…

As correct as this statement and the rest of the wikipage is, it’s not the entire truth. The wikipage talks about JavaScript as an ECMAScript implementation, and when you use JavaScript outside of the browser (in PDF-documents or desktop widgets), this is the only thing you have to know. But you will need a bit more power when you add dynamic behavior inside a browser page.

Javascript implementation

The full Javascript implementation consists of 3 things:

JavaScript Implementation

  • The Core, implemented according to the ECMA-262 standard.
    • This covers syntax, data types, objects, inheritance and so on.
  • Document Object Model (DOM)
    • This allows you to access and modify your HTML
  • Browser Object Model (BOM)
    • Everything outside the context of your page (windows & frames, history, sound…)

EcmA-262 and Ecmascript

ECMA-262 is the standard which defines ECMAScript and JavaScript  is an implementation of ECMAScript. There are other implementations of ECMAScript, for example: ActionScript for Flash.

ECMAScript defines how you write the language. It defines its syntax and how the data types work. Furthermore, it defines what happens when you add a number to a string and also describes the behavior when you parse a string into a number. It defines objects, prototypes and inheritance and much much more…

ECMA-262 also evolved and has different edition’s. Currently, most browsers support edition 5, while edition 6 is only supported by the most recent versions of the major browsers.

Document Object Model (DOM)

Next on the list is the DOM. The main purpose of JavaScript is to make a richer web experience. This is mostly done by manipulating the HTML. This is were the DOM API comes in.

The DOM API provides methods and functions for finding elements in your HTML and then manipulating or deleting them. You can also create new elements from scratch.

W3C standardized the BOM and has levels instead of editions. Currently all the major browsers support DOM Level 3.

Some examples of the DOM API in action

Historically, the DOM is used for input validation and the next thing that comes to mind are calendar widgets, advertizing and drop-down menu’s (although the last one can be done by CSS too).

With the arrival of HTML5 and the canvas element, you can make huge interactive games with it, it even rivals flash games.

Browser Object MODEL (BOM)

The BOM API gives you access to some browser related functionality. For example, create new windows and frames, change the size of the browser and  create custom back and forward buttons.

The arival of HTML5 standardized the BOM. Before it that, it was pure chaos. There is still some browser specific functionality, but this mostly relates to the ActiveXObject of IE and mobile features for smartphones.


Leave a Reply

Your email address will not be published. Required fields are marked *