1
00:00:00,000 --> 00:00:00,988

2
00:00:00,988 --> 00:00:09,880
>> [Musikgengivelse]

3
00:00:09,880 --> 00:00:13,360
>> SPEAKER 1: Nå, her er vi,
den sidste P-sæt i CS50.

4
00:00:13,360 --> 00:00:17,040
Lykønsker jer fra at have
kommet så langt, siden din første goddag

5
00:00:17,040 --> 00:00:20,090
verdener og udskrive
pyramider til Mario.

6
00:00:20,090 --> 00:00:21,930
Du har lavet en hjemmeside i sidste uge.

7
00:00:21,930 --> 00:00:25,110
Og vi kommer til at gøre en anden
i denne uge, en, der giver dig mulighed for at

8
00:00:25,110 --> 00:00:28,570
køre rundt i Harvard campus, plukke
up medarbejdere CS50 og

9
00:00:28,570 --> 00:00:31,910
bringe dem tilbage til deres
beboelseshuse.

10
00:00:31,910 --> 00:00:35,400
>> Nu i sidste uge arbejdede vi i PHP,
en server side sprog.

11
00:00:35,400 --> 00:00:38,250
For denne P-sæt, vi får introduceret
til JavaScript, som er en

12
00:00:38,250 --> 00:00:40,600
klientsiden sprog.

13
00:00:40,600 --> 00:00:44,010
Så lad os tage et kig på nogle af de
fordeling kode, der er leveret til

14
00:00:44,010 --> 00:00:46,210
dig til dette P-sæt.

15
00:00:46,210 --> 00:00:49,700
>> I mappen JavaScript, vil der
være en flok JavaScript-filer.

16
00:00:49,700 --> 00:00:53,600
Der er buildings.js, som indeholder en
vifte af bygninger omkring Harvard

17
00:00:53,600 --> 00:00:57,340
campus, med deres oplysninger
og position.

18
00:00:57,340 --> 00:01:01,630
Houses.js er en vifte af Harvard
beboelseshuse, med deres

19
00:01:01,630 --> 00:01:04,030
længde-og breddegrader.

20
00:01:04,030 --> 00:01:07,020
Passengers.js indeholder en
vifte af passagerer -

21
00:01:07,020 --> 00:01:08,600
medarbejderne CS50 -

22
00:01:08,600 --> 00:01:11,640
at du vil være at bringe tilbage til
deres bolig huse.

23
00:01:11,640 --> 00:01:16,450
>> Math3D.js, der indeholder en masse af
funktioner at gøre med bevægelsen.

24
00:01:16,450 --> 00:01:19,500
Hvis du er matematisk minded,
så jeg glæder du tage et kig.

25
00:01:19,500 --> 00:01:23,530
Men du behøver ikke at forstå
alt derinde.

26
00:01:23,530 --> 00:01:26,710
Shuttle.js, der beskæftiger sig med
rumfærgens bevægelse.

27
00:01:26,710 --> 00:01:31,450
Og index.html er den hjemmeside, hvor
alting sker, virkelig, hvor

28
00:01:31,450 --> 00:01:33,610
brugeren interagerer med webstedet.

29
00:01:33,610 --> 00:01:39,110
>> Service.css er CSS style sheet,
, som foruden til kvidre

30
00:01:39,110 --> 00:01:43,960
Bootstrap bibliotek, kontrol
hvordan index.html udseende.

31
00:01:43,960 --> 00:01:48,190
Og så har vi også service.js, som
indeholder servicefunktioner for

32
00:01:48,190 --> 00:01:49,010
rumfærgen.

33
00:01:49,010 --> 00:01:53,010
Og her er, hvor du kommer til at være
udfylde nogle af de til dos.

34
00:01:53,010 --> 00:01:56,600
>> Lad os nu tage et kig på objekter og
associative arrays i JavaScript,

35
00:01:56,600 --> 00:01:59,360
der for alle henseender
er indbyrdes udskiftelige.

36
00:01:59,360 --> 00:02:03,030
Hvis jeg ønskede at lave et objekt en variabel
kaldes en tryllestav, ville jeg

37
00:02:03,030 --> 00:02:04,290
erklære den.

38
00:02:04,290 --> 00:02:08,789
Og inden for disse krøllede parenteser vil jeg
specificere kernen er enhjørning.

39
00:02:08,789 --> 00:02:10,220
Træet er kirsebær.

40
00:02:10,220 --> 00:02:12,710
Og længden er 13.

41
00:02:12,710 --> 00:02:16,370
>> Nu kan jeg også få adgang til værdier
af objekter ved hjælp

42
00:02:16,370 --> 00:02:18,270
associative array notation.

43
00:02:18,270 --> 00:02:22,610
Så wand indeks kerne, kan jeg indstille
der svarer til enhjørning, eller

44
00:02:22,610 --> 00:02:24,710
kontrollere, at hvis jeg har brug for.

45
00:02:24,710 --> 00:02:26,510
Eller jeg kan bruge dot operatør.

46
00:02:26,510 --> 00:02:30,280
Wand dot træ lig kirsebær,
og så videre, og så videre.

47
00:02:30,280 --> 00:02:33,930
Så du kan se, at associative arrays og
objekter i JavaScript vil være

48
00:02:33,930 --> 00:02:37,720
udskiftelige, og vilje
komme i ganske handy.

49
00:02:37,720 --> 00:02:41,570
>> Så ser vi en vifte af bygninger
i buildings.js.

50
00:02:41,570 --> 00:02:43,870
Igen, en række af objekter.

51
00:02:43,870 --> 00:02:48,500
Hvis jeg ønskede at gøre en række af de bedste
bygninger på Harvard campus, derefter

52
00:02:48,500 --> 00:02:49,710
Jeg ville gøre det som følger.

53
00:02:49,710 --> 00:02:55,250
Ved hjælp af dette objekt notation, hvor
Jeg gemmer roden, navn, adresse,

54
00:02:55,250 --> 00:03:00,260
breddegrad og længdegrad for hver
enkelt bygning objekt.

55
00:03:00,260 --> 00:03:02,930
>> Lad os hurtigt tale om variable
i JavaScript.

56
00:03:02,930 --> 00:03:07,760
Som PHP, JavaScript variabler
er svagt eller løst skrevet.

57
00:03:07,760 --> 00:03:14,120
Hvis du vil oprette en lokal variabel, du præfiks
variabelnavnet med V-A-R, var.

58
00:03:14,120 --> 00:03:17,010
>> Nu i JavaScript, funktioner
begrænse omfanget af variabler.

59
00:03:17,010 --> 00:03:20,600
Så hvis du har en lokal variabel i
en funktion, så andre funktioner

60
00:03:20,600 --> 00:03:22,060
kan ikke få adgang til den.

61
00:03:22,060 --> 00:03:26,090
Men i modsætning til C, loops og betingelser ikke
begrænse omfanget af en variabel.

62
00:03:26,090 --> 00:03:30,600
>> Så selv hvis du erklære den inde i en
tilstand, hele funktionen vil

63
00:03:30,600 --> 00:03:32,810
har adgang til det.

64
00:03:32,810 --> 00:03:35,820
Nu uden var variablen
vil være global.

65
00:03:35,820 --> 00:03:39,170
Så hvis du bare erklære navn og
tildele en værdi, så er variabel

66
00:03:39,170 --> 00:03:41,900
vil være en global variabel
i JavaScript.

67
00:03:41,900 --> 00:03:48,480
>> Nu i huse, har vi en associativ
vifte af hus tekstobjekter, hvor

68
00:03:48,480 --> 00:03:52,100
hvert hus er blot en breddegrad
og en længde.

69
00:03:52,100 --> 00:03:55,140
Så har vi passagererne
array, som er en matrix

70
00:03:55,140 --> 00:03:57,370
af objekttypen passager.

71
00:03:57,370 --> 00:04:01,620
Så hver passager har et brugernavn,
et navn, og et hus.

72
00:04:01,620 --> 00:04:04,840
Bemærk, at jeg ser af type
passager, som virkelig bare betyder

73
00:04:04,840 --> 00:04:08,150
at hvert objekt har
samme nøgle værdi par.

74
00:04:08,150 --> 00:04:12,830
Så hver objekt af typen passageren har
et brugernavn, et navn og et hus.

75
00:04:12,830 --> 00:04:14,850
>> Så hvad skal vi
gøre for P sæt?

76
00:04:14,850 --> 00:04:20,779
Nå, vi er nødt til at tillade brugere at plukke
up ansatte at vise alle

77
00:04:20,779 --> 00:04:25,090
de ansatte, der i øjeblikket
vores bus til at slippe dem ud.

78
00:04:25,090 --> 00:04:29,280
Og så vil vi også tale om ekstra
funktioner, der kan gennemføres for

79
00:04:29,280 --> 00:04:30,980
shuttle P sæt.

80
00:04:30,980 --> 00:04:33,610
>> Men lad os tale om afhentning først.

81
00:04:33,610 --> 00:04:37,480
Ansigter CS50 personale har været
plantet over hele campus, hvor hver

82
00:04:37,480 --> 00:04:41,750
ansigt er implementeret som et sted mærke
på 3D jorden, og som et

83
00:04:41,750 --> 00:04:44,030
markør på 2D-kort.

84
00:04:44,030 --> 00:04:47,880
Så når brugeren klikker på pickup
knap, vi ønsker at tilføje nærheden

85
00:04:47,880 --> 00:04:49,590
passagerer til rumfærgen.

86
00:04:49,590 --> 00:04:53,650
Og vi ønsker også at fjerne deres plads
markere fra verden, og fjerne deres

87
00:04:53,650 --> 00:04:58,060
markør på kortet, som angiver, at
de er i vores shuttle nu.

88
00:04:58,060 --> 00:05:02,520
>> Så hvordan kan vi opdage, hvis passagerer
er inden for rækkevidde af vores shuttle?

89
00:05:02,520 --> 00:05:04,610
Nå, den funktion distance -

90
00:05:04,610 --> 00:05:08,770
så shuttle dot afstand, passerer
længde-og breddegrad, vil

91
00:05:08,770 --> 00:05:12,030
beregne afstanden fra den aktuelle
position af rumfærgen til

92
00:05:12,030 --> 00:05:15,850
peger som du angiver med at
given bredde og længde.

93
00:05:15,850 --> 00:05:19,180
Så du kan bruge dette til at beregne
afstand fra rumfærgen til

94
00:05:19,180 --> 00:05:20,310
passagerer.

95
00:05:20,310 --> 00:05:24,040
>> Men hvordan kan du vide, hvor
passagererne er?

96
00:05:24,040 --> 00:05:27,510
Nå, det er, hvor vi bliver nødt til at
redigere populate funktionen.

97
00:05:27,510 --> 00:05:32,500
Befolke steder alle de ansatte
og passagerer ind i verden,

98
00:05:32,500 --> 00:05:36,300
og ind på kortet, men ikke
gemme deres placering.

99
00:05:36,300 --> 00:05:39,850
Så måske du kan gemme deres
anbringe mærker og markører

100
00:05:39,850 --> 00:05:41,570
i nogle globale array.

101
00:05:41,570 --> 00:05:45,780
>> Allerede nu er der en global matrix
lagring af oplysninger fra passagererne.

102
00:05:45,780 --> 00:05:49,960
Passagererne array-butikker hver
passagerens navn og deres hus.

103
00:05:49,960 --> 00:05:54,985
Så måske du kan tilføje nogle få parametre
der til de passager objekter.

104
00:05:54,985 --> 00:05:59,290
>> For at hjælpe os med at opdage alle passagerer
inden for rækkevidde af vores shuttle, lad os

105
00:05:59,290 --> 00:06:02,500
løkke gennem alle de passagerer
i passagerer array.

106
00:06:02,500 --> 00:06:07,790
En for-løkke i JavaScript kan se
noget som dette, meget lig

107
00:06:07,790 --> 00:06:12,910
dem, for løkke i C. Eller vi kan bruge en
alternativ til loop-struktur.

108
00:06:12,910 --> 00:06:17,130
>> For var jeg i array, hvor jeg
vil stadig være indekset.

109
00:06:17,130 --> 00:06:20,740
Men du behøver ikke at specificere
array dot længde

110
00:06:20,740 --> 00:06:23,310
tilstand, og jeg plus plus.

111
00:06:23,310 --> 00:06:26,140
Hver passager placering er
afgivet deres plads mærke.

112
00:06:26,140 --> 00:06:29,800
>> Men stedet mærke er ikke det
breddegrad og længdegrad.

113
00:06:29,800 --> 00:06:34,575
Vi er nødt til at få adgang til disse parametre ved
få geometri, ved hjælp af get

114
00:06:34,575 --> 00:06:35,900
geometri på stedmarkør.

115
00:06:35,900 --> 00:06:39,630
Og så når vi har den geometri,
få enten bredde eller

116
00:06:39,630 --> 00:06:42,600
længdegrad, ved hjælp af disse funktioner.

117
00:06:42,600 --> 00:06:45,680
>> Så nu ved vi, hvordan man kan afsløre, om
passagerer er inden

118
00:06:45,680 --> 00:06:47,920
Rækken af ​​vores shuttle.

119
00:06:47,920 --> 00:06:52,050
Når vi har disse passagerer, vi får
ønsker at tilføje passagerer, der er

120
00:06:52,050 --> 00:06:53,140
inden for dette område.

121
00:06:53,140 --> 00:06:57,580
Vi ønsker at give dem mulighed for at hoppe på, og
tage en plads på vores shuttle, men kun

122
00:06:57,580 --> 00:06:59,640
hvis vi har plads nok til dem.

123
00:06:59,640 --> 00:07:04,120
>> Rumfærgen dot sæder array
angive, om sæderne er tomme, eller

124
00:07:04,120 --> 00:07:05,890
der er i det sæde.

125
00:07:05,890 --> 00:07:11,170
Så hvis et sæde er tomt, så
at sædet vil være nul.

126
00:07:11,170 --> 00:07:15,930
Så gentage over sæderne array,
kontrol for tomme sæder, lagring

127
00:07:15,930 --> 00:07:20,020
passagerer ind disse sæder, indtil du
ikke har nogen flere tomme sæder.

128
00:07:20,020 --> 00:07:23,330
Og desværre alle andre passagerer
bliver nødt til at vente på

129
00:07:23,330 --> 00:07:26,000
næste gang rumfærgen kommer rundt.

130
00:07:26,000 --> 00:07:30,280
>> Når de får på rumfærgen, vi ønsker
at fjerne deres sted mærke, som

131
00:07:30,280 --> 00:07:32,540
er deres foto i 3D-verden.

132
00:07:32,540 --> 00:07:38,030
Hvis jeg ønskede at fjerne et sted mark p,
så ville jeg få alle de funktioner,

133
00:07:38,030 --> 00:07:42,790
fra min jord, fra Google Earth
og derefter fjerne det specifikke sted

134
00:07:42,790 --> 00:07:45,910
markere bruge removeChild funktionen.

135
00:07:45,910 --> 00:07:51,360
Så endelig, lad os fjerne markeringen
ikonet på 2D-kort for enhver

136
00:07:51,360 --> 00:07:53,650
passager, som vi er picking up.

137
00:07:53,650 --> 00:07:59,790
For at fjerne en markør, m, så vil jeg
bare udføre m dot setMap null.

138
00:07:59,790 --> 00:08:02,920
Gør dette for passagerer inden for rækkevidde,
og du er færdig med pickup.

139
00:08:02,920 --> 00:08:05,056