Why do we need different JS for different browsers

Question

What exactly are different things we need to take care when writing different JS files, like arrays, variables etc., Is there a book or website explaining differences between different JS engines used for browsers?

I was working on something in our application and bumped into a JS issue and was looking for solution and found out that we might need 2 different JS for different browsers to get my exact functionality. Why is that? Is that the browsers use different JS engines so they understand my JS in different ways?

Answer 1

I think your problem is not that there are different javascript engines (although there are). The problem that you are describing (that you need different code to get the same functionality) is probably because of various browsers understanding of HTML and particularly their implementation of the DOM. The work around HTML5 hopefully address a number of the areas of concern (although not all). This is taken directly from the HTML5 draft spec

1.5 Design notes

This section is non-normative.

It must be admitted that many aspects of HTML appear at first glance to be nonsensical and inconsistent.

HTML, its supporting DOM APIs, as well as many of its supporting technologies, have been developed over a period of several decades by a wide array of people with different priorities who, in many cases, did not know of each other's existence.

Features have thus arisen from many sources, and have not always been designed in especially consistent ways. Furthermore, because of the unique characteristics of the Web, implementation bugs have often become de-facto, and now de-jure, standards, as content is often unintentionally written in ways that rely on them before they can be fixed.

I think that expresses the problem quite nicely.

Answer 2

There are broadly two areas where browsers differ in Javascript:

1. Core Javascript Language

   • The browser JS engine is what implements the core Javascript language: Data types, Basic classes (String, Date, Math, etc).
   • There is indeed an open standard and specification for Javascript and browser engines usually try to conform to a specific version and/or features of Javascript. There is also a superset of Javascript called ECMAScript that you should be aware of, and a bad cousin called JScript.
   • Additional javascript extensions/methods (for making some operations easier and to woo developers) that the engine provides on top of the Javascript standard.
   • Documented bugs in the implementation. Unlike normal software where bugs are immediately patched, bugs in Browser engines are usually not fixed until a next version. They become documented features :-) So your same website may work in IE8 but not in IE7 due to a documented bug.

2. Document Object Model

   • DOM is the way the tags inside your page are structured and ordered by the browser. Your page is arranged like a tree, and each browser will have different representations of this tree.
   • The Doctype determines the DOM model, and the DOM model in turn determines the structure, traversal, properties and methods of a DOM object (e.g. a node that you get by ID, or the page, or the document).
   • The small DOCTYPE header that you give at the top of your website can change the way your javascript works even within the same browser!

That's a very broad overview, I may have missed some fine prints.

There are two major things that you really should consider/review before writing Javascript code:

1. Check if the specific method you are using is supported in all browsers. W3Schools has extensive documentation of most javascript methods and their level of browser support. The Mozilla Developer Network also has some good resources.
2. Use a Javascript library such as JQuery, Prototype, Mootools, Dojo or Ext JS. They have some browser-independent APIs to let us do things like selecting/traversing nodes and some common operations. You can call their methods, and they will take care of the browser-dependent stuff.

Edit: Changed relationship between Javascript and JScript from stepdaughter to cousin.

Answer 3

As the other answers have mentioned, most of the incompatibility stems from the DOM, not from the javascript interpreter itself. However, Microsoft has released a document showing where IE's JScript engine differs from the ECMAScript standard. That is good reading if you ever have insomnia.