Share
Les lecteurs avides d'Envato Tuts + viennent d'horizons très divers en termes d'expérience, de culture et de ce qu'ils cherchent à apprendre. En matière de technologie, il est facile de prendre pour acquis ceux qui débutent, en particulier si vous avez développé n'importe quel type de développement pendant une période prolongée..
Cela dit, l’un des avantages de devenir développeur est qu’une fois que vous maîtrisez un langage et des compétences particulières, vous pouvez les traduire facilement dans d’autres domaines de développement..
Dans le but de nous assurer de toucher le plus large public possible, nous visons à publier du contenu destiné directement aux débutants curieux de connaître une langue, une plate-forme ou une application donnée..
Et dans cet article, nous allons nous concentrer exclusivement sur jQuery. Plus précisément, nous allons examiner de manière approfondie tout ce que jQuery propose et comment cela peut nous aider, et nous passerons en revue certains projets qui se sont également concrétisés depuis la bibliothèque initiale..
Apprendre JavaScript: le guide complet
Nous avons créé un guide complet pour vous aider à apprendre le JavaScript, que vous soyez débutant en tant que développeur Web ou que vous souhaitiez explorer des sujets plus avancés..
Initialement publié en 2006 par John Resig, jQuery se voulait une bibliothèque JavaScript multiplateformes facilitant l’écriture de solutions côté client..
À l'époque de sa publication, cette fonctionnalité était particulièrement utile en raison des incohérences qui existaient entre les implémentations JavaScript d'Internet Explorer, de Firefox et, éventuellement, de Google Chrome (qui n'a pas été publié avant 2008)..
Tel que défini par Wikipedia:
jQuery est une bibliothèque JavaScript multiplateformes conçue pour simplifier les scripts HTML côté client. jQuery est la bibliothèque JavaScript la plus populaire actuellement utilisée, avec une installation sur 65% des 10 millions de sites Web les plus visités au monde. jQuery est un logiciel libre et open-source sous licence MIT..
En outre, le site Web jQuery lui-même indique:
jQuery est une bibliothèque JavaScript rapide, petite et riche en fonctionnalités. Il simplifie considérablement la navigation et la manipulation de documents HTML, la gestion d'événements, l'animation et Ajax grâce à une API facile à utiliser qui fonctionne sur une multitude de navigateurs. Avec une combinaison de polyvalence et d'extensibilité, jQuery a changé la façon dont des millions de personnes écrivent JavaScript.
Mais qu'est-ce que cela signifie pour nous en tant que développeurs? Le meilleur moyen pour nous de comprendre ce que la bibliothèque offre est d’examiner ce qu’elle prétend offrir..
Lorsqu'un navigateur affiche une page Web, il s'agit d'une représentation visuelle de ce qu'on appelle le DOM (ou le modèle d'objet de document). Ce modèle peut être modélisé de manière conceptuelle sous la forme d’une structure de données arborescente comportant certains nœuds ayant chacun des racines et des feuilles..
Par exemple, voyez cette image fournie par le Web Step Book:
Lorsque vous utilisez jQuery, vous pouvez facilement parcourir le contenu du DOM afin d’atteindre ou de trouver les nœuds, éléments ou valeurs que vous souhaitez récupérer..
Cela signifie que si vous recherchez le texte d'un div élément ayant un identifiant unique, facile à faire.
Accentsconagua
/ ** * Ce code recherche un div avec l'ID de "mon unique élément" * et le supprime ensuite de la vue. * / $ ('div # mon-unique-element') .hide ();Si vous essayez de faire une boucle à travers tous les envergure éléments, vous pouvez le faire aussi:
/ ** * C'est la méthode de base pour configurer une boucle dans jQuery. Il prendra * tous les éléments span de la page et vous permettra ensuite de les parcourir. * / $ ('span') .each (function () // Traite l'élément span ici);Nous examinerons cette fonctionnalité un peu plus loin dans la section suivante, car elle montrera une partie du travail supplémentaire que vous pouvez effectuer pour manipuler la page..
Certes, ces exemples sont simples, et les choses pouvez devenir plus compliqué, surtout que nous introduisons la méthode de chaînage. Par exemple:
$ excerpt.on ('keydown', fonction (evt) if ((17 === evt.keyCode || 91 === evt.keyCode) || 86 === evt.keyCode) if (-1 = == $ .inArray (evt.keyCode, keymap)) keymap.push (evt.keyCode);). on ('keyup', function () if (user_has_pasted_content (keymap))) resize_textarea (this) ; keymap = [];);À ce stade, vous n'êtes pas censé savoir ce qui se passe dans le code, mais dans le but de vous montrer à quel point jQuery peut être utile dans certaines situations grâce à l'utilisation de fonctions d'assistance et de chaînage de méthodes..
Il suffit de dire que la puissance de jQuery réside dans sa capacité à interroger le DOM (d'où le nom jQuery), puis à l'ajuster à l'aide d'une API bien documentée (qui regorge d'exemples d'utilisation de chaque fonction)..
On pourrait soutenir que tout le reste provient de cette seule fonctionnalité. Donc, avec cela dit, continuons à regarder à quoi ça ressemble.
Quand il s’agit de manipuler réellement le DOM, jQuery a beaucoup de fonctions qui nous permettent de changer ce que nos visiteurs voient.
Certaines de ces fonctions sont simples, telles que nous permettant de spectacle ou cacher éléments qui ne sont pas visibles lors du chargement d'une page. D'autres fonctions nous permettent de créer de nouveaux éléments et ajouter les à un élément existant, ou préposer les devant une liste complète.
Si vous essayez de faire une boucle à travers tous les envergure éléments pour leur ajouter un attribut de classe, vous pouvez également le faire:
/ ** * C'est la méthode de base pour configurer une boucle dans jQuery. Tous les éléments span de la page * seront ajoutés puis un attribut * de classe personnalisé leur sera ajouté. * / $ ('span') .each (function () $ (this) .addClass ('my-custom-class'););Cela effleure à peine la surface de la fonctionnalité de manipulation DOM disponible dans jQuery. En regardant l'API, dans la section Manipulation, vous pouvez voir combien d'options sont disponibles (avec de bons exemples)..
Pour donner d'autres exemples, nous pouvons aussi:
N'oubliez pas que jQuery est une solution attrayante pour un si grand nombre de développeurs, ce qui s'explique par le fait que toutes les fonctions et tous les exemples présentés dans cet article sont compatibles avec plusieurs navigateurs..
Si vous êtes novice en JavaScript, vous devez absolument savoir comment il fonctionne avec la page affichée dans le navigateur Web: elle répond à divers événements..
C'est-à-dire que lorsqu'un utilisateur clique sur un élément, effectue une frappe ou clique avec la souris, le navigateur génère un signal correspondant à l'événement qui s'est produit. C’est ce qui nous permet de tirer parti de l’interaction de l’utilisateur avec le navigateur..
Plus précisément, chaque fois qu'un utilisateur fait quelque chose à la page, nous pouvons répondre en utilisant un événement personnalisé. Le problème est que tous les navigateurs n'implémentent pas les événements de la même manière (c'est pourquoi une spécification est nécessaire, mais c'est le contenu d'une autre publication)..
Heureusement, jQuery rend cela beaucoup plus facile en définissant un nom cohérent pour tous les événements, de sorte que nous puissions utiliser le même nom pour un événement auquel nous essayons de répondre et qu'il fonctionnera sur tous les principaux navigateurs..
Lorsque jQuery est apparu pour la première fois, Flash était encore relativement populaire et les animations générales sur le Web n’étaient pas complètement mortes..
Cependant, lorsque nous parlons d'animation dans le contexte de jQuery, nous ne parlons pas du même type d'effets ou de comportements que nous avons l'habitude de voir avec une technologie plus ancienne. Au lieu de cela, nous parlons d'effets qui donnent aux utilisateurs des commentaires qui quelque chose est arrivé à l'écran. De plus, il est moins invasif et peut ajouter une belle impression de style à une page ou à une application lorsqu'il est utilisé correctement (tout peut être abusé)..
Vous pouvez afficher l'intégralité de l'API d'effets sur cette page, mais il convient de noter que les effets de jQuery peuvent varier de la simple manipulation des fondus aux éléments en passant par les éléments glissants, en passant par des éléments plus complexes, comme la manipulation de la file d'attente des effets enregistrés. tirer contre un élément.
Certes, ce dernier cas suppose que vous avez un peu d'expérience avec l'API d'effets, mais c'est quelque chose qui vient naturellement si on dispose de suffisamment de temps avec la bibliothèque et la documentation..
Si vous n'êtes pas familier avec Ajax, c'est essentiellement une façon pour une page Web d'appeler le serveur, de gérer la réponse et de mettre à jour une partie de la page sans avoir à actualiser toute la page. Bien que la technologie existe depuis un certain temps déjà, c'est toujours quelque chose de vraiment génial et qui peut fournir des fonctionnalités vraiment bien dans le contexte d'une page ou d'une application Web lorsqu'il est utilisé correctement et efficacement..
Bien que la prise en charge d'Ajax ne soit plus aussi mauvaise qu'il y a cinq ou dix ans, la mise en œuvre de l'API sur les navigateurs peut varier légèrement. Cela signifie que nous avons pour tâche d'écrire du code Ajax spécifiquement pour un navigateur fourni par Microsoft, fourni par Google, fourni par Apple, fourni par Chrome, etc..
Du moins, c'est le cas sans jQuery. Grâce à son support pour Ajax, nous pouvons utiliser Ajax de différentes manières sans avoir à entrer dans les incohérences entre les navigateurs. En fait, c'est trivialement facile à manipuler OBTENIR et POSTER demandes tout en ayant également la possibilité de faire des appels beaucoup plus avancés en utilisant le $ .ajax méthode.
Une fois que vous vous êtes habitué à avoir l'API disponible dans le cœur de votre application ou à votre disposition, il est difficile d'imaginer ne pas l'utiliser (ou quelque chose de ce genre)..
Une fonctionnalité offerte par de nombreux frameworks et bibliothèques côté serveur est la possibilité de créer des extensions de la base de code. Les bibliothèques et les frameworks modernes côté client le permettent, et jQuery n'est pas différent.
Supposons, par exemple, que vous travailliez dans un créneau particulier dans lequel vous créez la même fonctionnalité pour chaque projet. Ou si vous vendez un produit et que vous avez un peu de code personnalisé qui doit s'intégrer à jQuery, mais cela peut nécessiter des paramètres différents en fonction du projet.
Que faites-vous alors?
Heureusement, jQuery supporte les plugins. Cela signifie que nous, développeurs, avons non seulement la possibilité de puiser dans des plugins écrits par d'autres (certains sont disponibles sur le site Web de jQuery, d'autres sur GitHub), mais nous sommes également en mesure de développer nos propres plugins..
Nous pouvons ensuite réutiliser ce code dans nos propres projets ou le rendre disponible sur des sites tels que GitHub pour que d'autres puissent proposer des contributions, des correctifs, des fonctionnalités, etc..
Depuis sa création, jQuery est devenu plus qu'une simple bibliothèque JavaScript qui nous offre la possibilité d'effectuer des opérations simples et puissantes de manière compatible avec plusieurs plates-formes..
En plus de la bibliothèque principale, jQuery a également abouti à deux autres projets notables qu'il convient de mentionner avant de terminer cet article. Bien que nous n'allons pas examiner en détail les avantages de chaque projet, nous en donnerons un aperçu général, ne serait-ce que pour savoir ce dont nous disposons si nous en avons besoin pour nos travaux futurs..
Depuis la page d'accueil de l'interface utilisateur de jQuery:
L'interface utilisateur de jQuery est un ensemble d'interactions d'interface utilisateur, d'effets, de widgets et de thèmes conçus à partir de la bibliothèque JavaScript jQuery. Que vous développiez des applications Web hautement interactives ou que vous ayez juste besoin d'ajouter un sélecteur de date à un contrôle de formulaire, l'interface utilisateur de jQuery est le choix idéal..
Cette bibliothèque a été publiée pour la première fois en 2007, environ un an après jQuery. Elle fonctionne comme une bibliothèque complémentaire à jQuery dans la mesure où elle exploite la compatibilité multiplate-forme de la bibliothèque pour créer des widgets pouvant être utilisés sur un site Web..
La plupart des widgets incluent des fonctionnalités couramment utilisées. Par exemple:
Il existe également des fonctionnalités avancées telles que des effets, des utilitaires et des interactions. Tout ce que nous avons couvert jusqu'à présent (ainsi que ce que nous n'avons pas encore fait) comprend une grande variété de rappels, d'attributs et de fonctions qui nous permettent d'interagir avec eux au maximum..
Toutes les fonctionnalités susmentionnées offrent également différents thèmes pour s’assurer qu’ils correspondent à l’image de votre site Web. Enfin, toutes les fonctionnalités décrites ici et incluses sur le site sont bien documentées..
À partir de la page d'accueil de jQuery Mobile:
jQuery Mobile est un système d'interface utilisateur basé sur HTML5 conçu pour créer des sites Web réactifs et des applications accessibles sur tous les smartphones, tablettes et ordinateurs de bureau..
Cette bibliothèque est la plus récente introduction à la famille de bibliothèques publiée en 2010 (la dernière version stable date de 2014)..
À l'instar de son homologue d'interface utilisateur, il propose une API bien documentée et des thèmes personnalisés parfaitement adaptés aux divers périphériques que votre projet peut cibler..
Alors que les deux bibliothèques précédentes offrent un ensemble de fonctionnalités multiplates-formes nous permettant d’écrire relativement facilement jQuery et les widgets correspondants, jQuery Mobile inclut un cadre CSS qui nous permet également de concevoir des interfaces utilisateur idéales pour la nature de notre environnement. projet respectif.
Le cadre comprend:
À partir de là, la bibliothèque offre ce que vous attendez d'un projet visant à faciliter le développement Web pour différents appareils mobiles. Ceux-ci incluent des choses comme:
Enfin, le nombre de navigateurs encore disponibles et utilisés dans la nature est élevé. Bien que nous ayons constaté une diminution de l'utilisation d'anciennes versions d'Internet Explorer et une adoption plus large de Chrome, certains utilisateurs restent fidèles aux anciens navigateurs pour diverses raisons..
Parfois, ces utilisateurs utilisent des navigateurs plus anciens en raison de la nature de l'intranet de leur société. Parfois, cela a à voir avec les appareils mobiles et / ou les téléphones qui leur ont été assignés pour leur travail. Et parfois, il s'agit simplement de l'impossibilité de passer à quelque chose de meilleur.
Peu importe, cependant. jQuery Mobile prend en charge la plupart des navigateurs et des systèmes d'exploitation actuellement disponibles. Si vous ne savez pas si la plate-forme que vous ciblez est prise en charge par la bibliothèque, vous pouvez toujours consulter la page de support du navigateur..
Comprendre ce qu'est jQuery (et ce qu'il n'est pas) et son rapport avec JavaScript est important pour que vous sachiez ce qui est fait pour vous et ce que vous pouvez faire lorsque vous avez besoin de travailler avec la bibliothèque..
Comme mentionné précédemment, certains peuvent faire valoir que vous devez d'abord apprendre le JavaScript, puis jQuery. d’autres peuvent faire valoir que l’apprentissage de jQuery est un excellent moyen de revenir en arrière en JavaScript.
Quoi qu’il en soit, jQuery est une bibliothèque de longue date dans l’économie JavaScript et elle est utilisée dans un certain nombre de projets très populaires (tels que WordPress), de sorte qu’elle vous donnera un coup de pouce de différentes manières..
JavaScript est devenu l'un des langages de facto du travail sur le Web. Ce n’est pas sans ses courbes d’apprentissage, et il existe de nombreux cadres et bibliothèques pour vous tenir occupé. Si vous recherchez des ressources supplémentaires à étudier ou à utiliser dans votre travail, consultez ce que nous avons à votre disposition sur le marché Envato..
Si cela ne vous suffit pas, vous aurez la possibilité de consulter et de lire de nombreux documents et codes à source ouverte. Il existe également des plugins largement disponibles et un blog actif pour vous tenir au courant de toutes les nouvelles concernant le développement de la bibliothèque..
Pour ceux qui s'intéressent à JavaScript (en particulier dans le contexte de WordPress), n'hésitez pas à me suivre sur mon blog et / ou Twitter à @tommcfarlin. Vous pouvez voir tous mes cours et tutoriels sur ma page de profil, ainsi.
N'hésitez pas à laisser des questions ou des commentaires dans le flux ci-dessous, et je tenterai de répondre à chacun d'entre eux..
