WebAnalyst (M2), année 2018

Cours 1: Introduction au javascript

Javascript est un langage classique côté client mais qui peut aussi être utilisé côté serveur grâce à node.js ce qui ne sera pas couvert par ce cours. Nous n’aurons pas le temps d’explorer l’ensemble des possibilités permise par ce langage pour rendre une page web plus dynamique. Je vous invite donc fortemment à suivre un cours en ligne parallèlement à ce cours (par exemple ici.

Un premier exemple simple


function agrandir() { var image = document.getElementById(“wiki-image”); image.style.width = (parseInt(image.style.width)*1.5)+“px”; console.log(image.style.width); } function retrecir() { var image = document.getElementById(“wiki-image”); image.style.width = (parseInt(image.style.width)/1.5)+“px”; console.log(image.style.width); }


<img src = "./teaching/2017/web_analyst_prog/cours.1.data/image.png" id="wiki-image" style="width:100px"> <br>
<input type="button" id="wiki-+" value ="Agrandir" onclick="agrandir()">
<input type = "button" id="wiki--" value ="Rétrécir" onclick="retrecir()">


function agrandir() //fonction est associée à l'évenement "onclick" du bouton "agrandir".
{
    var image = document.getElementById("wiki-image"); // récupère l'élément d'id "wiki-image".
    image.style.width =  (parseInt(image.style.width)*1.5)+"px"; // modifie le champ de "width" de son style.
}
function retrecir()
{
    var image = document.getElementById("wiki-image");
    image.style.width =  (parseInt(image.style.width)/1.5)+"px";
}


Si on combine avec des fonctions d’animation de CSS, ça donne le résultat sympatique suivant:


function agrandir2() { var image = document.getElementById(“wiki-image-2”); image.style.width = (parseInt(image.style.width)*1.5)+“px”; console.log(image.style.width); } function retrecir2() { var image = document.getElementById(“wiki-image-2”); image.style.width = (parseInt(image.style.width)/1.5)+“px”; console.log(image.style.width); }

Objectif du jour

Aujourd’hui, notre objectif est d’améliorer la visualisation de cette page grâce à Javascript (télégarger la page ici).

  1. En modifiant le CSS, rendez invisible toutes les images.

  2. Créer une fonction Javascript afficher(i) qui prend en paramètre un entier i et qui rend visible l’image i.jpg. De même, créer une fonction Javascript cacher(i).

Remarque. Attention, on peut modifier soit le champ visibility:hidden soit le champ display:none. Chacune de ces solutions aura un impact différent. Essayez les pour voir.

  1. En utilisant uniquement Javascript, faire une page avec trois boutons précédant, au hasard et suivant permettant d’afficher ces images les unes après les autres (une sorte de slideshow).

Remarque. Pour ne pas avoir à utiliser du HTML, il est possible de charger dans le DOM

un unique objet (ou une unique balise) img et d’en modifier le champ src.

  1. Modifier le code précédent pour faire un slideshow uniquement en javascript comme ci-dessous.



image n°

var index = 1; var image_sh = document.getElementById(“image_slideshow”); var image_nb = document.getElementById(“image_nb”); function afficher_image() { image_sh.src = “teaching/2017/web_analyst_prog/cours.1.data/galerie/images/”+index.toString()+“.jpg”; image_nb.innerHTML = index.toString(); } function prec() { if (index > 1) { index += -1; } afficher_image(); } function suivant() { if (index < 123) { index += 1; } afficher_image(); } function hasard() { index = Math.floor(Math.random() * 124); afficher_image(); } afficher_image();

  1. On va maintenant afficher les images sous forme d’une galerie sur une grille de taille 5x5. Comme il y a 123 images à afficher, il faut les repartir sur plusieurs page, comme ci dessous.



page n°

var page_index = 0; var container = document.getElementById(“container”); var page_nb = document.getElementById(“page_nb”); function afficher_gallerie() { container.innerHTML = ““; for (var i=0; i<5; i++) { var row = document.createElement(”div”); container.appendChild(row); for (var j=0; j<5; j++) { var index = page_index*25 + i*5+j+1; if (index <123) { var image = document.createElement(“img”); image.src = “teaching/2017/web_analyst_prog/cours.1.data/galerie/images/”+index.toString()+“.jpg”; image.style.height = “100px”; image.style.margin = “10px”;
row.appendChild(image); } } } page_nb.innerHTML = (page_index+1).toString()+“/5”; } function page_prec() { if (page_index > 0) { page_index += -1; } afficher_gallerie(); } function page_suivant() { if (page_index < 4) { page_index += 1;
} afficher_gallerie(); } afficher_gallerie();


Compiled the: dim. 07 janv. 2024 23:19:25 CET