JavaScript links: Difference between revisions

The educational technology and digital learning wiki
Jump to navigation Jump to search
Line 250: Line 250:
** It's actually a tutorial on how to write your on. But the code is enough mature to be used in production
** 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 [http://tecfa.unige.ch/guides/js/ex/coap/week-4/10-dynamic-response.html here].
** A maybe outdated example I made is [http://tecfa.unige.ch/guides/js/ex/coap/week-4/10-dynamic-response.html here].
* [http://vikjavev.no/highslide/ Highslide JS] Popup / thumbnails code from Torstein Honsi. Elegant solution and code.


* [http://www.openwebware.com/products/openpopups/ openPopUps] Popup code
* [http://www.openwebware.com/products/openpopups/ 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.
** 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);
  createWindow('My Window', 400, 'brown', 1, 0, 240, 375);


Revision as of 22:32, 16 June 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)
  • 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

Specialized information and compatibility tables

Events

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

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)

User JavaScript

DOM CSS

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

Ajax and DHTML tutorials

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.

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.

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

Collections and links sites

General indexes

Ressource sites with tutorials and help

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.

  • dojo toolkit. Multipurpose ajax/JS toolkit. There is a core, Dijiit and DojoX. Good documentation (also from third-party sites is available)
  • http://www.prototypejs.org/ Prototype]. “Featuring a unique, easy-to-use toolkit for class-driven development and the nicest Ajax library around”.
  • sript.aculo.us (scriptaculous) “provides you with easy-to-use, cross-browser user interface JavaScript libraries to make your web sites and web applications fly..”
  • 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).
  • Dynamic HTML Libraries from Scott Martin (also other JS libs).

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 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
  • 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.
  • 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' });

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

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.
  • Form Check Script from viala.hu is an variation (and probably an improvement) of Beckham's RegExp validation above.
  • 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.

Rollover

Cursor

Drag and Drop

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 there is at least one emulation, e.g. Canevas in IE by Emil.

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