« STIC:STIC I - exercice 3 (Wall-e) » : différence entre les versions
Aller à la navigation
Aller à la recherche
(Page créée avec « {{stic12}} <categorytree mode="pages" depth="0" style="float:right; clear:right; margin-left:3px; border:1px solid gray; padding:0.7ex; background-color:#f9f9f9;">STIC</ca... ») |
Aucun résumé des modifications |
||
Ligne 4 : | Ligne 4 : | ||
== Introduction == | == 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 | |||
[http://tecfa.unige.ch/perso/mafritz/teaching/stic-1/slides/Introduction%20%C3%A0%20JavaScript.pdf 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 : | |||
** [http://codepen.io/mafritz/pen/vNRVxw Simple manipulation du DOM avec JavaScript] | |||
** [http://codepen.io/mafritz/pen/NGzpEo É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] | |||
====Transfert 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] |
Version du 28 septembre 2016 à 12:54
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 :
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 :
Transfert de connaissances : JavaScript avec CSS3 et SVG
Utiliser JavaScript avec :