DOUG Lloyd: Tässä video, halusimme huutaa erillinen huomiota on hyvin erityisesti elementti JavaScript että saatat löytää kätevä kun olet alkanut työskennellä manipuloimalla verkkosivuja ja muuttamalla sisältöä Web-sivun lennossa. Ja se on käsite Document Object Model. Jotta näimme meidän video JavaScript, esineet ovat hyvin joustavia. Ja ne voivat sisältää eri aloilla. Ja vaikka me ei mennä paljon yksityiskohta, näillä aloilla tai ominaisuuksia, että olisimme luultavasti enemmän asianmukaisesti soita heille yhteydessä esineen, jopa nämä ominaisuudet voivat olla muita esineitä. Ja sisältä nämä esineet voi olla muita esineitä. 

Sinulla on erittäin suuri esine paljon muita esineitä sen sisällä, mikä tavallaan luo tämä ajatus iso puu. Nyt, asiakirja esine on hyvin erikoinen esine JavaScript joka järjestää teidän koko web sivu nojalla tällainen sateenvarjo objektin. Ja niin sisällä asiakirjan esine ovat esineitä esittää pään ja kehon Web-sivun. 

Sisältä ne ovat muiden esineet, jne, jne, kunnes koko web-sivulla on on järjestetty tässä suuressa esine. Mikä ylösalaisin täällä, eikö? No, osaamme työskennellä esineitä JavaScript. 

Joten jos meillä on objektin viittaa koko sivun, että tarkoitetaan soittamalla oikea menetelmiä manipuloida että esine tai muuttamasta tiettyjä sen ominaisuudet, me vaihtaa osia meidän sivu ohjelmallisesti JavaScriptin avulla sen sijaan, koodata asioita, vaikkapa HTML. Joten tässä on esimerkki hyvin yksinkertainen web-sivun, eikö? Se sai HTML-tunnisteet, pää. 

Sisällä on otsikko, Hello World. Sitten minulla on elin. Sisältä että minulla on kolme eri asiaa. Minulla H2 header tag, kohta, ja linkki. Tämä on hyvin yksinkertainen web-sivu. 

No, mitä voisi asiakirja vastustaa tämän näyttää? No, se on vähän pelottava ehkä aluksi. Mutta se on oikeastaan ​​vain iso puu. Ja aivan juureen se on asiakirja. 

Sisällä asiakirjan on toinen objekti viittaa HTML-sivuni. Ja HTML-sivuni on kaiken tämän. Ja sitten sisällä HTML esine, minulla pää esine, jossa viitataan kaikkeen siellä. 

Ja sisällä siellä, Minulla on otsikko esine. Ja sisältä siellä, minulla on toinen väittävät, että on vain Hello World. Voisin olla kehoni edustettuina näin. 

Sisällä ruumiini, olen H2 objekti ja p objekti kohta ja objektin linkin. Ja niin tämä koko hierarkia voidaan esittää iso puu paljon pienempiä vähän asiat tulee ulos siitä. Nyt, tietenkin, kun olemme ohjelmointi, me usko asioita, kuten iso puu. Haluamme nähdä todellinen koodi liittyviä asioita. 

Ja Onneksi voimme käyttää kehitystyökaluja todella katsomaan Tämän sivuston Document Object. Ja tehdään se. Joten olen avannut selaimen välilehti. 

Ja olen avannut Developer Tools. Ja minun video JavaScript, I mainitsi, että konsoli ei ole vain jonnekin missä me painamme tiedot, se on myös paikka, jossa me voi syöttää tiedot. Tässä yhteydessä, mitä Aion sanoa Haluaisin saada takaisin asiakirja esineet, joten voin alkaa katsoa sitä. Miten voisin tehdä tämän? No, jos haluan järjestää se todella hienosti, Aion sanoa console.dir, D-I-R. Nyt käytän console.log vain tulosta jotain hyvin yksinkertaista. Mutta jos haluan järjestää tämän hierarkkisesti kuin esine, Haluan se tavallaan strukturoitujen kuten hakemistorakenne. 

Joten haluan console.dir asiakirja. Aion paina Enter. Ja juuri sen alla nyt, ja minä suurentaa täällä, Minulla tämä vastaus asiakirja hieman nuolen vieressä. Nyt, kun avaan tämän nuoli, siellä tulee olemaan paljon tavaraa. 

Mutta aiomme jättää paljon sitä ja juuri sellainen painopiste on tärkein osa, joten voi alkaa navigoida tämän asiakirjan. Siellä on paljon enemmän DOM kuin vain vanhemman solmuja ja lapsen solmuja. Siellä on paljon avustavia tavaraa. 

Joten aion avata tämän. Ja siellä on paljon tavaraa avautuvasta. Mutta kaikki Välitän vain täällä, lapsi solmut. Avataan että jopa. 

Sisältä siellä näen jotain tuttua, HTML. Joten sisällä meidän asiakirjan yhden tason alaspäin, HTML. Avaan että ylös. Mitä me odotamme? 

Jos muistatte meidän kaavio, mitä meidän pitäisi löytää sisälle HTML? Mitkä kaksi solmua alitus puussa? Otetaan selvää. Avaamme HTML. Menemme alas lapsisolmuilleen. 

Pop että avoin. On pään ja vartalon. Ja voimme avata pää. Mene lapsisolmuilleen. No, on otsikko. 

Ja voisimme mennä ja tällaisena ikuisesti. Voisimme tehdä tätä kehon samoin. Mutta on tapa, jolla voimme tarkastella asiakirja järjestetään iso kohde. Ja jos katsomme on suuri esine, joka näyttää paljon kuten koodi, se tarkoittaa, että voimme aloittaa manipuloida tämä iso objektin koodi muuttaa mitä sivusto näyttää ja tuntuu. 

Niin se on aika tehokas työkalu meillä on käytössämme nyt. Niin me juuri näin, asiakirja esine itse ja kaikki objektit sen sisällä on ominaisuuksia ja menetelmiä, vain kuten mikä tahansa muu esine, joka olemme työskennellyt JavaScript. Mutta voimme käyttää näitä ominaisuuksia ja käyttää näitä menetelmiä tavallaan porautua isosta asiakirjasta ja saada alemmas ja alemmas ja alemmas, hienompaa ja hienompaa jyvät yksityiskohtaisuus, kunnes saada hyvin erityinen pala meidän Web-sivu, haluamme muuttaa. 

Ja kun Microsoft päivittää ominaisuudet Document Object tai soita näitä menetelmiä, asioita voi tapahtua nettisivuillamme. Ja meidän ei tarvitse tehdä mitään virkistävä että nuo muutokset tulevat voimaan. 

Ja se on aika siistiä kyky on kun olemme kanssa koodi. Mitkä ovat joitakin näistä ominaisuuksista jotka ovat osa Document Object? No, luultavasti näki pari niistä todella nopeasti kun olimme zipping läpi jättiläinen asiakirja esine me juuri näin selaimen. 

Mutta pari näitä ominaisuuksia saattaa olla asioita, kuten sisäinen HTML. Ja saatat jopa muistaa minut käyttämällä tätä JavaScript video aivan lopussa, kun puhui tapahtumista. Mikä oli tämä sisäinen HTML? No, se on vain mitä välillä tunnisteet. 

Ja niin sisä- HTML, esimerkiksi otsikon tag, jos olisimme pitäneet menossa että esimerkiksi hetki sitten, olisi ollut Hello World. Se oli otsikko sivuillemme. Muut ominaisuudet ovat solmun nimi, joka on nimi HTML elementti kuten otsikko. ID, joka on tunnus ominaisuus HTML-elementti. 

Muista, että voimme erityisesti osoittaa tiettyjä elementtejä meidän HTML kanssa ID ominaisuus, joka yleensä on kätevä yhteydessä CSS, erityisesti. Vanhempi solmu, joka on viittaus mitä vain ylös yläpuolellani DOM. Ja lapsisolmuja, joka on viittaus mitä alhaalla minua. Ja näimme paljon, että vain katsellut. Lapsi solmuja, niin saimme alhaisempia puuhun. 

Attribuutteja, se on vain joukko määritteitä HTML elementin. Niinpä esimerkiksi attribuutteja voisi olla jos sinulla on kuva tag, se yleensä on lähdemääritteen, ehkä korkeus ja leveys ominaisuus. Ja että olisi vain array kaikista liitettyjä ominaisuuksia kanssa, että HTML-elementti. 

Tyyli on toinen, joka ei edustaa CSS muotoilu tietyn elementin. Ja myöhemmin tässä video, käymme erityisesti vipuvaikutus tyyli tehdä pari muutoksista sivuillamme. Joten ne ovat joitakin ominaisuuksia. 

Ja on myös joitakin menetelmiä, että voimme käyttää myös nopeammin ehkä eristää elementtejä Document Object. Ehkä, monipuolisin näistä on getElementById. Joten voisin sanoa jotain, koska muistaa se menetelmä Document Object, document.getElementById. 

Ja sisältä ne suluissa, määritä HTML-elementti, jossa erityisesti tunnus Yhdistän että olen aiemmin set, ja minä heti mennä oikeuteen, että elementti yleistä verkkosivuilla. Joten minun ei tarvitse ehkä porata alas jokaisen kerroksen. Voin vain käyttää tätä menetelmää löytää se, tavallaan kuin lämpöohjautuvilla ohjus, oikea? Se vain menee ja etsii mitä se etsii. 

GetElementsByTagName on hyvin samankaltainen hengessä. Ehkä tämä olisi löytää kaikki lihavointikoodit tai kaikki p tunnisteet ja antaa minulle joukko kaiken että voisin sitten työskennellä. AppendChild lisää jotain yhden tason alaspäin puussa. 

Joten en voi lisätä koko uuden elementti yhden tason alempi. Tai voin poistaa elementin, joka on yhden tason alempi kuin hyvin, jos haluan poistaa jotain minun verkkosivu. Nyt, nopea koodaus huomata ja nopea päänsärky säästää huomata, toivottavasti. 

getElementById-- d on pieniä kirjaimia. En voi kertoa teille, kuinka monta kertaa olen käytetyt getElementById ja pitkävaikutteiset d siellä. Koska se on todella yhteinen. Jos me kirjoittaa sanan tunnus, se on yleensä pääoma I pääoma D. Ja minun koodi ei vain toimi. Ja en voi selvittää, miksi. Tämä on todella, todella, todella yhteinen vika, jokainen tekee, jopa asiantuntijoista, jotka ovat tehneet tätä ikuisesti. Joten olla tietoinen, getElementById, että d on pieniä. Ja toivottavasti, joka säästää useita minuuttia vähintään surua. 

Joten mitä tämä kaikki kertoo? Meillä on näitä menetelmiä. Meillä on näitä ominaisuuksia. Nyt, jos lähdetään asiakirja, asiakirja. mitä voimme nyt saada mitään yhdestä kotisivultamme että haluamme JavaScriptin avulla vain soittamalla nämä menetelmät ja hyödyntämällä ominaisuudet että löydämme eri paikkakunnilla. 

Tämä voi saada monisanainen, tämä document.getElementById, ehkä on pitkä tunnisteen nimi, ehkä tehdä enemmän puheluja myöhemmin. Asiat voivat saada hieman monisanainen. Ja kuten ohjelmoijat, kun olet luultavasti nähdä monissa näistä videoista, emme pidä wordy asioita. 

Haluamme pystyä tekemään asioita nopeasti. Joten haluaisimme lisää ytimekkäästi sanoa jotain. Joten tällainen johtaa käsite jotain kutsutaan jQuery. Nyt jQuery ei ole JavaScript. Se ei ole osa JavaScript. 

On kirjasto, joka oli kirjoitettu jotkut JavaScript ohjelmoijat noin 10 vuotta sitten. Ja sen tavoitteena on yksinkertaistaa tämä mitä nimeltään client side scripting, joka on pohjimmiltaan mitä olimme puhumme DOM manipulointia. Joten jos halusin muuttaa taustaväri Web-sivun, ehkä erityinen Div. 

Täällä, olen ilmeisesti saada ElementById colorDiv. Ja haluan asettaa sen taustan väri. Jos olen vain käyttää puhdasta JavaScriptin käyttäen Document Object Model, että on paljon tavaraa, eikö? document.getElementById colorDiv.style.backgroundColor = vihreä. 

Vau. Se oli paljon sanottavaa. Se on paljon kirjoittaa, liian. Ja niin jQuery, voimme ehkä sanoa tämä hieman enemmän ytimekkäästi. Kauppa pois on se ehkä hieman hieman arvoituksellinen yhtäkkiä, oikea? 

Ainakin pitkä on hieman selittäviä, mitä teemme. Tämä dollarin merkki, suluissa, heittomerkki, hash, colorDiv, eikö? Mitä se tarkoittaa? No, se on pohjimmiltaan vain document.getElementById colorDiv. 

Mutta se on tällainen pika tapa tehdä se käyttäen jQuery. Haluan vain katsomaan nyt on pari eri tavalla etten tekisi todella käyttää Document Object Malli manipuloida kappaletta sivustoni. Erityisesti aiomme työstää manipuloimalla väri tietyn Div, colorDiv, Web-sivulle. Joten katsomaan joka. Selvä. Joten olen sivulla. Sitä kutsutaan test.html kun lataat tämä jos haluat korjailla tämän. Ja minulla kasan painikkeet tällä sivulla. Ja sanon yksittäisten toimintojen tausta väri, violetti, vihreä, oranssi, punainen, sininen, yksi toiminto tausta väri, tapahtumakäsittelijää tausta väri, ja jQuery. Mitä minä puhun kun minä teen tämän? Joten olemme nähneet painikkeita. Nyt, katsomaan jotkut lähdekoodin täällä. Aloitamme test.html. Joten yksittäisten toimintojen tausta väri on mitä olen kirjoittanut täällä. Saanen selaa hieman. 

Ja huomaat, että minä ovat määrittäneet nämä painikkeet sanoa, kun tätä painiketta painetaan, soittaa toiminto punastua. Kun tätä painiketta valitse pikemminkin soittaa toiminto muuttuu vihreäksi, käännä oranssi, muuttuvat punaisiksi, muuttuu siniseksi. Arvata, että tämä ei ehkä ole paras suunnittelu järkeä, eikö? 

Olisi mukavaa, jos voisin on yleisempää lähestymistapaa. No, ensimmäinen me katsomaan mitä näiden viiden toiminnot document.getElementById colorDiv.style.background = violetti, vihreä, oranssi, punainen, ja sininen, vastaavasti. Joten, ei erityisen paras design. 

Seuraava joukko painikkeet Olen on Olen kirjoittanut yksi toiminto nimeltään vaihtaa väriä että ilmeisesti hyväksyy merkkijonon sen väitettä. Joten tämä on vähän parempi. Violetti, vihreä, oranssi, punainen, sininen on nyt argumentti. Joten olen kirjoittanut hieman yleisempi tapauksessa JavaScript-toiminto, mikä saattaa näyttää tältä. Olen ohimennen. Tämä toiminto vaihtaa väriä on odottaa argumentin nimeltä väri. Ja sanon asettaa taustaväri väri. Joten tässä edustaa mitä minulla täällä. Niin, että on hieman parempi. 

Mutta en ehkä parempaankin. Jos menemme katsomaan klo tapahtumakäsittely tilanne, nyt kaikki nämä puhelut samannäköisiä. Jos muistatte meidän keskustelua tapahtumankäsittelijät, Saan tietoa mikä nämä painikkeet on napsautettu ja käyttää sitä. 

Ja niin event.JavaScript, olen kirjallinen muutos väri tapahtuma, joka keksii joka napsautettiin. Se laukaista esine linja. Ja sitten täällä, se saa todella wordy. Mutta mitä olen tekemässä, että olen asettamalla tausta väriä triggerObject inner.HTML. Se on tekstin välillä painiketta tunnisteet. 

Ja sitten ilmeisesti on asettaa sen pieniksi. Ja näin voin muuntaa koko merkkijono pieniksi kirjaimiksi JavaScript käyttäen että menetelmä pieniksi. Koska kun asetan väri, kuten Yritän tehdä täällä, väri on oltava pieniksi. 

Mutta painiketta, joka minulla oli, jos me katsomaan uudelleen, huomaa, että teksti on kirjoitettu isolla P violetti. Ja sitten hyvin pohja täällä, olen ilmeisesti yrittää tehdä tämän käyttämällä jQuery samoin. Ja tässä tapauksessa, en ole oikeastaan jossa toimi lainkaan. Olen juuri sanoi luokkaa, että olen käyttäen tämä painike on jQ painiketta. Se siitä. 

Joten miten jQuery tiedä mitä teen? Hyvin, tämä on yksi niistä eduista slash haitat jQuery. Se voi haluan tehdä asioita erittäin ytimekkäästi, mutta ehkä ei kuten intuitiivisesti. Ehkä nuo muut kolme tehdä hieman enemmän mielessä, mitä olen tekemässä. Täällä kuitenkin, mitä on tekeillä? 

Ilmeisesti, luodaan anonyymi toiminto että kuormat aina minun asiakirja on valmis, niin document.ready, jotkut toiminto tulee tapahtumaan. Pohjimmiltaan, kun on asiakirja valmis? Se kun minun sivu on ladattu. 

Niin pian kuin minun sivu on ladattu, Seuraava toiminto on aina valmis. Siinä sanotaan, jos kohde tyyppiä jQButton, tai jos luokka jQButton on klikattu, suorita tämä toiminto. Joten tässä on kaksi nimettömänä tehtävät, yksi määritelty sisällä muita. 

Joten minun koko konteksti tässä toistaiseksi on minun sivu kun se lataa se kutsuu tätä toimintoa. Ja tämä toiminto odottaa varten painiketta napsautetaan. Ja kun painiketta napsautetaan, jQ painike erityisesti napsautetaan, se kutsuu tätä muut toiminto, joka on menossa asettaa taustan väri colorDiv olla mikä teksti on välillä tunnisteet. 

Tämä on käsite joka napsautettiin. Mutta muuten tämä on eräänlainen käyttäytyy samanlainen tapahtuma. Se on vain samalla tavalla I olisi ilmaista tämä jQuery. Taaskin se on luultavasti paljon enemmän uhkaava. Se ei ole niin selkeä kuin jotain event.js, joka on ehkä hieman enemmän verbose, mutta hieman vähemmän uhkaava. 

Mutta jos me pop takaisin yli minun selain ikkuna, jos aloitan clicking-- hyvin, että muutettu violetti. Tämä on vihreä käyttäen merkkijono menetelmää. Tämä on oranssi käyttäen tapahtumakäsittelijän. 

Tämä on punainen jQuery, eikö? Ne kaikki käyttäytyvät täsmälleen sama. He vain tekevät sen eri lähestyy ongelman ratkaisemiseksi. Siellä on paljon enemmän jQuery niin olemme varmasti aio puhua tämän videon. Mutta jos haluat oppia lisää, voit Siirry jQuery lajitella asiakirjojen ja oppia melko vähän lisää tämä erittäin joustava kirjasto, joka on hyvä tehdä asiakkaan puolella scripting kuten mitä teimme manipuloida ulkoasua ja tuntea meidän sivun kanssa Document Object Model. Olen Doug Lloyd. Tämä on CS50.