>> [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?
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.
>> 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]