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

2
00:00:09,870 --> 00:00:13,360
>> ZAMYLA CHAN: Tja, här är vi,
den sista p-set i CS50.

3
00:00:13,360 --> 00:00:17,040
Gratulera er från att ha
kommit så långt sedan din första Hej

4
00:00:17,040 --> 00:00:20,090
Världar och utskrift Upp
Pyramider för Mario.

5
00:00:20,090 --> 00:00:21,930
Du gjorde en hemsida förra veckan.

6
00:00:21,930 --> 00:00:25,110
Och vi kommer att göra en annan
den här veckan, en som gör att du kan

7
00:00:25,110 --> 00:00:28,570
köra runt Harvard campus, plocka
upp CS50 personal och

8
00:00:28,570 --> 00:00:31,910
föra dem tillbaka till deras
bostadshus.

9
00:00:31,910 --> 00:00:35,400
>> Nu, i förra veckan vi jobbade i PHP,
en server side språk.

10
00:00:35,400 --> 00:00:38,250
För denna p-set, vi blir introducerade
till JavaScript, vilket är en

11
00:00:38,250 --> 00:00:40,610
side språk klient.

12
00:00:40,610 --> 00:00:44,020
Så låt oss ta en titt på några av de
kodfördelning som är försedd med

13
00:00:44,020 --> 00:00:46,210
för denna p-set.

14
00:00:46,210 --> 00:00:49,700
I JavaScript-mappen, kommer det
vara ett gäng JavaScript-filer.

15
00:00:49,700 --> 00:00:53,600
>> Det finns buildings.js, som innehåller en
samling av byggnader runt Harvard

16
00:00:53,600 --> 00:00:57,340
campus med sin information
och placering.

17
00:00:57,340 --> 00:01:01,630
Houses.js är en samling av Harvard
bostadshus med sina

18
00:01:01,630 --> 00:01:04,030
latituder och longituder.

19
00:01:04,030 --> 00:01:08,600
Passengers.js innehåller en array med
passagerare, de CS50 personal

20
00:01:08,600 --> 00:01:11,640
att du kommer att föra tillbaka till
deras bostäder.

21
00:01:11,640 --> 00:01:16,450
>> Math3D.js, som innehåller en hel del
funktioner för att göra med rörelsen.

22
00:01:16,450 --> 00:01:19,500
Om du är matematiskt sinnade, sedan
Jag välkomnar dig att ta en titt.

23
00:01:19,500 --> 00:01:23,530
Men du måste förstå
allt där.

24
00:01:23,530 --> 00:01:26,710
Shuttle.js, handlar det med
färjans rörelsen.

25
00:01:26,710 --> 00:01:31,450
Och index.html är hemsidan där
allting händer, egentligen, när det

26
00:01:31,450 --> 00:01:33,610
Användaren interagerar med platsen.

27
00:01:33,610 --> 00:01:39,110
>> Service.css är CSS-formatmallen,
vilket utöver den post

28
00:01:39,110 --> 00:01:43,960
Bootstrap Library, kontroller
hur index.html ser ut.

29
00:01:43,960 --> 00:01:48,190
Och då har vi också service.js, vilket
innehåller servicefunktioner för

30
00:01:48,190 --> 00:01:49,010
rymdfärjan.

31
00:01:49,010 --> 00:01:53,010
Och här är där du kommer att bli
fylla i en del av den att göra-.

32
00:01:53,010 --> 00:01:56,600
>> Nu ska vi ta en titt på föremål och
associativa arrayer i JavaScript,

33
00:01:56,600 --> 00:01:59,360
, som för alla syften och ändamål,
är utbytbara.

34
00:01:59,360 --> 00:02:03,030
Om jag ville göra ett objekt en variabel
kallas ett trollspö, skulle jag

35
00:02:03,030 --> 00:02:04,290
förklara den.

36
00:02:04,290 --> 00:02:09,350
Och inom dessa klamrar, skulle jag
specificera, är kärnan enhörning, trä

37
00:02:09,350 --> 00:02:12,710
är körsbär, och längden är 13.

38
00:02:12,710 --> 00:02:16,370
>> Nu, jag kan också komma åt värden
av objekt med

39
00:02:16,370 --> 00:02:18,270
associativ array notation.

40
00:02:18,270 --> 00:02:22,610
Så trollspö index kärna, kan jag ställa
som lika med enhörning, eller

41
00:02:22,610 --> 00:02:24,710
kontrollera att om jag behöver.

42
00:02:24,710 --> 00:02:28,890
Eller jag kan använda punktoperatorn
wand.wood lika körsbär, och

43
00:02:28,890 --> 00:02:30,280
så vidare och så vidare.

44
00:02:30,280 --> 00:02:33,930
Så du ser att associativa arrayer och
objekt i JavaScript kommer att bli

45
00:02:33,930 --> 00:02:37,710
utbytbara och viljan
komma ganska praktiskt.

46
00:02:37,710 --> 00:02:41,570
>> Sedan ser vi en rad byggnader
i buildings.js,

47
00:02:41,570 --> 00:02:43,870
igen, en uppsättning av objekt.

48
00:02:43,870 --> 00:02:48,500
Om jag ville göra en samling av de bästa
byggnader på Harvard campus, sedan

49
00:02:48,500 --> 00:02:49,710
Jag skulle göra det på följande sätt.

50
00:02:49,710 --> 00:02:55,250
Med användning av detta föremål format där
Jag lagrar roten, namn, adress,

51
00:02:55,250 --> 00:03:00,260
latitud och longitud för varje
enda byggnad objektet.

52
00:03:00,260 --> 00:03:02,930
>> Låt oss snabbt tala om variabler
i JavaScript.

53
00:03:02,930 --> 00:03:07,760
Liksom PHP, JavaScript-variabler
är svagt eller löst skrivit.

54
00:03:07,760 --> 00:03:14,120
För att skapa en lokal variabel, prefix du
variabelnamnet med V-A-R, var.

55
00:03:14,120 --> 00:03:17,010
Nu, i JavaScript, funktioner kommer
begränsa omfattningen av variabler.

56
00:03:17,010 --> 00:03:20,600
Så om du har en lokal variabel inom
en funktion, då andra funktioner

57
00:03:20,600 --> 00:03:22,060
kan inte komma åt den.

58
00:03:22,060 --> 00:03:26,090
>> Men till skillnad från C, loopar och villkor inte
begränsa omfattningen av en variabel.

59
00:03:26,090 --> 00:03:30,600
Så även om du förklara den inne i en
tillstånd, hela funktionen kommer

60
00:03:30,600 --> 00:03:32,810
ha tillgång till den.

61
00:03:32,810 --> 00:03:35,820
Nu, utan var, variabeln
kommer att vara global.

62
00:03:35,820 --> 00:03:39,170
Så om du bara deklarera namn och
tilldela ett värde, då den variabeln

63
00:03:39,170 --> 00:03:41,900
kommer att vara en global variabel
i JavaScript.

64
00:03:41,900 --> 00:03:48,480
>> Nu, i hus, har vi en associativ
samling av värdtextobjekt, där

65
00:03:48,480 --> 00:03:52,100
varje hus är bara en latitud
och en longitud.

66
00:03:52,100 --> 00:03:55,140
Sedan har vi passagerarna
matris, som är en array

67
00:03:55,140 --> 00:03:57,370
av objekttypen passageraren.

68
00:03:57,370 --> 00:04:01,620
Så varje passagerare har en användare
namn, ett namn, och ett hus.

69
00:04:01,620 --> 00:04:04,840
>> Lägg märke till att jag säger om typ
passagerare, vilket egentligen bara innebär

70
00:04:04,840 --> 00:04:08,150
att varje objekt har den
Samma nyckel värdepar.

71
00:04:08,150 --> 00:04:12,830
Så varje objekt av typen passagerare har
ett användarnamn, ett namn, och ett hus.

72
00:04:12,830 --> 00:04:14,850
Så vad gör vi behöver
göra för p-set?

73
00:04:14,850 --> 00:04:20,779
Tja, måste vi tillåta användare att plocka
upp personal, för att visa alla

74
00:04:20,779 --> 00:04:25,080
den personal som för närvarande
vår buss, och att släppa dem.

75
00:04:25,080 --> 00:04:29,395
Och sedan kommer vi också tala om extra
funktioner som kan genomföras för

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

77
00:04:30,980 --> 00:04:33,610
>> Men låt oss tala om pickup först.

78
00:04:33,610 --> 00:04:37,480
Ansiktena på CS50 personal har varit
planterade över hela campus, där varje

79
00:04:37,480 --> 00:04:41,750
ansikte genomförs som en plats märke
på 3D jorden, och som en

80
00:04:41,750 --> 00:04:44,020
markör på 2D-kartan.

81
00:04:44,020 --> 00:04:47,880
Så när användaren klickar på Pickup
knapp, vi vill lägga till i närheten

82
00:04:47,880 --> 00:04:49,590
passagerare till skytteln.

83
00:04:49,590 --> 00:04:53,650
Och vi vill också ta bort sin plats
markera från världen och ta bort deras

84
00:04:53,650 --> 00:04:58,060
markör från kartan, vilket tyder på att
de är i vår buss nu.

85
00:04:58,060 --> 00:05:02,520
>> Så hur ska vi upptäcka om passagerare
är inom räckhåll för vår buss?

86
00:05:02,520 --> 00:05:06,670
Tja, funktionsavstånd, så
shuttle.distance, som går i

87
00:05:06,670 --> 00:05:10,630
latitud och longitud, beräknar
avståndet från den aktuella positionen

88
00:05:10,630 --> 00:05:14,220
av skytteln till den grad att
du anger med den som ges

89
00:05:14,220 --> 00:05:15,860
latitud och longitud.

90
00:05:15,860 --> 00:05:19,180
Så du kan använda detta för att beräkna
avstånd från buss till

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

92
00:05:20,310 --> 00:05:24,040
>> Men hur vet du var
passagerarna är?

93
00:05:24,040 --> 00:05:27,510
Tja, det är där vi måste
redigera populate funktion.

94
00:05:27,510 --> 00:05:32,500
Platser Fylla alla anställda
på passagerare i världs

95
00:05:32,500 --> 00:05:36,300
och in i kartan, men inte
förvara sin plats.

96
00:05:36,300 --> 00:05:39,850
Så kanske kan du lagra sina
placera märken och markörer

97
00:05:39,850 --> 00:05:41,570
i någon global array.

98
00:05:41,570 --> 00:05:45,780
>> Nu, redan finns det en global array
lagra information från passagerarna.

99
00:05:45,780 --> 00:05:49,960
Passagerarna array lagrar vardera
passagerarens namn och deras hus.

100
00:05:49,960 --> 00:05:54,985
Så kanske du kan lägga till några parametrar
det till passagerarobjekt.

101
00:05:54,985 --> 00:05:58,150
>> För att hjälpa oss att upptäcka alla de passagerare
inom räckhåll för vår

102
00:05:58,150 --> 00:06:02,485
transfer, låt oss slinga genom alla de
passagerare i passagerar arrayen.

103
00:06:02,485 --> 00:06:07,790
En for-loop i JavaScript kan se
ungefär så här, mycket lik

104
00:06:07,790 --> 00:06:13,200
de för loopar i C. Eller vi kan använda en
alternativ för slingstruktur, för

105
00:06:13,200 --> 00:06:18,680
var jag i rad, där jag kommer fortfarande att vara
index, men du behöver inte

106
00:06:18,680 --> 00:06:23,310
specificera Array.length
skick och jag + +.

107
00:06:23,310 --> 00:06:26,130
>> Varje passagerare läge är
som ges av deras plats märket.

108
00:06:26,130 --> 00:06:29,800
Men den plats märket inte är det
latitud och longitud.

109
00:06:29,800 --> 00:06:34,170
Vi måste komma åt dessa parametrar genom
få geometrin, med hjälp av get

110
00:06:34,170 --> 00:06:38,180
geometri på den plats märket, och sedan
när vi har geometri, att få

111
00:06:38,180 --> 00:06:42,580
antingen latitud och longitud
att använda dessa funktioner.

112
00:06:42,580 --> 00:06:45,680
>> Så nu vet vi hur man upptäcker om
passagerare inom

113
00:06:45,680 --> 00:06:47,920
spektrum av vår buss.

114
00:06:47,920 --> 00:06:52,050
När vi har dessa passagerare, vi ska
vill lägga till några passagerare som

115
00:06:52,050 --> 00:06:53,140
inom detta intervall.

116
00:06:53,140 --> 00:06:57,580
Vi vill låta dem hoppa på och ta
en plats på vår buss, men bara

117
00:06:57,580 --> 00:06:59,630
om vi har tillräckligt med utrymme för dem.

118
00:06:59,630 --> 00:07:04,120
>> Den shuttle.seats arrayen anger
om platserna är tomma, eller

119
00:07:04,120 --> 00:07:05,890
som finns på den platsen.

120
00:07:05,890 --> 00:07:11,160
Så om en plats är tom, då
att stolen kommer att vara noll.

121
00:07:11,160 --> 00:07:15,930
Så iterera över sätena arrayen,
kontroll för tomma platser, lagring

122
00:07:15,930 --> 00:07:20,020
passagerare i dessa säten tills du
har inte några fler tomma platser.

123
00:07:20,020 --> 00:07:23,330
Och tyvärr, alla andra passagerare
kommer att behöva vänta på att

124
00:07:23,330 --> 00:07:26,000
Nästa gång bollen kommer ner.

125
00:07:26,000 --> 00:07:30,280
>> När de får på buss, vi vill ha
att ta bort sin plats märke, som

126
00:07:30,280 --> 00:07:32,580
är deras foto i 3D-världen.

127
00:07:32,580 --> 00:07:38,030
Om jag ville ta bort en plats mark p,
då skulle jag få alla funktioner

128
00:07:38,030 --> 00:07:42,820
från min jord, från Google Earth,
och sedan ta bort den specifika platsen

129
00:07:42,820 --> 00:07:45,910
Markera med hjälp av removeChild funktionen.

130
00:07:45,910 --> 00:07:51,360
Sedan slutligen, låt oss ta bort markeringen,
ikonen på 2D-kartan, för alla

131
00:07:51,360 --> 00:07:53,650
passagerare som vi plockar upp.

132
00:07:53,650 --> 00:07:59,790
>> För att ta bort en markör m, sedan ska jag
bara köra m.setMap null.

133
00:07:59,790 --> 00:08:03,670
Gör detta för alla passagerare inom räckhåll,
och du är klar upphämtning.

134
00:08:03,670 --> 00:08:07,890
Diagrammet Funktionen ska visa alla
av passagerarna som finns i din

135
00:08:07,890 --> 00:08:11,000
transfer, och tom plats om de är tomma.

136
00:08:11,000 --> 00:08:14,420
Så diagram bör iterera över
shuttle.seats, visar

137
00:08:14,420 --> 00:08:21,350
passagerarinformation för varje index,
och tom plats om detta index är null.

138
00:08:21,350 --> 00:08:26,160
>> Nu om HTML-text sätts insidan av en
JavaScript-variabel, sedan med hjälp av

139
00:08:26,160 --> 00:08:31,950
document.getElementById, diagram kan
redigera inre HTML för att med tanke

140
00:08:31,950 --> 00:08:36,140
elementet genom att tilldela
HTML-koden för den

141
00:08:36,140 --> 00:08:40,840
document.getElementById inre HTML variabel.

142
00:08:40,840 --> 00:08:46,180
När användarna klickar på knappen Drop Off
i index.html, det ska ringa

143
00:08:46,180 --> 00:08:47,160
dropoff funktion.

144
00:08:47,160 --> 00:08:49,510
Och det är vår uppgift att genomföra det.

145
00:08:49,510 --> 00:08:54,150
>> I avlämning, vi vill ta bort alla
passagerare från skytteln endast om

146
00:08:54,150 --> 00:08:58,740
vi är i intervallet sin destination,
deras bostadshus.

147
00:08:58,740 --> 00:09:03,300
Så avlämning kommer att behöva kontrollera om
bollen är inom räckhåll för någon av de

148
00:09:03,300 --> 00:09:08,200
hus, och ta bort allt som behövs
passagerare från skytteln.

149
00:09:08,200 --> 00:09:11,020
Så hur ska vi kolla om vi är
inom räckhåll för alla hus?

150
00:09:11,020 --> 00:09:16,630
Tja, ännu en gång, ska vi utnyttja den
shuttle.distance funktion, som går i

151
00:09:16,630 --> 00:09:20,990
latitud och longitud för punkt
att vi kollar emot.

152
00:09:20,990 --> 00:09:22,730
>> Men vad är dessa punkter?

153
00:09:22,730 --> 00:09:27,210
Tja, det hus arrayen, om du kommer ihåg
i houses.js lagrar

154
00:09:27,210 --> 00:09:32,790
latitud och longitud för varje hus i
en associativ array, där varje

155
00:09:32,790 --> 00:09:35,980
index är namnet på det huset.

156
00:09:35,980 --> 00:09:37,590
Sen att avlägsna passagerare -

157
00:09:37,590 --> 00:09:41,820
bra, bara om vi är i intervallet sin
hus som de vill gå till.

158
00:09:41,820 --> 00:09:46,380
Så återigen, kom ihåg att passagerarna
lagrar huset att varje passagerare

159
00:09:46,380 --> 00:09:48,850
vill gå till.

160
00:09:48,850 --> 00:09:51,670
Om de är inom räckhåll för deras
hus, då vi kommer att ta bort det

161
00:09:51,670 --> 00:09:57,200
passagerare från shuttle.seats och set
deras position i arrayen på null.

162
00:09:57,200 --> 00:10:00,220
>> Nu ska vi tala om några extra funktioner
som kan genomföras i

163
00:10:00,220 --> 00:10:02,690
den CS50 Shuttle p-set.

164
00:10:02,690 --> 00:10:05,850
Det finns ett poängsystem som innebär att
du hålla reda på hur många

165
00:10:05,850 --> 00:10:07,520
pekar en användare har.

166
00:10:07,520 --> 00:10:11,120
För släppa av passagerare
framgångsrikt, kan de få poäng.

167
00:10:11,120 --> 00:10:15,100
Men för att försöka släppa av passagerare
där det inte finns några hus i närheten,

168
00:10:15,100 --> 00:10:16,980
väl, kan de få straffas för det.

169
00:10:16,980 --> 00:10:21,790
Så kanske du vill hålla reda på
punkterna i en global variabel.

170
00:10:21,790 --> 00:10:25,970
>> Du kan implementera kanske en timer, där
användaren har en viss mängd

171
00:10:25,970 --> 00:10:29,800
tid för att plocka upp och släppa av en
visst antal passagerare.

172
00:10:29,800 --> 00:10:33,280
Kanske till och med integrera denna
med poängsystem.

173
00:10:33,280 --> 00:10:39,970
Eller så kan du redigera diagram så att
passagerare är sorterade efter hus.

174
00:10:39,970 --> 00:10:45,250
Så det skulle förmodligen vara ett slags
fungera till shuttle.seats.

175
00:10:45,250 --> 00:10:49,240
>> Du kan genomföra en flygande funktion,
där om användaren inmatar Konami

176
00:10:49,240 --> 00:10:53,460
koden och sedan skytteln lyfter från
mark och skytteln kan flyga.

177
00:10:53,460 --> 00:10:58,890
Men för en säker avhopp, bäst att göra
skytteln landar hjulen på

178
00:10:58,890 --> 00:11:00,700
slipas först.

179
00:11:00,700 --> 00:11:05,910
Du kan också implementera teleportation,
där du gör en rullgardinsmeny med

180
00:11:05,910 --> 00:11:08,380
byggnader i index.html.

181
00:11:08,380 --> 00:11:12,270
Och att välja en av dem, den
Användaren kommer att transporteras till

182
00:11:12,270 --> 00:11:14,220
att bygga på campus.

183
00:11:14,220 --> 00:11:16,760
OK, fast, att färdas genom
väggarna i några

184
00:11:16,760 --> 00:11:19,290
byggnader på vägen dit.

185
00:11:19,290 --> 00:11:22,960
>> Du kan också ändra hastigheten på
skicka, så att användaren kan öka

186
00:11:22,960 --> 00:11:25,490
eller minska hastigheten.

187
00:11:25,490 --> 00:11:28,840
Kanske du vill ha en global variabel för
hålla reda på hur mycket bränsle

188
00:11:28,840 --> 00:11:31,520
Shuttle har, minskar
det när du går längs.

189
00:11:31,520 --> 00:11:35,860
När du träffar noll, men, skytteln
kommer inte att kunna gå om du inte har

190
00:11:35,860 --> 00:11:40,610
tankas, kanske med hjälp av en knapp, eller
även göra din egen bensinstation.

191
00:11:40,610 --> 00:11:43,240
>> Men det är verkligen inte
en uttömmande lista.

192
00:11:43,240 --> 00:11:46,340
Kolla på spec för hela
lista, eller kanske föreslå

193
00:11:46,340 --> 00:11:47,840
egen hand till TF.

194
00:11:47,840 --> 00:11:48,950
Himlen är gränsen.

195
00:11:48,950 --> 00:11:53,110
Det här är din sista CS50 p-set,
så ha kul med det.

196
00:11:53,110 --> 00:11:56,360
Detta var CS50 Shuttle.

197
00:11:56,360 --> 00:11:59,230
>> Jag måste säga, det har varit ett nöje
gör dessa för dig med

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

199
00:12:00,400 --> 00:12:04,330
Och jag hoppas att du har
njuta av dem, liksom.

200
00:12:04,330 --> 00:12:06,040
Mitt namn är Zamyla.

201
00:12:06,040 --> 00:12:08,310
Och detta var CS50.

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