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