>> [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.