1 00:00:00,000 --> 00:00:02,700 [Powered by Google Translate] [Woche 9, Fortsetzung] 2 00:00:02,700 --> 00:00:05,160 [David J. Malan - Harvard University] 3 00:00:05,160 --> 00:00:07,020 [Dies ist CS50. - CS50.TV] 4 00:00:07,940 --> 00:00:13,340 >> Dies ist CS50. Dies ist das Ende der Woche 9. Vielen Dank. 5 00:00:13,340 --> 00:00:15,310 Endlich. Woche 9. Ich habe es. 6 00:00:15,310 --> 00:00:18,590 Heute setzen wir unsere Gespräche über Web-Programmierung 7 00:00:18,590 --> 00:00:21,660 mit einem Auge in Richtung des endgültigen Projekts, nicht weil man etwas webbasierte tun 8 00:00:21,660 --> 00:00:25,610 zur endgültigen Projekten, sondern weil entweder für Abschlussarbeiten oder nach CS50 9 00:00:25,610 --> 00:00:29,000 Dies ist sicherlich die Richtung, in die moderne Software geht. 10 00:00:29,000 --> 00:00:31,770 Und doch ist es nicht eigentlich eine einfache Sache. 11 00:00:31,770 --> 00:00:35,040 In der Tat ist eine der schwierigsten Dinge zu tun der Aspekt des Designs. 12 00:00:35,040 --> 00:00:38,600 >> Zum Beispiel durch Design meinen wir eigentlich immer die Benutzeroberfläche 13 00:00:38,600 --> 00:00:40,420 oder die User Experience rechts. 14 00:00:40,420 --> 00:00:43,200 Ich wage zu behaupten - und wir wissen aus einer aktuellen Problem set 15 00:00:43,200 --> 00:00:45,960 wenn ein paar von euch ausgestrahlt Ihren Beschwerden über einige Stück Software 16 00:00:45,960 --> 00:00:49,000 oder Hardware, ärgert Sie, ob auf dem Campus oder off - 17 00:00:49,000 --> 00:00:51,930 es gibt eine Menge von Websites gibt, gibt es eine Menge Hardware da draußen, 18 00:00:51,930 --> 00:00:53,900 diese Art von sucks. 19 00:00:53,900 --> 00:00:58,730 Aber die Realität ist, dass die Dinge, die einfaches, dennoch sind dennoch leistungsfähige 20 00:00:58,730 --> 00:01:00,550 ist eine sehr schwierige Aufgabe. 21 00:01:00,550 --> 00:01:03,680 So für heute Ich fragte Joseph und Tommy zu mir zu kommen hier 22 00:01:03,680 --> 00:01:06,680 so dass wir ein Gespräch haben, sowohl zur Gestaltung 23 00:01:06,680 --> 00:01:09,090 und welche Arten von Denkprozessen beginnen sollte gehen durch den Kopf 24 00:01:09,090 --> 00:01:12,040 wenn Sie Ihre fertigen Projekte entwerfen, Ihre Zukunft alles Gute. 25 00:01:12,040 --> 00:01:15,040 Und dann mit Tommy Hilfe wir auf einige der Details der Implementierung zu suchen. 26 00:01:15,040 --> 00:01:18,440 Wie kann man eine Vision auf Papier oder im Kopf 27 00:01:18,440 --> 00:01:20,760 dass man dann programmgesteuert ausführen 28 00:01:20,760 --> 00:01:24,030 durch einige der Technologien und Techniken, die wir haben gerade erst begonnen reden, 29 00:01:24,030 --> 00:01:29,080 nämlich JavaScript und sogar etwas neuere, nämlich AJAX, Asynchronous JavaScript. 30 00:01:29,080 --> 00:01:32,950 Das erlaubt Ihnen, umso mehr Dynamik einer Benutzeroberfläche erstellen 31 00:01:32,950 --> 00:01:35,780 durch Abrufen mehr und mehr Daten progressiv von einem Server. 32 00:01:35,780 --> 00:01:38,560 Also werden wir einige dieser Snippets sowie heute sehen. 33 00:01:38,560 --> 00:01:41,800 Nebenbei, wenn Sie bei der Konzentration in der Informatik interessiert 34 00:01:41,800 --> 00:01:45,010 oder Nebenfach Informatik, wissen, dass dies Freitagmittag 35 00:01:45,010 --> 00:01:48,750 in Maxwell Dworkin 221 wird es eine Pizza Veranstaltung 36 00:01:48,750 --> 00:01:50,780 wo man ein wenig mehr über die Informatik. 37 00:01:50,780 --> 00:01:54,860 Auf dem Weg aus der Tür heute werden Sie in der Lage sein abholen eine offizielle Anleitung zu CS in Harvard. 38 00:01:54,860 --> 00:01:57,290 Wir werden es auf den Mülleimer außerhalb legte auf Hüfthöhe 39 00:01:57,290 --> 00:01:59,750 so dass, wenn Sie möchten, dies zu packen und lernen, ein bisschen mehr über CS, 40 00:01:59,750 --> 00:02:02,480 das wird für dich da sein, wie es in Woche 0 war. 41 00:02:02,480 --> 00:02:06,500 Auch wenn Sie möchten uns für CS50 Mittag kommen an diesem Freitag um 1:15 Uhr, 42 00:02:06,500 --> 00:02:09,800 Head to cs50.net/lunch. 43 00:02:09,800 --> 00:02:13,260 Ohne weitere Umschweife, ich gebe Ihnen Lehre Kollegen Joseph Ong. 44 00:02:13,260 --> 00:02:19,190 Hallo. [Applaus] 45 00:02:19,190 --> 00:02:20,770 Thanks. 46 00:02:20,770 --> 00:02:24,780 Das erste Mal, dass ich über Design gelernt habe, war in einer Klasse hier genannt CS179. 47 00:02:24,780 --> 00:02:28,040 >> Der Professor an der Zeit, erzählte uns die Geschichte über einen anderen Professor 48 00:02:28,040 --> 00:02:31,640 Wer hatte zu einem Hotel gegangen und verwendet die Wasserhähne. 49 00:02:31,640 --> 00:02:35,630 Kann mir jemand sagen, was die 2 Knöpfe auf der linken und rechten zu tun? 50 00:02:35,630 --> 00:02:39,080 [Student] Heiß und kalt. >> Heiß und kalt. Gut. 51 00:02:39,080 --> 00:02:41,430 Was man normalerweise erwarten, nicht wahr? 52 00:02:41,430 --> 00:02:46,960 Dieser Professor nach der Verwendung der Armatur will eine Dusche zu nehmen, und er geht um diese zu verwenden. 53 00:02:46,960 --> 00:02:51,310 Er denkt, die linke und die rechte Seite sind für heiß und kalt, nicht wahr? 54 00:02:51,310 --> 00:02:55,470 Aber kann mir jemand sagen, was diese eigentlich? 55 00:02:55,470 --> 00:02:58,060 Alle Hände? 56 00:02:58,060 --> 00:03:01,740 [Unverständlich Student Response] >> Ein Vorschlag ist? 57 00:03:01,740 --> 00:03:05,860 [Unverständlich Student Response] >> Temperatur? 58 00:03:05,860 --> 00:03:10,460 So einer von ihnen regelt die Temperatur und die anderen Kontrollen? >> [Schüler] Wasserdruck. 59 00:03:10,460 --> 00:03:12,350 Wasserdruck. Gut. 60 00:03:12,350 --> 00:03:15,100 Dieser Professor geht in diesem und denken, sie sind die Steuerung heiß und kalt, 61 00:03:15,100 --> 00:03:21,470 dreht sich das Recht ein, die er denkt, ist für heiße, den ganzen Weg bis 62 00:03:21,470 --> 00:03:23,560 denn er will, um eine warme Dusche zu nehmen. 63 00:03:23,560 --> 00:03:28,100 Nun, diese nicht wirklich mithalten, so bekommt er diese nicht sehr lustige Erfahrung 64 00:03:28,100 --> 00:03:31,110 des Seins in einer kalten Dusche, und wir alle wissen, was das anfühlt. 65 00:03:31,110 --> 00:03:33,620 Dies ist ein Beispiel eines Konstruktionsfehler. 66 00:03:33,620 --> 00:03:37,040 Was ich damit meine, dass ist seine Erwartung aus dem Wasserhahn 67 00:03:37,040 --> 00:03:39,420 nicht übereinstimmen, was kam aus der Dusche, 68 00:03:39,420 --> 00:03:41,780 das ist Art unglücklich für ihn. 69 00:03:41,780 --> 00:03:44,990 Dies ist also ein Beispiel für ein Konstruktionsfehler, der im wirklichen Leben passiert. 70 00:03:44,990 --> 00:03:48,020 Aber wir sehen alle möglichen anderen Dinge zu beachten. 71 00:03:48,020 --> 00:03:50,390 Wir sind wahrscheinlich nicht die Fans der MBTA System. 72 00:03:50,390 --> 00:03:55,560 Dies ist eine U-Bahn-System tatsächlich in London, die sagt: "Diese Taste ist nicht in Gebrauch ist." 73 00:03:55,560 --> 00:04:00,220 Warum ist es noch dort? Warum brauchen wir das überhaupt? 74 00:04:00,220 --> 00:04:02,810 Als ich ein Kind war, wobei die technisch versierten ein im Haus, 75 00:04:02,810 --> 00:04:05,050 wenn der Computer abstürzen würde, würde meine Mutter zu mir kommen, 76 00:04:05,050 --> 00:04:07,060 zeigt mir diesen Bildschirm und fragen mich, was passiert ist. 77 00:04:07,060 --> 00:04:09,210 >> Auch weiß ich nicht, was das bedeutet. 78 00:04:11,890 --> 00:04:14,700 [Gelächter] Was? 79 00:04:16,950 --> 00:04:18,019 [Gelächter] 80 00:04:18,720 --> 00:04:23,050 Manchmal fühlen wir uns wie Software-Entwickler sind nur Trolling uns. 81 00:04:23,050 --> 00:04:28,460 Als Nutzer sind wir wie: "Was ist los? Jemand uns sagen." 82 00:04:28,460 --> 00:04:32,140 Das kommt alles auf eine Frage von Design. 83 00:04:32,140 --> 00:04:34,650 Design, wie wir sehen können, ist nicht nur um Ästhetik, 84 00:04:34,650 --> 00:04:37,230 es geht nicht darum, wie die Dinge aussehen. 85 00:04:37,230 --> 00:04:41,720 Wir sehen hier, dass diese kleine Pop-up hier sieht eigentlich recht nett. 86 00:04:41,720 --> 00:04:45,290 Es hat einen Schatten im Hintergrund, hat es border Radien geht. 87 00:04:45,290 --> 00:04:47,550 Es ist eine Art schön. 88 00:04:47,550 --> 00:04:51,480 Es ist nicht wirklich gut gestaltet, weil es nicht sehr benutzerfreundlich. 89 00:04:51,480 --> 00:04:54,920 Das kleine Pop-Up, das kommt nicht wirklich geben mir keine Informationen 90 00:04:54,920 --> 00:04:58,450 über das, was vor sich geht, ist es nicht sagen mir nichts als der Benutzer 91 00:04:58,450 --> 00:05:01,400 darüber, wie Sie von diesem Fehler zu beheben. 92 00:05:01,400 --> 00:05:05,190 Wir wollen über Dinge, dass Design nicht zu denken. 93 00:05:05,190 --> 00:05:06,670 Erstens ist es nicht die Ästhetik. 94 00:05:06,670 --> 00:05:10,800 Es ist auch nicht Füllung Ihre App mit Tonnen von unnötigen Funktionen. 95 00:05:10,800 --> 00:05:14,890 Wenn Sie ein Thai-Restaurant, die Sie wahrscheinlich nicht wollen, ein Zahnarzt zur gleichen Zeit sein. 96 00:05:14,890 --> 00:05:17,720 Und mit Facebook Fragen, nicht, dass viele Menschen verwendet es 97 00:05:17,720 --> 00:05:21,130 und es war nicht wirklich der Kern dessen, was sie bauten. 98 00:05:21,130 --> 00:05:24,200 Und so ist es schön zu denken nicht so sehr die Menge der Dinge, 99 00:05:24,200 --> 00:05:26,390 dass Sie auf Ihre Bewerbung, sondern die Qualität setzen 100 00:05:26,390 --> 00:05:28,910 und wie machst du diesen Benutzer Erfahrung besser 101 00:05:28,910 --> 00:05:32,540 durch die tatsächliche Verbesserung auf das, was Sie bereits haben. 102 00:05:32,540 --> 00:05:37,040 >> In einer Nussschale, sagt Design uns, was wir bauen. 103 00:05:37,040 --> 00:05:41,950 Zum Beispiel, wenn wir etwas zu bauen, die uns suchen die Dinge zu lassen, 104 00:05:41,950 --> 00:05:45,970 wie Google, zum Beispiel, sollten wir Dinge tun, in einer Weise, 105 00:05:45,970 --> 00:05:48,950 das muss der Anwender viele Klicks, um zu dem, was sie wollen, 106 00:05:48,950 --> 00:05:52,580 oder sollten wir tun es in einer Art und Weise, zum Beispiel mit Google Instant oder autocomplete 107 00:05:52,580 --> 00:05:54,970 So können wir unsere Ergebnisse zu erzielen schneller? 108 00:05:54,970 --> 00:05:58,740 Ingenieurwesen zu erzielen, wie Tommy Ihnen zeigen, tatsächlich gebaut wird. 109 00:05:58,740 --> 00:06:01,890 Es gibt viele Arten von Design. 110 00:06:01,890 --> 00:06:06,070 Zum Beispiel, wenn Sie etwas zu bauen, bereitstellen etwas 111 00:06:06,070 --> 00:06:09,770 in einem Land der Dritten Welt, wo es nicht viel Strom oder dass viel Technik, 112 00:06:09,770 --> 00:06:11,440 Sie haben zu entwerfen, was du baust 113 00:06:11,440 --> 00:06:14,210 in einer Weise, die leicht ermöglicht den Zugang zu den Menschen dort. 114 00:06:14,210 --> 00:06:18,290 Aber welche Art von anderen Design-Entscheidungen könnte es sein, 115 00:06:18,290 --> 00:06:21,850 oder könnte involviert sein so etwas? 116 00:06:23,690 --> 00:06:25,660 Yeah. Ich sehe eine Hand. 117 00:06:25,660 --> 00:06:37,200 [Unverständlich Student Response] >> Richtig. Genau. Accessibility ist eine Sache. 118 00:06:37,200 --> 00:06:40,870 Eine Menge Leute denken nicht: "Was ist meine Nutzer?" 119 00:06:40,870 --> 00:06:43,160 wie die Extreme der beiden Spektrum. 120 00:06:43,160 --> 00:06:47,770 Ich habe Benutzer, die Behinderungen haben könnte, dass ich nicht darüber nachzudenken, 121 00:06:47,770 --> 00:06:50,590 und ich denke nur über die Gestaltung für den normalen Benutzer. 122 00:06:50,590 --> 00:06:52,630 Das Internet ist für jedermann zugänglich heute 123 00:06:52,630 --> 00:06:54,870 und ich sollte für die Menschen als auch sein Design. 124 00:06:54,870 --> 00:06:58,620 Welche Arten von anderen Design-Entscheidungen können Sie machen? 125 00:06:58,620 --> 00:07:00,690 Ja. >> [Schüler] Cost. 126 00:07:00,690 --> 00:07:02,680 Kosten. Sehr gut. 127 00:07:02,680 --> 00:07:08,060 Eine andere Sache, wir Design-Entscheidungen auf möglicherweise stützen sind kostengünstig. 128 00:07:08,060 --> 00:07:13,130 Wenn wir ein Unternehmen sind, möchten Sie etwas, das nicht nicht viel kosten zu produzieren bauen 129 00:07:13,130 --> 00:07:17,720 kann aber zu einem besonders hohen Kosten verkaufen oder kann uns etwas Gewinn. 130 00:07:17,720 --> 00:07:21,540 >> Das sind alles verschiedene Arten von Design, aber wenn wir bauen etwas auf dem Internet 131 00:07:21,540 --> 00:07:25,120 oder wenn wir bauen etwas, das wahrscheinlich nicht kostet so viel aufzubauen jetzt 132 00:07:25,120 --> 00:07:28,630 wie Internet-Anwendungen - Sie müssen nicht viel Kapital hineinzuwerfen 133 00:07:28,630 --> 00:07:30,900 um etwas machen, das tatsächlich funktioniert - 134 00:07:30,900 --> 00:07:33,490 was wir sind mehr besorgt über die User Experience. 135 00:07:33,490 --> 00:07:36,390 Wir nennen diese User Centered Design. 136 00:07:36,390 --> 00:07:41,550 Im Grunde, was User Centered Design beinhaltet setzt euch in die Schuhe von den Benutzern. 137 00:07:41,550 --> 00:07:44,870 Wenn jemand Anzeichen für das, was ich baue, 138 00:07:44,870 --> 00:07:48,250 sie haben mir natürlich zu bestimmten Anwendung kommen mit einem Ziel vor Augen, 139 00:07:48,250 --> 00:07:50,280 mit einer Aufgabe, die sie abschließen möchten. 140 00:07:50,280 --> 00:07:53,650 Und Ihre Aufgabe ist es, nicht nur ihnen zu helfen, füllen diese Aufgabe 141 00:07:53,650 --> 00:07:57,930 sondern ihnen zu helfen, diese Aufgabe abzuschließen in einer Weise, die effizient, intuitiv ist, 142 00:07:57,930 --> 00:08:01,900 und, wie manche Menschen dort sagte zugänglich. 143 00:08:01,900 --> 00:08:03,750 Was bedeutet Effizienz bedeuten? 144 00:08:03,750 --> 00:08:08,050 Effizienz bedeutet, wie schnell muss mein Benutzer die Aufgabe angesichts meiner Schnittstelle vervollständigen. 145 00:08:08,050 --> 00:08:11,650 Dauert es viele Klicks für sie von einem Ort zum anderen zu bekommen? 146 00:08:11,650 --> 00:08:14,630 Ist es langweilig? Haben sie zu viele sich wiederholende Aufgaben? 147 00:08:14,630 --> 00:08:17,140 Wir wollen diesen Prozess so effizient wie möglich zu machen 148 00:08:17,140 --> 00:08:20,070 so dass sie nicht haben, um diese Art von Dingen zu tun. 149 00:08:20,070 --> 00:08:24,230 Wie für Anschaulichkeit, das heißt zum Beispiel, wenn ein Benutzer schaut meine Schnittstelle, 150 00:08:24,230 --> 00:08:27,240 ist es leicht für sie von Ort zu Ort zu bekommen? 151 00:08:27,240 --> 00:08:30,390 Ist es leicht für sie, um herauszufinden, was sie in mein Interface klicken müssen 152 00:08:30,390 --> 00:08:33,770 damit sie das Ziel zu erreichen oder eine Aufgabe, die sie erreichen wollen? 153 00:08:33,770 --> 00:08:37,520 >> Und schließlich, wie eine Person sagte drüben, ist die Zugänglichkeit sehr wichtig. 154 00:08:37,520 --> 00:08:39,640 [Male speaker] Es kommt, um die Zugänglichkeit für Dinge wie Vision, 155 00:08:39,640 --> 00:08:42,740 mag, wie ich eigentlich entwerfen etwas für jemanden, der blind ist? 156 00:08:42,740 --> 00:08:46,460 Oh. Für Menschen, die nicht sehen können, überhaupt, haben wir etwas namens Screenreadern. 157 00:08:46,460 --> 00:08:49,070 Was Sie tun sollten, ist, sollten Sie Ihre Website in einer Weise aufbauen 158 00:08:49,070 --> 00:08:52,020 dass zum Beispiel bestimmte Technologien wie wir es nennen - 159 00:08:52,020 --> 00:08:53,590 Es gibt viele Dinge jetzt. 160 00:08:53,590 --> 00:08:55,660 Ich denke, es gibt Screenreader genannt JAWS. 161 00:08:55,660 --> 00:08:58,410 Eine Menge von diesen Dingen verlassen sich auf das, was wir Bereich Regeln nennen 162 00:08:58,410 --> 00:09:02,010 um zu lesen an den Benutzer, was vorhanden ist, auf der Seite. 163 00:09:02,010 --> 00:09:05,480 Für diejenigen, die nicht sehen können, müssen Sie sicherstellen, dass diese Screenreader 164 00:09:05,480 --> 00:09:09,130 kann tatsächlich abholen den Inhalt auf der Seite und kann tatsächlich zeigen Sie Ihre Nutzer, 165 00:09:09,130 --> 00:09:13,630 Wenn Sie nicht sehen können, zumindest kann man noch verstehen, die Inhalte auf der Seite. 166 00:09:13,630 --> 00:09:16,190 Yeah. Okay. 167 00:09:16,190 --> 00:09:23,410 Genug geredet über gutes Design. Reden wir über schlechtes Design. 168 00:09:23,410 --> 00:09:25,220 Dies sind Dinge, die Sie nicht tun sollten. 169 00:09:25,220 --> 00:09:27,890 Kann mir jemand sagen über ihre Erfahrungen mit Craigslist 170 00:09:27,890 --> 00:09:32,190 und was sie denken, ist nicht so toll an diesem Design? 171 00:09:33,690 --> 00:09:36,430 Ja. >> [Schüler] Ich denke, es gibt zu viele Worte in einem Bereich. 172 00:09:36,430 --> 00:09:39,350 Zu viele Worte, nicht wahr? Völlig überwältigend. 173 00:09:39,350 --> 00:09:42,400 Sie kommen zu dieser Seite und du bist mit einem ganzen Bündel von Dingen hier begrüßt 174 00:09:42,400 --> 00:09:43,860 das könnte nicht einmal Ihnen wichtig sind. 175 00:09:43,860 --> 00:09:47,010 Zum Beispiel, Sie leben in einem Staat, der nicht mit diesem Buchstaben beginnt. 176 00:09:47,010 --> 00:09:48,690 Angenommen, Sie leben in Texas oder so etwas. 177 00:09:48,690 --> 00:09:53,790 >> Sie haben den ganzen Weg unten auf der Seite auf den Speicherort Sie sind auf sich zu blättern. 178 00:09:53,790 --> 00:10:00,320 Ich komme aus Boston, so lassen Sie mich in Massachusetts suchen. Wo ist Massachusetts? 179 00:10:00,320 --> 00:10:03,270 Oh, es ist hier genau richtig. Oh, es ist Boston. Okay. 180 00:10:03,270 --> 00:10:09,070 Lasst uns an der Boston suchen. [Gelächter] 181 00:10:09,070 --> 00:10:12,250 Ziemlich überwältigend, nicht wahr? 182 00:10:12,250 --> 00:10:16,400 Peinlich Dinge da drüben. [Gelächter] 183 00:10:17,320 --> 00:10:19,470 Sagen wir, ich bin auf der Suche irgendwo zu leben. 184 00:10:19,470 --> 00:10:24,130 Wie viele Menschen haben tatsächlich verwendet Craigslist? Tonnen von Ihnen. 185 00:10:24,130 --> 00:10:30,960 Es sind ziemlich schlechte Wege, dies zu betrachten, aber wir dies zu betrachten. 186 00:10:35,130 --> 00:10:38,970 Was ist der Unterschied zwischen img und pic? Kann mir jemand sagen? 187 00:10:41,350 --> 00:10:42,830 Es ist eigentlich kein Unterschied. 188 00:10:42,830 --> 00:10:47,710 Sie bedeuten genau dasselbe, aber sie haben unterschiedliche Bezeichnungen für sie aus irgendeinem Grund. 189 00:10:48,980 --> 00:10:53,560 Wenn ich auf hat Bild, passiert nichts auf der Seite. 190 00:10:53,560 --> 00:10:57,490 Ich habe eigentlich auf Suche klicken Sie erneut, dass etwas passiert. 191 00:10:57,490 --> 00:11:02,430 Was könnte eine bessere Design-Entscheidung, die dort geschehen könnte sein? 192 00:11:03,820 --> 00:11:08,030 Wenn ich auf diesen Filter Klick mich, ich wahrscheinlich wollen durch diese besondere Aktion filtern 193 00:11:08,030 --> 00:11:09,970 oder dass bestimmte Kategorie. 194 00:11:09,970 --> 00:11:14,450 So anstatt Suche erneut drücken, konnte ich nur automatisch die Filterung 195 00:11:14,450 --> 00:11:17,060 Art Google-Stil, wo sie es sofort. 196 00:11:17,060 --> 00:11:20,440 [Malan] Aber nicht bildet, wie wir gesehen haben, sie so weit zu physisch eingereicht werden 197 00:11:20,440 --> 00:11:23,170 indem Sie mindestens oder Klicken auf eine Schaltfläche eingeben? 198 00:11:23,170 --> 00:11:26,830 Als du sie gesehen habe, so weit, Sie haben tatsächlich klicken Sie auf Senden, um diese Dinge zu tun. 199 00:11:26,830 --> 00:11:30,090 >> Aber wie Tommy wird Sie in einer Sekunde zeigen, gibt es tatsächlich Möglichkeiten für Sie 200 00:11:30,090 --> 00:11:33,010 so dass, wenn Sie auf das Ding klicken Sie kann automatisch 201 00:11:33,010 --> 00:11:38,840 nennen wir eine AJAX-Anforderung und erhalten Daten zurück und filtern Sie Ihre Ergebnisse sofort. 202 00:11:38,840 --> 00:11:41,340 Es gibt Unmengen von Dingen, die falsch mit dieser Schnittstelle sind. 203 00:11:41,340 --> 00:11:43,530 [Malan] Können Sie für Cambridge suchen? 204 00:11:43,530 --> 00:11:47,030 Es ist etwas leicht anomale hier, wo Sie über Cambridge kümmern 205 00:11:47,030 --> 00:11:54,790 und doch Sie bekommen Westford, Spring Hill, West Newton und dergleichen. 206 00:11:54,790 --> 00:11:57,930 Wahrscheinlich nicht ideal. >> Wahrscheinlich nicht ideal. 207 00:11:57,930 --> 00:12:03,900 Wie könnte ich in der Lage sein, um die Erfahrung des Benutzers besser auf dieser bestimmten Seite? 208 00:12:03,900 --> 00:12:07,340 Ja. >> [Schüler] Anleitung. 209 00:12:07,340 --> 00:12:09,500 Okay. Anleitung in welcher Art von Sinn? 210 00:12:09,500 --> 00:12:14,630 [Schüler] Zum Beispiel, ein Ding zum ersten Mal Nutzer, die nicht einmal wissen, was Craigslist ist 211 00:12:14,630 --> 00:12:17,320 oder Sie nicht wissen, was Sie tun sollen. 212 00:12:17,320 --> 00:12:20,150 Right. So erklären, was Craigslist auf dieser Seite ist, ist wichtig. 213 00:12:20,150 --> 00:12:23,490 Wir können tatsächlich sagen, Nutzer, was diese Seite eigentlich für. 214 00:12:23,490 --> 00:12:27,090 Wenn ich nur zu Besuch bin dies, ich sehe eine ganze Reihe von Standorten. Ich weiß gar nicht, was sie bedeuten. 215 00:12:27,090 --> 00:12:29,730 Aber noch wichtiger ist, schaut an dieser Schnittstelle, 216 00:12:29,730 --> 00:12:35,530 Ich erinnere mich musste nach unten scrollen eine Tonne von Dingen, um eine bestimmte Gemeinschaft zu finden 217 00:12:35,530 --> 00:12:37,560 dass ich tatsächlich kümmerte zu diesem Thema. 218 00:12:37,560 --> 00:12:39,820 Was ist ein schneller Weg, ich tun könnte? Ja. 219 00:12:39,820 --> 00:12:43,290 [Schüler] unterteilen Sie diese in Ost-, West Regionen. >> Okay. 220 00:12:43,290 --> 00:12:47,460 Ich konnte sie in mehrere Kategorien, die mir helfen schneller bestimmen konnte unterteilen 221 00:12:47,460 --> 00:12:49,820 wie man zu diesem bestimmten Ort zu bekommen. 222 00:12:49,820 --> 00:12:54,510 [Schüler] Legen Sie eine Dropdown-Liste. >> Richtig. Okay. 223 00:12:54,510 --> 00:12:58,240 Ich könnte mit einem Drop-Down-Menü, weil wir einen festen Satz von Dingen haben 224 00:12:58,240 --> 00:13:00,100 und wir konnten sie in einem Drop-Down-Menü zeigen. 225 00:13:00,100 --> 00:13:02,240 Auf diese Weise dauert es nicht so viel Platz auf dem Bildschirm. 226 00:13:02,240 --> 00:13:05,630 Aber noch besser als das, was können wir tun? 227 00:13:05,630 --> 00:13:09,220 Ja. >> [Unverständlich Student Response] >> Kann man sagen, dass wieder? >> [Schüler] Suchfeld ein. 228 00:13:09,220 --> 00:13:11,260 Yeah, ein Suchfeld. Das ist toll. 229 00:13:11,260 --> 00:13:16,430 Was wir tatsächlich tun können, wenn wir zurück auf die Dias, Suchfeld suchen. 230 00:13:16,430 --> 00:13:21,520 Autocomplete. Sehr einfache Möglichkeit, durch die Ergebnisse, dass Sie wissen, suchen sich in einem Satz. 231 00:13:21,520 --> 00:13:25,980 Wenn ich tippen BO starten, zeigen, mir all die Ergebnisse, die BO in ihnen haben. 232 00:13:25,980 --> 00:13:29,030 Auf diese Weise kann ich sehr leicht finden insbesondere ein Ich möchte um zu gehen 233 00:13:29,030 --> 00:13:32,390 anstatt durch dieses wirklich große Liste blättern. 234 00:13:32,390 --> 00:13:37,450 >> Das sind alle Arten von wirklich niedrig hängenden Früchte, dass jemand, der Umsetzung Craigslist ist 235 00:13:37,450 --> 00:13:42,500 tatsächlich tun können, um die Erfahrung auf der Website viel besser für ihre bestimmten Benutzer zu machen. 236 00:13:42,500 --> 00:13:46,370 Okay. Genug geredet über schlechte Websites. 237 00:13:46,370 --> 00:13:49,410 Lassen Sie uns über Facebook zu reden. 238 00:13:50,880 --> 00:13:54,390 Wenn Facebook herauskam, und vor allem Facebook-Fotos, 239 00:13:54,390 --> 00:13:57,870 es gab viele andere Dienste an der Zeit, die genau das tun, kann die gleichen Dinge. 240 00:13:57,870 --> 00:14:00,740 Sie könnten Ihre Fotos in Alben organisieren. 241 00:14:00,740 --> 00:14:03,360 Was Sie tun können, ist könnte man sie in Gruppen zu organisieren. 242 00:14:03,360 --> 00:14:06,070 Man könnte sie nach Datum zu organisieren. Sie könnten alles tun, diese besonderen Dinge. 243 00:14:06,070 --> 00:14:11,710 Aber weiß jemand, was aus Facebook-Fotos an der Zeit war es freigegeben explodieren? 244 00:14:11,710 --> 00:14:15,080 Ja. >> [Student] Tags. >> Tags. Genau. 245 00:14:15,080 --> 00:14:21,300 Wir haben Milo hier, die unsere Hunde-Maskottchen mit dem CS50 Bandana ist. 246 00:14:21,300 --> 00:14:24,810 Sie können sehen, dass wir diese Tagging-Funktion in der Mitte haben. 247 00:14:24,810 --> 00:14:28,240 Und was hat Facebook Bilder so interessant aus Usability-Sicht 248 00:14:28,240 --> 00:14:34,130 ist, dass es tatsächlich Menschen erlaubt, über diese an ihre Freunde in ihren Fotos zu beteiligen. 249 00:14:34,130 --> 00:14:37,680 Für Facebook, da ihre Website ist insbesondere soziale und 250 00:14:37,680 --> 00:14:40,750 Es geht darum, diese Art der sozialen Atmosphäre. 251 00:14:40,750 --> 00:14:42,620 Das verbessert die Erfahrung von Fotos viel mehr 252 00:14:42,620 --> 00:14:46,390 weil sie tatsächlich beginnen könnte sagen: "Dies sind Verbindungen zwischen Menschen, 253 00:14:46,390 --> 00:14:49,220 und diese sind Fotos über Menschen, die Sie wirklich interessieren. " 254 00:14:49,220 --> 00:14:52,200 Ein Teil davon ist auch sort Narzissmus. 255 00:14:52,200 --> 00:14:54,980 Die Leute wollen in Fotos und dergleichen versehen werden. 256 00:14:54,980 --> 00:14:58,510 Während das ist nicht unbedingt eine gute menschliche Eigenschaft, 257 00:14:58,510 --> 00:15:01,910 zur gleichen Zeit ist es auf gutes Design Entscheidungen 258 00:15:01,910 --> 00:15:04,860 weil die Leute eigentlich egal über Dinge wie diese. 259 00:15:04,860 --> 00:15:07,190 Also das ist Facebook Fotos. 260 00:15:07,190 --> 00:15:09,800 >> Aber reden wir Facebook Allgemeinen. 261 00:15:09,800 --> 00:15:13,400 Ich bin sicher, viele Leute hier haben Meinungen über Facebook, 262 00:15:13,400 --> 00:15:16,430 beide gute Design-Entscheidungen und schlechte Design-Entscheidungen. 263 00:15:16,430 --> 00:15:20,270 Also lasst uns verhindern oder glücklich sein. 264 00:15:23,480 --> 00:15:26,450 Komm schon. Ich weiß, ihr alle Facebook benutzen. 265 00:15:26,450 --> 00:15:30,970 Jemand muss etwas Schlimmes zu sagen oder etwas Gutes zu sagen haben. Ja. 266 00:15:30,970 --> 00:15:35,060 [Schüler] In der News-Feed gibt es eine Menge Dinge, die ich nicht wirklich kümmern. 267 00:15:35,060 --> 00:15:37,740 Der Newsfeed zeigt zwar eine Menge Dinge, die Sie nicht über möglicherweise interessieren. 268 00:15:37,740 --> 00:15:41,660 Sie haben Freunde auf Facebook, die Sie nicht für 2 oder 3 Jahren erfüllt 269 00:15:41,660 --> 00:15:43,860 und Sie sehen ihre Nachrichten Ergebnisse Aufspringen in Ihrem News-Feed 270 00:15:43,860 --> 00:15:45,870 und Sie nicht wirklich darum kümmern. 271 00:15:45,870 --> 00:15:48,700 Facebook hat tatsächlich eine Anstrengung, um diese besser gemacht, 272 00:15:48,700 --> 00:15:53,150 und sie haben tatsächlich versucht, die Ergebnisse an der Spitze der News-Feed schieben wie der spät 273 00:15:53,150 --> 00:15:58,300 so dass Sie tatsächlich sehen die Dinge von Freunden, die für Sie oder Ihre enge Freunde sind. 274 00:15:58,300 --> 00:16:01,110 Sonst noch was? Ja. 275 00:16:01,110 --> 00:16:06,400 [Unverständlich Student Response] >> Kann man sagen, dass wieder? 276 00:16:06,400 --> 00:16:10,140 [Schüler] Die Anzeigen sind relativ unauffällig. >> In welchem ​​Sinn? 277 00:16:10,140 --> 00:16:16,370 [Unverständlich Studenten Antwort] Sie haben nicht Licht auf dem Bildschirm, wie Banner. 278 00:16:16,370 --> 00:16:17,760 Okay. Das ist gut. 279 00:16:17,760 --> 00:16:25,030 Wenn Sie das Internet erinnern aus den 90er Jahren - >> [Malan] Ich war dort. >> Er war da. [Gelächter] 280 00:16:25,030 --> 00:16:29,210 Vielleicht erinnern Sie sich blinkenden GIFs Hintergründen, sparkly Dinge, 281 00:16:29,210 --> 00:16:31,570 GeoCities Stil Art von Dingen. 282 00:16:31,570 --> 00:16:34,080 Das ist wirklich kein Beispiel für ein gutes Design 283 00:16:34,080 --> 00:16:36,690 weil es wirklich störend aus dem Inhalt. 284 00:16:36,690 --> 00:16:39,590 Die Yale Kunst-Website verwendet werden, um animierte GIFs als Hintergrund haben 285 00:16:39,590 --> 00:16:41,800 und man konnte nicht alles lesen auf der Seite, 286 00:16:41,800 --> 00:16:44,870 aber ich denke, wenn jemand tatsächlich mit ihnen gesprochen und jetzt ist es ein bisschen anders. 287 00:16:44,870 --> 00:16:48,940 [Malan] Es ist jetzt viel besser. >> Es ist jetzt viel besser, wie man sehen kann. >> [Malan] Oh yeah. 288 00:16:48,940 --> 00:16:56,020 Einfach toll, nur - Yeah. Okay. 289 00:16:56,020 --> 00:17:00,560 >> Ein Teil davon wird auch machen Ihre Seite möglicherweise sehr minimalistisch und sehr verständlich 290 00:17:00,560 --> 00:17:05,690 so Dinge auf der Seite Strömung in einer Weise, die sehr logisch ist und nicht in der Weise voneinander bekommen. 291 00:17:05,690 --> 00:17:11,849 Welche Arten von anderen Dinge sind gut über Facebook oder schlecht über Facebook? 292 00:17:11,849 --> 00:17:15,730 Lassen Sie uns einfach ein Design Gespräch hier. 293 00:17:19,470 --> 00:17:21,339 Oh. Wo? Yeah. 294 00:17:21,339 --> 00:17:25,640 [Schüler] Die neue Timeline-System ermöglicht es Ihnen, das Profil der Person über ihre Vergangenheit zu suchen. 295 00:17:25,640 --> 00:17:28,119 Ooh, Timeline. 296 00:17:28,119 --> 00:17:30,280 Timeline ist eine tolle Sache, weil es Ihnen stalk Ihre Freunde können 297 00:17:30,280 --> 00:17:33,300 zurück, wenn sie in der High School waren. 298 00:17:35,160 --> 00:17:38,060 Timeline ist gut, da Sie durch die Inhalte viel schneller zu filtern, 299 00:17:38,060 --> 00:17:41,500 es lässt Sie Dinge, die sonst genommen haben Sie eine wirklich lange Zeit, um herauszufinden 300 00:17:41,500 --> 00:17:45,840 nur Scrollen nach oben und unten, oben, oben, oben, oben, oben, wie wenn man in der Zeit zurück. 301 00:17:45,840 --> 00:17:48,910 Aber dann gibt es auch eine Art von Nachteil, dass in Bezug auf die User Experience. 302 00:17:48,910 --> 00:17:51,190 Was könnte das sein? 303 00:17:51,190 --> 00:17:56,780 Big Wort, das mit P-R beginnt. >> [Schüler] Datenschutz. >> Datenschutz, Recht? 304 00:17:56,780 --> 00:17:59,970 Datenschutz ist eine riesige User Experience Thema. 305 00:17:59,970 --> 00:18:07,190 Dies ist eines der Dinge, die ich am meisten hasse über Facebook jetzt. [Gelächter] 306 00:18:07,190 --> 00:18:09,000 [Malan] Wie mache ich jetzt. 307 00:18:09,000 --> 00:18:11,380 David wusste nicht, dass dies tatsächlich erst gestern passiert. 308 00:18:11,380 --> 00:18:14,560 So, jetzt weiß er, dass jedes Mal, wenn ich chatten ihm, dass ich weiß, dass er gewesen ist ignorierte mich. 309 00:18:14,560 --> 00:18:16,880 [Malan] Die peinliche Teil wurde ich tatsächlich ignorierte ihn, 310 00:18:16,880 --> 00:18:21,040 und ich wusste nicht, dass er wusste, dass ich ihn zu ignorieren. [Gelächter] 311 00:18:21,040 --> 00:18:24,030 Datenschutz ist ein riesiges Problem. 312 00:18:24,030 --> 00:18:28,670 Kann hier jemand mir sagen, was schlecht sein kann über Facebook Privatsphäre 313 00:18:28,670 --> 00:18:32,270 abgesehen von der Tatsache, dass sie Dinge tun, wie diese? 314 00:18:32,270 --> 00:18:37,240 Was ist es besonders schwer, mit Bezug auf Facebook Privatsphäre zu tun? 315 00:18:37,240 --> 00:18:40,340 Diese Art von ist ein führender Frage. 316 00:18:41,680 --> 00:18:43,930 Ja. >> [Schüler] Verstecken Sie Ihre Fotos von bestimmten Personen. 317 00:18:43,930 --> 00:18:46,170 Right. Genau, um Ihre Fotos von bestimmten Personen verbergen. 318 00:18:46,170 --> 00:18:51,290 Sie haben diese kleinen, kleinen Knopf in der rechten oberen, die Sie aktivieren die Privatsphäre eines Fotos können. 319 00:18:51,290 --> 00:18:56,360 Ihre Privatsphäre-Optionen sind sehr zwischen verschiedenen Arten von Menüs variiert. 320 00:18:56,360 --> 00:18:59,510 >> Sie haben viel besser über sie bekommen vor kurzem, aber es früher der Fall sein, 321 00:18:59,510 --> 00:19:04,870 dass, wenn Sie wollten Ihre Freunde aus sehen Fotos zu vermeiden, 322 00:19:04,870 --> 00:19:08,280 Sie müssten durch eine sehr komplizierte 5-Stufen-Prozess zu sein wie gehen, 323 00:19:08,280 --> 00:19:11,150 Lassen Sie mich auf diesen Link klicken, jetzt lassen Sie mich noch einmal auf, lassen Sie mich noch einmal auf, 324 00:19:11,150 --> 00:19:13,420 Lassen Sie mich festlegen, welche Menschen nicht sehen können meine Fotos. 325 00:19:13,420 --> 00:19:17,250 Das ist nicht besonders gut auf Facebook ist ein Teil 326 00:19:17,250 --> 00:19:20,530 weil so viel über User Experience ist tatsächlich geben ihnen die Freiheit 327 00:19:20,530 --> 00:19:22,460 zu kontrollieren, was die Leute sehen können. 328 00:19:22,460 --> 00:19:25,550 Wir nennen diesen Benutzer Kontrolle und Freiheit. 329 00:19:25,550 --> 00:19:31,090 Wenn Sie nicht lassen sind Ihre Benutzer tun, dass in einer Weise, die effizient und intuitiv zu bedienen ist, 330 00:19:31,090 --> 00:19:34,570 dann ist dein User Experience ist nicht wirklich toll. 331 00:19:34,570 --> 00:19:38,200  Würde euch gerne etwas über Facebook sagen? 332 00:19:38,700 --> 00:19:41,420 Wie kann ich das abstellen? 333 00:19:41,420 --> 00:19:46,290 [Ong] Sie können nicht deaktiviert werden, und das ist ein riesiges Usability Fehler auf dem Teil der Facebook. 334 00:19:46,290 --> 00:19:49,410 Diese Funktion - ich sah tatsächlich in sie gestern - 335 00:19:49,410 --> 00:19:53,940 es ist entweder, dass man es nicht oder es ist irgendwo sehr, sehr tief begraben 336 00:19:53,940 --> 00:19:58,050 in den Aussparungen der Facebook weil ich kann nicht herausfinden, wie diese Funktionalität überhaupt deaktivieren. 337 00:19:58,050 --> 00:20:00,400 [Malan] Aber manchmal sind diese Entscheidungen nicht offensichtlich 338 00:20:00,400 --> 00:20:03,890 weil du Jungs haben uns eine Menge nützlicher Feedback zu verschiedenen CS50-Anwendungen 339 00:20:03,890 --> 00:20:05,710 und Websites, dass der Kurs verwendet. 340 00:20:05,710 --> 00:20:10,260 Wir haben nicht alle diese Wünsche und Anregungen umgesetzt. 341 00:20:10,260 --> 00:20:14,550 >> Teil davon ist für das Erhalten so viele Anfragen, dass es eine Funktion der Zeit ist, 342 00:20:14,550 --> 00:20:17,070 aber manchmal haben wir einfach eine bewusste Entscheidung, wie, 343 00:20:17,070 --> 00:20:19,830 "Danke für die Anregung, aber wir nicht einverstanden sind." 344 00:20:19,830 --> 00:20:24,350 So, wie Sie tatsächlich entscheiden, was Sie tun sollten, wenn Sie denken Ihre Benutzer sollten Sie etwas tun 345 00:20:24,350 --> 00:20:28,110 auch wenn Sie nicht unbedingt? 346 00:20:28,110 --> 00:20:32,360 Es ist eine feine Balance zwischen tatsächlich zu hören, was Ihre Kunden sagen 347 00:20:32,360 --> 00:20:35,840 und tatsächlich mit einer Art von Linie, wo Sie sagen, 348 00:20:35,840 --> 00:20:37,750 "Wir gehen nicht zu tun, was diese Benutzer sagen." 349 00:20:37,750 --> 00:20:42,520 Und vor allem, ich glaube, es war ein Zitat von Henry Ford, der diese fasst ziemlich gut. 350 00:20:42,520 --> 00:20:47,130 "Wenn ich die Menschen gefragt hätte, was sie wollten, hätten sie gesagt, sie wollten schnellere Pferde." 351 00:20:47,130 --> 00:20:51,840 Kann mir jemand von necken auseinander, was das Zitat wirklich bedeutet sortieren? 352 00:20:51,840 --> 00:20:56,060 Es ist nicht nur, dass die Nutzer wissen, was sie wollen, 353 00:20:56,060 --> 00:20:59,180 aber es ist mehr, dass - 354 00:20:59,180 --> 00:21:02,720 [Schüler] Sie wissen nicht, was möglich ist. 355 00:21:02,720 --> 00:21:06,140 Zum Teil sind sie nicht wissen, was möglich ist. 356 00:21:07,880 --> 00:21:11,440 Tease, dass neben ein bisschen mehr. Was meinst du damit? 357 00:21:11,440 --> 00:21:21,340 [Unverständlich Studenten Antwort] 358 00:21:21,340 --> 00:21:25,770 Das ist gut. Was ich denke, dass wir versuchen, hier zu sagen ist, dass die Menschen wissen, was sie wollen. 359 00:21:25,770 --> 00:21:28,050 Sie wollen schnellere Pferde. 360 00:21:28,050 --> 00:21:29,840 Was sie wirklich wollen, ist die Fähigkeit, sich schneller zu bewegen, 361 00:21:29,840 --> 00:21:32,310 aber sie wissen nicht wirklich, das Medium, mit dem das zu erreichen. 362 00:21:32,310 --> 00:21:36,330 Wenn Sie kommen, um Ihre Benutzer und Ihre Benutzer Ihnen etwas sagen 363 00:21:36,330 --> 00:21:39,700 und sie sagen: "Wir wollen diese Funktionen und diese Funktionen und diese Funktionen" 364 00:21:39,700 --> 00:21:42,650 Sie wollen nicht unbedingt zu denken: "Lass mich gehen Sie vor 365 00:21:42,650 --> 00:21:44,720 "Und das umzusetzen, was sie explizit sagen," 366 00:21:44,720 --> 00:21:48,610 aber was Sie wollen zu denken ist, "Welche Art von Ideen kann ich aus, dass zu bekommen?" 367 00:21:48,610 --> 00:21:50,450 Was wollen sie eigentlich? 368 00:21:50,450 --> 00:21:55,560 >> Und von dort, was Sie tun können, ist zu entwerfen etwas, das diese Anforderungen erfüllt 369 00:21:55,560 --> 00:22:00,340 aber nicht notwendigerweise in der Weise, dass der Benutzer es befriedigt werden erwartet. 370 00:22:00,340 --> 00:22:03,830 So etwas wie letzten Projekte, in sehr real, 371 00:22:03,830 --> 00:22:07,900 was ist eine nützliche Heuristik, wenn es darum geht, etwas Besseres kommt, 372 00:22:07,900 --> 00:22:10,630 vor allem, wenn der Designer hat diese Arroganz über ihn 373 00:22:10,630 --> 00:22:14,360 wobei Sie Art wissen, was das Beste ist, könnten Sie Eingaben von Benutzern zu nehmen, 374 00:22:14,360 --> 00:22:16,580 aber woher wissen Sie eigentlich darum, dass das Feedback gehen? 375 00:22:16,580 --> 00:22:21,610 In letzten Projekte ganz konkret, produziert, was optimale Ergebnisse hier? 376 00:22:21,610 --> 00:22:25,030 Was erzeugt optimale Ergebnisse - und ich werde über diese in einem zweiten zu gehen - 377 00:22:25,030 --> 00:22:29,190 Dieses Verfahren ist für die Entwicklung und Erprobung und dann durchlaufen. 378 00:22:29,190 --> 00:22:32,020 Was ich damit meine Prüfung ist in der Regel, wenn Sie etwas entwerfen 379 00:22:32,020 --> 00:22:36,970 Sie denken, es ist ziemlich gut, wie: "Ich bin so ein großer Designer. Jeder wird es lieben." 380 00:22:36,970 --> 00:22:41,600 Und dann legt man es da draußen und die Leute nicht wirklich, wie es aus irgendeinem Grund. 381 00:22:41,600 --> 00:22:46,820 Was Sie tun müssen, ist, müssen Sie die Teile der Dinge, die Menschen tun, wie nehmen 382 00:22:46,820 --> 00:22:49,180 und Umbau der Dinge, die Menschen nicht mögen. 383 00:22:49,180 --> 00:22:53,080 Es klingt wie eine sehr offensichtliche Prozess, aber dieser Prozess ständig Iteration 384 00:22:53,080 --> 00:22:55,980 auf, was Sie bereits errichtet ist ein Prozess, der Ihnen hilft 385 00:22:55,980 --> 00:22:59,730 nicht nur verfeinern, Ihr eigenes Design Fähigkeiten, sondern hilft Ihnen auch zu verfeinern das Design 386 00:22:59,730 --> 00:23:03,790 so dass die Menschen tatsächlich zu schätzen Ihr Produkt sogar mehr als zuvor. 387 00:23:03,790 --> 00:23:07,390 >> Ich gehe über mehr konkrete Beispiele, was man eigentlich tun. 388 00:23:07,390 --> 00:23:11,390 Als eine Art letzte Beispiel für ein Produkt, lasst uns auf KAYAK aussehen. 389 00:23:11,390 --> 00:23:14,970 KAYAK als es herauskam war sehr, sehr beliebt. 390 00:23:14,970 --> 00:23:18,760 Kann mir jemand raten, warum? 391 00:23:18,760 --> 00:23:20,950 Was sind die möglichen Dinge, die Sie gerne über diese, wenn Sie es benutzt haben 392 00:23:20,950 --> 00:23:23,990 oder was sind die möglichen Dinge, die Sie nicht mögen? 393 00:23:23,990 --> 00:23:31,590 Ja. >> [Unverständlich Student Response] >> Okay. 394 00:23:31,590 --> 00:23:34,730 Das ist ein Teil davon ist die Vermietung der Benutzer eine Abfrage, die mehr expansive ist 395 00:23:34,730 --> 00:23:38,150 als eine sehr restriktive ein wie: "Du musst deine Startdatum holen 396 00:23:38,150 --> 00:23:39,810 "Und Sie müssen Ihre Enddatum zu wählen." 397 00:23:39,810 --> 00:23:44,910 In der Tat, es lässt Sie flexibel zu sein, und es gibt Ihnen alle der Flüge in diesem Bereich. 398 00:23:44,910 --> 00:23:46,730 Sonst noch was? 399 00:23:46,730 --> 00:23:50,530 [Schüler] Dazu gehören die Gebühren im Preis enthalten. 400 00:23:50,530 --> 00:23:53,330 Sie verstehen sich die Gebühren im Preis enthalten. 401 00:23:53,330 --> 00:23:56,720 Die Steuern und die Dinge tatsächlich geradeaus in diesem Preis in der oberen linken 402 00:23:56,720 --> 00:24:00,710 so dass Sie nicht in das Denken getäuscht, dass Sie tatsächlich zahlen für einen $ 240 Flüge 403 00:24:00,710 --> 00:24:03,280 wenn es wirklich 330 $. 404 00:24:03,280 --> 00:24:06,200 Sonst noch was? Ja. 405 00:24:06,200 --> 00:24:10,140 [Unverständlich Studenten Antwort] 406 00:24:10,140 --> 00:24:14,610 Ich bin mir nicht sicher, ob sie lassen Sie eigentlich tun. 407 00:24:14,610 --> 00:24:18,310 Ich könnte falsch sein. 408 00:24:18,310 --> 00:24:23,360 Das könnte eine interessante Sache sein, wenn man mehr Gewicht auf besondere Filter setzen wollen 409 00:24:23,360 --> 00:24:27,000 so dass sie Ergebnisse in Bezug auf diesen Filter an die Spitze schieben. 410 00:24:27,000 --> 00:24:31,920 Aber kann mir jemand sagen, was ist so besonders an diesem linken Seite? 411 00:24:31,920 --> 00:24:39,540 Wie haben Sie traditionell schauen einen Flug auf einer Internet-Dienst, bevor das? 412 00:24:41,600 --> 00:24:44,650 >> Ja. >> [Unverständlich Student Response] >> Kann man sagen, dass - 413 00:24:44,650 --> 00:24:47,530 [Schüler] Jede Fluggesellschaft. >> Ja. Jede Fluggesellschaft hat ihre eigene Website. 414 00:24:47,530 --> 00:24:50,110 Dies festigt Dinge. Und? 415 00:24:50,110 --> 00:24:52,190 [Schüler] Du weißt genau, wann du gehst. 416 00:24:52,190 --> 00:24:54,460 Du weißt genau, was Zeit du gehst, 417 00:24:54,460 --> 00:24:59,380 sondern an den Filtern insbesondere verwandt. 418 00:25:00,710 --> 00:25:03,540 Lassen Sie mich hochzuziehen KAYAK. 419 00:25:11,490 --> 00:25:14,020 Oh Gott, Pop-ups. Bad User Experience. 420 00:25:14,020 --> 00:25:17,230 Was passiert, wenn ich diesen Schieberegler zu bewegen? 421 00:25:17,230 --> 00:25:21,010 [Schüler] Automatische Updates. >> [Ong] Automatische Updates. 422 00:25:21,010 --> 00:25:23,440 Das ist etwas, was sehr wichtig ist. 423 00:25:23,440 --> 00:25:25,380 Bevor dies, wenn Sie schauen einen Flug wollten, 424 00:25:25,380 --> 00:25:28,410 Sie mussten in Ihrer Eingabe Lage, Ihre Ausgabe Lage, drücken Sie Suchen setzen, 425 00:25:28,410 --> 00:25:31,190 es wäre zu verarbeiten, dass und zeigen Sie Ihre Ergebnisse. 426 00:25:31,190 --> 00:25:34,120 Wenn Sie Ihre Abfrage ändern wollte, müsste man die Taste zweimal zurück, 427 00:25:34,120 --> 00:25:39,770 Geben Sie in einer neuen Abfrage von Grund auf neu, und dann tun Sie es immer und immer wieder. 428 00:25:39,770 --> 00:25:43,910 Die nette Sache über so etwas wie dieses ist es verwendet eine sehr [unverständlich], was in der Mitte. 429 00:25:43,910 --> 00:25:46,230 Wenn Sie etwas tun, schießt es aus eine Anfrage 430 00:25:46,230 --> 00:25:48,420 und es gibt Sie alle Ergebnisse sofort. 431 00:25:48,420 --> 00:25:51,680 Diese Art der unmittelbare Rückmeldung ist etwas, was KAYAK wild populär gemacht 432 00:25:51,680 --> 00:25:55,910 weil es einfach für mich nur zu ändern meine Abfrage 433 00:25:55,910 --> 00:25:58,890 und herauszufinden, die Dinge, die um einen bestimmten Bereich liegen 434 00:25:58,890 --> 00:26:01,950 ohne hin und her gehen, vor und zurück hin und her. 435 00:26:01,950 --> 00:26:05,200 So sind alle möglichen Dinge, die Sie wollen, wann Sie die Gestaltung Ihrer Website denken. 436 00:26:05,200 --> 00:26:08,930 Wie kann ich es sehr effizient für meine Nutzer durchlaufen, um was auch immer sie arbeiten 437 00:26:08,930 --> 00:26:13,010 und zu ihrem Endziel so schnell wie möglich zu bekommen? 438 00:26:13,010 --> 00:26:16,430 [Malan] Und Joseph Punkt früher über Benutzer nicht unbedingt wissen, was sie wollen, 439 00:26:16,430 --> 00:26:18,640 auf das, was euch jetzt über HTML 440 00:26:18,640 --> 00:26:22,780 und Sie haben Checkboxen, Radio-Buttons, Auswahlmenüs, Eingabefelder und dergleichen, 441 00:26:22,780 --> 00:26:26,140 Wie würden Sie umsetzen den Begriff der Kommissionierung eine Startzeit für einen Flug? 442 00:26:26,140 --> 00:26:30,030 >> Welche von diesen verschiedenen UI-Mechanismen würden Sie nutzen? 443 00:26:30,030 --> 00:26:34,100 Wenn Sie nur wissen, wie viel HTML, bevor gelehrt wurde 444 00:26:34,100 --> 00:26:39,070 und Sie wissen, sind die Eingänge Radio-Buttons, Checkboxen, Dropdown-Menüs, und Eingabefeld 445 00:26:39,070 --> 00:26:43,320 was wäre Ihre natürliche Wahl gewesen für die Kommissionierung Terminen gewesen? 446 00:26:43,320 --> 00:26:48,670 [Schüler] Input. >> Input. Oder vielleicht sogar ein Drop-Down mit allen Terminen, nicht wahr? 447 00:26:48,670 --> 00:26:53,170 So mit komplexeren UI-Mechanismen, wie dies auf der linken Seite, die Sie implementieren können, 448 00:26:53,170 --> 00:26:55,500 Sie können diesen Prozess viel intuitiver mit einem Schieberegler 449 00:26:55,500 --> 00:27:01,020 denn die Zeit ist kontinuierlich, und die Menschen in der Regel nicht daran zu denken in Bezug auf diskrete Stücke. 450 00:27:01,020 --> 00:27:04,950 Gut. Letzte Sache. 451 00:27:04,950 --> 00:27:07,370 Ten Usability-Heuristiken. 452 00:27:07,370 --> 00:27:10,820 All die Dinge, die wir darüber gesprochen wahrscheinlich unter eine dieser Kategorien fallen. 453 00:27:10,820 --> 00:27:14,420 Wenn man auf diesen Link, die die Websites online gepostet werden, 454 00:27:14,420 --> 00:27:18,900 Sie tatsächlich in der Lage sein, wie Sie das Design Ihrer Website, sollten Sie diese Heuristiken im Hinterkopf 455 00:27:18,900 --> 00:27:21,330 und diese Faustregeln. 456 00:27:21,330 --> 00:27:26,610 Für Ihre Projekte, was ich schlage vor, Sie tun, um zu entwerfen Ihre Anwendung besser 457 00:27:26,610 --> 00:27:28,850 ist Papier-Prototyping zuerst tun. 458 00:27:28,850 --> 00:27:32,150 Wenn Sie über Ihre Anwendung zu denken, sehr schnell skizzieren, was Sie es aussehen soll 459 00:27:32,150 --> 00:27:36,230 und sicherzustellen, dass alle Kästen werden in einer Weise, die sehr intuitive dem Benutzer zu bedienen ist angeordnet 460 00:27:36,230 --> 00:27:39,820 und sogar zeigen diese Papier-Prototypen an Ihre Freunde und starten Fokusgruppen. 461 00:27:39,820 --> 00:27:44,230 Nehmen Sie einfach 2 oder 3 Leute zusammen und bitten Sie sie, sich nur auf diesen Papier-Prototypen tippen, 462 00:27:44,230 --> 00:27:47,650 und zeigen ihnen neue Screens zu sehen, ob sie verstehen wirklich, was los ist. 463 00:27:47,650 --> 00:27:50,680 >> Was möchten Sie tun müssen, ist ihnen eine Aufgabe, zu motivieren, diese Aufgabe, 464 00:27:50,680 --> 00:27:53,270 und nur ihnen die App und lassen Sie es verwenden. 465 00:27:53,270 --> 00:27:56,530 Geben Sie nicht auf ihnen Anweisungen darüber hinaus. 466 00:27:56,530 --> 00:28:00,920 Sie wollen tatsächlich ließ sie mit Ihrer Anwendung interagieren in einer Weise, die Sie sehen können 467 00:28:00,920 --> 00:28:03,870 wie sie es verwenden, wenn Sie nicht neben ihnen. 468 00:28:03,870 --> 00:28:05,250 Und das ist sehr wichtig. 469 00:28:05,250 --> 00:28:08,780 Das wird Ihnen viele Erkenntnisse wie die Menschen die Fortbewegung bestimmte Dinge sind 470 00:28:08,780 --> 00:28:10,560 in einer Weise, dass ich nicht die Absicht hatte sie? 471 00:28:10,560 --> 00:28:14,680 Sind sie mit bestimmten UI-Mechanismen auf dem Bildschirm 472 00:28:14,680 --> 00:28:17,490 in einer Weise, ist eine Art hacky? 473 00:28:17,490 --> 00:28:22,020 Ich habe nicht die Absicht, für sie zu tun, um es auf diese Weise. 474 00:28:22,020 --> 00:28:23,940 Und wenn du damit fertig, was willst du tun? 475 00:28:23,940 --> 00:28:26,010 Ihr Design Felsen, nicht wahr? 476 00:28:26,010 --> 00:28:29,600 Was Sie tun möchten, ist Sie zu entwickeln und dann diesen Prozess immer wieder. 477 00:28:29,600 --> 00:28:32,110 So zeigen Sie sie an Freunde, wenn Sie es entwickelt haben, testen, 478 00:28:32,110 --> 00:28:36,630 entwickeln, zu testen, zu entwickeln, zu testen, durchlaufen, weiter und weiter und weiter. 479 00:28:36,630 --> 00:28:39,720 Design ist ein sehr iterativen Prozess in diesem Sinne. 480 00:28:39,720 --> 00:28:43,280 Sie haben tatsächlich etwas zu bauen und dann erkennen, Dinge über sie 481 00:28:43,280 --> 00:28:46,520 dass Sie nicht vor zu realisieren und gehen Sie zurück und verbessern daraus. 482 00:28:46,520 --> 00:28:50,890 Jetzt, da für die Entwicklung Teil ist das, was Tommy wird Ihnen zeigen, nach der Pause 483 00:28:50,890 --> 00:28:53,220 und wie Sie vielleicht in der Lage, so etwas wie autocomplete umsetzen 484 00:28:53,220 --> 00:28:56,610 in einer Weise, die relativ einfach ist. 485 00:28:57,440 --> 00:28:59,550 [Malan] Als Tommy stellt hier eine Frage dann. 486 00:28:59,550 --> 00:29:03,780 Viele der frühesten Webseiten - und wenn Joseph sagte 1990er Jahre Stil Website, 487 00:29:03,780 --> 00:29:07,640 war es Implementierungen, in denen, wenn man wollte, um eine Startzeit wählen und eine Endzeit, 488 00:29:07,640 --> 00:29:10,380 ehrlich gesagt, wieder in den Tag und sogar auf einigen Websites heute 489 00:29:10,380 --> 00:29:13,220 so, wie Sie dies tun, ist holen Sie eine Stunde aus einer Drop-down, 490 00:29:13,220 --> 00:29:15,910 Sie wählen Minute aus einem Drop-Down-, vielleicht Sie AM, PM, 491 00:29:15,910 --> 00:29:17,440 Und dann musst du, dass 3 weitere Male. 492 00:29:17,440 --> 00:29:19,920 Und so mit 6 Klicks und vielleicht einigen Blättern 493 00:29:19,920 --> 00:29:24,000 Ihre Benutzer können tatsächlich bieten irgendeine Art von Datum und / oder Uhrzeit-Bereich in diesem Sinne. 494 00:29:24,000 --> 00:29:27,920 >> Also auf jeden Fall suboptimal und doch bisher haben wir keine Ausdrucksmöglichkeiten gesehen 495 00:29:27,920 --> 00:29:30,330 in einer der Sprachen haben wir betrachtet, etwas sexier zu tun 496 00:29:30,330 --> 00:29:32,620 wie diese Schieber Startzeit und die Endzeit. 497 00:29:32,620 --> 00:29:36,290 Aber wenn Sie denken zurück zur Woche 0, wenn wir über Scratch gesprochen, 498 00:29:36,290 --> 00:29:39,080 auch dort gab es nicht Widgets, habe gerade einige Dinge. 499 00:29:39,080 --> 00:29:42,700 Du bist wirklich gerade diese Grundlagen wie Schleifen und Bedingungen und dergleichen. 500 00:29:42,700 --> 00:29:46,910 So Art nur denken sehr abstrakt jetzt unabhängig von den Angaben von HTML, 501 00:29:46,910 --> 00:29:51,260 , was wirklich los ist mit so etwas wie dieses Start-und Endzeit Schieberegler? 502 00:29:51,260 --> 00:29:54,960 Wenn ich meine Maus und ich auf dem kleinen Karotten Symbol klicken Sie auf der linken Seite 503 00:29:54,960 --> 00:29:59,220 und beginnen Sie, programmatisch, was wollen Sie in der Lage sein zu implementieren 504 00:29:59,220 --> 00:30:01,000 um das zu erreichen? 505 00:30:01,000 --> 00:30:04,920 Welche Fragen, was Boolean Ausdrücke, die Sie wollen in der Lage sein, zu fragen? 506 00:30:04,920 --> 00:30:06,930 Was ist wirklich los? Sammy? 507 00:30:06,930 --> 00:30:10,080 [Schüler] Wo ist die Position des Cursors? >> Gut. Wo ist die Position des Cursors? 508 00:30:10,080 --> 00:30:11,970 Das war etwas, was wir brauchten, um auszudrücken zurück in Scratch, 509 00:30:11,970 --> 00:30:14,690 ob es vor Ort oder auch die Farbe oder dergleichen basieren. 510 00:30:14,690 --> 00:30:18,410 Man könnte noch so kurz an am Montag gab es all diese Dinge genannt Veranstaltungen 511 00:30:18,410 --> 00:30:22,370 in der Welt des Web, und so gibt es Dinge wie onclick und onkeypress 512 00:30:22,370 --> 00:30:25,960 und onkeyup und onmouseover und onmouseout. 513 00:30:25,960 --> 00:30:29,130 So klar, dass auch diese Dinge, die wir schon immer unter der Web erteilt 514 00:30:29,130 --> 00:30:32,190 mit Seiten wie Facebook und Google Mail, auch wenn Sie keine Ahnung haben 515 00:30:32,190 --> 00:30:34,890 wie Sie würde möglicherweise zu implementieren, denn es gibt nichts, auch, wie es in der Vorlesung 516 00:30:34,890 --> 00:30:38,570 oder Problem Set 7 erkennen, dass mit diesen exakt die gleichen Grundlagen, 517 00:30:38,570 --> 00:30:41,090 mit HTTP-Parametern und GET und POST, 518 00:30:41,090 --> 00:30:44,010 mit den grundlegenden HTML-Eingänge, die wir betrachtet bisher 519 00:30:44,010 --> 00:30:47,690 und in einem Augenblick mit den programmatischen Mechanismen, die Tommys vor der Einführung 520 00:30:47,690 --> 00:30:51,300 können Sie damit beginnen, sich selbst auszudrücken wie du gerade in Woche 0 hat 521 00:30:51,300 --> 00:30:53,800 durch sehr intuitiv per Drag & Drop. 522 00:30:53,800 --> 00:30:58,950 >> Also mit dieser sagte Tommy MacWilliam und einige neue Puzzleteile für uns Web. 523 00:30:58,950 --> 00:31:03,450 Gut. Mein Name ist Tommy und ich werde über JavaScript zu sprechen. 524 00:31:03,450 --> 00:31:07,150 Just a Disclaimer: Ich bin der Meinung, dass JavaScript die beste Programmiersprache ist 525 00:31:07,150 --> 00:31:09,010 in der ganzen ganzen Welt. 526 00:31:09,010 --> 00:31:11,940 Es gibt viele Menschen, die mit mir nicht einverstanden, aber es ist einfach unglaublich. 527 00:31:11,940 --> 00:31:16,330 Wenn Sie zurück zu C, wenn Sie C für eine andere Klasse oder einigen anderen Sprachen zu schreiben, 528 00:31:16,330 --> 00:31:19,780 es ist nur wirklich frustrierend in all den Low-Level-Details, die Sie haben zu verzetteln in. 529 00:31:19,780 --> 00:31:23,050 Also, wenn Sie jemals das Gefühl traurig darüber, wie ärgerlich C zu schreiben, 530 00:31:23,050 --> 00:31:25,130 gehen Sie einfach zurück, schreiben etwas JavaScript. Es ist Nirvana. 531 00:31:25,130 --> 00:31:27,980 Sie fühlen sich viel besser über Ihren schlechten Tag. 532 00:31:27,980 --> 00:31:31,900 Ein großer Teil der Magie von JavaScript kommt von seiner Fähigkeit, Dinge zu manipulieren 533 00:31:31,900 --> 00:31:33,730 das bereits auf der Seite. 534 00:31:33,730 --> 00:31:38,520 Wenn wir unsere PHP Script geschrieben hat, wurden sie auf dem Server ausgeführt, 535 00:31:38,520 --> 00:31:42,270 und schließlich, dass PHP Skript wahrscheinlich ausgeben einige HTML. 536 00:31:42,270 --> 00:31:45,860 Das HTML wurde an den Client gesendet, und dann das war es. 537 00:31:45,860 --> 00:31:50,180 Wenn PHP wollte eine Schaltfläche zu einer Seite hinzuzufügen, zum Beispiel, kann es nicht wirklich tun. 538 00:31:50,180 --> 00:31:54,350 Es müsste eine ganz neue HTML-Datei zu machen und senden, dass an den Browser. 539 00:31:54,350 --> 00:31:57,840 Mit JavaScript wir wissen, dass wir die Dinge zu aktualisieren, während sie bereits auf der Seite sind, 540 00:31:57,840 --> 00:32:00,840 und aus diesem Grund können wir viel mehr eine sofortige Rückmeldung, 541 00:32:00,840 --> 00:32:06,150 was wirklich zur Verbesserung der Benutzerfreundlichkeit auf unserer Website. 542 00:32:06,150 --> 00:32:09,330 Nur eine kurze Zusammenfassung der JavaScript-Selektoren. 543 00:32:09,330 --> 00:32:11,590 Wir wissen, dass, wenn wir eine HTML-Seite downloaden, 544 00:32:11,590 --> 00:32:13,890 das wird sich in der DOM dargestellt werden. 545 00:32:13,890 --> 00:32:19,340 >> Der DOM erinnere, ist gerade diese großen Baum, wo die Elemente in diesem großen Hierarchie verbunden sind. 546 00:32:19,340 --> 00:32:21,810 Wenn wir mit Datenbanken gearbeitet pset 7, 547 00:32:21,810 --> 00:32:26,280 eines der ersten Dinge, die wir brauchten, um Know-how zu tun war die Datenbank abfragen. 548 00:32:26,280 --> 00:32:29,060 Wir haben diese großen Benutzer-Tabelle, und manchmal wollen wir nur sagen, 549 00:32:29,060 --> 00:32:33,260 "Ich will nur einige dieser Nutzer, die einige Bedingungen entsprechen." 550 00:32:33,260 --> 00:32:36,020 Ebenso, wenn wir die DOM haben wir müssen irgendwie abzufragen es. 551 00:32:36,020 --> 00:32:39,490 Wir brauchen eine Art zu sagen: "Ich will alle Tasten, die wie folgt aussehen 552 00:32:39,490 --> 00:32:41,860 "Oder alle Bilder auf der Seite." 553 00:32:41,860 --> 00:32:44,330 Und diese Selektoren erlauben uns, das zu tun. 554 00:32:44,330 --> 00:32:45,690 Also nur eine kurze Zusammenfassung. 555 00:32:45,690 --> 00:32:50,770 Das erste hier, diese # unterbreiten, was ist das los zu wählen? Erinnert sich noch jemand? 556 00:32:50,770 --> 00:32:54,880 [Unverständlich Student Response] >> Ja, genau. 557 00:32:54,880 --> 00:32:59,510 Das wird ein Element auf der Seite, die ID vorlegen muss wählen. 558 00:32:59,510 --> 00:33:03,470 Und damit Hash-Tag, sagt dieser Selektor wird mit IDs arbeiten. 559 00:33:03,470 --> 00:33:07,630 Wie wäre es mit der zweiten, dies. Zentriert wird, was das auswählen? 560 00:33:11,360 --> 00:33:15,180 Yeah. >> [Student] Klasse. >> Genau. Dies wird nun durch Klasse auszuwählen. 561 00:33:15,180 --> 00:33:18,840 Der Unterschied zwischen ID und Klasse hier in der Regel die ID muss eindeutig sein 562 00:33:18,840 --> 00:33:20,820 in welchem ​​Raum Sie suchen vorbei. 563 00:33:20,820 --> 00:33:23,080 Also, wenn Sie waren auf der Suche über eine ganze Web-Seite, 564 00:33:23,080 --> 00:33:27,740 Sie sollten wirklich nur 1 Element mit dem gewissen ID, so dass in diesem Fall einreichen. 565 00:33:27,740 --> 00:33:31,330 Mit Klassen, auf der anderen Seite, kann es mehr als ein Element auf der gleichen Seite 566 00:33:31,330 --> 00:33:33,130 mit der gleichen Klasse. 567 00:33:33,130 --> 00:33:36,580 Dies könnte zu sagen Ich will alles, was auf der Seite zentriert ist wählen Sie nützliche 568 00:33:36,580 --> 00:33:38,450 anstatt nur 1 Sache. 569 00:33:38,450 --> 00:33:40,310 >> Und schließlich ist das letzte hier ein wenig komplizierter, 570 00:33:40,310 --> 00:33:43,890 aber was soll das noch aus dem DOM wählen? 571 00:33:46,650 --> 00:33:48,810 [Unverständlich Student Response] >> Was ist das? 572 00:33:48,810 --> 00:33:53,250 [Schüler] Alles, was ein Tag ist. >> Wir haben 2 Teile hier. 573 00:33:53,250 --> 00:33:58,070 Der zweite Teil wird sagen, ich möchte diese Tags mit einem Tag der Eingang zu wählen, 574 00:33:58,070 --> 00:34:00,730 so jedes Element, das ein Input-Tag ist. 575 00:34:00,730 --> 00:34:03,080 Aber ich will nicht wählen Sie einfach alle Eingänge 576 00:34:03,080 --> 00:34:05,170 weil etwas wie ein Submit-Button könnte ein eingegeben werden 577 00:34:05,170 --> 00:34:08,409 und so etwas wie ein Textfeld könnte ein Eingang sein. 578 00:34:08,409 --> 00:34:11,909 Also mit diesen eckigen Klammern ich sage ich will nur diejenigen Elemente auswählen 579 00:34:11,909 --> 00:34:14,110 , dass sind vom Typ Text. 580 00:34:14,110 --> 00:34:17,400 Irgendwo in meinem HTML tag Ich habe ein Attribut namens Typ, 581 00:34:17,400 --> 00:34:19,750 und der Wert dieses Attributs muss Text sein. 582 00:34:19,750 --> 00:34:21,340 So wie über diesem ersten Teil hier? 583 00:34:21,340 --> 00:34:25,489 Das erste Wort dieses Selektors Form ist dann ein Leerzeichen und dann wird dieser Eingang Teil haben. 584 00:34:25,489 --> 00:34:29,620 Was bedeutet, dass zu tun, indem Sie das Formular vor ihr? 585 00:34:33,409 --> 00:34:35,860 Dies wird im Wesentlichen beschränken unsere Abfrage. 586 00:34:35,860 --> 00:34:38,510 Es könnte sein, dass wir einige Eingaben auf der Seite haben werden 587 00:34:38,510 --> 00:34:41,080 die nicht Nachfahren eines Formulars. 588 00:34:41,080 --> 00:34:46,150 Was wird dies tun, ist dies sagen ich will nur die Eingangs-Tags, die irgendwo über ihnen 589 00:34:46,150 --> 00:34:49,030 Einige übergeordnete Element eines Formulars. 590 00:34:49,030 --> 00:34:52,100 Und so auf diese Weise können wir diese weitere hierarchische Abfragen 591 00:34:52,100 --> 00:34:55,000 so dass wir nicht einfach alles passend eine bestimmte Wähler wählen. 592 00:34:55,000 --> 00:35:00,760 Wir können Art von Grenze des Geltungsbereichs dieser Abfrage auf etwas anderes. 593 00:35:00,760 --> 00:35:04,000 So, jetzt wissen wir, wie die Elemente auf der Seite auszuwählen, 594 00:35:04,000 --> 00:35:06,780 reden wir ein bisschen über AJAX. 595 00:35:06,780 --> 00:35:12,270 AJAX ist ein noch sehr trendy Abkürzung für Asynchronous JavaScript and XML steht. 596 00:35:12,270 --> 00:35:15,640 Es passiert einfach so, dass XML nur einige Weg, um Daten darzustellen. 597 00:35:15,640 --> 00:35:20,920 >> Diese Art der verlorenen Popularität vor kurzem, so das X in AJAX wird nicht die ganze Zeit benutzt. 598 00:35:20,920 --> 00:35:26,220 Grundsätzlich ist das, was AJAX uns erlaubt, zu tun zu machen HTTP-Requests 599 00:35:26,220 --> 00:35:28,620 aus dem Kontext JavaScript. 600 00:35:28,620 --> 00:35:32,310 Wenn wir in unserem Web-Browser sind und wir um die Seiten navigieren und wir auf einen Link klicken, 601 00:35:32,310 --> 00:35:37,790 was unsere Browser tun wird, ist eine HTTP-Anfrage an, was Link klicken wir. 602 00:35:37,790 --> 00:35:41,670 Aber das ist nicht immer ideal, denn wenn das der Fall ist, dann als David sagte, 603 00:35:41,670 --> 00:35:45,220 wir haben immer um Benutzer auf eine Schaltfläche Senden oder klicken Sie auf einen Link 604 00:35:45,220 --> 00:35:50,380 , damit nichts passieren, das wird eine HTTP-Anforderung zu beteiligen. 605 00:35:50,380 --> 00:35:54,160 Also mit AJAX können wir diese Anfragen im Namen von JavaScript machen. 606 00:35:54,160 --> 00:35:57,020 Das bedeutet, wenn der Benutzer mit der Seite interagiert oder irgendetwas passiert, 607 00:35:57,020 --> 00:36:01,780 können wir tatsächlich eine programmatische Anfrage an eine andere PHP-Datei auf unserer Website 608 00:36:01,780 --> 00:36:06,280 oder irgendetwas anderes und Abrufen der Daten, dass die Datei ausspuckt. 609 00:36:06,280 --> 00:36:09,860 Werfen wir einen Blick auf ein Beispiel von AJAX. 610 00:36:09,860 --> 00:36:16,140 Dies ist unser CS50 Finance Seite mit dem hoffentlich einige von uns vertraut sind. 611 00:36:16,140 --> 00:36:21,790 Wenn wir die HTML der Seite betrachten, sehen wir hier, dass ich noch ein paar Dinge, 612 00:36:21,790 --> 00:36:23,820 von denen ich angesichts dieses Formular habe eine ID. 613 00:36:23,820 --> 00:36:26,480 Ich habe gesagt, id = "form-quote". 614 00:36:26,480 --> 00:36:31,910 Ich habe das nur getan, weil es sich um diesen ein wenig leichter zu wählen Sie aus dem DOM 615 00:36:31,910 --> 00:36:35,090 da kann ich nur machen eine sehr einfache Abfrage. 616 00:36:35,090 --> 00:36:38,960 Was will ich hier zu tun ist, möchte ich ein Problem mit CS50 Finanzen zu beheben. 617 00:36:38,960 --> 00:36:41,550 Also, wenn wir finance.cs50.net gehen, 618 00:36:41,550 --> 00:36:45,700 jedes Mal, Ich möchte ein Angebot zu erhalten, muss ich dieses Angebot einholen Schaltfläche klicken, 619 00:36:45,700 --> 00:36:48,960 und dass Angebot einholen Taste, dann bringt mich zu einem anderen ganze Seite. 620 00:36:48,960 --> 00:36:52,400 Und wenn ich ein anderes Zitat will, muss ich die Zurück-Taste drücken und dann tippe ich es, 621 00:36:52,400 --> 00:36:54,480 Ich bekomme ein Angebot, und ich traf die Schaltfläche Zurück. 622 00:36:54,480 --> 00:36:56,840 Das ist wirklich nicht der beste Nutzer-Erfahrung. 623 00:36:56,840 --> 00:37:01,570 Wer möchte schon wirklich die Website verwenden, wenn es so langsam ist, um Aktienkurse zu bekommen? 624 00:37:01,570 --> 00:37:05,630 Also, was wollen wir mit AJAX zu tun ist, entfernen Sie diesen Schritt zu gehen, einer separaten Seite 625 00:37:05,630 --> 00:37:08,410 um die Ergebnisse anzuzeigen. 626 00:37:08,410 --> 00:37:11,240 >> Was wir wirklich nur fragen, ist, dass wirklich kleinen Preis, 627 00:37:11,240 --> 00:37:14,240 und das ist nur eine wirklich kleine Menge von Daten. 628 00:37:14,240 --> 00:37:17,400 So gibt es keine Notwendigkeit für mich noch eine ganze HTML-Seite zu gehen, 629 00:37:17,400 --> 00:37:20,670 Download eine ganz neue Charge von HTML, vielleicht einige herunterladen, weitere Bilder, 630 00:37:20,670 --> 00:37:24,410 einige andere CSS-Dateien nur für mich zu beantworten, dass die ganz einfache Frage 631 00:37:24,410 --> 00:37:27,810 wie viel kostet dieser Bestand Kosten. 632 00:37:27,810 --> 00:37:31,000 Mit AJAX können wir diese sehr viel einfacher. 633 00:37:31,000 --> 00:37:36,400 Wir sehen hier unten, dass ich in einer JavaScript-Datei namens quote.js Verlinkung nicht erkennbar. 634 00:37:36,400 --> 00:37:40,140 Lasst uns tatsächlich öffnen Sie diese Datei. Nicht da. 635 00:37:42,610 --> 00:37:45,860 Alle meine JavaScript-Dateien gehen, um in HTML befinden 636 00:37:45,860 --> 00:37:47,630 so dass der Web-Browser zugreifen kann. 637 00:37:47,630 --> 00:37:50,330 Dann haben wir ein separates Verzeichnis hier für JavaScript 638 00:37:50,330 --> 00:37:54,340 und jetzt ist hier quote.js. 639 00:37:54,340 --> 00:38:00,930 An der Spitze dieser Datei das sagt hier, dass ich für die gesamte Seite warten geladen werden sollen 640 00:38:00,930 --> 00:38:04,830 bevor ich etwas zu tun versuchen. Warum ist das notwendig? 641 00:38:04,830 --> 00:38:08,650 Es stellt sich heraus, dass das nächste, was ich hier tun werde Anfang der Suche nach einem Element ist 642 00:38:08,650 --> 00:38:10,810 das entspricht etwas Selektor. 643 00:38:10,810 --> 00:38:15,600 Wenn dies JavaScript wird immer ausgeführt, bevor dieses Element auf der Seite geladen wird, 644 00:38:15,600 --> 00:38:17,820 dann alles, was ich versuche zu tun, ist nicht zur Arbeit gehen 645 00:38:17,820 --> 00:38:20,580 weil ich werde versuchen, etwas, das noch nicht da ist zu wählen. 646 00:38:20,580 --> 00:38:23,780 So diese Linie bis oben sagt, ich will, dass du warten, bis alles geladen ist 647 00:38:23,780 --> 00:38:28,030 so dass wir garantieren, dass alle Elemente, die ich suche, sind eigentlich auf der Seite. 648 00:38:29,730 --> 00:38:34,310 Das Dollar-Zeichen bedeutet hier verwende ich die Bibliothek namens jQuery. 649 00:38:34,310 --> 00:38:38,570 Das jQuery-Bibliothek ermöglicht es uns, diese Selektoren, dass wir gerade gesehen verwenden. 650 00:38:38,570 --> 00:38:44,010 Indem man sagt, $ dann übergibt als Argument dieses # form-quote, 651 00:38:44,010 --> 00:38:47,910 Ich bin jetzt die Auswahl, dass Form, dass wir gerade einen Blick auf. 652 00:38:47,910 --> 00:38:52,290 Jetzt habe ich eine Darstellung dieser Form im Speicher irgendwie. 653 00:38:52,290 --> 00:38:56,760 >> Auf dieses Objekt nun diese Darstellung der Form, 654 00:38:56,760 --> 00:38:58,890 Ich bin jetzt mit einer Funktion namens weiter. 655 00:38:58,890 --> 00:39:02,710 Was diese Funktion tut, ist, es wird ein Event-Handler anhängen. 656 00:39:02,710 --> 00:39:06,310 Die Veranstaltung, dass wir gehen, um zu hören ist das Submit-Ereignis. 657 00:39:06,310 --> 00:39:08,890 So, wenn der Benutzer auf diese Schaltfläche klickt oder Pressen Submit Geben, 658 00:39:08,890 --> 00:39:11,730 Dieses Ereignis wird ausgelöst. 659 00:39:11,730 --> 00:39:16,390 Durch Einhaken in diese kann ich nun das Standardverhalten des Formulars. 660 00:39:16,390 --> 00:39:19,770 Ohne diese JavaScript, wäre das Formular abschicken unabhängig PHP-Datei 661 00:39:19,770 --> 00:39:22,110 verwendeten wir in diesem action-Attribut. 662 00:39:22,110 --> 00:39:25,440 Aber stattdessen bin ich jetzt sagen, warte, warte, warte, ich glaube nicht, dass du wirklich tun. 663 00:39:25,440 --> 00:39:31,140 Ich möchte dies geschehen, bevor Sie gehen und versuchen, bis zu einem gewissen PHP-Datei einzureichen. 664 00:39:31,140 --> 00:39:32,870 Nun, was kann ich tun? 665 00:39:32,870 --> 00:39:39,270 An dieser Stelle möchte ich AJAX irgendwie nutzen, in welcher der Preis der Aktie ist zu laden. 666 00:39:39,270 --> 00:39:44,170 Das erste, was ich wissen muss, ist, welche Lager der Benutzer aufzublicken. 667 00:39:44,170 --> 00:39:46,760 Um dies zu tun, dass ich werde einen anderen Selektor verwenden. 668 00:39:46,760 --> 00:39:49,020 Dies ist die dritte Selektor wir vor aussah. 669 00:39:49,020 --> 00:39:54,460 Dieser sagt, dass ich zum Auftakt dieses Formular Element mit einer ID von Form-quote wollen. 670 00:39:54,460 --> 00:39:58,440 Dann irgendwo in dieser Form muss es eine Eingangselement sein 671 00:39:58,440 --> 00:40:01,270 das hat einen Namen des Symbols. 672 00:40:01,270 --> 00:40:05,460 Wenn wir wieder in unserem HTML aussehen, sahen wir, dass wir einen Eingang hatte [name = Symbol]. 673 00:40:05,460 --> 00:40:12,380 Das bedeutet, dass dies wird dieses Textfeld auszuwählen, dass der Benutzer in der Eingabe. 674 00:40:12,380 --> 00:40:13,870 Das ist schön. Wir haben das Textfeld. 675 00:40:13,870 --> 00:40:17,360 Jetzt brauchen wir nur zu wissen, was drin ist es. 676 00:40:17,360 --> 00:40:20,290 Um dies zu tun, dass wir diese Methode hier nennen, dieses. Val, 677 00:40:20,290 --> 00:40:23,240 und dies sagt, ich weiß, was Textfeld, das Sie haben. 678 00:40:23,240 --> 00:40:28,160 Ich will, dass du mir sagen, was es dem Benutzer in das Textfeld eingegeben haben. 679 00:40:28,160 --> 00:40:34,440 Jetzt haben wir einen String namens Symbol, das gleich, was der Benutzer eingegeben ist in. 680 00:40:34,440 --> 00:40:39,820 Das ist schön. Wir können diese Zeichenfolge nun auf unsere Anfrage zu machen. 681 00:40:39,820 --> 00:40:42,450 Dies ist eine neue Funktion hier, diese $, 682 00:40:42,450 --> 00:40:44,900 außer man nicht mehr gehen zu Auswahl von Elementen, 683 00:40:44,900 --> 00:40:48,910 wir gehen zu rufen eine andere Funktion, die uns von jQuery ist vorgesehen. 684 00:40:48,910 --> 00:40:54,810 Das AJAX-Funktion ist, was eigentlich vor sich geht, diese HTTP-Anfrage zu machen. 685 00:40:54,810 --> 00:40:57,000 Also müssen wir sagen, dass es ein paar Dinge. 686 00:40:57,000 --> 00:41:01,410 Das erste, was wir haben, um diese Funktion zu sagen ist, wo ich die Anfrage hin wollen. 687 00:41:01,410 --> 00:41:08,910 Irgendwo in meinem Projekt habe ich diese Datei in der HTML-Verzeichnis namens quote.php. 688 00:41:08,910 --> 00:41:15,150 Ich kann diese Datei zugreifen, sahen wir, wie diese, wenn ich localhost / quote.php gehen. 689 00:41:15,150 --> 00:41:20,450 >> Ich will meine JavaScript, um eine Anfrage zu dieser Seite zu machen. 690 00:41:20,450 --> 00:41:22,920 Welche Art von Anfrage jetzt? 691 00:41:22,920 --> 00:41:27,210 Wir sahen vor, dass die Form hat, dass method = "post"-Attribut, 692 00:41:27,210 --> 00:41:29,270 und das bedeutet, es wird eine POST-Anfrage zu machen, 693 00:41:29,270 --> 00:41:32,630 so ist es gar nichts in der URL setzen, anstatt einer GET-Anfrage, 694 00:41:32,630 --> 00:41:36,860 Was wäre gerade gefeuert, wenn wir die Seite nur mit dem Web-Browser zugegriffen werden, zum Beispiel. 695 00:41:36,860 --> 00:41:41,260 Jetzt haben wir gesagt, ich möchte eine HTTP POST Anfrage stellen 696 00:41:41,260 --> 00:41:44,840 zu einer Seite an quote.php befindet. 697 00:41:44,840 --> 00:41:51,490 Wenn wir das Formular abschicken, erinnern konnten wir die Eingangs-Elemente innerhalb dieses Formular zugreifen 698 00:41:51,490 --> 00:41:54,430 mit diesem $ _POST Variable. 699 00:41:54,430 --> 00:41:58,710 Bisher in der Geschichte haben wir eigentlich nicht zusammen alle Daten gesendet haben. 700 00:41:58,710 --> 00:42:00,640 Wir haben gerade gesagt, wir machen eine AJAX-Anforderung 701 00:42:00,640 --> 00:42:03,200 und hier ist die Art der Anfrage wir machen. 702 00:42:03,200 --> 00:42:07,090 Jetzt müssen wir tatsächlich senden einige Daten auf der Seite. 703 00:42:07,090 --> 00:42:10,930 Um dies zu tun, dass wir diese Eigenschaft namens Daten nutzen. 704 00:42:10,930 --> 00:42:14,950 Der Wert dieser Eigenschaft ist eigentlich ein assoziatives Array. 705 00:42:14,950 --> 00:42:19,390 Der Grund dafür ist, es erlaubt uns, mehr als nur ein Teil der Daten zu senden. 706 00:42:19,390 --> 00:42:24,750 Deshalb haben wir diese geschweiften Klammern hier drinnen dieser anderen geschweiften Klammern verschachtelt. 707 00:42:24,750 --> 00:42:29,680 Die Tasten in diesen assoziativen Arrays gehen, um dasselbe sein 708 00:42:29,680 --> 00:42:32,630 wie die Namen schreibt in unserem Formular-Elemente. 709 00:42:32,630 --> 00:42:35,740 Das bedeutet, dass, wenn ich auf einem Schlüssel-Symbol zu senden, 710 00:42:35,740 --> 00:42:41,870 dh meine PHP-Seite kann diese Daten mit $ _POST [Symbol] zugreifen 711 00:42:41,870 --> 00:42:44,640 genau wie wir vor, wenn wir ein Formular tat. 712 00:42:44,640 --> 00:42:47,090 Und nun die eigentlichen Daten, die wir senden wollen 713 00:42:47,090 --> 00:42:50,790 wird der Wert innerhalb dieses assoziativen Arrays sein. 714 00:42:50,790 --> 00:42:54,070 >> Wir gespeicherten diesen Text in eine Variable namens Symbol, 715 00:42:54,070 --> 00:42:57,380 und so schicken wir zusammen nun einen Schlüssel-Symbol 716 00:42:57,380 --> 00:43:01,380 und ein Wert dessen, was der Benutzer eingegeben in. 717 00:43:01,380 --> 00:43:06,270 Jetzt haben wir diese HTTP-Anforderung, unsere PHP-Datei ausgeführt wurde, 718 00:43:06,270 --> 00:43:11,480 und es geht um einige Daten zurück zu senden jetzt an den Client, der gerade machte diese Anfrage. 719 00:43:11,480 --> 00:43:15,220 Jetzt müssen wir auf alles, was der Server sagte uns reagieren. 720 00:43:15,220 --> 00:43:20,180 Um dies zu tun, dass wir diese letzte Eigenschaft hier als Erfolg zu haben. 721 00:43:20,180 --> 00:43:24,240 Der Wert dieser Erfolg Schlüssel tatsächlich zu eine Funktion sein, 722 00:43:24,240 --> 00:43:26,910 und dies ist einer der wirklich cool, was man mit JavaScript tun können. 723 00:43:26,910 --> 00:43:31,720 Nicht nur können Sie ints oder Arrays als Wert innerhalb eines assoziativen Arrays, 724 00:43:31,720 --> 00:43:34,170 Wir können auch die Funktion. 725 00:43:34,170 --> 00:43:36,380 So sagen, Erfolg, dies ist mein Schlüssel. 726 00:43:36,380 --> 00:43:38,830 Ein Doppelpunkt sagt hier kommt der Wert, 727 00:43:38,830 --> 00:43:41,810 und nun der Wert dieser ist eigentlich eine Funktion. 728 00:43:41,810 --> 00:43:44,460 So brauchen wir nicht zu geben dieser Funktion einen Namen per se. 729 00:43:44,460 --> 00:43:48,820 Wir können nur sagen, das wird eine Funktion sein. Es wird ein Argument nehmen. 730 00:43:48,820 --> 00:43:51,190 Das Argument dieser Funktion sein wird 731 00:43:51,190 --> 00:43:54,460 was der Server schickte uns zurück von der Anfrage. 732 00:43:54,460 --> 00:43:57,750 Genau wie bei unserem Browser eine Anforderung, sendet der Server etwas zurück 733 00:43:57,750 --> 00:43:59,060 und der Browser zeigt es, 734 00:43:59,060 --> 00:44:03,030 im Zusammenhang mit der AJAX wir nur einen Antrag, schickte der Server etwas zurück, 735 00:44:03,030 --> 00:44:07,110 und jetzt haben wir, dass als Zeichenfolge dargestellt. 736 00:44:07,110 --> 00:44:11,280 Mit dieser Zeichenfolge Ich möchte nur, dass auf der Seite anzuzeigen. 737 00:44:11,280 --> 00:44:14,040 Um dies zu tun, dass ich gehe, um einen letzten Wähler haben. 738 00:44:14,040 --> 00:44:17,570 Ich möchte das Element mit der ID Preis auszuwählen. 739 00:44:17,570 --> 00:44:20,710 Dies ist nur ein leeres div, dass ich auf der Seite erstellt, 740 00:44:20,710 --> 00:44:26,640 und ich möchte den Inhalt des div zu sein, was der Server uns zurück geschickt gesetzt. 741 00:44:26,640 --> 00:44:30,280 Ich habe tatsächlich geändert quote.php ein bisschen. 742 00:44:30,280 --> 00:44:33,460 >> Anstatt fordern render und Rendering einige Seiten, 743 00:44:33,460 --> 00:44:38,100 quote.php jetzt einfach gehen zum Ausdrucken der Wert der Aktie als String zurück. 744 00:44:38,100 --> 00:44:41,880 Also, wenn Sie tatsächlich besuchen Sie die Seite, würden Sie sehen nur, dass die kleinen String 745 00:44:41,880 --> 00:44:45,030 dessen, was der Aktienkurs. 746 00:44:45,030 --> 00:44:50,170 Eine letzte Sache, die wir hier tun müssen, ist nur sicherstellen, dass diese Funktion false zurück. 747 00:44:50,170 --> 00:44:53,560 Was dies sagt, ist, dass wenn ich im Inneren eines Event-Handlers 748 00:44:53,560 --> 00:44:57,300 und dass Event-Handler kehrt anstelle der Rückgabe true false, 749 00:44:57,300 --> 00:45:01,510 das bedeutet, dass ich will nicht das ursprüngliche Ereignis zu schießen. 750 00:45:01,510 --> 00:45:05,270 In diesem Fall, wenn wir nicht alle JavaScript und wir legte eine Form, 751 00:45:05,270 --> 00:45:08,280 unsere Web-Browser wird sagen: "Ich werde diese Daten zusammen zu schicken" 752 00:45:08,280 --> 00:45:10,130 und sie werden dich auf eine andere Seite zu senden. 753 00:45:10,130 --> 00:45:14,360 Weil wir die Verwendung von AJAX sind jetzt, es gibt keine Notwendigkeit, um den Benutzer zu einer anderen Seite zu senden. 754 00:45:14,360 --> 00:45:17,920 Wir stehen noch gehen, um die Ergebnisse dynamisch Anzeige auf der gleichen Seite. 755 00:45:17,920 --> 00:45:21,460 Wir wissen wirklich nicht wollen, dass sie überall hingehen, und ich möchte auf der gleichen Seite zu bleiben. 756 00:45:21,460 --> 00:45:27,060 So durch Rücksendung falsch, stellen wir sicher, dass das Formular nicht das für uns tun. 757 00:45:27,060 --> 00:45:31,170 Werfen wir einen Blick auf, was diese tatsächlich aussieht. 758 00:45:31,170 --> 00:45:34,180 Unser Angebot Seite gleich aussieht. 759 00:45:34,180 --> 00:45:37,240 Lassen Sie mich hochzuziehen den Inspektor hier unten, so dass wir sehen können, was vor sich geht. 760 00:45:37,240 --> 00:45:40,270 Machen Sie es ein bisschen weniger riesig. 761 00:45:40,270 --> 00:45:44,590 Erinnern, wenn wir uns öffnen die Registerkarte Netzwerk, das ist, wo wir alle HTTP-Requests zu sehen 762 00:45:44,590 --> 00:45:47,570 das auf der Seite passiert. 763 00:45:47,570 --> 00:45:52,890 >> Für ein Symbol lass mich in AAPL eingeben und auf Angebot einholen. 764 00:45:52,890 --> 00:45:56,720 Jetzt sahen wir, dass ein Anteil von Apple eine gewisse Anzahl von Dollar kostet 765 00:45:56,720 --> 00:46:00,410 gerade erschienen auf der Seite, aber die URL überhaupt nicht ändern. 766 00:46:00,410 --> 00:46:04,570 In der Tat, hier ist die HTTP-Anforderung, die wir gerade gemacht. 767 00:46:04,570 --> 00:46:09,980 Wir haben eine POST-Anfrage an quote.php. Das macht Sinn. 768 00:46:09,980 --> 00:46:12,800 Dies ist, was der Server uns zurück geschickt. 769 00:46:12,800 --> 00:46:16,320 Es ist nicht mehr diese gigantische HTML-Dokument mit Bildern und dergleichen, 770 00:46:16,320 --> 00:46:20,920 es ist nur eine Textzeile, und dann haben wir nur angezeigt die Textzeile. 771 00:46:20,920 --> 00:46:26,290 Wenn wir zurück zu den Kopf-und sehen, was wir tatsächlich gesendet Innenseite dieser HTTP-Anforderung, 772 00:46:26,290 --> 00:46:33,950 können wir sehen, dass wir hier unten entlang eines Schlüssels aus Symbol und einem Wert von AAPL gesendet, 773 00:46:33,950 --> 00:46:36,430 das ist, was der Benutzer eingetippt 774 00:46:36,430 --> 00:46:39,230 Das ist schön, aber es ist immer noch ein wenig ärgerlich. 775 00:46:39,230 --> 00:46:42,490 Ich habe immer noch auf diese Schaltfläche klicken, um den Aktienkurs zu bekommen. 776 00:46:42,490 --> 00:46:45,880 Wir sind viel beschäftigte Leute, und wir haben keine Zeit, um Schaltflächen klicken. 777 00:46:45,880 --> 00:46:49,910 Google realisiert dieses eine kleine Weile her, wenn sie Google Instant umgesetzt. 778 00:46:49,910 --> 00:46:53,590 Was Google Instant tut, ist, wie du schreibst es gerade beginnt Darstellung der Ergebnisse für Sie 779 00:46:53,590 --> 00:46:56,520 so dass Sie sich keine Sorgen um auch auf Suchen klicken kümmern. 780 00:46:56,520 --> 00:46:58,730 Eigentlich eine lustige Geschichte damit verbunden. 781 00:46:58,730 --> 00:47:01,100 Sobald Google Instant kam heraus, Leute wie waren "Whoa, ist diese super toll." 782 00:47:01,100 --> 00:47:02,540 "Das ist so cool." 783 00:47:02,540 --> 00:47:05,950 Und ein Schüler sich an der Stanford wer war 19 zu der Zeit 784 00:47:05,950 --> 00:47:09,000 machte diese Website namens YouTube Instant. 785 00:47:09,000 --> 00:47:13,170 Alle YouTube Instant-tut, ist eine möglichst effektive Suche YouTube sofort. 786 00:47:13,170 --> 00:47:17,020 So anstatt zu gehen auf YouTube.com und schlug Search, 787 00:47:17,020 --> 00:47:21,650 wenn ich Eingabe in YouTube Sofortige etwas anfangen wie CS50, 788 00:47:21,650 --> 00:47:25,320 konnten wir hier sehen, dass es zu versuchen auf einem langsamen Internet-Verbindung 789 00:47:25,320 --> 00:47:28,500 bevölkern diese Ergebnisse zu leben. 790 00:47:28,500 --> 00:47:35,590 Um dies zu tun, dass wir tatsächlich eine sehr einfache Änderungen unserer quote.js Datei. 791 00:47:35,590 --> 00:47:40,900 Momentan sind wir Anbringen dieses Ereignis, wenn das Formular abgeschickt wird. 792 00:47:40,900 --> 00:47:43,760 Wir wissen nicht wirklich wollen, dass die Nutzer übermitteln diese Form nicht mehr, 793 00:47:43,760 --> 00:47:48,570 also lasst uns statt feuern diese Veranstaltung jedes Mal der Benutzer eine Taste drückt. 794 00:47:48,570 --> 00:47:53,200 Um dies zu tun, dass wir zunächst die Veranstaltung Wechsel von unterbreiten keyup. 795 00:47:53,200 --> 00:47:55,740 Das bedeutet, dass anstatt zu warten, die Form zu unterbreiten, 796 00:47:55,740 --> 00:47:58,490 jedes Mal, wenn die Taste gedrückt wird, wird etwas passieren. 797 00:47:58,490 --> 00:48:02,030 Es macht keinen Sinn mehr, diese keyup Ereignis an die ganze Form zu befestigen. 798 00:48:02,030 --> 00:48:05,080 Wir haben wirklich nur über diese Suchfeld kümmern. 799 00:48:05,080 --> 00:48:09,320 >> So wählen Sie, dass jetzt können wir dies ändern zu sein, als die Form-quote, 800 00:48:09,320 --> 00:48:14,220 Form-quote und wir werden einen Eingang haben (type = text) oder wir könnten sagen, (Name = Symbol) - 801 00:48:14,220 --> 00:48:16,420 was wir wollen. 802 00:48:16,420 --> 00:48:18,650 Jetzt gibt es eine letzte, was wir zu tun haben. 803 00:48:18,650 --> 00:48:21,190 Angemeldet hier unten, wenn wir return false sagte 804 00:48:21,190 --> 00:48:24,370 wir sagten, wir wollen nicht, dass Standard-Ereignis ausgelöst. 805 00:48:24,370 --> 00:48:26,390 Aber es passiert einfach so, dass, wenn wir das jetzt deaktivieren, 806 00:48:26,390 --> 00:48:29,660 was wir in geben ist nicht zu zeigen, bis in den Browser mehr 807 00:48:29,660 --> 00:48:33,000 denn das würde das Standard-Verhalten der Eingabe in ein Textfeld sein. 808 00:48:33,000 --> 00:48:38,660 Wir wollen nicht mehr zu überschreiben, also lasst zerstöre diese return false. 809 00:48:38,660 --> 00:48:44,800 Wenn wir retten, und laden Sie die Seite, wenn ich jetzt eingeben AAPL beginnen 810 00:48:44,800 --> 00:48:50,160 Sie sehen, dass der Aktienkurs am Boden ist hier automatisch vervollständigt. 811 00:48:50,160 --> 00:48:53,150 So, hier ist CS50 Finance Instant. 812 00:48:53,150 --> 00:48:55,860 Eigentlich eine lustige Geschichte über den YouTube Instant- 813 00:48:55,860 --> 00:48:59,420 ist, dass Studenten nur irgendwie schrieb es als 1-Nacht-Projekt 814 00:48:59,420 --> 00:49:03,800 und am nächsten Tag war er eine Stelle beim YouTube CEO angeboten. 815 00:49:03,800 --> 00:49:10,610 So einfach ist das. Sie CS50 Studenten können Ihre fertigen Projekte erhalten Sie einen Job bei YouTube. 816 00:49:10,610 --> 00:49:14,720 So etwas ist eine wirklich coole Idee für eine endgültige Projekt, nicht wahr? 817 00:49:14,720 --> 00:49:18,170 Wir hatten einige vorhandene Funktionalität, dass wir mit integrieren wollten. 818 00:49:18,170 --> 00:49:20,330 Wir verbessern die Nutzererfahrung ein wenig, 819 00:49:20,330 --> 00:49:24,340 und plötzlich suchen etwas auf YouTube Sofortige könnte viel einfacher sein, 820 00:49:24,340 --> 00:49:27,290 als die Suche nach ihm auf den regulären YouTube. 821 00:49:27,290 --> 00:49:30,790 Also das ist AJAX in einer Nussschale. 822 00:49:30,790 --> 00:49:34,860 >> In den Beispielen, dass Joseph zeigte, sahen wir eine Menge autocompletes, 823 00:49:34,860 --> 00:49:39,250 und diese autocompletes sind wirklich, wirklich praktisch, weil wir nicht zu erinnern - 824 00:49:39,250 --> 00:49:41,770 Zum Beispiel, wenn Sie sich nicht erinnern den Aktienkurs für Apple 825 00:49:41,770 --> 00:49:45,110 und wir wissen, dass es aa etwas, anstatt nur zu mir sagen: 826 00:49:45,110 --> 00:49:48,740 "Ein Anteil von diesem Ding kostet so viel Geld," 827 00:49:48,740 --> 00:49:52,540 Ich würde Art gerne wissen, was Aktien mit aa beginnen. 828 00:49:52,540 --> 00:49:58,340 Wir können das wirklich gut tun mit dem Bootstrap-Bibliothek, die bereits enthalten ist 829 00:49:58,340 --> 00:50:01,380 Innere CS50 Finance. 830 00:50:01,380 --> 00:50:09,390 Wenn Sie hierher kommen, um die JavaScript-tag und nach unten scrollen, um typeahead, 831 00:50:09,390 --> 00:50:13,730 dies ist nur ein nettes Plugin, dass jemand bereits für uns geschrieben hat, 832 00:50:13,730 --> 00:50:16,980 und wir können einfach nutzen ihre Funktionalität wie diese. 833 00:50:16,980 --> 00:50:21,410 Ich in einem A eingegeben und hier ist eine Liste von einigen Staaten, die mit A beginnen 834 00:50:21,410 --> 00:50:25,360 Lassen Sie uns sagen, dass ich denke, das ist wirklich cool und es ist Zeit für mich, dies auf meiner Seite sind. 835 00:50:25,360 --> 00:50:28,300 Es stellt sich heraus, dass dies wirklich, wirklich einfach ist. 836 00:50:28,300 --> 00:50:32,810 Lasst uns springen Sie hier, um quote3.js. 837 00:50:34,890 --> 00:50:37,380 Meine Datei sieht ein bisschen anders aus. 838 00:50:37,380 --> 00:50:39,700 Hier unten alle meine AJAX Zeug ist das gleiche. 839 00:50:39,700 --> 00:50:43,170 Ich möchte die Bestandsdaten, ohne zu einer anderen Seite zu laden. 840 00:50:43,170 --> 00:50:46,220 Aber jetzt möchte ich dieses Plugin verwenden. 841 00:50:46,220 --> 00:50:51,020 Die Bootstrap-Dokumentation hat großartige Beispiele dafür, wie genau kann ich das tun. 842 00:50:51,020 --> 00:50:54,350 Ich möchte sagen: "Hier ist der Eingang, die ich möchte autocomplete auf" 843 00:50:54,350 --> 00:50:56,640 und ich werde diese Funktion aufgerufen typeahead nennen, 844 00:50:56,640 --> 00:50:59,730 und dass wird alles der typeahead Sachen für uns zu behandeln. 845 00:50:59,730 --> 00:51:02,090 Es wird die Liste zu initialisieren, wird es tun alle unsere Filterung. 846 00:51:02,090 --> 00:51:06,680 Die einzige Sache, die es wissen muss, ist, welche Daten wir über Autovervollständigungsfeld. 847 00:51:06,680 --> 00:51:10,480 So fand ich heraus, diesen Schlüssel nur durch das Lesen der Dokumentation und Blick auf die Beispiele. 848 00:51:10,480 --> 00:51:14,150 Wenn ich ihm einen Schlüssel der Quelle, der Wert dieses Schlüssels 849 00:51:14,150 --> 00:51:17,770 ist nur einige Reihe von Dingen, die ich will autocomplete auf. 850 00:51:17,770 --> 00:51:20,180 Diese Variable kam aus dieser anderen Datei. 851 00:51:20,180 --> 00:51:23,400 Ich öffne symbols.js. 852 00:51:23,400 --> 00:51:27,980 >> Dies symbols.js ist nur das wirklich, wirklich große Array mit Strings 853 00:51:27,980 --> 00:51:32,080 all dieser Lager Symbole aus dem NASDAQ. 854 00:51:32,080 --> 00:51:42,190 Wenn ich will, um zurück zum HTML, so jharvard, vhosts, globalhost, html, Vorlagen, 855 00:51:42,190 --> 00:51:45,820 quote_form. 856 00:51:45,820 --> 00:51:50,910 Da das ist jetzt quote3.js genannt, lassen Sie mich die JavaScript-Datei I einschließlich hier bin. 857 00:51:50,910 --> 00:51:55,110 Jetzt habe ich quote3.js, so werde ich in diesem separate JavaScript-Datei zu laden, 858 00:51:55,110 --> 00:51:57,910 derjenige, der diese Bootstrap autocomplete hat. 859 00:51:57,910 --> 00:52:04,430 Nun, wenn ich zurück zu springen, um den Browser die Seite neu laden, und ich beginne Eingabe aa, 860 00:52:04,430 --> 00:52:06,880 da ist mein autocomplete. Und es war wirklich so einfach. 861 00:52:06,880 --> 00:52:11,400 Ich hatte ein Codezeile, sagte nur: "Hier sind die Dinge, die ich will autocomplete auf" 862 00:52:11,400 --> 00:52:16,590 und plötzlich habe ich dieses wirklich, wirklich nett Funktionalität nicht eine ganze Menge Aufwand. 863 00:52:16,590 --> 00:52:19,810 Wie Sie die Entwicklung von Websites und insbesondere mit der Stirnseite der Dinge, 864 00:52:19,810 --> 00:52:21,840 du wirst finden, dies ist der Fall eine ganze Menge. 865 00:52:21,840 --> 00:52:25,700 Es gibt viel, viel, viel wirklich cool freie Bibliotheken da draußen 866 00:52:25,700 --> 00:52:30,190 das macht es super einfach, Dinge wie diese zu tun. 867 00:52:30,190 --> 00:52:37,230 Kann mir jemand irgendwelche Nachteile von einfach Autovervollständigungsfeld auf dieser großen Liste von Symbolen denken? 868 00:52:37,230 --> 00:52:41,580 Was könnte etwas, das nicht die beste mit diesem Ansatz? 869 00:52:42,790 --> 00:52:45,960 Yeah. >> [Student] Zeit, wenn Sie haben eine Menge von [unverständlich] 870 00:52:45,960 --> 00:52:50,420 Yeah. Momentan sind wir das Herunterladen dieser riesigen JavaScript-Datei und es gibt eine Menge von Symbolen. 871 00:52:50,420 --> 00:52:54,360 Und so, wenn wir eine Tonne Zeug haben, erhöhen könnte dies Art der Latenz nicht nur suchen 872 00:52:54,360 --> 00:52:56,600 sondern auch den Download der eigentlichen Datei. 873 00:52:56,600 --> 00:52:58,670 Great. Sonst noch was? 874 00:53:01,950 --> 00:53:05,280 Im Moment gibt es keinen wirklichen Sinn von Bedeutung. 875 00:53:05,280 --> 00:53:08,190 Wenn ich schreibe in ein A, die Unternehmen, die sich hier zeigen 876 00:53:08,190 --> 00:53:11,220 vielleicht nicht die beliebtesten Unternehmen, die mit A beginnen werden 877 00:53:11,220 --> 00:53:17,130 >> Bevor ich an Apple zu bekommen, dauert es möglicherweise einige weitere Zeichen zu finden, was ich suche. 878 00:53:17,130 --> 00:53:20,420 Diese autocomplete nicht dieses Gefühl von Relevanz. 879 00:53:20,420 --> 00:53:24,400 Ist es nur geht zu sagen: "Alles, was ich werde angezeigt übereinstimmt." 880 00:53:24,400 --> 00:53:30,510 Statt dessen würde Ich mag irgendwie integrieren gewisse Bedeutung in meine Recherchen. 881 00:53:30,510 --> 00:53:36,440 Wenn ich gehe hier um Yahoo! Finance, finance.yahoo.com, 882 00:53:36,440 --> 00:53:42,100 Wenn ich versuche, ein Symbol auf Yahoo! Finance Seite geben 883 00:53:42,100 --> 00:53:52,310 und ich schreibe goog starten, habe ich diese schöne Liste von Dingen. 884 00:53:52,310 --> 00:53:57,100 Klar, es sieht aus wie Yahoo! Finance ist etwas klüger hier. 885 00:53:57,100 --> 00:53:59,790 Sie haben eine gewisse Bedeutung und sie haben auch zusätzliche Informationen 886 00:53:59,790 --> 00:54:01,430 wie der Name der Aktie. 887 00:54:01,430 --> 00:54:05,850 Das ist etwas, dass ich nicht wirklich mit nur mein Lager Liste der Symbole zu erhalten. 888 00:54:05,850 --> 00:54:09,520 Ich will dies und so werde ich es nehmen. 889 00:54:09,520 --> 00:54:11,790 Um dies zu tun, der uns ein paar Dinge zu tun. 890 00:54:11,790 --> 00:54:15,580 Lassen Sie uns zunächst eröffnen den Inspektor auf dieser Seite 891 00:54:15,580 --> 00:54:18,100 weil wir sahen, dass diese Seite nicht Nachladen überhaupt, 892 00:54:18,100 --> 00:54:21,960 so ist es wahrscheinlich mit AJAX irgendwie werden geladen seine Daten. 893 00:54:21,960 --> 00:54:23,920 Wir können herausfinden, welche Daten es geladen. 894 00:54:23,920 --> 00:54:28,390 Wenn ich auf dieser Registerkarte Netzwerk, werden diese werde alle Anfragen, die entlassen werden beginnen. 895 00:54:28,390 --> 00:54:34,020 Nun, wenn ich in goo geben, können wir sehen, dass ich gerade eine neue HTTP-Anforderung. 896 00:54:34,020 --> 00:54:37,490 Dies ist wahrscheinlich, dass in dem Daten stammen. 897 00:54:37,490 --> 00:54:41,990 Sicher genug, wenn ich an dieser URL, die ein bisschen merkwürdig benannt ist zu sehen, 898 00:54:41,990 --> 00:54:46,930 können wir sehen, dass dies genau das ist, wo Yahoo Platzverweise seine Daten aus. 899 00:54:46,930 --> 00:54:53,400 >> Ich habe eine separate Datei namens suggest.php sehr ähnlich im Geist der Lookup-Funktion ist erstellt. 900 00:54:53,400 --> 00:54:57,730 Es ist im Grunde geht eine Anfrage an Yahoos URL zu machen, um wieder einige Daten, 901 00:54:57,730 --> 00:54:59,750 und schicken Sie es zurück zu mir. 902 00:54:59,750 --> 00:55:02,570 Nun, anstatt dieses große, riesige Liste von Symbolen, 903 00:55:02,570 --> 00:55:05,280 Ich kann Yahoo ist schön Relevanz Dinge, 904 00:55:05,280 --> 00:55:08,150 und ich glaube nicht, dass massive JavaScript-Datei herunterladen. 905 00:55:08,150 --> 00:55:12,040 Ich werde nur nach unten zu ziehen, die tatsächlich relevanten Börsenkurssymbole. 906 00:55:12,040 --> 00:55:13,960 Lassen Sie springen in die. 907 00:55:13,960 --> 00:55:17,360 So html, js. Wir sind jetzt in quote4. 908 00:55:17,360 --> 00:55:22,120 Jetzt sind wir nicht mehr mit diesen großen Liste der JavaScript-Dateien. 909 00:55:22,120 --> 00:55:24,430 Aber es gibt eine kleine Art von Design-Problem hier. 910 00:55:24,430 --> 00:55:28,200 Wir haben gesagt, dass das A in AJAX asynchron ist. 911 00:55:28,200 --> 00:55:31,000 Was das bedeutet, ist, dass wenn ich einen AJAX-Request zu machen, 912 00:55:31,000 --> 00:55:36,490 so hier on line 8, das ist, wo meine AJAX Anfrage tatsächlich ausgelöst wird. 913 00:55:36,490 --> 00:55:40,370 Lassen Sie uns jetzt sagen ich einige Code haben hier unten, das wird ein paar Sachen zu tun 914 00:55:40,370 --> 00:55:43,930 gerne warnen den Benutzer oder ändert etwas auf der Seite. 915 00:55:43,930 --> 00:55:49,830 Was nicht passieren ist der Browser wird nicht für diese Anfrage warten, um weiter 916 00:55:49,830 --> 00:55:53,480 bevor er nach unten und schlagen Sie diese Zeile. 917 00:55:53,480 --> 00:55:55,900 Das ist der asynchrone Teil. 918 00:55:55,900 --> 00:55:58,400 Es wird diesen Antrag stellen und sagen: "Wenn Sie fertig sind, 919 00:55:58,400 --> 00:56:03,080 "Zurückkommen und rufen diese Funktion, dass ich dir gesagt habe, innerhalb von Erfolg nennen." 920 00:56:03,080 --> 00:56:07,300 Das heißt, wir können nicht einfach downloaden alle Aktien vorher. 921 00:56:07,300 --> 00:56:10,300 Wir müssen den Antrag zu stellen und warten, etwas zurück zu kommen. 922 00:56:10,300 --> 00:56:13,330 Das bedeutet, dass vor, könnten wir einfach sagen, Bootstrap, 923 00:56:13,330 --> 00:56:15,580 "Hier ist die Liste der Dinge, die ich möchte, dass du autocomplete auf." 924 00:56:15,580 --> 00:56:18,950 Wir können nicht mehr tun, mehr, weil wir nicht wissen, 925 00:56:18,950 --> 00:56:21,780 was wir tatsächlich autocomplete auf möchten. 926 00:56:21,780 --> 00:56:25,190 Glücklicherweise, dachte Bootstrap dies, weil die smarten Jungs da drüben sind, 927 00:56:25,190 --> 00:56:30,160 und sie gaben uns einen anderen Weg, um dieses typeahead Plugin zu laden. 928 00:56:30,160 --> 00:56:35,630 Zuvor war der Wert dieser Eigenschaft source gerade diese großen Array von Dingen zu autocomplete auf. 929 00:56:35,630 --> 00:56:39,580 >> Jetzt die Eigenschaft source ist eigentlich eine Funktion, 930 00:56:39,580 --> 00:56:44,580 und der Zweck dieser Funktion ist es, herauszufinden, was die Dinge zu autocomplete eingeschaltet sind. 931 00:56:44,580 --> 00:56:48,730 Wie es geht, um das herauszufinden ist es, es wird Yahoo! Finanzen fragen 932 00:56:48,730 --> 00:56:51,750 was die besten Dinge zu autocomplete sind. 933 00:56:51,750 --> 00:56:54,500 Um dies zu tun, dass ich werde eine sehr ähnliche AJAX Antrag zu stellen. 934 00:56:54,500 --> 00:56:59,010 Ich werde diese Seite auf suggest.php beantragen. 935 00:56:59,010 --> 00:57:01,360 Ich möchte an den Symbolen noch senden. 936 00:57:01,360 --> 00:57:05,570 Und jetzt ist mein Erfolg, sagte der Bootstrap Dokumentation me 937 00:57:05,570 --> 00:57:09,130 , dass, um zu bevölkern diese Liste der Dinge, 938 00:57:09,130 --> 00:57:14,370 alles, was ich tun müssen, ist in diesem Array gehen jetzt an die Callback-Funktion. 939 00:57:14,370 --> 00:57:15,660 Aber warten Sie eine Minute. 940 00:57:15,660 --> 00:57:20,240 Wenn dies soll ein Array sein und AJAX sendet mich zurück Text, 941 00:57:20,240 --> 00:57:22,720 wie ist das möglich? 942 00:57:22,720 --> 00:57:27,910 Dies stellt eine neue Möglichkeit zum Austausch von Daten genannt JSON. 943 00:57:27,910 --> 00:57:33,000 In diesem Fall sind wir nicht nur das Zurücksenden einer einfachen Text-String. 944 00:57:33,000 --> 00:57:37,670 Jetzt sind wir mit dieser komplexen Liste von Börsenkurssymbole tun. 945 00:57:37,670 --> 00:57:41,730 Diese Aktien Symbole können auch Dinge wie den Namen des Unternehmens oder den aktuellen Preisen. 946 00:57:41,730 --> 00:57:47,550 Nur mit einem großen langen Schnur, die in keiner vorhersagbaren Weise formatiert wurde 947 00:57:47,550 --> 00:57:51,970 wird nicht der beste Weg, um diese Daten von Yahoo-Server zu mir sein 948 00:57:51,970 --> 00:57:54,540 in einer Weise, dass ich einfach zu verstehen. 949 00:57:54,540 --> 00:58:01,280 JSON ist eine Technologie, die die Vorteile bringt, wie schaffen wir assoziative Arrays in JavaScript. 950 00:58:01,280 --> 00:58:04,510 Das sieht viel wie ein JavaScript assoziatives Array, 951 00:58:04,510 --> 00:58:06,600 und in der Tat, es ist, weil es ist. 952 00:58:06,600 --> 00:58:09,710 JSON steht für JavaScript Object Notation. 953 00:58:09,710 --> 00:58:15,020 Dies ist im Grunde eine vereinbarte Format zur Übertragung von Daten hin und her. 954 00:58:15,020 --> 00:58:18,280 Hier wird diese JSON-Objekt oder diese JSON assoziatives Array 955 00:58:18,280 --> 00:58:21,010 sendet mir ein paar Daten zu einem Kurs. 956 00:58:21,010 --> 00:58:25,110 >> Die Schlüssel dieses Arrays sind Dinge wie selbstverständlich, die einen Wert von CS50 hat, 957 00:58:25,110 --> 00:58:29,140 und hier unten können wir sehen, dass ich einen Wert, der ein Array haben. 958 00:58:29,140 --> 00:58:32,730 Ich habe nicht um Dinge wie parse aus Strings zu tun und suchen Sie Kommas 959 00:58:32,730 --> 00:58:35,330 und verrückte Dinge tun so. 960 00:58:35,330 --> 00:58:38,820 Da dies in diesem JSON-Format deklariert, 961 00:58:38,820 --> 00:58:43,510 JavaScript und jQuery bereits Funktionen zur Konvertierung einer Zeichenfolge 962 00:58:43,510 --> 00:58:48,140 das sieht aus wie dieses JSON in eine tatsächliche JavaScript assoziatives Array 963 00:58:48,140 --> 00:58:50,440 dass wir mit arbeiten. 964 00:58:50,440 --> 00:58:56,660 Doing, dass ist so einfach zu sagen, dass nicht mehr diese Datei, suggest.php, 965 00:58:56,660 --> 00:58:59,040 Senden mich einfach einen Text-String, 966 00:58:59,040 --> 00:59:01,950 aber ich weiß, es geht um das Senden mich zurück JSON. 967 00:59:01,950 --> 00:59:06,760 Das bedeutet, dass diese in ein JavaScript JSON assoziative Array umgewandelt werden kann. 968 00:59:06,760 --> 00:59:10,830 Und so jQuery, würde Ich mag Sie, dass für mich tun. 969 00:59:10,830 --> 00:59:13,990 Das bedeutet, dass diese Reaktion Parameter hier, 970 00:59:13,990 --> 00:59:16,070 Dies ist nicht mehr nur ein String. 971 00:59:16,070 --> 00:59:19,860 Weil wir jQuery gesagt habe, das kommt hier einige JSON, 972 00:59:19,860 --> 00:59:22,950 jQuery wird schlau genug sein zu sagen: "Du wolltest JSON?" 973 00:59:22,950 --> 00:59:26,890 "Ich werde das in ein assoziatives Array für Sie konvertieren." 974 00:59:26,890 --> 00:59:32,100 Lasst uns tatsächlich einen Blick auf die Registerkarte Netzwerk, sobald wir quote4.js haben. 975 00:59:32,100 --> 00:59:35,400 Wir ändern und laden Sie die Seite. 976 00:59:37,150 --> 00:59:41,250 Jetzt werde ich in einem-a erneut eingeben. 977 00:59:41,250 --> 00:59:45,600 Ich habe ein paar Anfragen an suggest.php gemacht, aber jetzt diese Antwort, 978 00:59:45,600 --> 00:59:48,670 anstatt nur die Zeichenfolge ist es JSON. 979 00:59:48,670 --> 00:59:52,580 Also habe ich einen offenen geschweiften Klammer und sagte: "Hier kommt ein assoziatives Array." 980 00:59:52,580 --> 00:59:56,830 >> Das erste und einzige Schlüssel dieses assoziativen Arrays wird als Symbole, 981 00:59:56,830 --> 01:00:00,240 und dann ist hier ein Array mit allen relevanten Symbolen 982 01:00:00,240 --> 01:00:04,820 kommen nun von Yahoo! Finance, nicht von dieser gigantischen Liste. 983 01:00:06,110 --> 01:00:10,630 Das ist, wie kann ich einfach bevölkern diese autocomplete plugin 984 01:00:10,630 --> 01:00:14,280 mit einigen Daten, die nicht kommen ist aus einer lokalen Datei, die bereits vorgegebenen ist 985 01:00:14,280 --> 01:00:17,490 sondern etwas anderes. 986 01:00:17,490 --> 01:00:21,160 Es stellt sich heraus, dass wir tatsächlich nutzen eine Technologie namens JSONP, 987 01:00:21,160 --> 01:00:27,420 oder JSON mit Polsterung, wird das beseitigen diese suggest.php Mittelsmann. 988 01:00:27,420 --> 01:00:34,010 Aber anstatt das zu tun, lasst uns stattdessen einen Blick auf, wie kann ich diese noch zu verbessern. 989 01:00:34,010 --> 01:00:36,040 Ich mag Bootstrap die typeahead. Es ist wirklich schön. 990 01:00:36,040 --> 01:00:39,570 Aber wir sind immer gut JavaScript und wir wollen solche selbst tun, 991 01:00:39,570 --> 01:00:43,870 vielleicht einen Blick auf, was dieses Plugin tun könnte. 992 01:00:43,870 --> 01:00:46,500 Lasst uns nicht mehr verwenden, dass typeahead Sache, 993 01:00:46,500 --> 01:00:50,550 und lassen Sie uns versuchen, diese Liste der vorgeschlagenen Aktien selbst machen. 994 01:00:50,550 --> 01:00:53,790 Hier in quote6.php werden wir damit beginnen, die gleiche Weise. 995 01:00:53,790 --> 01:00:58,050 Jedes Mal, wenn jemand Typen etwas, wollen wir einen AJAX-Request zu machen. 996 01:00:58,050 --> 01:01:01,590 Dies ist vergleichbar mit unserer ursprünglichen CS50 Finance Instant. 997 01:01:01,590 --> 01:01:05,020 Anstatt eine Anforderung an quote.php, 998 01:01:05,020 --> 01:01:08,530 wir jetzt eine Anfrage an der gleichen Datei wie zuvor, dies suggest.php, 999 01:01:08,530 --> 01:01:12,460 was ist nur los, um Daten von Yahoo! Finance ziehen. 1000 01:01:12,460 --> 01:01:19,480 >> Auch wir sind immer noch erwartet JSON, aber jetzt, da die typeahead ist dies nicht zu tun für uns, 1001 01:01:19,480 --> 01:01:24,850 müssen wir auch mitschicken den Wert, der im Inneren ist der aktuelle Textfeld. 1002 01:01:24,850 --> 01:01:28,120 Jetzt wissen wir, was zu Yahoo! Finanzen fragen, 1003 01:01:28,120 --> 01:01:34,160 und so jetzt hier ist die Funktion, die wir ausführen wollen, sobald die Anforderung abgeschlossen ist. 1004 01:01:34,160 --> 01:01:36,520 Wir haben nicht das Plugin, um die Liste für uns zu machen, 1005 01:01:36,520 --> 01:01:40,630 also hier ist, wo wir eigentlich vorhaben, eine Liste von Vorschlägen zu bauen. 1006 01:01:40,630 --> 01:01:44,850 Um das zu tun, viel in PHP wie wir verkettet diese großen Ketten von HTML 1007 01:01:44,850 --> 01:01:48,170 dann werden wir ihnen gedruckt, können wir exakt das gleiche Ding in JavaScript zu tun. 1008 01:01:48,170 --> 01:01:51,850 Zuerst werden wir damit beginnen, diese Zeichenfolge als Anregungen, 1009 01:01:51,850 --> 01:01:54,590 und diese Zeichenfolge ist gerade dabei, einige HTML enthalten. 1010 01:01:54,590 --> 01:01:58,320 Wir wollen, dass es eine Liste von Dingen, so werden wir damit beginnen, mit dieser Liste tag, 1011 01:01:58,320 --> 01:02:03,340 und jetzt werden wir durchlaufen alle Symbole, die an uns zurück zurückgegeben wurden. 1012 01:02:03,340 --> 01:02:06,500 Denken Sie daran, weil wir gesagt dataType habe: 'json', ist dies nicht ein String. 1013 01:02:06,500 --> 01:02:09,500 Dies ist bereits ein Array für uns. Das ist wirklich cool. 1014 01:02:09,500 --> 01:02:13,790 Wir können einfach sagen: "Ich möchte, dass du eine Liste Element anhängen." 1015 01:02:13,790 --> 01:02:16,000 Wir werden es im Inneren eines eines Elements stellen Seite, dass 1016 01:02:16,000 --> 01:02:19,030 wir geben es eine Klasse von Anregungen, damit wir wissen, was es ist, 1017 01:02:19,030 --> 01:02:23,880 und jetzt hier ist das Symbol, dass wir wieder von Yahoo! Finance. 1018 01:02:23,880 --> 01:02:27,230 >> Sobald wir ein Element für jedes der Symbole, die wir zurück bekommen habe geschaffen, 1019 01:02:27,230 --> 01:02:30,100 wir wollen einfach nur zum Verschließen der Liste. 1020 01:02:30,100 --> 01:02:33,040 So, jetzt Vorschläge für diese kleine HTML-Fragment 1021 01:02:33,040 --> 01:02:37,860 , wenn sie auf einer Seite unterbringen wird die Liste der Dinge, die wir suchen sein. 1022 01:02:37,860 --> 01:02:41,070 Lassen Sie uns nun tatsächlich legte, dass auf der Seite. 1023 01:02:41,070 --> 01:02:46,390 Um dies zu tun, dass ich tatsächlich eine andere leere div erstellt und ich haben ihm eine ID von Anregungen. 1024 01:02:46,390 --> 01:02:52,520 Ähnlich wie setzen wir den Inhalt des div, die den Preis der Bestandsdaten angezeigt werden sollen, 1025 01:02:52,520 --> 01:02:58,600 wir wollen einfach nur, um die Inhalte dieser div was diese Zeichenfolge gesetzt 1026 01:02:58,600 --> 01:03:00,290 welche enthält diese Symbole. 1027 01:03:00,290 --> 01:03:07,650 Durch die Nutzung dieser HTML-Methode ist dies Vorschläge variable, diese Zeichenfolge, eine Reihe von HTML. 1028 01:03:07,650 --> 01:03:13,490 Ich möchte, dass die HTML-nehmen und es im Inneren des div als Anregungen. 1029 01:03:13,490 --> 01:03:15,680 Wir haben nur etwas auf das DOM angehängt jetzt. 1030 01:03:15,680 --> 01:03:20,360 Wir haben einige neue Elemente in die DOM hinzugefügt, dass wir jetzt auf der Seite anzuzeigen. 1031 01:03:20,360 --> 01:03:22,540 Mal sehen, wie das aussieht. 1032 01:03:22,540 --> 01:03:29,110 Wenn wir in quote6 laden und jetzt sind wir wieder kommen, 1033 01:03:29,110 --> 01:03:34,480 wenn ich jetzt eingeben AAPL starten, haben wir nicht mehr, dass die Bootstrap autocomplete, 1034 01:03:34,480 --> 01:03:38,470 aber jetzt haben wir diese Liste, dass wir uns selbst gemacht. 1035 01:03:38,470 --> 01:03:43,230 Dies ist ein wenig hässlicher als der Bootstrap typeahead, zum Beispiel 1036 01:03:43,230 --> 01:03:45,580 sondern ermöglicht es uns, eine andere Sache zu tun. 1037 01:03:45,580 --> 01:03:48,660 Als wir an diesem Bootstrap Plugin suchen, 1038 01:03:48,660 --> 01:03:52,590 sahen wir, dass, wenn wir autocompleted, einer der autocomplete Werte AAPL war. 1039 01:03:52,590 --> 01:03:54,820 Das ist vielleicht nicht so hilfreich. 1040 01:03:54,820 --> 01:03:59,100 Als Benutzer kann ich nicht sofort erkennen alle an den Aktienmärkten Symbole. 1041 01:03:59,100 --> 01:04:02,370 Was ich bin wohl eher zu erkennen sind der Gesellschaft tatsächlichen Namen. 1042 01:04:02,370 --> 01:04:05,310 So wäre es nicht wirklich hilfreich, wenn anstatt zu sagen AAPL 1043 01:04:05,310 --> 01:04:07,970 das sagte so etwas wie Apple Inc. 1044 01:04:07,970 --> 01:04:12,240 Da rollten wir diese haben uns, können wir wirklich problemlos tun. 1045 01:04:12,240 --> 01:04:17,630 Öffnen wir unser letztes Zitat Datei hier, so quote7. 1046 01:04:17,630 --> 01:04:23,200 >> Dasselbe. Ich habe gerade eine andere PHP-Datei, die zu uns zurückkehren wird mehr als nur die Symbole erstellt. 1047 01:04:23,200 --> 01:04:25,550 Es wird uns auch wieder der Gesellschaft Namen. 1048 01:04:25,550 --> 01:04:28,150 Und so tun wir das Gleiche. Wir machen eine AJAX-Anforderung. 1049 01:04:28,150 --> 01:04:32,370 Sobald die Anforderung abgeschlossen ist, werden wir diese Funktion hier auszuführen, 1050 01:04:32,370 --> 01:04:36,520 und diese Funktion wird der Aufbau eines großen Reihe von Elementen. 1051 01:04:36,520 --> 01:04:39,520 Aber der Unterschied ist hier, dass der Wert dieser Listen nicht mehr nur das Symbol, 1052 01:04:39,520 --> 01:04:45,370 es ist jetzt auch der Name. 1053 01:04:45,370 --> 01:04:47,070 So haben wir ein kleines Problem. 1054 01:04:47,070 --> 01:04:51,590 Wenn wir unsere Suche verwendet werden, müssen wir irgendwie weitergeben das Symbol. 1055 01:04:51,590 --> 01:04:54,950 Wir können nicht passieren Lookup etwas wie Microsoft Corporation. 1056 01:04:54,950 --> 01:04:57,900 Wir müssen es MSFT passieren. 1057 01:04:57,900 --> 01:05:01,640 Wenn wir das Schreiben von HTML, wir haben viele nette eingebaute Attribute. 1058 01:05:01,640 --> 01:05:05,440 Ein A könnte mit ihm ein href oder eine Klasse zugeordnet haben. 1059 01:05:05,440 --> 01:05:08,230 Aber was wir wirklich brauchen, ist jetzt für jeden dieser Links 1060 01:05:08,230 --> 01:05:11,120 eine Börsenkürzel zugeordnet sein. 1061 01:05:11,120 --> 01:05:14,240 Es gibt keine eingebaute HTML-Attribut für Börsenkürzel, 1062 01:05:14,240 --> 01:05:21,010 aber glücklicherweise erlaubt HTML5 uns, unsere eigene Attribute erstellen zu sein, was wir wollen. 1063 01:05:21,010 --> 01:05:24,620 Indem man sagt, Daten-Symbol, ich habe ein neues Attribut eingeführt 1064 01:05:24,620 --> 01:05:29,350 dessen Namen ich gerade erfunden, und das ist okay, weil ich es vorangestellt mit diesen Daten. 1065 01:05:29,350 --> 01:05:34,270 Wir werden innerhalb von dort das Symbol aus dem Lager, zu speichern. 1066 01:05:34,270 --> 01:05:39,590 Was das bedeutet, ist, dass, obwohl wir die Anzeige den Wert des Firmennamens 1067 01:05:39,590 --> 01:05:43,380 Innere unserer autocomplete, wir sind immer noch die Erinnerung an die Symbol 1068 01:05:43,380 --> 01:05:47,110 Das ist mit den einzelnen Unternehmen verbunden. 1069 01:05:47,110 --> 01:05:50,350 Die Art, wie wir tun, dass du im Inneren dieses Elements selber. 1070 01:05:50,350 --> 01:05:52,930 Das heißt also müssen wir eine weitere Änderung vornehmen. 1071 01:05:52,930 --> 01:05:57,090 Wenn wir es jetzt klicken, müssen wir tatsächlich nutzen das Symbol Attribut 1072 01:05:57,090 --> 01:06:00,220 anstatt nur seinen Wert. 1073 01:06:00,220 --> 01:06:05,010 Wenn wir wieder auf, legen wir einen Event-Handler für Vorschläge. 1074 01:06:05,010 --> 01:06:09,280 Wann immer einer dieser Vorschläge wird nun angeklickt wird, möchte ich etwas tun. 1075 01:06:09,280 --> 01:06:13,160 Was ich tun möchte, ist Ändern Sie den Wert dieses Eingabefeld. 1076 01:06:13,160 --> 01:06:16,100 Jetzt möchte ich das gleiche val-Funktion eingestellt. 1077 01:06:16,100 --> 01:06:21,060 >> So ohne Argumente dieser val-Funktion gibt Ihnen, was bereits in das Textfeld 1078 01:06:21,060 --> 01:06:27,070 aber wenn man es ein String, es geht um die Zeichenfolge zu nehmen und ihn in das Textfeld ein. 1079 01:06:27,070 --> 01:06:28,980 Ich bin der Auswahl seiner Textfeld in der gleichen Weise. 1080 01:06:28,980 --> 01:06:31,230 Sein Name ist Symbol in der Form-quote. 1081 01:06:31,230 --> 01:06:37,540 Jetzt schicke ich sie den Wert des Attributs Daten-Symbol. 1082 01:06:37,540 --> 01:06:41,560 Dieses Ding hier ist neu, diese $ (this). 1083 01:06:41,560 --> 01:06:46,850 Was dies bezieht sich auf das Element, das angeklickt wurde. 1084 01:06:46,850 --> 01:06:50,880 Wir können hier sehen, dass wir nicht Anbringen eines Click-Ereignis 1085 01:06:50,880 --> 01:06:54,690 zu jedem Element mit einer Klasse der Suggestion individuell. 1086 01:06:54,690 --> 01:06:57,140 Vielmehr sind wir nähern uns das ein wenig anders. 1087 01:06:57,140 --> 01:07:01,700 Stattdessen wir sagen, wenn irgendetwas in dieser Vorschläge div, 1088 01:07:01,700 --> 01:07:04,080 was denken Sie daran ist nur der Behälter für diese Liste, 1089 01:07:04,080 --> 01:07:10,150 Wenn etwas in diesem div geklickt und es hat eine Klasse der Suggestion, 1090 01:07:10,150 --> 01:07:13,000 Ich möchte dieses Ereignis ausgelöst. 1091 01:07:13,000 --> 01:07:17,490 Im Grunde, was das bedeutet, wir tun können ist, können wir diese gleichen Event-Handler wiederverwenden 1092 01:07:17,490 --> 01:07:20,000 für all die Dinge in der Liste. 1093 01:07:20,000 --> 01:07:22,080 So haben wir nicht, um ein Event-Handler für das erste Element haben 1094 01:07:22,080 --> 01:07:24,550 und eine andere Ereignisbehandlungsroutine für das zweite Element. 1095 01:07:24,550 --> 01:07:29,880 Wir können stattdessen sagen: "Ich will das gleiche Event-Handler, um alles in meiner Liste anwenden." 1096 01:07:29,880 --> 01:07:34,420 Aber wir müssen irgendwie wissen, welches Element geklickt wurde. 1097 01:07:34,420 --> 01:07:38,450 Dieses "this" Schlüsselwort stellt genau dies. 1098 01:07:38,450 --> 01:07:42,360 Dies ist das Objekt, das nur durch den Benutzer geklickt wurde. 1099 01:07:42,360 --> 01:07:47,680 Wenn ich klickte nur den dritten Link, stellt dies die Element dieser dritten Link, 1100 01:07:47,680 --> 01:07:51,670 was bedeutet, dass ich ihr Attribut, Daten-Symbol zu erhalten, 1101 01:07:51,670 --> 01:07:57,760 was wir wissen, hat das Symbol, das mit der Firma I gerade geklickt verknüpft ist enthalten. 1102 01:07:57,760 --> 01:08:04,550 Wenn wir springen zurück zu unserer Finanz-Seite 1103 01:08:04,550 --> 01:08:08,580 können wir jetzt, dass ich einmal eingeben etwas wie msft zu beginnen, 1104 01:08:08,580 --> 01:08:11,220 man nicht mehr immer nur die Aktien Symbole, 1105 01:08:11,220 --> 01:08:13,720 wir bekommen jetzt die eigentlichen Unternehmen. 1106 01:08:13,720 --> 01:08:20,410 Aber wenn ich auf eines dieser Unternehmen auf, 1107 01:08:20,410 --> 01:08:25,180 können wir sehen, dass wir tatsächlich bevölkern das Textfeld nicht mit dem Namen des Unternehmens 1108 01:08:25,180 --> 01:08:29,850 aber mit was wurde innerhalb dieser Daten Attribute gespeichert. 1109 01:08:29,850 --> 01:08:32,880 Und so, wenn ich tatsächlich zu inspizieren eines dieser Elemente per Rechtsklick 1110 01:08:32,880 --> 01:08:36,200 und klicken Inspect Element, können wir wirklich sehen, wie das aussieht. 1111 01:08:36,200 --> 01:08:40,290 >> Erinnerung: Dies ist etwas, das wir erstellt Inneren, dass for-Schleife 1112 01:08:40,290 --> 01:08:42,649 als wir den Aufbau dieser Zeichenfolge von HTML. 1113 01:08:42,649 --> 01:08:47,870 Wir können hier sehen, dass diese Daten-Symbol den Wert MSFT, was ausgezeichnet ist hat. 1114 01:08:47,870 --> 01:08:49,189 Das ist, was wir erwartet hatten. 1115 01:08:49,189 --> 01:08:53,170 Das ist das Symbol und das ist, wie wir den Wert, den wir verwenden, benötigt haben 1116 01:08:53,170 --> 01:08:56,140 Innere dieses Textfeld ein. 1117 01:08:56,140 --> 01:08:58,850 Das ist genug für das Angebot Form, weil das ist irgendwie langweilig. 1118 01:08:58,850 --> 01:09:02,990 Lassen Sie uns nur machen ein paar schnelle Verbesserungen unserer Portfolio-Seite. 1119 01:09:02,990 --> 01:09:08,109 Wenn Sie CS50 Finanzen für eine Weile verwendet habe, und starten Sie den Kauf und Verkauf eine Menge von Aktien, 1120 01:09:08,109 --> 01:09:11,300 schließlich diese Tabelle wird ziemlich groß, 1121 01:09:11,300 --> 01:09:13,850 und du wirst einen Börsenticker, natürlich wollen. 1122 01:09:13,850 --> 01:09:20,350 Sobald der Tisch ist wirklich, wirklich groß, könnte es sein, für den Benutzer nützlich zu versuchen, über sie zu suchen. 1123 01:09:20,350 --> 01:09:23,290 Innerhalb der Suchbox, wenn ich schreibe so etwas wie Disney starten 1124 01:09:23,290 --> 01:09:26,359 und suchen für meine Mickey Mouse Lager, können wir sehen, dass die Tabelle wird nun Filterung 1125 01:09:26,359 --> 01:09:28,189 basierend auf was ich gerade eingetippt 1126 01:09:28,189 --> 01:09:31,640 Diese Funktionalität sieht super kompliziert, aber es ist wirklich, wirklich einfach 1127 01:09:31,640 --> 01:09:33,859 mit jQuery und JavaScript. 1128 01:09:33,859 --> 01:09:39,189 Diese portfolio.php Datei enthält eine JavaScript-Datei namens portfolio.js. 1129 01:09:39,189 --> 01:09:41,130 Werfen wir einen Blick auf, dass. 1130 01:09:41,130 --> 01:09:44,890 So html, js, Portfolio. 1131 01:09:44,890 --> 01:09:49,210 Hier ist, wo wir tun, dass die Suche auf dem Tisch sind. 1132 01:09:49,210 --> 01:09:52,750 Das erste, was ich tun müssen, ist einen Ereignishandler auf dieses Textfeld 1133 01:09:52,750 --> 01:09:55,760 weil wir wissen, dass wir unsere Filterfunktion zu feuern will 1134 01:09:55,760 --> 01:09:59,800 jedes Mal, wenn der Benutzer auf etwas, weil wir keine Zeit haben für die Suche-Tasten. 1135 01:09:59,800 --> 01:10:03,000 Das erste, was wir tun müssen, ist herauszufinden, was der Nutzer für die Suche, 1136 01:10:03,000 --> 01:10:04,780 genau wie wir zuvor. 1137 01:10:04,780 --> 01:10:11,320 Dieses Schlüsselwort bezieht sich auf das aktuelle Element der Benutzer interagiert wird. 1138 01:10:11,320 --> 01:10:14,070 >> Da der Benutzer mit dem Suchfeld interagieren, 1139 01:10:14,070 --> 01:10:17,020 $ This stellt das Suchfeld ein, 1140 01:10:17,020 --> 01:10:21,820 so this.val gibt uns, was drin ist neben dem Suchfeld der Benutzer gerade eingeben wird. 1141 01:10:22,810 --> 01:10:27,320 So, jetzt, was wir tun wollen wollen wir durchlaufen alle Zeilen 1142 01:10:27,320 --> 01:10:29,240 im Inneren unserer Tabelle. 1143 01:10:29,240 --> 01:10:35,630 Um alle Zeilen in unserer Tabelle wählen, gab ich, dass die Tabelle eine ID der Tabelle Portfolio 1144 01:10:35,630 --> 01:10:39,060 und jede Zeile wird durch ein TR-Element repräsentiert, 1145 01:10:39,060 --> 01:10:42,080 so dieser Selektor wird mir ein großes Array zurück 1146 01:10:42,080 --> 01:10:44,370 aller Zeilen in meinem Tisch. 1147 01:10:44,370 --> 01:10:47,010 Jetzt möchte ich durchlaufen das Array. 1148 01:10:47,010 --> 01:10:52,390 Ich könnte Ihnen eine for-Schleife, aber jQuery tatsächlich bietet uns die nette Funktion namens "jeder." 1149 01:10:52,390 --> 01:10:55,220 Was jeder tut, ist jeder nimmt ein Argument, 1150 01:10:55,220 --> 01:10:57,090 und dieses Argument ist eine Funktion. 1151 01:10:57,090 --> 01:11:02,760 Was es tun werden, ist, es wird diese Funktion auf jedes Element innerhalb dieser Liste gelten. 1152 01:11:02,760 --> 01:11:05,550 Diese Funktion nimmt ein Argument, das e ist, 1153 01:11:05,550 --> 01:11:10,090 und wenn diese Funktion ausgeführt wird, wird diese E jetzt mit der ersten Zeile ersetzt sein können, 1154 01:11:10,090 --> 01:11:12,070 dann die zweite Zeile, und dann die dritte Zeile. 1155 01:11:12,070 --> 01:11:15,150 Auf diese Weise ist dies dasselbe wie läuft eine for-Schleife 1156 01:11:15,150 --> 01:11:21,360 und dann herauszufinden das aktuelle Element auf der Index innerhalb der for-Schleife basiert. 1157 01:11:21,360 --> 01:11:24,750 Bei jeder Iteration für jedes dieser Elemente in der Tabelle, 1158 01:11:24,750 --> 01:11:30,560 Ich möchte, wenn der Text des Elements zu überprüfen - den Text der Zelle innerhalb der Zeile - 1159 01:11:30,560 --> 01:11:33,130 übereinstimmt, was ich suche. 1160 01:11:33,130 --> 01:11:36,390 Dieses große lange Reihe von Befehlen ist, wie ich könnte das tun. 1161 01:11:36,390 --> 01:11:40,900 Zunächst einmal, dieses bezieht sich nun auf - weil sie innerhalb einer neuen Funktion ist - 1162 01:11:40,900 --> 01:11:45,020 dies ist nun die aktuelle Zeile in der Tabelle. 1163 01:11:45,020 --> 01:11:47,340 Ich will die aktuelle Zeile in der Tabelle zu nehmen, 1164 01:11:47,340 --> 01:11:49,950 und ich möchte alle seine Kinder zu bekommen. 1165 01:11:49,950 --> 01:11:51,940 Denken Sie daran, ist das DOM eine hierarchische Baumstruktur, 1166 01:11:51,940 --> 01:11:54,200 was bedeutet, dass Elemente eine Anzahl von Kindern haben. 1167 01:11:54,200 --> 01:12:00,180 >> This. Kinder-Funktion wird zu mir zurückkehren ein Array aller Elemente 1168 01:12:00,180 --> 01:12:03,240 das sind die Kinder, in diesem Fall kann eine Zeile in der Tabelle. 1169 01:12:03,240 --> 01:12:07,150 Dies ist einfach nur die Zellen innerhalb der Zeile. 1170 01:12:07,150 --> 01:12:09,230 Ich möchte nur auf die erste Zelle suchen. 1171 01:12:09,230 --> 01:12:13,090 This. Erste Funktion, sagt mir das erste Element in diesem Array. 1172 01:12:13,090 --> 01:12:17,070 Dann wird die Text-Funktion sagt zu mir genau, was drin ist dieser Zelle 1173 01:12:17,070 --> 01:12:19,530 da ich über diesem Text suchen möchten. 1174 01:12:19,530 --> 01:12:21,040 Schließlich wollen wir wandeln es in Kleinbuchstaben, 1175 01:12:21,040 --> 01:12:23,940 so können wir tun Text Groß-/Kleinschreibung Abfragen. 1176 01:12:23,940 --> 01:12:29,990 Schließlich wollen wir sehen, ob die Zeichenfolge innerhalb einer Tabelle enthält den String, nach dem gesucht. 1177 01:12:29,990 --> 01:12:32,980 Die indexOf JavaScript-Funktion genau das tut. 1178 01:12:32,980 --> 01:12:37,060 Es sagt uns, ob diese Zeichenfolge eine andere Zeichenfolge enthält. 1179 01:12:37,060 --> 01:12:40,150 Wenn es stimmt, dass die Zelle enthält, was ich suche, 1180 01:12:40,150 --> 01:12:42,140 dann möchte ich sicherstellen, dass es angezeigt ist. 1181 01:12:42,140 --> 01:12:45,330 Die Show-Methode wird sagen: "Zeigen Sie auf das Element." 1182 01:12:45,330 --> 01:12:50,350 Ist dies nicht der Fall ist, dann heißt das, was ich für nicht enthalten suchen 1183 01:12:50,350 --> 01:12:53,550 innerhalb dieser Reihe, und so möchte ich mich verstecken ist vom Benutzer. 1184 01:12:53,550 --> 01:12:59,240 Das erreicht dieses schöne Filterwirkung denen keine länger wir die gesamte Tabelle zu sehen. 1185 01:12:59,240 --> 01:13:01,480 Wenn Sie im Umgang mit diesen ticker machen interessiert, 1186 01:13:01,480 --> 01:13:04,180 wir die Quelle online zu stellen. Aber es ist wirklich einfach. 1187 01:13:04,180 --> 01:13:09,860 JQuery hat awesome Methoden für diese Animationen und Manipulation CSS-Eigenschaften. 1188 01:13:09,860 --> 01:13:11,020 So, das wars für mich. 1189 01:13:11,020 --> 01:13:15,560 >> Was liegt dann vor? Wie Sie in ein paar Tagen sehen werden, ist die endgültige Projekte Vorschlag fällig. 1190 01:13:15,560 --> 01:13:17,730 Die letzten Projekte Vorschlag wird Sie bitten, ein paar Fragen, 1191 01:13:17,730 --> 01:13:19,420 aber unter ihnen drei Meilensteine ​​sein - 1192 01:13:19,420 --> 01:13:22,840 ein "gut" Meilenstein, ein besser Meilenstein und ein a best. 1193 01:13:22,840 --> 01:13:25,870 Die Idee ist wirklich an euch helfen, Ihre Erwartungen 1194 01:13:25,870 --> 01:13:29,160 so dass minimal du wirst glücklich sein mit dem Ausgang des endgültigen Projekts 1195 01:13:29,160 --> 01:13:32,060 und es wird als "gut" so weit wie Sie betroffen sind. 1196 01:13:32,060 --> 01:13:34,540 Aber dann im Interesse der immer Sie gerade ein wenig, um etwas zu erreichen bessere 1197 01:13:34,540 --> 01:13:37,680 oder etwas am besten, wir auch schieben Sie auf das, wie auch sortieren. 1198 01:13:37,680 --> 01:13:40,660 Der CS50 Hack-a-thon, mittlerweile ist in ein paar Wochen. 1199 01:13:40,660 --> 01:13:44,340 Normalerweise tun wir dies auf einer Lotterie Basis Basis wegen der Zinsen, 1200 01:13:44,340 --> 01:13:47,680 Aber die Chancen stehen wir ein paar hundert von uns im Shuttle-Busse bringen vom Harvard Square 1201 01:13:47,680 --> 01:13:51,540 bis Kendall Square, wo Microsoft hat eine schöne Anlage treffend als "NERD" - 1202 01:13:51,540 --> 01:13:53,830 Die New England Forschungs-und Entwicklungszentrum. 1203 01:13:53,830 --> 01:13:56,380 Wir werden es schaffen um 8 Uhr werden wir etwas zu essen haben. 1204 01:13:56,380 --> 01:13:58,160 Rund 01.00 Uhr müssen wir noch mehr Nahrung. 1205 01:13:58,160 --> 01:14:02,150 Um 5 Uhr, wenn Sie noch wach sind wir den Kopf über IHOP oder nehmen Sie zurück zum Campus. 1206 01:14:02,150 --> 01:14:04,380 Das Ziel befindet sich in letzten Projekte tauchen 1207 01:14:04,380 --> 01:14:06,190 Neben der Mitschüler und Mitarbeiter. 1208 01:14:06,190 --> 01:14:08,280 Dann ein paar Tage später ist der CS50 Fair, 1209 01:14:08,280 --> 01:14:10,990 das ist wirklich gedacht als Gelegenheit für euch die Arbeit zu präsentieren, um 1210 01:14:10,990 --> 01:14:12,700 und Leistungen für das Semester 1211 01:14:12,700 --> 01:14:15,610 während Tuchfühlung miteinander und bekommen ein Gefühl dafür, was jeder tat. 1212 01:14:15,610 --> 01:14:17,850 Mit dieser sagte, vielen Dank an Tommy und Joseph, 1213 01:14:17,850 --> 01:14:19,960 und wir werden Sie am Montag zu sehen. 1214 01:14:19,960 --> 01:14:24,070  [Applaus]