Ugrás a fő tartalomhoz

JavaScript alapok

1. Mi a JavaScript?​

A JavaScript egy programozási nyelv, amely lehetővé teszi az interaktív weboldalak készítését. A HTML a tartalomért, a CSS a megjelenésért, a JavaScript pedig az interaktivitásért felel.

Mire használjuk?​

  • Weboldal tartalmának dinamikus módosítása
  • Felhasználói események kezelése (kattintás, űrlap kitöltés)
  • Animációk készítése
  • Adatok validálása
  • API-k használata

2. JavaScript elhelyezése a weboldalon​

Belső JavaScript​

<script>
    // A JavaScript kód ide kerül
    console.log("Hello JavaScript!");
</script>

Külső JavaScript fájl (ajánlott)​

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript példa</title>
</head>
<body>
    <!-- Tartalom -->
    
    <!-- JavaScript a body végén -->
    <script src="script.js"></script>
</body>
</html>
Jó gyakorlat

A script tageket mindig a body vége elé helyezzük, hogy a weboldal tartalma előbb betöltődjön.

3. Változók és adattípusok​

Változók létrehozása​

// Modern változó deklaráció
let nev = "János";               // string (szöveg)
let kor = 25;                    // number (szám)
let aktiv = true;               // boolean (igaz/hamis)

// Konstans (nem változtatható érték)
const PI = 3.14;

Alapvető adattípusok​

// String (szöveg)
let szoveg = "Hello JavaScript!";
let masikSzoveg = 'Ez is string';

// Number (szám)
let egesz = 42;
let lebego = 3.14;

// Boolean (logikai)
let igaz = true;
let hamis = false;

// Undefined és null
let ures;                       // undefined
let semmi = null;              // null

4. Alapvető műveletek​

Matematikai műveletek​

let a = 5;
let b = 3;

let osszeg = a + b;            // 8
let kulonbseg = a - b;         // 2
let szorzat = a * b;           // 15
let hanyados = a / b;          // 1.666...
let maradek = a % b;           // 2

Szöveg műveletek​

let vezeteknev = "Kovács";
let keresztnev = "János";

// Szövegek összefűzése
let teljesNev = vezeteknev + " " + keresztnev;  // "Kovács János"

// Modern string interpoláció
let bemutatkozas = `A nevem ${teljesNev}`;

5. Függvények​

Függvény definiálása és használata​

// Függvény deklaráció
function koszont(nev) {
    return `Helló ${nev}!`;
}

// Függvény használata
let udvozles = koszont("János");  // "Helló János!"

// Arrow function (modern szintaxis)
const osszeadas = (a, b) => a + b;

Eseménykezelő függvények​

// Click esemény kezelése
document.getElementById("gomb").onclick = function() {
    alert("A gombra kattintottak!");
}

// Modern eseménykezelés
document.getElementById("gomb")
    .addEventListener("click", () => {
        alert("A gombra kattintottak!");
    });

Próbáld ki!​

Interaktív szerkesztő
function JavaScriptDemo() {
  const [szamlalo, setSzamlalo] = React.useState(0);

  return (
    <div className="border p-4 rounded">
      <p className="text-lg mb-4">Számláló értéke: {szamlalo}</p>
      <button 
        className="bg-blue-500 text-white px-4 py-2 rounded mr-2"
        onClick={() => setSzamlalo(szamlalo + 1)}>
        Növelés
      </button>
      <button 
        className="bg-red-500 text-white px-4 py-2 rounded"
        onClick={() => setSzamlalo(szamlalo - 1)}>
        Csökkentés
      </button>
    </div>
  );
}
Eredmény
Loading...

7. Feladatok​

1. Feladat - Névösszefűző​

Készíts egy függvényt, ami két paramétert kap (vezetéknév és keresztnév) és visszaadja a teljes nevet!

function teljesNev(vezeteknev, keresztnev) {
    return `${vezeteknev} ${keresztnev}`;
}

2. Feladat - Életkor ellenőrző​

Készíts egy függvényt, ami ellenőrzi, hogy valaki elmúlt-e 18 éves!

function felnott(eletkor) {
    return eletkor >= 18;
}

8. Ellenőrző kérdések​

  1. Mi a különbség a let és const között?
  2. Hogyan fűzhetünk össze két szöveget JavaScriptben?
  3. Mire szolgál a return kulcsszó?
  4. Hol érdemes elhelyezni a JavaScript kódot a HTML dokumentumban?
  5. Mi a különbség a normál és az arrow function között?

9. További tanulási források​

A következő leckékben a DOM manipulációval és gyakorlati alkalmazásokkal fogunk foglalkozni.