JavaScript alapok és AJAX

A JavaScript egy programozási nyelv, amelyet gyakran használnak webfejlesztésben. A Böngésző futtatja a kódunkat, amit a HTML-be ágyazunk vagy hivatkozunk be.

Változók és adattípusok

• Változók: A változókat a let, const vagy var kulcsszóval deklarálhatjuk.
• Adattípusok: A JavaScriptben használhatunk számokat, logikai értékeket és szöveges adatokat.

a következő adattípusok léteznek:

• Number: Számok (pl. 42)
• String: Karakterláncok (pl. "hello")
• Boolean: Logikai értékek (pl. true vagy false)
• Array: Tömbök (pl. [1, 2, 3])
• Object: Objektumok (pl. {name: "John", age: 30})

Példa:

let name = "Jani";
const age = 30;
var profession = "fejleszto";

console.log(name); // "jani"
console.log(age); // 30
console.log(profession); // "fejleszto"

Operátorok

• Aritmetikai operátorok: +, -, *, /, %, stb.
• Logikai operátorok: &&, ||, !, stb.
• Összehasonlító operátorok: ===, !==, >, <, stb.

Példa:

let a = 5;
let b = 3;

console.log(a + b); // 8
console.log(a > b); // true

Függvények

• Függvény deklarálása: A függvényeket a function kulcsszóval deklarálhatjuk ->
  function myFunction(a, b, message) { }.
• Függvény hívása: A függvényeket a nevükkel és a paramétereik megadásával tudjuk meghívni ->
  myFunction(1,2,"asd").

Példa:

function hello(name) {
  console.log(`Szia, ${name}!`);
}

hello("Jani"); // "Szia, Jani!"

Objektumok

• Objektum létrehozása: Az objektumokat a { } szimbólummal hozhatjuk létre.
• Objektum tulajdonságai: Az objektumok tulajdonságait a ponttal (.) vagy a szögletes zárójelekkel ([ ]) érhetjük el.

Példa:

let people = {
  name: "Jancsika",
  age: 20,
  profession: "fejleszto-tanonc"
};

console.log(people.name); // "Jancsika"
console.log(people["age"]); // 20

Tömbök

• Tömb létrehozása: A tömböket a [ ] szimbólummal hozhatjuk létre.
• Tömb elemei: A tömb elemeit a szögletes zárójelekkel ([ ]) érhetjük el.

Példa:

let myColors = ["piros", "zöld", "kék"];

console.log(myColors[0]); // "piros"
console.log(myColors.length); // 3

AJAX alapok

Az AJAX (Asynchronous JavaScript and XML) egy technika, amely lehetővé teszi a weboldalak számára, hogy aszinkron módon kommunikáljanak a szerverrel.

XMLHttpRequest

Az XMLHttpRequest egy objektum, amely lehetővé teszi az AJAX kéréseket.

Példa:

let xhr = new XMLHttpRequest();
xhr.open("GET", "https://example.com/api/data", true);
xhr.onload = function() {
  if (xhr.status === 200) {
    console.log(xhr.responseText);
  }
};
xhr.send();

Fetch API

A Fetch API egy modernebb és egyszerűbb módja az AJAX kéréseknek.

Példa:

fetch("https://example.com/api/data")
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

Regisztrációs form küldése AJAX-szal

Tegyük fel, hogy van egy regisztrációs formunk, amely a következő adatokat tartalmazza:

• Név
• E-mail cím
• Jelszó

A form elküldésekor szeretnénk AJAX kérést küldeni a szervernek, hogy regisztrálja a felhasználót.

Példa:

<form id="reg-form">
  <label for="nev">Név:</label>
  <input type="text" id="nev" name="nev"><br><br>
  <label for="email">E-mail cím:</label>
  <input type="email" id="email" name="email"><br><br>
  <label for="jelszo">Jelszó:</label>
  <input type="password" id="jelszo" name="jelszo"><br><br>
  <button type="submit">Regisztráció</button>
</form>

A JavaScript kód, amely elküldi a form adatait AJAX-szal:

const form = document.getElementById('reg-form');

form.addEventListener('submit', (event) => {
  event.preventDefault();

  const nev = document.getElementById('nev').value;
  const email = document.getElementById('email').value;
  const jelszo = document.getElementById('jelszo').value;

  const adatok = {
    nev,
    email,
    jelszo
  };

  fetch('/reg', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(adatok)
  })
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));
});

A Node.js szerveroldali kód, amely fogadja a regisztrációs kérést:

const express = require('express');
const app = express();

app.use(express.json());

app.post('/reg', (req, res) => {
  const { nev, email, jelszo } = req.body;

  // Regisztráljuk a felhasználót
  console.log(`Regisztrált felhasználó: ${nev} (${email})`);

  res.json({ message: 'Sikeres regisztráció!' });
});

app.listen(3000, () => {
  console.log('Szerver elindult a 3000-es porton');
});