Initiation à la pensée computationnelle avec JavaScript

Initiation à la pensée computationnelle avec JavaScript
▬▶
⚐ à finaliser	☸ débutant
⚒ 2023/02/10
Catégorie: JavaScript

Auteur: Mattia A. Fritz, TECFA, Faculté de Psychologie et des sciences de l'éducation, Université de Genève.

Suggestion de citation: Mattia A Fritz (date), Initiation à la pensée computationnelle avec JavaScript. EduTech Wiki. Consulté le .... à

https://edutechwiki.unige.ch/fr/EduTech Wiki:Livres/Initiation_à_la_pensée_computationnelle_avec_JavaScript

Introduction

"Je pense, donc JS"

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 étudiant-es et enseignant-es 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.

Pensée computationnelle en sciences sociales

L'Initiation à la pensée computationnelle avec JavaScript s'inscrit dans le contexte du projet Pensée computationnelle en sciences sociales qui propose d'autres ressources dont l'objectif est de tirer avantage de la pensée computationnelle dans les sciences sociales. Pour plus de détails voir :

• Pensée computationnelle en sciences sociales

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é. Selon cette perspective, pour instruire une machine il ne faut pas forcément une prédisposition naturelle, mais il faut sans doute une idée ou un besoin qui puisse être transformé en instructions afin que la machine les exécute. Pour passer d'une idée qui réside dans la pensée humaine à sa représentation concrète sur un dispositif numérique, il faut utiliser la pensée computationnelle. Cette forme de pensée est à la base d'un processus d'automatisation qui permet de transformer des idées en algorithmes, des algorithmes en code binaire, du code binaire en opérations "physiques" qui compute le résultat. Grâce aux progrès en termes de puissance de calcul, souvent ce processus sous-jacent n'est plus perceptible. Néanmoins, il est toujours présent et il nécessite du temps, de l'énergie et un dispositif physique (i.e. du hardware) pour être exécuté.

Nous considérons l'initiation achevée si, en partant de faibles connaissances informatiques préalables  :

1. au niveau conceptuel, l'apprenant arrive à se construire des représentations mentales du fonctionnement des agents computationnels au sens large (ordinateurs, applications, mais également objets connectés, etc.)
2. au niveau procédural, l'apprenant arrive à poser une (simple) problématique, trouver une (simple) solution algorithmique, et l'implémenter dans une (simple) application interactive.

Pour atteindre ces objectifs, nous sommes de l'avis - corroboré d'ailleurs par la littérature scientifique présentée dans les ressources liées aux 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 tous 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, à partir du module sur les concepts de base de JavaScript, les ressources 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. 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.

Nous conseillons à ce propos de manipuler directement le code, sans faire recours exclusivement (ou trop souvent) au copier/coller.

Prérequis

Aspects théoriques de la pensée computationnelle

Si vous suivez les ressources à propos de la pensée computationnelle en sciences sociales, nous conseillons d'abord de suivre le parcours guidé :

• Aspects théoriques de la pensée computationnelle

Connaissances techniques préalables

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. Les deux introductions à HTML5 et CSS disponibles dans ce wiki, avec quelques essais de création de simples pages web, devraient suffire à cet effet :

• Introduction à HTML5
• Introduction à CSS

Outils nécessaires

Sauf indications spécifiques disponibles dans les ressources, vous avez besoin 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 utiles. Nous conseillons :
  • Inkscape pour les images vectorielles
  • GIMP pour les images matricielles

Organisation des fichiers

Un aspect important à considérer, surtout pour des néophytes, concerne l'organisation des fichiers lorsque vous allez répliquer les exemples fournis. Les éléments qui composent une application sont divisés dans plusieurs fichiers, avec différentes types d'extensions. Par exemple :

• index.html est un fichier qui s'appelle index et qui a l'extension .html car il contient du code HTML
• style.css est un fichier qui s'appelle style et qui a l'extension .css car il contient des règles de style CSS
• app.js est un fichier qui s'appelle app et qui a l'extension .js car il contient du code JavaScript

Il sera important de respecter au caractère près, y compris la distinction entre majuscules et minuscules, le nom et l'extension des fichiers. De plus, il faudra également respecter le positionnement des fichiers les uns par rapport aux autres en fonction de l'arborescence des dossiers et sous-dossiers qui contiennent les différents fichiers.

Organisation des ressources

Les ressources sont organisées en modules principaux que nous conseillons de suivre dans l'ordre proposé, mais qui peuvent être consultés également selon les intérêts spécifiques :

1. Concepts de base de JavaScript

   Niveau: débutant

   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

2. JavaScript dans le navigateur

   Niveau : débutant/intermédiaire

   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.

3. JavaScript sur le serveur

   Niveau: avancé

   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".

4. JavaScript dans d'autres environnements

   Niveau : avancé

   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.

5. Références JavaScript

   Niveau : tout niveau

   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 basé sur l'apprentissage par projet.

Pour un cours à 3 crédits nous conseillons :

• Les ressources liées aux Aspects théoriques de la pensée computationnelle
• Les ressources liées aux Concepts de base de JavaScript

Pour un cours à 6 crédits nous conseillons :

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

Pour un exemple concret de l'utilisation du matériel dans le cadre d'un cours universitaire à 6 crédits, voir Initiation à la pensée computationnelle avec JavaScript : le cours STIC I (Fritz & Schneider, 2019).

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.

Formats disponibles

L'initiation à la pensée computationnelle avec JavaScript est disponible dans les formats suivants :

• En tant que collections de modules et pages sur EduTechWiki qui peuvent être explorés à travers le menu de navigation en haut à droite de chaque page ;
• En tant que
  livre produit depuis les mêmes pages
  et qui peut être téléchargé en format PDF ou imprimé à la demande via PediaPress

Sélection pour le cours STIC I

Une sélection de ressources est utilisée en tant que matériel de support pour le cours STIC I du Master MALTT (6 crédits) :

• STIC I - Support de cours

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