Discussion :

[carineLC]

Bonjour,

Je suis novice dans le coding.

Voici le problème que je vous pose :

Sur le site https://www.imdb.com/chart/top, je dois écrire un script JS qui parcours la liste des films et filtre la liste des 10 films les mieux notés, puis afficher chaque titre.

Je pensais utiliser une boucle for.

Pourriez-vous m'aider s'il vous plaît ? Je suis un peu perdue.

Merci. Bonne journée.

[Watilin]

Bonjour Carine,

ta demande ressemble à l’énoncé d’un exercice. J’imagine que ta formatrice ou ton formateur t’a indiqué les outils à utiliser. En particulier ici, tu n’as pas accès au code source serveur du site IMDB, tu ne peux donc faire que des modifications volatiles de la page (la copie locale dans la mémoire de ton navigateur). Ces modifications disparaissent quand tu fermes la page ou que tu l’actualises.

Il y a différents moyens de faire ça, le plus simple étant d’exécuter du code dans la console. Appuie sur F12 pour ouvrir les outils de développement et assure-toi que tu es sur l’onglet « console ». Localise la zone de saisie, c’est là que tu peux entrer du code et l’évaluer en appuyant sur entrée.

Avec la boucle for, tu as effectivement la bonne intuition, mais il faut savoir sur quoi boucler : il te faut une collection d’éléments du DOM. Pour faire simple, le DOM (Document Object Model) c’est la représentation en objets JavaScript de la structure de la page. À chaque balise HTML correspond ce qu’on appelle un élément du DOM.

Pour obtenir une collection d’éléments, tu peux par exemple utiliser querySelectorAll :

Code :

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

document.querySelectorAll("tr")

Si tu évalues ce code dans ta console, elle t’affichera une liste des éléments correspondant au sélécteur (ici tr), et tu pourras les survoler à la souris pour voir où ils se trouvent dans la page.

Pour trouver le bon sélecteur à utiliser, il faut faire un peu d’inspection. Ton navigateur te permet de faire ça : généralement, quand tu cliques-droit sur un élément dans la page, il y a une commande « inspecter » ou « examiner l’élément ». Cette commande va ouvrir l’outil « inspecteur DOM » qui présente une vue arborescente du DOM dans laquelle tu peux naviguer. Grâce à ça tu peux voir, par exemple, que le sélecteur tr n’est pas assez précis car il sélectionne un élément <tr> qui ne correspond pas à un film, c’est celui qui sert d’en-tête au tableau.
Les <tr> qui t’intéressent se trouvent dans le <tbody>. Par chance le <tbody> a un attribut class="lister-list", c’est toujours plus intéressant de travailler avec des classes car ça fait des sélecteurs plus efficaces. Et s’il y a un id c’est encore mieux, malheureusement ce n’est pas le cas ici.

Code :

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

var collection = document.querySelectorAll(".lister-list tr")

Tu peux vérifier le nombre d’éléments dans la collection avec la propriété .length :

Code :

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

collection.length

C’est une bonne idée de vérifier que la collection ne contient pas d’éléments non désirés. En général il suffit de vérifier que le premier et le dernier correspondent.

Code :

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

collection[0]

Code :

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

collection[collection.length - 1]

Si tu veux ne récupérer qu’une partie de la collection, il faut la découper. Nativement, les objets collections ne permettent pas de faire ça, on va donc la transformer en tableau (array). C’est facile :

Code :

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

Array.from(collection)

Et ensuite on appelle la méthode .slice :

Code :

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

Array.from(collection).slice(0, 10)

À présent tu peux itérer dessus avec une boucle for. Prenons la nouvelle syntaxe for..of qui est plus claire :

Code :

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

1
2
3
for (let element of Array.from(collection).slice(0, 10)) {
  console.log(element);
}

Bien sûr, au rechargement de la page, tu n’as plus la variable collection dans la portée des variables. On va écrire quelques lignes pour résumer tout ça :

Code :

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

1
2
3
4
5
var collection = document.querySelectorAll(".lister-list tr");
var slicedCollection = Array.from(collection).slice(0, 10);
for (let element of slicedCollection) {
  console.log(element);
}

Je m’arrête là pour l’instant, ça fait déjà pas mal d’informations. Il te reste à extraire le titre de chaque film et trouver un moyen d’afficher les données, car je suppose que dans la console, ce n’est pas suffisant

[carineLC]

Bonjour Watilin,

Merci d'avoir pris le temps de me répondre. Je suis suis partie de tes explications pour détailler mon code.

Voici le résultat :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
var collection = document.querySelectorAll(".lister-list tr");
var slicedCollection = Array.from(collection).slice(0, 10);
for (let element of slicedCollection) {
  var filterColumn = element.getElementsByClassName("titleColumn");
  var filterTitle =  filterColumn.getElementsByTagName("a");
  var titleList = [];
    for (i=0; i<filterTitle.length; i++){
      titleList = titleList + " " + filterTitle[i];
      console.log(titleListe);
  }
}

J'ai filtré le tableau par la classe "titleColumn". Je le filtre ensuite par le tag "a".
Je crée un tableau vide.
Je parcours le tableau créé à partir du code HTML. Pour chaque nouveau titre trouvé, je l'ajoute à mon tableau vide.

Lorsque je saisie ce code sur la console, j'obtiens le message d'erreur suivant :

Uncaught TypeError: filterColumn.getElementsByTagName is not a function

Je ne comprends pas pourquoi.
Peux-tu me dire si ma logique est bonne ? Et comment puis-je résoudre mon problème ?

Merci pour ton aide.

[Watilin]

C’est parce que filterColumn est une collection, et n’a pas les mêmes méthodes qu’un élément seul.

Même si le résultat ne contient qu’un seul élément, les fonctions getElements*, avec un « s » à Elements, renvoient toujours une collection. Idem pour querySelectorAll.
Si tu sais qu’il n’y aura qu’un seul élément, tu as deux façons de le cibler :

• getElementsByClassName("titleColumn")[0]
• querySelector(".titleColumn") (sans All)

Personnellement, je préfère utiliser toujours querySelector et querySelectorAll par souci de cohérence.

Code :

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

1
2
3
4
5
6
7
8
9
var collection = document.querySelectorAll(".lister-list tr");
var slicedCollection = Array.from(collection).slice(0, 10);
for (let element of slicedCollection) {
  var filterColumn = element.querySelector(".titleColumn");
  var filterTitle = filterColumn.querySelector("a");
 
  ...
 
}

Ici, grâce à la puissance des sélecteurs CSS, on a moyen de sélectionner directement le <a> comme ceci :

Code :

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

element.querySelector(".titleColumn a");

Je précise que tu peux limiter la portée de tes variables à la boucle for grâce au mot-clé let. Le problème avec var, c’est que les variables continuent d’exister après la fin de la boucle.

Code :

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

1
2
3
4
5
6
7
8
var collection = document.querySelectorAll(".lister-list tr");
var slicedCollection = Array.from(collection).slice(0, 10);
for (let element of slicedCollection) {
  let filterTitle = element.querySelector(".titleColumn a");
 
  ...
 
}

Ensuite, pour récupérer le texte contenu dans le <a>, on utilise la propriété textContent.

Code :

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

filterTitle.textContent

Attention avec ta variable titleList : tu déclares d’abord un tableau ([]), mais il est ensuite converti en chaîne au moment où tu fais titleList + " ". Ce n’est probablement pas ce que tu veux. Pour ajouter un élément à un tableau, il y a par exemple la méthode push.

Tu as aussi un petit problème de raisonnement : dans ton code il y a deux boucles for imbriquées. Le nombre de boucles (quel que soit le type de boucle : for, while, do … while, etc.) dépend de la dimension des données à traiter.
Si tes données sont en 1 dimension (une ligne ou une colonne), tu as besoin d’1 boucle.
Si tes données sont en 2 dimensions (tableau, grille, bitmap, etc.), il faudra 2 boucles imbriquées.
Et il arrive aussi parfois que les données soient structurées en 3 dimensions voire plus.

Mais restons simples, dans ton cas tu n’as besoin que d’une boucle, et s’il y a des boucles imbriquées, c’est le signe qu’il y a un défaut dans ton raisonnement.
La boucle à garder est celle qui parcourt slicedCollection. On va initialiser le tableau titleList avant le début de cette boucle.
Dans la boucle, on ajoute simplement les informations dans le tableau avec push.
Et finalement, une fois que la boucle est terminée, on affiche les données.

Code :

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

1
2
3
4
5
6
var titleList = [];
for (let element of slicedCollection) {
  let filterTitle = element.querySelector(".titleColumn a");
  titleList.push(filterTitle.textContent);
}
console.log(titleList);

Il y aura un peu plus de travail à faire si tu veux afficher les données dans la page même et non pas dans la console. Là, deux méthodes vont t’aider : createElement et append. Sachant que tu peux injecter une balise <style> dans la page, tu peux ajouter des styles sur tes éléments avec une grande liberté.

De quelle façon tu voudrais présenter ça ?

[carineLC]

Merci Watilin pour ton aide. L'objectif était juste d'afficher les noms de films dans la console. Ce qui est fait.

La plupart des points que tu as détaillés je ne les avais pas vu dans mon cours. Je vais approfondir mes connaissances avant de passer à l'étape suivante.

Bonne journée.