DOUG LLOYD: În acest film, ne-am dorit pentru a apela atenția separată la un foarte special, element de JavaScript pe care le-ar putea găsi la îndemână când începi pentru a lucra la manipularea pagini web și schimbarea conținutul paginii web pe fuga. Și asta e noțiunea de Document Object Model. Deci, așa cum am văzut în videoclipul nostru pe JavaScript, obiectele sunt foarte flexibile. Și acestea pot conține diverse domenii. Și, deși nu am merge într-o mulțime de detaliu, aceste domenii sau proprietăți, care ne-ar mai probabil le numim în mod corespunzător în contextul unui obiect, chiar acele proprietăți pot fi alte obiecte. Și în interiorul acestor obiecte poate fi alte obiecte. 

Aveți acest obiect foarte mare cu o mulțime de alte obiecte interiorul ei, care un fel de creează această idee de un copac mare. Acum, obiectul document este un obiect foarte special în JavaScript care organizează întreaga web Pagina în cadrul acestui tip de umbrelă a unui obiect. Și astfel în interiorul documentului obiect sunt obiecte care prezintă cap și corp de pagina web. 

In interiorul acestea sunt alte obiecte, etc., etc., până intreaga pagina web a a fost organizată în acest obiect mare. Care este sensul creșterii aici, nu? Ei bine, știm cum să lucreze cu obiecte în JavaScript. 

Deci, dacă avem un obiect care se referă la întreaga noastră pagină web, care înseamnă prin apelarea corectă metode pentru a manipula acel obiect sau modificarea anumitor de proprietățile sale, am poate modifica elementele Pagina noastră programatic folosind JavaScript loc de a avea la codul lucruri cu, să zicem, HTML. Deci, aici e un exemplu de foarte simplu pagină web, nu? Are tag-uri HTML, un cap. 

In interiorul există un titlu, salut lume. Atunci am un corp. În interiorul acestui, am trei lucruri diferite. Am un tag header h2, un paragraf, și un link. Aceasta este o pagină web foarte simplu. 

Ei bine, ceea ce ar putea documentul obiecții pentru acest arata ca? Ei bine, e un pic infricosator poate la prima. Dar este într-adevăr doar un copac mare. Și chiar la rădăcina este documentul. 

In interiorul documentului este alta obiect referindu-se la HTML de pagina mea. Și HTML de pagina mea este toate acestea. Și apoi în interiorul HTML obiect, am un obiect cap, care se referă la tot ceea ce există. 

Și în interiorul acolo, Am un obiect titlu. Și în interiorul acolo, am un alt obiecta că e doar salut lume. Am putea avea corpul meu reprezentate ca aceasta. 

În interiorul corpului meu, am un H2 obiect și un obiect p pentru alineatul și un un obiect pentru un link. Și așa mai departe acest întreg ierarhie poate fi reprezentat ca un copac mare cu o mulțime de pic mai mic lucrurile care ies din ea. Acum, desigur, atunci când suntem de programare, am Nu cred că de lucruri cum ar fi un copac mare. Vrem să vedem real lucruri legate de cod. 

Și din fericire, putem utilizați instrumentele noastre de dezvoltare pentru a lua de fapt, o privire la obiect acestui site documentului. Și hai să facem asta. Așa că am deschis o filă browser. 

Și am deschis Instrumente de dezvoltare. Și în videoclipul meu pe JavaScript, am menționat că consola nu este numai în cazul în care într-un loc ne imprima informații, este, de asemenea, un loc unde putem informații de intrare. În acest context, ce Am de gând să spun este Aș dori să mă întorc obiectele de documente, așa că am putea începe să aibă o privire la ea. Deci, cum s-ar putea să fac acest lucru? Ei bine, dacă vreau să organizeze într-adevăr frumos, Am de gând să spun console.dir, D-I-R. Acum, am folosi console.log la doar print ceva foarte simplu. Dar dacă vreau să organizeze acest ierarhic ca un obiect, Vreau un fel de structurat ca o structura de directoare. 

Așa că vreau să console.dir documentului. Am de gând să lovi Enter. Și chiar sub ea acum, și voi mări aici, Am acest document de răspuns cu o săgeată pic de lângă ea. Acum, când am deschis această săgeată, acolo va fi o mulțime de lucruri. 

Dar am de gând să ignore o mulțime de ea și doar un fel de focalizare pe cea mai importantă parte, asa ca am poate începe pentru a naviga acest document. Există o mult mai mult pentru DOM decât doar mamă noduri și nodurile copil. Există o mulțime de lucruri auxiliare. 

Deci, am de gând să deschidă asta. Și există o mulțime de lucruri care apare. Dar mă interesează este aici, noduri copil. Să deschidem asta. 

In interiorul acolo văd ceva familiar, HTML. Deci, în interiorul documentul nostru un nivel jos, HTML. Am deschis asta. Ce ne așteptăm? 

Dacă vă amintiți de la diagrama noastră, ce ar trebui să găsim în interiorul HTML? Care două noduri sunt sub o în copac? Să aflăm. Ne deschidem HTML. Mergem până la nodurile sale copil. 

Pop care se deschid. Există cap și corp. Și putem deschide capul. Du-te la nodurile sale copil. Ei bine, nu e titlul. 

Și am putea merge pe și pe așa pentru totdeauna. Am putea face acest lucru cu corpul, de asemenea. Dar există o modalitate pentru noi de a privi documentul organizat ca un obiect mare. Și dacă ne uităm la o mare obiect care pare mult ca cod, ceea ce înseamnă că putem începe pentru a manipula acest obiect mare, folosind cod pentru a schimba ceea ce ne site-ul arata si se simte ca. 

Așa că e un instrument destul de puternic avem la dispoziție acum. Deci, ca doar am văzut, The obiect Document sine și toate obiectele în interiorul vehiculului au proprietăți și metode, doar la fel ca orice alt obiect care le-am fost de lucru cu JavaScript în. Dar putem folosi acele proprietăți și folosi aceste metode pentru a sorta de drill down din documentul mare și de a lua mici și mai mici și mai mici, boabe fine și mai fine de detaliu, până când vom ajunge la o piesă foarte specific de nostru pagină web pe care dorim să se schimbe. 

Și când ne-am actualizat proprietățile Document Object sau suna aceste metode, lucruri s-ar putea întâmpla pe pagina noastră web. Și nu trebuie să facem nici o răcoritoare ca aceste modificări să intre în vigoare. 

Și asta e o abilitate destul de cool pentru a au atunci când lucrăm cu codul. Deci, ce sunt unele dintre aceste proprietăți care fac parte dintr-un obiect document de? Ei bine, probabil ai văzut o câteva dintre ele foarte repede așa cum am fost zipping prin documentul gigant obiect ne-am văzut în browser-ul web. 

Dar o pereche de aceste proprietăți ar putea fi lucruri, cum ar fi HTML interior. Și s-ar putea aminti chiar mi- folosind acest lucru în video JavaScript la sfârșitul atunci când am vorbea despre evenimente. Ce a fost asta HTML interior? Ei bine, e doar ceea ce este între etichetele. 

Și astfel HTML interior, de exemplu, a titlului tag-ul, dacă am fi păstrat merge în că exemplu în urmă o clipă, ar fi fost Salut lume. Acesta a fost titlul paginii noastre. Alte proprietăți include numele de nod, care este numele unui HTML Element cum ar fi titlul. ID, care este ID atribut al unui element HTML. 

Amintiti-va ca putem indica special elemente specifice ale HTML noastre cu un atribut de identitate, care de obicei vine la îndemână, în contextul CSS, în mod special. Nod părinte, care este o trimitere la ceea ce este doar în sus deasupra mea în DOM. Și noduri copil, care este un referire la ceea ce este jos mine. Și am văzut o mulțime de care doar în căutarea prin. Noduri copil, asta e cum am ajuns mici și mai mici în copac. 

Atribute, asta e doar o matrice de atribute ale elementului HTML. Deci un exemplu de atribute ar putea fie în cazul în care aveți un tag de imagine, are, de obicei, un atribut sursă, poate o înălțime și un atribut lățime. Și pentru ca ar fi doar o serie de toate atributele asociate cu acest element HTML. 

Stilul este un alt unul care nu reprezintă CSS Coafura de un anumit element. Și mai târziu în acest videoclip, vom special Stilul de pârghie pentru a face un cuplu de modificările aduse site-ului nostru. Deci, acestea sunt unele proprietăți. 

Și acolo sunt, de asemenea, unele Metodele pe care le putem utilizați pentru a, de asemenea, mai rapid, poate izola elemente ale obiectului Document. Poate, cel mai versatil dintre acestea fiind getElementById. Așa că s-ar putea spune ceva de genul, pentru că amintiți-vă că este o metodă de a Documentului Obiect, document.getElementById. 

Și în interiorul acestor paranteze, specificați un element HTML cu un anumit ID atribut care le-am anterior set, si voi imediat du-te dreptul de a acestui element a site-ului global. Așa că nu am pentru a detalia poate jos prin fiecare singur strat. Eu pot folosi doar această metodă pentru a găsi, ca un fel de rachetă caută căldură, dreapta? Se merge doar și găsește exact ceea ce cauta. 

GetElementsByTagName este foarte similare în spirit. Poate că acest lucru s-ar găsi toate tag-uri bold sau toate p etichetele si da-mi o serie de tot pe care am putea lucra apoi cu. appendChild adaugă ceva un nivel jos în copac. 

Așa că am putea adăuga un întreg nou element de un nivel mai jos. Sau pot elimina un element care este un nivel mai jos, precum și dacă vreau pentru a șterge ceva de pe pagina mea de web. Acum, o notă de codificare rapidă și o rapidă dureri de cap de economisire notă, sperăm. 

getElementById-- d este minuscule. Eu nu pot să vă spun de câte ori am second-hand getElementById și capitalizată d acolo. Pentru că e foarte comun. Dacă vom scrie ID-ul cuvânt, e De obicei capitalul I de capital D. Și codul meu pur si simplu nu funcționează. Și eu nu pot da seama de ce. Aceasta este o foarte, foarte, foarte bug comun ca toata lumea face, chiar și experții care au făcut acest lucru pentru totdeauna. Deci, doar să fie conștienți, getElementById, că d este minuscule. Și sperăm, că vă economisește mai multe minute cel de durere de inimă la. 

Deci, ce înseamnă toate acestea ne spun? Avem aceste metode. Avem aceste proprietăți. Acum, dacă pornim de la documente, documentul. orice, putem obține acum la orice singură bucată de site-ul nostru pe care dorim să utilizați JavaScript doar prin apelarea aceste metode și valorificarea proprietăților că vom găsi în diferite locații. 

Acest lucru se poate obține prolix, acest document.getElementById, poate avea un nume de etichetă lung, Poate faci mai multe apeluri mai târziu. Lucrurile pot deveni un pic prolix. Și programatori, cum ai probabil văzut în multe dintre aceste filme, nu ne plac lucrurile prolix. 

Ne place să fie în măsură să facă lucruri rapid. Deci, am dori o mai mod concis de a spune ceva. Deci, acest tip de duce la noțiune de ceva numit jQuery. Acum, jQuery nu este JavaScript. Nu este parte din JavaScript. 

Este o bibliotecă care a fost scris de niște programatori JavaScript acum aproximativ 10 de ani. Iar scopul său este de a simplifica această ceea ce este numit scripting partea de client, care este de fapt ceea ce am fost doar vorbesc despre cu manipulări DOM. Și așa, dacă am vrut să modifice culoare de fundal de pagina mea de web, poate un anumit Div. 

Aici, am aparent obtinerea ElementById colorDiv. Și vreau să setați culoarea de fundal. Dacă am doar folosind pur JavaScript folosind Document Object Model, care este o mulțime de lucruri, nu? document.getElementById colorDiv.style.backgroundColor = verde. 

Whew. Asta a fost o mulțime de spus. Este o mulțime de tip, de asemenea. Și astfel în jQuery, putem spune, poate, acest lucru un pic mai mult concis. Compromisul fiind că e poate un pic pic mai mult criptic dintr-o dată, dreapta? 

Cel puțin pe termen lung este un pic mai mult explicative la ceea ce facem. Acest semn dolar, paranteze, singur citat, hash, colorDiv, nu? Ce înseamnă asta? Ei bine, asta e de fapt doar document.getElementById colorDiv. 

Dar e un fel de stenografie această mod de a face aceasta folosind jQuery. Să ia doar o privire acum la o pereche de moduri diferite I s-ar putea de fapt că utiliza acest Document Object Model pentru a manipula piese de site-ul meu. În special, vom să fie de lucru pe manipularea culoarea unui anumit Div, colorDiv, pe o pagină web. Deci, haideți să aruncăm o privire la asta. In regula. Deci, eu sunt pe o pagină. Se numește test.html atunci când descărcați această opțiune dacă doriți să se joace cu acest lucru. Și am o grămadă de butoanele de pe această pagină. Iar eu spun funcții individuale pentru culoarea de fundal, violet, verde, portocaliu, roșu, albastru, o singură funcție pentru culoarea de fundal, tratare a evenimentului pentru culoarea de fundal, și folosind jQuery. Ce vorbesc despre când fac acest lucru? Deci am văzut butoanele. Acum, haideți să aruncăm o privire la o parte din codul sursă aici. Vom începe cu test.html. Funcțiile Deci individuale pentru fundal culoarea este ceea ce am scris aici. Permiteți-mi să derulați un pic. 

Și veți observa că am au definit aceste butoane să spun, atunci când acest buton este apasat, apela funcția transforma violet. Când acest buton este să faceți clic, mai degrabă, apela funcția transforma verde, rândul său, portocaliu, roșu rândul său, rândul său, albastru. Probabil puteți ghici că această nu este, probabil, cel mai bun design sens, nu? 

Ar fi frumos dacă aș putea au o abordare mai generală. Ei bine, în primul rând vom arunca o privire la ce cele cinci funcții sunt document.getElementById colorDiv.style.background = violet, verde, portocaliu, rosu, și albastru, respectiv. Deci, nu deosebit de cel mai bun design. 

Următorul set de butoane Am este ce am scris o singură funcție numită schimba culoarea care aparent acceptă un șir ca argument. Deci, acest lucru este un pic mai bine. Violet, verde, portocaliu, rosu, albastru este acum un argument. Așa că am scris o mai general caz funcția de JavaScript, care ar putea arata ceva de genul asta. Am trece în. Aceasta culoare schimbare funcție este așteaptă un argument numit culoare. Și vreau să spun stabilit culoarea de fundal pentru culoare. Reprezintă așa că aici ce am ajuns aici. Așa că e un pic mai bine. 

Dar s-ar putea fi în măsură să face mai mult decât atât. Dacă vom merge în jos pentru a lua o privire la situația tratare a evenimentului, acum toate aceste apeluri arata la fel. Dacă vă amintiți de nostru discuție pe Stivuitoare eveniment, Pot obține informații cu privire la care a aceste butoane a fost dat click și de a folosi asta. 

Și astfel în event.JavaScript, am eveniment scris schimba culoarea, care cifrele din buton, care a fost apasat. Asta e linia de obiect de declanșare. Și apoi aici, ea devine foarte prolix. Dar ceea ce fac este că sunt setarea fundal culoare pentru a triggerObject inner.HTML. Asta e textul între etichetele butonul. 

Și atunci am avea aparent să-l setat la litere mici. Și asta e cum pot converti un întreg șir de litere mici în JavaScript folosind această metodă de litere mici. Pentru că atunci când am stabilit o culoare, ca eu sunt încercarea de a face aici, de culoare trebuie să fie toate cu litere mici. 

Dar pe butonul pe care am avut-o, dacă ne aruncăm o privire, observați că textul este scris cu un P capital pentru violet. Și apoi la foarte fund aici, aparent încercați și face acest lucru cu ajutorul jQuery, de asemenea. Și în acest caz, nu sunt de fapt apelarea o funcție, la toate. Tocmai am spus că eu sunt clasa utilizând în acest buton este un buton JQ. Asta e. 

Deci, cum se știe jQuery ce fac? Ei bine, acesta este unul dintre avantajele reduce dezavantajele jQuery. Se poate să-mi permiteți să fac lucruri foarte concis, dar poate nu ca intuitiv. Poate cei alte trei fac o bit mai mult sens ceea ce fac. Aici, însă, ce se întâmplă? 

Aparent, creând o funcție anonim că loturile de fiecare dată când documentul meu este gata, așa document.ready, o funcție se va întâmpla. Practic, atunci când este gata un document? E atunci când pagina mea sa incarcat. 

Deci, de îndată ce pagina mea a încărcată, în urma funcție este întotdeauna gata. Se spune, în cazul în care un obiect de tip jQButton, sau în cazul în care clasa jQButton a fost apasat, executa această funcție. Deci, aici sunt două funcții anonime, unul definit în interiorul celuilalt. 

Deci întreaga mea context aici până în prezent este pagina mea atunci când se încarcă o numește această funcție. Și această funcție este în așteptare pentru un buton pentru a face clic. Și când un buton este apasat, JQ Butonul specific este apasat, se numește acest alt funcție, care va pentru a seta fundal culoarea colorDiv să fie orice text este în între etichetele. 

Aceasta este noțiunea de Butonul care a fost apasat. Dar altfel, aceasta este un fel de comportă similar cu un eveniment. Este același fel am ar exprima acest lucru în jQuery. Din nou, este probabil un mult mai mult de intimidare. Nu este la fel de clar ca ceva de genul event.js, care este, poate, un pic mai mult verbose, dar un pic mai puțin intimidant. 

Dar dacă ne-am pop înapoi peste la browser-ul meu fereastră, dacă aș începe clicking-- bine, care a schimbat la purpuriu. Aceasta este verde folosind metoda șir. Aceasta este de culoare portocalie, folosind de tratare a evenimentelor. 

Acest lucru este de culoare roșie, folosind jQuery, nu? Toți se comportă exact la fel. Ei doar fac folosind diferite abordări pentru a rezolva problema. Există o mulțime mai mult pentru a jQuery atunci suntem cu siguranță vorbi despre în acest film. Dar, dacă doriți să aflați mai multe, puteți du-te la fel jQuery documentației și să învețe destul de un pic mai mult despre această bibliotecă foarte flexibil, care este mare pentru a face partea de client scripting cum ar fi ceea ce făceam pentru a manipula aspectul si sa se simta de site-ul nostru cu Document Object Model. Sunt Doug Lloyd. Acest lucru este CS50.