JavaScript links: Difference between revisions

The educational technology and digital learning wiki
Jump to navigation Jump to search
Line 30: Line 30:
=== FAQs and Short References ===
=== FAQs and Short References ===


* [http://www.irt.org/script/faq.htm JavaScript FAQ] (Includes FAQ related to JavaScript Dates, Forms, Frames, Images, Source Files, Layers, Links, Miscellaneous, Numbers, Strings, Tables, and Windows) ([http://www.irt.org/articles/script.htm articles])
* [http://www.dannyg.com/ref/jsminifaq.html JavaScript Mini-FAQ] by Danny Goodman (Goodman is author of JavaScript books)
* [http://www.dannyg.com/ref/jsminifaq.html JavaScript Mini-FAQ] by Danny Goodman (Goodman is author of JavaScript books)
* Danny Goodman's [http://www.dannyg.com/ref/jsquickref.html JavaScript and Browser Objects Quick Reference]
* Danny Goodman's [http://www.dannyg.com/ref/jsquickref.html JavaScript and Browser Objects Quick Reference]
Line 38: Line 39:


=== Beginners tutorials ===
=== Beginners tutorials ===


* [http://selfhtml.org/ SELFHTML] Tutorial by Stephan Münz (German and French)
* [http://selfhtml.org/ SELFHTML] Tutorial by Stephan Münz (German and French)
** [http://de.selfhtml.org/javascript/index.htm JavaScript/DOM] (German)
** [http://de.selfhtml.org/javascript/index.htm JavaScript/DOM] (German)
** [http://fr.selfhtml.org/javascript/index.htm JavaScript/DOM] (Français). Contient une introduction à JavaScript, à DOM et une référence objet.
** [http://fr.selfhtml.org/javascript/index.htm JavaScript/DOM] (Français). Contient une introduction à JavaScript, à DOM et une référence objet.


=== General on-line tutorials ===
=== General on-line tutorials ===
Line 50: Line 48:
* [http://developer.mozilla.org/en/docs/A_re-introduction_to_JavaScript A re-introduction to JavaScript] Good recent introduction to the language from Mozilla. Suitable for folks with programming experience. (2006)
* [http://developer.mozilla.org/en/docs/A_re-introduction_to_JavaScript 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 ===
=== old-style JavaScript ===
 
(but useful)
* [http://www.quirksmode.org/ Quirksmode CSS and Javascript tips] by Peter Paul Koch. Tutorial and examples, Compatibility tables.
 
=== Very old-style JavaScript ===


* [http://oopweb.com/JavaScript/Documents/jsintro/VolumeFrames.html  Stefan Koch's Voodoo's Introduction to JavaScript.] Ok pour JS ancien, pas actualis� pour DOM. Il existe une traduction fran�aise [http://www.chez.com/qaghan/JavaScript/fscriptn.php Introduction � JavaScript]. (bien, mais dat� (!)
* [http://oopweb.com/JavaScript/Documents/jsintro/VolumeFrames.html  Stefan Koch's Voodoo's Introduction to JavaScript.] Does not include modern DOM . There is a  [http://www.chez.com/qaghan/JavaScript/fscriptn.php Introduction à JavaScript] french translation.


* [http://www.webmonkey.com/webmonkey/programming/javascript/index.html Webmonkey: Javascript collection]<nowiki>: links &amp; tutorials (but too much advertising !)</nowiki>
* [http://builder.com.com/1200-31-5084860.html JavaScript Tutorials @ builder.com],
* [http://wsabstract.com/javatutors/dom.shtml Introduction to the DOM of IE5 / NS6]
* [http://www.webreference.com/programming/javascript/ JavaScript tutorials at webreference] (Lots !)
* [http://tecfa.unige.ch/guides/js/javascript-tutorial/ Quelques tutoriels] installés localement (il y a longtemps, � VERIFIER).
* [http://www.cs.tut.fi/~jkorpela/forms/javascript.html JavaScript and HTML: possibilities and caveats] by Jukka "Yucca" Korpela, 2005.
* [http://www.cs.tut.fi/~jkorpela/forms/javascript.html JavaScript and HTML: possibilities and caveats] by Jukka "Yucca" Korpela, 2005.
* [http://www.netmechanic.com/news/vol5/beginner_no19.htm Beginner Tip: Form Processing Basics] by Larisa Thomason, NetMechanic


== DOM tutorials ==
=== JavaScript and DOM tutorials ===


* [http://wsabstract.com/javatutors/dom.shtml Introduction to the DOM Introduction to the DOM of IE/ Firefox] by Timothy Francis Brady.
* [http://www.oreillynet.com/pub/a/javascript/synd/2001/08/17/DOM-2.html Dynamic Content with DOM-2 (Part I of II)] by S.A. LePera, O'Reilly 2001
* [http://www.oreillynet.com/pub/a/javascript/synd/2001/08/17/DOM-2.html Dynamic Content with DOM-2 (Part I of II)] by S.A. LePera, O'Reilly 2001


== Ajax and DHTML tutorials ==
=== Ajax and DHTML tutorials ===


* [http://developer.mozilla.org/en/docs/DHTML DHTML] page at Mozilla developper center (demos)
* [http://developer.mozilla.org/en/docs/DHTML DHTML] page at Mozilla developper center (demos)
Line 86: Line 76:
* [http://en.wikipedia.org/wiki/Greasemonkey Wikipedia Greasemonkey]
* [http://en.wikipedia.org/wiki/Greasemonkey Wikipedia Greasemonkey]


== Links ==
== Collections and links sites ==


(needs some sorting)
* [http://dmoz.org/Computers/Programming/Languages/JavaScript/  DMoz JavaScript] (Big Index)


== Sites with javascript code ==
=== Ressource sites with tutorials and help ===
 
* [http://www.quirksmode.org/ Quirksmode CSS and Javascript tips] by Peter Paul Koch. Tutorial and examples, Compatibility tables.
* [http://www.webmonkey.com/webmonkey/programming/javascript/index.html Webmonkey: Javascript collection]. Links and good but outdated tutorials.
* [http://www.webreference.com/programming/javascript/ JavaScript tutorials at webreference] (Lots !)
 
=== Sites with javascript code ===


(see also tutorials above !)
(see also tutorials above !)
Line 96: Line 92:
* [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.mozilla.org/js/scripting/ Mozilla's JavaScript Scripting Resources] A short list of good links
* [http://www.mozilla.org/js/scripting/ Mozilla's JavaScript Scripting Resources] A short list of good links
* [http://dmoz.org/Computers/Programming/Languages/JavaScript/ ] DMoz JavaScript (Big Index)
 
* [http://www.irt.org/script/faq.htm 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) ([http://www.irt.org/articles/script.htm articles])
* [http://www.inquiry.com/techtips/js_pro/ JavaScript Pro]: FAQ, informations et ressources (niveau moyen)  
* [http://www.inquiry.com/techtips/js_pro/ JavaScript Pro]<nowiki>: FAQ, informations et ressources (niveau moyen) </nowiki>
 
* [http://www.webreference.com/tools/browser/javascript.html Java Script Browser Sniffer] from webreference.com, see also: [http://webreference.com/js/tips/001125.html Sniffing for Netscape 6]
* [http://www.webreference.com/tools/browser/javascript.html Java Script Browser Sniffer] from webreference.com, see also: [http://webreference.com/js/tips/001125.html Sniffing for Netscape 6]
* [http://www.webreference.com/js/ Doc JavaScript] (advanced)
* [http://www.webreference.com/js/ Doc JavaScript] (advanced)
* [http://www.dynamicdrive.com/ Dynamic Drive]<nowiki>: DHTML et autres trucs non standard, � utiliser avec pr�caution </nowiki>
* [http://www.dynamicdrive.com/ Dynamic Drive]<nowiki>: DHTML et autres trucs non standard, � utiliser avec pr�caution </nowiki>
* [http://javascript.internet.com/toc.html The JavaScript Source] a nice resource with lots of Cut &amp; Paste javascript examples
* [http://javascript.internet.com/toc.html The JavaScript Source] a nice resource with lots of Cut &amp; Paste javascript examples
* [http://www.scriptsearch.com/JavaScript/ Scriptsearch]. Large collection of Scripts (also Tutorials, etc.)
* [http://www.scriptsearch.com/JavaScript/ Scriptsearch]. Large collection of Scripts (also Tutorials, etc.)
* [http://dir.yahoo.com/Computers_and_Internet/Programming_and_Development/Languages/JavaScript/ Yahoo's js directory] (big meta list)
* [http://dir.yahoo.com/Computers_and_Internet/Programming_and_Development/Languages/JavaScript/ Yahoo's js directory] (big meta list)
* [http://developer.netscape.com/tech/javascript/index.html DevEdge Online Javascript]. Main Javascript Page at Netscape: Examples, newsgroups, manuals, etc. (RECOMMENDED but advanced)
* [http://developer.netscape.com/tech/javascript/index.html DevEdge Online Javascript]. Main Javascript Page at Netscape: Examples, newsgroups, manuals, etc. (RECOMMENDED but advanced)
== Exemples ==


* [http://www.quirksmode.org/book/examplescripts.html ppk on JavaScript - the example scripts]
* [http://www.quirksmode.org/book/examplescripts.html ppk on JavaScript - the example scripts]
*
== Junk to sort out ==
(in french mostly / en fran�ais) Vous pouvez voir une [http://tecfa.unige.ch/guides/js/slides/intro/index.htm petite présentation] (slides utilisés pour le cours [http://tecfa.unige.ch/tecfa/teaching/E72b/E72b-overview.html UV22]). <br /> 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'', ...
* [http://tecfa.unige.ch/tecfa/teaching/staf13/biblio-overview.html Staf 13: Bibliographie de base]<nowiki>: ouverture d'une ptite fen�tre avec un ancre interne pass� en argument </nowiki>
* [ex-intro/ Exemples Javascript I]<nowiki>: Contient des exemples simples utilis�s pour introduire les notions de base. </nowiki>
* [exemples/sommaire.html Exemples Javascript II]<nowiki>: 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) </nowiki>
* [../java/tecfaman/code/ Exemples III (r�pertoire)] du Tecfa Javascript Manuel.
* La [http://www.dannyg.com/javascript/ collection] de Danny Goodman.
* [http://www.calpoly.edu/~dpopeney/javascript.html 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)
* [http://www.livesoftware.com/jrc/index.html Live Software's]<nowiki>: resource center, quelques exemples (niveau avanc�) </nowiki>
* [http://www.trailerpark.com/phase1/jnance/answers.html about javascript, a history and primary sources] (peu d'info)
* [http://webreference.com/tools/browser/ 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 [http://tecfa.unige.ch/~roiron/staf17/tabloptions.htm cursus de formation � distance] (tutoriel-web, en l'occurence pour apprendre html, ici les tableaux) . Voir aussi le [http://tecfa.unige.ch/etu/LME/9798/campos_clerc/acosfinal/htmlfiles/jeux.html 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 [http://developer.netscape.com/docs/examples/javascript/browser_type.html 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 [http://tecfa.unige.ch/~roiron/ 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 [http://tecfa.unige.ch/~roiron/copain.htm 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 [http://www.traveling-doctor.com/docvac/FR/sommaire/ vous faire changer de site] (toujours sans cliquer ;) <br /> On peut �galement faire [http://tecfa.unige.ch/~roiron/testscrolly.htm scroller un message] sur la ''widow.status'' bar (un peu stupide) <br /> 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). <br /> On peut obtenir quelques [http://tecfa.unige.ch/~roiron/info_sur_vous.htm informations] sur votre browser et la version avec laquelle vous travaillez. <br /> J'ai réuni quelques [http://tecfa.unige.ch/~roiron/hack/ exemples de code] que j'ai produit et qui peuvent servir tel quel (cut &amp; paste) <br /> Voici un code que j'aimerais bien avoir fait: une [http://tecfa.unige.ch/~roiron/staf17/color/colortst.htm 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 [http://tecfa.unige.ch:7778/4159 interfa�age de notre moo] (alors que java le permet). Pour plus de détails concernant ces différences, voir la [http://www.irt.org/java/jvsjs.htm#1 FAQ Java] de IrtOrg
=== Exemples utiles pour l'exercice de programmation STAF-14 ===
(sans mise � jour depuis plusieurs ann�es !!)
# [exemples/interactif.html Formulaire interactif] (version "onClick")
# [exemples/interactif2.html Formulaire interactif] (version qui interroge le formulaire)
# [exemples/createw.html Cr�ation d'une nouvelle fen�tre] (avec formulaire et une ligne de texte)
# [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 [http://tecfa.unige.ch/tecfa-people/tecfa-people.html#stud Promotions]
* [http://tecfa.unige.ch/~roiron/staf14/boire.htm Boire ou conduire] par Cyril Roiron: formulaire calcul avec instructions
* [http://tecfa.unige.ch/staf/staf9698/jaboulay/public_html/staf14/quest2.htm Co�t d'une voiture] par Gael Jaboulay: formulaire calcul
* [http://tecfa.unige.ch/staf/staf9698/midenet/choixanne.html L'homme de votre vie] par Anne Midenet: quiz avec images
* [http://tecfa.unige.ch/staf/staf9698/mullerc/17/moo0201ex01.html Moo tutorial] by Chris Muller: utilisation de JS dans un tutoriel
* [http://tecfa.unige.ch/staf/staf9698/dago/staf14/Budfam4.html Budget familial] par Benoit Dago: formulaire calcul
* [http://tecfa.unige.ch/staf/staf9698/shubber/stafs/question2.html Questionnaire sur la Po�sie du XIX�me si�cle] par Yasmin Shubber: quiz/test
* [http://tecfa.unige.ch/staf/staf9597/pilard/kj/kjtest-bon1.html Votre profil kiwajuniorien] par Nathalie Pilard: test
* [http://tecfa.unige.ch/~roiron/ Home Page de Cyril Roiron], par exemple la barre de navigation ou l'image Tecfa au milieu de la page


[[Category:links]]
[[Category:links]]
[[Category:JavaScript]]
[[Category:JavaScript]]
[[fr:JavaScript]]

Revision as of 15:37, 3 April 2008

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)

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

old-style JavaScript

(but useful)

JavaScript and DOM tutorials

Ajax and DHTML tutorials

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

Ressource sites with tutorials and help

Sites with javascript code

(see also tutorials above !)

  • Dynamic Drive: DHTML et autres trucs non standard, � utiliser avec pr�caution
  • Scriptsearch. Large collection of Scripts (also Tutorials, etc.)
Retrieved from "https://edutechwiki.unige.ch/mediawiki/index.php?title=JavaScript_links&oldid=17198"