A fejlesztői környezet kialakítása
Sor- Témakör
szám
Google Chrome
Visual Studio Code
Visual Studio Code Extensions
Live Server Extension
Node.js
Visual Studio Code user interface
Git
GitHub
Egy GitHub repository klónozása
Egy GitHub repository forkolása
Git - fájlok állapotai
Link
https://www.google.com/chrome/
https://code.visualstudio.com/
https://marketplace.visualstudio.com/VSCode
https://marketplace.visualstudio.com/items?
itemName=ritwickdey.LiveServer
https://nodejs.org/en/
(Ellenőrzés: Nyiss egy terminál ablakot.
Program verziójának ellenőrzése: node -v
Csomagtelepítő ellenőrzése: npm -v)
https://code.visualstudio.com/docs/getstarted/use
rinterface
https://git-scm.com/download/win
https://github.com/
https://guides.github.com/activities/hello-world/
https://git-scm.com/book/en/v2/GitHub-
Account-Setup-and-Configuration
1. A klónozható url kimásolása a GitHub
oldaláról.
2. Parancssor nyitása a sajátgépen.
3. Betallózás a kívánt könyvtárba.
4. Klón parancs: git clone <repo_url>
5. Létrejön az új mappa, a neve
megegyezik a repo nevével.
A forkolás nagyon hasonló a klónozáshoz, csak
itt nem én hozom létre a kezdő tartalmat. Valaki
másnak kiválasztom a repoját, majd egyszerűen
rányomok a Fork gombra. Így létrejön egy új
repo a saját nevem alatt, de az eredeti repo
tartalmával. Innen már én fejlesztem tovább az
alkalmazásomat, a módosításaim nem lesznek
hatással az eredeti, forkolt repora.
https://git-scm.com/book/en/v2/Git-Basics-
Recording-Changes-to-the-Repository
Egy fájl négy állapotban lehet a gépünkön:
Untracked: a Git nem törődik a fájllal. Ez
újonnan létrehozott fájloknál jellemző.
Unmodified: a Git követi a fájlt, és mi nem
módosítottuk azt. Ez az újonnan letöltött fájlok
állapota.
Modified: a Git követi a fájlt, és mi
módosítottuk.
1
 Staged: a Git követi a fájlt, mi módosítottuk, és
a módosítás be fog kerülni az adatbázisba.

A git munkafolyamat új fájlok esetében:

1. Létrehozunk egy új fájlt
2. git add parancssal hozzáadjuk a staging
area-hoz
3. git commit paranccsal a staging area
tartalmát hozzáadjuk az adatbázishoz

Meglévő fájl esetében:

1. Módosítjuk a fájlt
2. git add parancssal hozzáadjuk a staging
area-hoz
3. git commit paranccsal a staging area
tartalmát hozzáadjuk az adatbázishoz

Lokálisan: git status --help

Lokálisan: git add --help
Lokálisan: git commit --help
Git szinkronizálás https://git-scm.com/book/en/v2/Git-Basics-
Working-with-Remotes

Ismerjük a commit parancsot, amivel a

változtatásainkat tudjuk véglegesíteni a helyi
gépünkön.
A git fetch parancs megnézi, milyen változások
történtek a szerveren. Ezeket a változásokat le is
tölti, de nem nyúl hozzá az aktuális
munkánkhoz, a working directory nem változik
a hatására.
A git pull parancs letölti a változásokat a
szerverről, és integrálja a saját munkánkba.
Fontos különbség a fetch parancshoz képest,
hogy a pull nem egy biztonságos parancs,
változni fog a mappánk tartalma, ha kiadjuk.
Mindig commitoljunk, mielőtt kiadnánk a pull
parancsot!
A git push parancs feltölti a commitjainkat a
szerverre. Jegyezzük meg, csak azok a
változások mennek fel, amiket commitoltunk!
Mielőtt pusholni próbálnánk, kérjük el a
szervertől a változásokat a pull paranccsal!
Lokálisan: git fetch --help
Lokálisan: git pull --help
Lokálisan: git push --help

2
Sprint 1 - Egy statikus HTML oldal készítése és publikálása
Sor- Témakör Link
szám
HTML5 példaoldalak https://codepen.io/cPenFrontEnd/pen/yyzQrK
https://code-maven.com/html-skeleton
https://html5bones.com/
Szövegformázó elemek - header A címsorok neve h (heading) betűvel kezdődik.
A h1 a legnagyobb, utána csökkenő sorrendben
egészen a h6-ig.

Általában a tartalom tagolására használjuk őket.

Blokk és inline elemek
A Google és a többi kereső is kiemelten
figyelmbe veszi őket, ha például a címsor
szövege nincs összefüggésben az alatta található
tartalommal, a keresők hátrébb sorolják az
oldalt, úgymond büntetik.
https://developer.mozilla.org/en-
US/docs/Web/HTML/Block-level_elements

A blokk szintű elemek mindig új sorban

kezdődnek, és akkor sem kerülnek másik elem
mellé, ha amúgy elférnének tőle. Azaz előttük
utánuk sortörés van és általában nagyobb
margóval rendelkeznek, távolabb vannak a többi
elemtől.
Minden elem ami nem blokk szintű inline. Amit
meg kell róluk jegyezni, hogy sorban egymás
mellé teszi őket a böngésző, egészen addig amíg
kiférnek. Ha már nem, akkor egy új sorban
folytatja a megjelenítésüket.
Chrome DevTools Megnyitás: F12

A Chrome DevTools segít neked abban, hogy át

URL - Uniform Resource Locator
tudd tekinteni az alkalmazásod felépítését, vagy
mag tudd keresni a hibákat. Ha hibásan működik
valami, semmiképp sem szabad megijedni. Meg
kell nyitni a megfelelő fejlesztőeszközt és
megkeresni a hiba forrását. A hibákból mindig
tanulunk valamit, így azok hasznosak a
számunkra.
A tartalmak az interneten bárhol lehetnek.
Hogyan találjuk meg őket? Ehhez kell az URL,
ha ismerjük az adott oldal vagy kép vagy film
vagy bámi URL-jét, akkor a böngészőbe beírva
meg tudod nézni vagy le tudod tölteni.
Fontos, hogy minden erőforrásnak legyen egyedi
azonosítója. Erre való az URL.

3

Listák
Képek elhelyezése a weboldalon
Linkek elhelyezése a weboldalon
Az egyes HTML elemek egymásba
ágyazása
Táblázat készítése
Az URL részei
Egy példa:
https://www.training360.com/tanfolyami-naptar
A https a használandó protokoll. A protokoll
neve után kettőspont (:) írandó.
A training360.com a célgép tartományneve. Ez
elé két perjel (//) írandó.
A 443 a célgép azon hálózati portszáma, amin
kérésünket várja; ez elé kettőspont (:) írandó.
Ezt a részt gyakran teljesen elhagyhatjuk,
például esetünkben a HTTPS protokoll
alapértelmezett portszáma a 443.
A /tanfolyami-naptar a kért elérési út a célgépen.
Ez a rész mindig a perjellel (/) kezdődik.
UL - Unordered List
Elem: <ul></ul>
Lista elemei: <li></li>
OL - Ordered List
Elem: <ol></ol>
Lista elemei: <li></li>
https://www.w3schools.com/tags/tag_ul.asp
https://www.w3schools.com/tags/tag_ol.asp
https://www.w3schools.com/tags/tag_dl.asp
https://www.w3schools.com/tags/tag_img.asp
Elem: <img>
Képek megjelenítésére való. Self closed elem,
azaz a végére nem kell másik </img> tag. Az src
attribútum adja meg, hogy honnan kerüljön a
kép betöltésre.
https://www.w3schools.com/tags/tag_a.asp
Elem: <a></a>
Kötelező attribútumok:
href: az URL, ahová kattintás után jutsz.
https://www.w3schools.com/html/html_elements
.asp
Az XML jellegű struktúrák lényege, hogy az
elemeket egymásba lehet ágyazni. Így már
beszélhetünk szülő és gyermek elemekről,
aszerint, hogy melyik elem melyikbe van
beágyazva.
https://www.w3schools.com/html/html_tables.as
p
4

Egy táblázat részei
Sorok és oszlopok összevonása
Az elkészített oldal publikálása és
megosztása
http://tamop412.elte.hu/tananyagok/weblapkeszi
tes/lecke8_lap1.html
Elem: <table></table>
A táblázatokat strukturált adatokhoz használjuk.
Vannak sorok, oszlopok, és általában ugyanazok
az adatok szerepelnek minden sorban.
https://www.w3schools.com/tags/tag_table.asp
http://tamop412.elte.hu/tananyagok/weblapkeszi
tes/lecke8_lap1.html
Fejléc: <thead></thead>
Sor: <tr></tr>
Fejléc cella: <th></th>
Cella: <td></td>
https://www.w3schools.com/tags/att_td_rowspa
n.asp
https://www.w3schools.com/tags/att_td_colspan.
asp
http://tamop412.elte.hu/tananyagok/weblapkeszi
tes/lecke8_lap1.html
https://help.github.com/en/github/working-with-
github-pages
5
Sprint 2 – A CSS alapjai (Cascading Style Sheets)
Az Inline stílusok
Egy CSS stíluslap elkészítése
A CSS szintaxisa és felépítése
Képpontok - px
A különböző betűtípusok
Saját betűkészletek használata
Szövegformázás
6
https://www.w3schools.com/css/css_howto.asp
Attribútum: style
https://www.w3schools.com/css/css_intro.asp
A CSS stíluslap egy külön fájl, amiben leírhatod
az oldal megjelenését.
https://www.w3schools.com/cssref/pr_font_font-
family.asp
ha olyan betűtípust szeretnék használni, ami
nincs telepítve az adott számítógépen, akkor a
problémának a megoldására van a "fallback
system", ami azt jelenti, hogy több betűtípust is
megadhatsz felsorolás szerűen, és ha az egyiket
nem találja a böngésző, akkor megpróbálkozik a
következővel.
https://www.w3schools.com/cssref/css3_pr_font
-face_rule.asp
@font-face - ezzel a CSS utasítással új betű-
típust tudsz meghatározni. Meg kell adnod a
nevét és a helyet, ahonnan a böngésző be tudja
tölteni. Nem fontos, hogy a név egyezzen a
betűtípus fájl nevével, érdemes rövidebb,
egyszerűbb nevet adni neki.
https://www.w3schools.com/css/css_font.asp
https://www.w3schools.com/css/css_font_style.a
sp
https://www.w3schools.com/css/css_font_size.as
p
font-family: a betűtípus beállítása
font-style: normal|italic (normál vagy dőlt)
font-weight: normal|bold vagy 100 - 900-ig
számokkal megadva a betűvastagság
font-size: px|em|rem|vw|% a betűméret
megadása
color: a betűszín
Külső betűtípusok használata - Google
Fonts
Ismerkedés az id-val
A HTML elemcsoportok formázása
osztályok segítségével
Tartalomtagolás div és span
segítségével
HTML elemek formázása - margin,
border, padding
https://fonts.google.com/
Közel 1000 ingyenes betűtípust tartalmazó
válogatás
Jele a CSS-ben: #
A HTML szabvány szerint minden elemnek
adhatsz egyedi azonosítót az oldalon, ez az ID.
Ezt az ID-t a CSS fájlban, amikor kiválasztasz
egy elemet, kettőskereszttel jelölheted. Ha pél-
dául az id az, hogy head, akkor a szelektora az
lesz a CSS-ben, hogy #head. Fontos korlátozás,
hogy egy ID-t csak egyszer használhatsz, mert
az egyértelműen tartozik egy elemhez.
Class selector
Jele: .
Elemek kiválasztása az osztály alapján. Ha az
osztályra adom meg a stílusokat, automatikusan
minden ilyen osztályú elemcsoport megkapja
őket.
https://www.w3schools.com/tags/tag_div.ASP
https://www.w3schools.com/tags/tag_span.asp
A <div> egy osztást (division) hoz létre az
oldalon. Blokk szintű elem és alapból nagyon
kevés beállítása van.
A <span> inline elem. Akkor hasznos, ha egy
szövegből egy részletet szeretnél másképp
megformázni.
http://www.w3schools.com/css/css_margin.asp
http://www.w3schools.com/css/css_border.asp
http://www.w3schools.com/css/css_padding.asp
CSS Box Model: margin,border,padding,content
margin: az elhagyás az elem körül.
• oldalankénti megadás: margin-top,
margin-right, margin-bottom, margin-left
• megadás egyben: margin: top right
bottom left
• megadás páronként: margin: top-bottom
right-left
border: szegély (alapérték 0px)
• egy utasítással: border: style width color;
• sarkak kerekítése: border-radius: 10px;
7

HTML elemek formázása – box-
shadow
Relatív mértékegységek használata
Láthatóság és megjelenítés
HTML elemek pozicionálása
Színek megadása - RGBA
• oldalanként: border-left: style width
color;
• tulajdonságonként: border-style, border-
width, border-color
padding: az elemen belül ennyivel beljebb
kezdődik a tartalom. Az elem méretét akkor
növeli, ha a box-sizing: border-box; nincs
beállítva.
http://www.w3schools.com/cssref/css3_pr_box-
shadow.asp
A box-shadow az elemet körülvevő vetett
árnyék. Az alábbi séma szerint lehet megadni:
box-shadow: none|h-shadow v-shadow blur
spread color|inset|initial|inherit;
• %: a méretet a befogadó elem méretének
százalékában adja meg.
• em: a betűméret, 1 esetén megegyezik,
de például az 1.5 másfélszeres.
• rem: root em, nem a szülő elem em-jét
nézi, hanem a <html> elemét
http://www.w3schools.com/css/css_display_visi
bility.asp
A display tulajdonság az elem megjelenítését
befolyásolja. Azt mondja meg, hogy a böngésző-
nek figyelembe kell-e vennie az elemet az oldal
megjelenítésekor, és ha igen, akkor hogyan.
Használata: display: inline|block|flex|inline-
block|none; (A none érték azt írja elő, hogy nem
kell megjeleníteni az elemet.)
A visibility csak a láthatóságot módosítja. Ha
elrejtjük vele az elemet, akkor a helyfoglalás
megmarad. Használata: visibility: visible|hidden|
collapse|initial|inherit;
• position: static; ez az alapértelmezett, a
helyzet a többi elemtől függ.
• position: relative; a helyzet a saját
normál pozíciótól függ.
• position: fixed; a böngészőablakhoz
képest helyezkedik el.
• position: absolute; a helyzet az első nem
static elemtől függ
RGB (red, green, blue) színmegadás:
• vörös: rgb(255, 0, 0)
• zöld: rgb(0, 255, 0)
• kék: rgb(0, 0, 255)
8

Színek megadása – HEX
A weboldal hátterének formázása
A többszörösen egymásba ágyazott
szelektorok
Az attribútum szelektor
• sárga: rgb(255, 255, 0)
• fehér: rgb(255, 255, 255)
• fekete: rgb(0, 0, 0)
Az átlátszóság mértékét is tudjuk állítani a
színnel együtt, akkor egy negyedik értéket is
megadunk: ez az alpha csatorna, ami 0-1 között
lehet. - pl. rgba(255, 128, 44, 0.2)
Minimálisan látszik át: rgba(255, 128, 44, 0.95)
Ez pedig teljesen átlátszó: rgba(255, 128, 44, 0)
https://www.google.hu/search?
q=rgb+to+hex&oq=rgb+to+hex&aqs=chrome..6
9i57.2103j0j7&sourceid=chrome&ie=UTF-8
Pár átváltás a kettő között:
• rgb(255, 255, 255) = #FFFFFF fehér
• rgb(66, 134, 244) = #4286f4
• rgb(244, 92, 66) = #f45c42
• rgb(0, 0, 0) = #000000 fekete
https://www.w3schools.com/cssref/css3_pr_bac
kground.asp
https://developer.mozilla.org/en-
US/docs/Web/Guide/CSS/Getting_started/Select
ors
Előfordul, hogy egy szelektorral nem tudod
kijelölni az elemet. Ekkor pontosabban kell
rámutatnod az elemre, pontosabban kell speci-
fikálnod. Egyszerre több szelektort használsz:
• a.menu-link:hover
• input.form-control[type=email]:focus
A szelektort egybeírjuk, ha egy elemre vagy
elem-csoportra vonatkozik.
Van, hogy csak egy bizonyos elemen belül
szeretnél dolgozni. Ekkor először a szülőt kell
megadnod.
A login azonosítójú formon belüli összes input
elem megadása: form#login input
A > jel csak a közvetlen gyerekeket jelöli, az
unokákat már nem ;) form#login > input
https://developer.mozilla.org/en-
US/docs/Web/CSS
https://developer.mozilla.org/en-
US/docs/Web/Guide/CSS/Getting_started/Select
ors
9
 Attribute szelektor jele: [ ]
Az elemet valamilyen tulajdonsága alapján
választja ki. A tulajdonság nevét és értékét
egyenlőségjellel elválasztva szögletes zárójelek
között adjuk meg. [type='button']
Ha nem adunk meg értéket, akkor azokat az
elemeket jelöli ki, ahol a tulajdonság létezik.
[disabled].

Előnye: külön formázást adhatunk meg egy

elemnek eltérő tulajdonságok esetén.
Hátránya: böngésző támogatása nem teljesen
egységes.
Szövegek helyettesítése a https://www.w3schools.com/cssref/css_selectors
szelektorokban .asp

[attribute⁼value] Példa: a[href^="https"]

Kiválasztja az összes olyan elemet, aminek az
adott attribútuma a megadott szöveggel
kezdődik.

[attribute$=value] Példa: a[href$=".pdf"]

Kiválasztja az összes olyan elemet, aminek az
adott attribútuma a megadott szöveggel
végződik.

[attribute*=value] Példa: a[href*="training360"]

Kiválasztja az összes olyan elemet, aminek az
adott attribútuma a megadott szöveget bárhol
tartalmazza.
Pszeudo szelektorok https://www.w3schools.com/cssref/css_selectors
.asp
Fontosabb pseudo szelektorok:
• :hover - ha az elem fölé viszik az egeret,
• :visited - azok a linkek, amelyekre már
kattintottak,
• :active - ha a felhasználó használ egy
elemet, mondjuk rákattint,
• :focus - elsősorban input mezőknél, ha
éppen használjuk,
• :first-child - a szülő elem első gyereke,
• :last-child - a szülő elem utolsó gyereke,
• :nth-child(n) - az n-edik gyereke a szülő
elemnek,
• :empty - olyan elem, aminek nincs
gyereke, azaz nem tartalmaz beágyazott
elemet,
• :checked - a kiválasztott checkbox,

10

Sprint 4 – Űrlapok készítése
Az űrlapok áttekintése, haszna
A label
A checkbox és a radio
Fieldset, legend
A Bootstrap megismerése
11
• :disabled - letiltott elem.
https://www.w3schools.com/html/html_forms.as
p
https://developer.mozilla.org/en-
US/docs/Web/Guide/HTML/Forms
Űrlapot a form elem használatával hozhatunk
létre. Az űrlapon belül vannak a beviteli mezők,
listák.
Az input elem az adatok kézi bevitelére szolgál.
Az input mezőket címkével láthatjuk el, ez a
label elem. Az input elem fontos tulajdonságai:
name: az adat neve, későbbi azonosításhoz kell.
type: az adat típusa, lehet text, password, radio
stb.
https://developer.mozilla.org/en-
US/docs/Web/HTML/Element/input/checkbox
Egy input elem, amelynek a típusa: checkbox. A
checkbox önálló elem, ha bepipáljuk az azt
jelenti, hogy igent mondtunk a kérdésre.
A radio esetében több választási lehetőséget
kínálunk fel, amelyek közül csak egyet lehet
választani. A radio esetén fontos, hogy a name
tulajdonság az adott csoportba tartozó összes
radio-nál azonos legyen.
Ha beállítjuk a value atrribútumot, alapértel-
mezett értéket adhatunk az input elemnek.
Ha bejelölünk egy radio vagy checkbox elemet,
felveszi a checked tulajdonságot. Viszont ezt
nem csak automatikusan veheti fel, mi is
megadhatjuk, hogy alapból be legyen jelölve.
Csak hozzá kell adnunk az elemhez
https://www.w3schools.com/tags/tag_fieldset.as
p
A fieldset segítségével csoportosítani tudjuk a
logikailag összetartozó űrlapelemeket, a legend
segítségével pedig ezekhez a csoportokhoz
tudunk feliratot készíteni. A legend mindig a
fieldset elemen belül kell hogy legyen!
http://getbootstrap.com/getting-started/
A CSS keretrendszerek gyakorlatilag előre
 megírt .css fájlokból állnak. A mi dolgunk, akik
használjuk őket, csak annyi, hogy a HTML
elemeket az előre meghatározott osztályokhoz
rendeljük.
A CDN a tartalom továbbító hálózat rövidítése.
Ha lekérsz rajta keresztül egy Bootstrap fájlt,
akkor igyekszik mindig a legközelebbi szerver-
ről visszaküldeni neked, hogy minél gyorsabban
megkapd. Hátránya: nem garantálja, hogy a fájl
mindig fent lesz a szervereden, így tesztelési
vagy oktatási célra alkalmas, éles rendszerhez
pedig saját vagy fizetett CDN ajánlott.
Ha a Bootstrap fájlokat a saját szervereden
akarod elhelyezni, akkor először le kell őket
töltened.
https://github.com/twbs/bootstrap/archive/v4.4.1
.zip
Javaslat: mindig készíts egy lib mappát, ahol
azokat a fájlokat tárolod, amelyeket nem fogsz
módosítani. Így elkerülheted, hogy össze-
keveredjenek a saját munkáddal és sokkal
könnyebb lesz karbantartani a frissítéseket.
Léteznek automatikus csomagkezelők, amelyek
egy paranccsal rávehetők, hogy letöltsék a külső
alkalmazásokat. Ilyenek például: NPM.
https://www.npmjs.com/

A Bootstrap esetében fontos, hogy mindig

igazodik az ablak szélességéhez, azaz a víz-
szintes görgetést elkerüli. Így mobilon is
könnyen használható lesz az oldal. Ehhez be kell
állítani egy meta elemet az oldal fejlécében:
<meta name="viewport"
content="width=device-width, initial-
scale=1">
A Bootstrap rácsrendszere (grid system) https://getbootstrap.com/docs/4.4/layout/grid/

Ha új tartalmat szeretnél létrehozni, akkor elő-

ször mindig kell egy sor, amibe beteszed az osz-
lopokat. Ez egy div, amit a row osztályhoz kell
rendelned: <div class="row"></div>
Az oszlopokat soha ne önmagukban használd,
hanem mindig egy soron belül. Ezek is div-ek,
és col-* kezdetű osztályokhoz kell rendelned
őket. A Bootstrap minden sort 12 oszlopra
oszt fel! Öt méretosztályt különböztet meg az
oldal szélessége alapján: A col-sm-12 azt jelenti,
hogy telefon méretben teljes szélességű. A col-
xl-3 nagy képernyőn 1/4 szélességű, mert a 12/3

12

A navigációs sáv – Navbar
Bootstrappel formázott értesítések
Bootstrappel formázott táblák
13
= 4. A col-md-6 col-sm-12 közepes képernyőn
1/2, kicsin pedig teljes szélességű.
A Mobile first kifejezés azt jelenti, hogy ha csak
a telefon méretre adod meg az oszlopok széles-
ségét, akkor az összes nagyobb méret esetén is
az marad érvényben. De ha mondjuk megadod
col-md esetén is az oszlopok számát, de col-lg
esetén nem, akkor az lg esetén is az md marad
érvényben. Tehát alulról felfelé nézi a beállí-
tásokat, mindig a kisebb az erősebb.
https://getbootstrap.com/docs/4.3/components/n
avbar/#supported-content
Először be kell szerezned a példakódot, ami
előre meg van írva, csak be kell illesztened a
forráskódodba. Érdemes egyből az oldal tetején,
azaz rögtön a <body> tab után elhelyezni, mivel
általában a navigációval kezdődik az oldal.
A Navbar részei:
Brand - Ez a cég vagy a szolgálatás fantázia-
neve. Ez van rögtön balról az első helyen.
Érdemes tehát átírni a kívánt névre. Állítsd be a
href="/" attribútumot, mivel a brand szövegére
kattintva az emberek a főoldalra juthatnak.
Linkek - A linkek közül az első általában a
Home feliratú, ennek a href="/" beállítást
célszerű adni, ahogy a brand-nek is.
Search - Igény esetén meg lehet hagyni a kereső
blokkot is, ami egy beviteli mezőből és egy
gombból áll.
https://getbootstrap.com/docs/4.4/components/al
erts/
Két osztályt kell használnod. Az első alapvetően
formázza meg az alertet, a második pedig a
színét állítja be. A kódban az összes színössze-
állításra van példa, ezek közül leggyakrabban a
primary, success, danger, esetleg a warning
osztályúakat fogod használni. Megjegyzés:
vigyázz, mert mint minden div, ez is blokk
szintű. Ha nem akarod, hogy teljes szélességű
legyen, tedd egy keskenyebb col-ba.
https://getbootstrap.com/docs/4.4/content/tables/
A Bootstrap-nek meg kell mondani, melyik
táblákat formázza meg. Ezt a table osztály
hozzáadásával teheted meg. Csak akkor fogja
megfelelően formázni a táblázatodat, ha

Bootstrappel formázott űrlapok
Bootstrappel formázott gombok
Bootstrappel formázott ikonok
14
<thead></thead> és <tbody></tbody> elemekre
bontod. A thead-en belül tr és th elemekkel
dolgozz, a tbody-ban pedig a megszokott
módon, tr és td elemekkel.
• Csíkozott (minden második sor kicsit
sötétebb): table-striped
• Szegélyezett (látszanak a cellák
szegélyei): table-bordered
• Hovered (a sor beszürkül, ha fölé viszed
az egeret): table-hover
• Tömör (kisebb paddingot hagy a
cellákon): table-sm
Ha a lenti osztályokhoz rendeled a sort vagy a
cellát, a háttérszíne is változik:
• table-active : #f5f5f5
• table-success : #dff0d8
• table-warning : #fcf8e3
• table-danger : #f2dede
• table-info : #d9edf7
https://getbootstrap.com/docs/4.4/components/fo
rms/#form-controls
Bootstrap esetén az űrlap vezérlőelemeit (input,
label, select stb.) a <div class = "form-
group"></div> elemen belül kell elhelyezned. A
form-group-on belül a konkrét beviteli elem a
form-control osztályhoz kell hogy tartozzon.
Alap űrlap: a vezérlők (input, select, stb...) a
label-ek alatt vannak.
form-inline: a label és vezérlő sorban van.
form-horizontal: a label és vezérlő egymás
mellett vannak (ebben az esetben a labelnek be
kell állítani a szélességét egy col-* oszállyal és a
vezérlőt div-be kell tenned).
Form vezérlő elemek:
• checkbox: checkbox osztályú div-en
belül, label-ben kell elhelyezned.
• radio: ugyanaz, csak radio osztállyal.
• <select></select>: csak hozzá kel adnod
a form-control osztályhoz.
• <textarea></textarea>: szintén form-
control osztály.
https://getbootstrap.com/docs/4.4/components/b
uttons/
https://fontawesome.com/
https://codepen.io/cherryapp/pen/xxGeXzp

Sprint 5 – Űrlapok készítése JavaScript segítségével
A JavaScript áttekintése
SCRIPT elem létrehozása
Változók deklarálása és definiálása - let https://www.w3schools.com/js/js_let.asp
Változók deklarálása és definiálása -
const
15
1. Ágyazd be a CSS-t: <link
rel="stylesheet"
href="https://use.fontawesome.com/relea
ses/v5.8.1/css/all.css">
2. Válaszd ki a neked tetsző ikont a listából
3. Illeszd be a doksi alapján: <i class="fas
fa-cart-arrow-down"></i>
https://www.w3schools.com/js/js_intro.asp
Nem teljes a magyar fordítás itt:
https://developer.mozilla.org/hu/docs/Web/JavaS
cript/a_javascript_ujboli_bemutatasa
https://www.w3schools.com/js/js_whereto.asp
A script elem:
• Inline kód - Ekkor egy script elemet
hozol létre a head vagy body elemen
belül és ennek a tartalma lesz a js kód.
• Külső (external) JavaScript - Itt pedig
egy külön fájlt hozol létre és azt szúrod
be a HTML kódba úgy, hogy megadod a
script elem src attribútumában, a
képekhez hasonlóan.
A js kódokat a body elem végén szokták
elhelyezni.
Deklarálás: egy változó deklarálása azt jelenti,
hogy létrehozom, de nem adok neki értéket.
(„Let” kötelező!)
Definiálás: akkor definiálod a változót, amikor
meghatározod az értékét.
A változók létrehozásánál különböző kulcs-
szavakat használhatsz. Régebben a var kulcszót
lehetett csak használni, de a 2015-ös szabvány
behozta a let és const kulcsszavakat. Változót a
let (régebben var) kulcsszóval hozhatsz létre.
Ha több szóból áll, nagybetűvel jelöljük a
szavak kezdetét, ezt úgy hívják camelCase, azaz
tevepúp módszer.
https://www.w3schools.com/js/js_const.asp
A const egy olyan memóriaterületet jelöl,
 aminek csak egyszer adhatsz értéket.
A változók típusai https://developer.mozilla.org/en-
US/docs/Web/JavaScript/Reference/Statements/
var
https://developer.mozilla.org/en-
US/docs/Web/JavaScript/Reference/Operators/P
roperty_Accessors

A primitív típusok a következők: boolean,

number, string, null, undefined, symbol.
A boolean, string, number primitíveknek van
objektum megfelelője is. Amikor egy primitíven
hívunk meg valamilyen objektum metódust,
automatikusan objektummá alakul, és a műve-
letet követően visszaalakul primitívvé. A pri-
mitív érték alakíthatatlan.
Immutable: egy objektumon nem végezhető
módosítás, helyette a műveletek egy új, módo-
sított objektumot adnak vissza.
Minden objektumnak lehetnek tulajdonságai
(property) és metódusai (method).
egy objektum property-jeit és method-jait a .
(pont) beírása után tudod lekérni vagy beállítani.
(dot operator). Két módon használható:
• object.property
• object['property']
A változók típusát a typeof beépített függvény
segítségével kérhetjük le. Ez csak az alapvető
típusokat ismeri.
Számok https://developer.mozilla.org/en-
US/docs/Web/JavaScript/Reference/Global_Obj
ects/Number
https://developer.mozilla.org/en-
US/docs/Web/JavaScript/Reference/Global_Obj
ects/Number/isFinite

A JavaScript nem különbözteti meg az egész és

tört számokat a típus szempontjából, az összes
szám ugyanabba a Number típusba tartozik. A
tizedes jegyeket pont (.) jelöli. Az összetett mű-
veletekre a matematikából ismert zárójelezési
szabályok érvényesek.
A NaN (Not a Number) a JavaScript nyelvben
egy úgynevezett lefoglalt szó. Ezt az értéket
akkor veszi fel egy változó, ha érvénytelen
számot tartalmaz.
Maradékos osztás: %
Hatványozás: **

16
Szövegek tárolása
Undefined és null
Típuskonverziók
Típuskonverzió utasításokkal
Formok kezelése JavaScript
segítségével
17
https://developer.mozilla.org/en-
US/docs/Web/JavaScript/Reference/Global_Obj
ects/String
String típus. Karakterláncokat tárol. Jellemzői:
• "", '' : idézőjelet vagy aposztrófot
használhatsz a szövegek létrehozására
• összefűzés a + jel segítségével.
https://www.w3schools.com/jsref/jsref_undefine
d.asp
https://www.w3schools.com/js/js_datatypes.asp
Amíg egy változót nem definiálsz, az értéke
undefined lesz, ha pedig a típusát lekéred azt
fogod kapni, hogy "undefined".
Null: ezt az értéket szándékosan szokták egy
változónak adni, úgymond kinullázzák.
https://www.w3schools.com/js/js_type_conversi
on.asp
Az implicit típuskonverzió olyan típus-
konverzió, amelyet a fordítóprogram automa-
tikusan alkalmazhat. Ha a JS nem tudja elvé-
gezni az implicit típuskonveziót, akkor általában
valamilyen hibaüzenetet kapsz.
Explicit típuskonverzió esetén mi erőltetjük a
konverziót és nem az értelmezőmotor hajtja
végre automatikusan. A szorzás már nem
értelmezhető String típuson, ezért ekkor a
Stringből lesz Number.
https://www.w3schools.com/js/js_type_conversi
on.asp
A nem String típusoknál tudod használni a
toString parancsot (metódust), ami az adott
változó értékét átalakítja String típusra.
A toFixed() a tizedesek számát állítja be, a
toPrecision() pedig az összes számjegyet
Number típus esetén (mindig Stringet adnak
vissza).
A parseInt, parseFloat páros pedig arra hivatott,
hogy bármiből egész számot vagy tizedes törtet
gyártson.
https://www.w3schools.com/jsref/met_document
_queryselector.asp
https://www.w3schools.com/tags/att_input_valu
e.asp
 Form elements: A HTML elemeknek van egy
speciális csoportja, ezek az űrlap elemek. Abban
különböznek a többi elemtől, hogy lehet értékük.
querySelector - elemek kiválasztása
• query: lekérés, lekérdezés, egy HTML
elem megkeresését jelenti az oldalon,
• selector: a lekérés az elem CSS
szelektorával történik.

Az űrlap elemeknek van egy speciális tulaj-

donsága, a value. Ez mondja meg az elembe
bevitt aktuális értéket.
Űrlap HTML kód (nem teljes, példa)
• <form id="order">
• <label>Mennyiség</label>
• <input name="amount"
type="number">
• ...
• </form>
Input kiválasztása (példa):
• let amountInput =
document.querySelector("form#order
input[name=amount]");
Érték kiolvasása (példa):
• let amount =
parseInt(amountInput.value);
Eseménykezelés https://www.w3schools.com/jsref/event_onclick.
asp

Az események (angolul events) alapvetőek a js

programozásban.
Az onclick attribútum: akkor következik be ez
az esemény, amikor rákattintanak egy HTML
elemre. Ez lehet gomb, div vagy gyakorlatilag
bármilyen látható elem, amire lehet kattintani.
• <form id="order">
• <label>Mennyiség</label>
• <input name="amount"
type="number">
•
• <button class="btn btn-success"
onclick="validateForm()">
• Megrendelés
• </button>
• ...
• </form>
Eseménykezelő függvény:
• function validateForm() {
• let amountInput =

18
 document.querySelector("form#order
input[name=amount]");
• let amount =
parseInt(amountInput.value);
• }

HTML elemek módosítása JavaScript https://www.w3schools.com/jsref/prop_html_inn

segítségével erhtml.asp
https://codepen.io/cherryapp/pen/XWbQzvG

innerHTML: Azoknak a HTML elemeknek

amelyeknek van lezáró tag-je (azaz nem self-
closed elemek), lehet tartalma. Az innerHTML
tulajdonság js alól elérhető és ki lehet vele ol-
vasni vagy lehet módosítani is az elemek tartal-
mát, azaz a bennük található HTML kódot. Az
innerHTML egy accessor, mert el lehet érni vele
egy bizonyos tulajdonságot olvasásra és írásra
is. Egy elem HTML tartalmának kiolvasása:
• let messageContent =
document.querySelector("form#order
.message").innerHTML;
Tartalom módosítása (HTML kód, példa):
• <form id="order">
• <label>Mennyiség</label>
• <input name="amount"
type="number">
• <button class="btn btn-success"
onclick="validateForm()">
• Megrendelés
• </button>
• <p class="message">
• A rendelés összege
<strong>0</strong> Ft
• </p>
• </form>
Tartalom módosítása (JS kód, példa):
• function validateForm() {
• // Termék egységára.
• let pricePerPiece = 1200;
• // Kiválasztom a mennyiséget és a
message mező ár részét.
• let amountInput =
document.querySelector("form#order
input[name=amount]");
• let priceField =
document.querySelector("form#order
.message strong");
• // Kiolvasom a bevitt mennyiséget és

19

A Stringekkel végezhető metódusok
Keresés és módosítás egy Stringen
belül
Igaz vagy hamis értékek - Boolean
20
szorzom az egységárral.
• let amount =
parseInt(amountInput.value);
• let totalAmount = amount *
pricePerPiece;
• // Kiírom az üzenetet, azaz frissítem az
árat.
• priceField.innerHTML = `$
{totalAmount}`;
• }
A priceField változó a p elemen belüli span
elemet jelenti, ahol az összeg megjelenik. Ennek
a tartalmát módosította a teljes összegre
(totalAmount).
https://developer.mozilla.org/en-
US/docs/Web/JavaScript/Reference/Global_Obj
ects/String#Methods
Metódusnak azt nevezzük, amit egy típus
csinálni tud.
Stringek tulajdonságai
• length : Megadja a String típusú változó
hosszát.
Stringek metódusai
• trim() : Eltávolítja a felesleges
szóközöket, amelyek a String előtt és
után találhatóak.
• concat() : Új karaktereket fűz hozzá a
meglévő Stringhez.
• toLowerCase() : Kisbetűssé alakítja az
adott Stringet.
• toUpperCase() : Az előzővel ellentétben
nagybetűssé alakítja a karaktereket.
https://developer.mozilla.org/en-
US/docs/Web/JavaScript/Reference/Global_Obj
ects/String#Methods
indexOf() : Megkeresi a Stringen belül egy adott
szövegrész kezdetét. A kezdő karakter indexét
adja vissza, amely 0-tól kezdődik.
Replace() : Kicseréli a megadott szövegrészt a
Stringen belül.
https://developer.mozilla.org/en-
US/docs/Web/JavaScript/Reference/Global_Obj
ects/Boolean
Boolean típus: Két értéket vehet csak fel: true
vagy false. (0 = false, 1 = true). Nagyon

Az if feltétel használata
Az if feltétel egyszerűsítése
Sprint 6 – Optimalizálás
A függvények használata
21
egyszerű típus, nincsenek külön metódusai.
Logikai operátorok:
• < kisebb,
• > nagyobb,
• <= kisebb vagy egyenlő,
• >= nagyobb vagy egyenlő,
• == megegyező érték,
• === megegyező érték és típus,
• != nem megegyező érték,
• !== nem megegyező érték és típus,
• ! tagadás - logikai érték megfordítása,
• && és,
• || vagy.
https://developer.mozilla.org/en-
US/docs/Web/JavaScript/Reference/Statements/i
f...else
Az if - else használata:
• Az if kulcsszó után zárójelben kell
megadnod a logikai kifejezést.
• A logikai kifejezés után kapcsos
zárójelek között van az utasítás.
• Az utasítás után jön az úgynevezett else,
a saját utasításával. (Opcionális)
Ha több esetet is szeretnél megvizsgálni, akkor
több if-et is használhatsz. Ekkor az else if
kapcsolattal fűzheted egymás után a logikai
kifejezéseket.
https://developer.mozilla.org/en-
US/docs/Web/JavaScript/Reference/Statements/i
f...else
Ha csak egyszerű vizsgálatot végzünk, akkor az
if...else helyett használhatod a három operan-
dusos kifejezést is. Ha a kifejezés igaz, akkor a
kérdőjel utáni értéket adja vissza, ha hamis,
akkor a kettőspont utánit.
https://www.w3schools.com/js/js_functions.asp
Ahhoz, hogy használni tudj egy függvényt,
legalább két lépésre van szükség:
• Declaration: megadom a függvény nevét
és leírom a működését.
• Invocation: a kód megfelelő helyén
meghívom (elindítom) a függvényt.

A tiszta kód szabályai - Clean Code
Függvények paraméterezése
22
Függvényt a function kulcszóval hozhatsz létre.
Két lehetőséged van:
• function testFunction() {...} : ez a
függvény deklaráció,
• let testFunction = function() {...} : ez a
függvény expression
Az invocation, azaz a függvény meghívása azt
jelenti, hogy elindítod a függvényt, az pedig
végrehajtja a feladatát. Ezt a függvény neve után
tett zárójelekkel teheted meg.
Ha egy függvény nem ad vissza semmilyen
adatot miután végzett a feladatával, azt el-
járásnak szoktuk pontosan hívni. A függvények
a futásuk végén visszaadnak valamilyen értéket.
Ezt a return kulcsszóval tudod meghatározni.
https://hup.hu/node/143736
https://gist.github.com/wojteklu/73c6914cc4461
46b8b533c0988cf8d29#file-clean_code-md
A változók és függvények nevei alapvető fon-
tosságúak egy kódban. Nem kell sajnálni a ka-
raktereket arra, hogy beszédes neveket válassz.
A kisbetűs L és nagybetűs O használata is félre-
informálhat, mert úgy néznek ki, mint a 0 és 1.
Használj könnyen kiejthető neveket. Tartogasd a
kommenteket olyan speciális esetekre, amikor a
figyelem felhívására van szükség.
Tartsd a sorok hosszát maximum 80 karakternél.
Az indentáció azt jelenti, hogy egyes sorok bel-
jebb kezdődnek a többinél.
Egy függvény csakis egy dolgot csináljon! A
függvénynek max. 3 paramétere legyen.
http://www.w3schools.com/js/js_functions.asp
https://developer.mozilla.org/en-
US/docs/Web/JavaScript/Reference/Functions
Paraméter - argumentum: bemenő adat, amellyel
a függvény műveleteket végez. A paraméterek
ugyanabban a sorrendben kerülnek feldolgozás-
ra, ahogyan azt megadtad a függvény létre-
hozásánál. Az arguments tömb tartalmazza a
függvény által kapott paramétereket. Ezzel le is
tudod ellenőrizni, hogy megfelelő paramétereket
kaptál-e. A JavaScript legújabb verziójában már
vannak úgynevezett alapértelmezett vagy default
értékei a paramétereknek, de ezt még nem
minden böngésző támogatja. Ezért magunknak
kell leellenőrizni a paramétereket, és ha nem
megfelelő az értékük, akkor beállítani valami

A változók felhasználási területe –
Scope
Let használata var helyett
Konstansok használata - const
Sprint 7 – Időjárás előrejelzés
A tömbök megismerése
23
értelmesre.
https://www.w3schools.com/js/js_scope.asp
A változók scope-ja az a része a programkódnak,
ahol a változóval lehet dolgozni, el lehet érni.
Azaz egy változó nem használható a teljes
programban, csak a scope-jában. A scope-ból
kifelé mindig lehet látni, de befelé nem. A js
2015 előtti verziójában egyféleképpen lehetett
változókat létrehozni a var, azaz variable
kulcsszóval.
• function scope: A var paranccsal
létrehozott változó függvény hatáskörű
volt, ez azt jelenti, hogy vagy a kód
gyökerében, vagy abban a függvényben
lehetett csak használni, ahol létrehozták.
• local scope: A függvény saját scope-ját
lokális scope-nak is nevezzük.
• global scope: A függvényen kívül eső
területet pedig globális scope-nak hívjuk.
https://www.w3schools.com/js/js_let.asp
A 2015-ös js szabványban hozták be a let
kulcsszót. A let kulcsszóval létrehozott változók
block scope-úak (A {} zárójelekkel határolt
programterület.) A let kulcsszóval létrehozott
változóknál nem lehet a változót kétszer létre-
hozni egy scope-ban. A blokkon belül létre-
hozott változó nem azonos a globális változóval.
https://www.w3schools.com/js/js_const.asp
Ha egy változót a const kulcsszóval hozol létre,
akkor nem adhatsz neki új értéket. Mindig nagy
betűvel írjuk, értéket is kell neki adni, amikor
létrehozzuk. A const blokk szintű változó, azaz
egy blokkon belül látható.
https://developer.mozilla.org/en-
US/docs/Web/JavaScript/Reference/Global_Obj
ects/Array
Értékek indexelt halmaza. Ez a tömb. Az index
az a mutató, amivel eléred a tömb egyes elemeit.
(FONTOS: az index mindig 0-val kezdődik!)
A tömbökbe szabadon elhelyezhetsz Number,
String, Boolean, Object sőt akár Array típusú

A tömbök metódusai
A tömbök vágása és összeillesztése
24
elemeket is. Ha tömbbe tömböt teszel, akkor azt
többdimenziós tömbnek is nevezik.
JavaScript esetén a tömb dinamikus, ami azt
jelenti, hogy bármikor vehetsz fel új elemet,
vagy törölhetsz meglévőket. Egy tömbön belül
különböző típusú elemeket is tárolhatsz.
Új tömböt a szögletes zárójelek használatával
hozhatsz létre.
Az Array objektum isArray metódusa szolgál a
tömbök azonosítására. (true/false)
https://developer.mozilla.org/en-
US/docs/Web/JavaScript/Reference/Global_Obj
ects/Array#Methods
push()
• Új elemet tudsz felvenni a tömb végére.
pop()
• Elvesz egy elemet a tömb végéről.
unshift()
• A push()-hoz hasonlóan működik, csak a
tömb elejére ad hozzá új elemet.
Hatására minden meglévő tömbelem
indexe eggyel nőni fog.
shift()
• A pop() párja, egy elemet kivesz a tömb
elejéről. Hatására minden meglévő
tömbelem indexe eggyel csökkenni fog.
FONTOS: Ezek a metódusok módosítják az
eredeti tömböt.
https://developer.mozilla.org/en-
US/docs/Web/JavaScript/Reference/Global_Obj
ects/Array#Methods
slice()
• A tömböt vágja. Két számot vár (start,
end)
• start: azt adja meg, hogy hol kezdje a
vágást. Ha 0, akkor a tömb elején kezdi,
ha mínusz szám, akkor hátulról fogja
számolni.
• end: azt adja meg hogy melyik elemnél
fejezze be a vágást. Ugyanazok igazak
rá, mint a startra.
splice()
• Nem csak kivenni lehet elemeket vele,
hanem hozzá is lehet adni a tömbhöz.
Szintaxis: array.splice(index, howmany,
item1, ....., itemX)
• index: kötelező, azt adja meg, hogy
honnan induljon a vágás, olyan mint a

Paraméterek átadása
Objektumok átadása referencia szerint
A for ciklus működése
25
slice esetén.
• howmany: azt adja meg, hogy hány
elemet akarsz eltávolítani.
• item1, ..., itemX: azok az elemek, amiket
az eltávolított elemek helyére akarsz
tenni. Nem kötelező megadni, akkor csak
eltávolítás lesz, hozzáadás nem.
join()
• A tömbből String-et készít, az elemeket
vesszővel elválasztva fűzi egymás után.
FONTOS: Ezek a metódusok nem módosítják az
eredeti tömböt, új tömbbel vagy új stringgel
térnek vissza.
https://www.w3schools.com/js/js_function_para
meters.asp
Paraméter átadás érték szerint (pass by value): a
primitív típusokat (Boolean, Number, String,
Undefined, Null) másolja a js. Ha átadsz egy
ilyen változót a függvénynek, akkor egy máso-
latot készít az eredetiről és azzal dolgozik.
https://www.w3schools.com/js/js_function_para
meters.asp
Paraméter átadás referencia szerint (pass by
reference): az objektumokat nem másolja a js.
Minden változónak van egy címe a memóriában.
Amikor egy objektumot kap a függvény, akkor
létrejön egy új név a lokális változónak, de a
memóriacím ugyanoda mutat. Két különböző
néven ugyanazt a változót éred el.
https://developer.mozilla.org/en-
US/docs/Web/JavaScript/Reference/Statements/f
or
A for egy tipikusan elöltesztelős ciklus. Először
megvizsgálod, hogy a feltételed igaz-e, és ha
igen, akkor lefut a ciklusmag. Paraméterei:

Összetett operátorok (compound
operators)
Ternary operator (három operandusos
26
• ciklusváltozó: egy Number típusú
változó, minden futás után módosítod az
értékét.
• feltétel: Boolean, amíg a ciklusváltozó
értékvizsgálata igaz, addig fut a ciklus.
• léptetés: minden ciklus végén lefut, itt
kell a ciklusváltozót növelni/csökkenteni.
Ciklusmag: az az utasítás vagy utasítások, ame-
lyek a feltétel teljesülése esetén lefutnak.
Ciklusmagon belüli átirányítás:
• continue: ha úgy döntesz, hogy mégsem
akarod lefuttatni a teljes ciklusmagot,
akkor ezzel az utasítással tovább tudsz
ugrani a következő iterációra.
• break: nem a következő iterációra ugrik,
hanem megszakítja a ciklust, a ciklusmag
többet nem kerül végrehajtásra, úgy is
mondhatnánk, a program továbbmegy.
https://www.w3schools.com/js/js_operators.asp
Hozzáadás: x = x + 10 helyett x += 10
Kivonás: x = x - 10 helyett x -= 10
Osztás: x = x / 2 helyett x /= 2
Modulus (maradék): x = x % 2 helyett x %= 2
Szorzás: x = x * 10 helyett x *= 10
https://www.w3schools.com/jsref/jsref_operator
kifejezés)
Ismerkedés az algoritmusokkal
Elemi algoritmusok
27
s.asp
Szintaxis:
let variablename = (condition) ? value1: value2
Részei:
• variablename: a változó neve
• condition: lehet bármilyen kifejezés,
amit Boolean-ként ki lehet értékelni
• ? a kérdőjel után jön az az érték, ami a
kifejezés true értékéhez tartozik
• : a kettőspont után pedig az, ami a false
értékhez tartozik.
https://wiki.prog.hu/wiki/Algoritmus
https://hu.wikipedia.org/wiki/Unified_Modeling
_Language
https://hu.wikipedia.org/wiki/Pszeudok
%C3%B3d
https://regi.tankonyvtar.hu/hu/tartalom/tamop42
5/0027_INF3/ch01s02.html
Az algoritmus egy feladat, probléma megol-
dásához vezető lépések, utasítások sorozata.
Jellemzői:
• Véges: véges számú lépésből áll.
• Egyértelmű: a megoldáshoz vezető
lépéssorozat tisztán van megadva, és
követhető, nem hagy kétségeket.
• Elvégezhető: a lépések elég egyszerűek
legyenek, hogy pontosan végre lehessen
hajtani.
Strukturált az algoritmus, ha csak az alap vezér-
lőszerkezeteket (szekvencia, szelekció, iteráció)
használja.
• szekvencia: egyszerű tevékenységek,
utasítások sorozata
• elágazás (szelekció): a feltételtől függően
más-más irányba halad tovább a
vezérlés.
• ismétlés (iteráció): bizonyos esetben
visszairányítjuk a vezérlést egy korábbi
pontra.
Pszeudokód: nyelvfüggetlen algoritmusleíró
módszer, ami nagyon hasonlít már a program-
kódra.
https://hu.wikipedia.org/wiki/Algoritmus
https://wiki.prog.hu/wiki/Elemi_algoritmusok
Összegzés tétele - A feladat egyszerű, egy

Összegző és számláló algoritmusok
28
sorozat elemeit kell összesíteni:
• összeg = 0
• CIKLUS AMÍG van még szám, ADDIG
• szám = következő elem
• összeg = összeg + szám
• CIKLUS VÉGE
Számlálás tétele - Itt össze kell számolni, hogy
egy bizonyos feltétel hány elemre igaz.
• db = 0
• CIKLUS AMÍG van még szám, ADDIG
• szám = következő elem
• HA igaz a feltétel szám-ra, AKKOR
• db = db + 1
• FELTÉTEL VÉGE
• CIKLUS VÉGE
Szélsőérték keresése (maximum vagy minimum)
• legnagyobb = első elem
• CIKLUS AMÍG van még szám, ADDIG
• szám = következő elem
• HA legnagyobb < szám, AKKOR
• legnagyobb = szám
• FELTÉTEL VÉGE
• CIKLUS VÉGE
Eldöntés tétele - szerepel-e olyan elem a soro-
zatban, melyre igaz a feltétel.
• találat = HAMIS
• CIKLUS AMÍG van elem ÉS NEM
találat
• szám = következő elem
• HA igaz a feltétel szám-ra, AKKOR
• találat = IGAZ
• FELTÉTEL VÉGE
• CIKLUS VÉGE
Összegző algoritmus példa JavaScriptben:
• var numericArray = [1, 3, 2, 5, 4, 6, 7];
• var amount = 0;
• for (var i = 0; i < numericArray.length;
i++) {
• amount += numericArray[i];
• }
• console.log(amount);
Fontos: Az akkumulátor változót mindig a
cikluson kívül hozzuk létre és inicializáljuk!
Számláló algoritmus példa JavaScriptben:
• var numericArray = [1, 3, 2, 5, 4, 6, 7];
 • var count = 0;
• for (var i = 0; i < numericArray.length;
i++) {
• if (numericArray[i] > 3) {
• count++;
• }
• }
• console.log(count);
Szélsőértékek keresése Szélsőérték: Ha van egy nem üres sorozat, akkor
két szélső érték lesz benne, a legkisebb és a leg-
nagyobb. Maximum vagy minimum kiválasztás-
nak is nevezik ezt az eljárást. JS példa:
• let numericArray = [1, 3, 2, 5, 4, 6, 7];
• let biggest = numericArray[0];
• for (let i = 0; i < numericArray.length; i+
+) {
• if (numericArray[i] > biggest) {
• biggest = numericArray[i];
• }
• }
• console.log(biggest);

Eldöntés (true/false kimenet):

1. egy sorozatban van-e valamilyen
tulajdonsággal rendelkező elem

• let numericArray = [1, 2, 5, 3, 4, 6, 7];

• let find = 6;
• let found = false;
• for (let i = 0; i < numericArray.length
&& !found; i++) {
• if (numericArray[i] == find) {
• found = true;
• }
• }
• console.log(found);

2. minden elem rendelkezik-e az adott

tulajdonsággal

• let numericArray = [1, 3, -2, 6, 5, -4, 7];

• let all = true;
• for (let i = 0; i < numericArray.length
&& all; i++) {
• if (numericArray[i] <= 0) {
• all = false;
• }
• }
• console.log(all);

29
 Debugging
Sprint 8 – Objektumok
Az objektumok áttekintése
Rugalmas adattárolás objektumok
segítségével
30
https://developers.google.com/web/tools/chrome
-devtools/javascript/
https://www.w3schools.com/js/js_debugging.asp
https://code.visualstudio.com/docs/editor/debug
ging
Chrome debugger: JavaScript nyelven dolgo-
zunk és böngészőben, adja magát hogy a bön-
gésző beépített eszközét használjuk.
1. F12 gomb-bal nyisd meg a fejlesztői
eszköztárat.
2. A Sources fülre navigálj az eszköztáron
belül. Itt szépen csoportosítva látod az
összes fájlt, képet, JavaScript-et amit az
oldal használ.
3. Válassz ki egy JS fájlt és ekkor megje-
lenik a jobb oldali ablakban a fájl
tartalma.
4. Ha a sorok számára kattintasz a bal
oldalon, akkor megjelenik egy kék nyíl,
és ezzel létrehozol egy töréspontot
(breakpoint).
5. Ezután egyszerűen frissítsd le az oldalt.
Ha a végrehajtás rákerül a kijelölt sorra,
akkor a böngésző megállítja a kód
futtatását és meg tudod vizsgálni a
változók tartalmát.
6. Miután befejezted a kód vizsgálatát, a
kék léptető gombbal tudsz továbblépni a
következő töréspontra.
Adatok tárolása kulcs-érték párok segítségével.
Ez az objektum. Abban a tekintetben hasonlít a
tömbökre, hogy egy kollekció, amiben bár-
milyen típusú adatot tárolhatsz.
https://developer.mozilla.org/en-
US/docs/Web/JavaScript/Reference/Global_Obj
ects/Object
Az objektumok esetén nem automatikusan
indexelődnek az elemek mint a tömb esetén,
hanem mi határozzuk meg a kulcs-érték párokat.
A kulcsoknak minden esetben String típusúak-
nak kell lenniük. Az objektumot kapcsos záró-
jelek határolják, a kulcs-érték párokat vesszők, a
kulcsot pedig kettőspont választja el az értéktől.
Az Object.keys metódus tömb formában adja

Konstans objektumok használata
vissza a kapott objektum kulcsait. Az objektum
tulajdonságait úgy tudod elérni, hogy az objek-
tum neve után ponttal elválasztva megadod a
kiválasztott tulajdonság kulcsát, vagy szögletes
zárójelek között [] string-ként adod meg.
Az objektum hosszának meghatározásához a
legegyszerűbb módszer, ha nem az elemeiket,
hanem a kulcsaikat számolod meg. Láncolt
metódus hívással:
• Object.keys(User) - tömböt ad vissza,
• Object.keys(User).length
https://www.w3schools.com/js/js_const.asp

A const kulcsszóval definiált objektumok és

tömbök tulajdonságait / elemeit meg tudom
változtatni! Az objektum és a tömb különálló
változókat tárol a memóriából és csak összefogja
őket. Amikor az objektum egy tulajdonságát
megváltoztatom, azzal az objektum kötése az
azonosítóhoz nem fog megváltozni, csupán az
egyik tulajdonságát módosítottam.
A for in ciklus https://developer.mozilla.org/en-
US/docs/Web/JavaScript/Reference/Statements/f
or...in

Eltérések a normál for ciklushoz képest:

1. Nincs benne iterátor változó.
2. A megadott tömb vagy objektum kulcsait
járja be
3. Nem kell hozzá külön változó, hogy
végig tudd járni az objektumok kulcsait.
Paraméterei: for (kulcs in ’kollekció’)
• kulcs változó: ebben tárolja mindig az
aktuális kulcsot.
• kollekció: az a tömb vagy objektum,
amelyet bejár a ciklus.
A for...in ciklus esetén is használható a continue
és a break utasítás.
A for of ciklus https://developer.mozilla.org/en-
US/docs/Web/JavaScript/Reference/Statements/f
or...of

Iteráció: egy függvény ismételt végrehajtása az

előző függvényértéken.
A for...of ciklus hasonló a for...in-hez, de vannak
különbségek.
• Nem a kulcsokon, hanem az értékeken
megy végig

31

Metódusok
A this titkai és felhasználási módja
32
• Tömbszerű változókon lehet alkalmazni.
String bejárása for...of ciklussal ("b", "o", "o"):
• let iterable = 'boo';
• for (let value of iterable)
{ console.log(value); }
Objektum bejárása for...of ciklussal - ha kell a
kulcs (entry0: kulcs, entry1: érték)
• let user = { name: "Kiss Ramóna", age:
22 };
• for ( let entry of Object.entries(user) ) {
• console.log( `${entry[0]}: $
{entry[1]}` );
• }
Objektum bejárása for...of ciklussal - ha NEM
kell a kulcs:
• let user = { name: "Kiss Ramóna", age:
22 };
• for ( let value of Object.values(user) )
{ console.log(value); }
https://developer.mozilla.org/en-
US/docs/Web/JavaScript/Reference/Methods_In
dex
Az objektumoknak vannak tulajdonságai, de
vannak metódusai is, azaz amit tudnak csinálni.
A metódus azt írja le, hogy egy adott objektum
egy dolgot hogyan csinál.
Beépített metódusok:
Már alapból meg vannak írva és használhatod
őket. A metódus gyakorlatilag egy függvény,
ami egy objektumhoz van kötve.
Saját metódus készítés (példa):
• let product = {
• price: 1000,
• desc: function() {
• return "This is an awesome product.";
• }
• }
• console.log( product.desc() );
https://www.w3schools.com/js/js_this.asp
Mikor mi a this?
1. A js fájl gyökerében, függvényekben: a
globális objektumot jelenti, ami általában a
window.
2. Metódusban: a szülő objektumot jelenti.
• let product = {
• price: 2000,
• showPrice: function() {

Egy user objektum létrehozása
Az arrow function
33
• return `${this.price} Ft`;
• }
• }
3. Az eseménykezelő függvényben: azt az
elemet jelenti, amelyre végbement az esemény.
• <button
onclick="this.style.display='none'">
Click to Remove Me! </button>
Itt a this a button lesz.
https://next.json-generator.com/
Statikus tulajdonságok átalakítása metódusra:
1. getBalance
• "balance": 1500,
• "getBalance": function(currency = "$") {
• return `${currency} ${this.balance}`;
• }
2. getFullname
• "name": { "first": "Imelda", "last":
"Compton" },
• "getFullname": function() {
• return `${this.name.last} $
{this.name.first}`;
• }
3. greeting
• "greeting": function() {
• return `Hello, ${this.name.first}! You
have 7 unread messages.";
• }
https://www.w3schools.com/js/js_arrow_functio
n.asp
https://developer.mozilla.org/en-
US/docs/Web/JavaScript/Reference/Functions/A
rrow_functions
Az arrow function segítségével egyszerűbben
tudsz létrehozni függvényeket, mint függvény
kifejezéssel.
1. példa:
• let languages = ["java", "php",
"python"];
• // Ezt írjuk át:
• let scriptsOldStyle =
languages.map(function(language) {
• return `${language} script`;
• });
• // Erre:
• let scriptsNewStyle =
languages.map(language => `$
 {language} script`);
2. Több paraméter esetén a zárójeleket ki kell
tenni:
• let languages = ["java", "php",
"python"];
• let languageRank =
languages.map((language, i) => `${i +
1}. ${language} script`);
• console.log(languageRank); // ["1. java
script", "2. php script", "3. python
script"]

Az arrow function-nél nincs local binding, tehát

nincs arguments, this, super, new.target. Ha a
arrow function-ön belül megpróbáljuk elérni,
akkor a parent scope lesz használva.
Objektum metódusban érdemes kerülni az arrow
function használatát.

Sprint 9 – A DOM és a feltételek

A DOM áttekintése A JavaScript egyik fő célja a HTML dokumen-

tumok dinamikus kezelése. Erre a célra a bön-
gészőben a Document Object Modelt (a továb-
biakban DOM) tudod használni.

A DOM megismerése https://www.w3schools.com/js/js_htmldom.asp

A Document Object MA DOM API segítségével

lekérdezheted és változtathatod a HTML ele-

34

A DOM elemek őse – element
A HTML attribútumok lekérdezése és
módosítása
35
meket. Az API-t a globális document objek-
tumon keresztül éred el.
Egy HTML elemhez többféleképpen is hozzá-
férhetsz:
1. document.getElementById()
Az elemet az id attribútum alapján szeretném
elérni. Az id-nak egyedinek kell lennie egy ol-
dalon, ezért ez a függvény egy objektumot ad
vissza, amin keresztül tudod az elemet módo-
sítani). Ha a megadott id nem létezik az oldalon,
a függvény null értékkel tér vissza.
2. document.getElementsByName()
Itt a name attribútum alapján történik a keresés.
Ez a függvény egy tömböt fog visszaadni.
3. document.getElementsByClassName()
A class attribútum alapján visszakapjuk a HTML
elemeket egy tömbben.
4. document.getElementsByTagName()
Ez a függvény minden elemet visszaad, aminek
a típusa a megadott tag.
5. document.querySelector()
Ez a függvény CSS selectorok alapján keres
HTML elemeket, majd visszaadja az első
találatot.
6. document.querySelectorAll()
Szintén CSS selectorok alapján keres HTML
elemeket, de minden egyező elemet visszaad.
http://www.w3schools.com/js/js_htmldom_elem
ents.asp
Ha bármilyen módon kiválasztasz egy HTML
elemet az oldalon, egy Element típusú Java-
Script objektumot fogsz visszakapni.
Ha szeretnéd az összes HTML elemet felruházni
egy új képességgel, akkor ezt a prototype-ban
kell létrehoznod.
Element bővítése metódussal (példa):
let input = document.querySelector('input');
Element.prototype.setDisabled = function() {
this.setAttribute('disabled', 'disabled');
this.classList.add('disabled');
}
input.setDisabled();
http://www.w3schools.com/jsref/met_element_g
etattribute.asp
http://www.w3schools.com/jsref/met_element_s
etattribute.asp
A getAttribute függvény visszaadja egy adott

Több elem módosítása ciklus
segítségével
Több elem módosítása külön
függvénnyel
36
HTML elem egy bizonyos attribútumának
(tulajdonságának) az értékét. Példa:
var classes =
document.querySelector("H1").getAttribute("cla
ss");
Ha a H1 elem így néz ki: <h1 class="main
dark">Hello</h1>, akkor a classes változó
tartalma a következő lesz: "main dark".
A setAttribute() függvénnyel HTML elem
tulajdonságait hanem módosítani lehet. Példa:
document.querySelector("H1").setAttribute("cla
ss", "dark grey big");
http://www.w3schools.com/js/js_functions.asp
Gyakran kell egyszerre több HTML elem tulaj-
donságait is módosítani. Ehhez kombináljuk a
lekérdezést és a megismert ciklusokat egymás-
sal. Végig kell menni az összes elemen, és
egyesével módosítani a tulajdonságaikat.
1. For ciklussal (példa):
const myNodelist =
document.querySelectorAll("p");
let i;
for (i = 0; i < myNodelist.length; i++) {
myNodelist[i].style.backgroundColor = "red";
}
2. For … in ciklussal - ellenőrizni kell, hogy
helyes HTML elemet kaptál (példa):
var myNodelist =
document.querySelectorAll("p");
for (var k in myNodelist) {
if (myNodelist[k].style) {
myNodelist[k].style.backgroundColor =
"red";
}
}
Lépések:
1. Készíts egy függvényt.
2. Add át neki a szelektort, a tulajdonság
nevét és értékét.
3. A függvényben végigjárod az elemeket,
és módosítod a tulajdonságot.
4. Végül valamit vissza is adsz a kíváncsiak
kedvéért.
Példa:
function massModify(selector) {
var divs =
document.querySelectorAll(selector);
for (var k in divs) {
 if (divs[k].setAttribute) {
divs[k].setAttribute('style', 'color: red');
}
}
return true;
}
massModify('.mass');
Egy elem gyerekei http://www.w3schools.com/jsref/dom_obj_all.as
p

A HTML elemek között van egy képletes szülő-

Új elemek létrehozása és hozzáadása
gyerekként
gyerek kapcsolat. A beágyazott elemeket, ame-
lyek egy másik elemben vannak, annak gyere-
keinek is szokás nevezni.
1. childElementCount
Ez a tulajdonság megmondja, hány gyereke van
a HTML elemnek. Ez akkor lehet hasznos, ha
keresel benne valamit. Ha először lekéred, hogy
egyáltalán vannak-e gyerekei, nem fogsz feles-
legesen dolgozni. Példa:
var elementCount =
document.getElementById("myDIV").childElem
entCount;
2. childNodes
Az összes gyerek, beleértve a kommentek és
szövegek is. Példa:
let nodes =
document.getElementById("myDIV").childNode
s.length;
3. children
Csak az Element típusú gyerekek, vagyis
komment és szöveg nincs benne. Példa:
let children = document.body.children;
4. element.firstChild, element.lastChild
Az első vagy az utolsó gyerek, komment vagy
szöveg is.
5. element.firstElementChild,
element.lastElementChild
Csak az Element típusú első vagy utolsó gyerek.
http://www.w3schools.com/jsref/met_node_appe
ndchild.asp
http://www.w3schools.com/jsref/met_node_rem
ovechild.asp

1. createElement
Ha hozzá akarsz adni egy elemet egy másikhoz,
létre kell hozni. Példa:
var div = document.createElement('div');
2. Element.appendChild()

37

Eseménykezelők hozzáadása HTML
elemekhez
38
Belefűz egy új elemet a meglévőhöz. Abban az
Element -ben hoz létre egy új gyerek Element
-et, melyre a metódust meghívod. Az új elem az
utolsó lesz a szülő Element gyerekei között.
var li = document.querySelector("ul li");
var anchor = document.createElement("li");
anchor.innerHTML = "Water";
anchor.setAttribute("href",
"https://training360.com");
li.appendChild(a);
3. Element.removeChild() - szintaxis:
node.removeChild(node)
var ul = document.querySelector("ul");
var li = document.querySelector("ul li:first-
child");
ul.removeChild(li);
Fontos: csak child elemet lehet eltávolítani.
http://www.w3schools.com/jsref/dom_obj_event
.asp
A JavaScriptben lehetőség van eseményeket
(event) figyelni, és a hatásukra valamilyen kódot
futtatni. Ilyen esemény például amikor betöltő-
dik az oldal, vagy a felhasználó rákattint egy
elemre.
1. = vagy addEventListener
Ha azt szeretnéd, hogy történjen valami, ha
mondjuk egy gombra kattintanak, azt három-
féleképpen is meg tudod adni.
• Element attribútummal: <element
onclick="myScript">
• JavaScriptből hasonlóan: object.onclick
= function() { myScript };
• addEventListenerrel:
object.addEventListener("click",
myScript);
Az első kettőnél egy eseményre csak egy műkö-
dést adhatsz meg, míg az addEventListener
használatával többet is.
Fontos: az addEventListener esetén nem kell az
on szócska az esemény neve elé.
2. Window események
A közös bennük, hogy a böngésző működése
váltja ki őket. Nem csak a window -ra lehet őket
megadni, a legtöbb elem esetén használhatóak.
A fontosabbak:
• onload - az objektum betöltődött
• onresize - az objektumot átméretezték
• onscroll - scrolloztak az objektumon

Az egér és az űrlapelemek eseményei
39
Példa (figyelhetjük ha scrolloztak, és bizonyos
távolságra az oldal tetejétől kisebbre vehetjük a
fejlécet, vagy elrejthetünk bizonyos elemeket):
window.onscroll = myFunction;
function myFunction() {
if (document.body.scrollTop > 50 ||
document.documentElement.scrollTop > 50) {
document.getElementById("myP").className
= "test";
} else {
document.getElementById("myP").className
= "";
}
}
http://www.w3schools.com/jsref/dom_obj_event
.asp
https://www.w3schools.com/js/js_events_examp
les.asp
1. Mouse events - egér események
A leggyakrabban figyelt események. A mobil
eszközökön már nincs egér, hanem legtöbbször
ujjal kezelik őket. Ezeknél a kattintás a tap-et,
azaz a tapintást jelenti. A legfontosabbak:
• onclick - kattintás vagy tappintás, ha
mobileszközről van szó
• onmouseover - az elem fölé viszik az
egérmutatót (mobilon értelmetlen)
• onmouseout - az elemről elhúzzák az
egérmutatót (mobilon értelmetlen)
Példa:
function fillPre(content) {
document.querySelector('pre').innerHTML =
content;
}
let button = document.querySelector('.click-
button');
button.addEventListener('click', function(event)
{
var className = this.className;
fillPre('clicked: ' + className);
});
2. Input events - űrlap események
A legfontosabbak:
• onchange - input elemek értékének
változását figyelheted.
• onsubmit - a form (űrlap) elküldése előtt
fut le. Ha az eseménykezelő függvény
 visszatérési értéke false, akkor az űrlap
nem kerül elküldésre.
Példa:
function fillPre(content) {
document.querySelector('pre').innerHTML =
content;
}
var inputList =
document.querySelectorAll('input');
for (var i = 0; i < inputList.length; i++) {
if (inputList[i].addEventListener) {
inputList[i].addEventListener('change',
function(event) {
fillPre( this.className + ': ' + this.value );
});
}
}
Egy elem szülője https://www.w3schools.com/jsref/prop_node_pa
rentelement.asp

Ha egy elemnek lehetnek gyerekei, meg lehet

kérdezni, hogy hány gyereke van, és akár
keresni is lehet közöttük. Minden elemnek csak
egyetlen közvetlen szülője lehet.
1. parentNode: az adott elem szülő node-ját adja
vissza, mely lehet Element vagy gyökérelem
esetén a document.
2. parentElement: az adott elem szülő elemét
adja vissza, mely mindig egy Element, vagy
gyökérelem esetén null.
Fontos: különbség van a node és az element
között. A Node egy csomópont a dokumentum-
ban, lehet egy egyszerű textNode is, ami nem
valódi HTML Element. Minden Element node,
de nem minden node element.
document.body.parentNode; // <html>
document.body.parentElement; // <html>
element
A példában kattintásra elrejtjük a span szülőjét:
<div>
<span
onclick="this.parentElement.style.display =
'none';">x</span>
</div>
A switch kapcsoló https://developer.mozilla.org/en-
US/docs/Web/JavaScript/Reference/Statements/s
witch

A switch egy kapcsoló. Több állása is lehet, egy

40
 változót vagy kifejezést vizsgál, és annak az
értéke alapján ugrik a megfelelő utasításhoz.
Egy paramétere van, egy olyan változó vagy
kifejezés, ami értéket ad vissza. Azután meg kell
adni, hogy milyen érték hatására milyen utasítás
fusson le.
Kulcsszavak:
• switch(value) - a value az az érték, amit
figyel a switch.
• case value: kifejezés break; - ha a value
megegyezik a vizsgált értékkel, lefut a
kifejezés, utána break utasítást teszünk,
hogy a többi ne fusson le.
• default: kifejezés - ha egyik case sem
volt igaz, akkor ez fog lefutni.
Előnye, hogy gyorsabb, mint az else...if, viszont
csak konkrét értékeket lehet vele vizsgálni.

A while ciklus https://developer.mozilla.org/hu/docs/Web/JavaS

cript/Reference/Statements/while

1. while – az elöltesztelős ciklus

Addig fut, amíg a megadott feltétel igaz. Egy
paramétere van, egy logikai kifejezés, ennek kell
igaznak lennie, hogy a ciklus lefusson.

Fontos: Mindig figyelj oda a feltétel megfelelő

41

DOM manipuláció while ciklussal
A felhasználók adatainak megadása
DOM manipuláció for ciklussal
42
frissítésére a végtelen ciklus elkerülése miatt.
2. do while - hátultesztelős ciklus
Először lefuttatja a ciklusmagot, és csak utána
vizsgálja meg a feltételt. Akár igaz a feltétel,
akár hamis, egy alkalommal biztosan le fog
futni.
3. Kollekciók (tömbök, objektumok) bejárása
https://developer.mozilla.org/en-
US/docs/Learn/JavaScript/Client-
side_web_APIs/Manipulating_documents
Lista while ciklussal:
let numbers = [1,2,3,4,5,6];
let i = 0;
let container = document.querySelector("div");
while(i < numbers.length) {
let p = document.createElement("p");
p.innerHTML = numbers[i];
container.appendChild(p);
i++;
}
Amikor egy szerverről megkapod a felhasználó-
kat, az legtöbbször egy tömb lesz, ami az egyes
felhasználókat objektumként tartalmazza. Erre
szokták mondani, hogy objektumtömb, vagy
objektumok tömbje. Példa:
let users = [{
"_id": "5cdad500da7a3648b7f5a3f3",
"name": "Berger Whitney",
"company": "ENAUT",
"email": "berger.whitney@enaut.name"
}, {
"_id": "5cdad50017e5fdde3c44bc5b",
"name": "Laverne Dale",
"company": "PYRAMIS",
"email": "laverne.dale@pyramis.io"
}];
A helyes táblázathoz két egymásba ágyazott
ciklus kell. Az egyikben létrehozod a sorokat, a

Gombok elkészítésének refaktorálása
43
másikban a cellákat a sorokon belül. Példa:
let table =
document.querySelector("#demoTable");
for ( let i = 0; i < users.length; i++ ) {
let tr = document.createElement("tr");
for ( let data of Object.values(users[i]) ) {
let td = document.createElement("td");
td.innerHTML = data;
tr.appendChild(td);
}
table.appendChild(tr);
}
https://getbootstrap.com/docs/4.4/components/b
utton-group/
https://hu.wikipedia.org/wiki/K
%C3%B3drefaktor%C3%A1l%C3%A1s
Visual Studio billentyűkombinációk

Ctrl+D: a szöveg következő előfordulásának a kijelöléshez adása

F2: a szöveg összes előfordulásának kijelölése
Alt+Up/Down: az aktív sor mozgatása felfelé vagy lefelé
Alt+Shift+Up/Down: az aktív megduplázása felfelé vagy lefelé

Lorem ipsum generátor: https://hu.lipsum.com/

JavaScript Garden (kódgyűjtemény, hasznos tippek):

https://bonsaiden.github.io/JavaScript-Garden/hu/

https://vik.wiki/images/f/fb/Mobil-web_2017_eloadasdia_web_5.pdf

Hosszabb példakódok:

1. Van egy webshopunk, és a html kódból meg kell mondanunk, hogy az általunk árult szerverek
összesített ára mennyi:

<!DOCTYPE html>
<html lang="hu">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Arrow Function Example</title>
</head>
<body>
<ul id="price-list">
<li>TV</li>
<li data-company="Dell">Server</li>
<li data-price="11.012,12">TV</li>
<li data-price="23.243,55">Server</li>
<li data-price="4.543,29">TV</li>
<li data-price="230.323,32">Server</li>
<li data-price="48.344,30">Server</li>
</ul>
</body>
<script>
const serverPrice = Array.from(
document.querySelectorAll('#price-list li[data-price]'))
.filter(item => item.textContent.includes('Server'))
.map(item => parseFloat(item.dataset.price.replace('.', '')
.replace(',', '.')))
.reduce((total, item) => total + item);
console.log(serverPrice);
</script>
</html>

Mindössze annyit teszünk, hogy használjuk a tömb metódusainkat, most már Arrow function-ökkel

44
kombinálva. (Az Array.from() szintén hamarosan kifejtésre kerül, csakúgy, mint az includes(), ami
leginkább az indexOf()-ra hasonlít)

Kigyűjtjük egy konstansba a price-list id-jú elemen belül az összes li-t,aminek a data-price
attribútuma meg van adva. (Az Array.from()-ról a későbbiekben részletesen.)
Leszűrjük az elemeket, hogy a "Server" szót tartalmazó elemek maradjanak, tehát csak a szerverek
árai érdekelnek.
Tömböt készítünk ezen elemek áráról, mely érték már float-tá lesz alakítva (kiszedjük a pontot), és
figyelünk a "," karakterekre is, melyeket "."-ra cserélünk.
A kapott összegeket összeadjuk.

*******

45