Exercices JS

Dans la page html fournie, vous trouverez une champ de saisie et un bouton. Vous ne devez rien modifier au fichier html.

Voici le fonctionnement attendu : L'utilisateur écrit dans le champ de saisie puis valide.

• Si le champ de saisie est vide, on envoie le message, en rouge, “Vous devez écrire quelque chose !”
• Si le champ de saisie contient autre chose qu'un nombre entier, on envoie le message, en rouge, “Vous devez écrire un nombre entier !”
• Si le champ de saisie contient bien un nombre entier, on envoie le message, en vert, “Saisie validée.”
• Les messages sont envoyé dans la zone prévue à cet effet : le <div id = "messages">
• Utilisez les classes définies dans le css.
• Tout doit être fait via le fichier script_saisie.js que vous devez écrire.

Utilisez exo_saisie.zip.

Dans la page html, on utilise trois balises <a>. À l'aide du style css, on a fait en sorte qu'ils ne ressemblent pas tellement à des liens.

Ils doivent fonctionner comme des onglets. C'est le rôle des différentes classes onglet dans styles_dyna.css.

Quand on clique dessus, le contenu de la zone en-dessous doit changer.

Cette page contient constamment le contenu des trois onglets, mais seul l'un d'entre eux est visible. On fera en sorte de rendre visible ou invisible chaque contenu en fonction de l'onglet cliqué.

Pour agir sur les différents éléments, vous écrirez le script script_dyna.js.

Pour un nœud node donné – pour nous, node désignera l'un des trois <div> d'id "content_1", "content_2" ou "content_3" – on peut le rendre visible en lui ajoutant la classe css invisible définie dans le fichier css :

node.classList.add("invisible");

Pour un meilleur affichage, on souhaite également mettre en surbrillance l'onglet actif. Pour cela on doit atteindre le nœud <li> contenant la balise <a> correspondant.

Si cette balise est node, alors

// activer surbrillance : il faut enlever la classe grise
// et ajouter surbrillance
node.parentNode.classList.remove("grise");
node.parentNode.classList.add("surbrillance");

// désactiver surbrillance, c'est l'inverse
node.parentNode.classList.remove("surbrillance");
node.parentNode.classList.add("grise");

Vous utiliserez exo_dyna.zip.