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

2
00:00:00,988 --> 00:00:09,880
>> [MUSIK SPELA]

3
00:00:09,880 --> 00:00:13,360
>> HÖGTALARE 1: Tja, här är vi,
den sista P som i CS50.

4
00:00:13,360 --> 00:00:17,040
Gratulera er från att ha
kommit så långt sedan din första hej

5
00:00:17,040 --> 00:00:20,090
världar och skriva ut
pyramider för Mario.

6
00:00:20,090 --> 00:00:21,930
Du gjorde en hemsida förra veckan.

7
00:00:21,930 --> 00:00:25,110
Och vi kommer att göra en annan
den här veckan, en som gör att du kan

8
00:00:25,110 --> 00:00:28,570
köra runt Harvard campus, plocka
up CS50 personal och

9
00:00:28,570 --> 00:00:31,910
föra dem tillbaka till deras
bostadshus.

10
00:00:31,910 --> 00:00:35,400
>> Nu förra veckan vi jobbade i PHP,
en server side språk.

11
00:00:35,400 --> 00:00:38,250
För denna P-set, vi blir introducerade
till JavaScript, vilket är en

12
00:00:38,250 --> 00:00:40,600
side språk klient.

13
00:00:40,600 --> 00:00:44,010
Så låt oss ta en titt på några av de
kodfördelning som är försedd med

14
00:00:44,010 --> 00:00:46,210
er för denna P set.

15
00:00:46,210 --> 00:00:49,700
>> I JavaScript-mappen, kommer det
vara ett gäng JavaScript-filer.

16
00:00:49,700 --> 00:00:53,600
Det finns buildings.js, som innehåller en
samling av byggnader runt Harvard

17
00:00:53,600 --> 00:00:57,340
campus, med sin information
och placering.

18
00:00:57,340 --> 00:01:01,630
Houses.js är en samling av Harvard
bostadshus, med sina

19
00:01:01,630 --> 00:01:04,030
latituder och longituder.

20
00:01:04,030 --> 00:01:07,020
Passengers.js innehåller en
samling av passagerare -

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

22
00:01:08,600 --> 00:01:11,640
att du kommer att föra tillbaka till
deras bostäder.

23
00:01:11,640 --> 00:01:16,450
>> Math3D.js, som innehåller en hel del
funktioner för att göra med rörelsen.

24
00:01:16,450 --> 00:01:19,500
Om du är matematiskt sinnade,
då välkomnar jag att du tar en titt.

25
00:01:19,500 --> 00:01:23,530
Men du måste förstå
allt där.

26
00:01:23,530 --> 00:01:26,710
Shuttle.js, handlar det med
skytteln rörelse.

27
00:01:26,710 --> 00:01:31,450
Och index.html är hemsidan där
allting händer, egentligen, när det

28
00:01:31,450 --> 00:01:33,610
Användaren interagerar med platsen.

29
00:01:33,610 --> 00:01:39,110
>> Service.css är CSS-formatmallen,
som, förutom att den post

30
00:01:39,110 --> 00:01:43,960
Bootstrap bibliotek, kontroller
hur index.html ser ut.

31
00:01:43,960 --> 00:01:48,190
Och då har vi också service.js, vilket
innehåller servicefunktioner för

32
00:01:48,190 --> 00:01:49,010
skytteln.

33
00:01:49,010 --> 00:01:53,010
Och här är där du kommer att bli
fylla i en del av den till DOS.

34
00:01:53,010 --> 00:01:56,600
>> Nu ska vi ta en titt på föremål och
associativa arrayer i JavaScript,

35
00:01:56,600 --> 00:01:59,360
som för alla avseenden
är utbytbara.

36
00:01:59,360 --> 00:02:03,030
Om jag ville göra ett objekt en variabel
kallas ett trollspö, skulle jag

37
00:02:03,030 --> 00:02:04,290
förklara den.

38
00:02:04,290 --> 00:02:08,789
Och inom dessa klammerparentes jag skulle
specificera kärnan är enhörning.

39
00:02:08,789 --> 00:02:10,220
Träet är körsbär.

40
00:02:10,220 --> 00:02:12,710
Och längden är 13.

41
00:02:12,710 --> 00:02:16,370
>> Nu kan jag också komma åt värden
av objekt med

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

43
00:02:18,270 --> 00:02:22,610
Så trollspö index kärna, kan jag ställa
som lika med enhörning, eller

44
00:02:22,610 --> 00:02:24,710
kontrollera att, om jag behöver.

45
00:02:24,710 --> 00:02:26,510
Eller jag kan använda punktoperatorn.

46
00:02:26,510 --> 00:02:30,280
Wand dot trä är lika med körsbär,
och så vidare, och så vidare.

47
00:02:30,280 --> 00:02:33,930
Så du ser att associativa arrayer och
objekt i JavaScript kommer att bli

48
00:02:33,930 --> 00:02:37,720
utbytbara och viljan
komma ganska praktiskt.

49
00:02:37,720 --> 00:02:41,570
>> Sedan ser vi en rad byggnader
i buildings.js.

50
00:02:41,570 --> 00:02:43,870
Återigen, en array med objekt.

51
00:02:43,870 --> 00:02:48,500
Om jag ville göra en samling av de bästa
byggnader på Harvard campus, sedan

52
00:02:48,500 --> 00:02:49,710
Jag skulle göra det på följande sätt.

53
00:02:49,710 --> 00:02:55,250
Med användning av detta föremål format där
Jag lagrar roten, namn, adress,

54
00:02:55,250 --> 00:03:00,260
latitud och longitud för varje
enda byggnad objektet.

55
00:03:00,260 --> 00:03:02,930
>> Låt oss snabbt tala om variabler
i JavaScript.

56
00:03:02,930 --> 00:03:07,760
Liksom PHP, JavaScript-variabler
är svagt eller löst skrivit.

57
00:03:07,760 --> 00:03:14,120
För att skapa en lokal variabel, prefix du
variabelnamnet med V-A-R, var.

58
00:03:14,120 --> 00:03:17,010
>> Nu i JavaScript, funktioner kommer
begränsa omfattningen av variabler.

59
00:03:17,010 --> 00:03:20,600
Så om du har en lokal variabel inom
en funktion, då andra funktioner

60
00:03:20,600 --> 00:03:22,060
kan inte komma åt den.

61
00:03:22,060 --> 00:03:26,090
Men till skillnad från C, loopar och villkor inte
begränsa omfattningen av en variabel.

62
00:03:26,090 --> 00:03:30,600
>> Så även om du förklara den inne i en
tillstånd, hela funktionen kommer

63
00:03:30,600 --> 00:03:32,810
ha tillgång till den.

64
00:03:32,810 --> 00:03:35,820
Nu utan var, variabeln
kommer att vara global.

65
00:03:35,820 --> 00:03:39,170
Så om du bara deklarera namn och
tilldela ett värde, då den variabeln

66
00:03:39,170 --> 00:03:41,900
kommer att vara en global variabel
i JavaScript.

67
00:03:41,900 --> 00:03:48,480
>> Nu i hus, har vi en associativ
samling av hus textobjekt, där

68
00:03:48,480 --> 00:03:52,100
varje hus är bara en latitud
och en longitud.

69
00:03:52,100 --> 00:03:55,140
Sedan har vi passagerarna
matris, som är en array

70
00:03:55,140 --> 00:03:57,370
av objekttypen passageraren.

71
00:03:57,370 --> 00:04:01,620
Så varje passagerare har ett användarnamn,
ett namn och ett hus.

72
00:04:01,620 --> 00:04:04,840
Lägg märke till att jag ser på typ
passagerare, vilket egentligen bara innebär

73
00:04:04,840 --> 00:04:08,150
att varje objekt har den
samma nyckelvärde paret.

74
00:04:08,150 --> 00:04:12,830
Så varje objekt av typen passagerare har
ett användarnamn, ett namn, och ett hus.

75
00:04:12,830 --> 00:04:14,850
>> Så vad gör vi behöver
göra för P set?

76
00:04:14,850 --> 00:04:20,779
Tja, måste vi tillåta användare att plocka
upp personal, för att visa alla

77
00:04:20,779 --> 00:04:25,090
den personal som för närvarande
vår buss, och att släppa dem.

78
00:04:25,090 --> 00:04:29,280
Och sedan kommer vi också tala om extra
funktioner som kan genomföras för

79
00:04:29,280 --> 00:04:30,980
skytteln P set.

80
00:04:30,980 --> 00:04:33,610
>> Men låt oss tala om pickup först.

81
00:04:33,610 --> 00:04:37,480
Ansiktena på CS50 personal har varit
planterade över hela campus, där varje

82
00:04:37,480 --> 00:04:41,750
ansikte genomförs som en plats märke
på 3D-jord, och som ett

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

84
00:04:44,030 --> 00:04:47,880
Så när användaren klickar på pickup
knapp, vi vill lägga till i närheten

85
00:04:47,880 --> 00:04:49,590
passagerare till skytteln.

86
00:04:49,590 --> 00:04:53,650
Och vi vill också ta bort sin plats
markera från världen, och ta bort deras

87
00:04:53,650 --> 00:04:58,060
markör från kartan, vilket tyder på att
de är i vår buss nu.

88
00:04:58,060 --> 00:05:02,520
>> Så hur ska vi upptäcka om passagerare
är inom räckhåll för vår buss?

89
00:05:02,520 --> 00:05:04,610
Tja, funktionsavstånd -

90
00:05:04,610 --> 00:05:08,770
så pendelpunktavstånd, som går i
latitud och longitud, kommer

91
00:05:08,770 --> 00:05:12,030
beräkna avståndet från den aktuella
position för transfer till

92
00:05:12,030 --> 00:05:15,850
pekar som du anger med det
given latitud och longitud.

93
00:05:15,850 --> 00:05:19,180
Så du kan använda detta för att beräkna
avstånd från buss till

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

95
00:05:20,310 --> 00:05:24,040
>> Men hur vet du var
passagerarna är?

96
00:05:24,040 --> 00:05:27,510
Tja, det är där vi måste
redigera populate funktion.

97
00:05:27,510 --> 00:05:32,500
Platser Fylla alla anställda
och passagerare i världen,

98
00:05:32,500 --> 00:05:36,300
och in i kartan, men inte
förvara sin plats.

99
00:05:36,300 --> 00:05:39,850
Så kanske kan du lagra sina
placera märken och markörer

100
00:05:39,850 --> 00:05:41,570
i någon global array.

101
00:05:41,570 --> 00:05:45,780
>> Nu finns det redan är en global array
lagra information från passagerarna.

102
00:05:45,780 --> 00:05:49,960
Passagerarna array lagrar vardera
passagerarens namn och deras hus.

103
00:05:49,960 --> 00:05:54,985
Så kanske du kan lägga till några parametrar
det till passagerarobjekt.

104
00:05:54,985 --> 00:05:59,290
>> För att hjälpa oss att upptäcka alla passagerare
inom räckhåll för vår buss, låt oss

105
00:05:59,290 --> 00:06:02,500
loop genom alla passagerare
i passagerar array.

106
00:06:02,500 --> 00:06:07,790
En for-loop i JavaScript kan se
ungefär så här, mycket lik

107
00:06:07,790 --> 00:06:12,910
de för slinga i C. Eller vi kan använda en
alternativ för slingstruktur.

108
00:06:12,910 --> 00:06:17,130
>> För var jag i rad, där jag
fortfarande kommer att vara indexet.

109
00:06:17,130 --> 00:06:20,740
Men du behöver inte ange
arrayen punktlängden

110
00:06:20,740 --> 00:06:23,310
tillstånd, och jag plus plus.

111
00:06:23,310 --> 00:06:26,140
Varje passagerare läge är
som ges av deras plats märket.

112
00:06:26,140 --> 00:06:29,800
>> Men den plats märket inte är det
latitud och longitud.

113
00:06:29,800 --> 00:06:34,575
Vi måste komma åt dessa parametrar genom
få geometrin, med hjälp av get

114
00:06:34,575 --> 00:06:35,900
geometri på den plats märket.

115
00:06:35,900 --> 00:06:39,630
Och sedan när vi har geometri,
få antingen latitud eller

116
00:06:39,630 --> 00:06:42,600
longitud, med hjälp av dessa funktioner.

117
00:06:42,600 --> 00:06:45,680
>> Så nu vet vi hur man upptäcker om
passagerare inom

118
00:06:45,680 --> 00:06:47,920
spektrum av vår buss.

119
00:06:47,920 --> 00:06:52,050
När vi har dessa passagerare, vi ska
vill lägga till några passagerare som

120
00:06:52,050 --> 00:06:53,140
inom detta intervall.

121
00:06:53,140 --> 00:06:57,580
Vi vill låta dem hoppa på, och
ta en plats på vår buss, men bara

122
00:06:57,580 --> 00:06:59,640
om vi har tillräckligt med utrymme för dem.

123
00:06:59,640 --> 00:07:04,120
>> Skytteln dot säten array kommer
ange om platserna är tomma, eller

124
00:07:04,120 --> 00:07:05,890
som finns på den platsen.

125
00:07:05,890 --> 00:07:11,170
Så om en plats är tom, då
att stolen kommer att vara noll.

126
00:07:11,170 --> 00:07:15,930
Så iterera över sätena arrayen,
kontroll för tomma platser, lagring

127
00:07:15,930 --> 00:07:20,020
passagerare i dessa säten tills du
har inte några fler tomma platser.

128
00:07:20,020 --> 00:07:23,330
Och tyvärr, alla andra passagerare
kommer att behöva vänta på att

129
00:07:23,330 --> 00:07:26,000
Nästa gång bollen kommer runt.

130
00:07:26,000 --> 00:07:30,280
>> När de får på buss, vi vill ha
att ta bort sin plats märke, som

131
00:07:30,280 --> 00:07:32,540
är deras foto i 3D-världen.

132
00:07:32,540 --> 00:07:38,030
Om jag ville ta bort en plats mark p,
då skulle jag få alla funktioner

133
00:07:38,030 --> 00:07:42,790
från min jord, från Google Earth,
och sedan ta bort den specifika platsen

134
00:07:42,790 --> 00:07:45,910
Markera med hjälp av removeChild funktionen.

135
00:07:45,910 --> 00:07:51,360
Sedan slutligen, låt oss ta bort markeringen,
ikonen på 2D-kartan för alla

136
00:07:51,360 --> 00:07:53,650
passagerare som vi plockar upp.

137
00:07:53,650 --> 00:07:59,790
För att ta bort en markering, m, sedan ska jag
bara köra m dot setMap null.

138
00:07:59,790 --> 00:08:02,920
Gör detta för alla passagerare inom räckhåll,
och du är klar upphämtning.

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