JavaScript 2021

From Newbie To Junior

Version Française

CC-BY-NC-4.0 / feb. 2021 / Loïc TRUCHOT

as first programming language

Pour une pédagogie de l'informatique

• Apprentissage
  • en spirale (oublier, se-remémorer)
  • par variation
    • points de vues
    • sens, sources, mediums
    • sujets, difficultés
• Pratique constante
  • apprentissage par l'échec
  • "mob programming"
  • ateliers avant/après théorie
  • contribution projets réels
• Synthèse et consolidation
  • 1 concept/1 quizz
  • évaluations régulières pratique/réflexions personnelles
  • objectivation de la progression et des acquis/lacunes

en savoir + sur la méthode ?

variables / types

fonctions

structures

de

contrôle

structures

de

données

tooling

API

mécanismes

prélude

Une spirale...

...VERTUEUSE

Généralités

Un langage de programmation

• Qu'est-ce qu'un programme ?
  • suites d'opérations exécutables par l'ordinateur
• Qu'est-ce qu'un ordinateur ?
  • machine de Turing (boulier) qui « saute » d'un état (state) à l'autre, en combinant 0 et 1, capable de faire tous les calculs (discrets)

• Qu'est-ce que JavaScript ?
  • langage de programmation généraliste et « Turing Complete »
• Qu'est-ce qu'un langage de programmation ?
  • ensemble de symboles utilisés pour produire des programmes

Apprendre l'informatique

• Découvrir certaines branches de la logique et des maths
  • logique booléenes, maths discrètes, lambda calcul... 
• Comprendre les concepts informatiques de tous les langages
  • variables (state), fonctions (jumps)
  • typage, primitifs
  • structures de contrôle
    • conditions, itérations
  • structures de données
    • liste, stack, queue, linked list, tree, graph...
• Comprendre l'empilement d'abstractions du transistor au framework
  • 0/1 -> opcode -> assembly -> C/C++/Rust -> JavaScript -> React

Les meilleur·es devs savent retoucher le code, de l'opcode au framework, en fonction de la source du problème

un savoir-faire

Apprendre l'informatique

• Participer à un mentora, un compagnonnage
• Accepter l'altérité, l'incertitude, l'échec, l'erreur,  la frustration
• Comprendre les trade-offs face à la complexité
• Développer une éthique
• Être à l'écoute

Computer Science is not about Computer, is not even a science.

It's understand and managing complexity

un savoir-être

• Curiosité, passion
• Perséverance, perfectionnisme
• Pratiquer et apprendre sans fin, comme un artisan-chercheur

Apprendre un langage

• Ancrage historique
  • quand, pourquoi, comment, par qui, pour qui ?
  • communauté, activité ? avenir ? t'chat, mooc, q/r ?
• Typologie
  • paradigme: Orienté Objet ? Fonctionnel ?
  • fonctionnement: compilation ? interprétation ? transpilation ?
  • scope: Turing Completeness ? domaine ? performances?
  • types: fort/faible ? statique/dynamique ?

Ça veut dire quoi ?

• Mécanismes
  • ​mémoire, scope, pile d'appel
  • valeurs, références, mutabilité
• Types primitifs
  • boolean, number, string
  • null, undefined, void

 1/2

Apprendre un langage

• Syntaxe des symboles
  • variables et fonctions
  • structures de contrôle: if, for...
  • opérateurs: +, -, >=...
  • structures de données: [ ], { }...
  • mots clés: class, this, new,  instanceof...
• Prélude des objets/fonctions natives:
  • Array.push(), new Date(), String.replace()
• APIs natives: Window, DOM, fetch... 
• Tooling
  • package manager
  • bibliothèques, frameworks
  • IDE, linter, beautifier
  • task-runners, seeds

Ça veut dire quoi ?

 2/2

Variables

Niveau 1

Bases de la programmation

• state & jump 
• entrée -> sortie (input -> output)
• instructions  & expressions  (statements & expressions)
• LHS =/= RHS
• valeurs, dans des boîtes noires

  • nom = "Mario"

• valeurs brutes, ou expressions calculées en cascade

  • euros = 100 + (42 - 2)

• opérations sur ces variables

  • phrase = nom + " possède " + euros + "€"

• fonctions pour organiser opérations
• fonctions pour organiser fonctions
• Et ainsi de suite du plus simple au plus complexe

appliquées à JavaScript

Une syntaxe courte

Tout les mots clefs du langages tiennent sur une demi page.

Une boîte à outils énorme

L'objet "window", implicite et omniprésent

La variable

• Ne commence pas par un chiffre
• Ne comprends pas de caractères confus (ex: "-" ou " ")
• N'est pas un mot clef réservé
• Déclaration: var x;
• Assignation: x = "value";
• Les deux d'un coup: var x = "value";
• peut tout contenir, même des fonctions
• n'a pas de type forcé (son type change dynamiquement)
• Rappel :
  • Scope = function
  • valeurs primitives (boolean, string, number) passées par copie
  • objets (arrays, objects, functions) passés par références

Choisir un nom

• L'une des tâches les plus difficiles de l'informatique (avec l'invalidation de cache)
  • Trouver un nom vraiment descriptif
  • Donc pas trop vague
  • Et sans caractères spéciaux
  • Avec des mots bien séparés
  • Mais pas trop long
  • Mais au bon niveau d'abstraction
  • Mais avec consistance dans tout le programme
  • ...

Les types

les valeurs, les références

Workshop

• créer un fichier « test.js »
• l'ouvrir avec le bloc-note
• écrire un programme capable de calculer le nombre de m2 de mon appartement (dessiné au tableau)
  • var x = 3;
  • console.log(x);
  • node test.js

Back dans les bases