DOUG LLOYD: Selle video, tahtsime kutsuda välja eraldi tähelepanu
väga erilist element JavaScript
et te võite leida mugav Kui sa oled hakanud
tööd manipuleerides veebilehti ja muutuva sisu oma veebilehel
lennult.
Ja see mõiste Dokumendi Object Model.
Nii nagu me nägime meie video JavaScript objektid on väga paindlik.
>> Ja nad võivad sisaldada erinevates valdkondades.
Ja kuigi me ei lähe palju detail, nende valdkondade või omadused,
et meil oleks ilmselt rohkem asjakohaselt nimetame neid
kontekstis objekti isegi Neil omadused võivad olla muud esemed.
Ja sees nende objektide võib olla muid esemeid.
>> Sul on see väga suur objekt palju muud objektid
sees on, mis sorti loob see idee suur puu.
Nüüd dokumendi eesmärk on Väga eriline objekt JavaScript
mis korraldab kogu oma veebi lehekülje all selline vihmavari
objekti.
Ja nii seest dokumendi objekti on esemeid,
pea ja keha oma veebilehel.
>> Toas neist on teistest esemeid, jne, jne,
kuni kogu oma veebilehel on korraldati see suur objekt.
Mis on tagurpidi siin, eks?
Noh, me teame, kuidas töötada esemetega JavaScript.
>> Nii et kui meil on objekt, mis viitab kogu meie veebilehel, et
tähendab helistades õige meetodeid manipuleerida, et objekti
või muuta teatavaid tema omaduste me
saab muuta elemendid Meie lehel programmiliselt
kasutades JavaScript asemel koodi asju, ütleme, HTML.
Nii et siin on näide väga lihtne veebileht, eks?
See sai HTML sildid, pea.
>> Toas on pealkiri, tere.
Siis mul on keha.
Toas, et mul on kolm erinevat asja.
Mul on H2 header tag, Lõigu ja link.
See on väga lihtne veebilehele.
>> Noh, mis võib dokumendi vastuväiteid selle välja?
Noh, see on natuke hirmutav võibolla alguses.
Aga see on tõesti ainult üks suur puu.
Ja juurteni see dokument.
>> Toas dokumendi on teine objekti viidates HTML minu lehele.
Ja HTML minu leheküljel on see kõik.
Ja siis sisemust HTML objekti, mul on peas objekti,
mis viitab kõik olemas.
>> Ja sees on, Mul on pealkiri objekti.
Ja sees on, mul on teine vastuväiteid, mis on lihtsalt tere.
Oleksin võinud minu keha esindatud niimoodi.
>> Toas mu keha on mul h2 objekti ja p objekti lõikes
ja A objekti link.
Ja nii see kogu hierarhia võib olla esindatud suur puu
palju väiksem vähe asjad tulevad välja.
Nüüd muidugi, kui me programmeerimine, me
ei usu asju nagu suur puu.
Me tahame näha tegelikku koodi seotud asju.
>> Ja õnneks saame kasutada meie arendaja tööriistad
tegelikult vaatleme Selle veebilehe dokumendi objekti.
Ja olgem teha.
Nii et ma olen avanud brauseri tab.
>> Ja ma olen avanud Developer Tools.
Ja minu video JavaScript, ma mainitud, et konsool ei ole
ainult kuskil kus Me printida info
see on ka koht, kus saame infot sisestada.
Selles kontekstis, mida Ma ütlen on
Tahaksin saada tagasi Dokumendi objektid
nii et ma ei hakka on pilk see.
Niisiis, kuidas võiks seda teha?
Noh, kui ma tahan korraldab ta tõesti kenasti,
Ma ütlen console.dir, D-I-R. Nüüd ma kasutan console.log lihtsalt print
välja midagi väga lihtne.
Aga kui ma tahan korraldada selle hierarhiliselt nagu objekti,
Ma tahan, et see mingi struktureeritud nagu kataloogide struktuur.
>> Nii et ma tahan console.dir dokument.
Ma lähen Enter.
Ja just selle all nüüd, ja ma suumida siin
Mul see vastus dokument vähe noolt ta.
Nüüd, kui ma avada see nool, seal saab olema palju asju.
>> Aga me ei kavatse ignoreerida palju seda ja lihtsalt selline fookuses
kõige tähtsam osa, nii et me võib alata liikuda selles dokumendis.
Seal on palju rohkem DOM kui lihtsalt vanem sõlmed ja tütartippu.
Seal on palju lisateenuste kraami.
>> Nii et ma lähen avada selle üles.
Ja seal on palju asju, mis hüppab.
Aga ma hoolin siinsamas, tütartippu.
Avame selle üles.
>> Toas on Näen midagi tuttav, HTML.
Nii sees meie dokumenti ühe taseme alla, HTML.
Ma avan, et üles.
Mida me oodanud?
>> Kui te mäletate meie diagramm, mida me peaksime leidma sees HTML?
Mis kaks tipud on alla see puu?
Uurime välja.
Me avada HTML.
Me läheme oma tütartippu.
>> Pop, et avatud.
Ei pea ja keha.
Ja me saame avada pea.
Mine oma lapse sõlmed.
Noh, seal on pealkiri.
>> Ja me võiks minna ja niimoodi igavesti.
Me võiksime seda teha keha samuti.
Aga seal on nii, et meid vaadata Dokumendi korraldatud suur objekt.
Ja kui me vaatame, on suur objekt, mis tundub palju
nagu kood, mis tähendab, et saame alustada manipuleerida see suur objekt kasutades
koodi muuta seda, mida meie veebileht näeb välja nagu.
>> Nii et on üsna võimas vahend meil meie käsutuses nüüd.
Nii nagu me just nägin, siis dokumendi objekt ise
ja kõik objektid sees on on omadused ja meetodid, vaid
nagu iga muu objekt, mis me oleme töötanud JavaScript.
Kuid me ei kasuta neid omadusi ja neid meetodeid kasutama, et mingisugune drill down
suurelt dokument ja saada madalam ja väiksem ja väiksem,
peenem ja peenem tera üksikasjalikult, kuni me
saada väga konkreetne tükk meie veebilehe, et me tahame muuta.
>> Ja kui me värskendame omadused Dokumendi eesmärk või helistage need meetodid,
asju võib juhtuda meie veebilehel.
Ja me ei pea tegema muud värskendav on need muudatused jõustuvad.
>> Ja see on päris lahe oskus on, kui me töötame koos koodiga.
Millised on mõned neist omadustest mis on osa dokumendist objekti?
Noh, siis ilmselt nägi Paar neist tõesti kiiresti
kui olime zipping läbi hiiglane dokument
objekti me lihtsalt nägin veebilehitsejat.
>> Aga paar neist omadustest Võib olla asjad sisemine HTML.
Ja võite isegi meenutada mind kasutades seda JavaScripti video
päris lõpus, kui ma rääkis sündmused.
Mis oli selle sisemise HTML?
Noh, see on just see, mida on vahel sildid.
>> Ja nii sisemine HTML, näiteks pealkirja
tag, kui oleksime elus hoida et näiteks hetk tagasi,
oleks tere.
See pealkiri oli meie lehele.
Muud omadused lisada sõlme nimi, mis
on nimi HTML element nagu pealkiri.
ID, mis on ID atribuut HTML element.
>> Tuletame meelde, et saame spetsiaalselt näitavad konkreetsete elementide meie HTML
ID-atribuudi, mis tavaliselt on käepärane kontekstis CSS,
konkreetselt.
Vanem sõlme, mis on viide Mis on lihtsalt ülevalt mind DOM.
Ja tütartippu, mis on viide, mis on allapoole mind.
Ja me nägime palju, et lihtsalt vaatasin läbi.
Lapse sõlmed, see on, kuidas me saime alandab tüvesse.
>> Omadused, mis on lihtsalt massiivi atribuute HTML element.
Nii näiteks atribuutide might olla, kui sul on pilt tag,
see on tavaliselt allikas atribuut, võibolla kõrgus ja laius atribuut.
Ja nii, et oleks lihtsalt massiivi Kõike atribuutidega seotud
selle HTML element.
>> Stiil on veel üks, et ei esinda CSS
stiil teatud element.
Ja hiljem selles video, siis me eriti
võimendav stiili teha paar muudatusi meie veebilehel.
Nii et need on mõned omadused.
>> Ja on ka mõned meetodeid, et suudame
kasutada ka kiiremini võibolla isoleerida elemendid Document Object.
Ehk kõige mitmekülgsem neist on getElementByld.
Nii et ma võiks öelda midagi sellist, sest mäletan, et see on meetod dokumendi
Objekti, document.getElementById.
>> Ja sees need sulgudesse, täpsustada HTML element konkreetse ID
atribuut, et olen varem määrata, ja ma kohe
lähen kohe, et element üldise veebilehel.
Nii et ma ei pea äkki puurida ette läbi iga kihi.
Ma lihtsalt kasutada seda meetodit, et leida see, omamoodi nagu soojus seeking rakett,
õige?
See lihtsalt läheb ja leiab täpselt, mida see otsinud.
>> GetElementsByTagName on väga sarnase sisuga.
Võib-olla see leiaks kõik rasvases silte või kõik p silte
ja anna mulle hulgaliselt kõike et ma võiks siis töötada.
appendChild lisab midagi ühe taseme alla puu.
>> Nii võin ka kogu uus element ühe taseme madalam.
Või ma ei saa eemaldada element, mis on ühe taseme alumise kui ka siis, kui ma tahan
kustutada midagi minu veebilehele.
Nüüd, kiire kodeerimine märkuse ja kiire peavalu säästa märkus, loodetavasti.
>> getElementById-- d on väiketähed.
Ma ei saa öelda, mitu korda ma pean Kasutatud getElementByld ja kapitaliseeritud
d seal.
Sest see on tõesti levinud.
Kui me kirjutame sõna ID, see on Tavaliselt kapital Ma kapitali D.
Ja minu kood lihtsalt ei tööta.
Ja ma ei saa aru, miks.
See on tõesti, tõesti, tõesti ühine viga, mida kõik teeb,
isegi eksperdid, kes on teinud seda igavesti.
Nii lihtsalt teadma, getElementByld, et d on väiketähed.
Ja loodetavasti mis säästab mitu minut vähemalt südamevalu.
>> Mida see kõik meile öelda?
Meil on need meetodid.
Meil on need omadused.
Nüüd, kui me alustada dokument, dokumendi.
mida iganes, saame nüüd saada ükskõik ühes tükis meie kodulehelt
et me tahame kasutades JavaScript lihtsalt helistades need meetodid
ja võimendades omadused et leiame eri paigus.
>> See võib saada paljusõnaline see document.getElementById,
äkki on pikk sildi nimi äkki sa rohkem kõnesid hiljem.
Asjad saavad natuke paljusõnaline.
Ja nagu programmeerijad, kui olete ilmselt näha palju neid videoid
meile ei meeldi paljusõnaline asju.
>> Meile meeldib, et oleks võimalik teha asju kiiremini.
Nii et me tahaksime rohkem lühike tee midagi öelda.
Nii selline viib olukorrani, Mõiste midagi, mida nimetatakse jQuery.
Nüüd jQuery ei ole JavaScript.
See ei ole osa JavaScript.
>> See on raamatukogu, mis oli kirjutatud Mõned JavaScript programmeerijad
umbes 10 aastat tagasi.
Ja selle eesmärk on lihtsustada seda, mis on nimetatakse kliendi skript, mis
on põhimõtteliselt mida me olime lihtsalt räägime DOM töötlusi.
Ja nii kui ma tahtsin muuta taustavärvi minu veebilehele, võibolla
konkreetse Div.
>> Siin, ma ilmselt saan ElementById colorDiv.
Ja ma tahan, et määrata oma taustavärvi.
Kui ma lihtsalt puhta JavaScript abil Document Object Model,
et on palju asju, eks? document.getElementById
colorDiv.style.backgroundColor = roheline.
>> Whew.
See oli palju öelda.
See on palju kirjutada, liiga.
Ja nii jQuery, saame äkki öelda see natuke rohkem lühidalt.
Kompromiss on see võib-olla veidi natuke rohkem segasena äkki,
õige?
>> Vähemalt pikk on natuke rohkem selgituseks, et mida me teeme.
See dollari märk, sulgudes ülakoma, hash, colorDiv, eks?
Mida see tähendab?
Noh, see on põhimõtteliselt ainult document.getElementById colorDiv.
>> Aga see on selline stenografist viis seda teha kasutades jQuery.
Võtame pilk nüüd at paar erinevalt
et ma võiks tegelikult kasutada seda Document Object
Mudel manipuleerida tükki minu koduleheküljel.
Eelkõige me läheme tuleb tööd manipuleerimine
värvi konkreetse Div, colorDiv, veebilehele.
Võtame pilk seda.
Hästi.
Nii et ma olen lehel.
Seda nimetatakse test.html kui sa alla laadida see, kui soovid käpard seda.
Ja mul on kamp nupud sellel lehel.
Ja ma räägin üksikute funktsioonide tausta värvi, lilla, roheline,
oranž, punane, sinine, ühe funktsiooni tausta värvi, sündmus
tausta värvi, ja kasutades jQuery.
Mida ma räägin kui ma teen seda?
Nii oleme näinud nuppe.
Nüüd võtame pilk mõned lähtekoodi siin.
Hakkame koos test.html.
Nii üksikute funktsioonide tausta värv on see, mida ma olen kirjutatud siin.
Lubage mul kerida natuke.
>> Ja märkad, et ma on määratletud need nupud
öelda, kui seda nupule vajutamist, helistada funktsiooni sisselülitamiseks lilla.
Kui seda nuppu klõpsata pigem helistada funktsioon roheliseks,
oranžiks, punaseks, siniseks.
Sa ilmselt ära, et see ei pruugi olla parim disain
mõttes, eks?
>> Oleks tore, kui suutsin on üldisemat lähenemisviisi.
Noh, esiteks me vaatleme millised need viis funktsioone
document.getElementById colorDiv.style.background = lilla,
roheline, oranž, punane, ja sinine võrra.
Niisiis, ei ole eriti parima disaini.
>> Järgmine nuppude Mul on, olen kirjutanud
ühe funktsiooni nimetatakse värvi muuta, et ilmselt
aktsepteerib stringi oma väidet.
Nii et see on natuke parem.
Purple, roheline, oranž, punane, sinine on nüüd argument.
Nii et ma olen kirjutanud üldisema Juhul JavaScript funktsioon,
mis võib välja midagi sellist.
Ma möödaminnes.
See funktsioon muutus värv on ootab argumendina nimetatakse värvi.
Ja ma räägin määrata taustavärvi värvi.
Nii et siin on, mida ma olen saanud siin.
Nii et natuke parem.
>> Aga ma võiks olla võimalik teha paremini.
Kui me läheme heita Üritusel handler olukord,
nüüd kõik need kõned tunduvad sama.
Kui te mäletate meie arutelu sündmuse käitleja,
Ma saan informatsiooni, mis on Nende nuppude klõpsatud ja kasutada seda.
>> Ja nii event.JavaScript, ma olen kirjaliku muudavad värvi sündmus, mis
arvud, mis nuppu klõpsatud.
See on trigger objekti line.
Ja siis siin, see saab tõesti paljusõnaline.
Aga mida ma teen on ma olen milles taustal
värvi triggerObject inner.HTML.
See tekst vahel nuppu sildid.
>> Ja siis ma ilmselt ei seada väiketähed.
Ja see, kuidas ma saan teisendada kogu string väiketäheliseks JavaScript kasutades
Selle meetodi väiketähed.
Sest kui ma määrata värvi, kui ma üritan teha siin,
värv peab olema väiketähtedega.
>> Aga nupule, et mul oli, kui me võtame teise ilme,
märkate, et teksti on kirjutatud suure algustähega P lilla.
Ja siis on väga alumine siin, ma ilmselt
proovida ja teha seda kasutades jQuery samuti.
Ja sel juhul, ma ei ole tegelikult Funktsioonide üldse.
Ma olen lihtsalt ütles klassi, et ma olen kasutades selleks nuppu on jQ nuppu.
Nii see on.
>> Niisiis, kuidas jQuery tean, mida ma teen?
Hästi, see on üks eeliseid kaldkriips puudused jQuery.
See võimaldab mul teha asju väga lühidalt, kuid võib-olla mitte
kui intuitiivselt.
Võib-olla need teised kolm teha natuke rohkem tunda, mida ma teen.
Siin küll, mis toimub?
>> Ilmselt luua anonüümne funktsioon
et koormusi, kui minu dokumenti on valmis, nii document.ready,
mõned funktsiooni juhtub.
Põhimõtteliselt, kui on dokument valmis?
See on siis, kui mu lehel on koormatud.
>> Nii kiiresti minu leheküljel on käivitunud, järgmine funktsioon on alati valmis.
Ta ütleb, kui objekti tüübiga jQButton, või kui klassi jQButton on klõpsatud,
täidab seda funktsiooni.
Nii et siin on kaks anonüümset funktsioone, üks kindlaksmääratud sisemust muud.
>> Nii et minu kogu kontekstis Siin on siiani minu leheküljel
laadimisel ta nimetab seda funktsiooni.
Ja see funktsioon on ootamas jaoks nuppu klõpsatud.
Ja kui klõpsad nupule, jQ nuppu spetsiaalselt klõpsamisel
see nõuab see muu funktsioon, mis läheb
tegemaks tausta Värvi colorDiv olla
mis iganes teksti on vahel sildid.
>> See on mõiste mis nupuga klõpsanud.
Aga muidu, see on omamoodi käituvad sarnaselt sündmus.
See on lihtsalt nii nagu mina väljendab seda jQuery.
Jällegi, see on ilmselt palju hirmutada.
See ei ole nii selge midagi event.js,
mis on võib-olla natuke rohkem paljusõnaline, kuid natuke vähem
hirmutada.
>> Aga kui me hüpata tagasi üle minu brauser aken, kui ma hakkan clicking-- hästi,
mis muutis lilla.
See on roheline kasutades stringi meetod.
See on oranž abil korral käitleja.
>> See on punane kasutades jQuery, eks?
Nad kõik käituvad täpselt sama.
Nad lihtsalt teevad seda, kasutades erinevaid läheneb probleemi lahendada.
Seal on palju rohkem jQuery siis me kindlasti
räägime selle video.
Aga kui sa tahad rohkem teada, siis saab minna jQuery omamoodi dokumentatsioon
ja õppida üsna natuke rohkem see väga paindlik raamatukogu, mis
on suurepärane teeme kliendi poolel skriptimine nagu me teeme
manipuleerida ilme ja tunda meie kodulehelt
koos Document Object Model.
Ma olen Doug Lloyd.
See on CS50.