>> ZAMYLA CHAN: Bé, aquí estem, l'últim p-set en CS50.
Feliciti a si mateixos de tenir arribat tan lluny, ja que la seva primera Hola
Mons i impressió Up Piràmides de Mario.
Vostè ha fet un lloc web la setmana passada.
I estarem fent una altra aquesta setmana, un que li permet al
conduir pel campus de la Universitat de Harvard, recollint fins als membres i del personal CS50
portar de tornada al seu cases residencials.
>> Ara, la setmana passada es va treballar en PHP, un llenguatge del costat del servidor.
Per aquesta p-set, ens anem a introduir a JavaScript, que és un
llenguatge del costat del client.
Així que donem una ullada a alguns dels codi de distribució que es proporciona
que per a aquest p-set.
A la carpeta de JavaScript, haurà ser un munt d'arxius de JavaScript.
>> Hi ha buildings.js, que conté un conjunt d'edificis al voltant de Harvard
campus amb la seva informació i la posició.
Houses.js és una matriu de Harvard cases residencials, amb el seu
latituds i longituds.
Passengers.js conté una matriu de passatgers, els membres del personal CS50
que vostè va a portar de tornada a casa residencials.
>> Math3D.js, que conté una gran quantitat de funcions que fer amb el moviment.
Si vostè és matemàticament ment oberta, llavors Els dono la benvinguda a fer una ullada.
Però vostè no necessita entendre tot allà.
Shuttle.js, que s'ocupa de el moviment de la llançadora.
I index.html és la pàgina principal on tot passa, en realitat, en què el
usuari està interactuant amb el lloc.
>> Service.css és el full d'estil CSS, que a més de Twitter
Biblioteca Bootstrap, controls com index.html mirades.
I després també hem service.js, que conté funcions de servei per
el trasllat.
I aquí és on vostè va a estar omplir algunes de les tasques per-de.
>> Ara donem una ullada als objectes i matrius associatives en JavaScript,
que, per a tots els intents i propòsits, són intercanviables.
Si volgués fer un objecte una variable anomenat una vareta, em
declarar.
I dins d'aquestes claus, ho faria especificar, el nucli és el unicorn, la fusta
és cirera, i la longitud és 13.
>> Ara, jo també puc accedir als valors dels objectes que utilitzen
notació de matriu associativa.
Índex estructural Així vareta, puc establir que potser l'unicorn, o
comprovar que si necessito.
O puc utilitzar l'operador punt wand.wood és igual a cirera, i
així successivament i així successivament.
Així que ja veus que les matrius associatives i objectes en JavaScript seran
intercanviables, i la voluntat venir en molt pràctic.
>> Després veiem una sèrie d'edificis en buildings.js,
una altra vegada, un conjunt d'objectes.
Si volgués fer una sèrie dels millors edificis al campus de Harvard, i després
Jo ho faria de la següent manera.
Usant aquesta notació objecte, on Emmagatzemo l'arrel, el nom, l'adreça,
latitud i longitud per a cada objecte únic edifici.
>> Anem ràpidament a parlar de les variables en JavaScript.
Com PHP, les variables JavaScript estan feblement o mal escrit.
Per crear una variable local, el prefix el nom de la variable V-A-R, var.
Ara, en JavaScript, les funcions es limitar l'abast de les variables.
Així que si vostè té una variable local dins una funció, llavors altres funcions
no poden accedir-hi.
>> Però a diferència de C, els bucles i les condicions no ho fan limitar l'abast d'una variable.
Així que fins i tot si es declara dins d'un condicions, tota la funció es
tenir accés.
Ara, var, la variable serà global.
Així que si vostè acaba de declarar el nom i assignar un valor, llavors aquesta variable
serà una variable global en JavaScript.
>> Ara, a les cases, tenim un associativa array d'objectes de tipus d'acollida, en els quals
cada casa és només una latitud i una longitud.
Després tenim als passatgers matriu, que és una matriu
del tipus d'objecte de passatgers.
Així que cada passatger té un usuari nom, un nom i una casa.
>> Observi que estic dient de tipus de passatgers, que en realitat només significa
que cada objecte té el mateixos parells de valors clau.
Així que cada objecte de tipus passatger té un nom d'usuari, un nom, i una casa.
Llavors, què hem de fer per la p-set?
Bé, hem de permetre als usuaris triar fins als membres del personal, mostrar tots
els membres del personal que estan actualment en el nostre servei de transport, i per deixar-los anar.
I després també parlarem addicional característiques que es poden implementar per
el trasllat p-set.
>> Però parlarem de pickup primer.
Els rostres de personal CS50 han estat plantat per tot el campus, on cada
la cara s'implementa com una marca de lloc a la Terra 3D, i com
marcador al mapa 2D.
Així, quan l'usuari fa clic a la recollida botó, volem afegir proper
els passatgers a la llançadora.
I també volem treure el seu lloc marca del món i extreure el seu
marcador al mapa, el que indica que que estan al servei de transport ja.
>> Llavors, com detectar si els passatgers estan dins de l'abast del nostre servei de trasllat?
Bé, la distància la funció, per la qual cosa shuttle.distance, passant el
latitud i longitud, calcula la distància des de la posició actual
del servei de transport fins al punt que que especifiqui amb què donat
latitud i longitud.
Així que vostè pot utilitzar això per a calcular la distància des del transport a la
passatgers.
>> Però, com saber on els passatgers són?
Bé, aquí és on haurem de editar la funció poblar.
Omplir tots els llocs dels membres del personal de passatgers al món
i al mapa, però no ho fa emmagatzemar la seva ubicació.
Així que potser vostè pot emmagatzemar el seu col · locar marques i marcadors
d'alguna matriu global.
>> Ara, ja hi ha una matriu global emmagatzemar la informació dels passatgers.
Les botigues de passatgers cada array El nom del passatger i de casa.
Així que potser vostè pot afegir alguns paràmetres allà als objectes de passatgers.
>> Per ajudar-nos a detectar tots els passatgers dins de l'abast de la nostra
llançadora, bucle ens va deixar a través de tot el passatgers a la matriu de passatgers.
Un bucle en JavaScript podria veure alguna cosa com això, molt similar a la
aquells per als bucles en C. O podem utilitzar un alternativa per a l'estructura de bucle, per
var i en matriu, on jo encara estaré l'índex, però no cal
especificar el array.length condició i i + +.
>> La ubicació de cada passatger és donada per la seva marca de lloc.
Però la marca de lloc no és el la latitud i la longitud.
Hem d'accedir a aquests paràmetres per aconseguir la geometria, fent servir get
la geometria en la marca de lloc, i després una vegada que tenim la geometria, aconseguint
ja sigui la latitud o la longitud l'ús d'aquestes funcions.
>> Així que ara que sabem com detectar si els passatgers estan a
gamma del nostre transport.
Un cop tinguem els passatgers, anem a voleu afegir qualsevol passatger que són
dins d'aquest rang.
Volem que els permeti pujar i prendre un lloc en el servei de transport, però només
si tenim prou espai per a ells.
>> La matriu shuttle.seats indicarà si els seients estan buits, o
que està en aquest seient.
Així que si hi ha un seient buit, aquest seient serà nul.
Així iterar sobre la matriu de seients, la comprovació de seients buits, emmagatzemar
els passatgers als seients fins que no tenen cap escó més buides.
I, per desgràcia, cap resta dels passatgers haurà d'esperar que el
propera vegada que el servei de transport es redueix.
>> Una vegada que aconsegueixen a l'autobús, anem a voler per eliminar la seva empremta lloc, que
és la seva foto en el món 3D.
Si volgués suprimir un lloc mark p, llavors m'agradaria tenir totes les característiques
de la meva terra, des del Google Earth, i després eliminar aquest lloc específic
marcar utilitzant la funció removeChild.
Després, finalment, anem a eliminar el marcador, la icona del mapa en 2D, per a qualsevol
passatgers que estem recollint.
>> Per eliminar un marcador m, llavors vaig a només cal executar m.setMap nul.
Feu això per als passatgers dins de la gamma, i que hagi acabat la collita.
La funció de la gràfica ha de mostrar tot dels passatgers que es troben al seu
llançadora, i el seient buit si està buit.
Així gràfic ha iterar sobre shuttle.seats, mostrant el
informació al passatger per cada índex, i el seient buit si aquest índex és nul.
>> Ara bé, si el text HTML es col · loca dins d'un JavaScript variable, llavors mitjançant l'ús
document.getElementById, carta llauna editar el codi HTML intern del que figura
element mitjançant l'assignació de la Text HTML al
document.getElementById variables HTML intern.
Quan els usuaris fan clic al botó Drop Off en index.html, que va a trucar a la
funció de recepció de butlletes.
I és la nostra feina per posar en pràctica això.
>> En recepció de butlletes, anem a voler eliminar qualsevol els passatgers de la nau només si
estem en el rang del seu destí, casa residencial.
Així dropoff haurà de comprovar si el servei de transport està dins de l'abast de qualsevol dels
cases, i eliminar qualsevol necessitat els passatgers de la nau.
Llavors, com comprovem si estem en el rang de les cases?
Bé, un cop més, farem ús de la funció shuttle.distance, passant
la latitud i longitud del punt que estem comprovant en contra.
>> Però quins són aquests punts?
Bé, la matriu cases, si vostè recorda en houses.js, emmagatzema el
latitud i longitud de cada casa a una matriu associativa, on cada
índex és el nom d'aquesta casa.
Després d'eliminar els passatgers -
així, només si estem en el rang de la seva casa que volen anar.
Així que de nou, recordeu que els passatgers emmagatzema la casa que tots els passatgers
vol anar a.
Si estan dins de l'abast de la seva casa, llavors anem a eliminar aquesta
passatger des shuttle.seats i conjunt la seva posició en la matriu en null.
>> Ara anem a parlar d'algunes característiques addicionals que es poden implementar a
el CS50 trasllat p-set.
Hi ha un sistema de punts pel qual fer un seguiment de quants
assenyala que un usuari té.
Per deixar als passatgers amb èxit, poden aconseguir punts.
Però per tractar de deixar els passatgers on no hi ha cap casa propera,
així, poden ser penalitzat per això.
Així que potser vostè vol fer un seguiment de els punts en una variable global.
>> Pot implementar potser un comptador de temps, on l'usuari té una certa quantitat de
temps per recollir i deixar de cert nombre de passatgers.
Potser fins i tot integrar aquest amb el sistema de punts.
O pot editar Gràfic de tal manera que els passatgers estan ordenats per casa.
Així que probablement seria una espècie funcionar a shuttle.seats.
>> Pot fer la funció de vol, on si l'usuari introdueix la Konami
codi, llavors el transbordador desenganxa la sòl i la llançadora poden volar.
No obstant això, per a una caiguda segura fora, millor per fer el transbordador aterrar seves rodes al
terra primer.
També pot aplicar la teleportació, on es fa una llista desplegable de sota
edificis en index.html.
I la selecció d'un d'ells, el usuari serà transportat a
aquest edifici al campus.
Acceptar, però, per viatjar a través de les parets d'alguns
edificis en el seu camí.
>> També pot canviar la velocitat de la llançadora, el que permet a l'usuari augmentar
o disminuir la velocitat.
Potser vostè vol una variable global a realitzar un seguiment de la quantitat de combustible
transbordador té, disminuint que a mesura que avança.
Quan arribi a zero, però, el servei de transport no serà capaç de moure llevat que hi hagi
repostat, potser usant un botó o fins i tot fer la seva pròpia estació de servei.
>> Però això no és certament una llista exhaustiva.
Fes una ullada a les especificacions per al ple llista, o potser proposar
tu a tu TF.
El cel és el límit.
Aquesta és la teva última CS50 p-set, així que es diverteix amb ell.
Aquest va ser CS50 Shuttle.
>> He de dir que ha estat un plaer fer això per a vostè amb el
equip de producció.
I espero que vostè té gaudir-ne, també.
El meu nom és Zamyla.
I això va ser CS50.