DOM (Document Object Model) je prikaz HTML stranice kao stabla objekata.
JavaScript može pristupiti tim objektima i mijenjati ih - to je DOM manipulacija.
Ukratko: DOM manipulacija = mijenjanje sadržaja stranice pomoću JavaScripta
bez ponovnog učitavanja stranice.
// Pronalaženje elementa po ID-u
let element = document.getElementById("mojDiv");
// Pronalaženje elemenata po klasi
let elementi = document.querySelectorAll(".kartica");
// Mijenjanje teksta
element.textContent = "Novi tekst!";
// Mijenjanje HTML-a unutar elementa
element.innerHTML = "<strong>Podebljani tekst</strong>";
// Mijenjanje stila
element.style.color = "red";
element.style.backgroundColor = "yellow";
Isprobaj DOM manipulaciju!
Unesi tekst i klikni gumbe za izmjenu stranice:
↑ Klikni gumbe da vidiš DOM manipulaciju u akciji!
Kalkulator
Jednostavan kalkulator napravljen u JavaScriptu:
Rezultat će se prikazati ovdje
// Čekamo klik na gumb
document.getElementById("btnRacunaj").addEventListener("click", function() {
// Uzmi vrijednosti iz inputa i pretvori u broj
let broj1 = parseFloat(document.getElementById("broj1").value);
let broj2 = parseFloat(document.getElementById("broj2").value);
let operacija = document.getElementById("operacija").value;
let rezultat;
// Provjeri unos
if (isNaN(broj1) || isNaN(broj2)) {
document.getElementById("rezultatKalk").textContent = "Unesi oba broja!";
return;
}
// Izračunaj
if (operacija === "+") { rezultat = broj1 + broj2; }
else if (operacija === "-") { rezultat = broj1 - broj2; }
else if (operacija === "*") { rezultat = broj1 * broj2; }
else if (operacija === "/") {
if (broj2 === 0) {
document.getElementById("rezultatKalk").textContent = "Dijeljenje s nulom!";
return;
}
rezultat = broj1 / broj2;
}
// Prikaži rezultat u elementu
document.getElementById("rezultatKalk").textContent = rezultat;
});
Kviz - provjeri znanje!
Odgovori na pitanja i provjeri koliko znaš o JavaScriptu:
1. Koja ključna riječ se koristi za konstantu koja se ne može mijenjati?
2. Što ispisuje: console.log(typeof "Hello")?
3. Tko je stvorio JavaScript?
4. Što radi document.getElementById("demo")?
5. Što je rezultat: 5 + "3" u JavaScriptu?
Event Listeners
Event listeners su funkcije koje "slušaju" događaje na elementima.
Kada se dogodi određeni event (klik, tipkanje...), funkcija se pokreće.
// Klik na gumb
document.getElementById("mojGumb").addEventListener("click", function() {
alert("Kliknuo si gumb!");
});
// Tipkanje u input
document.getElementById("mojInput").addEventListener("input", function() {
let tekst = this.value;
console.log("Korisnik tipka: " + tekst);
});
// Hover (miš iznad elementa)
document.getElementById("mojDiv").addEventListener("mouseover", function() {
this.style.backgroundColor = "yellow";
});
// Miš napustio element
document.getElementById("mojDiv").addEventListener("mouseout", function() {
this.style.backgroundColor = "";
});