1
00:00:00,000 --> 00:00:04,439

2
00:00:04,439 --> 00:00:07,230
DOUG LLOYD: Yn y fideo hwn, roeddem eisiau
i alw allan o sylw ar wahân

3
00:00:07,230 --> 00:00:09,110
i manylyn iawn
elfen o JavaScript

4
00:00:09,110 --> 00:00:11,350
a allai fod yn handi
pan ydych yn dechrau

5
00:00:11,350 --> 00:00:15,750
i weithio ar drin tudalennau gwe a
newid y cynnwys eich tudalen ar y we

6
00:00:15,750 --> 00:00:16,460
ar y hedfan.

7
00:00:16,460 --> 00:00:19,450
A dyna y syniad o
Model Gwrthrych Ddogfen.

8
00:00:19,450 --> 00:00:23,030
Felly, fel y gwelsom yn ein fideo ar
JavaScript, gwrthrychau yn hyblyg iawn.

9
00:00:23,030 --> 00:00:24,750
>> A gall eu bod yn cynnwys gwahanol feysydd.

10
00:00:24,750 --> 00:00:28,075
Ac er nad ydym yn mynd i mewn i lawer o
fanylder, caeau neu eiddo hynny,

11
00:00:28,075 --> 00:00:30,200
y byddem yn ôl pob tebyg yn fwy
yn eu galw yn briodol

12
00:00:30,200 --> 00:00:33,915
yng nghyd-destun gwrthrych, hyd yn oed
Gall eiddo hynny fod gwrthrychau eraill.

13
00:00:33,915 --> 00:00:36,210
Ac tu mewn gwrthrychau hynny
Gall fod gwrthrychau eraill.

14
00:00:36,210 --> 00:00:39,630
>> Mae gennych y gwrthrych mawr iawn
gyda llawer o wrthrychau eraill

15
00:00:39,630 --> 00:00:43,550
tu mewn iddo, a oedd yn fath o
yn creu syniad hwn o goeden fawr.

16
00:00:43,550 --> 00:00:47,540
Yn awr, y gwrthrych ddogfen hon yn
gwrthrych arbennig iawn yn JavaScript

17
00:00:47,540 --> 00:00:52,580
sy'n trefnu eich holl we
dudalen o dan y math hwn o ymbarél

18
00:00:52,580 --> 00:00:53,470
o wrthrych.

19
00:00:53,470 --> 00:00:56,770
Ac felly y tu mewn y ddogfen
gwrthrych yn wrthrychau cyflwyno

20
00:00:56,770 --> 00:00:59,630
y pen a'r corff eich tudalen we.

21
00:00:59,630 --> 00:01:03,760
>> Y tu mewn o hynny yn eraill
gwrthrychau, et cetera, et cetera,

22
00:01:03,760 --> 00:01:08,411
nes eich tudalen we gyfan yn cael
Trefnwyd yn y gwrthrych mawr.

23
00:01:08,411 --> 00:01:09,660
Beth yw'r upside yma, dde?

24
00:01:09,660 --> 00:01:12,170
Wel, rydym yn gwybod sut i weithio
gyda gwrthrychau yn JavaScript.

25
00:01:12,170 --> 00:01:15,840
>> Felly, os oes gennym gwrthrych sy'n
yn cyfeirio at ein dudalen we gyfan, bod

26
00:01:15,840 --> 00:01:19,590
yn golygu drwy ffonio'r cywir
dulliau i drin y gwrthrych

27
00:01:19,590 --> 00:01:22,360
neu addasu rhai
ei eiddo, rydym yn

28
00:01:22,360 --> 00:01:25,500
yn gallu newid yr elfennau o
ein tudalen programmatically

29
00:01:25,500 --> 00:01:30,210
gan ddefnyddio Javascript yn lle cael
i cod pethau â, dyweder, HTML.

30
00:01:30,210 --> 00:01:33,760
Felly dyma enghraifft o
syml iawn dudalen gwefan, dde?

31
00:01:33,760 --> 00:01:35,850
Mae'n cael tagiau HTML, pen.

32
00:01:35,850 --> 00:01:37,979
>> Y tu mewn o oes deitl, helo byd.

33
00:01:37,979 --> 00:01:38,770
Yna, Mae gen i gorff.

34
00:01:38,770 --> 00:01:40,686
Y tu mewn o hynny, yr wyf wedi
tri pheth gwahanol.

35
00:01:40,686 --> 00:01:44,170
Mae gen tag pennawd h2,
paragraff, a dolen.

36
00:01:44,170 --> 00:01:45,920
Mae hon yn dudalen we syml iawn.

37
00:01:45,920 --> 00:01:48,590
>> Wel, beth allai y ddogfen
gwrthwynebu gyfer hyn yn edrych fel?

38
00:01:48,590 --> 00:01:50,700
Wel, mae'n ychydig yn
brawychus efallai ar y dechrau.

39
00:01:50,700 --> 00:01:52,510
Ond mae'n wirioneddol yn unig goeden fawr.

40
00:01:52,510 --> 00:01:54,890
Ac wrth wraidd iawn ohono yn ddogfen.

41
00:01:54,890 --> 00:02:00,030
>> Y tu mewn y ddogfen yn un arall
gwrthrych cyfeirio at y HTML fy dudalen.

42
00:02:00,030 --> 00:02:02,660
Ac mae'r HTML fy dudalen yn hyn i gyd.

43
00:02:02,660 --> 00:02:06,900
Ac yna tu mewn i'r HTML
gwrthrych, mae gen i wrthrych ben,

44
00:02:06,900 --> 00:02:09,000
sy'n cyfeirio at bopeth yno.

45
00:02:09,000 --> 00:02:11,009
>> Ac tu mewn yno,
Mae gen i wrthrych teitl.

46
00:02:11,009 --> 00:02:15,620
Ac tu mewn yno, mae gen i un arall
yn gwrthwynebu bod yn unig helo byd.

47
00:02:15,620 --> 00:02:18,020
Gallwn i gael fy nghorff
gynrychioli fel hyn.

48
00:02:18,020 --> 00:02:22,850
>> Y tu mewn fy nghorff, Mae gen i h2
gwrthrych a gwrthrych p yn lle paragraff

49
00:02:22,850 --> 00:02:25,270
a gwrthrych am gyswllt.

50
00:02:25,270 --> 00:02:29,660
Ac felly mae hyn hierarchaeth cyfan
Gellir ei gynrychioli fel coeden fawr

51
00:02:29,660 --> 00:02:31,990
gyda llawer o ychydig yn llai o faint
pethau sy'n dod allan ohono.

52
00:02:31,990 --> 00:02:33,740
Yn awr, wrth gwrs, pan
rydym yn rhaglennu, rydym yn

53
00:02:33,740 --> 00:02:35,560
peidiwch â meddwl am bethau fel coeden fawr.

54
00:02:35,560 --> 00:02:37,980
Rydym am weld gwirioneddol
pethau cysylltiedig cod.

55
00:02:37,980 --> 00:02:40,790
>> Ac yn ffodus, y gallwn
defnyddio ein offer datblygwr

56
00:02:40,790 --> 00:02:46,080
i mewn gwirionedd yn edrych ar
gwrthrych y ddogfen wefan hon.

57
00:02:46,080 --> 00:02:48,150
A gadewch i ni wneud hynny.

58
00:02:48,150 --> 00:02:49,580
Felly dwi wedi agor tab porwr.

59
00:02:49,580 --> 00:02:51,540
>> Ac yr wyf i wedi agor Offer Datblygwr.

60
00:02:51,540 --> 00:02:54,460
Ac yn fy fideo ar JavaScript, yr wyf yn
crybwyll nad yw'r consol yn

61
00:02:54,460 --> 00:02:56,770
Thrafod dim ond lle
rydym yn argraffu gwybodaeth,

62
00:02:56,770 --> 00:02:59,560
mae hefyd yn fan lle
y gallwn gwybodaeth mewnbwn.

63
00:02:59,560 --> 00:03:01,380
Yn y cyd-destun hwn, beth
Rydw i'n mynd i ddweud yw

64
00:03:01,380 --> 00:03:05,720
Hoffwn i fynd yn ôl
y ddogfen gwrthrychau,

65
00:03:05,720 --> 00:03:07,502
felly rwy'n gallu dechrau i edrych arno.

66
00:03:07,502 --> 00:03:08,460
Felly, sut y gallaf wneud hyn?

67
00:03:08,460 --> 00:03:10,740
Wel, os ydw i eisiau
trefnu 'n sylweddol' n glws,

68
00:03:10,740 --> 00:03:16,317
Rydw i'n mynd i ddweud console.dir, D-I-R.
Yn awr, yr wyf yn defnyddio console.log i print yn unig

69
00:03:16,317 --> 00:03:17,400
rhywbeth allan yn syml iawn.

70
00:03:17,400 --> 00:03:20,450
Ond os ydw i am drefnu hyn
hierarchaidd fel gwrthrych,

71
00:03:20,450 --> 00:03:23,800
Yr wyf am ei fath o strwythuredig
fel strwythur cyfeiriadur.

72
00:03:23,800 --> 00:03:27,400
>> Felly, yr wyf am i console.dir ddogfen.

73
00:03:27,400 --> 00:03:28,430
Rydw i'n mynd i daro Chofnoda.

74
00:03:28,430 --> 00:03:32,350
Ac i'r dde islaw iddo yn awr,
a byddaf yn chwyddo i mewn fan hyn,

75
00:03:32,350 --> 00:03:36,000
Mae gen hon ddogfen ymateb
gydag ychydig o saeth nesaf iddo.

76
00:03:36,000 --> 00:03:39,470
Yn awr, pan fyddaf yn agor y saeth hon,
mae mynd i fod yn llawer o bethau.

77
00:03:39,470 --> 00:03:42,560
>> Ond rydym ni'n mynd i anwybyddu llawer
ohono a math yn unig o ffocws

78
00:03:42,560 --> 00:03:46,250
ar y rhan bwysicaf, felly rydym yn
Gall dechrau i lywio ddogfen hon.

79
00:03:46,250 --> 00:03:50,125
Mae llawer mwy i'r DOM na
dim ond nodau a nodau blant rhieni.

80
00:03:50,125 --> 00:03:51,500
Mae llawer o bethau atodol.

81
00:03:51,500 --> 00:03:52,280
>> Felly, yr wyf i'n mynd i agor y fyny.

82
00:03:52,280 --> 00:03:54,610
Ac mae llawer gyfan
o bethau sy'n pops i fyny.

83
00:03:54,610 --> 00:03:59,000
Ond yr holl wyf yn poeni am ei
i'r dde yma, nodau plant.

84
00:03:59,000 --> 00:04:00,410
Gadewch i ni agor bod hyd.

85
00:04:00,410 --> 00:04:03,810
>> Y tu mewn o yno rwy'n gweld
rhywbeth cyfarwydd, HTML.

86
00:04:03,810 --> 00:04:07,670
Felly, tu mewn ein dogfen
un lefel i lawr, HTML.

87
00:04:07,670 --> 00:04:08,550
Yr wyf yn agor bod hyd.

88
00:04:08,550 --> 00:04:10,380
Beth ydan Ni yn ddisgwyl?

89
00:04:10,380 --> 00:04:13,760
>> Os cofiwch o'n diagram,
hyn y dylem ddod o hyd y tu mewn o HTML?

90
00:04:13,760 --> 00:04:17,275
Pa dau nodau yn is yn y goeden?

91
00:04:17,275 --> 00:04:17,899
Gadewch i ni gael gwybod.

92
00:04:17,899 --> 00:04:18,940
Rydym yn agor i fyny HTML.

93
00:04:18,940 --> 00:04:22,079
Rydym yn mynd i lawr at ei blentyn nodau.

94
00:04:22,079 --> 00:04:23,440
>> Pop hynny ar agor.

95
00:04:23,440 --> 00:04:25,990
Mae pen a chorff.

96
00:04:25,990 --> 00:04:28,540
A gallwn agor y pen.

97
00:04:28,540 --> 00:04:30,460
Ewch at ei blentyn nodau.

98
00:04:30,460 --> 00:04:31,460
Wel, mae y teitl.

99
00:04:31,460 --> 00:04:33,293
>> A gallem fynd ymlaen ac
ymlaen fel hyn am byth.

100
00:04:33,293 --> 00:04:34,770
Gallem wneud hyn gyda corff yn ogystal.

101
00:04:34,770 --> 00:04:40,090
Ond mae yna ffordd i ni i edrych ar
ddogfen a drefnwyd fel gwrthrych mawr.

102
00:04:40,090 --> 00:04:42,610
Ac os ydym yn edrych ar yn fawr
gwrthrych sy'n edrych yn llawer

103
00:04:42,610 --> 00:04:47,480
fel cod, sy'n golygu y gallwn ddechrau
i drin y gwrthrych mawr gan ddefnyddio

104
00:04:47,480 --> 00:04:51,220
cod i newid yr hyn mae ein
wefan yn edrych ac yn teimlo fel.

105
00:04:51,220 --> 00:04:54,920
>> Felly dyna arf eithaf pwerus
gennym ar gael i ni yn awr.

106
00:04:54,920 --> 00:04:57,360
Felly, wrth i ni jyst yn gweld, y
gwrthrych ddogfen ei hun

107
00:04:57,360 --> 00:05:01,392
a phob un o'r gwrthrychau tu mewn iddo
wedi eiddo a dulliau, dim ond

108
00:05:01,392 --> 00:05:04,100
fel unrhyw wrthrych arall yr ydym i wedi
bod yn gweithio â hwy yn JavaScript.

109
00:05:04,100 --> 00:05:08,370
Ond gallwn ddefnyddio eiddo hynny a
defnyddio dulliau hynny i fath o ddrilio i lawr

110
00:05:08,370 --> 00:05:10,900
o'r ddogfen mawr a chael
is ac yn is ac yn is,

111
00:05:10,900 --> 00:05:13,360
manylach a manylach grawn
o fanylder, nes i ni

112
00:05:13,360 --> 00:05:17,510
cyrraedd darn penodol iawn o'n
tudalen ar y we y mae arnom eisiau ei newid.

113
00:05:17,510 --> 00:05:22,700
>> A phan fyddwn yn diweddaru nodweddion y
Dogfennu Gwrthrych neu ffoniwch dulliau hynny,

114
00:05:22,700 --> 00:05:24,450
gallai pethau ddigwydd ar ein tudalen ar y we.

115
00:05:24,450 --> 00:05:28,420
Ac nid oes angen i ni wneud unrhyw chwa o awyr iach
i gael newidiadau hynny yn dod i rym.

116
00:05:28,420 --> 00:05:33,160
>> A dyna yn gallu 'n bert oera i
gael pan fyddwn ni'n gweithio gyda cod.

117
00:05:33,160 --> 00:05:37,185
Felly beth yw rhai o'r eiddo hyn
sy'n rhan o gwrthrych ddogfen?

118
00:05:37,185 --> 00:05:40,100
Wel, mae'n debyg y byddwch yn gweld
cwpl ohonynt yn gyflym iawn

119
00:05:40,100 --> 00:05:42,700
gan ein bod zipping
drwy'r ddogfen cawr

120
00:05:42,700 --> 00:05:45,150
gwrthrych rydym yn unig yn gweld yn y porwr gwe.

121
00:05:45,150 --> 00:05:48,420
>> Ond ychydig o eiddo hyn
Efallai fod pethau fel HTML mewnol.

122
00:05:48,420 --> 00:05:52,950
Ac efallai y byddwch hyd yn oed yn cofio i mi
defnyddio hwn yn y fideo JavaScript

123
00:05:52,950 --> 00:05:54,950
yn y pen iawn pan fyddaf yn
yn siarad am ddigwyddiadau.

124
00:05:54,950 --> 00:05:56,125
Beth oedd hyn yn HTML mewnol?

125
00:05:56,125 --> 00:05:59,030
Wel, dim ond yr hyn sydd
rhwng y tagiau.

126
00:05:59,030 --> 00:06:01,590
>> Ac felly y HTML mewnol,
er enghraifft, o'r teitl

127
00:06:01,590 --> 00:06:05,390
tag, petaem wedi cadw mynd yn
yr enghraifft honno funud yn ôl,

128
00:06:05,390 --> 00:06:08,020
Byddai wedi bod yn y byd helo.

129
00:06:08,020 --> 00:06:10,140
Dyna oedd teitl ein tudalen.

130
00:06:10,140 --> 00:06:12,370
Eiddo arall
cynnwys enw nôd, a oedd yn

131
00:06:12,370 --> 00:06:15,810
yw'r enw o HTML
Elfen fel teitl.

132
00:06:15,810 --> 00:06:19,100
ID, sef y ID
priodoli elfen HTML.

133
00:06:19,100 --> 00:06:23,790
>> Dwyn i gof bod yn gallu dangos arbennig
elfennau penodol o'n HTML

134
00:06:23,790 --> 00:06:27,510
gyda priodoledd ID, sydd fel arfer
yn dod i mewn 'n hylaw yng nghyd-destun CSS,

135
00:06:27,510 --> 00:06:29,000
yn benodol.

136
00:06:29,000 --> 00:06:33,217
Nod rhiant, sydd yn gyfeiriad at
beth sydd ychydig i fyny'r uwch fy mhen yn y DOM.

137
00:06:33,217 --> 00:06:35,800
A nodau plentyn, sydd yn
cyfeiriad at yr hyn sydd i lawr yn is na mi.

138
00:06:35,800 --> 00:06:37,950
A gwelsom lawer o hynny
dim ond edrych drwy.

139
00:06:37,950 --> 00:06:42,970
Nodau plentyn, dyna sut y cawsom
is ac yn is mewn i'r goeden.

140
00:06:42,970 --> 00:06:46,590
>> Priodoleddau, dyna'n union amrywiaeth
o briodoleddau yr elfen HTML.

141
00:06:46,590 --> 00:06:50,270
Felly enghraifft o briodoleddau gallai
fod os oes gennych tag delwedd,

142
00:06:50,270 --> 00:06:54,090
Fel arfer, mae ganddo priodoledd ffynhonnell,
efallai uchder a nodwedd led.

143
00:06:54,090 --> 00:06:57,120
Ac felly byddai hynny'n unig fod amrywiaeth
o bob un o'r nodweddion a gysylltir

144
00:06:57,120 --> 00:06:59,300
gyda'r elfen honno HTML.

145
00:06:59,300 --> 00:07:04,140
>> Style yn un arall sy'n
yn cynrychioli y CSS

146
00:07:04,140 --> 00:07:06,050
steilio ag elfen benodol.

147
00:07:06,050 --> 00:07:08,310
Ac yn ddiweddarach yn y
fideo, rydym annhymerus 'yn benodol

148
00:07:08,310 --> 00:07:14,592
arddull trosoledd i wneud cwpl
newidiadau i'n gwefan.

149
00:07:14,592 --> 00:07:15,800
Felly dyna rai eiddo.

150
00:07:15,800 --> 00:07:17,591
>> Ac mae yna hefyd rai
dulliau y gallwn

151
00:07:17,591 --> 00:07:22,450
defnyddio i hefyd yn gynt efallai ynysu
elfennau o'r Gwrthrych Ddogfen.

152
00:07:22,450 --> 00:07:26,730
Efallai, y mwyaf amryddawn
o'r rhain getElementById fodolaeth.

153
00:07:26,730 --> 00:07:31,190
Felly, efallai y byddwn yn dweud rhywbeth fel, gan fod
cofiwch ei fod yn ddull o'r Ddogfen

154
00:07:31,190 --> 00:07:34,880
Gwrthwynebu, document.getElementById.

155
00:07:34,880 --> 00:07:39,820
>> Ac tu mewn cromfachau hynny, nodwch
elfen HTML gyda ID arbennig

156
00:07:39,820 --> 00:07:42,330
priodoli fy mod i wedi o'r blaen
osod, ac byddaf yn syth

157
00:07:42,330 --> 00:07:46,685
ewch i'r dde i elfen honno
y wefan yn gyffredinol.

158
00:07:46,685 --> 00:07:49,310
Felly nid oes rhaid i mi i ddrilio efallai
i lawr drwy bob un haen.

159
00:07:49,310 --> 00:07:52,841
Gall Fi jyst defnyddio'r dull hwn i ddod o hyd iddo,
fath o fel taflegryn chwilio am wres,

160
00:07:52,841 --> 00:07:53,340
iawn?

161
00:07:53,340 --> 00:07:56,300
'I jyst yn mynd ac yn dod o hyd
yn union beth mae'n chwilio amdano.

162
00:07:56,300 --> 00:07:59,290
>> GetElementsByTagName yw
debyg iawn o ran ysbryd.

163
00:07:59,290 --> 00:08:02,500
Efallai y byddai hyn yn dod o hyd i bob un o'r
tagiau beiddgar neu bob un o'r tagiau p

164
00:08:02,500 --> 00:08:05,920
ac yn rhoi amrywiaeth o bopeth i mi
y gallwn i wedyn yn gweithio gyda nhw.

165
00:08:05,920 --> 00:08:12,080
appendChild yn ychwanegu rhywbeth
un lefel i lawr yn y goeden.

166
00:08:12,080 --> 00:08:16,440
>> Felly gallaf ychwanegu newydd cyfan
Elfen un lefel is.

167
00:08:16,440 --> 00:08:19,700
Neu gallaf gael gwared ar elfen sy'n
un lefel is yn ogystal os ydw i eisiau

168
00:08:19,700 --> 00:08:22,870
i ddileu rhywbeth o fy tudalen ar y we.

169
00:08:22,870 --> 00:08:28,480
Yn awr, nodyn codio gyflym ac yn gyflym
cur pen arbed nodyn, gobeithio.

170
00:08:28,480 --> 00:08:31,670
>> getElementById-- mae'r d yn llythrennau bach.

171
00:08:31,670 --> 00:08:36,950
Ni allaf ddweud wrthych faint o weithiau yr wyf wedi
defnyddio getElementById a cyfalafu

172
00:08:36,950 --> 00:08:38,336
y d yno.

173
00:08:38,336 --> 00:08:39,460
Oherwydd ei fod yn wir yn gyffredin.

174
00:08:39,460 --> 00:08:42,990
Os byddwn yn ysgrifennu y gair ID, 'i'
Fel arfer cyfalaf Rwyf cyfalaf D.

175
00:08:42,990 --> 00:08:44,240
Ac mae fy cod nid yn unig yn gweithio.

176
00:08:44,240 --> 00:08:45,630
Ac ni allaf chyfrif i maes pam.

177
00:08:45,630 --> 00:08:49,490
Mae hwn yn iawn, iawn, iawn
bug gyffredin y mae pawb yn gwneud,

178
00:08:49,490 --> 00:08:51,890
hyd yn oed arbenigwyr sydd wedi
bod yn gwneud hyn am byth.

179
00:08:51,890 --> 00:08:55,410
Felly, dim ond byddwch yn ymwybodol, getElementById,
hynny d yn llythrennau bach.

180
00:08:55,410 --> 00:09:00,080
A, gobeithio, sy'n arbed i chi sawl
cofnodion o leiaf o ofid.

181
00:09:00,080 --> 00:09:02,204
>> Felly beth mae hyn i gyd ei ddweud wrthym?

182
00:09:02,204 --> 00:09:03,120
Mae gennym y dulliau hyn.

183
00:09:03,120 --> 00:09:04,161
Mae gennym eiddo hyn.

184
00:09:04,161 --> 00:09:06,610
Yn awr, os ydym yn dechrau o
ddogfen, ddogfen.

185
00:09:06,610 --> 00:09:10,220
beth bynnag, gallwn yn awr fynd i unrhyw
un darn o ein tudalen ar y we

186
00:09:10,220 --> 00:09:14,870
yr ydym am eu defnyddio JavaScript
dim ond drwy ffonio rhain dulliau

187
00:09:14,870 --> 00:09:19,940
a leveraging eiddo
ein bod yn dod o hyd mewn amrywiol leoliadau.

188
00:09:19,940 --> 00:09:24,890
>> Gall hyn gael amleiriog, mae hyn yn
document.getElementByID,

189
00:09:24,890 --> 00:09:28,560
efallai yn cael enw tag hir,
efallai eich bod yn gwneud mwy o alwadau yn nes ymlaen.

190
00:09:28,560 --> 00:09:31,230
Gall pethau fynd ychydig yn amleiriog.

191
00:09:31,230 --> 00:09:34,480
Ac fel rhaglenwyr, fel yr ydych chi wedi
gweld mewn llawer o'r fideos hyn yn ôl pob tebyg,

192
00:09:34,480 --> 00:09:36,600
nad ydym yn hoffi pethau amleiriog.

193
00:09:36,600 --> 00:09:38,520
>> Rydym yn hoffi gallu i wneud pethau yn gyflym.

194
00:09:38,520 --> 00:09:42,640
Felly byddem yn hoffi mwy
ffordd gryno o ddweud rhywbeth.

195
00:09:42,640 --> 00:09:46,270
Felly y math hwn o arwain at y
syniad o rywbeth o'r enw jQuery.

196
00:09:46,270 --> 00:09:49,170
Nawr nid yw jQuery JavaScript.

197
00:09:49,170 --> 00:09:50,350
Nid yw'n rhan o JavaScript.

198
00:09:50,350 --> 00:09:54,790
>> Mae'n llyfrgell a oedd yn ysgrifenedig
gan rai rhaglenwyr JavaScript

199
00:09:54,790 --> 00:09:57,060
tua 10 mlynedd yn ôl.

200
00:09:57,060 --> 00:10:01,300
Ac ei nod yw symleiddio hyn beth sydd
Gelwir sgriptio ochr y cleient, a oedd yn

201
00:10:01,300 --> 00:10:04,310
yn y bôn yr hyn yr ydym yn unig oedd
siarad am gyda manipulations DOM.

202
00:10:04,310 --> 00:10:11,090
Ac felly os oeddwn i eisiau newid y
lliw cefndir fy tudalen ar y we, efallai

203
00:10:11,090 --> 00:10:11,980
yn Div benodol.

204
00:10:11,980 --> 00:10:15,325
>> Yma, Im 'yn ôl pob golwg yn cael
ElementById colorDiv.

205
00:10:15,325 --> 00:10:16,950
Ac yr wyf am osod ei liw cefndir.

206
00:10:16,950 --> 00:10:20,720
Os Im 'jyst yn defnyddio JavaScript pur
ddefnyddio'r Model Gwrthrych Ddogfen,

207
00:10:20,720 --> 00:10:23,990
mae hynny'n llawer o bethau, dde?
document.getElementByID

208
00:10:23,990 --> 00:10:25,531
colorDiv.style.backgroundColor = wyrdd.

209
00:10:25,531 --> 00:10:27,260

210
00:10:27,260 --> 00:10:28,050
>> Whew.

211
00:10:28,050 --> 00:10:30,110
Dyna oedd llawer i'w ddweud.

212
00:10:30,110 --> 00:10:31,720
Mae'n llawer i deipio, hefyd.

213
00:10:31,720 --> 00:10:35,760
Ac felly yn jQuery, gallwn efallai ddweud
mae hyn ychydig bach yn fwy cryno.

214
00:10:35,760 --> 00:10:39,350
Mae'r fasnach off bod 'i' efallai ychydig
ychydig yn fwy cryptig yn sydyn,

215
00:10:39,350 --> 00:10:39,850
iawn?

216
00:10:39,850 --> 00:10:43,580
>> O leiaf mae'r hir yn ychydig yn fwy
esboniadol ynghylch yr hyn rydym yn ei wneud.

217
00:10:43,580 --> 00:10:49,947
Mae'r arwydd doler, cromfachau,
dyfyniad sengl, hash, colorDiv, dde?

218
00:10:49,947 --> 00:10:50,780
Beth yw ystyr hynny?

219
00:10:50,780 --> 00:10:53,640
Wel, dyna y bôn yn unig
document.getElementByID colorDiv.

220
00:10:53,640 --> 00:10:58,700
>> Ond mae'n y math hwn o llaw-fer
ffordd o wneud ei ddefnyddio jQuery.

221
00:10:58,700 --> 00:11:01,380
Gadewch i fwrw golwg yn awr
mewn un neu ddau o ffyrdd gwahanol

222
00:11:01,380 --> 00:11:04,520
fy mod gallai mewn gwirionedd
defnyddio hyn Gwrthrych Dogfen

223
00:11:04,520 --> 00:11:06,807
Model i drin darnau o fy safle.

224
00:11:06,807 --> 00:11:09,140
Yn benodol, rydym yn mynd
i fod yn gweithio ar drin

225
00:11:09,140 --> 00:11:14,090
lliw manylyn
Div, colorDiv, ar dudalen we.

226
00:11:14,090 --> 00:11:15,299
Felly, gadewch i ni edrych ar hynny.

227
00:11:15,299 --> 00:11:15,798
Iawn.

228
00:11:15,798 --> 00:11:16,700
Felly dwi ar dudalen.

229
00:11:16,700 --> 00:11:20,750
Mae'n cael ei alw test.html pan fyddwch yn llwytho i lawr
yma os ydych am i botsian gyda hyn.

230
00:11:20,750 --> 00:11:24,730
Ac mae gen i griw o
botymau ar y dudalen hon.

231
00:11:24,730 --> 00:11:27,730
Ac yr wyf ddim yn dweud swyddogaethau unigol
am liw cefndir, porffor, gwyrdd,

232
00:11:27,730 --> 00:11:31,330
oren, coch, glas, un swyddogaeth sengl
am liw cefndir, triniwr digwyddiad

233
00:11:31,330 --> 00:11:34,360
am liw cefndir, a defnyddio jQuery.

234
00:11:34,360 --> 00:11:38,147
Beth ydw i'n siarad am
pan fyddaf i'n gwneud hyn?

235
00:11:38,147 --> 00:11:39,230
Felly, rydym wedi gweld y botymau.

236
00:11:39,230 --> 00:11:41,521
Yn awr, gadewch i ni edrych ar
rhai o'r cod ffynhonnell yma.

237
00:11:41,521 --> 00:11:44,770
Byddwn yn dechrau gyda test.html.

238
00:11:44,770 --> 00:11:48,100
Swyddogaethau Felly unigol ar gyfer y cefndir
lliw yn hyn yr wyf wedi ei deipio yma.

239
00:11:48,100 --> 00:11:49,350
Gadewch i mi sgrolio ychydig.

240
00:11:49,350 --> 00:11:56,170

241
00:11:56,170 --> 00:11:58,820
>> A byddwch yn sylwi fy mod
wedi diffinio botymau hyn

242
00:11:58,820 --> 00:12:03,990
i ddweud pryd y botwm hwn ei glicio,
ffoniwch y swyddogaeth troi'n borffor.

243
00:12:03,990 --> 00:12:06,670
Pan botwm hwn yn clicio, yn hytrach,
ffoniwch y swyddogaeth droi'n wyrdd,

244
00:12:06,670 --> 00:12:08,710
troi oren, yn troi'n goch, trowch glas.

245
00:12:08,710 --> 00:12:11,880
Mae'n debyg y gallwch ddyfalu bod hyn
Efallai nad y dyluniad gorau

246
00:12:11,880 --> 00:12:12,460
synnwyr, dde?

247
00:12:12,460 --> 00:12:16,490
>> Byddai'n braf pe gallwn
gael dull mwy cyffredinol.

248
00:12:16,490 --> 00:12:19,570
Wel, yn gyntaf byddwn yn cymryd golwg
ar yr hyn pump swyddogaethau hynny yn cael eu

249
00:12:19,570 --> 00:12:24,400
document.getElementByID
colorDiv.style.background = porffor,

250
00:12:24,400 --> 00:12:27,250
gwyrdd, oren, coch,
a glas, yn y drefn honno.

251
00:12:27,250 --> 00:12:30,930
Felly, nid yn arbennig y cynllun gorau.

252
00:12:30,930 --> 00:12:33,390
>> Mae'r gyfres nesaf o fotymau
Rwyf wedi cael fy mod wedi ysgrifennu

253
00:12:33,390 --> 00:12:36,380
swyddogaeth sengl o'r enw
newid lliw sydd yn ôl pob golwg

254
00:12:36,380 --> 00:12:38,960
yn derbyn llinyn fel ei ddadl.

255
00:12:38,960 --> 00:12:40,290
Felly mae hyn yn ychydig yn well.

256
00:12:40,290 --> 00:12:43,840
Porffor, gwyrdd, oren, coch,
glas yn awr dadl.

257
00:12:43,840 --> 00:12:46,230
Felly, yr wyf wedi ysgrifennu mwy cyffredinol
achos swyddogaeth JavaScript,

258
00:12:46,230 --> 00:12:47,771
a allai edrych rhywbeth fel hyn.

259
00:12:47,771 --> 00:12:48,680
Im 'yn pasio i mewn.

260
00:12:48,680 --> 00:12:52,090
Mae hyn yn newid lliw swyddogaeth yw
disgwyl dadl o'r enw lliw.

261
00:12:52,090 --> 00:12:54,970
Ac yr wyf ddim yn dweud yn gosod y
lliw cefndir i liw.

262
00:12:54,970 --> 00:12:58,390
Felly dyma yn cynrychioli hyn sydd gen i yma.

263
00:12:58,390 --> 00:12:59,770
Felly dyna ychydig yn well.

264
00:12:59,770 --> 00:13:02,740
>> Ond efallai y byddaf yn gallu
yn gwneud yn well na hynny.

265
00:13:02,740 --> 00:13:06,140
Os ydym yn mynd i lawr i gymryd golwg
ar y sefyllfa triniwr digwyddiad,

266
00:13:06,140 --> 00:13:07,860
erbyn hyn i gyd galwadau hyn yn edrych yr un fath.

267
00:13:07,860 --> 00:13:10,340
Os cofiwch ar gyfer ein
trafodaeth ar trafodwyr digwyddiad,

268
00:13:10,340 --> 00:13:15,770
Gallaf gael gwybodaeth am ba un o'r
botymau hyn yn clicio ac yn defnyddio hynny.

269
00:13:15,770 --> 00:13:19,560
>> Ac felly yn event.JavaScript, rwyf wedi
Digwyddiad newid lliw ysgrifenedig, a

270
00:13:19,560 --> 00:13:21,110
ffigurau pa botwm ei glicio.

271
00:13:21,110 --> 00:13:23,250
Dyna'r llinell gwrthrych sbardun.

272
00:13:23,250 --> 00:13:25,240
Ac yna fan hyn, mae'n mynd yn wir yn amleiriog.

273
00:13:25,240 --> 00:13:27,420
Ond yr hyn rwy'n ei wneud yw fy mod
gosod y cefndir

274
00:13:27,420 --> 00:13:30,340
lliw i triggerObject inner.HTML.

275
00:13:30,340 --> 00:13:34,170
Dyna y testun yn
rhwng y tagiau botwm.

276
00:13:34,170 --> 00:13:36,500
>> Ac yna yr wyf yn ôl pob golwg yn cael
i'w osod i lythrennau bach.

277
00:13:36,500 --> 00:13:40,780
A dyna sut y gallaf drosi cyfan
llinyn i lythrennau bach yn JavaScript drwy ddefnyddio

278
00:13:40,780 --> 00:13:42,940
dull hwnnw i lythrennau bach.

279
00:13:42,940 --> 00:13:46,570
Oherwydd pan wyf yn gosod lliw,
gan fy mod i'n ceisio ei wneud yma,

280
00:13:46,570 --> 00:13:48,260
y lliw wedi i fod bob llythrennau bach.

281
00:13:48,260 --> 00:13:50,920
>> Ond mae'r botwm a gefais,
os byddwn yn cymryd golwg arall,

282
00:13:50,920 --> 00:13:55,890
sylwi bod y testun, mae
ysgrifenedig gyda P cyfalaf ar gyfer porffor.

283
00:13:55,890 --> 00:13:59,140
Ac yna ar yr union
gwaelod yma, yr wyf yn ôl pob golwg

284
00:13:59,140 --> 00:14:02,630
ceisio gwneud hyn trwy ddefnyddio jQuery hefyd.

285
00:14:02,630 --> 00:14:06,000
Ac yn yr achos hwn, dydw i ddim mewn gwirionedd
yn galw swyddogaeth o gwbl.

286
00:14:06,000 --> 00:14:11,430
Rydw i wedi newydd ddweud y dosbarth fy mod
gan ddefnyddio'r botwm i hwn botwm jQ.

287
00:14:11,430 --> 00:14:12,360
Dyna fe.

288
00:14:12,360 --> 00:14:14,950
>> Felly sut mae jQuery yn gwybod beth rwy'n ei wneud?

289
00:14:14,950 --> 00:14:18,740
Wel, mae hyn yn un o'r manteision
slaes anfanteision jQuery.

290
00:14:18,740 --> 00:14:21,560
Gall caniatáu i mi wneud pethau
yn gryno iawn, ond efallai nad

291
00:14:21,560 --> 00:14:22,570
fel reddfol.

292
00:14:22,570 --> 00:14:25,570
Efallai y tri arall yn gwneud
ychydig mwy synhwyro hyn rwy'n ei wneud.

293
00:14:25,570 --> 00:14:29,010
Yma, fodd bynnag, yr hyn sy'n mynd ymlaen?

294
00:14:29,010 --> 00:14:31,940
>> Mae'n debyg, gan greu
swyddogaeth dienw

295
00:14:31,940 --> 00:14:36,790
bod llwythi pryd bynnag fy nogfen
yn barod, felly document.ready,

296
00:14:36,790 --> 00:14:38,760
rhywfaint o swyddogaeth yn mynd i ddigwydd.

297
00:14:38,760 --> 00:14:40,490
Yn y bôn, pan fydd yn ddogfen barod?

298
00:14:40,490 --> 00:14:42,310
Mae'n pan fydd fy dudalen wedi llwytho.

299
00:14:42,310 --> 00:14:46,540
>> Felly, cyn gynted ag y mae fy dudalen wedi llwytho, mae'r
yn dilyn swyddogaeth bob amser yn barod.

300
00:14:46,540 --> 00:14:54,310
Mae'n dweud, os gwrthrych o fath jQButton,
neu os jQButton ddosbarth wedi cael ei glicio,

301
00:14:54,310 --> 00:14:55,570
gweithredu swyddogaeth hon.

302
00:14:55,570 --> 00:14:59,360
Felly dyma ddwy swyddogaeth ddienw,
un a ddiffinnir tu mewn y llall.

303
00:14:59,360 --> 00:15:03,930
>> Felly fy cyd-destun cyfan
yma hyd yn hyn yw fy dudalen

304
00:15:03,930 --> 00:15:06,520
pan fydd yn llwythi mae'n galw swyddogaeth hon.

305
00:15:06,520 --> 00:15:09,740
Ac mae swyddogaeth hon yn aros
ar gyfer botwm i gael ei glicio.

306
00:15:09,740 --> 00:15:14,490
A phan botwm ei glicio, jQ
botwm yn benodol ei glicio,

307
00:15:14,490 --> 00:15:17,150
mae'n galw hyn eraill
swyddogaeth, sy'n mynd

308
00:15:17,150 --> 00:15:21,250
i osod y cefndir
lliw colorDiv i fod yn

309
00:15:21,250 --> 00:15:25,990
beth bynnag testun yn rhwng y tagiau.

310
00:15:25,990 --> 00:15:28,050
>> Mae hyn yn y syniad o
pa botwm ei glicio.

311
00:15:28,050 --> 00:15:31,230
Ond fel arall, mae hyn yn fath o
ymddwyn yn debyg i ddigwyddiad.

312
00:15:31,230 --> 00:15:34,460
Dim ond yr un ffordd rwy'n
Byddai fynegi hyn yn jQuery.

313
00:15:34,460 --> 00:15:36,790
Unwaith eto, mae'n debyg yn
llawer mwy bygythiol.

314
00:15:36,790 --> 00:15:40,840
Nid yw mor glir ag
rhywbeth fel event.js,

315
00:15:40,840 --> 00:15:45,080
sydd efallai ychydig yn fwy
amleiriog, ond ychydig bach yn llai

316
00:15:45,080 --> 00:15:46,000
bygythiol.

317
00:15:46,000 --> 00:15:51,460
>> Ond os ydym yn pop yn ôl dros at fy porwr
ffenestr, os byddaf yn dechrau clicking-- yn dda,

318
00:15:51,460 --> 00:15:52,690
a newidiodd i borffor.

319
00:15:52,690 --> 00:15:54,450
Mae hyn yn wyrdd gan ddefnyddio'r dull llinyn.

320
00:15:54,450 --> 00:15:56,500
Mae hyn yn oren gan ddefnyddio'r triniwr digwyddiad.

321
00:15:56,500 --> 00:15:58,300
>> Mae hyn yn goch gan ddefnyddio jQuery, dde?

322
00:15:58,300 --> 00:16:01,270
Maent i gyd yn ymddwyn yn union yr un fath.

323
00:16:01,270 --> 00:16:06,509
Maent yn unig yn ei wneud gan ddefnyddio gwahanol
ymagweddau at ddatrys y broblem.

324
00:16:06,509 --> 00:16:08,550
Mae llawer mwy i
jQuery Yna, rydym yn sicr

325
00:16:08,550 --> 00:16:10,050
mynd i siarad am yn y fideo hwn.

326
00:16:10,050 --> 00:16:15,410
Ond os ydych am ddysgu mwy, gallwch
yn mynd at y math jQuery dogfennau

327
00:16:15,410 --> 00:16:19,710
a dysgu cryn dipyn mwy am
y llyfrgell yn hyblyg iawn, sy'n

328
00:16:19,710 --> 00:16:22,550
yn wych ar gyfer gwneud ochr y cleient
sgriptio fel hyn yr ydym yn ei wneud

329
00:16:22,550 --> 00:16:26,240
i drin y golwg
ac yn teimlo ein tudalen ar y we

330
00:16:26,240 --> 00:16:28,750
â'r Model Gwrthrych Ddogfen.

331
00:16:28,750 --> 00:16:29,650
Rwy'n Doug Lloyd.

332
00:16:29,650 --> 00:16:31,930
Mae hyn yn CS50.

333
00:16:31,930 --> 00:16:34,022