[!NOTE]
Nagyon fontos, hogy meglegyenek a stabil alapok.
Elsőnek érdemes megtanulni a webprogramozást.
És nem, nem kell rögtön framework és különféle library.
Egy népszerű, ingyenes kódszerkesztő, amelyhez rengeteg bővítmény érhető el.
Innen tudod letölteni. https://code.visualstudio.com/
Miután letöltötted, telepítetted és megnyitottad. File -> New Text File ezután katt a “select a language”-re és válaszd ki ami kell épp.
Angular Language Service (Segít Angular projektekben: hibák, kódkiegészítés, IntelliSense.)
Angular Snippets (Version 18) (Kész Angular kódrészletek (ngFor, ngIf, component stb.).)
Auto Close Tag!
Auto Rename Tag!
Bookmarks (Kódrészek megjelölése könyvjelzőként → gyorsabb navigálás.)
Bootstrap 4, Font awesome 4, Font Awesome 5 Free (Gyors Bootstrap és ikon beillesztés.)
Bootstrap 5 Quick Snippets (Gyors Bootstrap és ikon beillesztés.)
Black Formatter (Python kódformázó.)
Bracket Pair Color DLW (Beszínezi az egyező {} [] () párokat.)
Code Spell Checker (Ellenőrzi a helyesírást kódban (pl. elgépelések változónévben).) !
CodeSnap (Kódrészletből szép képet készít.)
Colorful Comments (A kommenteket színesebbé teszi (// TODO, // WARNING).)!
Todo Tree (A TODO-kat gyűjti össze az adott projektben.)
Color Highlight (A CSS színeket kiemeli.)
Copy Relative Path (Gyors másolása a fájl relatív elérési útvonalának.)
CSS Peek (Ctrl+katt megmutatja, melyik CSS szabály vonatkozik az elemre.)!
css-auto-prefix (Sok régi böngésző nem támogatja a modern css-t. Emiatt érdemes ezt letölteni.)
ESLint (JavaScript hibakereső és szabály-ellenőrző.)
Formatting Toggle (Ki/be kapcsolja a kódformázót (pl. Prettier).)
Git History(Megmutatja a régi commitokat.)
Git Project Manager (Projektkezelés Git-tel.)
GitHub Copilot (A kódon belül segít neked, ne használd.)
GitHub Copilot Chat (Ne használd.)
GitHub Pull Requests (GitHub PR-ek kezelése.)
GitLens - Git supercharged (Mindenre jó a Gitben: ki írta a sort, mikor, változások, diff-ek.)
Image preview (Képek előnézete a kódban.)
IntelliCode (Okosabb kódkiegészítés Microsofttól.)
IntelliCode API Usage Examples(Okosabb kódkiegészítés Microsofttól.)
JavaScript (ES6) code snippets (Hotkey, pl.: clg)
Live Sass Compiler (SCSS → CSS automatikus fordítás.) Hogyan használd? https://youtu.be/eLmyLg2TcHc?si=fm0GC8UI4KZvHvDu&t=594
Live Server!
npm Intellisense (NPM csomagnevek automatikus kiegészítése.)!
Playwright Test for VSCode (Webtesztek futtatása Playwrighttal.)
Prettier - Code formatter!
Project Manager!
Quokka.js (Azonnal futtatja a JavaScript kódot, még mentés nélkül. De nem működik megfelelően a Ctrl+space)
Restore Terminals
Markdown All in One (Markdown fájl szerkesztéshez, tartalomjegyzék létrehozáshoz stb.)
Csak dizájn, kinézet:
One Dark Pro!
Material Icon Theme!
Power Mode Plus (Animációk gépelés közben. Csak szórakozás.) Az adatlapján menj a fogaskerékre -> Powermode:Enabled.
freeCodeCamp Dark Theme
One Monokai Theme
Java programozáshoz
Debugger for Java
Extension Pack for Java
Gradle for Java
Java
Java Red Hat
Maven for Java
Mizu Icons (Dizájn!)
Project Manager for Java
Spring Boot Dahboard
Test Runner for Java
A HTML (HyperText Markup Language) a weboldalak alapját adó leíró nyelv. Minden, amit egy weboldalon látsz – címek, bekezdések, képek, listák, táblázatok, űrlapok – HTML tagek segítségével jelenik meg. A HTML nem programozási nyelv, hanem egy szerkezetet leíró nyelv, amely megmondja a böngészőnek, hogy melyik elem mit jelent és hogyan épül fel a dokumentum.
A HTML tagek mindig valamilyen funkciót jelölnek: van, amelyik címsort hoz létre, van, amelyik egy szöveg bekezdést, listát vagy akár űrlapot. A tagek logikusan hierarchiába rendeződnek, így a böngésző és a keresőmotorok számára is érthetővé válik a dokumentum felépítése.
Az alábbiakban áttekintjük a leggyakrabban használt HTML elemeket, amelyek az alapját képezik minden modern weboldalnak.
Címsorok (Headings)
A HTML 6 különböző szintű címsort használ:
– a legnagyobb, főcím
– alcím
– kisebb alcím
…
– a legkisebb címsor
A címsorok hierarchiát adnak a dokumentumnak, és segítenek a keresőmotoroknak is a tartalom értelmezésében.
Bekezdés
A
tag hozza létre a bekezdéseket. A böngésző automatikusan ad körülötte egy kis térközt, így tagoltabbá és olvashatóbbá válik a szöveg.
Listák
A HTML kétféle listát használ:
Rendezetlen lista (unordered list)
– felsorolás, általában pontokkal
– listaelem
Rendezett lista (ordered list)
– számozott lista
– listaelem
Táblázatok
A táblázatok több részből állnak:
– maga a táblázat
– a fejléc sorait foglalja magába
– a tartalmi sorokat tartalmazza
– egy sor
– fejléc cella (általában félkövér és középre igazított)
– normál adatcella
Div
A
egy általános blokk szintű konténer, amelynek önmagában nincs szemantikai jelentése. Főként a szerkezet kialakítására és CSS alapú stílusozásra használjuk.
Űrlapok (Forms)
Az űrlapokat felhasználói adatok bekérésére használjuk:
Import-ok
link:css → CSS importáláshoz.
script:src → JS importáláshoz.
Az Emmet egy kódbővítő eszköz, amellyel rövid parancsokból automatikusan teljes HTML vagy CSS kódot tudsz generálni.
HTML Emmet parancsok
! → teljes HTML5 alap sablon
div →
.box →
#header →
ul>li → beágyazott listaelem
ul>li*5 → 5 darab li elem
div>p>span → hierarchia
p{Hello} →
Hello
a[href="#"] → attribútumos elem
Item numbering: $
Példa számozott listaelemre:
Az univerzális szelektor (*) minden HTML-elemet kijelöl.
Az #id szelektor csak egy elemet jelölhet.
A csoportosított szelektor (h1, h2, p) több elemet is kijelöl.
CSS tulajdonságok:
padding: belső térköz
width: szélesség
margin: külső térköz
font-weight: betűvastagság
A position: fixed; rögzíti az elemet a viewporthoz.
A CSS egy stílusleíró nyelv, amely HTML, XML vagy SVG alapú dokumentumok megjelenését (pl. színek, betűtípusok, elrendezés, margók stb.) határozza meg.
A „lépcsőzetes” elnevezés arra utal, hogy a stílusok öröklődnek és felülírhatók: ha több stílus vonatkozik egy elemre, a böngésző bizonyos szabályok szerint dönti el, melyik érvényesüljön.
A CSS önmagában nem programozási nyelv, tehát logikát (pl. változókat, függvényeket, feltételeket) közvetlenül nem tartalmaz.
Alapvetően, így néz ki:
selector { deklaráció; -> tulajdonság neve: tulajdonság értéke; }
Viszont léteznek kiterjesztései, mint például:
Sass (Syntactically Awesome Style Sheets)
Less
Ezek lehetővé teszik, hogy változókat, ciklusokat, függvényeket használjunk, és logikusabban, modulárisan építsük fel a stílusokat. A böngésző ezeket lefordított (kompilált) CSS fájlként kapja meg.
box-sizing
Flex elrendezés:
Flexbox egy dimenzióban működik: sorban vagy oszlopban. A float régi technika, eredetileg szöveg körbefolyatása miatt találták ki.
Flex paraméterek:
flex: grow shrink basis
Pl.: flex: 0 0 70%
grow = 0 → nem nő
shrink = 0 → nem zsugorodik || shrink = 1 → alaphelyzetben összezsugorodhat, ha kisebb a hely
basis = 70% → alapértelmezett szélesség 70%
Float elrendezés:
Ha float-tal két dobozt egymás mellé akarsz tenni, gyakran kell clearfix trükk, külön üres
vagy ::after pseudo-element a „töréshez”.
Grid elrendezés:
Ha komplexebb layoutot akarsz, pl.: több sor és több oszlop, vagy mobilon a main és aside egymás alá kerül, a Grid sokkal rugalmasabb. A reszponzív dizájn miatt kell a grid.
HTML szemantikus formázó (inline) tagek
Tag Jelentés magyarul Mire utal (szemantika)
kiemelés, hangsúlyos szöveg fontos információ (nem csak vastag betű)
dőlt kiemelés nyomatékosítás, hangsúlyváltás beszédben
kiemelt, kiemelés sárgával releváns szöveg jelölése (pl. keresési találat)
apróbetűs szöveg jogi, megjegyzés, mellékinformáció
mű címe könyv, film, zene, műalkotás neve
idézet rövid idézet, automatikus idézőjel
hosszabb idézet külön bekezdésben idézett szöveg
rövidítés pl. HTML (title: HyperText Markup Language)
definíció először bevezetett fogalom
elé kell beírni a script taget, mert a böngésző fentről lefelé tölti be az oldalt.
A JavaScript a weboldalak működéséért felelős programozási nyelv. Segítségével dinamikus elemeket hozhatunk létre, adatokat dolgozhatunk fel, eseményeket kezelhetünk (kattintás, billentyűlenyomás), vagy akár teljes alkalmazásokat építhetünk.
Míg a HTML a szerkezetet, a CSS a kinézetet adja, addig a JavaScript teszi interaktívvá a weboldalt. A böngésző minden JS sort sorban végrehajt.
Alap utasítások
Egyszerű kiíratások, hibák, figyelmeztetések megjelenítése:
alert('Hello!') – felugró ablak
console.log() – üzenet az ellenőrző konzolba
console.error() – hibaüzenet
console.warn() – figyelmeztetés
Változók
A változókban adatokat tárolunk. JavaScriptben a leggyakoribb típusok:
let – módosítható változó, csak a blokkon belül él (ajánlott)
const – állandó, értéke nem módosítható
var – régi változótípus, kerülendő (újradeklarálható, problémás)
Példa:
let kor = 20;
kor = 21; // módosítható
const szam = 10;
// szam = 11; // hiba: a const nem módosítható
Adattípusok
Két nagy csoportjuk van: primitív típusok és objektum típusok.
Primitívek
String – szöveg
Number – szám (egész és tizedes is)
Boolean – igaz vagy hamis
null – szándékosan „nincs érték”
undefined – létrehozott változó, de nincs értéke
Példa:
const x = null;
const y = undefined;
A null és az undefined gyakran keveredik, de fontos a különbség:
null – Te állítod be, hogy „nincs érték”.
undefined – A böngésző adja, ha nem kap értéket a változó.
Objektumok
A JavaScript objektumok sok adatot tartalmazhatnak egy helyen.
Példa dátum objektumra:
const date = new Date(); // mai dátum
const date2 = new Date("2025-11-24");
String műveletek
A szövegekkel gyakran végzünk műveleteket:
text.length – megadja a hosszát
text.toLowerCase() – kisbetűssé alakítja
text.substring(1,5) – részlet kivágása
text.split() – darabolás
Példa modern string írásra (interpoláció):
const szoveg = "Hello világ";
console.log(${szoveg}!);
Dátumok kezelése
getDate() – nap lekérése
getDay() – hét napja (0–6)
getMonth() – hónap (0–11)
setHours() – óra beállítása
setFullYear() – év beállítása
toISOString() – ISO formátumú dátum
Műveletek
A JavaScript támogatja a matematikai műveleteket, például:
+= – növeli a változó értékét
++ – egyesével növel
let szam = 10;
szam += 10; // 20
szam++; // 21
Feltételek
Az if utasítással elágazásokat hozhatunk létre.
Példa:
const a = 14;
const b = 10;
if (a <= b) {
console.log("Igaz");
} else {
console.log("Hamis");
}
if (a === b) { // szigorú összehasonlítás (típust is nézi)
console.log("Egyenlő");
} else {
console.log("Nem egyenlő");
}
A === mindig ajánlott a == helyett, mert típust is ellenőriz.
Kérdések és helyes válaszok
Hogyan lehet egy szöveg hosszát lekérdezni?
szoveg.length
Melyik állítás igaz a JSON-re?
Nyelvfüggetlen.
JSON (JavaScript Object Notation) adatcsere-formátum, ami bármilyen nyelven használható (Java, Python, C#, stb.), nem csak JavaScript-ben.
Nem kompatibilis 100%-ban XML-lel, mert az teljesen más szintaxis.
Mely állítások igazak a BOM-ra?
Hierarchikus elrendezésű, a tetején a window object helyezkedik el.
Segítségével elérjük a böngésző tulajdonságait, beállításait (ablakméret, előzmények, URL-ek stb.).
A BOM (Browser Object Model) nem szabványos, de minden böngésző implementálja.
Lehetővé teszi az ablak, előzmények, URL-ek, képernyőméret kezelését, a dokumentumon kívüli objektumokhoz fér hozzá.
Mi a kimenete?
let keresztNev = "Elek";
let csaladNev = null;
let beceNev = null;
console.log(keresztNev ?? csaladNev ?? beceNev ?? "Nem meghatározott");
Megoldás: Elek
Az ?? (nullish coalescing) a null vagy undefined ellenőrzi. keresztNev értéke "Elek", ami nem null vagy undefined, így az első érték kerül kiírásra.
Mi a kimenete?
console.log(Math.ceil(4.4))
Megoldás: 5
Mindig a következő egész számra kerekít felfelé.
Mely állítások igazak a JSON-re?
Nyelvfüggetlen.
Adatok tárolására és az adatküldés leegyszerűsítésére használható.
A JSON formátum adatcsere-formátum, kliens-szerver kommunikációban is gyakran használják.
Mit ír ki?
let obj = {
for: 1,
let: 2,
return: 3,
}
console.log(obj.let);
Megoldás: 2
Objektumokban kulcsokat szabad szövegesen használni, így let itt egy érvényes property. obj.let pontosan a 2 értéket adja vissza.
Mi a kimenete?
let nameSymbol2 = Symbol("name");
console.log(Symbol.keyFor(nameSymbol2));
undefined
Symbol("name") egy lokális szimbólum, ami nem regisztrált globális szimbólumként.
A Symbol.keyFor() csak a globális szimbólumoknál ad vissza kulcsot.
Mi a kimenete?
var foo = function teszt(){
console.log(foo==foo)
};
foo();
true
foo mindig önmagára mutat a függvény scope-on belül, így a foo == foo mindig true.
Mi a kimenete?
console.log(undefined > 0);
false
undefined nem szám, így összehasonlításkor NaN-ra konvertálódik → minden összehasonlítás false lesz.
Nem dob hibát, egyszerűen false az eredmény.
A folytatáshoz bal oldalt válaszd ki a javascript fejezetet.
SanFranciscoboljöttem.com - Blog és kurzusok https://sanfranciscoboljottem.com
SZTE - Java Objektumok és Osztályok https://okt.inf.szte.hu/prog1/gyakorlat/eloadas/Java/objectsAndClasses/
YouTube - Fullstack Tutorial sorozat https://www.youtube.com/watch?v=8qMi3e_fzKc&list=PL92V_WHHt2CnXaUIA9T2ww7peDK4lqmZj
IT Szótár - Mi az a JVM? https://itszotar.hu/ jvm-java-virtualis-gep-mi-a-mukodese-es-mi-a-szerepe-a-java-kod-futtatasaban/
The Complete JavaScript Course 2025: From Zero to Expert!
https://www.udemy.com/course/the-complete-javascript-course/
A jegyzetek és magyarázatok a fenti források alapján készültek tanulási céllal.
Érdemes előre megtervezni a weboldal kinézetét. Például itt: https://draw.io/
Elég egy sematikus ábra, hogy kb itt lesz ennyi gomb stb. Ezt fogja majd tudni.
Itt tudsz gyakorolni.
HTML magyarázatok és interaktív példákat itt találsz.
Érdemes előre megtervezni a weboldal kinézetét. Például itt: https://draw.io/
Elég egy sematikus ábra, hogy kb itt lesz ennyi gomb stb. Ezt fogja majd tudni.
A tartalmakhoz adunk stílust a css-el. Bizonyos korlátokon belül lehet némi interaktivitást is csinálni css-el pl.: egérműveleteknél, színváltoztatás. Interaktivitás fokozásához javascriptre van szükség.
Ezekkel játékosan meg lehet tanulni a CSS használatát:
https://flexboxfroggy.com/#hu
https://cssgridgarden.com/#hu
http://www.flexboxdefense.com/
https://flukeout.github.io/
Itt tudsz gyakorolni.
CSS magyarázatok és interaktív példákat itt találsz, valamint itt.
display: flex;
flex-direction: column;
align-items: center; /*Ezt együtt kell használni pl.: flex/grid-el*/
/*
justify-content: "Hova tegyem az elemeket a sorban?" Jobbra balra pl
align-items: "Hova tegyem az elemet a saját sora magasságán belül? Oszlopnál jó."
align-content: "Hova tegyem az egymás alatt lévő sorokat?"
*/
justify-content
flex-start: group items at the start of a container's main axis
flex-end: group items at the end of the main axis
center: group items in the center of the main axis
space-between: evenly distribute items along the main axis such that the first item aligns at the start and the final item aligns at the end
space-around: evenly distribute items along the main axis such that all items have equal space around them
align-items
flex-start: align items across the start of a container's cross axis
flex-end: align items across the end of the cross axis
center: align items across the center of the cross axis
Accordingly, flex-direction accepts the following values:
row: lay out the main axis from left to right
row-reverse: lay out the main axis from right to left
column: lay out the main axis from top to bottom
column-reverse: lay out the main axis from bottom to top
order
The order property defines the order in which an item appears in the flex container and accepts both positive and negative integer values. All flex items begin with a default order of 0, so an item with an order greater than 0 will be repositioned relative to items still set to their default orders.
#: position an item relative to the other items in the container
align-self
To vertically position individual towers, use align-self, which accepts the same values as align-items.
flex-start: align item at the start of a container's cross axis
flex-end: align item at the end of the cross axis
center: align item at the center of the cross axis
Reminder: align-self, like align-items, also accepts the values baseline and stretch, but these values cannot be used in Flexbox Defense.
VC Code-ban töltsd le a Live Servert. Bal oldalt az Explorerben kattints jobb klikkel az adott html fájlodra -> Open with Live Server. Rögtön elindul a böngésződben a http://127.0.0.1:5500/ -on a weboldalad.
Ctrl+F5 csodákra képes, ha épp valami nem töltene be, pedig már lekódoltad.
Futtatáskor az F12-t nyomd meg a böngészőben, válaszd a kis nyíl ikont (kijelölő), és kattints egy adott részre amit ellenőrizni szeretnél. A böngésző narancssárgával jelzi a margót (margin) és zölddel a párnázást (padding). Így pontosan látni fogod, melyik elem "tolja" el a másikat!
Felül a kis nyíl mellett van az eszköz váltó, vagyis meg tudod nézni, hogy telón hogyan néz ki. Akár fel is tudod venni a telefonodat is: Bal felül Dimension melletti nyílra katt -> Edit -> Add custom device -> Add meg a telefonod nevét és pixelben a magasságát és szélességét (Ha nem tudod kérdezd meg az AI-t.) Device pixel ratio:3 -> Save.
Application -> Storare bal oldalt -> Local storage -> Itt látod az elmentett adatokat (JS-ben localStorage-el tudsz menteni.), ha vannak.
A mappa szerkezeted (példa):
Tegyük fel, hogy így néz ki a projekted:
my-website/
├── index.html <-- Te itt állsz a böngészővel
├── about.html
└── components/ <-- Ez egy almapa
└── header.html <-- Ezt akarod betölteni
Rossz módszer (Abszolút útvonal)
const path = "/components/header.html";
Jelentése: "Menj a legelső főkapuhoz (szerver gyökér), és ott keresd a components mappát."
Hiba: Ha GitHubon a projekted a /my-website/ mappában van, a főkapunál nem lesz components mappa, csak a my-website mappán belül. Offline is elromlik, mert a számítógéped "főkapuja" a C:/ meghajtó vagy a localhost gyökere.
Jó módszer (Relatív útvonal)
const path = "./components/header.html";
(Vagy egyszerűen: components/header.html)
Jelentése: "Nézz körbe abban a mappában, ahol most vagyunk (./), keress egy components mappát, és menj bele."
Miért jó? Mindegy, hogy a mappád neve my-website vagy valami-mas, és mindegy, hogy a GitHubon van vagy a gépeden. Mivel az index.html mellett ott van a components mappa, mindig meg fogja találni.
Kipróbálható kódpélda
Ha az index.html fájlból futtatod a scriptet, így nézzen ki a fetch:
// A lényeg: NINCS perjel az elején!
const url = "components/header-component.html";
async function loadHeader() {
try {
const response = await fetch(url);
if (response.ok) {
const html = await response.text();
document.getElementById("header-helye").innerHTML = html;
} else {
console.error("Nem találom a fájlt ezen az úton:", url);
}
} catch (hiba) {
console.error("Hiba történt:", hiba);
}
}
loadHeader();
ul > li {
/* Csak azokra az elemekre érvényes, amelyek közvetlenül az ul alatt vannak, nem mélyebben, vagyis jeleneseben, csak az elsőre. */
border: 1px solid;
width: 50px;
}
Ez az egyik legjobb magyarázat a css szelektorokra.
/*A :has() segítségével megváltoztathatod egy eleme stílusát attól függően, hogy mi van benne. De ez, csak akkor működik, ha nem a js-ben van a módosítás. :( */
h2:has(.Andi) {
background-color: rgba(255, 255, 255, 0.716);
color: white;
}
https://sanfranciscoboljottem.com
https://www.youtube.com/playlist?list=PLyriihBWoulwgaKMNF6M20iD0c6iDtu0S
https://www.youtube.com/watch?v=BUFagBZZafo&list=PLg7lel5LdVjyO7jk-4biyr0fqPVygTLOk&index=5
https://www.codedex.io/home
https://www.freecodecamp.org/learn/javascript-v9/lecture-working-with-the-dom-click-events-and-web-apis/how-do-you-create-new-nodes-using-innerhtml-and-createelement
https://www.udemy.com/course/the-complete-javascript-course/
100+ Web Development Things you Should Know
//A prompt a felugró ablak. A "name" egy címke, a "Bobby" egy input mező.
var name = window.prompt("What's your name?", "Bobby");
window.alert("Hello " + name + "!");
console.log("hello " + n)
Console
console.debug("Debugging!");
console.log("Hello, World!");
console.error("This is an error message.");
console.warn("This is a warning message.");
console.table([{name: "Amit", age: 30}, {name: "Jatin", age: 25}]);
Típus Leírás
String (Karakterlánc), Időzőjelek közé zárt szöveges karakterek sorozata.
Number (Szám) Matematikai értéket képviselő szám (egész vagy tizedes).
BigInt "Olyan szám, amely a normál szám típusnál nagyobb egész értékeket képvisel."
Boolean (Logikai) "Logikai érték, amely vagy true (igaz), vagy false (hamis) lehet."
Object (Objektum) Adatok kulcs-érték párjainak gyűjteménye.
Undefined "Olyan primitív változó, amelyhez még nem rendeltek értéket."
Null "Primitív érték, amely egy objektum hiányát jelzi."
Symbol (Szimbólum),Egyedi és megváltoztathatatlan primitív azonosító.
Néhány fontos megjegyzés:
Primitív típusok: A fenti listából hét (String, Number, BigInt, Boolean, Undefined, Null, Symbol) primitív típus, ami azt jelenti, hogy egyszerre csak egy értéket tárolnak és megváltoztathatatlanok. Amikor azt mondjuk, hogy a primitív típusok (mint a String vagy a Number) megváltoztathatatlanok (immutable), az nem azt jelenti, hogy a változó értékét nem írhatod felül, hanem azt, hogy magát az értéket a memóriában nem tudod módosítani.
Összetett típus: Az Object az egyetlen összetett típus, ide tartoznak a tömbök (Arrays) és a függvények (Functions) is a JavaScriptben.
var c = 3; //number
var d = 3.5; //float
var a = "Hello"; // dupla idézőjel
var b = "Hello"; // szimpla idézőjel
A backtick (`) speciális, mert enged változóbeillesztést és többsoros szöveget
let name = "Andrea";
var c = `Hello`; // backtick (templateliterál)
const a =2;
let message = `Hello, ${name}!`; // → "Hello, Andrea!"
var g = true; //boolean
var i = null; //null
var j; //undefined
A “var” simán újra definiálható, ezért inkább nem használják.
A “let” nem definiálható újra, ugyanabban a hatókörben.
A "const"-nak csak egyszer lehet értéket adni, olyanmint a javaban a final típusú változó.
//for ciklus:
for (var j=0; j<10; j++){
console.log(j);
}
for (let i=0; i<10; i++){
console.log(i);
}
console.log(i);//Hibaüzenetet kapunk, mert a let-el deklarált változó, csak a scope-n belül létezik.
var r = "Rudi4";
switch (r) {
case "Rudi":
//alert("Rudi egy kutya.");
break;
case "Mici":
// alert("Mici egy macska.");
break;
default:
//alert("Nem kutya, sem macska.");
}
== (egyenlőség, laza összehasonlítás)
Automatikus típusátalakítást végez.
Ha a két érték nem ugyanaz a típus, JavaScript megpróbáljaátkonvertálni őket, hogy össze tudja hasonlítani.
Ezért néha váratlan eredményt ad.
=== (szigorú egyenlőség)
Nem végez típusátalakítást.
Csak akkor ad true-t, ha érték és adattípus is megegyezik.
switch (ageOfGyula) {
case ageOfGyula === 17:
// alert("Majdnem nagykorú.");
break;
case ageOfGyula > 18:
//alert("Gyula már nagykorú.");
break;
default:
//alert("Gyula még kiskorú.");
}
```javasript
# Tömbök
```javascript
var fruits = ["grape", "apple", "banana"];
alert(fruits[0]); //első elem kiíratása
var a = [];
a.push(1, 2, 3, 4, 5); //hozzáadjuk az elemeket.
console.log(a); //Kiírja az elemeit. output: (5) [1, 2, 3, 4, 5]
var lista1 = ["alma", "körte", "makszem"];
var lista2 = ["alma", "körte", "makszem"];
Objektumok=Összetett adattípusok, nem egyszerű számok, vagy szövegek.
alert(lista1 == lista2);
false, mert két különböző objektumra mutatnak, különböző helyen vannak tárolva a memóriában.
A == objektumok esetén referenciát hasonlít, nem tartalmat.
alert(lista1 === lista2);
false, mert két különböző objektumra mutatnak, különböző helyen vannak tárolva a memóriában.
Típust is ellenőriz ÉS objektumoknál szintén csak a referenciát hasonlítja.
var lista1 = ["alma", "körte", "makszem"];
var lista2 = lista1;
alert(lista1 === lista2); // true
A fenti példában ugyanarra az objektumra mutatnak.
A prompt stringet ad vissza, ezért Number()-ral számmá kell alakítani.
var age = Number(prompt("Kérlek, add meg az életkorodat:"));
if (age < 14) {
alert("Gyerek");
} else if (age >= 14 && age <= 17) {
alert("Tizenéves");
} else {
alert("Felnőtt");
}
String()-el meg szöveggé lehet konvertálni.
Boolean(10>9); //true
feladat – Gyümölcs kereső 🍎
//Van egy tömb:
var fruits = ["alma", "körte", "banán", "narancs"];
A program:
Kérjen be egy gyümölcsnevet (prompt-tal).
Ha a megadott gyümölcs benne van a tömbben → alert("Van ilyen gyümölcs!")
Ha nincs benne → alert("Nincs ilyen gyümölcs!")
Használhatsz:
fruits.includes(keresettGyumolcs)
var fruits = ["alma", "körte", "banán", "narancs"];
var valasztottertek = prompt("Válasz egy gyümölcsöt:").toLowerCase();
if (fruits.includes(valasztottertek)) {
alert("Van ilyen gyümölcs.");
} else {
alert("Nincs ilyen gyümölcs.");
}
feladat – Számláló ciklus _🔁
Írj egy while ciklust, ami:
0-tól indul,
minden lépésben kiírja a számot (alert vagy console.log),
és 5-ig számol.
De ha a szám 3, akkor írja ki: "Ez a kedvenc számom!"
var number = 0;
while (number <= 5) {
alert(`A szám: ${number}`);
/*=== (szigorú egyenlőség)
Nem végez típusátalakítást.
Csak akkor ad true-t, ha érték és adattípus is megegyezik.*/
if (number === 3) {
alert("Ez a kedvenc számom.");
}
number++;
}
JavaScript inkrementálás (++) működésének klasszikus példája, és valóban nem minden nyelv kezeli ugyanúgy.
Post-increment (a++) → előbb használja az értéket, majd növeli
Pre-increment (++a) → előbb növeli, majd használja az értéket
var a = 0;
// post-increment
var c = a++; //Az érték átadás után növeltük az értéket.
alert(c + " " + a); //output: 0 1
// pre-increment
c = ++a; //Először növeljük az értéket és utána adjuk át.
alert(c); //output: 2
function house() {
alert("Itt lakom látod, ez az a ház!");
}
function house2(package) {
alert(package);
}
//Meghívjuk a metódust.
house();
house2("Szevasz! Bent vagyok a házban!");
var myfunc2 = function(){
console.log('hello world 2');
}
myfunk2;
Hacsak egy argumentumot adunk át, és az is már összeadott érték (68 + 96 = 164).
Ezért a függvényben a = 164 lesz, és b = undefined.
A JavaScriptben az undefined + szám → NaN (Not a Number), tehát az alert NaN-t fog mutatni.
function sum(a, b) {
alert(a + b);
}
sum(68 + 96);
//Minimum: 0 (előfordulhat)
//Maximum: 0.999999... (de 1 sosem lesz)
Math.random();
const number = Math.trunc(Math.random()*20)+1; // 1-20 közötti szám kreálása.
//A +1 azért kell, hogy lehessen 20 is az eredmény.
var i = 0;
//inter-ban eltároljuk az időazonosítóját.
var inter = window.setInterval(function(){
console.log(i); //Kiíratás.
i++; //Szám növelése.
},1000) //1000 milliszekundum = 1 másodperc, vagyis minden másodpercben lefut.
A setInterval() futtatja a kódot ismételten bizonyos időközönként.
1-1000-ig kiírja a számokat.
Ez a callback függvény:
function(){
console.log(i);
i++;
}
Ezzel lehet megállítani:
clearInterval(inter);
Modern módszer:
setInterval(() => console.log("hello"), 1000);
//A hello előtt megjelenik egy szám és az növekszik másodpercenként.
A html kódba ezt írd bele, rakhatod a head, vagy a body-ba is.
<!--defer: A script csak akkor fut le, amikor a HTML teljesen betöltődött.-->
<script src="script.js" defer></script>
Egy komponens id-jára, így kell hivatkozni:
document.getElementById("fname");
var t=document.getElementById("fname");
t.value; //output: ''
//Beírom az input mezőbe azt, hogy Bobby.
t.value; //output: 'Bobby'
Egy komponens value-ra való hivatkozás:
//A html-ben van egy gomb, aminek a value-ja SuBmit.
var c=document.querySelector('input[value="SuBmit"]');
c.value; //'SuBmit'
c.value='SEND', //'SEND'
//Elem szövegét módosítjuk. pl.: div,p , span
document.querySelector(".number").textContent = 13;
//Szám beállítása az input mezőben. ez lehet input, vagy textarea
document.querySelector(".guess").value = 23;
Típus csekkolás
// 1. Az elem szövegként jön ki (string)
let a = document.querySelector(".number").textContent;
typeof a; // "string"
// 2. Átalakítás számmá
a = Number(a);
typeof a; // "number"
A táblázat összes cellájára való hivatkozás:
var td =document.getElementsByTagName("td");
td[0]; // → első td , maga az HTML elem, output: <td>1</td>
td[0].innerHTML;
//→ az elem belsejében lévő tartalom (szöveg vagy HTML)
//output: 1
Billentyű lenyomás eseményfigyelő:
Figyeli, hogy a felhasználó lenyomott-e a billentyűzeten egy gombot, azt is nézi, ha nem egy input mezőben nyomott meg valamit.
addEventListener mindig függvényt vár, nem a függvény azonnali meghívását.
window.addEventListener('keypress',processKey);
function processKey(evt){
console.log (evt.key);
}
//output: f
Click eseményhez:
var button=document.querySelector('input[value="SuBmit"]');
button.addEventListener('click',kattintas);
function kattintas(){
console.log("Kattintottal.");
}
Arrow függvény click eseményhez:
window.addEventListener('click', () => {
console.log("Kattintottál.");
}); //Csak akkor fut, amikor valóban kattintanak az ablakban.
A DOM (Document Object Model)
A böngésző a HTML dokumentumot egy "fa struktúraként" értelmezi, amit DOM-nak hívunk. A JavaScript segítségével hozzáférhetünk ezekhez az elemekhez (ágakhoz), és módosíthatjuk őket.
Elemek kiválasztása
Megtanulhatod, hogyan "találd meg" a HTML elemeket a kódban, például:
document.getElementById("azonosito"); // id-ra hivatkozunk.
document.querySelector("body"); // tag, amiből tuti egy darab van.
document.querySelector("#azonosito"); // id-ra hivatkozunk.
document.querySelector(".osztaly-nev"); // class-ra hivatkozunk.
Eseménykezelés (Event Listeners)
Ez a webes interaktivitás lelke. A JavaScript képes "figyelni" a felhasználó mozdulatait, például:
HTML/CSS dinamikus módosítása
A JavaScripttel nemcsak a szöveget cserélhetjük ki az oldalon, hanem stílusokat is módosíthatunk (pl. egy gomb színe megváltozik, ha rákattintanak), vagy új elemeket hozhatunk létre és törölhetünk.
SyntaxError (Szintaktikai hiba): Akkor fordul elő, ha a kód nem felel meg a nyelv nyelvtani szabályainak (pl. hiányzó zárójel, idézőjel vagy vessző). A JavaScript értelmezője ilyenkor el sem tudja indítani a futtatást.
Példa: console.log("Hello"; (hiányzik a bezáró zárójel).
ReferenceError (Referencia hiba): Akkor jelentkezik, ha egy olyan változóra vagy függvényre hivatkozunk, amely nem létezik, vagy nincs definiálva az adott hatókörben (scope).
Példa: console.log(x); (ha x korábban nem lett deklarálva).
TypeError (Típus hiba): Akkor kapjuk, ha egy műveletet nem megfelelő típusú adaton próbálunk elvégezni. Például olyan értéket próbálunk függvényként meghívni, ami nem az, vagy egy null érték tulajdonságát akarjuk elérni.
Példa: let num = 5; num.toUpperCase(); (a számoknak nincs ilyen metódusa).
RangeError (Tartomány hiba): Akkor fordul elő, ha egy érték kívül esik a megengedett tartományon.
Példa: Egy tömbnek negatív hosszt próbálunk megadni.
A JavaScript biztosítja a try...catch szerkezetet, amellyel "elkaphatjuk" a futásidejű hibákat, így megakadályozhatjuk, hogy az egész program összeomoljon.
try blokk: Itt helyezzük el azt a kódot, amely potenciálisan hibát dobhat.
catch blokk: Ha a try blokkban hiba történik, a futtatás ide ugrik át. Itt kezelhetjük a hibát (pl. hibaüzenet kiírása).
finally blokk: Ez a rész mindenképpen lefut, függetlenül attól, hogy történt-e hiba vagy sem. Gyakran használják erőforrások felszabadítására vagy takarításra.
throw kulcsszó: Segítségével mi magunk is létrehozhatunk és "dobhatunk" egyedi hibákat, ha egy bizonyos feltétel nem teljesül.
Miért fontos ez?
A hibák megértése segít a hibakeresésben (debugging). Ahelyett, hogy találgatnánk, a hibaüzenet pontosan megmondja:
DE!!! Nem kötelező a fenti, ha a html-ben a mögé rakod a lentit. Viszont, ha felakarsz tölteni egy táblázatot, vagy az épp folyamatban lévő űrlap piszkozatát, akarod betölteni, akkor jól jön.
Egyetlen elem kiválasztása
Ha pontosan tudod, melyik elemet akarod módosítani, ezeket használd:
document.getElementById("azonosito"): A leggyorsabb és legbiztosabb módszer. Mivel az id egyedi kell legyen az oldalon, ez mindig pontosan egy elemet ad vissza.
document.querySelector(".osztaly"): Nagyon rugalmas, mert CSS szintaxist használ. Ha több elem is megfelel a feltételnek, csak a legelsőt adja vissza.
Több elem kiválasztása (Listák)
Gyakran előfordul, hogy egyszerre több elemen akarsz változtatni (például az összes bekezdés színét átírni):
document.getElementsByTagName("p"): Összegyűjti az összes
(bekezdés) elemet egy listába.
document.getElementsByClassName("kiemelt"): Minden elemet visszaad, aminek az osztályneve "kiemelt".
document.querySelectorAll(".doboz"): Ez a "svájci bicska". Bármilyen CSS szelektorral (osztály, ID, attribútum) megkeresi az összes egyező elemet.
Fontos tudnivaló: Amikor listát kapsz vissza (pl. querySelectorAll), nem tudod közvetlenül módosítani a stílusát (mint pl. .style.color = "red"). Ilyenkor egy for ciklussal vagy forEach metódussal végig kell menned a lista elemein.
document.querySelectorAll("div"); //html tag.
document.querySelectorAll(".rounded"); //class
document.querySelectorAll("#logo"); //specifikus id
document.querySelectorAll("a[href='https://www.freecodecamp.org/']"); //Minden elem aminek ez az attribútuma.
//A querySelectorAll nem egyetlen elemet ad vissza, hanem egy NodeList-et (olyan, mint egy tömb/lista).
const ingredientsLista = document.querySelectorAll("ul.ingredients li");
const negyedikGomb = document.getElementById("negyedikGomb");
negyedikGomb.addEventListener("click", () => {
// Egy ciklussal végigmegyünk a lista minden egyes elemén
ingredientsLista.forEach((e) => {
e.style.backgroundColor = "blue";
e.style.color = "white";
});
});
Ez a három tulajdonság a leggyakoribb módja annak, hogy JavaScript segítségével kezeljük egy HTML elem tartalmát. Bár hasonlónak tűnnek, kritikus különbségek vannak köztük.
element.innerHTML
Ez a tulajdonság a teljes HTML kódot kezeli, ami az elemen belül van.
Írás: Ha értéket adsz neki, a böngésző HTML-ként értelmezi a szöveget. Ha beleírsz egy taget, a szöveg félkövér lesz.
Olvasás: Visszaadja a szöveget az összes belső HTML taggel együtt.
Veszély: XSS (Cross-Site Scripting) támadási felületet nyit. Ha ismeretlen felhasználótól érkező adatot (pl. kommentet) illesztesz be vele, kártékony scriptek futhatnak le az oldaladon.
element.textContent
Ez a tulajdonság a nyers szöveggel foglalkozik, és ez a legbiztonságosabb választás.
Írás: Minden karaktert sima szövegként kezel. Ha beleírsz egy taget, az szövegként fog megjelenni (szöveg), nem lesz félkövér.
Olvasás: Visszaadja az elemben lévő összes szöveget, beleértve a rejtett elemeket is (amikre display: none van állítva).
Előny: Gyorsabb, mert a böngészőnek nem kell HTML-t elemeznie, és biztonságos, mert nem futtat kódokat.
element.innerText
Gyakran összekeverik a textContent-tel, de van egy fontos különbség: az innerText stílus-tudatos.
Láthatóság: Csak azt a szöveget adja vissza, ami látható a képernyőn. Ha egy szövegrész el van rejtve CSS-sel, az innerText nem fogja látni, míg a textContent igen.
Formázás: Figyelembe veszi a sortöréseket és a stílusokat (pl. a csupa nagybetűs CSS formázást nagybetűként adja vissza).
Hátrány: Valamivel lassabb, mert a böngészőnek ki kell számolnia a CSS-t (layout/reflow), mielőtt visszaadná az eredményt.
Ahhoz, hogy JavaScripttel manipulálni tudj egy HTML elemet, legelőször ki kell választanod azt az elemet (például az ID-ja vagy a CSS osztálya alapján).
Ez a dokumentum a legfontosabb DOM (Document Object Model) metódusokat és tulajdonságokat foglalja össze.
## 1. Tartalom elérése és módosítása
| Tulajdonság | Leírás |
| :-------------------- | :--------------------------------------------------------------------------- |
| `element.innerHTML` | Az elem belső HTML tartalmát adja vissza vagy módosítja (tag-ekkel együtt). |
| `element.textContent` | Az elem nyers szöveges tartalmát kezeli (biztonságosabb, mint az innerHTML). |
## 2. Attribútumok és Stílusok
| Tulajdonság / Metódus | Leírás |
| :---------------------------------- | :------------------------------------------------------------------------- |
| `element.attribute` | Közvetlen elérés (pl. `element.id` vagy `element.src`). |
| `element.style.property` | Az elem inline CSS stílusát módosítja (pl. `element.style.color = "red"`). |
| `element.setAttribute(attr, value)` | Új attribútumot hoz létre vagy módosít egy meglévőt. |
| `element.getAttribute(attr)` | Lekéri egy adott attribútum értékét. |
## 3. Struktúra manipulálása (DOM fa)
| Metódus | Leírás |
| :-------------------------------- | :--------------------------------------------------- |
| `document.createElement(tag)` | Létrehoz egy új HTML elemet a memóriában. |
| `document.appendChild(node)` | Hozzáad egy elemet egy szülőelem utolsó gyerekeként. |
| `document.removeChild(node)` | Eltávolít egy gyerekobjektumot a DOM-ból. |
| `document.replaceChild(new, old)` | Kicserél egy létező gyerek elemet egy újra. |
Művelet | Kód | Leírás
----------------|---------------------------------------|-------------------------
Mentés | localStorage.setItem('kulcs', 'érték')| Adat elhelyezése
Lekérés | localStorage.getItem('kulcs') | Adat kiolvasása
Lekérés index-el| localStorage.key(index) | Lekéri az adott indexen található kulcs nevét.
Hossz | localStorage.length | Visszaadja a tárolóban lévő elemek (adatok) számát.
Törlés | localStorage.removeItem('kulcs') | Egy elem törlése
Mindent töröl | localStorage.clear() | Összes adat törlése
Gyors gombok:
A terminálból másolni ctrl+shift+c és beilleszteni a ctrl+shift+v .
Terminálban:
cd GitHub&&mkdir webfejlesztes-modulzaro-260117-F-Andrea&&cd webfejlesztes-modulzaro-260117-F-Andrea
node -v //Ha v20 vagy v22-t látsz, akkor a következő részt hagyd ki.
Ha jó a node verziószáma, akkor ezt csináld:
npm create vite@latest .
project name: nyomj egy entert
Framework: vanilla (enter)
Variant: JavaScript (lefelé nyíl, enter)
A végén látod a localhost ip címet, amin fog futni a weboldalad, amikor az npm start-al elindítod.
File -> Open folder -> Keresd meg a projekted mappáját.
Karbantartás és Biztonság (Automation)->
Dependabot: Automatikusan figyeli a package.json-t, és ha valamelyik npm csomagnak (pl. Vite) kijön egy biztonsági frissítése, nyit neked egy Pull Requestet vele.
Lighthouse CI: Minden commit után lefut egy audit, és megmondja, mennyire lett gyorsabb vagy lassabb az oldalad (SEO, Performance, Accessibility).
A linting egy automatizált ellenőrzés, amely még futtatás előtt kiszúrja a kódban a szintaktikai hibákat, a gyanús megoldásokat és a stílusbeli következetlenségeket, így segít tisztább és bugmentesebb szoftvert írni.
Fontos, hogy ne legyen deploy, vagy bármi workflow fájlod. Itt csekkold le: .github/workflows/ ÜRES!
Teriminálba:
npm install eslint --save-dev
npx eslint --init
Megjelenik az interaktív konzolos menü. Első kérdésre yes. JS-re entert nyomj. "To check syntax and find problems"-t válaszd.
Válaszd a JavaScript modules (import/export)-ot (Vite-nál ez kell).
Válaszd a None of these-t (ha sima JS/HTML/CSS a projekt).
TypeScript: No
Browser-t válaszd.
A végén az installra yes-t nyomj.
Az npm-et válaszd.
Ha mindent jül csináltál, akkor van egy eslint.config.js fájlod.
Ezzel tudod lecsekkolni magad, ezt írd be a terminálba "npx eslint ." , ha nem történik semmi, akkor sikerült a konfig és telepítés.
Nyisd meg a böngészőben a github-os repodat. -> Settings -> Lentebb görgess a legvégére. -> Change visibility -> Change to public
Aztán felül bal oldalt Pages.
Itt a "Build and deployment" résznél a forrás (Source) maradjon Deploy from a branch, a Branch-nél pedig válaszd ki a main ágat és kattints a Save gombra.
Ekkor a GitHub elindít egy folyamatot (ezt látod az Actions fülön), és 1-2 percen belül kapsz egy linket, ami így néz ki: https://felhasznalonev.github.io/repo-neve/.
Nyisd meg a böngészőben a github-os repodat. -> Settings -> Actions -> General -> Read and write permissions -t pipáld be.
A GitHub Actions szempontjából a Vite projekt csak egy sima Node.js projekt, amit meg kell kérni, hogy futtassa le az npm run build-et.
Nyisd meg a böngészőben a github-os repodat. -> Actions -> set up a workflow yourself
nevezd át felül deploy.yml-re. Látod mellette a master/main nevet az a branch neve.
export default defineConfig({
// A 'repo-neve' helyére írd be a GitHub repód pontos nevét per jelek közé!
base: '/webfejlesztes-modulzaro-260117-F-Andrea/',
})" > vite.config.js
Ezután commitolj és mehet a push and pull a GitHub Desktop alkalmazásban.
Későbbi teszteknél ezt használd:
Élesítés: Terminálba: git push -> A GitHub YAML fájlja átveszi a stafétát, és 1-2 perc múlva kint van az oldalon.
Gyakorlati, célzott lista, amit érdemes megtanulnod, ha frontend-es akarsz lenni. A lista a legfontosabb és leggyakrabban elvárt készségeket tartalmazza, sorrendben, hogy könnyebb legyen haladni:
React.js (leggyakoribb) → komponensek, state, props, lifecycle, hooks.
Angular vagy Vue.js → ha hirdetés kifejezetten ezeket kéri.
TypeScript → erősen ajánlott a React/Angular projekteknél, típusbiztonság.
REST API → fetch, axios, HTTP metódusok (GET, POST, PUT, DELETE).
GraphQL → ha az állás kéri.
Async programozás → Promise, async/await, error handling.
Tesztelés és minőségbiztosítás
Unit testing → Jest, React Testing Library.
End-to-end teszt → Cypress, Playwright (előny, nem mindenhol kötelező).
GitHub / GitLab → saját projektek, kódminták.
Mini projektek → pl. To do app, weather app, saját portfólió oldal.
Junior pozíciókhoz → 1–2 kisebb projekt is elég.
Medior/Senior pozíciókhoz → 3–5 projekt, komplex UI, API integráció, esetleg csapatban végzett munka.
HTML5: szemantikus elemek (header, footer, article, section), formok, táblázatok, linkek, képek, meta tag-ek.
CSS3: alapok (színek, fontok, box-model), display (block, inline, inline-block), pozicionálás, float, clear.
Gyakorlat: készíts egy egyszerű saját portfólió oldalt, amiben van fejléc, navigáció, tartalom, lábléc.
hét – CSS fejlettebb technikák
Flexbox → layoutok készítése, igazítás, rugalmas elemek.
CSS Grid → rács alapú elrendezések.
Reszponzív design → media query-k, mobilbarát elrendezések.
Gyakorlat: a portfólió oldal legyen reszponzív, különböző képernyőméretekre.
hét – JavaScript alapok
Alapok: változók (let, const), függvények, ciklusok, feltételek.
DOM manipuláció → elemek lekérdezése, eseménykezelés (addEventListener).
Async programozás → Promise, async/await, fetch API.
Gyakorlat: készíts egy interaktív To do alkalmazást (hozzáadás, törlés, státusz módosítás).
hét – Modern JavaScript + TypeScript
ES6+: arrow function, destructuring, template string, spread/rest operator.
TypeScript: alapok (típusok, interface-ek, osztályok), egyszerű JS projekt átalakítása TS-re.
Gyakorlat: To do alkalmazás átalakítása TypeScript-tel.
hét – Frontend keretrendszer
React.js: komponensek, state, props, lifecycle, hooks (useState, useEffect).
Routing → React Router alapok.
Form kezelés → kontrollált és kontrollálatlan komponensek.
Gyakorlat: To do app újraírása React + TS + CSS modulok segítségével.
hét – API integráció és verziókezelés
REST API → fetch/axios, CRUD műveletek.
Git alapok → commit, branch, merge, pull, push.
Projekt feltöltése GitHub-ra → portfólió link.
Gyakorlat: To do app adatainak tárolása egy külső API-val.
hét – Tesztelés és optimalizáció
Unit teszt → Jest, React Testing Library alapok.
E2E teszt → alap Cypress teszt (pl. To do app működésének ellenőrzése).
Teljesítmény → képek optimalizálása, lazy loading, kód splitting.
Gyakorlat: portfólió oldal betöltési idejének optimalizálása, alap tesztek írása.
hét – Portfólió és soft-skillek
Portfólió oldal véglegesítése → linkek, projekt bemutatók, GitHub referenciák.
Soft-skillek → kommunikáció, dokumentáció írása, angol nyelvű rövid leírások a projektekhez.
Gyakorlat: minden projekt legyen dokumentálva, működő linkek, rövid leírások, screenshotok.
Ez a terv heti 10–15 óra tanulást feltételez, de akár gyorsabban is haladhatsz, ha több időd van.
[ ] React.js alapok: komponensek, state, props, lifecycle, hooks
[ ] Routing: React Router alapok
[ ] Form kezelés: kontrollált és kontrollálatlan formok
[ ] To do app újraírása React + TS + CSS modulok segítségével
hét – API integráció és verziókezelés
[ ] REST API: fetch/axios, CRUD műveletek
[ ] Git alapok: commit, branch, merge, pull, push
[ ] Projekt feltöltése GitHub-ra, portfólió link létrehozása
[ ] To do app adatainak tárolása külső API-val
hét – Tesztelés és optimalizáció
[ ] Unit teszt: Jest, React Testing Library alapok
[ ] E2E teszt: Cypress alap (pl. To do app működésének ellenőrzése)
[ ] Teljesítmény optimalizálás: képek, lazy loading, code splitting
[ ] Portfólió oldal betöltési idejének javítása, alap tesztek írása
hét – Portfólió és soft-skillek
[ ] Portfólió oldal véglegesítése: linkek, projekt bemutatók, GitHub referenciák
[ ] Dokumentáció: rövid leírások minden projekthez, angol nyelvű verzió
[ ] Soft-skillek: problémamegoldás, csapatmunka, kommunikáció
A sanfranciscoboljottem tananyag sorrendje:
Programozási alapismeretek
Git Alapismeretek
Java alapismeretek
SQL alapismeretek
JavaFX alapismeretek
JavaFX Középhaladó
Java Középhaladó (Vagy esetleg a szerver után.)
JDBC - Adatbázis kapcsolatok
Java szerver
Spring Boot Ismeretek
Spring Boot Ismeretek II.
A Java egy általános célú, objektumorientált programozási nyelv.
Több operációs rendszeren is futtatható (Windows, macOS, Linux stb.).
A Java nyelvet a Sun Microsystems fejlesztette ki, amelyet később az Oracle vásárolt fel.
A Java programok futtatását a JVM (Java Virtual Machine) teszi lehetővé, amely különböző operációs rendszereken is képes végrehajtani a Java bytecode-ot.
Több operációs rendszeren is lehet futtatni, pl.: windows, mac, linux.
A Sun Microsystem alkotta meg a javat. Később az Oracle vette meg a céget.
A JVM miatt a Java programok sok különböző operációs rendszeren futtathatók.
A JVM a Java bytecode-ot (.class fájlok) futtatja, amelyeket gyakran .jar fájlba csomagolnak. A windows/linux pedig futtatja a JVM-t.
A Java egyik legfontosabb tulajdonsága a platformfüggetlenség. Ez azt jelenti, hogy egy programot egyszer kell megírni, és az különböző operációs rendszereken is futtatható.
Ez a tulajdonság a bytecode és a Java Virtual Machine (JVM) együttműködésének köszönhető.
A fejlesztő Java forráskódot ír (.java fájlok).
Ez ember által olvasható programkód.
Fordítás (javac)
A javac fordító lefordítja a Java forráskódot bytecode-ra.
bemenet: .java
kimenet: .class
A bytecode egy platformfüggetlen utasításkészlet, amelyet nem közvetlenül a processzor hajt végre.
Bytecode
A bytecode egy köztes kód, amelyet a JVM képes értelmezni.
A .class fájlokat gyakran .jar (Java Archive) fájlba csomagolják, ami több class fájlt és erőforrást tartalmazhat.
Futás a JVM-ben
A Java Virtual Machine (JVM) betölti és futtatja a bytecode-ot.
A JVM működése:
betölti az osztályokat
ellenőrzi a bytecode biztonságát
végrehajtja a kódot
A végrehajtás két módon történhet:
Interpreter – soronként értelmezi a bytecode-ot
JIT (Just-In-Time) compiler – a gyakran futó kódrészeket natív gépi kóddá fordítja a gyorsabb futás érdekében
Natív gépi kód
A JVM az adott operációs rendszerhez és processzorhoz igazodó machine code-ot hoz létre, amelyet a CPU közvetlenül végrehajthat.
Write Once, Run Anywhere
A Java híres elve:
"Write once, run anywhere"
Ez azt jelenti:
a programot egyszer kell lefordítani bytecode-ra
minden platformon csak a JVM-nek kell léteznie
Például:
Windows → Windows JVM
Linux → Linux JVM
macOS → macOS JVM
A bytecode mindenhol ugyanaz marad.
Java környezet komponensei
JDK – Java Development Kit (Program írása + futtatása)
A JDK a Java fejlesztéshez szükséges teljes eszközkészlet.
Tartalmazza:
javac (fordító)
JRE (Program futtatása)
fejlesztői eszközök
JRE – Java Runtime Environment
A JRE a Java programok futtatásához szükséges környezet.
Tartalmazza:
JVM (A Java program futtatása)
Java szabványos könyvtárak
JVM – Java Virtual Machine
A JVM egy virtuális futtatókörnyezet, amely:
betölti az osztályokat
végrehajtja a bytecode-ot
kezeli a memóriát
végzi a Garbage Collectiont
A JVM szerepe
A JVM nem csak a kód futtatásáért felelős.
Feladatai például:
Class loading – osztályok betöltése
Bytecode verification – biztonsági ellenőrzés
Memory management – memória kezelése
Garbage Collection – automatikus memóriatisztítás
JIT fordítás – teljesítmény optimalizálása
A JVM tehát egy absztrakciós réteg a Java alkalmazás és a hardver között, amely elrejti a platformfüggő részleteket a fejlesztő elől.
Innen töltsd le a csomagolt változatot (zip fájl).
Ezt: Eclipse IDE for Enterprise Java and Web Developers link
A letöltött zip fájlt kicsomagoljuk, máris indítható az IDE.
Első indításkor meg kell adni egy mappát (Workspace), ahová a projektek kerülnek. Munkaterületeket váltogathatunk: File/Switch workspace
Eclipse egyik furcasága, hogy alapból nem tudunk nyitó kapcsos zárójelet írni (Alt+b), csak akkor, ha kikapcsoljuk a gyorsbillentyű hozzárendelést:
Window/Preferences/General/Keys (vagy keresőben:”bind”)
Szűrjünk „alt+b”-re és mindkét bejegyzésnél „Unbind command”
Apply and close
Window/Preferences/General/Editors/Text Editors:
pipáljuk be a Show Line numbers opciót
New Project -> Java Project ->
Configure JRE-s: "Use default JRE 'jdk-25.0.1' and workspace compiler preferences"
Vedd ki a pipát -> "Create module-info.java file"
Bal szélén a projekten jobb klikk package.
Billentyű parancsok:
Ha elfelejtjük a main-t, akkor Main + ctrl+space
ctrl+7 kommentjel
kitesz/visszavesz ctrl+shift+o: Importok fixálása, valamint a nem használtakat törli.
ctrl+shift+f Formázás
syso + ctrl +space Egyes verziókban: sout 2x ctrl +space
F11 Futtatás
Eclipse beállítása:
TO DO komment kikapcsolása Eclipse-ben
Platformok:
Java SE Standard Edition: általános célú platform.
Java EE - Enterprise Edition: elosztott, hibatűrő rendszerek fejlesztéséhez.
Jakarta EE - JE-nek 2017-től az Eclipse Foundation általi fejlesztése.
JAVA EE8 (2017) óta Jakarta EE a neve. Az Oracle átadta a specifikációt az Eclipse Foundationnek.
8 féle primitív adattípus létezik, mindent kis betűvel kell írni programozáskor.
A megadott memóriát fogja lefoglalni a változó, hiába nincsen benne semmi.
A Java statikusan típusos nyelv, meg kell adni, hogy a változó szám, vagy szöveg stb formátumú.
byte
Egész szám.
Tartomány: -128 - 127
Foglalt memória: 1 Byte=8 Bit
Alapértéke: 0
short
Egész szám.
Tartomány: -32 768 - 32 767
Foglalt memória: 2 Byte
Alapértéke: 0
int
Egész szám.
Tartomány: -2 milliárd - 2 milliárd
Foglalt memória: 4 Byte
Alapértéke: 0
long
Egész szám.
Tartomány: −9 223 372 036 854 775 808 – 9 223 372 036 854 775 807
Pontos magyar elnevezés:
9 kvintillió 223 kvadrillió 372 trillió 36 billió 854 milliárd 775 millió 808
Foglalt memória: 8 Byte
Alapértéke: 0
float
Lebegőpontos szám (egyszeres pontosság).
Tartomány: ≈ 1.175494 × 10⁻³⁸ - ≈ 3.402823 × 10³⁸
Foglalt memória: 4 Byte
Alapértéke: 5.06e2f //$5.06 \times 10^2$ Hatványozás az "e". "f" mint float.
double
Törtszám szám (kétszeres pontosság).
Tartomány: 2.2250738585072014 × 10⁻³⁰⁸ - 1.7976931348623157 × 10³⁰⁸
Foglalt memória: 8 Byte
Alapértéke: 0.0d //A d elhagyható az, csak arra utal, hogy double.
char
Egy karakter.
Tartomány: 1 Unicode karakter (0–65.535) pl.: 65 // A
Foglalt memória: 2 Byte
Alapértéke: '\u0000'
boolean
Logikai.
Tartomány: true/false
Foglalt memória: a JVMre bízza (technikai okokból nem fix).
Alapértéke: false
Röviden:
byte = 1 byte
short = 2 byte
char = 2 byte
int = 4 byte
float = 4 byte
double = 8 byte
long = 8 byte
boolean = A JVMre bízza.
Ezek objektumok, a heap memórián tárolódnak, és nagy kezdőbetűvel íródnak:
String → karakterlánc (objektum)
Array (pl. int[])
List, Map, Set
saját osztályok
Az alapértelmezett értékük: null
Sok függvény megvan hozzájuk írva. pl.: .Length()
var myNum = 5; // int
// var nélkül
ArrayList<String> cars = new ArrayList<String>();
// var-al rövidebb könyebben olvashatóbb.
var cars = new ArrayList<String>();
Távoli példa: Két nyelv. Az angol 8 betűvel, a magyar 5 betűvel fejezi ki ugyanazt.
You drink. | Iszol.
Következő példa:
Készítünk egy játékot, melyben van fű is. Leprogramozzuk a fűszálat és valahányszor szükségünk van rá elég a fűszál osztályt meghívni. Minden tulajdonsága benne lesz, pl a mozgása, felszíne.
Harmadik példa:
Kocsmát építünk egy játékban.
Leprogramozzuk a padlót, a pultot, ezeket bármikor meghívhatjuk újra. Mindegyik entitás, a java-ban objektum.
Osztály (tervrajz) -> Objektum (A belőle készült példány.) Még egy objektum.
Utána készítsük el az Firstproject nevű package-t.
A NetBeans-ben alapvetően megtalálható a java compiler a program fordításához.
Jobb egér gomb a kódban és Insert code -> Getter és Setter.
Encapsulate Fields-t, ha bepipálod és elfelejtetted privátra állítani a változót, akkor ezt kijavítja.
Miért nem másolódnak a metódusok minden objektumba?
Ha minden objektum saját példányban tartalmazná az összes metódusát, az valóban pazarló lenne memóriában. Ehelyett a legtöbb objektumorientált nyelv ezt csinálja:
Az adatok (mezők, attribútumok) objektumonként külön vannak.
A metódusok közösek (osztályhoz vagy prototípushoz tartoznak).
Így egy metódusból egyetlen példány létezik, amit sok objektum használ.
De akkor honnan tudja a metódus, melyik objektummal dolgozzon?
👉 A this referencia miatt.
Amikor egy metódust egy objektumon keresztül hívsz meg, a rendszer automatikusan átadja azt az objektumot, amelyen a hívás történt.
Ez történik a háttérben:
obj.metodus(param1, param2)
↓
metodus(obj, param1, param2) // a this = obj
package firstproject;
//Az osztálynevet mindig nagy betűvel kezd.
public class FirstProject {
//Ökölszabály: Osztályon belül statikus metódusból nem hívhatunk meg nem statikus metódust.
public static void main(String[] args) {
//String result = censor("A kutya nagyon aranyos kutya.", "kutya", "macska");
// System.out.println(result);
//Új sablont hozok létre, példányosítom.
Human first = new Human();
first.setName("J"); //Beállítjuk a konstruktorral.
System.out.println(first.getName()); //Lehívjuk a konstruktoral.
first.writeMyName();
Human second = new Human();
System.out.println(second.getName());
}
// Metódus.
// Ha nem írod oda a hozzáférési módosítót, akkor package-private (default) lesz.
// Ez azt jelenti, hogy csak ugyanabban a package-ben érhető el.
// void = nincs visszatérési értéke.
// String fuggveny() { return null; } = van visszatérési értéke.
// A zárójelben a paraméterek (argumentumok) vannak.
public static String censor(String text, String toChange, String newWord) {
if (text.contains(toChange)) {
}
text = text.replaceAll(toChange, newWord); // (keresett szó, új szó)
return text;
}
}
package firstproject;
//Sablon. Blueprint.
public class Human {
//Oszály változó, nem tartozik konkrét függvényhez.
//Privátra kell állítani, hogy a Main-ből ne lehessen elérni.
private String name = "Gy";
private int age;
//Metódus, aminek nincs visszatérési értéke, de kiírja az értéket.
void writeMyName() {
System.out.println(name);
}
/*A getter és setter konstruktorok lényege, hogy ne tudjuk közvetlenül megváltoztatni a változó értékét. */
public String getName() {
return this.name; //this = Ez az osztály változó, amit fent privátként deklaráltál. Most épp a Human.
}
public void setName(String name) {
this.name = name;
}
public int getAge() {
return age;
}
public void setAge(int age) {
this.age = age;
}
}
Ezzel a jelöléssel meg fog jelenni a crtl+space-el a kommented a metódus meghívásakor.
/*_ A getter és setter konstruktorok lényege, hogy ne tudjuk közvetlenül megváltoztatni a változó értékét. _/
public String getName() {
return this.name; //this = Ez az osztály változó, amit fent privátként deklaráltál. Most épp a Human.
}
Human valami = new Human();
String thing = "Alma";
String thing2 = new String("Alma");
System.out.println(thing + "\n" + thing2);
System.out.println(thing.charAt(0)); //Az első karaktert adja vissza.
thing.length(); //mérete, output: 4
A megírt kód újrafelhasználása, pl.: ha már létre van hozva az állat osztály, akkor azt lehet többször is használni.
Mindegyik osztály ősosztálya az Object.
package firstproject;
//Öröklés. Így tudod használni az Animal osztály getter és setterjét.
//Nincsen többszörös öröklődés a java-ban, ebben a formában, csak hosszú többszörös örökléssel. pl.: Gerincesek -> NAgy macska -> Macska.
public class Cat extends Animal {
public void meow() {
System.out.println("MEOW!");
}
}
Másik osztály-ban:
public static void main(String[] args) {
Cat macska = new Cat();
Cat macska2 = new Cat();
//Azért false az értéke, mert nem az értéket, hanem a referenciákat hasonlítja össze, macska és macska2 két külön objektum a memóriában.
System.out.println(macska.equals(macska2));
macska.meow();
}
Annotáció (annotation) egy metaadat, amivel osztályokat, metódusokat, változókat stb. jelölünk meg, és amit a fordító vagy futásidőben a program fel tud dolgozni.
@Override //Felülírás.
public void makeSound() {
System.out.println("MEOW!");
}
}
Elérési módosítók:
4 féle láthatóság van, amiből 3-hoz kapcsolódik kulcsszó (private, protected, public), az utolsó pedig az alapértelmezett eset, amire szokás package private-ként hivatkozni.
Public:
Nyilvános, bárhonnan el lehet érni.
Protected:
A protected metódusokat, csak az örökléssel létrehozott osztályok használhatják.
Abstract:
Az asbsztrakt osztályok nem példányosíthatók.
Ezt nem lehet csinálni:
abstract class Animal {}
Animal állat =new Animal();
Minden interface alapból public abstract, ezért ez a kettő ugyanazt jelenti:
interface Pet {
void play();
}
és
interface Pet {
public abstract void play();
}
Ez egy nyilvántartás, hogy a háziállatoknak mi a képességük.
abstract interface Pet {
public void cuddle();
public void sit();
public void layDown();
}
Implementáljuk a Pet interfészt, után kötelező felülírni a metódusokat.
Jobb klikk a Cat szón és Source Action -> Override/Implement Methods... -> Válaszd ki a metódusokat.
Fontos infó, hogy bármennyi infészt lehet implementálni, nincs megkötés mint az öröklésnél.
public class Cat extends Animal implements Pet {
@Override //Felülírás.
public void makeSound() {
System.out.println("MEOW!");
}
@Override
public void cuddle() {
}
@Override
public void layDown() {
}
@Override
public void sit() {
}
}
A konstruktor, csak egyszer hívható meg, amikor az objektum létrejön. Nincs meghatározva, hogy van-e visszatérési értéke, avagy nincs.
A konstruktor neve megegyezik az osztályéval, ha nem hozod létre, akkor az IDE automatikusan létrehozza.
Amikor létre jön az objektum, akkor automatikusan lefut.
Overloading akkor történik, amikor azonos nevű konstruktorok vagy metódusok vannak egy osztályban, de a paraméterlistájuk különbözik. Ugyanez igaz a metódusokra is.
Mit jelent, hogy különbözik a paraméterlista?
Legalább az egyiknek igaznak kell lennie:
más paraméterszám, vagy
más paramétertípus, vagy
más sorrendű paramétertípus.
⚠️ A paraméternevek NEM számítanak, csak a típus és a sorrend!
Az első parancsnak kell lennie. A super mindig arra utal akitől öröklök.
public class Cat extends Animal {
public Cat() {
//Az Animal konstruktorát hívja meg.
super();
//Az Animal osztály implementációját is meg lehet hívni. Ősosztály metódusát hívjuk meg.
super.makeSound();
}
}
Íme az OOP (Objektumorientált Programozás) négy alappillére, mindegyikhez egy rövid magyarázattal és egy-egy gyakorlati példával, hogy könnyen megjegyezhető legyen:
Encapsulation (Egységbezárás)
Lényege: Az adatok (mezők) és az rajtuk végzett műveletek (metódusok) egy egységbe (osztályba) zárása, miközben az adatokhoz való közvetlen hozzáférést korlátozzuk (pl. private módosítóval).
Példa: Egy Bankszamla osztályban az egyenleg változó privát, így nem írható át kívülről tetszőlegesen, csak a befizet() vagy kivesz() metódusokon keresztül, amik ellenőrizni tudják a művelet érvényességét.
Inheritance (Öröklődés)
Lényege: Lehetővé teszi, hogy egy osztály (gyerekosztály) átvegye egy másik osztály (szülőosztály) tulajdonságait és viselkedését, így elkerülhető a kódismétlés.
Példa: Van egy általános Jarmu szülőosztályod (aminek van sebesseg mezője), és ebből származtatod az Auto és Motor osztályokat, amik automatikusan megkapják a sebesség kezelését, de hozzáadhatnak saját extrákat.
Polymorphism (Többalakúság)
Lényege: Egyazon metódushívás különböző módon viselkedhet attól függően, hogy milyen típusú objektumra hívjuk meg (gyakran interfészeken vagy felüldefiniáláson keresztül).
Példa: Van egy Allat osztályod hangotAd() metódussal. Ha a Kutya objektumra hívod meg, azt írja ki, hogy "Vau", ha a Macska objektumra, akkor azt, hogy "Miau" – a hívó kódnak viszont nem kell tudnia, pontosan milyen állattal dolgozik.
Abstraction (Absztrakció)
Lényege: A lényeges jellemzők kiemelése és a belső megvalósítás részleteinek elrejtése; csak azt mutatjuk meg a külvilágnak, "mit" csinál az objektum, nem azt, hogy "hogyan".
Példa: Egy Kavefozo gombját megnyomod (interfész), és megkapod a kávét. Nem kell tudnod, pontosan hány bár nyomáson vagy milyen hőmérsékleten dolgozik belül a gép.
Bónusz: Interface vs. Abstract Class (Interjú kedvenc!)
Ez a két eszköz segíti az absztrakciót, de más a céljuk:
Interface: Egy "szerződés". Csak azt mondja meg, hogy egy osztálynak mire kell képesnek lennie (pl. Minden ami ehető, rendelkezzen egy egyel() metódussal). Egy osztály több interfészt is megvalósíthat.
Abstract Class: Egy "félkész sablon". Tartalmazhat közös kódot (megvalósított metódusokat) és absztrakt metódusokat is. Akkor használjuk, ha az osztályok között szoros "egyfajta" (is-a) kapcsolat van (pl. minden Kutya egy Allat).
char first = 'a';
int second = 2;
String third = first; //❌ NEM fut le. A Java nem konvertál automatikusan primitív típust String-gé.
String fourst = "" + first; //✅ Lefut.
fourst = "" + second; //✅ Lefut.
Mi történik itt?
"" → String
+first → String konkatenáció
A char automatikusan String - gé alakul.
A kasztolás külön fejezetben lesz szó a további módszerekről.
String s = Character.toString(first);
//A Character örököl az Object osztálytól, de itt nem az Object toString() metódusa hívódik meg.
//Hanem a Character.toString(char) statikus metódus.
A Java 8 óta a dátum és idő kezelésére a java.time API csomagot használjuk.
Ez leváltotta a régi Date és Calendar osztályokat.
Előnyei:
immutable (nem módosítható objektumok)
biztonságosabb
könnyebb használni
jobban olvasható
Legfontosabb osztályok
| Osztály | Mire használjuk |
| ----------------- | --------------- |
| LocalDate | csak dátum |
| LocalTime | csak idő |
| LocalDateTime | dátum + idő |
| Period | dátum különbség |
| Duration | idő különbség |
| DateTimeFormatter | formázás |
A Math osztály matematikai műveletek és konstansok elérését biztosítja:
Használata Math.<metódus() vagy konstans>;
Függvények:
abs(érték) // abszolút értékkel tér vissza
min(érték1, érték2) //két szám közül a kisebbel tér vissza
max(érték1, érték2)- két szám közül a nagyobbal tér vissza
sqrt(érték)- a szám négyzetgyökével tér vissza
pow(alap, kitevő)- az alap hatványkitevőre emelésével tér vissza
round(érték)- a legközelebbi egész számra kerekít
floor(érték) //Lefelé kerekítés, de nem levágás. p.l: -6.99 => -7
//Felfelé kerekítés. Math.floor(6.99) => 6 //Nem csak kerekítés.
ceil(érték) // Felfelé kerekítés, mindig. 6.31 => 7 | -6.3 => -6
Konstansok:
Pi (3.141592653589793)
E (2.718281828459045)
Példák:
ceil: Visszaadja a legkisebb egész számot (double formában), ami nem kisebb, mint az érték.
Negatív számnál a felfelé kerekítés → az érték kevésbé negatív lesz.
6.31 -> 7.0
6.99 -> 7.0
-6.3 -> -6.0
-6.99 -> -6.0
floor: Visszaadja a legnagyobb egész számot (double formában), ami nem nagyobb, mint az érték.
Negatív számnál lefelé kerekít → az érték kisebb lesz.
6.99 -> 6.0
6.01 -> 6.0
-6.01 -> -7.0
-6.99 -> -7.0
Java-ban a wrapper (burkoló) osztályok a primitív adattípusok objektum megfelelői.
Primitív típus → Wrapper osztály
boolean → Boolean
byte → Byte
short → Short
int → Integer
long → Long
float → Float
double → Double
char → Character
Mire jók a wrapper osztályok?
Objektumként kezelhetők (pl. kollekciókban: List, Map).
Tartalmaznak hasznos metódusokat (pl. parseInt, valueOf).
Lehetővé teszik az autoboxing / unboxing használatát.
Könyebb velük bonyolultabb dolgokat elvégezni.
Példa (autoboxing)
int x = 5;
Integer y = x; // autoboxing
int z = y; // unboxing
Példa az automatikus becsomagolásra.
public static void main(String[] args) {
int second = 2;
test(second);
}
//A java automatikusan becsomagolja az int-et egy Integer objektumba, így lehet váltogatni, működik ugyanez fordítva is.
public static void test(Integer c) {
System.out.println(c);
}
Példa a primitív és objektum másolásra:
Lemásolja az első értékét. Primitív típus → érték másolódik.
int a = 1;
int b = a; //
b++;
System.out.println(" a: " + a + " ; b: " + b);
Mindkét változó ugyanarra az objektumra mutat.
setName("Fluffy") az egyetlen közös objektumot módosítja.
Objektumoknál nem az objektum másolódik, csak a memóriacím(referencia).
Cat macska = new Cat(); //macska létrehoz egy Cat objektumot
Cat macska2 = macska; //→ referencia másolása
macska.setName("Fluffy");
System.out.println(macska.getName() + " " + macska2.getName()); //output: Fluffy Fluffy
❌ Fordítási hiba (compile-time error): A fordító (javac) nem tudja lefordítani a kódot. Pl.: hiányzik a pontosvessző, szintaktikai hiba.
👉 A program el sem indul.
Példa:
double → int szűkítő (narrowing) konverzió
Java nem engedi automatikusan az adatvesztéssel járó konverziót.
double d = 3.5;
int i = d; //❌ Fordítási hiba.
💥 Futási hiba (runtime error)
👉 A program elindul, de futás közben elszáll.
Mikor történik?
A kód szintaktikailag helyes.
Logikai vagy környezeti probléma futás közben. pl.: 0-val való osztás.
Explicit kasztolás (cast)
double d = 3.5;
int i = (int) d;
System.out.println(i); // Mindig a tizedespont jobb oldalát eldobja. output: 3
System.out.println((int) 3.9); // 3
System.out.println((int) -3.9); // -3
A FIFO és LIFO adatszervezési elvek azt írják le, milyen sorrendben kerülnek ki az elemek egy tárolóból.
FIFO – First In, First Out „Aki először jött, először megy.”
LIFO – First In, Last Out „Aki először jött, utoljára megy.”
Mint a nyomtatópapíroknál, ha eggyesével rakod be a papírokat a tárolóba. Íhy működik a verem, vagyis stack.
Példa:
public class ElsoProject {
public static void main(String[] args) {
int i = 2;
Object obj = new Object();
ElsoProject ep = new ElsoProject(); //Osztály példányosítása.
ep.proba(obj);
}
//Azért nem kell ide a static, mert példányosítottuk az osztályt.
private void proba(Object param) {
String str = param.toString();
System.out.println(str); //Ennél a sornál már kikerült a lenti képen lévő proba, param és str a Stack-ből.
}
}
A Stack egy memóriaterület, ahol a program lokális változóit (int, double, boolean, stb.) és függvényhívások adatait tárolják. Itt tárolódik maga a változó neve és a referencia (a címe a memóriában)
LIFO (Last In, First Out) elven működik – az utolsó elem, amit betettünk, az első, amit kiveszünk.
Kupac.
A Heap a dinamikusan foglalt memória helye, ahová a program futás közben hoz létre objektumokat. Itt tárolódik a tényleges adat/objektum.
Maga az Objektum a Heapben tárolódik, a stack-ban, csak hivatkozunk rá.
Minden, ami benne van egy osztályban az az objektum része, vagyis a Heap-ben tárolódik, az osztályváltozók (int, String) is.
Példa:
public static void main(String[] args) {
Object o1 = new Object();
o1 = null;
o1 = new Object(); //Ne ugyanaz, mint a két sorral feljebb lévő.
}
private void proba(Object param) {
}
Mi történik?
new Object()
→ objektum létrejön a heapben
o1
→ hivatkozás, ami a stackben van (o1 = null;)
→ a heapben lévő objektum címére mutat
A nem-primitív (non-primitive) adattípusokat más néven referencia típusoknak is nevezzük. Ahogy a neve is sugallja, ezek nem közvetlenül az értéket tárolják (mint pl. egy számot), hanem egy referenciát (memóriacímet) arra a helyre, ahol az objektum található.
Strings (Karakterláncok): Szövegek tárolására szolgálnak. Bár a Java-ban kiemelt szerepük van, valójában objektumok.
Arrays (Tömbök): Azonos típusú elemek gyűjteménye (lehet primitív vagy objektum is benne).
Classes (Osztályok): Felhasználó által definiált sablonok, amelyekből objektumok hozhatók létre.
Interfaces (Interfészek): Absztrakt típusok, amelyek előírják, hogy egy osztálynak milyen metódusokat kell megvalósítania.
Primitív vs. Nem-primitív:
A legfontosabb különbségek
| Jellemző | Primitív típusok (pl. int, boolean) |Nem-primitív típusok (pl. String, Array)
| Definíció | Előre definiáltak a Java nyelvben. | A programozó hozza létre őket (kivéve a String-et).
| Metódusok | Nincsenek metódusaik, csak értéket tárolnak.| Vannak metódusaik, amikkel műveleteket végezhetünk.
| Érték | Mindig van értékük (nem lehetnek nullák). | Lehet az értékük null (ha nem mutatnak sehova).
| Írásmód | Kisbetűvel kezdődnek (pl. int). | Általában nagybetűvel kezdődnek (pl. String).
| Méret | A típustól függ (fix méret). Kiv: boolean | Minden referencia azonos méretű a memóriában.
A Garbage Collector (GC) egy automatikus memória-kezelő mechanizmus, ami a Heap-en lévő, már nem használt objektumokat felszabadítja. Figyeli, hogy mely objektumokra már nincs hivatkozás (pl. minden változó, ami mutat rá, megszűnt). Eltávolítja ezeket a memória felszabadításához. Nem garantált azonnali felszabadítás.
Win + S → "environment variables" → Edit the system environment variables.
Itt láthatók a környezeti változók, amiket a géped használ.
Kattints a Environment Variables… gombra.
System variables alatt: kattints a New… gombra (vagy keresd a meglévőt, ha PATH-ról van szó).
Nyomj ráa Path-ra és add hozzá újként.
Például JDK beállításához:
Variable name: JAVA_HOME
Variable value: C:\Program Files\Java\jdk-25 (a te telepítési útvonalad szerint)
PATH módosítása (hogy a CMD felismerje a java és javac parancsokat):
Alatta lesz:
Keresd meg a Path változót → Edit → New → add:
%JAVA_HOME%\bin
OK → OK → OK
CMD ellenőrzés
Nyisd meg a Command Prompt-ot (Win + R → cmd → Enter).
Írd be:
java -version
javac -version
Ha mindkettő verziót visszaad, sikeres a beállítás.
A tömb statikus, ha törölsz belőle egy elemet, akkor sem megy össze és meg kell adni az elején, hogy mekkora lesz.
Példák:
String[] simpleArray0; //Deklaráció.
simpleArray0 = new String[]{"alma", "körte"}; //Nem kötelező egyből inicializálni. alma= 0. elem, körte= 1. elem
System.out.println(simpleArray0[2]); //Ilyenkor még nem jelez hibát, hanem majd futási időben fog.
A tömb nem univerzálisan a leggyorsabb megoldás – a hatékonyság mindig attól függ, milyen műveleteket kell végrehajtani és milyen gyakran.
Röviden:
Olvasás index alapján → tömb nagyon gyors
Beszúrás / törlés → tömb gyakran lassú
Keresés kulcs alapján → hash alapú struktúra gyorsabb
Dinamikusan változó adatmennyiség → lista vagy más adatszerkezet előnyösebb
👉 A jó megoldás kiválasztása mindig a feladat jellegétől, az adatmérettől és a használati mintától függ, nem önmagában az adatszerkezettől.
public static void main(String[] args) {
//Nem primitíveket, hanem objektumokat tárol.
//Cat egy osztály → referencia típus.
ArrayList<Cat> cats = new ArrayList<>();
//Java 7+ verzióban elég a jobb oldalon az üres <>, a típus öröklődik a bal oldalról.
//Régebben be kellett írni a jobb oldalra a Cat-et.
//ArrayList<Cat> cats = new ArrayList<Cat>();
Cat sziamiau = new Cat("Sziamiau");
cats.add(sziamiau); //Ha ezt nem adjuk meg, akkor üres lesz az ArrayList.
//Elkerüljük az IndexOutOfBoundsException-t hibát.
if (!cats.isEmpty()) { //Ha nem üres.
//cats.get(0) → visszaadja az első Cat referenciát. output: firstproject.Cat@1f32e575
System.out.println("Neve: " + cats.get(0).getName()); //output: Sziamiau
} else {
System.out.println("Üres az ArrayList.");
}
}
public static void main(String[] args) {
//ArrayList létrehozása az ősosztály típusával.
//Animal az ősosztály, a Cat pedig egy leszármazott.
//Tárol objektumokat, nem primitíveket.
ArrayList<Animal> cats = new ArrayList<>();
//Ez lehetséges, mert minden Cat egy Animal, az öröklés miatt.
Cat sziamiau = new Cat("Sziamiau");
cats.add(sziamiau);
if (!cats.isEmpty()) { //Ha nem üres.
//cats.get(0) → visszaad egy Animal referenciát, ami valójában Cat típusú objektumra mutat.
System.out.println("Neve: " + cats.get(0).getName());
} else {
System.out.println("Üres az ArrayList.");
}
}
public void purr() {
System.out.println("Dorombolok.");
}
public static void main(String[] args) {
//Polimorfizmus
//cats listája Animal típusú referenciákat tárol.
//Cat egy leszármazott osztály, ezért hozzáadható.
//Az ArrayList viszont csak Animal referenciákat ismer,
//így a Cat-hez speciális metódus (purr()) nem érhető el közvetlenül.
ArrayList<Animal> cats = new ArrayList<>();
Cat sziamiau = new Cat("Sziamiau");
cats.add(sziamiau);
//cats.get(0) visszaad egy Animal referenciát, ami valójában egy Cat objektum.
//A kasztolás (Cat) lehetővé teszi, hogy a Cat-specifikus metódusokat meghívd.
Cat cat = (Cat) cats.get(0);
//Most már elérhető a Cat osztály saját metódusa (purr()), mert a referenciát Cat típusúvá alakítottuk.
cat.purr(); //Dorombolok.
}
String: A String egy immutable class, vagyis megváltoztathatatlan és a Heap-en belül a String Poolban van tárolva.
Mi a különbség a lenti két inicializáció között?
Röviden: memóriahasználatban, objektumok számában és referencia-azonosságban különböznek.
String a = "Hello!"; // String Poolban lévő String objektumra mutat.
/*
✔️ Mit történik itt?
A "Hello!" egy String literál.
A Java a literálokat a String Constant Poolban (String Pool) tárolja.
A String Pool a Heap memórián belül található (Java 7 óta).
Ha már létezne "Hello!" a poolban, akkor a arra a meglévő objektumra mutatna.
*/
String c = new String("Hello"); // Heapben van.
/*✔️ Mit történik itt?
A "Hello" literál először bekerül a String Poolba (ha még nem volt ott).
A new String("Hello") mindig létrehoz egy új String objektumot a Heapben, a poolon kívül.
c erre az új objektumra mutat, nem a poolban lévőre.
👉 Tehát:
String Pool: "Hello"
Heap (külön objektum): new String("Hello")
*/
System.out.println(a == c); //== referenciát hasonlít; output: false
//Final kulcszó legyen ott az osztály deklarálásakor.
public final class Dog extends Animal {
//Legyen egy final változója.
final private int size;
//Konstruktor.
public Dog() {
size = 0;
}
//Konstruktor, amivel lehet a változó értékét beállítani és nem kell neki setter.
public Dog(int size) {
this.size = size;
}
}
Ez egy immutable class. =Megváltoztathatatlan.
final: A Dog osztály nem terjeszthető ki. Nem lehet a kutyának alfaja.
A metódusait nem lehet felülírni, mert final az osztály.
public final class Dog extends Animal {
//A final változó értékét nem lehet megváltoztatni.
final private int size;
public void bark() {
}
public Dog() {
size = 0;
}
public Dog(int size) {
this.size = size;
}
public void getSize() {
System.out.println(size);
}
}
Main-ben:
Dog dog1 = new Dog();
dog1.getSize(); // output: 0
Dog dog2 = new Dog(5);
dog2.getSize(); // output: 5
Ha kiterjeszthető lenne a Dog osztály, nem lenne final és írunk bele egy final metódust, akkor azt nem lehetne felülírni.
A statikus változó: az osztályhoz tartozik minden példány közösen használja egyetlen példányban létezik.
Main-ben:
public static void main(String[] args) {
Cat cat1 = new Cat();
Cat cat2 = new Cat();
//Az objectCount az osztályhoz tartozik, nem az objektumhoz.
//Ezért statikus változót mindig az osztály nevével érünk el.
System.out.println(Cat.objectCount); //output: 2
}
Cat osztály:
public class Cat extends Animal {
//Ezzel megtudjuk számolni, hogy hány objektum készült el.
// //Mindegyik példány osztozik ezen a statikus változón.
public static int objectCount;
//Konstruktor, ha nem hozod létre, akkor az IDE automatikusan létrehozza.
//Amikor létre jön az objektum, akkor automatikusan lefut.
public Cat() {
objectCount++;
}
}
try {
byte a = 300;
//Ha nem sikerül ezt lefuttatni, akkor az exception részre ugrik a program.
} catch (Exception e) {
System.out.println("Kivétel: " + e); //Kiíratjuk a hibaüzenetet.
}
Második példa try-with-resources-os:
public static void main(String[] args) {
File file = new File("C://file.txt");
try (//A try-catch-t automatikusan hoztam létre az IDE segítségével.
// A FileReader sora eljén kattints a villanykörtére -> surround try-catch.
FileReader fr = new FileReader(file)) {
} catch (IOException e) {
System.out.println(e);
} finally { //A finally-t nem kötelező megadni.
// Ez mindenképpen le fut, akár lefutott a try, vagy nem, akár lefutott a catch, vagy nem.
// Ez mindenkéépen lefut.
System.out.println("Mindenképpen ez ki lesz írva.");
}
}
System.out.println("Adj meg egy életkort, és írd kiírom, hogy kiskorú, felnőtt vagy nyugdíjas-e!");
Scanner sc = new Scanner(System.in);
int age = sc.nextInt();
if (18 <= age && age < 65) {
System.out.println("Felnőtt");
} else if (age < 18) {
System.out.println("Kiskorú");
} else {
System.out.println("Nyugdíjas");
}
System.out.println("Adj meg három számot vesszővel elválasztva, és kiírom, melyik a legnagyobb!");
Scanner sc = new Scanner(System.in);
String numbers = sc.nextLine();
String[] numbers2 = numbers.split(",");
int max = Integer.parseInt(numbers2[0]); //Negatív számok esetén, nem jó a 0.
for (int i = 0; i < numbers2.length; i++) {
//Integer.parseInt() -> Kasztolás.
//trim() -> Leszedi a szóközöket.
max = Math.max(Integer.parseInt(numbers2[i].trim()), max);
}
System.out.println("A legnagyobb szám: " + max);
A switch nem feltételeket, hanem konkrét értékeket vizsgál; tartományok ellenőrzésére if–else szerkezetet használunk.
//Csak egyszer fut le.
Scanner sc = new Scanner(System.in);
System.out.println("Adj meg egy érdemjegyet (1-5-ig), \n és kiírom szövegesen az eredményt (elégtelen, jeles, stb).");
//Leellenőrizzük, hogy tuti számot adott-e meg a felhasználó.
if (sc.hasNextInt()) {
int grade = sc.nextInt();
switch (grade) {
case 1:
System.out.println("Elégtelen.");
break;
case 2:
System.out.println("Elégséges.");
break;
case 3:
System.out.println("Közepes.");
break;
case 4:
System.out.println("Jó.");
break;
case 5:
System.out.println("Jeles.");
break;
default:
System.out.println("1 és 5 között adj meg egy számot.");
}
sc.close();
} else {
System.out.println("Nem számot adtál meg.");
}
Scanner sc = new Scanner(System.in);
int grade;
do {
System.out.print("Adj meg egy érdemjegyet (1–5): ");
if (!sc.hasNextInt()) { //Nem számot adott meg a felhasználó.
System.out.println("Nem számot adtál meg!");
sc.next(); // hibás input eldobása
grade = 0; // biztosan rossz érték
continue; //Hagyd abba a ciklus aktuális körét, és ugorj a következőre.
}
grade = sc.nextInt();
if (grade < 1 || grade > 5) {
System.out.println("Hibás érték! 1 és 5 között add meg.");
}
} while (grade < 1 || grade > 5);
// Java 14+ switch expression
switch (grade) {
case 1 ->
System.out.println("Elégtelen."); //A break-t sem kell kiírni.
case 2 ->
System.out.println("Elégséges.");
case 3 ->
System.out.println("Közepes.");
case 4 ->
System.out.println("Jó.");
case 5 ->
System.out.println("Jeles.");
}
sc.close();
Scanner sc = new Scanner(System.in);
int number;
do {
System.out.println("Adj meg egy számot, ami 1 és 10 között van.");
if (!sc.hasNextInt()) {
System.out.println("Hibás érték, próbáld újra!");
sc.next(); // hibás input eldobása
number = 0; // A do-while végén a number értékét vizsgálom, ezért a fordító kötelezően
// inicializáltnak akarja látni.
continue;// Ezzel nem csak egyszer dobja vissza a felhasználónak az újra beírás
// lehetőségét. Kiírja újra a do-while második sorát is.
}
// A vizsgálat után adjuk meg a változónak az értéket.
number = sc.nextInt();
// Logikai vizsgálat.
if (number < 1 || number > 10) {
System.out.println("Túl nagy vagy túl kicsi az érték. \n Újra!");
}
} while (number < 1 || number > 10);
System.out.println("Jó a szám, 1 és 10 között van!");
Első projekt létrehozásához itt találod azt, ami alapján csináltam.
Eclipse IDE for Enterprise Java and Web Developers
Ha, csak Java Developer van az, se gond, akkor be kell állítani ezt:
Servlet API hozzáadása a projekthez manuálisan
Menj a Tomcat mappádba, pl. C:\apache-tomcat-9.0.80\lib
Ott találod: servlet-api.jar (és esetleg jsp-api.jar)
Eclipse-ben:
Jobb klikk a projektre → Properties → Java Build Path → Libraries → Add External JARs…
Tallózd be a servlet-api.jar-t → OK
Most már a import javax.servlet.*; működni fog
Tomcat szervert innen tudod letölteni.
Binary -> Core verzió
Ha hiányzik a .class fájl a build mappából, akkor Eclipse -> Project → Clean
Ha nem működik a servlet:
Window → Show View → Servers
Alul megjelenik a szerver panel.
Tomcat v10.1 Server at localhost
→ Right click -> Clean ->Aztán Publish -> Aztán Restart.
Render.com-on Dockerrel kell deployolnod, mert Render nem tud közvetlenül WAR fájlokat futtatni Tomcat nélkül.
Ez a leggyakrabban használt Map. Akkor használd, ha a teljesítmény a legfontosabb, és egyáltalán nem számít, hogy az elemek milyen sorrendben jönnek ki belőle.
Előnye: Az elemeket automatikusan sorba rendezi a kulcsok alapján (például számoknál növekvő sorrend, szövegeknél ABC). Ha szükséged van arra, hogy a kulcsaid mindig rendezettek legyenek, ez a jó választás.
public void fajlBeolvasas(String fajlneve) {
// Van amikor ez a jó: StandardCharsets.UTF_8
// Van amikor ez a jó: Charset.forName("windows-1250")
Path path = Path.of(fajlneve);
// Ellenőrzés és beolvasás egyben
if (!Files.exists(path)) {
System.out.println("Nem létezik a fájl!\n Itt keresem: " + System.getProperty("user.dir"));
return; // Ha nincs fájl, ne is menjünk tovább.
}
ArrayList<Operatorok2> lista = new ArrayList<>();
try { // Vs code-ban: Katt a Standard-ra, majd sárga körte ikon -> Surround statemnt with try-catch.
List<String> sorok = Files.readAllLines(path, StandardCharsets.UTF_8);
//Van, amikor 1-től kell menni az oszlopnevek miatt.
for (int i = 0; i < sorok.size(); i++) {
String[] t = sorok.get(i).split(" ");
lista.add(new Operatorok2(Integer.parseInt(t[0]), t[1], Integer.parseInt(t[2])));
}
} catch (IOException ex) {
System.getLogger(Operatorok2.class.getName())
.log(System.Logger.Level.ERROR, (String) null, ex);
}
}
A Stream mindig valamilyen adatforrásból indul. Pontosan egyet használhatsz. Nincs felsorolva az összes fajta.
Forrás
Példa
Leírás
collection.stream()
list.stream()
Normál stream
collection.parallelStream()
list.parallelStream()
Több szálon fut
Arrays.stream()
Arrays.stream(array)
Tömbből stream
Stream.of()
Stream.of(1,2,3)
Manuális stream
Files.lines()
Files.lines(path)
Fájl sorai
BufferedReader.lines()
br.lines()
Input stream
Példa:
List<String> lista = List.of("A", "B", "C");
lista.stream()
.forEach(System.out::println);
Még léteznek más fajta források is, melyekhez más köztes elemek tartoznak, a táblázatban nincsen felsorolva az összes.
Forrás
Példa
Leírás
IntStream.range()
IntStream.range(1, 10)
Egész számokra stream
IntStream.of()
IntStream.of(1,2,3)
Manuális int stream
IntStream.generate()
IntStream.generate(() -> 5)
Végtelen int stream
DoubleStream.of()
DoubleStream.of(1.0,2.0,3.0)
Manuális double stream
LongStream.range()
LongStream.range(1, 10)
Long típusú stream
Arrays.asList()
Arrays.asList(1,2,3).stream()
Listából stream
Köztes műveletek (Intermediate)
Ezek nem hajtódnak végre azonnal, bármennyit használhatsz.
Csak a lezáró műveletnél futnak le.
Művelet
Példa
Leírás
filter()
.filter(x -> x > 10)
Szűrés
map()
.map(Person::getName)
Átalakítás
mapToInt()
.mapToInt(String::length)
Átalakítás (Elem → int)
flatMap()
.flatMap(List::stream)
Stream-ek lapítása
sorted()
.sorted()
Rendezés
sorted(Comparator)
.sorted(Comparator.comparing(Person::getAge))
Egyedi rendezés
distinct()
.distinct()
Duplikátumok eltávolítása
limit()
.limit(5)
Első n elem
skip()
.skip(1)
Első n kihagyása
peek()
.peek(System.out::println)
Debug
Lezáró műveletek (Terminal)
Ezek a terminális (lezáró) műveletek indítják el a stream futását. Pontosan egyet használhatsz minden stream-en.
Művelet
Visszatérési típus
Példa
Leírás
Kell .orElse()?
forEach()
void
.forEach(System.out::println)
Minden elemre végrehajtódik
❌ Nem
count()
long
.count()
Elemek száma
❌ Nem
sum()
int/double
.mapToInt(x -> x).sum()
Csak numerikus streameknél
❌ Nem
average()
OptionalDouble
.mapToInt(x -> x).average()
Átlag numerikus streameknél
✅ Igen
toList()
List<T>
.toList()
Listába gyűjtés
❌ Nem
collect()
bármi
.collect(Collectors.toList())
Gyűjtés egyéni módon
❌ Nem
findFirst()
Optional<T>
.findFirst()
Első elem
✅ Igen
findAny()
Optional<T>
.findAny()
Tetszőleges elem
✅ Igen
anyMatch()
boolean
.anyMatch(x -> x > 10)
Legalább egy egyezik
❌ Nem
allMatch()
boolean
.allMatch(x -> x > 0)
Mind egyezik
❌ Nem
noneMatch()
boolean
.noneMatch(x -> x < 0)
Egy sem egyezik
❌ Nem
min()
Optional<T>
.min(Integer::compare)
Legkisebb
✅ Igen
max()
Optional<T>
.max(Integer::compare)
Legnagyobb
✅ Igen
Megjegyzés: Az Optional visszatérési értékeknél (average(), findFirst(), findAny(), min(), max()) érdemes .orElse(defaultValue)-t használni, hogy biztosan legyen egy konkrét érték, ne Optional-ként kapd az eredményt.
record Car(String type, String make, String model, Integer engineCapacity) { }
public static void main(String[] args) {
List<Car> cars = List.of(new Car("sedan", "BMW", "530", 1998),
new Car("sedan", "Audi", "A5", 1998),
new Car("sedan", "Mercedes", "E-Class", 2500),
new Car("hatchback", "Skoda", "Octavia", 1600),
new Car("hatchback", "Toyota", "TypeR", 1450));
// A .toList() visszalakítjuk listává az adatfolyamot.
List<Car> sedanCars = cars.stream().filter(x -> x.type.equals("sedan")).toList();
// Csinálunk egy listát, amiben csak a kocsik make attribútuma szerepel.
// map: Egy az egyhez (1:1) transzformáció. Minden autóból egy márkát (String)
// csinál.
List<String> carMakeList = cars.stream().map(car -> car.make).toList();
// Csinálunk egy listát, amiben csak a kocsik make és model attribútumai
// szerepelnek.
/*
* flatMap: Egy a többhöz (1:N) transzformáció. Itt minden autóból egy Streamet
* csinálsz (ami a márkát és a modellt tartalmazza), majd a flatMap ezeket a kis
* streameket "kilapítja" egyetlen nagy listává.
*/
List<String> carMakeModelList = cars.stream().flatMap(car -> Stream.of(car.make, car.model)).toList();
Stream<Integer> szamokStream = Stream.of(10, 11, 12, 13, 14);
/*
* Ilyenkor a Java még nem csinál semmit. Nem szűri le a számokat, és nem írja
* ki a konzolra a szöveget. Csak "feljegyzi" magának, hogy:
* "Majd ha valaki kéri az eredményt, ezeket a számokat így kell szűrnöm."
*/
Stream<Integer> szurtSzamokStream = szamokStream.filter(i -> {
System.out.println("Vizsgálom a számot: " + i); // Ez megmutatja a "lustaságot".
return i % 2 == 0;
});
/*
* A Stream API olyan, mint egy gyári futószalag. A filter és a map a gépek a
* szalagon, de a szalag csak akkor indul el, ha a végén valaki megnyomja a
* gombot (ez a terminális művelet, pl. a count vagy a toList).
*/
/*
* A terminális (záró) művelet (count). A tényleges munka csak itt kezdődik.
*/
System.out.println("Ennyi páros szám van:" + szurtSzamokStream.count());
// ^ Gyűjtők (Collectors), a csoportosítás és a párhuzamos végrehajtás.
// 😊 1. Partitioning
/*
* A partitioningBy egy speciális gyűjtő, ami egy feltétel alapján pontosan két
* részre osztja a listát: azokra, amikre igaz a feltétel, és azokra, amikre
* nem.
*/
// Map<Boolean, List<Car>>: A kulcs mindig Boolean (true/false)
Map<Boolean, List<Car>> autokSzetvalasztasa = cars.stream().collect(
Collectors.partitioningBy(car -> car.type.equals("sedan"))
);
// true kulcs alatt lesznek a sedanok, false alatt minden más
System.out.println("Sedanok (true): " + autokSzetvalasztasa.get(true) + "/n");
System.out.println("Nem sedanok (false): " + autokSzetvalasztasa.get(false));
// 😊 2. GroupingBy (Csoportosítás)
/*
* Amikor nem csak két kategóriánk van, a groupingBy segítségével bármilyen
* tulajdonság (pl. gyártó vagy típus) alapján csoportosíthatunk.
*/
// Csoportosítás: Típus szerint (Map<String, List<Car>>)
Map<String, List<Car>> tipusSzerint = cars.stream()
.collect(Collectors.groupingBy(Car::type));
// 😊 3. Összetett csoportosítás (Multi-level Map)
/*
* A videó végén egy komplexebb példa van, ahol nem csak listába gyűjtjük az
* autókat, hanem egy Map-et teszünk egy Map-be. Itt azt nézzük meg, hogy
* típuson belül melyik modellnek mekkora a motorja.
*/
// Map<Típus, Map<Modell, Hengerűrtartalom>>
Map<String, Map<String, Integer>> csoportositottAutok = cars.stream()
.collect(Collectors.groupingBy(
Car::type, // Elsődleges kulcs: típus (pl. sedan)
Collectors.toMap(
Car::model, // Belső Map kulcsa: modell
Car::engineCapacity // Belső Map értéke: motor mérete
)));
// 😊 4. Párhuzamos Streamek (Parallel Streams)
/*
* Alapértelmezetten a stream egyetlen szálon (Sequential) fut.
*
* parallelStream(): A Java felosztja a feladatot több processzorszálra
* (úgynevezett ForkJoinPool-t használ).
*
* Mikor használd? Csak nagyon nagy adatmennyiségnél, mert a szálak kezelése
* plusz erőforrásba kerül.
*
* Váltás: Menet közben is válthatsz .parallel() és .sequential() hívásokkal a
* láncon belül.
*
* Nem mindig gyorsabb, thread safety gondok, sorrend nem garantált.
*/
// 😊 5. Párhuzamosítás
// A parallelStream() több szálon futtatja a műveleteket
cars.parallelStream().forEach(car -> {
System.out.println(
"Szál: " + Thread.currentThread().getName() + " dolgozik ezen: " + car.model());
});
import java.util.Arrays;
import java.util.List;
import java.util.stream.Collectors;
public class ApikGrouping {
record Felhasznalo(String nev) {
}
public static void main(String[] args) {
List<Felhasznalo> lista = Arrays.asList(
new Felhasznalo("Andrea"), new Felhasznalo("Béla"),
new Felhasznalo("Andrea"), new Felhasznalo("Andrea"),
new Felhasznalo("Andrea"), new Felhasznalo("Béla"));
System.out.println("Szűrt eredmények:");
lista.stream()
// 1. Csoportosítás és számlálás (létrejön egy Map a háttérben)
.collect(Collectors.groupingBy(Felhasznalo::nev, Collectors.counting()))
// 2. Belépünk a Map bejegyzéseibe
.entrySet().stream()
// 3. Szűrés: csak a 3-nál nagyobb előfordulások
.filter(entry -> entry.getValue() > 3)
// 4. Azonnali kiíratás tárolás nélkül
.forEach(e -> System.out.println(e.getKey() + " " + e.getValue() + "-szor szerepel a listában"));
}
}
| Szabály | Jelentés |
| -------------------------- | ------------------------------------- |
| Lazy execution | A stream csak a lezáró műveletnél fut |
| Stream egyszer használható | Új stream kell minden feldolgozáshoz |
| Terminal operation lezár | Utána nem lehet új művelet |
| `peek()` | Debug célra használjuk |
Az enum (angolul enumeration, magyarul „felsorolás”) egy különleges típus a Java-ban (és más nyelvekben is), aminek az a lényege, hogy egy változó csak bizonyos előre definiált értékeket vehet fel.
Olyan, mintha létrehoznál egy listát vagy halmazt az értékekből, és a változó nem lehet más, csak a listában lévő értékek egyike.
public enum Status {
PENDING, // függőben
COMPLETED, // teljesített
CANCELLED // törölt
}
Itt a Status egy új típus, ami csak három lehetséges értéket engedélyez: PENDING, COMPLETED, CANCELLED.
public class Order {
private Status status; // változó típusa enum
public Order(Status status) {
this.status = status;
}
public Status getStatus() {
return status;
}
public void setStatus(Status status) {
this.status = status;
}
public static void main(String[] args) {
Order order = new Order(Status.PENDING);
System.out.println(order.getStatus()); // PENDING
order.setStatus(Status.COMPLETED);
System.out.println(order.getStatus()); // COMPLETED
}
}
Tisztítsd meg a munkafolyamatot: Nyomj Ctrl+Shift+P-t, és futtasd: "Java: Clean Java Language Server Workspace". Ezután válaszd a "Restart" gombot. Ez kényszeríti a VS Code-ot, hogy újra átnézze az összes fájlt.
Vagy lehet a package névben van nagy betű.
Vagy kattints jobb gombbal a src mappára a bal oldali fában.
Válaszd a "Add Folder to Java Source Path" lehetőséget (ha felkínálja).
Vagy, csak simán töröld ki a .vscode mappát és .classpath, .project fájlt.
A programozásban a deadlock (magyarul gyakran holtverseny vagy holtpont) egy olyan állapot, amelyben két vagy több folyamat (process) vagy szál (thread) kölcsönösen egymásra vár, így egyik sem tud továbbhaladni.
Ez a jelenség leggyakrabban a párhuzamos programozás során fordul elő, amikor az erőforrások (például memória, fájlok vagy adatbázis-zárolások) elérése nincs megfelelően összehangolva.
Támogatja a legtöbb böngészőt (Chrome, Firefox, Edge stb.).
Több nyelven is használható: Java, Python, C#, JavaScript stb.
Fejlesztők és tesztelők írhatnak benne automatizált funkcionális/regressziós teszteket.
Selenium Grid
Lehetővé teszi a párhuzamos tesztfuttatást több gépen és böngészőn.
Hasznos, ha sok tesztet kell rövid idő alatt lefuttatni.
Két fő része van:
Hub: Központ, ami elosztja a feladatokat.
Node-ok: A gépek, ahol a tesztek ténylegesen futnak.
Selenium tesztek típusai
Rögzítés és visszajátszás (Record & Playback)
Ezt a funkciót a Selenium IDE biztosítja.
A felhasználói műveleteket automatikusan rögzíti (kattintás, beírás, navigáció stb.).
Utána visszajátszható, így gyorsan lehet egyszerű teszteket készíteni.
Nem igényel programozási tudást, de kevésbé rugalmas.
Programozott tesztelés (WebDriver)
Itt kódban írjuk meg a teszteket.
Rugalmas, skálázható, integrálható CI/CD folyamatokba (pl. Jenkins).
Assert -> Ha a feltétel nem teljesül, a teszt megáll. -> Kritikus ellenőrzésekhez
Verify -> Ha a feltétel nem teljesül, a teszt tovább fut, de jelzi a hibát. -> Nem kritikus hibákhoz
Selenese
A Selenium IDE saját nyelve/parancskészlete.
Egyszerű parancsokat használ, pl.: open, click, type, verifyText
Támogat kommenteket is (pl. // jellel).
A Selenium Webdriver használatóról a gyakorlásaimat és jegyzeteimet itt találod.
Test layer – maga a teszt (JUnit/TestNG).
Page Object Model (POM) – UI elemek és műveletek külön osztályokban.
Ha változik a HTML, nem kell minden tesztet átírni, csak ezt az egy osztályt.
Utility réteg – pl. wait-ek, config, logger.
Ez az újrahasznosítható segédkód.
Driver kezelés – WebDriver setup/teardown.
Böngésző indítása és leállítása.
👉 Példa stack:
Java + JUnit/TestNG
Selenium
Maven/Gradle
CI/CD
CI (Continuous Integration):
minden commit után build + teszt fut
CD (Continuous Delivery/Deployment):
automatikus release pipeline
👉 Kapcsolat:
automatizált tesztek a pipeline részei
ha teszt fail → build fail
Az automatizált tesztelésben gyakran ezek a teszttípusok jönnek elő:
Unit teszt – egy kis egységet vizsgál, például egy metódust vagy osztályt.
Integration teszt – több komponens együttműködését ellenőrzi.
End-to-End (E2E) teszt – teljes felhasználói folyamatot vizsgál elejétől végéig.
Regression teszt – azt ellenőrzi, hogy egy módosítás nem rontott-e el korábban működő funkciókat.
Smoke teszt – gyors alapellenőrzés, hogy a rendszer fő funkciói működnek-e.
Sanity teszt – kisebb módosítás után célzott ellenőrzés, hogy az adott javítás rendben van-e.
UI teszt – felhasználói felület elemeinek működése és megjelenése.
API teszt – backend szolgáltatások, végpontok, request/response ellenőrzése.
Elsősorban fejlesztés alatti belső logikai ellenőrzésre.
Figyelem: Alapból ki van kapcsolva, a -ea (enable assertions) kapcsolóval kell futtatni a JVM-et.
Ellenőrzi, hogy a kódunk dob-e hiba esetén megfelelő kivételt.
// A metódus visszatér a kapott kivétellel, amit tovább vizsgálhatunk
Throwable exception = assertThrows(IllegalArgumentException.class, () -> {
myObject.doSomething(-1);
});
// Opcionális: a hibaüzenet pontos ellenőrzése
assertEquals("Negatív szám nem megengedett!", exception.getMessage());
Egy test mappád legyen, akár kicsi akár nagy betűs.
Ezután a playwright.config.js-ben csekold le ezt: testDir: './tests',
Így indítsd el a "Kattintgatós" módot
Live Server-en indítsd el az oldalt.
Kattints a bal oldali sávban a Testing (lombik) ikonra.
Az alsó részen keresd meg a "Record new" gombot.
Ekkor a Playwright megnyit egy üres böngészőt és egy "Playwright Inspector" ablakot.
Írd be a címsorba a helyi weboldalad címét (pl. http://127.0.0.1:5500).
Kezdj el kattintgatni: vegyél fel egy új questet, pipáld ki, töröld le stb.
Látni fogod, hogy az Inspector ablakban automatikusan generálódik a kód.
Ha végeztél, csak zárd be a böngészőt, és a VS Code-ban ott lesz az új tesztfájl a kész kóddal!
Bal oldalt frissítsd a test explorert és nyisd le a test részt ott láthatod az imént felvitt tesztedet.
Tesztek futtatása
Live Server-en indítsd el az oldalt.
Kattints a bal oldali sávban a Testing (lombik) ikonra.
A test melletti play ikonra kattints.
GitHub Actions
Ennek meg kell lennie:
.github/workflows/playwright.yml
A szóközöre és tabokra nagyon figyelj.
name: Playwright Tests
on:
push:
branches: [ main, master ] # Ha más a branch neve, akkor írd át.
pull_request:
branches: [ main, master ] # Ha más a branch neve, akkor írd át.
jobs:
test:
timeout-minutes: 60
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
with:
node-version: lts/*
- name: Install dependencies
run: npm ci
- name: Install Playwright Browsers
run: npx playwright install --with-deps
- name: Run Playwright tests
run: npx playwright test
- uses: actions/upload-artifact@v4
if: ${{ !cancelled() }}
with:
name: playwright-report
path: playwright-report/
retention-days: 30
Ez az útmutató, hogy mi alapján futtassa a GitHub a teszteket.
Amikor a terminálban telepítetted a playwright-ot (npm init playwright@latest), akkor yes-t kellett nyomni a GitHub Action-s kérdésre.
A README-dbe felülre ezt másold be és persze írd be a felhasználónevet és a reponevét.
A GitHub Actions egy üres szerveren fut, ahol nincs elindítva a Live Server, ezért a playwright.config.js fájlba a lentit írd bele, amivel megmondjuk a Playwright-nak, hogy indítsa el a webszervert a tesztek előtt.
export default defineConfig({
use: { //Fontos, hogy ne duplikáld a use részt!
//... korábbi sorok
baseURL: "http://127.0.0.1:8080", // Így nem kell mindig beírni.
actionTimeout: 10000, // 10 másodperc minden kattintásra/gépelésre
navigationTimeout: 15000,
// ... többi sorok
trace: "on-first-retry",
},
//... korábbi sorok
/* Run your local dev server before starting the tests */
webServer: {
command: "npm run start",
url: "http://127.0.0.1:8080",
reuseExistingServer: !process.env.CI,
stdout: 'ignore',
stderr: 'pipe',
},
// ... többi sor
});
A "projects: [..]" részen kommenteld ki a safarit és a firefox-ot, ha nem akarod a gépedre is telepíteni azokat.
Lépj bele a terminálban a mappába ahova a tesztet szeretnéd.
Írd be a projekt nevét. pl.: for-test
Framework: vanilla aztán javascript
Terminálba:
npm init playwright@latest
A zárójelben lévőket válaszold a terminál kérdéseire.
js (egyet le és enter), marad a test mappa (tab és enter), no github workflow (n), yes extension (y)
Egy test mappád legyen, akár kicsi akár nagy betűs.
Ezután a playwright.config.js-ben csekold le ezt: testDir: './tests',
TOOLS (Eszközök)
Pick locator: Ez a legpraktikusabb. Kattints rá, menj át a böngészőbe, és mutass rá az egérrel egy elemre (pl. a gombra vagy combo boxra). A VS Code-ban azonnal megjelenik a kód, amivel az adott elemet eléred.
Record new: Elindít egy üres tesztet és egy böngészőt. Amit a böngészőben csinálsz, azt élőben kódként rögzíti egy új fájlba.
Record at cursor: Ugyanaz, mint az előző, de nem új fájlt nyit, hanem a meglévő kódodba, a kurzor pozíciójához szúrja be az új lépéseket.
A fájlnevének mindig , így kell kinéznie: valami.spec.ts
Ezekben a projektekben a Spring Boot alapjait mutatom be gyakorlati példákon keresztül. A részletes magyarázatok és lépések a dokumentációkban találhatók, melyeket itt tekinthetsz meg:
Kiberbiztonsági eszközök:
Antivírus szoftverek
Behatolásérzékelő rendszerek (IDS/IPS)
Titkosítás
Képzések és tanfolyamok
Ingyenes források:
Cybrary
Cisco Networking Academy
Coursera
Minősítések:
CompTIA Security+
Certified Ethical Hacker (CEH)
Certified Information Systems Security Professional (CISSP)
Ezekkel versenyképesebbé válhatsz a munkaerőpiacon.
Gyakorlati tapasztalat
Laborkörnyezet létrehozása:
Saját virtuális laborkörnyezet, ahol tesztelheted a kiberbiztonsági technikákat.
Kali Linux vagy VirtualBox hasznos lehet.
CTF (Capture the Flag) versenyek:
Segítenek a gyakorlati készségek fejlesztésében.
A cél: megtalálni és kihasználni a biztonsági résekeket egy szimulált környezetben.
Doxxolás (doxxing):
Személyes információk illetéktelen közzététele (megfélemlítés, zaklatás, károkozás céljából).
Nevek, címek, telefonszámok, privát üzenetek vagy egyéb érzékeny adatok nyilvánosságra hozatala az áldozat beleegyezése nélkül.
Gyakran közösségi médiában vagy fórumokon történik, hogy megalázzák vagy támadások célpontjává tegyék az érintettet.
Törvénybe ütközhet, jogi következményekkel járhat.
A kiberbiztonság egy specifikus része, ahol a szakemberek célzott támadásokat hajtanak végre a rendszerek gyenge pontjainak feltárása érdekében.
Olvass angol nyelvű szakirodalmat.
Első körben érdemes a webes hekkeléssel kezdeni.
Alap szinten tudni kell egy-egy script nyelvet (pl.: ASP, vagy PHP).
A web nagy része PHP-ben van megírva. (Keretrendszer: Geany)
Hekkernek jó a "24 óra alatt tanuljuk meg a php-t", de programozónak nem jó, mert könnyű feltörni a kódokat, amik benne vannak (pl. SQL injection).
Az OWASP (Open Web Application Security Project) egy nonprofit szervezet, amelynek célja, hogy javítsa a webalkalmazások biztonságát.
Ajánlott elolvasni a Web Application Hacker's Handbook 2-t.
Ha már biztosan mozogsz a témában, akkor kezdj el Python-t tanulni, exploitokat írni.
Tor és a biztonság mítosza – mit érdemes tudni az etikus hackelés szemszögéből?
Sokan hiszik, hogy a Tor böngésző használata önmagában teljes védelmet nyújt az anonimitás megőrzésében. Valójában azonban ez messze nincs így.
Egy szakmai beszélgetésből is kiderült, hogy a Tor önmagában kevés: a hatóságok figyelhetik a forgalmat, és további biztonsági rétegek nélkül könnyen azonosítható lehet a felhasználó.
Minimális védelemként ajánlott:
külön router használata
VPN alkalmazása
MAC-cím maszkolása
további kiegészítő védelmi megoldások
Fontos kiemelni: már egy egyszerű portscan is bűncselekménynek számíthat, ha engedély nélkül végzik. Ez rámutat arra, hogy az etikus hackelés és az illegális behatolási kísérletek között rendkívül vékony a határvonal.
Napi használatra a legjobb, évente 3%-os kamatot kapsz a készpénzedért, amit naponta kapsz meg, viszont adóznod kell ebből 15% SZJA.
Lehet tőzsdén is kereskedni rajta, portfóliót építeni és ETF-ket vásárolni. Viszont a hasznosból adóznod kell, hosszabb távú befektetéseknél érdemes Lightyear-en TBSZ számlát nyilni, mert ha 5 évig bent tartod a pénzedet a portfóliodban, akkor adómentesen hozzá tudsz jutni a hozamodhoz.
Mivel nem magyar bank, ezért a TBSZ számlát neked kell bejelentened a NAV-nál és az éves adóbevallásodban feltűntetned.
Kedvezményes kupon kódok a Binance-hoz a leírásban és "
Hogyan érdemes használni a Binance felületét" videósorozat itt.
Ha valaki kezdő a tőzsdén, itt van néhány fontos tanács és lépés, amit érdemes megfontolnia:
Tanulás és Kutatás:
Alapok megértése: Ismerkedj meg a tőzsde alapjaival, például a részvényekkel, befektetési alapokkal, kockázattal és hozammal kapcsolatos fogalmakkal.
Források és oktatóanyagok: Számos könyv, online kurzus és oktatóanyag elérhető a tőzsdei kereskedésről. Használj ki ezeket az erőforrásokat.
Tervezés és Célkitűzések:
Célok meghatározása: Legyenek világos céljaid a tőzsdei befektetéssel kapcsolatban: mire szeretnél befektetni, mekkora hozamot vársz és mennyi idő alatt.
Befektetési terv: Készíts egy befektetési tervet, amely tartalmazza az eszközallokációt (melyik eszközökre fektetsz be), a kockázatkezelést és a hosszú távú stratégiádat.
Diverzifikáció:
Ne tegyél minden pénzt egy kosárba: Diverzifikálj, vagyis ne csak egyetlen részvénybe, hanem több különböző eszközbe is fektess be, hogy csökkentsd a kockázatot.
Befektetési alapok: Kezdésnek fontos lehet befektetési alapokba vagy ETF-ekbe való befektetés, mivel ezek több eszközből állnak össze, így diverzifikáltabbak.
Kockázatkezelés:
Csak befektetni, amit megengedhetsz: Ne fektess be olyan pénzt, amit szükséged van a mindennapi kiadásokra vagy fontos kötelezettségekre.
Stop-loss megbízások: Használd a stop-loss megbízásokat, hogy megvédhesd magad a nagy veszteségektől.
Kezdd kis lépésekkel és idővel tanulj:
Demó számla: Sok bróker kínál demó számlát, ahol virtuális pénzzel kereskedhetsz. Ez jó módja annak, hogy gyakorolj anélkül, hogy valódi pénzt kockáztatnál.
Fokozatosan növeld a kockázatot: Kezdd kis összegekkel és idővel, ahogy növekszik a tapasztalatod és magabiztosabb leszel, fokozatosan növeld a kereskedési pozíciók méretét.
Tanácsadás és Támogatás:
Kereskedési közösségek: Csatlakozz kereskedési közösségekhez, ahol másokkal megoszthatod tapasztalataidat és tanulhatsz másoktól.
Pénzügyi tanácsadó: Amennyiben szükségesnek érzed, kérj tanácsot pénzügyi tanácsadótól vagy befektetési szakértőtől.
Fontos megjegyezni, hogy a tőzsdei kereskedés kockázatokkal járhat, és nem mindig biztos a profit. Fontos, hogy alaposan tanulmányozzuk és értsük meg a tőzsdei kereskedés alapjait, mielőtt valós pénzzel kezdenénk kereskedni. A türelem, a folyamatos tanulás és a hosszú távú gondolkodásmód fontos a sikeres tőzsdei befektetésekhez.
A tőzsde egy olyan intézmény vagy platform, ahol a részvények, kötvények, árucikkek, devizák és más pénzügyi eszközök kereskedése zajlik. Az emberek és vállalatok itt vásárolnak és értékesítenek részvényeket vagy más értékpapírokat azáltal, hogy meghatározzák azok árát a kereslet és kínálat alapján.
A tőzsde szerepe az, hogy lehetővé tegye a befektetőknek, kereskedőknek és vállalatoknak, hogy pénzügyi eszközöket vásároljanak vagy adjanak el egymás között. Ezen kereskedési tevékenységek eredményeként az árak változnak, ami befolyásolja az adott eszközök értékét.
A tőzsde lehet helyi vagy nemzetközi, és elektronikus vagy hagyományos módon működhet. A legismertebb tőzsdék közé tartoznak a New York-i tőzsde (NYSE), a NASDAQ, a Londoni Értéktőzsde (LSE), a Tokiói Tőzsde (TSE) és más hasonló intézmények világszerte. Az itt zajló kereskedés befolyásolja a gazdaságot, befektetéseket és vállalati értékeket, és az árak változása számos tényezőtől függ, például a gazdasági feltételektől, vállalati teljesítménytől és piaci trendektől.
A tőzsde egy olyan intézmény vagy platform, ahol a részvények, kötvények, árucikkek, devizák és más pénzügyi eszközök kereskedése zajlik. Az emberek és vállalatok itt vásárolnak és értékesítenek részvényeket vagy más értékpapírokat azáltal, hogy meghatározzák azok árát a kereslet és kínálat alapján.
A tőzsde szerepe az, hogy lehetővé tegye a befektetőknek, kereskedőknek és vállalatoknak, hogy pénzügyi eszközöket vásároljanak vagy adjanak el egymás között. Ezen kereskedési tevékenységek eredményeként az árak változnak, ami befolyásolja az adott eszközök értékét.
A tőzsde lehet helyi vagy nemzetközi, és elektronikus vagy hagyományos módon működhet. A legismertebb tőzsdék közé tartoznak a New York-i tőzsde (NYSE), a NASDAQ, a Londoni Értéktőzsde (LSE), a Tokiói Tőzsde (TSE) és más hasonló intézmények világszerte. Az itt zajló kereskedés befolyásolja a gazdaságot, befektetéseket és vállalati értékeket, és az árak változása számos tényezőtől függ, például a gazdasági feltételektől, vállalati teljesítménytől és piaci trendektől.
Pénzügyi és tőzsdei elemző platform: https://finviz.com
A tőzsdével kapcsolatos alapfogalmak megértése fontos annak érdekében, hogy eligazodjunk a pénzügyi piacokon és a kereskedésben. Néhány alapvető fogalom:
Részvény: Egy vállalat tulajdonrészét jelenti. A részvényeket a tőzsdén keresztül lehet megvásárolni, és tulajdonosuk részesülhet a vállalat nyereségéből (osztalék), valamint részvényeinek értéke is változhat.
Kereslet és kínálat: A részvények árát a kereslet és kínálat egyensúlya határozza meg. Ha több ember szeretné megvásárolni az adott részvényt, mint ahányan el szeretnék adni, az ár emelkedhet, és fordítva.
Árfolyam: Ez az az ár, amelyen egy adott részvényt vagy más eszközt a piacon kereskednek. Az árfolyam folyamatosan változik a kereskedés során.
Index: Az index egy csoport vagy több részvény árfolyamának átlaga, és azt mutatja, hogy az adott részvények vagy árucikkek ára hogyan alakul.
Bika piac és medve piac: A bikapiac olyan időszak, amikor a piaci hangulat pozitív, és az árak emelkednek. A medvepiac viszont olyan időszakot jelöl, amikor a piaci hangulat negatív, és az árak csökkennek.
Kereskedési mennyiség: Ez azt mutatja, hogy egy adott időszak alatt mennyi részvényt vagy más eszközt kereskedtek.
Tőkeáttétel (Leverage): Ez az eszközökkel való kereskedés során alkalmazott technika, amely lehetővé teszi a kisebb összeggel rendelkezők számára, hogy nagyobb értékű pozíciókat nyissanak. Ugyanakkor a tőkeáttétel magában hordozza a magas kockázatokat is.
Kereskedési megbízások: Különböző típusú megbízások, amelyeket a tőzsdén lehet adni, például a piaci megbízás (azonnali vásárlás vagy eladás a legjobb elérhető áron), a limit megbízás (meghatározott áron történő vásárlás vagy eladás), stop megbízás (bizonyos árfolyam elérésekor aktiválódó megbízás) stb.
Ezek csak néhány alapvető fogalom a tőzsdével kapcsolatban. A részletesebb megértéshez és a sikeres kereskedéshez ajánlott alaposabban megismerni ezeket a fogalmakat és azok működését a tőzsdén
Az elején:
Revolut -> Revolut X (alacsonyabb az átváltási díj) és inkább tartsd dollárban a pénzt, ne váltsd vissza forintra.
SZJA 15 % Az adóbevalláskor az egyéb jövedelem mezőbe írd be az összeget, amennyi szereztél, 2022-től a kripto után is kell adózni.
Kereskedő botokat a Binance-en be tudod állítani, ez az egyszerűbb platform kezdőknek, viszont min. 320.000 Ft-al lehet elkezdeni. És át kell váltani pro-ra a bot használathoz.
CoinMarketCap: Friss infókat kapsz a piac állásáról.
Későbbi kereskedéshez:
Meta Trader 5
Trading 212 (Nincs havidíj, vagy inaktivitási díj. Overnight díj van.)
1000 Ft alatti adótartozást nem tart nyilván a nav.
Van külön kriptó és árfolyam nyereség mezők.
Hogyan töltsd le az adózáshoz szükséges dokumentumokat?
Revolut
Megtakarítások és alapok -> Továbbiak -> Kivonat -> Egybe letudod tölteni az összes valutáról a kivonatot, egy hosszú pdf lesz.
Flexible Cash Funds Statement -> Pénznemenként írd ki az összegeket:
Példa:
| Adott pénznem | HUF
Total Earned Interest | 1 (USD) | 400
Total Earned Interest | 1 (GBP) | 400
Total Earned Interest | 1 (GBP) | 400
Érdemes ellenőrizni, hogy a szolgáltatód levont-e bármilyen forrásadót külföldön.
Viszont a "Total Fees"-t ne vond le.
Trading
Három vonal -> Okmányok -> Számlakivonatok -> Éves -> Az "Éves beszámolót töltsd le.
Trading 212 Invest részen: "Lezárt eredmény", "Bonus", "Pénzvisszatérítés", "Készpénzkamat", kell adóznod. Ha más sorban is látsz összegeket, akkor azok után is kell adóznod!
Nyisd meg szerkesztésre az adóbevallásodat -> Bal oldalt keress rá a "Külföldről származó"
Külföldi kamat / Revolut jutalom / Trading “pénztárolásért járó bevétel”
eSZJA -> Bal oldalt keress rá a "külföldről" szóra. -> Katt a "I. KÜLFÖLDRŐL SZÁRMAZÓ BELFÖLDÖN ADÓKÖTELES KÜLÖN ADÓZÓ JÖVEDELMEK"
"172. sor -> Trading Invest "Lezárt eredmény"
"185. Egyéb külföldről származó forrásadós jövedelmek és ezek adója
Revolut+Trading
Jövedelem ezek ek az összegét írd be: Revolut Total Earned Interest minden pénznemét hufban amit a papíron látsz, ne te váltsd át. + Trading-en lévő Készpénzkamat összegét is add hozzá.
Adó részre a 15 %-át írd be.
eSZJA felületén keress rá bal oldalt a 19-re.
"19. sor "Bevétel" részre írd be a Trading Bonus és Pénzvisszatérítés összegét.
Költség: 0 Ft
Utána katt "A magánszemély szociális hozzájárulási adója (293. sor)" ->
"286. sorba írd be a bruttó éves munkabéredet az adóbevallásod első sorában látod.
"287. sorba írd be a Trading 212 Bonus+Pénzvisszatérítés összegét.
"289. sor 0 és 0
"293. sor IV. negyedévéhez írd be a Trading 212 Bonus+ Pénzvisszatérítés * 0,13 (13 %) Szocho
Egészpénztár megtakarítás szja-ban 20 %ot visszakapsz. Vigyázni kell vele, mert van havidíj és nem az egész befizetés megy számlára, levonják a kezelési költséget.
Appok:
Dualingo
RealLife English
Quizlet
Loora Ai-al lehet beszélgetni.
More
AnkiDroid More Gamification
Aniwatch
MangaToon
Discord (Engedélyezd az értesítéseket a telón.)
I’m working on... Éppen ...-on dolgozom
Let’s have a quick meeting. Tartsunk egy gyors megbeszélést.
Could you please check this? Meg tudnád nézni ezt, kérlek?
I’ll update you soon. Hamarosan frissítem az információt.
I’ve just finished the task. Épp most fejeztem be a feladatot.
I need some clarification. Szükségem van egy kis pontosításra.
It’s still in progress. Még folyamatban van.
It’s ready for review. Készen áll az ellenőrzésre.
I’ll take care of it. Majd én elintézem.
Thanks for your feedback. Köszönöm a visszajelzést.
I’ve found a bug. Találtam egy hibát.
I’m reproducing the issue. Újra előidézem a hibát.
I can’t reproduce the issue. Nem tudom újra előidézni a hibát.
The issue occurs only sometimes. A hiba csak néha jelentkezik.
The bug is still open. A hiba még nyitott.
The bug has been fixed. A hibát javították.
Please verify the fix. Kérlek, ellenőrizd a javítást.
The test passed. A teszt sikeres volt.
The test failed. A teszt sikertelen volt.
I’m running regression tests. Regressziós teszteket futtatok.
It works as expected. Úgy működik, ahogy kell.
I’ve added a new test case. Hozzáadtam egy új tesztesetet.
I’ll log the issue in Jira. Rögzítem a hibát a Jira-ban.
It’s a blocker / critical issue. Ez egy blokkoló / kritikus hiba.
The environment is down. A környezet nem elérhető.
Please check the logs. Nézd meg a logokat, kérlek.
The build was deployed successfully. A build sikeresen települt.
It needs more investigation. További vizsgálatot igényel.
The feature is not implemented yet. A funkció még nincs implementálva.
Let’s go through the test results. Nézzük át a teszteredményeket.
What’s the current status? Mi a jelenlegi állapot?
I’ll share my screen. Megosztom a képernyőmet.
Could you repeat that, please? Meg tudnád ismételni, kérlek?
I didn’t catch that. Nem hallottam pontosan.
I agree with that. Egyetértek ezzel.
That makes sense. Ez logikus / érthető.
Let’s prioritize this task. Prioritást adjunk ennek a feladatnak.
I’ll check it and get back to you. Megnézem, és visszajelzek.
Let’s keep it in mind for the next sprint. Tartsuk észben a következő sprintre.
Túl sok időt töltenek az alapok megtanulásával. (Elég, ha W3 school-on megnézni a html, css és javascript fejezeket.)
Nem kell elsőre a full stack fejlesztést megtanulni, elég a front-end-et és helyezkedj el azzal.
Higgy a folyamatban! (Menj végig a lépéseken, a végén töltsd fel a projeketedet pl. insta clone)
STEP 2: HTML Tags What Is Web Developer? How Web Works? How Internet Works? What Is HTML, CSS And JavaScript? Head & Body Headings Paragraph List Image Anchor Form Element Tables Script Canvas Audio Video Doc Type Inline Style Block Vs Inline Path Defining
STEP 3: CSS
STEP 4: JavaScript Selectors Insert CSS File Color Fonts List Background Border Margin Padding Height Floats Positions Display Box Model Flexbox Animation Pseudo Class Media Query Variable Data Types Array Array Methods Object Conditions Loops Functions Call Stack Events Arrow Functions Class Object-Oriented ES6 DOM Callback Promise Http Debugging
STEP 5: Other Topics
STEP 6: Before Interview Bootstraps Unit Testing Github React Or Angular Redux/Ngrx Node.Js Firebase Npm, Webpack, Hosting Domain Personal Projects Online Portfolio
#100dayofcodingchallenge
Get Real Experience: Do Works For Free. Work For Friend & Family. Open Source Contribution Prepare For Coding
További program ötletek:
Számkitalálós program. Ide kattints gomb, először kicsi a gomb, majd amikor rákattint a felhasználó, akkor kiírja, hogy mennyi idő alatt nyomott rá.
Ha rossz helyre kattintott, akkor egyre nagyobb lesz a gomb.
A WebStorm egy professzionális integrált fejlesztői környezet (IDE), amelyet a JetBrains fejlesztett ki, és kifejezetten webfejlesztéshez készült. Fizetős.
HTML: A játék alapstruktúráját hozod létre (pl. gombok a "kő", "papír" és "olló" választásához).
CSS: A játék kinézetét tervezed meg.
JavaScript: A játék logikáját programozod meg (pl. véletlenszerű választás a gép részéről, győztes meghatározása).
A legtöbb akadály mentális. Egyszerűen csak el kell kezdeni. Problémákat kell megoldani. Meg kell nézni, hogy mi mit csinál. Mi mire jó, egy idő után össze fog állni a kép.
Fontos, hogy projekt alapon tanulj.
Az óra előtt rászánsz egy fél órát, hogy megértsd az anyagot, lényegét, felépítését. Figyelj a tanárra, nem kell mindent leírni, csak azt ami segít a tananyag megértésében. Írd le a gyakorló kérdéseket.
Azonnali ismétlés (Még aznap. Próbáld meg megválaszolni a leírt kérdéseidet.)
Cipősdoboz módszer. Előtesztelés. Kis szakaszonként ismételd el az anyagot-> Ne csak gondolatban, írd le, vagy mond ki hangosan.
Készíts gondolattérképet, legyen vizuális, használj színeket. Ne legyen tele az apróbb részletekkel. Egy témáról, ne csak egy térképen legyen.
Használj tanuló kártyákat. Tömör, egyértelmű, készíts sajátokat.
Használd a Feynman módszert. Barátoknak, családnak, képzeletbeli embereknek magyarázd el az anyagot egyszerűen, mintha egy óvodásnak magyaráznád.
Oldj meg gyakorló feladatokat, vagy gyakorló teszteket.
Ez a videó 7 alapvető kódolási projektet mutat be, amelyeket érdemes megépítened, ha el akarod sajátítani a programozás alapjait. A készítő hangsúlyozza, hogy ezek a feladatok a tanulást szolgálják, és nem feltétlenül az önéletrajzba valók.
Egyszerű számológép alkalmazás: Segít elsajátítani a szintaxist és az alapvető számtani műveleteket.
Kvíz alkalmazás: Megtanítja a felhasználói bevitel kezelését és a feltételes logikát.
Teendőlista (To-do list): Segítségével megismerheted az alapvető CRUD műveleteket (létrehozás, olvasás, frissítés, törlés) és az adattárolást.
Élő valutaátváltó: Fejleszti az API integrációs készségeidet.
Időjárás-előrejelző alkalmazás: Szintén az API-k használatát gyakoroltatja, és bevezet a helymeghatározási szolgáltatások használatába.
Blog platform: Megtanít a felhasználói bejelentkezés kezelésére és az adatok tartós tárolására.
Teljesen működő e-kereskedelmi platform: Ez a legösszetettebb projekt, amely magában foglalja a fizetési integrációt, a felhasználói hitelesítést és az adatbázisokkal való munkát.
A videó végén a készítő megjegyzi, hogy ha már rendelkezel az alapokkal és az önéletrajzodhoz keresel komolyabb ötleteket, érdemes körülnézned neves egyetemek (pl. Harvard, MIT) hackathon projektjei között, vagy inspirálódni a Product Hunt weboldalon.
