Doug LLOYD: F'dan il-video, ridna li jgħajtu attenzjoni separata għal ħafna partikolari element tad JavaScript li inti tista 'ssib handy meta int tibda biex jaħdmu fuq manipulazzjoni paġni web u tibdil fil-kontenut tal-paġna web tiegħek fuq il-fly. U dak l-kunċett ta ' l-Mudell Għan Dokument. Allura kif rajna fil-video tagħna fuq JavaScript, oġġetti huma flessibbli ħafna. U jistgħu jkun fihom diversi oqsma. U jekk aħna ma jmorru fil-lott ta ' dettall, f'dawk l-oqsma jew il-proprjetajiet, li nixtiequ probabbilment aktar xieraq jsejħulhom fil-kuntest ta 'oġġett, anke dawk il-proprjetajiet jistgħu jkunu oġġetti oħra. U ġewwa ta 'dawk l-oġġetti jista 'jkun oġġetti oħra. 

Inti għandek dan l-oġġett kbir ħafna ma 'lott ta' oġġetti oħra ġewwa ta 'dan, li tip ta' toħloq din l-idea ta 'siġra kbira. Issa, id-dokument oġġett huwa oġġett speċjali ħafna fil JavaScript li torganizza web kollu tiegħek paġna taħt dan it-tip ta 'umbrella ta 'oġġett. U għalhekk ġewwa tad-dokument oġġett huma oġġetti li jippreżentaw il-kap u l-korp tal-paġna web tiegħek. 

Ġewwa ta 'dawn huma l-oħra oġġetti, eċċetera, eċċetera, sakemm page tiegħek web kollu għandu ġew organizzati dan l-oġġett big. X'hemm-rasu hawn, id-dritt? Well, nafu kif taħdem ma 'oġġetti fil JavaScript. 

Mela jekk ikollna oġġett li tirreferi għall-paġna tagħna web kollu, li ifisser billi ċċempel il korretta metodi li jimmanipulaw dak l-oġġett jew timmodifika ċerti tal-proprjetajiet tiegħu, aħna tista 'tibdel l-elementi ta paġna tagħna programmatically użu JavaScript minflok li għall-kodiċi affarijiet ma, ngħidu aħna, HTML. Allura hawnhekk eżempju ta ' sempliċi ħafna web page, right? Huwa ltqajna tags HTML, ras. 

Ġewwa ta hemm titolu, bonjour dinja. Imbagħad I jkollhom korp. Ġewwa dan, għandi tliet affarijiet differenti. I jkollhom tikketta header h2, paragrafu, u rabta. Din hija paġna web sempliċi ħafna. 

Ukoll, dak id-dokument jista toġġezzjona għal dan look like? Ukoll, huwa ftit scary forsi fl-ewwel. Imma huwa verament ftit siġra kbira. U fl-għerq ħafna ta 'dan huwa dokument. 

Ġewwa tad-dokument hija ieħor oġġett li jirreferu għall-HTML tal-paġna tiegħi. U l-HTML tal-paġna tiegħi hija kollha ta 'dan. U allura l ġewwa tal-HTML oġġett, I jkollhom oġġett ras, li jirreferi għall kollox hemm. 

U ġewwa minnhom hemm, I jkollhom oġġett titolu. U ġewwa minnhom hemm, I jkollhom ieħor joġġezzjonaw li jinsab biss bonjour dinja. I jista 'jkollhom korp tiegħi rappreżentata bħal dan. 

Ġewwa tal-ġisem tiegħi, I jkollhom h2 oġġett u oġġett p minflok il-paragrafu u oġġett ta 'rabta. U hekk dan ġerarkija kollha jistax jiġi rappreżentat bħala siġra big ma 'lottijiet ta ftit iżgħar affarijiet li joħorġu minnha. Issa, naturalment, meta aħna qed programmazzjoni, aħna ma naħsibx ta 'affarijiet bħal siġra kbira. Irridu naraw reali Kodiċi affarijiet relatati. 

U fortunatament, nistgħu jużaw għodod iżviluppatur tagħna li attwalment tagħti ħarsa lejn oġġett dokument din il-websajt tal. U ejja tagħmel dan. Hekk stajt fetħet tab browser. 

U stajt fetħet Developer Tools. U fil video tiegħi fuq JavaScript, I semma li l-console mhuwiex someplace biss fejn aħna istampar informazzjoni, huwa wkoll post fejn nistgħu informazzjoni input. F'dan il-kuntest, dak li Jien se ngħid huwa Nixtieq li terġa 'lura id-dokument oġġetti, so I tista 'tibda li jkollhom ħarsa lejn din. Allura kif tista 'nagħmel dan? Ukoll, jekk irrid jorganizzawh verament nicely, Jien se ngħid console.dir, D-I-R. Issa, I-użu console.log għal ftit print xi ħaġa sempliċi ħafna. Imma jekk irrid li jorganizzaw dan ġerarkikament bħal oġġett, Irrid tip ta 'struttura bħal struttura direttorju. 

So I jridu console.dir dokument. Jien ser hit Ikteb. U d-dritt taħtha issa, u jien ser zoom fil hawn, Stajt ltqajna dan id-dokument rispons bi vleġġa ftit li jmiss lilu. Issa, meta I miftuħa dan vleġġa, hemm għaddej li jkun hemm ħafna ta 'għalf. 

Iżda aħna qed tmur biex jinjoraw ħafna ta 'dan u biss tip ta' fokus fuq l-aktar parti importanti, hekk aħna tista 'tibda biex jinnaviga dan id-dokument. Hemm ħafna aktar għall-DOM minn biss lymph nodes u tfal ġenitur. Hemm ħafna ta 'għalf anċillari. 

Hekk jien ser tiftaħ dan up. U hemm lott kollu ta 'għalf li pops up. Iżda kollha I kura dwar huwa dritt hawn, lymph tfal. Ejja miftuħa li sa. 

Ġewwa tal hemm nara xi ħaġa familjari, HTML. Allura ġewwa tad-dokument tagħna livell wieħed isfel, HTML. I miftuħa li sa. X'qed nistennew? 

Jekk inti recall minn dijagramma tagħna, dak li għandu insibu ġewwa tal HTML? Liema tnejn lymph huma taħtha fil-siġra? Ejja issir taf. Aħna jiftħu HTML. Aħna jinżlu għal lymph tfal tagħha. 

Pop miftuħa. Hemm ras u l-ġisem. U aħna tista 'tiftaħ il-kap. Mur fil lymph tfal tagħha. Ukoll, hemm it-titolu. 

U aħna tista 'tmur fuq u fuq bħal dan għal dejjem. Stajna nagħmlu dan mal-ġisem kif ukoll. Iżda hemm mod għalina biex tħares lejn id-dokument organizzat bħala oġġett kbir. U jekk inħarsu lejn huwa kbir oġġett li jistenna ħafna bħal kodiċi, dan ifisser li aħna tista 'tibda biex jimmanipulaw dan l-oġġett big użu kodiċi għall-bidla dak tagħna website jistenna u jħoss simili. 

Allura dak għodda pretty qawwija għandna għad-dispożizzjoni tagħna issa. Allura kif aħna biss raw, il- dokument oġġett innifsu u kollha ta 'l-oġġetti ġewwa ta' dan għandhom proprjetajiet u l-metodi, just bħal kull oġġett ieħor li konna ilha taħdem magħhom JavaScript. Iżda nistgħu nużaw dawk il-proprjetajiet u jużaw dawn il-metodi biex tip ta 'drill stabbiliti mid-dokument kbar u jiksbu iktar baxxi u aktar baxxa, ifjen u ifjen qmuħ ta 'dettall, sakemm aħna nikseb għal biċċa speċifika ħafna ta 'tagħna web page li aħna trid tibdel. 

U meta aħna aġġornament proprjetajiet tal- Dokument Object jew sejħa dawn il-metodi, affarijiet jista 'jiġri fuq il-paġna web tagħna. U aħna ma bżonn tagħmel xi iġjeniċi li jkollhom dawk il-bidliet jidħlu fis-seħħ. 

U li l-kapaċità pretty jibred biex jkollhom meta aħna qed jaħdmu ma 'kodiċi. Allura dak li huma wħud mill dawn il-proprjetajiet li huma parti minn dokument oġġett? Well, inti probabilment raw ftit minnhom verament malajr kif konna iżżippjar permezz tal--dokument ġgant oġġett aħna biss raw fil-web browser. 

Iżda ftit dawn il-proprjetajiet Jista 'jkun affarijiet simili HTML ġewwa. U inti tista 'anki recall me jużaw din fil-video JavaScript fl-aħħar nett meta I kien jitkellem dwar avvenimenti. Liema kien dan HTML ġewwa? Ukoll, huwa biss x'hemm fl bejn il-tags. 

U għalhekk l-HTML ġewwa, per eżempju, tat-titolu tag, jekk kellna jinżammu għaddejjin fil li eżempju mument ilu, kien ikun bonjour dinja. Dan kien it-titolu tal-paġna tagħna. Proprjetajiet oħra jinkludi l-isem node, li huwa l-isem ta 'HTML element bħal titolu. ID, li hija l-ID jattribwixxu ta 'element HTML. 

Ifakkar li nistgħu jindikaw apposta elementi speċifiċi tad HTML tagħna ma 'attribut ID, li normalment taqa 'fil handy fil-kuntest ta' CSS, speċifikament. Node ġenitur, li hija referenza għal x'hemm biss up fuq lili fil-DOM. U l-lymph tfal, li hija referenza għall x'hemm stabbiliti hawn taħt lili. U rajna ħafna ta 'dak biss tħares permezz. Lymph tfal, li kif sirna iktar baxxi fil-siġra. 

Attributi, li jinsab biss firxa tal attributi tal-element HTML. Allura eżempju ta 'attributi jista jkun jekk għandek tag immaġni, dan normalment ikollu attribut sors, forsi għoli u attribut wisa. U għalhekk li jkun biss firxa ta 'kollha tal-attributi assoċjati ma 'dak l-element HTML. 

Style hija waħda oħra li ma jirrappreżentaw il-CSS grafika ta 'element partikolari. U aktar tard f'dan video, aħna ser speċifikament stil lieva biex jagħmlu koppja ta 'bidliet websajt tagħna. Għalhekk dawn huma xi proprjetajiet. 

U hemm ukoll xi metodi li nistgħu użu li wkoll aktar malajr forsi iżolat elementi tal-Għan Dokument. Forsi, l-aktar versatili li dawn ikunu getElementById. So I jista 'jgħid xi ħaġa simili, għaliex ftakar huwa metodu tad-Dokument Joġġezzjonaw, document.getElementById. 

U ġewwa minn dawk parentesi, speċifika element HTML ma ID partikolari attribut li stajt qabel stabbiliti, u jien ser immedjatament mur dritt f'dak l-element tal-websajt globali. So I ma jkollhom forsi iħaffer down permezz ta 'kull saff wieħed. I tista 'biss tuża dan il-metodu li jsibuha, tip simili jfittxu sħana missili, id-dritt? Hija biss tmur u ssib eżattament dak huwa tfittex. 

GetElementsByTagName hija simili ħafna fl-ispirtu. Forsi dan se ssib kollha ta 'l- tags kuraġġużi jew kollha tal-lametti tal p u jagħtu me firxa ta 'kollox li I jistgħu mbagħad jaħdmu ma '. appendChild żżid xi ħaġa livell wieħed fl-siġra. 

So I tista 'żżid ġdid kollu element livell wieħed aktar baxx. Jew I tista 'tneħħi element li l- wieħed livell aktar baxx kif ukoll jekk irrid li tħassar xi ħaġa minn paġna tal-web tiegħi. Issa, nota kodifikazzjoni Veloċi u ta 'malajr uġigħ ta 'ras iffrankar nota, nisperaw. 

getElementById-- l d huwa zghar. I ma jista 'jgħidlek kif ħafna drabi I jkollhom getElementById użati u kapitalizzat ld hemmhekk. Għaliex dan huwa verament komuni. Jekk aħna tikteb il-kelma ID, huwa normalment kapital I kapital D. U l-kodiċi tiegħi biss ma taħdimx. U ma nistax figura għaliex. Dan huwa tassew, tassew, tassew bug komuni li kulħadd jagħmel, anke esperti li għandhom qed tagħmel dan għal dejjem. Hekk biss tkun taf, getElementById, li d hija zghar. U wieħed jittama, li jiffranka diversi minuti tal-anqas ta 'heartache. 

Allura dak li ma dan kollu tgħidilna? Għandna dawn il-metodi. Għandna dawn il-proprjetajiet. Issa, jekk nibdew mill dokument, id-dokument. kwalunkwe, aħna issa jistgħu jsiru xi biċċa waħda tal-paġna web tagħna li aħna rridu li jużaw JavaScript biss billi ċċempel dawn il-metodi u jitqawwa l-proprjetajiet li nsibu f'diversi postijiet. 

Dan jistgħu jiksbu wordy, dan document.getElementByID, forsi jkollhom tikketta l-isem twil, forsi inti tagħmel sejħiet aktar tard. Affarijiet jistgħu jiksbu ftit wordy. U kif programmaturi, kif inti stajt probabbilment jidhru f'ħafna minn dawn il-videos, aħna ma simili affarijiet wordy. 

Aħna nixtiequ li tkun tista 'tagħmel affarijiet malajr. Allura aħna tixtieq aktar konċiż biex ngħid xi ħaġa. Allura dan it-tip ta 'twassal għall- kunċett ta 'xi ħaġa imsejħa jQuery. Issa jQuery mhuwiex JavaScript. Mhuwiex parti mill JavaScript. 

Huwa librerija li kien miktub minn xi programmaturi JavaScript madwar 10 snin ilu. U l-għan tagħha huwa li jissimplifika dan x'hemm imsejħa scripting naħa tal-klijent, li hija bażikament dak li aħna kienu biss jitkellem dwar ma manipulazzjonijiet DOM. U hekk jekk jien ridt li timmodifika l- kulur fl-isfond tal-paġna web tiegħi, forsi a Div speċifiku. 

Hawnhekk, jien apparentement jkollna ElementById colorDiv. U nixtieq li jistabbilixxu kulur fl-isfond tagħha. Jekk jien biss bl-użu pur JavaScript użu tal-Mudell Għan Dokument, li l-lott ta 'għalf, id-dritt? document.getElementByID colorDiv.style.backgroundColor = aħdar. 

Whew. Dan kien ħafna jgħidu. Huwa ħafna għat-tip, wisq. U għalhekk fil jQuery, nistgħu ngħidu forsi dan ftit aktar konċiż. Il-kummerċ off kemm jekk dan huwa forsi ftit ftit aktar cryptic kollha f'daqqa, id-dritt? 

Mill-inqas il twil huwa daqsxejn aktar spjegazzjoni dwar dak li aħna qed tagħmel. Dan is-sinjal dollaru, parentesi, kwotazzjoni waħda, hash, colorDiv, id-dritt? Xi tfisser? Ukoll, li bażikament biss document.getElementByID colorDiv. 

Iżda huwa dan it-tip ta 'tajpisti mod ta 'kif isir billi tuża jQuery. Ejja ħu ħarsa issa fi ftit ta 'modi differenti li I jista 'attwalment tuża din Dokument Għan Mudell li jimmanipulaw biċċiet ta 'sit tiegħi. B'mod partikolari, aħna qed tmur li tkun qed taħdem fuq manipulazzjoni il-kulur ta 'partikolari Div, colorDiv, fuq paġna web. Mela ejja tagħti ħarsa lejn dak. Kull dritt. Hekk jien fuq paġna. Huwa sejjaħ test.html meta inti download dan jekk inti tixtieq li tinker ma 'dan. U stajt ltqajna mazz ta ' buttuni fuq din il-paġna. U jien qal funzjonijiet individwali għall-kulur fl-isfond, vjola, aħdar, oranġjo, aħmar, blu, wieħed funzjoni waħda għall-kulur fl-isfond, avveniment handler għall-kulur fl-isfond, u l-użu jQuery. What am I jitkellem dwar meta qed nagħmel dan? Allura aħna stajt tidher l-buttuni. Issa, ejja tagħti ħarsa lejn xi wħud mill-source code hawn. Aħna ser tibda bil test.html. Funzjonijiet Allura individwali għall-isfond kulur huwa dak li stajt ittajpjat hawn. Let me iscroll ftit. 

U tkun taf avviż li I jkunu definiti dawn il-buttuni ngħid meta din il-buttuna hija għafast, sejħa tal-funzjoni dawran vjola. Meta din il-buttuna hija click, minflok, sejħa tal-funzjoni dawran aħdar, dawran oranġjo, dawwar aħmar, jsir blu. Inti tista 'probabbilment raden li din hija forsi mhux l-aħjar disinn sens, id-dritt? 

Ikun sbieħ jekk I jistgħu ikollhom approċċ aktar ġenerali. Ukoll, qabel aħna ser tagħti ħarsa lejn dak dawn il-ħames funzjonijiet huma document.getElementByID colorDiv.style.background = vjola, aħdar, oranġjo, aħmar, u blu, rispettivament. Allura, mhux partikolarment l-aħjar disinn. 

Is-sett li jmiss ta 'buttuni Għandi huwa stajt bil-miktub funzjoni waħda msejħa bidla fil-kulur li apparentement jaċċetta string bħala argument tagħha. Allura dan huwa ftit aħjar. Vjola, aħdar, oranġjo, aħmar, blu issa huwa argument. Hekk stajt bil-miktub aktar ġenerali każ JavaScript funzjoni, li tista 'tidher xi ħaġa bħal din. Jien tgħaddi in. Dan il-kulur bidla funzjoni huwa jistennew argument imsejħa kulur. U jien qal stabbiliti l- kulur fl-isfond għall-kulur. Allura hawnhekk jirrappreżenta dak li stajt ltqajna hawn. Allura dak daqsxejn aħjar. 

Imma I jista 'jkun kapaċi tagħmel aħjar minn dik. Jekk aħna jinżlu għal tagħti ħarsa lejn is-sitwazzjoni avveniment handler, issa dawn is-sejħiet kollha tħares l-istess. Jekk inti recall għall tagħna diskussjoni fuq handlers avveniment, I tista 'tikseb informazzjoni dwar liema minn dawn il-buttuni kien għafast u l-użu li. 

U għalhekk fil event.JavaScript, stajt miktub avveniment bidla fil-kulur, li figuri liema buttuna kienet għafast. Dik hija l-linja oġġett grillu. U allura hawnhekk, jiġrilha verament wordy. Imma dak li qed nagħmel huwa jien tistabbilixxi l-isfond kulur li triggerObject inner.HTML. Dik hija l-test fl bejn l-tags buttuna. 

U mbagħad I apparentement jkollhom li tistabbilixxi li zghar. U li kif nista 'tikkonverti kollu spaga biex zghar fil JavaScript użu li metodu li zghar. Għaliex meta I jistabbilixxu kulur, kif jien tipprova tagħmel hawnhekk, il-kulur għandu jkun kollu zghar. 

Iżda l-buttuna li kelli, jekk nieħdu ħarsa ieħor, avviż li t-test hemm miktub bil-kapital P għall vjola. U mbagħad fl-ħafna qiegħ hawn, I apparentement tipprova tagħmel dan bl-użu jQuery ukoll. U f'dan il-każ, jien ma attwalment sejħa funzjoni fil-livelli kollha. Stajt biss qal il-klassi li jien jużaw għal dan l-buttuna buttuna JQ. Daqshekk. 

Allura kif ma jQuery taf dak li qed nagħmel? Ukoll, dan huwa wieħed mill-vantaġġi slash iżvantaġġi ta 'jQuery. Hija tista 'tippermetti lili biex tagħmel affarijiet konċiż ħafna, imma forsi mhux kif intuwittivament. Forsi dawk tlieta l-oħra jagħmlu ftit aktar sens dak li qed nagħmel. Hawnhekk, għalkemm, x'inhu għaddej? 

Apparentement, il-ħolqien funzjoni anonima li t-tagħbijiet kull meta dokument tiegħi hija lesta, hekk document.ready, xi funzjoni jiġri. Bażikament, meta huwa dokument lesta? Huwa meta page tiegħi mgħobbija. 

Dan malajr kemm jista paġna tiegħi mgħobbija, l wara funzjoni huwa dejjem lest. Hija tgħid, jekk oġġett ta 'tip jQButton, jew jekk klassi jQButton ġie għafast, tesegwixxi din il-funzjoni. Allura hawnhekk żewġ funzjonijiet anonimi, wieħed definit ġewwa l-oħra. 

Allura kuntest kollu tiegħi hawnhekk s'issa hija paġna tiegħi meta tagħbijiet li hija ssejjaħ il-funzjoni. U din il-funzjoni hija stennija għal buttuna biex jiġu għafast. U meta buttuna hija għafast, JQ buttuna speċifikament huwa għafast, jitlob dan ieħor funzjoni, li se li tiffissa l-isfond kulur tal colorDiv li jkun tkun xi test huwa fl bejn il-tags. 

Dan huwa l-kunċett ta ' li button kienet għafast. Iżda xort'oħra, dan huwa tip ta ' iġib ruħu simili għal avveniment. Huwa biss bl-istess mod I jesprimi dan fil jQuery. Għal darb'oħra, huwa probabbilment ħafna aktar intimidanti. Mhuwiex ċar kemm xi ħaġa bħal event.js, li hija forsi ftit aktar verbose, iżda xi ftit inqas intimidanti. 

Imma jekk aħna pop lura lill-browser tiegħi tieqa, jekk nibda clicking-- ukoll, li biddel għal vjola. Dan huwa aħdar jintuża l-metodu string. Dan huwa oranġjo tuża l-avveniment handler. 

Dan huwa aħmar jużaw jQuery, id-dritt? Huma kollha jġibu ruħhom eżattament l-istess. Huma biss tagħmel dan bl-użu differenti approċċi biex isolvu l-problema. Hemm ħafna aktar biex jQuery allura aħna qed ċertament ser jitkellmu dwar f'dan il-video. Imma jekk inti tixtieq titgħallem aktar, inti tista mur l-tip ta 'dokumentazzjoni jQuery u jitgħallmu pjuttost ftit aktar dwar din il-librerija flessibbli ħafna, li hija kbira biex isir naħa tal-klijent scripting bħal dak li kienu qed jagħmlu li jimmanipulaw il-ħarsa u jħossu tal-paġna web tagħna mal-Mudell Għan Dokument. Jien Doug Lloyd. Dan huwa CS50.