DOUG LLOYD: Katika video hii, tulitaka kuita kipaumbele tofauti kwa sana hasa kipengele cha JavaScript kwamba unaweza kupata sehemu wakati wewe ni mapya kufanya kazi ya kufanyia kurasa za mtandao na kubadilisha maudhui ya mtandao ukurasa wako juu ya kuruka. Na hiyo ndiyo dhana ya Document Object Model. Hivyo kama tulivyoona katika sehemu yetu juu ya JavaScript, vitu ni rahisi sana. Na wanaweza vyenye nyanja mbalimbali. Na ingawa hatukuwa kwenda katika mengi ya undani, mashamba hayo au mali, kwamba tunataka pengine zaidi ipasavyo kuwaita katika mazingira ya kitu, hata mali hizo inaweza kuwa vitu vingine. Na ndani ya vitu wale inaweza kuwa vitu vingine. 

Una hii kitu kikubwa sana na mengi ya vitu vingine ndani yake, ambayo ni aina ya inajenga wazo hili la mti mkubwa. Sasa, hati kitu ni kitu maalum sana katika JavaScript kwamba kupanga mtandao wako wote ukurasa chini ya aina hii ya mwavuli wa kitu. Na hivyo ndani ya hati kitu ni vitu kuwasilisha kichwa na mwili wa mtandao ukurasa wako. 

Ndani ya wale wengine vitu, nakadhalika, nakadhalika, mpaka nzima mtandao ukurasa wako ina yaliandaliwa katika hii kitu kubwa. Nini kichwa hapa, sawa? Naam, sisi kujua jinsi ya kufanya kazi na vitu katika JavaScript. 

Hivyo kama tuna kitu kwamba inahusu yetu mtandao mzima ukurasa, kwamba ina maana kwa kupiga sahihi mbinu kuendesha kwamba kitu au kubadilisha baadhi ya ya tabia yake, sisi Unaweza kubadilisha mambo ya ukurasa wetu programmatically kutumia JavaScript badala ya kuwa na kanuni ya mambo na, kusema, HTML. Hivyo hapa ni mfano wa rahisi sana mtandao ukurasa, haki? Ni got tags, kichwa. 

Ndani ya huko ni cheo, hujambo dunia. Basi nina mwili. Ndani ya kwamba, nina mambo matatu tofauti. Nina h2 kichwa tag, aya, na kiungo. Hii ni mtandao rahisi sana ukurasa. 

Naam, ni nini wapate hati kitu kwa kuangalia hii kama? Naam, ni kidogo inatisha labda kwa mara ya kwanza. Lakini ni kweli tu mti mkubwa. Na kila mzizi wa ni hati. 

Ndani ya hati ni mwingine kitu akimaanisha HTML wa ukurasa wangu. Na HTML ya ukurasa wangu ni haya yote. Na kisha ndani ya HTML kitu, nina kichwa kitu, ambayo inahusu kila kitu hapo. 

Na ndani ya huko, Nina kichwa kitu. Na ndani ya huko, mimi na mwingine kitu hiyo ni hujambo dunia. Mimi naweza kuwa mwili wangu kuwakilishwa kama hii. 

Ndani ya mwili wangu, nina h2 kitu na p kitu kwa aya na kitu kwa kiungo. Na hivyo uongozi huu mzima inaweza kuwakilishwa kama mti mkubwa kwa kura ya ndogo ndogo mambo kuja nje ya hiyo. Sasa, bila shaka, wakati sisi ni programu, sisi sidhani ya mambo kama mti mkubwa. Tunataka kuona halisi kificho kuhusiana mambo. 

Na kwa bahati nzuri, tunaweza kutumia developer zana yetu kwa kweli tuangalie tovuti hii hati kitu. Na hebu kufanya hivyo. Hivyo nimekuwa imefungua browser tab. 

Na nimekuwa imefungua Developer Tools. Na katika video yangu juu ya JavaScript, mimi alieleza kuwa console si tu mahala fulani ambapo sisi magazeti ya habari, pia ni mahali ambapo tunaweza maelezo pembejeo. Katika hali hii, ni nini Mimi nina kwenda kusema ni Ningependa kupata nyuma vitu hati, hivyo siwezi kuanza kuwa na kuangalia saa yake. Hivyo jinsi gani mimi kufanya hivyo? Naam, kama nataka kuandaa yake kweli nicely, Mimi nina kwenda kusema console.dir, D-I-R. Sasa, mimi kutumia console.log kwa magazeti tu nje kitu rahisi sana. Lakini kama nataka kuandaa hii hierarchically kama kitu, Nataka ni aina ya muundo kama muundo directory. 

Hivyo nataka console.dir hati. Mimi nina kwenda hit Enter. Na haki chini yake sasa, na mimi itabidi kuvuta hapa, Mimi nimepata hii hati majibu na mshale mdogo karibu na hiyo. Sasa, wakati mimi kufungua mshale huu, kuna kwenda kuwa mengi ya mambo ya ajabu. 

Lakini tunakwenda kupuuza mengi yake na aina tu ya lengo juu ya sehemu muhimu, hivyo sisi unaweza kuanza navigate waraka huu. Kuna mengi zaidi kwa DOM kuliko tu mzazi nodi na nodi mtoto. Kuna mengi ya mambo saidizi. 

Hivyo nina kwenda kwa kufungua hili. Na kuna mengi yote ya mambo ambayo pops up. Lakini yote mimi huduma ya juu ni haki hapa, nodes mtoto. Hebu kufungua kwamba up. 

Ndani ya huko naona kitu utambuzi, HTML. Hivyo ndani ya hati wetu ngazi moja chini, HTML. Mimi wazi kwamba up. Je, ni sisi wanatarajia? 

Kama unakumbuka kutoka mchoro wetu, tunapaswa kupata ndani ya HTML? Nini nodes mbili ni chini yake katika mti? Hebu kujua. Sisi kufungua HTML. Sisi kwenda chini kwa mtoto wake nodes. 

Kisasa kuwa wazi. Kuna kichwa na mwili. Na tunaweza kufungua kichwa. Kwenda kwa mtoto wake nodes. Naam, kuna jina. 

Na tungeweza kuendelea na na maisha haya ya milele. Tuliweza kufanya hivyo na mwili pia. Lakini kuna njia kwa sisi tuangalie hati iliyoandaliwa kama kitu kubwa. Na kama sisi kuangalia ni kubwa kitu kwamba inaonekana mengi kama kanuni, hiyo ina maana kwamba tunaweza kuanza kuendesha hii kitu kubwa kwa kutumia kificho kubadili kile wetu tovuti inaonekana na anahisi kama. 

Hivyo hiyo ni pretty zana yenye nguvu tuna tulizonazo sasa. Hivyo kama sisi tu kuona, hati kitu yenyewe na wote wa vitu ndani yake kuwa na mali na mbinu, tu kama kitu nyingine yoyote ambayo tumekuwa ikifanya kazi na katika JavaScript. Lakini tunaweza kutumia mali hizo na kutumia njia hizo aina ya kuchimba chini kutoka hati kubwa na kupata chini na chini na chini, finer na finer nafaka cha zaidi, mpaka sisi kupata kipande maalum sana ya yetu ukurasa wa mtandao kwamba tunataka mabadiliko. 

Na wakati sisi update mali ya Hati Kitu au piga mbinu hizo, mambo kinaweza kutokea kwenye mtandao wetu ukurasa. Na hatuna haja ya kufanya lolote kuogea kuwa mabadiliko hayo kufanya kazi. 

Na hiyo ndiyo uwezo pretty baridi kwa na wakati sisi ni kufanya kazi na kanuni. Kwa hiyo kile ni baadhi ya mali hizi ambazo ni sehemu ya hati kitu? Naam, pengine aliona wanandoa wao kweli haraka tulipokuwa zipping kupitia hati kubwa kitu sisi tu kuona katika kivinjari. 

Lakini michache ya mali hizi inaweza kuwa vitu kama HTML ndani. Na unaweza hata kukumbuka mimi kutumia hii katika JavaScript video mwishoni sana wakati mimi alikuwa akizungumza kuhusu matukio. Ilikuwa HTML huu ndani nini? Naam, ni tu nini katika kati ya vitambulisho. 

Na hivyo HTML ndani, Kwa mfano, ya cheo tag, kama sisi alikuwa naendelea kwenda katika kuwa mfano wakati iliyopita, Ingekuwa hujambo dunia. Hiyo ilikuwa jina la ukurasa wetu. Mali nyingine pamoja na jina nodi, ambayo ni jina la HTML kipengele kama vile jina. ID, ambayo ni ID wanampa ya HTML kipengele. 

Kumbuka kwamba tunaweza hasa zinaonyesha vipengele maalum HTML yetu na kitambulisho sifa, ambayo kwa kawaida huja katika Handy katika mazingira ya CSS, hasa. Nodi mzazi, ambayo ni kumbukumbu ya nini tu juu juu yangu katika DOM. Na mtoto nodes, ambayo ni kumbukumbu ya nini chini chini yangu. Na tuliona mengi ya kwamba kuangalia tu kwa njia ya. Nodes mtoto, hiyo ni jinsi tulipata chini na chini katika mti. 

Sifa, hiyo ni safu ya sifa ya HTML kipengele. Hivyo mfano wa sifa nguvu kuwa kama una tag picha, ni kawaida ina chanzo sifa, labda urefu na upana sifa. Na hivyo kwamba ingekuwa tu kuwa safu ya yote ya sifa zinazohusiana na kwamba HTML kipengele. 

Style ni mtu mwingine kwamba haina kuwakilisha CSS styling ya kipengele fulani. Na baadaye katika hii video, tutaweza mahsusi kujiinua style ya kufanya wanandoa mabadiliko ya tovuti yetu. Basi hizo tabia ya baadhi ya. 

Na pia kuna baadhi mbinu kwamba tunaweza kutumia ili pia kwa haraka zaidi labda kujitenga mambo ya Document Object. Pengine, Versatile wa haya getElementById kuwa. Hivyo mimi anaweza kusema kitu kama, kwa sababu kumbuka ni njia ya Document Kitu, document.getElementByID. 

Na ndani ya mabano hizo, taja HTML kipengele na kitambulisho fulani wanampa kwamba nimepata awali kuweka, na mimi itabidi mara moja kwenda haki ya kuwa kipengele ya tovuti kwa ujumla. Hivyo sina kwa labda kuchimba chini kupitia kila safu moja. Naweza tu kutumia njia hii ya kupata hiyo, aina ya kama joto kutafuta makombora, sawa? Ni tu unaendelea na anaona nini hasa ni kutafuta. 

GetElementsByTagName ni sawa sana katika ulimwengu wa kiroho. Labda hii itakuwa kupata yote ya vitambulisho ujasiri au yote ya vitambulisho p na kunipa safu ya kila kitu niweze kisha kazi pamoja. appendChild anaongeza kitu ngazi moja chini ya mti. 

Hivyo siwezi kuongeza mpya nzima kipengele cha moja chini. Au naweza kuondoa kipengele hiyo ni ngazi moja chini na pia kama nataka kufuta kitu kutoka mtandao ukurasa wangu. Sasa, haraka coding kumbuka na haraka kichwa kuokoa kumbuka, hopefully. 

getElementById-- d ni ndogo. Siwezi kukuambia jinsi mara nyingi nina kutumika getElementById na mtaji d huko. Kwa sababu ni kweli ya kawaida. Kama sisi kuandika neno ID, ni Kwa kawaida mji mkuu mimi mji mkuu D. Na kanuni yangu tu haifanyi kazi. Na siwezi takwimu kwa nini. Hii ni kweli, kweli, kweli mdudu kawaida kwamba kila mtu hufanya, hata wataalam kwamba wana wamekuwa wakifanya hii milele. Hivyo tu kuwa na ufahamu, getElementById, kwamba d ni ndogo. Na natumaini kwamba Huwaokoeni kadhaa angalau dakika ya maumivu ya moyo. 

Basi ni nini yote haya kutuambia? Tuna njia hizi. Tuna mali hizi. Sasa, kama sisi kuanza kutoka hati, hati. chochote, tunaweza sasa kupata yoyote kipande moja ya mtandao wetu ukurasa kwamba tunataka kutumia JavaScript tu kwa kupiga hizi mbinu na leveraging mali kwamba tunapata katika maeneo mbalimbali. 

Hii inaweza kupata wordy, hii document.getElementByID, labda kwa muda mrefu jina tag, labda wewe kufanya wito zaidi baadaye. Mambo wanaweza kupata kidogo wordy. Na kama programmers, kama wameweza pengine kuona katika mengi ya video hizi, sisi si kama mambo wordy. 

Sisi kama kuwa na uwezo wa kufanya mambo haraka. Hivyo tungependa zaidi mafupi ya njia ya kusema kitu. Hivyo aina hii ya kuingilia kwa dhana ya kitu kinachoitwa jQuery. Sasa jQuery si JavaScript. Siyo sehemu ya JavaScript. 

Ni maktaba ambayo iliandikwa na baadhi programmers JavaScript muda wa miaka 10 iliyopita. Na lengo lake ni kurahisisha hii nini aitwaye mteja upande scripting, ambayo kimsingi ni nini tulikuwa tu kuzungumza juu na DOM manipulations. Na hivyo kama nilitaka kurekebisha rangi ya asili ya mtandao ukurasa wangu, labda Div maalum. 

Hapa, mimi nina inaonekana kupata ElementById colorDiv. Na mimi nataka kuweka historia yake ya rangi. Kama mimi nina kutumia safi tu JavaScript kutumia Document Object Model, hiyo ni mengi ya mambo, sawa? document.getElementByID colorDiv.style.backgroundColor = kijani. 

Whew. Hiyo ilikuwa ni mengi ya kusema. Ni mengi na aina, pia. Na hivyo katika jQuery, tunaweza labda kusema hii kidogo zaidi concisely. Biashara mbali ya kuwa ni labda kidogo kidogo cryptic zaidi kwa ghafla, sawa? 

Angalau kwa muda mrefu ni kidogo zaidi maelezo kama kwa nini sisi ni kufanya. Hii ishara dola, mabano, moja kunukuu, hash, colorDiv, sawa? Hiyo ina maana gani? Naam, hiyo ni kimsingi tu document.getElementByID colorDiv. 

Lakini ni aina hii ya shorthand njia ya kufanya hivyo kwa kutumia jQuery. Hebu tuangalie sasa tu katika michache ya njia mbalimbali ili nipate kwa kweli kutumia hii kitu Document Mfano kuendesha vipande vya tovuti yangu. Hasa, tunakwenda kuwa kazi ya kufanyia rangi ya pekee Div, colorDiv, katika ukurasa wa mtandao. Basi hebu tuangalie hiyo. Sawa. Kwa hiyo mimi nina juu ya ukurasa. Ni wito test.html wakati wewe download hii kama unataka tinker na hii. Na mimi nimepata kundi la kifungo juu ya ukurasa huu. Na mimi kusema kazi ya mtu binafsi kwa rangi ya asili, zambarau, kijani, machungwa, nyekundu, bluu, kazi moja kwa rangi ya asili, tukio handler kwa rangi ya asili, na kwa kutumia jQuery. Nataka kuzungumza juu wakati mimi nina kufanya hili? Hivyo tumeona vifungo. Sasa, hebu tuangalie baadhi ya chanzo kanuni hapa. Tutaweza kuanza na test.html. Kazi hivyo mtu binafsi kwa asili rangi ni nini nimekuwa typed hapa. Hebu kitabu kidogo. 

Na utasikia taarifa kwamba mimi kuwa defined vifungo hizi kusema wakati kifungo hii ni clicked, piga kazi kugeuka rangi ya zambarau. Wakati kifungo hii ni click, badala yake, piga kazi kugeuka rangi ya kijani, kugeuka rangi ya machungwa, kugeuka nyekundu, kugeuka bluu. Pengine unaweza nadhani kwamba hii labda si kubuni bora maana, sawa? 

Itakuwa nzuri kama mimi naweza kuwa na mbinu zaidi kwa ujumla. Naam, kwanza tutaweza kuangalia nini kazi hizo tano ni document.getElementByID colorDiv.style.background = zambarau, kijani, machungwa, nyekundu, na bluu, kwa mtiririko huo. Hivyo, si hasa kubuni bora. 

Seti ya pili ya vifungo I have ni nimekuwa imeandikwa kazi moja inayoitwa mabadiliko ya rangi ya kwamba inaonekana anapokea kamba kama hoja yake. Hivyo hii ni kidogo kidogo bora. Zambarau, kijani, machungwa, nyekundu, bluu ni sasa hoja. Hivyo nimekuwa imeandikwa zaidi ya jumla kesi JavaScript kazi, ambayo inaweza kuangalia kitu kama hii. Mimi nina kupita katika. Hii rangi mabadiliko kazi ni wanatarajia hoja aitwaye rangi. Na mimi kusema kuweka rangi ya asili kwa rangi. Hivyo hapa inawakilisha nini mimi nimepata hapa. Hivyo hiyo ni kidogo bora. 

Lakini mimi ili kuwa na uwezo wa kufanya vizuri zaidi kuliko hiyo. Kama sisi kwenda chini kwa kuchukua kuangalia katika hali tukio handler, sasa simu hizi zote kuangalia huo. Kama unakumbuka kwa wetu mjadala juu ya tukio handlers, Siwezi kupata taarifa wanafunzi kuhusu nani kati vifungo hizi ilikuwa clicked na kutumia hiyo. 

Na hivyo katika event.JavaScript, nimekuwa Imeandikwa tukio mabadiliko ya rangi, ambayo takwimu za nje ambayo kifungo ilikuwa clicked. Hiyo ni trigger kitu mstari. Na kisha hapa, ni kweli anapata wordy. Lakini nini mimi kufanya ni mimi nina kuweka historia rangi ya triggerObject inner.HTML. Hiyo ni maandishi katika kati ya vitambulisho kifungo. 

Na kisha mimi inaonekana kuwa kuweka kwa Herufi za chini. Na hiyo ni jinsi mimi inaweza kubadilisha nzima kamba na Herufi za chini katika JavaScript kutumia njia ambayo kwa Herufi za chini. Kwa sababu wakati mimi kuweka alama, kama mimi nina kujaribu kufanya hapa, rangi ina kuwa zote lowercase. 

Lakini kifungo kwamba nilikuwa, kama sisi kuchukua mwingine kuangalia, taarifa kwamba kuna maandishi Imeandikwa na mji mkuu wa P kwa zambarau. Na kisha saa sana chini hapa, mimi inaonekana kujaribu na kufanya hivyo kwa kutumia jQuery pia. Na katika kesi hii, mimi si kweli wito kazi wakati wote. Nilivyosema tu darasa kwamba mimi nina kutumia kwa kifungo hii ni kifungo JQ. Hiyo ni. 

Hivyo ni jinsi gani jQuery kujua nini mimi kufanya? Naam, hii ni moja ya faida kufyeka hasara ya jQuery. Ni inaweza naomba kufanya mambo concisely sana, lakini labda si kama shirikishi. Labda wale wengine watatu kufanya kidogo zaidi kuhisi nini mimi kufanya. Hapa, ingawa, nini kinaendelea? 

Inavyoonekana, kujenga kazi bila majina kwamba mizigo wakati wowote hati yangu ni tayari, hivyo document.ready, baadhi ya kazi kinaenda kutokea. Kimsingi, wakati ni hati tayari? Ni wakati ukurasa wangu ina kubeba. 

Hivyo kwa haraka kama ukurasa wangu ina kubeba, kufuatia kazi unafaa. Inasema, ikiwa ni kitu cha aina jQButton, au kama darasa jQButton imekuwa clicked, kutekeleza kazi hii. Hivyo hapa ni majukumu mawili bila majina, moja inavyoelezwa ndani ya mwingine. 

Hivyo mazingira yangu yote hapa hadi sasa ni ukurasa wangu wakati mizigo wito kazi hii. Na kazi hii ni kusubiri kwa kifungo kuwa clicked. Na wakati kifungo ni clicked, Jq kifungo hasa ni clicked, wito huu vingine kazi, ambayo ni kwenda kuweka historia rangi ya colorDiv kuwa chochote maandishi ni katika kati ya vitambulisho. 

Hii ni dhana ya ambayo kifungo ilikuwa clicked. Lakini vinginevyo, hii ni aina ya tabia sawa na tukio hilo. Ni tu njia ile ile ndiyo mimi ingekuwa kueleza hii katika jQuery. Tena, pengine ni mengi zaidi vitisho. Siyo kama wazi kama kitu kama event.js, ambayo ni labda kidogo zaidi verbose, lakini kidogo kidogo vitisho. 

Lakini kama sisi pop nyuma zaidi kwa browser yangu dirisha, kama mimi kuanza clicking-- vizuri, kuwa iliyopita na zambarau. Hii ni kijani kwa kutumia njia kamba. Hii ni machungwa kwa kutumia tukio handler. 

Hii ni nyekundu kwa kutumia jQuery, sawa? Wote kuishi sawa. Wao tu kufanya hivyo kwa kutumia mbalimbali mbinu ya kutatua tatizo. Kuna mengi zaidi kwa jQuery kisha tuko hakika kwenda kuzungumza kuhusu katika video hii. Lakini kama unataka kujifunza zaidi, unaweza kwenda jQuery aina ya nyaraka na kujifunza kidogo kabisa zaidi kuhusu huu maktaba rahisi sana, ambayo ni kubwa kwa ajili ya kufanya upande wa mteja scripting kama vile nini tunafanya kuendesha na kuangalia na kujisikia ya mtandao wetu ukurasa pamoja Document Object Model. Mimi nina Doug Lloyd. Hii ni CS50.