[Powered by Google Translate] [Séminaire: JQUERY] [Vipul Shekhawat, Université de Harvard] [C'est CS50.] [CS50.TV] Si vous suivez le long de la maison, vous pouvez réellement accéder à mes slides en ligne en allant sur ce lien. C'est TjjRWj, sur bit.ly. Vous pouvez aussi aller à l'URL directement, qui est cloud.cs50.net / ~ vshekhawat, qui est mon nom, et jQuery. Je vous encourage fortement à suivre le long si vous regardez à la maison, et si vous êtes ici, aussi, parce que c'est une présentation très interactive. 

Donc, aujourd'hui, je vais parler de jQuery, et la première question, ce qui est jQuery? Cette année, je sais que vous n'avez pas couvert JavaScript dans autant de détails que nous avons au cours des dernières années. JavaScript est, tout d'abord, juste un langage côté client que vous utilisez pour exécuter des scripts et du code sur la machine de chaque utilisateur. Donc, vous avez un serveur qui fournit des pages Web pour les gens, mais vous voudrez peut-être faire des choses sur leur machine, poser leur appareil pour envoyer des requêtes à votre serveur toutes les 30 secondes ou quelque chose comme ça. Vous pouvez le faire en utilisant JavaScript. JQuery donne juste plus de fonctionnalités sur le dessus de JavaScript qui fait des trucs supplémentaire pour vous. Si vous regardez le contenu sur le dessus, qui décrit certaines des choses que vous êtes capable de faire. Donc dans l'ensemble, il a été créé en Janvier 2006. Il a d'abord été conçue en Août 2005. Il a été autour depuis quelques années, et c'est vraiment une partie du nouveau mouvement Web 2.0 qui a fait de l'Internet si brillant. C'est la bibliothèque JavaScript la plus utilisée. Plus de 19,6 millions de sites l'utilisent, et l'utilisation continue d'augmenter selon builtwith.com, qui, apparemment, au cours de la dernière année, vient cessé d'augmenter assez linéaire. Parmi les 10 millions de sites, il ya encore - environ 40% d'entre eux sont actuellement utilise. Facebook utilise, beaucoup d'autres sites l'utilisent actuellement. Vous pouvez regarder les statistiques sur la vôtre, si vous le souhaitez. Et vous pourriez dire que c'est légitime parce qu'elle a un fondement et 13 membres du conseil d'administration, avec une équipe de 20 personnes qui y travaillent sur une base régulière. Il est donc très largement utilisé, il a un. Org URL, c'est chic, elle a des retombées pour d'autres choses, donc c'est une grosse affaire. 

Pourquoi devriez-vous utiliser? JQuery est très léger. Cela signifie que ce n'est pas un énorme fichier. Vous pouvez télécharger le fichier minified, qui est sans tout l'espace blanc et commentaires, et c'est seulement 32 ko. Ainsi, il est facile de simplement jeter sur votre page web et juste pour commencer à l'utiliser. Il est aussi écrit de manière très efficace, donc il ne prend pas beaucoup de - il ne ralentit pas votre site beaucoup plus lorsque vous l'utilisez. Il vous permet d'implémenter des choses qui étaient auparavant irréalisables. Il ya certains aspects de fonctionnalité, comme la création d'animations, qui normalement serait très, très difficile à faire. Mais dans jQuery ils sont en fait très simple. Et il ya certaines choses qui sont ennuyeux à faire, possible en JavaScript, comme envoyer une requête POST, mais pour envoyer une requête à un serveur, vous devez écrire cinq, six ou sept lignes de code. Maintenant vous pouvez simplement le faire en une seule ligne de code, en un seul appel de la fonction. Cela simplifie vraiment beaucoup de choses que vous faites. Et tous les enfants cools utilisent. Par cela, je veux dire moi. Dans mon projet de fin d'année dernière, ce qui est news.whrb.org, qui est pour la station de radio, j'ai créé ce blog qui accueille tous les spectacles que nous avons fait et les fichiers MP3 pour eux. Vous pouvez parcourir les expositions passées, et tout cela se fait en utilisant jQuery. Vous pouvez dire à cause de toutes ces animations, essentiellement. Donc si vous avez - si vous créez un nouveau message, vous voyez ces petits slideDowns; que tout cela se fait en utilisant jQuery. Et cela se fanent - si ce genre de choses est fait en utilisant jQuery, et vous n'avez pas à recharger constamment la page pour naviguer sur le site. Une autre chose cool qui est fait en utilisant jQuery est cette présentation. J'utilise ce truc open source appelé scrolldeck, qui quelqu'un a écrit sur le dessus de jQuery. Si vous regardez en fait à la source, vous pouvez voir que ils utilisent ce signe de dollar, signes de dollar sont utilisés dans jQuery pour signifier que la fonction est une fonction jQuery. Donc ils définir une enveloppe au-dessus de jQuery qui vous permet de faire une présentation de ce genre, et vous pouvez voir que ici, ils sont notamment le fichier jQuery original, qui est ce que vous aurez à comprendre si vous souhaitez utiliser jQuery dans vos propres sites Web. 

Toucher à ce sujet, comment l'installez-vous? Vous pouvez simplement aller à jQuery.com et télécharger le fichier, ajouter à un répertoire de sites Web et de l'inclure. Donc, juste au-dessus, dans la balise head de votre fichier HTML de votre fichier HTML principal, avoir simplement cette ligne de code avec la version correcte pour la version de jQuery que vous utilisez. Vous pouvez le télécharger en allant à jQuery.com, cliquez sur «jQuery téléchargement", et vous l'avez. C'est tout. Et effectivement, nous pouvons jeter un oeil à quoi il ressemble. Si vous cliquez sur télécharger ici, jQuery est la suivante. C'est juste un gros fichier JavaScript qui fait tout le truc magique pour vous. Il s'agit de la version compressée, ce qui n'est pas lisible du tout. Vous pouvez également consulter la version de développement, qui est lisible mais encore très, très long. Il ya beaucoup de choses là-dedans. Vous pouvez également créer un lien vers la version hébergée de Google de lui. Alors que va vous permettre de compter uniquement sur Google à fournir. Ils fournissent chaque version, disponible à tout moment. Ainsi, vous pouvez probablement compter sur Google pour héberger pour vous. Ou vous pouvez lier propre la dernière version de jQuery. Ils ont une URL qui est toujours mis à jour pour la dernière version. C'est jQuery-dernier, et il ya un problème avec cela, qui est que si le jQuery mis à jour et une partie de la fonctionnalité précédente ils avaient devient rétrogradé ou obsolètes, il ne peut pas - il peut commencer pour ne pas être plus soutenu. Donc, si vous écrivez un site web en utilisant la version 1.8.2, par la version 2,7 fois sort certaines des fonctions que vous avez écrit ne fonctionnent plus. Il est donc préférable de simplement télécharger le fichier kB 32, mettre sur votre page web, et ça va marcher pour toujours. 

Je vais aller de l'avant et commencer à parler de la fonctionnalité réelle de jQuery. La première chose est sélecteurs. C'est ce que jQuery a été initialement conçu pour fournir. Et vous pouvez cliquer sur la documentation à regarder la documentation détaillée pour les sélecteurs je vais être couvrant. L'idée derrière sélecteurs est que vous pouvez sélectionner les éléments HTML d'une page. Éléments sur une page ont des ID et classes et d'autres aspects d'identification à eux. Il ya aussi - ils sont dans des ordres différents. Une partie du temps ils sont imbriquées les unes dans les autres. JQuery vous permet de construire des requêtes simples qui extraient des éléments de la page. Ensuite, vous pouvez manipuler ces éléments à l'aide des fonctions jQuery, qui est la section de manipulation, nous y reviendrons plus tard. Vous pouvez modifier le code HTML, modifier le CSS, Vous pouvez également animer et ajouter des fonctions qui activent sur certains événements. Ainsi, par exemple, si quelque chose a cliqué, vous voulez quelque chose se produise, vous pouvez le faire en utilisant jQuery ainsi. Et il ya un grand nombre de façons de sélectionner des éléments. La plupart d'entre eux, je n'ai jamais utilisé, mais il ya ceux de base, qui sont assez importants. Le sélecteur d'élément, par exemple, si vous êtes juste rien sélectionner c'est un div - En fait, j'ai le code ouvert pour cette présentation de diapositives. Ainsi, par exemple, voici la première diapositive. Ici nous avons un div. Si nous choisissons en réalité tous les divs sur la page, il va juste nous donner un tableau de tous les divs qui existent dans ce fichier. Le sélecteur d'ID vous permet de sélectionner n'importe quoi avec un ID donné. Donc, si cela, par exemple, cette chose a l'ID «quoi», et si nous l'avons fait avec # ce lieu d'une pièce d'identité, il suffit de retourner un tableau qui a un seul élément, et c'est cet élément de la page. Nous pouvons également combiner les sélecteurs de cette façon en ayant sélectionner uniquement les choses avec les ID qui sont div. Donc oui. Sélectionner uniquement divs qui ont cette identité. Pour la classe que vous venez d'utiliser un point, c'est la même chose que CSS. Descendant fonctionne aussi, donc si vous avez une certaine classe et il a niché éléments qui le composent - ainsi, par exemple, il ya une certaine classe et il a une balise d'ancrage à un lien vers une autre page, vous pouvez utiliser cette syntaxe pour récupérer le lien. Vous pouvez également sélectionner plusieurs choses à la fois, il suffit de les séparer par des virgules, utiliser de sélecteur vous le souhaitez, et vous aurez toutes les sélectionner à la fois, en un seul tableau. Et puis il ya aussi le pas de sélection, de sorte que vous pouvez sélectionner tous les divs qui n'ont pas une classe spécifique. Et c'est juste un moyen utile d'obtenir une introduction à la façon dont fonctionne cette sélection. Je vais vous montrer quelques exemples concrets en une seconde. 

Sélecteurs avancés sont - ce ne sont là que quelques exemples. Il ya des dizaines d'entre eux, mais si vous voulez sélectionner toutes les balises d'image au sein de certains éléments, alors vous venez de le faire: image. Si vous souhaitez sélectionner les éléments pairs, par exemple, s'il ya 20 d'entre eux, vous voulez sélectionner 0, 2, 4, 6 et ainsi de suite, vous faites: même, ou vous pouvez également faire: impair. Ce sont des pseudo-sélecteurs, ce qui signifie qu'ils ont effectivement calculent tous les autres éléments plutôt que de simplement aller et en sélectionnant chacun d'eux. Vous pouvez aussi - chaque élément peut également avoir des attributs spécifiques. Ainsi, par exemple, class = centre est aussi un attribut. Pour cette balise d'ancrage, href, référence hypertexte, est un attribut aussi. Ainsi, vous pouvez choisir quelque chose que les liens vers une page spécifique ou tout simplement - c'est vraiment générale. Vous pouvez sélectionner n'importe quoi avec n'importe quel attribut que vous le souhaitez. Et puis, aussi, attribut contient. Si vous, par exemple, a voulu sélectionner tous les éléments d'entrée qui ont le mot "pass" comme son nom l'd'entre eux, si une page a un bloc de texte d'entrée C'est ce qu'on appelle "mot de passe", ça serait une façon, vous pouvez sélectionner ce sujet. Et il ya beaucoup plus. Vous pouvez aller de l'avant et regarder la documentation et voir des exemples concrets de la façon dont cela fonctionne. 

La prochaine chose est la manipulation du DOM. Après nous sélectionnons éléments, nous voulons réellement faire des choses avec eux. Jusqu'ici, nous n'avons pas regardé ça du tout, mais si vous regardez la documentation, il ya vraiment beaucoup de choses que nous pourrions faire. À ce stade, nous allons sélectionner des éléments sur cette présentation et les manipuler en utilisant jQuery. Parce que ceci est implémenté en utilisant jQuery, nous avons accès à la bibliothèque jQuery, et nous pouvons utiliser ces fonctions au sein de ce code. Une chose utile que vous ne pouvez pas savoir est la console. Et Google Chrome est ce que j'utilise. Vous pouvez appuyer sur alt commande J ou alt commande J pour ouvrir la console. Dans Firefox, je pense que c'est commande de passage K ou commande de changement de K. Dans Safari, vous devez aller modifier certains paramètres. Il ya un lien, si vous souhaitez le faire, mais je recommande de prendre Chrome ou Firefox. Donc, nous allons ouvrir la console, c'est ici. Il vous permet tout simplement de faire ce que vous voulez. Ainsi, vous pouvez simplement taper créer un appelé variable x, x = 5, voyons ce que x + 2 est. Vous pouvez même faire quelque chose comme CS + Voyons, x + 45, qui sera CS50. Vous pouvez simplement faire des trucs de JavaScript typique. Mais vous pouvez aussi faire jQuery ici. 

Donc, nous allons regarder ce premier aspect ici. Nous allons créer une variable appelée HTML, qui est une chaîne. Il dispose d'une balise de paragraphe en elle, c'est ce qu'on appelle un nouveau texte. Nous avons donc cette HTML, c'est un nouveau texte, au paragraphe tags. Maintenant, nous voulons réellement pour l'ajouter à la page. Je l'ai mis en place afin que le code HTML pour ce paragraphe, ce titre ici, est append ID. Si nous choisissons append ID, puis ajouter à cela la variable HTML Je viens de créer, il ajoutera que HTML, à la fin, juste après cette balise de paragraphe. Donc, si nous le faisons - nous avons sélectionné ce paragraphe, et nous avons appelé la fonction append à la variable HTML Je viens d'ajouter, il ajoutera que le nouveau texte juste là, sur la page. Nous pouvons également faire précéder, ce qui signifie qu'il ira devant, au début de cet élément. Donc, il ya un nouveau texte au début et après. Je peux aller de l'avant et se rafraîchir à se débarrasser de ce genre de choses que je viens de faire. Mais c'est un exemple de comment vous pouvez utiliser le préfixe et de suffixe méthodes pour manipuler des trucs sur la page, ajouter un peu de HTML. 

Vous pouvez également changer de classe. Retour dans ce fichier de style, j'ai créé ceci pour la classe de victoire qui a le texte de couleur rouge, la couleur de fond, et une ombre du texte. Il semble affreux, mais je ne peux réellement - présent paragraphe correspond à l'ID de classe. Donc, je peux ajouter la classe pour la victoire. Je peux exécuter ce dans la console, et qui va ajouter cette classe, et maintenant il semble hideux, comme prévu. Le CSS est automatiquement appliquée aux classes que vous - s'il ya CSS pour une classe, il obtient automatiquement appliquée si vous changez la classe d'un élément. Ensuite, nous pouvons juste l'enlever en utilisant la classe supprimer. Donc, si vous avez quelques classes prédéfinies comme le rouge ou surlignés et puis vous voulez appliquer à ceux des éléments, vous n'avez pas à faire tout le style CSS à chaque fois. Vous pouvez simplement ajouter la classe à un élément, puis il deviendra automatiquement - il va chercher automatiquement approprié pour cette classe. Nous pouvons aussi enlever des choses, donc je vais sélectionner tous les divs sur la page et les supprimer. Qu'est ce que cela va ressembler? Ça va ressembler à rien, donc il n'y a vraiment plus rien. Ma présentation est parti. Je peux vous rafraîchir et de le ramener, heureusement, parce que c'est juste courir une fois, mais c'est un exemple de la suppression, si vous voulez détruire complètement un élément de la page. 

Vous pouvez également écraser, et je vais sélectionner toutes les balises de paragraphe de la page et aller à l'intérieur et les remplacer tout texte qu'ils ont en eux avec juste le "testing". mot Si vous faites cela, vous allez remplacer chaque paragraphe de la page avec ce test. Yep. Ils sont tous remplacés par des tests. C'est donc un exemple d'accès le texte et l'écraser. Vous pouvez également récupérer des informations, et c'est vraiment cool pour les boîtes de saisie. Si vous avez une boîte de saisie que les gens sont en tapant des trucs dans, les gens sont en tapant des trucs dedans, Ici, nous choisissons l'entrée, une balise input avec un type de texte. Dans ce cas, il n'y a qu'une seule case d'entrée dans l'ensemble de la présentation, donc nous allons simplement sélectionnons le premier, et ensuite nous appelons la fonction val sur elle. Qui retourne la valeur, et pour une zone de saisie, la valeur est juste, quoi qu'il arrive d'être à l'intérieur. Donc, si nous faisons cela, il retourne juste le truc de chaîne. Et si nous l'appelons à nouveau après avoir écrit plus de choses, il se transforme en plus de choses. C'est un excellent moyen d'accéder aux éléments d'un champ de saisie, puis vérifiez, est-ce une adresse de courriel valide, est-ce une date valide, par exemple. Vous pouvez simplement récupérer instantanément choses que les gens taper, puis vérifier si c'est valable, l'envoyer à un serveur, faire ce que vous voulez avec elle. Et c'est ainsi que vous accédez à ce qu'il ya dans ces boîtes. 

Vous pouvez également modifier directement CSS, donc au lieu d'ajouter une classe qui possède des propriétés prédéfinies, vous pouvez simplement ajouter quelque CSS que vous voulez quelque chose. So let du corps d'élite, qui est toute la présentation, et la couleur est la propriété qui définit ce que les couleurs du texte. Si nous changeons de rouge, tout le texte dans la page deviendra rouge. Nous pouvons faire quelque chose comme le bleu de la couleur de fond, nous y voilà, c'est beau. Vous pouvez faire ce que vous voulez avec cela. En utilisant la propriété CSS, vous pouvez vraiment modifier la façon dont quelque chose semble en tout temps. La prochaine chose est d'effets. Les effets sont essentiellement la même chose que la modification de la CSS, mais ils offrent en fait une animation supplémentaire à elle. Donc, au lieu de simplement montrer ou cacher quelque chose ou changer la couleur, vous pouvez réellement faire animés. Voici la documentation, si vous voulez jeter un oeil à la documentation complète pour elle. Mais je vais couvrir les principaux. Il ya du spectacle et des propriétés de masquage. Afficher / masquer ID correspond en fait à l'ensemble de cette zone, donc si je le cache, il sera tout simplement disparaître. Et je peux vous la montrer à nouveau si je veux le faire revenir. Et il est de retour. Il n'a pas fait disparaître, Je n'ai pas vraiment le supprimer de la page, je viens de mettre la propriété CSS de visibilité aux caché de sorte que vous ne pouvez pas voir plus. Il ya aussi glisser vers le haut et faites glisser vers le bas, qui vous permet d'avoir cet effet. Il se glisse jusqu'à disparaître, et après il disparaît vous pouvez faire glisser vers le bas pour le faire revenir. Et maintenant il est de retour. Il ya aussi cet effet de fondu, ce qui - fondu ID correspond à cette boîte. Si je disparais it out, puis il va lentement disparaître. Je peux aussi s'estomper dans, et il va revenir. Vous pouvez également ne pas disparaître à qui est spécifique à la fonction de fondu. Vous pouvez l'avoir fondu à une opacité spécifique que vous voulez. Donc, si vous estomper lentement à 0,5, il va devenir moitié visible. Je peux le faire aller à .1, et retour à 1 pour faire encore pleinement visible. C'est juste une autre animation que vous pouvez faire. 

Il ya aussi les effets bascule. Donc, je vais choisir l'ID bascule, qui correspond à cette case, et sur ce que vous pouvez appeler div bascule, si elle est visible, il deviendra invisible, si elle est invisible, il deviendra à nouveau visible. Donc, je viens d'appeler cette fonction à bascule deux fois, la première était la même chose que se cacher, le deuxième appel était la même chose que d'un spectacle. Et vous pouvez aussi le faire avec une bascule fondu, qui fait la même chose, sauf qu'il en fait s'estompe. Et même chose avec la lame bascule. Il ya des effets enchaînés ainsi, ce qui signifie si vous sélectionnez un élément et appelez juste un tas de méthodes d'animation sur elle, si vous vouliez qu'il fade out, puis faites glisser vers le bas, puis cacher puis se fanent dedans, il ne leur fera dans une rangée. Ainsi disparut, revint - pour une raison quelconque, la peau ne s'est pas produit. Essayons ça. Ouais, il s'évanouit sur et puis il a glissé loin. Et il ya beaucoup plus. Vous pouvez utiliser la fonction animé pour créer vos propres animations, ce qui est assez complexe, mais il vous fournit l'extensibilité infinie. Vous pouvez faire n'importe quel type d'animation que vous voulez. Vous pouvez également utiliser la file d'attente à faire la queue plusieurs animations à la fois. Donc, si vous voulez quelque chose de survoler la page, coulissant en haut à droite en bas à gauche, vous pouvez le faire, et tout un tas de mesures qui vont l'un après l'autre. 

La prochaine chose que nous allons parler est événements. Événements vous permettent - à ce jour, nous venons de choses tapant dans la console et c'est une façon de rendre cela possible, mais sur une page réelle, vous n'allez pas être en mesure de faire les choses de type utilisateur dans la console. Vous voulez que les choses se produisent automatiquement. Pour cela, vous devez utiliser les événements qui activent sur certains certain événement se produise. Vous pouvez consulter la documentation pour les détails. Voyons donc. Nous voulons masquer ou afficher la boîte, mais maintenant ce bouton ne fait rien parce que je n'ai pas implémenté pour le moment. Je vais aller à la page HTML réelle. Voici la diapositive. Il ya un div pour la diapositive. Il a la classe de diapositive. Il ya le texte. Maintenant, il ya cette case et le bouton de la boîte. Comment pourrions-nous réellement faire disparaître ce? Tout d'abord, nous allons écrire une fonction qui rend l'ID de la boîte disparaître. Ceci est la syntaxe pour funtion, disons simplement appellent hideTheBox. Il ne prend pas d'arguments, parce qu'il n'y a pas d'arguments à prendre. Nous pouvons sélectionner l'ID de la boîte. Donc, en utilisant le jQuery choisir, nous pouvons sélectionner la case ID, et puis il suffit de la faire disparaître. Faisons fade out. Si nous avons couru cette fonction dans la console réelle, nous pourrions définir cette fonction, nous pouvons appeler hideTheBox, et cela fonctionne. Mais nous voulons que cela se produise lorsque le bouton est en fait appuyé. Pour ce faire, nous devons utiliser un événement. Pour lier un événement à appuyer sur un bouton spécifique ou un événement d'action, nous devons sélectionner l'élément que l'événement va déclencher - ou qui déclenchera l'événement, désolé. 

Alors tout d'abord, nous allons sélectionner le bouton boîte ID parce que c'est le bouton, et maintenant, pour ce bouton, nous voulons créer une animation quand il est cliqué. Donc, il ya cette fonction de clic. Il vous permet de lier une autre fonction à lui. Cette fonction prend une autre fonction en tant qu'argument nous pouvons passer à la fonction hideTheBox, et chaque fois cliqué sur ce bouton, cette fonction s'exécute automatiquement. Donc, cela ne fonctionnera si nous sauvons ce, je vais vous rafraîchir, et - une seconde, je suis désolé. Permettez-moi de résoudre ce problème très rapidement. Okay. Nous y voilà. Alors maintenant, la boîte est en train de disparaître lorsque l'on clique sur le bouton. Nous pouvons également changer ce à juste fadeToggle, changer juste pour masquer ou afficher la boîte, et cela va également travailler trop, si nous rafraîchir. Nous pouvons le cacher, nous pouvons aussi montrer, et que nous continuerons à travailler. Une autre chose que nous pouvons faire, c'est que nous n'avons pas vraiment de définir cette fonction de hideTheBox avant que nous appelons la fonction de clic. Donc, au lieu de définir la fonction et l'appel hideTheBox, nous allons seulement de l'appeler si cette chose est cliqué. Ainsi, nous pouvons définir de façon anonyme ici, qui est une caractéristique qui a JavaScript. Vous pouvez définir une fonction, normalement, nous dirions fonction hideTheBox avec des arguments, mais à la place, nous pouvons simplement dire fonctionner sans arguments, commencer l'accolade à définir la fonction, fermer cette accolade, puis juste définir la fonction ici, dans la première parenthèse et la dernière parenthèse qui correspondent aux arguments de la fonction de clic. Donc, nous passons dans cette fonction, nous pouvons copier cette ligne de code ici, et qui va faire exactement la même chose. Et maintenant, nous n'avons pas cette fonction de fadeTheBox aléatoire qui est assis autour pour aucune raison apparente. La fonction a été définie anonyme, il n'a pas de nom. Il ne s'exécutera lorsque l'on clique sur le bouton de la boîte. Donc, une fois de plus rafraîchissant, une fois de plus, et vous pouvez voir que cela fonctionne encore. Et c'est ainsi que vous créez événements. 

Il ya beaucoup de différents événements que nous pouvons utiliser. Je vais revenir à l'utilisation de la console pour juste vous montrer comment ces travaux. Les identifiants pour chacun de ces correspondent à chaque case. Alors cette boîte est clic ID, celui-ci est la clé d'identité, et celui-ci est ID de la souris. Une autre chose est qu'il ya cette fonction d'action, plutôt que de le taper à chaque fois, En fait, je suis allé de l'avant et a défini cette fonction d'action ici. Il fait la même chose que la fonction de hideTheBox. Il obtient cette case et s'estompe soit dehors ou se fane lui dedans Et c'est pourquoi nous sommes en mesure de l'utiliser ici. Donc, si on clique sur ce clic ID, nous voulons faire de la boîte disparaître ou réapparaître. C'est la même chose que le bouton que nous avons eu dans la dernière diapositive. Maintenant, après que nous appelons, nous pouvons cliquer sur ce sujet et la boîte va disparaître, puis cliquez à nouveau dessus et la boîte réapparaît. C'est assez simple. Double-cliquez fait la même chose, sauf qu'il nécessite un double clic. Donc, si vous cliquez dessus une fois et cliquez à nouveau rien ne se passera, mais si vous double-cliquez rapidement, il va disparaître. Si vous double-cliquez à nouveau, il va revenir. Donc, c'est assez simple. La saisie au clavier est un peu bizarre, je ne pense pas que cela fonctionne réellement dans cet exemple parce que le bas, Touche et appuyez sur la touche et d'autres actions clés activer, peu importe ce que vous lierez élément à. Par exemple, même si je dois touche bas pour le corps ou autre chose complètement, alors il serait toujours activer, peu importe - ce n'est pas spécifique. Je n'ai pas à cliquer sur ce bouton et appuyez sur une touche pour faire disparaître quelque chose. Il serait activée indépendamment de quel élément je suis actuellement po Donc, ceux-ci ne travaillent effectivement dans cet exemple car il ne me reconnaît pas comme entrant entrée dans l'entrée div clavier. 

Mais si vous regardez les actions de la souris, le premier est planer, et il peut faire partie de cette aide de CSS. Si vous utilisez CSS, vous pouvez le créer de sorte que si vous survolez quelque chose, puis ses changements de style. Mais l'utilisation de jQuery, vous pouvez modifier les styles d'autres choses aussi. Ainsi, par exemple, que nous allons appeler l'action si nous survolez cette div. Cela signifie que si nous planent au-dessus, puis la boîte disparaît. Si nous nous éloignons de cela, la boîte réapparaît. Si nous appelons cela et survolez, la boîte ne disparaît, et dès que nous nous éloignons, il revient. Si nous appelons cette fonction hover sur l'ID de la souris, ce qui correspond à cette zone, alors si nous Survoler la boîte, puis la boîte sera effectivement disparaître - c'est d'être génial en ce moment, mais - si nous nous éloignons de lui, il réapparaît. Actuellement, il est en arrière pour une raison quelconque. La souris à l'entrée et les fonctions de déplacement de la souris sont un peu similaire, mais légèrement différente. Souris entrer active uniquement lorsque la souris pénètre dans la boîte, comme prévu. Donc, si vous vous déplacez en lui, il va disparaître. Mais il ne sera pas réapparaître lorsque vous vous éloignez, vous aurez à revenir sur elle pour lui de revenir. Il ya aussi la fonction de déplacement de la souris, ce qui activera chaque fois que la souris est encore présent dans la zone. Donc, il va juste continuer à avancer, en fondu. Et c'est en fait l'exploitation forestière - il semble que c'est juste en fondu, Mais c'est en fait l'exploitation forestière beaucoup plus d'actions que cela, Ainsi, lorsque vous vous éloignez ça va gardent juste parce qu'il consigné comme un millier d'entre eux. Peut-être pas un millier. Peut-être cinq. Il enregistre plus que cela. Le fait est que toutes les actions de la souris, il ya beaucoup d'entre eux. Vous pouvez lire sur les autres, mais ils sont tous légèrement différents, et vous pouvez choisir celle que vous avez besoin pour n'importe quel but précis que vous essayez de faire. 

La prochaine chose que je vais vous parler est AJAX. AJAX, je sais que nous n'avons pas couvert JavaScript dans autant de profondeur cette année, donc je vais juste parler AJAX en général pendant une minute. AJAX signifie Asynchronous JavaScript and XML. C'est fondamentalement, par exemple, lorsque vous êtes sur Facebook et il vous pousse à une notification, c'est parce que AJAX est exécuté sur votre navigateur. Toutes les deux secondes, votre navigateur Web est réellement aller vers les serveurs de Facebook, en leur demandant, avez-vous quelque chose de nouveau pour moi, et puis il revient à vous. Cela vous permet d'envoyer des requêtes à un serveur sans avoir à charger la page. Donc, normalement, si vous êtes juste en utilisant PHP et une base de données, vous devez actualiser la page avant que vous pouvez obtenir de nouvelles informations à partir du serveur. Mais en utilisant AJAX, vous pouvez tirer pour que de nouvelles informations en permanence, ou de tirer pour lui quand vous cliquez sur un bouton ou quelque chose comme ça. Donc, ce qui nous permet d'envoyer des requêtes sans recharger la page, et nous pouvons utiliser requêtes GET ou POST. 

Les requêtes GET sont, par exemple, si vous à Google.com et faire q = essai. Ce n'est en leur donnant un test de la requête. Et c'est une requête GET, car il est de passage dans ces paramètres dans l'URL elle-même. Une requête POST est comme si vous les envoyer par la poste. C'est comme si vous le mettez dans une lettre et expédiez le tout à eux, mais ils ne voient pas réellement le contenu. Ils ne sont pas visibles dans l'URL. Vous ne pouvez pas taper directement dans, vous devez l'envoyer presque secrètement. C'est dans un post. Mais l'utilisation de jQuery, vous pouvez faire requêtes GET et POST beaucoup plus facilement que vous pourriez normalement en utilisant juste JavaScript plaine. Vous pouvez interroger les API utilisant des requêtes GET, et vous pouvez également vérifier les informations de connexion. Sur la page suivante, j'ai créé ce qui demande: «Qu'est-ce qu'on mange?" en utilisant l'API nourriture Harvard, nous allons donc tirer que vers le haut. Ceci est juste un exemple de comment vous pouvez utiliser jQuery pour faire une requête GET à une API et obtenir des informations en arrière de lui. Donc, nous voulons voir le menu d'aujourd'hui, et nous voulons voir ce qui est pour le déjeuner. Voici l'URL pour créer une requête GET à jQuery. vous utilisez l'$. obtenir la fonction. Le premier argument est l'URL, donc exactement ce que vous interrogez. Ensuite, l'argument suivant est une fonction qui s'exécute lorsque la requête GET est terminée. Donc vous envoyer quelque demande au serveur, attendez qu'il revienne. Quand il ne revienne, vous allez prendre des mesures avec les données qui sont de retour à partir du serveur. Allons de l'avant et le code aussi. Je n'ai pas de code ce soit, sur le but. Voici la TODO. Tout d'abord, nous allons utiliser la liaison d'événements de sorte que lorsque ce bouton est enfoncé, nous envoyons outre une requête GET. Et quand cette requête GET revient avec certaines données, nous allons écrire dans ce repas d'info ID div. Tout d'abord, nous allons sélectionner le bouton ID nourriture. Quand il est cliqué, nous voulons qu'il fasse quelque chose. Disons simplement en font un fuction anonyme, comme avant. Peut envelopper ces accolades, et lorsque ce bouton est enfoncé, nous voulons envoyer une requête GET pour vérifier ce qui est pour le déjeuner. Pour ce faire, nous pouvons simplement taper $. Obtenir. Il s'agit d'une fonction jQuery, en utilisant le signe dollar. Il prend quelques arguments. Le premier est l'URL, le second est la fonction de rappel, la fonction qui est appelée lorsque cette demande revient en fait. Disons simplement construire l'URL premier. Nous pouvons l'obtenir à partir de l'API que David a rédigé. Aller ici, nous pouvons voir que c'est food.cs50.net/api/1.3/menus, et puis vous venez de passer dans les noms des paramètres que vous souhaitez. Donc, le paramètre 1 est la valeur 1. Il ressemble à jour standard, Date de début, par défaut à aujourd'hui Si vous ne saisissez rien, et la date également des défauts de fin à aujourd'hui, si vous ne saisissez rien. C'est ce que nous voulons. Nous voulons juste l'information pour aujourd'hui. 

Nous voulons que le format soit en JSON. C'est juste arbitraire, vous pouvez utiliser n'importe quelle forme que vous voulez. Vous pouvez utiliser CSV, mais JSON que JavaScript Object Notation. Il est très facile pour JavaScript afin de comprendre ce que cela signifie, et nous pouvons imprimer plus facilement de cette façon. Donc, nous allons en faire la demande en JSON, et demande le déjeuner de let. Alors repas = déjeuner. Juste pour rédiger cette URL, nous revenons ici. Il ya menus. Le premier paramètre est sortie = JSON parce que c'est ce que nous voulons, et vous séparez les paramètres avec un «et». Le deuxième paramètre est - je ne me souviens pas. Repas. Et nous voulons repas = déjeuner. Vous pouvez tester cette URL en le tapant dans votre navigateur et allez à elle. Il vous donnera une sortie. C'est juste un tas de choses qui sont pour le déjeuner. C'est dans ce format laid. Nous voulons imprimer sur notre page dans un meilleur format. Donc, l'URL est correcte, maintenant nous avons juste besoin d'écrire une fonction pour rappeler lorsque la demande est acceptée. Cette fonction sera effectivement un argument. Il sera données. Les données sont ce qui revient de la requête GET après la requête GET est fait. Nous pouvons faire les accolades, ici nous écrivons la fonction anonyme qui exécute, en utilisant les données lorsque nous obtenons l'information de retour. Donc, les données, lorsque nous avons tapé dans cette URL, c'est ce que les données va ressembler. Il va y avoir cette énorme chaîne. Mais la bonne chose est, JavaScript peut l'analyser en utilisant la fonction JSON.parse. Donc, nous allons créer une nouvelle variable appelée données d'analyse. Et les données analyse est un tableau d'objets. Chaque objet contient des informations telles que: - Eh bien, nous allons jeter un coup d'oeil. Il a une date, un repas, catégorie, recette, tous ces autres trucs. Alors disons simplement imprimer le nom de chacun d'eux. Disons parcourir toute la gamme des choses que nous revenions de lui, et juste imprimer chacun - imprimer sur le nom de chacun d'eux. Il s'agit d'une boucle for. 

JavaScript a cette syntaxe utile où vous pouvez créer une variable et boucle sur un tableau, et var i est juste le iterator, donc au lieu d'avoir à faire var i = 0, J'étais moins que la longueur, i + +, vous pouvez juste faire var i dans les données analysées. Dans cet exemple, les données analysées (i) correspondront à l'élément courant de la rangée, l'objet réel. Et nous voulons obtenir le nom hors de lui. Donc, nous allons juste faire nom. Et la dernière chose est que nous allons avoir encore quelque jQuery. En fait, l'ajouter à la div, ce repas informations DIV qui est actuellement vide. Donc, nous allons choisir ça. Nous allons utiliser jQuery et sélectionnez repas d'info ID div ou repas d'info ID, désolé. Nous voulons ajouter à cela. Si nous le faisions test, par exemple, il serait tout simplement le remplacer à chaque fois. Ainsi, nous pouvons juste ajouter cela. L'élément courant dans le tableau, nous obtiendrons le nom hors de lui, et nous ajoutons à la fin du repas d'info ID div. Et puis, juste pour le faire paraître plus propre, Nous allons également ajouter un saut de ligne si ce n'est pas sur une seule ligne. Donc, si tout va bien, ça devrait être bon pour - tout d'abord, chaque fois que ce bouton est cliqué, il enverra au large d'une requête GET pour cette URL. Lorsque les données revient de lui, il va l'analyser, transformer en JSON, boucle sur tout le tableau représentant ces données, puis ajouter le nom et un saut de ligne pour chaque ligne de ce repas d'info ID qui était déjà vide. Pour en revenir à cette page, nous allons rafraîchir, clic, savoir - ça ne fonctionne pas. C'est malheureux. Et c'est là qu'intervient le débogage Index.html, ligne 1. C'est intéressant. Très bien, alors, plutôt que de passer du temps à faire cela, je vais juste tirer vers le haut le fichier fait que j'ai, qui est la version finale. Je ne sais pas quelle est la différence, mais il suffit d'ouvrir ce haut lieu. Et nous allons à l'AJAX, et cela devrait fonctionner correctement. C'est ce qui était pour le déjeuner aujourd'hui, dans aucun ordre particulier, avec guillemets autour de lui, donc ce n'est pas la plus jolie. Mais, évidemment, si vous faisiez cela pour un projet final, vous souhaitez faire paraître mieux. Mais c'est juste un exemple simple de la façon dont vous faites la demande GET. Et si l'on regarde le code actuel, je suppose, je suis sûr c'est toujours à peu près le même. Oh, j'ai oublié de le convertir en une chaîne, c'est tout. Non, ça ne marche toujours pas. Quoiqu'il en soit, voici le code complet réelle pour ce que cela devrait ressembler, et il fait la même chose que ce que je viens en œuvre. Lorsque vous cliquez sur le bouton, il utilise GET JSON pour analyser automatiquement les données. Il prend les données à partir et parcourt toute la gamme et imprime le - tout ce qui est pour le déjeuner aujourd'hui, le nom de celui-ci, et ajoute un saut de ligne après chaque ligne. C'est la façon dont vous utilisez la fonction GET. 

Vous pouvez également utiliser POST, ce que je n'avais pas le temps de rédiger un exemple pour cela, mais nous pouvons regarder la documentation. Si vous regardez jquery.post, vous pouvez voir que c'est presque la même chose. Vous disposez d'un URL, mais au lieu de passer des paramètres à l'aide - il suffit de les mettre dans la chaîne de l'URL elle-même, vous devez passer dans cette variable de données c'est simplement un tableau, un dictionnaire qui fait correspondre les paramètres aux valeurs. Vous passez que, et qui les envoie à l'aide d'un POST. Et une fois que vous avez cela, alors vous pouvez avoir une fonction de succès qui s'exécute lorsque les données revient. Sinon, c'est exactement la même chose. Donc, en utilisant POST, vous voudrez peut-être utiliser POST, par exemple, si vous avez un formulaire de saisie vous laissez les mots de passe d'entrée des personnes en elle, et d'envoyer les mots de passe off à votre script back-end, à vérifier dans la base de données si l'utilisateur est valide ou non. Vous pouvez le faire tout en utilisant jQuery au lieu d'avoir à rafraîchir la page du tout. C'est comme ça que j'ai mis en place dans le blog que je vous ai montré plus tôt. Si nous allons vers le portail de fin et vous déconnecter, vous déconnecter, Déconnexion ne fonctionne pas. Eh bien, permettez-moi de l'ouvrir dans une nouvelle fenêtre. Ici, il ya un mot de passe, et j'allais taper quelque chose au hasard. Il ne fonctionne pas, mais vous pouvez voir que nous n'avons pas en fait avoir à rafraîchir la page du tout. Le code, si vous voulez regarder, est tous disponibles ici. Ainsi, le code que j'ai écrit l'année dernière un certain temps. Comme vous pouvez le voir ici, nous envoyons une requête POST. J'ai un fichier appelé login.php dans la partie arrière, qui vérifie si le mot de passe est valide. Les paramètres que nous passons en sont mot de passe, mappé à l'entrée qui se trouve dans cette zone de saisie pour le moment. Et lorsque les données revient, nous vérifions. Si les données sont fausses, alors nous disons mot de passe incorrect, faites-le glisser vers le bas, et juste le faire disparaître par la suite. Sinon, nous chargeons la page d'administration. Et tout cela a été fait en utilisant JSON. Dans ce nombre de lignes de code, vous pouvez tout simplement passer les données à l'arrière, vérifier si elle est correcte, vérifiez si vous vous êtes connecté correctement, et effectivement répondre, rediriger la personne vers la bonne page ou ne pas les laisser se connecter et de leur dire qu'ils avaient un mot de passe incorrect. C'est donc un exemple de comment vous pouvez utiliser POST jQuery d'envoyer une requête POST à ​​votre back-end, vérifier si quelqu'un est connecté correctement. 

D'accord, c'est donc tous les exemples que j'avais, et tous les trucs que je voulais couvrir. Ce sont les choses les plus importantes que jQuery vous permet de faire: sélectionner des éléments, les modifier en utilisant la manipulation du DOM, vous pouvez ajouter des effets, activer les choses sur certains événements, et également faire des requêtes AJAX très transparente et facilement. Je vous remercie donc d'être venus ou regarder, et si vous avez des questions, faites le moi savoir. Ouais? [Étudiants] Retour lorsque vous avez fait preuve, vous avez eu JSON après la requête POST entre guillemets, et je me demandais ce que cela fait. >> Ouais, je vois. La question est que, dans l'exemple que je viens de montrer, il y avait le mot JSON entre guillemets autour de la - Je vais juste tirer vers le haut encore - autour de la fonction POST. Je ne fais que tirer vers le haut pour montrer. Alors, voici cette demande POST, et il ya cette JSON entre guillemets. C'est ce qui définit exactement ce que nous attendons la sortie de l'être. Donc, si nous passons en JSON que le type de données attendu, ce n'est pas une obligation, mais si nous passons dans, alors les données seront automatiquement analysés comme JSON. Donc, nous n'avons pas à appeler la fonction parse JSON sur elle, il va juste se produit pas automatiquement. Et si vous jetez un oeil à la documentation pour POST, y est la variable de type de données, le type de données attendues par le serveur. Par défaut, c'est une supposition intelligent qui peut-être tort, de sorte que vous pouvez le laisser vide, mais c'est juste le type de données dans le codage que vous utilisez, que ce soit JSON ou XML ou autre chose. 

D'autres questions? Très bien. Si vous avez d'autres questions, n'hésitez pas à m'envoyer un email à vshekhawat@college.harvard.edu, et les diapositives et les codes devraient être disponibles en ligne très bientôt. Bonne chance dans vos projets finaux, j'espère que vous utilisez jQuery. [CS50.TV]