Voir la source de STIC:STIC II - exercice 16 (Stella)

{{stic12}}
<categorytree mode="pages" depth="1" style="float:right; clear:right; margin-left:3px; border:1px solid gray; padding:0.7ex; background-color:#f9f9f9;">STIC</categorytree>
== Enoncé de l'exercice 16 ==

Cet exercice du cours [[STIC:STIC II|STIC II]] vous permet de vous familiariser
* avec le language JavaScript
* avec le DOM (Document Object Model), et notamment avec l'interface pour traiter les formulaires

=== Tâche ===

Créez une '''petite''' page (X)HTML/JavaScript de votre choix. L'utilisateur doit pouvoir rentrer des données avec un formulaire et/ou pouvoir déclencher un événement. Ensuite une application écrite avec JavaScript en fait quelque chose. La solution la plus simple consiste à programmer un petit quiz avec des questions radio à choix multiple. Alternativement, vous pouvez aussi programmer un outil interactif, par exemple exemple une visualisation de fonctions mathématiques ou encore une page "multimédia" avec des animations. Finalement, vous avez le droit d'utiliser une librairie JavaScript (meilleur conseil pour les gens qui n'ont pas le temps d'apprendre à programmer).

* Emplacement du rapport 

 /etu-maltt/nestor/<login>/stic-2/ex16/

; Exercices alternatifs (une personne / page)

* Mettre à jour la documentation JavaScript dans ce wiki. Y compris créer une bonne page "liens JavaScript". La page JavaScript elle-même devrait présenter un petit survol du langage et de ses usages.

* Créer une page spécialisée sur JavaScript. Voir les pages [[:en:DHTML]] et [[:en:Javascript tutorial - basics]] par exemple.

* Faire un article d'introduction sur l'élément Canevas de HTML5

* Améliorer l'article [[Tutoriel SVG interactif et animé avec DOM]]

=== Outils ===

* Un éditeur HTML/JavaScript

=== Contraintes ===

# Le choix du thème n'a pas beaucoup d'importance, enfin il faut un sujet pédagogique cohérent.
# L'utilisation doit être ergonomique
# Il faut un minimum de traitement (pas juste utiliser JS pour ouvrir un popup ou un lien)
# dispositif: soit HTML, XHTML ou SVG en input
# Les utilisateurs doivent recevoir un feed-back intéressant (en fonction du thème choisi). Lorsque, par exemple, il s'agit d'un test pédagogique il faut donner un bon feedback (négatif ou positif).
# Le feedback peut se faire avec une fenêtre popup, une nouvelle page ou encore via une modification du contenu de la page (c.a.d vous pouvez utiliser DHTML ou SVG dynamique).

'''Le rapport''':
* Titre, auteur et date
* Liens vers le résulat (fichier HTML et le code JavaScript)
* Objectifs du module: Il sert à quoi / quelle population ?
* La production: '''bref''' résumé de la démarche
* Difficultés, auto-évaluation, remarques
* Ressources utilisées, bibliographie.

=== Evaluation ===

# le script marche
# validité de (X)HTML (et SVG ou autres formats utilisés)
# créativité
# utilité
# ergonomie de la page
# respect de principes de design (par ex. "instructional design pour des QCM)
# points bonus: tester si l'utilisateur a bien rempli le formulaire, utilisation de nouvelles fenêtres html pour le feedback, etc.

== Activités en classe ==

La plupart de ces exemples sont utilisé dans [[:en:DHTML]] et [[:en:Javascript tutorial - basics]]

* PopUP
** http://tecfa.unige.ch/guides/js/ex-intro/fenetre.html
** http://tecfa.unige.ch/guides/js/ex/coap/week-1-2/1-6-dom-reference-modern.html

* Navigator
** http://tecfa.unige.ch/guides/js/ex/dom-intro/navigator-props.html

* Quiz simple
** http://tecfa.unige.ch/guides/js/ex-intro/test-dom.html + http://tecfa.unige.ch/guides/js/ex-intro/test-dom.js
** http://tecfa.unige.ch/guides/js/ex/coap/week-3/3-xhtml-radio-buttons.html + http://tecfa.unige.ch/guides/js/ex/coap/week-3/3-xhtml-radio-buttons.js (variante plus moderne)

* DHTML + CSS simple
** http://tecfa.unige.ch/guides/js/ex/dhtml/change-background-style.html
** [http://tecfa.unige.ch/guides/js/ex/dhtml/get-elements-by-classname.html get-elements-by-classname.html]
** http://tecfa.unige.ch/guides/js/ex/dhtml/change-style-2.html
** http://tecfa.unige.ch/guides/js/ex/tree-walking/tree-walking3.html
** http://tecfa.unige.ch/guides/js/ex/dom-animate/move-object1.html
** http://tecfa.unige.ch/guides/js/ex/dom-intro/insert4.html
* SVG dynamique simple

* SVG DOM
** http://tecfa.unige.ch/guides/svg/ex/svg-dom/xhtml-omme.xhtml

* DHTML plus compliqué (DOM 2 Events, comme dans ActionScript)
** http://tecfa.unige.ch/guides/js/ex/dhtml/examine-events-en.html

== Liens ==

; Pages edutechwiki EN
* [[:en:Javascript tutorial - basics]]
* [[:en:DHTML]] (utilisé en '''classe''')
* [[:en:HTML forms tutorial]] 
* [[:en:JavaScript links]] (bon liens tutoriels et librairies, modifié printemps 2010 ....)

; Wikipedia
* [http://en.wikipedia.org/wiki/JavaScript_syntax JavaScript syntax]
* .... et [http://en.wikipedia.org/wiki/Category:JavaScript pleins d'autres] ! Wikipedia.fr contient aussi [http://fr.wikipedia.org/wiki/Cat%C3%A9gorie:JavaScript plusieurs entrées].

; Outils
* [[:en:Web_authoring_system#Useful_browser_extensions|Extensions navigateur]]

; Slides en Anglais
* [http://tecfa.unige.ch/guides/te/files/js-intro.pdf js-intro.pdf] 
* [http://tecfa.unige.ch/guides/te/files/dyn-html.pdf dyn-html.pdf] (utilisé en '''classe''')

; Slides en français (assez dépassés ...)

* http://tecfa.unige.ch/guides/tie/html/html-forms/html-forms.html (rappel)
* http://tecfa.unige.ch/guides/tie/html/js-intro/js-intro.html (utilisé en '''classe''')
* http://tecfa.unige.ch/guides/tie/html/xml-dyn/xml-dom.html (à option)
* http://tecfa.unige.ch/guides/tie/html/js-dom/js-dom.html

; DOM - Introductions ailleurs 

* [http://www.quirksmode.org/js/dom0.html Level 0 DOM] et sa [http://www.misfu.com/static/Javascript/dom0.html traduction française] par Peter-Paul Koch
* [http://www.quirksmode.org/dom/intro.html W3C DOM-Introduction] par Peter-Paul Koch
* [https://developer.mozilla.org/en/Gecko_DOM_Reference/Introduction Introduction] (Gecko Dom reference) -  [https://developer.mozilla.org/fr/R%C3%A9f%C3%A9rence_du_DOM_Gecko/Introduction Introduction] (traduction française).
* [http://www.w3schools.com/htmldom/default.asp HTML DOM Tutorial] (W3Schools)

; JavaScript - Introductions ailleurs
* C.f. [[:en:JavaScript]]