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

2
00:00:09,870 --> 00:00:13,360
>> ZAMYLA CHAN: Bé, aquí estem,
l'últim p-set en CS50.

3
00:00:13,360 --> 00:00:17,040
Feliciti a si mateixos de tenir
arribat tan lluny, ja que la seva primera Hola

4
00:00:17,040 --> 00:00:20,090
Mons i impressió Up
Piràmides de Mario.

5
00:00:20,090 --> 00:00:21,930
Vostè ha fet un lloc web la setmana passada.

6
00:00:21,930 --> 00:00:25,110
I estarem fent una altra
aquesta setmana, un que li permet al

7
00:00:25,110 --> 00:00:28,570
conduir pel campus de la Universitat de Harvard, recollint
fins als membres i del personal CS50

8
00:00:28,570 --> 00:00:31,910
portar de tornada al seu
cases residencials.

9
00:00:31,910 --> 00:00:35,400
>> Ara, la setmana passada es va treballar en PHP,
un llenguatge del costat del servidor.

10
00:00:35,400 --> 00:00:38,250
Per aquesta p-set, ens anem a introduir
a JavaScript, que és un

11
00:00:38,250 --> 00:00:40,610
llenguatge del costat del client.

12
00:00:40,610 --> 00:00:44,020
Així que donem una ullada a alguns dels
codi de distribució que es proporciona

13
00:00:44,020 --> 00:00:46,210
que per a aquest p-set.

14
00:00:46,210 --> 00:00:49,700
A la carpeta de JavaScript, haurà
ser un munt d'arxius de JavaScript.

15
00:00:49,700 --> 00:00:53,600
>> Hi ha buildings.js, que conté un
conjunt d'edificis al voltant de Harvard

16
00:00:53,600 --> 00:00:57,340
campus amb la seva informació
i la posició.

17
00:00:57,340 --> 00:01:01,630
Houses.js és una matriu de Harvard
cases residencials, amb el seu

18
00:01:01,630 --> 00:01:04,030
latituds i longituds.

19
00:01:04,030 --> 00:01:08,600
Passengers.js conté una matriu de
passatgers, els membres del personal CS50

20
00:01:08,600 --> 00:01:11,640
que vostè va a portar de tornada a
casa residencials.

21
00:01:11,640 --> 00:01:16,450
>> Math3D.js, que conté una gran quantitat de
funcions que fer amb el moviment.

22
00:01:16,450 --> 00:01:19,500
Si vostè és matemàticament ment oberta, llavors
Els dono la benvinguda a fer una ullada.

23
00:01:19,500 --> 00:01:23,530
Però vostè no necessita entendre
tot allà.

24
00:01:23,530 --> 00:01:26,710
Shuttle.js, que s'ocupa de
el moviment de la llançadora.

25
00:01:26,710 --> 00:01:31,450
I index.html és la pàgina principal on
tot passa, en realitat, en què el

26
00:01:31,450 --> 00:01:33,610
usuari està interactuant amb el lloc.

27
00:01:33,610 --> 00:01:39,110
>> Service.css és el full d'estil CSS,
que a més de Twitter

28
00:01:39,110 --> 00:01:43,960
Biblioteca Bootstrap, controls
com index.html mirades.

29
00:01:43,960 --> 00:01:48,190
I després també hem service.js, que
conté funcions de servei per

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

31
00:01:49,010 --> 00:01:53,010
I aquí és on vostè va a estar
omplir algunes de les tasques per-de.

32
00:01:53,010 --> 00:01:56,600
>> Ara donem una ullada als objectes i
matrius associatives en JavaScript,

33
00:01:56,600 --> 00:01:59,360
que, per a tots els intents i propòsits,
són intercanviables.

34
00:01:59,360 --> 00:02:03,030
Si volgués fer un objecte una variable
anomenat una vareta, em

35
00:02:03,030 --> 00:02:04,290
declarar.

36
00:02:04,290 --> 00:02:09,350
I dins d'aquestes claus, ho faria
especificar, el nucli és el unicorn, la fusta

37
00:02:09,350 --> 00:02:12,710
és cirera, i la longitud és 13.

38
00:02:12,710 --> 00:02:16,370
>> Ara, jo també puc accedir als valors
dels objectes que utilitzen

39
00:02:16,370 --> 00:02:18,270
notació de matriu associativa.

40
00:02:18,270 --> 00:02:22,610
Índex estructural Així vareta, puc establir
que potser l'unicorn, o

41
00:02:22,610 --> 00:02:24,710
comprovar que si necessito.

42
00:02:24,710 --> 00:02:28,890
O puc utilitzar l'operador punt
wand.wood és igual a cirera, i

43
00:02:28,890 --> 00:02:30,280
així successivament i així successivament.

44
00:02:30,280 --> 00:02:33,930
Així que ja veus que les matrius associatives i
objectes en JavaScript seran

45
00:02:33,930 --> 00:02:37,710
intercanviables, i la voluntat
venir en molt pràctic.

46
00:02:37,710 --> 00:02:41,570
>> Després veiem una sèrie d'edificis
en buildings.js,

47
00:02:41,570 --> 00:02:43,870
una altra vegada, un conjunt d'objectes.

48
00:02:43,870 --> 00:02:48,500
Si volgués fer una sèrie dels millors
edificis al campus de Harvard, i després

49
00:02:48,500 --> 00:02:49,710
Jo ho faria de la següent manera.

50
00:02:49,710 --> 00:02:55,250
Usant aquesta notació objecte, on
Emmagatzemo l'arrel, el nom, l'adreça,

51
00:02:55,250 --> 00:03:00,260
latitud i longitud per a cada
objecte únic edifici.

52
00:03:00,260 --> 00:03:02,930
>> Anem ràpidament a parlar de les variables
en JavaScript.

53
00:03:02,930 --> 00:03:07,760
Com PHP, les variables JavaScript
estan feblement o mal escrit.

54
00:03:07,760 --> 00:03:14,120
Per crear una variable local, el prefix
el nom de la variable V-A-R, var.

55
00:03:14,120 --> 00:03:17,010
Ara, en JavaScript, les funcions es
limitar l'abast de les variables.

56
00:03:17,010 --> 00:03:20,600
Així que si vostè té una variable local dins
una funció, llavors altres funcions

57
00:03:20,600 --> 00:03:22,060
no poden accedir-hi.

58
00:03:22,060 --> 00:03:26,090
>> Però a diferència de C, els bucles i les condicions no ho fan
limitar l'abast d'una variable.

59
00:03:26,090 --> 00:03:30,600
Així que fins i tot si es declara dins d'un
condicions, tota la funció es

60
00:03:30,600 --> 00:03:32,810
tenir accés.

61
00:03:32,810 --> 00:03:35,820
Ara, var, la variable
serà global.

62
00:03:35,820 --> 00:03:39,170
Així que si vostè acaba de declarar el nom i
assignar un valor, llavors aquesta variable

63
00:03:39,170 --> 00:03:41,900
serà una variable global
en JavaScript.

64
00:03:41,900 --> 00:03:48,480
>> Ara, a les cases, tenim un associativa
array d'objectes de tipus d'acollida, en els quals

65
00:03:48,480 --> 00:03:52,100
cada casa és només una latitud
i una longitud.

66
00:03:52,100 --> 00:03:55,140
Després tenim als passatgers
matriu, que és una matriu

67
00:03:55,140 --> 00:03:57,370
del tipus d'objecte de passatgers.

68
00:03:57,370 --> 00:04:01,620
Així que cada passatger té un usuari
nom, un nom i una casa.

69
00:04:01,620 --> 00:04:04,840
>> Observi que estic dient de tipus
de passatgers, que en realitat només significa

70
00:04:04,840 --> 00:04:08,150
que cada objecte té el
mateixos parells de valors clau.

71
00:04:08,150 --> 00:04:12,830
Així que cada objecte de tipus passatger té
un nom d'usuari, un nom, i una casa.

72
00:04:12,830 --> 00:04:14,850
Llavors, què hem de
fer per la p-set?

73
00:04:14,850 --> 00:04:20,779
Bé, hem de permetre als usuaris triar
fins als membres del personal, mostrar tots

74
00:04:20,779 --> 00:04:25,080
els membres del personal que estan actualment en
el nostre servei de transport, i per deixar-los anar.

75
00:04:25,080 --> 00:04:29,395
I després també parlarem addicional
característiques que es poden implementar per

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

77
00:04:30,980 --> 00:04:33,610
>> Però parlarem de pickup primer.

78
00:04:33,610 --> 00:04:37,480
Els rostres de personal CS50 han estat
plantat per tot el campus, on cada

79
00:04:37,480 --> 00:04:41,750
la cara s'implementa com una marca de lloc
a la Terra 3D, i com

80
00:04:41,750 --> 00:04:44,020
marcador al mapa 2D.

81
00:04:44,020 --> 00:04:47,880
Així, quan l'usuari fa clic a la recollida
botó, volem afegir proper

82
00:04:47,880 --> 00:04:49,590
els passatgers a la llançadora.

83
00:04:49,590 --> 00:04:53,650
I també volem treure el seu lloc
marca del món i extreure el seu

84
00:04:53,650 --> 00:04:58,060
marcador al mapa, el que indica que
que estan al servei de transport ja.

85
00:04:58,060 --> 00:05:02,520
>> Llavors, com detectar si els passatgers
estan dins de l'abast del nostre servei de trasllat?

86
00:05:02,520 --> 00:05:06,670
Bé, la distància la funció, per la qual cosa
shuttle.distance, passant el

87
00:05:06,670 --> 00:05:10,630
latitud i longitud, calcula
la distància des de la posició actual

88
00:05:10,630 --> 00:05:14,220
del servei de transport fins al punt que
que especifiqui amb què donat

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

90
00:05:15,860 --> 00:05:19,180
Així que vostè pot utilitzar això per a calcular la
distància des del transport a la

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

92
00:05:20,310 --> 00:05:24,040
>> Però, com saber on
els passatgers són?

93
00:05:24,040 --> 00:05:27,510
Bé, aquí és on haurem de
editar la funció poblar.

94
00:05:27,510 --> 00:05:32,500
Omplir tots els llocs dels membres del personal
de passatgers al món

95
00:05:32,500 --> 00:05:36,300
i al mapa, però no ho fa
emmagatzemar la seva ubicació.

96
00:05:36,300 --> 00:05:39,850
Així que potser vostè pot emmagatzemar el seu
col · locar marques i marcadors

97
00:05:39,850 --> 00:05:41,570
d'alguna matriu global.

98
00:05:41,570 --> 00:05:45,780
>> Ara, ja hi ha una matriu global
emmagatzemar la informació dels passatgers.

99
00:05:45,780 --> 00:05:49,960
Les botigues de passatgers cada array
El nom del passatger i de casa.

100
00:05:49,960 --> 00:05:54,985
Així que potser vostè pot afegir alguns paràmetres
allà als objectes de passatgers.

101
00:05:54,985 --> 00:05:58,150
>> Per ajudar-nos a detectar tots els passatgers
dins de l'abast de la nostra

102
00:05:58,150 --> 00:06:02,485
llançadora, bucle ens va deixar a través de tot el
passatgers a la matriu de passatgers.

103
00:06:02,485 --> 00:06:07,790
Un bucle en JavaScript podria veure
alguna cosa com això, molt similar a la

104
00:06:07,790 --> 00:06:13,200
aquells per als bucles en C. O podem utilitzar un
alternativa per a l'estructura de bucle, per

105
00:06:13,200 --> 00:06:18,680
var i en matriu, on jo encara estaré
l'índex, però no cal

106
00:06:18,680 --> 00:06:23,310
especificar el array.length
condició i i + +.

107
00:06:23,310 --> 00:06:26,130
>> La ubicació de cada passatger és
donada per la seva marca de lloc.

108
00:06:26,130 --> 00:06:29,800
Però la marca de lloc no és el
la latitud i la longitud.

109
00:06:29,800 --> 00:06:34,170
Hem d'accedir a aquests paràmetres per
aconseguir la geometria, fent servir get

110
00:06:34,170 --> 00:06:38,180
la geometria en la marca de lloc, i després
una vegada que tenim la geometria, aconseguint

111
00:06:38,180 --> 00:06:42,580
ja sigui la latitud o la longitud
l'ús d'aquestes funcions.

112
00:06:42,580 --> 00:06:45,680
>> Així que ara que sabem com detectar si
els passatgers estan a

113
00:06:45,680 --> 00:06:47,920
gamma del nostre transport.

114
00:06:47,920 --> 00:06:52,050
Un cop tinguem els passatgers, anem a
voleu afegir qualsevol passatger que són

115
00:06:52,050 --> 00:06:53,140
dins d'aquest rang.

116
00:06:53,140 --> 00:06:57,580
Volem que els permeti pujar i prendre
un lloc en el servei de transport, però només

117
00:06:57,580 --> 00:06:59,630
si tenim prou espai per a ells.

118
00:06:59,630 --> 00:07:04,120
>> La matriu shuttle.seats indicarà
si els seients estan buits, o

119
00:07:04,120 --> 00:07:05,890
que està en aquest seient.

120
00:07:05,890 --> 00:07:11,160
Així que si hi ha un seient buit,
aquest seient serà nul.

121
00:07:11,160 --> 00:07:15,930
Així iterar sobre la matriu de seients,
la comprovació de seients buits, emmagatzemar

122
00:07:15,930 --> 00:07:20,020
els passatgers als seients fins que
no tenen cap escó més buides.

123
00:07:20,020 --> 00:07:23,330
I, per desgràcia, cap resta dels passatgers
haurà d'esperar que el

124
00:07:23,330 --> 00:07:26,000
propera vegada que el servei de transport es redueix.

125
00:07:26,000 --> 00:07:30,280
>> Una vegada que aconsegueixen a l'autobús, anem a voler
per eliminar la seva empremta lloc, que

126
00:07:30,280 --> 00:07:32,580
és la seva foto en el món 3D.

127
00:07:32,580 --> 00:07:38,030
Si volgués suprimir un lloc mark p,
llavors m'agradaria tenir totes les característiques

128
00:07:38,030 --> 00:07:42,820
de la meva terra, des del Google Earth,
i després eliminar aquest lloc específic

129
00:07:42,820 --> 00:07:45,910
marcar utilitzant la funció removeChild.

130
00:07:45,910 --> 00:07:51,360
Després, finalment, anem a eliminar el marcador,
la icona del mapa en 2D, per a qualsevol

131
00:07:51,360 --> 00:07:53,650
passatgers que estem recollint.

132
00:07:53,650 --> 00:07:59,790
>> Per eliminar un marcador m, llavors vaig a
només cal executar m.setMap nul.

133
00:07:59,790 --> 00:08:03,670
Feu això per als passatgers dins de la gamma,
i que hagi acabat la collita.

134
00:08:03,670 --> 00:08:07,890
La funció de la gràfica ha de mostrar tot
dels passatgers que es troben al seu

135
00:08:07,890 --> 00:08:11,000
llançadora, i el seient buit si està buit.

136
00:08:11,000 --> 00:08:14,420
Així gràfic ha iterar sobre
shuttle.seats, mostrant el

137
00:08:14,420 --> 00:08:21,350
informació al passatger per cada índex,
i el seient buit si aquest índex és nul.

138
00:08:21,350 --> 00:08:26,160
>> Ara bé, si el text HTML es col · loca dins d'un
JavaScript variable, llavors mitjançant l'ús

139
00:08:26,160 --> 00:08:31,950
document.getElementById, carta llauna
editar el codi HTML intern del que figura

140
00:08:31,950 --> 00:08:36,140
element mitjançant l'assignació de la
Text HTML al

141
00:08:36,140 --> 00:08:40,840
document.getElementById variables HTML intern.

142
00:08:40,840 --> 00:08:46,180
Quan els usuaris fan clic al botó Drop Off
en index.html, que va a trucar a la

143
00:08:46,180 --> 00:08:47,160
funció de recepció de butlletes.

144
00:08:47,160 --> 00:08:49,510
I és la nostra feina per posar en pràctica això.

145
00:08:49,510 --> 00:08:54,150
>> En recepció de butlletes, anem a voler eliminar qualsevol
els passatgers de la nau només si

146
00:08:54,150 --> 00:08:58,740
estem en el rang del seu destí,
casa residencial.

147
00:08:58,740 --> 00:09:03,300
Així dropoff haurà de comprovar si
el servei de transport està dins de l'abast de qualsevol dels

148
00:09:03,300 --> 00:09:08,200
cases, i eliminar qualsevol necessitat
els passatgers de la nau.

149
00:09:08,200 --> 00:09:11,020
Llavors, com comprovem si estem
en el rang de les cases?

150
00:09:11,020 --> 00:09:16,630
Bé, un cop més, farem ús de la
funció shuttle.distance, passant

151
00:09:16,630 --> 00:09:20,990
la latitud i longitud del punt
que estem comprovant en contra.

152
00:09:20,990 --> 00:09:22,730
>> Però quins són aquests punts?

153
00:09:22,730 --> 00:09:27,210
Bé, la matriu cases, si vostè recorda
en houses.js, emmagatzema el

154
00:09:27,210 --> 00:09:32,790
latitud i longitud de cada casa a
una matriu associativa, on cada

155
00:09:32,790 --> 00:09:35,980
índex és el nom d'aquesta casa.

156
00:09:35,980 --> 00:09:37,590
Després d'eliminar els passatgers -

157
00:09:37,590 --> 00:09:41,820
així, només si estem en el rang de la seva
casa que volen anar.

158
00:09:41,820 --> 00:09:46,380
Així que de nou, recordeu que els passatgers
emmagatzema la casa que tots els passatgers

159
00:09:46,380 --> 00:09:48,850
vol anar a.

160
00:09:48,850 --> 00:09:51,670
Si estan dins de l'abast de la seva
casa, llavors anem a eliminar aquesta

161
00:09:51,670 --> 00:09:57,200
passatger des shuttle.seats i conjunt
la seva posició en la matriu en null.

162
00:09:57,200 --> 00:10:00,220
>> Ara anem a parlar d'algunes característiques addicionals
que es poden implementar a

163
00:10:00,220 --> 00:10:02,690
el CS50 trasllat p-set.

164
00:10:02,690 --> 00:10:05,850
Hi ha un sistema de punts pel qual
fer un seguiment de quants

165
00:10:05,850 --> 00:10:07,520
assenyala que un usuari té.

166
00:10:07,520 --> 00:10:11,120
Per deixar als passatgers
amb èxit, poden aconseguir punts.

167
00:10:11,120 --> 00:10:15,100
Però per tractar de deixar els passatgers
on no hi ha cap casa propera,

168
00:10:15,100 --> 00:10:16,980
així, poden ser penalitzat per això.

169
00:10:16,980 --> 00:10:21,790
Així que potser vostè vol fer un seguiment de
els punts en una variable global.

170
00:10:21,790 --> 00:10:25,970
>> Pot implementar potser un comptador de temps, on
l'usuari té una certa quantitat de

171
00:10:25,970 --> 00:10:29,800
temps per recollir i deixar de
cert nombre de passatgers.

172
00:10:29,800 --> 00:10:33,280
Potser fins i tot integrar aquest
amb el sistema de punts.

173
00:10:33,280 --> 00:10:39,970
O pot editar Gràfic de tal manera que
els passatgers estan ordenats per casa.

174
00:10:39,970 --> 00:10:45,250
Així que probablement seria una espècie
funcionar a shuttle.seats.

175
00:10:45,250 --> 00:10:49,240
>> Pot fer la funció de vol,
on si l'usuari introdueix la Konami

176
00:10:49,240 --> 00:10:53,460
codi, llavors el transbordador desenganxa la
sòl i la llançadora poden volar.

177
00:10:53,460 --> 00:10:58,890
No obstant això, per a una caiguda segura fora, millor per fer
el transbordador aterrar seves rodes al

178
00:10:58,890 --> 00:11:00,700
terra primer.

179
00:11:00,700 --> 00:11:05,910
També pot aplicar la teleportació,
on es fa una llista desplegable de sota

180
00:11:05,910 --> 00:11:08,380
edificis en index.html.

181
00:11:08,380 --> 00:11:12,270
I la selecció d'un d'ells, el
usuari serà transportat a

182
00:11:12,270 --> 00:11:14,220
aquest edifici al campus.

183
00:11:14,220 --> 00:11:16,760
Acceptar, però, per viatjar a través de
les parets d'alguns

184
00:11:16,760 --> 00:11:19,290
edificis en el seu camí.

185
00:11:19,290 --> 00:11:22,960
>> També pot canviar la velocitat de la
llançadora, el que permet a l'usuari augmentar

186
00:11:22,960 --> 00:11:25,490
o disminuir la velocitat.

187
00:11:25,490 --> 00:11:28,840
Potser vostè vol una variable global a
realitzar un seguiment de la quantitat de combustible

188
00:11:28,840 --> 00:11:31,520
transbordador té, disminuint
que a mesura que avança.

189
00:11:31,520 --> 00:11:35,860
Quan arribi a zero, però, el servei de transport
no serà capaç de moure llevat que hi hagi

190
00:11:35,860 --> 00:11:40,610
repostat, potser usant un botó o
fins i tot fer la seva pròpia estació de servei.

191
00:11:40,610 --> 00:11:43,240
>> Però això no és certament
una llista exhaustiva.

192
00:11:43,240 --> 00:11:46,340
Fes una ullada a les especificacions per al ple
llista, o potser proposar

193
00:11:46,340 --> 00:11:47,840
tu a tu TF.

194
00:11:47,840 --> 00:11:48,950
El cel és el límit.

195
00:11:48,950 --> 00:11:53,110
Aquesta és la teva última CS50 p-set,
així que es diverteix amb ell.

196
00:11:53,110 --> 00:11:56,360
Aquest va ser CS50 Shuttle.

197
00:11:56,360 --> 00:11:59,230
>> He de dir que ha estat un plaer
fer això per a vostè amb el

198
00:11:59,230 --> 00:12:00,400
equip de producció.

199
00:12:00,400 --> 00:12:04,330
I espero que vostè té
gaudir-ne, també.

200
00:12:04,330 --> 00:12:06,040
El meu nom és Zamyla.

201
00:12:06,040 --> 00:12:08,310
I això va ser CS50.

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