Doug LLOYD: V tem videu, smo želeli klicati ločeno pozornost
v zelo zlasti element JavaScript
da boste morda ugotovili, priročen ko ste začeli
za delo na manipulacijo spletnih strani in spreminjajo vsebino vaše spletne strani
na letenje.
In da je pojem Document Object Model.
Torej, kot smo videli v našem videu na JavaScript, predmeti so zelo prilagodljivi.
>> In lahko vsebujejo različne polj.
In čeprav mi ni šel v veliko Natančneje, ta polja ali lastnosti,
da bi mi verjetno bolj jih ustrezno pokličite
v okviru predmeta, celo te lastnosti so lahko druge predmete.
In znotraj teh predmetov lahko drugi predmeti.
>> Imate to zelo velik objekt z veliko drugih predmetov
znotraj nje, ki nekako ustvarja ta zamisel o velikem drevesu.
Sedaj predmet dokument je zelo poseben predmet v JavaScript
da organizira svoj celoten splet stran v te vrste dežnik
predmeta.
Tako znotraj dokumenta Objekt so predmeti, ki predstavljajo
glava in telo vaše spletne strani.
>> Znotraj te so drugi predmeti, et cetera, et cetera,
dokler ima vaše celotno spletno stran bil organiziran v tem velikem objektu.
Kaj je narobe tukaj, kajne?
No, vemo, kako delati s predmeti v JavaScriptu.
>> Torej, če imamo nek predmet, ki se nanaša na naše celotno spletno stran, da
pomeni ga kliče pravilna metode za manipulacijo, da je predmet
ali spreminjanje nekaterih njegovih lastnosti, bomo
lahko spremenite elemente Naša stran programsko
uporabo JavaScript namesto ob kodo stvari z, recimo, HTML.
Torej, tukaj je primer zelo preprosta spletna stran, kajne?
Ima HTML oznake, glavo.
>> Znotraj je naziv, zdravo svet.
Potem imam telo.
Znotraj, da imam tri različne stvari.
Imam h2 header tag je, odstavek, in povezava.
To je zelo preprosta spletna stran.
>> No, kaj bi lahko bil dokument ugovarja ta izgledal?
No, to je malo strašno morda na prvi.
Ampak to je res samo velik drevo.
In na samem korenu to je dokument.
>> Notranjost je dokument drugo Objekt se nanašajo na HTML moji strani.
In HTML moje strani je vse to.
In nato znotraj HTML objekt, imam predmet glavo,
ki se nanaša na vse, kar je tam.
>> In znotraj tam, Imam naziv predmeta.
In notranjost tam, imam drugo ugovarja, da je samo zdravo svet.
Lahko bi moje telo predstavljal takole.
>> Znotraj mojega telesa, imam H2 Predmet in p objekt za odstavku
in a objekt za povezavo.
In tako je ta celotna hierarhija lahko predstavimo kot velik drevo
z veliko manjšim Littleom Stvari, ki prihajajo iz nje.
Zdaj, seveda, ko bomo programiranje, smo
Ne verjamem, da stvari, kot velika drevesa.
Želimo si, da dejansko kode, povezane stvari.
>> In na srečo, smo lahko uporabo naših Orodja za razvijalce
dejansko si oglejte Ta spletna stran je dokument objekt.
In kaj je to.
Tako sem odprl zavihek brskalnika.
>> In sem odprla Orodja za razvijalce.
In v mojem video na JavaScript, I omeniti, da je konzola ne
samo nekam kjer tiskamo informacije,
to je tudi kraj, kjer smo lahko vhodni podatki.
V zvezi s tem, kaj Jaz sem hotel reči je
Rad bi, da bi dobili nazaj predmeti dokument,
tako da sem lahko začnete, da imajo pogled na to.
Torej, kako bi jaz to naredil?
No, če želim organizirati res lepo,
Jaz bom rekel, console.dir, D-I-R. Zdaj ga uporabljam console.log za samo tiskanje
ven nekaj zelo preprosta.
Ampak, če želim, da organizirajo to hierarhično kot predmeta,
Hočem, da nekako strukturirana podobno strukturo imenika.
>> Torej, želim console.dir dokument.
Bom udaril Enter.
In tik pod njo zdaj, in bom povečavo tukaj,
Imam ta dokument odzivni z malo puščico zraven njega.
Zdaj, ko sem odprl to puščico, tam se dogaja, da je veliko stvari.
>> Ampak bomo prezreti veliko za to in samo nekako poudarkom
na najbolj pomemben del, zato smo lahko začnete navigacijo ta dokument.
Tam je veliko več DOM kot Samo matična vozlišča in otrok vozlišča.
Tam je veliko pomožne stvari.
>> Torej bom to odprli.
In tam je cel kup stvari, ki pops up.
Ampak vse mi je mar, je tukaj, otrok vozlišča.
Odprimo da gor.
>> Znotraj tam vidim nekaj, kar poznajo, HTML.
Tako znotraj našega dokumenta eno raven navzdol, HTML.
Odprem, da je gor.
Kaj smo pričakovali?
>> Če se spomnite iz našega diagrama, kaj bi morali najti znotraj HTML?
Kakšne dva vozlišča so pod njo na drevesu?
Poglejmo izvedeti.
Smo odprli HTML.
Gremo navzdol do svojih otrok vozlišča.
>> Pop, da odprti.
Tam je glava in telo.
In bomo lahko odprli glavo.
Pojdi na svojih otrok vozlišča.
No, tam je naslov.
>> In še bi lahko naštevali in na, kot je ta večno.
Mi lahko to storite s telesom, kot dobro.
Vendar pa je način za nas, da pogled na dokument organizirana kot velik objekt.
In če pogledamo, je velik objekt, ki izgleda veliko
kot kodo, to pomeni, da lahko začnemo manipulirati ta velik objekt z uporabo
koda za spremembo, kakšna je naša Spletna stran izgleda in se počuti kot.
>> Tako da je zelo močno orodje imamo na razpolago sedaj.
Torej, kot smo pravkar videli je sam dokument predmet
in vse predmete znotraj njega imajo lastnosti in metode, samo
kot vsak drug predmet, ki smo jih bilo delo z v JavaScript.
Vendar smo lahko uporabite te lastnosti in uporaba teh metod nekako vrtati navzdol
iz velikih dokumenta in dobili nižje in nižje in nižje,
lepši in lepši zrna podrobnosti, dokler ne bomo
priti na zelo poseben kos naše Spletna stran, ki želimo spremeniti.
>> In ko smo posodobiti lastnosti Document Object ali pokličite teh metod,
Stvari bi se lahko zgodilo na naši spletni strani.
In mi ni treba storiti vse osvežujoč da so te spremembe začele veljati.
>> In to je zelo kul sposobnost imajo, ko delamo s kodo.
Torej, kaj so nekateri od teh lastnosti ki so del dokumenta objekta?
No, ste verjetno videl Nekaj ​​od njih res hitro
kot smo stiskanje skozi velikan dokument
Objekt smo pravkar videli v spletnem brskalniku.
>> Toda nekaj teh lastnosti lahko stvari, kot so notranji HTML.
In morda celo me spomni to uporabljati v videu JavaScript
na samem koncu, ko sem je govoril o dogodkih.
Kaj je to notranja HTML?
No, to je samo tisto, kar je med oznakami.
>> In tako notranja HTML, na primer naslova
tag, če smo bo ohranil v da na primer pred nekaj trenutki,
bi bilo zdravo svet.
Da je bil naslov naše strani.
Ostale lastnosti vsebovati ime vozlišča, ki
je ime HTML element, kot je naslov.
ID, ki je osebna atribut HTML elementa.
>> Spomnimo se, da smo lahko posebej navede, Posebni elementi našega HTML
z ID atribut, ki je običajno pride prav v okviru CSS,
posebej.
Parent vozlišče, ki je sklic kaj je samo gor nad mano v DOM.
In otrok vozlišča, ki je Sklicevanje na to, kar je navzdol pod mano.
In smo videli veliko, ki samo gledaš skozi.
Otroška vozlišča, to je, kako smo dobili nižje in nižje v drevesu.
>> Atribute, da je samo niz od atributov HTML elementa.
Torej primer atributov morda biti, če imate oznako slike,
običajno ima vir atribut, morda višina in širina atribut.
In tako, da bi bili samo niz vseh atributov povezanih
s to HTML elementa.
>> Style je še eden, ki ne predstavljajo CSS
styling posameznega elementa.
In kasneje v tem video, bomo posebej
vzvod slog, da bi nekaj sprememb na naši spletni strani.
Torej, to so nekatere lastnosti.
>> In tam so tudi nekateri Metode, ki jih lahko
uporabite za bolj hitro mogoče izolirati elementi Document Object.
Morda je najbolj vsestranski se ti getElementById.
Torej lahko rečem nekaj podobnega, saj ne pozabite, da je metoda dokumenta
Ugovarja, document.getElementById.
>> In znotraj teh oklepajev, navedite HTML element s posebnim ID
pripisujejo, da sem prej imel nastaviti, in bom takoj
gremo desno do tega elementa celotne spletne strani.
Torej, jaz ne bi bilo treba morda vrtanje navzdol skozi vsako posamezno plast.
Jaz lahko samo uporabite ta način, da ga najdejo, nekako kot toplota, ki išče raket,
prav?
To gre samo in najde točno to, kar je iskal.
>> GetElementsByTagName je Zelo podobno v duhu.
Mogoče bi to ugotovili vse krepko oznake ali vse p oznak
in mi paleto vsega da sem lahko potem delati.
appendChild dodaja nekaj eno raven navzdol v drevesu.
>> Tako sem lahko dodate celoten Novo element nižja za eno stopnjo.
Ali lahko odstranim element, ki je eno stopnjo nižja, kot tudi, če želim
izbrisati nekaj iz moje spletne strani.
Zdaj pa hitro kodiranje note in hitro prihranek glavobol seznanjen, upajmo.
>> getElementById-- D je z malimi tiskanimi črkami.
Ne morem vam povedati, koliko krat sem Rabljeni getElementById in kapitalizirane
D tam.
Ker to je res pogosti.
Če smo napisali besedo ID, to je običajno kapital I kapital D.
In moja koda ne dela.
In ne morem ugotoviti, zakaj.
To je res, res, res pogosta napaka, da vsakdo naredi,
celo strokovnjaki, ki imajo bil to za vedno.
Torej, samo zavedati, getElementById, da d je z malimi tiskanimi črkami.
In upajmo, da vam prihrani več minut pri najmanj bolečino.
>> Torej, kaj vse nam to pove?
Imamo te metode.
Imamo te lastnosti.
Zdaj, če začnemo od dokument, listina.
karkoli, lahko sedaj dobite katerokoli en kos naši spletni strani
da želimo, da uporabo JavaScript Samo s klicem te metode
in vplivno lastnosti da smo našli na različnih lokacijah.
>> To lahko dobite Razvučen, to document.getElementById,
Mogoče imajo dolgo ime oznake, Morda vam več klicev kasneje.
Stvari lahko dobili malo Razvučen.
In kot programerji, kot ste verjetno opazili v mnogih od teh videoposnetkov,
ne maramo Razvučen stvari.
>> Radi bi biti sposoben narediti stvari hitro.
Zato bi želeli bolj jedrnat način, da nekaj reči.
Torej, to nekako vodi do pojem nečesa imenuje jQuery.
Zdaj jQuery ni JavaScript.
To ni del JavaScript.
>> To je knjižnica, ki je napisana nekateri programerji JavaScript
pred približno 10 leti.
In njen cilj je poenostaviti to, kaj je imenujemo odjemalec side skripte, ki
je v bistvu tisto, kar smo pravkar govoriš s DOM manipulacijami.
In zato, če sem hotel, da spremenite Barva ozadja moji spletni strani, morda
posebno Div.
>> Tukaj sem očitno že ElementById colorDiv.
In želim, da nastavite barvo ozadja.
Če sem le uporabo čistega JavaScript pomočjo Document Object Model,
da je veliko stvari, kajne? document.getElementById
colorDiv.style.backgroundColor = zelena.
>> Uh.
To je bilo veliko za povedati.
To je veliko, da tip, preveč.
In tako v jQuery, bomo lahko morda rekli to malo bolj jedrnato.
Kompromis je da je morda malo malo bolj skrivnosten naenkrat,
prav?
>> Vsaj je dolg malo bolj pojasnili, kaj počnemo.
Ta znak za dolar, oklepaji, enojni narekovaj, hash, colorDiv, kajne?
Kaj to pomeni?
No, to je v bistvu samo document.getElementById colorDiv.
>> Vendar je to neke vrste okrajšavi način to počne s pomočjo jQuery.
Naj samo poglej zdaj v nekaj različnih načinov
da sem lahko dejansko uporabite to Document Object
Model manipulirati kosov moji strani.
Še posebej, gremo da bodo delali na manipulacijo
barva posebno Div, colorDiv, na spletni strani.
Torej, kaj je, da pogled na to.
V redu.
Tako da sem na strani.
Imenuje test.html ko prenesete to, če želite, da Lemiti s tem.
In imam kup gumbi na tej strani.
In jaz pravim posebnimi funkcijami za barvo ozadja, vijolična, zelena,
oranžna, rdeča, modra, ena funkcija za barvo ozadja, event handler
za barvo ozadja in z uporabo jQuery.
Kaj sem govoril o ko delam to?
Tako smo videli gumbe.
Zdaj pa si oglejte nekaj izvorne kode tukaj.
Začeli bomo z test.html.
Torej posamezne funkcije za ozadje Barva je tisto, kar sem tukaj tipkal.
Dovolite mi, da se pomaknete malo.
>> In boste opazili, da sem so opredeljena te gumbe
reči, kdaj se ta gumb kliknili, klic funkcije obarva vijolično.
Ko je ta gumb kliknite, namesto, pokličite funkcija pa zeleno,
obrniti oranžno, obarva rdeče, ne obarva modro.
Si verjetno lahko uganiti, da je to morda ni najboljši dizajn
občutek, kajne?
>> Bilo bi lepo, če bi lahko imajo bolj splošen pristop.
No, najprej bomo lahko ogledali kaj ti pet funkcij so
document.getElementById colorDiv.style.background = vijolična,
zelena, oranžna, rdeča, in modra, oz.
Torej, ni posebej najboljši dizajn.
>> Naslednji sklop gumbov Sem se sem napisal
ena funkcija imenuje spreminjajo barvo, ki očitno
sprejme niz kot svoj argument.
Torej, to je malo bolje.
Vijolična, zelena, oranžna, rdeča, modra je zdaj argument.
Tako sem napisal bolj splošno sodna funkcija JavaScript,
ki bi izgledala nekako takole.
Jaz sem, ki poteka v.
Ta barva funkcija sprememba je Pričakoval argument imenovano barva.
In jaz pravim nastavite barva ozadja na barvo.
Torej, tukaj predstavlja kar sem tukaj dobil.
Tako da je malo bolje.
>> Vendar bi jaz lahko narediti bolje kot to.
Če gremo dol, da se zazremo na dogodek trener razmer na,
Zdaj vsi ti klici videti enako.
Če se spomnite, za naše Razprava o viličarji dogodkov,
Jaz lahko dobite informacije o tem, katere ti gumbi je kliknil in uporabite to.
>> In tako v event.JavaScript, Sem pisna sprememba barve dogodek, ki
številke, kateri gumb je kliknil.
To je povod objekt črta.
In potem tukaj, da postane res Razvučen.
Ampak, kaj počnem, je, da sem nastavitev ozadje
barva triggerObject inner.HTML.
To je besedilo v med gumbom oznake.
>> In potem sem očitno imela da jo nastavite na male črke.
In to je, kako sem lahko pretvorite celotno niz v male črke v JavaScript uporabo
ta metoda v male.
Ker ko sem nastaviti barvo, kot sem poskušal narediti tukaj,
barva mora biti vse male.
>> Ampak gumb, da sem imel, če vzamemo še enkrat pogledal,
opazili, da je besedilo napisana z veliko začetnico P za vijolično.
In potem na samem Dno tukaj, sem očitno
poskusiti in narediti to s pomočjo jQuery kot dobro.
In v tem primeru nisem dejansko kliče funkcijo sploh.
Pravkar sem rekel razred, ki sem uporabljajo za ta gumb je gumb jQ.
To je to.
>> Torej, kako jQuery vem, kaj delam?
No, to je ena izmed prednosti poševnica slabosti jQuery.
To lahko dovolite mi, da počnejo stvari zelo jedrnato, a morda ne
kot intuitivno.
Morda tisti, drugi trije narediti malo bolj občutek, kaj delam.
Tukaj, čeprav, kaj se dogaja?
>> Očitno, ustvarjanje anonimni funkcija
da obremenitve, kadarkoli je moj dokument je pripravljen, tako document.ready,
nekatere funkcije se bo zgodilo.
V bistvu, ko je dokument pripravljen?
To je, ko je moja stran naloži.
>> Torej, takoj, ko je moja stran naložen je naslednje funkcije je vedno pripravljen.
To pravi, če je objekt tipa jQButton, ali če je bila razred jQButton kliknili,
izvršiti to funkcijo.
Torej, tukaj je dve anonimni funkcije, eden definirano znotraj drugega.
>> Torej celotnem mojem kontekstu Tukaj kolikor je moja stran
ko to obilje poziva to funkcijo.
In ta funkcija čaka za gumb, ki se kliknili.
In ko je gumb kliknili, jQ Gumb je posebej kliknili,
poziva ta druga Funkcija, ki se dogaja
da nastavite ozadje Barva colorDiv biti
karkoli besedilo je med oznakami.
>> To je pojem kateri gumb je kliknil.
Drugače pa, da je to nekako obnaša podobno dogodka.
To je samo na enak način sem to bi izraziti v jQuery.
Še enkrat, to je verjetno Veliko bolj zastrašujoče.
To ni tako jasno, kot nekaj podobnega event.js,
ki je morda malo bolj verbose, ampak malo manj
zastrašujoče.
>> Ampak, če smo pop nazaj v mojo brskalnik okno, če začnem clicking-- dobro,
da spremeni v vijolično.
To je zelena metodi niza.
To je oranžna z obravnavo dogodkov.
>> To je rdeča uporabo jQuery, kajne?
Vsi obnašajo povsem enako.
Samo to storite s pomočjo razlikuje pristopi k reševanju problema.
Tam je veliko več jQuery potem smo zagotovo
bomo govorili o tem videu.
Toda, če želite izvedeti več, lahko pojdite na jQuery vrste dokumentacije
in se naučite precej malo več o tem Ta zelo prilagodljiva knjižnica, ki
je super za to odjemalsko skriptni kot tisto, kar smo počeli
manipulirati videz in občutek naši spletni strani
z Document Object Model.
Sem Doug Lloyd.
To je CS50.