Даг Ллоид: У овом видеу, желели смо звати од посебну пажњу на врло посебан елемент ЈаваСцрипт да би пригодна Када поцињете радити на манипулацију веб странице и мења садржај својој веб страници у лету. И то је појам Доцумент Објецт Модел. Дакле, као што смо видели у нашој видео на Јавасцрипт, објекти су веома флексибилни. И они могу да садрже различите области. И мада нисмо ишли у много детаил, они поља или својства, да би вероватно више адекватно их зову у контексту неког објекта, чак те особине могу бити других објеката. И унутар тих објеката може бити други објекти. 

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

Унутар то су други објекти, и тако даље, и тако даље, док цела ваша веб страница има је организован у овој великој објекту. Шта је наопако овде, зар не? Па, знамо како се ради са објектима у ЈаваСцрипт. 

Дакле, ако имамо објекат који односи се на целој нашој веб страници, да значи позивом исправан методе за манипулацију тај објекат или модификују сигурно његових особина, ми смо да мењате елементе наш програмски користећи ЈаваСцрипт умјесто да кодира ствари са, рецимо, ХТМЛ. Дакле, овде је пример врло једноставна веб страница, зар не? Има ХТМЛ ознаке, а главу. 

Унутар постоји звање, здраво свет. Онда имам тело. Унутар тога, имам три различите ствари. Имам Х2 заглавља ознаку, одломак, и линк. Ово је врло једноставна веб страница. 

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

Унутар овог документа је још један објекат који се односи на ХТМЛ моје стране. А ХТМЛ моје стране је све ово. А онда унутар ХТМЛ објекат, имам главу објекат, који се односи на све тамо. 

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

Унутар мог тела, имам Х2 објекат и п објекат за став и један објектом за везу. И то цела хијерархија може се представити као великог дрвета са пуно мањим Литтле ствари излази из ње. Дакле, наравно, када ми програмирање, ВЕ не мислим на ствари као великог дрвета. Ми желимо да видимо стварне ЦОДЕ Повезано ствари. 

И срећом, можемо користе наше развојне алате да заправо погледати Доцумент Објецт овом сајту је. И хајде да урадимо то. Зато сам отворио картицу претраживача. 

И ја сам отворио Алатке за. И у мом видео он ЈаваСцрипт, ја споменуо да је конзола није Само негде где штампамо информације, то је такође место где можемо улазне информације. У том контексту, оно што Ја ћу рећи Волео бих да се вратим предмети документ, тако да могу почети да га погледам. Како би ја ово радим? Па, ако желим да организује се заиста лепо, Ја ћу рећи цонсоле.дир, Д-И-Р. Сада, ја користим цонсоле.лог да само штампање од нешто врло једноставно. Али ако желите да организујете ово хијерархијски као објекат, Желим да на неки начин структуриран као структуру директоријума. 

Дакле, желим да цонсоле.дир документ. Ја ћу да ударим Ентер. И одмах испод њега сада, а ја ћу зумирати овде Имам овај документ одговор са стрелицом поред ње. Сада, када отворим ову стрелу, ту ће бити много ствари. 

Али ми ћемо да игноришемо много ИТ и некако фокуса на најважнијем делу, тако да смо могу почети да се крећете овај документ. Има много више него ДОМ само родитељ чворови и дете чворови. Има много помоћне ствари. 

Зато ћу да отворим ово. И ту је много ствари које искочи. Али све ми је стало је овде, деца чворови. Отворимо то. 

Унутар ту видим нешто познато, ХТМЛ. Дакле, унутар нашег документа један ниво доле ХТМЛ. Ја отворим то. Шта ми очекујемо? 

Ако се сећате из нашег дијаграма, шта треба да нађемо унутар ХТМЛ? Који два чворови су испод њега у дрвету? Hajde da otkrijemo. Ми отвори ХТМЛ. Идемо до његових потомака чворова. 

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

И можемо ићи даље и овако довека. Могли бисмо радити са телом као добро. Али постоји начин да погледате документ организована као велики објекат. И ако погледамо је велика објекат који изгледа доста Као код, то значи да можемо да почнемо да манипулишу ову велику објекат користећи Код променити оно што су наши сајт изгледа и слично. 

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

А када будемо ажурирали својства Доцумент Објецт или позовите те методе, ствари би се могло догодити на нашој веб страници. И не треба да урадите нешто освежавајуће да те промене ступе на снагу. 

И то је прилично кул способност да имати када радимо са кодом. Дакле, шта су неки од ових особина који су део објекта документа? Па, вероватно видела Неколико њих заиста брзо као што су зиппинг кроз џиновског документа Објекат смо видели у веб бровсер. 

Али пар ових особина можда ствари као што су унутрашњи ХТМЛ. А можда чак ми се сетим користећи то у ЈаваСцрипт видео на самом крају, када сам је говорио о догађајима. Шта је то унутрашња ХТМЛ? Па, то је управо оно што је између тагова. 

И тако је унутрашња ХТМЛ на пример, наслова ознака, ако смо стално идемо у да пример малопре, би било здраво свет. То је наслов наше странице. Остала својства садржи назив чвора, који је име једне ХТМЛ елеменат као што наслов. ИД, што је ИД атрибут ХТМЛ елемента. 

Подсетимо се да смо посебно може да указује специфични елементи нашег ХТМЛ са атрибутом ИД, који обично долази у руци у контексту ЦСС, конкретно. Надређен чвор, што је референца на шта је горе изнад мене у Дому. И дете чворови, који је референца на оно што је доле испод мене. И видели смо много тога Само гледам кроз. Дете чворови, тако смо добили све ниже и ниже на дрво. 

Атрибути, то је само низ од атрибута ХТМЛ елемента. Дакле пример атрибута мигхт бити ако имате слику таг, обично има извор атрибут, можда висине и ширине атрибут. И то би био само низ свих атрибуте повезане са тим ХТМЛ елемент. 

Стил је још један да не представљају ЦСС стилизација одређени елемент. И касније у овом Видео, конкретно ћу полуга стил да се направи пар измјена нашем сајту. Дакле, то су неке особине. 

Такође постоје и неке Методе које можемо да користити да се брже можда изолујемо елементи Објецт документа. Можда највише свестран од ових бића гетЕлементБиИд. Тако да могу рећи нешто слично, јер сетите се да је метода Документа Објецт, доцумент.гетЕлементБиИд. 

И унутар тих заграда, наведите ХТМЛ елемент са одређеном ИД атрибут да сам већ сет, а ја ћу одмах идите право на тог елемента од укупног сајту. Тако да не треба да можда дрилл доле кроз сваки слој. Могу само да користите овај метод да га нађем, нешто као топлоте пројектил, jel tako? То само иде и проналази управо оно што траже. 

ГетЕлементсБиТагНаме је веома сличан по духу. Можда би се наћи све од болд ознаке или све п тагова и дај ми низ све да сам тада могао да радим. аппендЦхилд додаје нешто један ниво доле у ​​дрвету. 

Дакле, могу да додам цео Ново Елемент за један ниво ниже. Или могу уклонити елемент који је један ниво ниже и ако желим да избришете нешто од мог веб страници. Сада, кратка напомена кодирање и брз главобоља штеди ноту, надам се. 

гетЕлементБиИд-- Д је мала слова. Не могу вам рећи колико пута сам Половни гетЕлементБиИд и капитализован Д тамо. Зато што је заиста уобичајено. Ако пишемо реч ИД, то је Обично капитал И капитал Д И мој код једноставно не ради. И не могу да схватим зашто. Ово је стварно, стварно, стварно заједнички буг који свима даје, чак и стручњаци који имају ово радимо заувек. Дакле, само будите свесни, гетЕлементБиИд, да д је мала слова. И надам се, да штеди вам неколико минута барем туге. 

Дакле, шта све ово говори? Имамо те методе. Имамо ове особине. Сада, ако пођемо од документ, документ. год, сада можемо доћи до било један комад нашој веб страници да желимо да користе ЈаваСцрипт само позивањем ових метода и усклађивање својства да нађемо на различитим локацијама. 

Ово може да Ворди, ово доцумент.гетЕлементБиИд, можда имају дугу име ознаке, можда ти више позива касније. Ствари могу добити мало Ворди. И као програмери, као што сам Вероватно видети у многим од тих видеа, не волим Ворди ствари. 

Ми волимо да будемо у стању да уради ствари брзо. Тако да бих више концизан начин да се каже нешто. Дакле, ова врста доводи до појам нечега што се зове јКуери. Сада јКуери није ЈаваСкрипт. То није део ЈаваСцрипт. 

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

Ево, ја очигледно се ЕлементБиИд цолорДив. И желим да поставите боју позадине. Ако Ја само користим чист ЈаваСцрипт помоћу Објецт Модел документа, То је много ствари, зар не? доцумент.гетЕлементБиИд цолорДив.стиле.бацкгроундЦолор = зелено. 

Ух. То је много тога да кажем. То је много да куцате, превише. И тако у јКуери, мозда би могли да кажу ово мало више концизно. Трговина са што је то можда мало мало више загонетан одједном, jel tako? 

Најмање дуго је мало више Објашњење о томе шта радимо. Овај знак доллара, заграде, апостроф, хасх, цолорДив, зар не? Шта то значи? Па, то је у основи само доцумент.гетЕлементБиИд цолорДив. 

Али то је ова врста стенографије начин да се то користећи јКуери. Хајде да погледамо сада при неколико различитих начина да сам заправо могао користите ову Доцумент Објецт Модел за манипулацију комада мом сајту. Посебно ћемо да ради на манипулацији боја одређена Див, цолорДив, на веб страници. Дакле, хајде да погледамо то. У реду. Дакле, ја сам на страници. То се зове тест.хтмл када преузимате ово ако желите да петљам са овим. И ја имам гомилу Тастери на овој страници. А ја кажем појединачне функције за боју позадине, љубичаста, зелена, наранџаста, црвена, плава, једна функција за боју позадине, догађај трговине за боју позадине, и користећи јКуери. Шта ја говорим кад ово радим? Дакле, видели смо дугмад. Сада, хајде да погледамо неки изворни код овде. Почећемо са тест.хтмл. Дакле, појединачне функције за позадину боја је оно што сам овде откуцао. Дозволите ми да померите мало. 

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

Било би лепо кад бих могао имају више општи приступ. Па, прво ћемо да погледамо шта тих пет функције су доцумент.гетЕлементБиИд цолорДив.стиле.бацкгроунд = љубичаста, зелена, наранџаста, црвена, и плаво, респективно. Дакле, није посебно најбољи дизајн. 

Следећи сет тастера Ја сам се сам написао једна функција зове мењају боју која очигледно прихвата низ као свој аргумент. Дакле, ово је мало боље. Љубичаста, зелена, наранџаста, црвена, плава је сада аргумент. Тако сам написао општији Случај ЈаваСцрипт функција, што може да изгледа отприлике овако. Ја сам у пролазу. Ова функција је промена боје Очекивао аргумент који се зове боја. А ја кажем подесите боја позадине боји. Дакле, овде представља оно што сам овде. Дакле, то је мало боље. 

Али би могао да боље од тога. Ако одемо доле да погледамо у ситуацији догађај Хандлер, Сада сви ови позиви изгледају исто. Ако се сећате за наше дискусија о управљање догађајима, Ја могу добити информације о томе који од ови тастери су кликнули и користи га. 

И тако у евент.ЈаваСцрипт, ја сам писани промена боје догађај, који схвати које дугме је кликнуо. То је окидач објекат линија. А онда овде, постаје стварно Ворди. Али оно што ја радим је сам постављање позадине боја за триггерОбјецт иннер.ХТМЛ. То је текст у између дугмади тагова. 

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

Али тастер који сам имао, ако узмемо други поглед, Приметићете да је текст постоји написан са великим П за љубичасте. А онда на самом дно овде, очигледно покушати да уради ово користећи јКуери као добро. И у овом случају, нисам стварно позивање функција уопште. Управо сам рекао класу да сам користи за овог дугмета је дугме јК. То је то. 

Па како јКуери знам шта да радим? Па, ово је једна од предности сласх недостатке јКуери. То може да дозволи да радим ствари веома сажето, али можда не као интуитивно. Можда они остала три направи мало више осетити оно што ја радим. Овде, међутим, шта се дешава? 

Очигледно, стварајући анонимни функција који учитава кад год мој документ је спремна, тако доцумент.реади, нека функција ће се догодити. У суштини, када је документ спреман? То је када се мој страна учита. 

Дакле, чим ми је страна учита, Следећи функцију је увек спреман. Каже, ако је објекат типа јКБуттон, или ако класа јКБуттон је кликнуо, изврши ову функцију. Ево два анонимна функције, оне задане унутар другог. 

Дакле, мој цео контекст овде до сада је моја страна када се учитава се зове ову функцију. И ова функција чека за дугме да се кликне. И када се кликне дугме, јК Тастер посебно се кликне, она позива ова друга функција, која се одвија да подесите позадину боја цолорДив да буде год текст је између тагова. 

То је појам које дугме је кликнуо. Иначе, ово је врста понаша слично неком догађају. То је само на исти начин сам изразили ово јКуери. Опет, то је вероватно много више застрашујуће. Није јасно као нешто као евент.јс, што је можда мало више опсирније, али мало мање застрашујуће. 

Али ако свратим у моју бровсер прозор, ако почнем цлицкинг-- добро, то се променило у љубичасто. Ово је зелено коришћењем метода ниске. Ово је наранџаста помоћу догађај руковалац. 

Ово је црвена користећи јКуери, зар не? Сви су управо понашају исто. Они раде користећи различита приступи решавању проблема. Има много више јКуери онда свакако смо ће говорити о у овом видеу. Али, ако желите да сазнате више, можете идите на јКуери врсте документације и научити доста више о ово врло флексибилан библиотека, која је супер за то страни клијента скриптинг као што је оно што смо радили да манипулишу изглед и осећају наше веб странице са Објецт Модел документа. Ја сам Доуг Лојд. Ово је ЦС50.