GKNB_MSTM071/Alapok/js_alapok.tex

\section{JavaScript Alapok}
\subsection{}

\begin{frame}{Mi a JavaScript?}
  \begin{itemize}
    \item \kiemel{Dinamikus, interpretált programozási nyelv}
    \item Eredetileg böngészőkben futó szkriptnyelv (1995, Brendan Eich)
    \item Ma már szerveroldali fejlesztésre is használható (Node.js)
    \item Gyengén típusos, prototype-alapú objektum-orientált nyelv
    \item Az ECMAScript szabvány implementációja
  \end{itemize}
  \vspace{0.5cm}
  \begin{block}{Miért fontos?}
    A JavaScript az egyetlen nyelv, amely \kiemel{natívan fut a böngészőben}, és a Node.js révén a \kiemel{backend fejlesztés} alapja is lehet.
  \end{block}
\end{frame}

\begin{frame}[fragile,shrink=10]{Változók és adattípusok}
  \begin{columns}
    \begin{column}{0.5\textwidth}
      \begin{block}{Változó deklaráció}
        \begin{lstlisting}[style=JavaScript]
// Konstans (nem valtoztathato)
const PI = 3.14159;

// Blokk scope valtozo
let count = 0;
count = 1; // OK

// Fuggvenyi scope (kerulendo!)
var oldStyle = "legacy";
        \end{lstlisting}
      \end{block}
    \end{column}
    \begin{column}{0.5\textwidth}
      \begin{block}{Primitív típusok}
        \begin{lstlisting}[style=JavaScript]
let num = 42;           // Number
let str = "Hello";      // String
let bool = true;        // Boolean
let empty = null;       // Null
let undef = undefined;  // Undefined
let big = 123n;         // BigInt
let sym = Symbol("id"); // Symbol
        \end{lstlisting}
      \end{block}
    \end{column}
  \end{columns}
\end{frame}

\begin{frame}[fragile,shrink=10]{Tömbök és objektumok}
  \begin{columns}
    \begin{column}{0.5\textwidth}
      \begin{block}{Tömbök (Arrays)}
        \begin{lstlisting}[style=JavaScript]
const fruits = ['apple', 'banana'];

// Elem hozzaadasa
fruits.push('orange');

// Bejaras
fruits.forEach(fruit => {
  console.log(fruit);
});

// Szures
const long = fruits.filter(
  f => f.length > 5
);
        \end{lstlisting}
      \end{block}
    \end{column}
    \begin{column}{0.5\textwidth}
      \begin{block}{Objektumok (Objects)}
        \begin{lstlisting}[style=JavaScript]
const user = {
  name: 'Alice',
  age: 25,
  greet() {
    return `Hi, I'm ${this.name}`;
  }
};

// Eleres
console.log(user.name);
console.log(user['age']);

// Uj tulajdonsag
user.email = 'alice@example.com';
        \end{lstlisting}
      \end{block}
    \end{column}
  \end{columns}
\end{frame}

\begin{frame}[fragile,shrink=10]{Függvények}
  \begin{block}{Hagyományos függvénydeklaráció}
    \begin{lstlisting}[style=JavaScript]
function add(a, b) {
  return a + b;
}
    \end{lstlisting}
  \end{block}
  
  \begin{block}{Arrow function (ES6+)}
    \begin{lstlisting}[style=JavaScript]
const add = (a, b) => a + b;

const square = x => x * x;  // Egy parameter, kapcsos zarojel nelkul

const greet = name => {
  const message = `Hello, ${name}!`;
  return message;
};
    \end{lstlisting}
  \end{block}
\end{frame}

\begin{frame}[fragile,shrink=10]{Destructuring és Spread operátor}
  \begin{columns}
    \begin{column}{0.5\textwidth}
      \begin{block}{Destructuring}
        \begin{lstlisting}[style=JavaScript]
// Tomb destructuring
const [first, second] = [1, 2, 3];

// Objektum destructuring
const {name, age} = user;

// Fuggveny parameterenel
function print({name, age}) {
  console.log(`${name}: ${age}`);
}
        \end{lstlisting}
      \end{block}
    \end{column}
    \begin{column}{0.5\textwidth}
      \begin{block}{Spread operator (...)}
        \begin{lstlisting}[style=JavaScript]
// Tomb osszefuzes
const arr = [...arr1, ...arr2];

// Objektum masolasa
const copy = {...original};

// Rest parameter
function sum(...numbers) {
  return numbers.reduce(
    (a, b) => a + b, 0
  );
}
        \end{lstlisting}
      \end{block}
    \end{column}
  \end{columns}
\end{frame}

\begin{frame}[fragile,shrink=10]{Aszinkron programozás - Callback}
  \begin{block}{Callback függvények}
    \begin{lstlisting}[style=JavaScript]
function fetchData(callback) {
  setTimeout(() => {
    const data = {id: 1, name: 'User'};
    callback(data);
  }, 1000);
}

fetchData((data) => {
  console.log(data);
});
    \end{lstlisting}
  \end{block}
  
  \begin{alertblock}{Callback Hell problémája}
    Többszintű beágyazott callback-ek olvashatatlan kódot eredményeznek.
  \end{alertblock}
\end{frame}

\begin{frame}[fragile,shrink=10]{Aszinkron programozás - Promise}
  \begin{block}{Promise használata}
    \begin{lstlisting}[style=JavaScript]
function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const data = {id: 1, name: 'User'};
      resolve(data);
      // reject(new Error('Failed'));
    }, 1000);
  });
}

fetchData()
  .then(data => console.log(data))
  .catch(error => console.error(error))
  .finally(() => console.log('Done'));
    \end{lstlisting}
  \end{block}
\end{frame}

\begin{frame}[fragile,shrink=10]{Aszinkron programozás - Async/Await}
  \begin{block}{Modern async/await szintaxis}
    \begin{lstlisting}[style=JavaScript]
async function loadUser() {
  try {
    const user = await fetchData();
    console.log(user);
    
    const posts = await fetchUserPosts(user.id);
    console.log(posts);
    
    return {user, posts};
  } catch (error) {
    console.error('Error:', error);
  }
}

// Hasznalat
loadUser();
    \end{lstlisting}
  \end{block}
\end{frame}

\begin{frame}[fragile,shrink=10]{ES6+ Modern jellemzők}
  \begin{itemize}
    \item \kiemel{Template literals:} \texttt{`Hello \$\{name\}`}
    \item \kiemel{Default parameters:} \texttt{function greet(name = 'Guest')}
    \item \kiemel{Class syntax:}
  \end{itemize}
  
  \begin{block}{Class példa}
    \begin{lstlisting}[style=JavaScript]
class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  
  greet() {
    return `Hi, I'm ${this.name}`;
  }
}

const alice = new Person('Alice', 25);
    \end{lstlisting}
  \end{block}
\end{frame}

\begin{frame}{Összefoglalás}
  \begin{block}{JavaScript alapok}
    \begin{itemize}
      \item Változók: \texttt{const}, \texttt{let} (kerüljük a \texttt{var}-t)
      \item Adattípusok: primitívek és objektumok
      \item Tömbök és objektumok manipulációja
      \item Függvények: hagyományos és arrow function
      \item Destructuring és spread operátor
      \item Aszinkron programozás: callback, Promise, async/await
      \item Modern ES6+ jellemzők
    \end{itemize}
  \end{block}
\end{frame}