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

2
00:00:09,870 --> 00:00:13,360
>> ZAMYLA CHAN: No, jsme tady,
poslední p-nastavit CS50.

3
00:00:13,360 --> 00:00:17,040
Gratuluji sami od s
tak daleko od svého prvního Dobrý den,

4
00:00:17,040 --> 00:00:20,090
Světy a tisk Up
Pyramidy pro Mario.

5
00:00:20,090 --> 00:00:21,930
Udělal jsi webové stránky minulý týden.

6
00:00:21,930 --> 00:00:25,110
A my bude dělat jiný
tento týden, ten, který vám umožňuje

7
00:00:25,110 --> 00:00:28,570
jezdit na Harvard areálu, vybírání
se členy CS50 zaměstnanců a

8
00:00:28,570 --> 00:00:31,910
přivést je zpět k jejich
obytné domy.

9
00:00:31,910 --> 00:00:35,400
>> Nyní, minulý týden jsme pracovali v PHP,
side jazyk serveru.

10
00:00:35,400 --> 00:00:38,250
V tomto p-set, budeme se představil
JavaScriptu, který je

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

12
00:00:40,610 --> 00:00:44,020
Takže pojďme se podívat na některé z
Distribuce kód, který se připravili

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

14
00:00:46,210 --> 00:00:49,700
Ve složce JavaScript, bude tam
být banda souborů JavaScript.

15
00:00:49,700 --> 00:00:53,600
>> K dispozici je buildings.js, která obsahuje
řada budov po celém Harvardu

16
00:00:53,600 --> 00:00:57,340
Areál s jejich informacemi
a pozice.

17
00:00:57,340 --> 00:01:01,630
Houses.js je řada Harvardu
bytové domy s jejich

18
00:01:01,630 --> 00:01:04,030
zeměpisné šířky a délky.

19
00:01:04,030 --> 00:01:08,600
Passengers.js obsahuje řadu
cestující, členové CS50 zaměstnanci

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

21
00:01:11,640 --> 00:01:16,450
>> Math3D.js, že obsahuje velké množství
Funkce dělat s pohybem.

22
00:01:16,450 --> 00:01:19,500
Pokud jste matematicky smýšlející, pak
Vítám vás podívat.

23
00:01:19,500 --> 00:01:23,530
Ale nemusíte rozumět
všechno, co tam je.

24
00:01:23,530 --> 00:01:26,710
Shuttle.js, která se zabývá
pohyb raketoplánu.

25
00:01:26,710 --> 00:01:31,450
A index.html je domovská stránka, kde
všechno, co se děje, opravdu, kde

26
00:01:31,450 --> 00:01:33,610
uživatel interakci s webem.

27
00:01:33,610 --> 00:01:39,110
>> Service.css je CSS stylů,
který kromě Twitteru

28
00:01:39,110 --> 00:01:43,960
Bootstrap Knihovna, kontroly
jak index.html vypadá.

29
00:01:43,960 --> 00:01:48,190
A pak tu máme také service.js, které
obsahuje servisní funkce pro

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

31
00:01:49,010 --> 00:01:53,010
A tady je místo, kde budete mít
vyplnění některých Do to-je.

32
00:01:53,010 --> 00:01:56,600
>> Nyní se pojďme podívat na objekty a
asociativní pole v JavaScriptu,

33
00:01:56,600 --> 00:01:59,360
který pro všechny záměry a účely,
jsou zaměnitelné.

34
00:01:59,360 --> 00:02:03,030
Kdybych chtěl, aby se objekt proměnnou
volal hůlka, bych

35
00:02:03,030 --> 00:02:04,290
prohlásit ji.

36
00:02:04,290 --> 00:02:09,350
A uvnitř těchto složených závorek, bych
specifikovat, jádro je jednorožec, dřevo

37
00:02:09,350 --> 00:02:12,710
je třešeň, a délka je 13.

38
00:02:12,710 --> 00:02:16,370
>> Nyní jsem také přístup k hodnotám
objektů pomocí

39
00:02:16,370 --> 00:02:18,270
asociativní pole notace.

40
00:02:18,270 --> 00:02:22,610
Takže hůlka index jádro, lze nastavit
která se rovná jednorožec, nebo

41
00:02:22,610 --> 00:02:24,710
zkontrolujte, že když budu potřebovat.

42
00:02:24,710 --> 00:02:28,890
Nebo mohu použít operátor tečka
wand.wood rovná třešeň, a

43
00:02:28,890 --> 00:02:30,280
a tak dále a tak dále.

44
00:02:30,280 --> 00:02:33,930
Takže vidíte, že asociativní pole a
objekty v JavaScriptu se bude

45
00:02:33,930 --> 00:02:37,710
zaměnitelné, a bude
přijde docela vhod.

46
00:02:37,710 --> 00:02:41,570
>> Pak vidíme řadu domů
v buildings.js,

47
00:02:41,570 --> 00:02:43,870
opět, pole objektů.

48
00:02:43,870 --> 00:02:48,500
Pokud bych chtěl udělat celou řadu nejlepších
stavby na Harvard akademické půdě, pak

49
00:02:48,500 --> 00:02:49,710
Chtěl bych, aby to takto.

50
00:02:49,710 --> 00:02:55,250
Pomocí tohoto objektu zápis, pokud
I uložit kořenový, jméno, adresa,

51
00:02:55,250 --> 00:03:00,260
šířky a délky pro každý
jeden objekt objekt.

52
00:03:00,260 --> 00:03:02,930
>> Pojďme rychle mluvit o proměnných
v JavaScriptu.

53
00:03:02,930 --> 00:03:07,760
Stejně jako PHP, JavaScript proměnné
jsou slabě nebo volně zadali.

54
00:03:07,760 --> 00:03:14,120
Chcete-li vytvořit lokální proměnné, můžete prefix
název proměnné s V-A-R, var.

55
00:03:14,120 --> 00:03:17,010
Nyní, v JavaScriptu, bude funkce
omezit rozsah proměnné.

56
00:03:17,010 --> 00:03:20,600
Takže pokud máte lokální proměnné v rámci
funkce, pak další funkce

57
00:03:20,600 --> 00:03:22,060
Nelze přistupovat.

58
00:03:22,060 --> 00:03:26,090
>> Ale na rozdíl od C, smyčky a podmínky ne
omezit rozsah proměnné.

59
00:03:26,090 --> 00:03:30,600
Takže i když se to deklarovat uvnitř
stav, bude celá funkce

60
00:03:30,600 --> 00:03:32,810
mají přístup k němu.

61
00:03:32,810 --> 00:03:35,820
Nyní, bez var proměnná
bude globální.

62
00:03:35,820 --> 00:03:39,170
Takže pokud jste právě deklarovat jméno a
přiřadit hodnotu, pak tato proměnná

63
00:03:39,170 --> 00:03:41,900
bude globální proměnné
v JavaScriptu.

64
00:03:41,900 --> 00:03:48,480
>> Nyní, v domech, máme asociativní
Pole typu hostitel objektů, kde

65
00:03:48,480 --> 00:03:52,100
každý dům je jen šířka
a délky.

66
00:03:52,100 --> 00:03:55,140
Pak máme cestující
pole, což je pole

67
00:03:55,140 --> 00:03:57,370
typu objektu cestujícího.

68
00:03:57,370 --> 00:04:01,620
Takže každý cestující má uživatele
jméno, název a dům.

69
00:04:01,620 --> 00:04:04,840
>> Všimněte si, že říkám typu
cestujících, což ve skutečnosti znamená jen

70
00:04:04,840 --> 00:04:08,150
že každý objekt má
Stejná dvojice klíč hodnota.

71
00:04:08,150 --> 00:04:12,830
Takže každý objekt typu cestujících má
uživatelské jméno, název a dům.

72
00:04:12,830 --> 00:04:14,850
Takže to, co potřebujeme, aby
udělat pro p-set?

73
00:04:14,850 --> 00:04:20,779
No, musíme umožnit uživatelům vybrat
nahoru zaměstnanců, zobrazit všechny

74
00:04:20,779 --> 00:04:25,080
se zaměstnanci, které jsou v současné době
naše kyvadlová doprava, a je odjet.

75
00:04:25,080 --> 00:04:29,395
A pak budeme také mluvit o další
funkce, které mohou být realizovány na

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

77
00:04:30,980 --> 00:04:33,610
>> Ale pojďme mluvit o vyzvednutí první.

78
00:04:33,610 --> 00:04:37,480
Tváře CS50 zaměstnanci byli
zasadil po celém areálu, kde každý

79
00:04:37,480 --> 00:04:41,750
obličej je implementován jako místo značka
na 3D Zemi, a jak

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

81
00:04:44,020 --> 00:04:47,880
Takže, když uživatel klepne na Pickup
tlačítko, chceme přidat poblíž

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

83
00:04:49,590 --> 00:04:53,650
A také chceme odstranit své místo
označit ze světa a odstranit jejich

84
00:04:53,650 --> 00:04:58,060
značka z mapy, což naznačuje, že
jsou v našem raketoplánu nyní.

85
00:04:58,060 --> 00:05:02,520
>> Tak jak jsme se zjistit, zda cestující
jsou v dosahu našeho raketoplánu?

86
00:05:02,520 --> 00:05:06,670
No, vzdálenostní funkce, takže
shuttle.distance, předáním

87
00:05:06,670 --> 00:05:10,630
zeměpisné šířky a délky, se vypočítá
vzdálenost od aktuální polohy

88
00:05:10,630 --> 00:05:14,220
z raketoplánu do té míry, že
Zadáte se, že vzhledem

89
00:05:14,220 --> 00:05:15,860
zeměpisné šířky a délky.

90
00:05:15,860 --> 00:05:19,180
Takže můžete použít k výpočtu
vzdálenost od raketoplánu, aby

91
00:05:19,180 --> 00:05:20,310
cestující.

92
00:05:20,310 --> 00:05:24,040
>> Ale jak víte, kde
cestující jsou?

93
00:05:24,040 --> 00:05:27,510
No, to je místo, kde budeme muset
upravit funkci naplnit.

94
00:05:27,510 --> 00:05:32,500
Naplnit umístí všechny zaměstnance
cestujících do světa

95
00:05:32,500 --> 00:05:36,300
a do mapy, ale není
uložit jejich umístění.

96
00:05:36,300 --> 00:05:39,850
Takže možná si můžete uložit své
místo známky a značky

97
00:05:39,850 --> 00:05:41,570
v některých globálním poli.

98
00:05:41,570 --> 00:05:45,780
>> Nyní již existuje globální pole
ukládání informací od cestujících.

99
00:05:45,780 --> 00:05:49,960
Obchody Cestující pole každý
Jméno cestujícího a jejich dům.

100
00:05:49,960 --> 00:05:54,985
Takže možná, můžete přidat pár parametrů
tam objekty pro cestující.

101
00:05:54,985 --> 00:05:58,150
>> Chcete-li nám pomoci odhalit všechny cestující
v rozsahu naší

102
00:05:58,150 --> 00:06:02,485
kyvadlová doprava, pojďme smyčka přes všechny
cestující v poli cestujících.

103
00:06:02,485 --> 00:06:07,790
Pro smyčky v JavaScriptu může vypadat
něco takového, velmi podobné

104
00:06:07,790 --> 00:06:13,200
těch, pro smyčky v C. Nebo můžeme použít
alternativa pro strukturu smyčky, pro

105
00:06:13,200 --> 00:06:18,680
var i v poli, kde se bude i nadále
index, ale nemusíte se

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

107
00:06:23,310 --> 00:06:26,130
>> Umístění Každý cestující je
vzhledem k jejich místo značkou.

108
00:06:26,130 --> 00:06:29,800
Ale místo známka není
zeměpisné šířky a délky.

109
00:06:29,800 --> 00:06:34,170
Máme přístup k těmto parametry
získání geometrie, pomocí get

110
00:06:34,170 --> 00:06:38,180
geometrie na místě značku, a pak
jakmile budeme mít geometrii, jak

111
00:06:38,180 --> 00:06:42,580
buď šířka nebo délka
pomocí těchto funkcí.

112
00:06:42,580 --> 00:06:45,680
>> Takže teď víme, jak zjistit, zda
cestující jsou v rámci

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

114
00:06:47,920 --> 00:06:52,050
Jakmile budeme mít ty cestující, budeme
Chcete přidat nějaké cestující, které jsou

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čit a vzít
sídlo na naší raketoplánu, ale pouze

117
00:06:57,580 --> 00:06:59,630
pokud budeme mít dostatek prostoru k nim.

118
00:06:59,630 --> 00:07:04,120
>> Shuttle.seats pole bude ukazovat
zda sedadla jsou prázdná, nebo

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

120
00:07:05,890 --> 00:07:11,160
Takže, pokud je sedadlo prázdné, pak
že sídlo bude mít hodnotu null.

121
00:07:11,160 --> 00:07:15,930
Takže iteraci přes pole sedadla,
kontrola prázdných míst, skladování

122
00:07:15,930 --> 00:07:20,020
cestující do těchto míst, dokud se
nemají žádné další prázdná místa.

123
00:07:20,020 --> 00:07:23,330
A bohužel, všechny ostatní cestující
bude muset počkat

124
00:07:23,330 --> 00:07:26,000
příště raketoplán přijde.

125
00:07:26,000 --> 00:07:30,280
>> Jakmile se dostanete na raketoplánu, budeme chtít
odstranit jejich značku místa, které

126
00:07:30,280 --> 00:07:32,580
je jejich fotografie ve 3D světě.

127
00:07:32,580 --> 00:07:38,030
Pokud bych chtěl odstranit místo známky p,
pak bych dostat všechny funkce

128
00:07:38,030 --> 00:07:42,820
z mého Země, z Google Earth,
a pak odstranit, že konkrétní místo

129
00:07:42,820 --> 00:07:45,910
označit pomocí funkce removeChild.

130
00:07:45,910 --> 00:07:51,360
Pak konečně, pojďme odstranit značku,
ikona na 2D mapě, pro všechny

131
00:07:51,360 --> 00:07:53,650
cestujících, které jsme vyzvednout.

132
00:07:53,650 --> 00:07:59,790
>> Chcete-li odstranit marker m, pak budu
stačí spustit m.setMap null.

133
00:07:59,790 --> 00:08:03,670
Udělej to pro všechny cestující v dosahu,
a vy jste skončil pickup.

134
00:08:03,670 --> 00:08:07,890
Funkce tabulka by se měla zobrazit všechny
cestujících, které jsou ve vašem

135
00:08:07,890 --> 00:08:11,000
kyvadlová doprava, a prázdné místo, pokud je prázdná.

136
00:08:11,000 --> 00:08:14,420
Takže graf by měl iteraci
shuttle.seats, zobrazení

137
00:08:14,420 --> 00:08:21,350
Informace o cestujících pro každý index,
a prázdné místo, pokud je, že index je null.

138
00:08:21,350 --> 00:08:26,160
>> Nyní, když text HTML je kladen uvnitř
JavaScript proměnná, pak pomocí

139
00:08:26,160 --> 00:08:31,950
document.getElementById, graf může
upravit vnitřní kód HTML, který daný

140
00:08:31,950 --> 00:08:36,140
prvek přiřazením
HTML text

141
00:08:36,140 --> 00:08:40,840
document.getElementById vnitřní HTML variabilní.

142
00:08:40,840 --> 00:08:46,180
Když uživatel klikne na tlačítko Drop Off
v index.html, bude to volání

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

144
00:08:47,160 --> 00:08:49,510
A to je naším úkolem realizovat to.

145
00:08:49,510 --> 00:08:54,150
>> Ve údajů o opuštění, budeme chtít odstranit jakékoliv
cestující z raketoplánu pouze tehdy, pokud

146
00:08:54,150 --> 00:08:58,740
jsme v rozsahu svého určení,
jejich obytný dům.

147
00:08:58,740 --> 00:09:03,300
Takže dropoff bude muset zkontrolovat, zda
Kyvadlová doprava je v dosahu některé z

148
00:09:03,300 --> 00:09:08,200
domy, a odstraňte potřeby
cestující z raketoplánu.

149
00:09:08,200 --> 00:09:11,020
Tak jak jsme se zkontrolovat, zda jsme
v řadě jiných domů?

150
00:09:11,020 --> 00:09:16,630
No, ještě jednou, budeme využívat v
shuttle.distance funkce, předáním

151
00:09:16,630 --> 00:09:20,990
zeměpisné šířky a délky z bodu
že jsme kontrolu proti.

152
00:09:20,990 --> 00:09:22,730
>> Ale co jsou ty body?

153
00:09:22,730 --> 00:09:27,210
No, domy pole, pokud si vzpomenete
v houses.js, ukládá

154
00:09:27,210 --> 00:09:32,790
zeměpisná šířka a délka každého domu
asociativní pole, kde každý

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

156
00:09:35,980 --> 00:09:37,590
Pak odstranit cestujících -

157
00:09:37,590 --> 00:09:41,820
dobře, jen když jsme v rozsahu jejich
dům, který chtějí jít.

158
00:09:41,820 --> 00:09:46,380
Takže znovu, nezapomeňte, že cestující
ukládá dům, který každý cestující

159
00:09:46,380 --> 00:09:48,850
chce jít.

160
00:09:48,850 --> 00:09:51,670
Pokud jsou v dosahu jejich
dům, pak budeme odstranit, aby

161
00:09:51,670 --> 00:09:57,200
Cestující z shuttle.seats a sady
jejich postavení v poli na hodnotu null.

162
00:09:57,200 --> 00:10:00,220
>> Nyní pojďme hovořit o některých dalších funkcích
, které mohou být prováděny 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, kdy
budete mít přehled o tom, kolik

165
00:10:05,850 --> 00:10:07,520
body uživatel.

166
00:10:07,520 --> 00:10:11,120
Pro vypadnutí cestujících
úspěšně, mohou získat body.

167
00:10:11,120 --> 00:10:15,100
Ale snaží vysadit cestující
tam, kde není žádný dům v okolí,

168
00:10:15,100 --> 00:10:16,980
dobře, že může dostat penalizaci za to.

169
00:10:16,980 --> 00:10:21,790
Tak snad chcete sledovat
body v globální proměnné.

170
00:10:21,790 --> 00:10:25,970
>> Můžete implementovat snad časovač, kde
uživatel má určité množství

171
00:10:25,970 --> 00:10:29,800
čas zvednout a odjet A
určitý počet cestujících.

172
00:10:29,800 --> 00:10:33,280
Možná, že dokonce integrovat tento
s bodovým systémem.

173
00:10:33,280 --> 00:10:39,970
Nebo si můžete upravit graf takový, že
cestující jsou řazeny podle domě.

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

175
00:10:45,250 --> 00:10:49,240
>> Můžete implementovat létání funkci,
kde v případě, že uživatel zadá Konami

176
00:10:49,240 --> 00:10:53,460
kód, pak raketoplán zvedne
pozemní a kyvadlová doprava může létat.

177
00:10:53,460 --> 00:10:58,890
Ale pro bezpečné odejdou, nejlepší, aby se
Raketoplán přistane na jeho kola na

178
00:10:58,890 --> 00:11:00,700
zem jako první.

179
00:11:00,700 --> 00:11:05,910
Můžete také provést teleportaci,
kde uděláte rozevírací seznam dolů

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

181
00:11:08,380 --> 00:11:12,270
A výběrem jedné z těch,
uživatel bude převezen do

182
00:11:12,270 --> 00:11:14,220
že stavba na akademické půdě.

183
00:11:14,220 --> 00:11:16,760
OK, i když, cestovat přes
stěny některých

184
00:11:16,760 --> 00:11:19,290
stavby na vaší cestě tam.

185
00:11:19,290 --> 00:11:22,960
>> Můžete také změnit rychlost
kyvadlová doprava, což umožňuje uživateli zvýšit

186
00:11:22,960 --> 00:11:25,490
nebo snížení rychlosti.

187
00:11:25,490 --> 00:11:28,840
Možná budete chtít globální proměnnou
sledovat, kolik paliva

188
00:11:28,840 --> 00:11:31,520
Kyvadlová doprava má klesající
to, jak jdete dál.

189
00:11:31,520 --> 00:11:35,860
Jakmile dosáhnete nuly, i když raketoplán
nebude schopen se pohybovat, pokud jste

190
00:11:35,860 --> 00:11:40,610
natankoval, snad pomocí tlačítka nebo
dokonce vytvořit svůj vlastní čerpací stanice.

191
00:11:40,610 --> 00:11:43,240
>> Ale to rozhodně není
vyčerpávající seznam.

192
00:11:43,240 --> 00:11:46,340
Podívejte se na spec pro plné
seznam, nebo třeba navrhnout

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

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

195
00:11:48,950 --> 00:11:53,110
Toto je vaše poslední CS50 p-set,
takže bavit se s ním.

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

197
00:11:56,360 --> 00:11:59,230
>> Musím říct, že to bylo potěšení
takže to pro 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 doufám, že jste
si je, stejně.

200
00:12:04,330 --> 00:12:06,040
Jmenuji se Zamyla.

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

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