DOUG LLOYD: Yn y fideo hwn, roeddem eisiau i alw allan o sylw ar wahân i manylyn iawn elfen o JavaScript a allai fod yn handi pan ydych yn dechrau i weithio ar drin tudalennau gwe a newid y cynnwys eich tudalen ar y we ar y hedfan. A dyna y syniad o Model Gwrthrych Ddogfen. Felly, fel y gwelsom yn ein fideo ar JavaScript, gwrthrychau yn hyblyg iawn. A gall eu bod yn cynnwys gwahanol feysydd. Ac er nad ydym yn mynd i mewn i lawer o fanylder, caeau neu eiddo hynny, y byddem yn ôl pob tebyg yn fwy yn eu galw yn briodol yng nghyd-destun gwrthrych, hyd yn oed Gall eiddo hynny fod gwrthrychau eraill. Ac tu mewn gwrthrychau hynny Gall fod gwrthrychau eraill. 

Mae gennych y gwrthrych mawr iawn gyda llawer o wrthrychau eraill tu mewn iddo, a oedd yn fath o yn creu syniad hwn o goeden fawr. Yn awr, y gwrthrych ddogfen hon yn gwrthrych arbennig iawn yn JavaScript sy'n trefnu eich holl we dudalen o dan y math hwn o ymbarél o wrthrych. Ac felly y tu mewn y ddogfen gwrthrych yn wrthrychau cyflwyno y pen a'r corff eich tudalen we. 

Y tu mewn o hynny yn eraill gwrthrychau, et cetera, et cetera, nes eich tudalen we gyfan yn cael Trefnwyd yn y gwrthrych mawr. Beth yw'r upside yma, dde? Wel, rydym yn gwybod sut i weithio gyda gwrthrychau yn JavaScript. 

Felly, os oes gennym gwrthrych sy'n yn cyfeirio at ein dudalen we gyfan, bod yn golygu drwy ffonio'r cywir dulliau i drin y gwrthrych neu addasu rhai ei eiddo, rydym yn yn gallu newid yr elfennau o ein tudalen programmatically gan ddefnyddio Javascript yn lle cael i cod pethau â, dyweder, HTML. Felly dyma enghraifft o syml iawn dudalen gwefan, dde? Mae'n cael tagiau HTML, pen. 

Y tu mewn o oes deitl, helo byd. Yna, Mae gen i gorff. Y tu mewn o hynny, yr wyf wedi tri pheth gwahanol. Mae gen tag pennawd h2, paragraff, a dolen. Mae hon yn dudalen we syml iawn. 

Wel, beth allai y ddogfen gwrthwynebu gyfer hyn yn edrych fel? Wel, mae'n ychydig yn brawychus efallai ar y dechrau. Ond mae'n wirioneddol yn unig goeden fawr. Ac wrth wraidd iawn ohono yn ddogfen. 

Y tu mewn y ddogfen yn un arall gwrthrych cyfeirio at y HTML fy dudalen. Ac mae'r HTML fy dudalen yn hyn i gyd. Ac yna tu mewn i'r HTML gwrthrych, mae gen i wrthrych ben, sy'n cyfeirio at bopeth yno. 

Ac tu mewn yno, Mae gen i wrthrych teitl. Ac tu mewn yno, mae gen i un arall yn gwrthwynebu bod yn unig helo byd. Gallwn i gael fy nghorff gynrychioli fel hyn. 

Y tu mewn fy nghorff, Mae gen i h2 gwrthrych a gwrthrych p yn lle paragraff a gwrthrych am gyswllt. Ac felly mae hyn hierarchaeth cyfan Gellir ei gynrychioli fel coeden fawr gyda llawer o ychydig yn llai o faint pethau sy'n dod allan ohono. Yn awr, wrth gwrs, pan rydym yn rhaglennu, rydym yn peidiwch â meddwl am bethau fel coeden fawr. Rydym am weld gwirioneddol pethau cysylltiedig cod. 

Ac yn ffodus, y gallwn defnyddio ein offer datblygwr i mewn gwirionedd yn edrych ar gwrthrych y ddogfen wefan hon. A gadewch i ni wneud hynny. Felly dwi wedi agor tab porwr. 

Ac yr wyf i wedi agor Offer Datblygwr. Ac yn fy fideo ar JavaScript, yr wyf yn crybwyll nad yw'r consol yn Thrafod dim ond lle rydym yn argraffu gwybodaeth, mae hefyd yn fan lle y gallwn gwybodaeth mewnbwn. Yn y cyd-destun hwn, beth Rydw i'n mynd i ddweud yw Hoffwn i fynd yn ôl y ddogfen gwrthrychau, felly rwy'n gallu dechrau i edrych arno. Felly, sut y gallaf wneud hyn? Wel, os ydw i eisiau trefnu 'n sylweddol' n glws, Rydw i'n mynd i ddweud console.dir, D-I-R. Yn awr, yr wyf yn defnyddio console.log i print yn unig rhywbeth allan yn syml iawn. Ond os ydw i am drefnu hyn hierarchaidd fel gwrthrych, Yr wyf am ei fath o strwythuredig fel strwythur cyfeiriadur. 

Felly, yr wyf am i console.dir ddogfen. Rydw i'n mynd i daro Chofnoda. Ac i'r dde islaw iddo yn awr, a byddaf yn chwyddo i mewn fan hyn, Mae gen hon ddogfen ymateb gydag ychydig o saeth nesaf iddo. Yn awr, pan fyddaf yn agor y saeth hon, mae mynd i fod yn llawer o bethau. 

Ond rydym ni'n mynd i anwybyddu llawer ohono a math yn unig o ffocws ar y rhan bwysicaf, felly rydym yn Gall dechrau i lywio ddogfen hon. Mae llawer mwy i'r DOM na dim ond nodau a nodau blant rhieni. Mae llawer o bethau atodol. 

Felly, yr wyf i'n mynd i agor y fyny. Ac mae llawer gyfan o bethau sy'n pops i fyny. Ond yr holl wyf yn poeni am ei i'r dde yma, nodau plant. Gadewch i ni agor bod hyd. 

Y tu mewn o yno rwy'n gweld rhywbeth cyfarwydd, HTML. Felly, tu mewn ein dogfen un lefel i lawr, HTML. Yr wyf yn agor bod hyd. Beth ydan Ni yn ddisgwyl? 

Os cofiwch o'n diagram, hyn y dylem ddod o hyd y tu mewn o HTML? Pa dau nodau yn is yn y goeden? Gadewch i ni gael gwybod. Rydym yn agor i fyny HTML. Rydym yn mynd i lawr at ei blentyn nodau. 

Pop hynny ar agor. Mae pen a chorff. A gallwn agor y pen. Ewch at ei blentyn nodau. Wel, mae y teitl. 

A gallem fynd ymlaen ac ymlaen fel hyn am byth. Gallem wneud hyn gyda corff yn ogystal. Ond mae yna ffordd i ni i edrych ar ddogfen a drefnwyd fel gwrthrych mawr. Ac os ydym yn edrych ar yn fawr gwrthrych sy'n edrych yn llawer fel cod, sy'n golygu y gallwn ddechrau i drin y gwrthrych mawr gan ddefnyddio cod i newid yr hyn mae ein wefan yn edrych ac yn teimlo fel. 

Felly dyna arf eithaf pwerus gennym ar gael i ni yn awr. Felly, wrth i ni jyst yn gweld, y gwrthrych ddogfen ei hun a phob un o'r gwrthrychau tu mewn iddo wedi eiddo a dulliau, dim ond fel unrhyw wrthrych arall yr ydym i wedi bod yn gweithio â hwy yn JavaScript. Ond gallwn ddefnyddio eiddo hynny a defnyddio dulliau hynny i fath o ddrilio i lawr o'r ddogfen mawr a chael is ac yn is ac yn is, manylach a manylach grawn o fanylder, nes i ni cyrraedd darn penodol iawn o'n tudalen ar y we y mae arnom eisiau ei newid. 

A phan fyddwn yn diweddaru nodweddion y Dogfennu Gwrthrych neu ffoniwch dulliau hynny, gallai pethau ddigwydd ar ein tudalen ar y we. Ac nid oes angen i ni wneud unrhyw chwa o awyr iach i gael newidiadau hynny yn dod i rym. 

A dyna yn gallu 'n bert oera i gael pan fyddwn ni'n gweithio gyda cod. Felly beth yw rhai o'r eiddo hyn sy'n rhan o gwrthrych ddogfen? Wel, mae'n debyg y byddwch yn gweld cwpl ohonynt yn gyflym iawn gan ein bod zipping drwy'r ddogfen cawr gwrthrych rydym yn unig yn gweld yn y porwr gwe. 

Ond ychydig o eiddo hyn Efallai fod pethau fel HTML mewnol. Ac efallai y byddwch hyd yn oed yn cofio i mi defnyddio hwn yn y fideo JavaScript yn y pen iawn pan fyddaf yn yn siarad am ddigwyddiadau. Beth oedd hyn yn HTML mewnol? Wel, dim ond yr hyn sydd rhwng y tagiau. 

Ac felly y HTML mewnol, er enghraifft, o'r teitl tag, petaem wedi cadw mynd yn yr enghraifft honno funud yn ôl, Byddai wedi bod yn y byd helo. Dyna oedd teitl ein tudalen. Eiddo arall cynnwys enw nôd, a oedd yn yw'r enw o HTML Elfen fel teitl. ID, sef y ID priodoli elfen HTML. 

Dwyn i gof bod yn gallu dangos arbennig elfennau penodol o'n HTML gyda priodoledd ID, sydd fel arfer yn dod i mewn 'n hylaw yng nghyd-destun CSS, yn benodol. Nod rhiant, sydd yn gyfeiriad at beth sydd ychydig i fyny'r uwch fy mhen yn y DOM. A nodau plentyn, sydd yn cyfeiriad at yr hyn sydd i lawr yn is na mi. A gwelsom lawer o hynny dim ond edrych drwy. Nodau plentyn, dyna sut y cawsom is ac yn is mewn i'r goeden. 

Priodoleddau, dyna'n union amrywiaeth o briodoleddau yr elfen HTML. Felly enghraifft o briodoleddau gallai fod os oes gennych tag delwedd, Fel arfer, mae ganddo priodoledd ffynhonnell, efallai uchder a nodwedd led. Ac felly byddai hynny'n unig fod amrywiaeth o bob un o'r nodweddion a gysylltir gyda'r elfen honno HTML. 

Style yn un arall sy'n yn cynrychioli y CSS steilio ag elfen benodol. Ac yn ddiweddarach yn y fideo, rydym annhymerus 'yn benodol arddull trosoledd i wneud cwpl newidiadau i'n gwefan. Felly dyna rai eiddo. 

Ac mae yna hefyd rai dulliau y gallwn defnyddio i hefyd yn gynt efallai ynysu elfennau o'r Gwrthrych Ddogfen. Efallai, y mwyaf amryddawn o'r rhain getElementById fodolaeth. Felly, efallai y byddwn yn dweud rhywbeth fel, gan fod cofiwch ei fod yn ddull o'r Ddogfen Gwrthwynebu, document.getElementById. 

Ac tu mewn cromfachau hynny, nodwch elfen HTML gyda ID arbennig priodoli fy mod i wedi o'r blaen osod, ac byddaf yn syth ewch i'r dde i elfen honno y wefan yn gyffredinol. Felly nid oes rhaid i mi i ddrilio efallai i lawr drwy bob un haen. Gall Fi jyst defnyddio'r dull hwn i ddod o hyd iddo, fath o fel taflegryn chwilio am wres, iawn? 'I jyst yn mynd ac yn dod o hyd yn union beth mae'n chwilio amdano. 

GetElementsByTagName yw debyg iawn o ran ysbryd. Efallai y byddai hyn yn dod o hyd i bob un o'r tagiau beiddgar neu bob un o'r tagiau p ac yn rhoi amrywiaeth o bopeth i mi y gallwn i wedyn yn gweithio gyda nhw. appendChild yn ychwanegu rhywbeth un lefel i lawr yn y goeden. 

Felly gallaf ychwanegu newydd cyfan Elfen un lefel is. Neu gallaf gael gwared ar elfen sy'n un lefel is yn ogystal os ydw i eisiau i ddileu rhywbeth o fy tudalen ar y we. Yn awr, nodyn codio gyflym ac yn gyflym cur pen arbed nodyn, gobeithio. 

getElementById-- mae'r d yn llythrennau bach. Ni allaf ddweud wrthych faint o weithiau yr wyf wedi defnyddio getElementById a cyfalafu y d yno. Oherwydd ei fod yn wir yn gyffredin. Os byddwn yn ysgrifennu y gair ID, 'i' Fel arfer cyfalaf Rwyf cyfalaf D. Ac mae fy cod nid yn unig yn gweithio. Ac ni allaf chyfrif i maes pam. Mae hwn yn iawn, iawn, iawn bug gyffredin y mae pawb yn gwneud, hyd yn oed arbenigwyr sydd wedi bod yn gwneud hyn am byth. Felly, dim ond byddwch yn ymwybodol, getElementById, hynny d yn llythrennau bach. A, gobeithio, sy'n arbed i chi sawl cofnodion o leiaf o ofid. 

Felly beth mae hyn i gyd ei ddweud wrthym? Mae gennym y dulliau hyn. Mae gennym eiddo hyn. Yn awr, os ydym yn dechrau o ddogfen, ddogfen. beth bynnag, gallwn yn awr fynd i unrhyw un darn o ein tudalen ar y we yr ydym am eu defnyddio JavaScript dim ond drwy ffonio rhain dulliau a leveraging eiddo ein bod yn dod o hyd mewn amrywiol leoliadau. 

Gall hyn gael amleiriog, mae hyn yn document.getElementByID, efallai yn cael enw tag hir, efallai eich bod yn gwneud mwy o alwadau yn nes ymlaen. Gall pethau fynd ychydig yn amleiriog. Ac fel rhaglenwyr, fel yr ydych chi wedi gweld mewn llawer o'r fideos hyn yn ôl pob tebyg, nad ydym yn hoffi pethau amleiriog. 

Rydym yn hoffi gallu i wneud pethau yn gyflym. Felly byddem yn hoffi mwy ffordd gryno o ddweud rhywbeth. Felly y math hwn o arwain at y syniad o rywbeth o'r enw jQuery. Nawr nid yw jQuery JavaScript. Nid yw'n rhan o JavaScript. 

Mae'n llyfrgell a oedd yn ysgrifenedig gan rai rhaglenwyr JavaScript tua 10 mlynedd yn ôl. Ac ei nod yw symleiddio hyn beth sydd Gelwir sgriptio ochr y cleient, a oedd yn yn y bôn yr hyn yr ydym yn unig oedd siarad am gyda manipulations DOM. Ac felly os oeddwn i eisiau newid y lliw cefndir fy tudalen ar y we, efallai yn Div benodol. 

Yma, Im 'yn ôl pob golwg yn cael ElementById colorDiv. Ac yr wyf am osod ei liw cefndir. Os Im 'jyst yn defnyddio JavaScript pur ddefnyddio'r Model Gwrthrych Ddogfen, mae hynny'n llawer o bethau, dde? document.getElementByID colorDiv.style.backgroundColor = wyrdd. 

Whew. Dyna oedd llawer i'w ddweud. Mae'n llawer i deipio, hefyd. Ac felly yn jQuery, gallwn efallai ddweud mae hyn ychydig bach yn fwy cryno. Mae'r fasnach off bod 'i' efallai ychydig ychydig yn fwy cryptig yn sydyn, iawn? 

O leiaf mae'r hir yn ychydig yn fwy esboniadol ynghylch yr hyn rydym yn ei wneud. Mae'r arwydd doler, cromfachau, dyfyniad sengl, hash, colorDiv, dde? Beth yw ystyr hynny? Wel, dyna y bôn yn unig document.getElementByID colorDiv. 

Ond mae'n y math hwn o llaw-fer ffordd o wneud ei ddefnyddio jQuery. Gadewch i fwrw golwg yn awr mewn un neu ddau o ffyrdd gwahanol fy mod gallai mewn gwirionedd defnyddio hyn Gwrthrych Dogfen Model i drin darnau o fy safle. Yn benodol, rydym yn mynd i fod yn gweithio ar drin lliw manylyn Div, colorDiv, ar dudalen we. Felly, gadewch i ni edrych ar hynny. Iawn. Felly dwi ar dudalen. Mae'n cael ei alw test.html pan fyddwch yn llwytho i lawr yma os ydych am i botsian gyda hyn. Ac mae gen i griw o botymau ar y dudalen hon. Ac yr wyf ddim yn dweud swyddogaethau unigol am liw cefndir, porffor, gwyrdd, oren, coch, glas, un swyddogaeth sengl am liw cefndir, triniwr digwyddiad am liw cefndir, a defnyddio jQuery. Beth ydw i'n siarad am pan fyddaf i'n gwneud hyn? Felly, rydym wedi gweld y botymau. Yn awr, gadewch i ni edrych ar rhai o'r cod ffynhonnell yma. Byddwn yn dechrau gyda test.html. Swyddogaethau Felly unigol ar gyfer y cefndir lliw yn hyn yr wyf wedi ei deipio yma. Gadewch i mi sgrolio ychydig. 

A byddwch yn sylwi fy mod wedi diffinio botymau hyn i ddweud pryd y botwm hwn ei glicio, ffoniwch y swyddogaeth troi'n borffor. Pan botwm hwn yn clicio, yn hytrach, ffoniwch y swyddogaeth droi'n wyrdd, troi oren, yn troi'n goch, trowch glas. Mae'n debyg y gallwch ddyfalu bod hyn Efallai nad y dyluniad gorau synnwyr, dde? 

Byddai'n braf pe gallwn gael dull mwy cyffredinol. Wel, yn gyntaf byddwn yn cymryd golwg ar yr hyn pump swyddogaethau hynny yn cael eu document.getElementByID colorDiv.style.background = porffor, gwyrdd, oren, coch, a glas, yn y drefn honno. Felly, nid yn arbennig y cynllun gorau. 

Mae'r gyfres nesaf o fotymau Rwyf wedi cael fy mod wedi ysgrifennu swyddogaeth sengl o'r enw newid lliw sydd yn ôl pob golwg yn derbyn llinyn fel ei ddadl. Felly mae hyn yn ychydig yn well. Porffor, gwyrdd, oren, coch, glas yn awr dadl. Felly, yr wyf wedi ysgrifennu mwy cyffredinol achos swyddogaeth JavaScript, a allai edrych rhywbeth fel hyn. Im 'yn pasio i mewn. Mae hyn yn newid lliw swyddogaeth yw disgwyl dadl o'r enw lliw. Ac yr wyf ddim yn dweud yn gosod y lliw cefndir i liw. Felly dyma yn cynrychioli hyn sydd gen i yma. Felly dyna ychydig yn well. 

Ond efallai y byddaf yn gallu yn gwneud yn well na hynny. Os ydym yn mynd i lawr i gymryd golwg ar y sefyllfa triniwr digwyddiad, erbyn hyn i gyd galwadau hyn yn edrych yr un fath. Os cofiwch ar gyfer ein trafodaeth ar trafodwyr digwyddiad, Gallaf gael gwybodaeth am ba un o'r botymau hyn yn clicio ac yn defnyddio hynny. 

Ac felly yn event.JavaScript, rwyf wedi Digwyddiad newid lliw ysgrifenedig, a ffigurau pa botwm ei glicio. Dyna'r llinell gwrthrych sbardun. Ac yna fan hyn, mae'n mynd yn wir yn amleiriog. Ond yr hyn rwy'n ei wneud yw fy mod gosod y cefndir lliw i triggerObject inner.HTML. Dyna y testun yn rhwng y tagiau botwm. 

Ac yna yr wyf yn ôl pob golwg yn cael i'w osod i lythrennau bach. A dyna sut y gallaf drosi cyfan llinyn i lythrennau bach yn JavaScript drwy ddefnyddio dull hwnnw i lythrennau bach. Oherwydd pan wyf yn gosod lliw, gan fy mod i'n ceisio ei wneud yma, y lliw wedi i fod bob llythrennau bach. 

Ond mae'r botwm a gefais, os byddwn yn cymryd golwg arall, sylwi bod y testun, mae ysgrifenedig gyda P cyfalaf ar gyfer porffor. Ac yna ar yr union gwaelod yma, yr wyf yn ôl pob golwg ceisio gwneud hyn trwy ddefnyddio jQuery hefyd. Ac yn yr achos hwn, dydw i ddim mewn gwirionedd yn galw swyddogaeth o gwbl. Rydw i wedi newydd ddweud y dosbarth fy mod gan ddefnyddio'r botwm i hwn botwm jQ. Dyna fe. 

Felly sut mae jQuery yn gwybod beth rwy'n ei wneud? Wel, mae hyn yn un o'r manteision slaes anfanteision jQuery. Gall caniatáu i mi wneud pethau yn gryno iawn, ond efallai nad fel reddfol. Efallai y tri arall yn gwneud ychydig mwy synhwyro hyn rwy'n ei wneud. Yma, fodd bynnag, yr hyn sy'n mynd ymlaen? 

Mae'n debyg, gan greu swyddogaeth dienw bod llwythi pryd bynnag fy nogfen yn barod, felly document.ready, rhywfaint o swyddogaeth yn mynd i ddigwydd. Yn y bôn, pan fydd yn ddogfen barod? Mae'n pan fydd fy dudalen wedi llwytho. 

Felly, cyn gynted ag y mae fy dudalen wedi llwytho, mae'r yn dilyn swyddogaeth bob amser yn barod. Mae'n dweud, os gwrthrych o fath jQButton, neu os jQButton ddosbarth wedi cael ei glicio, gweithredu swyddogaeth hon. Felly dyma ddwy swyddogaeth ddienw, un a ddiffinnir tu mewn y llall. 

Felly fy cyd-destun cyfan yma hyd yn hyn yw fy dudalen pan fydd yn llwythi mae'n galw swyddogaeth hon. Ac mae swyddogaeth hon yn aros ar gyfer botwm i gael ei glicio. A phan botwm ei glicio, jQ botwm yn benodol ei glicio, mae'n galw hyn eraill swyddogaeth, sy'n mynd i osod y cefndir lliw colorDiv i fod yn beth bynnag testun yn rhwng y tagiau. 

Mae hyn yn y syniad o pa botwm ei glicio. Ond fel arall, mae hyn yn fath o ymddwyn yn debyg i ddigwyddiad. Dim ond yr un ffordd rwy'n Byddai fynegi hyn yn jQuery. Unwaith eto, mae'n debyg yn llawer mwy bygythiol. Nid yw mor glir ag rhywbeth fel event.js, sydd efallai ychydig yn fwy amleiriog, ond ychydig bach yn llai bygythiol. 

Ond os ydym yn pop yn ôl dros at fy porwr ffenestr, os byddaf yn dechrau clicking-- yn dda, a newidiodd i borffor. Mae hyn yn wyrdd gan ddefnyddio'r dull llinyn. Mae hyn yn oren gan ddefnyddio'r triniwr digwyddiad. 

Mae hyn yn goch gan ddefnyddio jQuery, dde? Maent i gyd yn ymddwyn yn union yr un fath. Maent yn unig yn ei wneud gan ddefnyddio gwahanol ymagweddau at ddatrys y broblem. Mae llawer mwy i jQuery Yna, rydym yn sicr mynd i siarad am yn y fideo hwn. Ond os ydych am ddysgu mwy, gallwch yn mynd at y math jQuery dogfennau a dysgu cryn dipyn mwy am y llyfrgell yn hyblyg iawn, sy'n yn wych ar gyfer gwneud ochr y cleient sgriptio fel hyn yr ydym yn ei wneud i drin y golwg ac yn teimlo ein tudalen ar y we â'r Model Gwrthrych Ddogfen. Rwy'n Doug Lloyd. Mae hyn yn CS50.