>> 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.