GoupillWiki

Cette page est en lecture seule. Vous pouvez afficher le texte source, mais ne pourrez pas le modifier. Contactez votre administrateur si vous pensez qu'il s'agit d'une erreur.
====== Exercices JS ======

===== Exercice 1 : valider un champ de saisie =====

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 {{ :nsi:premiere:web:exo_saisie.zip |}}.

===== Exercice 2 : site dynamique =====

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''.

==== Aide ====

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 :

<code javascript>
node.classList.add("invisible");
</code>

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

<code javascript>
// 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");
</code>

Vous utiliserez {{ :nsi:premiere:web:exo_dyna.zip |}}.