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, Harvard University]

3
00:00:04,790 --> 00:00:08,000
[Ito ay CS50.] [CS50.TV]

4
00:00:08,000 --> 00:00:10,640
Kung sinusubaybayan mo kasama sa bahay, maaari mong aktwal na ma-access ang aking mga slide online

5
00:00:10,640 --> 00:00:13,310
sa pamamagitan ng pagpunta sa link na ito.

6
00:00:13,310 --> 00:00:18,650
Ito ay TjjRWj, sa bit.ly.

7
00:00:18,650 --> 00:00:20,700
Maaari ka ring pumunta lamang sa URL direkta,

8
00:00:20,700 --> 00:00:27,300
na kung saan ay cloud.cs50.net / ~ vshekhawat, na kung saan ay ang aking pangalan,

9
00:00:27,300 --> 00:00:32,409
at jquery.

10
00:00:32,409 --> 00:00:34,920
Ko lubos na hinihikayat ka upang sundin kasama kung pinapanood mo sa bahay,

11
00:00:34,920 --> 00:00:40,650
at kung ikaw ay dito, din, dahil ito ay isang medyo interactive na pagtatanghal.

12
00:00:40,650 --> 00:00:43,160
>> Kaya ngayon pupuntahan ko ay pakikipag-usap tungkol sa jQuery, at ang unang tanong ay,

13
00:00:43,160 --> 00:00:45,300
ano ang jQuery?

14
00:00:45,300 --> 00:00:47,090
Ito taon, alam ko sa iyo guys na hindi sakop ng JavaScript

15
00:00:47,090 --> 00:00:51,080
sa ng maraming detalye hangga't kami ay may sa nakalipas na taon.

16
00:00:51,080 --> 00:00:53,150
Ang JavaScript ay, una sa lahat, lamang ng isang client-side na wika

17
00:00:53,150 --> 00:00:58,390
na gagamitin mo upang patakbuhin ang script at code sa machine sa bawat gumagamit.

18
00:00:58,390 --> 00:01:00,660
Kaya ikaw ay may isang server na nagbibigay ng mga web page sa mga tao,

19
00:01:00,660 --> 00:01:02,600
ngunit maaaring gusto mong gawin ang mga bagay-bagay sa kanilang mga computer,

20
00:01:02,600 --> 00:01:08,060
tanungin ang kanilang mga machine upang magpadala ng mga kahilingan sa iyong server sa bawat 30 segundo o isang bagay tulad na.

21
00:01:08,060 --> 00:01:10,420
Maaari mong gawin na gamit ang JavaScript.

22
00:01:10,420 --> 00:01:13,190
JQuery lamang ay nagbibigay ng higit pang mga pag-andar sa tuktok ng JavaScript

23
00:01:13,190 --> 00:01:15,680
na ang ibig dagdag bagay-bagay para sa iyo.

24
00:01:15,680 --> 00:01:17,710
Kung tumingin ka sa mga nilalaman sa itaas,

25
00:01:17,710 --> 00:01:21,410
na naglalarawan ng ilan sa mga bagay-bagay na nagawa mong gawin.

26
00:01:21,410 --> 00:01:23,500
Kaya pangkalahatang, ito ay nilikha noong Enero 2006.

27
00:01:23,500 --> 00:01:26,560
Ito ay unang conceived ng sa Agosto 2005.

28
00:01:26,560 --> 00:01:31,370
Ito ay naging sa paligid para sa isang ilang taon, at ito ay talagang bahagi ng bagong kilusan Web 2.0

29
00:01:31,370 --> 00:01:34,330
na ginawa sa Internet kaya makintab.

30
00:01:34,330 --> 00:01:37,630
Ito ay ang pinaka-tinatanggap na ginamit library JavaScript.

31
00:01:37,630 --> 00:01:41,450
Higit sa 19,600,000 ang mga website na gumagamit nito, at ang paggamit pa rin ang pagtaas ng

32
00:01:41,450 --> 00:01:45,640
ayon sa builtwith.com, na, tila, sa huling taon,

33
00:01:45,640 --> 00:01:49,710
Na naging patuloy na pagtaas ng patas na linearly.

34
00:01:49,710 --> 00:01:52,870
Kabilang sa mga nangungunang 10 milyong mga site, mayroong pa rin -

35
00:01:52,870 --> 00:01:55,180
sa paligid ng 40% ng mga ito ay kasalukuyang gumagamit nito.

36
00:01:55,180 --> 00:01:58,540
Facebook gumagamit nito, maraming iba pang mga website kasalukuyan gamitin ito.

37
00:01:58,540 --> 00:02:01,540
Maaari mong tingnan ang mga istatistika sa iyong sarili, kung gusto mo.

38
00:02:01,540 --> 00:02:05,820
At maaari mong sabihin ito ay legit ito dahil mayroon itong isang pundasyon at 13 board mga kasapi,

39
00:02:05,820 --> 00:02:11,910
kasama ang isang koponan ng mga 20 mga tao na nagtatrabaho sa ito sa isang regular na batayan.

40
00:02:11,910 --> 00:02:16,110
Kaya ito ay napaka malawakang ginagamit, mayroon itong. URL org, ito'y magarbong,

41
00:02:16,110 --> 00:02:21,660
mayroon itong iikot-off para sa iba pang mga bagay-bagay, kaya ito ay isang malaking pakikitungo.

42
00:02:21,660 --> 00:02:24,510
>> Bakit dapat mong gamitin ito? JQuery ay napaka-magaan ang timbang.

43
00:02:24,510 --> 00:02:27,270
Iyon ay nangangahulugang ito ay hindi isang malaking file. Maaari mong i-download

44
00:02:27,270 --> 00:02:31,540
ang minified file, na kung saan ay walang ang lahat ng mga puting espasyo at mga komento, at ito ay lamang 32 kB.

45
00:02:31,540 --> 00:02:33,600
Kaya napakadali lamang sa itaas na bigla papunta sa iyong web page

46
00:02:33,600 --> 00:02:35,910
at lamang upang simulan ang paggamit nito.

47
00:02:35,910 --> 00:02:39,630
Ito ay din napaka mahusay nakasulat, kaya hindi ito tumagal ng maraming -

48
00:02:39,630 --> 00:02:42,550
hindi ito nagpapabagal sa website magkano kapag ginagamit mo ito.

49
00:02:42,550 --> 00:02:45,770
Ito ay nagbibigay-daan sa iyo ipatupad ang mga bagay na nauna nang unfeasible.

50
00:02:45,770 --> 00:02:47,790
Mayroong ilang mga aspeto ng pag-andar,

51
00:02:47,790 --> 00:02:51,780
tulad ng paglikha ng mga animation, na normal ay magiging napaka, napakahirap gawin.

52
00:02:51,780 --> 00:02:54,300
Ngunit sa jQuery ang mga ito ay talagang napaka-simple.

53
00:02:54,300 --> 00:02:57,040
At mayroong ilang mga bagay na nakakainis na gawin,

54
00:02:57,040 --> 00:02:59,610
maaari sa JavaScript, tulad ng pagpapadala ng isang POST kahilingan,

55
00:02:59,610 --> 00:03:02,190
ngunit upang magpadala ng isang kahilingan sa isang server, kailangan mong isulat

56
00:03:02,190 --> 00:03:04,320
lima o anim o pitong linya ng code.

57
00:03:04,320 --> 00:03:07,200
Ngayon ay maaari mo lamang gawin ito sa isang solong linya ng code, sa isang solong tawag function.

58
00:03:07,200 --> 00:03:11,790
Iyon talaga pinapasimple ng maraming mga bagay-bagay na ginagawa mo.

59
00:03:11,790 --> 00:03:15,950
At lahat ng mga cool na bata ay gumagamit nito. Sa pamamagitan ng na, ibig sabihin ko sa akin.

60
00:03:15,950 --> 00:03:19,270
Sa aking huling proyekto noong nakaraang taon, na kung saan ay news.whrb.org,

61
00:03:19,270 --> 00:03:22,530
na kung saan ay para sa mga istasyon ng radyo, nilikha ko ang blog na ito

62
00:03:22,530 --> 00:03:29,750
na nagho-host ng lahat ng mga palabas na ginawa namin at mga MP3 files para sa kanila.

63
00:03:29,750 --> 00:03:32,070
Maaari kang mag-browse sa pamamagitan ng mga nakalipas na mga palabas,

64
00:03:32,070 --> 00:03:34,130
at ang lahat ng tapos na ito gamit ang jQuery. Maaari mong sabihin

65
00:03:34,130 --> 00:03:37,340
dahil sa lahat ng mga animation, mahalagang.

66
00:03:37,340 --> 00:03:42,360
Kaya kung mayroon kang - kung lumilikha ka ng isang bagong post,

67
00:03:42,360 --> 00:03:45,980
makita mo ang mga maliit slideDowns; na lahat tapos gamit jQuery.

68
00:03:45,980 --> 00:03:49,140
At ito Fade - upang ang uri ng mga bagay-bagay ay tapos na ang lahat ng gamit jQuery,

69
00:03:49,140 --> 00:03:52,720
at hindi mo na kailangang patuloy na i-reload ang pahina upang mag-navigate sa site.

70
00:03:52,720 --> 00:03:57,220
Isa pang cool na bagay na ginawa gamit ang jQuery ay ang pagtatanghal na ito.

71
00:03:57,220 --> 00:03:59,700
Ginagamit ko ang bukas na bagay na tinatawag na pinagmulan scrolldeck,

72
00:03:59,700 --> 00:04:03,250
na kung saan may isang taong nagsulat sa tuktok ng jQuery.

73
00:04:03,250 --> 00:04:04,870
Kung talagang tingnan ang source, maaari mong makita na

74
00:04:04,870 --> 00:04:07,830
ginagamit nila ito dollar sign; palatandaan dollar

75
00:04:07,830 --> 00:04:12,110
ay ginagamit sa jQuery upang magpahiwatig na ang isang function na ay isang jQuery function.

76
00:04:12,110 --> 00:04:15,020
Kaya sila ng pagtukoy sa isang wrapper sa tuktok ng jQuery

77
00:04:15,020 --> 00:04:18,570
na nagbibigay-daan sa iyo upang makagawa ng isang pagtatanghal na tulad nito,

78
00:04:18,570 --> 00:04:21,200
at maaari mong makita na dito sila ay kabilang ang orihinal na file jQuery,

79
00:04:21,200 --> 00:04:24,120
na kung saan ay kung ano ang kailangan mong isama kung gusto mong gamitin ang jQuery

80
00:04:24,120 --> 00:04:30,450
sa iyong sariling website.

81
00:04:30,450 --> 00:04:32,790
>> Pagpindot sa na, paano mo i-install ito?

82
00:04:32,790 --> 00:04:36,150
Maaari kang pumunta lamang sa jQuery.com at i-download ang file,

83
00:04:36,150 --> 00:04:38,320
idagdag ito sa isang direktoryo ng web at isama ito.

84
00:04:38,320 --> 00:04:42,200
Kaya lang sa tuktok, sa head tag sa iyong HTML file

85
00:04:42,200 --> 00:04:45,400
ng iyong pangunahing HTML file, na lang ay na linya ng code

86
00:04:45,400 --> 00:04:49,490
kasama ang tamang bersyon para sa kung aling bersyon ng jQuery ginagamit mo.

87
00:04:49,490 --> 00:04:51,340
Maaari mong i-download ito sa pamamagitan ng pagpunta sa jQuery.com,

88
00:04:51,340 --> 00:04:55,130
i-click ang "i-download ang jQuery," at mayroon ka nito. Iyan na ang lahat.

89
00:04:55,130 --> 00:04:58,880
At talagang, maaari naming tumingin sa kung ano ang mukhang.

90
00:04:58,880 --> 00:05:01,080
Kung nag-click sa i-download dito, jQuery ay ito.

91
00:05:01,080 --> 00:05:05,260
Ito ay isa lamang malaking JavaScript file na ginagawa ng lahat ng mga magic bagay-bagay para sa iyo.

92
00:05:05,260 --> 00:05:09,270
Ito ang minified bersyon, na kung saan ay hindi nababasa sa lahat.

93
00:05:09,270 --> 00:05:13,180
Maaari mo ring tingnan ang bersyon na pag-unlad, na kung saan ay nababasa

94
00:05:13,180 --> 00:05:15,370
ngunit pa rin napaka, napaka-napakahabang.

95
00:05:15,370 --> 00:05:17,980
Ito ay may maraming mga bagay-bagay sa doon.

96
00:05:17,980 --> 00:05:20,240
Maaari ka ring mag-link sa na-host na bersyon ng Google ng mga ito.

97
00:05:20,240 --> 00:05:23,820
Kaya na kailangan payagan mo lang umasa sa Google na bigyan ito.

98
00:05:23,820 --> 00:05:29,310
Nagbibigay ang mga ito sa bawat bersyon ng ito, magagamit sa lahat ng oras.

99
00:05:29,310 --> 00:05:31,530
Kaya maaari mong malamang na umaasa sa Google upang i-host ito para sa iyo.

100
00:05:31,530 --> 00:05:33,270
O maaari mong i-link sa jQuery sariling pinakabagong bersyon.

101
00:05:33,270 --> 00:05:36,400
Mayroon silang isang URL na palaging update sa pinakabagong bersyon.

102
00:05:36,400 --> 00:05:40,850
Ito ay jQuery-pinakabagong, at mayroong isang problema sa na,

103
00:05:40,850 --> 00:05:44,350
na kung saan ay kung na-update na jQuery at ang ilan sa mga naunang pag-andar

104
00:05:44,350 --> 00:05:47,250
sila ay nagiging retrograded o tinutulan,

105
00:05:47,250 --> 00:05:49,620
hindi ito May-May ito upang simulan ang hindi makapag-suportado na ngayon.

106
00:05:49,620 --> 00:05:52,940
Kaya kung ka magsulat ng isang website gamit ang bersyon 1.8.2,

107
00:05:52,940 --> 00:05:55,000
sa pamamagitan ng mga oras na bersyon 2.7 ay out

108
00:05:55,000 --> 00:05:57,000
ang ilan sa mga pag-andar ka nagsulat ay hindi gumagana na ngayon.

109
00:05:57,000 --> 00:05:59,930
Kaya ito ay mas mahusay na lamang upang i-download ang file na 32 kB,

110
00:05:59,930 --> 00:06:04,100
ilagay ito sa iyong web page, at makikita ito gumagana nang permanente.

111
00:06:04,100 --> 00:06:07,450
>> Pupunta ako sa sige at simulan ang pakikipag-usap tungkol sa mga aktwal na pag-andar ng jQuery.

112
00:06:07,450 --> 00:06:13,090
Ang unang bagay ay ang tagapili. Ito ay kung ano ang jQuery ay una conceived na magbigay.

113
00:06:13,090 --> 00:06:15,500
At maaari mong i-click sa dokumentasyon upang tumingin sa

114
00:06:15,500 --> 00:06:18,690
ang detalyadong papeles para sa tagapili ng pupuntahan ko ay sumasaklaw.

115
00:06:18,690 --> 00:06:24,120
Ang ideya sa likod ng tagapili ay maaari mong piliin ang HTML na mga elemento sa isang pahina.

116
00:06:24,120 --> 00:06:28,790
Mga elemento sa isang pahina na may mga ID at mga klase at iba pang mga aspeto pagkilala sa kanila.

117
00:06:28,790 --> 00:06:30,500
Mayroon ding - they're sa iba't ibang ayos.

118
00:06:30,500 --> 00:06:32,570
Ang ilan sa mga oras na sila ay nested sa loob ng bawat isa.

119
00:06:32,570 --> 00:06:38,120
JQuery nagpapahintulot sa iyo na bumuo ng mga simpleng query na mabawi ang mga elemento mula sa pahina.

120
00:06:38,120 --> 00:06:41,890
Pagkatapos ay maaari mong manipulahin ang mga elementong ito gamit ang jQuery-andar,

121
00:06:41,890 --> 00:06:43,990
kung saan ay ang pagmamanipula ng seksyon Makakapagsimula na kami mamaya.

122
00:06:43,990 --> 00:06:46,040
Maaari mong baguhin ang HTML, baguhin ang CSS,

123
00:06:46,040 --> 00:06:50,500
maaari mo ring bigyang-buhay at magdagdag ng pag-andar na buhayin sa mga tiyak na mga kaganapan.

124
00:06:50,500 --> 00:06:52,710
Kaya, halimbawa, kung ang isang bagay-click ito, gusto ka ng isang bagay na mangyayari,

125
00:06:52,710 --> 00:06:55,210
maaari mong gawin iyon gamit ang jQuery pati na rin.

126
00:06:55,210 --> 00:06:57,380
At mayroong isang malaking bilang ng mga paraan upang pumili ng mga elemento.

127
00:06:57,380 --> 00:07:00,310
Karamihan sa kanila ay hindi ko ginamit, subalit doon ay ang mga pangunahing mga bago,

128
00:07:00,310 --> 00:07:02,340
na kung saan ay medyo mahalaga.

129
00:07:02,340 --> 00:07:05,750
Ang mga elemento ng selector, halimbawa, kung lamang ka ng pagpili ng kahit ano

130
00:07:05,750 --> 00:07:10,640
iyon ay isang div - ko talagang magkaroon ng code na bukas para sa pagtatanghal na ito slide.

131
00:07:10,640 --> 00:07:13,450
Kaya, halimbawa, narito ang unang slide.

132
00:07:13,450 --> 00:07:17,430
Narito kami ay may isang div. Kung kami talaga piliin ang lahat ng mga divs sa pahina,

133
00:07:17,430 --> 00:07:22,300
Makikita lamang ito magbibigay sa amin ng isang array ng lahat ng mga divs na umiiral sa file na ito.

134
00:07:22,300 --> 00:07:27,040
Ang ID selector ay nagbibigay-daan sa iyo piliin ang anumang bagay na may ibinigay na ID.

135
00:07:27,040 --> 00:07:32,230
Kaya kung ito, halimbawa, mga bagay na ito ay may mga ID "ano,"

136
00:07:32,230 --> 00:07:37,160
at kung ginawa namin ito na may # ano sa halip ng ilang mga ID,

137
00:07:37,160 --> 00:07:42,920
Gusto ito bumalik lamang ng isang array na may isang solong elemento at iyon ay ang elemento ng pahina.

138
00:07:42,920 --> 00:07:45,490
Maaari din naming pagsamahin ang tagapili ng paraang ito sa pamamagitan ng pagkakaroon

139
00:07:45,490 --> 00:07:48,260
lamang piliin ang mga bagay na may ID na divs.

140
00:07:48,260 --> 00:07:51,810
Kaya oo. Piliin lang ang mga divs na mayroon na ID.

141
00:07:51,810 --> 00:07:55,260
Para sa klase mo lamang gumamit ng isang tuldok, ito ay ang parehong bagay bilang CSS.

142
00:07:55,260 --> 00:07:57,500
Inapo ay gagana rin; kaya kung mayroon kang ilang mga klase

143
00:07:57,500 --> 00:08:00,170
at ito ay nested mga elemento sa loob nito - sa gayon, halimbawa,

144
00:08:00,170 --> 00:08:03,260
mayroong ilang mga klase at mayroon itong isang anchor tag na mag-link sa isa pang pahina,

145
00:08:03,260 --> 00:08:08,510
maaari mong gamitin ang syntax na ito upang makuha ang link.

146
00:08:08,510 --> 00:08:12,420
Maaari ka ring pumili ng maramihang mga bagay nang sabay-sabay; lamang ihiwalay ang mga ito sa pamamagitan ng mga kuwit,

147
00:08:12,420 --> 00:08:17,360
gumamit ng anumang selector gusto mo, at ikaw ay piliin ang lahat ng mga ito nang sabay-sabay, sa isang solong array.

148
00:08:17,360 --> 00:08:19,650
At pagkatapos ay mayroon ding mga hindi selector, sa gayon maaari mong piliin ang lahat ng divs

149
00:08:19,650 --> 00:08:24,210
na hindi magkakaroon ng ilang partikular na klase.

150
00:08:24,210 --> 00:08:28,790
At ito lamang ay isang kapaki-pakinabang na paraan upang makakuha ng isang panimula sa kung paano ang piliang ito ay gumagana.

151
00:08:28,790 --> 00:08:32,270
Kukunin ko ipakita ang ilang mga kongkreto halimbawa sa isang segundo.

152
00:08:32,270 --> 00:08:35,480
>> Advanced na tagapili ng mga - ang mga ito ay ilan sa mga halimbawa.

153
00:08:35,480 --> 00:08:38,840
May mga dose-dosenang mga ito, ngunit kung nais mong piliin ang lahat ng mga tag ng larawan

154
00:08:38,840 --> 00:08:42,799
sa loob ng ilang mga elemento, pagkatapos mo lamang gawin: larawan.

155
00:08:42,799 --> 00:08:45,340
Kung gusto mong piliin ang kahit na mga elemento, halimbawa, kung mayroong 20 sa mga ito,

156
00:08:45,340 --> 00:08:48,290
Gusto mo bang piliin 0, 2, 4, 6 at iba pa,

157
00:08:48,290 --> 00:08:51,630
gawin mo: kahit na, o maaari mo ring gawin: kakaiba.

158
00:08:51,630 --> 00:08:55,470
Ito ang mga palsipikado tagapili, na nangangahulugan na sila talaga compute

159
00:08:55,470 --> 00:09:00,960
bawat iba pang mga elemento sa halip na lamang ng pagpunta at pagpili sa lahat ng mga ito.

160
00:09:00,960 --> 00:09:05,510
Maaari mo ring - bawat elemento ay maaari ring magkaroon ng tiyak na mga katangian.

161
00:09:05,510 --> 00:09:10,580
Kaya, halimbawa, class = center din ang isang katangian.

162
00:09:10,580 --> 00:09:16,500
Para sa ang tag na ito anchor, href, hypertext reference, ay isang katangian din.

163
00:09:16,500 --> 00:09:21,150
Kaya maaari mong piliin ang isang bagay na mga link sa isang partikular na pahina o lamang - ito ay talagang pangkalahatan.

164
00:09:21,150 --> 00:09:25,410
Maaari kang pumili ng anumang bagay na may anumang mga katangian na gusto mo.

165
00:09:25,410 --> 00:09:27,470
At pagkatapos, din, attribute ay naglalaman ng.

166
00:09:27,470 --> 00:09:30,420
Kung, halimbawa, gusto upang piliin ang lahat ng mga elemento ng pag-input

167
00:09:30,420 --> 00:09:32,700
na mayroon ang salitang "pass" bilang pangalan ng mga ito,

168
00:09:32,700 --> 00:09:37,560
kung ang isang pahina ay may isang input bloke ng teksto

169
00:09:37,560 --> 00:09:41,050
na tinatawag na "password," na nais maging isang paraan na maaari mong piliin na.

170
00:09:41,050 --> 00:09:43,020
At mayroong maraming higit pa. Maaari mong sige at tingnan ang dokumentasyon

171
00:09:43,020 --> 00:09:46,950
at makita ang partikular na mga halimbawa ng kung paano ito gumagana.

172
00:09:46,950 --> 00:09:48,840
>> Ang susunod na bagay ay ang DOM pagmamanipula.

173
00:09:48,840 --> 00:09:52,500
Pagkatapos piliin namin ang mga elemento, kami ay nais upang aktwal na gawin ang mga bagay-bagay sa kanila.

174
00:09:52,500 --> 00:09:55,500
Sa ngayon hindi pa namin ay tumingin sa na sa lahat, ngunit kung tumingin ka sa papeles,

175
00:09:55,500 --> 00:09:57,950
doon talaga ng maraming na maaari naming gawin.

176
00:09:57,950 --> 00:10:02,900
Sa puntong ito, kami ay pagpunta upang piliin ang mga elemento sa pagtatanghal na ito

177
00:10:02,900 --> 00:10:04,890
at manipulahin ang mga ito gamit ang jQuery.

178
00:10:04,890 --> 00:10:08,290
Dahil ito ay ipinatupad gamit ang jQuery, kami ay may access sa jQuery library,

179
00:10:08,290 --> 00:10:13,580
at maaari naming gamitin ang mga function sa loob ng code na ito.

180
00:10:13,580 --> 00:10:16,200
Isang kapaki-pakinabang na bagay na hindi mo maaaring malaman tungkol sa ay ang console.

181
00:10:16,200 --> 00:10:19,340
At ang Google Chrome ay kung ano ang ginagamit ko. Maaari mong pindutin ang alt utos J

182
00:10:19,340 --> 00:10:21,720
o alt control J upang buksan ang console.

183
00:10:21,720 --> 00:10:26,130
Sa Firefox tingin ko ito utos ng shift K o kontrol shift K.

184
00:10:26,130 --> 00:10:28,880
Sa Safari mayroon kang pumunta sa baguhin ang ilang mga setting.

185
00:10:28,880 --> 00:10:35,460
Mayroong isang link na ito kung gusto mong gawin ito, ngunit inirerekumenda ko ang pagkuha ng Chrome o Firefox.

186
00:10:35,460 --> 00:10:37,750
Kaya sabihin buksan ang console, ito ay down na dito.

187
00:10:37,750 --> 00:10:41,170
Ito ay nagbibigay-daan sa iyo talaga upang lamang gawin ang anumang nais mo.

188
00:10:41,170 --> 00:10:45,100
Kaya maaari mong i-type lamang sa lumikha ng isang variable na tinatawag na x,

189
00:10:45,100 --> 00:10:49,200
x = 5, sabihin makita kung ano ang x + 2 ay.

190
00:10:49,200 --> 00:10:57,670
Kahit mo maaaring gawin ang isang bagay tulad ng CS + hayaan ang makita, + x 45, na magiging CS50.

191
00:10:57,670 --> 00:11:00,530
Maaari mo lamang gawin ang ilang karaniwang mga bagay-bagay JavaScript.

192
00:11:00,530 --> 00:11:02,730
Ngunit maaari mo ring gawin jQuery in dito.

193
00:11:02,730 --> 00:11:06,200
>> Kaya tingnan natin ang unang aspeto dito.

194
00:11:06,200 --> 00:11:09,500
Kami ay pagpunta upang lumikha ng isang variable na tinatawag na HTML, na isang string.

195
00:11:09,500 --> 00:11:15,890
Ito ay may isang talata na tag sa loob nito, na tinatawag na ang ilang mga bagong teksto.

196
00:11:15,890 --> 00:11:19,420
Kaya mayroon kaming ito HTML, ito ang ilang mga bagong teksto, sa mga tag talata.

197
00:11:19,420 --> 00:11:21,800
Ngayon namin talagang gusto upang idagdag ito sa ang pahina.

198
00:11:21,800 --> 00:11:28,310
I-set up ito sa gayon ang HTML para sa talatang ito, ang pamagat dito, ay Magkabit ng ID.

199
00:11:28,310 --> 00:11:32,320
Kung pinili namin Magkabit ng ID at pagkatapos ay isama ito sa

200
00:11:32,320 --> 00:11:34,560
ang HTML variable ko lang ginawa,

201
00:11:34,560 --> 00:11:40,370
ito ay idagdag na HTML sa dulo, kanan matapos ang tag na talata.

202
00:11:40,370 --> 00:11:43,730
Kaya kung gagawin namin na - namin napili ang talatang ito,

203
00:11:43,730 --> 00:11:47,590
at kami na tinatawag na Magkabit ng function na may mga HTML variable ko lang ang naidagdag,

204
00:11:47,590 --> 00:11:50,960
ay ito na magdagdag ng mga bagong teksto doon sa pahina.

205
00:11:50,960 --> 00:11:54,970
Maaari din namin prepend, na nangangahulugang ito ay pumunta bago, sa simula ng na elemento.

206
00:11:54,970 --> 00:11:58,290
Kaya mayroong ilang mga bagong teksto sa simula at pagkatapos.

207
00:11:58,290 --> 00:12:01,660
Maaari ko sige at i-refresh upang makakuha ng mapupuksa ang mga bagay-bagay na ito lamang ko na tapos na.

208
00:12:01,660 --> 00:12:05,280
Ngunit iyon lamang ang isang halimbawa kung paano maaari mong gamitin ang prepend at ikabit ang mga pamamaraan

209
00:12:05,280 --> 00:12:08,910
upang manipulahin ang mga bagay-bagay sa pahina, magdagdag ng ilang mga HTML.

210
00:12:08,910 --> 00:12:11,080
>> Maaari mo ring baguhin ang mga klase.

211
00:12:11,080 --> 00:12:14,970
Bumalik sa ganitong estilo file, na aking nilikha ito para sa mga klase panalo

212
00:12:14,970 --> 00:12:19,990
na may Kulay ng teksto ng pula, ang ilang mga kulay ng background, at isang text anino.

213
00:12:19,990 --> 00:12:23,810
Mukhang kahindik-hindik, ngunit maaari ko talaga -

214
00:12:23,810 --> 00:12:26,410
talata na ito ay tumutugon sa class na ID.

215
00:12:26,410 --> 00:12:29,860
Kaya ang maaari kong idagdag ang mga klase para sa panalo.

216
00:12:29,860 --> 00:12:31,870
Maaari ko bang isakatuparan ito sa console,

217
00:12:31,870 --> 00:12:35,480
at iyon ay magdadagdag na klase, at ngayon ito mukhang kahindik-hindik, tulad ng inaasahan.

218
00:12:35,480 --> 00:12:39,680
Ang CSS ay makakakuha ng awtomatikong mailalapat sa mga klase mo na -

219
00:12:39,680 --> 00:12:42,680
kung mayroong CSS para sa isang klase, ito ay makakakuha ng awtomatikong ilalapat

220
00:12:42,680 --> 00:12:44,680
kung babaguhin mo ang klase ng isang elemento.

221
00:12:44,680 --> 00:12:49,230
Pagkatapos ay maaari naming alisin lamang ito gamit alisin class.

222
00:12:49,230 --> 00:12:53,690
Kaya kung mayroon kang ilang mga paunang-natukoy na mga klase tulad ng red o highlight,

223
00:12:53,690 --> 00:12:55,990
at pagkatapos ay nais mong mag-apply sa mga elemento,

224
00:12:55,990 --> 00:12:58,230
hindi mo na kailangang gawin ang lahat ng CSS estilo bawat oras.

225
00:12:58,230 --> 00:13:01,510
Maaari mong idagdag lamang ang klase sa isang sangkap, at pagkatapos ay awtomatiko nitong maging -

226
00:13:01,510 --> 00:13:05,580
awtomatiko itong tumingin naaangkop para sa na klase.

227
00:13:05,580 --> 00:13:07,900
Maaari din naming alisin ang mga bagay; kaya ako pupunta upang piliin ang lahat ng mga divs

228
00:13:07,900 --> 00:13:10,830
sa pahina at alisin ang mga ito.

229
00:13:10,830 --> 00:13:13,990
Ano ay na pagpunta sa hitsura?

230
00:13:13,990 --> 00:13:16,170
Ito ay pagpunta sa hitsura walang anuman, kaya walang tunay na walang kaliwa.

231
00:13:16,170 --> 00:13:18,170
Aking mga pagtatanghal ay nawala.

232
00:13:18,170 --> 00:13:21,290
Maaari ko bang i-refresh at dalhin ito pabalik, sa kabutihang-palad,

233
00:13:21,290 --> 00:13:24,420
dahil lamang ito ay tumatakbo sa isang beses,

234
00:13:24,420 --> 00:13:29,460
ngunit na ang isang halimbawa ng pag-alis, kung nais mong ganap na sirain ang isang elemento off ang pahina.

235
00:13:29,460 --> 00:13:33,180
>> Maaari mo ring patungan, at ako pupunta upang piliin ang lahat ng mga tag talata sa pahina

236
00:13:33,180 --> 00:13:36,850
at pumunta sa loob ng mga ito at palitan ang kahit anong teksto mayroon silang sa kanila

237
00:13:36,850 --> 00:13:39,690
lang sa mga salitang "pagsubok."

238
00:13:39,690 --> 00:13:46,520
Kung gagawin mo ito, makikita mo palitan ang bawat talata sa pahina na may ganitong pagsubok.

239
00:13:46,520 --> 00:13:49,150
Yep. Lahat ng mga ito ay pinalitan ng mga pagsubok.

240
00:13:49,150 --> 00:13:53,270
Kaya na ang isang halimbawa ng pag-access ng teksto at patungan ito.

241
00:13:53,270 --> 00:13:57,490
Maaari mo ring makuha ang impormasyon, at ito ay talagang cool na para sa mga kahon ng input.

242
00:13:57,490 --> 00:14:00,470
Kung mayroon kang isang input box na ang mga tao ay pag-type ng mga bagay-bagay sa,

243
00:14:00,470 --> 00:14:03,880
mga tao ay pag-type ng mga bagay-bagay sa ito,

244
00:14:03,880 --> 00:14:09,030
dito kami piliin ang input, ang anumang mga input tag na may isang uri ng teksto.

245
00:14:09,030 --> 00:14:13,800
Sa kasong ito, mayroon lamang isang input box para sa buong pagtatanghal,

246
00:14:13,800 --> 00:14:17,260
kaya namin lamang piliin ang unang isa, at pagkatapos namin tumawag sa Val sa function na ito.

247
00:14:17,260 --> 00:14:19,570
Iyon ay magbabalik ng mga halaga, at para sa isang input box,

248
00:14:19,570 --> 00:14:24,330
ang halaga ay lamang ano ang mangyayari sa maging sa loob nito.

249
00:14:24,330 --> 00:14:31,880
Kaya kung gagawin namin ito, ito lamang ay magbabalik ng mga bagay-bagay string.

250
00:14:31,880 --> 00:14:36,860
At kung tinatawag namin itong muli pagkatapos magsulat ng maraming mga bagay-bagay, ito lumiliko sa higit pang mga bagay-bagay.

251
00:14:36,860 --> 00:14:40,760
Iyan ay isang mahusay na paraan upang ma-access ang mga elemento ng isang input box, at pagkatapos suriin,

252
00:14:40,760 --> 00:14:45,060
ito ay isang wastong email address, ito ay isang may-bisang petsa, halimbawa.

253
00:14:45,060 --> 00:14:49,600
Maaari mo lamang makuha ang mga bagay-bagay agad bilang mga tao ay pag-type ito,

254
00:14:49,600 --> 00:14:54,830
at pagkatapos ay tingnan kung ito ay wasto, ipadala ito pabalik sa isang server, gawin ang anumang nais mo sa mga ito.

255
00:14:54,830 --> 00:14:57,720
At na kung paano mo ma-access kung ano ang nasa loob ng mga kahon.

256
00:14:57,720 --> 00:15:00,090
>> Maaari mo ring baguhin ang CSS direkta, kaya sa halip ng pagdaragdag

257
00:15:00,090 --> 00:15:02,510
isang klase na may ilang mga paunang-natukoy na mga katangian,

258
00:15:02,510 --> 00:15:08,120
maaari mong idagdag lamang ang CSS kahit anong gusto mo sa anumang bagay.

259
00:15:08,120 --> 00:15:10,350
Kaya natin piliin ang katawan, kung saan ay ang buong pagtatanghal,

260
00:15:10,350 --> 00:15:14,370
at kulay ay ang ari-arian na tumutukoy sa kung ano ang kulay ng teksto sa ay.

261
00:15:14,370 --> 00:15:19,420
Kung namin baguhin ito sa pula, ang lahat ng teksto sa pahina na ito ay magpapasara sa pula.

262
00:15:19,420 --> 00:15:26,310
Maaari naming gawin ang isang bagay tulad ng kulay ng background bughaw,

263
00:15:26,310 --> 00:15:30,680
doon kami pumunta; ito ay maganda.

264
00:15:30,680 --> 00:15:33,840
Maaari mong gawin ang anumang nais mo na may ito.

265
00:15:33,840 --> 00:15:39,250
Paggamit ng mga ari-arian ng CSS, maaari mo talagang baguhin ang anumang bagay kung paano hitsura sa anumang oras.

266
00:15:39,250 --> 00:15:41,630
Ang susunod na bagay ay ang mga epekto.

267
00:15:41,630 --> 00:15:45,710
Effect ay talaga ang parehong bagay bilang ng pagbabago sa CSS,

268
00:15:45,710 --> 00:15:48,870
ngunit sila talaga magbigay ng ilang dagdag na animation dito.

269
00:15:48,870 --> 00:15:53,380
Kaya sa halip ng pagpapakita lamang o pagtatago ng isang bagay o pagbabago ng kulay,

270
00:15:53,380 --> 00:15:56,130
Maaari mong aktwal na gawin itong animated.

271
00:15:56,130 --> 00:16:00,760
Narito ang dokumentasyon, kung gusto mong kumuha ng isang pagtingin sa mga malawak na dokumentasyon para dito.

272
00:16:00,760 --> 00:16:04,760
Ngunit ako pupunta upang masakop ang mga pangunahing mga bago.

273
00:16:04,760 --> 00:16:12,030
Mayroong ang show at itago katangian.

274
00:16:12,030 --> 00:16:14,510
Ipakita / itago ang ID aktwal na tumutugon sa ito buong kahon,

275
00:16:14,510 --> 00:16:18,190
kaya kung ako itago ito, ito lamang mawala.

276
00:16:18,190 --> 00:16:24,210
At maaari kong ipakita ito muli kapag gusto kong gawin itong bumalik.

277
00:16:24,210 --> 00:16:26,340
At ito ay bumalik. Hindi nito talagang mawala,

278
00:16:26,340 --> 00:16:30,670
Hindi ko talagang alisin ito mula sa pahina, ko lang i-set ang CSS ari-arian ng kakayahang makita sa mga nakatagong

279
00:16:30,670 --> 00:16:34,030
kaya hindi mo ito makikita.

280
00:16:34,030 --> 00:16:39,250
Mayroong din pataas ang slide at slide paibaba; na nagbibigay-daan sa iyo upang magkaroon ng epekto ito.

281
00:16:39,250 --> 00:16:47,050
Ito slide hanggang sa mawala, at pagkatapos mawala ito

282
00:16:47,050 --> 00:16:53,210
maaari mong padausdusin ito pababa upang gawin itong bumalik. At ngayon ito ay bumalik.

283
00:16:53,210 --> 00:16:57,650
Mayroon ding ito Fade epekto, na kung saan - Fade ID ay tumutugon sa kahon na ito.

284
00:16:57,650 --> 00:17:01,200
Kung ako manlabo ito, pagkatapos ay magkakaroon ito ng dahan-dahan mawala.

285
00:17:01,200 --> 00:17:04,490
Maaari ko ring manlabo ito sa, at ito ay bumalik.

286
00:17:04,490 --> 00:17:08,930
Maaari mo ring gawin Fade sa, na kung saan ay tiyak na ang Fade function.

287
00:17:08,930 --> 00:17:12,589
Maaari kang magkaroon ng ito fade sa anumang partikular opacity na gusto mo.

288
00:17:12,589 --> 00:17:16,869
Kaya kung nag-fade ito dahan-dahan sa 0.5, ito ay magiging half nakikita.

289
00:17:16,869 --> 00:17:22,630
Ang maaari kong gawin itong pumunta sa 0.1, at pabalik sa 1 upang gawin itong ganap na nakikita muli.

290
00:17:22,630 --> 00:17:24,760
Iyon ay isa lamang na animation na maaari mong gawin.

291
00:17:24,760 --> 00:17:26,750
>> Mayroon ding mga toggle ang effect.

292
00:17:26,750 --> 00:17:33,410
Kaya ako pupunta upang piliin ang mga toggle ID, na tumutugon sa kahon na ito,

293
00:17:33,410 --> 00:17:38,970
at sa div na maaari mong tawagan toggle; kung ito ay nakikita itong maging invisible,

294
00:17:38,970 --> 00:17:42,320
kung ito ay hindi maaaring makita ito ay maging nakikita muli.

295
00:17:42,320 --> 00:17:44,440
Kaya ko lang tinatawag na ito toggle function na dalawang beses; ang unang isa ay

296
00:17:44,440 --> 00:17:48,380
ang parehong bagay bilang itago, ang pangalawang tawag ay ang parehong bagay bilang isang show.

297
00:17:48,380 --> 00:17:53,510
At maaari mo ring gawin ito na may isang Fade toggle,

298
00:17:53,510 --> 00:17:55,730
kung saan ang ipinapakita ng parehong bagay, maliban ito talaga fades.

299
00:17:55,730 --> 00:17:59,410
At parehong bagay sa mga slide magpalipat-lipat.

300
00:17:59,410 --> 00:18:01,460
Mayroong chained effect pati na rin, na nangangahulugang

301
00:18:01,460 --> 00:18:05,520
kung pipiliin mo ang isang elemento at tawagan lamang ng grupo ng mga pamamaraan ng animation sa ito,

302
00:18:05,520 --> 00:18:07,400
kung ginusto ito upang manlabo out, pagkatapos ay i-slide paibaba,

303
00:18:07,400 --> 00:18:11,040
at pagkatapos ay itago at pagkatapos ay i-fade sa, ito ay gawin ang mga ito sa isang hilera.

304
00:18:11,040 --> 00:18:24,920
Kaya nawala, ay dumating likod - para sa ilang kadahilanan, ang itago ay hindi mangyayari.

305
00:18:24,920 --> 00:18:30,030
Tayo'y subukan ito. Oo, kaya kupas out at pagkatapos ay slid ito ang layo.

306
00:18:30,030 --> 00:18:32,230
At maraming marami pa. Maaari mong gamitin ang function na bigyang-buhay

307
00:18:32,230 --> 00:18:35,370
upang lumikha ng iyong sariling mga animation, na kung saan ay medyo kumplikado,

308
00:18:35,370 --> 00:18:38,790
ngunit ito ay nagbibigay sa iyo ng walang katapusan na posibilidad na pahabain.

309
00:18:38,790 --> 00:18:40,630
Maaari kang gumawa ng anumang uri ng animation na gusto mo.

310
00:18:40,630 --> 00:18:44,230
Maaari mo ring gamitin queue sa queue up ng maramihang mga animation sa isang pagkakataon.

311
00:18:44,230 --> 00:18:47,340
Kaya kung nais mo ng isang bagay upang lumipad sa buong pahina,

312
00:18:47,340 --> 00:18:49,860
slide mula sa tuktok na kanan sa kaliwa ibaba, maaari mong gawin iyon,

313
00:18:49,860 --> 00:18:55,240
at lamang magkaroon ng isang bungkos ng mga aksyon ng pagpunta sa isa pagkatapos ng iba.

314
00:18:55,240 --> 00:18:57,490
>> Ang susunod na bagay na kami ay pagpunta sa makipag-usap tungkol sa mga kaganapan ay.

315
00:18:57,490 --> 00:19:02,090
Mga Kaganapan daan sa iyo - sa ngayon, lamang namin ang na-type ng mga bagay sa console

316
00:19:02,090 --> 00:19:04,870
at iyon ay isang paraan upang gawin ito mangyari,

317
00:19:04,870 --> 00:19:08,020
ngunit sa isang aktwal na pahina, hindi ka pagpunta sa magagawang

318
00:19:08,020 --> 00:19:10,020
gawin ang mga bagay na uri ng user sa console.

319
00:19:10,020 --> 00:19:12,050
Gusto mong bagay upang awtomatikong mangyari.

320
00:19:12,050 --> 00:19:18,060
Para sa na, kailangan mong gumamit ng mga kaganapan na buhayin sa ilang mga tiyak na mangyari kaganapan.

321
00:19:18,060 --> 00:19:21,340
Maaari mong tingnan ang dokumentasyon para sa buong detalye.

322
00:19:21,340 --> 00:19:24,030
Kaya natin makita. Gusto naming itago o ipakita ang kahon,

323
00:19:24,030 --> 00:19:29,340
ngunit sa ngayon ang pindutan na ito ay hindi gumawa ng anumang bagay dahil hindi ko ipatupad ito pa.

324
00:19:29,340 --> 00:19:35,420
Pupunta ako upang pumunta sa aktwal na pahina ng HTML.

325
00:19:35,420 --> 00:19:38,560
Narito ang slide. Mayroong isang div para sa mga slide.

326
00:19:38,560 --> 00:19:41,230
Ito ay may klase ng slide.

327
00:19:41,230 --> 00:19:46,890
Mayroong teksto ng. Ngayon, mayroong kahon na ito at ang kahon na pindutan.

328
00:19:46,890 --> 00:19:52,900
Paano namin talagang gawin ito mawala?

329
00:19:52,900 --> 00:19:58,250
Una sa lahat, sabihin magsulat ng isang function na ginagawang ang kahon ID mawala.

330
00:19:58,250 --> 00:20:01,820
Ito ang syntax para sa funtion, sabihin lamang tumawag ito hideTheBox.

331
00:20:01,820 --> 00:20:06,130
Hindi ito gumawa ng anumang argumento, dahil walang mga argumento upang madala.

332
00:20:06,130 --> 00:20:08,950
Maaari naming piliin ang kahon ID.

333
00:20:08,950 --> 00:20:15,020
Kaya gamit ang jQuery piliin, maaari naming piliin ang kahon ID,

334
00:20:15,020 --> 00:20:17,700
at pagkatapos lamang gawin itong mawala.

335
00:20:17,700 --> 00:20:20,690
Natin gawin itong fade out.

336
00:20:20,690 --> 00:20:27,390
Kung namin ang bumangga ito sa function na ang aktwal na console,

337
00:20:27,390 --> 00:20:33,380
maaari naming tukuyin ang mga function na ito; maaari naming tumawag hideTheBox, at ito ay gumagana.

338
00:20:33,380 --> 00:20:36,650
Pero gusto naming ito upang mangyari kapag ang pindutan ay aktwal na pinindot.

339
00:20:36,650 --> 00:20:40,950
Upang gawin iyon, mayroon kaming upang gamitin ang isang kaganapan.

340
00:20:40,950 --> 00:20:45,500
Upang isailalim sa isang kaganapan sa ilang mga tukoy na pindutan o ang ilang mga aksyon mangyari,

341
00:20:45,500 --> 00:20:50,040
kami ay may upang piliin ang mga sangkap na kaganapan ang magpapalitaw -

342
00:20:50,040 --> 00:20:52,650
o na magpapalitaw sa mga kaganapan, paumanhin.

343
00:20:52,650 --> 00:20:57,220
>> Kaya una sa lahat, sabihin piliin ang kahon sa ID pindutan

344
00:20:57,220 --> 00:20:59,610
dahil iyon ang pindutan, at ngayon, para na pindutan,

345
00:20:59,610 --> 00:21:02,750
nais namin na lumikha ng isang animation kapag ito ay na-click.

346
00:21:02,750 --> 00:21:05,040
Kaya mayroong click na ito function.

347
00:21:05,040 --> 00:21:08,470
Ito ay nagbibigay-daan sa iyo upang panagutin ang isa pang function na ito.

348
00:21:08,470 --> 00:21:12,320
Function na ito ay tumatagal ng isa pang pag-andar bilang isang argument

349
00:21:12,320 --> 00:21:14,310
maaari naming pumasa sa function na hideTheBox,

350
00:21:14,310 --> 00:21:20,950
at kailanman pindutan na ito ay na-click, function na ay awtomatikong execute.

351
00:21:20,950 --> 00:21:24,850
Kaya ito ay gagana kung namin i-save ito, makikita ko i-refresh,

352
00:21:24,850 --> 00:21:33,460
at - isang segundo, Sorry.

353
00:21:33,460 --> 00:21:44,770
Hayaan akong ayusin ito talagang mabilis.

354
00:21:44,770 --> 00:21:50,680
Okay. Nagkaroon kami pumunta. Kaya ngayon ang box ay mawala kapag kami i-click ang pindutan.

355
00:21:50,680 --> 00:21:55,470
Maaari din naming baguhin ito upang lamang fadeToggle,

356
00:21:55,470 --> 00:22:00,020
baguhin ito lamang upang itago o ipakita ang kahon,

357
00:22:00,020 --> 00:22:03,850
at ito ay gumagana rin masyadong, kung i-refresh namin.

358
00:22:03,850 --> 00:22:08,550
Maaari naming itago ito, maaari rin naming ipakita dito, at iyon ay patuloy na gagana.

359
00:22:08,550 --> 00:22:12,210
Isa pang bagay na maaari naming gawin ay, hindi namin talagang may upang tukuyin ito function na hideTheBox

360
00:22:12,210 --> 00:22:15,050
bago tinatawag naming ang pag-click function.

361
00:22:15,050 --> 00:22:17,640
Kaya sa halip ng pagtukoy sa mga function at pagtawag hideTheBox,

362
00:22:17,640 --> 00:22:20,310
lamang kami ng pagpunta sa tumawag ito kung ang bagay na ito ay na-click.

363
00:22:20,310 --> 00:22:22,310
Kaya maaari naming tukuyin ang mga ito nang hindi nagpapakilala sa dito,

364
00:22:22,310 --> 00:22:25,070
na kung saan ay isang tampok na may JavaScript.

365
00:22:25,070 --> 00:22:29,720
Maaari mong tukuyin ang isang function; normal, gusto naming sabihin function na hideTheBox

366
00:22:29,720 --> 00:22:34,490
may mga argumento, ngunit sa halip, maaari naming lamang sabihin gumana walang argumento,

367
00:22:34,490 --> 00:22:36,870
simulan ang kulot suhay upang tukuyin ang pag-andar,

368
00:22:36,870 --> 00:22:40,780
isara na kulot suhay, at pagkatapos lamang tukuyin ang mga function na sa dito,

369
00:22:40,780 --> 00:22:45,130
sa loob ng unang panaklong at ang huling panaklong

370
00:22:45,130 --> 00:22:47,860
na tumutugon sa mga argumento ng function na-click.

371
00:22:47,860 --> 00:22:53,320
Kaya kami ay pagpasa sa function na ito, maaari naming kopyahin ito linya ng code dito mismo,

372
00:22:53,320 --> 00:22:55,450
at iyon ay gawin ang mga eksaktong parehong bagay.

373
00:22:55,450 --> 00:22:57,290
At ngayon, wala kaming ganitong random function na fadeTheBox

374
00:22:57,290 --> 00:22:59,960
na nakaupo sa paligid para sa walang maliwanag na dahilan.

375
00:22:59,960 --> 00:23:02,070
Ang function na ay tinukoy ng di-kilalang tao, ito ay hindi magkaroon ng isang pangalan.

376
00:23:02,070 --> 00:23:08,060
Ito ay lamang kapag execute namin click ang pindutan sa kahon.

377
00:23:08,060 --> 00:23:12,180
Kaya nagre-refresh nang isang beses pa, isa pang beses, at maaari mong makita na ito ay gumagana pa rin.

378
00:23:12,180 --> 00:23:16,700
At na kung paano mo gumawa ng mga kaganapan.

379
00:23:16,700 --> 00:23:19,190
>> May ng maraming iba't ibang mga kaganapan na maaari naming gamitin.

380
00:23:19,190 --> 00:23:23,540
Pupunta ako upang lumipat pabalik sa paggamit ng console lamang upang ipakita sa iyo kung paano ang mga trabaho.

381
00:23:23,540 --> 00:23:28,210
Ang mga ID para sa bawat isa sa mga tumutugon sa bawat kahon.

382
00:23:28,210 --> 00:23:33,020
Kaya ang kahon na ito ay i-click ang ID, ang isang ito ay key ID, at ang isang ito ay mouse ID.

383
00:23:33,020 --> 00:23:36,120
Isa pang bagay ay na mayroong sa pagkilos na ito function na; sa halip na mag-type ito sa bawat oras,

384
00:23:36,120 --> 00:23:41,610
Ako talagang nagpunta lang at tinukoy ang pagkilos na ito function na pababa dito.

385
00:23:41,610 --> 00:23:46,860
Ginagawa nito ang parehong bagay bilang ang function na hideTheBox.

386
00:23:46,860 --> 00:23:51,340
Ito ay nakakakuha sa kahong ito at sa alinman fades ito o ito fades in

387
00:23:51,340 --> 00:23:54,110
At iyon ang dahilan kung bakit hindi namin magagawang gamitin ito dito.

388
00:23:54,110 --> 00:24:00,350
Kaya kung namin i-click ang ID na ito click, nais naming gumawa ng box ang nawawala o lumabas na muli.

389
00:24:00,350 --> 00:24:03,610
Ito ay ang parehong bagay bilang ang pindutan na nagkaroon kami sa huling slide.

390
00:24:03,610 --> 00:24:07,450
Ngayon pagkatapos tinatawag naming na, maaari naming i-click ito at kahon ang mawawala,

391
00:24:07,450 --> 00:24:10,160
pagkatapos ay i-click ito muli at ang kahon ay muling lilitaw.

392
00:24:10,160 --> 00:24:12,480
Iyan ay medyo simple. Double-click ang ipinapakita ng parehong bagay,

393
00:24:12,480 --> 00:24:15,660
maliban ito ay nangangailangan ng isang double-click.

394
00:24:15,660 --> 00:24:19,030
Kaya kung nag-click ka sa mga ito nang isang beses at i-click ito muli walang mangyayari,

395
00:24:19,030 --> 00:24:21,140
ngunit kung i-double click mabilis, magkakaroon ito mawala.

396
00:24:21,140 --> 00:24:23,310
Kung double-click muli, ito ay bumalik.

397
00:24:23,310 --> 00:24:25,250
Kaya na medyo simple.

398
00:24:25,250 --> 00:24:31,170
Keyboard input ay uri ng kakaiba; palagay ko ay hindi ito talagang gumagana sa halimbawang ito

399
00:24:31,170 --> 00:24:37,670
dahil ang key pababa, pataas key at pindutin ang key at iba pang mahahalagang mga aksyon

400
00:24:37,670 --> 00:24:47,190
buhayin ang walang mahalaga kung ano ang elemento isailalim mo.

401
00:24:47,190 --> 00:24:51,410
Halimbawa, kahit na ako nakatali key pababa sa katawan o ibang bagay nang ganap,

402
00:24:51,410 --> 00:24:55,950
pagkatapos ay gusto pa rin itong gawing aktibo man - ito ay hindi tiyak.

403
00:24:55,950 --> 00:25:00,190
Hindi ko kailangang pag-click sa ito at pindutin ang key upang gumawa ng kahit ano mawala.

404
00:25:00,190 --> 00:25:04,470
Gusto itong i-activate alintana ng kung ano ang elemento Ako ay kasalukuyang in

405
00:25:04,470 --> 00:25:06,880
Kaya ang mga hindi talaga gumana sa halimbawang ito

406
00:25:06,880 --> 00:25:13,180
dahil hindi nito makilala ako bilang ng pagpasok ng input sa div keyboard input.

407
00:25:13,180 --> 00:25:15,740
>> Ngunit kung titingnan mo ang mga pagkilos ng mouse,

408
00:25:15,740 --> 00:25:19,620
ang unang isa ay mag-hover, at maaari itong gawin ang ilan sa mga ito gamit ang CSS.

409
00:25:19,620 --> 00:25:24,280
Kung gumagamit ka ng CSS, maaari kang lumikha ng ito upang kung mag-hover ka sa ibabaw ng isang bagay,

410
00:25:24,280 --> 00:25:28,940
pagkatapos nito estilo pagbabago.

411
00:25:28,940 --> 00:25:32,170
Ngunit gamit ang jQuery maaari mong baguhin ang mga estilo ng iba pang mga bagay pati na rin.

412
00:25:32,170 --> 00:25:37,120
Kaya, halimbawa, kami ay pagpunta sa tumawag pagkilos kung mag-hover sa ibabaw namin ito div.

413
00:25:37,120 --> 00:25:39,660
Iyon ay nangangahulugang kung mag-hover sa ibabaw namin ito, pagkatapos ay ang kahon mawawala.

414
00:25:39,660 --> 00:25:42,430
Kung ililipat namin ang layo mula dito, ang mga kahon ay muling lilitaw.

415
00:25:42,430 --> 00:25:45,090
Kung tinatawag naming ito at mag-hover sa ito, ang kahon ay nawala,

416
00:25:45,090 --> 00:25:47,050
at sa lalong madaling ilipat namin ang layo, ito ay bumalik.

417
00:25:47,050 --> 00:25:49,750
Kung tinatawag naming ito hover sa function na ang ID mouse,

418
00:25:49,750 --> 00:25:54,380
na kung saan ay tumutugon sa kahon na ito, pagkatapos ay kung kami mag-hover sa kahon,

419
00:25:54,380 --> 00:26:00,440
pagkatapos box ang aktwal na mawala - ito ay pagiging funky sa ngayon, ngunit -

420
00:26:00,440 --> 00:26:06,310
kung ililipat namin ang layo mula sa ito, ito ay muling lilitaw. Sa ngayon ito ay paurong para sa ilang kadahilanan.

421
00:26:06,310 --> 00:26:12,720
Ang mouse at ipasok ang mouse ilipat ang function ay medyo katulad na, ngunit bahagyang naiiba.

422
00:26:12,720 --> 00:26:16,470
Mouse ipasok lamang aktibo kapag ang mouse ay nagpasok ng kahon, tulad ng inaasahan.

423
00:26:16,470 --> 00:26:19,210
Kaya't kung ikaw ay naglalakbay sa ito, kailangan mawala ang mga ito.

424
00:26:19,210 --> 00:26:23,210
Ngunit hindi ito ay muling lilitaw kapag nilipat mo ang layo; kailangan mong ilipat pabalik papunta ito para dito upang bumalik.

425
00:26:23,210 --> 00:26:25,590
Mayroon ding ang mouse function na ilipat, na kung saan ay buhayin

426
00:26:25,590 --> 00:26:29,300
tuwing ang mouse ay kahit na naroroon sa kahon.

427
00:26:29,300 --> 00:26:32,430
Kaya magkakaroon ito lamang panatilihin sa pagpunta, dahan in at out.

428
00:26:32,430 --> 00:26:35,660
At talagang ito ay pag-log - ito tila lamang ito ay dahan in at out,

429
00:26:35,660 --> 00:26:39,140
pero sa totoo ito ay pag-log ng maraming higit pang mga pagkilos kaysa ito,

430
00:26:39,140 --> 00:26:43,550
kaya kapag nilipat mo ang layo magkakaroon ito lamang panatilihin ang pagpunta dahil naka-log tulad ng isang libong ng mga ito.

431
00:26:43,550 --> 00:26:46,620
Siguro hindi isang thousand. Siguro lima.

432
00:26:46,620 --> 00:26:50,200
Nag log ng higit sa na.

433
00:26:50,200 --> 00:26:53,280
Ang punto ay, ang lahat ng mga pagkilos ng mouse, may mga ng maraming mga ito.

434
00:26:53,280 --> 00:26:55,480
Maaari mong basahin up sa iba pang mga bago, ngunit ang mga ito ay ang lahat ng mga bahagyang naiiba,

435
00:26:55,480 --> 00:26:57,700
at maaari kang pumili ng alinman ang isa na kailangan mo

436
00:26:57,700 --> 00:27:02,130
para sa alinman ang tiyak na layunin na sinusubukan mong gawin.

437
00:27:02,130 --> 00:27:05,060
>> Ang susunod na bagay na pupuntahan ko pag-uusapan ay ang AJAX.

438
00:27:05,060 --> 00:27:09,340
AJAX, alam ko hindi namin ginawa masakop ang JavaScript sa bilang magkano ang lalim ng taong ito,

439
00:27:09,340 --> 00:27:11,770
kaya lang ako pagpunta sa makipag-usap tungkol sa AJAX sa pangkalahatan para sa isang minuto.

440
00:27:11,770 --> 00:27:15,210
AJAX ay nakatayo para sa Asynchronous JavaScript at XML.

441
00:27:15,210 --> 00:27:19,030
Talaga Ito ay, halimbawa, kapag handa ka sa Facebook at ito pushes ka ng abiso,

442
00:27:19,030 --> 00:27:23,060
iyon ay dahil sa AJAX ay tumatakbo sa iyong web browser.

443
00:27:23,060 --> 00:27:25,800
Ang bawat pares ng mga segundo sa iyong web browser ay talagang

444
00:27:25,800 --> 00:27:29,420
pagpunta sa Facebook mga server, pagtatanong sa kanila, huwag mayroon kang anumang bagay bagong para sa akin,

445
00:27:29,420 --> 00:27:31,980
at pagkatapos ito ay bumalik sa iyo.

446
00:27:31,980 --> 00:27:36,320
Ito ay nagbibigay-daan sa iyo upang magpadala ng mga kahilingan sa isang server

447
00:27:36,320 --> 00:27:38,660
nang hindi aktwal na pagkakaroon upang i-load ang pahina.

448
00:27:38,660 --> 00:27:42,040
Kaya normal, kung lamang ka gamit ang PHP at isang database,

449
00:27:42,040 --> 00:27:45,480
mayroon kang upang i-refresh ang pahinang ito bago maaari kang makakuha ng bagong impormasyon mula sa server.

450
00:27:45,480 --> 00:27:48,770
Ngunit gamit ang AJAX, maaari mong hilahin na para sa bagong impormasyon Patuloy,

451
00:27:48,770 --> 00:27:52,250
o hilahin para dito kapag nag-click sa isang pindutan o anumang bagay tulad na.

452
00:27:52,250 --> 00:27:56,140
Kaya ito ay nagbibigay-daan sa amin upang magpadala ng mga kahilingan nang walang i-reload ang pahina,

453
00:27:56,140 --> 00:27:58,130
at maaari naming gamitin ang alinman GET o POST kahilingan.

454
00:27:58,130 --> 00:28:05,370
>> Kumuha ng mga request ay, halimbawa, kung ka upang i-Google.com

455
00:28:05,370 --> 00:28:10,900
at gagawin q = test. Na nagbibigay sa kanila ng isang query pagsubok.

456
00:28:10,900 --> 00:28:15,890
At iyon ay isang Kumuha ng kahilingan dahil ito ay ang pagpasa sa mga parameter sa URL mismo.

457
00:28:15,890 --> 00:28:19,250
Isang POST kahilingan ay bilang kung ipinapadala mo ang mga ito sa pamamagitan ng post.

458
00:28:19,250 --> 00:28:22,500
Ito ay tulad ng inilagay mo ito sa isang sulat at ipadala ang mga ito off sa kanila,

459
00:28:22,500 --> 00:28:25,140
ngunit hindi sila talaga makita ang mga nilalaman. Ang mga ito ay hindi makikita sa URL.

460
00:28:25,140 --> 00:28:31,040
Hindi direkta mo maaaring i-type ito; mayroon kang upang ipadala ito halos lihim.

461
00:28:31,040 --> 00:28:33,880
Ito ay sa isang post.

462
00:28:33,880 --> 00:28:38,660
Ngunit gamit ang jQuery, maaari mong gawin GET at POST kahilingan

463
00:28:38,660 --> 00:28:42,740
mas madali kaysa sa karaniwan mong ma gamit lamang plain JavaScript.

464
00:28:42,740 --> 00:28:50,140
Maaari mong i-query gamit ang mga API GET kahilingan, at maaari mo ring tingnan para sa impormasyon sa pag-login.

465
00:28:50,140 --> 00:28:54,400
Sa susunod na pahina, nilikha ko ito, na nagtatanong ng, "Ano para sa tanghalian?"

466
00:28:54,400 --> 00:28:58,230
gamit ang Harvard pagkain API, kaya sabihin na hilahin pataas.

467
00:28:58,230 --> 00:29:01,840
Ito ay lamang ng isang halimbawa ng kung paano maaari mong gamitin ang jQuery upang gawin ang isang GET kahilingan sa isang API

468
00:29:01,840 --> 00:29:04,200
at kumuha ng impormasyon pabalik mula dito.

469
00:29:04,200 --> 00:29:07,090
Kaya gusto namin upang makita ang mga menu para sa araw na ito,

470
00:29:07,090 --> 00:29:10,560
at gusto naming makita kung ano ang para sa tanghalian.

471
00:29:10,560 --> 00:29:16,500
Narito ang URL upang lumikha ng isang GET kahilingan sa jQuery.

472
00:29:16,500 --> 00:29:18,600
gamitin mo ang $. makakuha ng function.

473
00:29:18,600 --> 00:29:22,290
Ang unang argument ay ang URL, kaya eksakto kung ano ang querying.

474
00:29:22,290 --> 00:29:27,200
Pagkatapos ng susunod na argumento ay isang function na executes kapag ang Kumuha ng kahilingan ay kumpleto na.

475
00:29:27,200 --> 00:29:29,980
Kaya mong ipadala off ang ilang mga kahilingan sa server, maghintay para dito upang bumalik.

476
00:29:29,980 --> 00:29:33,770
Kapag ito ay bumalik, ikaw ay pagpunta sa tumagal ng ilang mga aksyon na may data na bumalik mula sa server.

477
00:29:33,770 --> 00:29:37,520
Sabihin sige at code na ito pati na rin.

478
00:29:37,520 --> 00:29:42,110
Hindi ko code na ito alinman, planado.

479
00:29:42,110 --> 00:29:46,660
Narito ang TODO. Una sa lahat, gamitin natin ang kaganapan nagbubuklod

480
00:29:46,660 --> 00:29:50,820
kaya na pindutan kapag ito ay pipi, nagpapadala kami sa off isang Kumuha ng kahilingan.

481
00:29:50,820 --> 00:29:53,410
At kapag na GET babalik kahilingan na may ilang mga data,

482
00:29:53,410 --> 00:29:57,290
kami ay pagpunta sa isulat ito sa pagkain na ito div info ID.

483
00:29:57,290 --> 00:30:02,860
Una sa lahat, sabihin piliin ang mga pagkain ID button.

484
00:30:02,860 --> 00:30:07,320
Kapag nag-click ito, gusto naming ito upang gawin ang isang bagay.

485
00:30:07,320 --> 00:30:11,930
Sabihin lang gawin itong isang hindi nakikilalang fuction, tulad ng dati.

486
00:30:11,930 --> 00:30:15,550
Puwede I-wrap ang mga kulot tirante,

487
00:30:15,550 --> 00:30:18,530
at kapag ang pindutan na ito ay pipi, gusto naming magpadala ng GET kahilingan

488
00:30:18,530 --> 00:30:20,750
upang suriin kung ano ang para sa tanghalian.

489
00:30:20,750 --> 00:30:24,970
Upang gawin iyon, maaari naming i-type lamang sa $. Makakuha.

490
00:30:24,970 --> 00:30:28,850
Ito ay isang jQuery function, gamit ang dollar sign.

491
00:30:28,850 --> 00:30:31,430
Tatagal ng ilang mga argumento. Ang unang isa ay ang URL,

492
00:30:31,430 --> 00:30:34,450
ang ikalawa ay ang callback function, ang pagpapaandar na tinatawag na

493
00:30:34,450 --> 00:30:37,740
kapag binanggit na aktwal na nagbabalik.

494
00:30:37,740 --> 00:30:39,890
Sabihin lamang bumuo ng ang URL muna.

495
00:30:39,890 --> 00:30:44,650
Maaari naming makakuha ng ito mula sa API na sinulat ni David up.

496
00:30:44,650 --> 00:30:51,360
Pupunta dito, maaari naming makita na ito ay food.cs50.net/api/1.3/menus,

497
00:30:51,360 --> 00:30:54,140
at pagkatapos mo lamang pumasa sa mga pangalan ng mga parameter na iyong nais.

498
00:30:54,140 --> 00:30:57,760
Kaya 1 parameter value ay 1.

499
00:30:57,760 --> 00:31:00,910
Mukhang standard petsa, petsa ng simula, nagde-default sa ngayon

500
00:31:00,910 --> 00:31:03,110
kung hindi ka nagpasok ng anumang bagay, at petsa ng pagtatapos din mga default

501
00:31:03,910 --> 00:31:05,930
sa araw na ito kung hindi mo ipasok ang kahit ano.

502
00:31:05,930 --> 00:31:10,790
Iyon ay kung ano ang gusto namin. Gusto naming lamang makuha ang impormasyon para sa ngayon.

503
00:31:10,790 --> 00:31:12,950
>> Gusto naming ang format na nasa JSON.

504
00:31:12,950 --> 00:31:15,570
Iyon lamang arbitrary; maaari mong gamitin ang anumang paraan na nais mo.

505
00:31:15,570 --> 00:31:18,950
Maaari mong gamitin ang CSV, ngunit JSON ay pagtatanda JavaScript Bagay.

506
00:31:18,950 --> 00:31:24,150
Ito ay napakadali para JavaScript upang maunawaan kung ano ang ibig sabihin nito,

507
00:31:24,150 --> 00:31:27,110
at maaari naming i-print ito nang mas madali na paraan.

508
00:31:27,110 --> 00:31:30,490
Kaya sabihin humiling ito sa JSON, at kahilingan tanghalian natin.

509
00:31:30,490 --> 00:31:37,660
Kaya meal = tanghalian. Lamang na magsulat up ang URL na iyon, pumunta namin pabalik dito.

510
00:31:37,660 --> 00:31:41,290
Mayroong mga menu. Ang unang parameter ay ang output = JSON

511
00:31:41,290 --> 00:31:44,640
dahil iyon ang kung ano ang gusto namin, at ihiwalay mo ang mga parameter na may isang 'and.'

512
00:31:44,640 --> 00:31:48,940
Ang pangalawang parameter - Hindi ko matandaan.

513
00:31:48,940 --> 00:31:52,170
Meal. At gusto namin na meal = tanghalian.

514
00:31:52,170 --> 00:31:57,390
Maaari mong subukan ang URL na ito sa pamamagitan ng pag-type ito sa iyong browser at pagpunta sa ito.

515
00:31:57,390 --> 00:32:03,120
Ito ay magbibigay sa iyo ng ilang mga output. Ito ay lamang ng grupo ng mga bagay-bagay na para sa tanghalian.

516
00:32:03,120 --> 00:32:10,410
Ito ay sa ito pangit na format. Gusto naming i-print ito sa aming mga pahina sa isang mas mahusay na format.

517
00:32:10,410 --> 00:32:12,580
Kaya ang URL ay tama, ngayon pa lang namin na kailangang magsulat ng isang function

518
00:32:12,580 --> 00:32:18,300
upang tumawag pabalik kapag ang kahilingan ay matagumpay.

519
00:32:18,300 --> 00:32:20,430
Function na ito ay aktwal na tumagal ng isang argumento. Magiging data.

520
00:32:20,430 --> 00:32:25,650
Ang data ay kung ano ang isa ay bumalik mula sa Kumuha ng mga kahilingan pagkatapos ng GET kahilingan ay tapos na.

521
00:32:25,650 --> 00:32:28,860
Maaari naming gawin ang kulot tirante; in dito namin isulat ang hindi kilalang function na

522
00:32:28,860 --> 00:32:33,900
na executes, gamit ang data na iyon kapag makuha namin ang impormasyon pabalik.

523
00:32:33,900 --> 00:32:37,840
Kaya data, kapag kami nag-type sa URL na ito,

524
00:32:37,840 --> 00:32:41,540
ito ay kung ano ang data pupuntahan hitsura. Ito ay pagpunta sa maging ang malaking string.

525
00:32:41,540 --> 00:32:48,610
Ngunit ang magandang bagay ay, maaari JavaScript parse ito sa pamamagitan ng paggamit ng function na JSON.parse.

526
00:32:48,610 --> 00:32:54,950
Kaya sabihin lumikha ng isang bagong variable na tinatawag na pag-parse ng data.

527
00:32:54,950 --> 00:32:57,060
At parse ng data ay isang hanay ng mga bagay.

528
00:32:57,060 --> 00:33:04,200
Ang bawat bagay ay naglalaman ng impormasyon tulad ng - na rin, sabihin kumuha ng isang hitsura.

529
00:33:04,200 --> 00:33:08,980
Ito ay may isang petsa, isang pagkain, kategorya, recipe, ang lahat ng mga ito ng iba pang mga bagay-bagay.

530
00:33:08,980 --> 00:33:10,860
Kaya sabihin lang i-print ang pangalan para sa bawat isa.

531
00:33:10,860 --> 00:33:13,790
Sabihin umulit sa ibabaw ng buong hanay ng mga bagay-bagay na makuha namin pabalik mula dito,

532
00:33:13,790 --> 00:33:17,570
at lamang i-print ang bawat isa - i-print ang pangalan ng bawat isa.

533
00:33:17,570 --> 00:33:22,670
Ito ay isang para sa loop.

534
00:33:22,670 --> 00:33:26,030
>> JavaScript ay may kapaki-pakinabang na ito syntax kung saan maaari kang lumikha ng isang variable at loop sa ibabaw ng isang array,

535
00:33:26,030 --> 00:33:30,150
at var i lamang ang iterator, kaya sa halip ng pagkakaroon na gawin var i = 0,

536
00:33:30,150 --> 00:33:40,290
i ay mas mababa kaysa sa haba, i + +, maaari mo lamang gawin var i-parse sa data.

537
00:33:40,290 --> 00:33:47,060
Sa halimbawang ito, parse data (i) ay tumutugma sa mga kasalukuyang mga elemento

538
00:33:47,060 --> 00:33:49,850
ng array, ang aktwal na bagay.

539
00:33:49,850 --> 00:33:51,720
At gusto namin upang makuha ang mga pangalan out ng ito.

540
00:33:51,720 --> 00:33:54,170
Kaya sabihin lamang gawin pangalan.

541
00:33:54,170 --> 00:33:57,000
At ang huling bagay ay, kami ay pagpunta sa may ilang mga jQuery muli.

542
00:33:57,000 --> 00:34:02,660
Talaga idagdag ito sa div, ito pagkain div info na kasalukuyang walang laman.

543
00:34:02,660 --> 00:34:05,430
Kaya sabihin na pumili.

544
00:34:05,430 --> 00:34:13,870
Gagamitin namin ang jQuery at piliin ang pagkain info div ID, o pagkain ng impormasyon ID, paumanhin.

545
00:34:13,870 --> 00:34:16,580
Gusto naming ikabit sa ito.

546
00:34:16,580 --> 00:34:21,030
Kung ginawa namin test, halimbawa, ito ay magdudulot lamang patungan ito bawat solong oras.

547
00:34:21,030 --> 00:34:29,190
Kaya maaari naming ikabit lang ito.

548
00:34:29,190 --> 00:34:31,889
Ang kasalukuyang elemento sa array, susuriin namin ang pangalan out ng ito,

549
00:34:31,889 --> 00:34:38,159
at kami ikabit ito sa dulo ng pagkain div info ID.

550
00:34:38,159 --> 00:34:40,120
At pagkatapos lamang upang gumawa ng hitsura nito mas malinis,

551
00:34:40,120 --> 00:34:51,550
gagamitin din namin ikabit ang isang line break kaya hindi lahat sa isang linya.

552
00:34:51,550 --> 00:34:55,280
Kaya kung ang lahat napupunta rin, na dapat ay handa na upang -

553
00:34:55,280 --> 00:34:57,220
una sa lahat, sa tuwing pindutan na ito ay na-click,

554
00:34:57,220 --> 00:35:00,070
ito ay magpadala-off ang isang GET kahilingan sa URL na ito.

555
00:35:00,070 --> 00:35:02,500
Kapag ang data ay bumalik mula sa ito, kailangan itong i-parse ito,

556
00:35:02,500 --> 00:35:06,950
i-on ito sa JSON, loop sa buong array na kumakatawan sa data na iyon,

557
00:35:06,950 --> 00:35:10,310
at pagkatapos ay isama ang pangalan at isang line break

558
00:35:10,310 --> 00:35:16,500
sa bawat linya sa ID na ito meal ng impormasyon na dati ay walang laman.

559
00:35:16,500 --> 00:35:18,910
Kaya pagpunta bumalik sa pahinang ito, ire-refresh namin,

560
00:35:18,910 --> 00:35:23,690
click, malaman - hindi ito gumana. Iyon ay kapus-palad.

561
00:35:23,690 --> 00:35:25,830
At ito ay kung saan ay pag-debug in

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

563
00:35:30,070 --> 00:35:57,210
Iyan ay nakawiwili.

564
00:35:57,210 --> 00:35:59,720
Ang lahat ng mga karapatan, na rin, sa halip na patagalin ang paggawa na ito, lamang pupuntahan ko

565
00:35:59,720 --> 00:36:07,070
hilahin pataas ang nagagawa file na mayroon akong, kung saan ay ang natapos na bersyon.

566
00:36:07,070 --> 00:36:13,710
Hindi ako sigurado kung ano ang pagkakaiba ay, ngunit maaari naming lamang buksan ito up sa halip.

567
00:36:13,710 --> 00:36:19,740
At kami pumunta sa AJAX, at ito ay dapat na gumana nang tama.

568
00:36:19,740 --> 00:36:21,730
Iyon ay kung ano ang tanghalian para sa araw na ito,

569
00:36:21,730 --> 00:36:24,870
sa walang partikular na pagkakasunod-sunod, na may mga quote sa palibot nito, kaya hindi ang prettiest.

570
00:36:24,870 --> 00:36:27,090
Subalit, malinaw naman, kung ang iyong ginagawa ito para sa isang pangwakas na proyekto,

571
00:36:27,090 --> 00:36:30,120
Gusto mong gawin itong mas mahusay na hitsura.

572
00:36:30,120 --> 00:36:32,530
Ngunit ito lamang ay isang simpleng halimbawa ng kung paano gagawin mo ang Kunin ang kahilingan.

573
00:36:32,530 --> 00:36:34,580
At kung tinitingnan namin ang aktwal na code, ako sa paghula, ako ay medyo sigurado

574
00:36:34,580 --> 00:36:39,690
pa ito sa medyo magkano ang parehong.

575
00:36:39,690 --> 00:37:04,990
Oh, nakalimutan ko i-convert ito sa isang string, na ito.

576
00:37:04,990 --> 00:37:07,920
Hindi, pa rin ito ay hindi gumagana. Maging ano pa man, narito ang aktwal na nakumpleto code

577
00:37:07,920 --> 00:37:10,300
para sa kung ano ito ay dapat magmukhang,

578
00:37:10,300 --> 00:37:16,400
at ginagawa nito ang parehong bagay tulad ng kung ano ko lang ipinatupad.

579
00:37:16,400 --> 00:37:22,760
Kapag nag-click ka sa pindutan, ginagamit nito GET JSON upang awtomatikong i-parse ang data.

580
00:37:22,760 --> 00:37:29,190
Tatagal ang data pabalik mula dito at sa pamamagitan ng mga loop ang buong array

581
00:37:29,190 --> 00:37:32,770
at mga print out ang - kahit anong para sa tanghalian ngayon, ang pangalan ng ito,

582
00:37:32,770 --> 00:37:38,020
at nagkakabit ng isang line break na pagkatapos ng bawat linya.

583
00:37:38,020 --> 00:37:41,100
Iyon ay kung paano mo ginagamit ang function na makakuha ng.

584
00:37:41,100 --> 00:37:44,040
>> Maaari mo ring gamitin POST, na hindi ko magkaroon ng panahon

585
00:37:44,040 --> 00:37:47,940
upang sumulat ng tungkol sa isang halimbawa para dito, ngunit maaari naming tumingin sa papeles.

586
00:37:47,940 --> 00:37:53,220
Kung tumingin ka sa jquery.post,

587
00:37:53,220 --> 00:37:55,510
Maaari mong makita na ito ay halos ang parehong bagay.

588
00:37:55,510 --> 00:38:01,650
Mayroon kang isang URL, ngunit sa halip ng pagpasa sa mga parameter ng gumagamit ng -

589
00:38:01,650 --> 00:38:03,990
lamang ng paglalagay ng mga ito sa mga string para sa URL mismo,

590
00:38:03,990 --> 00:38:06,300
mayroon kang upang pumasa ito sa variable na data

591
00:38:06,300 --> 00:38:11,990
iyon ay isa lamang ng isang array, isang diksyunaryo ng mga mapa na mga parameter sa mga halaga.

592
00:38:11,990 --> 00:38:17,690
Pumasa ka na sa, at na nagpapadala ng mga ito sa paggamit ng POST.

593
00:38:17,690 --> 00:38:20,790
At sa sandaling mayroon ka na, pagkatapos ay maaari kang magkaroon ng isang function na tagumpay

594
00:38:20,790 --> 00:38:23,930
na executes kapag ang data ay bumalik.

595
00:38:23,930 --> 00:38:26,430
Kung hindi man, ito ay eksaktong pareho. Kaya gamit ang POST,

596
00:38:26,430 --> 00:38:29,970
baka gusto mong gamitin ang POST, halimbawa, kung mayroon kang isang paraan ng pag-input

597
00:38:29,970 --> 00:38:35,780
Hinahayaan ka ng mga tao ang mga password sa pag-input ito, at ipadala ang mga password off

598
00:38:35,780 --> 00:38:41,850
sa iyong back-end script, mag-check in sa database kung ang user na iyon ay may-bisa o hindi.

599
00:38:41,850 --> 00:38:46,700
Maaari mong gawin na ang lahat ng gamit jQuery sa halip ng pagkakaroon upang i-refresh ang pahinang ito sa lahat.

600
00:38:46,700 --> 00:38:52,160
Iyon ay kung paano ko naipatupad sa blog na aking ipinakita sa iyo ang mas maaga.

601
00:38:52,160 --> 00:38:59,530
Kung kami pumunta sa portal ng pagtatapos at mag-log out, mag-log out,

602
00:38:59,530 --> 00:39:02,600
Mag-log out ay hindi gumagana.

603
00:39:02,600 --> 00:39:13,360
Well, ipaalam sa akin lamang buksan ito up sa isang bagong window.

604
00:39:13,360 --> 00:39:16,580
Narito doon ay isang password, at ako ay pagpunta sa i-type sa isang bagay random.

605
00:39:16,580 --> 00:39:18,590
Hindi ito gumagana, ngunit maaari mong makita na ginawa namin hindi

606
00:39:18,590 --> 00:39:20,840
talaga mayroon upang i-refresh ang pahinang ito sa lahat.

607
00:39:20,840 --> 00:39:24,610
Ang code, kung gusto mong tumingin sa mga ito,

608
00:39:24,610 --> 00:39:37,460
lahat ay magagamit sa dito.

609
00:39:37,460 --> 00:39:45,680
Kaya ang code ko ay sumulat noong nakaraang taon noong una.

610
00:39:45,680 --> 00:39:47,790
Tulad ng iyong nakikita dito, ipinapadala namin sa isang POST kahilingan.

611
00:39:47,790 --> 00:39:50,400
Mayroon akong isang file na tinatawag na login.php sa likod ng pagtatapos,

612
00:39:50,400 --> 00:39:53,860
na sumusuri kung ang password ay wasto.

613
00:39:53,860 --> 00:39:56,000
Ang mga parameter pumasa kami sa mga password, map sa

614
00:39:56,000 --> 00:40:00,030
ang input na ito sa input box kasalukuyan.

615
00:40:00,030 --> 00:40:04,110
At kapag ang data ay bumalik, namin suriin.

616
00:40:04,110 --> 00:40:07,680
Kung ang data ay hindi totoo, at pagkatapos ay sabihin namin hindi tamang password, padausdusin ito pababa,

617
00:40:07,680 --> 00:40:09,580
at lamang gawin ito pagkatapos mawala na.

618
00:40:09,580 --> 00:40:12,320
Kung hindi man, kami ay i-load ang pahina ng admin.

619
00:40:12,320 --> 00:40:15,080
At ito ay ang lahat ng tapos na gamit ang JSON.

620
00:40:15,080 --> 00:40:18,510
Sa maraming mga linya ng code, maaari mo lamang pumasa ang data sa likod ng pagtatapos,

621
00:40:18,510 --> 00:40:21,020
tingnan kung ito ay tama, i-check mo kung naka-log in nang tama,

622
00:40:21,020 --> 00:40:24,200
at aktwal na tumugon sa mga ito, mare-redirect ang tao sa tamang pahina

623
00:40:24,200 --> 00:40:29,760
o hindi pagpapaalam sa kanila mag-log in at nagsasabi sa kanila na sila ay nagkaroon ng hindi tamang password.

624
00:40:29,760 --> 00:40:33,040
Kaya na ang isang halimbawa ng kung paano maaari mong gamitin jQuery POST

625
00:40:33,040 --> 00:40:37,010
upang magpadala ng POST kahilingan sa iyong likod ng pagtatapos,

626
00:40:37,010 --> 00:40:42,400
check kung ang isang tao ay naka-log in nang tama.

627
00:40:42,400 --> 00:40:44,820
>> Ang lahat ng mga karapatan, sa gayon na ang lahat ng mga halimbawa ko ay nagkaroon, at ang lahat ng mga bagay-bagay Nais kong upang masakop.

628
00:40:44,820 --> 00:40:47,110
Iyon ang mga pangunahing bagay na jQuery nagpapahintulot sa iyo na gawin:

629
00:40:47,110 --> 00:40:52,640
piliin ang mga elemento, baguhin ang mga ito gamit ang DOM pagmamanipula,

630
00:40:52,640 --> 00:40:56,340
maaari kang magdagdag ng mga epekto, buhayin ang mga bagay sa mga tiyak na mga kaganapan,

631
00:40:56,340 --> 00:41:00,430
at din gawin mga kahilingan AJAX napaka walang putol at madali.

632
00:41:00,430 --> 00:41:02,840
Kaya salamat sa iyo para sa darating o panonood,

633
00:41:02,840 --> 00:41:06,230
at kung mayroon kang anumang mga katanungan, mangyari lamang na ipaalam sa akin. Oo?

634
00:41:06,230 --> 00:41:12,730
[Mag-aaral] Bumalik kapag ikaw ay nagpakita, nagkaroon ka ng JSON pagkatapos ng POST kahilingan sa mga panipi,

635
00:41:12,730 --> 00:41:15,170
at lamang ako ay nagtataka kung ano na ang ginawa.

636
00:41:15,170 --> 00:41:20,070
>> Oo, nakikita ko. Ang tanong ay na, sa halimbawa ko lang ang nagpakita,

637
00:41:20,070 --> 00:41:25,790
nagkaroon ng salitang JSON sa mga panipi sa paligid ng -

638
00:41:25,790 --> 00:41:31,690
Kukunin ko na lang hilahin ito up muli - sa paligid ng POST function.

639
00:41:31,690 --> 00:41:43,320
Lang ako sa paghila ito hanggang sa ipakita.

640
00:41:43,320 --> 00:41:46,890
Kaya narito ang POST kahilingan, at mayroong ito JSON sa mga panipi.

641
00:41:46,890 --> 00:41:50,280
Iyon lamang tumutukoy sa kung ano kami ay umaasa ang output upang maging.

642
00:41:50,280 --> 00:41:54,070
Kaya kung pumasa kami sa JSON bilang ang inaasahang uri ng data,

643
00:41:54,070 --> 00:41:56,070
ito ay hindi isang kinakailangan, ngunit kung namin pumasa ito sa,

644
00:41:56,070 --> 00:41:58,590
pagkatapos ay ang data ay awtomatikong mai-parse ang JSON.

645
00:41:58,590 --> 00:42:00,600
Kaya hindi namin na kailangang tawagan ang function na JSON parse sa mga ito,

646
00:42:00,600 --> 00:42:02,620
Makikita lamang ito mangyari awtomatikong.

647
00:42:02,620 --> 00:42:05,150
At kung tingnan ang dokumentasyon para sa POST,

648
00:42:05,150 --> 00:42:09,850
doon ay ang data na ito variable na uri, ang uri ng data na inaasahan mula sa server.

649
00:42:09,850 --> 00:42:12,660
Ito ay nagde-default sa isang intelligent na hula na maaaring maging mali,

650
00:42:12,660 --> 00:42:15,520
sa gayon maaari mong iwanan ito blangko, ngunit ito lamang ay ang uri ng data

651
00:42:15,520 --> 00:42:21,680
sa coding na ginagamit mo, kung ito ay ang JSON o XML o ibang bagay.

652
00:42:21,680 --> 00:42:25,280
>> Anumang iba pang mga katanungan?

653
00:42:25,280 --> 00:42:27,300
Ayos lang. Kung mayroon kang anumang iba pang mga katanungan, huwag mag-atubili na mag-email sa akin

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

655
00:42:30,830 --> 00:42:34,860
at ang mga slide at code ay dapat na magagamit sa online medyo lalong madaling panahon.

656
00:42:34,860 --> 00:42:42,810
Good luck sa iyong huling proyekto, inaasahan mong gamitin ang jQuery.

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