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.

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

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

[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

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