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.

/*

JAVASCRIPT FEW SYNTAX POETRY 
(by art4theSould)

Let this long package float,
Goto private class if short.
While protected with debugger case,
Continue volatile interface.
Instanceof super synchronized throw,
Extends final export throws.

Try import double enum?
- False, boolean, abstract function,
Implements typeof transient break!
Void static, default do,
Switch int native new.
Else, delete null public var
In return for const, true, char
…Finally catch byte.

*/

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

Made with Slides.com