DOUG Lloyd: NĂ« kĂ«tĂ« video, ne kemi kĂ«rkuar pĂ«r tĂ« thirrur jashtĂ« vĂ«mendje tĂ« veĂ§antĂ«
pĂ«r njĂ« shumĂ« tĂ« veĂ§antĂ« element i JavaScript
qĂ« ju mund tĂ« gjeni tĂ« dobishĂ«m kur ju jeni duke filluar
pĂ«r tĂ« punuar nĂ« manipulimin e faqeve web dhe ndryshuar pĂ«rmbajtjen e faqes tuaj web
tĂ« fluturojnĂ«.
Dhe kjo Ă«shtĂ« nocioni i Objekti Model Document.
Pra, siĂ§ e pamĂ« nĂ« video tonĂ« nĂ« JavaScript, objekte janĂ« shumĂ« fleksibĂ«l.
>> Dhe ato mund tĂ« pĂ«rmbajnĂ« fusha tĂ« ndryshme.
Dhe, edhe pse ne nuk ka shkuar nĂ« njĂ« shumĂ« tĂ« detaje, ato fusha apo prona,
se ne do tĂ« ngjarĂ« mĂ« shumĂ« nĂ« mĂ«nyrĂ« tĂ« pĂ«rshtatshme e quajnĂ« ata
nĂ« kontekstin e njĂ« objekti, edhe kĂ«to prona mund tĂ« jenĂ« objekte tĂ« tjera.
Dhe brenda ato objekte mund tĂ« jenĂ« objekte tĂ« tjera.
>> Ju e keni kĂ«tĂ« objekt shumĂ« tĂ« mĂ«dha me njĂ« shumĂ« tĂ« objekteve tĂ« tjera
nĂ« brendĂ«si tĂ« saj, i cili lloj i krijon idenĂ« e njĂ« pemĂ« tĂ« madhe.
Tani, objekti dokument Ă«shtĂ« njĂ« objekt shumĂ« tĂ« veĂ§antĂ« nĂ« JavaScript
qĂ« organizon tĂ«rĂ« web tuaj faqe nĂ«n kĂ«tĂ« lloj tĂ« ombrellĂ«
e njĂ« objekti.
Dhe kĂ«shtu nĂ« brendĂ«si tĂ« dokumentit objekt janĂ« objekte paraqitur
kreu dhe trupin e faqes tuaj web.
>> Brenda e atyre qĂ« janĂ« tĂ« tjera objekte, e tĂ« tjera, e tĂ« tjera,
derisa gjithĂ« faqen tuaj web ka janĂ« organizuar nĂ« kĂ«tĂ« objekt tĂ« madh.
Ă‡farĂ« Ă«shtĂ« kokĂ« kĂ«tu, apo jo?
E pra, ne e dimĂ« se si tĂ« punojnĂ« me objekte nĂ« JavaScript.
>> Pra, nĂ« qoftĂ« se ne kemi njĂ« objekt qĂ« i referohet tĂ« gjithĂ« faqen tonĂ« tĂ« internetit, qĂ«
do tĂ« thotĂ« duke e quajtur e saktĂ« Metodat pĂ«r tĂ« manipuluar atĂ« objekt
ose modifikimin e caktuar tĂ« pronave tĂ« saj, ne
mund tĂ« ndryshojĂ« elementet e faqe ynĂ« programmatically
duke pĂ«rdorur JavaScript nĂ« vend qĂ« tĂ« kodit gjĂ«ra me, tĂ« themi, HTML.
KĂ«shtu qĂ« kĂ«tu Ă«shtĂ« njĂ« shembull i njĂ« shumĂ« e thjeshtĂ« web faqe, e drejtĂ«?
Ajo e mori HTML tags, njĂ« kokĂ«.
>> Brenda ka njĂ« titull, Hello World.
Pastaj unĂ« kam njĂ« trup.
Brenda tĂ« kĂ«saj, unĂ« kam tri gjĂ«ra tĂ« ndryshme.
UnĂ« kam njĂ« header h2 etiketĂ«, njĂ« paragraf, dhe njĂ« lidhje.
Kjo Ă«shtĂ« njĂ« faqe shumĂ« e thjeshtĂ« web.
>> E pra, Ă§farĂ« mund dokumenti kundĂ«rshtojĂ« pĂ«r kĂ«tĂ« tĂ« duken si?
E pra, kjo Ă«shtĂ« pak frikshme ndoshta nĂ« fillim.
Por kjo Ă«shtĂ« me tĂ« vĂ«rtetĂ« vetĂ«m njĂ« pemĂ« e madhe.
Dhe nĂ« vetĂ« rrĂ«njĂ«t e saj Ă«shtĂ« dokument.
>> Brenda dokumenti Ă«shtĂ« njĂ« tjetĂ«r objekt iu referuar HTML tĂ« faqes sime.
Dhe HTML i faqes sime Ă«shtĂ« e gjithĂ« kjo.
Dhe pastaj brenda HTML objekt, unĂ« kam njĂ« objekt kokĂ«,
i cili i referohet Ă§do gjĂ« atje.
>> Dhe brenda atje, UnĂ« kam njĂ« objekt titullin.
Dhe brenda atje, unĂ« kam njĂ« tjetĂ«r kundĂ«rshtojnĂ« kjo Ă«shtĂ« vetĂ«m Hello World.
UnĂ« mund tĂ« ketĂ« trupin tim pĂ«rfaqĂ«suar si kjo.
>> Brenda trupit tim, unĂ« kam njĂ« H2 objekt dhe njĂ« objekt pĂ«r p paragrafi
dhe njĂ« njĂ« objekt pĂ«r njĂ« lidhje.
Dhe kĂ«shtu kjo tĂ«rĂ« hierarki mund tĂ« pĂ«rfaqĂ«sohet si njĂ« pemĂ« tĂ« madhe
me shumĂ« pak mĂ« tĂ« vogĂ«l gjĂ«ra qĂ« vijnĂ« nga ajo.
Tani, sigurisht, kur ne jemi duke programimit, ne
nuk mendoj pĂ«r gjĂ«ra tĂ« tilla si njĂ« pemĂ« tĂ« madhe.
Ne duam tĂ« shohim aktuale Kodi gjĂ«ra tĂ« lidhura.
>> Dhe pĂ«r fat tĂ« mirĂ«, ne mund tĂ« pĂ«rdorin mjetet tona developer
qĂ« nĂ« fakt tĂ« marrĂ« njĂ« sy nĂ« Dokumenti objekt ky website-it.
Dhe le ta bĂ«jmĂ« atĂ«.
KĂ«shtu qĂ« unĂ« e kam hapur njĂ« skedĂ« tĂ« shfletuesit.
>> Dhe unĂ« e kam hapur Mjete Zhvilluesish.
Dhe nĂ« video e mia nĂ« JavaScript, unĂ« pĂ«rmendi se konsol nuk Ă«shtĂ«
vetĂ«m diku ku ne tĂ« shtypura informacion,
kjo Ă«shtĂ« gjithashtu njĂ« vend ku ne mund informatave tĂ« dhĂ«na.
NĂ« kĂ«tĂ« kontekst, Ă§farĂ« UnĂ« do tĂ« them Ă«shtĂ«
UnĂ« do tĂ« doja tĂ« marrĂ« pĂ«rsĂ«ri objektet dokument,
kĂ«shtu qĂ« unĂ« mund tĂ« fillojĂ« tĂ« ketĂ« njĂ« vĂ«shtrim nĂ« atĂ«.
Pra, si mund ta bĂ«ni kĂ«tĂ«?
E pra, nĂ« qoftĂ« se unĂ« dua tĂ« organizojnĂ« me tĂ« vĂ«rtetĂ« bukur,
UnĂ« jam duke shkuar pĂ«r tĂ« thĂ«nĂ« console.dir, D-i-R. Tani, unĂ« e pĂ«rdorin console.log pĂ«r tĂ« vetĂ«m tĂ« shtypura
diĂ§ka jashtĂ« shumĂ« e thjeshtĂ«.
Por nĂ« qoftĂ« se unĂ« dua tĂ« organizoj kĂ«tĂ« hierarkike si njĂ« objekt,
UnĂ« dua qĂ« ajo lloj i strukturuar si njĂ« strukturĂ« directory.
>> KĂ«shtu qĂ« unĂ« dua tĂ« console.dir dokument.
UnĂ« jam duke shkuar pĂ«r tĂ« goditur Enter.
Dhe tĂ« drejtĂ«n poshtĂ« atĂ« tani, dhe unĂ« do tĂ« zoom nĂ« kĂ«tu,
UnĂ« kam marrĂ« kĂ«tĂ« dokument pĂ«rgjigje me njĂ« shigjetĂ« tĂ« vogĂ«l tjetĂ«r pĂ«r tĂ«.
Tani, kur kam hapur kĂ«tĂ« shigjetĂ«, atje do tĂ« jetĂ« njĂ« shumĂ« gjĂ«ra.
>> Por, ne jemi duke shkuar pĂ«r tĂ« injorojĂ« shumĂ« e ai dhe lloji i vetĂ«m fokus
nĂ« pjesĂ«n mĂ« tĂ« rĂ«ndĂ«sishme, kĂ«shtu qĂ« ne mund tĂ« fillojnĂ« pĂ«r tĂ« lundruar kĂ«tĂ« dokument.
Ka shumĂ« mĂ« tepĂ«r pĂ«r DOM se vetĂ«m nyjet dhe nyjet fĂ«mijĂ« prind.
Ka shumĂ« gjĂ«ra ndihmĂ«se.
>> KĂ«shtu qĂ« unĂ« jam duke shkuar pĂ«r tĂ« hapur kĂ«tĂ« ide.
Dhe ka njĂ« tĂ«rĂ«si shumĂ« gjĂ«ra qĂ« pops up.
Por tĂ« gjitha qĂ« mĂ« intereson Ă«shtĂ« tĂ« drejtĂ« kĂ«tu, nyjet fĂ«mijĂ«.
Le tĂ« hapur se deri.
>> Brenda atje shoh diĂ§ka e njohur, HTML.
Pra, brenda tĂ« dokumentit tonĂ« njĂ« nivel poshtĂ«, HTML.
I hapur se deri.
Ă‡farĂ« do presim?
>> NĂ«se ju kujtohet nga diagramin tonĂ«, Ă§farĂ« duhet tĂ« gjejmĂ« brenda HTML?
Cilat dy nyjet janĂ« nĂ«n atĂ« nĂ« pemĂ«?
Le tĂ« gjeni.
Ne tĂ« hapĂ« HTML.
Ne do tĂ« shkojmĂ« deri nĂ« nyjet e saj fĂ«mijĂ«ve.
>> Pop se hapur.
Ka kokĂ« dhe trup.
Dhe ne mund tĂ« hapur deri nĂ« kokĂ«.
Shko tek nyjet e saj fĂ«mijĂ«ve.
E pra, nuk ka titullin.
>> Dhe ne mund tĂ« shkoni nĂ« dhe mĂ« kĂ«shtu pĂ«rgjithmonĂ«.
Ne mund tĂ« bĂ«jmĂ« kĂ«tĂ« me trup si.
Por ka njĂ« mĂ«nyrĂ« pĂ«r ne qĂ« tĂ« shikojmĂ« nĂ« dokumenti i organizuar si njĂ« objekt i madh.
Dhe nĂ«se ne shikojmĂ« nĂ« Ă«shtĂ« njĂ« i madh objekt qĂ« duket shumĂ«
si kod, kjo do tĂ« thotĂ« qĂ« ne mund tĂ« fillojmĂ« pĂ«r tĂ« manipuluar kĂ«tĂ« objekt tĂ« madh duke pĂ«rdorur
Kodi pĂ«r tĂ« ndryshuar Ă§ka tonĂ« Faqja e internetit duket dhe ndjehet si.
>> Pra, kjo Ă«shtĂ« njĂ« mjet mjaft i fuqishĂ«m ne kemi nĂ« dispozicion tani.
Pra, si ne vetĂ«m e pa, The Dokumenti objekt nĂ« vetvete
dhe tĂ« gjitha objektet brenda e saj kanĂ« pronat dhe metodat, vetĂ«m
si Ă§do objekt tjetĂ«r qĂ« ne i kemi punuar me tĂ« nĂ« JavaScript.
Por ne mund tĂ« pĂ«rdorim ato prona dhe pĂ«rdorin kĂ«to metoda pĂ«r tĂ« lloj tĂ« StĂ«rvitja poshtĂ«
nga dokumenti i madh dhe pĂ«r tĂ« marrĂ« mĂ« tĂ« ulĂ«t dhe mĂ« tĂ« ulĂ«t dhe mĂ« tĂ« ulĂ«t,
finer dhe finer kokrra e detaje, deri sa ne
tĂ« shkoj nĂ« njĂ« pjesĂ« shumĂ« tĂ« veĂ§antĂ« tĂ« tonĂ« Web faqe qĂ« ne duam tĂ« ndryshojmĂ«.
>> Dhe kur ne update pronat e Document Object ose telefononi ato metoda,
gjĂ«ra mund tĂ« ndodhĂ« nĂ« faqen tonĂ« tĂ« internetit.
Dhe ne nuk kemi nevojĂ« pĂ«r tĂ« bĂ«rĂ« ndonjĂ« freskuese tĂ« kenĂ« kĂ«to ndryshime hyjnĂ« nĂ« fuqi.
>> Dhe kjo Ă«shtĂ« njĂ« aftĂ«si pretty cool pĂ«r kemi kur ne jemi duke punuar me kodin.
Pra, cilat janĂ« disa prej kĂ«tyre pronave qĂ« janĂ« pjesĂ« e njĂ« objekti dokument?
E pra, ju ndoshta pa njĂ« disa prej tyre me tĂ« vĂ«rtetĂ« shpejt
si ne u zipping me anĂ« tĂ« dokumentit gjigand
Objekti ne vetĂ«m e pa nĂ« shfletues.
>> Por disa prej kĂ«tyre pronave mund tĂ« jenĂ« gjĂ«ra tĂ« tilla si HTML brendshme.
Dhe ju mund edhe tĂ« kujtojnĂ« mua duke pĂ«rdorur kĂ«tĂ« nĂ« video JavaScript
nĂ« fund kur unĂ« ishte duke folur nĂ« lidhje me ngjarjet.
Ă‡farĂ« ishte kjo HTML brendshme?
E pra, kjo Ă«shtĂ« vetĂ«m ajo qĂ« Ă«shtĂ« nĂ« mes tags.
>> Dhe kĂ«shtu HTML brendshme, pĂ«r shembull, i titullit
tag, nĂ« qoftĂ« se ne e kishte mbajtur nĂ« vazhdim e sipĂ«r se shembull njĂ« moment mĂ« parĂ«,
do tĂ« kishte qenĂ« Hello World.
Ky ishte titulli i faqes sonĂ«.
Pronat e tjera pĂ«rfshijnĂ« emrin nyje, tĂ« cilat
Ă«shtĂ« emri i njĂ« HTML element i tillĂ« si titull.
ID, e cila Ă«shtĂ« ID atribut i njĂ« element HTML.
>> KujtojnĂ« se ne mund tĂ« tregojnĂ« posaĂ§Ă«risht Elementet specifike HTML sonĂ«
me njĂ« atribut ID, e cila zakonisht vjen nĂ« dispozicion nĂ« kuadĂ«r tĂ« CSS,
nĂ« mĂ«nyrĂ« specifike.
Nyja prind, i cili Ă«shtĂ« njĂ« referencĂ« pĂ«r ajo Ă«shtĂ« vetĂ«m deri mbi mua nĂ« DOM.
Dhe nyjet e fĂ«mijĂ«s, i cili Ă«shtĂ« njĂ« referencĂ« pĂ«r Ă§farĂ« Ă«shtĂ« poshtĂ« mua.
Dhe ne pamĂ« shumĂ« se vetĂ«m duke kĂ«rkuar nĂ«pĂ«rmjet.
Nyjet fĂ«mijĂ«, kjo Ă«shtĂ« se si ne e mori gjithnjĂ« e mĂ« poshtĂ« nĂ« pemĂ«.
>> Atributet, kjo Ă«shtĂ« vetĂ«m njĂ« grup e atributet e elementit HTML.
Pra, njĂ« shembull i atributeve fuqisĂ« tĂ« jetĂ« nĂ« qoftĂ« se ju keni njĂ« tag imazhit,
ajo zakonisht ka njĂ« atribut burim, ndoshta njĂ« lartĂ«si dhe njĂ« atribut gjerĂ«si.
Dhe kĂ«shtu qĂ« do tĂ« jetĂ« vetĂ«m njĂ« grup tĂ« gjithĂ« nga atributet lidhur
me atĂ« element HTML.
>> Style Ă«shtĂ« njĂ« tjetĂ«r qĂ« paraqet CSS
styling e njĂ« elementi tĂ« veĂ§antĂ«.
Dhe mĂ« vonĂ« nĂ« kĂ«tĂ« Video, ne do tĂ« nĂ« mĂ«nyrĂ« specifike
Stili levave pĂ«r tĂ« bĂ«rĂ« njĂ« Ă§ift e ndryshimeve nĂ« faqen tonĂ« tĂ« internetit.
Pra, kĂ«to janĂ« disa prona.
>> Dhe ka edhe disa Metodat qĂ« ne mund tĂ«
pĂ«rdorin pĂ«r tĂ« edhe mĂ« shpejt ndoshta tĂ« izoluar elementet e dokumentit objekt.
Ndoshta, mĂ« i zhdĂ«rvjellĂ«t e kĂ«tyre qenĂ« getElementById.
KĂ«shtu qĂ« unĂ« mund tĂ« them diĂ§ka si, sepse mos harroni kjo Ă«shtĂ« njĂ« metodĂ« e Dokumentit
Object, document.getElementById.
>> Dhe brenda kĂ«tyre kllapa, specifiko njĂ« element HTML me njĂ« ID tĂ« veĂ§antĂ«
atribut qĂ« unĂ« kam parĂ« vendosur, dhe unĂ« do tĂ« menjĂ«herĂ«
shkojnĂ« drejtĂ« nĂ« atĂ« element e internetit tĂ« pĂ«rgjithshĂ«m.
KĂ«shtu qĂ« unĂ« nuk kam tĂ« shpuar ndoshta poshtĂ« nĂ«pĂ«r Ă§do shtresĂ« tĂ« vetme.
UnĂ« mund tĂ« pĂ«rdorni vetĂ«m kĂ«tĂ« metodĂ« pĂ«r tĂ« gjetur atĂ«, lloj si njĂ« raketĂ« e kĂ«rkimit tĂ« ngrohjes,
e drejtĂ«?
Ajo vetĂ«m shkon dhe gjen saktĂ«sisht se Ă§farĂ« ajo Ă«shtĂ« duke kĂ«rkuar pĂ«r.
>> GetElementsByTagName Ă«shtĂ« shumĂ« tĂ« ngjashme nĂ« frymĂ«.
Ndoshta kjo do tĂ« gjeni tĂ« gjitha tĂ« tags guximshme ose tĂ« gjithĂ« tags p
dhe mĂ« jepni njĂ« sĂ«rĂ« gjithĂ§ka qĂ« unĂ« pastaj mund tĂ« punojnĂ« me.
appendChild shton diĂ§ka njĂ« nivel poshtĂ« nĂ« pemĂ«.
>> KĂ«shtu qĂ« unĂ« mund tĂ« shtoni njĂ« tĂ« tĂ«rĂ« tĂ« re Elementi njĂ« nivel mĂ« tĂ« ulĂ«t.
Ose unĂ« mund tĂ« hiqni njĂ« element qĂ« Ă«shtĂ« njĂ« nivel mĂ« tĂ« ulĂ«t, si dhe nĂ« qoftĂ« se unĂ« dua
tĂ« fshini diĂ§ka nga web faqen time.
Tani, njĂ« shĂ«nim tĂ« shpejtĂ« coding dhe njĂ« tĂ« shpejtĂ« dhimbje koke kursyer shĂ«nim, me shpresĂ«.
>> getElementById-- D Ă«shtĂ« me tĂ« vogla.
UnĂ« nuk mund t'ju them se sa herĂ« unĂ« kam pĂ«rdorur getElementById dhe kapitalizuar
D atje.
PĂ«r shkak se ajo Ă«shtĂ« me tĂ« vĂ«rtetĂ« e zakonshme.
NĂ«se e shkruajmĂ« ID fjalĂ«n, Ă«shtĂ« zakonisht Kapitali I kapital D.
Dhe kodi im thjesht nuk punon.
Dhe unĂ« nuk mund ta kuptoj se pse.
Kjo Ă«shtĂ« njĂ« tĂ« vĂ«rtetĂ«, tĂ« vĂ«rtetĂ«, tĂ« vĂ«rtetĂ« bug pĂ«rbashkĂ«t qĂ« tĂ« gjithĂ« e bĂ«n,
edhe ekspertĂ«t qĂ« kanĂ« bĂ«rĂ« kĂ«tĂ« pĂ«rgjithmonĂ«.
Pra, vetĂ«m tĂ« jetĂ« i vetĂ«dijshĂ«m, getElementById, se d Ă«shtĂ« me tĂ« vogla.
Dhe me shpresĂ«, se ju kursen disa minuta tĂ« paktĂ«n e dhimbje.
>> Pra, Ă§farĂ« e bĂ«n e gjithĂ« kjo na thoni?
Ne kemi kĂ«to metoda.
Ne kemi kĂ«to prona.
Tani, nĂ« qoftĂ« se ne fillojmĂ« nga dokument, dokumenti.
Ă§farĂ«do, ne tani mund tĂ« merrni nĂ« ndonjĂ« copĂ« e vetme e faqes tonĂ« tĂ« internetit
qĂ« ne duam tĂ« pĂ«rdorur JavaScript vetĂ«m duke e quajtur kĂ«to metoda
dhe leveraging pronat qĂ« ne gjejmĂ« nĂ« vende tĂ« ndryshme.
>> Kjo mund tĂ« merrni gojor, kjo document.getElementByID,
ndoshta kanĂ« njĂ« emĂ«r tĂ« gjatĂ« tag, ndoshta ju bĂ«ni shumĂ« telefonata mĂ« vonĂ«.
GjĂ«rat mund tĂ« merrni pak gojor.
Dhe si programuesit, si ju keni ndoshta shihet nĂ« shumĂ« nga kĂ«to video,
ne nuk i pĂ«lqen gjĂ«rat gojor.
>> Ne si tĂ« jetĂ« nĂ« gjendje tĂ« bĂ«jĂ« gjĂ«ra tĂ« shpejt.
Pra, ne do tĂ« dĂ«shironim njĂ« mĂ« mĂ«nyrĂ« koncize pĂ«r tĂ« thĂ«nĂ« diĂ§ka.
Pra, ky lloj i Ă§on nĂ« Nocioni i diĂ§ka tĂ« quajtur jQuery.
Tani jQuery nuk Ă«shtĂ« JavaScript.
Kjo nuk Ă«shtĂ« pjesĂ« e JavaScript.
>> Ajo Ă«shtĂ« njĂ« bibliotekĂ« qĂ« u shkrua nga disa programuesit JavaScript
rreth 10 vjet mĂ« parĂ«.
Dhe qĂ«llimi i saj Ă«shtĂ« pĂ«r tĂ« lehtĂ«suar kjo Ă§farĂ« Ă«shtĂ« quajtur side scripting klient, i cili
Ă«shtĂ« nĂ« thelb ajo qĂ« ne ishim vetĂ«m duke folur nĂ« lidhje me manipulime DOM.
Dhe kĂ«shtu qĂ« nĂ« qoftĂ« se unĂ« tĂ« kĂ«rkuar pĂ«r tĂ« modifikuar ngjyrĂ«n e sfondit e web faqen time, ndoshta
njĂ« Div veĂ§antĂ«.
>> KĂ«tu, unĂ« jam me sa duket duke u ElementById colorDiv.
Dhe unĂ« dua tĂ« vendosur ngjyra e saj e sfondit.
NĂ« qoftĂ« se unĂ« jam vetĂ«m duke pĂ«rdorur JavaScript tĂ« pastĂ«r duke pĂ«rdorur Document Object Model,
kjo Ă«shtĂ« njĂ« shumĂ« gjĂ«ra, apo jo? document.getElementByID
colorDiv.style.backgroundColor = e gjelbĂ«r.
>> Uf.
Kjo ishte shumĂ« pĂ«r tĂ« thĂ«nĂ«.
Kjo Ă«shtĂ« njĂ« shumĂ« tĂ« tipit, too.
Dhe kĂ«shtu nĂ« jQuery, ne mund tĂ« themi ndoshta kjo pak mĂ« koncize.
Tregtia off qenĂ« kjo Ă«shtĂ« ndoshta pak pak mĂ« shumĂ« i fshehtĂ« gjithĂ« njĂ« e papritur,
e drejtĂ«?
>> TĂ« paktĂ«n gjatĂ« Ă«shtĂ« pak mĂ« shpjegues pĂ«r atĂ« qĂ« ne jemi duke bĂ«rĂ«.
Kjo shenjĂ« dollar, kllapa, tĂ« japin kuotĂ«n e vetme, hash, colorDiv, e drejtĂ«?
Cfare do te thote ajo?
E pra, kjo Ă«shtĂ« nĂ« thelb vetĂ«m document.getElementByID colorDiv.
>> Por kjo Ă«shtĂ« kjo lloj stenografi mĂ«nyrĂ« pĂ«r tĂ« bĂ«rĂ« atĂ« duke pĂ«rdorur jQuery.
Le tĂ« marrin njĂ« vĂ«shtrim tani nĂ« disa mĂ«nyra tĂ« ndryshme
qĂ« unĂ« mund tĂ« vĂ«rtetĂ« pĂ«rdorni kĂ«tĂ« Document Object
Model pĂ«r tĂ« manipuluar copa tĂ« web faqen time.
NĂ« veĂ§anti, ne jemi duke shkuar pĂ«r tĂ« punuar nĂ« manipulimin
ngjyra e njĂ« tĂ« veĂ§antĂ« Div, colorDiv, nĂ« njĂ« web faqe.
Pra, le tĂ« marrin njĂ« vĂ«shtrim nĂ« atĂ«.
NĂ« rregull.
KĂ«shtu qĂ« unĂ« jam nĂ« njĂ« faqe.
Ajo qĂ« quhet test.html kur shkarkoni kjo nĂ« qoftĂ« se ju doni tĂ« kallajxhi me kĂ«tĂ«.
Dhe unĂ« kam marrĂ« njĂ« bandĂ« e butonat nĂ« kĂ«tĂ« faqe.
Dhe unĂ« jam duke thĂ«nĂ« se funksionet individuale pĂ«r ngjyrĂ«n e sfondit, vjollcĂ«, jeshile,
portokalli, e kuqe, blu, njĂ« funksion i vetĂ«m pĂ«r ngjyrĂ«n e sfondit, mbajtĂ«s ngjarje
pĂ«r ngjyrĂ«n e sfondit, dhe duke pĂ«rdorur jQuery.
Ă‡farĂ« jam unĂ« duke folur pĂ«r kur unĂ« jam duke bĂ«rĂ« kĂ«tĂ«?
Pra, ne kemi parĂ« butonat.
Tani, le tĂ« marrin njĂ« vĂ«shtrim nĂ« disa tĂ« kodit burim kĂ«tu.
Ne do tĂ« fillojĂ« me test.html.
Funksionet e kĂ«shtu individuale pĂ«r sfond ngjyra Ă«shtĂ« ajo qĂ« unĂ« kam shtypur kĂ«tu.
MĂ« lejoni tĂ« lĂ«vizni pak.
>> Dhe ju do tĂ« vĂ«reni se unĂ« kanĂ« pĂ«rcaktuar kĂ«to butona
pĂ«r tĂ« thĂ«nĂ« kur ky buton Ă«shtĂ« klikuar, thirrni funksionin kthehet vjollcĂ«.
Kur ky buton Ă«shtĂ« tĂ« klikoni, nĂ« vend, quajmĂ« funksioni kthehet e gjelbĂ«r,
kthehet portokalli, nga ana e kuqe, tĂ« kthehet blu.
Ju ndoshta mund tĂ« mendoj se kjo ndoshta nuk Ă«shtĂ« dizajni mĂ« i mirĂ«
kuptim, apo jo?
>> Ajo do tĂ« jetĂ« mirĂ« nĂ« qoftĂ« se unĂ« mund tĂ« kanĂ« njĂ« qasje mĂ« tĂ« pĂ«rgjithshme.
E pra, sĂ« pari ne do tĂ« hedhim njĂ« vĂ«shtrim nĂ« Ă§farĂ« janĂ« kĂ«to pesĂ« funksione janĂ«
document.getElementByID colorDiv.style.background = purple,
jeshile, portokalli, e kuqe, dhe blu, respektivisht.
Pra, nuk Ă«shtĂ« veĂ§anĂ«risht dizajn tĂ« mirĂ«.
>> Seti tjetĂ«r i butonave UnĂ« kam Ă«shtĂ« qĂ« unĂ« kam shkruar
njĂ« funksion tĂ« vetĂ«m tĂ« quajtur ndryshojĂ« ngjyrĂ«n qĂ« me sa duket
pranon njĂ« varg si argument tĂ« saj.
Pra, kjo Ă«shtĂ« pak mĂ« mirĂ«.
Purple, jeshile, portokalli, e kuqe, blu Ă«shtĂ« tani njĂ« argument.
KĂ«shtu qĂ« unĂ« kam shkruar njĂ« shumĂ« tĂ« pĂ«rgjithshme Rasti funksion JavaScript,
e cila mund tĂ« duket diĂ§ka si kjo.
UnĂ« jam duke kaluar nĂ«.
Kjo ngjyrĂ« ndryshim funksion Ă«shtĂ« duke pritur njĂ« argument tĂ« quajtur ngjyra.
Dhe unĂ« jam duke thĂ«nĂ« se tĂ« vendosur ngjyra e sfondit tĂ« ngjyrĂ«s.
KĂ«shtu qĂ« kĂ«tu pĂ«rfaqĂ«son atĂ« qĂ« unĂ« kam marrĂ« kĂ«tu.
Pra, kjo Ă«shtĂ« pak mĂ« mirĂ«.
>> Por unĂ« mund tĂ« jetĂ« nĂ« gjendje tĂ« tĂ« bĂ«jĂ« mĂ« mirĂ« se kaq.
NĂ« qoftĂ« se ne do tĂ« shkojmĂ« poshtĂ« pĂ«r tĂ« marrĂ« njĂ« sy nĂ« situatĂ«n trajtues tĂ« ngjarjes,
tani tĂ« gjitha kĂ«to thirrje duken tĂ« njĂ«jta.
NĂ«se ju kujtohet pĂ«r tonĂ« diskutim mbi handlers ngjarje,
UnĂ« mund tĂ« merrni informacion nĂ« lidhje me tĂ« cilat e kĂ«to butona u klikuar dhe tĂ« pĂ«rdorin atĂ«.
>> Dhe kĂ«shtu nĂ« event.JavaScript, unĂ« kam shkruar ngjarje ngjyra ndryshim, e cila
kupton cili buton Ă«shtĂ« klikuar.
Kjo Ă«shtĂ« linja shkaktojĂ« objekt.
Dhe pastaj kĂ«tu, ajo merr me tĂ« vĂ«rtetĂ« gojor.
Por ajo qĂ« unĂ« jam duke bĂ«rĂ« Ă«shtĂ« qĂ« unĂ« jam vendosjen sfond
ngjyrĂ« tĂ« triggerObject inner.HTML.
Ky Ă«shtĂ« teksti nĂ« nĂ« mes tags butonin.
>> Dhe atĂ«herĂ« unĂ« me sa duket kam pĂ«r tĂ« vendosur atĂ« jo kapitale.
Dhe kjo Ă«shtĂ« se si unĂ« mund tĂ« konvertohet nĂ« njĂ« tĂ« tĂ«rĂ« varg tĂ« vogle nĂ« JavaScript pĂ«rdorur
se metoda jo kapitale.
Sepse kur kam vendosur njĂ« ngjyrĂ«, si unĂ« jam duke u pĂ«rpjekur pĂ«r tĂ« bĂ«rĂ« kĂ«tu,
ngjyra duhet tĂ« jetĂ« mbi tĂ« gjitha vogle.
>> Por butonin qĂ« kam pasur, nĂ« qoftĂ« se ne tĂ« marrĂ« njĂ« sy,
vini re se teksti ka shkruar me njĂ« P kapital pĂ«r purple.
Dhe pastaj nĂ« shumĂ« fund tĂ« fundit kĂ«tu, me sa duket unĂ«
tĂ« pĂ«rpiqet dhe tĂ« bĂ«jĂ« kĂ«tĂ« duke pĂ«rdorur jQuery si.
Dhe nĂ« kĂ«tĂ« rast, unĂ« nuk jam nĂ« tĂ« vĂ«rtetĂ« duke e quajtur njĂ« funksion nĂ« tĂ« gjitha.
UnĂ« e kam vetĂ«m tha klasĂ«s se unĂ« jam duke pĂ«rdorur pĂ«r kĂ«tĂ« buton Ă«shtĂ« njĂ« buton jQ.
Kjo eshte.
>> Pra, si nuk jQuery di se Ă§farĂ« jam duke bĂ«rĂ«?
E pra, kjo Ă«shtĂ« njĂ« nga pĂ«rparĂ«sitĂ« Ă§aj disavantazhet e jQuery.
Ajo mund tĂ« mĂ« lejoni tĂ« bĂ«j gjĂ«ra tĂ« shumĂ« koncize, por ndoshta jo
si intuitive.
Ndoshta ata tre tĂ« tjerĂ«t bĂ«jnĂ« njĂ« pak mĂ« shumĂ« kuptim se Ă§farĂ« unĂ« jam duke bĂ«rĂ«.
KĂ«tu, edhe pse, Ă§farĂ« po ndodh?
>> Me sa duket, duke krijuar njĂ« funksion anonim
se ngarkesa sa herĂ« dokumenti im Ă«shtĂ« gati, kĂ«shtu document.ready,
disa funksion do tĂ« ndodhĂ«.
NĂ« thelb, kur Ă«shtĂ« njĂ« dokument i gatshĂ«m?
Kjo Ă«shtĂ« kur faqja ime ka ngarkuar.
>> Pra, sa mĂ« shpejt qĂ« faqja ime ka ngarkuar, pas funksion Ă«shtĂ« gjithmonĂ« i gatshĂ«m.
Ajo thotĂ« se, nĂ« qoftĂ« se njĂ« objekt i tipit jQButton, ose nĂ«se klasĂ« jQButton Ă«shtĂ« klikuar,
ekzekutojĂ« kĂ«tĂ« funksion.
KĂ«shtu qĂ« kĂ«tu Ă«shtĂ« dy funksione anonim, njeri percaktohet brendĂ«si tĂ« tjetrĂ«s.
>> Pra, tĂ« gjithĂ« kontekstin e mia kĂ«tu deri mĂ« tani Ă«shtĂ« faqja ime
kur ajo ngarkesa ajo e quan kĂ«tĂ« funksion.
Dhe ky funksion Ă«shtĂ« duke pritur pĂ«r njĂ« buton pĂ«r tĂ« klikuar.
Dhe kur njĂ« buton Ă«shtĂ« klikuar, jQ button nĂ« mĂ«nyrĂ« specifike Ă«shtĂ« klikuar,
ajo e quan kĂ«tĂ« tĂ« tjera funksion, e cila do
pĂ«r tĂ« vendosur sfond ngjyra e colorDiv tĂ« jetĂ«
Ă§farĂ«do tekst Ă«shtĂ« nĂ« mes tags.
>> Ky Ă«shtĂ« nocioni i i cili buton Ă«shtĂ« klikuar.
Por ndryshe, kjo Ă«shtĂ« lloj i sillet e ngjashme me njĂ« ngjarje.
Kjo Ă«shtĂ« vetĂ«m nĂ« tĂ« njĂ«jtĂ«n mĂ«nyrĂ« unĂ« do tĂ« shprehĂ« kĂ«tĂ« nĂ« jQuery.
PĂ«rsĂ«ri, kjo Ă«shtĂ« ndoshta njĂ« mĂ« shumĂ« frikĂ«suese.
Kjo nuk Ă«shtĂ« aq i qartĂ« sa diĂ§ka si event.js,
i cili Ă«shtĂ« ndoshta pak mĂ« shumĂ« fjalĂ«shumĂ«, por pak mĂ« pak
frikĂ«suese.
>> Por nĂ«se hapet pĂ«rsĂ«ri mbi tĂ« shfletuesin tim dritare, nĂ« qoftĂ« se unĂ« tĂ« fillojĂ« clicking-- mirĂ«,
kjo ndryshoi nĂ« vjollcĂ«.
Kjo Ă«shtĂ« e gjelbĂ«r duke pĂ«rdorur metodĂ«n string.
Kjo Ă«shtĂ« portokalli duke pĂ«rdorur mbajtĂ«s ngjarje.
>> Kjo Ă«shtĂ« e kuqe duke pĂ«rdorur jQuery, e drejtĂ«?
Ata tĂ« gjithĂ« sillen saktĂ«sisht e njĂ«jtĂ«.
Ata vetĂ«m tĂ« bĂ«jĂ« atĂ« duke pĂ«rdorur tĂ« ndryshme afrohet pĂ«r tĂ« zgjidhur problemin.
Ka shumĂ« mĂ« tepĂ«r pĂ«r jQuery atĂ«herĂ« ne jemi sigurisht
do tĂ« flasim pĂ«r nĂ« kĂ«tĂ« video.
Por nĂ« qoftĂ« se ju doni tĂ« mĂ«soni mĂ« shumĂ«, ju mund tĂ« shkojnĂ« nĂ« lloj jQuery e dokumentacionit
dhe tĂ« mĂ«sojnĂ« mjaft pak mĂ« shumĂ« nĂ« lidhje me kjo bibliotekĂ« shumĂ« fleksibĂ«l, i cili
Ă«shtĂ« e madhe pĂ«r tĂ« bĂ«rĂ« anĂ«n e klientit scripting si Ă§farĂ« ishim duke bĂ«rĂ«
pĂ«r tĂ« manipuluar sy dhe tĂ« ndjehen e faqes tonĂ« tĂ« internetit
me Document Object Model.
UnĂ« jam Doug Lloyd.
Kjo Ă«shtĂ« CS50.