ZAMYLA CHAN: Bem, aqui estamos nós, a última em CS50 set-p. Felicitar-vos de ter chegado tão longe desde seu primeiro Olá Mundos e de impressão para cima Pirâmides de 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 se os membros e funcionários 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 p-set, 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 p-set. 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 sua latitudes e longitudes. Passengers.js contém uma matriz de passageiros, os funcionários 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ê para dar uma olhada. Mas você não precisa entender tudo lá dentro. Shuttle.js, que lida com o movimento da Shuttle. 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 além do Twitter Biblioteca Bootstrap, controles como aparência index.html. E depois também temos service.js, que contém funções de serviço para o Shuttle. E aqui é onde você vai estar preenchimento de alguns dos afazeres. 

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, eu o faria especificar, o núcleo é o unicórnio, a madeira é 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 wand.wood igual 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 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, nas casas, temos uma associativa array de objetos do tipo de acolhimento, 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 usuário nome, um nome e uma casa. 

Repare que eu estou dizendo de tipo passageiros, o que apenas significa realmente que cada objeto tem a mesmos pares de valores-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 p-set? 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 p-set Shuttle. 

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 sobre a Terra em 3D, e como um marcador no mapa 2D. Assim, quando o usuário clica no Levantamento botão, queremos adicionar nas proximidades passageiros para o transporte. E queremos também remover o seu lugar marca do mundo e retirar seu 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, de modo shuttle.distance, passando o latitude e longitude, irá calcular a distância entre a posição atual do serviço de transporte para o ponto 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, é aí que nós vamos ter que editar a função de preenchimento. Preencher todos os lugares dos membros da equipe no número de 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 da nossa transporte, alça de deixar passar toda a passageiros na matriz passageiros. Um loop em JavaScript pode parecer algo assim, muito semelhante ao aqueles para os loops em C. Ou podemos usar um alternativa para a estrutura de malha, para var i na matriz, onde eu ainda estará o índice, mas você não precisa especificar a array.length condição e i + +. 

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, obtendo 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 que lhes permitam entrar e tomar Sente-se em nosso traslado, mas apenas se temos espaço suficiente para eles. 

A matriz shuttle.seats indicará se os bancos 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 transporte vem para baixo. 

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, a partir do 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 de m, então eu vou basta executar m.setMap nulo. Faça isso para todos os passageiros dentro do alcance, e você terminou pickup. A função de gráfico deve exibir todos dos passageiros que se encontram na sua transporte, e assento vazio se vazio. Então gráfico deve iterar shuttle.seats, exibindo o informações sobre os passageiros para cada índice, e assento vazio se que o índice é nulo. 

Agora se o texto HTML é colocado dentro de um JavaScript variável, em seguida, usando document.getElementById, carta de lata editar o HTML interno de que, dada elemento, atribuindo a Texto HTML para o document.getElementById variável HTML interior. Quando os usuários clicam no botão Drop Off em index.html, ele vai chamar o função desistências. E é nosso trabalho para implementar isso. 

Em desistências, vamos querer remover qualquer passageiros do transporte somente se estamos na faixa de seu destino, sua casa residencial. Então desistências terá que verificar se o ônibus estiver ao alcance de qualquer um dos casas, e remova todo o necessário passageiros do ônibus. Então, como vamos ver se estamos a na faixa de quaisquer casas? Bem, mais uma vez, vamos fazer uso do shuttle.distance função, passando em a latitude e longitude do ponto de que estamos verificando contra. 

Mas o que são esses pontos? Bem, a matriz de casas, se você se lembrar em houses.js, armazena o latitude e longitude de cada casa em uma matriz associativa, onde cada índice é o nome daquela casa. Depois de remover os passageiros - bem, se estamos na faixa de sua casa que eles querem ir. Então, novamente, lembre-se que os passageiros armazena a casa que todos os passageiros quer ir para. Se eles estão dentro do alcance de sua casa, então nós vamos remover esse passageiro de shuttle.seats e conjunto sua posição na matriz como nulo. 

Agora vamos falar sobre alguns recursos extras que pode ser implementado em o CS50 Shuttle p-set. Há um sistema de pontos em que você manter o controle de quantas aponta um usuário tem. Para cair fora passageiros com sucesso, eles podem ganhar pontos. Mas, para tentar deixar passageiros onde não há nenhuma casa nas proximidades, bem, eles podem ter penalizado por isso. Então talvez você queira manter o controle de os pontos em uma variável global. 

Você pode implementar, talvez, um timer, onde o usuário tem uma certa quantidade de tempo de pegar e cair fora de uma certo número de passageiros. Talvez até mesmo integrar esta com o sistema de pontos. Ou você pode Editar Gráfico de tal forma que passageiros são classificadas segundo a casa. Assim que provavelmente seria uma espécie funcionar para shuttle.seats. 

Você pode implementar uma característica de vôo, onde se o usuário insere a Konami código, em seguida, o ônibus espacial decola a solo eo transporte pode voar. Mas, para uma queda de seguro fora, o melhor a fazer o ônibus desembarcar as suas rodas sobre o solo em primeiro lugar. Você também pode implementar o teletransporte, onde você faz uma lista suspensa de baixo edifícios em index.html. E selecionando um desses, o utilizador irá ser transportado para que a construção do campus. OK, porém, para viajar através as paredes de alguns edifícios em seu caminho até lá. 

Você também pode alterar a velocidade da transporte, permitindo ao usuário a aumentar ou diminuir a velocidade. Talvez você queira uma variável global para manter o controle de quanto combustível a transporte tem, diminuindo lo como você vá junto. Uma vez que você chegar a zero, no entanto, o serviço de transporte não será capaz de se mover a menos que você tenha reabastecido, talvez usando um botão ou até mesmo fazer o seu próprio posto de gasolina. 

Mas isso não é certamente uma lista exaustiva. Confira a especificação para o pleno listar, ou, talvez, propor o seu próprio para o seu TF. O céu é o limite. Esta é sua última CS50 p-set, para se divertir com ele. Este foi CS50 Shuttle. 

Eu tenho que dizer que foi um prazer fazendo isto para você com o equipe de produção. E eu espero que você tenha apreciá-los, também. Meu nome é Zamyla. E esta foi CS50.