ZAMYLA CHAN: Bueno, aquí estamos, el último p-set en CS50. Felicite a sí mismos de tener llegado tan lejos, ya que su primera Hola Mundos e impresión Up 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 y del personal CS50 traer de vuelta a su casas residenciales. 

Ahora, la semana pasada se trabajó en PHP, un lenguaje del lado del servidor. Por esta p-set, 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 p-set. 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 una matriz 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 matemáticamente mente abierta, entonces Les doy la bienvenida a echar 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 Twitter Biblioteca Bootstrap, controles cómo index.html miradas. Y luego también tenemos service.js, que contiene funciones de servicio para el traslado. Y aquí es donde usted va a estar rellenar algunas de las tareas para-de. 

Ahora echemos un vistazo a los objetos y matrices asociativas en JavaScript, que, para todos los intentos y propósitos, son intercambiables. Si quisiera hacer un objeto una variable llamado una varita, me declararlo. Y dentro de esas llaves, lo haría especificar, el núcleo es el unicornio, la madera es cereza, y la longitud es 13. 

Ahora, yo 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 necesito. O puedo utilizar el operador punto wand.wood es igual a 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, otra vez, un conjunto 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 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, en las casas, tenemos un asociativa array de objetos de tipo de acogida, en los que 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 usuario nombre, un nombre y una casa. 

Observe que estoy diciendo de tipo de pasajeros, que en realidad sólo significa que cada objeto tiene el mismos pares 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 por la p-set? 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 traslado p-set. 

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 recogida botón, queremos añadir cercano los pasajeros a la lanzadera. Y también queremos quitar su lugar marca del mundo y extraer 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? Bueno, la distancia la función, por lo que shuttle.distance, pasando el latitud y longitud, calculará la distancia desde la posición actual del servicio de transporte hasta el punto de que que especifique con que dado 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 de 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 hay 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 nuestra lanzadera, bucle nos dejó a través de todo el pasajeros en la matriz de pasajeros. Un bucle en JavaScript podría verse algo como esto, muy similar a la aquellos para los bucles en C. O podemos utilizar un alternativa para la estructura de bucle, para var i en matriz, donde yo todavía estaré el índice, pero no es necesario especificar el Array.length condición y i + +. 

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 lugar, y luego una vez que tenemos la geometría, consiguiendo ya sea la latitud o la longitud el uso de 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 subir y tomar un puesto en el servicio de transporte, pero sólo si tenemos suficiente espacio para ellos. 

La matriz shuttle.seats indicará 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 se reduce. 

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.setMap nulo. Haga esto para los pasajeros dentro de la gama, y que haya terminado la recolección. La función de la gráfica debe mostrar todo de los pasajeros que se encuentran en su lanzadera, y el asiento vacío si está vacío. Así gráfico debe iterar sobre shuttle.seats, mostrando el información al pasajero por cada índice, y el asiento vacío si ese índice es nulo. 

Ahora bien, si el texto HTML se coloca dentro de un JavaScript variable, entonces mediante el uso document.getElementById, carta lata editar el código HTML interno del que figura elemento mediante la asignación de la Texto HTML en el document.getElementById variables HTML interno. Cuando los usuarios hacen clic en el botón Drop Off en index.html, que va a llamar a la función de recepción de boletas. Y es nuestro trabajo para poner en práctica eso. 

En recepción de boletas, vamos a querer eliminar cualquier los pasajeros de la nave sólo si estamos en el rango de su destino, su casa residencial. Así dropoff tendrá que comprobar si el servicio de transporte está dentro del alcance de cualquiera de los casas, y eliminar cualquier necesitado los pasajeros de la nave. Entonces, ¿cómo comprobamos si estamos en el rango de las casas? Bueno, una vez más, vamos a hacer uso de la función shuttle.distance, pasando la latitud y longitud del punto que estamos comprobando en contra. 

¿Pero cuáles son esos puntos? Bueno, la matriz casas, si usted recuerda en houses.js, almacena el latitud y longitud de cada casa en una matriz asociativa, donde cada índice es el nombre de esa casa. Luego de eliminar los pasajeros - así, sólo si estamos en el rango de su casa que quieren ir. Así que de nuevo, recuerde que los pasajeros almacena la casa que todos los pasajeros quiere ir a. Si están dentro del alcance de su casa, entonces vamos a eliminar esa pasajero desde shuttle.seats y conjunto su posición en la matriz en null. 

Ahora vamos a hablar de algunas características adicionales que se pueden implementar en el CS50 traslado p-set. Hay un sistema de puntos por el que hacer un seguimiento de cuántos señala que un usuario tiene. Para dejar a los pasajeros con éxito, pueden conseguir puntos. Pero para tratar de dejar a los pasajeros donde no hay ninguna casa cercana, así, pueden ser penalizado por ello. Así que tal vez usted quiere hacer un seguimiento de los puntos en una variable global. 

Puede implementar tal vez un contador de tiempo, donde el usuario tiene una cierta cantidad de tiempo para recoger y dejar a un cierto número de pasajeros. Tal vez incluso integrar este con el sistema de puntos. O puede editar Gráfico de tal manera que los pasajeros están ordenados por casa. Así que probablemente sería una especie funcionar a shuttle.seats. 

Puede implementar una característica de vuelo, donde si el usuario introduce la Konami código, entonces el transbordador despega la suelo y la lanzadera pueden volar. Sin embargo, para una caída segura fuera, mejor para hacer el transbordador aterrizar sus ruedas en el tierra primero. También puede aplicar la teleportación, donde se hace una lista desplegable de abajo edificios en index.html. Y la selección de uno de ellos, el usuario será transportado a ese edificio en el campus. Aceptar, sin embargo, para viajar a través de las paredes de algunos edificios en su camino. 

También puede cambiar la velocidad de la lanzadera, lo que permite al usuario aumentar o disminuir la velocidad. Tal vez usted quiere una variable global a realizar un seguimiento de la cantidad de combustible transbordador tiene, disminuyendo que a medida que avanza. Una vez que llegue a cero, sin embargo, el servicio de transporte no será capaz de moverse a menos que haya repostado, tal vez usando un botón o incluso hacer su propia estación de servicio. 

Pero eso no es ciertamente una lista exhaustiva. Echa un vistazo a las especificaciones para el pleno lista, o tal vez proponer tu a tu TF. El cielo es el límite. Esta es tu última CS50 p-set, así que se divierte con él. Este fue CS50 Shuttle. 

Tengo que decir que ha sido un placer hacer esto para usted con el equipo de producción. Y espero que usted tiene disfrutar de ellos, también. Mi nombre es Zamyla. Y esto fue CS50.