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

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

3
00:00:09,880 --> 00:00:13,360
>> LUIDSPREKER 1: Nou, hier zijn we,
de laatste P set in CS50.

4
00:00:13,360 --> 00:00:17,040
Feliciteer jezelf van het hebben
zo ver gekomen sinds de eerste hello

5
00:00:17,040 --> 00:00:20,090
werelden en printen
piramides voor Mario.

6
00:00:20,090 --> 00:00:21,930
U heeft een website vorige week.

7
00:00:21,930 --> 00:00:25,110
En we gaan het maken van een ander
deze week, een die u toelaat om

8
00:00:25,110 --> 00:00:28,570
rijden rond de campus van Harvard, het plukken
up CS50 medewerkers, en

9
00:00:28,570 --> 00:00:31,910
brengen ze terug naar hun
woonhuizen.

10
00:00:31,910 --> 00:00:35,400
>> Nu vorige week hebben we gewerkt in PHP,
een server-side taal.

11
00:00:35,400 --> 00:00:38,250
Voor deze P set, wij worden geïntroduceerd
JavaScript, dat is een

12
00:00:38,250 --> 00:00:40,600
client-side taal.

13
00:00:40,600 --> 00:00:44,010
Dus laten we eens een kijkje bij enkele van de
verdeelsleutel die wordt verstrekt aan

14
00:00:44,010 --> 00:00:46,210
u voor deze P set.

15
00:00:46,210 --> 00:00:49,700
>> In de map JavaScript, zal er
zijn een stelletje van JavaScript-bestanden.

16
00:00:49,700 --> 00:00:53,600
Er is buildings.js, die een bevat
reeks van gebouwen rond Harvard

17
00:00:53,600 --> 00:00:57,340
campus, met hun informatie
en positie.

18
00:00:57,340 --> 00:01:01,630
Houses.js is een array van Harvard
woonhuizen, met hun

19
00:01:01,630 --> 00:01:04,030
lengte-en breedtegraden.

20
00:01:04,030 --> 00:01:07,020
Passengers.js bevat een
reeks van passagiers -

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

22
00:01:08,600 --> 00:01:11,640
dat je in het terugbrengen naar
hun woonhuizen.

23
00:01:11,640 --> 00:01:16,450
>> Math3D.js, dat veel bevat
functies met de beweging.

24
00:01:16,450 --> 00:01:19,500
Als je wiskundig minded,
dan ben ik blij met u een kijkje nemen.

25
00:01:19,500 --> 00:01:23,530
Maar je hoeft niet te begrijpen
alles daar.

26
00:01:23,530 --> 00:01:26,710
Shuttle.js, dat zich bezighoudt met
beweging van de shuttle.

27
00:01:26,710 --> 00:01:31,450
En index.html is de startpagina waar
alles gebeurt, echt, waar de

28
00:01:31,450 --> 00:01:33,610
gebruiker is de interactie met de site.

29
00:01:33,610 --> 00:01:39,110
>> Service.css is de CSS-stylesheet,
die naast de Twitter

30
00:01:39,110 --> 00:01:43,960
Bootstrap bibliotheek, controles
hoe index.html looks.

31
00:01:43,960 --> 00:01:48,190
En dan hebben we ook service.js, die
bevat service functies voor

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

33
00:01:49,010 --> 00:01:53,010
En hier is waar je naartoe gaat worden
vullen wat van de dos.

34
00:01:53,010 --> 00:01:56,600
>> Laten we nu eens kijken naar voorwerpen en
associatieve arrays in JavaScript,

35
00:01:56,600 --> 00:01:59,360
die voor alle doeleinden
uitwisselbaar.

36
00:01:59,360 --> 00:02:03,030
Als ik wilde een object maken een variabele
riep een toverstaf, ik zou

37
00:02:03,030 --> 00:02:04,290
verklaren.

38
00:02:04,290 --> 00:02:08,789
En binnen die accolades zou ik
geef de kern is eenhoorn.

39
00:02:08,789 --> 00:02:10,220
Het hout is kers.

40
00:02:10,220 --> 00:02:12,710
En de lengte is 13.

41
00:02:12,710 --> 00:02:16,370
>> Nu kan ik ook toegang tot waarden
voorwerpen met

42
00:02:16,370 --> 00:02:18,270
associatieve array notatie.

43
00:02:18,270 --> 00:02:22,610
Dus toverstok index kern, kan ik
dat gelijk is aan eenhoorn, of

44
00:02:22,610 --> 00:02:24,710
controleren dat, als ik nodig heb.

45
00:02:24,710 --> 00:02:26,510
Of ik kan de operator punt te gebruiken.

46
00:02:26,510 --> 00:02:30,280
Wand dot hout is gelijk aan kersen,
enzovoort, enzovoort.

47
00:02:30,280 --> 00:02:33,930
Zo zie je dat associatieve arrays en
objecten in JavaScript gaat worden

48
00:02:33,930 --> 00:02:37,720
verwisselbaar, en zal
pas komen.

49
00:02:37,720 --> 00:02:41,570
>> Dan zien we een reeks van gebouwen
in buildings.js.

50
00:02:41,570 --> 00:02:43,870
Nogmaals, een array van objecten.

51
00:02:43,870 --> 00:02:48,500
Als ik wilde een array van de beste make-
gebouwen op campus van Harvard, dan

52
00:02:48,500 --> 00:02:49,710
Ik zou het als volgt.

53
00:02:49,710 --> 00:02:55,250
Met behulp van dit object notatie, waar
Ik bewaar de wortel, naam, adres,

54
00:02:55,250 --> 00:03:00,260
breedtegraad, lengtegraad en voor elke
enkel gebouw object.

55
00:03:00,260 --> 00:03:02,930
>> Laten we snel praten over variabelen
in JavaScript.

56
00:03:02,930 --> 00:03:07,760
Zoals PHP, JavaScript variabelen
zijn zwak of losjes getypt.

57
00:03:07,760 --> 00:03:14,120
Om een ​​lokale variabele maken, prefix u
de naam van de variabele met de V-A-R, var.

58
00:03:14,120 --> 00:03:17,010
>> Nu in JavaScript, functies
de reikwijdte van variabelen.

59
00:03:17,010 --> 00:03:20,600
Dus als je een lokale variabele binnen
een functie dan andere functies

60
00:03:20,600 --> 00:03:22,060
kan geen toegang.

61
00:03:22,060 --> 00:03:26,090
Maar in tegenstelling tot C, loops en voorwaarden niet
de reikwijdte van de variabele.

62
00:03:26,090 --> 00:03:30,600
>> Dus zelfs als je het verklaren binnenkant van een
toestand, de hele functie

63
00:03:30,600 --> 00:03:32,810
er toegang toe hebben.

64
00:03:32,810 --> 00:03:35,820
Nu zonder var, de variabele
wereldwijd zullen zijn.

65
00:03:35,820 --> 00:03:39,170
Dus als je gewoon verklaren de naam en
een waarde toekennen, dan is dat variabele

66
00:03:39,170 --> 00:03:41,900
een globale variabele
in JavaScript.

67
00:03:41,900 --> 00:03:48,480
>> Nu in huizen, hebben we een associatieve
scala aan huis van het type objecten, waar

68
00:03:48,480 --> 00:03:52,100
elk huis is slechts een breedte
en een lengtegraad.

69
00:03:52,100 --> 00:03:55,140
Dan hebben we de passagiers
matrix, die een array

70
00:03:55,140 --> 00:03:57,370
van het type object passagier.

71
00:03:57,370 --> 00:04:01,620
Dus elke passagier een gebruikersnaam,
een naam, en een huis.

72
00:04:01,620 --> 00:04:04,840
Merk op dat ik ben het zien van het type
passagier, wat eigenlijk gewoon betekent

73
00:04:04,840 --> 00:04:08,150
dat elk object heeft de
dezelfde toets waarde paar.

74
00:04:08,150 --> 00:04:12,830
Dus elk object van het type passagier
een gebruikersnaam, een naam, en een huis.

75
00:04:12,830 --> 00:04:14,850
>> Dus wat hebben we nodig om
doen voor de P set?

76
00:04:14,850 --> 00:04:20,779
Nou, we moeten gebruikers in staat op te halen
up medewerkers, om al weer te geven

77
00:04:20,779 --> 00:04:25,090
de medewerkers die momenteel in
onze shuttle, en om ze af te zetten.

78
00:04:25,090 --> 00:04:29,280
En dan gaan we ook praten over extra
functies die kunnen worden uitgevoerd voor

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

80
00:04:30,980 --> 00:04:33,610
>> Maar laten we praten over pickup eerste.

81
00:04:33,610 --> 00:04:37,480
De gezichten van CS50 personeel zijn geweest
geplant over de campus, waarbij elke

82
00:04:37,480 --> 00:04:41,750
gezicht is geïmplementeerd als een plek merk
op de 3D aarde, en als een

83
00:04:41,750 --> 00:04:44,030
marker op de 2D-kaart.

84
00:04:44,030 --> 00:04:47,880
Dus wanneer de gebruiker de pick-up klikt
knop, willen we naar het nabijgelegen voegen

85
00:04:47,880 --> 00:04:49,590
passagiers naar de shuttle.

86
00:04:49,590 --> 00:04:53,650
En we willen ook hun plaats te verwijderen
markeren van de wereld, en te verwijderen van hun

87
00:04:53,650 --> 00:04:58,060
marker van de kaart, wat aangeeft dat
ze in onze shuttle nu.

88
00:04:58,060 --> 00:05:02,520
>> Dus hoe kunnen we detecteren als passagiers
zich binnen het bereik van onze shuttle?

89
00:05:02,520 --> 00:05:04,610
Nou, de functie afstand -

90
00:05:04,610 --> 00:05:08,770
dus shuttle dot afstand, passeren in
de lengte-en breedtegraad, zal

91
00:05:08,770 --> 00:05:12,030
bereken de afstand van de huidige
positie van de shuttle naar de

92
00:05:12,030 --> 00:05:15,850
punt dat u hebt opgegeven met dat
gegeven lengte-en breedtegraad.

93
00:05:15,850 --> 00:05:19,180
Dus je kunt dit gebruiken om het berekenen van de
afstand van de shuttle naar de

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

95
00:05:20,310 --> 00:05:24,040
>> Maar hoe weet je waar
de passagiers zijn?

96
00:05:24,040 --> 00:05:27,510
Nou, dat is waar we zullen moeten
bewerk het bevolken functie.

97
00:05:27,510 --> 00:05:32,500
Bevolken plaatst al de medewerkers
en de passagiers in de wereld,

98
00:05:32,500 --> 00:05:36,300
en in de kaart, maar niet
slaan hun locatie.

99
00:05:36,300 --> 00:05:39,850
Dus misschien kun je slaan hun
Plaats merken en markers

100
00:05:39,850 --> 00:05:41,570
in sommige globale array.

101
00:05:41,570 --> 00:05:45,780
>> Nu al is er een globale array
het opslaan van informatie van de passagiers.

102
00:05:45,780 --> 00:05:49,960
De passagiers-array slaat elk
persoonsgegevens van passagiers en hun huis.

103
00:05:49,960 --> 00:05:54,985
Dus misschien kan je een paar parameters toevoegen
daar de passagier objecten.

104
00:05:54,985 --> 00:05:59,290
>> Om ons te helpen alle passagiers op te sporen
binnen het bereik van onze shuttle, laten we

105
00:05:59,290 --> 00:06:02,500
lus door alle passagiers
de passagiers array.

106
00:06:02,500 --> 00:06:07,790
Een lus in JavaScript kan uitzien
zoiets als dit, zeer vergelijkbaar met

107
00:06:07,790 --> 00:06:12,910
die voor de lus in C. Of kunnen we een gebruiken
alternatief voor lus structuur.

108
00:06:12,910 --> 00:06:17,130
>> Voor var i in array, waar ik
nog steeds de index zijn.

109
00:06:17,130 --> 00:06:20,740
Maar je hoeft niet te specificeren
de array dot lengte

110
00:06:20,740 --> 00:06:23,310
conditie, en ik plus plus.

111
00:06:23,310 --> 00:06:26,140
Locatie elke passagier is
gegeven door hun plaats mark.

112
00:06:26,140 --> 00:06:29,800
>> Maar de plaats merk is niet de
breedtegraad en de lengtegraad.

113
00:06:29,800 --> 00:06:34,575
We hebben om de parameters
verkrijgen van de geometrie, waarbij get

114
00:06:34,575 --> 00:06:35,900
geometrie op de plaats merk.

115
00:06:35,900 --> 00:06:39,630
En dan een keer hebben we de geometrie,
krijgen ofwel de breedtegraad of de

116
00:06:39,630 --> 00:06:42,600
lengte, met die functies.

117
00:06:42,600 --> 00:06:45,680
>> Dus nu weten we hoe om te detecteren of
passagiers zijn binnen

118
00:06:45,680 --> 00:06:47,920
bereik van onze shuttle.

119
00:06:47,920 --> 00:06:52,050
Zodra wij deze passagiers, zullen we
willen geen passagiers die zijn toe te voegen

120
00:06:52,050 --> 00:06:53,140
binnen dat bereik.

121
00:06:53,140 --> 00:06:57,580
We willen hen in staat stellen om op te springen, en
plaatsnemen op onze shuttle, maar alleen

122
00:06:57,580 --> 00:06:59,640
als we genoeg ruimte voor hen.

123
00:06:59,640 --> 00:07:04,120
>> De shuttle dot zetels array
aangeven of stoelen zijn leeg, of

124
00:07:04,120 --> 00:07:05,890
wie er in die plaats.

125
00:07:05,890 --> 00:07:11,170
Dus als een zitje leeg is, dan
die zitting zal nul zijn.

126
00:07:11,170 --> 00:07:15,930
Dus itereren over de stoelen array,
controleren op lege stoelen, opslaan

127
00:07:15,930 --> 00:07:20,020
passagiers in die zetels tot u
heb geen meer lege stoelen.

128
00:07:20,020 --> 00:07:23,330
En helaas, andere passagiers
zal moeten wachten tot de

129
00:07:23,330 --> 00:07:26,000
volgende keer dat de shuttle komt rond.

130
00:07:26,000 --> 00:07:30,280
>> Zodra ze op de shuttle te krijgen, we willen
naar hun plaats markering te verwijderen, die

131
00:07:30,280 --> 00:07:32,540
is hun foto in de 3D-wereld.

132
00:07:32,540 --> 00:07:38,030
Als ik wilde een plek mark p verwijderen,
dan zou ik alle functies te krijgen

133
00:07:38,030 --> 00:07:42,790
uit mijn aarde, van de Google Earth,
en verwijder dan die specifieke plaats

134
00:07:42,790 --> 00:07:45,910
markeren met de removeChild functie.

135
00:07:45,910 --> 00:07:51,360
Dan tot slot, laten we het verwijderen van de marker,
het pictogram op de 2D-kaart voor elke

136
00:07:51,360 --> 00:07:53,650
passagier die we oppakken.

137
00:07:53,650 --> 00:07:59,790
Om een ​​markering, m te verwijderen, dan zal ik
gewoon uitvoeren m dot setMap null.

138
00:07:59,790 --> 00:08:02,920
Doe dit voor alle passagiers binnen het bereik,
en u klaar bent pickup.

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