DOUG LLOYD: Selle video, tahtsime kutsuda välja eraldi tähelepanu väga erilist element JavaScript et te võite leida mugav Kui sa oled hakanud tööd manipuleerides veebilehti ja muutuva sisu oma veebilehel lennult. Ja see mõiste Dokumendi Object Model. Nii nagu me nägime meie video JavaScript objektid on väga paindlik. Ja nad võivad sisaldada erinevates valdkondades. Ja kuigi me ei lähe palju detail, nende valdkondade või omadused, et meil oleks ilmselt rohkem asjakohaselt nimetame neid kontekstis objekti isegi Neil omadused võivad olla muud esemed. Ja sees nende objektide võib olla muid esemeid. 

Sul on see väga suur objekt palju muud objektid sees on, mis sorti loob see idee suur puu. Nüüd dokumendi eesmärk on Väga eriline objekt JavaScript mis korraldab kogu oma veebi lehekülje all selline vihmavari objekti. Ja nii seest dokumendi objekti on esemeid, pea ja keha oma veebilehel. 

Toas neist on teistest esemeid, jne, jne, kuni kogu oma veebilehel on korraldati see suur objekt. Mis on tagurpidi siin, eks? Noh, me teame, kuidas töötada esemetega JavaScript. 

Nii et kui meil on objekt, mis viitab kogu meie veebilehel, et tähendab helistades õige meetodeid manipuleerida, et objekti või muuta teatavaid tema omaduste me saab muuta elemendid Meie lehel programmiliselt kasutades JavaScript asemel koodi asju, ütleme, HTML. Nii et siin on näide väga lihtne veebileht, eks? See sai HTML sildid, pea. 

Toas on pealkiri, tere. Siis mul on keha. Toas, et mul on kolm erinevat asja. Mul on H2 header tag, Lõigu ja link. See on väga lihtne veebilehele. 

Noh, mis võib dokumendi vastuväiteid selle välja? Noh, see on natuke hirmutav võibolla alguses. Aga see on tõesti ainult üks suur puu. Ja juurteni see dokument. 

Toas dokumendi on teine objekti viidates HTML minu lehele. Ja HTML minu leheküljel on see kõik. Ja siis sisemust HTML objekti, mul on peas objekti, mis viitab kõik olemas. 

Ja sees on, Mul on pealkiri objekti. Ja sees on, mul on teine vastuväiteid, mis on lihtsalt tere. Oleksin võinud minu keha esindatud niimoodi. 

Toas mu keha on mul h2 objekti ja p objekti lõikes ja A objekti link. Ja nii see kogu hierarhia võib olla esindatud suur puu palju väiksem vähe asjad tulevad välja. Nüüd muidugi, kui me programmeerimine, me ei usu asju nagu suur puu. Me tahame näha tegelikku koodi seotud asju. 

Ja õnneks saame kasutada meie arendaja tööriistad tegelikult vaatleme Selle veebilehe dokumendi objekti. Ja olgem teha. Nii et ma olen avanud brauseri tab. 

Ja ma olen avanud Developer Tools. Ja minu video JavaScript, ma mainitud, et konsool ei ole ainult kuskil kus Me printida info see on ka koht, kus saame infot sisestada. Selles kontekstis, mida Ma ütlen on Tahaksin saada tagasi Dokumendi objektid nii et ma ei hakka on pilk see. Niisiis, kuidas võiks seda teha? Noh, kui ma tahan korraldab ta tõesti kenasti, Ma ütlen console.dir, D-I-R. Nüüd ma kasutan console.log lihtsalt print välja midagi väga lihtne. Aga kui ma tahan korraldada selle hierarhiliselt nagu objekti, Ma tahan, et see mingi struktureeritud nagu kataloogide struktuur. 

Nii et ma tahan console.dir dokument. Ma lähen Enter. Ja just selle all nüüd, ja ma suumida siin Mul see vastus dokument vähe noolt ta. Nüüd, kui ma avada see nool, seal saab olema palju asju. 

Aga me ei kavatse ignoreerida palju seda ja lihtsalt selline fookuses kõige tähtsam osa, nii et me võib alata liikuda selles dokumendis. Seal on palju rohkem DOM kui lihtsalt vanem sõlmed ja tütartippu. Seal on palju lisateenuste kraami. 

Nii et ma lähen avada selle üles. Ja seal on palju asju, mis hüppab. Aga ma hoolin siinsamas, tütartippu. Avame selle üles. 

Toas on Näen midagi tuttav, HTML. Nii sees meie dokumenti ühe taseme alla, HTML. Ma avan, et üles. Mida me oodanud? 

Kui te mäletate meie diagramm, mida me peaksime leidma sees HTML? Mis kaks tipud on alla see puu? Uurime välja. Me avada HTML. Me läheme oma tütartippu. 

Pop, et avatud. Ei pea ja keha. Ja me saame avada pea. Mine oma lapse sõlmed. Noh, seal on pealkiri. 

Ja me võiks minna ja niimoodi igavesti. Me võiksime seda teha keha samuti. Aga seal on nii, et meid vaadata Dokumendi korraldatud suur objekt. Ja kui me vaatame, on suur objekt, mis tundub palju nagu kood, mis tähendab, et saame alustada manipuleerida see suur objekt kasutades koodi muuta seda, mida meie veebileht näeb välja nagu. 

Nii et on üsna võimas vahend meil meie käsutuses nüüd. Nii nagu me just nägin, siis dokumendi objekt ise ja kõik objektid sees on on omadused ja meetodid, vaid nagu iga muu objekt, mis me oleme töötanud JavaScript. Kuid me ei kasuta neid omadusi ja neid meetodeid kasutama, et mingisugune drill down suurelt dokument ja saada madalam ja väiksem ja väiksem, peenem ja peenem tera üksikasjalikult, kuni me saada väga konkreetne tükk meie veebilehe, et me tahame muuta. 

Ja kui me värskendame omadused Dokumendi eesmärk või helistage need meetodid, asju võib juhtuda meie veebilehel. Ja me ei pea tegema muud värskendav on need muudatused jõustuvad. 

Ja see on päris lahe oskus on, kui me töötame koos koodiga. Millised on mõned neist omadustest mis on osa dokumendist objekti? Noh, siis ilmselt nägi Paar neist tõesti kiiresti kui olime zipping läbi hiiglane dokument objekti me lihtsalt nägin veebilehitsejat. 

Aga paar neist omadustest Võib olla asjad sisemine HTML. Ja võite isegi meenutada mind kasutades seda JavaScripti video päris lõpus, kui ma rääkis sündmused. Mis oli selle sisemise HTML? Noh, see on just see, mida on vahel sildid. 

Ja nii sisemine HTML, näiteks pealkirja tag, kui oleksime elus hoida et näiteks hetk tagasi, oleks tere. See pealkiri oli meie lehele. Muud omadused lisada sõlme nimi, mis on nimi HTML element nagu pealkiri. ID, mis on ID atribuut HTML element. 

Tuletame meelde, et saame spetsiaalselt näitavad konkreetsete elementide meie HTML ID-atribuudi, mis tavaliselt on käepärane kontekstis CSS, konkreetselt. Vanem sõlme, mis on viide Mis on lihtsalt ülevalt mind DOM. Ja tütartippu, mis on viide, mis on allapoole mind. Ja me nägime palju, et lihtsalt vaatasin läbi. Lapse sõlmed, see on, kuidas me saime alandab tüvesse. 

Omadused, mis on lihtsalt massiivi atribuute HTML element. Nii näiteks atribuutide might olla, kui sul on pilt tag, see on tavaliselt allikas atribuut, võibolla kõrgus ja laius atribuut. Ja nii, et oleks lihtsalt massiivi Kõike atribuutidega seotud selle HTML element. 

Stiil on veel üks, et ei esinda CSS stiil teatud element. Ja hiljem selles video, siis me eriti võimendav stiili teha paar muudatusi meie veebilehel. Nii et need on mõned omadused. 

Ja on ka mõned meetodeid, et suudame kasutada ka kiiremini võibolla isoleerida elemendid Document Object. Ehk kõige mitmekülgsem neist on getElementByld. Nii et ma võiks öelda midagi sellist, sest mäletan, et see on meetod dokumendi Objekti, document.getElementById. 

Ja sees need sulgudesse, täpsustada HTML element konkreetse ID atribuut, et olen varem määrata, ja ma kohe lähen kohe, et element üldise veebilehel. Nii et ma ei pea äkki puurida ette läbi iga kihi. Ma lihtsalt kasutada seda meetodit, et leida see, omamoodi nagu soojus seeking rakett, õige? See lihtsalt läheb ja leiab täpselt, mida see otsinud. 

GetElementsByTagName on väga sarnase sisuga. Võib-olla see leiaks kõik rasvases silte või kõik p silte ja anna mulle hulgaliselt kõike et ma võiks siis töötada. appendChild lisab midagi ühe taseme alla puu. 

Nii võin ka kogu uus element ühe taseme madalam. Või ma ei saa eemaldada element, mis on ühe taseme alumise kui ka siis, kui ma tahan kustutada midagi minu veebilehele. Nüüd, kiire kodeerimine märkuse ja kiire peavalu säästa märkus, loodetavasti. 

getElementById-- d on väiketähed. Ma ei saa öelda, mitu korda ma pean Kasutatud getElementByld ja kapitaliseeritud d seal. Sest see on tõesti levinud. Kui me kirjutame sõna ID, see on Tavaliselt kapital Ma kapitali D. Ja minu kood lihtsalt ei tööta. Ja ma ei saa aru, miks. See on tõesti, tõesti, tõesti ühine viga, mida kõik teeb, isegi eksperdid, kes on teinud seda igavesti. Nii lihtsalt teadma, getElementByld, et d on väiketähed. Ja loodetavasti mis säästab mitu minut vähemalt südamevalu. 

Mida see kõik meile öelda? Meil on need meetodid. Meil on need omadused. Nüüd, kui me alustada dokument, dokumendi. mida iganes, saame nüüd saada ükskõik ühes tükis meie kodulehelt et me tahame kasutades JavaScript lihtsalt helistades need meetodid ja võimendades omadused et leiame eri paigus. 

See võib saada paljusõnaline see document.getElementById, äkki on pikk sildi nimi äkki sa rohkem kõnesid hiljem. Asjad saavad natuke paljusõnaline. Ja nagu programmeerijad, kui olete ilmselt näha palju neid videoid meile ei meeldi paljusõnaline asju. 

Meile meeldib, et oleks võimalik teha asju kiiremini. Nii et me tahaksime rohkem lühike tee midagi öelda. Nii selline viib olukorrani, Mõiste midagi, mida nimetatakse jQuery. Nüüd jQuery ei ole JavaScript. See ei ole osa JavaScript. 

See on raamatukogu, mis oli kirjutatud Mõned JavaScript programmeerijad umbes 10 aastat tagasi. Ja selle eesmärk on lihtsustada seda, mis on nimetatakse kliendi skript, mis on põhimõtteliselt mida me olime lihtsalt räägime DOM töötlusi. Ja nii kui ma tahtsin muuta taustavärvi minu veebilehele, võibolla konkreetse Div. 

Siin, ma ilmselt saan ElementById colorDiv. Ja ma tahan, et määrata oma taustavärvi. Kui ma lihtsalt puhta JavaScript abil Document Object Model, et on palju asju, eks? document.getElementById colorDiv.style.backgroundColor = roheline. 

Whew. See oli palju öelda. See on palju kirjutada, liiga. Ja nii jQuery, saame äkki öelda see natuke rohkem lühidalt. Kompromiss on see võib-olla veidi natuke rohkem segasena äkki, õige? 

Vähemalt pikk on natuke rohkem selgituseks, et mida me teeme. See dollari märk, sulgudes ülakoma, hash, colorDiv, eks? Mida see tähendab? Noh, see on põhimõtteliselt ainult document.getElementById colorDiv. 

Aga see on selline stenografist viis seda teha kasutades jQuery. Võtame pilk nüüd at paar erinevalt et ma võiks tegelikult kasutada seda Document Object Mudel manipuleerida tükki minu koduleheküljel. Eelkõige me läheme tuleb tööd manipuleerimine värvi konkreetse Div, colorDiv, veebilehele. Võtame pilk seda. Hästi. Nii et ma olen lehel. Seda nimetatakse test.html kui sa alla laadida see, kui soovid käpard seda. Ja mul on kamp nupud sellel lehel. Ja ma räägin üksikute funktsioonide tausta värvi, lilla, roheline, oranž, punane, sinine, ühe funktsiooni tausta värvi, sündmus tausta värvi, ja kasutades jQuery. Mida ma räägin kui ma teen seda? Nii oleme näinud nuppe. Nüüd võtame pilk mõned lähtekoodi siin. Hakkame koos test.html. Nii üksikute funktsioonide tausta värv on see, mida ma olen kirjutatud siin. Lubage mul kerida natuke. 

Ja märkad, et ma on määratletud need nupud öelda, kui seda nupule vajutamist, helistada funktsiooni sisselülitamiseks lilla. Kui seda nuppu klõpsata pigem helistada funktsioon roheliseks, oranžiks, punaseks, siniseks. Sa ilmselt ära, et see ei pruugi olla parim disain mõttes, eks? 

Oleks tore, kui suutsin on üldisemat lähenemisviisi. Noh, esiteks me vaatleme millised need viis funktsioone document.getElementById colorDiv.style.background = lilla, roheline, oranž, punane, ja sinine võrra. Niisiis, ei ole eriti parima disaini. 

Järgmine nuppude Mul on, olen kirjutanud ühe funktsiooni nimetatakse värvi muuta, et ilmselt aktsepteerib stringi oma väidet. Nii et see on natuke parem. Purple, roheline, oranž, punane, sinine on nüüd argument. Nii et ma olen kirjutanud üldisema Juhul JavaScript funktsioon, mis võib välja midagi sellist. Ma möödaminnes. See funktsioon muutus värv on ootab argumendina nimetatakse värvi. Ja ma räägin määrata taustavärvi värvi. Nii et siin on, mida ma olen saanud siin. Nii et natuke parem. 

Aga ma võiks olla võimalik teha paremini. Kui me läheme heita Üritusel handler olukord, nüüd kõik need kõned tunduvad sama. Kui te mäletate meie arutelu sündmuse käitleja, Ma saan informatsiooni, mis on Nende nuppude klõpsatud ja kasutada seda. 

Ja nii event.JavaScript, ma olen kirjaliku muudavad värvi sündmus, mis arvud, mis nuppu klõpsatud. See on trigger objekti line. Ja siis siin, see saab tõesti paljusõnaline. Aga mida ma teen on ma olen milles taustal värvi triggerObject inner.HTML. See tekst vahel nuppu sildid. 

Ja siis ma ilmselt ei seada väiketähed. Ja see, kuidas ma saan teisendada kogu string väiketäheliseks JavaScript kasutades Selle meetodi väiketähed. Sest kui ma määrata värvi, kui ma üritan teha siin, värv peab olema väiketähtedega. 

Aga nupule, et mul oli, kui me võtame teise ilme, märkate, et teksti on kirjutatud suure algustähega P lilla. Ja siis on väga alumine siin, ma ilmselt proovida ja teha seda kasutades jQuery samuti. Ja sel juhul, ma ei ole tegelikult Funktsioonide üldse. Ma olen lihtsalt ütles klassi, et ma olen kasutades selleks nuppu on jQ nuppu. Nii see on. 

Niisiis, kuidas jQuery tean, mida ma teen? Hästi, see on üks eeliseid kaldkriips puudused jQuery. See võimaldab mul teha asju väga lühidalt, kuid võib-olla mitte kui intuitiivselt. Võib-olla need teised kolm teha natuke rohkem tunda, mida ma teen. Siin küll, mis toimub? 

Ilmselt luua anonüümne funktsioon et koormusi, kui minu dokumenti on valmis, nii document.ready, mõned funktsiooni juhtub. Põhimõtteliselt, kui on dokument valmis? See on siis, kui mu lehel on koormatud. 

Nii kiiresti minu leheküljel on käivitunud, järgmine funktsioon on alati valmis. Ta ütleb, kui objekti tüübiga jQButton, või kui klassi jQButton on klõpsatud, täidab seda funktsiooni. Nii et siin on kaks anonüümset funktsioone, üks kindlaksmääratud sisemust muud. 

Nii et minu kogu kontekstis Siin on siiani minu leheküljel laadimisel ta nimetab seda funktsiooni. Ja see funktsioon on ootamas jaoks nuppu klõpsatud. Ja kui klõpsad nupule, jQ nuppu spetsiaalselt klõpsamisel see nõuab see muu funktsioon, mis läheb tegemaks tausta Värvi colorDiv olla mis iganes teksti on vahel sildid. 

See on mõiste mis nupuga klõpsanud. Aga muidu, see on omamoodi käituvad sarnaselt sündmus. See on lihtsalt nii nagu mina väljendab seda jQuery. Jällegi, see on ilmselt palju hirmutada. See ei ole nii selge midagi event.js, mis on võib-olla natuke rohkem paljusõnaline, kuid natuke vähem hirmutada. 

Aga kui me hüpata tagasi üle minu brauser aken, kui ma hakkan clicking-- hästi, mis muutis lilla. See on roheline kasutades stringi meetod. See on oranž abil korral käitleja. 

See on punane kasutades jQuery, eks? Nad kõik käituvad täpselt sama. Nad lihtsalt teevad seda, kasutades erinevaid läheneb probleemi lahendada. Seal on palju rohkem jQuery siis me kindlasti räägime selle video. Aga kui sa tahad rohkem teada, siis saab minna jQuery omamoodi dokumentatsioon ja õppida üsna natuke rohkem see väga paindlik raamatukogu, mis on suurepärane teeme kliendi poolel skriptimine nagu me teeme manipuleerida ilme ja tunda meie kodulehelt koos Document Object Model. Ma olen Doug Lloyd. See on CS50.