ZAMYLA CHAN: Nå, her er vi, den sidste p-sat i CS50. Lykønsker jer fra at have kommet så langt, siden din første Hello Worlds og udskrifter op Pyramiderne til Mario. Du har lavet en hjemmeside i sidste uge. Og vi kommer til at gøre en anden i denne uge, en, der giver dig mulighed for at køre rundt i Harvard campus, plukke op CS50 ansatte og bringe dem tilbage til deres beboelseshuse. 

Nu i sidste uge arbejdede vi i PHP, en server side sprog. Til dette p-sæt, vi får introduceret til JavaScript, som er en klientsiden sprog. Så lad os tage et kig på nogle af de fordeling kode, der er leveret til dig til dette p-sæt. I mappen JavaScript, vil der være en flok JavaScript-filer. 

Der er buildings.js, som indeholder en vifte af bygninger omkring Harvard campus med deres oplysninger og position. Houses.js er en vifte af Harvard beboelseshuse med deres længde-og breddegrader. Passengers.js indeholder en række passagerer, de CS50 ansatte at du vil være at bringe tilbage til deres bolig huse. 

Math3D.js, der indeholder en masse af funktioner at gøre med bevægelsen. Hvis du er matematisk minded, så Jeg byder dig velkommen til at tage et kig. Men du behøver ikke at forstå alt derinde. Shuttle.js, der beskæftiger sig med Shuttle bevægelse. Og index.html er den hjemmeside, hvor alting sker, virkelig, hvor brugeren interagerer med webstedet. 

Service.css er CSS style sheet, der udover Twitter Bootstrap Library, kontrol hvordan index.html udseende. Og så har vi også service.js, som indeholder servicefunktioner for Shuttle. Og her er, hvor du kommer til at være udfylde nogle af de til-huskeliste. 

Lad os nu tage et kig på objekter og associative arrays i JavaScript, hvor der for alle henseender, er indbyrdes udskiftelige. Hvis jeg ønskede at lave et objekt en variabel kaldes en tryllestav, ville jeg erklære den. Og inden for disse krøllede parenteser, ville jeg specificere, kernen er enhjørning, træ er kirsebær, og længden er 13. 

Nu kan jeg også få adgang til værdier af objekter ved hjælp associative array notation. Så wand indeks kerne, kan jeg indstille der svarer til enhjørning, eller kontrollere, at hvis jeg har brug for. Eller jeg kan bruge dot operatør wand.wood lig kirsebær, og så videre og så videre. Så du kan se, at associative arrays og objekter i JavaScript vil være udskiftelige, og vilje komme i ganske handy. 

Så ser vi en vifte af bygninger i buildings.js, igen, et array af objekter. Hvis jeg ønskede at gøre en række af de bedste bygninger på Harvard campus, derefter Jeg ville gøre det som følger. Ved hjælp af dette objekt notation, hvor Jeg gemmer roden, navn, adresse, breddegrad og længdegrad for hver enkelt bygning objekt. 

Lad os hurtigt tale om variable i JavaScript. Som PHP, JavaScript variabler er svagt eller løst skrevet. Hvis du vil oprette en lokal variabel, du præfiks variabelnavnet med V-A-R, var. Nu, i JavaScript, funktioner begrænse omfanget af variabler. Så hvis du har en lokal variabel i en funktion, så andre funktioner kan ikke få adgang til den. 

Men i modsætning til C, loops og betingelser ikke begrænse omfanget af en variabel. Så selv hvis du erklære den inde i en tilstand, hele funktionen vil har adgang til det. Nu, uden var, den variable vil være global. Så hvis du bare erklære navn og tildele en værdi, så er variabel vil være en global variabel i JavaScript. 

Nu, i huse, vi har en associativ vifte af værten tekstobjekter, hvor hvert hus er blot en breddegrad og en længde. Så har vi passagererne array, som er en matrix af objekttypen passager. Så hver passager har en bruger navn, et navn og et hus. 

Bemærk, at jeg siger af type passager, som virkelig bare betyder at hvert objekt har samme nøgle værdi par. Så hver objekt af typen passageren har et brugernavn, et navn og et hus. Så hvad skal vi gøre for p-sæt? Nå, vi er nødt til at tillade brugere at plukke up ansatte at vise alle de ansatte, der i øjeblikket vores bus til at slippe dem ud. Og så vil vi også tale om ekstra funktioner, der kan gennemføres for Shuttle p-sæt. 

Men lad os tale om afhentning først. Ansigter CS50 personale har været plantet over hele campus, hvor hver ansigt er implementeret som et sted mærke på 3D Jorden, og som en markør på 2D-kort. Så når brugeren klikker på Pickup knap, vi ønsker at tilføje nærheden passagerer til rumfærgen. Og vi ønsker også at fjerne deres plads markere fra verden og fjerne deres markør på kortet, som angiver, at de er i vores shuttle nu. 

Så hvordan kan vi opdage, hvis passagerer er inden for rækkevidde af vores shuttle? Nå, den funktion afstand, så shuttle.distance, passerer i bredde og længde, vil beregne afstanden fra den aktuelle position af rumfærgen til det punkt, du angiver med, at i betragtning bredde og længde. Så du kan bruge dette til at beregne afstand fra rumfærgen til passagerer. 

Men hvordan kan du vide, hvor passagererne er? Nå, det er, hvor vi bliver nødt til at redigere populate funktionen. Befolke steder alle de ansatte i antallet af passagerer i verdens og ind på kortet, men ikke gemme deres placering. Så måske du kan gemme deres anbringe mærker og markører i nogle globale array. 

Nu er der allerede en global matrix lagring af oplysninger fra passagererne. Passagererne array-butikker hver passagerens navn og deres hus. Så måske du kan tilføje nogle få parametre der til de passager objekter. 

For at hjælpe os med at opdage alle de passagerer inden for rækkevidde af vores shuttle, lad os sløjfe gennem alle passagerer i passagerer matrix. En for-løkke i JavaScript kan se noget som dette, meget lig dem, for sløjfer i C. Eller vi kan bruge en alternativ til loop struktur, var jeg i array, hvor jeg vil stadig være indekset, men du behøver ikke at specificere array.length tilstand og i + +. 

Hver passager placering er afgivet deres plads mærke. Men stedet mærke er ikke det breddegrad og længdegrad. Vi er nødt til at få adgang til disse parametre ved få geometri, ved hjælp af get geometri på stedet mærket, og derefter når vi har den geometri, at få enten breddegrad eller længdegrad bruge disse funktioner. 

Så nu ved vi, hvordan man kan afsløre, om passagerer er inden Rækken af ​​vores shuttle. Når vi har disse passagerer, vi får ønsker at tilføje passagerer, der er inden for dette område. Vi ønsker at give dem mulighed for at hoppe på og tage en plads på vores shuttle, men kun hvis vi har plads nok til dem. 

Den shuttle.seats array vil indikere hvorvidt sæder er tomme, eller der er i det sæde. Så hvis et sæde er tomt, så at sædet vil være nul. Så gentage over sæderne array, kontrol for tomme sæder, lagring passagerer ind disse sæder, indtil du ikke har nogen flere tomme sæder. Og desværre alle andre passagerer bliver nødt til at vente på Næste gang shuttle kommer ned. 

Når de får på rumfærgen, vi ønsker at fjerne deres sted mærke, som er deres foto i 3D-verden. Hvis jeg ønskede at fjerne et sted mark p, så ville jeg få alle de funktioner, fra min Jord, fra Google Earth og derefter fjerne det specifikke sted markere bruge removeChild funktionen. Så endelig, lad os fjerne markeringen ikonet på 2D-kort, for enhver passager, som vi er picking up. 

For at fjerne en markør m, så vil jeg bare udføre m.setMap null. Gør dette for passagerer inden for rækkevidde, og du er færdig med pickup. Diagrammet funktionen skal vise alle af passagererne, der er i dit shuttle, og tomt sæde hvis tom. Så diagram bør gentage over shuttle.seats, viser information for hvert indeks passager og tom plads, hvis dette indeks er nul. 

Nu, hvis HTML-teksten er sat inde i en JavaScript-variabel, derefter ved hjælp af document.getElementById, diagram kan redigere indre HTML på, at i betragtning element ved at tildele HTML-teksten til den document.getElementById indre HTML variabel. Når brugerne klikker på knappen afleveringsstedet i index.html, vil det kalde dropoff funktion. Og det er vores opgave at gennemføre denne. 

I dropoff, vi ønsker at fjerne enhver passagerer fra shuttle hvis vi er inden for rækkevidde af deres bestemmelsessted, deres bolig hus. Så dropoff bliver nødt til at kontrollere, om rumfærgen er inden for rækkevidde af nogen af huse, og fjerne eventuelle nødvendige passagerer fra rumfærgen. Så hvordan kan vi kontrollere, hvis vi er inden for rækkevidde af nogen huse? Nå, endnu en gang, vil vi gøre brug af shuttle.distance funktion, passerer bredde og længde af punktet at vi tjekker imod. 

Men hvad er disse punkter? Nå, huse array, hvis du kan huske i houses.js, gemmer bredde og længde af hvert hus i en associativ array, hvor hver indeks er navnet på det hus. Så for at fjerne passagerer - godt, kun hvis vi er inden for rækkevidde af deres hus, som de ønsker at gå til. Så igen, husk at passagerer gemmer huset, som hver passager ønsker at gå til. Hvis de er inden for rækkevidde af deres hus, så vil vi fjerne det passager fra shuttle.seats og sæt deres position i array til null. 

Lad os nu tale om nogle ekstra funktioner der kan gennemføres i det CS50 Shuttle p-sæt. Der er et punkt system, hvorved du holde styr på, hvor mange peger en bruger. For at slippe væk fra passagerer succes, kan de få point. Men for at forsøge at aflevere passagerer hvor der ikke er nogen hus i nærheden, godt, kan de blive straffet for det. Så måske du ønsker at holde styr på punkterne i en global variabel. 

Du kan implementere måske en timer, hvor brugeren har en vis mængde af tid til at samle op og slippe væk fra en vist antal passagerer. Måske endda integrere denne med pointsystem. Eller du kan redigere Chart sådan, at passagerer er ordnet efter hus. Så det ville nok være en slags fungere til shuttle.seats. 

Du kan implementere en flyvende funktion, hvor, hvis brugeren indtaster Konami kode, så rumfærgen løfter fra jorden og rumfærgen kan flyve. Men for en sikker drop off, bedst at gøre rumfærgen lande sine hjul på den jorden først. Du kan også gennemføre teleportation, hvor du laver en drop down liste bygninger i index.html. Og vælge en af ​​dem, den Brugeren vil blive transporteret til at bygning på campus. OK, selv om, at rejse gennem væggene i nogle bygninger på din vej. 

Man kan også ændre hastigheden af shuttle, så brugeren til at øge eller sænke hastigheden. Måske du ønsker en global variabel til holde styr på, hvor meget brændstof shuttle har faldende det som du går sammen. Når du rammer nul, selv om, rumfærgen vil ikke være i stand til at flytte, medmindre du har tanket, måske ved hjælp af en knap, eller selv lave din egen tankstation. 

Men det er bestemt ikke en udtømmende liste. Tjek spec for den fulde liste, eller måske foreslå dine egne til din TF. Himlen er grænsen. Dette er din sidste CS50 p-sæt, så have det sjovt med det. Dette var CS50 Shuttle. 

I got at sige, det har været en fornøjelse hvilket gør disse til dig med produktion team. Og jeg håber, at du har nyde dem, så godt. Mit navn er Zamyla. Og dette var CS50.