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