Discussion :

[SylvainPV]

Voir le topic de mise en place des exercices : http://www.developpez.net/forums/d15...es-javascript/

Ce topic pour discuter/valider/corriger les cours/exercices du chapitre 1:


Le langage JavaScript

• 1.1. Le premier script (1)
  
  • [Facile][Indispensable] Exercice 1.1.1 : L'exécution d'un script JavaScript avec Node.js => validé
  
  
• 1.2. Les opérateurs conditionnels et le typage implicite (3)
  
  • [Facile][Indispensable] Exercice 1.2.1 : Les structures conditionnelles avec l'instruction "if...else" => validé
  • [Facile][Indispensable] Exercice 1.2.2 : Les structures conditionnelles avec l'instruction "switch" => validé
  • [Intermédiaire][Indispensable] Exercice 1.2.3 : Les particularités du switch et l'utilisation de la bibliothèque standard => en cours de validation
  • [Facile][Indispensable] Exercice 1.2.4 : Le typage dynamique => validé
  • [facile][indispensable]Exercice 1.2.5 : L'opérateur ternaire => validé
  
  
• 1.3. Les objets (0) (non visible)
  
  • [facile][indispensable]Exercice 1.3.1 : Les tableaux et les boucles de type for => en cours de validation
  • [facile][indispensable]Exercice 1.3.2 : La boucle de type while => en cours de validation
  • [facile][indispensable]Exercice 1.3.3 : La manipulation de tableau => en cours de validation
  • [facile][recommandé]Exercice 1.3.4 : La manipulation de tableau => en cours de validation
  • [moyen][indispensable]Exercice 1.3.5 : La suppression d'élément dans un tableau => en cours de validation
  • [construction][moyen][indispensable]Exercice 1.3.6 : Les boucles et les chaînes de caractères
  • [construction][moyen][indispensable]Exercice 1.3.7 : L'objet Array, son prototype et ses méthodes
  
  
• 1.4. Les fonctions et les scopes (3) (non visible)
  
  • [construction]Une fonction javascript "utilisateur"
  • [construction][facile][indispensable] La récursivité en JavaScript
  • [construction][facile][indispensable] Opérations de base sur un compte bancaire
  • [construction][moyen][indispensable] Fonction de callback : Manipulation de chaines de caractères
  
  
• 1.5. Le prototype et l'héritage (0) (non visible)
• 1.6. L'asynchronicité (0) (non visible)
• 1.7. Les erreurs (0) (non visible)
• 1.8. Les moteurs JavaScript et la compatibilité (0) (non visible)

Voilà donc mes retours sur l'exercice Tableaux et boucles:

Tableaux numériques et associatifs

• Notez que nous utilisons ici des tableaux numériques. On parle de tableaux numériques lorsque les index du tableau sont de type numérique.
• Lorsque les index sont de type alphanumérique on parle de tableaux associatifs. Les tableaux associatifs sont peu utilisés en JavaScript car cette structure comporte des contraintes. Pour créer des structures associatives on utilise la plupart du temps des objets que nous verrons plus tard

Cette définition n'est pas satisfaisante:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
> var o = { 42: "test" }
< Object {42: "test"}

Je préfère l'approche du MDN qui est de parler de tableaux tout court, pour désigner les Array. Et ensuite de préciser qu'il ne s'agit pas de tableaux associatifs, en expliquant le principe des index numériques entiers continus. Pour les tableaux associatifs, je propose qu'on ne s'attarde pas trop sur ce vocabulaire très confusant, et qu'on parle directement d'objets ou de maps (mot anglais mais très couramment utilisé et qui permet d'introduire les Maps ES6 dans un second temps).

Je propose aussi de conclure l'exercice en demandant, selon le bon vouloir de l'élève, de refaire la même chose, mais avec la déclaration littérale du tableau et l'utilisation de la méthode push. C'est utile car on connait rarement à l'avance la taille d'un tableau dans les utilisations pratiques (données dynamiques)

[ABCIWEB]

Pas sûr d'avoir suivi toutes les discussions, on s'est un peu éparpillés. Je vais supposer que je dois poster mes corrections/suggestions dans ce topic, comme Thomas me l'a indiqué dans les premiers posts. Mais ça serait mieux d'avoir un topic dédié à chaque exercice.

Salut Sylvain

Oui ce serait bien notamment lorsque les exercices vont se complexifier. Pour l'instant on utilise cette discussion dans le forum contribuer pour parler d'un peu tout.

Notez que nous utilisons ici des tableaux numériques. On parle de tableaux numériques lorsque les index du tableau sont de type numérique.
Lorsque les index sont de type alphanumérique on parle de tableaux associatifs. Les tableaux associatifs sont peu utilisés en JavaScript car cette structure comporte des contraintes. Pour créer des structures associatives on utilise la plupart du temps des objets que nous verrons plus tard

Il me semble que c'est moi qui ait improvisé cette partie cours (car elle n'existait pas) lors du reformatage des exercices. C'était pour traduire cette partie de la doc de mozilla que je trouve pas très explicite pour un débutant

Notez que vous ne devriez pas considérer un tableau comme un tableau associatif (en anglais). Vous pouvez utiliser des objets classiques à la place pour obtenir ce comportements (cette approche n'est pas sans inconvénient non plus, mais c'est la plus pertinente). Voir le billet sur les dictionnaires légers en JavaScript avec des clés arbitraires par exemple.

A mon avis il faut quand même parler au moins une fois des tableaux associatifs, ne serait-ce que pour les différencier des tableaux numériques. Je ne crois pas que l'on s'attarde puisque c'est la seule fois où l'on en parle. Donc à moins de ne pas en parler du tout je ne sais pas comment faire moins. Le plus simple pour nous expliquer serait que tu proposes ta version. Sinon si j'ai bien compris ta critique dans un premier temps on pourrait supprimer la dernière phrase ?

Je propose aussi de conclure l'exercice en demandant, selon le bon vouloir de l'élève, de refaire la même chose, mais avec la déclaration littérale du tableau et l'utilisation de la méthode push. C'est utile car on connait rarement à l'avance la taille d'un tableau dans les utilisations pratiques (données dynamiques)

En même temps c'est le premier exercice sur les tableaux, et la méthode push est employée dans les exercices suivants. Mais pourquoi pas en parler dès le début en effet...

[SylvainPV]

Je pensais à un truc comme ça:

Cours

En JavaScript, les tableaux sont des objets issus du constructeur Array. Ils servent à stocker une liste ordonnée d'éléments. Chaque élément est associé à un index numérique qui correspond à son emplacement dans le tableau. Le premier élément a l'index 0, le second l'index 1, et le dernier a l'index n-1, où n est la dimension du tableau. Les tableaux disposent de nombreuses méthodes utilitaires dans Array.prototype leur permettant d'être parcourus et manipulés facilement (tri, filtre...)

Note: les tableaux ne sont pas appropriés pour stocker des couples clé-valeur avec des clés variables. Pour ce type de structure (appelé dictionnaire ou tableau associatif selon les langages), mieux vaut utiliser de simples objets en JavaScript, ou des Maps (norme ECMAScript 6).

Déclarer un tableau

• avec l'écriture littérale: [1,2,3]
• avec le constructeur: new Array(dimension)

Ajouter des éléments dans un tableau

• On peut définir explicitement l'index et sa valeur: tableau[index] = valeur
• Ou utiliser les méthodes du prototype Array : tableau.push(valeur); tableau.unshift(valeur); etc...

Tout d'abord, essayez de résoudre l'exercice en le déclarant avec le constructeur et en assignant directement les valeurs aux index.

... exercice

Optionnel: essayez de refaire l'exercice en déclarant le tableau avec l'écriture littérale et en utilisant la méthode push.

C'est surtout "tableau numérique" qui m'ennuie. Je n'ai trouvé aucune référence à cette appellation, pour moi un tableau numérique c'est une liste de nombres. Et parler de tableau associatif, ça embrouille plus qu'autre chose. En Java on parle de Map et on a traduit ça en dictionnaire en français.

[ABCIWEB]

C'est surtout "tableau numérique" qui m'ennuie. Je n'ai trouvé aucune référence à cette appellation, pour moi un tableau numérique c'est une liste de nombres.

Ah ok je comprends mieux, effectivement c'est un abus de langage de ma part, un raccourci pour dire avec des index numérique, mais ce n'est référencé nulle part, et tout le monde ne comprendra pas nécessairement la même chose, tu fais bien de préciser.

Pour le reste, c'est super, ça fait un cours simple et précis.

Juste dans la phrase "les tableaux ne sont pas appropriés pour stocker des couples clé-valeur avec des clés variables" je trouve le mot "variables" un peu ambigu. Selon moi cela n'évoque pas suffisamment la différence entre index numériques et index non numériques ?

[SylvainPV]

Justement ça n'a rien à voir avec le fait d'être numérique ou non. Regarde mon exemple précédent où je mets le nombre 42 comme index d'un objet. D'ailleurs voilà l'exemple dans l'autre sens:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
var a = [];
 a["42"]="test"; // on assigne une String
 console.log(a.length); // 43 !

Avec les objets JS on peut prendre comme clés toute variable castable en String ainsi que des Symbol, et avec les maps ES6 on peut prendre tout et n'importe quoi comme clé, y compris une autre map.

[ABCIWEB]

Avec les objets JS on peut prendre comme clés toute variable castable en String ainsi que des Symbol, et avec les maps ES6 on peut prendre tout et n'importe quoi comme clé, y compris une autre map.

Je ne dis pas le contraire. Mais on ne parle pas d'objets dans notre exercice. On parle juste du fait que l'on utilise des tableaux avec des index numériques.
Quand tu dis "les tableaux ne sont pas appropriés pour stocker des couples clé-valeur avec des clés variables", le mot "variable" est ambigu dans le sens ou si je fais :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
var tab = [];
var i = 0;
tab[i] = 50;
console.log(tab[0]);

...j'aurai bien défini un élément de tableau en utilisant une clé qui est une variable. C'est pour cela que je pense que ta formulation présuppose des connaissances pour être bien comprise. Or dans notre hypothèse de départ on est sensé pouvoir s'adresser à des personnes sans formation informatique. Et dans un premier temps le but du jeu ici est juste de dire qu'on utilise des tableaux avec des index numériques (pas autre chose que des index numériques).

P.S oui je pense que ce serait mieux que tu déplaces notre discussion dans le sujet contribution.

[NoSmoking]

J'ai du mal à tout suivre mais bon...

J'aime bien la présentation/cours que fait Sylvain sur les tableaux, simple et succinct.

Or dans notre hypothèse de départ on est sensé pouvoir s'adresser à des personnes sans formation informatique.

dans ce cas je ne parlerais même pas de "tableau "associatif"", autant ne pas donner de mauvaises habitudes.

[danielhagnoul]

Je comprends ta remarque dans le contexte du JS d'autrefois (E3-E5, encore qu'un objet JSON peut répondre au besoin), mais pas dans le JS d'aujourd'hui (ES2015)

Moi, c'est le mot tableau qui me gêne. Je trouve qu'il n'y a pas de bonne traduction pour Array, Map, WeakMap, Set et WeakSet. Il serait préférable d'utiliser les mots anglais.

[ABCIWEB]

Or dans notre hypothèse de départ on est sensé pouvoir s'adresser à des personnes sans formation informatique.

dans ce cas je ne parlerais même pas de tableau "associatif", autant ne pas donner de mauvaises habitudes.

Si on est sensé pouvoir s'adresser à des personnes sans formation informatique, on est aussi sensé pouvoir s'adresser à des personnes qui ont des connaissances en programmation mais pas en javascript, ou etc., en résumé à tout le monde.

1/ Par exemple moi qui vient du monde php où les tableaux associatifs sont fréquemment utilisés, si je vois un cours sur les tableaux dans un autre langage je vais nécessairement m'attendre à ce qu'on aborde entre autre le cas des tableaux associatifs.

2/ Par ailleurs même un débutant "total" pourrait se demander si l'on est obligé d'utiliser des index numériques pour construire un tableau ou s'il n'existe pas d'autres options.

C'était donc pour répondre à cette question dès le départ.

Et aussi pour résumer cette citation de la doc de mozilla que l'on donne en référence :

Notez que vous ne devriez pas considérer un tableau comme un tableau associatif (en anglais). Vous pouvez utiliser des objets classiques à la place pour obtenir ce comportements (cette approche n'est pas sans inconvénient non plus, mais c'est la plus pertinente). Voir le billet sur les dictionnaires légers en JavaScript avec des clés arbitraires par exemple.

Voilà pourquoi il me semble difficile d'occulter totalement le cas des tableaux associatifs sans même donner une ligne d'explication.


Ensuite, comme je l'ai déjà dit, SylvainPV a largement amélioré ma proposition initiale. Je faisais juste la remarque que la phrase

"les tableaux ne sont pas appropriés pour stocker des couples clé-valeur avec des clés variables"

est ambigüe dans le sens où elle ne répond pas directement à mes questions 1/ et 2/.
Selon moi, si vous arrivez à faire la relation c'est nécessairement parce que vous connaissez déjà le sujet. Non ?

[ABCIWEB]

Moi, c'est le mot tableau qui me gêne. Je trouve qu'il n'y a pas de bonne traduction pour Array, Map, WeakMap, Set et WeakSet. Il serait préférable d'utiliser les mots anglais.

Là tu donne un avis d'expert, mais concernant les exercices on est dans une phase d'initiation... et la doc Mozilla que l'on donne en référence utilise abondamment le mot "tableau". Donc à mon avis ce serait être "plus royaliste que le roi" et cela ne faciliterait pas la compréhension.

[autran]

salut la "dream team",
Je viens de rajouter un exercice classique de détection de palindromes.
et j'ai tenté de respecter le protocole

[SylvainPV]

@ABCIWEB: je pensais à "variables" dans le sens "diverses". Mais reformule ça comme tu le sens. Il faudrait simplement insister sur l'aspect "liste ordonnée et continue" plutôt que l'aspect "numérique".

@daniel: oui, c'est pour ça que j'ai parlé du constructeur Array (même si je crois que les constructeurs sont abordés plus tard dans le plan). C'est essentiel de mentionner Array, mais je pense qu'on doit quand même parler de tableaux et de boucles au premier abord, sinon le débutant ne saura pas où chercher.

[ABCIWEB]

@Sylvain
Maintenant les exercices sont conçus directement dans le cahier d'exercices. Donc les liens que tu donne vers le blog de Marc (que l'on utilisait au départ) ne correspondent plus aux exercices corrigés actuellement.

Le problème est que ce cahier ne permet pas encore de cacher les exercices en cours de fabrication par rapport à ceux qui sont terminées. Aussi Vermine nous a demandé de ne pas divulguer cette adresse au grand public.

Je te l'envoie par mp si cela peut te faire gagner du temps. Je suppose qu'il faudrait envoyer cette adresse à tous ceux qui sont intéressés pour relire ou ajouter des exercices tant que le cahier d'exercices ne permet pas de cacher les exo en cours de fabrication...

J'ai remodelé l'exercice numéro 2.1 de Marc en reprenant ta présentation.

[ABCIWEB]

et j'ai tenté de respecter le protocole

Bah ça devrait pas te poser trop de difficulté vu que c'est le tiens (issu de ce que tu avais fait sur ton blog)

L'exo est bien mais tu devrais peut-être expliquer verbalement un plus plus l'algorithme que tu attends, sinon perso sans regarder la réponse j'aurais fait :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var chaine = 'roTOR';
var dim = chaine.length;
 
chaine = chaine.toLowerCase();
 
var compare = String();
 
for (var i = 0 ; i < dim; i++)
{
    compare += chaine[dim -1 - i];
}
 
var palindrome = chaine == compare;
 
console.log(palindrome);

Cela permet au passage de voir la nécessité de définir la variable "compare" en string pour pouvoir faire la concaténation.

Eventuellement tu pourrais indiquer cette variante en seconde solution.

Et aussi rajouter l'utilisation de la méthode "replace()" pour supprimer les espaces vides afin de pouvoir traiter 'Esope reste ici et se repose'

[SylvainPV]

Ou encore

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
isPalindrome = s => s.replace(/\s/g,"") === s.split(/\s*/).reverse().join("")
 
isPalindrome("elu par cette crapule") // true

Ça serait intéressant de présenter les méthodes d'Array avant d'entamer ce genre d'exercices non ? Histoire que l'élève choisisse sa solution avec tous les outils en main.

[autran]

@Alain
J'ai rajouté ta variante et j'ai un peu expliqué je principe de l'algo.

@Sylvain
Ta solution est une œuvre d'art comme d'habitude. Mais je ne la proposerai pas car nous n'avons pas encore introduit la notation fléchée.

@La dream team
Mais c'est vrai que ça interpelle et donne envie de d'introduire cette notation fléchée et parler de la dimension fonctionnelle de ce langage impératif.
Peut-être faudrait il l'introduire dans le chapitre objets ou fonctions.
Mais pour ma part, j'aurai du mal à faire un cours sur ce sujet, même si je l'utilise.

qu'en pensez vous ?

[SylvainPV]

La notation fléchée n'est pas vraiment importante ici, c'est surtout l'usage de reverse() qui m'est tout de suite venu à l'esprit en pensant aux palindromes. De là à parler d'oeuvre d'art, y'a encore du chemin mais merci

Je poste maintenant tous mes codes en ES6 étant donné que Chrome/FF/Edge sont maintenant tous les trois à plus de 90% de support ES6, et qu'on peut donc directement le tester en console peu importe son navigateur (si tant est qu'il est à jour). Je mets systématiquement Babel et Autopolyfiller ensemble dans mon process de build, aux côtés de la minification, pour les livraisons au client final. Chaque rédacteur peut décider de l'utiliser ou pas, ce n'est pas très important. Toutefois je trouve ça juste plus valorisant pour un débutant d'apprendre directement à la dernière norme.

[danielhagnoul]

Je poste maintenant tous mes codes en ES6 étant donné que Chrome/FF/Edge sont maintenant tous les trois à plus de 90% de support ES6, et qu'on peut donc directement le tester en console peu importe son navigateur (si tant est qu'il est à jour).

ES2015 natif avec Chrome 49+ et Firefox 46+ c'est OK, mais chez moi Edge c'est KO. Il ne supporte toujours pas un simple let [i,item].

• Chrome 49 : 91 % compatible
• Chrome 50b : 94 %
• Chrome 51a : 97 %
• FF 46, 47, 48 : 91 %
• Edge 13 : 80 %
• Edge 14 : 86 %

Pour Edge, je n'arrive pas à déterminer mon numéro de version (20.10240.16384.0 ?), ni à charger une version plus avancée (bêta) sans passer dans la version "insider" de W10. Comment fais-tu ?

[SylvainPV]

Il faut effectivement faire partie du programme Windows Insider pour avoir accès aux builds preview de Edge. Le numéro de version indiqué en paramètres avancées n'est pas le même que celui de EdgeHTML, le moteur de rendu. C'est celui là qu'on utilise pour parler du support JS, parce que c'est lui qui représente le mieux les changements. Tu peux trouver un tableau de mapping des versions sur wikipedia : https://en.wikipedia.org/wiki/Microsoft_Edge

Le destructuring est supporté sur la 14, tandis que let est supporté de longue date. Vu le rythme des releases, je pense que la 14 devrait arriver en mise à jour auto d'ici 2-3 mois.

[autran]

En ce qui concerne les apprenants, on va les laisser pour le moment dans la console Node.js qui est compatible à 100% avec ES6. Comme ils y sont déjà tous les 3 se sera plus simple.
Pour ce que l'on a prévu de leurs faire faire dans un navigateur ES6 ne sera pas indispensable.