JavaScript links: Difference between revisions

The educational technology and digital learning wiki
Jump to navigation Jump to search
Line 132: Line 132:


* [http://jquery.com/ jQuery] jQuery is a JavaScript library that takes this motto to heart: Writing JavaScript code should be fun... (12/2006).
* [http://jquery.com/ jQuery] jQuery is a JavaScript library that takes this motto to heart: Writing JavaScript code should be fun... (12/2006).
* [http://www.dhtmlgoodies.com/index.html?page=dhtml-suite DHTML Suite] from dhtmlgoodies.com (to implement various DHTML widgets and functionalities).


=== Scripts and script collections ===
=== Scripts and script collections ===
Line 156: Line 157:
* [http://www.dhtmlkitchen.com/ DHTMLKitchen].  
* [http://www.dhtmlkitchen.com/ DHTMLKitchen].  
* [http://developer.mozilla.org/en/docs/DHTML_Demonstrations_Using_DOM/Style DHTML Demonstrations Using DOM/Style] (Mozilla dev center)
* [http://developer.mozilla.org/en/docs/DHTML_Demonstrations_Using_DOM/Style DHTML Demonstrations Using DOM/Style] (Mozilla dev center)
* [http://userjs.org/ userjs.org] (active until 2006)


; Examples from books
; Examples from books
Line 228: Line 230:
** Originally published in [http://www.alistapart.com/articles/bodyswitchers/ List apart] (2004).
** Originally published in [http://www.alistapart.com/articles/bodyswitchers/ List apart] (2004).
** There is a 7-page PDF manual and HTML
** There is a 7-page PDF manual and HTML
=== Rollover ===
*


[[Category:links]]
[[Category:links]]

Revision as of 16:16, 12 April 2008

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)
  • ECMA-262 Specification (local copy, PDF). ECMA Script is a standardized Core Version (e.g. without any browser objects) based on the JavaScript 1.1 Specification. ECMA Script is the formal basis for many scripting languages (JavaScript 1.5, SVG and VRML scripting, Actionscript 3 etc.)

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

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

(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);
  • 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

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

Style sheet switchers

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

Rollover