Pour cet exercice, vous travaillerez sur les fichiers basic.html et basic.js.

Vous allez modifiez le contenu du div d'identifiant box en fonction des actions de l'utilisateur:

1. Définissez le corps de la fonction setBoxContent(m). Cette fonction place dans le contenu HTML de box la chaîne de caractère dans m.
2. Regardez ce qui se passe maintenant lorsque vous ré-affichez votre page. Déduisez-en l'utilisé de l'évènement onLoad.
3. Écrivez le corps de la fonction sayHelloWorld(), qui affiche Hello, World ! dans la balise <div> en ré-utilisant setBoxContent().
4. Écrivez la fonction sayHello(id). Cette fonction prend en paramêtre l'identifiant d'un champ de formulaire et affiche la chaîne de caractère Hello, XXX ! où XXX est la valeur saisie par l'utilisateur dans le champs de formulaire d'identifiant who.
5. Lorsque l'utilisateur clic sur le bouton + item, un nouvel item est censé s'ajouter à la liste à puce du dessus. Faîtes l'implémentation de cette fonctionnalité.

Vous allez maintenant manipuler en direct les styles CSS des éléments dans la balise d'identifiant paragraph.

1. Écrivez une fonction permettant de changer la valeur de la propriété display du paragraphe pour ajouter ou retirer le paragraphe du document:
   1. Écrivez la fonction
   2. Vérifiez son fonctionnement en l'appelant depuis la console Javascript
   3. Modifier le code HTML pour appeler la fonction lors des clics sur les boutons
2. Faites de même mais en utilisant la propriété visibility
3. Écrivez une fonction permettant de changer les couleurs du paragraphe (couleur du texte et de l'arrière plan) d'après les valeurs saisies par l'utilisateur.

Pour cet exercice, vous travaillerez sur les fichiers login.html et vous créerez un fichier Javascript pour l'occasion.

1. Écrivez une fonction checkPassword. Cette fonction renvoie true si le mot de passe entré par l'utilisateur est valide, false sinon.
   • Un mot de passe est valide dès qu'il contient plus de 6 caractères.
   • Si le mot de passe n'est pas valide, on indiquera les erreurs dans la boite d'identifiant notification en la faisant apparaître puis en passant en rouge la zone de saisie en rajoutant la classe has-error au bloc div ayant la classe form-group
2. Sur le même principe, écrivez la fonction checkPseudo.
   • Un pseudo ne peut être constitué que de caractères alphanumérique et doit commencer par une minuscule (utilisez une expression régulière).
3. Lorsque le bouton reset est activé, demandez confirmation à l'utilisateur avant d'effacer le contenu du formulaire.
   • Implémentez cette fonctionnalité.
   • Modifiez la page HTML pour appeler la fonction.

Pour cet exercice, vous implémenterez une calculette basique. Vous travaillerez sur les fichiers calculator.html et js/calculator.js.

Gestion de l'affichage des nombres

Quand on clique sur un chiffre de la calculette, la fonction append2display est appelée avec le chiffre correspondant en paramêtre. Vous allez définir l'outillage permettant de maintenir synchronisé l'affichage et le calculateur interne.

1. Définissez le corps de la méthode update. Celle-ci place le contenu de la variable display dans la balise d'identifiant result de la page XHTML.
2. Re-définissez la fonction append2display pour rajouter son paramètre à la fin de la chaîne display.
3. Définissez resetMachine pour remettre l'affichage à 0.

Dorénavant, vous devez pouvoir modifier l'affichage en cliquant sur les chiffres et ré-initialiser l'affichage en cliquant sur le bouton C.

Fonctions basiques

Passez maintenant aux fonctionnement des boutons +/- et ,.

1. Définissez la fonction invert qui permet d'inverser le signe du nombre affiché.
2. Définissez la fonction comma, qui positionne une virgule à la fin du nombre courant.
3. Définissez la fonction display2number qui transforme la chaîne display en nombre à virgule flottante. Attention en JavaScript, la virgule flottante est définie par un point et non le caractère ,.

Une machine à état pour additionner

Vous allez implanter la partie calculateur comme une machine à état. Lorsqu'on clique sur un opérateur, la machine passe dans un mode qui correspond à l'opérateur demandé.

Lorsqu'on clique sur =, la machine effectue le calcul et revient dans son état initial.

1. Définnissez la fonction setMode: elle stocke le nombre courant dans une variable left et l'opérateur cliqué dans une variable operator.
2. Définissez la fonction compute
   • elle stocke le nombre courant dans une variable right.
   • elle évalue left operator right;
   • elle affiche le résultat de l'évaluation;
   • elle ré-initialise la partie calculateur.

Mémoire interne

Passez maintenant au fonctionnement des touches MC, M+, M- et MR.

1. Définissez memClear qui efface le contenu de la mémoire.
2. Définissez memPlus qui ajoute le nombre courant à la mémoire.
3. De la même manière, définissez memMinus.
4. Enfin, définissez memRecall qui remplace le nombre affiché courant par le contenu de la mémoire.