Doug LLOYD: Šiame video norėjome sušukti atskirą dėmesį
kad labai ypač elementas JavaScript
kad jūs galite rasti patogu kai jūs pradedate
dirbti manipuliuoti tinklalapius ir keičiasi jūsų tinklalapio turinį
skristi.
Ir tai sąvoka Dokumentų Objekto modelį.
Taigi, kaip matėme mūsų vaizdo į JavaScript objektai yra labai lanksti.
>> Ir jie gali būti įvairiose srityse.
Ir nors mes ne eiti į Siuntos detalė, tie laukai ar savybės,
kad mes tikriausiai daugiau tinkamai juos vadina
į objekto kontekste, net tie savybės gali būti ir kitų objektų.
Ir viduje šių objektų Gali būti ir kitų objektų.
>> Jūs turite tai labai didelis objektas su kitų objektų daug
viduje ji, kokios rūšies sukuria šį dideliame medyje idėja.
Dabar, dokumentas objektas yra labai ypatinga objektas JavaScript
kuri organizuoja visą savo interneto puslapis pagal šią skėtis rūšiuoti
objekto.
Ir taip viduje dokumento objektas yra objektai pristatantys
galvos ir kūno jūsų tinklalapį.
>> Viduje jie yra kitos objektus, ir taip toliau, ir taip toliau,
kol visą savo interneto puslapis turi buvo organizuota tai didelis objektas.
Kas yra aukštyn kojom čia, tiesa?
Na, mes žinome, kaip dirbti su objektų JavaScript.
>> Taigi, jei mes turime objektas, nuoroda į visą mūsų tinklalapį, kad
reiškia paskambinus teisingas metodai manipuliuoti, kad objekto
arba pakeisti tam tikras jos savybių, mes
gali pakeisti elementus Mūsų puslapis programiškai
naudojant JavaScript, užuot koduoti dalykus su, tarkim, HTML.
Taigi čia Kuris iš pavyzdžių labai paprastas interneto puslapis, tiesa?
Jis gavo HTML žymes, galvą.
>> Viduje yra pavadinimas, hello world.
Tada aš turiu kūną.
Viduje, kad turiu Trys skirtingi dalykai.
Turiu H2 antraštė žymeles, paragrafas ir nuoroda.
Tai labai paprasta interneto puslapis.
>> Na, kas gali dokumentas prieštarauti šiam atrodo?
Na, tai šiek tiek baisu gal iš pradžių.
Bet tai tikrai tik didelis medis.
Ir tuo pat šaknies Tai dokumentas.
>> Viduje dokumentas yra kita objektas nuoroda į mano puslapį HTML.
Ir savo puslapyje HTML yra visa tai.
Ir tada viduje HTML objektas, turiu galvos objektą,
kuris nurodo viskas ten.
>> Ir viduje ten, Turiu pavadinimą objektą.
Ir viduje ten, aš turiu kitą prieštarauti, kad tik hello world.
Galėjau savo kūną atstovavo kaip šis.
>> Viduje mano kūną, aš turiu h2 objektas ir P objektas dalį
ir už nuorodą objektas.
Ir todėl tai visai hierarchijai gali būti atstovaujama kaip didelis medis
su daug mažesniu Little viskas išeina iš jos.
Dabar, žinoma, kai mes programavimo, mes
nemanau dalykų kaip didelis medis.
Mes norime matyti faktinis kodas susiję dalykai.
>> Ir, laimei, mes galime naudoti mūsų Kūrėjo įrankiai
realiai pažvelgti Ši svetainė dokumente objektas.
Ir tegul tai padaryti.
Taigi aš atvėrė naršyklės skirtuką.
>> Ir aš atvėrė Kūrėjo įrankiai.
Ir mano vaizdo JavaScript, aš paminėjo, kad konsolė nėra
tik kažkur, kur mes spausdinti informaciją
jis taip pat vieta, kur mes galime teikti informaciją.
Atsižvelgiant į tai, kas Aš ruošiuosi pasakyti
Norėčiau gauti atgal Dokumente objektai,
todėl galiu pradėti turėti į jį žiūrėti.
Taigi, kaip galėčiau tai padaryti?
Na, jei aš noriu organizuoti tai tikrai gražiai,
Aš ruošiuosi pasakyti console.dir, D-I-R. Dabar, aš naudoju console.log tiesiog atsispausdinti
kažką labai paprasta.
Bet jei aš noriu surengti šį hierarchiškai kaip objektas,
Noriu, kad ji tarsi struktūra kaip katalogo struktūrą.
>> Taigi noriu console.dir dokumentą.
Aš ruošiuosi paspauskite Enter.
Ir tiesiai po juo dabar ir aš priartinti čia
Aš turiu šį atsakymą dokumentą su mažai rodyklę prie jo.
Dabar, kai aš atidaryti šią rodyklę, ten bus daug dalykų.
>> Tačiau mes ketiname ignoruoti daug IT ir tiesiog rūšies dėmesio
ant svarbiausia dalis, todėl mes galite pradėti naršyti šį dokumentą.
Yra daug daugiau nei DOM tik tėvų mazgai ir vaiko mazgai.
Yra daug papildomos daug dalykų.
>> Taigi, aš ruošiuosi atidaryti tai padaryti.
Ir ten visai daug stuff, kuris pasirodo.
Bet viskas, ką aš rūpi čia, vaikas mazgai.
Leiskite atidaryti, kad iki.
>> Viduje yra matau kažkas pažįstamas, HTML.
Taigi viduje mūsų dokumente Vieno lygio, žemyn, HTML.
Aš atidarau, kad iki.
Ką mes laukiame?
>> Jei prisimenate iš mūsų schemoje, Ką turėtų randame viduje HTML?
Kas du mazgai yra po juo medyje?
Leiskite sužinoti.
Mes atverti HTML.
Mes eiti į savo vaikų mazgų.
>> Pop, kad atidaryti.
Yra galva ir kūnas.
Ir mes galime atverti galvą.
Eiti į jos vaikų mazgų.
Na, ten pavadinimas.
>> Ir mes galime eiti ir nuo panašaus į tai amžinai.
Mes galime tai padaryti su kūno, taip pat.
Bet yra mums pažvelgti būdas dokumentas organizuojamas kaip didelis objektas.
Ir jeigu pažvelgtume yra didelis objektas, kuris atrodo daug
kaip kodo, tai reiškia, kad galėtume pradėti manipuliuoti tai didelis daiktas naudojant
kodas pakeisti tai, ką mūsų svetainė atrodo ir jaučiasi.
>> Taigi, kad gana galingas įrankis mes turime mūsų žinioje dabar.
Taigi, kaip mes ką tik matėme, The Pats dokumentas objektas
ir visos jos viduje esančiais objektų turi savybes ir metodus, tiesiog
kaip bet kuris kitas objektas, kad mes dirbu su JavaScript.
Bet mes galime naudoti tas savybes ir naudoti šiuos metodus, tarsi išskleiskite
iš didelio dokumentu ir gauti mažesnis ir mažesnis ir mažesnis,
prabangiau ir prabangiau grūdai detalumas, kol mes
gauti labai konkrečios gabalas mūsų interneto puslapis, mes norime pakeisti.
>> Ir kai mes atnaujiname savybės Document Object arba skambinkite tuos metodus,
dalykai gali atsitikti mūsų interneto puslapyje.
Ir mums nereikia daryti bet gaivus turėti šie pakeitimai įsigaliotų.
>> Ir tai yra gana kietas gebėjimas turi, kai mes dirbame su kodu.
Taigi, kas yra kai kurie iš šių savybių kad yra dalis dokumento objektas?
Na, jūs tikriausiai matė pora iš jų tikrai greitai
kaip mums buvo zipping per milžinišką dokumento
objektas mes tiesiog matė naršyklėje.
>> Tačiau šių savybių pora gali būti dalykų, pavyzdžiui, vidinis HTML.
Ir galbūt net prisiminti mane naudojant tai JavaScript vaizdo
pačioje pabaigoje, kai aš buvo kalbama apie įvykius.
Kas buvo šis vidinis HTML?
Na, tai tik tai, kas tarp žymių.
>> Ir taip vidinis HTML pavyzdžiui, pavadinimo
žymeles, jei būtume nuolat vyksta į kad pvz prieš momentas,
Būtų buvę hello world.
Tai buvo mūsų puslapio pavadinimas.
Kitos savybės įtraukti mazgas vardą, kuris
yra HTML pavadinimas elementas, pavyzdžiui, pavadinimą.
ID, kuris yra ID atributas HTML elementas.
>> Prisiminkite, kad mes galime specialiai rodo specifiniai elementai mūsų HTML
su ID atributas, kuris paprastai praverčia CSS kontekste,
specialiai.
Tėvų mazgas, kuris yra nuoroda į kas tik iki virš manęs į DOM.
Ir vaikas mazgai, kuris yra nuoroda į tai, kas apačioje mane.
Ir mes matėme, kad daug tiesiog ieško per.
Vaiko mazgai, tai, kaip mes turime mažesnis ir mažesnis į medį.
>> Savybės, tai tik masyvas atributų HTML elementas.
Šitaip atributų pavyzdys galėtų , jei turite vaizdo žymeles,
ji paprastai turi šaltinio atributas, gal aukštis ir plotis atributui.
Ir taip, kad būtų tiesiog masyvas Visų požymiai, susijusių
su tuo HTML elementas.
>> Stilius yra dar vienas, kad ar atstovauti CSS
modeliavimo iš konkretaus elemento.
O vėliau ir tai vaizdo, mes specialiai
sverto stilius padaryti pora pokyčių į mūsų svetainę.
Taigi tie keletas savybių.
>> Ir taip pat yra keletas metodai, kad mes galime
naudoti taip pat greičiau gal izoliuoti elementai dokumento objektas.
Galbūt labiausiai universalus Šių Būdamas getElementById.
Taigi, aš gali pasakyti kažką panašaus, nes prisiminti tai dokumento metodas
Objektas, document.getElementById.
>> Ir viduje tų skliausteliuose, nurodykite HTML elementas su konkrečiu ID
atributas, kad aš anksčiau nustatyti, ir aš iš karto
eiti tiesiai į tą elementą į bendrą svetainę.
Taigi, aš neturiu gal gręžti žemyn per kiekvieną sluoksnį.
Aš galiu tik naudoti šį metodą, kad jį rasti, tarsi kaip šilumos siekimo raketos,
tiesa?
Jis tiesiog eina ir randa ką jis ieško.
>> GetElementsByTagName yra labai panašus į dvasią.
Gal tai būtų surasti visus Plikas žodžius arba visos p žymės
ir duoti man visko masyvo kad galėčiau tada dirbti.
appendChild prideda kažką vienas lygis nustatytas medžio.
>> Taigi aš galiu pridėti visą Naujas elementas vienas lygis žemesnis.
Arba galiu pašalinti elementą, kad yra vienas lygis mažesnis, taip pat, jei noriu
ištrinti kažką iš mano puslapyje.
Dabar, greitas kodavimas pastabą ir greitas galvos skausmas taupymo dėmesį, tikiuosi.
>> getElementById-- D yra mažosios.
Aš negaliu pasakyti jums, kiek kartų aš turiu Naudota getElementById ir kapitalizuojamos
D ten.
Nes tai tikrai bendra.
Jei mes rašome žodį ID, tai Paprastai kapitalą Aš kapitalo D.
Ir mano kodas tiesiog neveikia.
Ir aš negaliu suprasti, kodėl.
Tai tikrai, tikrai, tikrai bendra klaida, kad visi daro,
net ekspertai, kurie turi buvo tai amžinai.
Taigi tiesiog reikia žinoti, getElementById, kad d yra mažosios.
Ir tikiuosi, kad taupo jums keletą minučių bent sielvartas.
>> Taigi, ką visa tai mums pasakyti?
Mes turime šiuos metodus.
Mes turime šias savybes.
Dabar, jei mes pradėsime nuo dokumentas, dokumentas.
kas, dabar mes galime gauti bet vienetinį mūsų internetiniame puslapyje
kad mes norime naudojant "JavaScript" tik paskambinę šiuos metodus
ir sverto savybes kad randame įvairiose vietose.
>> Tai gali gauti sakytinis, šis document.getElementById,
gal turi ilgą žymės pavadinimą, Gal daugiau skambučių vėliau.
Ką gali gauti šiek tiek ištęstas.
Ir kaip programuotojai, kaip jūs tikriausiai matė daugelis iš šių vaizdo įrašų,
mums nepatinka žodinius dalykų.
>> Mums patinka, kad būtų galima daryti dalykus greitai.
Taigi mes norėtume daugiau glausta būdas pasakyti kažką.
Taigi šis veda prie Rūšiuoti sąvoka vadinamąjį JQuery.
Dabar JQuery yra ne "JavaScript".
Tai ne dalis JavaScript.
>> Tai yra biblioteka, kuri buvo parašyta Kai kurie JavaScript programuotojai
maždaug prieš 10 metų.
Ir jos tikslas yra supaprastinti šią kas vadinamas kliento pusėje skriptų, kurie
iš esmės yra tai, kas mes buvome tik kalbame apie su DOM manipuliacijos.
Ir todėl, jei aš norėjau modifikuoti fono spalva mano internetiniame puslapyje, gal
konkretus DIV.
>> Čia, aš, matyt, vis ElementById colorDiv.
Ir aš noriu nustatyti savo fono spalvą.
Jei aš tik naudojant gryną JavaScript naudojant Document Object Model,
tai daug dalykų, tiesa? document.getElementById
colorDiv.style.backgroundColor = žalia.
>> FIU.
Tai buvo daug ką pasakyti.
Tai daug rašyti, taip pat.
Ir taip JQuery, mes gal galime pasakyti Tai šiek tiek daugiau glaustai.
Off yra tai prekyba yra gal šiek tiek šiek tiek daugiau paslaptingas visi staiga,
tiesa?
>> Bent kol yra šiek tiek daugiau aiškinamajame, ką mes darome.
Tai dolerio ženklas, skliaustai, vieno citata, maišos, colorDiv, tiesa?
Ką tai reiškia?
Na, tai iš esmės tik document.getElementById colorDiv.
>> Bet tai šis sutrumpinta Rūšiuoti būdas tai daryti naudojant JQuery.
Tegul tik pažvelgti dabar bent keliais skirtingais būdais pora
kad aš iš tiesų gali naudoti šią Document Object
Modelis manipuliuoti vienetų mano svetainę.
Visų pirma, mes ketiname reikia dirbti manipuliuoti
tam tikros spalvos Div, colorDiv, tinklalapyje.
Taigi tegul Tuo išvaizdą.
Gerai.
Taigi, aš ant puslapio.
Tai vadinama bandymas.html kai atsisiunčiate tai, jei norite žaisti su tai.
Ir aš turiu krūva Mygtukai šiame puslapyje.
Ir aš sakau Specialias funkcijas fono spalvos, violetinė, žalia,
oranžinė, raudona, mėlyna, vienas funkcija fono spalvos, renginys prižiūrėtojas
fono spalvos, ir naudojant JQuery.
Ką aš kalbu kai darau tai?
Taigi mes matėme mygtukus.
Dabar galime pažvelgti kai kodo čia.
Pradėsime testas.html.
Taigi atskiros funkcijos fone spalva yra tai, ką aš čia įvedėte.
Leiskite man pereiti truputį.
>> Ir jūs pastebėsite, kad aš apibrėžė šiuos mygtukus
pasakyti, kada šis mygtukas paspaudžiamas, skambinkite funkciją įjungti violetinė.
Kai šis mygtukas spustelėkite, o, skambinti funkcija žalias,
paversti oranžinė, parausti, mėlynuoti.
Jūs tikriausiai galite atspėti, kad tai galbūt ne geriausias dizainas
jausmas, tiesa?
>> Būtų malonu, jei galėčiau turėti bendresnį požiūrį.
Na, visų pirma mes pažvelgsime ką tie penki funkcijos
document.getElementById colorDiv.style.background = violetinė,
žalia, oranžinė, raudona, ir mėlyna, atitinkamai.
Taigi, ne itin geriausias dizainas.
>> Kitas rinkinys mygtukai Aš tai parašiau
viena funkcija vadinama keisti spalvą, kuri, matyt,
priima eilutę kaip savo argumentą.
Taigi, tai yra šiek tiek geriau.
Violetinė, žalia, oranžinė, raudona, Mėlyna dabar yra argumentas.
Taigi, aš parašiau bendresnis atveju JavaScript funkcija,
kurios gali atrodyti kažką panašaus į tai.
Aš einančios.
Ši funkcija keičia spalvą yra tikisi argumentą, pavadintą spalva.
Ir aš sakau nustatyti fono spalva spalvai.
Taigi čia yra tai, ką aš čia turiu.
Štai šiek tiek geriau.
>> Bet aš galėtų padaryti geriau nei tai.
Jei mes eiti pažvelgti renginio vedlių situacijai,
dabar visi šie skambučiai atrodo vienodai.
Jei prisimenate už mūsų diskusija apie įvykį tvarkytojų,
Galiu gauti informaciją apie kuri iš Šie mygtukai buvo paspausti ir ją naudoti.
>> Ir taip event.JavaScript, aš parašyta keičia spalvą įvykis, kuris
skaičiai, kurie mygtukas paspaudėte.
Štai gaidukas objektas linija.
Ir tada čia, tai bus tikrai sakytinis.
Bet ką aš darau yra aš nustatant fonas
spalva triggerObject inner.HTML.
Štai į tekstą tarp mygtuko žymes.
>> Ir tada aš matyt turi nustatyti, kad jis mažosiomis.
Ir tai, kaip aš galiu konvertuoti visą string mažosiomis JavaScript naudojant
šis metodas mažosiomis raidėmis.
Nes kai aš nustatyti spalvą, kaip aš bandau padaryti čia
spalva turi būti visi mažosiomis raidėmis.
>> Bet mygtuką, kad turėjau, jei mes atsižvelgti kitą išvaizdą,
pastebėsite, kad tekstas yra parašyta kapitalo P-violetinė.
Ir tada labai dugnas čia, aš, matyt,
pabandyti ir padaryti naudodami JQuery, kaip gerai.
Ir šiuo atveju, aš ne iš tikrųjų paskambinę funkciją ne visiems.
Aš ką tik sakė klasę, kad aš naudodamas šį mygtuką yra JQ mygtuką.
Viskas.
>> Taigi, kaip JQuery žinoti, ką aš darau?
Na, tai yra vienas iš privalumų slash trūkumus JQuery.
Jis gali leisti man daryti dalykus labai glaustai, bet gal ir ne
kaip intuityviai.
Gal tie kiti trys padaryti šiek tiek daugiau pajusti, ką darau.
Čia, nors, kas vyksta?
>> Matyt, sukurti anoniminis funkcija
kad apkrovos, kai mano dokumentas yra pasirengusi, todėl document.ready,
kai funkcija nutiks.
Iš esmės, kai yra dokumentas, paruoštas?
Tai kai mano puslapis buvo įkeltas.
>> Taigi kuo greičiau mano puslapis buvo įkelta, Žemiau funkcija yra visada pasiruošę.
Ji sako, jei tipo jQButton objektas, arba jei klasė jQButton buvo paspaudėte,
vykdyti šią funkciją.
Taigi čia du anoniminiai funkcijos, vienas apibrėžta viduje į kitą.
>> Taigi visą mano kontekste Čia iki šiol yra mano puslapis
kai jis įkelia ji vadina šią funkciją.
Ir ši funkcija laukia už vieno mygtuko būti paspaudėte.
Ir kai mygtukas paspaudžiamas, JQ mygtuką specialiai yra paspaudėte,
jis tai vadina kita funkcija, kuri vyksta
nustatyti foną spalva colorDiv būti
kokia tekstas yra tarp žymių.
>> Tai sąvoka kurį mygtuką paspausti buvo.
Bet kitaip, tai yra rūšiuoti elgiasi panašus į renginį.
Tai tiesiog tas pats kaip aš būtų išreikšti tai JQuery.
Vėlgi, tai tikriausiai daug bauginanti.
Tai nėra aišku, kaip kažkas panašaus event.js,
kuri gal šiek tiek daugiau daugiažodis, bet šiek tiek mažiau
bauginanti.
>> Bet jei mes grįžti į mano naršyklėje langas, jei aš pradedu clicking-- gerai,
kad pasikeitė violetinė.
Tai žalia naudojant string metodą.
Tai apelsinų naudojant aptarnavimo įvykio.
>> Tai raudona naudojant JQuery, tiesa?
Jie visi elgiasi lygiai taip pat,.
Jie tiesiog tai padaryti naudojant skirtingą metodus siekiant išspręsti problemą.
Yra daug daugiau JQuery tada mes tikrai
ketiname kalbėti apie šio vaizdo.
Bet jei norite sužinoti daugiau, galite eiti į JQuery rūšies dokumentus
ir mokytis gana šiek tiek daugiau apie Tai labai lanksti biblioteka, kuri
yra puikus daro kliento pusėje skriptų pavyzdžiui, ką mes darome
manipuliuoti išvaizdą ir jaustis mūsų internetiniame puslapyje
su Document Object Model.
Aš Doug Lloyd.
Tai CS50.