1
00:00:00,000 --> 00:00:09,870

2
00:00:09,870 --> 00:00:13,360
>> ZAMYLA CHAN: Nun, hier sind wir,
das letzte p-Set in CS50.

3
00:00:13,360 --> 00:00:17,040
Gratulieren euch von mit
so weit kommen, da Ihre erste Hallo

4
00:00:17,040 --> 00:00:20,090
Welten und Druck Up
Pyramiden für Mario.

5
00:00:20,090 --> 00:00:21,930
Sie haben eine Website letzte Woche.

6
00:00:21,930 --> 00:00:25,110
Und wir machen werden eine andere
diese Woche, eine, die Ihnen ermöglicht,

7
00:00:25,110 --> 00:00:28,570
fahren rund um die Harvard-Campus, Kommissionierung
bis CS50 Mitarbeiter und

8
00:00:28,570 --> 00:00:31,910
bringen sie zurück zu ihren
Wohnhäuser.

9
00:00:31,910 --> 00:00:35,400
>> Nun, letzte Woche arbeiteten wir in PHP,
eine serverseitige Sprache.

10
00:00:35,400 --> 00:00:38,250
Aus diesem p-Reihe, sind wir immer eingeführt
JavaScript, das ist ein

11
00:00:38,250 --> 00:00:40,610
Client-Seite Sprache.

12
00:00:40,610 --> 00:00:44,020
Werfen wir also einen Blick auf einige der
Verteilung Code, der vorgesehen ist

13
00:00:44,020 --> 00:00:46,210
Sie für diesen p-Set.

14
00:00:46,210 --> 00:00:49,700
In der JavaScript-Ordner, wird es
werden eine Reihe von JavaScript-Dateien.

15
00:00:49,700 --> 00:00:53,600
>> Es gibt buildings.js, die eine enthält
Reihe von Gebäuden, die um Harvard

16
00:00:53,600 --> 00:00:57,340
Campus mit ihren Informationen
und Position.

17
00:00:57,340 --> 00:01:01,630
Houses.js ist ein Array von Harvard
Wohnhäuser mit ihren

18
00:01:01,630 --> 00:01:04,030
Breiten-und Längengrade.

19
00:01:04,030 --> 00:01:08,600
Passengers.js enthält ein Array von
Passagiere, die CS50 Mitarbeiter

20
00:01:08,600 --> 00:01:11,640
Sie werden wieder bringen, um
ihre Wohnhäuser.

21
00:01:11,640 --> 00:01:16,450
>> Math3D.js, die eine Menge enthält
Funktionen, um mit der Bewegung zu tun.

22
00:01:16,450 --> 00:01:19,500
Wenn Sie mathematisch minded, dann
Ich begrüße Sie auf einen Blick.

23
00:01:19,500 --> 00:01:23,530
Aber Sie brauchen nicht zu verstehen
alles drin.

24
00:01:23,530 --> 00:01:26,710
Shuttle.js, das sich mit
die Bewegung des Shuttle.

25
00:01:26,710 --> 00:01:31,450
Und index.html ist die Startseite, wo
alles, was passiert, wirklich, wo die

26
00:01:31,450 --> 00:01:33,610
Benutzer mit der Seite interagieren.

27
00:01:33,610 --> 00:01:39,110
>> Service.css ist das CSS-Stylesheet,
die neben der Twitter

28
00:01:39,110 --> 00:01:43,960
Bootstrap-Bibliothek, Kontrollen
wie index.html Aussehen.

29
00:01:43,960 --> 00:01:48,190
Und dann haben wir auch service.js, die
enthält Servicefunktionen für

30
00:01:48,190 --> 00:01:49,010
der Shuttle.

31
00:01:49,010 --> 00:01:53,010
Und hier ist, wo man sein wird sind
Füllung in einigen der to-do ist.

32
00:01:53,010 --> 00:01:56,600
>> Werfen wir nun einen Blick auf Objekte und
assoziative Arrays in JavaScript

33
00:01:56,600 --> 00:01:59,360
die für alle Absichten und Zwecke,
sind austauschbar.

34
00:01:59,360 --> 00:02:03,030
Wenn ich wollte, ein Objekt eine Variable machen
Zauberstab genannt, würde ich

35
00:02:03,030 --> 00:02:04,290
erklären sie.

36
00:02:04,290 --> 00:02:09,350
Und innerhalb dieser geschweiften Klammern, würde ich
angeben, ist der Kern Einhorn, das Holz

37
00:02:09,350 --> 00:02:12,710
Kirsche ist, und die Länge 13 ist.

38
00:02:12,710 --> 00:02:16,370
>> Jetzt kann ich auch auf Werte
von Objekten mit

39
00:02:16,370 --> 00:02:18,270
assoziatives Array-Notation.

40
00:02:18,270 --> 00:02:22,610
So Stab Index-Kern, ich kann
dass gleich Einhorn oder

41
00:02:22,610 --> 00:02:24,710
überprüfen, dass, wenn ich brauche.

42
00:02:24,710 --> 00:02:28,890
Oder ich kann mit dem Punktoperator
wand.wood gleich Kirsche, und

43
00:02:28,890 --> 00:02:30,280
so weiter und so fort.

44
00:02:30,280 --> 00:02:33,930
Sie sehen also, dass assoziative Arrays und
Objekte in JavaScript sein werden

45
00:02:33,930 --> 00:02:37,710
austauschbar und Willen
in ganz nützlich.

46
00:02:37,710 --> 00:02:41,570
>> Dann sehen wir eine Reihe von Gebäuden
in buildings.js,

47
00:02:41,570 --> 00:02:43,870
wieder eine Anordnung von Gegenständen.

48
00:02:43,870 --> 00:02:48,500
Wenn ich wollte, um eine Reihe der besten machen
Gebäude auf dem Campus der Harvard, dann

49
00:02:48,500 --> 00:02:49,710
Ich würde es wie folgt.

50
00:02:49,710 --> 00:02:55,250
Mit diesem Objekt Notation, wo
Ich speichere die Wurzel, Name, Adresse,

51
00:02:55,250 --> 00:03:00,260
Breitengrad, Längengrad und für jeden
Einzelgebäude Objekt.

52
00:03:00,260 --> 00:03:02,930
>> Lassen Sie uns schnell zu Variablen sprechen
in JavaScript.

53
00:03:02,930 --> 00:03:07,760
Wie PHP, JavaScript-Variablen
schwach oder lose typisiert.

54
00:03:07,760 --> 00:03:14,120
Um eine lokale Variable erstellen, die Sie voran
der Variablenname mit V-A-R, Var.

55
00:03:14,120 --> 00:03:17,010
Jetzt, im JavaScript-Funktionen werden
den Umfang der Variablen zu begrenzen.

56
00:03:17,010 --> 00:03:20,600
Also, wenn Sie eine lokale Variable innerhalb haben
eine Funktion, dann andere Funktionen

57
00:03:20,600 --> 00:03:22,060
kann nicht darauf zugreifen.

58
00:03:22,060 --> 00:03:26,090
>> Aber im Gegensatz zu C, Schleifen und Bedingungen nicht
den Umfang einer Variablen beschränken.

59
00:03:26,090 --> 00:03:30,600
Also selbst wenn Sie es innerhalb von ein erklären
Zustand, wird die gesamte Funktion

60
00:03:30,600 --> 00:03:32,810
Zugriff darauf haben.

61
00:03:32,810 --> 00:03:35,820
Nun, ohne var die Variable
wird global sein.

62
00:03:35,820 --> 00:03:39,170
Also, wenn Sie nur erklären, den Namen und die
einen Wert zuweisen, so dass variable

63
00:03:39,170 --> 00:03:41,900
wird eine globale Variable sein
in JavaScript.

64
00:03:41,900 --> 00:03:48,480
>> Jetzt, in Häusern, haben wir ein assoziatives
Reihe von Host-Typ-Objekten, wobei

65
00:03:48,480 --> 00:03:52,100
jedes Haus ist nur eine Breite
und eine Länge.

66
00:03:52,100 --> 00:03:55,140
Dann haben wir die Passagiere
Array, das ein Array

67
00:03:55,140 --> 00:03:57,370
Objekttyp Passagier.

68
00:03:57,370 --> 00:04:01,620
Also jeder Passagier einen Benutzer
nennen, einen Namen und ein Haus.

69
00:04:01,620 --> 00:04:04,840
>> Beachten Sie, dass ich sage, der Typ
Passagier, der eigentlich nur bedeutet,

70
00:04:04,840 --> 00:04:08,150
dass jedes Objekt hat der
gleichen Schlüssel Wert-Paaren.

71
00:04:08,150 --> 00:04:12,830
Also jedes Objekt vom Typ Passagier
einen Benutzernamen, ein Name und ein Haus.

72
00:04:12,830 --> 00:04:14,850
So was brauchen wir, um
für die P-SET zu tun?

73
00:04:14,850 --> 00:04:20,779
Nun, wir brauchen, damit die Benutzer zu holen
bis Mitarbeiter, um alle anzuzeigen

74
00:04:20,779 --> 00:04:25,080
die Mitarbeiter, die derzeit in
unser Shuttle, und sie fallen ab.

75
00:04:25,080 --> 00:04:29,395
Und dann werden wir auch über zusätzliche sprechen
Funktionen, die für die durchgeführt werden können

76
00:04:29,395 --> 00:04:30,980
der Shuttle-p-Set.

77
00:04:30,980 --> 00:04:33,610
>> Aber lassen Sie uns über Abholung ersten Gespräch.

78
00:04:33,610 --> 00:04:37,480
Die Gesichter der CS50 Mitarbeiter wurden
ganzen Campus gepflanzt, wo jeder

79
00:04:37,480 --> 00:04:41,750
Gesicht ist als ein Ort umgesetzt Marke
auf der Erde 3D, und als

80
00:04:41,750 --> 00:04:44,020
Markierung auf der 2D-Karte.

81
00:04:44,020 --> 00:04:47,880
Also, wenn der Benutzer die Pickup klickt
-Taste, um hinzufügen in der Nähe wollen wir

82
00:04:47,880 --> 00:04:49,590
Passagiere zum Shuttle.

83
00:04:49,590 --> 00:04:53,650
Und wir wollen auch, um ihren Platz zu entfernen
markieren von der Welt und entfernen ihre

84
00:04:53,650 --> 00:04:58,060
Marker von der Karte, die anzeigt, dass
sie in unseren Shuttle bist jetzt.

85
00:04:58,060 --> 00:05:02,520
>> So, wie wir erkennen, ob Passagiere
befinden sich im Bereich der Shuttle?

86
00:05:02,520 --> 00:05:06,670
Nun, die Funktion erreichbar, so
shuttle.distance, vorbei in die

87
00:05:06,670 --> 00:05:10,630
Breite und Länge berechnet wird
der Abstand von der aktuellen Position

88
00:05:10,630 --> 00:05:14,220
der Shuttle auf den Punkt, dass
Sie mit, dass angesichts angeben

89
00:05:14,220 --> 00:05:15,860
Breite und Länge.

90
00:05:15,860 --> 00:05:19,180
So können Sie diese verwenden, um die Berechnung
Abstand von der Shuttle zu den

91
00:05:19,180 --> 00:05:20,310
Passagiere.

92
00:05:20,310 --> 00:05:24,040
>> Aber wie wollen Sie wissen, wo
die Passagiere?

93
00:05:24,040 --> 00:05:27,510
Nun, das ist, wo wir zu haben,
bearbeiten Sie die Funktion bevöl.

94
00:05:27,510 --> 00:05:32,500
Füllen Sie alle Orte der Mitarbeiter
Passagiere in die Welt

95
00:05:32,500 --> 00:05:36,300
und in der Karte, aber nicht
speichern ihre Lage.

96
00:05:36,300 --> 00:05:39,850
Also vielleicht können Sie speichern ihre
Marken setzen und Markierungen

97
00:05:39,850 --> 00:05:41,570
in einigen globalen Array.

98
00:05:41,570 --> 00:05:45,780
>> Jetzt schon gibt es eine globale Array
Speichern von Informationen von Passagieren.

99
00:05:45,780 --> 00:05:49,960
Die Passagiere Array speichert jeweils
Passagiernamen und ihr Haus.

100
00:05:49,960 --> 00:05:54,985
Vielleicht können Sie ein paar Parameter hinzufügen
es den Fahrgast Objekte.

101
00:05:54,985 --> 00:05:58,150
>> Damit wir alle Passagiere erkennen
innerhalb der Reichweite unserer

102
00:05:58,150 --> 00:06:02,485
Shuttle, seien wir Schleife durch alle die
Passagiere in der Passagiere Array.

103
00:06:02,485 --> 00:06:07,790
Eine for-Schleife in JavaScript aussehen könnte
etwa so, sehr ähnlich

104
00:06:07,790 --> 00:06:13,200
die for-Schleifen in C. Oder wir können eine verwenden
Alternative für Loop-Struktur, für

105
00:06:13,200 --> 00:06:18,680
var i in Array, wo ich immer noch sein
der Index, aber Sie brauchen nicht zu

106
00:06:18,680 --> 00:06:23,310
geben Sie die array.length
Zustand und i + +.

107
00:06:23,310 --> 00:06:26,130
>> Standort eines jeden Passagier
durch ihren Platz Zeichen gegeben.

108
00:06:26,130 --> 00:06:29,800
Aber der Ort ist nicht die Marke
Breite und die Länge.

109
00:06:29,800 --> 00:06:34,170
Wir müssen diese Parameter zugreifen
immer die Geometrie, mit get

110
00:06:34,170 --> 00:06:38,180
Geometrie auf dem Platz Zeichen und dann
einmal haben wir die Geometrie, immer

111
00:06:38,180 --> 00:06:42,580
entweder die Breite oder die Länge
Verwendung dieser Funktionen.

112
00:06:42,580 --> 00:06:45,680
>> So, jetzt wissen wir, wie zu erkennen, ob
Passagiere innerhalb

113
00:06:45,680 --> 00:06:47,920
Palette unserer Shuttle.

114
00:06:47,920 --> 00:06:52,050
Sobald wir diese Passagiere, wir
wollen alle Passagiere, die sind Add

115
00:06:52,050 --> 00:06:53,140
in diesem Bereich.

116
00:06:53,140 --> 00:06:57,580
Wir wollen es ihnen ermöglichen, hüpfen und nehmen
ein Sitz auf unseren Shuttle, aber nur

117
00:06:57,580 --> 00:06:59,630
wenn wir genügend Platz, um sie.

118
00:06:59,630 --> 00:07:04,120
>> Die shuttle.seats Array zeigen
ob Sitze leer sind, oder

119
00:07:04,120 --> 00:07:05,890
wer ist dieser Sitz.

120
00:07:05,890 --> 00:07:11,160
Also, wenn ein Sitz leer ist, dann
dass Sitz NULL.

121
00:07:11,160 --> 00:07:15,930
So durchlaufen die Sitze Array
Überprüfung auf leere Sitze, Speicherung

122
00:07:15,930 --> 00:07:20,020
Passagiere in diesen Sitzen, bis Sie
haben keine mehr leere Sitze.

123
00:07:20,020 --> 00:07:23,330
Und leider, alle anderen Passagiere
müssen für die Wartezeit

124
00:07:23,330 --> 00:07:26,000
nächste Mal das Shuttle kommt.

125
00:07:26,000 --> 00:07:30,280
>> Sobald sie auf den Shuttle zu bekommen, wir wollen
an ihre Stelle Markierung zu entfernen, die

126
00:07:30,280 --> 00:07:32,580
ist ihr Foto in der 3D-Welt.

127
00:07:32,580 --> 00:07:38,030
Wenn ich wollte, um einen Platz p Marke zu entfernen,
dann würde ich alle Funktionen bekommen

128
00:07:38,030 --> 00:07:42,820
von meiner Erde, aus der Google Earth,
und entfernen Sie dann, dass bestimmten Ort

129
00:07:42,820 --> 00:07:45,910
Markieren Sie mit der removeChild Funktion.

130
00:07:45,910 --> 00:07:51,360
Dann endlich, wir entfernen Sie die Markierung,
das Symbol auf der 2D-Karte, für alle

131
00:07:51,360 --> 00:07:53,650
Passagier, die wir sind Abholung.

132
00:07:53,650 --> 00:07:59,790
>> So entfernen Sie eine Markierung m, dann werde ich
nur ausführen m.setMap null.

133
00:07:59,790 --> 00:08:03,670
Tun Sie dies für alle Passagiere in Reichweite,
Abholung und Sie fertig sind.

134
00:08:03,670 --> 00:08:07,890
Die Grafik-Funktion sollten alle anzeigen
der Passagiere, die in sind Ihre

135
00:08:07,890 --> 00:08:11,000
Shuttle und leeren Sitz, wenn leer.

136
00:08:11,000 --> 00:08:14,420
So Diagramm sollte über laufen
shuttle.seats, zeigt die

137
00:08:14,420 --> 00:08:21,350
Fahrgastinformation für jeden Index,
und leeren Sitz, wenn dieser Index ist null.

138
00:08:21,350 --> 00:08:26,160
>> Nun, wenn HTML-Text innerhalb einer Put-
JavaScript-Variable, dann unter Verwendung

139
00:08:26,160 --> 00:08:31,950
document.getElementById, Diagramm kann
bearbeiten Sie die innere HTML, dass angesichts der

140
00:08:31,950 --> 00:08:36,140
Element durch die Zuordnung der
HTML-Text auf die

141
00:08:36,140 --> 00:08:40,840
document.getElementById innere HTML-Variable.

142
00:08:40,840 --> 00:08:46,180
Wenn die Benutzer auf die Drop Off-Taste
in index.html, wird es den Anruf

143
00:08:46,180 --> 00:08:47,160
Drop-Off-Funktion.

144
00:08:47,160 --> 00:08:49,510
Und es ist unsere Aufgabe, dass zu implementieren.

145
00:08:49,510 --> 00:08:54,150
>> Im Drop-Off, wir wollen zu einem entfernen
Passagiere vom Shuttle nur, wenn

146
00:08:54,150 --> 00:08:58,740
wir sind im Bereich von deren Bestimmungsort,
deren Wohnhaus.

147
00:08:58,740 --> 00:09:03,300
So dropoff haben zu prüfen, ob
das Shuttle in Reichweite eine der

148
00:09:03,300 --> 00:09:08,200
Häuser, und entfernen Sie alle benötigten
Passagiere aus dem Shuttle.

149
00:09:08,200 --> 00:09:11,020
So wie überprüfen wir, ob wir
in Reichweite von allen Häusern?

150
00:09:11,020 --> 00:09:16,630
Nun, wieder einmal, wir machen die Verwendung von
shuttle.distance Funktion, vorbei an

151
00:09:16,630 --> 00:09:20,990
die Breite und die Länge des Punktes
dass wir gegen Prüfung.

152
00:09:20,990 --> 00:09:22,730
>> Aber was sind die Punkte?

153
00:09:22,730 --> 00:09:27,210
Nun, die Häuser Array, wenn Sie sich erinnern
in houses.js, speichert das

154
00:09:27,210 --> 00:09:32,790
Breite und Länge eines jeden Hauses in
ein assoziatives Array, in dem jeder

155
00:09:32,790 --> 00:09:35,980
Index ist der Name dieses Hauses.

156
00:09:35,980 --> 00:09:37,590
Dann, um Passagiere zu entfernen -

157
00:09:37,590 --> 00:09:41,820
gut, nur, wenn wir in Reichweite sind ihre
Haus, die sie gehen wollen.

158
00:09:41,820 --> 00:09:46,380
Also noch einmal daran erinnern, dass Passagiere
speichert das Haus, das jeder Passagier

159
00:09:46,380 --> 00:09:48,850
will, um zu gehen.

160
00:09:48,850 --> 00:09:51,670
Wenn sie innerhalb der Reichweite sind ihre
Haus, dann werden wir, dass entfernen

161
00:09:51,670 --> 00:09:57,200
Passagier von shuttle.seats und Satz
ihre Position in der Anordnung auf Null.

162
00:09:57,200 --> 00:10:00,220
>> Lassen Sie uns nun über einige zusätzliche Features zu sprechen
dass in realisiert werden

163
00:10:00,220 --> 00:10:02,690
die CS50 Shuttle p-Set.

164
00:10:02,690 --> 00:10:05,850
Es gibt ein Punktesystem, wobei
Sie verfolgen, wie viele

165
00:10:05,850 --> 00:10:07,520
weist ein Benutzer.

166
00:10:07,520 --> 00:10:11,120
Für Abwurf Passagiere
erfolgreich, können sie Punkte zu bekommen.

167
00:10:11,120 --> 00:10:15,100
Aber für den Versuch, Drop-off Passagiere
wo es nicht jedes Haus in der Nähe,

168
00:10:15,100 --> 00:10:16,980
gut, können sie dafür bestraft.

169
00:10:16,980 --> 00:10:21,790
Also vielleicht Sie, um zu verfolgen möchten
die Punkte in einer globalen Variablen.

170
00:10:21,790 --> 00:10:25,970
>> Sie können vielleicht einen Timer, umsetzen, wo
der Benutzer eine bestimmte Menge hat

171
00:10:25,970 --> 00:10:29,800
Zeit abholen und Drop-off ein
bestimmte Anzahl der Passagiere.

172
00:10:29,800 --> 00:10:33,280
Vielleicht sogar integrieren diese
mit dem Punktesystem.

173
00:10:33,280 --> 00:10:39,970
Oder Sie können Tabelle bearbeiten, so dass
Passagiere werden von Haus sortiert.

174
00:10:39,970 --> 00:10:45,250
So, dass wäre wahrscheinlich eine Art sein
Funktion, um shuttle.seats.

175
00:10:45,250 --> 00:10:49,240
>> Sie können einen fliegenden Funktion zu implementieren,
wobei, wenn der Benutzer die Konami

176
00:10:49,240 --> 00:10:53,460
Code, dann hebt das Shuttle die
Boden und das Shuttle fliegen kann.

177
00:10:53,460 --> 00:10:58,890
Aber für ein sicheres Drop-off, am besten zu machen
das Shuttle landen die Räder auf die

178
00:10:58,890 --> 00:11:00,700
Boden zuerst.

179
00:11:00,700 --> 00:11:05,910
Sie können auch umzusetzen Teleportation,
wo Sie ein Drop Down-Liste machen

180
00:11:05,910 --> 00:11:08,380
Gebäude in index.html.

181
00:11:08,380 --> 00:11:12,270
Und Auswählen einer von denen, die
Benutzer transportiert werden

182
00:11:12,270 --> 00:11:14,220
dass Gebäude auf dem Campus.

183
00:11:14,220 --> 00:11:16,760
OK, obwohl, durch Reisen
die Wände einiger

184
00:11:16,760 --> 00:11:19,290
Gebäude auf dem Weg dorthin.

185
00:11:19,290 --> 00:11:22,960
>> Sie können auch die Geschwindigkeit der Veränderung
Shuttle, so dass der Benutzer zu erhöhen

186
00:11:22,960 --> 00:11:25,490
oder verringern Sie die Geschwindigkeit.

187
00:11:25,490 --> 00:11:28,840
Vielleicht haben Sie eine globale Variable zu wollen
verfolgen, wie viel Kraftstoff die

188
00:11:28,840 --> 00:11:31,520
Shuttle hat, abnehm
Sie es wie Sie entlang gehen.

189
00:11:31,520 --> 00:11:35,860
Sobald Sie schlagen Null, obwohl, das Shuttle
nicht in der Lage sich zu bewegen, es sei denn, Sie haben sein

190
00:11:35,860 --> 00:11:40,610
betankt, vielleicht über eine Taste oder
sogar Ihre eigenen Tankstelle.

191
00:11:40,610 --> 00:11:43,240
>> Aber das ist sicherlich nicht
vollständige Liste.

192
00:11:43,240 --> 00:11:46,340
Schauen Sie sich die Spezifikation für das volle
Liste, oder vielleicht vorschlagen

193
00:11:46,340 --> 00:11:47,840
Ihre eigenen, um Ihren TF.

194
00:11:47,840 --> 00:11:48,950
Der Himmel ist die Grenze.

195
00:11:48,950 --> 00:11:53,110
Dies ist Ihre letzte CS50 p-Set,
so viel Spaß mit ihm.

196
00:11:53,110 --> 00:11:56,360
Dies war CS50 Shuttle.

197
00:11:56,360 --> 00:11:59,230
>> Ich muss sagen, es war ein Vergnügen
macht diese für Sie mit der

198
00:11:59,230 --> 00:12:00,400
Produktionsteam.

199
00:12:00,400 --> 00:12:04,330
Und ich hoffe, dass Sie habe
genießen Sie sie, wie gut.

200
00:12:04,330 --> 00:12:06,040
Mein Name ist Zamyla.

201
00:12:06,040 --> 00:12:08,310
Und das war CS50.

202
00:12:08,310 --> 00:12:16,363