JavaScript links

The educational technology and digital learning wiki
Jump to navigation Jump to search

Definition

This is a short links page on JavaScript. Only sporadically maintainted !

Reference and Manuals

Introductions

JavaScript Reference

  • 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 :)

Document object model (DOM)

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

JavaScript specific 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

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

  • SELFHTML Tutorial by Stephan Münz (German and French)

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.

old-style JavaScript

(but useful)

JavaScript, DOM and DHTML tutorials

DOM CSS

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

Ajax and DHTML tutorials

Canevas

<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.

JavaScript language tutorials

(for those who want to become real programmers)

Client-side modifications

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

Collections and links sites

General indexes

Ressource sites with tutorials and help

Sites with javascript code

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

See also tutorials above !

General developer libraries

See also AJAX

  • jQuery jQuery is a JavaScript library that takes this motto to heart: Writing JavaScript code should be fun... (12/2006).
  • DHTML Suite from dhtmlgoodies.com (to implement various DHTML widgets and functionalities).

Scripts and script collections

(this subcategory may need some sorting)

For programmers - both learning resource and code snippets or reusable code
Examples from books

Through the Web editor code

A list of Javascript HTML, 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
  • 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.
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.
  • 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. Ginally 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);

http://developer.mozilla.org/en/docs/Canvas_tutorial

  • Widget.Tooltip.js.
    • Creates small tooltips with code like this (additional options can be added):
new Widget.Tooltip({ elementId: 'myElementId', tooltipContent: 'my tooltip content' });

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.
  • Cooldev.com has 2 menus
  • Tree Menu (not tested)
    • Cross-browser DHTML tree. Free version must a include a link.
  • 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

Style sheet switchers

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

Rollover

Canevas

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

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

Retrieved from "https://edutechwiki.unige.ch/mediawiki/index.php?title=JavaScript_links&oldid=17352"