DOM-i: faqe ndërvepruese

Faqja si diçka që mund ta prekësh

Di të shkruash JavaScript, dhe di të shkruash HTML, por pjesa interesante është t'i bashkosh: t'i lejosh kodit tënd të prekë faqen dhe ta ndryshojë ndërsa vizitori shikon. Ura mes të dyjave është DOM-i, shkurt për Document Object Model. Kur shfletuesi ngarkon HTML-në tënde, ndërton në memorie një model të gjallë të faqes, ku çdo titull, paragraf dhe imazh është një objekt që kodi yt mund ta gjejë e ta modifikojë. Ndrysho një objekt në DOM dhe faqja përditësohet në ekran menjëherë.

Pra DOM-i nuk është gjuhë e re. Është grupi i dorezave që JavaScript përdor për të kapur elementët që i shkrove tashmë dhe për t'u bërë diçka.

Gjetja e një elementi

Para se të ndryshosh diçka, duhet ta tregosh me gisht. Mënyra më e drejtpërdrejtë është përmes id-së, një emri të veçantë që i jep një elementi në HTML.

<p id="pershendetja">Përshëndetje.</p>

Në JavaScript-in tënd, document.getElementById e merr pikërisht atë element që të punosh me të.

let para = document.getElementById("pershendetja");

Tani para është doreza jote mbi atë paragraf. Emërto elementin, merr një dorezë, pastaj vepro mbi të.

Vetitë dhe metodat

Sapo mban një element, ndërvepron me të përmes vetive (properties) dhe metodave. Një veti është një vlerë që mund ta lexosh ose ta caktosh, si teksti brenda një elementi. Një metodë është një veprim që mund ta kryesh. Ajo që do ta përdorësh vazhdimisht është vetia textContent, që lexon ose zëvendëson fjalët brenda një elementi.

let para = document.getElementById("pershendetja");
para.textContent = "Mirëmbrëma.";

Ai caktim i vetëm e prek faqen e gjallë dhe i ndërron fjalët e paragrafit. Vizitori sheh "Mirëmbrëma." aty ku ishte "Përshëndetje.", pa asnjë ringarkim. Të caktosh një veti në DOM është mënyra si ndryshon atë çka është në ekran.

Reagimi ndaj një klikimi

Ndryshimi i faqes është më i dobishëm kur ndodh si përgjigje ndaj vizitorit. Një ngjarje (event) është diçka që ndodh në faqe, si një klikim, dhe mund t'i kërkosh një elementi të ekzekutojë një funksion kur ngjarja e tij shpërthen. Mënyra më e thjeshtë është atributi onclick në HTML, që emërton një funksion për të thirrur.

<button onclick="pershendet()">Thuaj përshëndetje</button>

Kur klikohet butoni, shfletuesi ekzekuton funksionin tënd pershendet. Brenda tij, përdor veglat e DOM-it më sipër për të ndryshuar faqen. Struktura në HTML, sjellja në JavaScript, të bashkuara nga ngjarja.

Një shembull i punuar: një numërues klikimesh

Le të ndërtojmë diçka të vogël por të plotë: një buton që numëron sa herë është shtypur dhe shfaq totalin që rrjedh. HTML na jep një vend për të shfaqur numrin dhe një buton për të shtypur.

<p id="numri">0</p>
<button onclick="shtoNje()">Shtypmë</button>
<script src="script.js"></script>

JavaScript e mban totalin te një variabël dhe, në çdo klikim, e ngre dhe e rishkruan te paragrafi.

let total = 0;

function shtoNje() {
  total = total + 1;
  document.getElementById("numri").textContent = total;
}

Ndiq një klikim. Butoni thërret shtoNje, që i shton një total-it, pastaj gjen paragrafin me id numri dhe ia cakton textContent-in te numri i ri. Shtype pesë herë dhe faqja shfaq 5, duke u përditësuar menjëherë çdo herë. Asgjë nuk ringarkohet, sepse ti modifikove DOM-in e gjallë në vend që të merrje një faqe të re.

Ai numërues është e gjithë forma e faqeve ndërvepruese në miniaturë: HTML i vendos elementët, një ngjarje e vëren klikimin, dhe JavaScript e prek DOM-in për të përditësuar atë çka sheh vizitori. Çdo ndërfaqe më e pasur që has më vonë ndërtohet pikërisht nga këto lëvizje.

Provo veten

1. Me fjalët e tua, çfarë është DOM-i, dhe pse ndryshimi i një objekti në të ndryshon atë çka shfaqet në ekran?
2. Cili është ndryshimi mes një vetie si textContent dhe një metode, dhe cilën përdori numëruesi i klikimeve për të përditësuar numrin?
3. Butoni yt numërues nuk bën asgjë kur klikohet dhe konsola tregon se funksioni nuk u gjet kurrë. Duke ndjekur këshillën më sipër, cilët dy emra do të kontrolloje që të përputhen?