DOUG LLOYD: V tomto videu, jsme chtěli zavolat samostatnou pozornost k velmi specifický prvek JavaScriptu že byste mohli najít šikovný když začínáte pracovat na manipulaci webové stránky a změna obsahu své webové stránky za běhu. A to je pojem Document Object Model. Tak jak jsme viděli v našem videu na JavaScript, objekty jsou velmi flexibilní. A mohou obsahovat různá pole. A i když jsme nešli do hodně detail, tato pole nebo vlastnosti, že bychom pravděpodobně více přiměřeně volat v rámci objektu, a to i Tyto vlastnosti mohou být jiné předměty. A uvnitř těchto objektů mohou být jiné předměty. 

Máte tento velmi velký objekt s mnoha jiných objektů uvnitř ní, jaký typ vytvoří tento představu o velký strom. Nyní, objekt dokument je velmi zvláštní objekt v JavaScriptu že organizuje celý svůj web strana v rámci tohoto druhu deštníku objektu. A tak uvnitř dokumentu Předmětem jsou předměty představující hlava a tělo své webové stránky. 

Uvnitř z nich jsou jiné objektů, a tak dále, a tak dále, dokud se celá vaše webová stránka má byly organizovány v tomto velkém objektu. Co je vzhůru tady, že jo? No, víme, jak pracovat s objekty v JavaScriptu. 

Takže pokud máme objekt, který odkazuje na celou naši webovou stránku, která znamená voláním správný Metody pro manipulaci tento objekt nebo pozměnit některé jeho vlastnosti, jsme může změnit prvky Naše stránka programově pomocí JavaScriptu místo toho, kódovat věci s, řekněme, HTML. Tak tady je příklad velmi jednoduchá webová stránka, že? Má to HTML tagy, hlavu. 

Uvnitř je titul, Hello World. Pak mám tělo. Uvnitř to, mám tři různé věci. Mám tag h2 záhlaví, odstavec, a odkaz. Jedná se o velmi jednoduchou webovou stránku. 

No, co by mohlo tento dokument objekt pro tento vypadat? No, je to trochu děsivý snad na prvním místě. Ale je to opravdu jen velký strom. A na samém kořene toho je dokument. 

Uvnitř tohoto dokumentu je další objekt s odkazem na HTML mé stránky. A HTML mé strany je to vše. A pak uvnitř HTML objekt, mám objekt hlavy, který se odkazuje na všechno, co tam. 

A vnitřní části tam, Mám titulní objekt. A uvnitř tam, mám další namítají, že je to právě hello world. Mohl bych mít své tělo zastoupené takhle. 

Uvnitř mé tělo, mám h2 objekt a p objekt pro odstavec a objekt na odkaz. A tak to celé hierarchie může být reprezentován jako velký strom se spoustou menších Krtečkem věci z něho vychází. Nyní, samozřejmě, pokud jsme programování, my si nemyslím, že o věci, jako velký strom. Chceme vidět skutečné kódu v souvislosti věci. 

A naštěstí, můžeme používat naše nástroje pro vývojáře skutečně se podívat na Tato webová stránka je Document Object. A pojďme to udělat. Takže jsem otevřela kartu prohlížeče. 

A já jsem otevřel Developer Tools. A v mém videu na JavaScriptu, já uvedeno, že konzole není jen někam, kde tiskneme informací, je to také místo, kde můžeme vstupní informace. V této souvislosti, co Chystám se říct, je Chtěl bych se dostat zpátky objekty dokument, takže můžu začít se podívat na to. Tak jak bych mohl udělat? No, když chci uspořádat je opravdu pěkně, Chystám se říct console.dir, D-I-R. Teď, já používám console.log se stačí vytisknout out něco velmi jednoduché. Ale pokud chci zorganizovat hierarchicky jako objekt, Chci, aby to nějak strukturovaná jako adresářové struktury. 

Takže chci, aby console.dir dokumentu. Budu stiskněte klávesu Enter. A právě pod ním teď, a já přiblížit tady, Mám tento dokument odpovědi s malou šipkou vedle ní. Teď, když otevřu na tuto šipku, tam to bude hodně věcí. 

Ale budeme ignorovat hodně na to a jen tak ze zaměření na nejdůležitější část, takže jsme může začít navigovat tento dokument. Je tu mnohem víc, než DOM jen rodič uzly a podřízené uzly. Je tu spousta doplňkových věcí. 

Takže já jdu otevřít toto nahoru. A je tu mnohem z věcí, které se objeví. Ale všechno mě zajímá, je tady, podřízené uzly. Pojďme otevřít, že až. 

Uvnitř tam vidím něco povědomého, HTML. Takže v naší dokumentu o jednu úroveň dolů, HTML. Otevřu, že až. Co jsme očekávali? 

Pokud si vzpomínáte z našeho diagramu, Co bychom měli nalézt uvnitř HTML? Jaké dvěma uzly jsou pod ním ve stromu? Pojďme to zjistit. Otevíráme HTML. Jdeme dolů na své podřízené uzly. 

Pop, že otevřené. Je tam hlava a tělo. A můžeme otevřít hlavu. Přejít na své podřízené uzly. No, je tu titul. 

A mohli bychom pokračovat dál a takhle navždy. Mohli bychom to udělat s tělem stejně. Ale existuje způsob, jak pro nás podívat se na dokument organizována jako velký objekt. A pokud se podíváme na je velký Objekt, který vypadá hodně jako je kód, to znamená, že můžeme začít Pro manipulaci s touto velkou objekt s použitím Kód změnit to, co naše webové stránky vypadá a cítí se jako. 

Tak to je docela mocný nástroj máme k dispozici nyní. Tak, jak jsme právě viděli se Dokument samotného objektu a všechny objekty uvnitř něj mají vlastnosti a metody, stejně stejně jako jakýkoli jiný objekt, který jsme pracoval s v JavaScriptu. Ale můžeme použít tyto vlastnosti a použít tyto metody pro druh drill down z velkého dokumentu a získat nižší a nižší a nižší, jemnější a jemnější zrna detailu, dokud jsme dostat se do velmi specifický kus našeho webové stránky, které chceme změnit. 

A když jsme aktualizaci vlastností Document Object nebo volejte na tyto metody, co se může stát na naší webové stránce. A my nemusíme dělat žádné osvěžující mít tyto změny projeví. 

A to je docela v pohodě schopnost mají, když pracujeme s kódem. Takže jaké jsou některé z těchto vlastností které jsou součástí objektu dokumentu? No, pravděpodobně jste viděli Pár z nich se opravdu rychle jak jsme byli zip přes obří dokumentu Objekt jsme právě viděli ve webovém prohlížeči. 

Ale několik těchto vlastností by mohlo být věci, jako je vnitřní HTML. A možná mi dokonce vzpomenout pomocí tohoto ve videu JavaScript na samém konci, když jsem mluvil o událostech. Co to bylo za vnitřní HTML? No, to je právě to, co je mezi tagy. 

A tak se vnitřní HTML, například, z titulu tag, kdybychom dál v Například, že před chvílí, by bylo hello world. To byl název naší stránce. Ostatní vlastnosti obsahovat jméno uzlu, který je název formátu HTML element, jako je název. ID, který je ID atribut prvku HTML. 

Připomeňme, že můžeme speciálně indikovat specifické prvky naší HTML s atributem ID, které obvykle přijde vhod v souvislosti s CSS, konkrétně. Parent uzel, což je odkaz na to, co je právě nahoře nade mnou v DOM. A podřízené uzly, což je odkaz na to, co je dole pode mnou. A my jsme viděli spoustu, který jen se dívá skrz. Podřízené uzly, to je, jak jsme se dostali nižší a nižší do stromu. 

Atributy, to je jen pole atributů prvku HTML. Takže příklad vlastností by mohl být, pokud máte značku obrazu, obvykle má atribut zdroje, možná výška a šířka, atribut. A tak, že by prostě být pole ze všech atributů souvisejících s tím prvku HTML. 

Styl je ještě jeden, který se představují CSS styling z určitého prvku. A později v tomto Video, budeme konkrétně leverage styl, aby se pár o změnách na našich stránkách. To jsou jen některé vlastnosti. 

A tam jsou také některé Metody, které můžeme používají také rychleji možná izolovat prvky objektu dokumentu. Možná, že nejuniverzálnější tito být getElementById. A tak bych mohl říct něco takového, protože pamatujte, že je to způsob dokumentu Objekt, document.getElementById. 

A uvnitř těchto závorek, specifikujte HTML prvek s konkrétním ID atribut, který jsem dříve set, a budu hned jít přímo k tomuto prvku z celkové webové stránky. Takže já nemusím snad vrtat dolů přes každou vrstvu. Mohu jen použít tuto metodu najít to, něco jako tepelně naváděná raketa, právo? Je to jen jde a zjistí, přesně to, co hledá. 

GetElementsByTagName je velmi podobné duchu. Možná, že by si všechny odvážné tagy nebo všechny p tagů a dej mi řadu všeho že bych pak mohl pracovat. appendChild přidává něco o jednu úroveň dolů ve stromu. 

Tak jsem se může přidat celý nový element o jednu úroveň níže. Nebo se může odstranit prvek, který je jeden stupeň nižší, i když budu chtít vymazat něco z mé webové stránky. Nyní, rychlý kódování poznámku a rychlý ukládání bolest hlavy na vědomí, doufejme. 

getElementById-- d je malá. Nemůžu vám říct, kolikrát mám Použité getElementById a kapitalizovaný tam d. Vzhledem k tomu, je to opravdu běžné. Budeme-li napsat slovo ID, je to Obvykle kapitál I kapitál D. A můj kód prostě nefunguje. A nemůžu přijít na to proč. To je opravdu, opravdu, opravdu Společný chyba, která každý dělá, ani odborníci, které mají dělají to navždy. Takže prostě být vědomi, getElementById, že d je malá písmena. A doufejme, že vám ušetří několik minut alespoň zármutku. 

Takže co to všechno nám to říká? Máme tyto metody. Máme tyto vlastnosti. Teď, když jsme se začít od dokument, dokument. co můžeme nyní dostat na jakýkoliv jediný kus naší webové stránce že chceme pomocí JavaScriptu jen tím, že volání těchto metod a využití vlastností , abychom našli na různých místech. 

To může dostat rozvláčný, to document.getElementById, Možná mají dlouhý název značky, Možná děláte více hovorů později. Věci se mohou dostat trochu rozvláčný. A jako programátoři, jak jste pravděpodobně viděli v mnoha z těchto videí, se nám nelíbí rozvláčné věci. 

Jsme rádi, aby mohli rychle dělat věci. Takže bychom chtěli více stručné způsob, jak říct něco. Takže tento druh vede k Pojem takzvaný jQuery. Nyní jQuery není JavaScript. Není to součást JavaScript. 

To je knihovna, která byla napsána některými programátory JavaScript asi před 10 lety. A jeho cílem je zjednodušit to, co je volal na straně klienta skriptování, který je v podstatě to, co jsme byli jen mluví o DOM s manipulací. A tak, když jsem chtěl upravit barva pozadí mé webové stránky, možná specifický Div. 

Tady, já jsem prý stále ElementById colorDiv. A já chci nastavit jeho barvu pozadí. Jestli já jsem jen s použitím čistého JavaScript pomocí Document Object Model, to je hodně věcí, že jo? document.getElementById colorDiv.style.backgroundColor = zelená. 

Uff. To bylo hodně co říct. Je to hodně psát, taky. A tak v jQuery, můžeme snad říci, to trochu výstižněji. Obchod off je to je to možná trochu trochu více mystický najednou, právo? 

Alespoň dlouhá je trochu více vysvětlující, co děláme. Tento znak dolaru, závorky, apostrof, hash, colorDiv, že jo? Co to znamená? No, to je v podstatě jen document.getElementById colorDiv. 

Ale je to takový druh zkratky způsob, jak to udělat pomocí jQuery. Pojďme stačí se podívat teď v několika různými způsoby že bych mohl skutečně Použití tohoto objektu dokumentu Model manipulovat kousky mých stránkách. Zejména, jdeme bude pracovat na manipulaci barva zvláštní Div, colorDiv, na webové stránce. Takže pojďme se podívat na to. Dobře. Takže jsem na stránce. Je to tzv test.html když si stáhnete pokud chcete pohrát s tím. A já mám spoustu Tlačítka na této stránce. A já říkám jednotlivých funkcí pro barvu pozadí, fialová, zelená, oranžová, červená, modrá, jeden jediný funkční pro barvu pozadí, obslužná rutina události na barvu pozadí, a pomocí jQuery. Co jsem mluvil o když tohle dělám? Takže jsme viděli tlačítka. A teď, pojďme se podívat na některé zdrojového kódu zde. Začneme s test.html. Takže jednotlivé funkce pro pozadí barva je to, co jsem tu napsal. Dovolte mi, abych posunout trochu. 

A všimněte si, že já definovaly tato tlačítka říci, kdy se klepnutí na toto tlačítko, volání funkce zbarví do fialova. Je-li toto tlačítko klepněte, spíše, volání funkce zezelená, zbarví do oranžova, zčervená, zmodrá. Můžete si asi tušíte, že tento možná není nejlepší návrh smysl, že jo? 

Bylo by hezké, kdybych mohl mají obecnější přístup. No, v první budeme se podívat na to, co těch pět funkce document.getElementById colorDiv.style.background = fialová, zelená, oranžová, červená, a modré, v daném pořadí. Takže, nijak zvlášť nejlepší návrh. 

Další sadu tlačítek Jsem se jsem napsal jeden funkce volána změnit barvu, která zjevně přijímá řetězec jako svůj argument. Tak to je trochu lepší. Fialová, zelená, oranžová, červená, modrá je nyní argument. Tak jsem napsal na obecnější Případ funkce JavaScript, který by mohl vypadat nějak takto. Jsem předáním. Tato změna funkce barva je očekává argument s názvem barva. A já říkám nastavit barva pozadí na barvu. Tak tady představuje to, co jsem se sem dostal. Takže je to o něco lepší. 

Ale já jsem mohl lepší než to. Pokud bychom jít dolů, aby se podívat na zpracování událostí situaci, Nyní všechny tyto hovory vypadají stejně. Pokud si vzpomínáte na naši diskuse o zpracování událostí, Mohu získat informace o tom, které z tato tlačítka byla klepli a použít. 

A tak v event.JavaScript, jsem písemná změna barvy událost, která zjistí, které tlačítko byl klepli. To je spouštěcí objekt online. A pak tady, to dostane opravdu rozvláčný. Ale to, co dělám, je, že jsem Nastavení pozadí barva triggerObject inner.HTML. To je text Mezi tlačítko tagy. 

A pak jsem zřejmě muset nastavte ji na malá písmena. A to je to, jak mohu převést celý řetězec na malá písmena v JavaScriptu pomocí že způsob, jak malá písmena. Protože když jsem nastavit barvu, jak jsem se snaží dělat tady, barva musí být malými písmeny. 

Ale tlačítko, které jsem měl, pokud bychom se znovu podívat, Všimněte si, že text je zde psaný s velkým P pro fialové. A pak u velmi tady dole, já očividně pokusit se to udělat pomocí jQuery stejně. A v tomto případě, já nejsem ve skutečnosti volání funkce vůbec. Právě jsem řekl, třídu, že jsem použitím tohoto tlačítka je tlačítko JQ. To je to. 

Jak tedy jQuery vím, co dělám? No, to je jedna z výhod lomítko nevýhody jQuery. Může mi dovolte, abych se dělat věci Velmi stručně, ale možná ne jak intuitivně. Možná, že ty další tři učinit trochu víc vycítit, co dělám. Tady, i když, co se děje? 

Zdá se, že vytváří anonymní funkce že zatížení vždy, když můj dokument je připraven, tak document.ready, některé funkce se stane. V podstatě, když je dokument připraven? Je to, když moje stránka načtena. 

Takže jakmile moje stránka načtení Následující funkce je vždy připraven. To říká, je-li objekt typu jQButton, nebo-li třída jQButton byl klepli, spustit tuto funkci. Tak tady je dvě anonymní funkce, jedné definované uvnitř druhého. 

Takže mé celé kontextu Zde zatím je moje strana když se načte volání této funkce. A tato funkce čeká pro tlačítko, které mají být kliknul. A když je kliknutí na tlačítko, JQ Tlačítko konkrétně kliknutí, volá ten druhý Funkce, která se děje nastavit pozadí Barva colorDiv být co text je mezi tagy. 

To je pojem které tlačítko byl klepli. Ale jinak je to druh chová podobně jako událost. Je to prostě tak, jak jsem stejný by se to vyjádřit v jQuery. Opět platí, že je to asi mnohem více zastrašující. Není tak jasné, jak něco jako event.js, což je možná trochu víc verbose, ale o něco méně zastrašující. 

Ale pokud budeme zaběhnout zpátky ke mně prohlížeče okna, pokud začnu clicking-- dobře, , která změnila na fialovou. To je zelená metodou řetězec. To je oranžový pomocí rutinu události. 

To je červená pomocí jQuery, že jo? Všichni se chovají přesně to samé. Prostě to udělat s použitím různých přístupy k řešení problému. Je tu mnohem víc jQuery pak jsme rozhodně mluvit o tomto videu. Ale pokud se chcete dozvědět více, můžete jít na jQuery druhu dokumentace a naučit se trochu víc o Tento velmi flexibilní knihovna, která je skvělé pro dělá na straně klienta skriptování, jako je to, co jsme dělali manipulovat vzhled a cítit se na našich webových stránkách s Document Object Model. Jsem Doug Lloyd. To je CS50.