Activités JavaScript

Méthodes d'entrées

Exercice de rappel

Générer un nombre aléatoire entre 5 et 25.
Simuler le lancement de deux dés à six faces.
Améliorer votre programme pour qu'il utilise des images au lieu des nombres.
Résultat attendus

Capture d'un exemple de résultat

Télécharger les images dans votre dossier de travail.

Dé 1 — Images des dés à utiliser sans cet exercice

Dé 2 — Images des dés à utiliser sans cet exercice

Question n°1 - réponse

<script>
  // Génère un nombre aléatoire dans l'intervalle [a, b]
  function randint(a, b) {
    return Math.floor(Math.random() * (b - a + 1)) + a;
  }
  // Générer un nombre puis l'afficher
  let v = randint(5, 25);
  document.writeln("<p>Nombre aléatoire [5, 25] : ", v, "</p>");
</script>

Question n°2 - réponse

<div id="des"></div>
<script>
  // Fonction randint
  ...
  // Récupérer l'élément 
  const des = document.getElementById("des");
  let nb1 = randint(1, 6);
  let nb2 = randint(1, 6);
  des.innerHTML = "Lancement de dés : " + nb1 + " - " + nb2;
</script>

Question n°3 - réponse

<div id="des"></div>
<script>
  // Même code précédent 
  ...
  des.innerHTML = '<img src="de' + nb1 + '.jpg" alt="Dé' + nb1 + '"> ' +
    '<img src="de' + nb2 + '.jpg" alt="Dé' + nb2 + '">';
</script>

Méthodes d'entrées en JavaScript

Méthode 1 : boîte d'invite

Exemple

let name = prompt("Your name ?", "Mohamed");

Application

Ecrire un script qui saisit puis affiche la somme de deux nombres en utilisant la boite d'invite.

<div id="msg"></div>
<script>
  // Méthode 1 : boîte d'invite
  let a1 = Number(prompt("Donner a ? ", "6"));
  let b1 = Number(prompt("Donner b ? ", "6"));
  let s1 = a1 + b1;
  const msg = document.getElementById("msg");
  msg.innerHTML = a1 + " + " + b1 + " = " + s1;
</script>

Méthode 2 : Formulaire

Exemple

Soit le formulaire suivant :

Pour accéder à ces champs on peut écrire :

let nom_prenom = document.getElementById("np").value; // (1)
let age = document.f.age.value;                       // (2)

Application

Ecrire un script qui lit la valeur de deux champs numériques a et b, puis affiche leurs sommes.

Le formulaire est comme suit :

Formulaire somme — Formulaire d'application

<form action="#" method="post" name="f">
  <div><label for="a">A</label>
    <input type="number" name="a" id="a" value="9"></div>
  <div><label for="b">B</label>
    <input type="number" name="b" id="b" value="16"></div>
  <div><label for="r">Résultat</label>
    <input type="number" name="r" id="r" disabled></div>
</form>
<script>
  let a = Number(document.f.a.value);
  let b = Number(document.f.b.value);
  let s = a + b;
  document.f.r.value = s;
</script>

Méthode 3 : Boîte de confirmation

Exemple

let adult = confirm("Are you over 16 ? ")

Application

Ecrire un script qui demande à l'utilisateur s'il est stressé ou non ?

Si l'utilisateur est stressé : il lui demande de manger du chocolat,
Si l'utilisateur n'est pas stressé : il lui demande de contiuner de sourire.

<script>
const stressed = confirm("Are you stressed ? ");
if (stressed) {
  alert("Eat chocolate");
} else {
  alert("Keep smiling");
}
</script>