[Powered by Google Translate] [Woche 9, Fortsetzung] [David J. Malan - Harvard University] [Dies ist CS50. - CS50.TV] 

Dies ist CS50. Dies ist das Ende der Woche 9. Vielen Dank. Endlich. Woche 9. Ich habe es. Heute setzen wir unsere Gespräche über Web-Programmierung mit einem Auge in Richtung des endgültigen Projekts, nicht weil man etwas webbasierte tun zur endgültigen Projekten, sondern weil entweder für Abschlussarbeiten oder nach CS50 Dies ist sicherlich die Richtung, in die moderne Software geht. Und doch ist es nicht eigentlich eine einfache Sache. In der Tat ist eine der schwierigsten Dinge zu tun der Aspekt des Designs. 

Zum Beispiel durch Design meinen wir eigentlich immer die Benutzeroberfläche oder die User Experience rechts. Ich wage zu behaupten - und wir wissen aus einer aktuellen Problem set wenn ein paar von euch ausgestrahlt Ihren Beschwerden über einige Stück Software oder Hardware, ärgert Sie, ob auf dem Campus oder off - es gibt eine Menge von Websites gibt, gibt es eine Menge Hardware da draußen, diese Art von sucks. Aber die Realität ist, dass die Dinge, die einfaches, dennoch sind dennoch leistungsfähige ist eine sehr schwierige Aufgabe. So für heute Ich fragte Joseph und Tommy zu mir zu kommen hier so dass wir ein Gespräch haben, sowohl zur Gestaltung und welche Arten von Denkprozessen beginnen sollte gehen durch den Kopf wenn Sie Ihre fertigen Projekte entwerfen, Ihre Zukunft alles Gute. Und dann mit Tommy Hilfe wir auf einige der Details der Implementierung zu suchen. Wie kann man eine Vision auf Papier oder im Kopf dass man dann programmgesteuert ausführen durch einige der Technologien und Techniken, die wir haben gerade erst begonnen reden, nämlich JavaScript und sogar etwas neuere, nämlich AJAX, Asynchronous JavaScript. Das erlaubt Ihnen, umso mehr Dynamik einer Benutzeroberfläche erstellen durch Abrufen mehr und mehr Daten progressiv von einem Server. Also werden wir einige dieser Snippets sowie heute sehen. Nebenbei, wenn Sie bei der Konzentration in der Informatik interessiert oder Nebenfach Informatik, wissen, dass dies Freitagmittag in Maxwell Dworkin 221 wird es eine Pizza Veranstaltung wo man ein wenig mehr über die Informatik. Auf dem Weg aus der Tür heute werden Sie in der Lage sein abholen eine offizielle Anleitung zu CS in Harvard. Wir werden es auf den Mülleimer außerhalb legte auf Hüfthöhe so dass, wenn Sie möchten, dies zu packen und lernen, ein bisschen mehr über CS, das wird für dich da sein, wie es in Woche 0 war. Auch wenn Sie möchten uns für CS50 Mittag kommen an diesem Freitag um 1:15 Uhr, Head to cs50.net/lunch. Ohne weitere Umschweife, ich gebe Ihnen Lehre Kollegen Joseph Ong. Hallo. [Applaus] Thanks. Das erste Mal, dass ich über Design gelernt habe, war in einer Klasse hier genannt CS179. 

Der Professor an der Zeit, erzählte uns die Geschichte über einen anderen Professor Wer hatte zu einem Hotel gegangen und verwendet die Wasserhähne. Kann mir jemand sagen, was die 2 Knöpfe auf der linken und rechten zu tun? [Student] Heiß und kalt. >> Heiß und kalt. Gut. Was man normalerweise erwarten, nicht wahr? Dieser Professor nach der Verwendung der Armatur will eine Dusche zu nehmen, und er geht um diese zu verwenden. Er denkt, die linke und die rechte Seite sind für heiß und kalt, nicht wahr? Aber kann mir jemand sagen, was diese eigentlich? Alle Hände? [Unverständlich Student Response] >> Ein Vorschlag ist? [Unverständlich Student Response] >> Temperatur? So einer von ihnen regelt die Temperatur und die anderen Kontrollen? >> [Schüler] Wasserdruck. Wasserdruck. Gut. Dieser Professor geht in diesem und denken, sie sind die Steuerung heiß und kalt, dreht sich das Recht ein, die er denkt, ist für heiße, den ganzen Weg bis denn er will, um eine warme Dusche zu nehmen. Nun, diese nicht wirklich mithalten, so bekommt er diese nicht sehr lustige Erfahrung des Seins in einer kalten Dusche, und wir alle wissen, was das anfühlt. Dies ist ein Beispiel eines Konstruktionsfehler. Was ich damit meine, dass ist seine Erwartung aus dem Wasserhahn nicht übereinstimmen, was kam aus der Dusche, das ist Art unglücklich für ihn. Dies ist also ein Beispiel für ein Konstruktionsfehler, der im wirklichen Leben passiert. Aber wir sehen alle möglichen anderen Dinge zu beachten. Wir sind wahrscheinlich nicht die Fans der MBTA System. Dies ist eine U-Bahn-System tatsächlich in London, die sagt: "Diese Taste ist nicht in Gebrauch ist." Warum ist es noch dort? Warum brauchen wir das überhaupt? Als ich ein Kind war, wobei die technisch versierten ein im Haus, wenn der Computer abstürzen würde, würde meine Mutter zu mir kommen, zeigt mir diesen Bildschirm und fragen mich, was passiert ist. 

Auch weiß ich nicht, was das bedeutet. [Gelächter] Was? [Gelächter] Manchmal fühlen wir uns wie Software-Entwickler sind nur Trolling uns. Als Nutzer sind wir wie: "Was ist los? Jemand uns sagen." Das kommt alles auf eine Frage von Design. Design, wie wir sehen können, ist nicht nur um Ästhetik, es geht nicht darum, wie die Dinge aussehen. Wir sehen hier, dass diese kleine Pop-up hier sieht eigentlich recht nett. Es hat einen Schatten im Hintergrund, hat es border Radien geht. Es ist eine Art schön. Es ist nicht wirklich gut gestaltet, weil es nicht sehr benutzerfreundlich. Das kleine Pop-Up, das kommt nicht wirklich geben mir keine Informationen über das, was vor sich geht, ist es nicht sagen mir nichts als der Benutzer darüber, wie Sie von diesem Fehler zu beheben. Wir wollen über Dinge, dass Design nicht zu denken. Erstens ist es nicht die Ästhetik. Es ist auch nicht Füllung Ihre App mit Tonnen von unnötigen Funktionen. Wenn Sie ein Thai-Restaurant, die Sie wahrscheinlich nicht wollen, ein Zahnarzt zur gleichen Zeit sein. Und mit Facebook Fragen, nicht, dass viele Menschen verwendet es und es war nicht wirklich der Kern dessen, was sie bauten. Und so ist es schön zu denken nicht so sehr die Menge der Dinge, dass Sie auf Ihre Bewerbung, sondern die Qualität setzen und wie machst du diesen Benutzer Erfahrung besser durch die tatsächliche Verbesserung auf das, was Sie bereits haben. 

In einer Nussschale, sagt Design uns, was wir bauen. Zum Beispiel, wenn wir etwas zu bauen, die uns suchen die Dinge zu lassen, wie Google, zum Beispiel, sollten wir Dinge tun, in einer Weise, das muss der Anwender viele Klicks, um zu dem, was sie wollen, oder sollten wir tun es in einer Art und Weise, zum Beispiel mit Google Instant oder autocomplete So können wir unsere Ergebnisse zu erzielen schneller? Ingenieurwesen zu erzielen, wie Tommy Ihnen zeigen, tatsächlich gebaut wird. Es gibt viele Arten von Design. Zum Beispiel, wenn Sie etwas zu bauen, bereitstellen etwas in einem Land der Dritten Welt, wo es nicht viel Strom oder dass viel Technik, Sie haben zu entwerfen, was du baust in einer Weise, die leicht ermöglicht den Zugang zu den Menschen dort. Aber welche Art von anderen Design-Entscheidungen könnte es sein, oder könnte involviert sein so etwas? Yeah. Ich sehe eine Hand. [Unverständlich Student Response] >> Richtig. Genau. Accessibility ist eine Sache. Eine Menge Leute denken nicht: "Was ist meine Nutzer?" wie die Extreme der beiden Spektrum. Ich habe Benutzer, die Behinderungen haben könnte, dass ich nicht darüber nachzudenken, und ich denke nur über die Gestaltung für den normalen Benutzer. Das Internet ist für jedermann zugänglich heute und ich sollte für die Menschen als auch sein Design. Welche Arten von anderen Design-Entscheidungen können Sie machen? Ja. >> [Schüler] Cost. Kosten. Sehr gut. Eine andere Sache, wir Design-Entscheidungen auf möglicherweise stützen sind kostengünstig. Wenn wir ein Unternehmen sind, möchten Sie etwas, das nicht nicht viel kosten zu produzieren bauen kann aber zu einem besonders hohen Kosten verkaufen oder kann uns etwas Gewinn. 

Das sind alles verschiedene Arten von Design, aber wenn wir bauen etwas auf dem Internet oder wenn wir bauen etwas, das wahrscheinlich nicht kostet so viel aufzubauen jetzt wie Internet-Anwendungen - Sie müssen nicht viel Kapital hineinzuwerfen um etwas machen, das tatsächlich funktioniert - was wir sind mehr besorgt über die User Experience. Wir nennen diese User Centered Design. Im Grunde, was User Centered Design beinhaltet setzt euch in die Schuhe von den Benutzern. Wenn jemand Anzeichen für das, was ich baue, sie haben mir natürlich zu bestimmten Anwendung kommen mit einem Ziel vor Augen, mit einer Aufgabe, die sie abschließen möchten. Und Ihre Aufgabe ist es, nicht nur ihnen zu helfen, füllen diese Aufgabe sondern ihnen zu helfen, diese Aufgabe abzuschließen in einer Weise, die effizient, intuitiv ist, und, wie manche Menschen dort sagte zugänglich. Was bedeutet Effizienz bedeuten? Effizienz bedeutet, wie schnell muss mein Benutzer die Aufgabe angesichts meiner Schnittstelle vervollständigen. Dauert es viele Klicks für sie von einem Ort zum anderen zu bekommen? Ist es langweilig? Haben sie zu viele sich wiederholende Aufgaben? Wir wollen diesen Prozess so effizient wie möglich zu machen so dass sie nicht haben, um diese Art von Dingen zu tun. Wie für Anschaulichkeit, das heißt zum Beispiel, wenn ein Benutzer schaut meine Schnittstelle, ist es leicht für sie von Ort zu Ort zu bekommen? Ist es leicht für sie, um herauszufinden, was sie in mein Interface klicken müssen damit sie das Ziel zu erreichen oder eine Aufgabe, die sie erreichen wollen? 

Und schließlich, wie eine Person sagte drüben, ist die Zugänglichkeit sehr wichtig. [Male speaker] Es kommt, um die Zugänglichkeit für Dinge wie Vision, mag, wie ich eigentlich entwerfen etwas für jemanden, der blind ist? Oh. Für Menschen, die nicht sehen können, überhaupt, haben wir etwas namens Screenreadern. Was Sie tun sollten, ist, sollten Sie Ihre Website in einer Weise aufbauen dass zum Beispiel bestimmte Technologien wie wir es nennen - Es gibt viele Dinge jetzt. Ich denke, es gibt Screenreader genannt JAWS. Eine Menge von diesen Dingen verlassen sich auf das, was wir Bereich Regeln nennen um zu lesen an den Benutzer, was vorhanden ist, auf der Seite. Für diejenigen, die nicht sehen können, müssen Sie sicherstellen, dass diese Screenreader kann tatsächlich abholen den Inhalt auf der Seite und kann tatsächlich zeigen Sie Ihre Nutzer, Wenn Sie nicht sehen können, zumindest kann man noch verstehen, die Inhalte auf der Seite. Yeah. Okay. Genug geredet über gutes Design. Reden wir über schlechtes Design. Dies sind Dinge, die Sie nicht tun sollten. Kann mir jemand sagen über ihre Erfahrungen mit Craigslist und was sie denken, ist nicht so toll an diesem Design? Ja. >> [Schüler] Ich denke, es gibt zu viele Worte in einem Bereich. Zu viele Worte, nicht wahr? Völlig überwältigend. Sie kommen zu dieser Seite und du bist mit einem ganzen Bündel von Dingen hier begrüßt das könnte nicht einmal Ihnen wichtig sind. Zum Beispiel, Sie leben in einem Staat, der nicht mit diesem Buchstaben beginnt. Angenommen, Sie leben in Texas oder so etwas. 

Sie haben den ganzen Weg unten auf der Seite auf den Speicherort Sie sind auf sich zu blättern. Ich komme aus Boston, so lassen Sie mich in Massachusetts suchen. Wo ist Massachusetts? Oh, es ist hier genau richtig. Oh, es ist Boston. Okay. Lasst uns an der Boston suchen. [Gelächter] Ziemlich überwältigend, nicht wahr? Peinlich Dinge da drüben. [Gelächter] Sagen wir, ich bin auf der Suche irgendwo zu leben. Wie viele Menschen haben tatsächlich verwendet Craigslist? Tonnen von Ihnen. Es sind ziemlich schlechte Wege, dies zu betrachten, aber wir dies zu betrachten. Was ist der Unterschied zwischen img und pic? Kann mir jemand sagen? Es ist eigentlich kein Unterschied. Sie bedeuten genau dasselbe, aber sie haben unterschiedliche Bezeichnungen für sie aus irgendeinem Grund. Wenn ich auf hat Bild, passiert nichts auf der Seite. Ich habe eigentlich auf Suche klicken Sie erneut, dass etwas passiert. Was könnte eine bessere Design-Entscheidung, die dort geschehen könnte sein? Wenn ich auf diesen Filter Klick mich, ich wahrscheinlich wollen durch diese besondere Aktion filtern oder dass bestimmte Kategorie. So anstatt Suche erneut drücken, konnte ich nur automatisch die Filterung Art Google-Stil, wo sie es sofort. [Malan] Aber nicht bildet, wie wir gesehen haben, sie so weit zu physisch eingereicht werden indem Sie mindestens oder Klicken auf eine Schaltfläche eingeben? Als du sie gesehen habe, so weit, Sie haben tatsächlich klicken Sie auf Senden, um diese Dinge zu tun. 

Aber wie Tommy wird Sie in einer Sekunde zeigen, gibt es tatsächlich Möglichkeiten für Sie so dass, wenn Sie auf das Ding klicken Sie kann automatisch nennen wir eine AJAX-Anforderung und erhalten Daten zurück und filtern Sie Ihre Ergebnisse sofort. Es gibt Unmengen von Dingen, die falsch mit dieser Schnittstelle sind. [Malan] Können Sie für Cambridge suchen? Es ist etwas leicht anomale hier, wo Sie über Cambridge kümmern und doch Sie bekommen Westford, Spring Hill, West Newton und dergleichen. Wahrscheinlich nicht ideal. >> Wahrscheinlich nicht ideal. Wie könnte ich in der Lage sein, um die Erfahrung des Benutzers besser auf dieser bestimmten Seite? Ja. >> [Schüler] Anleitung. Okay. Anleitung in welcher Art von Sinn? [Schüler] Zum Beispiel, ein Ding zum ersten Mal Nutzer, die nicht einmal wissen, was Craigslist ist oder Sie nicht wissen, was Sie tun sollen. Right. So erklären, was Craigslist auf dieser Seite ist, ist wichtig. Wir können tatsächlich sagen, Nutzer, was diese Seite eigentlich für. Wenn ich nur zu Besuch bin dies, ich sehe eine ganze Reihe von Standorten. Ich weiß gar nicht, was sie bedeuten. Aber noch wichtiger ist, schaut an dieser Schnittstelle, Ich erinnere mich musste nach unten scrollen eine Tonne von Dingen, um eine bestimmte Gemeinschaft zu finden dass ich tatsächlich kümmerte zu diesem Thema. Was ist ein schneller Weg, ich tun könnte? Ja. [Schüler] unterteilen Sie diese in Ost-, West Regionen. >> Okay. Ich konnte sie in mehrere Kategorien, die mir helfen schneller bestimmen konnte unterteilen wie man zu diesem bestimmten Ort zu bekommen. [Schüler] Legen Sie eine Dropdown-Liste. >> Richtig. Okay. Ich könnte mit einem Drop-Down-Menü, weil wir einen festen Satz von Dingen haben und wir konnten sie in einem Drop-Down-Menü zeigen. Auf diese Weise dauert es nicht so viel Platz auf dem Bildschirm. Aber noch besser als das, was können wir tun? Ja. >> [Unverständlich Student Response] >> Kann man sagen, dass wieder? >> [Schüler] Suchfeld ein. Yeah, ein Suchfeld. Das ist toll. Was wir tatsächlich tun können, wenn wir zurück auf die Dias, Suchfeld suchen. Autocomplete. Sehr einfache Möglichkeit, durch die Ergebnisse, dass Sie wissen, suchen sich in einem Satz. Wenn ich tippen BO starten, zeigen, mir all die Ergebnisse, die BO in ihnen haben. Auf diese Weise kann ich sehr leicht finden insbesondere ein Ich möchte um zu gehen anstatt durch dieses wirklich große Liste blättern. 

Das sind alle Arten von wirklich niedrig hängenden Früchte, dass jemand, der Umsetzung Craigslist ist tatsächlich tun können, um die Erfahrung auf der Website viel besser für ihre bestimmten Benutzer zu machen. Okay. Genug geredet über schlechte Websites. Lassen Sie uns über Facebook zu reden. Wenn Facebook herauskam, und vor allem Facebook-Fotos, es gab viele andere Dienste an der Zeit, die genau das tun, kann die gleichen Dinge. Sie könnten Ihre Fotos in Alben organisieren. Was Sie tun können, ist könnte man sie in Gruppen zu organisieren. Man könnte sie nach Datum zu organisieren. Sie könnten alles tun, diese besonderen Dinge. Aber weiß jemand, was aus Facebook-Fotos an der Zeit war es freigegeben explodieren? Ja. >> [Student] Tags. >> Tags. Genau. Wir haben Milo hier, die unsere Hunde-Maskottchen mit dem CS50 Bandana ist. Sie können sehen, dass wir diese Tagging-Funktion in der Mitte haben. Und was hat Facebook Bilder so interessant aus Usability-Sicht ist, dass es tatsächlich Menschen erlaubt, über diese an ihre Freunde in ihren Fotos zu beteiligen. Für Facebook, da ihre Website ist insbesondere soziale und Es geht darum, diese Art der sozialen Atmosphäre. Das verbessert die Erfahrung von Fotos viel mehr weil sie tatsächlich beginnen könnte sagen: "Dies sind Verbindungen zwischen Menschen, und diese sind Fotos über Menschen, die Sie wirklich interessieren. " Ein Teil davon ist auch sort Narzissmus. Die Leute wollen in Fotos und dergleichen versehen werden. Während das ist nicht unbedingt eine gute menschliche Eigenschaft, zur gleichen Zeit ist es auf gutes Design Entscheidungen weil die Leute eigentlich egal über Dinge wie diese. Also das ist Facebook Fotos. 

Aber reden wir Facebook Allgemeinen. Ich bin sicher, viele Leute hier haben Meinungen über Facebook, beide gute Design-Entscheidungen und schlechte Design-Entscheidungen. Also lasst uns verhindern oder glücklich sein. Komm schon. Ich weiß, ihr alle Facebook benutzen. Jemand muss etwas Schlimmes zu sagen oder etwas Gutes zu sagen haben. Ja. [Schüler] In der News-Feed gibt es eine Menge Dinge, die ich nicht wirklich kümmern. Der Newsfeed zeigt zwar eine Menge Dinge, die Sie nicht über möglicherweise interessieren. Sie haben Freunde auf Facebook, die Sie nicht für 2 oder 3 Jahren erfüllt und Sie sehen ihre Nachrichten Ergebnisse Aufspringen in Ihrem News-Feed und Sie nicht wirklich darum kümmern. Facebook hat tatsächlich eine Anstrengung, um diese besser gemacht, und sie haben tatsächlich versucht, die Ergebnisse an der Spitze der News-Feed schieben wie der spät so dass Sie tatsächlich sehen die Dinge von Freunden, die für Sie oder Ihre enge Freunde sind. Sonst noch was? Ja. [Unverständlich Student Response] >> Kann man sagen, dass wieder? [Schüler] Die Anzeigen sind relativ unauffällig. >> In welchem ​​Sinn? [Unverständlich Studenten Antwort] Sie haben nicht Licht auf dem Bildschirm, wie Banner. Okay. Das ist gut. Wenn Sie das Internet erinnern aus den 90er Jahren - >> [Malan] Ich war dort. >> Er war da. [Gelächter] Vielleicht erinnern Sie sich blinkenden GIFs Hintergründen, sparkly Dinge, GeoCities Stil Art von Dingen. Das ist wirklich kein Beispiel für ein gutes Design weil es wirklich störend aus dem Inhalt. Die Yale Kunst-Website verwendet werden, um animierte GIFs als Hintergrund haben und man konnte nicht alles lesen auf der Seite, aber ich denke, wenn jemand tatsächlich mit ihnen gesprochen und jetzt ist es ein bisschen anders. [Malan] Es ist jetzt viel besser. >> Es ist jetzt viel besser, wie man sehen kann. >> [Malan] Oh yeah. Einfach toll, nur - Yeah. Okay. 

Ein Teil davon wird auch machen Ihre Seite möglicherweise sehr minimalistisch und sehr verständlich so Dinge auf der Seite Strömung in einer Weise, die sehr logisch ist und nicht in der Weise voneinander bekommen. Welche Arten von anderen Dinge sind gut über Facebook oder schlecht über Facebook? Lassen Sie uns einfach ein Design Gespräch hier. Oh. Wo? Yeah. [Schüler] Die neue Timeline-System ermöglicht es Ihnen, das Profil der Person über ihre Vergangenheit zu suchen. Ooh, Timeline. Timeline ist eine tolle Sache, weil es Ihnen stalk Ihre Freunde können zurück, wenn sie in der High School waren. Timeline ist gut, da Sie durch die Inhalte viel schneller zu filtern, es lässt Sie Dinge, die sonst genommen haben Sie eine wirklich lange Zeit, um herauszufinden nur Scrollen nach oben und unten, oben, oben, oben, oben, oben, wie wenn man in der Zeit zurück. Aber dann gibt es auch eine Art von Nachteil, dass in Bezug auf die User Experience. Was könnte das sein? Big Wort, das mit P-R beginnt. >> [Schüler] Datenschutz. >> Datenschutz, Recht? Datenschutz ist eine riesige User Experience Thema. Dies ist eines der Dinge, die ich am meisten hasse über Facebook jetzt. [Gelächter] [Malan] Wie mache ich jetzt. David wusste nicht, dass dies tatsächlich erst gestern passiert. So, jetzt weiß er, dass jedes Mal, wenn ich chatten ihm, dass ich weiß, dass er gewesen ist ignorierte mich. [Malan] Die peinliche Teil wurde ich tatsächlich ignorierte ihn, und ich wusste nicht, dass er wusste, dass ich ihn zu ignorieren. [Gelächter] Datenschutz ist ein riesiges Problem. Kann hier jemand mir sagen, was schlecht sein kann über Facebook Privatsphäre abgesehen von der Tatsache, dass sie Dinge tun, wie diese? Was ist es besonders schwer, mit Bezug auf Facebook Privatsphäre zu tun? Diese Art von ist ein führender Frage. Ja. >> [Schüler] Verstecken Sie Ihre Fotos von bestimmten Personen. Right. Genau, um Ihre Fotos von bestimmten Personen verbergen. Sie haben diese kleinen, kleinen Knopf in der rechten oberen, die Sie aktivieren die Privatsphäre eines Fotos können. Ihre Privatsphäre-Optionen sind sehr zwischen verschiedenen Arten von Menüs variiert. 

Sie haben viel besser über sie bekommen vor kurzem, aber es früher der Fall sein, dass, wenn Sie wollten Ihre Freunde aus sehen Fotos zu vermeiden, Sie müssten durch eine sehr komplizierte 5-Stufen-Prozess zu sein wie gehen, Lassen Sie mich auf diesen Link klicken, jetzt lassen Sie mich noch einmal auf, lassen Sie mich noch einmal auf, Lassen Sie mich festlegen, welche Menschen nicht sehen können meine Fotos. Das ist nicht besonders gut auf Facebook ist ein Teil weil so viel über User Experience ist tatsächlich geben ihnen die Freiheit zu kontrollieren, was die Leute sehen können. Wir nennen diesen Benutzer Kontrolle und Freiheit. Wenn Sie nicht lassen sind Ihre Benutzer tun, dass in einer Weise, die effizient und intuitiv zu bedienen ist, dann ist dein User Experience ist nicht wirklich toll.  Würde euch gerne etwas über Facebook sagen? Wie kann ich das abstellen? [Ong] Sie können nicht deaktiviert werden, und das ist ein riesiges Usability Fehler auf dem Teil der Facebook. Diese Funktion - ich sah tatsächlich in sie gestern - es ist entweder, dass man es nicht oder es ist irgendwo sehr, sehr tief begraben in den Aussparungen der Facebook weil ich kann nicht herausfinden, wie diese Funktionalität überhaupt deaktivieren. [Malan] Aber manchmal sind diese Entscheidungen nicht offensichtlich weil du Jungs haben uns eine Menge nützlicher Feedback zu verschiedenen CS50-Anwendungen und Websites, dass der Kurs verwendet. Wir haben nicht alle diese Wünsche und Anregungen umgesetzt. 

Teil davon ist für das Erhalten so viele Anfragen, dass es eine Funktion der Zeit ist, aber manchmal haben wir einfach eine bewusste Entscheidung, wie, "Danke für die Anregung, aber wir nicht einverstanden sind." So, wie Sie tatsächlich entscheiden, was Sie tun sollten, wenn Sie denken Ihre Benutzer sollten Sie etwas tun auch wenn Sie nicht unbedingt? Es ist eine feine Balance zwischen tatsächlich zu hören, was Ihre Kunden sagen und tatsächlich mit einer Art von Linie, wo Sie sagen, "Wir gehen nicht zu tun, was diese Benutzer sagen." Und vor allem, ich glaube, es war ein Zitat von Henry Ford, der diese fasst ziemlich gut. "Wenn ich die Menschen gefragt hätte, was sie wollten, hätten sie gesagt, sie wollten schnellere Pferde." Kann mir jemand von necken auseinander, was das Zitat wirklich bedeutet sortieren? Es ist nicht nur, dass die Nutzer wissen, was sie wollen, aber es ist mehr, dass - [Schüler] Sie wissen nicht, was möglich ist. Zum Teil sind sie nicht wissen, was möglich ist. Tease, dass neben ein bisschen mehr. Was meinst du damit? [Unverständlich Studenten Antwort] Das ist gut. Was ich denke, dass wir versuchen, hier zu sagen ist, dass die Menschen wissen, was sie wollen. Sie wollen schnellere Pferde. Was sie wirklich wollen, ist die Fähigkeit, sich schneller zu bewegen, aber sie wissen nicht wirklich, das Medium, mit dem das zu erreichen. Wenn Sie kommen, um Ihre Benutzer und Ihre Benutzer Ihnen etwas sagen und sie sagen: "Wir wollen diese Funktionen und diese Funktionen und diese Funktionen" Sie wollen nicht unbedingt zu denken: "Lass mich gehen Sie vor "Und das umzusetzen, was sie explizit sagen," aber was Sie wollen zu denken ist, "Welche Art von Ideen kann ich aus, dass zu bekommen?" Was wollen sie eigentlich? 

Und von dort, was Sie tun können, ist zu entwerfen etwas, das diese Anforderungen erfüllt aber nicht notwendigerweise in der Weise, dass der Benutzer es befriedigt werden erwartet. So etwas wie letzten Projekte, in sehr real, was ist eine nützliche Heuristik, wenn es darum geht, etwas Besseres kommt, vor allem, wenn der Designer hat diese Arroganz über ihn wobei Sie Art wissen, was das Beste ist, könnten Sie Eingaben von Benutzern zu nehmen, aber woher wissen Sie eigentlich darum, dass das Feedback gehen? In letzten Projekte ganz konkret, produziert, was optimale Ergebnisse hier? Was erzeugt optimale Ergebnisse - und ich werde über diese in einem zweiten zu gehen - Dieses Verfahren ist für die Entwicklung und Erprobung und dann durchlaufen. Was ich damit meine Prüfung ist in der Regel, wenn Sie etwas entwerfen Sie denken, es ist ziemlich gut, wie: "Ich bin so ein großer Designer. Jeder wird es lieben." Und dann legt man es da draußen und die Leute nicht wirklich, wie es aus irgendeinem Grund. Was Sie tun müssen, ist, müssen Sie die Teile der Dinge, die Menschen tun, wie nehmen und Umbau der Dinge, die Menschen nicht mögen. Es klingt wie eine sehr offensichtliche Prozess, aber dieser Prozess ständig Iteration auf, was Sie bereits errichtet ist ein Prozess, der Ihnen hilft nicht nur verfeinern, Ihr eigenes Design Fähigkeiten, sondern hilft Ihnen auch zu verfeinern das Design so dass die Menschen tatsächlich zu schätzen Ihr Produkt sogar mehr als zuvor. 

Ich gehe über mehr konkrete Beispiele, was man eigentlich tun. Als eine Art letzte Beispiel für ein Produkt, lasst uns auf KAYAK aussehen. KAYAK als es herauskam war sehr, sehr beliebt. Kann mir jemand raten, warum? Was sind die möglichen Dinge, die Sie gerne über diese, wenn Sie es benutzt haben oder was sind die möglichen Dinge, die Sie nicht mögen? Ja. >> [Unverständlich Student Response] >> Okay. Das ist ein Teil davon ist die Vermietung der Benutzer eine Abfrage, die mehr expansive ist als eine sehr restriktive ein wie: "Du musst deine Startdatum holen "Und Sie müssen Ihre Enddatum zu wählen." In der Tat, es lässt Sie flexibel zu sein, und es gibt Ihnen alle der Flüge in diesem Bereich. Sonst noch was? [Schüler] Dazu gehören die Gebühren im Preis enthalten. Sie verstehen sich die Gebühren im Preis enthalten. Die Steuern und die Dinge tatsächlich geradeaus in diesem Preis in der oberen linken so dass Sie nicht in das Denken getäuscht, dass Sie tatsächlich zahlen für einen $ 240 Flüge wenn es wirklich 330 $. Sonst noch was? Ja. [Unverständlich Studenten Antwort] Ich bin mir nicht sicher, ob sie lassen Sie eigentlich tun. Ich könnte falsch sein. Das könnte eine interessante Sache sein, wenn man mehr Gewicht auf besondere Filter setzen wollen so dass sie Ergebnisse in Bezug auf diesen Filter an die Spitze schieben. Aber kann mir jemand sagen, was ist so besonders an diesem linken Seite? Wie haben Sie traditionell schauen einen Flug auf einer Internet-Dienst, bevor das? 

Ja. >> [Unverständlich Student Response] >> Kann man sagen, dass - [Schüler] Jede Fluggesellschaft. >> Ja. Jede Fluggesellschaft hat ihre eigene Website. Dies festigt Dinge. Und? [Schüler] Du weißt genau, wann du gehst. Du weißt genau, was Zeit du gehst, sondern an den Filtern insbesondere verwandt. Lassen Sie mich hochzuziehen KAYAK. Oh Gott, Pop-ups. Bad User Experience. Was passiert, wenn ich diesen Schieberegler zu bewegen? [Schüler] Automatische Updates. >> [Ong] Automatische Updates. Das ist etwas, was sehr wichtig ist. Bevor dies, wenn Sie schauen einen Flug wollten, Sie mussten in Ihrer Eingabe Lage, Ihre Ausgabe Lage, drücken Sie Suchen setzen, es wäre zu verarbeiten, dass und zeigen Sie Ihre Ergebnisse. Wenn Sie Ihre Abfrage ändern wollte, müsste man die Taste zweimal zurück, Geben Sie in einer neuen Abfrage von Grund auf neu, und dann tun Sie es immer und immer wieder. Die nette Sache über so etwas wie dieses ist es verwendet eine sehr [unverständlich], was in der Mitte. Wenn Sie etwas tun, schießt es aus eine Anfrage und es gibt Sie alle Ergebnisse sofort. Diese Art der unmittelbare Rückmeldung ist etwas, was KAYAK wild populär gemacht weil es einfach für mich nur zu ändern meine Abfrage und herauszufinden, die Dinge, die um einen bestimmten Bereich liegen ohne hin und her gehen, vor und zurück hin und her. So sind alle möglichen Dinge, die Sie wollen, wann Sie die Gestaltung Ihrer Website denken. Wie kann ich es sehr effizient für meine Nutzer durchlaufen, um was auch immer sie arbeiten und zu ihrem Endziel so schnell wie möglich zu bekommen? [Malan] Und Joseph Punkt früher über Benutzer nicht unbedingt wissen, was sie wollen, auf das, was euch jetzt über HTML und Sie haben Checkboxen, Radio-Buttons, Auswahlmenüs, Eingabefelder und dergleichen, Wie würden Sie umsetzen den Begriff der Kommissionierung eine Startzeit für einen Flug? 

Welche von diesen verschiedenen UI-Mechanismen würden Sie nutzen? Wenn Sie nur wissen, wie viel HTML, bevor gelehrt wurde und Sie wissen, sind die Eingänge Radio-Buttons, Checkboxen, Dropdown-Menüs, und Eingabefeld was wäre Ihre natürliche Wahl gewesen für die Kommissionierung Terminen gewesen? [Schüler] Input. >> Input. Oder vielleicht sogar ein Drop-Down mit allen Terminen, nicht wahr? So mit komplexeren UI-Mechanismen, wie dies auf der linken Seite, die Sie implementieren können, Sie können diesen Prozess viel intuitiver mit einem Schieberegler denn die Zeit ist kontinuierlich, und die Menschen in der Regel nicht daran zu denken in Bezug auf diskrete Stücke. Gut. Letzte Sache. Ten Usability-Heuristiken. All die Dinge, die wir darüber gesprochen wahrscheinlich unter eine dieser Kategorien fallen. Wenn man auf diesen Link, die die Websites online gepostet werden, Sie tatsächlich in der Lage sein, wie Sie das Design Ihrer Website, sollten Sie diese Heuristiken im Hinterkopf und diese Faustregeln. Für Ihre Projekte, was ich schlage vor, Sie tun, um zu entwerfen Ihre Anwendung besser ist Papier-Prototyping zuerst tun. Wenn Sie über Ihre Anwendung zu denken, sehr schnell skizzieren, was Sie es aussehen soll und sicherzustellen, dass alle Kästen werden in einer Weise, die sehr intuitive dem Benutzer zu bedienen ist angeordnet und sogar zeigen diese Papier-Prototypen an Ihre Freunde und starten Fokusgruppen. Nehmen Sie einfach 2 oder 3 Leute zusammen und bitten Sie sie, sich nur auf diesen Papier-Prototypen tippen, und zeigen ihnen neue Screens zu sehen, ob sie verstehen wirklich, was los ist. 

Was möchten Sie tun müssen, ist ihnen eine Aufgabe, zu motivieren, diese Aufgabe, und nur ihnen die App und lassen Sie es verwenden. Geben Sie nicht auf ihnen Anweisungen darüber hinaus. Sie wollen tatsächlich ließ sie mit Ihrer Anwendung interagieren in einer Weise, die Sie sehen können wie sie es verwenden, wenn Sie nicht neben ihnen. Und das ist sehr wichtig. Das wird Ihnen viele Erkenntnisse wie die Menschen die Fortbewegung bestimmte Dinge sind in einer Weise, dass ich nicht die Absicht hatte sie? Sind sie mit bestimmten UI-Mechanismen auf dem Bildschirm in einer Weise, ist eine Art hacky? Ich habe nicht die Absicht, für sie zu tun, um es auf diese Weise. Und wenn du damit fertig, was willst du tun? Ihr Design Felsen, nicht wahr? Was Sie tun möchten, ist Sie zu entwickeln und dann diesen Prozess immer wieder. So zeigen Sie sie an Freunde, wenn Sie es entwickelt haben, testen, entwickeln, zu testen, zu entwickeln, zu testen, durchlaufen, weiter und weiter und weiter. Design ist ein sehr iterativen Prozess in diesem Sinne. Sie haben tatsächlich etwas zu bauen und dann erkennen, Dinge über sie dass Sie nicht vor zu realisieren und gehen Sie zurück und verbessern daraus. Jetzt, da für die Entwicklung Teil ist das, was Tommy wird Ihnen zeigen, nach der Pause und wie Sie vielleicht in der Lage, so etwas wie autocomplete umsetzen in einer Weise, die relativ einfach ist. [Malan] Als Tommy stellt hier eine Frage dann. Viele der frühesten Webseiten - und wenn Joseph sagte 1990er Jahre Stil Website, war es Implementierungen, in denen, wenn man wollte, um eine Startzeit wählen und eine Endzeit, ehrlich gesagt, wieder in den Tag und sogar auf einigen Websites heute so, wie Sie dies tun, ist holen Sie eine Stunde aus einer Drop-down, Sie wählen Minute aus einem Drop-Down-, vielleicht Sie AM, PM, Und dann musst du, dass 3 weitere Male. Und so mit 6 Klicks und vielleicht einigen Blättern Ihre Benutzer können tatsächlich bieten irgendeine Art von Datum und / oder Uhrzeit-Bereich in diesem Sinne. 

Also auf jeden Fall suboptimal und doch bisher haben wir keine Ausdrucksmöglichkeiten gesehen in einer der Sprachen haben wir betrachtet, etwas sexier zu tun wie diese Schieber Startzeit und die Endzeit. Aber wenn Sie denken zurück zur Woche 0, wenn wir über Scratch gesprochen, auch dort gab es nicht Widgets, habe gerade einige Dinge. Du bist wirklich gerade diese Grundlagen wie Schleifen und Bedingungen und dergleichen. So Art nur denken sehr abstrakt jetzt unabhängig von den Angaben von HTML, , was wirklich los ist mit so etwas wie dieses Start-und Endzeit Schieberegler? Wenn ich meine Maus und ich auf dem kleinen Karotten Symbol klicken Sie auf der linken Seite und beginnen Sie, programmatisch, was wollen Sie in der Lage sein zu implementieren um das zu erreichen? Welche Fragen, was Boolean Ausdrücke, die Sie wollen in der Lage sein, zu fragen? Was ist wirklich los? Sammy? [Schüler] Wo ist die Position des Cursors? >> Gut. Wo ist die Position des Cursors? Das war etwas, was wir brauchten, um auszudrücken zurück in Scratch, ob es vor Ort oder auch die Farbe oder dergleichen basieren. Man könnte noch so kurz an am Montag gab es all diese Dinge genannt Veranstaltungen in der Welt des Web, und so gibt es Dinge wie onclick und onkeypress und onkeyup und onmouseover und onmouseout. So klar, dass auch diese Dinge, die wir schon immer unter der Web erteilt mit Seiten wie Facebook und Google Mail, auch wenn Sie keine Ahnung haben wie Sie würde möglicherweise zu implementieren, denn es gibt nichts, auch, wie es in der Vorlesung oder Problem Set 7 erkennen, dass mit diesen exakt die gleichen Grundlagen, mit HTTP-Parametern und GET und POST, mit den grundlegenden HTML-Eingänge, die wir betrachtet bisher und in einem Augenblick mit den programmatischen Mechanismen, die Tommys vor der Einführung können Sie damit beginnen, sich selbst auszudrücken wie du gerade in Woche 0 hat durch sehr intuitiv per Drag & Drop. 

Also mit dieser sagte Tommy MacWilliam und einige neue Puzzleteile für uns Web. Gut. Mein Name ist Tommy und ich werde über JavaScript zu sprechen. Just a Disclaimer: Ich bin der Meinung, dass JavaScript die beste Programmiersprache ist in der ganzen ganzen Welt. Es gibt viele Menschen, die mit mir nicht einverstanden, aber es ist einfach unglaublich. Wenn Sie zurück zu C, wenn Sie C für eine andere Klasse oder einigen anderen Sprachen zu schreiben, es ist nur wirklich frustrierend in all den Low-Level-Details, die Sie haben zu verzetteln in. Also, wenn Sie jemals das Gefühl traurig darüber, wie ärgerlich C zu schreiben, gehen Sie einfach zurück, schreiben etwas JavaScript. Es ist Nirvana. Sie fühlen sich viel besser über Ihren schlechten Tag. Ein großer Teil der Magie von JavaScript kommt von seiner Fähigkeit, Dinge zu manipulieren das bereits auf der Seite. Wenn wir unsere PHP Script geschrieben hat, wurden sie auf dem Server ausgeführt, und schließlich, dass PHP Skript wahrscheinlich ausgeben einige HTML. Das HTML wurde an den Client gesendet, und dann das war es. Wenn PHP wollte eine Schaltfläche zu einer Seite hinzuzufügen, zum Beispiel, kann es nicht wirklich tun. Es müsste eine ganz neue HTML-Datei zu machen und senden, dass an den Browser. Mit JavaScript wir wissen, dass wir die Dinge zu aktualisieren, während sie bereits auf der Seite sind, und aus diesem Grund können wir viel mehr eine sofortige Rückmeldung, was wirklich zur Verbesserung der Benutzerfreundlichkeit auf unserer Website. Nur eine kurze Zusammenfassung der JavaScript-Selektoren. Wir wissen, dass, wenn wir eine HTML-Seite downloaden, das wird sich in der DOM dargestellt werden. 

Der DOM erinnere, ist gerade diese großen Baum, wo die Elemente in diesem großen Hierarchie verbunden sind. Wenn wir mit Datenbanken gearbeitet pset 7, eines der ersten Dinge, die wir brauchten, um Know-how zu tun war die Datenbank abfragen. Wir haben diese großen Benutzer-Tabelle, und manchmal wollen wir nur sagen, "Ich will nur einige dieser Nutzer, die einige Bedingungen entsprechen." Ebenso, wenn wir die DOM haben wir müssen irgendwie abzufragen es. Wir brauchen eine Art zu sagen: "Ich will alle Tasten, die wie folgt aussehen "Oder alle Bilder auf der Seite." Und diese Selektoren erlauben uns, das zu tun. Also nur eine kurze Zusammenfassung. Das erste hier, diese # unterbreiten, was ist das los zu wählen? Erinnert sich noch jemand? [Unverständlich Student Response] >> Ja, genau. Das wird ein Element auf der Seite, die ID vorlegen muss wählen. Und damit Hash-Tag, sagt dieser Selektor wird mit IDs arbeiten. Wie wäre es mit der zweiten, dies. Zentriert wird, was das auswählen? Yeah. >> [Student] Klasse. >> Genau. Dies wird nun durch Klasse auszuwählen. Der Unterschied zwischen ID und Klasse hier in der Regel die ID muss eindeutig sein in welchem ​​Raum Sie suchen vorbei. Also, wenn Sie waren auf der Suche über eine ganze Web-Seite, Sie sollten wirklich nur 1 Element mit dem gewissen ID, so dass in diesem Fall einreichen. Mit Klassen, auf der anderen Seite, kann es mehr als ein Element auf der gleichen Seite mit der gleichen Klasse. Dies könnte zu sagen Ich will alles, was auf der Seite zentriert ist wählen Sie nützliche anstatt nur 1 Sache. 

Und schließlich ist das letzte hier ein wenig komplizierter, aber was soll das noch aus dem DOM wählen? [Unverständlich Student Response] >> Was ist das? [Schüler] Alles, was ein Tag ist. >> Wir haben 2 Teile hier. Der zweite Teil wird sagen, ich möchte diese Tags mit einem Tag der Eingang zu wählen, so jedes Element, das ein Input-Tag ist. Aber ich will nicht wählen Sie einfach alle Eingänge weil etwas wie ein Submit-Button könnte ein eingegeben werden und so etwas wie ein Textfeld könnte ein Eingang sein. Also mit diesen eckigen Klammern ich sage ich will nur diejenigen Elemente auswählen , dass sind vom Typ Text. Irgendwo in meinem HTML tag Ich habe ein Attribut namens Typ, und der Wert dieses Attributs muss Text sein. So wie über diesem ersten Teil hier? Das erste Wort dieses Selektors Form ist dann ein Leerzeichen und dann wird dieser Eingang Teil haben. Was bedeutet, dass zu tun, indem Sie das Formular vor ihr? Dies wird im Wesentlichen beschränken unsere Abfrage. Es könnte sein, dass wir einige Eingaben auf der Seite haben werden die nicht Nachfahren eines Formulars. Was wird dies tun, ist dies sagen ich will nur die Eingangs-Tags, die irgendwo über ihnen Einige übergeordnete Element eines Formulars. Und so auf diese Weise können wir diese weitere hierarchische Abfragen so dass wir nicht einfach alles passend eine bestimmte Wähler wählen. Wir können Art von Grenze des Geltungsbereichs dieser Abfrage auf etwas anderes. So, jetzt wissen wir, wie die Elemente auf der Seite auszuwählen, reden wir ein bisschen über AJAX. AJAX ist ein noch sehr trendy Abkürzung für Asynchronous JavaScript and XML steht. Es passiert einfach so, dass XML nur einige Weg, um Daten darzustellen. 

Diese Art der verlorenen Popularität vor kurzem, so das X in AJAX wird nicht die ganze Zeit benutzt. Grundsätzlich ist das, was AJAX uns erlaubt, zu tun zu machen HTTP-Requests aus dem Kontext JavaScript. Wenn wir in unserem Web-Browser sind und wir um die Seiten navigieren und wir auf einen Link klicken, was unsere Browser tun wird, ist eine HTTP-Anfrage an, was Link klicken wir. Aber das ist nicht immer ideal, denn wenn das der Fall ist, dann als David sagte, wir haben immer um Benutzer auf eine Schaltfläche Senden oder klicken Sie auf einen Link , damit nichts passieren, das wird eine HTTP-Anforderung zu beteiligen. Also mit AJAX können wir diese Anfragen im Namen von JavaScript machen. Das bedeutet, wenn der Benutzer mit der Seite interagiert oder irgendetwas passiert, können wir tatsächlich eine programmatische Anfrage an eine andere PHP-Datei auf unserer Website oder irgendetwas anderes und Abrufen der Daten, dass die Datei ausspuckt. Werfen wir einen Blick auf ein Beispiel von AJAX. Dies ist unser CS50 Finance Seite mit dem hoffentlich einige von uns vertraut sind. Wenn wir die HTML der Seite betrachten, sehen wir hier, dass ich noch ein paar Dinge, von denen ich angesichts dieses Formular habe eine ID. Ich habe gesagt, id = "form-quote". Ich habe das nur getan, weil es sich um diesen ein wenig leichter zu wählen Sie aus dem DOM da kann ich nur machen eine sehr einfache Abfrage. Was will ich hier zu tun ist, möchte ich ein Problem mit CS50 Finanzen zu beheben. Also, wenn wir finance.cs50.net gehen, jedes Mal, Ich möchte ein Angebot zu erhalten, muss ich dieses Angebot einholen Schaltfläche klicken, und dass Angebot einholen Taste, dann bringt mich zu einem anderen ganze Seite. Und wenn ich ein anderes Zitat will, muss ich die Zurück-Taste drücken und dann tippe ich es, Ich bekomme ein Angebot, und ich traf die Schaltfläche Zurück. Das ist wirklich nicht der beste Nutzer-Erfahrung. Wer möchte schon wirklich die Website verwenden, wenn es so langsam ist, um Aktienkurse zu bekommen? Also, was wollen wir mit AJAX zu tun ist, entfernen Sie diesen Schritt zu gehen, einer separaten Seite um die Ergebnisse anzuzeigen. 

Was wir wirklich nur fragen, ist, dass wirklich kleinen Preis, und das ist nur eine wirklich kleine Menge von Daten. So gibt es keine Notwendigkeit für mich noch eine ganze HTML-Seite zu gehen, Download eine ganz neue Charge von HTML, vielleicht einige herunterladen, weitere Bilder, einige andere CSS-Dateien nur für mich zu beantworten, dass die ganz einfache Frage wie viel kostet dieser Bestand Kosten. Mit AJAX können wir diese sehr viel einfacher. Wir sehen hier unten, dass ich in einer JavaScript-Datei namens quote.js Verlinkung nicht erkennbar. Lasst uns tatsächlich öffnen Sie diese Datei. Nicht da. Alle meine JavaScript-Dateien gehen, um in HTML befinden so dass der Web-Browser zugreifen kann. Dann haben wir ein separates Verzeichnis hier für JavaScript und jetzt ist hier quote.js. An der Spitze dieser Datei das sagt hier, dass ich für die gesamte Seite warten geladen werden sollen bevor ich etwas zu tun versuchen. Warum ist das notwendig? Es stellt sich heraus, dass das nächste, was ich hier tun werde Anfang der Suche nach einem Element ist das entspricht etwas Selektor. Wenn dies JavaScript wird immer ausgeführt, bevor dieses Element auf der Seite geladen wird, dann alles, was ich versuche zu tun, ist nicht zur Arbeit gehen weil ich werde versuchen, etwas, das noch nicht da ist zu wählen. So diese Linie bis oben sagt, ich will, dass du warten, bis alles geladen ist so dass wir garantieren, dass alle Elemente, die ich suche, sind eigentlich auf der Seite. Das Dollar-Zeichen bedeutet hier verwende ich die Bibliothek namens jQuery. Das jQuery-Bibliothek ermöglicht es uns, diese Selektoren, dass wir gerade gesehen verwenden. Indem man sagt, $ dann übergibt als Argument dieses # form-quote, Ich bin jetzt die Auswahl, dass Form, dass wir gerade einen Blick auf. Jetzt habe ich eine Darstellung dieser Form im Speicher irgendwie. 

Auf dieses Objekt nun diese Darstellung der Form, Ich bin jetzt mit einer Funktion namens weiter. Was diese Funktion tut, ist, es wird ein Event-Handler anhängen. Die Veranstaltung, dass wir gehen, um zu hören ist das Submit-Ereignis. So, wenn der Benutzer auf diese Schaltfläche klickt oder Pressen Submit Geben, Dieses Ereignis wird ausgelöst. Durch Einhaken in diese kann ich nun das Standardverhalten des Formulars. Ohne diese JavaScript, wäre das Formular abschicken unabhängig PHP-Datei verwendeten wir in diesem action-Attribut. Aber stattdessen bin ich jetzt sagen, warte, warte, warte, ich glaube nicht, dass du wirklich tun. Ich möchte dies geschehen, bevor Sie gehen und versuchen, bis zu einem gewissen PHP-Datei einzureichen. Nun, was kann ich tun? An dieser Stelle möchte ich AJAX irgendwie nutzen, in welcher der Preis der Aktie ist zu laden. Das erste, was ich wissen muss, ist, welche Lager der Benutzer aufzublicken. Um dies zu tun, dass ich werde einen anderen Selektor verwenden. Dies ist die dritte Selektor wir vor aussah. Dieser sagt, dass ich zum Auftakt dieses Formular Element mit einer ID von Form-quote wollen. Dann irgendwo in dieser Form muss es eine Eingangselement sein das hat einen Namen des Symbols. Wenn wir wieder in unserem HTML aussehen, sahen wir, dass wir einen Eingang hatte [name = Symbol]. Das bedeutet, dass dies wird dieses Textfeld auszuwählen, dass der Benutzer in der Eingabe. Das ist schön. Wir haben das Textfeld. Jetzt brauchen wir nur zu wissen, was drin ist es. Um dies zu tun, dass wir diese Methode hier nennen, dieses. Val, und dies sagt, ich weiß, was Textfeld, das Sie haben. Ich will, dass du mir sagen, was es dem Benutzer in das Textfeld eingegeben haben. Jetzt haben wir einen String namens Symbol, das gleich, was der Benutzer eingegeben ist in. Das ist schön. Wir können diese Zeichenfolge nun auf unsere Anfrage zu machen. Dies ist eine neue Funktion hier, diese $, außer man nicht mehr gehen zu Auswahl von Elementen, wir gehen zu rufen eine andere Funktion, die uns von jQuery ist vorgesehen. Das AJAX-Funktion ist, was eigentlich vor sich geht, diese HTTP-Anfrage zu machen. Also müssen wir sagen, dass es ein paar Dinge. Das erste, was wir haben, um diese Funktion zu sagen ist, wo ich die Anfrage hin wollen. Irgendwo in meinem Projekt habe ich diese Datei in der HTML-Verzeichnis namens quote.php. Ich kann diese Datei zugreifen, sahen wir, wie diese, wenn ich localhost / quote.php gehen. 

Ich will meine JavaScript, um eine Anfrage zu dieser Seite zu machen. Welche Art von Anfrage jetzt? Wir sahen vor, dass die Form hat, dass method = "post"-Attribut, und das bedeutet, es wird eine POST-Anfrage zu machen, so ist es gar nichts in der URL setzen, anstatt einer GET-Anfrage, Was wäre gerade gefeuert, wenn wir die Seite nur mit dem Web-Browser zugegriffen werden, zum Beispiel. Jetzt haben wir gesagt, ich möchte eine HTTP POST Anfrage stellen zu einer Seite an quote.php befindet. Wenn wir das Formular abschicken, erinnern konnten wir die Eingangs-Elemente innerhalb dieses Formular zugreifen mit diesem $ _POST Variable. Bisher in der Geschichte haben wir eigentlich nicht zusammen alle Daten gesendet haben. Wir haben gerade gesagt, wir machen eine AJAX-Anforderung und hier ist die Art der Anfrage wir machen. Jetzt müssen wir tatsächlich senden einige Daten auf der Seite. Um dies zu tun, dass wir diese Eigenschaft namens Daten nutzen. Der Wert dieser Eigenschaft ist eigentlich ein assoziatives Array. Der Grund dafür ist, es erlaubt uns, mehr als nur ein Teil der Daten zu senden. Deshalb haben wir diese geschweiften Klammern hier drinnen dieser anderen geschweiften Klammern verschachtelt. Die Tasten in diesen assoziativen Arrays gehen, um dasselbe sein wie die Namen schreibt in unserem Formular-Elemente. Das bedeutet, dass, wenn ich auf einem Schlüssel-Symbol zu senden, dh meine PHP-Seite kann diese Daten mit $ _POST [Symbol] zugreifen genau wie wir vor, wenn wir ein Formular tat. Und nun die eigentlichen Daten, die wir senden wollen wird der Wert innerhalb dieses assoziativen Arrays sein. 

Wir gespeicherten diesen Text in eine Variable namens Symbol, und so schicken wir zusammen nun einen Schlüssel-Symbol und ein Wert dessen, was der Benutzer eingegeben in. Jetzt haben wir diese HTTP-Anforderung, unsere PHP-Datei ausgeführt wurde, und es geht um einige Daten zurück zu senden jetzt an den Client, der gerade machte diese Anfrage. Jetzt müssen wir auf alles, was der Server sagte uns reagieren. Um dies zu tun, dass wir diese letzte Eigenschaft hier als Erfolg zu haben. Der Wert dieser Erfolg Schlüssel tatsächlich zu eine Funktion sein, und dies ist einer der wirklich cool, was man mit JavaScript tun können. Nicht nur können Sie ints oder Arrays als Wert innerhalb eines assoziativen Arrays, Wir können auch die Funktion. So sagen, Erfolg, dies ist mein Schlüssel. Ein Doppelpunkt sagt hier kommt der Wert, und nun der Wert dieser ist eigentlich eine Funktion. So brauchen wir nicht zu geben dieser Funktion einen Namen per se. Wir können nur sagen, das wird eine Funktion sein. Es wird ein Argument nehmen. Das Argument dieser Funktion sein wird was der Server schickte uns zurück von der Anfrage. Genau wie bei unserem Browser eine Anforderung, sendet der Server etwas zurück und der Browser zeigt es, im Zusammenhang mit der AJAX wir nur einen Antrag, schickte der Server etwas zurück, und jetzt haben wir, dass als Zeichenfolge dargestellt. Mit dieser Zeichenfolge Ich möchte nur, dass auf der Seite anzuzeigen. Um dies zu tun, dass ich gehe, um einen letzten Wähler haben. Ich möchte das Element mit der ID Preis auszuwählen. Dies ist nur ein leeres div, dass ich auf der Seite erstellt, und ich möchte den Inhalt des div zu sein, was der Server uns zurück geschickt gesetzt. Ich habe tatsächlich geändert quote.php ein bisschen. 

Anstatt fordern render und Rendering einige Seiten, quote.php jetzt einfach gehen zum Ausdrucken der Wert der Aktie als String zurück. Also, wenn Sie tatsächlich besuchen Sie die Seite, würden Sie sehen nur, dass die kleinen String dessen, was der Aktienkurs. Eine letzte Sache, die wir hier tun müssen, ist nur sicherstellen, dass diese Funktion false zurück. Was dies sagt, ist, dass wenn ich im Inneren eines Event-Handlers und dass Event-Handler kehrt anstelle der Rückgabe true false, das bedeutet, dass ich will nicht das ursprüngliche Ereignis zu schießen. In diesem Fall, wenn wir nicht alle JavaScript und wir legte eine Form, unsere Web-Browser wird sagen: "Ich werde diese Daten zusammen zu schicken" und sie werden dich auf eine andere Seite zu senden. Weil wir die Verwendung von AJAX sind jetzt, es gibt keine Notwendigkeit, um den Benutzer zu einer anderen Seite zu senden. Wir stehen noch gehen, um die Ergebnisse dynamisch Anzeige auf der gleichen Seite. Wir wissen wirklich nicht wollen, dass sie überall hingehen, und ich möchte auf der gleichen Seite zu bleiben. So durch Rücksendung falsch, stellen wir sicher, dass das Formular nicht das für uns tun. Werfen wir einen Blick auf, was diese tatsächlich aussieht. Unser Angebot Seite gleich aussieht. Lassen Sie mich hochzuziehen den Inspektor hier unten, so dass wir sehen können, was vor sich geht. Machen Sie es ein bisschen weniger riesig. Erinnern, wenn wir uns öffnen die Registerkarte Netzwerk, das ist, wo wir alle HTTP-Requests zu sehen das auf der Seite passiert. 

Für ein Symbol lass mich in AAPL eingeben und auf Angebot einholen. Jetzt sahen wir, dass ein Anteil von Apple eine gewisse Anzahl von Dollar kostet gerade erschienen auf der Seite, aber die URL überhaupt nicht ändern. In der Tat, hier ist die HTTP-Anforderung, die wir gerade gemacht. Wir haben eine POST-Anfrage an quote.php. Das macht Sinn. Dies ist, was der Server uns zurück geschickt. Es ist nicht mehr diese gigantische HTML-Dokument mit Bildern und dergleichen, es ist nur eine Textzeile, und dann haben wir nur angezeigt die Textzeile. Wenn wir zurück zu den Kopf-und sehen, was wir tatsächlich gesendet Innenseite dieser HTTP-Anforderung, können wir sehen, dass wir hier unten entlang eines Schlüssels aus Symbol und einem Wert von AAPL gesendet, das ist, was der Benutzer eingetippt Das ist schön, aber es ist immer noch ein wenig ärgerlich. Ich habe immer noch auf diese Schaltfläche klicken, um den Aktienkurs zu bekommen. Wir sind viel beschäftigte Leute, und wir haben keine Zeit, um Schaltflächen klicken. Google realisiert dieses eine kleine Weile her, wenn sie Google Instant umgesetzt. Was Google Instant tut, ist, wie du schreibst es gerade beginnt Darstellung der Ergebnisse für Sie so dass Sie sich keine Sorgen um auch auf Suchen klicken kümmern. Eigentlich eine lustige Geschichte damit verbunden. Sobald Google Instant kam heraus, Leute wie waren "Whoa, ist diese super toll." "Das ist so cool." Und ein Schüler sich an der Stanford wer war 19 zu der Zeit machte diese Website namens YouTube Instant. Alle YouTube Instant-tut, ist eine möglichst effektive Suche YouTube sofort. So anstatt zu gehen auf YouTube.com und schlug Search, wenn ich Eingabe in YouTube Sofortige etwas anfangen wie CS50, konnten wir hier sehen, dass es zu versuchen auf einem langsamen Internet-Verbindung bevölkern diese Ergebnisse zu leben. Um dies zu tun, dass wir tatsächlich eine sehr einfache Änderungen unserer quote.js Datei. Momentan sind wir Anbringen dieses Ereignis, wenn das Formular abgeschickt wird. Wir wissen nicht wirklich wollen, dass die Nutzer übermitteln diese Form nicht mehr, also lasst uns statt feuern diese Veranstaltung jedes Mal der Benutzer eine Taste drückt. Um dies zu tun, dass wir zunächst die Veranstaltung Wechsel von unterbreiten keyup. Das bedeutet, dass anstatt zu warten, die Form zu unterbreiten, jedes Mal, wenn die Taste gedrückt wird, wird etwas passieren. Es macht keinen Sinn mehr, diese keyup Ereignis an die ganze Form zu befestigen. Wir haben wirklich nur über diese Suchfeld kümmern. 

So wählen Sie, dass jetzt können wir dies ändern zu sein, als die Form-quote, Form-quote und wir werden einen Eingang haben (type = text) oder wir könnten sagen, (Name = Symbol) - was wir wollen. Jetzt gibt es eine letzte, was wir zu tun haben. Angemeldet hier unten, wenn wir return false sagte wir sagten, wir wollen nicht, dass Standard-Ereignis ausgelöst. Aber es passiert einfach so, dass, wenn wir das jetzt deaktivieren, was wir in geben ist nicht zu zeigen, bis in den Browser mehr denn das würde das Standard-Verhalten der Eingabe in ein Textfeld sein. Wir wollen nicht mehr zu überschreiben, also lasst zerstöre diese return false. Wenn wir retten, und laden Sie die Seite, wenn ich jetzt eingeben AAPL beginnen Sie sehen, dass der Aktienkurs am Boden ist hier automatisch vervollständigt. So, hier ist CS50 Finance Instant. Eigentlich eine lustige Geschichte über den YouTube Instant- ist, dass Studenten nur irgendwie schrieb es als 1-Nacht-Projekt und am nächsten Tag war er eine Stelle beim YouTube CEO angeboten. So einfach ist das. Sie CS50 Studenten können Ihre fertigen Projekte erhalten Sie einen Job bei YouTube. So etwas ist eine wirklich coole Idee für eine endgültige Projekt, nicht wahr? Wir hatten einige vorhandene Funktionalität, dass wir mit integrieren wollten. Wir verbessern die Nutzererfahrung ein wenig, und plötzlich suchen etwas auf YouTube Sofortige könnte viel einfacher sein, als die Suche nach ihm auf den regulären YouTube. Also das ist AJAX in einer Nussschale. 

In den Beispielen, dass Joseph zeigte, sahen wir eine Menge autocompletes, und diese autocompletes sind wirklich, wirklich praktisch, weil wir nicht zu erinnern - Zum Beispiel, wenn Sie sich nicht erinnern den Aktienkurs für Apple und wir wissen, dass es aa etwas, anstatt nur zu mir sagen: "Ein Anteil von diesem Ding kostet so viel Geld," Ich würde Art gerne wissen, was Aktien mit aa beginnen. Wir können das wirklich gut tun mit dem Bootstrap-Bibliothek, die bereits enthalten ist Innere CS50 Finance. Wenn Sie hierher kommen, um die JavaScript-tag und nach unten scrollen, um typeahead, dies ist nur ein nettes Plugin, dass jemand bereits für uns geschrieben hat, und wir können einfach nutzen ihre Funktionalität wie diese. Ich in einem A eingegeben und hier ist eine Liste von einigen Staaten, die mit A beginnen Lassen Sie uns sagen, dass ich denke, das ist wirklich cool und es ist Zeit für mich, dies auf meiner Seite sind. Es stellt sich heraus, dass dies wirklich, wirklich einfach ist. Lasst uns springen Sie hier, um quote3.js. Meine Datei sieht ein bisschen anders aus. Hier unten alle meine AJAX Zeug ist das gleiche. Ich möchte die Bestandsdaten, ohne zu einer anderen Seite zu laden. Aber jetzt möchte ich dieses Plugin verwenden. Die Bootstrap-Dokumentation hat großartige Beispiele dafür, wie genau kann ich das tun. Ich möchte sagen: "Hier ist der Eingang, die ich möchte autocomplete auf" und ich werde diese Funktion aufgerufen typeahead nennen, und dass wird alles der typeahead Sachen für uns zu behandeln. Es wird die Liste zu initialisieren, wird es tun alle unsere Filterung. Die einzige Sache, die es wissen muss, ist, welche Daten wir über Autovervollständigungsfeld. So fand ich heraus, diesen Schlüssel nur durch das Lesen der Dokumentation und Blick auf die Beispiele. Wenn ich ihm einen Schlüssel der Quelle, der Wert dieses Schlüssels ist nur einige Reihe von Dingen, die ich will autocomplete auf. Diese Variable kam aus dieser anderen Datei. Ich öffne symbols.js. 

Dies symbols.js ist nur das wirklich, wirklich große Array mit Strings all dieser Lager Symbole aus dem NASDAQ. Wenn ich will, um zurück zum HTML, so jharvard, vhosts, globalhost, html, Vorlagen, quote_form. Da das ist jetzt quote3.js genannt, lassen Sie mich die JavaScript-Datei I einschließlich hier bin. Jetzt habe ich quote3.js, so werde ich in diesem separate JavaScript-Datei zu laden, derjenige, der diese Bootstrap autocomplete hat. Nun, wenn ich zurück zu springen, um den Browser die Seite neu laden, und ich beginne Eingabe aa, da ist mein autocomplete. Und es war wirklich so einfach. Ich hatte ein Codezeile, sagte nur: "Hier sind die Dinge, die ich will autocomplete auf" und plötzlich habe ich dieses wirklich, wirklich nett Funktionalität nicht eine ganze Menge Aufwand. Wie Sie die Entwicklung von Websites und insbesondere mit der Stirnseite der Dinge, du wirst finden, dies ist der Fall eine ganze Menge. Es gibt viel, viel, viel wirklich cool freie Bibliotheken da draußen das macht es super einfach, Dinge wie diese zu tun. Kann mir jemand irgendwelche Nachteile von einfach Autovervollständigungsfeld auf dieser großen Liste von Symbolen denken? Was könnte etwas, das nicht die beste mit diesem Ansatz? Yeah. >> [Student] Zeit, wenn Sie haben eine Menge von [unverständlich] Yeah. Momentan sind wir das Herunterladen dieser riesigen JavaScript-Datei und es gibt eine Menge von Symbolen. Und so, wenn wir eine Tonne Zeug haben, erhöhen könnte dies Art der Latenz nicht nur suchen sondern auch den Download der eigentlichen Datei. Great. Sonst noch was? Im Moment gibt es keinen wirklichen Sinn von Bedeutung. Wenn ich schreibe in ein A, die Unternehmen, die sich hier zeigen vielleicht nicht die beliebtesten Unternehmen, die mit A beginnen werden 

Bevor ich an Apple zu bekommen, dauert es möglicherweise einige weitere Zeichen zu finden, was ich suche. Diese autocomplete nicht dieses Gefühl von Relevanz. Ist es nur geht zu sagen: "Alles, was ich werde angezeigt übereinstimmt." Statt dessen würde Ich mag irgendwie integrieren gewisse Bedeutung in meine Recherchen. Wenn ich gehe hier um Yahoo! Finance, finance.yahoo.com, Wenn ich versuche, ein Symbol auf Yahoo! Finance Seite geben und ich schreibe goog starten, habe ich diese schöne Liste von Dingen. Klar, es sieht aus wie Yahoo! Finance ist etwas klüger hier. Sie haben eine gewisse Bedeutung und sie haben auch zusätzliche Informationen wie der Name der Aktie. Das ist etwas, dass ich nicht wirklich mit nur mein Lager Liste der Symbole zu erhalten. Ich will dies und so werde ich es nehmen. Um dies zu tun, der uns ein paar Dinge zu tun. Lassen Sie uns zunächst eröffnen den Inspektor auf dieser Seite weil wir sahen, dass diese Seite nicht Nachladen überhaupt, so ist es wahrscheinlich mit AJAX irgendwie werden geladen seine Daten. Wir können herausfinden, welche Daten es geladen. Wenn ich auf dieser Registerkarte Netzwerk, werden diese werde alle Anfragen, die entlassen werden beginnen. Nun, wenn ich in goo geben, können wir sehen, dass ich gerade eine neue HTTP-Anforderung. Dies ist wahrscheinlich, dass in dem Daten stammen. Sicher genug, wenn ich an dieser URL, die ein bisschen merkwürdig benannt ist zu sehen, können wir sehen, dass dies genau das ist, wo Yahoo Platzverweise seine Daten aus. 

Ich habe eine separate Datei namens suggest.php sehr ähnlich im Geist der Lookup-Funktion ist erstellt. Es ist im Grunde geht eine Anfrage an Yahoos URL zu machen, um wieder einige Daten, und schicken Sie es zurück zu mir. Nun, anstatt dieses große, riesige Liste von Symbolen, Ich kann Yahoo ist schön Relevanz Dinge, und ich glaube nicht, dass massive JavaScript-Datei herunterladen. Ich werde nur nach unten zu ziehen, die tatsächlich relevanten Börsenkurssymbole. Lassen Sie springen in die. So html, js. Wir sind jetzt in quote4. Jetzt sind wir nicht mehr mit diesen großen Liste der JavaScript-Dateien. Aber es gibt eine kleine Art von Design-Problem hier. Wir haben gesagt, dass das A in AJAX asynchron ist. Was das bedeutet, ist, dass wenn ich einen AJAX-Request zu machen, so hier on line 8, das ist, wo meine AJAX Anfrage tatsächlich ausgelöst wird. Lassen Sie uns jetzt sagen ich einige Code haben hier unten, das wird ein paar Sachen zu tun gerne warnen den Benutzer oder ändert etwas auf der Seite. Was nicht passieren ist der Browser wird nicht für diese Anfrage warten, um weiter bevor er nach unten und schlagen Sie diese Zeile. Das ist der asynchrone Teil. Es wird diesen Antrag stellen und sagen: "Wenn Sie fertig sind, "Zurückkommen und rufen diese Funktion, dass ich dir gesagt habe, innerhalb von Erfolg nennen." Das heißt, wir können nicht einfach downloaden alle Aktien vorher. Wir müssen den Antrag zu stellen und warten, etwas zurück zu kommen. Das bedeutet, dass vor, könnten wir einfach sagen, Bootstrap, "Hier ist die Liste der Dinge, die ich möchte, dass du autocomplete auf." Wir können nicht mehr tun, mehr, weil wir nicht wissen, was wir tatsächlich autocomplete auf möchten. Glücklicherweise, dachte Bootstrap dies, weil die smarten Jungs da drüben sind, und sie gaben uns einen anderen Weg, um dieses typeahead Plugin zu laden. Zuvor war der Wert dieser Eigenschaft source gerade diese großen Array von Dingen zu autocomplete auf. 

Jetzt die Eigenschaft source ist eigentlich eine Funktion, und der Zweck dieser Funktion ist es, herauszufinden, was die Dinge zu autocomplete eingeschaltet sind. Wie es geht, um das herauszufinden ist es, es wird Yahoo! Finanzen fragen was die besten Dinge zu autocomplete sind. Um dies zu tun, dass ich werde eine sehr ähnliche AJAX Antrag zu stellen. Ich werde diese Seite auf suggest.php beantragen. Ich möchte an den Symbolen noch senden. Und jetzt ist mein Erfolg, sagte der Bootstrap Dokumentation me , dass, um zu bevölkern diese Liste der Dinge, alles, was ich tun müssen, ist in diesem Array gehen jetzt an die Callback-Funktion. Aber warten Sie eine Minute. Wenn dies soll ein Array sein und AJAX sendet mich zurück Text, wie ist das möglich? Dies stellt eine neue Möglichkeit zum Austausch von Daten genannt JSON. In diesem Fall sind wir nicht nur das Zurücksenden einer einfachen Text-String. Jetzt sind wir mit dieser komplexen Liste von Börsenkurssymbole tun. Diese Aktien Symbole können auch Dinge wie den Namen des Unternehmens oder den aktuellen Preisen. Nur mit einem großen langen Schnur, die in keiner vorhersagbaren Weise formatiert wurde wird nicht der beste Weg, um diese Daten von Yahoo-Server zu mir sein in einer Weise, dass ich einfach zu verstehen. JSON ist eine Technologie, die die Vorteile bringt, wie schaffen wir assoziative Arrays in JavaScript. Das sieht viel wie ein JavaScript assoziatives Array, und in der Tat, es ist, weil es ist. JSON steht für JavaScript Object Notation. Dies ist im Grunde eine vereinbarte Format zur Übertragung von Daten hin und her. Hier wird diese JSON-Objekt oder diese JSON assoziatives Array sendet mir ein paar Daten zu einem Kurs. 

Die Schlüssel dieses Arrays sind Dinge wie selbstverständlich, die einen Wert von CS50 hat, und hier unten können wir sehen, dass ich einen Wert, der ein Array haben. Ich habe nicht um Dinge wie parse aus Strings zu tun und suchen Sie Kommas und verrückte Dinge tun so. Da dies in diesem JSON-Format deklariert, JavaScript und jQuery bereits Funktionen zur Konvertierung einer Zeichenfolge das sieht aus wie dieses JSON in eine tatsächliche JavaScript assoziatives Array dass wir mit arbeiten. Doing, dass ist so einfach zu sagen, dass nicht mehr diese Datei, suggest.php, Senden mich einfach einen Text-String, aber ich weiß, es geht um das Senden mich zurück JSON. Das bedeutet, dass diese in ein JavaScript JSON assoziative Array umgewandelt werden kann. Und so jQuery, würde Ich mag Sie, dass für mich tun. Das bedeutet, dass diese Reaktion Parameter hier, Dies ist nicht mehr nur ein String. Weil wir jQuery gesagt habe, das kommt hier einige JSON, jQuery wird schlau genug sein zu sagen: "Du wolltest JSON?" "Ich werde das in ein assoziatives Array für Sie konvertieren." Lasst uns tatsächlich einen Blick auf die Registerkarte Netzwerk, sobald wir quote4.js haben. Wir ändern und laden Sie die Seite. Jetzt werde ich in einem-a erneut eingeben. Ich habe ein paar Anfragen an suggest.php gemacht, aber jetzt diese Antwort, anstatt nur die Zeichenfolge ist es JSON. Also habe ich einen offenen geschweiften Klammer und sagte: "Hier kommt ein assoziatives Array." 

Das erste und einzige Schlüssel dieses assoziativen Arrays wird als Symbole, und dann ist hier ein Array mit allen relevanten Symbolen kommen nun von Yahoo! Finance, nicht von dieser gigantischen Liste. Das ist, wie kann ich einfach bevölkern diese autocomplete plugin mit einigen Daten, die nicht kommen ist aus einer lokalen Datei, die bereits vorgegebenen ist sondern etwas anderes. Es stellt sich heraus, dass wir tatsächlich nutzen eine Technologie namens JSONP, oder JSON mit Polsterung, wird das beseitigen diese suggest.php Mittelsmann. Aber anstatt das zu tun, lasst uns stattdessen einen Blick auf, wie kann ich diese noch zu verbessern. Ich mag Bootstrap die typeahead. Es ist wirklich schön. Aber wir sind immer gut JavaScript und wir wollen solche selbst tun, vielleicht einen Blick auf, was dieses Plugin tun könnte. Lasst uns nicht mehr verwenden, dass typeahead Sache, und lassen Sie uns versuchen, diese Liste der vorgeschlagenen Aktien selbst machen. Hier in quote6.php werden wir damit beginnen, die gleiche Weise. Jedes Mal, wenn jemand Typen etwas, wollen wir einen AJAX-Request zu machen. Dies ist vergleichbar mit unserer ursprünglichen CS50 Finance Instant. Anstatt eine Anforderung an quote.php, wir jetzt eine Anfrage an der gleichen Datei wie zuvor, dies suggest.php, was ist nur los, um Daten von Yahoo! Finance ziehen. 

Auch wir sind immer noch erwartet JSON, aber jetzt, da die typeahead ist dies nicht zu tun für uns, müssen wir auch mitschicken den Wert, der im Inneren ist der aktuelle Textfeld. Jetzt wissen wir, was zu Yahoo! Finanzen fragen, und so jetzt hier ist die Funktion, die wir ausführen wollen, sobald die Anforderung abgeschlossen ist. Wir haben nicht das Plugin, um die Liste für uns zu machen, also hier ist, wo wir eigentlich vorhaben, eine Liste von Vorschlägen zu bauen. Um das zu tun, viel in PHP wie wir verkettet diese großen Ketten von HTML dann werden wir ihnen gedruckt, können wir exakt das gleiche Ding in JavaScript zu tun. Zuerst werden wir damit beginnen, diese Zeichenfolge als Anregungen, und diese Zeichenfolge ist gerade dabei, einige HTML enthalten. Wir wollen, dass es eine Liste von Dingen, so werden wir damit beginnen, mit dieser Liste tag, und jetzt werden wir durchlaufen alle Symbole, die an uns zurück zurückgegeben wurden. Denken Sie daran, weil wir gesagt dataType habe: 'json', ist dies nicht ein String. Dies ist bereits ein Array für uns. Das ist wirklich cool. Wir können einfach sagen: "Ich möchte, dass du eine Liste Element anhängen." Wir werden es im Inneren eines eines Elements stellen Seite, dass wir geben es eine Klasse von Anregungen, damit wir wissen, was es ist, und jetzt hier ist das Symbol, dass wir wieder von Yahoo! Finance. 

Sobald wir ein Element für jedes der Symbole, die wir zurück bekommen habe geschaffen, wir wollen einfach nur zum Verschließen der Liste. So, jetzt Vorschläge für diese kleine HTML-Fragment , wenn sie auf einer Seite unterbringen wird die Liste der Dinge, die wir suchen sein. Lassen Sie uns nun tatsächlich legte, dass auf der Seite. Um dies zu tun, dass ich tatsächlich eine andere leere div erstellt und ich haben ihm eine ID von Anregungen. Ähnlich wie setzen wir den Inhalt des div, die den Preis der Bestandsdaten angezeigt werden sollen, wir wollen einfach nur, um die Inhalte dieser div was diese Zeichenfolge gesetzt welche enthält diese Symbole. Durch die Nutzung dieser HTML-Methode ist dies Vorschläge variable, diese Zeichenfolge, eine Reihe von HTML. Ich möchte, dass die HTML-nehmen und es im Inneren des div als Anregungen. Wir haben nur etwas auf das DOM angehängt jetzt. Wir haben einige neue Elemente in die DOM hinzugefügt, dass wir jetzt auf der Seite anzuzeigen. Mal sehen, wie das aussieht. Wenn wir in quote6 laden und jetzt sind wir wieder kommen, wenn ich jetzt eingeben AAPL starten, haben wir nicht mehr, dass die Bootstrap autocomplete, aber jetzt haben wir diese Liste, dass wir uns selbst gemacht. Dies ist ein wenig hässlicher als der Bootstrap typeahead, zum Beispiel sondern ermöglicht es uns, eine andere Sache zu tun. Als wir an diesem Bootstrap Plugin suchen, sahen wir, dass, wenn wir autocompleted, einer der autocomplete Werte AAPL war. Das ist vielleicht nicht so hilfreich. Als Benutzer kann ich nicht sofort erkennen alle an den Aktienmärkten Symbole. Was ich bin wohl eher zu erkennen sind der Gesellschaft tatsächlichen Namen. So wäre es nicht wirklich hilfreich, wenn anstatt zu sagen AAPL das sagte so etwas wie Apple Inc. Da rollten wir diese haben uns, können wir wirklich problemlos tun. Öffnen wir unser letztes Zitat Datei hier, so quote7. 

Dasselbe. Ich habe gerade eine andere PHP-Datei, die zu uns zurückkehren wird mehr als nur die Symbole erstellt. Es wird uns auch wieder der Gesellschaft Namen. Und so tun wir das Gleiche. Wir machen eine AJAX-Anforderung. Sobald die Anforderung abgeschlossen ist, werden wir diese Funktion hier auszuführen, und diese Funktion wird der Aufbau eines großen Reihe von Elementen. Aber der Unterschied ist hier, dass der Wert dieser Listen nicht mehr nur das Symbol, es ist jetzt auch der Name. So haben wir ein kleines Problem. Wenn wir unsere Suche verwendet werden, müssen wir irgendwie weitergeben das Symbol. Wir können nicht passieren Lookup etwas wie Microsoft Corporation. Wir müssen es MSFT passieren. Wenn wir das Schreiben von HTML, wir haben viele nette eingebaute Attribute. Ein A könnte mit ihm ein href oder eine Klasse zugeordnet haben. Aber was wir wirklich brauchen, ist jetzt für jeden dieser Links eine Börsenkürzel zugeordnet sein. Es gibt keine eingebaute HTML-Attribut für Börsenkürzel, aber glücklicherweise erlaubt HTML5 uns, unsere eigene Attribute erstellen zu sein, was wir wollen. Indem man sagt, Daten-Symbol, ich habe ein neues Attribut eingeführt dessen Namen ich gerade erfunden, und das ist okay, weil ich es vorangestellt mit diesen Daten. Wir werden innerhalb von dort das Symbol aus dem Lager, zu speichern. Was das bedeutet, ist, dass, obwohl wir die Anzeige den Wert des Firmennamens Innere unserer autocomplete, wir sind immer noch die Erinnerung an die Symbol Das ist mit den einzelnen Unternehmen verbunden. Die Art, wie wir tun, dass du im Inneren dieses Elements selber. Das heißt also müssen wir eine weitere Änderung vornehmen. Wenn wir es jetzt klicken, müssen wir tatsächlich nutzen das Symbol Attribut anstatt nur seinen Wert. Wenn wir wieder auf, legen wir einen Event-Handler für Vorschläge. Wann immer einer dieser Vorschläge wird nun angeklickt wird, möchte ich etwas tun. Was ich tun möchte, ist Ändern Sie den Wert dieses Eingabefeld. Jetzt möchte ich das gleiche val-Funktion eingestellt. 

So ohne Argumente dieser val-Funktion gibt Ihnen, was bereits in das Textfeld aber wenn man es ein String, es geht um die Zeichenfolge zu nehmen und ihn in das Textfeld ein. Ich bin der Auswahl seiner Textfeld in der gleichen Weise. Sein Name ist Symbol in der Form-quote. Jetzt schicke ich sie den Wert des Attributs Daten-Symbol. Dieses Ding hier ist neu, diese $ (this). Was dies bezieht sich auf das Element, das angeklickt wurde. Wir können hier sehen, dass wir nicht Anbringen eines Click-Ereignis zu jedem Element mit einer Klasse der Suggestion individuell. Vielmehr sind wir nähern uns das ein wenig anders. Stattdessen wir sagen, wenn irgendetwas in dieser Vorschläge div, was denken Sie daran ist nur der Behälter für diese Liste, Wenn etwas in diesem div geklickt und es hat eine Klasse der Suggestion, Ich möchte dieses Ereignis ausgelöst. Im Grunde, was das bedeutet, wir tun können ist, können wir diese gleichen Event-Handler wiederverwenden für all die Dinge in der Liste. So haben wir nicht, um ein Event-Handler für das erste Element haben und eine andere Ereignisbehandlungsroutine für das zweite Element. Wir können stattdessen sagen: "Ich will das gleiche Event-Handler, um alles in meiner Liste anwenden." Aber wir müssen irgendwie wissen, welches Element geklickt wurde. Dieses "this" Schlüsselwort stellt genau dies. Dies ist das Objekt, das nur durch den Benutzer geklickt wurde. Wenn ich klickte nur den dritten Link, stellt dies die Element dieser dritten Link, was bedeutet, dass ich ihr Attribut, Daten-Symbol zu erhalten, was wir wissen, hat das Symbol, das mit der Firma I gerade geklickt verknüpft ist enthalten. Wenn wir springen zurück zu unserer Finanz-Seite können wir jetzt, dass ich einmal eingeben etwas wie msft zu beginnen, man nicht mehr immer nur die Aktien Symbole, wir bekommen jetzt die eigentlichen Unternehmen. Aber wenn ich auf eines dieser Unternehmen auf, können wir sehen, dass wir tatsächlich bevölkern das Textfeld nicht mit dem Namen des Unternehmens aber mit was wurde innerhalb dieser Daten Attribute gespeichert. Und so, wenn ich tatsächlich zu inspizieren eines dieser Elemente per Rechtsklick und klicken Inspect Element, können wir wirklich sehen, wie das aussieht. 

Erinnerung: Dies ist etwas, das wir erstellt Inneren, dass for-Schleife als wir den Aufbau dieser Zeichenfolge von HTML. Wir können hier sehen, dass diese Daten-Symbol den Wert MSFT, was ausgezeichnet ist hat. Das ist, was wir erwartet hatten. Das ist das Symbol und das ist, wie wir den Wert, den wir verwenden, benötigt haben Innere dieses Textfeld ein. Das ist genug für das Angebot Form, weil das ist irgendwie langweilig. Lassen Sie uns nur machen ein paar schnelle Verbesserungen unserer Portfolio-Seite. Wenn Sie CS50 Finanzen für eine Weile verwendet habe, und starten Sie den Kauf und Verkauf eine Menge von Aktien, schließlich diese Tabelle wird ziemlich groß, und du wirst einen Börsenticker, natürlich wollen. Sobald der Tisch ist wirklich, wirklich groß, könnte es sein, für den Benutzer nützlich zu versuchen, über sie zu suchen. Innerhalb der Suchbox, wenn ich schreibe so etwas wie Disney starten und suchen für meine Mickey Mouse Lager, können wir sehen, dass die Tabelle wird nun Filterung basierend auf was ich gerade eingetippt Diese Funktionalität sieht super kompliziert, aber es ist wirklich, wirklich einfach mit jQuery und JavaScript. Diese portfolio.php Datei enthält eine JavaScript-Datei namens portfolio.js. Werfen wir einen Blick auf, dass. So html, js, Portfolio. Hier ist, wo wir tun, dass die Suche auf dem Tisch sind. Das erste, was ich tun müssen, ist einen Ereignishandler auf dieses Textfeld weil wir wissen, dass wir unsere Filterfunktion zu feuern will jedes Mal, wenn der Benutzer auf etwas, weil wir keine Zeit haben für die Suche-Tasten. Das erste, was wir tun müssen, ist herauszufinden, was der Nutzer für die Suche, genau wie wir zuvor. Dieses Schlüsselwort bezieht sich auf das aktuelle Element der Benutzer interagiert wird. 

Da der Benutzer mit dem Suchfeld interagieren, $ This stellt das Suchfeld ein, so this.val gibt uns, was drin ist neben dem Suchfeld der Benutzer gerade eingeben wird. So, jetzt, was wir tun wollen wollen wir durchlaufen alle Zeilen im Inneren unserer Tabelle. Um alle Zeilen in unserer Tabelle wählen, gab ich, dass die Tabelle eine ID der Tabelle Portfolio und jede Zeile wird durch ein TR-Element repräsentiert, so dieser Selektor wird mir ein großes Array zurück aller Zeilen in meinem Tisch. Jetzt möchte ich durchlaufen das Array. Ich könnte Ihnen eine for-Schleife, aber jQuery tatsächlich bietet uns die nette Funktion namens "jeder." Was jeder tut, ist jeder nimmt ein Argument, und dieses Argument ist eine Funktion. Was es tun werden, ist, es wird diese Funktion auf jedes Element innerhalb dieser Liste gelten. Diese Funktion nimmt ein Argument, das e ist, und wenn diese Funktion ausgeführt wird, wird diese E jetzt mit der ersten Zeile ersetzt sein können, dann die zweite Zeile, und dann die dritte Zeile. Auf diese Weise ist dies dasselbe wie läuft eine for-Schleife und dann herauszufinden das aktuelle Element auf der Index innerhalb der for-Schleife basiert. Bei jeder Iteration für jedes dieser Elemente in der Tabelle, Ich möchte, wenn der Text des Elements zu überprüfen - den Text der Zelle innerhalb der Zeile - übereinstimmt, was ich suche. Dieses große lange Reihe von Befehlen ist, wie ich könnte das tun. Zunächst einmal, dieses bezieht sich nun auf - weil sie innerhalb einer neuen Funktion ist - dies ist nun die aktuelle Zeile in der Tabelle. Ich will die aktuelle Zeile in der Tabelle zu nehmen, und ich möchte alle seine Kinder zu bekommen. Denken Sie daran, ist das DOM eine hierarchische Baumstruktur, was bedeutet, dass Elemente eine Anzahl von Kindern haben. 

This. Kinder-Funktion wird zu mir zurückkehren ein Array aller Elemente das sind die Kinder, in diesem Fall kann eine Zeile in der Tabelle. Dies ist einfach nur die Zellen innerhalb der Zeile. Ich möchte nur auf die erste Zelle suchen. This. Erste Funktion, sagt mir das erste Element in diesem Array. Dann wird die Text-Funktion sagt zu mir genau, was drin ist dieser Zelle da ich über diesem Text suchen möchten. Schließlich wollen wir wandeln es in Kleinbuchstaben, so können wir tun Text Groß-/Kleinschreibung Abfragen. Schließlich wollen wir sehen, ob die Zeichenfolge innerhalb einer Tabelle enthält den String, nach dem gesucht. Die indexOf JavaScript-Funktion genau das tut. Es sagt uns, ob diese Zeichenfolge eine andere Zeichenfolge enthält. Wenn es stimmt, dass die Zelle enthält, was ich suche, dann möchte ich sicherstellen, dass es angezeigt ist. Die Show-Methode wird sagen: "Zeigen Sie auf das Element." Ist dies nicht der Fall ist, dann heißt das, was ich für nicht enthalten suchen innerhalb dieser Reihe, und so möchte ich mich verstecken ist vom Benutzer. Das erreicht dieses schöne Filterwirkung denen keine länger wir die gesamte Tabelle zu sehen. Wenn Sie im Umgang mit diesen ticker machen interessiert, wir die Quelle online zu stellen. Aber es ist wirklich einfach. JQuery hat awesome Methoden für diese Animationen und Manipulation CSS-Eigenschaften. So, das wars für mich. 

Was liegt dann vor? Wie Sie in ein paar Tagen sehen werden, ist die endgültige Projekte Vorschlag fällig. Die letzten Projekte Vorschlag wird Sie bitten, ein paar Fragen, aber unter ihnen drei Meilensteine ​​sein - ein "gut" Meilenstein, ein besser Meilenstein und ein a best. Die Idee ist wirklich an euch helfen, Ihre Erwartungen so dass minimal du wirst glücklich sein mit dem Ausgang des endgültigen Projekts und es wird als "gut" so weit wie Sie betroffen sind. Aber dann im Interesse der immer Sie gerade ein wenig, um etwas zu erreichen bessere oder etwas am besten, wir auch schieben Sie auf das, wie auch sortieren. Der CS50 Hack-a-thon, mittlerweile ist in ein paar Wochen. Normalerweise tun wir dies auf einer Lotterie Basis Basis wegen der Zinsen, Aber die Chancen stehen wir ein paar hundert von uns im Shuttle-Busse bringen vom Harvard Square bis Kendall Square, wo Microsoft hat eine schöne Anlage treffend als "NERD" - Die New England Forschungs-und Entwicklungszentrum. Wir werden es schaffen um 8 Uhr werden wir etwas zu essen haben. Rund 01.00 Uhr müssen wir noch mehr Nahrung. Um 5 Uhr, wenn Sie noch wach sind wir den Kopf über IHOP oder nehmen Sie zurück zum Campus. Das Ziel befindet sich in letzten Projekte tauchen Neben der Mitschüler und Mitarbeiter. Dann ein paar Tage später ist der CS50 Fair, das ist wirklich gedacht als Gelegenheit für euch die Arbeit zu präsentieren, um und Leistungen für das Semester während Tuchfühlung miteinander und bekommen ein Gefühl dafür, was jeder tat. Mit dieser sagte, vielen Dank an Tommy und Joseph, und wir werden Sie am Montag zu sehen.  [Applaus]