jQuery débutant

 

Une petit introduction à jQuery en abordant les éléments clés à l’utilisation de cette librairie. Version anglaise de cet article
 

jQuery, c’est quoi ?

The Write Less, Do More est le slogan de jQuery qui donne en français Faire Plus En Codant Moins.

jQuery est une librairie javascript ayant pour but de faciliter l’écriture du code. Pour ceux qui sont familiarisés avec les design pattern, jQuery est une façade masquant toute la complexité de javascript et donc en permettant une utilisation plus facile.

jQuery simplifie l’écriture du code javascript : avec moins de code vous en faites autant si ce n’est plus.

Cette facilitation nécessite un certain apprentissage : vos habitudes vont évoluer.

 

Pourquoi utiliser jQuery ?

Même si cela reste faisable, coder en javascript sans utiliser de librairies tierces n’est pas chose aussi simple qu’elle devrait l’être.

La plupart des navigateurs implémente les fonctionnalités de javascript. Toutefois, la manière de les utiliser ou de les nommer peut différer d’un navigateur à l’autre. Pour s’en rendre compte, il suffit de jeter un œil à certaines fonctions qui sont préfixées par moz, webkit ou ms (moz pour mozilla, webkit pour chrome et ms pour internet explorer) mais qui font la même chose : vous devez prévoir tous les cas de navigateurs nécessitant des lignes de code supplémentaires. jQuery permet de vous en passer.

Une autre réponse est aussi la facilité d’apprentissage de cette librairie.

Apprendre javascript avec jQuery, une bonne idée ?

Pour certaines personnes, en particulier ceux qui connaissent javascript, apprendre
javascript en utilisant jQuery est une mauvaise idée.

Selon eux, apprendre par le biais de jQuery vous empêche de connaitre la manière dont fonctionne javascript et donc qu’en cas de problème, il sera plus difficile de le résoudre.

En effet, même si les frameworks sont faits pour faciliter la vie, dans certains cas, ils posent de nouveaux problèmes qui nécessitent une connaissance fine de javascript.

Mais la librairie jQuery est plutôt bien faite, la résolution de problème en est donc facilité. Il est cependant vrai que jQuery masque la complexité de javascript.

Cependant, il faut mettre cela en balance avec le gain de productivité obtenu avec ces librairies : vous allez coder plus vite et donc obtenir des résultats rapidement.

A cela s’ajoute une multitude de composants très sympa, souvent orientés user friendly.

Le raisonnement des puristes : pourquoi faire simple lorsque l’on peut faire compliquer ?
Le raisonnement des pragmatiques : obtenir des résultats en privilégiant la simplicité.

Enfin, il est tout à fait possible de mélanger du pur javascript avec du jQuery.

 

Utiliser jQuery

Pour télécharger jQuery : jQuery download.
La documentation jQuery : jQuery documentation

jQuery est une librairie javascript. Son utilisation nécessite donc déclarer jQuery comme source :

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

 

jQuery, premier pas

Ayez toujours en tête que ce tutoriel s’inscrit dans le contexte du jeu vidéo html5.

Souvenez vous qu’un jeu s’initialise après que tous les éléments de page aient été chargés : en javascript pur, il y a 2 manières de faire.

Mettre le code javascript après le code html, de cette façon les éléments html sont créés avant que le code javascript ne soit exécuté et il lui est ainsi possible d’accéder à tous les éléments de la page html.

Ou utiliser l’événement javascript onload pour initialiser toutes les éléments du jeu vidéo html5 : cette solution reste toutefois imparfaite car certains éléments comme par exemple des images de grandes tailles peuvent ne pas avoir eu le temps d’être chargé (du fait de leur poids) au moment où l’événement javascript onload se déclenche.

jQuery vous permet de vous affranchir de cette contrainte par le biais de l’événement jQuery ready appliqué à la page html5.

Cet événement est déclenché lorsque tous les éléments de la page html ont été chargés et pas avant. Il vous évite donc de gérer les problèmes de chargement incomplet ou de placer votre code javascript systématiquement en fin de page html5.

La survenue de l’événement jQuery ready déclenche une fonction qui est déclarée en paramètre, comme ceci :

<script type="text/javascript">// <![CDATA[
    $(document).ready(function () {
       .... code exécuté lorsque l'événement ready est déclenché ....
    });
// ]]></script>

Attention, jQuery ready n’est pas l’événement équivalent au onload javascript. Si vous souhaitez utiliser l’événement onload, il suffit s’utiliser l’événement jQuery load qui est toutefois déprécié depuis la version 1.8 :

<script type="text/javascript">// <![CDATA[
    $(document).load(function () {
       .... code exécuté lorsque l'événement load déclenché ....
    });
// ]]></script>

Notez que la documentation officielle indique que jQuery ready est incompatible avec le body onload.

Même si elle est couramment utilisée, cette manière de faire n’est toutefois plus d’actualité. L’écriture est maintenant plus contractée :

jQuery(function() { 
  // appelé lorsque le document est chargé
});

ou

$(function() { 
  // appelé lorsque le document est chargé
});

 

Le sélecteur de document jQuery

jQuery met à disposition du développeur toute une série de sélecteurs de documents. Ces sélecteurs peuvent utiliser les css ou encore des propriétés propres aux balises html.

Entre autres, vous savez probablement que vous pouvez associer à tout composant html une propriété id. A partir de cet id, il est possible de récupérer un objet du DOM (un objet javascript).

En javascript natif, l’instruction document.getElemenById(« id ») retourne cet objet javascript relatif à la balise.

Par exemple sur la balise html img, il est possible d’en récupérer un objet javascript Image :

– l’image déclarée dans le code source html

<img id="monImage" alt="" src="image.jpg" />

– l’objet javascript Image obtenu par :

var monImage = document.getElemenById("monImage");

jQuery simplifie la notation pour récupérer l’objet :

– l’objet javascript Image obtenu via jQuery:

var monImage = $("#monImage");

 

Les événements avec jQuery

jQuery met à disposition un système d’abonnement aux événements relativement simple et ceci pour tous les événements supportés par les navigateurs.

S’abonner à un événement avec jQuery

Pour abonner un objet html5, il suffit d’invoquer la méthode bind prenant en paramètres :
– le nom de l’événement ciblé;
– une fonction qui sera appelée lorsque l’événement sera levé.

Prenons l’exemple d’une image sur laquelle lorsque l’on clique un message d’alerte apparaît.

Le source html5 déclare la dépendance à jQuery et affiche une image :

<img id="monImage" alt="" src="./img/tryJQuery.jpg" />

Le code javascript suivant abonne l’image à l’événement click et affiche une alerte à l’écran lorsque l’on clique :

$(function() {
 var monImage = $("#monImage").bind("click", function() {
  alert("try jquery");
 });
});

La liste des événements disponibles :

blur focus load resize scroll unload beforeunload
click dblclick mousedown mouseup mousemove mouseover mouseout
change select submit keydown keypress keyup error

Une autre manière de faire est au lieu d’invoquer la méthode bind, vous pouvez invoquer directement la méthode relative à l’événement qui prend en paramètre uniquement la méthode appelée lorsque l’événement a lieu :

$(function() {
 var monImage = $("#monImage").click(function() {
  alert("try jquery");
 });
});

Sachez toutefois que ces méthodes ou du moins celles supportées nativement par javascript, ne sont que des alias de la méthode bind : les deux sont équivalentes.

jQuery met à disposition les méthodes suivantes :

blur() focus() load() resize() scroll() unload() click()
dblclick() mousemove() mouseover() mouseout() keydown() keypress() keyup()
change() submit() focusin() focusout() mouseenter() mouseleave() resize()
scroll() select() error()        

 

L’objet Event

Lorsqu’un événement survient, il est parfois intéressant de disposer de certaines informations relatives à l’événement comme par exemple la position du pointeur de la souris sur l’écran, la cible de l’événement ou encore le type d’événement.

Pour avoir accès à ces informations, il suffit de mettre en paramètre de la fonction un objet Event comme ceci :

$(function() {
 var monImage = $("#monImage").click(function(event) {
  alert("try jquery");
 });
});

Cet objet Event encapsule les propriétés suivantes :

altKey ctrlKey newValue screenX screenY attrChange currentTarget
offsetX offsetY attrName detail shiftKey bubbles eventPhase
originalTarget srcElement button fromElement pageX pageY target
cancelable keyCode toElement charCode layerX layerY prevValue
view clientX clientY relatedNode wheelDelta metaKey relatedTarget
which            

Elles sont toutes données quelque soit l’événement. Cependant et selon l’événement elles peuvent être non définies (valeur undefined). Plus techniquement l’objet parent Event copie chacune de ces propriétés à l’objet Event fils correspondant à l’événement levé.

L’objet Event expose les méthodes suivantes :

preventDefault() isDefaultPrevented() stopPropagation()
isPropagationStopped() stopImmediatePropagation() isImmediatePropagationStopped()

 

Conclusion

jQuery propose d’autres fonctionnalités telles que les événements personnalisés, les déclencheurs d’événements, les effets ainsi que le système des plugins. Tout ceci fera l’objet du prochain article consacré à jQuery.

 
[important]Des remarques, des améliorations, des idées, des coquilles : dites le. Faites savoir si cet article vous a été utile par un commentaire ou les réseaux sociaux.[/important]

 

Posté dans html5Taggé HTML5, javascript, jeu vidéo, jquery  |  1 commentaire

Une réponse à "jQuery débutant"

Répondre