Initiation à la pensée computationnelle avec JavaScript

Cet article est en construction: un auteur est en train de le modifier.

En principe, le ou les auteurs en question devraient bientôt présenter une meilleure version.

---

Initiation à la pensée computationnelle avec JavaScript
▬▶
⚐ brouillon	☸ débutant
⚒ 2018/06/14
Catégorie: JavaScript

Introduction

L'initiation à la pensée computationnelle avec JavaScript est une collection de ressources théoriques, techniques et pratiques visant en premier lieu la compréhension de l'univers computationnel au sens large. L'utilisation de JavaScript, langage de programmation très répandu au niveau des pages et applications web, représente dans cette perspective l'outil cognitif qui accompagne ce parcours d'initiation, destiné principalement à des étudiants et enseignants qui n'ont pas un background informatique.

Les ressources ont été originairement conçues en tant que support du cours Sciences et Technologies de l'Information et de la Communication (STIC) du Master of Science in Learning and Teaching Technologies (MALTT) à l'Université de Genève. Les contenus sont pour la plupart des contributions originales créées par Mattia A. Fritz, sous la supervision du Prof. Daniel K. Schneider. Dans l'esprit d'EduTechWiki, cependant, les ressources peuvent être améliorées par tous les utilisateurs et des contributions précieuses ont été faites par les étudiantes des différentes volées du Master MALTT qui ont suivi le cours STIC. Tout le matériel qui accompagne les pages, notamment les exemples d'applications interactives, est également à disposition à travers des repositories GitHub. Sauf exception clairement indiquée, tout le matériel est disponible sous licence MIT ou Creative Commons pour des utilisations non-commerciales. La seule attribution de la source est démandée.

Pour sa nature modulaire, participative et évolutive, l'initiation à la pensée computationnelle avec JavaScript peut être utilisée en tant que support à un cours d'introduction ou de sensibilisation à la programmation, mais également comme ressource d'auto-apprentissage pour toute personne intéressée à la compréhension du numérique.

Objectifs

Contrairement à d'autres ressources sur le sujet qui visent promouvoir la pensée computationnelle en tant que compétence universelle et applicable à tout domaine, cette initiation se "contente" d'appliquer la pensée computationnelle au domaine qui lui est plus proche : la computation. Dans l'imaginaire collectif il y a souvent une dichotomie qui divise les utilisateurs avec des compétences informatiques en deux groupes :

• Les power user qui sont perçus comme des experts dans la manipulation d'une ou plusieurs applications (e.g. Suite Microsoft Office, Photoshop, Édition vidéo, ...) ;
• Les programmateurs/développeurs qui, grâce à une prédisposition naturelle à la pensée logique et mathématique, sont perçus comme des experts dans le codage.

Ces deux figures sont en réalité l'expression d'un même principe fondamental qui consiste à instruire une machine pour qu'elle fasse ce que l'on veut. Que ce soit à travers des lignes de code ou des manipulations sur des interfaces utilisateur, le résultat est le même : on déclenche de la computation pour que les instructions atteignent le résultat souhaité. Grâce aux progrès en termes de puissance des ordinateurs, souvent ce mécanisme sous-jacent n'est plus perceptible. Néanmoins, il est présent et, de sa nature mécanique, il nécessite de temps, d'énergie et d'un dispositif physique (i.e. du hardware) pour être exécuté.

Nous considérons l'initiation achevée si, en partant de connaissances informatiques très faibles, l'utilisateur arrive à se construire des représentations mentales du fonctionnement des agents computationnels au sens large (ordinateurs, applications, mais également objets connectés, etc.). Pour atteindre cet objectif, nous sommes de l'avis - corroboré d'ailleurs par la littérature scientifique présentée dans le premier module Aspects théoriques de la pensée computationnelle - qu'une exposition à la programmation à travers du code représente la meilleure manière pour consolider les notions théoriques présentées. Pour cette raison, nous utilisons JavaScript en tant que langage de référence pour appliquer, de manière concrète, les aspects théoriques liés à la pensée computationnelle.

JavaScript présente une série d'avantages par rapport à d'autres choix possibles. Tout d'abord, il est l'un des langages les plus répandus, grâce notamment à son intégration avec les pages web. Deuxièmement, en raison de sa popularité, il est désormais utilisé également dans d'autres environnements comme le développement côté serveur, le développement de logiciels desktop, ou encore la robotique et l'internet des objets.

Bien que tout ces cadres d'utilisation soient abordés dans les ressources, la voie la plus simple pour initier des novices est sans doute le développement de petits pages web interactives. À ce propos, les premiers modules de l'initiation présentent des exemples concrets d'applications développées avec JavaScript, dont le code source est disponible dans un repository GitHub associé à la page de la ressource. Grâce à l'analyse, la réplique et l'extension de ces exemples, les utilisateurs pourront :

1. Observer l'implémentation directe des notions théoriques dans le code source de petits jeux ou applications ;
2. Acquérir des compétences procédurales qui peuvent représenter des bases solides pour appliquer eux-mêmes, par la suite et dans une perspective end-user development, les connaissances acquises.

Prérequis

Des connaissances de bases en HTML5 et CSS sont nécessaires surtout pour comprendre et répliquer les exemples d'applications proposées. Il s'agit vraiment de connaissances de base, car les concepts fondamentaux expliquées dans l'initiation sont indépendant de la complexité ou qualité graphique des interfaces. Nous le rappelons, les exemples de code sont un moyen pour consolider les principes computationnels.

Des ressources pour s'initier à HTML5 et CSS sont disponibles dans ce wiki, mais nous conseillons pour le moment de suivre plutôt les tutoriels et les ressources mises à disposition par la Mozilla Developer Network. Pour le niveau de base requis pour suivre l'initiation, le tutoriel suivant est plus que suffisant :

Commencer avec le web

Outils nécessaires

Sauf indications spécifiques disponibles dans les ressources, vous avez besoins simplement des logiciels suivants :

• Un éditeur de texte, préférablement avec des fonctionnalités qui vous aident avec la syntaxe de JavaScript. Nous conseillons les alternatives suivantes :
  • Brackets
  • Visual studio code
• Un navigateur web avec des outils de développement. Nous conseillons Google Chrome ou Chromium.
• Des logiciels pour le traitement d'images peuvent également être nécessaires ou outiles. Nous conseillons :
  • Inkscape pour les images vectorielles
  • Gimp pour les images matricielles

Structure

Les ressources sont organisées en 6 modules principaux :

1. Aspects théoriques de la pensée computationnelle

   Ce module propose un aperçu du concept de pensée computationnelle qui permet d'articuler les notions de programmation, informatique et computation. Ensuite, une introduction à la programmation est proposée de manière conceptuelle, sans la présence de code.

2. Concepts de base de JavaScript

   Ce module illustre d'abord les différences facettes de JavaScript en tant que langage multi-purpose. Ensuite, de manière plus pragmatique, une introduction souple au langage est proposée dans les premiers pas avec JavaScript, où l'utilisateur pourra concevoir sa première application interactive avec JavaScript. Le module présente enfin les deux grands fonctions de JavaScript, c'est-à-dire

   • La computation avec JavaScript
   • L'interactivité avec JavaScript

3. JavaScript dans le navigateur

   Ce module propose une collection de pages qui s'intèresse à l'utilisation plus répandue de JavaScript, c'est-à-dire l'implémentation de comportements dynamiques et interactifs dans les pages web qui sont accessibles à travers un navigateur web. Par exemple, le module illustre l'intégration de JavaScript avec les composantes audio et vidéo, les animations, et les représentations graphiques vectorielles avec SVG. Une partie importante de ce module est représentée par les bibliothèques JavaScript qui fournissent des fonctionnalités comme le glisser/poser.

4. JavaScript sur le serveur

   Ce module, plus avancé, illustre l'utilisation de JavaScript côté-serveur à travers l'utilisation de Node.js et Express.js. Le module inclut également une page sur Socket.io qui permet de créer des applications de type "real-time".

5. JavaScript dans d'autres environnements

   Ce module reprend certains concepts du module précédent, notamment en relation avec Node.js, et les appliques dans d'autres environnements comme le le développement de logiciels desktop, ou les les objets connectés ou la robotique.

6. Références JavaScript

   Ce dernier module présente des pages plus techniques qui approfondissent des concepts liés au langage, notamment le tutoriel JavaScript de base et le tutoriel JavaScript côté client. Une page sur JSON est également disponible.

Parcours conseillés

Les ressources peuvent être suivis dans différentes ordres, selon les objectifs et le temps à disposition. Nous proposons des parcours dans le cadre d'une utilisation en tant que support d'un cours universitaire.

Pour un cours à 3 crédits nous conseillons :

• Le module Aspects théoriques de la pensée computationnelle
• Le module Concepts de base de JavaScript

Pour un cours à 6 crédits nous conseillons :

• Le module Aspects théoriques de la pensée computationnelle
• Le module Concepts de base de JavaScript
• Une sélection de 2/3 ressources du module JavaScript dans le navigateur

Le matériel complet peut couvrir facilement 12 crédits, par exemple avec une extension du cours à 6 crédits avec l'implémentation de JavaScript côté serveur ou dans un autre environnement.

Citation

Si vous voulez citer cette oeuvre, vous avez deux options :

1. Citer l'oeuvre en général, tenant compte des possibles changements qui vont être apportés dans le temps, avec la citation "original" au projet :

   Fritz, M. A., & Schneider, D. K. (Eds.). (2018). Initiation à la pensée computationnelle avec JavaScript. EduTechWiki, TECFA, Université de Genève. Retrieved from https://edutechwiki.unige.ch/fr/Initiation_à_la_pensée_computationnelle_avec_JavaScript

2. Citer ponctuellement une ou plusieurs pages individuellement, telles qu'elles apparaissent à un moment donné dans le temps. De cette manière, vous pouvez pointer à l'URL dans l'historique qui reproduit exactement la page au moment où vous l'avez citée.
   • Pour ce faire, utilisez le lien Citer cette page dans le menu à gauche