1 00:00:00,000 --> 00:00:01,940 >> [Musik zu spielen] 2 00:00:01,940 --> 00:00:11,130 3 00:00:11,130 --> 00:00:14,620 >> DAVID MALAN: Dies ist CS 50 und Dies ist der Beginn der neunten Woche. 4 00:00:14,620 --> 00:00:18,240 Und was wir dachten, wir heute tun würde nicht nur das Kapitel über letzte Woche zu schließen 5 00:00:18,240 --> 00:00:22,670 Material, wo wir auf dem Server fokussiert Seite Web-Programmierung mit PHP und SQL, 6 00:00:22,670 --> 00:00:23,549 einige Datenbank Zeug. 7 00:00:23,549 --> 00:00:25,590 Wir werden über etwas sprechen Sicherheit heute und dann 8 00:00:25,590 --> 00:00:29,590 Übergang zu einer Client-Seite Programmier Sprache als JavaScript bekannt. 9 00:00:29,590 --> 00:00:31,330 Aber zuerst einige Erlösung. 10 00:00:31,330 --> 00:00:35,030 >> Sie können daran erinnern auf Mittwoch, machte ich mich 11 00:00:35,030 --> 00:00:37,550 um eine Website zu schreiben, dass nahm im Eingangs Benutzers 12 00:00:37,550 --> 00:00:41,120 durch ein HTML-Formular, dass dann gespeichert dass Benutzereingaben Namen, Telefon 13 00:00:41,120 --> 00:00:43,124 Zahlen und Mobiltelefon Träger in der Datenbank. 14 00:00:43,124 --> 00:00:45,540 Und dann hatte ich einen kleinen Befehl Zeilenskript geschrieben in PHP 15 00:00:45,540 --> 00:00:47,956 das sollte laufen in den Zeilen in der Datenbank 16 00:00:47,956 --> 00:00:49,400 und senden Sie Textnachrichten. 17 00:00:49,400 --> 00:00:53,870 Trotz mehrerer, mehrere Versuche, die wir nicht diese Funktion zu erhalten bis zum Ende. 18 00:00:53,870 --> 00:00:57,820 >> So verbrachte ich diese ganze Woche arbeiten an diesem Code, um uns über den Punkt zu bekommen 19 00:00:57,820 --> 00:01:01,220 wo wir aufgehört, wobei alle Ich habe bis zum Ende vom Mittwoch 20 00:01:01,220 --> 00:01:05,500 war diese Textnachricht von Margo, wie ich gekämpft, 21 00:01:05,500 --> 00:01:09,940 gefolgt von einer Textnachricht von einem anderen Mitschüler, Du hast dieses David bekam. 22 00:01:09,940 --> 00:01:14,030 Dieses folgte, wunderbar ermutigend. 23 00:01:14,030 --> 00:01:15,840 Ging weiter, sehr ermutigend. 24 00:01:15,840 --> 00:01:20,960 Ich habe es fast bis dann- und das ist die Note wir am Mittwoch beendet. 25 00:01:20,960 --> 00:01:25,850 Und dann tatsächlich vielleicht mein Favorit, einen Moment später, das kam in. 26 00:01:25,850 --> 00:01:27,000 Verdammt Livestream. 27 00:01:27,000 --> 00:01:31,080 >> So heute, beheben wir diese mit einer schnellen schauen, was ich seit getan. 28 00:01:31,080 --> 00:01:35,440 Also alles dieses Codes ist verfügbar Online aus der vergangenen Woche, der Woche acht, 29 00:01:35,440 --> 00:01:36,300 Quellcode. 30 00:01:36,300 --> 00:01:39,425 Und du wirst sehen, dass ich durchmachte, und ich tatsächlich Dinge gereinigt ein bisschen. 31 00:01:39,425 --> 00:01:42,080 Ich stellte ein paar andere Merkmale einer SQL-Datenbank. 32 00:01:42,080 --> 00:01:45,300 Zum Beispiel, anstatt so stellen Träger var char 33 00:01:45,300 --> 00:01:47,310 wie ich denke, dass ich im laufenden Betrieb hat in der vergangenen Woche. 34 00:01:47,310 --> 00:01:49,820 Ich definierte sie stattdessen als was heißt eine Enumeration. 35 00:01:49,820 --> 00:01:53,310 >> Und einige von euch vielleicht gesehen haben wie wir erkundet C. Enum ist eigentlich 36 00:01:53,310 --> 00:01:56,820 ein Feature von C, wo man aufzuzählen eine ganze Reihe von Konstanten 37 00:01:56,820 --> 00:01:59,640 und ordnen sie automatisch Werte, wie eine, zwei, drei, vier 38 00:01:59,640 --> 00:02:01,330 ohne Festcodenummern. 39 00:02:01,330 --> 00:02:04,780 Also SQL unterstützt die gleiche, wobei, wenn Sie ein Datenbankfeld haben, dass nur Sie 40 00:02:04,780 --> 00:02:09,389 möchte Sie auf einen endlichen nehmen Werte können Sie buchstäblich geben es 41 00:02:09,389 --> 00:02:13,120 wie ich dort vier getan beliebte US Handy Träger. 42 00:02:13,120 --> 00:02:13,819 >> Also tat ich das. 43 00:02:13,819 --> 00:02:16,610 Und ich habe eine Reihe von Änderungen, wie gut, von denen die wichtigste 44 00:02:16,610 --> 00:02:20,090 wurde auf Per E-mail zu arbeiten, weil Rückruf dass dieses Programm stützte sich auf die 45 00:02:20,090 --> 00:02:23,470 in der Regel eine E-Mail an genannt SMS-Gateway, das nur 46 00:02:23,470 --> 00:02:27,670 eine andere Art zu sagen, dass Verizon und AT & T, und andere Leute unterstützen einen Server, 47 00:02:27,670 --> 00:02:30,740 wodurch dann, wenn sie empfängt E-Mail, wandelt sie sie SMS 48 00:02:30,740 --> 00:02:33,290 und sendet einen Text Nachricht an ein anderes Telefon. 49 00:02:33,290 --> 00:02:37,010 Also, wenn ich das richtig, Hier ist eine neue und verbesserte Form 50 00:02:37,010 --> 00:02:39,259 das wird zu reden neue und verbesserte Code, der 51 00:02:39,259 --> 00:02:40,300 Sie können mit online spielen. 52 00:02:40,300 --> 00:02:44,140 Und es wird hoffentlich meine Telefon Piepton in nur einem Augenblick. 53 00:02:44,140 --> 00:02:47,240 >> Also erstmal, ich werde in meinem Namen geben. 54 00:02:47,240 --> 00:02:51,400 Zweitens werde ich nicht dies diesmal tun. 55 00:02:51,400 --> 00:02:53,920 Ich werde tun, Inspect Element. 56 00:02:53,920 --> 00:02:56,710 Und dies ist nur eine Kleinigkeit so dass ich nicht 57 00:02:56,710 --> 00:02:59,250 erstellen Stunden Postproduktion arbeiten, wie ich beim letzten Mal. 58 00:02:59,250 --> 00:03:02,300 Es ist jetzt meine Telefonnummer. 59 00:03:02,300 --> 00:03:03,560 >> Ich werde Verizon auswählen. 60 00:03:03,560 --> 00:03:10,260 Und hier, lassen Sie uns auf dieser Mikrofon einzuschalten hier, und zielen diese auf mein Handy hier. 61 00:03:10,260 --> 00:03:13,130 Ich werde auf Registrieren, die hoffentlich 62 00:03:13,130 --> 00:03:14,530 steckte es in die Datenbank. 63 00:03:14,530 --> 00:03:16,780 Jetzt werde ich auf dem Sprung Kommandozeilenprogramm, das 64 00:03:16,780 --> 00:03:20,825 Rückruf wurde dot Strich genannt Text und drücken Sie die Daumen. 65 00:03:20,825 --> 00:03:24,092 66 00:03:24,092 --> 00:03:26,527 Auf geht's. 67 00:03:26,527 --> 00:03:27,501 >> [TELEFON DINGS] 68 00:03:27,501 --> 00:03:28,962 >> [Applaus] 69 00:03:28,962 --> 00:03:31,815 70 00:03:31,815 --> 00:03:34,940 DAVID MALAN: Also mehr Spaß als this-- es macht Spaß, natürlich, wenn ich in sie zu erhalten. 71 00:03:34,940 --> 00:03:38,004 Aber es macht mehr Spaß, dachte ich, wenn wir erstellt eine jener Filmmomente 72 00:03:38,004 --> 00:03:40,420 wo wie etwas wirklich Schlimmes ist in der Welt passiert, 73 00:03:40,420 --> 00:03:42,860 und wie alle NSA Volks Handys beginnen zu piepen 74 00:03:42,860 --> 00:03:44,860 mit Textnachrichten Alarmieren sie zu dieser Tatsache. 75 00:03:44,860 --> 00:03:47,026 Also dachte ich, wir würden versuchen hier die gleiche, neu zu erstellen, 76 00:03:47,026 --> 00:03:49,610 wodurch nicht mit einer Datenbank, Ich stattdessen im Voraus 77 00:03:49,610 --> 00:03:51,490 schrieb ein Programm, das wie folgt aussieht. 78 00:03:51,490 --> 00:03:53,660 >> Dies ist ein index.php-- und ich diesen Code online gestellt 79 00:03:53,660 --> 00:03:56,710 als well-- die offenbar nur macht form.php, 80 00:03:56,710 --> 00:04:00,990 Verwendung eines MVC Stil Paradigma, dass wir reden über genauer in Problem-Set 81 00:04:00,990 --> 00:04:01,650 Sieben. 82 00:04:01,650 --> 00:04:02,910 Diese Form ist ziemlich einfach. 83 00:04:02,910 --> 00:04:06,634 Es wird ein vorlegen Datei here.php per Post genannt. 84 00:04:06,634 --> 00:04:09,300 Und es ist offenbar wollte fragen nach einem Namen und einer Telefonnummer, 85 00:04:09,300 --> 00:04:11,400 und dann mittels der sogenannten Wählen Sie das Menü, es ist 86 00:04:11,400 --> 00:04:14,250 gehen, um Ihnen mindestens vier beliebte US Handy Träger, 87 00:04:14,250 --> 00:04:17,470 und dann können Sie effektiv nehmen die Teilnahme hier klicken. 88 00:04:17,470 --> 00:04:20,471 >> Und hier dessen wird zu leihen einige der Code vom letzten Mal. 89 00:04:20,471 --> 00:04:22,553 Und wenn Sie gerade überfliegen diese, Sie werden sehen, dass es 90 00:04:22,553 --> 00:04:23,900 eine ganze Reihe von Fehlerprüfung. 91 00:04:23,900 --> 00:04:26,640 Aber die Schönheit am Ende ist, dass wir nicht schriftlich heute zu einer Datenbank. 92 00:04:26,640 --> 00:04:29,130 Wir halten es einfach und nur das Versenden von hoffentlich 93 00:04:29,130 --> 00:04:32,190 eine Textnachricht über Funktions I schrieb in den letzten paar Tagen Anruf 94 00:04:32,190 --> 00:04:36,270 Text, der in Funktionen ist. php, Das ist wieder online zur Verfügung. 95 00:04:36,270 --> 00:04:38,210 >> Also, wenn möchten Sie in diesem teilzunehmen. 96 00:04:38,210 --> 00:04:40,190 Wir gehen nicht zu sein nichts zu speichern. 97 00:04:40,190 --> 00:04:43,809 Gehen Sie zu dieser URL hier in Echtzeit. 98 00:04:43,809 --> 00:04:46,850 Sie legt ihn jetzt noch nicht, aber wir sehen, wenn wir einen dieser Film haben 99 00:04:46,850 --> 00:04:49,830 Momente, in denen jedermanns Handy gibt einen Signalton aus, hoffentlich nur 100 00:04:49,830 --> 00:04:53,580 einmal in diesem Jahr anders als im Jahr 2011 wo das ging fürchterlich schief. 101 00:04:53,580 --> 00:04:58,910 Und sobald Sie an diese Adresse gehen, Sie sollten ein super einfaches Formular sehen 102 00:04:58,910 --> 00:05:03,884 dass, wenn Sie einen Namen, ein Handy Nummer und eine Mobiltelefonträger, 103 00:05:03,884 --> 00:05:06,175 passt die Liste gibt, gehen vor und füllen das Formular aus. 104 00:05:06,175 --> 00:05:07,880 Aber nicht schlagen unterbreiten nur noch. 105 00:05:07,880 --> 00:05:10,850 >> Die Form geht um so aussehen. 106 00:05:10,850 --> 00:05:13,660 Gehen Sie weiter und geben Sie Ihren Namen, Ihre Telefonnummer. 107 00:05:13,660 --> 00:05:17,670 Oop, ist jemand vor der Kurve gehen. 108 00:05:17,670 --> 00:05:18,170 Es ist in Ordnung. 109 00:05:18,170 --> 00:05:19,340 OK, jeder hat das Formular ausgefüllt. 110 00:05:19,340 --> 00:05:21,400 Dies sollte auf eine Arbeit Telefon, auch, wenn Sie wollen. 111 00:05:21,400 --> 00:05:23,695 Alles klar, auf die Plätze, fertig, los. 112 00:05:23,695 --> 00:05:24,195 Hit Hier. 113 00:05:24,195 --> 00:05:27,275 114 00:05:27,275 --> 00:05:27,775 Was? 115 00:05:27,775 --> 00:05:31,140 116 00:05:31,140 --> 00:05:31,640 Nein. 117 00:05:31,640 --> 00:05:34,410 118 00:05:34,410 --> 00:05:40,250 Ich schwöre bei Gott, die ich getestet habe diese mehrmals heute. 119 00:05:40,250 --> 00:05:41,720 Du hast es? 120 00:05:41,720 --> 00:05:43,145 >> [Zwischen Stimmen] 121 00:05:43,145 --> 00:05:46,470 122 00:05:46,470 --> 00:05:49,560 >> DAVID MALAN: OK, Benutzerfehler vielleicht. 123 00:05:49,560 --> 00:05:50,550 Das sind zwei. 124 00:05:50,550 --> 00:05:53,300 Er arbeitete für zwei von a einige hundert, drei, vier. 125 00:05:53,300 --> 00:05:55,940 OK, das ist gut. 126 00:05:55,940 --> 00:05:58,520 Vier von fünf für Korrektheit, wie etwa. 127 00:05:58,520 --> 00:05:59,810 >> Also, was ist passiert? 128 00:05:59,810 --> 00:06:02,727 Also vermutlich ohne zu sehen, Ihre Bildschirme, warum könnte es fehlerhaft sind? 129 00:06:02,727 --> 00:06:05,518 Es ist wahrscheinlich, dass wir gerade waren versuchen, zu viele Verbindungen herstellen 130 00:06:05,518 --> 00:06:08,110 Harvard Mail-Server alle auf einmal von der gleichen IP-Adresse. 131 00:06:08,110 --> 00:06:10,740 Ich kann nur raten, da ich nicht haben den Luxus der Tests 132 00:06:10,740 --> 00:06:13,220 dieser Code mit einigen 300 Personen im Voraus 133 00:06:13,220 --> 00:06:16,040 aber jetzt erkennen, dass dass zumindest sollte 134 00:06:16,040 --> 00:06:18,250 haben die Aufgabe, dieses Mal getan bekommen. 135 00:06:18,250 --> 00:06:22,880 >> Na gut, also warum ist das alles das mehr Germane, was ist los? 136 00:06:22,880 --> 00:06:24,900 Nun zunächst, eine schnelle paar Ankündigungen. 137 00:06:24,900 --> 00:06:29,350 So einen, wenn Sie möchten, dass Chang anzuschließen, und Nick und andere am Mittag an diesem Freitag, 138 00:06:29,350 --> 00:06:32,400 tun RSVP zur gewohnten URL gibt. 139 00:06:32,400 --> 00:06:35,650 Wenn Sie daran denken, konzentriert in oder macht einen sekundären in CS, 140 00:06:35,650 --> 00:06:38,941 ob Sie ein College-Student bist, oder Neuling, oder sogar Junior oder Senior an dieser Stelle 141 00:06:38,941 --> 00:06:42,490 und kann immer noch in den Kursen Squeeze, erkennen, dass der Ingenieurschule 142 00:06:42,490 --> 00:06:45,620 sammelt kostenlos Ben und Jerrys Eis und Beratung 143 00:06:45,620 --> 00:06:48,910 an diesem Mittwoch kurz nach Klasse um 4:00 Uhr in der CS Gebäude 144 00:06:48,910 --> 00:06:49,771 bei Maxwell Dworkin. 145 00:06:49,771 --> 00:06:51,520 Wenn dies zu schnell auf dem Bildschirm, gehen Sie einfach 146 00:06:51,520 --> 00:06:55,260 Um nach einem cs50.harvard.edu Link zur Facebook-Veranstaltung 147 00:06:55,260 --> 00:06:57,140 wo Sie weitere Details zu sehen. 148 00:06:57,140 --> 00:07:01,390 >> Inzwischen dachte ich, ich würde korrigieren eine weitere Sache, die ich vermasselt am Mittwoch. 149 00:07:01,390 --> 00:07:04,400 Es stellte sich heraus, dass Marks ID Auf Facebook war nicht drei. 150 00:07:04,400 --> 00:07:05,230 Es war vier. 151 00:07:05,230 --> 00:07:08,330 Stellt sich heraus, er mehr Test hatte Konten, als ich wieder zu verwenden. 152 00:07:08,330 --> 00:07:12,400 Aber was dieses Gefühl, eine Chance zu tun ist, um eine URL wie diese hochzuziehen. 153 00:07:12,400 --> 00:07:16,680 >> So stellt sich heraus, dass Facebook ein API, Application Programming Interface, 154 00:07:16,680 --> 00:07:20,070 das ist ein Mechanismus, mit dem Sie können Daten programmatisch beantragen 155 00:07:20,070 --> 00:07:24,480 bei Facebook und erhalten Sie zurück Maschine lesbare Informationen, nicht Web-Seiten 156 00:07:24,480 --> 00:07:28,690 sondern nur reinen Text, etwas genannt JavaScript Object Notation. 157 00:07:28,690 --> 00:07:32,150 Und in der Tat, wenn ich diesen Besuch URL, und vergrößern, die standardmäßig 158 00:07:32,150 --> 00:07:34,960 dies ist Mark öffentlich zugängliche Informationen. 159 00:07:34,960 --> 00:07:37,430 >> Und das Interessante Detail hier ist nur, dass seine ID 160 00:07:37,430 --> 00:07:40,670 ist in der Tat, die Nummer vier, die ich realisiert, sobald ich das tat. 161 00:07:40,670 --> 00:07:44,260 Sie können dies selbst tun, wenn Sie wissen Ihrem Facebook-Benutzernamen, wenn Sie eine haben. 162 00:07:44,260 --> 00:07:45,440 Tippen Sie sie einfach bis oben gibt. 163 00:07:45,440 --> 00:07:46,640 Und nichts davon ist privat. 164 00:07:46,640 --> 00:07:48,670 Ich bin gerade dabei dies sogar im Inkognito-Modus. 165 00:07:48,670 --> 00:07:49,900 Also ich bin noch nicht einmal angemeldet. 166 00:07:49,900 --> 00:07:54,440 Und Sie sehen, dass ich anscheinend war Benutzernummer 6454 167 00:07:54,440 --> 00:07:56,480 auf Facebook, die nicht zu schlecht in diesen Tagen. 168 00:07:56,480 --> 00:07:59,900 So jedenfalls sehen Sie auch Weitere Informationen gibt. 169 00:07:59,900 --> 00:08:02,150 >> Und die nützlicher Aspekt davon ist, dass man 170 00:08:02,150 --> 00:08:06,890 könnte Ihre eigene Software schreiben, dass irgendwie integriert Daten wie diese 171 00:08:06,890 --> 00:08:08,170 in eigene Applikationen. 172 00:08:08,170 --> 00:08:10,650 Sie können Benutzer zu ermächtigen loggen Sie sich in Ihre Website, 173 00:08:10,650 --> 00:08:14,190 nicht verwenden ihre eigenen Benutzernamen und Kennwort aber vielleicht ihre Facebook-Login 174 00:08:14,190 --> 00:08:16,170 und erhalten Sie Informationen selbst über ihre Freunde, 175 00:08:16,170 --> 00:08:18,740 wenn sie genehmigen solche oder ähnliche. 176 00:08:18,740 --> 00:08:21,430 Also beachten Sie, dass CS50 Auch hat einige eigene APIs, 177 00:08:21,430 --> 00:08:24,620 ein für die Kurskatalogdaten, einige für die Umarmungen Menüs im Speisesaal 178 00:08:24,620 --> 00:08:26,730 Hallen, die alle die Gebäude und Orte 179 00:08:26,730 --> 00:08:30,930 auf dem Campus haben wir eine API für so gut dass Sie ähnlich abfragen und erhalten können 180 00:08:30,930 --> 00:08:35,520 zurück Textdaten, die Sie integrieren können in eine PHP oder JavaScript oder sogar, 181 00:08:35,520 --> 00:08:38,320 wenn auch weniger häufig, einem C basiert Abschlussprojekt. 182 00:08:38,320 --> 00:08:41,190 >> Tatsächlich Schuss für die endgültige Projekt sind ein paar Meilensteine. 183 00:08:41,190 --> 00:08:42,980 Sie haben eine E-Mail von uns den anderen Tag. 184 00:08:42,980 --> 00:08:45,761 Erkenne, dass der Vorschlag liegt am kommenden Montag. 185 00:08:45,761 --> 00:08:49,010 Es ist nicht unbedingt bindend, aber Sie tun müssen, um Ihren Unterricht Stipendiaten erhalten 186 00:08:49,010 --> 00:08:51,260 zur Genehmigung vor Alle Änderungen danach. 187 00:08:51,260 --> 00:08:54,280 Und dann vor ein Reihe weiterer Meilensteine. 188 00:08:54,280 --> 00:08:56,542 >> Also, Sie necken Auch mit einigen Möglichkeiten, 189 00:08:56,542 --> 00:08:58,250 Wir haben eine Reihe von diese Farbton Glühbirnen. 190 00:08:58,250 --> 00:09:01,190 Und einige von euch haben jetzt einige von diesen in Ihrem Zimmer im Studentenwohnheim auch. 191 00:09:01,190 --> 00:09:02,920 Und auch sie haben eine API. 192 00:09:02,920 --> 00:09:07,300 So erinnern diese binären Glühbirnen Wochen her, dass Dan Bradley und Ansel 193 00:09:07,300 --> 00:09:08,780 Duff geschaffen für uns. 194 00:09:08,780 --> 00:09:12,560 Sie verwendeten eine Softwareschnittstelle zu diese Glühbirne, die im Moment 195 00:09:12,560 --> 00:09:15,232 wird in Strom gesteckt und dann per WLAN 196 00:09:15,232 --> 00:09:17,690 ist mit einer Kleinigkeit verbunden rief die Brücke hier unten, 197 00:09:17,690 --> 00:09:21,280 wie ein kleiner Router proprietären zu diesem Gerät. 198 00:09:21,280 --> 00:09:26,540 >> Aber es stellt sich heraus, wenn ich weiß, wie man HTTP-Nachrichten senden, wie wir alle jetzt tun, 199 00:09:26,540 --> 00:09:31,670 Ich kann eine Meldung wie diese zu senden diese Glühbirne, um sie ein- oder auszuschalten 200 00:09:31,670 --> 00:09:34,000 oder haben eine beliebige Anzahl von andere Operationen auf sie. 201 00:09:34,000 --> 00:09:36,110 Beachten Sie, dass es nicht zu bekommen, es ist nicht zu veröffentlichen. 202 00:09:36,110 --> 00:09:37,760 Es gibt eine andere sogenannte Put. 203 00:09:37,760 --> 00:09:39,630 Es gibt tatsächlich ein paar andere solche Verben. 204 00:09:39,630 --> 00:09:42,920 Aber feststellen, es ist ein Weg dorthin, Slash API, Schrägstrich neue Entwickler, 205 00:09:42,920 --> 00:09:44,990 Slash Licht, Schrägstrich ein, Schrägstrich Staat. 206 00:09:44,990 --> 00:09:49,060 >> Das ist offenbar nur die Weg, dass das Unternehmen, Philips, 207 00:09:49,060 --> 00:09:51,640 Sie beschlossen, getroffen haben mit einer HTTP-Anfrage 208 00:09:51,640 --> 00:09:55,010 wenn Sie den Status ändern möchten der Glühbirne mit HTTP 1.1. 209 00:09:55,010 --> 00:09:56,380 Dann bemerken die leere Zeile. 210 00:09:56,380 --> 00:10:00,170 Und dann endlich, was aussieht wie Art von einem Array von einer Art, 211 00:10:00,170 --> 00:10:04,730 Diese Mitteilung wird sich aufgerufen werden JavaScript Object Notation, oder Jason. 212 00:10:04,730 --> 00:10:08,000 Und was Sie hier sehen, ist, dass gibt es drei Schlüsselwertpaare. 213 00:10:08,000 --> 00:10:09,115 >> Ein Schlüssel wird als auf. 214 00:10:09,115 --> 00:10:10,990 Und seinen Wert anscheinend wird wahr. 215 00:10:10,990 --> 00:10:13,612 Helligkeit beträgt 128, die ist eine Art von int. 216 00:10:13,612 --> 00:10:15,820 Und dann Übergangszeit ist Null ist, was offenbar 217 00:10:15,820 --> 00:10:17,970 wie lange es zu gehen zu ergreifen, um diese Sache einzuschalten. 218 00:10:17,970 --> 00:10:19,890 >> So jetzt diese Glühbirne ist aus. 219 00:10:19,890 --> 00:10:22,880 Aber wenn ich genau das tun this-- lassen mich zu einem kleinen Spickzettel gehen 220 00:10:22,880 --> 00:10:25,200 dass Dan einzurichten in advance-- und ich werde 221 00:10:25,200 --> 00:10:27,920 voran gehen und kopieren Mit dem folgenden Befehl. 222 00:10:27,920 --> 00:10:30,200 Locke, wie einige von euch könnte auf CS50 aufgelesen haben 223 00:10:30,200 --> 00:10:35,080 Diskutieren ist ein Dienstprogramm wie Telnet wie dass Sie HTTP-Anforderungen zu simulieren, 224 00:10:35,080 --> 00:10:36,360 speziell legt. 225 00:10:36,360 --> 00:10:39,710 Ich kann diese Daten zu senden, spezifisch, was wir gerade 226 00:10:39,710 --> 00:10:43,430 sah einen Moment vor spezifisch zu dieser URL hier. 227 00:10:43,430 --> 00:10:46,310 Und dann Locke geht zu handhaben alle erforderlichen Header 228 00:10:46,310 --> 00:10:47,600 und Parsen es von. 229 00:10:47,600 --> 00:10:54,700 >> Also alles, was ich zu tun ist, kopieren Sie diese in ein Terminal-Fenster und dann drücken Sie Enter. 230 00:10:54,700 --> 00:10:56,000 Und die Glühbirne geht weiter. 231 00:10:56,000 --> 00:10:59,060 Und das ist alles durchmachen mein Computer drahtlos 232 00:10:59,060 --> 00:11:01,960 irgendwie hinunter zur Brücke, die wird dann zu dieser Glühbirne reden. 233 00:11:01,960 --> 00:11:02,960 Ich kann etwas anderes tun. 234 00:11:02,960 --> 00:11:07,050 Ich kann diese Sache machen gehen rot zum Beispiel. 235 00:11:07,050 --> 00:11:11,040 Ich kann zum Beispiel machen dieses Ding gehen Grün. 236 00:11:11,040 --> 00:11:12,220 Ich kann es gehen blau. 237 00:11:12,220 --> 00:11:14,760 >> Und in jedem von diesen bemerken Instanzen, alles, was ich ändern 238 00:11:14,760 --> 00:11:18,540 ist die sogenannte Farbtonwert tatsächlich geben sie etwas Farbe. 239 00:11:18,540 --> 00:11:20,320 Also lassen Sie mich diese ein und fügen Sie ihn in auch. 240 00:11:20,320 --> 00:11:21,000 Jetzt ist es blau. 241 00:11:21,000 --> 00:11:24,672 >> Und Sie selbst Züchter tun können Dinge where-- wir auf grün gehen. 242 00:11:24,672 --> 00:11:26,630 Und ich könnte dies der tun Natürlich mit meinen eigenen Code. 243 00:11:26,630 --> 00:11:30,670 Aber selbst die API selbst unterstützt flippig Operationen 244 00:11:30,670 --> 00:11:35,510 wie diese, die jetzt die Mühe wird uns für die nächsten 30 Sekunden. 245 00:11:35,510 --> 00:11:39,170 >> Also das ist ein Vorgeschmack auf das, was Dir evtl. tun mit einer API, diesmal mit 246 00:11:39,170 --> 00:11:40,010 Glühbirnen. 247 00:11:40,010 --> 00:11:42,510 Beachten Sie, dass CS50 hat ein paar Paare von Google Glass, wenn Sie möchten 248 00:11:42,510 --> 00:11:45,380 gerne etwas zusammen angehen diese Linien, Arduino Unos, die 249 00:11:45,380 --> 00:11:48,670 sind winzige Computer, Wesentlichen auf einer kleinen Leiterplatte 250 00:11:48,670 --> 00:11:50,470 dass Sie eine Verbindung herstellen können Drähte und andere Dinge 251 00:11:50,470 --> 00:11:52,732 um und tatsächlich Steuer Ihre realen Umgebung. 252 00:11:52,732 --> 00:11:54,940 Und dann gibt es ein paar neuer Spielzeuge, die wir haben. 253 00:11:54,940 --> 00:11:59,294 Dieser eine buchstäblich nur kam der neulich per Post, ein Myo Armband. 254 00:11:59,294 --> 00:12:01,710 Und ich dachte, es ist ein Weg, um erhalten Sie über Projekte angeregt 255 00:12:01,710 --> 00:12:03,720 dass Sie mit verwenden könnte Diese Hardware würde 256 00:12:03,720 --> 00:12:08,900 sein, diesen kurzen Clip spielen dass sie verwenden, um Leute zu ärgern 257 00:12:08,900 --> 00:12:10,500 dass wir jetzt leben in der Zukunft. 258 00:12:10,500 --> 00:12:13,494 259 00:12:13,494 --> 00:12:15,490 >> [Musik zu spielen] 260 00:12:15,490 --> 00:13:33,410 261 00:13:33,410 --> 00:13:37,109 >> DAVID MALAN: Also in nur ein paar Wochen, die Sie können Sie auch, dass am CS50 fairen cool. 262 00:13:37,109 --> 00:13:39,150 Ein anderes Gerät, dass wir haben eine Reihe von, dass wir 263 00:13:39,150 --> 00:13:42,090 glücklich, für Projekte ausleihen wird als Motion-Controller. 264 00:13:42,090 --> 00:13:45,030 Dies ist ein wenig USB-Gerät Sie an einen Computer anschließen, dass 265 00:13:45,030 --> 00:13:47,520 erlaubt Ihnen, mit interagieren Ihren Laptop, Mac oder PC, 266 00:13:47,520 --> 00:13:51,570 als ob Sie wie ein Xbox Kinect hatte und tatsächlich machen körperliche Bewegungen viel 267 00:13:51,570 --> 00:13:54,509 wie wir es in dieser zu sehen Vision der Zukunft. 268 00:13:54,509 --> 00:13:56,505 >> [Musik zu spielen] 269 00:13:56,505 --> 00:15:03,380 270 00:15:03,380 --> 00:15:06,260 >> DAVID MALAN: Also, auch wenn Sie keine Ahnung, wie so etwas 271 00:15:06,260 --> 00:15:10,050 könnte möglicherweise erfunden oder arbeiten werden auf Hardware-Ebene, egal. 272 00:15:10,050 --> 00:15:13,520 Selbst nach nur wenigen Monaten des CS50, und ein Verständnis für die Programmierung 273 00:15:13,520 --> 00:15:19,460 allgemeiner und Web-Programmierung mehr vor kurzem, und dann auch APIs und HTTP, 274 00:15:19,460 --> 00:15:21,830 Sie haben Zugang über Software-APIs, wenn Sie 275 00:15:21,830 --> 00:15:24,680 wollen, um eine von ihnen zu leihen Geräte, um tatsächlich zu reden 276 00:15:24,680 --> 00:15:27,180 und nicht darum kümmern, die zugrunde liegende Implementierung 277 00:15:27,180 --> 00:15:30,220 Details, die komplett ist im Einklang mit diesem Begriff der Schichtung 278 00:15:30,220 --> 00:15:33,610 eine Abstraktion, die wir haben während des Semesters zu sehen. 279 00:15:33,610 --> 00:15:37,990 >> So auch am Wochenende, sah ein paar Neuigkeiten. 280 00:15:37,990 --> 00:15:40,640 Erstes Bild, um Seminare, wenn Sie Lust, etwas zu lernen 281 00:15:40,640 --> 00:15:42,160 mehr auf einer beliebigen Anzahl von Themen. 282 00:15:42,160 --> 00:15:43,340 Sehen Sie die URL dort. 283 00:15:43,340 --> 00:15:45,890 Und dieser wurde verschickt mich von Chang, die Sie kennen, 284 00:15:45,890 --> 00:15:47,850 wer Druck unsere Armee von Elefanten. 285 00:15:47,850 --> 00:15:49,910 Und es war eine Schlagzeile wie folgt. 286 00:15:49,910 --> 00:15:51,280 Ich bin entsetzt von meinem neuen TV. 287 00:15:51,280 --> 00:15:54,301 Warum habe ich Angst, dies zu drehen Sache auf, und Sie würden auch sein. 288 00:15:54,301 --> 00:15:56,050 Also sind wir jetzt bei der Punkt in der Vorlesungszeit 289 00:15:56,050 --> 00:15:58,860 Auch wenn, auch wenn Sie das geringste Verständnis 290 00:15:58,860 --> 00:16:02,620 der, wie das Web funktioniert und HTTP, und Sicherheit, Dinge wie diese 291 00:16:02,620 --> 00:16:03,980 beginnen sollte, ins Auge fallen. 292 00:16:03,980 --> 00:16:07,450 Aber auch, werden Sie verstehen, ob diese Dinge sind oder nicht 293 00:16:07,450 --> 00:16:08,430 tatsächliche Bedrohungen. 294 00:16:08,430 --> 00:16:10,940 >> Also nahm ich ein paar Auszüge aus diesem Artikel hier. 295 00:16:10,940 --> 00:16:12,540 Und die Geschichte ist wie folgt. 296 00:16:12,540 --> 00:16:14,300 Ich bin jetzt der Besitzer eine neue Smart-TV, das 297 00:16:14,300 --> 00:16:18,470 verspricht Streaming liefern Multimedia-Inhalte, Spiele, App, 298 00:16:18,470 --> 00:16:21,450 Social Media und Internet Browsing, ach ja, und TV auch. 299 00:16:21,450 --> 00:16:24,410 Das einzige Problem ist, dass ich jetzt Angst, es zu benutzen, sagt der Autor. 300 00:16:24,410 --> 00:16:29,592 Sie würden auch sein, wenn man durch lesen der 46-Seite Datenschutzrichtlinie für Ihr Fernsehgerät. 301 00:16:29,592 --> 00:16:31,800 Die Datenmenge, dieser Sache sammelt, ist atemberaubend. 302 00:16:31,800 --> 00:16:35,710 Es protokolliert, wo, wann, wie und für wie lange Sie mit dem TV. 303 00:16:35,710 --> 00:16:38,190 Er setzt Tracking-Cookies, wie wir besprochen haben, 304 00:16:38,190 --> 00:16:40,560 und Baken konzipiert zu erkennen, wenn man 305 00:16:40,560 --> 00:16:43,185 betrachtet insbesondere die Inhalte oder die eine bestimmte E-Mail-Nachricht 306 00:16:43,185 --> 00:16:45,230 Wenn Sie E-Mails auf Ihrem Fernseher ansehen möchten. 307 00:16:45,230 --> 00:16:48,430 Es zeichnet die Anwendungen, die Sie verwenden, die Webseiten, die Sie besuchen, 308 00:16:48,430 --> 00:16:52,280 und wie Sie mit Inhalten interagieren, tut das alles über Ihr Smart-TV. 309 00:16:52,280 --> 00:16:55,470 Es ist auch, gruseliger yet-- das ist meine addition-- 310 00:16:55,470 --> 00:16:58,140 hat eine eingebaute Kamera mit Gesichtserkennung. 311 00:16:58,140 --> 00:17:01,010 >> Der Zweck ist es, Gestensteuerung für den Fernseher 312 00:17:01,010 --> 00:17:05,490 und ermöglichen es Ihnen, sich anzumelden personalisierten Konto mit Ihrem Gesicht. 313 00:17:05,490 --> 00:17:08,940 Auf der anderen Seite sind die Bilder auf dem TV gespeichert statt hochgeladen 314 00:17:08,940 --> 00:17:09,940 zu einem Unternehmensserver. 315 00:17:09,940 --> 00:17:12,520 Auf der Sollseite, das Internet Verbindung macht die ganze TV 316 00:17:12,520 --> 00:17:14,811 anfällig für Hacker, die haben die Fähigkeit bewiesen 317 00:17:14,811 --> 00:17:16,700 die vollständige Kontrolle über die Maschine zu nehmen. 318 00:17:16,700 --> 00:17:20,880 >> Noch beunruhigender, als ob das noch nicht intelligent genug, ist das Mikrofon. 319 00:17:20,880 --> 00:17:23,599 Der TV verfügt über eine Stimme Erkennungsfunktion 320 00:17:23,599 --> 00:17:26,859 dass kann der Zuschauer zu kontrollieren der Bildschirm mit Sprachbefehlen. 321 00:17:26,859 --> 00:17:30,290 Aber der Service kommt mit ein eher ominösen Warnung. 322 00:17:30,290 --> 00:17:33,030 Bitte beachten Sie, dass, wenn Ihre gesprochenen Worte beinhalten 323 00:17:33,030 --> 00:17:36,210 persönliche oder andere sensible Informationen, dass die Informationen 324 00:17:36,210 --> 00:17:40,310 wird unter den erfassten Daten sein und einer dritten Partei übertragen wird. 325 00:17:40,310 --> 00:17:40,870 Haben Sie das? 326 00:17:40,870 --> 00:17:45,860 Sagen Sie nicht, persönliche oder sensible Sachen vor Ihrem TV. 327 00:17:45,860 --> 00:17:47,280 >> Also das ist eigentlich echt. 328 00:17:47,280 --> 00:17:50,530 Und es ist schwer, nicht zu, wenn Sie sehen, gehen zu Best Buy oder dergleichen für Fernseher 329 00:17:50,530 --> 00:17:51,030 heutzutage. 330 00:17:51,030 --> 00:17:52,540 Sie sind in gewisser Weise alle smart. 331 00:17:52,540 --> 00:17:54,740 Und sie bekommen intelligenter und gruseliger. 332 00:17:54,740 --> 00:17:57,490 Und sie sind einfach das Sammeln von Daten in einer Weise, die wir gesprochen haben 333 00:17:57,490 --> 00:18:01,840 und dann laden Sie sie über HTTP oder einige andere Protokoll bis zu einem gewissen Server. 334 00:18:01,840 --> 00:18:05,720 >> Das war also ein Spaß Artikel in diesem Online-Website 335 00:18:05,720 --> 00:18:08,940 hier, die sich um eine sprachen insbesondere Bug oder irre Code 336 00:18:08,940 --> 00:18:11,340 dass wir tatsächlich binden in der vergangenen Woche diskutiert. 337 00:18:11,340 --> 00:18:15,730 Also diese Schlagzeile war, als folgt, geht die Geschichte hier, 338 00:18:15,730 --> 00:18:18,720 Josh Breckman arbeitete für ein Unternehmen, das einen Vertrag gelandet 339 00:18:18,720 --> 00:18:22,390 um ein Content-Management-Entwicklung System oder CMS wie sie genannt werden, 340 00:18:22,390 --> 00:18:24,380 für eine ziemlich große Website der Regierung. 341 00:18:24,380 --> 00:18:27,300 Ein Großteil der Projektbeteiligten Entwicklung eines Content Management Systems 342 00:18:27,300 --> 00:18:29,840 so dass die Mitarbeiter wäre Lage, aufzubauen und zu pflegen 343 00:18:29,840 --> 00:18:31,877 die sich ständig ändernden Inhalte für ihre Website. 344 00:18:31,877 --> 00:18:34,210 Es lief ziemlich gut für ein paar Tage nach dem Go-Live. 345 00:18:34,210 --> 00:18:37,020 Aber am sechsten Tag ging es nicht so gut. 346 00:18:37,020 --> 00:18:39,500 Alle Inhalte auf der Website war vollständig verschwunden. 347 00:18:39,500 --> 00:18:42,950 Und alle Seiten führten zu der standardmäßig Bitte geben Gehalt Webseite. 348 00:18:42,950 --> 00:18:43,810 Whoops. 349 00:18:43,810 --> 00:18:46,080 Josh wurde aufgerufen untersuchen und bemerkt 350 00:18:46,080 --> 00:18:49,390 dass ein besonders lästig externe IP-Adresse hatte 351 00:18:49,390 --> 00:18:53,380 in gegangen und alle gelöscht der Inhalt des Systems. 352 00:18:53,380 --> 00:18:56,290 >> Die IP-Adresse nicht angehören bis zu einem gewissen Übersee Hacker gebogen 353 00:18:56,290 --> 00:18:58,340 zu zerstören hilfreich Regierungsinformationen. 354 00:18:58,340 --> 00:19:05,190 Es beschloss googlebot.com, Google ist sehr eigenen Web-Crawling Spinne. 355 00:19:05,190 --> 00:19:06,010 Whoops. 356 00:19:06,010 --> 00:19:09,150 Nach ein wenig Forschung und Scrambling rund um einen noncorrupt Backup finden, 357 00:19:09,150 --> 00:19:10,180 Josh fand das Problem. 358 00:19:10,180 --> 00:19:12,700 >> Ein Benutzer kopiert hatte und eingefügt einige Inhalte von einem 359 00:19:12,700 --> 00:19:15,670 Seite zur anderen, einschließlich ein Hyperlink bearbeiten 360 00:19:15,670 --> 00:19:17,577 um die Inhalte auf der Seite zu bearbeiten. 361 00:19:17,577 --> 00:19:20,160 Normalerweise wäre dies nicht ein Thema, da eine Außen Benutzer würde 362 00:19:20,160 --> 00:19:24,320 müssen Sie einen Namen und ein Passwort eingeben, aber die CMS-Authentifizierungssystem, 363 00:19:24,320 --> 00:19:27,520 das Login-System, nicht berücksichtigen 364 00:19:27,520 --> 00:19:30,980 hoch entwickelte Hacker Techniken der Google Spinne. 365 00:19:30,980 --> 00:19:31,700 Whoops. 366 00:19:31,700 --> 00:19:33,610 >> Wie sich herausstellt, Google Spinne nicht verwenden 367 00:19:33,610 --> 00:19:36,950 Cookies, die, dass es bedeutet, leicht umgehen einen Scheck für die 368 00:19:36,950 --> 00:19:39,840 auf Cookie angemeldet falsch. 369 00:19:39,840 --> 00:19:42,620 Es ist auch nicht zu achten JavaScript die normalerweise 370 00:19:42,620 --> 00:19:45,170 auffordern und leiten Nutzer die nicht angemeldet sind. 371 00:19:45,170 --> 00:19:48,610 Es hat jedoch folgen jeden Hyperlink auf jeder Seite die es findet, 372 00:19:48,610 --> 00:19:51,700 einschließlich solcher mit Seite löschen im Titel. 373 00:19:51,700 --> 00:19:52,650 Whoops. 374 00:19:52,650 --> 00:19:56,070 >> Was bedeutet dies in mehr bedeuten technische, sondern ziemlich zugänglich Begriffe? 375 00:19:56,070 --> 00:19:58,340 Es bedeutet nur, dass während ihrer Website, 376 00:19:58,340 --> 00:20:02,287 sie URLs hatte nicht unähnlich dieser eine, sehen Sie möglicherweise in Problem stellte sieben. 377 00:20:02,287 --> 00:20:04,620 Recall in Problem stellte sieben oder wissen, in Problem set sieben 378 00:20:04,620 --> 00:20:06,411 dass Sie herausgefordert sind, unter anderem 379 00:20:06,411 --> 00:20:08,570 um Aktien im Namen der Nutzer zu verkaufen. 380 00:20:08,570 --> 00:20:14,010 Aber die Umsetzung dieses Feature durch bekommen über Hyperlinks in Ihrem Benutzer 381 00:20:14,010 --> 00:20:16,880 Schnittstelle, wahrscheinlich nicht die intelligenteste Idee 382 00:20:16,880 --> 00:20:20,300 denn wenn Ihre Website ist irgendwie zugänglich, entweder durch einen menschlichen 383 00:20:20,300 --> 00:20:23,577 wer rund Anklicken oder kaufen ein Bot wie Google oder einer Spinne 384 00:20:23,577 --> 00:20:26,160 wie sie genannt werden, dass es nur Absuchen des Internets versuchen, Index 385 00:20:26,160 --> 00:20:29,060 Das Web als Suchmaschine sie konnten sehr leicht 386 00:20:29,060 --> 00:20:31,340 Hit über erhalten diese Art von URL. 387 00:20:31,340 --> 00:20:33,770 Und das ist funktional entspricht, in diesem Fall 388 00:20:33,770 --> 00:20:37,000 Verkauf aller Aktien von Google verarbeiten. 389 00:20:37,000 --> 00:20:40,030 >> Nun ehrlich gesagt, es ist völlig asinine dass das CMS 390 00:20:40,030 --> 00:20:43,240 gebrauchte JavaScript und Cookies seine Login-System zu implementieren 391 00:20:43,240 --> 00:20:47,100 und nicht zu tun, dass Server-Seite, wie Sie Jungs und tun in PSet 7-- 392 00:20:47,100 --> 00:20:49,940 es gibt eine login.php file-- immer, immer, 393 00:20:49,940 --> 00:20:52,789 immer Sicherheit sein sollte auf der Serverseite durchgeführt, 394 00:20:52,789 --> 00:20:56,080 nicht auf der Clientseite, weil, wie dies Artikel legt nahe, und Sie könnten sich 395 00:20:56,080 --> 00:20:59,600 sehen irgendwann, es ist trivial für einen Benutzer, gut oder schlecht, 396 00:20:59,600 --> 00:21:02,860 um einfach abschalten JavaScript keine Cookies ganz zu schweigen. 397 00:21:02,860 --> 00:21:06,020 Das ist also Ihre tägliche WTF. 398 00:21:06,020 --> 00:21:07,970 >> Es gibt eine weitere, die ist nur irgendwie beängstigend, 399 00:21:07,970 --> 00:21:11,360 so dass ich es, wenn erwähnen nur als Lektion fürs Leben. 400 00:21:11,360 --> 00:21:14,850 Immer, wenn Sie eine Anwendung verwenden, genannt wie Snapchat oder dergleichen 401 00:21:14,850 --> 00:21:19,380 das sagt diese Fotos nur für dauern fünf Sekunden 10 Sekunden oder so weiter. 402 00:21:19,380 --> 00:21:21,680 Sie sind vergänglich Das ist absolut nicht der Fall. 403 00:21:21,680 --> 00:21:25,670 Wie gibt es keine Möglichkeit, digital, eine Form von Video-Umsetzung, 404 00:21:25,670 --> 00:21:30,150 oder ein Bild oder Textweitergabe solcher dass ein Empfänger am anderen Ende 405 00:21:30,150 --> 00:21:31,660 kann nicht irgendwie speichern Sie die Daten. 406 00:21:31,660 --> 00:21:34,300 >> In der am meisten naive Weise jemand konnte ihr Telefon zu nehmen. 407 00:21:34,300 --> 00:21:36,850 Und sie einen 10 Sekunden-Fenster haben beim Betrachten einiger Schnapp 408 00:21:36,850 --> 00:21:39,410 nur nehmen Sie sich etwas anderes Telefon und fotografieren, offensichtlich. 409 00:21:39,410 --> 00:21:41,660 So können Sie sich bewahren können etwas digital so. 410 00:21:41,660 --> 00:21:44,620 Einige von euch wissen, wie man nehmen Screenshots auf Ihrem Handy. 411 00:21:44,620 --> 00:21:49,290 In der Tat, wenn Sie nicht wissen, diese, erkennen, dass zumindest Snapchat, 412 00:21:49,290 --> 00:21:51,040 und ich denke, andere Anwendungen in diesen Tagen, 413 00:21:51,040 --> 00:21:53,720 zumindest sagen, ob die Empfänger hat tatsächlich 414 00:21:53,720 --> 00:21:55,310 einen Screenshot von Ihrem Bild gemacht. 415 00:21:55,310 --> 00:22:00,870 >> Aber schlimmer noch, das war der snappening, als jemand prägte es vor kurzem, 416 00:22:00,870 --> 00:22:04,680 wo einige 100.000 Snaps entlassen worden 417 00:22:04,680 --> 00:22:09,310 in Was ist eine Torrent-Datei namens auf verschiedenen Websites letztlich. 418 00:22:09,310 --> 00:22:12,000 Und sie enthalten eine ganze Reihe privater Nachrichten und Beiträge. 419 00:22:12,000 --> 00:22:15,210 Es stellt sich heraus meisten gutartig, so nicht, was Sie erwarten könnte. 420 00:22:15,210 --> 00:22:17,580 Aber weil die Menschen hatten verwendet die Website eines Dritten, 421 00:22:17,580 --> 00:22:20,270 sie sich mit ihrem Snapchat Benutzernamen und Passwort und dann 422 00:22:20,270 --> 00:22:23,470 Speichern aller ihrer rastet auf dieser Webseite Dritter. 423 00:22:23,470 --> 00:22:26,130 Und es war, dass Dritte Website, die gehackt wurde, 424 00:22:26,130 --> 00:22:30,710 dem jemand meinte nur herausgefunden, wie alle 100.000 zuzüglich jener Bilder bekommen 425 00:22:30,710 --> 00:22:33,822 in die eigene Festplatte für nachfolgende Sharing. 426 00:22:33,822 --> 00:22:36,030 Ehrlich gesagt, auch hier ist es irgendwie von asinine dass Snapchat 427 00:22:36,030 --> 00:22:39,360 ist derart ausgebildet, dass ein Dritter von Intercept sortieren 428 00:22:39,360 --> 00:22:43,310 die Daten und dass es nicht zu bindenden Ihre eigene Anwendung auf dem Handy läuft. 429 00:22:43,310 --> 00:22:46,947 Aber auch hier erkennen, dass diese Dinge, die Sie nicht fangen überrascht, 430 00:22:46,947 --> 00:22:49,030 oder zumindest dort sollten sein eine Lektion fürs Leben in hier. 431 00:22:49,030 --> 00:22:52,220 Wenn Sie die technische möchten Einzelheiten zu dieser URL gehen dort 432 00:22:52,220 --> 00:22:53,570 das ist in der heutigen Rutschen. 433 00:22:53,570 --> 00:23:00,960 Na gut, Sie haben Fragen zu heutigen Lebenslektionen in CS? 434 00:23:00,960 --> 00:23:02,710 Dies ausschalten. 435 00:23:02,710 --> 00:23:04,970 Überhaupt etwas? 436 00:23:04,970 --> 00:23:06,301 Überhaupt etwas? 437 00:23:06,301 --> 00:23:09,050 Ich habe eine Menge von Leuten, die einchecken bekam ihre Snapchat oder etwas jetzt. 438 00:23:09,050 --> 00:23:11,690 >> Alles klar, so SQL, Structured Query Language. 439 00:23:11,690 --> 00:23:12,509 Lassen Sie wickeln diese. 440 00:23:12,509 --> 00:23:14,300 Und auch, obwohl wir sind nur Kratzer 441 00:23:14,300 --> 00:23:16,310 Die Oberfläche dieser Sprache, geben wir Ihnen 442 00:23:16,310 --> 00:23:18,930 genug von der Sprach in Form PSet 7 443 00:23:18,930 --> 00:23:22,140 so dass Sie einige angehen ziemlich häufig Funktionalität. 444 00:23:22,140 --> 00:23:24,912 Aber erkennen, gibt es ein paar Dinge, die wir nicht von Ihnen verlangen, 445 00:23:24,912 --> 00:23:27,120 aber sie gehen, um sein wichtige gekommen Abschlussarbeiten 446 00:23:27,120 --> 00:23:30,760 und sicherlich kommen macht tatsächlichen Webseiten mit tatsächlichen Nutzern 447 00:23:30,760 --> 00:23:32,040 ist diese Design-Entscheidung. 448 00:23:32,040 --> 00:23:34,460 >> Es stellt sich heraus, dass in eine MySQL-Datenbank, die Sie 449 00:23:34,460 --> 00:23:37,460 haben Trauben von Entscheidungen wie die Datentypen für Ihre Spalten 450 00:23:37,460 --> 00:23:41,670 und andere Dinge, aber Sie haben auch die Wahl einer sogenannten Speicher 451 00:23:41,670 --> 00:23:44,570 Motor für alle Ihre Daten, die Art von Dateisystem, 452 00:23:44,570 --> 00:23:46,700 wenn Sie nicht vertraut sind, für alle Ihre Daten. 453 00:23:46,700 --> 00:23:48,830 Welches Format ist es letztlich in gespeichert? 454 00:23:48,830 --> 00:23:53,300 Und die häufigste vielleicht hat MyISAM und InnoDB, Fachbegriffe 455 00:23:53,300 --> 00:23:56,060 dass wir nur werde kümmern in dem Maße, dass man 456 00:23:56,060 --> 00:23:58,500 und ein nicht die folgende Funktion. 457 00:23:58,500 --> 00:24:00,390 >> Angenommen, Sie haben ein wenig Wohnheim Kühlschrank. 458 00:24:00,390 --> 00:24:03,030 Und annehmen, dass Sie und Ihre Mitbewohner, die diesen Kühlschrank teilen, 459 00:24:03,030 --> 00:24:04,682 sind wirklich lieb sagen Milch. 460 00:24:04,682 --> 00:24:07,140 Und dies ist in der Tat, wie die Geschichte wurde so wieder zu mir gesagt, 461 00:24:07,140 --> 00:24:10,890 in den Tag, als ich einen Kurs genannt CS 161 Betriebssysteme, die 462 00:24:10,890 --> 00:24:12,580 ähnlich erforscht dieses Thema. 463 00:24:12,580 --> 00:24:13,760 So können Sie diesen Kühlschrank haben. 464 00:24:13,760 --> 00:24:14,630 Du bist aus der Milch. 465 00:24:14,630 --> 00:24:17,000 Und du nach Hause kommst, deine Mitbewohner noch in Klasse oder was auch immer, 466 00:24:17,000 --> 00:24:19,208 und Sie entscheiden, ich bin zu gehen gehen und sich etwas Milch. 467 00:24:19,208 --> 00:24:22,630 So können Sie den Kühlschrank zu schließen, Überbrückungs die Zimmer im Studentenwohnheim, über die Straße zu gehen 468 00:24:22,630 --> 00:24:25,330 CVS oder wo auch immer, und erhalten Schlange, um etwas Milch zu kaufen. 469 00:24:25,330 --> 00:24:28,960 >> Unterdessen bekommt Ihre Mitbewohner Hause aus der Klasse, kommt in den Schlafsaal, 470 00:24:28,960 --> 00:24:31,802 öffnet den Kühlschrank, auch realisiert ooph können wir aus der Milch. 471 00:24:31,802 --> 00:24:33,760 Damit er oder sie schließt die Kühlschrank und dann passiert 472 00:24:33,760 --> 00:24:35,610 um auf die andere CVS zu gehen, was sein geschieht 473 00:24:35,610 --> 00:24:38,470 einen Block entfernt von den anderen CVS auf dem Platz, und bekommt im Einklang 474 00:24:38,470 --> 00:24:40,230 da, um etwas Milch zu bekommen. 475 00:24:40,230 --> 00:24:42,524 Jetzt natürlich ein paar Minuten Später, zurück bekommen Sie beides, 476 00:24:42,524 --> 00:24:44,690 und das schlimmste aller möglichen Ergebnisse passiert ist. 477 00:24:44,690 --> 00:24:45,792 Beide haben Sie Milch. 478 00:24:45,792 --> 00:24:47,500 Und Sie nicht wirklich wie Milch, die viel. 479 00:24:47,500 --> 00:24:49,625 Also einer von ihnen ist gerade werde irgendwann sauer. 480 00:24:49,625 --> 00:24:55,941 So, jetzt zu viel haben Milch im Kühlschrank alles nur, weil warum? 481 00:24:55,941 --> 00:24:57,072 >> [Unverständlich] 482 00:24:57,072 --> 00:24:59,780 DAVID MALAN: Ja, das hast du nicht irgendwie miteinander kommunizieren 483 00:24:59,780 --> 00:25:00,904 Sie waren immer Milch. 484 00:25:00,904 --> 00:25:04,320 So in den einfachsten Möglichkeiten in der Welt der Menschen, 485 00:25:04,320 --> 00:25:08,390 Wie könnte man diese dumme vermeiden Szenario geschieht wie 486 00:25:08,390 --> 00:25:09,750 dass Sie nur am Ende mit ein. 487 00:25:09,750 --> 00:25:10,840 Text ihnen ja gut. 488 00:25:10,840 --> 00:25:12,877 Aber wie sonst? 489 00:25:12,877 --> 00:25:13,460 Post-it-Zetteln. 490 00:25:13,460 --> 00:25:14,626 DAVID MALAN: Ein Post-it Note. 491 00:25:14,626 --> 00:25:17,150 Jede Form von Kommunikation das sagt Ihre Mitbewohner 492 00:25:17,150 --> 00:25:18,670 nicht in den Kühlschrank für Milch gehen. 493 00:25:18,670 --> 00:25:20,440 Ich werde gehen auffüllen auf meinem eigenen. 494 00:25:20,440 --> 00:25:22,770 Also man irgendwie brauchen , diesen Bereich zu sperren. 495 00:25:22,770 --> 00:25:27,180 So können wir this-- machen können wir Art ruinieren die Geschichte und zu einem CS Geschichte 496 00:25:27,180 --> 00:25:30,360 wobei daran zu denken, wie gerade wie ein Variable, die Speicherung wird einen gewissen Wert. 497 00:25:30,360 --> 00:25:32,570 Und gerade jetzt, die Wert der Milch gleich Null ist, 498 00:25:32,570 --> 00:25:35,410 die Sie nicht möchten, dass Ihr Mitbewohner auf diese Variable inspizieren 499 00:25:35,410 --> 00:25:38,730 und dann eine Entscheidung treffen sich selbst basierend auf dem Zustand der Variablen 500 00:25:38,730 --> 00:25:42,430 Wenn Sie in den Prozess der bist Ändern des Status dieser Variablen. 501 00:25:42,430 --> 00:25:46,140 >> Also eine der Linien von SQL, die wir geben Ihnen in PSet 7 Spezifikation 502 00:25:46,140 --> 00:25:47,310 ist diese hier. 503 00:25:47,310 --> 00:25:49,740 Und wir verbringen nicht einen riesigen Höhe der Zeit, darüber zu reden. 504 00:25:49,740 --> 00:25:55,100 Aber es stellt sich heraus, wenn Sie versuchen, einige Aktien in CS50 Finanz kaufen 505 00:25:55,100 --> 00:25:58,000 dass Sie bereits einige Aktien, die Sie 506 00:25:58,000 --> 00:26:01,750 wollen in der Lage, eine Reihe zu tun von Dingen sofort zusammen. 507 00:26:01,750 --> 00:26:04,360 Sie wollen in der Lage zu sein, effektiv, auf einem hohen Niveau, 508 00:26:04,360 --> 00:26:06,700 überprüfen alle Rechte, wenn ich will, mehr Aktien von Free kaufen, 509 00:26:06,700 --> 00:26:08,780 die Penny Stock wir reden in der Spezifikation, 510 00:26:08,780 --> 00:26:10,660 Ich möchte erste Prüfung wie viele Aktien die ich habe. 511 00:26:10,660 --> 00:26:11,810 Und angenommen, es ist fünf. 512 00:26:11,810 --> 00:26:14,600 Und angenommen, ich möchte kaufen 10 weitere, ich letztlich 513 00:26:14,600 --> 00:26:17,069 wollen bis 15 Aktien haben. 514 00:26:17,069 --> 00:26:18,360 Also ich habe zwei Fragen stellen. 515 00:26:18,360 --> 00:26:20,230 Was ist der Zustand der Variablen? 516 00:26:20,230 --> 00:26:21,470 Was ist der Zustand der Zeile? 517 00:26:21,470 --> 00:26:22,970 Wie viele Aktien kann ich derzeit? 518 00:26:22,970 --> 00:26:24,636 Dann können Sie voran gehen und aktualisieren Sie es möchten. 519 00:26:24,636 --> 00:26:27,720 Also das ist der analog zu den Milch in, dass Sie die Zeile zu überprüfen, 520 00:26:27,720 --> 00:26:30,730 und dann können Sie es aktualisieren möchten denn wenn man 10 Aktien kaufen möchten, 521 00:26:30,730 --> 00:26:32,521 Sie nicht ändern wollen die Reihe bis 10, Sie 522 00:26:32,521 --> 00:26:35,300 ihn auf 5 ändern wollen plus 10 oder natürlich, 15. 523 00:26:35,300 --> 00:26:40,030 >> Diese Codezeile stellt sicher, dass jene zwei Konzeptideen 524 00:26:40,030 --> 00:26:42,810 geschehen gemeinsam oder gar nicht. 525 00:26:42,810 --> 00:26:46,920 Niemand, auch nicht auf andere Benutzer die in der gleichen Website angemeldet ist, 526 00:26:46,920 --> 00:26:49,900 irgendwie zu unterbrechen das Überprüfen der Reihe 527 00:26:49,900 --> 00:26:52,960 und die Aktualisierung der Zeile, die auswählen und das Update, wenn man so will. 528 00:26:52,960 --> 00:26:57,360 Und die Syntax ist nicht super offensichtlich, aber diese eine Zeile, lange ist es, 529 00:26:57,360 --> 00:27:01,150 stellt sicher, dass diese beiden Operationen überprüfen Sie die Variable oder überprüfen Sie die Zeile 530 00:27:01,150 --> 00:27:04,660 und aktualisieren die Zeile geschehen atomar. 531 00:27:04,660 --> 00:27:06,849 >> Oh hier gehen wir wieder. 532 00:27:06,849 --> 00:27:07,890 SMS-Nachricht auf meinem Handy. 533 00:27:07,890 --> 00:27:09,954 Lassen Sie uns also diese eine wenig konkreter. 534 00:27:09,954 --> 00:27:12,120 Nehmen wir an, du bist nicht Umsetzung über einen Kühlschrank, 535 00:27:12,120 --> 00:27:16,400 und du bist nicht der Umsetzung PSet 7 sondern eine tatsächliche Bank, 536 00:27:16,400 --> 00:27:20,000 oder ein Geldautomat, ein Automated Teller Maschine, wobei man irgendwie 537 00:27:20,000 --> 00:27:22,960 wollen in der Lage zu ermächtigen Benutzern, Geld zu überweisen 538 00:27:22,960 --> 00:27:24,500 von einem Konto zum anderen. 539 00:27:24,500 --> 00:27:25,100 OK, hängen. 540 00:27:25,100 --> 00:27:26,683 Ich werde das jetzt stumm, danke. 541 00:27:26,683 --> 00:27:30,450 Also, Geld zu verschieben wollen wir von einer Kontonummer 542 00:27:30,450 --> 00:27:33,600 in einem anderen Konto Anzahl, speziell 100 $. 543 00:27:33,600 --> 00:27:37,690 Also das ist Art von einem beliebigen Beispiel, wobei Sie die ATM, 544 00:27:37,690 --> 00:27:41,060 möchten Sie vielleicht zwei SQL ausführen Abfragen, subtrahieren von einem Konto, 545 00:27:41,060 --> 00:27:42,430 und den anderen Konto hinzuzufügen. 546 00:27:42,430 --> 00:27:46,766 Aber Sie müssen sicherstellen, dass diese wollen zwei Linien sowohl passieren oder überhaupt nicht. 547 00:27:46,766 --> 00:27:48,640 Sie etwas nicht wollen immer unterbrochen. 548 00:27:48,640 --> 00:27:51,440 Sie müssen nicht einige intelligente Bösewicht irgendwie bei der Bank of America stand 549 00:27:51,440 --> 00:27:53,270 mit zwei Geldautomaten vor von ihm und irgendwie 550 00:27:53,270 --> 00:27:55,270 Art der Eingabe in die Befehle zur gleichen Zeit, 551 00:27:55,270 --> 00:28:01,230 hoffentlich versuchen zu $ ​​200 anstatt abzuziehen von $ 100 und nur mit 100 $ gutgeschrieben. 552 00:28:01,230 --> 00:28:04,450 Kurz gesagt, dies zu wollen, dass Sie genau so verhalten, als Sie erwarten. 553 00:28:04,450 --> 00:28:06,540 >> Und die Art, wie Sie tun, diese in SQL-Datenbank ist 554 00:28:06,540 --> 00:28:09,350 können Sie es in was wickeln rief eine Transaktion. 555 00:28:09,350 --> 00:28:14,290 Buchstäblich in SQL, anruft CS50 ist kann Abfragefunktion mit Zitat unquote Start 556 00:28:14,290 --> 00:28:15,370 Transaktion. 557 00:28:15,370 --> 00:28:18,640 Dann können Sie eine beliebige Anzahl ausführen der nachfolgende SQL-Abfragen, 558 00:28:18,640 --> 00:28:20,870 aber keines von ihnen nehmen Wirkung auf die Datenbank 559 00:28:20,870 --> 00:28:25,880 bis Sie Abfrage Zitat unquote nennen zu begehen, wenn wieder mit PHP. 560 00:28:25,880 --> 00:28:29,810 Und auf diese Weise können Sie sicherstellen, dass auch wenn Sie 1.000 Benutzer alle 561 00:28:29,810 --> 00:28:32,080 Schlagen Sie Ihre Datenbank zur gleichen Zeit, SQL 562 00:28:32,080 --> 00:28:34,540 wird, dass diese Versprechen zwei Abfragen werden 563 00:28:34,540 --> 00:28:36,740 ein Recht nach dem anderen umgesetzt. 564 00:28:36,740 --> 00:28:40,330 So können Sie am Ende nicht mit einem Überschuss von Milch oder die falsche Menge letztlich 565 00:28:40,330 --> 00:28:40,830 Geld. 566 00:28:40,830 --> 00:28:43,110 >> Also denken Sie daran, nicht so sehr für PSet 7 567 00:28:43,110 --> 00:28:45,250 sondern für Abschlussarbeiten wenn Sie tatsächlich sind 568 00:28:45,250 --> 00:28:49,690 versuchen, Daten zu bewegen über Tabellen, wie Sie vielleicht hier. 569 00:28:49,690 --> 00:28:53,980 Aber vielleicht noch einfacher und offensichtlich mit einem Beispiel zu verstehen 570 00:28:53,980 --> 00:28:54,860 ist diese hier. 571 00:28:54,860 --> 00:28:57,760 Und jemand gemailt uns diese nur den anderen Tag 572 00:28:57,760 --> 00:28:59,600 als er sah, etwas ähnliches online. 573 00:28:59,600 --> 00:29:03,480 >> Also meines Wissens nach der Pin-System ist nicht anfällig für diesen Angriff. 574 00:29:03,480 --> 00:29:06,637 Und ich habe keine Ahnung, ob es auch Verwendungen die SQL-Datenbank unter der Haube. 575 00:29:06,637 --> 00:29:08,470 Aber lassen Sie nutzen es für um der Diskussion willen. 576 00:29:08,470 --> 00:29:10,178 Hier ist der Bildschirm, der Harvard Leute neigen 577 00:29:10,178 --> 00:29:13,620 bei der Anmeldung mit, dass ihre Harvard-ID-Nummer und deren Pin. 578 00:29:13,620 --> 00:29:19,020 Und angenommen, dass die Pin-System waren in PHP und einer MySQL umgesetzt 579 00:29:19,020 --> 00:29:22,000 Datenbank der Code, daß jemand Vor vielleicht geschrieben haben Jahre 580 00:29:22,000 --> 00:29:23,270 könnte wie folgt aussehen. 581 00:29:23,270 --> 00:29:25,230 Zunächst erklären ein Variable namens username. 582 00:29:25,230 --> 00:29:27,560 Und genau das her die POST-Superglobal. 583 00:29:27,560 --> 00:29:30,140 Dann erhalten Sie eine andere Variable genannt Passwort und das gleiche tun. 584 00:29:30,140 --> 00:29:33,080 Und dann führen Sie einfach Dieses lange Abfrage hier 585 00:29:33,080 --> 00:29:36,690 Wählen Sterne von den Benutzern, wo Benutzername gleich so und so 586 00:29:36,690 --> 00:29:38,510 und Passwort gleich so und so. 587 00:29:38,510 --> 00:29:40,660 >> Beachten Sie, dass die geschweiften Zahnspangen ich verwendet habe hier 588 00:29:40,660 --> 00:29:42,880 nur um PHP meine, gehen voran und Ersatz 589 00:29:42,880 --> 00:29:45,400 Der Wert dieser beiden Variablen recht. 590 00:29:45,400 --> 00:29:50,090 Sie sind nicht unbedingt notwendig, aber sie neigen dazu, subtile Syntaxfehler zu vermeiden. 591 00:29:50,090 --> 00:29:53,650 Also das sieht ganz korrekt auf den ersten Blick. 592 00:29:53,650 --> 00:29:54,240 Und es ist. 593 00:29:54,240 --> 00:29:56,680 Sie könnten der Umsetzung Pin-System auf diese Weise. 594 00:29:56,680 --> 00:30:00,460 >> Aber nehmen wir an, dass ein Super smart und bösartige Schüler 595 00:30:00,460 --> 00:30:03,020 Eingangs dies als seine PIN. 596 00:30:03,020 --> 00:30:05,550 Also habe ich die Kugel entfernt Zeichen hier in der Mock-up, 597 00:30:05,550 --> 00:30:08,760 und ich habe tatsächlich enthüllt was er oder sie vielleicht Typisierung sein. 598 00:30:08,760 --> 00:30:10,350 Und es ist ein wenig seltsam. 599 00:30:10,350 --> 00:30:13,850 Aber was springt heraus an Ihnen bei potenziell beunruhigend über die Eingabe des Benutzers, 600 00:30:13,850 --> 00:30:16,450 auch wenn Sie keine Ahnung haben, was eine SQL-Injection-Angriff bedeutet. 601 00:30:16,450 --> 00:30:20,300 Warum sieht das ein wenig fischig? 602 00:30:20,300 --> 00:30:21,050 Was ist das? 603 00:30:21,050 --> 00:30:21,550 [Unverständlich] 604 00:30:21,550 --> 00:30:24,260 DAVID MALAN: Der oder ein wenig verdächtig. 605 00:30:24,260 --> 00:30:26,310 In der Tat, das ist ein Schlüsselwort aus SQL. 606 00:30:26,310 --> 00:30:28,105 Also das verheißt nichts Gutes. 607 00:30:28,105 --> 00:30:29,980 Die Tatsache, dass es alle diese einfachen Anführungszeichen 608 00:30:29,980 --> 00:30:32,646 sind-- in der Tat, eines der am einfachsten Möglichkeiten, um einige Datenbanken brechen 609 00:30:32,646 --> 00:30:35,880 ist, indem Sie in einem Namen wie O'Reilly das hat einen Apostroph in ihm 610 00:30:35,880 --> 00:30:38,600 denn wenn der Mensch, der schrieb der Code hinter den Kulissen 611 00:30:38,600 --> 00:30:41,570 nicht berücksichtigen, dass es könnten einfache Anführungszeichen in einem Benutzers sein 612 00:30:41,570 --> 00:30:45,060 Eingang, und er oder sie wird unter Verwendung einfache Anführungszeichen in ihrem Code, 613 00:30:45,060 --> 00:30:46,040 schlechte Dinge passieren können. 614 00:30:46,040 --> 00:30:47,870 >> In der Tat, schlimmer noch, darüber nachzudenken. 615 00:30:47,870 --> 00:30:50,600 Wenn dies wieder der Code dass jemand an der Harvard Jahre 616 00:30:50,600 --> 00:30:53,100 vor für den Stift schrieb System, bemerken, was ist 617 00:30:53,100 --> 00:30:56,220 über wechselt bekommen Benutzername und Passwort 618 00:30:56,220 --> 00:30:59,780 wenn der Benutzer wieder skroob als Benutzername 619 00:30:59,780 --> 00:31:03,960 und dann ein, zwei, drei, vier, fünf, Zitat oder Zitat unquote ein equals 620 00:31:03,960 --> 00:31:04,660 zitiere ein. 621 00:31:04,660 --> 00:31:07,220 Und feststellen, was Schlüssel Hier ist der Benutzer nicht 622 00:31:07,220 --> 00:31:09,900 begann ihr Passwort oder ihren Stift mit einem Zitat. 623 00:31:09,900 --> 00:31:12,610 Und sie haben es nicht zu Ende mit einem Zitat, weil er oder sie 624 00:31:12,610 --> 00:31:16,315 geht davon aus, dass, wenn die Programmierer war nicht so scharf, 625 00:31:16,315 --> 00:31:18,690 sie gehen, um die haben einfache Anführungszeichen in ihrem Code. 626 00:31:18,690 --> 00:31:19,860 >> Also hier ist der Code. 627 00:31:19,860 --> 00:31:23,820 Und die Substitution, die könnte jetzt geschehen ist dies. 628 00:31:23,820 --> 00:31:26,350 Und ich habe unterstrichen, was der Benutzer eingetippt. 629 00:31:26,350 --> 00:31:28,480 Also vor, nach. 630 00:31:28,480 --> 00:31:33,330 Und feststellen, was gelinde beunruhigend jetzt über der rechten Hälfte dieser SQL-Code? 631 00:31:33,330 --> 00:31:36,300 Es ist ein wenig komplexer, zugegebenermaßen als die Abfragen haben wir gesehen. 632 00:31:36,300 --> 00:31:38,550 Aber das kann unmöglich eine gute Sache, wenn Sie 633 00:31:38,550 --> 00:31:42,240 sagen select Stern, der wählen ist alles aus der Tabelle des Benutzers 634 00:31:42,240 --> 00:31:46,630 wobei Benutzername gleich skroob und Kennwort gleich einem, zwei, drei, vier, 635 00:31:46,630 --> 00:31:49,610 fünf oder eins gleich eins. 636 00:31:49,610 --> 00:31:53,860 Was ist die logische Implikation dieser letzten Klausel vermutlich? 637 00:31:53,860 --> 00:31:55,650 Es ist nur immer wahr. 638 00:31:55,650 --> 00:31:59,930 >> Und weil wir irgendwie geahnt oder durch Versuch und Irrtum gemustert 639 00:31:59,930 --> 00:32:02,760 daß der Programmierer, schrieb dieser Code nicht 640 00:32:02,760 --> 00:32:07,250 rechnen mit einer menschlichen oder schlechter Mensch Eingabe in einfache Anführungszeichen als gut, 641 00:32:07,250 --> 00:32:10,350 wir syntaktisch kann vervollständigen die SQL-Abfrage 642 00:32:10,350 --> 00:32:12,260 mit etwas unsinnig sondern etwas, das 643 00:32:12,260 --> 00:32:15,930 ist syntaktisch falsch dass immer true ergibt. 644 00:32:15,930 --> 00:32:19,130 Also, wenn dieser Code verwendet wird, um zu antworten die Frage richtig oder falsch ist 645 00:32:19,130 --> 00:32:22,930 Dieser Benutzer darf das passieren werden Antwort ist immer offenbar gehen 646 00:32:22,930 --> 00:32:26,930 um wahr zu sein, weil dies wird immer etwas aus der Datenbank auswählen 647 00:32:26,930 --> 00:32:29,280 weil man natürlich immer gleich eins. 648 00:32:29,280 --> 00:32:30,360 >> Also, was ist die Lösung? 649 00:32:30,360 --> 00:32:33,290 Nun, in PSet 7, wir eigentlich vermeiden Sie diese alle zusammen. 650 00:32:33,290 --> 00:32:37,360 Wir geben Ihnen eine Abfragefunktion, und wir Sie ermutigen, Fragezeichen verwenden 651 00:32:37,360 --> 00:32:40,430 als Platzhalter, ähnlich im Geiste der printf% s, 652 00:32:40,430 --> 00:32:43,710 aber was ist Schlüssel zu den Fragezeichen Hier ist, wenn Sie tatsächlich durch lesen 653 00:32:43,710 --> 00:32:46,950 functions.php, wo unsere Abfragefunktion implementiert ist, 654 00:32:46,950 --> 00:32:52,780 diese Fragezeichen sind geflohen, wobei alles potenziell gefährliche 655 00:32:52,780 --> 00:32:58,210 wie ein einfaches Anführungszeichen eingeschaltet in einem entflohenen Apostroph. 656 00:32:58,210 --> 00:33:00,590 >> Also das ist, was ist wirklich passiert, wenn Sie 657 00:33:00,590 --> 00:33:04,850 verwenden CS50 die Abfragefunktion oder eine beliebige Anzahl Dritter frei Bibliotheken, 658 00:33:04,850 --> 00:33:06,000 das gleiche tun. 659 00:33:06,000 --> 00:33:09,850 Ist in diesem Fall nicht egal, in grün, wenn der Benutzer in einem einzigen Zitat getippt 660 00:33:09,850 --> 00:33:12,070 Da die Abfrage Funktion, die wir geschrieben haben ist 661 00:33:12,070 --> 00:33:15,120 werde umgekehrten Schrägstriche vor dem hinzufügen eine solche gefährliche Zitat. 662 00:33:15,120 --> 00:33:17,360 Das ist also nicht, in Tatsächlich gehen legit zu sein. 663 00:33:17,360 --> 00:33:20,910 Dies ist wie das Schreiben in einer verrückten suchen Kennwort, das ist natürlich nicht 664 00:33:20,910 --> 00:33:23,490 um skroob tatsächliche Passwort sein. 665 00:33:23,490 --> 00:33:28,260 >> Also das Essen zum Mitnehmen für CS50 ist einer, absolut immer etwas verwenden 666 00:33:28,260 --> 00:33:30,860 wie Abfragefunktion CS50 ist oder die zugrunde liegende Bibliothek, 667 00:33:30,860 --> 00:33:32,560 was passiert mit namens PDO werden. 668 00:33:32,560 --> 00:33:35,880 Aber nie, nie, Code nie tun wie dieses 669 00:33:35,880 --> 00:33:39,472 ohne Flucht oder Scheuer wie sie sagen Ihre Eingaben. 670 00:33:39,472 --> 00:33:42,430 Und du wirst irgendwann wahrscheinlich stoßen einige Website wie diese. 671 00:33:42,430 --> 00:33:46,060 Tatsächlich scheint es so zu sein, wie in Flughäfen und Hotels in Orten 672 00:33:46,060 --> 00:33:48,880 wo sie kostenloses WLAN Zugang, die Sie sich anmelden müssen, 673 00:33:48,880 --> 00:33:51,010 Diese Websites sind immer Schlechtes implementiert. 674 00:33:51,010 --> 00:33:55,680 Und so eine Art Spaß zu Hause Übung nicht für bösartige Zwecke oder mehr 675 00:33:55,680 --> 00:33:59,170 eines Spaß auf der Straße Übung ist es, geben Sie einfach 676 00:33:59,170 --> 00:34:02,850 ein Apostroph, ein einfaches Anführungszeichen, in eine Form auf irgendeiner Website 677 00:34:02,850 --> 00:34:03,810 und sehen was passiert. 678 00:34:03,810 --> 00:34:06,660 Und wenn der Server abstürzt oder gibt Sie irgendeine Art von Fehlermeldung, 679 00:34:06,660 --> 00:34:09,690 es kann sehr gut sein, dass jemand hat dies nicht erwartet. 680 00:34:09,690 --> 00:34:15,239 Und dann sollten Sie die richtige alarmieren Behörden und gehen Sie nicht weiter. 681 00:34:15,239 --> 00:34:20,843 >> So, jetzt euch hoffentlich verstehen ein bisschen mehr Geek-Spaß hier. 682 00:34:20,843 --> 00:34:24,120 >> [Gelächter] 683 00:34:24,120 --> 00:34:27,571 684 00:34:27,571 --> 00:34:29,070 DAVID MALAN: Sie wissen, dass Sie ein Aussenseiter sind. 685 00:34:29,070 --> 00:34:30,944 Für die nächsten paar Jahren werden Sie sich erinnern 686 00:34:30,944 --> 00:34:33,520 die wenig Bobby Tables ist wegen dieser Karikatur hier. 687 00:34:33,520 --> 00:34:36,760 Also sollte man nicht vergessen, wie wir Kontextwechsel ein letztes Mal 688 00:34:36,760 --> 00:34:38,770 heute JavaScript. 689 00:34:38,770 --> 00:34:41,600 Wir haben relativ wenig ausgegeben Zeit auf der Syntax PHP 690 00:34:41,600 --> 00:34:43,440 denn es ist eigentlich Super ähnlich C. 691 00:34:43,440 --> 00:34:47,300 Und schön genug, JavaScript zu ist super ähnlich Cs Syntax 692 00:34:47,300 --> 00:34:49,639 sowie wir in sehen Nur einen Augenblick und wie wir 693 00:34:49,639 --> 00:34:51,205 siehe später in dieser Woche im Besonderen. 694 00:34:51,205 --> 00:34:54,080 Was Sie mit dieser Sprache tun können, obwohl, ist umso leistungsfähiger, 695 00:34:54,080 --> 00:34:55,790 vor allem mit APIs. 696 00:34:55,790 --> 00:34:56,960 >> Aber zuerst eine kurze Tour. 697 00:34:56,960 --> 00:35:00,450 Also eine, in JavaScript gibt es keine Hauptfunktion, das ist schön. 698 00:35:00,450 --> 00:35:02,650 Wie bei PHP, können Sie einfach Code schreiben. 699 00:35:02,650 --> 00:35:04,310 Bedingungen sehen wie folgt aus. 700 00:35:04,310 --> 00:35:07,100 Und Booleschen Ausdrücken vielleicht aussehen oder so. 701 00:35:07,100 --> 00:35:09,530 Schalter existieren, und sie könnte wie folgt aussehen. 702 00:35:09,530 --> 00:35:10,970 Vier Schleifen aussehen. 703 00:35:10,970 --> 00:35:12,390 While-Schleifen aussehen. 704 00:35:12,390 --> 00:35:14,160 Haben whiles aussehen. 705 00:35:14,160 --> 00:35:16,850 Und dann Arrays aussehen Dieses sehr ähnlich PHP. 706 00:35:16,850 --> 00:35:20,740 Aber beachten Sie, dass in JavaScript Sie deklarieren eine Variable nicht mit einem Dollar 707 00:35:20,740 --> 00:35:25,190 unterschreiben, nicht mit einem Datentyp, sondern buchstäblich sagen var für variable davor. 708 00:35:25,190 --> 00:35:27,900 Auch sie ist schwach typisierte dadurch gekennzeichnet, dass es Typen, 709 00:35:27,900 --> 00:35:29,729 aber Sie sind nicht explizit deklarieren sie nicht. 710 00:35:29,729 --> 00:35:31,520 Und dann ein String, für Beispiel aussehen 711 00:35:31,520 --> 00:35:34,350 wie diese, dass die String wobei in diesem Fall bezeichnet n. 712 00:35:34,350 --> 00:35:35,410 Und dann ein Objekt. 713 00:35:35,410 --> 00:35:37,010 Und diese werden wir mehr in Kürze sehen. 714 00:35:37,010 --> 00:35:41,470 Und eine Aufgabe ist vielleicht eine der am häufigsten gesehen Datenstrukturen 715 00:35:41,470 --> 00:35:44,050 in einem JavaScript-basierten Programm, weil es 716 00:35:44,050 --> 00:35:46,680 Sie assoziieren beliebige Schlüsselwertpaare nur 717 00:35:46,680 --> 00:35:51,240 wie PHP assoziative Arrays und gerade wie Ihr eigenes Hash-Tabelle 718 00:35:51,240 --> 00:35:54,042 oder versuchen Sie, wie wir umgesetzt ein paar Wochen zurück. 719 00:35:54,042 --> 00:35:56,250 Lassen Sie uns also tatsächlich sehen, was wir mit JavaScript tun können. 720 00:35:56,250 --> 00:35:59,410 Insbesondere ist dies eine kurze Liste der Features 721 00:35:59,410 --> 00:36:02,300 dass Browser, dass ermöglichen es uns, JavaScript Haken 722 00:36:02,300 --> 00:36:05,470 in eine Website in der folgenden Weise. 723 00:36:05,470 --> 00:36:09,340 JavaScript wird oft als ein gebrauchtes Client-Seite Skriptsprache. 724 00:36:09,340 --> 00:36:10,130 Es ist nicht kompiliert. 725 00:36:10,130 --> 00:36:11,370 Auch sie interpretiert wird. 726 00:36:11,370 --> 00:36:15,740 Aber im Gegensatz zu PHP, das in Betrieb war auf dem Server, in dem Web-Server, 727 00:36:15,740 --> 00:36:18,220 oder tief in die Kunden, JavaScript 728 00:36:18,220 --> 00:36:22,190 ist, dass es verschiedene läuft in der Regel in Ihrem Browser. 729 00:36:22,190 --> 00:36:26,060 >> Also jede JavaScript Code, den Sie mit dem Schreiben beginnen für PSet 8 oder das endgültige Projekt, 730 00:36:26,060 --> 00:36:29,890 oder in der realen Welt wird in der Regel gehen auf dem Server gespeichert werden, absolut 731 00:36:29,890 --> 00:36:33,110 in einem Punkt HTML oder Punkt JS für JavaScript-Datei. 732 00:36:33,110 --> 00:36:35,770 Aber der Browser wird zu, dass Javascript herunterladen 733 00:36:35,770 --> 00:36:39,530 Code eine eigene Instanz von Chrome, oder IE oder Firefox, oder was auch immer. 734 00:36:39,530 --> 00:36:43,870 Und der Code tatsächlich zu bekommen innerhalb des eigenen Browser ausgeführt. 735 00:36:43,870 --> 00:36:46,560 Nur um diese realer zu machen, Lassen Sie uns dies zu sehen in konkreter Form. 736 00:36:46,560 --> 00:36:50,120 >> Wir haben keine Ahnung, was dieser Code tut ohne wirklich zu lesen durch sie. 737 00:36:50,120 --> 00:36:52,670 Aber lassen Sie mich auf Facebook.com gehen ohne Anmeldung. 738 00:36:52,670 --> 00:37:00,440 Lassen Sie mich gehen, um Element inspizieren und gehen Sie zu, sagen wir mal, Netzwerk und laden die Seite neu. 739 00:37:00,440 --> 00:37:04,150 Und wir werden see-- lass mich verschieben Reload die Seite, um alle Anforderungen an neue zu bekommen. 740 00:37:04,150 --> 00:37:08,850 Und die erste Datei ich sehe, ist CSS, CSS. 741 00:37:08,850 --> 00:37:10,880 Hier ist der erste JavaScript-Datei, und ich habe 742 00:37:10,880 --> 00:37:14,600 Keine Ahnung, was das bedeutet, aber hier ist ein Teil der JavaScript-Code 743 00:37:14,600 --> 00:37:16,180 Das treibt Facebook. 744 00:37:16,180 --> 00:37:18,400 Es ist nicht einmal wirklich, dass enthüllt, um hineinzuzoomen. 745 00:37:18,400 --> 00:37:20,260 Es ist immer noch genauso unsinnig. 746 00:37:20,260 --> 00:37:24,341 >> Aber Sie selbst unten sehen werden, gibt es noch mehr dieser JavaScript-Dateien. 747 00:37:24,341 --> 00:37:24,840 Whoops. 748 00:37:24,840 --> 00:37:25,440 Das ist ein Ping. 749 00:37:25,440 --> 00:37:28,550 Gehen wir ein wenig nach unten ferner weitere, noch weiter. 750 00:37:28,550 --> 00:37:29,894 Es gibt eine. 751 00:37:29,894 --> 00:37:31,238 Es gibt eine. 752 00:37:31,238 --> 00:37:31,880 Es gibt eine. 753 00:37:31,880 --> 00:37:35,820 >> Also auch wenn Facebook, hinter dem Szenen, wird zum Teil in PHP geschrieben 754 00:37:35,820 --> 00:37:39,100 und Facebooks eigene Version davon, gibt es eine riesige Menge von JavaScript. 755 00:37:39,100 --> 00:37:41,330 Tatsächlich kann jedes der Chatten Sie bei Facebook zu tun, 756 00:37:41,330 --> 00:37:45,520 einem der Inline-Timeline-Updates dass in Echtzeit geschehen, all das 757 00:37:45,520 --> 00:37:47,944 wird durch JavaScript angetrieben. 758 00:37:47,944 --> 00:37:48,444 Ja? 759 00:37:48,444 --> 00:37:50,235 >> PUBLIKUM: Ich bin mir nicht sicher wenn dies Facebook, 760 00:37:50,235 --> 00:37:53,624 aber ich dachte, dass Facebook entwickelt ihre eigenen in-house-Code Sprache? 761 00:37:53,624 --> 00:37:54,540 DAVID MALAN: Sie taten. 762 00:37:54,540 --> 00:37:58,110 Also das ist, warum ich sage, eine Varianz von PHP namens Hip Hop, dass sie tatsächlich 763 00:37:58,110 --> 00:38:03,440 Komfortfunktionen, so dass, wenn Mark zuerst implementiert Facebook, 764 00:38:03,440 --> 00:38:04,710 es wurde in PHP geschrieben. 765 00:38:04,710 --> 00:38:07,370 Und diese Art von geblieben ist die Art von Frontend Sprache 766 00:38:07,370 --> 00:38:09,030 dass sie für viel nutzen ihrer Codierung, aber 767 00:38:09,030 --> 00:38:11,870 hat nicht eine Sprache, die ist schon Waagen besonders gut, um Milliarden 768 00:38:11,870 --> 00:38:12,630 von Menschen. 769 00:38:12,630 --> 00:38:15,300 Und so haben sie ihre eigenen hinzugefügt Verbesserungen hinter den Kulissen. 770 00:38:15,300 --> 00:38:17,049 Und sie beliebig verwenden von anderen Sprachen 771 00:38:17,049 --> 00:38:19,170 für verschiedene Stücke ihrer Infrastruktur. 772 00:38:19,170 --> 00:38:24,080 Also ja, es ist eine Varianz was wir heute als PHP kennen. 773 00:38:24,080 --> 00:38:26,610 >> Werfen wir also einen Blick auf ein paar Beispiele 774 00:38:26,610 --> 00:38:28,890 der, wie wir JavaScript hier verwenden. 775 00:38:28,890 --> 00:38:32,530 In der heutigen Quellcode, haben wir ein Reihe von Dateien, von denen die erste, 776 00:38:32,530 --> 00:38:34,090 lasst DOM Null bezeichnet. 777 00:38:34,090 --> 00:38:36,770 So DOM Null sieht wie folgt aus. 778 00:38:36,770 --> 00:38:40,730 Lassen Sie mich in diesem Verzeichnis abgelegt und eröffnen domzero.html, 779 00:38:40,730 --> 00:38:44,970 dessen Oberseite hat eine doc-Typ Erklärung, hier sage, kommt HTML 5. 780 00:38:44,970 --> 00:38:46,440 Und jetzt ist hier ein HTML-Tag. 781 00:38:46,440 --> 00:38:47,540 Hier ist der Kopf-Tag. 782 00:38:47,540 --> 00:38:49,210 Und hier ist, was es heute Neues. 783 00:38:49,210 --> 00:38:52,620 >> Wir haben jetzt eine script-Tag Innenseite der Kopf der Seite. 784 00:38:52,620 --> 00:38:55,290 Und dies offenbar tut sehr wenig, aber Bekanntmachung 785 00:38:55,290 --> 00:38:58,410 dass ich definiert habe ein Skript, eine JavaScript. 786 00:38:58,410 --> 00:39:01,050 Und als eine Seite, da diese ist ein verbreiteter Irrtum, 787 00:39:01,050 --> 00:39:05,220 JavaScript hat absolut nichts mit Java, der Sprache zu tun 788 00:39:05,220 --> 00:39:08,010 dass einige von euch vielleicht in APCS gelernt haben. 789 00:39:08,010 --> 00:39:10,480 Es war eher ein Marketing Sache als alles andere, 790 00:39:10,480 --> 00:39:12,980 reiten die Rockschöße von Java Jahren. 791 00:39:12,980 --> 00:39:17,300 Aber JavaScript nichts zu tun Java, nur ähnlich, und ärgerlicherweise 792 00:39:17,300 --> 00:39:18,480 Verwechseln benannt. 793 00:39:18,480 --> 00:39:21,890 >> Also hier ist, wie Sie eine Funktion deklarieren in JavaScript, wörtlich sagen Funktion, 794 00:39:21,890 --> 00:39:24,556 dann wird der Name der Funktion, dann keine Argumente, es könnte zu nehmen, 795 00:39:24,556 --> 00:39:25,530 genau wie in PHP. 796 00:39:25,530 --> 00:39:28,990 Stellt sich heraus, in JavaScript eine der ärgerliche Funktionen, die vorhanden ist Alert. 797 00:39:28,990 --> 00:39:31,392 Dies ist ein kleines Fenster, das öffnet sich und warnt Sie 798 00:39:31,392 --> 00:39:32,600 bis zu einem gewissen Teil der Information. 799 00:39:32,600 --> 00:39:33,766 Es ist allgemein verpönt. 800 00:39:33,766 --> 00:39:35,980 Aber wir werden es als nutzen Sie unser erste Übung hier. 801 00:39:35,980 --> 00:39:37,900 >> Beachten Sie ein paar Features von JavaScript. 802 00:39:37,900 --> 00:39:41,524 Einfache Anführungszeichen und doppelte Anführungszeichen eigentlich gar nicht mehr wichtig. 803 00:39:41,524 --> 00:39:43,690 Einfache Anführungszeichen und Doppel Quotes können untereinander ausgetauscht werden, 804 00:39:43,690 --> 00:39:46,220 während in C, zu benutzen müssen Sie Anführungszeichen für Streicher, 805 00:39:46,220 --> 00:39:48,150 und Sie zwei Einzel haben Zitate für chars. 806 00:39:48,150 --> 00:39:51,150 In der JavaScript Welt viele Menschen, die meisten Menschen 807 00:39:51,150 --> 00:39:54,970 verwenden einfache Anführungszeichen um Zeichenfolgen nur weil es eine stilistische Sache. 808 00:39:54,970 --> 00:39:58,330 Aber was ist der Plus-Operator hier die wir noch nicht gesehen haben? 809 00:39:58,330 --> 00:39:59,836 >> PUBLIKUM: Verkettung. 810 00:39:59,836 --> 00:40:00,960 DAVID MALAN: Verkettung. 811 00:40:00,960 --> 00:40:02,450 Also C hat noch nicht einmal dies. 812 00:40:02,450 --> 00:40:04,820 PHP hat den Punkt-Operator, was tut. 813 00:40:04,820 --> 00:40:09,710 JavaScript hat den Plus-Operator, Verwechseln ist wie Java. 814 00:40:09,710 --> 00:40:11,440 Nun, was ist denn hier los? 815 00:40:11,440 --> 00:40:14,260 >> Also hier ist, wo ein Grund Verständnis von diesem Bild 816 00:40:14,260 --> 00:40:17,010 wir warfen ein paar vor Tagen ins Spiel kommt. 817 00:40:17,010 --> 00:40:19,620 Angemeldet als wir eine einfache Version eines HTML page-- 818 00:40:19,620 --> 00:40:20,830 es gerade gesagt, hallo Welt. 819 00:40:20,830 --> 00:40:22,770 Und dann zog wir einen Baum auf der rechten Seite, die 820 00:40:22,770 --> 00:40:27,320 hatte eine Reihe von Rechtecken und Linien Verbinden sie wie ein Stammbaum. 821 00:40:27,320 --> 00:40:30,820 Also das ist der sogenannte DOM oder Document Object Model. 822 00:40:30,820 --> 00:40:36,759 Und es stellt sich heraus, dass Sie zugreifen können Rechtecke in diesem Baum mit Syntax 823 00:40:36,759 --> 00:40:37,550 wie folgt aus. 824 00:40:37,550 --> 00:40:41,370 Sie sagen, buchstäblich Dokument, das ein ist Sonder globale Variable in einer JavaScript 825 00:40:41,370 --> 00:40:45,890 Programm, das eine Funktion hat damit verbunden, dass Sie zugreifen können 826 00:40:45,890 --> 00:40:50,280 ähnlich einer Struktur, aber Sie einfach sagen Punkt und dann den Namen der Funktion, 827 00:40:50,280 --> 00:40:52,390 bekommen Element nach ID. 828 00:40:52,390 --> 00:40:55,460 >> Das Element möchte ich erhalten, ist anscheinend zitieren unquote Namen. 829 00:40:55,460 --> 00:40:57,150 Und dann will ich, um seinen Wert zu erhalten. 830 00:40:57,150 --> 00:40:58,330 Jetzt sind wir vor uns selbst bekommen. 831 00:40:58,330 --> 00:41:00,038 Ich bin mir nicht einmal sicher, was all dies geht. 832 00:41:00,038 --> 00:41:03,000 Lassen Sie uns schnell vorwärts zu der HTML-Datei auf die Seite, die super einfach ist. 833 00:41:03,000 --> 00:41:05,370 >> Beachten Sie, dass ich festgelegt habe Ein Formular hier unten. 834 00:41:05,370 --> 00:41:07,940 HINWEIS Ich habe es mit einer eindeutigen ID, auch wenn wir nicht verwendet haben 835 00:41:07,940 --> 00:41:08,870 dieses Attribut vor. 836 00:41:08,870 --> 00:41:11,300 Aber das gibt es in HTML. 837 00:41:11,300 --> 00:41:15,570 Sie können einige Brocken eindeutig zu identifizieren von HTML mit einem Bezeichner wie diese. 838 00:41:15,570 --> 00:41:19,880 >> Unsere jetzt this-- entpuppt HTML unterstützt, pro diesem Waschzettel 839 00:41:19,880 --> 00:41:22,490 vor einem Augenblick, eine ganze Bündel von Event-Handlern. 840 00:41:22,490 --> 00:41:25,060 Und dieser Event-Handler sagt auf einreichen. 841 00:41:25,060 --> 00:41:28,730 Auf der Benutzer Einreichung dieses Form, rufen Sie den folgenden Code. 842 00:41:28,730 --> 00:41:31,360 Und der Code, der vor sich geht aufgerufen oder ausgeführt werden 843 00:41:31,360 --> 00:41:35,260 Genau diese, die griechische Funktion gefolgt von return false. 844 00:41:35,260 --> 00:41:37,360 Alles andere sollte recht vertraut sein. 845 00:41:37,360 --> 00:41:42,050 >> Hier ist eine Eingabe vom Typ text, dessen ID, in diesem Fall wird sich Name sein. 846 00:41:42,050 --> 00:41:45,430 Wir haben nicht eine tatsächliche Namensattribut dies Zeit-- und eine Absenden-Button. 847 00:41:45,430 --> 00:41:48,330 Also die resultierende Seite sieht wie folgt aus. 848 00:41:48,330 --> 00:41:52,890 Und das resultierende Verhalten, Sie werden sehen, wie es aussieht. 849 00:41:52,890 --> 00:41:56,940 Die Seite es lokale Hosts sagt, hallo David, kaum eine ästhetisch ansprechende 850 00:41:56,940 --> 00:41:58,340 Möglichkeit, einen Benutzer zu begrüßen. 851 00:41:58,340 --> 00:41:59,950 Aber was ist eigentlich los? 852 00:41:59,950 --> 00:42:01,360 >> Nun, überlegen, was das ist. 853 00:42:01,360 --> 00:42:02,310 Dies ist ein Textfeld. 854 00:42:02,310 --> 00:42:04,635 Und nach dem HTML hier, ich habe es gegeben 855 00:42:04,635 --> 00:42:07,350 eine eindeutige Kennung genannt Zitat unquote Namen. 856 00:42:07,350 --> 00:42:09,770 Inzwischen habe ich gesagt, als der Benutzer dieses Formular abschickt 857 00:42:09,770 --> 00:42:13,820 mit ENTER oder Anklicken der Absenden Schaltfläche, rufen Sie die Funktion aufgerufen Greet 858 00:42:13,820 --> 00:42:15,410 und dann wieder False. 859 00:42:15,410 --> 00:42:16,870 Betrachten wir die in umgekehrter Richtung. 860 00:42:16,870 --> 00:42:20,590 Beachten Sie, wenn ich klicken Sie auf Senden, die URL dieser Seite ändert sich nicht. 861 00:42:20,590 --> 00:42:22,420 Symbol des Browsers nicht Spinnerei starten. 862 00:42:22,420 --> 00:42:27,050 Ich wollte nicht irgendwohin zu gehen, und das ist wörtlich, weil ich sagte, False zurück. 863 00:42:27,050 --> 00:42:31,534 False zurück Kurzschlüsse oder Anschläge das Standardverhalten eines Formulars. 864 00:42:31,534 --> 00:42:33,700 So dass dann lässt uns mit diese eine letzte Frage. 865 00:42:33,700 --> 00:42:34,764 Was bedeutet Greet zu tun? 866 00:42:34,764 --> 00:42:36,680 Nun, offenbar Greet ruft eine Funktion namens 867 00:42:36,680 --> 00:42:39,250 Alarm, geht in einem Lang Argument, das ist 868 00:42:39,250 --> 00:42:43,950 das Ergebnis zusammen eine Verkettung Bündel von Teilstrings, hallo Komma Raum, 869 00:42:43,950 --> 00:42:45,810 dann, was diese zurückgibt. 870 00:42:45,810 --> 00:42:51,490 Also Dokument ist wie eine globale Variable auf dieser Wurzel dieses Baumes, 871 00:42:51,490 --> 00:42:55,560 Aufruf einer speziellen Funktion, andernfalls jetzt als Verfahren bekannt. 872 00:42:55,560 --> 00:42:57,650 Eine Funktion, die es Innenseite eine Variable 873 00:42:57,650 --> 00:42:59,640 genannt Methode anstelle einer Funktion. 874 00:42:59,640 --> 00:43:01,570 >> So erhalten Element nach ID. 875 00:43:01,570 --> 00:43:03,940 Welche Element tun Sie wollen durch ihre ID zu bekommen? 876 00:43:03,940 --> 00:43:06,970 Zitat unquote Namen und dann spezifisch zu bewerten. 877 00:43:06,970 --> 00:43:12,000 Also mit anderen Worten, dass der Code einfach findet das Textfeld mit der ID Name 878 00:43:12,000 --> 00:43:13,380 und bekommt dann seinen Wert. 879 00:43:13,380 --> 00:43:16,460 Also, wenn ich das ändern und sagen Davin David Statt, 880 00:43:16,460 --> 00:43:20,670 und klicken Sie auf Senden, jetzt sind wir einen Gruß für Davin. 881 00:43:20,670 --> 00:43:22,890 >> Alles klar, so alles schön und gut. 882 00:43:22,890 --> 00:43:25,480 Aber mal sehen, ob wir machen können diese ein wenig sauberer, da nur 883 00:43:25,480 --> 00:43:28,190 Schreiben von Code wie dieser ist generell werde verpönt. 884 00:43:28,190 --> 00:43:30,060 Das wird gruseliger aussehen. 885 00:43:30,060 --> 00:43:32,330 Aber was ist das erste Unterschied, dass Sie hier zu beachten 886 00:43:32,330 --> 00:43:35,970 in dieser Ausführung neben der Namensänderung zu DOM ein? 887 00:43:35,970 --> 00:43:41,110 Was strukturell anders aussieht darüber gegenüber dem anderen? 888 00:43:41,110 --> 00:43:41,932 Ja? 889 00:43:41,932 --> 00:43:43,890 PUBLIKUM: Ist das Formular auf Anfang des Skripts jetzt? 890 00:43:43,890 --> 00:43:46,570 DAVID MALAN: Ja, ist die Form auf der Oberseite des Skripts für einige neugierige Grund. 891 00:43:46,570 --> 00:43:48,736 Also das ist das erste, was dass springt bei mir auch. 892 00:43:48,736 --> 00:43:50,990 Und glücklicherweise zumindest, dieser Teil ist identisch. 893 00:43:50,990 --> 00:43:53,470 So ist die einzige Sache, die scheint verschieden sein können, ist dies. 894 00:43:53,470 --> 00:43:55,296 >> Also hier ist was ist ordentlich über JavaScript 2. 895 00:43:55,296 --> 00:43:57,420 Und es macht es schwierig, verstehen, auf den ersten Blick, 896 00:43:57,420 --> 00:44:00,670 insbesondere für Abschlussarbeiten, wenn Sie Beispielcode suchen online, 897 00:44:00,670 --> 00:44:04,200 aber es läuft darauf hinaus, einige Grund syntaktische Merkmale. 898 00:44:04,200 --> 00:44:06,230 Auch hier ist, dass Dokument globale Variable. 899 00:44:06,230 --> 00:44:09,540 Auch hier ist das Verfahren oder die Funktion das sagt bekommen das Element von ID. 900 00:44:09,540 --> 00:44:11,570 Dieses Mal möchte ich Holen Sie sich die ID-Demo aufgerufen. 901 00:44:11,570 --> 00:44:12,490 Wo ist das? 902 00:44:12,490 --> 00:44:15,400 Das ist offenbar Recht Hier wird die Form selbst. 903 00:44:15,400 --> 00:44:20,010 >> Und jetzt feststellen, dass offenbar, wenn ich zurück, dass die Knoten aus dem Baum, 904 00:44:20,010 --> 00:44:22,940 stellt die Form selbst, nicht ein Textfeld, 905 00:44:22,940 --> 00:44:26,970 es stellt sich heraus, dass die Form, dass Knoten oder Rechteck aus dem Baum, 906 00:44:26,970 --> 00:44:30,450 hat das, was wir eine Eigenschaft nennen, sehr, sehr, sehr ähnlich 907 00:44:30,450 --> 00:44:35,390 im Geiste auf eine Struktur in C Es ist nur ein Datenelement innerhalb dieses Rechtecks. 908 00:44:35,390 --> 00:44:38,300 >> Also habe ich die Form habe hier, und ich bin Befestigung, 909 00:44:38,300 --> 00:44:44,650 oder ich zuweisen, um seine On Submit Handler oder vielmehr auf Eigentum inserieren 910 00:44:44,650 --> 00:44:45,740 die folgende Funktion. 911 00:44:45,740 --> 00:44:49,000 Und das ist bei weitem das verrückteste was bisher syntaktisch. 912 00:44:49,000 --> 00:44:53,610 Es stellt sich heraus in JavaScript und PHP, und ehrlich gesagt für diese Angelegenheit in C, 913 00:44:53,610 --> 00:44:58,990 auch wenn wir es nicht tun, können Sie hinzufügen namenlose, anonyme oder Alias ​​Lambda 914 00:44:58,990 --> 00:45:03,000 Funktionen, die nicht einen Namen haben aber dennoch aufgerufen werden. 915 00:45:03,000 --> 00:45:07,050 >> Also, was ich hier mache ist, ich bin Zuweisen Dieses On Submit Eigenschaft, die 916 00:45:07,050 --> 00:45:14,330 innerhalb dieses Knotens meiner DOM-Baum, ein Funktion, Funktionszeiger, wenn man so will. 917 00:45:14,330 --> 00:45:16,310 Diese Funktion hat keine nennen, aber das bedeutet nicht 918 00:45:16,310 --> 00:45:19,110 Rolle, weil wir sehen, in einem Moment, wie man es nennen. 919 00:45:19,110 --> 00:45:21,780 Wenn diese Funktion aufgerufen wird, Dieser Code wird ausgeführt, dann 920 00:45:21,780 --> 00:45:24,210 false wie vor zurück. 921 00:45:24,210 --> 00:45:25,800 >> Aber bemerken, was ich getan habe. 922 00:45:25,800 --> 00:45:27,830 An diesem Punkt in der Geschichte, ich habe ein Formular. 923 00:45:27,830 --> 00:45:30,190 Es hat eine eindeutige ID-Demo aufgerufen. 924 00:45:30,190 --> 00:45:33,740 Hier unten, ich habe ein Script-Tag dass führt den folgenden Code. 925 00:45:33,740 --> 00:45:37,720 Er kann an diesem Knoten in der Baum ist es auf Absenden 926 00:45:37,720 --> 00:45:40,260 Eigenschaft dieser Funktion hier. 927 00:45:40,260 --> 00:45:44,310 Und nur von der Natur, wie Browsern funktionieren, wenn ich jetzt klicken Sie auf Senden oder drücken Sie die Eingabetaste, 928 00:45:44,310 --> 00:45:45,889 diese Funktion werde gecallt. 929 00:45:45,889 --> 00:45:48,680 Es hat keinen Namen, weil die brauchen zum Teufel kümmert es, was es heißt. 930 00:45:48,680 --> 00:45:52,540 Das einzige Mal, es jemals zu bekommen genannt ist, wenn ich das Formular aus. 931 00:45:52,540 --> 00:45:55,130 Es gibt keine Notwendigkeit für mich, der menschliche Entwickler, 932 00:45:55,130 --> 00:45:57,330 tatsächlich nennen es anderswo. 933 00:45:57,330 --> 00:46:00,720 >> Jetzt nur als Teaser, als ob das wurden nicht dagegen genug Biegen, 934 00:46:00,720 --> 00:46:03,330 wir können sogar diese schauen mehr kryptische Verwendung 935 00:46:03,330 --> 00:46:05,850 ein super beliebt Bibliothek namens jQuery. 936 00:46:05,850 --> 00:46:08,760 In der Tat jQuery und JavaScript werden oft verschmolzen. 937 00:46:08,760 --> 00:46:12,790 Und was wir am Mittwoch tun ist Start mit diesen Sprache und Bibliotheken 938 00:46:12,790 --> 00:46:16,030 zu bauen zunehmend asynchronen und dynamische Anwendungen 939 00:46:16,030 --> 00:46:18,950 wie die Karte weiter Anwendungen, Anwendungen 940 00:46:18,950 --> 00:46:22,360 dass die Webseite in Echt aktualisieren Zeit, ähnlich wie Facebook oder Gchat 941 00:46:22,360 --> 00:46:27,130 zu tun, und uns nicht mehr darauf beschränken hitting Absenden durch eine get oder einfach nur Post 942 00:46:27,130 --> 00:46:27,630 allein. 943 00:46:27,630 --> 00:46:29,055 Also werde ich Ihnen am Mittwoch sehen. 944 00:46:29,055 --> 00:46:31,805 945 00:46:31,805 --> 00:46:35,550 >> [Musik zu spielen] 946 00:46:35,550 --> 00:48:09,728