Laboratoire semaine 5¶

Consignes

Ce laboratoire vous permet de vous familiariser avec les notions Javascript suivantes :

getElementById() pour trouver des balises dans la page
Vérifier si un élément existe dans la page
Modifier les attributs d'une balise
Modifier le CSS d'une balise
Ajouter une nouvelle balise sur la page

Les démonstrations de la semaine 5 peuvent vous aider, ainsi que les notes de cours de la semaine 5.

Durée: finir l'énoncé avant la prochaine période de laboratoire (dans 2 semaines)

Important: Le questionnaire de ce laboratoire compte pour 2% de la session. Prenez votre temps car vous n'avez qu'un seul essai.

Le projet¶

Télécharger le projet

Le projet contient déjà tous les fichiers nécessaires.

Le HTML et CSS est déjà écrit.

Il ne reste qu'à programmer le script.

Ce qu'on veut obtenir comme résultat :

À l'ouverture de la page :

Demander son nom à l'utilisateur
Afficher le nom de l'utilisateur dans le message de salutation du header

Lorsque l'utilisateur clique sur une pièce d'ordinateur:

sa bordure devient verte
une copie de la pièce se fait dans la zone "Résumée de vos choix" à droite

Script : salutations¶

Dans le fichier constructionPC.js, écrire le code des étapes suivantes :

Demander son prenom à l'utilisateur

Rappel : prompt() permet de demander des informations à l'utilisateur
Modifier le texte du paragraphe avec l'ID "bienvenue" pour afficher le message :

"Bonjour, [prenom], bienvenue sur la page de construction de PC."

RAPPEL : document.getElementById() permet de trouver une balise dans le HTML.

Sauvegarder.

Tester.

Si rien ne se produit OU si le nom n'apparaît pas alors il y a une erreur dans le script!

Ouvrir la console et vérifier les erreurs (F12 au clavier):
Corriger les erreurs
Sauvegarder
Tester jusqu'au bon fonctionnement

Script : choix d'une carte mère¶

Nous allons d'abord programmer ce qui se produit lorsque l'utilisateur clique sur une carte mère.

Ensuite, nous allons copier le code et l'adapter aux autres pièces.

Carte mère¶

Dans le même fichier de script, après les salutations :

Créer la fonction nommée ajouterMoboAMD()

Cette fonction est déjà appelée sur le clic (onclick) de la carte mère AMD dans le HTML.

Appliquer une classe de style¶

Trouver la balise avec l'identifiant moboAMD (getElementById)
De cet élément, accéder (.) à la liste des classes de style (classList) et de ça, ajouter (add) la classe choixActif

La classe choixActif existe déjà dans le CSS, on peut donc l'ajouter par Javascript

Votre ligne de code sera donc : carteMereAMD.classList.add("choixActif"); (sauf pour le nom de variable que vous avez déclaré pour la carte mère)
Sauvegarder
Tester le clic sur la carte mère AMD
Sous la fonction, créer une autre fonction ajouterMoboIntel()
Recopier le code, en adaptant pour la carte mère Intel
- modifier l'ID à trouver (voir dans le HTML pour trouver le bon ID)
- modifier le nom de variable pour un nom significatif
- Sauvegarder
- Tester

Problème

Un problème survient si on clique sur une carte mère, puis sur l'autre : les deux deviennent vertes!

Correction

Pour corriger cela on doit retirer la classe de style choixActif de la carte mère qui n'est pas cliquée.

Étapes :

Dans chacune des fonctions, trouver l'autre carte mère (getElementById)
De la liste de classes, retirer (remove) la classe choixActif

Exemple:

carteMereIntel.classList.remove("choixActif");
Sauvegarder
Tester

S'assurer qu'une seule carte mère peut être sélectionnée à la fois.

Copier la carte dans la zone des choix¶

Maintenant que nous affichons quelle carte mère est sélectionnée, nous allons l'ajouter à droite, dans la zone Résumé des choix.

Dans la fonction d'ajout de la carte AMD, cloner la div qui contient la carte mère choisie
- Vous avez déjà la carte mère avec son ID
  
  Exemple : let carteMereAMD = document.getElementById("moboAMD");
- Cloner cette variable et l'envoyer dans une autre variable
  
  Exemple : let carteMereCopie = carteMereAMD.cloneNode(true);
  
  cloneNode : cloner la balise. Avec la valeur true, alors on clone la balise et tout son contenu.
Trouver la zone d'affichage avec son id document.getElementById("blocResume");
Ajouter la copie dans la zone d'affichage

Exemple: zoneAffichage.appendChild(carteMereCopie);
Sauvegarder
Tester

Contour vert

Si le contour vert apparaît aussi dans la zone d'affichage, c'est que vous clonez après avoir ajouté la classe.

Pour corriger : cloner avant d'appliquer la classe de style.

Problème

Si on clique plus d'une fois sur la même carte, elle s'ajoute encore et encore.

Correction

Il faut donc vérifier si la carte a déjà été ajoutée à la zone résumé avant de l'ajouter.

Lorsque la copie est faite, utiliser la variable de copie pour lui donner un nouvel ID.

Exemple : carteMereCopie.id = "choixMoboAMD";

Au tout début de la fonction, avant toute autre instruction, valider si la carte existe.

Si elle n'existe pas, alors effectuer les autres instructions.

Exemple :

function ajouterMoboAMD() {
    let carteAMDExist = document.getElementById("choixMoboAMD");
    if (carteAMDExist == null) {
        /*placer votre code existant ici*/
    }
}

Sauvegarder
Tester
Corriger les erreurs s'il y en a

Reproduisez ces étapes pour la carte Intel.

Créer une copie de la carte
Lui donner un ID unique
L'ajouter dans la zone de résumé
Valider si la carte existe déjà

Sauvegarder.

Tester.

Problème

Si on clique sur une carte, puis sur l'autre, alors les deux cartes peuvent être ajoutées.

Corrections

Remplacer l'autre carte si elle existe déjà dans la zone résumé.

La logique de validation est :

* Si l'autre carte n'est pas présente, alors ajouter 
* Si l'autre carte est présente, alors remplacer

Exemple :

/*Trouver l'autre choix*/
let autreChoix = document.getElementById("choixMoboIntel");

/*Si l'autre choix n'existe pas, ajouter*/
if (autreChoix == null) {
    zoneAffichage.appendChild(carteMereCopie);
}
else {
    /*Sinon (l'autre choix existe), alors remplacer*/
    zoneAffichage.replaceChild(carteMereCopie, autreChoix);
}

Appliquer ce correctif aux deux cartes, en adaptant le code selon la carte.

Script : le reste¶

Pour les autres pièces, il suffit de :

Déclarer les fonctions, telles que nommées dans le HTML lors de l'événement onclick
Copier-coller le code d'une carte
Adapter aux ID et au type de pièce

ATTENTION!

Faites une fonction à la fois et testez souvent!!!

Un script cesse de fonctionner dès qu'il y a une erreur rencontrée.

Il est plus facile de déboguer une fonction à la fois que de tenter de trouver une erreur parmis 6 fonctions.

Validations¶

Le HTML et CSS du projet ont déjà été validés dans le validateur.

La validation du Javascript se fait par des tests de fonctionnalité.

Essayer d'ajouter plus d'une fois la même pièce
Essayer d'ajouter les pièces opposées
Essayer d'ajouter toutes les pièces

Exercice supplémentaire : Supprimer les choix¶

Pour ceux qui voudraient un petit exercice supplémentaire :

Dans le HTML, avant la <div id="blocResume">, ajouter un bouton <button type="button">
Lorsque cliqué, le bouton appelle une fonction qui supprime le contenu de la div Résumé

MDN: vider un noeud (emptying a node) de ses enfants
Retire la classe choixActif des pièces de gauche

Questionnaire¶

Répondre au Questionnaire de la semaine

Date limite: 9 octobre 23h00

Compte pour 2% de la session

Laboratoire semaine 5¶

Le projet¶

Script : salutations¶

Script : choix d'une carte mère¶

Carte mère¶

Appliquer une classe de style¶

Copier la carte dans la zone des choix¶

Script : le reste¶

Validations¶

Exercice supplémentaire : Supprimer les choix¶

Questionnaire¶

Bravo! Vous avez terminé l'exercice! ¶