JavaScript links

This article or section is currently under construction

In principle, someone is working on it and there should be a better version in a not so distant future.
If you want to modify this page, please discuss it with the person working on it (see the "history")

... really

Definition

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

Reference and Manuals

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)

• 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 Mini-FAQ by Danny Goodman (Goodman is author of JavaScript books)
• Danny Goodman's JavaScript and Browser Objects Quick Reference

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)
  • JavaScript/DOM (German)
  • JavaScript/DOM (Français). Contient une introduction à JavaScript, à DOM et une référence objet.

General on-line tutorials

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

Ressource sites with tutorial help

• Quirksmode CSS and Javascript tips by Peter Paul Koch. Tutorial and examples, Compatibility tables.

Very old-style JavaScript

• Stefan Koch's Voodoo's Introduction to JavaScript. Ok pour JS ancien, pas actualis� pour DOM. Il existe une traduction fran�aise Introduction � JavaScript. (bien, mais dat� (!)

• Webmonkey: Javascript collection: links & tutorials (but too much advertising !)
• JavaScript Tutorials @ builder.com,
• Introduction to the DOM of IE5 / NS6
• JavaScript tutorials at webreference (Lots !)
• Quelques tutoriels installés localement (il y a longtemps, � VERIFIER).
• JavaScript and HTML: possibilities and caveats by Jukka "Yucca" Korpela, 2005.
• Beginner Tip: Form Processing Basics by Larisa Thomason, NetMechanic

DOM tutorials

• Dynamic Content with DOM-2 (Part I of II) by S.A. LePera, O'Reilly 2001

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)

Client-side modifications

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

• Greasemonkey
• Wikipedia Greasemonkey

Links

(needs some sorting)

Sites with javascript code

(see also tutorials above !)

• jQuery jQuery is a JavaScript library that takes this motto to heart: Writing JavaScript code should be fun... (12/2006).
• Mozilla's JavaScript Scripting Resources A short list of good links
• [1] DMoz JavaScript (Big Index)
• JavaScript FAQ JavaScript 'No Content' web site (Includes FAQ related to JavaScript Dates, Forms, Frames, Images, Source Files, Layers, Links, Miscellaneous, Numbers, Strings, Tables, and Windows) (articles)
• JavaScript Pro: FAQ, informations et ressources (niveau moyen)
• Java Script Browser Sniffer from webreference.com, see also: Sniffing for Netscape 6
• Doc JavaScript (advanced)
• Dynamic Drive: DHTML et autres trucs non standard, � utiliser avec pr�caution
• The JavaScript Source a nice resource with lots of Cut & Paste javascript examples
• Scriptsearch. Large collection of Scripts (also Tutorials, etc.)
• Yahoo's js directory (big meta list)
• DevEdge Online Javascript. Main Javascript Page at Netscape: Examples, newsgroups, manuals, etc. (RECOMMENDED but advanced)

Exemples

• ppk on JavaScript - the example scripts

Junk to sort out

(in french mostly / en fran�ais) Vous pouvez voir une petite présentation (slides utilisés pour le cours UV22).
Javascript est un langage de scripting qui augmente les fonctionnalit�s du langage HTML et autres formats Internet. Il offre un certain degr� d'interactivit� ainsi que quelques effets int�ressants. Ce langage a �t� d�velopp� par [/~roiron/staf14/theme.htm#net Netscape] pour �tre utilis� dans leur browser (client-side) ou au niveau serveur (server-side). Nous nous int�ressons ici au c�t� client de javascript.

Plus concr�tement, javascript peut servir �:

• Contr�ler l'apparence et le contenu de documents HTML
• Contr�ler le comportement du browser, dans une certaine mesure (par exemple, il est possible de cr�er de nouvelles fen�tre, de les fermer, ...)
• Interagir avec le contenu d'un fichier HTML, par exemple on peut compter le nombre de liens dans un fichier. Les tags des formulaires (text, checkbox, button, ...) permettent de lire ou �crire des valeurs de (et dans) ces champs
• Lire et �crire la valeur de cookies pour g�n�rer dynamiquement des pages HTML
• Faire des calculs, utiliser et traiter des variables de type date, ...

• Staf 13: Bibliographie de base: ouverture d'une ptite fen�tre avec un ancre interne pass� en argument
• [ex-intro/ Exemples Javascript I]: Contient des exemples simples utilis�s pour introduire les notions de base.
• [exemples/sommaire.html Exemples Javascript II]: Contient entre autre les exemples les plus importants du livre de Cohen, CGI/Perl et Javascript utilis� dans le cours. (Cette page est prot�g�e par le mot de passe STAF habituel pour des raisons de copyright)
• [../java/tecfaman/code/ Exemples III (r�pertoire)] du Tecfa Javascript Manuel.
• La collection de Danny Goodman.
• Java Script Made Easy! (A useful collection of 123 JavaScripts with working examples and explicit directions. Topics include Mouse Tricks, User Info, Pull Down Surfing, Alerts, Buttons/Forms, Clocks And Date, Scrollers, Random Stuff and Misc)
• Live Software's: resource center, quelques exemples (niveau avanc�)
• about javascript, a history and primary sources (peu d'info)
• Browser Sniffer This JavaScript-enabled page sniffs out common browser environment variables useful for writing cross-browser scripts

Que peut-on faire avec JavaScript ?

Il peut être intéressant d'intégrer javascript dans un cursus de formation � distance (tutoriel-web, en l'occurence pour apprendre html, ici les tableaux) . Voir aussi le travail de 2 �tudiants (futurs enseignants) dans le cadre du cours M�dias et Informatique

Avec JavaScript, on peut entre autres:

• Connaitre pr�cis�ment le browser utilis�
• Cr�er des questionnaires � choix multiples relativement �volu�s
  • Exemple de [/~roiron/hack/questionnaire/questionnaire.htm QCM] sur les SEAT
  • [/~roiron/staf2x/qcm.htm G�n�rer simplement] un qcm, sans savoir coder en javascript
• la frame de navigation de ma homepage contient des images, dont la propri�t� src (l'adresse de l'image) varie avec le "gestionneur" d'�v�nement OnMousOver (voir �galement le logo tecfa sur ma [javascript:windowOpener('http://tecfa.unige.ch/~roiron/','http://tecfa.unige.ch/~roiron/home.htm#tecfa') homepage]
• sur ma homepage, la date est affich�e et, plus bas, un message concernant mon anniversaire; lorsque mon anni approche, le message change et fait un d�compte (le jour fatidique, ma homepage n'est plus accessible, et une autre page rappelle � tous l'importance de ce jour)
• on peut faire clignoter la page pendant qu'elle se charge, on peut afficher l'heure qui se met � jour r�guli�rement
• une fonction qui retourne une couleur al�atoire (vachement utile ;)
• Une fonction qui retourne un nombre al�atoire entre 1 et i

On peut [javascript:ouvrir(); ouvrir une nouvelle fen�tre] sans avoir besoin de cliquer (en l'occurrence une calculatrice �crite en JavaScript) ou encore vous faire changer de site (toujours sans cliquer ;)
On peut �galement faire scroller un message sur la widow.status bar (un peu stupide)
Un petit truc qui peut servir: si, dans la partie location (dans laquelle s'affiche l'URL en cours), vous tapez javascript:votre_fonction, ça permet de débuguer une ligne de code. Vous pouvez par exemple essayer avec: javascript:alert(aujourdhui = new Date()). Remarque: à la place de javascript, on peut écrire mocha (utile pour java).
On peut obtenir quelques informations sur votre browser et la version avec laquelle vous travaillez.
J'ai réuni quelques exemples de code que j'ai produit et qui peuvent servir tel quel (cut & paste)
Voici un code que j'aimerais bien avoir fait: une page qui vous permet de tester les couleurs en HTML

Comme dit plus haut, javascript ne permettrait pas, par exemple, de g�rer un programme tel qu'un interfa�age de notre moo (alors que java le permet). Pour plus de détails concernant ces différences, voir la FAQ Java de IrtOrg

Exemples utiles pour l'exercice de programmation STAF-14

(sans mise � jour depuis plusieurs ann�es !!)

1. [exemples/interactif.html Formulaire interactif] (version "onClick")
2. [exemples/interactif2.html Formulaire interactif] (version qui interroge le formulaire)
3. [exemples/createw.html Cr�ation d'une nouvelle fen�tre] (avec formulaire et une ligne de texte)
4. [ex-intro/chatter-bot.html Chatter Bot] (regexp demo)

Exemples produits par nos �tudiants

(pas mis � jour depuis qq. ann�es !!)

• Exercice Javascript Staf-14: Voir les portefeuilles diff�rentes Promotions
• Boire ou conduire par Cyril Roiron: formulaire calcul avec instructions
• Co�t d'une voiture par Gael Jaboulay: formulaire calcul
• L'homme de votre vie par Anne Midenet: quiz avec images
• Moo tutorial by Chris Muller: utilisation de JS dans un tutoriel
• Budget familial par Benoit Dago: formulaire calcul
• Questionnaire sur la Po�sie du XIX�me si�cle par Yasmin Shubber: quiz/test
• Votre profil kiwajuniorien par Nathalie Pilard: test
• Home Page de Cyril Roiron, par exemple la barre de navigation ou l'image Tecfa au milieu de la page