Mis à jour le 14/03/2018
  • 10 heures
  • Facile

Ce cours est visible gratuitement en ligne.

Vous pouvez être accompagné et mentoré par un professeur particulier par visioconférence sur ce cours.

J'ai tout compris !

D'autres plugins utiles

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Nous pourrions continuer d'écrire des dizaines et des dizaines de chapitres sur des plugins que nous recommandons ! Malheureusement, on ne peut pas s'offrir ce luxe, le tutoriel ne pouvant pas accueillir une masse trop énormes de chapitres ; ce serait d'ailleurs quelque peu indigeste pour vous. :-°

Nous vous avons donc préparé une petite liste de plugins à connaître de nom, vous verrez que certains sont vraiment bien réalisés.

Gérez vos cookies en jQuery

La framework n'intègre malheureusement pas nativement une gestion des cookies. C'est bien dommage, car ceux-ci sont très utiles pour stocker des informations dans le navigateur des visiteurs. Il existe un petit plugin assez simple, qui permet d'utiliser une méthode capable de créer, modifier ou supprimer des cookies.

La première chose à faire est de le télécharger sur le dépôt Github : jQuery Cookie. Une fois inclus, vous pouvez utiliser les méthodes associées.

Créer, lire et supprimer un cookie

La méthode principale est $.cookie(). Pour créer un nouveau cookie très simplement, il suffit de passer deux arguments : son nom, et sa valeur.

$.cookie('tutoriel', 'jQuery'); // créé un cookie « tutoriel » de valeur « jQuery »

Vous pouvez également spécifier le moment où le cookie expirera, et également le domaine où il est accessible, grâce à un objet et des propriétés :

// créé un cookie « tutoriel » de valeur « jQuery », qui expirera dans 7 jours et accessible partout sur le site
$.cookie('tutoriel', 'jQuery', {
    expire : 7,
    path : '/'
});

Il est également possible d'utiliser un protocole HTTPS (sécurisé) dans la transmission de cookie, avec la propriété secure qu'il suffit de passer à true. Ça peut être intéressant si vous voulez protéger des données utilisateur.

Pour accéder à un cookie, vous avez juste à indiquer son nom pour récupérer sa valeur :

var tutoriel = $.cookie('tutoriel'); // récupère la valeur du cookie « tutoriel »

Pour le supprimer, il suffit de lui donner une valeur nulle, comme en PHP par exemple :

$.cookie('tutoriel', null); // le cookie « tutoriel » ne possède plus aucune valeur, il est comme supprimé

Stockez vos données avec jStorage

L'arrivée de HTML5 a amené avec elle de nouvelles fonctionnalités. On notera notamment l'API File, le Drag & Drop, mais aussi le LocalStorage. C'est un concept très pratique qui permet de stocker des données directement sur l'ordinateur de vos visiteurs, évitant ainsi d'éventuelles pertes de données ! Ça nous est tous arrivé de rédiger un texte assez long, puis de faire une fausse manipulation, pour finalement voir son dur travail envolé en moins d'une seconde. Le LocalStorage permet d'éviter cela, pour peu que le navigateur de votre visiteur soit à jour et supporte cette technologie.

Utiliser jStorage

Le LocalStorage est plutôt long à mettre en place. jStorage est un plugin jQuery permettant de simplifier grandement son utilisation. Il est téléchargeable sur son dépôt Github : jStorage.

Stocker les données

La première chose à connaître est l'objet qui va nous permettre d'accéder aux différentes méthodes du plugin. Il s'agit de $.jStorage. Vous devrez utiliser la méthode set(), avec deux arguments, pour stocker des données textuelles. Exemple :

var contenu = $('#contenu').val(); // on récupère le contenu d'un élément de formulaire

$.jStorage.set('texte', contenu); // on stocke les données grâce au LocalStorage

Plus de risque de perte de données ! Le premier argument à donner est ce qu'on appelle la clé. C'est grâce à elle que l'on va pouvoir récupérer nos données plus tard. Le deuxième argument est simplement le contenu à stocker.

Récupérer une donnée

Rien de plus simple dans ce cas-là, il suffit d'utiliser un getter (une fonction permettant d'obtenir une donnée), avec la méthode... get() ! En donnant le nom d'une clé en argument, il est possible de récupérer son contenu :

var contenu = $.jStorage.get('texte');
Méthodes de vérification

Le LocalStorage est encore une technologie instable : certains navigateurs ne la comprennent pas, et la rende inutilisable. Il peut être bon, par exemple, de vérifier que ce système est disponible sur le navigateur du visiteur, au moyen de la méthode storageAvailable() (available = « disponible » en français). Elle retournera true si le navigateur supporte le LocalStorage :

if($.jStorage.storageAvailable()){ // si le LocalStorage est disponible

    // on l'utilise ici

}

Notez que peu de navigateurs ne le supportent pas (Opéra version 10.10 notamment), mais il est tout de même bon de les prendre en compte.

De même, vous vous doutez bien que vous ne pourrez pas stocker indéfiniment de données sur l'ordinateur de vos visiteurs. Il y a donc une restriction de stockage, le plus souvent fixée à 5MB de données. Cela vous donne de la marge, mais on n'est jamais trop prudent : vérifiez qu'il reste de la place avec la méthode storageSize(), qui retourne la place disponible restante. Si cette valeur est égale à 0, il faudra penser à supprimer des données.

Supprimer une clé

Pour supprimer des données, il suffit de connaître le nom de la clé associée, et de la donner à la méthode deleteKey() qui se chargera du reste. Si vous n'avez plus besoin de certaines choses, supprimez-les ! Cela fera de la place sur le navigateur du visiteur.

$.jStorage.deleteKey('texte'); // suppression des données associées à cette clé

Si vous souhaitez en savoir plus sur le LocalStorage, nous vous invitons à lire cet excellent article.

Canvas avec jQuery

S'il y a un élément qui a fait beaucoup parler de lui avec HTML5, c'est bien Canvas. En effet, grâce à lui, il est possible de réaliser des graphismes 2D très simplement en passant par JavaScript. Voyons comment jQuery adapte ses méthodes pour rendre le dessin encore plus acessible.

jCanvas, quand jQuery rencontre Canvas

Le pari que s'est donné Caleb Evans, c'est de rendre plus facile l'utilisation des fonctions relatives au dessin dans Canvas. Il a alors créé jCanvas (versions).

Pour utiliser ce plugin, il est nécessaire de l'inclure, mais aussi d'initialiser un élément <canvas>, avec une hauteur et une largeur. Une fois fait, à vous la liberté, car il suffit d'accéder à celui-ci avec un simple sélecteur :

<canvas width="500" height="300">
    <p>Votre navigateur ne supporte pas l'élément Canvas !</p>
</canvas>
var $canvas = $('canvas'); // on accède au canvas

jQuery apporte ici une dimension pratique ; en JavaScript, il est nécessaire d'initialiser un contexte 2D, par exemple, pour commencer à dessiner. Avec jCanvas, rien à faire ! Vous pouvez en plus profiter de tous les atouts du framework, comme le chaînage de méthode..

var $canvas = $('canvas');

$canvas
    .drawArc()
    .drawLine();

Le plugin dispose d'une documentation très bien réalisée, disponible à cette adresse. Vous y trouverez tout ce que vous voulez, de la liste des différentes méthodes à l'extension du plugin lui-même !

Et voilà, vous êtes maintenant lancé dans le monde fabuleux des plugins jQuery ! C’est à vous de voler de vos propres ailes à présent, et de chercher les plugins qu'il vous faut sur la toile. Voici tout de même quelques bonnes adresses à aller consulter, vous pourriez y trouver de véritables perles :

  • jQuery Plugins, un site entièrement consacré aux plugins de jQuery ;

  • jQuery Rain, un site dans la même veine que le précédent ;

  • La Ferme du Web, un blog qui se tient à la pointe des technologies récentes.

Il en existe bien d'autres, mais nous comptons sur vous pour les trouver. ;)

Exemple de certificat de réussite
Exemple de certificat de réussite