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

2
00:00:09,870 --> 00:00:13,360
>> ZAMYLA CHAN: Ben, aquí estamos nós,
a última en CS50 set-p.

3
00:00:13,360 --> 00:00:17,040
Felicitar-vos de
chegara tan lonxe desde o seu primeiro Ola

4
00:00:17,040 --> 00:00:20,090
Mundos e de impresión superior
Pirámides de Mario.

5
00:00:20,090 --> 00:00:21,930
Fixo unha web a semana pasada.

6
00:00:21,930 --> 00:00:25,110
E nós imos estar facendo outra
esta semana, que permite que

7
00:00:25,110 --> 00:00:28,570
unidade en torno ao campus de Harvard, pegando
os membros e funcionarios CS50

8
00:00:28,570 --> 00:00:31,910
trae-los de volta á súa
casas residenciais.

9
00:00:31,910 --> 00:00:35,400
>> Agora, a semana pasada, traballamos en PHP,
unha linguaxe do lado do servidor.

10
00:00:35,400 --> 00:00:38,250
Para este p-set, estamos quedando introducido
para JavaScript, que é un

11
00:00:38,250 --> 00:00:40,610
linguaxe do lado do cliente.

12
00:00:40,610 --> 00:00:44,020
Entón, imos dar un ollo a algunhas das
código de distribución que está indicado de

13
00:00:44,020 --> 00:00:46,210
por este p-set.

14
00:00:46,210 --> 00:00:49,700
No cartafol JavaScript, haberá
ser unha morea de arquivos JavaScript.

15
00:00:49,700 --> 00:00:53,600
>> Hai buildings.js, que contén unha
conxunto de edificios en torno Harvard

16
00:00:53,600 --> 00:00:57,340
campus coa súa información
e posición.

17
00:00:57,340 --> 00:01:01,630
Houses.js é unha matriz de Harvard
vivendas residenciais con súa

18
00:01:01,630 --> 00:01:04,030
latitudes e lonxitudes.

19
00:01:04,030 --> 00:01:08,600
Passengers.js contén unha matriz de
pasaxeiros, os funcionarios CS50

20
00:01:08,600 --> 00:01:11,640
que estará traendo de volta a
súas casas residenciais.

21
00:01:11,640 --> 00:01:16,450
>> Math3D.js, que contén unha gran cantidade de
funcións para facer o movemento.

22
00:01:16,450 --> 00:01:19,500
Se é matematicamente minded, a continuación,
Congratulo-me con vostede para dar un ollo.

23
00:01:19,500 --> 00:01:23,530
Pero non ten que entender
todo alí dentro.

24
00:01:23,530 --> 00:01:26,710
Shuttle.js, que trata sobre
o movemento da Shuttle.

25
00:01:26,710 --> 00:01:31,450
E index.html é a páxina de inicio, onde
todo acontece, de feito, onde o

26
00:01:31,450 --> 00:01:33,610
usuario está interactuar coa web.

27
00:01:33,610 --> 00:01:39,110
>> Service.css é a folla de estilo CSS,
que ademais de Twitter

28
00:01:39,110 --> 00:01:43,960
Biblioteca Bootstrap, controis
como aspecto index.html.

29
00:01:43,960 --> 00:01:48,190
E despois tamén temos service.js, que
contén funcións de servizo para

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

31
00:01:49,010 --> 00:01:53,010
E aquí é onde vai estar
recheo de algúns dos quefaceres.

32
00:01:53,010 --> 00:01:56,600
>> Agora imos dar un ollo a obxectos e
arrays asociativos en JavaScript,

33
00:01:56,600 --> 00:01:59,360
que, para todos os efectos,
son intercambiábeis.

34
00:01:59,360 --> 00:02:03,030
Se eu quixese facer un obxecto unha variable
chamado unha vara, eu

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

36
00:02:04,290 --> 00:02:09,350
E dentro destas claves, eu o faría
especifica, o núcleo é o unicornio, a madeira

37
00:02:09,350 --> 00:02:12,710
é cereixa, e a lonxitude é de 13.

38
00:02:12,710 --> 00:02:16,370
>> Agora, eu tamén pode acceder aos valores
de obxectos utilizando

39
00:02:16,370 --> 00:02:18,270
notación de matriz asociativa.

40
00:02:18,270 --> 00:02:22,610
Núcleo do índice Entón vara, podo definir
que igual unicornio, ou

41
00:02:22,610 --> 00:02:24,710
comprobar que, se eu ter.

42
00:02:24,710 --> 00:02:28,890
Ou podo usar o operador punto
wand.wood igual cereixa, e

43
00:02:28,890 --> 00:02:30,280
así por diante e así por diante.

44
00:02:30,280 --> 00:02:33,930
Entón ve que as matrices de asociación e
obxectos en JavaScript van ser

45
00:02:33,930 --> 00:02:37,710
intercambiables e ganas
vir en moi útil.

46
00:02:37,710 --> 00:02:41,570
>> Logo vemos un conxunto de edificios
en buildings.js,

47
00:02:41,570 --> 00:02:43,870
unha vez máis, unha serie de obxectos.

48
00:02:43,870 --> 00:02:48,500
Se eu quixese facer unha matriz dos mellores
edificios no campus de Harvard, logo

49
00:02:48,500 --> 00:02:49,710
Quere facelo do seguinte xeito.

50
00:02:49,710 --> 00:02:55,250
Usando este obxecto notación, onde
Eu gardar a raíz, o nome, enderezo,

51
00:02:55,250 --> 00:03:00,260
latitude, lonxitude e para cada
único obxecto edificio.

52
00:03:00,260 --> 00:03:02,930
>> Imos axiña falar variables
en JavaScript.

53
00:03:02,930 --> 00:03:07,760
Como PHP, variables JavaScript
son feblemente ou vagamente ingresaran.

54
00:03:07,760 --> 00:03:14,120
Para crear unha variable local, prefixar
nome da variable con V-A-R var.

55
00:03:14,120 --> 00:03:17,010
Agora, en JavaScript, as funcións serán
limitar o ámbito das variables.

56
00:03:17,010 --> 00:03:20,600
Entón se ten unha variable local dentro
unha función, entón outras funcións

57
00:03:20,600 --> 00:03:22,060
Non pode acceder a ela.

58
00:03:22,060 --> 00:03:26,090
>> Pero a diferenza de C, loops e condicións non
limitar o ámbito de aplicación dunha variable.

59
00:03:26,090 --> 00:03:30,600
Así, mesmo se declara-la dentro dun
condición, toda a función

60
00:03:30,600 --> 00:03:32,810
ter acceso a el.

61
00:03:32,810 --> 00:03:35,820
Agora, sen var, a variable
será global.

62
00:03:35,820 --> 00:03:39,170
Entón, se acaba de declarar o nome e
asignar un valor, entón esa variable

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

64
00:03:41,900 --> 00:03:48,480
>> Agora, nas casas, temos unha asociativa
array de obxectos do tipo de acollida, onde

65
00:03:48,480 --> 00:03:52,100
Cada casa é só unha latitude
e unha lonxitude.

66
00:03:52,100 --> 00:03:55,140
Entón temos os pasaxeiros
matriz, que é unha matriz

67
00:03:55,140 --> 00:03:57,370
do tipo de obxecto de pasaxeiros.

68
00:03:57,370 --> 00:04:01,620
Así, cada pasaxeiro ten un usuario
nome, un nome e unha casa.

69
00:04:01,620 --> 00:04:04,840
>> Repare que eu digo de tipo
pasaxeiros, o que significa realmente

70
00:04:04,840 --> 00:04:08,150
que cada obxecto ten a
mesmos pares de valores clave.

71
00:04:08,150 --> 00:04:12,830
Así, cada obxecto do tipo pasaxeiro ten
un nome de usuario, un nome e unha casa.

72
00:04:12,830 --> 00:04:14,850
Entón, o que necesitamos
facer a p-set?

73
00:04:14,850 --> 00:04:20,779
Así, debemos permitir que os usuarios escollan
os membros do equipo, para amosar todas

74
00:04:20,779 --> 00:04:25,080
os membros do equipo que están actualmente en
noso servizo de transporte, e deixalos fóra.

75
00:04:25,080 --> 00:04:29,395
E entón nós tamén imos falar adicional
recursos que poden ser aplicadas para

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

77
00:04:30,980 --> 00:04:33,610
>> Pero imos falar sobre o captador primeiro.

78
00:04:33,610 --> 00:04:37,480
Os rostros dos empregados CS50 ser
plantas por todo o campus, onde cada

79
00:04:37,480 --> 00:04:41,750
cara é implementado como unha marca local
sobre a Terra en 3D, e como un

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

81
00:04:44,020 --> 00:04:47,880
Así, cando o usuario fai clic no Levantado
botón, queremos engadir nos arredores

82
00:04:47,880 --> 00:04:49,590
pasaxeiros para o transporte.

83
00:04:49,590 --> 00:04:53,650
E queremos tamén eliminar o seu sitio
marca do mundo e retirar o seu

84
00:04:53,650 --> 00:04:58,060
marcador dende o mapa, o que indica que
están no noso autobús agora.

85
00:04:58,060 --> 00:05:02,520
>> Entón, como podemos detectar se os pasaxeiros
están dentro do alcance do noso transporte?

86
00:05:02,520 --> 00:05:06,670
Así, a distancia da función, de maneira
shuttle.distance, pasando o

87
00:05:06,670 --> 00:05:10,630
latitude e lonxitude, ha calcular
a distancia entre a posición actual

88
00:05:10,630 --> 00:05:14,220
do servizo de transporte para o punto que
se especifica con que, dada

89
00:05:14,220 --> 00:05:15,860
latitude e lonxitude.

90
00:05:15,860 --> 00:05:19,180
Así, pode usar isto para calcular a
distancia do transporte para o

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

92
00:05:20,310 --> 00:05:24,040
>> Pero como vostede sabe onde
os pasaxeiros están?

93
00:05:24,040 --> 00:05:27,510
Ben, é aí onde nós imos ter que
editar a función de recheo.

94
00:05:27,510 --> 00:05:32,500
Cubrir todas as partes dos membros do equipo
no número de pasaxeiros para o mundo

95
00:05:32,500 --> 00:05:36,300
e no mapa, pero non fai
gardar a súa localización.

96
00:05:36,300 --> 00:05:39,850
Entón quizais pode almacenar as súas
poñer marcas e etiquetas

97
00:05:39,850 --> 00:05:41,570
nalgúns matriz global.

98
00:05:41,570 --> 00:05:45,780
>> Agora, xa existe unha matriz global
gardar información de pasaxeiros.

99
00:05:45,780 --> 00:05:49,960
A matriz almacena pasaxeiros cada
nome do pasaxeiro ea súa casa.

100
00:05:49,960 --> 00:05:54,985
Entón, talvez pode engadir algúns parámetros
alí para os obxectos de pasaxeiros.

101
00:05:54,985 --> 00:05:58,150
>> Para axudarnos a detectar todos os pasaxeiros
dentro do alcance da nosa

102
00:05:58,150 --> 00:06:02,485
transporte, manexar de deixar pasar toda a
pasaxeiros na matriz pasaxeiros.

103
00:06:02,485 --> 00:06:07,790
Un loop en JavaScript pode parecer
algo así, moi semellante ao

104
00:06:07,790 --> 00:06:13,200
aqueles para os loops en C. Ou podemos usar un
alternativa para a estrutura de punto, para

105
00:06:13,200 --> 00:06:18,680
var i na matriz, onde eu aínda estará
o índice, pero non precisa

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

107
00:06:23,310 --> 00:06:26,130
>> Cada situación do pasaxeiro é
dada pola súa marca lugar.

108
00:06:26,130 --> 00:06:29,800
Pero a marca non é o lugar
latitude e lonxitude.

109
00:06:29,800 --> 00:06:34,170
Temos que acceder a estes parámetros por
recibindo a xeometría, usando get

110
00:06:34,170 --> 00:06:38,180
xeometría na marca lugar, e, a continuación,
xa que temos a xeometría, obtendo

111
00:06:38,180 --> 00:06:42,580
ou a latitude ou a longura
usar estas funcións.

112
00:06:42,580 --> 00:06:45,680
>> Polo tanto, agora sabemos como detectar se
pasaxeiros están dentro

113
00:06:45,680 --> 00:06:47,920
alcance da nosa nave.

114
00:06:47,920 --> 00:06:52,050
Unha vez que temos os pasaxeiros, nós imos
Quere engadir todos os pasaxeiros que son

115
00:06:52,050 --> 00:06:53,140
dentro dese rango.

116
00:06:53,140 --> 00:06:57,580
Queremos que lles permitan entrar e tomar
Sente-se na nosa traslado, pero só

117
00:06:57,580 --> 00:06:59,630
si temos espazo suficiente para eles.

118
00:06:59,630 --> 00:07:04,120
>> A matriz shuttle.seats indicará
se os bancos están baleiros, ou

119
00:07:04,120 --> 00:07:05,890
quen está nese lugar.

120
00:07:05,890 --> 00:07:11,160
Polo tanto, se un banco está baleira,
que a base será nulo.

121
00:07:11,160 --> 00:07:15,930
Entón iterado sobre a matriz asentos,
verificación de lugares baleiros, almacenando

122
00:07:15,930 --> 00:07:20,020
pasaxeiros para os asentos ata que
non ten máis asentos baleiros.

123
00:07:20,020 --> 00:07:23,330
E, por desgraza, as outros pasaxeiros
terá que esperar ao

124
00:07:23,330 --> 00:07:26,000
próxima vez que o transporte ven abaixo.

125
00:07:26,000 --> 00:07:30,280
>> Así que chegar ao bus, nós imos querer
para eliminar a súa marca local, que

126
00:07:30,280 --> 00:07:32,580
é a súa imaxe no mundo 3D.

127
00:07:32,580 --> 00:07:38,030
Se eu quixese eliminar un lugar marca p,
entón quere obter todos os recursos

128
00:07:38,030 --> 00:07:42,820
da miña terra, a partir de Google Earth,
e elimine aquel lugar específico

129
00:07:42,820 --> 00:07:45,910
marcar mediante a función removeChild.

130
00:07:45,910 --> 00:07:51,360
Entón, finalmente, imos eliminar o marcador,
a icona no mapa 2D, para calquera

131
00:07:51,360 --> 00:07:53,650
pasaxeiros que están pegando.

132
00:07:53,650 --> 00:07:59,790
>> Para eliminar un marcador de m, entón eu vou
basta con executar m.setMap nulo.

133
00:07:59,790 --> 00:08:03,670
Faino a todos os pasaxeiros dentro do seu alcance,
e rematou Pickup.

134
00:08:03,670 --> 00:08:07,890
A función de gráfico debe amosar todos
dos pasaxeiros que se atopan na súa

135
00:08:07,890 --> 00:08:11,000
transporte, e asento baleiro baleiro.

136
00:08:11,000 --> 00:08:14,420
Entón gráfico debe iterado
shuttle.seats, mostrando o

137
00:08:14,420 --> 00:08:21,350
información sobre os pasaxeiros para cada índice,
e asento baleiro que o contido é nulo.

138
00:08:21,350 --> 00:08:26,160
>> Agora o texto HTML e colocar dentro dun
JavaScript variable, a continuación, usando

139
00:08:26,160 --> 00:08:31,950
document.getElementById, carta de lata
editar o HTML interno de que, dada

140
00:08:31,950 --> 00:08:36,140
elemento, atribuíndo a
Texto HTML ao

141
00:08:36,140 --> 00:08:40,840
document.getElementById variable HTML interior.

142
00:08:40,840 --> 00:08:46,180
Cando os usuarios click no botón drop off
en index.html, que vai chamar o

143
00:08:46,180 --> 00:08:47,160
función abandonos.

144
00:08:47,160 --> 00:08:49,510
E é o noso traballo para aplicar iso.

145
00:08:49,510 --> 00:08:54,150
>> En abandonos, imos querer eliminar calquera
pasaxeiros do transporte só se

146
00:08:54,150 --> 00:08:58,740
estamos na franxa de destino,
súa casa residencial.

147
00:08:58,740 --> 00:09:03,300
Entón abandonos terá que comprobar se
o autobús está ao alcance de calquera dos

148
00:09:03,300 --> 00:09:08,200
casas, e elimine todo o necesario
pasaxeiros do autobús.

149
00:09:08,200 --> 00:09:11,020
Entón, como imos ver se estamos a
na franxa de calquera casas?

150
00:09:11,020 --> 00:09:16,630
Ben, unha vez máis, imos facer uso do
shuttle.distance función, pasando en

151
00:09:16,630 --> 00:09:20,990
a latitude e lonxitude do punto de
que estamos comprobando contra.

152
00:09:20,990 --> 00:09:22,730
>> Pero o que son eses puntos?

153
00:09:22,730 --> 00:09:27,210
Ben, a matriz de vivendas, se lembrar
en houses.js, almacena o

154
00:09:27,210 --> 00:09:32,790
latitude e lonxitude de cada casa en
unha matriz asociativa, onde cada

155
00:09:32,790 --> 00:09:35,980
índice é o nome daquela casa.

156
00:09:35,980 --> 00:09:37,590
Despois de eliminar os pasaxeiros -

157
00:09:37,590 --> 00:09:41,820
ben, se estamos na franxa da súa
casa que queren ir.

158
00:09:41,820 --> 00:09:46,380
Entón, de novo, lembre-se que os pasaxeiros
almacena a casa que todos os pasaxeiros

159
00:09:46,380 --> 00:09:48,850
quere ir.

160
00:09:48,850 --> 00:09:51,670
Se eles están dentro do alcance do seu
casa, entón nós imos eliminar este

161
00:09:51,670 --> 00:09:57,200
pasaxeiro de shuttle.seats e conxunto
súa posición na matriz como nulo.

162
00:09:57,200 --> 00:10:00,220
>> Agora imos falar sobre algúns recursos extra
que pode ser aplicado en

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

164
00:10:02,690 --> 00:10:05,850
Hai un sistema de puntos en que
manter o control de cantas

165
00:10:05,850 --> 00:10:07,520
apunta un usuario ten.

166
00:10:07,520 --> 00:10:11,120
Para caer fóra pasaxeiros
correctamente, poden gañar puntos.

167
00:10:11,120 --> 00:10:15,100
Pero, para tratar de deixar pasaxeiros
onde non hai ningunha casa nas proximidades,

168
00:10:15,100 --> 00:10:16,980
ben, poden ter penalizado por iso.

169
00:10:16,980 --> 00:10:21,790
Entón pode utilizar manter o control de
os puntos nunha variable global.

170
00:10:21,790 --> 00:10:25,970
>> Pode aplicar, quizais, un temporizador, onde
o usuario ten unha certa cantidade de

171
00:10:25,970 --> 00:10:29,800
tempo de incorporarse e caer fóra dunha
número de pasaxeiros.

172
00:10:29,800 --> 00:10:33,280
Quizais mesmo integrar esta
co sistema de puntos.

173
00:10:33,280 --> 00:10:39,970
Ou pode Editar Gráfico de tal forma que
pasaxeiros son clasificadas segundo a casa.

174
00:10:39,970 --> 00:10:45,250
Así que probablemente sería unha especie
funcionar para shuttle.seats.

175
00:10:45,250 --> 00:10:49,240
>> Pode aplicar unha característica de voo,
onde se o usuario inserir a Konami

176
00:10:49,240 --> 00:10:53,460
código, a continuación, o transbordador espacial despegar a
solo eo transporte pode voar.

177
00:10:53,460 --> 00:10:58,890
Pero, para unha caída de seguro fóra, o mellor que facer
o autobús desembarcar as súas rodas sobre o

178
00:10:58,890 --> 00:11:00,700
chan en primeiro lugar.

179
00:11:00,700 --> 00:11:05,910
Tamén pode aplicar o teletransporte,
onde fai unha lista despregábel de abaixo

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

181
00:11:08,380 --> 00:11:12,270
E seleccionando un destes, o
usuario pode ser transportado a

182
00:11:12,270 --> 00:11:14,220
que a construción do campus.

183
00:11:14,220 --> 00:11:16,760
OK, con todo, para viaxar a través
as paredes dalgúns

184
00:11:16,760 --> 00:11:19,290
edificios no seu camiño ata alí.

185
00:11:19,290 --> 00:11:22,960
>> Tamén pode cambiar a velocidade da
transporte, permitindo ao usuario a aumentar

186
00:11:22,960 --> 00:11:25,490
ou diminuír a velocidade.

187
00:11:25,490 --> 00:11:28,840
Pode utilizar unha variable global para
manter o control de canto combustible a

188
00:11:28,840 --> 00:11:31,520
transporte ten, diminuíndo
como vai xunto.

189
00:11:31,520 --> 00:11:35,860
Unha vez que chegar a cero, con todo, o servizo de transporte
non poderá moverse a menos que teña

190
00:11:35,860 --> 00:11:40,610
reabastecido, quizais usando un botón ou
incluso facer o seu propio posto de gasolina.

191
00:11:40,610 --> 00:11:43,240
>> Pero iso non é certamente
unha lista exhaustiva.

192
00:11:43,240 --> 00:11:46,340
Consulte a especificación para o pleno
lista, ou, tal vez, propoñer

193
00:11:46,340 --> 00:11:47,840
o seu propio para o TF.

194
00:11:47,840 --> 00:11:48,950
O ceo é o límite.

195
00:11:48,950 --> 00:11:53,110
Esta é a súa última CS50 p-set,
para divertirse con el.

196
00:11:53,110 --> 00:11:56,360
Este foi CS50 Shuttle.

197
00:11:56,360 --> 00:11:59,230
>> Teño que dicir que foi un pracer
facendo isto para vostede co

198
00:11:59,230 --> 00:12:00,400
equipo de produción.

199
00:12:00,400 --> 00:12:04,330
E eu espero que teña
apreciar-los, tamén.

200
00:12:04,330 --> 00:12:06,040
O meu nome é Zamyla.

201
00:12:06,040 --> 00:12:08,310
E esta foi CS50.

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