>> [MUSIC SPIEL]
>> Sprecher 1: Na ja, hier sind wir, der letzte Satz in P CS50.
Gratulieren euch von mit so weit kommen, da Ihre erste hallo
Welten und Ausdrucken Pyramiden für Mario.
Sie haben eine Website letzte Woche.
Und wir machen werden eine andere diese Woche, eine, die Ihnen ermöglicht,
fahren rund um die Harvard-Campus, Kommissionierung bis CS50 Mitarbeiter und
bringen sie zurück zu ihren Wohnhäuser.
>> Jetzt letzte Woche arbeiteten wir in PHP, eine serverseitige Sprache.
Aus diesem P-Set, bekommen wir eingeführt JavaScript, das ist ein
Client-Seite Sprache.
Werfen wir also einen Blick auf einige der Verteilung Code, der vorgesehen ist
Sie für diesen P-Set.
>> In der JavaScript-Ordner, wird es werden eine Reihe von JavaScript-Dateien.
Es gibt buildings.js, die eine enthält Reihe von Gebäuden, die um Harvard
Campus mit ihren Informationen und Position.
Houses.js ist ein Array von Harvard Wohnhäuser, mit ihren
Breiten-und Längengrade.
Passengers.js enthält ein Array von Passagieren -
die Mitarbeiter CS50 -
Sie werden wieder bringen, um ihre Wohnhäuser.
>> Math3D.js, die eine Menge enthält Funktionen, um mit der Bewegung zu tun.
Wenn Sie mathematisch denk sind, dann begrüße ich Sie einen Blick riskieren.
Aber Sie brauchen nicht zu verstehen alles drin.
Shuttle.js, das sich mit der Shuttle-Bewegung.
Und index.html ist die Startseite, wo alles, was passiert, wirklich, wo die
Benutzer mit der Seite interagieren.
>> Service.css ist das CSS-Stylesheet, , die zusätzlich zu dem Mail
Bootstrap-Bibliothek, Kontrollen wie index.html Aussehen.
Und dann haben wir auch service.js, die enthält Servicefunktionen für
das Shuttle.
Und hier ist, wo man sein wird sind Füllung in einigen der auf DOS.
>> Werfen wir nun einen Blick auf Objekte und assoziative Arrays in JavaScript
die für alle Absichten und Zwecke sind austauschbar.
Wenn ich wollte, ein Objekt eine Variable machen Zauberstab genannt, würde ich
erklären sie.
Und innerhalb dieser geschweiften Klammern würde ich angeben, der Kern Einhorn.
Das Holz ist Kirsche.
Und die Länge 13 ist.
>> Jetzt kann ich auch auf Werte von Objekten mit
assoziatives Array-Notation.
So Stab Index-Kern, ich kann dass gleich Einhorn oder
überprüfen, dass, wenn ich sie brauche.
Oder ich kann mit dem Punktoperator.
Wand dot Holz gleich Kirsche, und so weiter, und so fort.
Sie sehen also, dass assoziative Arrays und Objekte in JavaScript sein werden
austauschbar und Willen in ganz nützlich.
>> Dann sehen wir eine Reihe von Gebäuden in buildings.js.
Auch eine Reihe von Objekten.
Wenn ich wollte, um eine Reihe der besten machen Gebäude auf dem Campus der Harvard, dann
Ich würde es wie folgt.
Mit diesem Objekt Notation, wo Ich speichere die Wurzel, Name, Adresse,
Breitengrad, Längengrad und für jeden Einzelgebäude Objekt.
>> Lassen Sie uns schnell zu Variablen sprechen in JavaScript.
Wie PHP, JavaScript-Variablen schwach oder lose typisiert.
Um eine lokale Variable erstellen, die Sie voran der Variablenname mit dem V-A-R, Var.
>> Jetzt in JavaScript-Funktionen werden den Umfang der Variablen zu begrenzen.
Also, wenn Sie eine lokale Variable innerhalb haben eine Funktion, dann andere Funktionen
kann nicht darauf zugreifen.
Aber im Gegensatz zu C, Schleifen und Bedingungen nicht den Umfang einer Variablen beschränken.
>> Also selbst wenn Sie es innerhalb von ein erklären Zustand, wird die gesamte Funktion
Zugriff darauf haben.
Jetzt ohne var die Variable wird global sein.
Also, wenn Sie nur erklären, den Namen und die einen Wert zuweisen, so dass variable
wird eine globale Variable sein in JavaScript.
>> Jetzt in Häusern, haben wir ein assoziatives Array von Haus Typ-Objekten, wobei
jedes Haus ist nur eine Breite und eine Länge.
Dann haben wir die Passagiere Array, das ein Array
Objekttyp Passagier.
Also jeder Passagier einen Benutzernamen, ein Name, und ein Haus.
Beachten Sie, dass ich sehe vom Typ Passagier, der eigentlich nur bedeutet,
dass jedes Objekt hat der elbe Schlüsselwertepaar.
Also jedes Objekt vom Typ Passagier einen Benutzernamen, ein Name und ein Haus.
>> So was brauchen wir, um für die P-Reihe zu tun?
Nun, wir brauchen, damit die Benutzer zu holen bis Mitarbeiter, um alle anzuzeigen
die Mitarbeiter, die derzeit in unser Shuttle, und sie fallen ab.
Und dann werden wir auch über zusätzliche sprechen Funktionen, die für die durchgeführt werden können
der Shuttle-P-Set.
>> Aber lassen Sie uns über Abholung ersten Gespräch.
Die Gesichter der CS50 Mitarbeiter wurden ganzen Campus gepflanzt, wo jeder
Gesicht ist als ein Ort umgesetzt Marke auf dem 3D-Erde und als
Markierung auf der 2D-Karte.
Also, wenn der Benutzer die Aufnahme klickt -Taste, um hinzufügen in der Nähe wollen wir
Passagiere zum Shuttle.
Und wir wollen auch, um ihren Platz zu entfernen markieren von der Welt, und entfernen ihre
Marker von der Karte, die anzeigt, dass sie in unseren Shuttle bist jetzt.
>> So, wie wir erkennen, ob Passagiere befinden sich im Bereich der Shuttle?
Nun, die Funktion zu erreichen -
so Shuttle Punktabstand, vorbei an die Breite und Länge, werden
Berechnen der Entfernung von der aktuellen Position des Shuttle zu den
darauf, dass Sie mit, die angeben, gegebenen Breite und Länge.
So können Sie diese verwenden, um die Berechnung Abstand von der Shuttle zu den
Passagiere.
>> Aber wie wollen Sie wissen, wo die Passagiere?
Nun, das ist, wo wir zu haben, bearbeiten Sie die Funktion bevöl.
Füllen Sie alle Orte der Mitarbeiter und Passagiere in die Welt,
und in der Karte, aber nicht speichern ihre Lage.
Also vielleicht können Sie speichern ihre Marken setzen und Markierungen
in einigen globalen Array.
>> Jetzt gibt es bereits ein globales Array Speichern von Informationen von Passagieren.
Die Passagiere Array speichert jeweils Passagiernamen und ihr Haus.
Vielleicht können Sie ein paar Parameter hinzufügen es den Fahrgast Objekte.
>> Damit wir erkennen alle Passagiere innerhalb der Reichweite unserer Shuttle, lassen
Schleife durch alle Passagiere Passagiere im Array.
Eine for-Schleife in JavaScript aussehen könnte etwa so, sehr ähnlich
die for-Schleife in C Oder wir können eine verwenden Alternative für Loop-Struktur.
>> Für var i in der Reihe, wo ich wird immer noch der Index sein.
Aber Sie müssen nicht angeben das Array Punktlänge
Zustand, und ich plus plus.
Standort eines jeden Passagier durch ihren Platz Zeichen gegeben.
>> Aber der Ort ist nicht die Marke Breite und die Länge.
Wir müssen diese Parameter zugreifen immer die Geometrie, mit get
Geometrie auf dem Platz Zeichen.
Und dann, sobald wir die Geometrie, immer entweder die Breite oder die
Längengrad, die Verwendung dieser Funktionen.
>> So, jetzt wissen wir, wie zu erkennen, ob Passagiere innerhalb
Palette unserer Shuttle.
Sobald wir diese Passagiere, wir wollen alle Passagiere, die sind Add
in diesem Bereich.
Wir wollen es ihnen ermöglichen, hüpfen und nehmen Sie Platz auf unserem Shuttle, aber nur
wenn wir genug Platz für sie.
>> Der Shuttle-Punkt Sitze Array wird anzugeben, ob Sitze leer sind, oder
wer ist dieser Sitz.
Also, wenn ein Sitz leer ist, dann dass Sitz NULL.
So durchlaufen die Sitze Array Überprüfung auf leere Sitze, Speicherung
Passagiere in diesen Sitzen, bis Sie haben keine mehr leere Sitze.
Und leider, alle anderen Passagiere müssen für die Wartezeit
nächste Mal das Shuttle herum kommt.
>> Sobald sie auf den Shuttle zu bekommen, wir wollen an ihre Stelle Markierung zu entfernen, die
ist ihr Foto in der 3D-Welt.
Wenn ich wollte, um einen Platz Marke p zu entfernen, dann würde ich alle Funktionen bekommen
von meiner Erde, von der Google Earth, und entfernen Sie dann, dass bestimmten Ort
Markieren Sie mit der removeChild Funktion.
Dann endlich, wir entfernen Sie die Markierung, das Symbol auf der 2D-Karte für alle
Passagier, die wir sind Abholung.
So entfernen Sie eine Markierung, m, dann werde ich nur ausführen dot m setMap null.
Tun Sie dies für alle Passagiere in Reichweite, Abholung und Sie fertig sind.