>> [Musikwiedergabe]
>> DAVID MALAN: Dies ist CS50.
Dies ist der Beginn der Woche neun.
Und das ist, was hätte war Mr. Boole 200. Geburtstag.
Das ist also die Kerle an die wir hingewiesen haben
durchaus einige Male über die Verwendung Booleschen Variablen wahr und falsch,
1 und 0 und solche.
Und das war die Google- Tribut heute zu ihm.
Er würde 200 eingeschaltet haben.
Also, wenn Sie möchten, besuchen Sie uns für CS50 Mittagessen
einen Blick auf den Link auf der Website der natürlich.
Und solche Gesichter und Freunde Diese erwarten Sie hier in Cambridge.
Gesichter wie diese erwarten Sie in New Haven.
Und in der Tat in Ken New Haven freundlicherweise
was heißt ein animiertes GIF von Eli hier bei einer aktuellen lunch-- ein GIF ist noch
weitere graphische Datei-Format, mit dem Sie familiar--, dass du
sieht ein wenig so etwas wie dieses.
Also nur eine Folge von-- OK.
Niemand hier in Cambridge lacht.
Aber in New Haven, diese ist wirklich lustig, nicht wahr?
Gut.
>> Also besuchen Sie uns dort.
Hier in Harvard, Insbesondere an diesem Mittwoch,
wenn Sie ein College-Student bist oder Freshman even-- oder sogar junior-- Denken Herstellung
ein Schalter in den Computer Wissenschaft, wissen, dass es werde
werden ein CS Beratung Messe in diesem Mittwoch, kurz nach Klasse
um 4:00 Uhr in der Computer- Wissenschaftsgebäude Maxwell Dworkin.
Wir werden dies auf dem Golfplatz zu setzen Website von morgen, wie gut.
Donuts, Mir wurde gesagt, serviert.
>> Gut.
So lustig story-- ich Stossen rund im Internet,
und ich fand einige alte Archive meiner ehemaligen Website.
Und es stellt sich out-- um dieses Zeit, scheint es sehr aktuell
da ich höre, dass die UC Wahlen sind dabei, das Getriebe wieder auf.
Also lief ich für UC, verlor kläglich.
Und vielleicht war dies zum Teil, warum.
Das war also meine Website zu der Zeit.
Aus irgendeinem Grund dachte ich, es war eine gute Idee, vor Leuten sagt,
was meine Plattform war und warum sie sollte für mich stimmen, dass sie
zu klicken, um in Kraft zu erfahren, dass Informationen, die in der Rückschau ist
irgendwie gruselig.
Ich weiß wirklich nicht, was das war.
>> Aber es ist sicherlich nicht helfen, meine Kampagne.
Ich fand auch, dass von Senior year-- Ich hatte diese Muppet Kalender.
Muppets waren irgendwie in Mode damals.
Oder vielleicht waren sie nicht.
Ich hatte ein Muppet Kalender damals.
Und ich dachte, es wäre cool, Name sein meinem Computer auf der Harvard-Netzwerk
frogman.student.harvard.edu.
Zu der Zeit hatten wir alle einzigartig identifizierbaren Hostnamen.
Und man konnte etwas Eitelkeit wählen Namen statt Ihrem eigenen Namen.
Und ich ging mit Froschmann aus irgendeinem Grund.
>> Und dann started-- I Ich verbrachte viel Zeit Klicken durch diese Links
heute Morgen.
Und das war mein zu Seite, die jetzt Art scheint liebenswert.
Aber es zeugt auch von einfach wie weit Technologie ist gekommen.
Ich meine, wieder in den Tag, a 486 war etwas.
In diesen Tagen, es ist super, super, super langsam und gut weniger
als Sie in haben könnte Ihre eigenen Taschen in diesen Tagen.
Es gibt noch mehr auf, dass es war noch peinlicher.
Also werde ich es dabei belassen.
Aber das war meine erste Vorstoß in web-- oh, nein.
Das war nicht.
Mein erster richtiger Ausflug in Web-Programmierung Hat Ihnen diese Seite, die ich nur vergessen.
Irgendwann habe ich gelernt, machen sich wiederholende Hintergrundbildern.
Und so fand ich diese Fliesen effektiv, wie Hockeyspieler, Fußball und Golf
Ball, oder was auch immer das ist für die Frosh IMs Website.
Und das war eigentlich wirklich die erste webbasierte Projekt nahm ich an--
Ich denke, vielleicht im zweiten Jahr Jahr junior year--
nach der Einnahme von CS50 und CS51, einer der gemeinsamen Folgeklassen.
Ich in der Suche aufgefallen, durch die Archive
dass einer meiner Nachfolger und Freunde, Lee, Art verändert
der Urheberrechts zu sich selbst.
Aber das war in der Tat etwas, das Ich sollte die Verlegenheit zu besitzen.
Aber zu der Zeit, diese war die erste Website,
wie ich schon sagte vor ein paar Wochen, durch welche Neuling könnte
registrieren Universitätssportarten hier.
Und so stellt sich heraus, dass die Hintergrundbilder
wie diese sind nicht so eine gute Idee.
Aber das Web war neu, und wir waren alle zu experimentieren.
Und das ist, was ich anscheinend zu der Zeit.
Gut.
So ohne weiteres, schalten wir Räder heute, um Ihnen, wirklich,
das letzte Stück, die Sie vielleicht finden besonders nützlich für Abschlussarbeiten
sondern auch, dass wird zu starten machen das ganze World Wide Web
fühlen sich ein bisschen mehr verständlich.
In der Tat werden wir einführen eine weitere Programmiersprache
genannt JavaScript, die ähnlich ist und auf unterschiedliche Weise verschiedene
von Sprachen haben wir bei bisher sah.
>> So C, Rückruf, ist dies kompilierte Sprache.
Man muss es durch einen Compiler laufen.
Sie erhalten Quellcode zum Objekt Code oder Nullen und Einsen.
Und das sind Nullen und Einsen, dass Ihre CPU, Central Processing Unit,
wirklich verstehen.
PHP ist dagegen nicht eine kompilierte Sprache.
Es ist ein, was?
Es ist eine interpretierte Sprache.
So gibt es einige Programm genannt, dass ein Dolmetscher
muss es-- oben zu lesen unten, links, um right--
und herauszufinden, was alle Ihre Syntax tut und bedeutet,
ob es eine Schleife oder ein Zustand, oder jede andere Anzahl von Programmier
Konstrukte.
Also das ist eine interpretierte Sprache.
>> Dann haben wir HTML.
Und HTML ist nicht einmal ein Programmiersprache.
Wir würden es, was anruft?
Eine Auszeichnungssprache, die gerade ist eine Art andere Art zu sagen es
keine Programmierkonstrukte wie wir sahen sogar wieder in den Tag von Scratch.
Es sind keine Schleifen.
Es gibt keine Voraussetzungen.
Es ist wirklich eine Sprache über Kennzeichnung Ihrer Daten
und Formatieren oder Strukturieren es in irgendeiner Weise.
>> CSS dessen ähnlich keine Programmiersprache.
Es ist noch mehr ästhetisch orientiert.
Und es erlaubt Ihnen, der Feinabstimmung zu sortieren Dinge wie Schriftgröße und Farben
und die Platzierung und das alles.
Dann hatten wir
>> SQL.
So SQL ist in der Tat ein Programmier Sprache, in gewissem Sinne,
wenn auch zugeschnitten speziell auf Datenbanken.
Aber auch wenn wir nur stellen Ihnen auswählen und einfügen und löschen und aktualisieren
und ein paar andere, stellt sich heraus, man kann tatsächlich
Schreibfunktionen oder Verfahren, wie sie sind
genannt wird, in SQL, die aussehen und handeln ganz wie PHP und C-Funktionen.
So wissen, dass diejenigen existieren.
Aber wir wissen nicht einmal mit ihnen die Mühe wie wir gerade an der Oberfläche kratzen hier.
Und dann JavaScript, der letzte unsere Sprachen offiziell vorgestellt.
So JavaScript ist auch eine interpretierte Sprache.
Und diejenigen, vertraut machen Sie, um es zu unterscheiden wollen
mit einigen charakteristischen sowohl von C und PHP?
Was macht es anders?
>> ZIELGRUPPE: Es ist nicht kompiliert.
>> DAVID MALAN: Sagen Sie wieder?
>> ZIELGRUPPE: Es ist nicht kompiliert.
>> DAVID MALAN: Es ist nicht kompiliert.
So ist es auch interpretiert wird.
Also ist es nicht kompiliert.
Aber das macht es ein wenig wie PHP.
Aber es ist immer noch anders PHP in einigen markante Art und Weise,
zumindest in der Art und Weise werden wir es nutzen.
Ja?
>> Publikum: Es läuft clientseitige.
>> DAVID MALAN: Es läuft Client-Seite, in der Regel.
Das ist in der Tat das Unterscheidungs charakteristisch für uns jetzt.
C war server-Seite im Lese dass wir alles in CS50 IDE.
PHP war bisher serverseitige insoweit
wie es auch bekommt interpreted-- nicht kompiliert, aber interpreted--
Innen CS50 IDE, was natürlich nur eine oder die Server in der Cloud.
>> Aber JavaScript, auch wenn Sie Sie gehen
es für, sagen wir, pset schriftlich zu starten acht und vielleicht endgültige projects-- Sie
werde es in der rechten CS50 IDE und speichern Sie es
in Dateien innerhalb CS50 IDE, CS50 IDE und im Gegenzug, die Cloud-Server
auf dem es Gastgeber, werden nicht zu interpretieren oder Ihren Code auszuführen.
Vielmehr, es wird in gesendet werden unveränderter Form bis in den Browser.
Und es ist dann werde IE sein oder Chrome oder Firefox oder Safari
oder was auch immer, dass tatsächlich interpretiert es, von oben nach unten, von links nach rechts.
So ist der Schlüssel Scheidungs charakteristisch für heute
ist, dass JavaScript ist clientseitige und PHP, zum Beispiel,
hat gewesen serverseitige.
Nun hat dieses interessante Implikationen für die, wie, geistiges Eigentum
und wer tatsächlich sehen, können Sie Ihren Code.
Und in der Tat, können Sie gehen im Web und sehen die meisten
jeder Code, dass jemand in JavaScript geschrieben.
Manchmal ist es lesbar, Manchmal ist es verschleiert.
Aber mehr dazu rechtzeitig.
>> So JavaScript, schön genug, Super-ähnlichen, syntaktisch, um C.
Und ähnlich wie PHP, es gibt keine Hauptfunktion.
Wenn Sie mit dem Schreiben beginnen möchten JavaScript-Code, wie Sie heute sehen werden,
Sie gerade anfangen zu schreiben.
Aber es ist, du wirst sehen, vor allem nützlich im Zusammenhang mit Web-Browsern.
Aber mein kleiner disclaimer-- Regel earlier--
war zu sagen, dass man zunehmend verwenden heute JavaScript serverseitige
mit einem ausgefallenen Rahmen genannt Node.js dass einige der CS50 eigene Anwendungen
werden in schriftlicher.
Prüfen 50 tatsächlich verwendet Node.js.
Aber wir werden den Schwerpunkt auf JavaScript clientseitige hier an heraus.
>> So, hier ist eine Reihe von Bedingungen in PHP.
Sorry, in-- eigentlich, dass Aussage auch korrekt ist.
Hier ist auch eine Reihe von Bedingungen in JavaScript.
Syntaktisch ist es identisch mit C und PHP.
Mr. Boole'schen Ausdrücke sind, Ähnlich syntaktisch
identisch mit sowohl C und PHP.
Wir haben auch Schalter JavaScript, die identisch aussehen.
Wir haben für die Schleifen, die sind identisch aufgebaut,
While-Schleifen, do while-Schleifen.
>> Das hier ist ein wenig anders.
PHP hatte der für jedes Konstrukt dass Sie vielleicht mit
oder wird in pset sieben verwenden, vielleicht.
JavaScript muss diese spezielle Version für, wo Sie buchstäblich etwas sagen
wie für die Variable Schlüssel-Objekt, das ist eine sehr prägnante Art zu sagen,
wenn ich eine object-- bekam und wir schicken reden über diese in einem moment-- wieder
und ich will über alle zu durchlaufen der Schlüsselwertpaare im Inneren,
Ich habe nicht herausfinden, wie man numerisch Index sie mit null, eins,
zwei drei.
>> Ich kann buchstäblich sagen.
Und bei jeder Iteration, JavaScript für mich wird die Variable Schlüssel aktualisieren
der erste Schlüssel, dann wird der nächste Schlüssel, dann die nächste Taste, dann die nächste Taste,
und so weiter.
Und ich kann an seinem Wert nach der Behandlung erhalten ein Objekt in JavaScript, wie wir sehen werden,
als ob es sich um eine assoziativen Array in PHP.
In der Tat, wenn Sie endlich Ihre gewickelt dagegen um, was ein assoziatives Array ist
in PHP, die Sie von ihm für jetzt als denken können identisch zu einem Objekt in JavaScript.
Aber das ist ein bisschen wie eine zu starke Vereinfachung.
>> Arrays aussehen, schön genug, identisch außer für ein Zeichen PHP.
Es gibt eine Sache fehlt hier dass wir sahen in der vergangenen Woche mit PHP.
Was ist weggelassen?
Ja?
Kein Dollarzeichen.
Also sind wir zurück auf ein mehr normale Welt,
Variablen haben keine Dollarzeichen.
Aber Sie voran ihnen zu tun mit var, in der Regel.
Und var bedeutet variabel.
Und ähnlich wie PHP ist lose typed-- wobei es Typen,
gibt es Zahlen und Strings und schwimmt und so forth--
JavaScript muss in ähnlicher Typen.
Aber es ist lose in das typisierte wir die Programmierer nicht haben, um sie festzulegen.
Wir müssen nur bewusst sein, dass unterschiedliche Arten existieren.
>> Variablen, hier ist, wie meanwhile-- wir könnten erklären, "Hallo, Welt"
als String zurück.
Beachten Sie, es ist identisch mit PHP aber keine Dollarzeichen.
Und das ist etwas, das wir starten Sie sehen heute mehr,
wobei man ein Objekt haben mit Schlüssel und Werte.
Und wenn Sie wollen versuchen um von den letzten week-- schließen
die Syntax ist ein wenig anders.
Aber ein wenig Vernunft check--, wie viele Schlüssel hat diese Aufgabe zu haben scheinen?
So sehe ich vier.
Ich sehe zwei.
>> So ist es eigentlich zwei.
Das ist also eine Sammlung zwei Schlüssel-Wert-Paaren.
Der Schlüssel ist, Symbol, dessen Wert FB.
Der Schlüssel ist der Preis, dessen Wert 101,53.
Das sind also zwei Schlüssel-Wert-Paaren.
Und denken Sie daran, PHP-- und dies ist wieder gerade Art von syntaktischen Unterschied.
Es ist nicht alles, intellektuell interessant.
PHP könnte diese gleiche geschrieben haben etwas wie follows-- Quote entspricht.
Und ich diese ändern, um eckige Klammern.
Und dann habe ich dies zu ändern a zitierten Wort "Preis."
Und dann kann ich nicht mit einem Doppelpunkt.
Was habe ich letzte Woche?
Ja, das Gleichheitszeichen arrow flippige Notation.
>> Und dann habe ich die gleiche Sache hier.
Die gleiche Sache hier.
Und das ist alles.
So ist es in Ordnung, wenn dies noch nicht wirklich in den Speicher versenkt gerade
noch, weil es wirklich intellektuell uninteressant.
Es ist nur syntaktische Unterschiede.
Aber die Ideen sind genau die gleichen.
Innerhalb dieses variablen Zitat in JavaScript
ist eine Sammlung von Schlüsselwert-Paaren, einer davon ist ein Symbol, von denen
ist der Preis.
Und ich kann auf diese Werte zu erhalten mit der folgenden Syntax.
Genau wie in PHP, konnte ich tun Sie etwas like-- lassen
mir machen diese Box ein wenig größer.
Genau wie in PHP, konnte ich machen this-- oh, verdammt.
Komm schon.
>> Genau wie in PHP-- OK, wir benutzen Sie einfach die Moderatornotizen.
Genau wie in PHP, kann ich DO $ Zitat $ Zitat ["symbol"],
und das wird mir der Wert von "symbol".
In JavaScript, es geht zu sein identisch, wobei ich nur tun.
Das einzige, was ist fehlt, ist der Dollar-Zeichen.
>> So schön genug ist, dann gibt es gar nicht so viel neue Syntax.
Also, was heute konzentrieren wir uns auf, wirklich, einige der Ideen und der Anwendungen.
Und die erste derartige Anwendung, die Sie
haben gesehen, wenn Sie pset getaucht sieben bereits ist diese Syntax.
So in pset sieben, wenn Sie schon gesehen oder es noch nicht gesehen,
wissen, dass es eine Datei, die wir geben Sie config.json-- JavaScript genannt
Object Notation.
Warum?
Wir wollten in der Lage, Ihnen zur Verfügung zu stellen eine Vorlage mit einigen Schlüssel-Wert-Paaren.
Wir wollten in der Lage Ihnen eine Liste zu geben des Wirtes, der Name des Servers.
Wir wollten Sie ein zu geben Platzhalter für Ihren Benutzernamen
und ein Platzhalter für Ihr Passwort ein.
Wenn Sie nicht sehen, dies doch keine Sorgen machen.
Mehr dazu in pset sieben [? spec. ?] Und dann,
offensichtlich, möchten wir Sie in der To-Dos zu füllen
denn wenn man sich anmelden CS50 IDE, jeder von euch
Ihren eigenen Benutzernamen und Passwort.
>> So konnten wir ein halbes Dutzend benutzt habe oder mehrere verschiedene Dateiformate.
Wir könnten eine .txt-Datei verwendet haben.
Wir könnten verwendet eine CSV-Datei.
Wir könnten verwendet habe, ein INI-Datei, eine XML-Datei,
eine ganze Reihe mehr Akronyme, Sie je gehört haben könnte.
Es ist eine Art willkürlicher am Ende des Tages.
Aber super beliebt in diesen Tagen ist eine Text Format namens JSON-- JavaScript Object
Notation--, dass wie folgt aussieht.
Es ist ein wenig kryptisch, aber beachten Sie die Muster.
Sie beginnen mit einer öffnenden geschweiften Klammer, und Sie am Ende mit dem gleichen.
Innenseite das ist etwas.
Es ist ein Schlüssel-Wert-Paar.
Das ist also ein Objekt, das bin ich Blick auf auf dem Bildschirm hier
das hat eine Taste, die einen Wert hat.
Und basierend auf den Folgern vorherige Muster, was ist der Schlüssel hier?
Database, dem, was zu die links vom Doppelpunkt.
>> Nun geschieht Wert ist ein mehrere Zeilen dieser Zeit.
Aber der Wert mit einem lockiges beginnt Klammer und endet mit einer geschweiften Klammer.
Also, was würden Sie vorschlagen, ist die Typ des Wertes der Datenbank?
Ein Wörterbuch oder, nur mehr kurz und bündig, ein Objekt.
Recht?
Dies ist eine Art eine Datenstruktur, können andere Strukturen in sich zu nutzen.
Also, wenn diese ganze Sache wir sind Aufruf eines object-- und ein Objekt
ist nur ein Haufen von Schlüssel-Wert-pairs-- die Wert der Datenbank selbst ist ein Objekt.
Der Wert der Datenbank verfügt über eine ganze Reihe der Schlüsselwertpaare, von denen die erste
ist Gastgeber, dann nennen, dann Benutzernamen und dann vergessen,
enthält, deren jeweilige Werte dessen ist es nur eine langweilige Zeichenkette in Anführungszeichen.
>> Also selbst wenn das nicht Super Clear nur noch,
wissen, dass dies nur ein Standard, ziemlich langweiligen Weg
Speichern von Daten in einem Standardformat.
Aber die häufigsten Fehler, die Sie vielleicht machen, auch in pset sieben,
sind kleine dumme Dinge, wie wenn Sie das Komma es versehentlich auslassen.
Das wird in der Datei führen nicht lesbar.
Wenn Sie versehentlich Dinge wie das weglassen Zitate, wird es nicht lesbar zu sein.
So ist es ein ziemlich pingelig Dateiformat, aber es ist eine, die Super gemeinsame ist.
Und wir passieren, es zu benutzen, auch wenn Sie verwenden keine JavaScript andernfalls
in pset sieben.
>> Gut.
Also dieses Bild erinnern.
Wir haben darüber gesprochen, in HTML, dass Der Code könnte wie folgt aussehen.
Dies ist der Hypertext Markup Language [Unverständlich] für nur "Hallo, Welt."
Aber dann haben wir vorgeschlagen, ein Weile zurück, dass, wenn es hilft,
möchten Sie vielleicht anfangen, über dieses bereits als Baum.
In der Tat, die Vertiefung, die wir verwenden nur zur besseren Lesbarkeit willen
oder für Stil willen auf die linke Art kann
in diesem Baum, wo Sie übersetzt werden haben einige spezielle Wurzelknoten, dass wir
allgemein als Dokument, unter dem ist die Wurzel HTML-Element oder Tag, HTML,
die dann über zwei Kinder, Kopf und Körper.
>> Und dann wiederum hat den Kopf eines Titels.
Und Titel hat eine Textwert.
Und Körper in ähnlicher Weise einen Textwert.
Also, wenn Sie bequem sind Sprichwort dass ja, man könnte diesen HTML nehmen
und zeichnen Sie ein Bild wie Dazu ist die rechte Seite
ist eine schöne mentales Modell, denn jetzt dass wir JavaScript ein Programmier
Sprache, Browser können auszuführen und zu interpretieren, für Sie,
es stellt sich heraus, dass das, was Wir sind dabei, im Code zu tun
wird beginnen, diese zu manipulieren Baumstruktur im Speicher.
Wir haben nicht zu bauen der Baum im Speicher.
Wir haben nicht eine Art zu tun pset-five-style-Datenstruktur
Komplexität.
Der Browser, schön genug, auf Interpretieren HTML oben nach unten,
links oder rechts, ist buchstäblich werde Hand uns das Äquivalent eines Zeigers
in diesem gesamten Baum kostenlos.
Er tut all die harte Arbeit.
Das ist, was Mozilla und Apple und andere haben für uns getan.
>> Und JavaScript werden wir in der Lage, zu kontrollieren und zu ändern und zu tun
interessante Dinge zu dieser Baum, sonst bekannten
als DOM oder Document Object Model.
Welche Arten von Dingen?
Nun stellt sich heraus, dass in JavaScript gibt es
Diese kurze Liste der Ereignisse, die stattfinden kann.
Und wir haben nicht wirklich benutzt Wort der Woche, da Null und pset
Null, wenn wir sprachen über Scratch.
Die meisten von euch wahrscheinlich nicht genutzt haben ein Ereignis in Ihrem Scratch-Projekt.
Aber Sie sich vielleicht erinnern der einfache Marco Polo
beispielsweise, wo wir zwei hatten Sprites, von denen sagte Marco.
Die andere, von denen dann auf Zuhören und zu hören, dass die Veranstaltung, sagte, Polo.
Wenn nicht, fühlen sich frei, Blick zurück, dass weit zurück.
>> Aber das ist nur um sagen, und Sie können Art
folgern aus den Namen von diesen Dinge, JavaScript, es stellt sich heraus,
wird uns einen Weg, um zu hören geben für die Maus nach unten gehen oder Maus hinauf
oder Schlüssel hinunter oder Schlüssel nach oben oder onsubmit onselect
oder onresizing etwas.
Mit anderen Worten, jede physikalische Einwirkung dass ein Mensch mit einem Browser zu nehmen
dass Sie jeden Tag tun, können Sie schreiben Code für das hört für diese Ereignisse
und tut dann etwas Passendes.
>> Zum Beispiel, wenn Sie Google Maps, was passiert, wenn Sie klicken und bewegen
die Maus, in der Regel?
Wenn Sie klicken und ziehen?
Ja?
Genau.
Über die Karte zu bewegen beginnt.
So können Sie eine Art sehen, was hier, was ist da drüben.
Und wie funktioniert Google zu implementieren, dass?
Nun, vermutlich sind sie mit ein paar dieser Veranstaltung
Zuhörer, eine, sagt, hören Sie auf der Maus
down-- so, wenn der Benutzer physikalisch drückt seine Trackpads oder dessen Maus
nach unten.
Und dann werden wir suchen so etwas wie Bewegung
oder ein anderer Fall, dass ermöglicht es uns, ziehen Sie zu erfassen.
Und in der Tat ist in ähnlicher Weise in dieses Schlepp Punkt Punkt Punkt Liste der möglichen Optionen.
>> Also das sein wird, ein leistungsfähiges Möglichkeit zum Starten der Reaktion auf den Benutzer
noch bevor er oder sie tatsächlich Klicks etwas expliziter wie vorzulegen.
Aber wir werden die Einführung ein paar Themen, um dorthin zu gelangen.
Aber zunächst wollen wir Übergangs bis zu einem gewissen eigentlichen Code.
Also werde ich gehen vor und eröffnen dom-0,
Das ist ein sehr einfaches Beispiel hier, dass, wenn ich Bilder in einfach
hat diese Eingabe hier für mich.
Und ich werde weitermachen und geben Sie "David" für meinen Namen, und klicken Sie auf Absenden.
>> Und dann, wenn auch Art von billig, I haben diese Aufforderung, das erscheint, die besagt,
"Hallo David!"
So ist diese Art von wie unser "Hallo Welt"
dass wir eine Weile zurück in C hat und auch in PHP, weil ich dynamisch
ausgegeben meinen Namen.
Ich kann den Namen jemand anderes tun.
Ich konnte einfach, dies zu ändern, wie, Hannah, klicken Sie auf Senden.
Und in der Tat, die kleinen Pop-up-Änderungen.
>> Jetzt sind Pop-ups eine der am meisten missbrauchte Merkmale des Web.
Und in der Tat zurück in die Tag Popup-Blocker
in Mode kam, weil Sie würde zu einem gewissen website-- gehen
vielleicht eine fragwürdige place-- das wäre dann plötzlich
starten peppering Bildschirm mit einem ganzen Bündel von Pop-ups.
Und so diese Fähigkeit, Pop-up- Fenster vor dem Benutzer
ist nicht besonders gewesen von der Menschheit gut aufgenommen.
Also das ist, warum Sie zu sehen dies zu verhindern, was,
das nur macht die ganze Sache hässlich.
So werden wir einen Bedarf bessere Möglichkeit, den Benutzer aufzufordern.
Aber jetzt scheint es, dass, um zu arbeiten.
Also einfach intuitiv, was scheint hier geschehen?
Ich gehen Sie vor und klicken Sie auf Senden, und dann ist etwas passiert, klar.
Aber was ist nicht passiert, dass geschah letzte Woche jedes Mal wenn ich geklickt verfassen?
Was nicht auf dem Bildschirm passieren?
Es tut uns leid?
Seite neu laden.
Die URL überhaupt nicht ändern.
Ich sagte, dies sei dom-0, und ich bin immer noch im Dom-0.
Normalerweise würden wir zu einem anderen umzuziehen URL wie register.php oder dergleichen.
>> Aber selbst, wenn ich entlassen dieses Ding, indem Sie auf OK,
feststellen, dass der URL bleibt komplett gestellt.
Und in der Tat, wenn ich ein wenig skeptisch, lassen Sie mich eröffnen Chrome.
Lassen Sie mich öffnen die Registerkarte Netzwerk.
Und beachten Sie, es ist leer im Moment.
Lassen Sie mich gehen Sie vor und erneut Maria.
Es gibt keinen Netzwerkverkehr immer.
Es gibt also keine HTTP.
>> Also ja, wenn ich mir den Quelltext für this-- lassen Sie mich dieses Fenster zu schließen
und gehen Sie auf Quelle anzeigen.
Interessante.
Es sieht aus wie es einige Neue Etiketten, darunter Skript.
Werfen wir also einen Blick in CS50 IDE genau, was ich geschickt an den Benutzer.
>> So, hier ist ist-- lassen konzentrieren sich auf nur die HTML.
Hier ist die untere Hälfte der dom-0.html.
Und beachten Sie, dass es einen Titel hat, ein Kopf-Tag, ein Body-Tag, ein Formular-Tag.
Aber was springt für Sie als anders, vor allem wenn Sie noch nie habe
geschrieben beliebige JavaScript-sich.
Lassen Sie mich ein wenig blättern nach rechts hier.
Ich habe einen Eingang hat, ein weiterer Eingang für vorzulegen.
Ich habe eine ID, welche Art von neuen ist bekam.
Aber wir konnten sehen dies mit CSS.
Was ist auf jeden Fall neu?
Ja?
Nett.
>> Gut.
Also, wo onsubmit sagt, dass es, bemerken, was scheint zu folgen.
Dies ist ein Attribut in HTML-Nomenklatur.
Sein Wert ist diese Zeichenfolge in Anführungszeichen hier.
Und das sieht ein wenig seltsam auf den ersten Blick.
Es ist nicht HTML.
Es ist nicht CSS.
Dies ist, wie Sie sich vorstellen können, JavaScript.
So scheint es, dass in diesem gebaut Web-Seite ist eine Funktion mit dem Namen zu begrüßen.
Und ich, die nur folgern denn es ist ein Wort, zu begrüßen.
Es hat eine offene paren, close paren, Semikolon.
Sieht aus wie ein C-Funktion, sieht aus wie eine PHP-Funktion.
>> Und in der Tat, es ist zu gehen ist eine JavaScript-Funktion.
Dann bin ich der Rückkehr false.
Wir kommen wieder zu kommen dass in nur einem Augenblick.
Aber wo ist diese Funktion definiert?
Nun lassen Sie mich nach oben an den Anfang der Datei.
Und auch wenn es eine lange Schlange, es ist relativ einfach.
Lassen Sie mich hier und herauszoomen konzentrieren sich auf diese vier Linien.
>> So in JavaScript, so wie PHP, die Sie gerade
sagen wir, buchstäblich das Wort "Funktion" der Name der Funktion,
und dann Klammern mit irgend arguments-- keine Argumente in diesem Fall.
Und es gibt keinen Rückgabetyp in JavaScript, genau wie PHP.
So ist es ein wenig lockerer als C. Öffnen Sie geschweifte Klammer, in der Nähe geschweifte Klammer.
In JavaScript Erbaut ist ein function-- keine empfohlene function--
sondern eine Funktion namens alert deren einziger Zweck im Leben
ist, dass ziemlich hässlich, um nach oben ziehen auffordern, dass wir vor einem Moment sah.
>> Nun, das ist eine Art, einen Schluck.
Was ist denn hier los?
Lassen Sie uns also beginnen, Markieren Sie hier alles.
Das ist das gleiche Argument, um zu alarmieren.
Und was ist denn los?
Dies sieht aus wie eine Saite.
Und es zeigt sich, anders als PHP und Gegensatz C, spielt es keine Rolle, in JavaScript
wenn Sie einzelne oder doppelte Anführungszeichen.
Sie werden gleichwertig sein.
Und ehrlich gesagt, es ist nur, beliebt in diesen Tagen
für JavaScript-Programmierer immer einfache Anführungszeichen aus irgendeinem Grund.
Es ist nur die Sache zu tun.
Aber wir doppelte Anführungszeichen verwenden, wie gut.
>> So plus ist ein neues Zeichen.
Aber diejenigen, die getan haben, dies vor, was bedeutet zzgl das?
Ja.
Verketten.
So sahen wir dies in PHP.
Es ist nur der Punkt Operator in PHP, dass
werden zwei Strings miteinander zu verketten.
C war ein Schmerz im Nacken, dies zu tun.
Rückruf von pset sechs, das war ein besonderer Schmerz im Nacken,
müssten Sie verwenden so etwas wie strcat
Nach Zuweisung von Speicher auf dem Stack oder dem Heap.
Sie musste durch Reifen springen um nur zwei Strings verketten.
In JavaScript, es ist super einfach.
Verwenden Sie einfach die Plus-Operator zwischen ihnen.
>> So ist die komplexe schau Sache, scheint dies zu sein,
da am Ende Diese ganze Reihe, ich habe gerade
verketten auf einem Ausrufezeichen.
Also, wenn, was auftauchen wurde "Hallo, David", "hallo, Hannah,"
"Hallo, Maria," und so weiter, klar dass Mittelding zwischen den beiden
Pluspunkte müssen mir den Zugang zu dem, was geben?
Was ist da drin sicher?
Ja.
Also werde ich hier die vorgibt antworten ihren Namen, nicht wahr?
So ihr Name tauchte in der letzten Ergebnis. Also, was bedeutet das?
Nun, dass ich bereits vorgeschlagen Bild, das die sogenannte DOM
hat diese spezielle Wurzelelement Weg bis oben genannte Dokument.
Und nun stellt sich heraus, das wird um eine spezielle globale Variable sein
in JavaScript, in die eine ist gebaut ganze Reihe von nützlichen Funktionen.
Unter den nützlichen Funktionalität ist die Fähigkeit, zu jeder Nachfahre-Knoten zu erhalten.
Diese Quadrate oder Rechtecke oder Ellipsen sind nur die Knoten in einem Baum, so zu sprechen.
>> So stellt sich heraus, dass in gebaut JavaScript ist Dokumentobjekt
ist eine Funktion, die auch als eine bekannte Verfahren, das nennt man getElementById.
Die Syntax für den Aufruf eine Funktion in JavaScript
Sie, die innerhalb eines Objekts oder Variable ist nur mit der Punktnotation.
Und wir in C sah dies was die Struktur Syntax.
Sie sehen dies in pset sieben, Art, Art, wenn Sie sehen, CS50 :: Abfrage.
Der Doppelpunkt Doppelpunkt in PHP ist eine weitere Art der Aufruf einer Funktion, die ist
innerhalb eines Objekts.
>> Aber jetzt in JavaScript, es ist nur ein Punkt.
Und so diese Funktion, schön genug, Art der
sagt, was es does-- Element ID zu bekommen.
Ein Element ist nur ein anderer Name für einen Tag oder Knoten im DOM.
Und so bekommen Element ID "name" bedeutet this-- hier ist mein HTML.
Und auf der Grundlage dieser HTML, was Knoten oder welche HTML-Tag bin ich
werde programmübergeben werden durch den Aufruf document.getElementById?
>> Ja genau.
Ich werde die Eingabe erhalten Element dort mit der ID "name".
So Insbesondere können Sie denken Sie an dieser Funktion,
GetElementByID, als eine Möglichkeit zu geben sichern einen Zeiger auf diesen bestimmten Knoten
im Baum.
Wir haben noch nicht gezogen Baum, aber es ist ein Weg
des Erhaltens Zugriff darauf Rechteck oder das Rechteck
durch eindeutig identifiziert sie über ihre ID.
>> Nun, warum ist das sinnvoll?
Nun stellt sich heraus, dass, sobald Sie bekommen haben
dass der Knoten, die sich aus dem Rechteck Bild, dass der Knoten in der es,
wiederum hat eine ganze Reihe von properties-- Schlüsselwertpaare
oder Daten, von denen die eine genannte Wert.
So wörtlich, es ist ein bisschen eine Mund voll, die ganze Sache zu erklären.
Aber am Ende des Tages, all dies tut, ist Ihnen
eine Zeichenfolge, die der Benutzer eingegeben in dieser hierarchisch.
Aber ich weiß nicht wie ein Einige dieser Dinge.
Oder besser gesagt, es gibt einige Neugier noch.
Das alles schien zu funktionieren.
Warum denken Sie, ich zurück Falsch nach dem Aufruf zu begrüßen?
Dies sieht ein wenig hässlich, dass Ich habe zwei Erklärungen gibt
durch Semikolon getrennt.
Raten Sie mal.
Wenn ich entfernt return false, was passieren könnte, nur instinktiv?
Sorry, noch einmal sagen?
>> Öffnen Sie eine Reihe von Windows.
So möglicherweise vielleicht etwas wie das passieren würde.
Was sonst?
Könnte eine Anforderung, wo verfassen?
Auf der gleichen Seite.
So, in der Tat, dass diese die hier näher zu beantworten,
obwohl, anders in der Vergangenheit, ich habe nicht
spezifiziert das Attribut action, die normalerweise wir tun müssen.
Stellt sich heraus, es gibt einen Standardwert. Wenn Sie keine Aktion angeben,
Es ist wie gesagt Zitat, Zitat Ende oder den Namen der Datei selbst,
die in diesem Fall würde sein wie dom-0.html.
Es ist nur irgendwie abgeleitet, oder vielmehr stillschweigend.
>> Und so, wenn ich nicht das tun, wollen wir bemerken.
Lassen Sie mich dies zu speichern.
Und ich habe return false entfernt.
Lassen Sie mich wieder in dieses Beispiel und Kraft wieder einlegen.
Und Sie vielleicht gesehen haben mir vorschlagen Diese auf CS50 Diskutieren ein paar Mal.
Wenn überhaupt jemals handeln funky und die Browser ist nicht so verhält, wie Sie erwarten,
oft werden Sie halten möchten Umschalttaste und klicken Sie auf Neu laden.
Das wird jede Datei zu zwingen, neu zu laden und nicht mit lokalen Cache Ihres Browsers
oder kopieren, so dass jetzt, lass mich gehen Sie vor und öffne meine Inspektor die Registerkarte Netzwerk.
Ich werde Sie auf Preserve Log, weil ich
will es nicht, um die Zeilen zu löschen wenn ich einmal weg anderswo entführt.
>> Lassen Sie mich vor hier zu gehen und Typ in Andi, klicken Sie auf Senden.
Gut.
Das scheint wie erwartet.
Er sagt, "hallo, Andi."
Lassen Sie mich Sie auf OK.
Interessante.
Beachten Sie, dass die Seite gewechselt, wenn auch in der Originalseite.
Beachten Sie die URL Art verändert.
Er fügte hinzu, ein Fragezeichen, die in der Regel ein Indikator
dass wir versucht, etwas vorzulegen.
Und dann an der Unterseite, noch deutlicher,
hier ist die eigentliche HTTP-Anforderung, die eine Antwort von 200 Got That
brachte mich wieder hier.
>> Das ist also nicht das, was wir wollen, das Richtige zu tun?
Weil ich nicht möchte laden Sie die ganze Seite.
Ich wollte, anstatt zur Rückkehr falsch, um Kurzschluss
Standardverhalten des Browsers, die war natürlich, um die Seite zu stellen.
>> Werfen wir also einen Blick auf ein marginal besseres Beispiel.
Dies ist dom Version eins.
Und beachten Sie die folgenden.
Es ist in Ordnung, wenn Sie nicht wissen grok alle Codezeilen.
Aber was grundlegend anders ist über diese Umsetzung?
Ich werde vor, es verhält sich der gleichen, macht das Gleiche.
Was habe ich natürlich anders gemacht?
Ja?
>> ZIELGRUPPE: [unverständlich].
DAVID MALAN: Ja.
So die Funktion definiert differently-- mit anderen Worten, fehlen in der Form,
dort oben auf der Linie 7-- oder vielmehr Linie 8-- nicht mehr
habe ich die onsubmit Attribut.
Im vorherigen Beispiel, hatte ich dies.
Und dann habe ich wörtlich schrieb mein Code hier.
Und dann sagte ich wieder falsch.
Und wenn es nicht reiben Sie verkehrt noch,
sollte es zu starten, sofern so, wie in HTML,
als wir begannen, zusammen zu mischen es mit CSS in Stilattribute,
es gerade erst begonnen, um ein wenig zu bekommen chaotisch oder fühlen sich ein wenig falsch.
>> Ebenso hier, wenn Sie nehmen HTML-Startseite,
und dann werden Sie automatisch plop JavaScript-Code
in der Mitte einer Zeichenfolge in Anführungszeichen, es ist nicht zu sehr wartbar.
Recht?
Es ist nicht auf den ersten noch auf der Hand Ort, wo das JavaScript-Code ist.
So wäre es wirklich schön, wie ein Grundsatz der besseren Design,
Halten wir die HTML komplett getrennt von unseren JavaScript.
>> So, das zu tun, was wir hier ist der following-- getan
wir einfach nur HTML-Markup.
Und so in der Version eines dieser, alle Ich habe eine Form mit einer eindeutigen ID.
Und dann hier unten, ich bin unter Ausnutzung einer Besonderheit JavaScript
wobei ich haben kann, was ist rief eine anonyme Funktion.
So stellt sich heraus, dass, wenn ich rufe document.getElementById der "Demo"
das ist, wie er mir einen Zeiger auf dieser Knoten in meinem Baum, der Formularelement,
sozusagen.
>> Nun, ich weiß nur, von zu wissen, ein wenig HTML
jetzt sind wir mit etwas online zu lesen Referenz, dass ein Formularelement unterstützt
eine ganze Reihe von Event listeners-- in Mit anderen Worten, die Wäsche Liste der Ereignis
Zuhörer, die wir vorhin gesehen haben.
Ich weiß, dass das Lesen der Dokumentation dass onsubmit ist ein gültiges Ereignis
Listener für ein Formularelement.
>> Also, wenn ich weiß, dass, es ist sicher für mich zu tun
die following-- diesen Knoten erhalten von dem Baum, dem Formularelement,
und um in die so genannte onsubmit Eigentum.
Also der Punkt bedeutet nur, Dies ist eine Eigenschaft,
wie ein spezieller Wert darin.
Und was für Datentyp bin ich Zuweisen, offenbar,
um onsubmit, das ist, effektiv eine Variable innerhalb
dieser Knoten im Baum?
Es ist ein Feld innerhalb dieser Struktur.
Was ist in der Datentyp?
>> Eine Funktion, yeah.
So stellt sich heraus, dass PHP hat diese.
Und auch wenn wir nicht darüber sagen,
C hat auch Funktionszeiger, die Fähigkeit zu übergeben, und weisen Funktionen
als Werte Variablen 'selbst.
Und wir werden nicht zurück zu C. zurückbilden
Aber jetzt stellt sich heraus, dass auf der rechten Seite Hier
obwohl es ein wenig sieht flippig, dieses Mittel, hey-Browser,
geben Sie mir eine Funktion.
Ich werde nicht einmal die Mühe geben ihm einen Namen, weil ich buchstäblich
gehen zu ordnen nennen wir es die Adresse dieses Funktions
sofort onsubmit.
Mit anderen Worten, Browser, brauchen Sie nicht zu wissen, was diese Funktion nennt.
Sie müssen nur wissen, wo es im Speicher.
Und so reicht es aus, nur um haben ein Gleichheitszeichen gibt
und nicht zu stören Benennung dieses, wie foo oder zu grüßen oder ein anderer Begriff.
Und jetzt ist dies nur eine stilistische Sache.
Ich konnte dieses geschweifte Klammer zu bewegen auf the-- sorry-- nächsten Zeile
wie wir normalerweise tun CS50.
Aber in JavaScript, es ist tatsächlich stilistisch gemeinsamen
nur halten die geschweifte Klammer, die erste, an diesem ersten Zeile.
>> Aber später, gibt es nichts Interessantes.
Zu öffnende geschweifte Klammer gerade abgrenzt Beginn meiner Funktion.
Die Funktion ist jetzt identisch, außer ich habe
enthalten die return false innerhalb dieser Funktion.
Denn es stellt sich out-- und Sie würden nur
weiß das aus Lese die documentation--
dass, wenn die Funktion, die Sie zuweisen um die onsubmit Handler false zurückgibt,
der Browser nur kennt und akzeptiert nicht, um das Formular an einen Server übermitteln.
Wenn es gibt true zurück, wird sie unterwerfen es auf einen Server aus Gründen, werden wir sehen,
sind nützlich, in nur einem Augenblick.
>> Und dann das Semikolon nach die geschweifte Klammer dort gerade
bedeutet, ich bin fertig Definition der Funktion.
Sie wissen, was, so bald anrufen wie Sie eine Vorlage zu hören.
Gut.
Dies ist immer noch diskutierbar Art von hässlich.
Also, was können wir noch tun?
>> Nun stellt sich heraus, dann Version zwei, die der last-- ist
und wir nur einen Blick auf diese.
Auf die Gefahr hin machen es hässlicher, stellt sich heraus,
dass es eine Bibliothek in die Welt genannt jQuery.
Und jQuery ist ein Super- beliebten JavaScript-Bibliothek
das ist so beliebt, dass die meisten beliebige JavaScript-- es nicht
ungewöhnlich, dass Menschen zu verwirren jQuery JavaScript.
Warum?
JavaScript selbst hat sehr verbose Weisen des Tuns things--
document.getElementById, dadadadadada.
Sie am Ende mit sehr lange Zeilen Code.
>> So ein Kerl namens John Resid, , die tatsächlich funktioniert für ein Startup
up in diesen Tagen, kam heraus mit dieser Bibliothek Jahre
vor, dass viele Menschen haben dazu beigetragen, jQuery genannt, dass Änderungen
Die Syntax in der folgenden Weise.
Und damit Sie diese gesehen habe, weil man sonst immer
sehen dies, wenn dadurch ein Web-basierte Abschlussprojekt,
Dies wäre das Äquivalent haft sein Umsetzung dieses gleiche Funktion mit
Diese Spezialbibliothek.
>> Nun, anstatt tease es auseinander in seiner Gesamtheit,
lassen Sie uns einfach an einigen Mustern zu suchen.
Diese Syntax zu haben scheint wie viele anonyme Funktionen
oder namenlose Funktionen oder Alias ​​Lambda-Funktionen?
Zwei, nicht wahr?
Und Sie wissen, dass, auch wenn du bist nicht super bequem mit diesem,
nur durch die Tatsache, daß es sagt, function () zweimal.
>> Und es stellt sich heraus, dass was dieser Code ist doing--
und wir werden eine Online-Referenzen verweisen, schließlich für etwas Hilfe mit diesem.
Dies bedeutet nur, dass, wenn das Dokument fertig ist,
gehen Sie vor und registrieren die folgende Funktion
als einzureichen Handler für das HTML- Element, dessen einzigartige Idee ist Demo.
Und dann, wenn das geschieht, rufen Sie diese beiden Zeilen Code.
Und das ist tragisch, eine verbose Art zu sagen, return false.
Und wir erwähnte dies nur, weil Sie Code wie diesem Online zu sehen.
Und es ist nichts zu eingeschüchtert werden.
Sondern vielmehr, bedenken Sie, dass was ist gehen, um gemeinsam sein in JavaScript
ist dieses Paradigma.
Und so, deshalb zeigen wir es für heute.
Gut.
Also ohne Wohnung zu viel auf dieser Syntax,
sind es Fragen auf diese Beispiele oder Ideen bisher?
Gut.
So verwenden wir diese für etwas Nützliches.
Erstellen einer Web-Seite, die einfach sagt hallo, so und so ist gar nicht so interessant,
nicht underwhelm.
Dieser wird nicht schön sein, sondern es geht um etwas Sinnvolles zu tun.
Lassen Sie mich wieder zu meiner Auswahl hier und eröffnen, sagen, form 0.html.
>> Also vermute, dies ist der Neuling Universitätssportarten Registrierungsseite
ohne CSS oder einem Sinn für Design.
Und ich möchte weitermachen und melden Sie sich hier mit einem Passwort.
Und ich werde mit den Bedingungen einverstanden Bedingungen und klicken Sie auf Registrieren.
Und jetzt die Website sagt: "Sie sind Angemeldet! (Nicht wirklich.)"
Das scheint wie es funktionierte, aber lassen Sie mich gehen Sie vor und zwingen reload.
>> Und lassen Sie mich sagen, nein, Sie nicht tun brauche meine eigentliche Email-Adresse.
Oder vielleicht werden wir nur sagen mail drin.
Kennwort werden, wie, 12345.
Und dann, nur weil ich ein Idiot, jetzt ist es 123.456.789.
Und ich bin nicht dabei, Ihre Box zu überprüfen.
>> Hmm.
Gut.
Es gibt also mehrere Möglichkeiten Verbesserungs hier.
Und Sie wissen, oder werden in pset sehen sieben, dass Sie zu schreiben code--
und Sie haben zu schreiben, werde Code in PHP-- zu verteidigen
gegen diese Art von Benutzer Fehler, da der Benutzer eindeutig
nicht zusammengearbeitet.
Und er oder sie dir nicht gegeben alle Werte, die Sie auch im Format wollte oder
dass Sie sie wollte.
So werden Sie in pset sieben sehen, dass wir könnten sicherlich einige
wenn die Bedingungen, die sagen, Wenn die E-Mail-Adresse
ist kein username@something.edu, Wir konnten einfach
entschuldigen und entschuldigen uns für den Benutzer viel, wie Sie vielleicht in pset sieben sein.
Oder, wenn sie nicht überprüft, dass das Feld, stellt sich heraus, in PHP können Sie erkennen, dass,
auch.
Und sicher, wenn die Passwörter nicht wie in register.php entsprechen
für pset sieben, können Sie erkennen, dass.
Aber das ist ein Schmerz in der Hals, dass sie jetzt anfordern
uns den ganzen Weg zu gehen, um den Server.
Wird der Benutzer über den Fehler informiert.
Und zumindest sei denn, Sie verwenden einige Züchter Techniken,
Jetzt müssen sie den Zurück-Pfeil klicken.
Wäre es nicht schön sein, wie eine Vielzahl von Websites heute,
wenn Sie mehr unmittelbare hatten Feedback, sofort?
>> Mit anderen Worten, lassen Sie mich auf die Version gehen eine, die gehen, zu sein keine hübscher.
Aber es hat diese Funktion.
Malan, 12345, 123456789, nicht gehen, um das Kontrollkästchen, Register.
Passwörter stimmen nicht überein.
Also auch wenn dieses Fenster ist ugly-- können wir dies schließlich ersetzen
mit so etwas wie Bootstrap, wo es in pset sieben zu sehen
ist ein sehr beliebtes library-- ich zu erkennen, dass die Passwörter nicht übereinstimmen.
Gut.
Nun, lassen Sie mich zu beheben, dass, da der User.
Lassen Sie mich gehen Sie vor und sagen, 12345, 12345.
Immer noch nicht die Überprüfung der Vereinbarung.
Sie müssen mit dem einverstanden Geschäftsbedingungen.
Warum also?
>> Wenn wir bereits gesetzt haben , dass es einen Weg gibt,
und wir werden Sie in benötigt habe pset sieben auf Fehler zu erkennen
Bedingungen wie diese serverseitige, warum sollte ich
Mühe auch tun dies in JavaScript?
Was ist ein Argument für das Hinzufügen, was
Sie als some-- zu sehen sind gibt es zusätzliche Komplexität.
>> Vielleicht gibt es keine auf den Kopf.
Was könnte es sein?
ZIELGRUPPE: [unverständlich].
DAVID MALAN: Oh, interessant.
Potenzielle Exploits.
So sicher, wenn Sie nicht der Handhabung fehlerhaften Benutzereingaben so toll,
vielleicht ist es umso besser, wenn es nicht einmal zu erreichen Ihrem Server.
Ich würde es zurückzudrängen und sagen wir, sollten Sie wahrscheinlich
beheben diese beiden Probleme.
Aber das ist fair.
Was sonst?
>> ZIELGRUPPE: [unverständlich].
>> DAVID MALAN: Ja.
Dieser Code, wie gesagt, ist Auf der Client-Seite interpretiert.
Es muss nicht auf den Server zu kümmern, das heißt, es nicht tut
Stoßbelastung oder die Kapazität des Servers.
Und nun, für meine Wenigkeit, Dies hat keine bedeutsame Wirkung
denn ich habe einen Benutzer jetzt.
>> Aber, wenn Sie eine sind Website der anständige Größe,
insbesondere die größten, wie Facebook, desto mehr können die Menschen zu halten
Ihres Servers, desto besser weil einem Server, natürlich,
nur eine endliche Menge an RAM, eine endliche Anzahl von Gigahertz
eine endliche Anzahl von Dingen es pro Zeiteinheit zu tun.
So dass, wenn es mehr Menschen in die Welt schlagen Sie Ihren Server,
versehentlich Anmeldung falsch, genauso gut, wenn Sie
kann diese Last von Ihren Server zu halten.
Plus, vor allem auf einem beweglichen device-- wenn Sie jemals haben
loggen Sie sich in my.harvard oder Yale netid oder dergleichen,
Es ist dies die Latenz mit einer Menge von Webseiten wie das, wodurch es dauert,
wie eine verdammte Sekunde oder zwei mal.
Und dann, mein Gott, wenn Sie falsch eingeben, dann muss man zurückschlagen und wiederholen es.
Es gibt also Latenz, insbesondere auf langsameren Netzwerkverbindungen.
Aber JavaScript, denn es auf dem Client ausgeführt wird
und muss nicht hin und her gehen über eine potentiell langsame Internet-
Verbindung, die Sie bekommen können nahezu sofortige Rückmeldung.
>> Also schauen wir uns das an.
Lassen Sie mich zu öffnen form 0 und sehen Sie die HTML hier.
Und lassen Sie uns sehen, was los ist.
Dies ist eine Form, deren Aktion register.php.
Ich bin gerade mit zu bekommen, so dass ich die URL zu sehen.
Aber für Passwörter, die wir sicherlich wollen würde um dies zu ändern, in der Realität zu stellen.
Hier ist ein Eingabefeld vom Typ Text.
Hier ist eine andere Eingangs Feld des Typs Passwort.
Hier ist, wenn Sie noch nie gesehen haben, ein Eingang vom Typ Checkbox.
>> Aber es gibt kein JavaScript hier auch immer.
Dies ist nur HTML-Code, geht an register.php.
Aber in Version eins, wo ich begonnen, diese Pop-ups zu bekommen,
mal sehen, was tatsächlich passiert hier.
In Version eins, was Ich werde see-- I
dachte ich könnte genug Stall mit genügend Worte, aber ich lief aus.
>> In Version one-- da wir gehen.
In Version eins, bemerken die following-- und ist nicht die beste Implementierung
aber es ist meine erste.
Beachten Sie, dass unterhalb der Form, ich habe ein Script-Tag.
Und ein Script-Tag bedeutet, hey, Browser, hier
kommt etwas Code in, Typischerweise JavaScript.
Und nun, bemerken, was ich tue.
Auf line-- kann ich kaum Lesen es-- Leitung 32, heißt es,
var form-- mich so geben eine Variable namens Form.
Und dann bekommen document.getElementId der "Registrierung".
Was ist das?
Nun, lassen Sie mich zurückspulen hier oben.
Und beachtet, ah, gab ich das Formularelement eine willkürliche, sondern beschreibend Idee
der Registrierung.
So gibt mir eine Variable, ermöglicht es mir, dass der Knoten zu greifen,
dieses Rechteck in der Baumform genannt.
form.onsubmit Mittel, hey-Browser, registrieren einen Ereignis-Listener
auf diesem Formular.
In anderen Worten, wenn diese Form vorgelegt, führen Sie den folgenden Code ein.
Es hat keinen Namen, da brauchen Warum brauchen Sie, um die Namen?
Sie müssen nur wissen, was Sie ausführen, ergo
es ist ein anonymer oder Lambda-Funktion.
Und das Funktion alle diese Zeilen hier.
Und nun, um ehrlich zu sein, auch wenn Sie nie geschrieben haben könnte JavaScript
vor, es ist nur C und PHP-Logik.
Also, wenn form.email.value == "" - so dass, wenn die E-Mail-Feld leer ist,
schreien der Benutzer mit "Du must Ihre E-Mail-Adresse. "
Else if form.password.value leer Schrei beim Anwender,
"Sie müssen Ihr Kennwort zu bieten."
>> Noch interessanter ist logisch, wenn form.password.value nicht
gleich form.confirmation.value-- wo hast Bestätigung her?
Lassen Sie mich zurückzuspulen.
Nun, ich rief dieser Eingang Feld hier Ihr Passwort ein.
Und ich nannte diese hier Bestätigung.
Ich konnte es genannt haben Kennwort zwei oder irgendetwas anderes.
Ich bin einfach nur logisch prüfen dass diese beiden dieselben sind.
Else-- es stellt sich heraus das ist Mr. Boole again-- einen Boolean-Wert, das Kontrollkästchen.
Also, wenn ich sage, Ausrufe point-- wenn nicht form.agreement.checked,
schreien den Benutzer als auch.
>> Also diese Syntax du wirst sehen ist sehr häufig in JavaScript,
wo Sie diese gepunkteter Schreibweise.
Sie beginnen mit einem Objekt hier.
Sie tauchen ein in tiefer ein, um eine Eigenschaft, wie vergessen.
Und dann haben Sie an ihrem tatsächlichen Wert zu erhalten.
Und wieder, hier ist der Eingang.
Hier ist das Passwort.
Und sein Wert ist unabhängig von der Menschen tatsächlich eingetippt.
>> Also in all diesen Fällen, kehrte ich falsch.
Aber wenn nicht, komme ich wahr.
Und jetzt sehen wir eine zwingenden Verwendung, wenn
Sie false zurück, um zu stoppen, was der Benutzer tut
und stellen Sie ihn oder sie wählen, wieder oder geben Sie es erneut.
Sonst kehren wir wahr.
>> Und lassen Sie mich eine Einführung andere Variante dieses gerade
ein gewisses Verständnis davon Samen.
Nun, in der Version 2 dieses, form 2-- Ich werde es mit einer Welle von einer Hand zu tun.
Dies ist für diejenigen, neugierig, die jQuery-Version,
diejenigen von Ihnen, um möchten Sie vielleicht plantschen in der jeweiligen Bibliothek.
Aber lassen Sie uns start-- und irgendwelche Fragen?
Lassen Sie mich zum Moment, weil pausieren das war schnell und viel.
>> Aber das Schöne daran ist, dass alle der Code ist so ziemlich das gleiche.
Das neue Zeug ist, was ist der Dom?
Was sind diese Rechtecke?
Was sind diese Knoten?
Was ist eine anonyme Funktion?
Was ist ein Event-Handler?
Aber zum Glück, die meisten, dass nur Vollkreis von, sagen wir, der Woche Null.
Gut.
So etwas, etwas mehr interessant?
Nun, zunächst einmal, lass mich gehen voran und erschließen Google Maps.
Und Sie werden feststellen, dass für ein Moment, auf den Bruchteil einer Sekunde,
merken was passiert, wenn Ich klicke schnell genug.
Und diese Verbindung an der Harvard ist so schnell, dass Sie nicht wirklich bemerken.
Aber was tun Sie Art von Art zu sehen wenn ich klicken und ziehen Sie wirklich schnell?
Diejenigen von Ihnen, das Ansehen von Online, wenn Sie dies zu 0,5x Geschwindigkeit verlangsamen,
Sie diese besser sehen kann.
>> Was war nur passiert bevor ich angeklickt und gezogen?
Lassen Sie mich versuchen hier-- lass mich tun etwas anderes, wie 90210.
Gehen wir weit entfernt.
Das war wirklich schnell, zu.
Wie wäre es mit Disney World?
Da gehen wir.
OK.
Was hast du für einen Sekundenbruchteil zu sehen?
Gerade, wie, Quadrate, oder?
Platzhalter für Fliesen?
>> Nun, was ist denn hier los?
Google Maps ist ein schönes Beispiel dafür, Diese Technologie, die aufgerufen Ajax.
Und das ist, wo wir beginnen verwenden Sie das JavaScript in besonders
verführerische Art und Weise.
Zurück in den Tag, gab es Diese Website namens MapQuest.
Und ich sollte genommen haben ein Screenshot von dieser aus den 1990er Jahren,
wo, wenn man wollte schauen Sie hier auf der Karte,
Sie würde buchstäblich klicken Sie einen Pfeil an der Spitze, welches Ihnen
ein anderer Platz von der Karte.
Wenn Sie nach links zu bewegen, du wolltest klickte ein Pfeil, die Sie zeigte,
ein anderer Platz von der Karte.
Und einige Websites immer noch tun dies heute.
Aber auch MapQuest bekommen hat besser, wie Google Maps.
>> Statt dessen, was ist besser, diese Tage Websites, die AJAX verwenden.
AJAX-- sonst bekannt Asynchronous JavaScript and XML,
Das ist nur eine andere Art zu sagen eine Technologie oder Technik,
ermöglicht einen Browser mit JavaScript zusätzliche HTTP-Anfragen stellen
nachdem die Seite geladen wurde.
Also, was bedeutet das?
Nun, wäre es freundlich sein von lästigen in Google Mail
wenn jedes Mal, wenn Sie wollte auf Ihre E-Mails abrufen,
Sie buchstäblich getroffen hatte Strg-R oder Befehlstaste-R oder klicken Sie auf die Schaltfläche Neu laden
und die ganze verflixte Seite wäre neu zu laden.
Recht?
Es würde blinken weiß wahrscheinlich für die zweite.
Sie würden die dumme Fortschrittsbalken zu sehen.
Und nur um zu sehen, wenn Sie neu sind Mail, die gesamte Web-Seite und der URL
Sie befinden sich auf müsste neu zu laden.
>> Aber das ist nicht das, was in Gmail passiert.
Recht?
Wenn Sie eine neue E-Mail in erhalten Gmail, was passiert auf dem Bildschirm?
Es zeigt nur, oder?
Es ist einfach magisch erscheint als eine neue Zeile in der Tabelle.
Dass tatsächlich beinhaltet eine anständige Menge an Komplexität.
In der Tat, wenn Sie diesen Baum zu denken, welche, obwohl ist einfach hier
Gmail-- und ich muss schauen auf den Code sure-- zu sein
wahrscheinlich hat eine HTML-Tabelle oder vielleicht eine ungeordnete Liste, die es macht
jede Ihrer Posteingänge E-Mails als.
>> Und so, wenn Sie es sich vorstellen, diese ist ein Baum im Speicher, wenn Sie
Verwendung von Google Mail, die Art sieht Art wie diese, wenn Google erkennt, ooh,
Sie eine neue E-Mail haben, ist es nicht wollen den ganzen Baum wieder aufzubauen.
Vielmehr, um den Knoten in finden will es der Baum, der Ihrem Posteingang darstellt
und legen Sie einfach einen neuen Knoten.
>> So sehr ähnlich PSET fünf, in dem Sie musste Knoten in einer Hash-Tabelle einfügen,
in ähnlicher Weise werden von Google über JavaScript-Code, der es geschrieben hat,
Traverse diesem Baum, herauszufinden, wo ist, dass Posteingang Teil des Fensters,
und fügen Sie eine neue Zeile.
Und eine neue Zeile bedeutet eine gerade oder mehrere neue Knoten in einem Baum.
>> Usw. AJAX ist diese Technik dass ermöglicht genau das.
Sobald Sie eine URL besucht haben, aber verrückt lang es ist,
und sobald die Seite geladen wurden, können Sie immer noch
greifen mehr Daten aus der internet-- ob
E-Mail oder eine Kachel eines map-- packen es hinter den Kulissen
und setzen Sie sie in die Seite so dass der menschliche nicht wirklich
dafür zu warten.
>> Facebook Messenger funktioniert auf die gleiche Art und Weise.
Eine beliebige Anzahl anderer websites-- oh, tatsächlich, auch diese.
Ich meine, das ist, ehrlich gesagt, Art eine lästige verfügen in diesen Tagen.
Wenn ich starten die Suche nach diesen cats-- ist eine Art schreckliche Benutzererfahrung.
Es nur beginnt mit der Suche für mich.
Gut was tut sie?
Die URL hat sich nicht wirklich verändert seit ich angefangen habe zu schreiben.
Aber was über das Gehen wire-- OK, hmm interessant.
Was ist für das Gehen Draht hier wird immer seltsamer.
>> OK.
Also lassen Sie mich gehen Sie vor und überprüfen Element und gehen Sie zur Registerkarte Netzwerk
und zu versuchen, dies zu machen, technische und weniger über Katzen.
Wie ich schreibe, wörtlich, Katzen und--, was passiert
per-- Ich bin nicht dabei, daß klicken.
Gut.
Also hier unten, ist das, was jeder geschieht Zeit, die ich geben Sie einen Charakter, scheinbar?
Wie, niedrigen Niveau?
Was ist mit jedem von denen geschieht Zeichen Ich schreibe an meiner Tastatur?
Ja?
ZIELGRUPPE: [unverständlich].
>> DAVID MALAN: Genau.
Jede dieser Figuren ist gehen zu Google, ein zu einer Zeit.
Sie werden den Aufbau einer Zeichenfolge auf ihrem Server, stellt
alles, was ich in bisher eingegeben haben.
Und jedesmal, wenn ich schreibe ein anderer Charakter, sie
nutzen ihre geheime Zutat von a Suchalgorithmus und herauszufinden,
meint er diese Katze Seite oder diese Katze Seite oder dergleichen?
Also in gewisser Weise bietet sie mich mit ein bessere Erfahrung, dass ich gar nicht
brauche, um meine Gedanken zu vervollständigen.
Und in der Tat, es ist eine nützliche Sache, Autovervollständigen im Allgemeinen.
Wenn ihre Algorithmen sind gut genug, und wenn meine Recherchen sind offensichtlich genug,
Ich habe nicht das ganze Wort eingeben.
Sie gehen, um mir zu sagen, was es ist Ich bin eigentlich auf der Suche nach.
So was nennt Google Instant Suche Nur mit AJAX,
Verwendung von Code, die sie zu anzufordern zusätzliche Inhalte über einen Webbrowser
hinter den Kulissen mit diesem neue Sprache, JavaScript.
So haben wir ein paar Minuten.
Und lassen Sie mich rufen Sie mein Kumpel Colton auf die Bühne,
da es schien, Besonders Spaß letzte Mal
, eine Technologie einzuführen dass einige von euch
haben ihr Interesse zum Ausdruck gebracht in für Abschlussarbeiten.
Wir dachten, es würde Spaß machen, zu bringen up Freiwilliger, obwohl, heute
Ihnen zeigen, einen Zusatz zu diese, die Sie-- ermöglicht ja,
Ich sah zuerst diese Hand.
Komm auf.
Sehr gut gemacht.
Gut gemacht.
Ich werde dieses Projekt der Bildschirm in nur einem Augenblick.
Wie ist dein Name für alle?
>> EFA: Ich bin Efa.
>> DAVID MALAN: Etha?
>> EFA: Efa.
>> DAVID MALAN: Efa?
>> EFA: Ja.
>> DAVID MALAN: Schön, Sie zu sehen.
Gut.
Lassen Sie mich diese bereit.
Kommen Sie vorbei, um die Mitte mit Colton hier.
Welche Colton hat in seinen Händen ist heute eine Fernbedienung.
So und nicht nur dort stehen in einem dreidimensionale Welt schaut sich um
als Colton tat, jetzt EFA kann tatsächlich herumlaufen, indem Sie auf,
unten, links und rechts, wie ein Nintendo oder Xbox-Controller.
EFA: Ich werde auf die Bühne fallen ab.
DAVID MALAN: Ich will stehen rund hier.
Aber das ist ein Risiko.
OK.
Also zögern Sie nicht und setzen Sie die auf.
Lassen Sie mich gehen Sie vor und wechseln Sie zu dem Bildschirm hier.
Lassen Sie mich die Beleuchtung dimmen.
Und Colton, lassen Sie mich kommen Ständer neben dir.
>> Wissen Sie, hier zu erklären möchten mit dem Mikrofon, was wir tun?
Bitte schön.
>> COLTON: Sicher.
So jetzt sind wir Laden Sie den Oculus,
Ich denke, operating-- nicht in Betrieb System, aber das Hauptprogramm, wobei
Sie alle Spiele zugreifen und Anwendungen, die in der Bibliothek sind.
So jetzt ist zu sagen, Tippen Sie das Touchpad, um zu beginnen.
Touchpad geht auf das sein, rechte Seite des Headsets.
So voran gehen und tap--
EFA: Oh, Mann.
DAVID MALAN: Ja, dort gehen Sie.
Die Qualität Efa ist zu sehen ist viel höher Qualität.
Dies ist nur die Wi-Fi hier.
COLTON: Also, was du bist tun zu wollen,
wird nach oben schauen rechten Seite des Bildschirms.
Yep, das Spiel auf der ganz oben rechts.
Und dann, wenn Sie mit der Auswahl sind es, tippen Sie auf das Touchpad wieder.
Ich denke, seine Dreadhalls.
Und dann ist hier hier a-- lassen mich halten Ihre Brille für Sie.
>> Also gab ich ihm nur einen Controller.
So, jetzt kann er das Spiel zu kontrollieren.
Er kann in der Umgebung und solche Sachen zu bewegen.
Also zögern Sie nicht und schauen nach oben.
Sie sollten sehen, Neues Spiel.
Also zögern Sie nicht und Sie können das tun.
Jetzt sollten Sie in der Lage, zu kontrollieren sich mit der Steuerung,
wie auch, so schnell wie Das Spiel lädt hier oben.
Dies könnte ein wenig beängstigend.
>> EFA: Jetzt sagen Sie mir.
OK.
>> COLTON: Alles klar.
So bestätigen Sie, dass Sie sich bewegen können.
OK.
Sie können sich bewegen.
Perfekt.
Also, wenn Sie nach unten schauen, haben Sie eine Karte.
Karte zeigt Ihnen, wo Sie sind.
Sie können durch den Raum zu suchen.
Sie können sich ganz umdrehen.
Ja genau.
Dreh dich um.
>> So sucht auf der linken Seite.
Ich denke, es ist etwas, das man Abholung auf einem Fass in den Raum.
>> EFA: Wie bekomme ich die Karte aus dem Weg?
COLTON: Schauen Sie oben.
Schauen Sie oben.
Gut.
Dort gehen Sie.
Nun gehen Sie vor und einfach umzudrehen.
Also schauen weiter auf der linken Seite.
In Bewegung bleiben gelassen.
Halten Sie suchen nach links.
Mach weiter.
Ja.
>> EFA: Oh, auf diese Weise.
>> COLTON: Ja.
Gehen Sie in Richtung es mit dem Controller.
Dort gehen Sie.
Nun sollte es sagen, es abholen.
Dort gehen Sie.
Heb es auf.
Gut.
Jetzt wollen wir aus diesem Raum zu bekommen.
Gehen Sie voran und gehen Sie zu dieser Tür.
So wirst du hold-- es sagt gerade halten Sie die Taste, um sie gewaltsam zu öffnen.
Also zögern Sie nicht und halten Sie die Taste.
Yep, zwingt sie zu öffnen.
Gut.
Gut gemacht.
Jetzt sind wir aus dem Zimmer gehen.
Also werde ich den Rest überlassen um Sie und sehen, was Sie herausfinden.
EFA: Ich werde nicht in der Dunkelkammer.
Oh, Moment.
Jetzt muss ich den dunklen Flur hinuntergehen?
OK, ich bin wieder los [unverständlich].
COLTON: Alles klar.
Weitere Artikel zu holen.
Sieht aus wie ein paar Münzen.
Das ist ein Schloss zu knacken.
So eine gesperrt, wenn Sie feststellen, Tür, können Sie diese verwenden.
Hast Du Angst?
>> EFA: Noch nicht.
COLTON: OK.
>> Pretend-- ja.
Einfach so tun, du bist tatsächlich dort stehen.
Und wenn Sie drehen herum-- du musst sich daran zu gewöhnen.
Aber es macht Sinn.
DAVID MALAN: Und während Efa weiter spielen, da wir den ganzen Tag zu tun,
wir alle Zehen hier.
Aber wir haben zwei andere Paare, wenn Sie möchten, zu kommen und zu spielen.
Andernfalls werden wir sehen, Sie als nächstes am Mittwoch.
Wir danken Ihnen, unseren Freiwilligen heute.
[Applaus]
>> [MUSIC - "Seinfeld THEMA"]
Sprecher 1: Nun, ich bin Putting ein neues PL Mount auf.
Ich habe gerade die OLPF--
>> Sprecher 2: Also, was genau machst du da?
>> Sprecher 1: Nun, jeder von these-- Hier zeige ich Ihnen, diese in hier.
Sie können es hier zu sehen.
>> SPEAKER 3: Ich glaube, ich bin gut mit diesen.
Sie wollen noch mehr?
>> SPEAKER 4: Nein, ich bin gut. [Unverständlich].
>> SPEAKER 3: Nein, [unverständlich].
Einige haben.
Sprecher 1: Unterschiedliche Farbe.
Sprecher 2: OK.
Sprecher 1: Also letztendlich, was es tut, ist es die Farbe passt von--