« STIC:STIC I - exercice 3 (Volt) » : différence entre les versions

De EduTech Wiki
Aller à la navigation Aller à la recherche
mAucun résumé des modifications
Ligne 45 : Ligne 45 :
== Activité en salle de classe ==
== Activité en salle de classe ==


Tâche:
===Programme===
* Faire fonctionner le code ci-dessous
* Y apporter des modifications


Ce type d'exemple est expliqué  [Tutoriel JavaScript de base[]]
* 09:00 - 09:30 : présentation de JavaScript dans le contexte du développement web
* 09:30 - 10:30 : introduction à la syntaxe de JavaScript
* -- pause --
* 11:00 - 11:45 : JavaScript et le DOM (+ présentation Codepen.io)
* 11:45 - 12:30 : trasnfert de connaissances, JavaScript avec CSS3 et SVG


'''Chablon de base manipuler un élément HTML'''
====Présentation de JavaScript====
<source lang="JavaScript">
<!DOCTYPE html>


</source>
Brève mise en contexte de JavaScript dans le développement web :


'''Enregistrement d'un gestionnaire d'événement façon "moderne"/ActionScript'''
* Développement frontend et backend
<source lang="JavaScript">
* Importance de l'environnement
<!DOCTYPE html>
* JavaScript côté client
<html>
  <head>
      <title>Event handling</title>
      <script type = "text/javascript">
        window.onload = start;
        // var my_para_button  ="";


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


function modifyText() {
Survol des éléments fondamentaux du langage :
  // get the box
  var my_content = document.getElementById("content");
  my_content.innerHTML = "That was so good";
}
      </script>
  </head>


  <body>
* Syntaxe
      <div id="box">
* Éléments principaux (variables, opérateurs, types de données, structure de contrôle, boucles, ...)
        <p style="background-color:yellow" id="content">CLICK ME !</p>
 
      </div>
Références :
  </body>
 
</html>
* [[Tutoriel JavaScript de base]]
</source>
 
Source: http://tecfa.unige.ch/guides/js/ex-intro/event-handler.html
====JavaScript et le DOM====
 
Interaction de JavaScript avec le navigateur web :
 
* L'objet global window
* Inclure JavaScript dans une page HTML
* Manipulation du DOM
* Gestionnaire d'événements
 
Workshop Codepen.io :
 
* Présentation Codepen.io
* Fork et travail sur les exemples
 
Références :
 
* [[Tutoriel JavaScript de base]]
* Exemples Codepen.io :
** [http://codepen.io/mafritz/pen/vNRVxw Simple manipulation du DOM avec JavaScript]
** [http://codepen.io/mafritz/pen/VvxwMa Événements liés à la souris]
** [http://codepen.io/mafritz/pen/OyZJvx L'éléments this dans le DOM]
** [http://codepen.io/mafritz/pen/PPeodJ JavaScript et formulaires HTML]
 
====Trasfert de connaissances : JavaScript avec CSS3 et SVG====
 
Utiliser JavaScript avec :
 
* SVG :
** [http://tecfa.unige.ch/perso/mafritz/teaching/stic-1/svg/javascript-svg-ex1.html Ajouter des éléments SVG]
** [http://tecfa.unige.ch/perso/mafritz/teaching/stic-1/svg/javascript-svg-ex2.html Rendre des éléments SVG interactifs]
** [http://codepen.io/mafritz/pen/gazXQR Simple animation]
* CSS
** [http://codepen.io/mafritz/pen/OyZzpw Utiliser dynamiquement les classes CSS avec JavaScript]
** [http://codepen.io/mafritz/pen/meLqYw Animation CSS3 avec classes et @keyframes]


== Liens ==
== Liens ==

Version du 29 octobre 2015 à 15:01

Cette page fait partie des cours STIC I et STIC II

STIC

Enoncée du Projet 3

Ce projet vous permet:

  • d'apprendre quelques notions de JavaScript et de la programmation en générale
  • comprendre la logique de la programmation DOM et des gestionnaire d'événements
  • d'apprendre quelques concepts d'animation CSS3 ou alors de continuer avec SVG

Tâche

Imaginez un design pédagogique qui nécessite des interactions suivies d'une animation ....

  • Créez une page HTML5 qui contient au moins deux éléments interactifs (l'utilisateur peut cliquer dessus, bouger la souris dessus, etc., à votre choix)
  • Ajoutez au moins un élément de changement de contenu suite à une interaction.
  • Ajoutez au moins éléments d'animation suite à une interaction
  • Le tout doit servir à un objectif (pas juste votre objectif d'apprentissage !!)

Il faut également contribuer au wiki (comme pour tous les exercices)

Outil

  • Editeur de programmation

Contraintes

  • Contenu de la page selon vos envies (mais en rapport avec une thématique MALTT)
  • La page doit soit contenir au moins 2 éléments interactifs (par exemple des boutons), une zone de texte modifiable, une animation.
  • La page doit être bien formée et valide.
  • Vous pouvez utiliser du clipart (SVG ou autre) fait par d'autres, mais à condition d'indiquer la source dans votre page HTML et dans le rapport.

Le rapport:

  • Titre, auteur et date
  • Liens vers le résultat (fichier HTML) et indiquez avec quelle configuration on peut voir votre contenu.
  • Objectifs de la page: Elle sert à quoi / quelle population ? (Evitez de parler de vos objectifs d'apprentissage....)
  • Discussion du design
  • La production: bref résumé de la démarche
  • Difficultés, auto-évaluation, remarques
  • Ressources utilisées, bibliographie.

Emplacement du rapport avec les liens vers le dispositif html/svg: 

/etu-maltt/utopia/<login>/stic-1/ex3/

Activité en salle de classe

Programme

  • 09:00 - 09:30 : présentation de JavaScript dans le contexte du développement web
  • 09:30 - 10:30 : introduction à la syntaxe de JavaScript
  • -- pause --
  • 11:00 - 11:45 : JavaScript et le DOM (+ présentation Codepen.io)
  • 11:45 - 12:30 : trasnfert de connaissances, JavaScript avec CSS3 et SVG

Présentation de JavaScript

Brève mise en contexte de JavaScript dans le développement web :

  • Développement frontend et backend
  • Importance de l'environnement
  • JavaScript côté client

Introduction à la syntaxe de JavaScript

Survol des éléments fondamentaux du langage :

  • Syntaxe
  • Éléments principaux (variables, opérateurs, types de données, structure de contrôle, boucles, ...)

Références :

JavaScript et le DOM

Interaction de JavaScript avec le navigateur web :

  • L'objet global window
  • Inclure JavaScript dans une page HTML
  • Manipulation du DOM
  • Gestionnaire d'événements

Workshop Codepen.io :

  • Présentation Codepen.io
  • Fork et travail sur les exemples

Références :

Trasfert de connaissances : JavaScript avec CSS3 et SVG

Utiliser JavaScript avec :

Liens

Technique

JavaScript
GSAP
Autre

Théorie

Récupérée de « https://edutechwiki.unige.ch/fmediawiki/index.php?title=STIC:STIC_I_-_exercice_3_(Volt)&oldid=49487 »