DOUG LLOYD: Sa físeán seo, bhíomar ag iarraidh a ghlaoch amach aird ar leith le ar leith an- eilimint de JavaScript go mb'fhéidir go mbeadh tú handy nuair tú ag tosú a bheith ag obair ar ionramháil leathanaigh ghréasáin agus ag athrú an ábhar ar do leathanach gréasáin ar an eitilt. Agus sin an nóisean de an Cuspóir Doiciméad Model. Mar sin, mar a chonaic muid i ár físeán ar JavaScript, tá rudaí an-solúbtha. Agus is féidir leo go bhfuil réimsí éagsúla. Agus cé nach raibh muid ag dul isteach a lán de mion, na réimsí nó airíonna, go ba mhaith linn is dócha níos mó glaoch go cuí orthu i gcomhthéacs ar rud, fiú Is féidir leis na hairíonna a bheith rudaí eile. Agus taobh istigh de na cuspóirí sin Is féidir a bheith rudaí eile. 

Tá tú an rud an-mhór le go leor de na rudaí eile taobh istigh de sé, a saghas Cruthaíonn an smaoineamh seo de chrann mór. Anois, tá an doiciméad réad a réad-speisialta i JavaScript a eagraíonn do gréasáin ar fad leathanach faoin saghas scáth de rud. Agus mar sin taobh istigh den doiciméad Tá réad rudaí i láthair an ceann agus comhlacht ar do leathanach gréasáin. 

Taobh istigh de na atá eile réada, et cetera, et cetera, go dtí go mbeidh do leathanach gréasáin ar fad eagraithe sa réad mór. Cad é an bun os cionn anseo, ceart? Bhuel, tá a fhios againn conas a bheith ag obair le rudaí i JavaScript. 

Mar sin má tá do chuspóir Tagraíonn ár leathanach gréasáin ar fad, go Ciallaíonn trí ghlaoch ar an ceart Modhanna a ionramháil go réad nó a mhodhnú áirithe de a n-airíonna, táimid ag Is féidir athrú ar na gnéithe de ár leathanach programmatically ag baint úsáide as JavaScript ionad a bheith chun rudaí a bhfuil, abair, HTML chódú. Mar sin, tá anseo sampla de an-simplí leathanach gréasáin, ceart? Tá sé seo fuair clibeanna HTML, ceann. 

Taobh istigh de tá teideal, Dia duit ar domhan. Ansin tá mé ag comhlacht. Taobh istigh de sin, tá mé trí rudaí éagsúla. Tá mé chlib header h2, mír, agus nasc. Is é seo an leathanach gréasáin an-simplí. 

Bhuel, cad a d'fhéadfadh an doiciméad agóid ar an cuma mhaith? Bhuel, tá sé ina beagán scary b'fhéidir ar dtús. Ach tá sé i ndáiríre ach le crann mór. Agus ag an fhréamh an-de tá sé doiciméad. 

Taobh istigh de bhfuil an doiciméad eile rud a thagraíonn do HTML ar mo leathanach. Agus is é an HTML ar mo leathanach seo ar fad. Agus ansin taobh istigh de na HTML rud, tá mé rud ceann, a thagraíonn rud ann. 

Agus taobh istigh de ann, Tá mé rud teideal. Agus taobh istigh de ann, tá mé eile agóid go díreach Dia duit ar domhan. Raibh mé in ann mo chorp ionadaíocht mar seo. 

Taobh istigh de mo chorp, tá mé h2 réad agus rud p mhír agus rud ar feadh nasc. Agus mar sin an ordlathas ar fad Is féidir a léiriú mar chrann mór le go leor de beagán níos lú rudaí a ag teacht amach as é. Anois, ar ndóigh, nuair táimid ag cláir, táimid ag Ní gá smaoineamh ar rudaí cosúil le crann mór. Ba mhaith linn a fheiceáil iarbhír rudaí a bhaineann cód. 

Agus fortunately, is féidir linn úsáid a bhaint as ár n-uirlisí forbróir a ghlacadh i ndáiríre le breathnú ar an suíomh gréasáin seo ar an doiciméad réad. Agus a ligean ar é sin a dhéanamh. Mar sin, tá mé d'oscail suas cluaisín bhrabhsálaí. 

Agus tá mé oscail suas Uirlisí d'Fhorbróirí. Agus i mo físeán ar JavaScript, mé luaite nach bhfuil an consól someplace ach amháin i gcás phriontáil muid eolas, tá sé freisin áit ina is féidir linn eolas a ionchur. Sa chomhthéacs sin, cad a Tá mé ag dul a rá go bhfuil Ba mhaith liom a fháil ar ais an doiciméad rudaí, mar sin is féidir liom tosú a bheith ag féachaint ar sé. Mar sin, conas a d'fhéadfadh liom a dhéanamh? Bhuel, más mian liom a a eagrú sé i ndáiríre nicely, Tá mé ag dul a rá console.dir, D-I-R. Anois, a úsáid mé console.log dtí díreach a phriontáil rud éigin amach an-simplí. Ach más mian liom a eagrú ar an hierarchically cosúil le rud, Ba mhaith liom é saghas struchtúrtha cosúil le struchtúr eolaire. 

Mar sin ba mhaith liom doiciméad a console.dir. Tá mé ag dul a bhuail Iontráil. Agus ceart faoi bhun sé anois, agus beidh mé zúmáil isteach anseo, Tá mé an doiciméad freagartha le arrow beag in aice leis é. Anois, nuair a oscailt mé an arrow, tá dul chun bheith ina lán de rudaí. 

Ach táimid ag dul a neamhaird ar a lán de é agus díreach de chineál ar fhócas ar an chuid is tábhachtaí, mar sin againn Is féidir tús a chur leis an doiciméad seo nascleanúint. Níl a lán níos mó chun an DOM ná ach nóid agus nóid leanbh tuismitheoir. Níl a lán de rudaí coimhdeacha. 

Mar sin, tá mé ag dul a oscailt suas seo. Agus níl a lán iomlán de stuif go Vox suas. Ach tá go léir cúram mé faoi ar dheis anseo, nóid leanbh. A ligean ar a oscailt suas. 

Taobh istigh de ann a fheiceáil mé rud éigin ar an eolas, HTML. Mar sin, taobh istigh de inár ndoiciméad leibhéal amháin síos, HTML. Oscailte mé suas. Cad tá súil againn? 

Má tá tú chun cuimhne as ár léaráid, cad ba cheart dúinn a fháil taobh istigh de HTML? Cén dá nóid faoi bhun sé sa chrann? A ligean ar a fháil amach. Táimid ag oscailt suas HTML. Théann muid síos go dtí a nóid leanbh. 

Pop go oscailte. Níl ceann agus comhlacht. Agus is féidir linn a oscailt suas ar an ceann. Téigh go dtí a chuid nóid leanbh. Bhuel, níl an teideal. 

Agus d'fhéadfadh muid dul ar aghaidh agus ar mar seo go deo. D'fhéadfadh muid a seo a dhéanamh le comhlacht chomh maith. Ach tá bealach dúinn chun breathnú ar an doiciméad eagraithe mar rud mór. Agus má táimid ar é mór rud go Breathnaíonn a lán cosúil le cód, a chiallaíonn gur féidir linn tús a ionramháil ar an réad mór ag baint úsáide as cód a athrú cad ár Breathnaíonn láithreán gréasáin agus mothaíonn mhaith. 

Mar sin, go bhfuil uirlis chumhachtach deas ní mór dúinn ar fáil dúinn anois. Mar sin, mar a chonaic muid díreach, an doiciméad réad féin agus gach ceann de na rudaí taobh istigh de sé bhfuil airíonna agus modhanna, ach mar aon rud eile go bhfuil muid ag obair le i JavaScript. Ach is féidir linn a úsáid na maoine agus úsáid a bhaint as na modhanna chun saghas druil síos as an doiciméad mór agus a fháil níos ísle agus níos ísle agus níos ísle, míne agus finer gráin sonraí, go dtí go táimid ag a fháil chun píosa an-sonrach ar ár leathanach gréasáin gur mhaith linn a athrú. 

Agus nuair a muid airíonna na thabhairt cothrom le dáta Dhoiciméadú Réad nó cuir glaoch ar na modhanna sin, D'fhéadfadh rudaí a tharlóidh ar ár leathanach gréasáin. Agus ní mór dúinn a dhéanamh ar bith refreshing a bheith acu a chur leis na hathruithe i bhfeidhm. 

Agus sin cumas deas fionnuar a ní mór nuair a bhíonn muid ag obair le cód. Mar sin, cad iad roinnt de na maoine atá mar chuid de dhoiciméad rud? Bhuel, chonaic tú is dócha go bhfuil cúpla acu i ndáiríre go tapa mar a bhí muid ag zipping tríd an doiciméad ollmhór réad chonaic muid díreach sa bhrabhsálaí gréasáin. 

Ach cúpla na maoine d'fhéadfadh a bheith rudaí cosúil le HTML istigh. Agus d'fhéadfadh tú a thabhairt chun cuimhne fiú dom ag baint úsáide as seo sa físeán JavaScript ag an deireadh an-nuair mé bhí ag caint faoi imeachtaí. Cad a bhí an HTML istigh? Bhuel, tá sé ach cad atá i idir na clibeanna. 

Agus mar sin an HTML istigh, mar shampla, ar an teideal tag, dá mbeadh choinnigh muid ag dul i go sampla nóiméad ó shin, bheadh ​​Dia duit ar domhan. Ba é sin an teideal ár leathanach. Airíonna Eile Áirítear ainm nód, a Is é an t-ainm ar HTML eilimint mar theideal den sórt sin. ID, a bhfuil an ID tréith de gné HTML. 

Thabhairt chun cuimhne gur féidir linn a léiriú go speisialta gnéithe sonracha dár HTML le tréith ID, a de ghnáth thagann i handy i gcomhthéacs an CSS, go sonrach. Nód tuismitheoir, a bhfuil tagairt cad atá suas díreach os mo chionn sa DOM. Agus nóid leanbh, a bhfuil tagairt do cad atá síos thíos dom. Agus chonaic muid a lán de sin díreach ag féachaint tríd. Nóid leanbh, go conas a fuair muid níos ísle agus níos ísle ar an gcrann. 

Tréithe, go díreach le sraith de tréithe an eilimint HTML. Mar sin, d'fhéadfadh sampla de tréithe a bheith má tá tú clib íomhá, Tá sé de ghnáth tréith foinse, b'fhéidir airde agus tréith leithead. Agus mar sin a bheadh ​​a bheith díreach le sraith de gach ceann de na tréithe a bhaineann leis an eilimint HTML. 

Tá stíl amháin eile a dhéanann ionadaíocht CSS styling de eilimint ar leith. Agus níos déanaí sa físeán, beidh muid a go sonrach stíl ghiaráil a dhéanamh cúpla athruithe ar ár láithreán gréasáin. Mar sin, tá na roinnt airíonna. 

Agus tá roinnt Modhanna gur féidir linn a úsáid chun freisin níos tapúla leithlisiú b'fhéidir gnéithe an Cuspóir Doiciméad. B'fhéidir, an chuid is mó versatile acu seo getElementById. Mar sin, d'fhéadfadh liom a rá rud éigin cosúil, mar gheall ar cuimhnigh tá sé ina modh an Doiciméid Réad, document.getElementById. 

Agus taobh istigh de na lúibíní, sonraigh gné HTML le haitheantas ar leith tréith go atá mé roimhe leagan, agus beidh mé láithreach téigh ar dheis go dtí sin eilimint ar an láithreán gréasáin iomlán. Mar sin, ní dóigh liom go bhfuil a dhruileáil b'fhéidir síos trí gach ciseal amháin. Is féidir liom a úsáid ach an modh seo a fháil air, saghas cosúil le lorg teasa diúracán, ceart? Téann sé ach agus faigheann go díreach cad atá sé ag lorg. 

Is GetElementsByTagName an-chosúil i spiorad. B'fhéidir go mbeadh sé seo teacht ar gach ceann de na clibeanna trom nó gach ceann de na clibeanna p agus a thabhairt dom le sraith de gach rud go raibh mé in ann obair ansin leis. Cuireann appendChild rud éigin leibhéal amháin síos sa chrann. 

Mar sin, is féidir liom a chur ar nua ar fad eilimint leibhéal amháin níos ísle. Nó is féidir liom a bhaint gné go leibhéal amháin níos ísle chomh maith más mian liom rud éigin as mo leathanach gréasáin a scriosadh. Anois, nóta códú tapaidh agus mear tinneas cinn a shábháil nóta, tá súil againn. 

getElementById-- é an d litreacha beaga. Ní féidir liom a insint duit cé mhéad uair a bhfuil mé getElementById úsáidtear agus caipitlithe an d ann. Toisc go bhfuil sé i ndáiríre coitianta. Má scríobhann muid an ID focal, tá sé de ghnáth caipiteal I caipitil D. Agus mo cód nach bhfuil ach ag obair. Agus ní féidir liom a dhéanamh amach cén fáth. Is é seo an i ndáiríre, i ndáiríre, i ndáiríre bug coitianta a dhéanann gach duine, fiú saineolaithe go bhfuil ag déanamh seo go deo. Mar sin, ach bheith ar an eolas, getElementById, is é sin d litreacha beaga. Agus tá súil againn, Sábhálann go bhfuil roinnt tú nóiméad ar a laghad de heartache. 

Mar sin, cad é seo ar fad a insint dúinn? Ní mór dúinn na modhanna sin. Ní mór dúinn na maoine. Anois, má tús a chur orainn ó doiciméad, doiciméad. is cuma cad, is féidir linn a fháil anois ar aon píosa amháin de ár leathanach gréasáin gur mhaith linn a úsáid a bhaint as JavaScript ach trí ghlaoch ar na modhanna agus a ghiaráil na hairíonna go bhfaighidh muid ag láithreacha éagsúla. 

Is féidir é seo a fháil wordy, seo document.getElementById, b'fhéidir go mbeadh ainm tag fada, b'fhéidir go bhfuil tú a glaonna níos déanaí. Is féidir le rudaí a fháil le beagán wordy. Agus mar ríomhchláraitheoirí, is atá tú is dócha le feiceáil i go leor de na físeáin, ní féidir linn buíochas rudaí wordy. 

Is maith linn a bheith in ann rudaí a dhéanamh go tapa. Mar sin, ba mhaith linn níos bhealach gonta rud éigin a rá. Mar sin, an saghas thoradh ar an coincheap an rud ar a dtugtar jQuery. Anois, nach bhfuil jQuery JavaScript. Níl sé mar chuid de JavaScript. 

Is leabharlann scríobhadh go ag roinnt ríomhchláraitheoirí JavaScript thart ar 10 bliain ó shin. Agus is é a sprioc a shimpliú seo cad atá ar a dtugtar scriptithe taobh cliant, a go bunúsach cad a bhí muid díreach ag caint faoi le manipulations DOM. Agus mar sin má bhí mé a mhodhnú dath cúlra de mo leathanach gréasáin, b'fhéidir a Div ar leith. 

Anseo, tá mé ag dul cosúil ElementById colorDiv. Agus ba mhaith liom a chur ar bun a dath cúlra. Má tá mé ag baint úsáide as díreach tar JavaScript íon ag baint úsáide as an Cuspóir Doiciméad Model, go bhfuil a lán de rudaí, ceart? document.getElementById colorDiv.style.backgroundColor = glas. 

Whew. Ba é sin go leor a rá. Tá sé go leor le cineál, freisin. Agus mar sin i jQuery, is féidir linn a rá b'fhéidir seo le beagán níos cruinn. An trádáil uaire a bheith tá sé b'fhéidir beagán beagán níos cryptic ar fad ar tobann, ceart? 

Ar a laghad tá an fada le beagán níos mó míniúcháin i dtaobh cad tá ag éirí linn. Seo a shíniú dollar, lúibíní, ceanglófar aonair, hash, colorDiv, ceart? Cad is brí le sin? Bhuel, tá go bunúsach ach document.getElementById colorDiv. 

Ach tá sé an saghas luathscríbhneoireachta bhealach a dhéanamh ag baint úsáide as jQuery. A ligean ar a ghlacadh ach le breathnú anois ag cúpla bealaí éagsúla go d'fhéadfadh mé i ndáiríre úsáid Cuspóir Doiciméad Múnla chun píosaí de mo shuíomh ionramháil. Go háirithe, táimid ag dul a bheith ag obair ar ionramháil an dath ar leith Div, colorDiv, ar an leathanach gréasáin. Mar sin, a ligean ar ghlacadh le breathnú ar sin. Ceart go leor. Mar sin, tá mé ar an leathanach. Sé ar a dtugtar test.html nuair a íoslódáil tú seo más mian leat a tinker leis seo. Agus fuair mé a bunch de cnaipí ar an leathanach seo. Agus mé ag rá feidhmeanna aonair do dath cúlra, corcra, glas, oráiste, dearg, gorm, aon fheidhm aonair do dath cúlra, imeacht láimhseálaí do dath cúlra, agus ag baint úsáide jQuery. Cad mé ag caint faoi nuair atá mé ag déanamh seo? Mar sin, againn le feiceáil na cnaipí. Anois, a ligean ar ghlacadh le breathnú ar roinnt de na cód foinse anseo. Beidh muid tús a chur leis test.html. Feidhmeanna Mar sin aonair ar chúlra Is dath méid atá clóscríofa mé anseo. Lig dom scrollú le beagán. 

Agus beidh tú faoi deara go bhfuil mé Tá na cnaipí atá sainithe a rá nuair atá an gcnaipe seo chliceáil, glaoch ar an fheidhm cas corcra. Nuair a bhíonn an cnaipe cliceáil, in áit, glaoch ar an fheidhm cas glas, cas oráiste, cas dearg, cas gorm. Is féidir leat buille faoi thuairim is dócha go bhfuil an Is dócha gurb é ní an dearadh is fearr ciall, ceart? 

Bheadh ​​sé deas dá raibh mé go mbeadh cur chuige níos ginearálta. Bhuel, ar an gcéad beidh orainn a chur le breathnú ag cad iad na cúig fheidhm document.getElementById colorDiv.style.background = corcra, glas, oráiste, dearg, agus gorm, faoi seach. Mar sin, ní go háirithe an dearadh is fearr. 

An chéad sraith eile de cnaipí Tá mé é bhí mé scríofa feidhm amháin ar a dtugtar dath a athrú go cosúil Glacann ar shraith mar a argóint. Mar sin, tá sé seo le beagán níos fearr. Corcra, glas, oráiste, dearg, Is gorm anois argóint. Mar sin, tá mé scríofa níos ginearálta cás fheidhm JavaScript, a d'fhéadfadh a cuma rud éigin mar seo. Tá mé ag dul i. Is é seo an dath a athrú an fheidhm ag súil argóint a dtugtar dath. Agus mé ag rá a leagtar ar an dath cúlra do dath. Mar sin, anseo Is ionann an méid a fuair mé anseo. Mar sin tá go le beagán níos fearr. 

Ach d'fhéadfadh liom a bheith in ann a dhéanamh níos fearr ná sin. Má théann muid síos a chur le breathnú ag an staid ócáid ​​láimhseálaí, anois táim go léir na glaonna mar an gcéanna. Má tá tú chun cuimhne le haghaidh ár plé ar láimhseálaithe ócáid, Is féidir liom faisnéis maidir le cé acu de a fháil Bhí chliceáil ar na cnaipí agus a úsáid go. 

Agus mar sin i event.JavaScript, tá mé scríofa imeacht dath a athrú, a figiúirí amach a cnaipe bhí chliceáil. Sin an líne réad truicir. Agus ansin anseo, faigheann sé i ndáiríre wordy. Ach cad mé ag déanamh go bhfuil mé ag leagan an cúlra dath a triggerObject inner.HTML. Sin an téacs i idir na clibeanna cnaipe. 

Agus ansin tá mé cosúil a leag sé a litreacha beaga. Agus sin conas is féidir liom thiontú ina iomlán teaghrán go litreacha beaga i JavaScript ag baint úsáide as go modh a litreacha beaga. Toisc nuair a leag mé dath, mar tá mé ag iarraidh a dhéanamh anseo, Tá an dath a bheith go léir litreacha beaga. 

Ach ar an gcnaipe go raibh mé, má táimid ag breathnú eile a chur, faoi ​​deara go bhfuil an téacs ann scríofa le P caipitil do corcra. Agus ansin ag an an- bun anseo, mé cosúil iarracht a dhéanamh seo le jQuery chomh maith. Agus sa chás seo, nach bhfuil mé i ndáiríre glaoch feidhm ar chor ar bith. Dúirt mé díreach tar éis an rang go bhfuil mé Tá baint úsáide as ar feadh an cnaipe an cnaipe JQ. Sin é. 

Mar sin, ní conas jQuery fhios cad tá mé ag déanamh? Bhuel, tá sé seo ar cheann de na buntáistí míbhuntáistí jQuery Slais. Is féidir é a deis dom chun rudaí a dhéanamh an-cruinn, ach b'fhéidir nach bhfuil chomh intuitively. B'fhéidir na trí eile a dhéanamh beagán níos mó ciall cad tá mé ag déanamh. Anseo, áfach, tá an méid a ar siúl? 

Réir dealraimh, a chruthú feidhm gan ainm go ualaí aon uair mo doiciméad tá sé réidh, mar sin document.ready, Tá roinnt feidhm ag dul a tharlóidh. Go bunúsach, tá nuair doiciméad réidh? Tá sé nuair a bhfuil mo leathanach luchtaithe. 

Mar sin, chomh luath agus a bhfuil mo leathanach luchtaithe, an tar éis feidhm i gcónaí réidh. Deir sé, más rud é réad de chineál jQButton, nó má tá jQButton ranga chliceáil, fhorghníomhú an fheidhm seo. Mar sin, tá anseo dhá fheidhm gan ainm, ceann amháin a shainmhínítear taobh istigh de na eile. 

Mar sin, mo comhthéacs ar fad anseo tá go dtí seo mo leathanach nuair ualaí a eascraíonn sé iarrann sé an fheidhm sin. Agus is é an fheidhm seo ag fanacht ar feadh cnaipe a chliceáil. Agus nuair a bhíonn an cnaipe chliceáil, JQ cnaipe é go sonrach chliceáil, iarrann sé seo eile feidhm, atá ag dul a shocrú ar an cúlra dath colorDiv a bheith is cuma cad é an téacs i idir na clibeanna. 

Is é seo an coincheap de a cnaipe bhí chliceáil. Ach a mhalairt, is é seo saghas iompar cosúil le ócáid. Tá sé díreach ar an mbealach céanna agam Bheadh ​​iúl seo i jQuery. Arís, is dócha lán níos imeaglaithe. Níl sé chomh soiléir agus is rud éigin cosúil le event.js, a bhfuil b'fhéidir le beagán níos mó verbose, ach le beagán níos lú imeaglaithe. 

Ach má pop muid ar ais go dtí mo bhrabhsálaí fuinneog, má tús mé clicking-- go maith, gur athraigh go corcra. Tá sé seo glas baint úsáide as modh teaghrán. Tá sé seo oráiste baint úsáide as an láimhseálaí ócáid. 

Tá sé seo ag baint úsáide as dearg jQuery, ceart? Iad féin a iompar siad go léir díreach mar an gcéanna. Dhéanann siad díreach tar éis ag baint úsáide as sé difriúil cur chuige chun an fhadhb a réiteach. Níl a lán níos mó chun jQuery ansin tá muid cinnte ag dul chun labhairt faoi i físeán seo. Ach más mian leat níos mó a fhoghlaim, is féidir leat téigh go dtí an saghas jQuery doiciméadú agus foghlaim go leor le beagán níos mó faoi an leabharlann an-solúbtha, a Is iontach chun déanamh taobh cliant scriptithe cosúil le cad a bhí á dhéanamh againn a ionramháil an cuma agus sílim ar ár leathanach gréasáin leis an Cuspóir Doiciméad Model. Tá mé Doug Lloyd. Is é seo an CS50.