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

3
00:00:04,790 --> 00:00:08,000
[Mae hyn yn CS50.] [CS50.TV]

4
00:00:08,000 --> 00:00:10,640
Os ydych yn dilyn ar hyd yn y cartref, gallwch chi mewn gwirionedd yn cael mynediad fy sleidiau ar-lein

5
00:00:10,640 --> 00:00:13,310
drwy fynd i'r ddolen hon.

6
00:00:13,310 --> 00:00:18,650
Mae'n TjjRWj, ar bit.ly.

7
00:00:18,650 --> 00:00:20,700
Gallwch hefyd jyst yn mynd i'r URL yn uniongyrchol,

8
00:00:20,700 --> 00:00:27,300
sy'n cloud.cs50.net / ~ vshekhawat, sef fy enw,

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

10
00:00:32,409 --> 00:00:34,920
Fi 'n dal eich annog i ddilyn draw os ydych yn gwylio yn y cartref,

11
00:00:34,920 --> 00:00:40,650
ac os ydych yma, hefyd, oherwydd mae hwn yn gyflwyniad eithaf rhyngweithiol.

12
00:00:40,650 --> 00:00:43,160
>> Felly, heddiw yr wyf i'n mynd i fod yn siarad am jQuery, ac y cwestiwn cyntaf yw,

13
00:00:43,160 --> 00:00:45,300
beth yw jQuery?

14
00:00:45,300 --> 00:00:47,090
Eleni, yr wyf yn gwybod nad ydych guys wedi ymdrin JavaScript

15
00:00:47,090 --> 00:00:51,080
mor fanwl ag y byddwn wedi yn y blynyddoedd diwethaf.

16
00:00:51,080 --> 00:00:53,150
JavaScript yw, yn gyntaf oll, dim ond iaith ar ochr cleientiaid

17
00:00:53,150 --> 00:00:58,390
eich bod yn defnyddio i redeg sgriptiau a chod ar y peiriant bob defnyddiwr.

18
00:00:58,390 --> 00:01:00,660
Felly, mae gennych gweinydd sy'n darparu tudalennau gwe i bobl,

19
00:01:00,660 --> 00:01:02,600
ond efallai y byddwch am wneud pethau ar eu peiriant,

20
00:01:02,600 --> 00:01:08,060
gofyn i'w peiriant i anfon ceisiadau i eich gweinydd bob 30 eiliad neu rywbeth fel 'na.

21
00:01:08,060 --> 00:01:10,420
Gallwch wneud hynny drwy ddefnyddio JavaScript.

22
00:01:10,420 --> 00:01:13,190
JQuery yn unig yn rhoi mwy o ymarferoldeb ar ben JavaScript

23
00:01:13,190 --> 00:01:15,680
sy'n gwneud pethau ychwanegol i chi.

24
00:01:15,680 --> 00:01:17,710
Os ydych yn edrych ar y cynnwys ar ei ben,

25
00:01:17,710 --> 00:01:21,410
sy'n disgrifio rhai o'r pethau eich bod yn gallu ei wneud.

26
00:01:21,410 --> 00:01:23,500
Felly, ar y cyfan, iddi gael ei chreu ym mis Ionawr 2006.

27
00:01:23,500 --> 00:01:26,560
Cafodd ei genhedlu gyntaf ym mis Awst 2005.

28
00:01:26,560 --> 00:01:31,370
Mae wedi bod o gwmpas ers cwpl o flynyddoedd, ac mae'n wir yn rhan o'r mudiad Web 2.0 newydd

29
00:01:31,370 --> 00:01:34,330
sydd wedi gwneud y Rhyngrwyd mor sgleiniog.

30
00:01:34,330 --> 00:01:37,630
Mae'n y llyfrgell JavaScript mwyaf a ddefnyddir yn eang.

31
00:01:37,630 --> 00:01:41,450
Mae dros 19,600,000 gwefannau yn ei ddefnyddio, ac mae'r defnydd yn dal i gynyddu

32
00:01:41,450 --> 00:01:45,640
yn ôl builtwith.com, sydd, mae'n debyg, dros y flwyddyn ddiwethaf,

33
00:01:45,640 --> 00:01:49,710
newydd bod yn cynyddu yn weddol llinol yn barhaus.

34
00:01:49,710 --> 00:01:52,870
Ymhlith y 10 miliwn o safleoedd uchaf, mae o hyd -

35
00:01:52,870 --> 00:01:55,180
Ar hyn o bryd mae tua 40% ohonynt yn ei ddefnyddio.

36
00:01:55,180 --> 00:01:58,540
Facebook yn ei ddefnyddio, llawer o wefannau eraill ar hyn o bryd yn ei ddefnyddio.

37
00:01:58,540 --> 00:02:01,540
Gallwch edrych ar yr ystadegau hynny ar eich pen eich hun, os hoffech.

38
00:02:01,540 --> 00:02:05,820
A allech chi ddweud ei fod yn legit oherwydd mae ganddo sylfaen a 13 o aelodau bwrdd,

39
00:02:05,820 --> 00:02:11,910
ynghyd â thîm o 20 o bobl sy'n gweithio arno yn rheolaidd.

40
00:02:11,910 --> 00:02:16,110
Felly, caiff ei ddefnyddio yn eang iawn, mae ganddi. URL org, mae'n ffansi,

41
00:02:16,110 --> 00:02:21,660
mae wedi sgil-offs am bethau eraill, felly mae'n dipyn o beth.

42
00:02:21,660 --> 00:02:24,510
>> Pam ddylech chi ei ddefnyddio? JQuery yn ysgafn iawn.

43
00:02:24,510 --> 00:02:27,270
Mae hynny'n golygu nad yw'n ffeil enfawr. Gallwch lawrlwytho

44
00:02:27,270 --> 00:02:31,540
y ffeil minified, sydd heb yr holl ofod gwyn a sylwadau, ac mae'n dim ond 32 kB.

45
00:02:31,540 --> 00:02:33,600
Felly, mae'n hawdd i ychydig toss ar eich tudalen ar y we

46
00:02:33,600 --> 00:02:35,910
a dim ond i ddechrau ei ddefnyddio.

47
00:02:35,910 --> 00:02:39,630
Mae hefyd wedi ysgrifennu yn effeithlon iawn, felly nid yw'n cymryd llawer o -

48
00:02:39,630 --> 00:02:42,550
nid yw'n arafu eich gwefan llawer pan fyddwch yn ei ddefnyddio.

49
00:02:42,550 --> 00:02:45,770
Mae'n gadael i chi weithredu pethau a oedd yn anymarferol o'r blaen.

50
00:02:45,770 --> 00:02:47,790
Mae rhai agweddau o ymarferoldeb,

51
00:02:47,790 --> 00:02:51,780
fel creu animeiddiadau, a fyddai fel arfer yn iawn, yn anodd iawn i'w wneud.

52
00:02:51,780 --> 00:02:54,300
Ond yn jQuery eu bod mewn gwirionedd yn syml iawn.

53
00:02:54,300 --> 00:02:57,040
Ac mae rhai pethau sy'n blino i'w wneud,

54
00:02:57,040 --> 00:02:59,610
bosibl mewn JavaScript, fel anfon cais POST,

55
00:02:59,610 --> 00:03:02,190
ond i anfon cais i weinydd, rhaid i chi ysgrifennu

56
00:03:02,190 --> 00:03:04,320
pump neu chwech neu saith o linellau o god.

57
00:03:04,320 --> 00:03:07,200
Nawr gallwch wneud hynny mewn un llinell o god, mewn galwad swyddogaeth sengl.

58
00:03:07,200 --> 00:03:11,790
Mae hynny'n wir symleiddio llawer o'r pethau yr ydych yn ei wneud.

59
00:03:11,790 --> 00:03:15,950
A'r holl blant oeri yn ei ddefnyddio. Gan hynny, yr wyf yn ei olygu i mi.

60
00:03:15,950 --> 00:03:19,270
Yn fy prosiect terfynol y llynedd, sy'n news.whrb.org,

61
00:03:19,270 --> 00:03:22,530
sydd ar gyfer yr orsaf radio, yr wyf yn creu blog hwn

62
00:03:22,530 --> 00:03:29,750
sy'n cynnal yr holl yn dangos ein bod wedi ei wneud a'r ffeiliau MP3 ar eu cyfer.

63
00:03:29,750 --> 00:03:32,070
Gallwch bori drwy'r sioeau yn y gorffennol,

64
00:03:32,070 --> 00:03:34,130
ac mae'n gyd ei wneud gan ddefnyddio jQuery. Gallwch ddweud

65
00:03:34,130 --> 00:03:37,340
oherwydd yr holl animeiddiadau hyn, yn y bôn.

66
00:03:37,340 --> 00:03:42,360
Felly os oes gennych - os ydych yn creu swydd newydd,

67
00:03:42,360 --> 00:03:45,980
byddwch yn gweld hyn slideDowns bach, hynny i gyd wedi ei wneud gan ddefnyddio jQuery.

68
00:03:45,980 --> 00:03:49,140
Ac mae hyn yn pylu - fel y math o bethau yn cael ei wneud i gyd drwy ddefnyddio jQuery,

69
00:03:49,140 --> 00:03:52,720
ac nad oes rhaid i chi ail-lwytho yn gyson y dudalen i fynd o gwmpas y safle.

70
00:03:52,720 --> 00:03:57,220
Oera beth arall sy'n cael ei wneud gan ddefnyddio jQuery yn y cyflwyniad hwn.

71
00:03:57,220 --> 00:03:59,700
Im 'yn arfer ffynhonnell y peth hyn a elwir yn agored scrolldeck,

72
00:03:59,700 --> 00:04:03,250
mae rhywun ysgrifennodd ar ben jQuery.

73
00:04:03,250 --> 00:04:04,870
Os ydych yn edrych ar y ffynhonnell, gallwch weld bod

74
00:04:04,870 --> 00:04:07,830
maent yn eu defnyddio yr arwydd doler; arwyddion doler

75
00:04:07,830 --> 00:04:12,110
cael eu defnyddio mewn jQuery i ddangos bod swyddogaeth honno yn swyddogaeth jQuery.

76
00:04:12,110 --> 00:04:15,020
Felly, maent yn diffinio deunydd lapio ar ben jQuery

77
00:04:15,020 --> 00:04:18,570
sy'n eich galluogi i wneud cyflwyniad fel hyn,

78
00:04:18,570 --> 00:04:21,200
a gallwch weld bod yma eu bod yn cynnwys y ffeil jQuery gwreiddiol,

79
00:04:21,200 --> 00:04:24,120
sef yr hyn y bydd rhaid i chi gynnwys os am ddefnyddio jQuery

80
00:04:24,120 --> 00:04:30,450
yn eich gwefannau eu hunain.

81
00:04:30,450 --> 00:04:32,790
>> Cyffwrdd ar hynny, sut yr ydych yn ei osod?

82
00:04:32,790 --> 00:04:36,150
Alli jyst mynd i jQuery.com a llwytho i lawr y ffeil,

83
00:04:36,150 --> 00:04:38,320
ychwanegu at cyfeiriadur we a chynnwys.

84
00:04:38,320 --> 00:04:42,200
Felly dim ond ar ei ben, yn y pen tag o'ch ffeil HTML

85
00:04:42,200 --> 00:04:45,400
o'ch prif ffeil HTML, dim ond yn cael y llinell o god

86
00:04:45,400 --> 00:04:49,490
gyda'r fersiwn cywir ar gyfer pa fersiwn o jQuery rydych yn ei ddefnyddio.

87
00:04:49,490 --> 00:04:51,340
Gallwch ei lawrlwytho drwy fynd i jQuery.com,

88
00:04:51,340 --> 00:04:55,130
cliciwch ar "jQuery llwytho i lawr," ac rydych wedi cael ei. Dyna ni.

89
00:04:55,130 --> 00:04:58,880
Ac mewn gwirionedd, gallwn edrych ar yr hyn y mae'n edrych.

90
00:04:58,880 --> 00:05:01,080
Os byddwch yn clicio ar lwytho i lawr yma, jQuery yw hyn.

91
00:05:01,080 --> 00:05:05,260
Dim ond un ffeil JavaScript mawr sy'n gwneud yr holl bethau hud i chi.

92
00:05:05,260 --> 00:05:09,270
Mae hyn yn y fersiwn minified, sydd ddim yn ddarllenadwy o gwbl.

93
00:05:09,270 --> 00:05:13,180
Gallwch hefyd edrych ar y fersiwn datblygu, sydd yn ddarllenadwy

94
00:05:13,180 --> 00:05:15,370
ond yn dal yn iawn, yn hir iawn.

95
00:05:15,370 --> 00:05:17,980
Mae'n llawer o bethau i mewn 'na.

96
00:05:17,980 --> 00:05:20,240
Gallwch hefyd gysylltu â Google fersiwn letya ohono.

97
00:05:20,240 --> 00:05:23,820
Felly bydd yn caniatáu i chi yn unig yn dibynnu ar Google i'w ddarparu.

98
00:05:23,820 --> 00:05:29,310
Maent yn darparu pob fersiwn ohono, ar gael bob amser.

99
00:05:29,310 --> 00:05:31,530
Felly, mae'n debyg y gallwch ddibynnu ar Google i gynnal hynny ar eich rhan.

100
00:05:31,530 --> 00:05:33,270
Neu gallwch gysylltu â eu hunain fersiwn diweddaraf jQuery yn.

101
00:05:33,270 --> 00:05:36,400
Mae ganddynt URL sy'n cael ei diweddaru bob amser i'r fersiwn ddiweddaraf.

102
00:05:36,400 --> 00:05:40,850
Mae'n jQuery-diweddaraf, ac mae un broblem gyda hynny,

103
00:05:40,850 --> 00:05:44,350
sef bod os bydd y jQuery diweddaru a rhai o'r swyddogaethau blaenorol

104
00:05:44,350 --> 00:05:47,250
eu bod wedi dod yn retrograded neu anghymeradwyo,

105
00:05:47,250 --> 00:05:49,620
Nid yw'n Mai.-Mai. yn dechrau i beidio cael cefnogaeth anymore.

106
00:05:49,620 --> 00:05:52,940
Felly, os ydych yn ysgrifennu gwefan gan ddefnyddio fersiwn 1.8.2,

107
00:05:52,940 --> 00:05:55,000
gan y fersiwn amser 2.7 yn dod allan

108
00:05:55,000 --> 00:05:57,000
nid yw rhai o'r swyddogaethau i chi ysgrifennu yn gweithio anymore.

109
00:05:57,000 --> 00:05:59,930
Felly, mae'n well i ychydig lwytho i lawr y ffeil kB 32,

110
00:05:59,930 --> 00:06:04,100
roi ar eich tudalen ar y we, a bydd yn gweithio am byth.

111
00:06:04,100 --> 00:06:07,450
>> Rydw i'n mynd i fynd yn ei flaen ac yn dechrau siarad am ymarferoldeb gwirioneddol o jQuery.

112
00:06:07,450 --> 00:06:13,090
Y peth cyntaf yw detholwyr. Dyma beth jQuery ei genhedlu i ddechrau darparu.

113
00:06:13,090 --> 00:06:15,500
A allwch chi glicio ar y dogfennau i edrych ar

114
00:06:15,500 --> 00:06:18,690
y dogfennau manwl ar gyfer y detholwyr yr wyf i'n mynd i gael eu cwmpasu.

115
00:06:18,690 --> 00:06:24,120
Y syniad y tu ôl i dewiswyr yw y gallwch ddewis elfennau HTML ar dudalen.

116
00:06:24,120 --> 00:06:28,790
Elfennau ar dudalen yn cael IDs a dosbarthiadau ac agweddau personol eraill ar gael iddynt.

117
00:06:28,790 --> 00:06:30,500
Mae hefyd - they're mewn gorchmynion gwahanol.

118
00:06:30,500 --> 00:06:32,570
Peth o'r amser maent yn nythu tu mewn i bob eraill.

119
00:06:32,570 --> 00:06:38,120
JQuery yn eich galluogi i adeiladu ymholiadau syml sy'n adfer elfennau o'r dudalen.

120
00:06:38,120 --> 00:06:41,890
Yna gallwch drin yr elfennau hyn gan ddefnyddio swyddogaethau jQuery,

121
00:06:41,890 --> 00:06:43,990
sydd yn yr adran trin byddwn yn mynd i yn nes ymlaen.

122
00:06:43,990 --> 00:06:46,040
Gallwch newid y HTML, newid y CSS,

123
00:06:46,040 --> 00:06:50,500
gallwch hefyd animeiddio ac ychwanegu swyddogaethau hynny'n creu ar ddigwyddiadau penodol.

124
00:06:50,500 --> 00:06:52,710
Felly, er enghraifft, os oes rhywbeth wedi clicio, yr ydych am i rywbeth ddigwydd,

125
00:06:52,710 --> 00:06:55,210
gallwch wneud hynny drwy ddefnyddio jQuery yn ogystal.

126
00:06:55,210 --> 00:06:57,380
Ac mae nifer fawr o ffyrdd i ddewis elfennau.

127
00:06:57,380 --> 00:07:00,310
Mae'r rhan fwyaf ohonynt Dydw i erioed wedi defnyddio, ond ceir y rhai sylfaenol,

128
00:07:00,310 --> 00:07:02,340
sydd yn eithaf pwysig.

129
00:07:02,340 --> 00:07:05,750
Mae'r elfen detholydd, er enghraifft, os ydych ond yn dewis unrhyw beth

130
00:07:05,750 --> 00:07:10,640
hynny yw div - Fi 'n weithredol yn cael y cod agored ar gyfer y cyflwyniad sleidiau.

131
00:07:10,640 --> 00:07:13,450
Felly, er enghraifft, dyma y sleid gyntaf.

132
00:07:13,450 --> 00:07:17,430
Yma mae gennym div. Os ydym mewn gwirionedd dewiswch yr holl divs ar y dudalen,

133
00:07:17,430 --> 00:07:22,300
bydd yn dim ond rhoi amrywiaeth o holl divs sy'n bodoli yn y ffeil hon i ni.

134
00:07:22,300 --> 00:07:27,040
Mae'r ID detholydd yn gadael i chi ddewis unrhyw beth sydd â ID roddir.

135
00:07:27,040 --> 00:07:32,230
Felly, os yw hyn, er enghraifft, y peth hyn yr ID "beth,"

136
00:07:32,230 --> 00:07:37,160
ac os ydym yn gwneud hyn gyda # beth yn hytrach na rhai adnabod,

137
00:07:37,160 --> 00:07:42,920
fyddai ond yn dychwelyd arae sydd â elfen sengl a hynny yw bod elfen y dudalen.

138
00:07:42,920 --> 00:07:45,490
Gallwn hefyd gyfuno dewiswyr y ffordd hon drwy gael

139
00:07:45,490 --> 00:07:48,260
Dim ond dewis pethau gyda IDs sy'n divs.

140
00:07:48,260 --> 00:07:51,810
Felly yeah. Dim ond dewis divs sydd wedi bod adnabod.

141
00:07:51,810 --> 00:07:55,260
Ar gyfer y dosbarth 'ch jyst yn defnyddio dot,' i 'yr un peth â CSS.

142
00:07:55,260 --> 00:07:57,500
Ddisgynnydd hefyd yn gweithio, felly os oes gennych rywfaint dosbarth

143
00:07:57,500 --> 00:08:00,170
ac mae wedi nythu elfennau ynddo - felly, er enghraifft,

144
00:08:00,170 --> 00:08:03,260
mae rhywfaint dosbarth ac mae ganddo tag angor i gysylltu i dudalen arall,

145
00:08:03,260 --> 00:08:08,510
gallwch ddefnyddio'r gystrawen hwn i adfer y ddolen.

146
00:08:08,510 --> 00:08:12,420
Gallwch hefyd ddewis pethau lluosog ar unwaith, dim ond eu gwahanu gan atalnodau,

147
00:08:12,420 --> 00:08:17,360
defnyddio unrhyw dewisydd yr hoffech, a byddwch yn dewis pob un ohonynt ar yr un pryd, mewn amrywiaeth sengl.

148
00:08:17,360 --> 00:08:19,650
Ac yna mae hefyd nad detholydd, er mwyn i chi ddewis yr holl divs

149
00:08:19,650 --> 00:08:24,210
nad oes rhaid i rai ddosbarth penodol.

150
00:08:24,210 --> 00:08:28,790
A dim ond ffordd ddefnyddiol i gael cyflwyniad ar sut y dewis hwn yn gweithio.

151
00:08:28,790 --> 00:08:32,270
Byddaf yn dangos rhai enghreifftiau pendant mewn eiliad.

152
00:08:32,270 --> 00:08:35,480
>> Dewiswyr Uwch yw - ychydig o enghreifftiau yn unig yw'r rhain.

153
00:08:35,480 --> 00:08:38,840
Mae dwsinau o hyn, ond os ydych am i ddewis yr holl tagiau ddelwedd

154
00:08:38,840 --> 00:08:42,799
mewn rhyw elfen, yna byddwch yn unig yn ei wneud: image.

155
00:08:42,799 --> 00:08:45,340
Os ydych am i ddewis yr elfennau hyd yn oed, er enghraifft, os oes 20 ohonynt,

156
00:08:45,340 --> 00:08:48,290
ydych am i ddewis 0, 2, 4, 6 ac yn y blaen,

157
00:08:48,290 --> 00:08:51,630
chi ei wneud: hyd yn oed, neu gallwch hefyd wneud: od.

158
00:08:51,630 --> 00:08:55,470
Mae'r rhain yn detholwyr ffug, sy'n golygu eu bod mewn gwirionedd yn cyfrifo

159
00:08:55,470 --> 00:09:00,960
pob elfen arall yn hytrach na dim ond mynd a dethol pob un ohonynt.

160
00:09:00,960 --> 00:09:05,510
Gallwch hefyd - mae pob elfen hefyd gael nodweddion penodol.

161
00:09:05,510 --> 00:09:10,580
Felly, er enghraifft, class = ganolfan hon yn nodwedd hefyd.

162
00:09:10,580 --> 00:09:16,500
Ar gyfer tag angor hwn, href, a'r cyfeirnod hyperdestun, yn nodwedd hefyd.

163
00:09:16,500 --> 00:09:21,150
Felly, gallwch ddewis rhywbeth sy'n cysylltu i dudalen penodol neu ddim ond - mae'n wirioneddol gyffredinol.

164
00:09:21,150 --> 00:09:25,410
Gallwch ddewis unrhyw beth gydag unrhyw priodoledd y byddech yn ei hoffi.

165
00:09:25,410 --> 00:09:27,470
Ac yna, hefyd, yn cynnwys priodoledd.

166
00:09:27,470 --> 00:09:30,420
Os ydych chi, er enghraifft, yn awyddus i ddewis yr holl elfennau mewnbwn

167
00:09:30,420 --> 00:09:32,700
sydd â'r gair "pasio" yn enw ohonynt,

168
00:09:32,700 --> 00:09:37,560
os yw tudalen yn cael bloc testun mewnbwn

169
00:09:37,560 --> 00:09:41,050
sy'n cael ei alw "cyfrinair," byddai hynny'n un ffordd y gallech ddewis hynny.

170
00:09:41,050 --> 00:09:43,020
Ac mae llawer mwy. Gallwch fynd yn ei flaen ac yn edrych ar y dogfennau

171
00:09:43,020 --> 00:09:46,950
a gweld enghreifftiau penodol o sut mae'n gweithio.

172
00:09:46,950 --> 00:09:48,840
>> Y peth nesaf yw DOM trin.

173
00:09:48,840 --> 00:09:52,500
Ar ôl i ni ddewis elfennau, byddwn am ei wneud mewn gwirionedd yn bethau gyda nhw.

174
00:09:52,500 --> 00:09:55,500
Hyd yn hyn nid ydym wedi edrych ar hynny o gwbl, ond os ydych yn edrych ar y dogfennau,

175
00:09:55,500 --> 00:09:57,950
mae 'n sylweddol llawer y gallem ei wneud.

176
00:09:57,950 --> 00:10:02,900
Ar y pwynt hwn, rydym yn mynd i ddewis elfennau ar y cyflwyniad hwn

177
00:10:02,900 --> 00:10:04,890
ac yn trin eu defnyddio jQuery.

178
00:10:04,890 --> 00:10:08,290
Oherwydd bod hyn yn cael ei weithredu gan ddefnyddio jQuery, rydym yn cael mynediad i'r llyfrgell jQuery,

179
00:10:08,290 --> 00:10:13,580
a gallwn ddefnyddio swyddogaethau hynny o fewn y cod.

180
00:10:13,580 --> 00:10:16,200
Un peth defnyddiol efallai nad ydych yn gwybod am y consol.

181
00:10:16,200 --> 00:10:19,340
A Google Chrome beth Im 'yn arfer. Gallwch bwyso alt gorchymyn J

182
00:10:19,340 --> 00:10:21,720
neu alt reolaeth J i agor y consol.

183
00:10:21,720 --> 00:10:26,130
Yn Firefox Rwy'n credu ei fod yn gorchymyn newid K neu reoli newid K.

184
00:10:26,130 --> 00:10:28,880
Yn Safari yn rhaid i chi fynd yn newid rhai lleoliadau.

185
00:10:28,880 --> 00:10:35,460
Mae cyswllt os hoffech i wneud hynny, ond yr wyf yn argymell cael Chrome neu Firefox.

186
00:10:35,460 --> 00:10:37,750
Felly, gadewch i ni agor y consol, mae'n lawr yma.

187
00:10:37,750 --> 00:10:41,170
Mae'n caniatáu i chi yn y bôn yn unig wneud unrhyw beth rydych ei eisiau.

188
00:10:41,170 --> 00:10:45,100
Felly, gallwch deipio i mewn yn creu enw x amrywiol,

189
00:10:45,100 --> 00:10:49,200
x = 5, gadewch i ni weld beth x + 2.

190
00:10:49,200 --> 00:10:57,670
Gallwch hyd yn oed wneud rhywbeth fel CS + gadewch i ni weld, x + 45, a fydd yn CS50.

191
00:10:57,670 --> 00:11:00,530
Alli jyst gwneud rhai pethau JavaScript nodweddiadol.

192
00:11:00,530 --> 00:11:02,730
Ond gallwch hefyd wneud jQuery yma.

193
00:11:02,730 --> 00:11:06,200
>> Felly, gadewch i ni edrych ar yr agwedd gyntaf yma.

194
00:11:06,200 --> 00:11:09,500
Rydym yn mynd i greu newidyn o'r enw HTML, sy'n llinyn.

195
00:11:09,500 --> 00:11:15,890
Mae ganddo tag baragraff ynddo, dyna gelwir rhai destun newydd.

196
00:11:15,890 --> 00:11:19,420
Felly, rydym wedi HTML hyn, mae'n rhywfaint o destun newydd, ym mharagraff tagiau.

197
00:11:19,420 --> 00:11:21,800
Nawr rydym mewn gwirionedd yn awyddus i ychwanegu at y dudalen.

198
00:11:21,800 --> 00:11:28,310
Wyf yn gosod i fyny fel bod y HTML am y paragraff hwn, teitl hwn yma, yn atodi adnabod.

199
00:11:28,310 --> 00:11:32,320
Os byddwn yn dewis atodi ID ac yna atodi iddo

200
00:11:32,320 --> 00:11:34,560
y newidyn HTML wyf newydd ei greu,

201
00:11:34,560 --> 00:11:40,370
bydd yn ychwanegu bod HTML ar y diwedd, dde ar ôl paragraff tag hwn.

202
00:11:40,370 --> 00:11:43,730
Felly, os ydym yn gwneud hynny - rydym yn dewis y paragraff hwn,

203
00:11:43,730 --> 00:11:47,590
ac yr ydym wedi galw y swyddogaeth atodi gyda'r newidyn HTML Fi jyst ychwanegu,

204
00:11:47,590 --> 00:11:50,960
bydd yn ychwanegu bod destun newydd iawn yno ar y dudalen.

205
00:11:50,960 --> 00:11:54,970
Gallwn hefyd prepend, sy'n golygu y bydd yn mynd o'r blaen, ar ddechrau'r yr elfen honno.

206
00:11:54,970 --> 00:11:58,290
Felly, mae rhywfaint o destun newydd ar ddechrau ac ar ôl hynny.

207
00:11:58,290 --> 00:12:01,660
Gallaf fynd yn ei flaen ac adnewyddu i gael gwared o bethau hwn, rwyf wedi ei wneud yn unig.

208
00:12:01,660 --> 00:12:05,280
Ond dyna enghraifft o sut y gallwch ddefnyddio'r prepend ac atodi dulliau

209
00:12:05,280 --> 00:12:08,910
i drin pethau ar y dudalen, ychwanegu ychydig o HTML.

210
00:12:08,910 --> 00:12:11,080
>> Gallwch hefyd newid dosbarthiadau.

211
00:12:11,080 --> 00:12:14,970
Yn ôl yn y ffeil arddull, rwyf wedi creu'r ar gyfer y dosbarth ennill

212
00:12:14,970 --> 00:12:19,990
sydd goch lliw testun, mae rhai lliw cefndir, ac mae cysgod testun.

213
00:12:19,990 --> 00:12:23,810
Mae'n edrych yn erchyll, ond gallaf mewn gwirionedd -

214
00:12:23,810 --> 00:12:26,410
y paragraff hwn yn cyfateb i ID dosbarth.

215
00:12:26,410 --> 00:12:29,860
Felly, yr wyf yn gallu ychwanegu y dosbarth ar gyfer y fuddugoliaeth.

216
00:12:29,860 --> 00:12:31,870
Gallaf gyflawni hyn yn y consol,

217
00:12:31,870 --> 00:12:35,480
a fydd yn ychwanegu dosbarth hwnnw, ac yn awr mae'n edrych yn hyll, yn ôl y disgwyl.

218
00:12:35,480 --> 00:12:39,680
Mae CSS yn awtomatig yn cael ei defnyddio at y dosbarthiadau eich bod chi -

219
00:12:39,680 --> 00:12:42,680
os oes CSS ar gyfer dosbarth, yn awtomatig yn cael ei ddefnyddio

220
00:12:42,680 --> 00:12:44,680
os byddwch yn newid y dosbarth o elfen.

221
00:12:44,680 --> 00:12:49,230
Yna gallwn jyst dynnu gan ddefnyddio ddosbarth remove.

222
00:12:49,230 --> 00:12:53,690
Felly os oes gennych rhai dosbarthiadau Rhagosodol fel coch neu amlygodd,

223
00:12:53,690 --> 00:12:55,990
ac yna yr ydych am wneud cais hynny i elfennau,

224
00:12:55,990 --> 00:12:58,230
Nid oes rhaid i chi wneud yr holl CSS steilio bob tro.

225
00:12:58,230 --> 00:13:01,510
Alli jyst ychwanegu i'r dosbarth elfen, ac yna bydd yn dod yn awtomatig -

226
00:13:01,510 --> 00:13:05,580
bydd yn edrych yn briodol ar gyfer y dosbarth hwnnw yn awtomatig.

227
00:13:05,580 --> 00:13:07,900
Gallwn hefyd gael gwared pethau; felly dwi'n mynd i ddewis yr holl divs

228
00:13:07,900 --> 00:13:10,830
ar y dudalen a chael gwared arnynt.

229
00:13:10,830 --> 00:13:13,990
Beth yw bod yn mynd i edrych fel?

230
00:13:13,990 --> 00:13:16,170
Mae'n mynd i edrych fel dim byd, felly does dim byd mewn gwirionedd chwith.

231
00:13:16,170 --> 00:13:18,170
Fy nghyflwyniad wedi mynd.

232
00:13:18,170 --> 00:13:21,290
Gallaf adnewyddu a dod ag ef yn ôl, yn ffodus,

233
00:13:21,290 --> 00:13:24,420
oherwydd mai dim ond yn rhedeg unwaith,

234
00:13:24,420 --> 00:13:29,460
ond mae hynny'n enghraifft o symud, os ydych am i ddinistrio elfen oddi ar y dudalen yn llwyr.

235
00:13:29,460 --> 00:13:33,180
>> Gallwch hefyd ysgrifennu dros, ac rwy'n mynd i ddewis yr holl paragraff tag ar y dudalen

236
00:13:33,180 --> 00:13:36,850
ac yn mynd y tu mewn iddynt ac yn disodli testun beth bynnag sydd ganddynt yn eu

237
00:13:36,850 --> 00:13:39,690
gyda dim ond y gair "profion."

238
00:13:39,690 --> 00:13:46,520
Os byddwch yn gwneud hyn, byddwch yn cymryd lle pob paragraff ar y dudalen gyda phrofion hwn.

239
00:13:46,520 --> 00:13:49,150
Yep. Maen nhw i gyd yn disodli gan brofion.

240
00:13:49,150 --> 00:13:53,270
Felly dyna enghraifft o gael mynediad at y testun a drosysgrifo iddo.

241
00:13:53,270 --> 00:13:57,490
Gallwch hefyd adfer gwybodaeth, ac mae hyn yn wir yn cŵl ar gyfer blychau mewnbwn.

242
00:13:57,490 --> 00:14:00,470
Os oes gennych blwch mewnbwn y mae pobl yn cael eu teipio stwff i mewn i,

243
00:14:00,470 --> 00:14:03,880
pobl yn deipio stwff i mewn iddo,

244
00:14:03,880 --> 00:14:09,030
yma rydym yn dewis y mewnbwn, unrhyw dag mewnbwn gyda math o destun.

245
00:14:09,030 --> 00:14:13,800
Yn yr achos hwn, dim ond un blwch mewnbwn yn y cyflwyniad cyfan,

246
00:14:13,800 --> 00:14:17,260
felly byddwn yn dewiswch yr un cyntaf, ac yna rydym yn galw y swyddogaeth Val arno.

247
00:14:17,260 --> 00:14:19,570
Mae hynny'n dychwelyd y gwerth, ac ar gyfer blwch mewnbwn,

248
00:14:19,570 --> 00:14:24,330
gwerth yn unig yw beth bynnag sy'n digwydd i fod y tu mewn iddo.

249
00:14:24,330 --> 00:14:31,880
Felly, os ydym yn gwneud hyn, 'i jyst yn dychwelyd y pethau llinyn.

250
00:14:31,880 --> 00:14:36,860
Ac os ydym yn galw eto ar ôl ysgrifennu mwy o bethau, mae'n troi i mewn i fwy o bethau.

251
00:14:36,860 --> 00:14:40,760
Dyna un ffordd wych i gael gafael ar elfennau o flwch mewnbwn, ac yna gwirio,

252
00:14:40,760 --> 00:14:45,060
yw hwn yn gyfeiriad e-bost dilys, a yw hyn yn ddyddiad dilys, er enghraifft.

253
00:14:45,060 --> 00:14:49,600
Alli jyst adfer pethau yn syth gan fod pobl yn ei deipio,

254
00:14:49,600 --> 00:14:54,830
ac yna gwirio a yw'n ddilys, anfon yn ôl i weinydd, wneud unrhyw beth rydych ei eisiau ag ef.

255
00:14:54,830 --> 00:14:57,720
A dyna sut i gael gafael ar yr hyn sydd y tu mewn blychau hynny.

256
00:14:57,720 --> 00:15:00,090
>> Gallwch hefyd addasu CSS yn uniongyrchol, felly yn hytrach na ychwanegu

257
00:15:00,090 --> 00:15:02,510
dosbarth sydd â rhai eiddo predefined,

258
00:15:02,510 --> 00:15:08,120
gallwch ychwanegu beth bynnag CSS ydych am i unrhyw beth.

259
00:15:08,120 --> 00:15:10,350
Corff dethol Felly gadewch i ni, sef y cyflwyniad cyfan,

260
00:15:10,350 --> 00:15:14,370
a lliw yn yr eiddo sy'n diffinio'r hyn y lliwiau y testun yn.

261
00:15:14,370 --> 00:15:19,420
Os byddwn yn newid i goch, bydd yr holl destun yn y dudalen yn troi i goch.

262
00:15:19,420 --> 00:15:26,310
Gallwn wneud rhywbeth fel glas lliw cefndir,

263
00:15:26,310 --> 00:15:30,680
dyna ni, mae'n hyfryd.

264
00:15:30,680 --> 00:15:33,840
Gallwch wneud unrhyw beth rydych am â hyn.

265
00:15:33,840 --> 00:15:39,250
Gan ddefnyddio'r eiddo CSS, gallwch chi wir addasu sut mae unrhyw beth yn edrych ar unrhyw adeg.

266
00:15:39,250 --> 00:15:41,630
Y peth nesaf yw effeithiau.

267
00:15:41,630 --> 00:15:45,710
Effeithiau yn y bôn yr un peth â newid y CSS,

268
00:15:45,710 --> 00:15:48,870
ond maent mewn gwirionedd yn darparu rhywfaint o animeiddiad ychwanegol iddo.

269
00:15:48,870 --> 00:15:53,380
Felly, yn hytrach na dim ond dangos neu guddio rhywbeth neu newid y lliw,

270
00:15:53,380 --> 00:15:56,130
gallwch chi mewn gwirionedd yn ei wneud yn hanimeiddio.

271
00:15:56,130 --> 00:16:00,760
Dyma y ddogfennaeth, os ydych am i edrych ar y dogfennau helaeth ar ei gyfer.

272
00:16:00,760 --> 00:16:04,760
Ond dw i ddim yn mynd i dalu am y prif rai.

273
00:16:04,760 --> 00:16:12,030
Mae y sioe ac eiddo cuddio.

274
00:16:12,030 --> 00:16:14,510
Dangos / cuddio ID gwirionedd yn cyfateb i flwch gyfan hon,

275
00:16:14,510 --> 00:16:18,190
felly os wyf yn cuddio hynny, bydd yn jyst diflannu.

276
00:16:18,190 --> 00:16:24,210
Ac yr wyf yn gallu dangos ei fod eto os wyf am ei gwneud yn dod yn ôl.

277
00:16:24,210 --> 00:16:26,340
Ac mae'n ôl. Nid oedd mewn gwirionedd yn diflannu,

278
00:16:26,340 --> 00:16:30,670
Doeddwn i ddim mewn gwirionedd yn symud oddi ar y dudalen, Fi jyst yn gosod yr eiddo CSS gwelededd i cudd

279
00:16:30,670 --> 00:16:34,030
felly ni allwch ei weld anymore.

280
00:16:34,030 --> 00:16:39,250
Mae hefyd wedi llithro i fyny ac yn llithro i lawr, sy'n eich galluogi i gael yr effaith hon.

281
00:16:39,250 --> 00:16:47,050
Mae'n sleidiau i fyny i ddiflannu, ac ar ôl iddo ddiflannu

282
00:16:47,050 --> 00:16:53,210
gallwch chi lithro i lawr i wneud yn dod yn ôl. Ac yn awr ei fod yn ôl.

283
00:16:53,210 --> 00:16:57,650
Mae hyn hefyd effaith pylu, sydd - ID pylu yn cyfateb i'r blwch.

284
00:16:57,650 --> 00:17:01,200
Os byddaf yn pylu allan, yna bydd yn diflannu yn araf.

285
00:17:01,200 --> 00:17:04,490
Gallaf hefyd pylu mewn, a bydd yn dod yn ôl.

286
00:17:04,490 --> 00:17:08,930
Gallwch hefyd wneud pylu i, sy'n benodol i'r swyddogaeth pylu.

287
00:17:08,930 --> 00:17:12,589
Gallwch gael yn pylu i unrhyw didreiddedd penodol yr ydych ei eisiau.

288
00:17:12,589 --> 00:17:16,869
Felly, os ydych yn pylu yn araf i .5, bydd yn dod yn hanner weladwy.

289
00:17:16,869 --> 00:17:22,630
Gallaf ei wneud yn mynd i .1, ac yn ôl i 1 i'w gwneud yn gwbl weladwy eto.

290
00:17:22,630 --> 00:17:24,760
Dyna dim ond animeiddio arall y gallwch ei wneud.

291
00:17:24,760 --> 00:17:26,750
>> Mae yna hefyd yr effeithiau togl.

292
00:17:26,750 --> 00:17:33,410
Felly, yr wyf i'n mynd i ddewis y ID togl, sy'n cyfateb i'r blwch hwn,

293
00:17:33,410 --> 00:17:38,970
ac ar y div gallwch ffonio toggle, os yw'n amlwg y bydd yn dod yn anweledig,

294
00:17:38,970 --> 00:17:42,320
os yw'n anweledig y bydd yn dod yn weladwy eto.

295
00:17:42,320 --> 00:17:44,440
Felly, yr wyf newydd alw y swyddogaeth toggle ddwywaith; yr un cyntaf oedd

296
00:17:44,440 --> 00:17:48,380
yr un peth â croen, yr ail alwad yn yr un peth fel sioe.

297
00:17:48,380 --> 00:17:53,510
A allwch chi hefyd yn gwneud hyn gyda togl pylu,

298
00:17:53,510 --> 00:17:55,730
sy'n gwneud yr un peth, ac eithrio mewn gwirionedd mae'n pylu.

299
00:17:55,730 --> 00:17:59,410
Ac un peth â'r sleid toggle.

300
00:17:59,410 --> 00:18:01,460
Ceir effeithiau cadwyn hefyd, sy'n golygu

301
00:18:01,460 --> 00:18:05,520
os ydych yn dewis elfen a dim ond galw criw o ddulliau animeiddio arno,

302
00:18:05,520 --> 00:18:07,400
os ydych yn dymuno iddo diflannu allan, yna llithro i lawr,

303
00:18:07,400 --> 00:18:11,040
ac yna cuddio ac yna diflannu i mewn, bydd yn eu gwneud yn olynol.

304
00:18:11,040 --> 00:18:24,920
Felly diflannu, daeth yn ôl - am ryw reswm, nid y croen yn digwydd.

305
00:18:24,920 --> 00:18:30,030
Gadewch i ni roi cynnig arni. Yeah, felly mae'n pylu allan ac yna llithro i ffwrdd.

306
00:18:30,030 --> 00:18:32,230
Ac mae llawer mwy. Gallwch ddefnyddio'r swyddogaeth animeiddio

307
00:18:32,230 --> 00:18:35,370
i greu eich animeiddiadau hun, sy'n eithaf cymhleth,

308
00:18:35,370 --> 00:18:38,790
ond mae'n rhoi i chi extensibility diddiwedd.

309
00:18:38,790 --> 00:18:40,630
Gallwch wneud unrhyw fath o animeiddio ydych ei eisiau.

310
00:18:40,630 --> 00:18:44,230
Gallwch hefyd ddefnyddio ciw i ciw i fyny animeiddiadau lluosog ar y tro.

311
00:18:44,230 --> 00:18:47,340
Felly, os ydych chi eisiau rhywbeth i hedfan ar draws y dudalen,

312
00:18:47,340 --> 00:18:49,860
sleid o'r dde uchaf i'r chwith gwaelod, gallwch wneud hynny,

313
00:18:49,860 --> 00:18:55,240
a dim ond yn cael criw o gamau gweithredu yn mynd un ar ôl y llall.

314
00:18:55,240 --> 00:18:57,490
>> Y peth nesaf rydym yn mynd i siarad amdano yw digwyddiadau.

315
00:18:57,490 --> 00:19:02,090
Digwyddiadau yn caniatáu i chi - hyd yn hyn, rydym wedi newydd gael ei teipio pethau i mewn i'r consol

316
00:19:02,090 --> 00:19:04,870
ac mae hynny'n un ffordd i wneud i hyn ddigwydd,

317
00:19:04,870 --> 00:19:08,020
ond ar dudalen go iawn, nid ydych yn mynd i fod yn gallu

318
00:19:08,020 --> 00:19:10,020
gwneud y pethau math o ddefnyddiwr i mewn i'r consol.

319
00:19:10,020 --> 00:19:12,050
Ydych am i bethau ddigwydd yn awtomatig.

320
00:19:12,050 --> 00:19:18,060
Er hynny, mae angen i chi ddefnyddio digwyddiadau sy'n activate ar rai penodol digwydd digwyddiad.

321
00:19:18,060 --> 00:19:21,340
Gallwch edrych ar y dogfennau am y manylion llawn.

322
00:19:21,340 --> 00:19:24,030
Felly, gadewch i ni weld. Rydym yn awyddus i guddio neu ddangos y blwch,

323
00:19:24,030 --> 00:19:29,340
ond ar hyn o bryd nid botwm hwn yn gwneud unrhyw beth gan nad oeddwn yn ei weithredu eto.

324
00:19:29,340 --> 00:19:35,420
Rydw i'n mynd i fynd i'r dudalen HTML gwirioneddol.

325
00:19:35,420 --> 00:19:38,560
Dyma y sleid. Mae yna div ar gyfer y sleid.

326
00:19:38,560 --> 00:19:41,230
Mae wedi y dosbarth o sleidiau.

327
00:19:41,230 --> 00:19:46,890
Mae y testun. Yn awr, mae y blwch hwn ac y botwm blwch.

328
00:19:46,890 --> 00:19:52,900
Sut y byddem yn mewn gwirionedd yn gwneud hyn yn diflannu?

329
00:19:52,900 --> 00:19:58,250
Yn gyntaf oll, gadewch i ni ysgrifennu swyddogaeth sy'n gwneud y blwch ID diflannu.

330
00:19:58,250 --> 00:20:01,820
Mae hyn yn y gystrawen am funtion, gadewch i ni ei alw'n ddim hideTheBox.

331
00:20:01,820 --> 00:20:06,130
Nid yw'n cymryd unrhyw ddadleuon, oherwydd nad oes unrhyw ddadleuon i'w cymryd.

332
00:20:06,130 --> 00:20:08,950
Gallwn ddewis y blwch adnabod.

333
00:20:08,950 --> 00:20:15,020
Felly, gan ddefnyddio'r jQuery dewis, gallwn ddewis blwch adnabod,

334
00:20:15,020 --> 00:20:17,700
ac yna dim ond yn ei gwneud yn diflannu.

335
00:20:17,700 --> 00:20:20,690
Gadewch i ni ei wneud yn pylu allan.

336
00:20:20,690 --> 00:20:27,390
Os byddwn yn rhedeg y swyddogaeth hon yn y consol ei hun,

337
00:20:27,390 --> 00:20:33,380
gallem ddiffinio swyddogaeth hon, gallwn alw hideTheBox, ac y mae'n gweithio.

338
00:20:33,380 --> 00:20:36,650
Ond yr ydym am i hyn ddigwydd pan fydd y botwm ei bwyso mewn gwirionedd.

339
00:20:36,650 --> 00:20:40,950
I wneud hynny, mae'n rhaid i ni ddefnyddio digwyddiad.

340
00:20:40,950 --> 00:20:45,500
I rwymo digwyddiad i ryw botwm penodol neu ryw digwydd weithredu,

341
00:20:45,500 --> 00:20:50,040
mae'n rhaid i ni ddewis yr elfen y bydd y digwyddiad yn sbarduno -

342
00:20:50,040 --> 00:20:52,650
neu a fydd yn sbarduno'r digwyddiad, mae'n ddrwg gennyf.

343
00:20:52,650 --> 00:20:57,220
>> Felly, yn gyntaf oll, gadewch i ni ddewis y botwm blwch ID

344
00:20:57,220 --> 00:20:59,610
oherwydd dyna y botwm, ac yn awr, ar gyfer y botwm,

345
00:20:59,610 --> 00:21:02,750
rydym am i greu animeiddiad pan gaiff ei glicio.

346
00:21:02,750 --> 00:21:05,040
Felly, mae hyn yn swyddogaeth cliciwch.

347
00:21:05,040 --> 00:21:08,470
Mae'n caniatáu i chi i rwymo swyddogaeth arall iddo.

348
00:21:08,470 --> 00:21:12,320
Mae'r swyddogaeth hon yn cymryd swyddogaeth arall fel dadl

349
00:21:12,320 --> 00:21:14,310
gallwn drosglwyddo yn y swyddogaeth hideTheBox,

350
00:21:14,310 --> 00:21:20,950
a phryd bynnag y botwm hwn yn cael ei glicio, bydd y swyddogaeth gweithredu yn awtomatig.

351
00:21:20,950 --> 00:21:24,850
Felly, bydd hyn yn gweithio os ydym yn achub y, 'n annhymerus' adnewyddu,

352
00:21:24,850 --> 00:21:33,460
ac - un eiliad, Mae'n ddrwg gen i.

353
00:21:33,460 --> 00:21:44,770
Gadewch i mi atgyweiria hon yn gyflym iawn.

354
00:21:44,770 --> 00:21:50,680
Iawn. Dyna ni. Felly, yn awr y blwch yn diflannu pan fyddwn yn clicio ar y botwm.

355
00:21:50,680 --> 00:21:55,470
Gallwn hefyd newid hyn i ychydig fadeToggle,

356
00:21:55,470 --> 00:22:00,020
ei newid dim ond i guddio neu ddangos y blwch,

357
00:22:00,020 --> 00:22:03,850
a bydd hyn hefyd yn gweithio hefyd, os ydym yn adnewyddu.

358
00:22:03,850 --> 00:22:08,550
Gallwn ei guddio, gallwn hefyd yn dangos hynny, ac y bydd yn parhau i weithio.

359
00:22:08,550 --> 00:22:12,210
Beth arall y gallwn ei wneud yw, nid oes gennym mewn gwirionedd i ddiffinio swyddogaeth hon hideTheBox

360
00:22:12,210 --> 00:22:15,050
cyn i ni alw y swyddogaeth cliciwch.

361
00:22:15,050 --> 00:22:17,640
Felly, yn hytrach na diffinio swyddogaeth ac yn galw hideTheBox,

362
00:22:17,640 --> 00:22:20,310
rydym yn unig yn mynd i alw os y peth ei glicio.

363
00:22:20,310 --> 00:22:22,310
Felly, gallwn ddiffinio ddienw i mewn yma,

364
00:22:22,310 --> 00:22:25,070
sydd yn nodwedd sy'n JavaScript wedi.

365
00:22:25,070 --> 00:22:29,720
Gallwch diffinio swyddogaeth; fel arfer, byddem yn dweud swyddogaeth hideTheBox

366
00:22:29,720 --> 00:22:34,490
gyda dadleuon, ond yn hytrach, gallwn ddweud gweithredu unrhyw ddadleuon,

367
00:22:34,490 --> 00:22:36,870
cychwyn y Brace cyrliog i ddiffinio swyddogaeth,

368
00:22:36,870 --> 00:22:40,780
gau'r cyrliog Brace, ac yna dim ond diffinio swyddogaeth yma,

369
00:22:40,780 --> 00:22:45,130
o fewn y cromfachau cyntaf a'r olaf parenthesis

370
00:22:45,130 --> 00:22:47,860
sy'n cyfateb i ddadleuon y swyddogaeth cliciwch.

371
00:22:47,860 --> 00:22:53,320
Felly, rydym yn pasio yn y swyddogaeth hon, gallwn copïo y llinell o god dde yma,

372
00:22:53,320 --> 00:22:55,450
a fydd yn gwneud yr un peth yn union.

373
00:22:55,450 --> 00:22:57,290
Ac yn awr nid ydym yn cael y swyddogaeth fadeTheBox ar hap

374
00:22:57,290 --> 00:22:59,960
sydd yn eistedd o gwmpas am unrhyw reswm amlwg.

375
00:22:59,960 --> 00:23:02,070
Mae'r swyddogaeth wedi'i diffinio'n ddienw, nid oes ganddo enw.

376
00:23:02,070 --> 00:23:08,060
Ni fydd ond yn gweithredu pan fyddwn yn clicio ar y botwm blwch.

377
00:23:08,060 --> 00:23:12,180
Mor braf unwaith eto, un yn fwy o amser, a gallwch weld ei fod yn dal i weithio.

378
00:23:12,180 --> 00:23:16,700
A dyna sut yr ydych yn creu digwyddiadau.

379
00:23:16,700 --> 00:23:19,190
>> Mae yna lawer o wahanol ddigwyddiadau y gallwn eu defnyddio.

380
00:23:19,190 --> 00:23:23,540
Rydw i'n mynd i newid yn ôl i ddefnyddio'r consol i ddim ond dangos i chi sut mae'r rhain yn gweithio.

381
00:23:23,540 --> 00:23:28,210
Mae'r IDs gyfer pob un o'r rhain yn cyfateb i bob blwch.

382
00:23:28,210 --> 00:23:33,020
Felly y blwch hwn yn cliciwch ID, yr un yma yn ID allweddol, ac mae hyn yn un yn ID llygoden.

383
00:23:33,020 --> 00:23:36,120
Un peth arall yw nad oes y swyddogaeth gweithredu; hytrach na deipio allan bob tro,

384
00:23:36,120 --> 00:23:41,610
Fi 'n weithredol mynd yn ei flaen ac yn diffinio y swyddogaeth gweithredu i lawr yma.

385
00:23:41,610 --> 00:23:46,860
Mae'n gwneud yr un peth â'r swyddogaeth hideTheBox.

386
00:23:46,860 --> 00:23:51,340
Mae'n cael y blwch hwn a naill ai pylu allan neu pylu ei fod mewn

387
00:23:51,340 --> 00:23:54,110
A dyna pam ein bod yn gallu ei ddefnyddio yma.

388
00:23:54,110 --> 00:24:00,350
Felly, os ydym yn cliciwch ar cliciwch yma ID, rydym am wneud y blwch diflannu neu'n ailymddangos.

389
00:24:00,350 --> 00:24:03,610
Mae yr un peth ag y botwm a gawsom yn y sleid olaf.

390
00:24:03,610 --> 00:24:07,450
Nawr, ar ôl yr ydym yn galw hynny, gallwn glicio ar hyn a bydd y blwch yn diflannu,

391
00:24:07,450 --> 00:24:10,160
Yna, cliciwch arno eto a bydd y blwch yn ailymddangos.

392
00:24:10,160 --> 00:24:12,480
Dyna 'n bert syml. Cliciwch ddwywaith yn gwneud yr un peth,

393
00:24:12,480 --> 00:24:15,660
ac eithrio ei fod yn gofyn clic dwbl.

394
00:24:15,660 --> 00:24:19,030
Felly, os ydych yn cliciwch arno unwaith a chliciwch arno eto fydd dim yn digwydd,

395
00:24:19,030 --> 00:24:21,140
ond os ydych yn cliciwch ddwywaith yn gyflym, bydd yn diflannu.

396
00:24:21,140 --> 00:24:23,310
Os ydych yn cliciwch ddwywaith eto, bydd yn dod yn ôl.

397
00:24:23,310 --> 00:24:25,250
Felly, mae hynny'n eithaf syml.

398
00:24:25,250 --> 00:24:31,170
Mewnbwn bysellfwrdd yn fath o 'n annaearol, nid wyf yn credu ei fod mewn gwirionedd yn gweithio yn yr enghraifft hon

399
00:24:31,170 --> 00:24:37,670
oherwydd bod yr allwedd i lawr, hyd allweddol a'r wasg allweddol a chamau gweithredu allweddol eraill

400
00:24:37,670 --> 00:24:47,190
activate ni waeth pa elfen rydych rhwymo iddo.

401
00:24:47,190 --> 00:24:51,410
Er enghraifft, hyd yn oed os wyf yn rhwymo i lawr allweddol i gorff neu rywbeth arall yn gyfan gwbl,

402
00:24:51,410 --> 00:24:55,950
yna byddai'n dal i activate waeth - nid yw'n benodol.

403
00:24:55,950 --> 00:25:00,190
Nid oes yn rhaid i mi fod yn clicio ar hyn ac yn pwyso allwedd i wneud unrhyw beth yn diflannu.

404
00:25:00,190 --> 00:25:04,470
Byddai'n cael ei weithredu waeth pa elfen rwy'n ar hyn o bryd mewn

405
00:25:04,470 --> 00:25:06,880
Felly, nid yw'r rhain yn gweithio mewn gwirionedd yn yr enghraifft hon

406
00:25:06,880 --> 00:25:13,180
gan nad yw'n nabod fi fel mynd i mewn cyfrannu at y mewnbwn div bysellfwrdd.

407
00:25:13,180 --> 00:25:15,740
>> Ond os ydych yn edrych ar y camau gweithredu llygoden,

408
00:25:15,740 --> 00:25:19,620
yr un cyntaf yn hofran, a gall wneud rhywfaint o hyn gan ddefnyddio CSS.

409
00:25:19,620 --> 00:25:24,280
Os ydych yn defnyddio CSS, gallwch greu, felly os ydych yn hofran dros rywbeth,

410
00:25:24,280 --> 00:25:28,940
Yna, ei newidiadau arddull.

411
00:25:28,940 --> 00:25:32,170
Ond gan ddefnyddio jQuery gallwch newid y arddulliau o bethau eraill hefyd.

412
00:25:32,170 --> 00:25:37,120
Felly, er enghraifft, rydym yn mynd i alw gweithredu os ydym yn hofran dros div hwn.

413
00:25:37,120 --> 00:25:39,660
Mae hynny'n golygu os ydym yn hofran drosto, yna bydd y blwch yn diflannu.

414
00:25:39,660 --> 00:25:42,430
Os byddwn yn symud i ffwrdd oddi wrtho, bydd y blwch yn ailymddangos.

415
00:25:42,430 --> 00:25:45,090
Os byddwn yn galw hyn ac yn hofran drosto, y blwch yn diflannu,

416
00:25:45,090 --> 00:25:47,050
a chyn gynted ag yr ydym yn symud i ffwrdd, daw yn ôl.

417
00:25:47,050 --> 00:25:49,750
Os byddwn yn galw hyn yn swyddogaeth hofran ar y ID llygoden,

418
00:25:49,750 --> 00:25:54,380
sy'n cyfateb i'r blwch hwn, yna, os ydym yn hofran dros y blwch,

419
00:25:54,380 --> 00:26:00,440
Yna, bydd y blwch yn diflannu mewn gwirionedd - mae'n cael ei ffynci ar hyn o bryd, ond -

420
00:26:00,440 --> 00:26:06,310
os byddwn yn symud i ffwrdd oddi wrtho, bydd yn ailymddangos. Ar hyn o bryd mae'n ôl am ryw reswm.

421
00:26:06,310 --> 00:26:12,720
Mae'r llygoden fynd i mewn a swyddogaethau symud llygoden yn braidd yn debyg, ond ychydig yn wahanol.

422
00:26:12,720 --> 00:26:16,470
Llygoden mynd i mewn dim ond activates pan fydd y llygoden yn mynd i mewn i'r blwch, yn ôl y disgwyl.

423
00:26:16,470 --> 00:26:19,210
Felly, os byddwch yn symud i mewn iddo, bydd yn diflannu.

424
00:26:19,210 --> 00:26:23,210
Ond ni fydd yn ailymddangos pan fyddwch yn symud i ffwrdd, bydd rhaid i chi symud yn ôl arno er mwyn iddo ddod yn ôl.

425
00:26:23,210 --> 00:26:25,590
Mae yna hefyd y swyddogaeth symud llygoden, a fydd yn ysgogi

426
00:26:25,590 --> 00:26:29,300
pryd bynnag y llygoden yn oed yn bresennol yn y blwch.

427
00:26:29,300 --> 00:26:32,430
Felly, bydd yn jyst cadw ar fynd, pylu i mewn ac allan.

428
00:26:32,430 --> 00:26:35,660
Ac mae'n logio mewn gwirionedd - mae'n ymddangos fel mai dim ond pylu i mewn ac allan,

429
00:26:35,660 --> 00:26:39,140
ond mae'n mewn gwirionedd yn logio llawer mwy o gamau na hyn,

430
00:26:39,140 --> 00:26:43,550
felly pan fyddwch yn symud i ffwrdd bydd yn jyst cadw i fynd oherwydd ei fod yn cofnodi fel mil ohonynt.

431
00:26:43,550 --> 00:26:46,620
Efallai nad mil. Efallai bump.

432
00:26:46,620 --> 00:26:50,200
Mae'n cofnodi mwy na hynny.

433
00:26:50,200 --> 00:26:53,280
Y pwynt yw, yr holl gamau llygoden, mae yna lawer ohonynt.

434
00:26:53,280 --> 00:26:55,480
Gallwch ddarllen i fyny ar y rhai eraill, ond maent i gyd ychydig yn wahanol,

435
00:26:55,480 --> 00:26:57,700
a gallwch ddewis pa bynnag un sydd ei angen arnoch

436
00:26:57,700 --> 00:27:02,130
am ba un bynnag ddiben penodol yr ydych yn ceisio ei wneud.

437
00:27:02,130 --> 00:27:05,060
>> Y peth nesaf i ddim yn mynd i siarad amdano yw AJAX.

438
00:27:05,060 --> 00:27:09,340
AJAX, yr wyf yn gwybod nad ydym yn cwmpasu JavaScript mor fanwl eleni,

439
00:27:09,340 --> 00:27:11,770
felly Im 'jyst yn mynd i siarad am AJAX yn gyffredinol am funud.

440
00:27:11,770 --> 00:27:15,210
AJAX yn sefyll am JavaScript Asynchronous a XML.

441
00:27:15,210 --> 00:27:19,030
Mae'n yn y bôn, er enghraifft, pan fyddwch chi ar Facebook ac yn gwthio i chi hysbysu,

442
00:27:19,030 --> 00:27:23,060
hynny oherwydd AJAX yn rhedeg ar eich porwr gwe.

443
00:27:23,060 --> 00:27:25,800
Bob cwpl o eiliadau eich porwr gwe mewn gwirionedd

444
00:27:25,800 --> 00:27:29,420
mynd i gweinyddwyr Facebook, gan ofyn iddynt, a oes gennych unrhyw beth newydd i mi,

445
00:27:29,420 --> 00:27:31,980
ac yna mae'n dod yn ôl i chi.

446
00:27:31,980 --> 00:27:36,320
Mae hyn yn eich galluogi i anfon ceisiadau i weinydd

447
00:27:36,320 --> 00:27:38,660
heb holi i orfod lwytho'r dudalen.

448
00:27:38,660 --> 00:27:42,040
Fel arfer, felly, os ydych ond yn defnyddio PHP a chronfa ddata,

449
00:27:42,040 --> 00:27:45,480
rhaid i chi adnewyddu'r dudalen cyn y gallwch gael gwybodaeth newydd o'r gweinydd.

450
00:27:45,480 --> 00:27:48,770
Ond gan ddefnyddio AJAX, gallwch dynnu am y wybodaeth newydd yn gyson,

451
00:27:48,770 --> 00:27:52,250
neu dynnu ar ei gyfer pan fyddwch yn clicio ar fotwm neu unrhyw beth fel 'na.

452
00:27:52,250 --> 00:27:56,140
Felly, mae hyn yn ein galluogi i anfon ceisiadau heb ail-lwytho y dudalen,

453
00:27:56,140 --> 00:27:58,130
a gallwn ddefnyddio naill ai GET neu SWYDD ceisiadau.

454
00:27:58,130 --> 00:28:05,370
>> GET ceisiadau, er enghraifft, os ydych i Google.com in English

455
00:28:05,370 --> 00:28:10,900
ac yn gwneud prawf q =. Mae hynny'n rhoi prawf ymholiad iddynt.

456
00:28:10,900 --> 00:28:15,890
A dyna cais GET oherwydd ei fod yn pasio yn y paramedrau hynny i mewn i'r URL ei hun.

457
00:28:15,890 --> 00:28:19,250
Mae cais SWYDD fel os ydych yn eu hanfon drwy'r post.

458
00:28:19,250 --> 00:28:22,500
Mae'n debyg i chi ei roi mewn llythyr a long i ffwrdd iddynt,

459
00:28:22,500 --> 00:28:25,140
ond nid ydynt mewn gwirionedd yn gweld y cynnwys. Dydyn nhw ddim i'w gweld yn y URL.

460
00:28:25,140 --> 00:28:31,040
Ni allwch deipio yn uniongyrchol i mewn; rhaid i chi anfon hi bron yn gyfrinachol.

461
00:28:31,040 --> 00:28:33,880
Mae'n mewn swydd.

462
00:28:33,880 --> 00:28:38,660
Ond gan ddefnyddio jQuery, gallwch wneud GET a POST ceisiadau

463
00:28:38,660 --> 00:28:42,740
yn llawer haws nag y gallai chi fel arfer gan ddefnyddio dim ond JavaScript plaen.

464
00:28:42,740 --> 00:28:50,140
Gallwch holi APIs ddefnyddio ceisiadau GET, a gallwch hefyd wirio am gwybodaeth mewngofnodi.

465
00:28:50,140 --> 00:28:54,400
Ar y dudalen nesaf, yr wyf yn creu hwn, sy'n gofyn, "Beth sydd i ginio?"

466
00:28:54,400 --> 00:28:58,230
gan ddefnyddio bwyd Harvard API, felly gadewch i ni dynnu hynny.

467
00:28:58,230 --> 00:29:01,840
Mae hyn yn unig yn enghraifft o sut y gallwch ddefnyddio jQuery i wneud cais GET i API

468
00:29:01,840 --> 00:29:04,200
a chael gwybodaeth yn ôl oddi wrtho.

469
00:29:04,200 --> 00:29:07,090
Felly, yr ydym am weld y fwydlen ar gyfer heddiw,

470
00:29:07,090 --> 00:29:10,560
ac yr ydym am weld beth sydd i ginio.

471
00:29:10,560 --> 00:29:16,500
Dyma 'r URL i greu cais GET yn jQuery.

472
00:29:16,500 --> 00:29:18,600
eich bod yn defnyddio'r $. cael swyddogaeth.

473
00:29:18,600 --> 00:29:22,290
Mae'r ddadl gyntaf yw'r URL, felly yn union beth rydych yn ei holi.

474
00:29:22,290 --> 00:29:27,200
Yna y ddadl nesaf yn swyddogaeth sy'n executes pan fydd y cais GET yn gyflawn.

475
00:29:27,200 --> 00:29:29,980
Felly, i chi anfon rhywfaint cais i'r gweinydd, arhoswch iddo ddod yn ôl.

476
00:29:29,980 --> 00:29:33,770
Pan fydd yn dod yn ôl, rydych yn mynd i gymryd rhai camau â'r data sy'n ôl oddi wrth y gweinydd.

477
00:29:33,770 --> 00:29:37,520
Gadewch i ni fynd yn ei flaen a rhoi côd i hyn hefyd.

478
00:29:37,520 --> 00:29:42,110
Doeddwn i ddim yn codio hyn naill ai, ar bwrpas.

479
00:29:42,110 --> 00:29:46,660
Dyma y TODO. Yn gyntaf oll, gadewch i ni ddefnyddio'r digwyddiad rhwymo

480
00:29:46,660 --> 00:29:50,820
felly pan botwm hwn yn cael ei wasgu, byddwn yn anfon cais GET i ffwrdd.

481
00:29:50,820 --> 00:29:53,410
A pan fydd y cais GET dychwelyd gyda rhywfaint o ddata,

482
00:29:53,410 --> 00:29:57,290
rydym yn mynd i ysgrifennu i mewn pryd hwn info div adnabod.

483
00:29:57,290 --> 00:30:02,860
Yn gyntaf oll, gadewch i ni ddewis y bwyd ID botwm.

484
00:30:02,860 --> 00:30:07,320
Pan gaiff ei glicio, rydym am iddo wneud rhywbeth.

485
00:30:07,320 --> 00:30:11,930
Gadewch i 'jyst yn ei gwneud yn fuction dienw, fel o'r blaen.

486
00:30:11,930 --> 00:30:15,550
Lapio gall y rhai braces cyrliog,

487
00:30:15,550 --> 00:30:18,530
a phryd y botwm hwn yn cael ei wasgu, rydym am anfon cais GET

488
00:30:18,530 --> 00:30:20,750
i weld beth sydd i ginio.

489
00:30:20,750 --> 00:30:24,970
I wneud hynny, gallwn jyst deipio i mewn $. Gael.

490
00:30:24,970 --> 00:30:28,850
Mae hon yn swyddogaeth jQuery, gan ddefnyddio'r arwydd ddoler.

491
00:30:28,850 --> 00:30:31,430
Mae'n cymryd ychydig o ddadleuon. Mae'r un cyntaf yn y URL,

492
00:30:31,430 --> 00:30:34,450
yr ail un yw swyddogaeth galw'n ôl, y swyddogaeth sy'n cael ei alw

493
00:30:34,450 --> 00:30:37,740
pan fydd y cais mewn gwirionedd yn dychwelyd.

494
00:30:37,740 --> 00:30:39,890
Gadewch i 'jyst adeiladu'r URL gyntaf.

495
00:30:39,890 --> 00:30:44,650
Gallwn gael oddi wrth y API fod David ysgrifennu i fyny.

496
00:30:44,650 --> 00:30:51,360
Mynd yma, gallwn weld ei fod yn food.cs50.net/api/1.3/menus,

497
00:30:51,360 --> 00:30:54,140
ac yna 'ch jyst pasio yn enwau y paramedrau y byddech yn ei hoffi.

498
00:30:54,140 --> 00:30:57,760
Felly paramedr 1 yn werth 1.

499
00:30:57,760 --> 00:31:00,910
Mae'n edrych fel dyddiad safonol, dyddiad cychwyn, ddiffygion hyd heddiw

500
00:31:00,910 --> 00:31:03,110
os nad ydych yn mynd i unrhyw beth, a dyddiad gorffen hefyd diffygion

501
00:31:03,910 --> 00:31:05,930
hyd heddiw os nad ydych yn mynd i unrhyw beth.

502
00:31:05,930 --> 00:31:10,790
Dyna beth yr ydym ei eisiau. Rydym am i ddim ond yn cael y wybodaeth ar gyfer heddiw.

503
00:31:10,790 --> 00:31:12,950
>> Rydym am i'r fformat fod mewn JSON.

504
00:31:12,950 --> 00:31:15,570
Dyna dim ond mympwyol, a gallwch ddefnyddio unrhyw ffurflen y byddwch yn ei eisiau.

505
00:31:15,570 --> 00:31:18,950
Gallwch ddefnyddio CSV, ond JSON yw JavaScript Nodiant Gwrthrych.

506
00:31:18,950 --> 00:31:24,150
Mae'n hawdd iawn i JavaScript i ddeall yr hyn y mae'n ei olygu,

507
00:31:24,150 --> 00:31:27,110
a gallwn argraffu allan yn haws y ffordd honno.

508
00:31:27,110 --> 00:31:30,490
Felly, gadewch i ni gofyn am hynny mewn JSON, a gwneud cais am ginio gadewch i.

509
00:31:30,490 --> 00:31:37,660
Felly, pryd = cinio. Dim ond i ysgrifennu i fyny y URL, rydym yn mynd yn ôl yma.

510
00:31:37,660 --> 00:31:41,290
Mae bwydlenni. Y paramedr cyntaf yw allbwn = JSON

511
00:31:41,290 --> 00:31:44,640
oherwydd dyna beth yr ydym ei eisiau, ac rydych yn gwahanu'r paramedrau ag 'a.'

512
00:31:44,640 --> 00:31:48,940
Yr ail baramedr yw - Dydw i ddim yn cofio.

513
00:31:48,940 --> 00:31:52,170
Pryd o fwyd. Ac rydym am cinio =.

514
00:31:52,170 --> 00:31:57,390
Gallwch brofi hyn drwy deipio URL i mewn i'ch porwr ac yn mynd iddo.

515
00:31:57,390 --> 00:32:03,120
Bydd yn rhoi rhywfaint o allbwn chi. Dim ond bagad o bethau sy'n am ginio.

516
00:32:03,120 --> 00:32:10,410
Mae'n ffurf hyll hwn. Rydym am ei argraffu ar ein tudalen mewn fformat gwell.

517
00:32:10,410 --> 00:32:12,580
Felly, yr URL yn gywir, yn awr mae'n rhaid i ni ysgrifennu swyddogaeth

518
00:32:12,580 --> 00:32:18,300
i alw yn ôl pan fydd y cais yn llwyddiannus.

519
00:32:18,300 --> 00:32:20,430
Bydd y swyddogaeth hon mewn gwirionedd yn cymryd dadl. Bydd yn data.

520
00:32:20,430 --> 00:32:25,650
Mae'r data hyn yn dod yn ôl oddi wrth y cais GET ar ôl y cais GET yn cael ei wneud.

521
00:32:25,650 --> 00:32:28,860
Gallwn wneud y braces cyrliog, mewn yma byddwn yn ysgrifennu y swyddogaeth dienw

522
00:32:28,860 --> 00:32:33,900
sy'n executes, gan ddefnyddio'r data hwnnw pan fyddwn yn cael y wybodaeth yn ôl.

523
00:32:33,900 --> 00:32:37,840
Felly data, pan fyddwn yn teipio yn yr URL,

524
00:32:37,840 --> 00:32:41,540
mae hyn yn beth mae'r data yn mynd i edrych fel. Mae'n mynd i fod yn y llinyn enfawr.

525
00:32:41,540 --> 00:32:48,610
Ond y peth da yw, gall JavaScript dosrannu iddo gan ddefnyddio'r swyddogaeth JSON.parse.

526
00:32:48,610 --> 00:32:54,950
Felly, gadewch i ni greu newidyn newydd o'r enw data dosrannu.

527
00:32:54,950 --> 00:32:57,060
A data dosrannu yn amrywiaeth o wrthrychau.

528
00:32:57,060 --> 00:33:04,200
Mae pob gwrthrych yn cynnwys gwybodaeth fel - wel, gadewch i ni edrych.

529
00:33:04,200 --> 00:33:08,980
Mae ganddo dyddiad, pryd o fwyd, categori, rysáit, hyn i gyd pethau eraill.

530
00:33:08,980 --> 00:33:10,860
Felly, gadewch i ni argraffu'r enw ar gyfer pob un.

531
00:33:10,860 --> 00:33:13,790
Gadewch i ailadrodd dros holl amrywiaeth o bethau yr ydym yn mynd yn ôl oddi wrtho,

532
00:33:13,790 --> 00:33:17,570
a dim ond argraffu pob un - argraffu enw pob un.

533
00:33:17,570 --> 00:33:22,670
Mae hyn yn ar gyfer dolen.

534
00:33:22,670 --> 00:33:26,030
>> Mae JavaScript hwn gystrawen ddefnyddiol lle gallwch greu amrywiol ac ddolen dros amrywiaeth,

535
00:33:26,030 --> 00:33:30,150
ac var fi yn unig y iterator, felly yn hytrach na gorfod gwneud var i = 0,

536
00:33:30,150 --> 00:33:40,290
fi oedd yn llai na hyd, i + +, gallwch wneud var i mewn data parsed.

537
00:33:40,290 --> 00:33:47,060
Yn yr enghraifft hon, bydd data parsed (i) yn cyfateb i'r elfen gyfredol

538
00:33:47,060 --> 00:33:49,850
y rhesi, y gwrthrych ei hun.

539
00:33:49,850 --> 00:33:51,720
Ac rydym am i gael y enw allan ohono.

540
00:33:51,720 --> 00:33:54,170
Felly, gadewch i ni wneud enw.

541
00:33:54,170 --> 00:33:57,000
A'r peth olaf yw, rydym yn mynd i gael rhywfaint o jQuery eto.

542
00:33:57,000 --> 00:34:02,660
A dweud y gwir ychwanegu at y div, pryd hwn div gwybodaeth sy'n wag ar hyn o bryd.

543
00:34:02,660 --> 00:34:05,430
Felly, gadewch i ni ddewis hynny.

544
00:34:05,430 --> 00:34:13,870
Byddwn yn defnyddio'r wybodaeth pryd jQuery a dewiswch ID div, neu flawd gwybodaeth ID, mae'n ddrwg gennyf.

545
00:34:13,870 --> 00:34:16,580
Rydym yn awyddus i atodi i hyn.

546
00:34:16,580 --> 00:34:21,030
Pe baem yn gwneud prawf, er enghraifft, fyddai dim ond yn ysgrifennu drosti bob tro.

547
00:34:21,030 --> 00:34:29,190
Felly, gallwn yn unig atodi hyn.

548
00:34:29,190 --> 00:34:31,889
Yr elfen bresennol yn y casgliad, byddwn yn cael yr enw allan ohono,

549
00:34:31,889 --> 00:34:38,159
a byddwn yn ei atodi at ddiwedd y pryd info div adnabod.

550
00:34:38,159 --> 00:34:40,120
Ac yna dim ond i wneud yn edrych yn lanach,

551
00:34:40,120 --> 00:34:51,550
byddwn hefyd yn atodi toriad llinell felly nid yw'n gyd ar un llinell.

552
00:34:51,550 --> 00:34:55,280
Felly, os bydd popeth yn mynd yn dda, a ddylai fod yn dda -

553
00:34:55,280 --> 00:34:57,220
yn gyntaf oll, pryd bynnag y botwm hwn yn cael ei glicio,

554
00:34:57,220 --> 00:35:00,070
bydd yn anfon y cais GET i'r URL.

555
00:35:00,070 --> 00:35:02,500
Pan fydd y data yn dod yn ôl oddi wrtho, bydd yn dosrannu iddo,

556
00:35:02,500 --> 00:35:06,950
troi i mewn JSON, ddolen dros y casgliad cyfan sy'n cynrychioli'r data,

557
00:35:06,950 --> 00:35:10,310
ac yna atodi enw a seibiant llinell

558
00:35:10,310 --> 00:35:16,500
i bob llinell yn y pryd hwn ID gwybodaeth a oedd yn wag yn flaenorol.

559
00:35:16,500 --> 00:35:18,910
Felly, mynd yn ôl i'r dudalen hon, byddwn yn adnewyddu,

560
00:35:18,910 --> 00:35:23,690
cliciwch, cael gwybod - nid yw'n gweithio. Mae hynny'n anffodus.

561
00:35:23,690 --> 00:35:25,830
A dyma lle debugging yn dod i mewn

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

563
00:35:30,070 --> 00:35:57,210
Mae hynny'n ddiddorol.

564
00:35:57,210 --> 00:35:59,720
Mae pob hawl, yn dda, yn hytrach na gwario amser yn gwneud hyn, Im 'jyst yn mynd i

565
00:35:59,720 --> 00:36:07,070
dynnu i fyny y ffeil gwneud hynny gennyf, sef y fersiwn gwblhau.

566
00:36:07,070 --> 00:36:13,710
Dydw i ddim yn siwr beth yw'r gwahaniaeth, ond gallwn jyst agor hyn i fyny yn lle hynny.

567
00:36:13,710 --> 00:36:19,740
Ac rydym yn mynd i'r AJAX, a dylai hyn weithio yn gywir.

568
00:36:19,740 --> 00:36:21,730
Dyna beth oedd ar gyfer cinio heddiw,

569
00:36:21,730 --> 00:36:24,870
mewn unrhyw drefn benodol, gyda dyfyniadau o gwmpas, felly nid yw'r harddaf.

570
00:36:24,870 --> 00:36:27,090
Ond, yn amlwg, os ydych yn gwneud hyn ar gyfer prosiect terfynol,

571
00:36:27,090 --> 00:36:30,120
y byddech yn ei wneud yn edrych yn well.

572
00:36:30,120 --> 00:36:32,530
Ond dim ond yn enghraifft syml o sut yr ydych yn gwneud y cais GET.

573
00:36:32,530 --> 00:36:34,580
Ac os ydym yn edrych ar y cod ei hun, rwy'n dyfalu, Rwy'n eithaf siwr

574
00:36:34,580 --> 00:36:39,690
mae'n dal i 'n bert lawer yr un fath.

575
00:36:39,690 --> 00:37:04,990
Oh, anghofiais i drosi i linyn, dyna ni.

576
00:37:04,990 --> 00:37:07,920
Na, nid yn dal i weithio. Beth bynnag, dyma y cod gwblhau gwirioneddol

577
00:37:07,920 --> 00:37:10,300
ar gyfer yr hyn dylai hyn yn edrych fel,

578
00:37:10,300 --> 00:37:16,400
ac mae'n gwneud yr un peth â hyn yr wyf newydd eu gweithredu.

579
00:37:16,400 --> 00:37:22,760
Pan fyddwch yn clicio ar y botwm, mae'n defnyddio GET JSON i gramadegu y data yn awtomatig.

580
00:37:22,760 --> 00:37:29,190
Mae'n cymryd y data yn ôl oddi wrtho a dolenni trwy'r casgliad cyfan

581
00:37:29,190 --> 00:37:32,770
a phrintiau allan - beth bynnag sydd i ginio heddiw, yr enw ohono,

582
00:37:32,770 --> 00:37:38,020
a appends egwyl llinell ar ôl pob llinell.

583
00:37:38,020 --> 00:37:41,100
Dyna sut yr ydych yn defnyddio'r swyddogaeth GET.

584
00:37:41,100 --> 00:37:44,040
>> Gallwch hefyd ddefnyddio POST, nad oedd gen i amser

585
00:37:44,040 --> 00:37:47,940
i ysgrifennu esiampl ar ei gyfer, ond gallwn edrych ar y dogfennau.

586
00:37:47,940 --> 00:37:53,220
Os ydych yn edrych ar jquery.post,

587
00:37:53,220 --> 00:37:55,510
gallwch weld ei fod yn bron yr un peth.

588
00:37:55,510 --> 00:38:01,650
Mae gennych URL, ond yn lle pasio paramedrau defnyddio -

589
00:38:01,650 --> 00:38:03,990
dim ond eu rhoi yn y llinyn ar gyfer y URL ei hun,

590
00:38:03,990 --> 00:38:06,300
rhaid i chi basio yn y newidyn data

591
00:38:06,300 --> 00:38:11,990
sydd yn y bôn yn amrywiaeth, geiriadur bod y paramedrau mapiau i werthoedd.

592
00:38:11,990 --> 00:38:17,690
Byddwch yn mynd heibio, mewn, ac yn eu hanfon wrth ddefnyddio SWYDD.

593
00:38:17,690 --> 00:38:20,790
Ac unwaith y mae'n rhaid i chi hynny, yna gallwch gael swyddogaeth llwyddiant

594
00:38:20,790 --> 00:38:23,930
sy'n executes pan ddaw'r data yn ôl.

595
00:38:23,930 --> 00:38:26,430
Fel arall, ei fod yn union yr un fath. Felly, gan ddefnyddio POST,

596
00:38:26,430 --> 00:38:29,970
efallai y byddwch am ddefnyddio POST, er enghraifft, os oes gennych ffurflen mewnbwn

597
00:38:29,970 --> 00:38:35,780
gadael i bobl eich cyfrineiriau mewnbwn i mewn iddo, ac yn anfon cyfrineiriau hynny oddi

598
00:38:35,780 --> 00:38:41,850
at eich sgript yn ôl diwedd, i wirio yn y gronfa ddata a yw'r defnyddiwr yn ddilys ai peidio.

599
00:38:41,850 --> 00:38:46,700
Gallwch wneud hynny i gyd yn defnyddio jQuery yn hytrach na gorfod adnewyddu'r dudalen o gwbl.

600
00:38:46,700 --> 00:38:52,160
Dyna sut yr wyf yn gweithredu yn y blog yr wyf yn dangos i chi yn gynharach.

601
00:38:52,160 --> 00:38:59,530
Os ydym yn mynd i'r porth diwedd ac allgofnodi, ewch allan,

602
00:38:59,530 --> 00:39:02,600
Logio allan yn gweithio.

603
00:39:02,600 --> 00:39:13,360
Wel, gadewch i mi jyst agor i fyny in a new window.

604
00:39:13,360 --> 00:39:16,580
Yma mae cyfrinair, ac yr wyf yn mynd i deipio rhywbeth ar hap.

605
00:39:16,580 --> 00:39:18,590
Nid yw'n gweithio, ond gallwch weld nad ydym yn gwneud

606
00:39:18,590 --> 00:39:20,840
rhaid i adfywio'r dudalen o gwbl mewn gwirionedd.

607
00:39:20,840 --> 00:39:24,610
Mae'r cod, os ydych am i edrych arno,

608
00:39:24,610 --> 00:39:37,460
i gyd ar gael yma.

609
00:39:37,460 --> 00:39:45,680
Felly, y cod Ysgrifennais y llynedd rywbryd.

610
00:39:45,680 --> 00:39:47,790
Fel y gallwch weld yma, rydym yn anfon cais SWYDD.

611
00:39:47,790 --> 00:39:50,400
Mae gen i ffeil o'r enw login.php yn y pen-ôl,

612
00:39:50,400 --> 00:39:53,860
sy'n gwirio os yw'r cyfrinair yn ddilys.

613
00:39:53,860 --> 00:39:56,000
Mae'r paramedrau yr ydym pasio yn cael eu cyfrinair, mapio i

614
00:39:56,000 --> 00:40:00,030
mewnbwn y sydd yn y blwch mewnbwn ar hyn o bryd.

615
00:40:00,030 --> 00:40:04,110
A phan ddaw'r data yn ôl, byddwn yn gwirio.

616
00:40:04,110 --> 00:40:07,680
Os yw'r data yn ffug, yna rydym yn dweud cyfrinair anghywir, llithro i lawr,

617
00:40:07,680 --> 00:40:09,580
a dim ond yn ei gwneud yn diflannu ar ôl hynny.

618
00:40:09,580 --> 00:40:12,320
Fel arall, rydym yn llwytho'r dudalen admin.

619
00:40:12,320 --> 00:40:15,080
Ac mae hyn i gyd wedi ei wneud gan ddefnyddio JSON.

620
00:40:15,080 --> 00:40:18,510
Yn y nifer o linellau o god, gallwch drosglwyddo data i'r pen-ôl,

621
00:40:18,510 --> 00:40:21,020
sicrhau ei fod yn gywir, gwiriwch p'un a ydych wedi logio i mewn yn gywir,

622
00:40:21,020 --> 00:40:24,200
ac mewn gwirionedd yn ymateb iddo, ailgyfeirio'r person at y dudalen gywir

623
00:40:24,200 --> 00:40:29,760
neu beidio â gadael iddynt fewngofnodi a dweud wrthynt eu bod yn cael cyfrinair anghywir.

624
00:40:29,760 --> 00:40:33,040
Felly dyna enghraifft o sut y gallech ddefnyddio POST jQuery

625
00:40:33,040 --> 00:40:37,010
i anfon cais POST at eich pen-ôl,

626
00:40:37,010 --> 00:40:42,400
gwirio a yw rhywun wedi mewngofnodi gywir.

627
00:40:42,400 --> 00:40:44,820
>> Mae pob hawl, fel eu bod i gyd yr enghreifftiau oedd gen i, a'r holl bethau roeddwn i eisiau i dalu.

628
00:40:44,820 --> 00:40:47,110
Mae'r rhai yw'r prif bethau sy'n jQuery caniatáu i chi ei wneud:

629
00:40:47,110 --> 00:40:52,640
dewis elfennau, addasu eu defnyddio DOM trin,

630
00:40:52,640 --> 00:40:56,340
gallwch ychwanegu effeithiau, activate pethau ar ddigwyddiadau penodol,

631
00:40:56,340 --> 00:41:00,430
a hefyd yn gwneud ceisiadau AJAX ddi-dor iawn ac yn hawdd.

632
00:41:00,430 --> 00:41:02,840
Felly, diolch i chi am ddod neu wylio,

633
00:41:02,840 --> 00:41:06,230
ac os oes gennych unrhyw gwestiynau, dim ond gadewch i mi wybod. Yeah?

634
00:41:06,230 --> 00:41:12,730
[Myfyrwyr] Yn ôl pan fyddwch yn dangos, cawsoch JSON ar ôl y cais POST mewn dyfynodau,

635
00:41:12,730 --> 00:41:15,170
ac yr oeddwn yn meddwl tybed beth a wnaeth.

636
00:41:15,170 --> 00:41:20,070
>> Yeah, yr wyf yn gweld. Y cwestiwn oedd, yn yr enghraifft a Fi jyst yn dangos,

637
00:41:20,070 --> 00:41:25,790
roedd y gair JSON mewn dyfynodau o gwmpas y -

638
00:41:25,790 --> 00:41:31,690
'N annhymerus' jyst dynnu i fyny eto - o amgylch y swyddogaeth POST.

639
00:41:31,690 --> 00:41:43,320
Im 'jyst yn tynnu i fyny i ddangos.

640
00:41:43,320 --> 00:41:46,890
Felly dyma cais hwn am POST, ac mae JSON hwn mewn dyfynodau.

641
00:41:46,890 --> 00:41:50,280
Mai dim ond diffinio yr hyn rydym yn disgwyl i'r allbwn fod.

642
00:41:50,280 --> 00:41:54,070
Felly, os ydym yn pasio yn JSON fel y math data disgwyliedig,

643
00:41:54,070 --> 00:41:56,070
nid yw'n ofyniad, ond os ydym yn pasio i mewn,

644
00:41:56,070 --> 00:41:58,590
yna bydd y data yn cael ei parsed awtomatig fel JSON.

645
00:41:58,590 --> 00:42:00,600
Felly, nid oes rhaid i alw y swyddogaeth dosrannu JSON arno,

646
00:42:00,600 --> 00:42:02,620
bydd yn jyst digwydd yn awtomatig.

647
00:42:02,620 --> 00:42:05,150
Ac os ydych yn edrych ar y dogfennau ar gyfer POST,

648
00:42:05,150 --> 00:42:09,850
mae hyn yn amrywio math o ddata, y math o ddata a ddisgwylir gan y gweinydd.

649
00:42:09,850 --> 00:42:12,660
Mae'n ddiffygion i ddyfalu deallus a all fod yn anghywir,

650
00:42:12,660 --> 00:42:15,520
fel y gallwch adael yn wag, ond dim ond y math o ddata

651
00:42:15,520 --> 00:42:21,680
yn codio eich bod yn ei ddefnyddio, boed yn JSON neu XML neu rywbeth arall.

652
00:42:21,680 --> 00:42:25,280
>> Unrhyw gwestiynau eraill?

653
00:42:25,280 --> 00:42:27,300
Mae pob hawl. Os oes gennych unrhyw gwestiynau eraill, mae croeso i e-bost ataf

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

655
00:42:30,830 --> 00:42:34,860
a dylai'r sleidiau a chod gael ar-lein 'n bert cyn bo hir.

656
00:42:34,860 --> 00:42:42,810
Pob lwc gyda'ch prosiectau terfynol, gobeithio y byddwch yn defnyddio jQuery.

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