Даг Lloyd: У гэтым відэа мы хацелі каб выклікаць асобнай увагі у прыватнасці, вельмі элемент JavaScript што вы маглі б знайсці пад рукой калі вы пачынаеце працаваць на маніпуляванні вэб-старонак і змены ўтрымання вэб-старонкі на лета. І гэта паняцце Аб'ектная мадэль дакумента. Такім чынам, як мы бачылі ў нашым відэа на JavaScript, з'яўляюцца вельмі гнуткімі. І яны могуць утрымліваць розныя поля. І хоць мы не пайшлі на шмат падрабязна, гэтыя палі або ўласцівасці, што мы, верагодна, больш адпаведна называць іх ў кантэксце аб'екта, нават Гэтыя ўласцівасці можна іншыя аб'екты. А ўнутры гэтых аб'ектаў могуць быць і іншыя аб'екты. 

Вы павінны гэта вельмі вялікі аб'ект з вялікай колькасцю іншых аб'ектаў ўнутры яго, што-то стварае гэтую ідэю вялікага дрэва. Цяпер, аб'ект дакумента з'яўляецца вельмі спецыяльны аб'ект у JavaScript які арганізуе ўсю вашу сетку старонка пад такога роду парасонам аб'екта. І так ўнутры дакумента аб'ект аб'екты, якія прадстаўляюць з'яўляюцца галава і цела вашай вэб-старонцы. 

Ўнутры тыя сябра аб'екты, і гэтак далей, і гэтак далей, да ўся ваша вэб-старонка не мае быў арганізаваны ў гэтым вялікім аб'екце. Што ўверх тут, праўда? Ну, мы ведаем, як працаваць з аб'ектамі ў JavaScript. 

Так што, калі ў нас ёсць аб'ект, які ставіцца да ўсёй нашай вэб-старонцы, што азначае, патэлефанаваўшы правільна метады, каб маніпуляваць, што аб'ект або змены напэўна яго уласцівасцяў, мы можа змяняць элементы наша старонка праграмна з дапамогай JavaScript, замест таго, кадзіраваць рэчы, скажам, HTML. Дык вось прыклад вельмі просты вэб-старонкі, ці не так? Ён атрымаў HTML-тэгі, галаву. 

Унутры ёсць назва, прывітанне свет. Тады ў мяне ёсць цела. Ўнутры, што ў мяне ёсць тры розныя рэчы. У мяне ёсць тэг загалоўка h2, абзац, а таксама спасылка. Гэта вельмі просты вэб-старонкі. 

Ну, тое, што дакумент можа аб'ект для гэтага выглядаць? Ну, гэта крыху страшна, можа быць, у першую чаргу. Але гэта на самай справе проста вялікае дрэва. І ў самым корані ёй дакумент. 

Ўнутры дакумент з'яўляецца яшчэ адным Аб'ект са спасылкай на HTML маёй старонцы. І HTML маёй старонцы ўсё гэта. І тады ўнутры HTML аб'ект, у мяне ёсць аб'ект галаву, які адносіцца да ўсяго там. 

А ўнутры там, У мяне ёсць аб'ект назву. А ўнутры там, у мяне ёсць яшчэ адзін запярэчыць, што проста прывітанне свет. Я мог бы маё цела прадстаўлены, як гэта. 

Ўнутры майго цела, у мяне ёсць h2 аб'ект і аб'ект р па пункце і аб'ект для спасылкі. І так уся гэтая іерархія можа быць прадстаўлена ў выглядзе вялікага дрэва з вялікім меншага Літл рэчы выходзяць з яго. Цяпер, вядома, калі мы праграм, мы Не думаю, што такіх рэчаў, як вялікае дрэва. Мы хочам, каб бягучая код, звязаныя рэчы. 

І, на шчасце, мы можам выкарыстоўваць нашы інструменты для распрацоўшчыкаў на самай справе зірнуць на Аб'ект дакумента гэтага вэб-сайта. І давайце зробім гэта. Так што я адкрыў ўкладку браўзэра. 

І я адкрыў Developer Tools. І ў маім відэа на JavaScript, я адзначыў, што кансоль не толькі дзе-то, дзе мы друкуем інфармацыю, гэта таксама месца, дзе мы можам ўваходныя інфармацыю. У гэтым кантэксце, што Я збіраюся сказаць, Я хацеў бы вярнуцца аб'екты дакументаў, так што я магу пачаць, каб зірнуць на яго. Так як я мог гэта зрабіць? Ну, калі я хачу арганізаваць вельмі прыгожа, Я хачу сказаць, console.dir, D-I-R. Зараз, я выкарыстоўваю console.log проста раздрукаваць нешта вельмі простае. Але калі я хачу, каб арганізаваць гэта іерархічна як аб'ект, Я хачу гэта свайго роду структураваны як структуры каталогаў. 

Таму я хачу, каб console.dir дакумент. Я стукну Enter. І прама пад ім цяпер, і я буду набліжаць тут, Я атрымаў гэты дакумент рэагавання з невялікай стрэлкай побач з ім. Цяпер, калі я адкрываю гэтую стрэлку, там будзе шмат рэчаў. 

Але мы збіраемся ігнараваць шмат з яго і толькі збольшага ў фокусе на самай важнай часткі, такім чынам, мы можа пачаць перамяшчацца гэты дакумент. Там нашмат больш да DOM, чым проста бацька вузлы і даччыныя вузлы. Там вельмі шмат дапаможнага матэрыялу. 

Так што я збіраюся адкрыць гэта. І ёсць шмат рэчы, якія ўсплывае. Але ўсё, што я клапачуся аб тым прама тут, даччыныя вузлы. Давайце адкрыем, што да. 

Унутры ёсць я бачу нешта знаёмае, HTML. Так ўнутры нашага дакумента адзін узровень ўніз, HTML. Я адкрываю, што да. Што мы чакаем? 

Калі вы памятаеце з нашай дыяграме, што мы павінны знайсці ўнутры HTML? Якія два вузлы пад ім у дрэве? Давайце высветлім. Мы адкрываем HTML. Мы спускаемся ў яго даччыных вузлоў. 

Поп, якія адкрываюцца. Там галава і цела. І мы можам адкрыць галоўку. Перайсці да яго даччыных вузлоў. Ну, ёсць назва. 

І мы маглі б пайсці далей і на, як гэта назаўжды. Мы маглі б зрабіць гэта з целам, а таксама. Але ёсць спосаб для нас, каб глядзець на дакумент арганізаваны як вялікі аб'ект. І калі мы паглядзім на вялікі аб'ект, які выглядае шмат як код, гэта азначае, што мы можам пачаць маніпуляваць гэтай вялікі аб'ект з дапамогай Код змяніць тое, што нашы сайт выглядае і адчувае, як. 

Так што гэта даволі магутны інструмент мы маем у нашым распараджэнні ў цяперашні час. Так як мы толькі што бачылі, Сам дакумент аб'ект і ўсе аб'екты ўнутры яго маюць ўласцівасці і метады, проста як і любы іншы аб'ект, які мы працуе з у JavaScript. Але мы можам выкарыстоўваць гэтыя ўласцівасці і выкарыстоўваць гэтыя метады, каб свайго роду разгарнуць з вялікай дакумента і атрымаць ўсё ніжэй і ніжэй, і ніжэй, танчэй і танчэй збожжа ня дэталізацыі, пакуль мы патрапіць у вельмі пэўнай часткі нашага вэб-старонкі, якія мы хочам змяніць. 

І калі мы абнаўляем ўласцівасці Дакумент аб'ект або патэлефануеце тыя метады, Могуць адбыцца на нашай вэб-старонцы. І мы не павінны рабіць нічога асвяжальны каб гэтыя змены ўступілі ў сілу. 

І гэта вельмі выдатна здольнасць ёсць, калі мы працуем з кодам. Так што некаторыя з гэтых уласцівасцяў якія з'яўляюцца часткай аб'екта дакумента? Ну, вы, верагодна, бачыў пара з іх сапраўды хутка як мы былі сціснуць праз гіганцкі дакумента Аб'ект мы толькі што бачылі ў вэб-браўзэры. 

Але пару з гэтых уласцівасцяў можа быць нешта накшталт унутранай HTML. І вы, магчыма, нават успомніць мяне выкарыстоўваючы гэта ў відэа JavaScript ў самым канцы, калі я казаў пра падзеі. Што гэта ўнутраная HTML? Ну, гэта проста тое, што паміж тэгамі. 

І так ўнутраны HTML, Напрыклад, назвы тэг, калі б мы працягвалі ісці ў што, напрыклад, хвіліну назад, было б прывітанне свет. Гэта было назва нашай старонкі. Іншыя ўласцівасці ўключаюць у сябе імя вузла, які гэтае імя з HTML элемент, такі як назва. ID, які з'яўляецца ідэнтыфікатарам атрыбут HTML элемента. 

Нагадаем, што мы можам спецыяльна пазначыць канкрэтныя элементы нашага HTML з ID атрыбуту, які звычайна патрэбныя ў кантэксце CSS, адмыслова. Бацькоўскі вузел, які з'яўляецца спасылкай на што толькі наверсе мяне ў DOM. І даччыныя вузлы, што з'яўляецца спасылка на тое, што ўнізе мяне. І мы ўбачылі, што шмат проста праглядаючы. Даччыныя вузлы, якія, як мы атрымалі ўсё ніжэй і ніжэй у дрэве. 

Атрыбуты, гэта проста масіў з атрыбуты HTML элемент. Так прыклад атрыбутаў можа калі б у вас ёсць тэг малюнка, ён звычайна мае атрыбут зыходнага, можа быць, вышыня і шырыня атрыбут. І так, што б проста быць масівам з усіх атрыбутаў, звязаных з гэтай HTML элемента. 

Стыль яшчэ адзін, які зусім ўяўляюць CSS кладка канкрэтнага элемента. А потым у гэтым відэа, мы будзем спецыяльна рычагі стыль зрабіць пару змены на нашым сайце. Так што тыя, некаторыя ўласцівасці. 

І ёсць таксама некаторыя Метады, якія мы можам выкарыстоўваць таксама больш хутка, можа быць, ізаляваць элементы аб'екта дакумента. Можа быць, самы універсальны з іх з'яўляецца getElementById. Так што я мог бы сказаць нешта накшталт, таму што памятаеце, што гэта метад Дакумента Аб'ект, document.getElementById. 

А ўнутры гэтых дужак, пакажыце HTML-элемент з пэўнай ID атрыбутаў, што я раней усталяваны, і я адразу ж буду ісці прама да гэтага элементу ад агульнага вэб-сайта. Так што я не павінен, можа быць, свідраваць ўніз праз кожны пласт. Я магу проста выкарыстоўваць гэты метад, каб знайсці яго, накшталт як цяпло шукае ракеты, дакладна? Гэта проста ідзе і знаходзіць менавіта тое, што ён шукае. 

GetElementsByTagName з'яўляецца вельмі падобныя па духу. Можа быць, гэта будзе знайсці ўсе з смелыя тэгі і ўсё р тэгаў і даць мне масіў ўсе што я мог бы працаваць. AppendChild дадае нешта адзін узровень ўніз ў дрэве. 

Так што я магу дадаць ўвесь новы элемент на адзін узровень ніжэй. Ці я магу выдаліць элемент, што гэта адзін узровень ніжэй, а калі я хачу выдаліць што-небудзь з маёй вэб-старонцы. Цяпер, хуткае нататка кадаваньне і хутка галаўны боль эканоміі ведама, спадзяюся. 

getElementById-- Д у ніжнім рэгістры. Я не магу сказаць вам, колькі разоў я павінен б getElementById і капитализируются Д ёсць. Таму што гэта сапраўды агульнае. Калі мы пішам слова ID, гэта як правіла, капітал Капітал I Д. І мой код проста не працуе. І я не магу зразумець, чаму. Гэта сапраўды, сапраўды, сапраўды агульная памылка, што кожны робіць, нават эксперты, якія маюць рабіў гэта назаўжды. Так проста быць у курсе, getElementById, што г у ніжнім рэгістры. І можна спадзявацца, што эканоміць некалькі хвілін, па меншай меры душэўнай болі. 

Такім чынам, што ж усё гэта нам кажа? У нас ёсць гэтыя метады. У нас ёсць гэтыя ўласцівасці. Цяпер, калі мы зыходзім з дакумент, дакумент. усё, цяпер мы можам атрымаць любы адзін кавалак нашай вэб-старонцы што мы хочам, каб з дапамогай JavaScript проста называць гэтыя метады і выкарыстоўваючы ўласцівасці што мы знаходзім у розных месцах. 

Гэта можа стаць шматслоўным, гэта document.getElementById, можа быць, ёсць доўгі імя тэга, Можа быць, вы больш званкоў пазней. Рэчы могуць атрымаць крыху шматслоўныя. І як праграмісты, як вы, напэўна, бачылі ў многіх з гэтых відэа, нам не падабаецца шматслоўныя рэчы. 

Мы хацелі б быць у стане зрабіць рэчы хутка. Такім чынам, мы хацелі б больш кароткім спосаб сказаць нешта. Так што гэта свайго роду прыводзіць да Паняцце, што называецца JQuery. Цяпер JQuery ня JavaScript. Гэта не частка JavaScript. 

Гэта бібліятэка, якая была напісана некаторыя праграмісты JavaScript каля 10 гадоў таму. І яго мэтай з'яўляецца, каб спрасціць гэта тое, што называецца баку кліента сцэнарыяў, якія у асноўным тое, што мы былі проста казаць аб з DOM маніпуляцый. І таму, калі я хацеў, каб мадыфікаваць Колер фону маёй вэб-старонцы, можа быць, спецыфічны дзіў. 

Вось, я, мабыць, атрымліваць ElementById colorDiv. І я хачу, каб усталяваць яго колер фону. Калі я толькі з дапамогай чыстага JavaScript з выкарыстаннем Document Object Model, гэта шмат рэчаў, ці не так? document.getElementById colorDiv.style.backgroundColor = зялёны. 

Вось так. Гэта было шмат, каб сказаць. Гэта шмат, каб увесці, таксама. І так у JQuery, мы можам сказаць, можа быць, гэта крыху больш коратка. Кампраміс быць гэта, можа быць, трохі трохі больш загадкавае раптам, дакладна? 

Прынамсі, доўга яшчэ трохі якія тлумачаць, як тое, што мы робім. Гэты знак даляра, круглыя ​​дужкі, апостраф, хэш, colorDiv, праўда? Што гэта азначае? Ну, гэта ў асноўным толькі document.getElementById colorDiv. 

Але гэта такога роду стэнаграфія спосаб зрабіць гэта з дапамогай JQuery. Давайце проста паглядзіце зараз на некалькі розных спосабаў што я на самой справе можа Выкарыстоўвайце гэты аб'ект Document Мадэль маніпуляваць часткі майго сайта. У прыватнасці, мы збіраемся працаваць на маніпуляванні колер канкрэтны Дзіў, colorDiv, на вэб-старонцы. Такім чынам, давайце зірнем на гэта. Добра. Так што я на старонцы. Гэта называецца test.html, калі вы загружаеце гэта, калі вы хочаце, каб важдацца з гэтым. І я атрымаў кучу Кнопкі на гэтай старонцы. І я кажу асобныя функцыі для колер фону, фіялетавы, зялёны, аранжавы, чырвоны, сіні, адна функцыя для колеру фону, апрацоўшчык падзеі для колеру фону, і з дапамогай JQuery. Што я кажу пра калі я раблю гэта? Такім чынам, мы бачылі кнопкі. Цяпер, давайце зірнем на некаторыя з зыходнага кода тут. Мы пачнем з test.html. Так асобныя функцыі для фону колер, што я набраў тут. Дазвольце мне пракруціць няшмат. 

І вы заўважыце, што я вызначылі гэтыя кнопкі сказаць, калі гэтая кнопка націснутая, выклікаць функцыю ўключыць фіялетавы. Калі гэтая кнопка мышы, а, выклікаць функцыю зелянець, аранжавым, чырвоным, сінім. Вы, напэўна, можаце здагадацца, што гэта Магчыма, гэта не самы лепшы дызайн сэнс, праўда? 

Было б нядрэнна, калі б я мог маюць больш агульны падыход. Ну, па-першае, мы будзем глядзець на тое, што гэтыя пяць функцый document.getElementById colorDiv.style.background = фіялетавы, зялёны, аранжавы, чырвоны, і сіні, адпаведна. Так, у прыватнасці, не лепшы дызайн. 

Наступны набор кнопак Я гэта я напісаў адна функцыя называецца змяніць колер, што, мабыць прымае радок у якасці аргументу. Так што гэта крыху лепш. Фіялетавы, зялёны, аранжавы, чырвоны, сіні цяпер аргумент. Так што я напісаў больш агульны Справа функцыя JavaScript, якія маглі б выглядаць наступным чынам. Я перадаю ст. Гэта змяненне колеру функцыя чакаючы аргумент з імем колеру. І я кажу ўсталяваць колер фону колер. Так тут уяўляе тое, што я трапіў сюды. Так што гэта крыху лепш. 

Але я мог бы быць у стане лепш, чым гэта. Калі мы ідзем ўніз, каб зірнуць ў сітуацыі апрацоўшчыка падзей, Зараз усе гэтыя выклікі выглядаюць аднолькава. Калі ўзгадаць для нашага абмеркаванне апрацоўшчыкаў падзей, Я магу атрымаць інфармацыю пра тое, якія з гэтыя кнопкі націснулі і выкарыстоўваць. 

І так у event.JavaScript, у мяне напісана змяненне колеру падзея, якое высвятляе, якая кнопка была націснутая. Гэта аб'ект трыгера лініі. І тады тут, гэта становіцца сапраўды шматслоўным. Але тое, што я раблю, я ўстаноўка фон колер triggerObject inner.HTML. Вось тэкст паміж тэгамі кнопкі. 

І тады я, відавочна, маюць каб усталяваць яго ў ніжні рэгістр. І гэта, як я магу пераўтварыць ўсе радок у ніжні рэгістр ў JavaScript з дапамогай што метад у ніжні рэгістр. Таму што, калі я паставіў колер, як я спрабую зрабіць тут, колер павінен быць у ніжнім рэгістры. 

Але кнопка, якая ў мяне была, калі мы яшчэ раз зірнуць, заўважыць, што тэкст ёсць напісана з вялікай літары для фіялетавы. І тады, па меншай Ніжняя тут, я, здаецца, паспрабаваць зрабіць гэта, выкарыстоўваючы JQuery, а таксама. І ў гэтым выпадку, я на самой справе не выклік функцыі наогул. Я толькі што сказаў, што клас Я выкарыстоўваючы для гэтага з'яўляецца кнопка JQ. Вось і ўсё. 

Так як жа JQuery ведаю, што я раблю? Ну, гэта адно з пераваг скараціць недахопы JQuery. Гэта можа дазволіць мне рабіць тое, вельмі лаканічна, але, магчыма, не а інтуітыўна. Можа быць, тыя, іншыя тры зрабіць трохі больш адчуваць, што я раблю. Тут, аднак, тое, што адбываецца? 

Мяркуючы па ўсім, стварэнне ананімная функцыя што кожны раз, калі мой грузы дакумент гатовы, так document.ready, некаторыя функцыі адбудзецца. У асноўным, калі дакумент гатовы? Гэта калі мая старонка загрузіцца. 

Таму, як толькі мая старонка загружаная, Наступная функцыя заўсёды гатовы. Гэта кажа, калі аб'ект тыпу jQButton, або калі клас jQButton была націснутая, выканаць гэтую функцыю. Дык вось два ананімныя функцый, якая вызначана ўнутры іншы. 

Так ўсю маю кантэксце тут да гэтага часу мая старонка пры загрузцы ён выклікае гэтую функцыю. І гэтая функцыя чакае Для кнопак будзе націснутая. А калі націснутая кнопка, JQ Кнопка спецыяльна пстрычцы ён выклікае гэты іншы функцыя, якая будзе каб усталяваць фон Колер colorDiv быць любы тэкст, у паміж тэгамі. 

Гэта паняцце кнопка, якая была націснутая. Але ў адваротным выпадку, гэта свайго роду сябе падобна на падзеі. Гэта сапраўды гэтак жа, як я выкажа гэта ў JQuery. Зноў жа, гэта, верагодна, нашмат больш запалохаць. Гэта не ясна, як нешта накшталт event.js, што, можа быць, трохі больш шматслоўны, але трохі менш страшным. 

Але калі мы поп-назад да браўзэры вокны, калі я пачну clicking-- добра, што змянілася ў фіялетавы. Гэта зялёны з выкарыстаннем метаду радок. Гэта аранжавы, выкарыстоўваючы апрацоўшчык падзей. 

Гэта чырвоны, выкарыстоўваючы JQuery, праўда? Усе яны паводзяць сябе сапраўды гэтак жа. Яны проста робяць гэта з выкарыстаннем розных падыходы да вырашэння праблемы. Там вельмі шмат больш, каб JQuery то мы, вядома, пагаворым аб ў гэтым відэа. Але калі вы хочаце даведацца больш, вы можаце перайсці да JQuery роду дакументацыі і даведацца крыху больш пра гэта вельмі гнуткая бібліятэка, якая з'яўляецца вялікім для гэтага на баку кліента сцэнарыяў, такіх як тое, што мы рабілі маніпуляваць выгляд і адчуваць нашай вэб-старонцы з аб'ектнай мадэлі дакумента. Я Дуг Лойд. Гэта CS50.