ZAMYLA CHAN: Nou, hier zijn we, de laatste-p in CS50. Feliciteer jezelf van het hebben zo ver gekomen sinds de eerste Hallo Werelden en afdrukken Up Piramides voor Mario. U heeft een website vorige week. En we gaan het maken van een ander deze week, een die u toelaat om rijden rond de campus van Harvard, het plukken up CS50 medewerkers en brengen ze terug naar hun woonhuizen. 

Nu, vorige week hebben we gewerkt in PHP, een server-side taal. Voor deze p-set, wij worden geïntroduceerd JavaScript, dat is een client-side taal. Dus laten we eens een kijkje bij enkele van de verdeelsleutel die wordt verstrekt aan u voor deze p-set. In de map JavaScript, zal er zijn een stelletje van JavaScript-bestanden. 

Er is buildings.js, die een bevat reeks van gebouwen rond Harvard campus met hun informatie en positie. Houses.js is een array van Harvard woonhuizen met hun lengte-en breedtegraden. Passengers.js bevat een array van passagiers, de CS50 medewerkers dat je in het terugbrengen naar hun woonhuizen. 

Math3D.js, dat veel bevat functies met de beweging. Als je wiskundig minded, dan Ik heet u welkom om een ​​kijkje te nemen. Maar je hoeft niet te begrijpen alles daar. Shuttle.js, dat zich bezighoudt met beweging van de Shuttle. En index.html is de startpagina waar alles gebeurt, echt, waar de gebruiker is de interactie met de site. 

Service.css is de CSS-stylesheet, die naast de Twitter Bootstrap Bibliotheek, controles hoe index.html looks. En dan hebben we ook service.js, die bevat service functies voor de Shuttle. En hier is waar je naartoe gaat worden invullen van een aantal van de to-do's. 

Laten we nu eens kijken naar voorwerpen en associatieve arrays in JavaScript, die, voor alle doeleinden, uitwisselbaar. Als ik wilde een object maken een variabele riep een toverstaf, ik zou verklaren. En binnen die accolades, zou ik specificeren, de kern is eenhoorn, het hout is kers, en de lengte is 13. 

Nu kan ik ook toegang tot waarden voorwerpen met associatieve array notatie. Dus toverstok index kern, kan ik dat gelijk is aan eenhoorn, of Controleer dat als ik nodig heb. Of ik kan de puntoperator wand.wood gelijk kersen, en zo verder en zo voort. Zo zie je dat associatieve arrays en objecten in JavaScript gaat worden verwisselbaar, en zal pas komen. 

Dan zien we een reeks van gebouwen in buildings.js, weer een array van objecten. Als ik wilde een array van de beste make- gebouwen op campus van Harvard, dan Ik zou het als volgt. Met behulp van dit object notatie, waar Ik bewaar de wortel, naam, adres, breedtegraad, lengtegraad en voor elke enkel gebouw object. 

Laten we snel praten over variabelen in JavaScript. Zoals PHP, JavaScript variabelen zijn zwak of losjes getypt. Om een ​​lokale variabele maken, prefix u de variabele naam met V-A-R, var. Nu, in JavaScript, functies de reikwijdte van variabelen. Dus als je een lokale variabele binnen een functie dan andere functies kan geen toegang. 

Maar in tegenstelling tot C, loops en voorwaarden niet de reikwijdte van de variabele. Dus zelfs als je het verklaren binnenkant van een toestand, de hele functie er toegang toe hebben. Nu, zonder var, de variabele wereldwijd zullen zijn. Dus als je gewoon verklaren de naam en een waarde toekennen, dan is dat variabele een globale variabele in JavaScript. 

Nu, in huizen, hebben we een associatieve reeks van host type objecten, waar elk huis is slechts een breedte en een lengtegraad. Dan hebben we de passagiers matrix, die een array van het type object passagier. Dus elke passagier een gebruiker naam, een naam, en een huis. 

Merk op dat ik zeg van het type passagier, wat eigenlijk gewoon betekent dat elk object heeft de dezelfde toets waarde paren. Dus elk object van het type passagier een gebruikersnaam, een naam, en een huis. Dus wat hebben we nodig om doen voor de p-set? Nou, we moeten gebruikers in staat op te halen up medewerkers, om al weer te geven de medewerkers die momenteel in onze shuttle, en om ze af te zetten. En dan gaan we ook praten over extra functies die kunnen worden uitgevoerd voor de Shuttle p-set. 

Maar laten we praten over pickup eerste. De gezichten van CS50 personeel zijn geweest geplant over de campus, waarbij elke gezicht is geïmplementeerd als een plek merk de 3D aarde, en als marker op de 2D-kaart. Dus wanneer de gebruiker de Pickup klikt knop, willen we naar het nabijgelegen voegen passagiers naar de shuttle. En we willen ook hun plaats te verwijderen markeren van de wereld en te verwijderen van hun marker van de kaart, wat aangeeft dat ze in onze shuttle nu. 

Dus hoe kunnen we detecteren als passagiers zich binnen het bereik van onze shuttle? Nou, de functie afstand, zodat shuttle.distance, passeren in de lengte-en breedtegraad, berekent de afstand tussen de huidige positie van de shuttle naar het punt dat u opgeeft met dat gegeven lengte-en breedtegraad. Dus je kunt dit gebruiken om het berekenen van de afstand van de shuttle naar de passagiers. 

Maar hoe weet je waar de passagiers zijn? Nou, dat is waar we zullen moeten bewerk het bevolken functie. Bevolken plaatst al de medewerkers in passagiers in de wereld en in de kaart, maar niet slaan hun locatie. Dus misschien kun je slaan hun Plaats merken en markers in sommige globale array. 

Nu, er al een globale array het opslaan van informatie van de passagiers. De passagiers-array slaat elk persoonsgegevens van passagiers en hun huis. Dus misschien kan je een paar parameters toevoegen daar de passagier objecten. 

Om ons te helpen alle passagiers op te sporen binnen het bereik van onze shuttle, loop laten we door alle van de passagiers in de passagiers-array. Een lus in JavaScript kan uitzien zoiets als dit, zeer vergelijkbaar met die voor de loops in C. Of kunnen we een gebruiken alternatief voor lus structuur, voor var i in array, waar ik nog steeds de index, maar je hoeft niet te geef de Array.length conditie en i + +. 

Locatie elke passagier is gegeven door hun plaats mark. Maar de plaats merk is niet de breedtegraad en de lengtegraad. We hebben om de parameters verkrijgen van de geometrie, waarbij get geometrie op de plaats merk, en vervolgens zodra we de geometrie, het krijgen van ofwel de breedte of de lengte met deze functies. 

Dus nu weten we hoe om te detecteren of passagiers zijn binnen bereik van onze shuttle. Zodra wij deze passagiers, zullen we willen geen passagiers die zijn toe te voegen binnen dat bereik. We willen hen in staat stellen om hop op en neem slechts een zetel in onze shuttle, maar als we genoeg ruimte voor hen. 

De shuttle.seats array zal aangeven of stoelen zijn leeg, of wie er in die plaats. Dus als een zitje leeg is, dan die zitting zal nul zijn. Dus itereren over de stoelen array, controleren op lege stoelen, opslaan passagiers in die zetels tot u heb geen meer lege stoelen. En helaas, andere passagiers zal moeten wachten tot de volgende keer dat de shuttle naar beneden komt. 

Zodra ze op de shuttle te krijgen, we willen naar hun plaats markering te verwijderen, die is hun foto in de 3D-wereld. Als ik wilde een plek mark p verwijderen, dan zou ik alle functies te krijgen uit mijn aarde, uit de Google Earth, en verwijder dan die specifieke plaats markeren met de removeChild functie. Dan tot slot, laten we het verwijderen van de marker, het pictogram op de 2D-kaart, voor elke passagier die we oppakken. 

Om een ​​markering m te verwijderen, dan zal ik gewoon uitvoeren m.setMap null. Doe dit voor alle passagiers binnen het bereik, en u klaar bent pickup. De grafiek functie moeten alle tonen van de passagiers die in uw shuttle, en lege stoel als leeg. Dus grafiek moet itereren over shuttle.seats, het weergeven van de passagiersgegevens voor elke index, en lege stoel als die index is nul. 

Nu als HTML tekst binnenkant van een wordt gezet JavaScript variabele daarna met document.getElementById, grafiek kan bewerken van de innerlijke HTML van dat gegeven element door toekenning HTML tekst naar de document.getElementById innerlijke HTML variabele. Wanneer de gebruikers op de Drop Off-knop in index.html, noem het de dropoff functie. En het is onze taak om de uitvoering van dat. 

In dropoff, we willen geen verwijderen passagiers uit de shuttle alleen als we zijn in het bereik van hun bestemming, hun woonhuis. Dus dropoff zal moeten nagaan of de shuttle binnen het bereik van een van de huizen, en verwijder alle benodigde passagiers van de shuttle. Dus hoe kunnen we kijken of we binnen het bereik van de woningen? Nou, nog maar eens, zullen we gebruik maken van de shuttle.distance functie, passeren in de lengte-en breedtegraad van het punt dat we de controle tegen. 

Maar wat zijn die punten? Nou, de huizen array, als je nog in houses.js, slaat de lengte-en breedtegraad van elk huis in een associatieve array, waar elke index is de naam van dat huis. Dan om passagiers te verwijderen - goed, alleen als we in het bereik van hun huis dat ze willen gaan. Dus nogmaals, bedenk dan dat de passagiers slaat het huis dat elke passagier wil naar. Als ze binnen het bereik van hun huis, dan gaan we verwijderen dat passagier van shuttle.seats en set hun positie in de array op null. 

Nu laten we praten over een aantal extra functies dat kan worden uitgevoerd de CS50 Shuttle p-set. Er is een punt systeem waarbij je bijhouden hoeveel punten een gebruiker heeft. Voor het afzetten van passagiers met succes, kunnen ze punten te krijgen. Maar voor het proberen om passagiers afzetten waar er geen huis in de buurt, goed, ze kunnen krijgen gestraft voor. Dus misschien dat u wilt bijhouden de punten in een globale variabele. 

U kunt misschien een timer, implementeren waar de gebruiker een bepaalde hoeveelheid heeft tijd op te halen en af ​​te zetten een aantal passagiers. Misschien is dit zelfs integreren met het puntensysteem. Of u kunt bewerken Grafiek zodanig dat passagiers worden naargelang hun huis. Dus dat zou een soort waarschijnlijk functie om shuttle.seats. 

U kunt een vliegende functie te implementeren, waar als de gebruiker de Konami ingangen code, dan is de shuttle lanceert de grond en de shuttle kan vliegen. Maar voor een veilige drop-off, het beste te maken de shuttle landt zijn wielen op de eerst aarden. U kunt ook implementeren teleportatie, waar je een drop down lijst te maken van gebouwen in index.html. En selecteren van een van deze, de gebruiker te vervoeren dat gebouw op de campus. OK, hoewel, om door te reizen de wanden rondom gebouwen op je weg daar. 

U kunt ook de snelheid van de verandering shuttle, waardoor de gebruiker te verhogen of verlaag de snelheid. Misschien wilt u een globale variabele te bijhouden hoeveel brandstof de shuttle heeft, afnemende als je verder gaat. Zodra je nul geraakt, hoewel, de shuttle zal niet in staat om te bewegen, tenzij je hebt getankt, misschien met behulp van een knop, of zelfs uw eigen tankstation. 

Maar dat is zeker niet een uitputtende lijst. Check out de spec voor de volledige lijst, of misschien voorstellen uw eigen om uw TF. De sky is the limit. Dit is je laatste CS50 p-set, dus veel plezier ermee. Dit was CS50 Shuttle. 

Ik moet zeggen, het is een genot het maken van deze voor u met de productie-team. En ik hoop dat je hebt geniet ervan, als goed. Mijn naam is Zamyla. En dit was CS50.