>> [Muziek]
>> LUIDSPREKER 1: Nou, hier zijn we, de laatste P set in CS50.
Feliciteer jezelf van het hebben zo ver gekomen sinds de eerste hello
werelden en printen 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 reeks 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 ben ik blij met u een kijkje 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 vullen wat van de dos.
>> 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 geef 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
controleren dat, als ik nodig heb.
Of ik kan de operator punt te gebruiken.
Wand dot hout is gelijk aan kersen, enzovoort, enzovoort.
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.
Nogmaals, 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 naam van de variabele met de 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 scala aan huis van het 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 gebruikersnaam, een naam, en een huis.
Merk op dat ik ben het zien van het type passagier, wat eigenlijk gewoon betekent
dat elk object heeft de dezelfde toets waarde paar.
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 op de 3D aarde, en als een
marker op de 2D-kaart.
Dus wanneer de gebruiker de pick-up 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 -
dus shuttle dot afstand, passeren in de lengte-en breedtegraad, zal
bereken de afstand van de huidige positie van de shuttle naar de
punt dat u hebt opgegeven 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 en de 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 al is er 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, laten we
lus door alle passagiers de passagiers array.
Een lus in JavaScript kan uitzien zoiets als dit, zeer vergelijkbaar met
die voor de lus in C. Of kunnen we een gebruiken alternatief voor lus structuur.
>> Voor var i in array, waar ik nog steeds de index zijn.
Maar je hoeft niet te specificeren de array dot lengte
conditie, en ik plus plus.
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 dan een keer hebben we de geometrie, krijgen ofwel de breedtegraad of de
lengte, met die 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 op te springen, en plaatsnemen op onze shuttle, maar alleen
als we genoeg ruimte voor hen.
>> De shuttle dot zetels array 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 komt rond.
>> 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, van 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 dot setMap null.
Doe dit voor alle passagiers binnen het bereik, en u klaar bent pickup.