Даг LLOYD: Во ова видео, сакавме да извикуваат посебен внимание за да се многу особено елемент на JavaScript кои можеби ќе се најде при рака кога започнувате да работат на веб-страници и манипулирање менување на содржината на вашиот веб-страница на мува. А тоа е поимот на на документ Object Model. Така како што видовме во нашата видео на JavaScript, објекти се многу флексибилни. И тие можат да содржат различни полиња. И покрај тоа што не одат во многу детали, тие области или својства, дека ние би веројатно повеќе соодветно да ги нарекуваат во контекст на некој објект, дури и тие особини можат да бидат и други објекти. И во внатрешноста на тие предмети може да има и други објекти. 

Имаш овој многу голем објект со голем број на други објекти во него, кој вид на создава оваа идеја на големо дрво. Сега, објект документот е многу посебен објект во вклучите Javascript- која организира целата своја веб- страница под овој вид на чадор на објектот. И така во внатрешноста на документот објект се објекти презентирање главата и телото на вашата веб страница. 

Во внатрешноста на овие и други објекти, и така натаму, и така натаму, додека целата своја веб-страница има беше организирана во овој голем објект. Што е наопаку тука, нели? Па, ние знаеме како да се работи со предмети во JavaScript. 

Значи, ако имаме објект кој се однесува на целата веб-страница, која значи со повик точниот методи за да се манипулира со тој објект или менување на одредени на нејзините својства, ние може да се промени на елементите на нашата страница програмски користејќи JavaScript наместо да кодот работите со, да речеме, на HTML. Па еве еден пример на многу едноставна веб страница, нели? Тоа е мора HTML тагови, со глава. 

Внатрешноста има наслов, Здраво светот. Тогаш имам тело. Внатре во тоа, јас имам три различни нешта. Имам таг Х2 глава, а став, и линк. Ова е многу едноставна веб страница. 

Па, она што може документот објект за ова изгледа? Па, тоа е малку страшно можеби на прв. Но, тоа е навистина само едно големо дрво. И во самиот корен на тоа е документ. 

Во внатрешноста на документот е уште еден објект осврнувајќи се на HTML кодот на мојата страница. И HTML на мојата страница е сето ова. А потоа и во внатрешноста на HTML објект, имам главата објект, кој се однесува на се што постои. 

И во внатрешноста на таму, Имам Наслов објект. И во внатрешноста на таму, јас имам друг објект кој е само Здраво светот. Јас би можеле да имаат на моето тело застапени се допаѓа ова. 

Во внатрешноста на моето тело, јас имам h2 објект и објект за стр став и еден објект за врска. Па така ова целата хиерархија може да биде претставен како големо дрво со многу малку помали работи кои доаѓаат надвор од неа. Сега, се разбира, кога ние сме програмирање, ние не мислам на нешта како големо дрво. Сакаме да ја видиме вистинската кодот поврзани работи. 

И среќа, можеме да ги користат нашите алатки за развој за да всушност ги погледнеме документ објектот на овој вебсајт. И ајде да го направите тоа. Па јас отвори табот пребарувач. 

И јас сум отвори развојни алатки. И во мојот видео на JavaScript, јас напомена дека конзолата не е само некаде каде ние печати информации, тоа е исто така место каде што ние може да влез информации. Во овој контекст, она што Јас ќе одам да се каже е Јас би сакал да се вратам објекти на документот, па јас може да почне да го погледне во него. Па, како би можеле да го направам тоа? Па, ако сакате да го го организираат навистина убаво, Јас ќе одам да се каже console.dir, Д-јас-Р. Сега, јас го користам за да се само печати console.log дознаете нешто многу едноставно. Но ако сакам да се организира овој хиерархиски како објект, Сакам тоа вид на структурирани како директориум структура. 

Значи сакам да console.dir документ. Одам да притиснете Enter. И веднаш под него сега, а јас ќе зумирате тука, Јас имам овој документ одговор со малку стрелката до него. Сега кога ќе ја отворите оваа стрела, таму се случува да биде многу нешта. 

Но, ние ќе треба да се игнорира многу од неа, и само вид на фокус на најважниот дел, па ние може да почне да се движите овој документ. Има многу повеќе да се од ДОМ само родител јазли и дете јазли. Има многу на помошни работи. 

Па јас ќе одам да се отвори овој горе. И таму е многу скапо на работи што се појавува. Но сите што се грижат за се токму тука, дете јазли. Ајде да се отвори дека до. 

Внатрешноста на таму гледам нешто познато, HTML. Па во внатрешноста на нашиот документ едно ниво надолу, HTML. Ја отворам дека до. За што се очекуваше? 

Ако се сеќавате од нашите дијаграм, што треба да се најде во внатрешноста на HTML? Кои два јазли се под него во дрвото? Ајде да дознаете. Се отвораат HTML. Ние одиме надолу до своите дете јазли. 

Поп кој е отворен. Има главата и телото. И ние може да се отвори во главата. Отидете на својата дете јазли. Па, има титулата. 

И ние би можеле да одат на и на вака засекогаш. Ние би можеле да го направите тоа со своето тело, како и. Но, постои начин за нас да се погледне документот организирана како голем објект. И ако ја гледаме е голема објект што изгледа многу како код, што значи дека ние може да почне да се манипулира со овој голем објект со користење кодот за да го промените тоа што нашата веб-сајт изгледа како. 

Па тоа е прилично моќна алатка ние имаме на располагање во моментов. Така како што ние само видов, документ самиот објект и сите објекти во него имаат својства и методи, само како и секој друг објект што имаме работи со во JavaScript. Но, можеме да ги користат овие својства и ги користат овие методи за да се вид на разбивка од голем документ и да добијат пониско и пониско и пониско, пофини и пофини зрна на детали, додека не дојдете до многу специфичен дел од нашето веб-страница, која сакаме да се промени. 

И кога ќе се ажурира својствата на Документ објектот или јавете се на овие методи, работите може да се случи на нашата веб-страница. И ние не треба да направите било освежување да располага со овие промени во сила. 

И тоа е прилично кул способност да има кога ние работиме со код. Значи она што се некои од овие својства кои се дел од некој документ објектот? Добро, вие веројатно гледаат неколку од нив навистина брзо како што бевме zipping низ гигант документот објект кој го видоа во веб прелистувачот. 

Но неколку од овие својства би можело да биде нешто како внатрешен HTML. И вие може дури да ми се потсетиме со користење на овој во видео на JavaScript На самиот крај, кога јас зборуе настани. Што беше ова внатрешниот HTML? Па, тоа е само она што е помеѓу таговите. 

Така и на внатрешен и HTML, на пример, од титулата таг, ако ние ќе се чуваат во дека пример пред еден миг, би биле Здраво светот. Кој беше насловот на нашата страница. Други својства вклучува и името на јазол, кој е името на една HTML елементи како што е насловот. ID, која е ID атрибут на HTML елемент. 

Потсетиме дека посебно ќе ја посочиме специфични елементи на нашата HTML со ид атрибут, кој обично доаѓа во рака во контекст на CSS, конкретно. Родител јазол, кој се однесува на што е само до над мене во ДОМ. И дете јазли, што е повикување на она што е долу под мене. И видовме многу од тоа само гледајќи низ. Дете јазли, тоа е како стигнавме сè подлабоко и подлабоко во дрво. 

Карактеристики, тоа е само низа на атрибути на HTML елемент. Така пример за атрибутите на сила биде, ако имате слика таг, тоа обично има атрибут извор, можеби висина и ширина атрибут. И така што само ќе биде низа на сите атрибути поврзани со кои HTML елемент. 

Стилот е уште еден кој ги претставуваат CSS стајлинг на одреден елемент. А подоцна и во овој видео, ние ќе конкретно стил потпора за да се направат неколку на промените на нашата веб страница. Значи тоа се некои својства. 

А исто така има и некои методи со кои можеме да го користите да се, исто така, побрзо можеби изолира елементи на објект на документи. Можеби, повеќето разноврсна на овие се getElementById. Па јас би рекол такво нешто, бидејќи се сеќавам дека тоа е метод на документ Објект, document.getElementById. 

И во внатрешноста на овие загради, наведете една HTML елемент со посебен проект атрибут дека јас веќе поставени, а јас ќе веднаш одат право на тој елемент од целокупната база на податоци. Па јас не треба да се вежба, можеби надолу низ секој слој. Јас само може да се користи овој метод да го најде, вид како топлина бараат проектили, нели? Тоа само оди и проигрува токму она што таа го барате. 

GetElementsByTagName е многу слични во духот. Можеби ова ќе ги најдете сите на храбар тагови или сите тагови стр и да ми даде низа на сè што тогаш би можел да работи со. appendChild додава нешто едно ниво надолу во стеблото. 

За да можам да додадете еден нов елемент за едно ниво пониско. Или може да се отстрани елемент што е едно ниво пониско, како и ако сакам да ги избришете нешто од мојот веб-страница. Сега, брзо белешка кодирање и брз заштеда на главоболка забелешка, се надевам. 

getElementById-- на d е со мали букви. Не можам да ви кажам колку пати имам користени getElementById и капитализирани г таму. Бидејќи тоа е навистина заедничко. Ако ние го напишете зборот проект, тоа е обично капитал I капитал Д. И мојот код едноставно не функционира. И не можам да сфатам зошто. Ова е навистина, навистина, навистина заеднички грешки што секој го прави, дури и експерти, кои имаат бил тоа засекогаш. Па само да бидат свесни, getElementById, дека d е со мали букви. И се надевам дека ви заштедува повеќе минути најмалку болки. 

Значи она што не сето ова да ни кажете? Имаме овие методи. Имаме овие својства. Сега, ако тргнеме од документ, документ. што и да, сега ние може да се добие било еден дел од нашата веб-страница кои сакаме да ги користење на JavaScript само со повикување на овие методи и проширува на својствата кои се наоѓаат на различни локации. 

Ова може да се добие разточен, овој document.getElementByID, можеби има долго име на ознака, можеби треба да направат повеќе повици подоцна. Работите може да се добие малку разточен. И како програмери, како што сте веројатно се гледа во многу од овие видеа, не сакаме разточен работи. 

Ние сакаме да биде во можност да се прават работите брзо. Па ние би сакале повеќе концизен начин да се каже нешто. Така овој вид на најавите на поим на нешто што се нарекува jQuery. Сега не е jQuery JavaScript. Тоа не е дел од JavaScript. 

Тоа е библиотека која е напишана од страна на некои програмери го вклучите Javascript- пред околу 10 години. И има за цел да се поедностави оваа што е викаат клиентски скрипти, кои е во основа она што бевме само Станува збор за манипулации со ДОМ. И така, ако сакав да се измени боја на позадината на мојата веб страница, можеби специфична div. 

Еве, јас сум очигледно добива ElementById colorDiv. И јас сакам да ја поставите неговата боја на позадината. Ако јас сум само со користење на чиста вклучите Javascript- користење на документ Object Model, тоа е многу работи, нели? document.getElementByID colorDiv.style.backgroundColor = зелена. 

Whew. Тоа беше многу да се каже. Тоа е многу да напишеш, е премногу. И така во jQuery, можеме да кажеме, можеби ова малку повеќе концизно. Пласирам тоа се е можеби малку малку повеќе криптичната одеднаш, нели? 

Барем на долг е малку повеќе објаснување за тоа што го правиме. Овој знак за долар, загради, една понуда, хаш, colorDiv, нели? Што значи тоа? Па, тоа е во основа, само document.getElementByID colorDiv. 

Но, тоа е овој вид на стенографија начин на вршење на користење jQuery. Ајде да ги разгледаме сега на неколку различни начини дека јас всушност може да го користете го овој документ Object Модел за да се манипулира со парчиња на мојот сајт. Конкретно, ние ќе дека се работи за манипулирање бојата на одредена Div, colorDiv, на веб-страница. Па ајде да ги разгледаме во тоа. Во ред. Па јас сум на страница. Таа се вика test.html кога ќе го симнете го ова ако сакате да нескопосник со ова. И јас имам еден куп Копчињата на оваа страница. И сакам да кажам дека одделни функции за боја на позадината, виолетова, зелена, портокалова, црвена, сина, една единствена функција за боја на позадината, настан управувачот за боја на позадината, и користење на jQuery. Што сум јас станува збор кога јас го правам ова? Така што сум го видел на копчињата. Сега, ајде да ги разгледаме во некои од изворниот код овде. Ќе започнеме со test.html. Па одделни функции за позадина боја е она што сум го внеле тука. Дозволете ми да се движите малку. 

И ќе забележите дека јас ги дефинираа овие копчиња да се каже кога ова копче е кликнато, јавете се во функција се претвори црвено. Кога ова копче е да кликнете, а, јавете се во функција се претвори зелена, сврти портокалова, црвена, сина се сврти. Што веројатно може да се погоди дека овој можеби не е најдобар дизајн смисла, нели? 

Тоа би било убаво ако можев имаат повеќе општ пристап. Па, прво ние ќе ги разгледаме во она што тие пет функции се document.getElementByID colorDiv.style.background = виолетова, зелена, портокалова, црвена, и сина, соодветно. Значи, не е особено најдобар дизајн. 

Следниот сет на копчиња Имам се што сум напишал една функција се нарекува менуваат бојата што очигледно прифаќа низа како аргумент. Значи ова е малку подобро. Виолетова, зелена, портокалова, црвена, сина сега е аргумент. Па јас сум напишал една поопшта JavaScript функција случај, која може да изгледа нешто како ова. Јас сум поминува во. Оваа функција е менуваат бојата очекувајќи аргумент се нарекува боја. И сакам да кажам дека во собата на боја на позадината на боја. Па еве го претставува она што имам тука. Па тоа е малку подобро. 

Но, јас би можеле да бидат во можност да се направи подобро од тоа. Ако одиме надолу за да ја погледнете на состојбата на настан управувачот, сега сите овие повици изгледаат исти. Ако се сеќавате за нашите дискусија за настан ракувачи, Јас може да се добијат информации за тоа кој од овие копчиња е кликнато и го користат тоа. 

И така во event.JavaScript, јас сум напишано менуваат бојата настанот, кој фигури кои копче е кликнато. Тоа е активирањето објект линија. А потоа тука, станува навистина разточен. Но, она што го правам е јас сум поставување на позадина боја на triggerObject inner.HTML. Тоа е текстот во помеѓу таговите копчето. 

И тогаш јас очигледно имаат да го поставите тоа во мали букви. И тоа е како јас може да се конвертира целиот стрингот во мали букви во JavaScript користење тој метод во мали букви. Затоа што кога ќе се постави во боја, како што јас се обидувам да го направите тука, боја мора да биде во сите мали букви. 

Но на копчето што ја имав, ако се земе уште еден поглед, забележиме дека во текстот има напишан со голема P за виолетова. А потоа и на самиот дното тука, јас очигледно се обиде и да го направите тоа користејќи jQuery, како и. И во овој случај, јас не сум, всушност, повик на функција на сите. Јас сум само рече класата дека сум користат за оваа копче е JQ. Тоа е. 

Па како не jQuery знам што правам? Па, ова е една од предностите намали недостатоците на jQuery. Тоа може да ми дозволат да се прават работите многу концизно, но можеби не како интуитивно. Можеби оние другите три се направи малку повеќе смисла она што јас го правам. Тука, сепак, она што се случува? 

Очигледно, создавајќи анонимен функција дека товари кога мојот документ е подготвена, па document.ready, некои функцијата ќе се случи. Во суштина, кога е документ подготвен? Тоа е времето кога мојата страница ја вчита. 

Па штом мојот профил има вчитан, по функција е секогаш подготвен. Таа вели дека, ако еден објект од типот jQButton, или ако класа jQButton е кликнато, извршува оваа функција. Па еве две анонимни функции, оној што е дефиниран во внатрешноста на други. 

Значи целиот мој контекст досега кај нас е мојата страница кога се отвора ја нарекува оваа функција. И оваа функција е на чекање за едно копче да се кликне. И кога е кликнато копче, JQ копчето конкретно е кликнато, го нарекува овој друг функција, која се случува да го поставите позадина Бојата на colorDiv да биде без оглед на текстот е во меѓу тагови. 

Ова е поимот на кое копче е кликнато. Но во спротивно, ова е вид на однесуваат слично на некој настан. Тоа е само на ист начин го ќе го изразат тоа во jQuery. Повторно, тоа е веројатно многу повеќе застрашувачки. Тоа не е толку јасна како нешто како event.js, кој е можеби малку повеќе опширниот, но малку помалку застрашувачки. 

Но, ако ги поп назад во текот на мојот интернет пребарувач прозорец, ако почнам clicking-- добро, дека е изменета на виолетова. Ова е зелена со примена на методот на стрингот. Ова е портокалова користење ракувачот со настани. 

Ова е црвено користење jQuery, нели? Сите тие се однесуваат токму истото. Тие само го прават тоа со користење на различни пристапи кон решавање на проблемот. Има многу повеќе да се jQuery тогаш ние сме сигурно овде ќе стане збор во ова видео. Но, ако сакате да дознаете повеќе, може да одат на jQuery вид на документација и да научат сосема малку повеќе за ова е многу флексибилен библиотека, која е одлична за правење клиентската страна скриптирање, како што се она што го правевте да се манипулира со изглед и се чувствуваат на нашата веб-страница со документ Object Model на. Јас сум Даг Лојд. Ова е CS50.