Hooba Studios » jQuery http://www.hooba.ca/blog Sun, 11 Jul 2010 13:51:09 +0000 http://wordpress.org/?v=2.8.1 en hourly 1 Échange d’objets JSON entre PHP et JavaScript, facile grâce à jQuery http://www.hooba.ca/blog/2008/echange-dobjets-json-entre-php-et-javascript-facile-grace-a-jquery/ http://www.hooba.ca/blog/2008/echange-dobjets-json-entre-php-et-javascript-facile-grace-a-jquery/#comments Sat, 22 Nov 2008 19:28:19 +0000 Antoine Leclair http://www.hooba.ca/blog/?p=105 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):

<h2 id="nom"></h2>
<p id="prix"></p>
<p id="description"></p>

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):

<?php
  // ...
  // code qui utilise $_GET['categorie'] et $_GET['produit']
  // pour ses requêtes de base de donnée
  // ...

  $reponse['nom'] = $nom;
  $reponse['prix'] = $prix;
  $reponse['description'] = $description;

  // on a notre objet $reponse (un array en fait)
  // reste juste à l'encoder en JSON et l'envoyer

  header('Content-Type: application/json');
  echo json_encode($reponse);
?>

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).

]]> http://www.hooba.ca/blog/2008/echange-dobjets-json-entre-php-et-javascript-facile-grace-a-jquery/feed/ 0 Introduction à jQuery http://www.hooba.ca/blog/2008/introduction-a-jquery/ http://www.hooba.ca/blog/2008/introduction-a-jquery/#comments Thu, 13 Nov 2008 16:29:00 +0000 Antoine Leclair http://www.hooba.ca/blog/?p=125 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 <head> comme avec un autre script normal:

<script type="text/javascript" src="jquery-1.2.6.min.js"></script>

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:

$("<li>déconnexion</li>").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″.

]]> http://www.hooba.ca/blog/2008/introduction-a-jquery/feed/ 1