Rendre dynamique son site avec jQuery

Post Tags

A LIRE AUSSI

Par Scicasoft - Novembre, 14 2012

Bonjour tout le monde, ça fait longtemps, j’avais votre nostalgie. Et la famille ? J’espère que tout le monde va bien.

Aujourd’hui je vais vous présenter le framework JavaScript jQuery.

Bon pour les mauvais élèves comme moi qui apprennent pour oublier, JavaScript (quelques fois abrégé JS) est un langage de programmation de scripts principalement utilisé dans les pages web interactives mais aussi côté serveur. Historiquement il s’agit même du premier langage de script pour le Web. C’est un langage de programmation qui permet d’apporter des améliorations au langage HTML en permettant d’exécuter des commandes du côté client, c’est-à-dire au niveau du navigateur et non du serveur web.

J’aime bien le JavaScript mais je préfère utiliser le framewok jQuery pour aller plus vite et si « time is money » pour vous aussi, je vous le conseille vivement.

En fait, jQuery est une bibliothèque JavaScript libre qui porte sur l’interaction entre JavaScript (comprenant Ajax) et HTML, et a pour but de simplifier des commandes communes de JavaScript.

La première version date de janvier 2006.

Le framework contient notamment les fonctionnalités suivantes :

Parcours et modification du DOM (y compris le support des sélecteurs CSS et un support basique de XPath) ;
Évènements ;
Effets et animations ;
Manipulations des feuilles de style en cascade (ajout/suppression des classes, d’attributs…) ;
Ajax ;
Plugins ;
Utilitaires (type de navigateur, version du navigateur, …)

Utilisation :

Pour l’utiliser il faut avoir le framework que vous pouvez télécharger sur le site officiel de jQuery (http://jquery.com/). A l’ouverture il vous propose deux types de code : « production » et « development ».

D’accord je vous explique. Le code “production” est un code compressé pour accélérer le chargement lors de l’ouverture d’une page alors que le code “development” vous donne tous le code source sans compression que vous pouvez modifier. Eh oui j’avais oublié de vous le dire c’est open source (vive l’open source).
Je vous conseille de télécharger la version « production ».

Après le téléchargement du fichier de 32 kb, au moment où je vous parle (oups au moment où j’écris cet article) c’est à dire à sa version 1.8.2, vous l’incluez dans vos pages web où vous voulez l’utiliser comme suit :

Ensuite vous pouvez écrire vos codes jQuery. Vu que c’est du JavaScript, il sera donc entre les balises scripts comme suit :

// votre code jQuery

</script>

Quelques exemples :

Bon, maintenant je vais vous montrer quelques exemples de ce qu’on peut réaliser avec ce framework.

Récupération d’un élément DOM connaissant son id

En JavaScript pour récupérer un élément DOM qui a comme id « element1 » on fait le code suivant :

var e = document.getElementById(“element1″) ;

alors qu’en jQuery on met seulement :

var e = $(“#element1″) ;

Oui oui je sais, trop facile et c’est pas tout

manipulation des styles d’un élément

Pour manipuler le style d’un élément il y’a la méthode « css », par exemple pour changer la couleur de fond de tous les paragraphes en jaune (ben je sais que ce n’est pas joli mais bon … c’est juste un test ) il suffit de faire :

$(“p”).css(‘background-color’, ‘yellow’) ;

On peut aussi récupérer la valeur d’une propriété css d’un élément. Exemple : récuperer la largeur de l’élément qui a comme id « id1 » :

var largeur = $(“#id1″).css(‘width’) ;

Ajax :

exemple de chargement d’une page dans une balise qui a comme id « id1 »

$(“#id1″).load(“lien/de/la/page/a/charger”);

Eh j’ai oublié on peut faire des calculs mathématiques aussi :

var somme = 12+13 ;
var produit = 12*13 ;
alert(somme) ;
alert(produit) ;

lol.

Pour voir toutes les fonctionnalités de ce framework vous pouvez visiter le site de son api sur http://api.jquery.com/ qui montre toutes les méthodes et comment on les utilise.

Ce que j’aime le plus dans ce framework c’est que la communauté est vraiment active et ils développent beaucoup de plugins pour faire des slideshows, valider des formulaires, upload de fichier, … ils ont même un site spécial pour ça (http://plugins.jquery.com/).

Dans mon prochain article je vous montrerai comment créer un plugin jQuery Restez connecté sur Social Input et si vous n’avez pas mes news vous pouvez me wizz.

alert(‘Ciao’);

Source :