Tag: Javascript

Javascript and the DOM API

Javascript comes with the Document Object Model (DOM), it would be useless without it.  The DOM is not HTML, but it’s an Application programming interface (API) for XML, and it enables you to access your HTML. As a result, it gives you the ability to read, add, delete and modify your html without a page reload.

HTML is an XML variant, and below is a small example of it. (If the following looks unfamiliar to you, then learn some basic HTML)

<html>
<head>
<title>example title</title>
</head>
<body>
<p>This is an example of a DOM</p>
</body>
</html>

The above example is what you type and read, but JavaScript represents it as a node tree that looks like this:

DOM Node Hierarchy

The birth of the DOM API

Javascript only had one purpose when it was first created, and that was to minimize round trips to the server. It was first used for client-side input validation, which needed you to alter the html. Unfortunately, Netscape Navigator 4 and Internet Explorer 4 each implemented it’s own method for accomplisching this feat. It was a big step forward for usability, but it was also a nightmare for programmers, since they couldn’t write cross-platform webpages anymore.

Therefore, the World Wide Web Consortium (W3C) stepped in and created a standard for creating with HTML. And so, DOM Level 1 was born.

Level up

The DOM API has two big groups of methods. The core: which is used for every XML based document and the DOM HTML extensions: for html specific objects and methods.

The internet evolved and so did the API. Level 1 focused on the structure of a document, whereas Level 2 added support for mouse and user-interface events as well as better Cascading Style Sheets (CSS) and traversal methods to iterate over a DOM document. Then came Level 3 which added load and save functionality and validation methods.

You might also hear about DOM level 0, but this never existed. NN4 and IE4 use it to reference to the original DHTML.

=> More detailed info about each level.

It’s only a recommendation

It’s not mandatory, no government enforced a browser manufacturer to use the standard. As a result, not all browsers support everything. A clear overview of which browser supports what is currently not available (read: I can’t find one). As a result, my first option is to go to ‘Can I use‘ and if I can’t find it there, I go to Mozzila’s Developer Network. It covers every method and function, and contains information about browser compatibility.

Hence, use feature detection if you implement an unsupported method. Otherwise you can prompt the user to upgrade to an other browser that does support the recommendations of the standard. Fortunately, most of the modern web browsers implement all of the Level 3 specification.

 

Question’s and Answers about the DOM

Do other XML based formats have an API?

There are numerous XML markup languages like HTML, furthermore, each comes with it’s own API. They come in all shapes and sizes. A web-based environment uses multiple,but some are only server-side and others represent specific research data and such. Some XML variants: Documents (HTML, XHTML),  Graphics (SVG, XAML),  Mathematics (MathML, CellML), Multimedia presentations (SMIL), Authentication and Authorization (SAML), web feeds (Atom) and many more…

Is the DOM JavaScript Specific?

No, it is not, a lot of other languages implement it as well. That said, EcmaScript Implements the DOM and is a big part of the JavaScript Language.

Is DOM and HTML the same?

Again no, The browser uses the HTML page to built the DOM object. Then in JavaScript, you can access the object and make manipulations. If you take it to the extreme, you can load a page with only JavaScript (so only a html, head and script tag) and generate your entire page from scratch.

 

The very foundation of Javascript: EcmaScript-262

Let’s start with a bit of history about EcmaScript. Javascript 1.0 releases for the first time in Netscape Navigator 2. It was a blast! It got very popular very quickly that Microsoft decided to duplicate the language in it’s latest edition of Internet Explorer 3 and called it Jscript to avoid licensing issues with Netscape.

Both were ment to be the same, but they weren’t, therefore a standard was needed and ECMA (European Computer Manufacturers Association) stepped in. So they created a commitee of programmers from Netscape, Sun, Microsoft, Borland… and produced standard Ecma-262 alias EcmaScript. Now it was up to the browsers to try and implement that standard.

In addition, implementation differs among all the browsers. Furthermore, to make matters worse or at least a bit more complicated: Ecma-262 evolved and gained newer editions. Currently all major browsers support most of edition 5 and below, while edition 6 is supported by all the latest versions of the major browsers (not IE11, but Edge does)

I think a book can be written about all the differences in implemention for each browser version and EcmaScript edition combination. But rather than doing that (that would be so boring to read) I will direct you to the best resource I have found. => http://kangax.github.io/compat-table/es6/

EcmaScript-262 Compatibility table

This is an awesome resource to check and verify compatibility differences between all the browsers and there versions. In addition, a code sample is provided for each test. This is handy for if you encounter a browser that isn’t listed in the compatibility table. But you can also learn how to use the features of EcmaScript-262 by looking at specific examples.

EcmaScript-262 Questions and Answers

So Javascript is the same as EcmaScript-262?

No! EcmaScript-262 is the basis of Javascript. In addition you have the DOM (Document Object Model) and the BOM (Browser Object Model). But beware each is, again, differently implemented in each browser.

A handy resource to check for compatibility of certain features is Can I use?

Can I Use? - Compatibility checker

What does ECMA-262 specifiy exactly?

It defines the syntax (curly braces…), the data types (string, float, object…), statements (if, switch, do, while, with…), Keywords (if, switch, break, continue…), Reserved words (abstract, arguments, boolean…), Operators (+, -…), Objects.

ECMA-262 tells you how to write javascript. But it doesn’t say anything about adding properties in HTML. That’s the domain of the DOM.

Which other languages use ECMA-262? and do they all use the same edition of ecmascript?

Javascript: edition 5.1 and 6. Depending on which browser you’re using.
JScript: edition 5.1
JScript.NET: Microsoft’s variant got an upgrade to a full programming language insteas of a scripting language (read: you have to compile it to make it work).
ActionScript: Adobe Flash, Flex and Air. Currently on edition 4.
ExtendScript: every other program from Adobe. edition 3.

Are all these languages the same? Can I just copy code from one into the other.

If only it was that easy. They all implement ECMA-262 but they also have their own extensions and features that make them unique.

For example Javascript and JScript are very alike, safe for two features (see Patrick’s answer)

Which other ECMA standards are important to know.

ECMA-334: C# language specification
ECMA-372: C++/CLI language specification
Here you can find them all and even download the standards in pdf format.

HTML and CSS by W3C are mandatory to know. But beware, browser implement them slightly different, so look up the differences (Can I use?).

Which version of EcmaScript/Javascript am I using?

It depends on the browser your code is running in. So you don’t know which one you are using untill you (or someone else) runs your code. Furthermore, the editions are backwards compatible. As a result, what worked in an older version will also work in a newer one.

There are two possible solutions to this particular problem.
1. Refrain yourself from using the newest features and go back to the javascript stone age.
or 2. Use feature detection. If the feature exists use the fance code otherwise, use supported code from an older version.

You detect which version of Javascript or which browser your code runs in, but this is faulty since you don’t know what features are implemented of the particular version. So, feature detection it is.

But some features are undetectable, as a result user agent sniffing is your only option.