1
00:00:00,000 --> 00:00:07,440

2
00:00:07,440 --> 00:00:08,180
>> TOMAS REIMERS: Ahoj, všichni.

3
00:00:08,180 --> 00:00:09,250
Jmenuji se Tomáš Reimers.

4
00:00:09,250 --> 00:00:10,500
>> MIKE RIZZO: A já jsem Mike Rizzo.

5
00:00:10,500 --> 00:00:12,990
>> TOMAS REIMERS: Jsme dva CS50s TS.

6
00:00:12,990 --> 00:00:18,910
A dnes jsme v čele seminář na
JavaScript a CSS pro webové aplikace.

7
00:00:18,910 --> 00:00:22,140
Pokud chcete sledovat spolu,
odkaz je támhle.

8
00:00:22,140 --> 00:00:25,190
A chcete, aby ji
na počítači krátce?

9
00:00:25,190 --> 00:00:27,460
>> Tady je odkaz.

10
00:00:27,460 --> 00:00:30,390
Je to malé místo, které má vazby na
všechny zdroje Chystáme se být

11
00:00:30,390 --> 00:00:36,490
ukázal vám dnes, a také má spoustu
užitečné informace, napsal nám

12
00:00:36,490 --> 00:00:39,680
čtěte více do hloubky, když jdete zpátky,
a vy se snažíte vzpomenout, co

13
00:00:39,680 --> 00:00:42,166
přesně tak jsme si řekli, co jste byli
mluví o, et cetera.

14
00:00:42,166 --> 00:00:43,870
>> MIKE RIZZO: Dobře.

15
00:00:43,870 --> 00:00:44,890
Tak pojďme začít.

16
00:00:44,890 --> 00:00:45,700
>> TOMAS REIMERS: Takže chcete začít?

17
00:00:45,700 --> 00:00:45,970
OK.

18
00:00:45,970 --> 00:00:47,170
>> MIKE RIZZO: Jo.

19
00:00:47,170 --> 00:00:51,730
Tak jsme se poprvé chtěli začít s širokým
přehled o internetu a

20
00:00:51,730 --> 00:00:54,240
typy souborů, při navrhování webových stránek.

21
00:00:54,240 --> 00:00:57,550
I když tato prezentace my chceme, aby
dostat se do do JavaScriptu mnohem mnohem

22
00:00:57,550 --> 00:01:00,320
později, jsme chtěli začít s
jen, druh, jako oko pohled z ptačí

23
00:01:00,320 --> 00:01:03,270
z čeho webové stránky je a jak
přemýšlet o navrhování

24
00:01:03,270 --> 00:01:04,800
Webové stránky pro start.

25
00:01:04,800 --> 00:01:08,370
>> Takže vy, v tomto bodě - s ním
že v pátek večer - by měli mít

26
00:01:08,370 --> 00:01:11,000
předložil své CS50 finance
Problém sady.

27
00:01:11,000 --> 00:01:15,260
Doufejme, že byl dobrý vkus
o tom, co webové programování může být.

28
00:01:15,260 --> 00:01:18,261
Ale tady chceme, druh, dát
si jiný vkus, stejně.

29
00:01:18,261 --> 00:01:23,190
>> TOMAS REIMERS: Tak jen shrnout, co
se stane, když zadáte adresu URL do

30
00:01:23,190 --> 00:01:26,650
váš webový prohlížeč, který dostane URL
vzhlédl v počítači.

31
00:01:26,650 --> 00:01:28,590
A počítač je připojen
k jinému počítači,

32
00:01:28,590 --> 00:01:29,890
které hostí tuto webovou stránku.

33
00:01:29,890 --> 00:01:33,150
OK, takže když jdete na google.com, že jste
připojen k jednomu z Google je

34
00:01:33,150 --> 00:01:36,496
počítače, který má
soubory na google.com.

35
00:01:36,496 --> 00:01:38,750
>> To pak požádá o konkrétní soubor.

36
00:01:38,750 --> 00:01:40,020
Takže pokud jdete do -

37
00:01:40,020 --> 00:01:41,550
Nevím -

38
00:01:41,550 --> 00:01:48,170
example.com / index.html / nebo test.html,
budete žádat

39
00:01:48,170 --> 00:01:49,340
že konkrétní soubor.

40
00:01:49,340 --> 00:01:52,780
A webový server děje
vrátit se k vám.

41
00:01:52,780 --> 00:01:54,910
>> Poté, co projdete tohoto souboru -

42
00:01:54,910 --> 00:01:57,750

43
00:01:57,750 --> 00:01:59,950
jakmile jste počítač dostane, že
soubor - je to chystá začít

44
00:01:59,950 --> 00:02:00,820
vybudovat webovou stránku.

45
00:02:00,820 --> 00:02:03,020
Takže teď má soubor HTML,
což je něco jako

46
00:02:03,020 --> 00:02:05,170
Struktura webové stránky.

47
00:02:05,170 --> 00:02:08,620
HTML soubor by také odkazovat
CSS soubory, které definují

48
00:02:08,620 --> 00:02:09,889
styl webové stránky.

49
00:02:09,889 --> 00:02:12,970
>> JavaScript soubory, které definuje
interakce s webovou stránkou.

50
00:02:12,970 --> 00:02:15,200
Obrazové soubory, které jsou jen obrazy.

51
00:02:15,200 --> 00:02:19,450
A případně odkazy na jiné soubory HTML,
které pak můžete navštívit.

52
00:02:19,450 --> 00:02:22,656

53
00:02:22,656 --> 00:02:24,380
>> MIKE RIZZO: OK, dobře.

54
00:02:24,380 --> 00:02:28,980
Takže vy máte všechno, možná,
pečlivě nastavit místního hostitele

55
00:02:28,980 --> 00:02:30,810
na vašem virtuálním stroji.

56
00:02:30,810 --> 00:02:35,650
A to právě, druh, je místní
doména, která váš počítač hostitelem pouze

57
00:02:35,650 --> 00:02:38,760
pro vás na vlastní IP adresu.

58
00:02:38,760 --> 00:02:43,300
>> Takže v to, že pak můžete přidat
k tomu své vlastní webové stránky.

59
00:02:43,300 --> 00:02:47,655
Myslím, že v CS50 financí, měli byste mít
přidány některé HTML stránky, které jsou,

60
00:02:47,655 --> 00:02:49,410
druh, zabalené v PHP obalu.

61
00:02:49,410 --> 00:02:54,690
Ale nakonec, jaké jsou vaše PHP stránky
se výstup byl HTML.

62
00:02:54,690 --> 00:02:58,210
>> Ale vzpomněl si na začátku
z pset, jsme museli nastavit

63
00:02:58,210 --> 00:03:00,890
oprávnění pro všechno, že jo?

64
00:03:00,890 --> 00:03:07,270
Takže to v podstatě jen práskne
kdo umí číst, psát, a možná

65
00:03:07,270 --> 00:03:08,730
provádět jednotlivé soubory.

66
00:03:08,730 --> 00:03:11,870
Takže budeme dělat rychle - hm?

67
00:03:11,870 --> 00:03:15,660
>> TOMAS REIMERS: Tak jdeme
udělat rychlý demo.

68
00:03:15,660 --> 00:03:19,560
Takže jen pro připomenutí, když se
připojení k počítači Google -

69
00:03:19,560 --> 00:03:20,690
kdo -

70
00:03:20,690 --> 00:03:24,060
a požádat o souboru, počítač nejprve
je třeba, aby se ujistil, že jste oprávněn

71
00:03:24,060 --> 00:03:28,790
skutečně zobrazit tento soubor, nebo četl, že
soubor, protože nemůžete jen zeptat

72
00:03:28,790 --> 00:03:30,430
pro jakýkoliv soubor na tomto počítači, že jo?

73
00:03:30,430 --> 00:03:32,260
To by bylo riziko zabezpečení.

74
00:03:32,260 --> 00:03:37,020
>> Takže soubory na systémech, které používáme, jako je
Tento CS50 zařízení, mají tři

75
00:03:37,020 --> 00:03:39,200
obecně lidé, kteří mohou mít
oprávnění k něčemu.

76
00:03:39,200 --> 00:03:41,610
Prvním z nich je skutečný
majitel uvedeného spisu.

77
00:03:41,610 --> 00:03:43,820
Druhá je skupina, která
soubor patří.

78
00:03:43,820 --> 00:03:46,090
Nebudeme se soustředit
příliš mnoho na to.

79
00:03:46,090 --> 00:03:50,010
A poslední věc je, něco, jako je
svět nebo jako všichni ostatní, kdo je

80
00:03:50,010 --> 00:03:54,130
není specifická pro tento soubor, a nemá
mít žádná vlastnická práva k ní.

81
00:03:54,130 --> 00:04:05,650
>> Takže máme-li vlastník, skupina,
a pak se svět.

82
00:04:05,650 --> 00:04:10,510
A pak, pro každou z těchto skupin, je
může mít jednu ze tří oprávnění,

83
00:04:10,510 --> 00:04:13,010
OK, nebo více z nich.

84
00:04:13,010 --> 00:04:15,070
Můžete mít oprávnění ke čtení.

85
00:04:15,070 --> 00:04:16,560
Můžete mít správná oprávnění.

86
00:04:16,560 --> 00:04:18,880
A můžete si spustit oprávnění.

87
00:04:18,880 --> 00:04:22,060
>> Takže pokud jde o skutečné typy souborů, přečtěte si
Povolení je jako ve skutečnosti čtení

88
00:04:22,060 --> 00:04:23,250
obsah souboru.

89
00:04:23,250 --> 00:04:24,730
Právo povolení se píše
do uvedeného souboru.

90
00:04:24,730 --> 00:04:28,370
Vykonávat oprávnění běží
soubor jako vy, když musíte spustit některý z

91
00:04:28,370 --> 00:04:29,620
Vaše CS50 projekty.

92
00:04:29,620 --> 00:04:32,190

93
00:04:32,190 --> 00:04:38,820
>> Takže když budeme přemýšlet o souborech
jako když musíme číst HTML

94
00:04:38,820 --> 00:04:41,790
Soubor, který musí být svět
čitelné, ne?

95
00:04:41,790 --> 00:04:44,420
Lze předpokládat, že i majitel chce
být schopni upravit tento soubor.

96
00:04:44,420 --> 00:04:46,610
Takže majitel bude potřebovat
číst a psát oprávnění.

97
00:04:46,610 --> 00:04:48,710
Nemají opravdu potřebujete spustit.

98
00:04:48,710 --> 00:04:50,950
>> Skupina, jdeme k léčbě
stejně jako svět pro teď.

99
00:04:50,950 --> 00:04:54,610
Takže oni potřebují oprávnění ke čtení.

100
00:04:54,610 --> 00:04:57,310
Ale nemusíte psát
nebo vykonat oprávnění.

101
00:04:57,310 --> 00:05:01,920
A teď, když si myslíme, že zpět do bývalé
PSETs, co si uvědomujeme, je tento druh

102
00:05:01,920 --> 00:05:03,360
z vypadají jako binární, že jo?

103
00:05:03,360 --> 00:05:04,210
1 znamená ano.

104
00:05:04,210 --> 00:05:05,040
0 pro ne.

105
00:05:05,040 --> 00:05:06,870
A můžeme skutečně překládat
to binární.

106
00:05:06,870 --> 00:05:10,478
>> Takže 110 v binárním by být 6.

107
00:05:10,478 --> 00:05:13,270
100 bude 4.

108
00:05:13,270 --> 00:05:14,690
Stejné je to s světem.

109
00:05:14,690 --> 00:05:20,846
Takže číslo, které by se pro
oprávnění pro to bude 644.

110
00:05:20,846 --> 00:05:24,400
>> MIKE RIZZO: A pokud si myslíte, zpět do
když chmoded něco, věřím,

111
00:05:24,400 --> 00:05:28,980
dali do problému nastavení
příklad, kde byste mohli udělat

112
00:05:28,980 --> 00:05:36,470
něco jako chmod 644
a poté název souboru.

113
00:05:36,470 --> 00:05:39,980
644 pak, můžete nyní vidět přímo
kde to pochází.

114
00:05:39,980 --> 00:05:42,840
Tak doufejme, že dělá, že
trochu jasnější.

115
00:05:42,840 --> 00:05:45,600
>> A pak pro přehlednost vám chlapa -

116
00:05:45,600 --> 00:05:48,200
ach jo, tady je to znovu.

117
00:05:48,200 --> 00:05:53,260
Takže 600 by pak být jen příklad
dali jsme sem, kde má vlastník

118
00:05:53,260 --> 00:05:56,360
čtení a správné oprávnění, zatímco skupina
a svět nemají žádné oprávnění

119
00:05:56,360 --> 00:05:58,145
přístup k souboru.

120
00:05:58,145 --> 00:06:01,500
>> TOMAS REIMERS: A pak jsme rychle
Seznam společných oprávnění.

121
00:06:01,500 --> 00:06:05,250
Takže adresáře, budete chtít
skutečně chmod 711.

122
00:06:05,250 --> 00:06:08,930
Rychlé stranou - pro adresář mít
spustitelný povolení znamená, že je schopen

123
00:06:08,930 --> 00:06:11,680
otevřít adresář.

124
00:06:11,680 --> 00:06:15,280
Obrázky, CSS, JavaScript, HTML potřeby
644, protože v podstatě svět

125
00:06:15,280 --> 00:06:16,400
potřebuje oprávnění ke čtení.

126
00:06:16,400 --> 00:06:20,960
>> A PHP, které vy jste viděli
i když nebudeme o tom mluvit

127
00:06:20,960 --> 00:06:24,880
přísně je typicky s chmoded
povolení 600, protože je to běh s

128
00:06:24,880 --> 00:06:26,540
oprávnění vlastníka.

129
00:06:26,540 --> 00:06:27,790
Alespoň na zařízení.

130
00:06:27,790 --> 00:06:30,200

131
00:06:30,200 --> 00:06:36,870
>> MIKE RIZZO: Takže pokud tomu nejsou výslovně
určit, jaký typ souboru

132
00:06:36,870 --> 00:06:39,480
Chcete-ve skutečnosti nastavení
do této prezentaci -

133
00:06:39,480 --> 00:06:43,490
jsme měli problém s tím, protože
vše, co nebylo správně chmoded -

134
00:06:43,490 --> 00:06:47,550
budete mít, druh,
zakázáno chyba, že webové stránky

135
00:06:47,550 --> 00:06:49,700
nemá ve skutečnosti mají oprávnění
přístup bez ohledu na soubor

136
00:06:49,700 --> 00:06:51,370
chcete, aby přístup.

137
00:06:51,370 --> 00:06:54,780
A samozřejmě, že může být stanovena -
jako problém sada - změnou

138
00:06:54,780 --> 00:06:56,405
oprávnění přiměřeně.

139
00:06:56,405 --> 00:06:59,620
>> TOMAS REIMERS: A poslední poznámka pro
Rychle místní rozvoj - jsme

140
00:06:59,620 --> 00:07:02,000
přinesl to, ale jen jsme chtěli
aby to zase -

141
00:07:02,000 --> 00:07:06,230
pokud se zeptáte na serveru - takže místního hostitele,
Například, com nebo cokoliv jiného. -

142
00:07:06,230 --> 00:07:09,170
a neurčíte konkrétní soubor,
soubor, který váš počítač se děje

143
00:07:09,170 --> 00:07:11,540
požádat o se nazývá index.html.

144
00:07:11,540 --> 00:07:12,790
Nebo v případě, že neexistuje, index.php.

145
00:07:12,790 --> 00:07:15,560

146
00:07:15,560 --> 00:07:16,350
>> V pohodě.

147
00:07:16,350 --> 00:07:19,560
Takže je to jen rekapitulace všeho,
doufejme, že jsme na které se vztahuje

148
00:07:19,560 --> 00:07:22,800
sekce a přednášky,
a tak daleko CS50.

149
00:07:22,800 --> 00:07:26,110
A teď budeme začít mluvit
o specificky knihovny.

150
00:07:26,110 --> 00:07:30,270
JavaScript a CSS knihovny
pro webové aplikace.

151
00:07:30,270 --> 00:07:36,350
>> Tak jedna rychlá důvod, proč máme
knihovny je programování -

152
00:07:36,350 --> 00:07:39,000
je tu spousta problémů
programování, které udržují objevovat

153
00:07:39,000 --> 00:07:40,570
znovu a znovu a znovu.

154
00:07:40,570 --> 00:07:43,870
Můžete si všimnout, že mnoho internetových stránek
je třeba schopnost mít rozbalovací

155
00:07:43,870 --> 00:07:49,100
menu, například, nebo potřebujete schopnost
mít tlačítko velmi standardní

156
00:07:49,100 --> 00:07:51,400
styl, který nemusí být
nejjednodušší.

157
00:07:51,400 --> 00:07:54,670
Teď, když začnete se dostat do HTML, můžete
Uvědomuji si, že tlačítka může skutečně

158
00:07:54,670 --> 00:07:57,720
vypadají opravdu ošklivě, pokud vám
nedělají nic.

159
00:07:57,720 --> 00:08:00,830
>> Takže mnoho lidí psali
s názvem knihovny.

160
00:08:00,830 --> 00:08:02,990
A v této souvislosti, že jsou
také volal rámce.

161
00:08:02,990 --> 00:08:04,790
Budeme používat
dva vzájemně zaměnitelné.

162
00:08:04,790 --> 00:08:07,360
A to, co oni jsou, je, že jsou v podstatě
premade kusy kódu -

163
00:08:07,360 --> 00:08:09,130
Buď CSS nebo JavaScript -

164
00:08:09,130 --> 00:08:13,240
že odnést hodně
tým máte v kódování.

165
00:08:13,240 --> 00:08:17,290
>> Takže předem definovat spoustu tříd, nebo
předem definovat spoustu funkcí pro

166
00:08:17,290 --> 00:08:20,110
JavaScript je případ, který
můžete zavolat později.

167
00:08:20,110 --> 00:08:22,690
A pak je to možné, nějak, se
přístup k tomuto kódu, aniž by

168
00:08:22,690 --> 00:08:23,710
museli něco udělat.

169
00:08:23,710 --> 00:08:27,750
Příkladem knihovny bylo CS50.H.
To byla knihovna dali jsme vám zpět

170
00:08:27,750 --> 00:08:32,090
v týdnu jeden, který dovolil, abys
věci, jako že vezmi_int a GetString

171
00:08:32,090 --> 00:08:35,237
aniž by bylo nutné psát
jakýkoli kód sami.

172
00:08:35,237 --> 00:08:36,179
>> MIKE RIZZO: Dobře.

173
00:08:36,179 --> 00:08:40,299
Tak tady, stejně jako jsme museli zahrnout
v našem c soubory liší

174
00:08:40,299 --> 00:08:46,570
knihovny, také bychom měli zahrnout do
náš HTML soubory různých knihoven.

175
00:08:46,570 --> 00:08:50,310
Například, pokud bychom chtěli zahrnout
specifické knihovna JavaScript tady,

176
00:08:50,310 --> 00:08:52,850
možná ten, který jsme napsal
sami, jak je to místně hostil

177
00:08:52,850 --> 00:08:56,000
tzv. script.js, právě jsme
použít tento zápis.

178
00:08:56,000 --> 00:08:59,500
>> Takže máme typ skriptu rovná
JavaScript zdroj rovná

179
00:08:59,500 --> 00:09:01,260
JavaScript.js.

180
00:09:01,260 --> 00:09:05,190
A pokud si myslíte, že zpět do své CS50
finance problému nastavení, pokud jste se podívali na

181
00:09:05,190 --> 00:09:09,190
header.php ve složce šablon,
byste měli vidět

182
00:09:09,190 --> 00:09:10,970
některé z nich v ceně.

183
00:09:10,970 --> 00:09:13,250
Tak to první - skripty -

184
00:09:13,250 --> 00:09:16,080
je včetně knihovny JavaScript.

185
00:09:16,080 --> 00:09:18,760
Včetně knihovny CSS je
trochu jinak.

186
00:09:18,760 --> 00:09:21,430
>> Zde, namísto skriptu
Tag musíte tag odkazu.

187
00:09:21,430 --> 00:09:27,110
A pak, zadejte text CSS
je trochu jiný.

188
00:09:27,110 --> 00:09:29,270
Nemusíte vždy musí obsahovat
rel stylů.

189
00:09:29,270 --> 00:09:30,970
Ale myslím, že to, obecně,
dobré praxe.

190
00:09:30,970 --> 00:09:35,810
>> A nakonec, HREF, který
pravděpodobně viděl ve svých ATAGs pro propojení

191
00:09:35,810 --> 00:09:39,440
v různých vazeb jen určuje,
odkaz, kde najít to.

192
00:09:39,440 --> 00:09:42,250
Například, pokud bychom chtěli spojit
jiný knihovna - řekněme -

193
00:09:42,250 --> 00:09:49,330
že žil v styles.css.

194
00:09:49,330 --> 00:09:54,030
A my jsme chtěli spojit to v tom, že je
hostované na webu, budeme kopírovat to.

195
00:09:54,030 --> 00:09:58,834
A pak ji vložit do jakéhokoliv
máme tady místo.

196
00:09:58,834 --> 00:10:01,340
>> TOMAS REIMERS: OK, doufejme, že jste
kluci jsou již obeznámeni

197
00:10:01,340 --> 00:10:02,410
s tím, jak propojit CSS.

198
00:10:02,410 --> 00:10:04,000
Vy jste měli udělat, že na
Vaše poslední hnědá sada.

199
00:10:04,000 --> 00:10:07,110
JavaScript, někteří z vás možná
mají nějaké zkušenosti s.

200
00:10:07,110 --> 00:10:07,980
Někteří z vás možná ne.

201
00:10:07,980 --> 00:10:12,190
>> Takže teď, vím, že soubor JavaScript
je velmi podobný souboru CSS v

202
00:10:12,190 --> 00:10:15,640
pocit, že můžete odkaz na něj, nebo
že můžete zahrnout interně.

203
00:10:15,640 --> 00:10:17,360
A to vám umožní skriptu věci.

204
00:10:17,360 --> 00:10:21,820
A budeme vás provede
Trochu JavaScript později.

205
00:10:21,820 --> 00:10:23,560
>> Takže pomocí knihovny -

206
00:10:23,560 --> 00:10:26,150
jakmile jste součástí, je to jako
jednoduché, jak doslova volá

207
00:10:26,150 --> 00:10:29,640
funkce nebo přidání
Třída jména do ní.

208
00:10:29,640 --> 00:10:32,220
Poslední věc, kterou chceme mluvit
o, pokud jde o knihovny -

209
00:10:32,220 --> 00:10:34,180
a to je více technické poznámce -

210
00:10:34,180 --> 00:10:35,860
Je licencí open source.

211
00:10:35,860 --> 00:10:41,550
Takže když zjistíte, tyto skutečné knihovny,
si mohou myslet, ze

212
00:10:41,550 --> 00:10:47,630
Otázky líbí, je to v pořádku, že jsem jen
pomocí kódu někoho jiného, ​​a to zejména

213
00:10:47,630 --> 00:10:51,970
protože to je něco, co velmi
řekl, že nebude dělat v tomto kurzu.

214
00:10:51,970 --> 00:10:55,790
>> Takže v případě open source licencí,
Mnoho vývojářů -

215
00:10:55,790 --> 00:10:57,540
poté, co jsem napsal knihovnu,
který si myslí, že by mohly být

216
00:10:57,540 --> 00:10:59,450
užitečné pro ostatní lidi -

217
00:10:59,450 --> 00:11:02,420
bude jej publikovat na webu
a dát mu licenci.

218
00:11:02,420 --> 00:11:06,620
A licence v podstatě říká, že jsem se tímto
udělování povolení k další

219
00:11:06,620 --> 00:11:11,250
lidé používat tento software
s tímto druhem

220
00:11:11,250 --> 00:11:13,230
ujednání.

221
00:11:13,230 --> 00:11:16,100
>> Jsme zařadili odkaz na dobré stránky na
pomůže pochopit licencí v

222
00:11:16,100 --> 00:11:17,720
případě, že se dostanete do nich.

223
00:11:17,720 --> 00:11:21,680
Společné ujednání jsou věci jako
jste vítáni v mé knihovně, aby

224
00:11:21,680 --> 00:11:23,000
Dokud mi dát úvěr.

225
00:11:23,000 --> 00:11:25,670
Jste vítáni k použití mé knihovny
tak dlouho, jako když se rozbije

226
00:11:25,670 --> 00:11:26,790
že mě vinit.

227
00:11:26,790 --> 00:11:30,310
Jste vítáni k použití mé knihovny tak dlouho,
pokud nechcete použít, jak vydělat peníze

228
00:11:30,310 --> 00:11:31,910
pro sebe.

229
00:11:31,910 --> 00:11:34,130
Jedná se o běžné druhy
ujednání.

230
00:11:34,130 --> 00:11:37,780
>> Pro tento CS50 posledním projektu,
by neměl být super relevantní, protože

231
00:11:37,780 --> 00:11:41,440
projekty, které vy používáte jsou
pravděpodobně spíše trochu známý.

232
00:11:41,440 --> 00:11:44,170
Ale když jste vlastně jít ven do
svět a začít používat knihovny, které

233
00:11:44,170 --> 00:11:48,100
může, ale nemusí být, stejně realizován jako
některé z více populární ty jsme

234
00:11:48,100 --> 00:11:49,780
bude prochází.

235
00:11:49,780 --> 00:11:53,310
Je dobré, aby bylo možné pochopit,
Tyto licence a na

236
00:11:53,310 --> 00:11:54,560
pochopit, co znamenají.

237
00:11:54,560 --> 00:11:58,120

238
00:11:58,120 --> 00:11:58,586
A vracet.

239
00:11:58,586 --> 00:12:00,960
>> MIKE RIZZO: OK.

240
00:12:00,960 --> 00:12:04,850
Takže nyní pohybuje na příkladech
skutečné CSS.

241
00:12:04,850 --> 00:12:07,770
V tomto bodě tak daleko, můžete
Není se setkali to.

242
00:12:07,770 --> 00:12:10,300
Ale možná jste se setkali s tím v
tvůj každodenní život, kde se něco

243
00:12:10,300 --> 00:12:13,160
to vypadá na jednu stranu na jednom prohlížeči
nemusí vypadat stejně

244
00:12:13,160 --> 00:12:14,880
způsob, jak v jiném prohlížeči.

245
00:12:14,880 --> 00:12:17,400
>> To se nazývá prohlížeč prohlížeč
kompatibilita.

246
00:12:17,400 --> 00:12:20,780
A stále je to stále více a
větší problém, zejména proto,

247
00:12:20,780 --> 00:12:25,260
prohlížeče se stále více a více svobody
realizovat věci tak, jak chtějí.

248
00:12:25,260 --> 00:12:28,440
Takže překonat to, že tam skutečně je
velká knihovna s názvem Normalize.CSS.

249
00:12:28,440 --> 00:12:32,236

250
00:12:32,236 --> 00:12:33,770
>> TOMAS REIMERS: zahrnuty odkaz.

251
00:12:33,770 --> 00:12:36,210
V tomto bodě, to je užitečné v případě,
Máte svůj notebook tam

252
00:12:36,210 --> 00:12:38,740
při pohledu na místě.

253
00:12:38,740 --> 00:12:42,580
A dáváme vám to hned
Nyní jednoduše proto, že CS50 finále

254
00:12:42,580 --> 00:12:44,370
Projekt bude skutečně
vás vyzve k jeho provedení

255
00:12:44,370 --> 00:12:45,860
podobně i přes prohlížeče.

256
00:12:45,860 --> 00:12:49,250
>> Takže stačí mít na zadní straně
hlava, to je nádherný knihovna

257
00:12:49,250 --> 00:12:51,170
, protože to bude, tak nějak,
standardizovat věci.

258
00:12:51,170 --> 00:12:54,230
Ve Firefoxu, něco, co se může ukázat,
jako jeden pixel na levé straně.

259
00:12:54,230 --> 00:12:58,390
A pak Chrome může rozhodnout, že ve skutečnosti
to, co jste měl na mysli bylo 10 pixelů

260
00:12:58,390 --> 00:12:59,380
na levé straně.

261
00:12:59,380 --> 00:13:01,030
A chcete standardizovat to.

262
00:13:01,030 --> 00:13:05,360
Normalizace bude vlastně dělat opravdu dobrý
Úkolem ujistěte se, že vaše stránky

263
00:13:05,360 --> 00:13:08,070
vypadá stejně v různých prohlížečích.

264
00:13:08,070 --> 00:13:10,660
>> MIKE RIZZO: Takže kdybychom chtěli jen
klikněte na odkaz opravdu rychle a ukázat

265
00:13:10,660 --> 00:13:13,140
si, co to vypadá, vás
Můžete si jej stáhnout pomocí

266
00:13:13,140 --> 00:13:14,670
obří tlačítko Download.

267
00:13:14,670 --> 00:13:18,520
Nebo bych Doporučujeme vám přečíst více o tom
po kliknutí na tento odkaz v dolní

268
00:13:18,520 --> 00:13:19,310
v pravém dolním rohu.

269
00:13:19,310 --> 00:13:22,420
>> TOMAS REIMERS: A pokud skutečně
klepněte na tlačítko Číst více tady -

270
00:13:22,420 --> 00:13:24,340
klepněte na zdroj na GitHub -

271
00:13:24,340 --> 00:13:31,720
budete skutečně vidět open source
licence na LICENSE.md tady.

272
00:13:31,720 --> 00:13:35,740
A uvidíte, je zde
velmi populární licence MIT.

273
00:13:35,740 --> 00:13:38,940
Opět platí, že pokud si přečtete v textu,
budete moci najít na stránkách

274
00:13:38,940 --> 00:13:42,550
jsme odkazované před a být schopen
pochopit, aniž byste museli číst

275
00:13:42,550 --> 00:13:45,920
prostřednictvím právního žargonu.

276
00:13:45,920 --> 00:13:46,850
>> MIKE RIZZO: OK, dobře.

277
00:13:46,850 --> 00:13:47,940
Tak to je Normalizace.

278
00:13:47,940 --> 00:13:49,190
Chtěli jsme, aby vám
že opravdu rychle.

279
00:13:49,190 --> 00:13:50,030
Oh, máte nějakou otázku?

280
00:13:50,030 --> 00:13:53,013
>> DIVÁKŮ: Takže když si ji stáhnout, je
jen sledovat ten kód, který mají

281
00:13:53,013 --> 00:13:54,098
pod tlačítkem stažení?

282
00:13:54,098 --> 00:13:55,860
>> TOMAS REIMERS: Ano, tak
když si stáhnete -

283
00:13:55,860 --> 00:13:58,130
>> MIKE RIZZO: Oh, to je skvělé místo.

284
00:13:58,130 --> 00:14:00,700
Takže otázka je, jak to
jsme vlastně ji stáhnout?

285
00:14:00,700 --> 00:14:03,260
Takže pokud klikneme na odkaz, vidíme,
že skutečně objeví

286
00:14:03,260 --> 00:14:05,030
ve zdrojovém kódu.

287
00:14:05,030 --> 00:14:08,550
Tak, jak to udělat, co jsme mohli
to je jen klepněte na příkaz Uložit jako.

288
00:14:08,550 --> 00:14:10,830
Uložit jako a že by
vychovávat soubor.

289
00:14:10,830 --> 00:14:14,160
A pak můžeme zvolit uložení
to jako normalize.CSS.

290
00:14:14,160 --> 00:14:15,810
A pak budete muset propojit ji do -

291
00:14:15,810 --> 00:14:18,660
>> TOMAS REIMERS: stejným způsobem
odkazují v jakémkoli jiném souboru.

292
00:14:18,660 --> 00:14:22,250
A jakmile se propojit ji, co je skvělé
o Normalizace je to skutečně

293
00:14:22,250 --> 00:14:25,920
starat se o všechny těžké
fungovat sama o sobě.

294
00:14:25,920 --> 00:14:27,730
To znamená, že nemáte
přidat nějaké třídy.

295
00:14:27,730 --> 00:14:29,690
>> Nemusíte dělat nic divného.

296
00:14:29,690 --> 00:14:34,590
To bude normalizovat bez tebe
dělat něco dalšího.

297
00:14:34,590 --> 00:14:36,083
Ano, budete muset zahrnout.

298
00:14:36,083 --> 00:14:38,990

299
00:14:38,990 --> 00:14:40,240
Google Chrome nereaguje.

300
00:14:40,240 --> 00:14:43,270

301
00:14:43,270 --> 00:14:44,860
>> Jen rychlý stranou -

302
00:14:44,860 --> 00:14:46,800
Všiml jsem si, jsme skočili do toho.

303
00:14:46,800 --> 00:14:49,010
Zbytek této prezentace je
Bude rychlý přehled.

304
00:14:49,010 --> 00:14:50,380
Přehled knihoven.

305
00:14:50,380 --> 00:14:52,710
>> V podstatě to, co oni jsou.

306
00:14:52,710 --> 00:14:53,350
To, co dělají.

307
00:14:53,350 --> 00:14:54,060
Jak jsou užitečné.

308
00:14:54,060 --> 00:14:56,540
Jak jste je mohli realizovat.

309
00:14:56,540 --> 00:14:59,730
Pokud chcete začít hledat na ně,
Následující spolu, a přečtení

310
00:14:59,730 --> 00:15:01,990
jim, bych velmi povzbudit, že.

311
00:15:01,990 --> 00:15:07,620
>> Případně, jste vítáni i se
začít stahovat je a včetně

312
00:15:07,620 --> 00:15:11,400
je v očích jen proto, aby viděli, co
vypadat nebo co dělat, když máte

313
00:15:11,400 --> 00:15:12,270
váš laptop před vámi.

314
00:15:12,270 --> 00:15:14,650
Pokud ne, jste vítáni, aby se
poslechu nám mluvit.

315
00:15:14,650 --> 00:15:15,500
Budeme dál mluvit.

316
00:15:15,500 --> 00:15:18,680
A máme čas na konci, doufejme, že
budeme skutečně dostat do ukáže vám,

317
00:15:18,680 --> 00:15:20,946
to, co některé z těchto knihoven
vypadat.

318
00:15:20,946 --> 00:15:22,320
>> MIKE RIZZO: Cool.

319
00:15:22,320 --> 00:15:25,466
Dobře, takže teď pojďme hovořit
o Písmo Skvělé.

320
00:15:25,466 --> 00:15:30,480
>> TOMAS REIMERS: tak Font Úžasné je
opravdu hezké místo, a to zejména pro ty,

321
00:15:30,480 --> 00:15:32,450
z nás, kteří jsou méně umělecky
talentovaný.

322
00:15:32,450 --> 00:15:36,330

323
00:15:36,330 --> 00:15:38,880
Ignorování název písma Úžasné, to dává
Jste banda ikon, které jsou

324
00:15:38,880 --> 00:15:41,050
velmi užitečné.

325
00:15:41,050 --> 00:15:45,950
Takže mnohokrát budete realizovat
icon budete chtít jako pěknou X tak,

326
00:15:45,950 --> 00:15:47,170
které můžete uzavřít tak něco.

327
00:15:47,170 --> 00:15:49,910
>> Nebo možná budete chtít nějaké tlačítko Edit
s kresba tužkou, jako je

328
00:15:49,910 --> 00:15:50,940
všichni ostatní.

329
00:15:50,940 --> 00:15:53,850
A to je, když jste se dozvěděli, že
kreslení ty ikony mohou být

330
00:15:53,850 --> 00:15:55,510
velmi zdlouhavé a obtížné.

331
00:15:55,510 --> 00:15:59,160
Font Awesome - pokud jste skutečně
jít na stránky -

332
00:15:59,160 --> 00:16:02,892
vám dává spoustu ikon pod
Ikony v horní části.

333
00:16:02,892 --> 00:16:06,980
Jo, jen nahoře.

334
00:16:06,980 --> 00:16:09,030
To vám dá hodně
ikon zdarma.

335
00:16:09,030 --> 00:16:15,210
>> Takže tady vidíte, máme věci, jako je
hvězdička, bary, blesk,

336
00:16:15,210 --> 00:16:19,750
kalendář, chyba, knihy, et cetera.

337
00:16:19,750 --> 00:16:21,110
To může být velmi užitečné.

338
00:16:21,110 --> 00:16:24,290
Způsob, jak zahrnout je zahrnout
doslova souboru CSS.

339
00:16:24,290 --> 00:16:29,760
A poté, co jste součástí souboru CSS,
to, co můžete udělat, je vytvořit

340
00:16:29,760 --> 00:16:33,430
tag s názvem I. satands pro
icon s třídou FA

341
00:16:33,430 --> 00:16:34,460
stojí za font Awesome.

342
00:16:34,460 --> 00:16:36,330
A pak, bez ohledu na třídu budete chtít.

343
00:16:36,330 --> 00:16:41,220
>> Takže když jsem chtěl ikonu tohoto Plus
náměstí, přímo tady, bych dát

344
00:16:41,220 --> 00:16:43,290
je třída FA.

345
00:16:43,290 --> 00:16:46,230
A pak FA pomlčku a spojovník náměstí.

346
00:16:46,230 --> 00:16:50,325

347
00:16:50,325 --> 00:16:53,710
>> MIKE RIZZO: Cool, OK.

348
00:16:53,710 --> 00:16:56,980
>> TOMAS REIMERS: A pak, poslední CSS
knihovna se chceme dostat přes jsme

349
00:16:56,980 --> 00:16:59,950
se snaží udržet minimální na CSS
knihovny, protože si uvědomujeme

350
00:16:59,950 --> 00:17:03,660
Název této prezentace
je JavaScript knihovny.

351
00:17:03,660 --> 00:17:07,089
Ale my jsme si mysleli, že jsme se může i
Představujeme Vám k jiným knihovnám

352
00:17:07,089 --> 00:17:09,569
když jsme mluvili o knihovnách.

353
00:17:09,569 --> 00:17:11,400
>> Je to Google Web Fonts.

354
00:17:11,400 --> 00:17:17,040
A to, co Google Web Fonts Vám umožní
udělat, je přidat písma na vaše webové stránky,

355
00:17:17,040 --> 00:17:22,079
což je opravdu snadný způsob, jak to
hezká a odlišit sady

356
00:17:22,079 --> 00:17:24,460
od každého jiného je, pokud má
pěkné písmo, nebo v případě, že má pěkný

357
00:17:24,460 --> 00:17:27,790
kolekce písem.

358
00:17:27,790 --> 00:17:31,410
Google Web Fonts je pěkný rozdíl od jiných
knihovny v tom smyslu, že je to

359
00:17:31,410 --> 00:17:33,490
opravdu řídit instalace.

360
00:17:33,490 --> 00:17:38,680
>> Takže pokud budete následovat odkaz, je to
google.com / fonts, věřím.

361
00:17:38,680 --> 00:17:41,100
Pokud se budete držet, aby vás
mohou vybrat své písmo.

362
00:17:41,100 --> 00:17:44,410
Můžete si vybrat, na levé straně od
tloušťka, sklon, et cetera.

363
00:17:44,410 --> 00:17:48,970
A pak, jakmile jste si vybrali jeden,
můžete klepnutím na tlačítko rychlé použití.

364
00:17:48,970 --> 00:17:49,820
Přesně tam.

365
00:17:49,820 --> 00:17:51,590
V pravém dolním rohu okna.

366
00:17:51,590 --> 00:17:54,380

367
00:17:54,380 --> 00:17:56,700
>> A pak, přejděte dolů.

368
00:17:56,700 --> 00:17:59,600

369
00:17:59,600 --> 00:18:02,650
Za prvé, že vám CSS, které
budete muset skutečně odkaz na něj.

370
00:18:02,650 --> 00:18:03,330
Je to tady.

371
00:18:03,330 --> 00:18:05,170
Stačí si jen zkopírovat a vložit, že dovnitř

372
00:18:05,170 --> 00:18:07,250
A pěkná věc, o tomhle je
nemusíte vlastně ani potřeba

373
00:18:07,250 --> 00:18:08,340
stáhnout soubor.

374
00:18:08,340 --> 00:18:11,170
>> Co to udělá, je, že to bude
odkaz na Google verzí toho.

375
00:18:11,170 --> 00:18:14,130
Takže zpět k co to znamená.

376
00:18:14,130 --> 00:18:18,270
To znamená, že když uživatel
stáhne soubor -

377
00:18:18,270 --> 00:18:22,300
stáhne vaše stránky HTML - váš HTML
Stránka se bude odkazovat na tento soubor.

378
00:18:22,300 --> 00:18:26,790
>> Takže, váš počítač bude vidět,
oh, to je hostována na google.com spíše

379
00:18:26,790 --> 00:18:28,170
než na theirsite.com.

380
00:18:28,170 --> 00:18:30,370
Nech mě jít požádat Google o tomto souboru.

381
00:18:30,370 --> 00:18:32,800
A pak, že to bude zahrnovat
je to skoro, jako kdyby se jednalo o

382
00:18:32,800 --> 00:18:35,584
součástí vašich vlastních stránek.

383
00:18:35,584 --> 00:18:36,540
>> TOMAS REIMERS: Cool.

384
00:18:36,540 --> 00:18:40,980
A jakmile se patří, pak se
zahrnout ji do svého CSS, to vám dává

385
00:18:40,980 --> 00:18:41,830
aktuální řádek.

386
00:18:41,830 --> 00:18:45,188
Takže můžete nastavit rodinného majetku písma
rovnající se název vašeho písma.

387
00:18:45,188 --> 00:18:47,936

388
00:18:47,936 --> 00:18:50,440
>> MIKE RIZZO: OK.

389
00:18:50,440 --> 00:18:52,220
Tak jsme právě dokončili s CSS.

390
00:18:52,220 --> 00:18:57,230
A někteří z vás si možná myslet, dobře,
jsme měli nějaké CSS na CS50 financí.

391
00:18:57,230 --> 00:19:00,390
Ale CSS knihovna byla bootstrap.

392
00:19:00,390 --> 00:19:05,190
Jsme vlastně patří Bootstrap málo
později v JavaScriptu, protože se

393
00:19:05,190 --> 00:19:09,660
knihovna Bootstrap CSS také přichází
se spoustou JavaScript, který

394
00:19:09,660 --> 00:19:12,060
Bootstrap nebo Twitter -
kdo dělal Bootstrap -

395
00:19:12,060 --> 00:19:15,426
používá pro správu všech jejich CSS.

396
00:19:15,426 --> 00:19:19,592
>> TOMAS REIMERS: Má někdo nějaké
otázky dosud o CSS obecně?

397
00:19:19,592 --> 00:19:20,723
Jsme dobrý?

398
00:19:20,723 --> 00:19:21,216
Úžasné.

399
00:19:21,216 --> 00:19:22,495
>> MIKE RIZZO: Skvělé.

400
00:19:22,495 --> 00:19:25,136
>> TOMAS REIMERS: Takže stěhování
na JavaScript.

401
00:19:25,136 --> 00:19:27,900
>> MIKE RIZZO: Tak jsme chtěli mluvit
o jQuery začít.

402
00:19:27,900 --> 00:19:30,780
Má někdo slyšel o jQuery
před nebo použil?

403
00:19:30,780 --> 00:19:32,180
Jo, pár?

404
00:19:32,180 --> 00:19:36,000
Takže pokud jste právě pracovat s nativním
JavaScript, zjistíte sami

405
00:19:36,000 --> 00:19:41,000
psaní hodně dlouhých selektorů hodně.

406
00:19:41,000 --> 00:19:44,400
Takže to, co jQuery dělá, je, že poskytuje
pěkný obal pro JavaScript

407
00:19:44,400 --> 00:19:48,180
jazyk, který vám umožní snadno zvolit
a manipulovat s různými prvky

408
00:19:48,180 --> 00:19:52,470
v dokumentu objekt modelu
webové stránky nebo DOM, což si myslím,

409
00:19:52,470 --> 00:19:54,290
vy jste slyšeli v
přednáška v tomto bodě.

410
00:19:54,290 --> 00:19:57,550
>> TOMAS REIMERS: Pokud jste ještě neslyšeli o
to, nebo pokud jste sledovali přednáška

411
00:19:57,550 --> 00:20:01,870
přesto, Document Object Model je
v podstatě, jak se věci zastoupeny.

412
00:20:01,870 --> 00:20:05,290
Takže HTML trochu vypadá jako strom
když jste skutečně čerpat ji.

413
00:20:05,290 --> 00:20:06,850
Máte HTML element na vrcholu.

414
00:20:06,850 --> 00:20:07,560
Máte hlavu a tělo.

415
00:20:07,560 --> 00:20:09,500
>> A pak, v rámci které si
mají všechno ostatní.

416
00:20:09,500 --> 00:20:10,660
To je odkazoval se na jako DOM -

417
00:20:10,660 --> 00:20:12,120
Document Object Model.

418
00:20:12,120 --> 00:20:16,090
Takže model, který reprezentuje objekty
dokument je snadný způsob, jak myslet

419
00:20:16,090 --> 00:20:18,560
o tom.

420
00:20:18,560 --> 00:20:22,520
A jedním z velkých věcí o jQuery
Je to opravdu dělá traverzování

421
00:20:22,520 --> 00:20:26,460
že a manipulace s prvky v rámci
že neuvěřitelně jednoduché.

422
00:20:26,460 --> 00:20:30,300
>> Tak jednoduché, ve skutečnosti, že většina
JavaScript knihovny, nebo ne, pokud

423
00:20:30,300 --> 00:20:34,200
Většina, velký většina ty
uvidíte ve skutečnosti vyžadují, jQuery, takže

424
00:20:34,200 --> 00:20:37,530
že lze spustit sami jednoduše
protože pokud jste neměli jQuery, vás

425
00:20:37,530 --> 00:20:40,540
by odpad spoustu času se snaží
přijít na to, jak vybrat určité

426
00:20:40,540 --> 00:20:43,660
prvky a jak dělat jiné věci.

427
00:20:43,660 --> 00:20:47,950
A další skvělá věc, o jQuery
je, že je to cross kompatibilní se všemi prohlížeči.

428
00:20:47,950 --> 00:20:51,550
>> Takže pamatujte zpět, když jsme řekli, že
ne všechny prohlížeče implementovat

429
00:20:51,550 --> 00:20:53,100
věci stejným způsobem?

430
00:20:53,100 --> 00:20:55,120
To platí i v JavaScriptu.

431
00:20:55,120 --> 00:20:58,220
A jedním z velkých věcí, o jQuery
je, že to bude detekovat

432
00:20:58,220 --> 00:21:00,300
prohlížeč a odhalit
vhodná metoda.

433
00:21:00,300 --> 00:21:03,420
>> Takže pokud budete potřebovat vybrat prvek,
Internet Explorer by se říci, že jste

434
00:21:03,420 --> 00:21:05,770
dělat tímto způsobem.

435
00:21:05,770 --> 00:21:08,300
Firefox by se říci, správné
způsob, jak je tento způsob.

436
00:21:08,300 --> 00:21:09,710
jQuery nestará.

437
00:21:09,710 --> 00:21:12,550
Když řeknete jQuery vybrat
prvek bude zjistit, jak je to

438
00:21:12,550 --> 00:21:16,290
dělat to v prohlížeči
uživatel je v současné době, a poté proveďte

439
00:21:16,290 --> 00:21:18,584
to tak.

440
00:21:18,584 --> 00:21:22,650
>> MIKE RIZZO: Tak pojďme o tom mluvit
využití jQuery trochu.

441
00:21:22,650 --> 00:21:27,670
Stejně jako PHP, jQuery má zejména
láska na znak dolaru.

442
00:21:27,670 --> 00:21:30,880
Tak zjistíte, že žádný jQuery -

443
00:21:30,880 --> 00:21:32,060
dobře, není všechno.

444
00:21:32,060 --> 00:21:35,210
Někdy můžete nahradit dolar
přihlásit se slovem jQuery.

445
00:21:35,210 --> 00:21:38,980
Ale obecně, jen proto, že je to
kratší, když vidíte, že jQuery

446
00:21:38,980 --> 00:21:41,420
používá to bude s znakem dolaru.

447
00:21:41,420 --> 00:21:47,030
>> Tak tady jsme jen ukazuje na začátek
volič pro element v DOM.

448
00:21:47,030 --> 00:21:52,850
Zde máme následovat znak dolaru
otevřenými závorkami a poté citace.

449
00:21:52,850 --> 00:21:56,130
A v uvozovek jít naše voliče
pro různé prvky.

450
00:21:56,130 --> 00:21:59,810
Stejně jako v CSS, jsme potřebovali voliče, aby
moci styl různých prvků

451
00:21:59,810 --> 00:22:00,840
v rámci stránky.

452
00:22:00,840 --> 00:22:06,555
Tyto různé selektory překládat
přesně na jQuery a JavaScript,

453
00:22:06,555 --> 00:22:07,820
z větší části.

454
00:22:07,820 --> 00:22:10,120
>> Takže tady máme dot foo.

455
00:22:10,120 --> 00:22:14,780
Takže pokud si pamatujete z přednášky,
tečka prostě znamená třídu.

456
00:22:14,780 --> 00:22:18,850
Takže jsme vyberete prvek
s třídou foo.

457
00:22:18,850 --> 00:22:22,670
Takže když jsem se jít dopředu a otevřít naše
JavaScript console zde opravdu rychle

458
00:22:22,670 --> 00:22:26,830
jen demonstrovat to, jestli jsem typ
znak dolaru, vidíme, že je to nějaký

459
00:22:26,830 --> 00:22:28,090
funkce, která přijde.

460
00:22:28,090 --> 00:22:29,420
A to je jen definovaný jQuery.

461
00:22:29,420 --> 00:22:32,120
>> TOMAS REIMERS: Pro ty z vás,
neznámé, konzole je nástroj

462
00:22:32,120 --> 00:22:35,430
v Chrome, který umožňuje,
v podstatě, běh JavaScript

463
00:22:35,430 --> 00:22:36,450
aktuální stránka.

464
00:22:36,450 --> 00:22:39,420
To zjistíte, neuvěřitelně užitečné, když
jste vlastně ladění a

465
00:22:39,420 --> 00:22:42,400
musí být stejně jako to, co je aktuální
Hodnota nějaké globální proměnné nebo co

466
00:22:42,400 --> 00:22:43,910
je něco jiného?

467
00:22:43,910 --> 00:22:47,620
Je to něco jako GDB s výjimkou
že můžete skutečně

468
00:22:47,620 --> 00:22:51,600
manipulovat s prvky na stránce se
je v mnohem jednodušší módě.

469
00:22:51,600 --> 00:22:55,080
A také to není, v podstatě, zkontrolujte, zda
s vámi, než se s tím nic nedělá.

470
00:22:55,080 --> 00:22:58,660
>> Takže vzhledem k tomu, GDB může být rád, jsi
jisti, že chcete spustit další krok?

471
00:22:58,660 --> 00:22:59,830
Konzole je ve skutečnosti.

472
00:22:59,830 --> 00:23:03,690
Tak jako webová stránka je vykreslování a
dělat, co to dělá,

473
00:23:03,690 --> 00:23:05,720
Rada je také běží vedle ní.

474
00:23:05,720 --> 00:23:08,330
A vy můžete dát přičítat kód do
že konzole, která bude

475
00:23:08,330 --> 00:23:09,260
být provozován na stránce.

476
00:23:09,260 --> 00:23:12,190
>> MIKE RIZZO: Tak vstoupit do konzole,
Myslím, že bych měl stručně

477
00:23:12,190 --> 00:23:13,750
zmínit, jak na to.

478
00:23:13,750 --> 00:23:17,850
V posledních problémy, které mohou mít
ojeté Chrome je kontrolovat prvek

479
00:23:17,850 --> 00:23:20,440
funkce nebo zobrazit zdrojový stránku -

480
00:23:20,440 --> 00:23:23,870
a ty jsou přístupné jen tím, že právo
Kliknutím na stránky nebo specifické

481
00:23:23,870 --> 00:23:28,430
prvek a tím buď prohlédnout
prvek nebo zobrazení zdroje stránky.

482
00:23:28,430 --> 00:23:31,190
Můžeme také přístup JavaScript
konzole přímo

483
00:23:31,190 --> 00:23:33,630
výběr kontrolovat prvek.

484
00:23:33,630 --> 00:23:37,930
Takže pak stačí kliknout na konzole
na pravé straně.

485
00:23:37,930 --> 00:23:41,900
>> Případně můžete také pryč
na pravém horním rohu,

486
00:23:41,900 --> 00:23:46,820
který je odříznut na této obrazovce, kde
má tři vodorovné pruhy.

487
00:23:46,820 --> 00:23:52,010
A jdete dolů k nástrojům a
pak konzole JavaScript

488
00:23:52,010 --> 00:23:53,240
tady, kde můžete vidět -

489
00:23:53,240 --> 00:23:54,370
alespoň v systému Windows -

490
00:23:54,370 --> 00:23:59,680
zkratka je Shift Control J. Tak
pokud bychom chtěli vybrat prvek

491
00:23:59,680 --> 00:24:06,060
na této stránce, stejně jako jsem ukázal,
dříve, uděláme znak dolaru otevřené závorky

492
00:24:06,060 --> 00:24:08,180
a pak cituje.

493
00:24:08,180 --> 00:24:11,750
>> Zajímavostí je, obecně,
jednoduché uvozovky a dvojité uvozovky jsou

494
00:24:11,750 --> 00:24:12,370
vyměnitelná.

495
00:24:12,370 --> 00:24:16,050
Takže mnoho lidí stačí použít jeden
uvozovky, protože jsou rychlejší typ

496
00:24:16,050 --> 00:24:19,780
než uvozovkách, protože nemáte
muset držet stisknutou klávesu Shift.

497
00:24:19,780 --> 00:24:21,770
Tak jsem si jen to, že právě teď.

498
00:24:21,770 --> 00:24:24,510
>> Takže chci vybrat něco,
s třídou.

499
00:24:24,510 --> 00:24:27,200
Kontejner, jen proto, že vím, že je to
něco, co je v našich

500
00:24:27,200 --> 00:24:28,740
webové stránky právě teď.

501
00:24:28,740 --> 00:24:29,520
A já jsem stiskněte klávesu Enter.

502
00:24:29,520 --> 00:24:31,670
A vidíme, že vybral to.

503
00:24:31,670 --> 00:24:34,990
Tak to se ukáže, že
vrátil se daný objekt.

504
00:24:34,990 --> 00:24:36,620
Tak to je základní výběr.

505
00:24:36,620 --> 00:24:40,080
Pokud bychom chtěli skutečně manipulovat,
budete muset něco říkat

506
00:24:40,080 --> 00:24:43,925
na tento výběr, který
se dostaneme do později.

507
00:24:43,925 --> 00:24:49,030
>> TOMAS REIMERS: Takže stačí se podívat na to
více do hloubky, to se neliší

508
00:24:49,030 --> 00:24:52,245
než volání funkce, které jsme provedli v C.
Název funkce je zde

509
00:24:52,245 --> 00:24:52,580
trochu divný.

510
00:24:52,580 --> 00:24:55,640
Je to znak dolaru.

511
00:24:55,640 --> 00:24:57,010
Je to jen název funkce.

512
00:24:57,010 --> 00:24:58,810
Na tom není nic zvláštního.

513
00:24:58,810 --> 00:25:00,450
>> Máme otevřené závorky.

514
00:25:00,450 --> 00:25:03,880
Pak máme jeden argument, který
v tomto případě se stane, že je řetězec,

515
00:25:03,880 --> 00:25:05,680
, což je pro něj volič.

516
00:25:05,680 --> 00:25:08,130
A pak, máme
uzavřená závorka.

517
00:25:08,130 --> 00:25:09,960
To je to.

518
00:25:09,960 --> 00:25:11,500
>> Není to tak diametrálně odlišná.

519
00:25:11,500 --> 00:25:12,900
I když to vypadá velmi divně.

520
00:25:12,900 --> 00:25:17,220
A to může být trochu, lepení
bod pro mnoho lidí.

521
00:25:17,220 --> 00:25:21,460
>> MIKE RIZZO: Takže podobně, pokud bychom chtěli
vyberte prvek, který má ID,

522
00:25:21,460 --> 00:25:23,470
Nyní chceme vybrat podle
ID namísto třídy.

523
00:25:23,470 --> 00:25:28,080
Bylo by to něco podobného, ​​kde jsme
prostě ostrý znak pro ID.

524
00:25:28,080 --> 00:25:33,576
Takže jsme vyberete zde vše
prvky, které mají ID bar.

525
00:25:33,576 --> 00:25:35,400
>> TOMAS REIMERS: A to rozšiřuje.

526
00:25:35,400 --> 00:25:36,450
To CSS rozšiřuje.

527
00:25:36,450 --> 00:25:42,260
Stejně jako v CSS, můžete si vybrat vše
odkazy, které mají třídy foo.

528
00:25:42,260 --> 00:25:43,420
Tady je to totéž.

529
00:25:43,420 --> 00:25:52,750
>> Dalo by se udělat a.foo, které by výběr
všechny odkazy s třídním foo.

530
00:25:52,750 --> 00:25:58,860
Dalo by se udělat ostrou tyč, která by
vyberte odkaz s ID baru a tak,

531
00:25:58,860 --> 00:25:59,770
dále a tak dále.

532
00:25:59,770 --> 00:26:02,120
Každý volič CSS je platný
jQuery voliče.

533
00:26:02,120 --> 00:26:03,370
>> MIKE RIZZO: Jo.

534
00:26:03,370 --> 00:26:07,996

535
00:26:07,996 --> 00:26:11,460
OK, takže teď pojďme do trochu
manipulace, které můžeme udělat s

536
00:26:11,460 --> 00:26:12,870
naše jQuery.

537
00:26:12,870 --> 00:26:19,280
Takže jQuery má zvláštní typ
notace, kde stačí použít

538
00:26:19,280 --> 00:26:20,170
tečka na konci.

539
00:26:20,170 --> 00:26:23,340
A vy můžete myslet na to jako na
C, jak jsme měli různé structs.

540
00:26:23,340 --> 00:26:27,110
A jít do těch struktur, byste
použijte tečku, aby se do nich.

541
00:26:27,110 --> 00:26:28,480
>> To je druh, něco podobného.

542
00:26:28,480 --> 00:26:33,570
Teprve nyní máme funkce v rámci této
volič, který můžeme nazvat na něj.

543
00:26:33,570 --> 00:26:38,640
Takže tady je první příklad
můžete vidět, je selektor CSS.

544
00:26:38,640 --> 00:26:45,290
A v podstatě, co to dělá, je to
se vztahuje na první prvek CSS na to

545
00:26:45,290 --> 00:26:46,230
věc, kterou jste vybrali -

546
00:26:46,230 --> 00:26:47,720
Tento prvek, který jste vybrali -

547
00:26:47,720 --> 00:26:49,290
s hodnotou tohoto.

548
00:26:49,290 --> 00:26:55,390
>> TOMAS REIMERS: Tak snadný překlad
že by bylo, kdyby jQuery, v podstatě,

549
00:26:55,390 --> 00:26:57,790
jen se foo.

550
00:26:57,790 --> 00:27:05,480
A pak v CSS řekl,
barva červená a zavřít.

551
00:27:05,480 --> 00:27:06,670
Je to stejný nápad.

552
00:27:06,670 --> 00:27:08,800
Co to dělá, je to zvoleno
všechny foo prvky.

553
00:27:08,800 --> 00:27:10,170
A pak se to aplikovat.

554
00:27:10,170 --> 00:27:15,884
Něco, barva nemovitosti
se rovná červené.

555
00:27:15,884 --> 00:27:21,070
>> MIKE RIZZO: Podobně můžeme také změnit
skutečný obsah toho, co je

556
00:27:21,070 --> 00:27:24,870
ukazuje na HTML stránky, která
Je opravdu skvělé, protože to znamená, že vaše

557
00:27:24,870 --> 00:27:28,095
Webové stránky mohou být nyní zcela dynamický
a nemusí být statická

558
00:27:28,095 --> 00:27:31,660
které tisknete s použitím PHP
na samém začátku

559
00:27:31,660 --> 00:27:33,320
Stránka se načítá.

560
00:27:33,320 --> 00:27:36,810
Takže tady, když jsme chtěli změnit
aktuální HTML stránky, by nyní

561
00:27:36,810 --> 00:27:43,550
volání funkce HTML, který pak už jen
vložky, co jsme se určují na

562
00:27:43,550 --> 00:27:45,390
že prvek, který jsme si vybrali.

563
00:27:45,390 --> 00:27:49,810
Takže tady máme výběr prvku s
class foo a pak řekl, že je to HTML

564
00:27:49,810 --> 00:27:52,200
teď je to hello world.

565
00:27:52,200 --> 00:27:55,600
>> TOMAS REIMERS: A když se nad tím zamyslíte
jaké jsou užitečné aplikace

566
00:27:55,600 --> 00:28:00,800
tohle, tohle CSS jedno, první věc, která
můžete začít přemýšlet o tom,

567
00:28:00,800 --> 00:28:03,070
z hlediska dokonce drop-down menu.

568
00:28:03,070 --> 00:28:08,350
Dalo by se začít dělat věci, jako, když
uživatel se vznáší nad horní části

569
00:28:08,350 --> 00:28:11,970
z rozbalovacího, chcete, aby se
spodní část viditelná.

570
00:28:11,970 --> 00:28:12,540
Je to tak?

571
00:28:12,540 --> 00:28:15,610
>> Takže v CSS, máme vlastnosti
udělat něco viditelného.

572
00:28:15,610 --> 00:28:19,330
Věci jako displej tlustého střeva nikdo
by bylo neviditelné.

573
00:28:19,330 --> 00:28:21,190
Zobrazit blok by se zobrazil.

574
00:28:21,190 --> 00:28:25,860
Nebo dokonce, pokud chcete jít jednodušší, vás
mít věci, jako je viditelnosti se rovná

575
00:28:25,860 --> 00:28:27,520
viditelné, a viditelnost se rovná skryté.

576
00:28:27,520 --> 00:28:30,330

577
00:28:30,330 --> 00:28:34,780
>> A můžete začít provádět věci
jako rozbalovací menu vpravo

578
00:28:34,780 --> 00:28:38,410
poté, co se dostanete přes myšlenky o tom, jak
můžete zjistit, když se to otevře,

579
00:28:38,410 --> 00:28:39,850
které dostaneme přes velmi stručně.

580
00:28:39,850 --> 00:28:42,160
Ale můžeme začít vidět
aplikace to.

581
00:28:42,160 --> 00:28:45,540
V podobném smyslu, pokud jste měli zkusit
a realizovat, řekněme, chatu

582
00:28:45,540 --> 00:28:48,620
motoru a chcete, aby se trochu
bublinu přijít kdykoli jste

583
00:28:48,620 --> 00:28:52,880
dostal novou zprávu, jakmile se dostanete
nová zpráva, můžete si trochu

584
00:28:52,880 --> 00:28:55,890
bublinu přijít změnou
HTML stránky, ne?

585
00:28:55,890 --> 00:29:00,540
Přidáním že další bublinu
s extra textu tam.

586
00:29:00,540 --> 00:29:01,140
Jo?

587
00:29:01,140 --> 00:29:07,750
>> DIVÁKŮ: Takže byste vložit to do
HTML kód něco jako

588
00:29:07,750 --> 00:29:10,534
[Neslyšitelný]?

589
00:29:10,534 --> 00:29:12,940
>> MIKE RIZZO: Správně.

590
00:29:12,940 --> 00:29:16,190
Jo, dostaneme se k tomu
v trochu.

591
00:29:16,190 --> 00:29:18,810
Jo, je to podobné
trochu PHP.

592
00:29:18,810 --> 00:29:21,240
Ne tak docela podobné.

593
00:29:21,240 --> 00:29:24,730
>> Dobrý rozdíl, aby se to, co to
je ve skutečnosti upravujete, když jsme editovat

594
00:29:24,730 --> 00:29:28,480
stránky, protože to nebude
editaci skutečný soubor, který je

595
00:29:28,480 --> 00:29:31,380
uchovávány na serveru, protože svět
by neměly mít oprávnění

596
00:29:31,380 --> 00:29:32,610
editovat soubory.

597
00:29:32,610 --> 00:29:36,080
To je právě upravujete, co je na stránce
a to, co je zobrazeno v

598
00:29:36,080 --> 00:29:36,950
prohlížeč.

599
00:29:36,950 --> 00:29:40,340
Takže pokud jste se po načtení stránky,
říci, mazání něco jako my

600
00:29:40,340 --> 00:29:44,730
vidět, co můžeme udělat s remove volání,
že věc by se pak znovu objeví.

601
00:29:44,730 --> 00:29:48,590
>> TOMAS REIMERS: Takže jediný způsob, jak přemýšlet o tom,
to je, když jsem počítač a

602
00:29:48,590 --> 00:29:50,170
Mike je, tak nějak, serveru.

603
00:29:50,170 --> 00:29:53,850
Co se stane, je, že budu
zeptejte se Mike, hej, mohu mít kopii

604
00:29:53,850 --> 00:29:54,630
tato webová stránka?

605
00:29:54,630 --> 00:29:56,190
A on mi dá jeho kopii.

606
00:29:56,190 --> 00:29:57,430
>> Ne, to není originální věc.

607
00:29:57,430 --> 00:29:58,620
Je to jen kopie.

608
00:29:58,620 --> 00:30:00,450
A pak by to bylo, oh,
tam je JavaScript tady.

609
00:30:00,450 --> 00:30:02,450
Je jasné, že bych měl upravit
Stránka se takhle.

610
00:30:02,450 --> 00:30:04,250
A já jsem v úpravách kopii.

611
00:30:04,250 --> 00:30:05,920
>> Ale to není znemožnění
aktuální kopie.

612
00:30:05,920 --> 00:30:08,480
A když jsem se ho znovu zeptat
aktualizovat stránku, -

613
00:30:08,480 --> 00:30:10,060
Ahoj, můžu mít čistou kopii -

614
00:30:10,060 --> 00:30:11,440
že se chystá dát mi
další čisté kopie.

615
00:30:11,440 --> 00:30:14,240
A pak, já udělám to samé
jako, oh, to JS tady, že říká, že

616
00:30:14,240 --> 00:30:14,866
upravit to.

617
00:30:14,866 --> 00:30:17,460
A budu to dělat.

618
00:30:17,460 --> 00:30:20,930
>> MIKE RIZZO: Tak to opravdu super věc
které můžete dělat s jQuery je

619
00:30:20,930 --> 00:30:24,350
ve skutečnosti přidat různé typy
animací na vaše stránky.

620
00:30:24,350 --> 00:30:27,440
Já nevím, jestli jste někdy viděli, kde
snažíte se vyplnit formulář

621
00:30:27,440 --> 00:30:31,250
on-line a nechcete vyplnit
věci správně.

622
00:30:31,250 --> 00:30:33,440
Tak trochu to klouže dolů
nahoře a říká, že

623
00:30:33,440 --> 00:30:34,820
Neudělal to správně.

624
00:30:34,820 --> 00:30:36,260
Zkuste to prosím znovu.

625
00:30:36,260 --> 00:30:37,890
A pak, že by i jen klouzat nahoru.

626
00:30:37,890 --> 00:30:40,710
>> Ukázalo se, že jQuery má vestavěnou funkcí
že aby to všechno

627
00:30:40,710 --> 00:30:44,180
animace opravdu snadné.

628
00:30:44,180 --> 00:30:46,750
Takže tam je první fade
out funkce, které

629
00:30:46,750 --> 00:30:47,710
můžete volat na něco.

630
00:30:47,710 --> 00:30:55,650
A to je způsob, jak změnit CSS na
tento prvek v animovaném způsobem.

631
00:30:55,650 --> 00:30:58,480
Tak to trvá bez ohledu na prvek
říkáte, že mizí na.

632
00:30:58,480 --> 00:31:03,990
A pak se pomalu mění, že je to krytí
dokud to jde zcela transparentní.

633
00:31:03,990 --> 00:31:07,330
>> TOMAS REIMERS: další populární
je sklouznout dolů, což umožní

634
00:31:07,330 --> 00:31:08,800
něco, co se objeví posunutím dolů.

635
00:31:08,800 --> 00:31:12,840
Takže v případě, že v nabídce pokles dolů,
znovu, když jsme se dozvěděli, jak rozpoznat

636
00:31:12,840 --> 00:31:15,310
když to bylo vznášel nad,
můžete jen říci toto dno

637
00:31:15,310 --> 00:31:16,910
část posuňte se dolů.

638
00:31:16,910 --> 00:31:19,270
A pak, zdá se,
posunutím dolů.

639
00:31:19,270 --> 00:31:22,042

640
00:31:22,042 --> 00:31:26,590
>> MIKE RIZZO: A pak, máte-li
nějaký druh animace na paměti, že

641
00:31:26,590 --> 00:31:29,080
jQuery nemusí nutně poskytovat.

642
00:31:29,080 --> 00:31:32,690
Například, řekněme, jQuery
se poskytují vám se skluzavkou

643
00:31:32,690 --> 00:31:33,750
dolů a posuňte nahoru.

644
00:31:33,750 --> 00:31:36,740
No, řekněme, že jste chtěl klouzat
něco z levé nebo z

645
00:31:36,740 --> 00:31:39,880
správný druh jako CS50
Hlavní strana dělá vždy, když

646
00:31:39,880 --> 00:31:42,080
jdete do nového panelu.

647
00:31:42,080 --> 00:31:45,030
Ty by se pak pravděpodobně
implementovat sami pomocí

648
00:31:45,030 --> 00:31:49,310
animovat funkce v jQuery.

649
00:31:49,310 --> 00:31:51,350
>> Takže podobně, stačí animovat.

650
00:31:51,350 --> 00:31:55,850
A pak, v něm trvá
Slovník různých hodnot

651
00:31:55,850 --> 00:31:57,340
že jste měl projít.

652
00:31:57,340 --> 00:32:06,960
Takže tady, pokud bychom chtěli animovat
foo element tak, že jeho šířka buď

653
00:32:06,960 --> 00:32:10,880
rozpíná nebo naopak smršťuje až 80 bodů,
v závislosti na tom, co v současné době je.

654
00:32:10,880 --> 00:32:14,100
Rádi bychom jen projít, že jako
Argument v něm.

655
00:32:14,100 --> 00:32:18,060
>> Animace také nějaké další argumenty
že byste mohli projít, například,

656
00:32:18,060 --> 00:32:21,150
rychlost animace
které chcete dát.

657
00:32:21,150 --> 00:32:26,220
A k tomu bych jen říct,
rychle Google jQuery animace.

658
00:32:26,220 --> 00:32:31,710
A pak, čímž se na tuto stránku, můžete
vidět, že má spoustu různé

659
00:32:31,710 --> 00:32:33,560
vlastnosti, které u nás můžete absolvovat ji.

660
00:32:33,560 --> 00:32:35,990
>> A já povzbudit vás - vždy, když přišel
přes něco, co nechcete

661
00:32:35,990 --> 00:32:40,390
vědět, nebo jen chcete dozvědět více o
zejména způsob, který můžete volat

662
00:32:40,390 --> 00:32:41,270
na něco -

663
00:32:41,270 --> 00:32:44,440
jen Google to. jQuery je velmi
dobře zdokumentovány.

664
00:32:44,440 --> 00:32:49,140
A často dokonce existuje spousta
příklady, které poskytují pro vás.

665
00:32:49,140 --> 00:32:52,470
Pokud se posunout dolů -

666
00:32:52,470 --> 00:32:53,720
směrem dolů -

667
00:32:53,720 --> 00:32:57,660

668
00:32:57,660 --> 00:32:59,190
které můžeme použít, stejně.

669
00:32:59,190 --> 00:33:02,480
>> Opět platí, že pokud developer vlastně jde
přes potíže psaní

670
00:33:02,480 --> 00:33:05,810
knihovna, oni obvykle chtějí
někdo ji používat.

671
00:33:05,810 --> 00:33:09,400
Takže spolu se chystá
být dokumentace.

672
00:33:09,400 --> 00:33:12,270
A že dokumentace může být obvykle
najdete na stránce projektu, která je

673
00:33:12,270 --> 00:33:14,970
Proto jsme vám dali, že původní místo ve
začátek, který vás spojuje se

674
00:33:14,970 --> 00:33:18,080
Stránky projektu, takže můžete
vidět, že v dokumentaci.

675
00:33:18,080 --> 00:33:22,670
>> Typicky, stránka projektu v případě,
z [neslyšitelné], to vám řekl o

676
00:33:22,670 --> 00:33:23,940
názvy tříd.

677
00:33:23,940 --> 00:33:27,250
V případě JavaScript, dává
si název funkce.

678
00:33:27,250 --> 00:33:35,310
Mimochodem, když jsme přejděte až na vrchol,
rychlé boční poznámka o funkcích je

679
00:33:35,310 --> 00:33:39,080
když vidíte, funkce implementované
takhle se těžko

680
00:33:39,080 --> 00:33:43,800
držáky ve středu, to znamená, že
že majetek je volitelná.

681
00:33:43,800 --> 00:33:44,750
Jen heads up.

682
00:33:44,750 --> 00:33:47,350
Viděl jsem spoustu otázek
o tom.

683
00:33:47,350 --> 00:33:50,370
>> Takže zde můžeme vidět, že
živý se vlastnosti

684
00:33:50,370 --> 00:33:51,800
jako nezbytné argumentaci.

685
00:33:51,800 --> 00:33:54,870
A všechno ostatní je volitelný.

686
00:33:54,870 --> 00:33:56,136
Boční Poznámka -

687
00:33:56,136 --> 00:33:58,090
můžete myslet na to, třídění
z, jako manuálové stránky.

688
00:33:58,090 --> 00:34:04,275
Manuálové stránky jsou dokumentace pro C a
pro mnoho dalších věcí, stejně.

689
00:34:04,275 --> 00:34:11,020
>> MIKE RIZZO: Tak jsme se dozvěděli, jak se
změnit jiné CSS na stránce,

690
00:34:11,020 --> 00:34:14,040
animovat jej a vyjměte přidat HTML.

691
00:34:14,040 --> 00:34:16,889
Ale jeden z opravdu nejsilnější
věci, o JavaScriptu

692
00:34:16,889 --> 00:34:18,270
a zejména jQuery -

693
00:34:18,270 --> 00:34:22,570
to, co můžete udělat, je reagovat na
různé prvky, které se dějí.

694
00:34:22,570 --> 00:34:25,380
Například, máme zde
obslužnou rutinu události.

695
00:34:25,380 --> 00:34:28,210
A to právě znamená, že vždy, když to
událost stane, budeme s ní zacházet v

696
00:34:28,210 --> 00:34:29,280
určitým způsobem.

697
00:34:29,280 --> 00:34:35,159
>> Tak tady je obecný jQuery události
Psovod je tečka na.

698
00:34:35,159 --> 00:34:42,949
A pak, první věc, kterou jste zadali
Je to událost, že by

699
00:34:42,949 --> 00:34:43,810
bude poslouchat.

700
00:34:43,810 --> 00:34:45,610
Tak tady je to cvaknutí, které
jsme čekali.

701
00:34:45,610 --> 00:34:49,250
>> TOMAS REIMERS: Případně, máte
na visení, který je velmi populární.

702
00:34:49,250 --> 00:34:52,000
Takže zpět k mému rozbalovací nabídce nápad.

703
00:34:52,000 --> 00:34:54,239
Budete mít horní jeden na visu.

704
00:34:54,239 --> 00:34:56,096
A pak byste mohl změnit.

705
00:34:56,096 --> 00:34:56,830
>> MIKE RIZZO: Správně.

706
00:34:56,830 --> 00:35:01,680
A pak, když se to stane, je to jen
vykonává tuto funkci, že dáme

707
00:35:01,680 --> 00:35:05,080
jako argument, a že
upozorní ahoj a ahoj.

708
00:35:05,080 --> 00:35:08,900
>> TOMAS REIMERS: Takže v případě
JavaScript, toto je místo, musíme

709
00:35:08,900 --> 00:35:12,970
odstranit sami od C. Můžeme skutečně
se funkce jako argumenty.

710
00:35:12,970 --> 00:35:15,940
A existuje spousta opravdu
komplexní způsoby, jak to udělat.

711
00:35:15,940 --> 00:35:17,940
Budeme podporovat jednu stranu,
které je můžete definovat

712
00:35:17,940 --> 00:35:19,270
pracovat tam.

713
00:35:19,270 --> 00:35:22,540
>> Takže když se ptáte na funkci jako
parametr, jste v podstatě jen

714
00:35:22,540 --> 00:35:24,500
bude definovat funkce
na místě.

715
00:35:24,500 --> 00:35:27,090
A tak, jak definovat funkci
v JavaScriptu je vám

716
00:35:27,090 --> 00:35:28,820
doslova říkají funkce.

717
00:35:28,820 --> 00:35:30,130
Poté, obvykle, název
funkce.

718
00:35:30,130 --> 00:35:32,510
Ale my nikdy odkazovat
tato funkce znovu.

719
00:35:32,510 --> 00:35:34,040
Tak jsme ho nechat bezejmenný.

720
00:35:34,040 --> 00:35:40,440
>> Pak závorky, pak kudrnatý
šle, a pak kód v to.

721
00:35:40,440 --> 00:35:42,540
Takže chápeme to může
být trochu matoucí.

722
00:35:42,540 --> 00:35:45,180
Tak jsme vám obecný tvar
co rutina událost vypadá

723
00:35:45,180 --> 00:35:47,790
níže, která je na události.

724
00:35:47,790 --> 00:35:50,598
A pak, váš kód uvnitř, že.

725
00:35:50,598 --> 00:35:52,478
>> MIKE RIZZO: Existují nějaké
otázky o tom?

726
00:35:52,478 --> 00:35:54,818
To může být trochu matoucí
Poprvé ji vidět.

727
00:35:54,818 --> 00:35:57,550
>> TOMAS REIMERS: Vy opravdu chcete
otevřít soubor a ukázat jim některé

728
00:35:57,550 --> 00:35:58,155
jQuery právě teď?

729
00:35:58,155 --> 00:35:59,853
>> MIKE RIZZO: Jo, jdem na to.

730
00:35:59,853 --> 00:36:00,256
OK.

731
00:36:00,256 --> 00:36:02,490
>> TOMAS REIMERS: Tak teď jsme
v přístroji.

732
00:36:02,490 --> 00:36:07,730
A to, co jsme udělali je, že jsme si vzít
svoboda vytvářet jak je index.html

733
00:36:07,730 --> 00:36:10,100
soubor, který odkazuje na
soubor JavaScript.

734
00:36:10,100 --> 00:36:12,880
A můžeme otevřít -

735
00:36:12,880 --> 00:36:15,170
jo.

736
00:36:15,170 --> 00:36:16,630
No, to dělá dvě věci.

737
00:36:16,630 --> 00:36:18,350
>> Prvním z nich je, že odkazy na
soubor JavaScript.

738
00:36:18,350 --> 00:36:21,250
A uvidíme, že až tady.

739
00:36:21,250 --> 00:36:25,340
Vidíme, že v čele
HTML dokument, a to zejména.

740
00:36:25,340 --> 00:36:28,260
Takže uvidíte tam, že
jsme se v podstatě říci, SRC,

741
00:36:28,260 --> 00:36:29,590
což je zkratka pro zdroj.

742
00:36:29,590 --> 00:36:30,630
A to je URL.

743
00:36:30,630 --> 00:36:32,700
>> Tak tady si můžete říct, že jsme si
včetně jQuery.

744
00:36:32,700 --> 00:36:34,290
A my jsme také skripty.

745
00:36:34,290 --> 00:36:40,630
Jiný způsob, jak zahrnout JavaScript je
, který může obsahovat vložené skript

746
00:36:40,630 --> 00:36:44,600
tag, jak jsme se ve spodní části, kde se
říká, že typ skriptu je textový JavaScript.

747
00:36:44,600 --> 00:36:46,960
>> Takže říkáme, poslouchej, my jsme
o zařadit skript.

748
00:36:46,960 --> 00:36:51,890
A typ tohoto skriptu je
JavaScript, což je typ textu.

749
00:36:51,890 --> 00:36:52,550
Velmi jednoduché.

750
00:36:52,550 --> 00:36:56,490
>> MIKE RIZZO: Takže to, druh, k míči se
Váš dotaz o tom, jak jsou

751
00:36:56,490 --> 00:37:02,340
JavaScript v našich souborech, protože když jsme se
se PHP, děláme něco takového.

752
00:37:02,340 --> 00:37:07,570
A pak, máme své PHP funkce -
řekněme, že zásoby dělat

753
00:37:07,570 --> 00:37:09,150
co s tím -

754
00:37:09,150 --> 00:37:10,490
jde tam.

755
00:37:10,490 --> 00:37:13,860
Nicméně, nyní máme tagy skriptu
že jsme se dát, které jsou ve skutečnosti

756
00:37:13,860 --> 00:37:19,470
součástí HTML sám, protože to není
předstírá, že soubor HTML, jako to

757
00:37:19,470 --> 00:37:25,070
je v PHP, protože pokud jste skutečně jít
a podívat se na zdroj stránky,

758
00:37:25,070 --> 00:37:28,430
uvidíte tyto tagy skriptu tam
s JavaScript spojené s

759
00:37:28,430 --> 00:37:29,800
jim v tom.

760
00:37:29,800 --> 00:37:31,760
>> Takže, pokud bychom chtěli
napsat nějaký JavaScript -

761
00:37:31,760 --> 00:37:37,110
řekněme, že bychom chtěli změnit tělo
protože teď nemám

762
00:37:37,110 --> 00:37:40,020
všechny ostatní značky, které jsem si opravdu
upravovat vedle těla.

763
00:37:40,020 --> 00:37:42,450
Řekněme, že jsem chtěl, aby
změnit CSS z toho.

764
00:37:42,450 --> 00:37:46,190
Takže budeme pokračovat a změna
barva to na červenou.

765
00:37:46,190 --> 00:37:47,380
>> Tak jsem soubor uložte.

766
00:37:47,380 --> 00:37:52,700
Vraťme se na našich webových stránkách, obnovit,
a to automaticky dělá

767
00:37:52,700 --> 00:37:55,920
, protože to nevypadalo, jako by čekal,
vůbec, protože jsme nebyli poslech

768
00:37:55,920 --> 00:37:59,450
na akci nebo něco podobného.

769
00:37:59,450 --> 00:38:02,800
>> TOMAS REIMERS: Takže když se vrátíme k tomu
soubor zejména - HTML

770
00:38:02,800 --> 00:38:04,710
soubor - co budete
vidět je máme -

771
00:38:04,710 --> 00:38:06,810
si uvědomit, že toto je načten,
druh, chronologicky.

772
00:38:06,810 --> 00:38:09,910
Takže máme první hlavu.
načte ty dva soubory.

773
00:38:09,910 --> 00:38:10,800
Pak jdeme k tělu.

774
00:38:10,800 --> 00:38:11,640
A vidíme, Hello World.

775
00:38:11,640 --> 00:38:13,030
Tak jsme činí Hello World.

776
00:38:13,030 --> 00:38:15,240
>> A pak poslední věc, kterou máme
je máme tag script.

777
00:38:15,240 --> 00:38:20,880
Tak to běží tag script, protože je to
neříká to nic čekat.

778
00:38:20,880 --> 00:38:24,700
A to je to nejzákladnější
způsob, jak spustit JavaScript.

779
00:38:24,700 --> 00:38:29,200
>> Díky, že řekl, můžete si dát skript
označit v záhlaví jen

780
00:38:29,200 --> 00:38:31,240
ukázat tento bod?

781
00:38:31,240 --> 00:38:34,450

782
00:38:34,450 --> 00:38:35,700
A spustit to.

783
00:38:35,700 --> 00:38:38,880

784
00:38:38,880 --> 00:38:41,070
Budeme všimnout, že
nezměnil barvu.

785
00:38:41,070 --> 00:38:44,210
A to je jeden z problémů
JavaScript je, že věci jsou načteny

786
00:38:44,210 --> 00:38:45,930
v chronologickém pořadí.

787
00:38:45,930 --> 00:38:49,750
>> A tak v době, kdy tento kód
běžel, jsme si vybrali -

788
00:38:49,750 --> 00:38:52,530
zpět -

789
00:38:52,530 --> 00:38:53,670
tag tělo.

790
00:38:53,670 --> 00:38:57,560
Tag tělo ještě neexistuje, protože
JavaScript je v souladu s HTML.

791
00:38:57,560 --> 00:39:01,790
Takže prohlížeč je jako vyberte těle.

792
00:39:01,790 --> 00:39:02,760
Je tu ještě žádná taková věc.

793
00:39:02,760 --> 00:39:03,600
Takže můžeme ignorovat.

794
00:39:03,600 --> 00:39:05,330
A budeme pokračovat.

795
00:39:05,330 --> 00:39:07,200
>> A pak jsme se definovat tag těla.

796
00:39:07,200 --> 00:39:09,670
Ale nikdy se aktualizuje.

797
00:39:09,670 --> 00:39:12,560
Takže, když jste provádění skriptu
tagy, ujistěte se, že místo

798
00:39:12,560 --> 00:39:15,502
po tagu body.

799
00:39:15,502 --> 00:39:16,820
Další snímek.

800
00:39:16,820 --> 00:39:17,830
>> MIKE RIZZO: OK.

801
00:39:17,830 --> 00:39:19,330
Tak jsme něco změnili.

802
00:39:19,330 --> 00:39:21,910
Ale to nevypadalo, jako by reagoval na
nám vůbec, protože je to jen trochu

803
00:39:21,910 --> 00:39:24,150
to udělal, jakmile načtení stránky.

804
00:39:24,150 --> 00:39:27,700
Takže teď, místo toho dělal to, proč
Co kdybychom přidat obslužnou rutinu události.

805
00:39:27,700 --> 00:39:31,020
>> Takže pojďme něco udělat
k tělu znovu.

806
00:39:31,020 --> 00:39:33,490
A řekněme, že jsme to na -

807
00:39:33,490 --> 00:39:34,500
klepněte na tlačítko.

808
00:39:34,500 --> 00:39:35,750
Budeme-li přidat funkci.

809
00:39:35,750 --> 00:39:38,270

810
00:39:38,270 --> 00:39:39,690
>> Tomáš Reimers: Změňme
je to barva na červenou znovu.

811
00:39:39,690 --> 00:39:40,000
Proč ne?

812
00:39:40,000 --> 00:39:41,680
>> MIKE RIZZO: Jo, pojďme změnit
jeho "barvu na červenou znovu.

813
00:39:41,680 --> 00:39:46,310

814
00:39:46,310 --> 00:39:46,900
Dobrá.

815
00:39:46,900 --> 00:39:48,480
Takže pojďme znovu načtete stránku.

816
00:39:48,480 --> 00:39:49,530
OK, uvidíme -

817
00:39:49,530 --> 00:39:52,290
jak se očekávalo, to není zase ještě červená.

818
00:39:52,290 --> 00:39:53,610
Ale pak můžeme jít do toho a klikněte na něj.

819
00:39:53,610 --> 00:39:54,270
>> TOMAS REIMERS: A to zčervená.

820
00:39:54,270 --> 00:39:56,090
>> MIKE RIZZO: A to dělá
zčervená, jak se očekávalo.

821
00:39:56,090 --> 00:39:59,010
>> TOMAS REIMERS: A vidíme, jak
můžeme začít budovat velmi jednoduchý

822
00:39:59,010 --> 00:40:00,170
interakce.

823
00:40:00,170 --> 00:40:03,850
Další věci, které jsme mohli chtít udělat, je,
pokud nechceme, aby se tělo

824
00:40:03,850 --> 00:40:07,230
barva červená, pojďme dělat HTML
pozadí barva červená.

825
00:40:07,230 --> 00:40:08,480
Stejně tak je to stejné CSS.

826
00:40:08,480 --> 00:40:19,960

827
00:40:19,960 --> 00:40:23,320
>> A když jsme se to změnit, můžeme vidět
Velmi dramatický efekt změny

828
00:40:23,320 --> 00:40:25,510
celá stránka.

829
00:40:25,510 --> 00:40:29,100
Takže znovu, pokud jste se provádí věci,
můžete mít jednu složku

830
00:40:29,100 --> 00:40:30,150
který je určen k klikl na.

831
00:40:30,150 --> 00:40:32,710
Řekněme, že tlačítko Exit a
celý další komponenty,

832
00:40:32,710 --> 00:40:33,830
který je určen k reakci.

833
00:40:33,830 --> 00:40:35,755
Takže byste odstranit okno
když se to stane.

834
00:40:35,755 --> 00:40:39,341

835
00:40:39,341 --> 00:40:40,700
>> MIKE RIZZO: OK.

836
00:40:40,700 --> 00:40:42,200
Jen jako příklad -

837
00:40:42,200 --> 00:40:44,400
jste nedostal vidět dříve -

838
00:40:44,400 --> 00:40:47,500
Ukážu vám, jak to vypadá
Líbí se mi, když jsme se schovat něco.

839
00:40:47,500 --> 00:40:52,220
Takže budu pokračovat a to posunutím nahoru.

840
00:40:52,220 --> 00:40:54,440
>> TOMAS REIMERS: Chcete zabalit, že v
Typ odstavec dříve než my, že?

841
00:40:54,440 --> 00:40:55,132
>> MIKE RIZZO: OK.

842
00:40:55,132 --> 00:40:59,135
Jo, proč ne my, že jen proto,
můžeme vybrat to trochu víc.

843
00:40:59,135 --> 00:41:00,490
>> TOMAS Reimers: A pojďme
dát třídu.

844
00:41:00,490 --> 00:41:01,740
>> MIKE RIZZO: Jo.

845
00:41:01,740 --> 00:41:06,575

846
00:41:06,575 --> 00:41:09,920
OK, tak se pojďme podívat.

847
00:41:09,920 --> 00:41:14,820
Namísto výběru vlastní tělo
teď, budu jen vybrat vše, co se

848
00:41:14,820 --> 00:41:18,780
třída ahoj, který jsme tady
jen jednu věc.

849
00:41:18,780 --> 00:41:20,900
Takže bychom neměli mít na
obávat, že.

850
00:41:20,900 --> 00:41:23,080
>> Takže budu aktualizovat jej.

851
00:41:23,080 --> 00:41:24,230
Půjdu do toho a klikněte na něj.

852
00:41:24,230 --> 00:41:27,890
A to, trochu, udělal divný Slide
se věc, která nevypadala, že

853
00:41:27,890 --> 00:41:29,580
atraktivní.

854
00:41:29,580 --> 00:41:31,060
Obecně platí, že vypadají docela pěkné.

855
00:41:31,060 --> 00:41:32,720
Myslím, že tento - pro některé
důvod - ne.

856
00:41:32,720 --> 00:41:36,640
Budu prostě dělat fade out, takže
se můžete podívat na to taky.

857
00:41:36,640 --> 00:41:38,100
Mnohem hezčí.

858
00:41:38,100 --> 00:41:41,150
>> A pak, když jsem otevřít JavaScript
konzole znovu a chceme vidět, co

859
00:41:41,150 --> 00:41:43,900
to vypadá, jako když jsme slábnout ji dovnitř

860
00:41:43,900 --> 00:41:46,920
Nyní, jen říkám slábnout v tom.

861
00:41:46,920 --> 00:41:48,830
A to vybledne zpět dovnitř

862
00:41:48,830 --> 00:41:56,150
>> Podobně bychom mohli vlastně také předat
argument vyblednout nebo fade out,

863
00:41:56,150 --> 00:41:57,640
která je, druh, rychlost to.

864
00:41:57,640 --> 00:42:02,220
Tak pojďme do toho a že chceme
to jít pomalu mizí dovnitř

865
00:42:02,220 --> 00:42:04,250
Takže myslím, že to ještě zdálo,
docela rychle.

866
00:42:04,250 --> 00:42:06,180
Ale to bylo pomalejší než dříve.

867
00:42:06,180 --> 00:42:10,340
>> TOMAS REIMERS: A chcete-li najít
Více informací o těchto věcech, opět,

868
00:42:10,340 --> 00:42:13,410
stačí jít do dokumentace jQuery,
který jsme vám dal, a přečtěte si

869
00:42:13,410 --> 00:42:13,735
přes to.

870
00:42:13,735 --> 00:42:15,790
Oni dokumentovat jejich funkce
neuvěřitelně dobře.

871
00:42:15,790 --> 00:42:18,622

872
00:42:18,622 --> 00:42:19,570
>> MIKE RIZZO: OK.

873
00:42:19,570 --> 00:42:21,560
Takže si myslím, vraťme se k tomu.

874
00:42:21,560 --> 00:42:23,490
A můžeme mluvit o naší poslední stránce.

875
00:42:23,490 --> 00:42:24,690
No, můžeme skončit s Bootstrap.

876
00:42:24,690 --> 00:42:27,140
A pak si otevřete ji
na některé otázky.

877
00:42:27,140 --> 00:42:30,180
A jestli vy máte nějaké nápady, které
byste chtěli, aby se pokusili hodit nahoru a vidět

878
00:42:30,180 --> 00:42:34,150
v případě, že je můžeme realizovat s
JavaScript rychle.

879
00:42:34,150 --> 00:42:37,890
>> Takže opravdu rychle o Bootstrap, která
byla automaticky zahrnuty do

880
00:42:37,890 --> 00:42:41,700
Vaše poslední problém nastavit ve složce CSS
a ve skutečnosti spojeny s ve vaší

881
00:42:41,700 --> 00:42:43,190
header.PHP.

882
00:42:43,190 --> 00:42:46,740
Takže byste mohli jste přidali tříd, které
jsou definovány v rámci Bootstrap k němu.

883
00:42:46,740 --> 00:42:50,490
A to by se automaticky stylu
ty věci podle toho.

884
00:42:50,490 --> 00:42:54,550
>> TOMAS REIMERS: Tak Bootstrap je velmi
magická věc vyvinut lidmi

885
00:42:54,550 --> 00:42:55,340
na Twitteru.

886
00:42:55,340 --> 00:42:57,230
A co to bylo chtěl udělat, bylo -

887
00:42:57,230 --> 00:43:00,740
Před webové stránky byly opravdu těžké, aby se
Sluší ti to, zvláště když jsme měli

888
00:43:00,740 --> 00:43:02,200
hodně společných prvků.

889
00:43:02,200 --> 00:43:04,770
Takže hodně tlačítek na
web vypadal stejně.

890
00:43:04,770 --> 00:43:08,960
>> Mnoho textových polí mohou být provedeny
vypadají lépe než standardní text

891
00:43:08,960 --> 00:43:13,620
pole, které pravděpodobně znáte z opravdu
Staré webové stránky nebo opravdu špatně provedena

892
00:43:13,620 --> 00:43:18,210
webové stránky, které stejně vypadají jako doslovný
textová pole bez jakékoliv formě textu

893
00:43:18,210 --> 00:43:21,190
stín nebo jakékoliv pěkné osnovy.

894
00:43:21,190 --> 00:43:24,540
Takže to, co Bootstrap udělal, bylo, že řekl, dobře,
Máme spoustu společných stylů.

895
00:43:24,540 --> 00:43:28,210
Proč děláme jednu společnou sadu CSS
a společný soubor JavaScriptu, jak

896
00:43:28,210 --> 00:43:32,210
dobře, což je styl jako je, a který
může dát lidem věci, jako je pokles

897
00:43:32,210 --> 00:43:34,610
down menu, které může dát lidem
věci jako modální slovesa.

898
00:43:34,610 --> 00:43:38,580
>> Modal je to, co se objeví na stránce
vždy, když je to přísně vzato

899
00:43:38,580 --> 00:43:41,090
něco, který dále inhibuje
interakce, dokud

900
00:43:41,090 --> 00:43:43,110
komunikovat s ním.

901
00:43:43,110 --> 00:43:45,820
Něco takového je, jste si jisti,
Chcete-li odstranit tuto věc?

902
00:43:45,820 --> 00:43:49,100
Nemůžete dělat nic jiného,
dokud se říct ano nebo ne.

903
00:43:49,100 --> 00:43:52,720
>> Trvalo to vše a to balí ji
dohromady a řekl, jdeme na to.

904
00:43:52,720 --> 00:43:54,630
Lidé nyní mohou použít.

905
00:43:54,630 --> 00:43:56,830
A najdete ji
na getbootstrap.com.

906
00:43:56,830 --> 00:44:00,480
To byl automaticky zahrnuty do
Vaše poslední problém nastavit.

907
00:44:00,480 --> 00:44:04,160
A vy jste více než vítáni
použít jej na svém posledním projektu.

908
00:44:04,160 --> 00:44:06,950
A chcete-li z toho, že
propojit, aby se Bootstrap.

909
00:44:06,950 --> 00:44:10,590

910
00:44:10,590 --> 00:44:15,700
>> Uvidíte zde
Zaveden CSS stránky.

911
00:44:15,700 --> 00:44:16,860
Uvidíte Bootstrap.

912
00:44:16,860 --> 00:44:20,450
A pokud se posunout dolů, uvidíte
jak stáhnout, jak se

913
00:44:20,450 --> 00:44:21,900
nainstalovat, et cetera.

914
00:44:21,900 --> 00:44:24,700
>> MIKE RIZZO: A můžete také,
dost zajímavé, přizpůsobit tak, aby

915
00:44:24,700 --> 00:44:27,770
se bez ohledu na druh témat
které chcete.

916
00:44:27,770 --> 00:44:31,270
Vím, že je to něco, co jsem udělal pro mé
Konečný projekt, když jsem vzal třídu

917
00:44:31,270 --> 00:44:32,050
bylo přizpůsobit se.

918
00:44:32,050 --> 00:44:34,540
Jiná verze Bootstrap, že
měl jiné barevné schéma a

919
00:44:34,540 --> 00:44:36,700
různé tvary některých
různé věci.

920
00:44:36,700 --> 00:44:38,250
Tak jsem se povzbudit, abyste si s tím.

921
00:44:38,250 --> 00:44:39,440
Je to docela zábavné dělat.

922
00:44:39,440 --> 00:44:43,230
>> TOMAS REIMERS: Pohled přes horní
znovu, je to velmi podobné písmo

923
00:44:43,230 --> 00:44:44,970
Super místo.

924
00:44:44,970 --> 00:44:47,810
Mnoho dokumentace začne
vypadat podobně, když jste

925
00:44:47,810 --> 00:44:48,940
viděl dost.

926
00:44:48,940 --> 00:44:51,260
Takže tady máme CSS
součást tohoto.

927
00:44:51,260 --> 00:44:53,540
A uvidíte, jak to
můžete styl věci.

928
00:44:53,540 --> 00:44:56,780
Takže pokud kliknete na tabulkách, například,
můžete okamžitě provést

929
00:44:56,780 --> 00:45:01,710
Tabulka docela jednoduše přidáním
třída stůl k ní.

930
00:45:01,710 --> 00:45:03,150
>> Stejné věci na knoflíky.

931
00:45:03,150 --> 00:45:12,140
Pokud jednoduše přidat třídu BTN a BTN
výchozí nebo BTN primární, můžete

932
00:45:12,140 --> 00:45:16,240
se některý z těchto tlačítek
s těmito pre-made styly.

933
00:45:16,240 --> 00:45:18,570
A pak, pokud hledáte pro
něco složitější, než jen

934
00:45:18,570 --> 00:45:24,100
rekonstruuje, co w již více než na
Karta JavaScript celé horní my

935
00:45:24,100 --> 00:45:25,120
mají spoustu dílů.

936
00:45:25,120 --> 00:45:30,410
>> Takže tady máme přechodů, modální slovesa,
rozbalovacích nabídkách, karty a popisky.

937
00:45:30,410 --> 00:45:35,530
Tooltip je to, co se objeví pod vaším
myši, když podržíte na něco.

938
00:45:35,530 --> 00:45:40,280
Popovers, upozornění, tlačítka, skládací
harmoniky je to, co

939
00:45:40,280 --> 00:45:41,190
oni jsou obvykle nazývá.

940
00:45:41,190 --> 00:45:43,045
Kolotoče, který Flip
až jako obrazy.

941
00:45:43,045 --> 00:45:52,190

942
00:45:52,190 --> 00:45:54,840
>> Takže to jsou komponenty
z Bootstrap.

943
00:45:54,840 --> 00:45:57,620
Chtěl bych vás povzbudit, aby
vysoce jít na ně podívat.

944
00:45:57,620 --> 00:46:01,780
Tam je složka JavaScript
a složka CSS.

945
00:46:01,780 --> 00:46:03,880
Neváhejte a používat je jako ty.

946
00:46:03,880 --> 00:46:06,730
Nebudeme se moc jít do nich
protože máme pocit, že dokumentace

947
00:46:06,730 --> 00:46:09,360
Je opravdu dobře.

948
00:46:09,360 --> 00:46:10,540
A jo.

949
00:46:10,540 --> 00:46:14,500
Máte nějaké dotazy týkající se, že?

950
00:46:14,500 --> 00:46:19,430
>> MIKE RIZZO: Tak, jak jsou opravdu rychlé
strana, design této webové stránky, která

951
00:46:19,430 --> 00:46:21,830
jsme se rychle dát dohromady
tato prezentace je

952
00:46:21,830 --> 00:46:24,290
ve skutečnosti provádí pomocí Bootstrap.

953
00:46:24,290 --> 00:46:27,810
Jak můžete vidět, když klikneme na nich
různé karty, my jsme vlastně nikdy

954
00:46:27,810 --> 00:46:30,750
opuštění tohoto proudu index.html stránku.

955
00:46:30,750 --> 00:46:36,400
Takže to, co máme, je různé divs
v tomto index.html.

956
00:46:36,400 --> 00:46:39,610
A pak, když jsme klepněte na jiný
karta, je to jen změnou

957
00:46:39,610 --> 00:46:41,590
která něčí představení.

958
00:46:41,590 --> 00:46:47,390
>> Tak to tedy pozice je,
změní HTML stránky tak, aby

959
00:46:47,390 --> 00:46:52,330
Karta proud je označen jako aktivní, takže
zdá se jinak a vzhled

960
00:46:52,330 --> 00:46:52,820
opravdu pěkné.

961
00:46:52,820 --> 00:46:57,260
>> TOMAS REIMERS: Takže to všechno bylo provedeno
aniž by nám psát téměř každý CSS.

962
00:46:57,260 --> 00:47:01,440
Také viz záhlaví v horní,
které barvy jsou u nás.

963
00:47:01,440 --> 00:47:04,800
Ale skutečné uvedení na
Horní část stránky a dělat

964
00:47:04,800 --> 00:47:06,660
to svitek byl Bootstrap.

965
00:47:06,660 --> 00:47:09,720
A pak i pro jiné knihovny - to
není ta, kterou jsme mluvili o, ale jeden

966
00:47:09,720 --> 00:47:11,580
můžete Google, pokud budete chtít.

967
00:47:11,580 --> 00:47:15,130
To se nazývá prettify.js.

968
00:47:15,130 --> 00:47:20,650
A to bude zvýraznění syntaxe kódu
Pro použití i CSS a JavaScript.

969
00:47:20,650 --> 00:47:23,480

970
00:47:23,480 --> 00:47:27,070
>> Poslední věc, kterou chceme mluvit o tom,
předtím, než jsme se uvolnit vás do

971
00:47:27,070 --> 00:47:30,620
Svět se podívat na knihovny přijít na to,
jak je používat a, doufejme,

972
00:47:30,620 --> 00:47:34,640
přečtěte si dokumentaci a najít to, co jste
Potřeba je, jak najít knihovny.

973
00:47:34,640 --> 00:47:37,000
Takže první je, že jsme jen
bude tlačit Google.

974
00:47:37,000 --> 00:47:37,810
Jdi Google.

975
00:47:37,810 --> 00:47:41,150
>> To je doslova to, co budeme dělat, když jsme
musíte udělat něco, co je Google my.

976
00:47:41,150 --> 00:47:44,730
Je zde knihovna JavaScript, který
mi umožňuje manipulovat čas

977
00:47:44,730 --> 00:47:45,400
užitečný způsob, jak?

978
00:47:45,400 --> 00:47:49,510
Takže, pokud já vím, že některé uživatelské vytváření
účtu zde, a to je

979
00:47:49,510 --> 00:47:53,010
aktuální čas, jak mohu spočítat
Rozdíl, který, aniž by museli

980
00:47:53,010 --> 00:47:55,020
vypočítat to sám?

981
00:47:55,020 --> 00:47:59,630
Takže to je vlastně běžná věc,
JavaScript doba knihovny.

982
00:47:59,630 --> 00:48:02,440
A tady jsme Moment.js--
jeden z nejoblíbenějších.

983
00:48:02,440 --> 00:48:06,530
>> Pokud budeme potřebovat knihovnu pro manipulaci
něco jako barva, aby bylo možné

984
00:48:06,530 --> 00:48:08,650
generovat spoustu náhodných barev -

985
00:48:08,650 --> 00:48:10,660
případně, pro generování
styl nebo tak něco -

986
00:48:10,660 --> 00:48:13,480
mohli bychom se Google něco jako
JavaScript barva knihovna.

987
00:48:13,480 --> 00:48:15,620
A jsem si jistý, že by se pop-up s
tisíc a jeden z nich.

988
00:48:15,620 --> 00:48:18,290

989
00:48:18,290 --> 00:48:21,410
Jste vítáni, aby si přes ně.

990
00:48:21,410 --> 00:48:24,610
>> Takže většina věcí - když je najdete -
se chystáte být umístěn na jednom z

991
00:48:24,610 --> 00:48:25,920
stránky, které hostitel kód.

992
00:48:25,920 --> 00:48:26,960
Jsou to několik z nich populární.

993
00:48:26,960 --> 00:48:30,870
Nejvíce populární tím, že
Zatím je github.com.

994
00:48:30,870 --> 00:48:35,300
A pokud jdete na GitHub, že je to ve skutečnosti
kde Normalizace moderoval.

995
00:48:35,300 --> 00:48:36,950
Takže pokud se chcete vrátit k té jedné.

996
00:48:36,950 --> 00:48:38,135
Ukažte jim, že.

997
00:48:38,135 --> 00:48:40,516
>> MIKE RIZZO: A to je vlastně, kde
to je hostována taky, jestli jste si všimli.

998
00:48:40,516 --> 00:48:41,000
>> TOMAS REIMERS: Jo.

999
00:48:41,000 --> 00:48:49,078
Takže pokud půjdete přes normalizovat
a jít na GitHub.

1000
00:48:49,078 --> 00:48:51,936
Byly to je?

1001
00:48:51,936 --> 00:48:54,620
>> MIKE RIZZO: To je malá kočka, co
je symbol GitHub.

1002
00:48:54,620 --> 00:48:56,330
>> TOMAS REIMERS: Oh.

1003
00:48:56,330 --> 00:49:02,180
Takže GitHub používá metodu nazvanou
Git k uložení kódu.

1004
00:49:02,180 --> 00:49:05,150
Je nevíte, co to je nebo
to vás děsí, to je v pořádku.

1005
00:49:05,150 --> 00:49:16,100
Nemusíte vědět, co Git je
protože GitHub má tlačítko Stáhnout

1006
00:49:16,100 --> 00:49:17,200
v pravém dolním rohu.

1007
00:49:17,200 --> 00:49:21,350
>> Další užitečná věc vědět
o GitHub je většina výrobků

1008
00:49:21,350 --> 00:49:23,200
bude mít read me.

1009
00:49:23,200 --> 00:49:25,400
A pokud nemají webové stránky,
číst, abych se bude mluvit o tom, jak

1010
00:49:25,400 --> 00:49:28,310
nainstalovat, jak ji používat, co to
ano, et cetera, et cetera, et cetera.

1011
00:49:28,310 --> 00:49:31,033
To, co jsme v podstatě byli
chůze vás.

1012
00:49:31,033 --> 00:49:32,326
>> MIKE RIZZO: Internet je přestat kouřit.

1013
00:49:32,326 --> 00:49:34,020
>> TOMAS REIMERS: To je v pořádku.

1014
00:49:34,020 --> 00:49:36,980
Poslední dvě věci, které jsme chtěli
mluvit -

1015
00:49:36,980 --> 00:49:38,750
jsme mluvili o Gitu -

1016
00:49:38,750 --> 00:49:40,290
je řešení problémů.

1017
00:49:40,290 --> 00:49:43,020
A tohle není relevantní pro
konečného výrobku, jak je

1018
00:49:43,020 --> 00:49:44,870
když necháte 50.

1019
00:49:44,870 --> 00:49:48,310
A když se dostanete do produktů
provádění knihovny nebo provádění

1020
00:49:48,310 --> 00:49:50,230
svůj vlastní projekt, budete
li mít dotazy nebo jste

1021
00:49:50,230 --> 00:49:51,660
bude vypadat na otázky.

1022
00:49:51,660 --> 00:49:53,060
>> Opět platí, Google ho.

1023
00:49:53,060 --> 00:49:54,630
To je doslova to, co děláme.

1024
00:49:54,630 --> 00:49:56,400
To bude znít hloupě.

1025
00:49:56,400 --> 00:49:58,310
Ale doslova jsme ho Google.

1026
00:49:58,310 --> 00:50:01,810
A opět, jedna z prvních věcí,
budete obvykle běží na je

1027
00:50:01,810 --> 00:50:06,550
stackoverflow.com, což je nádherný
Otázka a odpověď zrak.

1028
00:50:06,550 --> 00:50:10,530
>> Je to úžasné, protože jak můžete
post otázky a hledat na

1029
00:50:10,530 --> 00:50:12,760
odpovědi, ale také proto, že
to už je hodně

1030
00:50:12,760 --> 00:50:14,590
předem vyplněny obsah tam.

1031
00:50:14,590 --> 00:50:18,510
Takže většinou, když se Google v programování
otázka v rámci první

1032
00:50:18,510 --> 00:50:22,620
pár hitů, které jste již spustili
do něj během vašich problémů sad.

1033
00:50:22,620 --> 00:50:27,840
>> A pak, konečně opravdu krátká věc
je JSFIDDLE, což je - dnes máme

1034
00:50:27,840 --> 00:50:32,110
dělal hodně práce s
JavaScript HTML CSS.

1035
00:50:32,110 --> 00:50:39,820
JSFIDDLE je webová aplikace, která v podstatě
umožňuje, aby se vaše HTML, YOUR

1036
00:50:39,820 --> 00:50:42,820
JavaScript vlevo dole, a
vaše CSS v pravém horním rohu.

1037
00:50:42,820 --> 00:50:47,840
A pak to může vytvořit rychlý render
IT a uvidíte, jak to ovlivňuje.

1038
00:50:47,840 --> 00:50:50,500
Je to velmi užitečné, když se lidé snaží
udělat proof of concept, jako

1039
00:50:50,500 --> 00:50:52,910
To je, jak byste
to rozbalovací menu.

1040
00:50:52,910 --> 00:50:54,980
Možná, že rychlý odhalit nebo cokoliv jiného.

1041
00:50:54,980 --> 00:50:56,560
>> MIKE RIZZO: Tak jdeme na to
dopředu a klikněte na to.

1042
00:50:56,560 --> 00:50:57,820
Krátká poznámka -

1043
00:50:57,820 --> 00:51:00,430
vzhledem k tomu, než jsme byli
dělá na kliknutí.

1044
00:51:00,430 --> 00:51:04,380
Ukázalo se, že JCorey Korea má také vestavěný
V click obslužné rutiny události, která je

1045
00:51:04,380 --> 00:51:07,020
používá jen proto, že čísla jste
bude chtít dělat spoustu věcí,

1046
00:51:07,020 --> 00:51:08,410
pokud chcete klepněte na něco.

1047
00:51:08,410 --> 00:51:09,690
>> Podobně, má také vznášet.

1048
00:51:09,690 --> 00:51:12,850
Ale dostat plný rozsah
ty, podívej se na jQuery

1049
00:51:12,850 --> 00:51:15,320
dokumentace a udělat to.

1050
00:51:15,320 --> 00:51:18,760
Udělal jsem něco hloupého zde.

1051
00:51:18,760 --> 00:51:21,490
>> TOMAS REIMERS: Tak jsem se opravdu rychle
Program tady, který říká,

1052
00:51:21,490 --> 00:51:22,640
tlačítko na myši.

1053
00:51:22,640 --> 00:51:23,890
Pak máme pro smyčce.

1054
00:51:23,890 --> 00:51:26,810
U i je menší než 404.

1055
00:51:26,810 --> 00:51:29,530
Je to prostě bude pop-up
Tyto výstražné zprávy.

1056
00:51:29,530 --> 00:51:33,425
>> MIKE RIZZO: A co bylo
kód 404 stál v HTML?

1057
00:51:33,425 --> 00:51:34,145
Pamatuje si někdo?

1058
00:51:34,145 --> 00:51:35,450
Nebyl nalezen, vpravo.

1059
00:51:35,450 --> 00:51:38,640

1060
00:51:38,640 --> 00:51:40,885
Chrome také přidal to čistý
věc, kde můžete -

1061
00:51:40,885 --> 00:51:43,430
>> TOMAS REIMERS: Protože lidé jako
Mike začal dělat to hodně a

1062
00:51:43,430 --> 00:51:47,230
otravné uživatele, což umožňuje
můžete vidět informace.

1063
00:51:47,230 --> 00:51:48,286
>> MIKE RIZZO: Jo.

1064
00:51:48,286 --> 00:51:50,690
>> TOMAS REIMERS: Máme nějaké dotazy
o tom, o JavaScriptu

1065
00:51:50,690 --> 00:51:53,420
knihovny, najít knihovny, nebo
co vývoj webových vzhled

1066
00:51:53,420 --> 00:51:55,400
stejně jako v reálném světě?

1067
00:51:55,400 --> 00:51:56,880
Jsme běh proti času.

1068
00:51:56,880 --> 00:52:00,400
Takže si nejsem jistý, jedeme
mít čas na provedení

1069
00:52:00,400 --> 00:52:02,290
pokud je to opravdu rychle.

1070
00:52:02,290 --> 00:52:04,580
Jsme dobrý?

1071
00:52:04,580 --> 00:52:08,110
>> MIKE RIZZO: něco, co lidi chtěli
vidět opravdu rychle, tak za dva

1072
00:52:08,110 --> 00:52:09,556
minut nebo méně?

1073
00:52:09,556 --> 00:52:10,870
>> TOMAS REIMERS: Cokoliv
můžeme objasnit?

1074
00:52:10,870 --> 00:52:12,500
Jak psát -

1075
00:52:12,500 --> 00:52:13,260
>> DIVÁKŮ: [neslyšitelné]?

1076
00:52:13,260 --> 00:52:16,070
>> MIKE RIZZO: Ano, tak to je -

1077
00:52:16,070 --> 00:52:18,065
>> TOMAS REIMERS: Můžete jen hit
Control-U na internetových stránkách.

1078
00:52:18,065 --> 00:52:19,275
>> MIKE RIZZO: Oh, nevěděl jsem, že.

1079
00:52:19,275 --> 00:52:22,290
>> TOMAS REIMERS: Myslím, že jo.

1080
00:52:22,290 --> 00:52:23,300
Control-U. Jo.

1081
00:52:23,300 --> 00:52:25,970
>> MIKE RIZZO: Aha, tak to je
Kód pro webové stránky.

1082
00:52:25,970 --> 00:52:29,580
Ale pokud si opravdu chcete stáhnout naše
soubory a vše, to je hostována

1083
00:52:29,580 --> 00:52:32,650
na github.com

1084
00:52:32,650 --> 00:52:34,850
>> TOMAS REIMERS: lomítko mé jméno -

1085
00:52:34,850 --> 00:52:38,504
Tomáš Reimers - slash
CS50 pomlčka seminář.

1086
00:52:38,504 --> 00:52:40,710
>> MIKE RIZZO: A můžete
zde vše tam.

1087
00:52:40,710 --> 00:52:42,310
>> TOMAS REIMERS: To je to, co GitHub
vypadá, mimochodem.

1088
00:52:42,310 --> 00:52:44,910
Takže znovu, když vidíte open source
projekt, typicky, že bude čtení

1089
00:52:44,910 --> 00:52:45,950
mě tam, že si můžete přečíst.

1090
00:52:45,950 --> 00:52:50,200
A když se vrátíte, zjistíte, že
budete mít stahování zip, který bude

1091
00:52:50,200 --> 00:52:52,130
vám umožní stáhnout zdroj
kódu

1092
00:52:52,130 --> 00:52:53,666
produkt ve své vlastní věci.

1093
00:52:53,666 --> 00:52:56,890
>> MIKE RIZZO: Jo, a když jsme stačí kliknout
na index.html opravdu rychle -

1094
00:52:56,890 --> 00:52:59,180
>> TOMAS REIMERS: Uvidíte tady
Zdrojový kód pro naše webové stránky.

1095
00:52:59,180 --> 00:53:02,016

1096
00:53:02,016 --> 00:53:06,070
>> MIKE RIZZO: Také jsem zapomněl posunout vpravo
dříve s velkým stolem je

1097
00:53:06,070 --> 00:53:09,860
v ceně, ale je tu také tabulka
z chmods, že jsme součástí

1098
00:53:09,860 --> 00:53:13,210
pouze pro přehlednost.

1099
00:53:13,210 --> 00:53:16,940
Ale pokud budeme procházet celou cestu dolů do
dno, jsme neměli vlastně dělat velmi

1100
00:53:16,940 --> 00:53:21,160
hodně se JavaScriptu
věci vůbec s tím.

1101
00:53:21,160 --> 00:53:26,610
Je to výhradně od všeho
jiného, ​​co jsme měli.

1102
00:53:26,610 --> 00:53:28,730
>> Takže děkuji kluci přišli
a poslechu.

1103
00:53:28,730 --> 00:53:29,830
Doufáme, že to bylo opravdu užitečné.

1104
00:53:29,830 --> 00:53:33,020
Máte-li jakékoli JavaScript související
otázky, nebo jen chcete o tom mluvit

1105
00:53:33,020 --> 00:53:36,240
co jiného, ​​jako to, co další skvělé věci
můžete to udělat pomocí JavaScriptu, rádi bychom

1106
00:53:36,240 --> 00:53:37,186
s tebou mluvit.

1107
00:53:37,186 --> 00:53:40,010
>> TOMAS REIMERS: Máte-li otázku
o projektu, nebo jestli to může být

1108
00:53:40,010 --> 00:53:42,740
relevantní, pravděpodobně budeme držet kolem
trochu po tomto.

1109
00:53:42,740 --> 00:53:44,640
Ale jiné, než to, že mají
dobrý víkend.

1110
00:53:44,640 --> 00:53:45,845
>> MIKE RIZZO: Jo, baví.

1111
00:53:45,845 --> 00:53:46,120
Uvidíme se.

1112
00:53:46,120 --> 00:53:47,370
>> TOMAS REIMERS: Měj se.

1113
00:53:47,370 --> 00:53:47,926