This or That ?

La principale difficultée réside dans la variable this, qui peut prendre n’importe quelle valeur en JavaScript. Dans tout autre language (Java, Cpp,…), this fera toujours référence à l’objet en cours. En JavaScript, ce n’est pas aussi simple: this dépend en fait du contexte d’appel de la méthode, ce contexte pouvant être modifié par l’utilisation de apply.

Comme je sens que vous commencez à tourner de l’oeil, prenons un exemple:

function monConstructeur()
  {
     this.monAttribut = 'yop !';
  }
 
  monConstructeur.prototype = {
     maMethode: function()
     {
        console.log(this.monAttribut);
     }
  }
  var monInstance = new monConstructeur();
 
  // 'yop !'
  monInstance.maMethode();
 
  // undefined
  setTimeout(monInstance.maMethode, 1000);

A 1ère vue, les deux appels devraient tous les deux afficher ‘Yop !’, et pourtant, le 2ème appel affichera undefined, parce que this, dans ce cas précis, fera référence à l’objet global (ie: window), et non pas à notre instance. Mais ?! Pourquoi ?!! La valeur de this dépend en fait de l’invocation.

Il existe en réalité 4 patterns d’invocation de méthode en JavaScript, et la valeur de this en dépend:

1. Le pattern d’invocation de méthode

Dans le cas d’invocation de méthode, this fait référence à l’objet contenant la méthode:

var monObjet = {
     monAttribut: 'yop !',
     maMethode: function() { return this.monAttribut; }
  }; 
 
 // 'yop !'  
 monObjet.maMethode();

2. Le pattern d’invocation de fonction

Dans le cas d’une invocation de fonction, this ne devrait pas être défini, et fait pourtant référence à l’objet global. C’est une erreur de conception du language qui se verra corrigée dans la prochaine version de ECMAscript.

var maFonction = function() { return this.location; }
  // Object
  maFonction();

3. Le pattern d’invocation de constructeur

function monConstructeur(){
  this.monAttribut = 0;
}
 
var monInstance = new monConstructeur();

Lors de l’appel d’une fonction construteur préfixé par new, un nouvel objet est créé, avec un lien masqué vers le prototype de la fonction, et this est automatiquement lié à ce nouvel objet.

4. Le pattern d’invocation avec apply

La valeur de this lors de l’appel d’une fonction étant quelque peu aléatoire, il est possible de forcer la valeur de this à l’aide de apply.

Function.apply(valeurThis, ArrayArguments);

Les frameworks JavaScript fournissent généralement une méthode permettant de facilement modifier la valeur de this pour l’appel d’une fonction. Il est donc facile de régler le problème précédent.

Par exemple, avec le framework Prototype (utilisé dans le framework MVC de Palm: Mojo), on pourrait utiliser bind:

setTimeout(monInstance.maMethode.bind(monInstance), 1000);

Ou, en utilisant jQuery (1.4+):

setTimeout(jQuery.proxy(monInstance.maMethode, monInstance), 1000);

Transitions CSS

Depuis la sortie de l’iPhone il y a 3 ans Apple a introduit et ne cesse de pousser les transitions CSS, beaucoup plus adaptées à la puissance limitée (tout est relatif ) des smartphones. Avant l’arrivée des transitions, pour animer des objets HTML, on utilisait les frameworks tels jQuery. Par exemple, pour déplacer un objet de 100px vers la droite, on peut faire avec jQuery:

$('#foo').animate({left: '100px'}, 1000);

Le problème, lorsque l’on se place dans le contexte des smartphones est que tout est effectué par le processeur. La puissance de ces machines étant relativement limitée, et la batterie de courte durée, cette méthode n’est pas utilisable. Les transitions CSS (disponibles sur tous les navigateurs modernes, ce n’est pas (plus) une exclusivité webKit: Firefox, Opera, webKit) permettent de définir des animations à l’aide des CSS. Quelle est la différence me direz-vous ? La principale différence est que les animations effectuées via des transitions CSS sont accélérées graphiquement et permettent donc de libérer le processeur et, théoriquement, d’utiliser moins de batterie.

Les transitions étant encore en plein développement, les spécifications ne sont pas finales et chaque navigateur les implémente donc à l’aide d’un préfixe: -o- pour Opera, -moz- pour Firefox et -webkit- pour les navigateurs utilisant webkit (Safari, Chrome, OWB,…). Plusieurs manières permettent d’animer un objet à l’aide des transitions.

1. Animation des propriétés
Pour un sélecteur (CSS) donné, il est possible de choisir quelle(s) propriété(s) sera/seront animée(s). Par exemple, pour animer notre bloc #foo, on utiliserait les CSS suivants:

#foo{
   -webkit-transition-property:left;
   -webkit-transition-duration:1000ms;
 
   -o-transition-property:left;
   -o-transition-duration:1000ms;
 
   -moz-transition-property:left;
   -moz-transition-duration:1000ms;
}

La modification de la propriété left de l’objet #foo sera alors automatiquement animée, et de durée 1000ms.

2. Animation
Il est aussi possible de créer des animations relativement complexes, à l’aide de keyframes, par exemple (ici pour webkit):

@-webkit-keyframes 'zoomIn' 
	{
		0%{
			opacity:0;
			-webkit-transform: scale(1.0);
		}
		25%{
			opacity:1;
		}
		100%{
			opacity:0;
			bottom:20px;
			-webkit-transform: scale(3.0);
		}
	}

Ici nous définissons une animation nommée « zoomIn », et 3 « étapes ». Le passage à ces 3 étapes sera automatiquement animé.

Pour utiliser cette animation, il suffit ensuite de faire:

#foo.animate{
   -webkit-animation: zoomIn .4s ease-in;
}

Lorsque l’objet #foo aura la classe ‘animate’, il jouera automatiquement l’animation zoomIn, pendant 0.4sec, en utilisant la fonction ease-in. Cette fonction définit la vitesse de l’animation au cours du temps: ease-in étant la valeur par défaut.

3. aller plus loin
Il est possible d’utiliser le JavaScript pour spécifier des fonctions callback à exécuter à la fin d’une transition. On peut ainsi définir des animations assez complexes, complexes dans tous les sens du terme: le code définir devient vraiment très complexe, et surtout on mélange maintenant simples propriétés d’affichage avec l’animation. Je conseille d’ailleurs, dès le début, de séparer les transitions CSS, des propriétés CSS classiques.

Et j’attends avec impatience le premier SDK permettant de développer ces animations CSS, parce que actuellement, ces transitions, aussi puissantes soient-elles sont très très difficilement accessibles, et totalement impossibles à débugger…

Alors: qui sera le 1er ? Adobe ? Apple ? Google ?

Un WebKit, des WebKit

WebKit, le moteur utilisé actuellement dans Safari (y-compris la version iPhone), Chrome, le navigateur d’Android, le futur navigateur de BlackBerry, etc… n’a pas (scoop ! ) été créé par Apple mais est basé sur le projet KHTML, du groupe KDE. Ce moteur très performant a été adapté sur de nombreuses plateformes et chaque plateforme apporte ses modifications et restrictions. Ainsi, WebKit utilisé dans Safari 5 supporte des fonctionnalités non présentes dans Chrome (exemple: -webkit-backface-visibility), le navigateur de Palm/webOS ne supporte pas les box-shadow ni les gradients, etc…

Contrairement à ce que l’on pourrait donc croire, l’utilisation de WebKit simplifie sans aucun doute le travail des développeurs des systèmes, mais en aucun cas celui des développeurs Web, puisque toutes ces différences doivent être prises en compte pour obtenir un site/une application multi-plateformes.

Attention donc: il existe des WebKit, pas un seul Même si la base est évidemment la même, le résultat final sera probablement différent selon les plateformes.

- Tester et télécharger WarpKlondike
- Télécharger la version webOS pour votre Palm Pré ou Pixi
- Plus d’informations sur les transitions: Apple Developer Site

Wax Tailor  [ Trip-Hop ]
Ambiance: Zen
Albums: The train, leave it, In the mood for life
A écouter: This Train

Nouveautés
Comme à chaque version majeure (et on peut se demander comment ils font), les développeurs de ce framework ont de nouveau augmenté les performances de jQuery:

• Réécriture de l’injection HTML: 6x plus rapide!
• Utilisation d’un nouveau sélecteur, plus rapide: sizzle
• Ajout des live events dans le core de jQuery
• Nouvel objet Event
• Réécriture de la méthode offset(), beaucoup plus rapide
• Et bien plus…

Incompatibilités
Malheureusement, certaines fonctionnalités dépréciées depuis un moment ont été retirées de cette version. Les modifications à effectuer pour rendre son code compatible sont plutôt mineures, quand on sait où chercher

1. suppression de @ dans [@attr]
Le plus gros changement est la suppression de @. Une sélection comme:

$('input[@name=toto]')...

deviendra:

$('input[name=toto]')...

2. changements dans la méthode ready()
Auparavant la méthode attendait le chargement de toutes les feuilles de styles. Comme ce n’est plus le cas, tous les fichiers CSS doivent être inclus avant les scripts dans la page.

3. Ordre des sélecteurs « a, b, c »
L’ordre des sélecteurs peut varier. Les navigateurs supportant querySelectorAll (Safari, Firefox 3.1+, Opera 10+, IE8+) retourneront les éléments dans l’ordre du document alors que les autres navigateurs les retourneront (pour l’instant) dans l’ordre spécifié. Dans une prochaine version 1.3.x tous les sélecteurs séparés par des virgules seront retournés dans l’ordre du document.
Concrètement, cela signifie que dans l’exemple suivant:
DOM

<div id="c">
	Div c
  </div>
 
  <div id="b">
	Div b
  </div>
 
  <div id="a">
	Div a
  </div>

Code

$(document).ready(function()
{
    $('#a, #b, #c').each(
      function() {
         alert( $(this).attr('id') ); 
      }
   );
});

Les navigateurs supportant querySelectorAll (cf. au dessus), renverront les éléments dans l’ordre du DOM, à savoir:

c b a

Alors que les autres renverront les éléments dans l’ordre spécifié dans le sélecteur, c’est à dire:

a b c

Attention à ne pas se baser sur cet ordre donc !

Nouveautés
Cette nouvelle version de jQuery vient comme d’habitude avec son lot de nouveautés bien pratiques, parmi lesquelles:

1. nouvelle méthode closest( expr )
Cette méthode renvoie le plus proche parent correspondant à l’expression, l’élément de départ compris. Exemple:

DOM

<div class="superParent" id="main">
     <div>
        <ul id="maListe">
			<li id="15">
				<a>clique !</a>
			</li>
        </ul>
    </div>
  </div>

Code

$('a').click(function() {
  alert($(this).closest('li').attr('id'));
  alert($(this).closest('div.superParent').attr('id'));
});

L’exécution du code ci-dessus donnera le résultat suivant:

15
main

2. live events
Auparavant, les événements n’étaient pas mis à jour en temps réel sans passer par un plugin comme livequery et un appel comme celui là:

$('a') 
    .livequery('click', function(event) { 
        alert('clique !'); 
        return false; 
    });

sera tout simplement remplacé par:

$('a') 
    .live('click', function(event) { 
        alert('clique !'); 
        return false; 
    });

3. La méthode is() et selecteur not() supportent maintenant des expressions complexes, comme:

$('a:not(.selected, .highlighted)')...

Quelques liens
Pour finir, et pour en savoir plus, voici quelques liens sur jQuery:

• changelog complet: changelog jQuery 1.3
• Introduction à jQuery
• Documentation officielle: docs.jquery.com

Si vous êtes ici c’est que vous ne connaissez pas jQuery et que vous voulez en savoir plus… Alors fini le blabla
Non, jQuery n’est pas un nouvel applet Java, mais bel et bien un framework Javascript qui permet, entre autres de simplifier l’utilisation de l’ajax, mais aussi de manipuler le DOM de votre document, et tout ceci, très, très simplement!
Comme un exemple vaut souvent mieux qu’un long discours, et que de toutes façons je suis mauvais pour les discours, je vais vous démontrer sa simplicité et sa puissance en quelques exemples…

Commençons par l’exemple le plus simple. Admettons que notre document contienne un élément d’id « truc », et que nous souhaitions injecter une chaîne de caractères « bonjour ! » à l’intérieur:

$("#truc").html("bonjour !");

Au niveau du DOM, avant:

<p id="truc"></p>

…Après:

<p id="truc">bonjour !</p>

Alors, deux choses. L’accesseur « $ » permet d’accéder à un objet jQuery. Ici, d’identifiant « truc ». $( »#truc ») nous renvoie donc un objet (au sens javascript, mais aussi jQuery) qui possède de nombreuses méthodes. La méthode html() permet de modifier le contenu innerHTML de l’objet avec le contenu passé en paramètre. Simple, non ? Maintenant admettons que nous souhaitions modifier la classe utilisée par cet élément. Rien de plus simple en jQuery:

$("#truc").addClass("ma_classe");

Au niveau du DOM, avant:

<p id="truc">bonjour !</p>

…Après:

<p id="truc" class="ma_classe">bonjour !</p>

Comme vous pouvez le voir notre paragraphe possède maintenant la classe « ma_classe ». Simple, non ? Maintenant voyons un peu comment fonctionne l’Ajax… Admettons que nous ayons un script « heure.php » qui nous renvoie l’heure, sous forme de chaîne de caractères… Et que nous souhaitions modifier le contenu de notre paragraphe d’id « truc » avec le résultat de l’appel Ajax de ce script… Rien de plus simple avec jQuery:

function set_time(msg)
{
    $("#truc").html(msg);
}
 
$.post("http://mon_site/heure.php", set_time);

Au niveau du DOM, avant:

<p id="truc"></p>

…Après:

<p id="truc">Mardi 12 Juin - 18:36:45</p>

Alors, qu’est-ce que l’on voit ici ? Nous définissons tout d’abord une fonction javascript set_time() qui prend en paramètre un message msg. C’est en fait la fonction callback qui sera appelée lorsque la requête AJax aura été effectuée. Le paramètre contiendra le message renvoyé par le serveur. Cette fonction, modifie le contenu innerHTML du paragraphe d’id « truc », comme nous l’avons vu précédemment: jusque là rien de nouveau. La ligne suivante fait appel à une méthode de jQuery (d’où le $.), « post » qui effectue une requête asynchrone vers le serveur http://mon_site sur le script heure.php. Lorsque le serveur renvoie son résultat, la fonction set_time() est automatiquement appelée avec en paramètre le résultat de la requête Ajax.
Ici on a choisit de passer le nom d’une fonction javascript comme second paramètre de la méthode post(), mais il tout à fait possible de définir la fonction de manière inline:

$.post("http://mon_site/heure.php", function (msg)
{
    $("#truc").html(msg);
});

Note: le code devient vite illisible et difficile à maintenir lorsque l’on abuse d’appels inline!

Les évènements
Vous avez sans doute déjà bindé (lié) un évènement (par exemple onClick) à une fonction en javascript, par exemple avec la fonction onClick().
Cette méthode permettant de lier un évènement à un objet a plusieurs inconvénients. Le premier est que le code se retrouve mélangé avec le HTML. Le deuxième est que le code est statique: il est définit une bonne fois pour toutes lors de la création/génération de la page.
Et bien avec jQuery, ces deux inconvénients disparaissent puisqu’il est maintenant possible de binder n’importe quel évènement Javascript à n’importe quel élément de notre DOM. Ainsi, en reprenant l’exemple précédent, et en rajoutant un bouton nous obtenons le code suivant:

function set_time(msg)
{
    $("#truc").html(msg);
}
 
function envoi_requete()
{
    $.post("http://mon_site/heure.php", set_time); 
}
 
$("#mon_bouton").click( envoi_requete );

Aussi simplement que l’on modifie le contenu innerHTML d’un objet avec la méthode html(), il est possible de binder un évènement à n’importe quel objet ! La méthode click() permet de binder, comme vous l’aurez deviné, l’évènement « clique » de la souris à n’importe quel objet. Le code précédent va donc appeler la fonction envoi_requete() dès que l’utilisateur cliquera sur le bouton d’id « mon_bouton ». Cette fonction déclenchera la requête Ajax. Une fois cette requête terminée, le résultat sera injecté dans le innerHTML de l’objet d’id « truc ». A noter qu’encore une fois, il est ici tout à fait possible de définir de manière inline la fonction appelée lorsque l’évènement clique est détecté.

Pour finir…
Cette petite introduction à jQuery touche à sa fin. Non pas que je n’ai plus rien à dire: je pourrai parler des possibilités offertes par cette librairie pendant des heures, mais il commence à se faire tard, et le but de cet article était seulement de donner un petit aperçu de cette librairie et des différents domaines qu’elle touche. Avant de finir je vais cependant introduire une dernière fonction très utile et importante, la méthode

$(document).ready()

Elle est appelée une fois le DOM de la page complètement chargé. Lorsque vous utilisez jQuery, il est obligatoire de binder vos différents évènements dans cette fonction, de manière à être sûr que tout fonctionne correctement:

$(document).ready(
function ()
{
   alert('Le DOM est prêt :)'); 
});

Quelques liens

• jQuery.com: Site Officiel
• VisualjQuery: Documentation très bien faite (malheureusement plus mise à jour depuis longtemps)

Ah, et j’oubliais: merci à lolo de m’avoir fait découvrir cette petite perle

Et j’oubliais aussi: rien à voir avec jQuery, mais voilà le petit extrait musical du moment…Until the Morning – Thievery Corporation