TP - DOM

Exercice 1 : Gestion d’une bibliothèque musicale (DOM)

Nous désirons implémenter la gestion d’une bibliothèque musicale. L’utilisateur peut gérer dynamiquement la gestion de ses artistes.

Créer un document .html contenant une liste d’artiste
Ajouter un champ permettant de rajouter des éléments à la liste
Ajouter un champ permettant de supprimer un élément de la liste
Créer une nouvelle fenêtre lorsque l’utilisateur clic sur un élément de la liste. Elle affichera une photo de l’artiste et son nom (pré enregistrer des images ayant le même nom que le select de l’artiste correspondant).

TIPS

Création de liste en HTML

 <select id="mySelect" size="4">
    <option>Harry</option>
    <option>Hermione</option>
    <option>Ron</option>
    <option>Drago</option>
 </select>

Les tableaux en Javascript

/* Les tableaux */
let cars = [ "Saab","Volvo", "BMW" ];
let car = new Array("Saab","Volvo", "BMW");
let volvo = car[1];
/* Affichage dans la console de debbugage */
console.log(car);
console.log(cars);
console.log(car[0]);
console.log(cars[2]);

Afficher une chaine de caractéres dynamiquement

<button type="button" onclick="myFunction()">Changer Texte </button>
<p id="demo">Didier Deschamps</p>

function myFunction() {
   document.getElementById("demo").innerHTML = "de la montagne à cheval";
}

Récupérer les éléments d’un formulaire

<form id="form1">
    Prenom<br>
    <input type="text" name="firstname"><br>
    nom<br>
    <input type="text" name="lastname">
    <button type="button" onclick="myFunction()">entrer</button>
</form>

<p id="resultat"></p>

function myFunction(){
    let x = document.getElementById("form1");
    let texte = "";
    let i;
    for (i = 0; i < x.length; i++) {
        texte += x.elements[i].value + "<br>";
    }
    document.getElementById("resultat").innerHTML = texte;
}

Compter le nombre d’élément d’un select

function compter() {
    let taille = document.getElementById("mySelect").children.length;
    let child = document.getElementById("mySelect").children;
    document.getElementById("demo").innerHTML = taille;
    document.getElementById("first_child").innerHTML = child[0].text;
    document.getElementById("Last_child").innerHTML = child[taille-1].text;
}

Supprimer un élément d’un select

function deleteElement() {
    let name = document.getElementById("kill").value;
    let list = document.getElementById("mySelect");
    let taille = document.getElementById("mySelect").children.length;
    let child = document.getElementById("mySelect").children;
    let trouve=0;
    let i=0;
    while(i<taille && !trouve){
        if (name==child[i].text){
            trouve=1;
            list.removeChild(child[i]);
        }
        i++;
    }

Ajouter un enfant

function add_a_child() {
    let ajout = document.getElementById("add").value;
    let node = document.createElement("option");
    let textnode = document.createTextNode(ajout);
    node.appendChild(textnode);
    document.getElementById("mySelect").appendChild(node);
}

Création de nouvelles fenêtres

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>DOM</title>
    <script type="text/javascript" src="monFichier.js"></script>
</head>
<body>
    <h1 style="color:powderblue;">SUPER</h1>
    <button type="button" onclick="myFunction()">BUT</button>
    <p id="demo"></p>
    <p id="p1"> </p>
    <img id="champion" src="">
</body>
</html>

function myFunction(){
    var myWindow = window.open("", "coucou", "width=500,height=500");
    myWindow.document.write("<h1>coucou</h1>");
}

Exercice 2 : Le magasin de DVD

La société All4DVD loue et vend toujours et encore des DVDs à des particuliers. Il s’agit d’un négociant important et sa clientèle est essentiellement composée d’étudiants. Le but de cet exercice est de gérer un panier de dvd.

Un bloc magasin à gauche, qui contient les DVDs que l’on peut louer, chacun étant représenté par sa jaquette.
Un bloc choix à droite, qui contient les DVDs que l’on veut louer.
Un bloc panier au centre, qui indique le coût total de la location.

Chaque fois que l’on clique sur une jaquette dans le bloc magasin, cela aura pour effet de l’envoyer dans le bloc choix (accompagnée du texte donnant le titre du DVD) et d’augmenter la somme total dans le bloc panier.

Par contre, INVERSEMENT PROPORTIONNEL

Chaque fois qu’on clique sur une image du bloc choix, cela aura pour effet de la renvoyer dans le bloc magasin, de supprimer le texte d’accompagnement, et de diminuer la somme total du bloc panier.

À vous de jouer

Vous trouverez le squelette du code ICI (il y a même les images des films)

Exercice 3 : Le memory

Le jeu consiste en 20 cartes tournées, face cachée. Le joueur retourne 2 cartes : si elles sont identiques, il les enlève, sinon il les rabat, face cachée. Le jeu est fini lorsque toutes les paires ont été trouvées. On compte alors le nombre de tirages de cartes exécutés.

Etat initial du jeu

Exemples de recherche

À vous de jouer

Vous trouverez toutes les images nécessaires pour le jeu ICI.

Un peu d’aide

Créer une page exo3.html, et exo3.js

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Memory</title>
    </head>
    <body>
      <div id="game-board"></div>
      <button id="reset-btn">Reset</button>
      <script type="text/javascript" src="exo3.js"></script>
    </body>
</html>

Créer une fonction generateTable() en javascript, permettant de générer le tableau suivant : [1,1,2,2,3,3,4,4,5,5,6,6,7,7,8,8,9,9,10,10] Attention Afficher dans la console, le tableau pour vérifier qu’il a bien été généré.
Créer une fonction melanger() en javascript, permettant de melanger le tableau précédement créé Attention Afficher dans la console, le tableau pour vérifier qu’il a bien été mélangé.
Créer une fonction createTable() en javascript, permettant d’ajouter un tableau à la div game-boarden se basant sur le tableau généré et mélangé précédement.

exemple

Créer une fonction ajouterOnClick() en javascript, permettant d’ajouter un évenement onclick à toutes les images du document HTML (cf exercice précedent). L’évenement onclick lancera la fonction jouer
Créer une fonction enleverOnClick() en javascript, permettant d’enlever un évenement onclick à toutes les images du document HTML (cf exercice précedent). L’évenement onclick prendra la valeur “null”
Créer la fonction jouer(e) en javascript, permettant de jouer au mémory. Pour cette fonction, vous devrez :

incrémenter un compteur de cartes retournées
créer un tableau pour stocker chaque image cliquée
retourner l’image et l’afficher par rapport à son id
Si deux cartes sont retourner :
- enlever le click à toutes les images
- comparer les deux images dans un setTimeout
  - Si les deux images sont identiques : on les cache (style.visibility=“hidden”)
  - sinon on remet l’image de fond par defaut
  - et quoi qu’il arrive on remet :
    - le compteur de cartes retournées à 0
    - on vide le tableau de cartes cliquées
    - on rajoute le click à toutes les images du document html