Suite de la création d'un plugin
1ère partie : Qu'est-ce que jQuery ?
jQuery est une librairie JavaScript rapide et efficace éditée par John Resig. De nombreuses fonctionnalités sont disponibles comme Ajax, parcours et modification du DOM.
Le site officiel de jQuery est : http://www.jquery.com. A l'heure actuelle de la rédaction de cet article, jQuery en est à la version 1.3 .
Concept de Framework
Pourquoi un framework ? La puissance d'un framework est de proposer de manière simple et facile à mettre en place en ensemble de fonctionnalités. A chaque language informatique, il existe plusieurs frameworks :
- PHP
- JavaScript
- jQuery
- Prototype + Script.aculo.us
- Dojo
- ...
- JSP
- ...
Pourquoi avoir choisi jQuery ? Ayant expérimenté plusieurs développement sous Dojo et Prototype, je me suis orienté vers cette librairie pour plusieurs raisons :
- Performance : comparatif disponible sur le site de jQuery
- Mise en place simple, légèreté
- Une communauté active
- Utilisé par les plus grands du web
- FrameWork utilisé par ACTi
Je pense que ces raisons suffisent pour comprendre l'importance d'un développement avec ce framework plutôt qu'avec un autre.
Fonctionnalités et exemples
jQuery offre un panel de fonctionnalités large grâce aux plugins, mais nativement ce framework embarque une plétore de fonctionnalités pour manipuler le DOM et faire des animations sur nos pages web.
La principale fonction de jQuery est jQuery(args) ;)
Cette fonction renvoit l'objet DOM que l'on veut récupérer. Elle peut également être simplifiée par $(args), cependant elle peut porter à conflit lors d'une utilisation avec le framework Prototype.
Par exemple la page web suivante :
<html>
<body>
<p id="bar" class="foo"><a href="#">Lorem</a> Ipsum dolor sit <span style="text-decoration:underline;">amet</span></p>
<p class="foo">Consectatur icque men</p>
<p>Thea sec niom</p>
</body>
</html>
Quelques exemples de sélections :
jQuery('p') => renvoit un tableau avec les objets DOM des trois paragraphes
jQuery('p.foo') => renvoit un tableau avec les objets DOM des paragraphes dont la classe est "foo"
jQuery('p#bar') => renvoit un tableau avec les objets DOM des paragraphes dont l'id est "bar"
Des sélections plus complexes peuvent être réalisées :
jQuery('a', jQuery('p#bar')) ou jQuery('p#bar a') => renvoit un tableau avec les objets DOM des liens dans les paragraphes dont l'id est "bar"
jQuery('a[href="#]') => renvoit un tableau avec les objets DOM des liens qui ont pour destination "#"
Comme dit précédemment, la fonction jQuery() est la base du framework, cette fonction renvoit un objet DOM étendu, ainsi toutes les fonctions du framework jQuery et de ses plugins étendent cet objet.
Dans la suite de l'article, je présenterais seulement 3 fonctions : css(), attr(), ajax() utilisées par le plugin "Weather". Toutes les fonctionnalités du framework sont disponibles sur le site officiel de jQuery et agrémentées d'exemples. Je vous conseille vivement d'y aller.
La fonction css(arg1, arg2). Celle-ci fonctionne de la manière suivante, si un seul paramètre est précisé, la fonction renvoit la valeur du paramètre css choisi. Si deux sont précisés, la fonction modifie la propriété css selectionnée.
Exemple :
jQuery('p span').css('text-decoration') va renvoyer "underline". Si l'on execute : jQuery('p span').css('text-decoration', 'none'), la page web sera la suivante :
<html>
<body>
<p id="bar" class="foo"><a href="#">Lorem</a> Ipsum dolor sit <span style="text-decoration:none;">amet</span></p>
<p class="foo">Consectatur icque men</p>
<p>Thea sec niom</p>
</body>
</html>
La fonction attr(arg1, arg2). Celle-ci fonctionne de la même manière que css(),ainsi si un seul paramètre est précisé, la fonction renvoit la valeur de l'attribut choisi. Si deux sont précisés, la fonction modifie l'attribut sélectionné.
Exemple :
jQuery('p#bar a').attr('href') va renvoyer "#". Si l'on execute : jQuery('p#bar a').attr('href', 'http://www.acti.fr'), la page web sera la suivante :
<html>
<body>
<p id="bar" class="foo"><a href="http://www.acti.fr">Lorem</a> Ipsum dolor sit <span style="text-decoration:none;">amet</span></p>
<p class="foo">Consectatur icque men</p>
<p>Thea sec niom</p>
</body>
</html>
La fonction ajax() possède un seul argument écrit sous forme de tableau clés-valeurs. Elle renvoit un objet XMLHTTPRequest.
Exemple : $.ajax({
type: "POST",
url: "some.php",
data: "name=John&location=Boston",
success: function(msg){
alert( "Data Saved: " + msg );
}
});
Les différentes clés possibles sont :
- type : POST ou GET
- url : url pour récupérer l'information (page interne au domaine)
- data : les informations à passer en GET ou en POST
- dataType : le type des informations
- cache : true ou false
- async : true ou false pour un mode asynchrone ou non
- success : la valeur est forcément une fonction dont le premier argument est la réponse xml
- error : la valeur est forcément une fonction dont l'argument est l'erreur sous un format textuel
- ...
La suite dans le prochain billet
