DOUG LLOYD: Í þetta myndband, við vildum að kalla út sérstakt athygli að mjög sérstakur þáttur JavaScript að þú gætir fundið vel þegar þú ert að byrja að vinna á að notfæra vefsíðum og breyta innihaldi vefsíðu þinni á flugu. Og það er hugmyndin um Document Object Model. Svo eins og við sáum í vídeó okkar á JavaScript, eru hlutir mjög sveigjanlegur. Og þeir geta innihaldið ýmsum sviðum. Og þó að við ekki fara inn a einhver fjöldi af smáatriðum, þessir sviðum eða eiginleikar, að við myndum sennilega meira viðeigandi kalla þá í samhengi við hlut, jafnvel þessir eiginleikar geta verið aðrir hlutir. Og inni á þeim hlutum getur verið öðrum hlutum. 

Þú hefur þetta mjög stór hlut með fullt af öðrum hlutum inni af því, sem eins konar skapar þessa hugmynd af stóru tré. Nú er skjalið mótmæla er mjög sérstakt hlut í JavaScript sem skipuleggur allt um vefinn síðu undir þessa tegund af regnhlíf á hlut. Og svo inni í skjalinu Markmið eru hlutir sem valda höfuð og líkama vefsíðu þinni. 

Inni þeirra eru annað hluti, et cetera, et cetera, þar allt vefur blaðsíða hefur verið skipulögð í þessum stóra hlut. Hvað er kosti hér, ekki satt? Jæja, við vitum hvernig á að vinna með hluti í JavaScript. 

Svo ef við höfum hlutur sem er átt við okkar allan vefsíðu, sem þýðir með því að hringja rétt aðferðir til að vinna að mótmæla eða breyta víst eiginleika þess, við Hægt er að breyta þætti síðu okkar kerfisbundið nota JavaScript stað þess að hafa að kóða eitthvað með, segjum, HTML. Svo er hér dæmi um a mjög einfaldur vefur blaðsíða, ekki satt? Það fékk HTML tags, höfuð. 

Inni það er titill, halló heimur. Þá hef ég líkama. Inni sem, ég hef þrjár mismunandi hlutir. Ég er með h2 haus tag, málsgrein, og tengill. Þetta er mjög einfaldur vefur blaðsíða. 

Jæja, hvað gæti skjalið mótmæla fyrir þetta útlit eins og? Jæja, það er lítið skelfilegur kannski í fyrstu. En það er í raun bara stór tré. Og við rætur hennar er skjal. 

Inni skjalið er annar Markmið vísa til HTML á síðuna mína. Og HTML á síðuna mína er þetta allt. Og þá inni í HTML hlut, ég er með höfuð hlut, sem vísar til allt þar. 

Og inni þar, Ég hef titil hlut. Og inni þar, ég hef annað hlut sem er bara halló heimur. Ég gæti hafa líkama minn fulltrúa svona. 

Inni af líkama mínum, ég hef h2 Markmið og p mótmæla fyrir lið og a hlutur fyrir tengil. Og svo þetta allt stigveldi má fulltrúa sem stór tré með fullt af minni Little það koma út af því. Nú, auðvitað, þegar við erum forritun, við held ekki af hlutum eins og stór tré. Við viljum sjá raunverulegt númer tengd atriði. 

Og sem betur fer, við getum nota verktaki verkfæri okkar að raunverulega taka a líta á skjal mótmæla þessari vefsíðu er. Og við skulum gera það. Þannig að ég hef opnað vafra flipa. 

Og ég hef opnað Developer Tools. Og í myndbandið á JavaScript, ég nefna að hugga er ekki Aðeins einhvers staðar þar við að prenta upplýsingar, það er líka staður þar sem við getum inntak upplýsinga. Í þessu samhengi, hvað Ég ætla að segja er Mig langar að fá aftur skjalið hlutir, svo ég geti byrjað að hafa a líta á það. Svo hvernig gæti ég gert þetta? Jæja, ef ég vil skipuleggja það virkilega fallega, Ég ætla að segja console.dir, D-I-R. Nú nota ég console.log að prenta bara út eitthvað mjög einfalt. En ef ég vil að skipuleggja þetta hierarchically eins hlut, Ég vil það konar byggð eins og skipulag skrá. 

Svo ég vil console.dir skjal. Ég ætla að ýta á Enter. Og rétt fyrir neðan það núna, og ég ætla að stækka hér, Ég hef fengið þessa svar skjal með smá ör við hliðina á henni. Nú, þegar ég opna þetta ör, það er að fara til vera a einhver fjöldi af efni. 

En við erum að fara að hunsa mikið af því og bara svona fókus á mikilvægustu hluti, þannig að við getur byrjað að sigla þessu skjali. There 'a einhver fjöldi fleiri til DOM en bara foreldri hnúður og barn hnúður. There 'a einhver fjöldi af viðbót efni. 

Þannig að ég ætla að opna þetta upp. Og það er allt fullt af efni sem birtist. En allt sem ég hugsa um er hérna, barn hnútar. Skulum opna það upp. 

Inni þar sem ég sé eitthvað kunnuglegt, HTML. Svo inni skjals okkar eitt stig niður, HTML. Ég opna það upp. Hvað erum við að búast? 

Ef þú manst úr myndinni okkar, hvað eigum við að finna inni í HTML? Hvaða tveir hnútar eru fyrir neðan það í trénu? Við skulum finna út. Við opna HTML. Við förum niður í hnúta barn hennar. 

Skjóta að opna. Það er höfuð og líkama. Og við getum opna höfuð. Fara á hnúta barn hennar. Jæja, það er titillinn. 

Og við gátum farið á og á svona að eilífu. Við gætum gert þetta með líkama eins og heilbrigður. En það er leið fyrir okkur til að líta á skjalið skipulagt sem stór hlut. Og ef við lítum á er stór hlutur sem lítur mikið eins kóða, sem þýðir að við getum byrjað að vinna þetta stóra hlut með kóða til að breyta því sem okkar website lítur út og finnst eins og. 

Svo er það mjög öflugt tæki við höfum yfir að ráða okkar núna. Svo eins og við sáum bara er skjal mótmæla sjálft og öllum hlutum inni í honum hafa eiginleika og aðferðir, bara eins og allir aðrir hlutir sem við höfum verið að vinna með í JavaScript. En við getum notað þá eiginleika og nota þessar aðferðir til að raða á bora niður frá stóru skjali og fá lægra og lægra og lægra, fínni og fínni korn smáatriðum, þar til við fá að mjög ákveðin stykki af okkar Vefsíða sem við viljum breyta. 

Og þegar við uppfærum eiginleika sem Document Object eða hringdu þær aðferðir, það gæti gerst á vefsíðu okkar. Og við þurfum ekki að gera eitthvað hressandi að hafa þær breytingar taka gildi. 

Og það er laglegur kaldur getu til að hafa þegar við erum að vinna með kóða. Svo hvaða ert sumir af þessum eiginleika sem eru hluti af skjalinu mótmæla? Jæja, sá þig líklega par af þeim mjög fljótt eins og við vorum zipping gegnum risastór skjal mótmæla við sáum bara í vafranum. 

En a par af þessum eiginleika gæti verið hluti eins innri HTML. Og þú gætir jafnvel muna mig nota þetta í JavaScript vídeó aftast þegar ég var að tala um atburði. Hvað var þessi innri HTML? Jæja, það er bara það sem er á milli tags. 

Og svo innri HTML, til dæmis, of the title tag, ef við hefðum haldið áfram í sem dæmi í smá stund síðan, hefði verið halló heimur. Það var titill á síðu okkar. Aðrar eignir fela í sér nafn hnút, sem er nafn á HTML þáttur svo sem titil. ID, sem er auðkenni eigindi af HTML frumefni. 

Muna að við getum sérstaklega bent sérstakar þætti HTML okkar með ID eiginleiki, sem oftast kemur sér vel í tengslum við CSS, sérstaklega. Móðurhnútur, sem er tilvísun í hvað er bara upp fyrir ofan mig í DOM. Og hnúður barn, sem er tilvísun í það sem er niður fyrir neðan mig. Og við sáum mikið af því bara að horfa í gegnum. Barn hnúður, það er hvernig við fengum lægra og lægra í trénu. 

Eiginleika, það er bara array af eiginleikum HTML frumefni. Svo dæmi um eiginleika gæti vera ef þú ert með mynd tag, það hefur yfirleitt fengið eigindi, kannski hæð og breidd eiginleiki. Og svo það væri bara að vera fylki af öllum eiginleikum sem tengjast með því HTML frumefni. 

Style er annað sem er tákna CSS hönnun tiltekins frumefnis. Og síðar í þessari video, munum við sérstaklega Nýttu stíl til að gera nokkrar um breytingar á heimasíðu okkar. Þeir eru sumir eiginleikar. 

Og það eru einnig nokkur aðferðir sem við getum nota einnig hraðar kannski einangra þættir Document Object. Kannski mest fjölhæfur þessara viðburða eru getElementById. Svo ég gæti sagt eitthvað eins, því muna það er aðferð til að skjalinu Object, document.getElementById. 

Og inni þessara sviga tilgreina HTML þáttur með sérstakri ID eiginleiki sem ég hef áður sett, og ég ætla strax fara rétt að því frumefni af heildar website. Svo ég þarf ekki að kannski bora niður í gegnum hvert einasta lag. Ég get bara notað þessa aðferð til að finna það, tegund af eins og hita að reyna eldflaugum, ekki satt? Það fer bara og finnur nákvæmlega það sem það er að leita að. 

GetElementsByTagName er mjög svipuð í anda. Kannski myndi þetta að finna allar djörf merki eða öll p tags og gefa mér upp á fjölbreytta öllu að ég gæti þá unnið með. appendChild bætir eitthvað eitt stig niður í trénu. 

Svo ég get bætt heilt nýtt þáttur eitt stig lægri. Eða ég get fjarlægja stak sem er eitt stig lægri eins vel ef ég vil til að eyða einhverju úr vefsíðu mína. Nú, fljótur kóðun huga og fljótleg höfuðverkur sparnaður mið, vonandi. 

getElementById-- sem d er lágstafir. Ég get ekki sagt þér hversu oft ég hef notað getElementById og eignfærð D það. Vegna þess að það er mjög algeng. Ef við skrifa orðið ID, það er yfirleitt höfuðborg I höfuðborg D. Og númerið mitt bara virkar ekki. Og ég get ekki fundið út hvers vegna. Þetta er virkilega, virkilega, virkilega Algeng villa að allir gerir, jafnvel sérfræðingar sem hafa verið að gera þetta að eilífu. Svo bara vera meðvitaður, getElementById, sem d er lágstafir. Og vonandi, að spara þér nokkrar mínútur að minnsta kosti hugarangur. 

Svo hvað þýðir þetta allt að segja okkur? Við höfum þessar aðferðir. Við höfum þessa eiginleika. Nú, ef við byrjum frá skjal, skjal. hvað getum við nú fengið að einhverju Eitt stykki af vefsíðu okkar sem við viljum nota JavaScript bara með því að boða til þessara aðferðir og fá meira eignir sem við finnum á ýmsum stöðum. 

Þetta getur orðið wordy, þetta document.getElementById, kannski hafa langa tag nafn, kannski þú fleiri símtöl síðar. Það getur fengið smá wordy. Og sem forritari, og þú hefur líklega séð í mörgum af þessum myndböndum, við gerum ekki eins wordy hluti. 

Við eins og að vera fær um að gera hlutina hratt. Þannig að við viljum meira nákvæm leið til að segja eitthvað. Þannig að þetta tegund af leiðir til hugmynd um eitthvað sem kallast jQuery. Nú er jQuery ekki JavaScript. Það er ekki hluti af JavaScript. 

Það er bókasafn sem var skrifuð af sumum JavaScript forritari um 10 árum síðan. Og markmið hennar er að einfalda þetta það er kallaði viðskiptavinur hlið forskriftarþarfir, sem er í grundvallaratriðum það sem við vorum bara að tala um með DOM misnotkun. Og svo ef ég vildi breyta bakgrunnslit vefsíðu mína, kannski sérstakur Div. 

Hérna, ég er greinilega að fá ElementById colorDiv. Og ég vil setja bakgrunnslit þess. Ef ég er bara með hreint JavaScript með Document Object Model, það er mikið af efni, ekki satt? document.getElementById colorDiv.style.backgroundColor = grænn. 

Whew. Það var mikið að segja. Það er mikið að slá líka. Og svo í jQuery, getum við kannski sagt þetta svolítið meira concisely. The viðskipti burt vera það er kannski svolítið aðeins meira dulinn allt í einu, ekki satt? 

Að minnsta kosti lengi er dálítið meira útskýrandi um hvað við erum að gera. Þetta dollaramerki, sviga, einn vitna, kjötkássa, colorDiv, ekki satt? Hvað þýðir það? Jæja, það er í rauninni bara document.getElementById colorDiv. 

En það er einmitt svona styttingin leið til að gera það með því að nota jQuery. Við skulum bara taka a líta nú á nokkra mismunandi vegu að ég skuli í raun nota þetta skjal mótmæla Model til að vinna stykki á síðuna mína. Einkum við erum að fara til að vinna á að notfæra litur tiltekið Div, colorDiv, á vefsíðu. Svo skulum taka a líta á það. Allt í lagi. Þannig að ég er á síðunni. Það heitir test.html þegar þú sækir þetta ef þú vilt að tinker með þetta. Og ég hef fengið fullt af hnappa á síðunni. Og ég er að segja einstaka aðgerðir fyrir lit bakgrunnur, fjólublátt, grænt, appelsínugulur, rauður, blár, eitt fall fyrir bakgrunnslit, atburður dýraþjálfari fyrir lit bakgrunnur, og nota jQuery. Hvað er ég að tala um þegar ég er að gera þetta? Þannig að við höfum séð á hnappana. Nú, við skulum taka a líta á sumir af the uppspretta merkjamál hér. Við munum byrja með test.html. Svo einstaka aðgerðir til bakgrunni litur er það sem ég hef slegið hér. Láta mig fletta svolítið. 

Og þú munt taka eftir að ég að skilgreina þessa hnappa að segja þegar þessi hnappur er smellt hringja í virka snúa fjólublátt. Þegar þessi hnappur er að smella, heldur kalla virka verða græn, snúa appelsína, snúa rauður, blá. Þú getur sennilega giska á að þetta er kannski ekki sú besta hönnun vit, ekki satt? 

Það væri gott ef ég gæti hafa fleiri almenna nálgun. Jæja, fyrst við munum taka a líta á hvað þessir fimm aðgerðir eru document.getElementById colorDiv.style.background = fjólublár, grænn, appelsínugulur, rauður, og blár, hver um sig. Svo, ekki sérstaklega bestu hönnun. 

Næsta sett af hnöppum Ég hef er að ég hef skrifað einn valkost sem heitir breyta lit sem virðist tekur streng sem rök hennar. Þannig að þetta er svolítið betur. Fjólublár, grænn, appelsínugulur, rauður, blár er nú rök. Þannig að ég hef skrifað meira almennt Málið JavaScript virka, sem gæti litið eitthvað svona. Ég er liggur í. Þessi aðgerð breyta lit er von rök kallast litur. Og ég er að segja stillt bakgrunnslit að lita. Svo hér táknar það sem ég hef fengið hér. Svo er það dálítið betur. 

En ég gæti verið fær um að gera betur en það. Ef við förum niður til að kíkja á atburði dýraþjálfari aðstæðum, nú er allt þessir kallar líta eins. Ef þú manst að okkar umfjöllun um atburði dýraþjálfari, Ég get fengið upplýsingar um hvaða Þessir takkar var smellt og nota það. 

Og svo í event.JavaScript, hef ég skrifað breyta lit atburður, sem tölur út hver hnappur sem smellt. Það er kveikt mótmæla línu. Og þá hér, verður þetta virkilega wordy. En það sem ég er að gera er ég setja bakgrunn lit til triggerObject inner.HTML. Það er textinn í milli hnappinn tags. 

Og þá hef ég greinilega að setja það til lágstafir. Og það er hvernig ég get umbreyta heilt band til lágstafir í JavaScript með sem aðferð til lágstafir. Vegna þess að þegar ég setti lit, eins og ég er að reyna að gera hér, liturinn þarf að vera allt lágstafir. 

En hnappur sem ég hafði, ef við tökum aðra líta, eftir því að textinn er skrifað með höfuðborg P fyrir fjólublátt. Og þá á mjög botn hér, hef greinilega reyna að gera þetta með því að nota jQuery eins og heilbrigður. Og í þessu tilfelli, ég er í raun ekki hringja í virka yfirleitt. Ég hef bara sagt bekknum að ég að nota í þessu hnapp er jQ hnappinn. Það er það. 

Svo hvernig hjartarskinn jQuery vita hvað ég er að gera? Jæja, þetta er einn af þeim kostum rista galla jQuery. Það er hægt að leyfa mér að gera hlutina mjög concisely, en kannski ekki eins innsæi. Kannski þeir hinir þrír gera aðeins meira vit hvað ég er að gera. Hér, þó, hvað er að gerast? 

Apparently, búa nafnlaus aðgerð sem hleðst þegar skjal minn er tilbúinn, svo document.ready, sumir virka er að fara að gerast. Í grundvallaratriðum, þegar er skjal tilbúið? Það er þegar mín síða hefur hlaðinn. 

Svo um leið og mín síða hefur hlaðinn, Eftirfarandi aðgerðir er alltaf tilbúin. Það segir, ef hlut af tegundinni jQButton, eða ef flokkur jQButton hefur verið smellt framkvæma þessa aðgerð. Svo er hér í tvo nafnlaus virka, það sama og skilgreint innan í öðrum. 

Svo öllu samhengi minni hér svo langt er mín síða þegar það sækir það kallar þessa aðgerð. Og þessi aðgerð er að bíða fyrir hnappinn til að smella. Og þegar smellt er á, jQ hnappur sérstaklega er smellt það kallar þetta hitt virka, sem er að fara að setja bakgrunn litur colorDiv að vera Textinn er á milli tags. 

Þetta er hugmyndin um hver hnappur sem smellt. En annars, þetta er tegund af atferlis svipað atburði. Það er bara sama og ég myndi tjá þetta í jQuery. Aftur, það er líklega miklu meira ógnvekjandi. Það er ekki eins skýr og eitthvað eins event.js, sem er kannski svolítið meira fjölorður, en svolítið minna ógnvekjandi. 

En ef við skjóta aftur yfir til vafranum mínum glugga, ef ég byrja clicking-- vel, sem breytt í fjólublátt. Þetta er grænt með band aðferð. Þetta er appelsínugulur með atburð dýraþjálfari. 

Þetta er rauður með jQuery, ekki satt? Þeir allir hegða sér nákvæmlega sama. Þeir gera bara það með öðruvísi aðferðir til að leysa vandamál. There 'a einhver fjöldi fleiri til jQuery þá erum við vissulega að fara að tala um í þessu myndbandi. En ef þú vilt læra meira, þú getur fara í jQuery konar gögnum og læra töluvert meira um þetta mjög sveigjanlegt bókasafn, sem er frábært fyrir að gera viðskiptavinur hlið forskriftarþarfir eins og það sem við vorum að gera að vinna útlit og feel af vefsíðu okkar með Document Object Model. Ég er Doug Lloyd. Þetta er CS50.