Doug Lloyd: Nan videyo sa a, nou te vle yo rele soti atansyon separe
nan yon trè patikilye eleman nan JavaScript
ke ou ta ka jwenn sou la men lè w ap kòmanse
nan travay sou manipile paj wèb ak chanje sa ki ekri nan paj entènèt ou
sou vole a.
Epi sa a, nosyon de Dokiman objè ki gen konpòtman egzanplè a.
Se konsa, kòm nou te wè nan videyo nou an sou JavaScript, objè yo trè fleksib.
>> Apre sa, yo ka gen ladan jaden yo divès kalite.
Epi menm si nou pa t 'ale nan yon anpil nan detay, moun jaden yo oswa pwopriyete yo,
ke nou ta pwobableman plis yon fason ki apwopriye rele yo
nan yon kontèks la nan yon objè, menm moun pwopriyete kapab lòt objè yo.
Apre sa, andedan nan moun ki objè kapab lòt objè yo.
>> Ou gen sa a objè gwo anpil ak yon anpil nan lòt objè
andedan nan li, ki sòt de kreye ide sa a nan yon gwo pyebwa.
Koulye a, dokiman objè a se yon objè trè espesyal nan JavaScript
ki òganize tout entènèt ou paj anba sa a sòt de parapli
nan yon objè.
Se konsa, andedan nan dokiman an objè yo se objè prezante
tèt la ansanm ak tout kò nan paj entènèt ou an.
>> Anndan nan moun lòt objè, et setra, et setra,
jouk paj tout antye entènèt ou gen te òganize nan sa a objè gwo.
Ki sa ki nan tèt la isit la, dwa?
Bon, nou konnen ki jan yo travay ak objè ki nan JavaScript.
>> Se konsa, si nou gen yon bagay ki refere a paj wèb nou an tout antye, ki
vle di lè w rele repons ki kòrèk la metòd yo manipile ki objè
oswa modifye sèten nan pwopriyete li yo, nou
kapab chanje eleman ki nan paj nou an pwogramasyon
lè l sèvi avèk JavaScript olye pou yo gen nan kòd bagay sa yo ak, di, HTML.
Se konsa, isit la nan yon egzanp yon trè senp paj entènèt, dwa?
Li nan te resevwa Tags HTML, yon tèt.
>> Anndan nan gen yon Tit, alo nan lemonn.
Lè sa a, mwen gen yon kò.
Anndan de sa, mwen gen twa bagay diferan.
Mwen gen yon tag H2 header, yon paragraf, ak yon lyen.
Sa a se yon paj entènèt trè senp.
>> Oke, sa ta ka dokiman an objeksyon pou gade sa a sanble?
Oke, li nan yon ti kras pè petèt nan premye.
Men, li la vrèman jis yon gwo pyebwa.
Apre sa, nan rasin nan anpil nan li se dokiman.
>> Anndan nan dokiman an se yon lòt objè refere li a HTML a nan paj m 'yo.
Apre sa, HTML a nan paj mwen an se tout bagay sa yo.
Lè sa a, andedan nan HTML a objè, mwen gen yon objè tèt,
ki vle di tout bagay la.
>> Apre sa, andedan nan la, Mwen gen yon objè tit.
Ak andedan nan la, mwen gen yon lòt objeksyon sa se sèlman alo lemonn.
Mwen te kapab gen kò mwen an reprezante tankou sa a.
>> Anndan nan kò m ', mwen gen yon H2 objè ak yon objè ki p pou paragraf
ak yon yon objè pou yon lyen.
Se konsa, sa a tout antye yerachi ka reprezante kòm yon gwo pye bwa
avèk anpil ki pi piti ti kras bagay ki t'ap soti nan li.
Koulye a, nan kou, lè nou ap pwogramasyon, nou
pa panse a bagay sa yo tankou yon gwo pye bwa.
Nou vle wè vrè Kòd bagay ki gen rapò.
>> Apre sa, erezman, nou kapab sèvi ak zouti pwomotè nou an
ki aktyèlman pran yon gade nan sit entènèt sa a nan dokiman objè.
Li kite yo fè sa.
Se konsa, mwen te louvri moute yon tab navigatè.
>> Apre sa, mwen te louvri moute Developer Zouti.
Ak nan videyo mwen sou JavaScript, mwen mansyone ke konsole a se pa
sèlman yon sél kote dekwa kote nou enprime enfòmasyon,
li la tou yon plas kote nou kapab enfòmasyon opinyon.
Nan kontèks sa a, ki sa Mwen pral di se
Mwen ta renmen jwenn tounen objè yo dokiman,
Se konsa, mwen ka kòmanse gen yon gade nan li.
Se konsa, kouman ta ka m 'fè sa a?
Oke, si mwen vle òganize li vrèman joliman,
Mwen pral di console.dir, D-I-R. Koulye a, mwen sèvi ak console.log ekri ak lèt ​​detache jis
soti yon bagay trè senp.
Men, si mwen vle òganize sa a yerarchik tankou yon objè,
Mwen vle li sòt de estriktire tankou yon estrikti anyè.
>> Se konsa, mwen vle console.dir dokiman.
Mwen pral frape Antre nan.
E yo gen dwa anba a li kounye a, epi mwen pral rale nan isit la,
Mwen te gen dokiman sa a repons ak yon ti kras flèch akote l.
Koulye a, lè mwen louvri flèch sa a, gen k ap pase yo gen yon anpil nan bagay.
>> Men, nou ap ale nan inyore yon anpil nan li epi li jis kalite konsantre
sou pati ki pi enpòtan, se konsa nou ka kòmanse navige dokiman sa a.
Genyen yon anpil plis nan Dom la pase jis paran nœuds ak nœuds timoun.
Genyen yon anpil nan bagay Segondè.
>> Se konsa, mwen pral louvri sa a leve.
Apre sa, nan yon anpil tout nan bagay ki Pops leve.
Men, tout mwen pran swen sou se dwa isit la, nœuds timoun.
Se pou nou louvri ki yo.
>> Anndan nan la mwen wè yon bagay yo konnen yo, HTML.
Se konsa, andedan nan dokiman nou an yon nivo desann, HTML.
Mwen louvri ki yo.
Ki sa yo nou tann?
>> Si ou sonje nan dyagram nou an, sa ki ta dwe nou jwenn andedan nan HTML?
Ki de nœuds ki pi ba pase l 'nan pye bwa a?
Se pou yo jwenn deyò.
Nou louvri moute HTML.
Nou ale desann nan pitit li yo nœuds.
>> Pop ki louvri.
Genyen tèt ansanm ak tout kò.
Apre sa, nou ka louvri moute tèt la.
Ale nan pitit li yo nœuds.
Oke, gen nan tit la.
>> Apre sa, nou t 'ka ale sou yo ak sou sou tankou sa a pou tout tan.
Nou ta ka fè sa a ak kò kòm byen.
Men, gen se yon fason pou nou fè yon gade nan dokiman an òganize kòm yon objè gwo.
Men, si nou gade nan se yon gwo objè ki sanble yon anpil
tankou kòd, sa vle di ke nou kapab kòmanse yo manipile sa a objè gwo lè l sèvi avèk
Kòd chanje sa nou an sit sanble ak santi l tankou.
>> Se konsa, sa a, se yon zouti bèl pwisan nou gen a jete nou an kounye a.
Se konsa, kòm nou jis te wè, nan dokiman objè tèt li
ak tout nan objè yo andedan nan li gen pwopriyete ak metòd, jis
tankou nenpòt ki lòt objè ki nou te te travay ak nan JavaScript.
Men, nou ka sèvi ak sa yo pwopriyete ak sèvi ak metòd sa yo sòt de fè egzèsis desann
soti nan dokiman an gwo epi pou yo jwenn pi ba ak pi ba ak pi ba,
sibtilite ak sibtilite grenn a detay, jiskaske nou
li ale nan yon moso trè espesifik nan nou an paj entènèt ke nou vle chanje.
>> Lè nou mete pwopriyete a Dokimante objè oswa rele metòd sa yo,
bagay ka rive nan paj wèb nou an.
Apre sa, nou pa bezwen fè nenpòt ki entérésan gen chanjman sa yo pran efè.
>> Epi sa a, yon kapasite trè fre yo gen lè nou ap travay ak kòd.
Se konsa, sa yo se kèk nan sa yo pwopriyete ki fè pati yon dokiman objè?
Oke, ou pwobableman wè yon koup la yo vrèman byen vit
kòm nou te zipping a dokiman an jeyan
objè nou jis te wè nan navigatè wèb la.
>> Men, yon koup la sa yo pwopriyete ta ka bagay sa yo tankou HTML anndan an.
Epi ou ta ka menm sonje m ' lè l sèvi avèk sa a nan videyo a JavaScript
nan fen a anpil lè m ' te pale sou evènman yo.
Ki sa sa HTML anndan te ye?
Oke, li nan jis sa ki nan nan ant etikèt yo.
>> Se konsa, HTML anndan Tanp lan, pou egzanp, nan tit la
tag, si nou te kenbe pral nan ki egzanp yon ti moman de sa,
ta gen alo lemonn.
Sa ki te tit la nan paj nou an.
Lòt pwopriyete enkli non ne, ki
se non an nan yon HTML eleman tankou tit.
ID, ki se ID a atribi nan yon eleman HTML.
>> Sonje byen, nou ka espesyalman endike eleman espesifik nan HTML nou an
ak yon atribi ID, ki se nòmalman vini an sou la men nan yon kontèks CSS,
espesyalman.
Ne paran, ki se yon referans a sa ki nan jis moute pi wo a m 'nan Dom la.
Apre sa, nœuds timoun, ki se yon referans a sa ki nan desann anba a m '.
Apre sa, nou te wè yon anpil nan ki jis kap nan.
Nœuds Timoun, lè sa a jan nou te resevwa pi ba ak pi ba nan pye bwa an.
>> Atribi, sa se sèlman yon etalaj a atribi nan eleman nan HTML.
Se konsa, yon egzanp sou atribi ta ka gen si ou genyen yon tag imaj,
li anjeneral gen yon atribi sous, petèt yon wotè ak yon atribi lajè.
Se konsa, ki ta jis pou yon etalaj nan tout nan atribi ki asosye
ak sa eleman HTML.
>> Style se yon lòt youn ki reprezante CSS la
manier nan yon eleman an patikilye.
Apre sa, pita sou nan sa a videyo, nou pral espesyalman
style ogmante fè yon koup nan chanjman nan sit entènèt nou an.
Se konsa, sa yo se kèk pwopriyete.
>> Apre sa, gen tou gen kèk metòd ke nou kapab
itilize yo tou pi vit petèt izole eleman nan Dokiman objè a.
Petèt, pi versatile a sa yo ke yo te getElementById a.
Se konsa, mwen ta ka di yon bagay tankou, paske sonje li nan yon metòd pou Dokiman an
Objè, document.getElementById.
>> Ak andedan nan tout sa yo parantèz, presize yon eleman HTML ak yon ID patikilye
atribi ke mwen te deja mete, epi mwen pral imedyatman
ale dwa ak sa yo ki eleman nan sit wèb la an jeneral.
Se konsa, mwen pa bezwen petèt fè egzèsis desann nan chak kouch sèl.
Mwen ka jis sèvi ak metòd sa a yo jwenn li, sòt de tankou yon misil k ap chèche chalè,
dwa?
Li jis ale epi li jwenn ekzakteman ki sa li la kap chèche.
>> GetElementsByTagName se trè menm jan an nan Lespri Bondye.
Petèt sa a ta jwenn tout nan la Tags fonse oswa tout etikèt yo p
ak ban m 'yon etalaj de tout bagay ke mwen te ka Lè sa a, travay avèk yo.
appendChild ajoute yon bagay yon nivo desann nan pyebwa sa a.
>> Se konsa, mwen ka ajoute yon nouvo antye eleman yon nivo pi ba yo.
Oswa mwen ka retire yon eleman sa a, se yon nivo pi ba osi byen si mwen vle
yo efase yon bagay nan men paj entènèt mwen an.
Koulye a, yon nòt kodaj rapid ak yon rapid maltèt ekonomize nòt, èspere ke.
>> getElementById-- d la se miniskil.
Mwen pa ka di w kouman anpil fwa mwen gen itilize getElementById ak kapitalize
d a la.
Paske li vrèman komen.
Si nou ekri ID a mo, li nan anjeneral kapital mwen kapital D.
Ak kòd mwen jis pa travay.
Apre sa, mwen pa kapab konnen ki pou ki rezon.
Sa a se yon reyèlman, reyèlman, reyèlman komen ensèk ke tout moun fè,
menm ekspè ki gen te fè sa a pou tout tan.
Se konsa, jis dwe konnen, getElementById, ki se d miniskil.
Ak èspere ke, ki sove ou plizyè minit nan pi piti nan chagren.
>> Se konsa, sa tout bagay sa yo fè nou konnen?
Nou gen metòd sa yo.
Nou gen pwopriyete sa yo.
Koulye a, si nou kòmanse soti nan dokiman, dokiman.
kèlkeswa sa, nou kapab kounye a ale nan nenpòt ki sèl moso nan paj entènèt nou an
ke nou vle lè l sèvi avèk JavaScript jis lè w rele sa yo metòd yo
ak swe pwopriyete yo ke nou jwenn nan divès kote yo ye.
>> Sa a ka jwenn bavar, sa a document.getElementByID,
petèt gen yon non tag long, petèt ou fè plis apèl pita sou.
Bagay sa yo ka jwenn yon ti kras bavar.
Ak jan pwogramasyon, menm jan ou te pwobableman wè nan anpil nan videyo sa yo,
nou pa renmen bagay sa yo bavar.
>> Nou renmen pou kapab fè bagay sa yo byen vit.
Se konsa, nou ta renmen yon pi plis fason brèf yo di yon bagay.
Se konsa, sa a sòt de mennen nan la nosyon nan yon bagay yo rele jQuery.
Koulye a, jQuery se pa JavaScript.
Li pa yon pati nan JavaScript.
>> Li se yon bibliyotèk ki te ekri pa kèk pwogramasyon JavaScript
apeprè 10 ane de sa.
Ak objektif li yo se yo senplifye sa a sa ki nan rele kliyan scripting bò, ki
se fondamantalman ki sa nou te jis ap pale de ak Dom manipilasyon.
Se konsa, si mwen te vle modifye an koulè background nan paj entènèt mwen an, petèt
yon Div espesifik.
>> Isit la, mwen aparamman ap resevwa ElementById colorDiv.
Apre sa, mwen vle yo mete koulè background li yo.
Si mwen jis lè l sèvi avèk pi bon kalite JavaScript lè l sèvi avèk objè ki gen konpòtman egzanplè Dokiman an,
sa a, se yon anpil nan bagay, dwa? document.getElementByID
colorDiv.style.backgroundColor = vèt.
>> Wou.
Sa ki te yon anpil yo di.
Li se yon anpil yo tape, tou.
Se konsa, nan jQuery, nou ka petèt di sa a yon ti jan plis presizyon.
Komès la koupe yo te li nan petèt yon ti kras ti jan pi plis skre tout nan yon toudenkou,
dwa?
>> Omwen lontan an se yon ti jan pi plis eksplikasyon tankou sa ki nou ap fè.
Siy dola sa a, parantèz, sèl quote, regle, colorDiv, dwa?
Ki sa sa vle di?
Oke, sa a, se fondamantalman jis document.getElementByID colorDiv.
>> Men, li la sa a sòt de steno fason pou fè li lè l sèvi avèk jQuery.
Se pou nou jis pran yon gade kounye a Yon koup nan diferan fason
ke mwen ta ka aktyèlman itilize Dokiman objè sa a
Ki gen konpòtman egzanplè yo manipile moso nan sit m 'yo.
An patikilye, nou ap ale yo dwe ap travay sou manipile
koulè a ​​nan yon patikilye Div, colorDiv, sou yon paj entènèt.
Se konsa, kite a pran yon gade nan sa.
Tout dwa.
Se konsa, mwen sou yon paj.
Yo rele li test.html lè ou download sa a si ou vle Tinker ak sa a.
Apre sa, mwen te gen yon pakèt moun sou bouton sou paj sa a.
Apre sa, mwen ap di fonksyon endividyèl pou koulè background, koulè wouj violèt, vèt,
zoranj, wouj, ble, yon sèl fonksyon sèl pou koulè background, evènman kap okipe
pou koulè background, e ap itilize jQuery.
Kisa mwen ap pale de lè m 'ap fè sa a?
Se konsa, nou te wè bouton sa yo.
Koulye a, kite a pran yon gade nan kèk nan kòd la sous isit la.
Nou pral kòmanse ak test.html.
Fonksyon Se konsa, endividyèl pou jan nou koumanse koulè se sa m 'te tape isit la.
Kite m 'woulo liv yon ti kras.
>> Apre sa, ou pral avi ke mwen te defini sa yo bouton
yo di lè se bouton sa-a klike, rele fonksyon an vire koulè wouj violèt.
Lè yo bouton sa-a klike sou, olye, rele fonksyon an vire vèt,
vire zoranj, vire wouj, vire ble.
Ou ka pwobableman devine ke sa a se petèt pa desen an pi bon
sans, dwa?
>> Li ta dwe nice si mwen te kapab gen yon apwòch plis jeneral.
Oke, premye nou pral pran yon gade nan sa ki moun senk fonksyon yo
document.getElementByID colorDiv.style.background = koulè wouj violèt,
vèt, zoranj, wouj, ak ble, respektivman.
Se konsa, pa patikilyèman desen an pi byen.
>> Seri a pwochen nan bouton M 'genyen se mwen te ekri
yon fonksyon sèl rele chanje koulè ki aparamman
aksepte yon fisèl kòm agiman li yo.
Se konsa, sa a se yon ti jan pi byen.
Koulè wouj violèt, vèt, zoranj, wouj, ble se kounye a gen yon diskisyon.
Se konsa, mwen te ekri yon pi plis jeneral ka JavaScript fonksyon,
ki ta sanble yon bagay tankou sa a.
M 'ap pase nan.
Sa a koulè chanjman fonksyon se tann yon diskisyon rele koulè.
Apre sa, mwen ap di mete an koulè background ak koulè.
Se konsa, isit reprezante ki sa mwen te gen isit la.
Se konsa, sa a, se yon ti jan pi byen.
>> Men, mwen ka kapab fè pi bon pase sa.
Si nou desann nan pran yon gade nan sitiyasyon an evènman kap okipe,
kounye a tout apèl sa yo gade menm bagay la.
Si ou sonje pou nou an diskisyon sou pòtè evènman,
Mwen ka jwenn enfòmasyon sou ki nan bouton sa yo te klike epi sèvi ak sa.
>> Se konsa, nan event.JavaScript, mwen te ekri evènman chanje koulè, ki
figi konnen ki bouton te klike.
Sa a liy lan deklanche objè.
Lè sa a, isit la, li vin reyèlman bavar.
Men, sa m ap fè a se mwen se mete background nan
koulè nan triggerObject inner.HTML.
Sa a tèks la nan ant etikèt yo bouton.
>> Lè sa a, mwen aparamman gen yo mete l 'bay miniskil.
Epi sa a, ki jan mwen ka konvèti yon tout fisèl miniskil nan JavaScript lè l sèvi avèk
metòd ke yo miniskil.
Paske lè m 'mete yon koulè, jan mwen ap eseye fè isit la,
koulè a ​​gen yo dwe tout miniskil.
>> Men, bouton an ke mwen te gen, si nou pran yon lòt gade,
remake ke tèks la gen ekri ak yon P kapital pou koulè wouj violèt.
Trè an Lè sa a, nan anba isit la, mwen aparamman
eseye ak fè sa lè l sèvi avèk jQuery kòm byen.
Ak nan ka sa a, mwen se pa aktyèlman rele yon fonksyon nan tout.
Mwen te jis te di klas la ke mwen se lè l sèvi avèk pou bouton sa a se yon bouton JQ.
Sa a li.
>> Se konsa, kouman jQuery konnen sa m 'ap fè?
Oke, sa a se youn nan avantaj ki genyen koupe dezavantaj nan jQuery.
Li ka pèmèt mwen fè bagay sa yo trè avèk presizyon, men petèt pa
kòm entwitif.
Petèt moun lòt twa fè yon ti jan pi plis sans sa m ap fè a.
Isit la, menm si, sa k ap pase sou?
>> Aparamman, sa ki kreye yon fonksyon anonim
ki charj chak fwa dokiman mwen se pare, se konsa document.ready,
kèk fonksyon ki pral rive.
Fondamantalman, lè se yon dokiman pare?
Li nan lè yo Paj mwen chaje.
>> Se konsa, le pli vit ke yo Paj mwen chaje, la yo fonksyon se toujou pare.
Li di, si yon objè nan kalite jQButton, oswa si gen jQButton klas te klike,
egzekite fonksyon sa a.
Se konsa, isit la nan de fonksyon anonim, youn defini andedan nan lòt la.
>> Se konsa, kontèks tout mwen isit la byen lwen tèlman se paj mwen an
lè li charj li rele fonksyon sa a.
Apre sa, fonksyon sa a ap tann pou yon bouton yo dwe klike.
Apre sa, lè se yon bouton klike, JQ bouton espesyalman se klike,
li rele sa a lòt fonksyon, ki se pral
yo mete background nan koulè nan colorDiv yo dwe
tou sa tèks se nan ant etikèt yo.
>> Sa a se nosyon de ki bouton te klike.
Men, otreman, sa a se sòt de konpòte menm jan ak yon evènman.
Se jis menm jan an mwen ta eksprime sa a nan jQuery.
Yon fwa ankò, li la pwobableman yon anpil plis entimidasyon.
Li pa tankou klè tankou yon bagay tankou event.js,
ki se petèt yon ti jan ti kras pi plis sil, men yon ti jan ti kras mwens
entimidasyon.
>> Men, si nou tounen pòp nan men navigatè m ' fenèt, si mwen kòmanse clicking-- byen,
ki chanje a koulè wouj violèt.
Sa a se lè l sèvi avèk metòd la vèt fisèl.
Sa a se lè l sèvi avèk zoranj kap okipe-a evènman.
>> Sa a se lè l sèvi avèk jQuery wouj, dwa?
Yo tout konpòte egzakteman menm bagay la.
Yo jis fè l 'lè l sèvi avèk diferan apwòch yo rezoud pwoblèm nan.
Genyen yon anpil plis nan jQuery Lè sa a, nou ap sètènman
pwal pale osijè nan videyo sa a.
Men, si ou vle aprann plis, ou kapab ale nan sòt nan jQuery nan dokiman
ak aprann byen yon ti jan plis sou sa a bibliyotèk fleksib anpil, ki
se gwo pou fè bò kliyan scripting tankou sa nou te fè
yo manipile gade nan epi yo santi nan paj wèb nou an
ak Dokiman objè ki gen konpòtman egzanplè a.
Mwen se Doug Lloyd.
Sa a se CS50.