[Powered by Google Translate] [Semaine 9, suite] [David J. Malan - Université de Harvard] [C'est CS50. - CS50.TV] 

C'est CS50. C'est la fin de la semaine 9. Je vous remercie beaucoup. Enfin. Semaine 9. Je l'ai eu. Aujourd'hui, nous continuons notre conversation à propos de la programmation web avec un oeil vers le projet final, non pas parce que vous avez à faire quelque chose sur le Web pour les projets finaux, mais parce que ce soit pour des projets finaux ou après CS50 c'est certainement la direction dans laquelle logiciel moderne qui se passe. Et pourtant, ce n'est pas vraiment une chose facile. En fait, l'une des choses les plus difficiles à faire, c'est l'aspect de la conception. 

Par exemple, de par leur conception, nous entendons effectivement faire l'interface utilisateur ou l'expérience de l'utilisateur à droite. J'ose dire - et nous savons à partir d'un ensemble de problèmes récents quand quelques-uns d'entre vous diffusé vos reproches à propos d'un morceau de logiciel ou matériel que vous exaspère, que ce soit sur le campus ou hors - il ya beaucoup de sites là-bas, il ya beaucoup de matériel là-bas, ce genre de suce. Mais la réalité est que les choses qui sont faciles à utiliser mais n'en sont pas moins puissante C'est un défi très difficile. Donc, pour aujourd'hui, je demande à Joseph et Tommy se joindre à moi ici afin que nous puissions avoir une conversation, à la fois sur la conception et quels types de processus de pensée doit commencer à passer par la tête lorsque vous concevez vos projets finaux, vos projets futurs. Et puis, avec l'aide de Tommy nous allons examiner quelques-uns des détails d'implémentation. Comment pouvez-vous avoir une vision sur le papier ou dans votre tête que vous pouvez ensuite exécuter par programmation en utilisant certaines des technologies et des techniques que nous avons juste commencé à parler, JavaScript et savoir quelque chose d'encore plus récente, à savoir AJAX, JavaScript asynchrone. Cela vous permet de créer toute la dynamique de plus d'une interface utilisateur par extraction de données de plus en plus progressivement à partir d'un serveur. Nous allons donc voir certains de ces extraits ainsi aujourd'hui. Soit dit en passant, si vous êtes intéressé à se concentrer en informatique ou une mineure en informatique, sachez que ce vendredi à midi dans Maxwell Dworkin 221, il y aura un événement à pizza où vous pourrez en apprendre un peu plus sur l'informatique. Sur votre chemin par la porte, aujourd'hui, vous serez en mesure de prendre un guide non officiel CS à Harvard. Nous allons le mettre sur les poubelles extérieures à hauteur de taille de sorte que si vous voulez saisir cela et en apprendre un peu plus sur CS, qui sera là pour vous comme il était dans la semaine 0. Aussi, si vous souhaitez vous joindre à nous pour CS50 déjeuner ce vendredi à 13 heures 15, diriger vers cs50.net/lunch. Sans plus tarder, je vous donne l'enseignement compatriote Joseph Ong. Salut. [Applaudissements] Merci. La première fois que j'ai appris sur la conception était dans une classe appelée ici CS179. 

Le professeur à l'époque nous a raconté l'histoire d'un autre professeur qui était allé à l'hôtel et utiliser les robinets. Quelqu'un peut-il me dire ce que les 2 boutons sur la gauche et la droite faire? [Étudiant] à chaud et à froid. >> Chaude et froide. Bon. Qu'est-ce que vous attendez normalement, non? Ce professeur après avoir utilisé le robinet veut prendre une douche, et il procède à l'utiliser. Il pense que la gauche et la droite sont pour chaud et froid, non? Mais quelqu'un peut-il me dire ce que ceux-ci font réellement? Toutes les mains? [Réponse de l'élève inaudible] >> Une suggestion est? [Réponse de l'élève inaudible] Température >>? Alors l'un d'eux contrôle la température et les autres contrôles? >> [L'élève] de pression d'eau. La pression d'eau. Bon. Ce professeur entre dans cela et en pensant qu'ils contrôlent chaude et froide, s'avère la bonne, qu'il pense être à chaud, tout le chemin jusqu'à parce qu'il veut prendre une douche chaude. Eh bien, ceux-ci ne correspondent pas vraiment, donc il obtient cette expérience n'est pas très amusant d'être dans une douche froide, et nous savons tous ce que cela ressemble. Ceci est un exemple d'un défaut de conception. Ce que je veux dire par là, c'est son attente du robinet ne correspond pas à ce qui est sorti de la douche, ce qui est assez malheureux pour lui. Il s'agit donc d'un exemple d'un défaut de conception qui se passe dans la vraie vie. Mais nous voyons toutes sortes de celles d'autres aussi. Nous ne sommes probablement pas les fans de la MBTA système. Il s'agit d'un système de métro en fait à Londres, qui dit: "Ce bouton n'est pas en cours d'utilisation." Pourquoi est-il encore là? Pourquoi avons-nous en soucier? Lorsque j'étais enfant, étant celui technophiles dans la maison, chaque fois que l'ordinateur tombait en panne, ma mère venait me, me montrer cet écran et de me demander ce qui s'est passé. 

Même moi, je ne sais pas ce que cela signifie. [Rires] Quoi? [Rires] Parfois, nous nous sentons comme les développeurs de logiciels sont à la traîne juste nous. En tant qu'utilisateurs, nous sommes comme, «Qu'est-ce qui se passe? Quelqu'un nous le dire." Tout cela se résume à une question de conception. Conception, comme nous pouvons le voir, n'est pas purement sur l'esthétique, il ne s'agit pas de l'apparence des choses. Nous voyons ici que ce petit pop-up ici ressemble en fait assez agréable. Il comporte une ombre portée en arrière-plan, il a rayons frontaliers en cours. C'est une sorte de joli. Ce n'est pas vraiment bien conçu car il n'est pas très convivial. Ce petit pop-up qui apparaît ne pas vraiment me donner des informations à propos de ce qui se passe, il ne m'a pas dit quoi que ce soit tant que l'utilisateur sur la façon de récupérer de cette erreur. Nous voulons penser à des choses que le design n'est pas. Tout d'abord, ce n'est pas l'esthétique. Il n'est également pas la farce de votre application avec des tonnes de fonctionnalités inutiles. Si vous êtes un restaurant thaï, vous n'avez probablement pas envie d'être un dentiste en même temps. Et avec Facebook Questions, non pas que beaucoup de gens l'utilise et ce n'était pas vraiment au cœur de ce qu'ils construisaient. Et donc c'est agréable de penser non pas tant la quantité des choses que vous mettez à votre demande, mais la qualité et comment vous faites l'expérience utilisateur de mieux par améliorer réellement sur ce que vous avez déjà. 

En un mot, la conception nous dit ce que nous devons construire. Par exemple, si nous construisons quelque chose qui nous rechercher les choses, comme Google, par exemple, doit-on faire les choses d'une manière qui demande à l'utilisateur de prendre beaucoup de clics pour obtenir ce qu'ils veulent, ou devrions-nous le faire en quelque sorte, par exemple, avec Google instantanée ou semi-automatique qui nous permet de rendre à nos résultats plus rapidement? Ingénierie implique, comme Tommy va vous montrer, en fait c'est la construction. Il ya beaucoup de types de conception. Par exemple, si vous construisez quelque chose à déployer quelque chose dans un pays du Tiers-Monde où il n'y a pas beaucoup d'électricité ou bien que la technologie, vous devez concevoir ce que vous construisez d'une manière qui donne facilement accès aux gens là-bas. Mais quelles sortes d'autres décisions de conception pourrait-il y avoir ou peut-être impliqué dans quelque chose comme ça? Ouais. Je vois une main. [Réponse de l'élève inaudible] droit >>. Exactement. L'accessibilité est une chose. Beaucoup de gens ne pensent pas: «Que mes utilisateurs?" comme les extrémités de chaque spectre. J'ai des utilisateurs qui pourraient avoir handicapées que je ne pense pas à et je ne fais que penser à propos de la conception pour l'utilisateur général. L'Internet est accessible par tout le monde de nos jours, et je serais la conception de ces gens ainsi. Quelles sortes de décisions de conception d'autres pourraient vous faire? Oui. >> [L'élève] Coût. Coût. Très bon. Une autre chose que nous pourrions fonder nos décisions de conception sont le coût. Si nous sommes une entreprise, vous voulez construire quelque chose qui ne prend pas beaucoup de coûts pour produire mais il peut vendre à un coût particulièrement élevé ou peut nous quelque profit. 

Ce sont tous les différents types de conception, mais quand nous construisons quelque chose sur Internet ou lorsque nous construisons quelque chose qui n'a probablement pas coûté grand chose à mettre en place maintenant, comme des applications Internet - vous n'avez pas à jeter beaucoup de capitaux dans l' dans le but de faire quelque chose qui fonctionne réellement - ce que nous sommes plus préoccupés par l'expérience de l'utilisateur. Nous appelons cette conception centrée utilisateur. Essentiellement, ce que la conception centrée utilisateur est implique vous mettre dans la peau de vos utilisateurs. Si quelqu'un s'inscrit pour ce que je vais construire, ils ont évidemment venir à mon application particulière avec un objectif en tête, à une tâche qu'ils veulent accomplir. Et votre travail n'est pas seulement de les aider à remplir cette tâche mais pour les aider à compléter cette tâche d'une manière qui est efficace, intuitif, et, comme une personne dit là-bas, accessible. Qu'est-ce que l'efficacité dire? L'efficience signifie la rapidité avec laquelle mon utilisateur ne terminer la tâche compte tenu de mon interface. Faut-il beaucoup de clics pour eux d'aller d'un endroit à l'autre? Est-il ennuyeux? Est-ce qu'ils ont à effectuer de nombreuses tâches répétitives? Nous voulons rendre ce processus aussi efficace que possible de sorte qu'ils n'ont pas besoin de faire ce genre de choses. En ce qui concerne l'intuitivité, qui est, par exemple, si un utilisateur regarde mon interface, il est facile pour eux d'obtenir de place en place? Est-il facile pour eux de comprendre ce qu'ils doivent cliquer dans mon interface dans le but pour eux d'atteindre l'objectif ou de la tâche qu'ils veulent atteindre? 

Et enfin, comme l'a dit là-bas, l'accessibilité est très important. [Locuteur masculin] Il s'agit de l'accessibilité pour des choses comme la vision, comme comment puis-je réellement concevoir quelque chose pour quelqu'un qui est aveugle? Oh. Pour les personnes qui ne voient pas du tout, nous avons ce qu'on appelle les lecteurs d'écran. Ce que vous devez faire est vous devez construire votre site web d'une manière que, par exemple, des technologies particulières que nous appelons - Il ya beaucoup de choses maintenant. Je pense qu'il ya des lecteurs d'écran JAWS appelés. Beaucoup de ces choses reposent sur ce que nous appelons règles région pour lire à l'utilisateur ce qui est présent sur la page. Pour ceux qui ne peuvent pas voir, vous devez vous assurer que ces lecteurs d'écran peut effectivement récupérer le contenu de la page et peut réellement montrer à vos utilisateurs, si vous ne pouvez pas voir, au moins vous pouvez toujours comprendre le contenu sur la page. Ouais. D'accord. Assez parlé de la bonne conception. Parlons un peu de mauvaise conception. Ce sont des choses que vous ne devriez pas faire. Quelqu'un peut-il me parler de leurs expériences avec Craigslist et ce qu'ils pensent n'est pas si grand sujet de cette conception? Oui. >> [L'élève] Je pense qu'il ya trop de mots dans un domaine. Trop de mots, non? Complètement écrasante. Vous arrivez à cette page et vous êtes accueilli avec un tas de choses ici qui pourraient même pas d'importance pour vous. Par exemple, vous vivez dans un état qui ne commence pas par cette lettre. Disons que vous vivez au Texas ou quelque chose. 

Vous devez faire défiler tout le chemin en bas de la page pour arriver à l'endroit où vous êtes. Je suis de Boston, alors laissez-moi regarder dans le Massachusetts. Où se trouve le Massachusetts? Oh, c'est juste ici. Oh, c'est Boston. D'accord. Regardons Boston. [Rires] Assez écrasante, non? Awkward choses là-bas. [Rires] Disons que je suis à la recherche d'un endroit pour vivre. Combien de personnes ont effectivement utilisé Craigslist? Des tonnes de vous. Il ya plusieurs façons assez mauvais à regarder, mais penchons-nous sur ce sujet. Quelle est la différence entre img et pic? Quelqu'un peut-il me dire? Il est en fait pas de différence. Ils veulent dire exactement la même chose, mais ils ont des étiquettes différentes pour eux pour une raison quelconque. Si je clique sur l'image A, rien ne se passe sur la page. En fait, je dois cliquer sur Recherche supplémentaire pour que quelque chose arrive. Ce qui pourrait être une meilleure décision de conception qui pourrait être fait là-bas? Si je suis en cliquant sur ce filtre, j'ai probablement envie de filtrer par cette action particulière ou cette catégorie particulière. Ainsi, au lieu d'avoir à appuyer sur Chercher à nouveau, je pourrais le faire automatiquement le filtrage sorte de style Google où ils le font instantanément. [Malan] Mais ne fait que nous avons vus jusqu'à présent doivent être physiquement présenté en appuyant sur Entrée ou en cliquant sur au moins un bouton? Comme vous l'avez vus jusqu'à présent, vous avez réellement de cliquer sur Soumettre pour faire ces choses. 

Mais comme Tommy va vous montrer en une seconde, il ya effectivement des façons pour vous de sorte que lorsque vous cliquez sur cette chose elle peut automatiquement envoyer ce que nous appelons une requête AJAX et récupérer des données et filtrer vos résultats instantanément. Il ya des tonnes de choses qui clochent dans cette interface. [Malan] Pouvez-vous rechercher Cambridge? Il ya quelque chose de légèrement anormal là que vous vous souciez de Cambridge et pourtant, vous obtenez Westford, Spring Hill, West Newton, etc. Probablement pas idéal. >> Probablement pas idéal. Comment pourrais-je être en mesure de faire l'expérience de l'utilisateur de mieux sur cette page en particulier? Oui. >> [L'élève] Instructions. D'accord. Les instructions contenues dans ce genre de sentiment? [L'élève] Par exemple, une chose pour les utilisateurs débutants qui ne savent même pas ce que Craigslist est ou vous ne savez pas ce que vous êtes censé faire. Droite. Donc, en expliquant ce que Craigslist est sur cette page est important. On peut effectivement dire aux utilisateurs ce que cette page est en fait pour. Si je suis simplement de passage, je vois un tas d'endroits. Je ne sais même pas ce qu'ils veulent dire. Mais plus important encore, simplement en regardant cette interface, me souviens que j'avais à faire défiler une tonne de choses à trouver une communauté particulière que j'ai effectivement pris en charge sur ce sujet. Ce qui est un moyen plus rapide que je pourrais faire cela? Oui. [L'élève] Divisez en régions à l'est à l'ouest,. Ok >>. Je pourrais les diviser en plusieurs catégories qui pourraient m'aider à déterminer plus rapidement comment se rendre à cet endroit particulier. [L'élève] Mettre une liste déroulante. Droit >>. D'accord. Je pourrais utiliser un menu déroulant parce que nous avons un ensemble fixe de choses et nous avons pu leur montrer dans un menu déroulant. De cette façon, il ne prend pas tant de place sur l'écran. Mais encore mieux que cela, que pouvons-nous faire? Oui. >> [Réponse de l'élève inaudible] >> Pouvez-vous répéter? >> [L'élève] zone de recherche. Oui, une boîte de recherche. C'est très bien. Ce que nous pouvons réellement faire est si nous regardons en arrière à la boîte de recherche diapositives,. Saisie semi-automatique. Moyen très facile de chercher dans les résultats que vous connaissez sont dans un ensemble. Si je commence à taper BO, juste me montrer tous les résultats qui ont à l'intérieur BO d'entre eux. De cette façon, je peux très facilement trouver celui particulier, je veux aller à l' au lieu d'avoir à faire défiler cette liste vraiment grand. 

Ce sont vraiment toutes sortes de fruits mûrs que quelqu'un qui est mise en œuvre Craigslist peuvent faire pour rendre l'expérience sur le site beaucoup mieux pour leur utilisateur. D'accord. Assez parlé à propos de mauvais sites. Parlons Facebook. Quand Facebook est sorti, et en particulier les photos sur Facebook, il y avait beaucoup d'autres services au moment qui pourrait faire exactement les mêmes choses. Ils pourraient organiser vos photos dans des albums. Qu'est-ce que vous pourriez faire, c'est que vous pouvez les organiser en ensembles ainsi. Vous pouvez les organiser par date. Vous pouvez faire toutes ces choses particulières. Mais personne ne sait ce que fait Facebook des photos exploser au moment de sa sortie? Oui. >> [Étudiants] Tags. Balises >>. Exactement. Nous avons Milo ici, qui est notre mascotte chien avec bandana qui CS50. Vous pouvez voir que nous avons cette fonction de marquage dans le milieu. Et ce qui fait des photos Facebook si intéressant du point de vue facilité d'utilisation c'est qu'il fait permis aux gens via ce faire participer leurs amis dans leurs photos. Pour Facebook, depuis leur site web est particulièrement sociale, il s'agit de bâtir ce genre de climat social. Cela a amélioré l'expérience de photos beaucoup plus parce qu'ils ne pouvaient réellement commencer en disant: «Ce sont des connexions entre les gens, et ce sont des photos sur les gens que vous avez réellement à cœur. " Une partie est également narcissisme sorte. Les gens aiment être étiqueté en photos et des choses comme ça. Alors que ce n'est pas nécessairement un caractère bien humain, en même temps, il est basé sur de bonnes décisions de conception parce que les gens se soucient réellement des choses comme ça. Donc, c'est les photos Facebook. 

Mais parlons Facebook manière plus générale. Je suis sûr que beaucoup de gens ici ont des opinions sur Facebook, deux décisions de conception et de bonnes décisions mauvaise conception. Donc, nous allons évacuer ou être heureux. Allez. Je sais que chacun d'entre vous utilisent Facebook. Quelqu'un doit avoir quelque chose de mauvais à dire ou quelque chose de bon à dire à ce sujet. Oui. [L'élève] Dans le flux de nouvelles, il ya beaucoup de choses que je ne se soucient vraiment. Le fil de nouvelles ne montrer beaucoup de choses que vous pourriez se soucient pas. Vous avez des amis sur Facebook qui vous n'avez pas rencontrés pendant 2 ou 3 ans et vous voyez leurs résultats de nouvelles d'apparaître dans votre fil de nouvelles et vous n'avez pas vraiment s'en soucier. Facebook a effectivement fait un effort pour améliorer ces informations, et ils ont vraiment essayé de pousser des résultats pertinents pour le haut du fil de nouvelles que de la fin si vous voyez les choses par des amis qui sont pertinentes pour vous ou pour vos proches. Rien d'autre? Oui. [Réponse de l'élève inaudible] >> Pouvez-vous répéter? [L'élève] Les petites annonces sont relativement discret. >> Dans quel sens? [Réponse de l'élève inaudible] Ils n'ont pas de lumière sur l'écran, comme des bannières. D'accord. C'est bien. Si vous vous souvenez de l'Internet dans les années 90 - >> [Malan] j'étais là. >> Il était là. [Rires] Vous vous souvenez peut clignotants milieux GIF, paillettes choses, Sorte de style GeoCities des choses. Ce n'est vraiment pas un exemple de bonne conception parce que c'est vraiment gênant à partir du contenu. Le site d'art de Yale l'habitude d'avoir des GIF animés comme leur arrière-plan et vous n'avez pas pu lire quoi que ce soit sur la page, mais je suppose que quelqu'un fait parlé d'eux et maintenant c'est un peu différent. [Malan] C'est beaucoup mieux maintenant. >> C'est beaucoup mieux maintenant, comme vous pouvez le voir. >> [Malan] Oh yeah. Tout simplement génial, juste - Ouais. D'accord. 

Une partie est également possible de faire votre page de très minimaliste et très compréhensible tant de choses sur le flux de la page d'une manière qui est très logique et ne pas obtenir de la manière de l'autre. Quelles sortes d'autres choses sont bonnes ou mauvaises à propos de Facebook sur Facebook? Disons simplement avoir une conversation conception ici. Oh. Où? Ouais. [L'élève] Le système Timeline nouvelle vous permet de rechercher le profil de la personne au sujet de leur passé. Ooh, Timeline. Chronologie est une bonne chose, car il vous permet de traquer vos amis quand ils étaient au lycée. Chronologie est bon parce qu'il vous permet de filtrer le contenu beaucoup plus rapide, il vous permet de trouver des choses qui, autrement, auraient pris vous un temps très long de trouver juste défilement vers le haut et vers le bas, haut, haut, haut, haut, haut, comme si on remontait dans le temps. Mais il ya aussi une sorte de négatif à celle en termes d'expérience utilisateur. Que pourrait-il être? Grand mot qui commence par P-R. >> [L'élève] de confidentialité. Protection des renseignements personnels >>, non? Protection des renseignements personnels est un enjeu énorme expérience utilisateur. C'est l'une des choses que je déteste le plus dans Facebook maintenant. [Rires] [Malan] Comme puis-je maintenant. David ne se rendent pas compte de ce qui s'est réellement passé jusqu'à hier. Alors maintenant, il sait que chaque fois que je le tchat Je sais qu'il a été m'ignorer. [Malan] La partie délicate a été fait, j'ai été l'ignorant, et je ne savais pas qu'il savait que je l'ignorer. [Rires] La vie privée est un énorme problème. Quelqu'un peut-il me dire ici ce qui pourrait être mauvais sur Facebook vie privée outre le fait qu'ils font des choses comme ça? Quelle est particulièrement difficile à faire à l'égard de la vie privée Facebook? Ce genre de question est un chef de file. Oui. >> [L'élève] Cachez vos photos de certaines personnes. Droite. Exactement, pour cacher vos photos de certaines personnes. Ils ont ce petit petit bouton en haut à droite qui vous permet de basculer la vie privée d'une photo. Leurs options de confidentialité sont très variés entre les différentes sortes de menus. 

Ils ont obtenu beaucoup mieux à ce sujet récemment, mais il l'habitude d'être le cas que chaque fois que vous vouliez empêcher vos amis de voir des photos de, vous devez passer par un très complexe en 5 étapes d'être comme, permettez-moi de cliquer sur ce lien, maintenant laissez-moi cliquez à nouveau, permettez-moi de cliquer à nouveau, permettez-moi de préciser que les gens ne peuvent pas voir mes photos. Ce n'est pas particulièrement bon de la part de Facebook parce qu'une grande partie de l'expérience utilisateur est effectivement en leur donnant la liberté de contrôler ce que les gens peuvent voir. Nous appelons ce contrôle utilisateur et de la liberté. Si vous n'êtes pas laisser les utilisateurs faire d'une manière qui soit efficace et intuitive, alors votre expérience utilisateur n'est pas vraiment terrible du tout.  Souhaitez-vous les gars vous dire quelque chose à propos de Facebook? Comment puis-je désactiver cette fonction? [Ong] Vous ne pouvez pas désactiver cette fonction, et c'est une faille énorme facilité d'utilisation de la part de Facebook. Cette fonctionnalité - En fait, j'ai regardé dedans hier - c'est soit que vous ne pouvez pas le faire ou il est enterré quelque part très, très profond dans les recoins de Facebook parce que je n'arrive pas à comprendre comment désactiver cette fonctionnalité à tous. [Malan] Mais parfois, ces décisions ne sont pas évidentes parce que vous les gars nous ont donné beaucoup d'informations utiles sur les diverses applications CS50 et les sites Web qui utilise le cours. Nous n'avons pas mis en œuvre l'ensemble de ces demandes et suggestions. 

Cela est en partie pour obtenir tellement de demandes que c'est une fonction du temps, mais parfois nous prendre une décision consciente, comme, "Merci pour la suggestion, mais nous sommes en désaccord." Alors, comment faites-vous pour décider ce qu'il faut faire si vos utilisateurs que vous devriez faire quelque chose même si vous n'avez pas nécessairement? C'est un équilibre délicat entre en train d'écouter ce que vos utilisateurs disent et effectivement avoir une sorte de ligne où que vous dites, "Nous n'allons pas faire ce que ces utilisateurs disent." Et en particulier, je pense qu'il y avait une citation de Henry Ford qui le résume assez bien. «Si j'avais demandé aux gens ce qu'ils voulaient, ils auraient dit qu'ils voulaient des chevaux plus rapides." Quelqu'un peut-il trier de démêler ce que cette citation signifie vraiment? Ce n'est pas seulement que les utilisateurs savent ce qu'ils veulent, mais il est plus que - [L'élève] Ils ne savent pas ce qui est possible. Dans la partie qu'ils ne savent pas ce qui est possible. Tease qu'à part un peu plus. Que voulez-vous dire par là? [Réponse de l'élève inaudible] C'est bien. Ce que je pense que nous essayons de dire ici, c'est que les gens savent ce qu'ils veulent. Ils veulent des chevaux plus rapides. Ce qu'ils veulent vraiment, c'est la capacité de se déplacer plus rapidement, mais ils ne savent pas vraiment le moyen par lequel pour y parvenir. Lorsque vous arrivez à vos utilisateurs et vos utilisateurs vous dire quelque chose et ils vous disent: «Nous voulons que ces caractéristiques et ces caractéristiques et de ces fonctionnalités," vous ne voulez pas nécessairement penser «Laissez-moi aller de l'avant »Et mettre en œuvre ce qu'ils disent explicitement," mais ce que vous voulez penser est: «Quel genre d'idées que je peux obtenir à partir de là?" Qu'est-ce qu'ils veulent vraiment? 

Et à partir de là ce que vous pouvez faire est de concevoir quelque chose qui répond à ces demandes mais pas nécessairement de la manière que l'utilisateur s'attend à ce qu'il soit satisfait. Donc, pour quelque chose comme projet final, en termes réels, ce qui est une heuristique utile quand il s'agit de faire quelque chose de mieux, surtout si le concepteur a cette arrogance chez lui lequel vous sorte de savoir ce qui est mieux, vous pourriez prendre l'entrée de vos utilisateurs, mais comment avez-vous fait prendre pour obtenir que la rétroaction? Dans les projets définitifs, très concrètement, ce qui produit des résultats optimaux ici? Ce qui produit des résultats optimaux - et je vais passer dans une seconde - C'est ce processus de développement, puis de tester et ensuite itérer. Ce que je veux dire par essai est généralement lorsque vous concevez quelque chose vous pensez que c'est assez bon, comme: «Je suis un grand designer. Tout le monde va adorer ça." Et puis, vous l'avez mis là-bas et les gens ne l'aime vraiment pour une raison quelconque. Qu'est-ce que vous avez à faire est que vous avez à prendre les parties de choses que les gens font comme et de réorganiser les choses que les gens n'aiment pas. Cela ressemble à un processus très évident, mais ce processus de constamment itération au-dessus de ce que vous avez déjà construit est un processus qui vous aide à non seulement à affiner vos compétences de conception propres, mais vous aide également à affiner la conception de sorte que les personnes apprécient votre produit encore plus qu'ils ne le faisaient auparavant. 

Je vais aller sur d'autres exemples concrets de ce que vous pouvez réellement faire. Comme une sorte de dernier exemple d'un produit, penchons-nous sur KAYAK. KAYAK quand il est sorti était très, très populaire. Quelqu'un peut-il deviner pourquoi? Quelles sont les sortes de choses que vous aimez à ce sujet si vous l'avez utilisé ou quelles sont les sortes de choses que vous n'aimez pas? Oui. >> [Réponse de l'élève inaudible] >> OK. C'est une partie de celui-ci est de laisser à l'utilisateur une requête qui est plus large à une très restrictif comme: «Vous devez choisir votre date de début »Et vous devez choisir votre date de fin." En effet, il vous permet de faire preuve de souplesse à ce sujet et il vous donne tous les vols dans cette gamme. Rien d'autre? [L'élève] Ils comprennent les frais dans le prix. Ils ne comprennent les frais dans le prix. Les taxes et les choses réellement aller directement dans ce prix dans le coin supérieur gauche si vous n'êtes pas trompés en pensant que vous êtes en train de payer pour un vol de 240 $ quand c'est vraiment 330 $. Rien d'autre? Oui. [Réponse de l'élève inaudible] Je ne suis pas certain qu'elles vous permettent de le faire. J'ai peut-être tort. C'est peut-être une chose intéressante si vous voulez mettre plus de poids sur des filtres particuliers afin qu'ils poussent les résultats relatifs à ce filtre vers le haut. Mais quelqu'un peut-il me dire quel est si spécial à propos de cette gauche? Comment avez-vous toujours chercher un vol sur un service Internet avant? 

Oui. >> [Réponse de l'élève inaudible] >> Pouvez-vous dire que - [L'élève] Chaque compagnie aérienne. Ouais >>. Chaque compagnie aérienne possède son propre site. Cela consolide les choses. Et alors? [L'élève] Vous savez exactement à quelle heure vous partez. Vous savez exactement à quelle heure vous partez, mais associées à des filtres en particulier. Permettez-moi de tirer vers le haut KAYAK. Oh mon Dieu, les pop-ups. Mauvaise expérience utilisateur. Qu'est-ce qui se passe lorsque je déplace ce curseur? [L'élève] Mises à jour automatiques. >> [Ong] Mises à jour automatiques. C'est quelque chose qui est très important. Avant cela, chaque fois que vous voulez chercher un vol, vous avez eu à mettre dans votre emplacement d'entrée, votre emplacement de sortie, appuyez sur Rechercher, il va traiter cela et afficher les résultats. Si vous vouliez changer votre requête, vous devez appuyer à deux reprises, entrer dans une nouvelle requête à partir de zéro, puis le faire encore et encore. La bonne chose à propos de quelque chose de ce genre est qu'il utilise une chose très [inintelligible] dans le milieu. Chaque fois que vous faites quelque chose comme ça, il tire hors d'une demande et il vous renvoie tous les résultats immédiatement. Ce type de rétroaction immédiate est quelque chose qui fait KAYAK très populaire parce que c'est vraiment facile pour moi de simplement changer ma requête et de comprendre les choses qui sont autour d'une gamme particulière sans avoir à revenir en arrière et en avant, en arrière, d'avant en arrière. Donc, ce sont toutes sortes de choses que vous voulez penser lorsque vous concevez votre site Web. Comment puis-je faire très efficace pour mes utilisateurs à passer par tout ce qu'ils travaillent sur et pour arriver à leur objectif final le plus rapidement possible? [Malan] Et au point de Joseph tôt sur les utilisateurs pas nécessairement en sachant ce qu'ils veulent, basé sur ce que vous les gars savent maintenant sur le langage HTML et vous avez cases à cocher, boutons radio, menus, sélectionnez les champs de saisie et autres, comment voulez-vous mettre en œuvre la notion de choisir une heure de début pour un vol? 

Lequel de ces mécanismes d'interface utilisateur différents utiliseriez-vous? Si vous venez de connaître la quantité de code HTML qui a été enseigné auparavant et vous savez que les entrées sont des boutons radio, cases à cocher, listes déroulantes, et la boîte d'entrée, quel serait votre choix naturel ont été pour la cueillette des dates? [L'élève] Entrée. Entrée >>. Ou peut-être même un menu déroulant avec toutes les dates, non? Donc, avec des mécanismes d'interface utilisateur plus complexes comme celui-ci sur le côté gauche que vous pouvez mettre en œuvre, vous pouvez rendre ce processus beaucoup plus intuitive avec un curseur parce que le temps est continu, et les gens en général ne pensent pas en termes de morceaux discrets. Très bien. Dernière chose. Dix heuristiques convivialité. Toutes les choses dont nous avons parlé sans doute entrer dans l'une de ces catégories. Si vous allez à ce lien, dont les sites seront mis en ligne, vous allez vraiment pouvoir le faire, comme vous concevez votre site, gardez à l'esprit ces heuristiques et ces règles de base. Pour vos projets, ce que je vous suggère de faire afin de concevoir votre application mieux est de faire le prototypage papier. Lorsque vous pensez à votre demande, très rapidement esquisser ce que vous voulez qu'il ressemble à et assurez-vous que toutes les cases sont disposées d'une manière qui est très intuitif pour l'utilisateur d'utiliser et même montrer ces prototypes papier à vos amis et commencez à des groupes de discussion. Juste obtenir 2 ou 3 personnes et leur demander de simplement taper sur ces prototypes papier, et leur montrer de nouveaux écrans pour voir s'ils comprennent réellement ce qui se passe. 

Qu'est-ce que vous voulez faire est de leur donner une tâche, de motiver cette tâche, et donnez-leur l'application et de les laisser l'utiliser. Ne pas leur donner des instructions au-delà. Vous voulez vraiment les laisser interagir avec votre application d'une manière qui vous permet de voir comment ils l'utiliser si vous n'avez pas été à côté d'eux. Et c'est très important. Cela vous donnera beaucoup d'idées à des gens autour obtenir des choses particulières d'une manière que je ne les ai pas l'intention d'? Sont-ils recours à des mécanismes particuliers d'interface utilisateur sur l'écran d'une façon qui est une sorte de hacky? Je n'ai pas l'intention pour eux de faire de cette façon. Et une fois que vous avez terminé avec cela, que voulez-vous faire? Vos roches de conception, non? Ce que vous voulez faire, c'est que vous souhaitez développer et faire que le processus recommence. C'est donc montrer aux amis une fois que vous avez mis au point, tester, développer, tester, développer, tester, répéter encore et encore et en avant. Le design est un processus très itératif dans ce sens. Vous avez en fait de construire quelque chose et puis se rendre compte des choses à ce sujet que vous n'avez pas réalisé avant et revenir en arrière et d'améliorer de cela. Maintenant, pour la partie développement, c'est ce que Tommy va vous montrer après la pause et comment vous pourriez être en mesure de mettre en œuvre quelque chose comme autocomplete d'une manière qui est assez simple. [Malan] Comme Tommy met en place ici, une question-là. Un grand nombre des premiers sites Internet - et quand Joseph dit des années 1990 site web de style, il était implémentations où si vous vouliez sélectionner une heure de début et une heure de fin, franchement, de retour dans la journée et même sur certains sites Web d'aujourd'hui, la façon dont vous le faire est de choisir une heure à partir d'une liste déroulante, vous chercher minutes d'une liste déroulante, peut-être que vous choisissez AM, PM, et puis vous faire que 3 fois plus. Et donc avec 6 clics et peut-être quelques-uns de défilement votre nom d'utilisateur peut effectivement fournir une sorte de date et / ou intervalle de temps dans ce sens. 

Donc, définitivement sous-optimale et encore à ce jour, nous avons vu pas de capacités expressives dans l'une des langues, nous avons regardé à faire quelque chose plus sexy comme ce curseur de temps de début et de fin des temps. Mais si vous repensez à la semaine 0 quand nous avons parlé Scratch, là aussi il n'y avait pas les widgets n'avait tout simplement certaines choses. Vous avez vraiment eu ces principes fondamentaux comme les boucles et les conditions, etc. Alors sorte de juste à y penser très abstraitement maintenant, indépendamment des particularités de HTML, ce qui se passe vraiment à quelque chose comme ceci heure de début et heure de fin curseur? Lorsque je déplace ma souris et je clique sur ce symbole carotte peu sur la gauche et commencez à faire glisser, programmation, qu'est-ce que vous voulez être en mesure de mettre en œuvre pour y arriver? Quelles questions, quels expressions booléennes voulez-vous être en mesure de demander? Qu'est-ce qui se passe vraiment? Sammy? [L'élève] Où est la position du curseur? Bon >>. Quelle est la position du curseur? C'est quelque chose que nous avons besoin d'exprimer retour à rayures, si elle était fondée sur place ou même la couleur ou autre. Vous vous rappelez peut très brièvement le lundi, il y avait toutes ces choses appelées événements dans le monde du Web, et donc il ya des choses comme onclick et onkeypress et onkeyup et onmouseover et onmouseout. Alors rends compte que même ces choses que nous avons été en prenant pour acquis sur le Web avec des sites comme Facebook et Gmail, même si vous n'avez aucune idée comment vous peut-être mettre en œuvre que parce qu'il n'y a rien de tel dans même conférence ou un problème Set 7, se rendre compte que ces principes fondamentaux exactement les mêmes, avec HTTP et les paramètres et GET et POST, avec les entrées HTML de base que nous avons examinés jusqu'à présent et dans un moment avec les mécanismes programmatiques de Tommy sur le point d'introduire vous pouvez commencer à vous exprimer tout comme vous l'avez fait dans la semaine 0 très intuitive par glisser-déposer. 

Donc, avec cela dit, Tommy MacWilliam et quelques nouvelles pièces du puzzle pour nous pour le Web. Très bien. Mon nom est Tommy et je vais en parler JavaScript. Juste un avertissement: je suis d'avis que JavaScript est le meilleur langage de programmation dans le monde entier ensemble. Il ya beaucoup de gens qui sont en désaccord avec moi, mais c'est tout simplement incroyable. Une fois que vous revenez à C, si vous avez à écrire C pour une autre classe ou d'autres langues, c'est vraiment frustrant dans tous les détails de bas niveau que vous avez à s'enliser po Donc, si jamais vous êtes triste à propos de comment ennuyeux C est d'écrire, juste revenir, écrire un peu de JavaScript. C'est le nirvana. Vous vous sentirez beaucoup mieux dans votre mauvaise journée. Une grande partie de la magie de JavaScript vient de sa capacité à manipuler les choses qui sont déjà sur la page. Lorsque nous avons écrit nos scripts PHP, ils ont été exécutés sur le serveur, et, finalement, que script PHP sans doute sortir un peu de HTML. Que le HTML a été envoyé au client, puis c'est tout. Si PHP a voulu ajouter un bouton à une page, par exemple, on ne peut pas vraiment faire cela. Il faudrait rendre l'ensemble nouveau fichier HTML et l'envoyer au navigateur. Avec JavaScript, nous savons que nous pouvons mettre à jour les choses alors qu'ils sont déjà sur la page, et à cause de cela, nous pouvons fournir des commentaires beaucoup plus immédiat, qui va vraiment améliorer l'expérience utilisateur sur notre site. Juste un bref récapitulatif des sélecteurs JavaScript. Nous savons que lorsque nous téléchargeons une page HTML, qui va être représenté dans les DOM. 

Le DOM est rappelez-vous juste ce grand arbre où les éléments sont liés dans cette grande hiérarchie. Lorsque nous avons travaillé avec des bases de données en pset 7, l'une des premières choses que nous avions besoin de savoir comment faire, c'était interroger la base de données. Nous avons cette grande table utilisateurs, et parfois nous avons juste envie de dire, «Je veux seulement certains de ces utilisateurs qui répondent à certaines conditions." De même, lorsque nous avons le DOM nous avons besoin d'une certaine façon de l'interroger. Nous avons besoin d'une certaine façon de dire: «Je veux que tous les boutons qui ressemblent à ceci "Ou l'ensemble des images sur la page." Et ces sélecteurs permettent de le faire. Alors juste un résumé rapide. Cette première ici, ce # soumettre, qu'est-ce que va choisir? Quelqu'un se souvient? [Réponse de l'élève inaudible] >> Oui, exactement. Cela va sélectionner un élément sur la page qui a un ID de présenter. Et si cette balise de hachage dit ce sélecteur est d'aller travailler avec des identifications. Que diriez-vous d'une seconde, ce. Centré, ce qui va choisir ce que? Ouais. >> [L'élève] de classe. >> Exactement. Ce va maintenant sélectionner par classe. La différence entre ID et classes ici est généralement l'ID doit être unique au sein de tout l'espace que vous êtes à la recherche terminée. Donc, si vous recherchez sur une page Web entière, vous devriez vraiment seulement 1 élément avec cet ID certain, donc dans ce cas de se soumettre. Avec les classes, d'autre part, nous pouvons avoir plus de 1 élément sur la même page avec la même classe. Cela pourrait être utile pour dire que je veux pour sélectionner tout ce qui est centrée sur la page plutôt que seulement 1 chose. 

Et enfin, cette dernière est ici un peu plus compliqué, mais ce qui est ce que ça va sélectionner dans le DOM? [Réponse de l'élève inaudible] >> Qu'est-ce que c'est? [L'élève] Tout ce qui est une balise. >> Nous avons 2 parties ici. La deuxième partie va dire que je veux pour sélectionner ces balises avec une étiquette d'entrée, de sorte que tout élément qui est une balise input. Mais je ne veux pas juste de sélectionner toutes les entrées parce que quelque chose comme un bouton submit pourrait être une entrée et quelque chose comme une zone de texte pourrait être une entrée. Donc, avec ces crochets que je dis que je ne veux pour sélectionner les éléments qui sont de type texte. Quelque part dans mon tag HTML j'ai un attribut appelé type, et la valeur de cet attribut doit être du texte. Alors que diriez-vous de cette première partie ici? Le premier mot de ce sélecteur est forme alors j'ai un espace, puis cette partie d'entrée. Qu'est-ce que ça fait, de mettre la forme en face d'elle? Cela va fondamentalement limiter notre requête. Ce pourrait être le cas que nous avons quelques entrées sur la page qui ne sont pas descendants d'un formulaire. Ce que cela va faire, c'est de cela que je veux seulement les balises d'entrée qui ont quelque part au-dessus de leur un élément parent d'un formulaire. Et aussi de cette manière que nous pouvons rendre ces questions plus hiérarchiques nous n'avons donc pas suffit de sélectionner tout assorti d'un sélecteur de donnée. Nous pouvons sorte de limite la portée de cette requête à autre chose. Alors, maintenant que nous savons comment sélectionner des éléments sur la page, Parlons un peu d'AJAX. AJAX est un acronyme encore très à la mode qui signifie Asynchronous JavaScript and XML. Il se trouve que XML est une façon de représenter les données. 

Ce genre de popularité perdue récemment, de sorte que le X dans AJAX n'est pas utilisé tout le temps. Fondamentalement, ce que AJAX nous permet de faire, c'est de faire des requêtes HTTP du contexte de JavaScript. Lorsque nous sommes dans notre navigateur web et nous sommes naviguer dans les pages et on clique sur un lien, ce que notre navigateur va faire est de faire une requête HTTP à tout lien on clique. Mais ce n'est pas toujours la solution idéale parce que si c'est le cas, alors que David l'a dit, nous devons toujours rendre les utilisateurs cliquent sur un bouton d'envoi ou de cliquer sur un lien afin de rendre quelque chose arrive qui va impliquer une requête HTTP. Donc, avec AJAX, nous pouvons faire ces demandes au nom du JavaScript. Cela signifie que chaque fois que l'utilisateur interagit avec la page ou quoi que ce soit arrive, nous pouvons réellement faire une demande de programmation à un fichier PHP d'autres sur notre site internet ou quelque chose d'autre et récupérer les données de ce fichier recrache. Jetons un coup d'oeil à un exemple d'AJAX. Ceci est notre page Finances CS50 avec laquelle j'espère que certains d'entre nous sont familiers. Si nous regardons le code HTML de cette page, nous voyons ici que j'ai ajouté quelques petites choses, dont je vous ai donné cette forme d'identité. Je l'ai dit id = "form-citation". Je l'ai fait juste parce que ça va faire cela un peu plus facile de choisir des DOM puisque je peux juste faire une requête très simple. Ce que je veux faire ici est que je veux corriger un problème avec CS50 Finances. Donc, si nous allons à finance.cs50.net, chaque fois que je veux obtenir un devis, je dois cliquer sur ce bouton Get Quote, et que le bouton Récupérer Citation prend alors moi à une autre page entière. Et si je veux une autre citation, je dois appuyer sur le bouton Précédent, puis je l'ai taper, Je obtenir un devis, et je suis tombé sur le bouton Retour. Ce n'est vraiment pas la meilleure expérience utilisateur. Qui aurait vraiment utiliser le site si ce n'est que lente pour obtenir des cours boursiers? Donc, ce que nous voulons faire avec AJAX est supprimer cette étape d'aller à une page séparée afin d'afficher les résultats. 

Qu'est-ce que nous sommes vraiment demandons, c'est que le prix vraiment petit, et c'est seulement une quantité très faible de données. Donc, il n'est pas nécessaire pour moi d'aller d'une autre page HTML entière, télécharger une nouvelle fournée de HTML, peut-être télécharger des images un peu plus, d'autres fichiers CSS juste pour moi de répondre à cette question très simple de combien coûte ce stock. Avec AJAX, nous pouvons faire cela beaucoup plus facile. Nous voyons ici que je suis de liaison dans un fichier JavaScript appelé quote.js. Nous allons effectivement ouvrir ce fichier. Pas là. Tous mes fichiers JavaScript vont être situé en HTML afin que le navigateur puisse y accéder. Ensuite, nous avons un répertoire séparé ici pour JavaScript et maintenant voici quote.js. Au sommet de ce fichier est dit ici ce que je veux attendre que la page entière soit chargée avant d'essayer de faire quelque chose. Pourquoi est-ce nécessaire? Il s'avère que la prochaine chose que je vais faire ici est de commencer la recherche d'un élément qui correspond à une certaine sélection. Si cette JavaScript est toujours exécutée avant cet élément est chargé sur la page, alors tout j'essaie de faire est de ne pas aller travailler parce que je vais essayer de choisir quelque chose qui n'est pas encore là. Donc cette ligne là-haut me dit que je veux que vous attendez que tout est chargé Nous sommes donc garanti que tous les éléments que je suis à la recherche sont effectivement sur la page. Ce signe dollar ici signifie que je suis en utilisant la bibliothèque jQuery appelé. Cette bibliothèque jQuery nous permet d'utiliser ces sélecteurs que nous venons d'examiner. En disant $ puis en passant en argument de cette forme # devis, Je suis en train de choisir cette forme que nous avons juste pris un coup d'oeil. Maintenant, j'ai une représentation de cette forme dans la mémoire en quelque sorte. 

Sur cet objet maintenant, cette représentation de la forme, Je suis maintenant en utilisant une fonction appelée. Qu'est-ce que cette fonction fait est que ça va attacher un gestionnaire d'événement. L'événement que nous allons écouter est l'événement submit. Ainsi, lorsque l'utilisateur clique sur ce bouton Envoyer ou appuie sur Entrée, cet événement se passe au feu. En accrochant là-dedans, je peux maintenant remplacer le comportement par défaut du formulaire. Sans cette JavaScript forme serait soumettre à tout fichier PHP nous avons utilisé dans cet attribut action. Mais à la place, je suis en train de dire, attendez, attendez, attendez, je ne veux pas que tu réellement le faire. Je veux que cela se produise avant de partir et essayer de se soumettre à un fichier PHP. Maintenant, qu'est-ce que je veux faire? A ce stade, je tiens à utiliser AJAX pour charger en quelque sorte à ce que le prix de l'action est. La première chose que j'ai besoin de savoir ce qui est disponible à l'utilisateur est à la recherche. Pour ce faire, je vais utiliser un autre sélecteur. Il s'agit de la troisième sélecteur, nous avons examiné auparavant. Ceci signifie que je veux commencer cet élément forme avec un ID de la forme-citation. Puis, quelque part à l'intérieur de cette forme il doit y avoir un élément d'entrée qui a un nom de symbole. Si nous regardons en arrière à notre HTML, nous avons vu que nous avions une entrée [name = symbole]. Cela signifie que ce qui se passe pour sélectionner cette zone de texte que l'utilisateur tape dans. C'est bien. Nous avons la zone de texte. Maintenant, nous avons juste besoin de savoir ce qu'il ya dedans d'elle. Pour ce faire, nous pouvons appeler cette méthode ici, ce val., et ceci dit je sais ce que vous avez zone de texte. Je veux que vous me disiez ce que c'est que l'utilisateur a tapé dans cette zone de texte. Maintenant, nous avons une chaîne appelée symbole qui est égale à ce que l'utilisateur a tapé po C'est bien. Nous pouvons utiliser cette chaîne pour rendre notre demande. Ceci est une nouvelle fonction ici, cette somme, sauf que nous ne sommes plus aller à la sélection des éléments, nous allons appeler une autre fonction qui est fournie à nous par jQuery. Cette fonction AJAX est ce qui se passe réellement à faire cette demande HTTP. Donc, il faut dire que quelques petites choses. La première chose que nous devons dire à cette fonction là où je veux aller la demande. Quelque part dans mon projet, j'ai ce fichier à l'intérieur du répertoire HTML appelé quote.php. Je ne peux accéder à ce fichier, nous l'avons vu, juste comme ça, si je vais à localhost / quote.php. 

Je veux que mon JavaScript afin de faire une demande à cette page. Quel type de demande maintenant? Nous avons vu auparavant que le formulaire a cette method = "post" attribut, ce qui signifie qu'il va faire une requête POST, donc il ne va pas mettre n'importe quoi dans l'URL, plutôt que d'une requête GET, ce qui serait tout simplement tiré si nous venez d'accéder à la page avec le navigateur, par exemple. Maintenant que nous avons dit je veux faire une requête HTTP POST à une page située à quote.php. Quand nous envoyer le formulaire, n'oubliez pas que nous pourrions accéder aux éléments d'entrée à l'intérieur de cette forme à cette variable $ _POST. Jusqu'ici, dans l'histoire, nous n'avons pas réellement envoyé en même temps toutes les données pour le moment. Nous avons simplement dit que nous faisons une requête AJAX et voici le type de demande que nous faisons. Maintenant, nous devons effectivement envoyer des données à la page. Pour ce faire, nous pouvons utiliser cette propriété appelée données. La valeur de cette propriété est en fait un tableau associatif. La raison en est qu'il nous permet d'envoyer plus que juste 1 morceau de données. C'est pourquoi nous avons ces accolades ici imbriquées dans ces autres accolades bouclées. Les touches de ces tableaux associatifs vont être la même chose que ceux attributs name dans nos éléments de formulaire. Cela signifie que si j'envoie le long d'une touche de symbole, cela signifie que ma page PHP peut accéder à ces données avec $ _POST [symbole] comme nous l'avons fait avant, quand nous étions soumission d'un formulaire. Et maintenant, les données réelles que nous voulons envoyer va être à l'intérieur de cette valeur tableau associatif. 

Nous avons laissé ce texte dans un symbole de variable appelée, et si nous envoyons le long maintenant une touche de symbole et une valeur de ce que l'utilisateur a entré po Maintenant que nous avons fait cette demande HTTP, notre fichier PHP a été exécutée, et il va envoyer des données en arrière maintenant au client qui vient de faire cette demande. Maintenant nous avons besoin pour répondre à tout ce que le serveur nous a dit. Pour ce faire, nous avons cette dernière propriété appelée ici succès. La valeur de cette clé de succès qui se passe réellement être une fonction, et c'est l'une des choses vraiment cool que vous pouvez faire avec JavaScript. Non seulement vous pouvez avoir entiers ou des tableaux comme à l'intérieur de la valeur d'un tableau associatif, nous pouvons aussi avoir une fonction. Donc, en disant succès, c'est ma clé. Un colon est dit ici est la valeur, et maintenant la valeur de cette fonction est en fait un. Donc, nous n'avons pas besoin de donner un nom de cette fonction en soi. Nous pouvons simplement dire que cela va être une fonction. Il va prendre 1 argument. L'argument de cette fonction va être quel que soit le serveur nous a renvoyé de la demande. Tout comme lors de notre navigateur envoie une requête, le serveur envoie quelque chose en retour et le navigateur affiche, dans le cadre d'AJAX nous venons de faire une demande, le serveur a envoyé quelque chose en retour, et maintenant que nous avons représenté sous forme de chaîne. Avec cette chaîne, je voudrais juste afficher que sur la page. Pour ce faire, je vais avoir un sélecteur dernière. Je veux sélectionner l'élément avec le prix d'identité. Ceci est juste un div vide que j'ai créé sur la page, et je tiens à mettre le contenu de ce div à être ce que le serveur nous a renvoyé. En fait, j'ai modifié un peu quote.php. 

Plutôt que d'appeler rendu et rendant une page, quote.php est maintenant tout simplement aller pour imprimer la valeur de l'action sous forme de chaîne. Donc, si vous étiez réellement visiter la page, vous devez juste voir que petite chaîne de ce que le prix de l'action est. Une dernière chose que nous devons faire ici est juste s'assurer que cette fonction retourne false. Ce que cela dit, c'est que si je suis à l'intérieur d'un gestionnaire d'événements et ce gestionnaire d'événements renvoie la valeur false au lieu de retourner vrai, cela veut dire que je ne veux pas l'événement d'origine au feu. Dans ce cas, si nous n'avons pas de JavaScript et nous avons soumis un formulaire, notre navigateur va dire: «Je vais envoyer ces données le long», et ils vont vous envoyer vers une autre page. Parce que nous utilisons AJAX maintenant, il n'est pas nécessaire d'envoyer l'utilisateur vers une autre page. Nous allons juste pour afficher les résultats de façon dynamique sur cette même page. Nous ne voulons vraiment pas à aller n'importe où, et je veux rester sur la même page. Donc, en retournant false, nous nous assurons que la forme ne fait pas cela pour nous. Jetons un coup d'oeil à ce que ressemble réellement. Notre page Devis semble le même. Permettez-moi de tirer vers le haut l'inspecteur ici afin que nous puissions voir ce qui se passe. Faites-en un peu moins grand. N'oubliez pas que si nous ouvrons l'onglet Réseau, c'est là que nous pouvons voir toutes les requêtes HTTP qui se produisent sur la page. 

Pour un symbole permettez-moi de saisir AAPL et cliquez sur Obtenir un prix. Or nous avons vu que la part d'Apple coûte un certain nombre de dollars vient d'apparaître sur la page, mais l'URL n'a pas changé du tout. En fait, voici la requête HTTP que nous venons de faire. Nous avons fait une requête POST à ​​quote.php. Cela a du sens. C'est ce que le serveur nous a renvoyé. Ce n'est plus ce document gigantesque HTML avec des images et des choses comme ça, c'est juste une ligne de texte, puis nous avons juste affiché la ligne de texte. Si nous revenons aux en-têtes et de voir ce que nous avons envoyé à l'intérieur de cette requête HTTP, nous pouvons voir ici que nous avons envoyé le long d'une clé de symbole et une valeur de AAPL, qui est ce que l'utilisateur a tapé po C'est bien joli, mais c'est quand même un peu ennuyeux. Il me reste à cliquer sur ce bouton pour obtenir le cours de bourse. Nous sommes des gens très occupés et nous n'avons pas eu le temps de cliquer sur les boutons. Google a réalisé ce petit il ya un moment où ils ont mis Google Instant. Que Google Instant fait est que vous tapez il commence juste l'affichage des résultats pour vous de sorte que vous n'avez pas à vous soucier de même en cliquant sur Rechercher. En fait, une histoire amusante lié à cela. Une fois que Google Instant est sorti, les gens disaient: «Waouh, c'est super étonnant." "C'est trop cool." Et un étudiant en bas à Stanford qui avait 19 ans au moment faites ce site appelé YouTube instantanée. Tout instantanée YouTube ne soit effectivement rechercher instantanément sur YouTube. Ainsi, plutôt que d'avoir à aller à YouTube.com et appuyez sur Rechercher, quand je commence à taper dans quelque chose de YouTube instantanée comme CS50, nous avons pu voir ici qu'il a essayé de se sur une connexion Internet lente remplir ces résultats en direct. Pour ce faire, nous pouvons réellement apporter une modification très simple à notre fichier quote.js. En ce moment nous fixer cet événement lorsque le formulaire est soumis. Nous n'avons pas vraiment envie de faire valoir que l'utilisateur sous forme plus, nous allons donc tirer au lieu cet événement chaque fois que l'utilisateur appuie sur une touche. Pour ce faire, nous allons d'abord changer l'événement de se soumettre à keyup. Cela signifie que, plutôt que d'attendre que le formulaire pour soumettre, chaque fois que la touche est enfoncée, quelque chose qui va se passer. Il n'a plus de sens pour fixer cet événement keyup à l'intégralité du formulaire. Nous avons vraiment ne se soucient que ce champ de recherche. 

Pour sélectionner que maintenant, nous pouvons changer ce soit, plutôt que formulaire devis, forme devis et nous aurons une entrée (type = text) ou pourrait-on dire (nom du symbole =) - ce que nous voulons. Maintenant, il ya une dernière chose que nous devons faire. Rappelez-vous ici quand nous avons dit fausse déclaration nous avons dit que nous ne voulons pas que l'événement par défaut au feu. Mais il se trouve que si on désactive que maintenant, tout ce que nous taper ne va pas apparaître dans le navigateur plus parce que ce serait le comportement par défaut de taper dans une zone de texte. Nous ne voulons plus de passer outre cela, nous allons donc détruire cette fausse déclaration. Si nous sauvons que et rechargez la page, maintenant, quand je commence à taper AAPL vous verrez que le prix de l'action au fond ici est terminé automatiquement. Voici donc CS50 instantanée Finances. En fait, une histoire amusante à propos de l'Instant YouTube est que l'élève tout type de ai écrit comme un projet 1-nuit, et le lendemain, on lui a offert un emploi par le PDG de YouTube. Donc, aussi simple que cela, vous CS50 étudiants, vos projets finaux, vous pouvez obtenir un emploi à YouTube. Quelque chose comme ça, c'est une idée vraiment cool pour un projet final, non? Nous avons eu quelques fonctionnalités existantes que nous avons voulu intégrer. Nous améliorons l'expérience utilisateur un peu, et tout à coup quelque chose de chercher sur YouTube instantanée pourrait être beaucoup plus facile que de chercher sur YouTube régulière. Donc, c'est AJAX en un mot. 

Dans les exemples que Joseph a été montrant, nous avons vu beaucoup de autocompletes, et ces autocompletes sont vraiment, vraiment très pratique car nous n'avons pas à retenir - Par exemple, si vous ne me souviens pas du prix de l'action pour Apple et nous savons juste que c'est quelque chose aa, plutôt que de simplement dire à moi, "Une part de cette chose coûte tant d'argent», Je peu comme de savoir ce que les stocks commencent par aa. Nous pouvons le faire vraiment bien avec la bibliothèque d'amorçage qui est déjà inclus l'intérieur du CS50 Finances. Si vous venez ici pour la balise JavaScript et faites défiler vers le bas pour typeahead, c'est juste un plugin agréable que quelqu'un a déjà écrit pour nous, et nous pouvons facilement utiliser sa fonctionnalité de ce genre. J'ai tapé un A et voici une liste de certains États qui commencent par la lettre A. Disons que je pense que c'est vraiment cool et il est temps pour moi de comprendre ce sur ma page. Il s'avère que c'est vraiment, vraiment simple. Ouvrons ici pour quote3.js. Mon fichier ressemble un peu différent. Ici-bas tous mes trucs AJAX est la même. Je veux charger les données de stock sans avoir à passer à une autre page. Mais maintenant je veux utiliser ce plugin. La documentation Bootstrap a d'excellents exemples de la façon dont je peux faire exactement cela. Je veux dire: «Voici l'entrée que je veux autocomplete sur" et je vais appeler cette fonction appelée typeahead, et qui va gérer tous les trucs typeahead pour nous. Il va initialiser la liste, il fera tout de nos filtrage. La seule chose qu'il a besoin de savoir est ce que les données nous sur autocompleting. Donc j'ai découvert cette touche juste en lisant la documentation et en regardant les exemples. Si je lui donne une touche de source, la valeur de cette clé est juste une série de choses que je veux saisie semi-automatique sur. Cette variable est venu de cette autre fichier. J'ouvre symbols.js. 

Cette symbols.js est juste ce tableau vraiment, vraiment grand contenant des chaînes de tous ces symboles boursiers du NASDAQ. Si je veux revenir au HTML, de sorte jharvard, vhosts, globalhost, html, modèles, quote_form. Depuis ce qu'on appelle maintenant quote3.js, permettez-moi de modifier le fichier JavaScript j'inclus ici. Maintenant, je dois quote3.js, donc je vais charger dans ce fichier JavaScript séparé, celui qui a cette saisie semi-automatique Bootstrap. Maintenant, quand je revenir au navigateur, rechargez la page, et je commence à taper aa, il ya ma saisie semi-automatique. Et c'était vraiment aussi simple que cela. J'ai eu 1 ligne de code qui vient d'être dit, «Voici les choses que je veux autocomplete sur" et tout à coup j'ai cette fonctionnalité vraiment, vraiment sympa avec pas beaucoup d'effort. Comme vous développez des sites Web et particulièrement le côté frontal de choses, vous allez trouver que c'est le cas de beaucoup. Il ya beaucoup, beaucoup, beaucoup de bibliothèques gratuites vraiment cool là-bas qui font qu'il est super facile de faire des choses comme ça. Peut-on penser de tous les inconvénients de simplement autocompleting sur cette grande liste de symboles? Quel pourrait être quelque chose qui n'est pas le meilleur avec cette approche? Ouais. >> [L'élève] Le temps, si vous avez beaucoup de [inaudible] Ouais. Actuellement, nous sommes téléchargement de ce fichier JavaScript énorme et il ya beaucoup de symboles. Et si nous avons une tonne de choses, ce genre pourrait d'augmenter la latence non seulement de la recherche mais aussi télécharger le fichier réel. Grande. Rien d'autre? À l'heure actuelle il n'y a aucun sens réel de pertinence. Si je tape dans un A, les sociétés qui apparaissent ici pourraient ne pas être les entreprises les plus populaires qui commencent par la lettre A. 

Avant d'en arriver à Apple, il pourrait prendre encore quelques caractères pour trouver ce que je cherche. Cette saisie semi-automatique n'a pas ce sens de la pertinence. Il va tout simplement de dire: «Tout ce qui correspond, je vais à afficher." Au lieu de cela, je voudrais moyen d'intégrer une certaine pertinence dans mes recherches. Si je vais là-bas pour Yahoo! Finance, finance.yahoo.com, Si j'essaie d'entrer un symbole sur la page Yahoo! Finance et je commence à taper goog, j'ai cette belle liste de choses. De toute évidence, il ressemble Yahoo! Finance fait quelque chose de plus intelligent ici. Ils ont une certaine pertinence et ils ont aussi des informations supplémentaires comme le nom de l'action. C'est quelque chose que je ne peux pas vraiment avec juste ma liste de stock de symboles. Je veux cela et je vais le prendre. Pour ce faire, nous allons faire quelques petites choses. Voyons d'abord ouvrir l'inspecteur sur cette page car nous avons vu que cette page n'est pas du tout rechargement, il est donc probablement en utilisant AJAX en quelque sorte à charger ses données. Nous ne pouvons savoir quelles données il est chargé. Si je clique sur cet onglet Réseau, ceux-ci vont être toutes les demandes qui commencent à être tirés. Maintenant, si je tape dans goo, nous pouvons voir que je viens de recevoir une requête HTTP nouvelle. C'est probablement là que les données provenant d'. Effectivement, si je regarde cette URL, ce qui est un peu curieusement nommé, nous pouvons voir que c'est exactement là où Yahoo est l'envoi de ses données. 

J'ai créé un fichier distinct appelé suggest.php qui est très semblable dans l'esprit à la fonction de recherche. C'est fondamentalement va faire une requête à l'URL de Yahoo, obtenir certaines données, et de l'envoyer de nouveau à moi. Maintenant, plutôt que d'utiliser cette grosse énorme liste de symboles, Je peux utiliser des choses Yahoo pertinence belles, et je n'ai pas de télécharger ce fichier massif JavaScript. Je ne vais abattre les symboles de stocks effectivement pertinents. Débutons cela. Donc, html, js. Nous sommes maintenant en quote4. Maintenant, nous ne sommes plus en utilisant cette grande liste de fichiers JavaScript. Mais il ya une sorte de petit problème de conception ici. Nous avons dit que le A dans AJAX est asynchrone. Qu'est-ce que cela signifie, c'est que quand je fais une requête AJAX, donc ici sur la ligne 8, c'est là que ma requête AJAX est réellement lancé. Disons que maintenant, j'ai un peu de code ici-bas qui va faire des trucs comme alerter l'utilisateur ou changer quelque chose sur la page. Qu'est-ce qui ne va pas arriver, c'est le navigateur ne va pas attendre que cette demande de continuer avant de redescendre et de toucher cette ligne. C'est la partie asynchrone. Il va faire cette demande et dire: «Chaque fois que vous avez terminé, «Revenir et appeler cette fonction que je vous ai dit d'appeler à l'intérieur de la réussite." Cela signifie que nous ne pouvons pas vous suffit de télécharger tous les stocks à l'avance. Nous devons faire la demande et attendre que quelque chose de revenir. Cela signifie qu'avant, nous pourrions simplement dire Bootstrap, »Voici la liste des choses que je vous voulez saisie semi-automatique sur." Nous ne pouvons plus faire ça parce que nous ne savons pas ce que nous voulons réellement saisie semi-automatique sur. Heureusement, Bootstrap pensé à cela parce que ce sont les gars intelligents là-bas, et ils nous ont donné une autre réalité moyen de charger ce plugin typeahead. Avant, la valeur de cette propriété source était juste ce grand tableau de choses à saisie semi-automatique sur. 

Maintenant, la propriété source est en fait une fonction, et le but de cette fonction est de déterminer quelles sont les choses à saisie semi-automatique sur sont. La façon dont il va comprendre cela est-il va demander Yahoo! Finance quelles sont les meilleures choses à saisie semi-automatique sont. Pour ce faire, je vais faire une demande très similaire AJAX. Je vais demander à suggest.php cette page. Je veux envoyer le long des symboles encore. Et maintenant, mon succès, la documentation Bootstrap m'a dit que, afin de peupler cette liste de choses, tout ce que je dois faire est passer dans ce tableau maintenant à la fonction callback. Mais attendez une minute. Si cela est censé être un tableau et AJAX est me renvoyer le texte, comment est-ce possible? Cela introduit une nouvelle façon d'échanger des données JSON appelés. Dans ce cas, nous ne sommes pas seulement renvoyer une simple chaîne de texte. Maintenant, nous avons affaire à cette liste plus complexe de symboles boursiers. Ces symboles d'actions peuvent également inclure des choses comme le nom de l'entreprise ou les prix courants. Tout en utilisant une grande chaîne longue qui n'est pas formaté en aucune manière prévisible ne va pas être la meilleure façon d'obtenir ces données à partir du serveur de Yahoo pour moi d'une manière que je peux facilement comprendre. JSON est une technologie qui tire parti de la façon dont nous créer des tableaux associatifs en JavaScript. Cela ressemble beaucoup à un tableau associatif JavaScript, et en fait, c'est parce qu'il est. JSON est synonyme de JavaScript Object Notation. Il s'agit essentiellement d'un format convenu pour transférer des données dans les deux sens. Voici cet objet JSON JSON ou du présent tableau associatif envoie-moi quelques données sur un cours. 

Les clés de ce tableau sont des choses comme cours qui a une valeur de CS50, et ici nous pouvons voir que je peux avoir une valeur qui est un tableau. Je n'ai pas à faire des choses comme parse sur cordes et de chercher des virgules et faire des choses folles comme ça. Parce que cela est déclaré dans ce format JSON, JavaScript et jQuery déjà des fonctions pour convertir une chaîne qui ressemble à ceci JSON dans un tableau associatif JavaScript réelle que nous pouvons travailler avec. Faire cela est aussi simple que de dire qui n'est plus ce fichier, suggest.php, me renvoyer simplement une chaîne de texte, mais je sais que ça va être me renvoyer JSON. Cela signifie que ce que JSON peut être converti en un tableau associatif JavaScript. Et si jQuery, je voudrais que tu fasses ça pour moi. Cela signifie que ce paramètre de réponse ici, ce n'est plus seulement une chaîne. Parce que nous avons dit jQuery qui vient ici quelques JSON, jQuery va être assez intelligent pour dire: «Vous avez voulu JSON?" «Je vais convertir en un tableau associatif pour vous." Nous allons effectivement jeter un oeil à l'onglet Réseau une fois que nous avons quote4.js. Nous allons changer cela et rechargez la page. Maintenant, je vais taper un nouveau-un. J'ai fait une couple lui demande à suggest.php, mais maintenant cette réponse, plutôt que de simplement la chaîne, c'est JSON. J'ai donc une accolade ouvrante disant: «Voici un tableau associatif." 

La première clé et seulement de ce tableau associatif est appelé symboles, puis est ici un ensemble de tous les symboles pertinents vient maintenant de Yahoo! Finance, et non pas à partir de cette liste gigantesque. C'est comme ça que je peux simplement remplir ce plugin autocomplete avec des données qui ne viennent pas d'un fichier local qui est déjà prédéterminé mais de quelque chose d'autre. Il s'avère que nous pouvons profiter d'une technologie appelée JSONP, ou JSON avec un rembourrage, qui permettra d'éliminer cet intermédiaire suggest.php. Mais au lieu de cela, nous allons plutôt jeter un oeil à la façon dont je peux améliorer cela encore plus. J'aime vraiment typeahead Bootstrap a. C'est vraiment agréable. Mais n'allons pas trop bon à JavaScript et nous voulons sorte de le faire nous-mêmes, peut-être jeter un oeil à ce que ce plugin pourrait faire. Laissez-est de ne plus utiliser ce truc typeahead, et nous allons essayer de mettre cette liste de valeurs suggérées nous-mêmes. Ici, dans quote6.php nous allons commencer de la même manière. Chaque fois que quelqu'un tape quelque chose, nous voulons faire une requête AJAX. Ceci est similaire à notre origine CS50 instantanée Finances. Plutôt que de faire une demande de quote.php, nous sommes en train de faire une demande en ce même fichier que précédemment, ce suggest.php, qui va juste pour extraire des données de Yahoo! Finance. 

Encore une fois, nous sommes toujours en attente JSON, mais maintenant, depuis le typeahead ne le fait pas pour nous, nous avons également besoin d'envoyer le long de la valeur qui est à l'intérieur de la zone de texte courant. Maintenant, nous savons ce qu'il faut demander Yahoo! Finance pour, et maintenant voici la fonction que nous voulons exécuter une fois la demande terminée. Nous n'avons pas le plugin pour faire la liste pour nous, si c'est là que nous allons en fait de construire une liste de suggestions. Pour ce faire, un peu comme en PHP, nous concaténés ces chaînes de grands HTML puis nous les faire imprimer, nous pouvons faire exactement la même chose en JavaScript. D'abord, nous allons commencer cette chaîne appelée suggestions, et cette chaîne va juste pour contenir du code HTML. Nous voulons que ce soit une liste de choses, donc nous allons commencer avec ce tag liste, et maintenant nous allons itérer sur tous les symboles qui ont été retournés de nouveau à nous. Rappelez-vous, parce que nous avons dit dataType: "json", ce n'est pas une chaîne. C'est déjà un tableau pour nous. C'est vraiment cool. Nous pouvons simplement dire: «Je veux que vous pour ajouter un élément de la liste." Nous allons le mettre à l'intérieur d'un élément dans un côté de cela, nous allons lui donner une classe de suggestions afin que nous sachions ce qu'elle est, et maintenant voici le symbole que nous sommes rentrés de Yahoo! Finance. 

Une fois que nous avons créé un élément de chacun des symboles que nous avons décidé de remonter, nous voulons juste fermer la liste. Alors maintenant, suggestions représente ce petit fragment HTML qui, posée sur une page va être la liste des choses que nous recherchons. Maintenant, nous allons effectivement mis que sur la page. Pour ce faire, j'ai effectivement créé un autre div vide et je lui ai donné un ID de suggestions. Tout comme nous avons mis le contenu de la div qui affichent le prix des données sur les stocks, nous avons juste à définir le contenu de ce div à ce que cette chaîne est qui contient les symboles. En utilisant cette méthode HTML, cette variable suggestions, cette chaîne est une chaîne HTML. Je veux que vous preniez que le HTML et le mettre dans la div appelle suggestions. Nous venons tout juste ajouté quelque chose au DOM maintenant. Nous avons ajouté quelques nouveaux éléments au DOM que nous pouvons maintenant afficher sur la page. Voyons voir à quoi cela ressemble. Si nous chargeons de quote6 et maintenant nous revenons, maintenant, quand je commence à taper AAPL, nous n'avons plus que Bootstrap saisie semi-automatique, mais nous avons maintenant cette liste que nous avons nous-mêmes fait. C'est un peu plus laid que le typeahead Bootstrap, par exemple, mais il ne nous permettent de faire autre chose. Quand nous cherchions à ce plugin Bootstrap, nous avons vu que lorsque nous autocompleted, l'une des valeurs saisie semi-automatique a été AAPL. Cela pourrait ne pas être si utile. En tant qu'utilisateur, je ne pourrais pas reconnaître immédiatement tous les symboles boursiers. Ce que je suis probablement plus susceptibles de reconnaître des noms réels de la société. Donc, ça ne serait pas vraiment utile si plutôt que de dire AAPL cela dit quelque chose comme Apple Inc Parce que nous avons roulé nous-mêmes, nous pouvons très facilement le faire. Ouvrons notre fichier dernière citation ici, donc quote7. 

C'est la même chose. Je viens de créer un autre fichier PHP qui va nous retourner plus que les symboles. Il nous donnera aussi de retour noms de l'entreprise. Et si nous faisons la même chose. Nous faisons une requête AJAX. Une fois la demande complétée, nous allons exécuter cette fonction ici, et cette fonction va construire une grande chaîne d'éléments. Mais la différence ici est que la valeur de ces listes n'est plus seulement le symbole, c'est maintenant le nom. Donc, nous avons un petit problème. Lorsque nous utilisons notre recherche, il nous faut en quelque sorte passer le symbole. Nous ne pouvons pas passer à quelque chose de la recherche, comme Microsoft Corporation. Nous devons lui passer MSFT. Lorsque nous écrivons HTML, nous avons beaucoup de belles intégré dans les attributs. Un A peut-être associé à un href ou une classe. Mais ce dont nous avons besoin maintenant, c'est pour chacun de ces liens d'avoir un symbole qui lui est associé. Il n'y a aucun attribut prédéfini HTML pour symbole boursier, mais heureusement, HTML5 nous permet de créer nos propres attributs pour être ce que nous voulons. En disant symbole de données, j'ai introduit un nouvel attribut dont le nom que je viens d'inventer, et c'est bien parce que je l'ai fait précéder ces données. Nous allons stocker à l'intérieur de là le symbole du stock maintenant. Ce que cela signifie, c'est que même si nous sommes d'afficher la valeur du nom de l'entreprise à l'intérieur de notre auto-complétion, nous sommes toujours en se rappelant le symbole qui est associée à chaque entreprise. La façon dont nous le faisons est à l'intérieur de cet élément lui-même. Cela signifie donc que nous devons faire encore un changement. Quand nous l'avons cliquez maintenant, nous devons effectivement profiter de l'attribut de symbole plutôt que sa valeur. Si nous soutenons, nous attachons un gestionnaire d'événements aux suggestions. Chaque fois que l'une de ces suggestions est cliqué maintenant, je veux faire quelque chose. Ce que je veux faire est de changer la valeur de cette zone de saisie. Maintenant, je veux régler cette fonction val même. 

Donc, sans aucun argument de cette fonction val revient vers vous ce qui est déjà dans la zone de texte, mais si vous lui donnez une chaîne, il va prendre cette chaîne et le placer dans la zone de texte. Je sélectionne la zone de texte de la même manière. Son nom est à l'intérieur de la forme-symbole devis. Maintenant, je lui envoyant la valeur de l'attribut de symbole de données. Cette chose ici est nouveau, ce $ (this). De quoi il s'agit est l'élément qui a été cliqué. Nous pouvons voir ici que nous ne sommes pas attacher un événement de clic à chaque élément avec une classe de suggestion individuellement. Au contraire, nous nous approchons de cela un peu différemment. Au lieu de cela, nous disons chaque fois à l'intérieur quelque chose de ce div suggestions, rappelez-vous ce qui est juste le conteneur pour cette liste, si quelque chose à l'intérieur de ce div est cliqué et il a une classe de suggestion, Je veux cet événement au feu. Fondamentalement, ce que cela signifie que nous pouvons faire est que nous pouvons utiliser ce gestionnaire d'événement pour toutes les choses de la liste. Donc, nous n'avons pas besoin d'avoir un gestionnaire d'événements pour le premier élément et un gestionnaire d'événements différent pour le second élément. Nous pouvons plutôt dire: «Je veux le gestionnaire d'événement à s'appliquer à tout dans ma liste." Mais nous devons en quelque sorte savoir quel élément a été cliqué. Cette "ce" mot-clé représente exactement cela. C'est l'objet qui vient d'être cliqué par l'utilisateur. Si je clique sur le lien 3e, ce qui représente l'élément de ce lien 3e, ce qui signifie que je peux obtenir son attribut, symbole de données, que nous connaissons doit contenir le symbole qui est associé à l'entreprise que j'ai juste cliqué. Si nous revenir à notre page d'finances, nous pouvons voir maintenant que lorsque je commence à taper quelque chose comme msft, nous ne sommes plus seulement obtenir les symboles boursiers, nous recevons maintenant des sociétés réelles. Mais lorsque je clique sur une de ces sociétés, nous pouvons voir que nous sommes réellement remplir la zone de texte non par le nom de l'entreprise mais avec tout ce qui était stocké à l'intérieur de ces attributs de données. Et si je fait inspecter un de ces éléments en cliquant droit dessus Inspectez et en cliquant sur l'élément, nous pouvons voir à quoi cela ressemble. 

Rappelez-vous que c'est quelque chose que nous avons créé à l'intérieur de cette boucle for lorsque nous avons construit jusqu'à cette chaîne de HTML. Nous pouvons voir ici que ce symbole de données a la valeur d'MSFT, qui est grand. C'est ce que nous attendions. C'est le symbole et c'est comme ça que nous avons obtenu la valeur que nous avions besoin d'utiliser l'intérieur de cette zone de texte. C'est suffisant pour le formulaire de soumission, parce que c'est un peu ennuyeux. Disons simplement faire quelques améliorations rapides à notre page de portefeuille. Si vous avez utilisé CS50 Finances pendant un certain temps et vous commencez à acheter et à vendre un grand nombre de stocks, finalement cette table va devenir assez grand, et vous allez avoir un téléscripteur, bien sûr. Une fois que la table est vraiment, vraiment grand, il pourrait être utile pour l'utilisateur d'essayer de chercher sur elle. A l'intérieur du champ de recherche si je commence à taper quelque chose comme Disney et la recherche de mon stock de Mickey Mouse, nous pouvons voir que la table est maintenant de filtrage d'après ce que je viens de tapé po Cette fonctionnalité semble super compliqué, mais c'est vraiment, vraiment facile avec jQuery et JavaScript. Ce fichier comprend portfolio.php un fichier JavaScript appelé portfolio.js. Jetons un coup d'oeil. Donc, html, js, portfolio. C'est là que nous faisons que la recherche sur la table. La première chose que je dois faire, c'est attacher un gestionnaire d'événement pour cette zone de texte parce que nous savons que nous voulons que notre fonction de filtrage au feu chaque fois que l'utilisateur appuie sur quelque chose parce que nous n'avons pas le temps pour les boutons de recherche. La première chose que nous devons faire est de déterminer ce que l'utilisateur est à la recherche, tout comme nous le faisions auparavant. Ce mot clé renvoie à l'élément courant l'utilisateur interagit avec. 

Parce que l'utilisateur interagit avec le champ de recherche, $ Ce qui représente la zone de recherche, si this.val nous donne ce qu'il ya dedans de la boîte de recherche de l'utilisateur est en train de taper. Donc, maintenant ce que nous voulons faire, c'est que nous voulons pour itérer sur toutes les lignes à l'intérieur de notre table. Pour sélectionner toutes les lignes dans le tableau, j'ai donné cette table une pièce d'identité du portefeuille de table, et chaque ligne est représenté par un élément de TR, si ce sélecteur va revenir pour moi un grand tableau de toutes les lignes dans ma table. Maintenant, je veux itérer sur ce tableau. Je pourrais vous une boucle for, mais jQuery fournit en fait nous la fonction de bien appelé «chacun». Ce que chacun fait, c'est chacun prend un argument, et que l'argument est une fonction. Qu'est-ce que ça va faire, c'est que ça va appliquer cette fonction à chaque élément à l'intérieur de cette liste. Cette fonction prend un argument qui est e, et lorsque cette fonction est exécutée, ce e va être remplacée par la première rangée, puis la deuxième rangée, puis la troisième rangée. De cette manière, c'est la même chose que l'exécution d'une boucle for et ensuite réfléchir à l'élément actuel, basé sur l'index de votre intérieur de la boucle. À chaque itération, pour chacune de ces éléments dans le tableau, Je veux vérifier si le texte de l'élément - le texte de la cellule à l'intérieur de la ligne - correspond à ce que je recherche. Cette grande chaîne longue de commandes est de savoir comment je pourrais le faire. Tout d'abord, encore une fois, il s'agit maintenant de - parce que c'est à l'intérieur d'une nouvelle fonction - c'est maintenant la ligne en cours dans la table. Je veux prendre la ligne courante de la table, et je veux obtenir tous ses enfants. Rappelez-vous, le DOM est un arbre hiérarchique, ce qui signifie que les éléments ont un nombre d'enfants. 

Cette fonction. Enfants va me revenir en arrière d'un tableau de tous les éléments qui sont les enfants d', dans ce cas, une ligne dans la table. Il s'agit tout simplement les cellules à l'intérieur de la ligne. Je veux juste chercher sur la première cellule. Cette fonction. Premier dit de me donner le premier élément de ce tableau. Ensuite, la fonction texte dit exactement ce que me trouve à l'intérieur de cette cellule puisque je veux effectuer une recherche sur ce texte. Enfin, nous allons convertir en minuscules, afin que nous puissions faire des requêtes de cas de texte insensibles. Enfin, nous voulons voir si cette chaîne à l'intérieur d'une table contient la chaîne que nous cherchons. La fonction indexOf en JavaScript est là pour ça. Il nous dit si oui ou non cette chaîne contient une autre chaîne. S'il est vrai que la cellule contient ce que je cherche, alors je veux m'assurer que c'est indiqué. La méthode show va dire: «Montrez l'élément." Si ce n'est pas le cas, alors cela signifie que tout ce que je cherche n'est pas contenue au sein de cette ligne, et je tiens donc à cacher, c'est à l'utilisateur. Qui permet d'obtenir cet effet de filtrage agréable où plus nous voir l'ensemble du tableau. Si vous êtes intéressé par la façon de faire de ce symbole, ainsi, nous afficherons la source en ligne. Mais il est vraiment simple. JQuery a des méthodes impressionnantes pour ces animations et la manipulation des propriétés CSS. Donc, c'est ça pour moi. 

Qu'y at-il donc venir? Comme vous le verrez dans quelques jours, la proposition finale des projets est due. La proposition finale projets vous poser quelques questions, mais parmi eux aura trois étapes - de lui une «bonne» étape, un jalon de mieux, et un best. L'idée étant vraiment vous aider les gars définir vos attentes de sorte que très peu, vous serez heureux avec la sortie de votre projet final et il sera «bon» pour autant que vous êtes concerné. Mais alors, dans l'intérêt de vous amener à atteindre un tout petit peu de quelque chose de mieux ou quelque chose de mieux, nous allons également trier de vous pousser vers cela aussi. Le CS50 Hack-a-thon, quant à lui, est dans quelques semaines. En général, nous le faisons sur une base par tirage au sort en raison de l'intérêt, mais les chances sont que nous allons prendre quelques centaines d'entre nous dans des navettes de Harvard Square vers le bas pour Kendall Square, où Microsoft a une belle installation justement appelé "NERD" - la Nouvelle-Angleterre et de la recherche du Centre de développement. Nous allons y arriver vers 8 heures, nous aurons un peu de nourriture. Environ 1 heures, nous aurons un peu plus de nourriture. Environ 5 heures du matin si vous êtes encore éveillé, nous nous dirigerons vers IHOP ou vous emmener vers le campus. L'objectif est d'y plonger dans des projets finaux aux côtés de ses camarades de classe et le personnel. Puis, quelques jours plus tard, est la Foire CS50, qui est vraiment destiné à être une opportunité pour vous les gars pour présenter votre travail et réalisations pour le semestre tout en côtoyant les uns avec les autres et se faire une idée de ce que chacun fait. Cela dit, un grand merci à Tommy et à Joseph, et nous vous verrai lundi.  [Applaudissements]