[Powered by Google Translate] [Seminar] [Fframweithiau JavaScript:? Pam a Sut]
[Kevin Schmid] [Prifysgol Harvard]
[Mae hyn yn CS50.] [CS50.TV]
>> Hi, pawb. Croeso i'r seminar Fframweithiau JavaScript.
Fy enw i yw Kevin, a heddiw yr wyf i'n mynd i fod yn siarad am fframweithiau JavaScript,
ac nid y nod y seminar hwn yw i fynd â chi i, dyweder, meistroli fframwaith penodol fel y cyfryw
ond i roi cyflwyniad eang i chi gwpl o fframweithiau
ac yn dangos pam y byddem yn byth yn dymuno defnyddio fframwaith.
>> Cyn imi wneud hynny, byddaf yn rhoi rhywfaint o gefndir yn JavaScript,
ac yna byddwn yn mynd ag ef oddi yno.
Rydym yn mynd i ddechrau drwy roi rhestr i-wneud.
Dyma ein rhestr o dasgau ar gyfer heddiw.
Mae'n fath o ddoniol. Mae'n rhaid i ni weithredu rhestr i-wneud yn JavaScript.
Mae hyn yn beth mae'n mynd i edrych fel, felly dyna ein nod cyntaf.
Nid ydym yn mynd i ddefnyddio fframwaith i wneud hynny.
Rydym yn mynd i cod JavaScript a chael y rhestr i-wneud i weithio.
Yna, rydym yn mynd i wella dyluniad heb ddefnyddio fframwaith.
Rydym yn mynd i drafod amryw o bethau y gallwn ei wneud gyda dim ond ei ben ei hun JavaScript
i wneud ein i-wneud rhestr ychydig gynllunio yn fwy yn dda.
Yna, rydym yn mynd i daflu mewn rhai jQuery,
ac yna rydym yn mynd i edrych ar yr un rhestr i-wneud,
dim ond rhoi ar waith mewn fframweithiau gwahanol, a byddwn yn trafod
y manteision a'r anfanteision ar hyd y ffordd.
>> Gadewch i ni ddechrau gweithredu'r rhestr i-wneud.
Gadewch i ni ddweud ein bod yn rhoi HTML hwn.
Rydw i'n mynd i wneud hyn yn llai ychydig.
Fel y gallwch weld, mae gennyf ychydig o bennawd sy'n dweud todo
ac ychydig o flwch lle y gallaf roi disgrifiad o todo
ac yna botwm eitem newydd, felly gadewch i ni geisio mynd i mewn i todo newydd at y rhestr hon.
Rhowch seminar fframweithiau JavaScript,
ac rwy'n taro eitem newydd.
Rwy'n cael y rhybudd JavaScript sy'n dweud weithredu mi.
Mae'n rhaid i ni weithredu.
Gadewch i ni edrych ar y cod ar gyfer hyn, mae'r HTML a JavaScript.
Dyma ein HTML.
Fel y gallwch weld yma, dyma ein Todos bach header.
Dyna oedd y peth beiddgar ar y brig,
ac yna rydym yn cael y blwch mewnbwn gyda'r placeholder,
ac yna mae yn nodwedd arbennig o botwm hwn sy'n galw swyddogaeth hon addTodo.
A oes unrhyw un eisiau i ddyfalu beth yw'r cliciwch ar ei ddynodi?
[Myfyrwyr ymateb anhyglyw]
Da, cliciwch ar yn fath o fel digwyddiad,
fel glicio ar y llygoden yn unig yw digwyddiad, a beth rydym yn ei wneud
yw ein bod yn clymu achos o glicio botwm hwn i weithredu y swyddogaeth honno.
AddTodo yn y digwyddiad hwn trinydd ar gyfer glicio botwm.
>> Fel y gallwch weld, pan fyddaf yn clicio ar y botwm eitem newydd
y digwyddiad cliciwch ar yn cael ei danio, ac y swyddogaeth hon yn cael ei alw.
Gadewch i ni edrych ar swyddogaeth.
Fel y gallwch weld, dyma fy cod JavaScript hyd yn hyn.
Yr hyn yr wyf yn cael ar y brig yn strwythur data fyd-eang ar gyfer fy rhestr i-wneud.
Mae'n edrych fel arae. Dim ond amrywiaeth wag.
Ac yna yr wyf yn cael y swyddogaeth addTodo a welsom yn gynharach,
a'r unig linell o god i mewn 'na yn effro hwn.
Mae'n rhybuddio gweithredu mi, ac yna rwyf wedi 2 dasg wrth law.
Rhaid imi ychwanegu y todo i'r strwythur data byd-eang,
ac yna yr wyf am dynnu allan y rhestr i-wneud.
Dim byd rhy ffansi eto, ond JavaScript efallai y byddwch yn gyfarwydd â nhw,
felly dwi'n mynd i fynd yn araf ac adolygu hanfodion JavaScript yn y ffordd honno.
>> Gadewch i ni rhoi'r ergyd.
Lets 'ddeud y defnyddiwr yn mynd i mewn rhywbeth yn y blwch hwn.
Fi jyst deipio rhywbeth i mewn yma, testun.
Sut ydw i'n trefnu mynediad sy'n destun drwy JavaScript?
Cofiwch fod JavaScript, un o'i nodweddion sylfaenol yw ei fod yn rhoi i ni
y mynediad rhaglennol i'r DOM.
Mae'n ein galluogi i gael mynediad i elfennau a'u priodweddau y HTML gwirioneddol.
Mae'r ffordd yr ydym yn gwneud hynny gyda noeth esgyrn JavaScript
yw y gall yr ydym mewn gwirionedd yn defnyddio swyddogaeth yn JavaScript o'r enw getElementByID.
Yr wyf am i storio y testun sy'n cael ei deipio yno yn rhai amrywiol,
felly dw i'n mynd i ddweud newidyn newydd o'r enw new_todo,
ac yr wyf i'n mynd i gael yr elfen honno.
Mae hon yn swyddogaeth,. GetElementByID.
Ac yn awr fy mod yn cael elfen trwy adnabod, felly Fi angen 'r ID y blwch testun,
felly dwi wedi rhoi iddi y new_todo_description adnabod.
Dyna sut yr wyf i'n mynd i gael elfen.
Dyna fy nadl i swyddogaeth hon, i bennu pa ID gael.
Ac felly dyna elfen yn HTML, ac mae'n meddu ar nodweddion.
Rydych chi wedi gweld y rhain. Maent yn nodweddion.
Gelwir y priodoledd yr elfen testun sy'n storio fewnbwn y defnyddiwr yn cael ei gwerth.
I arbed y gwerth y blwch testun nawr mewn amrywiol yma o'r enw new_todo.
Yn awr yr wyf yn cael mynediad rhaglennol i newidyn hwn, sydd yn fath o oer
oherwydd erbyn hyn y gallaf ei wneud yw y gallaf ei ychwanegu at fy rhestr i-wneud.
>> Y ffordd y byddem yn gwneud hyn yn JavaScript-a pheidiwch â phoeni os ydych chi'n anghyfarwydd â hyn,
ond dim ond yn mynd trwyddo yn todos.push
oherwydd dyna enw fy strwythur data byd-eang yma,
ac yr wyf i'n mynd i wthio new_todo.
Mae hyn yn wych oherwydd yn awr yr wyf wedi ychwanegu at fy JavaScript
cynrychiolaeth o hynny i-wneud rhestr.
Ond yn awr sut ydw i'n ei gael yn ôl i'r HTML?
Mae'n rhaid i mi ddod o hyd i ffordd o ddatrys y gwthio yn ôl.
Mewn geiriau eraill, math o rhaid i mi dynnu hyn.
Yr hyn yr ydym yn mynd i wneud yw ein bod yn mynd i dynnu rhestr i-wneud.
Angen i mi ddiweddaru HTML arall ar y dudalen,
ac fel y gwelwch, yr wyf wedi gadael y cynhwysydd bach yma,
divider hon o'r dudalen sydd ID yn todos,
ac yr wyf i'n mynd i roi rhestr i-wneud yno.
Yn gyntaf yr wyf i'n mynd i glirio allan oherwydd, dyweder, roedd i-wneud rhestr oed yno.
Im 'yn cael yr elfen honno gan ID eto,
ac rwy'n defnyddio'r HTML mewnol yr elfen honno,
ac rwy'n mynd i glirio hynny.
Os byddwn yn gadael y cod hwn fel y mae, byddem yn gweld dim byd wag yno,
ac yn awr yr wyf am ddechrau rendro fy rhestr i-wneud newydd.
Rwy'n bôn yn mynd i ddileu fy rhestr i-wneud.
>> Nawr mewnol y tu mewn HTML y todos div yn gwbl glir,
ac yn awr mae angen i mi ddechrau ychwanegu fy rhestr.
Y peth cyntaf i mi am ychwanegu yn ôl yn y tag rhestr heb drefn,
sydd yn y bôn yn dynodi bod hyn yn ddechrau rhestr heb drefn.
Yn awr ar gyfer pob elfen yn fy todos amrywiaeth rwyf eisiau argraffu allan tu mewn y HTML.
Yr wyf am ei atodi ar waelod y rhestr.
Yn union fel yn C, gallaf ddefnyddio ar gyfer dolen, ac yr wyf i'n mynd i gychwyn ar ddechrau fy rhestr
yn elfen 0, ac yr wyf i'n mynd i fynd yr holl ffordd i hyd y rhestr.
Gallwn ni mewn gwirionedd yn cael hyd o fyrdd yn JavaScript ddefnyddio'r eiddo hyd.
Yn y bôn dw i'n mynd i wneud rhywbeth tebyg iawn tu mewn yma
i argraffu yr elfen honno.
Gallaf unwaith eto gael mynediad i'r div todos, yr eiddo mewnol HTML o hynny,
ac rwy'n mynd i ychwanegu ar yr eitem rhestr newydd, ac mae hynny'n mynd i gael ei amgylchynu gan
tag hwn li, ac yr wyf i'n mynd i concatenate gyda'r gweithredwr +,
a dyna'r elfen ith fy todos amrywiaeth,
ac yna dwi'n mynd i gau y tag.
Yn awr ar gyfer pob elfen byddwn yn ychwanegu cofnod rhestr newydd.
Ac yna i gyd mae gwir angen i ni ei wneud yw cau'r y tag.
Fi jyst angen i gau oddi ar y rhestr heb drefn tag.
>> Ydych chi'n cael blas ar sut mae hynny'n gweithio?
Mae hyn yn agor y rhestr gyfan.
Mae hyn yn ychwanegu elfennau unigol o'r rhestr todos at y rhestr,
ac yna sy'n cau'r rhestr gyfan, ac mae hyn yn fy swyddogaeth addTodo.
Yr wyf yn dechrau yn y bôn trwy gael y todo o'r blwch testun.
Hoffwn ychwanegu bod yr amrywiaeth todos, ac yna yr wyf yn ail-wneud y rhestr i-wneud.
Nawr gallaf ychwanegu eitemau at fy rhestr.
Mae hyn yn fath o gyffrous oherwydd mewn dim ond ychydig linellau o god
rydym wedi gwneud yn y bôn a i-wneud rhestr lle y gallwn ychwanegu eitemau.
Fawr.
Dyna fath o gyflwyniad sylfaenol i JavaScript.
Peidiwch â phoeni gormod am y gystrawen am y tro,
ond meddyliwch am hyn gysyniadol.
Roedd gennym rai HTML.
Cawsom blwch testun ar y dudalen y mae defnyddwyr yn y bôn yn caniatáu i mewnbwn eitem i-wneud i'w ychwanegu.
Ac yna rydym yn defnyddio JavaScript i nôl y todo o'r blwch testun.
Rydym yn storio y tu mewn i amrywiaeth JavaScript, sydd yn y bôn fel
ein cynrychiolaeth rhaglennol o'r rhestr i-wneud,
ac yna rydym yn argraffu allan.
Mae hyn yn todos.js.
>> Mae hyn yn fath o oer, ond sut y gallwn fynd â hyn ymhellach?
Wel, fel y gwelwch, nid yw hyn yn debyg i gyflawn i-wneud rhestr.
Er enghraifft, ni allaf farcio unrhyw un o'r eitemau hyn yn anghyflawn,
hoffi os oeddwn i eisiau reprioritize yr eitemau neu ddileu eitemau.
Mae hyn yn iawn, ond gallwn fynd â hyn ymhellach.
Dydw i ddim yn mynd i siarad gormod am ychwanegu nodweddion ychwanegol,
ond gallem gymryd hynny ymhellach.
Gadewch i ni siarad am ychwanegu un nodwedd fwy at y rhestr i-wneud,
sydd yn mynd i gael ei fod yn gallu gwirio unigolyn i-wneud eitem
ac wedi cael ei groesi allan, felly yn y bôn yn dweud Rwyf wedi gwneud hyn.
Gadewch i ni edrych ar rai cod a allai gyflawni hynny.
Sylwi ar yr hyn yr wyf wedi ei wneud ar y brig yn yr wyf wedi ychwanegu
amrywiaeth byd-eang newydd a elwir yn gyflawn.
Im 'yn y bôn defnyddio hyn i storio a yw'r eitemau ar y rhestr i-wneud
yn gyflawn ai peidio.
Mae hyn yn un ffordd o wneud hyn.
Os byddaf yn edrych ar y gweithredu hyn, yr arddangosfa,
yn y bôn os byddaf yn mynd i mewn i todo a phwysaf ar y botwm togl
mae'n croesi allan, felly mae pob eitem ar y rhestr hon yn cynnwys naill ai cyflawn
neu gyflwr anghyflawn, ac rwy'n defnyddio amrywiaeth arall i gynrychioli hynny.
>> Yn y bôn ar gyfer pob todo yn y todos amrywiaeth
mae eitem yn y casgliad cyflawn sy'n dangos y bôn
boed hynny yn gyflawn ai peidio.
Rwyf wedi cael i wneud newidiadau eithaf bach iawn i'r cod hwn,
felly dyma ein swyddogaeth addTodo.
Sylwch fod yma rwyf i'n gwthio ar y casgliad,
ac yna rwy'n gwthio 0 i'r amrywiaeth cyflawn,
yn y bôn ochr yn ochr â'r gwthio todo newydd i'w ddweud
Rwy'n ychwanegu eitem hon, ac mae'n ynghyd â gwerth hwn,
sy'n golygu ei fod yn anghyflawn.
Ac yna dwi'n ail-lunio rhestr i-wneud.
Yn awr, yr wyf yn sylwi wedi ychwanegu y swyddogaeth drawTodoList.
Mae hyn yn cymryd llawer y cod oedd gennym o'r blaen,
yn y bôn yn clirio allan y blwch hwn ac yna yn tynnu newydd i-wneud rhestr.
Ond sylwch fod y tu mewn o hyn ar gyfer dolen rydym yn ei wneud ychydig yn fwy yn awr.
Rydym yn y bôn yn gwirio a yw'r eitem sy'n cyfateb i'r todo ith yma
yn gyflawn, ac rydym yn ymddwyn yn wahanol yn y 2 amgylchiadau.
Os yw'n gyflawn, rydym yn ychwanegu y tag del,
sydd yn y bôn y ffordd y gallwch gael y streic drwy effaith
croesi y rhestr i-wneud os yw'n gyflawn,
ac os na, nid ydym yn ei gynnwys.
Ac felly y math hwnnw o yn gofalu am hynny,
>> a dyna un ffordd o gyflawni hyn.
Ac yna sylwi pan mae'r defnyddiwr yn clicio un o'r rhain
rydym yn toglo statws cwblhau ohono.
Pan fydd y defnyddiwr yn clicio, byddwn yn gwrthdroi a yw'n cael ei gwblhau neu beidio,
ac yna byddwn yn ail-lunio ei.
Mae'r math hwn o waith.
Mae gennym swyddogaethau hyn sy'n gwneud eu tasgau eu hunain,
ac mae hyn yn iawn.
A oes unrhyw beth y gallem ei wneud yn well am hyn, er bod?
Hysbysiad gennym y 2 araeau byd-eang.
Os oedd hyn yn C, ac roedd gennym 2 araeau y math hwnnw o cynrychioli
data a oedd yn fath o ymwneud mewn rhyw ffordd
yr hyn y byddem yn ei ddefnyddio yn C i gyfuno'r rhain 2 gae
yn rhywbeth sy'n cyfuno'r ddau ddarn o wybodaeth?
Unrhyw un am wneud awgrym?
[Myfyrwyr ymateb anhyglyw]
>> Yn union, fel y gallai rydym yn defnyddio rhyw fath o strwythur,
ac os ydych yn meddwl yn ôl i, dyweder, pset 3,
cofiwch cawsom geiriadur, ac yna cawsom oedd y gair
oedd yn y geiriadur, a'r holl wybodaeth a gafodd ei rhoi at ei gilydd
y tu mewn o ryw strwythur data.
Un peth y gallaf ei wneud â'r cod hwn i osgoi cael y 2 araeau gwahanol
ar gyfer darnau tebyg o wybodaeth gallaf eu cyfuno i mewn i wrthrych JavaScript.
Gadewch i ni edrych ar hynny.
Hysbysiad mai dim ond un amrywiaeth ar y brig yn awr
a'r hyn yr wyf wedi ei wneud yw-ac mae hyn yn dim ond y gystrawen JavaScript ar gyfer math o
creu fersiwn llythrennol o wrthrych,
ac yn sylwi bod 2 eiddo, felly mae gennym y todo,
ac mae'n cadw gyda'i gilydd gyda boed yn gyflawn neu'n anghyflawn.
Mae hyn yn god tebyg iawn.
Rydym yn defnyddio'r gwrthrychau JavaScript.
Mae'r math hwn o bethau yn gwella.
Fel hyn, mae pob meysydd hyn o wybodaeth gysylltiedig yn cael eu cadw gyda'i gilydd.
Pan fyddwn yn mynd i hargraffu, gallwn gael mynediad i'r caeau.
>> Hysbysiad sut rydym yn ei wneud todos [i]. Cwblhau
yn hytrach na gwirio y casgliad cyflawn ar wahân,
ac yn sylwi pan fyddwn am gael y llinyn i-wneud ydym yn ei gael ar yr eiddo i wneud
o'r todo, felly y math hwn o yn gwneud synnwyr gan fod
pob eitem hyn eiddo cynhenid ​​am y peth.
Mae ganddo todo, ac mae wedi boed yn gyflawn ai peidio.
Nid yw gormod o newidiadau swyddogaethol yno, dim ond ychwanegu rhai mwy i'r cod.
Mae hyn yn welliant ar rai flaen, dde?
Yr wyf yn golygu, yr ydym ddileu ffactorau dyluniad ychydig.
Nawr rydym wedi gwrthwynebu yn y bôn grynhoi y data hwn.
A oes unrhyw beth mwy y gallem ei wneud oddi yma o ran JavaScript?
Fel rhybudd bod y cod hwn i'r dde yma
ar gyfer cael y HTML mewnol o div
ychydig, mae'n debyg, o hyd.
Mae document.getElementByID ("todos"). InnerHTML.
Un peth y gallem ei wneud er mwyn gwneud y cod hwn yn edrych ychydig yn cyfeillgar
felly ni fyddai'n rhaid i mi gadw sgrolio chwith ac i'r dde, yn ôl ac ymlaen,
yw y gallai wyf yn defnyddio llyfrgell fel jQuery.
>> Gadewch i ni edrych ar Seminar 2,
ac mae hyn yn yr un cod, ond mae wedi ei wneud gyda jQuery.
Efallai nad ydych yn rhy gyfarwydd â jQuery,
ond dim ond yn gwybod bod jQuery yn fath o lyfrgell ar gyfer JavaScript
sy'n ei gwneud yn haws i wneud pethau fel mynediad i elfennau unigol o'r DOM.
Yma, yn hytrach na dweud document.getElementByID ("todos"). InnerHTML
Gallaf ddefnyddio'r llawer ffordd lanach yn jQuery,
sydd ychydig i ddefnyddio detholwyr.
Fel y gwelwch, y cod hwn yn cael ychydig o glanach,
debyg iawn swyddogaethol, ond dyna'r syniad.
Rydym wedi gweld un neu ddau o bethau hyd yn hyn,
felly rydym yn dechrau gyda gweithredu JavaScript dim ond amrwd.
Rydym yn ychwanegu nodweddion newydd ac yn dangos sut y gallwn ei gwella gyda
dim ond yr hyn sydd gennym yn JavaScript.
>> A oes unrhyw un yn gweld unrhyw anawsterau gyda'r cynllun hwn?
Sef, yr wyf yn dyfalu-neu nid o reidrwydd anawsterau, ond gadewch i ni ddweud
Nid oeddem yn gwneud prosiect i-wneud rhestr, ac yfory fe benderfynon ni
roeddem am wneud rhestr groser neu brosiect rhestr siopa.
Mae llawer o'r nodweddion hyn yn debyg iawn.
Mae llawer o'r pethau yr ydym am i fynd allan o'r JavaScript yn gyffredin iawn,
ac mae hyn yn tanlinellu'r angen am ryw fath o ffordd o
gwneud hyn yn haws i'w wneud.
Roedd rhaid i mi i adeiladu hyn i gyd fynediad HTML, hyn i gyd mynediad DOM,
fel yr wyf i'n mynd i gynrychioli'r rhestr i-wneud â'r model hwn.
Ac yn sylwi fy mod yn gyfrifol gan fod y datblygwr JavaScript
am gadw'r HTML a JavaScript sydd gennyf mewn cydamseru.
Nid oes dim yn awtomatig bod cynrychiolaeth JavaScript
neu 'r rhestr i-wneud yn cael eu gwthio allan i HTML.
Nid oes dim gorfodi hwnnw ac eithrio i mi.
Roedd rhaid i mi ysgrifennu y raffl i-wneud rhestr swyddogaeth.
Ac efallai na fydd-yr wyf yn golygu, mae'n rhesymol i wneud hynny,
ond gall fod yn ddiflas weithiau.
Os oes gennych brosiect mwy o faint, a allai fod yn anodd.
>> Fframweithiau, un o ddibenion y fframweithiau
yw symleiddio'r broses honno a math o ffactor allan
hyn yn gyffredin-Amcana gallech ddweud batrymau-ddylunio
bod pobl yn gyffredinol yn cael rhyw fath o ffordd o gynrychioli data,
boed honno'n rhestr ffrindiau, boed hynny'n gwybodaeth map
neu rywbeth neu restr i-wneud.
Gyffredinol, mae rhai pobl yn ffordd o gynrychioli gwybodaeth,
ac maent yn gyffredinol, mae angen i gadw'r fath wybodaeth yn cydamseru
rhwng yr hyn y mae'r defnyddiwr yn gweld mewn rhyw fath o farn,
siarad o ran fel farn model rheolwr a welsoch yn y ddarlith,
ac yna y model, sydd, yn yr achos hwn yw hyn amrywiaeth JavaScript.
Fframweithiau yn rhoi ffordd i ddatrys y broblem i ni.
Nawr, gadewch i ni edrych ar y gweithredu hyn rhestr i-wneud
mewn fframwaith o'r enw angularjs.
Hyn yn ei. Hysbysiad mae'n cyd-fynd ar sleid.
Nid oes yn rhaid i mi sgrolio i'r chwith ac i'r dde.
Yn ôl pob tebyg nid yw'n rheswm gwych i argymell defnyddio fframwaith,
ond rhybudd fydda'i fyth cyrchu elfennau HTML unigol yma?
Ydw i'n byth yn mynd i mewn i'r DOM?
A ydych yn gweld unrhyw document.getElementByID neu rywbeth fel 'na?
Na, mae hynny'n mynd.
>> Onglog yn ein helpu i gadw'r DOM ac mae ein cynrychiolaeth JavaScript o rywbeth
math o mewn cydamseru, felly os nad yw yn y ffeil js,
os nad oes ffordd o programmatically dod i bob un sy'n cynnwys HTML
o'r JavaScript sut ydym ni'n cadw hyn mewn cydamseru?
Os nad yw yn y. Ffeil js, mae'n rhaid iddo fod mewn HTML, dde?
Mae hyn yn y fersiwn newydd o'r ffeil HTML,
ac yn sylwi rydym wedi ychwanegu llawer yma.
Hysbysiad mae hyn yn nodweddion newydd sy'n dweud ng-glicio a ng-dro ar ôl tro.
Dull onglog tuag at ddatrys y broblem hon o anawsterau mewn dylunio
yw gwneud y bôn HTML llawer mwy pwerus.
Onglog yn ffordd o ganiatáu i chi wneud HTML ychydig yn fwy mynegiannol.
Er enghraifft, gallaf ddweud fy mod i'n mynd i glymu neu rhwymo y blwch testun
i yn amrywio o fewn fy cod JavaScript onglog.
Mae'r ng-model yn gwneud yn union hynny.
Sy'n dweud y bôn bod y tu mewn y blwch testun eitem,
dim ond cysylltu hynny â'r new_todo_description amrywiol
o fewn y cod JavaScript.
Dyna bwerus iawn gan nad oes rhaid i mi fynd yn benodol i
y DOM i gael y wybodaeth honno.
Nid oes rhaid i mi ddweud document.getElementByID.
Nid oes rhaid i mi ddefnyddio jQueries fel mynediad DOM.
Gallaf ei gysylltu gyda amrywio, ac yna pan fyddaf yn newid hynny amrywiol
mewn JavaScript mae'n cadw mewn cytgord â'r HTML,
er mwyn symleiddio'r broses o orfod mynd yn ôl ac ymlaen rhwng y ddau.
A yw hynny'n gwneud synnwyr?
>> Ac yn sylwi nad oes cod mynediad HTML.
Rydym wedi gwneud HTML yn fwy pwerus yn unig,
ac yn awr, er enghraifft, rydym yn gallu gwneud pethau fel hyn,
fel pan fyddwch yn clicio ar hyn, ffoniwch y swyddogaeth hon o fewn cwmpas todos.js,
a gallem wneud hynny o'r blaen, ond mae yna bethau eraill, fel hyn ng-model,
ac yn sylwi ar hyn ng-dro ar ôl tro.
Beth ydych chi'n meddwl bod hyn yn ei wneud?
Dyma ein rhestr heb drefn o'r blaen.
Mae gennym y tagiau ul,
ond fydda'i fyth bai'n gwneud y rhestr y tu mewn y cod JavaScript?
Dydw i ddim erioed bai'n gwneud y rhestr yn benodol.
Sut mae hyn yn gweithio?
Wel, y ffordd onglog yn cyflawni'r hyn yn gelwir hyn yn ailadrodd.
Yn y bôn mae hyn yn dweud fy mod eisiau argraffu HTML hon
ar gyfer pob tu mewn todo o fy todos arae.
Y tu mewn o todos.jr mae amrywiaeth todos dde yma,
a bydd hyn yn dweud ewch onglog drwy'r amrywiaeth, ac ar gyfer pob elfen byddwch yn gweld
Rwyf am i chi argraffu'r HTML hwn.
Mae hyn yn fath o anhygoel oherwydd gall Fi jyst gwneud hyn
heb orfod ysgrifennu ar gyfer dolen,
sydd, am i-wneud rhestr a oedd dim ond 30 o linellau o god
Efallai na fydd y peth mwyaf buddiol,
ond os oes gennych brosiect mawr, gallai hyn gael gyfleus iawn.
>> Mae hwn yn un ateb i'r broblem hon, gan ei wneud yn fwy pwerus HTML,
ac sy'n ein galluogi i gadw JavaScript a HTML yn cydamseru.
Mae yna ffyrdd posibl eraill i ddatrys y broblem,
ac nid yw pob fframwaith yn gwneud hyn.
Nid yw pob fframwaith yn gweithio ar hyd y llinellau hyn.
Mae rhai fframweithiau wahanol ddulliau,
ac efallai y byddwch yn dod o hyd i eich bod yn mwynhau codio mewn un fframwaith dros y llall.
Gadewch i ni edrych ar un yn fwy.
Mae hyn yn y rhestr i-wneud codio i fyny mewn fframwaith a elwir yn asgwrn cefn.
Rydw i'n mynd i fynd drwy hyn yn gyflym.
Byddaf yn dechrau gyda'r HTML cyn i ni fynd yno.
Un eiliad.
Gan ddechrau gyda'r HTML, fel y byddwch yn sylwi, mae ein HTML yn debyg iawn
i'r hyn yr oedd o'r blaen, felly nid yn rhy fawr newydd ar y blaen.
Ond mae ein ffeil js yn ychydig yn wahanol.
Asgwrn cefn math o wedi y syniad hwn, neu'n adeiladu ar y syniad
fod llawer o'r hyn yr ydym yn ei wneud â, dyweder, ein prosiectau JavaScript
yn meddwl am fodelau a chasgliadau o'r modelau hyn.
Gallai hyn fod, er enghraifft, llun a chasgliadau o ffotograffau,
neu y syniad o ffrind a chasgliadau o ffrindiau.
Ac oftentimes pan fyddwn ni'n rhaglennu ceisiadau JavaScript
byddwn yn trefnu o gynrychioli y syniad o gael casgliad o ffrindiau
rywsut yn JavaScript, ac asgwrn cefn yn rhoi haen hwn yn ein
ar ben araeau a gwrthrychau presennol JavaScript yn
i wneud pethau yn fwy pwerus â hynny yn haws.
>> Yma rwyf wedi diffinio model i-wneud,
ac nid oes rhaid i chi boeni gormod am y gystrawen,
ond sylwi bod hyn yn un o'r nodweddion hyn?
Mae ganddo faes diofyn.
Asgwrn cefn yn caniatáu i mi nodi eisoes oddi ar y ystlumod
unrhyw newydd i-wneud fy mod yn creu yn mynd i gael diffygion hyn.
Yn awr yr wyf yn gallu addasu hyn, ond y gallu i nodi'r diffygion
yn braf, ac mae'n fath o gyfleus oherwydd nad yw hyn yn rhywbeth y mae fel
gynhenid ​​yn JavaScript, ac erbyn hyn nid oes rhaid i yn benodol i
dweud bod y todos yn anghyflawn.
Gallaf ddweud dde oddi ar y ystlumod a todos yn mynd i gael ei farcio fel un anghyflawn.
Hysbysiad yna beth yw hyn?
Nawr Mae gen i restr i-wneud, ac mae hynny'n casgliad.
Sylwch ar y maes sy'n gysylltiedig â model sy'n dweud todo.
Mae hyn yn fy ffordd o ddweud wrth asgwrn cefn y
Rydw i'n mynd i fod yn meddwl am casgliad o hyn todos unigol.
Mae hyn yn y bôn y strwythur model ar gyfer fy rhaglen.
Mae gen i syniad hwn o gasgliad,
ac yn y bôn yr eitemau a gynhwysir yn y casgliad i gyd yn mynd i fod yn todos hyn,
ac mae hynny'n naturiol iawn yn yr ystyr
oherwydd fy mod yn cael todos, ac yr wyf yn eu cael mewn casgliad.
>> Gadewch i ni edrych ar ychydig mwy o hyn.
Dyma farn asgwrn cefn.
Y peth arall sy'n asgwrn cefn yn dweud yw bod
llawer o'r modelau eich bod yn meddwl am neu hyd yn oed gasgliadau
yn mynd i angen i chi gael rhyw ffordd o gael eu harddangos.
Mae angen i ni wneud y rhestr i-wneud,
ac ni fyddai'n braf pe gallem ddarparu ar gyfer pob model
neu gysylltu gyda phob model farn hon
sy'n caniatáu i ni Amcana gysylltu'r ddau at ei gilydd?
O'r blaen, roedd rhaid i ni ddefnyddio ar gyfer dolen fyddai'n rhedeg drwy
bob todo yn ein rhestr ac yna ei argraffu arno yma
gallwn bôn gysylltu â'r model hwn.
Mae hon yn farn i-wneud.
Mae hyn yn gysylltiedig â'r todo a welsom yn gynharach.
Bellach mae pob todo yn displayable neu renderable
gan y i-wneud barn.
Sylwi ar rai o'r meysydd.
Beth yn eich barn chi tagName yw hwn, tagName: li?
Cofiwch o blaen pan roeddem am wneud yn todo
byddai'n rhaid i ni baru yn benodol ein todos gyda'r tag li.
Nawr rydym yn dweud bod lle mae hyn todo yn mynd i fyw
yn mynd i fod y tu mewn o tag li.
Ac yn awr rydym hefyd yn cysylltu digwyddiadau gyda'n todos.
>> Mae gan bob todo Mae un digwyddiad hwn.
Os ydych yn clicio 'n bert lawer y botwm togl, dyna beth rwy'n ei ddweud yno,
Yna, yn y bôn nodi todo fel y gwrthwyneb i'r hyn yr oedd cyn
ac yna ail-wneud y cais.
Mae hyn yn fath o debyg i'r cod blaen.
Cofiwch pan fyddwn yn nodi fel arall neu-
ac yna rydym yn ail-rendro hynny.
Ond yn sylwi nawr y digwyddiad hwn yn arfer bod yn rhywbeth a oedd yn y HTML.
Roedd yn eistedd yno.
Roedd gan y botwm yn cliciwch ar.
Pan fyddwch yn clicio ar y botwm, mae'n fath o wneud pethau i
a sefydlwyd y todo i fod yn anghyflawn.
Yma rydym wedi cysylltiedig y digwyddiad hwnnw o glicio ar y botwm togl
a gwrthdroi boed ar neu oddi â'r farn hon.
>> Mae hon yn ffordd braf o sefydlu digwyddiad hwn fel ei bod yn iawn rhwymo dynn
y farn hon, ac felly sylwi ar y un yn fwy.
Rwy'n cael y dull rendro, ac nid oes rhaid i ni fynd drwy'r manylion.
Mae'n fath o debyg i'r hyn a oedd gennym o'r blaen,
ond sylwi Dydw i ddim yn dolennu trwy unrhyw beth.
Dydw i ddim yn argraffu y tag ul sy'n fath o ddweud Rydw i'n mynd i argraffu pob un o'r elfennau.
Rwy'n darparu'r ymarferoldeb ar gyfer rendro yr un yma i-wneud eitem.
Mae hwn yn gysyniad pwerus iawn oherwydd y bôn
ein rhestr i-wneud yn cynnwys yr holl todos hyn, ac os gallwn ni yn y bôn nodi
y ffordd i wneud un o'r todos rhai
yna gallwn gael ein asgwrn cefn pwerus per se golygu pob un o'r todos
drwy ffonio'r dull rendr ar y todos unigol.
Mae hwn yn gysyniad sy'n ddefnyddiol yma.
Erbyn hyn, mae Cwestiwn da i'w ofyn yw sut mae cais hwn yn cael ei roi at ei gilydd?
Oherwydd ein bod yn cael y gallu i wneud un todo,
ond sut mae sicrhau bod y syniad o todos lluosog?
>> Gadewch i ni edrych ar hynny.
Mae hyn yn y rhan olaf.
Hysbysiad gennym i-wneud rhestr barn yma,
ac yn sylwi mae hefyd yn farn.
Ac i fynd dros un neu ddau o bethau,
Bydd y dull ymgychwyn gael ei alw pan fyddwn yn creu rhestr hon i-do.
Fel y gallwch weld, mae fel creu rhestr i-wneud ac yn ei gysylltu â'r farn hon.
Ac yna yr wyf yn ychwanegu swyddogaethau yma, felly yn y bôn pan fyddwch yn ychwanegu eitem-
mae hyn yn debyg i'r dull addItem welsom cyn-
Rydw i'n mynd i greu gwrthrych todo newydd, ac yn sylwi rwy'n galw mewn gwirionedd
dull hwn todo newydd, felly mae hyn yn cael ei ddarparu gan asgwrn cefn,
a gallaf basio yn fy eiddo yma.
Ac yn awr y bydd pob todo fy mod yn creu defnyddio hwn yn cael y functionality a welsom o'r blaen.
Hysbysiad Rwy'n glirio y blwch testun cyn-ychydig bach o fanylion-
ac yna rwy'n ychwanegu casgliad hwn.
>> Mae hyn bron yn ymddangos yn rhyfedd oherwydd cyn i ni yn unig wedi i wneud hynny todos.push,
ac yna rydym yn eu gwneud, a gall hyn ymddangos yn fwy cymhleth ar gyfer y prosiect penodol hwn,
ac efallai y byddwch yn canfod bod asgwrn cefn neu hyd yn oed onglog neu unrhyw fframwaith arall
nid yw'n addas ar gyfer eich prosiect penodol, ond yr wyf yn credu ei fod yn bwysig i feddwl am
beth mae hyn yn ei olygu ar raddfa fwy ar gyfer prosiectau mwy,
oherwydd os oedd gennym brosiect mwy lle rydym yn cynrychioli
rhywfaint o gasgliad wirioneddol gymhleth, rhywbeth dyfnach na dim ond rhestr i-wneud,
gadewch i ni ddweud rhestr ffrindiau neu rywbeth fel 'na, gallai hyn ddod i mewn' n hylaw
oherwydd gallem drefnu ein cod mewn ffordd wirioneddol gyfleus,
mewn ffordd a fyddai'n ei gwneud yn haws i rywun arall
oedd am godi prosiect i adeiladu arno.
Gallwch weld bod hyn yn rhoi llawer o strwythur.
Ac yna dwi'n galw rendr ar y addItem hwn.
Rendr, fel y gallwch weld, ac nid oes rhaid i chi ddeall y gystrawen llawn,
ond yn y bôn ar gyfer pob model ei fod yn mynd i alw y dull rendr unigol.
Dyna math o ble mae'n dod.
Gadewch i 'jyst yn nodi sut i wneud y todos unigol,
ac yna gadewch i ni glud nhw at ei gilydd yn ei gyfanrwydd.
Ond mae hyn yn ffordd o dynnu,
gan y byddwn yn newid y ffordd y byddaf yn penderfynu gwneud y todos unigol,
ac ni fyddai'n rhaid i mi newid unrhyw un o'r cod hwn.
Dyna fath o oer.
>> A oes unrhyw un gennych unrhyw gwestiynau am fframweithiau JavaScript?
[Cwestiwn anhyglyw Myfyrwyr]
Oh, yn sicr, dyna gwestiwn mawr.
Y cwestiwn oedd sut oedd yr wyf yn cynnwys y fframweithiau?
Mae'r rhan fwyaf o fframweithiau JavaScript yn y bôn dim ond ffeiliau js
y gallwch ei gynnwys ar frig eich cod.
Rhybudd yn y pen rhan o fy HTML gennyf yr holl tagiau sgript hyn,
a'r tag sgript derfynol yw'r cod ydym wedi ysgrifennu.
Ac yna y 3 godau fframwaith yw tagiau sgript yn unig hefyd.
Rwy'n eu cynnwys o hyn a elwir yn CDN,
sy'n caniatáu i mi gael gan rywun arall yn y fan hon
ond mae pob fframwaith, gall hyn-you 'n bert lawer dod o hyd i'r cynnwys
ar gyfer llyfrgell JavaScript penodol ar gael ar rai CDN neu rywbeth fel 'na,
ac yna gallwch gynnwys tagiau sgript hyn.
A yw hynny'n gwneud synnwyr?
Cool.
>> Mae'r rhai yna 2 ddulliau gwahanol.
Nid y rheini yw'r unig ddulliau o ddatrys y broblem hon.
Mae yna lawer o wahanol bethau sy'n
gallai rhywun ei wneud, ac mae llawer o fframweithiau i maes 'na.
Onglog ac nid yw asgwrn cefn yn dweud y stori gyfan.
Pob lwc gyda'ch prosiectau terfynol, a diolch yn fawr iawn.
[CS50.TV]