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ó