Aller plus loin en JavaScript

1. Le format JSON

Pour enregistrer les informations contenues dans les variables utilisées dans les développements JavaScript, un format de données a été créé : le JSON (JavaScript Object Notation). Il consiste à stocker sous forme de chaîne de caractères tout ce qui décrit un objet JavaScript dans la perspective de pouvoir le recréer à partir de cette même chaîne de caractères. Accessoirement, ce format permet également d’envoyer les contenus de variables JavaScript vers les serveurs au travers des paramètres transférés grâce aux protocoles internet utilisés.

Le principe est de créer des blocs d’accolades regroupant les propriétés des objets entre elles en cascade, propriétés décrites simplement en indiquant le nom de la propriété, puis un deux-points (:) suivi de la valeur de la propriété encadrée par des guillemets.

La norme stipule d’encadrer à la fois les noms et les valeurs. De plus, elle préconise l’utilisation de guillemets.

2. Le prototype JSON

L’action d’énumérer la liste des propriétés d’un objet et d’en faire une chaîne de caractères se nomme la sérialisation.

Si vous tentez d’écrire une fonction de ce genre, vous...

1. Les closures

Par certains côtés, JavaScript n’est pas très intuitif. Certains comportements étant assez éloignés de ce qu’on observe dans d’autres langages de programmation, on a parfois du mal à comprendre comment les choses se passent.

Imaginons que lorsque l’utilisateur de la page web exemple clique sur le premier bouton, les articles de la page web passent en grisé l’un après l’autre, avec une temporisation de 1 seconde entre chaque.

Pour implémenter cela, nous commençons par écrire une fonction qui provoque le passage en gris d’un élément.

function passeElementEnGris(e) 
{ 
   e.style.color = 'gainsboro'; 
} 

Ensuite, nous créons une fonction qui passe en gris tous les articles de la page à raison d’un toutes les secondes.

Plusieurs fonctions JavaScript sont disponibles pour ce genre de traitement : setTimeout() et setInterval(). Elles acceptent toutes les deux en paramètres une fonction callback à exécuter et une valeur numérique. Pour setInterval(), cette valeur numérique spécifie le nombre de millisecondes qui doivent s’écouler entre deux exécutions de la fonction callback, et pour setTimeout(), elle représente le délai à attendre, en millisecondes également, avant de déclencher l’exécution de la fonction callback.

Pour cet exemple, nous utilisons plusieurs appels à la fonction setTimeout() dans une boucle.

function passeEnGris() 
{ 
   var lesArticles = document.querySelectorAll('article > p'); 
   var cpt = 0; 
   for (var article of lesArticles) 
   { 
       setTimeout(function(){passeElementEnGris(article);}...

1. Gérer les cookies

Lorsqu’on parle de données stockées en local, la première technique qui vient à l’esprit est la plus ancienne, celle des cookies. Techniquement parlant, un cookie est un petit fichier texte qui est stocké de manière transparente dans un répertoire de la machine de l’utilisateur et qui contient ce que le serveur a bien voulu y mettre, en général des données liées au site ou à la page consultée et enregistrées sous la forme de propriétés nom/valeur.

Ce peut donc être une sérialisation de l’ensemble des propriétés d’un ou de plusieurs objets JavaScript, un historique des pages visitées, les valeurs des champs précédemment remplis d’un formulaire, etc.

Un cookie est enregistré avec une date qui indique le moment à partir duquel il n’est plus valide.

Toujours de manière transparente pour l’utilisateur, lorsque le navigateur se connecte à une page web, il recherche dans le portefeuille de cookies de la machine si l’un d’entre eux correspond au domaine et à la page visitée et, s’il en trouve un, l’ajoute à l’en-tête HTTP de la demande. De ce fait, ces données sont envoyées vers le serveur à l’insu...