JavaScript links

Definition

This is a short links page on JavaScript, a popular scripting language for computer programming. Only sporadically maintainted !

As of April 2014, heavy updating is needed - Daniel K. Schneider (talk) 12:46, 2 April 2014 (CEST)

Reference and Manuals

Introductions and general overviews

• JavaScript (Wikipedia)
• Client-side JavaScript (Wikipedia)

JavaScript Reference and manuals

• JavaScript at Mozilla developper center (JS 1.5 plus JS 1.6, 1.7, 1.8 upgrades).
• Core JavaScript 1.5 Guide Can be used as Tutorial for the language only. Use a JS 1.2 or JS1.3 Guide for built-in non-standardized JavaScript objects, use the DOM specs for DOM objects.
• JavaScript 1.5 Guide (Local copy of an old Netscape version)
• HTML 5 Working Draft - 21 April 2008. This proposal adds features to HTML and the DOM that ease the authoring of Web-based applications. Additions include the context menus, a direct-mode graphics canvas, inline popup windows, and server-sent events....

Important: The core JavaScript/JScript/Actionscript languages are defined by ECMAScript. There may be some little differences and various degrees of implementation.

• JSLint is an online validator tool that checks a professional subset of JavaScript, a stricter language than that defined by Edition 3 of the ECMAScript Language Specification. The subset is related to recommendations found in Code Conventions for the JavaScript Programming Language. This verifier may hurt your feelings :)

• JavaScript Syntax (Wikipedia)

Document object model (DOM)

• W3C Document Object Model (DOM) Activity Statement (points to all relevant DOM documents)

Else please consult the Document Object Model (alias DOM) entry.

JavaScript specific DOM Reference

• Mozilla DOM Reference Index pointing to the reference (zip and PDF) plus tutorials
• Links and Resources to the W3C DOM (at Mozilla)
• Gecko DOM Reference

• History: For older NS 4.7 browsers and non-standardized so-called DOM 0 (e.g. HTML inline, browser interfaces) you may read: JavaScript 1.3 Guide and JavaScript 1.3 Reference Guide. These are outdated, but still on of the best references on how to use the old-style "standard" JavaScript Objects.

FAQs and Short References

• JavaScript FAQ (Includes FAQ related to JavaScript Dates, Forms, Frames, Images, Source Files, Layers, Links, Miscellaneous, Numbers, Strings, Tables, and Windows) (articles)
• JavaScript Mini-FAQ by Danny Goodman (Goodman is author of JavaScript books)
• Danny Goodman's JavaScript and Browser Objects Quick Reference
• DevGuru JavaScriptQuickRef (events, functions, methods, objects, operators, properties, statements, and values)

Specialized information and compatibility tables

Events

• Event compatibility tables. Overview table from Quirksmode, not up-to-date but still useful (5/2008).
• DOM events (Wikipedia). This also can be used as short tutorial (scroll down)
• DOM:event (Gecko DOM reference)

Front-end languages

Languages that compile into JavaScript and allow to define things in an easier way...

• CoffeeScript
• Haxe

Tutorials and tutorial sites

Warning: Some tutorials are not very clear about what's standardized, what's obsolete and what's informal but well supported.

Beginners tutorials

• Javascript tutorials (Land of Code). Good.

• JavaScript Tutorial (W3Schools)

• JavaScript 101

• JavaScript from Scratch (sitepoint)

• ABC of JavaScript. An Interactive JavaScript Tutorial]

• SELFHTML Tutorial by Stephan Münz (German and French)
  • JavaScript/DOM (German)
  • JavaScript/DOM (Français). Contient une introduction à JavaScript, à DOM et une référence objet.

• Welcome To JavaScript for the Total Non-Programmer (WebTeacher).
• Premiers pas en Javascript (Français).

• JavaScript tutorials. Videos by Bucky Roberts. Made for XHTML1. Nice for people who like videos, but somewhat outdated

General on-line tutorials

• JavaScript tutorial. Several tutorials by Mark "Tarquin" Wilton-Jones. One of the best on-line texts I have seen. Suitable for people with some programming experience.

• Web Design/An Introduction to Programming with Javascript (Wikiversity project. For the moment this page includes a few Wikiversity tutorials plus a good list of external links that you could follow - 15:55, 29 July 2009 (UTC))

• A re-introduction to JavaScript Good recent introduction to the language from Mozilla. Suitable for folks with programming experience. (2006)

• Introducation to JavaScript, part of Learn to code while building a project Codeacademy.

• JavaScript (WikiBooks tutorial). Suitable for somewhat technical people.

• Eloquent JavaScript A Modern Introduction to Programming by Marijn Haverbeke. A second version should be out by the end of 2014, draft parts are there as of March 2014.

old-style JavaScript

(but useful)

• Stefan Koch's Voodoo's Introduction to JavaScript. Does not include modern DOM . There is a Introduction à JavaScript french translation.

• JavaScript and HTML: possibilities and caveats by Jukka "Yucca" Korpela, 2005.

Forms

(more needed)

• JavaScript and HTML Tricks, by Joseph Myers, Webreference, Jul 2008.

• How to Use a JavaScript Query String Parser, by Joseph Myers, Webreference, Jul 2008.

• How to Use Javascript to Validate Form Data, by Joseph Myers, Webreference, Oct. 2008.

JavaScript, DOM and DHTML tutorials

• Introduction to the DOM Introduction to the DOM of IE/ Firefox by Timothy Francis Brady.
• Dynamic Content with DOM-2 (Part I of II) by S.A. LePera, O'Reilly 2001
• BrainJar.com. Mike Hall's experiments in Web Programming. Includes both good tutorials and GNU-licenced code. E.g. The DOM Event Model or Generic Drag

• DOM nodes and tree by Mark "Tarquin" Wilton-Jones. The essential questions and answers.

Event handling

Important: Support for W3CEvent model and DOM is not the same thing necessarily. Browser support for W3C Event model is bad (e.g. IE 7 doesn't support this)

• Quirksmode has a number of tutorials on events (you also may consider buying the book)
  • Introduction to Events
  • Advanced event registration models, etc.
• Mouse wheel programming in JavaScript
• The DOM Event model (also introduces on page 1 old-style inline)

User JavaScript

• Take Control with User JavaScript. For Opera
• Greasemonkey for FF (links to insert)

DOM CSS

• DOM CSS by Mark "Tarquin" Wilton-Jones. A tutorial about style switching.

Ajax and DHTML tutorials

• DHTML page at Mozilla developper center (demos)
• Dynamic HTML and XML: The XMLHttpRequest Object - Apple Developer Connection, 2004
• Ajax (programming). Ajax or Asynchronous JavaScript and XML is a term describing a web development technique for creating interactive web applications (Wikipedia Article, 2005)
• Asynchronous JavaScript Technology and XML (AJAX) With Java 2 Platform, Enterprise Edition (!), technical Sun Developer Network article, June 2005)
• AJAX : Demystifying the buzz for all platforms. @ Web Forefront Mai 2005. Short intro article
• Putting AJAX to work InfoWorld article, (mostly a product overview)

JS/Ajax framework tutorials

• [http://www.webreference.com/programming/javascript/rg19/index.html Popular JavaScript Framework Libraries: An Overview. By Rob Gravelle, WebReference.com (Oct 2008). Focus on Prototype, script.aculo.us and MooTools (others will be discussed in other installments of this series)

Canvas

<canvas> is a new HTML element which can be used to draw graphics via scripting. For example, it can be used to draw graphs, make photo compositions or even perform animations. This element is part of "HTML 5", i.e. the WhatWG Web applications 1.0 specification.

• HTML:Canvas Page at Mozilla dev center
• Mozilla canevas tutorial
• Drawing Graphics with Canvas (a simpler version of the above)

JavaScript tutorials for programmers

• JavaScript Closures for Dummies, also available as JavaScript Closures 101- they're not magic by Morris Johns. Such articles may help to understand why JS is an interesting language and has inherited something from LISP.

• Illumination on JavaScript Prototypes, also by Morris Johns.

• Object-Oriented JavaScript, Webreference, 2007 by Cristian Darie, Bogdan Brinzarea

• evolutionary programming in ES4, 2007

Client-side modifications

There are browser extensions that allow a user to change behavior of web pages. The best know is Greasemonkey.

See the User-side JavaScript article for more information and an example.

• Greasemonkey
• Wikipedia Greasemonkey

Server programming with JS

• Node.js Quoite “is a platform built on Chrome's JavaScript runtime for easily building fast, scalable network applications. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, perfect for data-intensive real-time applications that run across distributed devices.”

Collections and links sites

General indexes

• DMoz JavaScript (Big Index)
• Yahoo's js directory (big meta list)
• Mozilla's JavaScript Scripting Resources A short list of good links
• Object-Oriented Language: JavaScript / ECMAScript (Cetus links)
• DHTML, DOM and JavaScript, ECMAScript, AJAX (WebsiteTips.com).

Ressource sites with tutorials and help

• Quirksmode CSS and Javascript tips by Peter Paul Koch. Tutorial and examples, Compatibility tables.
• Webmonkey: Javascript collection. Links and good but outdated tutorials.
• JavaScript tutorials at webreference(Lots !)

Sites with javascript code

This chapter should only include free code or code that is free for education. I am not against commercial ware, but this web site mainly targets poor academics and students in educational technology. - Daniel K. Schneider 16:33, 12 April 2008 (UTC).

See also tutorials above !

General developer libraries

Instead of using specific libraries, you also may use script libraries. There are advantages (single code library, quality, ...) and disadvantages (learning curve, dependency on something you don't understand, size, ...) that we should discuss here at some point. See also AJAX.

See also

• JavaScript libraries. This article includes an introduction to some principles plus a list of major libraries (updated April 2018 or later)
• Wikipedia's Comparison of JavaScript frameworks.
• Visualization

Scripts and script collections

(this subcategory may need some sorting)

• Brothercake (Good Scripts collection)
• DHTMLGoodies.com. A series of nice and up-to-date script. Easy to use website. But the scripts are not dated and no clear indication of compliance with standards/ modern browsers is given.
• Doc JavaScript, a webreference.com site.
• Dynamic Drive Free DHTML (some scripts may not be up to date)
• HotScripts.com/JavaScript (Large Scripts collection)
• Java Script Browser Sniffer at webreference.com. Updated 10/09/2006 (or better)
• JavaScript Kit Code to cut/paste (over 400). Some maybe old.
• JavaScript Made Easy. Some nice examples (but the page has JS errors when it loads ...)
• JavaScript Archive Network (JSAN)
• JavaScript tutorials at webreference (also has a good list of site with code).
• Scriptsearch. Large collection of Scripts (also Tutorials, etc.)
• The JavaScript Source a nice resource with lots of Cut & Paste javascript examples. Use the little navigation menu to the left (click on "site contents") Be aware of code that may be outdated.
• Top10 Most Useful JavaScripts at Hyperdisc, Unitec.
• Examples and JavaScript libraries from the JavaScript tutorial by Mark "Tarquin" Wilton-Jones.

For programmers - both learning resource and code snippets or reusable code

• BrainJar.com. Mike Hall's experiments in Web Programming. Includes both good tutorials and GNU-licenced code. One of the top JS sites.
• DHTMLKitchen.
• DHTML Demonstrations Using DOM/Style (Mozilla dev center)
• userjs.org (active until 2006)

Examples from books

• JavaScriptWorld Site of JavaScript and Ajax for the Web, Visual QuickStart Guide, Sixth Edition.
• PPK on JavaScript - the example scripts

Through the Web editor code

A list of Javascript HTMs numbers, strings and dates.L, XML, etc. WYSIWYG editors. By default, these are free. There may be better commercial but not listed solutions. Libraries listed here are all respectable, but (so far) we don't have any recommendation and features mentionned are not complete. See Comparison table and Standards schmandards 2007 for comparison.

Bigger

• TinyMCE.
  • Is on of the more popular libraries and fairly easy to integrate and customize. Integrated in many popular CMS systems and cross-browser.
  • Used to have trouble with embedded lists (but this is maybe fixed now/ - DKS)
  • Wikipedia entry

• FckEditor.
  • Crossplatform, XHTML 1.0, CSS, paste from Word, spell checker. Integration packs with various server-side languages.
  • Wikipedia Entry

• openWYSIWYG.
  • Cross-browser, good table manager,

• Xinha, Crossplatform.
  • (DKS thinks it's the default one in the PostNuke CMS).

• Loki.
  • Claims to be most standards compliant and encourages semantic markup.

• WYMeditor is a web-based WYSIWYM (What You See Is What You Mean) XHTML editor).
  • Its main concept is to leave details of the document's visual layout, and to concentrate on its structure and meaning, while trying to give the user as much comfort as possible.
  • For certain applications where users ought to produce optional XHTML code, this is better than an WYSIWYG editor.

• Whizzywig.

Smaller

• HTMLBox. Cross-browser interactive open-source HTML textarea built on top of the jQuery library. Easy to use, best for smaller applications (users write smallers texts). 15KB only.

• NicEdit. Even more lightweight than HTMLBox. Also can be used through widget code (JS is loaded from nicedit.com).

Popup and tooltip code

JavaScript/DHTML popups that are free and and work with modern browsers. While looking for 2-3 "products" I found several that didn't work properly - Daniel K. Schneider

• Bride of Windows Popup, from Brainjar.com
  • It's actually a tutorial on how to write your on. But the code is enough mature to be used in production
  • A maybe outdated example I made is here.

• Highslide JS Popup / thumbnails code from Torstein Honsi. Elegant solution and code.

• openPopUps Popup code
  • Rather easy to use (besides some strange difference between div id and an argument to pass): popup contents is inserted within a div that has an id like "Div1", "Div2" etc. An onload function then should call the hideDiv function in order to hide these div's contents. Finally there is a createWindow function to call for displaying it. The fifth argument is (related?) to the id of the div.

createWindow('My Window', 400, 'brown', 1, 0, 240, 375);

• Widget.Tooltip.js.
  • Creates small tooltips with code like this (additional options can be added):

new Widget.Tooltip({ elementId: 'myElementId', tooltipContent: 'my tooltip content' });

• tooltip using the Generic DHTML do everything library of Mark "Tarquin" Wilton-Jones.

Menus

There is a lot of menu code. Some commercial. Some freeware seems to be of better quality and more in the spirit of modern web design, e.g. code that is based on a list and that can display without javascript or in old browsers if needed. There are a lot of free versions from commercial sites. Some of these work (and can be upgraded to a "pro" version), most include "nagware" elements, e.g. menuitems that point to their site and some are totally unusable.

The list below should be ok, but I didn't test them all - Daniel K. Schneider 16:57, 20 April 2008 (UTC).

• Revenge of the Menu Bar A tutorial from brainjar.com. Includes good and reusable code for menus that are efficient and reliable.
  • Demo page (source included in the HTML page).
  • Menus are made with div's and classes for these divs.
  • Tested, works.

• DHTMLGoodies menus
  • Several menus available. All are free and multi-browser. E.g.
  • Slide-out menu
  • Menu for applications
  • List based DHTML menu

• JavaScriptkit.com has several menu scripts, e.g.
  • Cut & Paste 2 level horizontal tab menu at
  • Cut & Paste CSS Vertical List Menu
  • Free, multi-browser. Quite light-weight and easy to use.
  • dbMenu, script to create multiple types of 2 level drop down menus.

• Tigra menus
  • Tigra Menu (not tested)
  • Tigra Tree Menu (not tested)
  • free, multi-browser

• Cooldev.com has 2 menus
  • COOLjsMenu (not tested)
  • COOLjsTree (not tested)
  • "Standard" editions are free

• javascript.internet.com/ / navigation has several menus, e.g.
  • Expanding Menu
  • Click-To-Expand Menu
  • XP Menus
  • The above use simple code, free. (some other examples may be too outdated, IE only, etc.)

• Multi level menu controls
  • From hotocreate tutorial web site.
  • free, modern multi-browser
  • other version are available

• Tree Menu (not tested)
• Cross-browser DHTML tree. Free version must a include a link.

• CSS Menu Generator, by Wonderware
  • free software for Windows/IE5.5+ (not tested !)

• zapatec menu
  • Includes an online menu-generator
  • Free version must include a link to zapatec

• pull down menu
  • Very simple, 3 lines of code using window.location.href

Form validation

• dhtml-form-validation (dhtmlgoodies.com). This scripts validates text inputs as you type and select boxes after something has been selected. Custom attributes on the tags are used to determine the validation process. This is very easy to use, but creates not valid HTML.

• JS Auto Form Validator. This easy to use script works with the naming of the form fields. E.g. name="rtFirstname" means r=required plus t=text.

• RegExp Validation by Travis Beckham at Javascript.internet.com. Elegant solution: User has to define a function that assigns property values to form elements. E.g. f.firstname.isAlphaNumeric = true. Then the code validates according to these properties. It is based on regular expressions.

• Tigra form validator A free version of SoftComplex' commercial Pro version. User has to define a JS record (associative array) and define a data structure for each form element to validated. Also quite elegant and not difficult to use if you respect the syntax of nested records.

Style sheet switchers

Note: In Firefox you always can try manually. Menu View->Page style.

• Invasion of the Body Switchers by Brothercake (2006).
  • Originally published in List apart (2004).
  • There is a 7-page PDF manual and HTML.

Rollover

• Image handling Tutorial and code.

• How to make correct rollover buttons with preload images Tutorial and code, at javascript-array.com

Cursor

• At Moz Dev Center:
  • CSS:cursor
  • Using URL values for the cursor property
  • examples of built-in cursors

Drag and Drop

• DOM Drag and drop script (dynamicdrive.com)
• crossbrowser drag handler (javascript.internet.com)
• How to Drag and Drop in JavaScript webreference.com tutorial + code (shows how to create sortable stacks of boxes)
• JavaScript Drag and Drop Tutorial by luke breuer.
• JavaScript Drag and Drop examples information + download .

Canevas

Didn't take time to find libraries. But here are a few examples, more are available from Mozilla's Canvas examples

• Code snippets:Canvas at Mozilla dev center, not too useful on April 2008.
• Canvas Adventure by Andrew Wooldrige.
• canvas globalCompositeOperation (Mozilla canevas tutorial)
• A basic ray raster (Mozilla canevas tutorial)

Note: FF 2 and Opera implement canevas, IE 7 does not, but there is at least one emulation, e.g. Canevas in IE by Emil.