1
00:00:00,000 --> 00:00:02,000
[Powered by Google Translate] [Seminar] [Fframweithiau JavaScript:? Pam a Sut]

2
00:00:02,000 --> 00:00:04,000
[Kevin Schmid] [Prifysgol Harvard]

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

4
00:00:06,960 --> 00:00:10,630
>> Hi, pawb. Croeso i'r seminar Fframweithiau JavaScript.

5
00:00:10,630 --> 00:00:14,910
Fy enw i yw Kevin, a heddiw yr wyf i'n mynd i fod yn siarad am fframweithiau JavaScript,

6
00:00:14,910 --> 00:00:20,400
ac nid y nod y seminar hwn yw i fynd â chi i, dyweder, meistroli fframwaith penodol fel y cyfryw

7
00:00:20,400 --> 00:00:23,810
ond i roi cyflwyniad eang i chi gwpl o fframweithiau

8
00:00:23,810 --> 00:00:27,150
ac yn dangos pam y byddem yn byth yn dymuno defnyddio fframwaith.

9
00:00:27,150 --> 00:00:31,060
>> Cyn imi wneud hynny, byddaf yn rhoi rhywfaint o gefndir yn JavaScript,

10
00:00:31,060 --> 00:00:33,750
ac yna byddwn yn mynd ag ef oddi yno.

11
00:00:33,750 --> 00:00:36,270
Rydym yn mynd i ddechrau drwy roi rhestr i-wneud.

12
00:00:36,270 --> 00:00:39,330
Dyma ein rhestr o dasgau ar gyfer heddiw.

13
00:00:39,330 --> 00:00:41,990
Mae'n fath o ddoniol. Mae'n rhaid i ni weithredu rhestr i-wneud yn JavaScript.

14
00:00:41,990 --> 00:00:45,110
Mae hyn yn beth mae'n mynd i edrych fel, felly dyna ein nod cyntaf.

15
00:00:45,110 --> 00:00:47,160
Nid ydym yn mynd i ddefnyddio fframwaith i wneud hynny.

16
00:00:47,160 --> 00:00:51,930
Rydym yn mynd i cod JavaScript a chael y rhestr i-wneud i weithio.

17
00:00:51,930 --> 00:00:54,370
Yna, rydym yn mynd i wella dyluniad heb ddefnyddio fframwaith.

18
00:00:54,370 --> 00:00:57,190
Rydym yn mynd i drafod amryw o bethau y gallwn ei wneud gyda dim ond ei ben ei hun JavaScript

19
00:00:57,190 --> 00:01:00,650
i wneud ein i-wneud rhestr ychydig gynllunio yn fwy yn dda.

20
00:01:00,650 --> 00:01:02,490
Yna, rydym yn mynd i daflu mewn rhai jQuery,

21
00:01:02,490 --> 00:01:05,030
ac yna rydym yn mynd i edrych ar yr un rhestr i-wneud,

22
00:01:05,030 --> 00:01:07,170
dim ond rhoi ar waith mewn fframweithiau gwahanol, a byddwn yn trafod

23
00:01:07,170 --> 00:01:09,280
 y manteision a'r anfanteision ar hyd y ffordd.

24
00:01:09,280 --> 00:01:12,040
>> Gadewch i ni ddechrau gweithredu'r rhestr i-wneud.

25
00:01:12,040 --> 00:01:14,270
Gadewch i ni ddweud ein bod yn rhoi HTML hwn.

26
00:01:14,270 --> 00:01:16,620
Rydw i'n mynd i wneud hyn yn llai ychydig.

27
00:01:16,620 --> 00:01:19,300
Fel y gallwch weld, mae gennyf ychydig o bennawd sy'n dweud todo

28
00:01:19,300 --> 00:01:21,740
ac ychydig o flwch lle y gallaf roi disgrifiad o todo

29
00:01:21,740 --> 00:01:26,990
ac yna botwm eitem newydd, felly gadewch i ni geisio mynd i mewn i todo newydd at y rhestr hon.

30
00:01:26,990 --> 00:01:31,000
Rhowch seminar fframweithiau JavaScript,

31
00:01:31,000 --> 00:01:33,090
ac rwy'n taro eitem newydd.

32
00:01:33,090 --> 00:01:35,730
Rwy'n cael y rhybudd JavaScript sy'n dweud weithredu mi.

33
00:01:35,730 --> 00:01:37,560
Mae'n rhaid i ni weithredu.

34
00:01:37,560 --> 00:01:41,490
Gadewch i ni edrych ar y cod ar gyfer hyn, mae'r HTML a JavaScript.

35
00:01:41,490 --> 00:01:43,260
Dyma ein HTML.

36
00:01:43,260 --> 00:01:45,500
Fel y gallwch weld yma, dyma ein Todos bach header.

37
00:01:45,500 --> 00:01:47,620
Dyna oedd y peth beiddgar ar y brig,

38
00:01:47,620 --> 00:01:50,690
ac yna rydym yn cael y blwch mewnbwn gyda'r placeholder,

39
00:01:50,690 --> 00:01:59,460
ac yna mae yn nodwedd arbennig o botwm hwn sy'n galw swyddogaeth hon addTodo.

40
00:01:59,460 --> 00:02:05,460
A oes unrhyw un eisiau i ddyfalu beth yw'r cliciwch ar ei ddynodi?

41
00:02:05,460 --> 00:02:07,390
[Myfyrwyr ymateb anhyglyw]

42
00:02:07,390 --> 00:02:09,289
Da, cliciwch ar yn fath o fel digwyddiad,

43
00:02:09,289 --> 00:02:12,120
fel glicio ar y llygoden yn unig yw digwyddiad, a beth rydym yn ei wneud

44
00:02:12,120 --> 00:02:16,890
yw ein bod yn clymu achos o glicio botwm hwn i weithredu y swyddogaeth honno.

45
00:02:16,890 --> 00:02:21,700
AddTodo yn y digwyddiad hwn trinydd ar gyfer glicio botwm.

46
00:02:21,700 --> 00:02:25,010
>> Fel y gallwch weld, pan fyddaf yn clicio ar y botwm eitem newydd

47
00:02:25,010 --> 00:02:29,940
y digwyddiad cliciwch ar yn cael ei danio, ac y swyddogaeth hon yn cael ei alw.

48
00:02:29,940 --> 00:02:33,170
Gadewch i ni edrych ar swyddogaeth.

49
00:02:33,170 --> 00:02:36,260
Fel y gallwch weld, dyma fy cod JavaScript hyd yn hyn.

50
00:02:36,260 --> 00:02:41,280
Yr hyn yr wyf yn cael ar y brig yn strwythur data fyd-eang ar gyfer fy rhestr i-wneud.

51
00:02:41,280 --> 00:02:44,060
Mae'n edrych fel arae. Dim ond amrywiaeth wag.

52
00:02:44,060 --> 00:02:47,100
Ac yna yr wyf yn cael y swyddogaeth addTodo a welsom yn gynharach,

53
00:02:47,100 --> 00:02:50,740
a'r unig linell o god i mewn 'na yn effro hwn.

54
00:02:50,740 --> 00:02:55,730
Mae'n rhybuddio gweithredu mi, ac yna rwyf wedi 2 dasg wrth law.

55
00:02:55,730 --> 00:02:58,790
Rhaid imi ychwanegu y todo i'r strwythur data byd-eang,

56
00:02:58,790 --> 00:03:01,860
ac yna yr wyf am dynnu allan y rhestr i-wneud.

57
00:03:01,860 --> 00:03:06,360
Dim byd rhy ffansi eto, ond JavaScript efallai y byddwch yn gyfarwydd â nhw,

58
00:03:06,360 --> 00:03:12,370
felly dwi'n mynd i fynd yn araf ac adolygu hanfodion JavaScript yn y ffordd honno.

59
00:03:12,370 --> 00:03:15,490
>> Gadewch i ni rhoi'r ergyd.

60
00:03:15,490 --> 00:03:21,130
Lets 'ddeud y defnyddiwr yn mynd i mewn rhywbeth yn y blwch hwn.

61
00:03:21,130 --> 00:03:23,360
Fi jyst deipio rhywbeth i mewn yma, testun.

62
00:03:23,360 --> 00:03:27,620
Sut ydw i'n trefnu mynediad sy'n destun drwy JavaScript?

63
00:03:27,620 --> 00:03:32,500
Cofiwch fod JavaScript, un o'i nodweddion sylfaenol yw ei fod yn rhoi i ni

64
00:03:32,500 --> 00:03:34,670
y mynediad rhaglennol i'r DOM.

65
00:03:34,670 --> 00:03:40,670
Mae'n ein galluogi i gael mynediad i elfennau a'u priodweddau y HTML gwirioneddol.

66
00:03:40,670 --> 00:03:43,430
Mae'r ffordd yr ydym yn gwneud hynny gyda noeth esgyrn JavaScript

67
00:03:43,430 --> 00:03:51,360
yw y gall yr ydym mewn gwirionedd yn defnyddio swyddogaeth yn JavaScript o'r enw getElementByID.

68
00:03:51,360 --> 00:03:55,140
Yr wyf am i storio y testun sy'n cael ei deipio yno yn rhai amrywiol,

69
00:03:55,140 --> 00:03:58,350
felly dw i'n mynd i ddweud newidyn newydd o'r enw new_todo,

70
00:03:58,350 --> 00:04:01,980
ac yr wyf i'n mynd i gael yr elfen honno.

71
00:04:01,980 --> 00:04:06,330
Mae hon yn swyddogaeth,. GetElementByID.

72
00:04:06,330 --> 00:04:11,580
Ac yn awr fy mod yn cael elfen trwy adnabod, felly Fi angen 'r ID y blwch testun,

73
00:04:11,580 --> 00:04:15,860
felly dwi wedi rhoi iddi y new_todo_description adnabod.

74
00:04:15,860 --> 00:04:18,399
Dyna sut yr wyf i'n mynd i gael elfen.

75
00:04:18,399 --> 00:04:23,880
Dyna fy nadl i swyddogaeth hon, i bennu pa ID gael.

76
00:04:23,880 --> 00:04:28,110
Ac felly dyna elfen yn HTML, ac mae'n meddu ar nodweddion.

77
00:04:28,110 --> 00:04:30,650
Rydych chi wedi gweld y rhain. Maent yn nodweddion.

78
00:04:30,650 --> 00:04:37,090
Gelwir y priodoledd yr elfen testun sy'n storio fewnbwn y defnyddiwr yn cael ei gwerth.

79
00:04:37,090 --> 00:04:40,860
I arbed y gwerth y blwch testun nawr mewn amrywiol yma o'r enw new_todo.

80
00:04:40,860 --> 00:04:45,040
Yn awr yr wyf yn cael mynediad rhaglennol i newidyn hwn, sydd yn fath o oer

81
00:04:45,040 --> 00:04:49,200
oherwydd erbyn hyn y gallaf ei wneud yw y gallaf ei ychwanegu at fy rhestr i-wneud.

82
00:04:49,200 --> 00:04:52,870
>> Y ffordd y byddem yn gwneud hyn yn JavaScript-a pheidiwch â phoeni os ydych chi'n anghyfarwydd â hyn,

83
00:04:52,870 --> 00:04:57,010
ond dim ond yn mynd trwyddo yn todos.push

84
00:04:57,010 --> 00:05:00,130
oherwydd dyna enw fy strwythur data byd-eang yma,

85
00:05:00,130 --> 00:05:04,450
ac yr wyf i'n mynd i wthio new_todo.

86
00:05:04,450 --> 00:05:09,120
Mae hyn yn wych oherwydd yn awr yr wyf wedi ychwanegu at fy JavaScript

87
00:05:09,120 --> 00:05:11,280
cynrychiolaeth o hynny i-wneud rhestr.

88
00:05:11,280 --> 00:05:15,170
Ond yn awr sut ydw i'n ei gael yn ôl i'r HTML?

89
00:05:15,170 --> 00:05:18,560
Mae'n rhaid i mi ddod o hyd i ffordd o ddatrys y gwthio yn ôl.

90
00:05:18,560 --> 00:05:21,830
Mewn geiriau eraill, math o rhaid i mi dynnu hyn.

91
00:05:21,830 --> 00:05:26,060
Yr hyn yr ydym yn mynd i wneud yw ein bod yn mynd i dynnu rhestr i-wneud.

92
00:05:26,060 --> 00:05:29,270
Angen i mi ddiweddaru HTML arall ar y dudalen,

93
00:05:29,270 --> 00:05:32,040
ac fel y gwelwch, yr wyf wedi gadael y cynhwysydd bach yma,

94
00:05:32,040 --> 00:05:36,840
divider hon o'r dudalen sydd ID yn todos,

95
00:05:36,840 --> 00:05:40,870
ac yr wyf i'n mynd i roi rhestr i-wneud yno.

96
00:05:40,870 --> 00:05:47,240
Yn gyntaf yr wyf i'n mynd i glirio allan oherwydd, dyweder, roedd i-wneud rhestr oed yno.

97
00:05:47,240 --> 00:05:49,560
Im 'yn cael yr elfen honno gan ID eto,

98
00:05:49,560 --> 00:05:54,530
ac rwy'n defnyddio'r HTML mewnol yr elfen honno,

99
00:05:54,530 --> 00:05:58,010
ac rwy'n mynd i glirio hynny.

100
00:05:58,010 --> 00:06:05,510
Os byddwn yn gadael y cod hwn fel y mae, byddem yn gweld dim byd wag yno,

101
00:06:05,510 --> 00:06:10,410
ac yn awr yr wyf am ddechrau rendro fy rhestr i-wneud newydd.

102
00:06:10,410 --> 00:06:12,870
Rwy'n bôn yn mynd i ddileu fy rhestr i-wneud.

103
00:06:12,870 --> 00:06:18,180
>> Nawr mewnol y tu mewn HTML y todos div yn gwbl glir,

104
00:06:18,180 --> 00:06:20,060
ac yn awr mae angen i mi ddechrau ychwanegu fy rhestr.

105
00:06:20,060 --> 00:06:23,890
Y peth cyntaf i mi am ychwanegu yn ôl yn y tag rhestr heb drefn,

106
00:06:23,890 --> 00:06:33,890
sydd yn y bôn yn dynodi bod hyn yn ddechrau rhestr heb drefn.

107
00:06:33,890 --> 00:06:39,770
Yn awr ar gyfer pob elfen yn fy todos amrywiaeth rwyf eisiau argraffu allan tu mewn y HTML.

108
00:06:39,770 --> 00:06:43,710
Yr wyf am ei atodi ar waelod y rhestr.

109
00:06:43,710 --> 00:06:49,040
Yn union fel yn C, gallaf ddefnyddio ar gyfer dolen, ac yr wyf i'n mynd i gychwyn ar ddechrau fy rhestr

110
00:06:49,040 --> 00:06:54,140
yn elfen 0, ac yr wyf i'n mynd i fynd yr holl ffordd i hyd y rhestr.

111
00:06:54,140 --> 00:07:01,100
Gallwn ni mewn gwirionedd yn cael hyd o fyrdd yn JavaScript ddefnyddio'r eiddo hyd.

112
00:07:01,100 --> 00:07:03,420
Yn y bôn dw i'n mynd i wneud rhywbeth tebyg iawn tu mewn yma

113
00:07:03,420 --> 00:07:05,600
i argraffu yr elfen honno.

114
00:07:05,600 --> 00:07:12,970
Gallaf unwaith eto gael mynediad i'r div todos, yr eiddo mewnol HTML o hynny,

115
00:07:12,970 --> 00:07:17,560
ac rwy'n mynd i ychwanegu ar yr eitem rhestr newydd, ac mae hynny'n mynd i gael ei amgylchynu gan

116
00:07:17,560 --> 00:07:25,390
tag hwn li, ac yr wyf i'n mynd i concatenate gyda'r gweithredwr +,

117
00:07:25,390 --> 00:07:28,040
a dyna'r elfen ith fy todos amrywiaeth,

118
00:07:28,040 --> 00:07:32,380
ac yna dwi'n mynd i gau y tag.

119
00:07:32,380 --> 00:07:36,240
Yn awr ar gyfer pob elfen byddwn yn ychwanegu cofnod rhestr newydd.

120
00:07:36,240 --> 00:07:48,700
Ac yna i gyd mae gwir angen i ni ei wneud yw cau'r y tag.

121
00:07:48,700 --> 00:07:52,820
Fi jyst angen i gau oddi ar y rhestr heb drefn tag.

122
00:07:52,820 --> 00:07:55,490
>> Ydych chi'n cael blas ar sut mae hynny'n gweithio?

123
00:07:55,490 --> 00:07:57,700
Mae hyn yn agor y rhestr gyfan.

124
00:07:57,700 --> 00:08:01,080
Mae hyn yn ychwanegu elfennau unigol o'r rhestr todos at y rhestr,

125
00:08:01,080 --> 00:08:05,470
ac yna sy'n cau'r rhestr gyfan, ac mae hyn yn fy swyddogaeth addTodo.

126
00:08:05,470 --> 00:08:09,590
Yr wyf yn dechrau yn y bôn trwy gael y todo o'r blwch testun.

127
00:08:09,590 --> 00:08:18,950
Hoffwn ychwanegu bod yr amrywiaeth todos, ac yna yr wyf yn ail-wneud y rhestr i-wneud.

128
00:08:18,950 --> 00:08:21,520
Nawr gallaf ychwanegu eitemau at fy rhestr.

129
00:08:21,520 --> 00:08:24,620
Mae hyn yn fath o gyffrous oherwydd mewn dim ond ychydig linellau o god

130
00:08:24,620 --> 00:08:28,240
rydym wedi gwneud yn y bôn a i-wneud rhestr lle y gallwn ychwanegu eitemau.

131
00:08:28,240 --> 00:08:30,050
Fawr.

132
00:08:30,050 --> 00:08:34,480
Dyna fath o gyflwyniad sylfaenol i JavaScript.

133
00:08:34,480 --> 00:08:36,179
Peidiwch â phoeni gormod am y gystrawen am y tro,

134
00:08:36,179 --> 00:08:38,130
ond meddyliwch am hyn gysyniadol.

135
00:08:38,130 --> 00:08:40,539
Roedd gennym rai HTML.

136
00:08:40,539 --> 00:08:45,310
Cawsom blwch testun ar y dudalen y mae defnyddwyr yn y bôn yn caniatáu i mewnbwn eitem i-wneud i'w ychwanegu.

137
00:08:45,310 --> 00:08:49,210
Ac yna rydym yn defnyddio JavaScript i nôl y todo o'r blwch testun.

138
00:08:49,210 --> 00:08:52,830
Rydym yn storio y tu mewn i amrywiaeth JavaScript, sydd yn y bôn fel

139
00:08:52,830 --> 00:08:56,010
ein cynrychiolaeth rhaglennol o'r rhestr i-wneud,

140
00:08:56,010 --> 00:08:59,060
ac yna rydym yn argraffu allan.

141
00:08:59,060 --> 00:09:02,690
Mae hyn yn todos.js.

142
00:09:02,690 --> 00:09:07,620
>> Mae hyn yn fath o oer, ond sut y gallwn fynd â hyn ymhellach?

143
00:09:07,620 --> 00:09:11,350
Wel, fel y gwelwch, nid yw hyn yn debyg i gyflawn i-wneud rhestr.

144
00:09:11,350 --> 00:09:15,100
Er enghraifft, ni allaf farcio unrhyw un o'r eitemau hyn yn anghyflawn,

145
00:09:15,100 --> 00:09:19,920
hoffi os oeddwn i eisiau reprioritize yr eitemau neu ddileu eitemau.

146
00:09:19,920 --> 00:09:23,150
Mae hyn yn iawn, ond gallwn fynd â hyn ymhellach.

147
00:09:23,150 --> 00:09:29,280
Dydw i ddim yn mynd i siarad gormod am ychwanegu nodweddion ychwanegol,

148
00:09:29,280 --> 00:09:32,800
ond gallem gymryd hynny ymhellach.

149
00:09:32,800 --> 00:09:35,970
Gadewch i ni siarad am ychwanegu un nodwedd fwy at y rhestr i-wneud,

150
00:09:35,970 --> 00:09:40,370
sydd yn mynd i gael ei fod yn gallu gwirio unigolyn i-wneud eitem

151
00:09:40,370 --> 00:09:44,780
ac wedi cael ei groesi allan, felly yn y bôn yn dweud Rwyf wedi gwneud hyn.

152
00:09:44,780 --> 00:09:50,240
Gadewch i ni edrych ar rai cod a allai gyflawni hynny.

153
00:09:50,240 --> 00:09:52,740
Sylwi ar yr hyn yr wyf wedi ei wneud ar y brig yn yr wyf wedi ychwanegu

154
00:09:52,740 --> 00:09:57,620
amrywiaeth byd-eang newydd a elwir yn gyflawn.

155
00:09:57,620 --> 00:10:02,890
Im 'yn y bôn defnyddio hyn i storio a yw'r eitemau ar y rhestr i-wneud

156
00:10:02,890 --> 00:10:06,560
yn gyflawn ai peidio.

157
00:10:06,560 --> 00:10:08,470
Mae hyn yn un ffordd o wneud hyn.

158
00:10:08,470 --> 00:10:13,750
Os byddaf yn edrych ar y gweithredu hyn, yr arddangosfa,

159
00:10:13,750 --> 00:10:21,120
yn y bôn os byddaf yn mynd i mewn i todo a phwysaf ar y botwm togl

160
00:10:21,120 --> 00:10:25,040
mae'n croesi allan, felly mae pob eitem ar y rhestr hon yn cynnwys naill ai cyflawn

161
00:10:25,040 --> 00:10:31,050
neu gyflwr anghyflawn, ac rwy'n defnyddio amrywiaeth arall i gynrychioli hynny.

162
00:10:31,050 --> 00:10:33,730
>> Yn y bôn ar gyfer pob todo yn y todos amrywiaeth

163
00:10:33,730 --> 00:10:37,110
mae eitem yn y casgliad cyflawn sy'n dangos y bôn

164
00:10:37,110 --> 00:10:39,060
boed hynny yn gyflawn ai peidio.

165
00:10:39,060 --> 00:10:41,640
Rwyf wedi cael i wneud newidiadau eithaf bach iawn i'r cod hwn,

166
00:10:41,640 --> 00:10:44,470
felly dyma ein swyddogaeth addTodo.

167
00:10:44,470 --> 00:10:48,530
Sylwch fod yma rwyf i'n gwthio ar y casgliad,

168
00:10:48,530 --> 00:10:51,300
ac yna rwy'n gwthio 0 i'r amrywiaeth cyflawn,

169
00:10:51,300 --> 00:10:57,090
yn y bôn ochr yn ochr â'r gwthio todo newydd i'w ddweud

170
00:10:57,090 --> 00:11:00,430
Rwy'n ychwanegu eitem hon, ac mae'n ynghyd â gwerth hwn,

171
00:11:00,430 --> 00:11:02,810
sy'n golygu ei fod yn anghyflawn.

172
00:11:02,810 --> 00:11:04,970
Ac yna dwi'n ail-lunio rhestr i-wneud.

173
00:11:04,970 --> 00:11:09,220
Yn awr, yr wyf yn sylwi wedi ychwanegu y swyddogaeth drawTodoList.

174
00:11:09,220 --> 00:11:11,760
Mae hyn yn cymryd llawer y cod oedd gennym o'r blaen,

175
00:11:11,760 --> 00:11:15,320
yn y bôn yn clirio allan y blwch hwn ac yna yn tynnu newydd i-wneud rhestr.

176
00:11:15,320 --> 00:11:19,620
Ond sylwch fod y tu mewn o hyn ar gyfer dolen rydym yn ei wneud ychydig yn fwy yn awr.

177
00:11:19,620 --> 00:11:25,000
Rydym yn y bôn yn gwirio a yw'r eitem sy'n cyfateb i'r todo ith yma

178
00:11:25,000 --> 00:11:30,220
yn gyflawn, ac rydym yn ymddwyn yn wahanol yn y 2 amgylchiadau.

179
00:11:30,220 --> 00:11:32,790
Os yw'n gyflawn, rydym yn ychwanegu y tag del,

180
00:11:32,790 --> 00:11:35,360
sydd yn y bôn y ffordd y gallwch gael y streic drwy effaith

181
00:11:35,360 --> 00:11:38,190
croesi y rhestr i-wneud os yw'n gyflawn,

182
00:11:38,190 --> 00:11:42,200
ac os na, nid ydym yn ei gynnwys.

183
00:11:42,200 --> 00:11:45,030
Ac felly y math hwnnw o yn gofalu am hynny,

184
00:11:45,030 --> 00:11:49,140
>> a dyna un ffordd o gyflawni hyn.

185
00:11:49,140 --> 00:11:53,420
Ac yna sylwi pan mae'r defnyddiwr yn clicio un o'r rhain

186
00:11:53,420 --> 00:11:56,780
rydym yn toglo statws cwblhau ohono.

187
00:11:56,780 --> 00:12:02,170
Pan fydd y defnyddiwr yn clicio, byddwn yn gwrthdroi a yw'n cael ei gwblhau neu beidio,

188
00:12:02,170 --> 00:12:04,540
ac yna byddwn yn ail-lunio ei.

189
00:12:04,540 --> 00:12:06,190
Mae'r math hwn o waith.

190
00:12:06,190 --> 00:12:09,860
Mae gennym swyddogaethau hyn sy'n gwneud eu tasgau eu hunain,

191
00:12:09,860 --> 00:12:11,730
ac mae hyn yn iawn.

192
00:12:11,730 --> 00:12:14,110
A oes unrhyw beth y gallem ei wneud yn well am hyn, er bod?

193
00:12:14,110 --> 00:12:18,700
Hysbysiad gennym y 2 araeau byd-eang.

194
00:12:18,700 --> 00:12:23,550
Os oedd hyn yn C, ac roedd gennym 2 araeau y math hwnnw o cynrychioli

195
00:12:23,550 --> 00:12:25,800
data a oedd yn fath o ymwneud mewn rhyw ffordd

196
00:12:25,800 --> 00:12:30,140
yr hyn y byddem yn ei ddefnyddio yn C i gyfuno'r rhain 2 gae

197
00:12:30,140 --> 00:12:35,420
yn rhywbeth sy'n cyfuno'r ddau ddarn o wybodaeth?

198
00:12:35,420 --> 00:12:37,600
Unrhyw un am wneud awgrym?

199
00:12:37,600 --> 00:12:39,450
[Myfyrwyr ymateb anhyglyw]

200
00:12:39,450 --> 00:12:42,340
>> Yn union, fel y gallai rydym yn defnyddio rhyw fath o strwythur,

201
00:12:42,340 --> 00:12:44,960
ac os ydych yn meddwl yn ôl i, dyweder, pset 3,

202
00:12:44,960 --> 00:12:47,350
cofiwch cawsom geiriadur, ac yna cawsom oedd y gair

203
00:12:47,350 --> 00:12:50,230
oedd yn y geiriadur, a'r holl wybodaeth a gafodd ei rhoi at ei gilydd

204
00:12:50,230 --> 00:12:52,420
y tu mewn o ryw strwythur data.

205
00:12:52,420 --> 00:12:56,390
Un peth y gallaf ei wneud â'r cod hwn i osgoi cael y 2 araeau gwahanol

206
00:12:56,390 --> 00:13:01,760
ar gyfer darnau tebyg o wybodaeth gallaf eu cyfuno i mewn i wrthrych JavaScript.

207
00:13:01,760 --> 00:13:07,150
Gadewch i ni edrych ar hynny.

208
00:13:07,150 --> 00:13:11,740
Hysbysiad mai dim ond un amrywiaeth ar y brig yn awr

209
00:13:11,740 --> 00:13:17,650
a'r hyn yr wyf wedi ei wneud yw-ac mae hyn yn dim ond y gystrawen JavaScript ar gyfer math o

210
00:13:17,650 --> 00:13:21,350
creu fersiwn llythrennol o wrthrych,

211
00:13:21,350 --> 00:13:24,670
ac yn sylwi bod 2 eiddo, felly mae gennym y todo,

212
00:13:24,670 --> 00:13:29,660
ac mae'n cadw gyda'i gilydd gyda boed yn gyflawn neu'n anghyflawn.

213
00:13:29,660 --> 00:13:31,000
Mae hyn yn god tebyg iawn.

214
00:13:31,000 --> 00:13:35,310
Rydym yn defnyddio'r gwrthrychau JavaScript.

215
00:13:35,310 --> 00:13:38,600
Mae'r math hwn o bethau yn gwella.

216
00:13:38,600 --> 00:13:43,850
Fel hyn, mae pob meysydd hyn o wybodaeth gysylltiedig yn cael eu cadw gyda'i gilydd.

217
00:13:43,850 --> 00:13:46,410
Pan fyddwn yn mynd i hargraffu, gallwn gael mynediad i'r caeau.

218
00:13:46,410 --> 00:13:49,060
>> Hysbysiad sut rydym yn ei wneud todos [i]. Cwblhau

219
00:13:49,060 --> 00:13:52,880
yn hytrach na gwirio y casgliad cyflawn ar wahân,

220
00:13:52,880 --> 00:13:56,560
ac yn sylwi pan fyddwn am gael y llinyn i-wneud ydym yn ei gael ar yr eiddo i wneud

221
00:13:56,560 --> 00:13:58,750
o'r todo, felly y math hwn o yn gwneud synnwyr gan fod

222
00:13:58,750 --> 00:14:01,660
pob eitem hyn eiddo cynhenid ​​am y peth.

223
00:14:01,660 --> 00:14:05,650
Mae ganddo todo, ac mae wedi boed yn gyflawn ai peidio.

224
00:14:05,650 --> 00:14:11,540
Nid yw gormod o newidiadau swyddogaethol yno, dim ond ychwanegu rhai mwy i'r cod.

225
00:14:11,540 --> 00:14:13,430
Mae hyn yn welliant ar rai flaen, dde?

226
00:14:13,430 --> 00:14:16,030
Yr wyf yn golygu, yr ydym ddileu ffactorau dyluniad ychydig.

227
00:14:16,030 --> 00:14:20,350
Nawr rydym wedi gwrthwynebu yn y bôn grynhoi y data hwn.

228
00:14:20,350 --> 00:14:27,130
A oes unrhyw beth mwy y gallem ei wneud oddi yma o ran JavaScript?

229
00:14:27,130 --> 00:14:31,810
Fel rhybudd bod y cod hwn i'r dde yma

230
00:14:31,810 --> 00:14:34,760
ar gyfer cael y HTML mewnol o div

231
00:14:34,760 --> 00:14:40,520
ychydig, mae'n debyg, o hyd.

232
00:14:40,520 --> 00:14:45,100
Mae document.getElementByID ("todos"). InnerHTML.

233
00:14:45,100 --> 00:14:48,400
Un peth y gallem ei wneud er mwyn gwneud y cod hwn yn edrych ychydig yn cyfeillgar

234
00:14:48,400 --> 00:14:51,450
felly ni fyddai'n rhaid i mi gadw sgrolio chwith ac i'r dde, yn ôl ac ymlaen,

235
00:14:51,450 --> 00:14:58,480
yw y gallai wyf yn defnyddio llyfrgell fel jQuery.

236
00:14:58,480 --> 00:15:02,710
>> Gadewch i ni edrych ar Seminar 2,

237
00:15:02,710 --> 00:15:05,880
ac mae hyn yn yr un cod, ond mae wedi ei wneud gyda jQuery.

238
00:15:05,880 --> 00:15:08,790
Efallai nad ydych yn rhy gyfarwydd â jQuery,

239
00:15:08,790 --> 00:15:11,510
ond dim ond yn gwybod bod jQuery yn fath o lyfrgell ar gyfer JavaScript

240
00:15:11,510 --> 00:15:15,910
sy'n ei gwneud yn haws i wneud pethau fel mynediad i elfennau unigol o'r DOM.

241
00:15:15,910 --> 00:15:21,280
Yma, yn hytrach na dweud document.getElementByID ("todos"). InnerHTML

242
00:15:21,280 --> 00:15:25,210
Gallaf ddefnyddio'r llawer ffordd lanach yn jQuery,

243
00:15:25,210 --> 00:15:28,490
sydd ychydig i ddefnyddio detholwyr.

244
00:15:28,490 --> 00:15:31,300
Fel y gwelwch, y cod hwn yn cael ychydig o glanach,

245
00:15:31,300 --> 00:15:35,770
debyg iawn swyddogaethol, ond dyna'r syniad.

246
00:15:35,770 --> 00:15:37,980
Rydym wedi gweld un neu ddau o bethau hyd yn hyn,

247
00:15:37,980 --> 00:15:42,010
felly rydym yn dechrau gyda gweithredu JavaScript dim ond amrwd.

248
00:15:42,010 --> 00:15:45,370
Rydym yn ychwanegu nodweddion newydd ac yn dangos sut y gallwn ei gwella gyda

249
00:15:45,370 --> 00:15:49,090
dim ond yr hyn sydd gennym yn JavaScript.

250
00:15:49,090 --> 00:15:53,300
>> A oes unrhyw un yn gweld unrhyw anawsterau gyda'r cynllun hwn?

251
00:15:53,300 --> 00:16:01,090
Sef, yr wyf yn dyfalu-neu nid o reidrwydd anawsterau, ond gadewch i ni ddweud

252
00:16:01,090 --> 00:16:04,830
Nid oeddem yn gwneud prosiect i-wneud rhestr, ac yfory fe benderfynon ni

253
00:16:04,830 --> 00:16:10,320
roeddem am wneud rhestr groser neu brosiect rhestr siopa.

254
00:16:10,320 --> 00:16:14,150
Mae llawer o'r nodweddion hyn yn debyg iawn.

255
00:16:14,150 --> 00:16:19,080
Mae llawer o'r pethau yr ydym am i fynd allan o'r JavaScript yn gyffredin iawn,

256
00:16:19,080 --> 00:16:23,820
ac mae hyn yn tanlinellu'r angen am ryw fath o ffordd o

257
00:16:23,820 --> 00:16:25,670
gwneud hyn yn haws i'w wneud.

258
00:16:25,670 --> 00:16:30,400
Roedd rhaid i mi i adeiladu hyn i gyd fynediad HTML, hyn i gyd mynediad DOM,

259
00:16:30,400 --> 00:16:35,530
fel yr wyf i'n mynd i gynrychioli'r rhestr i-wneud â'r model hwn.

260
00:16:35,530 --> 00:16:39,130
Ac yn sylwi fy mod yn gyfrifol gan fod y datblygwr JavaScript

261
00:16:39,130 --> 00:16:42,890
am gadw'r HTML a JavaScript sydd gennyf mewn cydamseru.

262
00:16:42,890 --> 00:16:48,040
Nid oes dim yn awtomatig bod cynrychiolaeth JavaScript

263
00:16:48,040 --> 00:16:51,590
neu 'r rhestr i-wneud yn cael eu gwthio allan i HTML.

264
00:16:51,590 --> 00:16:54,000
Nid oes dim gorfodi hwnnw ac eithrio i mi.

265
00:16:54,000 --> 00:16:56,880
Roedd rhaid i mi ysgrifennu y raffl i-wneud rhestr swyddogaeth.

266
00:16:56,880 --> 00:17:01,650
Ac efallai na fydd-yr wyf yn golygu, mae'n rhesymol i wneud hynny,

267
00:17:01,650 --> 00:17:03,670
ond gall fod yn ddiflas weithiau.

268
00:17:03,670 --> 00:17:08,190
Os oes gennych brosiect mwy o faint, a allai fod yn anodd.

269
00:17:08,190 --> 00:17:10,720
>> Fframweithiau, un o ddibenion y fframweithiau

270
00:17:10,720 --> 00:17:14,060
yw symleiddio'r broses honno a math o ffactor allan

271
00:17:14,060 --> 00:17:16,950
hyn yn gyffredin-Amcana gallech ddweud batrymau-ddylunio

272
00:17:16,950 --> 00:17:20,700
bod pobl yn gyffredinol yn cael rhyw fath o ffordd o gynrychioli data,

273
00:17:20,700 --> 00:17:25,599
boed honno'n rhestr ffrindiau, boed hynny'n gwybodaeth map

274
00:17:25,599 --> 00:17:27,280
neu rywbeth neu restr i-wneud.

275
00:17:27,280 --> 00:17:30,660
Gyffredinol, mae rhai pobl yn ffordd o gynrychioli gwybodaeth,

276
00:17:30,660 --> 00:17:33,650
ac maent yn gyffredinol, mae angen i gadw'r fath wybodaeth yn cydamseru

277
00:17:33,650 --> 00:17:36,520
rhwng yr hyn y mae'r defnyddiwr yn gweld mewn rhyw fath o farn,

278
00:17:36,520 --> 00:17:39,850
siarad o ran fel farn model rheolwr a welsoch yn y ddarlith,

279
00:17:39,850 --> 00:17:45,400
ac yna y model, sydd, yn yr achos hwn yw hyn amrywiaeth JavaScript.

280
00:17:45,400 --> 00:17:49,020
Fframweithiau yn rhoi ffordd i ddatrys y broblem i ni.

281
00:17:49,020 --> 00:17:53,080
Nawr, gadewch i ni edrych ar y gweithredu hyn rhestr i-wneud

282
00:17:53,080 --> 00:18:02,360
mewn fframwaith o'r enw angularjs.

283
00:18:02,360 --> 00:18:04,650
Hyn yn ei. Hysbysiad mae'n cyd-fynd ar sleid.

284
00:18:04,650 --> 00:18:07,330
Nid oes yn rhaid i mi sgrolio i'r chwith ac i'r dde.

285
00:18:07,330 --> 00:18:10,460
Yn ôl pob tebyg nid yw'n rheswm gwych i argymell defnyddio fframwaith,

286
00:18:10,460 --> 00:18:20,120
ond rhybudd fydda'i fyth cyrchu elfennau HTML unigol yma?

287
00:18:20,120 --> 00:18:22,400
Ydw i'n byth yn mynd i mewn i'r DOM?

288
00:18:22,400 --> 00:18:26,120
A ydych yn gweld unrhyw document.getElementByID neu rywbeth fel 'na?

289
00:18:26,120 --> 00:18:29,870
Na, mae hynny'n mynd.

290
00:18:29,870 --> 00:18:35,590
>> Onglog yn ein helpu i gadw'r DOM ac mae ein cynrychiolaeth JavaScript o rywbeth

291
00:18:35,590 --> 00:18:40,430
math o mewn cydamseru, felly os nad yw yn y ffeil js,

292
00:18:40,430 --> 00:18:46,790
os nad oes ffordd o programmatically dod i bob un sy'n cynnwys HTML

293
00:18:46,790 --> 00:18:51,800
o'r JavaScript sut ydym ni'n cadw hyn mewn cydamseru?

294
00:18:51,800 --> 00:18:58,160
Os nad yw yn y. Ffeil js, mae'n rhaid iddo fod mewn HTML, dde?

295
00:18:58,160 --> 00:19:01,910
Mae hyn yn y fersiwn newydd o'r ffeil HTML,

296
00:19:01,910 --> 00:19:04,660
ac yn sylwi rydym wedi ychwanegu llawer yma.

297
00:19:04,660 --> 00:19:11,110
Hysbysiad mae hyn yn nodweddion newydd sy'n dweud ng-glicio a ng-dro ar ôl tro.

298
00:19:11,110 --> 00:19:15,650
Dull onglog tuag at ddatrys y broblem hon o anawsterau mewn dylunio

299
00:19:15,650 --> 00:19:19,130
yw gwneud y bôn HTML llawer mwy pwerus.

300
00:19:19,130 --> 00:19:24,420
Onglog yn ffordd o ganiatáu i chi wneud HTML ychydig yn fwy mynegiannol.

301
00:19:24,420 --> 00:19:30,520
Er enghraifft, gallaf ddweud fy mod i'n mynd i glymu neu rhwymo y blwch testun

302
00:19:30,520 --> 00:19:35,080
i yn amrywio o fewn fy cod JavaScript onglog.

303
00:19:35,080 --> 00:19:37,030
Mae'r ng-model yn gwneud yn union hynny.

304
00:19:37,030 --> 00:19:41,550
Sy'n dweud y bôn bod y tu mewn y blwch testun eitem,

305
00:19:41,550 --> 00:19:45,000
dim ond cysylltu hynny â'r new_todo_description amrywiol

306
00:19:45,000 --> 00:19:47,870
o fewn y cod JavaScript.

307
00:19:47,870 --> 00:19:51,600
Dyna bwerus iawn gan nad oes rhaid i mi fynd yn benodol i

308
00:19:51,600 --> 00:19:53,310
y DOM i gael y wybodaeth honno.

309
00:19:53,310 --> 00:19:56,250
Nid oes rhaid i mi ddweud document.getElementByID.

310
00:19:56,250 --> 00:19:58,750
Nid oes rhaid i mi ddefnyddio jQueries fel mynediad DOM.

311
00:19:58,750 --> 00:20:03,280
Gallaf ei gysylltu gyda amrywio, ac yna pan fyddaf yn newid hynny amrywiol

312
00:20:03,280 --> 00:20:07,400
mewn JavaScript mae'n cadw mewn cytgord â'r HTML,

313
00:20:07,400 --> 00:20:11,640
er mwyn symleiddio'r broses o orfod mynd yn ôl ac ymlaen rhwng y ddau.

314
00:20:11,640 --> 00:20:18,260
A yw hynny'n gwneud synnwyr?

315
00:20:18,260 --> 00:20:22,060
>> Ac yn sylwi nad oes cod mynediad HTML.

316
00:20:22,060 --> 00:20:27,760
Rydym wedi gwneud HTML yn fwy pwerus yn unig,

317
00:20:27,760 --> 00:20:32,070
ac yn awr, er enghraifft, rydym yn gallu gwneud pethau fel hyn,

318
00:20:32,070 --> 00:20:38,610
fel pan fyddwch yn clicio ar hyn, ffoniwch y swyddogaeth hon o fewn cwmpas todos.js,

319
00:20:38,610 --> 00:20:43,410
a gallem wneud hynny o'r blaen, ond mae yna bethau eraill, fel hyn ng-model,

320
00:20:43,410 --> 00:20:47,020
ac yn sylwi ar hyn ng-dro ar ôl tro.

321
00:20:47,020 --> 00:20:51,520
Beth ydych chi'n meddwl bod hyn yn ei wneud?

322
00:20:51,520 --> 00:20:54,390
Dyma ein rhestr heb drefn o'r blaen.

323
00:20:54,390 --> 00:20:56,470
Mae gennym y tagiau ul,

324
00:20:56,470 --> 00:21:03,710
ond fydda'i fyth bai'n gwneud y rhestr y tu mewn y cod JavaScript?

325
00:21:03,710 --> 00:21:09,280
Dydw i ddim erioed bai'n gwneud y rhestr yn benodol.

326
00:21:09,280 --> 00:21:11,580
Sut mae hyn yn gweithio?

327
00:21:11,580 --> 00:21:16,410
Wel, y ffordd onglog yn cyflawni'r hyn yn gelwir hyn yn ailadrodd.

328
00:21:16,410 --> 00:21:22,760
Yn y bôn mae hyn yn dweud fy mod eisiau argraffu HTML hon

329
00:21:22,760 --> 00:21:26,240
ar gyfer pob tu mewn todo o fy todos arae.

330
00:21:26,240 --> 00:21:31,850
Y tu mewn o todos.jr mae amrywiaeth todos dde yma,

331
00:21:31,850 --> 00:21:37,910
a bydd hyn yn dweud ewch onglog drwy'r amrywiaeth, ac ar gyfer pob elfen byddwch yn gweld

332
00:21:37,910 --> 00:21:41,390
Rwyf am i chi argraffu'r HTML hwn.

333
00:21:41,390 --> 00:21:44,620
Mae hyn yn fath o anhygoel oherwydd gall Fi jyst gwneud hyn

334
00:21:44,620 --> 00:21:47,760
heb orfod ysgrifennu ar gyfer dolen,

335
00:21:47,760 --> 00:21:52,250
sydd, am i-wneud rhestr a oedd dim ond 30 o linellau o god

336
00:21:52,250 --> 00:21:54,700
Efallai na fydd y peth mwyaf buddiol,

337
00:21:54,700 --> 00:22:01,240
ond os oes gennych brosiect mawr, gallai hyn gael gyfleus iawn.

338
00:22:01,240 --> 00:22:06,100
>> Mae hwn yn un ateb i'r broblem hon, gan ei wneud yn fwy pwerus HTML,

339
00:22:06,100 --> 00:22:10,820
ac sy'n ein galluogi i gadw JavaScript a HTML yn cydamseru.

340
00:22:10,820 --> 00:22:13,220
Mae yna ffyrdd posibl eraill i ddatrys y broblem,

341
00:22:13,220 --> 00:22:15,320
ac nid yw pob fframwaith yn gwneud hyn.

342
00:22:15,320 --> 00:22:17,720
Nid yw pob fframwaith yn gweithio ar hyd y llinellau hyn.

343
00:22:17,720 --> 00:22:19,490
Mae rhai fframweithiau wahanol ddulliau,

344
00:22:19,490 --> 00:22:23,310
ac efallai y byddwch yn dod o hyd i eich bod yn mwynhau codio mewn un fframwaith dros y llall.

345
00:22:23,310 --> 00:22:26,160
Gadewch i ni edrych ar un yn fwy.

346
00:22:26,160 --> 00:22:30,060
Mae hyn yn y rhestr i-wneud codio i fyny mewn fframwaith a elwir yn asgwrn cefn.

347
00:22:30,060 --> 00:22:33,250
Rydw i'n mynd i fynd drwy hyn yn gyflym.

348
00:22:33,250 --> 00:22:38,300
Byddaf yn dechrau gyda'r HTML cyn i ni fynd yno.

349
00:22:38,300 --> 00:22:40,290
Un eiliad.

350
00:22:40,290 --> 00:22:43,950
Gan ddechrau gyda'r HTML, fel y byddwch yn sylwi, mae ein HTML yn debyg iawn

351
00:22:43,950 --> 00:22:50,000
i'r hyn yr oedd o'r blaen, felly nid yn rhy fawr newydd ar y blaen.

352
00:22:50,000 --> 00:22:55,410
Ond mae ein ffeil js yn ychydig yn wahanol.

353
00:22:55,410 --> 00:23:00,360
Asgwrn cefn math o wedi y syniad hwn, neu'n adeiladu ar y syniad

354
00:23:00,360 --> 00:23:04,750
fod llawer o'r hyn yr ydym yn ei wneud â, dyweder, ein prosiectau JavaScript

355
00:23:04,750 --> 00:23:09,110
yn meddwl am fodelau a chasgliadau o'r modelau hyn.

356
00:23:09,110 --> 00:23:12,510
Gallai hyn fod, er enghraifft, llun a chasgliadau o ffotograffau,

357
00:23:12,510 --> 00:23:16,230
neu y syniad o ffrind a chasgliadau o ffrindiau.

358
00:23:16,230 --> 00:23:20,700
Ac oftentimes pan fyddwn ni'n rhaglennu ceisiadau JavaScript

359
00:23:20,700 --> 00:23:25,340
byddwn yn trefnu o gynrychioli y syniad o gael casgliad o ffrindiau

360
00:23:25,340 --> 00:23:29,500
rywsut yn JavaScript, ac asgwrn cefn yn rhoi haen hwn yn ein

361
00:23:29,500 --> 00:23:33,040
ar ben araeau a gwrthrychau presennol JavaScript yn

362
00:23:33,040 --> 00:23:38,300
i wneud pethau yn fwy pwerus â hynny yn haws.

363
00:23:38,300 --> 00:23:41,870
>> Yma rwyf wedi diffinio model i-wneud,

364
00:23:41,870 --> 00:23:44,630
ac nid oes rhaid i chi boeni gormod am y gystrawen,

365
00:23:44,630 --> 00:23:48,730
ond sylwi bod hyn yn un o'r nodweddion hyn?

366
00:23:48,730 --> 00:23:53,190
Mae ganddo faes diofyn.

367
00:23:53,190 --> 00:23:56,640
Asgwrn cefn yn caniatáu i mi nodi eisoes oddi ar y ystlumod

368
00:23:56,640 --> 00:24:00,190
unrhyw newydd i-wneud fy mod yn creu yn mynd i gael diffygion hyn.

369
00:24:00,190 --> 00:24:04,100
Yn awr yr wyf yn gallu addasu hyn, ond y gallu i nodi'r diffygion

370
00:24:04,100 --> 00:24:07,220
yn braf, ac mae'n fath o gyfleus oherwydd nad yw hyn yn rhywbeth y mae fel

371
00:24:07,220 --> 00:24:10,430
gynhenid ​​yn JavaScript, ac erbyn hyn nid oes rhaid i yn benodol i

372
00:24:10,430 --> 00:24:12,430
dweud bod y todos yn anghyflawn.

373
00:24:12,430 --> 00:24:19,190
Gallaf ddweud dde oddi ar y ystlumod a todos yn mynd i gael ei farcio fel un anghyflawn.

374
00:24:19,190 --> 00:24:21,300
Hysbysiad yna beth yw hyn?

375
00:24:21,300 --> 00:24:25,520
Nawr Mae gen i restr i-wneud, ac mae hynny'n casgliad.

376
00:24:25,520 --> 00:24:30,960
Sylwch ar y maes sy'n gysylltiedig â model sy'n dweud todo.

377
00:24:30,960 --> 00:24:33,390
Mae hyn yn fy ffordd o ddweud wrth asgwrn cefn y

378
00:24:33,390 --> 00:24:37,350
Rydw i'n mynd i fod yn meddwl am casgliad o hyn todos unigol.

379
00:24:37,350 --> 00:24:42,140
Mae hyn yn y bôn y strwythur model ar gyfer fy rhaglen.

380
00:24:42,140 --> 00:24:44,980
Mae gen i syniad hwn o gasgliad,

381
00:24:44,980 --> 00:24:48,960
ac yn y bôn yr eitemau a gynhwysir yn y casgliad i gyd yn mynd i fod yn todos hyn,

382
00:24:48,960 --> 00:24:51,910
ac mae hynny'n naturiol iawn yn yr ystyr

383
00:24:51,910 --> 00:24:59,890
oherwydd fy mod yn cael todos, ac yr wyf yn eu cael mewn casgliad.

384
00:24:59,890 --> 00:25:02,940
>> Gadewch i ni edrych ar ychydig mwy o hyn.

385
00:25:02,940 --> 00:25:05,900
Dyma farn asgwrn cefn.

386
00:25:05,900 --> 00:25:08,890
Y peth arall sy'n asgwrn cefn yn dweud yw bod

387
00:25:08,890 --> 00:25:14,660
llawer o'r modelau eich bod yn meddwl am neu hyd yn oed gasgliadau

388
00:25:14,660 --> 00:25:19,150
yn mynd i angen i chi gael rhyw ffordd o gael eu harddangos.

389
00:25:19,150 --> 00:25:21,900
Mae angen i ni wneud y rhestr i-wneud,

390
00:25:21,900 --> 00:25:25,460
ac ni fyddai'n braf pe gallem ddarparu ar gyfer pob model

391
00:25:25,460 --> 00:25:28,390
neu gysylltu gyda phob model farn hon

392
00:25:28,390 --> 00:25:34,020
sy'n caniatáu i ni Amcana gysylltu'r ddau at ei gilydd?

393
00:25:34,020 --> 00:25:38,320
O'r blaen, roedd rhaid i ni ddefnyddio ar gyfer dolen fyddai'n rhedeg drwy

394
00:25:38,320 --> 00:25:41,130
bob todo yn ein rhestr ac yna ei argraffu arno yma

395
00:25:41,130 --> 00:25:44,650
gallwn bôn gysylltu â'r model hwn.

396
00:25:44,650 --> 00:25:47,550
Mae hon yn farn i-wneud.

397
00:25:47,550 --> 00:25:50,550
Mae hyn yn gysylltiedig â'r todo a welsom yn gynharach.

398
00:25:50,550 --> 00:25:54,940
Bellach mae pob todo yn displayable neu renderable

399
00:25:54,940 --> 00:25:56,960
gan y i-wneud barn.

400
00:25:56,960 --> 00:25:59,440
Sylwi ar rai o'r meysydd.

401
00:25:59,440 --> 00:26:05,880
Beth yn eich barn chi tagName yw hwn, tagName: li?

402
00:26:05,880 --> 00:26:09,790
Cofiwch o blaen pan roeddem am wneud yn todo

403
00:26:09,790 --> 00:26:16,700
byddai'n rhaid i ni baru yn benodol ein todos gyda'r tag li.

404
00:26:16,700 --> 00:26:21,080
Nawr rydym yn dweud bod lle mae hyn todo yn mynd i fyw

405
00:26:21,080 --> 00:26:25,250
yn mynd i fod y tu mewn o tag li.

406
00:26:25,250 --> 00:26:31,440
Ac yn awr rydym hefyd yn cysylltu digwyddiadau gyda'n todos.

407
00:26:31,440 --> 00:26:34,320
>> Mae gan bob todo Mae un digwyddiad hwn.

408
00:26:34,320 --> 00:26:38,480
Os ydych yn clicio 'n bert lawer y botwm togl, dyna beth rwy'n ei ddweud yno,

409
00:26:38,480 --> 00:26:43,080
Yna, yn y bôn nodi todo fel y gwrthwyneb i'r hyn yr oedd cyn

410
00:26:43,080 --> 00:26:45,890
ac yna ail-wneud y cais.

411
00:26:45,890 --> 00:26:47,810
Mae hyn yn fath o debyg i'r cod blaen.

412
00:26:47,810 --> 00:26:50,730
Cofiwch pan fyddwn yn nodi fel arall neu-

413
00:26:50,730 --> 00:26:52,410
ac yna rydym yn ail-rendro hynny.

414
00:26:52,410 --> 00:26:57,750
Ond yn sylwi nawr y digwyddiad hwn yn arfer bod yn rhywbeth a oedd yn y HTML.

415
00:26:57,750 --> 00:26:59,640
Roedd yn eistedd yno.

416
00:26:59,640 --> 00:27:01,410
Roedd gan y botwm yn cliciwch ar.

417
00:27:01,410 --> 00:27:05,310
Pan fyddwch yn clicio ar y botwm, mae'n fath o wneud pethau i

418
00:27:05,310 --> 00:27:07,210
a sefydlwyd y todo i fod yn anghyflawn.

419
00:27:07,210 --> 00:27:11,180
Yma rydym wedi cysylltiedig y digwyddiad hwnnw o glicio ar y botwm togl

420
00:27:11,180 --> 00:27:15,830
a gwrthdroi boed ar neu oddi â'r farn hon.

421
00:27:15,830 --> 00:27:20,480
>> Mae hon yn ffordd braf o sefydlu digwyddiad hwn fel ei bod yn iawn rhwymo dynn

422
00:27:20,480 --> 00:27:26,980
y farn hon, ac felly sylwi ar y un yn fwy.

423
00:27:26,980 --> 00:27:31,050
Rwy'n cael y dull rendro, ac nid oes rhaid i ni fynd drwy'r manylion.

424
00:27:31,050 --> 00:27:33,650
Mae'n fath o debyg i'r hyn a oedd gennym o'r blaen,

425
00:27:33,650 --> 00:27:36,070
ond sylwi Dydw i ddim yn dolennu trwy unrhyw beth.

426
00:27:36,070 --> 00:27:40,700
Dydw i ddim yn argraffu y tag ul sy'n fath o ddweud Rydw i'n mynd i argraffu pob un o'r elfennau.

427
00:27:40,700 --> 00:27:46,610
Rwy'n darparu'r ymarferoldeb ar gyfer rendro yr un yma i-wneud eitem.

428
00:27:46,610 --> 00:27:49,400
Mae hwn yn gysyniad pwerus iawn oherwydd y bôn

429
00:27:49,400 --> 00:27:53,600
ein rhestr i-wneud yn cynnwys yr holl todos hyn, ac os gallwn ni yn y bôn nodi

430
00:27:53,600 --> 00:27:56,890
y ffordd i wneud un o'r todos rhai

431
00:27:56,890 --> 00:28:04,230
yna gallwn gael ein asgwrn cefn pwerus per se golygu pob un o'r todos

432
00:28:04,230 --> 00:28:07,760
drwy ffonio'r dull rendr ar y todos unigol.

433
00:28:07,760 --> 00:28:14,180
Mae hwn yn gysyniad sy'n ddefnyddiol yma.

434
00:28:14,180 --> 00:28:18,160
Erbyn hyn, mae Cwestiwn da i'w ofyn yw sut mae cais hwn yn cael ei roi at ei gilydd?

435
00:28:18,160 --> 00:28:21,200
Oherwydd ein bod yn cael y gallu i wneud un todo,

436
00:28:21,200 --> 00:28:23,860
ond sut mae sicrhau bod y syniad o todos lluosog?

437
00:28:23,860 --> 00:28:25,100
>> Gadewch i ni edrych ar hynny.

438
00:28:25,100 --> 00:28:27,100
Mae hyn yn y rhan olaf.

439
00:28:27,100 --> 00:28:29,740
Hysbysiad gennym i-wneud rhestr barn yma,

440
00:28:29,740 --> 00:28:34,440
ac yn sylwi mae hefyd yn farn.

441
00:28:34,440 --> 00:28:36,970
Ac i fynd dros un neu ddau o bethau,

442
00:28:36,970 --> 00:28:45,280
Bydd y dull ymgychwyn gael ei alw pan fyddwn yn creu rhestr hon i-do.

443
00:28:45,280 --> 00:28:52,630
Fel y gallwch weld, mae fel creu rhestr i-wneud ac yn ei gysylltu â'r farn hon.

444
00:28:52,630 --> 00:28:57,860
Ac yna yr wyf yn ychwanegu swyddogaethau yma, felly yn y bôn pan fyddwch yn ychwanegu eitem-

445
00:28:57,860 --> 00:29:01,440
mae hyn yn debyg i'r dull addItem welsom cyn-

446
00:29:01,440 --> 00:29:07,430
Rydw i'n mynd i greu gwrthrych todo newydd, ac yn sylwi rwy'n galw mewn gwirionedd

447
00:29:07,430 --> 00:29:13,080
dull hwn todo newydd, felly mae hyn yn cael ei ddarparu gan asgwrn cefn,

448
00:29:13,080 --> 00:29:16,010
a gallaf basio yn fy eiddo yma.

449
00:29:16,010 --> 00:29:23,710
Ac yn awr y bydd pob todo fy mod yn creu defnyddio hwn yn cael y functionality a welsom o'r blaen.

450
00:29:23,710 --> 00:29:28,140
Hysbysiad Rwy'n glirio y blwch testun cyn-ychydig bach o fanylion-

451
00:29:28,140 --> 00:29:32,900
ac yna rwy'n ychwanegu casgliad hwn.

452
00:29:32,900 --> 00:29:37,630
>> Mae hyn bron yn ymddangos yn rhyfedd oherwydd cyn i ni yn unig wedi i wneud hynny todos.push,

453
00:29:37,630 --> 00:29:43,310
ac yna rydym yn eu gwneud, a gall hyn ymddangos yn fwy cymhleth ar gyfer y prosiect penodol hwn,

454
00:29:43,310 --> 00:29:46,980
ac efallai y byddwch yn canfod bod asgwrn cefn neu hyd yn oed onglog neu unrhyw fframwaith arall

455
00:29:46,980 --> 00:29:50,790
nid yw'n addas ar gyfer eich prosiect penodol, ond yr wyf yn credu ei fod yn bwysig i feddwl am

456
00:29:50,790 --> 00:29:54,100
beth mae hyn yn ei olygu ar raddfa fwy ar gyfer prosiectau mwy,

457
00:29:54,100 --> 00:29:56,610
oherwydd os oedd gennym brosiect mwy lle rydym yn cynrychioli

458
00:29:56,610 --> 00:30:00,860
rhywfaint o gasgliad wirioneddol gymhleth, rhywbeth dyfnach na dim ond rhestr i-wneud,

459
00:30:00,860 --> 00:30:04,490
gadewch i ni ddweud rhestr ffrindiau neu rywbeth fel 'na, gallai hyn ddod i mewn' n hylaw

460
00:30:04,490 --> 00:30:09,620
oherwydd gallem drefnu ein cod mewn ffordd wirioneddol gyfleus,

461
00:30:09,620 --> 00:30:12,550
mewn ffordd a fyddai'n ei gwneud yn haws i rywun arall

462
00:30:12,550 --> 00:30:16,820
oedd am godi prosiect i adeiladu arno.

463
00:30:16,820 --> 00:30:21,450
Gallwch weld bod hyn yn rhoi llawer o strwythur.

464
00:30:21,450 --> 00:30:26,580
Ac yna dwi'n galw rendr ar y addItem hwn.

465
00:30:26,580 --> 00:30:31,050
Rendr, fel y gallwch weld, ac nid oes rhaid i chi ddeall y gystrawen llawn,

466
00:30:31,050 --> 00:30:37,790
ond yn y bôn ar gyfer pob model ei fod yn mynd i alw y dull rendr unigol.

467
00:30:37,790 --> 00:30:41,500
Dyna math o ble mae'n dod.

468
00:30:41,500 --> 00:30:44,140
Gadewch i 'jyst yn nodi sut i wneud y todos unigol,

469
00:30:44,140 --> 00:30:47,310
ac yna gadewch i ni glud nhw at ei gilydd yn ei gyfanrwydd.

470
00:30:47,310 --> 00:30:49,810
Ond mae hyn yn ffordd o dynnu,

471
00:30:49,810 --> 00:30:55,470
gan y byddwn yn newid y ffordd y byddaf yn penderfynu gwneud y todos unigol,

472
00:30:55,470 --> 00:30:57,940
ac ni fyddai'n rhaid i mi newid unrhyw un o'r cod hwn.

473
00:30:57,940 --> 00:31:00,700
Dyna fath o oer.

474
00:31:00,700 --> 00:31:08,540
>> A oes unrhyw un gennych unrhyw gwestiynau am fframweithiau JavaScript?

475
00:31:08,540 --> 00:31:14,310
[Cwestiwn anhyglyw Myfyrwyr]

476
00:31:14,310 --> 00:31:16,050
Oh, yn sicr, dyna gwestiwn mawr.

477
00:31:16,050 --> 00:31:19,080
Y cwestiwn oedd sut oedd yr wyf yn cynnwys y fframweithiau?

478
00:31:19,080 --> 00:31:22,970
Mae'r rhan fwyaf o fframweithiau JavaScript yn y bôn dim ond ffeiliau js

479
00:31:22,970 --> 00:31:25,740
y gallwch ei gynnwys ar frig eich cod.

480
00:31:25,740 --> 00:31:29,830
Rhybudd yn y pen rhan o fy HTML gennyf yr holl tagiau sgript hyn,

481
00:31:29,830 --> 00:31:34,250
a'r tag sgript derfynol yw'r cod ydym wedi ysgrifennu.

482
00:31:34,250 --> 00:31:38,820
Ac yna y 3 godau fframwaith yw tagiau sgript yn unig hefyd.

483
00:31:38,820 --> 00:31:42,110
Rwy'n eu cynnwys o hyn a elwir yn CDN,

484
00:31:42,110 --> 00:31:46,200
sy'n caniatáu i mi gael gan rywun arall yn y fan hon

485
00:31:46,200 --> 00:31:57,930
ond mae pob fframwaith, gall hyn-you 'n bert lawer dod o hyd i'r cynnwys

486
00:31:57,930 --> 00:32:03,540
ar gyfer llyfrgell JavaScript penodol ar gael ar rai CDN neu rywbeth fel 'na,

487
00:32:03,540 --> 00:32:05,570
ac yna gallwch gynnwys tagiau sgript hyn.

488
00:32:05,570 --> 00:32:07,600
A yw hynny'n gwneud synnwyr?

489
00:32:07,600 --> 00:32:09,500
Cool.

490
00:32:09,500 --> 00:32:11,730
>> Mae'r rhai yna 2 ddulliau gwahanol.

491
00:32:11,730 --> 00:32:14,640
Nid y rheini yw'r unig ddulliau o ddatrys y broblem hon.

492
00:32:14,640 --> 00:32:17,080
Mae yna lawer o wahanol bethau sy'n

493
00:32:17,080 --> 00:32:19,490
gallai rhywun ei wneud, ac mae llawer o fframweithiau i maes 'na.

494
00:32:19,490 --> 00:32:23,300
Onglog ac nid yw asgwrn cefn yn dweud y stori gyfan.

495
00:32:23,300 --> 00:32:26,370
Pob lwc gyda'ch prosiectau terfynol, a diolch yn fawr iawn.

496
00:32:31,960 --> 00:32:35,000
[CS50.TV]