DOUG LLOYD: Ebben a videóban, azt akartuk, kiáltani külön figyelmet hogy egy nagyon különleges eleme JavaScript hogy lehet találni hasznos mikor elkezded dolgozni manipulálni weboldalakat, és a tartalom megváltoztatása weboldal menet közben. És ez a fogalom A Document Object Model. Tehát mint láttuk, a video JavaScript, tárgyak igen rugalmas. És ezek is tartalmazhatnak különböző területeken. És bár nem mentünk bele a sok részletek, ezeken a területeken, vagy ingatlan, hogy mi lenne valószínűleg több megfelelően hívják őket keretében egy tárgy, még Ezek a tulajdonságok a más tárgyak. És azon belül az említett tárgyak lehet más tárgyakat. 

Itt van ez a nagyon nagy objektum egy csomó más tárgyak belsejében is, amely egyfajta teremt ez a gondolat egy nagy fa. Most, a dokumentum objektum egy nagyon különleges tárgy JavaScript szervezi a teljes web lap szerint ez a fajta esernyő egy tárgy. És így belsejében a dokumentum tárgy tárgyak bemutatásával A fej és a test a weboldal. 

Belül e más tárgyak, satöbbi, satöbbi, amíg a teljes weboldal szerveztek ebben a nagy objektum. Mi a fejjel itt, ugye? Nos, tudjuk, hogyan kell dolgozni A tárgyak a JavaScript. 

Tehát ha van egy tárgy, utal a teljes weboldalt, hogy azt jelenti, hívja a helyes módszerek manipulálni, hogy az objektum vagy módosítsanak bizonyos a tulajdonságok, mi lehet változtatni a elemeit oldalunkat programból JavaScript segítségével ahelyett, kódolásához dolgokat, mondjuk, HTML. Tehát itt egy példa egy Nagyon egyszerű weboldal, ugye? Van rajta HTML, egy fej. 

Belsejében van egy cím, hello world. Aztán van egy test. Belsejét, hogy azt kell Három különböző dolog. Nekem van egy H2 fejléc tag, egy bekezdés, valamint egy linket. Ez egy nagyon egyszerű internetes oldalt. 

Nos, mi lehet a dokumentum objektumának néz ki? Nos, ez egy kicsit ijesztő lehet, eleinte. De ez tényleg csak egy nagy fa. És a gyökerét ez a dokumentum. 

Belül a dokumentum egy másik objektum utalva a HTML oldalam. És a HTML oldalam van mindez. És akkor belsejében a HTML objektum, van egy vezetője tárgyat, arra utal, hogy ott mindent. 

És belsejében van, Van egy cím objektumot. És belsejében van, van egy másik kifogásolják, hogy ez csak hello world. Tudtam volna a testem képviselt, mint ez. 

Testemben, van egy h2 objektum és egy p objektumot bekezdés és a tárgy egy linket. És így ez a hierarchiája leírható, mint egy nagy fa sok kisebb kicsit dolgok jönnek ki belőle. Most, természetesen, amikor mi programozás, mi Nem hiszem, hogy a dolgok, mint egy nagy fa. Szeretnénk látni a tényleges kód kapcsolatos dolgokat. 

És Szerencsére mi is Használhatja fejlesztői eszközök hogy valóban vessünk egy pillantást Ezen a honlapon a dokumentum objektum. És legyünk erre. Úgyhogy nyitott egy böngésző fülre. 

És én megnyitotta fejlesztői eszközök. És az én video Javascript, I Említette, hogy a konzol nem Csak olyan helyre, ahol nyomtatjuk információkat, ez is egy hely, ahol tudjuk bemeneti adatok. Ebben az összefüggésben, mi Megyek mondani, Szeretnék visszatérni A dokumentum tárgyak, így tudok kezdeni, hogy egy pillantást. Szóval, hogyan lehet ezt megtenni? Nos, ha azt akarom, megszervezni, hogy valóban szépen, Azt fogom mondani console.dir, D-I-R. Most, azt használja console.log, hogy csak a nyomtatási valamit nagyon egyszerű. De ha azt akarom, hogy szervezze meg ezt hierarchikusan, mint egy tárgy, Azt akarom, hogy egyfajta strukturált mint egy könyvtár struktúrát. 

Szóval azt akarom console.dir dokumentumot. Megyek az Enter leütése. És jobbra lent most, és én nagyítás itt, Van ez a válasz dokumentumban egy kis nyílra. Most, amikor kinyitom ezt a nyilat, ott lesz egy csomó dolgot. 

De mi lesz figyelmen kívül hagyni a sok belőle, és csak egyfajta fókusz a legfontosabb része, ezért lehet kezdeni navigálni ezt a dokumentumot. Van sokkal több a DOM, mint Csak a szülő és a gyermek csomópontok csomópontok. Van egy csomó járulékos dolog. 

Így fogok megnyitni ezt fel. És van egy csomó dolog, hogy kiugrik. De minden, amit érdekel Itt, gyermek csomópont. Nyissunk hogy akár. 

Belsejében ott látom valami ismerős, HTML. Szóval belsejében a dokumentum Egy szinttel lejjebb, HTML. Kinyitom, hogy akár. Mit fogunk számított? 

Ha felidézzük a mi rajz, Mit tegyünk megtalálja benne a HTML? Mi két csomópont alatta a fán? Találjuk ki. Nyitunk HTML. Lemegyünk a gyermek csomópontok. 

Pop, hogy nyitva van. Van fej és a test. És mi lehet megnyitni a fejét. Mennie, hogy a gyermek csomópontok. Nos, itt van a cím. 

És sorolhatnám mint ez örökre. Mi is ezt a testet is. De van egy lehetőség számunkra, hogy nézd meg A dokumentum szervezett, mint egy nagy tárgyat. És ha megnézzük egy nagy objektum, amely úgy néz ki, mint a kód, ez azt jelenti, hogy mi lehet kezdeni manipulálni a nagy objektumot kódot megváltoztatni, amit mi honlap kinézetét és érzetét. 

Tehát ez egy nagyon hatékony eszköz mi rendelkezésünkre áll most. Tehát ahogy most láttam, az dokumentum tárgy maga és minden a tárgyak belsejébe van tulajdonságok és módszerek, csak mint bármely más objektumot, hogy már óta dolgozik a JavaScript. De tudjuk használni azokat a tulajdonságokat és a módszert alkalmazni, hogy egyfajta lebontja a nagy dokumentumot, és kap lejjebb és lejjebb és lejjebb, finomabb és finomabb szemcsék részletesség, amíg nem eljut egy nagyon különleges darab a mi weboldalt, hogy meg akarjuk változtatni. 

És amikor frissíteni tulajdonságai Document Object vagy hívja azokat a módszereket, dolgok megtörténhet honlapunkon. És nem kell semmilyen frissítő arra, hogy e módosítások lépnek életbe. 

És ez egy nagyon jó képessége Van, amikor dolgozunk kóddal. Tehát mi van néhány ilyen tulajdonságok hogy része egy dokumentum objektum? Nos, akkor valószínűleg látta, hogy egy pár közülük nagyon gyorsan mint mi voltunk cipzár az óriás dokumentum objektum láttunk a böngészőben. 

De egy pár ilyen tulajdonságok Lehet, hogy a dolgok, mint a belső HTML. És lehet, hogy még emlékszem nekem ezzel a JavaScript videó a legvégén, amikor beszélt eseményeket. Mi volt ez a belső HTML? Nos, ez csak mi között a címkéket. 

És így a belső HTML, például, a cím szerinti tag, ha már folyamatosan megy a hogy például egy perce lett volna hello world. Ez volt a címe oldalunkon. Egyéb tulajdonságok többek között a csomópont neve, amely a neve egy HTML elemet, például címet. ID, amely az ID- attribútum egy HTML elemet. 

Emlékezzünk vissza, hogy mi is kifejezetten jelzi, speciális eleme a HTML egy attribútum, amely általában jól jön keretében CSS, konkrétan. Szülő csomópont, amely egy hivatkozás mi csak fel felettem a DOM. És a gyermek csomópontok, amelyek egy hivatkozással mi meg alattam. És láttunk egy csomó, hogy Csak nézegette. Gyermek csomópontok, ez hogyan jutottunk mélyebbre és mélyebbre a fa. 

Tulajdonítja, ez csak egy tömböt Az attribútumok a HTML elem. Tehát egy példa attribútumok talán lehet, ha van egy kép tag, ez általában egy forrás attribútumot, talán egy magassága és szélessége attribútumot. És így, hogy ez csak egy tömböt Az összes jellemzővel társult azzal a HTML elemet. 

A stílus másik, hogy nem képviseli a CSS stílus egy sajátos eleme. És később ebben a videó, akkor kifejezetten tőkeáttétel stílust, hogy egy pár A változások a honlapunkon. Tehát ezek néhány tulajdonságát. 

És van olyan is, módszereket, hogy mi lehet Használja a szintén gyorsabban lehet elkülöníteni elemei a Document Object. Talán a legsokoldalúbb ezek közül getElementById. Szóval lehet, hogy valami ilyesmit mondani, mert emlékszem ez egy módszer a dokumentum Objektum, document.getElementById. 

És belsejét ezek a zárójelek adja HTML elemet egy adott azonosító tulajdonítják, hogy én már korábban beállítva, és én azonnal ugorj el ezt az elemet A teljes honlapon. Szóval nem kell fúrni talán végig minden egyes réteg. Én is csak ezt a módszert használja, hogy megtalálja azt, Valahogy úgy, mint egy hő kereső rakéta, jobbra? Csak azt, és megállapítja, pontosan mit keres. 

GetElementsByTagName van nagyon hasonló szellemben. Talán ez lenne megtalálni az összes félkövér címkék vagy valamennyi p címkék és adj egy sor mindent hogy én is majd dolgozni. AppendChild hozzáad valamit Egy szinttel lejjebb a fán. 

Szóval én is hozzá egy teljesen új eleme egy szinttel lejjebb. Vagy tudok eltávolítani egy elem, ami egy szinttel lejjebb is, ha azt akarom, törölni valamit a weboldalon. Most, gyors kódolási jegyzetet, és egy gyors fejfájás megtakarítás tudomásul, remélhetőleg. 

getElementById-- a d kisbetűs. Nem tudom megmondani, hogy hány alkalommal van Használt getElementById és aktivált A d van. Mert ez tényleg gyakori. Ha mi írjuk a szót ID, ez Általában főváros I. tőke D. És a kód csak nem működik. És nem tudok rájönni, hogy miért. Ez egy nagyon, nagyon, nagyon Gyakori hiba, hogy mindenki teszi, még a szakértők, akik már ezt örökre. Tehát csak ne feledje, getElementById, hogy d kisbetűs. És remélhetőleg, hogy takarít meg a több perc legalább szívfájdalom. 

Szóval mit jelent mindez nekünk? Jelenleg ezeket a módszereket. Jelenleg ezeket a tulajdonságokat. Ha most kezdődik dokumentumot, a dokumentum. bármi, mi most kap bármely egyetlen darab honlapunkon hogy szeretnénk JavaScript segítségével Csak hívja ezeket a módszereket és kihasználva a tulajdonságok hogy megtaláljuk a különböző helyszíneken. 

Ez is kap bőbeszédű, ez document.getElementById, Talán van egy hosszú címke nevét, Lehet, hogy még több hívást később. Dolgok egy kicsit bőbeszédű. És ahogy a programozók, ahogy már Valószínűleg látott sok ilyen videó, mi nem tetszik bőbeszédű dolgokat. 

Szeretnénk tudni, hogy a dolgok gyorsan. Tehát szeretnénk egy tömören, hogy mondjon valamit. Tehát ez a fajta vezet a fogalma úgynevezett jQuery. Most jQuery nem JavaScript. Ez nem része a JavaScript. 

Ez egy könyvtár, amit írt, Egyes JavaScript programozó Körülbelül 10 évvel ezelőtt. A Bizottság célja, hogy egyszerűsítse ezt mi nevű kliens oldali programozás, amely alapvetően mi voltunk csak beszél a DOM manipuláció. És így ha akartam, hogy módosítsa a háttérszíne weboldalamon, talán adott Div. 

Itt vagyok láthatóan egyre ElementById colorDiv. És azt akarom állítani a háttérszínt. Ha én csak a tiszta JavaScript használja a Document Object Model, ez egy csomó dolog, ugye? document.getElementById colorDiv.style.backgroundColor = zöld. 

Tyűha. Ez volt sok mondanivalója. Ez sok, hogy írja is. És így a jQuery, akkor talán mondani ez egy kicsit tömörebben. A kompromisszum, hogy ez talán egy kicsit kicsit rejtélyes hirtelen, jobbra? 

Legalábbis hosszú egy kicsit magyarázó, hogy mit csinálunk. Ez dollár jel, zárójelben, aposztróf hash, colorDiv, ugye? Az mit jelent? Nos, ez alapvetően csak document.getElementById colorDiv. 

De ez a fajta gyorsírásos módja, hogy a jQuery. Nézzük csak vess egy pillantást most egy pár különböző módon hogy talán valóban Használja ezt a Document Object Modell manipulálni darab oldalamon. Különösen megyünk hogy a dolgozó a manipulálására a szín egy adott Div, colorDiv, a weblapon. Szóval vessünk egy pillantást, hogy. Minden rendben. Szóval én egy oldalon. Úgy hívják proba.html, ha le ezt, ha akarod bütykölni ezt. És van egy csomó gombok ezen az oldalon. És mondok egyes funkciók A háttér színe, lila, zöld, narancs, piros, kék, egy egyfunkciós A háttér színe, eseménykezelő A háttér színe, és a jQuery. Mit is beszélek ha én csinálom ezt? Így láttuk a gombokat. Most, vessünk egy pillantást néhány forráskód itt. Kezdjük proba.html. Így az egyes funkciók háttér szín az, amit az ide beírt. Hadd lépjünk egy kicsit. 

És észre fogod venni, hogy én meghatározta ezeket a gombokat Mondhatni, mikor erre a gombra kattint, A funkciót lilára. Ha ez a gomb klikk, hanem, A funkciót zöldre vált, narancssárgára, pirosra, kékre vált. Akkor valószínűleg hiszem, hogy ez a talán nem a legjobb design értelme, ugye? 

Jó lenne, ha tudnék Van egy általános megközelítést. Nos, először akkor vess egy pillantást hogy mi az az öt funkciók document.getElementById colorDiv.style.background = lila, zöld, narancssárga, piros, és kék, ill. Szóval, nem különösebben a legjobb design. 

A következő sor gomb Én is írtam egy funkció úgynevezett színe megváltozik, hogy látszólag elfogad egy sztringet ad érvet. Szóval ez egy kicsit jobb. Lila, zöld, narancs, piros, kék most egy érv. Szóval írtam egy általánosabb esetében a JavaScript funkciót, ami valahogy így néz ki. Én halad. Ez a funkció a változás színe vár egy érv az úgynevezett színes. És mondok meg a háttérszínt színét. Tehát itt képviseli, amit kaptam itt. Szóval ez egy kicsit jobb. 

De lehet, hogy Ennél jobb. Ha lemegyünk, hogy egy pillantást A eseménykezelő helyzetet, Most ezek a hívások ugyanúgy néz ki. Ha felidézzük a mi vita esetén rakodók, Azt lehet információt szerezni, amely a ezeket a gombokat kattintottak, és azt használja. 

És így event.JavaScript, én már írásos színe megváltozik esemény, amely kitalálja, melyik gombra kattintás. Ez a ravaszt tárgy sorban. És akkor itt, nem lesz igazán bőbeszédű. De mit csinálok én vagyok beállítás a háttér szín triggerObject inner.HTML. Ez a szöveg a gomb közötti címkéket. 

És akkor nyilván van úgy beállítani, hogy kisbetűs. És ez hogyan tudja alakítani az egész karakterlánc kisbetűs a JavaScript segítségével ezt a módszert a kisbetűs. Mert amikor meghatározta a színt, mint én próbálok csinálni itt, A színes kell lennie csupa kisbetűvel. 

De a gombot, hogy volt, ha veszünk egy pillantást, észre, hogy a szöveg van írva egy nagy P a lila. És akkor a nagyon alján van, azt nyilván megpróbálja ezt a jQuery is. És ebben az esetben, nem vagyok ténylegesen egy funkció egyáltalán. Már csak azt mondta az osztálynak, hogy én vagyok hogy erre a gombra egy JQ gombot. Ez az. 

Tehát hogyan jQuery tudom, mit csinálok? Nos, ez az egyik előnye perjel hátrányait jQuery. Ez engedje meg, hogy a dolgokat nagyon tömören, de talán nem mint kezelni. Lehet, hogy azok a másik három, hogy egy kicsit több értelme, hogy mit csinálok. Itt azonban mi folyik itt? 

Úgy látszik, ami egy névtelen függvényt hogy a rakományok valahányszor dokumentum készen áll, így document.ready, Néhány funkció nem fog történni. Alapvetően, ha egy dokumentumot kész? Ez az, amikor az én oldal betöltése. 

Tehát amint én oldal betöltése, a következő funkció mindig készen áll. Azt mondja, ha egy objektum típusú jQButton, vagy ha osztály jQButton került kattintott, A funkció végrehajtása. Tehát itt két névtelen függvények, egy meghatározott belsejében a többi. 

Szóval én egész összefüggésében Itt eddig oldalam amikor betölti azt kéri ezt a funkciót. És ez a funkció vár Egy gombot kell kattintani. És amikor egy gombra kattint, Jq gombot kifejezetten kattint, arra kéri a másik funkciót, ami megy beállítani a háttérben színe colorDiv lenni bármilyen szöveg között a címkéket. 

Ez a fogalom amely gombra kattintás. De különben ez a fajta viselkedik hasonló esemény. Ez ugyanúgy I kifejezné ezt a jQuery. Ismét, ez valószínűleg egy sokkal több félelmetes. Ez nem olyan egyértelmű, mint valami ilyesmit event.js, ami talán egy kicsit többet bőbeszédű, de egy kicsit kevesebb riasztónak. 

De ha pop vissza át a böngészőm ablak, ha elkezdek clicking-- is, hogy megváltozott a lila. Ez a zöld segítségével a húr módszer. Ez narancs az eseménykezelő. 

Ez a vörös jQuery, ugye? Ezek mindegyike viselkednek pontosan ugyanaz. Ők csak csináld különböző megközelíti a probléma megoldására. Van egy sokkal többet jQuery akkor is biztos fogok beszélni ebben a videóban. De ha azt akarjuk, hogy többet, akkor megy a jQuery fajta dokumentáció és tanulni egy kicsit többet Ez a nagyon rugalmas könyvtár, amely nagyszerű csinál kliens oldali scripting, mint amit csináltunk manipulálni a megjelenés és úgy érzi, a honlapunkon A Document Object Model. Én Doug Lloyd. Ez CS50.