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

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

3
00:00:04,790 --> 00:00:08,000
[Ĉi tiu estas CS50.] [CS50.TV]

4
00:00:08,000 --> 00:00:10,640
Se vi sekvas kune hejme, vi povas efektive aliri al mia diapozitivoj linio

5
00:00:10,640 --> 00:00:13,310
irante al tiu ligo.

6
00:00:13,310 --> 00:00:18,650
Estas TjjRWj, sur bit.ly.

7
00:00:18,650 --> 00:00:20,700
Vi povas ankaŭ simple iru al la adreso rekte,

8
00:00:20,700 --> 00:00:27,300
kio estas cloud.cs50.net / ~ vshekhawat, kiu estas mia nomo,

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

10
00:00:32,409 --> 00:00:34,920
Mi ege rekomendas al vi sekvi kune se vi rigardas en la domo,

11
00:00:34,920 --> 00:00:40,650
kaj se vi estas ĉi tie, ankaŭ, ĉar ĉi tiu estas sufiĉe interaga prezento.

12
00:00:40,650 --> 00:00:43,160
>> Do hodiaŭ mi tuj parolos pri jQuery, kaj la unua demando estas,

13
00:00:43,160 --> 00:00:45,300
kio estas jQuery?

14
00:00:45,300 --> 00:00:47,090
Ĉi tiu jaro, mi scias ke infanoj ne estas kovrita de JavaScript

15
00:00:47,090 --> 00:00:51,080
dum detale kiel ni havas en la pasintaj jaroj.

16
00:00:51,080 --> 00:00:53,150
Javascript estas, antaŭ ĉio, nur flanko de la kliento lingvo

17
00:00:53,150 --> 00:00:58,390
ke vi uzas por kuri skriptoj kaj kodo sur ĉiu uzanto maŝino.

18
00:00:58,390 --> 00:01:00,660
Do vi havas servilon kiu havigas retpaĝojn al popolo,

19
00:01:00,660 --> 00:01:02,600
sed vi volus fari aĵoj en lia maŝino,

20
00:01:02,600 --> 00:01:08,060
demandos siajn maŝino sendi petojn al via servilo ĉiuj 30 sekundoj aŭ io kiel tio.

21
00:01:08,060 --> 00:01:10,420
Vi povas fari tion uzante JavaScript.

22
00:01:10,420 --> 00:01:13,190
JQuery nur havigas pli funkciojn sur supro de JavaScript

23
00:01:13,190 --> 00:01:15,680
kiu faras ekstran aĵojn por vi.

24
00:01:15,680 --> 00:01:17,710
Se vi rigardas la enhavojn sur supro,

25
00:01:17,710 --> 00:01:21,410
kiu priskribas kelkajn aĵojn ke vi estas kapablaj fari.

26
00:01:21,410 --> 00:01:23,500
Do entute, estis kreita en januaro 2006.

27
00:01:23,500 --> 00:01:26,560
Ĝi estis unue konceptita de en aŭgusto 2005.

28
00:01:26,560 --> 00:01:31,370
Jam pasis ĉirkaŭ dum kelkaj jaroj, kaj estas vere parto de la nova retejo 2.0 movado

29
00:01:31,370 --> 00:01:34,330
kiu estas farita la interreto tiel brila.

30
00:01:34,330 --> 00:01:37,630
Ĝi estas la plej vaste uzata JavaScript biblioteko.

31
00:01:37,630 --> 00:01:41,450
Super 19,6 milionoj retejoj uzas ĝin, kaj la uzado estas ankoraŭ kreskanta

32
00:01:41,450 --> 00:01:45,640
laŭ builtwith.com, kiu, ŝajne, dum la lasta jaro,

33
00:01:45,640 --> 00:01:49,710
Ĵus estis senĉese kreskanta sufiĉe lineare.

34
00:01:49,710 --> 00:01:52,870
Inter la 10 milionoj da lokoj, ekzistas ankoraŭ -

35
00:01:52,870 --> 00:01:55,180
ĉirkaŭ 40% de ili nun uzas ĝin.

36
00:01:55,180 --> 00:01:58,540
Facebook uzas ĝin, multaj aliaj retejoj nuntempe uzas ĝin.

37
00:01:58,540 --> 00:02:01,540
Vi povas rigardi tiujn statistikojn pri viaj propraj, se vi ŝatus.

38
00:02:01,540 --> 00:02:05,820
Kaj vi povus diri ke estas legit ĉar ĝi havas fundamenton kaj 13 estraranoj,

39
00:02:05,820 --> 00:02:11,910
kune kun teamo de 20 homoj kiuj okupiĝas pri ĝi sur regula bazo.

40
00:02:11,910 --> 00:02:16,110
Do ĝi estas tre vaste uzata, ĝi havas. Org URL, estas kaprico,

41
00:02:16,110 --> 00:02:21,660
ĝi havas spinon-offs por aliaj aferoj, tiel ke estas granda interkonsento.

42
00:02:21,660 --> 00:02:24,510
>> Kial vi uzas ĝin? JQuery estas tre malpeza.

43
00:02:24,510 --> 00:02:27,270
Tio signifas, ne estas grandega dosiero. Vi povas elŝuti

44
00:02:27,270 --> 00:02:31,540
la minified dosieron, kiu estas sen ĉiuj blankaj spaco kaj komentoj, kaj ĝi estas nur 32 kB.

45
00:02:31,540 --> 00:02:33,600
Do estas facile simple ĵeti sur via retpaĝo

46
00:02:33,600 --> 00:02:35,910
kaj ĝuste ekuzi ĝin.

47
00:02:35,910 --> 00:02:39,630
Estas ankaŭ tre kompetente skribita, do ĝi ne prenas multan -

48
00:02:39,630 --> 00:02:42,550
ĝi ne prokrastas retpagxon da kiam vi uzas ĝin.

49
00:02:42,550 --> 00:02:45,770
Ĝi permesas apliki tion, kio estis antaŭe neeblaj.

50
00:02:45,770 --> 00:02:47,790
Estas iuj aspektoj de funkciojn,

51
00:02:47,790 --> 00:02:51,780
kiel krei kuraĝigoj, kiuj kutime estus tre, tre malfacile fari.

52
00:02:51,780 --> 00:02:54,300
Sed en jQuery ili estas fakte tre simpla.

53
00:02:54,300 --> 00:02:57,040
Kaj tie estas iuj aferoj kiuj estas ĝena fari,

54
00:02:57,040 --> 00:02:59,610
eblaj en JavaScript, kiel sendi POST peto,

55
00:02:59,610 --> 00:03:02,190
sed sendi peton al la servilo, vi devas skribi

56
00:03:02,190 --> 00:03:04,320
kvin aŭ ses aŭ sep linioj de kodo.

57
00:03:04,320 --> 00:03:07,200
Nun vi povas simple fari ĝin en unu linio de kodo, en sola funkcio nomita.

58
00:03:07,200 --> 00:03:11,790
Tio vere simpligas multajn el la aĵoj kiujn vi faras.

59
00:03:11,790 --> 00:03:15,950
Kaj la tuta malvarmeta infanoj uzas ĝin. Por tiu, mi volas diri al mi.

60
00:03:15,950 --> 00:03:19,270
En mia lasta projekto pasinta jaro, kiu estas news.whrb.org,

61
00:03:19,270 --> 00:03:22,530
kiu estas por la radiostacio, mi kreis ĉi blogo

62
00:03:22,530 --> 00:03:29,750
kiuj gastigas ĉiujn montras, ke ni faris kaj la MP3 dosieroj por ili.

63
00:03:29,750 --> 00:03:32,070
Vi povas foliumi tra la pasinteco montras,

64
00:03:32,070 --> 00:03:34,130
kaj ĝin ĉiuj farita uzante jQuery. Vi povas diri

65
00:03:34,130 --> 00:03:37,340
pro ĉiuj tiuj kuraĝigoj, esence.

66
00:03:37,340 --> 00:03:42,360
Do se vi havas - se vi kreas novan postenon,

67
00:03:42,360 --> 00:03:45,980
vi vidas cxi tiuj malgranduloj slideDowns; kiuj estas ĉiuj farita uzante jQuery.

68
00:03:45,980 --> 00:03:49,140
Kaj ĉi blankigi - tiel ke ia aĵo estas ĉiuj farita uzante jQuery,

69
00:03:49,140 --> 00:03:52,720
kaj vi ne devas senĉese reŝarĝi la paĝon por navigi la loko.

70
00:03:52,720 --> 00:03:57,220
Alia malvarmeta afero, kiu estas farita uzante jQuery estas ĉi prezento.

71
00:03:57,220 --> 00:03:59,700
Mi uzas ĉi malferma fonto afero nomata scrolldeck,

72
00:03:59,700 --> 00:04:03,250
kiun iu skribis sur supro de jQuery.

73
00:04:03,250 --> 00:04:04,870
Se vi vere rigardi la fonto, oni povas vidi ke

74
00:04:04,870 --> 00:04:07,830
ili estas uzanta ĉi dolaro signon; dolaro signoj

75
00:04:07,830 --> 00:04:12,110
estas uzitaj en jQuery por signifi ke funkcio estas jQuery funkcio.

76
00:04:12,110 --> 00:04:15,020
Do ili estas difinanta wrapper sur supro de jQuery

77
00:04:15,020 --> 00:04:18,570
kiu permesas vin fari prezenton kiel ĉi tio,

78
00:04:18,570 --> 00:04:21,200
kaj vi povas vidi, ke tie ili estas inter la originala jQuery dosiero,

79
00:04:21,200 --> 00:04:24,120
kiu estas kion vi devos inkluzivi se volas uzi jQuery

80
00:04:24,120 --> 00:04:30,450
en via propra retejo.

81
00:04:30,450 --> 00:04:32,790
>> Tuŝante ke, kiel vi instali ĝin?

82
00:04:32,790 --> 00:04:36,150
Vi povas simple iru al jQuery.com kaj elŝuti la dosieron,

83
00:04:36,150 --> 00:04:38,320
aldoni ĝin al ttt katalogo kaj inkluzivas ĝin.

84
00:04:38,320 --> 00:04:42,200
Do ĝuste sur supro, en la kapo etikedo de viaj HTML-dosieron

85
00:04:42,200 --> 00:04:45,400
de via ĉefa HTML-dosiero, nur havas tiun linion de kodo

86
00:04:45,400 --> 00:04:49,490
kun la korekta versio por kiu versio de jQuery vi uzas.

87
00:04:49,490 --> 00:04:51,340
Vi povas elŝuti ĝin tuj jQuery.com,

88
00:04:51,340 --> 00:04:55,130
klaku "download jQuery," kaj vi havas ĝin. Estas tio.

89
00:04:55,130 --> 00:04:58,880
Kaj efektive, ni povas rigardi kion gxi aspektas.

90
00:04:58,880 --> 00:05:01,080
Se vi alklakas elŝuti ĉi tie, jQuery estas tiu.

91
00:05:01,080 --> 00:05:05,260
Estas nur unu granda JavaScript dosiero kiu faras la tutan magion ajxojn vi.

92
00:05:05,260 --> 00:05:09,270
Ĉi tiu estas la minified versio, kiu ne estas legebla ĉe ĉiuj.

93
00:05:09,270 --> 00:05:13,180
Vi povas ankaŭ rigardi la programadon version, kiu estas legebla

94
00:05:13,180 --> 00:05:15,370
sed ankoraŭ tre, tre longa.

95
00:05:15,370 --> 00:05:17,980
Estas multe da taskoj en tie.

96
00:05:17,980 --> 00:05:20,240
Vi ankaŭ povas ligi al Google gastigis version de ĝi.

97
00:05:20,240 --> 00:05:23,820
Por ke tuj permesos ke vi simple fidi Google por havigi ĝin.

98
00:05:23,820 --> 00:05:29,310
Ili provizas ĉiun version de ĝi, havebla en ĉiu momento.

99
00:05:29,310 --> 00:05:31,530
Do vi probable povas fidi Google por gastigi ĝin por vi.

100
00:05:31,530 --> 00:05:33,270
Aŭ vi povas ligi al jQuery propra lasta versio.

101
00:05:33,270 --> 00:05:36,400
Ili havas URL ke ĉiam ĝisdatigis al la lasta versio.

102
00:05:36,400 --> 00:05:40,850
Estas jQuery-lasta, kaj ne estas unu problemo kun tio,

103
00:05:40,850 --> 00:05:44,350
kio estas ke se la ĝisdatigita jQuery kaj kelkaj el la antaŭaj funkciojn

104
00:05:44,350 --> 00:05:47,250
ili iĝas retrograded aŭ evitinda,

105
00:05:47,250 --> 00:05:49,620
mi ne - ĝi eble komencos ne get apogis plu.

106
00:05:49,620 --> 00:05:52,940
Do, se vi skribas retejo uzante versio 1.8.2,

107
00:05:52,940 --> 00:05:55,000
por kiam versio 2.7 eliras

108
00:05:55,000 --> 00:05:57,000
iuj el la funkcioj vi skribis ne funkcias plu.

109
00:05:57,000 --> 00:05:59,930
Do estas pli bone simple elŝuti la 32 kB dosiero,

110
00:05:59,930 --> 00:06:04,100
metis ĝin sur via retpaĝo, kaj ĝi devos labori ĉiam.

111
00:06:04,100 --> 00:06:07,450
>> Mi tuj iros antaŭen kaj komencis paroli pri la reala funkciaro de jQuery.

112
00:06:07,450 --> 00:06:13,090
La unua afero estas selectores. Jen kion jQuery komence estis koncipita por provizi.

113
00:06:13,090 --> 00:06:15,500
Kaj vi povas klaki sur dokumentado por rigardi

114
00:06:15,500 --> 00:06:18,690
la detalan dokumentaron por la selectores Mi tuj iros kovrante.

115
00:06:18,690 --> 00:06:24,120
La ideo malantaŭ selectores estas ke vi povas elekti HTML elementoj en paĝo.

116
00:06:24,120 --> 00:06:28,790
Elementoj sur paĝo havas IDs kaj klasoj kaj aliaj identigi aspektojn al ili.

117
00:06:28,790 --> 00:06:30,500
Ekzistas ankaŭ - they're en malsamaj ordoj.

118
00:06:30,500 --> 00:06:32,570
Kelkaj el la tempo ili estas anidaba ene de ĉiu alia.

119
00:06:32,570 --> 00:06:38,120
JQuery permesas konstrui simplajn demandojn ke elsxuti elementoj de la paĝo.

120
00:06:38,120 --> 00:06:41,890
Tiam vi povas manipuli tiujn elementojn uzante jQuery funkcioj,

121
00:06:41,890 --> 00:06:43,990
kiu estas la manipulado sekcio ni ricevos por poste.

122
00:06:43,990 --> 00:06:46,040
Vi povas ŝanĝi la HTML, ŝanĝi la CSS,

123
00:06:46,040 --> 00:06:50,500
vi ankaŭ povas animi kaj aldoni funkciojn kiuj aktivigas en certaj eventoj.

124
00:06:50,500 --> 00:06:52,710
Do, ekzemple, se io klakis, vi volas ion okazi,

125
00:06:52,710 --> 00:06:55,210
vi povas fari tion uzante jQuery tiel.

126
00:06:55,210 --> 00:06:57,380
Kaj ekzistas grandega nombro da manieroj por elekti elementoj.

127
00:06:57,380 --> 00:07:00,310
La plimulto de ili mi neniam uzis, sed estas la bazaj,

128
00:07:00,310 --> 00:07:02,340
kiu estas sufiĉe grava.

129
00:07:02,340 --> 00:07:05,750
La elemento selector, ekzemple, se vi simple selekti ion

130
00:07:05,750 --> 00:07:10,640
kiu estas div - Mi vere havas la kodo malfermita por tiu diapozitivo prezento.

131
00:07:10,640 --> 00:07:13,450
Do, ekzemple, jen la unua glito.

132
00:07:13,450 --> 00:07:17,430
Ĉi tie ni havas div. Se ni vere elekti la tutan divs en la paĝo,

133
00:07:17,430 --> 00:07:22,300
ĝi devos simple doni al ni tabelo de ĉiuj divs kiuj ekzistas en tiu dosiero.

134
00:07:22,300 --> 00:07:27,040
La ID selector permesas elekti ion kun donita ID.

135
00:07:27,040 --> 00:07:32,230
Do, se ĉi tio, ekzemple, tiu afero havas la ID "kio",

136
00:07:32,230 --> 00:07:37,160
kaj se ni tion faris per # kio anstataŭ iuj IRU,

137
00:07:37,160 --> 00:07:42,920
estus simple reveni tabelo kiu havas solan elementon kaj tio estas tiu elemento de la paĝo.

138
00:07:42,920 --> 00:07:45,490
Ni povas ankaŭ kombini selectores tiamaniere por havi

139
00:07:45,490 --> 00:07:48,260
nur elektu tion kun IDs kiuj estas divs.

140
00:07:48,260 --> 00:07:51,810
Do jes. Nur elektu divs kiuj havas tiun ID.

141
00:07:51,810 --> 00:07:55,260
Por klaso vi simple uzi punkto, estas la sama afero kiel la CSS.

142
00:07:55,260 --> 00:07:57,500
Posteulo ankaŭ laboras, do se vi havas iu klaso

143
00:07:57,500 --> 00:08:00,170
kaj tio anidaba elementojn ene de ĝi - tial, ekzemple,

144
00:08:00,170 --> 00:08:03,260
ekzistas iu klaso kaj ĝi havas ankron etikedo por ligi al alia paĝo,

145
00:08:03,260 --> 00:08:08,510
vi povas uzi tiun sintakson por retrovi la ligilon.

146
00:08:08,510 --> 00:08:12,420
Vi povas ankaŭ elekti plurajn aferojn samtempe, simple apartigi ilin per komoj,

147
00:08:12,420 --> 00:08:17,360
uzi ajnan selector vi ŝatus, kaj vi elektos ĉiuj ili samtempe, en sola tabelo.

148
00:08:17,360 --> 00:08:19,650
Kaj tiam ekzistas ankaŭ la ne selector, do vi povas elekti ĉiuj divs

149
00:08:19,650 --> 00:08:24,210
kiuj ne havas iujn specifajn klaso.

150
00:08:24,210 --> 00:08:28,790
Kaj tio estas nur utila maniero por enkonduko al kiel tiu selektado funkcias.

151
00:08:28,790 --> 00:08:32,270
Mi montros al iuj konkretaj ekzemploj en dua.

152
00:08:32,270 --> 00:08:35,480
>> Altnivela selectores estas - tiuj estas nur kelkaj ekzemploj.

153
00:08:35,480 --> 00:08:38,840
Estas dekoj da tiuj, sed se vi volas selekti ĉiujn bildo etikedoj

154
00:08:38,840 --> 00:08:42,799
ene de iu elemento, tiam vi simple fari: bildo.

155
00:08:42,799 --> 00:08:45,340
Se vi volas elekti la vespero elementoj, ekzemple, se estas 20 el ili,

156
00:08:45,340 --> 00:08:48,290
vi volas elekti 0, 2, 4, 6 kaj tiel plu,

157
00:08:48,290 --> 00:08:51,630
vi fari: vespere, cxu vi povas ankaŭ fari: nepara.

158
00:08:51,630 --> 00:08:55,470
Ĉi tiuj estas pseŭdo selectores, kio signifas ke ili efektive komputi

159
00:08:55,470 --> 00:09:00,960
ĉiu alia ero anstataŭ nur iri kaj selektante ĉiuj ili.

160
00:09:00,960 --> 00:09:05,510
Vi povas ankaŭ - ĉiu elemento povas havi ankaŭ specifaj atributoj.

161
00:09:05,510 --> 00:09:10,580
Do, ekzemple, la klaso = centro estas ankaŭ atributo.

162
00:09:10,580 --> 00:09:16,500
Por ĉi ankron etikedo, href, hiperteksta referenco, estas atributo ankaŭ.

163
00:09:16,500 --> 00:09:21,150
Do vi povas elekti iun kiu ligas al specifa paĝo aŭ simple - estas vere ĝenerale.

164
00:09:21,150 --> 00:09:25,410
Vi povas elekti ion kun iu atributo kiu vi ŝatus.

165
00:09:25,410 --> 00:09:27,470
Kaj poste, ankaŭ, atributo enhavas.

166
00:09:27,470 --> 00:09:30,420
Se vi, ekzemple, volis elekti ĉiujn enigo elementoj

167
00:09:30,420 --> 00:09:32,700
kiuj havas la vorton "pass" kiel la nomo de ili,

168
00:09:32,700 --> 00:09:37,560
se iu paĝo havas eniga teksto bloko

169
00:09:37,560 --> 00:09:41,050
kiuj nomiĝas "pasvorto," tio estus unu vojo vi povis elekti tion.

170
00:09:41,050 --> 00:09:43,020
Kaj estas multaj pli. Vi povas iri antaŭen kaj rigardu la dokumentado

171
00:09:43,020 --> 00:09:46,950
kaj vidi specifajn ekzemplojn de kiel ĝi funkcias.

172
00:09:46,950 --> 00:09:48,840
>> La sekva afero estas DOM manipulado.

173
00:09:48,840 --> 00:09:52,500
Post kiam ni elektu elementoj, ni volas vere fari aferojn kun ili.

174
00:09:52,500 --> 00:09:55,500
Ĝis nun ni ne rigardis, ke ĉe ĉiu, sed se vi rigardas la dokumentado,

175
00:09:55,500 --> 00:09:57,950
ne estas vere multe, ke ni povus fari.

176
00:09:57,950 --> 00:10:02,900
Je tiu punkto, ni tuj elektu elementoj sur ĉi tiu prezento

177
00:10:02,900 --> 00:10:04,890
kaj manipuli ilin uzante jQuery.

178
00:10:04,890 --> 00:10:08,290
Ĉar ĉi tiu estas implementado uzante jQuery, ni havas aliron al la jQuery biblioteko,

179
00:10:08,290 --> 00:10:13,580
kaj ni povas uzi tiujn funkciojn ene de tiu kodo.

180
00:10:13,580 --> 00:10:16,200
Unu utila afero, kiun vi eble ne scias pri estas la konzolo.

181
00:10:16,200 --> 00:10:19,340
Kaj Google Chrome estas kion mi uzas. Vi povas premi alt komando J

182
00:10:19,340 --> 00:10:21,720
aŭ alt kontrolo J malfermi la konzolo.

183
00:10:21,720 --> 00:10:26,130
En Firefox mi kredas ke estas komando movo K aŭ kontrolo movo K.

184
00:10:26,130 --> 00:10:28,880
En Safari vi devas iri ŝanĝi iujn agordojn.

185
00:10:28,880 --> 00:10:35,460
Estas ligilo se vi ŝatus fari ĝin, sed mi rekomendas atingi Chrome aŭ Firefox.

186
00:10:35,460 --> 00:10:37,750
Do ni malfermi la konzolo, estas ĉi tie.

187
00:10:37,750 --> 00:10:41,170
Ĝi permesas vin esence nur faru kion ajn vi volas.

188
00:10:41,170 --> 00:10:45,100
Do vi povas simple tajpi en krei variablon nomata x,

189
00:10:45,100 --> 00:10:49,200
x = 5, vidu kio x + 2 estas.

190
00:10:49,200 --> 00:10:57,670
Vi povas eĉ fari ion kiel CS + Vidu, x + 45, kiu estos CS50.

191
00:10:57,670 --> 00:11:00,530
Vi povas simple fari iujn tipajn JavaScript aĵoj.

192
00:11:00,530 --> 00:11:02,730
Sed vi ankaŭ povas fari jQuery en ĉi tie.

193
00:11:02,730 --> 00:11:06,200
>> Do ni rigardu tiun unuan aspekton tie.

194
00:11:06,200 --> 00:11:09,500
Ni tuj kreos variablo nomata HTML, kiu estas ĉeno.

195
00:11:09,500 --> 00:11:15,890
Ĝi havas paragrafo etikedo en ĝi, ke nomas iun novan tekston.

196
00:11:15,890 --> 00:11:19,420
Do ni havas ĉi HTML, estas iu nova teksto, en paragrafo etikedoj.

197
00:11:19,420 --> 00:11:21,800
Nun ni efektive volas aldoni ĝin al la paĝo.

198
00:11:21,800 --> 00:11:28,310
Mi starigis gxin tiel, ke la HTML de ĉi tiu paragrafo, ĉi tiu titolo tie, estas append ID.

199
00:11:28,310 --> 00:11:32,320
Se ni elektas append ID kaj poste aldonas al ĝi

200
00:11:32,320 --> 00:11:34,560
la HTML-variablo Mi ĵus kreis,

201
00:11:34,560 --> 00:11:40,370
ĝi aldonos ke HTML fine, ĝuste post tiu alineo etikedo.

202
00:11:40,370 --> 00:11:43,730
Do, se ni faras tion - ni elektis tiun alineon,

203
00:11:43,730 --> 00:11:47,590
kaj ni nomas la append funkcio kun la HTML variablo Mi ĵus aldonis,

204
00:11:47,590 --> 00:11:50,960
ĝi aldonos tiun novan tekston Dekstre sur la paĝo.

205
00:11:50,960 --> 00:11:54,970
Ni povas ankaŭ prepend, kio signifas, ĝi iros antaŭe, en la komenco de tiu elemento.

206
00:11:54,970 --> 00:11:58,290
Do estas iom nova teksto je la komenco kaj poste.

207
00:11:58,290 --> 00:12:01,660
Mi povas antaŭeniri kaj refreŝigi forigi ĉi tiujn aferojn mi ĵus faris.

208
00:12:01,660 --> 00:12:05,280
Sed tio estas ekzemplo de kiel vi povas uzi la prepend kaj postglui metodoj

209
00:12:05,280 --> 00:12:08,910
manipuli aĵojn sur la paĝo, aldonu iom da HTML.

210
00:12:08,910 --> 00:12:11,080
>> Vi povas ankaŭ ŝanĝi klasoj.

211
00:12:11,080 --> 00:12:14,970
Reveno en ĉi tiu stilo dosiero, mi kreis tiun por la venko klaso

212
00:12:14,970 --> 00:12:19,990
kiu havas tekston ruĝa koloro, kelkaj fona koloro, kaj teksto ombro.

213
00:12:19,990 --> 00:12:23,810
Ĝi aspektas malbelega, sed mi povas fakte -

214
00:12:23,810 --> 00:12:26,410
tiu alineo korespondas al klaso ID.

215
00:12:26,410 --> 00:12:29,860
Do mi povos aldoni la klaso por la venko.

216
00:12:29,860 --> 00:12:31,870
Mi povas ekzekuti ĉi en la konzolo,

217
00:12:31,870 --> 00:12:35,480
kaj tio aldonos tiu klaso, kaj nun aspektas malbelega, kiel atendita.

218
00:12:35,480 --> 00:12:39,680
La CSS aŭtomate ricevas aplikita al la klasoj kiuj vi -

219
00:12:39,680 --> 00:12:42,680
se ekzistas CSS por klaso, ĝi aŭtomate ricevas aplikita

220
00:12:42,680 --> 00:12:44,680
se vi ŝanĝus la klaso de elemento.

221
00:12:44,680 --> 00:12:49,230
Tiam ni povas simple forigi ĝin uzante eltiras klaso.

222
00:12:49,230 --> 00:12:53,690
Do se vi havas iujn antaŭdifinita klasoj kiel ruĝa aŭ ruĝa,

223
00:12:53,690 --> 00:12:55,990
kaj tiam vi volas apliki tiujn al elementoj,

224
00:12:55,990 --> 00:12:58,230
Vi ne devas fari la tutan CSS stiligante ĉiufoje.

225
00:12:58,230 --> 00:13:01,510
Vi povas simple aldoni la klaso al elemento, kaj tiam ĝi aŭtomate igas -

226
00:13:01,510 --> 00:13:05,580
ĝi estos aŭtomate rigardi taŭga por tiu klaso.

227
00:13:05,580 --> 00:13:07,900
Ni povas ankaŭ forigi tion, do mi tuj elektu ĉiuj divs

228
00:13:07,900 --> 00:13:10,830
en la paĝo kaj forigi ilin.

229
00:13:10,830 --> 00:13:13,990
Kio estas tiu tuj aspektas?

230
00:13:13,990 --> 00:13:16,170
Ĝi tuj aspekti kiel nenio, do fakte nenion maldekstren.

231
00:13:16,170 --> 00:13:18,170
Mia prezento estas for.

232
00:13:18,170 --> 00:13:21,290
Mi povas refreŝigi kaj alportu ĝin, feliĉe,

233
00:13:21,290 --> 00:13:24,420
ĉar ĝi estas nur kurante fojo,

234
00:13:24,420 --> 00:13:29,460
sed tio estas ekzemplo de migrado, se vi volas tute detrui ero ekstere de la paĝo.

235
00:13:29,460 --> 00:13:33,180
>> Vi povas ankaŭ anstataŭigi, kaj mi iros por elekti la tutan alineon etikedoj sur la paĝo

236
00:13:33,180 --> 00:13:36,850
kaj iru ene de ili kaj anstataŭi ajn teksto ili havas en ili

237
00:13:36,850 --> 00:13:39,690
kun nur la vorto "testado."

238
00:13:39,690 --> 00:13:46,520
Se vi faros tion, vi devos anstataŭi ĉiun alineon en la paĝo kun ĉi tiu provoj.

239
00:13:46,520 --> 00:13:49,150
Yep. Ili ĉiuj estas anstataŭita per provoj.

240
00:13:49,150 --> 00:13:53,270
Do jen unu ekzemplo de aliri la tekston kaj overwriting ĝin.

241
00:13:53,270 --> 00:13:57,490
Vi ankaux povas elsxuti informo, kaj ĉi tio estas vere malvarmeta por enigo skatoloj.

242
00:13:57,490 --> 00:14:00,470
Se vi havas enigo skatolo ke homoj tajpi rubon en,

243
00:14:00,470 --> 00:14:03,880
homoj tajpi rubon en ĝi,

244
00:14:03,880 --> 00:14:09,030
ĉi tie ni elektu la enigo, ajna enigo etikedo kun tipo de teksto.

245
00:14:09,030 --> 00:14:13,800
En tiu kazo, estas nur unu enigo skatolon en la tuta prezento,

246
00:14:13,800 --> 00:14:17,260
tial ni simple elektu la unua, kaj tiam ni nomas la val funkcio sur ĝi.

247
00:14:17,260 --> 00:14:19,570
Tio redonas la valoron, kaj por eniga skatolo,

248
00:14:19,570 --> 00:14:24,330
la valoro estas nur kion ajn okazas al esti en ĝi.

249
00:14:24,330 --> 00:14:31,880
Do, se ni faras ĉi tion, ĝi nur redonas la kordo aĵoj.

250
00:14:31,880 --> 00:14:36,860
Kaj se ni nomas ĝin denove post skribi pli aĵoj, igas pli da aĵoj.

251
00:14:36,860 --> 00:14:40,760
Tio estas unu granda vojo por aliri elementoj de eniga skatolo, kaj tiam kontrolu,

252
00:14:40,760 --> 00:14:45,060
Estas ĉi validan retpoŝtan adreson, estas ĉi valida dato, ekzemple.

253
00:14:45,060 --> 00:14:49,600
Vi povas simple elsxuti stuff tuj kiel homoj tajpi ĝin,

254
00:14:49,600 --> 00:14:54,830
kaj tiam kontroli ĉu ĝi estas valida, sendu ĝin al servilo, kion ajn vi volas kun ĝi.

255
00:14:54,830 --> 00:14:57,720
Kaj tio estas kiel vi aliron kio estas ene tiuj skatoloj.

256
00:14:57,720 --> 00:15:00,090
>> Vi ankaux povas modifi CSS rekte, do anstataŭ aldoni

257
00:15:00,090 --> 00:15:02,510
klaso kiu havas iujn antaŭdifinita propraĵoj,

258
00:15:02,510 --> 00:15:08,120
vi povas simple aldoni ajn CSS vi volas nenion.

259
00:15:08,120 --> 00:15:10,350
Do ni elektu korpo, kiu estas la tuta prezento,

260
00:15:10,350 --> 00:15:14,370
kaj koloro estas la propraĵo kiu difinas kio estas la koloroj de la teksto.

261
00:15:14,370 --> 00:15:19,420
Se ni ŝanĝas ĝin al ruĝa, la tuta teksto en la paĝo turnos al ruĝa.

262
00:15:19,420 --> 00:15:26,310
Ni povas fari ion kiel fona koloro blua,

263
00:15:26,310 --> 00:15:30,680
tie ni iros, ĝi estas bela.

264
00:15:30,680 --> 00:15:33,840
Vi povas fari kion ajn vi volas kun tiu.

265
00:15:33,840 --> 00:15:39,250
Uzante la CSS proprieto, vi povas vere ŝanĝi kiel io aspektas en ajna momento.

266
00:15:39,250 --> 00:15:41,630
La sekva afero estas efikoj.

267
00:15:41,630 --> 00:15:45,710
Efektoj estas esence la sama aĵo kiel modifi la CSS,

268
00:15:45,710 --> 00:15:48,870
sed fakte havigi iun ekstra kuraĝigo al ĝi.

269
00:15:48,870 --> 00:15:53,380
Do anstataŭ ĝuste montrante aŭ kaŝi iun aŭ ŝanĝi la koloro,

270
00:15:53,380 --> 00:15:56,130
vi povas efektive fari ĝin vigla.

271
00:15:56,130 --> 00:16:00,760
Jen la dokumentadon, se vi volas rigardi la vastan dokumentado por ĝi.

272
00:16:00,760 --> 00:16:04,760
Sed mi iros por kovri la ĉefaj.

273
00:16:04,760 --> 00:16:12,030
Estas la programo kaj kaŝi propraĵoj.

274
00:16:12,030 --> 00:16:14,510
Montri / kaŝi ID efektive respondas al tiu tuta skatolo,

275
00:16:14,510 --> 00:16:18,190
do se mi kaŝi ĝin, ĝi estos simple malaperos.

276
00:16:18,190 --> 00:16:24,210
Kaj mi povas montri ĝin denove se mi volas fari ĝin reveni.

277
00:16:24,210 --> 00:16:26,340
Kaj estas dorso. Ĝi fakte ne malaperas,

278
00:16:26,340 --> 00:16:30,670
Mi ne vere forigi ĝin el la paĝo, mi ĵus starigis la CSS propraĵo de videblecon al kaŝita

279
00:16:30,670 --> 00:16:34,030
tial vi ne povas vidi ĝin plu.

280
00:16:34,030 --> 00:16:39,250
Tie estas ankaŭ gliti tien kaj gliti suben, por ke permesas havi tiun efekton.

281
00:16:39,250 --> 00:16:47,050
Ĝi glitas supren malaperi, kaj post kiam ĝi malaperas

282
00:16:47,050 --> 00:16:53,210
vi povas gliti ĝin por fari ĝin reveni. Kaj nun ĝi estas dorso.

283
00:16:53,210 --> 00:16:57,650
Ekzistas ankaux ĉi blankigi efekton, kiu - blankigi ID respondas al tiu skatolo.

284
00:16:57,650 --> 00:17:01,200
Se mi forvelkos ĝin, tiam ĝi tuj malrapide malaperas.

285
00:17:01,200 --> 00:17:04,490
Mi ankaŭ povas dilui ĝin, kaj ĝi revenos.

286
00:17:04,490 --> 00:17:08,930
Vi povas ankaŭ fari blankigi, kiu estas specifa al la fade funkcio.

287
00:17:08,930 --> 00:17:12,589
Vi povas havi ĝin forvelkos al ajna specifa opakeco ke vi volas.

288
00:17:12,589 --> 00:17:16,869
Do se vi forvelkos ĝin malrapide al .5, ĝi devos esti duono videbla.

289
00:17:16,869 --> 00:17:22,630
Mi povas fari ĝin iru al .1, kaj reen al 1 por fari ĝin plene videbla denove.

290
00:17:22,630 --> 00:17:24,760
Tio estas nur alia kuraĝigo kiu vi povas fari.

291
00:17:24,760 --> 00:17:26,750
>> Ekzistas ankaŭ la ebligi efektoj.

292
00:17:26,750 --> 00:17:33,410
Do mi tuj elektu la ebligi ID, kiu korespondas al ĉi tiu skatolo,

293
00:17:33,410 --> 00:17:38,970
kaj en tiu div vi povas voki ebligi, se tio estas videbla igos nevidebla,

294
00:17:38,970 --> 00:17:42,320
se ĝi estas nevidebla ĝi iĝos videbla denove.

295
00:17:42,320 --> 00:17:44,440
Do mi simple nomis tiun ebligi funkcion dufoje: la unua estis

296
00:17:44,440 --> 00:17:48,380
la sama afero kiel kaŝi, la dua alvoko estis la sama afero kiel spektaklo.

297
00:17:48,380 --> 00:17:53,510
Kaj vi ankaŭ povas fari tio kun fade ebligi,

298
00:17:53,510 --> 00:17:55,730
kiuj faras la samon, se gxi efektive velkas.

299
00:17:55,730 --> 00:17:59,410
Kaj tion saman kun la diapozitivo Baskuligi.

300
00:17:59,410 --> 00:18:01,460
Esas ĉenita efektoj tiel, kio signifas

301
00:18:01,460 --> 00:18:05,520
se vi elektas ero kaj simple nomas aron da kuraĝigo metodoj sur ĝi,

302
00:18:05,520 --> 00:18:07,400
se oni volis ĝin fade out, tiam gliti malsupren,

303
00:18:07,400 --> 00:18:11,040
kaj tiam kaŝi kaj tiam forvelki, ĝi faros ilin en unu vico.

304
00:18:11,040 --> 00:18:24,920
Tiel malaperis, revenis - ial, la felon ne okazis.

305
00:18:24,920 --> 00:18:30,030
Ni provu ĝin. Jes, do ĝi malaperis el kaj tiam glitis for.

306
00:18:30,030 --> 00:18:32,230
Kaj estas multaj pli. Vi povas uzi la animitajn funkcio

307
00:18:32,230 --> 00:18:35,370
krei vian propran kuraĝigoj, kiuj estas sufiĉe kompleksa,

308
00:18:35,370 --> 00:18:38,790
sed havigas al vi kun senfinaj extensibilidad.

309
00:18:38,790 --> 00:18:40,630
Vi povas fari iu ajn speco de kuraĝigo vi volas.

310
00:18:40,630 --> 00:18:44,230
Vi povas ankaŭ uzi voston al vosto ĝis multnombraj kuraĝigoj samtempe.

311
00:18:44,230 --> 00:18:47,340
Do se vi volas ion por flugi trans la paĝo,

312
00:18:47,340 --> 00:18:49,860
gliton el la supra dekstra gxis malsupre maldekstre, vi povas fari tion,

313
00:18:49,860 --> 00:18:55,240
kaj ĝuste havas faskon da agoj tuj unu post la alia.

314
00:18:55,240 --> 00:18:57,490
>> La sekva afero ni iras por paroli pri estas eventoj.

315
00:18:57,490 --> 00:19:02,090
Eventoj permesas vin - ĝis nun, ni ĵus estis skribante tion en la konzolo

316
00:19:02,090 --> 00:19:04,870
kaj kiu estas unu maniero por fari ĉi okazos,

317
00:19:04,870 --> 00:19:08,020
sed en reala paĝo, vi ne iras por povi

318
00:19:08,020 --> 00:19:10,020
fari la uzanto tipo aĵoj en la konzolo.

319
00:19:10,020 --> 00:19:12,050
Vi deziras ĉion aŭtomate.

320
00:19:12,050 --> 00:19:18,060
Por tio, vi devas uzi okazaĵoj kiuj aktivigas sur iu certa evento okazas.

321
00:19:18,060 --> 00:19:21,340
Vi povas kontroli la dokumentadon por la detaloj.

322
00:19:21,340 --> 00:19:24,030
Do ni vidu. Ni volas kaŝi aŭ montri la skatolon,

323
00:19:24,030 --> 00:19:29,340
sed nun tiun butonon ne faras nenion ĉar mi ne apliki ĝin ankoraŭ.

324
00:19:29,340 --> 00:19:35,420
Mi tuj iros al la efektiva HTML-paĝo.

325
00:19:35,420 --> 00:19:38,560
Jen la glito. Tie estas div la glito.

326
00:19:38,560 --> 00:19:41,230
Ĝi havas la klaso de glito.

327
00:19:41,230 --> 00:19:46,890
Jen la teksto. Nu, jen estas tio skatolo kaj la skatolo butono.

328
00:19:46,890 --> 00:19:52,900
Kiel ni fakte fari ĉi malaperas?

329
00:19:52,900 --> 00:19:58,250
Unue, ni skribi funkcio kiu faras la skatolo ID malaperas.

330
00:19:58,250 --> 00:20:01,820
Ĉi tiu estas la sintakson por funtion, ni simple nomas ĝin hideTheBox.

331
00:20:01,820 --> 00:20:06,130
Ĝi ne portas neniun argumentoj, ĉar ne estas argumentoj por esti prenita.

332
00:20:06,130 --> 00:20:08,950
Ni povas elekti la skatolo ID.

333
00:20:08,950 --> 00:20:15,020
Do uzante la jQuery elektu, ni povas elekti skatolo IRU,

334
00:20:15,020 --> 00:20:17,700
kaj tiam simple fari ĝin malaperi.

335
00:20:17,700 --> 00:20:20,690
Ni faru ĝin fade out.

336
00:20:20,690 --> 00:20:27,390
Se ni kuris tiu funkcio en la fakta konzolo,

337
00:20:27,390 --> 00:20:33,380
ni povus difini tiu funkcio, ni povas nomi hideTheBox, kaj ĝi funkcias.

338
00:20:33,380 --> 00:20:36,650
Sed ni volas ke ĝi okazos kiam la butono enŝovis.

339
00:20:36,650 --> 00:20:40,950
Por fari tion ni devas uzi okazaĵon.

340
00:20:40,950 --> 00:20:45,500
Ligi evento al iu specifa butono aŭ iu ago okazas,

341
00:20:45,500 --> 00:20:50,040
ni devas elekti la elemento kiu la evento deĉenigi -

342
00:20:50,040 --> 00:20:52,650
aŭ kiu deĉenigi la okazaĵo, sorry.

343
00:20:52,650 --> 00:20:57,220
>> Do unue: ni elektu la skatolon butonon ID

344
00:20:57,220 --> 00:20:59,610
ĉar tio estas la butonon, kaj nun, por tiu butono,

345
00:20:59,610 --> 00:21:02,750
ni volas krei kuraĝigon kiam ĝi klakis.

346
00:21:02,750 --> 00:21:05,040
Do tie estas tio klako funkcio.

347
00:21:05,040 --> 00:21:08,470
Ĝi permesas vin ligi alia funkcio al ĝi.

348
00:21:08,470 --> 00:21:12,320
Ĉi tiu funkcio prenas alian funkcion kiel argumenton

349
00:21:12,320 --> 00:21:14,310
ni povas pasi en la hideTheBox funkcio,

350
00:21:14,310 --> 00:21:20,950
kaj kiam tiu butono estas klakis, tiu funkcio aŭtomate ekzekuti.

351
00:21:20,950 --> 00:21:24,850
Do tio funkcios se ni savi tiun, mi refreŝigi,

352
00:21:24,850 --> 00:21:33,460
kaj - dua, mi bedaŭras.

353
00:21:33,460 --> 00:21:44,770
Permesu al mi korekti tiun vere rapide.

354
00:21:44,770 --> 00:21:50,680
Okay. Tie ni iru. Do nun la skatolo malaperas kiam ni klaku la butonon.

355
00:21:50,680 --> 00:21:55,470
Ni povas ankaŭ ŝanĝi ĉi tion al nur fadeToggle,

356
00:21:55,470 --> 00:22:00,020
ŝanĝi ĝin ĝuste por kaŝi aŭ montri la skatolo,

357
00:22:00,020 --> 00:22:03,850
kaj tio ankaŭ laboros ankaŭ, se ni fortigu.

358
00:22:03,850 --> 00:22:08,550
Ni povas kaŝi ĝin, ni povas ankaŭ montri ĝin, kaj tio daŭre funkcias.

359
00:22:08,550 --> 00:22:12,210
Alia afero kiun ni povas fari estas, ni ne vere devas difini ĉi hideTheBox funkcio

360
00:22:12,210 --> 00:22:15,050
antaŭ ol ni nomas la click funkcio.

361
00:22:15,050 --> 00:22:17,640
Do anstataŭ difini la funkcio kaj nomante hideTheBox,

362
00:22:17,640 --> 00:22:20,310
ni nur tuj nomas ĝin se tiu afero estas klakis.

363
00:22:20,310 --> 00:22:22,310
Do ni povas difini ĝin anonime en ĉi tie,

364
00:22:22,310 --> 00:22:25,070
kiu estas funkcio kiu JavaScript havas.

365
00:22:25,070 --> 00:22:29,720
Vi povas difini funkcio; kutime, ni dirus funkcio hideTheBox

366
00:22:29,720 --> 00:22:34,490
kun argumentoj, sed anstataŭe, ni povas simple diri funkcii sen argumentoj,

367
00:22:34,490 --> 00:22:36,870
komenci la krispa streĉa por difini la funkcio,

368
00:22:36,870 --> 00:22:40,780
fermi tiun krispa streĉa, kaj poste nur difini la funkcio en ĉi tie,

369
00:22:40,780 --> 00:22:45,130
ene de la unua parentezo kaj la lasta parentezo

370
00:22:45,130 --> 00:22:47,860
kiuj respondas al la argumentoj de la click funkcio.

371
00:22:47,860 --> 00:22:53,320
Do ni pasas en tiu funkcio, oni povas kopii tiun linion de kodo ĝuste ĉi tie,

372
00:22:53,320 --> 00:22:55,450
kaj kiu faros la ĝusta sama aĵo.

373
00:22:55,450 --> 00:22:57,290
Kaj nun ni ne havas ĉi hazarda fadeTheBox funkcio

374
00:22:57,290 --> 00:22:59,960
kiu sidas ĉirkaŭe sen evidenta kialo.

375
00:22:59,960 --> 00:23:02,070
La funkcio difinis anonime, ĝi ne havas nomon.

376
00:23:02,070 --> 00:23:08,060
Ĝi estos nur ekzekuti kiam ni klaku sur la skatolo butono.

377
00:23:08,060 --> 00:23:12,180
Do refreŝiga ankoraŭfoje, pli tempon, kaj vi povas vidi, ke ĝi ankoraŭ funkcias.

378
00:23:12,180 --> 00:23:16,700
Kaj tio estas kiel vi krei okazaĵoj.

379
00:23:16,700 --> 00:23:19,190
>> Ekzistas multe da malsamaj okazaĵoj ke ni povas uzi.

380
00:23:19,190 --> 00:23:23,540
Mi tuj ŝanĝi reen al uzante la konzolo al nur montri al vi kiel tiuj laboro.

381
00:23:23,540 --> 00:23:28,210
La IDs por ĉiu el tiuj respondas al ĉiu skatolo.

382
00:23:28,210 --> 00:23:33,020
Do ĉi tiu skatolo estas klako ID, ĉi tiu estas ŝlosila ID, kaj ĉi tiu estas muso ID.

383
00:23:33,020 --> 00:23:36,120
Unu pli bona estas, ke ekzistas tiu ago funkcio; anstataŭ tajpi ĝin ĉiufoje,

384
00:23:36,120 --> 00:23:41,610
Mi fakte antaŭeniris kaj difinis tiun agon funkcio ĉi tie.

385
00:23:41,610 --> 00:23:46,860
Ĝi faras la samon kiel la hideTheBox funkcio.

386
00:23:46,860 --> 00:23:51,340
Ĝi ricevas tiun skatolon, kaj ĉu velkas ĝin aŭ velkas it in

387
00:23:51,340 --> 00:23:54,110
Kaj jen kial ni povas uzi ĝin ĉi tie.

388
00:23:54,110 --> 00:24:00,350
Do, se ni alklaku ĉi klako ID, ni volas fari la skatolo malaperas aŭ reaperi.

389
00:24:00,350 --> 00:24:03,610
Estas la sama afero kiel la butono kiun ni havis en la lastaj glito.

390
00:24:03,610 --> 00:24:07,450
Nun post ni nomas tio, ni povas alklaki tion kaj la skatolo malaperos,

391
00:24:07,450 --> 00:24:10,160
poste alklaku denove kaj la skatolo reaperos.

392
00:24:10,160 --> 00:24:12,480
Tio estas sufiĉe simpla. Duobla klako faras la samon,

393
00:24:12,480 --> 00:24:15,660
krom tio postulas duoblan klakon.

394
00:24:15,660 --> 00:24:19,030
Do se vi alklakas ĝin unu fojo alklaku denove nenio okazos,

395
00:24:19,030 --> 00:24:21,140
sed se vi duoble musklaku rapide, ĝi devos malaperi.

396
00:24:21,140 --> 00:24:23,310
Se vi duoble klaku denove, ĝi revenos.

397
00:24:23,310 --> 00:24:25,250
Por ke estas sufiĉe simpla.

398
00:24:25,250 --> 00:24:31,170
Klavaro enigo estas speco de stranga, mi ne kredas ke efektive funkcias en ĉi tiu ekzemplo

399
00:24:31,170 --> 00:24:37,670
ĉar la ŝlosilo malsupren, ŝlosilo supren kaj ŝlosilo gazetaro kaj aliaj ŝlosilaj agoj

400
00:24:37,670 --> 00:24:47,190
aktivigi ne gravas kion elemento vi ligos ĝin por.

401
00:24:47,190 --> 00:24:51,410
Ekzemple, eĉ se mi ligis ŝlosilo malsupren al korpo aŭ ion alian tute,

402
00:24:51,410 --> 00:24:55,950
tiam ĝi estus ankoraŭ aktivigi ajn - ĝi ne estas specifa.

403
00:24:55,950 --> 00:25:00,190
Mi ne devas klaki sur tiu kaj premi klavon por fari ion malaperas.

404
00:25:00,190 --> 00:25:04,470
Estus aktivigis sendistinge de kion elemento Mi estas aktuale in

405
00:25:04,470 --> 00:25:06,880
Do tiuj ne vere funkcias en ĉi tiu ekzemplo

406
00:25:06,880 --> 00:25:13,180
ĉar ne rekonas min kiel eniri enigo en la klavaro enigo div.

407
00:25:13,180 --> 00:25:15,740
>> Sed se vi rigardas la muson agoj,

408
00:25:15,740 --> 00:25:19,620
la unua estas ŝvebi, kaj ĝi povas fari iuj de ĉi uzante CSS.

409
00:25:19,620 --> 00:25:24,280
Se vi uzas CSS, vi povas krei ĝin tiel ke se vi ŝvebi super io,

410
00:25:24,280 --> 00:25:28,940
tiam lia stilo ŝanĝojn.

411
00:25:28,940 --> 00:25:32,170
Sed uzante jQuery vi povas ŝanĝi la stilojn de aliaj aferoj ankaŭ.

412
00:25:32,170 --> 00:25:37,120
Do, ekzemple, ni iras nomi agon se ni ŝvebi super ĉi div.

413
00:25:37,120 --> 00:25:39,660
Tio signifas, se ni ŝvebi super ĝi, tiam la skatolo malaperos.

414
00:25:39,660 --> 00:25:42,430
Se ni malproksimigi de ĝi, la skatolo reaperos.

415
00:25:42,430 --> 00:25:45,090
Se ni nomas tion kaj ŝvebi super ĝi, la skatolo ne malaperas,

416
00:25:45,090 --> 00:25:47,050
kaj tuj kiam ni malproksimigas, ĝi revenos.

417
00:25:47,050 --> 00:25:49,750
Se ni nomas tiun Hover funkcio sur la muso IRU,

418
00:25:49,750 --> 00:25:54,380
kiu korespondas al ĉi tiu skatolo, tiam se ni ŝvebi super la skatolo,

419
00:25:54,380 --> 00:26:00,440
tiam la skatolo efektive malaperi - ĝin esti funky ĝuste nun, sed -

420
00:26:00,440 --> 00:26:06,310
se ni malproksimigi de ĝi, ĝi reaperos. Ĝuste nun ĝi estas malantaŭen ial.

421
00:26:06,310 --> 00:26:12,720
La muso eniras kaj muso movado funkcioj estas iom similaj, sed iomete malsama.

422
00:26:12,720 --> 00:26:16,470
Muso eniri nur aktivigas kiam la muso eniras la skatolo, tiel atendita.

423
00:26:16,470 --> 00:26:19,210
Do se vi movas en ĝin, ĝi povos malaperi.

424
00:26:19,210 --> 00:26:23,210
Sed ne reaperos kiam vi malproksimigi; vi devos kopii reven por ĝi reveni.

425
00:26:23,210 --> 00:26:25,590
Ekzistas ankaŭ la muso movado funkcio, kiu aktivigos

426
00:26:25,590 --> 00:26:29,300
ĉiufoje kiam la muso estas eĉ ĉeestas en la skatolo.

427
00:26:29,300 --> 00:26:32,430
Do ĝi devos simple daŭre iras, estingiĝas kaj eliris.

428
00:26:32,430 --> 00:26:35,660
Kaj ĝi estas fakte tala - ĝi ŝajnas kiel ĝi estas nur estingiĝas en kaj ekstere,

429
00:26:35,660 --> 00:26:39,140
sed ĝi estas fakte tala multe pli agoj ol tio,

430
00:26:39,140 --> 00:26:43,550
do kiam vi malproksimigi ĝin povos ĝuste teni tuj ĉar ensalutinta kiel mil el ili.

431
00:26:43,550 --> 00:26:46,620
Eble ne, mil. Eble kvin.

432
00:26:46,620 --> 00:26:50,200
Ĝi registras pli ol tio.

433
00:26:50,200 --> 00:26:53,280
La punkto estas, ĉiuj muso agojn, estas multe da ili.

434
00:26:53,280 --> 00:26:55,480
Vi povas legi sur la alia, sed ili ĉiuj estas iomete malsama,

435
00:26:55,480 --> 00:26:57,700
kaj vi povas elekti kiun ajn oni vin bezonas

436
00:26:57,700 --> 00:27:02,130
por kiu ajn specifa celo vi provas fari.

437
00:27:02,130 --> 00:27:05,060
>> Post tio mi tuj paroli pri estas AJAX.

438
00:27:05,060 --> 00:27:09,340
AJAX, mi scias ke ni ne kovris JavaScript en tiel profundo ĉi tiu jaro,

439
00:27:09,340 --> 00:27:11,770
do mi simple tuj parolos pri AJAX en ĝenerala por minuto.

440
00:27:11,770 --> 00:27:15,210
AJAX staras por Asynchronous JavaScript kaj XML.

441
00:27:15,210 --> 00:27:19,030
Ĝi estas esence, ekzemple, kiam vi estas en Facebook kaj ĝi pelas al vi sciigo,

442
00:27:19,030 --> 00:27:23,060
ke estas ĉar AJAX kuras sur via retumilo.

443
00:27:23,060 --> 00:27:25,800
Ĉiu paro de duaj via retumilo estas reale

444
00:27:25,800 --> 00:27:29,420
tuj Facebook serviloj, demandante ilin, ĉu vi havas ion novan por mi,

445
00:27:29,420 --> 00:27:31,980
kaj tiam revenas al vi.

446
00:27:31,980 --> 00:27:36,320
Tio permesas al vi sendi petojn al servilo

447
00:27:36,320 --> 00:27:38,660
sen efektive ŝargi la paĝo.

448
00:27:38,660 --> 00:27:42,040
Tiel kutime, se vi simple uzi PHP kaj datumbazo,

449
00:27:42,040 --> 00:27:45,480
vi devas refreŝigi la paĝon antaŭ ol vi povos akiri novan informon de la servilo.

450
00:27:45,480 --> 00:27:48,770
Sed uzante AJAX, vi povas tiri por novaj informoj senĉese,

451
00:27:48,770 --> 00:27:52,250
aŭ tiri por ĝin kiam vi klakas butonon aŭ io kiel tio.

452
00:27:52,250 --> 00:27:56,140
Do tio ni permesas sendi petojn sen lardas la paĝo,

453
00:27:56,140 --> 00:27:58,130
kaj ni povas uzi aŭ GET aŭ POST petoj.

454
00:27:58,130 --> 00:28:05,370
>> GET petoj estas, ekzemple, se vi al Google.com

455
00:28:05,370 --> 00:28:10,900
kaj do q = testo. Tio donas al ili konsulto testo.

456
00:28:10,900 --> 00:28:15,890
Kaj tio estas Get peto ĉar ĝi estas pasanta en tiuj parametroj en la URL mem.

457
00:28:15,890 --> 00:28:19,250
A POST peto estas kvazaŭ vi sendante ilin tra post.

458
00:28:19,250 --> 00:28:22,500
Estas kiel vi metis ĝin en letero kaj transporti ĝin al ili,

459
00:28:22,500 --> 00:28:25,140
sed ili ne vere vidas la enhavon. Ili ne estas videbla en la URL.

460
00:28:25,140 --> 00:28:31,040
Vi ne povas rekte tajpi gxin, vi devas sendi ĝin preskaŭ sekrete.

461
00:28:31,040 --> 00:28:33,880
Ĝi estas en fosto.

462
00:28:33,880 --> 00:28:38,660
Sed uzante jQuery, vi povas fari GET kaj POST petoj

463
00:28:38,660 --> 00:28:42,740
multe pli facile ol vi kutime povus uzi nur ordinaraj JavaScript.

464
00:28:42,740 --> 00:28:50,140
Vi povas konsulti API uzante GET petojn, kaj vi povas kontroli ankaŭ por ensaluto informo.

465
00:28:50,140 --> 00:28:54,400
En la sekva paĝo, mi kreis ĉi tiu, kiu petas, "Kio estas por tagmanĝi?"

466
00:28:54,400 --> 00:28:58,230
uzante la Harvard manĝo API, do ni tiri ke ĝis.

467
00:28:58,230 --> 00:29:01,840
Tiu estas nur ekzemplo de kiel vi povas uzi jQuery fari Get peto API

468
00:29:01,840 --> 00:29:04,200
kaj akiri informon reprenos gxin.

469
00:29:04,200 --> 00:29:07,090
Do ni volas vidi la menuon por hodiaŭ,

470
00:29:07,090 --> 00:29:10,560
kaj ni volis vidi kio estas por tagmanĝi.

471
00:29:10,560 --> 00:29:16,500
Jen la URL por krei Get peton en jQuery.

472
00:29:16,500 --> 00:29:18,600
vi uzas la $. akiri funkcio.

473
00:29:18,600 --> 00:29:22,290
La unua argumento estas la adreso, do precize kion vi informpeti.

474
00:29:22,290 --> 00:29:27,200
Tiam la sekva argumento estas funkcio kiu ekzekutas kiam la Get peto estas kompleta.

475
00:29:27,200 --> 00:29:29,980
Do vi sendos sur kelkaj peton al la servilo, atendu gxin reveni.

476
00:29:29,980 --> 00:29:33,770
Kiam ĝi revenis, vi iras preni iun agon kun la datumoj kiuj estas for de la servilo.

477
00:29:33,770 --> 00:29:37,520
Ni iru antaŭen kaj programi ĉi tiel.

478
00:29:37,520 --> 00:29:42,110
Mi ne kodi ĉi ankaŭ ne, celkonscie.

479
00:29:42,110 --> 00:29:46,660
Jen la `TODO '. Unue, ni uzas la okazaĵon binding

480
00:29:46,660 --> 00:29:50,820
por ke, kiam tiu butono estas premita, ni sendos la suferintojn Get peton.

481
00:29:50,820 --> 00:29:53,410
Kaj kiam tiu GET peto revenas kun iuj datumoj,

482
00:29:53,410 --> 00:29:57,290
Ni tuj skribi ĝin en ĉi tiun manĝon info ID div.

483
00:29:57,290 --> 00:30:02,860
Unue, ni elektu la manĝo butonon ID.

484
00:30:02,860 --> 00:30:07,320
Kiam ĝi estas klakis, ni volas fari ion.

485
00:30:07,320 --> 00:30:11,930
Ni simple fari anonima fuction, kiel antaŭe.

486
00:30:11,930 --> 00:30:15,550
Ĉu enpaki tiuj buklaj krampoj,

487
00:30:15,550 --> 00:30:18,530
kaj kiam tiun butonon estas premita, ni volas sendi Get peto

488
00:30:18,530 --> 00:30:20,750
por kontroli kio estas por tagmanĝi.

489
00:30:20,750 --> 00:30:24,970
Por fari tion, ni povas simple tajpi en $. Akiras.

490
00:30:24,970 --> 00:30:28,850
Tio ĉi estas jQuery funkcion, uzante la dolaro signo.

491
00:30:28,850 --> 00:30:31,430
Ĝi prenas paron da argumentoj. La unua estas la URL,

492
00:30:31,430 --> 00:30:34,450
la dua estas la callback funkcio, la funkcio kiu nomiĝas

493
00:30:34,450 --> 00:30:37,740
kiam tiu peto fakte revenas.

494
00:30:37,740 --> 00:30:39,890
Ni simple konstrui la URL-unua.

495
00:30:39,890 --> 00:30:44,650
Ni povas atingi ĝin el la API, ke David redaktis.

496
00:30:44,650 --> 00:30:51,360
Irante ĉi tien, ni povas vidi ke ĝi estas food.cs50.net/api/1.3/menus,

497
00:30:51,360 --> 00:30:54,140
kaj tiam vi simple preterpasas en la nomoj de la parametroj, ke vi ŝatus.

498
00:30:54,140 --> 00:30:57,760
Do parametro 1 estas valoro 1.

499
00:30:57,760 --> 00:31:00,910
Ĝi aspektas kiel normo dato, starti dato, implicite hodiaŭ

500
00:31:00,910 --> 00:31:03,110
se vi ne eniras nenion, kaj fino dato ankaŭ implicite

501
00:31:03,910 --> 00:31:05,930
al hodiaŭ se vi ne eniras nenion.

502
00:31:05,930 --> 00:31:10,790
Tio estas kion ni volas. Ni volas nur ricevi la informon por hodiaŭ.

503
00:31:10,790 --> 00:31:12,950
>> Ni volas ke la formato estas en XML.

504
00:31:12,950 --> 00:31:15,570
Tio estas nur arbitra, vi povas uzi ajnan formon, kiun vi volas.

505
00:31:15,570 --> 00:31:18,950
Vi povas uzi CSV, sed JSON estas JavaScript Objekto Skribmaniero.

506
00:31:18,950 --> 00:31:24,150
Ĝi estas tre facila por JavaScript por kompreni, kion tio signifas,

507
00:31:24,150 --> 00:31:27,110
kaj ni povas presi ĝin pli facile tiel.

508
00:31:27,110 --> 00:31:30,490
Do ni petas en JSON, kaj estu peto lunĉo.

509
00:31:30,490 --> 00:31:37,660
Do manĝo = lunĉo. Nur por redakti ke URL, ni reiru tie.

510
00:31:37,660 --> 00:31:41,290
Ekzistas menuoj. La unua parametro estas eligo = JSON

511
00:31:41,290 --> 00:31:44,640
ĉar tio kion ni volas, kaj vi disigi la parametroj kun 'kaj.'

512
00:31:44,640 --> 00:31:48,940
La dua parametro estas - mi ne memoras.

513
00:31:48,940 --> 00:31:52,170
Manĝo. Kaj ni volas manĝo = lunĉo.

514
00:31:52,170 --> 00:31:57,390
Vi povas provi ĉi URL tajpante ĝin en vian retumilon kaj tuj ĝi.

515
00:31:57,390 --> 00:32:03,120
Ĝi donos al vi iom da eligo. Estas nur aron da aĵoj estas por tagmanĝi.

516
00:32:03,120 --> 00:32:10,410
Ĝi estas en ĉi tiu malbela formato. Ni volas presi ĝin sur nia paĝo en pli bona formato.

517
00:32:10,410 --> 00:32:12,580
Do la URL estas ĝusta, nun ni nur bezonas skribi funkcio

518
00:32:12,580 --> 00:32:18,300
nomi reen kiam la peto estas prospera.

519
00:32:18,300 --> 00:32:20,430
Ĉi tiu funkcio estos reale preni argumento. Estos datumoj.

520
00:32:20,430 --> 00:32:25,650
La datumoj estas kio venas el inter la Get peto post la Get peto estas farita.

521
00:32:25,650 --> 00:32:28,860
Ni povas fari la krispa krampoj; ĉi tie ni skribu la anoniman funkcion

522
00:32:28,860 --> 00:32:33,900
kiu ekzekutas, uzante tiun datumon kiam ni atingos la informo dorso.

523
00:32:33,900 --> 00:32:37,840
Do datumoj, kiam ni tajpita en ĉi tiu URL,

524
00:32:37,840 --> 00:32:41,540
ĉi tio estas kion la datumoj tuj aspekti. Ĝi tuj estos tiu grandega kordo.

525
00:32:41,540 --> 00:32:48,610
Sed la bona afero estas, JavaScript povas analizi ĝin uzante la JSON.parse funkcio.

526
00:32:48,610 --> 00:32:54,950
Do ni krei novan variablon nomata parse datumoj.

527
00:32:54,950 --> 00:32:57,060
Kaj parse datenoj estas tabelo de objektoj.

528
00:32:57,060 --> 00:33:04,200
Ĉiu objekto enhavas informojn kiel - nu, ni rigardu.

529
00:33:04,200 --> 00:33:08,980
Ĝi havas daton, manĝo, kategorio, recepto, ĉio tio aliaj aferoj.

530
00:33:08,980 --> 00:33:10,860
Do ni nur presi la nomo por ĉiu.

531
00:33:10,860 --> 00:33:13,790
Ni persisti sur la tuta aro de aĵoj kiujn ni reiros de ĝi,

532
00:33:13,790 --> 00:33:17,570
kaj ĝuste presi ĉiun - elprinti la nomon de ĉiu.

533
00:33:17,570 --> 00:33:22,670
Tio estas por buklo.

534
00:33:22,670 --> 00:33:26,030
>> Javascript estas helpema sintakso, kie vi povas krei ŝanĝiĝema kaj buklo super tabelo,

535
00:33:26,030 --> 00:33:30,150
kaj var i estas nur la iterator, do anstataŭ devi fari var i = 0,

536
00:33:30,150 --> 00:33:40,290
i estis malpli ol la longeco, mi + +, vi povas simple fari var i en analizitajn datumoj.

537
00:33:40,290 --> 00:33:47,060
En ĉi tiu ekzemplo, analizitajn datumoj (i) respondos al la nuna ero

538
00:33:47,060 --> 00:33:49,850
de la tabelo, la reala objekto.

539
00:33:49,850 --> 00:33:51,720
Kaj ni volas akiri la nomon el ĝi.

540
00:33:51,720 --> 00:33:54,170
Do ni nur faru nomo.

541
00:33:54,170 --> 00:33:57,000
Kaj la lasta afero, ni tuj havos iujn jQuery denove.

542
00:33:57,000 --> 00:34:02,660
Efektive aldoni ĝin al la div, ĉi manĝo info div tio aktuale malplena.

543
00:34:02,660 --> 00:34:05,430
Do ni elektu tio.

544
00:34:05,430 --> 00:34:13,870
Ni uzas jQuery kaj elektu manĝo info div ID, aŭ manĝo info ID, sorry.

545
00:34:13,870 --> 00:34:16,580
Ni volas postglui al ĉi tio.

546
00:34:16,580 --> 00:34:21,030
Se ni faris provon, ekzemple, estus simple anstataŭigi ĝin ĉiun solan fojon.

547
00:34:21,030 --> 00:34:29,190
Do ni povas simple aldonas ĉi.

548
00:34:29,190 --> 00:34:31,889
La aktuala elemento en la tabelo, ni ricevos la nomon el ĝi,

549
00:34:31,889 --> 00:34:38,159
kaj ni aldonas ĝin al la fino de la manĝo info ID div.

550
00:34:38,159 --> 00:34:40,120
Kaj tiam nur por igi ĝin rigardi pli pura,

551
00:34:40,120 --> 00:34:51,550
ni ankaŭ postglui al linerompo tuj kiam ne ĉiuj en unu linio.

552
00:34:51,550 --> 00:34:55,280
Do, se ĉiu iras bone, ke devus esti bona -

553
00:34:55,280 --> 00:34:57,220
antaŭ ĉio, krom se ĉi butono klakis,

554
00:34:57,220 --> 00:35:00,070
ĝi sendos suferintojn Get peto al ĉi tiu URL.

555
00:35:00,070 --> 00:35:02,500
Kiam la datumoj revenas de ĝi, ĝi devos analizi ĝin,

556
00:35:02,500 --> 00:35:06,950
igi ĝin JSON, buklo sur la tuta tabelo kiu reprezentas tiun datumon,

557
00:35:06,950 --> 00:35:10,310
kaj poste aldonas la nomon kaj linerompo

558
00:35:10,310 --> 00:35:16,500
al ĉiu linio en tiu manĝo info ID kiuj estis antaŭe malplena.

559
00:35:16,500 --> 00:35:18,910
Do reiri al tiu paĝo, ni fortigu,

560
00:35:18,910 --> 00:35:23,690
klako, trovu - ĝi ne funkcias. Tio estas malfeliĉa.

561
00:35:23,690 --> 00:35:25,830
Kaj ĉi tiu estas kie elpuriganta venas in

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

563
00:35:30,070 --> 00:35:57,210
Tio estas interesa.

564
00:35:57,210 --> 00:35:59,720
Bone, nu, prefere ol elspezi tempon farante tion, mi simple tuj

565
00:35:59,720 --> 00:36:07,070
elsxiros la faritaj dosiero kiun mi havas, kiuj estas la kompletigita versio.

566
00:36:07,070 --> 00:36:13,710
Mi ne certas kio estas la diferenco estas, sed ni povas nur malfermi tiun supren anstataŭe.

567
00:36:13,710 --> 00:36:19,740
Kaj ni iru al la AJAX, kaj ĉi tiu devus funkcii ĝuste.

568
00:36:19,740 --> 00:36:21,730
Tio estas kio estis por tagmanĝo hodiaŭ,

569
00:36:21,730 --> 00:36:24,870
en neniu aparta ordo, kun citiloj ĉirkaŭ ĝi, do ĝi ne estas la plej bela.

570
00:36:24,870 --> 00:36:27,090
Sed, evidente, se vi faras tion por fina projekto,

571
00:36:27,090 --> 00:36:30,120
vi farus aspektas pli bone.

572
00:36:30,120 --> 00:36:32,530
Sed tio estas nur simpla ekzemplo de kiel vi faras la Get peton.

573
00:36:32,530 --> 00:36:34,580
Kaj se ni rigardas la reala kodo, mi konjektas, mi estas sufiĉe certa

574
00:36:34,580 --> 00:36:39,690
ĝi estas ankoraŭ sufiĉe da la samaj.

575
00:36:39,690 --> 00:37:04,990
Ho, mi forgesis konverti ĝin al ŝnuro, jen ĝi.

576
00:37:04,990 --> 00:37:07,920
Ne, ĝi estas ankoraŭ ne funkcias. Sendepende, jen la reala kompletigita kodo

577
00:37:07,920 --> 00:37:10,300
por kio ĉi tiu devus aspekti kiel,

578
00:37:10,300 --> 00:37:16,400
kaj gxi faras la samon kiel kio mi nur implementado.

579
00:37:16,400 --> 00:37:22,760
Kiam vi klakas sur la butono, ĝi uzas GET JSON por aŭtomate analizi la datumojn.

580
00:37:22,760 --> 00:37:29,190
Ĝi prenas la datumoj reprenos gxin kaj cikloj tra la tuta tabelo

581
00:37:29,190 --> 00:37:32,770
kaj gravuraĵoj el la - kion ajn estas por tagmanĝi hodiaŭ, la nomon de ĝi,

582
00:37:32,770 --> 00:37:38,020
kaj appends linion ripozon post ĉiu linio.

583
00:37:38,020 --> 00:37:41,100
Tiel estas kiel vi uzas la Get funkcio.

584
00:37:41,100 --> 00:37:44,040
>> Vi povas ankaŭ uzi POST, kiun mi ne havis tempon

585
00:37:44,040 --> 00:37:47,940
redakti ekzemplo por tio, sed ni povas rigardi la dokumentaron.

586
00:37:47,940 --> 00:37:53,220
Se vi rigardas jquery.post,

587
00:37:53,220 --> 00:37:55,510
Vi povas vidi ke ĝi estas preskaŭ la sama afero.

588
00:37:55,510 --> 00:38:01,650
Vi havas URL, sed anstataŭ pasi parametrojn uzante -

589
00:38:01,650 --> 00:38:03,990
nur metante ilin en la kordo por ke la URL mem,

590
00:38:03,990 --> 00:38:06,300
vi devas pasi en ĉi datumoj variablo

591
00:38:06,300 --> 00:38:11,990
ke estas esence tabelo, vortaron, kiu mapoj parametrojn por valoroj.

592
00:38:11,990 --> 00:38:17,690
Vi pasas ke, kaj kiu sendas ilin en uzanta POST.

593
00:38:17,690 --> 00:38:20,790
Kaj kiam vi havas tiun, tiam vi povas havi sukceson funkcio

594
00:38:20,790 --> 00:38:23,930
kiu ekzekutas kiam la datumoj revenos.

595
00:38:23,930 --> 00:38:26,430
Alie, ĝi estas precize la sama. Do uzante POST,

596
00:38:26,430 --> 00:38:29,970
vi eble deziras uzi POST, ekzemple, se vi havas enigo formo

597
00:38:29,970 --> 00:38:35,780
vi lasu homoj enigo pasvortojn en ĝin, kaj sendu la pasvortojn ekstere

598
00:38:35,780 --> 00:38:41,850
al via dorso-fino skripton, por kontroli en la datumbazo ĉu tiu uzanto estas valida aŭ ne.

599
00:38:41,850 --> 00:38:46,700
Vi povas fari, ke ĉiuj uzas jQuery anstataŭ devi refreŝigi la paĝon ajn.

600
00:38:46,700 --> 00:38:52,160
Tio estas kiel mi implementado en la blogo kiun mi montris al vi pli frue.

601
00:38:52,160 --> 00:38:59,530
Se ni iras al la fino portalo kaj elsaluti, elsaluti,

602
00:38:59,530 --> 00:39:02,600
Elsaluti ne funkcias.

603
00:39:02,600 --> 00:39:13,360
Nu, mi simple malfermi ĝin en nova fenestro.

604
00:39:13,360 --> 00:39:16,580
Tie estas pasvorto, kaj mi tuj tajpi en iu hazarda.

605
00:39:16,580 --> 00:39:18,590
Ĝi ne funkcias, sed vi povas vidi, ke ni ne

606
00:39:18,590 --> 00:39:20,840
efektive havas por refreŝigi la paĝon ajn.

607
00:39:20,840 --> 00:39:24,610
La kodo, se vi volas rigardi ĝin,

608
00:39:24,610 --> 00:39:37,460
estas ĉiuj haveblaj en ĉi tie.

609
00:39:37,460 --> 00:39:45,680
Do la kodo mi skribis pasintjare iam.

610
00:39:45,680 --> 00:39:47,790
Kiel vi povas vidi ĉi tie, ni sendante POST peton.

611
00:39:47,790 --> 00:39:50,400
Mi havas dosieron nomatan login.php en la dorso fino,

612
00:39:50,400 --> 00:39:53,860
kiuj kontrolas se la pasvorto estas validaj.

613
00:39:53,860 --> 00:39:56,000
La parametroj ni pasas en estas pasvorto, mapita al

614
00:39:56,000 --> 00:40:00,030
la enigo tio estas en ĉi tiu enigo skatolo nuntempe.

615
00:40:00,030 --> 00:40:04,110
Kaj kiam la datumoj revenas, ni kontrolu.

616
00:40:04,110 --> 00:40:07,680
Se la datumoj estas malvera, tiam ni diros malĝusta pasvorto, gliti gxin

617
00:40:07,680 --> 00:40:09,580
kaj ĝuste malaperigi post tio.

618
00:40:09,580 --> 00:40:12,320
Alie, ni montru la administranton paĝo.

619
00:40:12,320 --> 00:40:15,080
Kaj tio estis tute farita per JSON.

620
00:40:15,080 --> 00:40:18,510
En ĉi multaj linioj de kodo, vi povas simple pasas la datumojn al la dorso fino,

621
00:40:18,510 --> 00:40:21,020
kontroli ĉu ĝi estas korekta, kontrolu ĉu vi ensalutinta korekte,

622
00:40:21,020 --> 00:40:24,200
kaj efektive respondas al ĝi, redireccionando la persono al la ĝentila paĝo

623
00:40:24,200 --> 00:40:29,760
aŭ ne lasante ilin ensaluti kaj dirante al ili, ke ili havis malĝustan pasvorton.

624
00:40:29,760 --> 00:40:33,040
Do jen unu ekzemplo de kiel vi povis uzi jQuery POST

625
00:40:33,040 --> 00:40:37,010
sendi POST peton al via dorso fino,

626
00:40:37,010 --> 00:40:42,400
kontrolanta ĉu iu estas ensalutinta ĝuste.

627
00:40:42,400 --> 00:40:44,820
>> Bone, do tio estas ĉiuj ekzemploj mi havis, kaj cxiujn aferojn mi volis kovri.

628
00:40:44,820 --> 00:40:47,110
Tiuj estas la ĉefaj aĵoj kiuj jQuery permesas al vi fari:

629
00:40:47,110 --> 00:40:52,640
elekti elementojn, modifi ilin uzante DOM manipulado,

630
00:40:52,640 --> 00:40:56,340
vi povas aldoni efektojn, aktivigi tion en certaj eventoj,

631
00:40:56,340 --> 00:41:00,430
kaj ankaŭ fari AJAX petoj tre perfekte kaj facile.

632
00:41:00,430 --> 00:41:02,840
Do dankon pro veni aŭ rigardante,

633
00:41:02,840 --> 00:41:06,230
kaj se vi havas demandojn, simple lasu min scii. Jes?

634
00:41:06,230 --> 00:41:12,730
[Studenta] Back kiam vi montris, vi devis JSON post la POST peto en citiloj,

635
00:41:12,730 --> 00:41:15,170
kaj mi estis nur demandante kion tio faris.

636
00:41:15,170 --> 00:41:20,070
>> Jes, mi vidas. La demando estis ke, en la ekzemplo Mi nur montris,

637
00:41:20,070 --> 00:41:25,790
tie estis la vorto JSON en citilojn ĉirkaŭ la -

638
00:41:25,790 --> 00:41:31,690
Mi nur tiris ĝin supren - ĉirkaŭ la POST funkcio.

639
00:41:31,690 --> 00:41:43,320
Mi simple tirante ĝin montri.

640
00:41:43,320 --> 00:41:46,890
Do jen estas tio POST peto, kaj tie estas tio JSON en citiloj.

641
00:41:46,890 --> 00:41:50,280
Ke ĝuste difinas kion ni atendis la eliron esti.

642
00:41:50,280 --> 00:41:54,070
Do, se ni pasas en JSON kiel la atendata datumtipo,

643
00:41:54,070 --> 00:41:56,070
ĝi ne estas postulo, sed se ni pasas ĝin,

644
00:41:56,070 --> 00:41:58,590
tiam la datumoj estos aŭtomate analizitaj kiel JSON.

645
00:41:58,590 --> 00:42:00,600
Do ni ne devas alvoki JSON parse funkcio sur ĝi,

646
00:42:00,600 --> 00:42:02,620
tio devos okazi nur aŭtomate.

647
00:42:02,620 --> 00:42:05,150
Kaj se vi rigardu la dokumentadon por POST,

648
00:42:05,150 --> 00:42:09,850
ekzistas ĉi tiu datumtipo variablo, la tipo de datumoj atendi de la servilo.

649
00:42:09,850 --> 00:42:12,660
Ĝi implicite inteligenta konjekton kiu povas esti erara,

650
00:42:12,660 --> 00:42:15,520
tiel vi povas lasi ĝin malplena, sed estas ĝuste la tipo de datumoj

651
00:42:15,520 --> 00:42:21,680
en kodiga ke vi uzas, cxu gxi estas JSON aŭ XML aŭ ion alian.

652
00:42:21,680 --> 00:42:25,280
>> Aliajn demandojn?

653
00:42:25,280 --> 00:42:27,300
Ĉio bone. Se vi havas aliajn demandojn, bonvolu retpoŝti al mi

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

655
00:42:30,830 --> 00:42:34,860
kaj la diapozitivojn kaj kodo estu havebla surlinia sufiĉe frue.

656
00:42:34,860 --> 00:42:42,810
Bonŝancon kun via fina projektoj, esperas ke vi uzas jQuery.

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