Faire interagir JavaScript avec une page web

Compétences évaluées

Faire interagir JavaScript avec une page web

Description

Un cinéma indépendant vous a sollicité pour moderniser son site web. Il souhaite le rendre plus dynamique en ajoutant une liste de films. Il souhaite également une solution simple pour modifier lui-même cette liste de films et mettre à jour la page web.

Question 1
Avant de vous lancer dans le vif du sujet, vous devez lier le fichier film.js, qui vous servira à modifier le contenu de la page HTML, à la page HTML index.HTML. Que faites-vous ?
- Il n’y a rien à faire, le lien est fait automatiquement.
- Dans la section head, vous ajoutez la ligne :
  
  <script src="film.js"></script>
- Dans la section head, vous ajoutez la ligne :
  
  <script src="film.js" defer></script>
- Dans la section head, vous ajoutez la ligne :
  
  <link rel="stylesheet" href="film.js">
Question 2
La page HTML contient ce code :
```
    <div id="listeFilm"></div>
```
Vous voulez récupérer cet élément dans votre script JavaScript pour pouvoir l’éditer par la suite. Quel code allez-vous implémenter ?
Attention, plusieurs réponses sont possibles.
- let baliseListeFilm = document.querySelector("#listeFilm");
- let baliseListeFilm = document.getElementById("listeFilm");
- let baliseListeFilm = document.get(listeFilm)
- let baliseListeFilm = "listeFilm"

Question 3

Le site web contient un tableau comprenant une liste de films. Ce tableau est déclaré de la manière suivante :

let listeFilms = ["Star Wars", "Le Seigneur des Anneaux", "Le Hobbit", "Harry Potter"]

Vous voulez mettre chaque élément de la div “listeFilm” dans une liste à puces. Le code généré ressemblera à ceci :

<ul>
    <li>Star Wars</li>
    <li>Le Seigneur des Anneaux</li>
    <li>Le Hobbit</li>
    <li>Harry Potter</li>
</ul>

Quel code pouvez-vous implémenter pour générer ce code HTML ?

Attention, plusieurs réponses sont possibles.

let codeHtml = "<ul>"
for (let i = 0; i < listeFilms.length; i++) {
    codeHtml += `<li>${listeFilms[i]}</li>`
}
codeHtml += "</ul>"

let codeHtml = "<ul>"
for (let i = 0; i < listeFilms.length; i++) {
    codeHtml += "<li>${listeFilms[i]}</li>""
}
codeHtml += "</ul>"

let ul = document.createElement("ul")
for (let i = 0; i < listeFilms.length; i++) {
    let li = document.createElement("li")
    li.textContent = listeFilms[i]
}
ul.appendChild(li)

let ul = document.createElement("ul")
for (let i = 0; i < listeFilms.length; i++) {
    let li = document.createElement("li")
    li.textContent = listeFilms[i]
    ul.appendChild(li)
}

Faire interagir JavaScript avec une page web

Compétences évaluées

Description

Question 1

Question 2

Question 3