[Musik zu spielen] DAVID MALAN: Dies ist CS 50 und Dies ist der Beginn der neunten Woche. Und was wir dachten, wir heute tun würde nicht nur das Kapitel über letzte Woche zu schließen Material, wo wir auf dem Server fokussiert Seite Web-Programmierung mit PHP und SQL, einige Datenbank Zeug. Wir werden über etwas sprechen Sicherheit heute und dann Übergang zu einer Client-Seite Programmier Sprache als JavaScript bekannt. Aber zuerst einige Erlösung. Sie können daran erinnern auf Mittwoch, machte ich mich um eine Website zu schreiben, dass nahm im Eingangs Benutzers durch ein HTML-Formular, dass dann gespeichert dass Benutzereingaben Namen, Telefon Zahlen und Mobiltelefon Träger in der Datenbank. Und dann hatte ich einen kleinen Befehl Zeilenskript geschrieben in PHP das sollte laufen in den Zeilen in der Datenbank und senden Sie Textnachrichten. Trotz mehrerer, mehrere Versuche, die wir nicht diese Funktion zu erhalten bis zum Ende. So verbrachte ich diese ganze Woche arbeiten an diesem Code, um uns über den Punkt zu bekommen wo wir aufgehört, wobei alle Ich habe bis zum Ende vom Mittwoch war diese Textnachricht von Margo, wie ich gekämpft, gefolgt von einer Textnachricht von einem anderen Mitschüler, Du hast dieses David bekam. Dieses folgte, wunderbar ermutigend. Ging weiter, sehr ermutigend. Ich habe es fast bis dann- und das ist die Note wir am Mittwoch beendet. Und dann tatsächlich vielleicht mein Favorit, einen Moment später, das kam in. Verdammt Livestream. So heute, beheben wir diese mit einer schnellen schauen, was ich seit getan. Also alles dieses Codes ist verfügbar Online aus der vergangenen Woche, der Woche acht, Quellcode. Und du wirst sehen, dass ich durchmachte, und ich tatsächlich Dinge gereinigt ein bisschen. Ich stellte ein paar andere Merkmale einer SQL-Datenbank. Zum Beispiel, anstatt so stellen Träger var char wie ich denke, dass ich im laufenden Betrieb hat in der vergangenen Woche. Ich definierte sie stattdessen als was heißt eine Enumeration. Und einige von euch vielleicht gesehen haben wie wir erkundet C. Enum ist eigentlich ein Feature von C, wo man aufzuzählen eine ganze Reihe von Konstanten und ordnen sie automatisch Werte, wie eine, zwei, drei, vier ohne Festcodenummern. Also SQL unterstützt die gleiche, wobei, wenn Sie ein Datenbankfeld haben, dass nur Sie möchte Sie auf einen endlichen nehmen Werte können Sie buchstäblich geben es wie ich dort vier getan beliebte US Handy Träger. Also tat ich das. Und ich habe eine Reihe von Änderungen, wie gut, von denen die wichtigste wurde auf Per E-mail zu arbeiten, weil Rückruf dass dieses Programm stützte sich auf die in der Regel eine E-Mail an genannt SMS-Gateway, das nur eine andere Art zu sagen, dass Verizon und AT & T, und andere Leute unterstützen einen Server, wodurch dann, wenn sie empfängt E-Mail, wandelt sie sie SMS und sendet einen Text Nachricht an ein anderes Telefon. Also, wenn ich das richtig, Hier ist eine neue und verbesserte Form das wird zu reden neue und verbesserte Code, der Sie können mit online spielen. Und es wird hoffentlich meine Telefon Piepton in nur einem Augenblick. Also erstmal, ich werde in meinem Namen geben. Zweitens werde ich nicht dies diesmal tun. Ich werde tun, Inspect Element. Und dies ist nur eine Kleinigkeit so dass ich nicht erstellen Stunden Postproduktion arbeiten, wie ich beim letzten Mal. Es ist jetzt meine Telefonnummer. Ich werde Verizon auswählen. Und hier, lassen Sie uns auf dieser Mikrofon einzuschalten hier, und zielen diese auf mein Handy hier. Ich werde auf Registrieren, die hoffentlich steckte es in die Datenbank. Jetzt werde ich auf dem Sprung Kommandozeilenprogramm, das Rückruf wurde dot Strich genannt Text und drücken Sie die Daumen. Auf geht's. [TELEFON DINGS] [Applaus] DAVID MALAN: Also mehr Spaß als this-- es macht Spaß, natürlich, wenn ich in sie zu erhalten. Aber es macht mehr Spaß, dachte ich, wenn wir erstellt eine jener Filmmomente wo wie etwas wirklich Schlimmes ist in der Welt passiert, und wie alle NSA Volks Handys beginnen zu piepen mit Textnachrichten Alarmieren sie zu dieser Tatsache. Also dachte ich, wir würden versuchen hier die gleiche, neu zu erstellen, wodurch nicht mit einer Datenbank, Ich stattdessen im Voraus schrieb ein Programm, das wie folgt aussieht. Dies ist ein index.php-- und ich diesen Code online gestellt als well-- die offenbar nur macht form.php, Verwendung eines MVC Stil Paradigma, dass wir reden über genauer in Problem-Set Sieben. Diese Form ist ziemlich einfach. Es wird ein vorlegen Datei here.php per Post genannt. Und es ist offenbar wollte fragen nach einem Namen und einer Telefonnummer, und dann mittels der sogenannten Wählen Sie das Menü, es ist gehen, um Ihnen mindestens vier beliebte US Handy Träger, und dann können Sie effektiv nehmen die Teilnahme hier klicken. Und hier dessen wird zu leihen einige der Code vom letzten Mal. Und wenn Sie gerade überfliegen diese, Sie werden sehen, dass es eine ganze Reihe von Fehlerprüfung. Aber die Schönheit am Ende ist, dass wir nicht schriftlich heute zu einer Datenbank. Wir halten es einfach und nur das Versenden von hoffentlich eine Textnachricht über Funktions I schrieb in den letzten paar Tagen Anruf Text, der in Funktionen ist. php, Das ist wieder online zur Verfügung. Also, wenn möchten Sie in diesem teilzunehmen. Wir gehen nicht zu sein nichts zu speichern. Gehen Sie zu dieser URL hier in Echtzeit. Sie legt ihn jetzt noch nicht, aber wir sehen, wenn wir einen dieser Film haben Momente, in denen jedermanns Handy gibt einen Signalton aus, hoffentlich nur einmal in diesem Jahr anders als im Jahr 2011 wo das ging fürchterlich schief. Und sobald Sie an diese Adresse gehen, Sie sollten ein super einfaches Formular sehen dass, wenn Sie einen Namen, ein Handy Nummer und eine Mobiltelefonträger, passt die Liste gibt, gehen vor und füllen das Formular aus. Aber nicht schlagen unterbreiten nur noch. Die Form geht um so aussehen. Gehen Sie weiter und geben Sie Ihren Namen, Ihre Telefonnummer. Oop, ist jemand vor der Kurve gehen. Es ist in Ordnung. OK, jeder hat das Formular ausgefüllt. Dies sollte auf eine Arbeit Telefon, auch, wenn Sie wollen. Alles klar, auf die Plätze, fertig, los. Hit Hier. Was? Nein. Ich schwöre bei Gott, die ich getestet habe diese mehrmals heute. Du hast es? [Zwischen Stimmen] DAVID MALAN: OK, Benutzerfehler vielleicht. Das sind zwei. Er arbeitete für zwei von a einige hundert, drei, vier. OK, das ist gut. Vier von fünf für Korrektheit, wie etwa. Also, was ist passiert? Also vermutlich ohne zu sehen, Ihre Bildschirme, warum könnte es fehlerhaft sind? Es ist wahrscheinlich, dass wir gerade waren versuchen, zu viele Verbindungen herstellen Harvard Mail-Server alle auf einmal von der gleichen IP-Adresse. Ich kann nur raten, da ich nicht haben den Luxus der Tests dieser Code mit einigen 300 Personen im Voraus aber jetzt erkennen, dass dass zumindest sollte haben die Aufgabe, dieses Mal getan bekommen. Na gut, also warum ist das alles das mehr Germane, was ist los? Nun zunächst, eine schnelle paar Ankündigungen. So einen, wenn Sie möchten, dass Chang anzuschließen, und Nick und andere am Mittag an diesem Freitag, tun RSVP zur gewohnten URL gibt. Wenn Sie daran denken, konzentriert in oder macht einen sekundären in CS, ob Sie ein College-Student bist, oder Neuling, oder sogar Junior oder Senior an dieser Stelle und kann immer noch in den Kursen Squeeze, erkennen, dass der Ingenieurschule sammelt kostenlos Ben und Jerrys Eis und Beratung an diesem Mittwoch kurz nach Klasse um 4:00 Uhr in der CS Gebäude bei Maxwell Dworkin. Wenn dies zu schnell auf dem Bildschirm, gehen Sie einfach Um nach einem cs50.harvard.edu Link zur Facebook-Veranstaltung wo Sie weitere Details zu sehen. Inzwischen dachte ich, ich würde korrigieren eine weitere Sache, die ich vermasselt am Mittwoch. Es stellte sich heraus, dass Marks ID Auf Facebook war nicht drei. Es war vier. Stellt sich heraus, er mehr Test hatte Konten, als ich wieder zu verwenden. Aber was dieses Gefühl, eine Chance zu tun ist, um eine URL wie diese hochzuziehen. So stellt sich heraus, dass Facebook ein API, Application Programming Interface, das ist ein Mechanismus, mit dem Sie können Daten programmatisch beantragen bei Facebook und erhalten Sie zurück Maschine lesbare Informationen, nicht Web-Seiten sondern nur reinen Text, etwas genannt JavaScript Object Notation. Und in der Tat, wenn ich diesen Besuch URL, und vergrößern, die standardmäßig dies ist Mark öffentlich zugängliche Informationen. Und das Interessante Detail hier ist nur, dass seine ID ist in der Tat, die Nummer vier, die ich realisiert, sobald ich das tat. Sie können dies selbst tun, wenn Sie wissen Ihrem Facebook-Benutzernamen, wenn Sie eine haben. Tippen Sie sie einfach bis oben gibt. Und nichts davon ist privat. Ich bin gerade dabei dies sogar im Inkognito-Modus. Also ich bin noch nicht einmal angemeldet. Und Sie sehen, dass ich anscheinend war Benutzernummer 6454 auf Facebook, die nicht zu schlecht in diesen Tagen. So jedenfalls sehen Sie auch Weitere Informationen gibt. Und die nützlicher Aspekt davon ist, dass man könnte Ihre eigene Software schreiben, dass irgendwie integriert Daten wie diese in eigene Applikationen. Sie können Benutzer zu ermächtigen loggen Sie sich in Ihre Website, nicht verwenden ihre eigenen Benutzernamen und Kennwort aber vielleicht ihre Facebook-Login und erhalten Sie Informationen selbst über ihre Freunde, wenn sie genehmigen solche oder ähnliche. Also beachten Sie, dass CS50 Auch hat einige eigene APIs, ein für die Kurskatalogdaten, einige für die Umarmungen Menüs im Speisesaal Hallen, die alle die Gebäude und Orte auf dem Campus haben wir eine API für so gut dass Sie ähnlich abfragen und erhalten können zurück Textdaten, die Sie integrieren können in eine PHP oder JavaScript oder sogar, wenn auch weniger häufig, einem C basiert Abschlussprojekt. Tatsächlich Schuss für die endgültige Projekt sind ein paar Meilensteine. Sie haben eine E-Mail von uns den anderen Tag. Erkenne, dass der Vorschlag liegt am kommenden Montag. Es ist nicht unbedingt bindend, aber Sie tun müssen, um Ihren Unterricht Stipendiaten erhalten zur Genehmigung vor Alle Änderungen danach. Und dann vor ein Reihe weiterer Meilensteine. Also, Sie necken Auch mit einigen Möglichkeiten, Wir haben eine Reihe von diese Farbton Glühbirnen. Und einige von euch haben jetzt einige von diesen in Ihrem Zimmer im Studentenwohnheim auch. Und auch sie haben eine API. So erinnern diese binären Glühbirnen Wochen her, dass Dan Bradley und Ansel Duff geschaffen für uns. Sie verwendeten eine Softwareschnittstelle zu diese Glühbirne, die im Moment wird in Strom gesteckt und dann per WLAN ist mit einer Kleinigkeit verbunden rief die Brücke hier unten, wie ein kleiner Router proprietären zu diesem Gerät. Aber es stellt sich heraus, wenn ich weiß, wie man HTTP-Nachrichten senden, wie wir alle jetzt tun, Ich kann eine Meldung wie diese zu senden diese Glühbirne, um sie ein- oder auszuschalten oder haben eine beliebige Anzahl von andere Operationen auf sie. Beachten Sie, dass es nicht zu bekommen, es ist nicht zu veröffentlichen. Es gibt eine andere sogenannte Put. Es gibt tatsächlich ein paar andere solche Verben. Aber feststellen, es ist ein Weg dorthin, Slash API, Schrägstrich neue Entwickler, Slash Licht, Schrägstrich ein, Schrägstrich Staat. Das ist offenbar nur die Weg, dass das Unternehmen, Philips, Sie beschlossen, getroffen haben mit einer HTTP-Anfrage wenn Sie den Status ändern möchten der Glühbirne mit HTTP 1.1. Dann bemerken die leere Zeile. Und dann endlich, was aussieht wie Art von einem Array von einer Art, Diese Mitteilung wird sich aufgerufen werden JavaScript Object Notation, oder Jason. Und was Sie hier sehen, ist, dass gibt es drei Schlüsselwertpaare. Ein Schlüssel wird als auf. Und seinen Wert anscheinend wird wahr. Helligkeit beträgt 128, die ist eine Art von int. Und dann Übergangszeit ist Null ist, was offenbar wie lange es zu gehen zu ergreifen, um diese Sache einzuschalten. So jetzt diese Glühbirne ist aus. Aber wenn ich genau das tun this-- lassen mich zu einem kleinen Spickzettel gehen dass Dan einzurichten in advance-- und ich werde voran gehen und kopieren Mit dem folgenden Befehl. Locke, wie einige von euch könnte auf CS50 aufgelesen haben Diskutieren ist ein Dienstprogramm wie Telnet wie dass Sie HTTP-Anforderungen zu simulieren, speziell legt. Ich kann diese Daten zu senden, spezifisch, was wir gerade sah einen Moment vor spezifisch zu dieser URL hier. Und dann Locke geht zu handhaben alle erforderlichen Header und Parsen es von. Also alles, was ich zu tun ist, kopieren Sie diese in ein Terminal-Fenster und dann drücken Sie Enter. Und die Glühbirne geht weiter. Und das ist alles durchmachen mein Computer drahtlos irgendwie hinunter zur Brücke, die wird dann zu dieser Glühbirne reden. Ich kann etwas anderes tun. Ich kann diese Sache machen gehen rot zum Beispiel. Ich kann zum Beispiel machen dieses Ding gehen Grün. Ich kann es gehen blau. Und in jedem von diesen bemerken Instanzen, alles, was ich ändern ist die sogenannte Farbtonwert tatsächlich geben sie etwas Farbe. Also lassen Sie mich diese ein und fügen Sie ihn in auch. Jetzt ist es blau. Und Sie selbst Züchter tun können Dinge where-- wir auf grün gehen. Und ich könnte dies der tun Natürlich mit meinen eigenen Code. Aber selbst die API selbst unterstützt flippig Operationen wie diese, die jetzt die Mühe wird uns für die nächsten 30 Sekunden. Also das ist ein Vorgeschmack auf das, was Dir evtl. tun mit einer API, diesmal mit Glühbirnen. Beachten Sie, dass CS50 hat ein paar Paare von Google Glass, wenn Sie möchten gerne etwas zusammen angehen diese Linien, Arduino Unos, die sind winzige Computer, Wesentlichen auf einer kleinen Leiterplatte dass Sie eine Verbindung herstellen können Drähte und andere Dinge um und tatsächlich Steuer Ihre realen Umgebung. Und dann gibt es ein paar neuer Spielzeuge, die wir haben. Dieser eine buchstäblich nur kam der neulich per Post, ein Myo Armband. Und ich dachte, es ist ein Weg, um erhalten Sie über Projekte angeregt dass Sie mit verwenden könnte Diese Hardware würde sein, diesen kurzen Clip spielen dass sie verwenden, um Leute zu ärgern dass wir jetzt leben in der Zukunft. [Musik zu spielen] DAVID MALAN: Also in nur ein paar Wochen, die Sie können Sie auch, dass am CS50 fairen cool. Ein anderes Gerät, dass wir haben eine Reihe von, dass wir glücklich, für Projekte ausleihen wird als Motion-Controller. Dies ist ein wenig USB-Gerät Sie an einen Computer anschließen, dass erlaubt Ihnen, mit interagieren Ihren Laptop, Mac oder PC, als ob Sie wie ein Xbox Kinect hatte und tatsächlich machen körperliche Bewegungen viel wie wir es in dieser zu sehen Vision der Zukunft. [Musik zu spielen] DAVID MALAN: Also, auch wenn Sie keine Ahnung, wie so etwas könnte möglicherweise erfunden oder arbeiten werden auf Hardware-Ebene, egal. Selbst nach nur wenigen Monaten des CS50, und ein Verständnis für die Programmierung allgemeiner und Web-Programmierung mehr vor kurzem, und dann auch APIs und HTTP, Sie haben Zugang über Software-APIs, wenn Sie wollen, um eine von ihnen zu leihen Geräte, um tatsächlich zu reden und nicht darum kümmern, die zugrunde liegende Implementierung Details, die komplett ist im Einklang mit diesem Begriff der Schichtung eine Abstraktion, die wir haben während des Semesters zu sehen. So auch am Wochenende, sah ein paar Neuigkeiten. Erstes Bild, um Seminare, wenn Sie Lust, etwas zu lernen mehr auf einer beliebigen Anzahl von Themen. Sehen Sie die URL dort. Und dieser wurde verschickt mich von Chang, die Sie kennen, wer Druck unsere Armee von Elefanten. Und es war eine Schlagzeile wie folgt. Ich bin entsetzt von meinem neuen TV. Warum habe ich Angst, dies zu drehen Sache auf, und Sie würden auch sein. Also sind wir jetzt bei der Punkt in der Vorlesungszeit Auch wenn, auch wenn Sie das geringste Verständnis der, wie das Web funktioniert und HTTP, und Sicherheit, Dinge wie diese beginnen sollte, ins Auge fallen. Aber auch, werden Sie verstehen, ob diese Dinge sind oder nicht tatsächliche Bedrohungen. Also nahm ich ein paar Auszüge aus diesem Artikel hier. Und die Geschichte ist wie folgt. Ich bin jetzt der Besitzer eine neue Smart-TV, das verspricht Streaming liefern Multimedia-Inhalte, Spiele, App, Social Media und Internet Browsing, ach ja, und TV auch. Das einzige Problem ist, dass ich jetzt Angst, es zu benutzen, sagt der Autor. Sie würden auch sein, wenn man durch lesen der 46-Seite Datenschutzrichtlinie für Ihr Fernsehgerät. Die Datenmenge, dieser Sache sammelt, ist atemberaubend. Es protokolliert, wo, wann, wie und für wie lange Sie mit dem TV. Er setzt Tracking-Cookies, wie wir besprochen haben, und Baken konzipiert zu erkennen, wenn man betrachtet insbesondere die Inhalte oder die eine bestimmte E-Mail-Nachricht Wenn Sie E-Mails auf Ihrem Fernseher ansehen möchten. Es zeichnet die Anwendungen, die Sie verwenden, die Webseiten, die Sie besuchen, und wie Sie mit Inhalten interagieren, tut das alles über Ihr Smart-TV. Es ist auch, gruseliger yet-- das ist meine addition-- hat eine eingebaute Kamera mit Gesichtserkennung. Der Zweck ist es, Gestensteuerung für den Fernseher und ermöglichen es Ihnen, sich anzumelden personalisierten Konto mit Ihrem Gesicht. Auf der anderen Seite sind die Bilder auf dem TV gespeichert statt hochgeladen zu einem Unternehmensserver. Auf der Sollseite, das Internet Verbindung macht die ganze TV anfällig für Hacker, die haben die Fähigkeit bewiesen die vollständige Kontrolle über die Maschine zu nehmen. Noch beunruhigender, als ob das noch nicht intelligent genug, ist das Mikrofon. Der TV verfügt über eine Stimme Erkennungsfunktion dass kann der Zuschauer zu kontrollieren der Bildschirm mit Sprachbefehlen. Aber der Service kommt mit ein eher ominösen Warnung. Bitte beachten Sie, dass, wenn Ihre gesprochenen Worte beinhalten persönliche oder andere sensible Informationen, dass die Informationen wird unter den erfassten Daten sein und einer dritten Partei übertragen wird. Haben Sie das? Sagen Sie nicht, persönliche oder sensible Sachen vor Ihrem TV. Also das ist eigentlich echt. Und es ist schwer, nicht zu, wenn Sie sehen, gehen zu Best Buy oder dergleichen für Fernseher heutzutage. Sie sind in gewisser Weise alle smart. Und sie bekommen intelligenter und gruseliger. Und sie sind einfach das Sammeln von Daten in einer Weise, die wir gesprochen haben und dann laden Sie sie über HTTP oder einige andere Protokoll bis zu einem gewissen Server. Das war also ein Spaß Artikel in diesem Online-Website hier, die sich um eine sprachen insbesondere Bug oder irre Code dass wir tatsächlich binden in der vergangenen Woche diskutiert. Also diese Schlagzeile war, als folgt, geht die Geschichte hier, Josh Breckman arbeitete für ein Unternehmen, das einen Vertrag gelandet um ein Content-Management-Entwicklung System oder CMS wie sie genannt werden, für eine ziemlich große Website der Regierung. Ein Großteil der Projektbeteiligten Entwicklung eines Content Management Systems so dass die Mitarbeiter wäre Lage, aufzubauen und zu pflegen die sich ständig ändernden Inhalte für ihre Website. Es lief ziemlich gut für ein paar Tage nach dem Go-Live. Aber am sechsten Tag ging es nicht so gut. Alle Inhalte auf der Website war vollständig verschwunden. Und alle Seiten führten zu der standardmäßig Bitte geben Gehalt Webseite. Whoops. Josh wurde aufgerufen untersuchen und bemerkt dass ein besonders lästig externe IP-Adresse hatte in gegangen und alle gelöscht der Inhalt des Systems. Die IP-Adresse nicht angehören bis zu einem gewissen Übersee Hacker gebogen zu zerstören hilfreich Regierungsinformationen. Es beschloss googlebot.com, Google ist sehr eigenen Web-Crawling Spinne. Whoops. Nach ein wenig Forschung und Scrambling rund um einen noncorrupt Backup finden, Josh fand das Problem. Ein Benutzer kopiert hatte und eingefügt einige Inhalte von einem Seite zur anderen, einschließlich ein Hyperlink bearbeiten um die Inhalte auf der Seite zu bearbeiten. Normalerweise wäre dies nicht ein Thema, da eine Außen Benutzer würde müssen Sie einen Namen und ein Passwort eingeben, aber die CMS-Authentifizierungssystem, das Login-System, nicht berücksichtigen hoch entwickelte Hacker Techniken der Google Spinne. Whoops. Wie sich herausstellt, Google Spinne nicht verwenden Cookies, die, dass es bedeutet, leicht umgehen einen Scheck für die auf Cookie angemeldet falsch. Es ist auch nicht zu achten JavaScript die normalerweise auffordern und leiten Nutzer die nicht angemeldet sind. Es hat jedoch folgen jeden Hyperlink auf jeder Seite die es findet, einschließlich solcher mit Seite löschen im Titel. Whoops. Was bedeutet dies in mehr bedeuten technische, sondern ziemlich zugänglich Begriffe? Es bedeutet nur, dass während ihrer Website, sie URLs hatte nicht unähnlich dieser eine, sehen Sie möglicherweise in Problem stellte sieben. Recall in Problem stellte sieben oder wissen, in Problem set sieben dass Sie herausgefordert sind, unter anderem um Aktien im Namen der Nutzer zu verkaufen. Aber die Umsetzung dieses Feature durch bekommen über Hyperlinks in Ihrem Benutzer Schnittstelle, wahrscheinlich nicht die intelligenteste Idee denn wenn Ihre Website ist irgendwie zugänglich, entweder durch einen menschlichen wer rund Anklicken oder kaufen ein Bot wie Google oder einer Spinne wie sie genannt werden, dass es nur Absuchen des Internets versuchen, Index Das Web als Suchmaschine sie konnten sehr leicht Hit über erhalten diese Art von URL. Und das ist funktional entspricht, in diesem Fall Verkauf aller Aktien von Google verarbeiten. Nun ehrlich gesagt, es ist völlig asinine dass das CMS gebrauchte JavaScript und Cookies seine Login-System zu implementieren und nicht zu tun, dass Server-Seite, wie Sie Jungs und tun in PSet 7-- es gibt eine login.php file-- immer, immer, immer Sicherheit sein sollte auf der Serverseite durchgeführt, nicht auf der Clientseite, weil, wie dies Artikel legt nahe, und Sie könnten sich sehen irgendwann, es ist trivial für einen Benutzer, gut oder schlecht, um einfach abschalten JavaScript keine Cookies ganz zu schweigen. Das ist also Ihre tägliche WTF. Es gibt eine weitere, die ist nur irgendwie beängstigend, so dass ich es, wenn erwähnen nur als Lektion fürs Leben. Immer, wenn Sie eine Anwendung verwenden, genannt wie Snapchat oder dergleichen das sagt diese Fotos nur für dauern fünf Sekunden 10 Sekunden oder so weiter. Sie sind vergänglich Das ist absolut nicht der Fall. Wie gibt es keine Möglichkeit, digital, eine Form von Video-Umsetzung, oder ein Bild oder Textweitergabe solcher dass ein Empfänger am anderen Ende kann nicht irgendwie speichern Sie die Daten. In der am meisten naive Weise jemand konnte ihr Telefon zu nehmen. Und sie einen 10 Sekunden-Fenster haben beim Betrachten einiger Schnapp nur nehmen Sie sich etwas anderes Telefon und fotografieren, offensichtlich. So können Sie sich bewahren können etwas digital so. Einige von euch wissen, wie man nehmen Screenshots auf Ihrem Handy. In der Tat, wenn Sie nicht wissen, diese, erkennen, dass zumindest Snapchat, und ich denke, andere Anwendungen in diesen Tagen, zumindest sagen, ob die Empfänger hat tatsächlich einen Screenshot von Ihrem Bild gemacht. Aber schlimmer noch, das war der snappening, als jemand prägte es vor kurzem, wo einige 100.000 Snaps entlassen worden in Was ist eine Torrent-Datei namens auf verschiedenen Websites letztlich. Und sie enthalten eine ganze Reihe privater Nachrichten und Beiträge. Es stellt sich heraus meisten gutartig, so nicht, was Sie erwarten könnte. Aber weil die Menschen hatten verwendet die Website eines Dritten, sie sich mit ihrem Snapchat Benutzernamen und Passwort und dann Speichern aller ihrer rastet auf dieser Webseite Dritter. Und es war, dass Dritte Website, die gehackt wurde, dem jemand meinte nur herausgefunden, wie alle 100.000 zuzüglich jener Bilder bekommen in die eigene Festplatte für nachfolgende Sharing. Ehrlich gesagt, auch hier ist es irgendwie von asinine dass Snapchat ist derart ausgebildet, dass ein Dritter von Intercept sortieren die Daten und dass es nicht zu bindenden Ihre eigene Anwendung auf dem Handy läuft. Aber auch hier erkennen, dass diese Dinge, die Sie nicht fangen überrascht, oder zumindest dort sollten sein eine Lektion fürs Leben in hier. Wenn Sie die technische möchten Einzelheiten zu dieser URL gehen dort das ist in der heutigen Rutschen. Na gut, Sie haben Fragen zu heutigen Lebenslektionen in CS? Dies ausschalten. Überhaupt etwas? Überhaupt etwas? Ich habe eine Menge von Leuten, die einchecken bekam ihre Snapchat oder etwas jetzt. Alles klar, so SQL, Structured Query Language. Lassen Sie wickeln diese. Und auch, obwohl wir sind nur Kratzer Die Oberfläche dieser Sprache, geben wir Ihnen genug von der Sprach in Form PSet 7 so dass Sie einige angehen ziemlich häufig Funktionalität. Aber erkennen, gibt es ein paar Dinge, die wir nicht von Ihnen verlangen, aber sie gehen, um sein wichtige gekommen Abschlussarbeiten und sicherlich kommen macht tatsächlichen Webseiten mit tatsächlichen Nutzern ist diese Design-Entscheidung. Es stellt sich heraus, dass in eine MySQL-Datenbank, die Sie haben Trauben von Entscheidungen wie die Datentypen für Ihre Spalten und andere Dinge, aber Sie haben auch die Wahl einer sogenannten Speicher Motor für alle Ihre Daten, die Art von Dateisystem, wenn Sie nicht vertraut sind, für alle Ihre Daten. Welches Format ist es letztlich in gespeichert? Und die häufigste vielleicht hat MyISAM und InnoDB, Fachbegriffe dass wir nur werde kümmern in dem Maße, dass man und ein nicht die folgende Funktion. Angenommen, Sie haben ein wenig Wohnheim Kühlschrank. Und annehmen, dass Sie und Ihre Mitbewohner, die diesen Kühlschrank teilen, sind wirklich lieb sagen Milch. Und dies ist in der Tat, wie die Geschichte wurde so wieder zu mir gesagt, in den Tag, als ich einen Kurs genannt CS 161 Betriebssysteme, die ähnlich erforscht dieses Thema. So können Sie diesen Kühlschrank haben. Du bist aus der Milch. Und du nach Hause kommst, deine Mitbewohner noch in Klasse oder was auch immer, und Sie entscheiden, ich bin zu gehen gehen und sich etwas Milch. So können Sie den Kühlschrank zu schließen, Überbrückungs die Zimmer im Studentenwohnheim, über die Straße zu gehen CVS oder wo auch immer, und erhalten Schlange, um etwas Milch zu kaufen. Unterdessen bekommt Ihre Mitbewohner Hause aus der Klasse, kommt in den Schlafsaal, öffnet den Kühlschrank, auch realisiert ooph können wir aus der Milch. Damit er oder sie schließt die Kühlschrank und dann passiert um auf die andere CVS zu gehen, was sein geschieht einen Block entfernt von den anderen CVS auf dem Platz, und bekommt im Einklang da, um etwas Milch zu bekommen. Jetzt natürlich ein paar Minuten Später, zurück bekommen Sie beides, und das schlimmste aller möglichen Ergebnisse passiert ist. Beide haben Sie Milch. Und Sie nicht wirklich wie Milch, die viel. Also einer von ihnen ist gerade werde irgendwann sauer. So, jetzt zu viel haben Milch im Kühlschrank alles nur, weil warum? [Unverständlich] DAVID MALAN: Ja, das hast du nicht irgendwie miteinander kommunizieren Sie waren immer Milch. So in den einfachsten Möglichkeiten in der Welt der Menschen, Wie könnte man diese dumme vermeiden Szenario geschieht wie dass Sie nur am Ende mit ein. Text ihnen ja gut. Aber wie sonst? Post-it-Zetteln. DAVID MALAN: Ein Post-it Note. Jede Form von Kommunikation das sagt Ihre Mitbewohner nicht in den Kühlschrank für Milch gehen. Ich werde gehen auffüllen auf meinem eigenen. Also man irgendwie brauchen , diesen Bereich zu sperren. So können wir this-- machen können wir Art ruinieren die Geschichte und zu einem CS Geschichte wobei daran zu denken, wie gerade wie ein Variable, die Speicherung wird einen gewissen Wert. Und gerade jetzt, die Wert der Milch gleich Null ist, die Sie nicht möchten, dass Ihr Mitbewohner auf diese Variable inspizieren und dann eine Entscheidung treffen sich selbst basierend auf dem Zustand der Variablen Wenn Sie in den Prozess der bist Ändern des Status dieser Variablen. Also eine der Linien von SQL, die wir geben Ihnen in PSet 7 Spezifikation ist diese hier. Und wir verbringen nicht einen riesigen Höhe der Zeit, darüber zu reden. Aber es stellt sich heraus, wenn Sie versuchen, einige Aktien in CS50 Finanz kaufen dass Sie bereits einige Aktien, die Sie wollen in der Lage, eine Reihe zu tun von Dingen sofort zusammen. Sie wollen in der Lage zu sein, effektiv, auf einem hohen Niveau, überprüfen alle Rechte, wenn ich will, mehr Aktien von Free kaufen, die Penny Stock wir reden in der Spezifikation, Ich möchte erste Prüfung wie viele Aktien die ich habe. Und angenommen, es ist fünf. Und angenommen, ich möchte kaufen 10 weitere, ich letztlich wollen bis 15 Aktien haben. Also ich habe zwei Fragen stellen. Was ist der Zustand der Variablen? Was ist der Zustand der Zeile? Wie viele Aktien kann ich derzeit? Dann können Sie voran gehen und aktualisieren Sie es möchten. Also das ist der analog zu den Milch in, dass Sie die Zeile zu überprüfen, und dann können Sie es aktualisieren möchten denn wenn man 10 Aktien kaufen möchten, Sie nicht ändern wollen die Reihe bis 10, Sie ihn auf 5 ändern wollen plus 10 oder natürlich, 15. Diese Codezeile stellt sicher, dass jene zwei Konzeptideen geschehen gemeinsam oder gar nicht. Niemand, auch nicht auf andere Benutzer die in der gleichen Website angemeldet ist, irgendwie zu unterbrechen das Überprüfen der Reihe und die Aktualisierung der Zeile, die auswählen und das Update, wenn man so will. Und die Syntax ist nicht super offensichtlich, aber diese eine Zeile, lange ist es, stellt sicher, dass diese beiden Operationen überprüfen Sie die Variable oder überprüfen Sie die Zeile und aktualisieren die Zeile geschehen atomar. Oh hier gehen wir wieder. SMS-Nachricht auf meinem Handy. Lassen Sie uns also diese eine wenig konkreter. Nehmen wir an, du bist nicht Umsetzung über einen Kühlschrank, und du bist nicht der Umsetzung PSet 7 sondern eine tatsächliche Bank, oder ein Geldautomat, ein Automated Teller Maschine, wobei man irgendwie wollen in der Lage zu ermächtigen Benutzern, Geld zu überweisen von einem Konto zum anderen. OK, hängen. Ich werde das jetzt stumm, danke. Also, Geld zu verschieben wollen wir von einer Kontonummer in einem anderen Konto Anzahl, speziell 100 $. Also das ist Art von einem beliebigen Beispiel, wobei Sie die ATM, möchten Sie vielleicht zwei SQL ausführen Abfragen, subtrahieren von einem Konto, und den anderen Konto hinzuzufügen. Aber Sie müssen sicherstellen, dass diese wollen zwei Linien sowohl passieren oder überhaupt nicht. Sie etwas nicht wollen immer unterbrochen. Sie müssen nicht einige intelligente Bösewicht irgendwie bei der Bank of America stand mit zwei Geldautomaten vor von ihm und irgendwie Art der Eingabe in die Befehle zur gleichen Zeit, hoffentlich versuchen zu $ ​​200 anstatt abzuziehen von $ 100 und nur mit 100 $ gutgeschrieben. Kurz gesagt, dies zu wollen, dass Sie genau so verhalten, als Sie erwarten. Und die Art, wie Sie tun, diese in SQL-Datenbank ist können Sie es in was wickeln rief eine Transaktion. Buchstäblich in SQL, anruft CS50 ist kann Abfragefunktion mit Zitat unquote Start Transaktion. Dann können Sie eine beliebige Anzahl ausführen der nachfolgende SQL-Abfragen, aber keines von ihnen nehmen Wirkung auf die Datenbank bis Sie Abfrage Zitat unquote nennen zu begehen, wenn wieder mit PHP. Und auf diese Weise können Sie sicherstellen, dass auch wenn Sie 1.000 Benutzer alle Schlagen Sie Ihre Datenbank zur gleichen Zeit, SQL wird, dass diese Versprechen zwei Abfragen werden ein Recht nach dem anderen umgesetzt. So können Sie am Ende nicht mit einem Überschuss von Milch oder die falsche Menge letztlich Geld. Also denken Sie daran, nicht so sehr für PSet 7 sondern für Abschlussarbeiten wenn Sie tatsächlich sind versuchen, Daten zu bewegen über Tabellen, wie Sie vielleicht hier. Aber vielleicht noch einfacher und offensichtlich mit einem Beispiel zu verstehen ist diese hier. Und jemand gemailt uns diese nur den anderen Tag als er sah, etwas ähnliches online. Also meines Wissens nach der Pin-System ist nicht anfällig für diesen Angriff. Und ich habe keine Ahnung, ob es auch Verwendungen die SQL-Datenbank unter der Haube. Aber lassen Sie nutzen es für um der Diskussion willen. Hier ist der Bildschirm, der Harvard Leute neigen bei der Anmeldung mit, dass ihre Harvard-ID-Nummer und deren Pin. Und angenommen, dass die Pin-System waren in PHP und einer MySQL umgesetzt Datenbank der Code, daß jemand Vor vielleicht geschrieben haben Jahre könnte wie folgt aussehen. Zunächst erklären ein Variable namens username. Und genau das her die POST-Superglobal. Dann erhalten Sie eine andere Variable genannt Passwort und das gleiche tun. Und dann führen Sie einfach Dieses lange Abfrage hier Wählen Sterne von den Benutzern, wo Benutzername gleich so und so und Passwort gleich so und so. Beachten Sie, dass die geschweiften Zahnspangen ich verwendet habe hier nur um PHP meine, gehen voran und Ersatz Der Wert dieser beiden Variablen recht. Sie sind nicht unbedingt notwendig, aber sie neigen dazu, subtile Syntaxfehler zu vermeiden. Also das sieht ganz korrekt auf den ersten Blick. Und es ist. Sie könnten der Umsetzung Pin-System auf diese Weise. Aber nehmen wir an, dass ein Super smart und bösartige Schüler Eingangs dies als seine PIN. Also habe ich die Kugel entfernt Zeichen hier in der Mock-up, und ich habe tatsächlich enthüllt was er oder sie vielleicht Typisierung sein. Und es ist ein wenig seltsam. Aber was springt heraus an Ihnen bei potenziell beunruhigend über die Eingabe des Benutzers, auch wenn Sie keine Ahnung haben, was eine SQL-Injection-Angriff bedeutet. Warum sieht das ein wenig fischig? Was ist das? [Unverständlich] DAVID MALAN: Der oder ein wenig verdächtig. In der Tat, das ist ein Schlüsselwort aus SQL. Also das verheißt nichts Gutes. Die Tatsache, dass es alle diese einfachen Anführungszeichen sind-- in der Tat, eines der am einfachsten Möglichkeiten, um einige Datenbanken brechen ist, indem Sie in einem Namen wie O'Reilly das hat einen Apostroph in ihm denn wenn der Mensch, der schrieb der Code hinter den Kulissen nicht berücksichtigen, dass es könnten einfache Anführungszeichen in einem Benutzers sein Eingang, und er oder sie wird unter Verwendung einfache Anführungszeichen in ihrem Code, schlechte Dinge passieren können. In der Tat, schlimmer noch, darüber nachzudenken. Wenn dies wieder der Code dass jemand an der Harvard Jahre vor für den Stift schrieb System, bemerken, was ist über wechselt bekommen Benutzername und Passwort wenn der Benutzer wieder skroob als Benutzername und dann ein, zwei, drei, vier, fünf, Zitat oder Zitat unquote ein equals zitiere ein. Und feststellen, was Schlüssel Hier ist der Benutzer nicht begann ihr Passwort oder ihren Stift mit einem Zitat. Und sie haben es nicht zu Ende mit einem Zitat, weil er oder sie geht davon aus, dass, wenn die Programmierer war nicht so scharf, sie gehen, um die haben einfache Anführungszeichen in ihrem Code. Also hier ist der Code. Und die Substitution, die könnte jetzt geschehen ist dies. Und ich habe unterstrichen, was der Benutzer eingetippt. Also vor, nach. Und feststellen, was gelinde beunruhigend jetzt über der rechten Hälfte dieser SQL-Code? Es ist ein wenig komplexer, zugegebenermaßen als die Abfragen haben wir gesehen. Aber das kann unmöglich eine gute Sache, wenn Sie sagen select Stern, der wählen ist alles aus der Tabelle des Benutzers wobei Benutzername gleich skroob und Kennwort gleich einem, zwei, drei, vier, fünf oder eins gleich eins. Was ist die logische Implikation dieser letzten Klausel vermutlich? Es ist nur immer wahr. Und weil wir irgendwie geahnt oder durch Versuch und Irrtum gemustert daß der Programmierer, schrieb dieser Code nicht rechnen mit einer menschlichen oder schlechter Mensch Eingabe in einfache Anführungszeichen als gut, wir syntaktisch kann vervollständigen die SQL-Abfrage mit etwas unsinnig sondern etwas, das ist syntaktisch falsch dass immer true ergibt. Also, wenn dieser Code verwendet wird, um zu antworten die Frage richtig oder falsch ist Dieser Benutzer darf das passieren werden Antwort ist immer offenbar gehen um wahr zu sein, weil dies wird immer etwas aus der Datenbank auswählen weil man natürlich immer gleich eins. Also, was ist die Lösung? Nun, in PSet 7, wir eigentlich vermeiden Sie diese alle zusammen. Wir geben Ihnen eine Abfragefunktion, und wir Sie ermutigen, Fragezeichen verwenden als Platzhalter, ähnlich im Geiste der printf% s, aber was ist Schlüssel zu den Fragezeichen Hier ist, wenn Sie tatsächlich durch lesen functions.php, wo unsere Abfragefunktion implementiert ist, diese Fragezeichen sind geflohen, wobei alles potenziell gefährliche wie ein einfaches Anführungszeichen eingeschaltet in einem entflohenen Apostroph. Also das ist, was ist wirklich passiert, wenn Sie verwenden CS50 die Abfragefunktion oder eine beliebige Anzahl Dritter frei Bibliotheken, das gleiche tun. Ist in diesem Fall nicht egal, in grün, wenn der Benutzer in einem einzigen Zitat getippt Da die Abfrage Funktion, die wir geschrieben haben ist werde umgekehrten Schrägstriche vor dem hinzufügen eine solche gefährliche Zitat. Das ist also nicht, in Tatsächlich gehen legit zu sein. Dies ist wie das Schreiben in einer verrückten suchen Kennwort, das ist natürlich nicht um skroob tatsächliche Passwort sein. Also das Essen zum Mitnehmen für CS50 ist einer, absolut immer etwas verwenden wie Abfragefunktion CS50 ist oder die zugrunde liegende Bibliothek, was passiert mit namens PDO werden. Aber nie, nie, Code nie tun wie dieses ohne Flucht oder Scheuer wie sie sagen Ihre Eingaben. Und du wirst irgendwann wahrscheinlich stoßen einige Website wie diese. Tatsächlich scheint es so zu sein, wie in Flughäfen und Hotels in Orten wo sie kostenloses WLAN Zugang, die Sie sich anmelden müssen, Diese Websites sind immer Schlechtes implementiert. Und so eine Art Spaß zu Hause Übung nicht für bösartige Zwecke oder mehr eines Spaß auf der Straße Übung ist es, geben Sie einfach ein Apostroph, ein einfaches Anführungszeichen, in eine Form auf irgendeiner Website und sehen was passiert. Und wenn der Server abstürzt oder gibt Sie irgendeine Art von Fehlermeldung, es kann sehr gut sein, dass jemand hat dies nicht erwartet. Und dann sollten Sie die richtige alarmieren Behörden und gehen Sie nicht weiter. So, jetzt euch hoffentlich verstehen ein bisschen mehr Geek-Spaß hier. [Gelächter] DAVID MALAN: Sie wissen, dass Sie ein Aussenseiter sind. Für die nächsten paar Jahren werden Sie sich erinnern die wenig Bobby Tables ist wegen dieser Karikatur hier. Also sollte man nicht vergessen, wie wir Kontextwechsel ein letztes Mal heute JavaScript. Wir haben relativ wenig ausgegeben Zeit auf der Syntax PHP denn es ist eigentlich Super ähnlich C. Und schön genug, JavaScript zu ist super ähnlich Cs Syntax sowie wir in sehen Nur einen Augenblick und wie wir siehe später in dieser Woche im Besonderen. Was Sie mit dieser Sprache tun können, obwohl, ist umso leistungsfähiger, vor allem mit APIs. Aber zuerst eine kurze Tour. Also eine, in JavaScript gibt es keine Hauptfunktion, das ist schön. Wie bei PHP, können Sie einfach Code schreiben. Bedingungen sehen wie folgt aus. Und Booleschen Ausdrücken vielleicht aussehen oder so. Schalter existieren, und sie könnte wie folgt aussehen. Vier Schleifen aussehen. While-Schleifen aussehen. Haben whiles aussehen. Und dann Arrays aussehen Dieses sehr ähnlich PHP. Aber beachten Sie, dass in JavaScript Sie deklarieren eine Variable nicht mit einem Dollar unterschreiben, nicht mit einem Datentyp, sondern buchstäblich sagen var für variable davor. Auch sie ist schwach typisierte dadurch gekennzeichnet, dass es Typen, aber Sie sind nicht explizit deklarieren sie nicht. Und dann ein String, für Beispiel aussehen wie diese, dass die String wobei in diesem Fall bezeichnet n. Und dann ein Objekt. Und diese werden wir mehr in Kürze sehen. Und eine Aufgabe ist vielleicht eine der am häufigsten gesehen Datenstrukturen in einem JavaScript-basierten Programm, weil es Sie assoziieren beliebige Schlüsselwertpaare nur wie PHP assoziative Arrays und gerade wie Ihr eigenes Hash-Tabelle oder versuchen Sie, wie wir umgesetzt ein paar Wochen zurück. Lassen Sie uns also tatsächlich sehen, was wir mit JavaScript tun können. Insbesondere ist dies eine kurze Liste der Features dass Browser, dass ermöglichen es uns, JavaScript Haken in eine Website in der folgenden Weise. JavaScript wird oft als ein gebrauchtes Client-Seite Skriptsprache. Es ist nicht kompiliert. Auch sie interpretiert wird. Aber im Gegensatz zu PHP, das in Betrieb war auf dem Server, in dem Web-Server, oder tief in die Kunden, JavaScript ist, dass es verschiedene läuft in der Regel in Ihrem Browser. Also jede JavaScript Code, den Sie mit dem Schreiben beginnen für PSet 8 oder das endgültige Projekt, oder in der realen Welt wird in der Regel gehen auf dem Server gespeichert werden, absolut in einem Punkt HTML oder Punkt JS für JavaScript-Datei. Aber der Browser wird zu, dass Javascript herunterladen Code eine eigene Instanz von Chrome, oder IE oder Firefox, oder was auch immer. Und der Code tatsächlich zu bekommen innerhalb des eigenen Browser ausgeführt. Nur um diese realer zu machen, Lassen Sie uns dies zu sehen in konkreter Form. Wir haben keine Ahnung, was dieser Code tut ohne wirklich zu lesen durch sie. Aber lassen Sie mich auf Facebook.com gehen ohne Anmeldung. Lassen Sie mich gehen, um Element inspizieren und gehen Sie zu, sagen wir mal, Netzwerk und laden die Seite neu. Und wir werden see-- lass mich verschieben Reload die Seite, um alle Anforderungen an neue zu bekommen. Und die erste Datei ich sehe, ist CSS, CSS. Hier ist der erste JavaScript-Datei, und ich habe Keine Ahnung, was das bedeutet, aber hier ist ein Teil der JavaScript-Code Das treibt Facebook. Es ist nicht einmal wirklich, dass enthüllt, um hineinzuzoomen. Es ist immer noch genauso unsinnig. Aber Sie selbst unten sehen werden, gibt es noch mehr dieser JavaScript-Dateien. Whoops. Das ist ein Ping. Gehen wir ein wenig nach unten ferner weitere, noch weiter. Es gibt eine. Es gibt eine. Es gibt eine. Also auch wenn Facebook, hinter dem Szenen, wird zum Teil in PHP geschrieben und Facebooks eigene Version davon, gibt es eine riesige Menge von JavaScript. Tatsächlich kann jedes der Chatten Sie bei Facebook zu tun, einem der Inline-Timeline-Updates dass in Echtzeit geschehen, all das wird durch JavaScript angetrieben. Ja? PUBLIKUM: Ich bin mir nicht sicher wenn dies Facebook, aber ich dachte, dass Facebook entwickelt ihre eigenen in-house-Code Sprache? DAVID MALAN: Sie taten. Also das ist, warum ich sage, eine Varianz von PHP namens Hip Hop, dass sie tatsächlich Komfortfunktionen, so dass, wenn Mark zuerst implementiert Facebook, es wurde in PHP geschrieben. Und diese Art von geblieben ist die Art von Frontend Sprache dass sie für viel nutzen ihrer Codierung, aber hat nicht eine Sprache, die ist schon Waagen besonders gut, um Milliarden von Menschen. Und so haben sie ihre eigenen hinzugefügt Verbesserungen hinter den Kulissen. Und sie beliebig verwenden von anderen Sprachen für verschiedene Stücke ihrer Infrastruktur. Also ja, es ist eine Varianz was wir heute als PHP kennen. Werfen wir also einen Blick auf ein paar Beispiele der, wie wir JavaScript hier verwenden. In der heutigen Quellcode, haben wir ein Reihe von Dateien, von denen die erste, lasst DOM Null bezeichnet. So DOM Null sieht wie folgt aus. Lassen Sie mich in diesem Verzeichnis abgelegt und eröffnen domzero.html, dessen Oberseite hat eine doc-Typ Erklärung, hier sage, kommt HTML 5. Und jetzt ist hier ein HTML-Tag. Hier ist der Kopf-Tag. Und hier ist, was es heute Neues. Wir haben jetzt eine script-Tag Innenseite der Kopf der Seite. Und dies offenbar tut sehr wenig, aber Bekanntmachung dass ich definiert habe ein Skript, eine JavaScript. Und als eine Seite, da diese ist ein verbreiteter Irrtum, JavaScript hat absolut nichts mit Java, der Sprache zu tun dass einige von euch vielleicht in APCS gelernt haben. Es war eher ein Marketing Sache als alles andere, reiten die Rockschöße von Java Jahren. Aber JavaScript nichts zu tun Java, nur ähnlich, und ärgerlicherweise Verwechseln benannt. Also hier ist, wie Sie eine Funktion deklarieren in JavaScript, wörtlich sagen Funktion, dann wird der Name der Funktion, dann keine Argumente, es könnte zu nehmen, genau wie in PHP. Stellt sich heraus, in JavaScript eine der ärgerliche Funktionen, die vorhanden ist Alert. Dies ist ein kleines Fenster, das öffnet sich und warnt Sie bis zu einem gewissen Teil der Information. Es ist allgemein verpönt. Aber wir werden es als nutzen Sie unser erste Übung hier. Beachten Sie ein paar Features von JavaScript. Einfache Anführungszeichen und doppelte Anführungszeichen eigentlich gar nicht mehr wichtig. Einfache Anführungszeichen und Doppel Quotes können untereinander ausgetauscht werden, während in C, zu benutzen müssen Sie Anführungszeichen für Streicher, und Sie zwei Einzel haben Zitate für chars. In der JavaScript Welt viele Menschen, die meisten Menschen verwenden einfache Anführungszeichen um Zeichenfolgen nur weil es eine stilistische Sache. Aber was ist der Plus-Operator hier die wir noch nicht gesehen haben? PUBLIKUM: Verkettung. DAVID MALAN: Verkettung. Also C hat noch nicht einmal dies. PHP hat den Punkt-Operator, was tut. JavaScript hat den Plus-Operator, Verwechseln ist wie Java. Nun, was ist denn hier los? Also hier ist, wo ein Grund Verständnis von diesem Bild wir warfen ein paar vor Tagen ins Spiel kommt. Angemeldet als wir eine einfache Version eines HTML page-- es gerade gesagt, hallo Welt. Und dann zog wir einen Baum auf der rechten Seite, die hatte eine Reihe von Rechtecken und Linien Verbinden sie wie ein Stammbaum. Also das ist der sogenannte DOM oder Document Object Model. Und es stellt sich heraus, dass Sie zugreifen können Rechtecke in diesem Baum mit Syntax wie folgt aus. Sie sagen, buchstäblich Dokument, das ein ist Sonder globale Variable in einer JavaScript Programm, das eine Funktion hat damit verbunden, dass Sie zugreifen können ähnlich einer Struktur, aber Sie einfach sagen Punkt und dann den Namen der Funktion, bekommen Element nach ID. Das Element möchte ich erhalten, ist anscheinend zitieren unquote Namen. Und dann will ich, um seinen Wert zu erhalten. Jetzt sind wir vor uns selbst bekommen. Ich bin mir nicht einmal sicher, was all dies geht. Lassen Sie uns schnell vorwärts zu der HTML-Datei auf die Seite, die super einfach ist. Beachten Sie, dass ich festgelegt habe Ein Formular hier unten. HINWEIS Ich habe es mit einer eindeutigen ID, auch wenn wir nicht verwendet haben dieses Attribut vor. Aber das gibt es in HTML. Sie können einige Brocken eindeutig zu identifizieren von HTML mit einem Bezeichner wie diese. Unsere jetzt this-- entpuppt HTML unterstützt, pro diesem Waschzettel vor einem Augenblick, eine ganze Bündel von Event-Handlern. Und dieser Event-Handler sagt auf einreichen. Auf der Benutzer Einreichung dieses Form, rufen Sie den folgenden Code. Und der Code, der vor sich geht aufgerufen oder ausgeführt werden Genau diese, die griechische Funktion gefolgt von return false. Alles andere sollte recht vertraut sein. Hier ist eine Eingabe vom Typ text, dessen ID, in diesem Fall wird sich Name sein. Wir haben nicht eine tatsächliche Namensattribut dies Zeit-- und eine Absenden-Button. Also die resultierende Seite sieht wie folgt aus. Und das resultierende Verhalten, Sie werden sehen, wie es aussieht. Die Seite es lokale Hosts sagt, hallo David, kaum eine ästhetisch ansprechende Möglichkeit, einen Benutzer zu begrüßen. Aber was ist eigentlich los? Nun, überlegen, was das ist. Dies ist ein Textfeld. Und nach dem HTML hier, ich habe es gegeben eine eindeutige Kennung genannt Zitat unquote Namen. Inzwischen habe ich gesagt, als der Benutzer dieses Formular abschickt mit ENTER oder Anklicken der Absenden Schaltfläche, rufen Sie die Funktion aufgerufen Greet und dann wieder False. Betrachten wir die in umgekehrter Richtung. Beachten Sie, wenn ich klicken Sie auf Senden, die URL dieser Seite ändert sich nicht. Symbol des Browsers nicht Spinnerei starten. Ich wollte nicht irgendwohin zu gehen, und das ist wörtlich, weil ich sagte, False zurück. False zurück Kurzschlüsse oder Anschläge das Standardverhalten eines Formulars. So dass dann lässt uns mit diese eine letzte Frage. Was bedeutet Greet zu tun? Nun, offenbar Greet ruft eine Funktion namens Alarm, geht in einem Lang Argument, das ist das Ergebnis zusammen eine Verkettung Bündel von Teilstrings, hallo Komma Raum, dann, was diese zurückgibt. Also Dokument ist wie eine globale Variable auf dieser Wurzel dieses Baumes, Aufruf einer speziellen Funktion, andernfalls jetzt als Verfahren bekannt. Eine Funktion, die es Innenseite eine Variable genannt Methode anstelle einer Funktion. So erhalten Element nach ID. Welche Element tun Sie wollen durch ihre ID zu bekommen? Zitat unquote Namen und dann spezifisch zu bewerten. Also mit anderen Worten, dass der Code einfach findet das Textfeld mit der ID Name und bekommt dann seinen Wert. Also, wenn ich das ändern und sagen Davin David Statt, und klicken Sie auf Senden, jetzt sind wir einen Gruß für Davin. Alles klar, so alles schön und gut. Aber mal sehen, ob wir machen können diese ein wenig sauberer, da nur Schreiben von Code wie dieser ist generell werde verpönt. Das wird gruseliger aussehen. Aber was ist das erste Unterschied, dass Sie hier zu beachten in dieser Ausführung neben der Namensänderung zu DOM ein? Was strukturell anders aussieht darüber gegenüber dem anderen? Ja? PUBLIKUM: Ist das Formular auf Anfang des Skripts jetzt? DAVID MALAN: Ja, ist die Form auf der Oberseite des Skripts für einige neugierige Grund. Also das ist das erste, was dass springt bei mir auch. Und glücklicherweise zumindest, dieser Teil ist identisch. So ist die einzige Sache, die scheint verschieden sein können, ist dies. Also hier ist was ist ordentlich über JavaScript 2. Und es macht es schwierig, verstehen, auf den ersten Blick, insbesondere für Abschlussarbeiten, wenn Sie Beispielcode suchen online, aber es läuft darauf hinaus, einige Grund syntaktische Merkmale. Auch hier ist, dass Dokument globale Variable. Auch hier ist das Verfahren oder die Funktion das sagt bekommen das Element von ID. Dieses Mal möchte ich Holen Sie sich die ID-Demo aufgerufen. Wo ist das? Das ist offenbar Recht Hier wird die Form selbst. Und jetzt feststellen, dass offenbar, wenn ich zurück, dass die Knoten aus dem Baum, stellt die Form selbst, nicht ein Textfeld, es stellt sich heraus, dass die Form, dass Knoten oder Rechteck aus dem Baum, hat das, was wir eine Eigenschaft nennen, sehr, sehr, sehr ähnlich im Geiste auf eine Struktur in C Es ist nur ein Datenelement innerhalb dieses Rechtecks. Also habe ich die Form habe hier, und ich bin Befestigung, oder ich zuweisen, um seine On Submit Handler oder vielmehr auf Eigentum inserieren die folgende Funktion. Und das ist bei weitem das verrückteste was bisher syntaktisch. Es stellt sich heraus in JavaScript und PHP, und ehrlich gesagt für diese Angelegenheit in C, auch wenn wir es nicht tun, können Sie hinzufügen namenlose, anonyme oder Alias ​​Lambda Funktionen, die nicht einen Namen haben aber dennoch aufgerufen werden. Also, was ich hier mache ist, ich bin Zuweisen Dieses On Submit Eigenschaft, die innerhalb dieses Knotens meiner DOM-Baum, ein Funktion, Funktionszeiger, wenn man so will. Diese Funktion hat keine nennen, aber das bedeutet nicht Rolle, weil wir sehen, in einem Moment, wie man es nennen. Wenn diese Funktion aufgerufen wird, Dieser Code wird ausgeführt, dann false wie vor zurück. Aber bemerken, was ich getan habe. An diesem Punkt in der Geschichte, ich habe ein Formular. Es hat eine eindeutige ID-Demo aufgerufen. Hier unten, ich habe ein Script-Tag dass führt den folgenden Code. Er kann an diesem Knoten in der Baum ist es auf Absenden Eigenschaft dieser Funktion hier. Und nur von der Natur, wie Browsern funktionieren, wenn ich jetzt klicken Sie auf Senden oder drücken Sie die Eingabetaste, diese Funktion werde gecallt. Es hat keinen Namen, weil die brauchen zum Teufel kümmert es, was es heißt. Das einzige Mal, es jemals zu bekommen genannt ist, wenn ich das Formular aus. Es gibt keine Notwendigkeit für mich, der menschliche Entwickler, tatsächlich nennen es anderswo. Jetzt nur als Teaser, als ob das wurden nicht dagegen genug Biegen, wir können sogar diese schauen mehr kryptische Verwendung ein super beliebt Bibliothek namens jQuery. In der Tat jQuery und JavaScript werden oft verschmolzen. Und was wir am Mittwoch tun ist Start mit diesen Sprache und Bibliotheken zu bauen zunehmend asynchronen und dynamische Anwendungen wie die Karte weiter Anwendungen, Anwendungen dass die Webseite in Echt aktualisieren Zeit, ähnlich wie Facebook oder Gchat zu tun, und uns nicht mehr darauf beschränken hitting Absenden durch eine get oder einfach nur Post allein. Also werde ich Ihnen am Mittwoch sehen. [Musik zu spielen]