Bases de HTML et de JavaScript

L’objectif de cet atelier est de vous donner quelques notions sur l’utilisation de JavaScript pour construire des pages web dynamiques.

Le comportement dynamique d’une page web peut être obtenu à l’aide d’interactions avec le serveur en récupérant depuis celui-ci des données et s’en servir pour mettre à jour son contenu (ex. : requêtes Ajax, websockets) mais il peut également être obtenu uniquement depuis le navigateur grâce à l’utilisation de JavaScript.

Les sites web utilisent souvent les 2 méthodes pour offrir une bonne expérience utilisateur.

JavaScript va essentiellement permettre de modifier le contenu d’une page web à partir de 2 caractéristiques :

  1. Capacité à intercepter des évènements qu’ils soient en rapport avec l’utilisateur (appui touche clavier, mouvements de souris…​) ou le “système” (fin de chargement d’une page, redimensionnement de fenêtre…​).

  2. Capacité à agir sur le Document Object Model (DOM)

Le Document Object Model est une structure de données arborescente qui est élaborée dans la mémoire du navigateur web lorsqu’il charge une page HTML. Toute modification de ce DOM via du code JavaScript  — par exemple, changer l’attribut src d’un nœud correspondant à une balise <img> dans le HTML — est alors immédiatement reflété à l’écran par le navigateur (→ affichage de la nouvelle image pour l’exemple considéré).

dom

Tout comme avec le CSS, même s’il est possible de mêler HTML et JavaScript au sein d’un même fichier, ceci est fortement déconseillé : il vaut mieux les placer dans des fichiers distincts de façon à bien dissocier structure/contenu et comportement des pages web.

Ci-dessous un exemple basique de page web dont le contenu, l’aspect et le comportement sont définis respectivement dans le fichier index.html, la feuille de style style.css le script client.js :

index.html 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="./css/style.css"> (1)
    <script src="./js/script.js" defer></script> (2)
    <title>Démo JS</title>
</head>
<body>
    <h1>Démo JavaScript</h1>
    <div class="btns">
        <button class="btn" id="btnOn">On</button><br>
        <button class="btn" id="btnOff">Off</button><br>
    </div>
    <div class="output">
        <img src="./img/light-bulb-off.svg" id="light-bulb" alt="">
    </div>
</body>
</html>
1 inclusion de la feuille de style CSS
2 chargement du script JavaScript à la fin du chargement de la page (→ option defer)
style.css 
.btns {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 0.5em;
  }

.btn
{
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;    
    padding: 0.5rem 1rem;
    height: 50px;
    color: white;
    font-size: 20px;
    cursor: pointer;
    outline: none;
    border: 20px;
    border-radius: 10px;
}

#btnOn
{
    background-color: rgb(125, 180, 116);
}
#btnOn:hover
{
    background-color: rgb(67, 220, 2);
}
#btnOff
{
    background-color: rgb(243, 162, 155);
}
#btnOff:hover
{
    background-color: rgb(203, 46, 46);
}

.output {
    display: flex;
    flex-direction: row;
    justify-content: center;    
    height: 100px;
    margin: 25px;
}
script.js 
function lightOn(isOn) {
    var lightBulb = document.getElementById('light-bulb');
    if(isOn) {
        console.log("fired ON");
        lightBulb.src = "./img/light-bulb-on.svg"
    } else {
        console.log("fired OFF");
        lightBulb.src = "./img/light-bulb-off.svg"
    }
}

var switchOn = document.getElementById('btnOn');
var switchOff = document.getElementById('btnOff');

switchOn.addEventListener("click", () => {lightOn(true)})
switchOff.addEventListener("click", () => {lightOn(false)})

💻 Travail n° 1 Changeons de cap !

🎯 Travail à faire :

  1. Décompresser l’archive de la démo zip dans le répertoire racine de votre site web personnel (→ C:\Users\ <compte> \Documents\public_html en principe)

  2. Étudier le code source

  3. Modifier les différents fichiers pour ajouter à la page web un slider qui permet de faire tourner un pointeur comme illustré ci-dessous :

    Consignes :

    • La balise HTML pour faire un slider est <input type="range" …​>

    • L’évènement généré lorsqu’on agit sur le slider se nomme “input”. La valeur du slider est alors accessible avec l’attribut target.value de l’évènement.

      Exemple :
      slider.addEventListener("input", (e) => {console.log(e.target.value)}); (1)
      1 Affiche dans la console JavaScript la valeur du slider sur lequel on vient d’agir

    • La propriété CSS qui permet de faire tourner un élément est
      transform: rotate(<angle>deg)
      avec <angle> qui représente l’angle de rotation désiré

    • en JavaScript on peut élaborer des chaînes de caractères à partir du contenu de variables numériques

      Exemple :
      const nbPattesInsecte = 6;
var str = "Les insectes ont " + nbPattesInsecte + " pattes";
console.log(str);
// Affiche :
// Les insectes ont 6 pattes

🞄  🞄  🞄