DOUG Lloyd: Në këtë video, ne kemi kërkuar për të thirrur jashtë vëmendje të veçantë për një shumë të veçantë element i JavaScript që ju mund të gjeni të dobishëm kur ju jeni duke filluar për të punuar në manipulimin e faqeve web dhe ndryshuar përmbajtjen e faqes tuaj web të fluturojnë. Dhe kjo është nocioni i Objekti Model Document. Pra, siç e pamë në video tonë në JavaScript, objekte janë shumë fleksibël. Dhe ato mund të përmbajnë fusha të ndryshme. Dhe, edhe pse ne nuk ka shkuar në një shumë të detaje, ato fusha apo prona, se ne do të ngjarë më shumë në mënyrë të përshtatshme e quajnë ata në kontekstin e një objekti, edhe këto prona mund të jenë objekte të tjera. Dhe brenda ato objekte mund të jenë objekte të tjera. 

Ju e keni këtë objekt shumë të mëdha me një shumë të objekteve të tjera në brendësi të saj, i cili lloj i krijon idenë e një pemë të madhe. Tani, objekti dokument është një objekt shumë të veçantë në JavaScript që organizon tërë web tuaj faqe nën këtë lloj të ombrellë e një objekti. Dhe kështu në brendësi të dokumentit objekt janë objekte paraqitur kreu dhe trupin e faqes tuaj web. 

Brenda e atyre që janë të tjera objekte, e të tjera, e të tjera, derisa gjithë faqen tuaj web ka janë organizuar në këtë objekt të madh. Çfarë është kokë këtu, apo jo? E pra, ne e dimë se si të punojnë me objekte në JavaScript. 

Pra, në qoftë se ne kemi një objekt që i referohet të gjithë faqen tonë të internetit, që do të thotë duke e quajtur e saktë Metodat për të manipuluar atë objekt ose modifikimin e caktuar të pronave të saj, ne mund të ndryshojë elementet e faqe ynë programmatically duke përdorur JavaScript në vend që të kodit gjëra me, të themi, HTML. Kështu që këtu është një shembull i një shumë e thjeshtë web faqe, e drejtë? Ajo e mori HTML tags, një kokë. 

Brenda ka një titull, Hello World. Pastaj unë kam një trup. Brenda të kësaj, unë kam tri gjëra të ndryshme. Unë kam një header h2 etiketë, një paragraf, dhe një lidhje. Kjo është një faqe shumë e thjeshtë web. 

E pra, çfarë mund dokumenti kundërshtojë për këtë të duken si? E pra, kjo është pak frikshme ndoshta në fillim. Por kjo është me të vërtetë vetëm një pemë e madhe. Dhe në vetë rrënjët e saj është dokument. 

Brenda dokumenti është një tjetër objekt iu referuar HTML të faqes sime. Dhe HTML i faqes sime është e gjithë kjo. Dhe pastaj brenda HTML objekt, unë kam një objekt kokë, i cili i referohet çdo gjë atje. 

Dhe brenda atje, Unë kam një objekt titullin. Dhe brenda atje, unë kam një tjetër kundërshtojnë kjo është vetëm Hello World. Unë mund të ketë trupin tim përfaqësuar si kjo. 

Brenda trupit tim, unë kam një H2 objekt dhe një objekt për p paragrafi dhe një një objekt për një lidhje. Dhe kështu kjo tërë hierarki mund të përfaqësohet si një pemë të madhe me shumë pak më të vogël gjëra që vijnë nga ajo. Tani, sigurisht, kur ne jemi duke programimit, ne nuk mendoj për gjëra të tilla si një pemë të madhe. Ne duam të shohim aktuale Kodi gjëra të lidhura. 

Dhe për fat të mirë, ne mund të përdorin mjetet tona developer që në fakt të marrë një sy në Dokumenti objekt ky website-it. Dhe le ta bëjmë atë. Kështu që unë e kam hapur një skedë të shfletuesit. 

Dhe unë e kam hapur Mjete Zhvilluesish. Dhe në video e mia në JavaScript, unë përmendi se konsol nuk është vetëm diku ku ne të shtypura informacion, kjo është gjithashtu një vend ku ne mund informatave të dhëna. Në këtë kontekst, çfarë Unë do të them është Unë do të doja të marrë përsëri objektet dokument, kështu që unë mund të fillojë të ketë një vështrim në atë. Pra, si mund ta bëni këtë? E pra, në qoftë se unë dua të organizojnë me të vërtetë bukur, Unë jam duke shkuar për të thënë console.dir, D-i-R. Tani, unë e përdorin console.log për të vetëm të shtypura diçka jashtë shumë e thjeshtë. Por në qoftë se unë dua të organizoj këtë hierarkike si një objekt, Unë dua që ajo lloj i strukturuar si një strukturë directory. 

Kështu që unë dua të console.dir dokument. Unë jam duke shkuar për të goditur Enter. Dhe të drejtën poshtë atë tani, dhe unë do të zoom në këtu, Unë kam marrë këtë dokument përgjigje me një shigjetë të vogël tjetër për të. Tani, kur kam hapur këtë shigjetë, atje do të jetë një shumë gjëra. 

Por, ne jemi duke shkuar për të injorojë shumë e ai dhe lloji i vetëm fokus në pjesën më të rëndësishme, kështu që ne mund të fillojnë për të lundruar këtë dokument. Ka shumë më tepër për DOM se vetëm nyjet dhe nyjet fëmijë prind. Ka shumë gjëra ndihmëse. 

Kështu që unë jam duke shkuar për të hapur këtë ide. Dhe ka një tërësi shumë gjëra që pops up. Por të gjitha që më intereson është të drejtë këtu, nyjet fëmijë. Le të hapur se deri. 

Brenda atje shoh diçka e njohur, HTML. Pra, brenda të dokumentit tonë një nivel poshtë, HTML. I hapur se deri. Çfarë do presim? 

Nëse ju kujtohet nga diagramin tonë, çfarë duhet të gjejmë brenda HTML? Cilat dy nyjet janë nën atë në pemë? Le të gjeni. Ne të hapë HTML. Ne do të shkojmë deri në nyjet e saj fëmijëve. 

Pop se hapur. Ka kokë dhe trup. Dhe ne mund të hapur deri në kokë. Shko tek nyjet e saj fëmijëve. E pra, nuk ka titullin. 

Dhe ne mund të shkoni në dhe më kështu përgjithmonë. Ne mund të bëjmë këtë me trup si. Por ka një mënyrë për ne që të shikojmë në dokumenti i organizuar si një objekt i madh. Dhe nëse ne shikojmë në është një i madh objekt që duket shumë si kod, kjo do të thotë që ne mund të fillojmë për të manipuluar këtë objekt të madh duke përdorur Kodi për të ndryshuar çka tonë Faqja e internetit duket dhe ndjehet si. 

Pra, kjo është një mjet mjaft i fuqishëm ne kemi në dispozicion tani. Pra, si ne vetëm e pa, The Dokumenti objekt në vetvete dhe të gjitha objektet brenda e saj kanë pronat dhe metodat, vetëm si çdo objekt tjetër që ne i kemi punuar me të në JavaScript. Por ne mund të përdorim ato prona dhe përdorin këto metoda për të lloj të Stërvitja poshtë nga dokumenti i madh dhe për të marrë më të ulët dhe më të ulët dhe më të ulët, finer dhe finer kokrra e detaje, deri sa ne të shkoj në një pjesë shumë të veçantë të tonë Web faqe që ne duam të ndryshojmë. 

Dhe kur ne update pronat e Document Object ose telefononi ato metoda, gjëra mund të ndodhë në faqen tonë të internetit. Dhe ne nuk kemi nevojë për të bërë ndonjë freskuese të kenë këto ndryshime hyjnë në fuqi. 

Dhe kjo është një aftësi pretty cool për kemi kur ne jemi duke punuar me kodin. Pra, cilat janë disa prej këtyre pronave që janë pjesë e një objekti dokument? E pra, ju ndoshta pa një disa prej tyre me të vërtetë shpejt si ne u zipping me anë të dokumentit gjigand Objekti ne vetëm e pa në shfletues. 

Por disa prej këtyre pronave mund të jenë gjëra të tilla si HTML brendshme. Dhe ju mund edhe të kujtojnë mua duke përdorur këtë në video JavaScript në fund kur unë ishte duke folur në lidhje me ngjarjet. Çfarë ishte kjo HTML brendshme? E pra, kjo është vetëm ajo që është në mes tags. 

Dhe kështu HTML brendshme, për shembull, i titullit tag, në qoftë se ne e kishte mbajtur në vazhdim e sipër se shembull një moment më parë, do të kishte qenë Hello World. Ky ishte titulli i faqes sonë. Pronat e tjera përfshijnë emrin nyje, të cilat është emri i një HTML element i tillë si titull. ID, e cila është ID atribut i një element HTML. 

Kujtojnë se ne mund të tregojnë posaçërisht Elementet specifike HTML sonë me një atribut ID, e cila zakonisht vjen në dispozicion në kuadër të CSS, në mënyrë specifike. Nyja prind, i cili është një referencë për ajo është vetëm deri mbi mua në DOM. Dhe nyjet e fëmijës, i cili është një referencë për çfarë është poshtë mua. Dhe ne pamë shumë se vetëm duke kërkuar nëpërmjet. Nyjet fëmijë, kjo është se si ne e mori gjithnjë e më poshtë në pemë. 

Atributet, kjo është vetëm një grup e atributet e elementit HTML. Pra, një shembull i atributeve fuqisë të jetë në qoftë se ju keni një tag imazhit, ajo zakonisht ka një atribut burim, ndoshta një lartësi dhe një atribut gjerësi. Dhe kështu që do të jetë vetëm një grup të gjithë nga atributet lidhur me atë element HTML. 

Style është një tjetër që paraqet CSS styling e një elementi të veçantë. Dhe më vonë në këtë Video, ne do të në mënyrë specifike Stili levave për të bërë një çift e ndryshimeve në faqen tonë të internetit. Pra, këto janë disa prona. 

Dhe ka edhe disa Metodat që ne mund të përdorin për të edhe më shpejt ndoshta të izoluar elementet e dokumentit objekt. Ndoshta, më i zhdërvjellët e këtyre qenë getElementById. Kështu që unë mund të them diçka si, sepse mos harroni kjo është një metodë e Dokumentit Object, document.getElementById. 

Dhe brenda këtyre kllapa, specifiko një element HTML me një ID të veçantë atribut që unë kam parë vendosur, dhe unë do të menjëherë shkojnë drejtë në atë element e internetit të përgjithshëm. Kështu që unë nuk kam të shpuar ndoshta poshtë nëpër çdo shtresë të vetme. Unë mund të përdorni vetëm këtë metodë për të gjetur atë, lloj si një raketë e kërkimit të ngrohjes, e drejtë? Ajo vetëm shkon dhe gjen saktësisht se çfarë ajo është duke kërkuar për. 

GetElementsByTagName është shumë të ngjashme në frymë. Ndoshta kjo do të gjeni të gjitha të tags guximshme ose të gjithë tags p dhe më jepni një sërë gjithçka që unë pastaj mund të punojnë me. appendChild shton diçka një nivel poshtë në pemë. 

Kështu që unë mund të shtoni një të tërë të re Elementi një nivel më të ulët. Ose unë mund të hiqni një element që është një nivel më të ulët, si dhe në qoftë se unë dua të fshini diçka nga web faqen time. Tani, një shënim të shpejtë coding dhe një të shpejtë dhimbje koke kursyer shënim, me shpresë. 

getElementById-- D është me të vogla. Unë nuk mund t'ju them se sa herë unë kam përdorur getElementById dhe kapitalizuar D atje. Për shkak se ajo është me të vërtetë e zakonshme. Nëse e shkruajmë ID fjalën, është zakonisht Kapitali I kapital D. Dhe kodi im thjesht nuk punon. Dhe unë nuk mund ta kuptoj se pse. Kjo është një të vërtetë, të vërtetë, të vërtetë bug përbashkët që të gjithë e bën, edhe ekspertët që kanë bërë këtë përgjithmonë. Pra, vetëm të jetë i vetëdijshëm, getElementById, se d është me të vogla. Dhe me shpresë, se ju kursen disa minuta të paktën e dhimbje. 

Pra, çfarë e bën e gjithë kjo na thoni? Ne kemi këto metoda. Ne kemi këto prona. Tani, në qoftë se ne fillojmë nga dokument, dokumenti. çfarëdo, ne tani mund të merrni në ndonjë copë e vetme e faqes tonë të internetit që ne duam të përdorur JavaScript vetëm duke e quajtur këto metoda dhe leveraging pronat që ne gjejmë në vende të ndryshme. 

Kjo mund të merrni gojor, kjo document.getElementByID, ndoshta kanë një emër të gjatë tag, ndoshta ju bëni shumë telefonata më vonë. Gjërat mund të merrni pak gojor. Dhe si programuesit, si ju keni ndoshta shihet në shumë nga këto video, ne nuk i pëlqen gjërat gojor. 

Ne si të jetë në gjendje të bëjë gjëra të shpejt. Pra, ne do të dëshironim një më mënyrë koncize për të thënë diçka. Pra, ky lloj i çon në Nocioni i diçka të quajtur jQuery. Tani jQuery nuk është JavaScript. Kjo nuk është pjesë e JavaScript. 

Ajo është një bibliotekë që u shkrua nga disa programuesit JavaScript rreth 10 vjet më parë. Dhe qëllimi i saj është për të lehtësuar kjo çfarë është quajtur side scripting klient, i cili është në thelb ajo që ne ishim vetëm duke folur në lidhje me manipulime DOM. Dhe kështu që në qoftë se unë të kërkuar për të modifikuar ngjyrën e sfondit e web faqen time, ndoshta një Div veçantë. 

Këtu, unë jam me sa duket duke u ElementById colorDiv. Dhe unë dua të vendosur ngjyra e saj e sfondit. Në qoftë se unë jam vetëm duke përdorur JavaScript të pastër duke përdorur Document Object Model, kjo është një shumë gjëra, apo jo? document.getElementByID colorDiv.style.backgroundColor = e gjelbër. 

Uf. Kjo ishte shumë për të thënë. Kjo është një shumë të tipit, too. Dhe kështu në jQuery, ne mund të themi ndoshta kjo pak më koncize. Tregtia off qenë kjo është ndoshta pak pak më shumë i fshehtë gjithë një e papritur, e drejtë? 

Të paktën gjatë është pak më shpjegues për atë që ne jemi duke bërë. Kjo shenjë dollar, kllapa, të japin kuotën e vetme, hash, colorDiv, e drejtë? Cfare do te thote ajo? E pra, kjo është në thelb vetëm document.getElementByID colorDiv. 

Por kjo është kjo lloj stenografi mënyrë për të bërë atë duke përdorur jQuery. Le të marrin një vështrim tani në disa mënyra të ndryshme që unë mund të vërtetë përdorni këtë Document Object Model për të manipuluar copa të web faqen time. Në veçanti, ne jemi duke shkuar për të punuar në manipulimin ngjyra e një të veçantë Div, colorDiv, në një web faqe. Pra, le të marrin një vështrim në atë. Në rregull. Kështu që unë jam në një faqe. Ajo që quhet test.html kur shkarkoni kjo në qoftë se ju doni të kallajxhi me këtë. Dhe unë kam marrë një bandë e butonat në këtë faqe. Dhe unë jam duke thënë se funksionet individuale për ngjyrën e sfondit, vjollcë, jeshile, portokalli, e kuqe, blu, një funksion i vetëm për ngjyrën e sfondit, mbajtës ngjarje për ngjyrën e sfondit, dhe duke përdorur jQuery. Çfarë jam unë duke folur për kur unë jam duke bërë këtë? Pra, ne kemi parë butonat. Tani, le të marrin një vështrim në disa të kodit burim këtu. Ne do të fillojë me test.html. Funksionet e kështu individuale për sfond ngjyra është ajo që unë kam shtypur këtu. Më lejoni të lëvizni pak. 

Dhe ju do të vëreni se unë kanë përcaktuar këto butona për të thënë kur ky buton është klikuar, thirrni funksionin kthehet vjollcë. Kur ky buton është të klikoni, në vend, quajmë funksioni kthehet e gjelbër, kthehet portokalli, nga ana e kuqe, të kthehet blu. Ju ndoshta mund të mendoj se kjo ndoshta nuk është dizajni më i mirë kuptim, apo jo? 

Ajo do të jetë mirë në qoftë se unë mund të kanë një qasje më të përgjithshme. E pra, së pari ne do të hedhim një vështrim në çfarë janë këto pesë funksione janë document.getElementByID colorDiv.style.background = purple, jeshile, portokalli, e kuqe, dhe blu, respektivisht. Pra, nuk është veçanërisht dizajn të mirë. 

Seti tjetër i butonave Unë kam është që unë kam shkruar një funksion të vetëm të quajtur ndryshojë ngjyrën që me sa duket pranon një varg si argument të saj. Pra, kjo është pak më mirë. Purple, jeshile, portokalli, e kuqe, blu është tani një argument. Kështu që unë kam shkruar një shumë të përgjithshme Rasti funksion JavaScript, e cila mund të duket diçka si kjo. Unë jam duke kaluar në. Kjo ngjyrë ndryshim funksion është duke pritur një argument të quajtur ngjyra. Dhe unë jam duke thënë se të vendosur ngjyra e sfondit të ngjyrës. Kështu që këtu përfaqëson atë që unë kam marrë këtu. Pra, kjo është pak më mirë. 

Por unë mund të jetë në gjendje të të bëjë më mirë se kaq. Në qoftë se ne do të shkojmë poshtë për të marrë një sy në situatën trajtues të ngjarjes, tani të gjitha këto thirrje duken të njëjta. Nëse ju kujtohet për tonë diskutim mbi handlers ngjarje, Unë mund të merrni informacion në lidhje me të cilat e këto butona u klikuar dhe të përdorin atë. 

Dhe kështu në event.JavaScript, unë kam shkruar ngjarje ngjyra ndryshim, e cila kupton cili buton është klikuar. Kjo është linja shkaktojë objekt. Dhe pastaj këtu, ajo merr me të vërtetë gojor. Por ajo që unë jam duke bërë është që unë jam vendosjen sfond ngjyrë të triggerObject inner.HTML. Ky është teksti në në mes tags butonin. 

Dhe atëherë unë me sa duket kam për të vendosur atë jo kapitale. Dhe kjo është se si unë mund të konvertohet në një të tërë varg të vogle në JavaScript përdorur se metoda jo kapitale. Sepse kur kam vendosur një ngjyrë, si unë jam duke u përpjekur për të bërë këtu, ngjyra duhet të jetë mbi të gjitha vogle. 

Por butonin që kam pasur, në qoftë se ne të marrë një sy, vini re se teksti ka shkruar me një P kapital për purple. Dhe pastaj në shumë fund të fundit këtu, me sa duket unë të përpiqet dhe të bëjë këtë duke përdorur jQuery si. Dhe në këtë rast, unë nuk jam në të vërtetë duke e quajtur një funksion në të gjitha. Unë e kam vetëm tha klasës se unë jam duke përdorur për këtë buton është një buton jQ. Kjo eshte. 

Pra, si nuk jQuery di se çfarë jam duke bërë? E pra, kjo është një nga përparësitë çaj disavantazhet e jQuery. Ajo mund të më lejoni të bëj gjëra të shumë koncize, por ndoshta jo si intuitive. Ndoshta ata tre të tjerët bëjnë një pak më shumë kuptim se çfarë unë jam duke bërë. Këtu, edhe pse, çfarë po ndodh? 

Me sa duket, duke krijuar një funksion anonim se ngarkesa sa herë dokumenti im është gati, kështu document.ready, disa funksion do të ndodhë. Në thelb, kur është një dokument i gatshëm? Kjo është kur faqja ime ka ngarkuar. 

Pra, sa më shpejt që faqja ime ka ngarkuar, pas funksion është gjithmonë i gatshëm. Ajo thotë se, në qoftë se një objekt i tipit jQButton, ose nëse klasë jQButton është klikuar, ekzekutojë këtë funksion. Kështu që këtu është dy funksione anonim, njeri percaktohet brendësi të tjetrës. 

Pra, të gjithë kontekstin e mia këtu deri më tani është faqja ime kur ajo ngarkesa ajo e quan këtë funksion. Dhe ky funksion është duke pritur për një buton për të klikuar. Dhe kur një buton është klikuar, jQ button në mënyrë specifike është klikuar, ajo e quan këtë të tjera funksion, e cila do për të vendosur sfond ngjyra e colorDiv të jetë çfarëdo tekst është në mes tags. 

Ky është nocioni i i cili buton është klikuar. Por ndryshe, kjo është lloj i sillet e ngjashme me një ngjarje. Kjo është vetëm në të njëjtën mënyrë unë do të shprehë këtë në jQuery. Përsëri, kjo është ndoshta një më shumë frikësuese. Kjo nuk është aq i qartë sa diçka si event.js, i cili është ndoshta pak më shumë fjalëshumë, por pak më pak frikësuese. 

Por nëse hapet përsëri mbi të shfletuesin tim dritare, në qoftë se unë të fillojë clicking-- mirë, kjo ndryshoi në vjollcë. Kjo është e gjelbër duke përdorur metodën string. Kjo është portokalli duke përdorur mbajtës ngjarje. 

Kjo është e kuqe duke përdorur jQuery, e drejtë? Ata të gjithë sillen saktësisht e njëjtë. Ata vetëm të bëjë atë duke përdorur të ndryshme afrohet për të zgjidhur problemin. Ka shumë më tepër për jQuery atëherë ne jemi sigurisht do të flasim për në këtë video. Por në qoftë se ju doni të mësoni më shumë, ju mund të shkojnë në lloj jQuery e dokumentacionit dhe të mësojnë mjaft pak më shumë në lidhje me kjo bibliotekë shumë fleksibël, i cili është e madhe për të bërë anën e klientit scripting si çfarë ishim duke bërë për të manipuluar sy dhe të ndjehen e faqes tonë të internetit me Document Object Model. Unë jam Doug Lloyd. Kjo është CS50.