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

2
00:00:09,870 --> 00:00:13,360
>> ZAMYLA CHAN: Nå, her er vi,
den sidste p-sat i CS50.

3
00:00:13,360 --> 00:00:17,040
Lykønsker jer fra at have
kommet så langt, siden din første Hello

4
00:00:17,040 --> 00:00:20,090
Worlds og udskrifter op
Pyramiderne til Mario.

5
00:00:20,090 --> 00:00:21,930
Du har lavet en hjemmeside i sidste uge.

6
00:00:21,930 --> 00:00:25,110
Og vi kommer til at gøre en anden
i denne uge, en, der giver dig mulighed for at

7
00:00:25,110 --> 00:00:28,570
køre rundt i Harvard campus, plukke
op CS50 ansatte og

8
00:00:28,570 --> 00:00:31,910
bringe dem tilbage til deres
beboelseshuse.

9
00:00:31,910 --> 00:00:35,400
>> Nu i sidste uge arbejdede vi i PHP,
en server side sprog.

10
00:00:35,400 --> 00:00:38,250
Til dette p-sæt, vi får introduceret
til JavaScript, som er en

11
00:00:38,250 --> 00:00:40,610
klientsiden sprog.

12
00:00:40,610 --> 00:00:44,020
Så lad os tage et kig på nogle af de
fordeling kode, der er leveret til

13
00:00:44,020 --> 00:00:46,210
dig til dette p-sæt.

14
00:00:46,210 --> 00:00:49,700
I mappen JavaScript, vil der
være en flok JavaScript-filer.

15
00:00:49,700 --> 00:00:53,600
>> Der er buildings.js, som indeholder en
vifte af bygninger omkring Harvard

16
00:00:53,600 --> 00:00:57,340
campus med deres oplysninger
og position.

17
00:00:57,340 --> 00:01:01,630
Houses.js er en vifte af Harvard
beboelseshuse med deres

18
00:01:01,630 --> 00:01:04,030
længde-og breddegrader.

19
00:01:04,030 --> 00:01:08,600
Passengers.js indeholder en række
passagerer, de CS50 ansatte

20
00:01:08,600 --> 00:01:11,640
at du vil være at bringe tilbage til
deres bolig huse.

21
00:01:11,640 --> 00:01:16,450
>> Math3D.js, der indeholder en masse af
funktioner at gøre med bevægelsen.

22
00:01:16,450 --> 00:01:19,500
Hvis du er matematisk minded, så
Jeg byder dig velkommen til at tage et kig.

23
00:01:19,500 --> 00:01:23,530
Men du behøver ikke at forstå
alt derinde.

24
00:01:23,530 --> 00:01:26,710
Shuttle.js, der beskæftiger sig med
Shuttle bevægelse.

25
00:01:26,710 --> 00:01:31,450
Og index.html er den hjemmeside, hvor
alting sker, virkelig, hvor

26
00:01:31,450 --> 00:01:33,610
brugeren interagerer med webstedet.

27
00:01:33,610 --> 00:01:39,110
>> Service.css er CSS style sheet,
der udover Twitter

28
00:01:39,110 --> 00:01:43,960
Bootstrap Library, kontrol
hvordan index.html udseende.

29
00:01:43,960 --> 00:01:48,190
Og så har vi også service.js, som
indeholder servicefunktioner for

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

31
00:01:49,010 --> 00:01:53,010
Og her er, hvor du kommer til at være
udfylde nogle af de til-huskeliste.

32
00:01:53,010 --> 00:01:56,600
>> Lad os nu tage et kig på objekter og
associative arrays i JavaScript,

33
00:01:56,600 --> 00:01:59,360
hvor der for alle henseender,
er indbyrdes udskiftelige.

34
00:01:59,360 --> 00:02:03,030
Hvis jeg ønskede at lave et objekt en variabel
kaldes en tryllestav, ville jeg

35
00:02:03,030 --> 00:02:04,290
erklære den.

36
00:02:04,290 --> 00:02:09,350
Og inden for disse krøllede parenteser, ville jeg
specificere, kernen er enhjørning, træ

37
00:02:09,350 --> 00:02:12,710
er kirsebær, og længden er 13.

38
00:02:12,710 --> 00:02:16,370
>> Nu kan jeg også få adgang til værdier
af objekter ved hjælp

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

40
00:02:18,270 --> 00:02:22,610
Så wand indeks kerne, kan jeg indstille
der svarer til enhjørning, eller

41
00:02:22,610 --> 00:02:24,710
kontrollere, at hvis jeg har brug for.

42
00:02:24,710 --> 00:02:28,890
Eller jeg kan bruge dot operatør
wand.wood lig kirsebær, og

43
00:02:28,890 --> 00:02:30,280
så videre og så videre.

44
00:02:30,280 --> 00:02:33,930
Så du kan se, at associative arrays og
objekter i JavaScript vil være

45
00:02:33,930 --> 00:02:37,710
udskiftelige, og vilje
komme i ganske handy.

46
00:02:37,710 --> 00:02:41,570
>> Så ser vi en vifte af bygninger
i buildings.js,

47
00:02:41,570 --> 00:02:43,870
igen, et array af objekter.

48
00:02:43,870 --> 00:02:48,500
Hvis jeg ønskede at gøre en række af de bedste
bygninger på Harvard campus, derefter

49
00:02:48,500 --> 00:02:49,710
Jeg ville gøre det som følger.

50
00:02:49,710 --> 00:02:55,250
Ved hjælp af dette objekt notation, hvor
Jeg gemmer roden, navn, adresse,

51
00:02:55,250 --> 00:03:00,260
breddegrad og længdegrad for hver
enkelt bygning objekt.

52
00:03:00,260 --> 00:03:02,930
>> Lad os hurtigt tale om variable
i JavaScript.

53
00:03:02,930 --> 00:03:07,760
Som PHP, JavaScript variabler
er svagt eller løst skrevet.

54
00:03:07,760 --> 00:03:14,120
Hvis du vil oprette en lokal variabel, du præfiks
variabelnavnet med V-A-R, var.

55
00:03:14,120 --> 00:03:17,010
Nu, i JavaScript, funktioner
begrænse omfanget af variabler.

56
00:03:17,010 --> 00:03:20,600
Så hvis du har en lokal variabel i
en funktion, så andre funktioner

57
00:03:20,600 --> 00:03:22,060
kan ikke få adgang til den.

58
00:03:22,060 --> 00:03:26,090
>> Men i modsætning til C, loops og betingelser ikke
begrænse omfanget af en variabel.

59
00:03:26,090 --> 00:03:30,600
Så selv hvis du erklære den inde i en
tilstand, hele funktionen vil

60
00:03:30,600 --> 00:03:32,810
har adgang til det.

61
00:03:32,810 --> 00:03:35,820
Nu, uden var, den variable
vil være global.

62
00:03:35,820 --> 00:03:39,170
Så hvis du bare erklære navn og
tildele en værdi, så er variabel

63
00:03:39,170 --> 00:03:41,900
vil være en global variabel
i JavaScript.

64
00:03:41,900 --> 00:03:48,480
>> Nu, i huse, vi har en associativ
vifte af værten tekstobjekter, hvor

65
00:03:48,480 --> 00:03:52,100
hvert hus er blot en breddegrad
og en længde.

66
00:03:52,100 --> 00:03:55,140
Så har vi passagererne
array, som er en matrix

67
00:03:55,140 --> 00:03:57,370
af objekttypen passager.

68
00:03:57,370 --> 00:04:01,620
Så hver passager har en bruger
navn, et navn og et hus.

69
00:04:01,620 --> 00:04:04,840
>> Bemærk, at jeg siger af type
passager, som virkelig bare betyder

70
00:04:04,840 --> 00:04:08,150
at hvert objekt har
samme nøgle værdi par.

71
00:04:08,150 --> 00:04:12,830
Så hver objekt af typen passageren har
et brugernavn, et navn og et hus.

72
00:04:12,830 --> 00:04:14,850
Så hvad skal vi
gøre for p-sæt?

73
00:04:14,850 --> 00:04:20,779
Nå, vi er nødt til at tillade brugere at plukke
up ansatte at vise alle

74
00:04:20,779 --> 00:04:25,080
de ansatte, der i øjeblikket
vores bus til at slippe dem ud.

75
00:04:25,080 --> 00:04:29,395
Og så vil vi også tale om ekstra
funktioner, der kan gennemføres for

76
00:04:29,395 --> 00:04:30,980
Shuttle p-sæt.

77
00:04:30,980 --> 00:04:33,610
>> Men lad os tale om afhentning først.

78
00:04:33,610 --> 00:04:37,480
Ansigter CS50 personale har været
plantet over hele campus, hvor hver

79
00:04:37,480 --> 00:04:41,750
ansigt er implementeret som et sted mærke
på 3D Jorden, og som en

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

81
00:04:44,020 --> 00:04:47,880
Så når brugeren klikker på Pickup
knap, vi ønsker at tilføje nærheden

82
00:04:47,880 --> 00:04:49,590
passagerer til rumfærgen.

83
00:04:49,590 --> 00:04:53,650
Og vi ønsker også at fjerne deres plads
markere fra verden og fjerne deres

84
00:04:53,650 --> 00:04:58,060
markør på kortet, som angiver, at
de er i vores shuttle nu.

85
00:04:58,060 --> 00:05:02,520
>> Så hvordan kan vi opdage, hvis passagerer
er inden for rækkevidde af vores shuttle?

86
00:05:02,520 --> 00:05:06,670
Nå, den funktion afstand, så
shuttle.distance, passerer i

87
00:05:06,670 --> 00:05:10,630
bredde og længde, vil beregne
afstanden fra den aktuelle position

88
00:05:10,630 --> 00:05:14,220
af rumfærgen til det punkt,
du angiver med, at i betragtning

89
00:05:14,220 --> 00:05:15,860
bredde og længde.

90
00:05:15,860 --> 00:05:19,180
Så du kan bruge dette til at beregne
afstand fra rumfærgen til

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

92
00:05:20,310 --> 00:05:24,040
>> Men hvordan kan du vide, hvor
passagererne er?

93
00:05:24,040 --> 00:05:27,510
Nå, det er, hvor vi bliver nødt til at
redigere populate funktionen.

94
00:05:27,510 --> 00:05:32,500
Befolke steder alle de ansatte
i antallet af passagerer i verdens

95
00:05:32,500 --> 00:05:36,300
og ind på kortet, men ikke
gemme deres placering.

96
00:05:36,300 --> 00:05:39,850
Så måske du kan gemme deres
anbringe mærker og markører

97
00:05:39,850 --> 00:05:41,570
i nogle globale array.

98
00:05:41,570 --> 00:05:45,780
>> Nu er der allerede en global matrix
lagring af oplysninger fra passagererne.

99
00:05:45,780 --> 00:05:49,960
Passagererne array-butikker hver
passagerens navn og deres hus.

100
00:05:49,960 --> 00:05:54,985
Så måske du kan tilføje nogle få parametre
der til de passager objekter.

101
00:05:54,985 --> 00:05:58,150
>> For at hjælpe os med at opdage alle de passagerer
inden for rækkevidde af vores

102
00:05:58,150 --> 00:06:02,485
shuttle, lad os sløjfe gennem alle
passagerer i passagerer matrix.

103
00:06:02,485 --> 00:06:07,790
En for-løkke i JavaScript kan se
noget som dette, meget lig

104
00:06:07,790 --> 00:06:13,200
dem, for sløjfer i C. Eller vi kan bruge en
alternativ til loop struktur,

105
00:06:13,200 --> 00:06:18,680
var jeg i array, hvor jeg vil stadig være
indekset, men du behøver ikke at

106
00:06:18,680 --> 00:06:23,310
specificere array.length
tilstand og i + +.

107
00:06:23,310 --> 00:06:26,130
>> Hver passager placering er
afgivet deres plads mærke.

108
00:06:26,130 --> 00:06:29,800
Men stedet mærke er ikke det
breddegrad og længdegrad.

109
00:06:29,800 --> 00:06:34,170
Vi er nødt til at få adgang til disse parametre ved
få geometri, ved hjælp af get

110
00:06:34,170 --> 00:06:38,180
geometri på stedet mærket, og derefter
når vi har den geometri, at få

111
00:06:38,180 --> 00:06:42,580
enten breddegrad eller længdegrad
bruge disse funktioner.

112
00:06:42,580 --> 00:06:45,680
>> Så nu ved vi, hvordan man kan afsløre, om
passagerer er inden

113
00:06:45,680 --> 00:06:47,920
Rækken af ​​vores shuttle.

114
00:06:47,920 --> 00:06:52,050
Når vi har disse passagerer, vi får
ønsker at tilføje passagerer, der er

115
00:06:52,050 --> 00:06:53,140
inden for dette område.

116
00:06:53,140 --> 00:06:57,580
Vi ønsker at give dem mulighed for at hoppe på og tage
en plads på vores shuttle, men kun

117
00:06:57,580 --> 00:06:59,630
hvis vi har plads nok til dem.

118
00:06:59,630 --> 00:07:04,120
>> Den shuttle.seats array vil indikere
hvorvidt sæder er tomme, eller

119
00:07:04,120 --> 00:07:05,890
der er i det sæde.

120
00:07:05,890 --> 00:07:11,160
Så hvis et sæde er tomt, så
at sædet vil være nul.

121
00:07:11,160 --> 00:07:15,930
Så gentage over sæderne array,
kontrol for tomme sæder, lagring

122
00:07:15,930 --> 00:07:20,020
passagerer ind disse sæder, indtil du
ikke har nogen flere tomme sæder.

123
00:07:20,020 --> 00:07:23,330
Og desværre alle andre passagerer
bliver nødt til at vente på

124
00:07:23,330 --> 00:07:26,000
Næste gang shuttle kommer ned.

125
00:07:26,000 --> 00:07:30,280
>> Når de får på rumfærgen, vi ønsker
at fjerne deres sted mærke, som

126
00:07:30,280 --> 00:07:32,580
er deres foto i 3D-verden.

127
00:07:32,580 --> 00:07:38,030
Hvis jeg ønskede at fjerne et sted mark p,
så ville jeg få alle de funktioner,

128
00:07:38,030 --> 00:07:42,820
fra min Jord, fra Google Earth
og derefter fjerne det specifikke sted

129
00:07:42,820 --> 00:07:45,910
markere bruge removeChild funktionen.

130
00:07:45,910 --> 00:07:51,360
Så endelig, lad os fjerne markeringen
ikonet på 2D-kort, for enhver

131
00:07:51,360 --> 00:07:53,650
passager, som vi er picking up.

132
00:07:53,650 --> 00:07:59,790
>> For at fjerne en markør m, så vil jeg
bare udføre m.setMap null.

133
00:07:59,790 --> 00:08:03,670
Gør dette for passagerer inden for rækkevidde,
og du er færdig med pickup.

134
00:08:03,670 --> 00:08:07,890
Diagrammet funktionen skal vise alle
af passagererne, der er i dit

135
00:08:07,890 --> 00:08:11,000
shuttle, og tomt sæde hvis tom.

136
00:08:11,000 --> 00:08:14,420
Så diagram bør gentage over
shuttle.seats, viser

137
00:08:14,420 --> 00:08:21,350
information for hvert indeks passager
og tom plads, hvis dette indeks er nul.

138
00:08:21,350 --> 00:08:26,160
>> Nu, hvis HTML-teksten er sat inde i en
JavaScript-variabel, derefter ved hjælp af

139
00:08:26,160 --> 00:08:31,950
document.getElementById, diagram kan
redigere indre HTML på, at i betragtning

140
00:08:31,950 --> 00:08:36,140
element ved at tildele
HTML-teksten til den

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

142
00:08:40,840 --> 00:08:46,180
Når brugerne klikker på knappen afleveringsstedet
i index.html, vil det kalde

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

144
00:08:47,160 --> 00:08:49,510
Og det er vores opgave at gennemføre denne.

145
00:08:49,510 --> 00:08:54,150
>> I dropoff, vi ønsker at fjerne enhver
passagerer fra shuttle hvis

146
00:08:54,150 --> 00:08:58,740
vi er inden for rækkevidde af deres bestemmelsessted,
deres bolig hus.

147
00:08:58,740 --> 00:09:03,300
Så dropoff bliver nødt til at kontrollere, om
rumfærgen er inden for rækkevidde af nogen af

148
00:09:03,300 --> 00:09:08,200
huse, og fjerne eventuelle nødvendige
passagerer fra rumfærgen.

149
00:09:08,200 --> 00:09:11,020
Så hvordan kan vi kontrollere, hvis vi er
inden for rækkevidde af nogen huse?

150
00:09:11,020 --> 00:09:16,630
Nå, endnu en gang, vil vi gøre brug af
shuttle.distance funktion, passerer

151
00:09:16,630 --> 00:09:20,990
bredde og længde af punktet
at vi tjekker imod.

152
00:09:20,990 --> 00:09:22,730
>> Men hvad er disse punkter?

153
00:09:22,730 --> 00:09:27,210
Nå, huse array, hvis du kan huske
i houses.js, gemmer

154
00:09:27,210 --> 00:09:32,790
bredde og længde af hvert hus i
en associativ array, hvor hver

155
00:09:32,790 --> 00:09:35,980
indeks er navnet på det hus.

156
00:09:35,980 --> 00:09:37,590
Så for at fjerne passagerer -

157
00:09:37,590 --> 00:09:41,820
godt, kun hvis vi er inden for rækkevidde af deres
hus, som de ønsker at gå til.

158
00:09:41,820 --> 00:09:46,380
Så igen, husk at passagerer
gemmer huset, som hver passager

159
00:09:46,380 --> 00:09:48,850
ønsker at gå til.

160
00:09:48,850 --> 00:09:51,670
Hvis de er inden for rækkevidde af deres
hus, så vil vi fjerne det

161
00:09:51,670 --> 00:09:57,200
passager fra shuttle.seats og sæt
deres position i array til null.

162
00:09:57,200 --> 00:10:00,220
>> Lad os nu tale om nogle ekstra funktioner
der kan gennemføres i

163
00:10:00,220 --> 00:10:02,690
det CS50 Shuttle p-sæt.

164
00:10:02,690 --> 00:10:05,850
Der er et punkt system, hvorved
du holde styr på, hvor mange

165
00:10:05,850 --> 00:10:07,520
peger en bruger.

166
00:10:07,520 --> 00:10:11,120
For at slippe væk fra passagerer
succes, kan de få point.

167
00:10:11,120 --> 00:10:15,100
Men for at forsøge at aflevere passagerer
hvor der ikke er nogen hus i nærheden,

168
00:10:15,100 --> 00:10:16,980
godt, kan de blive straffet for det.

169
00:10:16,980 --> 00:10:21,790
Så måske du ønsker at holde styr på
punkterne i en global variabel.

170
00:10:21,790 --> 00:10:25,970
>> Du kan implementere måske en timer, hvor
brugeren har en vis mængde af

171
00:10:25,970 --> 00:10:29,800
tid til at samle op og slippe væk fra en
vist antal passagerer.

172
00:10:29,800 --> 00:10:33,280
Måske endda integrere denne
med pointsystem.

173
00:10:33,280 --> 00:10:39,970
Eller du kan redigere Chart sådan, at
passagerer er ordnet efter hus.

174
00:10:39,970 --> 00:10:45,250
Så det ville nok være en slags
fungere til shuttle.seats.

175
00:10:45,250 --> 00:10:49,240
>> Du kan implementere en flyvende funktion,
hvor, hvis brugeren indtaster Konami

176
00:10:49,240 --> 00:10:53,460
kode, så rumfærgen løfter fra
jorden og rumfærgen kan flyve.

177
00:10:53,460 --> 00:10:58,890
Men for en sikker drop off, bedst at gøre
rumfærgen lande sine hjul på den

178
00:10:58,890 --> 00:11:00,700
jorden først.

179
00:11:00,700 --> 00:11:05,910
Du kan også gennemføre teleportation,
hvor du laver en drop down liste

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

181
00:11:08,380 --> 00:11:12,270
Og vælge en af ​​dem, den
Brugeren vil blive transporteret til

182
00:11:12,270 --> 00:11:14,220
at bygning på campus.

183
00:11:14,220 --> 00:11:16,760
OK, selv om, at rejse gennem
væggene i nogle

184
00:11:16,760 --> 00:11:19,290
bygninger på din vej.

185
00:11:19,290 --> 00:11:22,960
>> Man kan også ændre hastigheden af
shuttle, så brugeren til at øge

186
00:11:22,960 --> 00:11:25,490
eller sænke hastigheden.

187
00:11:25,490 --> 00:11:28,840
Måske du ønsker en global variabel til
holde styr på, hvor meget brændstof

188
00:11:28,840 --> 00:11:31,520
shuttle har faldende
det som du går sammen.

189
00:11:31,520 --> 00:11:35,860
Når du rammer nul, selv om, rumfærgen
vil ikke være i stand til at flytte, medmindre du har

190
00:11:35,860 --> 00:11:40,610
tanket, måske ved hjælp af en knap, eller
selv lave din egen tankstation.

191
00:11:40,610 --> 00:11:43,240
>> Men det er bestemt ikke
en udtømmende liste.

192
00:11:43,240 --> 00:11:46,340
Tjek spec for den fulde
liste, eller måske foreslå

193
00:11:46,340 --> 00:11:47,840
dine egne til din TF.

194
00:11:47,840 --> 00:11:48,950
Himlen er grænsen.

195
00:11:48,950 --> 00:11:53,110
Dette er din sidste CS50 p-sæt,
så have det sjovt med det.

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

197
00:11:56,360 --> 00:11:59,230
>> I got at sige, det har været en fornøjelse
hvilket gør disse til dig med

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

199
00:12:00,400 --> 00:12:04,330
Og jeg håber, at du har
nyde dem, så godt.

200
00:12:04,330 --> 00:12:06,040
Mit navn er Zamyla.

201
00:12:06,040 --> 00:12:08,310
Og dette var CS50.

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