>> ZAMYLA CHAN: Ben, aquí estamos nós, a última en CS50 set-p.
Felicitar-vos de chegara tan lonxe desde o seu primeiro Ola
Mundos e de impresión superior Pirámides de Mario.
Fixo unha web a semana pasada.
E nós imos estar facendo outra esta semana, que permite que
unidade en torno ao campus de Harvard, pegando os membros e funcionarios CS50
trae-los de volta á súa casas residenciais.
>> Agora, a semana pasada, traballamos en PHP, unha linguaxe do lado do servidor.
Para este p-set, estamos quedando introducido para JavaScript, que é un
linguaxe do lado do cliente.
Entón, imos dar un ollo a algunhas das código de distribución que está indicado de
por este p-set.
No cartafol JavaScript, haberá ser unha morea de arquivos JavaScript.
>> Hai buildings.js, que contén unha conxunto de edificios en torno Harvard
campus coa súa información e posición.
Houses.js é unha matriz de Harvard vivendas residenciais con súa
latitudes e lonxitudes.
Passengers.js contén unha matriz de pasaxeiros, os funcionarios CS50
que estará traendo de volta a súas casas residenciais.
>> Math3D.js, que contén unha gran cantidade de funcións para facer o movemento.
Se é matematicamente minded, a continuación, Congratulo-me con vostede para dar un ollo.
Pero non ten que entender todo alí dentro.
Shuttle.js, que trata sobre o movemento da Shuttle.
E index.html é a páxina de inicio, onde todo acontece, de feito, onde o
usuario está interactuar coa web.
>> Service.css é a folla de estilo CSS, que ademais de Twitter
Biblioteca Bootstrap, controis como aspecto index.html.
E despois tamén temos service.js, que contén funcións de servizo para
o Shuttle.
E aquí é onde vai estar recheo de algúns dos quefaceres.
>> Agora imos dar un ollo a obxectos e arrays asociativos en JavaScript,
que, para todos os efectos, son intercambiábeis.
Se eu quixese facer un obxecto unha variable chamado unha vara, eu
declaralo lo.
E dentro destas claves, eu o faría especifica, o núcleo é o unicornio, a madeira
é cereixa, e a lonxitude é de 13.
>> Agora, eu tamén pode acceder aos valores de obxectos utilizando
notación de matriz asociativa.
Núcleo do índice Entón vara, podo definir que igual unicornio, ou
comprobar que, se eu ter.
Ou podo usar o operador punto wand.wood igual cereixa, e
así por diante e así por diante.
Entón ve que as matrices de asociación e obxectos en JavaScript van ser
intercambiables e ganas vir en moi útil.
>> Logo vemos un conxunto de edificios en buildings.js,
unha vez máis, unha serie de obxectos.
Se eu quixese facer unha matriz dos mellores edificios no campus de Harvard, logo
Quere facelo do seguinte xeito.
Usando este obxecto notación, onde Eu gardar a raíz, o nome, enderezo,
latitude, lonxitude e para cada único obxecto edificio.
>> Imos axiña falar variables en JavaScript.
Como PHP, variables JavaScript son feblemente ou vagamente ingresaran.
Para crear unha variable local, prefixar nome da variable con V-A-R var.
Agora, en JavaScript, as funcións serán limitar o ámbito das variables.
Entón se ten unha variable local dentro unha función, entón outras funcións
Non pode acceder a ela.
>> Pero a diferenza de C, loops e condicións non limitar o ámbito de aplicación dunha variable.
Así, mesmo se declara-la dentro dun condición, toda a función
ter acceso a el.
Agora, sen var, a variable será global.
Entón, se acaba de declarar o nome e asignar un valor, entón esa variable
será unha variable global en JavaScript.
>> Agora, nas casas, temos unha asociativa array de obxectos do tipo de acollida, onde
Cada casa é só unha latitude e unha lonxitude.
Entón temos os pasaxeiros matriz, que é unha matriz
do tipo de obxecto de pasaxeiros.
Así, cada pasaxeiro ten un usuario nome, un nome e unha casa.
>> Repare que eu digo de tipo pasaxeiros, o que significa realmente
que cada obxecto ten a mesmos pares de valores clave.
Así, cada obxecto do tipo pasaxeiro ten un nome de usuario, un nome e unha casa.
Entón, o que necesitamos facer a p-set?
Así, debemos permitir que os usuarios escollan os membros do equipo, para amosar todas
os membros do equipo que están actualmente en noso servizo de transporte, e deixalos fóra.
E entón nós tamén imos falar adicional recursos que poden ser aplicadas para
o p-set Shuttle.
>> Pero imos falar sobre o captador primeiro.
Os rostros dos empregados CS50 ser plantas por todo o campus, onde cada
cara é implementado como unha marca local sobre a Terra en 3D, e como un
marcador no mapa 2D.
Así, cando o usuario fai clic no Levantado botón, queremos engadir nos arredores
pasaxeiros para o transporte.
E queremos tamén eliminar o seu sitio marca do mundo e retirar o seu
marcador dende o mapa, o que indica que están no noso autobús agora.
>> Entón, como podemos detectar se os pasaxeiros están dentro do alcance do noso transporte?
Así, a distancia da función, de maneira shuttle.distance, pasando o
latitude e lonxitude, ha calcular a distancia entre a posición actual
do servizo de transporte para o punto que se especifica con que, dada
latitude e lonxitude.
Así, pode usar isto para calcular a distancia do transporte para o
pasaxeiros.
>> Pero como vostede sabe onde os pasaxeiros están?
Ben, é aí onde nós imos ter que editar a función de recheo.
Cubrir todas as partes dos membros do equipo no número de pasaxeiros para o mundo
e no mapa, pero non fai gardar a súa localización.
Entón quizais pode almacenar as súas poñer marcas e etiquetas
nalgúns matriz global.
>> Agora, xa existe unha matriz global gardar información de pasaxeiros.
A matriz almacena pasaxeiros cada nome do pasaxeiro ea súa casa.
Entón, talvez pode engadir algúns parámetros alí para os obxectos de pasaxeiros.
>> Para axudarnos a detectar todos os pasaxeiros dentro do alcance da nosa
transporte, manexar de deixar pasar toda a pasaxeiros na matriz pasaxeiros.
Un loop en JavaScript pode parecer algo así, moi semellante ao
aqueles para os loops en C. Ou podemos usar un alternativa para a estrutura de punto, para
var i na matriz, onde eu aínda estará o índice, pero non precisa
especificar a array.length condición e i + +.
>> Cada situación do pasaxeiro é dada pola súa marca lugar.
Pero a marca non é o lugar latitude e lonxitude.
Temos que acceder a estes parámetros por recibindo a xeometría, usando get
xeometría na marca lugar, e, a continuación, xa que temos a xeometría, obtendo
ou a latitude ou a longura usar estas funcións.
>> Polo tanto, agora sabemos como detectar se pasaxeiros están dentro
alcance da nosa nave.
Unha vez que temos os pasaxeiros, nós imos Quere engadir todos os pasaxeiros que son
dentro dese rango.
Queremos que lles permitan entrar e tomar Sente-se na nosa traslado, pero só
si temos espazo suficiente para eles.
>> A matriz shuttle.seats indicará se os bancos están baleiros, ou
quen está nese lugar.
Polo tanto, se un banco está baleira, que a base será nulo.
Entón iterado sobre a matriz asentos, verificación de lugares baleiros, almacenando
pasaxeiros para os asentos ata que non ten máis asentos baleiros.
E, por desgraza, as outros pasaxeiros terá que esperar ao
próxima vez que o transporte ven abaixo.
>> Así que chegar ao bus, nós imos querer para eliminar a súa marca local, que
é a súa imaxe no mundo 3D.
Se eu quixese eliminar un lugar marca p, entón quere obter todos os recursos
da miña terra, a partir de Google Earth, e elimine aquel lugar específico
marcar mediante a función removeChild.
Entón, finalmente, imos eliminar o marcador, a icona no mapa 2D, para calquera
pasaxeiros que están pegando.
>> Para eliminar un marcador de m, entón eu vou basta con executar m.setMap nulo.
Faino a todos os pasaxeiros dentro do seu alcance, e rematou Pickup.
A función de gráfico debe amosar todos dos pasaxeiros que se atopan na súa
transporte, e asento baleiro baleiro.
Entón gráfico debe iterado shuttle.seats, mostrando o
información sobre os pasaxeiros para cada índice, e asento baleiro que o contido é nulo.
>> Agora o texto HTML e colocar dentro dun JavaScript variable, a continuación, usando
document.getElementById, carta de lata editar o HTML interno de que, dada
elemento, atribuíndo a Texto HTML ao
document.getElementById variable HTML interior.
Cando os usuarios click no botón drop off en index.html, que vai chamar o
función abandonos.
E é o noso traballo para aplicar iso.
>> En abandonos, imos querer eliminar calquera pasaxeiros do transporte só se
estamos na franxa de destino, súa casa residencial.
Entón abandonos terá que comprobar se o autobús está ao alcance de calquera dos
casas, e elimine todo o necesario pasaxeiros do autobús.
Entón, como imos ver se estamos a na franxa de calquera casas?
Ben, unha vez máis, imos facer uso do shuttle.distance función, pasando en
a latitude e lonxitude do punto de que estamos comprobando contra.
>> Pero o que son eses puntos?
Ben, a matriz de vivendas, se lembrar en houses.js, almacena o
latitude e lonxitude de cada casa en unha matriz asociativa, onde cada
índice é o nome daquela casa.
Despois de eliminar os pasaxeiros -
ben, se estamos na franxa da súa casa que queren ir.
Entón, de novo, lembre-se que os pasaxeiros almacena a casa que todos os pasaxeiros
quere ir.
Se eles están dentro do alcance do seu casa, entón nós imos eliminar este
pasaxeiro de shuttle.seats e conxunto súa posición na matriz como nulo.
>> Agora imos falar sobre algúns recursos extra que pode ser aplicado en
o CS50 Shuttle p-set.
Hai un sistema de puntos en que manter o control de cantas
apunta un usuario ten.
Para caer fóra pasaxeiros correctamente, poden gañar puntos.
Pero, para tratar de deixar pasaxeiros onde non hai ningunha casa nas proximidades,
ben, poden ter penalizado por iso.
Entón pode utilizar manter o control de os puntos nunha variable global.
>> Pode aplicar, quizais, un temporizador, onde o usuario ten unha certa cantidade de
tempo de incorporarse e caer fóra dunha número de pasaxeiros.
Quizais mesmo integrar esta co sistema de puntos.
Ou pode Editar Gráfico de tal forma que pasaxeiros son clasificadas segundo a casa.
Así que probablemente sería unha especie funcionar para shuttle.seats.
>> Pode aplicar unha característica de voo, onde se o usuario inserir a Konami
código, a continuación, o transbordador espacial despegar a solo eo transporte pode voar.
Pero, para unha caída de seguro fóra, o mellor que facer o autobús desembarcar as súas rodas sobre o
chan en primeiro lugar.
Tamén pode aplicar o teletransporte, onde fai unha lista despregábel de abaixo
edificios en index.html.
E seleccionando un destes, o usuario pode ser transportado a
que a construción do campus.
OK, con todo, para viaxar a través as paredes dalgúns
edificios no seu camiño ata alí.
>> Tamén pode cambiar a velocidade da transporte, permitindo ao usuario a aumentar
ou diminuír a velocidade.
Pode utilizar unha variable global para manter o control de canto combustible a
transporte ten, diminuíndo como vai xunto.
Unha vez que chegar a cero, con todo, o servizo de transporte non poderá moverse a menos que teña
reabastecido, quizais usando un botón ou incluso facer o seu propio posto de gasolina.
>> Pero iso non é certamente unha lista exhaustiva.
Consulte a especificación para o pleno lista, ou, tal vez, propoñer
o seu propio para o TF.
O ceo é o límite.
Esta é a súa última CS50 p-set, para divertirse con el.
Este foi CS50 Shuttle.
>> Teño que dicir que foi un pracer facendo isto para vostede co
equipo de produción.
E eu espero que teña apreciar-los, tamén.
O meu nome é Zamyla.
E esta foi CS50.