1
00:00:00,000 --> 00:00:02,690
[Powered by Google Translate] [Seminář: jQuery]

2
00:00:02,690 --> 00:00:04,790
[Vipul Shekhawat, Harvard University]

3
00:00:04,790 --> 00:00:08,000
[To je CS50.] [CS50.TV]

4
00:00:08,000 --> 00:00:10,640
Pokud jste po spolu doma, můžete skutečně přístup k mým snímků on-line

5
00:00:10,640 --> 00:00:13,310
tím, že půjdete na tento odkaz.

6
00:00:13,310 --> 00:00:18,650
Je to TjjRWj na bit.ly.

7
00:00:18,650 --> 00:00:20,700
Můžete také jen přejít na adresu URL přímo,

8
00:00:20,700 --> 00:00:27,300
který je cloud.cs50.net / ~ vshekhawat, což je mé jméno,

9
00:00:27,300 --> 00:00:32,409
a jQuery.

10
00:00:32,409 --> 00:00:34,920
Velmi Vám doporučuji sledovat spolu, pokud jste sledoval doma,

11
00:00:34,920 --> 00:00:40,650
a pokud jste tu také, protože to je docela interaktivní prezentace.

12
00:00:40,650 --> 00:00:43,160
>> Takže dnes budu mluvit o jQuery a první otázka je,

13
00:00:43,160 --> 00:00:45,300
co je jQuery?

14
00:00:45,300 --> 00:00:47,090
Tento rok, vím, že vy se nevztahuje JavaScript

15
00:00:47,090 --> 00:00:51,080
tak podrobně, jak jsme v minulých letech.

16
00:00:51,080 --> 00:00:53,150
JavaScript je v první řadě, jen client-side jazyk

17
00:00:53,150 --> 00:00:58,390
které používáte-li spouštět skripty a kód každého uživatele počítače.

18
00:00:58,390 --> 00:01:00,660
Takže máte server, který poskytuje webové stránky pro lidi,

19
00:01:00,660 --> 00:01:02,600
ale možná budete chtít dělat věci na svém počítači,

20
00:01:02,600 --> 00:01:08,060
požádat svého počítače odesílat požadavky na server každých 30 sekund, nebo něco takového.

21
00:01:08,060 --> 00:01:10,420
Můžete to udělat pomocí JavaScriptu.

22
00:01:10,420 --> 00:01:13,190
JQuery jen poskytuje více funkcí na vrcholu JavaScriptu

23
00:01:13,190 --> 00:01:15,680
který dělá další věci pro vás.

24
00:01:15,680 --> 00:01:17,710
Podíváte-li se na obsah na vrcholu,

25
00:01:17,710 --> 00:01:21,410
, který popisuje některé z věcí, které jste schopni udělat.

26
00:01:21,410 --> 00:01:23,500
Takže celkově to bylo vytvořeno v lednu 2006.

27
00:01:23,500 --> 00:01:26,560
To bylo poprvé představil v srpnu 2005.

28
00:01:26,560 --> 00:01:31,370
Bylo to asi za pár let, a je to opravdu součástí nového hnutí Web 2.0

29
00:01:31,370 --> 00:01:34,330
že je vyroben na internetu tak lesklé.

30
00:01:34,330 --> 00:01:37,630
Je to nejpoužívanější JavaScript knihovna.

31
00:01:37,630 --> 00:01:41,450
Více než 19,6 milionu webové stránky používáte, a využití stále roste

32
00:01:41,450 --> 00:01:45,640
podle builtwith.com, což, zdá se, za poslední rok,

33
00:01:45,640 --> 00:01:49,710
bylo právě neustále zvyšuje poměrně lineárně.

34
00:01:49,710 --> 00:01:52,870
Mezi nejlepších 10 milionů stránek, je tu ještě -

35
00:01:52,870 --> 00:01:55,180
asi 40% z nich jsou v současné době používat.

36
00:01:55,180 --> 00:01:58,540
Facebook používá to, spousta jiných webových stránkách v současné době používat.

37
00:01:58,540 --> 00:02:01,540
Můžete se podívat na ty statistiky na vlastní pěst, pokud budete chtít.

38
00:02:01,540 --> 00:02:05,820
A můžete říct, že je to důvěryhodně, protože má základ a 13 členů správní rady,

39
00:02:05,820 --> 00:02:11,910
spolu s týmem 20 lidí, kteří na něm pracují pravidelně.

40
00:02:11,910 --> 00:02:16,110
Takže je to velmi často používá, má. Org URL, je to fantazie,

41
00:02:16,110 --> 00:02:21,660
to má vedlejší účinky na jiné věci, tak je to velký problém.

42
00:02:21,660 --> 00:02:24,510
>> Proč byste měli používat? JQuery je velmi lehký.

43
00:02:24,510 --> 00:02:27,270
To znamená, že to není velký soubor. Zde si můžete stáhnout

44
00:02:27,270 --> 00:02:31,540
minified soubor, který je bez všech mezerou a připomínky, a je to jen 32 kB.

45
00:02:31,540 --> 00:02:33,600
Takže je to jednoduché stačí hodit na vaše webové stránky

46
00:02:33,600 --> 00:02:35,910
a prostě začít používat.

47
00:02:35,910 --> 00:02:39,630
Je to také velmi efektivně napsáno, takže nezabírá mnoho -

48
00:02:39,630 --> 00:02:42,550
to není zpomalit své webové stránky moc, když ji použijete.

49
00:02:42,550 --> 00:02:45,770
To vám umožní realizovat věci, které byly dříve neproveditelné.

50
00:02:45,770 --> 00:02:47,790
Tam jsou některé funkční aspekty,

51
00:02:47,790 --> 00:02:51,780
jako je vytváření animací, které by za normálních okolností být velmi, velmi obtížné.

52
00:02:51,780 --> 00:02:54,300
Ale v jQuery oni jsou vlastně velmi jednoduché.

53
00:02:54,300 --> 00:02:57,040
A tam jsou některé věci, které jsou nepříjemné dělat,

54
00:02:57,040 --> 00:02:59,610
možné v JavaScriptu, jako je posílání požadavku POST

55
00:02:59,610 --> 00:03:02,190
ale odeslat požadavek na server, musíte napsat

56
00:03:02,190 --> 00:03:04,320
pět nebo šest nebo sedm řádků kódu.

57
00:03:04,320 --> 00:03:07,200
Nyní stačí to udělat v jednom řádku kódu v jednom volání funkce.

58
00:03:07,200 --> 00:03:11,790
To zjednodušuje opravdu hodně věcí, které děláte.

59
00:03:11,790 --> 00:03:15,950
A všechny ty skvělé děti používat. Tím, že mám na mysli mě.

60
00:03:15,950 --> 00:03:19,270
V mém posledním projektu v loňském roce, což je news.whrb.org,

61
00:03:19,270 --> 00:03:22,530
který je určen pro rozhlasové stanice, vytvořil jsem tento blog

62
00:03:22,530 --> 00:03:29,750
který hostí všechny pořady, které jsme udělali a MP3 soubory pro ně.

63
00:03:29,750 --> 00:03:32,070
Můžete procházet minulosti ukazuje,

64
00:03:32,070 --> 00:03:34,130
a to vše provedeno pomocí jQuery. Můžete říct,

65
00:03:34,130 --> 00:03:37,340
, protože všechny tyto animace, v podstatě.

66
00:03:37,340 --> 00:03:42,360
Takže pokud máte - pokud vytváříte nový příspěvek,

67
00:03:42,360 --> 00:03:45,980
vidíte ty malé slideDowns, to vše je provedeno pomocí jQuery.

68
00:03:45,980 --> 00:03:49,140
A to fade - tak, že tyhle věci se tak děje pomocí jQuery,

69
00:03:49,140 --> 00:03:52,720
a nemusíte neustále znovu načíst stránku procházet web.

70
00:03:52,720 --> 00:03:57,220
Další cool věc, která se provádí pomocí jQuery je tato prezentace.

71
00:03:57,220 --> 00:03:59,700
Já používám tento open source, čemu se říká scrolldeck,

72
00:03:59,700 --> 00:04:03,250
který někdo napsal na vrcholu jQuery.

73
00:04:03,250 --> 00:04:04,870
Pokud se skutečně podívat na zdroje, můžete vidět, že

74
00:04:04,870 --> 00:04:07,830
že používáte tento znak dolaru, dolary

75
00:04:07,830 --> 00:04:12,110
se používají v jQuery znamenat, že je funkce jQuery funkce.

76
00:04:12,110 --> 00:04:15,020
Takže oni definování obal na vrcholu jQuery

77
00:04:15,020 --> 00:04:18,570
, který umožňuje vytvořit prezentaci takhle,

78
00:04:18,570 --> 00:04:21,200
a můžete vidět, že tady to včetně původní jQuery soubor

79
00:04:21,200 --> 00:04:24,120
což je to, co budete muset zahrnout, pokud chcete používat jQuery

80
00:04:24,120 --> 00:04:30,450
ve vašich vlastních webových stránkách.

81
00:04:30,450 --> 00:04:32,790
>> Dotyk na tom, jak jej nainstalovat?

82
00:04:32,790 --> 00:04:36,150
Můžete prostě jít do jQuery.com a stáhnout soubor,

83
00:04:36,150 --> 00:04:38,320
přidat do webového adresáře a zahrnout jej.

84
00:04:38,320 --> 00:04:42,200
Tak právě na vrcholu, v hlavě tag souboru HTML

85
00:04:42,200 --> 00:04:45,400
svého hlavního souboru HTML, jen tento řádek kódu

86
00:04:45,400 --> 00:04:49,490
správnou verzí, pro kterou verzi jQuery, kterou používáte.

87
00:04:49,490 --> 00:04:51,340
Můžete si jej stáhnout tím, že půjdete jQuery.com,

88
00:04:51,340 --> 00:04:55,130
Klikněte na "Download jQuery," a máš to. To je všechno.

89
00:04:55,130 --> 00:04:58,880
A ve skutečnosti, můžeme se podívat na to, co to vypadá.

90
00:04:58,880 --> 00:05:01,080
Pokud kliknete na stažení zde, jQuery je to.

91
00:05:01,080 --> 00:05:05,260
Je to jen jedna velká JavaScript soubor, který udělá všechnu magickou věci pro vás.

92
00:05:05,260 --> 00:05:09,270
Toto je minified verze, která není čitelný vůbec.

93
00:05:09,270 --> 00:05:13,180
Můžete se také podívat na vývojové verzi, která je čitelná

94
00:05:13,180 --> 00:05:15,370
ale stále velmi, velmi zdlouhavé.

95
00:05:15,370 --> 00:05:17,980
Je to spousta věcí tam.

96
00:05:17,980 --> 00:05:20,240
Můžete také odkazy na hostované verzi Google ní.

97
00:05:20,240 --> 00:05:23,820
Takže to umožňují jen spoléhat na Google poskytnout.

98
00:05:23,820 --> 00:05:29,310
Poskytují všechny verze toho, k dispozici po celou dobu.

99
00:05:29,310 --> 00:05:31,530
Takže se můžete spolehnout na Google pravděpodobně hostit za vás.

100
00:05:31,530 --> 00:05:33,270
Nebo můžete propojit vlastní jQuery nejnovější verzi.

101
00:05:33,270 --> 00:05:36,400
Mají adresu URL, která je vždy aktualizován na nejnovější verzi.

102
00:05:36,400 --> 00:05:40,850
Je to jQuery-poslední, a je tu jeden problém s tím,

103
00:05:40,850 --> 00:05:44,350
a to, že v případě, že aktualizace jQuery a některé z předchozí funkce

104
00:05:44,350 --> 00:05:47,250
oni se retrograded nebo zastaralé,

105
00:05:47,250 --> 00:05:49,620
Možná to není - to může začít už nedostal podporovány.

106
00:05:49,620 --> 00:05:52,940
Takže pokud píšete webové stránky pomocí verze 1.8.2,

107
00:05:52,940 --> 00:05:55,000
v době, kdy verze 2.7 vychází

108
00:05:55,000 --> 00:05:57,000
některé z funkcí, které napsal už nefungují.

109
00:05:57,000 --> 00:05:59,930
Takže je lepší jen stáhnout 32 kB soubor,

110
00:05:59,930 --> 00:06:04,100
dát na své webové stránky, a to bude fungovat navždy.

111
00:06:04,100 --> 00:06:07,450
>> Chystám se jít dál a začít mluvit o skutečné funkčnosti jQuery.

112
00:06:07,450 --> 00:06:13,090
První věc je, selektory. To je to, co bylo původně koncipováno jQuery poskytnout.

113
00:06:13,090 --> 00:06:15,500
A můžete kliknout na dokumentaci se podívat na

114
00:06:15,500 --> 00:06:18,690
podrobná dokumentace pro voliče Budu se zde zabývat.

115
00:06:18,690 --> 00:06:24,120
Myšlenka voliče je, že si můžete vybrat prvky HTML na stránce.

116
00:06:24,120 --> 00:06:28,790
Prvky na stránce mít ID a třídy a další identifikační aspekty k nim.

117
00:06:28,790 --> 00:06:30,500
K dispozici je také - Už jsou v různém pořadí.

118
00:06:30,500 --> 00:06:32,570
Někteří v době, kdy jsou zanořené do sebe.

119
00:06:32,570 --> 00:06:38,120
JQuery umožňuje vytvořit jednoduché dotazy, které načítají prvky ze stránky.

120
00:06:38,120 --> 00:06:41,890
Pak můžete manipulovat s těmi prvky pomocí jQuery funkce,

121
00:06:41,890 --> 00:06:43,990
který je manipulace část se dostaneme později.

122
00:06:43,990 --> 00:06:46,040
Můžete změnit HTML, CSS, změnit

123
00:06:46,040 --> 00:06:50,500
můžete animovat a přidat funkce, které aktivují na určité události.

124
00:06:50,500 --> 00:06:52,710
Tak například, pokud něco kliknul, které chcete aby se něco stalo,

125
00:06:52,710 --> 00:06:55,210
můžete to udělat pomocí jQuery stejně.

126
00:06:55,210 --> 00:06:57,380
A existuje obrovské množství způsobů, jak vybrat prvky.

127
00:06:57,380 --> 00:07:00,310
Většina z nich jsem nikdy nepoužíval, ale tam jsou ty základní,

128
00:07:00,310 --> 00:07:02,340
které jsou velmi důležité.

129
00:07:02,340 --> 00:07:05,750
Prvek voliče, například, pokud jste právě výběrem nic

130
00:07:05,750 --> 00:07:10,640
to je div - vlastně mám kód otevřený pro tuto prezentaci snímků.

131
00:07:10,640 --> 00:07:13,450
Tak, například, tady je první snímek.

132
00:07:13,450 --> 00:07:17,430
Zde máme div. Pokud bychom skutečně vybrat všechny divy na stránce,

133
00:07:17,430 --> 00:07:22,300
to bude jen nám řadu všech tagy Div, které existují v tomto souboru.

134
00:07:22,300 --> 00:07:27,040
Identifikační voliče můžete vybrat cokoliv s daným ID.

135
00:07:27,040 --> 00:07:32,230
Takže pokud to, například, to, co má ID "Co je,"

136
00:07:32,230 --> 00:07:37,160
a když jsme to udělali s #, co místo nějakého ID,

137
00:07:37,160 --> 00:07:42,920
, že by se jen vrátí pole, které má jeden prvek, a to je, že prvek na stránce.

138
00:07:42,920 --> 00:07:45,490
Můžeme také kombinovat selektory tuto cestu tím, že

139
00:07:45,490 --> 00:07:48,260
vybrat pouze věci s ID, které jsou divs.

140
00:07:48,260 --> 00:07:51,810
Tak jo. Pouze vyberte divy, které mají toto ID.

141
00:07:51,810 --> 00:07:55,260
Pro třídu stačí použít tečku, je to totéž, jako CSS.

142
00:07:55,260 --> 00:07:57,500
Potomek také funguje, takže pokud máte nějaké třídy

143
00:07:57,500 --> 00:08:00,170
a to vnořené prvky v něm - tak, například,

144
00:08:00,170 --> 00:08:03,260
tam je nějaká třída a má kotevní tag jako odkaz na jinou stránku,

145
00:08:03,260 --> 00:08:08,510
můžete použít tuto syntaxi načíst odkaz.

146
00:08:08,510 --> 00:08:12,420
Můžete vybrat i více věcí najednou, stačí je oddělit čárkami,

147
00:08:12,420 --> 00:08:17,360
použít jakýkoli volič, který chcete, a budete-li vybrat všechny najednou, v jednom poli.

148
00:08:17,360 --> 00:08:19,650
A pak je tu také není volič, takže si můžete vybrat všechny divy

149
00:08:19,650 --> 00:08:24,210
které nemají určité třídy.

150
00:08:24,210 --> 00:08:28,790
A to je jen způsob, jak získat užitečné úvod o tom, jak tato volba funguje.

151
00:08:28,790 --> 00:08:32,270
Ukážu několik konkrétních příkladů v druhé.

152
00:08:32,270 --> 00:08:35,480
>> Pokročilé selektory jsou - to je jen několik příkladů.

153
00:08:35,480 --> 00:08:38,840
Existují desítky z nich, ale pokud chcete vybrat všechny obrazové značky

154
00:08:38,840 --> 00:08:42,799
uvnitř nějakého prvku, pak stačí udělat: snímek.

155
00:08:42,799 --> 00:08:45,340
Chcete-li vybrat i prvky, například pokud existuje 20 z nich,

156
00:08:45,340 --> 00:08:48,290
Chcete-li zvolit 0, 2, 4, 6 a tak dále,

157
00:08:48,290 --> 00:08:51,630
vy: i, nebo můžete provést také: odd.

158
00:08:51,630 --> 00:08:55,470
Jedná se o pseudo voliče, což znamená, že ve skutečnosti počítat

159
00:08:55,470 --> 00:09:00,960
každý další prvek, spíše než jen jít a výběru všech z nich.

160
00:09:00,960 --> 00:09:05,510
Můžete také - každý prvek může mít specifické vlastnosti.

161
00:09:05,510 --> 00:09:10,580
Tak, například, class = střed je také atribut.

162
00:09:10,580 --> 00:09:16,500
Z tohoto kotva tag href, hypertext reference, je také atribut.

163
00:09:16,500 --> 00:09:21,150
Takže si můžete vybrat něco, co odkazuje na určitou stránku nebo jen - je to opravdu obecně.

164
00:09:21,150 --> 00:09:25,410
Můžete si vybrat cokoliv s jakoukoliv atribut, který byste chtěli.

165
00:09:25,410 --> 00:09:27,470
A pak, i, atribut obsahuje.

166
00:09:27,470 --> 00:09:30,420
Pokud jste například chtěli vybrat všechny vstupní prvky

167
00:09:30,420 --> 00:09:32,700
které mají slovo "pass" jako jméno jich,

168
00:09:32,700 --> 00:09:37,560
pokud stránka obsahuje vstupní blok textu

169
00:09:37,560 --> 00:09:41,050
tomu se říká "heslo", že by jeden způsob, jak byste mohli vybrat to.

170
00:09:41,050 --> 00:09:43,020
A existuje mnoho dalších. Můžete jít dopředu a podívat se na dokumentaci

171
00:09:43,020 --> 00:09:46,950
a vidět konkrétní příklady, jak to funguje.

172
00:09:46,950 --> 00:09:48,840
>> Další věc je DOM manipulace.

173
00:09:48,840 --> 00:09:52,500
Poté, co vybereme prvky, se chceme skutečně dělat věci s nimi.

174
00:09:52,500 --> 00:09:55,500
Zatím jsme se podíval na to vůbec, ale když se podíváte na dokumentaci,

175
00:09:55,500 --> 00:09:57,950
je to opravdu hodně, že bychom mohli udělat.

176
00:09:57,950 --> 00:10:02,900
Na tomto místě budeme volit prvků na této prezentaci

177
00:10:02,900 --> 00:10:04,890
a manipulovat s nimi pomocí jQuery.

178
00:10:04,890 --> 00:10:08,290
Protože toto je implementováno pomocí jQuery, máme přístup k jQuery knihovny,

179
00:10:08,290 --> 00:10:13,580
a můžeme použít tyto funkce v rámci tohoto kódu.

180
00:10:13,580 --> 00:10:16,200
Jedna užitečná věc, kterou nemusí vědět, je konzole.

181
00:10:16,200 --> 00:10:19,340
A Google Chrome je to, co jsem pomocí. Můžete stisknout alt příkaz J

182
00:10:19,340 --> 00:10:21,720
nebo alt řízení J pro otevření konzole.

183
00:10:21,720 --> 00:10:26,130
Ve Firefoxu si myslím, že je to příkaz nebo ovládací K posunu řadicí K.

184
00:10:26,130 --> 00:10:28,880
V Safari budete muset jít měnit některá nastavení.

185
00:10:28,880 --> 00:10:35,460
Tam je odkaz, pokud chcete to udělat, ale já doporučuji dostat Chrome nebo Firefox.

186
00:10:35,460 --> 00:10:37,750
Takže pojďme otevřít konzoli, je to tady.

187
00:10:37,750 --> 00:10:41,170
To umožňuje v podstatě jen to, co chcete.

188
00:10:41,170 --> 00:10:45,100
Takže stačí zadat vytvořit proměnnou s názvem X,

189
00:10:45,100 --> 00:10:49,200
x = 5, podívejme se, co x + 2 je.

190
00:10:49,200 --> 00:10:57,670
Můžete dokonce udělat něco jako CS + Podívejme se, x + 45, který bude CS50.

191
00:10:57,670 --> 00:11:00,530
Stačí si jen udělat nějaké typické JavaScript věci.

192
00:11:00,530 --> 00:11:02,730
Ale můžete si také udělat jQuery zde.

193
00:11:02,730 --> 00:11:06,200
>> Tak se pojďme podívat na prvního aspektu zde.

194
00:11:06,200 --> 00:11:09,500
Chystáme se vytvořit proměnnou s názvem HTML, což je řetězec.

195
00:11:09,500 --> 00:11:15,890
Má značku odstavce v tom, že se říká nějaký nový text.

196
00:11:15,890 --> 00:11:19,420
Takže máme tento HTML, je to nějaký nový text v bodě tagy.

197
00:11:19,420 --> 00:11:21,800
Teď vlastně chceme přidat na stránku.

198
00:11:21,800 --> 00:11:28,310
Nastavil jsem to tak, že HTML na tento odstavec, tento titul tady, append ID.

199
00:11:28,310 --> 00:11:32,320
Zvolíme-li přidávací ID a připojit k němu

200
00:11:32,320 --> 00:11:34,560
HTML proměnné jsem vytvořil,

201
00:11:34,560 --> 00:11:40,370
bude dodat, že HTML na konci, hned po tomto tagu odstavce.

202
00:11:40,370 --> 00:11:43,730
Takže když to uděláme - jsme si vybrali tento odstavec,

203
00:11:43,730 --> 00:11:47,590
a my jsme volal append funkci s proměnnou HTML jsem právě přidali,

204
00:11:47,590 --> 00:11:50,960
bude dodat, že nový text tady na stránce.

205
00:11:50,960 --> 00:11:54,970
Můžeme také předřadit, což znamená, že půjde dříve, na začátku tohoto prvku.

206
00:11:54,970 --> 00:11:58,290
Takže tam je nějaký nový text na začátku a po něm.

207
00:11:58,290 --> 00:12:01,660
Můžu jít dopředu a osvěžit se zbavit této věci jsem právě udělal.

208
00:12:01,660 --> 00:12:05,280
Ale to je příklad toho, jak můžete použít předřazený a připojit metody

209
00:12:05,280 --> 00:12:08,910
manipulovat věci na stránce, přidat nějaký HTML.

210
00:12:08,910 --> 00:12:11,080
>> Můžete také změnit tříd.

211
00:12:11,080 --> 00:12:14,970
Zpět v tomto souboru stylu, vytvořil jsem to pro win třídy

212
00:12:14,970 --> 00:12:19,990
která má červenou barvu textu, barvu pozadí nějaký a stínu textu.

213
00:12:19,990 --> 00:12:23,810
Vypadá to odporné, ale já ve skutečnosti -

214
00:12:23,810 --> 00:12:26,410
tomto odstavci odpovídá třídě ID.

215
00:12:26,410 --> 00:12:29,860
Takže můžu přidat třídu pro vítězství.

216
00:12:29,860 --> 00:12:31,870
Mohu spustit tuto funkci v konzoli,

217
00:12:31,870 --> 00:12:35,480
a přidá tuto třídu, a teď to vypadá, odporný, jak se očekávalo.

218
00:12:35,480 --> 00:12:39,680
CSS se automaticky dostane aplikovat na třídy, které -

219
00:12:39,680 --> 00:12:42,680
v případě, že je CSS pro třídu, automaticky dostane použita

220
00:12:42,680 --> 00:12:44,680
pokud změníte třídu elementu.

221
00:12:44,680 --> 00:12:49,230
Pak se můžeme jen odstranit pomocí odebrání třídy.

222
00:12:49,230 --> 00:12:53,690
Takže pokud máte nějaké předdefinované třídy, jako je červená nebo zvýrazněna,

223
00:12:53,690 --> 00:12:55,990
a pak chcete použít ty na prvky,

224
00:12:55,990 --> 00:12:58,230
nemusíte dělat všechnu CSS styling pokaždé.

225
00:12:58,230 --> 00:13:01,510
Prostě přidáte třídu k elementu, a poté se automaticky stane -

226
00:13:01,510 --> 00:13:05,580
bude automaticky hledat vhodný pro danou třídu.

227
00:13:05,580 --> 00:13:07,900
Můžeme také odstranit věci, takže budu vyberte všechny divy

228
00:13:07,900 --> 00:13:10,830
na stránce a odstranit je.

229
00:13:10,830 --> 00:13:13,990
Co to bude vypadat?

230
00:13:13,990 --> 00:13:16,170
Bude to vypadat jako nic, takže je to vlastně nic nezbylo.

231
00:13:16,170 --> 00:13:18,170
Moje prezentace je pryč.

232
00:13:18,170 --> 00:13:21,290
Mohu obnovit a přivést ji zpět, naštěstí,

233
00:13:21,290 --> 00:13:24,420
protože je to právě běží jednou,

234
00:13:24,420 --> 00:13:29,460
ale to je příklad odstranění, pokud chcete zcela zničit prvek mimo stránku.

235
00:13:29,460 --> 00:13:33,180
>> Můžete také přepsat, a budu-li vybrat všechny odstavce tagy na stránce

236
00:13:33,180 --> 00:13:36,850
a jít v nich a nahradit cokoliv textu mají v nich

237
00:13:36,850 --> 00:13:39,690
se jen slovo "zkoušky".

238
00:13:39,690 --> 00:13:46,520
Pokud tak učiníte, budete nahradit každý odstavec na stránce s tímto testováním.

239
00:13:46,520 --> 00:13:49,150
Jo. Všichni jsou nahrazeny testování.

240
00:13:49,150 --> 00:13:53,270
Tak to je příklad přístupu k textu a přepsání.

241
00:13:53,270 --> 00:13:57,490
Můžete také získat informace, a to je opravdu cool vstupních polí.

242
00:13:57,490 --> 00:14:00,470
Máte-li vstupní pole, které lidé píšete věci, do

243
00:14:00,470 --> 00:14:03,880
lidé píší věci do něj,

244
00:14:03,880 --> 00:14:09,030
Zde vybereme vstup, nějaký vstupní tag s typem textu.

245
00:14:09,030 --> 00:14:13,800
V tomto případě existuje pouze jeden vstupní pole v celé prezentaci,

246
00:14:13,800 --> 00:14:17,260
a tak jsme si jen vybrat ten první, a pak zavoláme funkci val na to.

247
00:14:17,260 --> 00:14:19,570
, Která vrací hodnotu, a pro vstupní pole,

248
00:14:19,570 --> 00:14:24,330
hodnota je jen co se stane, že je v ní.

249
00:14:24,330 --> 00:14:31,880
Takže pokud to uděláme, to prostě vrací řetězec věci.

250
00:14:31,880 --> 00:14:36,860
A když říkáme to znovu po napsání více věcí, se promění v další věci.

251
00:14:36,860 --> 00:14:40,760
To je jeden skvělý způsob, jak získat přístup prvky vstupního pole a pak zkontrolujte,

252
00:14:40,760 --> 00:14:45,060
je tato platná e-mailová adresa, je to platné datum, například.

253
00:14:45,060 --> 00:14:49,600
Můžete jen získat věci okamžitě, jak lidé píší to,

254
00:14:49,600 --> 00:14:54,830
a zkontrolujte, zda je to platné, zašlete jej zpět na server, dělat, co chcete s ní.

255
00:14:54,830 --> 00:14:57,720
A to je, jak přistupovat co je uvnitř těch krabic.

256
00:14:57,720 --> 00:15:00,090
>> Můžete také upravit CSS přímo, takže namísto přidání

257
00:15:00,090 --> 00:15:02,510
Třída, která má některé předdefinované vlastnosti,

258
00:15:02,510 --> 00:15:08,120
stačí přidat cokoliv CSS chcete něco.

259
00:15:08,120 --> 00:15:10,350
Takže pojďme vybrat tělo, které je celé prezentace,

260
00:15:10,350 --> 00:15:14,370
a barva je vlastnost, která určuje, jaké barvy je text.

261
00:15:14,370 --> 00:15:19,420
Pokud změníme ji na červenou, bude veškerý text na stránce rozsvítí červeně.

262
00:15:19,420 --> 00:15:26,310
Můžeme udělat něco jako modrou barvu pozadí,

263
00:15:26,310 --> 00:15:30,680
tam jdeme, je to krásné.

264
00:15:30,680 --> 00:15:33,840
Můžete si dělat, co chcete s tím.

265
00:15:33,840 --> 00:15:39,250
Pomocí vlastnosti CSS, můžete opravdu změnit, jak něco vypadá kdykoliv.

266
00:15:39,250 --> 00:15:41,630
Další věc je účinky.

267
00:15:41,630 --> 00:15:45,710
Efekty jsou v podstatě totéž jako úpravou CSS,

268
00:15:45,710 --> 00:15:48,870
ale skutečně poskytují některé další animaci na to.

269
00:15:48,870 --> 00:15:53,380
Takže místo toho jen ukazovat, nebo něco skrývá, nebo změnou barvy,

270
00:15:53,380 --> 00:15:56,130
můžete vlastně dělat to oživila.

271
00:15:56,130 --> 00:16:00,760
Zde je dokumentace, chcete-li se podívat na rozsáhlou dokumentací pro ni.

272
00:16:00,760 --> 00:16:04,760
Ale já jdu na pokrytí hlavní.

273
00:16:04,760 --> 00:16:12,030
Existují zobrazit a skrýt vlastnosti.

274
00:16:12,030 --> 00:16:14,510
Zobrazit / skrýt ID skutečně odpovídá celý tento box

275
00:16:14,510 --> 00:16:18,190
takže když jsem ji skrýt, bude to jen tak zmizet.

276
00:16:18,190 --> 00:16:24,210
A můžu ho znovu zobrazit, pokud chci, aby to vrátit.

277
00:16:24,210 --> 00:16:26,340
A je to zpátky. To však ve skutečnosti nezmizí,

278
00:16:26,340 --> 00:16:30,670
Nechtěl jsem vlastně odstranit ze stránky, jen jsem nastavit vlastnost CSS na Skrytý

279
00:16:30,670 --> 00:16:34,030
takže nemůžete vidět už ne.

280
00:16:34,030 --> 00:16:39,250
K dispozici je také klouzat nahoru a posuňte dolů, které vám umožní mít tento účinek.

281
00:16:39,250 --> 00:16:47,050
Klouže až zmizí, a poté, co zmizí

282
00:16:47,050 --> 00:16:53,210
můžete posuňte jej směrem dolů, aby se vrátil. A teď je to zpátky.

283
00:16:53,210 --> 00:16:57,650
K dispozici je také to fade efekt, který se - fade ID odpovídá do tohoto boxu.

284
00:16:57,650 --> 00:17:01,200
Kdybych jí propadnete ven, pak to pomalu zmizí.

285
00:17:01,200 --> 00:17:04,490
Mohu také slábnout ji, a že se vrátí.

286
00:17:04,490 --> 00:17:08,930
Můžete si také udělat Vadne, která je specifická pro blednutí funkce.

287
00:17:08,930 --> 00:17:12,589
Můžete mít to fade na konkrétní neprůhlednosti, které chcete.

288
00:17:12,589 --> 00:17:16,869
Takže pokud jste jí propadnete pomalu 0,5, bude to stát se polovina viditelné.

289
00:17:16,869 --> 00:17:22,630
Můžu se jít do 0,1, a zpět na 1, aby bylo plně viditelné znovu.

290
00:17:22,630 --> 00:17:24,760
To je jen další animace, které můžete udělat.

291
00:17:24,760 --> 00:17:26,750
>> Tam jsou také klopné účinky.

292
00:17:26,750 --> 00:17:33,410
Takže budu vyberte přepínací ID, který odpovídá tento box

293
00:17:33,410 --> 00:17:38,970
a na tom div můžete volat přepínat, pokud je to vidět, že se stane neviditelným,

294
00:17:38,970 --> 00:17:42,320
jestli je to neviditelné, že bude opět viditelné.

295
00:17:42,320 --> 00:17:44,440
Tak jsem to nazval přepínací funkci dvakrát, první z nich byl

296
00:17:44,440 --> 00:17:48,380
totéž jako kůže, druhá výzva byla stejná věc jako show.

297
00:17:48,380 --> 00:17:53,510
A také můžete udělat s fade přepínač,

298
00:17:53,510 --> 00:17:55,730
který dělá totéž, kromě toho, že vlastně mizí.

299
00:17:55,730 --> 00:17:59,410
A totéž se skluzavkou přepínat.

300
00:17:59,410 --> 00:18:01,460
K dispozici jsou zřetězené efekty také, což znamená, že

301
00:18:01,460 --> 00:18:05,520
pokud vyberete prvek a stačí zavolat spoustu animačních metod na to,

302
00:18:05,520 --> 00:18:07,400
pokud byste chtěli, aby zatmívání, posuňte dolů,

303
00:18:07,400 --> 00:18:11,040
a pak se schovat a pak slábnout, bude to dělat jim v řadě.

304
00:18:11,040 --> 00:18:24,920
Tak zmizel, vrátil se - z nějakého důvodu se skrýt nestalo.

305
00:18:24,920 --> 00:18:30,030
Zkusme to. Jo, tak to vybledl a pak vyklouzla.

306
00:18:30,030 --> 00:18:32,230
A existuje spousta dalších. Můžete použít funkci animovat

307
00:18:32,230 --> 00:18:35,370
vytvořit si vlastní animace, což je poměrně složitá,

308
00:18:35,370 --> 00:18:38,790
ale to vám poskytuje nekonečné rozšiřitelnost.

309
00:18:38,790 --> 00:18:40,630
Můžete si vytvořit jakýkoliv druh animace, které chcete.

310
00:18:40,630 --> 00:18:44,230
Můžete také použít frontu do fronty více animací najednou.

311
00:18:44,230 --> 00:18:47,340
Takže pokud chcete něco přelétat stránky,

312
00:18:47,340 --> 00:18:49,860
snímek z pravém horním rohu na levém dolním rohu, můžete to udělat,

313
00:18:49,860 --> 00:18:55,240
a jen mají spoustu akcím, které jdou jeden po druhém.

314
00:18:55,240 --> 00:18:57,490
>> Další věc, kterou budeme mluvit o události.

315
00:18:57,490 --> 00:19:02,090
Události umožňují - tak daleko, že jsme právě byli psát věci do konzole

316
00:19:02,090 --> 00:19:04,870
a to je jeden způsob, jak se to stalo,

317
00:19:04,870 --> 00:19:08,020
ale na skutečné stránky, nebudete mít možnost

318
00:19:08,020 --> 00:19:10,020
dělat věci, které uživatel zadat do konzole.

319
00:19:10,020 --> 00:19:12,050
Chcete co se stane automaticky.

320
00:19:12,050 --> 00:19:18,060
Za to, že budete muset použít události, které aktivují na nějaké určité události děje.

321
00:19:18,060 --> 00:19:21,340
Můžete zkontrolovat dokumentaci pro všechny podrobnosti.

322
00:19:21,340 --> 00:19:24,030
Tak uvidíme. Chceme skrýt nebo zobrazit okno

323
00:19:24,030 --> 00:19:29,340
ale teď toto tlačítko se nic dělat, protože jsem neměl realizovat to ještě.

324
00:19:29,340 --> 00:19:35,420
Chystám se jít na aktuální HTML stránky.

325
00:19:35,420 --> 00:19:38,560
Zde je snímek. Je to div na snímku.

326
00:19:38,560 --> 00:19:41,230
To má třídu snímku.

327
00:19:41,230 --> 00:19:46,890
Tam je text. Nyní, tam je to box a box tlačítko.

328
00:19:46,890 --> 00:19:52,900
Jak bychom vlastně dělat to zmizí?

329
00:19:52,900 --> 00:19:58,250
Za prvé, pojďme napsat funkci, která dělá box ID zmizí.

330
00:19:58,250 --> 00:20:01,820
To je syntaxe pro funtion, pojďme jen zavolat, že hideTheBox.

331
00:20:01,820 --> 00:20:06,130
Nebere žádné argumenty, protože neexistují žádné argumenty, která mají být přijata.

332
00:20:06,130 --> 00:20:08,950
Můžeme zvolit pole ID.

333
00:20:08,950 --> 00:20:15,020
Takže pomocí jQuery vyberte si můžeme vybrat mezi pole ID,

334
00:20:15,020 --> 00:20:17,700
a pak už jen, aby to zmizí.

335
00:20:17,700 --> 00:20:20,690
Udělejme to mizí.

336
00:20:20,690 --> 00:20:27,390
Když jsme běželi tuto funkci v aktuální konzoli

337
00:20:27,390 --> 00:20:33,380
bychom mohli definovat funkci, můžeme nazvat hideTheBox, a funguje to.

338
00:20:33,380 --> 00:20:36,650
Ale my chceme, aby se stalo, když je tlačítko stisknuto skutečnosti.

339
00:20:36,650 --> 00:20:40,950
K tomu musíme použít událost.

340
00:20:40,950 --> 00:20:45,500
Chcete-li svázat události nějaké konkrétní tlačítka nebo nějaké akce happening,

341
00:20:45,500 --> 00:20:50,040
musíme vybrat prvek, který událost bude spouštět -

342
00:20:50,040 --> 00:20:52,650
nebo že spustí událost, je mi líto.

343
00:20:52,650 --> 00:20:57,220
>> Takže v první řadě, pojďme zaškrtněte políčko tlačítko ID

344
00:20:57,220 --> 00:20:59,610
protože to je tlačítko, a teď, když na to tlačítko,

345
00:20:59,610 --> 00:21:02,750
Chceme vytvořit animaci, když je klepnutí.

346
00:21:02,750 --> 00:21:05,040
Takže tam, klikněte funkci.

347
00:21:05,040 --> 00:21:08,470
To umožňuje navázat jinou funkci k němu.

348
00:21:08,470 --> 00:21:12,320
Tato funkce má jinou funkci jako argument

349
00:21:12,320 --> 00:21:14,310
můžeme předat funkci hideTheBox,

350
00:21:14,310 --> 00:21:20,950
a při každém klepnutí na toto tlačítko, bude tato funkce automaticky spustit.

351
00:21:20,950 --> 00:21:24,850
Takže to bude fungovat, pokud uložíme to, budu aktualizovat,

352
00:21:24,850 --> 00:21:33,460
a - jednu vteřinu, je mi líto.

353
00:21:33,460 --> 00:21:44,770
Opravit to opravdu rychle.

354
00:21:44,770 --> 00:21:50,680
Dobře. Tam jdeme. Takže teď box se vytrácí, když klepněte na tlačítko.

355
00:21:50,680 --> 00:21:55,470
Můžeme také změnit jen fadeToggle,

356
00:21:55,470 --> 00:22:00,020
změnit jen skrýt nebo zobrazit okno

357
00:22:00,020 --> 00:22:03,850
a to bude také fungovat taky, pokud budeme aktualizovat.

358
00:22:03,850 --> 00:22:08,550
Můžeme se skrýt, můžeme také ukázat, a že bude pokračovat v práci.

359
00:22:08,550 --> 00:22:12,210
Další věc, kterou můžeme udělat, je, že vlastně nemáte definovat tuto funkci hideTheBox

360
00:22:12,210 --> 00:22:15,050
než zavoláme tlačítkem ve funkci.

361
00:22:15,050 --> 00:22:17,640
Takže místo toho, definování funkce a volání hideTheBox,

362
00:22:17,640 --> 00:22:20,310
budeme bavit pouze volat, pokud tato věc klepnutí.

363
00:22:20,310 --> 00:22:22,310
Takže můžeme definovat to anonymně tady,

364
00:22:22,310 --> 00:22:25,070
což je funkce, která má JavaScript.

365
00:22:25,070 --> 00:22:29,720
Můžete definovat funkci, normálně, řekli bychom, že funkce hideTheBox

366
00:22:29,720 --> 00:22:34,490
s argumenty, ale můžeme jen říct, funkce bez argumentů,

367
00:22:34,490 --> 00:22:36,870
spustit složená závorka definovat funkci,

368
00:22:36,870 --> 00:22:40,780
uzavřít, že složenou závorku, a pak už jen definovat funkci zde

369
00:22:40,780 --> 00:22:45,130
v první závorce a poslední závorka

370
00:22:45,130 --> 00:22:47,860
, které odpovídají argumenty click funkce.

371
00:22:47,860 --> 00:22:53,320
Takže jsme kolem v této funkci můžeme zkopírovat tento řádek kódu tady,

372
00:22:53,320 --> 00:22:55,450
a který bude dělat přesně to samé.

373
00:22:55,450 --> 00:22:57,290
A teď nemáme tuto funkci náhodný fadeTheBox

374
00:22:57,290 --> 00:22:59,960
která je sedět bez zjevného důvodu.

375
00:22:59,960 --> 00:23:02,070
Tato funkce byla definována anonymně, to nemá jméno.

376
00:23:02,070 --> 00:23:08,060
To se provede pouze, když klikneme na tlačítko Kvádr.

377
00:23:08,060 --> 00:23:12,180
Takže osvěžující ještě jednou, ještě jednou, a můžete vidět, že to ještě funguje.

378
00:23:12,180 --> 00:23:16,700
A to je, jak vytvářet události.

379
00:23:16,700 --> 00:23:19,190
>> Existuje mnoho různých událostí, které můžeme použít.

380
00:23:19,190 --> 00:23:23,540
Chystám se přepnout zpět na pomocí konzoly jen ukázat, jak tyto práce.

381
00:23:23,540 --> 00:23:28,210
ID je pro každou z nich odpovídají každé krabici.

382
00:23:28,210 --> 00:23:33,020
Takže toto políčko, je kliknout ID, tohle je klíč ID, a tohle je myš ID.

383
00:23:33,020 --> 00:23:36,120
Ještě jedna věc je, že je tato akce funkce, spíše než psát to pokaždé,

384
00:23:36,120 --> 00:23:41,610
Vlastně jsem šel dopředu a definoval akční funkci sem.

385
00:23:41,610 --> 00:23:46,860
To dělá totéž jako hideTheBox funkci.

386
00:23:46,860 --> 00:23:51,340
To dostane toto políčko a buď se ztrácí to vybledne nebo se dovnitř

387
00:23:51,340 --> 00:23:54,110
A to je důvod, proč jsme schopni jej zde.

388
00:23:54,110 --> 00:24:00,350
Takže pokud klikneme na tomto cvaknutí ID, chceme, aby okno zmizí a znovu.

389
00:24:00,350 --> 00:24:03,610
Je to totéž jako tlačítko, které jsme měli v posledním snímku.

390
00:24:03,610 --> 00:24:07,450
Nyní po říkáme, že můžeme klikněte na tento a okno zmizí,

391
00:24:07,450 --> 00:24:10,160
klepněte na ni znovu a znovu se objeví okno.

392
00:24:10,160 --> 00:24:12,480
Je to docela jednoduché. Dvojklikem dělá totéž,

393
00:24:12,480 --> 00:24:15,660
kromě toho vyžaduje dvojí klepnutí.

394
00:24:15,660 --> 00:24:19,030
Takže pokud na něj klepnete jednou a klikněte na něj opět se nic nestane,

395
00:24:19,030 --> 00:24:21,140
ale pokud dvakrát kliknete rychle, bude to zmizí.

396
00:24:21,140 --> 00:24:23,310
Pokud kliknete dvojklikem znovu, bude to vrátit.

397
00:24:23,310 --> 00:24:25,250
Tak to je docela jednoduché.

398
00:24:25,250 --> 00:24:31,170
Vstup z klávesnice je trochu divné, já si nemyslím, že to skutečně funguje v tomto příkladu

399
00:24:31,170 --> 00:24:37,670
protože klíč dolů, klíč a stisknutí tlačítka a další klíčové akce

400
00:24:37,670 --> 00:24:47,190
aktivovat bez ohledu na to, co prvek, který vázat.

401
00:24:47,190 --> 00:24:51,410
Například, i když jsem vázán tlačítka dolů orgánu nebo něco úplně jiného,

402
00:24:51,410 --> 00:24:55,950
pak by to ještě aktivovat bez ohledu na to - není to specifické.

403
00:24:55,950 --> 00:25:00,190
Nemám být kliknutí na tento odkaz a stiskněte klávesu, aby se něco zmizí.

404
00:25:00,190 --> 00:25:04,470
By mohla být aktivována bez ohledu na to, co element jsem právě nacházíte

405
00:25:04,470 --> 00:25:06,880
Takže tyto nejsou ve skutečnosti pracují v tomto případě

406
00:25:06,880 --> 00:25:13,180
protože neuznává mě vstupu vstup do div vstup z klávesnice.

407
00:25:13,180 --> 00:25:15,740
>> Ale když se podíváte na akce myši,

408
00:25:15,740 --> 00:25:19,620
první, kdo se pohybují, a to může udělat něco z toho pomocí CSS.

409
00:25:19,620 --> 00:25:24,280
Pokud používáte CSS, můžete ji vytvořit tak, že pokud se vznášejí nad něčím,

410
00:25:24,280 --> 00:25:28,940
pak jeho změny stylu.

411
00:25:28,940 --> 00:25:32,170
Ale s použitím jQuery můžete změnit styly dalších věcí, stejně.

412
00:25:32,170 --> 00:25:37,120
Tak, například, budeme nazývat opatření, pokud se vznášet nad tímto div.

413
00:25:37,120 --> 00:25:39,660
To znamená, že pokud budeme vznášet se nad ni, a pak okno zmizí.

414
00:25:39,660 --> 00:25:42,430
Pokud se vzdalujete, bude okno znovu objeví.

415
00:25:42,430 --> 00:25:45,090
Nazveme-li tento a vznášet se nad ním, políčko se zmizet,

416
00:25:45,090 --> 00:25:47,050
a jakmile se vzdálí, vrátí se zpět.

417
00:25:47,050 --> 00:25:49,750
Nazveme-li tuto funkci hover na myš ID,

418
00:25:49,750 --> 00:25:54,380
což odpovídá tento box a pak když jsme vznášet se nad poli,

419
00:25:54,380 --> 00:26:00,440
pak se okno skutečně zmizí - je to být funky hned, ale -

420
00:26:00,440 --> 00:26:06,310
pokud se vzdalujete, bude to znovu. Právě teď je to obráceně z nějakého důvodu.

421
00:26:06,310 --> 00:26:12,720
Myš zadat a funkce pohybu myši jsou poněkud podobné, ale mírně odlišné.

422
00:26:12,720 --> 00:26:16,470
Myš zadat pouze se aktivuje, pokud kurzor myši vstoupí na pole, podle očekávání.

423
00:26:16,470 --> 00:26:19,210
Takže pokud budete pohybovat do ní, bude to zmizí.

424
00:26:19,210 --> 00:26:23,210
Ale nebude to objeví znovu, když se vzdalujete, budete muset vrátit na něj pro to, aby se vrátil.

425
00:26:23,210 --> 00:26:25,590
K dispozici je také funkce pohybu myši, který bude aktivovat

426
00:26:25,590 --> 00:26:29,300
když myš je přítomna v krabici.

427
00:26:29,300 --> 00:26:32,430
Takže to bude jen pokračovat dál, blednutí a ven.

428
00:26:32,430 --> 00:26:35,660
A je to vlastně přihlášení - Vypadá to, že je to jen blednutí dovnitř a ven,

429
00:26:35,660 --> 00:26:39,140
ale je to vlastně přihlášení mnohem více akce, než to,

430
00:26:39,140 --> 00:26:43,550
takže při odchodu to bude jen dál, protože přihlášen jako tisíce z nich.

431
00:26:43,550 --> 00:26:46,620
Možná ne tisíc. Možná pět.

432
00:26:46,620 --> 00:26:50,200
Se přihlásí víc než to.

433
00:26:50,200 --> 00:26:53,280
Jde o to, všechny akce myši, existuje mnoho z nich.

434
00:26:53,280 --> 00:26:55,480
Můžete si přečíst na ty ostatní, ale všechny jsou mírně odlišné,

435
00:26:55,480 --> 00:26:57,700
a můžete si vybrat podle toho, co ten, který potřebujete

436
00:26:57,700 --> 00:27:02,130
podle toho, co pro konkrétní účel se snažíte dělat.

437
00:27:02,130 --> 00:27:05,060
>> Další věc, kterou budu mluvit, je AJAX.

438
00:27:05,060 --> 00:27:09,340
AJAX, já vím, že se netýkala JavaScript tolik hloubky v letošním roce,

439
00:27:09,340 --> 00:27:11,770
tak jsem jen tak mluvit o AJAX obecně za minutu.

440
00:27:11,770 --> 00:27:15,210
AJAX je zkratka pro Asynchronous JavaScript and XML.

441
00:27:15,210 --> 00:27:19,030
Je to v podstatě, například, když jste na Facebooku a tlačí vás oznámení,

442
00:27:19,030 --> 00:27:23,060
to proto, že AJAX je spuštěna ve Vašem webovém prohlížeči.

443
00:27:23,060 --> 00:27:25,800
Každých pár sekund váš webový prohlížeč je vlastně

444
00:27:25,800 --> 00:27:29,420
jít k serverům Facebook je, žádat je, máte něco nového pro mě,

445
00:27:29,420 --> 00:27:31,980
a pak se vrátí k vám.

446
00:27:31,980 --> 00:27:36,320
To vám umožní odesílat požadavky na server

447
00:27:36,320 --> 00:27:38,660
aniž byste museli načtení stránky.

448
00:27:38,660 --> 00:27:42,040
Tak normálně, pokud jste jen pomocí PHP a databáze,

449
00:27:42,040 --> 00:27:45,480
Musíte aktualizovat stránku, než můžete získat nové informace ze serveru.

450
00:27:45,480 --> 00:27:48,770
Ale pomocí AJAX, můžete vytáhnout z tohoto neustále nové informace,

451
00:27:48,770 --> 00:27:52,250
nebo vytáhnout na to, když klepnete na tlačítko, nebo něco podobného.

452
00:27:52,250 --> 00:27:56,140
Tak to nám umožňuje poslat žádost bez překládky stránku

453
00:27:56,140 --> 00:27:58,130
a můžeme použít buď GET nebo POST.

454
00:27:58,130 --> 00:28:05,370
>> GET požadavků, například pokud vám Google.com in

455
00:28:05,370 --> 00:28:10,900
a to q = test. To jim dotazu test.

456
00:28:10,900 --> 00:28:15,890
A to je požadavek GET, protože je to předáním těchto parametrů do samotné URL.

457
00:28:15,890 --> 00:28:19,250
Požadavek POST je jako kdyby jste posílal poštou.

458
00:28:19,250 --> 00:28:22,500
Je to jako dát do dopisu a zaslat ho na ně,

459
00:28:22,500 --> 00:28:25,140
ale oni nejsou ve skutečnosti vidět obsah. Oni nejsou viditelné v URL.

460
00:28:25,140 --> 00:28:31,040
Nemůžete přímo zadejte ho, musíte jej poslat skoro tajně.

461
00:28:31,040 --> 00:28:33,880
Je to v příspěvku.

462
00:28:33,880 --> 00:28:38,660
Ale s použitím jQuery, můžete tak učinit GET a POST požadavky

463
00:28:38,660 --> 00:28:42,740
mnohem snadněji, než byste normálně mohli používat jen obyčejný JavaScript.

464
00:28:42,740 --> 00:28:50,140
Dotaz lze pomocí API GET požadavky, a můžete také zkontrolovat přihlašovací údaje.

465
00:28:50,140 --> 00:28:54,400
Na další stránce, jsem vytvořil toto, který se ptá: "Co je k obědu?"

466
00:28:54,400 --> 00:28:58,230
pomocí Harvard potravin API, takže se pojďme vytáhnout, že až.

467
00:28:58,230 --> 00:29:01,840
To je jen příklad toho, jak můžete použít jQuery dělat GET požadavek na API

468
00:29:01,840 --> 00:29:04,200
a získat informace zpět z něj.

469
00:29:04,200 --> 00:29:07,090
Takže chceme, aby se zobrazila nabídka pro dnešní den,

470
00:29:07,090 --> 00:29:10,560
a my chceme vidět, co je k obědu.

471
00:29:10,560 --> 00:29:16,500
Zde je URL vytvořit požadavek GET v jQuery.

472
00:29:16,500 --> 00:29:18,600
Používáte dolarů. dostat funkci.

473
00:29:18,600 --> 00:29:22,290
První argument je URL, takže přesně to, co jste dotazování.

474
00:29:22,290 --> 00:29:27,200
Pak další argument je funkce, která spustí, když požadavek GET je kompletní.

475
00:29:27,200 --> 00:29:29,980
Takže si odeslat nějaký požadavek na server, počkejte, až se to vrátí.

476
00:29:29,980 --> 00:29:33,770
Když to přijde zpátky, budete mít nějakou akci s daty, která je zpátky ze serveru.

477
00:29:33,770 --> 00:29:37,520
Pojďme dál a kódování to stejně.

478
00:29:37,520 --> 00:29:42,110
Nechtěl jsem to kódovat buď záměrně.

479
00:29:42,110 --> 00:29:46,660
Zde je TODO. Za prvé, pojďme použít události vázání

480
00:29:46,660 --> 00:29:50,820
takže když je toto tlačítko stisknuto, pošleme pryč GET požadavek.

481
00:29:50,820 --> 00:29:53,410
A když se žádostí o přiznání s některými údaji,

482
00:29:53,410 --> 00:29:57,290
budeme psát do tohoto identifikačním jídlo info div.

483
00:29:57,290 --> 00:30:02,860
Za prvé, pojďme vybrat jídlo tlačítko ID.

484
00:30:02,860 --> 00:30:07,320
Když je klepnutí, chceme, aby to něco udělat.

485
00:30:07,320 --> 00:30:11,930
Řekněme, aby to anonymní fuction, jako předtím.

486
00:30:11,930 --> 00:30:15,550
Můžete zabalit ty složené závorky,

487
00:30:15,550 --> 00:30:18,530
a když je toto tlačítko stisknuto, chceme poslat GET požadavek

488
00:30:18,530 --> 00:30:20,750
zkontrolovat, co je k obědu.

489
00:30:20,750 --> 00:30:24,970
K tomu můžeme jen zadat $. Dostat.

490
00:30:24,970 --> 00:30:28,850
Jedná se o jQuery funkce, pomocí dolaru.

491
00:30:28,850 --> 00:30:31,430
To trvá několik argumentů. První z nich je URL,

492
00:30:31,430 --> 00:30:34,450
druhá je funkce zpětného volání, funkce, která se nazývá

493
00:30:34,450 --> 00:30:37,740
pokud tento požadavek skutečně vrátí.

494
00:30:37,740 --> 00:30:39,890
Řekněme postavit URL jako první.

495
00:30:39,890 --> 00:30:44,650
Můžeme si ji z API, které David napsal nahoru.

496
00:30:44,650 --> 00:30:51,360
Chystáte se tady můžeme vidět, že je to food.cs50.net/api/1.3/menus,

497
00:30:51,360 --> 00:30:54,140
a pak stačí předat názvy parametrů, které byste chtěli.

498
00:30:54,140 --> 00:30:57,760
Takže parametr 1 je hodnota 1.

499
00:30:57,760 --> 00:31:00,910
Vypadá to, že standardní data, datum, výchozí hodnota je dnes

500
00:31:00,910 --> 00:31:03,110
pokud nezadáte nic, a konečné datum také výchozích hodnot

501
00:31:03,910 --> 00:31:05,930
do dneška, pokud nezadáte nic.

502
00:31:05,930 --> 00:31:10,790
To je to, co chceme. Chceme jen získat informace pro dnešek.

503
00:31:10,790 --> 00:31:12,950
>> Chceme formát být v JSON.

504
00:31:12,950 --> 00:31:15,570
To je prostě libovolná, můžete použít libovolný formulář, který chcete.

505
00:31:15,570 --> 00:31:18,950
Můžete použít CSV, ale JSON JavaScript Object Notation je.

506
00:31:18,950 --> 00:31:24,150
Je to velmi snadné pro JavaScript pochopit, co to znamená,

507
00:31:24,150 --> 00:31:27,110
a můžeme ji vytisknout snadněji tímto způsobem.

508
00:31:27,110 --> 00:31:30,490
Takže pojďme se o to požádají ve formátu JSON, a pojďme žádost oběd.

509
00:31:30,490 --> 00:31:37,660
Takže jídlo = oběd. Stačí sepsat tuto adresu URL, jdeme zpátky.

510
00:31:37,660 --> 00:31:41,290
K dispozici je menu. První parametr je výstup = JSON

511
00:31:41,290 --> 00:31:44,640
protože to je to, co chceme, a oddělte parametry se slovy "a".

512
00:31:44,640 --> 00:31:48,940
Druhý parametr je - Nevzpomínám si.

513
00:31:48,940 --> 00:31:52,170
Meal. A chceme jídlo = oběd.

514
00:31:52,170 --> 00:31:57,390
Rovněž si můžete vyzkoušet zadáním URL do prohlížeče a jít na to.

515
00:31:57,390 --> 00:32:03,120
To vám dá nějaký výstup. Je to jen banda věcí, které je k obědu.

516
00:32:03,120 --> 00:32:10,410
Je to v této ošklivé formátu. Chceme vytisknout na naší stránce v lepším formátu.

517
00:32:10,410 --> 00:32:12,580
Takže URL je správné, teď stačí napsat funkci,

518
00:32:12,580 --> 00:32:18,300
zavolat zpět, když je žádost úspěšná.

519
00:32:18,300 --> 00:32:20,430
Tato funkce bude skutečně přijmout argument. Bude údaje.

520
00:32:20,430 --> 00:32:25,650
Dat je to, co se vrátí z GET po GET je hotovo.

521
00:32:25,650 --> 00:32:28,860
Můžeme dělat složené závorky, v tu píšeme anonymní funkce

522
00:32:28,860 --> 00:32:33,900
že provádí pomocí těchto dat, když dostaneme informace zpět.

523
00:32:33,900 --> 00:32:37,840
Takže údaje, když jsme zadali tuto adresu URL,

524
00:32:37,840 --> 00:32:41,540
to je to, co se děje údaje vypadat. Bude to být tak obrovský řetězec.

525
00:32:41,540 --> 00:32:48,610
Ale dobrá věc je, že JavaScript je analyzovat pomocí JSON.parse funkce.

526
00:32:48,610 --> 00:32:54,950
Takže pojďme vytvořit novou proměnnou s názvem rozebrat údaje.

527
00:32:54,950 --> 00:32:57,060
A rozebrat dat je pole objektů.

528
00:32:57,060 --> 00:33:04,200
Každý objekt obsahuje informace jako - no, pojďme se podívat.

529
00:33:04,200 --> 00:33:08,980
To má datum, jídlo, kategorii, recept, všechno to další věci.

530
00:33:08,980 --> 00:33:10,860
Takže řekněme vytisknout název pro každou z nich.

531
00:33:10,860 --> 00:33:13,790
Pojďme iterovat přes celou řadu věcí, které se vrátíme z ní,

532
00:33:13,790 --> 00:33:17,570
a jen vytisknout každou z nich - vytisknout název každého z nich.

533
00:33:17,570 --> 00:33:22,670
Toto je pro smyčku.

534
00:33:22,670 --> 00:33:26,030
>> JavaScript musí této užitečné syntaxi, kde si můžete vytvořit proměnné a smyčky přes pole,

535
00:33:26,030 --> 00:33:30,150
a var i jen iterátor, takže místo toho, aby museli dělat var i = 0,

536
00:33:30,150 --> 00:33:40,290
jsem byl menší než délka, i + +, můžete prostě var i v analyzovaných dat.

537
00:33:40,290 --> 00:33:47,060
V tomto příkladu bude analyzovány data (i) odpovídá aktuální prvek

538
00:33:47,060 --> 00:33:49,850
z pole, aktuální objekt.

539
00:33:49,850 --> 00:33:51,720
A chceme, aby se jméno z ní.

540
00:33:51,720 --> 00:33:54,170
Takže pojďme prostě jméno.

541
00:33:54,170 --> 00:33:57,000
A poslední věc je, že budeme mít nějaký jQuery znovu.

542
00:33:57,000 --> 00:34:02,660
Vlastně přidat ho do div, to jídlo info div, že je v současné době prázdný.

543
00:34:02,660 --> 00:34:05,430
Takže pojďme vybrat to.

544
00:34:05,430 --> 00:34:13,870
Budeme používat jQuery a vyberte jídlo info div id, nebo se najíst informace ID, omlouvám se.

545
00:34:13,870 --> 00:34:16,580
Chceme k tomu připojit.

546
00:34:16,580 --> 00:34:21,030
Pokud jsme udělali zkoušku, například, bylo by to jen přepsat to pokaždé.

547
00:34:21,030 --> 00:34:29,190
Takže můžeme jen doplnit to.

548
00:34:29,190 --> 00:34:31,889
Aktuální prvek pole, dostaneme jméno z toho,

549
00:34:31,889 --> 00:34:38,159
a budeme připojit ji ke konci číslo jídla info div.

550
00:34:38,159 --> 00:34:40,120
A pak už jen, aby to vypadalo čistší,

551
00:34:40,120 --> 00:34:51,550
budeme také přidat zalomení řádku, takže to není vše na jednom řádku.

552
00:34:51,550 --> 00:34:55,280
Takže pokud vše půjde dobře, že by to bylo dobré -

553
00:34:55,280 --> 00:34:57,220
Za prvé, kdykoliv klepnete na toto tlačítko,

554
00:34:57,220 --> 00:35:00,070
to bude odeslat požadavek GET na tuto adresu URL.

555
00:35:00,070 --> 00:35:02,500
Pokud data vrátí z ní, bude to rozebere ho,

556
00:35:02,500 --> 00:35:06,950
otočte jej do formátu JSON, smyčky celé pole prohlašujete, že údaje,

557
00:35:06,950 --> 00:35:10,310
a připojit název a zalomení řádku

558
00:35:10,310 --> 00:35:16,500
ke každé linii v tomto ID jídla info, která byla dříve prázdné.

559
00:35:16,500 --> 00:35:18,910
Takže návrat k této stránce, budeme aktualizovat,

560
00:35:18,910 --> 00:35:23,690
klikněte, zjistit - to nefunguje. To je nešťastné.

561
00:35:23,690 --> 00:35:25,830
A to je místo, kde ladění vypovídací

562
00:35:25,830 --> 00:35:30,070
Index.html, řádek 1.

563
00:35:30,070 --> 00:35:57,210
To je zajímavé.

564
00:35:57,210 --> 00:35:59,720
Dobře, dobře, spíše než trávit čas dělat to, já jsem prostě jít

565
00:35:59,720 --> 00:36:07,070
vytáhnout provedenou soubor, který mám, který je dokončen verzi.

566
00:36:07,070 --> 00:36:13,710
Nejsem si jistý, jaký je rozdíl, ale můžeme jen otevřít tuto nahoru místo.

567
00:36:13,710 --> 00:36:19,740
A jdeme na AJAX, a to by mělo fungovat správně.

568
00:36:19,740 --> 00:36:21,730
To je to, co bylo dnes k obědu,

569
00:36:21,730 --> 00:36:24,870
v žádném konkrétním pořadí, s citacemi kolem ní, takže to není nejhezčí.

570
00:36:24,870 --> 00:36:27,090
Ale, samozřejmě, pokud jste to dělali pro konečný projekt,

571
00:36:27,090 --> 00:36:30,120
byste, aby to vypadalo lépe.

572
00:36:30,120 --> 00:36:32,530
Ale to je jen jednoduchý příklad, jak to udělat GET požadavek.

573
00:36:32,530 --> 00:36:34,580
A pokud se podíváme na skutečný kód, hádám, jsem si jistý,

574
00:36:34,580 --> 00:36:39,690
je to pořád skoro stejné.

575
00:36:39,690 --> 00:37:04,990
Zapomněl jsem jej převést na řetězec, to je ono.

576
00:37:04,990 --> 00:37:07,920
Ne, je to stále nefunguje. Bez ohledu na to, tady je skutečné vyplnění kódu

577
00:37:07,920 --> 00:37:10,300
za to, co by to mělo vypadat,

578
00:37:10,300 --> 00:37:16,400
a to dělá to samé jako to, co jsem právě zavedl.

579
00:37:16,400 --> 00:37:22,760
Když klepnete na tlačítko, používá GET JSON automaticky analyzovat data.

580
00:37:22,760 --> 00:37:29,190
Trvá data zpět z něj a prochází celou řadou

581
00:37:29,190 --> 00:37:32,770
a vypíše - bez ohledu na to dnes k obědu, jméno toho,

582
00:37:32,770 --> 00:37:38,020
a připojí zalomení řádku na konci každého řádku.

583
00:37:38,020 --> 00:37:41,100
To je, jak použít funkci GET.

584
00:37:41,100 --> 00:37:44,040
>> Můžete také použít POST, které jsem neměl čas

585
00:37:44,040 --> 00:37:47,940
sepsat příklad, ale můžeme podívat na dokumentaci.

586
00:37:47,940 --> 00:37:53,220
Když se podíváte na jquery.post,

587
00:37:53,220 --> 00:37:55,510
můžete vidět, že je to skoro to samé.

588
00:37:55,510 --> 00:38:01,650
Máte URL, ale namísto předávání parametrů pomocí -

589
00:38:01,650 --> 00:38:03,990
jen jejich uvádění do řetězce pro samotné URL,

590
00:38:03,990 --> 00:38:06,300
musíte projít v této proměnné data

591
00:38:06,300 --> 00:38:11,990
, který je v podstatě pole, slovník, který mapuje parametry na hodnoty.

592
00:38:11,990 --> 00:38:17,690
Minete, že, a že pošle jim pomocí POST.

593
00:38:17,690 --> 00:38:20,790
A až budete mít, pak můžete mít úspěch funkci

594
00:38:20,790 --> 00:38:23,930
který vykonává když data vrátí.

595
00:38:23,930 --> 00:38:26,430
Jinak je to přesně to samé. Takže pomocí POST

596
00:38:26,430 --> 00:38:29,970
budete chtít použít POST, například máte-li vstupní formulář

597
00:38:29,970 --> 00:38:35,780
dát lidem vstupní hesla do něj, a poslat ty hesla vypnout

598
00:38:35,780 --> 00:38:41,850
k back-end skriptu pro kontrolu v databázi, zda uživatel je platný, nebo ne.

599
00:38:41,850 --> 00:38:46,700
Můžete to udělat vše pomocí jQuery místo museli obnovovat stránku vůbec.

600
00:38:46,700 --> 00:38:52,160
To je, jak jsem implementoval v blogu, který jsem vám ukázal dříve.

601
00:38:52,160 --> 00:38:59,530
Pokud půjdeme do koncové portálu odhlásit, odhlásit se

602
00:38:59,530 --> 00:39:02,600
Odhlásit nefunguje.

603
00:39:02,600 --> 00:39:13,360
No, dovolte mi, abych ho otevřete v novém okně.

604
00:39:13,360 --> 00:39:16,580
Zde je heslo, a chtěl jsem psát v něčem náhodné.

605
00:39:16,580 --> 00:39:18,590
To nefunguje, ale můžete vidět, že jsme neměli

606
00:39:18,590 --> 00:39:20,840
skutečně obnovit stránku vůbec.

607
00:39:20,840 --> 00:39:24,610
Kód, pokud se chcete podívat na to,

608
00:39:24,610 --> 00:39:37,460
vše je k dispozici zde.

609
00:39:37,460 --> 00:39:45,680
Takže kódu jsem napsal loni někdy.

610
00:39:45,680 --> 00:39:47,790
Jak můžete vidět tady, budeme odeslání POST požadavku.

611
00:39:47,790 --> 00:39:50,400
Mám soubor s názvem login.php na zadním konci,

612
00:39:50,400 --> 00:39:53,860
který zkontroluje, zda je heslo platné.

613
00:39:53,860 --> 00:39:56,000
Parametry míjíme v jsou hesla, mapovány na

614
00:39:56,000 --> 00:40:00,030
vstup, který je v tomto vstupním poli v současné době.

615
00:40:00,030 --> 00:40:04,110
A když se data vrátí, můžeme zkontrolovat.

616
00:40:04,110 --> 00:40:07,680
Pokud jsou údaje nepravdivé, pak říkáme, nesprávné heslo, posuňte jej dolů,

617
00:40:07,680 --> 00:40:09,580
a jen aby to zmizí po tom.

618
00:40:09,580 --> 00:40:12,320
V opačném případě si načíst stránku Admin.

619
00:40:12,320 --> 00:40:15,080
A to vše bylo provedeno pomocí JSON.

620
00:40:15,080 --> 00:40:18,510
V tomto mnoha řádků kódu, stačí předat data na zadním konci,

621
00:40:18,510 --> 00:40:21,020
zkontrolovat, zda je to správné, zkontrolujte, zda jste přihlášeni správně,

622
00:40:21,020 --> 00:40:24,200
a dokonce na něj reagovat, přesměrování osobu na správnou stránku

623
00:40:24,200 --> 00:40:29,760
nebo ne nechat je se přihlásit a říkat jim, že mají nesprávné heslo.

624
00:40:29,760 --> 00:40:33,040
Tak to je příklad toho, jak byste mohli použít jQuery POST

625
00:40:33,040 --> 00:40:37,010
poslat požadavek POST do back-end,

626
00:40:37,010 --> 00:40:42,400
ověření, zda někdo přihlášen správně.

627
00:40:42,400 --> 00:40:44,820
>> Dobře, takže to všechny příklady jsem měl, a všechny věci jsem chtěl pokrýt.

628
00:40:44,820 --> 00:40:47,110
To jsou hlavní věci, které jQuery umožňuje dělat:

629
00:40:47,110 --> 00:40:52,640
vyberte prvky, upravovat je pomocí DOM manipulace,

630
00:40:52,640 --> 00:40:56,340
můžete přidat efekty, aktivujte věci na určité události,

631
00:40:56,340 --> 00:41:00,430
a také dělat AJAX požadavky velmi hladce a snadno.

632
00:41:00,430 --> 00:41:02,840
Takže děkuji za účast nebo sledování,

633
00:41:02,840 --> 00:41:06,230
a pokud budete mít nějaké dotazy, dejte mi vědět. Jo?

634
00:41:06,230 --> 00:41:12,730
[Student] Tehdy, když ses objevil, museli jste JSON po požadavku POST v uvozovkách,

635
00:41:12,730 --> 00:41:15,170
a já jsem jen přemýšlel, co to udělal.

636
00:41:15,170 --> 00:41:20,070
>> Jo, vidím. Otázkou bylo, že v tomto příkladu jsem ukázal,

637
00:41:20,070 --> 00:41:25,790
tam bylo slovo JSON v uvozovkách kolem -

638
00:41:25,790 --> 00:41:31,690
Budu znovu vyjměte měrku - kolem POST funkce.

639
00:41:31,690 --> 00:41:43,320
Já jsem jen tahem to ukázat.

640
00:41:43,320 --> 00:41:46,890
Tak tady to je požadavek POST, a tam je to JSON v uvozovkách.

641
00:41:46,890 --> 00:41:50,280
To jen definuje, co čekáme byl výstup.

642
00:41:50,280 --> 00:41:54,070
Takže když jsme se projít do formátu JSON a očekávaný datový typ,

643
00:41:54,070 --> 00:41:56,070
není to podmínkou, ale pomineme-li ji,

644
00:41:56,070 --> 00:41:58,590
pak se data budou automaticky analyzovat jako JSON.

645
00:41:58,590 --> 00:42:00,600
Takže nemáme volat parsování JSON funkci na to,

646
00:42:00,600 --> 00:42:02,620
to bude jen tak automaticky.

647
00:42:02,620 --> 00:42:05,150
A pokud se podíváte na dokumentaci POST,

648
00:42:05,150 --> 00:42:09,850
je to datový typ proměnné, typ dat očekávaných z serveru.

649
00:42:09,850 --> 00:42:12,660
Implicitně je to inteligentní odhadu, že může být špatně,

650
00:42:12,660 --> 00:42:15,520
takže si můžete nechat prázdné, ale je to jen typ dat

651
00:42:15,520 --> 00:42:21,680
v kódování, které používáte, ať už je to JSON nebo XML nebo něco jiného.

652
00:42:21,680 --> 00:42:25,280
>> Nějaké další otázky?

653
00:42:25,280 --> 00:42:27,300
Dobrá. Máte-li jakékoli další dotazy, neváhejte a napište mi

654
00:42:27,300 --> 00:42:30,830
na vshekhawat@college.harvard.edu,

655
00:42:30,830 --> 00:42:34,860
a diapozitivy a kód by měl být k dispozici on-line brzy.

656
00:42:34,860 --> 00:42:42,810
Hodně štěstí s vaším závěrečných prací, doufám, že budete používat jQuery.

657
00:42:42,810 --> 00:42:46,810
[CS50.TV]