JavaScript Alapok Kezdőknek: Változók, Függvények és DOM Kezelés

1. Mi a JavaScript?

• Kliensoldali (böngészőben futó) szkriptnyelv.
• Objektumorientált, prototípus-alapú.
• Interaktív weboldalelemek készítésére szolgál (gombok, animációk, felugró ablakok stb.).
• <script> tagen belül vagy külső .js fájlban futtatható.

Elhelyezés:

• <head> → működik, de lassíthatja a betöltést.
• <body> végén → ajánlott megoldás.

2. Alapok – Változók

3. Escape karakterek

4. Alapvető műveletek

let szam = 10;
console.log(szam + 5);
szam += 10;

5. String (karakterlánc) műveletek

• Hossz: text.length
• Nagybetű: text.toUpperCase()
• Kisbetű: text.toLowerCase()
• Kivágás:
  • text.slice(start, end)
  • text.substring(start, end)
• Csere:
  • text.replace("régi", "új")
  • text.replace(/régi/g, "új")
• Összefűzés: text.concat("valami")
• Felesleges szóközök (space) levágása: text.trim()
• Széthasítás tömbbé: text.split(",")

6. Date objektum (Dátumkezelés)

const date = new Date("2023-03-03");
date.getFullYear();
date.getMonth() + 1;
date.getDate();
date.toISOString();

7. Feltételes utasítások

Összehasonlítás:

• == → csak értéket hasonlít össze
• === → típust és értéket is ellenőriz (helyes használat!)

If szerkezet:

if (x > 10) {
  // utasítások
} else if (x === 5) {
  // utasítások
} else {
  // utasítások
}

Switch szerkezet:

switch (x) {
  case 10:
  case 14:
    break;
  default:
    break;
}

8. Rövidítések

• x++, x--
• x += 5
• let eredmeny = feltétel ? igaz : hamis; (Ternary operátor)

9. Tömbök kezelése

let t = ["alma", 5, true];

t.push("új");       // Hozzáadás a végére
t.unshift("eleje"); // Hozzáadás az elejére
t.pop();           // Az utolsó elem eltávolítása
t.indexOf("alma");

Megjegyzés: Üres elemek és a hosszúság kiszámíthatósága miatt mindig a push() metódus használata ajánlott!

10. Objektumok

let ember = {
  name: "Zsolt",
  age: 20,
  hobbies: ["snowboard", "gaming"],
  address: {
    street: "Valami utca"
  }
};

ember.name;
ember.hobbies[0];
ember.address.street;

Metódus objektumban:

fullName() {
  return this.firstName + " " + this.lastName;
}

11. DOM manipuláció (Kiemelten fontos!)

HTML elem tartalmának módosítása:

document.getElementById("id").innerHTML = "új szöveg";

Stílus módosítása:

document.getElementById("id").style.display = "none";
document.getElementById("id").style.fontSize = "30px";

Kép forrásának cseréje:

document.getElementById("myImage").src = "pic2.jpg";

12. Függvények

function myFunction(a, b) {
  return a + b;
}

13. Kiíratási módok

• innerHTML
• document.write() (Figyelem: betöltés után felülírja a teljes oldalt!)
• alert()
• console.log()

14. String és szám összeadása

• 16 + 4 + "Volvo" → "20Volvo"
• "Volvo" + 16 + 4 → "Volvo164"

15. Példa – Prímszám eldöntése és kiírása

(Ellenőrző dolgozatban és vizsgákon szinte biztosan előforduló kérdés!)

function prim(p) {
  var i = 2;
  while (i * i <= p && p % i !== 0) {
    i++;
  }
  return i * i > p;
}

for (let i = 2; i <= 10000; i++) {
  if (prim(i)) {
    console.log(i);
  }
}