« JavaScript » : différence entre les versions

De EduTech Wiki
Aller à la navigation Aller à la recherche
Ligne 12 : Ligne 12 :
* [http://developer.mozilla.org/fr/docs/JavaScript JavaScript] (Mozilla developer center). Comprend des manuels de référence.
* [http://developer.mozilla.org/fr/docs/JavaScript JavaScript] (Mozilla developer center). Comprend des manuels de référence.
* [http://developer.mozilla.org/fr/docs/R%C3%A9f%C3%A9rence_du_DOM_Gecko Référence du DOM Gecko]. Documentation sur l'utilisation de JavaScript dans les navigateurs comme FireFox, Mozilla, etc.
* [http://developer.mozilla.org/fr/docs/R%C3%A9f%C3%A9rence_du_DOM_Gecko Référence du DOM Gecko]. Documentation sur l'utilisation de JavaScript dans les navigateurs comme FireFox, Mozilla, etc.
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êtres, 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'', ...


=== Tutoriels ===
=== Tutoriels ===
Ligne 17 : Ligne 25 :
* [http://developer.mozilla.org/fr/docs/Une_r%C3%A9introduction_%C3%A0_JavaScript Une réintroduction à JavaScript] par Simon Willison (traduction). Petite introduction technique pour personnes ayant déjà qqs. compétences en programmation.
* [http://developer.mozilla.org/fr/docs/Une_r%C3%A9introduction_%C3%A0_JavaScript Une réintroduction à JavaScript] par Simon Willison (traduction). Petite introduction technique pour personnes ayant déjà qqs. compétences en programmation.


=== JUNK à caser ===
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.
* [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 !!)
# [http://tecfa.unige.ch/guides/js/exemples/interactif.html Formulaire interactif] (version "onClick")
# [http://tecfa.unige.ch/guides/js/exemples/interactif2.html Formulaire interactif] (version qui interroge le formulaire)
# [http://tecfa.unige.ch/guides/js/exemples/createw.html Création d'une nouvelle fenétre] (avec formulaire et une ligne de texte)
# [http://tecfa.unige.ch/guides/js/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
[[en:JavaScript]]
[[en:JavaScript]]

Version du 3 avril 2008 à 15:32

Cet article est une ébauche à compléter. Une ébauche est une entrée ayant un contenu (très) maigre et qui a donc besoin d'un auteur.

Définition

JavaScript est un langage de script léger, orienté objet et multiplateform (Mozilla developer center)

Voir aussi en:ECMASCript et en:JavaScript links

Liens

Manuels

  • JavaScript (Mozilla developer center). Comprend des manuels de référence.
  • Référence du DOM Gecko. Documentation sur l'utilisation de JavaScript dans les navigateurs comme FireFox, Mozilla, etc.

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êtres, 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, ...

Tutoriels

JUNK à caser

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.

  • 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. Formulaire interactif (version "onClick")
  2. Formulaire interactif (version qui interroge le formulaire)
  3. Création d'une nouvelle fenétre (avec formulaire et une ligne de texte)
  4. Chatter Bot (regexp demo)

Exemples produits par nos étudiants

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