1
00:00:00,000 --> 00:00:00,988

2
00:00:00,988 --> 00:00:09,880
>> [REPRODUCCIÓN DE MÚSICA]

3
00:00:09,880 --> 00:00:13,360
>> ALTAVOZ 1: Bueno, aquí estamos,
la última serie P en CS50.

4
00:00:13,360 --> 00:00:17,040
Felicite a sí mismos de tener
llegado tan lejos, ya que su primera hola

5
00:00:17,040 --> 00:00:20,090
mundos y imprimir
pirámides de Mario.

6
00:00:20,090 --> 00:00:21,930
Usted ha hecho un sitio web la semana pasada.

7
00:00:21,930 --> 00:00:25,110
Y vamos a estar haciendo otra
esta semana, uno que le permite al

8
00:00:25,110 --> 00:00:28,570
conducir por el campus de la Universidad de Harvard, recogiendo
hasta los miembros del personal, y CS50

9
00:00:28,570 --> 00:00:31,910
traer de vuelta a su
casas residenciales.

10
00:00:31,910 --> 00:00:35,400
>> Ahora la última semana hemos trabajado en PHP,
un lenguaje del lado del servidor.

11
00:00:35,400 --> 00:00:38,250
Para este conjunto P, nos vamos a introdujimos
a JavaScript, que es un

12
00:00:38,250 --> 00:00:40,600
lenguaje del lado del cliente.

13
00:00:40,600 --> 00:00:44,010
Así que echemos un vistazo a algunos de los
código de distribución que se proporciona a

14
00:00:44,010 --> 00:00:46,210
que para este conjunto P.

15
00:00:46,210 --> 00:00:49,700
>> En la carpeta de JavaScript, habrá
ser un montón de archivos de JavaScript.

16
00:00:49,700 --> 00:00:53,600
Hay buildings.js, que contiene un
conjunto de edificios alrededor de Harvard

17
00:00:53,600 --> 00:00:57,340
campus, con su información
y la posición.

18
00:00:57,340 --> 00:01:01,630
Houses.js es una matriz de Harvard
casas residenciales, con su

19
00:01:01,630 --> 00:01:04,030
latitudes y longitudes.

20
00:01:04,030 --> 00:01:07,020
Passengers.js contiene un
gama de pasajeros -

21
00:01:07,020 --> 00:01:08,600
los miembros del personal CS50 -

22
00:01:08,600 --> 00:01:11,640
que usted va a traer de vuelta a
sus casas residenciales.

23
00:01:11,640 --> 00:01:16,450
>> Math3D.js, que contiene una gran cantidad de
funciones que hacer con el movimiento.

24
00:01:16,450 --> 00:01:19,500
Si usted es de mente matemática,
a continuación, doy la bienvenida a que eche un vistazo.

25
00:01:19,500 --> 00:01:23,530
Pero usted no necesita entender
todo allí.

26
00:01:23,530 --> 00:01:26,710
Shuttle.js, que se ocupa de
El movimiento de la lanzadera.

27
00:01:26,710 --> 00:01:31,450
Y index.html es la página principal donde
todo sucede, en realidad, en el que el

28
00:01:31,450 --> 00:01:33,610
usuario está interactuando con el sitio.

29
00:01:33,610 --> 00:01:39,110
>> Service.css es la hoja de estilo CSS,
que, además de la Twitter

30
00:01:39,110 --> 00:01:43,960
Biblioteca Bootstrap, controles
cómo index.html miradas.

31
00:01:43,960 --> 00:01:48,190
Y luego también tenemos service.js, que
contiene funciones de servicio para

32
00:01:48,190 --> 00:01:49,010
el servicio de transporte.

33
00:01:49,010 --> 00:01:53,010
Y aquí es donde usted va a estar
llenar en algunos de los al DOS.

34
00:01:53,010 --> 00:01:56,600
>> Ahora echemos un vistazo a los objetos y
matrices asociativas en JavaScript,

35
00:01:56,600 --> 00:01:59,360
que para todos los efectos,
son intercambiables.

36
00:01:59,360 --> 00:02:03,030
Si quisiera hacer un objeto una variable
llamado una varita, me

37
00:02:03,030 --> 00:02:04,290
declararlo.

38
00:02:04,290 --> 00:02:08,789
Y dentro de esas llaves que lo haría
especificar el núcleo es unicornio.

39
00:02:08,789 --> 00:02:10,220
La madera es la cereza.

40
00:02:10,220 --> 00:02:12,710
Y la longitud es de 13.

41
00:02:12,710 --> 00:02:16,370
>> Ahora también puedo acceder a los valores
de los objetos que utilizan

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

43
00:02:18,270 --> 00:02:22,610
Índice estructural Así varita, puedo establecer
que igual al unicornio, o

44
00:02:22,610 --> 00:02:24,710
comprobar que, si lo que necesito.

45
00:02:24,710 --> 00:02:26,510
O puedo utilizar el operador punto.

46
00:02:26,510 --> 00:02:30,280
Madera dot Varita equivale cereza,
y así sucesivamente, y así sucesivamente.

47
00:02:30,280 --> 00:02:33,930
Así que ya ves que las matrices asociativas y
objetos en JavaScript van a ser

48
00:02:33,930 --> 00:02:37,720
intercambiables, y la voluntad
venir en muy práctico.

49
00:02:37,720 --> 00:02:41,570
>> Luego vemos una serie de edificios
en buildings.js.

50
00:02:41,570 --> 00:02:43,870
Una vez más, una serie de objetos.

51
00:02:43,870 --> 00:02:48,500
Si quisiera hacer una serie de los mejores
edificios en el campus de Harvard, y luego

52
00:02:48,500 --> 00:02:49,710
Yo lo haría de la siguiente manera.

53
00:02:49,710 --> 00:02:55,250
Usando esta notación objeto, donde
Almaceno la raíz, el nombre, la dirección,

54
00:02:55,250 --> 00:03:00,260
latitud y longitud para cada
objeto único edificio.

55
00:03:00,260 --> 00:03:02,930
>> Vamos rápidamente a hablar de las variables
en JavaScript.

56
00:03:02,930 --> 00:03:07,760
Como PHP, las variables JavaScript
están débilmente o mal escrito.

57
00:03:07,760 --> 00:03:14,120
Para crear una variable local, el prefijo
el nombre de la variable con el V-A-R, var.

58
00:03:14,120 --> 00:03:17,010
>> Ahora en JavaScript, las funciones se
limitar el alcance de las variables.

59
00:03:17,010 --> 00:03:20,600
Así que si usted tiene una variable local dentro
una función, entonces otras funciones

60
00:03:20,600 --> 00:03:22,060
no pueden acceder a él.

61
00:03:22,060 --> 00:03:26,090
Pero a diferencia de C, los bucles y las condiciones no lo hacen
limitar el alcance de una variable.

62
00:03:26,090 --> 00:03:30,600
>> Así que incluso si se declara dentro de un
condiciones, toda la función se

63
00:03:30,600 --> 00:03:32,810
tener acceso a ella.

64
00:03:32,810 --> 00:03:35,820
Ahora sin var, la variable
será global.

65
00:03:35,820 --> 00:03:39,170
Así que si usted acaba de declarar el nombre y
asignar un valor, entonces esa variable

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

67
00:03:41,900 --> 00:03:48,480
>> Ahora bien, en las casas, tenemos un asociativa
array de objetos de tipo casa, donde

68
00:03:48,480 --> 00:03:52,100
cada casa es sólo una latitud
y una longitud.

69
00:03:52,100 --> 00:03:55,140
Luego tenemos a los pasajeros
matriz, que es una matriz

70
00:03:55,140 --> 00:03:57,370
del tipo de objeto de pasajeros.

71
00:03:57,370 --> 00:04:01,620
Así que cada pasajero tiene un nombre de usuario,
un nombre, y una casa.

72
00:04:01,620 --> 00:04:04,840
Observe que estoy viendo de tipo
de pasajeros, que en realidad sólo significa

73
00:04:04,840 --> 00:04:08,150
que cada objeto tiene el
mismo par de valores clave.

74
00:04:08,150 --> 00:04:12,830
Así que cada objeto de tipo pasajero tiene
un nombre de usuario, un nombre, y una casa.

75
00:04:12,830 --> 00:04:14,850
>> Entonces, ¿qué tenemos que
hacer para el conjunto P?

76
00:04:14,850 --> 00:04:20,779
Bueno, tenemos que permitir a los usuarios elegir
hasta los miembros del personal, mostrar todos

77
00:04:20,779 --> 00:04:25,090
los miembros del personal que están actualmente en
nuestro servicio de transporte, y para soltarlos.

78
00:04:25,090 --> 00:04:29,280
Y luego también hablaremos adicional
características que se pueden implementar para

79
00:04:29,280 --> 00:04:30,980
el conjunto P de transporte.

80
00:04:30,980 --> 00:04:33,610
>> Pero vamos a hablar de pickup primero.

81
00:04:33,610 --> 00:04:37,480
Los rostros de personal CS50 han sido
plantado por todo el campus, donde cada

82
00:04:37,480 --> 00:04:41,750
la cara se implementa como una marca de lugar
en la tierra 3D, y como

83
00:04:41,750 --> 00:04:44,030
marcador en el mapa 2D.

84
00:04:44,030 --> 00:04:47,880
Así, cuando el usuario hace clic en la camioneta
botón, queremos añadir cercano

85
00:04:47,880 --> 00:04:49,590
los pasajeros a la lanzadera.

86
00:04:49,590 --> 00:04:53,650
Y también queremos quitar su lugar
marca del mundo, y retire su

87
00:04:53,650 --> 00:04:58,060
marcador en el mapa, lo que indica que
que están en el servicio de transporte ya.

88
00:04:58,060 --> 00:05:02,520
>> Entonces, ¿cómo detectar si los pasajeros
están dentro del alcance de nuestro servicio de traslado?

89
00:05:02,520 --> 00:05:04,610
Pues bien, la función distancia -

90
00:05:04,610 --> 00:05:08,770
por lo que la distancia de puntos de enlace, pasando
la latitud y la longitud, la voluntad

91
00:05:08,770 --> 00:05:12,030
calcular la distancia desde la corriente
posición de la lanzadera a la

92
00:05:12,030 --> 00:05:15,850
señala que especifique con esa
dada la latitud y longitud.

93
00:05:15,850 --> 00:05:19,180
Así que usted puede usar esto para calcular la
distancia desde el transporte a la

94
00:05:19,180 --> 00:05:20,310
pasajeros.

95
00:05:20,310 --> 00:05:24,040
>> Pero, ¿cómo saber dónde
los pasajeros son?

96
00:05:24,040 --> 00:05:27,510
Bueno, ahí es donde vamos a tener que
editar la función poblar.

97
00:05:27,510 --> 00:05:32,500
Rellenar todos los lugares de los miembros del personal
y los pasajeros en el mundo,

98
00:05:32,500 --> 00:05:36,300
y en el mapa, pero no lo hace
almacenar su ubicación.

99
00:05:36,300 --> 00:05:39,850
Así que tal vez usted puede almacenar su
colocar marcas y marcadores

100
00:05:39,850 --> 00:05:41,570
de alguna matriz global.

101
00:05:41,570 --> 00:05:45,780
>> Ahora ya existe una matriz global
almacenar la información de los pasajeros.

102
00:05:45,780 --> 00:05:49,960
Las tiendas de pasajeros cada array
El nombre del pasajero y de su casa.

103
00:05:49,960 --> 00:05:54,985
Así que tal vez usted puede agregar algunos parámetros
allí a los objetos de pasajeros.

104
00:05:54,985 --> 00:05:59,290
>> Para ayudarnos a detectar todos los pasajeros
dentro del alcance de nuestro servicio de transporte, vamos a

105
00:05:59,290 --> 00:06:02,500
bucle a través de todos los pasajeros
en la matriz de pasajeros.

106
00:06:02,500 --> 00:06:07,790
Un bucle en JavaScript podría verse
algo como esto, muy similar a la

107
00:06:07,790 --> 00:06:12,910
los de bucle en C. O podemos utilizar un
alternativa para la estructura de bucle.

108
00:06:12,910 --> 00:06:17,130
>> Por var i en el array, donde me
seguirá siendo el índice.

109
00:06:17,130 --> 00:06:20,740
Pero usted no necesita especificar
la longitud de la matriz de puntos

110
00:06:20,740 --> 00:06:23,310
condición, y yo plus plus.

111
00:06:23,310 --> 00:06:26,140
La ubicación de cada pasajero es
dada por su marca de lugar.

112
00:06:26,140 --> 00:06:29,800
>> Pero la marca de lugar no es el
la latitud y la longitud.

113
00:06:29,800 --> 00:06:34,575
Tenemos que acceder a esos parámetros por
conseguir la geometría, usando get

114
00:06:34,575 --> 00:06:35,900
la geometría en la marca de su sitio.

115
00:06:35,900 --> 00:06:39,630
Y luego, una vez que tenemos la geometría,
obtener ya sea la latitud o la

116
00:06:39,630 --> 00:06:42,600
longitud, utilizando esas funciones.

117
00:06:42,600 --> 00:06:45,680
>> Así que ahora que sabemos cómo detectar si
los pasajeros están a

118
00:06:45,680 --> 00:06:47,920
gama de nuestro transporte.

119
00:06:47,920 --> 00:06:52,050
Una vez que tengamos los pasajeros, vamos a
desee agregar cualquier pasajero que son

120
00:06:52,050 --> 00:06:53,140
dentro de ese rango.

121
00:06:53,140 --> 00:06:57,580
Queremos que les permita subirse a, y
tomar asiento en nuestro servicio de transporte, pero sólo

122
00:06:57,580 --> 00:06:59,640
si tenemos suficiente espacio para ellos.

123
00:06:59,640 --> 00:07:04,120
>> La matriz de asientos de puntos de enlace se
indican si los asientos están vacíos, o

124
00:07:04,120 --> 00:07:05,890
que está en ese asiento.

125
00:07:05,890 --> 00:07:11,170
Así que si hay un asiento vacío,
ese asiento será nulo.

126
00:07:11,170 --> 00:07:15,930
Así iterar sobre la matriz de asientos,
la comprobación de asientos vacíos, almacenar

127
00:07:15,930 --> 00:07:20,020
los pasajeros en los asientos hasta que
no tienen ningún escaño más vacías.

128
00:07:20,020 --> 00:07:23,330
Y, por desgracia, ningún resto de los pasajeros
tendrá que esperar a que el

129
00:07:23,330 --> 00:07:26,000
próxima vez que el servicio de transporte, vuelve.

130
00:07:26,000 --> 00:07:30,280
>> Una vez que consiguen en el autobús, vamos a querer
para eliminar su huella lugar, que

131
00:07:30,280 --> 00:07:32,540
es su foto en el mundo 3D.

132
00:07:32,540 --> 00:07:38,030
Si quisiera eliminar un lugar mark p,
entonces me gustaría tener todas las características

133
00:07:38,030 --> 00:07:42,790
de mi tierra, desde el Google Earth,
y luego eliminar ese lugar específico

134
00:07:42,790 --> 00:07:45,910
marcar utilizando la función removeChild.

135
00:07:45,910 --> 00:07:51,360
Luego, por último, vamos a eliminar el marcador,
el icono del mapa en 2D para cualquier

136
00:07:51,360 --> 00:07:53,650
pasajeros que estamos recogiendo.

137
00:07:53,650 --> 00:07:59,790
Para eliminar un marcador, m, entonces voy a
sólo hay que ejecutar m dot setMap nulo.

138
00:07:59,790 --> 00:08:02,920
Haga esto para los pasajeros dentro de la gama,
y que haya terminado la recolección.

139
00:08:02,920 --> 00:08:05,056