Javascript Resources Index

Contents 1 Snippits and Examples 2 Best Practices and Programming Style 2.1 W3C DOM vs. DHTML 2.2 JSON 2.3 Object Oriented 2.4 Separation of Layers 2.4.1 Behaviour Layer 2.4.2 Content Layer 2.4.3 Design Layer 2.4.4 Why the defined layers? 2.5 Unobtrusive and Accessible 3 Libraries and Frameworks 3.1 Specific 3.1.1 Object Oriented 3.1.2 Events 3.1.3 DOM 3.1.4 Forms 3.1.5 Dates 3.1.6 Debug 3.1.7 Images 3.1.8 XML 3.1.9 Windows 3.1.10 Hacks 3.2 General 3.2.1 jQuery 3.2.2 Behaviour 3.2.3 Moo.FX 3.2.3.1 Moo.FX Resources 3.2.4 AFLAX 3.2.5 Script.aculous 3.3 AJAX 3.3.1 Prototype 3.3.1.1 Prototype Resources 3.3.2 Rico 3.3.2.1 Rico Resources 3.3.3 MochiKit 3.3.3.1 MochiKit Resources 3.3.4 Dojo Toolkit 3.3.4.1 Dojo Resources 3.3.5 Solvent 3.3.5.1 Solvent Resources 3.3.6 SACK 3.3.7 SAJAX 3.3.7.1 SAJAX Resources 3.3.8 BackBase 3.4 Yahoo Resources and Libraries 4 Other Resources 4.1 Usability and Accessibility 4.2 Animation 4.3 Testing 4.4 General

Snippits and Examples

In no particular order, the following are a list of Javascript snippits and modules that are developed for example and reuse. The approach taken in most cases should be modular, re-usable and extendable.

• javascript-array (www.chadlindstrom.ca)
• javascript-calendar (www.chadlindstrom.ca)
• javascript-dom-implementation (www.chadlindstrom.ca)
• javascript-menuslide (www.chadlindstrom.ca)
• javascript-ticker (www.chadlindstrom.ca)
• http://www.dustindiaz.com/seven-togglers/

Best Practices and Programming Style

The following is a list of demonstrated modules, practices and styles that are considered 'best practices' and work well in multi-developer projects of all sizes.

• javascript-calendar (www.chadlindstrom.ca)
• javascript-menuslide (www.chadlindstrom.ca)
• javascript-ticker (www.chadlindstrom.ca)

W3C DOM vs. DHTML

• http://www.digital-web.com/articles/forms_usability_and_the_w3c_dom/

JSON

• http://www.json.org/
• http://en.wikipedia.org/wiki/JSON
• Using JSON (JavaScript Object Notation) with Yahoo! Web Services
• http://www.dustindiaz.com/json-for-the-masses/

Object Oriented

• prototype framework — this is a great example of OO JavaScript in practice
• Browse the Subversion repository
• OO Programming with JavaScript

Separation of Layers

Also discussed:

• Three separated layers
• http://www.bobbyvandersluis.com/articles/goodpractices.php
• http://adactio.com/journal/985
• http://www.alistapart.com/articles/scripttriggers/
• http://thinkingandmaking.com/entries/63

Behaviour Layer

Otherwise known as the scripting layer. This is where we use JavaScript to add function and behaviour to webpages.

• http://adactio.com/atmedia2005/
• JavaScript Triggers - http://www.alistapart.com/articles/scripttriggers/
• Custom DTD's - http://www.alistapart.com/articles/customdtd/

Content Layer

Otherwise known as the markup layer. This is where we use (X)HTML markup to build our pages, micro-formats, structure and classification which later pulls together the Behaviour and Design Layer to complete the web page.

Design Layer

Otherwise known as the style later. This is considered the CSS stylesheets that get linked (or should I say 'applied') to the content layer. Together with the content layer and design layer, the browser knows what to render and what the page looks like.

Why the defined layers?

For now I'll give the easy answer; it makes maintainability and accessibility much better than if the layers approach was not taken. The opposite approach is the table-based development many pages are currently utilizing.

Unobtrusive and Accessible

• http://www.onlinetools.org/articles/unobtrusivejavascript/
• http://www.boxofchocolates.ca/archives/2005/06/12/javascript-and-accessibility

Libraries and Frameworks

In no particular order, below is a listing of some libraries and frameworks for Javascript.

Specific

Some specific libraries, currently just libraries I have developed, am developing or maintaining.

Object Oriented

• A Base Class for JavaScript Inheritance — (dean.edwards.name)
• The beginnings of my namespace — (chadlindstrom.ca)

Events

• Dustin Diaz using Yahoo's Event Utility
• Behaviour

DOM

• dhtml.js (www.chadlindstrom.ca)

Forms

• forms.js (www.chadlindstrom.ca)

Dates

• dates.js (chadlindstrom.ca)
• datepicker.js (chadlindstrom.ca)
• jQuery DatePicker (kelvinluck.com)

Debug

• debug.js (www.chadlindstrom.ca)
• trace.js (www.chadlindstrom.ca)

Images

• png.js: PNG image replacement/support script (www.schillermania.com)

XML

• xml.js (www.chadlindstrom.ca)
• ajax.js (www.chadlindstrom.ca)

Windows

• windows.js (www.chadlindstrom.ca)

Hacks

• hacks.js (www.chadlindstrom.ca)

General

Some general libraries I have pulled together from other sources.

jQuery

jQuery is designed to change the way that you write Javascript.

jQuery is a Javascript library that takes this motto to heart: Writing Javascript code should be fun. jQuery achieves this goal by taking common, repetitive, tasks, stripping out all the unnecessary markup, and leaving them short, smart and understandable.

• 15 Days Of jQuery

Behaviour

Separate Structure (xhtml) from Behavior (javascript)

Moo.FX

moo.fx is a superlightweight, ultratiny, megasmall javascript effects library, written with prototype.js.

Moo.FX Resources

• http://moofx.mad4milk.net/tests.html

AFLAX

A JavaScript Library for Macromedia’s Flash™ Platform. AFLAX is a method through which developers may use JavaScript and Flash together to create AJAX-type applications, but with a much richer set of vector drawing controls than are available in either Internet Explorer or FireFox. Developers using this library have access to the full range of Flash features, but without ever touching the Flash IDE.

Script.aculous

Javascript visual effects, together with prototype.js

AJAX

My own (in development) library that is meant to be lightweight:

• ajax_utils.js (www.chadlindstrom.ca) - with connection pooling and error handling

Prototype

Prototype is a JavaScript framework that aims to ease development of dynamic web applications.

Prototype Resources

• http://blogs.ebusiness-apps.com/jordan/pages/Prototype%20Library%20Info.htm
• http://www.sergiopereira.com/articles/prototype.js.html
• http://wiki.script.aculo.us/scriptaculous/show/Prototype
• http://dev.rubyonrails.org/browser/spinoffs/prototype
• http://www.snook.ca/archives/000531.php — prototype dissected
• http://particletree.com/features/quick-guide-to-prototype/ — Quick Guide to Prototype

Rico

Rico provides a very simple interface for registering Ajax request handlers as well as HTML elements or JavaScript objects as Ajax response objects. Multiple elements and/or objects may be updated as the result of one Ajax request.

Rico Resources

• http://openrico.org/rico/docs.page
• http://openrico.org/rico/demos.page

MochiKit

MochiKit is a highly documented and well tested, suite of JavaScript libraries that will help you get things done, fast.

MochiKit Resources

• http://www.mochikit.com/doc/html/MochiKit/index.html
• http://www.mochikit.com/demos.html

Dojo Toolkit

Dojo is an Open Source toolkit that allows you to easily build dynamic capabilities into web pages and any other environment that supports JavaScript. Dojo provides components that let you make your sites more useable, responsive, and functional.

Dojo Resources

• http://dojotoolkit.org/docs/
• http://dojotoolkit.org/examples/

Solvent

The Solvent is a cross-browser AJAX application toolkit written in JavaScript. The Solvent is provided as modules or as an entire toolkit. The projects focus is to promote robust web applications and enable rapid web development.

Solvent Resources

• http://sourceforge.net/docman/?group_id=144164

SACK

Simple AJAX Code-Kit

SAJAX

SAJAX

SAJAX Resources

• Using Ajax with PHP and Sajax

BackBase

BackBase

Yahoo Resources and Libraries

• Yahoo UI Blog
• Yahoo UI Patterns
• Blogged
• Search Pagination
• Item Pagination
• Rating Object
• Reviews
• Drag and Drop
• Navigation Tabs
• Module Tabs
• Breadcrumbs
• AutoComplete
• Yahoo UI Libraries
• Blogged

Other Resources

• A Base Class for JavaScript Inheritance
• JavaScript Namespaces
• Notes on JavaScript Libraries
• Behavioral Separation
• Synchronous versus Asynchronous
• Clean AJAX Implementation, Simply Clean !
• Promoting the responsible use of JavaScript: writing, teaching and presenting
• JavaScript Scope through "subscript loaders"
• QA and Javascript Libraries
• Executing JavaScript on page load
• Serving JavaScript Fast
• Responsible Asynchronous Scripting
• Javascript character set screw-ups
• Image Resizing using JavaScript
• W3Schools JavaScript Tutorial
• JS Resources
• Ajax JavaScript resources
• AJAX In Action Book
• Survey of AJAX/JavaScript Libraries
• Ajax Frameworks / Libraries
• AJAX Patterns
• The AJAX response: XML, HTML, or JSON?
• JSON and Yahoo!'s JavaScript APIs
• Element Object in Prototype Revised
• Three JavaScript articles and one best practice
• Prototype Window Class — An extension of the Prototype class to create DHTML windows

Usability and Accessibility

• Fixing the Back Button and Enabling Bookmarking for AJAX Apps
• AJAX: How to Handle Bookmarks and Back Buttons
• Accessible forms and unobtrusive javascript — www.dotvoid.com
• You cannot rely on JavaScript being available. Period.

Animation

• Scott Schiller JS Animation Example
• Scott Schiller's Impressive JS Animation

Testing

• Sandboxing JavaScript Using <iframe>

General

• Is this overrated?
• Beware of JavaScript Library Overkill
• JSONRequest