R112 – TP #5

Avant de commencer, créez un répertoire nommé r112-tp5 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-tp5 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.

Exercices

- Decouvrir des méthodes nouvelles
- Exercices sur les strings : https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods#active_learning_examples
- Ajouter l'attribut `target="_blank"` à tous les liens 
- les exercices avec les strings du cours de MDN sont très bons
- On prend un mot aléatoire, ça l'affiche sur des boites. On doit cliquer sur les boites pour le voir

Exercice 1

Dans cet exercice vous allez ajouter une adresse e-mail à une page web avec JavaScript.

Vous allez générer la chaîne de caractères avec l'adresse e-mail à partir de deux variables et l'ajouter dans la page. De cette façon, l'adresse e-mail ne pourra pas être scrapée sur la page.

Utilisez le code HTML et JavaScript suivant :

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>R112</title>
</head>
<body>
  <p>
    Mon adresse email est <span id="email"></span>
  </p>
  <script src="script.js" defer></script>
</body>
</html>

let avant = "thom.yorke"
let apres = "gmail.com"
// ...

Exercice 2

Dans cet exercice vous allez créer une fonction et l'appeler avec des valeurs différentes.

Faites une fonction appelée couleur qui prend trois paramètres (des nombres entiers entre 0 et 255) et renvoie une chaîne de caractères comme rgb(200, 120, 20).

Ensuite, appelez et affichez le résultat de votre fonction trois fois (avec des valeurs différentes) dans une page web. Utilisez le code HTML suivant :

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>R112</title>
</head>
<body>
  <p>
    Première couleur : <span id="couleur1"></span>
  </p>
  <p>
    Deuxième couleur : <span id="couleur2"></span>
  </p>
  <p>
    Troisième couleur : <span id="couleur3"></span>
  </p>
  <script src="script.js" defer></script>
</body>
</html>

Pour le code JavaScript, vous pouvez vous inspirer de l'exemple suivant :

let red = 20
let green = 168
let blue = 200
let text = `rgb(${red}, ${green}, ${blue})`

Exercice 3

Dans cet exercice vous allez créer une nouvelle fonction qui génère une couleur aléatoire.

Faites une fonction appelée couleurAleatoire qui ne prend pas de paramètre et qui renvoie une chaîne de caractères comme rgb(200, 120, 20), dont les trois valeurs sont aléatoires.

Ensuite, appelez et affichez le résultat de votre fonction trois fois.

Pour créer un nombre aléatoire entre 0 et 255 il faut savoir que :

La fonction Math.random() renvoie un nombre réel aléatoire entre 0 et 1
La fonction Math.floor(x) renvoie la partie entière d'un nombre x

Pour créer un nombre aléatoire entre 0 et 255 il suffit donc de faire

let nombreAleatoire = Math.floor(256*Math.random())

Exercice 4* noté

Dans cet exercice vous allez créer un bouton qui change de couleur.

Votre page web contient un bouton. À chaque fois qu'un utilisateur clique sur le bouton, le bouton prend une couleur aléatoire. Utilisez le code suivant pour cet exercice ainsi que la fonction couleurAleatoire de l'exercice précédent :

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>R112</title>
</head>
<body>
  <button>Cliquez-moi !</button>
  <script src="script.js" defer></script>
</body>
</html>

Vous pouvez modifier la couleur de fond d'un bouton avec la propriété CSS background-color comme dans le code suivant :

let btn = document.querySelector("button")
btn.style.setProperty("background-color", "rgb(200, 120, 20)")

Exercice 5

Dans cet exercice vous allez faire une page qui affiche des couleurs aléatoires.

Vous avez le document HTML suivant :

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>R112</title>
  <style>
    .conteneur { display: flex; }
    .conteneur .boite { flex: auto; height: 5rem; }
  </style>
</head>
<body>
  <div class="conteneur">
    <div class="boite"></div>
    <div class="boite"></div>
    <div class="boite"></div>
    <div class="boite"></div>
  </div>
  <div class="conteneur">
    <div class="boite"></div>
    <div class="boite"></div>
    <div class="boite"></div>
    <div class="boite"></div>
  </div>
  <script src="script.js" defer></script>
</body>
</html>

Vous devez

parcourir tous les éléments avec la classe boite (utilisez la méthode document.querySelectorAll())
pour chaque boîte, modifier la couleur de fond en utilisant la fonction couleurAleatoire() de l'exercice 3.

Exercice 6

Dans cet exercice vous allez refaire l'exercice 2 du TP #2 sans le prompt.

Prenez le code HTML et JavaScript suivant :

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>R112</title>
</head>
<body>
  Quel est votre nom ?
  <input type="text" id="nom">
  <button>Confirmer</button>
  
  <script src="script.js" defer></script>
</body>
</html>

// créer un événement

function afficherNom() {
  let input = document.querySelector("#nom")
  let nom = input.value
  alert(`Votre nom est ${nom}`)
}

Écrivez le code JavaScript nécessaire pour que lorsque l'utilisateur saisit son nom dans le formulaire et clique sur le bouton, un alert affiche son nom.

Exercice 7

Dans cet exercice, vous allez encore améliorer l'exercice précédent en n'utilisant pas d'alert.

Pour ce faire, ajoutez un paragraphe (<p>) à votre page. Lorsque l'utilisateur remplit le formulaire et clique sur le bouton, le nom s'affiche dans ce paragraphe.