JavaScript links

This article or chapter is incomplete and its contents need further attention. Some information may be missing or may be wrong, spelling and grammar may have to be improved, use your judgment!

## Contents

* 1 Definition
* 2 Reference and Manuals
* 2.1 Introductions and general overviews
* 2.2 JavaScript Reference and manuals
* 2.3 Document object model (DOM)
* 2.4 JavaScript specific DOM Reference
* 2.5 FAQs and Short References
* 2.6 Specialized information and compatibility tables
* 2.7 Front-end languages
* 3 Tutorials and tutorial sites
* 3.1 Beginners tutorials
* 3.2 General on-line tutorials
* 3.3 old-style JavaScript
* 3.4 Forms
* 3.5 JavaScript, DOM and DHTML tutorials
* 3.6 Event handling
* 3.7 User JavaScript
* 3.8 DOM CSS
* 3.9 Ajax and DHTML tutorials
* 3.10 JS/Ajax framework tutorials
* 3.11 Canvas
* 3.12 JavaScript tutorials for programmers
* 4 Client-side modifications
* 5 Server programming with JS
* 6 Collections and links sites
* 6.1 General indexes
* 6.2 Ressource sites with tutorials and help
* 7 Sites with javascript code
* 7.1 General developer libraries
* 7.2 Scripts and script collections
* 7.3 Through the Web editor code
* 7.4 Popup and tooltip code
* 7.5 Menus
* 7.6 Form validation
* 7.7 Style sheet switchers
* 7.8 Rollover
* 7.9 Cursor
* 7.10 Drag and Drop
* 7.11 Canevas

## Definition[edit | edit source]

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[edit | edit source]

### Introductions and general overviews[edit | edit source]

* JavaScript (Wikipedia)
* Client-side JavaScript (Wikipedia)

### JavaScript Reference and manuals[edit | edit source]

* 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)[edit | edit source]

* 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[edit | edit source]

* 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[edit | edit source]

* 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[edit | edit source]

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[edit | edit source]

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

* CoffeeScript
* Haxe

## Tutorials and tutorial sites[edit | edit source]

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

### Beginners tutorials[edit | edit source]

* 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[edit | edit source]

* 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[edit | edit source]

(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[edit | edit source]

(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[edit | edit source]

* 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[edit | edit source]

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[edit | edit source]

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

### DOM CSS[edit | edit source]

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

### Ajax and DHTML tutorials[edit | edit source]

* 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[edit | edit source]

* [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[edit | edit source]

<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[edit | edit source]

* 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[edit | edit source]

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[edit | edit source]

* 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[edit | edit source]

### General indexes[edit | edit source]

* 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[edit | edit source]

* 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[edit | edit source]

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[edit | edit source]

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[edit | edit source]

(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[edit | edit source]

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[edit | edit source]

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[edit | edit source]

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[edit | edit source]

* 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[edit | edit source]

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[edit | edit source]

* Image handling Tutorial and code.

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

### Cursor[edit | edit source]

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

### Drag and Drop[edit | edit source]

* 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[edit | edit source]

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.