IdentifiantMot de passe
Mot de passe oublié ?Je m'inscris ! (gratuit)

Tutoriel pour apprendre la programmation en JavaScript

précédentsommairesuivant

XIII. TP 13 : Composants Web▲

Objectifs :

  • Développer un composant web simple : Accordéon / Carousel / Galerie vidéo

XIII-A. Création d'un composant Web simple▲

Sur le Web, un composant est un programme qui permet de fournir une interface intégrable, conçue pour un usage précis, mais personnalisable par chaque développeur.

Par exemple, si je développe et diffuse un composant de galerie d'images, d'autres développeurs pourront intégrer simplement mon composant sur leur site, et y ajouter les images de leur choix.

Les composants permettent donc d'enrichir le contenu, l'esthétique, et/ou les interactions proposés par un site Web, en réutilisant du code qui n'a pas été écrit spécifiquement pour ce site.

Il existe de très nombreux composants publiés sur Internet et utilisables gratuitement. Pour la plupart, ils sont basés sur la bibliothèque « jQuery » (dont nous parlerons plus tard dans ce cours). Mais nombreux ont été conçus en JavaScript/DOM natif (aussi appelé « Vanilla JavaScript »), et peuvent donc fonctionner sans jQuery.

Note : dans le cadre de ce cours, l'usage (direct ou pas) de jQuery ne sera pas accepté.

Voici quelques exemples de composants natifs intégrables librement :

Vous pourrez trouver d'autres composants natifs sur le site Vanilla List.

À ce stade, nous allons apprendre à réaliser un composant simple, dans le sens où celui-ci ne sera pas suffisamment modulaire pour être intégré plusieurs fois sur une même page. Nous verrons plus tard comment faire cela.

XIII-A-1. Généricité et instructions d'intégration▲

Afin que notre composant puisse être intégré de manière personnalisée par chaque développeur, quels que soient le site Web en question et son contenu, il est important de définir quelques règles et abstractions.

D'abord, un composant doit être simple à intégrer, et un utilisateur de composant ne devrait jamais avoir à consulter ni modifier le code source du composant. Il va falloir donc que le composant soit suffisamment générique et configurable depuis le site Web qui l'intégrera.

Par exemple, un composant de galerie d'images doit s'adapter à une liste d'images fournie par un développeur désirant l'intégrer, et l'intégrateur ne devrait en aucun cas avoir à modifier la liste d'images dans le code source du composant.

Pour cela, un composant :

  • ne doit pas contenir de valeurs et références littérales ; (ex. : nombre d'images et/ou URL des images stockés « en dur » dans le code du composant) ;
  • doit définir et documenter les règles et contraintes éventuelles que devront respecter les intégrateurs du composant.

Exemples d'instructions d'intégration fournies par la documentation d'un composant :

  • toutes les images à afficher dans la galerie doivent être des balises <img> portant la classe carousel-img ;
  • ou encore : appeler la fonction creerGallerie() (définie par le composant) en passant en paramètres l'identifiant du DIV devant contenir la galerie, et un tableau d'URL d'image.

Prenez le temps d'analyser les instructions d'intégration des composants listés plus haut.

XIII-A-2. Exercice 1 : développer et documenter un composant simple▲

Pour mettre en pratique cette partie du chapitre, développer un des trois composants suivants, et fournir la page de documentation associée.

La page de documentation doit contenir :

  • une description concise du composant : à quoi il sert, quelles sont ses fonctionnalités et avantages éventuels ;
  • une démonstration du composant, pour le tester depuis la page ;
  • les instructions permettant d'intégrer simplement ce composant à son site ;
  • la description des fonctions et/ou paramètres éventuellement fournis par le composant ;
  • BONUS : la liste des navigateurs (et leur version) sur lesquels le composant fonctionne ;
  • BONUS : le composant et sa documentation publiés sur GitHub.

S'inspirer de la documentation des composants fournis plus haut en exemple.

Conseil pratique : pour afficher du code source sur une page HTML sans que celui-ci ne soit interprété par le navigateur, utiliser la balise <xmp>.

XIII-A-2-a. Composant : Carousel▲

Un « carousel » est un composant de galerie d'images permettant à l'utilisateur de passer d'une image à l'autre, et éventuellement d'agrandir une image en plein écran.

composant animation

Certains carousels passent automatiquement d'une image à l'autre, à l'aide d'un minuteur (setTimeout() ou setInterval()).

Pour développer un carousel, il faut maîtriser :

  • les sélecteurs DOM (getElementById(), getElementsByClassName() et/ou getElementsByTagName()) ;
  • la manipulation de styles et/ou classes CSS en JavaScript ;
  • la capture d'événements onclick ;
  • et l'opérateur modulo (%).

Solution : Jsfiddle

 
Cacher/Afficher le codeSélectionnez
 
Cacher/Afficher le codeSélectionnez
 
Cacher/Afficher le codeSélectionnez
XIII-A-2-b. Composant : Accordéon▲

Un « accordéon » est un composant proposant plusieurs rubriques à l'utilisateur, et lui permettant d'afficher le contenu d'une rubrique à la fois, en cliquant sur son titre.

Image non disponible

Pour développer un accordéon, il faut maîtriser :

  • les sélecteurs DOM (getElementById(), getElementsByClassName() et/ou getElementsByTagName()) ;
  • la manipulation de styles et/ou classes CSS en JavaScript ;
  • la capture d'événements onclick ;
  • et la gestion du scope.

Solution : Jsfiddle

 
Cacher/Afficher le codeSélectionnez
 
Cacher/Afficher le codeSélectionnez
 
Cacher/Afficher le codeSélectionnez
XIII-A-2-c. Composant : Galerie vidéo▲

Une galerie vidéo permet à l'utilisateur de visualiser une vidéo, en cliquant parmi une sélection fournie.

composant animation

Pour développer une galerie vidéo, il faut maîtriser :

  • les sélecteurs DOM (getElementById(), getElementsByClassName() et/ou getElementsByTagName()) ;
  • la capture d'événements onclick ;
  • l'intégration d'<iframe> (ex. : à l'aide de innerHTML) ;
  • et la gestion du scope.

Solution : Jsfiddle

 
Cacher/Afficher le codeSélectionnez
 
Cacher/Afficher le codeSélectionnez
 
Cacher/Afficher le codeSélectionnez
précédentsommairesuivant

Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright © 2015 Adrien Joly. Aucune reproduction, même partielle, ne peut être faite de ce site ni de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.