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.