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.