A dinamikus weboldal és a JavaScript

(Készítette: Kiss Beáta, 2025/2026 tanév)

Tartalomjegyzék

Bevezetés

Bár a weboldalak készítését elsősorban deklaratív nyelvek segítségével készítjük (HTML, CSS), mégis léteznek olyan opciók, amivel olyan működéssel is fel tudjuk ruházni oldalainkat, amik túlmutatnak a HTML és CSS lehetőségein. Ilyen például a JavaScript nyelv (ami egy imperatív = utasításalapú ), amit a böngészők képesek futtatni és segítségével dinamikus és interaktív weboldalakat készíthetünk.

Az imperatív nyelvet elsősorban az különbözteti meg a deklaratív nyelvtől, hogy vannak benne közvetlen vezérlőszerkezetek, mint például a ciklus és az elágazás és ezekkel definiálják az értelmezőnek, hogy hogyan fusson le egy algoritmus. Ezzel ellentétben a deklaratív nyelvek a végeredményt deklarálják és a nyelvi értelmmezőre (végrehajtóra, ami a HTML és CSS esetén a böngésző) bízzák, hogy a kívánt eredményt miként éri el.

A JavaScript nyelv jellemzői

Elemi és összetett adattípusok

Elemi egyszerű típusok

Típus Leírás
Number Számok tárolására szolgál, beleértve az egész számokat és a lebegőpontos számokat is
BigInt Nagy számok tárolására szolgál, amelyek túllépik a Number típus maximális értékét
String Karakterláncok tárolására szolgál
Boolean Logikai típus: True vagy False
undefined Olyan változók értéke, amelyek még nincsenek inicializálva
null Speciális jelentéssel bíró "üres" érték, amely azt jelzi, hogy egy változó szándékosan üres vagy nem létezik

Összetett típusok

Típus Leírás
Array Tömb, rendezett listát tárol. A tömbök indexelt elemeket tartalmaznak, és az elemek bármilyen típusúak lehetnek
Object Az objektumok kulcs-érték párokat tárolnak, ahol a kulcsok (vagy tulajdonságok) stringek, és az értékek bármilyen típusúak lehetnek (primitív vagy más objektumok)
Function A függvényeket külön típusként kezeli a JavaScript.
Map Kulcs-érték párok tárolása
Set Halmaz, nem engedi a duplikált értékek tárolását

Értékadás

Az értékadás a változók értékének beállítását jelenti. A JavaScript-ben az értékadás az = operátorral történik. A változók deklarálásához a var, let vagy const kulcsszavakat használjuk. A const kulcsszóval konstans értékeket adhatunk meg!

Példa:

let x = 9; // x értéke legyen 9
const y = 7; // y értéke legyen 7, nem módosítható

Az értékadás során a jobb oldalon lévő kifejezés kiértékelődik, és az eredmény a bal oldalon lévő változóhoz kerül.

Aritmetikai műveletek

A JavaScript támogatja az alapvető aritmetikai műveleteket, mint például az összeadás, kivonás, szorzás, osztás és maradékos osztás. Az aritmetikai operátorok a következők:

Művelet Leírás
Összeadás (+) Két szám összeadása
Kivonás (-) Az első szám kivonása a másodikból
Szorzás (*) Két szám szorzása
Osztás (/): Az első szám osztása a másodikkal
Maradékos osztás (%): Az osztás maradékának meghatározása

Példa:

let a = 6;
let b = 2;

let sum = a + b; // 8
let difference = a - b; // 4
let product = a * b; // 12
let quotient = a / b; // 3
let remainder = a % b; // 1

Logikai műveletek

A logikai műveletek a logikai értékek (boolean) manipulálására szolgálnak. A JavaScript-ben a következő logikai operátorok állnak rendelkezésre:

Logikai operátor Leírás
ÉS (&&) Két kifejezés igaz, ha mindkettő igaz
VAGY (||) Két kifejezés igaz, ha legalább az egyik igaz
NEM (!) Megfordítja a logikai értéket (igazból hamis, hamisból igaz)

Példa:

let x = true;
let y = false;

let andResult = x && y; // false
let orResult = x || y; // true
let notResult = !x; // false

Tömb típus

A tömböket elemi típusú adatokból állítjuk össze, ahol a tömb bármely eleme tetszőleges típusú lehet. Vagyis egy tömbben többféle típusú adat is előfordulhat. Tömböket a következőképpen hozhatunk létre:

var vektor1 = new Array();      // 0 elemű tömb
var vektor2 = new Array(10);    // 10 elemű tömb

var vektor1 = new Array(0,5,10,15);  // konstruktor hívással
var vektor2 = [1,3,5,7,9];     // tömbliterál létrehozásával, az elemeket "[" és "]" között megadva

function range(start, finish) {
    for (let i = start; i < finish; ++i) {
    	yield i;		
    }
}
var vektor1 =  [j * j for each (j in range(0, 5))];     // vektor1 = [0,1,2,3,4]
var vektor2 = [j * j for each (j in range(0, 10)) if (i % 2 == 0)];     // vektor2 = [0,2,4,6,8]

//  A szintaxis a tömbliterál létrehozásához hasonlít, de az elemeket nem mi soroljuk fel (explicit módon) , hanem egy speciális függvényt (a generátort) többször megismételve (iterálva: for each). A generátor által visszaadott értékeket egyenként átadhatjuk (a példában j*j), és szelektálhatjuk is (lásd a második példában használt if-et).

Tömb sajátosságai:

Példa:

var myArray = [1, 2];  // myArray[4] = undefined, newArray.length = 2

NextArray[3] = 4;   // NextArray[2] = undefined, NextArray.length értéke 4

myArray = [, "2. elem", , "4. elem"];

var twoDimArray = [ [1,2], [21,22] ];

Asszociatív tömb A tömbök indexelésére pozitív egészek helyett Stringeket is használhatunk. Ilyenkor használható a . operátor az egyes tömbelemek eléréséhez Például:

var myArray = new Array();
myArray["a"] = 10;
myArray["b"] = 20;
myArray["a"] == myArray.a == 10     // . operator használata

A háttérben egy "a" nevű property jött létre 10-es értékkel a myArray objektumban. Ezt bármilyen objektummal megtehetjük, tehát bármilyen objektum használható asszociatív tömbként. A tömböket érdemes erre a célra használni az átláthatóság miatt valamint a tömb plusz szolgáltatásai (pl. rendezésre sort() függvény használható) miatt.

var myArray = { "first":10, "last": 100};   // tetszőleges új objektum tömbbé alakítása
alert(myArray["first"]);    // output: 10

Verem A verem (stack) egy LIFO (Last In First Out: utoljára be, először ki) adatszerkezet. A tömbök rendelkeznek push(), és pop() műveletekkel.

A verem többi művelete a tömb hosszának és az indexelésnek a használatával oldható meg.

Sor A sor (queue) egy FIFO (First In First Out: a besorolt elemek mindig a sor végére kerülnek, elemet kivenni a sor elejéről lehet.) A tömbök rendelkeznek shift() és unshift() műveletekkel.

Tömb metódusok A fentebb említett metódusokon túl számos metódussal rendelkeznek a tömbök.
További metódusok:

Metódus Leírás
concat(value1[value2[value...]]) Egy tömbbé konkatenálja (összefűzi) a paramétereket, melyek lehetnek egyszerű értékek, de tömbök is.
every(function) Ellenőrzi, hogy a paraméterként kapott, logikai értékű függvény a tömb összes elemére igaz-e.
filter(function) A paraméterbe megadott függvényre igazat adó tömbelemeket tartalmazó új tömböt ad vissza.
forEach(function) A paraméterbe megadott függvényt a tömb minden elemére végrehajtja.
join(delimeter) Egy stringet ad vissza a tömb elemeinek felsorolásából, amiben az elemeket a delimiter választja el.
indexOf(searchStr[, startIndex]), lastIndexOf(searchStr[, startIndex]) A tömbben megkeresi a searchStr első / utolsó előfordulását (opcionálisan a startIndextől kezdve). Ha nincs, az eredmény -1.
map(function) A tömb minden elemére a transzformáló függvényt alkalmazza, és a transzformált elemek tömbjével tér vissza.
reverse() Megfordítja a tömb elemeinek sorrendjét.
slice([begin[, end]]) Az egész tömbről, vagy a megadott indexhatárok közötti részről másolatot készít.
some(function) A megadott függvényt addig alkalmazza a tömb elemeire, amíg a függvény igazat nem ad. Ekkor a visszatérési érték igaz, egyébként hamis.
sort([function]) Rendezi a tömb elemeit. Paraméter nélkül: alfabetikusan, paraméterrel: az átadott rendező logika szerint.
splice(start[, howmany[, element1[,element...]]]) A start indextől kezdve howmany darab elemet töröl a tömbből. A törölt elemekből álló tömböt ad vissza.
toSource() A tömböt leíró forráskódot adja vissza.
toString() A tömböt String-ként jeleníti meg. (Az objektumokra csak "[object]"-et ír.)

Függvények és kód blokkok

A JavaScript-ben a kód blokkok kialakítására (a Java-hoz, c++-hoz, c#-hoz hasonlóan) a { ... } (kapcsos zárójelek) jelölést alkalmazzuk. A függvényeket is ezek seítségével és a function kulcsszóval hozzuk létre, de ennek több formája is megengedett:

1. Függgvény deklarálás

Ez a megadási mód a legelterjedtebb. A kód futása előtt "beemelésre" kerül. A deklaráció előtt is meghívható.

function mulWithTen(int num) {
    let a = num;
    let b = 10;
    return a * b;
}

2. Függvény kifejezés csak definíció után

let addTwoNumber = function(int num1, int num2) { return num1 + num2; }

3. Nyilfüggvény:

Célszerű használni például kisebb függvényeknél vagy tömbök és objektumok feldolgozásánál. Ha nincs return => undefine értékkel tér vissza.

let addArrow = (x, y) => x + y; // arrow function
console.log(addArrow(2, 3)); // 5

Létezik egy speciális függvény forma, ami azonnal le is fut, amikor kiértékelődik, ez az un. IIFE (Immediately Invoked Function Expression).

Ez gyakorlatilag egy anonym függvény, amit a deklarálás után azonnal le is futtatunk:

(function() {
    // kód
})();

Változók és konstansok deklarálása, scope, láthatóság

A JavaScript-ben a változó hatásköre (scope) arra utal, hogy melyik kódrészben van definiálva és hol érhető el a változó. A var, let és const kulcsszavak segítségével tudunk változókat deklarálni és mindegyiknek megvan a maga hatásköre.

Példa:

// Globális változó
var globalVar = 5;
let globalLet = 7;
const globalConst = 14;

function myFunction() {
  // Függvényhatáskör - function scoped
  var functionVar = 40;
  let functionLet = 50;
  const functionConst = 60;

  if (true) {
    // Blokkhatáskör
    var blockVar = 70;
    let blockLet = 80;
    const blockConst = 90;
  }

  console.log(globalVar); // 5
  console.log(globalLet); // 7
  console.log(globalConst); // 14
  console.log(functionVar); // 40
  console.log(functionLet); // 50
  console.log(functionConst); // 60
  console.log(blockVar); // 70
  console.log(blockLet); // ReferenceError: blockLet is not defined
  console.log(blockConst); // ReferenceError: blockConst is not defined
}

myFunction();

Ebben a példában a blockLet nem elérhető a feltételes utasításon kívül, mert let-tel van deklarálva és így blokkhatásköre van. Másrészt a blockVar elérhető a feltételes utasításon kívül, mert var-ral van deklarálva és így függvényhatásköre van.

A láthatóság (visibility) szempontjából a változó hatásköre meghatározza, hogy hol érhető el. Egy változó a saját hatáskörében elérhető, és bármely kód, amely a hatáskörön belül van, elérheti. Ha egy változó nem látható, akkor nem érhető el és a hozzáférési kísérlet ReferenceError-t eredményez.

A JavaScript változók láthatóságának speciális esete az úgy nevezett hoisting. Ez egy olyan jelenség, amikor a változók és függvények deklarálása az adott scope (hatáskör) tetejére kerül, függetlenül attól, hogy hol van a kódunkban.

A var kulcsszóval deklarált változók esetében a hoisting azt jelenti, hogy a változó deklarálása az adott scope tetejére kerül, de az értékadás (azaz a változó értékének beállítása) nem. Ez azt jelenti, hogy a változó elérhető az egész scope-ban, de az értéke undefined lesz, amíg el nem érjük a tényleges értékadást.

Példa:

console.log(x); // undefined
var x = 10;
console.log(x); // 10

Ebben a példában a x változó deklarálása a scope tetejére kerül, ezért elérhető az első console.log sorban is, de az értéke undefined lesz, mert az értékadás csak a második sorban történik.

A let és const kulcsszavakkal deklarált változók esetében a hoisting nem történik meg, azaz a változók csak a deklarálásuk után lesznek elérhetők.

Példa:

console.log(x); // ReferenceError: x is not defined
let x = 10;
console.log(x); // 10

Ebben a példában a x változó nem elérhető az első console.log sorban, mert a deklarálása csak a második sorban történik.

A függvények esetében a hoisting mindig megtörténik, függetlenül attól, hogy milyen kulcsszóval vannak deklarálva.

Példa:

console.log(f()); // 10
function f() {
  return 10;
}

Ebben a példában az f() függvény deklarálása a scope tetejére kerül, ezért elérhető az első console.log sorban is.

Összefoglalás:

Alapvető nyelvi elemek

Operátorok

Példák:

let x = 5;
let y = 3;

console.log(x + y); // 8
console.log(x - y); // 2
console.log(x * y); // 15
console.log(x / y); // 1.67

x++;
console.log(x); // 6

x--;
console.log(x); // 5

let z = x;
console.log(z); // 5

console.log(x == y); // false
console.log(x === y); // false

Ciklusok

Példák:

// for
for (let i = 0; i < 5; i++) { console.log(i); }

// for..in
let obj = {a: 1, b: 2, c: 3};
for (let key in obj) { console.log(key + ": " + obj[key]); }

// for..of
let arr = [1, 2, 3];
for (let elem of arr) { console.log(elem); }

// while
let j = 0;
while (j < 5) {
  console.log(j);
  j++;
}

// do-while
let k = 0;
do {
  console.log(k);
  k++;
} while (k < 5);

// break
let i = 0;
while (i < 5) {
  if (i === 3) {
    break;
  }
  console.log(i);
  i++;
}

Elágazás

Példák:

let x = 5;

if (x > 10) {
  console.log("x nagyobb, mint 10");
} else {
  console.log("x kisebb, mint 10");
}

let y = 2;

switch (y) {
  case 1:
    console.log("y egyenlő 1-gyel");
    break;
  case 2:
    console.log("y egyenlő 2-vel");
    break;
  default:
    console.log("y nem egyenlő 1-gyel vagy 2-vel");
}

Ternális operátor : A ternális operátor (?:) egy olyan operátor, amely három operandust vesz igénybe, és egy értéket ad vissza.
A következő szintaxissal használják: 

feltétel ? igaz_érték : hamis_érték

A ternális operátor működése:

const szam = 5;
const eredmeny = szam > 10 ? "nagyobb mint 10" : "kisebb vagy egyenlő 10";
console.log(eredmeny); // "kisebb vagy egyenlő 10"

Objektumok

Egy objektum egy olyan entitás, amely tulajdonságokat és metódusokat tartalmaz. A tulajdonságok olyan értékek, amelyek az objektumhoz tartoznak, míg a metódusok olyan függvények, amelyek az objektumon hajtanak végre műveleteket.

const auto = {
  marka: "Toyota",
  tipus: "Corolla",
  ev: 2015,
  szin: "piros",
  gyorsitas: function() { console.log("Gyorsítok!"); }
};

A fenti példában az auto objektum rendelkezik:

Elérésük a következő módon történik:

console.log(auto.marka); // "Toyota"
auto.gyorsitas(); // "Gyorsítok!"

Új tulajdonság vagy metódus megadása:

auto.uj_tulajdonsag = "klíma";
auto.klima = function() { console.log("Klíma bekapcsolva!"); };

Tulajdonságok vagy metódus törlése:

delete auto.marka;
delete auto.gyorsitas;

Kivételkezelés

A kivételkezelés (exception handling) segít kezelni azokat a hibákat, amelyek a program futása közben történhetnek. Használatával mi magunk döntjük el, mit tegyünk a hiba esetén.

Try-Catch Blokk

A try-catch a kivételkezelés alapja. A try blokkban írjuk azt a kódot, amely hibát okozhat, a catch blokkban pedig kezeljük a hibát:

try {
  const szám = 10 / 0; // Matematikai hiba
  console.log(szám);
} catch (hiba) {
  // Ha hiba történik, ezt futtatjuk
  console.log("Hiba történt: " + hiba.message);
}

Finally Blokk

A finally blokk mindig lefut, akár történt hiba, akár nem:

try {
  console.log("Próbálunk valamit...");
} catch (hiba) {
  console.log("Hiba: " + hiba.message);
} finally {
  console.log("Ez mindig futtatódik!");
}

Saját hiba dobása

A throw segítségével saját hibát dobhatunk:

function oszt(a, b) {
  if (b === 0) {
    throw new Error("Nullával nem lehet osztani!");
  }
  return a / b;
}
try {
  console.log(oszt(10, 0)); // HIBA!
} catch (hiba) {
  console.log("Hiba: " + hiba.message);
}

Használatának előnyei:

Objektum-Orientáltság

Az objektum-orientált programozás (OOP) az adatokat és funkcionalitást objektumok köré szervezi. Az objektumok olyan entitások, amelyeknek vannak tulajdonságai (properties) és metódusai (methods). Ez a megközelítés nagyon hasonlít a valós világra – például egy autó objektumnak vannak tulajdonságai (szín, márka, sebesség) és metódusai (indítás, fékezés, gyorsítás).

Az OOP Alapelvei

  1. Encapsulation (Beágyazottság) Az adatok és metódusok egy objektumban vannak csoportosítva. Az objektum felelős a saját adatainak kezeléséért.
  2. Inheritance (Öröklés) Egy osztály örökölhet egy másik osztálytól, így újrafelhasználhatja a kódot.
  3. Polymorphism (Polimorfizmus) Különböző objektumok ugyanazt a metódust különbözőképpen valósíthatják meg.
  4. Abstraction (Absztrakció) Az összetett részleteket elrejtjük, és csak a lényeges információkat mutatjuk meg.

Osztályok és objektumok

Alapvető Osztály Definiálása

class Auto {
  constructor(marka, szin, sebesseg) {
    this.marka = marka;
    this.szin = szin;
    this.sebesseg = 0; // kezdeti sebesség
  }

  // Metódusok
  indítas() {
    console.log(`${this.marka} autó elindult!`);
  }

  gyorsitas(ertek) {
    this.sebesseg += ertek;
    console.log(`Jelenlegi sebesség: ${this.sebesseg} km/h`);
  }

  fekezes() {
    this.sebesseg = 0;
    console.log("Autó megállt!");
  }
}

// Objektum létrehozása
const autom = new Auto("Toyota", "piros");
autóm.inditas();
autóm.gyorsitas(50);
autóm.fekezes();

Öröklés (Inheritance)

Az öröklés lehetővé teszi, hogy egy új osztály örökölhessen egy meglévő osztálytól.

class Jarmu {
  constructor(marka) {
    this.marka = marka;
  }

  informacio() {
    console.log(`Márka: ${this.marka}`);
  }
}

class Auto extends Jarmu {
  constructor(marka, ajtok) {
    super(marka); // szülő osztály konstruktora
    this.ajtok = ajtok;
  }

  informacio() {
    super.informacio(); // szülő metódus meghívása
    console.log(`Ajtók száma: ${this.ajtok}`);
  }
}

const auto = new Auto("BMW", 4);
auto.informacio();
// Kimenet:
// Márka: BMW
// Ajtók száma: 4

Getter és Setter

A getter és setter metódusok lehetővé teszik az adatok kontrollált elérését és módosítását.

class Ember {
  constructor(nev, kor) {
    this._nev = nev;
    this._kor = kor;
  }


  // Getter
  get nev() {
    return this._nev;
  }

  get kor() {
    return this._kor;
  }

  // Setter
  set kor(ertek) {
    if (ertek > 0 && ertek < 150) {
      this._kor = ertek;
    } else {
      console.log("Érvénytelen kor!");
    }
  }
}

const ember = new Ember("János", 25);
console.log(ember.kor); // 25
ember.kor = 30; // setter meghívása
console.log(ember.kor); // 30
ember.kor = -5; // "Érvénytelen kor!"

Legfontosabb Tanulságok