Doug LLOYD: Šajā video, mēs vēlējāmies lai izsauktu atsevišķu uzmanību
ļoti īpaši JavaScript elements
ka jūs varētu atrast parocīgs ja jūs, sākot
strādāt pie manipulējot tīmekļa lapas un mainot saturu jūsu mājas lapā
par lidot.
Un tas ir jēdziens Dokumentu Object Model.
Tātad, kā mēs redzējām mūsu video par JavaScript, objekti ir ļoti elastīga.
>> Un tie var saturēt dažādas jomas.
Un, lai gan mums nebija iedziļināties daudz detaļām, šie lauki vai īpašības,
ka mēs, iespējams, vairāk attiecīgi viņiem piezvanīt
saistībā ar objekta, pat šie īpašumi var būt citi objekti.
Un iekšpusē tiem objektiem var būt citi objekti.
>> Jums ir šī ļoti liels objektu ar daudziem citiem objektiem
iekšpusē no tā, kāda veida rada šo ideju par lielu koku.
Tagad, dokuments objekts ir ļoti īpašs objekts JavaScript
kas organizē visu savu web lapa ar šāda veida jumta
no objekta.
Un tā iekšpusē no dokumenta objekts ir objekti, kas rada
galvas un ķermeņa jūsu mājas lapā.
>> Inside no tiem ir citi objekti, un tā tālāk, un tā tālāk,
līdz visa jūsu mājas lapa ir tika organizēta šo lielo objektu.
Kas ir otrādi šeit, vai ne?
Nu, mēs zinām, kā strādāt ar objektu JavaScript.
>> Tātad, ja mums ir objekts, kas attiecas uz visu mūsu mājas lapā, ka
nozīmē, zvanot pareizs metodes, lai manipulēt šo objektu
vai grozot pārliecināts tās īpašības, mēs
var mainīt elementus Mūsu lapa programmiski
izmantojot JavaScript vietā, kodēt lietas ar, teiksim, HTML.
Tātad, šeit ir piemērs ļoti vienkārša mājas lapa, vai ne?
Tas ieguva HTML tagus, galvu.
>> Iekšpusē ir virsraksts, hello world.
Tad man ir ķermeni.
Iekšpusē, ka man ir trīs dažādas lietas.
Man ir H2 header tag, rindkopa, un saikne.
Tas ir ļoti vienkāršs mājas lapa.
>> Nu, ko varētu dokuments iebilst šim izskatās?
Nu, tas ir nedaudz biedējošu varbūt sākumā.
Bet tas ir tiešām tikai liels koks.
Un tajā pašā saknē tā ir dokuments.
>> Iekšpusē dokuments ir vēl viens objekts atsaucoties uz HTML manu lapu.
Un HTML mana lapa ir viss.
Un tad iekšpusē HTML objekts, man ir galvas objektu,
kas attiecas uz visu tur.
>> Un iekšā tur, Man ir virsraksts objektu.
Un iekšā tur, man ir cits iebilst, ka ir tikai hello world.
Es varētu būt manu ķermeni pārstāvēta kā šis.
>> Iekšpusē manu ķermeni, man ir H2 objekts un p objekts punktā
un A objekts saiti.
Un tā tas viss hierarhija var attēlot kā liels koks
ar daudz mazāku Little lietas nāk no tā.
Tagad, protams, kad mēs programmēšana, mēs
nedomāju, ka par lietām, piemēram, lielu koku.
Mēs vēlamies redzēt faktisko kods saistītas lietas.
>> Un par laimi, mēs varam izmantot mūsu izstrādātāju rīkus
faktiski to apskatīt Šī mājas lapa ir dokuments objekts.
Un pieņemsim darīt.
Tāpēc es esmu atvērusi pārlūka cilni.
>> Un es esmu atvēra izstrādātāja rīki.
Un manā video par JavaScript, I minēja, ka konsole nav
tikai kaut kur, kur mēs izdrukāt informāciju,
tā ir arī vieta, kur mēs varam ievades informāciju.
Šajā kontekstā, ko Es esmu gatavojas teikt, ir
Es vēlētos saņemt atpakaļ Dokumentā objekti,
lai es varētu sākt, lai apskatīt to.
Tātad, kā es varētu darīt?
Nu, ja es gribu organizēt to tiešām labi,
Es esmu gatavojas teikt console.dir, D-I-R. Tagad, es izmantot console.log lai tikai drukāt
ārā kaut kas ļoti vienkāršs.
Bet, ja es gribu, lai organizētu šo hierarhiski tāpat objektu,
Es gribu to veida strukturētas kā direktoriju struktūru.
>> Tāpēc es gribu console.dir dokumentu.
Es esmu gatavojas hit Enter.
Un tieši zem tā tagad, un es ņemšu tuvinātu šeit,
Man šī atbilde dokumentu ar nelielu bultiņu blakus tai.
Tagad, kad es atvērt šo bultiņas, tur būs daudz sīkumi.
>> Bet mēs esam gatavojas ignorēt daudz no tā un tikai veida uzmanības centrā
par svarīgākajiem daļa, tāpēc mēs var sākt, lai virzītos šo dokumentu.
Tur ir daudz vairāk, lai DOM nekā tikai mātes mezgli un bērnu mezgli.
Tur ir daudz papildu sīkumi.
>> Tāpēc es esmu gatavojas atvērt šo augšu.
Un tur ir visai daudz sīkumi, kas NOP augšu.
Bet viss, man rūp, ir tieši šeit, bērnu mezgli.
Atvērsim ka līdz.
>> Iekšpusē tur es redzu kaut kas pazīstams, HTML.
Tātad iekšpusē mūsu dokumenta vienu līmeni uz leju, HTML.
Es atveru, ka līdz.
Ko mēs sagaidām?
>> Ja jūs atceraties no mūsu diagrammas, Ko mums vajadzētu atrast iekšpusē HTML?
Kādi divi mezgli ir zem tā kokā?
Let 's uzzināt.
Mēs atvērt HTML.
Mēs ejam uz leju, lai savu bērnu mezgliem.
>> Pop ka atvērtas.
Tur ir galvas un ķermeņa.
Un mēs varam atvērt galvu.
Dodieties uz savu bērnu mezgliem.
Nu, tur ir nosaukums.
>> Un mēs varētu iet tālāk un kā šis uz visiem laikiem.
Mēs varētu darīt ar ķermeni, kā arī.
Bet tur ir veids, kā mēs apskatīt dokuments organizēta kā liels objekts.
Un, ja mēs skatāmies, ir liels objekts, kas izskatās daudz
tāpat kodu, tas nozīmē, ka mēs varam sākt manipulēt šo lielo objektu, izmantojot
kodu, lai mainītu to, ko mūsu mājas lapa izskatās un jūtas līdzīgi.
>> Tātad tas ir diezgan spēcīgs instruments mums ir mūsu rīcībā tagad.
Tātad, kā mēs tikko redzēju, tad dokuments objekts pati
un visus objektus iekšpusē no tā ir īpašības un metodes, tikai
tāpat kā jebkuru citu objektu, kas mēs esam strādājusi ar JavaScript.
Bet mēs varam izmantot šīs īpašības un izmantot tādas pašas metodes, lai sakārtotu un urbt uz leju
no lielā dokumenta un saņemt zemāk un zemāk un zemāk,
smalkāka un smalkāka graudi detalizācijas, kamēr mēs
nokļūt uz ļoti konkrētu gabalu mūsu mājas lapa, kas mēs vēlamies mainīt.
>> Un, kad mēs atjaunināt īpašībām Dokumenta mērķis vai zvaniet šīs metodes,
lietas varētu notikt mūsu mājas lapā.
Un mums nav jādara kādu atsvaidzinošu lai šīs izmaiņas stātos spēkā.
>> Un tas ir diezgan foršs spēja ir tad, kad mēs strādājam ar kodu.
Tātad, kādi ir daži no šiem īpašumiem kas ir daļa no dokumenta objektu?
Nu, jūs, iespējams, redzēja pāris no viņiem tiešām ātri
kā mēs zipping caur milzu dokumentu
objekts mēs tikko redzējām interneta pārlūku.
>> Bet pāris no šiem īpašumiem varētu būt lietas, piemēram, iekšējo HTML.
Un jūs pat varētu atcerēties mani izmantojot šo JavaScript video
pašās beigās, kad es runāja par notikumiem.
Kas bija šis iekšējais HTML?
Nu, tas ir tieši tas, kas ir starp tagiem.
>> Un tā iekšējais HTML, piemēram, no nosaukuma
tag, ja mēs būtu tur dodas ka piemēram pirms brīža,
būtu bijis hello world.
Tas bija nosaukums mūsu lapā.
Citi īpašumi ietver mezgla nosaukums, kurā
ir nosaukums HTML elements, piemēram, nosaukumu.
ID, kas ir ID atribūts HTML elementa.
>> Atgādināt, ka mēs varam speciāli norādīt specifiski elementi mūsu HTML
ar ID atribūtu, kas parasti nāk ērts kontekstā CSS,
konkrēti.
Parent mezgls, kas ir atsauces uz kas ir tikai līdz virs manis DOM.
Un bērnu mezglus, kas ir norāde uz to, kas ir uz leju, zem manis.
Un mēs redzējām daudz kas tikai skatoties caur.
Bērnu mezgli, tas ir, kā mēs saņēmām zemāk un zemāk kokā.
>> Atribūti, tas ir tikai masīvs no atribūti HTML elementa.
Tātad piemērs atribūtiem varētu būt, ja jums ir attēla tagu,
tas parasti ir avota atribūtu, varbūt augstums un platums atribūts.
Un lai būtu vienkārši masīvs no visiem atribūtiem, kas saistīti
ar šo HTML elements.
>> Stils ir vēl viens, kas tas pārstāv CSS
stils konkrēta elementa.
Un vēlāk šajā video, mēs īpaši
sviras stils izdarīt pāris par izmaiņām mūsu mājas lapā.
Tātad tie ir dažas īpašības.
>> Un tur ir arī daži metodes, ka mēs varam
izmantot, lai arī ātrāk varbūt izolēt elementi dokumenta objekts.
Iespējams, visvairāk universāls no tām ir getElementById.
Tāpēc es varētu teikt kaut ko līdzīgu, jo Atcerieties, tas ir metode Dokumenta
Objekta, document.getElementById.
>> Un iekšpusē no tiem iekavās, norādiet HTML elements ar īpašu ID
atribūtika, ka es esmu iepriekš noteikts, un es uzreiz
iet labi uz šī elementa no kopējā tīmekļa vietnē.
Tāpēc man nav varbūt urbt lejup pa katru slāni.
Es varu tikai izmantot šo metodi, lai atrastu to, veida, piemēram, siltuma Meklēju raķete,
labi?
Tā vienkārši iet un atrod tieši to, ko tas meklē.
>> GetElementsByTagName ir ļoti līdzīgs garā.
Varbūt tas varētu atrast visus šos Bold tagus vai visi p tagus
un dod man masīvu visu ka es varētu pēc tam strādāt.
appendChild piebilst kaut ko vienu līmeni uz leju kokā.
>> Tāpēc es varu pievienot visu jauno elements vienu līmeni zemāk.
Vai es varu noņemt elementu, kas ir vienu līmeni zemāk, kā arī tad, ja es gribu
dzēst kaut ko no manas mājas lapā.
Tagad, ātri kodēšanas piezīmi un ātri galvassāpes ietaupot zināšanai, cerams.
>> getElementById-- D ir mazie.
Es nevaru pateikt, cik reizes man ir Lietota getElementById un kapitalizēti
D tur.
Jo tas tiešām bieži.
Ja mēs rakstīt vārdu ID, tas ir Parasti kapitāls I kapitāls D.
Un mans kods vienkārši nedarbojas.
Un es nevaru saprast, kāpēc.
Tas ir ļoti, ļoti, ļoti kopējā bug, ka visi dara,
pat eksperti, kas ir darot visiem laikiem.
Tik vienkārši ir jāapzinās, getElementById, ka d ir mazajiem burtiem.
Un cerams, ka ietaupa jums vairākas minūtes vismaz sirdssāpes.
>> Tātad, ko tas viss mums pateikt?
Mums ir šīs metodes.
Mums ir šīs īpašības.
Tagad, ja mēs sākam no dokuments, dokuments.
neatkarīgi, mēs tagad var nokļūt uz jebkuru viens gabals no mūsu mājas lapas
ka mēs gribam, lai, izmantojot JavaScript vienkārši zvanot šīs metodes
un piesaistot īpašības ka mēs atrast dažādās vietās.
>> To var saņemt izplūdis, tas document.getElementById,
varbūt ir sena taga nosaukumu, varbūt jums darīt vairāk zvanu vēlāk.
Lietas var iegūt mazliet izplūdis.
Un kā programmētāji, kā jūs esat iespējams, redzējuši daudzi no šiem videoklipiem,
mums nepatīk izplūdis lietas.
>> Mēs vēlētos, lai varētu darīt lietas ātri.
Tādēļ mēs vēlētos vairāk kodolīgs veids, kā kaut ko pateikt.
Tātad šāda veida noved pie jēdziens kaut ko sauc jQuery.
Tagad jQuery nav JavaScript.
Tas nav daļa no JavaScript.
>> Tas ir bibliotēka, kas bija rakstīts daži JavaScript programmētāji
aptuveni pirms 10 gadiem.
Un tās mērķis ir vienkāršot šo to, kas ir sauc klienta puses skriptu, kas
būtībā tas, ko mēs bijām tikko runājam ar DOM manipulācijām.
Un tāpēc, ja es gribēju, lai mainītu fona krāsa manā mājas lapā, varbūt
īpašs Div.
>> Lūk, es esmu acīmredzot kļūst ElementById colorDiv.
Un es gribu, lai uzstādītu savu fona krāsu.
Ja es esmu tikai izmantojot tīru JavaScript izmantojot dokumenta objekta modelis,
tas ir daudz sīkumi, vai ne? document.getElementById
colorDiv.style.backgroundColor = zaļš.
>> Whew.
Tas bija daudz ko teikt.
Tas ir daudz rakstīt, too.
Un tāpēc, jQuery, mēs varam varbūt teikt Tas mazliet vairāk lakoniski.
Tirdzniecības off pagaidām tas ir varbūt nedaudz nedaudz vairāk mistisks visi pēkšņi,
labi?
>> Vismaz ilgi ir nedaudz vairāk paskaidrojumiem par to, ko mēs darām.
Šis dolāra zīme, iekavas, single quote, hash, colorDiv, vai ne?
Ko tas nozīmē?
Nu, tas ir būtībā tikai document.getElementById colorDiv.
>> Bet tas ir šāda veida stenogrāfija veids, kā darīt to, izmantojot jQuery.
Pieņemsim tikai to apskatīt tagad pie pāris dažādos veidos
ka es varētu tiešām izmantojiet šo dokumentu objektu
Modelis manipulēt gabalus manā vietā.
Jo īpaši, mēs ejam kas strādā manipulējot
krāsa konkrēts Div, colorDiv, uz mājas lapā.
Tātad, pieņemsim to apskatīt, kas.
Viss kārtībā.
Tāpēc es esmu lapā.
To sauc test.html kad jūs lejupielādēt šo, ja jūs vēlaties, lai lāpīt ar to.
Un es esam ieguvuši ķekars pogas uz šo lapu.
Un es saku individuālas funkcijas fona krāsa, violeta, zaļa,
oranža, sarkana, zila, viena funkcija fona krāsu, notikumu apdarinātājs
fona krāsu, un, izmantojot jQuery.
Ko es runāju par kad es esmu to izdarīt?
Tātad mēs esam redzējuši pogas.
Tagad, pieņemsim to apskatīt daži pirmkodu šeit.
Mēs sāksim ar test.html.
Tāpēc atsevišķas funkcijas fona krāsa ir tas, ko es esmu drukāti šeit.
Ļaujiet man ritināt mazliet.
>> Un jūs pamanīsiet, ka es ir definēts šīs pogas
pateikt, kad šī poga ir noklikšķinājuši, zvanu funkciju griezties violeta.
Ja šī poga ir noklikšķiniet, drīzāk, zvanu funkcija kļūst zaļas,
savukārt oranžs, sarkans, savukārt zilā krāsā.
Jūs varat droši uzminēt, ka šis varbūt nav labākais dizains
sajūta, vai ne?
>> Būtu jauki, ja es varētu ir daudz vispārēju pieeju.
Nu, vispirms mēs ņemšu apskatīt at kādi ir šie pieci funkcijas
document.getElementById colorDiv.style.background = violeta,
zaļa, oranža, sarkana, un zilā, attiecīgi.
Tātad, nav īpaši labākais dizains.
>> Nākamais kopums pogas Man ir, es esmu uzrakstījis
viena funkcija sauc mainīt krāsu, kas acīmredzot
akceptē virkni kā savu argumentu.
Tātad tas ir mazliet labāk.
Purple, zaļa, oranža, sarkana, blue tagad ir arguments.
Tāpēc es esmu uzrakstījis vispārīgāka case JavaScript funkcija,
kas varētu izskatīties kaut kas līdzīgs šim.
Es esmu garāmejot.
Šī funkcija izmaiņas krāsa gaidījis argumentu sauc krāsu.
Un es saku iestatītu fona krāsu uz krāsu.
Tātad, šeit ir tas, ko es esam ieguvuši šeit.
Tātad tas ir mazliet labāk.
>> Bet es varētu būt iespēja darīt labāk nekā to.
Ja mēs ejam uz leju, lai to apskatīt pie notikumu apdarinātājs situāciju,
tagad visas šīs zvani izskatās vienādi.
Ja jūs atceraties par mūsu diskusija par notikumu apstrādes,
Es varu saņemt informāciju par kura no Šīs pogas ir uzklikšķināt un izmantot to.
>> Un tā event.JavaScript, es esmu rakstīts mainīt krāsu notikums, kas
skaitļi, kas poga tika uzklikšķināt.
Tas ir sprūda objekts līnija.
Un tad šeit, tā kļūst patiešām izplūdis.
Bet ko es daru, ir es esmu Nosakot fona
krāsu triggerObject inner.HTML.
Tas ir teksts starp pogu tagiem.
>> Un tad man acīmredzot ir noteikt to uz mazajiem burtiem.
Un tas, kā es varu pārvērst visu string uz mazo JavaScript izmantojot
šī metode uz mazajiem burtiem.
Jo, kad es noteikti krāsu, kā es cenšos darīt šeit,
krāsa ir jābūt visiem mazajiem.
>> Bet poga, kas man bija, ja mēs uzņemtu citu izskatu,
ievērosiet, ka teksts ir raksta ar lielo P Purple.
Un pēc tam pie ļoti bottom šeit, es acīmredzot
mēģināt un darīt to, izmantojot jQuery, kā arī.
Un šajā gadījumā, es neesmu faktiski zvana funkciju vispār.
Esmu tikko teica klase, kas es esmu izmantojot šo pogu ir JQ poga.
Tieši tā.
>> Tātad, kā tas jQuery zināt, ko es daru?
Nu, šis ir viens no priekšrocībām slash trūkumus jQuery.
Tas var ļaut man darīt lietas ļoti lakoniski, bet varbūt ne
kā intuitīvi.
Varbūt tie pārējie trīs padarīt mazliet vairāk sajust to, ko es daru.
Lūk, lai gan, kas notiek?
>> Acīmredzot, radot anonīms funkcija
ka slodzes, kad mana dokuments ir gatava, tik document.ready,
daži funkcija ir gatavojas notikt.
Būtībā, ja ir dokuments gatavs?
Tas ir tad, kad mana lapa ir ielādēta.
>> Tātad, tiklīdz mana lapa ir ielādēta, šādu funkciju vienmēr ir gatavs.
Tajā teikts, ja objekts tipa jQButton, vai ja klasē jQButton ir noklikšķinājuši,
izpildīt šo funkciju.
Tātad, šeit ir divi anonīmi funkcijas, viens definēts iekšpusē no otras puses.
>> Tātad visu manu kontekstā šeit līdz šim ir mana lapa
kad tas slodzes tas prasa šo funkciju.
Un šī funkcija gaida par pogu, lai uzklikšķināt.
Un, kad poga ir noklikšķinājuši, JQ poga īpaši ir noklikšķinājuši,
tas prasa šis cits funkcija, kas notiek
lai uzstādītu fona krāsa colorDiv būt
kāds teksts ir starp tagiem.
>> Tas ir jēdziens kas poga tika uzklikšķināt.
Bet citādi, tas ir sava veida uzvedas līdzīgi notikumu.
Tas ir tikai tāds pats kā es paustu šo jQuery.
Atkal, tas ir iespējams, vairāk biedējoša lot.
Tas nav tik skaidrs, kā kaut kas līdzīgs event.js,
kas ir varbūt nedaudz vairāk runīgs, taču nedaudz mazāk
biedējoša.
>> Bet, ja mēs pop atpakaļ pār manu pārlūku logu, ja es sāktu clicking-- labi,
kas mainījies uz violetu.
Tas ir zaļa, izmantojot virkni metodi.
Tas ir oranžs, izmantojot notikumu apdarinātājs.
>> Tas ir sarkans, izmantojot jQuery, vai ne?
Tie visi izturas tieši tāds pats.
Viņi vienkārši darīt to, izmantojot atšķirīgas pieejas, lai atrisinātu problēmu.
Tur ir daudz vairāk, lai jQuery tad mēs esam noteikti
gatavojas runāt par šajā video.
Bet, ja jūs vēlaties uzzināt vairāk, varat iet uz jQuery veida dokumentācijas
un iemācīties pavisam nedaudz vairāk par Tas ir ļoti elastīgs bibliotēka, kas
ir liels, lai dara klienta pusē skriptu, piemēram, to, ko mēs darām
manipulēt izskatu un sajust mūsu mājas lapā
ar dokumenta objekta modelis.
Es esmu Doug Lloyd.
Tas ir CS50.