STIC:STIC I - exercice 3 (Wall-e)

De EduTech Wiki
Aller à la navigation Aller à la recherche

Cette page fait partie des cours STIC I et STIC II

STIC

Introduction

Cet exercice introduit la sensibilisation à la programmation avec JavaScript. Les concepts fondamentaux de la programmation seront abordés, et ensuite appliqués à l'interactivité des pages web.

Connaissances/compétences envisagées

À l'issue de cet exercice vous devez avoir acquis les connaissances/compétences suivantes :

  • Connaître les bases de la programmation et ses composantes principales (variables, types de données, structure de contrôle, etc.)
  • Identifier des mécanismes de Input/Output et les rapporter à des actions de l'utilisateur, du système, etc.
  • Reconnaître un gestionnaire d'événements et le type d'événement déclencheur
  • Connaître les bases de la syntaxe JavaScript (fondamnteaux du langage)
  • Comprendre l'implémentation de JavaScript dans un navigateur web et sur des pages web dynamiques
  • Savoir créer des interactions simples à travers la combinaison gestionnaire d'événement + manipulation du DOM

Prérequis

Lectures conseillées (sans code !!!) :

Logiciels utilsés pendant l'activité en salle de classe :

  • Brackets
  • Outils de développement Google Chrome

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 : transfert 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

Slides présentation (format PDF)

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 :

Transfert de connaissances : JavaScript avec CSS3 et SVG

Utiliser JavaScript avec :

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