>> ZAMYLA CHAN: Vel, her er vi, den siste p-satt i CS50.
Gratuler dere fra å ha kommet så langt siden den første Hallo
Verdener og utskrift Opptil Pyramidene for Mario.
Du har gjort en nettside i forrige uke.
Og vi kommer til å være å gjøre en annen denne uken, en som lar deg
kjøre rundt i Harvard campus, plukking opp CS50 ansatte og
å bringe dem tilbake til deres bolighus.
>> Nå, i forrige uke jobbet vi i PHP, en server side språk.
For denne p-sett, vi blir introdusert til Javascript, noe som er en
klientsiden språk.
Så la oss ta en titt på noen av de distribusjon kode som er gitt til
du for denne p-settet.
I Javascript-mappen, det vil være en haug av Javascript-filer.
>> Det er buildings.js, som inneholder en rekke bygninger rundt Harvard
campus med sin informasjon og posisjon.
Houses.js er en rekke Harvard bolighus med deres
breddegrader og lengdegrader.
Passengers.js inneholder en rekke passasjerer, de CS50 ansatte
at du skal bringe tilbake til sine boliger.
>> Math3D.js, som inneholder mye funksjoner å gjøre med bevegelsen.
Hvis du er matematisk tenkende, deretter Jeg ønsker deg velkommen til å ta en titt.
Men du trenger ikke å forstå alt der inne.
Shuttle.js, som omhandler romfergens bevegelse.
Og index.html er hjemmesiden der alt som skjer, egentlig, hvor
brukeren er i samspill med området.
>> Service.css er CSS-stilark, som i tillegg til den Twitter
Bootstrap Library, kontroller hvordan index.html utseende.
Og så har vi også service.js, som inneholder servicefunksjoner for
Shuttle.
Og her er hvor du kommer til å være fylling i noen av de to-do-tallet.
>> La oss nå ta en titt på objektene og assosiative arrays i Javascript,
som for alle praktiske formål, er utskiftbare.
Hvis jeg ønsket å lage et objekt en variabel kalt en tryllestav, jeg ville
erklære det.
Og inne i disse klammeparentes, ville jeg spesifisere, er kjernen enhjørning, veden
er kirsebær, og lengden er 13.
>> Nå kan jeg også få tilgang til verdier av objekter ved hjelp
assosiativ matrise notasjon.
Så wand indeksen kjerne, kan jeg stille som lik enhjørning, eller
sjekk at hvis jeg trenger.
Eller jeg kan bruke dot operatør wand.wood tilsvarer kirsebær, og
så videre og så videre.
Så du ser at assosiative matriser og objekter i Java kommer til å være
utskiftbare, og vilje kommer i ganske hendig.
>> Så ser vi en rekke bygninger i buildings.js,
igjen, en rekke gjenstander.
Hvis jeg ønsket å gjøre en rekke av de beste bygninger på Harvard campus, deretter
Jeg ville gjøre det på følgende måte.
Ved hjelp av dette objektet notasjon, der Jeg lagrer roten, navn, adresse,
breddegrad og lengdegrad for hver enkelt bygning objekt.
>> La oss raskt snakke om variabler i Javascript.
Som PHP, Javascript variabler er svakt eller løst skrevet.
For å opprette en lokal variabel, prefiks deg variabelnavnet med V-A-R, var.
Nå, i Javascript, funksjoner vil begrense omfanget av variabler.
Så hvis du har en lokal variabel i en funksjon og andre funksjoner
kan ikke tilgang til den.
>> Men i motsetning til C, løkker og betingelser ikke begrense omfanget av en variabel.
Så selv om du erklærer det inne i en tilstand, vil hele funksjonen
har tilgang til det.
Nå, uten var, variabelen vil være global.
Så hvis du bare erklære navnet og tilordne en verdi, da den variabelen
vil være en global variabel i Javascript.
>> Nå, i hus, har vi en assosiativ rekke verts type gjenstander, hvor
hvert hus er bare en breddegrad og en lengdegrad.
Da har vi passasjerene matrise, som er en matrise
av objekttype passasjer.
Så hver passasjer har en bruker navn, et navn, og et hus.
>> Legg merke til at jeg sier av type passasjer, som egentlig bare betyr
at hvert objekt har samme sentrale verdi-par.
Så hver objekt av typen passasjer har et brukernavn, et navn, og et hus.
Så hva trenger vi å gjøre for p-settet?
Vel, vi trenger å tillate brukere å plukke opp ansatte, for å vise alle
de ansatte som er i vår transport, og å slippe dem av.
Og da vil vi også snakke om ekstra funksjoner som kan implementeres for
Shuttle p-set.
>> Men la oss snakke om pickup først.
Ansiktene til CS50 ansatte har vært plantet over hele campus, hvor hver
ansiktet er implementert som et sted mark på 3D-jord, og som en
markør på 2D-kartet.
Så når brukeren klikker Pickup knappen, vil vi legge til i nærheten
passasjerer til romfergen.
Og vi ønsker også å fjerne sin plass markere fra verden og fjerne deres
markeringen fra kartet, som indikerer at de er i vår shuttle nå.
>> Så hvordan kan vi oppdage om passasjerene er innenfor rekkevidde av vår transport?
Vel, funksjonen avstand, så shuttle.distance, passerer i
breddegrad og lengdegrad, vil beregne avstanden fra nåværende posisjon
av skyss til det punktet at du angir med at gitt
breddegrad og lengdegrad.
Så du kan bruke dette til å beregne avstand fra transport til
passasjerer.
>> Men hvordan vet du hvor passasjerene er?
Vel, det er der vi må redigere befolke funksjon.
Fylle steder alle de ansatte i passasjerer i verden
og inn i kartet, men ikke lagre deres plassering.
Så kanskje du kan oppbevare plassere merker og markører
i noen global array.
>> Nå er det allerede en global matrise lagring av informasjon fra passasjerene.
Passasjerene array-butikker hver passasjerens navn og huset deres.
Så kanskje du kan legge til et par parametere det til personobjekter.
>> For å hjelpe oss med å finne alle passasjerene innenfor rekkevidden av vår
transport, la oss sløyfe gjennom alle passasjerer i passasjerer matrisen.
En for løkke i Javascript, kan se noe sånt som dette, svært lik
de etter looper i C. Eller vi kan bruke en alternativ for loop struktur, for
Var jeg i matrise, hvor jeg vil fortsatt være indeksen, men du trenger ikke å
spesifisere tabell.length tilstand og jeg + +.
>> Hver passasjerens posisjon er gitt av sin plass mark.
Men stedet merket er ikke den breddegrad og lengdegrad.
Vi må få tilgang til disse parametrene ved få geometri, å bruke Get
geometri på stedet mark, og deretter når vi har geometri, får
enten breddegrad eller lengde ved hjelp av disse funksjonene.
>> Så nå vet vi hvordan å oppdage om passasjerer er innenfor
Utvalget av våre shuttle.
Når vi har disse passasjerene, vil vi ønsker å legge til noen passasjerer som er
innenfor dette området.
Vi ønsker å tillate dem å hoppe på og ta en plass på vår shuttle, men bare
hvis vi har nok plass til dem.
>> Den shuttle.seats array vil indikere om setene er tomme, eller
hvem som er i det setet.
Så hvis et sete er tomt, så at setet skal være null.
Så iterere over setene array, sjekker for tomme seter, lagring
passasjerer i setene til du har ikke noen flere tomme seter.
Og dessverre, noen andre passasjerer blir nødt til å vente på
neste gang romfergen kommer ned.
>> Når de kommer på romfergen, vil vi ønsker å fjerne sin plass mark, som
er deres bilde i 3D-verden.
Hvis jeg ønsket å fjerne et sted mark p, da ville jeg få alle funksjonene
fra min Earth, fra Google Earth, og fjern deretter bestemt sted
markere ved hjelp removeChild funksjon.
Så til slutt, la oss fjerne markøren, ikonet på 2D-kartet, for ethvert
passasjer som vi plukker opp.
>> Hvis du vil fjerne en markør m, så skal jeg bare utføre m.setMap null.
Gjør dette for alle passasjerer som er innenfor rekkevidde, og du er ferdig pickup.
Diagrammet Funksjonen skal vise alle av passasjerene som er i din
transport, og ledig sete hvis tom.
Så diagram bør iterere over shuttle.seats, viser
passasjer informasjon for hver indeks, og ledig sete hvis indeksen er null.
>> Nå hvis HTML teksten er satt inne i en Java variabel, deretter ved å bruke
document.getElementById, diagram kan redigere indre HTML av at gitt
element ved å tilordne HTML tekst til
document.getElementById indre HTML variabel.
Når brukerne klikker på Drop Off-knappen i index.html, vil det ringe
avleveringsby funksjon.
Og det er vår jobb å implementere det.
>> I frafallsfrekvensene, vil vi ønske å fjerne eventuelle passasjerer fra shuttle bare hvis
vi er innenfor rekkevidde av sin destinasjon, deres bolig hus.
Så frafallsfrekvensene blir nødt til å sjekke om shuttle er innenfor rekkevidde av noen av
hus, og fjern eventuell nødvendig passasjerer fra romfergen.
Så hvordan skal vi sjekke om vi er innenfor rekkevidde av noen hus?
Vel, nok en gang, vil vi gjøre bruk av shuttle.distance funksjon, passerer i
breddegrad og lengdegrad på det punktet at vi sjekker mot.
>> Men hva er disse punktene?
Vel, det husene array, hvis du husker i houses.js, lagrer
breddegrad og lengdegrad på hvert hus i en assosiativ array, der hver
indeksen er navnet på det huset.
Så å fjerne passasjerer -
vel, bare hvis vi er innenfor rekkevidde av deres hus som de ønsker å gå til.
Så igjen, husk at passasjerene lagrer huset at hver passasjer
ønsker å gå til.
Hvis de er innenfor rekkevidden av deres huset, så får vi ta det
passasjer fra shuttle.seats og sett deres posisjon i matrisen til null.
>> Nå la oss snakke om noen ekstra funksjoner som kan implementeres i
den CS50 Shuttle p-set.
Det er et poengsystem hvor du holde oversikt over hvor mange
påpeker en bruker har.
For å slippe av passasjerer vellykket, kan de få poeng.
Men for å prøve å slippe av passasjerer hvor det ikke er noen hus i nærheten,
vel, kan de bli straffet for det.
Så kanskje du ønsker å holde styr på punktene i en global variabel.
>> Du kan implementere kanskje et tidsur, hvor brukeren har en viss
tid til å plukke opp og slippe av en visst antall passasjerer.
Kanskje til og med integrere dette med punkt-system.
Eller du kan redigere figur slik at passasjerer er sortert etter huset.
Så det ville trolig være en slags fungere til shuttle.seats.
>> Du kan implementere en flygende funksjon, der hvis brukeren innganger Konami
kode, og deretter shuttle løftes fra bakken og shuttle kan fly.
Men for en trygg frafalt, best å gjøre shuttle lande hjulene på
bakken først.
Du kan også implementere teleportering, hvor du gjør en rullegardinlisten med
bygninger i index.html.
Og velge en av dem, den Brukeren vil bli transportert til
at bygningen på campus.
OK, men å reise gjennom veggene i noen
bygninger på veien dit.
>> Du kan også endre hastigheten på transport, slik at brukeren kan øke
eller redusere hastigheten.
Kanskje du vil ha en global variabel til holde styr på hvor mye drivstoff den
shuttle har, mink det etterhvert.
Når du treffer null, skjønt, shuttle vil ikke være i stand til å bevege seg med mindre du har
refueled, kanskje ved hjelp av en knapp, eller selv lage din egen bensinstasjon.
>> Men det er absolutt ikke en uttømmende liste.
Sjekk ut spec for hele listen, eller kanskje foreslå
din egen til TF.
Himmelen er grensen.
Dette er din siste CS50 p-sett, så ha det gøy med det.
Dette var CS50 Shuttle.
>> Jeg har å si, det har vært en glede noe som gjør disse til deg med
produksjonsteamet.
Og jeg håper at du har liker dem, også.
Mitt navn er Zamyla.
Og dette var CS50.