11480 sujets

JavaScript, DOM et API Web HTML5

Bonjour, chers amis,

Je cherche à apprendre le javascript et par la même occasion, à réaliser ce petit projet, qui me semble assez simple. Je précise que je maitrise bien le css/html.

Il s'agirait de faire défiler (sans animation ! simplement d'afficher l'une après l'autre) des images accompagnées de leurs légendes, à l'aide d'un bouton/image "suivant".
Donc, on est sur une page avec une image et sa légende, on clique sur next, et on passe à l'image/légende suivante, et ainsi de suite jusqu'à ce qu'on revienne au début.

j'ai commencé quelque chose à cette adresse, aidé par un copain :
http://qjrq.com/mimosa/javascript-essai.html

Le js est ici:
http://qjrq.com/mimosa/javascript.js

Mais je n'ai pas l'impression que ce soit la bonne méthode. D'une je ne sais pas comment revenir au début avec le bouton précédent, et deux je préfèrerais avoir les différentes images/légendes dans le html au lieu de les avoir sur le code js.

De nombreuses recherches sur google m'ont amené sur des dizaines de codes de ce genre, mais bien plus sophistiqués (animés avec des scrolls, des thumbnails etc). Or je commence tout juste à m'intéresser au javascript et du coup j'ai du mal à décortiquer et à repérer juste les fonctions qui m'intéressent.

Pensez vous que vous pourriez m'aider pour ça ?

merci beaucoup par avance, et bonne journée !
Bonsoir,

Pour commencer le JavaScript, il n'est pas inutile de commencer à apprendre les bases à l'aide de cours ou livres. Pour ma part je connais uniquement le livre DOM Scripting de Jeremy Keith (en anglais) et les articles du Opera Web Standards Curriculum portant sur JavaScript (en anglais aussi). Les deux sont de très bonnes ressources pour débuter. Côté français, je ne sais pas trop s'il y a des ouvrages de référence, mais c'est sans doute le cas.

Tu vas avoir besoin de manipuler le DOM (de préférence de manière plus subtile qu'avec ton innerHtml bien crade Smiley cligne ), et d'utiliser quelques éléments de syntaxe JavaScript tels qu'un Array pour stocker des valeurs, par exemple. L'usage de switch ne me semble pas bien intéressant ici. Ton code a aussi pour défaut de répéter plusieurs fois la même chose.

La première chose à faire (en dehors des apprentissages élémentaires), c'est décider comment ça va marcher SANS JavaScript. Tu peux afficher toutes les images dans la page les unes sous les autres, afficher uniquement des vignettes avec un lien pointant vers l'image en grand, voire carrément décider que ça marchera avec JS et puis c'est tout (pas recommandé).

Si tu affiches toutes les images dans la page au départ, avec leur légende, tu dois pouvoir faire un truc sympa.

Une série d'images en HTML (5):
<div id="gallery">
  <figure>
    <img src="image1.jpg" alt="">
    <figcaption>Légende de l'image 1</figcaption>
  </figure>
  <figure>
    <img src="image2.jpg" alt="">
    <figcaption>Légende de l'image 2</figcaption>
  </figure>
  <figure>
    <img src="image3.jpg" alt="">
    <figcaption>Légende de l'image 3</figcaption>
  </figure>
  <figure>
    <img src="image4.jpg" alt="">
    <figcaption>Légende de l'image 4</figcaption>
  </figure>
</div><!--#gallery-->


Et le CSS et JavaScript qui va bien (à lire attentivement Smiley cligne ), ça pourrait donner ça par exemple:
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Galerie simplissime</title>
  <style>
  body {margin: 0; padding: 20px 50px; font-family: Arial, Helvetica, "Liberation Sans", sans-serif; color: #333; background: #EEE;}
  #gallery {width: 660px;}
  #gallery figure {display: block; margin: 20px 0; padding: 9px; border: 1px solid #DDD; background: #FFF;}
  #gallery figure > img {display:block; margin-bottom: 10px;}
  #gallery figure.show {}
  #gallery figure.hide {display: none;}
  #gallery-nav {overflow: hidden;}
  #gallery-nav a {margin: 0 10px; padding: 4px; font-size: .8em; text-decoration: none; background: #555; color: #FFF;}
  #gallery-nav .next {float: right;}
  </style>
</head>
<body>

<div id="gallery">
  <figure>
    <img src="http://farm5.static.flickr.com/4100/4752722454_b8627e923b_z.jpg" width="640" height="425" alt="">
    <figcaption>Légende de l'image 1</figcaption>
  </figure>
  <figure>
    <img src="http://farm4.static.flickr.com/3397/4629188395_ebe7768d32_z.jpg" width="640" height="425" alt="">
    <figcaption>Légende de l'image 2</figcaption>
  </figure>
  <figure>
    <img src="http://farm3.static.flickr.com/2561/4011914093_46f6612107_z.jpg" width="640" height="425" alt="">
    <figcaption>Légende de l'image 3</figcaption>
  </figure>
  <figure>
    <img src="http://farm2.static.flickr.com/1317/4552279711_f41e59dde4_z.jpg" width="640" height="425" alt="">
    <figcaption>Légende de l'image 4</figcaption>
  </figure>
</div><!--#gallery-->

<script>
// On crée des raccourcis vers les représentations dans le DOM
// des éléments qui nous intéressent
var gallery = document.getElementById('gallery'),
    galleryPics = gallery.getElementsByTagName('figure'),
    galleryTotal = galleryPics.length,
    galleryCurrent = 0;

// Fonction utilisée par masquer toutes les images sauf une
function galleryShow(index) {
  for (var num=0; num<galleryTotal; num++) {
    if (num==index) {
      galleryPics[num].className = 'show';
    } else {
      galleryPics[num].className = 'hide';
    }
  }
}

// On masque tous les éléments FIGURE sauf un
galleryShow(galleryCurrent);

// On crée un élément A pour la navigation dans la galerie, et on le rajoute
// à la fin de <div id="gallery"></div>
var galleryNav = document.createElement('p'),
    galleryNext = document.createElement('a');
galleryNav.setAttribute('id', 'gallery-nav');
galleryNext.className = 'next';
galleryNext.setAttribute('href', '#');
galleryNext.appendChild(document.createTextNode('Image suivante'));
galleryNav.appendChild(galleryNext);
gallery.appendChild(galleryNav);

// Ajout d'un gestionnaire d'évènement pour exécuter une fonction au clic
// sur le lien de navigation.
galleryNext.onclick = function(){
  // On masque toutes les images sauf la «suivante»
  // (calculée en rajoutant 1 à galleryCurrent, sauf quand on arrive au total!)
  galleryShow( (galleryCurrent+1) % galleryTotal );
  // Image changée! On incrémente galleryCurrent pour refléter le changement:
  galleryCurrent += 1;
  return false;
};
</script>

</body>
</html>

C'est relativement simple et ça marche. L'inconvénient de cette galerie-là, c'est que toutes les images seront chargées par le navigateur, y compris celles qui sont masquées. Comme elles sont à priori chargées dans l'ordre, la seule qu'on garde affichée (la première) devrait s'afficher sans retard, mais ça va user de la bande passante. Avantage: les images sont déjà chargées quand on passe à la suivante, donc affichage immédiat. Au final ça devrait être intéressant pour des images pas trop lourdes, et pas trop nombreuses (pas 50 images de 200 ko...).

Le code peut être testé directement en créant un fichier HTML en local et en l'ouvrant dans le navigateur.
Bonsoir Florent,
Merci beaucoup d'avoir pris le temps de faire une réponse si claire, accessible et détaillée. C'est très agréable.
La solution d'avoir toutes les images dans la pages html dés le départ me semble effectivement idéale. D'autre part je n'avais pas pensé à faire une version sans js. Or je vois quand même l'intérêt de le faire, ne serait-ce que pour avoir une base bien structurée, avoir le choix de la changer plus tard, etc.
Je vais maintenant passer pas mal de temps à étudier ton code et les cours Opera.
Et je poste le résultat quand j'ai fini !
Merci encore, à bientôt !
Bonjour,
un autre intérêt de prévoir comment va fonctionner le site sans javascript est de pouvoir accueillir des visiteurs qui n'ont pas javascript d'activé Smiley smile (les gens qui ont peur de javascript pour diverse faille je suppose , les gens qui ( comme moi --' ) le désactive a cause d'un site où il y a du javascript a outrance .. et qui oublie de le réactiver lol , je ne sais pas trop comment cela marche pour les lecteurs d'écrans aussi .. , fin plein de monde quoi ^^ ) et ainsi , avoir un site qui reste donc fonctionnel .
Tack för er information i "nya ansluta sig och efter så trevligt jag håller med dig. Din informativ tillägg är så ...
Hello Aldous,

I'm afraid only very few people are able to understand Swedish on this forum ! Smiley langue

Maybe you could say it again in English ?