DOUG LLOYD: V tomto videu, sme chceli zavolať samostatnú pozornosť k veľmi špecifický prvok JavaScriptu že by ste mohli nájsť šikovný keď začínate pracovať na manipuláciu webové stránky a zmena obsahu svoje webové stránky v reálnom čase. A to je pojem Document Object Model. Tak ako sme videli v našom videu na JavaScript, objekty sú veľmi flexibilné. A môžu obsahovať rôzne polia. A aj keď sme nešli do veľa detail, tieto polia alebo vlastnosti, že by sme pravdepodobne viac primerane volať v rámci objektu, a to aj Tieto vlastnosti môžu byť iné predmety. A vo vnútri týchto objektov môžu byť iné predmety. 

Máte tento veľmi veľký objekt s mnohých iných objektov vnútri nej, aký typ vytvorí tento predstavu o veľký strom. Teraz, objekt dokument je veľmi zvláštne objekt v JavaScripte že organizuje celý svoj web strana v rámci tohto druhu dáždnika objektu. A tak vo vnútri dokumentu Predmetom sú predmety predstavujúce hlava a telo svoje webové stránky. 

Vnútri z nich sú iné objektov, a tak ďalej, a tak ďalej, kým sa celá vaša webová stránka má boli organizované v tomto veľkom objekte. Čo je hore tu, že jo? No, vieme, ako pracovať s objektmi v JavaScriptu. 

Takže ak máme objekt, ktorý odkazuje na celú našu webovú stránku, ktorá znamená volaním správny Metódy pre manipuláciu tento objekt alebo zmeniť určité jeho vlastnosti, sme môže zmeniť prvky Naša stránka programovo pomocou JavaScriptu namiesto toho, kódovať veci s, povedzme, HTML. Tak tu je príklad veľmi jednoduchá webová stránka, že? Má to HTML tagy, hlavu. 

Vnútri je titul, Hello World. Potom mám telo. Vnútri to, mám tri rôzne veci. Mám tag h2 hlavičky, odsek, a odkaz. Jedná sa o veľmi jednoduchú webovú stránku. 

No, čo by mohlo tento dokument objekt pre tento vyzerať? No, je to trochu desivý snáď na prvom mieste. Ale je to naozaj len veľký strom. A na samom koreňa toho je dokument. 

Vnútri tohto dokumentu je ďalší objekt s odkazom na HTML mojej stránky. A HTML mojej strany je to všetko. A potom vnútri HTML objekt, mám objekt hlavy, ktorý sa odvoláva na všetko, čo tam. 

A vnútornej časti tam, Mám titulnej objekt. A vnútri tam, mám ďalší namietajú, že je to práve hello world. Mohol by som mať svoje telo zastúpené takto. 

Vnútri moje telo, mám h2 objekt a p objekt pre odsek a objekt na odkaz. A tak to celé hierarchie môže byť reprezentovaný ako veľký strom s množstvom menších Krtkom veci z neho vychádza. Teraz, samozrejme, ak sme programovanie, my si nemyslím, že o veci, ako veľký strom. Chceme vidieť skutočné kódu v súvislosti veci. 

A našťastie, môžeme používať naše nástroje pre vývojárov skutočne sa pozrieť na Táto webová stránka je Document Object. A poďme to urobiť. Takže som otvorila kartu prehliadača. 

A ja som otvoril Developer Tools. A v mojom videu na JavaScripte, ja uvedené, že konzola nie je len niekam, kde tlačíme informácií, je to tiež miesto, kde môžeme vstupné informácie. V tejto súvislosti, čo Chystám sa povedať, je Chcel by som sa dostať späť objekty dokument, takže môžem začať sa pozrieť na to. Tak ako by som mohol urobiť? No, keď chcem usporiadať je naozaj pekne, Chystám sa povedať console.dir, D-I-R. Teraz, ja používam console.log sa stačí vytlačiť out niečo veľmi jednoduché. Ale ak chcem zorganizovať hierarchicky ako objekt, Chcem, aby to nejako štruktúrovaná ako adresárovej štruktúry. 

Takže chcem, aby console.dir dokumentu. Budem stlačte Enter. A práve pod ním teraz, a ja priblížiť tu, Mám tento dokument odpovede s malou šípkou vedľa nej. Teraz, keď otvorím na túto šípku, tam to bude veľa vecí. 

Ale budeme ignorovať veľa na to a len tak zo zamerania na najdôležitejšia časť, takže sme môže začať navigovať tento dokument. Je tu oveľa viac, než DOM len rodič uzly a podriadené uzly. Je tu veľa doplnkových vecí. 

Takže ja idem otvoriť toto hore. A je tu oveľa z vecí, ktoré sa objavia. Ale všetko ma zaujíma, je tu, podriadené uzly. Poďme otvoriť, že až. 

Vnútri tam vidím čosi spájalo, HTML. Takže v našej dokumente o jednu úroveň dole, HTML. Otvorím, že až. Čo sme očakávali? 

Ak si spomínate z nášho diagramu, Čo by sme mali nájsť vo vnútri HTML? Aké dvoma uzlami sú pod ním v strome? Poďme zistiť. Otvárame HTML. Ideme dole na svojich podriadených uzly. 

Pop, že otvorené. Je tam hlava a telo. A môžeme otvoriť hlavu. Prejsť na svojich podriadených uzly. No, je tu titul. 

A mohli by sme pokračovať ďalej a takhle navždy. Mohli by sme to urobiť s telom rovnako. Ale existuje spôsob, ako pre nás pozrieť sa na dokument organizovaná ako veľký objekt. A ak sa pozrieme na je veľký Objekt, ktorý vyzerá veľa ako je kód, to znamená, že môžeme začať Pre manipuláciu s touto veľkou objekt s použitím Kód zmeniť to, čo naše webové stránky vyzerá a cíti sa ako. 

Tak to je celkom mocný nástroj máme k dispozícii teraz. Tak, ako sme práve videli sa Dokument samotného objektu a všetky objekty vnútri neho majú vlastnosti a metódy, rovnako rovnako ako akýkoľvek iný objekt, ktorý sme pracoval s v JavaScriptu. Ale môžeme použiť tieto vlastnosti a použiť tieto metódy pre druh drill down z veľkého dokumentu a získať nižšie a nižšie a nižšie, jemnejšie a jemnejšie zrná detailu, kým sme dostať sa do veľmi špecifický kus nášho webové stránky, ktoré chceme zmeniť. 

A keď sme aktualizáciu vlastností Document Object alebo volajte na tieto metódy, čo sa môže stať na našej webovej stránke. A my nemusíme robiť žiadne osviežujúci mať tieto zmeny prejavia. 

A to je celkom v pohode schopnosť majú, keď pracujeme s kódom. Takže aké sú niektoré z týchto vlastností ktoré sú súčasťou objektu dokumentu? No, pravdepodobne ste videli Pár z nich sa naozaj rýchlo ako sme boli zips cez obrie dokumentu Objekt sme práve videli vo webovom prehliadači. 

Ale niekoľko týchto vlastností by mohlo byť veci, ako je vnútorný HTML. A možno mi dokonca spomenúť pomocou tohto vo videu JavaScript na samom konci, keď som hovoril o udalostiach. Čo to bolo za vnútornú HTML? No, to je práve to, čo je medzi tagy. 

A tak sa vnútorný HTML, napríklad, z titulu tag, keby sme ďalej v Napríklad, že pred chvíľou, by bolo hello world. To bol názov našej stránke. Ostatné vlastnosti obsahovať meno uzla, ktorý je názov formátu HTML element, ako je názov. ID, ktorý je ID atribút prvku HTML. 

Pripomeňme, že môžeme špeciálne indikovať špecifické prvky našej HTML s atribútom ID, ktoré zvyčajne príde vhod v súvislosti s CSS, konkrétne. Parent uzol, čo je odkaz na to, čo je práve hore nado mnou v DOM. A podriadené uzly, čo je odkaz na to, čo je dole podo mnou. A my sme videli veľa, ktorý len sa pozerá skrz. Podriadené uzly, to je, ako sme sa dostali nižšie a nižšie do stromu. 

Atribúty, to je len pole atribútov prvku HTML. Takže príklad vlastností by mohol byť, ak máte značku obrazu, zvyčajne má atribút zdroje, možná výška a šírka, atribút. A tak, že by jednoducho byť polia zo všetkých atribútov súvisiacich s tým prvku HTML. 

Štýl je ešte jeden, ktorý sa predstavujú CSS styling z určitého prvku. A neskôr v tomto Video, budeme konkrétne leverage štýl, aby sa pár o zmenách na našich stránkach. To sú len niektoré vlastnosti. 

A tam sú tiež niektoré Metódy, ktoré môžeme používajú aj rýchlejšie možná izolovať prvky objektu dokumentu. Možno, že najuniverzálnejší títo byť getElementById. A tak by som mohol povedať niečo také, pretože pamätajte, že je to spôsob dokumente Objekt, document.getElementById. 

A vo vnútri týchto zátvoriek, špecifikujte HTML prvok s konkrétnym ID atribút, ktorý som predtým set, a budem hneď ísť priamo k tomuto prvku z celkovej webové stránky. Takže ja nemusím snáď vŕtať dole cez každú vrstvu. Môžem len použiť túto metódu nájsť to, niečo ako tepelne navádzaná raketa, v poriadku? Je to len ide a zistí, presne to, čo hľadá. 

GetElementsByTagName je veľmi podobné duchu. Možno, že by si všetky odvážne tagy alebo všetky p tagov a daj mi rad všetkého že by som potom mohol pracovať. appendChild pridáva niečo o jednu úroveň dole v strome. 

Tak som sa môže pridať celý nový element o jednu úroveň nižšie. Alebo sa môže odstrániť prvok, ktorý je jeden stupeň nižšia, aj keď budem chcieť vymazať niečo z mojej webovej stránky. Teraz, rýchly kódovanie poznámku a rýchly ukladanie bolesť hlavy na vedomie, dúfajme. 

getElementById-- d je malá. Nemôžem vám povedať, koľkokrát mám Použité getElementById a kapitalizované tam d. Vzhľadom k tomu, je to naozaj bežné. Ak budeme napísať slovo ID, je to Obvykle kapitál Aj kapitál D. A môj kód jednoducho nefunguje. A nemôžem prísť na to prečo. To je naozaj, naozaj, naozaj Spoločný chyba, ktorá každý robí, ani odborníci, ktoré majú robia to navždy. Takže jednoducho byť vedomí, getElementById, že d je malé písmená. A dúfajme, že vám ušetrí niekoľko minút aspoň zármutku. 

Takže čo to všetko nám to hovorí? Máme tieto metódy. Máme tieto vlastnosti. Teraz, keď sme sa začať od dokument, dokument. čo môžeme teraz dostať na akýkoľvek jediný kus našej webovej stránke že chceme pomocou JavaScriptu len tým, že volanie týchto metód a využitie vlastností , Aby sme našli na rôznych miestach. 

To môže dostať rozvláčny, to document.getElementById, Možno majú dlhý názov značky, Možno robíte viac hovorov neskôr. Veci sa môžu dostať trochu rozvláčny. A ako programátori, ako ste pravdepodobne videli v mnohých z týchto videí, sa nám nepáči rozvláčne veci. 

Sme radi, aby mohli rýchlo robiť veci. Takže by sme chceli viac stručné spôsob, ako povedať niečo. Takže tento druh vedie k Pojem takzvaný jQuery. Teraz jQuery nie je JavaScript. Nie je to súčasť JavaScript. 

To je knižnica, ktorá bola napísaná niektorými programátorov JavaScript asi pred 10 rokmi. A jeho cieľom je zjednodušiť to, čo je volal na strane klienta skriptovanie, ktorý je v podstate to, čo sme boli len hovorí o DOM s manipuláciou. A tak, keď som chcel upraviť farba pozadia mojej webovej stránky, možno špecifický Div. 

Tu, ja som vraj stále ElementById colorDiv. A ja chcem nastaviť jeho farbu pozadia. Či ja som len s použitím čistého JavaScript pomocou Document Object Model, to je veľa vecí, že jo? document.getElementById colorDiv.style.backgroundColor = zelená. 

Uff. To bolo veľa čo povedať. Je to veľa písať, taky. A tak v jQuery, môžeme snáď povedať, to trochu výstižnejšie. Obchod off je to je to možno trochu trochu viac mystický naraz, v poriadku? 

Aspoň dlhá je trochu viac vysvetľujúce, čo robíme. Tento znak dolára, zátvorky, apostrof, hash, colorDiv, že jo? Čo to znamená? No, to je v podstate len document.getElementById colorDiv. 

Ale je to taký druh skratky spôsob, ako to urobiť pomocou jQuery. Poďme stačí sa pozrieť teraz v niekoľkými rôznymi spôsobmi že by som mohol skutočne Použitie tohto objektu dokumentu Model manipulovať kúsky mojich stránkach. Najmä, ideme bude pracovať na manipuláciu farba zvláštne Div, colorDiv, na webovej stránke. Takže poďme sa pozrieť na to. Dobre. Takže som na stránke. Je to tzv test.html keď si stiahnete ak chcete pohrať s tým. A ja mám veľa Tlačidlá na tejto stránke. A ja hovorím jednotlivých funkcií pre farbu pozadia, fialová, zelená, oranžová, červená, modrá, jeden jediný funkčný pre farbu pozadia, obslužná rutina udalosti na farbu pozadia, a pomocou jQuery. Čo som hovoril o keď toto robím? Takže sme videli tlačidla. A teraz, poďme sa pozrieť na niektoré zdrojového kódu tu. Začneme s test.html. Takže jednotlivé funkcie pre pozadie farba je to, čo som tu napísal. Dovoľte mi, aby som posunúť trochu. 

A všimnite si, že ja definovali tieto tlačidlá povedať, kedy sa kliknutí na toto tlačidlo, volanie funkcie sfarbí do fialova. Ak je toto tlačidlo kliknite, skôr, volanie funkcie zozelenie, sfarbí do oranžova, sčervená, zmodrie. Môžete si asi tušíte, že tento možno nie je najlepší návrh zmysel, že jo? 

Bolo by pekné, keby som mohol majú všeobecnejší prístup. No, v prvom budeme sa pozrieť na to, čo tých päť funkcie document.getElementById colorDiv.style.background = fialová, zelená, oranžová, červená, a modrej, v danom poradí. Takže, nijako zvlášť najlepší návrh. 

Ďalšiu sadu tlačidiel Som sa som napísal jeden funkcia volaná zmeniť farbu, ktorá zjavne prijíma reťazec ako svoj argument. Tak to je trochu lepšie. Fialová, zelená, oranžová, červená, modrá je teraz argument. Tak som napísal na všeobecnejšie Prípad funkcie JavaScript ktorý by mohol vyzerať nejako takto. Som odovzdaním. Táto zmena funkcie farba je očakáva argument s názvom farba. A ja hovorím nastaviť farba pozadia na farbu. Tak tu predstavuje to, čo som sa sem dostal. Takže je to o niečo lepšie. 

Ale ja som mohol lepšie ako to. Ak by sme ísť dole, aby sa pozrieť na spracovanie udalostí situácii, Teraz všetky tieto hovory vyzerajú rovnako. Ak si spomínate na našu diskusia o spracovanie udalostí, Môžem získať informácie o tom, ktoré z tieto tlačidlá bola klepli a použiť. 

A tak v event.JavaScript, som písomná zmena farby udalosť, ktorá zistí, ktoré tlačidlo bol klepli. To je spúšťací objekt online. A potom tu, to dostane naozaj rozvláčny. Ale to, čo robím, je, že som Nastavenie pozadia farba triggerObject inner.HTML. To je text Medzi tlačidlo tagy. 

A potom som zrejme musieť nastavte ju na malé písmená. A to je to, ako môžem previesť celý reťazec na malé písmená v JavaScripte pomocou že spôsob, ako malé písmená. Pretože keď som nastaviť farbu, ako som sa snaží robiť tu, farba musí byť malými písmenami. 

Ale tlačidlo, ktoré som mal, ak by sme sa znovu pozrieť, Všimnite si, že text je tu písaný s veľkým P pre fialovej. A potom u veľmi tu dole, ja očividne pokúsiť sa to urobiť pomocou jQuery rovnako. A v tomto prípade, ja nie som v skutočnosti volanie funkcie vôbec. Práve som povedal, triedu, že som použitím tohto tlačidla je tlačidlo JQ. To je ono. 

Ako teda jQuery viem, čo robím? No, to je jedna z výhod lomítko nevýhody jQuery. Môže mi dovoľte, aby som sa robiť veci Veľmi stručne, ale možno nie ako intuitívne. Možno, že tie ďalšie tri urobiť trochu viac vycítiť, čo robím. Tu, aj keď, čo sa deje? 

Zdá sa, že vytvára anonymné funkcie že zaťaženie vždy, keď môj dokument je pripravený, tak document.ready, niektoré funkcie sa stane. V podstate, keď je dokument pripravený? Je to, keď moja stránka načítaná. 

Takže akonáhle moja stránka načítanie Nasledujúce funkcie je vždy pripravený. To hovorí, ak je objekt typu jQButton, alebo ak trieda jQButton bol stlačili, spustiť túto funkciu. Tak tu je dve anonymné funkcie, jednej definovanej vnútri druhého. 

Takže moje celé kontextu Tu zatiaľ je moja strana keď sa načíta volanie tejto funkcie. A táto funkcia čaká pre tlačidlo, ktoré majú byť klikol. A keď je kliknutie na tlačidlo, JQ Tlačidlo konkrétne kliknutie, volá ten druhý Funkcia, ktorá sa deje nastaviť pozadí Farba colorDiv byť čo text je medzi tagy. 

To je pojem ktoré tlačidlo bol klepli. Ale inak je to druh správa podobne ako udalosť. Je to proste tak, ako som rovnaký by sa to vyjadriť v jQuery. Opäť platí, že je to asi oveľa viac zastrašujúce. Nie je tak jasné, ako niečo ako event.js, čo je možno trochu viac verbose, ale o niečo menej zastrašujúce. 

Ale ak budeme zabehnúť späť ku mne prehliadača okná, ak začnem clicking-- dobre, , Ktorá zmenila na fialovú. To je zelená metódou reťazec. To je oranžový pomocou rutinu udalosti. 

To je červená pomocou jQuery, že jo? Všetci sa správajú presne to isté. Proste to urobiť s použitím rôznych prístupy k riešeniu problému. Je tu oveľa viac jQuery potom sme rozhodne hovoriť o tomto videu. Ale ak sa chcete dozvedieť viac, môžete ísť na jQuery druhu dokumentácie a naučiť sa trochu viac o Tento veľmi flexibilný knižnica, ktorá je skvelé pre robí na strane klienta skriptovanie, ako je to, čo sme robili manipulovať vzhľad a cítiť sa na našich webových stránkach s Document Object Model. Som Doug Lloyd. To je CS50.