Exercices DOM

stardisblue
30.9K views

Open Source Your Knowledge, Become a Contributor

Technology knowledge has to be shared and made accessible for free. Join the movement.

Create Content

Exercice 8

Grâce aux exercices précédents, vous avez pu voir

  • La manipulation du DOM (selection, edition, suppression).
  • La manipulation d'attribut/styles.
  • La gestion des interactions (evenements). Cet exercice résume l'ensemble de ces techniques pour consolider votre maîtrise.

Pour cet exercice, la Créatrice n'as pas pu être travailler à cause du confinement, les fichiers étant sur son ordinateur de travail. Elle vous à donc envoyé une chanson en format json, un fichier index.html "vide" (avec les scripts et styles importés), et un fichier style.css

  1. Ajoutez le titre de facon à avoir <h1><small>auteur -</small> Titre de la chanson</h1>

  2. Créer une div avec la classe paroles.
    Ajoutez-y les couplets, englobés dans des paragraphes <p>.
    Chaque ligne doit être séparée par un <br/> qui permet de passer à la ligne suivante. Le résultat doit ressembler à quelquechose comme:

    <div class="paroles">
      <p>
        What is love?<br />
        Baby, don't hurt me<br />
        Don't hurt, me no more<br />
        Baby, don't hurt me<br />
        Don't hurt, me no more<br />
        What is love? Yeah
      </p>
    </div>
    
  3. Ajoutez un <footer> avec un copyright © Copyright 2020 - IUT en bas de la page.

  4. [Optionnel] Vous pouvez ajouter les interacteurs de l'exercice précédent.
    Pensez par contre que vous ne pouvez sélectionner les éléments qu'une fois qu'ils ont été ajoutés à la page.

Conseils
  • Le but est de tout faire en js.
  • Observez la structure de la donnée qui vous est fournie.
  • N'hésitez pas a créer des fonctions et a structurer votre code pour simplifier la lecture de certaines opérations. Par exemple, une fonction qui permet de créer un couplet.
  • References:
    • d3-selectionref .
    • d3.select("#un_id")ref.
    • d3.selectAll(".nom_classe")ref
    • selection.remove()ref afin de supprimer un élément selection un élément parent.
    • selection.append("div")ref pour créer un div enfant
    • d3.create('div')ref.
    • selection.node()ref ou selection.nodes()(https://github.com/d3/d3-selection#selection_nodes) pour récuperer le(s) Element DOM de la sélection.
    • document.createTextNode("un texte")ref pour créer un noeud de type Textref contenant un texte.

Lors de l'éxecution, il peux vous afficher une erreur, re-executer à nouveau regle généralement le problème.

Exercice 8
Open Source Your Knowledge: become a Contributor and help others learn. Create New Content