DOUG LLOYD: Bideo honetan, nahi dugu arreta bereizi deitzeko oso zehatz bati Javascript-elementu handy aurkitu dezakezu hori denean hasten zaren den web orriak manipulatzeko lan egiteko eta zure web edukia aldatzen unean. Eta hori nozioa da Document Object Model du. Beraz, ikusi gure bideoa garen Ikusteko Javascript-a, objektu oso malguak dira. Eta hainbat arlotan eduki ahal izango dute. Eta nahiz eta ez genuen asko sartu Zehatz-mehatz, eremu edo propietate horiek, ziurrenik gehiago litzateke dugun egokian deitu Objektu baten testuinguruan, nahiz eta propietate horiek beste objektu izan daiteke. Eta objektu horien barruan beste objektu izan daiteke. 

Objektu oso handiak honetako daukazu beste objektu asko batera horren barruan, zein moduko Zuhaitz handi baten ideia hori sortzen. Orain, dokumentu objektu bat Ikusteko Javascript-objektu bat oso berezia Hori zure web osoan antolatzen aterki moduko honen pean orria Objektu baten. Eta beraz, agiri horien barruan Objektu aurkeztuz objektuak daude Burua eta gorputza zure web orrialdetik. 

Horien barruan, beste hauek dira objektuak, eta abar, eta abar, Zure web orria osoa izan arte antolatu da objektu handi honetan. Zer da hemen goitik, ezta? Beno, badakigu nola funtzionatuko Ikusteko Javascript-a objektuekin. 

Beraz, objektu bat izan badugu gure web orria osoa buruzkoa da, hau zuzena deituz esan metodoak objektu hori manipulatzeko edo aldatzea jakin haren propietate, dugu elementu alda daiteke Gure orrialdea programazioaren Javascript ordez beharrik erabiliz , adibidez, HTML gauzak kode-. Hortaz, hona baten adibidea da Oso erraz web orria, ezta? Honez HTML etiketa, buru bat lortu. 

Inside izenburua, kaixo mundua ez da. Ondoren gorputz bat daukat. Horren barruan, tengo Hiru gauza desberdinak. H2 goiburua etiketa bat daukat, paragrafo bat, eta lotura bat. Honek web orri bat oso erraza da. 

Beno, zer dokumentu haiek itxura horretarako aurka? Beno, pixka bat da scary agian lehen. Baina benetan Zuhaitz handi bat besterik ez. Eta hori oso erro at idazkia. 

Barruan dokumentuaren beste bat Objektu nire orriaren HTML aipatuz. Eta nire orriaren HTML hori guztia. Eta gero HTML-barrutik objektu, burua objektu bat daukat, eta hori guztia ez dagokio. 

Eta han barruan, Izenburua objektu bat daukat. Eta han barruan, beste bat izan nuen objektu hori besterik kaixo mundua da. Nire gorputza izan dut Hau atsegin irudikatzen. 

Nire gorputza barrutik, H2 bat dut Objektu eta p paragrafoan dagoen objektu bat eta lotura bat objektu baten bat. Eta hierarkia osoa hau orain zuhaitz handi bat bezala irudikatzen ahal apur bat txikiagoa asko gauzak irteten. Baina, noski, betiere , dugu programatzen ari gara ez gauzak pentsatu Zuhaitz handi baten antzera. Benetako ikusi nahi dugu kodea lotutako. 

Eta zorionez, ahal dugun gure garapen tresnak erabili Begirada bat benetan hartu Atari honetako dokumentu objektu. Eta utzi egin dutela. Beraz ireki zuen ditudan nabigatzailean fitxa bat. 

Eta ireki dut up garapen tresnak. Eta nire video Ikusteko Javascript-a ere, I aipatu kontsola ez da Nonbaiten bakarrik non Informazio inprimatu dugu, gainera, ez da leku bat non sarrerako Informazio ahal dugun. Testuinguru honetan, zer Esan nahi da noa Itzuli nahi nuke dokumentu objektuak, beraz, begirada bat izan nahi dut. Beraz, nola liteke hori? Beno, bada nahi dut antolatzen da benetan nicely, Console.dir, D-I-R esan noa. Orain, console.log erabili besterik inprimatu nahi dut zerbait oso erraza da. Baina hau antolatu nahi badut hierarkikoki objektu bat bezala, Sort egituratuta nahi dut zerbitzuaren egitura bezala. 

Beraz dokumentuaren console.dir nahi dut. Sartu sakatu dut. Eta eskuineko bere azpian, orain, eta mapan handiago dut hemen, Dut erantzunez dokumentu honetan gezi txiki bat da hurrengo. Orain, gezi hau ireki nuen, Ez da gauza asko izango. 

Baina ari gara asko alde batetara joan la da eta foku-mota besterik garrantzitsuena parte, dugu, beraz, dokumentu honetan nabigatzen has daiteke. Askoz baino DOM gehiago besterik guraso nodo eta ume nodoak. Ez dago gauza laguntzaileak asko da. 

Beraz, ez dut hau irekitzeko gora. Eta asko oso bat da stuff azalduko da. Baina arduratu dut guztiak hementxe, ume nodoak. Utzi duten zabalduko da sortu. 

Han barruan ikusten dut zerbait ezaguna, HTML. Beraz, gure dokumentuaren barruan Maila bat behera, HTML. Hori ireki dut. Zer ari gara zain? 

Gogoratzen baduzu, gure diagrama batetik, zer aurkitu behar dugu HTML barruan? Zer bi nodo da beherago daude zuhaitzean? Jakin dezagun. Ireki dugu HTML. Jaitsiko gara bere seme-alaba nodo. 

Pop irekita dagoela. Badira burua eta gorputza da. Eta ireki ahal izango dugu buruan. Bere seme-alaba nodo Joan. Beno, ez dago izenburua da. 

Eta joan izan dugu eta Hau atsegin betiko. Horretarako izan dugu gorputzarekin baita. Baina ez digu begiratzeko modu bat da objektu handi bat bezala antolatu dokumentua. Eta begiratzen dugu at bada handi bat da asko begiratzen duten objektu kodea bezala, horrek esan nahi du, ezin dugu hasteko Objektu handi hau manipulatzeko erabiliz kode zer aldatu den gure Webgune itxura eta sentitzen bezala. 

Beraz, hori tresna nahiko indartsua da gure eskura dugu orain. Beraz, ikusi dugun bezala, etorri dokumentuaren objektu bera eta, horren barruan objektu guztiak propietate eta metodo dute, besterik ez Hori dugu beste edozein objektu bezala izan Javascript duten lanean. Baina propietate horiek erabili ahal izango dugu eta metodo horiek erabiltzeko moduko zulatzeko behera dokumentu handi batetik eta txikiagoak eta txikiagoak eta txikiagoak, finagoa eta finagoa aleak xehetasun-, genuen arte pieza oso zehatz bat lortzeko gure hori aldatu nahi dugu web orria. 

Eta noiz propietate eguneratu dugu Dokumentuaren objektu edo metodo horiek deitu, Gauzak liteke gure web orrian gertatuko. Eta ez dugu behar freskagarri edozein egin Aldaketa horiek hartu eraginik izan. 

Eta hori nahiko cool gaitasuna da kode batekin ari gara lanean dute. Beraz, zer dira propietate horietako batzuen duen dokumentu objektu baten zati dira? Beno, ziurrenik ikusi duzu bat Horietako pare benetan azkar konprimituta genuenaren dokumentu erraldoiaren bidez Objektu web nabigatzailea ikusi besterik ez dugu. 

Baina propietate horiek pare bat barruko HTML bezalako gauza izan liteke. Eta nahiz eta baliteke gogoratzen dit honek JavaScript bideoa erabiliz oso amaieran dudanean gertaerei buruz hitz egiten zen. Zein izan da barruko HTML hau? Beno, besterik ez da zer da tags artean. 

Eta beraz, barruko HTML, adibidez, izenburua du Etiketa, mantendu izan bagenu ere joan Adibidez, duela une bat, Mundu izango zatekeen kaixo. Hori da gure orriaren izenburua izan zen. Beste ezaugarri besteak beste nodo izena, eta bertan HTML baten izena da elementu izenburu gisa, hala nola. NAN, zein identifikazio da HTML elementu bat egozten diote. 

Gogoratu ezin dugula bereziki adierazi Gure HTML elementu espezifikoak ID atributu bat, ohi dituzten erabilgarria dator CSS testuinguru batean, zehazki. Guraso nodo, zein erreferentzia bat da Zer da besterik me gainetik gora DOM ere. Eta ume nodo, hau da, bat Zer da niretzat behean behera erreferentzia. Eta hori asko ikusi ditugu besterik bidez bilatzen. Child nodoak, hori nola lortu dugu gero eta apalagoa zuhaitz sartu. 

Atributuak, hori besterik array bat HTML elementu egozten. Beraz atributuak adibide bat gerta daiteke izan Image etiketa bat izanez gero, normalean iturburu-attribute bat du, agian, altuera eta zabalera atributu bat. Eta beraz, ez litzateke, besterik gabe, bateria izango ezaugarri-guztien HTML elementu horrekin. 

Beste estilo bat dela argi adierazten du CSS du elementu jakin baten Sorozabal. Eta beranduago honetan on bideo, zehazki egingo dugu leverage estilo pare bat egiteko Gure webgunean egindako aldaketak. Beraz, horiek propietate batzuk. 

Eta badira ere metodoak ahal dugun erabili halaber azkarrago agian isolatzea Dokumentuaren Objektu elementu. Agian, gehien polifazetikoa getElementById izateaz horiek. Beraz, agian antzeko zerbait esan dut, izan ere, Gogoan izanik Dokumentuaren metodo bat da Objektu, document.getElementById. 

Eta barruan Parentesi horiek, zehaztu NAN jakin batekin HTML elementu bat egozten diote aurrez Dudan ezarri, eta berehala egingo dut go elementu hori izateko eskubidea Webgune globala bezala. Alegia, ez dute agian zulatzeko geruza bakoitzean bakarra bitartez behera. Besterik ez dut erabili ahal metodo hau aurkitu, Sort bero bila misil bat bezala, ezta? Besterik doa eta aurkitzen du zehazki zer da bilatzen. 

GetElementsByTagName da oso antzeko espirituz. Agian hau guztia aurkituko litzateke tags lodia edo p etiketa guztietan eta eman dit dena array bat dudala zezaketen batekin lan. appendChild zerbait gehitzen Maila bat zuhaitzean behera. 

Beraz berria oso bat gehitu ahal izango dut elementu maila bat baxuagoa. Edo hori da elementu bat kendu ahal izango dut Maila bat baxuagoa baita nahi badut Nire web orritik zerbait ezabatzeko. Orain, bat azkar kodetze ohar eta azkar bat buruko mina ohar aurreztea, zorionez. 

getElementById-- d minuskula da. Ezin dizut esan zenbat aldiz I duzu Erabilitako getElementById eta larriz d bertan. Benetan ohikoa delako. Hitz ID idazten badugu, ez da Ohi capital I kapital D. Eta nire kodea besterik ez du funtzionatzen. Eta ezin dut irudikatu zergatik. Hau da, benetan, benetan, benetan bug komun denek egiten duten, nahiz eta adituek duten dira betiko lan hau egiteko. Beraz, kontuan izan, getElementById, d duten minuskulaz da. Eta zorionez, aurrezten duzu hainbat heartache gutxienez minutu. 

Beraz, zer hori guztia esaten digu? Metodo hauek ditugu. Propietate hauek ditugu. Orain, hasteko bada dugun dokumentu, dokumentu. edozein dela ere, gaur egun ezin dugu inolako iristeko gure web orria pieza bakar Ikusteko Javascript-a erabiliz nahi dugun besterik metodo horiek deituz eta propietate aprobetxatuz aurkitu dugun leku desberdinetan. 

Hau wordy lor daiteke, hau document.getElementByID, Agian marka luzea dute, agian, dei gehiago egin duzu geroago. Gauzak pixka bat wordy lor daiteke. Eta programatzaile gisa, duzun bezala ziurrenik bideo horietako asko ikusi, ez dugu nahi wordy gauza. 

Gauzak azkar egiteko gai izan nahi dugu. Beraz, gehiago bat nahi genuke zehatza modu zerbait esateko. Beraz eramaten moduko honetan Zerbait nozioa jQuery izeneko. Orain jQuery ez da Javascript. Ez da JavaScript zati da. 

Liburutegi bat izan zen idatzia da Javascript programatzaileak batzuk Duela 10 urte inguru. Eta bere helburua, hau zer da sinplifikatzeko bezeroaren aldeko scripting izenekoa, da, funtsean, zer besterik izan ginen buruz hitz egiten DOM manipulazio batera. Eta hala bada aldatu nahi nuen hondo nire web orria kolorea, agian, Div partida bat. 

Hemen, itxuraz naiz lortzean dut ElementById colorDiv. Eta bere background color ezarri nahi dut. Besterik Javascript pure dut erabiltzen bada Dokumentuaren Objektu Modelo erabiliz, Hori gauza handia da, ezta? document.getElementByID colorDiv.style.backgroundColor = berdea. 

Whew. Hori zeresanik izan zen. Zerbait idatzi asko da, gehiegi. Eta beraz, jQuery, dugu, agian, esan daiteke hau pixka bat gehiago laburki. Merkataritzako da baloia off etorri da agian pixka bat bit gehiago críptica Bat-batean, ezta? 

Gutxienez luzea da, pixka bat gehiago zer egiten ari garen moduan azaltzen. Honek dolarraren ikurra, parentesi barra arrunta, hash, colorDiv, ezta? Zer esan nahi du horrek? Beno, hori da, funtsean, besterik gabe, document.getElementByID colorDiv. 

Baina takigrafia moduko hau da jQuery erabiliz horretan egiten. Dezagun, besterik gabe, begirada bat modu ezberdinetan pare batean Egia esan, agian dut Dokumentuaren Objektu hau erabiltzeko Model nire gune piezak manipulatzeko. Hain zuzen ere, goazen manipulatzeko beharreko lan jakin baten kolorea Div, colorDiv, web orri baten gainean. Beraz, dezagun begirada bat. Ados. Beraz nago orri batean nuen. Deitzen test.html deskargatzen duzun horri hau tinker nahi baduzu. Eta Dut mordo bat Orrialde honetako botoiak. Eta naiz funtzio banakako esaten dut atzeko kolorea morea, berdea, laranja, gorria, urdina, funtzio bakar background color for, gertaera kudeatzailea atzeko kolorea, eta jQuery erabiliz. Zer ari naiz buruz hitz egiten hori egiten ari naiz? Beraz, ikusi dugu botoiak. Orain, dezagun begirada bat iturburu-kodea hemen batzuk. Test.html batekin hasiko gara. Atzerako funtzio Beraz banakako kolorea da hemen I Idatzi. Let me apur bat korrituko da. 

Eta nik hori nabarituko duzu Horien botoiak definitu dute botoi honetan klik egitean esateko, buelta morea deitu funtzioa. Egin botoi hau sakatu, baizik eta, deitu funtzioa aktibatzeko berdea, piztu laranja, gorria piztu, piztu urdina. Ziurrenik asmatzea hori ez da beharbada onena diseinua Zentzu da, ezta? 

Polita izango litzateke, ahal banu planteamendu orokorrago bat izatea. Beno, lehenengo begirada bat hartuko dugu zer bost funtzio horiek dira document.getElementByID colorDiv.style.background = morea, berdea, laranja, gorria, eta urdina, hurrenez hurren. Beraz, ez da bereziki diseinu onenak. 

Hurrengo botoiak multzoa I izan da idatzi dut izeneko funtzio bakar bat kolorez aldatzen diren itxuraz Kate bat bere argumentu bezala onartzen. Beraz, hau da, pixka bat hobea. Morea, berdea, laranja, gorria, urdina da orain argudio bat. Beraz orokorrago bat idatzi dut Kasu Javascript funtzioa, honen antzeko zerbait begiratu dezake. Pasatzen dut. Funtzioaren kolore aldaketa hau da kolore izeneko argumentu bat espero. Eta ezarri esaten dut egin hondo kolorea da. Hortaz, hona hemen zer dut adierazten du. Beraz, hori da pixka bat hobea. 

Baina gauza izan liteke I ez da hori baino hobea. Jaitsiko gara begirada bat hartu behar bada gertaera kudeatzailea egoera hartan, orain dei horien guztien itxura bera. Ba Gogoratzen baduzu, gure gertaera kudeatzaileen buruzko eztabaida, Zein inguruko informazioa eskuratu ahal izango dut Horien botoiak sakatu eta erabiltzen duten. 

Eta beraz event.JavaScript, eta ez dut idatzizko aldaketa kolorea gertaera, zifrak bertan botoia zen bertan klik. Hori trigger objektu lerroan. Eta gero, hara, benetan wordy daukala. Baina, zer egiten ari naiz da naiz Atzeko planoan ezarriz triggerObject inner.HTML den kolorea. Hori testua da botoia etiketa artean. 

Eta gero, itxuraz daukat ezarri minuskulan. Eta hori oso bat nola bihurtu ahal izango dut katea Javascript minuskulan erabiliz Metodo hori minuskulan. Denean kolore bat ezarri dudalako, hemen egiten saiatzen ari naiz gisa, kolorea du minuskulaz egon behar. 

Baina botoia hori izan nuen, beste itxura hartzen badugu, nabarituko testua han da capital morea P idatzita. Eta gero, oso beheko hemen, I itxuraz saiatu eta egin jQuery erabiliz honetan baita. Eta, kasu honetan, ez naiz benetan deituz funtzio guztietan. Besterik ez dut esan klasea naiz botoi hau erabiliz JQ botoi bat da. Hori da. 

Beraz, nola daki jQuery zer egiten ari naiz? Beno, hau da abantaila bat jQuery desabantailak barra. Gauzak egiteko aukera ematen dit daiteke Oso laburki, baina agian ez gisa intuizioa. Agian horiek beste hiru egin a bit gehiago senti zer egiten ari naiz. Hemen, ordea, zer gertatzen da? 

Antza denez, sortzen Funtzio anonimoak zamak direnean nire dokumentuan prest, beraz document.ready da, funtzio batzuk gertatuko da. Funtsean, dokumentu bat prest dago? It nire orria kargatu da. 

Beraz, ahalik eta azkarren nire orria kargatu duen moduan, funtzioa honako prest dago beti. Esaten du, mota jQButton objektu bat bada, edo klase jQButton ditu bertan klik badira, funtzio hau exekutatu. Hortaz, hona hemen bi funtzio anonimoa da, bata bestearen barruan definitutako. 

Beraz, nire testuinguru osoa Hemen, orain arte ez da nire orria lukeen kargatzen denean funtzio hau deitzen da. Eta funtzio hau zain dago botoi bat, bertan klik egin behar da. Eta botoi bat klik egitean, JQ botoia zehazki klik egiterakoan, beste hau deitzen da funtzioa, hau da, joan hondo ezartzeko colorDiv kolorea behar izan edozein dela testu tags artean dago. 

Hau ideia da bertan botoia sakatu. Baina bestela, hau da Ordena Gertaera baten antzekoa portatzen. Era horixe bera da I hau adierazi nahi jQuery. Berriz ere, seguruenik bat Asko gehiago beldurra. Ez da bezain argi event.js antzeko zerbait, hau da, agian, pixka bat gehiago , baina pixka bat xeheak gutxiago beldurra. 

Baina atzera irekiko dugu nire nabigatzailea baino gehiago bada leiho, clicking-- hasi badut ondo, morea aldatu. Hau da berdea katea metodoa erabiliz. Hau laranja da gertaera kudeatzailea erabiliz. 

Hau gorria da jQuery erabiliz, ezta? Berdin-berdin jokatzen dute guztiek. Egiten dute, besterik gabe, desberdinak erabiliz hurbiltzen arazoa konpontzeko. Askoz gehiago Orduz jQuery zalantzarik gara bideo honetan buruz hitz egiteko. Baina gehiago jakin nahi baduzu, ezin duzu jQuery dokumentazioa moduko joan eta ikasi nahiko pixka bat gehiago liburutegi oso malgua hau, eta horrek da bezero aldean egiten handia hala nola, zer egiten ari ginen bezala scripting Begirada manipulatzeko eta gure web orriaren sentitzen the Document Object Model batera. Naiz Doug Lloyd. Hau CS50 da.