Avant de commencer, créez un répertoire nommé r112-tp6 contenant des répertoires exo1, exo2, etc. Chacun de ces répertoires contient votre travail sur l'exercice correspondant. Le fichier HTML de chaque exercice doit s'appeler index.html. Vos exercices ne seront pas corrigés si vous ne respectez pas ces instructions.
À la fin de la séance, vous devez compresser (en format ZIP ou RAR) le répertoire r112-tp6 avec tous vos exercices et le soumettre sur AMeTICE.
Seuls les exercices marqués avec une étoile (*) seront évalués. La date limite pour rendre vos exercices est visible sur AMeTICE, et aucun travail ne sera accepté après. Le corrigé sera accessible après l'évaluation des exercices.
Dans cet exercice vous allez modifier tous les liens d'une page web.
Pour chaque lien (<a>), vous allez ajouter avec JavaScript l'attribut target="_blank" afin que la page soit ouverte dans un nouvel onglet.
Utilisez le code HTML suivant :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>R112</title>
</head>
<body>
<h1>Jethro Tull</h1>
<p>
Les albums studios de Jethro Tull sont :
</p>
<ul>
<li><a href="https://fr.wikipedia.org/wiki/This_Was">This Was</a> (1968)</li>
<li><a href="https://fr.wikipedia.org/wiki/Stand_Up_(album_de_Jethro_Tull)">Stand Up</a> (1969)</li>
<li><a href="https://fr.wikipedia.org/wiki/Benefit">Benefit</a> (1970)</li>
<li><a href="https://fr.wikipedia.org/wiki/Aqualung_(album)">Aqualung</a> (1971)</li>
<li><a href="https://fr.wikipedia.org/wiki/Thick_as_a_Brick">Thick as a Brick</a> (1972)</li>
<li><a href="https://fr.wikipedia.org/wiki/A_Passion_Play">A Passion Play</a> (1973)</li>
<li><a href="https://fr.wikipedia.org/wiki/War_Child_(album)">War Child</a> (1974)</li>
<li><a href="https://fr.wikipedia.org/wiki/Minstrel_in_the_Gallery">Minstrel in the Gallery</a> (1975)</li>
<li><a href="https://fr.wikipedia.org/wiki/Too_Old_to_Rock_%27n%27_Roll:_Too_Young_to_Die!">Too Old to Rock 'n' Roll: Too Young to Die!</a> (1976)</li>
<li><a href="https://fr.wikipedia.org/wiki/Songs_from_the_Wood">Songs from the Wood</a> (1977)</li>
<li><a href="https://fr.wikipedia.org/wiki/Heavy_Horses">Heavy Horses</a> (1978)</li>
<li><a href="https://fr.wikipedia.org/wiki/Stormwatch_(album_de_Jethro_Tull)">Stormwatch</a> (1979)</li>
<li><a href="https://fr.wikipedia.org/wiki/A_(album_de_Jethro_Tull)">A</a> (1980)</li>
<li><a href="https://fr.wikipedia.org/wiki/Broadsword_and_the_Beast">Broadsword and the Beast</a> (1982)</li>
<li><a href="https://fr.wikipedia.org/wiki/Under_Wraps">Under Wraps</a> (1984)</li>
<li><a href="https://fr.wikipedia.org/wiki/Crest_of_a_Knave">Crest of a Knave</a> (1987)</li>
<li><a href="https://fr.wikipedia.org/wiki/Rock_Island_(album)">Rock Island</a> (1989)</li>
<li><a href="https://fr.wikipedia.org/wiki/Catfish_Rising">Catfish Rising</a> (1991)</li>
<li><a href="https://fr.wikipedia.org/wiki/Roots_to_Branches">Roots to Branches</a> (1995)</li>
<li><a href="https://fr.wikipedia.org/wiki/J-Tull_Dot_Com">J-Tull Dot Com</a> (1999)</li>
<li><a href="https://fr.wikipedia.org/wiki/The_Jethro_Tull_Christmas_Album">The Jethro Tull Christmas Album</a> (2003)</li>
<li><a href="https://fr.wikipedia.org/wiki/The_Zealot_Gene">The Zealot Gene</a> (2022)</li>
</ul>
<script src="main.js" defer></script>
</body>
</html>Utiliser des liens qui s'ouvrent sur un nouvel onglet évite que les visiteurs de votre site web l'abandonnent durant la navigation. Attention à ne pas abuser de cette technique.
On peut définir ou modifier l'attribut d'un élément HTML avec la méthode setAttribute() [doc].
Dans cet exercice vous allez faire un bouton qui affiche un contenu en utilisant une classe.
Commencez par copier le code HTML suivant :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>R112</title>
<style>
.cache {
display: none;
}
#motdepasse {
color: red;
}
</style>
</head>
<body>
<p>
Votre mot de passe est <span id="motdepasse" class="cache">rkUEHxf3eApN</span>
</p>
<button>Afficher</button>
<script src="main.js" defer></script>
</body>
</html>
Quand l'utilisateur clique sur le bouton, il faut retirer la classe cache de l'élément <span> pour que le mot de passe soit visible.
On peut ajouter et retirer des classes d'un élément HTML avec les méthodes classList.add() et classList.remove(). Par exemple :
let h1 = document.querySelector("h1") // <h1 class="centre">
h1.classList.add("titre-principal") // <h1 class="centre titre-principal">
h1.classList.remove("centre") // <h1 class="titre-principal">Dans cet exercice vous allez faire un bouton qui affiche ou cache un contenu avec un bouton.
Reprenez votre code pour l'exercice précédent et faites les modifications suivantes :
Cacher
Cacher, le mot de passe disparaît et le texte du bouton devient
Afficher
Vous pouvez savoir si une classe apparaît dans un élément HTML avec la méthode classList.contains() :
let h1 = document.querySelector("h1") // <h1 class="centre">
h1.classList.contains("titre-principal") // false
h1.classList.contains("centre") // trueDans cet exercice vous allez faire un accordéon : les contenus de la page sont affichés ou cachés avec des boutons.
Copiez le code HTML suivant :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>R112</title>
<style>
.cache {
display: none;
}
</style>
</head>
<body>
<h1>Films de Quentin Tarantino</h1>
<section>
<h2>Reservoir Dogs <button>Afficher</button></h2>
<p class="cache">
Quentin Tarantino avait, à l'origine, l'intention de réaliser ce film en amateur, avec des moyens très limités, mais l'implication de Harvey Keitel dans le projet a permis à celui-ci de prendre plus d'ampleur. Le film a connu un succès commercial modeste dans l'absolu, mais très important par rapport à son budget et fut très bien accueilli par la critique. Présenté en compétition lors de festivals de cinéma, il a remporté plusieurs récompenses. Il est désormais considéré comme un film culte dans l'histoire du cinéma indépendant et a permis à Quentin Tarantino de se faire connaître dans le milieu du cinéma, ouvrant ainsi la voie du succès pour son deuxième film, Pulp Fiction.
</p>
</section>
<section>
<h2>Pulp Fiction <button>Afficher</button></h2>
<p class="cache">
Pulp Fiction, ou Fiction pulpeuse au Québec, est un film de gangsters américain réalisé par Quentin Tarantino et sorti en 1994. Le scénario est coécrit par Tarantino et Roger Avary. Utilisant la technique de narration non linéaire, il entremêle plusieurs histoires ayant pour protagonistes des membres de la pègre de Los Angeles et se distingue par ses dialogues stylisés, son mélange de violence et d'humour et ses nombreuses références à la culture populaire. Sa distribution principale se compose notamment de John Travolta, dont la carrière est relancée par ce film, Samuel L. Jackson, Bruce Willis et Uma Thurman.
</p>
</section>
<section>
<h2>Jackie Brown <button>Afficher</button></h2>
<p class="cache">
Jackie Brown est un film policier américain écrit et réalisé par Quentin Tarantino, sorti en 1997. C'est la première fois que le réalisateur adapte un roman à l'écran, en l'occurrence Punch créole (Rum Punch) d'Elmore Leonard (1992). Le film rend hommage aux films de la blaxploitation des années 1970, plus particulièrement les films Coffy, la panthère noire de Harlem (1973) et Foxy Brown (1974), qui ont pour interprète principal la même actrice que dans Jackie Brown, à savoir Pam Grier.
</p>
</section>
<section>
<h2>Kill Bill : Volume 1 <button>Afficher</button></h2>
<p class="cache">
Kill Bill : Volume 1 (Kill Bill: Vol. 1) est un film américano-hongkongais réalisé par Quentin Tarantino, sorti en 2003. Conçu à l'origine comme un seul film, il a été séparé en deux parties en raison de sa longueur (environ quatre heures pour les deux volets réunis) pour former un diptyque. Kill Bill : Volume 2 sort ainsi quelques mois plus tard en 2004. La vengeance est le thème principal de ce film, qui comporte de nombreux hommages au cinéma hongkongais d'arts martiaux, au chanbara japonais, aux films d'exploitation et au western spaghetti. L'histoire est présentée selon un style de narration non linéaire.
</p>
</section>
<section>
<h2>Kill Bill : Volume 2 <button>Afficher</button></h2>
<p class="cache">
Kill Bill : Volume 2 (Kill Bill: Vol. 2) est un film américain réalisé par Quentin Tarantino, sorti en 2004. Il fait suite à Kill Bill : Volume 1 sorti l'année précédente, les deux étant à l'origine prévus pour n'être qu'un seul film (diptyque).
</p>
</section>
<section>
<h2>Boulevard de la mort <button>Afficher</button></h2>
<p class="cache">
Boulevard de la mort, ou À l'épreuve de la mort au Québec, (Death Proof) est un film américain réalisé par Quentin Tarantino, sorti en 2007. Avec Planète Terreur, il fait partie du double programme Grindhouse mais est sorti seul dans plusieurs pays comme la France.
</p>
</section>
<script src="main.js" defer></script>
</body>
</html>Dans cette page, les descriptions des films sont cachées par défaut. Comme dans l'exercice précédent, ajoutez des événements dans cette page pour que chaque bouton affiche ou cache la description de son film.
La difficulté de cet exercice est qu'il faut trouver le paragraphe à partir du bouton. En JavaScript il existe deux méthodes pour descendre et monter dans l'arborescence du DOM :
querySelector() d'un élément HTML prend un paramètre un sélecteur CSS (comme document.querySelector()) et renvoie le premier élément HTML dans son intérieur qui matche avec le sélecteur CSS.
closest() fait le contraire. Elle remonte dans l'arborescence et renvoie le premier élément HTML qui matche avec le sélecteur CSS.
Dans cet exercice vous allez filtrer les éléments d'une liste à l'aide des boutons.
On vous donne le code HTML et JavaScript suivant :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>R112</title>
</head>
<body>
<h1>Étudiants</h1>
<p>
<button id="promo">Promotion</button>
<button id="tda">Groupe TDA</button>
<button id="tdb">Groupe TDB</button>
<button id="tp1">Groupe TP1</button>
<button id="tp2">Groupe TP2</button>
<button id="tp3">Groupe TP3</button>
<button id="tp4">Groupe TP4</button>
</p>
<ol id="liste-etudiants"></ol>
<script src="main.js" defer></script>
</body>
</html>let etudiants = [
{ "nom": "Adélie MICHELIER", "groupe": "tp1" },
{ "nom": "Alexandre LACOTE", "groupe": "tp1" },
{ "nom": "Alexia FOUCHARD", "groupe": "tp1" },
{ "nom": "Arthur LAMPIN", "groupe": "tp1" },
{ "nom": "Baptiste MORET", "groupe": "tp1" },
{ "nom": "Benjamin ONA", "groupe": "tp1" },
{ "nom": "Camille ROGER", "groupe": "tp1" },
{ "nom": "Caroline CLAUSEL", "groupe": "tp1" },
{ "nom": "Caroline BION", "groupe": "tp1" },
{ "nom": "Claire LAZERAT", "groupe": "tp1" },
{ "nom": "Clémentine RIGUET", "groupe": "tp1" },
{ "nom": "Damien MOURGUES", "groupe": "tp2" },
{ "nom": "Diego GROSNY", "groupe": "tp2" },
{ "nom": "Dorian BARRE", "groupe": "tp2" },
{ "nom": "Dorian VEILLAT", "groupe": "tp2" },
{ "nom": "Eddy CAVAGLIA", "groupe": "tp2" },
{ "nom": "Émilie GOAPPER", "groupe": "tp2" },
{ "nom": "Enzo COMPANY", "groupe": "tp2" },
{ "nom": "Florent CABROL", "groupe": "tp2" },
{ "nom": "Galaad PETIT", "groupe": "tp2" },
{ "nom": "Gauthier CHAMBIN", "groupe": "tp2" },
{ "nom": "Grégory DELBES", "groupe": "tp2" },
{ "nom": "Jasmine GUYONT", "groupe": "tp3" },
{ "nom": "Jérémy CARUSO", "groupe": "tp3" },
{ "nom": "Jordi KOUCH", "groupe": "tp3" },
{ "nom": "Julien VAVRILE", "groupe": "tp3" },
{ "nom": "Laura HARROUE", "groupe": "tp3" },
{ "nom": "Laury BAUDOUIN", "groupe": "tp3" },
{ "nom": "Lisa LOPEZ", "groupe": "tp3" },
{ "nom": "Lucas DAVID", "groupe": "tp3" },
{ "nom": "Ludovic CERVERA NUNEZ", "groupe": "tp3" },
{ "nom": "Madeleine MACCAGNAN", "groupe": "tp3" },
{ "nom": "Margot DELTOUR", "groupe": "tp3" },
{ "nom": "Marwane BARIKA", "groupe": "tp4" },
{ "nom": "Nathan DUNAND", "groupe": "tp4" },
{ "nom": "Nathan PELENQ", "groupe": "tp4" },
{ "nom": "Nathan MATHIEU", "groupe": "tp4" },
{ "nom": "Nelson BARKATI", "groupe": "tp4" },
{ "nom": "Nicolas HEROUARD HEUTRE", "groupe": "tp4" },
{ "nom": "Nicolas FABRE", "groupe": "tp4" },
{ "nom": "Noémie DEMOLIN", "groupe": "tp4" },
{ "nom": "Paul TIMON", "groupe": "tp4" },
{ "nom": "Paul BOUCARD", "groupe": "tp4" },
{ "nom": "Raphaël GIMENEZ", "groupe": "tp4" },
{ "nom": "Rémy MAURILLON", "groupe": "tp4" },
{ "nom": "Rémy CHARPENET", "groupe": "tp4" }
]
À chaque fois que l'utilisateur clique sur un bouton, il faut afficher les étudiants correspondants dans la liste non ordonnée (<ol>).
Refaites l'exercice 5, mais cette fois en utilisant la même fonction pour tous les boutons.