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.