1 00:00:00,000 --> 00:00:09,870 2 00:00:09,870 --> 00:00:13,360 >> ZAMYLA CHAN: Vel, her er vi, den siste p-satt i CS50. 3 00:00:13,360 --> 00:00:17,040 Gratuler dere fra å ha kommet så langt siden den første Hallo 4 00:00:17,040 --> 00:00:20,090 Verdener og utskrift Opptil Pyramidene for Mario. 5 00:00:20,090 --> 00:00:21,930 Du har gjort en nettside i forrige uke. 6 00:00:21,930 --> 00:00:25,110 Og vi kommer til å være å gjøre en annen denne uken, en som lar deg 7 00:00:25,110 --> 00:00:28,570 kjøre rundt i Harvard campus, plukking opp CS50 ansatte og 8 00:00:28,570 --> 00:00:31,910 å bringe dem tilbake til deres bolighus. 9 00:00:31,910 --> 00:00:35,400 >> Nå, i forrige uke jobbet vi i PHP, en server side språk. 10 00:00:35,400 --> 00:00:38,250 For denne p-sett, vi blir introdusert til Javascript, noe som er en 11 00:00:38,250 --> 00:00:40,610 klientsiden språk. 12 00:00:40,610 --> 00:00:44,020 Så la oss ta en titt på noen av de distribusjon kode som er gitt til 13 00:00:44,020 --> 00:00:46,210 du for denne p-settet. 14 00:00:46,210 --> 00:00:49,700 I Javascript-mappen, det vil være en haug av Javascript-filer. 15 00:00:49,700 --> 00:00:53,600 >> Det er buildings.js, som inneholder en rekke bygninger rundt Harvard 16 00:00:53,600 --> 00:00:57,340 campus med sin informasjon og posisjon. 17 00:00:57,340 --> 00:01:01,630 Houses.js er en rekke Harvard bolighus med deres 18 00:01:01,630 --> 00:01:04,030 breddegrader og lengdegrader. 19 00:01:04,030 --> 00:01:08,600 Passengers.js inneholder en rekke passasjerer, de CS50 ansatte 20 00:01:08,600 --> 00:01:11,640 at du skal bringe tilbake til sine boliger. 21 00:01:11,640 --> 00:01:16,450 >> Math3D.js, som inneholder mye funksjoner å gjøre med bevegelsen. 22 00:01:16,450 --> 00:01:19,500 Hvis du er matematisk tenkende, deretter Jeg ønsker deg velkommen til å ta en titt. 23 00:01:19,500 --> 00:01:23,530 Men du trenger ikke å forstå alt der inne. 24 00:01:23,530 --> 00:01:26,710 Shuttle.js, som omhandler romfergens bevegelse. 25 00:01:26,710 --> 00:01:31,450 Og index.html er hjemmesiden der alt som skjer, egentlig, hvor 26 00:01:31,450 --> 00:01:33,610 brukeren er i samspill med området. 27 00:01:33,610 --> 00:01:39,110 >> Service.css er CSS-stilark, som i tillegg til den Twitter 28 00:01:39,110 --> 00:01:43,960 Bootstrap Library, kontroller hvordan index.html utseende. 29 00:01:43,960 --> 00:01:48,190 Og så har vi også service.js, som inneholder servicefunksjoner for 30 00:01:48,190 --> 00:01:49,010 Shuttle. 31 00:01:49,010 --> 00:01:53,010 Og her er hvor du kommer til å være fylling i noen av de to-do-tallet. 32 00:01:53,010 --> 00:01:56,600 >> La oss nå ta en titt på objektene og assosiative arrays i Javascript, 33 00:01:56,600 --> 00:01:59,360 som for alle praktiske formål, er utskiftbare. 34 00:01:59,360 --> 00:02:03,030 Hvis jeg ønsket å lage et objekt en variabel kalt en tryllestav, jeg ville 35 00:02:03,030 --> 00:02:04,290 erklære det. 36 00:02:04,290 --> 00:02:09,350 Og inne i disse klammeparentes, ville jeg spesifisere, er kjernen enhjørning, veden 37 00:02:09,350 --> 00:02:12,710 er kirsebær, og lengden er 13. 38 00:02:12,710 --> 00:02:16,370 >> Nå kan jeg også få tilgang til verdier av objekter ved hjelp 39 00:02:16,370 --> 00:02:18,270 assosiativ matrise notasjon. 40 00:02:18,270 --> 00:02:22,610 Så wand indeksen kjerne, kan jeg stille som lik enhjørning, eller 41 00:02:22,610 --> 00:02:24,710 sjekk at hvis jeg trenger. 42 00:02:24,710 --> 00:02:28,890 Eller jeg kan bruke dot operatør wand.wood tilsvarer kirsebær, og 43 00:02:28,890 --> 00:02:30,280 så videre og så videre. 44 00:02:30,280 --> 00:02:33,930 Så du ser at assosiative matriser og objekter i Java kommer til å være 45 00:02:33,930 --> 00:02:37,710 utskiftbare, og vilje kommer i ganske hendig. 46 00:02:37,710 --> 00:02:41,570 >> Så ser vi en rekke bygninger i buildings.js, 47 00:02:41,570 --> 00:02:43,870 igjen, en rekke gjenstander. 48 00:02:43,870 --> 00:02:48,500 Hvis jeg ønsket å gjøre en rekke av de beste bygninger på Harvard campus, deretter 49 00:02:48,500 --> 00:02:49,710 Jeg ville gjøre det på følgende måte. 50 00:02:49,710 --> 00:02:55,250 Ved hjelp av dette objektet notasjon, der Jeg lagrer roten, navn, adresse, 51 00:02:55,250 --> 00:03:00,260 breddegrad og lengdegrad for hver enkelt bygning objekt. 52 00:03:00,260 --> 00:03:02,930 >> La oss raskt snakke om variabler i Javascript. 53 00:03:02,930 --> 00:03:07,760 Som PHP, Javascript variabler er svakt eller løst skrevet. 54 00:03:07,760 --> 00:03:14,120 For å opprette en lokal variabel, prefiks deg variabelnavnet med V-A-R, var. 55 00:03:14,120 --> 00:03:17,010 Nå, i Javascript, funksjoner vil begrense omfanget av variabler. 56 00:03:17,010 --> 00:03:20,600 Så hvis du har en lokal variabel i en funksjon og andre funksjoner 57 00:03:20,600 --> 00:03:22,060 kan ikke tilgang til den. 58 00:03:22,060 --> 00:03:26,090 >> Men i motsetning til C, løkker og betingelser ikke begrense omfanget av en variabel. 59 00:03:26,090 --> 00:03:30,600 Så selv om du erklærer det inne i en tilstand, vil hele funksjonen 60 00:03:30,600 --> 00:03:32,810 har tilgang til det. 61 00:03:32,810 --> 00:03:35,820 Nå, uten var, variabelen vil være global. 62 00:03:35,820 --> 00:03:39,170 Så hvis du bare erklære navnet og tilordne en verdi, da den variabelen 63 00:03:39,170 --> 00:03:41,900 vil være en global variabel i Javascript. 64 00:03:41,900 --> 00:03:48,480 >> Nå, i hus, har vi en assosiativ rekke verts type gjenstander, hvor 65 00:03:48,480 --> 00:03:52,100 hvert hus er bare en breddegrad og en lengdegrad. 66 00:03:52,100 --> 00:03:55,140 Da har vi passasjerene matrise, som er en matrise 67 00:03:55,140 --> 00:03:57,370 av objekttype passasjer. 68 00:03:57,370 --> 00:04:01,620 Så hver passasjer har en bruker navn, et navn, og et hus. 69 00:04:01,620 --> 00:04:04,840 >> Legg merke til at jeg sier av type passasjer, som egentlig bare betyr 70 00:04:04,840 --> 00:04:08,150 at hvert objekt har samme sentrale verdi-par. 71 00:04:08,150 --> 00:04:12,830 Så hver objekt av typen passasjer har et brukernavn, et navn, og et hus. 72 00:04:12,830 --> 00:04:14,850 Så hva trenger vi å gjøre for p-settet? 73 00:04:14,850 --> 00:04:20,779 Vel, vi trenger å tillate brukere å plukke opp ansatte, for å vise alle 74 00:04:20,779 --> 00:04:25,080 de ansatte som er i vår transport, og å slippe dem av. 75 00:04:25,080 --> 00:04:29,395 Og da vil vi også snakke om ekstra funksjoner som kan implementeres for 76 00:04:29,395 --> 00:04:30,980 Shuttle p-set. 77 00:04:30,980 --> 00:04:33,610 >> Men la oss snakke om pickup først. 78 00:04:33,610 --> 00:04:37,480 Ansiktene til CS50 ansatte har vært plantet over hele campus, hvor hver 79 00:04:37,480 --> 00:04:41,750 ansiktet er implementert som et sted mark på 3D-jord, og som en 80 00:04:41,750 --> 00:04:44,020 markør på 2D-kartet. 81 00:04:44,020 --> 00:04:47,880 Så når brukeren klikker Pickup knappen, vil vi legge til i nærheten 82 00:04:47,880 --> 00:04:49,590 passasjerer til romfergen. 83 00:04:49,590 --> 00:04:53,650 Og vi ønsker også å fjerne sin plass markere fra verden og fjerne deres 84 00:04:53,650 --> 00:04:58,060 markeringen fra kartet, som indikerer at de er i vår shuttle nå. 85 00:04:58,060 --> 00:05:02,520 >> Så hvordan kan vi oppdage om passasjerene er innenfor rekkevidde av vår transport? 86 00:05:02,520 --> 00:05:06,670 Vel, funksjonen avstand, så shuttle.distance, passerer i 87 00:05:06,670 --> 00:05:10,630 breddegrad og lengdegrad, vil beregne avstanden fra nåværende posisjon 88 00:05:10,630 --> 00:05:14,220 av skyss til det punktet at du angir med at gitt 89 00:05:14,220 --> 00:05:15,860 breddegrad og lengdegrad. 90 00:05:15,860 --> 00:05:19,180 Så du kan bruke dette til å beregne avstand fra transport til 91 00:05:19,180 --> 00:05:20,310 passasjerer. 92 00:05:20,310 --> 00:05:24,040 >> Men hvordan vet du hvor passasjerene er? 93 00:05:24,040 --> 00:05:27,510 Vel, det er der vi må redigere befolke funksjon. 94 00:05:27,510 --> 00:05:32,500 Fylle steder alle de ansatte i passasjerer i verden 95 00:05:32,500 --> 00:05:36,300 og inn i kartet, men ikke lagre deres plassering. 96 00:05:36,300 --> 00:05:39,850 Så kanskje du kan oppbevare plassere merker og markører 97 00:05:39,850 --> 00:05:41,570 i noen global array. 98 00:05:41,570 --> 00:05:45,780 >> Nå er det allerede en global matrise lagring av informasjon fra passasjerene. 99 00:05:45,780 --> 00:05:49,960 Passasjerene array-butikker hver passasjerens navn og huset deres. 100 00:05:49,960 --> 00:05:54,985 Så kanskje du kan legge til et par parametere det til personobjekter. 101 00:05:54,985 --> 00:05:58,150 >> For å hjelpe oss med å finne alle passasjerene innenfor rekkevidden av vår 102 00:05:58,150 --> 00:06:02,485 transport, la oss sløyfe gjennom alle passasjerer i passasjerer matrisen. 103 00:06:02,485 --> 00:06:07,790 En for løkke i Javascript, kan se noe sånt som dette, svært lik 104 00:06:07,790 --> 00:06:13,200 de etter looper i C. Eller vi kan bruke en alternativ for loop struktur, for 105 00:06:13,200 --> 00:06:18,680 Var jeg i matrise, hvor jeg vil fortsatt være indeksen, men du trenger ikke å 106 00:06:18,680 --> 00:06:23,310 spesifisere tabell.length tilstand og jeg + +. 107 00:06:23,310 --> 00:06:26,130 >> Hver passasjerens posisjon er gitt av sin plass mark. 108 00:06:26,130 --> 00:06:29,800 Men stedet merket er ikke den breddegrad og lengdegrad. 109 00:06:29,800 --> 00:06:34,170 Vi må få tilgang til disse parametrene ved få geometri, å bruke Get 110 00:06:34,170 --> 00:06:38,180 geometri på stedet mark, og deretter når vi har geometri, får 111 00:06:38,180 --> 00:06:42,580 enten breddegrad eller lengde ved hjelp av disse funksjonene. 112 00:06:42,580 --> 00:06:45,680 >> Så nå vet vi hvordan å oppdage om passasjerer er innenfor 113 00:06:45,680 --> 00:06:47,920 Utvalget av våre shuttle. 114 00:06:47,920 --> 00:06:52,050 Når vi har disse passasjerene, vil vi ønsker å legge til noen passasjerer som er 115 00:06:52,050 --> 00:06:53,140 innenfor dette området. 116 00:06:53,140 --> 00:06:57,580 Vi ønsker å tillate dem å hoppe på og ta en plass på vår shuttle, men bare 117 00:06:57,580 --> 00:06:59,630 hvis vi har nok plass til dem. 118 00:06:59,630 --> 00:07:04,120 >> Den shuttle.seats array vil indikere om setene er tomme, eller 119 00:07:04,120 --> 00:07:05,890 hvem som er i det setet. 120 00:07:05,890 --> 00:07:11,160 Så hvis et sete er tomt, så at setet skal være null. 121 00:07:11,160 --> 00:07:15,930 Så iterere over setene array, sjekker for tomme seter, lagring 122 00:07:15,930 --> 00:07:20,020 passasjerer i setene til du har ikke noen flere tomme seter. 123 00:07:20,020 --> 00:07:23,330 Og dessverre, noen andre passasjerer blir nødt til å vente på 124 00:07:23,330 --> 00:07:26,000 neste gang romfergen kommer ned. 125 00:07:26,000 --> 00:07:30,280 >> Når de kommer på romfergen, vil vi ønsker å fjerne sin plass mark, som 126 00:07:30,280 --> 00:07:32,580 er deres bilde i 3D-verden. 127 00:07:32,580 --> 00:07:38,030 Hvis jeg ønsket å fjerne et sted mark p, da ville jeg få alle funksjonene 128 00:07:38,030 --> 00:07:42,820 fra min Earth, fra Google Earth, og fjern deretter bestemt sted 129 00:07:42,820 --> 00:07:45,910 markere ved hjelp removeChild funksjon. 130 00:07:45,910 --> 00:07:51,360 Så til slutt, la oss fjerne markøren, ikonet på 2D-kartet, for ethvert 131 00:07:51,360 --> 00:07:53,650 passasjer som vi plukker opp. 132 00:07:53,650 --> 00:07:59,790 >> Hvis du vil fjerne en markør m, så skal jeg bare utføre m.setMap null. 133 00:07:59,790 --> 00:08:03,670 Gjør dette for alle passasjerer som er innenfor rekkevidde, og du er ferdig pickup. 134 00:08:03,670 --> 00:08:07,890 Diagrammet Funksjonen skal vise alle av passasjerene som er i din 135 00:08:07,890 --> 00:08:11,000 transport, og ledig sete hvis tom. 136 00:08:11,000 --> 00:08:14,420 Så diagram bør iterere over shuttle.seats, viser 137 00:08:14,420 --> 00:08:21,350 passasjer informasjon for hver indeks, og ledig sete hvis indeksen er null. 138 00:08:21,350 --> 00:08:26,160 >> Nå hvis HTML teksten er satt inne i en Java variabel, deretter ved å bruke 139 00:08:26,160 --> 00:08:31,950 document.getElementById, diagram kan redigere indre HTML av at gitt 140 00:08:31,950 --> 00:08:36,140 element ved å tilordne HTML tekst til 141 00:08:36,140 --> 00:08:40,840 document.getElementById indre HTML variabel. 142 00:08:40,840 --> 00:08:46,180 Når brukerne klikker på Drop Off-knappen i index.html, vil det ringe 143 00:08:46,180 --> 00:08:47,160 avleveringsby funksjon. 144 00:08:47,160 --> 00:08:49,510 Og det er vår jobb å implementere det. 145 00:08:49,510 --> 00:08:54,150 >> I frafallsfrekvensene, vil vi ønske å fjerne eventuelle passasjerer fra shuttle bare hvis 146 00:08:54,150 --> 00:08:58,740 vi er innenfor rekkevidde av sin destinasjon, deres bolig hus. 147 00:08:58,740 --> 00:09:03,300 Så frafallsfrekvensene blir nødt til å sjekke om shuttle er innenfor rekkevidde av noen av 148 00:09:03,300 --> 00:09:08,200 hus, og fjern eventuell nødvendig passasjerer fra romfergen. 149 00:09:08,200 --> 00:09:11,020 Så hvordan skal vi sjekke om vi er innenfor rekkevidde av noen hus? 150 00:09:11,020 --> 00:09:16,630 Vel, nok en gang, vil vi gjøre bruk av shuttle.distance funksjon, passerer i 151 00:09:16,630 --> 00:09:20,990 breddegrad og lengdegrad på det punktet at vi sjekker mot. 152 00:09:20,990 --> 00:09:22,730 >> Men hva er disse punktene? 153 00:09:22,730 --> 00:09:27,210 Vel, det husene array, hvis du husker i houses.js, lagrer 154 00:09:27,210 --> 00:09:32,790 breddegrad og lengdegrad på hvert hus i en assosiativ array, der hver 155 00:09:32,790 --> 00:09:35,980 indeksen er navnet på det huset. 156 00:09:35,980 --> 00:09:37,590 Så å fjerne passasjerer - 157 00:09:37,590 --> 00:09:41,820 vel, bare hvis vi er innenfor rekkevidde av deres hus som de ønsker å gå til. 158 00:09:41,820 --> 00:09:46,380 Så igjen, husk at passasjerene lagrer huset at hver passasjer 159 00:09:46,380 --> 00:09:48,850 ønsker å gå til. 160 00:09:48,850 --> 00:09:51,670 Hvis de er innenfor rekkevidden av deres huset, så får vi ta det 161 00:09:51,670 --> 00:09:57,200 passasjer fra shuttle.seats og sett deres posisjon i matrisen til null. 162 00:09:57,200 --> 00:10:00,220 >> Nå la oss snakke om noen ekstra funksjoner som kan implementeres i 163 00:10:00,220 --> 00:10:02,690 den CS50 Shuttle p-set. 164 00:10:02,690 --> 00:10:05,850 Det er et poengsystem hvor du holde oversikt over hvor mange 165 00:10:05,850 --> 00:10:07,520 påpeker en bruker har. 166 00:10:07,520 --> 00:10:11,120 For å slippe av passasjerer vellykket, kan de få poeng. 167 00:10:11,120 --> 00:10:15,100 Men for å prøve å slippe av passasjerer hvor det ikke er noen hus i nærheten, 168 00:10:15,100 --> 00:10:16,980 vel, kan de bli straffet for det. 169 00:10:16,980 --> 00:10:21,790 Så kanskje du ønsker å holde styr på punktene i en global variabel. 170 00:10:21,790 --> 00:10:25,970 >> Du kan implementere kanskje et tidsur, hvor brukeren har en viss 171 00:10:25,970 --> 00:10:29,800 tid til å plukke opp og slippe av en visst antall passasjerer. 172 00:10:29,800 --> 00:10:33,280 Kanskje til og med integrere dette med punkt-system. 173 00:10:33,280 --> 00:10:39,970 Eller du kan redigere figur slik at passasjerer er sortert etter huset. 174 00:10:39,970 --> 00:10:45,250 Så det ville trolig være en slags fungere til shuttle.seats. 175 00:10:45,250 --> 00:10:49,240 >> Du kan implementere en flygende funksjon, der hvis brukeren innganger Konami 176 00:10:49,240 --> 00:10:53,460 kode, og deretter shuttle løftes fra bakken og shuttle kan fly. 177 00:10:53,460 --> 00:10:58,890 Men for en trygg frafalt, best å gjøre shuttle lande hjulene på 178 00:10:58,890 --> 00:11:00,700 bakken først. 179 00:11:00,700 --> 00:11:05,910 Du kan også implementere teleportering, hvor du gjør en rullegardinlisten med 180 00:11:05,910 --> 00:11:08,380 bygninger i index.html. 181 00:11:08,380 --> 00:11:12,270 Og velge en av dem, den Brukeren vil bli transportert til 182 00:11:12,270 --> 00:11:14,220 at bygningen på campus. 183 00:11:14,220 --> 00:11:16,760 OK, men å reise gjennom veggene i noen 184 00:11:16,760 --> 00:11:19,290 bygninger på veien dit. 185 00:11:19,290 --> 00:11:22,960 >> Du kan også endre hastigheten på transport, slik at brukeren kan øke 186 00:11:22,960 --> 00:11:25,490 eller redusere hastigheten. 187 00:11:25,490 --> 00:11:28,840 Kanskje du vil ha en global variabel til holde styr på hvor mye drivstoff den 188 00:11:28,840 --> 00:11:31,520 shuttle har, mink det etterhvert. 189 00:11:31,520 --> 00:11:35,860 Når du treffer null, skjønt, shuttle vil ikke være i stand til å bevege seg med mindre du har 190 00:11:35,860 --> 00:11:40,610 refueled, kanskje ved hjelp av en knapp, eller selv lage din egen bensinstasjon. 191 00:11:40,610 --> 00:11:43,240 >> Men det er absolutt ikke en uttømmende liste. 192 00:11:43,240 --> 00:11:46,340 Sjekk ut spec for hele listen, eller kanskje foreslå 193 00:11:46,340 --> 00:11:47,840 din egen til TF. 194 00:11:47,840 --> 00:11:48,950 Himmelen er grensen. 195 00:11:48,950 --> 00:11:53,110 Dette er din siste CS50 p-sett, så ha det gøy med det. 196 00:11:53,110 --> 00:11:56,360 Dette var CS50 Shuttle. 197 00:11:56,360 --> 00:11:59,230 >> Jeg har å si, det har vært en glede noe som gjør disse til deg med 198 00:11:59,230 --> 00:12:00,400 produksjonsteamet. 199 00:12:00,400 --> 00:12:04,330 Og jeg håper at du har liker dem, også. 200 00:12:04,330 --> 00:12:06,040 Mitt navn er Zamyla. 201 00:12:06,040 --> 00:12:08,310 Og dette var CS50. 202 00:12:08,310 --> 00:12:16,363