1
00:00:00,000 --> 00:00:03,840
>> [CHWARAE CERDDORIAETH]

2
00:00:03,840 --> 00:00:05,770

3
00:00:05,770 --> 00:00:08,690
>> DOUG LLOYD: Felly erbyn hyn rydym yn hen
manteision yn rhaglennu ar y we, dde?

4
00:00:08,690 --> 00:00:12,140
Ac rydym wedi cynnwys nifer o
ieithoedd mewn fideos unigol.

5
00:00:12,140 --> 00:00:14,690
Ac yn awr gadewch i ni wneud un yn fwy, JavaScript.

6
00:00:14,690 --> 00:00:17,370
>> Yn gyntaf y newyddion da, JavaScript
yn rhaglennu modern

7
00:00:17,370 --> 00:00:21,410
iaith yn debyg iawn PHP y mae ei
cystrawen yn deillio o C,

8
00:00:21,410 --> 00:00:22,830
felly dyna lle da i ddechrau.

9
00:00:22,830 --> 00:00:25,880
Mae'n ymwneud mor hen ag PHP, yn ogystal,
ar ôl bod o gwmpas tua 20 mlynedd.

10
00:00:25,880 --> 00:00:28,600
Fe'i dyfeisiwyd o gwmpas
yr un pryd â PHP.

11
00:00:28,600 --> 00:00:32,240
A JavaScript mewn gwirionedd 'n bert
sylfaenol i'r profiad y defnyddiwr

12
00:00:32,240 --> 00:00:32,740
o'r we.

13
00:00:32,740 --> 00:00:34,448
Yn wir, mae yna
tair iaith fy mod

14
00:00:34,448 --> 00:00:38,480
Byddai dweud fath o wneud iawn am y
profiad y defnyddiwr o ryngweithio

15
00:00:38,480 --> 00:00:42,650
gyda'r wefan, html,
css, a JavaScript.

16
00:00:42,650 --> 00:00:46,030
Ac felly yn awr gadewch i ni siarad â
ychydig bach am JavaScript.

17
00:00:46,030 --> 00:00:50,301
>> Y newyddion drwg, fodd bynnag, gyda JavaScript yw
fod yn gosod llawer o reolau ar gyfer ei hun,

18
00:00:50,301 --> 00:00:51,300
ac yna yn eu torri.

19
00:00:51,300 --> 00:00:54,010
A gall fod yn JavaScript mewn gwirionedd
math o heriol i ddysgu,

20
00:00:54,010 --> 00:00:57,000
am ei fod yn wahanol i C a
PHP, sy'n cael eu strwythuro iawn

21
00:00:57,000 --> 00:01:00,270
ac mae ganddynt reolau anhyblyg iawn
am sut y gall pethau'n gweithio.

22
00:01:00,270 --> 00:01:03,690
JavaScript wedi garedig
o gotten mor hyblyg

23
00:01:03,690 --> 00:01:06,650
efallai nad yw pethau'n mynd i
yn gweithio y ffordd yr ydym yn disgwyl iddynt,

24
00:01:06,650 --> 00:01:09,830
ac efallai ein bod ddim yn wir ddysgu
ein hiaith raglennu gyntaf

25
00:01:09,830 --> 00:01:10,769
fel JavaScript.

26
00:01:10,769 --> 00:01:12,810
Felly efallai oherwydd nad yw'n gwneud hynny
gosod ei hun unrhyw reolau,

27
00:01:12,810 --> 00:01:15,754
ac nid yw'n gwneud 'n sylweddol
gorfodi arferion codio da.

28
00:01:15,754 --> 00:01:18,170
Ond nawr rydym wedi datblygu gobeithio
rhai arferion codio da,

29
00:01:18,170 --> 00:01:21,470
ac felly gallwn ddechrau Foray
i mewn i JavaScript ychydig.

30
00:01:21,470 --> 00:01:25,750
>> I ysgrifennu JavaScript, yn debyg i agor
i fyny ffeil C gyda C estyniad dot

31
00:01:25,750 --> 00:01:29,770
neu ffeil PHP gydag estyniad dot PHP,
i gyd mae angen i ni ei wneud yw agor ffeil

32
00:01:29,770 --> 00:01:31,764
gyda estyniad ffeil y dot js.

33
00:01:31,764 --> 00:01:34,430
Nid oes angen i ni gael unrhyw arbennig
amffinyddion fel y gwnaethom yn PHP.

34
00:01:34,430 --> 00:01:36,750
Mae'r math hwnnw o ongl
braced PHP question mark

35
00:01:36,750 --> 00:01:40,300
ein bod yn eu defnyddio i o hynny, y ffordd
byddwn yn dweud ein borydd bod yr hyn sydd gennym yn

36
00:01:40,300 --> 00:01:43,502
JavaScript yw trwy gynnwys
mewn tag html,

37
00:01:43,502 --> 00:01:46,210
a byddwn yn gweld ychydig am
sut i wneud hynny mewn dim ond hyn o bryd.

38
00:01:46,210 --> 00:01:48,210
>> Y peth arall sy'n gwneud
JavaScript wahanol,

39
00:01:48,210 --> 00:01:50,580
fodd bynnag, yw ei fod yn rhedeg ochr y cleient.

40
00:01:50,580 --> 00:01:53,430
Felly yn cofio gyda PHP sy'n
gallem byth yn wir yn gweld

41
00:01:53,430 --> 00:01:57,041
mae'r PHP a tanlinellu gwefan.

42
00:01:57,041 --> 00:01:59,040
Os ydym erioed wedi gweld y
tudalen ffynhonnell, byddem yn unig

43
00:01:59,040 --> 00:02:02,830
gweld y html a oedd yn
a gynhyrchir gan y PHP.

44
00:02:02,830 --> 00:02:04,900
Ond JavaScript yn rhedeg ochr y cleient.

45
00:02:04,900 --> 00:02:06,710
Mae eich JavaScript yn rhedeg ar eich cyfrifiadur.

46
00:02:06,710 --> 00:02:09,050
A dyna pam y gallwch chi ei wneud
pethau yn hoffi ychwanegu atalyddion.

47
00:02:09,050 --> 00:02:09,550
Iawn?

48
00:02:09,550 --> 00:02:12,704
Blocio ad yn cael ei wneud fel arfer gan
gan ladd pob un o'r JavaScript

49
00:02:12,704 --> 00:02:14,370
sy'n cael ei rhedeg ar wefan benodol.

50
00:02:14,370 --> 00:02:19,000
Ac oherwydd y byddai'n rhaid i
rhedeg ar eich ochr y cleient peiriant,

51
00:02:19,000 --> 00:02:21,910
gallwch atal y
JavaScript ar gyfer rhedeg yn gyfan gwbl.

52
00:02:21,910 --> 00:02:27,030
Mae hynny hefyd yn golygu pan fyddwch yn defnyddio
gwefan sy'n cynnwys JavaScript,

53
00:02:27,030 --> 00:02:32,450
mae'n rhaid i chi anfon y ffynhonnell JavaScript
cod fel rhan o'ch ymateb http

54
00:02:32,450 --> 00:02:34,159
i'r cleient pan fyddant yn gofyn am hynny.

55
00:02:34,159 --> 00:02:35,950
Ac felly nid ydych efallai
am eu defnyddio JavaScript

56
00:02:35,950 --> 00:02:38,395
i wneud pethau 'n sylweddol sensitif
fel gwybodaeth pasio

57
00:02:38,395 --> 00:02:41,020
am cyfrineiriau defnyddwyr yn ôl a
allan, gan eu bod mewn gwirionedd yn

58
00:02:41,020 --> 00:02:45,610
mynd i dderbyn yr holl o'r cod ffynhonnell,
nid dim ond y html sy'n cael ei gynhyrchu,

59
00:02:45,610 --> 00:02:49,030
fel y byddai'n wir dweud gyda PHP.

60
00:02:49,030 --> 00:02:51,620
>> Felly sut ydyn ni'n cynnwys JavaScript
yn ein html i ddechrau?

61
00:02:51,620 --> 00:02:54,520
Wel, yn debyg i CSS, mewn gwirionedd,
yn fath o sut yr ydym yn ei wneud yma.

62
00:02:54,520 --> 00:02:56,190
Gyda CSS gennym tagiau arddull.

63
00:02:56,190 --> 00:03:00,760
Ac tu mewn tagiau arddull hynny,
gallwn ddiffinio dalen arddull CSS.

64
00:03:00,760 --> 00:03:03,450
Yn yr un modd â JavaScript
gallwn agor tagiau sgript,

65
00:03:03,450 --> 00:03:06,660
tag html arall nad wnaethom
siarad am yn ein fideo html,

66
00:03:06,660 --> 00:03:09,720
ac ysgrifennu JavaScript mewn
rhwng y tagiau sgript hynny.

67
00:03:09,720 --> 00:03:13,960
Hefyd er, fel CSS, rydym yn
Gallai cysylltu y tu allan i ffeiliau CSS

68
00:03:13,960 --> 00:03:15,900
ac yn tynnu i mewn i'n rhaglen y ffordd honno.

69
00:03:15,900 --> 00:03:18,280
Gyda CSS y gallwn hefyd,
esgus i mi, gyda JavaScript

70
00:03:18,280 --> 00:03:23,240
gallwn hefyd nodi'r ffynhonnell
priodoledd y tag sgript

71
00:03:23,240 --> 00:03:25,720
i gysylltu JavaScript
ar wahân, fel nad ydych yn ei wneud

72
00:03:25,720 --> 00:03:27,680
rhaid ei ysgrifennu mewn
rhwng tagiau sgript, rydym yn

73
00:03:27,680 --> 00:03:29,600
Gall gysylltu wrth ddefnyddio
y tag sgript hefyd.

74
00:03:29,600 --> 00:03:33,230
Ac yn union fel gyda yr achos gyda CSS lle
rydym yn argymell ei fod yn ôl pob tebyg

75
00:03:33,230 --> 00:03:36,090
yn eich diddordeb gorau i ysgrifennu
eich CSS mewn ffeil ar wahân rhag ofn

76
00:03:36,090 --> 00:03:38,500
mae angen i chi ei newid,
yn yr un modd yn ei wneud rydym yn argymell

77
00:03:38,500 --> 00:03:40,720
eich bod yn ysgrifennu eich
JavaScript mewn ffeiliau ar wahân

78
00:03:40,720 --> 00:03:45,460
a defnyddio'r ffynhonnell tagiau sgript
priodoli i glymu eich JavaScript

79
00:03:45,460 --> 00:03:49,520
i mewn i'ch html, eich tudalen we.

80
00:03:49,520 --> 00:03:52,610
>> Newidynnau Felly JavaScript, yr ydym chi helpu
ddechrau siarad am y gystrawen yma.

81
00:03:52,610 --> 00:03:53,600
A byddwn yn mynd drwy
y math hwn o gyflym,

82
00:03:53,600 --> 00:03:56,640
oherwydd ein bod wedi gwneud hyn yn PHP, felly
Dylai hyn i gyd fod yn eithaf cyfarwydd.

83
00:03:56,640 --> 00:03:59,490
Felly newidynnau yn JavaScript yn
debyg iawn i PHP newidynnau.

84
00:03:59,490 --> 00:04:03,270
Does dim math rhagnodwr, a
pan fyddwch yn cyflwyno amrywiol,

85
00:04:03,270 --> 00:04:05,070
chi o flaen 'i ag y gair allweddol var.

86
00:04:05,070 --> 00:04:07,750
Yn PHP byddem yn gwneud rhywbeth
fel hyn, arwydd doler x.

87
00:04:07,750 --> 00:04:09,950
Dyna sut yr ydym yn dangos
newidyn, ond dim, rydym yn

88
00:04:09,950 --> 00:04:12,060
peidiwch â sôn am y math
y newidyn o gwbl.

89
00:04:12,060 --> 00:04:15,124
Byddem yn dweud rhywbeth fel
doler arwydd x yn hafal 44 yn PHP.

90
00:04:15,124 --> 00:04:17,040
Os byddwn yn gwneud y
un peth yn JavaScript,

91
00:04:17,040 --> 00:04:19,589
byddem yn dweud var x yn hafal 44.

92
00:04:19,589 --> 00:04:22,780
Felly var yn fath o ein ffordd ni
o gyflwyno amrywiol.

93
00:04:22,780 --> 00:04:26,850
Dyna efallai ychydig yn fwy 'n athrylithgar
na dim ond newidyn arwydd ddoler.

94
00:04:26,850 --> 00:04:29,080
>> Unwaith eto, gan nad oes
mathau data, gallem wneud hyn

95
00:04:29,080 --> 00:04:34,490
gydag unrhyw fath ddata, llinynnau,
Byddai unrhyw beth arall i gyd yn var.

96
00:04:34,490 --> 00:04:37,260
Conditionals, pob un o'n
hen ffrindiau o C a PHP

97
00:04:37,260 --> 00:04:41,640
yn dal i fod ar gael, felly mae gennym os,
arall os, arall, newid a cwestiwn

98
00:04:41,640 --> 00:04:42,240
colon marc.

99
00:04:42,240 --> 00:04:45,890
Switsh parhau i fod yn hyblyg gan ei fod yn
Roedd yn PHP, ond mae pob un o'r rhain rydych yn

100
00:04:45,890 --> 00:04:46,930
gyfarwydd â erbyn hyn.

101
00:04:46,930 --> 00:04:49,900
Ac yn yr un modd â dolenni yn cael eu
yr hen ffefrynnau o amser,

102
00:04:49,900 --> 00:04:52,700
wneud ychydig, ac am dal ar gael i ni.

103
00:04:52,700 --> 00:04:55,880
Hynny eisoes rydym yn gwybod llawer o'r
sylfaenol math JavaScript o hanfodion

104
00:04:55,880 --> 00:05:01,800
dim ond yn rhinwedd gael cryn dipyn
gwybodaeth bellach am C a PHP.

105
00:05:01,800 --> 00:05:03,670
>> Beth am swyddogaethau mewn JavaScript?

106
00:05:03,670 --> 00:05:08,199
Wel, yn debyg i PHP pob swyddogaeth yn
a gyflwynwyd gyda'r allweddair swyddogaeth.

107
00:05:08,199 --> 00:05:10,740
Yr ydych yn dweud swyddogaeth, ac yna rydych
dechrau ddiffinio eich swyddogaeth.

108
00:05:10,740 --> 00:05:12,531
Beth sy'n ychydig yn wahanol
am JavaScript,

109
00:05:12,531 --> 00:05:15,700
fodd bynnag, yw y gallu i gael
hyn a elwir yn swyddogaeth dienw.

110
00:05:15,700 --> 00:05:18,880
Felly, gallwch ddiffinio swyddogaethau
sydd heb enw.

111
00:05:18,880 --> 00:05:21,222
Mae hyn yn rhywbeth yr ydym yn
ddim wir wedi ei weld o'r blaen.

112
00:05:21,222 --> 00:05:23,430
Byddwn yn wir yn defnyddio'r cysyniad
o swyddogaeth dienw

113
00:05:23,430 --> 00:05:27,880
ychydig yn ddiweddarach yn y
fideo, gan ei fod yn chi helpu

114
00:05:27,880 --> 00:05:31,530
gwneud ychydig yn fwy o synnwyr yn y cyd-destun
pan fyddwn yn ei weld mewn sefyllfa benodol

115
00:05:31,530 --> 00:05:33,120
fy mod wedi Crafted yma.

116
00:05:33,120 --> 00:05:35,710
Ond gadewch i ni fwrw golwg
ar yr hyn y mae JavaScript syml

117
00:05:35,710 --> 00:05:37,850
Gallai swyddogaeth edrych.

118
00:05:37,850 --> 00:05:40,610
>> Felly, yr wyf wedi mynd yn ei flaen ac
agor fy IDE CS50

119
00:05:40,610 --> 00:05:43,690
ac yr wyf eisoes wedi rhedeg Apache
i ddechrau ar fy rhedeg gweinydd.

120
00:05:43,690 --> 00:05:46,800
Ac yr wyf yn cael y ffeil
agor enw Home.html.

121
00:05:46,800 --> 00:05:48,330
A byddaf chwyddo i mewn ychydig bach yma.

122
00:05:48,330 --> 00:05:52,090
Ac yn y bôn, gallwch weld y
Home.html yn unig yw criw o fotymau.

123
00:05:52,090 --> 00:05:55,291
A dwi'n hawlio ar y brig yma
mai hwn yw'r adran JavaScript

124
00:05:55,291 --> 00:05:55,790
deunyddiau.

125
00:05:55,790 --> 00:05:59,490
Felly mae 'na griw o fotymau yma,
ond beth botymau hyn mewn gwirionedd yn ei wneud?

126
00:05:59,490 --> 00:06:03,662
>> Wel, byddwn yn ben ar at fy IED,
ac yr wyf Home.html wedi agor yma.

127
00:06:03,662 --> 00:06:05,620
Ar y cychwyn cyntaf,
dyma lle rydw i'n cysylltu

128
00:06:05,620 --> 00:06:07,500
ym mhob un fy ffeiliau ffynhonnell JavaScript.

129
00:06:07,500 --> 00:06:08,000
Iawn?

130
00:06:08,000 --> 00:06:12,440
Felly, yr wyf wedi anonymous.js, clock.js,
Im 'yn arfer y priodoledd ffynhonnell

131
00:06:12,440 --> 00:06:14,440
y tag sgript i gysylltu yn y ffeil.

132
00:06:14,440 --> 00:06:18,660
Felly, nid wyf wedi ysgrifennu unrhyw
JavaScript uniongyrchol i mewn y ffeil,

133
00:06:18,660 --> 00:06:21,790
ond rwyf wedi tynnu yn yr holl
JavaScript Rydw i wedi ysgrifennu ar wahân.

134
00:06:21,790 --> 00:06:24,540
Ac os ydym yn sgroliwch i lawr yma, mae hyn yn
Dylai gyd yn edrych braidd yn gyfarwydd

135
00:06:24,540 --> 00:06:27,090
gydag ychydig o gystrawen newydd.

136
00:06:27,090 --> 00:06:32,655
Gennym yma tag pennawd ar gyfer
swyddogaethau ac yna botwm.

137
00:06:32,655 --> 00:06:35,530
Mae gen i fewnbwn sy'n botwm fath,
ac i bob golwg pan fyddaf yn clicio arno,

138
00:06:35,530 --> 00:06:38,130
Rydw i'n mynd i alw rhai
swyddogaeth dyddiad effro.

139
00:06:38,130 --> 00:06:41,792
A dyma sut y gallwn fath o cymysgu i fyny
ychydig o JavaScript a html.

140
00:06:41,792 --> 00:06:44,500
Maent mewn gwirionedd yn chwarae 'n bert' n glws
gyda'i gilydd, ac yn y blaen yn ôl pob golwg pan

141
00:06:44,500 --> 00:06:48,730
Yr wyf yn clicio ar y botwm hwn, dw i'n mynd
i alw ryw ddyddiad yn effro swyddogaeth.

142
00:06:48,730 --> 00:06:53,660
Ac yn yr un modd rhaid i mi diffiniedig ymddygiadau
ar gyfer pob un o'r botymau eraill sy'n

143
00:06:53,660 --> 00:06:56,440
ar y dudalen home.html,
y byddwn yn cadw dychwelyd

144
00:06:56,440 --> 00:06:59,172
i yn ystod y cwrs o'r fideo.

145
00:06:59,172 --> 00:07:00,880
Ond gadewch i ni fynd yn ôl i fyny
yma ac edrych

146
00:07:00,880 --> 00:07:03,850
ar clock.js, sef y
Ffeil JavaScript i mi

147
00:07:03,850 --> 00:07:07,370
Ysgrifennodd bod gan y swyddogaeth gyntaf
rydym yn mynd i gymryd golwg ar.

148
00:07:07,370 --> 00:07:11,630
Fel y gwelwch, yr wyf yn dechrau fy JavaScript
weithredu gyda'r swyddogaeth gair allweddol,

149
00:07:11,630 --> 00:07:14,560
ac rydw i wedi rhoi yr un yma yn
enw, fe'i gelwir dyddiad effro.

150
00:07:14,560 --> 00:07:18,710
Y tu mewn o yno, yr wyf yn ôl pob golwg yn creu
newidyn lleol newydd o'r enw dyddiad cyfredol.

151
00:07:18,710 --> 00:07:21,500
Ac yr wyf i'n mynd i aseinio
yn hafal i'r dyddiad newydd.

152
00:07:21,500 --> 00:07:24,430
A gallem fynd i lawer o
manylion ynghylch yr hyn mae hyd yn hyn,

153
00:07:24,430 --> 00:07:27,060
ac yn wir JavaScript mor
fawr nad y gallwn

154
00:07:27,060 --> 00:07:28,330
cwmpasu popeth mewn un fideo.

155
00:07:28,330 --> 00:07:32,220
Ond digon yw dweud, mae hyn yn mynd
i ddychwelyd i mi eitem ddata sy'n

156
00:07:32,220 --> 00:07:35,470
crisialu y dyddiad a'r amser ar hyn o bryd.

157
00:07:35,470 --> 00:07:39,100
Im 'yn storio hynny mewn newidyn fy mod yn
yn ôl pob golwg yn mynd i roi gwybod hyd yn hyn ar hyn o bryd.

158
00:07:39,100 --> 00:07:41,300
>> Wel, beth mae effro
Dyddiad yn edrych ar hyn o bryd yn hoffi?

159
00:07:41,300 --> 00:07:46,460
Gadewch i ni edrych ar y ffeil ei hun
yn ôl drosodd yn y ffenestr porwr.

160
00:07:46,460 --> 00:07:49,551
Felly unwaith eto, mae hyn yn y botwm i mi
wedi clymu i, mae hyn yn swyddogaeth a enwir.

161
00:07:49,551 --> 00:07:51,800
Ac yr wyf yn clicio yn y fan a'r
edrychwch beth wnaeth hynny, mae'n rhybuddio.

162
00:07:51,800 --> 00:07:56,140
Mae'n popped i fyny y math hwn o flwch dweud
mi fod yr amser presennol yw, mae'n debyg

163
00:07:56,140 --> 00:07:59,370
'i' 4 Tachwedd am
10:43:43 yn y bore.

164
00:07:59,370 --> 00:08:02,345
Ac os wyf yn clicio arno eto, yn awr
mae'n ychydig eiliadau yn ddiweddarach, dde?

165
00:08:02,345 --> 00:08:03,720
Felly dyna i gyd swyddogaeth hon yn ei wneud.

166
00:08:03,720 --> 00:08:07,670
Pan fyddaf yn clicio y botwm hwn, mae'n
pops i fyny neges effro i mi.

167
00:08:07,670 --> 00:08:13,806

168
00:08:13,806 --> 00:08:15,690
Felly nid oes mewn gwirionedd
gormod i'w swyddogaethau

169
00:08:15,690 --> 00:08:19,110
mae hynny'n wahanol i PHP,
dim ond ychydig o gystrawen newydd

170
00:08:19,110 --> 00:08:22,500
sy'n dod â gweithio gyda JavaScript.

171
00:08:22,500 --> 00:08:24,650
>> Araeau yn JavaScript yn
eithaf syml.

172
00:08:24,650 --> 00:08:27,200
I ddatgan array, byddwch yn defnyddio
gystrawen cromfachau sgwâr

173
00:08:27,200 --> 00:08:30,090
ein bod yn gyfarwydd â o PHP.

174
00:08:30,090 --> 00:08:33,432
Ac yn debyg i PHP, rydym yn
Gall hefyd gymysgu mathau data.

175
00:08:33,432 --> 00:08:35,140
Felly amrywiaeth hwn, y ddau
araeau hyn fyddai

176
00:08:35,140 --> 00:08:36,960
fod yn JavaScript hollol ddilys.

177
00:08:36,960 --> 00:08:42,500
Un dyna i gyd cyfanrifau, ac yn un sy'n
cael ei gymysgu i fyny gwahanol fathau o ddata.

178
00:08:42,500 --> 00:08:45,020
>> Beth sy'n rhywbeth gwahanol iawn
yn JavaScript, er bod?

179
00:08:45,020 --> 00:08:47,020
Dyna y syniad o gwrthrych.

180
00:08:47,020 --> 00:08:50,240
Felly, efallai eich bod wedi clywed am
wrthwynebu rhaglennu oriented.

181
00:08:50,240 --> 00:08:53,370
Nid ydym yn gwneud llawer ohono yn CS50,
ond byddwn yn gwneud ychydig bach ohono

182
00:08:53,370 --> 00:08:55,670
yma yng nghyd-destun JavaScript.

183
00:08:55,670 --> 00:08:59,100
Nawr JavaScript y gallu i
yn ymddwyn fel rhaglennu gwrthrych oriented

184
00:08:59,100 --> 00:09:02,615
iaith, ond nid yw'n ei hun
yn gyfan gwbl gwrthrych oriented

185
00:09:02,615 --> 00:09:03,490
iaith raglennu.

186
00:09:03,490 --> 00:09:05,281
Ac mae hyn eto yn dod
yn ôl i pam y dywedais, mae'n

187
00:09:05,281 --> 00:09:10,610
Gall fod yn anodd iawn i ddysgu
JavaScript fel eich rhaglennu cyntaf

188
00:09:10,610 --> 00:09:13,890
iaith, gan nad yw'n gwneud
'n sylweddol yn addas patrwm penodol.

189
00:09:13,890 --> 00:09:16,430
>> C ar y llaw arall yn
iaith raglennu swyddogaethol.

190
00:09:16,430 --> 00:09:22,270
Os ydym am, swyddogaethau
math o dyn bos mawr, dde?

191
00:09:22,270 --> 00:09:24,410
Maent yn pennu beth
digwydd popeth arall.

192
00:09:24,410 --> 00:09:26,600
Rydym yn awyddus i newid newidynnau,
rydym yn galw swyddogaethau.

193
00:09:26,600 --> 00:09:28,220
Rydym yn gwneud pethau i swyddogaethau.

194
00:09:28,220 --> 00:09:31,250
Gwrthrychau yn lle hynny, mewn
wrthwynebu iaith oriented,

195
00:09:31,250 --> 00:09:35,937
gwrthrychau fath o ddod yn y seren a
swyddogaethau yn dod yn fath o uwchradd.

196
00:09:35,937 --> 00:09:38,270
Ond beth yw gwrthrych, beth
yn syniad hwn o wrthrych?

197
00:09:38,270 --> 00:09:40,880
Wel, os yw'n helpu, yn meddwl
am y peth yn y fath gyntaf

198
00:09:40,880 --> 00:09:44,540
o fel strwythur C neu struct
ein bod wedi dysgu am o'r blaen.

199
00:09:44,540 --> 00:09:47,430
Mewn C, strwythur yn cynnwys
nifer o feysydd,

200
00:09:47,430 --> 00:09:51,174
ac efallai rydym yn awr efallai yn dechrau
ffoniwch y meysydd hyn eiddo.

201
00:09:51,174 --> 00:09:53,590
Ond mae'r eiddo byth yn
sefyll ar eu pen eu hunain, dde?

202
00:09:53,590 --> 00:09:56,410
Os byddaf yn diffinio strwythur ar gyfer car
fel hyn gyda'r canlynol dau

203
00:09:56,410 --> 00:10:00,750
caeau neu eiddo, un yn
cyfanrif ar gyfer y flwyddyn y car

204
00:10:00,750 --> 00:10:04,290
ac yn gymeriad arall 10
llinyn ar gyfer y model y car,

205
00:10:04,290 --> 00:10:07,150
Gallaf ddweud rhywbeth fel hyn,
Gallaf ddatgan newidyn newydd

206
00:10:07,150 --> 00:10:10,080
o'r math Herbie car struct.

207
00:10:10,080 --> 00:10:13,730
Ac yna gallaf ddweud rhywbeth
fel herbie.year hafal 1,963,

208
00:10:13,730 --> 00:10:15,850
a herbie.model hafal Chwilen.

209
00:10:15,850 --> 00:10:17,000
Mae hynny'n iawn.

210
00:10:17,000 --> 00:10:19,680
Im 'yn arfer y caeau yn y
cyd-destun y strwythur,

211
00:10:19,680 --> 00:10:22,290
ond yr wyf byth gallai jyst
dweud rhywbeth fel hyn.

212
00:10:22,290 --> 00:10:22,790
Iawn?

213
00:10:22,790 --> 00:10:26,836
Nid wyf yn gallu defnyddio'r enw maes
annibynnol ar y strwythur.

214
00:10:26,836 --> 00:10:28,210
Mae'n fath o beth sylfaenol.

215
00:10:28,210 --> 00:10:32,990
>> Felly caeau cael
sylfaenol i strwythurau C

216
00:10:32,990 --> 00:10:39,050
yn debyg iawn i eiddo yn
sylfaenol i wrthrychau JavaScript.

217
00:10:39,050 --> 00:10:42,080
Ond beth sy'n eu gwneud
arbennig o ddiddorol

218
00:10:42,080 --> 00:10:46,230
yw y gall gwrthrychau hefyd gael yr hyn
yn cael eu galw'n ddulliau, sydd yn wirioneddol

219
00:10:46,230 --> 00:10:50,730
ond gair ffansi ar gyfer swyddogaethau sy'n
yn gynhenid ​​i'r gwrthrych yn ogystal.

220
00:10:50,730 --> 00:10:55,340
Felly mae'n un o swyddogaethau y gall dim ond
Gelwir yng nghyd-destun gwrthrych.

221
00:10:55,340 --> 00:10:59,200
Dim ond gwrthrych sydd wedi diffinio'n
swyddogaeth hon tu mewn ei,

222
00:10:59,200 --> 00:11:02,020
os ydych yn meddwl am
struct, y swyddogaeth

223
00:11:02,020 --> 00:11:05,720
Diffinnir y tu rhai sy'n diffinio
bresys cyrliog y strwythur.

224
00:11:05,720 --> 00:11:07,980
Felly dim ond yn golygu rhywbeth
i'r strwythur.

225
00:11:07,980 --> 00:11:10,960
A dyna fath o beth rydym yn ei wneud
yma gyda gwrthrychau a dulliau.

226
00:11:10,960 --> 00:11:13,580
Mae'n bôn fel ein bod yn
ddiffinio swyddogaeth sy'n

227
00:11:13,580 --> 00:11:16,670
yn unig yn gwneud synnwyr ar
gwrthrych penodol, ac felly rydym yn

228
00:11:16,670 --> 00:11:19,440
yn galw bod dull y gwrthrych.

229
00:11:19,440 --> 00:11:23,180
A gallwn byth yn galw hynny
swyddogaeth annibynnol ar y gwrthrych,

230
00:11:23,180 --> 00:11:29,260
yn union fel na allwn ddweud blwyddyn neu fodel
annibynnol ar y struct yn C.

231
00:11:29,260 --> 00:11:32,300
>> Felly raglennu swyddogaethol
patrymau edrych rhywbeth fel hyn.

232
00:11:32,300 --> 00:11:35,450
Swyddogaeth ac yna pan fyddwch yn trosglwyddo
yn y gwrthrych fel paramedr.

233
00:11:35,450 --> 00:11:38,650
Mewn rhaglennu gwrthrych oriented
ieithoedd, mae hyn yn fath o yn cael

234
00:11:38,650 --> 00:11:43,464
flipped, a byddem yn meddwl am
mae'n hoffi hyn, object.function.

235
00:11:43,464 --> 00:11:45,380
Felly, mae'n fath o hynny dot
gweithredwr eto awgrymu

236
00:11:45,380 --> 00:11:49,540
ei fod yn rhyw fath o eiddo
neu briodoledd y gwrthrych ei hun.

237
00:11:49,540 --> 00:11:53,240
Ond mae hyn yn beth gwrthrych
iaith raglennu oriented

238
00:11:53,240 --> 00:11:57,150
Efallai ei wneud i wneud swyddogaeth
yn galw ar ddull, unwaith eto, a oedd yn

239
00:11:57,150 --> 00:12:00,260
yn unig yw gair arbennig ar gyfer swyddogaeth
mae hynny'n gynhenid ​​i wrthrych.

240
00:12:00,260 --> 00:12:03,440
Dyma beth sy'n
Efallai y gystrawen yn edrych fel.

241
00:12:03,440 --> 00:12:09,360
Ac felly byddwn yn dechrau gweld rhai o
hyn yng nghyd-destun JavaScript.

242
00:12:09,360 --> 00:12:12,470
>> Gallwch hefyd feddwl am wrthrych
fath o fel amrywiaeth cysylltiadol,

243
00:12:12,470 --> 00:12:14,160
yr ydym yn gyfarwydd â o PHP.

244
00:12:14,160 --> 00:12:17,720
Cofiwch amrywiaeth cysylltiadol yn caniatáu
ni gael barau gwerth allweddol, yn lle hynny

245
00:12:17,720 --> 00:12:23,040
o gael mynegeion 0, un, dau, tri,
ac yn y blaen fel rydym yn ei defnyddio i o C

246
00:12:23,040 --> 00:12:23,940
araeau.

247
00:12:23,940 --> 00:12:27,472
Gall araeau cysylltiadol map
eiriau, megis yn y fideo PHP,

248
00:12:27,472 --> 00:12:29,180
oeddem yn sôn am
topins o pizzas.

249
00:12:29,180 --> 00:12:31,180
Ac felly roedd gennym amrywiaeth
Gelwir pizzas, ac yr ydym yn

250
00:12:31,180 --> 00:12:36,670
Roedd caws yn allweddol ac 8.99 $ oedd y
gwerth, ac yna pepperoni yn allweddol,

251
00:12:36,670 --> 00:12:39,190
$ 9.99 Roedd yn werth, ac yn y blaen.

252
00:12:39,190 --> 00:12:43,300
Ac felly gallwn hefyd feddwl am
gwrthwynebu fath o debyg i cysylltiadol

253
00:12:43,300 --> 00:12:43,840
arae.

254
00:12:43,840 --> 00:12:47,020
Ac felly cystrawen hyn yma
Byddai creu gwrthrych newydd

255
00:12:47,020 --> 00:12:50,950
Gelwir Herbie gyda dau
priodweddau tu mewn iddo.

256
00:12:50,950 --> 00:12:57,310
Flwyddyn, sy'n cael ei neilltuo gwerth 1963
a model, sy'n cael ei neilltuo i'r llinyn

257
00:12:57,310 --> 00:12:58,140
Chwilen.

258
00:12:58,140 --> 00:13:01,770
>> Ac yn sylwi yma nad Im 'yn arfer
dyfynodau sengl yn JavaScript.

259
00:13:01,770 --> 00:13:05,570
Gallwch ddefnyddio dyfynodau sengl neu ddwbl
pan ydych yn sôn amdano llinynnau.

260
00:13:05,570 --> 00:13:07,772
'I' jyst yn gonfensiynol
yn wir bod y rhan fwyaf o amseroedd

261
00:13:07,772 --> 00:13:10,230
pan fyddwch yn ysgrifennu JavaScript,
'ch jyst yn defnyddio dyfynodau sengl.

262
00:13:10,230 --> 00:13:15,050
Ond allwn i ddefnyddio dyfynodau dwbl yma, ac
a fyddai'n cael ei berffaith iawn hefyd.

263
00:13:15,050 --> 00:13:17,470
>> Felly cofiwch sut yn
PHP oedd gennym syniad hwn

264
00:13:17,470 --> 00:13:22,730
o ar gyfer pob dolen a fyddai'n caniatáu i ni
i ailadrodd dros yr holl o werth allweddol

265
00:13:22,730 --> 00:13:25,270
parau o cysylltiadol
array, oherwydd ein

266
00:13:25,270 --> 00:13:29,050
Nid oedd gan y gallu hwn i ailadrodd
drwy 0, un, dau, tri, pedwar,

267
00:13:29,050 --> 00:13:30,710
ac yn y blaen?

268
00:13:30,710 --> 00:13:35,010
Mae JavaScript rhywbeth yn debyg iawn,
ond nid yw'n cael ei alw'n ar gyfer pob dolen,

269
00:13:35,010 --> 00:13:38,960
fe'i gelwir yn ei gyfer yn dolenni.

270
00:13:38,960 --> 00:13:42,890
Felly, os wyf yn dweud i mi fel
hyn, er allwedd var mewn gwrthrych,

271
00:13:42,890 --> 00:13:48,670
dyna fath o debyg i ddweud
ar gyfer pob rhywbeth fel rhywbeth.

272
00:13:48,670 --> 00:13:53,850
Ond yr holl Rydw i'n ei wneud yma yn ailadrodd
drwy bob un o'r allweddi fy gwrthrych.

273
00:13:53,850 --> 00:13:56,070
Ac tu mewn i'r cyrliog
bresys yno, fyddwn i

274
00:13:56,070 --> 00:14:03,410
defnyddio gwrthrych cromfachau sgwâr allweddol i gyfeirio
i werth yn y lleoliad hwnnw allweddol.

275
00:14:03,410 --> 00:14:05,400
>> Fel arall, mae '
hyd yn oed dull arall.

276
00:14:05,400 --> 00:14:10,880
Os Fi jyst yn unig yn gofalu am y
gwerthoedd, gallaf ddweud yn allweddol o wrthrych,

277
00:14:10,880 --> 00:14:12,360
a dim ond yn defnyddio allwedd y tu mewn.

278
00:14:12,360 --> 00:14:17,240
Felly, er allwedd var mewn gwrthrych, yr wyf wedi
i ddefnyddio cromfachau sgwâr gwrthrych

279
00:14:17,240 --> 00:14:19,340
allweddol y tu mewn i'r ddolen.

280
00:14:19,340 --> 00:14:24,580
Ar gyfer allwedd var o gwrthrych, gallaf
dim ond yn defnyddio'r allwedd y tu mewn i'r ddolen,

281
00:14:24,580 --> 00:14:29,040
am fy mod i'n jyst yn benodol
siarad am y gwerthoedd yno.

282
00:14:29,040 --> 00:14:32,630
>> Felly gadewch efallai i ni gymryd
edrych ar y gwahaniaeth

283
00:14:32,630 --> 00:14:35,670
dim ond i ddangos i chi yn gyflym
y gwahaniaeth rhwng pedwar

284
00:14:35,670 --> 00:14:40,730
i mewn ac am o gyda penodol iawn
array, sydd gennym yma, array wythnos.

285
00:14:40,730 --> 00:14:43,616
Felly, rhaid i mi ddod o hyd i amrywiaeth newydd
fy mod lenwi â saith llinynnau,

286
00:14:43,616 --> 00:14:46,240
Dydd Llun, Mawrth, Mercher,
Dydd Iau, Dydd Gwener, Dydd Sadwrn, dydd Sul.

287
00:14:46,240 --> 00:14:50,530
Ac yr wyf am ailadrodd yn awr
drwy amrywiaeth hwn,

288
00:14:50,530 --> 00:14:53,090
argraffu gwybodaeth benodol.

289
00:14:53,090 --> 00:14:58,780
Os byddaf yn defnyddio ei gyfer yn ddolen
i argraffu gwybodaeth,

290
00:14:58,780 --> 00:15:00,710
beth ydych chi'n meddwl fy mod i'n mynd i gael?

291
00:15:00,710 --> 00:15:01,710
Wel, gadewch i ni edrych.

292
00:15:01,710 --> 00:15:05,300
Ac cyn i ni neidio dros
i ffenestr fy porwr,

293
00:15:05,300 --> 00:15:08,090
jyst yn gwybod bod
console.log yn fath o un

294
00:15:08,090 --> 00:15:10,630
ffordd o wneud yn F print yn JavaScript.

295
00:15:10,630 --> 00:15:12,040
Ond beth yw'r consol?

296
00:15:12,040 --> 00:15:14,940
Wel, dyna beth rydym yn mynd
i fynd yn edrych ar hyn o bryd.

297
00:15:14,940 --> 00:15:16,850
>> Iawn, felly rydym yn ôl yma
mewn ffenestr fy porwr,

298
00:15:16,850 --> 00:15:19,410
ac yr wyf i'n mynd i agor
i fyny fy offer datblygwr.

299
00:15:19,410 --> 00:15:22,290
Unwaith eto, Im 'jyst yn taro F12
i agor offer datblygwr.

300
00:15:22,290 --> 00:15:25,670
Ac yn sylwi bod yma yn y
top Rwyf wedi dewis consol.

301
00:15:25,670 --> 00:15:28,480
Felly, mae hyn yn syniad
o consol datblygwr,

302
00:15:28,480 --> 00:15:30,500
a bydd yn ein galluogi i
argraffu gwybodaeth allan,

303
00:15:30,500 --> 00:15:33,000
fath o fel y derfynell, ond
fel y byddwch yn gweld ychydig yn ddiweddarach,

304
00:15:33,000 --> 00:15:37,720
gallwn hefyd deipio gwybodaeth mewn
i ryngweithio â'n tudalen ar y we.

305
00:15:37,720 --> 00:15:42,320
Rydw i'n mynd i chwyddo i mewn ychydig yma,
ac rwy'n gonna yn awr cliciwch ar ei gyfer yn y prawf.

306
00:15:42,320 --> 00:15:45,230
A phedwar yn test-- Dydw i ddim yn gonna
yn dangos i chi y cod ar gyfer hynny nawr,

307
00:15:45,230 --> 00:15:47,479
ond byddwch yn ei gael os ydych yn
llwytho i lawr y cod ffynhonnell sy'n

308
00:15:47,479 --> 00:15:50,380
yn gysylltiedig â video-- hwn
yn unig yw hynny ar ei gyfer yn ddolen

309
00:15:50,380 --> 00:15:52,610
ein bod yn gweld dim ond
eiliad yn ôl ar y sleid.

310
00:15:52,610 --> 00:15:54,810
>> Felly rwy'n cliciwch gonna fod
botwm, a dros yma,

311
00:15:54,810 --> 00:15:58,440
dyma beth sydd wedi ei argraffu yn y
consol, 0, un, dau, tri, pedwar, pump,

312
00:15:58,440 --> 00:15:58,940
chwech.

313
00:15:58,940 --> 00:16:02,490
Doeddwn i ddim yn argraffu'r wybodaeth
y tu mewn lleoliadau arae hynny,

314
00:16:02,490 --> 00:16:05,180
oherwydd fy mod yn defnyddio ar ei gyfer yn ddolen.

315
00:16:05,180 --> 00:16:10,670
Ac y tu mewn i'r corff y ddolen, yr wyf yn
dim ond argraffu allwedd ni wrthwynebu allweddol.

316
00:16:10,670 --> 00:16:18,600
Ond os wyf yn awr yn glir fy consol, ac yr wyf yn
newid i am y prawf, a phedwar o brawf

317
00:16:18,600 --> 00:16:22,500
Yr wyf yn dweud fy mod defnyddio ar gyfer y dolen
yn lle hynny ac argraffu allweddol,

318
00:16:22,500 --> 00:16:28,079
os wyf yn clicio hynny, nawr rwy'n cael y
elfennau gwirioneddol tu mewn fy gwrthrych

319
00:16:28,079 --> 00:16:29,120
neu mae fy amrywiaeth yn yr achos hwn.

320
00:16:29,120 --> 00:16:31,760
Mae fy casgliad o ddyddiau yr wythnos.

321
00:16:31,760 --> 00:16:33,480
Rwy'n hargraffu Dydd Llun,
Dydd Mawrth, dydd Mercher.

322
00:16:33,480 --> 00:16:36,930
Felly dyna yw'r gwahaniaeth rhwng
a am yn ddolen, sy'n argraffu allan

323
00:16:36,930 --> 00:16:43,410
dim ond y allweddi os ydych yn unig yn defnyddio allwedd
tu mewn i'r corff y ddolen,

324
00:16:43,410 --> 00:16:46,850
ac mae am o ddolen, a oedd yn brintiau
nodi'r gwerthoedd os ydych yn defnyddio yn unig

325
00:16:46,850 --> 00:16:48,870
allweddol y tu mewn i'r corff y ddolen.

326
00:16:48,870 --> 00:16:52,380
>> Mae pob hawl, sut rydym yn awr yn dechrau
concatenate llinynnau ac efallai cymysgu i fyny

327
00:16:52,380 --> 00:16:57,220
rhai newidynnau gyda rhyngosod
fel ein bod yn gallu ei wneud yn PHP?

328
00:16:57,220 --> 00:16:59,410
Wel, rydym yn eithaf cyfarwydd
gyda hyn o PHP.

329
00:16:59,410 --> 00:17:04,109
Dyma sut y byddem yn ei wneud gan ddefnyddio'r
dot gweithredwr concatenate llinynnau.

330
00:17:04,109 --> 00:17:06,260
Yn JavaScript, fodd bynnag,
rydym mewn gwirionedd yn defnyddio rhywbeth

331
00:17:06,260 --> 00:17:09,290
Gelwir y gweithredydd a mwy, a oedd yn
yn efallai hyd yn oed ychydig bach mwy

332
00:17:09,290 --> 00:17:10,470
sythweledol, dde?

333
00:17:10,470 --> 00:17:12,609
Rydym yn ychwanegu bagad
o llinynnau at ei gilydd.

334
00:17:12,609 --> 00:17:14,520
Felly gadewch i ni mynd yn ôl
drosodd a gweld beth mae hyn

335
00:17:14,520 --> 00:17:18,693
Bydd argraffu os ydym yn ceisio ei argraffu
yr holl wybodaeth mewn amrywiaeth wythnos.

336
00:17:18,693 --> 00:17:20,859
Mae pob hawl, felly o dan fan hyn
dan concatenation llinyn,

337
00:17:20,859 --> 00:17:24,822
Mae gen i ddau ddewis, adeiladu llinyn
V1 V2 ac yna adeiladu llinyn.

338
00:17:24,822 --> 00:17:26,530
A byddwn yn gweld pam ein bod
Mae angen i V2 mewn eiliad.

339
00:17:26,530 --> 00:17:28,610
Ond dw i'n gonna cliciwch ar
V1 adeiladu llinyn, a oedd yn

340
00:17:28,610 --> 00:17:30,360
yw'r cod roeddem
dim ond yn edrych ar,

341
00:17:30,360 --> 00:17:32,980
y console.log gyda phob un o'r pwyntiau cadarnhaol.

342
00:17:32,980 --> 00:17:35,910
Gadewch i ni weld os yw hyn printiau
yr hyn yr ydym yn ei ddisgwyl.

343
00:17:35,910 --> 00:17:39,939
>> Dydd Llun Rhif diwrnod 01 yr ​​wythnos yw,
Dydd Mawrth Rhif diwrnod 11 yr wythnos yw.

344
00:17:39,939 --> 00:17:41,730
Wel, yr hyn oeddwn yn ceisio
i'w wneud nad oedd yn cael

345
00:17:41,730 --> 00:17:46,280
iddo i'w argraffu Dydd Llun Rhif ddydd yn
un, dydd Mawrth Rhif ddiwrnod yw.

346
00:17:46,280 --> 00:17:50,140
Ond mae'n ymddangos fel fy mod
bob amser yn argraffu un.

347
00:17:50,140 --> 00:17:51,260
Wel, pam hynny?

348
00:17:51,260 --> 00:17:55,600
Wel, mae'n troi allan, yn cymryd golwg arall
heb fawr snippet hon o god yma.

349
00:17:55,600 --> 00:18:00,160
Sylwch ein bod yn defnyddio'r plws
gweithredwr mewn dau gyd-destun gwahanol.

350
00:18:00,160 --> 00:18:03,221
>> Ac felly dyma ble efallai pethau
ein bod ni wedi bod yn ei ddweud math o,

351
00:18:03,221 --> 00:18:03,970
oh, mae mor wych.

352
00:18:03,970 --> 00:18:05,910
Nid ydym yn delio â mathau data anymore.

353
00:18:05,910 --> 00:18:08,220
Ond dyma lle y ffaith
ein bod yn colli mathau data

354
00:18:08,220 --> 00:18:10,960
Gall mewn gwirionedd fod yn dipyn
o broblem i ni.

355
00:18:10,960 --> 00:18:16,260
Nawr bod y gweithredwr a mwy yn cael ei ddefnyddio i
concatenate llinynnau ac ychwanegu rhifau

356
00:18:16,260 --> 00:18:19,550
gyda'i gilydd, JavaScript wedi
i wneud ei amcan gorau

357
00:18:19,550 --> 00:18:22,030
o ran yr hyn yr wyf am ei wneud i mi.

358
00:18:22,030 --> 00:18:23,900
Ac yn yr achos hwn, mae'n dyfalu anghywir.

359
00:18:23,900 --> 00:18:29,340
Mae'n diwrnod yn unig concatenated, a fyddai'n
0, un, dau, tri, pedwar, pump, neu chwech,

360
00:18:29,340 --> 00:18:32,060
ac yna 'i jyst concatenated
hynny ac yna concatenated un.

361
00:18:32,060 --> 00:18:35,020
Nid oedd mewn gwirionedd hychwanegu at ei gilydd.

362
00:18:35,020 --> 00:18:37,320
Ac felly yr ieithoedd hyn,
PHP a JavaScript,

363
00:18:37,320 --> 00:18:39,196
hynny crynodebau i ffwrdd
syniad hwn o fathau,

364
00:18:39,196 --> 00:18:40,820
Nid oes rhaid i chi ddelio ag ef anymore.

365
00:18:40,820 --> 00:18:43,600
Maent yn dal i gael y mathau o dan y cwfl.

366
00:18:43,600 --> 00:18:46,780
Ac rydym yn gallu, mewn sefyllfaoedd
fel hyn, trosoledd ffaith

367
00:18:46,780 --> 00:18:49,240
drwy ddweud rhywbeth
fel efallai hwn, sydd

368
00:18:49,240 --> 00:18:53,210
yn dweud JavaScript, gan y
ffordd, yn trin hyn fel cyfanrif,

369
00:18:53,210 --> 00:18:57,100
peidiwch ei drin fel llinyn, hyd yn oed
er ein bod ni'n cymysgu gyda'i gilydd llinynnau

370
00:18:57,100 --> 00:18:58,940
a chyfanrifau yma.

371
00:18:58,940 --> 00:19:02,204
>> Dim ond un o'r pethau hynny
ei bod yn ymddangos mor fawr yn y cyd-destun

372
00:19:02,204 --> 00:19:04,120
nad oes raid i ni
ddelio â mathau anymore,

373
00:19:04,120 --> 00:19:05,828
ond weithiau wnewch chi helpu
rhedeg i mewn i sefyllfa

374
00:19:05,828 --> 00:19:09,110
yn union fel hyn lle y ffaith bod
nad oes gennych reolaeth dros fathau

375
00:19:09,110 --> 00:19:11,220
Gall backfire arnoch chi
os nad ydych yn ofalus.

376
00:19:11,220 --> 00:19:18,285
Ac felly os ydym yn pop yn ôl dros i IDE, rwy'n
mynd i glirio allan fy consol eto,

377
00:19:18,285 --> 00:19:20,660
ac yr wyf i'n mynd i glicio llinyn
Fersiwn adeilad dau, a oedd yn

378
00:19:20,660 --> 00:19:23,052
lle yr wyf yn defnyddio swyddogaeth honno int dosrannu.

379
00:19:23,052 --> 00:19:25,260
Nawr mae'n argraffu
Gwybodaeth fy mod i'n disgwyl.

380
00:19:25,260 --> 00:19:29,330
Dydd Llun un rhif dydd, dydd Mawrth
Rhif ail ddiwrnod, ac yn y blaen yn.

381
00:19:29,330 --> 00:19:31,170
>> Felly, gadewch i ni siarad am swyddogaethau eto.

382
00:19:31,170 --> 00:19:34,790
Addewais y byddem yn siarad am dienw
swyddogaethau, ac yn awr y cyd-destun ar gyfer hynny

383
00:19:34,790 --> 00:19:36,360
wedi cyrraedd o'r diwedd.

384
00:19:36,360 --> 00:19:39,980
Felly, cyn i ni wneud hynny, gadewch i ni siarad eto
am araeau am ddim ond eiliad.

385
00:19:39,980 --> 00:19:42,120
Felly araeau yn arbennig
achos o wrthrych.

386
00:19:42,120 --> 00:19:45,180
Yn wir, mae popeth yn
JavaScript mewn gwirionedd gwrthrych.

387
00:19:45,180 --> 00:19:47,190
Felly swyddogaethau yn
achos arbennig o wrthrych,

388
00:19:47,190 --> 00:19:49,770
gyfanrifau yn arbennig
achos o wrthrych,

389
00:19:49,770 --> 00:19:52,152
ond araeau penodol
gennym nifer o ddulliau.

390
00:19:52,152 --> 00:19:55,110
Cofiwch am eu bod gwrthrychau,
gallant gael priodweddau a dulliau.

391
00:19:55,110 --> 00:19:58,600
Mae ganddynt nifer o ddulliau sy'n
gellir eu cymhwyso i amcanion hynny.

392
00:19:58,600 --> 00:20:01,197
Mae 'na dull o'r enw
maint, array.size,

393
00:20:01,197 --> 00:20:03,030
a fydd yn dychwelyd i
chi fel y byddech yn ei ddisgwyl

394
00:20:03,030 --> 00:20:05,120
nifer yr elfennau yn eich casgliad.

395
00:20:05,120 --> 00:20:08,480
array.pop, fath o fel
ein syniad o neidio i ffwrdd

396
00:20:08,480 --> 00:20:11,110
o pentwr, os ydych yn cofio
oddi wrth ein fideo staciau,

397
00:20:11,110 --> 00:20:13,810
cael gwared ar yr elfen olaf o'r rhesi.

398
00:20:13,810 --> 00:20:17,110
array.push yn ychwanegu elfen newydd
hyd at ddiwedd arae.

399
00:20:17,110 --> 00:20:20,910
array.shift yn fath o
fel DQ, mae'n splices allan

400
00:20:20,910 --> 00:20:23,610
yr elfen gyntaf iawn o amrywiaeth.

401
00:20:23,610 --> 00:20:27,549
>> Ond mae hefyd yn arbennig arall
dull o amrywiaeth o'r enw map.

402
00:20:27,549 --> 00:20:29,340
Ac mae hyn yn fath o
gysyniad diddorol.

403
00:20:29,340 --> 00:20:30,930
Felly beth yw'r syniad o fap?

404
00:20:30,930 --> 00:20:33,880
Byddwch mewn gwirionedd yn gweld hyn
mewn nifer o ieithoedd eraill,

405
00:20:33,880 --> 00:20:38,550
ac nid ydym yn sôn am
math o cartograffwyr map yma,

406
00:20:38,550 --> 00:20:41,480
rydym yn sôn am swyddogaeth mapio.

407
00:20:41,480 --> 00:20:44,110
Yng nghyd-destun ein bod
sôn amdano yma, map

408
00:20:44,110 --> 00:20:47,950
yn llawdriniaeth ydym arbennig
Gellir perfformio ar amrywiaeth

409
00:20:47,950 --> 00:20:51,630
i wneud cais swyddogaeth benodol
i bob elfen o'r rhesi.

410
00:20:51,630 --> 00:20:55,190
ac felly byddem yn dweud yn
yr achos hwn, efallai array.map,

411
00:20:55,190 --> 00:21:00,330
ac tu mewn iddo, rydym yn pasio
i mewn i map yn swyddogaeth yr ydym am

412
00:21:00,330 --> 00:21:02,430
i'w cymhwyso i bob elfen unigol.

413
00:21:02,430 --> 00:21:07,299
Felly mae'n fath o debyg i ddefnyddio
dolen i ailadrodd dros bob elfen

414
00:21:07,299 --> 00:21:09,340
ac yn cymhwyso penodol
gweithredu i bob elfen,

415
00:21:09,340 --> 00:21:14,830
dim ond JavaScript wedi hyn a adeiladwyd yn
syniad o fapio y gellir eu cymhwyso.

416
00:21:14,830 --> 00:21:19,700
Ac mae hyn yn cyd-destun gwych i
siarad am swyddogaeth dienw.

417
00:21:19,700 --> 00:21:22,370
>> Felly, gadewch i ni ddweud ein bod wedi
amrywiaeth hwn o gyfanrifau.

418
00:21:22,370 --> 00:21:25,370
Mae'n cael ei alw Nums, ac 'i' got pump
pethau ynddo, un, dau, tri, pedwar,

419
00:21:25,370 --> 00:21:26,410
pump.

420
00:21:26,410 --> 00:21:30,620
Nawr rwyf am i fapio rhai
swyddogaeth ymlaen i amrywiaeth hwn.

421
00:21:30,620 --> 00:21:34,337
Yr wyf am gael swyddogaeth yn berthnasol
i bob elfen o'r rhesi.

422
00:21:34,337 --> 00:21:37,420
Wel, gadewch i ni ddweud bod yr hyn yr wyf am i
gwna ydy jyst dyblu pob un o'r elfennau.

423
00:21:37,420 --> 00:21:42,520
Beth allwn i ei wneud yw dim ond yn defnyddio dolen
ar gyfer var wyf yn dychwelyd 0, yr wyf yn llai na

424
00:21:42,520 --> 00:21:47,390
neu'n hafal i 4, yr wyf yn ogystal, a mwy, a
Yna dyblu pob rhif sengl.

425
00:21:47,390 --> 00:21:49,580
Ond gallaf hefyd yn gwneud rhywbeth fel hyn.

426
00:21:49,580 --> 00:21:53,420
Gallaf ddweud Nums oedd gynt
un, dau, tri, pedwar, pump,

427
00:21:53,420 --> 00:21:58,310
yn awr, fodd bynnag, hoffwn i chi i
cymhwyso mapio ar arae hon

428
00:21:58,310 --> 00:22:00,400
lle yr hoffwn i chi
i ddyblu pob rhif.

429
00:22:00,400 --> 00:22:02,540
A dyna'n union
yr hyn sy'n digwydd yma.

430
00:22:02,540 --> 00:22:06,870
Ond sylwi ar yr hyn dw i'n pasio
mewn fel y ddadl i fapio.

431
00:22:06,870 --> 00:22:09,080
Mae hyn yn swyddogaeth ddienw.

432
00:22:09,080 --> 00:22:11,140
Ac yn sylwi nad wyf wedi rhoi
swyddogaeth hon enw,

433
00:22:11,140 --> 00:22:13,290
Dim ond wedi rhoi ei restr paramedr.

434
00:22:13,290 --> 00:22:16,370
Ac felly mae hyn yn enghraifft
o swyddogaeth ddienw.

435
00:22:16,370 --> 00:22:21,270
>> Rydym yn gyffredinol na fyddai byth yn galw hyn
Swyddogaeth y tu allan i gyd-destun map.

436
00:22:21,270 --> 00:22:24,110
Rydym yn diffinio fel paramedr
i fapio, ac felly nid ydym yn ei wneud mewn gwirionedd

437
00:22:24,110 --> 00:22:27,910
angen i chi gael enw ar ei gyfer os yw'r
unig beth sy'n poeni am yn map

438
00:22:27,910 --> 00:22:30,339
ac mae'n diffinio'n gywir
mae tu mewn map.

439
00:22:30,339 --> 00:22:31,880
Ac felly mae hyn yn swyddogaeth ddienw.

440
00:22:31,880 --> 00:22:34,680
Nid ydym wedi gallu
i wneud hyn o'r blaen.

441
00:22:34,680 --> 00:22:38,400
Map rhywfaint o swyddogaeth sy'n
yn derbyn un paramedr, num,

442
00:22:38,400 --> 00:22:41,890
a beth swyddogaeth honno yn ei wneud
yn dychwelyd num amseroedd 2.

443
00:22:41,890 --> 00:22:45,330
Ac felly ar ôl hyn
mapio wedi cael ei gymhwyso,

444
00:22:45,330 --> 00:22:50,090
mae hyn yn awr beth Nums edrych
fel, dau, pedwar, chwech, wyth, 10.

445
00:22:50,090 --> 00:22:52,090
A byddwn yn alw yn fy
ffenestr bori a dim ond

446
00:22:52,090 --> 00:22:55,240
yn edrych ar hyn
yn gyflym iawn yn ogystal.

447
00:22:55,240 --> 00:22:58,000
>> Felly, mae gennyf botwm arall yma
yn fy dudalen gartref a elwir yn dwbl.

448
00:22:58,000 --> 00:23:03,570
A pan fyddaf yn clicio ddwywaith, ac mae'n dweud
mi cyn ei fod yn un, dau, tri, pedwar,

449
00:23:03,570 --> 00:23:07,250
pump ar ôl dau, pedwar, chwech, wyth, 10.

450
00:23:07,250 --> 00:23:11,930
Ac os wyf yn mynd yn ôl a chlicio dwbl
eto, dau, pedwar, chwech, wyth, 10.

451
00:23:11,930 --> 00:23:17,400
Ac yna ar ôl, pedwar,
wyth, 12, 16, ac yna 20.

452
00:23:17,400 --> 00:23:20,440
A beth ydw i'n ei wneud yn y swyddogaeth hon?

453
00:23:20,440 --> 00:23:25,210
Wel, os ydym yn unig pop drosodd i IDE, a
Rwy'n dynnu i fyny fy swyddogaeth ddienw, dyma

454
00:23:25,210 --> 00:23:28,780
ar-lein saith trwy 13, rwy'n
yn gwneud ychydig bach o waith ffansi yma,

455
00:23:28,780 --> 00:23:32,240
ond Im 'jyst yn argraffu
beth sydd ar hyn o bryd yn y rhesi.

456
00:23:32,240 --> 00:23:36,580
Yna, ar linell 16, 17,
a 18, mae fy map.

457
00:23:36,580 --> 00:23:40,930
Dyma lle rwy'n gwneud cais dyblu hwn
swyddogaeth i bob elfen unigol.

458
00:23:40,930 --> 00:23:43,530
Ac yna ychydig ymhellach i lawr,
Im 'jyst yn gwneud yr un peth

459
00:23:43,530 --> 00:23:46,640
Oeddwn yn ei wneud o'r blaen, ac eithrio nawr rwy'n
argraffu'r cynnwys y rhesi

460
00:23:46,640 --> 00:23:48,167
wedyn.

461
00:23:48,167 --> 00:23:50,500
Ond yr holl Rwyf wedi gwneud yma yw
dim ond yn defnyddio swyddogaeth ddienw

462
00:23:50,500 --> 00:23:53,640
i fapio ar draws amrywiaeth gyfan.

463
00:23:53,640 --> 00:23:58,466
>> Felly, un yn fwy bwnc mawr i siarad am yn
JavaScript yw'r syniad o ddigwyddiad.

464
00:23:58,466 --> 00:24:01,590
Mae digwyddiad yn rhywbeth sydd ond yn digwydd
pan fydd defnyddiwr yn rhyngweithio gyda'ch gwe

465
00:24:01,590 --> 00:24:04,715
dudalen, felly efallai eu bod clicio rhywbeth,
neu efallai y dudalen yn cael ei orffen llwytho,

466
00:24:04,715 --> 00:24:07,200
neu efallai eu bod wedi symud
eu llygoden dros rywbeth,

467
00:24:07,200 --> 00:24:09,290
neu maen nhw wedi teipio rhywbeth
mewn maes mewnbwn.

468
00:24:09,290 --> 00:24:14,260
Mae pob un o'r pethau hyn yn ddigwyddiadau
sy'n digwydd ar ein tudalen ar y we.

469
00:24:14,260 --> 00:24:17,460
Ac mae JavaScript wedi y
gallu i gefnogi rhywbeth

470
00:24:17,460 --> 00:24:21,760
a elwir yn driniwr digwyddiad, a
yn swyddogaeth alwad yn ôl y

471
00:24:21,760 --> 00:24:23,329
yn ymateb i ddigwyddiad html.

472
00:24:23,329 --> 00:24:24,620
A beth swyddogaeth alwad yn ôl?

473
00:24:24,620 --> 00:24:27,328
Wel, 'i' yn gyffredinol dim ond un arall
enwi am swyddogaeth ddienw.

474
00:24:27,328 --> 00:24:30,170
Mae'n swyddogaeth sy'n
yn ymateb i ddigwyddiad.

475
00:24:30,170 --> 00:24:34,130
A dyma lle rydym yn dod i'r
syniad o rhwymo swyddogaethau penodol

476
00:24:34,130 --> 00:24:38,060
i priodoledd html penodol.

477
00:24:38,060 --> 00:24:41,420
Mae'r rhan fwyaf o elfennau html cael
cymorth ar gyfer priodoledd

478
00:24:41,420 --> 00:24:45,170
nad oeddem yn siarad am yn y html
'n fideo ar gyfer rhywbeth fel ar clic

479
00:24:45,170 --> 00:24:50,540
neu ar hofran neu ar y llwyth,
pob un o'r digwyddiadau hyn

480
00:24:50,540 --> 00:24:53,120
y gallwch wedyn ysgrifennu swyddogaethau
sy'n delio â digwyddiadau hynny

481
00:24:53,120 --> 00:24:56,090
pan fydd y digwyddiadau hynny
yn digwydd ar eich tudalen we.

482
00:24:56,090 --> 00:24:59,170
>> Ac felly efallai eich html
yn edrych yn debyg i hyn.

483
00:24:59,170 --> 00:25:02,240
Ac yr wyf wedi dau fotwm yma,
botwm un a dau fotwm,

484
00:25:02,240 --> 00:25:04,620
ac yma mae gen i ar hyn o bryd
dim byd diffiniedig,

485
00:25:04,620 --> 00:25:11,170
ond dyma lle mae'r priodoledd ar
cliciwch yn ôl pob golwg yn rhan o fy tag html.

486
00:25:11,170 --> 00:25:15,220
Felly, mae'n debyg pan fyddaf yn diffinio beth sydd
mynd ymlaen tu mewn y priodoledd,

487
00:25:15,220 --> 00:25:18,590
mae'n mynd i fod yn rhyw JavaScript
swyddogaeth sy'n ymateb i'r digwyddiad

488
00:25:18,590 --> 00:25:24,360
yn ôl pob tebyg o glicio ar
botwm un neu ddau fotwm.

489
00:25:24,360 --> 00:25:28,580
>> Beth sydd fath o oer am hyn yw ein
Gall ysgrifennu triniwr digwyddiad generig.

490
00:25:28,580 --> 00:25:32,370
Ac mae hyn Triniwr y digwyddiad bydd
creu gwrthrych digwyddiad.

491
00:25:32,370 --> 00:25:37,000
A bydd y gwrthrych digwyddiad yn ei ddweud wrthym
pa un o'r ddau fotwm ei glicio.

492
00:25:37,000 --> 00:25:38,064
Nawr, sut mae hynny'n gweithio?

493
00:25:38,064 --> 00:25:39,730
Wel, gallai edrych yn debyg i hyn.

494
00:25:39,730 --> 00:25:44,860
Felly, byddwn yn gyntaf ddiffinio ein botymau
i gael ymateb i'r alwad yn ôl

495
00:25:44,860 --> 00:25:47,470
swyddogaeth a fydd yn cael eu galw
pan fydd y botwm ei glicio,

496
00:25:47,470 --> 00:25:49,520
byddwn yn galw digwyddiad enw effro.

497
00:25:49,520 --> 00:25:53,320
Ac yn sylwi yn y ddau achos rydym yn
pasio yn y paramedr digwyddiad.

498
00:25:53,320 --> 00:25:55,460
Felly rydym yn galw swyddogaeth hon
neu pan fydd y swyddogaeth hon

499
00:25:55,460 --> 00:26:00,330
ei sbarduno gan y digwyddiad yn digwydd,
mae'n mynd i greu'r gwrthrych y digwyddiad

500
00:26:00,330 --> 00:26:03,300
ac yn ei throsglwyddo fel
paramedr i roi gwybod enw.

501
00:26:03,300 --> 00:26:07,270
A bod gwrthrych digwyddiad yn
mynd i gynnwys gwybodaeth

502
00:26:07,270 --> 00:26:09,800
am ba botwm ei glicio.

503
00:26:09,800 --> 00:26:11,580
A sut mae'n gwneud hynny?

504
00:26:11,580 --> 00:26:13,654
Wel, gallai edrych yn debyg i hyn.

505
00:26:13,654 --> 00:26:15,570
Felly, yn awr yn fy wahân
Ffeil JavaScript, wyf yn gallai

506
00:26:15,570 --> 00:26:17,420
rhaid i ddod o hyd hyn
swyddogaeth enw effro, a oedd yn

507
00:26:17,420 --> 00:26:19,500
unwaith eto yn derbyn y paramedr digwyddiad.

508
00:26:19,500 --> 00:26:24,640
Ac yna dyma lle rydw i'n canfod
pa botwm ei sbarduno,

509
00:26:24,640 --> 00:26:28,100
sbardun var digwyddiad yn dychwelyd
Elfen ffynhonnell dot.

510
00:26:28,100 --> 00:26:33,150
Beth oedd ffynhonnell a greodd
y gwrthrych y digwyddiad a gafodd ei phasio yn?

511
00:26:33,150 --> 00:26:36,390
A oedd yn un botwm neu a oedd yn botwm dau?

512
00:26:36,390 --> 00:26:40,710
>> Ac yna yma drwy'r rydw i'n ei wneud yw
argraffu trigger.innerhtml.

513
00:26:40,710 --> 00:26:43,860
Wel, yn yr achos hwn, yn hyn
cyd-destun, trigger.innerhtml

514
00:26:43,860 --> 00:26:45,940
yn unig yw hyn sydd wedi'i ysgrifennu ar y botwm.

515
00:26:45,940 --> 00:26:48,830
'I jyst felly fydd yn digwydd os byddwn yn neidio
yn ôl am eiliad, a fyddai

516
00:26:48,830 --> 00:26:51,670
fod yr hyn sydd yn rhwng y tagiau botwm hynny.

517
00:26:51,670 --> 00:26:54,150
Bydd yn botwm un neu ddau fotwm.

518
00:26:54,150 --> 00:26:57,320
A gadewch i ni edrych ar
sut y byddai hyn yn driniwr digwyddiad

519
00:26:57,320 --> 00:27:01,080
edrych pe oedd gennym yn rhedeg yn ymarferol.

520
00:27:01,080 --> 00:27:03,850
>> Felly, yn gyntaf oll, eich bod wedi
events.js agor,

521
00:27:03,850 --> 00:27:06,517
sef y ffeil JavaScript lle
Rwyf wedi diffinio swyddogaeth hon.

522
00:27:06,517 --> 00:27:08,558
Ac fel y gwelwch, mae'n
'n bert lawer yn union beth

523
00:27:08,558 --> 00:27:10,230
rydym yn unig yn gweld ar y sleid eiliad yn ôl.

524
00:27:10,230 --> 00:27:14,890
A mi a mynd drosodd i'r
dudalen gartref rydym wedi bod yn defnyddio.

525
00:27:14,890 --> 00:27:17,660
Ac yr wyf wedi yma botwm
un a dau fotwm.

526
00:27:17,660 --> 00:27:19,820
A byddaf cliciwch ar un botwm.

527
00:27:19,820 --> 00:27:23,930
Rydych yn clicio ar y botwm un, os ydych yn
yn gallu gweld yn iawn yma yn y rhybudd.

528
00:27:23,930 --> 00:27:25,810
IAWN.

529
00:27:25,810 --> 00:27:28,980
Cliciwch ar y botwm dau, yr ydych
clicio ar fotwm dau.

530
00:27:28,980 --> 00:27:32,150
>> Felly y ddau botymau yn cael y
un swyddogaeth galwadau, dde?

531
00:27:32,150 --> 00:27:35,840
Maent yn ddau yn enw effro
digwyddiad, ond mae hyn gwrthrych y digwyddiad

532
00:27:35,840 --> 00:27:41,900
sy'n cael ei greu pan fyddwn yn clicio ar
mae'n ei ddweud wrthym pa botwm ei glicio.

533
00:27:41,900 --> 00:27:44,650
Nid oedd rhaid i ni ysgrifennu dau ar wahân
swyddogaethau neu yn delio â gael

534
00:27:44,650 --> 00:27:46,470
i drosglwyddo unrhyw wybodaeth ychwanegol.

535
00:27:46,470 --> 00:27:48,220
Rydym yn unig yn dibynnu ar
beth fydd JavaScript

536
00:27:48,220 --> 00:27:53,772
yn ei wneud i ni, sef creu bod
fath o wrthrych digwyddiad ar ein rhan.

537
00:27:53,772 --> 00:27:56,730
Mae llawer mwy i JavaScript na
yr hyn yr ydym wedi ei gynnwys yn y fideo hwn,

538
00:27:56,730 --> 00:27:58,521
ond mae cael y rhain
sylfaenol ddylai gael i chi

539
00:27:58,521 --> 00:28:00,690
dipyn o ffyrdd hir i
popeth dysgu byddwch yn

540
00:28:00,690 --> 00:28:04,030
angen gwybod am hyn
iaith diddorol.

541
00:28:04,030 --> 00:28:05,000
Rwy'n Doug Lloyd.

542
00:28:05,000 --> 00:28:07,010
Mae hyn yn CS50.

543
00:28:07,010 --> 00:28:09,181