ZAMYLA CHAN: Nun, hier sind wir, das letzte p-Set in CS50. Gratulieren euch von mit so weit kommen, da Ihre erste Hallo Welten und Druck Up 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. 

Nun, letzte Woche arbeiteten wir in PHP, eine serverseitige Sprache. Aus diesem p-Reihe, sind wir immer 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 Passagiere, die CS50 Mitarbeiter 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 minded, dann Ich begrüße Sie auf einen Blick. Aber Sie brauchen nicht zu verstehen alles drin. Shuttle.js, das sich mit die Bewegung des Shuttle. 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 neben der Twitter Bootstrap-Bibliothek, Kontrollen wie index.html Aussehen. Und dann haben wir auch service.js, die enthält Servicefunktionen für der Shuttle. Und hier ist, wo man sein wird sind Füllung in einigen der to-do ist. 

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, ist der Kern Einhorn, das Holz Kirsche ist, 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 brauche. Oder ich kann mit dem Punktoperator wand.wood 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, wieder eine Anordnung von Gegenständen. 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 V-A-R, Var. Jetzt, im 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. Nun, 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 Reihe von Host-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 Benutzer nennen, einen Namen und ein Haus. 

Beachten Sie, dass ich sage, der Typ Passagier, der eigentlich nur bedeutet, dass jedes Objekt hat der gleichen Schlüssel Wert-Paaren. Also jedes Objekt vom Typ Passagier einen Benutzernamen, ein Name und ein Haus. So was brauchen wir, um für die P-SET 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 der Erde 3D, und als Markierung auf der 2D-Karte. Also, wenn der Benutzer die Pickup 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 erreichbar, so shuttle.distance, vorbei in die Breite und Länge berechnet wird der Abstand von der aktuellen Position der Shuttle auf den Punkt, dass Sie mit, dass angesichts angeben 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 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 schon gibt es eine globale 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 alle Passagiere erkennen innerhalb der Reichweite unserer Shuttle, seien wir Schleife durch alle die Passagiere in der Passagiere Array. Eine for-Schleife in JavaScript aussehen könnte etwa so, sehr ähnlich die for-Schleifen in C. Oder wir können eine verwenden Alternative für Loop-Struktur, für var i in Array, wo ich immer noch sein der Index, aber Sie brauchen nicht zu geben Sie die array.length Zustand und i + +. 

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 einmal haben wir die Geometrie, immer entweder die Breite oder die Länge 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 ein Sitz auf unseren Shuttle, aber nur wenn wir genügend Platz, um sie. 

Die shuttle.seats Array zeigen 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 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 p Marke zu entfernen, dann würde ich alle Funktionen bekommen von meiner Erde, aus 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 m.setMap null. Tun Sie dies für alle Passagiere in Reichweite, Abholung und Sie fertig sind. Die Grafik-Funktion sollten alle anzeigen der Passagiere, die in sind Ihre Shuttle und leeren Sitz, wenn leer. So Diagramm sollte über laufen shuttle.seats, zeigt die Fahrgastinformation für jeden Index, und leeren Sitz, wenn dieser Index ist null. 

Nun, wenn HTML-Text innerhalb einer Put- JavaScript-Variable, dann unter Verwendung document.getElementById, Diagramm kann bearbeiten Sie die innere HTML, dass angesichts der Element durch die Zuordnung der HTML-Text auf die document.getElementById innere HTML-Variable. Wenn die Benutzer auf die Drop Off-Taste in index.html, wird es den Anruf Drop-Off-Funktion. Und es ist unsere Aufgabe, dass zu implementieren. 

Im Drop-Off, wir wollen zu einem entfernen Passagiere vom Shuttle nur, wenn wir sind im Bereich von deren Bestimmungsort, deren Wohnhaus. So dropoff haben zu prüfen, ob das Shuttle in Reichweite eine der Häuser, und entfernen Sie alle benötigten Passagiere aus dem Shuttle. So wie überprüfen wir, ob wir in Reichweite von allen Häusern? Nun, wieder einmal, wir machen die Verwendung von shuttle.distance Funktion, vorbei an die Breite und die Länge des Punktes dass wir gegen Prüfung. 

Aber was sind die Punkte? Nun, die Häuser Array, wenn Sie sich erinnern in houses.js, speichert das Breite und Länge eines jeden Hauses in ein assoziatives Array, in dem jeder Index ist der Name dieses Hauses. Dann, um Passagiere zu entfernen - gut, nur, wenn wir in Reichweite sind ihre Haus, die sie gehen wollen. Also noch einmal daran erinnern, dass Passagiere speichert das Haus, das jeder Passagier will, um zu gehen. Wenn sie innerhalb der Reichweite sind ihre Haus, dann werden wir, dass entfernen Passagier von shuttle.seats und Satz ihre Position in der Anordnung auf Null. 

Lassen Sie uns nun über einige zusätzliche Features zu sprechen dass in realisiert werden die CS50 Shuttle p-Set. Es gibt ein Punktesystem, wobei Sie verfolgen, wie viele weist ein Benutzer. Für Abwurf Passagiere erfolgreich, können sie Punkte zu bekommen. Aber für den Versuch, Drop-off Passagiere wo es nicht jedes Haus in der Nähe, gut, können sie dafür bestraft. Also vielleicht Sie, um zu verfolgen möchten die Punkte in einer globalen Variablen. 

Sie können vielleicht einen Timer, umsetzen, wo der Benutzer eine bestimmte Menge hat Zeit abholen und Drop-off ein bestimmte Anzahl der Passagiere. Vielleicht sogar integrieren diese mit dem Punktesystem. Oder Sie können Tabelle bearbeiten, so dass Passagiere werden von Haus sortiert. So, dass wäre wahrscheinlich eine Art sein Funktion, um shuttle.seats. 

Sie können einen fliegenden Funktion zu implementieren, wobei, wenn der Benutzer die Konami Code, dann hebt das Shuttle die Boden und das Shuttle fliegen kann. Aber für ein sicheres Drop-off, am besten zu machen das Shuttle landen die Räder auf die Boden zuerst. Sie können auch umzusetzen Teleportation, wo Sie ein Drop Down-Liste machen Gebäude in index.html. Und Auswählen einer von denen, die Benutzer transportiert werden dass Gebäude auf dem Campus. OK, obwohl, durch Reisen die Wände einiger Gebäude auf dem Weg dorthin. 

Sie können auch die Geschwindigkeit der Veränderung Shuttle, so dass der Benutzer zu erhöhen oder verringern Sie die Geschwindigkeit. Vielleicht haben Sie eine globale Variable zu wollen verfolgen, wie viel Kraftstoff die Shuttle hat, abnehm Sie es wie Sie entlang gehen. Sobald Sie schlagen Null, obwohl, das Shuttle nicht in der Lage sich zu bewegen, es sei denn, Sie haben sein betankt, vielleicht über eine Taste oder sogar Ihre eigenen Tankstelle. 

Aber das ist sicherlich nicht vollständige Liste. Schauen Sie sich die Spezifikation für das volle Liste, oder vielleicht vorschlagen Ihre eigenen, um Ihren TF. Der Himmel ist die Grenze. Dies ist Ihre letzte CS50 p-Set, so viel Spaß mit ihm. Dies war CS50 Shuttle. 

Ich muss sagen, es war ein Vergnügen macht diese für Sie mit der Produktionsteam. Und ich hoffe, dass Sie habe genießen Sie sie, wie gut. Mein Name ist Zamyla. Und das war CS50.