[Música tocando] COLUNA 1: Bem, aqui estamos nós, o último conjunto P no CS50. Felicitar-vos de ter chegado tão longe desde seu primeiro Olá mundos e imprimir pirâmides para Mario. Você fez um site na semana passada. E nós vamos estar fazendo outra esta semana, que permite que você unidade em torno do campus de Harvard, pegando até os membros da equipe, e CS50 trazê-los de volta ao seu casas residenciais. Agora, na semana passada nós trabalhamos em PHP, uma linguagem do lado do servidor. Para este conjunto P, estamos ficando introduzido para JavaScript, que é um linguagem do lado do cliente. Então, vamos dar uma olhada em alguns dos código de distribuição que está fornecido de por este conjunto P. Na pasta JavaScript, haverá ser um monte de arquivos JavaScript. Há buildings.js, que contém uma conjunto de edifícios em torno Harvard campus, com suas informações e posição. Houses.js é uma matriz de Harvard casas residenciais, com a sua latitudes e longitudes. Passengers.js contém um variedade de passageiros - os membros da equipe CS50 - que você estará trazendo de volta a suas casas residenciais. Math3D.js, que contém uma grande quantidade de funções para fazer com o movimento. Se você é matematicamente minded, em seguida, congratulo-me com você dar uma olhada. Mas você não precisa entender tudo lá dentro. Shuttle.js, que lida com movimento do ônibus espacial. E index.html é a página inicial, onde tudo acontece, de verdade, onde o usuário está interagindo com o site. Service.css é a folha de estilo CSS, que, para além do Twitter Biblioteca Bootstrap, controles como aparência index.html. E então nós também temos service.js, que contém funções de serviço para o ônibus. E aqui é onde você vai estar preenchimento de alguns dos de dos. Agora vamos dar uma olhada em objetos e arrays associativos em JavaScript, que para todos os efeitos, são intercambiáveis. Se eu quisesse fazer um objeto uma variável chamado uma varinha, eu declará-lo. E dentro dessas chaves que eu faria especificar o núcleo é unicórnio. A madeira é de cereja. E o comprimento é de 13. Agora eu também pode acessar os valores de objetos usando notação de matriz associativa. Núcleo do índice Então varinha, eu posso definir que igual unicórnio, ou verificar que, se eu precisar. Ou eu posso usar o operador ponto. Madeira Wand ponto é igual a cereja, e assim por diante, e assim por diante. Então você vê que as matrizes de associação e objetos em JavaScript vão ser intercambiáveis ​​e vontade vir em muito útil. Em seguida, vemos um conjunto de edifícios em buildings.js. Mais uma vez, uma série de objetos. Se eu quisesse fazer uma matriz dos melhores edifícios no campus de Harvard, em seguida, Gostaria de fazê-lo da seguinte maneira. Usando este objeto notação, onde Eu armazenar a raiz, o nome, endereço, latitude, longitude e para cada único objeto edifício. Vamos rapidamente falar sobre variáveis em JavaScript. Como PHP, variáveis ​​JavaScript são fracamente ou vagamente digitado. Para criar uma variável local, você prefixar o nome da variável com o V-A-R, var. Agora em JavaScript, as funções serão limitar o âmbito das variáveis. Então se você tem uma variável local dentro uma função, então outras funções não pode acessá-lo. Mas ao contrário de C, loops e condições não limitar o âmbito de aplicação de uma variável. Assim, mesmo se você declará-la dentro de um condição, toda a função ter acesso a ele. Agora sem var, a variável será global. Então, se você acabou de declarar o nome e atribuir um valor, então essa variável será uma variável global em JavaScript. Agora em casas, temos um associativa array de objetos do tipo casa, onde cada casa é apenas uma latitude e uma longitude. Então nós temos os passageiros matriz, que é uma matriz do tipo de objeto de passageiros. Assim, cada passageiro tem um nome de usuário, um nome e uma casa. Repare que eu estou vendo do tipo passageiros, o que apenas significa realmente que cada objeto tem a mesmo par de valor da chave. Assim, cada objeto do tipo passageiro tem um nome de usuário, um nome e uma casa. Então, o que nós precisamos fazer para o conjunto P? Bem, temos de permitir que os usuários escolham se os membros da equipe, para exibir todas os membros da equipe que estão atualmente em nosso serviço de transporte, e deixá-los fora. E então nós também vamos falar sobre adicional recursos que podem ser implementadas para o conjunto P de transporte. Mas vamos falar sobre o captador primeiro. Os rostos dos funcionários CS50 ter sido plantadas por todo o campus, onde cada cara é implementado como uma marca local na terra 3D, e como um marcador no mapa 2D. Assim, quando o usuário clica no captador botão, queremos adicionar nas proximidades passageiros para o transporte. E queremos também remover o seu lugar marca do mundo, e retire sua marcador a partir do mapa, o que indica que eles estão no nosso autocarro agora. Então, como podemos detectar se os passageiros estão dentro do alcance do nosso transporte? Bem, a distância da função - assim a distância de pontos de transporte, passando a latitude ea longitude, vontade calcular a distância do actual posição do transporte para o apontar que você especificar com que dada latitude e longitude. Assim, você pode usar isso para calcular a distância do transporte para o passageiros. Mas como você sabe onde os passageiros estão? Bem, isso é onde nós teremos que editar a função de preenchimento. Preencher todos os lugares dos membros da equipe e os passageiros para o mundo, e no mapa, mas não faz armazenar sua localização. Então talvez você pode armazenar suas colocar marcas e marcadores em alguns matriz global. Agora já existe uma matriz global armazenar informações de passageiros. A matriz armazena passageiros cada nome do passageiro e sua casa. Então, talvez você pode adicionar alguns parâmetros lá para os objetos de passageiros. Para nos ajudar a detectar todos os passageiros dentro do alcance do nosso serviço de transporte, vamos loop através de todos os passageiros na matriz de passageiros. Um loop em JavaScript pode parecer algo assim, muito semelhante ao aqueles loop for em C. Ou podemos usar um alternativa para a estrutura de loop. Para var i na matriz, onde eu ainda será o índice. Mas você não precisa especificar o comprimento da matriz de ponto condição, e eu plus plus. Cada localização do passageiro é dada pela sua marca lugar. Mas a marca não é o lugar latitude e a longitude. Temos que acessar esses parâmetros por recebendo a geometria, usando get geometria na marca lugar. E, em seguida, uma vez que temos a geometria, obtenção ou a latitude ou a longitude, usando essas funções. Portanto, agora sabemos como detectar se passageiros estão dentro alcance da nossa nave. Uma vez que temos os passageiros, nós vamos quer adicionar todos os passageiros que são dentro desse intervalo. Queremos permitir que eles hop on, e ter um assento em nosso traslado, mas apenas se temos espaço suficiente para eles. A matriz de transporte assentos DOT indicar se assentos estão vazios, ou quem está nesse lugar. Portanto, se um banco estiver vazia, que o banco vai ser nulo. Então iterar sobre a matriz assentos, verificação de lugares vazios, armazenando passageiros para os assentos até que você não tem mais assentos vazios. E, infelizmente, todos os outros passageiros vai ter que esperar para o próxima vez que o ônibus vem por aí. Assim que chegar no ônibus, nós vamos querer para remover a sua marca local, que é a sua foto no mundo 3D. Se eu quisesse remover um lugar marca p, então gostaria de obter todos os recursos da minha terra, desde o Google Earth, e remova aquele lugar específico marcar utilizando a função removeChild. Então, finalmente, vamos remover o marcador, o ícone no mapa 2D para qualquer passageiros que estão pegando. Para remover um marcador, m, então eu vou basta executar m dot setMap nulo. Faça isso para todos os passageiros dentro do alcance, e você terminou pickup.