Rendre le Web interactif: une introduction à jQuery

jQuery est une bibliothèque de scripts côté client que presque tous les sites Web modernes utilisent - elle rend les sites Web interactifs. Ce n'est pas la seule bibliothèque Javascript, mais c'est la plus développée, la plus supportée et la plus largement utilisée.

jQuery est une bibliothèque de scripts côté client que presque tous les sites Web modernes utilisent - elle rend les sites Web interactifs.  Ce n'est pas la seule bibliothèque Javascript, mais c'est la plus développée, la plus supportée et la plus largement utilisée.
Publicité

Avis sur jquery jQuery est une bibliothèque de scripts côté client que presque tous les sites Web modernes utilisent - elle rend les sites Web interactifs. Ce n'est pas la seule bibliothèque Javascript, mais c'est la plus développée, la plus supportée et la plus largement utilisée. C'est l'un des éléments constitutifs de tout site Web moderne. Mais qu'est-ce que jQuery, qu'est-ce qui le rend si populaire, et pourquoi devriez-vous vous y intéresser si vous débutez en tant que développeur web?

Qu'est-ce que jQuery?

jQuery est une extension de Javascript, une bibliothèque de fonctions et d'utilitaires Javascript qui ajoutent une touche visuelle et rendent les fonctionnalités avancées simples à implémenter dans seulement quelques lignes de code. Il est pris en charge dans les navigateurs et open source. De plus, vous pouvez également étendre les fonctionnalités de jQuery avec des plugins faciles à utiliser.

Avis sur jquery

jQuery est construit sur Javascript, mais il ajoute des méthodes et des fonctionnalités que l'on ne trouve pas en Javascript pur. Il a été créé afin de simplifier l'utilisation de Javascript et de supprimer les tracas liés à différentes implémentations Javascript dans différents navigateurs. Avec jQuery vous pouvez simplement écrire une fois, et jQuery interprétera votre code correctement pour n'importe quel navigateur.

La fonction principale de jQuery est pour la manipulation DOM (DOM est le Document Object Model), et cela signifie la structure sous-jacente de toute page Web que vous visitez. Chaque chose que vous voyez sur la page - et beaucoup que vous ne voyez pas - sont représentés dans le DOM.

jQuery n'est pas la seule bibliothèque Javascript disponible sur le marché, mais elle est la plus populaire - environ 55% des 10 000 premiers sites Web l'utilisent. Prototype, MooTools et Scriptaculous sont des alternatives populaires, mais pas aussi bien supportées.

Côté client et côté serveur

La plupart des pages Web sont générées côté serveur - MakeUseOf utilise PHP et MySQL (sous la forme de WordPress) pour extraire les données d'article d'une base de données, puis appliquer un modèle à ces données. La page résultante est envoyée à votre navigateur, interprétée et affichée pour vous. Cliquer sur un lien fait une autre demande à la base de données, et une autre page est générée. Mais que faire si vous voulez créer une sorte d'interactivité sur la page? Un formulaire qui vérifie ce que l'utilisateur tape (comme Twitter, qui compte combien de lettres il vous reste), un bouton qui affiche une boîte de dialogue, ou peut-être que vous voulez charger plus de données sans recharger la page entière?

C'est là que les scripts côté client entrent en jeu. C'est là que le client - votre navigateur - fait le gros du travail. La plupart des sites Web, celui-ci inclus, utilisent un peu des deux.

comment utiliser jquery

Pourquoi utiliser jQuery?

Flair visuel

jQuery vous permet de modifier des parties de la page Web en réponse aux actions de l'utilisateur. Comme un exemple rapide, cliquez sur ce lien - chaque lien sur la page deviendra rouge . Inutile? Peut-être, mais vous avez compris. Les diaporamas d'images sont une utilisation courante de jQuery. Équilibrer les effets visuels inutiles et les ajouts vraiment utiles à l'expérience de l'utilisateur fait partie de la compétence à être un développeur Web.

Voici une liste rapide de quelques effets vraiment impressionnants que vous pouvez réaliser.

comment utiliser jquery

Evénements faciles

Presque tous les logiciels fonctionnent sur un modèle d'événement - cliquez sur quelque chose, et un événement de clic est déclenché. Faites glisser votre doigt sur une tablette et un événement de déplacement est déclenché. Les applications "écoutent" ces événements et font quelque chose - jQuery vous permet de faire cela dans un navigateur.

Effectuer AJAX simplement

Javascript et XML asynchrones est un moyen de communiquer avec un serveur distant sans avoir à charger une autre page. Un bon exemple de ceci est le flux d'état Facebook. Essayez de faire défiler toutes vos mises à jour jusqu'à ce que vous arrivez au fond. Tu ne peux pas. Dès que vous arrivez à la fin, jQuery détecte que vous êtes proche et envoie une requête AJAX pour afficher plus de statuts.

Il les injecte ensuite dans la page en cours, sans que vous vous en rendiez compte. Vous obtenez un flux infini de mises à jour, mais elles ne sont pas toutes chargées au début.

Interfaces utilisateur avancées

Avec le plugin de base jQuery UI, vous pouvez créer des applications Web complètes en utilisant des composants de formulaire standard; barres de progression, curseurs, boutons, onglets, glisser-déposer - tout est là. Un système de thème simple vous permet de personnaliser l'aspect et la convivialité, ou vous pouvez utiliser l'un des paramètres par défaut.

Avis sur jquery

Devrais-je m'en soucier?

Si vous avez tout intérêt à développer des sites Web Quel langage de programmation à apprendre - Programmation Web Quel langage de programmation à apprendre - Programmation Web Aujourd'hui, nous allons jeter un oeil sur les différents langages de programmation Web qui alimentent l'Internet. C'est la quatrième partie d'une série de programmation pour débutants. Dans la partie 1, nous avons appris la base de ... Lire la suite, alors oui - jQuery est une chose que vous devez absolument apprendre. Si vous vous êtes déjà demandé "Comment puis-je faire X faire Y quand l'utilisateur fait Z?", Alors vous allez adorer jQuery. L'ajouter à votre site est aussi simple que d'ajouter un lien dans l'en-tête; ou dire à WordPress de le charger.

Voulez-vous apprendre jQuery? Faites-nous savoir dans les commentaires et je vais voir ce que je peux faire.

Crédits d'image: Tableau d'affichage rotatif dynamique créé à l'aide de jQuery, PistolSlut.com, graphique créé avec jQuery

In this article