This is my attempt of creating a quite comprehensive summary and reference for JavaScript and related technologies. It is not a finished guide, it will grow over time. Please feel free to add comments and let me know how this guide could be improved.

The Mozilla Developer Network (MDN) is a community driven web site containing a lot of various useful information regarding web development.
It is important to distinguish between JavaScript, the language as such, and the environment it is executed, which is the browser in most cases. Some technologies heavily used together with JavaScript in the browser are actually not part of JavaScript, but of the it’s HTML and DOM implementation.


JavaScript, the language

The MDN JavaScript Guide provides a very detailed introduction to JavaScript and is definitely a “must read”. A few concepts are very essential in order to understand JavaScript and be able to use it to its full potential:

Last but not least, the ECMAScript specification, of which JavaScript is an implementation, gives a more technical description of the language. It is not easy to read, but necessary if someone wants to understand the inner workings of JavaScript.
Here are some examples from Stack Overflow which uses the specification to explain certain behaviour:


DOM (Document Object Model)

Although JavaScript found its way on servers, it is still mostly used for client side scripting in web browsers. In this context it is embedded in HTML and is utilized to manipulate the DOM generated from the HTML. Therefore it is crucial to understand what the DOM is, its termionolgy, and how it can be manipulated:

The most common use of JavaScript with DOM is probably to react to user interaction (events). quirksmode.org provides a thorough description of the different ways the event handlers can be attached to DOM elements and also points out differences between browsers - invaluable for cross-browser support.

Event order describes how handlers for nested elements are resolved. The fact that events bubble up the DOM tree leads to sophisticated ways to deal with events, such as event delegation.

When creating cross-browser compatible code, knowing about the differences is vital. quirksmode.org provides tables with information about which methods and properties are supported by which browsers (http://www.quirksmode.org/dom/events/index.html, http://www.quirksmode.org/dom/w3c_core.html, http://www.quirksmode.org/dom/w3c_html.html).

Working with the plain DOM API can be daunting. There are several libraries such as jQuery or Prototype.js which provide convenient wrappers around the DOM API and more. Still, to get most out of these libraries, you should understand the DOM.


CSS (Cascading Style Sheets)

HTML only describes the structure of a document, CSS defines how a document should look like.

Like JavaScript, CSS is embedded into the HTML. The style of elements can also be manipulated with JavaScript.

For more information about CSS, have a look at the MDN documentation.


comments powered by Disqus