alapok

Backend_ppt/Alapok/js_alapok.tex

@@ -0,0 +1,260 @@
+\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}