Javascript: gyakorljunk! DOM, eseménykezelés

A HTML DOM (Document Object Model) egy programozási interfész, amelyet weboldalak felépítésének és tartalmának reprezentálására használnak. Lehetővé teszi a webfejlesztők számára, hogy dinamikusan manipulálják és módosítsák a weboldal tartalmát és kinézetét. A HTML DOM az oldal elemeit fastruktúrába szervezi, amelyet a weboldal kódja alapján hoz létre. Minden HTML elem, például fejléc, szöveg, képek, űrlapok, hivatkozások stb., a DOM-ban egy objektumként jelenik meg. Ezeket az objektumokat JavaScript segítségével könnyen elérhetjük és manipulálhatjuk. Például változtathatjuk az elemek tartalmát, stílusát, hozzáadhatunk vagy eltávolíthatunk elemeket, kezelhetjük eseményeket stb.

Nézzük meg hogyan lehet JS függvényekkel kezelni a html objektumokat. Hogyan azonosíthatóak a html elemek?

getElementById: Ez a DOM módszer az elemek egyedi azonosítójára támaszkodik.

var elem = document.getElementById("myElementId");

1	var elem = document.getElementById("myElementId");

getElementsByClassName: Ezzel a módszerrel az elemeket egy adott osztály neve alapján lehet megtalálni. A html oldalon az összes olyan elem, amely ugyanazon osztályhoz tartozik, egy NodeList-ben kerül visszaadásra.

var elemek = document.getElementsByClassName("myClassName");

1	var elemek = document.getElementsByClassName("myClassName");

getElementsByTagName: Ezzel a módszerrel az elemeket egy adott HTML címkéjük (például <div>,<p>) alapján találja meg.

var divek = document.getElementsByTagName("div");

1	var divek = document.getElementsByTagName("div");

querySelector és querySelectorAll: Ezek a módszerek lehetővé teszik CSS szelektorok használatát az elemek keresésére. A querySelector az első talált elemet adja vissza, míg a querySelectorAll az összes találatot NodeList-ként adja vissza.

var elem = document.querySelector(".myClass");
var bekezdes_elemek = document.querySelectorAll("div &gt; p");

1 2	var elem = document.querySelector(".myClass"); var bekezdes_elemek = document.querySelectorAll("div > p");

HTML elemek módosítása

Tartalom módosítása:

Az elem tartalmának módosításához az adott elem innerHTML vagy textContent tulajdonságát módosíthatjuk:

var elem = document.getElementById("myElementId");
elem.innerHTML = "Új tartalom"; // HTML-t is tartalmazhat
// vagy
elem.textContent = "Új szöveg tartalom";

var elem = document.getElementById("myElementId");

elem.innerHTML = "Új tartalom"; // HTML-t is tartalmazhat

// vagy

elem.textContent = "Új szöveg tartalom";

Attribútumok módosítása:

Az elem attribútumainak módosításához a setAttribute és getAttribute metódusokat használhatjuk:

var link = document.getElementById("myLink");
link.setAttribute("href", "új-link-cím");
var href = link.getAttribute("href");

var link = document.getElementById("myLink");

link.setAttribute("href", "új-link-cím");

var href = link.getAttribute("href");

Stílus módosítása:

Az elemek stílusát a style tulajdonságon keresztül módosíthatjuk. Ebben az esetben a CSS tulajdonságokat és értékeiket a JavaScript objektumként kezeljük.

var elem = document.getElementById("myElementId");
elem.style.color = "red";
elem.style.backgroundColor = "yellow";

var elem = document.getElementById("myElementId");

elem.style.color = "red";

elem.style.backgroundColor = "yellow";

Elemek hozzáadása és eltávolítása:

Új elemeket hozzáadhatunk az oldalhoz, vagy meglévő elemeket eltávolíthatunk. Például a createElement, appendChild és removeChild metódusok használhatók.

var newDiv = document.createElement("div");
newDiv.textContent = "Új div elem";
document.body.appendChild(newDiv); // Az új elemet a dokumentumhoz adja

var newDiv = document.createElement("div");

newDiv.textContent = "Új div elem";

document.body.appendChild(newDiv); // Az új elemet a dokumentumhoz adja

Eseménykezelők hozzáadása:

Az elemekhez eseménykezelők hozzáadásával reagálhatunk a felhasználói interakciókra

var button = document.getElementById("myButton");
button.addEventListener("click", function() {
    alert("Gombra kattintva!");
});

var button = document.getElementById("myButton");

button.addEventListener("click", function() {

alert("Gombra kattintva!");

});

Példa:

Készíts JS programot! Az ‘elso’ nevű függvény hozzon létre egy 10 elemű tömböt, random 1-50 közötti számmal! A számokat írja ki egy div-be! A ‘masodik’ nevű függvény számolja ki minden tömbelemnek a dupláját, és írja ki egy másik div-be! Ez a függvény akkor fusson le, ha az eslő div-en duplán kattintunk!
Formázd meg a 2db divet tetszőlegesen! A 2. div csak akkor jelenjen meg, amikor az elsőn duplán kattintunk!

<!DOCTYPE html>
<html lang="hu">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS függvények</title>
    <style>
        #tomb{
            background-color: antiquewhite;
            box-shadow: 5 5 5 back;
            border-radius: 10px;
            height: 50px;
            width: auto;
            padding: 10px;
        }
        #tombKetszerese{            
            background-color: rgb(101, 250, 121);
            box-shadow: 5 5 5 back;
            border-radius: 10px;
            height: 50px;
            width: auto;
            padding: 10px;
            visibility: hidden;
        }
    </style>
</head>
<body>
    <div id="tomb" ondblclick="masodik(randomTomb);"></div>
    <div id="tombKetszerese"></div>
    <script>
        // Az első függvény, amely létrehoz egy 10 elemű tömböt véletlenszerű számokkal.
        function elso() {
            const randomTomb = [];
            for (let i = 0; i < 10; i++) {
                const veletlenszam = Math.floor(Math.random() * 50) + 1;
                randomTomb.push(veletlenszam);
            }
            return randomTomb;
        }
        // A második függvény, amely kiszámolja minden tömbelem dupláját és kiírja egy div-be.
        function masodik(array) {
            const tomb_duplaja = array.map(number => number * 2);
            const duplaDiv = document.getElementById('tombKetszerese');
            duplaDiv.style.visibility = "visible";            
            duplaDiv.innerHTML = `A tömb elemeinek duplája: ${tomb_duplaja.join(', ') }`;
        }
        // létrehozzuk a tömböt
        const randomTomb = elso();
        // kiírjuk az eredeti tömb elemeit egy div-be
        const tombDiv = document.getElementById('tomb');
        tombDiv.innerHTML = `Eredeti tömb: ${randomTomb.join(', ')}`;
        
    </script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>JS függvények</title>

<style>

#tomb{

background-color: antiquewhite;

box-shadow: 5 5 5 back;

border-radius: 10px;

height: 50px;

width: auto;

padding: 10px;

}

#tombKetszerese{

background-color: rgb(101, 250, 121);

box-shadow: 5 5 5 back;

border-radius: 10px;

height: 50px;

width: auto;

padding: 10px;

visibility: hidden;

}

</style>

</head>

<body>

// Az első függvény, amely létrehoz egy 10 elemű tömböt véletlenszerű számokkal.

function elso() {

const randomTomb = [];

for (let i = 0; i < 10; i++) {

const veletlenszam = Math.floor(Math.random() * 50) + 1;

randomTomb.push(veletlenszam);

}

return randomTomb;

}

// A második függvény, amely kiszámolja minden tömbelem dupláját és kiírja egy div-be.

function masodik(array) {

const tomb_duplaja = array.map(number => number * 2);

const duplaDiv = document.getElementById('tombKetszerese');

duplaDiv.style.visibility = "visible";

duplaDiv.innerHTML = `A tömb elemeinek duplája: ${tomb_duplaja.join(', ') }`;

}

// létrehozzuk a tömböt

const randomTomb = elso();

// kiírjuk az eredeti tömb elemeit egy div-be

const tombDiv = document.getElementById('tomb');

tombDiv.innerHTML = `Eredeti tömb: ${randomTomb.join(', ')}`;

</script>

</body>

</html>

Készíts űrlapot, ami kiszámolja egy szám négyzetét onfocusout eseményre!
Ha írunk a szövegbeviteli mezőbe (onfocus), legyen az input mező háttere zöld! Az eredményt egy div-be írja ki a program.

<!DOCTYPE html>
<html lang="hu">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS eseménykezelés</title>
</head>
<body>
    <script>
        function szamit() {
            // Szövegbeviteli mezőből kinyerjük a számot
            var bevitelimezo = document.getElementById("szam_input");
            var szam = parseFloat(bevitelimezo.value);
            if (!isNaN(szam)) {
                // Szám négyzetének kiszámítása
                var eredmeny = szam * szam;
                // Eredmény kiírása
                var eredmeny_mezo = document.getElementById("eredmenydiv");
                eredmeny_mezo.innerHTML = "A szám négyzete: " + eredmeny;
            }
        }        
        function hattervalt() {
            var bevitelimezo = document.getElementById("szam_input");
            bevitelimezo.style.backgroundColor = "green";
        }
    </script>
    <h1>Számnégyzet kalkulátor</h1>
    <form>
        <label for="numberInput">Szám:</label>
        <input type="text" id="szam_input" onfocus="hattervalt()" onfocusout="szamit()">
    </form>
    <div id="eredmenydiv"></div>
</body>
</html>

<!DOCTYPE html>

<head>

<title>JS eseménykezelés</title>

</head>

<body>

function szamit() {

// Szövegbeviteli mezőből kinyerjük a számot

var bevitelimezo = document.getElementById("szam_input");

var szam = parseFloat(bevitelimezo.value);

if (!isNaN(szam)) {

// Szám négyzetének kiszámítása

var eredmeny = szam * szam;

// Eredmény kiírása

var eredmeny_mezo = document.getElementById("eredmenydiv");

eredmeny_mezo.innerHTML = "A szám négyzete: " + eredmeny;

}

function hattervalt() {

var bevitelimezo = document.getElementById("szam_input");

bevitelimezo.style.backgroundColor = "green";

}

</script>

<h1>Számnégyzet kalkulátor</h1>

<form>

</form>

</body>

</html>

Készíts egy divet, és animáld! Használd az animationstart, animationiteration, animationend eseményeket! Az animáció indulásánál írasd ki az ‘animáció elindult!’ szöveget! A végén az ‘Animáció befejeződött!’ szöveget!

<!DOCTYPE html>
<html lang="hu">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS eseménykezelés</title>
    <style>
        #animatedDiv {
            width: 50px;
            height: 50px;
            background-color: red;
            position: relative;
            animation: moveRightLeft 2s ease-in-out 2;
        }
        @keyframes moveRightLeft {
            0% {
                left: 0;
            }
            50% {
                left: 100px;
            }
            100% {
                left: 0;
            }            
        }
    </style>
</head>
<body>
    <div id="animatedDiv" 
    onanimationstart="animationStartHandler(event)"
    onanimationiteration="animationIterationHandler(event)"
    onanimationend="animationEndHandler(event)">
</div>
<script>
   function animationStartHandler(event) {
       console.log("Animáció elindult!");
   }
   let db = 1;
   function animationIterationHandler(event) {
       db++;
       console.log("Animáció ismétlődik " + db + ". alkalommal.");
   }   
   function animationEndHandler(event) {
       console.log("Animáció befejeződött!");
   }
</script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>JS eseménykezelés</title>

<style>

#animatedDiv {

width: 50px;

height: 50px;

background-color: red;

position: relative;

animation: moveRightLeft 2s ease-in-out 2;

}

@keyframes moveRightLeft {

0% {

left: 0;

}

50% {

left: 100px;

}

100% {

left: 0;

}

</style>

</head>

<body>

<div id="animatedDiv"

onanimationstart="animationStartHandler(event)"

onanimationiteration="animationIterationHandler(event)"

onanimationend="animationEndHandler(event)">

</div>

function animationStartHandler(event) {

console.log("Animáció elindult!");

}

let db = 1;

function animationIterationHandler(event) {

db++;

console.log("Animáció ismétlődik " + db + ". alkalommal.");

}

function animationEndHandler(event) {

console.log("Animáció befejeződött!");

}

</script>

</body>

</html>

Javascript: gyakorljunk! DOM, eseménykezelés

HTML elemek módosítása

Kategóriák

Friss bejegyzések

JavaScript objektumok

JavaScript: űrlap elemek kezelése