L3 MIASHS, Programmation Web 2, année 2022

Essayez de reproduire les exemples suivant.

Il est tout à fait autoriser d’explorer le code source HTML/CSS, mais le code JavaScript est rendu illisible.

Zoom image

Pour réaliser ceci, il suffit de lire la documentation de l’évènement oninput attaché à l’élément html input dont l’id est ex1. Cela donne le bout de code suivant:

let ex1 = document.getElementById("ex1"); // récupère l'id de l'input
ex1.oninput = function(){
    let img = document.getElementById("img1"); // récupère d'img
    img.width = 2*this.value + 100; // change sa largeur par une fonction affiche.
// alternativement, si vous n'êtes pas à l'aise avec `this`
//  img.width = 2*ex1.value + 100; 
// cela marche car ex1 est déclaré globalement. Mais c'est pas très jolie.
}

Image par image

Téléchargez ici et décompressez l’archive de tel sorte que vous ayez un répertoire pingouin avec le contenu dans le même dossier ou votre fichier HTML de rendu est situé.

Ajoutez le gif à votre page web de rendu. Si tout ce passe bien, son lien devrait être pingouin/pingouin.gif.

Vous trouverez la décomposition de ce gif image par image dans le même répertoire.

Générez en JavaScript l’élément suivant:

N’hésitez pas a regarder sur internet comment faire une boucle for en JavaScript.

Avancer en cliquant

Générez en JavaScript l’élément suivant.

Vous pouvez utiliser la valeur None de l’attribut display pour faire disparaitre de l’affichage un élément bien qu’il soit bien présent dans le DOM. Regardez l’état du DOM avec l’inspecteur pour en savoir plus.

Correction

Une simple boucle for permet de réaliser cette exercice. On l’ajoute à un élément div dont l’id est pinguouin. Il y a 18 images pinguouin-x.png avec x qui va de 0 à 17. Pour réaliser la boucle, il faut donc ajouter chaque élément à un élément qui contiendra les images. Leur associer un style peut aider à obtenir le résultat suivant.

.pingouin{
max-width:150px;
display: inline-block;
margin: 0px;
}

let containeur = document.getElementById("pinguouin3");
for (let i=0; i<18; i++){
    let img = document.createElement("img");
    img.setAttribute("class", "pinguouin");
  img.src = `pingouin/pingouin-${i}.png`;
  // version alternative img.src = "pingouin/pingouin-"+i+".png";
    containeur.appendChild(img);
}

Pour les templates litérales voir ici

Pour réaliser la version où on fait avancer l’animation en cliquant, on va utiliser l’élément de style display = None pour ne pas faire afficher du tout les images, sauf la version courante. Chaque image s’occupera d’afficher la suivante quand on cliquera dessus. On va donc adapter le code ci-dessus:

let containeur = document.getElementById("pinguouin3");
for (let i=0; i<18; i++){
    let img = document.createElement("img");
    img.setAttribute("class", "pinguouin");
    img.setAttribute("id", "ping"+i); // on donne un id unique à chaque image
    img.img_index = i;
    if (i > 0)
        img.style.display = "None"; 
        // On affiche uniquement la première image
    img.onclick = function(){
        this.style.display = "None";
        let img = document.getElementById("ping"+((this.img_index+1)%18));
        // on trouve l'image suivante
        img.style.display = "initial"; 
        // on restore sa propriété `display`. 
    }
    containeur.appendChild(img);
}

Compiled the: mer. 04 sept. 2024 12:49:54 CEST