Exercice n°1 Javascript : Choix tee-shirt

book
date_range
comment0 commentaire
remove_red_eye3443 vues

Javascript exercice 

Voici un premier exercice pour apprendre le Javascript que l'on nous a donné dans notre formation web design. Il regroupe plusieurs aspects du développement web.

  • algorithmique
  • session et timeout
  • composant html basique

Enoncé de l'exercice

Pour cet exercice, il vous faudra coder la solution suivante, on nous a donné 1h30 pour la réaliser mais vous pouvez prendre davantage de temps le but étant de développer votre logique de création.

Vous devez créer un champ de texte pour le login, qui, si vous tapez votre prénom, vous donne accès à la page suivante. Si vous saisissez le mauvais prénom, vous récoltez un message d'erreur.

Lors de la connexion à la page, une session se met en place. Cette session dure 1 minute, au bout d'une minute, vous devez recharger la page pour continuer à utiliser l'application web.

L'application web en elle-même est une application pour choisir un tee-shirt, vous devez mettre en place un choix pour :

  1. La taille du tee-shirt
  2. Le type de col : évasé, en V ou rond
  3. La couleur du tee-shirt (au moins deux)

Au changement d'une de ces options, l'application devra charger le tee-shirt en question.

Visuel de l'application web

L'application web est disponible à cette adresse, vous pouvez vous en inspirer pour résoudre l'exercice. Bien que chaque ait sa propre manière de coder et d'interprêter un énoncer, ce visuel devrait vous aider.

Le nom à entrer est : Alex 

https://www.security-helpzone.com/uploads/2015-May/tee-shirt.html 

Correction de l'exerce

Voici le code entier du programme.


<!DOCTYPE html>
<html>
<head> <title>Exercice javascript numéro 1</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> #idPage { display: none; } img { max-width: 100px; max-height: 300px; } </style> <script type="text/javascript">
var timeWait = 60000; var isLoggedMember = false; var loggedWindow; var windowExpire = window.alert; var teeshirtColor = "white"; var teeshirtType = "V"; var urlNoirEvase = "http://i2.cdscdn.com/pdt2/9/6/3/1/200x200/mp01302963/rw/tshirt-col-evase-noir-zotikos-po.jpg"; var urlNoirRond = "http://solendro.com/media/catalog/product/e/m/emporio-armani-t-shirt-noir-col-rond-aigle-pas-cher-face.jpg"; var urlNoirV = "http://www.leshopparis.com/photos/584/loupe/584_039_1.jpg"; var urlBlancEvase = "http://i10.twenga.com/mode/tee-shirt-femme/tee-shirt-col-rond-tp_460635915412258575f.jpg"; var urlBlancRond = "http://www.commeuncamion.com/wp-content/thumbnails/uploads/2014/01/t-shirt-blanc-col-rond-uniqlo1.jpg1-tt-width-590-height-590-fill-1-crop-1-bgcolor-FFFFFF.jpg"; var urlBlancV = "http://static.kiabi.com/images/tee-shirt-jersey-col-v-blanc-homme-au302_1_fr1.jpg"; // expiration code setTimeout("isExpire()", timeWait); function isExpire() { console.log("Checked : expiration"); } // si le membre n'est pas connecté if (! isLoggedMember) { // tant que l'utilisateur n'a pas validé sa session while (true) { loggedWindow = confirm("Votre session va expirer, relogguez-vous !"); if (loggedWindow) { location.reload(); } } } // connection connect() { console.log("Check : connect"); var s = document.getElementById("idUser").value; console.log(s); if (s.toLowerCase() === "alex") { isLogged = true; document.getElementById("idConnected").innerHTML = "Connecté : " + s; document.getElementById("idPage").style.display = "initial"; } else { alert("Mauvais nom d'utilisateur !"); } } // attribuer le type de col pour l'image imageType(e) { console.log("Check : Image type"); var s = e.options[ e.selectedIndex ].text; teeshirtType = s; imageSet(); } // attribuer une couleur à une image function imageColor(c) { console.log("Check : Color"); teeshirtColor = c; imageSet(); } // attribuer une nouvelle image suivant les variables chargées function imageSet() { console.log('Check : Set'); if (teeshirtType === "Evasé") { if (teeshirtColor === "black") { imageUpdate(urlNoirEvase); } else if (teeshirtColor === "white") { imageUpdate(urlBlancEvase); } } else if (teeshirtType === "Rond") { if (teeshirtColor === "black") { imageUpdate(urlNoirRond); } else if (teeshirtColor === "white") { imageUpdate(urlBlancRond); } } else if (teeshirtType === "V") { if (teeshirtColor === "black") { imageUpdate(urlNoirV); } else if (teeshirtColor === "white") { imageUpdate(urlBlancV); } } } // met à jour l'image suivant son id function imageUpdate(u) { console.log('Check : Update'); document.getElementById('idImage').src = u; } </script> </head> <body> <!-- Connexion utilisateur --> <div id="idConnected"> <input id="idUser" type="text" name="username" value="Votre nom" /> <button onclick="connect();">Connexion</button> </div> <p></p> <!-- Image --> <div id="idPage"> <img id="idImage" src="" alt="Choisir un tee-shirt de fou !"/> <p></p> Col : <select name="type" onchange="imageType(this);"> <option>Evasé</option> <option>Rond</option> <option>V</option> </select> <p></p> Couleur : <input type="radio" name="c" value="white" onclick="imageColor('white');" checked="checked" />Blanc <input type="radio" name="c" value="black" onclick="imageColor('black');" checked="unchecked" />Noir <p></p> Taille : <select name="col"> <option>Taille S</option> <option>Taille XXL</option> </select> </div> </body> </html>

Articles similaires

Commentaires

Aucun commentaire

Ajouter un commentaire

Vous ne disposez pas les autorisations nécessaires pour poster un commentaire.