DAVID J. MALAN: All right, so dass dies hier ist die Myo Arm Band, ein paar der wir haben für CS50 Abschlussarbeiten. Und das war eine Demonstration wir in der Warteschlange Sie im Voraus, wo im wesentlichen dies ziemlich eng Arm Band hier oben hört zu Ihren Muskelbewegungen die dann in Software abgebildet werden Colton Laptop hier die hatte iTunes und dass Song bereits in der Warteschlange auf. Anstatt mich Demonstrieren dies, Colton ist im Labor gewesen klar die ganze Woche immer eine Demonstration bereit für einen tapferen Freiwilligen. Wenn jemand möchte kommen auf up-- sah erste Hand. Komm auf. [00:01:09] In Ordnung. Und was ist Ihr Name? 

[00:01:13] PUBLIKUM: Äh, Maria. 

[00:01:14] DAVID J. MALAN: Maria, schön dich zu sehen. Komm hier. Lassen Sie mich Ihnen Colton einzuführen. Colton ist diese Maria. 

[00:01:21] COLTON: Hallo, schön dich zu treffen. 

[00:01:23] DAVID J. MALAN: Alle rechts, so Schritt eins, wir sind gehen zu müssen, Sie setzen dies an Ihrem Unterarm so dass es ziemlich dicht bis in der Nähe Ihres Ellenbogens. Und in der Zwischenzeit lassen Sie uns haben auf unseren Google Glass und wir werden Technologien heute mischen. 

[00:01:33] COLTON: Erstens werden wir zu haben, Haken Sie diese in die Dinge. 

[00:01:36] DAVID J. MALAN: OK. Eigentlich lassen wir Ihren Arm als Nähe dieses Kabel wie möglich so dass wir zuerst zu synchronisieren es. 

[00:01:41] COLTON: Lassen Sie uns dies tun. 

[00:01:42] DAVID J. MALAN: Und inzwischen, so dass jeder einen genaueren Blick zu bekommen, wir Andrews Kamera werfen auf dem Bildschirm gibt. Also haben wir ein USB-Kabel, das ist sie in Maria Binde gesteckt. Und lassen Sie mich Bildschirm Coltons werfen oben auf dem Projektor nächsten. 

[00:02:00] So Colton ist das Registrieren des Geräts jetzt als ein Myo verbunden an dieses Kabel. Und nun, was Marias werde momentan tun ist eigentlich durch Fuß Die Kalibrierungsschritte und lehren die Software wie ihre Muskeln reagieren als sie machen bestimmte vordefinierte Gesten, die die Software versteht. Wenn Sie möchten, zu gehen vor dem Bildschirm. OK, immer wieder versuchen. 

[00:02:30] COLTON: Gehen Sie wie folgt. Und so. Und den ganzen Weg nach rechts. Geh zurück. 

[00:02:35] DAVID J. MALAN: OK. Anderen Perspektive. Es ist nicht wahr. Es ist uns. 

[00:02:40] MARIA: OK. DAVID J. MALAN: No. Gehen wir es höher, so ist es näher an den Ellbogen, oder sogar fester. In Ordnung. 

[00:02:52] Auf geht's. Dies wäre ein guter Zeitpunkt für CS52X sein. Dort gehen wir. 

[00:02:57] Sehr schön. Ok. Thumb Pinky. 

[00:03:02] Sehr schön. Spreizen Sie die Finger. Gut. Welle rechts. Es ist merkwürdig, welche Sie mit der linken hand-- 

[00:03:17] COLTON: Ja, das ist seltsam. DAVID J. MALAN: Welle zu der rechte und sich zu bewegen. Schneller Vorlauf zu überspringen oder nächsten. Das ist OK Wave-Recht. 

[00:03:25] MARIA: Ich don't-- warten. 

[00:03:26] DAVID J. MALAN: Brauchen Sie Hilfe? 

[00:03:28] COLTON: Sie sind also so gehen. MARIA: Es dreht das andere Sache, wenn. COLTON: Es ist. DAVID J. MALAN: Ja, ich weiß nicht, warum es zeigt Ihnen einen leftie. COLTON: Warum gehst du nicht try-- nur versuchen werde wie diese. 

[00:03:38] DAVID J. MALAN: Nein? Vielleicht erreichen Sie den Arm ein wenig gerader und machen es abrupt wie diese. Ja, OK, komm schon. 

[00:03:48] MARIA: Ich bin traurig. DAVID J. MALAN: Es ist nicht deine Schuld. COLTON: Es ist gut. DAVID J. MALAN: All Right. Well-- 

[00:03:56] MARIA: Sollten wir überspringen diese dann? DAVID J. MALAN: Ja, lassen Sie uns können Sie aus dem Schneider. Also, wenn jemand möchte eine do Abschlussprojekt mit diesen Schneidkante Hardware, erkennen es könnte nur nehmen Sie ein wenig gewöhnungsbedürftig. Und this-- die Realität ist dies ist eigentlich sehr bleeding edge. 

[00:04:10] Dies ist, was heißt der Entwickler-Kit, das soll im Wesentlichen ein Pre-Release sein so dass die Menschen genau das tun, this-- mit ihm zu kämpfen, Figur herauszufinden, wie die Körper der Menschen zu arbeiten mit der Technologie. Also, wenn Sie wollen, danach nach Vortrag wir können Sie kommen zu lassen und Nehmen wir ein anderes Stich an sie. Aber sonst, ein Applaus, wenn wir konnten, für Maria für ihr Kommen etwas. 

[00:04:26] MARIA: Danke. 

[00:04:28] DAVID J. MALAN: Danke. Wir hängen an diesem, aber wir geben Sie-- wie wärs mit einem Stress-Ball hier? Oh, und-- if-- Ja, danke. In Ordnung. Also für die Neugierigen, wenn Sie waren nicht mit dem Klang Wahl dass wir es gemacht zuvor, eine erstaunliche TV zeigen, dass Sie sollten unbedingt sein Binge-Watching auf Netflix ist diese hier. 

[00:04:51] Sprecher 1: Meine Damen und Herren, ein Zauberer namens Josh. 

[00:05:04] DAVID J. MALAN: Und anscheinend ist es eine Sache für mich während der Vorlesungs Text jetzt. Ich werde gesagt, dass Maria hatte Geburtstag gestern. Also alles Gute zum Geburtstag von CS50 an Maria als gut. 

[00:05:18] So können Sie sich in den letzten Monaten gelesen haben dass diese Herren hier, Steve Ballmer, der eigentlich war Klasse von 1977 an der Hochschule, kürzlich für Microsoft zurückgezogen. Er war ein Student hier, dann ein paar Jahre später fand sich bei Stanford Business School als er einen Telefon Anruf von einem Freund von ihm, hatte den Flur lebte von ihm hier in Harvard. Name, der Freund war Bill Gates, und zu der Zeit, er versuchte, Steve rekrutieren zu sein der erste Unternehmer, wirklich, bei einer kleinen Unternehmensnamen Microsoft. 

[00:05:45] Eine lange Geschichte kurz, Steve wurde schließlich gewonnen, trat Microsoft, wenn sie hatte gerade 30 Mitarbeiter. Und von der Zeit er vor kurzem im Ruhestand, hatte das Unternehmen 100.000 Mitarbeiter in den vergangenen Jahren. Und so eine Webseite bekannt als The Verge hergestellt diesen Tribut auf Video dass wir dachten, wir würden geteilt, die Ihnen ein Gefühl dafür, wie viel Energie Steve bringt jede Präsentation gibt er. [VIDEO PLAYBACK] -Microsoft Ist wie ein viertes Kind. Kinder tun das Haus verlassen. In diesem Fall, denke ich, Ich verlasse das Haus. Hey Bill, whazzap? 

[00:06:23] -Wazzap? 

[00:06:24] -Hey, Wazzap? Wir haben gegeben worden ein enorme Chance. Und Bill gab uns die Möglichkeit dazu. Ich möchte Bill dafür danken. Ich möchte Sie auch. Das Innovationstempo ist nicht zu bremsen. 

[00:06:42] Es wird schneller und schneller. Es könnte ein paar Konkurrenten die leider beseitigt werden! 

[00:06:54] Ich liebe diese Firma. Ja! Ich bin ein PC, und ich liebe diese Firma! 

[00:07:08] Entwickler, Entwickler, Entwickler, Entwickler, Entwickler, Entwickler, Entwickler, Entwickler. Ja! Web-Entwickler! 

[00:07:19] Web-Entwickler! Web-Entwickler! Hören Sie, was Sie sonst noch bekommen ohne Aufpreis! 

[00:07:28] Die MS-DOS-Exekutive, ein Termin Kalander, ein Kartenstapel, ein Notizblock, eine Uhr, ein Bedienfeld. Und Sie können es glauben? Reversie! 

[00:07:35] Brennen sie auf CD! Kannst du sie in MSN! Sie sie E-Mail an Freunde! 

[00:07:40] Alles mit einem Klick! One Microsoft, eine Strategie, ein team-- konzentriert, diszipliniert, professionell, und Experte für alles, was wir tun. Lassen Sie mich eine Linie von einem alten Film. 

[00:07:52] Beziehungen sind wie Haie. Sie vorwärts zu bewegen oder sie sterben. Ich glaube tatsächlich, Tech Unternehmen sind gleich. 

[00:08:01] [END VIDEO PLAYBACK] DAVID J. MALAN: Also so froh, wir sind bekannt, dass Steve beitreten werden uns hier in CS50 nächsten Mittwoch um der übliche Ort und Zeit hier. Raum wird wahrscheinlich begrenzt sein. Und so uns persönlich kommen, wenden Sie sich bitte an Kopf heute oder kurz danach um cs50.harvard.edu/register. 

[00:08:22] Und wir werden um bis zu folgen Dienstag bestätigt Flecken. Freuen Sie sich auf das nächste Mittwoch während Vortrag in CS50. Jetzt, in other news, war ich zufällig stoßen diese in The Crimson gerade den anderen Tag. 

[00:08:34] Es stellt sich heraus, dass einer der Mitarbeiter des CS50 und mindestens eines von CS50 Studenten ist derzeit für UC läuft Präsident und Vizepräsident, was mich zurückgebracht zu meiner eigenen Tagen zurück wenn ich verlor den UC Wahl kläglich. Aber der Silberstreif am Horizont dadurch ist ich immer Erzählen Sie die Geschichte ist, dass einer der ich bin sicher, viele Gründe, warum ich verlor die Wahl war ein völliger Mangel ein Talent für den öffentlichen Raum. Und so ganz ehrlich, es mir fuhr, dass die Erfahrung Ich glaube, mein Junior-Jahr, um tatsächlich zu unterzeichnen für Harvard Computer Society, die ist die Gruppe auf dem Campus, dass hält verschiedene Fachgespräche und andere Dinge. Und ich übernahm den Unterricht Seminare und daher hatten die Möglichkeit, ein wunderbare Gelegenheit, zu Beginn der Arbeit an genau diesen. Aber auch, hatte ich Gelegenheit, während dieser Erfahrung mich umso mehr HTML beibringen. Und so habe ich letzte Nacht aufgeschoben durch Blick durch das HTML-basierte Website Ich machte in wie 1997 '98, für meine Kampagne, die wie diese hier aussieht. Ich weiß. 

[00:09:29] Because-- und natürlich Ankündigung Diese erstaunliche Design-Entscheidung im Jahr 1998 oder Dingsbums. Das erste, was Sie möchten, dass Benutzer um beim Besuch Ihrer Website zu tun ist zu haben, um einen anderen Link klicken Sie einfach auf Ihre Website mit dem Mönch hier eingeben hinter wie ein Vorhang verhüllt, wo anscheinend war meine Kampagne Plattform. Und das ist alles, was Sie bekommen heute ist nur ein Screenshot. Aber ich war durch, wie das Lesen, meine Wahlplakate der letzten Nacht und meine Plattform. 

[00:09:50] Und ich war so wütend auf die Zeit. Meine Plattform was-- es war interessant. Also habe ich nach unten, da dann beruhigt. Aber eines Tages werde ich wieder laufen und hoffentlich besser dieser Zeit. 

[00:10:03] Also HTML, die Sprache, in der ich gemacht dass in-- Sie bald viel mehr schreiben-- ist etwas, was wir schon seit reden über spät und weitgehend Mitnahmen für jetzt gewährt dass wir auf anderen Sprachen bewegt. Aber lassen Sie uns Pause für einen Moment und setzen einige dieser Dinge im Kontext. Also in einem Satz, was ist HTML? 

[00:10:18] Oder was verwendet? Anyone? Ja. 

[00:10:20] PUBLIKUM: Markup für Websites. DAVID J. MALAN: Markup für die Website. So ist es eine Markup-Sprache ist das können Sie eine Web-Seite zu strukturieren. Header geht nach oben hier, Titel Hier steht, geht Körper hier. Das ist fett, das ist italics-- diese Art von Detail. 

[00:10:33] OK, gut. Also CSS lässt Sie-- und ich nahm einige Freiheiten gibt mit dem kühnen Leiste und kursiv, weil Das ist besser mit diesem umgesetzt. CSS ist-- was? Sprich in einem Satz. Wer überhaupt nicht. Ja. 

[00:10:46] PUBLIKUM: Verzierungen und Sachen, wie, wie, sie zu gestalten. DAVID J. MALAN: OK, gut. Verzierungen, die Sie erlauben sie zu gestalten oder zu stilisieren es mit Dingen wie fett und kursiv und Farben und auch feinere körniger Positionierung von Elementen. Es Art können Sie die Dinge, die zu nehmen letzte Meile so dass, wenn, zum Beispiel, in Pset7, könnten Sie auf bemerkt haben Ihre Portfolio-Seite, wenn Sie an dieser Stelle sind bereits, dass eine Standard-Tabelle, die Sie machen, um Aktienbesitz des Benutzers zeigen und Cash sieht wahrscheinlich ziemlich scheußlichen standardmäßig ohne Leerzeichen. Alles ist irgendwie vollgestopft miteinander in Zeilen und Spalten. 

[00:11:18] Nun, mit ein bisschen CSS, wie Sie vielleicht zu realisieren, man kann tatsächlich zwicken, und machen es etwas viel vertrauter und viel hübscher anzuschauen. Also CSS ist etwa die Stilisierung von Websites. Aber dann noch einen weiteren haben wir Sprache, PHP, die uns tun, was können? 

[00:11:36] Lassen Sie uns einfach, was? Jeder. Got to jenseits wagen die ersten paar Zeilen. Ja. 

[00:11:40] PUBLIKUM: Generieren dynamischer Inhalte. DAVID J. MALAN: Perfect. Generieren dynamischer Inhalte. Und Sie können dies in tun jede Anzahl von Sprachen. Wir passieren PHP zu verwenden, da es teil so ähnlich C-Syntax. 

[00:11:50] Aber PHP tut genau das. Es lässt Sie generieren dynamisch ausgegeben. Und einige von diesen Ausgang könnte HTML, wie wir in der Regel getan. Und es ist auch, weil es eine Programmiersprache ist der Mechanismus, über den können wir auf Datenbanken zu sprechen. 

[00:12:03] Und wir können Abfragen zu machen andere Server wie Yahoos und programmatisch nichts tun wirklich, dass man sich sonst will einen Computer dazu zu zwingen, zu tun. Also PHP lässt uns starten dynamisch Ausgeben Gehalt. Also von dieser Logik, hatte ich nicht eine dynamische Website im Jahr 1998. 

[00:12:16] Es war nur eine statische Webseite. Meine Inhalte mussten geändert werden, indem manuell mit gedit oder einem Äquivalent. Aber PHP ist, was wir früher oder könnte verwendet werden, haben vielmehr für so etwas wie die Frosh IMs Website, die sollte Registrierungen zu nehmen und Verwalten einer Liste users-- Dinge, tatsächlich Umschalten Zeit, obwohl wir passieren Perl, einen anderen verwenden Sprache zu der Zeit. 

[00:12:35] Und dann schließlich führten wir SQL-- Structured Query Language. Also noch eine weitere Sprache das ist für das, was genutzt? Für das, was genutzt? Können wir slight-- wagen OK, wir werden nicht viel weiter zu bekommen als das Orchester hier. PUBLIKUM: Es ist ein Protokoll verwendet werden, um auf Datenbanken zu sprechen. DAVID J. MALAN: Ein Protokoll verwendet werden, um auf Datenbanken zu sprechen. Lassen Sie mich zu zwicken. Es ist eine natürliche Sprache verwendet auf databases-- wählt sprechen und Einfügungen und Löschungen Updates und tatsächlich auch weitere Features, wir haben nicht einmal tauchte in, sondern möchten Sie vielleicht explore-- haben für, sagen wir zu erkunden, eine endgültige Projekt. So gibt es diese verschiedenen Stücke. 

[00:13:09] Und hoffentlich Pset7, obwohl seine Spezifikation ist ziemlich lang, es ist absichtlich lange man zu Fuß durch, wie diese Dinge alle zusammen eingegeben werden. Jetzt, am Montag, wir unsere letzte Sprache eingeführt dass wir offiziell einführen die course--, dh JavaScript. Diese, wie PHP, ist ein interpretierte Sprache. 

[00:13:25] Aber ein wesentlicher Unterschied Ich am Montag vorgeschlagen ist, dass, während PHP ausgeführt wird oder wobei auf dem Server interpretiert die in diesem Fall ist das Gerät CS50, oder vielleicht einige kommerzielle Bahn sein Server auf dem Internet, JavaScript allgemein ist eine Sprache, die Client-Seite läuft keine Server side-- so im Browser. Welches ist zu sagen, genau wie wenn ich geöffnet up Facebook-Quellcode und fand alle dieser JS-Dateien, war die Implikation dass, wenn Sie Facebook oder besuchen Sie die meisten Websites in diesen Tagen, erhalten Sie nicht nur HTML-, nicht nur CSS, aber eine ganze Reihe von JavaScript Code oft in Form von JS-Dateien. Und dann ist es die browser-- Ihren eigenen Mac oder PC--, die diesen Code ausführt. 

[00:14:03] Aber Ihr Browser führt sie aus. Sie können in eine Art Sandbox denken. So, dass JavaScript-Code sollte nicht sein in der Lage, Dateien auf Ihrem Computer zu löschen. Es sollte nicht in der Lage zu sein, E-Mails versenden in Ihrem Namen. Ihr Browser Art schränkt was man damit tun kann. 

[00:14:17] Also in diesem Sinne, es ist ein wenig weniger mächtig, vielleicht, als C. Aber JavaScript kann, wie ein Abgesehen von dem Server verwendet werden, wenn wir dazu neigen, nicht zu sprechen darüber in diesem Zusammenhang. So, jetzt lass uns binden diese zusammen. Eine Woche plus vor, präsentierten wir einige HTML auf der left-- Super langweilig Webseite. 

[00:14:34] Nur sagt hallo Welt. Und dann auf die vorgeschlagene I Recht können wir Art stehlen Ideen aus unserer Diskussion Datenstrukturen in C und darüber, wie diese hierarchischen denken Auszeichnungssprache auf der linken könnte gezogen oder im Speicher durchgeführt werden als Ist-Baumstruktur mit Knoten und Zeiger und diese Art von Details. Auf der rechten Seite, wir nennen dass eine DOM-- Document Object Model-- welches nur eine andere Art zu sagen Baum. 

[00:14:56] Nun, warum ist dies sinnvoll, denken Sie an es auf diese Weise? Denn jetzt mit JavaScript, denn wir haben Code, der in diesem Spiel bekommt Umwelt, der eigentliche HTML-Code, ist an den Browser gesendet worden bereits und hat bereits wurde durch die in den Speicher geladen Browser in einen Baum in Ihrem Computer RAM wie diese, können wir JavaScript verwenden um tatsächlich zu durchqueren oder zu Fuß oder Such oder ändern, dass DOM-Baum jedoch wir wollen. Also in der Tat, wenn Sie denken, über facebook.com, wenn Sie die Chat-Funktion nutzen, wenn Sie Verwendung von Google Mail und die GChat Funktion nichts, wo man Nachrichten immer wieder kommen und wieder sind diese Nachrichten wahrscheinlich, wie, LI-Tag, List Item-Tags, vielleicht. 

[00:15:35] Oder vielleicht haben sie gerade sind divs, die erscheinen, halten jedes Mal, wenn Sie eine Sofortnachricht. Und so das bedeutet nur, was Facebook oder Google tut ist zu jeder Zeit erhalten Sie einen Nachricht vom Server, sind sie wahrscheinlich mit Hilfe von JavaScript fügen Sie einfach einen weiteren Knoten dies tree-- anderen Knoten diese Baum, der dann visuell sieht einfach wie eine neue Textzeile auf dem Bildschirm. Aber sie Einsetzen in dieser Datenstruktur. 

[00:15:57] So in Klassen wie Cs124 und andere, werden Sie tatsächlich mehr Code gegen schreiben Datenstrukturen wie diese. Aber jetzt in JavaScript wir einfach davon ausgehen, werde wir all diese Funktionen erhalten kostenlos von der Sprache selbst. Also schauen wir uns ein Beispiel an. 

[00:16:09] Lassen Sie mich öffnen, eine Datei form.html genannt. Es ist super einfach. Es sieht nur so aus. 

[00:16:15] Kein CSS, kein Gedanke an Ästhetik. Es ist rein funktional und anscheinend bin ich Bitte um eine E-Mail, ein Passwort, Kennwort erneut ein und dann wird eine Überprüfung auf einige Bedingungen einverstanden. Was der Quellcode für diese aussieht, ist wahrscheinlich etwas Sie könnten mit einer erraten wenig Gedanken jetzt. Ich habe ein Formular-Tag hier. 

[00:16:32] Eine Aktion wird offenbar werde gehen Sie zu einem Datei register.php genannt. Das Verfahren werde ich verwenden ist zu bekommen. Und dann habe ich ein Liedtext Feld, dessen Name ist E-Mail. 

[00:16:40] Ich habe ein Passwortfeld bekam dessen Name Passwort. Ich habe eine andere bekam Passwortfeld, dessen Name ist etwas willkürlich Bestätigung. Es ist nur ein weiterer HTTP-Parameter. 

[00:16:49] Und dann haben wir uns diese nicht benutzt habe, außer da die Frosh IMs Demo in class-- ein Kontrollkästchen, das ist Einfach lostippen gleich überprüfen. Und ich werde diese Vereinbarung nennen. Also habe ich Art von willkürlich, sondern diese Felder bequem benannt. So dass jetzt, wenn diese Form erhält eingereicht, mal sehen, was passiert. Wenn ich das tue malan@harvard.edu, Ich werde ein Passwort von Crimson zu tun. Ich werde ein Passwort nichts zu tun. Lassen Sie uns nicht zusammenarbeiten. 

[00:17:10] Und ich werde nicht das Kontrollkästchen. Lassen Sie mich auf Registrieren. Und er sagt, hm, Du angemeldet bist. Nicht wirklich. 

[00:17:16] Aber die URL geändert. So wurde diese Form eindeutig erlaubt auf register.php einreichen. Aber vermutlich sollte ich sein fangen einige dieser Fehler. Jetzt, in Pset7 und einige unserer Vortrags Beispielen wir in der Regel zu drucken würde eine große rote Fehlermeldung hier sagen, fehlende Namen, oder fehlende Passwort. Wir haben das getan, bevor und wir haben done Serverseite Fehlererkennung. 

[00:17:37] Aber viele Websites in diesen Tagen tun Client-Seite Fehlererkennung wobei die URL ändert sich nicht. Die ganze Seite wird nicht aktualisiert. Sie erhalten eine sofortige Rückmeldung vom Browser. Vielleicht etwas rot. 

[00:17:48] Vielleicht erhalten Sie ein Pop-up. Aber Sie verschwenden keine Zeit Senden an der Server Daten, die unvollständig ist. Also mal sehen, wie wir erreichen diese Funktion auch. 

[00:17:56] Lassen Sie mich gehen, um form1.html, was gleich aussieht. Aber wenn ich dieses Mal tun malan@harvard.edu und ich geben hochrot und ich weiß nicht weiter zusammenarbeiten sondern klicken Sie auf Registrieren, bemerken jetzt. Es ist nicht die sexiest Lösung. Ich habe zumindest fing diesen Fehler. Und ich habe den Alarm verwendet Funktion in JavaScript-- denen wir nur mit in der Klasse. In der Regel sollten Sie nicht verwenden denn es kann sehr schnell raus Kontrolle. Aber Passwörter stimmen nicht überein ist der Fehler. 

[00:18:19] Lassen Sie mich gehen Sie vor und klicken Sie auf OK. Aber was der Schlüssel zum Mitnehmen hier ist, dass die URL nicht ändern. Also ich habe nicht die Mühe verschwenden Zeit des Servers fragen sie eine Frage, die ich haben könnte herausgefunden, die Antwort auf mich selbst. 

[00:18:30] Und der Benutzer, obwohl wurde darüber reden länger als der Benutzer gehen, um darüber nachzudenken, wird sich ein sofortiges Feedback haben. Es gibt keine Wartezeit mit die Netzwerkkonnektivität. Also schauen wir uns an diesem Quellcode. 

[00:18:40] Form1.html Looks strukturell ähnlichen hier oben. Die Form ist in der Tat die gleiche. Aber mal sehen, was ich hier tat nach unten. Und es gibt verschiedene Möglichkeiten, dies zu tun. Und ich habe das Beste gerade getan follower aber nicht eleganteste Weg noch. Ich habe ein Skript-Tag. Ich habe dann rufen document.getElementById ("Registrierung"). Und ich speichern diesen Wert in der Form, eine Variable. 

[00:19:04] Also, was habe ich getan? Sie können sich vorstellen document.getElementById als eine Sonderfunktion, JavaScript gibt Ihnen dass buchstäblich Hände Sie einen Zeiger auf einen der Knoten oder Rechtecke in diesem Baum. Also jetzt, dass ist es, was unser Formular variable in JavaScript ist eigentlich deutete auf. 

[00:19:21] So, jetzt die Syntax ist anders C. Aber wir tun hier ein paar Dinge. Einer, ein wenig seltsam ist dies eine suchen, sicherlich im Vergleich zu C Aber schauen Sie in Zeile 35. So auf der linken form.onsubmit. Daran erinnern, dass Onsubmit ist wie ein Feld in einer Struktur. Wenn Sie von der Form variable denken ist einfach nur eine C-Struktur, es könnte einige Felder. 

[00:19:42] Zurück in den Tag, wir hatten Studenten Namen, IDs, Häuser, jene Art von Feldern. Man denke nur an Onsubmit als ein anderes Feld. Aber es ist ein Spezialgebiet, weil die Browser ist so vorprogrammiert, erwarten .onsubmit nicht ein Wert sein wie eine Zahl oder ein String, aber tatsächlich eine Funktion sein oder die Adresse einer Funktion, in den Speicher des Computers. 

[00:20:02] Und in der Tat, das ist was Dieser Begriff hier tut. Dieser sagt, gib mir eine neue Funktion. Aber was ist sein Name sein wird, offensichtlich? 

[00:20:09] Denken wir zurück an Montag. Was ist der Name dieser Funktion auf der Basis dieser Syntax? Nein, ich meine, es gibt deutlich kein Name associated-- sicherlich nicht, was ich hier hervorgehoben. 

[00:20:21] Aber das ist eigentlich OK. Dies ist eine anonyme Funktion oder eine Lambda-Funktion wie manche es nennen. Und das bedeutet nur, es ist immer noch eine Funktion. Es ist nur so, kann man nicht nennen kann sie mit Namen. Aber das ist OK. Denn einmal hat der Browser bereits von Unternehmen wie Google vorprogrammiert oder Microsoft oder Mozilla oder andere zu weiß nur, dass, wenn der .onsubmit Feld innerhalb eines Formularelements hat der Wert, behandeln es als ein function-- Ein Funktionszeiger, wenn man so will. Und nennen Sie es, wenn das Formular abgeschickt wird. 

[00:20:46] Also, welche Code ausgeführt werden soll wenn das Formular abgeschickt wird? Offenbar alles Innenseite der geschweiften Klammer. Und das ist nur stilistische. 

[00:20:53] Sie könnten dies tun, wie Wir neigen dazu, in CS50 tun. Aber in JavaScript, die meisten Menschen neigen dazu, es auf der gleichen Linie zu halten gerade weil es deutlicher ist mit diesem Stichwort-Funktion verbunden. So jetzt, was mache ich? 

[00:21:03] Wenn form.email.value gleich equals die leere Zeichenkette oder nichts, hier ist eine Warnung, wo ich sagen werde, Sie müssen Ihre E-Mail-Adresse, und dann wieder falsch. Und es ist, dass die Rückkehr falsch, dass verhindert, dass das Formular von ihrer Einreichung. Inzwischen, wenn die Passwortwert ist blank, ich werde an der Benutzer yell und sagen, müssen Sie ein Kennwort angeben. 

[00:21:21] Inzwischen Sachen erhalten ein wenig schicker hier. Wenn form.password.value nicht gleich form.confirmation.value, Das andere Feld, schreien der Benutzer, dass die Passwörter nicht, wie sie passen nicht vor einem Augenblick. Und dann das hier ist ein wenig sexier, weil ich weiß, dass ich wusste, dass konzeptionell überprüft ist der Name eines Checkbox. 

[00:21:40] So kann ich nur ein Ausrufezeichen verwenden Punkt zu sagen, wenn die Prüfung nicht checked-- es ist die Boolesche Wert, wahr oder false-- Ich werde an der Benutzer aus diesem Grund schreien. Ansonsten, wenn wir durchkommen alle diese Bedingungen, lasst uns einfach true zurückgeben. Lassen Sie das Formular eingereicht werden. Und das wird dann passieren. 

[00:21:56] Lassen Sie uns geben hochrot. Lassen überprüfen Sie die Box, klicken Sie auf Registrieren. Und jetzt habe ich bis zum Ziel zu gehen. Nun, es gibt da keine Datenbank. Es gibt nichts interessantes in register.php. Ich habe gerade etwas brauchten um tatsächlich zu reden. Also lassen Sie mich unterbrechen, hier. Haben Sie Fragen, was wir gerade getan haben oder, was einige dieser neuen Syntax ist? OK, yeah? 

[00:22:17] PUBLIKUM: Also jede Checkbox ist automatisch ein Boolean. Sie müssen nicht, es so zu erklären. 

[00:22:21] DAVID J. MALAN: Richtig. Alle Kontrollkästchen, die an Sie versandt hat ein HTML-Formular, um Ihren JavaScript-Code behandelt werden, ja, wie ein Boolean value-- wahr oder falsch. Es ist eine gute Frage. Wohingegen die anderen Werte, der Natürlich haben Text, AKA Saiten gewesen. 

[00:22:36] Alles klar, also lassen Sie mich zurückspulen ein bisschen weiter. Was war der springende Punkt bei dieser? Nur um klar zu sein. Wie wir bereits wissen, auch aus Pset7 und sogar aus der vergangenen Woche Vorlesung Beispiele, dass wir offensichtlich überprüfen $ _GET $ _POST, Ob der Benutzer geben uns ein leerer Wert. Denken Sie an die leere Funktion in PHP. 

[00:22:54] Also nur klar zu sein, was ist ein Grund, warum wir vielleicht auch wollen diese Fehlerüberprüfung zu tun Innere des Browsers? Was ist die Motivation hier? Ja. 

[00:23:06] PUBLIKUM: Schneller, und du nicht senden nutzlose Daten auf den Server. DAVID J. MALAN: Gut. Es ist schneller. Sie senden nicht nutzlos Daten an den Server. 

[00:23:12] So können Sie wieder eine sofortige Reaktion. Und insgesamt der Benutzer Erfahrung ist besser. Denken Sie über die Alternative. 

[00:23:17] Wenn für Gmail-- und war Vor vielen Jahren der Fall war. Angenommen, Sie haben eine neue E-Ihrem Google Mail bekam Konto, aber der einzige Weg, durch zu sehen, dass ist es, wie, laden Sie die ganze Seite. Oder nehmen Sie anklicken Ein Link zu einer E-Mail zu lesen. 

[00:23:29] Alles muss so neu zu laden dass Sie die E-Mail zu sehen. Oder Facebook-- erhalten Sie eine Chat-Nachricht. Sie sehen es nicht, bis Sie neu zu laden die Seite oder klicken Sie einige Link. 

[00:23:36] Wie, das wäre furchtbar sein ein lästige Benutzererfahrung. Und dies ist, wie es war, klar, als ich lief für UC und die Bahn war viel weniger dynamischen und JavaScript war nicht so populär wie es jetzt ist. Und es wird immer viel dynamischer und viel mehr Client-Seite in diesem Sinne. 

[00:23:49] Aber es gibt einen Haken hier, und Dies ist eine Art eine lästige Gotcha. Nur weil Sie Client-Seite hinzufügen Erkennung wie dies bedeutet nicht, Sie oder sollten verzichten können Server-Seite-Erkennung. Sie wollen im Wesentlichen auf Ihre setzen Fehlerprüfung in beiden Orten. Denn was war einer der Lektion gelernt aus dem Artikel, den ich las einige Auszüge aus mit diesem dummen CMS system-- Content Management System-- das war Umsetzung seiner Authentifizierungssystem, ihre Anmeldung über welchen Mechanismus? JavaScript. 

[00:24:20] PUBLIKUM: JavaScript. DAVID J. MALAN: JavaScript genau, richtig? Es wurde mit Hilfe von JavaScript. Und wörtlich, haben Sie Jungs spielte wohl ein wenig mit Chrome Inspector. Und wenn ich es finden kann, inspizieren Element. 

[00:24:30] Lassen Sie mich gehen über zu tun alle Chrome-Optionen. Und dies ist, wie einfach es ist, deaktivieren JavaScript im Browser. Überprüfen Sie, nicht mehr JavaScript. 

[00:24:38] So in Fairness, eine Menge der Bahn in diesen Tagen ist gerade dabei, da brechen Gmail und andere sites-- Facebook-- davon aus, dass JavaScript ist aktiviert. Aber wenn Sie etwas Dummes tun wie nur die Validierung Nutzer Eingangs und Überprüfung es für Fehler auf der Client-Seite, ein Gegner könnte leicht tun. Und dann noch klüger Gegner wie euch jetzt konnte Telnet oder Locken verwenden oder einfach nur Kommandozeilenbefehle und tatsächlich Nachrichten an den Server zu senden dass ähnlich werden nicht überprüft Fehler. 

[00:25:05] Das ist also eher ein Benutzeroberfläche Entscheidung als es eine tatsächliche technische improvement-- Umsetzung etwas Client-Seite wie diese. So, jetzt ein kurzer Blick, aber dann Ich werde in der Online-Spaziergang zu verschieben durch für diese ein. In Form zwei, wir eigentlich durchgemacht und den Code zu reinigen ein wenig. Aber lassen Sie mich zu einem aufschieben der Videos wir wahrscheinlich embed in Pset8, die nur zeigt Ihnen ein ähnliche Syntax mit einer Bibliothek namens jQuery, was ein super, super ist Volksbibliothek in JavaScript dass ehrlich gesagt die meisten Menschen benutzen Sie einfach diesen Tagen und sogar als verwirren Sein JavaScript selbst. 

[00:25:37] Und es neigt dazu beinhalten einige Dollar-Zeichen und Schlüsselwörter wie Dokument in Klammern hier. Aber noch einmal, lassen Sie mich zu verschieben einige langsamer Tutorials online anstatt in nur Syntax gebunden zu werden. Gehen wir weiter zu etwas ein wenig kühler im Hinblick auf die Anwendungen dafür. 

[00:25:50] Also insbesondere, lass mich gehen vor und eröffnen das hier. Komm schon. Dort gehen wir. 

[00:25:59] Lassen Sie mich hier eröffnen dieses Bild. Unnötig kompliziert suchen, aber es beschreibt eine Technik, die als AJAX-- Asynchronous JavaScript and XML, wo das X für XML ist eigentlich nicht mehr wirklich genutzt. Es neigt dazu, etwas zu verwenden sonst genannt JSON. 

[00:26:13] Aber hier ist, wie so etwas Google Maps oder Google Earth funktioniert. Lassen Sie uns versuchen, diese im laufenden Betrieb, eigentlich. Lassen Sie mich gehen Sie vor und öffnen Chrome auf meinem Browser. 

[00:26:21] Und lassen Sie mich in zu gehen, sagen, maps.google.com. Und tatsächlich, wenn du alt bist genug zu erinnern, was, wie war MapQuest wie zurück in den Tag, und vielleicht haben sie noch so arbeiten. Wenn Sie verwendet werden, um für something-- suchen 33 Oxford Street, Cambridge, Mass, lass es uns tun this-- Sie wäre eigentlich, wenn Sie wollte nach oben zu schwenken und unten, links und rechts, Sie möchten einen Blick großen Pfeil an der Spitze, und es würden Sie zeigen eine andere Rahmen der Karte hier oben. Oder würden Sie links Klick und Sie würde hier zu gehen, oder ein weiterer Klick und Sie würden hier zu gehen. Aber anstatt diese Tage, die wir natürlich nur für selbstverständlich, dass wir gehen können der Umgebung von Cambridge ziemlich schnell nur durch Klicken und Ziehen. Aber beachten Sie, es gibt einige Pannen. 

[00:26:59] Wenn ich dies tun schnell genug, was passiert zu sein scheint wie ich ziehen ein wenig zu schnell für den Computer zu halten? Was sehen Sie? Ja. 

[00:27:07] PUBLIKUM: Die Pixel nicht aktualisieren. DAVID J. MALAN: Der Pixel nicht aktualisieren. Es gibt actually-- und Sie könnte dies zu sehen, tatsächlich, wenn Sie online und Pause gerade anschauen dieser oder tatsächlich Dinge verlangsamt für once-- du wirst sehen, dass es Fliesen, Quadrate oder Rechtecke, werden aus der Karte fehlen, bis Bruchteil einer Sekunde später, mehr Daten, Mehr Bilder tatsächlich Auf dem Bildschirm erscheinen. Und in der Tat, wenn wir dies tun, indem Sie bis Chrome's-- sagen, Chrome-- lassen mal sehen. Wir können das nicht tun. 

[00:27:31] Oh, hoppla. Lassen Sie uns eröffnen maps.google.com. Lassen Sie mich das Fenster größer erneut. 

[00:27:36] Gehen Sie zurück auf 33 Oxford Street. Was war die Website war ich auf vor kurzem? Ich hatte dieses, wie, Privat rant zu mir, dass ich dann Instant Message würde Jeder Freund Wer war online , der es hören wollte. Es gibt einige Website. Ich denke, es ist so Comcast-- ein sehr großer amerikanischer ISP. Sie können, wenn Sie sich für neue Kabel Modemdienst oder Kabel-TV-Service, sie eine Form haben sehr preis wo sie Sie fragen Sie nach Ihrer Adresse. Und haben diese erstaunliche Feature namens Auto-Vervollständigen, Google, das beginnt zu füllen in der Antwort auf Ihre Frage. 

[00:28:04] Das Problem ist, sie Auto-Vervollständigen tun auf der ersten Dinge, die Sie eingeben. Also, wenn Sie mit der Eingabe in 33 starten, Sie werden buchstäblich zeigen jedes Haus in Amerika, die beginnt mit der Zahl 33 bevor Sie fortfahren, um erwarten, dass Sie mehr geben. Also, wenn Sie Oxford Typ 33, dann zeigt es Ihnen jede Straße in Amerika, 33 Oxford hat seinen Namen, unabhängig von der Stadt dass Sie in. 

[00:28:25] Und dann haben Sie die Eingabe fortsetzen. Und schließlich, erkennt es, daß sie es nicht tun bieten Service zu Ihnen nach Hause in Cambridge oder so ähnlich. Aber der Punkt ist, ist dies die asinine Umsetzung von Auto Ergänzen je. 

[00:28:34] Und ich werde einfach ausschalten auf dieser Tangente wieder. Aber es gibt gute Möglichkeiten, um verwenden JavaScript und schlechte Wege. Und das ist nicht unbedingt die beste. 

[00:28:40] Aber der Punkt ist hier, bevor diese Tirade war, hier zu eröffnen Tools unten und eröffnen Entwickler-Tools, Wie wir bereits aufgefordert, und mit dem Netzwerk zu sehen Registerkarte als ich auf wirklich schnell. Und bemerken eine ganze Reihe von GET-Anfragen passiert. All dies geschah, da ich gezogen. 

[00:28:57] Und wahrscheinlich, ja viele dieser Reihen Jetzt sind Bildstrich JPEG MIME-Typen oder Inhaltstypen. Das liegt daran, welchen Chrom tut jedesmal, wenn ich klicken und ziehen, klicken Sie auf und ziehen, ist es zu realisieren, oh, ich gehen müssen fragen Google für die Kachel Auf der Karte, die über hier ist, schnell herunterladen zu können via HTTP, und dann auf den so genannten DOM fügen Sie es zu den Web-Browser im Speicher Baum Darstellung so dass der Benutzer, mich sieht, dass aktualisierte Fliese. Und dies ist wegen der eine Technik namens AJAX. Zurück in den Tag, es ist wirklich war der Fall, wenn Sie ändern wollte, was auf dem Bildschirm, müssten Sie klicken oben, unten, links, rechts. Und dann eine neue Seite öffnen würde. Aber in diesen Tagen, alles ist dynamischer. Es geschieht in der Art, wie wir Menschen würden hoffe, es wäre eigentlich interaktiv. Und erreicht dies durch über eine Technik, die als AJAX, was vielleicht am besten ist durch ein Beispiel erläutert. Lassen Sie mich zunächst vorangehen und öffnen Sie eine Datei quote.php gerufen heutigen Verteilungscode. 

[00:29:53] Und dann lass mich tun symbol-- hoppla. Lassen Sie mich Symbol do = GOOG für nur einige Lager. Oder eigentlich, machen wir das ein von FREE der Pset. Enter. 

[00:30:05] Und jetzt merken, was ich zurückkomme. Das ist also ein wirklich kurze PHP-Datei, die ich schrieb, dass einfach leiht Code von Lookup-Funktion Pset7 der und spuckt mit diesen geschweiften Klammer und Zitate und Doppelpunkt-Notation, offenbar, Preis der aktuelle Bestand für die Unternehmen, die Sie via GET übergeben in. So ist das anders von den meisten von dem, was wir haben in dieser Bekanntmachung ich fertig bin buchstäblich spuckt was aussieht wie JavaScript-Code. 

[00:30:27] In der Tat ist dies ein JavaScript-Objekt. In der Tat, nur um mehr klar sein, JavaScript Object Notation-- JSON-- ist nur eine andere Art zu sagen, dass Sie können Daten in JavaScript viel vertreten wie möglich in PHP Verwendung von Schlüsselwertpaare. Also, wenn ich wollte, zu erklären, eine Variable in JavaScript um darstellt Zamyla, für instance-- eine Struktur für Zamyla-- und wir nennen es Student, diese Variable. Ihre ID ist einer, Das Haus ist Winthrop, und der Name ist Zamyla. 

[00:30:53] Aber ich kann auch ein Array von Objekten. Also, wenn ich eigentlich haben wollte ein Array in JavaScript enthalten mehrere solche Objekte, diese Zeit, die das Personal, Ich könnte diese drei haben Stücke von Code zurück nach hinten, um für diese zurück drei ehemalige Mitarbeiter. So ist die Syntax, hübsch ähnlich wie PHP both--. Aber dies ist besonders JavaScript. Es ist Object Notation. Was also ist das geeignet? 

[00:31:17] Wenn ich Code schreiben, ausspuckt JSON-- JavaScript Object Notation-- Sachen, sieht so aus oder Sachen, sieht aus wie Zamyla Der Aufbau, Ich kann tatsächlich nutzen diese in Programme, die ich zu schreiben. Lassen Sie mich gehen, um ajax0.html. Und dies too-- nicht viel gedacht, um Ästhetik gegeben. Aber schau, was passiert. 

[00:31:34] Lassen Sie mich gehen Sie vor und geben Sie hier kostenlos. Klicken Sie bekommen Zitat. Und beachten Sie die URL nicht geändert hat. Aber ich bekam ein Pop-up mit scheinbar heutigen Penny Aktienkurs von 0,15 $. Also gar nicht so schlecht. Aber der Unterschied ist, dass irgendwie, Diese Daten kam zurück, um mich direkt an. Aber lassen Sie uns einen Schritt in Richtung etwas besser vertraut. In der Version eines dieser, lassen Sie mich geben wieder frei, klicken Sie auf Get Quote und now-- oh, das war eigentlich die jQuery-Version. Also lassen Sie mich- ich nicht Schnellvorlauf ziemlich weit genug. Lassen Sie mich auf die Version zwei zu gehen, Das ist, wo ich wollte. Beachten Sie, was ich hier getan. Ich habe eine Web page-- ein super einfache Version einer beliebigen Webseite Sie heute mit einem Textfeld verwenden können Jetzt kostenlos anmelden und dann anscheinend gerade Text. 

[00:32:14] Dies ist nicht eine Form hier, anscheinend. Aber wenn ich auf zu bekommen zitat, bemerken meiner Web-Seite ist im Begriff, als ob ich ändern gerade eine neue Sofortnachricht bekam oder als ob ich gerade umgezogen die Karte und benötigt, um mehr Daten zu bekommen dynamisch an die Web-Seite hinzugefügt ohne die URL Wechsel und dem Nutzer Erfahrung immer unterbrochen. Tatsächlich, ich bin immer noch auf der exakt gleichen place-- ajax2.html. 

[00:32:35] Also schauen wir uns nur an diesem Beispiel und sehen, wie dies geschieht. Lassen Sie mich in ajax2.html gehen. Und bemerken zunächst das Formular aus. 

[00:32:44] Hier unten, ich bin aus Aus Auto komplett. Manchmal wird es ärgerlich, wenn der Browser versucht, Ihnen zu zeigen, Ihre ganze Geschichte. So können Sie es in HTML tun, indem nur sagen, Auto Complete ab. 

[00:32:53] Ich habe dieses Textfeld ein bestimmter symbol-- vielmehr ein ID des Symbols. Und nun, ist dies ein interessantes Feature. Wir haben noch nicht über Spanne gesprochen, aber man kann darüber nachdenken wie ein Absatz-Tag oder div-Tag. Es ist, was ein genannt Inline-Element, das bedeutet, dass Sie einen Absatz nicht bekommen brechen oben und unten. Es ist gerade dabei, in-line bleiben, ohne Schlagen der Äquivalent eingeben. Also habe ich dieses Stück HTML gegeben um eine eindeutige Kennung bestimmt werden dass ich willkürlich genannt Preis. Und ich habe einen Submit-Button. 

[00:33:21] Weil nun hier-- und dies ist tatsächlich Super erstaunlich, wie wenig Code Sie schreiben zu tun relativ ordentlich things-- bemerken, was ich hier oben, wenn ich getan Bildlauf nach oben zum Kopf dieser Seite. Ich habe zuerst in enthalten meinen Kopf ein Script-Tag dass tatsächlich referenziert ein JavaScript-Datei an anderer Stelle. Dies ist aus der Organisation dass schreibt jQuery, Und das ist nur die Ihnen die neuesten Version ihrer jQuery-Bibliothek. 

[00:33:42] Also das ist eine Art, wie scharf gehören in C oder erfordern in PHP. Sie verwenden das Skript-Tag mit einem Quellattribut. Aber jetzt meine eigenen Code ist sein wird direkt hier. 

[00:33:52] Hinweis Ich habe eine Funktion namens Quotes. Und es sieht ein wenig kryptisch auf den ersten Blick. Aber lassen Sie uns zu necken diese auseinander. Geben Sie mir eine Variable namens URL. Weisen Sie es wörtlich diese Zeichenfolge. Also, einfache Anführungszeichen, doppelte Anführungszeichen in JavaScript gibt mir nur einen String. Was bedeutet das Plus zu tun? Verkettung. 

[00:34:08] Also das ist jetzt die jQuery-Syntax das dauert ein wenig gewöhnungsbedürftig. Aber das bedeutet nur, holen Sie mir den DOM Knoten, dessen eindeutige Kennung ist Symbol. Der Hashtag es bedeutet eindeutige Kennung Symbol. 

[00:34:21] Das Dollarzeichen in die Klammern nur bedeuten, wickeln diese in jQuery eine Art Geheimrezept so Sie erhalten zusätzliche Funktionen. Und dann ist .val offenbar eine Funktion, oder wie wir heute sagen, eine Methode innerhalb dieses Knotens dass nur gibt Ihnen den Wert. Also kurz gesagt, hässlich und verwirrend da dies sieht auf den ersten Blick, Dies bedeutet nur, sich mit dem Benutzer eingegeben in, legte es am Ende des Strings durch Verkettung es. Das ist alles. 

[00:34:43] So, jetzt, letzten drei Zeilen. Sie können eine Menge von Squeeze Funktionalität von drei Zeilen. Diese Dollar-Zeichen, als ein beiseite lässt, ist nur ein Spitzname für einen speziellen globalen Variablen wörtlich genannt jQuery. 

[00:34:55] Dollarzeichen sieht einfach cool. Also die jQuery-Community nur irgendwie der es als ihre besondere Symbol. Es bedeutet nicht, was es bedeutet, in PHP. In JavaScript ist Dollarzeichen wie ein Buchstabe des Alphabets oder eine Zahl für eine Variable. 

[00:35:07] Sie können einfach nur er als Name. Sieht einfach cool. Also der Community es als Spitznamen angenommen für ihre eigene Bibliothek namens jQuery. 

[00:35:13] Und es ist super beliebt. So erhalten JSON ist genau das. Es ist eine Funktion, die die Leute bei jQuery geschrieben dass bekommt JSON von einer server-- JavaScript Object Notation. Aus welcher URL wird es um diese Informationen zu bekommen? Offenbar aus dieser URL hier. 

[00:35:27] Und was sollte der Browser als tun sobald es wieder bekommt diese Antwort? Und das ist die Magie von AJAX, so zu speak-- Asynchronous JavaScript in XML. Es ist schwer, mit einem solchen zu sehen einfaches Beispiel, wie wir hier hatten. 

[00:35:41] Aber dies war asynchron das Gefühl, dass mein Code, wenn ausgeführt, um die eine Nachricht geschickt Server zu holen mir etwas JSON. Und es geschah, super schnell dass ich eine Antwort. Aber was interessant ist, dass diese Codezeile nicht hängen meinem Computer. 

[00:35:55] Ich sah nicht ein sich drehendes Symbol. Ich habe nicht zu verlieren die Fähigkeit, meine Maus bewegen. Mein Browser war eigentlich völlig in Ordnung. 

[00:36:01] Weil der Weg JavaScript nimmt die Antwort von dem Server ist wie folgt. Sie registrieren, was Sie nennen würde eine Callback-Funktion, die bedeutet nur, hey, JavaScript. Sobald der Server antwortet mit JSON, rufen Sie bitte diese anonyme Funktion. 

[00:36:18] Und bitte in diese Funktion übergeben was auch immer String der Server ausspucken als Argument genannt Daten. Also mit anderen, Worten, wenn Ich bin dynamisch Montage eine URL quote.php vorbei in diese Symbol wie kostenlose oder GOOG oder Dingsbums, Ich bin dann erzählen JavaScript holen diese URL. Beachten Sie, dass der Browser wird etwas zurückgeben das sieht aus wie wir sahen earlier-- dies. 

[00:36:42] Und was das zweite Argument hier zu bekommen JSON sagt wird diese Funktion aufrufen wenn der Server wieder da ob 10 Millisekunden ab sofort oder 10 Sekunden ab jetzt. Und sobald Sie das tun, fügen Sie den Preis auf die Seite. Diese Syntax hier nur Mittel holen den Knoten aus dem Baum, dessen eindeutige Kennung ist Preis-- dieser Spanne wir bereits gesehen. 

[00:37:01] Diese Methode namens HTML sagt nur, gehen Sie zu ersetzen der HTML-Code, gibt es mit data.price. Was ist data.price? Nun, der Browser, erinnern, zeigte mir diese zurückkommen. Das ist also Daten. 

[00:37:14] Und so ist es ein wenig kryptisch um die Kommas hier sehen. Aber in der Tat, lassen Sie mich dies zu tun. Lassen Sie mich nur fügen Sie diesen ganz schnell in gedit und zeigen dies, wie wir zeigten, Struktur Zamyla früheren. 

[00:37:27] Was der Server zurückschicken ist ein kleine Objekt, das wie folgt aussieht. Und so data.price ist nur geben mir 0,1515. So viel bewegen Teile hier alle auf einmal. 

[00:37:39] Aber die Schlüssel zum Mitnehmen ist dass wir diese Fähigkeit zusätzliche HTTP machen Anfragen mit Hilfe von JavaScript ohne dass die Seite neu zu laden. Und dann können wir tatsächlich ändern Sie die Web-Seite auf der Fliege. Und es stellt sich heraus, dass JavaScript und andere Sprachen kann nun verwendet werden, nicht nur um Webseiten zu mutieren, aber tatsächlich Software zu schreiben in einer tatsächlichen Computer, nicht nur auf Chrome oder dergleichen beschränkt. 

[00:38:00] In der Tat, if-- Colton, würden Sie mag uns hier wieder verbinden mit Ihrem Labor-Code, und Chang als auch? Lassen Sie uns weitermachen, nachdem gesprochen anonyme Funktionen und Callbacks und wirklich Schicksal hier locken mit einer Live-Demo mit Blutungen Spitzentechnologie, einer der Diese Elite Bewegungsgeräten. Nun, dieses Gerät, Rückruf, ist ein kleines USB-Gerät sowie dass-- das ist beautiful-- dass die Stecker in den USB-Anschlüsse. 

[00:38:25] Und dann stellt sie Eingangs in Form von menschlichen Gesten durch Erfassen mit Infrarotstrahlen, wesentlichen Bewegungen von Ihrem Arm. Während also das, was Maria versuchte auf vorher war muskulös, tatsächlich das Gefühl, was sich ändert Ihren Arm, das ist Infrarot basiert. So ist es für Bewegungen innerhalb der Suche die Art von der Sphäre der Fuß oder so der Vorrichtung selbst. 

[00:38:46] Also, warum nicht ich nehme ein Stich an dieser ersten? Und lassen Sie uns fortfahren und werfen Sie auf dem Overhead hier. Also lassen wir Coltons Laptop hier oben. Wir haben Andrew auf dem TV bekam. Und was würden Sie, dass ich als erstes tun? 

[00:39:00] COLTON: voran und gehen Sie einfach legen Sie Ihre Hände auf diesem Kerl und du wirst einige fabelhafte glitter sehen. 

[00:39:04] DAVID J. MALAN: Very nice. Dies alles geschieht in Echtzeit. Ok. Alles klar, und yep. So schön. Na gut, was können wir tun? 

[00:39:15] COLTON: zum nächsten Bildschirm gehen und zu sehen. 

[00:39:17] DAVID J. MALAN: Alles klar. 

[00:39:19] COLTON: Ein lustiges kleines Spiel wo Sie zu Robotern zu machen. 

[00:39:21] DAVID J. MALAN: Alles klar, so dass diese ist fake Hände zeigen mir, was zu tun ist. COLTON: Ja Also los und greifen einen der Blöcke und legte sie oben auf, dass Roboterkörper. DAVID J. MALAN: Oh, da ist meine Hand. Oh. OK, entzückend. Warten Sie eine Minute, OK. Dort gehen wir. 

[00:39:41] COLTON: Ich ein Unfall gemacht. 

[00:39:43] DAVID J. MALAN: OK, ich werde diesen Kerl zu bekommen. Verdammt! Als wir üben diese letzte Nacht, wissen Sie, was das übertragen in? 

[00:39:51] So was. Ok. Nächste? 

[00:39:55] COLTON: Sicher. 

[00:39:56] DAVID J. MALAN: All right, und es gibt eine dritte. In Ordnung. COLTON: Und in diesem einen, erhalten Sie zu-- DAVID J. MALAN: Oh, dieses irgendjemandes schön. COLTON: --yeah, auseinander nehmen diese Blume. DAVID J. MALAN: OK. Nein? Verpasste. 

[00:40:14] COLTON: Oh, dort gehen Sie. 

[00:40:15] DAVID J. MALAN: Ah, Schau dir das an. Sehr schön. Nun, warum nicht 'wir nehmen heraus ein Freiwilliger hier die gerne auf bis zu kommen. Wie wäre es genau dort Im Grünen, ist es? 

[00:40:27] Na gut, und lassen Sie uns have-- anstatt das zu tun, dass einige von euch könnte dieses Spiel wissen hier-- schnitt das Seil, vielleicht? Mal sehen. Wir haben unsere Gläser auf hier? 

[00:40:37] Ok. Danke. Wie heißen Sie? 

[00:40:39] PUBLIKUM: Laura. 

[00:40:40] DAVID J. MALAN: Laura? Schön zu sehen. Wenn Sie nichts dagegen haben, setzen Google Glass über Ihre Brille. Dies ist Colton. 

[00:40:46] COLTON: Hallo. Freut mich, dich kennenzulernen. 

[00:40:48] DAVID J. MALAN: OK, komm herum. Alles klar, so was Sie zu gehen hier machen, nachdem diese spielte vor, wird über Ihre Hand die Leap Motion hier. Und jetzt Ihre Pfeil bewegen sollte. Oh, nein. 

[00:40:57] PUBLIKUM: No. 

[00:40:58] DAVID J. MALAN: Wir will noch nicht zu beenden. OK, warten. Hier drüben. So bemerken, wie Sie halten Ihre Finger über etwas, die Maus beginnt zu gehen Grün, Das ist, wie Sie klicken. 

[00:41:06] So schweben über abspielen. Und nur einem Finger ist in Ordnung. Und jetzt klicken Sie auf den kleinen grüne Kerl auf der linken Seite. Und nun halten, bis es füllt sich grün. Gut. Nun, wie, Stufe eins bis oben. 

[00:41:16] PUBLIKUM: Ja, wir wollen ein Niveau, hier. 

[00:41:20] DAVID J. MALAN: Gut. OK, also alles, was Sie haben zu tun ist, das Seil geschnitten. Der Cursor ist das weiße da unten. 

[00:41:28] Sehr schön. Alles klar, es geht um schwieriger zu bekommen. So halten Sie den Finger für die nächsten jetzt. Gut. Das hier ist hart. 

[00:41:39] PUBLIKUM: Oh Mist. Ok. Sie will diesen Weg zu gehen. Oh Mist, dass-- 

[00:41:44] DAVID J. MALAN: Yeah. Sekundärziel ist es, alle Sterne zu bekommen. Na gut, nächste. 

[00:41:53] Mal sehen, ob man diesen dritten eins zu bekommen. Gut. OK, gehen Sie dort drüben. 

[00:42:06] Sicher. Oh, sehr schön. In Ordnung. 

[00:42:11] Also, warum nicht wir vertagen heute hier? Lassen Sie jedermann auf kommen, die spielen will. Vielen Dank an Laura unserer Freiwilligen. Und wir werden uns am Montag sehen. 

[00:42:18] PUBLIKUM: Sie wollen wahrscheinlich diese zurück. 

[00:42:21] Sprecher 2: An der nächsten CS50--