Hooba Studios » JavaScript

Échange d’objets JSON entre PHP et JavaScript, facile grâce à jQuery

Antoine Leclair — Sat, 22 Nov 2008 19:28:19 +0000

Sites internet AJAX avec jQuery

jQuery fourni un moyen efficace de sélectionner des éléments du DOM et de les affecter, mais il fourni aussi un moyen très simple de faire de l’échange AJAX. Il fourni des fonctions comme load(), $.get(), $.post(), $.ajax() et, mon sujet d’aujourd’hui, $.getJSON().

Cette fonction permet de faire une requête en envoyant un objet JSON, qui sera traduit en paramètres GET, et de reçevoir en réponse un objet JSON qui sera automatiquement traité.

Exemple

Pour démontrer le fonctionnement, je vous montre 3 fichiers. Le fichier HTML (un extrait):

Le fichier Javascript:

$(function(){

  // lorsque le DOM est chargé, cette fonction sera exécutée

  $.getJSON("handler.php",  // le fichier qui recevera la requête
    {"categorie": "electronique", "produit": 3},  // les paramètres
    function(data){  // la fonction qui traitera l'objet reçu
      $("#nom").html(data.nom);
      $("#prix").html(data.prix);
      $("#description").html(data.description);
  });
});

Le fichier PHP (handler.php dans ce cas):

Ce qui se produit

Lorsque le DOM de la page est chargé, jQuery envoie une requête à hanlder.php en arrière plan. La requête est un GET, donc l’URL réel demandé sera:

handler.php?categorie=electronique&produit=3

Le fichier handler.php reçoit la requête, fait les traitement nécessaire et crée un objet prêt à être envoyé. Lorsqu’il a terminé de créé son objet à envoyer, il signifit dans le header HTTP qu’il envoie une réponse JSON. Il envoie ensuite l’objet qu’il a traduit en JSON. Le script JavaScript attendait la réponse avec la fonction qui avait été passée en paramètre à $.getJSON(). L’objet est donc traité et on peut s’en servir à notre guise (dans ce cas, on affiche les informations du produit demandé).

Encore une fois, jQuery faclilite la conception

C’était donc une raison de plus d’aimer jQuery (je vous assure qu’il y en a plein d’autres là d’où elles viennent).

Introduction à jQuery

Antoine Leclair — Thu, 13 Nov 2008 16:29:00 +0000

Vous devez trouver que je fais beaucoup d’articles « Introduction à … »! Je veux simplement m’assurer que tout le monde sait au moins de quoi je parle avant d’aller plus loin.

Libraire JavaScript

jQuery est une librairie JavaScript légère et de plus en plus populaire. Il couvre, entre autres, la modification du DOM, avec ou sans animation, la gestion des évènements et le AJAX. Il ne pèse que 15Kb lorsque gzippée par le serveur. Même Microsoft est en train de l’intégrer dans sa suite Visual Studio !

Avantages d’utiliser jQuery

Pourquoi utiliser une librairie JavaScript alors qu’on pourrait tout coder à la main? Il y a plusieurs bonnes raisons, et je n’en n’énumererai que quelques unes.

Premièrement, c’est beaucoup plus rapide de programmer une fonctionnalité avec jQuery que de l’écrire à partir de rien. Il permet donc de rehausser la valeur de vos projets de conception web en diminuant le temps consacré ou bien en vous permettant d’implémenter des fonctionnalités plus poussées.

Ensuite, il est conçu pour fonctionner dans tous les navigateurs récents (ainsi qu’Internet Explorer 6). Si vous programmez souvent en JavaScript vous savez à quel point chaque navigateur offre une version différente de JavaScript et à quel point ça peut rendre le code complexe et illisible.

Aussi, le fait d’utiliser une librairie aussi poussée peut vous éviter d’avoir recours à Flash, qui est une technologie propriétaire. Flash est, encore aujourd’hui, un « gâcheur de party » lorsque le site est visionné à partir d’un téléphone.

Télécharger jQuery

Allez chercher le fichier JavaScript de production sur le site officiel de jQuery. Ensuite, il suffit de l’insérer dans votre comme avec un autre script normal:

Utilisation de base

Dans jQuery, il y a la fonction $ et le namespace $ qui contient toutes les autres fonctions.

La fonction $ a plusieurs utilitées différentes dépendemment des paramètres qu’on lui passe. Si on lui passe une fonction en paramètre, jQuery exécutera cette fonction lorsque le DOM sera chargé (sans pour autant attendre que toutes les images soient chargées). Exemple:

$(function(){ /* faire quelque chose */ });

Si on lui passe une chaîne de caractère qui contient un sélecteur CSS, il va retourner l’ensemble des noeuds qui répondent aux conditions. Exemple (qui en soit ne sert à rien):

$('ul#nav');

On peut affecter cet ensemble de noeuds avec des méthodes de jQuery. Si on voulait faire disparaître comme un panneau à glissière l’ensemble retourné de l’exemple précédent, on ferait:

$('ul#nav').slideUp('fast');

La fonction $ peut également recevoir du code HTML en paramètre. Elle créera alors un noeud (DOM element). Encore une fois, employé seul, ça ne sert pas à grand chose, mais on pourra utiliser ce noeud ailleurs. Exemple:

$("déconnexion
").appendTo("ul#nav");

Le namespace $ contient les fonctions qui ne sont pas nécessairement attachées à un noeud. Il y a entre autres certaines fonctions AJAX et les fonctions utilitaires (utilities). Exemple:

$.post('/handler.php',
  {'action': 'achat', 'produit': 434},
  function(data){/* faire quelque chose */}
);

La fonction et le namespace $ sont en fait des racourcis vers la fonction et le namepsace jQuery. Les deux lignes de code suivantes sont donc équivalentes:

$('ul#nav').slideUp('fast');
jQuery('ul#nav').slideUp('fast');

Le racourci $ a été ajouté pour accélerer le codage. Par contre, certaines autres librairies JavaScript l’utlisent aussi. Si vous faite la conception d’un site internet qui utilise plusieurs librairies, vous pouvez dire à jQuery de libérer $; il suffit d’utiliser la fonction $.noConflict().

Gestion des évènements

Vous pouvez attacher des évènements à des ensembles de noeuds retournés par la fonction $. L’avantage d’utiliser jQuery pour gérer les évènements est, encore une fois, qu’il armonise la syntaxe pour ne plus avoir à se soucier des différences entre les navigateurs. Pour associer une fonctionnalité à un clic, on utilise .click(fonction). Pour générer un clic, on peut aussi utiliser .click() (sans paramètre). Exemple:

$('#bouton').click(function(){/* faire quelque chose */});

Exemple

Avant de conclure, on va regrouper tout ce qu’on vient de voir pour faire un petit exemple. Lorsque le DOM est chargé, on va donner vie à un bouton qui permet de cacher et afficher la navigation.

$(function(){ // exécuté lorsque "DOM ready"
  $('#bouton').click(function(){
    $('ul#nav').slideToggle('fast');
  });
});

Résumé

jQuery est une librairie légère dont le coeur ne comprends pas une tonne de fonctions. Cette caractéristique rend son apprentissage plutôt rapide et sa documentation très concise. Beaucoup de plugins sont disponibles et il est facile d’en créer soi-même. Elle est donc une librarie de choix pour la conception de sites internet « web 2.0″.

Encore un mot sur les variables en JavaScript

Antoine Leclair — Sun, 09 Nov 2008 18:13:20 +0000

Dans un précédent article, je parlais de la portée des variables en JavaScript. Je veux revenir sur les variables globales pour ajouter quelques détails.

Quand on déclare une variable en dehors de tout objet ou fonction, une chose qui peut surprendre, c’est qu’on assigne en fait cette variable comme étant une propriété de window. Les notations suivantes, en dehors d’une fonction ou d’un objet, sont donc équivalentes:

var variable = 40;
variable = 40;
window.variable = 40;

On peut même pousser encore un peu plus loin et dire la même chose des fonctions. Quand on déclare une fonction, on assigne en fait la fonction à son nom. Et son nom est une propriété de window. Voici un peu de code pour rendre plus clair; encore une fois, les notations suivantes sont équivalentes:

function maFonction(){ alert("Tada!"); }
maFonction = function(){ alert("Tada!"); }
window.maFonction = function(){ alert("Tada!"); }

L’utilitée de savoir ça se révèle quand on veut passer des fonctions en paramètre à d’autres fonctions (ce qu’on appelle générallement callback function). On pourrait écrire:

function maFonction(){ alert("Tada!"); }
setTimeout(maFonction, 1000);

Mais, si on veut, on peut ne pas assigner la fonction à window et simplement passer le code en paramètre:

setTimeout(function(){ alert("Tada!"); }, 1000);

Ce genre de notation est très utilisée dans les libraries comme jQuery.

Portée des variables en JavaScript

Antoine Leclair — Tue, 28 Oct 2008 21:52:13 +0000

Les variables en JavaScript, comme dans la plupart des langages de programmation, ont une portée (variable scope). De la manière que ça fonctionne en JavaScript, elles sont soit globales ou locales.

Variables globales

Les variables globales sont accessibles et modifiables de partout dans le code. On n’a pas à les passer en paramètre pour les lire ou modifier à l’intérieur de fonctions. Pour déclarer des variables globales, on n’a qu’à la déclarer avec var en dehors d’une fonction. Sinon, on peut aussi la déclarer sans var à l’intérieur d’une fonction. Sans vouloir trop pousser, je crois que la recommandation est de toujours déclarer les variables avec var. Il faudrait donc s’assurer de déclarer la variable en dehors de toute fonction avant de l’utiliser de manière globale dans une fonction.

Variables locales

Les variables locales sont accessibles et modifiables uniquement à l’intérieur de la fonction dans laquelle elles sont déclarées. Pour les déclarer, il suffit de le faire avec var à l’intérieur de la fonction. Elles seront automatiquement détruite à la fin de l’exécution de la fonction. Ce type de variable est utile pour les algorithmes propres à la fonction. Ça évite d’exposer le fonctionnement interne d’une fonction au reste du monde afin d’aider à la modularité du code. Aussi, les variables locales évite une surpopulation de variables qui pourraient entrainer des collisions de nom de variable.

Variables statiques

Les programmeurs familiers avec d’autres langages pourraient s’attendre aux variables statiques. Ces variables sont comme les variables locales, i.e. disponibles uniquement à l’intérieur de la fonction, mais leur valeur ne se perd pas entre chaque appel de la fonction. Ce type de portée n’existe pas en JavaScript.

Exemple

var aaa = 8;    // variable globale

alert("aaa: " + aaa);    // affiche "aaa: 8"

fonctionUn();    // affiche "aaa: 11" et "bbb: 10"

alert("aaa: " + aaa);    // affiche "aaa: 11"

alert("bbb: " + bbb);    // erreur, b n'existe pas ici

fonctionDeux();    // affiche "aaa: 12"

alert("aaa: " + aaa);    // affiche "aaa: 11"

function fonctionUn(){
  aaa = 11;
  alert("aaa: " + aaa);    // aaa est globale
  var bbb = 10;    // variable locale
  alert("bbb: " + bbb);
}

function fonctionDeux(){
  var aaa = 12;    // variable locale
    // la version local sera utilisée
    // la version globale reste intouchée
  alert("aaa: " + aaa);
}

Résumé

En bref, lorsqu’une variable ne sert qu’au fonctionnement interne d’une fonction, on devrait la déclarer avec var à l’intérieur de la fonction afin qu’elle soit détruite à la fin de la fonction. Si la variable est créée lors de l’appel de la fonction, et sera encore utile par la suite, on devrait la retourner avec return. Si elle est nécessaire tout au long du script, on devrait la déclarer avec var en dehors des fonctions, au début du script ou à un autre endroit approprié.