1
00:00:00,000 --> 00:00:07,440

2
00:00:07,440 --> 00:00:08,180
>> TOMAS REIMERS: Hi, bawb.

3
00:00:08,180 --> 00:00:09,250
Fy enw i yw Tomas Reimers.

4
00:00:09,250 --> 00:00:10,500
>> MIKE Rizzo: A dwi'n Mike Rizzo.

5
00:00:10,500 --> 00:00:12,990
>> TOMAS REIMERS: Yr ydym yn ddau o TS CS50s.

6
00:00:12,990 --> 00:00:18,910
A heddiw rydym yn arwain y seminar ar
JavaScript a CSS ar gyfer apps we.

7
00:00:18,910 --> 00:00:22,140
Os ydych chi eisiau dilyn ar hyd, y
cyswllt yn iawn dros yno.

8
00:00:22,140 --> 00:00:25,190
A ydych chi eisiau i roi i fyny
ar y gryno cyfrifiadur?

9
00:00:25,190 --> 00:00:27,460
>> Mae y ddolen.

10
00:00:27,460 --> 00:00:30,390
Mae'n safle bach, sydd â chysylltiadau â
holl adnoddau yr ydym yn mynd i fod

11
00:00:30,390 --> 00:00:36,490
pwyntio chi heddiw ac mae ganddo hefyd lawer o
wybodaeth ddefnyddiol a ysgrifennwyd gan i ni

12
00:00:36,490 --> 00:00:39,680
darllen mwy manwl pan fyddwch yn mynd yn ôl,
ac rydych yn ceisio cofio beth

13
00:00:39,680 --> 00:00:42,166
yn union oedd yr ydym yn dweud, beth oedd eich
siarad am, et cetera.

14
00:00:42,166 --> 00:00:43,870
>> MIKE Rizzo: Pob hawl.

15
00:00:43,870 --> 00:00:44,890
Felly, gadewch i ni ddechrau.

16
00:00:44,890 --> 00:00:45,700
>> TOMAS REIMERS: Felly rydych chi am ddechrau?

17
00:00:45,700 --> 00:00:45,970
OK.

18
00:00:45,970 --> 00:00:47,170
>> MIKE Rizzo: Yeah.

19
00:00:47,170 --> 00:00:51,730
Felly, roeddem am y tro cyntaf i ddechrau gyda eang
trosolwg am y rhyngrwyd a

20
00:00:51,730 --> 00:00:54,240
ffeilio mathau wrth ddylunio gwefannau.

21
00:00:54,240 --> 00:00:57,550
Er bod y cyflwyniad hwn, rydym yn awyddus i
mynd i mewn i mewn i JavaScript llawer llawer

22
00:00:57,550 --> 00:01:00,320
yn nes ymlaen, rydym yn awyddus i ddechrau i ffwrdd gyda
yn unig, math o, fel golwg llygad aderyn

23
00:01:00,320 --> 00:01:03,270
o beth yw gwefan a sut
i feddwl am ddylunio

24
00:01:03,270 --> 00:01:04,800
gwefan ar gyfer y dechrau.

25
00:01:04,800 --> 00:01:08,370
>> Felly rydych guys, ar hyn o bryd - ag ef
bod nos Wener - dylai gael

26
00:01:08,370 --> 00:01:11,000
cyflwyno eich cyllid CS50
problem yn gosod.

27
00:01:11,000 --> 00:01:15,260
Gobeithio, a oedd yn blas da
o'r hyn y gall rhaglennu ar y we fod.

28
00:01:15,260 --> 00:01:18,261
Ond dyma ni am wneud hynny, math o, yn rhoi
chi blas arall, yn ogystal.

29
00:01:18,261 --> 00:01:23,190
>> TOMAS REIMERS: Felly, dim ond i ailadrodd yr hyn
digwydd, pan fyddwch yn teipio eich URL i

30
00:01:23,190 --> 00:01:26,650
eich porwr gwe, hynny URL yn cael
edrych i fyny yn y cyfrifiadur.

31
00:01:26,650 --> 00:01:28,590
Ac mae eich cyfrifiadur cysylltiedig
i gyfrifiadur arall,

32
00:01:28,590 --> 00:01:29,890
sy'n cynnal y wefan honno.

33
00:01:29,890 --> 00:01:33,150
Iawn, felly pan fyddwch yn mynd i google.com, rydych yn
gysylltiedig ag un o Google

34
00:01:33,150 --> 00:01:36,496
cyfrifiaduron, sydd â'r
ffeiliau ar gyfer google.com.

35
00:01:36,496 --> 00:01:38,750
>> Mae wedyn yn gofyn am ffeil penodol.

36
00:01:38,750 --> 00:01:40,020
Felly, os byddwch yn mynd i -

37
00:01:40,020 --> 00:01:41,550
Nid wyf yn gwybod -

38
00:01:41,550 --> 00:01:48,170
example.com / index.html neu / test.html,
ydych yn mynd i ofyn am

39
00:01:48,170 --> 00:01:49,340
y ffeil benodol.

40
00:01:49,340 --> 00:01:52,780
A'r we gweinydd yn mynd
i ddychwelyd i chi.

41
00:01:52,780 --> 00:01:54,910
>> Yna, unwaith y byddwch yn mynd drwy'r file -

42
00:01:54,910 --> 00:01:57,750

43
00:01:57,750 --> 00:01:59,950
unwaith y byddwch chi'n cyfrifiadur yn cael bod
file - mae'n mynd i ddechrau

44
00:01:59,950 --> 00:02:00,820
i adeiladu tudalen we.

45
00:02:00,820 --> 00:02:03,020
Felly, erbyn hyn mae wedi y ffeil HTML,
sydd yn fath o fel y

46
00:02:03,020 --> 00:02:05,170
strwythur y dudalen we.

47
00:02:05,170 --> 00:02:08,620
Gallai'r ffeil HTML hefyd yn cyfeirio
Ffeiliau CSS, sy'n diffinio'r

48
00:02:08,620 --> 00:02:09,889
arddull y dudalen we.

49
00:02:09,889 --> 00:02:12,970
>> Ffeiliau JavaScript, sy'n diffinio
rhyngweithio â'r dudalen we.

50
00:02:12,970 --> 00:02:15,200
Ffeiliau delwedd, sydd ddim ond yn delweddau.

51
00:02:15,200 --> 00:02:19,450
Ac o bosibl yn cysylltu i ffeiliau HTML eraill,
sydd wedyn yn ydych yn gallu ymweld.

52
00:02:19,450 --> 00:02:22,656

53
00:02:22,656 --> 00:02:24,380
>> MIKE Rizzo: OK, mawr.

54
00:02:24,380 --> 00:02:28,980
Felly, rydych guys i gyd wedi, efallai,
gosod ofalus eich gwesteiwr lleol

55
00:02:28,980 --> 00:02:30,810
ar eich peiriant rhithwir.

56
00:02:30,810 --> 00:02:35,650
A bod yn unig, math o, yw'r lleol
parth bod eich cyfrifiadur yn cynnal unig

57
00:02:35,650 --> 00:02:38,760
i chi yn eich cyfeiriad IP eich hun.

58
00:02:38,760 --> 00:02:43,300
>> Hynny o fewn hynny, yna gallwch ychwanegu
iddo eich tudalennau gwe eich hun.

59
00:02:43,300 --> 00:02:47,655
Yr wyf yn golygu, yn CS50 Cyllid, dylech gael
ychwanegu rhai tudalennau HTML, sydd,

60
00:02:47,655 --> 00:02:49,410
math o, wedi'i lapio mewn deunydd lapio PHP.

61
00:02:49,410 --> 00:02:54,690
Ond yn y pen draw, beth yw eich tudalennau PHP
yn outputting oedd HTML.

62
00:02:54,690 --> 00:02:58,210
>> Ond yn meddwl yn ôl i'r cychwyn
y PSET, roedd rhaid i ni osod

63
00:02:58,210 --> 00:03:00,890
y caniatâd ar gyfer popeth, dde?

64
00:03:00,890 --> 00:03:07,270
Felly, mae hyn yn unig yn y bôn yn gadael i ni wybod
sy'n gallu darllen, ysgrifennu, ac o bosibl

65
00:03:07,270 --> 00:03:08,730
gweithredu pob un o'r ffeiliau.

66
00:03:08,730 --> 00:03:11,870
Felly, rydym yn mynd i wneud cyflym - hm?

67
00:03:11,870 --> 00:03:15,660
>> TOMAS REIMERS: Felly rydym yn mynd
i wneud demo cyflym.

68
00:03:15,660 --> 00:03:19,560
Felly, dim ond i atgoffa chi, pan fyddwch yn
cysylltu â Google gyfrifiadur -

69
00:03:19,560 --> 00:03:20,690
pwy bynnag -

70
00:03:20,690 --> 00:03:24,060
a gofyn am ffeil, gall y cyfrifiadur cyntaf
Mae angen i wneud yn siŵr eich bod yn awdurdodi

71
00:03:24,060 --> 00:03:28,790
i mewn gwirionedd yn edrych ar y ffeil neu ddarllen fod
ffeil oherwydd ni allwch ofyn

72
00:03:28,790 --> 00:03:30,430
ar gyfer unrhyw ffeil ar y cyfrifiadur, dde?

73
00:03:30,430 --> 00:03:32,260
Byddai hynny'n fod yn berygl diogelwch.

74
00:03:32,260 --> 00:03:37,020
>> Felly ffeiliau ar y systemau a ddefnyddiwn, fel
y peiriant CS50, wedi tri

75
00:03:37,020 --> 00:03:39,200
pobl cyffredinol pwy all gael
caniatâd i rywbeth.

76
00:03:39,200 --> 00:03:41,610
Y cyntaf yw'r gwir
perchennog dywedodd ffeil.

77
00:03:41,610 --> 00:03:43,820
Yr ail yw'r grŵp sy'n
y ffeil yn perthyn iddo.

78
00:03:43,820 --> 00:03:46,090
Nid ydym yn mynd i ganolbwyntio
gormod ar hynny.

79
00:03:46,090 --> 00:03:50,010
A'r peth olaf yw, math o, fel y
byd, neu fel pawb arall pwy

80
00:03:50,010 --> 00:03:54,130
heb fod yn benodol i'r ffeil ac nid yw'n
gennych unrhyw hawliau perchnogaeth drosto.

81
00:03:54,130 --> 00:04:05,650
>> Felly, os oes gennym perchennog, grŵp,
ac yna y byd.

82
00:04:05,650 --> 00:04:10,510
Ac yna, ar gyfer pob un o'r grwpiau hyn, rydych yn
yn gallu cael un o dri caniatâd,

83
00:04:10,510 --> 00:04:13,010
OK, neu luosog ohonynt.

84
00:04:13,010 --> 00:04:15,070
Gallwch gael caniatadau darllen.

85
00:04:15,070 --> 00:04:16,560
Gallwch gael caniatadau cywir.

86
00:04:16,560 --> 00:04:18,880
A gall yn rhaid i chi weithredu caniatâd.

87
00:04:18,880 --> 00:04:22,060
>> Felly, o ran y mathau ffeil gwirioneddol, darllen
caniatâd yn debyg i ddarllen mewn gwirionedd

88
00:04:22,060 --> 00:04:23,250
cynnwys y ffeil.

89
00:04:23,250 --> 00:04:24,730
Mae caniatâd cywir yn ysgrifennu
i ffeil meddai.

90
00:04:24,730 --> 00:04:28,370
Ganiatâd gweithredu yn rhedeg y
ffeil fel chi ei wneud pan fyddwch yn rhedeg un o

91
00:04:28,370 --> 00:04:29,620
eich prosiectau CS50.

92
00:04:29,620 --> 00:04:32,190

93
00:04:32,190 --> 00:04:38,820
>> Felly, pan fyddwn yn meddwl am ffeiliau
fel pan mae angen i ddarllen HTML

94
00:04:38,820 --> 00:04:41,790
ffeiliau, y mae angen ei byd
ddarllenadwy, dde?

95
00:04:41,790 --> 00:04:44,420
Yn ôl pob tebyg, hefyd yn y perchennog am
i yn gallu golygu y ffeil.

96
00:04:44,420 --> 00:04:46,610
Felly, y perchennog sy'n mynd i angen
darllen ac ysgrifennu caniatâd.

97
00:04:46,610 --> 00:04:48,710
Nid oes wir angen iddynt weithredu.

98
00:04:48,710 --> 00:04:50,950
>> Grŵp, rydym yn mynd i drin y
un fath â'r byd am y tro.

99
00:04:50,950 --> 00:04:54,610
Felly mae angen caniatâd darllen.

100
00:04:54,610 --> 00:04:57,310
Ond nid oes angen iddynt ysgrifennu
neu weithredu caniatâd.

101
00:04:57,310 --> 00:05:01,920
Ac yn awr, os ydym yn meddwl yn ôl i gyn
PSETs, yr hyn yr ydym yn sylweddoli yw y math yma

102
00:05:01,920 --> 00:05:03,360
o edrych fel deuaidd, dde?

103
00:05:03,360 --> 00:05:04,210
1 yn sefyll am ie.

104
00:05:04,210 --> 00:05:05,040
0 am ddim.

105
00:05:05,040 --> 00:05:06,870
Ac rydym yn gallu cyfieithu mewn gwirionedd yn
hwn i deuaidd.

106
00:05:06,870 --> 00:05:10,478
>> Felly byddai 110 yn deuaidd fod yn 6.

107
00:05:10,478 --> 00:05:13,270
Byddai 100 yn 4.

108
00:05:13,270 --> 00:05:14,690
Yr un fath â byd.

109
00:05:14,690 --> 00:05:20,846
Felly, y nifer a fyddai'n ei gael ar gyfer y
Byddai caniatâd ar gyfer hyn fod yn 644.

110
00:05:20,846 --> 00:05:24,400
>> MIKE Rizzo: Ac os ydych yn meddwl yn ôl i
pan fyddwch yn chmoded rhywbeth, yr wyf yn credu

111
00:05:24,400 --> 00:05:28,980
maent yn rhoi yn y broblem yn gosod y
enghraifft o ble y gallech ei wneud

112
00:05:28,980 --> 00:05:36,470
rhywbeth fel chmod 644
ac yna ffeilio enw.

113
00:05:36,470 --> 00:05:39,980
Mae'r 644 Yna, gallwch nawr weld yn uniongyrchol
o ble y daw o.

114
00:05:39,980 --> 00:05:42,840
Felly, gobeithio, sy'n gwneud y
ychydig yn fwy clir.

115
00:05:42,840 --> 00:05:45,600
>> Ac yna am eglurder chi guy -

116
00:05:45,600 --> 00:05:48,200
oh ie, yma y mae eto.

117
00:05:48,200 --> 00:05:53,260
Felly, 600 yna byddai dim ond yn yr enghraifft
rydym yn rhoi i fyny yma lle bo'r perchennog wedi

118
00:05:53,260 --> 00:05:56,360
darllen a chaniatâd iawn tra grŵp
ac nid y byd yn cael unrhyw ganiatâd

119
00:05:56,360 --> 00:05:58,145
i gael mynediad at y ffeil.

120
00:05:58,145 --> 00:06:01,500
>> TOMAS REIMERS: Ac yna mae gennym cyflym
rhestr o ganiatadau cyffredin.

121
00:06:01,500 --> 00:06:05,250
Felly cyfeirlyfrau, yr ydych am
mewn gwirionedd chmod 711.

122
00:06:05,250 --> 00:06:08,930
Cyflym neilltu - er cyfeiriadur i gael
caniatâd gweithredadwy ei olygu i fod yn gallu

123
00:06:08,930 --> 00:06:11,680
i agor y cyfeiriadur.

124
00:06:11,680 --> 00:06:15,280
Delweddau, CSS, JavaScript, anghenion HTML
644 oherwydd, yn y bôn, y byd

125
00:06:15,280 --> 00:06:16,400
anghenion darllen caniatâd.

126
00:06:16,400 --> 00:06:20,960
>> A PHP, yr ydych guys wedi gweld
er na fyddwn yn siarad am y peth

127
00:06:20,960 --> 00:06:24,880
llym fel arfer yn cael ei chmoded gyda
caniatâd 600 oherwydd ei fod yn cael ei redeg gyda

128
00:06:24,880 --> 00:06:26,540
y caniatâd y perchennog.

129
00:06:26,540 --> 00:06:27,790
O leiaf ar yr offer.

130
00:06:27,790 --> 00:06:30,200

131
00:06:30,200 --> 00:06:36,870
>> MIKE Rizzo: Felly os nad ydych yn ei wneud yn benodol
pennu pa fath o ffeil

132
00:06:36,870 --> 00:06:39,480
ydych chi eisiau wrth osod mewn gwirionedd
hyd y cyflwyniad hwn -

133
00:06:39,480 --> 00:06:43,490
cawsom broblem gyda hyn oherwydd
Nid yw popeth yn cael ei chmoded gywir -

134
00:06:43,490 --> 00:06:47,550
ydych yn mynd i gael, math o, a
gwall gwahardd bod y wefan

135
00:06:47,550 --> 00:06:49,700
Nid oes mewn gwirionedd yn cael caniatâd
i gael mynediad beth bynnag ffeil

136
00:06:49,700 --> 00:06:51,370
yr ydych am iddo i gael mynediad.

137
00:06:51,370 --> 00:06:54,780
Ac wrth gwrs, gall fod yn sefydlog -
fel yn broblem a osodwyd - drwy newid

138
00:06:54,780 --> 00:06:56,405
caniatâd yn briodol.

139
00:06:56,405 --> 00:06:59,620
>> TOMAS REIMERS: A'r sylw olaf ar gyfer
datblygu lleol yn gyflym yw - rydym

140
00:06:59,620 --> 00:07:02,000
dwyn hyn i fyny, ond rydym yn unig am
i ddod ag ef i fyny eto -

141
00:07:02,000 --> 00:07:06,230
os ydych yn gofyn am gweinydd - cynnal mor lleol,
er enghraifft, com neu beth bynnag. -

142
00:07:06,230 --> 00:07:09,170
ac nad ydych yn pennu ffeil penodol,
y ffeil bod eich cyfrifiadur yn mynd

143
00:07:09,170 --> 00:07:11,540
i ofyn am ei alw index.html.

144
00:07:11,540 --> 00:07:12,790
Neu os nad yw'n bodoli, index.php.

145
00:07:12,790 --> 00:07:15,560

146
00:07:15,560 --> 00:07:16,350
>> Cool.

147
00:07:16,350 --> 00:07:19,560
Felly dyna dim ond ailadrodd o bopeth,
gobeithio, yr ydym wedi eu trafod yn

148
00:07:19,560 --> 00:07:22,800
adran hon, a darlith,
a hyd yn hyn yn CS50.

149
00:07:22,800 --> 00:07:26,110
Ac yn awr rydym yn mynd i ddechrau siarad
llyfrgelloedd amdano'n benodol.

150
00:07:26,110 --> 00:07:30,270
Llyfrgelloedd JavaScript a CSS
ar gyfer apps we.

151
00:07:30,270 --> 00:07:36,350
>> Felly, un rheswm gyflym pam yr ydym wedi
llyfrgelloedd yn rhaglennu -

152
00:07:36,350 --> 00:07:39,000
mae llawer o broblemau yn
rhaglennu, sy'n cadw neidio i fyny

153
00:07:39,000 --> 00:07:40,570
unwaith eto, ac unwaith eto, ac unwaith eto.

154
00:07:40,570 --> 00:07:43,870
Efallai y byddwch yn sylwi bod llawer o wefannau
Mae angen y gallu i gael galw heibio i lawr

155
00:07:43,870 --> 00:07:49,100
bwydlenni, er enghraifft, neu os oes angen y gallu
i gael botwm safonol iawn

156
00:07:49,100 --> 00:07:51,400
arddull, ni all fod yn
y peth hawsaf.

157
00:07:51,400 --> 00:07:54,670
Nawr eich bod yn dechrau i fynd i mewn HTML, rydych yn
sylweddoli bod botymau gall mewn gwirionedd

158
00:07:54,670 --> 00:07:57,720
edrych yn hyll os ydych yn
peidiwch â gwneud unrhyw beth.

159
00:07:57,720 --> 00:08:00,830
>> Felly, mae llawer o bobl wedi ysgrifennu
Gelwir llyfrgelloedd.

160
00:08:00,830 --> 00:08:02,990
Ac yn y cyd-destun hwn, maen nhw'n
a elwir hefyd yn fframweithiau.

161
00:08:02,990 --> 00:08:04,790
Rydym yn mynd i ddefnyddio'r
dau gyfnewidiol.

162
00:08:04,790 --> 00:08:07,360
A'r hyn y maent yn ei eu bod yn y bôn
darnau premade o god -

163
00:08:07,360 --> 00:08:09,130
naill ai CSS neu JavaScript -

164
00:08:09,130 --> 00:08:13,240
sy'n cymryd i ffwrdd llawer o'r
tîm sydd gennych yn codio.

165
00:08:13,240 --> 00:08:17,290
>> Felly, maent yn cyn-ddiffinio criw o ddosbarthiadau neu
cyn-ddiffinio criw o swyddogaethau ar gyfer

166
00:08:17,290 --> 00:08:20,110
Achos JavaScript, sy'n
gallwch ffonio nes ymlaen.

167
00:08:20,110 --> 00:08:22,690
Ac yna ydych yn gallu, rhyw fath o, yn cael
mynediad at y cod hwn heb

168
00:08:22,690 --> 00:08:23,710
gorfod gwneud unrhyw beth.

169
00:08:23,710 --> 00:08:27,750
Mae enghraifft o'r llyfrgell yn CS50.H.
Yr oedd llyfrgell yr ydym yn ei roi i chi yn ôl

170
00:08:27,750 --> 00:08:32,090
yn wythnos un, a oedd yn caniatáu i chi ei wneud
phethau fel 'na GetInt a GetString

171
00:08:32,090 --> 00:08:35,237
heb orfod ysgrifennu
unrhyw god eich hun.

172
00:08:35,237 --> 00:08:36,179
>> MIKE Rizzo: Pob hawl.

173
00:08:36,179 --> 00:08:40,299
Felly dyma, yn union fel roedd rhaid i ni gynnwys
yn ein c ffeiliau gwahanol

174
00:08:40,299 --> 00:08:46,570
llyfrgelloedd, rydym hefyd gynnwys mewn
ein HTML ffeiliau gwahanol lyfrgelloedd.

175
00:08:46,570 --> 00:08:50,310
Er enghraifft, os oeddem am gynnwys
llyfrgell JavaScript benodol yma,

176
00:08:50,310 --> 00:08:52,850
efallai, un yr ydym wedi ysgrifennu
ein hunain wrth iddo gael ei gynnal yn lleol

177
00:08:52,850 --> 00:08:56,000
a elwir yn script.js, rydym yn unig
defnyddio nodiant hwn.

178
00:08:56,000 --> 00:08:59,500
>> Felly, rydym wedi hafal math sgript
JavaScript ffynhonnell hafal

179
00:08:59,500 --> 00:09:01,260
JavaScript.js.

180
00:09:01,260 --> 00:09:05,190
Ac os ydych yn meddwl yn ôl at eich CS50
problem cyllid a osodwyd, os ydych yn edrych yn

181
00:09:05,190 --> 00:09:09,190
header.php yn y ffolder templedi,
dylech fod wedi gweld

182
00:09:09,190 --> 00:09:10,970
rhai o'r rhain yn cynnwys.

183
00:09:10,970 --> 00:09:13,250
Felly, mae hyn yn un cyntaf - y sgriptiau -

184
00:09:13,250 --> 00:09:16,080
yn cynnwys llyfrgell JavaScript.

185
00:09:16,080 --> 00:09:18,760
Gan gynnwys llyfrgell CSS yn
ychydig yn wahanol.

186
00:09:18,760 --> 00:09:21,430
>> Yma, yn hytrach na'r sgript
tagio oes angen y tag cyswllt.

187
00:09:21,430 --> 00:09:27,110
Ac yna, y math CSS testun
ychydig yn wahanol.

188
00:09:27,110 --> 00:09:29,270
Nid oes rhaid i chi bob amser i gynnwys
dalen arddull rel.

189
00:09:29,270 --> 00:09:30,970
Ond rwy'n credu ei fod yn, yn gyffredinol,
arfer da.

190
00:09:30,970 --> 00:09:35,810
>> Ac yna yn olaf, y href, yr ydych yn
gweld yn ôl pob tebyg yn eich ATAGs ar gyfer cysylltu

191
00:09:35,810 --> 00:09:39,440
mewn gwahanol gysylltiadau yn unig yn pennu
y cyswllt ble i ddod o hyd i hynny.

192
00:09:39,440 --> 00:09:42,250
Er enghraifft, os oeddem am i gysylltu
gwahanol llyfrgell - gadewch i 'jyst dweud -

193
00:09:42,250 --> 00:09:49,330
a oedd yn byw yn y styles.css.

194
00:09:49,330 --> 00:09:54,030
Ac rydym yn awyddus i gysylltu hynny mewn dyna
gynhaliwyd ar y we, byddem yn copïo hynny.

195
00:09:54,030 --> 00:09:58,834
Ac yna bastio i mewn beth bynnag
mae gennym yma yn lle hynny.

196
00:09:58,834 --> 00:10:01,340
>> TOMAS REIMERS: OK, gobeithio i chi
guys eisoes yn gyfarwydd

197
00:10:01,340 --> 00:10:02,410
gyda sut i gysylltu CSS.

198
00:10:02,410 --> 00:10:04,000
Bu'n rhaid i chi wneud hynny ar
eich set brown diwethaf.

199
00:10:04,000 --> 00:10:07,110
JavaScript, rhai ohonoch efallai
gael rhywfaint o brofiad gyda.

200
00:10:07,110 --> 00:10:07,980
Nid yw rhai ohonoch efallai.

201
00:10:07,980 --> 00:10:12,190
>> Felly ar hyn o bryd, yn gwybod bod ffeil JavaScript
yn debyg iawn ffeil CSS yn

202
00:10:12,190 --> 00:10:15,640
yr ystyr y gallwch gysylltu ag ef neu
y gallwch ei gynnwys yn fewnol.

203
00:10:15,640 --> 00:10:17,360
Ac mae'n eich galluogi i sgript pethau.

204
00:10:17,360 --> 00:10:21,820
Ac rydym yn mynd i chi gerdded drwy
ychydig bach o Javascript yn nes ymlaen.

205
00:10:21,820 --> 00:10:23,560
>> Felly, gan ddefnyddio llyfrgell -

206
00:10:23,560 --> 00:10:26,150
unwaith y byddwch wedi ei gynnwys, mae fel
syml â llythrennol ffonio'r

207
00:10:26,150 --> 00:10:29,640
swyddogaethau neu ychwanegu'r
enwau dosbarth iddo.

208
00:10:29,640 --> 00:10:32,220
Y peth olaf yr ydym am i siarad
amdano o ran llyfrgell -

209
00:10:32,220 --> 00:10:34,180
ac mae hyn yn fwy o nodyn technegol -

210
00:10:34,180 --> 00:10:35,860
yn trwyddedu ffynhonnell agored.

211
00:10:35,860 --> 00:10:41,550
Felly, pan fyddwch yn dod o hyd i lyfrgelloedd gwirioneddol hyn,
efallai y byddwch yn meddwl am

212
00:10:41,550 --> 00:10:47,630
cwestiynau hoffi yw'n iawn bod Im 'jyst yn
ddefnyddio cod rhywun arall, yn enwedig

213
00:10:47,630 --> 00:10:51,970
oherwydd dyna rhywbeth yr ydym yn fawr iawn
dweud wrthych i beidio â gwneud y cwrs hwn.

214
00:10:51,970 --> 00:10:55,790
>> Felly, yn achos drwyddedu ffynhonnell agored,
llawer o ddatblygwyr -

215
00:10:55,790 --> 00:10:57,540
unwaith y byddant wedi ysgrifennu llyfrgell,
y maent yn meddwl y gallai fod yn

216
00:10:57,540 --> 00:10:59,450
ddefnyddiol i bobl eraill -

217
00:10:59,450 --> 00:11:02,420
yn cyhoeddi i'r we
a rhoi trwydded.

218
00:11:02,420 --> 00:11:06,620
A thrwydded y bôn yn dweud fy mod drwy hyn
rhoi caniatâd i eraill

219
00:11:06,620 --> 00:11:11,250
pobl i ddefnyddio darn hwn o feddalwedd
â'r math canlynol o

220
00:11:11,250 --> 00:11:13,230
amodau.

221
00:11:13,230 --> 00:11:16,100
>> Rydym wedi cynnwys dolen i safle da i
helpu i ddeall y trwyddedau yn

222
00:11:16,100 --> 00:11:17,720
achos yr ydych yn rhedeg i mewn iddynt.

223
00:11:17,720 --> 00:11:21,680
Amodau cyffredin yw pethau fel
mae croeso i chi ddefnyddio fy llyfrgell felly

224
00:11:21,680 --> 00:11:23,000
belled ag y byddwch yn rhoi credyd i mi.

225
00:11:23,000 --> 00:11:25,670
Mae croeso i chi ddefnyddio fy llyfrgell
cyn belled â phan mae'n torri

226
00:11:25,670 --> 00:11:26,790
nad ydych yn rhoi'r bai i mi.

227
00:11:26,790 --> 00:11:30,310
Mae croeso i chi ddefnyddio fy llyfrgell mor hir
gan nad ydych yn ei ddefnyddio i wneud arian

228
00:11:30,310 --> 00:11:31,910
i chi eich hun.

229
00:11:31,910 --> 00:11:34,130
Mae'r rhain yn fathau o gyffredin
amodau.

230
00:11:34,130 --> 00:11:37,780
>> Am y prosiect terfynol CS50, maent yn
Ni ddylai fod yn hynod berthnasol oherwydd

231
00:11:37,780 --> 00:11:41,440
y prosiectau yr ydych guys yn eu defnyddio yn
yn ôl pob tebyg yn hytrach, rhyw fath o, a elwir.

232
00:11:41,440 --> 00:11:44,170
Ond pan fyddwch mewn gwirionedd yn mynd allan i'r
byd a dechrau defnyddio llyfrgelloedd, sy'n

233
00:11:44,170 --> 00:11:48,100
neu beidio cael eu gweithredu, yn ogystal â
rhai o'r rhai mwy poblogaidd rydym yn

234
00:11:48,100 --> 00:11:49,780
mynd i fod yn mynd drwyddo.

235
00:11:49,780 --> 00:11:53,310
Mae'n dda i fod yn gallu deall
trwyddedau hyn ac i

236
00:11:53,310 --> 00:11:54,560
yn deall yr hyn y maent yn ei olygu.

237
00:11:54,560 --> 00:11:58,120

238
00:11:58,120 --> 00:11:58,586
Ac yn mynd yn ôl.

239
00:11:58,586 --> 00:12:00,960
>> MIKE Rizzo: OK.

240
00:12:00,960 --> 00:12:04,850
Felly nawr symud ymlaen i enghreifftiau
o CSS gwirioneddol.

241
00:12:04,850 --> 00:12:07,770
Ar y pwynt hwn hyd yn hyn, efallai y byddwch
Nid yw wedi dod ar draws hyn.

242
00:12:07,770 --> 00:12:10,300
Ond efallai y byddwch wedi dod ar eu traws yn
eich bywyd bob dydd ble mae rhywbeth

243
00:12:10,300 --> 00:12:13,160
sy'n edrych un ffordd ar un porwr
Efallai nad edrych yr un fath

244
00:12:13,160 --> 00:12:14,880
ffordd borwr arall.

245
00:12:14,880 --> 00:12:17,400
>> Gelwir hyn yn porwr porwr
gydnaws.

246
00:12:17,400 --> 00:12:20,780
Ac yn gynyddol mae'n dod yn fwy a
yn fwy o broblem, yn enwedig gan

247
00:12:20,780 --> 00:12:25,260
porwyr cymryd mwy a mwy o rhyddid
i weithredu pethau fel y maent yn dymuno.

248
00:12:25,260 --> 00:12:28,440
Felly, i oresgyn hynny, mae mewn gwirionedd
llyfrgell gwych o'r enw Normalize.CSS.

249
00:12:28,440 --> 00:12:32,236

250
00:12:32,236 --> 00:12:33,770
>> TOMAS REIMERS: Rydym yn cynnwys y ddolen.

251
00:12:33,770 --> 00:12:36,210
Ar y pwynt hwn, mae'n ddefnyddiol os
i chi gael eich gliniadur i mewn 'na

252
00:12:36,210 --> 00:12:38,740
edrych ar y safle.

253
00:12:38,740 --> 00:12:42,580
Ac rydym yn rhoi hwn i chi ar
bellach yn syml oherwydd bod y rownd derfynol CS50

254
00:12:42,580 --> 00:12:44,370
prosiect mewn gwirionedd yn mynd i
yn gofyn i chi roi ar waith

255
00:12:44,370 --> 00:12:45,860
yn yr un modd a thrwy porwyr.

256
00:12:45,860 --> 00:12:49,250
>> Felly, dim ond er mwyn cadw yn y nghefn eich
pen, mae hwn yn llyfrgell gwych

257
00:12:49,250 --> 00:12:51,170
gan y bydd, rhyw fath o,
safoni pethau.

258
00:12:51,170 --> 00:12:54,230
Yn Firefox, gallai rhywbeth yn dangos
fel un picsel i'r chwith.

259
00:12:54,230 --> 00:12:58,390
Ac yna gall Chrome benderfynu sydd mewn gwirionedd yn
beth oeddech yn ei olygu yn 10 picsel

260
00:12:58,390 --> 00:12:59,380
ar y chwith.

261
00:12:59,380 --> 00:13:01,030
Ac rydych am i safoni hyn.

262
00:13:01,030 --> 00:13:05,360
Bydd Normalize ei wneud mewn gwirionedd yn dda iawn
swydd o wneud yn siŵr bod eich safle

263
00:13:05,360 --> 00:13:08,070
yn edrych yr un fath ar draws porwyr.

264
00:13:08,070 --> 00:13:10,660
>> MIKE Rizzo: Felly, os oeddem am i ddim ond
cliciwch ar y ddolen yn gyflym iawn ac yn dangos

265
00:13:10,660 --> 00:13:13,140
wrthych beth sy'n edrych fel, yr ydych yn
ei lawrlwytho drwy ddefnyddio'r

266
00:13:13,140 --> 00:13:14,670
Download mawr botwm.

267
00:13:14,670 --> 00:13:18,520
Neu yr wyf yn eich annog i ddarllen mwy am y peth
drwy glicio ar y ddolen hon yn rhan isaf

268
00:13:18,520 --> 00:13:19,310
gornel dde.

269
00:13:19,310 --> 00:13:22,420
>> TOMAS REIMERS: Ac os ydych mewn gwirionedd yn
cliciwch Read More iawn yno -

270
00:13:22,420 --> 00:13:24,340
cliciwch y ffynhonnell ar GitHub -

271
00:13:24,340 --> 00:13:31,720
byddwch mewn gwirionedd yn gweld y ffynhonnell agored
drwydded ar LICENSE.md iawn yno.

272
00:13:31,720 --> 00:13:35,740
A byddwch yn gweld yma yw'r
drwydded MIT boblogaidd iawn.

273
00:13:35,740 --> 00:13:38,940
Unwaith eto, os ydych yn darllen drwy'r testun,
byddwch yn gallu dod o hyd iddo ar y safle

274
00:13:38,940 --> 00:13:42,550
rydym yn cyfeirio at cyn ac yn gallu
deall heb orfod darllen

275
00:13:42,550 --> 00:13:45,920
drwy'r jargon cyfreithiol.

276
00:13:45,920 --> 00:13:46,850
>> MIKE Rizzo: OK, mawr.

277
00:13:46,850 --> 00:13:47,940
Felly dyna Normalize.

278
00:13:47,940 --> 00:13:49,190
Rydym yn awyddus i roi i chi
sydd wir yn gyflym.

279
00:13:49,190 --> 00:13:50,030
O, a oes gennych gwestiwn?

280
00:13:50,030 --> 00:13:53,013
>> GYNULLEIDFA: Felly pan fyddwch yn ei lwytho i lawr, yr ydych yn
dilynwch y cod bod ganddynt

281
00:13:53,013 --> 00:13:54,098
o dan y Download botwm?

282
00:13:54,098 --> 00:13:55,860
>> TOMAS REIMERS: Ie, felly
pan fyddwch yn llwytho i lawr -

283
00:13:55,860 --> 00:13:58,130
>> MIKE Rizzo: O, mae hynny'n bwynt da.

284
00:13:58,130 --> 00:14:00,700
Felly, y cwestiwn oedd sut mae
mewn gwirionedd rydym yn ei lwytho i lawr?

285
00:14:00,700 --> 00:14:03,260
Felly, os ydym yn cliciwch ar y ddolen, gwelwn
ei fod mewn gwirionedd pops i fyny

286
00:14:03,260 --> 00:14:05,030
ar y cod ffynhonnell.

287
00:14:05,030 --> 00:14:08,550
Felly, i wneud hyn, yr hyn y gallem
ei wneud yw cliciwch Save As.

288
00:14:08,550 --> 00:14:10,830
Save As a dylai fod
yn dod i fyny ffeil.

289
00:14:10,830 --> 00:14:14,160
Ac yna gallwn ddewis i arbed
fel normalize.CSS.

290
00:14:14,160 --> 00:14:15,810
Ac yna byddai'n rhaid i chi gysylltu i mewn -

291
00:14:15,810 --> 00:14:18,660
>> TOMAS REIMERS: Yr un ffordd rydych yn
cysylltu mewn unrhyw ffeil arall.

292
00:14:18,660 --> 00:14:22,250
Ac ar ôl i chi gysylltu i mewn, yr hyn sy'n wych
am Normalize yw hi mewn gwirionedd yn

293
00:14:22,250 --> 00:14:25,920
cymryd gofalu am yr holl caled
gweithio ei ben ei hun.

294
00:14:25,920 --> 00:14:27,730
Sy'n golygu bod nad oes gennych
ychwanegu unrhyw dosbarthiadau.

295
00:14:27,730 --> 00:14:29,690
>> Nid oes rhaid i chi wneud unrhyw beth 'n annaearol.

296
00:14:29,690 --> 00:14:34,590
Bydd yn normaleiddio heb i chi
gwneud unrhyw beth pellach.

297
00:14:34,590 --> 00:14:36,083
Oes, mae'n rhaid i chi ei gynnwys.

298
00:14:36,083 --> 00:14:38,990

299
00:14:38,990 --> 00:14:40,240
Nid yw Google Chrome yn ymateb.

300
00:14:40,240 --> 00:14:43,270

301
00:14:43,270 --> 00:14:44,860
>> Dim ond cyflym o'r neilltu -

302
00:14:44,860 --> 00:14:46,800
Yr wyf yn sylwi ein neidio i mewn i hyn.

303
00:14:46,800 --> 00:14:49,010
Mae gweddill y cyflwyniad hwn yw
mynd i fod yn drosolwg cyflym.

304
00:14:49,010 --> 00:14:50,380
Mae arolwg o lyfrgelloedd.

305
00:14:50,380 --> 00:14:52,710
>> Yn y bôn, yr hyn y maent yn cael eu.

306
00:14:52,710 --> 00:14:53,350
Yr hyn y maent yn ei wneud.

307
00:14:53,350 --> 00:14:54,060
Sut maen nhw'n ddefnyddiol.

308
00:14:54,060 --> 00:14:56,540
Sut y gallech eu gweithredu.

309
00:14:56,540 --> 00:14:59,730
Os ydych am ddechrau edrych arnyn nhw,
ganlynol ynghyd, a darllen trwy

310
00:14:59,730 --> 00:15:01,990
iddynt, byddwn yn hynod annog hynny.

311
00:15:01,990 --> 00:15:07,620
>> Fel arall, rydych yn croeso hefyd i
dechrau eu llwytho i lawr ac yn cynnwys

312
00:15:07,620 --> 00:15:11,400
nhw mewn golwg dim ond i weld yr hyn y maent
edrych fel neu beth maent yn ei wneud os oes gennych

313
00:15:11,400 --> 00:15:12,270
eich gliniadur o'ch blaen.

314
00:15:12,270 --> 00:15:14,650
Os na, mae croeso i chi gadw
gwrando arnom siarad.

315
00:15:14,650 --> 00:15:15,500
Rydym yn mynd i barhau i siarad.

316
00:15:15,500 --> 00:15:18,680
Ac mae gennym amser ar y diwedd, gobeithio
byddwn mewn gwirionedd yn cael i mewn i ddangos i chi

317
00:15:18,680 --> 00:15:20,946
hyn y mae rhai o'r llyfrgelloedd hyn
edrych.

318
00:15:20,946 --> 00:15:22,320
>> MIKE Rizzo: Cool.

319
00:15:22,320 --> 00:15:25,466
Mae pob hawl, felly nawr gadewch i ni siarad
am Font Awesome.

320
00:15:25,466 --> 00:15:30,480
>> TOMAS REIMERS: Awesome felly Ffont yn
safle mewn gwirionedd daclus, yn enwedig ar gyfer y rhai

321
00:15:30,480 --> 00:15:32,450
ohonom sy'n llai artistig
talentog.

322
00:15:32,450 --> 00:15:36,330

323
00:15:36,330 --> 00:15:38,880
Anwybyddu'r Enw ffont Awesome, mae'n rhoi
chi criw o eiconau, sy'n cael eu

324
00:15:38,880 --> 00:15:41,050
ddefnyddiol iawn.

325
00:15:41,050 --> 00:15:45,950
Felly mae llawer o weithiau y byddwch yn gweithredu
icon efallai y byddwch am fel 'n glws x felly

326
00:15:45,950 --> 00:15:47,170
y gallwch gau rhywbeth.

327
00:15:47,170 --> 00:15:49,910
>> Neu efallai y byddwch eisiau rhyw fath o botwm Golygu
gyda darlun pensil fel

328
00:15:49,910 --> 00:15:50,940
pawb arall wedi.

329
00:15:50,940 --> 00:15:53,850
A dyna pryd byddwch yn dysgu bod
Gall dynnu eiconau hynny fod

330
00:15:53,850 --> 00:15:55,510
diflas iawn ac yn anodd.

331
00:15:55,510 --> 00:15:59,160
Font Awesome - os ydych mewn gwirionedd yn
mynd i'r safle -

332
00:15:59,160 --> 00:16:02,892
rhoi llawer o eiconau chi o dan
yr eiconau ar y brig.

333
00:16:02,892 --> 00:16:06,980
Yeah, dim ond y brig.

334
00:16:06,980 --> 00:16:09,030
Bydd yn rhoi llawer i chi
o eiconau ar gyfer rhad ac am ddim.

335
00:16:09,030 --> 00:16:15,210
>> Felly dyma byddwch yn gweld ein bod wedi bethau fel
seren, bariau, bollt mellt, a

336
00:16:15,210 --> 00:16:19,750
calendr, nam, llyfr, et cetera.

337
00:16:19,750 --> 00:16:21,110
Gall hyn fod yn ddefnyddiol iawn.

338
00:16:21,110 --> 00:16:24,290
Mae'r ffordd yr ydych yn cynnwys hyn yw eich cynnwys
llythrennol y ffeil CSS.

339
00:16:24,290 --> 00:16:29,760
Ac ar ôl i chi wedi cynnwys y ffeil CSS,
beth y gallwch chi ei wneud yw i greu

340
00:16:29,760 --> 00:16:33,430
tag o'r enw I. satands It am
icon gyda'r FA dosbarth

341
00:16:33,430 --> 00:16:34,460
sefyll am Font Awesome.

342
00:16:34,460 --> 00:16:36,330
Ac yna, beth bynnag ddosbarth y dymunwch.

343
00:16:36,330 --> 00:16:41,220
>> Felly, os oeddwn i eisiau eicon o blws hwn
sgwâr i'r dde yma, byddwn yn rhoi

344
00:16:41,220 --> 00:16:43,290
mae'n y dosbarth FA.

345
00:16:43,290 --> 00:16:46,230
Ac yna cysylltnod FA ynghyd sgwâr cysylltnod.

346
00:16:46,230 --> 00:16:50,325

347
00:16:50,325 --> 00:16:53,710
>> MIKE Rizzo: Cool, OK.

348
00:16:53,710 --> 00:16:56,980
>> TOMAS REIMERS: Ac yna, mae'r CSS diwethaf
llyfrgell yr ydym am i gael drwy rydym yn

349
00:16:56,980 --> 00:16:59,950
ceisio cadw ei lleiaf posibl ar CSS
llyfrgelloedd oherwydd ein bod yn sylweddoli y

350
00:16:59,950 --> 00:17:03,660
teitl y cyflwyniad hwn
yw JavaScript Llyfrgelloedd.

351
00:17:03,660 --> 00:17:07,089
Ond rydym yn credu y gall i ni, yn ogystal
eich cyflwyno i'r llyfrgelloedd eraill

352
00:17:07,089 --> 00:17:09,569
er ein bod yn sôn am lyfrgelloedd.

353
00:17:09,569 --> 00:17:11,400
>> Mae'n Google Web Bedyddfeini.

354
00:17:11,400 --> 00:17:17,040
A beth Google Bedyddfeini We yn caniatáu i chi
ei wneud yw ychwanegu ffontiau at eich gwefan,

355
00:17:17,040 --> 00:17:22,079
sydd yn ffordd hawdd iawn i'w wneud yn
'n bert ac i wahaniaethu eich set

356
00:17:22,079 --> 00:17:24,460
oddi wrth bawb arall yw os oes ganddo
ffont 'n glws neu os oes ganddo' n glws

357
00:17:24,460 --> 00:17:27,790
casgliad o ffontiau.

358
00:17:27,790 --> 00:17:31,410
Google Web Bedyddfeini ydy 'n glws yn wahanol i eraill
llyfrgelloedd yn yr ystyr ei fod yn

359
00:17:31,410 --> 00:17:33,490
gosod tywys mewn gwirionedd.

360
00:17:33,490 --> 00:17:38,680
>> Felly, os byddwch yn dilyn y ddolen, mae'n
google.com / ffontiau, yr wyf yn credu.

361
00:17:38,680 --> 00:17:41,100
Os ydych yn dilyn hynny, yr ydych
Gall dewis eich ffont.

362
00:17:41,100 --> 00:17:44,410
Gallwch ddewis ar y chwith gan
trwch, gogwydd, et cetera.

363
00:17:44,410 --> 00:17:48,970
Ac yna, unwaith y byddwch wedi dewis un,
gallwch glicio defnydd cyflym.

364
00:17:48,970 --> 00:17:49,820
Iawn yno.

365
00:17:49,820 --> 00:17:51,590
Dde waelod y bocs.

366
00:17:51,590 --> 00:17:54,380

367
00:17:54,380 --> 00:17:56,700
>> Ac yna, sgroliwch i lawr.

368
00:17:56,700 --> 00:17:59,600

369
00:17:59,600 --> 00:18:02,650
Yn gyntaf oll, maent yn rhoi y CSS eich bod yn
mae angen i chi gysylltu mewn gwirionedd iddo.

370
00:18:02,650 --> 00:18:03,330
Mae'n iawn yno.

371
00:18:03,330 --> 00:18:05,170
Alli jyst adysgrifia a bastio i mewn bod

372
00:18:05,170 --> 00:18:07,250
A'r peth braf am yr un yma yn
Nid oes mewn gwirionedd hyd yn oed angen i chi

373
00:18:07,250 --> 00:18:08,340
lawrlwytho'r ffeil.

374
00:18:08,340 --> 00:18:11,170
>> Beth sy'n mae'n mynd i wneud yw ei fod yn mynd
i gysylltu â Google fersiwn ohono.

375
00:18:11,170 --> 00:18:14,130
Felly, yn ôl at yr hyn mae hynny'n ei olygu.

376
00:18:14,130 --> 00:18:18,270
Mae hynny'n golygu pan fydd defnyddiwr
lawrlwytho eich ffeil -

377
00:18:18,270 --> 00:18:22,300
llwytho i lawr eich tudalen HTML - eich HTML
dudalen yn mynd i gyfeirio at y ffeil hon.

378
00:18:22,300 --> 00:18:26,790
>> Felly, yna, eich cyfrifiadur yn mynd i weld,
oh, mae'n gynnal ar google.com yn hytrach

379
00:18:26,790 --> 00:18:28,170
nag ar theirsite.com.

380
00:18:28,170 --> 00:18:30,370
Gadewch i mi fynd yn gofyn i Google ar gyfer y ffeil.

381
00:18:30,370 --> 00:18:32,800
Ac yna, mae'n mynd i gynnwys
mae bron fel pe bai'n

382
00:18:32,800 --> 00:18:35,584
rhan o'ch safle eich hun.

383
00:18:35,584 --> 00:18:36,540
>> TOMAS REIMERS: Cool.

384
00:18:36,540 --> 00:18:40,980
Ac ar ôl i chi yn cynnwys hynny, yna i
gynnwys yn eich CSS, mae'n rhoi i chi

385
00:18:40,980 --> 00:18:41,830
llinell gwirioneddol.

386
00:18:41,830 --> 00:18:45,188
Felly, byddwch yn gosod y teulu ffont eiddo
cyfartal i enw eich ffont.

387
00:18:45,188 --> 00:18:47,936

388
00:18:47,936 --> 00:18:50,440
>> MIKE Rizzo: OK.

389
00:18:50,440 --> 00:18:52,220
Felly, rydym yn unig gorffen gyda CSS.

390
00:18:52,220 --> 00:18:57,230
Ac efallai y bydd rhai ohonoch yn meddwl, yn dda,
rydym yn cael rhywfaint CSS ar CS50 Cyllid.

391
00:18:57,230 --> 00:19:00,390
Ond llyfrgell CSS yn bootstrap.

392
00:19:00,390 --> 00:19:05,190
Rydym mewn gwirionedd yn cynnwys Cychwynnydd ychydig
yn nes ymlaen o dan JavaScript oherwydd gyda

393
00:19:05,190 --> 00:19:09,660
llyfrgell Cychwynnydd CSS hefyd yn dod
gyda llawer o JavaScript bod

394
00:19:09,660 --> 00:19:12,060
Bootstrap neu Twitter -
a wnaeth Cychwynnydd -

395
00:19:12,060 --> 00:19:15,426
eu defnyddio i reoli eu holl CSS.

396
00:19:15,426 --> 00:19:19,592
>> TOMAS REIMERS: A oes unrhyw un yn cael unrhyw
cwestiynau hyd yma am CSS yn gyffredinol?

397
00:19:19,592 --> 00:19:20,723
Rydym yn dda?

398
00:19:20,723 --> 00:19:21,216
Awesome.

399
00:19:21,216 --> 00:19:22,495
>> MIKE Rizzo: Awesome.

400
00:19:22,495 --> 00:19:25,136
>> TOMAS REIMERS: Felly symud
ymlaen i JavaScript.

401
00:19:25,136 --> 00:19:27,900
>> MIKE Rizzo: Felly, rydym yn awyddus i siarad
am jQuery i ddechrau.

402
00:19:27,900 --> 00:19:30,780
A yw unrhyw un wedi clywed am jQuery
cyn neu ddefnyddio?

403
00:19:30,780 --> 00:19:32,180
Yeah, cwpl?

404
00:19:32,180 --> 00:19:36,000
Felly, os ydych yn unig yn gweithio gyda brodorol
JavaScript, byddwch yn cael eich hun

405
00:19:36,000 --> 00:19:41,000
deipio llawer o ddetholwyr hir llawer.

406
00:19:41,000 --> 00:19:44,400
Felly beth jQuery yn ei wneud yw ei fod yn darparu
papur lapio 'n glws ar gyfer yr JavaScript

407
00:19:44,400 --> 00:19:48,180
iaith sy'n gadael i chi ddewis hawdd
a thrin gwahanol elfennau

408
00:19:48,180 --> 00:19:52,470
o fewn y model gwrthrych ddogfen y
tudalen ar y we neu'r DOM, yr wyf yn meddwl

409
00:19:52,470 --> 00:19:54,290
chi guys wedi clywed yn
ddarlithio yn y pwynt hwn.

410
00:19:54,290 --> 00:19:57,550
>> TOMAS REIMERS: Os nad ydych wedi clywed am
neu ddarlith os nad ydych wedi gwylio

411
00:19:57,550 --> 00:20:01,870
eto, y Model Gwrthrych Ddogfen yn
yn y bôn sut y mae pethau'n cael eu cynrychioli.

412
00:20:01,870 --> 00:20:05,290
Felly HTML math o edrych fel coeden
pan fyddwch mewn gwirionedd yn tynnu allan.

413
00:20:05,290 --> 00:20:06,850
Mae gennych yr elfen HTML ar ei ben.

414
00:20:06,850 --> 00:20:07,560
Mae gennych y pennaeth a'r corff.

415
00:20:07,560 --> 00:20:09,500
>> Ac yna, o fewn eich bod yn
popeth arall.

416
00:20:09,500 --> 00:20:10,660
Dyna cyfeirir ato fel y DOM -

417
00:20:10,660 --> 00:20:12,120
Model Gwrthrych ddogfen.

418
00:20:12,120 --> 00:20:16,090
Felly, model sy'n cynrychioli gwrthrychau mewn
y ddogfen yn ffordd hawdd i feddwl

419
00:20:16,090 --> 00:20:18,560
am hynny.

420
00:20:18,560 --> 00:20:22,520
Ac un o'r peth gwych am jQuery
a yw'n wir yn gwneud tramwyo

421
00:20:22,520 --> 00:20:26,460
hynny ac elfennau trin o fewn
hynny hynod o syml.

422
00:20:26,460 --> 00:20:30,300
>> Mor syml, mewn gwirionedd, bod y rhan fwyaf o
JavaScript llyfrgelloedd neu os nad yw'r

423
00:20:30,300 --> 00:20:34,200
y mwyafrif, mae'r mwyafrif mawr o rai
byddwch yn gweld mewn gwirionedd yn ei gwneud yn ofynnol jQuery felly

424
00:20:34,200 --> 00:20:37,530
eu bod yn gallu rhedeg eu hunain yn syml
oherwydd os nad oedd gennych jQuery, rydych yn

425
00:20:37,530 --> 00:20:40,540
Byddai wastraffu llawer o amser yn ceisio
chyfrif i maes sut i ddewis rhai

426
00:20:40,540 --> 00:20:43,660
elfennau a sut i wneud pethau eraill.

427
00:20:43,660 --> 00:20:47,950
A'r peth gwych arall am jQuery
yw ei fod yn groes porwr gydnaws.

428
00:20:47,950 --> 00:20:51,550
>> Felly cofiwch yn ôl pan fyddwn yn dweud bod
nid yw pob porwyr gweithredu

429
00:20:51,550 --> 00:20:53,100
pethau yn yr un ffordd?

430
00:20:53,100 --> 00:20:55,120
Mae hyn yn wir hyd yn oed mewn JavaScript.

431
00:20:55,120 --> 00:20:58,220
Ac un o'r pethau gwych am jQuery
yw y bydd yn canfod y

432
00:20:58,220 --> 00:21:00,300
porwr a chanfod y
dull priodol.

433
00:21:00,300 --> 00:21:03,420
>> Felly, os oes angen i chi ddewis elfen,
Gallai Internet Explorer yn dweud eich bod yn

434
00:21:03,420 --> 00:21:05,770
i fod i wneud y ffordd hon.

435
00:21:05,770 --> 00:21:08,300
Gallai firefox dweud y cywir
ffordd yn y ffordd hon.

436
00:21:08,300 --> 00:21:09,710
Nid yw jQuery yn ofal.

437
00:21:09,710 --> 00:21:12,550
Pan fyddwch yn dweud jQuery i ddewis
elfen y bydd yn chyfrif i maes sut mae'n

438
00:21:12,550 --> 00:21:16,290
i fod i wneud hynny o fewn y porwr y
defnyddiwr ar hyn o bryd, ac yna gwneud

439
00:21:16,290 --> 00:21:18,584
yn y ffordd honno.

440
00:21:18,584 --> 00:21:22,650
>> MIKE Rizzo: Felly gadewch i ni siarad am
y defnydd o jQuery ychydig.

441
00:21:22,650 --> 00:21:27,670
Yn union fel PHP, jQuery Mae penodol
hoffter am yr arwydd ddoler.

442
00:21:27,670 --> 00:21:30,880
Felly, fe welwch bod unrhyw jQuery -

443
00:21:30,880 --> 00:21:32,060
yn dda, nid yw pob.

444
00:21:32,060 --> 00:21:35,210
Weithiau gallwch gymryd lle y ddoler
lofnodi gyda'r gair jQuery.

445
00:21:35,210 --> 00:21:38,980
Ond yn gyffredinol, dim ond oherwydd ei fod yn
byrrach, pryd bynnag y byddwch yn gweld jQuery yn

446
00:21:38,980 --> 00:21:41,420
defnyddio bydd yn cael ei gydag arwydd doler.

447
00:21:41,420 --> 00:21:47,030
>> Felly dyma ni jyst yn dangos dechrau
dewisydd am elfen yn y DOM.

448
00:21:47,030 --> 00:21:52,850
Yma, mae gennym yr arwydd doler yn dilyn
gan cromfachau agored ac yna dyfyniadau.

449
00:21:52,850 --> 00:21:56,130
Ac o fewn y dyfyniadau yn mynd ein dewiswyr
ar gyfer y gwahanol elfennau.

450
00:21:56,130 --> 00:21:59,810
Yn union fel yn y CSS, roedd angen detholwyr i
yn gallu arddull gwahanol elfennau

451
00:21:59,810 --> 00:22:00,840
o fewn y dudalen.

452
00:22:00,840 --> 00:22:06,555
Mae'r rhai gwahanol detholwyr cyfieithu
yn union i mewn i jQuery a JavaScript,

453
00:22:06,555 --> 00:22:07,820
ar gyfer y rhan fwyaf.

454
00:22:07,820 --> 00:22:10,120
>> Felly dyma gennym dot foo.

455
00:22:10,120 --> 00:22:14,780
Felly, os ydych yn cofio o ddarlith,
y dot yn unig yn golygu y dosbarth.

456
00:22:14,780 --> 00:22:18,850
Felly, rydym yn dewis elfen
gyda foo dosbarth.

457
00:22:18,850 --> 00:22:22,670
Felly os wyf yn mynd yn ei flaen ac yn agor ein
JavaScript consol yma yn gyflym iawn

458
00:22:22,670 --> 00:22:26,830
dim ond dangos, os Fi jyst teipiwch y
arwydd doler, gwelwn ei fod yn rhai

459
00:22:26,830 --> 00:22:28,090
swyddogaeth sy'n dod i fyny.

460
00:22:28,090 --> 00:22:29,420
Ac mae'n dim ond ei ddiffinio gan jQuery.

461
00:22:29,420 --> 00:22:32,120
>> TOMAS REIMERS: I'r rhai ohonoch
anghyfarwydd, y consol yn offeryn

462
00:22:32,120 --> 00:22:35,430
yn Chrome, sy'n caniatáu i chi,
yn y bôn, yn rhedeg JavaScript ar y

463
00:22:35,430 --> 00:22:36,450
dudalen gyfredol.

464
00:22:36,450 --> 00:22:39,420
Mae hyn fe welwch hynod ddefnyddiol wrth
eich bod yn debugging mewn gwirionedd ac rydych

465
00:22:39,420 --> 00:22:42,400
Mae angen i fod yn debyg, beth yw'r cerrynt
gwerth rhai newidyn byd-eang neu beth

466
00:22:42,400 --> 00:22:43,910
yn rhywbeth arall?

467
00:22:43,910 --> 00:22:47,620
Mae'n fath o fel GDB ac eithrio
eich bod yn gallu mewn gwirionedd yn

468
00:22:47,620 --> 00:22:51,600
trin elfennau ar y dudalen gyda
mewn ffordd llawer haws.

469
00:22:51,600 --> 00:22:55,080
A hefyd nid yw'n, yn y bôn, gwirio
i mewn gyda chi cyn gwneud unrhyw beth.

470
00:22:55,080 --> 00:22:58,660
>> Felly tra, efallai y GDB fod yn debyg, a ydych yn
sicr eich bod am redeg y cam nesaf?

471
00:22:58,660 --> 00:22:59,830
Mae'r consol sydd yn go iawn.

472
00:22:59,830 --> 00:23:03,690
Felly, gan fod y dudalen we yn rendro a
gwneud beth bynnag y mae'n ei wneud, y

473
00:23:03,690 --> 00:23:05,720
cyngor hefyd yn rhedeg ochr yn ochr iddo.

474
00:23:05,720 --> 00:23:08,330
A allwch chi roi cod impute i
y consol, a fydd yn

475
00:23:08,330 --> 00:23:09,260
yn cael ei redeg ar y dudalen.

476
00:23:09,260 --> 00:23:12,190
>> MIKE Rizzo: Felly, i fynd i mewn i'r consol,
Amcana dylwn fyr

477
00:23:12,190 --> 00:23:13,750
sôn am sut i wneud hynny.

478
00:23:13,750 --> 00:23:17,850
Yn y problemau diwethaf a all fod gennych
elfen a ddefnyddir Chrome yn arolygu

479
00:23:17,850 --> 00:23:20,440
swyddogaethau neu edrych ar dudalen ffynhonnell -

480
00:23:20,440 --> 00:23:23,870
a'r rheiny yn hygyrch yn unig trwy hawl
glicio ar y dudalen neu benodol

481
00:23:23,870 --> 00:23:28,430
elfen a gwneud naill ai arolygu
elfen neu edrych ar dudalen ffynhonnell.

482
00:23:28,430 --> 00:23:31,190
Gallwn hefyd gael mynediad i'r JavaScript
chysura yn uniongyrchol gan

483
00:23:31,190 --> 00:23:33,630
dewis archwilio elfen.

484
00:23:33,630 --> 00:23:37,930
Consol Felly, yna 'ch jyst daro
ar yr ochr dde yn hyn.

485
00:23:37,930 --> 00:23:41,900
>> Fel arall, gallech hefyd wedi mynd
i gornel llaw dde uchaf,

486
00:23:41,900 --> 00:23:46,820
sy'n cael ei dorri i ffwrdd ar y sgrîn hon lle
mae wedi y tri bar llorweddol.

487
00:23:46,820 --> 00:23:52,010
A ydych yn mynd i lawr i offer a
Yna JavaScript consol

488
00:23:52,010 --> 00:23:53,240
yma lle y gall weld -

489
00:23:53,240 --> 00:23:54,370
o leiaf ar Windows -

490
00:23:54,370 --> 00:23:59,680
'r shortcut yw Rheoli Shift J. Felly, yna
os ydym am i ddewis elfen

491
00:23:59,680 --> 00:24:06,060
ar y dudalen hon, yn union fel yr wyf yn dangos
o'r blaen, rydym yn ei wneud parens agored arwydd doler

492
00:24:06,060 --> 00:24:08,180
ac yna dyfyniadau.

493
00:24:08,180 --> 00:24:11,750
>> Mae peth diddorol yw, yn gyffredinol,
dyfyniadau sengl a dyfynodau dwbl yn

494
00:24:11,750 --> 00:24:12,370
cyfnewid.

495
00:24:12,370 --> 00:24:16,050
Felly mae llawer o bobl yn jyst arfer sengl
dyfyniadau oherwydd eu bod yn gyflymach i deipio

496
00:24:16,050 --> 00:24:19,780
na dyfynodau dwbl oherwydd nad ydych yn ei wneud
rhaid i ddal i lawr Shift.

497
00:24:19,780 --> 00:24:21,770
Felly, 'n annhymerus' jyst yn gwneud hynny ar hyn o bryd.

498
00:24:21,770 --> 00:24:24,510
>> Felly, yr wyf am i ddewis rhywbeth
gyda dosbarth.

499
00:24:24,510 --> 00:24:27,200
Cynhwysydd, dim ond am fy mod yn gwybod bod yn
rhywbeth sy'n ar ein

500
00:24:27,200 --> 00:24:28,740
dudalen ar y we ar hyn o bryd.

501
00:24:28,740 --> 00:24:29,520
Ac yr wyf yn daro Chofnoda.

502
00:24:29,520 --> 00:24:31,670
A gallwn weld fod yn dethol ei.

503
00:24:31,670 --> 00:24:34,990
Felly, mae'n dangos i fyny ei fod yn
Dychwelodd y gwrthrych.

504
00:24:34,990 --> 00:24:36,620
Felly dyna detholiad sylfaenol.

505
00:24:36,620 --> 00:24:40,080
Os ydym eisiau mewn gwirionedd drin iddo,
byddai'n rhaid i chi alw rhywbeth

506
00:24:40,080 --> 00:24:43,925
ar y dewis, a
byddwn yn mynd i mewn yn ddiweddarach.

507
00:24:43,925 --> 00:24:49,030
>> TOMAS REIMERS: Felly dim ond i edrych ar y
yn fwy manwl, nid yw hyn yn wahanol

508
00:24:49,030 --> 00:24:52,245
na'r galwadau swyddogaeth a wnaethom yn C.
Enw'r swyddogaeth yma yw

509
00:24:52,245 --> 00:24:52,580
ychydig yn rhyfedd.

510
00:24:52,580 --> 00:24:55,640
Mae'n arwydd ddoler.

511
00:24:55,640 --> 00:24:57,010
Dim ond yn enw swyddogaeth.

512
00:24:57,010 --> 00:24:58,810
Does dim byd arbennig am y peth.

513
00:24:58,810 --> 00:25:00,450
>> Mae gennym cromfachau agored.

514
00:25:00,450 --> 00:25:03,880
Yna, rydym wedi ein un ddadl, a oedd yn
yn yr achos hwn yn digwydd i fod yn llinyn,

515
00:25:03,880 --> 00:25:05,680
sydd yn dewisydd ar ei gyfer.

516
00:25:05,680 --> 00:25:08,130
Ac yna, rydym wedi ein
parenthesis cau.

517
00:25:08,130 --> 00:25:09,960
Dyna ni.

518
00:25:09,960 --> 00:25:11,500
>> Dyw hi ddim yn bod yn wahanol iawn.

519
00:25:11,500 --> 00:25:12,900
Er, mae'n edrych yn rhyfedd iawn.

520
00:25:12,900 --> 00:25:17,220
A gall hynny fod, rhyw fath o, a sticio
pwyntio i lawer o bobl.

521
00:25:17,220 --> 00:25:21,460
>> MIKE Rizzo: Felly yr un modd, os ydym am
i ddewis elfen sydd â adnabod,

522
00:25:21,460 --> 00:25:23,470
nawr rydym am i ddewis gan
ID yn hytrach na dosbarth.

523
00:25:23,470 --> 00:25:28,080
Byddai'n beth tebyg lle rydym yn
dim ond gwneud yr arwydd miniog i adnabod.

524
00:25:28,080 --> 00:25:33,576
Felly, rydym yn dewis yma i gyd
elfennau sy'n cael bar adnabod.

525
00:25:33,576 --> 00:25:35,400
>> TOMAS REIMERS: Ac mae hyn yn ymestyn.

526
00:25:35,400 --> 00:25:36,450
Mae hynny'n CSS ymestyn.

527
00:25:36,450 --> 00:25:42,260
Yn union fel yn y CSS, gallwch ddewis yr holl
cysylltiadau, sydd â'r foo dosbarth.

528
00:25:42,260 --> 00:25:43,420
Yma, mae'n yr un peth.

529
00:25:43,420 --> 00:25:52,750
>> Gallech wneud a.foo, a fyddai'n dewis
pob un o'r cysylltiadau â'r foo dosbarth.

530
00:25:52,750 --> 00:25:58,860
Gallech wneud bar miniog, a fyddai'n
dewiswch y cysylltiad gyda'r bar ID ac yn y blaen

531
00:25:58,860 --> 00:25:59,770
ac yn y blaen.

532
00:25:59,770 --> 00:26:02,120
Unrhyw detholydd CSS yn ddilys
dewisydd jQuery.

533
00:26:02,120 --> 00:26:03,370
>> MIKE Rizzo: Yeah.

534
00:26:03,370 --> 00:26:07,996

535
00:26:07,996 --> 00:26:11,460
Iawn, felly nawr gadewch i ni fynd i mewn i ychydig
o drin y gallwn ei wneud gyda

536
00:26:11,460 --> 00:26:12,870
ein jQuery.

537
00:26:12,870 --> 00:26:19,280
Felly jQuery Mae gan fath arbennig
o nodiant lle rydym yn unig yn defnyddio

538
00:26:19,280 --> 00:26:20,170
dot ar y diwedd.

539
00:26:20,170 --> 00:26:23,340
A allwch chi feddwl am hyn fel yn
Sut oedd gennym gwahanol structs C.

540
00:26:23,340 --> 00:26:27,110
Ac i fynd i mewn i structs hynny, a fyddech yn
defnyddio dot i fynd i mewn iddynt.

541
00:26:27,110 --> 00:26:28,480
>> Mae hyn, math o, rhywbeth tebyg.

542
00:26:28,480 --> 00:26:33,570
Dim ond yn awr mae gennym swyddogaethau o fewn y
dewisydd y gallwn alw arno.

543
00:26:33,570 --> 00:26:38,640
Felly dyma, yr enghraifft gyntaf un
gallwch weld yn dewisydd CSS.

544
00:26:38,640 --> 00:26:45,290
Ac yn y bôn, yr hyn a wna hynny yw ei
berthnasol elfen CSS cyntaf i hyn

545
00:26:45,290 --> 00:26:46,230
beth yr ydych yn dewis -

546
00:26:46,230 --> 00:26:47,720
elfen hon a ddewiswyd gennych -

547
00:26:47,720 --> 00:26:49,290
â'r gwerth y mae.

548
00:26:49,290 --> 00:26:55,390
>> TOMAS REIMERS: Felly cyfieithiad hawdd o
byddai hynny'n pe jQuery, yn y bôn,

549
00:26:55,390 --> 00:26:57,790
dim ond yn cymryd foo.

550
00:26:57,790 --> 00:27:05,480
Ac yna yn CSS dywedodd,
lliw coch ac yn agos.

551
00:27:05,480 --> 00:27:06,670
Mae yr un syniad.

552
00:27:06,670 --> 00:27:08,800
Yr hyn y mae'n ei wneud yw ei fod yn dewis
holl elfennau foo.

553
00:27:08,800 --> 00:27:10,170
Ac yna mae'n cymhwyso.

554
00:27:10,170 --> 00:27:15,884
Math o, lliw eiddo
yn hafal i goch.

555
00:27:15,884 --> 00:27:21,070
>> MIKE Rizzo: Yn yr un modd, ni allwn hefyd yn newid
cynnwys gwirioneddol o'r hyn sy'n

556
00:27:21,070 --> 00:27:24,870
dangos ar y HTML y dudalen, sy'n
yn 'n sylweddol oera oherwydd mae'n golygu eich

557
00:27:24,870 --> 00:27:28,095
Gall tudalennau gwe yn awr yn gwbl ddeinamig
ac nid oes rhaid i fod yn sefydlog

558
00:27:28,095 --> 00:27:31,660
eich bod yn argraffu gan ddefnyddio PHP
ar y cychwyn cyntaf

559
00:27:31,660 --> 00:27:33,320
y dudalen ei lwytho.

560
00:27:33,320 --> 00:27:36,810
Felly yma, os oeddem am newid y
HTML gwirioneddol y dudalen, byddem yn awr yn

561
00:27:36,810 --> 00:27:43,550
ffoniwch y swyddogaeth HTML, sydd wedyn yn unig
mewnosod beth bynnag rydym yn nodi i

562
00:27:43,550 --> 00:27:45,390
yr elfen honno yr ydym yn dethol.

563
00:27:45,390 --> 00:27:49,810
Felly dyma ni yn dewis elfen gyda
foo dosbarth ac yna dweud ei fod yn HTML

564
00:27:49,810 --> 00:27:52,200
mae bellach helo byd.

565
00:27:52,200 --> 00:27:55,600
>> TOMAS REIMERS: A pan fyddwch yn meddwl am
beth yn cael eu ceisiadau defnyddiol o

566
00:27:55,600 --> 00:28:00,800
hyn, mae hyn yn un CSS, y peth cyntaf a
gallwch ddechrau i feddwl amdano yw

567
00:28:00,800 --> 00:28:03,070
o ran hyd yn oed yn galw heibio i lawr bwydlenni.

568
00:28:03,070 --> 00:28:08,350
Gallech ddechrau gwneud pethau fel, pan
defnyddiwr yn hofran dros y rhan uchaf

569
00:28:08,350 --> 00:28:11,970
o lawr galw heibio, yr ydych am wneud
y rhan gwaelod yn weladwy.

570
00:28:11,970 --> 00:28:12,540
Iawn?

571
00:28:12,540 --> 00:28:15,610
>> Felly, yn CSS, rydym wedi eiddo
i wneud rhywbeth gweladwy.

572
00:28:15,610 --> 00:28:19,330
Pethau fel dim colon arddangos
yn ei gwneud yn anweledig.

573
00:28:19,330 --> 00:28:21,190
Byddai bloc Arddangos wneud yn weladwy.

574
00:28:21,190 --> 00:28:25,860
Neu hyd yn oed os ydych chi eisiau mynd symlach, rydych
gael pethau fel gydradd gwelededd

575
00:28:25,860 --> 00:28:27,520
weladwy, a gwelededd hafal cudd.

576
00:28:27,520 --> 00:28:30,330

577
00:28:30,330 --> 00:28:34,780
>> A gallech dechrau gweithredu pethau
fel gollwng i lawr i'r dde bwydlenni

578
00:28:34,780 --> 00:28:38,410
ar ôl i chi gael drwy'r syniad o sut y
gallwch chyfrif i maes pan fydd hyn yn agor,

579
00:28:38,410 --> 00:28:39,850
y byddwn yn mynd drwy fyr iawn.

580
00:28:39,850 --> 00:28:42,160
Ond gallwn ddechrau gweld
ceisiadau o hyn.

581
00:28:42,160 --> 00:28:45,540
Mewn ffordd debyg, os ydych yn roi cynnig ar
a gweithredu, gadewch i ni ddweud, sgwrs

582
00:28:45,540 --> 00:28:48,620
injan a ydych am wneud ychydig
swigen siarad yn dod i fyny pryd bynnag eich bod wedi

583
00:28:48,620 --> 00:28:52,880
cael neges newydd, unwaith y byddwch yn cael y
neges newydd, gallwch wneud ychydig

584
00:28:52,880 --> 00:28:55,890
swigen siarad yn dod i fyny drwy newid
HTML y dudalen, dde?

585
00:28:55,890 --> 00:29:00,540
Drwy ychwanegu y swigen siarad ychwanegol
gyda'r testun ychwanegol i mewn 'na.

586
00:29:00,540 --> 00:29:01,140
Yeah?

587
00:29:01,140 --> 00:29:07,750
>> GYNULLEIDFA: Felly byddech ymgorffori hyn o fewn
y cod HTML yn y math o fel

588
00:29:07,750 --> 00:29:10,534
[Anghlywadwy]?

589
00:29:10,534 --> 00:29:12,940
>> MIKE Rizzo: Iawn.

590
00:29:12,940 --> 00:29:16,190
Yeah, byddwn yn cyrraedd y
mewn ychydig.

591
00:29:16,190 --> 00:29:18,810
Yeah, mae'n debyg
ychydig i PHP.

592
00:29:18,810 --> 00:29:21,240
Ddim yn union debyg.

593
00:29:21,240 --> 00:29:24,730
>> Mae gwahaniaeth da i wneud yw beth mae hyn yn
mewn gwirionedd yn golygu pan fyddwn yn golygu

594
00:29:24,730 --> 00:29:28,480
y dudalen oherwydd nid yw'n mynd i fod yn
golygu'r ffeil gwirioneddol a yn cael ei

595
00:29:28,480 --> 00:29:31,380
cadw ar y gweinydd oherwydd bod y byd
Ni ddylai wedi cael caniatâd

596
00:29:31,380 --> 00:29:32,610
i olygu eich ffeiliau.

597
00:29:32,610 --> 00:29:36,080
Mae hyn yn unig olygu beth sydd ar y dudalen
a'r hyn sy'n cael ei arddangos o fewn

598
00:29:36,080 --> 00:29:36,950
y porwr.

599
00:29:36,950 --> 00:29:40,340
Felly, os ydych yn ail-lwytho y dudalen wedi,
dweud, dileu rhywbeth wrth i ni

600
00:29:40,340 --> 00:29:44,730
gweld y gallwn ei wneud gyda'r dileu galwadau,
Byddai y peth wedyn yn ailymddangos.

601
00:29:44,730 --> 00:29:48,590
>> TOMAS REIMERS: Felly, un ffordd i feddwl am
hyn yw os wyf yn eich cyfrifiadur a

602
00:29:48,590 --> 00:29:50,170
Mae Mike yn, rhyw fath o, y gweinydd.

603
00:29:50,170 --> 00:29:53,850
Beth sy'n mynd i ddigwydd yw fy mod i'n mynd i
gofyn i Mike, hey, gallaf gael copi o

604
00:29:53,850 --> 00:29:54,630
y dudalen gwefan hon?

605
00:29:54,630 --> 00:29:56,190
A bydd yn rhoi copi ohono i mi.

606
00:29:56,190 --> 00:29:57,430
>> Na, nid dyna'r peth gwreiddiol.

607
00:29:57,430 --> 00:29:58,620
Dim ond copi.

608
00:29:58,620 --> 00:30:00,450
Ac yna y byddai'n hoffi, oh,
mae JavaScript yma.

609
00:30:00,450 --> 00:30:02,450
Yn amlwg, dylwn olygu'r
dudalen i fod fel hyn.

610
00:30:02,450 --> 00:30:04,250
A dwi'n golygu eich copi.

611
00:30:04,250 --> 00:30:05,920
>> Ond nid yw hynny'n effeithio
y copi gwirioneddol.

612
00:30:05,920 --> 00:30:08,480
Ac os wyf yn gofyn iddo eto
adnewyddu'r dudalen, -

613
00:30:08,480 --> 00:30:10,060
hey, a allaf gael copi glân arall -

614
00:30:10,060 --> 00:30:11,440
mae'n mynd i roi i mi
copi glân arall.

615
00:30:11,440 --> 00:30:14,240
Ac yna, dw i'n mynd i wneud yr un peth
fel, oh, mae hyn JS yma sy'n dweud

616
00:30:14,240 --> 00:30:14,866
i olygu'r hyn.

617
00:30:14,866 --> 00:30:17,460
Ac yr wyf i'n mynd i barhau i wneud hynny.

618
00:30:17,460 --> 00:30:20,930
>> MIKE Rizzo: Felly beth 'n sylweddol oera
y gallwch ei wneud gyda jQuery yn

619
00:30:20,930 --> 00:30:24,350
mewn gwirionedd yn ychwanegu gwahanol fathau o
o animeiddiadau i dudalen eich.

620
00:30:24,350 --> 00:30:27,440
Nid wyf yn gwybod os ydych chi wedi gweld erioed lle
ydych yn ceisio i lenwi ffurflen

621
00:30:27,440 --> 00:30:31,250
ar-lein ac nad ydych yn llenwi
y pethau cywir.

622
00:30:31,250 --> 00:30:33,440
Cyn lleied beth sleidiau i lawr
ar y brig ac yn dweud i chi

623
00:30:33,440 --> 00:30:34,820
nad ydynt wedi gwneud hyn yn gywir.

624
00:30:34,820 --> 00:30:36,260
Os gwelwch yn dda ceisiwch eto.

625
00:30:36,260 --> 00:30:37,890
Ac yna, efallai hyd yn oed llithro i fyny.

626
00:30:37,890 --> 00:30:40,710
>> Troi allan jQuery wedi adeiladu mewn swyddogaethau
sy'n gwneud hynny i gyd

627
00:30:40,710 --> 00:30:44,180
animeiddio mewn gwirionedd, yn hawdd iawn.

628
00:30:44,180 --> 00:30:46,750
Felly mae gyntaf pylu
swyddogaeth y tu allan, a oedd yn

629
00:30:46,750 --> 00:30:47,710
gallwch ffonio ar rywbeth.

630
00:30:47,710 --> 00:30:55,650
Ac mae'n ffordd i newid y CSS o
yr elfen honno mewn ffordd hanimeiddio.

631
00:30:55,650 --> 00:30:58,480
Felly, mae'n cymryd pa bynnag elfen
ydych yn ei alw pylu allan ar.

632
00:30:58,480 --> 00:31:03,990
Ac yna, yn araf yn newid ei didreiddedd
hyd nes ei fod yn mynd yn gwbl dryloyw.

633
00:31:03,990 --> 00:31:07,330
>> TOMAS REIMERS: Yr un poblogaidd eraill
yn llithro i lawr, a fydd yn gwneud

634
00:31:07,330 --> 00:31:08,800
rhywbeth yn ymddangos trwy llithro i lawr.

635
00:31:08,800 --> 00:31:12,840
Felly, yn achos y ddewislen i lawr,
eto, pan fyddwn yn dysgu sut i ganfod

636
00:31:12,840 --> 00:31:15,310
pan fydd hyn wedi cael ei hofran dros,
fe allech chi jyst dweud waelod hwn

637
00:31:15,310 --> 00:31:16,910
rhan llithro i lawr nawr.

638
00:31:16,910 --> 00:31:19,270
Ac yna, mae'n ymddangos
trwy lithro i lawr.

639
00:31:19,270 --> 00:31:22,042

640
00:31:22,042 --> 00:31:26,590
>> MIKE Rizzo: Ac yna, os ydych yn unig yn cael
rhyw fath o animeiddio mewn cof bod

641
00:31:26,590 --> 00:31:29,080
Nid yw o reidrwydd yn jQuery darparu.

642
00:31:29,080 --> 00:31:32,690
Er enghraifft, gadewch i ni ddweud jQuery
yn eich darparu gyda llithren

643
00:31:32,690 --> 00:31:33,750
i lawr a llithren i fyny.

644
00:31:33,750 --> 00:31:36,740
Wel, gadewch i ni ddweud eich bod am i lithro
rhywbeth i mewn o'r chwith neu i mewn o

645
00:31:36,740 --> 00:31:39,880
y math cywir o fel y CS50
prif dudalen hon yn pryd bynnag

646
00:31:39,880 --> 00:31:42,080
byddwch yn mynd i banel newydd.

647
00:31:42,080 --> 00:31:45,030
Byddai yna mae'n debyg yn rhaid i chi
gweithredu eich hun gan ddefnyddio'r

648
00:31:45,030 --> 00:31:49,310
animeiddio swyddogaeth yn jQuery.

649
00:31:49,310 --> 00:31:51,350
>> Felly yr un modd, 'ch jyst animeiddio.

650
00:31:51,350 --> 00:31:55,850
Ac yna, o fewn ei mae'n cymryd
geiriadur o'r gwahanol werthoedd

651
00:31:55,850 --> 00:31:57,340
eich bod yn fod i basio.

652
00:31:57,340 --> 00:32:06,960
Felly yma, os oeddem am i animeiddio y
elfen foo fel bod ei lled naill ai

653
00:32:06,960 --> 00:32:10,880
yn ehangu neu gontractau i 80 picsel,
dibynnu ar yr hyn y mae ar hyn ydyw.

654
00:32:10,880 --> 00:32:14,100
Byddem yn union pasio hynny fel
y ddadl ynddo.

655
00:32:14,100 --> 00:32:18,060
>> Animeiddio hefyd rai dadleuon eraill
y gallech ei throsglwyddo, er enghraifft,

656
00:32:18,060 --> 00:32:21,150
cyflymder y animeiddio
eich bod am ei roi.

657
00:32:21,150 --> 00:32:26,220
Ac i wneud hynny, byddwn yn jyst dweud
gyflym Google jQuery animeiddio.

658
00:32:26,220 --> 00:32:31,710
Ac yna, gan ddod i fyny y dudalen hon, gallwch
gweld 'i' got criw o wahanol

659
00:32:31,710 --> 00:32:33,560
eiddo y gallwch ei phasio.

660
00:32:33,560 --> 00:32:35,990
>> Ac yr wyf yn eich annog - pryd bynnag y byddwch yn dod
ar draws rhywbeth nad ydych yn ei wneud

661
00:32:35,990 --> 00:32:40,390
yn gwybod neu dim ond eisiau dysgu mwy am
dull penodol y gallwch ei ffonio

662
00:32:40,390 --> 00:32:41,270
ar rywbeth -

663
00:32:41,270 --> 00:32:44,440
dim ond Google iddo. jQuery yn hynod o
dogfennu'n dda.

664
00:32:44,440 --> 00:32:49,140
Ac yn aml yn amseroedd mae llawer o
enghreifftiau a ddarperir ganddynt ar eich cyfer.

665
00:32:49,140 --> 00:32:52,470
Os byddwn yn sgroliwch i lawr -

666
00:32:52,470 --> 00:32:53,720
ffordd i lawr -

667
00:32:53,720 --> 00:32:57,660

668
00:32:57,660 --> 00:32:59,190
y gallwn ei defnyddio, yn ogystal.

669
00:32:59,190 --> 00:33:02,480
>> Unwaith eto, pan fydd datblygwr mewn gwirionedd yn mynd
trwy y drafferth o ysgrifennu a

670
00:33:02,480 --> 00:33:05,810
llyfrgell, maent fel arfer yn dymuno
rhywun i ddefnyddio.

671
00:33:05,810 --> 00:33:09,400
Felly, ochr yn ochr yn mynd i
fod yn ddogfennaeth.

672
00:33:09,400 --> 00:33:12,270
A gall y dogfennau fel arfer yn
gael ar dudalen y prosiect, sydd yn

673
00:33:12,270 --> 00:33:14,970
pam yr ydym yn rhoi y safle gwreiddiol yn chi
y dechrau, sy'n cysylltu â chi at y

674
00:33:14,970 --> 00:33:18,080
tudalennau prosiect fel y gallwch
gweld bod ddogfennaeth.

675
00:33:18,080 --> 00:33:22,670
>> Yn nodweddiadol, mae'r dudalen y prosiect yn yr achos
o [Anghlywadwy], mae'n dweud wrthych y

676
00:33:22,670 --> 00:33:23,940
enwau'r dosbarthiadau.

677
00:33:23,940 --> 00:33:27,250
Yn achos JavaScript, mae'n rhoi
chi enw'r swyddogaethau.

678
00:33:27,250 --> 00:33:35,310
Gyda llaw, os ydym yn sgrolio i fyny at y brig,
nodyn ochr cyflym ar swyddogaethau yn

679
00:33:35,310 --> 00:33:39,080
pryd bynnag y byddwch yn gweld swyddogaeth rhoi ar waith
fel hyn gyda'r caled

680
00:33:39,080 --> 00:33:43,800
cromfachau yn y canol, mae hynny'n ei olygu
bod yr eiddo yn ddewisol.

681
00:33:43,800 --> 00:33:44,750
Dim ond pennau i fyny.

682
00:33:44,750 --> 00:33:47,350
Rwyf wedi gweld llawer o gwestiynau
am hynny.

683
00:33:47,350 --> 00:33:50,370
>> Felly dyma gallwn weld bod y
animeiddio yn cymryd eiddo

684
00:33:50,370 --> 00:33:51,800
fel dadl angenrheidiol.

685
00:33:51,800 --> 00:33:54,870
A phopeth arall yn ddewisol.

686
00:33:54,870 --> 00:33:56,136
Nodyn ochr -

687
00:33:56,136 --> 00:33:58,090
y gallwch chi feddwl am hyn, didoli
o, fel tudalennau dyn.

688
00:33:58,090 --> 00:34:04,275
Tudalennau Dyn yn dogfennau ar gyfer C a
am lawer o bethau eraill, yn ogystal.

689
00:34:04,275 --> 00:34:11,020
>> MIKE Rizzo: Felly, rydym wedi dysgu sut i
newid CSS gwahanol ar y dudalen,

690
00:34:11,020 --> 00:34:14,040
animeiddio iddo, a chael gwared ar ychwanegu HTML.

691
00:34:14,040 --> 00:34:16,889
Ond un o'r mwyaf pwerus mewn gwirionedd
pethau am JavaScript

692
00:34:16,889 --> 00:34:18,270
ac yn enwedig jQuery -

693
00:34:18,270 --> 00:34:22,570
yr hyn y mae'n gadael i chi ei wneud yw ymateb i
gwahanol elfennau sy'n digwydd.

694
00:34:22,570 --> 00:34:25,380
Er enghraifft, dyma yr ydym wedi
yn trin y digwyddiad.

695
00:34:25,380 --> 00:34:28,210
Ac mae hynny'n ei olygu yw pan fo hyn
digwyddiad yn digwydd, rydym yn trin mewn

696
00:34:28,210 --> 00:34:29,280
ffordd arbennig.

697
00:34:29,280 --> 00:34:35,159
>> Felly dyma, y ​​digwyddiad jQuery generig
trin yw'r dot ar.

698
00:34:35,159 --> 00:34:42,949
Ac yna, y peth cyntaf yr amod eich
yr hyn y digwyddiad y dylai

699
00:34:42,949 --> 00:34:43,810
yn gwrando ar eu cyfer.

700
00:34:43,810 --> 00:34:45,610
Felly dyma, mae'n y cliciwch y
rydym yn aros am.

701
00:34:45,610 --> 00:34:49,250
>> TOMAS REIMERS: Fel arall, mae gennych
ar hofran, sydd yn un boblogaidd iawn.

702
00:34:49,250 --> 00:34:52,000
Felly, yn ôl i fy galw heibio i lawr syniad ddewislen.

703
00:34:52,000 --> 00:34:54,239
Byddai gennych un uchaf ar hofran.

704
00:34:54,239 --> 00:34:56,096
Ac yna gallech newid hynny.

705
00:34:56,096 --> 00:34:56,830
>> MIKE Rizzo: Iawn.

706
00:34:56,830 --> 00:35:01,680
Ac yna, pan fydd hynny'n digwydd, 'i jyst
executes swyddogaeth hon yr ydym yn rhoi

707
00:35:01,680 --> 00:35:05,080
fel dadl a bod
mae'n rhybuddio helo neu hi.

708
00:35:05,080 --> 00:35:08,900
>> TOMAS REIMERS: Felly, yn achos
JavaScript, mae hwn yn lle mae angen i ni

709
00:35:08,900 --> 00:35:12,970
tynnu ein hunain rhag C. Gallwn gwirionedd
cymryd swyddogaethau fel dadleuon.

710
00:35:12,970 --> 00:35:15,940
Ac mae llawer o wir yn
ffyrdd cymhleth i wneud hyn.

711
00:35:15,940 --> 00:35:17,940
Rydym yn mynd i hyrwyddo un ffordd,
sydd yn y gallwch chi ddiffinio'r

712
00:35:17,940 --> 00:35:19,270
gweithio'n iawn yno.

713
00:35:19,270 --> 00:35:22,540
>> Felly, pan fyddwch yn gofyn am swyddogaeth fel
paramedr, rydych yn y bôn yn unig

714
00:35:22,540 --> 00:35:24,500
mynd i ddiffinio swyddogaeth
ar y fan a'r lle.

715
00:35:24,500 --> 00:35:27,090
A'r ffordd yr ydych yn diffinio swyddogaeth
yn JavaScript yw eich

716
00:35:27,090 --> 00:35:28,820
llythrennol dweud swyddogaeth.

717
00:35:28,820 --> 00:35:30,130
Yna, fel arfer, yr enw
y swyddogaeth.

718
00:35:30,130 --> 00:35:32,510
Ond nid ydym erioed yn mynd i gyfeirio
swyddogaeth hon eto.

719
00:35:32,510 --> 00:35:34,040
Felly rydym yn ei adael ddienw.

720
00:35:34,040 --> 00:35:40,440
>> Yna y cromfachau, yna bydd y cyrliog
bresys, ac yna y cod o fewn hynny.

721
00:35:40,440 --> 00:35:42,540
Felly, rydym yn deall gall hyn
fod ychydig yn ddryslyd.

722
00:35:42,540 --> 00:35:45,180
Felly, rydym yn rhoi'r ffurflen gyffredinol i chi
yr hyn y mae trin y digwyddiad yn edrych fel

723
00:35:45,180 --> 00:35:47,790
isod, sydd ar ddigwyddiadau.

724
00:35:47,790 --> 00:35:50,598
Ac yna, eich cod y tu mewn i'r.

725
00:35:50,598 --> 00:35:52,478
>> MIKE Rizzo: A oes unrhyw
gwestiynau am hyn?

726
00:35:52,478 --> 00:35:54,818
Gall hyn fod yn ychydig yn ddryslyd
y tro cyntaf y byddwch yn ei weld.

727
00:35:54,818 --> 00:35:57,550
>> TOMAS REIMERS: Yr ydych mewn gwirionedd yn awyddus i
agor ffeil ac yn dangos iddynt rhai

728
00:35:57,550 --> 00:35:58,155
jQuery ar hyn o bryd?

729
00:35:58,155 --> 00:35:59,853
>> MIKE Rizzo: Yeah, gadewch i ni wneud hynny.

730
00:35:59,853 --> 00:36:00,256
OK.

731
00:36:00,256 --> 00:36:02,490
>> TOMAS REIMERS: Felly nawr rydym yn
yn y peiriant.

732
00:36:02,490 --> 00:36:07,730
A'r hyn yr ydym wedi ei wneud yw ein bod wedi cymryd y
rhyddid o greu y ddau yn index.html

733
00:36:07,730 --> 00:36:10,100
ffeil, sy'n cysylltu
ffeil JavaScript.

734
00:36:10,100 --> 00:36:12,880
A gallwn agor y -

735
00:36:12,880 --> 00:36:15,170
yeah.

736
00:36:15,170 --> 00:36:16,630
Wel, mae'n gwneud dau beth.

737
00:36:16,630 --> 00:36:18,350
>> Y cyntaf yw cysylltu â
y ffeil JavaScript.

738
00:36:18,350 --> 00:36:21,250
A byddwn yn gweld bod hyd yma.

739
00:36:21,250 --> 00:36:25,340
Rydym yn gweld bod yn y pen y
Dogfen HTML, yn enwedig.

740
00:36:25,340 --> 00:36:28,260
Felly, byddwch yn gweld yno y
yr ydym ni, yn y bôn, yn dweud SRC,

741
00:36:28,260 --> 00:36:29,590
sy'n sefyll am ffynhonnell.

742
00:36:29,590 --> 00:36:30,630
A dyna yr URL.

743
00:36:30,630 --> 00:36:32,700
>> Felly, yma gallwch ddweud rydym wedi
cynnwys jQuery.

744
00:36:32,700 --> 00:36:34,290
Ac rydym hefyd wedi cynnwys sgriptiau.

745
00:36:34,290 --> 00:36:40,630
Y ffordd arall i gynnwys JavaScript yn
y gallwch gynnwys sgript inline

746
00:36:40,630 --> 00:36:44,600
tag fel sydd gennym ar y gwaelod lle mae'n
yn dweud y math sgript yn destun JavaScript.

747
00:36:44,600 --> 00:36:46,960
>> Felly rydym yn ei ddweud, gwrando, rydym yn
fin gynnwys sgript.

748
00:36:46,960 --> 00:36:51,890
A'r math y sgript yn
JavaScript, sy'n fath o destun.

749
00:36:51,890 --> 00:36:52,550
Syml iawn.

750
00:36:52,550 --> 00:36:56,490
>> MIKE Rizzo: Felly, mae hyn, math o, yn cael i
eich cwestiwn am sut rydym yn cynnwys

751
00:36:56,490 --> 00:37:02,340
JavaScript yn ein ffeiliau oherwydd pan fyddwn yn
Roedd PHP, rydym yn ei wneud rhywbeth fel hyn.

752
00:37:02,340 --> 00:37:07,570
Ac yna, wedi ein swyddogaethau PHP -
gadewch i ni ddweud stociau yn ei wneud

753
00:37:07,570 --> 00:37:09,150
rhywbeth gyda hynny -

754
00:37:09,150 --> 00:37:10,490
mynd i mewn yno.

755
00:37:10,490 --> 00:37:13,860
Fodd bynnag, erbyn hyn mae gennym y tagiau sgript
ein bod yn rhoi iddo, sydd mewn gwirionedd yn

756
00:37:13,860 --> 00:37:19,470
rhan o'r HTML ei hun gan nad yw'n
ffugio bod yn ffeil HTML yn ei hoffi

757
00:37:19,470 --> 00:37:25,070
yn PHP oherwydd os ydych mewn gwirionedd yn mynd yn
ac edrych ar y ffynhonnell y dudalen,

758
00:37:25,070 --> 00:37:28,430
byddwch yn gweld tagiau sgript hyn i mewn 'na
gyda'r JavaScript gysylltiedig â

759
00:37:28,430 --> 00:37:29,800
iddynt yn hynny.

760
00:37:29,800 --> 00:37:31,760
>> Felly, yna, os oeddem am
ysgrifennu rhai JavaScript -

761
00:37:31,760 --> 00:37:37,110
gadewch i ni dim ond dweud ein bod eisiau corff yn newid
oherwydd ar hyn o bryd nid oes gennyf

762
00:37:37,110 --> 00:37:40,020
unrhyw dagiau arall y gallaf wir yn
golygu wahân gorff.

763
00:37:40,020 --> 00:37:42,450
Gadewch i 'jyst dweud fy mod i eisiau
newid y CSS o hynny.

764
00:37:42,450 --> 00:37:46,190
Felly, byddwn yn mynd yn ei flaen a newid
lliw i goch.

765
00:37:46,190 --> 00:37:47,380
>> Felly, yr wyf yn arbed y ffeil.

766
00:37:47,380 --> 00:37:52,700
Gadewch i ni fynd yn ôl at ein tudalen ar y we, adnewyddu,
ac mae'n ei wneud yn awtomatig

767
00:37:52,700 --> 00:37:55,920
oherwydd nad oedd yn ymddangos fel ei fod yn aros
o gwbl oherwydd nad oeddem yn gwrando

768
00:37:55,920 --> 00:37:59,450
ar gyfer digwyddiad neu unrhyw beth fel 'na.

769
00:37:59,450 --> 00:38:02,800
>> TOMAS REIMERS: Felly, os ydym yn mynd yn ôl at y
ffeilio yn arbennig - y HTML

770
00:38:02,800 --> 00:38:04,710
ffeilio - beth rydych chi'n mynd
ei weld yw gennym -

771
00:38:04,710 --> 00:38:06,810
cofiwch fod hyn yn cael ei lwytho,
math o, yn gronolegol.

772
00:38:06,810 --> 00:38:09,910
Felly, rydym wedi gyntaf y pen.
mae'n llwythi y ddau ffeiliau.

773
00:38:09,910 --> 00:38:10,800
Yna, rydym yn mynd i'r corff.

774
00:38:10,800 --> 00:38:11,640
Ac rydym yn gweld y byd helo.

775
00:38:11,640 --> 00:38:13,030
Felly, rydym yn gwneud byd helo.

776
00:38:13,030 --> 00:38:15,240
>> Ac yna y peth olaf yr ydym wedi
yn gennym y tag script.

777
00:38:15,240 --> 00:38:20,880
Felly mae'n rhedeg y tag sgript oherwydd ei fod yn
Nid yw dweud iddo aros ar gyfer unrhyw beth.

778
00:38:20,880 --> 00:38:24,700
A dyna mwyaf sylfaenol
ffordd i redeg JavaScript.

779
00:38:24,700 --> 00:38:29,200
>> Gyda dweud hynny, gallwch roi y sgript
tagio i fyny yn y pennawd yn unig

780
00:38:29,200 --> 00:38:31,240
i ddangos y pwynt hwn?

781
00:38:31,240 --> 00:38:34,450

782
00:38:34,450 --> 00:38:35,700
Ac yn rhedeg hynny.

783
00:38:35,700 --> 00:38:38,880

784
00:38:38,880 --> 00:38:41,070
Rydym yn mynd i yr hysbysiad ei fod
nid oedd yn newid y lliw.

785
00:38:41,070 --> 00:38:44,210
Ac mae hyn yn un o'r problemau o
JavaScript yw bod pethau'n llwytho

786
00:38:44,210 --> 00:38:45,930
mewn trefn gronolegol.

787
00:38:45,930 --> 00:38:49,750
>> Felly, ar yr adeg y cod hwnnw
yn rhedeg, rydym yn dewis -

788
00:38:49,750 --> 00:38:52,530
mynd yn ôl -

789
00:38:52,530 --> 00:38:53,670
y tag corff.

790
00:38:53,670 --> 00:38:57,560
Nid yw'r tag corff yn bodoli eto oherwydd
JavaScript yn unol â HTML.

791
00:38:57,560 --> 00:39:01,790
Felly mae'r porwr yn debyg dewiswch corff.

792
00:39:01,790 --> 00:39:02,760
Nid oes y fath beth eto.

793
00:39:02,760 --> 00:39:03,600
Felly, gallwn anwybyddu hynny.

794
00:39:03,600 --> 00:39:05,330
Ac rydym yn cadw i fynd.

795
00:39:05,330 --> 00:39:07,200
>> Ac yna rydym yn diffinio tag corff.

796
00:39:07,200 --> 00:39:09,670
Ond nad yw byth yn cael ei diweddaru.

797
00:39:09,670 --> 00:39:12,560
Felly, pan fyddwch yn gweithredu sgript
tagiau, gwnewch yn siŵr eich bod yn rhoi

798
00:39:12,560 --> 00:39:15,502
ar ôl i'r tag corff.

799
00:39:15,502 --> 00:39:16,820
Sleid nesaf.

800
00:39:16,820 --> 00:39:17,830
>> MIKE Rizzo: OK.

801
00:39:17,830 --> 00:39:19,330
Felly, rydym wedi newid rhywbeth.

802
00:39:19,330 --> 00:39:21,910
Ond nid oedd yn edrych fel ei fod yn ymateb i
ni o gwbl oherwydd ei fod yn unig fath o

803
00:39:21,910 --> 00:39:24,150
yn gwneud hynny cyn gynted ag y llwytho y dudalen.

804
00:39:24,150 --> 00:39:27,700
Felly nawr, yn hytrach na gwneud hyn, pam
peidiwch â ni ychwanegu trin digwyddiad.

805
00:39:27,700 --> 00:39:31,020
>> Felly, gadewch i ni wneud rhywbeth
i'r corff eto.

806
00:39:31,020 --> 00:39:33,490
A gadewch i ni ddweud ein bod yn ei wneud ar -

807
00:39:33,490 --> 00:39:34,500
cliciwch.

808
00:39:34,500 --> 00:39:35,750
Byddwn yn ychwanegu swyddogaeth.

809
00:39:35,750 --> 00:39:38,270

810
00:39:38,270 --> 00:39:39,690
>> Newid Gadewch i ni: TOMAS REIMERS
mae'n lliw i goch eto.

811
00:39:39,690 --> 00:39:40,000
Pam ddim?

812
00:39:40,000 --> 00:39:41,680
>> MIKE Rizzo: Yeah, gadewch i ni newid
ei 'lliw i goch eto.

813
00:39:41,680 --> 00:39:46,310

814
00:39:46,310 --> 00:39:46,900
Mae pob hawl.

815
00:39:46,900 --> 00:39:48,480
Felly, gadewch i ni ail-lwytho y dudalen.

816
00:39:48,480 --> 00:39:49,530
OK, rydym yn gweld -

817
00:39:49,530 --> 00:39:52,290
yn ôl y disgwyl, nid yw'n troi'n goch eto.

818
00:39:52,290 --> 00:39:53,610
Ond yna gallwn fynd yn ei flaen a chliciwch arno.

819
00:39:53,610 --> 00:39:54,270
>> TOMAS REIMERS: Ac mae'n troi goch.

820
00:39:54,270 --> 00:39:56,090
>> MIKE Rizzo: Ac mae'n ei wneud
troi'n goch yn ôl y disgwyl.

821
00:39:56,090 --> 00:39:59,010
>> TOMAS REIMERS: A gallwn weld sut y
gallwn ddechrau adeiladu sylfaenol iawn

822
00:39:59,010 --> 00:40:00,170
rhyngweithio.

823
00:40:00,170 --> 00:40:03,850
Pethau eraill efallai y byddwn eisiau ei wneud yw,
os nad ydym am i wneud y corff

824
00:40:03,850 --> 00:40:07,230
lliw coch, gadewch i ni wneud y HTML
goch lliw cefndir.

825
00:40:07,230 --> 00:40:08,480
Dim ond felly mae'n yr un CSS.

826
00:40:08,480 --> 00:40:19,960

827
00:40:19,960 --> 00:40:23,320
>> A phan fyddwn yn ei newid, gallwn weld hyn
effaith ddramatig iawn o newid y

828
00:40:23,320 --> 00:40:25,510
dudalen gyfan.

829
00:40:25,510 --> 00:40:29,100
Felly eto, os ydych yn gweithredu pethau,
gallwch gael un gydran

830
00:40:29,100 --> 00:40:30,150
sydd i fod i gael ei glicio.

831
00:40:30,150 --> 00:40:32,710
Lets 'ddeud botwm ymadael a
elfen gyfan eraill,

832
00:40:32,710 --> 00:40:33,830
sydd i fod i ymateb.

833
00:40:33,830 --> 00:40:35,755
Felly, byddech yn cael gwared ffenestr
pan fydd hynny'n digwydd.

834
00:40:35,755 --> 00:40:39,341

835
00:40:39,341 --> 00:40:40,700
>> MIKE Rizzo: OK.

836
00:40:40,700 --> 00:40:42,200
Yn union fel enghraifft -

837
00:40:42,200 --> 00:40:44,400
nad oeddech yn cael gweld hyn yn gynharach -

838
00:40:44,400 --> 00:40:47,500
'N annhymerus' jyst yn dangos i chi sut mae'n edrych
yn hoffi pan fyddwn yn cuddio rhywbeth.

839
00:40:47,500 --> 00:40:52,220
Felly, byddaf yn mynd yn ei flaen ac yn llithro i fyny.

840
00:40:52,220 --> 00:40:54,440
>> TOMAS REIMERS: Eisiau i lapio hynny mewn
paragraff fath cyn i ni wneud hynny?

841
00:40:54,440 --> 00:40:55,132
>> MIKE Rizzo: OK.

842
00:40:55,132 --> 00:40:59,135
Yeah, nid pam yr ydym yn gwneud hynny dim ond er mwyn
gallwn ddewis ei fod yn ychydig yn fwy.

843
00:40:59,135 --> 00:41:00,490
>> TOMAS REIMERS: A gadewch i ni
roi cynnig dosbarth.

844
00:41:00,490 --> 00:41:01,740
>> MIKE Rizzo: Yeah.

845
00:41:01,740 --> 00:41:06,575

846
00:41:06,575 --> 00:41:09,920
Iawn, felly gadewch i ni weld.

847
00:41:09,920 --> 00:41:14,820
Yn hytrach na dewis y corff ei hun
yn awr, 'n annhymerus' jyst yn dewis popeth gyda

848
00:41:14,820 --> 00:41:18,780
dosbarth helo, a dyma ni
dim ond un peth.

849
00:41:18,780 --> 00:41:20,900
Felly ni ddylai rhaid i ni
poeni am hynny.

850
00:41:20,900 --> 00:41:23,080
>> Felly byddaf yn adnewyddu ei.

851
00:41:23,080 --> 00:41:24,230
'N annhymerus' mynd yn ei flaen a chliciwch arno.

852
00:41:24,230 --> 00:41:27,890
Ac mae'n, rhyw fath o, gwnaeth sleid 'n annaearol
i fyny beth, nad oedd yn edrych mor

853
00:41:27,890 --> 00:41:29,580
deniadol.

854
00:41:29,580 --> 00:41:31,060
Yn gyffredinol, nid ydynt yn edrych yn bert 'n glws.

855
00:41:31,060 --> 00:41:32,720
Amcana, mae hyn yn - ar gyfer rhai
rheswm - nid oedd.

856
00:41:32,720 --> 00:41:36,640
'N annhymerus' jyst gwneud pylu allan fel
gallwch edrych ar hynny hefyd.

857
00:41:36,640 --> 00:41:38,100
Llawer brafiach.

858
00:41:38,100 --> 00:41:41,150
>> Ac yna, os wyf yn agor y JavaScript
chysura eto ac rydym am weld beth

859
00:41:41,150 --> 00:41:43,900
mae'n edrych fel pan fyddwn yn pylu ei i mewn

860
00:41:43,900 --> 00:41:46,920
Yn awr, Fi jyst yn galw pylu i mewn ar ei.

861
00:41:46,920 --> 00:41:48,830
Ac mae'n pylu yn ôl i mewn

862
00:41:48,830 --> 00:41:56,150
>> Yn yr un modd, gallem mewn gwirionedd hefyd basio
dadl i diflannu i mewn neu pylu allan,

863
00:41:56,150 --> 00:41:57,640
sydd, math o, cyflymder ohono.

864
00:41:57,640 --> 00:42:02,220
Felly, gadewch i ni fynd yn ei flaen ac yn dweud rydym am
i fynd yn araf pylu i mewn

865
00:42:02,220 --> 00:42:04,250
Felly, yr wyf yn dyfalu ei fod yn dal yn ymddangos
'n bert gyflym.

866
00:42:04,250 --> 00:42:06,180
Ond roedd yn arafach nag o'r blaen.

867
00:42:06,180 --> 00:42:10,340
>> TOMAS REIMERS: Ac os ydych chi am ddod o hyd i
rhagor o wybodaeth am y pethau hyn, unwaith eto,

868
00:42:10,340 --> 00:42:13,410
dim ond yn mynd i'r ddogfennaeth jQuery,
yr ydym wedi rhoi i chi, ac yn darllen

869
00:42:13,410 --> 00:42:13,735
drwy hyn.

870
00:42:13,735 --> 00:42:15,790
Maent yn dogfennu eu swyddogaethau
eithriadol o dda.

871
00:42:15,790 --> 00:42:18,622

872
00:42:18,622 --> 00:42:19,570
>> MIKE Rizzo: OK.

873
00:42:19,570 --> 00:42:21,560
Felly, yr wyf yn dyfalu gadewch i ni fynd yn ôl at hyn.

874
00:42:21,560 --> 00:42:23,490
A gallwn siarad am ein tudalen olaf.

875
00:42:23,490 --> 00:42:24,690
Wel, gallwn orffen gyda Cychwynnydd.

876
00:42:24,690 --> 00:42:27,140
Ac yna byddwn yn agor i fyny
ar gyfer rhai cwestiynau.

877
00:42:27,140 --> 00:42:30,180
Ac os ydych yn guys gennych unrhyw syniadau
hoffech chi geisio taflu i fyny a gweld

878
00:42:30,180 --> 00:42:34,150
os gallwn eu gweithredu gyda
JavaScript gyflym.

879
00:42:34,150 --> 00:42:37,890
>> Felly, yn gyflym iawn am Cychwynnydd, a oedd yn
ei gynnwys yn awtomatig mewn

880
00:42:37,890 --> 00:42:41,700
eich problem diwethaf yn gosod yn y ffolder CSS
ac mewn gwirionedd yn gysylltiedig â yn eich

881
00:42:41,700 --> 00:42:43,190
header.PHP.

882
00:42:43,190 --> 00:42:46,740
Felly, gallech fod wedi ychwanegu dosbarthiadau a
yn cael eu diffinio o fewn Cychwynnydd iddo.

883
00:42:46,740 --> 00:42:50,490
A byddai wedi arddull yn awtomatig
y pethau hynny yn unol â hynny.

884
00:42:50,490 --> 00:42:54,550
>> TOMAS REIMERS: Felly Cychwynnydd yn iawn
beth hudol a ddatblygwyd gan y bobl

885
00:42:54,550 --> 00:42:55,340
yn Twitter.

886
00:42:55,340 --> 00:42:57,230
A'r hyn y mae'n ei olygu i wneud oedd -

887
00:42:57,230 --> 00:43:00,740
cyn gwefannau yn galed iawn i wneud
edrych yn neis, yn enwedig pan oedd gennym

888
00:43:00,740 --> 00:43:02,200
llawer o gydrannau cyffredin.

889
00:43:02,200 --> 00:43:04,770
Felly mae llawer o fotymau ar y
ar y we yn edrych yr un fath.

890
00:43:04,770 --> 00:43:08,960
>> Gall llawer o feysydd testun yn cael ei wneud i
yn edrych yn well na'r testun safonol

891
00:43:08,960 --> 00:43:13,620
maes mae'n debyg eich bod yn gwybod o wir
hen wefannau neu mewn gwirionedd a wnaed yn wael

892
00:43:13,620 --> 00:43:18,210
gwefannau, a dim ond yn edrych fel llythrennol
blychau testun heb unrhyw fath o destun

893
00:43:18,210 --> 00:43:21,190
cysgod neu unrhyw fath o amlinelliad 'n glws.

894
00:43:21,190 --> 00:43:24,540
Felly, yr hyn a wnaeth Cychwynnydd oedd meddai, yn dda,
mae gennym lawer o arddulliau cyffredin.

895
00:43:24,540 --> 00:43:28,210
Pam nad ydym yn gwneud un set gyffredin o CSS
a set gyffredin o JavaScript fel

896
00:43:28,210 --> 00:43:32,210
yn dda, y gellir arddull fel a pha
yn gallu rhoi pethau fel galw heibio i bobl

897
00:43:32,210 --> 00:43:34,610
i lawr bwydlenni, a all roi i bobl
pethau fel modals.

898
00:43:34,610 --> 00:43:38,580
>> Moddol yw'r hyn pops dros y dudalen
pryd bynnag y mae'n siarad yn llym

899
00:43:38,580 --> 00:43:41,090
rhywbeth, sy'n rhwystro ymhellach
rhyngweithio nes i chi

900
00:43:41,090 --> 00:43:43,110
rhyngweithio ag ef.

901
00:43:43,110 --> 00:43:45,820
Rhywbeth fel hyn yn cael ei, a ydych yn siŵr
eich bod eisiau dileu y peth hyn?

902
00:43:45,820 --> 00:43:49,100
Ni allwch wneud unrhyw beth arall
hyd nes y byddwch yn dweud ie neu na.

903
00:43:49,100 --> 00:43:52,720
>> Cymerodd hyn i gyd ac mae'n pecynnu ei
at ei gilydd a dweud, dyma ni yn mynd.

904
00:43:52,720 --> 00:43:54,630
Gall pobl bellach yn defnyddio'r hyn.

905
00:43:54,630 --> 00:43:56,830
A allwch chi ddod o hyd i dros
yn getbootstrap.com.

906
00:43:56,830 --> 00:44:00,480
Cafodd ei gynnwys yn awtomatig o fewn
eich problem diwethaf yn gosod.

907
00:44:00,480 --> 00:44:04,160
Ac rydych yn fwy na croeso i
ei ddefnyddio ar eich prosiect terfynol.

908
00:44:04,160 --> 00:44:06,950
Ac os ydych chi eisiau dilyn y
cysylltu i gael Cychwynnydd.

909
00:44:06,950 --> 00:44:10,590

910
00:44:10,590 --> 00:44:15,700
>> Byddwch yn gweld yma yw'r
Bootstrap safle CSS.

911
00:44:15,700 --> 00:44:16,860
Byddwch yn gweld Cychwynnydd.

912
00:44:16,860 --> 00:44:20,450
Ac os ydych yn sgroliwch i lawr, byddwch yn gweld
sut i lawrlwytho, sut i

913
00:44:20,450 --> 00:44:21,900
osod, et cetera.

914
00:44:21,900 --> 00:44:24,700
>> MIKE Rizzo: A gallwch hefyd,
ddiddorol ddigon, addasu i

915
00:44:24,700 --> 00:44:27,770
fod pa bynnag fath o themâu
ydych ei eisiau.

916
00:44:27,770 --> 00:44:31,270
Yr wyf yn gwybod bod rhywbeth wnes i ar gyfer fy
prosiect terfynol pan fyddaf yn cymryd y dosbarth

917
00:44:31,270 --> 00:44:32,050
ei addasu ei.

918
00:44:32,050 --> 00:44:34,540
Mae fersiwn gwahanol o Cychwynnydd y
Roedd cynllun lliw gwahanol a

919
00:44:34,540 --> 00:44:36,700
gwahanol siapiau o rai
pethau gwahanol.

920
00:44:36,700 --> 00:44:38,250
Felly, yr wyf yn eich annog i chwarae â hynny.

921
00:44:38,250 --> 00:44:39,440
Mae'n fath o hwyl i'w wneud.

922
00:44:39,440 --> 00:44:43,230
>> TOMAS REIMERS: edrych ar draws y top
eto, mae'n debyg iawn i'r Font

923
00:44:43,230 --> 00:44:44,970
Safle Awesome.

924
00:44:44,970 --> 00:44:47,810
Bydd llawer o ddogfennau yn dechrau
ymddangos yn debyg pan ydych wedi

925
00:44:47,810 --> 00:44:48,940
gweld digon ohono.

926
00:44:48,940 --> 00:44:51,260
Felly, yma rydym yn cael y CSS
elfen o hyn.

927
00:44:51,260 --> 00:44:53,540
A byddwch yn gweld sut y mae'n
Gall arddull pethau.

928
00:44:53,540 --> 00:44:56,780
Felly, os ydych yn clicio ar fyrddau, er enghraifft,
gallwch chi yn syth wneud

929
00:44:56,780 --> 00:45:01,710
tabl 'n bert gan syml ychwanegu
y tabl dosbarth iddo.

930
00:45:01,710 --> 00:45:03,150
>> Pethau un fath ar gyfer botymau.

931
00:45:03,150 --> 00:45:12,140
Os ydych yn syml ychwanegwch y BTN dosbarth a BTN
diofyn neu gynradd BTN, gallwch

932
00:45:12,140 --> 00:45:16,240
cael unrhyw un o'r botymau hyn
gydag arddulliau hyn cyn-wneud.

933
00:45:16,240 --> 00:45:18,570
Ac yna, os ydych yn chwilio am
rhywbeth mwy cymhleth na dim ond

934
00:45:18,570 --> 00:45:24,100
RESTYLING hyn sydd eisoes w cael, drosodd ar
y tab JavaScript ar draws y byddwn yn top

935
00:45:24,100 --> 00:45:25,120
ganddynt griw o gydrannau.

936
00:45:25,120 --> 00:45:30,410
>> Felly dyma ni wedi trawsnewidiadau, modals,
dropdowns, tabiau, a cynghorion offer.

937
00:45:30,410 --> 00:45:35,530
Mae tooltip yw'r hyn pops i fyny o dan eich
llygoden pan fyddwch yn hofran ar rywbeth.

938
00:45:35,530 --> 00:45:40,280
Popovers, rhybuddion, botymau, collapsible
cordialau yw'r hyn

939
00:45:40,280 --> 00:45:41,190
maen nhw'n a elwir fel arfer.

940
00:45:41,190 --> 00:45:43,045
Carwsél, sy'n troi
trwy ddelweddau tebyg.

941
00:45:43,045 --> 00:45:52,190

942
00:45:52,190 --> 00:45:54,840
>> Felly, y rhai yw cydrannau
o Cychwynnydd.

943
00:45:54,840 --> 00:45:57,620
Byddwn yn eich annog i
iawn yn mynd edrych arnynt.

944
00:45:57,620 --> 00:46:01,780
Mae elfen JavaScript
ac elfen CSS.

945
00:46:01,780 --> 00:46:03,880
Mae croeso i chi eu defnyddio fel y byddwch yn.

946
00:46:03,880 --> 00:46:06,730
Nid ydym yn mynd i fynd i ormod i mewn iddynt
oherwydd ein bod yn teimlo bod y ddogfennaeth

947
00:46:06,730 --> 00:46:09,360
yn gwneud yn dda iawn.

948
00:46:09,360 --> 00:46:10,540
Ac ie.

949
00:46:10,540 --> 00:46:14,500
A oes gennych unrhyw gwestiynau ynglŷn â hynny?

950
00:46:14,500 --> 00:46:19,430
>> MIKE Rizzo: Felly fel yn wirioneddol gyflym
ochr, y dyluniad y dudalen we sy'n

951
00:46:19,430 --> 00:46:21,830
rydym yn rhoi gyflym gilydd ar gyfer
cyflwyniad hwn yw

952
00:46:21,830 --> 00:46:24,290
wneud mewn gwirionedd gan ddefnyddio Cychwynnydd.

953
00:46:24,290 --> 00:46:27,810
Fel y gallwch weld, pan fyddwn yn clicio ar y rhain
gwahanol tabs, ni fyddwn byth yn mewn gwirionedd yn

954
00:46:27,810 --> 00:46:30,750
gan adael y dudalen index.html presennol.

955
00:46:30,750 --> 00:46:36,400
Felly, yr hyn sydd gennym yn wahanol divs
o fewn index.html hwn.

956
00:46:36,400 --> 00:46:39,610
Ac yna, pryd bynnag y byddwn cliciwch ar un o'r gwahanol
tab, 'i' jyst yn newid

957
00:46:39,610 --> 00:46:41,590
sy'n dangos un o.

958
00:46:41,590 --> 00:46:47,390
>> Felly, yn unol â hynny yn eu swyddi,
newid HTML y dudalen fel bod

959
00:46:47,390 --> 00:46:52,330
y tab presennol yn cael ei farcio mor weithgar, felly
mae'n ymddangos yn wahanol ac yn edrych

960
00:46:52,330 --> 00:46:52,820
neis iawn.

961
00:46:52,820 --> 00:46:57,260
>> TOMAS REIMERS: Felly a oedd yn ei wneud i gyd
heb i ni ysgrifennu bron unrhyw CSS.

962
00:46:57,260 --> 00:47:01,440
Rydym hefyd yn gweld pennawd ar draws y brig,
y mae'r lliwiau yn gennym ni.

963
00:47:01,440 --> 00:47:04,800
Ond mae'r gwir ei roi ar y
frig y dudalen a gwneud

964
00:47:04,800 --> 00:47:06,660
mae'n sgrôl oedd Cychwynnydd.

965
00:47:06,660 --> 00:47:09,720
Ac yna hyd yn oed i lyfrgell arall - mae hyn yn
Nid yw un buom yn siarad am ond un

966
00:47:09,720 --> 00:47:11,580
gallwch Google os ydych yn dymuno.

967
00:47:11,580 --> 00:47:15,130
Gelwir hyn yn prettify.js.

968
00:47:15,130 --> 00:47:20,650
A bydd yn tynnu sylw at cystrawen eich cod
i chi gan ddefnyddio CSS a JavaScript.

969
00:47:20,650 --> 00:47:23,480

970
00:47:23,480 --> 00:47:27,070
>> Y peth olaf yr ydym am i siarad am
cyn i ni ryddhau i chi allan i'r

971
00:47:27,070 --> 00:47:30,620
byd i edrych ar lyfrgelloedd i chyfrif i maes
sut i'w defnyddio, ac i, gobeithio,

972
00:47:30,620 --> 00:47:34,640
darllen dogfennaeth a dod o hyd i hyn yr ydych
angen yw sut i ddod o hyd i lyfrgelloedd.

973
00:47:34,640 --> 00:47:37,000
Felly, y cyntaf yw ein bod yn unig
mynd i wthio Google.

974
00:47:37,000 --> 00:47:37,810
Ewch Google.

975
00:47:37,810 --> 00:47:41,150
>> Dyna llythrennol hyn a wnawn pan fyddwn yn
angen iddynt ei wneud rhywbeth yw ein Google.

976
00:47:41,150 --> 00:47:44,730
A oes llyfrgell JavaScript sy'n
yn fy ngalluogi i drin amser mewn

977
00:47:44,730 --> 00:47:45,400
ffordd ddefnyddiol?

978
00:47:45,400 --> 00:47:49,510
Felly os wyf yn gwybod bod rhai defnyddwyr creu
cyfrif yma, ac mae hyn yn

979
00:47:49,510 --> 00:47:53,010
hyn o bryd, sut y gallaf gyfrifo'r
gwahaniaeth gyda hynny heb orfod

980
00:47:53,010 --> 00:47:55,020
cyfrifo fy hun?

981
00:47:55,020 --> 00:47:59,630
Felly, mae hyn mewn gwirionedd yn beth cyffredin,
JavaScript llyfrgell amser.

982
00:47:59,630 --> 00:48:02,440
A dyma ni Moment.js--
yr un mwyaf poblogaidd.

983
00:48:02,440 --> 00:48:06,530
>> Os byddwn angen llyfrgell i drin
rhywbeth fel lliw i allu

984
00:48:06,530 --> 00:48:08,650
cynhyrchu criw o liwiau ar hap -

985
00:48:08,650 --> 00:48:10,660
o bosibl, i greu
arddull neu rywbeth -

986
00:48:10,660 --> 00:48:13,480
gallem Google rhywbeth fel
JavaScript llyfrgell lliw.

987
00:48:13,480 --> 00:48:15,620
Ac rwy'n siŵr y byddem pop i fyny gyda
mil ac un ohonynt.

988
00:48:15,620 --> 00:48:18,290

989
00:48:18,290 --> 00:48:21,410
Mae croeso i chi ddarllen drwyddynt.

990
00:48:21,410 --> 00:48:24,610
>> Felly, rhan fwyaf o bethau - pan fyddwch yn dod o hyd iddynt -
yn mynd yn cael ei gynnal ar un o'r

991
00:48:24,610 --> 00:48:25,920
safleoedd pa god llu.

992
00:48:25,920 --> 00:48:26,960
Maent yn ychydig o rai poblogaidd.

993
00:48:26,960 --> 00:48:30,870
Y mwyaf poblogaidd, gan
yma, yw github.com.

994
00:48:30,870 --> 00:48:35,300
Ac os byddwch yn mynd i GitHub mewn gwirionedd
lle'r oedd Normalize gynnal.

995
00:48:35,300 --> 00:48:36,950
Felly, os ydych am fynd yn ôl at yr un.

996
00:48:36,950 --> 00:48:38,135
Dangoswch iddynt hynny.

997
00:48:38,135 --> 00:48:40,516
>> MIKE Rizzo: A dyna mewn gwirionedd yn lle
hyn yn cael ei gynnal hefyd, os ydych yn sylwi.

998
00:48:40,516 --> 00:48:41,000
>> TOMAS REIMERS: Yeah.

999
00:48:41,000 --> 00:48:49,078
Felly, os byddwch yn mynd draw i Normaleiddio
ac yn mynd i'r GitHub.

1000
00:48:49,078 --> 00:48:51,936
A oedd yw hynny?

1001
00:48:51,936 --> 00:48:54,620
>> MIKE Rizzo: Bod peth bach gath
yw'r symbol GitHub.

1002
00:48:54,620 --> 00:48:56,330
>> TOMAS REIMERS: Oh.

1003
00:48:56,330 --> 00:49:02,180
Felly GitHub yn defnyddio dull o'r enw
Git i siop cod.

1004
00:49:02,180 --> 00:49:05,150
A yw nad ydych yn gwybod beth yw hwnnw neu
mae'n codi ofn i chi, mae hynny'n iawn.

1005
00:49:05,150 --> 00:49:16,100
Nid oes rhaid i chi wybod beth Git yn
oherwydd GitHub Mae botwm Lawrlwytho

1006
00:49:16,100 --> 00:49:17,200
ar y dde gwaelod.

1007
00:49:17,200 --> 00:49:21,350
>> Y peth defnyddiol eraill i wybod
am GitHub yw'r rhan fwyaf o gynnyrch

1008
00:49:21,350 --> 00:49:23,200
yn cael ei ddarllen i mi.

1009
00:49:23,200 --> 00:49:25,400
Ac os nad oes ganddynt wefan, y
darllen yn fy siarad am sut yr ydych yn

1010
00:49:25,400 --> 00:49:28,310
osod, sut yr ydych yn ei ddefnyddio, beth mae'n ei
wneud, et cetera, et cetera, et cetera.

1011
00:49:28,310 --> 00:49:31,033
Yr hyn yr ydym wedi bod yn y bôn
chi gerdded trwyddo.

1012
00:49:31,033 --> 00:49:32,326
>> MIKE Rizzo: rhoi'r gorau iddi Rhyngrwyd.

1013
00:49:32,326 --> 00:49:34,020
>> TOMAS REIMERS: Mae hynny'n iawn.

1014
00:49:34,020 --> 00:49:36,980
Mae'r ddau beth olaf roeddem am
i siarad am -

1015
00:49:36,980 --> 00:49:38,750
rydym wedi trafod Git -

1016
00:49:38,750 --> 00:49:40,290
yn datrys problemau.

1017
00:49:40,290 --> 00:49:43,020
Ac nid yw hyn yr un mor berthnasol ar gyfer
y cynnyrch terfynol gan ei fod yn

1018
00:49:43,020 --> 00:49:44,870
pan fyddwch yn gadael 50.

1019
00:49:44,870 --> 00:49:48,310
A phan fyddwch yn rhedeg i mewn i gynnyrch
gweithredu llyfrgelloedd neu weithredu

1020
00:49:48,310 --> 00:49:50,230
eich prosiect eich hun, rydych yn mynd
i gael gwestiynau neu os ydych

1021
00:49:50,230 --> 00:49:51,660
mynd i edrych ar gyfer cwestiynau.

1022
00:49:51,660 --> 00:49:53,060
>> Unwaith eto, Google ei.

1023
00:49:53,060 --> 00:49:54,630
Dyna llythrennol hyn a wnawn.

1024
00:49:54,630 --> 00:49:56,400
Mae hyn yn mynd i swnio'n wirion.

1025
00:49:56,400 --> 00:49:58,310
Ond yn llythrennol, rydym yn Google ei.

1026
00:49:58,310 --> 00:50:01,810
Ac eto, un o'r pethau cyntaf
Fel arfer, byddwch yn rhedeg i mewn yn

1027
00:50:01,810 --> 00:50:06,550
stackoverflow.com, sy'n wych
cwestiwn ac ateb golwg.

1028
00:50:06,550 --> 00:50:10,530
>> Mae'n wych ddau oherwydd y gallwch
bostio'r cwestiynau ac edrych am

1029
00:50:10,530 --> 00:50:12,760
atebion ond hefyd oherwydd
mae ganddi lawer o eisoes

1030
00:50:12,760 --> 00:50:14,590
cyn-boblog cynnwys yno.

1031
00:50:14,590 --> 00:50:18,510
Felly, fel arfer pan fyddwch yn Google a rhaglennu
sylw o fewn y cyntaf

1032
00:50:18,510 --> 00:50:22,620
cwpl taro efallai y byddwch wedi rhedeg eisoes
i mewn iddo yn ystod eich setiau problem.

1033
00:50:22,620 --> 00:50:27,840
>> Ac yna, y peth mewn gwirionedd briff diwethaf
yw JSFIDDLE, sydd - heddiw rydym wedi

1034
00:50:27,840 --> 00:50:32,110
bod yn gwneud llawer o waith gyda
JavaScript HTML CSS.

1035
00:50:32,110 --> 00:50:39,820
JSFIDDLE yn app ar y we, a oedd yn y bôn
yn caniatáu i chi gymryd eich HTML, EICH

1036
00:50:39,820 --> 00:50:42,820
JavaScript gwaelod ar y chwith, a
eich dde uchaf CSS.

1037
00:50:42,820 --> 00:50:47,840
Ac yna gall greu cyflym rendr
ohono a gweld sut y mae'n rhyngweithio.

1038
00:50:47,840 --> 00:50:50,500
Mae'n ddefnyddiol iawn pan fydd pobl yn ceisio
i wneud prawf o gysyniad fel

1039
00:50:50,500 --> 00:50:52,910
dyma sut y byddech yn
gwneud gwymplen.

1040
00:50:52,910 --> 00:50:54,980
Efallai Datgelwch cyflym neu beth bynnag.

1041
00:50:54,980 --> 00:50:56,560
>> MIKE Rizzo: Felly, gadewch i ni fynd
ymlaen a chliciwch hyn.

1042
00:50:56,560 --> 00:50:57,820
Nodyn cyflym -

1043
00:50:57,820 --> 00:51:00,430
ond, cyn i ni yn
ei wneud ar cliciwch.

1044
00:51:00,430 --> 00:51:04,380
Troi allan Mae gan JCorey Korea adeiledig
yn cliciwch trin ofn y bydd yn

1045
00:51:04,380 --> 00:51:07,020
yn defnyddio dim ond oherwydd ei fod yn ffigurau eich bod yn
mynd i eisiau i wneud llawer o bethau

1046
00:51:07,020 --> 00:51:08,410
pan fyddwch eisiau i glicio rhywbeth.

1047
00:51:08,410 --> 00:51:09,690
>> Yn yr un modd, mae ganddo hefyd hofran.

1048
00:51:09,690 --> 00:51:12,850
Ond i gael y cwmpas llawn
hynny, yn edrych ar y jQuery

1049
00:51:12,850 --> 00:51:15,320
dogfennaeth ac yn gwneud hynny.

1050
00:51:15,320 --> 00:51:18,760
Yr wyf wedi gwneud rhywbeth twp yma.

1051
00:51:18,760 --> 00:51:21,490
>> TOMAS REIMERS: Felly, yr wyf yn cael 'n sylweddol gyflym
rhaglen gywir yma, sy'n dweud

1052
00:51:21,490 --> 00:51:22,640
cliciwch botwm ar.

1053
00:51:22,640 --> 00:51:23,890
Yna, mae gennym ar gyfer dolen.

1054
00:51:23,890 --> 00:51:26,810
I fi yn llai na 404.

1055
00:51:26,810 --> 00:51:29,530
Dim ond ei fod yn mynd i pop i fyny
negeseuon rhybudd hyn.

1056
00:51:29,530 --> 00:51:33,425
>> MIKE Rizzo: A beth oedd y
Cod 404 yn sefyll ar ei gyfer yn HTML?

1057
00:51:33,425 --> 00:51:34,145
A oes unrhyw un yn cofio?

1058
00:51:34,145 --> 00:51:35,450
Ddim yn dod o hyd, ar y dde.

1059
00:51:35,450 --> 00:51:38,640

1060
00:51:38,640 --> 00:51:40,885
Chrome hefyd yn ychwanegu hyn yn daclus
peth lle y gallwch -

1061
00:51:40,885 --> 00:51:43,430
>> TOMAS REIMERS: Oherwydd bod pobl fel
Dechreuodd Mike gwneud hyn llawer ac

1062
00:51:43,430 --> 00:51:47,230
defnyddwyr blino, sy'n caniatáu
chi i weld gwybodaeth.

1063
00:51:47,230 --> 00:51:48,286
>> MIKE Rizzo: Yeah.

1064
00:51:48,286 --> 00:51:50,690
>> TOMAS REIMERS: A oes gennym unrhyw gwestiynau
am hyn, am JavaScript

1065
00:51:50,690 --> 00:51:53,420
llyfrgelloedd, dod o hyd i lyfrgelloedd, neu
edrych pa datblygu gwefan

1066
00:51:53,420 --> 00:51:55,400
fel yn y byd go iawn?

1067
00:51:55,400 --> 00:51:56,880
Rydym yn rhedeg i fyny yn erbyn amser.

1068
00:51:56,880 --> 00:52:00,400
Felly, nid wyf yn siŵr ein bod yn mynd
i gael amser i weithredu

1069
00:52:00,400 --> 00:52:02,290
oni bai ei fod yn wirioneddol gyflym.

1070
00:52:02,290 --> 00:52:04,580
A ydym yn dda?

1071
00:52:04,580 --> 00:52:08,110
>> MIKE Rizzo: Byddai unrhyw beth i chi guys yn hoffi
i weld yn wirioneddol gyflym i mewn, fel, dau

1072
00:52:08,110 --> 00:52:09,556
munud neu lai?

1073
00:52:09,556 --> 00:52:10,870
>> TOMAS REIMERS: Unrhyw beth
gallwn egluro?

1074
00:52:10,870 --> 00:52:12,500
Sut i ysgrifennu mewn -

1075
00:52:12,500 --> 00:52:13,260
>> GYNULLEIDFA: [Anghlywadwy]?

1076
00:52:13,260 --> 00:52:16,070
>> MIKE Rizzo: Ie, felly that's -

1077
00:52:16,070 --> 00:52:18,065
>> TOMAS REIMERS: Alli jyst daro
Control-U ar y wefan.

1078
00:52:18,065 --> 00:52:19,275
>> MIKE Rizzo: O, doeddwn i ddim yn gwybod hynny.

1079
00:52:19,275 --> 00:52:22,290
>> TOMAS REIMERS: Yr wyf yn meddwl, ie.

1080
00:52:22,290 --> 00:52:23,300
Control-U. Yeah.

1081
00:52:23,300 --> 00:52:25,970
>> MIKE Rizzo: O, felly dyna'r
cod ar gyfer y wefan.

1082
00:52:25,970 --> 00:52:29,580
Ond os ydych ei eisiau mewn gwirionedd i lawrlwytho ein
ffeiliau a phopeth, mae'n cael ei gynnal

1083
00:52:29,580 --> 00:52:32,650
ar github.com

1084
00:52:32,650 --> 00:52:34,850
>> TOMAS REIMERS: cwtogi fy enw -

1085
00:52:34,850 --> 00:52:38,504
Tomas Reimers - slaes
Seminar cysylltnod CS50.

1086
00:52:38,504 --> 00:52:40,710
>> MIKE Rizzo: A ydych yn gallu
dod o hyd i bopeth yno.

1087
00:52:40,710 --> 00:52:42,310
>> TOMAS REIMERS: Dyma beth GitHub
edrych yn debyg, gan y ffordd.

1088
00:52:42,310 --> 00:52:44,910
Felly eto, pan fyddwch yn gweld ffynhonnell agored
prosiect, fel arfer, byddant yn darllen

1089
00:52:44,910 --> 00:52:45,950
fi yno y gallwch ei ddarllen.

1090
00:52:45,950 --> 00:52:50,200
Ac os ydych yn mynd yn ôl, byddwch yn sylwi bod
gennych yr download zip, a fydd yn

1091
00:52:50,200 --> 00:52:52,130
caniatáu i chi lwytho i lawr y ffynhonnell
cod i gynnwys y

1092
00:52:52,130 --> 00:52:53,666
cynnyrch yn eich peth eich hun.

1093
00:52:53,666 --> 00:52:56,890
>> MIKE Rizzo: Yeah, ac os ydym yn unig glicio
ar y index.html yn gyflym iawn -

1094
00:52:56,890 --> 00:52:59,180
>> TOMAS REIMERS: Byddwch yn gweld yma yn y
cod ffynhonnell ar gyfer ein gwefan.

1095
00:52:59,180 --> 00:53:02,016

1096
00:53:02,016 --> 00:53:06,070
>> MIKE Rizzo: Hefyd, yr wyf yn anghofio i wthio i'r dde
o'r blaen gyda'r bwrdd mawr,

1097
00:53:06,070 --> 00:53:09,860
cynnwys, ond mae hefyd tabl
o chmods yr ydym yn cynnwys

1098
00:53:09,860 --> 00:53:13,210
dim ond ar gyfer eich eglurder.

1099
00:53:13,210 --> 00:53:16,940
Ond os ydym yn sgrolio yr holl ffordd i lawr i'r
gwaelod, nid oeddem yn ei wneud mewn gwirionedd iawn

1100
00:53:16,940 --> 00:53:21,160
llawer gyda'r JavaScript
pethau o gwbl gyda hyn.

1101
00:53:21,160 --> 00:53:26,610
Mae'n llwyr o bopeth
arall a gawsom.

1102
00:53:26,610 --> 00:53:28,730
>> Felly, diolch i chi guys am ddod
a gwrando.

1103
00:53:28,730 --> 00:53:29,830
Rydym yn gobeithio y bydd hyn yn ddefnyddiol iawn.

1104
00:53:29,830 --> 00:53:33,020
Os oes gennych unrhyw JavaScript cysylltiedig
cwestiynau neu dim ond eisiau siarad am

1105
00:53:33,020 --> 00:53:36,240
beth arall fel hyn y pethau oer eraill
gallwch ei wneud gyda JavaScript, byddem wrth ein bodd

1106
00:53:36,240 --> 00:53:37,186
i siarad â chi.

1107
00:53:37,186 --> 00:53:40,010
>> TOMAS REIMERS: Os oes gennych gwestiwn
am eich prosiect, neu os gall hyn fod yn

1108
00:53:40,010 --> 00:53:42,740
berthnasol, byddwn yn ôl pob tebyg ffon o gwmpas
ychydig ar ôl hyn.

1109
00:53:42,740 --> 00:53:44,640
Ond heblaw am hynny, rhaid
penwythnos da.

1110
00:53:44,640 --> 00:53:45,845
>> MIKE Rizzo: Yeah, yn mwynhau.

1111
00:53:45,845 --> 00:53:46,120
Welwn ni chi guys.

1112
00:53:46,120 --> 00:53:47,370
>> TOMAS REIMERS: Gweler ya.

1113
00:53:47,370 --> 00:53:47,926