Faire du Web interactif une introduction à jQuery

jQuery est une bibliothèque de scripts côté client utilisée par presque tous les sites Web modernes: 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 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 vous en soucier 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 en quelques lignes de code. Il est pris en charge sur les navigateurs et open source. De plus, vous pouvez également étendre la fonctionnalité jQuery avec des plugins faciles à utiliser..

jQuery est construit sur le javascript, mais il ajoute des méthodes et fonctionnalités non trouvées dans le javascript pur. Il a été créé dans le but de simplifier l'utilisation de Javascript et de supprimer les soucis liés à la mise en œuvre différente de Javascript dans différents navigateurs. Avec jQuery, vous ne pouvez écrire qu'une seule fois et jQuery interprétera votre code correctement pour tous les navigateurs..

La fonction principale de jQuery est destinée à la manipulation du DOM (DOM est le modèle d’objet de document) et signifie la structure sous-jacente de toute page Web visitée. Tout ce que vous voyez sur la page - et beaucoup que vous ne voyez pas - est représenté dans le DOM.

jQuery n'est pas la seule bibliothèque Javascript disponible, mais c'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 vs 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 de l'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. En cliquant sur un lien, une autre requête est envoyée à 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 le nombre de lettres qu'il reste), un bouton qui ouvre une boîte de dialogue ou peut-être souhaitez-vous charger davantage de données sans recharger toute la page?

C'est ici que script côté client entre en jeu. C'est là que le client - votre navigateur - fait le gros du travail. La plupart des sites Web, y compris celui-ci, utilisent un peu des deux.

Pourquoi utiliser jQuery?

Flair visuel

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

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

Évé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 glisser est déclenché. Applications “écoute” pour ces événements et faire quelque chose - jQuery vous permet de le faire dans un navigateur.

Effectuez AJAX simplement

Javascript asynchrone et XML est un moyen de communiquer avec un serveur distant sans avoir à charger une autre page. Le flux de statut Facebook en est un bon exemple. Essayez de faire défiler toutes vos mises à jour jusqu'à la fin. Tu ne peux pas. Dès que vous arrivez à la fin, jQuery détecte que vous êtes proche et envoie une demande AJAX pour afficher plus d'états.

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

En plus du plugin principal de jQuery UI, vous pouvez créer des applications Web complètes à l'aide de composants de formulaire standard. barres de progression, curseurs, boutons, onglets, glisser-déposer - tout y est. Un système de thématisation simple vous permet de personnaliser l’apparence, ou vous pouvez utiliser l’une des valeurs par défaut..

Devrais-je m'inquiéter?

Si vous êtes intéressé par le développement de sites Web Langage de programmation à apprendre - Programmation Web Quel langage de programmation à apprendre - Programmation Web Aujourd'hui, nous allons examiner les différents langages de programmation Web qui propulsent Internet. Ceci est la quatrième partie d'une série de programmation pour débutants. Dans la partie 1, nous avons appris les bases 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 de lui 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 verrai ce que je peux faire.

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