6

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?

2
  • 11
    Let me guess, your code works in every real browser, but fails in Internet Explorer? Aug 5, 2011 at 14:45
  • 3
    hahaha, of course yes. IE is always the one and it's the one we cannot escape ever Aug 5, 2011 at 14:57

3 Answers 3

8

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.

3
  • 1
    This is a great answer, however using HTML5 gives different behavior for different browsers(at least for IE version < 9). Though this website diveintohtml5.org explains beautifully how to code in HTML5 Aug 5, 2011 at 15:17
  • Completely agree that HTML5 currently is not a solution to the problem you are facing. What I think is the case, however, is that the HTML5 description of the current state of HTML goes along way to answering your original question.
    – AlexC
    Aug 5, 2011 at 15:34
  • I also probably should mention, as you have asked, that Douglas Crockford's 'JavaScript: The Good Parts" is pretty useful in this area. He presents the negative of what you are asking, demonstrates the areas where javascript is good and works, a corollary of that is that there are significant areas where javascipt is bad (or freakin' awful - I'm looking at you parseInt) and should be avoided.
    – AlexC
    Aug 5, 2011 at 22:41
4

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.

3
  • 1
    Well, I was asking the differences between the IE's JS Engine Chrome's JS Engine and Firefox's JS engine and if I had to write something what is working in some browser, would break in others. Though I already knew the info you have provided, it is always a good read for somebody new to JS. And this is a great answer as some of us might not know about DOM. I have upvoted for your answer. Aug 5, 2011 at 19:05
  • +1: Use a Javascript library. It's silly to write your own browser-independent functions. Aug 5, 2011 at 19:39
  • 1
    Ugh; Please don't recommend w3schools. See w3fools.com for why. Aug 5, 2011 at 21:56
0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.