Share
Si, comme de nombreux développeurs Flash, envisagez d’utiliser HTML5 pour vos applications Web, vous aurez certainement rencontré jQuery. C'est une bibliothèque JavaScript très populaire, utilisée par un grand pourcentage des sites Web les plus visités - mais pourquoi tout le monde en parle, et si vous l'utilisez?
Si vous connaissez AS3, vous connaissez déjà beaucoup JavaScript. les deux langues sont très similaires. Il est donc tentant d’intervenir directement dans le code, mais vous devez d’abord comprendre quelques concepts importants. L'un d'eux est l'idée du DOM.
Lorsque vous chargez une page Web, votre navigateur transforme le HTML à plat en une structure arborescente d'objets JavaScript appelée DOM (Document Object Model). Le DOM JavaScript est donc très similaire à la liste d’affichage ActionScript; et si vous êtes un développeur Flex, vous pourrez voir les similitudes entre MXML et HTML..
En Flash, nous pouvons accéder à des objets d'affichage spécifiques en les parcourant dans la liste d'affichage, comme stage.getChildAt (3) .getChildAt (0), mais c'est assez ridicule. Au lieu de cela, nous sommes plus susceptibles de donner des noms d'instance aux objets d'affichage (via l'EDI Flash) ou de stocker des références à celles-ci dans des variables, des tableaux ou des propriétés d'objet, comme dialogBox.okButton = new SimpleButton ().
En JavaScript, nous pourrait Construisez notre DOM entièrement via JS puis demandez au navigateur de le restituer, mais il s'agit d'une approche inhabituelle. nous sommes beaucoup plus susceptibles de définir le DOM via HTML, peut-être avec une légère augmentation de JS. Donc, JavaScript a différentes méthodes pour accéder aux éléments du DOM.
Le plus simple d'entre eux est document.getElementById (). Si nous avons un document HTML défini comme ceci:
Exemple de page Voici un exemple de texte.
… puis document.getElementById ("exemple") va nous obtenir le surligné envergure objet du DOM. Nous pourrions alors ajouter une seconde p tag comme si:
Accentsconagua
var newPara = document.createElement ("p"); var newTextNode = document.createTextNode ("Plus de texte d'exemple créé à la volée."); newPara.appendChild (newTextNode); document.getElementById ("exemple"). appendChild (newPara); Cela mettrait à jour le DOM, le rendant équivalent à ce qui aurait été créé si le code HTML d'origine était le suivant:
Exemple de page Voici un exemple de texte.
Plus de texte d'exemple que nous avons créé à la volée.
Et si vous vouliez alors accéder aux deux p éléments? Nous ne pouvons pas y accéder directement avec document.getElementById (), puisqu'ils n'ont pas d'identifiant, mais nous pouvons utiliser document.getElementsByTagName ("p") pour obtenir un tableau contenant les deux.
Et si nous avions eu un autre envergure, comme ça:
Voici un exemple de texte.
Plus de texte d'exemple que nous avons créé à la volée.
Une deuxième travée.
Nous ne nous soucions pas de ces paragraphes.
… Et nous voulions seulement obtenir les deux premiers p balises, nous pourrions appeler document.getElementById ("exemple1"). getElementsByTagName ("p") juste pour récupérer ces deux choses - toutes ces fonctions DOM fonctionnent à n’importe quel niveau dans l’arborescence, comme le fait chaque DisplayObjectContainer a des méthodes comme getChildAt ().
C'est assez simple à comprendre, mais il y a des problèmes. Le premier, vous ne serez peut-être pas surpris d'entendre, concerne Internet Explorer.
Webs impressionnants a un grand aperçu d'Internet Explorer getElementById () problème. Essentiellement, si vous avez un élément HTML comme celui-ci:
… Alors dans la plupart des navigateurs, document.getElementById ("exampleName") volonté ne pas te donner le envergure en question, mais dans IE7, il volonté. (D'autres navigateurs pourraient utiliser document.getElementsByName ("exampleName") [0] pour retourner ce particulier envergure.)
Cela signifie que, pour rester cohérent sur tous les navigateurs (et en supposant que nous ne puissions pas modifier le code HTML), nous devrons écrire du code comme celui-ci:
var theSpan; if (usingIE) // Je ne vais pas expliquer comment détecter le navigateur ici var temp = document.getElementById ("exampleId"); // ceci aurait pu retourner un élément avec le nom "exampleId", nous devons donc vérifier: if (temp.getAttribute ("id") == "exampleId") theSpan = temp; else theSpan = document.getElementById ("exampleId"); Plus généralement, nous pourrions résumer cela dans une fonction réutilisable:
fonction getElById (id) if (usingIE) var temp = document.getElementById (id); if (temp.getAttribute ("id") == id) retour temp; else theSpan = document.getElementById (id); Génial! Mais, malheureusement, il y a tellement de ces petites différences irritantes; cela vous surprendra probablement, si vous venez d'un arrière-plan Flash, où "problème de compatibilité" signifie généralement que Flash Player est un peu lent sur certaines plates-formes.
jQuery résout ce problème. Il parcourt les fissures entre les différents navigateurs avec son propre ensemble de fonctions. Ainsi, si le navigateur de l'utilisateur est au moins aussi récent que IE6, votre code peut avoir une interface cohérente..
Ce n'est pas la seule façon pour jQuery de rendre JavaScript plus simple…
Revenons à cet extrait de code HTML et supposons que nous souhaitons récupérer le fichier mis en surbrillance. p éléments du DOM:
Voici un exemple de texte.
Plus de texte d'exemple que nous avons créé à la volée.
Une deuxième travée.
Nous ne nous soucions pas de ces paragraphes.
Avec jQuery, nous pouvons simplement écrire:
jQuery ("# exemple1 p") C'est tout ce dont nous avons besoin! #Exemple 1 dit "obtenir l'élément avec un ID de Exemple 1" et p dit "obtenir tous les p éléments qui sont des enfants de cet élément ". Il retourne un" objet jQuery ", qui est un objet JavaScript qui contient les deux p les éléments eux-mêmes du DOM JS, plus quelques propriétés et méthodes supplémentaires spécifiques à jQuery.
Nous pouvons le rendre encore plus court encore, en remplaçant jQuery avec $ - il n'y a pas de mystère ici; $ est juste un nom de variable court. Comparez-le au code JavaScript natif:
// JS standard, sans compatibilité entre navigateurs: document.getElementById ("exemple1"). getElementsByTagName ("p") // jQuery, avec compatibilité entre navigateurs intégrée: $ ("# exemple1 p") Ce n'est pas juste plus court, c'est compatible avec CSS, ce qui le rend facile à prendre en main. Nous pourrions utiliser exactement le même sélecteur comme à l'intérieur de notre jQuery () appel à styler ces paragraphes spécifiques dans une feuille de style CSS:
# exemple1 p couleur: rouge
C'est juste un exemple très simple. Je ne vais pas entrer dans les détails, mais je suis sûr que vous pouvez voir l'avantage de pouvoir utiliser les mêmes sélecteurs en CSS et en jQuery..
J'ai mentionné que les objets jQuery renvoyés par un $ () call avait des méthodes et propriétés supplémentaires. Cela vous donne une syntaxe simple pour écrire d'autres morceaux de code courants.
Par exemple, nous pourrions ajouter un écouteur d’événements clic et une fonction de gestionnaire aux deux p des éléments tels que:
$ ("# example1 p"). click (function () alert ("Vous avez cliqué sur un paragraphe!");); Ou, vous pouvez les rendre tous invisibles:
$ ("# exemple1 p"). hide (); Ou, vous pouvez exécuter un code JavaScript plus général sur eux:
var allText = ""; $ ("# exemple1 p"). each (function () allText + = $ (this) .text ();); Dans chaque cas, jQuery fournit un moyen d'écriture simple, court et cohérent. Cela signifie qu'il est plus rapide d'obtenir du code de votre tête vers le navigateur - et pas seulement parce qu'il nécessite moins de caractères..
Depuis que Flash a ses racines dans l'animation, nous avons l'habitude de posséder de nombreuses capacités d'interpolation intégrées, à la fois dans l'IDE Flash et dans le Tween classe, sans oublier les différentes bibliothèques d'interpolation disponibles.
JavaScript est différent. l'animation ne fait pas partie intégrante de la plate-forme. Mais de petites interpolations et des transitions sont des éléments attendus de l'interaction utilisateur de l'application Web moderne: si j'ajoute un nouveau commentaire sur un fil de discussion, il glisse à sa place; si je retire un article de mon panier, il clignote en rouge et disparaît. Sans cela, les applications ne semblent pas polies.
jQuery ajoute ces petites transitions.
Par exemple, supposons que nous voulions que l'un des paragraphes susmentionnés disparaisse progressivement lorsque l'utilisateur clique dessus. Facile:
$ ("# example1 p"). click (function () $ (this) .fadeOut ();); Rien pour le faire! Et vous pouvez passer un durée et rappeler au disparaître() fonction, si vous n'aimez pas les valeurs par défaut.
Pour quelque chose d'un peu plus puissant, nous pouvons utiliser le animer() méthode. C'est essentiellement l'équivalent d'un tween; transmettez-lui un ensemble de propriétés CSS et de valeurs à animer, une durée, un type d'accélération et un rappel, et le tout est fait pour vous.
Ce n’est pas exactement Greensock, mais c’est bien plus pratique que d’écrire ces effets à partir de rien et idéal pour les interfaces d’applications Web..
En parlant de ça…
Bien entendu, HTML comporte quelques composants d'interface utilisateur: des boutons, des champs de texte, etc. HTML5 en définit quelques nouveaux, comme un sélecteur de calendrier et un piquet de couleur (bien qu'ils ne soient actuellement pris en charge que par Opera)..
Mais ils ne suffisent pas, à eux seuls, à constituer une interface complète et moderne pour les applications Web. Il n'y a rien à gérer des onglets dans une page, ni une barre de progression, ni même une simple fenêtre de dialogue (en dehors de alerte() et rapide()).
jQuery UI, une bibliothèque facultative créée au-dessus de jQuery, ajoute ces widgets supplémentaires, avec des méthodes et des événements conformes à la syntaxe habituelle de jQuery. Considérez-le comme un équivalent JavaScript du logiciel AS3 MinimalComps de Keith Peters. La page de démonstration le montre mieux que je ne peux l'expliquer.
Chaque widget peut prendre en charge des thèmes personnalisés. Vous pouvez ainsi créer un thème unique adapté à votre site et l'appliquer à chaque composant, ce qui permet de modifier leur apparence en une seule fois. Encore une fois: la cohérence! De plus, vous pouvez appliquer des effets liés à l'interface utilisateur à d'autres éléments. permettre à l'utilisateur de faire glisser ou de redimensionner un élément DOM ou de cliquer et faire glisser un cadre autour d'un groupe d'éléments pour les sélectionner en vue de leur soumission.
La compatibilité entre navigateurs, la syntaxe simplifiée, les capacités d'interpolation et les éléments d'interface utilisateur sont les principaux avantages de jQuery par rapport à JS simple à mes yeux. Il y a d'autres raisons pour l'aimer, cependant:
Alors pourquoi ne serait pas vous utilisez jQuery? Comme pour la plupart des choix technologiques, il suffit de s'assurer que vous utilisez le bon outil pour le travail. Si vous avez une structure DOM simple, ou n’avez pas besoin d’animations et de transitions sophistiquées, ou utilisez principalement le Toile pour rendre votre interface, plutôt que les widgets, jQuery n'est probablement pas nécessaire.
Si vous utilisez déjà une ou plusieurs bibliothèques JavaScript - Dojo, MooTools, YUI, etc. - vous constaterez peut-être que vous n'avez pas besoin des fonctionnalités de jQuery en plus de ce qu'elles offrent. Mais mon objectif dans cet article n’est pas d’essayer de vous vendre sur une bibliothèque en particulier sur une autre.
J'espère que cet article a permis d'expliquer en quoi jQuery est important, en particulier si vous venez du monde de l'AS3 et de Flash. Si vous souhaitez l’apprendre, consultez le tag jQuery sur Nettuts + - jQuery for Absolute Beginners est un bon point de départ..
Faites-moi savoir si vous avez des questions!
