Doug LLOYD: U ovom video, željeli smo viknuti zasebnu pozornost na vrlo poseban element JavaScript da bi mogli naći pri ruci kada ste s početkom raditi na manipulaciju web stranice i mijenja sadržaj vaše web stranice u letu. I to je pojam model objekta dokumenta. Dakle, kao što smo vidjeli u našem video na JavaScript, predmeti su vrlo fleksibilni. I oni mogu sadržavati različite polja. I iako mi ne ide u puno detalj, te polja i svojstva, da ćemo vjerojatno više prikladno ih nazvati u kontekstu nekog objekta, čak ta svojstva mogu biti i drugi predmeti. A unutar tih objekata mogu biti i drugi predmeti. 

Imate ovu veliku objekt s puno drugih objekata unutar njega, koja vrsta stvara ideju velikog stabla. Sada, objekt dokument vrlo poseban objekt u JavaScript da organizira svoj cijeli web Stranica pod ovu vrstu kišobran od objekta. I tako unutar dokumenta Predmet su objekti predstavljanje glava i tijelo vaše web stranice. 

Unutar to su druge objekata, i tako dalje, i tako dalje, dok se cijela web stranica ima organiziran je u ovom velikom objektu. Å to je naopako ovdje, zar ne? Pa, znamo kako raditi s objektima u JavaScript. 

Dakle, ako imamo objekt koji se odnosi na cijelu našu web stranicu, da se znači pozivom ispravan Metode manipulirati taj objekt ili mijenjanje određeni svojih svojstava, mi može mijenjati elemente naša stranica programatski pomoću JavaScript umjesto da da kod stvari s, recimo, HTML. Dakle, ovdje je primjer od a vrlo jednostavan web stranica, zar ne? To je dobio HTML oznake, glavu. 

Unutar postoji naslov, Hello World. Onda imam tijelo. Unutar toga, imam tri različite stvari. Imam H2 zaglavlja oznaku, odlomak, i vezu. Ovo je vrlo jednostavna web stranica. 

Pa, što bi moglo dokument objekt za ovu izgledati? Pa, to je malo zastrašujuće možda na prvi. Ali to je zapravo samo velika stabla. A na samom korijenu toga je dokument. 

Unutar dokument je još Predmet se odnosi na HTML stranici. I HTML moje stranice je sve to. A onda unutar HTML predmet, imam glavu objekt, koji se odnosi na sve tamo. 

A unutar tu, Imam naslov objekt. A unutar tu, imam još jedan prigovoriti da je samo Hello World. Mogao sam imati svoje tijelo predstavljao ovako. 

Unutar moje tijelo, imam H2 objekt i p objekt za stavku sa a objekt za vezu. I tako to cijela hijerarhija može se prikazati kao velikog stabla s puno manjim Little stvari dolaze iz nje. Sada, naravno, kada je mi programiranje, mi nemojte misliti stvari poput velikog stabla. Želimo vidjeti stvarna kod povezane stvari. 

I na sreću, možemo koristiti naše razvojne alate zapravo pogledati Ova web stranica je predmet dokumenta. I neka je to. Tako sam otvorio karticu pregledniku. 

I sam otvorio razvojne alate. I u mom videu JavaScript ja spominje da je konzola ne samo negdje gdje možemo ispisati podatke, to je također mjesto gdje možemo ulazne podatke. U tom kontekstu, što Idem reći Želio bih se vratiti predmeti dokument, tako da mogu početi da imaju pogled na njega. Pa kako bih mogao to učiniti? Pa, ako želim organizirati stvarno lijepo, Idem reći console.dir, D-i-R. Sada, ja koristiti console.log se samo ispisati nešto vrlo jednostavno. Ali ako želim organizirati ovo hijerarhijski kao objekt, Želim da vrsta strukturiranih poput strukture direktorija. 

Dakle, želim console.dir dokument. Idem pritisnite Enter. A odmah ispod nje sada, i ja ću povećavanje ovdje Imam ovaj dokument odgovor uz malo strelicu pokraj njega. Sada, kada sam otvoriti ovu strelicu, tu će biti puno stvari. 

Ali ćemo zanemariti puno to i samo vrsta fokusu o najvažnijem dijelu, tako da smo može početi kretati ovaj dokument. Postoji puno više nego DOM Samo roditelj čvorovi i dijete čvorovi. Postoji puno popratnih stvari. 

Tako ću otvoriti ovaj gore. I tu je puno stvari koje pops gore. Ali sve me zanima upravo ovdje, dijete čvorovi. Otvorimo to. 

Unutar tamo vidim nešto poznato, HTML. Dakle unutar našeg dokumenta jednu razinu dolje, HTML. Otvorim to. Što očekujemo? 

Ako se sjećate iz našeg dijagrama, Što bismo trebali naći unutar HTML? Koje dvije čvorovi su ispod njega na stablu? Idemo saznati. Mi otvoriti HTML. Idemo dolje na svoje dijete čvorova. 

Pop otvaranje. Postoji glave i tijela. I možemo otvoriti glavu. Idi na svoje dijete čvorova. Pa, postoji naslov. 

I mogli bismo ići na i ovako zauvijek. Mogli bismo to učiniti s tijelom, kao dobro. Ali postoji način za nas da pogledamo dokument organizirana kao veliki objekt. A ako gledamo je velika objekt koji izgleda puno kao i kod, to znači da možemo početi manipulirati ovaj veliki objekt pomoću broj mijenjati ono što naš Web stranica izgleda i osjeća slično. 

Tako da je prilično moćan alat imamo na raspolaganju sada. Dakle, kao što smo upravo vidjeli, Dokument sama objekt i sve objekte unutar nje imaju svojstva i metode, samo kao i bilo koji drugi objekt koji smo radili s u JavaScriptu. Ali možemo koristiti ta svojstva i koristiti one metode vrsta drill down od velikog dokumenta i dobiti niže i niže i niže, finije i finije žitarice detalja, dok ne doći na vrlo specifičan dio naše Web stranice koje želite promijeniti. 

A kad smo ažurirati svojstva Document Object ili nazovite one metode, stvari mogu dogoditi na našoj web-stranici. I ne trebamo učiniti bilo osvježenje da te promjene stupaju na snagu. 

I to je prilično kul sposobnost ima kada radimo s kodom. Pa što su neki od tih svojstava koji su dio objekta dokumenta? Pa, vjerojatno vidjeli par njih jako brzo kao što smo bili patentni zatvarač kroz div dokumenta Objekt smo upravo vidjeli u web pregledniku. 

Ali par tih svojstava možda stvari kao unutrašnje HTML. A možda čak i podsjetiti me koristeći ovaj u videu JavaScript na samom kraju, kada sam je govorio o događajima. Što je to unutarnja HTML? Pa, to je samo ono što je između oznaka. 

I tako unutarnji HTML, na primjer, iz naslova oznaka, ako je zadržao ide u da npr trenutak prije, bi bio Hello World. To je naslov naše stranice. Ostala svojstva uključuju ime čvora, što je naziv HTML elementa, kao što naslov. ID, koji je ID atribut HTML elementa. 

Sjetite se da smo posebno može ukazivati specifični elementi našeg HTML s ID atribut, koji obično dolazi u ruci u kontekstu CSS, posebno. Roditelj čvor, koji se odnosi na što je samo do iznad mene u DOM. A dijete čvorovi, koje je upućivanje na ono što je ispod mene. A vidjeli smo puno toga samo gleda kroz. Dijete čvorovi, to je kako smo dobili niže i niže u stablo. 

Atributi, to je samo niz atributa HTML elementa. Dakle, primjer atributa moglo biti ako imate slike oznaku, to obično ima izvorni atribut, možda visina i širina atribut. A kako bi tek bilo niz od svih atributa povezanih s tim HTML element. 

Stil je još jedan koji ne predstavljaju CSS stil pojedinog elementa. I kasnije u ovom Video, mi ćemo posebno utjecati stilu napraviti par promjena naše web stranice. Dakle, to su neke osobine. 

A tu su i neke Metode koje možemo koristiti za brže i možda izolirati elementi Document objekt. Možda, najsvestraniji od njih je getElementById. Tako sam mogao reći nešto poput, jer zapamtite to je metoda dokumenta Object, document.getElementById. 

A unutar tih zagrada navesti HTML element s određenom ID atribut da imam prije postaviti i odmah ću ići do tog elementa cjelokupne web stranice. Pa ja ne moram možda izbušiti kroz svaki sloj. Ja samo mogu koristiti ovu metodu da ga pronaći, vrsta poput topline tražilaca rakete, pravo? To samo ide i nađe upravo ono što traži. 

GetElementsByTagName je vrlo slični u duhu. Možda će to pronaći sve bold oznake ili sve p oznake i daj mi niz sve da sam tada mogao raditi. appendChild dodaje nešto jednu razinu dolje u stablo. 

Dakle, ja mogu dodati cijeli novi Element jednu razinu niže. Ili mogu ukloniti element koji je jednu razinu niže i ako želim izbrisati nešto iz moje web stranice. Sada, brzo kodiranje note i brzo glavobolja štedi na znanje, nadam se. 

getElementById-- D je mala. Ne mogu vam reći koliko puta sam Rabljeni getElementById i kapitaliziran D tamo. Jer to je stvarno čest. Ako pišemo riječ ID, to je Obično kapital I kapital D. I moj broj jednostavno ne radi. A ja ne mogu shvatiti zašto. Ovo je jako, jako, jako čest bug da svatko čini, čak i stručnjaci koji su bio događaj ovaj zauvijek. Dakle, samo budite svjesni, getElementById, da je d mala. I nadam se, da štedi više minuta barem tuga. 

Pa što se sve to nam? Imamo ove metode. Imamo ta svojstva. Sada, ako ćemo početi od dokument, dokument. god, sada možemo doći do bilo jedan komad naše web stranice da želimo pomoću JavaScript Samo pozivom ove metode i utjecati na svojstva koje smo pronašli na raznim mjestima. 

To se može dobiti razvučen, ovaj document.getElementByID, možda imaju dugu naziv oznake, možda učiniti više poziva kasnije. Stvari mogu dobiti malo razvučen. I kao programeri, kao što ste vjerojatno vidjeti u mnogim od tih videa, mi se ne sviđa razvučen stvari. 

Mi smo željeli biti u mogućnosti za napraviti stvari brzo. Stoga smo željeli više koncizan način nešto reći. Dakle, ova vrsta dovodi do Pojam nešto što se zove jQuery. Sada jQuery ne JavaScript. To nije dio JavaScript. 

To je knjižnica koja je napisana neki JavaScript programera oko 10 godina. I njegov je cilj pojednostaviti ovaj što je zove klijent strani skriptiranje, koji je u osnovi ono što smo bili samo pričaju s DOM manipulacije. I tako, ako sam htjela mijenjati Boja pozadine moje web stranice, možda specifičan Div. 

Evo, ja očito dobivam ElementById colorDiv. I želim postaviti svoju boju pozadine. Ako sam samo pomoću čistog JavaScript pomoću Document Object Model, to je puno stvari, zar ne? document.getElementByID colorDiv.style.backgroundColor = zelena. 

Uh. To je puno toga za reći. To je puno tipkati, previše. I tako u jQuery, što možda može reći ovo malo više jezgrovito. Trgovinski off to što je možda malo malo više zagonetan odjednom, pravo? 

Barem dugo je malo više objašnjenje o tome što radimo. Ovo dolar znak, zagrade, Jedan citat, ljestve, colorDiv, zar ne? Što to znači? Pa, to je zapravo samo document.getElementByID colorDiv. 

Ali to je ova vrsta stenogram način to radi pomoću jQuery. Ajmo pogledati sada na nekoliko različitih načina da bi zapravo koristiti ovaj Document Object Model manipulirati komada mom mjestu. Konkretno, idemo da se radi o manipulaciji boja određeni Div, colorDiv, na web-stranici. Tako ćemo pogledati kako. U redu. Dakle, ja sam na stranici. To se zove test.html prilikom preuzimanja ovo ako želite prtljati s tim. I ja imam hrpu Tipke na ovoj stranici. A ja govorim pojedine funkcije za boju pozadine, ljubičasta, zelena, narančasta, crvena, plava, jedna jedina funkcija za boju pozadine, događaj rukovatelj za boju pozadine, i pomoću jQuery. Što sam ja govorim o kad ovo radim? Tako smo vidjeli gumbe. Sada, neka je pogledati Neki od izvornog koda ovdje. Počet ćemo s test.html. Tako pojedine funkcije za pozadinu boja je ono što sam upisali ovdje. Dopustite mi pomaknite malo. 

A vi ćete primijetiti da ja su definirani ovim gumbiće reći kada se klikne na ovaj gumb, pozvati funkciju pretvoriti ljubičasta. Kad ovaj gumb klik, naprotiv, pozvati funkcija postati zelena, narančastu boju, crveno, poplaviti. Vjerojatno možete pretpostaviti da je ovaj možda i nije najbolji dizajn smisla, zar ne? 

Bilo bi lijepo kad bih mogao imaju više opći pristup. Pa, prvo ćemo pogledati na ono što ti pet funkcije document.getElementByID colorDiv.style.background = ljubičasta, zelena, narančasta, crvena, i plava, respektivno. Dakle, nije osobito najbolji dizajn. 

Sljedeći set tipki Ja sam je sam napisao jedna funkcija zove promijeniti boju koja očito prihvaća string kao svoj argument. Dakle, ovo je malo bolje. Ljubičasta, zelena, narančasta, crvena, plavi je sada argument. Zato sam napisao više uopće Slučaj JavaScript funkcija, što bi moglo izgledati nešto poput ovoga. Ja sam u prolazu. Ova boja promjena funkcija očekujući argument naziva u boji. A ja govorim postaviti Boja pozadine u boji. Dakle, ovdje predstavlja ono što imam ovdje. Tako da je malo bolje. 

Ali ja možda moći bolje od toga. Ako ćemo ići dolje pogledati na događaj rukovatelj situaciji, Sada svi ti pozivi izgledaju isto. Ako se sjećate za naše rasprava o rukovatelje događajima, Ja mogu dobiti informacije o tome koji Ovi gumbi se klikne i koristiti. 

I tako u event.JavaScript, sam napisano događaj promjena boje, što figure koji gumb je kliknuo. To je okidač objekt linije. I onda ovdje, to dobiva stvarno razvučen. No, ono što ja radim je sam postavljanje pozadine boje triggerObject inner.HTML. To je tekst u između tipki tagova. 

A onda sam očito ima da ga postavite u mala slova. A to je kako ja mogu pretvoriti cijelu string u mala slova u JavaScript korištenja da se način u mala slova. Jer kad sam postaviti boju, kao što ja pokušavam učiniti ovdje, boja mora biti sve malim slovima. 

Ali gumb da sam imala, ako uzmemo još jedan pogled, primijetiti da tekst postoji napisano s velikim P za ljubičasta. A onda na samom Dno ovdje, očito pokušati učiniti koristeći jQuery kao dobro. I u ovom slučaju, nisam zapravo pozivanje funkcija na sve. Ja sam samo rekao klasu da sam pomoću ove tipke je gumb JQ. To je to. 

Pa kako se jQuery znati što radim? Pa, to je jedna od prednosti slash nedostatke jQuery. To može dopustiti mene za napraviti stvari vrlo sažeto, ali možda ne kao intuitivno. Možda one ostale tri napraviti malo više smisla što radim. Ovdje je, međutim, što se događa? 

Očito, stvaranje anonimni funkcija koji učitava, kad god mi je dokument je spreman, tako document.ready, Neki funkcija će se dogoditi. Naime, kad je dokument spreman? To je kad je moja stranica je učitan. 

Dakle, čim mi stranica učita, Sljedeći funkcija je uvijek spreman. Ona kaže da, ako je predmet tipa jQButton, ili ako klase jQButton je kliknuo, izvrši ovu funkciju. Dakle ovdje je dva anonimna funkcije, definira unutar druge. 

Dakle, moj cijeli kontekst ovdje sada je moja stranica kad se učitava on poziva tu funkciju. I ova funkcija čeka za gumba koji se kliknuli. A kad se klikne gumb, JQ Gumb posebno kliknuli, što zove taj drugi funkcija, što se događa postaviti pozadinu Boja colorDiv se sve što je tekst između oznake. 

To je pojam koja tipka se pritisne. Ali inače, ovo je vrsta ponaša slično događaja. To je samo način na koji sam isto će izraziti u jQuery. Opet, to je vjerojatno puno više zastrašujuće. Nije jasno kako nešto poput event.js, što je možda malo više preopširan, ali malo manje zastrašujuće. 

Ali ako mi pop natrag na moj e prozor, ako počnem clicking-- dobro, koji je promijenio do ljubičaste. To je zelena korištenjem metode string. To je narančasta pomoću događaj rukovatelj. 

To je crvena pomoću jQuery, zar ne? Svi oni se ponašaju isto. Oni jednostavno učiniti pomoću drugačije pristupi za rješavanje problema. Postoji puno više jQuery onda ste sigurno će govoriti o tome u ovom videu. No ako želite saznati više, možete ići na jQuery vrsti dokumentacije i naučiti vrlo malo više o Ovo je vrlo fleksibilan knjižnica, koja je super za to strani klijenta skriptiranje kao što smo radili manipulirati izgled i osjetiti naše web stranice s Document Object Model. Ja sam Doug Lloyd. Ovo je CS50.