>> ZAMYLA CHAN: Tja, här är vi, den sista p-set i CS50.
Gratulera er från att ha kommit så långt sedan din första Hej
Världar och utskrift Upp Pyramider för Mario.
Du gjorde en hemsida förra veckan.
Och vi kommer att göra en annan den här veckan, en som gör att du kan
köra runt Harvard campus, plocka upp CS50 personal och
föra dem tillbaka till deras bostadshus.
>> Nu, i förra veckan vi jobbade i PHP, en server side språk.
För denna p-set, vi blir introducerade till JavaScript, vilket är en
side språk klient.
Så låt oss ta en titt på några av de kodfördelning som är försedd med
för denna p-set.
I JavaScript-mappen, kommer det vara ett gäng JavaScript-filer.
>> Det finns buildings.js, som innehåller en samling av byggnader runt Harvard
campus med sin information och placering.
Houses.js är en samling av Harvard bostadshus med sina
latituder och longituder.
Passengers.js innehåller en array med passagerare, de CS50 personal
att du kommer att föra tillbaka till deras bostäder.
>> Math3D.js, som innehåller en hel del funktioner för att göra med rörelsen.
Om du är matematiskt sinnade, sedan Jag välkomnar dig att ta en titt.
Men du måste förstå allt där.
Shuttle.js, handlar det med färjans rörelsen.
Och index.html är hemsidan där allting händer, egentligen, när det
Användaren interagerar med platsen.
>> Service.css är CSS-formatmallen, vilket utöver den post
Bootstrap Library, kontroller hur index.html ser ut.
Och då har vi också service.js, vilket innehåller servicefunktioner för
rymdfärjan.
Och här är där du kommer att bli fylla i en del av den att göra-.
>> Nu ska vi ta en titt på föremål och associativa arrayer i JavaScript,
, som för alla syften och ändamål, är utbytbara.
Om jag ville göra ett objekt en variabel kallas ett trollspö, skulle jag
förklara den.
Och inom dessa klamrar, skulle jag specificera, är kärnan enhörning, trä
är körsbär, och längden är 13.
>> Nu, jag kan också komma åt värden av objekt med
associativ array notation.
Så trollspö index kärna, kan jag ställa som lika med enhörning, eller
kontrollera att om jag behöver.
Eller jag kan använda punktoperatorn wand.wood lika körsbär, och
så vidare och så vidare.
Så du ser att associativa arrayer och objekt i JavaScript kommer att bli
utbytbara och viljan komma ganska praktiskt.
>> Sedan ser vi en rad byggnader i buildings.js,
igen, en uppsättning av objekt.
Om jag ville göra en samling av de bästa byggnader på Harvard campus, sedan
Jag skulle göra det på följande sätt.
Med användning av detta föremål format där Jag lagrar roten, namn, adress,
latitud och longitud för varje enda byggnad objektet.
>> Låt oss snabbt tala om variabler i JavaScript.
Liksom PHP, JavaScript-variabler är svagt eller löst skrivit.
För att skapa en lokal variabel, prefix du variabelnamnet med V-A-R, var.
Nu, i JavaScript, funktioner kommer begränsa omfattningen av variabler.
Så om du har en lokal variabel inom en funktion, då andra funktioner
kan inte komma åt den.
>> Men till skillnad från C, loopar och villkor inte begränsa omfattningen av en variabel.
Så även om du förklara den inne i en tillstånd, hela funktionen kommer
ha tillgång till den.
Nu, utan var, variabeln kommer att vara global.
Så om du bara deklarera namn och tilldela ett värde, då den variabeln
kommer att vara en global variabel i JavaScript.
>> Nu, i hus, har vi en associativ samling av värdtextobjekt, där
varje hus är bara en latitud och en longitud.
Sedan har vi passagerarna matris, som är en array
av objekttypen passageraren.
Så varje passagerare har en användare namn, ett namn, och ett hus.
>> Lägg märke till att jag säger om typ passagerare, vilket egentligen bara innebär
att varje objekt har den Samma nyckel värdepar.
Så varje objekt av typen passagerare har ett användarnamn, ett namn, och ett hus.
Så vad gör vi behöver göra för p-set?
Tja, måste vi tillåta användare att plocka upp personal, för att visa alla
den personal som för närvarande vår buss, och att släppa dem.
Och sedan kommer vi också tala om extra funktioner som kan genomföras för
Shuttle p-set.
>> Men låt oss tala om pickup först.
Ansiktena på CS50 personal har varit planterade över hela campus, där varje
ansikte genomförs som en plats märke på 3D jorden, och som en
markör på 2D-kartan.
Så när användaren klickar på Pickup knapp, vi vill lägga till i närheten
passagerare till skytteln.
Och vi vill också ta bort sin plats markera från världen och ta bort deras
markör från kartan, vilket tyder på att de är i vår buss nu.
>> Så hur ska vi upptäcka om passagerare är inom räckhåll för vår buss?
Tja, funktionsavstånd, så shuttle.distance, som går i
latitud och longitud, beräknar avståndet från den aktuella positionen
av skytteln till den grad att du anger med den som ges
latitud och longitud.
Så du kan använda detta för att beräkna avstånd från buss till
passagerare.
>> Men hur vet du var passagerarna är?
Tja, det är där vi måste redigera populate funktion.
Platser Fylla alla anställda på passagerare i världs
och in i kartan, men inte förvara sin plats.
Så kanske kan du lagra sina placera märken och markörer
i någon global array.
>> Nu, redan finns det en global array lagra information från passagerarna.
Passagerarna array lagrar vardera passagerarens namn och deras hus.
Så kanske du kan lägga till några parametrar det till passagerarobjekt.
>> För att hjälpa oss att upptäcka alla de passagerare inom räckhåll för vår
transfer, låt oss slinga genom alla de passagerare i passagerar arrayen.
En for-loop i JavaScript kan se ungefär så här, mycket lik
de för loopar i C. Eller vi kan använda en alternativ för slingstruktur, för
var jag i rad, där jag kommer fortfarande att vara index, men du behöver inte
specificera Array.length skick och jag + +.
>> Varje passagerare läge är som ges av deras plats märket.
Men den plats märket inte är det latitud och longitud.
Vi måste komma åt dessa parametrar genom få geometrin, med hjälp av get
geometri på den plats märket, och sedan när vi har geometri, att få
antingen latitud och longitud att använda dessa funktioner.
>> Så nu vet vi hur man upptäcker om passagerare inom
spektrum av vår buss.
När vi har dessa passagerare, vi ska vill lägga till några passagerare som
inom detta intervall.
Vi vill låta dem hoppa på och ta en plats på vår buss, men bara
om vi har tillräckligt med utrymme för dem.
>> Den shuttle.seats arrayen anger om platserna är tomma, eller
som finns på den platsen.
Så om en plats är tom, då att stolen kommer att vara noll.
Så iterera över sätena arrayen, kontroll för tomma platser, lagring
passagerare i dessa säten tills du har inte några fler tomma platser.
Och tyvärr, alla andra passagerare kommer att behöva vänta på att
Nästa gång bollen kommer ner.
>> När de får på buss, vi vill ha att ta bort sin plats märke, som
är deras foto i 3D-världen.
Om jag ville ta bort en plats mark p, då skulle jag få alla funktioner
från min jord, från Google Earth, och sedan ta bort den specifika platsen
Markera med hjälp av removeChild funktionen.
Sedan slutligen, låt oss ta bort markeringen, ikonen på 2D-kartan, för alla
passagerare som vi plockar upp.
>> För att ta bort en markör m, sedan ska jag bara köra m.setMap null.
Gör detta för alla passagerare inom räckhåll, och du är klar upphämtning.
Diagrammet Funktionen ska visa alla av passagerarna som finns i din
transfer, och tom plats om de är tomma.
Så diagram bör iterera över shuttle.seats, visar
passagerarinformation för varje index, och tom plats om detta index är null.
>> Nu om HTML-text sätts insidan av en JavaScript-variabel, sedan med hjälp av
document.getElementById, diagram kan redigera inre HTML för att med tanke
elementet genom att tilldela HTML-koden för den
document.getElementById inre HTML variabel.
När användarna klickar på knappen Drop Off i index.html, det ska ringa
dropoff funktion.
Och det är vår uppgift att genomföra det.
>> I avlämning, vi vill ta bort alla passagerare från skytteln endast om
vi är i intervallet sin destination, deras bostadshus.
Så avlämning kommer att behöva kontrollera om bollen är inom räckhåll för någon av de
hus, och ta bort allt som behövs passagerare från skytteln.
Så hur ska vi kolla om vi är inom räckhåll för alla hus?
Tja, ännu en gång, ska vi utnyttja den shuttle.distance funktion, som går i
latitud och longitud för punkt att vi kollar emot.
>> Men vad är dessa punkter?
Tja, det hus arrayen, om du kommer ihåg i houses.js lagrar
latitud och longitud för varje hus i en associativ array, där varje
index är namnet på det huset.
Sen att avlägsna passagerare -
bra, bara om vi är i intervallet sin hus som de vill gå till.
Så återigen, kom ihåg att passagerarna lagrar huset att varje passagerare
vill gå till.
Om de är inom räckhåll för deras hus, då vi kommer att ta bort det
passagerare från shuttle.seats och set deras position i arrayen på null.
>> Nu ska vi tala om några extra funktioner som kan genomföras i
den CS50 Shuttle p-set.
Det finns ett poängsystem som innebär att du hålla reda på hur många
pekar en användare har.
För släppa av passagerare framgångsrikt, kan de få poäng.
Men för att försöka släppa av passagerare där det inte finns några hus i närheten,
väl, kan de få straffas för det.
Så kanske du vill hålla reda på punkterna i en global variabel.
>> Du kan implementera kanske en timer, där användaren har en viss mängd
tid för att plocka upp och släppa av en visst antal passagerare.
Kanske till och med integrera denna med poängsystem.
Eller så kan du redigera diagram så att passagerare är sorterade efter hus.
Så det skulle förmodligen vara ett slags fungera till shuttle.seats.
>> Du kan genomföra en flygande funktion, där om användaren inmatar Konami
koden och sedan skytteln lyfter från mark och skytteln kan flyga.
Men för en säker avhopp, bäst att göra skytteln landar hjulen på
slipas först.
Du kan också implementera teleportation, där du gör en rullgardinsmeny med
byggnader i index.html.
Och att välja en av dem, den Användaren kommer att transporteras till
att bygga på campus.
OK, fast, att färdas genom väggarna i några
byggnader på vägen dit.
>> Du kan också ändra hastigheten på skicka, så att användaren kan öka
eller minska hastigheten.
Kanske du vill ha en global variabel för hålla reda på hur mycket bränsle
Shuttle har, minskar det när du går längs.
När du träffar noll, men, skytteln kommer inte att kunna gå om du inte har
tankas, kanske med hjälp av en knapp, eller även göra din egen bensinstation.
>> Men det är verkligen inte en uttömmande lista.
Kolla på spec för hela lista, eller kanske föreslå
egen hand till TF.
Himlen är gränsen.
Det här är din sista CS50 p-set, så ha kul med det.
Detta var CS50 Shuttle.
>> Jag måste säga, det har varit ett nöje gör dessa för dig med
produktionsteam.
Och jag hoppas att du har njuta av dem, liksom.
Mitt namn är Zamyla.
Och detta var CS50.