# 21. JavaScript alapok

2025. november 27. • 15 perc olvasás • JavaScript

A JavaScript a web programozási nyelve. Míg a HTML a tartalmat, a CSS a megjelenést adja, a JavaScript az interaktivitást biztosítja: gombkattintások, animációk, űrlapellenőrzés, dinamikus tartalom.

#### Bónusz lecke

Ez a lecke NEM érettségi anyag!

A JavaScript nem szerepel az emelt szintű digitális kultúra érettségi követelményeiben. Ez a lecke azoknak szól, akik szeretnének egy alapszintű betekintést kapni a webfejlesztés programozási oldalába.

## Mi a JavaScript?

A JavaScript (röviden JS) egy programozási nyelv, ami a böngészőben fut. Segítségével:

- Reagálhatsz felhasználói eseményekre (kattintás, görgetés, billentyűleütés)
- Módosíthatod a HTML tartalmat és CSS stílusokat
- Ellenőrizheted az űrlapmezőket küldés előtt
- Animációkat és vizuális effekteket hozhatsz létre
- Adatokat kérhetsz le szerverről az oldal újratöltése nélkül

### JavaScript beillesztése

HTML - JavaScript beillesztési módok
`<!-- 1. Külső fájl (AJÁNLOTT) - a body végén --> <body> <!-- ... oldal tartalma ... --> <script src="script.js"></script> </body> <!-- 2. Inline script --> <script> console.log('Hello!'); </script> <!-- 3. Eseménykezelő attribútum (kerülendő) --> <button onclick="alert('Kattintottál!')">Kattints</button>`

#### Miért a body végén?

A JavaScript fájlt a `</body>` tag elé helyezzük, mert így a HTML elemek már betöltődtek, mire a script lefut. Így biztosan megtalálja a DOM elemeket.

## Változók

A változók adatokat tárolnak. Három kulcsszóval hozhatunk létre változót:

JavaScript - Változók
`// let - módosítható változó (AJÁNLOTT) let nev = 'Pisti'; let eletkor = 25; eletkor = 26; // Módosítható // const - konstans, nem módosítható (AJÁNLOTT) const PI = 3.14159; const OLDALCIM = 'Elit Hardver'; // PI = 3; // HIBA! const nem módosítható // var - régi módszer (KERÜLENDŐ) var regiValtozo = 'ne használd'; // Adattípusok let szoveg = 'Hello'; // String (szöveg) let szam = 42; // Number (szám) let tizedes = 3.14; // Number (tizedes is) let logikai = true; // Boolean (true/false) let ures = null; // Null (üres érték) let nemDefinialt; // Undefined (nincs érték) let tomb = [1, 2, 3]; // Array (tömb) let objektum = {nev: 'Pisti'}; // Object (objektum)`

## Függvények

A függvények újrafelhasználható kódrészletek. Megadunk nekik egy nevet, és később meghívhatjuk őket.

JavaScript - Függvények
`// Függvény létrehozása function koszon(nev) { return 'Szia, ' + nev + '!'; } // Függvény meghívása let uzenet = koszon('Pisti'); console.log(uzenet); // "Szia, Pisti!" // Arrow function (nyíl függvény) - modern szintaxis const osszead = (a, b) => { return a + b; }; // Rövid arrow function (egy soros) const duplaz = x => x * 2; console.log(osszead(5, 3)); // 8 console.log(duplaz(7)); // 14`

## DOM manipuláció

A DOM (Document Object Model) a HTML oldal JavaScript-ből elérhető változata. Segítségével módosíthatjuk az oldal tartalmát és stílusát.

JavaScript - DOM manipuláció
`// Elem kiválasztása const cim = document.getElementById('focim'); const gombok = document.querySelectorAll('.btn'); const elsoGomb = document.querySelector('.btn'); // Tartalom módosítása cim.textContent = 'Új címsor'; cim.innerHTML = '<em>Dőlt címsor</em>'; // Stílus módosítása cim.style.color = 'red'; cim.style.fontSize = '24px'; // CSS osztály hozzáadása/eltávolítása cim.classList.add('aktiv'); cim.classList.remove('rejtett'); cim.classList.toggle('kiemelt'); // Ha van, elveszi; ha nincs, hozzáadja // Attribútum módosítása const kep = document.querySelector('img'); kep.setAttribute('src', 'uj-kep.jpg'); kep.setAttribute('alt', 'Új kép leírása'); // Elem létrehozása és hozzáadása const ujBekezdes = document.createElement('p'); ujBekezdes.textContent = 'Ez egy új bekezdés.'; document.body.appendChild(ujBekezdes);`

## Eseménykezelés

Az események olyan dolgok, amik az oldalon történnek: kattintás, billentyűleütés, görgetés, űrlapküldés. JavaScript-tel reagálhatunk ezekre.

JavaScript - Eseménykezelés
`// Gomb kattintás const gomb = document.querySelector('#myButton'); gomb.addEventListener('click', function() { alert('Kattintottál a gombra!'); }); // Arrow function-nel gomb.addEventListener('click', () => { console.log('Kattintás történt'); }); // Gyakori események elem.addEventListener('click', handler); // Kattintás elem.addEventListener('mouseover', handler); // Egér fölé visz elem.addEventListener('mouseout', handler); // Egér elhagyja elem.addEventListener('keydown', handler); // Billentyű lenyomás elem.addEventListener('submit', handler); // Űrlap küldés elem.addEventListener('change', handler); // Input érték változik elem.addEventListener('scroll', handler); // Görgetés // Űrlap küldés megakadályozása const form = document.querySelector('form'); form.addEventListener('submit', function(event) { event.preventDefault(); // Megakadályozza az alapértelmezett műveletet console.log('Űrlap elküldve!'); });`

## Gyakorlati példa: Sötét mód kapcsoló

Lássunk egy egyszerű példát, ami összekapcsolja az eddig tanultakat:

HTML + JavaScript - Sötét mód kapcsoló
`<!-- HTML --> <button id="tema-gomb">Sötét mód</button> <!-- JavaScript --> <script> const temaGomb = document.getElementById('tema-gomb'); const body = document.body; temaGomb.addEventListener('click', function() { // Osztály hozzáadása/eltávolítása body.classList.toggle('sotet-mod'); // Gomb szövegének változtatása if (body.classList.contains('sotet-mod')) { temaGomb.textContent = 'Világos mód'; } else { temaGomb.textContent = 'Sötét mód'; } }); </script> <!-- CSS --> <style> body { background: white; color: black; transition: all 0.3s ease; } body.sotet-mod { background: #1a1a1a; color: white; } </style>`

#### Élő példa - Sötét mód kapcsoló:

Ez egy demó terület. Kattints a gombra!

## Fejlesztői konzol

A `console.log()` a leghasznosabb hibakereső eszköz. A böngésző fejlesztői eszközeiben (F12) láthatod az üzeneteket.

JavaScript - Konzol használata
`// Üzenet kiírása a konzolra console.log('Hello konzol!'); // Változó értékének kiírása let x = 42; console.log('x értéke:', x); // Objektum kiírása console.log({nev: 'Pisti', kor: 25}); // Figyelmeztetés és hiba console.warn('Ez egy figyelmeztetés!'); console.error('Ez egy hibaüzenet!');`

#### Hogyan nyisd meg a konzolt?

- Windows/Linux: F12 vagy Ctrl + Shift + J
- Mac: Cmd + Option + J
- Jobb klikk → "Vizsgálat" → Console fül

## Élő példák ezen a weboldalon

Ezen a weboldalon több helyen is használunk JavaScriptet. Nézd meg a forráskódot (F12 → Sources), és tanulmányozd, hogyan működnek!

#### JavaScript fájlok a projektben

Funkció | Fájl | Hol látható?
--- | --- | ---
Mobil menü | `mobile-menu.js` | Minden oldal – kicsinyítsd le az ablakot és kattints a ☰ ikonra!
Kód másolás | `blog-copy.js` | Blog oldalak – kattints a "Másolás" gombra bármelyik kódblokknál!
Keresés | `search.js` | Alkatrészek oldal – írd be pl. "CPU" és figyeld a szűrést!
Képváltó (carousel) | `carousel.js` | Gyártók oldal – automatikus és kézi képváltás
Képnagyítás (lightbox) | `lightbox.js` | Háttértár oldal – kattints a képekre!
Dinamikus űrlap | `form.js` | Kapcsolat oldal – válassz OS-t, mozgasd a csúszkát, figyeld a progress bart!
Canvas rajzolás | `peripherals-canvas.js` | Perifériák oldal – ikonok rajzolása canvas-szal

#### Tipp a tanuláshoz

Nyisd meg a böngésző fejlesztői eszközeit (F12), válaszd a Sources fület, és böngészd a JS fájlokat! A `mobile-menu.js` különösen jól dokumentált, tele van magyarázó kommentekkel.

## Összefoglalás

Ebben a leckében megismerkedtél a JavaScript alapjaival:

- Változók: `let` és `const` - adatok tárolására
- Függvények: Újrafelhasználható kódrészletek
- DOM manipuláció: HTML elemek módosítása JavaScript-ből
- Eseménykezelés: Reagálás felhasználói műveletekre
- Konzol: Hibakeresés `console.log()`-gal

#### Továbblépés

Ha szeretnél tovább tanulni, ajánlott források:

- javascript.info - Modern JavaScript tutorial
- MDN Web Docs - Hivatalos dokumentáció