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

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 !!!) :

• Introduction à la programmation (environ 20 minutes)
• JavaScript (environ 10 minutes)

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 :

• Tutoriel JavaScript de base

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 :
  • Simple manipulation du DOM avec JavaScript
  • Événements liés à la souris
  • L'éléments this dans le DOM
  • JavaScript et formulaires HTML

Transfert de connaissances : JavaScript avec CSS3 et SVG

Utiliser JavaScript avec :

• SVG :
  • Ajouter des éléments SVG
  • Rendre des éléments SVG interactifs
  • Simple animation
• CSS
  • Utiliser dynamiquement les classes CSS avec JavaScript
  • Animation CSS3 avec classes et @keyframes