DM du WE

Unique !

Définir une fonction unique recherchant les valeurs uniques d'un tableau.

const t = [2,0,2,0,2,3];
const u = unique(t);

💥Proto de SuperDupont

const dim = 10;

const t = Array.from({length: dim}, (v, k) => Math.ceil(Math.random(k)*dim));

let u = [...new Set(t)];

TD

Création d'un jeu.

Règle du jeu : le joueur a trois chances pour trouver un nombre secret !

Imaginez que vous soyez chef de projet, vous rédigez en urgence un prototype pour les membres de votre équipe. Ce prototype permet à tous de fixer les idées (proto).

👷 Il faudra l'implémenter en JS.

Base de Données

Base de noms : un tableau d'objets !

Base de données ( JSON )

A partir d'un tableau d'objets écrire les fonctions permettant de déterminer :

Le nombre d'hommes
Afficher les âges des hommes
Calculer l'âge moyen des hommes.
…

Étudier la flexibilité de votre code :

Cas des hommes nés avant 1900
Cas des femmes
Cas des femmes nées avant 1900
...

Les pointeurs

notations
clonage 💪

bug 🐛

Trop fort, je viens d'écrire une fonction d'attente.💤

function wait(s){
let now = new Date();
let futur = now.getSeconds()+s;
while (now.getSeconds() < futur) {
now = new Date();
}
}
console.log(`start at ${new Date().getSeconds()}`);
wait(10);
console.log(`end at ${new Date().getSeconds()}`);

Tester dans node ce code qui attend 10 secondes.

Plus d'infos »

DM du WE

Voici un code naif qui permettrait de commander une pizza et de changer un ingrédient !

const queen = ["🐷","🍄","🍅","🧀"];
const myOrder = queen;
const yourOrder = queen;
yourOrder[0]="🌶";

Notre code va créer la perte de PizzaHUUUT !

Trouvez un moyen pour que UberEat livre votre pizza !

Python tutor

Découverte de python-tutor

TD : https://dupontdistanciel.blogspot.com/2020/10/python-tutor.html

VS

J'aime être un fainéant 💤!

Et, oui, mais pour cela, il me faut des outils de gros fainéant. Et si on commençait avec un éditeur de rêve !

Visual studio

VS est un éditeur qui tire sa force de IntelliSense, nous verrons cela plus tard.

Pour le moment découvrons quelques "fainéantises"

Emmet

Créer un nouveau fichier avec l'extension .html.

Dans la fenêtre d'édition qui s'ouvre, tapez uniquement !

Votre curseur collé à ! tapez la touche tab ⇆

Le corps d'un fichier HTML apparaît, allez dans la balise <body> puis écrire le code

ul>.item{ liste $}*3

Votre curseur collé à 3 tapez la touche tab ⇆

En action

Multi-Cursor Editing

C'est super pratique. Votre curseur clignote à un endroit, pressez la touche Alt, allez sur un autre endroit et cliquez à gauche de la 🐭 : vous avez deux curseurs !

La documentation officielle :

To edit multiple instances of text within different sections of a document, you can use multi-cursor editing. This allows multiple cursors to be placed in different spots so text can be added, modified, or deleted.
To engage multi-cursor editing, press the Alt key (or Option key on a Mac) and use the mouse to place cursors throughout the document. Every click creates a cursor resulting in multiple cursors.

Découvrez des cours en ligne

Un programme est un texte, l'histoire qu'il raconte un algorithme. La programmation son écriture. Et le langage varie suivant sa rédaction.

La rédaction dépendra du style de programmation (programmation impérative, fonctionnelle, programmation logique, programmation orientée objet …)

Prenons un exemple : "On doit retrouver la grand-mère maternelle, connaissant la mère".

Le tableau suivant résumerait les différents styles d'écriture :

impératif

fonctionnelle

logique

objet

Partie Déclaration

Partie Affectation

Y = mère de X;

Y = mère de Y;

Fonction

afficher, mère

Pour X afficher la mère de la mère de X

Prédicat

mère(U,V)

si mère(x,y) et mère(y,z) alors grand-mère(x,z)

Class

individu

méthode : mère

grd-mère : [[this mère] mère]

La mauvaise nouvelle est qu'il va falloir ajouter une ième colonne. JS est un langage objet à prototype !

Il n'y a pas de classes en JS. La fonction est la pierre angulaire car c'est elle qui possède un prototype qui permet de mettre en place une chaîne d'héritage.

Mais, si on s'amuse à comparer les index des cours de langages de programmation. Voici les index des cours de langage C et de JS du site Openclassroom.

Le constat serait frappant : les plans de cours se ressemblent.

En effet, si l’ordinateur représente les données en binaire, nous voulons penser nos données de façon plus naturelle (des nombres, des dates …), les manipuler facilement à l'aide de boucles dans des structures de plus hauts niveaux (les tableaux …) ; et ceci quelque soit le langage utilisé.

Il faut donc apprendre pour un langage les

Éléments lexicaux
Types
Structures de contrôle
Fonctions

Le plan du cours suit ce schéma.

Les littéraux

Les Variables

Les variables en JavaScript [M0L08]

Les conditions

Les conditions en JavaScript [M0L10]

Les boucles

Les boucles en JavaScript [M0L13]

Les fonctions

Vous avez au moins un an de programmation derrière vous. Si le nombre de vidéos est important, les notions abordées ne sont pas nouvelles.

Les cours en ligne

Vous pouvez suivre la formation JS proposée par Jérémy

Suite à ma demande, Jérémy vous propose :

"... de regarder directement depuis l'adresse de ma playlist YouTube publique du module débutant :

https://www.youtube.com/watch?v=JeqZNiAhnlE&list=PLyj4q0fkISxAPXLZqNq5gCKcCVLBqL9nB

Ça leur évitera d'avoir à rentrer leur email sur mon site et de subir mes emails marketing ensuite ;-)."

Interview

Jérémy combien de temps consacres tu à la création d'une vidéo ?

" ... Pour 15 min de vidéo (une leçon), ça me prend en général 4 jours à plein temps, soit une trentaine d'heures.

Ecriture du script 1 jour et demi à 2j (collecte des infos + synthèses + création du code qu'on va voir dans la vidéo), montage vidéo une demie-journée, transcription (sous-titres) 1h, création d'exercices quand il y en a 2h à 4h."