JavaScript links

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

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 !

JavaScript Reference

  • JavaScript at Mozilla developper center (JS 1.5 JS 1.6 updates)
  • JavaScript at Mozilla developper center (JS 1.5 JS 1.6 updates) en fran�ais (moins complet ...)
  • [jsguide15/ OLD 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 traditional JavaScript objects, use the DOM specs for DOM objects.
  • [jsref15 OLD JavaScript 1.5 Reference Guide]
  • [e262-pdf.pdf ECMA-262 Specification ] (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, etc.)
  • W3C Document Object Model (DOM) Activity Statement (points to all relevant DOM documents: E.g. the Document Object Model (DOM) Level 1 Specification a platform- and language-neutral interface that allows programs and scripts to dynamically access the content and structure of documents. Document Object Model (DOM) Level 2 Core Specification allows to update the structure of documents. ETC.
  • History: For older NS 4.7 browsers (but more practical than more modern DOM-less versions ...): [jsguide13/index.htm JavaScript 1.3 Guide] and [jsref13/index.htm JavaScript 1.3 Reference Guide] - OUTDATED, but still on of the best references on how to use the "standard" JavaScript Objects.
  • History: For older NS 4.0 browsers: [jsguide12/index.htm JavaScript 1.2 Guide] - [jsguide12/jsguide.pdf PDF Version] and [jsref12/index.htm JavaScript 1.2 Reference Guide] - ([jsref12/jsref.pdf PDF Version])
  • Very old Web History (NS 1 & 2): [jsguide11/ JavaScript 1.0/1.1 Guide and Reference Manual] - [js10.pdf PDF (!) Version]

DOM Reference

FAQs and Short References

General on-line tutorials

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.

Links

(needs some sorting)

Sites with javascript code

(see also tutorials above !)

Exemples

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

Javascript n'a rien a voir avec Java (le langage de Sun). Les seuls points communs que l'on peut leur trouver est leur ressemblance syntaxique et leur capacit� � d�livrer un contenu "ex�cutable" � travers le r�seau. Toutefois, on peut dire qu'ils se compl�tent relativement bien quant � leur fonctionnalit�s: javascript peut contr�ler le comportement du browser et de son contenu mais il ne permet pas, par exemple, de g�rer dynamiquement des objets graphiques, alors que java le permet.

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 !!)

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