Professional Documents
Culture Documents
Linkek, Fogalmak (Sprint 7 Végéig)
Linkek, Fogalmak (Sprint 7 Végéig)
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.
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.
3
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.
Listák 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
Képek elhelyezése a weboldalon 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.
Linkek elhelyezése a weboldalon https://www.w3schools.com/tags/tag_a.asp
Elem: <a></a>
Kötelező attribútumok:
href: az URL, ahová kattintás után jutsz.
Az egyes HTML elemek egymásba https://www.w3schools.com/html/html_elements
ágyazása .asp
4
Elem: <table></table>
Fejléc: <thead></thead>
Sor: <tr></tr>
Fejléc cella: <th></th>
Cella: <td></td>
Sorok és oszlopok összevonása https://www.w3schools.com/tags/att_td_rowspa
n.asp
https://www.w3schools.com/tags/att_td_colspan.
asp
Az elkészített oldal publikálása és https://help.github.com/en/github/working-with-
megosztása github-pages
5
Sprint 2 – A CSS alapjai (Cascading Style Sheets)
Az Inline stílusok https://www.w3schools.com/css/css_howto.asp
Attribútum: style
Egy CSS stíluslap elkészítése https://www.w3schools.com/css/css_intro.asp
Képpontok - px
A különböző betűtípusok https://www.w3schools.com/cssref/pr_font_font-
family.asp
6
Külső betűtípusok használata - Google https://fonts.google.com/
Fonts
Közel 1000 ingyenes betűtípust tartalmazó
válogatás
Ismerkedés az id-val Jele a CSS-ben: #
7
• oldalanként: border-left: style width
color;
• tulajdonságonként: border-style, border-
width, border-color
8
• sárga: rgb(255, 255, 0)
• fehér: rgb(255, 255, 255)
• fekete: rgb(0, 0, 0)
• a.menu-link:hover
• input.form-control[type=email]:focus
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].
10
• :disabled - letiltott elem.
11
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/
12
= 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.
A navigációs sáv – Navbar 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.
13
<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
Bootstrappel formázott űrlapok https://getbootstrap.com/docs/4.4/components/fo
rms/#form-controls
14
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>
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.
Változók deklarálása és definiálása - let https://www.w3schools.com/js/js_let.asp
15
var
https://developer.mozilla.org/en-
US/docs/Web/JavaScript/Reference/Operators/P
roperty_Accessors
16
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.
Undefined és null https://www.w3schools.com/jsref/jsref_undefine
d.asp
https://www.w3schools.com/js/js_datatypes.asp
17
• 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.
18
• }
19
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).
A Stringekkel végezhető metódusok https://developer.mozilla.org/en-
US/docs/Web/JavaScript/Reference/Global_Obj
ects/String#Methods
20
• <= 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.
Az if feltétel használata 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.
Az if feltétel egyszerűsítése https://developer.mozilla.org/en-
US/docs/Web/JavaScript/Reference/Statements/i
f...else
Sprint 6 – Optimalizálás
A függvények használata https://www.w3schools.com/js/js_functions.asp
21
• 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.
A tiszta kód szabályai - Clean Code https://hup.hu/node/143736
https://gist.github.com/wojteklu/73c6914cc4461
46b8b533c0988cf8d29#file-clean_code-md
22
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.
Let használata var helyett https://www.w3schools.com/js/js_let.asp
23
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)
A tömbök metódusai 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.
A tömbök vágása és összeillesztése 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
slice esetén.
• howmany: azt adja meg, hogy hány
elemet akarsz eltávolítani.
24
• 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.
Paraméterek átadása https://www.w3schools.com/js/js_function_para
meters.asp
25
• 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.
Összetett operátorok (compound https://www.w3schools.com/js/js_operators.asp
operators)
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
Szintaxis:
26
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.
Ismerkedés az algoritmusokkal 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
27
• szám = következő elem
• összeg = összeg + szám
• CIKLUS VÉGE
28
• 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);
29
https://code.visualstudio.com/docs/editor/debug
ging
30
Visual Studio billentyűkombinációk
31