[REPRODUCCIÓN DE MÚSICA] ALTAVOZ 1: Bueno, aquí estamos, la última serie P en CS50. Felicite a sí mismos de tener llegado tan lejos, ya que su primera hola mundos y imprimir pirámides de Mario. Usted ha hecho un sitio web la semana pasada. Y vamos a estar haciendo otra esta semana, uno que le permite al conducir por el campus de la Universidad de Harvard, recogiendo hasta los miembros del personal, y CS50 traer de vuelta a su casas residenciales. Ahora la última semana hemos trabajado en PHP, un lenguaje del lado del servidor. Para este conjunto P, nos vamos a introdujimos a JavaScript, que es un lenguaje del lado del cliente. Así que echemos un vistazo a algunos de los código de distribución que se proporciona a que para este conjunto P. En la carpeta de JavaScript, habrá ser un montón de archivos de JavaScript. Hay buildings.js, que contiene un conjunto de edificios alrededor de Harvard campus, con su información y la posición. Houses.js es una matriz de Harvard casas residenciales, con su latitudes y longitudes. Passengers.js contiene un gama de pasajeros - los miembros del personal CS50 - que usted va a traer de vuelta a sus casas residenciales. Math3D.js, que contiene una gran cantidad de funciones que hacer con el movimiento. Si usted es de mente matemática, a continuación, doy la bienvenida a que eche un vistazo. Pero usted no necesita entender todo allí. Shuttle.js, que se ocupa de El movimiento de la lanzadera. Y index.html es la página principal donde todo sucede, en realidad, en el que el usuario está interactuando con el sitio. Service.css es la hoja de estilo CSS, que, además de la Twitter Biblioteca Bootstrap, controles cómo index.html miradas. Y luego también tenemos service.js, que contiene funciones de servicio para el servicio de transporte. Y aquí es donde usted va a estar llenar en algunos de los al DOS. Ahora echemos un vistazo a los objetos y matrices asociativas en JavaScript, que para todos los efectos, son intercambiables. Si quisiera hacer un objeto una variable llamado una varita, me declararlo. Y dentro de esas llaves que lo haría especificar el núcleo es unicornio. La madera es la cereza. Y la longitud es de 13. Ahora también puedo acceder a los valores de los objetos que utilizan notación de matriz asociativa. Índice estructural Así varita, puedo establecer que igual al unicornio, o comprobar que, si lo que necesito. O puedo utilizar el operador punto. Madera dot Varita equivale cereza, y así sucesivamente, y así sucesivamente. Así que ya ves que las matrices asociativas y objetos en JavaScript van a ser intercambiables, y la voluntad venir en muy práctico. Luego vemos una serie de edificios en buildings.js. Una vez más, una serie de objetos. Si quisiera hacer una serie de los mejores edificios en el campus de Harvard, y luego Yo lo haría de la siguiente manera. Usando esta notación objeto, donde Almaceno la raíz, el nombre, la dirección, latitud y longitud para cada objeto único edificio. Vamos rápidamente a hablar de las variables en JavaScript. Como PHP, las variables JavaScript están débilmente o mal escrito. Para crear una variable local, el prefijo el nombre de la variable con el V-A-R, var. Ahora en JavaScript, las funciones se limitar el alcance de las variables. Así que si usted tiene una variable local dentro una función, entonces otras funciones no pueden acceder a él. Pero a diferencia de C, los bucles y las condiciones no lo hacen limitar el alcance de una variable. Así que incluso si se declara dentro de un condiciones, toda la función se tener acceso a ella. Ahora sin var, la variable será global. Así que si usted acaba de declarar el nombre y asignar un valor, entonces esa variable será una variable global en JavaScript. Ahora bien, en las casas, tenemos un asociativa array de objetos de tipo casa, donde cada casa es sólo una latitud y una longitud. Luego tenemos a los pasajeros matriz, que es una matriz del tipo de objeto de pasajeros. Así que cada pasajero tiene un nombre de usuario, un nombre, y una casa. Observe que estoy viendo de tipo de pasajeros, que en realidad sólo significa que cada objeto tiene el mismo par de valores clave. Así que cada objeto de tipo pasajero tiene un nombre de usuario, un nombre, y una casa. Entonces, ¿qué tenemos que hacer para el conjunto P? Bueno, tenemos que permitir a los usuarios elegir hasta los miembros del personal, mostrar todos los miembros del personal que están actualmente en nuestro servicio de transporte, y para soltarlos. Y luego también hablaremos adicional características que se pueden implementar para el conjunto P de transporte. Pero vamos a hablar de pickup primero. Los rostros de personal CS50 han sido plantado por todo el campus, donde cada la cara se implementa como una marca de lugar en la tierra 3D, y como marcador en el mapa 2D. Así, cuando el usuario hace clic en la camioneta botón, queremos añadir cercano los pasajeros a la lanzadera. Y también queremos quitar su lugar marca del mundo, y retire su marcador en el mapa, lo que indica que que están en el servicio de transporte ya. Entonces, ¿cómo detectar si los pasajeros están dentro del alcance de nuestro servicio de traslado? Pues bien, la función distancia - por lo que la distancia de puntos de enlace, pasando la latitud y la longitud, la voluntad calcular la distancia desde la corriente posición de la lanzadera a la señala que especifique con esa dada la latitud y longitud. Así que usted puede usar esto para calcular la distancia desde el transporte a la pasajeros. Pero, ¿cómo saber dónde los pasajeros son? Bueno, ahí es donde vamos a tener que editar la función poblar. Rellenar todos los lugares de los miembros del personal y los pasajeros en el mundo, y en el mapa, pero no lo hace almacenar su ubicación. Así que tal vez usted puede almacenar su colocar marcas y marcadores de alguna matriz global. Ahora ya existe una matriz global almacenar la información de los pasajeros. Las tiendas de pasajeros cada array El nombre del pasajero y de su casa. Así que tal vez usted puede agregar algunos parámetros allí a los objetos de pasajeros. Para ayudarnos a detectar todos los pasajeros dentro del alcance de nuestro servicio de transporte, vamos a bucle a través de todos los pasajeros en la matriz de pasajeros. Un bucle en JavaScript podría verse algo como esto, muy similar a la los de bucle en C. O podemos utilizar un alternativa para la estructura de bucle. Por var i en el array, donde me seguirá siendo el índice. Pero usted no necesita especificar la longitud de la matriz de puntos condición, y yo plus plus. La ubicación de cada pasajero es dada por su marca de lugar. Pero la marca de lugar no es el la latitud y la longitud. Tenemos que acceder a esos parámetros por conseguir la geometría, usando get la geometría en la marca de su sitio. Y luego, una vez que tenemos la geometría, obtener ya sea la latitud o la longitud, utilizando esas funciones. Así que ahora que sabemos cómo detectar si los pasajeros están a gama de nuestro transporte. Una vez que tengamos los pasajeros, vamos a desee agregar cualquier pasajero que son dentro de ese rango. Queremos que les permita subirse a, y tomar asiento en nuestro servicio de transporte, pero sólo si tenemos suficiente espacio para ellos. La matriz de asientos de puntos de enlace se indican si los asientos están vacíos, o que está en ese asiento. Así que si hay un asiento vacío, ese asiento será nulo. Así iterar sobre la matriz de asientos, la comprobación de asientos vacíos, almacenar los pasajeros en los asientos hasta que no tienen ningún escaño más vacías. Y, por desgracia, ningún resto de los pasajeros tendrá que esperar a que el próxima vez que el servicio de transporte, vuelve. Una vez que consiguen en el autobús, vamos a querer para eliminar su huella lugar, que es su foto en el mundo 3D. Si quisiera eliminar un lugar mark p, entonces me gustaría tener todas las características de mi tierra, desde el Google Earth, y luego eliminar ese lugar específico marcar utilizando la función removeChild. Luego, por último, vamos a eliminar el marcador, el icono del mapa en 2D para cualquier pasajeros que estamos recogiendo. Para eliminar un marcador, m, entonces voy a sólo hay que ejecutar m dot setMap nulo. Haga esto para los pasajeros dentro de la gama, y que haya terminado la recolección.