1
00:00:00,000 --> 00:00:09,870

2
00:00:09,870 --> 00:00:13,360
>> ZAMYLA CHAN: No, sme tu,
posledný p-nastaviť CS50.

3
00:00:13,360 --> 00:00:17,040
Gratulujem sami od s
tak ďaleko od svojho prvého Dobrý deň,

4
00:00:17,040 --> 00:00:20,090
Svety a tlač Up
Pyramídy pre Mario.

5
00:00:20,090 --> 00:00:21,930
Urobil si webové stránky minulý týždeň.

6
00:00:21,930 --> 00:00:25,110
A my bude robiť iný
tento týždeň, ten, ktorý vám umožňuje

7
00:00:25,110 --> 00:00:28,570
jazdiť na Harvard areálu, vyberanie
s členmi CS50 zamestnancov a

8
00:00:28,570 --> 00:00:31,910
priviesť ich späť k ich
obytné domy.

9
00:00:31,910 --> 00:00:35,400
>> Teraz, minulý týždeň sme pracovali v PHP,
side jazyk servera.

10
00:00:35,400 --> 00:00:38,250
V tomto p-set, budeme sa predstavil
JavaScriptu, ktorý je

11
00:00:38,250 --> 00:00:40,610
na strane klienta jazyka.

12
00:00:40,610 --> 00:00:44,020
Takže poďme sa pozrieť na niektoré z
Distribúcia kód, ktorý sa pripravili

13
00:00:44,020 --> 00:00:46,210
ste v tomto p-set.

14
00:00:46,210 --> 00:00:49,700
V priečinku JavaScript, bude tam
byť banda súborov JavaScript.

15
00:00:49,700 --> 00:00:53,600
>> K dispozícii je buildings.js, ktorá obsahuje
rad budov po celom Harvarde

16
00:00:53,600 --> 00:00:57,340
Areál s ich informáciami
a pozície.

17
00:00:57,340 --> 00:01:01,630
Houses.js je rad Harvarde
bytové domy s ich

18
00:01:01,630 --> 00:01:04,030
zemepisnej šírky a dĺžky.

19
00:01:04,030 --> 00:01:08,600
Passengers.js obsahuje rad
cestujúci, členovia CS50 zamestnanci

20
00:01:08,600 --> 00:01:11,640
že budete dobývať do
ich obytné domy.

21
00:01:11,640 --> 00:01:16,450
>> Math3D.js, že obsahuje veľké množstvo
Funkcie robiť s pohybom.

22
00:01:16,450 --> 00:01:19,500
Ak ste matematicky zmýšľajúce, potom
Vítam vás pozrieť.

23
00:01:19,500 --> 00:01:23,530
Ale nemusíte rozumieť
všetko, čo tam je.

24
00:01:23,530 --> 00:01:26,710
Shuttle.js, ktorá sa zaoberá
pohyb raketoplánu.

25
00:01:26,710 --> 00:01:31,450
A index.html je domovská stránka, kde
všetko, čo sa deje, naozaj, kde

26
00:01:31,450 --> 00:01:33,610
užívateľ interakciu s webom.

27
00:01:33,610 --> 00:01:39,110
>> Service.css je CSS štýlov,
ktorý okrem Twitteri

28
00:01:39,110 --> 00:01:43,960
Bootstrap Knižnica, kontroly
ako index.html vyzerá.

29
00:01:43,960 --> 00:01:48,190
A potom tu máme tiež service.js, ktoré
obsahuje servisné funkcie pre

30
00:01:48,190 --> 00:01:49,010
Shuttle.

31
00:01:49,010 --> 00:01:53,010
A tu je miesto, kde budete mať
vyplnenie niektorých Do to-je.

32
00:01:53,010 --> 00:01:56,600
>> Teraz sa poďme pozrieť na objekty a
asociatívne polia v JavaScripte,

33
00:01:56,600 --> 00:01:59,360
ktorý pre všetky účely,
sú zameniteľné.

34
00:01:59,360 --> 00:02:03,030
Keby som chcel, aby sa objekt premennú
volal palička, by som

35
00:02:03,030 --> 00:02:04,290
vyhlásiť ju.

36
00:02:04,290 --> 00:02:09,350
A vo vnútri týchto zložených zátvoriek, by som
špecifikovať, jadro je jednorožec, drevo

37
00:02:09,350 --> 00:02:12,710
je čerešňa, a dĺžka je 13.

38
00:02:12,710 --> 00:02:16,370
>> Teraz som tiež prístup k hodnotám
objektov pomocou

39
00:02:16,370 --> 00:02:18,270
asociatívne pole notácie.

40
00:02:18,270 --> 00:02:22,610
Takže palička index jadro, možno nastaviť
ktorá sa rovná jednorožec, alebo

41
00:02:22,610 --> 00:02:24,710
skontrolujte, že keď budem potrebovať.

42
00:02:24,710 --> 00:02:28,890
Alebo môžem použiť operátor bodka
wand.wood rovná čerešňa, a

43
00:02:28,890 --> 00:02:30,280
a tak ďalej a tak ďalej.

44
00:02:30,280 --> 00:02:33,930
Takže vidíte, že asociatívne pole a
objekty v JavaScripte sa bude

45
00:02:33,930 --> 00:02:37,710
zameniteľné, a bude
príde celkom vhod.

46
00:02:37,710 --> 00:02:41,570
>> Potom vidíme rad domov
v buildings.js,

47
00:02:41,570 --> 00:02:43,870
opäť, pole objektov.

48
00:02:43,870 --> 00:02:48,500
Ak by som chcel urobiť celý rad najlepších
stavby na Harvard akademickej pôde, potom

49
00:02:48,500 --> 00:02:49,710
Chcel by som, aby to takto.

50
00:02:49,710 --> 00:02:55,250
Pomocou tohto objektu firmy, ak
Aj uložiť koreňový, meno, adresa,

51
00:02:55,250 --> 00:03:00,260
šírky a dĺžky pre každý
jeden objekt objekt.

52
00:03:00,260 --> 00:03:02,930
>> Poďme rýchlo hovoriť o premenných
v JavaScriptu.

53
00:03:02,930 --> 00:03:07,760
Rovnako ako PHP, JavaScript premenné
sú slabo alebo voľne zadali.

54
00:03:07,760 --> 00:03:14,120
Ak chcete vytvoriť lokálne premenné, môžete prefix
názov premennej s V-A-R, var.

55
00:03:14,120 --> 00:03:17,010
Teraz, v JavaScripte, bude funkcia
obmedziť rozsah ukazovateľa.

56
00:03:17,010 --> 00:03:20,600
Takže ak máte lokálne premenné v rámci
funkcie, potom ďalšie funkcie

57
00:03:20,600 --> 00:03:22,060
Nemožno pristupovať.

58
00:03:22,060 --> 00:03:26,090
>> Ale na rozdiel od C, slučky a podmienky nie
obmedziť rozsah ukazovateľa.

59
00:03:26,090 --> 00:03:30,600
Takže aj keď sa to deklarovať vnútri
stav, bude celá funkcia

60
00:03:30,600 --> 00:03:32,810
majú prístup k nemu.

61
00:03:32,810 --> 00:03:35,820
Teraz, bez var premenná
bude globálna.

62
00:03:35,820 --> 00:03:39,170
Takže ak ste práve deklarovať meno a
priradiť hodnotu, potom táto premenná

63
00:03:39,170 --> 00:03:41,900
bude globálne premenné
v JavaScriptu.

64
00:03:41,900 --> 00:03:48,480
>> Teraz, v domoch, máme asociatívne
Pole typu hostiteľ objektov, kde

65
00:03:48,480 --> 00:03:52,100
každý dom je len šírka
a dĺžky.

66
00:03:52,100 --> 00:03:55,140
Potom máme cestujúci
pole, čo je pole

67
00:03:55,140 --> 00:03:57,370
typu objektu cestujúceho.

68
00:03:57,370 --> 00:04:01,620
Takže každý cestujúci má užívateľa
meno, názov a dom.

69
00:04:01,620 --> 00:04:04,840
>> Všimnite si, že hovorím typu
cestujúcich, čo v skutočnosti znamená len

70
00:04:04,840 --> 00:04:08,150
že každý objekt má
Rovnaká dvojica kľúč hodnota.

71
00:04:08,150 --> 00:04:12,830
Takže každý objekt typu cestujúcich má
užívateľské meno, názov a dom.

72
00:04:12,830 --> 00:04:14,850
Takže to, čo potrebujeme, aby
urobiť pre p-set?

73
00:04:14,850 --> 00:04:20,779
No, musíme umožniť používateľom vybrať
hore zamestnancov, zobraziť všetky

74
00:04:20,779 --> 00:04:25,080
so zamestnancami, ktoré sú v súčasnej dobe
naše kyvadlová doprava, a je odísť.

75
00:04:25,080 --> 00:04:29,395
A potom budeme tiež hovoriť o ďalšie
funkcie, ktoré môžu byť realizované na

76
00:04:29,395 --> 00:04:30,980
Shuttle p-set.

77
00:04:30,980 --> 00:04:33,610
>> Ale poďme hovoriť o vyzdvihnutie prvý.

78
00:04:33,610 --> 00:04:37,480
Tváre CS50 zamestnanci boli
zasadil po celom areáli, kde každý

79
00:04:37,480 --> 00:04:41,750
tvár je implementovaný ako miesto značka
na 3D Zemi, a ako

80
00:04:41,750 --> 00:04:44,020
značka na 2D mape.

81
00:04:44,020 --> 00:04:47,880
Takže, keď používateľ klikne na Pickup
tlačidlo, chceme pridať blízkosti

82
00:04:47,880 --> 00:04:49,590
cestujúci do raketoplánu.

83
00:04:49,590 --> 00:04:53,650
A tiež chceme odstrániť svoje miesto
označiť zo sveta a odstrániť ich

84
00:04:53,650 --> 00:04:58,060
značka z mapy, čo naznačuje, že
sú v našom raketoplánu teraz.

85
00:04:58,060 --> 00:05:02,520
>> Tak ako sme sa zistiť, či cestujúci
sú v dosahu nášho raketoplánu?

86
00:05:02,520 --> 00:05:06,670
No, vzdialenostné funkcie, takže
shuttle.distance, odovzdaním

87
00:05:06,670 --> 00:05:10,630
zemepisnej šírky a dĺžky, sa vypočíta
vzdialenosť od aktuálnej polohy

88
00:05:10,630 --> 00:05:14,220
z raketoplánu do tej miery, že
Zadáte sa, že vzhľadom

89
00:05:14,220 --> 00:05:15,860
zemepisnej šírky a dĺžky.

90
00:05:15,860 --> 00:05:19,180
Takže môžete použiť na výpočet
vzdialenosť od raketoplánu, aby

91
00:05:19,180 --> 00:05:20,310
cestujúci.

92
00:05:20,310 --> 00:05:24,040
>> Ale ako viete, kde
cestujúci sú?

93
00:05:24,040 --> 00:05:27,510
No, to je miesto, kde budeme musieť
upraviť funkciu naplniť.

94
00:05:27,510 --> 00:05:32,500
Naplniť umiestni všetkých zamestnancov
cestujúcich do sveta

95
00:05:32,500 --> 00:05:36,300
a do mapy, ale nie je
uložiť ich umiestnenie.

96
00:05:36,300 --> 00:05:39,850
Takže možno si môžete uložiť svoje
miesto známky a značky

97
00:05:39,850 --> 00:05:41,570
v niektorých globálnom poli.

98
00:05:41,570 --> 00:05:45,780
>> Teraz už existuje globálne polia
ukladanie informácií od cestujúcich.

99
00:05:45,780 --> 00:05:49,960
Obchody Cestujúci pole každý
Meno cestujúceho a ich dom.

100
00:05:49,960 --> 00:05:54,985
Takže možno, môžete pridať pár parametrov
tam objekty pre cestujúcich.

101
00:05:54,985 --> 00:05:58,150
>> Ak nám chcete pomôcť odhaliť všetkých cestujúcich
v rozsahu našej

102
00:05:58,150 --> 00:06:02,485
kyvadlová doprava, poďme slučka cez všetky
cestujúci v poli cestujúcich.

103
00:06:02,485 --> 00:06:07,790
Pre slučky v JavaScripte môže vyzerať
niečo také, veľmi podobné

104
00:06:07,790 --> 00:06:13,200
tých, pre slučky v C. Alebo môžeme použiť
alternatíva pre štruktúru slučky, pre

105
00:06:13,200 --> 00:06:18,680
var aj v poli, kde sa bude aj naďalej
index, ale nemusíte sa

106
00:06:18,680 --> 00:06:23,310
určiť Array.length
stav a i + +.

107
00:06:23,310 --> 00:06:26,130
>> Umiestnenie Každý cestujúci je
vzhľadom na ich miesto značkou.

108
00:06:26,130 --> 00:06:29,800
Ale miesto známka nie je
zemepisnej šírky a dĺžky.

109
00:06:29,800 --> 00:06:34,170
Máme prístup k týmto parametre
získanie geometria, pomocou get

110
00:06:34,170 --> 00:06:38,180
geometrie na mieste značku, a potom
akonáhle budeme mať geometriu, ako

111
00:06:38,180 --> 00:06:42,580
buď šírka alebo dĺžka
pomocou týchto funkcií.

112
00:06:42,580 --> 00:06:45,680
>> Takže teraz vieme, ako zistiť, či
cestujúci sú v rámci

113
00:06:45,680 --> 00:06:47,920
Rozsah nášho raketoplánu.

114
00:06:47,920 --> 00:06:52,050
Akonáhle budeme mať tých cestujúcich, budeme
Chcete pridať nejaké cestujúcich, ktoré sú

115
00:06:52,050 --> 00:06:53,140
v tomto rozsahu.

116
00:06:53,140 --> 00:06:57,580
Chceme, aby mohli naskočiť a vziať
sídlo na našej raketoplánu, ale iba

117
00:06:57,580 --> 00:06:59,630
ak budeme mať dostatok priestoru k nim.

118
00:06:59,630 --> 00:07:04,120
>> Shuttle.seats pole bude ukazovať
či sedadlá sú prázdne, alebo

119
00:07:04,120 --> 00:07:05,890
ktorý je v tomto sedadle.

120
00:07:05,890 --> 00:07:11,160
Takže, ak je sedadlo prázdne, potom
že sídlo bude mať hodnotu null.

121
00:07:11,160 --> 00:07:15,930
Takže iterácii cez pole sedadlá,
kontrola prázdnych miest, skladovanie

122
00:07:15,930 --> 00:07:20,020
cestujúci do týchto miest, kým sa
nemajú žiadne ďalšie prázdne miesta.

123
00:07:20,020 --> 00:07:23,330
A bohužiaľ, všetky ostatné cestujúci
bude musieť počkať

124
00:07:23,330 --> 00:07:26,000
nabudúce raketoplán príde.

125
00:07:26,000 --> 00:07:30,280
>> Akonáhle sa dostanete na raketopláne, budeme chcieť
odstrániť ich značku miesta, ktoré

126
00:07:30,280 --> 00:07:32,580
je ich fotografie v 3D svete.

127
00:07:32,580 --> 00:07:38,030
Ak by som chcel odstrániť miesto známky p,
potom by som dostať všetky funkcie

128
00:07:38,030 --> 00:07:42,820
z môjho Zeme, z Google Earth,
a potom odstrániť, že konkrétne miesto

129
00:07:42,820 --> 00:07:45,910
označiť pomocou funkcie removeChild.

130
00:07:45,910 --> 00:07:51,360
Potom konečne, poďme odstrániť značku,
ikona na 2D mape, pre všetky

131
00:07:51,360 --> 00:07:53,650
cestujúcich, ktoré sme vyzdvihnúť.

132
00:07:53,650 --> 00:07:59,790
>> Ak chcete odstrániť marker m, potom budem
stačí spustiť m.setMap null.

133
00:07:59,790 --> 00:08:03,670
Urob to pre všetkých cestujúcich v dosahu,
a vy ste skončil pickup.

134
00:08:03,670 --> 00:08:07,890
Funkcie tabuľka by sa mala zobraziť všetky
cestujúcich, ktoré sú vo vašom

135
00:08:07,890 --> 00:08:11,000
kyvadlová doprava, a prázdne miesto, ak je prázdna.

136
00:08:11,000 --> 00:08:14,420
Takže graf by mal iterácii
shuttle.seats, zobrazenie

137
00:08:14,420 --> 00:08:21,350
Informácie o cestujúcich pre každý index,
a prázdne miesto, ak je, že index je null.

138
00:08:21,350 --> 00:08:26,160
>> Teraz, keď text HTML je kladený vnútri
JavaScript premenná, potom pomocou

139
00:08:26,160 --> 00:08:31,950
document.getElementById, graf môže
upraviť vnútorné kód HTML, ktorý daný

140
00:08:31,950 --> 00:08:36,140
prvok priradením
HTML text

141
00:08:36,140 --> 00:08:40,840
document.getElementById vnútorné HTML variabilný.

142
00:08:40,840 --> 00:08:46,180
Keď používateľ klikne na tlačidlo Drop Off
v index.html, bude to volanie

143
00:08:46,180 --> 00:08:47,160
Funkcie dropoff.

144
00:08:47,160 --> 00:08:49,510
A to je našou úlohou realizovať to.

145
00:08:49,510 --> 00:08:54,150
>> Vo údajov o opustenie, budeme chcieť odstrániť akékoľvek
cestujúci z raketoplánu iba vtedy, ak

146
00:08:54,150 --> 00:08:58,740
sme v rozsahu svojho určenia,
ich obytný dom.

147
00:08:58,740 --> 00:09:03,300
Takže dropoff bude musieť skontrolovať, či
Kyvadlová doprava je v dosahu niektorej z

148
00:09:03,300 --> 00:09:08,200
domy, a odstráňte potreby
cestujúci z raketoplánu.

149
00:09:08,200 --> 00:09:11,020
Tak ako sme sa skontrolovať, či sme
v rade iných domov?

150
00:09:11,020 --> 00:09:16,630
No, ešte raz, budeme využívať v
shuttle.distance funkcie, odovzdaním

151
00:09:16,630 --> 00:09:20,990
zemepisnej šírky a dĺžky z bodu
že sme kontrolu proti.

152
00:09:20,990 --> 00:09:22,730
>> Ale čo sú tie body?

153
00:09:22,730 --> 00:09:27,210
No, domy polia, ak si spomeniete
v houses.js, ukladá

154
00:09:27,210 --> 00:09:32,790
zemepisná šírka a dĺžka každého domu
asociatívne pole, kde každý

155
00:09:32,790 --> 00:09:35,980
Obsah je názov tohto domu.

156
00:09:35,980 --> 00:09:37,590
Potom odstrániť cestujúcich -

157
00:09:37,590 --> 00:09:41,820
dobre, len keď sme v rozsahu ich
dom, ktorý chcú ísť.

158
00:09:41,820 --> 00:09:46,380
Takže znovu, nezabudnite, že cestujúci
ukladá dom, ktorý každý cestujúci

159
00:09:46,380 --> 00:09:48,850
chce ísť.

160
00:09:48,850 --> 00:09:51,670
Ak sú v dosahu ich
dom, potom budeme odstrániť, aby

161
00:09:51,670 --> 00:09:57,200
Cestujúci z shuttle.seats a sady
ich postavenie v poli na hodnotu null.

162
00:09:57,200 --> 00:10:00,220
>> Teraz poďme hovoriť o niektorých ďalších funkciách
, Ktoré môžu byť vykonávané v

163
00:10:00,220 --> 00:10:02,690
CS50 Shuttle p-set.

164
00:10:02,690 --> 00:10:05,850
Tam je bodový systém, kedy
budete mať prehľad o tom, koľko

165
00:10:05,850 --> 00:10:07,520
body užívateľ.

166
00:10:07,520 --> 00:10:11,120
Pre vypadnutiu cestujúcich
úspešne, môžu získať body.

167
00:10:11,120 --> 00:10:15,100
Ale snažia vysadiť cestujúcich
tam, kde nie je žiadny dom v okolí,

168
00:10:15,100 --> 00:10:16,980
dobre, že môže dostať penalizáciu za to.

169
00:10:16,980 --> 00:10:21,790
Tak snáď chcete sledovať
body v globálne premenné.

170
00:10:21,790 --> 00:10:25,970
>> Môžete implementovať snáď časovač, kde
užívateľ má určité množstvo

171
00:10:25,970 --> 00:10:29,800
čas zdvihnúť a odísť A
určitý počet cestujúcich.

172
00:10:29,800 --> 00:10:33,280
Možno, že dokonca integrovať tento
s bodovým systémom.

173
00:10:33,280 --> 00:10:39,970
Alebo si môžete upraviť graf taký, že
cestujúci sú radené podľa dome.

174
00:10:39,970 --> 00:10:45,250
Tak to by asi bolo trochu
fungovať na shuttle.seats.

175
00:10:45,250 --> 00:10:49,240
>> Môžete implementovať lietanie funkciu,
kde v prípade, že používateľ zadá Konami

176
00:10:49,240 --> 00:10:53,460
kód, potom raketoplán zdvihne
pozemné a kyvadlová doprava môže lietať.

177
00:10:53,460 --> 00:10:58,890
Ale pre bezpečné odídu, najlepšie, aby sa
Raketoplán pristane na jeho kolesá na

178
00:10:58,890 --> 00:11:00,700
zem ako prvý.

179
00:11:00,700 --> 00:11:05,910
Môžete tiež vykonať teleportáciu,
kde urobíte rozbaľovací zoznam dole

180
00:11:05,910 --> 00:11:08,380
budovy v index.html.

181
00:11:08,380 --> 00:11:12,270
A výberom jednej z tých,
užívateľ bude prevezený do

182
00:11:12,270 --> 00:11:14,220
že stavba na akademickej pôde.

183
00:11:14,220 --> 00:11:16,760
OK, aj keď, cestovať cez
steny niektorých

184
00:11:16,760 --> 00:11:19,290
stavby na vašej ceste tam.

185
00:11:19,290 --> 00:11:22,960
>> Môžete tiež zmeniť rýchlosť
kyvadlová doprava, čo umožňuje užívateľovi zvýšiť

186
00:11:22,960 --> 00:11:25,490
alebo zníženie rýchlosti.

187
00:11:25,490 --> 00:11:28,840
Možno budete chcieť globálne premennú
sledovať, koľko paliva

188
00:11:28,840 --> 00:11:31,520
Kyvadlová doprava má klesajúci
to, ako idete ďalej.

189
00:11:31,520 --> 00:11:35,860
Akonáhle dosiahnete nuly, aj keď raketoplán
nebude schopný sa pohybovať, ak ste

190
00:11:35,860 --> 00:11:40,610
natankoval, snáď pomocou tlačidla alebo
dokonca vytvoriť svoj vlastný čerpacie stanice.

191
00:11:40,610 --> 00:11:43,240
>> Ale to rozhodne nie je
vyčerpávajúci zoznam.

192
00:11:43,240 --> 00:11:46,340
Pozrite sa na spec pre plné
zoznam, alebo napríklad navrhnúť

193
00:11:46,340 --> 00:11:47,840
vlastný na vašej TF.

194
00:11:47,840 --> 00:11:48,950
Nebo je limit.

195
00:11:48,950 --> 00:11:53,110
Toto je vaša posledná CS50 p-set,
takže baviť sa s ním.

196
00:11:53,110 --> 00:11:56,360
To bolo CS50 Shuttle.

197
00:11:56,360 --> 00:11:59,230
>> Musím povedať, že to bolo potešenie
takže to pre vás

198
00:11:59,230 --> 00:12:00,400
Produkčný tím.

199
00:12:00,400 --> 00:12:04,330
A dúfam, že ste
si ich, rovnako.

200
00:12:04,330 --> 00:12:06,040
Volám sa Zamyla.

201
00:12:06,040 --> 00:12:08,310
A to bolo CS50.

202
00:12:08,310 --> 00:12:16,363