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

2
00:00:02,690 --> 00:00:04,790
[Vipul Shekhawat, Universiteti i Harvardit]

3
00:00:04,790 --> 00:00:08,000
[Kjo është CS50.] [CS50.TV]

4
00:00:08,000 --> 00:00:10,640
Nëse ju jeni në vijim së bashku në shtëpi, ju në fakt mund të hyni në slides e mia në internet

5
00:00:10,640 --> 00:00:13,310
duke shkuar në këtë link.

6
00:00:13,310 --> 00:00:18,650
Është TjjRWj, në bit.ly.

7
00:00:18,650 --> 00:00:20,700
Ju gjithashtu mund të thjesht shkoni tek URL direkt,

8
00:00:20,700 --> 00:00:27,300
cila eshte cloud.cs50.net / ~ vshekhawat, e cila eshte emri im,

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

10
00:00:32,409 --> 00:00:34,920
I highly ju inkurajojmë që të ndjekin së bashku në qoftë se ju jeni duke shikuar në shtëpi,

11
00:00:34,920 --> 00:00:40,650
dhe në qoftë se ju jeni këtu, gjithashtu, për shkak se kjo është një prezantim shumë interaktive.

12
00:00:40,650 --> 00:00:43,160
>> Pra, sot unë jam duke shkuar për të folur në lidhje me jQuery, dhe pyetja e parë është,

13
00:00:43,160 --> 00:00:45,300
çfarë është jQuery?

14
00:00:45,300 --> 00:00:47,090
Këtë vit, unë e di ju djema nuk e kanë mbuluar JavaScript

15
00:00:47,090 --> 00:00:51,080
në sa më shumë detaje si ne kemi në vitet e kaluara.

16
00:00:51,080 --> 00:00:53,150
JavaScript është, para së gjithash, vetëm një klient-side gjuhë

17
00:00:53,150 --> 00:00:58,390
që ju përdorni për të drejtuar Scripts dhe kodin në makinë çdo përdorues.

18
00:00:58,390 --> 00:01:00,660
Pra, ju keni një server që ofron faqet web për njerëzit,

19
00:01:00,660 --> 00:01:02,600
por ju mund të dëshironi të bëni gjëra në makinë e tyre,

20
00:01:02,600 --> 00:01:08,060
kërkoni makinën e tyre për të dërguar kërkesa në serverin tuaj çdo 30 sekonda, ose diçka të tillë.

21
00:01:08,060 --> 00:01:10,420
Ju mund ta bëni këtë duke përdorur JavaScript.

22
00:01:10,420 --> 00:01:13,190
JQuery vetëm siguron funksionalitet më shumë në krye të JavaScript

23
00:01:13,190 --> 00:01:15,680
që bën gjëra ekstra për ju.

24
00:01:15,680 --> 00:01:17,710
Nëse ju shikoni në përmbajtjen në krye,

25
00:01:17,710 --> 00:01:21,410
që përshkruan disa gjëra që ju jeni në gjendje të bëni.

26
00:01:21,410 --> 00:01:23,500
Pra, në përgjithësi, ajo ishte krijuar në janar 2006.

27
00:01:23,500 --> 00:01:26,560
Ajo u ngjiz së pari e në gusht 2005.

28
00:01:26,560 --> 00:01:31,370
Ajo ka qenë rreth e rrotull për nja dy vjet, dhe kjo është me të vërtetë pjesë e lëvizjes së re Web 2,0

29
00:01:31,370 --> 00:01:34,330
që është bërë në internet kështu me shkëlqim.

30
00:01:34,330 --> 00:01:37,630
Kjo është më e përdorur gjerësisht bibliotekë JavaScript.

31
00:01:37,630 --> 00:01:41,450
Mbi 19.6 milion faqet e internetit janë duke e përdorur atë, dhe përdorimi është ende në rritje

32
00:01:41,450 --> 00:01:45,640
sipas builtwith.com, e cila, me sa duket, gjatë vitit të kaluar,

33
00:01:45,640 --> 00:01:49,710
ka qenë vazhdimisht në rritje vetëm mjaft linear.

34
00:01:49,710 --> 00:01:52,870
Ndër 10 milion faqet e lartë, ka ende -

35
00:01:52,870 --> 00:01:55,180
rreth 40% e tyre janë duke e përdorur atë.

36
00:01:55,180 --> 00:01:58,540
Facebook përdor atë, shumë e faqeve të tjera aktualisht përdorin atë.

37
00:01:58,540 --> 00:02:01,540
Ju mund të shikoni në ato statistikat në tuaj, nëse ju dëshironi.

38
00:02:01,540 --> 00:02:05,820
Dhe ju mund të them legit Kjo për shkak se ajo ka një themel dhe 13 anëtarë të bordit,

39
00:02:05,820 --> 00:02:11,910
së bashku me një ekip prej 20 njerëzve të cilët punojnë në atë mbi një bazë të rregullt.

40
00:02:11,910 --> 00:02:16,110
Pra, ajo është shumë e përdorur gjerësisht, ajo ka një URL. Org, është e dashuroj,

41
00:02:16,110 --> 00:02:21,660
ajo ka spin-off-për gjëra të tjera, kështu që kjo është një marrëveshje e madhe.

42
00:02:21,660 --> 00:02:24,510
>> Pse ju duhet të përdorin atë? JQuery është shumë i lehtë.

43
00:02:24,510 --> 00:02:27,270
Kjo do të thotë se nuk është një file i madh. Ju mund të shkarkoni

44
00:02:27,270 --> 00:02:31,540
file minified, e cila është pa të gjithë hapësirën e bardhë dhe komenteve, dhe kjo është vetëm 32 kB.

45
00:02:31,540 --> 00:02:33,600
Pra, kjo është e lehtë për të vetëm hedhje mbi faqen tuaj web

46
00:02:33,600 --> 00:02:35,910
dhe vetëm për të filloni duke e përdorur atë.

47
00:02:35,910 --> 00:02:39,630
Është gjithashtu shumë efikase shkruar, kështu që nuk ka marrë një shumë të -

48
00:02:39,630 --> 00:02:42,550
ajo nuk ngadalësojnë faqen tuaj shumë kur ju përdorni atë.

49
00:02:42,550 --> 00:02:45,770
Kjo ju lejon të zbatojë gjëra që ishin më parë parealizueshme.

50
00:02:45,770 --> 00:02:47,790
Ka disa aspekte të funksionalitetit,

51
00:02:47,790 --> 00:02:51,780
si krijimin e animacioneve, që normalisht do të jetë shumë, shumë e vështirë për të bërë.

52
00:02:51,780 --> 00:02:54,300
Por në jQuery ata janë në fakt shumë e thjeshtë.

53
00:02:54,300 --> 00:02:57,040
Dhe ka disa gjëra që janë të bezdisshëm për të bërë,

54
00:02:57,040 --> 00:02:59,610
mundshme në JavaScript, si dërguar një kërkesë POST,

55
00:02:59,610 --> 00:03:02,190
por të dërgoni një kërkesë në një server, ju duhet të shkruani

56
00:03:02,190 --> 00:03:04,320
pesë ose gjashtë ose shtatë rreshta të kodit.

57
00:03:04,320 --> 00:03:07,200
Tani ju mund të bëni vetëm atë në një linjë të vetme të kodit, në një telefonatë funksion të vetme.

58
00:03:07,200 --> 00:03:11,790
Që me të vërtetë thjeshton shumë sende që jeni duke bërë.

59
00:03:11,790 --> 00:03:15,950
Dhe të gjithë fëmijët të ftohtë janë duke e përdorur atë. Me këtë, dua të them mua.

60
00:03:15,950 --> 00:03:19,270
Në projektin tim të fundit të vitit të kaluar, e cila është news.whrb.org,

61
00:03:19,270 --> 00:03:22,530
e cila është për stacionin e radios, kam krijuar këtë blog

62
00:03:22,530 --> 00:03:29,750
e cila pret të gjitha tregon që ne kemi bërë dhe fotografi MP3 për ta.

63
00:03:29,750 --> 00:03:32,070
Ju mund të kërkoni nëpër shfaqjet e kaluara,

64
00:03:32,070 --> 00:03:34,130
dhe kjo është bërë të gjithë duke përdorur jQuery. Ju mund të thoni

65
00:03:34,130 --> 00:03:37,340
për shkak të të gjitha këtyre animacioneve, në thelb.

66
00:03:37,340 --> 00:03:42,360
Pra, nëse ju keni - në qoftë se ju jeni duke krijuar një post të ri,

67
00:03:42,360 --> 00:03:45,980
ju shihni këto slideDowns pak; që është bërë të gjithë duke përdorur jQuery.

68
00:03:45,980 --> 00:03:49,140
Dhe kjo zbehet - kështu që lloj i stuff është bërë të gjithë duke përdorur jQuery,

69
00:03:49,140 --> 00:03:52,720
dhe ju nuk keni për të vazhdimisht rifreskoni faqen për të lundruar në faqen.

70
00:03:52,720 --> 00:03:57,220
Një tjetër gjë e ftohtë që është bërë duke përdorur jQuery është ky prezantim.

71
00:03:57,220 --> 00:03:59,700
Unë jam duke përdorur këtë gjë me burim të hapur të quajtur scrolldeck,

72
00:03:59,700 --> 00:04:03,250
të cilin dikush shkroi në krye të jQuery.

73
00:04:03,250 --> 00:04:04,870
Nëse jeni të vërtetë duken në burim, ju mund të shihni se

74
00:04:04,870 --> 00:04:07,830
ata janë duke përdorur këtë shenjë dollar; shenja të dollarit

75
00:04:07,830 --> 00:04:12,110
janë përdorur në jQuery për të ditur se një funksion është një funksion jQuery.

76
00:04:12,110 --> 00:04:15,020
Pra, ata janë definimin e një këmishë në krye të jQuery

77
00:04:15,020 --> 00:04:18,570
që ju lejon të bëni një prezantim si ky,

78
00:04:18,570 --> 00:04:21,200
dhe ju mund të shihni se këtu ata janë përfshirë skedarin origjinal jQuery,

79
00:04:21,200 --> 00:04:24,120
e cila është ajo që ju do të duhet të përfshijë në qoftë se doni të përdorni jQuery

80
00:04:24,120 --> 00:04:30,450
në faqet e internetit tuaj.

81
00:04:30,450 --> 00:04:32,790
>> Prekur në këtë, si mendoni ju instaloni atë?

82
00:04:32,790 --> 00:04:36,150
Ju mund të shkoni vetëm në jQuery.com dhe shkarkoni file,

83
00:04:36,150 --> 00:04:38,320
shtoni atë në një web directory dhe të përfshijë atë.

84
00:04:38,320 --> 00:04:42,200
Pra, vetëm në krye, në tag kokë e dosjes suaj HTML

85
00:04:42,200 --> 00:04:45,400
e dosjes kryesore tuaj HTML, vetëm kanë atë linjë të kodit

86
00:04:45,400 --> 00:04:49,490
me versionin e saktë për të cilin version i jQuery ju jeni duke përdorur.

87
00:04:49,490 --> 00:04:51,340
Ju mund ta shkarkoni atë duke shkuar në jQuery.com,

88
00:04:51,340 --> 00:04:55,130
klikoni "jQuery shkarko," dhe ju keni marrë atë. Kjo ishte.

89
00:04:55,130 --> 00:04:58,880
Dhe në të vërtetë, ne mund të marrë një vështrim në atë që duket si.

90
00:04:58,880 --> 00:05:01,080
Nëse ju klikoni mbi shkarkoni këtu, jQuery është kjo.

91
00:05:01,080 --> 00:05:05,260
Kjo është vetëm një fotografi e madhe JavaScript që e bën të gjitha stuff magjike për ju.

92
00:05:05,260 --> 00:05:09,270
Ky është versioni minified, i cili nuk është i lexueshëm në të gjitha.

93
00:05:09,270 --> 00:05:13,180
Ju gjithashtu mund të shikoni në versionin zhvillim, i cili është i lexueshëm

94
00:05:13,180 --> 00:05:15,370
por ende shumë, shumë të gjatë.

95
00:05:15,370 --> 00:05:17,980
Kjo është një shumë gjëra në atje.

96
00:05:17,980 --> 00:05:20,240
Ju gjithashtu mund të lidhni version priti Google-it të saj.

97
00:05:20,240 --> 00:05:23,820
Kështu që do të ju lejojnë të mbështeten vetëm në Google për të siguruar atë.

98
00:05:23,820 --> 00:05:29,310
Ata ofrojnë çdo version të tij, në dispozicion në të gjitha kohët.

99
00:05:29,310 --> 00:05:31,530
Pra, ju ndoshta mund të mbështetet në Google për të pritur atë për ju.

100
00:05:31,530 --> 00:05:33,270
Ose ju mund të lidhura me vetë versionin e fundit të jQuery.

101
00:05:33,270 --> 00:05:36,400
Ata kanë një URL që është gjithmonë të përditësuar në versionin e fundit.

102
00:05:36,400 --> 00:05:40,850
Është jQuery-fundit, dhe nuk ka një problem me këtë,

103
00:05:40,850 --> 00:05:44,350
i cili është se në qoftë se jQuery përditësuar dhe disa nga funksionet e kaluar

104
00:05:44,350 --> 00:05:47,250
ata kishin bëhet retrograded ose deprecated,

105
00:05:47,250 --> 00:05:49,620
ajo nuk mundet - kjo mund të fillojë të mos merrni mbështetur anymore.

106
00:05:49,620 --> 00:05:52,940
Pra, nëse ju shkruani një faqe interneti duke përdorur versionin 1.8.2,

107
00:05:52,940 --> 00:05:55,000
nga versioni 2.7 kohe del

108
00:05:55,000 --> 00:05:57,000
disa nga funksionet që ju shkroi nuk punojnë më.

109
00:05:57,000 --> 00:05:59,930
Pra, kjo është më mirë për të vetëm të shkarkuar skedarin 32 KiloByte,

110
00:05:59,930 --> 00:06:04,100
vënë atë në web faqen tuaj, dhe ajo do të punojë përgjithmonë.

111
00:06:04,100 --> 00:06:07,450
>> Unë jam duke shkuar për të shkuar përpara dhe të fillojnë të flasin për funksionalitetin aktuale të jQuery.

112
00:06:07,450 --> 00:06:13,090
Gjëja e parë është selectors. Kjo është ajo që jQuery ishte konceptuar fillimisht për të siguruar.

113
00:06:13,090 --> 00:06:15,500
Dhe ju mund të klikoni mbi dokumentacionit të shikojmë në

114
00:06:15,500 --> 00:06:18,690
dokumentacioni i detajuar për selektorë unë jam duke shkuar për të mbuluar.

115
00:06:18,690 --> 00:06:24,120
Ideja prapa selektorë është që ju mund të zgjidhni elementet e HTML në një faqe.

116
00:06:24,120 --> 00:06:28,790
Elementet në një faqe të kenë letërnjoftimet dhe Klasat dhe aspektet e tjera identifikuese për ta.

117
00:06:28,790 --> 00:06:30,500
Ka gjithashtu - they're në urdhërat e ndryshme.

118
00:06:30,500 --> 00:06:32,570
Disa e kohës ata janë mbivendosur brenda njëri-tjetrin.

119
00:06:32,570 --> 00:06:38,120
JQuery ju lejon për të ndërtuar pyetje të thjeshta që të rifitoj elemente nga faqja.

120
00:06:38,120 --> 00:06:41,890
Pastaj ju mund të manipulojë këto elemente duke përdorur funksionet jQuery,

121
00:06:41,890 --> 00:06:43,990
e cila është seksioni manipulimi ne do të merrni për më vonë.

122
00:06:43,990 --> 00:06:46,040
Ju mund të ndryshojë, të ndryshojë HTML CSS,

123
00:06:46,040 --> 00:06:50,500
ju gjithashtu mund të animate dhe shtoni funksionet që aktivizojnë më ngjarjeve të caktuara.

124
00:06:50,500 --> 00:06:52,710
Kështu, për shembull, në qoftë se diçka është klikuar, ju doni diçka të ndodhë,

125
00:06:52,710 --> 00:06:55,210
ju mund të bëni këtë duke përdorur jQuery si.

126
00:06:55,210 --> 00:06:57,380
Dhe ka një numër të madh të mënyrave për të zgjedhur elemente.

127
00:06:57,380 --> 00:07:00,310
Shumica e tyre unë kurrë nuk kam përdorur, por nuk janë ato themelore,

128
00:07:00,310 --> 00:07:02,340
të cilat janë mjaft të rëndësishme.

129
00:07:02,340 --> 00:07:05,750
Përzgjedhës element, për shembull, në qoftë se ju jeni vetëm zgjedhjen asgjë

130
00:07:05,750 --> 00:07:10,640
që është një div - Unë në fakt kanë kodin e hapur për këtë prezantim rrëshqitje.

131
00:07:10,640 --> 00:07:13,450
Kështu, për shembull, këtu është slide parë.

132
00:07:13,450 --> 00:07:17,430
Këtu kemi një div. Nëse ne fakt zgjidhni të gjitha divs në faqe,

133
00:07:17,430 --> 00:07:22,300
ajo vetëm do të na japin një koleksion të të gjitha divs që ekzistojnë në këtë file.

134
00:07:22,300 --> 00:07:27,040
Përzgjedhës ID ju lejon të zgjidhni çdo gjë me një ID të caktuar.

135
00:07:27,040 --> 00:07:32,230
Pra, nëse ky, për shembull, kjo gjë ka ID "çfarë"

136
00:07:32,230 --> 00:07:37,160
dhe në qoftë se ne e bëmë këtë me atë që në vend të # ID disa,

137
00:07:37,160 --> 00:07:42,920
ajo vetëm do të kthejë një rrjet që ka një element të vetëm dhe që është se elementi i faqes.

138
00:07:42,920 --> 00:07:45,490
Ne gjithashtu mund të kombinohen selektorë në këtë mënyrë duke pasur

139
00:07:45,490 --> 00:07:48,260
vetëm të zgjidhni gjërat me kartat e identitetit që janë divs.

140
00:07:48,260 --> 00:07:51,810
Pra, vërtet. Vetëm zgjidhni divs që kanë se ID.

141
00:07:51,810 --> 00:07:55,260
Për klase ju përdorni vetëm një pikë, kjo është e njëjta gjë si CSS.

142
00:07:55,260 --> 00:07:57,500
Pasardhës gjithashtu punon, kështu që nëse ju keni disa klasë

143
00:07:57,500 --> 00:08:00,170
dhe ajo ka mbivendosur elementet brenda saj - kështu që, për shembull,

144
00:08:00,170 --> 00:08:03,260
ka disa klasa dhe ajo ka një tag spirancë për të lidhur në një tjetër faqe,

145
00:08:03,260 --> 00:08:08,510
ju mund të përdorni këtë sintaksë për të rifitoj lidhjen.

146
00:08:08,510 --> 00:08:12,420
Ju gjithashtu mund të zgjidhni gjëra të shumta në një herë; vetëm ndajini me presje,

147
00:08:12,420 --> 00:08:17,360
përdorni ndonjë selektorin që ju dëshironi, dhe ju do të zgjidhni të gjitha ato në të njëjtën kohë, në një rrjet të vetëm.

148
00:08:17,360 --> 00:08:19,650
Dhe pastaj nuk ka edhe nuk përzgjedhës, kështu që ju mund të zgjidhni të gjitha divs

149
00:08:19,650 --> 00:08:24,210
se nuk kanë disa klasë të veçantë.

150
00:08:24,210 --> 00:08:28,790
Dhe kjo është vetëm një mënyrë e dobishme për të marrë një hyrje me mënyrën se si punon kjo përzgjedhje.

151
00:08:28,790 --> 00:08:32,270
Unë do të tregoj disa shembuj konkretë në një të dytë.

152
00:08:32,270 --> 00:08:35,480
>> Selectors Avancuar janë - këto janë vetëm disa shembuj.

153
00:08:35,480 --> 00:08:38,840
Ka dhjetra e këtyre, por në qoftë se ju doni të zgjidhni të gjitha tags imazh

154
00:08:38,840 --> 00:08:42,799
brenda disa element, atëherë ju vetëm bëni: imazhin.

155
00:08:42,799 --> 00:08:45,340
Nëse ju doni të zgjidhni elementet madje, për shembull, në qoftë se nuk janë 20 prej tyre,

156
00:08:45,340 --> 00:08:48,290
ju doni të zgjidhni 0, 2, 4, 6 dhe kështu me radhë,

157
00:08:48,290 --> 00:08:51,630
bëni ju: edhe, ose ju gjithashtu mund të bëjë: i rastësishëm.

158
00:08:51,630 --> 00:08:55,470
Këto janë pseudo selectors, që do të thotë se ata në fakt llogaritin

159
00:08:55,470 --> 00:09:00,960
çdo element tjetër në vend se vetëm duke shkuar dhe zgjedhjen e të gjitha prej tyre.

160
00:09:00,960 --> 00:09:05,510
Ju gjithashtu mund të - secili element mund të ketë gjithashtu atribute specifike.

161
00:09:05,510 --> 00:09:10,580
Kështu, për shembull, class = qendër është gjithashtu një atribut.

162
00:09:10,580 --> 00:09:16,500
Për këtë tag spirancë, href, HyperText referencë, është një atribut gjithashtu.

163
00:09:16,500 --> 00:09:21,150
Kështu që ju mund të zgjidhni diçka që lidhet me një faqe të veçantë ose vetëm - kjo është me të vërtetë të përgjithshme.

164
00:09:21,150 --> 00:09:25,410
Ju mund të zgjidhni asgjë me ndonjë atribut që ju dëshironi.

165
00:09:25,410 --> 00:09:27,470
Dhe pastaj, gjithashtu, përmban atribut.

166
00:09:27,470 --> 00:09:30,420
Nëse ju, për shembull, donte të zgjidhni të gjitha elementet hyrëse

167
00:09:30,420 --> 00:09:32,700
që kanë "të kalojë" fjalën si emrin e tyre,

168
00:09:32,700 --> 00:09:37,560
në qoftë se një faqe ka një bllok teksti input

169
00:09:37,560 --> 00:09:41,050
që është quajtur "fjalëkalimi", që do të jetë një mënyrë ju mund të zgjidhni atë.

170
00:09:41,050 --> 00:09:43,020
Dhe ka shumë më tepër. Ju mund të shkoni përpara dhe të kërkoni në dokumentacionin

171
00:09:43,020 --> 00:09:46,950
dhe të shohim shembuj specifikë se si ajo funksionon.

172
00:09:46,950 --> 00:09:48,840
>> Gjë tjetër është manipulim DOM.

173
00:09:48,840 --> 00:09:52,500
Pasi kemi zgjedhur elemente, ne do të duan që në fakt bëjnë gjëra me ta.

174
00:09:52,500 --> 00:09:55,500
Deri tani ne nuk kemi shikuar në atë në të gjitha, por në qoftë se ju shikoni në dokumentacion,

175
00:09:55,500 --> 00:09:57,950
ka me të vërtetë një shumë që ne mund të bëjmë.

176
00:09:57,950 --> 00:10:02,900
Në këtë pikë, ne jemi duke shkuar për të zgjedhur elemente në këtë prezantim

177
00:10:02,900 --> 00:10:04,890
dhe të manipuluar ato duke përdorur jQuery.

178
00:10:04,890 --> 00:10:08,290
Sepse kjo është zbatuar duke përdorur jQuery, ne kemi qasje në bibliotekën jQuery,

179
00:10:08,290 --> 00:10:13,580
dhe ne mund të përdorni këto funksione në kuadër të këtij kodi.

180
00:10:13,580 --> 00:10:16,200
Një gjë e dobishme që ju nuk mund të dini rreth është konsol.

181
00:10:16,200 --> 00:10:19,340
Dhe Google Chrome është ajo që unë jam duke përdorur. Ju mund të shtypni alt command J

182
00:10:19,340 --> 00:10:21,720
ose alt kontrollit J për të hapur konsol.

183
00:10:21,720 --> 00:10:26,130
Në Firefox Unë mendoj kaluar atë e komandës K ose kontroll shift K.

184
00:10:26,130 --> 00:10:28,880
Në Safari ju duhet të shkoni të ndryshuar disa settings.

185
00:10:28,880 --> 00:10:35,460
Ka një lidhje në qoftë se ju dëshironi të bëni atë, por unë rekomandoj duke marrë Chrome ose Firefox.

186
00:10:35,460 --> 00:10:37,750
Pra, le të hapur deri konsol, kjo është këtu poshtë.

187
00:10:37,750 --> 00:10:41,170
Kjo ju lejon të vetëm në thelb të bëni ndonjë gjë që ju dëshironi.

188
00:10:41,170 --> 00:10:45,100
Kështu që ju mund të shkruani vetëm të krijojë një ndryshore të quajtur x,

189
00:10:45,100 --> 00:10:49,200
x = 5, le të shohim se çfarë x + 2 është.

190
00:10:49,200 --> 00:10:57,670
Ju edhe mund të bëni diçka si CS + Le të shohim, x + 45, që do të jetë CS50.

191
00:10:57,670 --> 00:11:00,530
Ju vetëm mund të bëjë disa gjëra tipike JavaScript.

192
00:11:00,530 --> 00:11:02,730
Por ju gjithashtu mund të bëjë jQuery këtu.

193
00:11:02,730 --> 00:11:06,200
>> Pra, le të shohim në këtë aspekt të parë këtu.

194
00:11:06,200 --> 00:11:09,500
Ne do te krijuar nje ndryshueshme quajtur HTML, i cili eshte nje varg.

195
00:11:09,500 --> 00:11:15,890
Ajo ka një tag paragraf në të, që është quajtur një tekst të ri.

196
00:11:15,890 --> 00:11:19,420
Pra, ne kemi këtë HTML, kjo është një tekst i ri, në tags paragraf.

197
00:11:19,420 --> 00:11:21,800
Tani ne të vërtetë duan të shtoni atë në faqe.

198
00:11:21,800 --> 00:11:28,310
I vendosur atë në mënyrë që HTML për këtë paragraf, ky titull këtu, është append ID.

199
00:11:28,310 --> 00:11:32,320
Nëse kemi zgjedhur append ID dhe pastaj append për atë

200
00:11:32,320 --> 00:11:34,560
ndryshueshme HTML kam krijuar vetëm,

201
00:11:34,560 --> 00:11:40,370
ajo do të shtojë se HTML në fund, menjëherë pas këtij paragrafi tag.

202
00:11:40,370 --> 00:11:43,730
Pra, nëse ne e bëjmë këtë - kemi zgjedhur këtë paragraf,

203
00:11:43,730 --> 00:11:47,590
dhe ne kemi thirrur funksionin append me ndryshore HTML Unë vetëm shtuar,

204
00:11:47,590 --> 00:11:50,960
ajo do të shtojë se teksti i ri ka të drejtë në faqe.

205
00:11:50,960 --> 00:11:54,970
Ne gjithashtu mund të prepend, që do të thotë se do të shkojë përpara, në fillim të këtij elementi.

206
00:11:54,970 --> 00:11:58,290
Pra, ka disa teksti i ri në fillim dhe më pas.

207
00:11:58,290 --> 00:12:01,660
Unë mund të shkoni përpara dhe për të rifreskoni të shpëtoj të këtij stuff unë kam bërë vetëm.

208
00:12:01,660 --> 00:12:05,280
Por kjo është një shembull se si ju mund të përdorni prepend append dhe metodat

209
00:12:05,280 --> 00:12:08,910
për të manipuluar stuff në faqe, shtoni disa HTML.

210
00:12:08,910 --> 00:12:11,080
>> Ju gjithashtu mund të ndryshojë klasa.

211
00:12:11,080 --> 00:12:14,970
Kthehu në këtë skedë stil, e kam krijuar këtë për klasën win

212
00:12:14,970 --> 00:12:19,990
që ka ngjyrë të kuqe të tekstit, disa ngjyrën e sfondit, dhe një hije tekst.

213
00:12:19,990 --> 00:12:23,810
Ajo duket e shëmtuar, por unë mund të vërtetë -

214
00:12:23,810 --> 00:12:26,410
ky paragraf i korrespondon klasit ID.

215
00:12:26,410 --> 00:12:29,860
Kështu që unë mund të shtoni klasë për të fituar.

216
00:12:29,860 --> 00:12:31,870
Unë mund të ekzekutojë këtë në tastierë,

217
00:12:31,870 --> 00:12:35,480
dhe që do të shtojë atë klasë, dhe tani ajo duket e shëmtuar, ashtu siç pritet.

218
00:12:35,480 --> 00:12:39,680
CSS automatikisht merr aplikuar për klasat që ju -

219
00:12:39,680 --> 00:12:42,680
në qoftë se ka CSS për një klasë, ajo merr automatikisht aplikohet

220
00:12:42,680 --> 00:12:44,680
në qoftë se ju të ndryshojë klasën e një elementi.

221
00:12:44,680 --> 00:12:49,230
Atëherë ne mund vetëm të hequr atë duke përdorur klasën hiqni.

222
00:12:49,230 --> 00:12:53,690
Pra, nëse ju keni disa klasa të paracaktuara si të kuqe ose të theksuar,

223
00:12:53,690 --> 00:12:55,990
dhe pastaj ju doni të aplikoni ato të elementeve,

224
00:12:55,990 --> 00:12:58,230
ju nuk keni për të bërë të gjitha CSS styling çdo kohë.

225
00:12:58,230 --> 00:13:01,510
Ju mund të shtoni vetëm klasë për një element, dhe pastaj ajo do të bëhet automatikisht -

226
00:13:01,510 --> 00:13:05,580
kjo automatikisht do të duket e përshtatshme për atë klasë.

227
00:13:05,580 --> 00:13:07,900
Ne gjithashtu mund të hiqni gjëra, kështu që unë jam duke shkuar për të zgjedhur të gjitha divs

228
00:13:07,900 --> 00:13:10,830
në faqe dhe për të hequr ato.

229
00:13:10,830 --> 00:13:13,990
Çfarë është se do të duken si?

230
00:13:13,990 --> 00:13:16,170
Ajo do të duken si asgjë, kështu që nuk ka të vërtetë asgjë të majtë.

231
00:13:16,170 --> 00:13:18,170
Prezantimi im është zhdukur.

232
00:13:18,170 --> 00:13:21,290
Unë mund të rifreskuar dhe për të sjellë atë përsëri, për fat të mirë,

233
00:13:21,290 --> 00:13:24,420
sepse ajo është vetëm drejtimin herë,

234
00:13:24,420 --> 00:13:29,460
por kjo është një shembull i heqjes, në qoftë se ju doni të shkatërrojë plotësisht një element jashtë faqe.

235
00:13:29,460 --> 00:13:33,180
>> Ju gjithashtu mund të prishësh, dhe unë jam duke shkuar për të zgjedhur të gjitha tags paragrafi në faqen

236
00:13:33,180 --> 00:13:36,850
dhe shkoni brenda tyre dhe ta zëvendësojë çfarëdo teksti që ata kanë në to

237
00:13:36,850 --> 00:13:39,690
vetëm me fjalën "testimi".

238
00:13:39,690 --> 00:13:46,520
Nëse ju bëni këtë, ju do të zëvendësojë çdo paragraf në faqen e me këtë testim.

239
00:13:46,520 --> 00:13:49,150
Yep. Ata janë zëvendësuar të gjithë me testim.

240
00:13:49,150 --> 00:13:53,270
Pra, kjo është një shembull i qasjes në tekstin dhe overwriting atë.

241
00:13:53,270 --> 00:13:57,490
Ju gjithashtu mund të rifitoj informacion, dhe kjo është me të vërtetë e ftohtë për kutitë e input.

242
00:13:57,490 --> 00:14:00,470
Nëse ju keni një kutinë e input që njerëzit janë të shtypur sende në,

243
00:14:00,470 --> 00:14:03,880
njerëzit janë të shtypur sende në të,

244
00:14:03,880 --> 00:14:09,030
këtu ne input, zgjidhni asnjë tag input me një lloj të tekstit.

245
00:14:09,030 --> 00:14:13,800
Në këtë rast, ka vetëm një kuti input në prezantimin e tërë,

246
00:14:13,800 --> 00:14:17,260
kështu që ne vetëm do të zgjidhni një të parë, dhe pastaj ne e quajmë funksion val mbi të.

247
00:14:17,260 --> 00:14:19,570
Kjo e kthen vlerën, dhe për një kutinë e input,

248
00:14:19,570 --> 00:14:24,330
vlera e çdo gjë që është vetëm ndodh që të jetë brenda saj.

249
00:14:24,330 --> 00:14:31,880
Pra, nëse e bëjmë këtë, ai vetëm kthen sende string.

250
00:14:31,880 --> 00:14:36,860
Dhe nëse ne e quajmë atë përsëri pas shkruar shumë stuff, ajo kthehet në më shumë gjëra.

251
00:14:36,860 --> 00:14:40,760
Kjo është një mënyrë e madhe për të hyrë në elementet e një kutinë e input, dhe pastaj shikoni,

252
00:14:40,760 --> 00:14:45,060
kjo është një adresë e vlefshme email, kjo është një datë e vlefshme, për shembull.

253
00:14:45,060 --> 00:14:49,600
Ju vetëm mund të marrim sende çast si njerëzit janë të shtypur atë,

254
00:14:49,600 --> 00:14:54,830
dhe pastaj kontrolloni nëse ajo është e vlefshme, dërgoni atë përsëri në një server, bëni ndonjë gjë që ju dëshironi me të.

255
00:14:54,830 --> 00:14:57,720
Dhe kjo është se si ju të hyni në atë që është brenda atyre kutive.

256
00:14:57,720 --> 00:15:00,090
>> Ju gjithashtu mund të modifikoni CSS direkt, kështu që në vend të shtuar

257
00:15:00,090 --> 00:15:02,510
një klasë që ka disa prona të paracaktuara,

258
00:15:02,510 --> 00:15:08,120
vetëm ju mund të shtoni çdo gjë që ju dëshironi për CSS asgjë.

259
00:15:08,120 --> 00:15:10,350
Trupi Pra, le të zgjedhur, e cila është paraqitja e tërë,

260
00:15:10,350 --> 00:15:14,370
dhe ngjyra është prona që përcakton se çfarë ngjyrat teksti është.

261
00:15:14,370 --> 00:15:19,420
Në qoftë se ne kemi ndryshuar atë në të kuqe, të gjithë teksti në faqe do të kthehet në të kuqe.

262
00:15:19,420 --> 00:15:26,310
Ne mund të bëjmë diçka si ngjyra blu sfond,

263
00:15:26,310 --> 00:15:30,680
ne do të shkojmë atje; është e bukur.

264
00:15:30,680 --> 00:15:33,840
Ju mund të bëni ndonjë gjë që ju doni me këtë.

265
00:15:33,840 --> 00:15:39,250
Përdorimi i pronës CSS, ju mund të vërtetë të ndryshojë mënyrën se si çdo gjë duket në çdo kohë.

266
00:15:39,250 --> 00:15:41,630
Gjë tjetër është efektet.

267
00:15:41,630 --> 00:15:45,710
Efektet në thelb janë e njëjta gjë si modifikimin CSS,

268
00:15:45,710 --> 00:15:48,870
por ata në fakt të japë disa ekstra animacion për të.

269
00:15:48,870 --> 00:15:53,380
Pra, në vend të vetëm duke treguar ose fshehur diçka apo ndryshuar ngjyrën,

270
00:15:53,380 --> 00:15:56,130
ju mund të vërtetë të bëjë atë animuar.

271
00:15:56,130 --> 00:16:00,760
Ja dokumentacioni, në qoftë se ju dëshironi të hidhni një sy në dokumentacionin e gjerë për atë.

272
00:16:00,760 --> 00:16:04,760
Por unë jam duke shkuar për të mbuluar ato kryesore.

273
00:16:04,760 --> 00:16:12,030
Nuk janë shfaqja dhe pronat fshehur.

274
00:16:12,030 --> 00:16:14,510
Trego / fshih ID fakt korrespondon me këtë kuti të tërë,

275
00:16:14,510 --> 00:16:18,190
kështu që nëse unë fsheh atë, ai thjesht do të zhduket.

276
00:16:18,190 --> 00:16:24,210
Dhe unë mund të tregojnë atë përsëri në qoftë se unë dua ta bërë atë të kthehet.

277
00:16:24,210 --> 00:16:26,340
Dhe kjo është mbrapa. Ajo në fakt nuk zhduken,

278
00:16:26,340 --> 00:16:30,670
Unë në fakt nuk hiqni atë nga faqja, unë vetëm vënë pasurinë CSS e shikimit për të fshehur

279
00:16:30,670 --> 00:16:34,030
kështu që ju nuk mund të shoh më atë.

280
00:16:34,030 --> 00:16:39,250
Ka edhe rrëshqitje dhe rrëshqitje lart poshtë, që ju lejon të ketë këtë efekt.

281
00:16:39,250 --> 00:16:47,050
Ajo slides deri zhduken, dhe pas zhduket

282
00:16:47,050 --> 00:16:53,210
ju mund të rrëshqas atë poshtë për ta bërë atë të vijnë përsëri. Dhe tani ajo është kthyer.

283
00:16:53,210 --> 00:16:57,650
Ka gjithashtu ky efekt zbehet, e cila - ID zbehet korrespondon me këtë kuti.

284
00:16:57,650 --> 00:17:01,200
Nëse unë zbehet atë, atëherë ajo do të zhduket ngadalë.

285
00:17:01,200 --> 00:17:04,490
Unë gjithashtu mund të zbehet në atë, dhe ajo do të kthehet.

286
00:17:04,490 --> 00:17:08,930
Ju gjithashtu mund të bëjë që të zbehet, e cila është specifike në funksion të zbehet.

287
00:17:08,930 --> 00:17:12,589
Ju mund të keni të zbehet për çdo perde të veçantë që ju dëshironi.

288
00:17:12,589 --> 00:17:16,869
Pra, nëse ju zbehet atë ngadalë për 0,5, ajo do të bëhet e dukshme gjysma.

289
00:17:16,869 --> 00:17:22,630
Unë mund të bëjë atë të shkojë në 0,1, dhe të kthehet në 1 për ta bërë atë plotësisht të dukshme përsëri.

290
00:17:22,630 --> 00:17:24,760
Kjo është vetëm një animacion që ju mund të bëni.

291
00:17:24,760 --> 00:17:26,750
>> Ka edhe efektet këmbe.

292
00:17:26,750 --> 00:17:33,410
Kështu që unë jam duke shkuar për të zgjedhur ID toggle, që i korrespondon kësaj kutize,

293
00:17:33,410 --> 00:17:38,970
dhe në atë div ju mund të telefononi këmbe, e nëse ajo është e dukshme ajo do të bëhet e padukshme,

294
00:17:38,970 --> 00:17:42,320
në qoftë se është e padukshme ajo do të bëhet e dukshme përsëri.

295
00:17:42,320 --> 00:17:44,440
Kështu që unë vetëm e quajti këtë funksion toggle dy herë, e para ishte

296
00:17:44,440 --> 00:17:48,380
e njëjta gjë si të fshehur, thirrja e dytë ishte e njëjta gjë si një shfaqje.

297
00:17:48,380 --> 00:17:53,510
Dhe ju gjithashtu mund të bëjë këtë me një këmbe zbehet,

298
00:17:53,510 --> 00:17:55,730
e cila e bën të njëjtën gjë, përveç në fakt ajo zbehet.

299
00:17:55,730 --> 00:17:59,410
Dhe e njëjta gjë me rrëshqitje toggle.

300
00:17:59,410 --> 00:18:01,460
Ka efekte të lidhur me zinxhirë, si edhe, që do të thotë

301
00:18:01,460 --> 00:18:05,520
në qoftë se ju zgjidhni një element dhe të vetëm të thërrasë një bandë e metodave animacion mbi të,

302
00:18:05,520 --> 00:18:07,400
nëse do të donit që ajo të shuhem, pastaj rreshqet,

303
00:18:07,400 --> 00:18:11,040
dhe pastaj fshehin dhe pastaj zbehet në, ajo do të bëjë ato në një rresht.

304
00:18:11,040 --> 00:18:24,920
Kështu u zhduk, u kthye - për disa arsye, hide nuk ndodhi.

305
00:18:24,920 --> 00:18:30,030
Le të try it out. Yeah, kështu që venitur jashtë dhe pastaj ajo shkau larg.

306
00:18:30,030 --> 00:18:32,230
Dhe ka shumë më tepër. Ju mund të përdorni funksionin Gjall

307
00:18:32,230 --> 00:18:35,370
për të krijuar animacione tuaja, e cila është mjaft komplekse,

308
00:18:35,370 --> 00:18:38,790
por ajo ju ofron me zgjateshmëri pafund.

309
00:18:38,790 --> 00:18:40,630
Ju mund të bëjë çdo lloj të animacion që ju dëshironi.

310
00:18:40,630 --> 00:18:44,230
Ju gjithashtu mund të përdorni radhë të radhë deri animacione të shumta në një kohë.

311
00:18:44,230 --> 00:18:47,340
Pra, nëse ju doni diçka për të fluturuar nëpër faqe,

312
00:18:47,340 --> 00:18:49,860
rrëshqitje nga e djathta në të majtë të lartë fund, ju mund të bëni që,

313
00:18:49,860 --> 00:18:55,240
dhe vetëm kanë një bandë e veprimeve që shkojnë njëri pas tjetrit.

314
00:18:55,240 --> 00:18:57,490
>> Gjë tjetër që ne do të flasim rreth është ngjarje.

315
00:18:57,490 --> 00:19:02,090
Ngjarje t'ju lejojë - deri më tani, ne kemi qenë vetëm të shtypni gjëra në tastierë

316
00:19:02,090 --> 00:19:04,870
dhe kjo është një mënyrë për të bërë këtë të ndodhë,

317
00:19:04,870 --> 00:19:08,020
por në një faqe aktuale, ju nuk jeni do të jetë në gjendje të

318
00:19:08,020 --> 00:19:10,020
të bëjë gjërat lloj User në tastierë.

319
00:19:10,020 --> 00:19:12,050
Ju duam që gjërat të ndodhin automatikisht.

320
00:19:12,050 --> 00:19:18,060
Për këtë, ju duhet të përdorni ngjarjet që aktivizojnë ndodh në disa ngjarje të caktuar.

321
00:19:18,060 --> 00:19:21,340
Ju mund të kontrolloni dokumentacionin për detaje të plotë.

322
00:19:21,340 --> 00:19:24,030
Pra, le të shohim. Ne duam për të fshehur ose për të treguar kuti,

323
00:19:24,030 --> 00:19:29,340
por tani ky buton nuk do të bëjë asgjë, sepse unë nuk e zbatojnë atë ende.

324
00:19:29,340 --> 00:19:35,420
Unë jam duke shkuar për të shkuar në faqen aktuale HTML.

325
00:19:35,420 --> 00:19:38,560
Ja rrëshqitje. Ka një div për rrëshqitje.

326
00:19:38,560 --> 00:19:41,230
Ajo ka klasën e rrëshqitje.

327
00:19:41,230 --> 00:19:46,890
Ka teksti. Tani, nuk ka kjo kuti dhe butonin kuti.

328
00:19:46,890 --> 00:19:52,900
Si do të bëjë në fakt kjo zhduket?

329
00:19:52,900 --> 00:19:58,250
Para së gjithash, le të shkruajë një funksion që e bën ID kuti zhduken.

330
00:19:58,250 --> 00:20:01,820
Kjo është sintaksa për funtion, le të vetëm e quajti atë hideTheBox.

331
00:20:01,820 --> 00:20:06,130
Ajo nuk ka marrë ndonjë argumente, sepse nuk ka argumente që do të merren.

332
00:20:06,130 --> 00:20:08,950
Ne mund të zgjidhni ID kuti.

333
00:20:08,950 --> 00:20:15,020
Pra, duke përdorur jQuery zgjidhni, ne mund të zgjidhni ID kuti,

334
00:20:15,020 --> 00:20:17,700
dhe pastaj vetëm të bëjë atë të zhduket.

335
00:20:17,700 --> 00:20:20,690
Le të bëjnë atë shuhem.

336
00:20:20,690 --> 00:20:27,390
Në qoftë se ne u zhvillua këtë funksion në tastierë aktuale,

337
00:20:27,390 --> 00:20:33,380
ne mund të përcaktojë këtë funksion, ne mund të telefononi hideTheBox, dhe ajo punon.

338
00:20:33,380 --> 00:20:36,650
Por ne duam që ajo të ndodhë kur shtypet butoni në të vërtetë.

339
00:20:36,650 --> 00:20:40,950
Për ta bërë këtë, ne duhet të përdorim një ngjarje.

340
00:20:40,950 --> 00:20:45,500
Të lidh një ngjarje për një buton të veçantë ose disa ndodh veprimi,

341
00:20:45,500 --> 00:20:50,040
ne kemi për të zgjedhur elementin se ngjarja do të shkaktonte -

342
00:20:50,040 --> 00:20:52,650
ose që do të shkaktonte ngjarje, sorry.

343
00:20:52,650 --> 00:20:57,220
>> Pra, para së gjithash, le të zgjidhni ID butonin kuti

344
00:20:57,220 --> 00:20:59,610
sepse kjo është butoni, dhe tani, për atë buton,

345
00:20:59,610 --> 00:21:02,750
ne duam të krijojmë një animacion, kur ajo është klikuar.

346
00:21:02,750 --> 00:21:05,040
Pra, nuk ka këtë funksion click.

347
00:21:05,040 --> 00:21:08,470
Kjo ju lejon të lidhni një tjetër funksion në të.

348
00:21:08,470 --> 00:21:12,320
Ky funksion merr një tjetër funksion si nje argument

349
00:21:12,320 --> 00:21:14,310
ne mund të kalojë në funksion hideTheBox,

350
00:21:14,310 --> 00:21:20,950
dhe sa herë që ky buton është klikuar, se funksioni i automatikisht do të ekzekutojë.

351
00:21:20,950 --> 00:21:24,850
Pra, kjo do të punojë në qoftë se ne të shpëtuar këtë, unë do të refresh,

352
00:21:24,850 --> 00:21:33,460
dhe - një të dytë, unë jam i keq.

353
00:21:33,460 --> 00:21:44,770
Më lejoni të rregullojmë këtë të vërtetë shpejt.

354
00:21:44,770 --> 00:21:50,680
Mirë. Ka të shkojmë. Deri tani kuti është zhdukur kur ne të klikoni butonin.

355
00:21:50,680 --> 00:21:55,470
Ne gjithashtu mund të ndryshojë kjo në vetëm fadeToggle,

356
00:21:55,470 --> 00:22:00,020
ndryshojë atë vetëm për të fshehur ose për të treguar kuti,

357
00:22:00,020 --> 00:22:03,850
dhe kjo gjithashtu do të punojë shumë, në qoftë se ne refresh.

358
00:22:03,850 --> 00:22:08,550
Ne mund të fshehin atë, ne gjithashtu mund të tregojnë atë, dhe se do të vazhdojë të punojë.

359
00:22:08,550 --> 00:22:12,210
Një tjetër gjë që mund të bëjmë është, ne fakt nuk duhet të përcaktojë këtë funksion hideTheBox

360
00:22:12,210 --> 00:22:15,050
para se ne e quajmë funksion click.

361
00:22:15,050 --> 00:22:17,640
Pra, në vend të përcaktimit të funksionit dhe duke bërë thirrje hideTheBox,

362
00:22:17,640 --> 00:22:20,310
ne jemi vetëm duke shkuar për të thirrur atë, nëse kjo gjë është e klikuar.

363
00:22:20,310 --> 00:22:22,310
Pra, ne mund të përcaktojë atë në mënyrë anonime këtu,

364
00:22:22,310 --> 00:22:25,070
cila eshte nje funksion që ka JavaScript.

365
00:22:25,070 --> 00:22:29,720
Ju mund të përcaktojë një funksioni; normalisht, ne do të themi hideTheBox funksion

366
00:22:29,720 --> 00:22:34,490
me argumente, por në vend të kësaj, ne mund të them vetëm të funksionojë pa argumente,

367
00:22:34,490 --> 00:22:36,870
fillojë Brace kaçurrel të saktësimit të funksionit,

368
00:22:36,870 --> 00:22:40,780
mbyllë këtë Brace kaçurrel, dhe pastaj vetëm të përcaktojë funksionin në këtu,

369
00:22:40,780 --> 00:22:45,130
brenda kllapa parë dhe parantezave fundit

370
00:22:45,130 --> 00:22:47,860
që korrespondojnë me argumentet e funksionit click.

371
00:22:47,860 --> 00:22:53,320
Pra, ne jemi duke kaluar në këtë funksion, ne mund të kopjoni këtë linjë të kodit të drejtë këtu,

372
00:22:53,320 --> 00:22:55,450
dhe se do të bëjë të njëjtën gjë e saktë.

373
00:22:55,450 --> 00:22:57,290
Dhe tani ne nuk kemi këtë funksion të rastit fadeTheBox

374
00:22:57,290 --> 00:22:59,960
që është ulur rreth për asnjë arsye të dukshme.

375
00:22:59,960 --> 00:23:02,070
Funksioni është përcaktuar anonime, ajo nuk ka një emër.

376
00:23:02,070 --> 00:23:08,060
Ajo do të ekzekutojë vetëm kur ne të klikoni mbi butonin kuti.

377
00:23:08,060 --> 00:23:12,180
Pra freskuese herë më shumë, një herë më shumë, dhe ju mund të shihni se ai ende punon.

378
00:23:12,180 --> 00:23:16,700
Dhe kjo është se si ju e krijoni ngjarjet.

379
00:23:16,700 --> 00:23:19,190
>> Nuk janë një shumë e ngjarjeve të ndryshme që ne mund të përdorni.

380
00:23:19,190 --> 00:23:23,540
Unë jam duke shkuar për të kaluar prapa për të përdorur tastierë për të vetëm të ju tregojnë se si këto punë.

381
00:23:23,540 --> 00:23:28,210
IDS për secilin nga këto korrespondojnë me çdo kuti.

382
00:23:28,210 --> 00:23:33,020
Pra, kjo kuti është ID klik, kjo është një ID kyç, dhe kjo është një ID miut.

383
00:23:33,020 --> 00:23:36,120
Një gjë më shumë është se nuk ka veprim ky funksion, në vend se të shtypni atë në çdo kohë,

384
00:23:36,120 --> 00:23:41,610
Unë në fakt shkoi përpara dhe të përcaktuar këtë funksion veprimi këtu poshtë.

385
00:23:41,610 --> 00:23:46,860
Ai e bën të njëjtën gjë si funksion hideTheBox.

386
00:23:46,860 --> 00:23:51,340
Ajo merr këtë kuti dhe as zbehet atë apo zbehet atë in

387
00:23:51,340 --> 00:23:54,110
Dhe kjo është arsyeja pse ne jemi në gjendje ta përdorin atë këtu.

388
00:23:54,110 --> 00:24:00,350
Pra, në qoftë se ne të klikoni mbi këtë ID click, ne duam të bërë kuti zhduken ose rishfaqen.

389
00:24:00,350 --> 00:24:03,610
Është e njëjta gjë si butonin që kemi pasur në rrëshqitje të fundit.

390
00:24:03,610 --> 00:24:07,450
Tani, pasi ne e quajmë se, ne mund të klikoni mbi këtë dhe kuti do të zhduket,

391
00:24:07,450 --> 00:24:10,160
pastaj klikoni mbi atë përsëri dhe kutia do të rishfaqen.

392
00:24:10,160 --> 00:24:12,480
Kjo është shumë e thjeshtë. Klikoni dy herë bën të njëjtën gjë,

393
00:24:12,480 --> 00:24:15,660
përveç ajo kërkon një klik të dyfishtë.

394
00:24:15,660 --> 00:24:19,030
Pra, nëse ju klikoni mbi atë një herë dhe klikoni mbi atë përsëri asgjë nuk do të ndodhë,

395
00:24:19,030 --> 00:24:21,140
por në qoftë se ju klikoni dy herë më shpejt, ajo do të zhduket.

396
00:24:21,140 --> 00:24:23,310
Nëse ju klikoni dy herë, ajo do të vijë përsëri.

397
00:24:23,310 --> 00:24:25,250
Pra, kjo është shumë e thjeshtë.

398
00:24:25,250 --> 00:24:31,170
Input tastierë është lloj i çuditshëm, unë nuk mendoj se në fakt ajo punon në këtë shembull

399
00:24:31,170 --> 00:24:37,670
sepse çelësi poshtë, lart dhe shtypni kyç kyç dhe veprime të tjera kyçe

400
00:24:37,670 --> 00:24:47,190
aktivizuar asnjë rëndësi se çfarë element që ju lidhin atë për të.

401
00:24:47,190 --> 00:24:51,410
Për shembull, edhe në qoftë se unë i detyruar çelësi poshtë në trup apo diçka tjetër tërësisht,

402
00:24:51,410 --> 00:24:55,950
atëherë ajo do të vazhdojë të aktivizuar nuk ka rëndësi - kjo nuk është specifik.

403
00:24:55,950 --> 00:25:00,190
Unë nuk duhet të jetë klikuar mbi këtë dhe të shtypni një buton për të bërë çdo gjë zhduket.

404
00:25:00,190 --> 00:25:04,470
Ajo do të aktivizohet pavarësisht nga ajo që elementi Unë jam aktualisht in

405
00:25:04,470 --> 00:25:06,880
Pra, këto në fakt nuk punojnë në këtë shembull

406
00:25:06,880 --> 00:25:13,180
sepse ajo nuk e njeh mua si hyjnë kontribut në div input keyboard.

407
00:25:13,180 --> 00:25:15,740
>> Por në qoftë se ju shikoni në veprimet e miut,

408
00:25:15,740 --> 00:25:19,620
i pari po rri pezull, dhe kjo mund të bëjë disa të këtë duke përdorur CSS.

409
00:25:19,620 --> 00:25:24,280
Në qoftë se ju përdorni CSS, ju mund ta krijoni atë mënyrë që në qoftë se ju rri pezull mbi diçka,

410
00:25:24,280 --> 00:25:28,940
pastaj ndryshimet e tij stil.

411
00:25:28,940 --> 00:25:32,170
Por duke përdorur jQuery ju mund të ndryshoni stilet e gjëra të tjera si.

412
00:25:32,170 --> 00:25:37,120
Kështu, për shembull, ne jemi duke shkuar për të thirrur veprim në qoftë se ne rri pezull mbi këtë div.

413
00:25:37,120 --> 00:25:39,660
Kjo do të thotë në qoftë se ne rri pezull mbi të, atëherë kuti do të zhduket.

414
00:25:39,660 --> 00:25:42,430
Nëse ne shkojmë larg nga ajo, kutia do të rishfaqen.

415
00:25:42,430 --> 00:25:45,090
Nëse ne e quajmë këtë dhe rri pezull mbi të, kutia nuk zhduket,

416
00:25:45,090 --> 00:25:47,050
dhe sa më shpejt që ne shkojmë larg, ajo vjen përsëri.

417
00:25:47,050 --> 00:25:49,750
Nëse ne e quajmë këtë funksion rri pezull mbi ID miut,

418
00:25:49,750 --> 00:25:54,380
që i korrespondon kësaj kutize, atëherë në qoftë se ne rri pezull mbi kuti,

419
00:25:54,380 --> 00:26:00,440
atëherë kuti të vërtetë do të zhduket - ajo e të qenit i shokuar të drejtë tani, por -

420
00:26:00,440 --> 00:26:06,310
në qoftë se ne shkojmë larg prej saj, ajo do të rishfaqen. Tani për tani kjo është prapa për disa arsye.

421
00:26:06,310 --> 00:26:12,720
Mouse të hyjnë dhe të lëvizin mausin funksionet janë disi të ngjashme, por pak më ndryshe.

422
00:26:12,720 --> 00:26:16,470
Mouse të hyjë vetëm aktivizon kur miu hyn në kuti, siç pritej.

423
00:26:16,470 --> 00:26:19,210
Pra, nëse ju hyni në të, ajo do të zhduket.

424
00:26:19,210 --> 00:26:23,210
Por kjo nuk do të rishfaqen kur ju lëvizni larg, ju do të keni për të lëvizur prapa mbi atë për atë që do të vijnë përsëri.

425
00:26:23,210 --> 00:26:25,590
Ka gjithashtu lëvizin mausin funksion, i cili do të aktivizojë

426
00:26:25,590 --> 00:26:29,300
kur miu eshte edhe pranishme në kuti.

427
00:26:29,300 --> 00:26:32,430
Pra, kjo vetëm do të mbajnë në vazhdim e sipër, vyshket në dhe jashtë.

428
00:26:32,430 --> 00:26:35,660
Dhe kjo është në fakt prerjet - kjo duket si ajo është vetëm venitje brenda dhe jashtë,

429
00:26:35,660 --> 00:26:39,140
por kjo është në fakt prerjet veprime shumë më tepër se kjo,

430
00:26:39,140 --> 00:26:43,550
kështu që kur ju lëvizin larg ajo vetëm do të mbajë për shkak se ajo është në Anglisht si një mijë prej tyre.

431
00:26:43,550 --> 00:26:46,620
Ndoshta jo një mijë. Ndoshta pesë.

432
00:26:46,620 --> 00:26:50,200
Ajo shkrimet më shumë se kaq.

433
00:26:50,200 --> 00:26:53,280
Çështja është, të gjitha veprimet e miut, ka shumë prej tyre.

434
00:26:53,280 --> 00:26:55,480
Ju mund të lexoni deri në ato të tjera, por ata janë të gjithë pak më të ndryshme,

435
00:26:55,480 --> 00:26:57,700
dhe cilado që ju mund të vini një që ju duhet

436
00:26:57,700 --> 00:27:02,130
cilado për qëllim të veçantë që ju jeni duke u përpjekur për të bërë.

437
00:27:02,130 --> 00:27:05,060
>> Gjë tjetër që unë jam duke shkuar për të biseduar rreth është AJAX.

438
00:27:05,060 --> 00:27:09,340
AJAX, unë e di se ne nuk kemi mbuluar JavaScript në thellësi si shumë këtë vit,

439
00:27:09,340 --> 00:27:11,770
kështu që unë jam vetëm do të flasim për AJAX në përgjithësi për një minutë.

440
00:27:11,770 --> 00:27:15,210
AJAX qëndron për Asynchronous JavaScript dhe XML.

441
00:27:15,210 --> 00:27:19,030
Kjo është në thelb, për shembull, kur ju jeni në Facebook dhe kjo ju shtyn një njoftim,

442
00:27:19,030 --> 00:27:23,060
kjo është për shkak AJAX po kandidon në shfletuesin tuaj web.

443
00:27:23,060 --> 00:27:25,800
Çdo çift i sekondave shfletuesin tuaj web është në fakt

444
00:27:25,800 --> 00:27:29,420
duke shkuar në serverat e Facebook, duke u kërkuar atyre, a keni ndonjë gjë të re për mua,

445
00:27:29,420 --> 00:27:31,980
dhe pastaj ajo vjen përsëri tek ju.

446
00:27:31,980 --> 00:27:36,320
Kjo ju lejon të dërgoni kërkesat për një server

447
00:27:36,320 --> 00:27:38,660
në të vërtetë pa pasur nevojë të ngarkesës faqe.

448
00:27:38,660 --> 00:27:42,040
Pra normalisht, në qoftë se ju jeni vetëm duke përdorur PHP dhe një databazë,

449
00:27:42,040 --> 00:27:45,480
ju keni për të rifreskoni faqen para se ju mund të merrni informacion të ri nga serveri.

450
00:27:45,480 --> 00:27:48,770
Por duke përdorur AJAX, ju mund të tërheqë për këtë informacion të ri vazhdimisht,

451
00:27:48,770 --> 00:27:52,250
ose të tërheqë për atë kur ju klikoni një buton apo diçka të tillë.

452
00:27:52,250 --> 00:27:56,140
Pra, kjo na lejon të dërgoni kërkesat pa reloading page,

453
00:27:56,140 --> 00:27:58,130
dhe ne mund të përdorni ose GET ose PAS kërkesa.

454
00:27:58,130 --> 00:28:05,370
>> GET kërkesa janë, për shembull, në qoftë se ju të Google.com in English

455
00:28:05,370 --> 00:28:10,900
dhe të bëjë testin q =. Kjo është duke u dhënë atyre një test pyetje.

456
00:28:10,900 --> 00:28:15,890
Dhe kjo është një kërkesë GET, sepse ajo kalonte në ato parametra në URL vetë.

457
00:28:15,890 --> 00:28:19,250
Një kërkesë POST është si në qoftë se ju jeni dërguar ato përmes postës.

458
00:28:19,250 --> 00:28:22,500
Ajo është si ju vënë atë në një letër dhe anija atë jashtë atyre,

459
00:28:22,500 --> 00:28:25,140
por ata në fakt nuk shohin përmbajtjen. Ata nuk janë të dukshme në URL.

460
00:28:25,140 --> 00:28:31,040
Ju nuk mund të drejtpërdrejt të shkruani atë në, ju duhet të dërgoni atë pothuajse fshehurazi.

461
00:28:31,040 --> 00:28:33,880
Ajo është në një post.

462
00:28:33,880 --> 00:28:38,660
Por duke përdorur jQuery, ju mund të bëni GET dhe kërkesave PAS

463
00:28:38,660 --> 00:28:42,740
shumë më lehtë se sa normalisht ju mund të përdorni vetëm JavaScript thjeshtë.

464
00:28:42,740 --> 00:28:50,140
Ju mund query TV duke përdorur GET kërkesa, dhe ju gjithashtu mund të kontrolloni për login informacion.

465
00:28:50,140 --> 00:28:54,400
Në faqen tjetër, Unë të krijova këtë, i cili pyet: "Çfarë ka për drekë?"

466
00:28:54,400 --> 00:28:58,230
përdorimin e ushqimit Harvardit API, kështu që le të tërheqë që deri.

467
00:28:58,230 --> 00:29:01,840
Ky është vetëm një shembull se si ju mund të përdorni jQuery për të bërë një kërkesë për të marrë një API

468
00:29:01,840 --> 00:29:04,200
dhe për të marrë informacion kthehet nga ajo.

469
00:29:04,200 --> 00:29:07,090
Pra, ne duam të shohim menu për sot,

470
00:29:07,090 --> 00:29:10,560
dhe ne duam të shohim se çfarë është për drekë.

471
00:29:10,560 --> 00:29:16,500
Këtu është URL për të krijuar një kërkesë për të marrë në jQuery.

472
00:29:16,500 --> 00:29:18,600
ju përdorni $. marrë funksionin.

473
00:29:18,600 --> 00:29:22,290
Argumenti i parë është URL, kështu që saktësisht çfarë ju jeni querying.

474
00:29:22,290 --> 00:29:27,200
Pastaj argumenti tjetër është një funksion që ekzekuton kur kërkesa merrni është i plotë.

475
00:29:27,200 --> 00:29:29,980
Pra, ju dërgoj disa kërkesën në server, prisni që ajo të vijë përsëri.

476
00:29:29,980 --> 00:29:33,770
Kur ajo nuk kthehet, ju jeni duke shkuar për të marrë disa veprime me të dhëna që është kthyer nga serveri.

477
00:29:33,770 --> 00:29:37,520
Le të shkojnë përpara dhe të Kodit, ky si.

478
00:29:37,520 --> 00:29:42,110
Unë nuk Kodit, ky as, me qëllim.

479
00:29:42,110 --> 00:29:46,660
Ja TODO. Para së gjithash, le të përdorin lidhjen ngjarje

480
00:29:46,660 --> 00:29:50,820
kështu që kur shtypet ky buton, ne kemi dërguar një kërkesë të merrni off.

481
00:29:50,820 --> 00:29:53,410
Dhe kur kjo të marrë të kthimit kërkesë me disa të dhënave,

482
00:29:53,410 --> 00:29:57,290
ne jemi duke shkuar për të shkruar atë në këtë div info vakt ID.

483
00:29:57,290 --> 00:30:02,860
Para së gjithash, le të zgjidhni ID butonin ushqimit.

484
00:30:02,860 --> 00:30:07,320
Kur ajo është klikuar, ne duam që ajo të bëjë diçka.

485
00:30:07,320 --> 00:30:11,930
Le të vetëm të bëjë atë një fuction anonim, si më parë.

486
00:30:11,930 --> 00:30:15,550
Mund të përfundojë ato formatimin e teksteve kaçurrel,

487
00:30:15,550 --> 00:30:18,530
dhe kur shtypet ky buton, ne duam të dërgoni një kërkesë GET

488
00:30:18,530 --> 00:30:20,750
për të kontrolluar se çfarë është për drekë.

489
00:30:20,750 --> 00:30:24,970
Për ta bërë këtë, ne mund të shkruani vetëm $. Merrni.

490
00:30:24,970 --> 00:30:28,850
Ky është një funksion jQuery, duke përdorur shenjën e dollarit.

491
00:30:28,850 --> 00:30:31,430
Ajo merr një çift të argumenteve. I pari është URL,

492
00:30:31,430 --> 00:30:34,450
e dyta është funksion callback, funksioni që është quajtur

493
00:30:34,450 --> 00:30:37,740
kur se kërkesa në fakt kthehet.

494
00:30:37,740 --> 00:30:39,890
Le të vetëm të ndërtuar URL parë.

495
00:30:39,890 --> 00:30:44,650
Ne mund të merrni atë nga API Davidi i shkroi deri.

496
00:30:44,650 --> 00:30:51,360
Shkuarja këtu, ne mund të shohim se kjo është food.cs50.net/api/1.3/menus,

497
00:30:51,360 --> 00:30:54,140
dhe atëherë ju vetëm të kalojë në emrat e parametrave që ju do të donit.

498
00:30:54,140 --> 00:30:57,760
Pra, është vlera parametri 1 1.

499
00:30:57,760 --> 00:31:00,910
Ajo duket si data standarde, Start, date defaults për sot

500
00:31:00,910 --> 00:31:03,110
në qoftë se ju nuk shkruani asgjë dhe data e përfundimit gjithashtu defaults

501
00:31:03,910 --> 00:31:05,930
për sot, nëse ju nuk shkruani asgjë.

502
00:31:05,930 --> 00:31:10,790
Kjo është ajo që ne duam. Ne duam që vetëm të marrë informacion për sot.

503
00:31:10,790 --> 00:31:12,950
>> Ne duam formati të jetë në JSON.

504
00:31:12,950 --> 00:31:15,570
Kjo është vetëm arbitrare, ju mund të përdorni çdo formë që ju dëshironi.

505
00:31:15,570 --> 00:31:18,950
Ju mund të përdorni CSV, por JSON është simbol JavaScript Object.

506
00:31:18,950 --> 00:31:24,150
Është shumë e lehtë për JavaScript për të kuptuar çfarë do të thotë,

507
00:31:24,150 --> 00:31:27,110
dhe ne mund të shtypura it out më lehtë në këtë mënyrë.

508
00:31:27,110 --> 00:31:30,490
Pra, le të kërkojë atë në JSON, dhe drekë le kërkesë.

509
00:31:30,490 --> 00:31:37,660
Pra vakt = drekë. Vetëm të shkruani URL-up se, ne kthehemi këtu.

510
00:31:37,660 --> 00:31:41,290
Ka menutë. Parametër i parë është output = JSON

511
00:31:41,290 --> 00:31:44,640
sepse kjo është ajo që ne duam, dhe ju ndajë parametrat me një 'dhe'.

512
00:31:44,640 --> 00:31:48,940
Parametri i dytë është - unë nuk e mbani mend.

513
00:31:48,940 --> 00:31:52,170
Vakt. Dhe ne duam = drekë vakt.

514
00:31:52,170 --> 00:31:57,390
Ju mund ta provoni këtë duke shtypur atë URL në shfletuesin tuaj dhe duke shkuar për të.

515
00:31:57,390 --> 00:32:03,120
Kjo do t'ju japë disa dalje. Kjo është vetëm një bandë e sende që është për drekë.

516
00:32:03,120 --> 00:32:10,410
Është në këtë format të shëmtuar. Ne duam të shtypura atë onto faqen tonë në një format të mirë.

517
00:32:10,410 --> 00:32:12,580
Kështu që URL është korrekte, tani ne vetëm duhet të shkruani një funksion

518
00:32:12,580 --> 00:32:18,300
për të thirrur përsëri kur kërkesa është e suksesshme.

519
00:32:18,300 --> 00:32:20,430
Ky funksion do të vërtetë të marrë një argument. Ajo do të jetë dhënave.

520
00:32:20,430 --> 00:32:25,650
Të dhënat është ajo vjen përsëri nga kërkesa merrni pas kërkesa merrni është bërë.

521
00:32:25,650 --> 00:32:28,860
Ne mund të bëjmë formatimin e teksteve kaçurrel, këtu kemi shkruar funksionin anonim

522
00:32:28,860 --> 00:32:33,900
që ekzekuton, duke përdorur të dhënat që kur ne të merrni informacion mbrapa.

523
00:32:33,900 --> 00:32:37,840
Pra dhënave, kur kemi shtypur në këtë URL,

524
00:32:37,840 --> 00:32:41,540
kjo është ajo që të dhënat do të duken si. Ajo do të jetë ky varg i madh.

525
00:32:41,540 --> 00:32:48,610
Por gjëja e mirë është, JavaScript mund të kuptoj atë duke përdorur funksionin JSON.parse.

526
00:32:48,610 --> 00:32:54,950
Pra, le të krijojë një ndryshore të ri të quajtur analizimi i të dhënave.

527
00:32:54,950 --> 00:32:57,060
Dhe të dhënat Parse është një koleksion të objekteve.

528
00:32:57,060 --> 00:33:04,200
Çdo objekt përmban informacion të tillë si - mirë, le të marrin një sy.

529
00:33:04,200 --> 00:33:08,980
Ajo ka një datë, një vakt, kategori, recetë, të gjitha këto gjëra tjera.

530
00:33:08,980 --> 00:33:10,860
Pra, le të vetëm të shtypura nga një emër për secilin.

531
00:33:10,860 --> 00:33:13,790
Le të iterate mbi array tërë e gjëra që ne të kthehemi nga ai,

532
00:33:13,790 --> 00:33:17,570
dhe vetëm të shtypura nga çdo njëri - printojë emrin e secilit.

533
00:33:17,570 --> 00:33:22,670
Kjo është një për lak.

534
00:33:22,670 --> 00:33:26,030
>> Java e ka këtë sintaksë të dobishme, ku ju mund të krijojë një ndryshore dhe loop mbi një grup,

535
00:33:26,030 --> 00:33:30,150
dhe var unë është vetëm iterator, kështu që në vend që të bëjë var = 0,

536
00:33:30,150 --> 00:33:40,290
i ishte më pak se gjatësia, i + +, ju mund të bëni vetëm VAR i të dhënave në parsed.

537
00:33:40,290 --> 00:33:47,060
Në këtë shembull, të dhënat parsed (i) do të korrespondojnë me elementin e tanishme

538
00:33:47,060 --> 00:33:49,850
i vargut, objekti aktual.

539
00:33:49,850 --> 00:33:51,720
Dhe ne duam që të marrë emrin nga ajo.

540
00:33:51,720 --> 00:33:54,170
Pra, le të vetëm të bëjë emër.

541
00:33:54,170 --> 00:33:57,000
Dhe gjëja e fundit është, ne jemi duke shkuar për të ketë disa jQuery përsëri.

542
00:33:57,000 --> 00:34:02,660
Në fakt të shtoni atë në div, ky info vakt div kjo është aktualisht bosh.

543
00:34:02,660 --> 00:34:05,430
Pra, le të zgjidhni se.

544
00:34:05,430 --> 00:34:13,870
Ne do të përdorim jQuery dhe zgjidhni Info vakt ID div, apo info vakt ID, sorry.

545
00:34:13,870 --> 00:34:16,580
Ne duam të append për këtë.

546
00:34:16,580 --> 00:34:21,030
Në qoftë se ne e bëmë testin, për shembull, ai vetëm do të prishësh atë çdo herë të vetme.

547
00:34:21,030 --> 00:34:29,190
Pra, ne vetëm mund të append këtë.

548
00:34:29,190 --> 00:34:31,889
Elementi aktuale në grup, ne do të merrni emrin nga ajo,

549
00:34:31,889 --> 00:34:38,159
dhe ne do të append atë në fund të vakt div info ID.

550
00:34:38,159 --> 00:34:40,120
Dhe pastaj vetëm për të bërë të duken më të pastër,

551
00:34:40,120 --> 00:34:51,550
Ne gjithashtu do të append një pushim linjë kështu që nuk është e gjitha në një rresht.

552
00:34:51,550 --> 00:34:55,280
Pra, nëse gjithçka shkon mirë, që duhet të jetë e mirë për të -

553
00:34:55,280 --> 00:34:57,220
para së gjithash, sa herë që ky buton është klikuar,

554
00:34:57,220 --> 00:35:00,070
ajo do të dërgoj një kërkesë për të marrë këtë URL.

555
00:35:00,070 --> 00:35:02,500
Kur të dhënat kthehet prej saj, ai do të kuptoj atë,

556
00:35:02,500 --> 00:35:06,950
kthejnë atë në JSON, lak mbi array tërë përfaqësojnë ato të dhëna,

557
00:35:06,950 --> 00:35:10,310
dhe pastaj append emrin dhe një pushim linjë

558
00:35:10,310 --> 00:35:16,500
për çdo linjë në këtë ID info vakt cila ishte më parë bosh.

559
00:35:16,500 --> 00:35:18,910
Pra, duke shkuar prapa në këtë faqe, ne do të refresh,

560
00:35:18,910 --> 00:35:23,690
kliko, të gjeni - ai nuk punon. Kjo është për të ardhur keq.

561
00:35:23,690 --> 00:35:25,830
Dhe kjo është ajo ku vjen in debugging

562
00:35:25,830 --> 00:35:30,070
Index.html, alineja 1.

563
00:35:30,070 --> 00:35:57,210
Është interesant.

564
00:35:57,210 --> 00:35:59,720
Të gjithë të drejtë, të mirë, në vend se të shpenzojë kohë për ta bërë këtë, unë jam vetëm duke shkuar për të

565
00:35:59,720 --> 00:36:07,070
tërheq lart skedarin që kam bërë, i cili është versioni i përfunduar.

566
00:36:07,070 --> 00:36:13,710
Unë nuk jam i sigurt se çfarë është dallimi, por ne vetëm mund të hapur këtë deri në vend.

567
00:36:13,710 --> 00:36:19,740
Dhe ne do të shkojmë në AJAX, dhe kjo duhet të funksionoj në rregull.

568
00:36:19,740 --> 00:36:21,730
Kjo është ajo që ishte për drekë sot,

569
00:36:21,730 --> 00:36:24,870
në asnjë mënyrë të veçantë, me thonjëza rreth tij, kështu që nuk është prettiest.

570
00:36:24,870 --> 00:36:27,090
Por, natyrisht, në qoftë se keni qenë bërë këtë për një projekt përfundimtar,

571
00:36:27,090 --> 00:36:30,120
ju do të bëjë atë të duket më mirë.

572
00:36:30,120 --> 00:36:32,530
Por kjo është vetëm një shembull i thjeshtë se si ju bëni kërkesën merrni.

573
00:36:32,530 --> 00:36:34,580
Dhe nëse ne shikojmë në kodin aktual, unë jam guessing, unë jam goxha i sigurt

574
00:36:34,580 --> 00:36:39,690
kjo është ende shumë e shumë të njëjtën gjë.

575
00:36:39,690 --> 00:37:04,990
Oh, kam harruar për të kthyer atë në një varg, që është ajo.

576
00:37:04,990 --> 00:37:07,920
Jo, ajo nuk është ende duke punuar. Pavarësisht, këtu është kodi aktual përfunduar

577
00:37:07,920 --> 00:37:10,300
për atë që kjo duhet të duken si,

578
00:37:10,300 --> 00:37:16,400
dhe kjo e bën të njëjtën gjë si ajo që kam zbatuar vetëm.

579
00:37:16,400 --> 00:37:22,760
Kur ju klikoni në butonin, ajo përdor GET JSON automatikisht të bëj analizë gramatikore të dhënave.

580
00:37:22,760 --> 00:37:29,190
Ajo merr të dhënat përsëri nga ajo dhe sythe nëpër rrjet të tërë

581
00:37:29,190 --> 00:37:32,770
dhe printime jashtë - çdo gjë për drekë sot, emrin e tij,

582
00:37:32,770 --> 00:37:38,020
dhe QUESTION një pushim linjë pas çdo linjë.

583
00:37:38,020 --> 00:37:41,100
Kjo është se si ju përdorni funksionin merrni.

584
00:37:41,100 --> 00:37:44,040
>> Ju gjithashtu mund të përdorni Post, të cilën unë nuk kam kohë

585
00:37:44,040 --> 00:37:47,940
për të shkruar deri një shembull për këtë, por ne mund të shohim në dokumentacion.

586
00:37:47,940 --> 00:37:53,220
Nëse ju shikoni në jquery.post,

587
00:37:53,220 --> 00:37:55,510
ju mund të shihni se ajo është pothuajse e njëjta gjë.

588
00:37:55,510 --> 00:38:01,650
Ju keni një URL, por në vend të kalimit parametrat e përdorur -

589
00:38:01,650 --> 00:38:03,990
vetëm vënien e tyre në vargun për URL vetë,

590
00:38:03,990 --> 00:38:06,300
ju duhet të kalojë në këtë variabël të dhënave

591
00:38:06,300 --> 00:38:11,990
që është në thelb një grup, një fjalor që harta parametrave për vlerat.

592
00:38:11,990 --> 00:38:17,690
Ju ndodhë që në të, dhe që i dërgon ato në përdorimin e një post.

593
00:38:17,690 --> 00:38:20,790
Dhe një herë ju keni atë, atëherë ju mund të ketë një funksion sukses

594
00:38:20,790 --> 00:38:23,930
që ekzekuton kur të dhënave vjen mbrapa.

595
00:38:23,930 --> 00:38:26,430
Përndryshe, ajo është saktësisht e njëjtë. Pra, duke përdorur POST,

596
00:38:26,430 --> 00:38:29,970
ju mund të dëshironi të përdorni Post, për shembull, nëse ju keni një formë input

597
00:38:29,970 --> 00:38:35,780
ju le të njerëzit fjalëkalimet e dhëna në të, dhe dërgoni ato fjalëkalimet off

598
00:38:35,780 --> 00:38:41,850
për të prapa-fund shkrimin tuaj, për të kontrolluar në bazën e të dhënave që përdoruesi nëse është e vlefshme apo jo.

599
00:38:41,850 --> 00:38:46,700
Ju mund të bëni që të gjithë duke përdorur jQuery vend që të rifreskoni faqen në të gjitha.

600
00:38:46,700 --> 00:38:52,160
Kjo është se si unë zbatuar në blog që unë ju tregoi se më herët.

601
00:38:52,160 --> 00:38:59,530
Nëse shkojmë në portalin fund dhe log out, log out,

602
00:38:59,530 --> 00:39:02,600
Identifikohu out nuk funksionon.

603
00:39:02,600 --> 00:39:13,360
E pra, më lejoni vetëm të hapur atë deri në një dritare të re.

604
00:39:13,360 --> 00:39:16,580
Këtu nuk është një fjalëkalim, dhe unë do të shkruani diçka të rastit.

605
00:39:16,580 --> 00:39:18,590
Ajo nuk punon, por ju mund të shihni se ne nuk

606
00:39:18,590 --> 00:39:20,840
në fakt duhet të rifreskoni faqen në të gjitha.

607
00:39:20,840 --> 00:39:24,610
Kodi, në qoftë se ju dëshironi të shikoni në atë,

608
00:39:24,610 --> 00:39:37,460
është e gjitha në dispozicion këtu.

609
00:39:37,460 --> 00:39:45,680
Pra kodin kam shkruar vitin e kaluar diku.

610
00:39:45,680 --> 00:39:47,790
Siç mund ta shihni këtu, ne jemi duke dërguar një kërkesë POST.

611
00:39:47,790 --> 00:39:50,400
Unë kam një skedar të quajtur login.php në fund e pasme,

612
00:39:50,400 --> 00:39:53,860
i cili kontrollon nëse fjalëkalimi është i vlefshëm.

613
00:39:53,860 --> 00:39:56,000
Parametrat e kalojmë në të janë password, mapped

614
00:39:56,000 --> 00:40:00,030
input që është në këtë kutinë e input aktualisht.

615
00:40:00,030 --> 00:40:04,110
Dhe kur të dhënat vjen mbrapa, ne kontrolloni.

616
00:40:04,110 --> 00:40:07,680
Nëse të dhënave është e rreme, atëherë ne themi Fjalëkalim i pasaktë, rrëshqitje atë poshtë,

617
00:40:07,680 --> 00:40:09,580
dhe vetëm të bëjë atë të zhduket pas kësaj.

618
00:40:09,580 --> 00:40:12,320
Përndryshe, ne të ngarkesës faqen admin.

619
00:40:12,320 --> 00:40:15,080
Dhe kjo është bërë duke përdorur të gjitha JSON.

620
00:40:15,080 --> 00:40:18,510
Në këtë shumë linja të kodit, ju mund vetëm të kalojë të dhënat në fund e pasme,

621
00:40:18,510 --> 00:40:21,020
kontrolloni nëse ajo është e saktë, kontrolloni nëse keni ruajtur në të saktë,

622
00:40:21,020 --> 00:40:24,200
dhe në fakt të përgjigjet për atë, Përcjellin personin në faqen e duhur

623
00:40:24,200 --> 00:40:29,760
ose nuk i lënë ata të hyni në dhe duke u thënë atyre se ata kishin një fjalëkalim të gabuar.

624
00:40:29,760 --> 00:40:33,040
Pra, kjo është një shembull se si ju mund të përdorni POST jQuery

625
00:40:33,040 --> 00:40:37,010
të dërgojë një kërkesë të postoni në fund tuaj mbrapa,

626
00:40:37,010 --> 00:40:42,400
kontrolluar nëse dikush është i loguar saktë.

627
00:40:42,400 --> 00:40:44,820
>> Të gjithë të drejtë, kështu që kjo është e gjitha shembujt e kam pasur, dhe të gjitha stuff kam kërkuar për të mbuluar.

628
00:40:44,820 --> 00:40:47,110
Ata janë gjërat kryesore që jQuery ju lejon të bëni:

629
00:40:47,110 --> 00:40:52,640
zgjidhni elemente, modifikojë ato duke përdorur manipulimin DOM,

630
00:40:52,640 --> 00:40:56,340
ju mund të shtoni efekte, aktivizoni gjëra mbi ngjarjet e caktuara,

631
00:40:56,340 --> 00:41:00,430
dhe gjithashtu të bëni kërkesat AJAX shumë të seamlessly dhe me lehtësi.

632
00:41:00,430 --> 00:41:02,840
Pra, ju falënderoj për ardhjen apo shikuar,

633
00:41:02,840 --> 00:41:06,230
dhe në qoftë se ju keni ndonjë pyetje, just let me know. Po?

634
00:41:06,230 --> 00:41:12,730
[Student] Kthehu kur ju tregoi, keni pasur JSON pas kërkesës post në thonjëza,

635
00:41:12,730 --> 00:41:15,170
dhe unë isha vetëm pyesin se çfarë bëri.

636
00:41:15,170 --> 00:41:20,070
>> Yeah, unë shoh. Pyetja ishte se, në shembullin Unë vetëm tregoi,

637
00:41:20,070 --> 00:41:25,790
atje ishte JSON fjala në thonjëza rreth -

638
00:41:25,790 --> 00:41:31,690
Unë vetëm do të tërheqë atë përsëri - rreth funksionit post.

639
00:41:31,690 --> 00:41:43,320
Unë jam vetëm duke tërhequr atë deri për të treguar.

640
00:41:43,320 --> 00:41:46,890
Kështu që këtu është kjo kërkesë POST, dhe ka këtë JSON në thonjëza.

641
00:41:46,890 --> 00:41:50,280
Kjo thjesht përcakton se çfarë ne jemi duke pritur që prodhimi të jetë.

642
00:41:50,280 --> 00:41:54,070
Pra, nëse ne të kalojë në JSON si tipi pritshme të dhënave,

643
00:41:54,070 --> 00:41:56,070
kjo nuk është një kërkesë, por në qoftë se ne të kalojë në atë,

644
00:41:56,070 --> 00:41:58,590
atëherë të dhënat automatikisht do të parsed si JSON.

645
00:41:58,590 --> 00:42:00,600
Pra, ne nuk kemi për të thirrur funksionin Parse JSON në të,

646
00:42:00,600 --> 00:42:02,620
ajo vetëm do të ndodhë automatikisht.

647
00:42:02,620 --> 00:42:05,150
Dhe nëse ju merrni një vështrim në dokumentacionin për postin,

648
00:42:05,150 --> 00:42:09,850
nuk është ky variabël të dhënave lloj, lloji i të dhënave që priten nga serveri.

649
00:42:09,850 --> 00:42:12,660
Ajo defaults në një guess inteligjente që mund të jetë i gabuar,

650
00:42:12,660 --> 00:42:15,520
kështu që ju mund të lënë atë bosh, por kjo është vetëm lloji i të dhënave

651
00:42:15,520 --> 00:42:21,680
në kodim që ju jeni duke përdorur, nëse kjo është JSON ose XML apo diçka tjetër.

652
00:42:21,680 --> 00:42:25,280
>> Çdo pyetje të tjera?

653
00:42:25,280 --> 00:42:27,300
Dakord. Nëse keni ndonjë pyetje të tjera, të ndjehen të lirë të email mua

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

655
00:42:30,830 --> 00:42:34,860
dhe slides dhe kodi duhet të jetë në dispozicion online goxha shpejt.

656
00:42:34,860 --> 00:42:42,810
Good luck me projektet tuaja finale, shpresoj se ju përdorni jQuery.

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