STIC:STIC II - exercice 16 (Tetris)

Cette page fait partie des archives des cours Cours STIC (STIC I, STIC II,STIC III,STIC IV)

STIC

Archives STIC

Chantier STIC

Initiation à la pensée computationnelle avec JavaScript

Productions STIC

Ressources STIC

STIC:Contribution Wiki

STIC:Rapport STIC I et II

STIC:STIC I (Edda)

STIC:STIC I - Atelier technique 2

STIC:STIC I - exercice 1 (Drakkar)

STIC:STIC I - exercice 1 (Edda)

STIC:STIC I - exercice 2 (Edda)

STIC:STIC I - exercice 3 (Edda)

STIC:STIC I - exercice 4 (Edda)

STIC:STIC I - exercice 5 (Edda)

STIC:STIC I - exercice 6 (Edda)

STIC:STIC III

STIC:STIC III (2022)

STIC:STIC III (2022)/Exploration des Problématiques Liées aux Ponts et Détails

STIC:STIC IV

Enoncé de l'exercice 16

Cet exercice du cours 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 et DHTML

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 multiples.
• Vous pouvez aussi programmer un outil interactif, par exemple une visualisation de fonctions mathématiques ou encore une page "multimédia" avec des animations.
• Une autre possibilité consiste à jouer avec un robot de conversation (c.f. l'exercice 18 de la promotion Stella)

Implémentation:

• Vous avez le droit d'utiliser une librairie JavaScript prête à être utilisée (meilleur conseil pour les gens qui n'ont pas le temps d'apprendre à programmer, voir les liens dans EduTechWiki (en)
• ... ou encore une librairie JavaScript pour développeurs, par exemple en:D3.js, JavaScript InfoVis Toolkit, Raphaël, ou encore GreenSock (la soeur de la variante AS déjà été vue en STIC I)

• Emplacement du rapport

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

Exercices alternatifs (une personne / page)

A ne pas confondre avec la contribution wiki obligatoire. Ici il s'agit d'une contribution substantielle.

• 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 par exemple les pages en:DHTML et en:Javascript tutorial - basics par exemple. Sinon, à discuter....

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

• Améliorer l'article Tutoriel SVG interactif et animé avec DOM

• Présenter l'utilisation d'une librairie de développement ou une librairie d'application

Outils

• Un éditeur HTML/JavaScript

Contraintes

1. Le choix du thème n'a pas beaucoup d'importance, enfin il faut un sujet pédagogique cohérent.
2. L'utilisation doit être ergonomique
3. Il faut un minimum de traitement (pas juste utiliser JS pour ouvrir un popup ou un lien)
4. dispositif: soit HTML, XHTML ou SVG en input
5. 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).
6. 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

Selon la grille habituelle. A vérifier:

1. le script marche
2. validité de (X)HTML (et SVG ou autres formats utilisés)
3. créativité
4. utilité
5. ergonomie de la page
6. respect de principes de design (par ex. "instructional design pour des QCM)
7. points bonus: tester si l'utilisateur a bien rempli le formulaire, utilisation de nouvelles fenêtres html pour le feedback, etc.
8. contribution wiki
9. rapport (surtout les objectifs et la présentation/discussion du design)

Activités en classe

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

Chablon de base

<!DOCTYPE html>

<html>
   <head>
      <title>Object Model</title>
      <script type = "text/javascript">
         window.onload = start;
         function start() 
         {
            var my_para = document.getElementById("p1");
            alert( "Paragraph contents : " + my_para.innerHTML );
         }
      </script>
   </head>

   <body>
      <p id = "p1">Welcome to our Web page!</p>
   </body>
</html>

Enregistrement d'un gestionnaire d'événement façon "moderne"/ActionScript

<!DOCTYPE html>
<html>
   <head>
      <title>Event handling</title>
      <script type = "text/javascript">
         window.onload = start;
         // var my_para_button  ="";

	 function start()  {
	   // put an event handler on the div box
	   var my_para_button = document.getElementById("box");
	   my_para_button = addEventListener("click", modifyText);
         }

	 function modifyText() {
	   // get the box
	   var my_content = document.getElementById("content");
	   my_content.innerHTML = "That was so good";
	 }
      </script>
   </head>

   <body>
      <div id="box">
         <p style="background-color:yellow" id="content">CLICK ME !</p>
      </div>
   </body>
</html>

Source: http://tecfa.unige.ch/guides/js/ex-intro/event-handler.html

• 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
  • 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 DOM
  • http://tecfa.unige.ch/guides/svg/ex/svg-dom/omme-dom1.svg

• 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 ....)
• Visualization Libraries_for_programmers

Wikipedia

• JavaScript syntax
• .... et pleins d'autres ! Wikipedia.fr contient aussi plusieurs entrées.

Outils

• Extensions navigateur

Slides en Anglais

• js-intro.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

• Level 0 DOM et sa traduction française par Peter-Paul Koch
• W3C DOM-Introduction par Peter-Paul Koch
• Introduction (Gecko Dom reference) - Introduction (traduction française).
• HTML DOM Tutorial (W3Schools)

Event handlers à la ActionScript

• element.addEventListener (Mozilla manual)
• DOM events (How to create, JavaScript tutorials)
• Event compatibility tables (Quirksmode)

JavaScript - Introductions ailleurs

• C.f. en:JavaScript

Javascript text color edit

• Change color text
• Animated color text