Mastering JavaScript — concept and resource guide

There is not a single interpreted language used today that causes more excitement, confusion, disdain, and conflict than JavaScript. The language is so incredibly flexible that it is difficult to separate a developer’s choice of coding style from JavaScript best practices. If you are an absolute beginner (as we all once were), this can be an incredibly frustrating experience.

The immensity of information available today is also adversely focused on AJAX, frameworks and APIs. I wonder how designers and developers manage to wade through the cruft to even begin learning the basics. If you are like me, and have evolved along with JavaScript, then the state of the language makes a little more sense. However, if you are in the first steps of your journey, it might seem like a long and winding road ahead.

This concept and resource guide is a way to deal with these issues. Instead of listing a compendium of resources too vast to matter to anyone, I have listed only those that I feel truly contribute to the process of mastering JavaScript. Preceding the list is an outline of advanced JavaScript concepts that will help “light the master’s path”.

JavaScript Concepts

Access Control

A JavaScript design pattern that prohibits another script from accessing portions of functionality in your JavaScript is enforcing “access control”. In a language like C# or Java, access control is explicitly declared with access control keywords such as private, public or protected. With JavaScript, achieving access control is a bit more work.

• Private Members in JavaScript
• How to achieve private, public, and privileged members in JavaScript
• Private JavaScript

Accessible JavaScript

The term “accessible JavaScript” refers to movements that support RIAs in conjunction with accessibility. The most notable methodology is Hijax, a term coined by Jeremy Keith, the author of DOM Scripting. Roger Johansson is a successful Web developer who also promotes accessible JavaScript techniques on his popular blog 456 Berea Street.

• Hijax
• 456 Berea Street

Closures

Arguably the most difficult concept in JavaScript to understand, closures are complicated, and can have harmful consequences if not implemented correctly. Closures in JavaScript are essentially a design pattern that allows an inner (nested) function to access the variables associated with an outer function, even after that function has been executed (returned).

• JavaScript Closures for Dummies
• JavaScript Closures
• Closures and executing JavaScript on page load

Classical OOP

In several technical circles, JavaScript is often referred to as a prototype-based or object-based language, as it lacks some features available in full-blown object oriented programming. Regardless, in order to be a successful Web developer, you must understand the details surrounding classical object oriented programming with JavaScript.

• JavaScript Object-Oriented Programming Part 1
• Objectifying JavaScript
• JavaScript and Object Oriented Programming (OOP)
• Douglas Crockford Video: Advanced JavaScript

Concepts in AJAX

AJAX is conceptually quite simple. Hundreds of examples are available, and the number of tutorials is too numerous to count these days. However, within an intricate RIA, several complicated problems can arise for the budding architect. Performance issues play center stage, and it is important to explore alternative methods of implementing AJAX solutions.

• AJAX Queue Class
• Reusing XMLHttpRequest Object in IE
• AJAX Patterns
• Managing sessions in an Ajax-enabled application

Memory Leaks

One of the most difficult issues plaguing JavaScript programmers today is memory leaks brought on by a combination of browser bugs and poor coding practices. Even though memory leaks are often identified with Internet Explorer, Web applications in several browsers have been known to freeze up the client interface and cause excessive memory leakage.

• JScript Memory Leaks
• Fixing JavaScript memory leaks for good
• Memory leak patterns in JavaScript

Namespaces and Self-invoking Functions

At the forefront of every JavaScript library is a namespace. Although the style of execution can vary slightly, the concept is incredibly important if you are considering the release of an API or framework. Creating a non-conflicting namespace (which typically involves self-invoking functions), is both friendly and unobtrusive, and it should be a part of your repertoire.

• Namespacing your JavaScript
• JavaScript Namespaces
• JavaScript: Put everything in a namespace

JSON and Object Literal Notation

JavaScript Object Literal Notation and JSON both rely completely on JavaScript’s implementation of the hash object. Although a subset of object oriented programming with JavaScript, object literal notation is becoming a widely accepted alternative to functions as constructors for objects. I suggest first reading the classical OOP articles, and then move on to these articles.

• JSON for the masses
• Show love to the object literal
• JSON is a subset of the Object Literal
• JSON

Security

While security continues to be a major concern among Web developers, much of the hype surrounding XSS (cross-site scripting) has diminished. However, techniques for overcoming security flaws in JavaScript should be well known by all JavaScript programmers, new and old. Exploits are discovered often, and keeping up with hacker trends is important.

• Wikipedia Cross-site scripting entry
• XSS (Cross Site Scripting) Cheat Sheet
• JSON is not as safe as people think it is
• Google Caja

JavaScript Topics, Articles & Tutorials (Publications)

• Ajaxian
• A List Apart: Topics: Code: Scripting
• DevGuru JavaScript Reference
• Digital Web Magazine - Articles by Topic: DOM
• JavaScript Kit
• Microsoft JScript Reference on MSDN
• Mozilla Developer Center Core JavaScript Reference
• Sitepoint JavaScript & AJAX Tutorials
• Visibone JavaScript Reference
• Web Reference Core JavaScript Reference
• W3 Schools JavaScript Tutorial

JavaScript Topics, Articles & Tutorials (Personal)

• A (Re)-Introduction to JavaScript
• Douglas Crockford JavaScript
• Dustin Diaz
• Eloquent JavaScript
• Jack Slocum
• JavaScript - Table of Contents
• John Resig
• Jonathan Snook
• Kevin Yank
• QuirksMode.org

JavaScript Development Tools

• Dean Edwards Packer
• Firebug Firefox Extension
• RegExPal
• Web Developer Toolbar Explorer Plugin
• Web Developer Toolbar Firefox Add-on

JavaScript Frameworks

• DED|Chain
• Dojo
• Ext JS
• jQuery
• MochiKit
• Mootools
• Prototype
• Script.aculo.us
• Yahoo! UI

• Posted by Brian
• October 16th, 2007