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