Tutoriel pour apprendre la programmation en JavaScript

• Créer une page web valide contenant les deux paragraphes <p> tels que définis plus haut.
• Y associer un fichier CSS contenant la règle .hidden telle que définie plus haut.
• Ouvrir la page, vérifier que seul le premier paragraphe est visible.
• Quel code JavaScript faut-il exécuter pour retirer la classe hidden du deuxième paragraphe ?

<p id="premier">texte visible</p>
<p id="second" class="hidden">ce texte devrait être caché</p>

.hidden {
  display: none;
}

document.getElementById('second').classList.remove('hidden');

Solution : Codepen

• Créer une page web valide contenant les trois paragraphes <p> tels que définis dans l'exemple ci-dessus.
• Y associer un fichier CSS contenant la règle .hidden telle que définie plus haut.
• Ouvrir la page, vérifier que les trois paragraphes sont visibles.
• Quel code JavaScript faut-il exécuter pour ajouter la classe hidden aux paragraphes qui portent la classe spoiler ?
• Ajouter un bouton à la page HTML, et y intégrer le code JS nécessaire pour que les spoilers soient cachés seulement une fois que l'utilisateur aura cliqué sur le bouton.

<p>C'est l'histoire d'un garçon troublé</p>
<p class="spoiler">car il s'avère que son ours en peluche a disparu</p>
<p class="spoiler">mais finalement il le retrouve</p>
<button id="mon-bouton">cacher spoilers</button>

.hidden {
  display: none;
}

var tab = document.getElementsByClassName('spoiler');
document.getElementById('mon-bouton').onclick = function() {
  for (var i=0; i<tab.length; i++) {
    tab[i].classList.add('hidden');
  }
};

Solution : Codepen

Prenons le fichier HTML suivant :

<p id="premier">texte important</p>
<p id="second">autre texte</p>

Pour modifier la couleur de fond du premier paragraphe, il faut exécuter le code JavaScript suivant :

var element = document.getElementById('premier');
element.style.backgroundColor = 'red';

• Créer une page web valide contenant les deux paragraphes <p> tels que définis dans l'exemple ci-dessus.
• Ouvrir la page, vérifier que les deux paragraphes sont visibles.
• Intégrer le code JavaScript nécessaire pour que la couleur de fond du deuxième paragraphe devienne jaune quand l'utilisateur clique dessus.
• Bonus : intégrer le code JavaScript nécessaire pour que la couleur de fond de n'importe quel paragraphe de la page devienne jaune quand l'utilisateur clique dessus. (indice : il va falloir utiliser le paramètre fourni à l'appel de votre fonction onclick, nous ne l'avons pas encore vu au cours).

Solution : Codepen

<p id="premier">texte important</p>
<p id="second">autre texte (cliquable)</p>

Bonus)

var element = document.getElementById('second');
element.onclick = function() {
  element.style.backgroundColor = 'yellow';
};

Vous allez développer une page web contenant une liste de produits, et permettant à l'utilisateur de filtrer l'affichage de ces produits, en activant les catégories de produits qui l'intéressent.

Exemple minimaliste (animation) :

Vous êtes libre sur le choix des produits et des catégories qui seront proposés sur votre page, sur leur rendu visuel, ainsi que sur la manière d'activer les catégories.

Contraintes à respecter :

• incluez au minimum dix produits et trois catégories ;
• chaque produit doit être représenté par un élément HTML ;
• les catégories de chaque produit doivent être associées aux éléments correspondants à l'aide de l'attribut class ;
• le filtrage par catégories doit s'appuyer sur ces classes ;
• l'utilisateur doit pouvoir passer rapidement d'une catégorie à une autre, puis afficher la liste complète (non filtrée) des produits ;
• au moins deux de vos produits doivent être présents dans plusieurs catégories.

Exemple de liste de produits en HTML :

<article class="ludique pratique">iPad</article>
<article class="ludique sportif">Batte de baseball</article>
<article class="pratique">Ventilateur</article>

Vous serez évalué(e) selon les critères suivants :

• bon fonctionnement du filtrage ;
• concision et qualité du code ;
• bonus : esthétique du rendu et simplicité d'usage (ergonomie).

Les solutions les plus élégantes seront présentées au cours.

Solution : Codepen

<h1>Filtrage par catégorie</h1>
<button id="tous">tous</button>
<button id="ludique">ludique</button>
<button id="sportif">sportif</button>
<button id="pratique">pratique</button>
<article class="article ludique pratique">iPad</article>
<article class="article ludique sportif">Batte de baseball</article>
<article class="article pratique">Ventilateur</article>
<article class="article ludique">XBox</article>
<article class="article sportif">Gants de golf</article>
<article class="article pratique">Porte-clés</article>
<article class="article pratique">Carnet</article>
<article class="article ludique sportif">Balle de baseball</article>
<article class="article sportif ludique">Boules de pétanque</article>
<article class="article ludique">Yoyo</article>

function changerDisplay(classe, valeur) {
  var articles = document.getElementsByClassName(classe);
  for (var i=0; i<articles.length; ++i) {
    articles[i].style.display = valeur;
  }
}
document.getElementById('tous').onclick = function() {
  changerDisplay('article', 'block'); // afficher tous les articles
};
document.getElementById('ludique').onclick = function() {
  changerDisplay('article', 'none'); // cacher tous les articles
  changerDisplay('ludique', 'block'); // afficher articles ludiques
};
document.getElementById('pratique').onclick = function() {
  changerDisplay('article', 'none'); // cacher tous les articles
  changerDisplay('pratique', 'block'); // afficher articles pratiques
};
document.getElementById('sportif').onclick = function() {
  changerDisplay('article', 'none'); // cacher tous les articles
  changerDisplay('sportif', 'block'); // afficher articles sportifs
};

Jusqu'ici, nous avons vu deux fonctions de sélection d'éléments du DOM :

• getElementById() retourne un élément, quand on fournit son id ;
• et getElementsByClassName() retourne un tableau d'éléments, quand on fournit leur class.

Dans certains cas, il est pratique d'adresser les éléments par type (nom de balise). C'est ce que permet la fonction getElementsByTagName().

Exemple :

var images = document.getElementsByTagName('img');
// => images est un tableau contenant tous les éléments <img> de la page

Nous avons vu qu'il était possible de récupérer et/ou modifier la valeur d'un champ <input> à l'aide de la propriété value de l'objet JavaScript représentant ce champ.

Il se trouve que value est aussi le nom de l'attribut HTML correspondant. En effet, le DOM donne accès à des propriétés correspondant aux attributs standard des éléments HTML.

En guise d'exemple, imaginons l'élément HTML suivant :

<button id="mon-bouton" data-numero="5">

L'attribut data-numero n'est pas standard, mais nous avons le droit de nous en servir pour rattacher des informations à cet élément.

Pour récupérer la valeur de cet attribut, utilisons la fonction getAttribute() de la manière suivante :

document.getElementById('mon-bouton').getAttribute('data-numero');
// => cet appel de fonction retournera 5

Pour modifier la valeur de cet attribut, utilisons la fonction setAttribute() de la manière suivante :

document.getElementById('mon-bouton').setAttribute('data-numero', 7);
// => l'attribut va prendre la valeur 7, au lieu de 5

Avant que nous décrivions comment modifier la structure du DOM d'une page web, sachez qu'il est possible de modifier directement depuis JavaScript le code HTML contenu par un élément HTML : à l'aide de la propriété innerHTML de cet élément.

Exemple :

<!-- Avant : -->
<p id="mon-parag">texte initial</p>

document.getElementById('mon-parag').innerHTML = 'image : <img src="image.jpg">';

Cette affectation modifiera le DOM de la page web de la manière suivante :

<!-- Après : -->
<p id="mon-parag">image : <img src="image.jpg"></p>

En JavaScript, toute variable définie par var est rattachée à la fonction qui contient sa définition, ou dans l'espace « global » sinon.

Illustration :

var variableGlobale = 4;
function maFonction() {
  var variableLocale = 5;
  console.log('(maFonction) variableGlobale :', variableGlobale); // => 4
  console.log('(maFonction) variableLocale :', variableLocale);   // => 5
}
maFonction();
console.log('variableGlobale :', variableGlobale); // => 4
console.log('variableLocale :', variableLocale);   // => ReferenceError : variableLocale is not defined

Quand on mentionne une variable à l'intérieur d'une définition de fonction, JavaScript va d'abord chercher s'il existe une variable localement définie, puis chercher dans les contextes parents dans lesquels a été définie cette fonction, jusqu'à l'espace global, si besoin.

Dans le cas de notre boucle for (cf. exemple plus haut), la fonction affectée à la propriété onclick utilise la variable i, et cette variable n'est pas locale à cette fonction : elle est rattachée au contexte parent (celui qui contient la définition de fonction).

Du coup, lorsque cette fonction est appelée (en l'occurrence : au moment où l'utilisateur clique sur un élément), c'est la valeur de cette variable au moment de l'appel qui va être utilisée. Or, au moment de l'appel, notre boucle a fini d'itérer, et la variable i vaut donc sa valeur maximum (en l'occurrence : elements.length).

Pour éviter ce problème de portée, le plus simple est d'appeler à chaque itération une fonction en passant notre variable i en paramètre, de manière à ce que sa valeur soit rattachée à la fonction (comme si c'était une variable locale), et non au contexte parent.

Il existe deux moyens classiques d'appliquer cette pratique :

1. La closure : définir une fonction anonyme et l'appeler dans la foulée ;
2. Appeler une fonction qu'on aura définie à l'extérieur de notre boucle.

Dans les deux cas, cette fonction devra retourner une autre fonction, de manière à ce que cette dernière ne soit pas appelée immédiatement au moment de la définition de la fonction parente.

Nous avons vu qu'une fonction pouvait retourner une valeur de n'importe quel type, et que les fonctions étaient un des types avancés du langage JavaScript. Il est donc tout à fait possible qu'une fonction retourne une autre fonction !

Exemple :

function mere() {
  console.log('fonction mere appelée');
  return function fille() {
    console.log('fonction fille appelée');
  };
}
var fct = mere(); // => affiche 'fonction mere appelée' puis retourne la fonction fille
// => la fonction fille est affectée à la variable fct
fct(); // => affiche 'fonction fille appelée'

Pour éviter le problème de portée expliqué plus haut, il suffit alors de passer la valeur en paramètre de la fonction mère, qui sera appelée à chaque itération de la boucle :

function mere(i) {
  // i est *promue* comme variable locale à la fonction mere
  // => à chaque appel de la fonction qu'elle retourne, elle aura conservé sa valeur
  return function fille() {
    alert('vous avez cliqué sur l\'élément nº' + i);
    // i fait référence à la valeur qui avait été passée en paramètre
    // de l'appel à la fonction mere(), à chaque itération de boucle.
  };
}
// supposons que elements soit un tableau d'éléments HTML
for (var i = 0; i < elements.length; i++) {
  elements[i].onclick = mere(i);
  // => la fonction retournée par mere va être affectée à fille
}