- (1. resz) Full stack fejlesztő önállóan, kezdőknek
- (2. resz) Programozás alapjai Go nyelven
- (3. resz) Hálózat programozás alapjai Go nyelven
- (4. resz) Backend fejlesztés Go nyelven
- (5. resz) Adatbázisok: hogy működnek, hogy válasszunk?
- (6. resz) Frontend fejlesztés alapjai
Mi a frontend?
Program ami a böngészőben fut (JavaScript vagy WebAssembly). Az a feladata hogy megjelenítse a felhasználói felületet (HTML, CSS), kezelje felhasználó interakcióit (kattintás, szövegbevitel, kép / hangbevitel, stb), hálózaton továbbítsa az adatokat a backendnek és a backend által visszaküldött informáciokat megjelenítse.
HTML
A html kód írja le az oldal struktúráját és a tartalmát. A részletes dokumentációja itt található. Példa html kód:
<!DOCTYPE html>
<html lang="hu">
<head>
<title>Document</title>
</head>
<body>
<h1>Cím</h1>
<p>Ez egy bekezdésnyi szöveg</p>
<img src="teszt.jpg" />
</body>
</html>
A html kód tagekből áll. Egy tag így néz ki:
<tagnév attribútum=".." attribútum=".."> ... </tagnév>
Vagy rövidebb formában, ha nem tartalmaz más tageket:
<tagnév attribútum=".." attribútum=".." />
A tagnév leírja hogy milyen elemről van szó, pl.:
- h1: első szintű címsor
- p: bekezdés
- a: hivatkozás
- img: kép
A tageket mindig le kell zárni a </tagnév>-el vagy a /> -el.
A tagek tartalmazhatnak attribútumokat, amik attribútum=“érték” formában vannak megadva. Ezekkel az adott tag működését lehet módosítani, vagy paramétereket megadni. Pl.: az img tag-nek be kell állítanunk egy src attribútumot, ami a kép elérési útja. Az egész oldal ilyek tagekből van felépítve.
CSS
A css a html elemek kinézetét íjra le, pl háttérszín, szélesség, magasság. A css részletes dokumentációja itt található.
Példa, a bekezdsék hattárszínének a megváltoztatására:
p {
background-color: red;
}
A css szabályok általánosságban így néznek ki:
szelektor {
tulajdonsag: ertek;
tulajdonsag: ertek;
}
- Szelektor: Leírja hogy mire vonatkozik az adott szabály. Részletes dokumentáció
- Tulajdonság: Leírja hogy a html elem melyik tulajdonságának a kinézetét akarjuk megváltoztatni. Pl.: szín, méret, stb Részletes dokumentáció
- Érték: Leírja hogy az adott tulajdonság hogy jelenjen meg Pl.: a keret tulajdonsghoz értékként meg tudjuk adni hogy piros színű legyen.
JavaScript
A JavaScript egy programnyelv, leggyakrabban ezt használjuk a böngészőben. A html és a css kóddal együtt betölti a böngésző és elindítja. A részletes dokumentációja itt található. A JS-t nagyon sok dologra használhatjuk:
- HTML elemek létrehozása, módosítása
- HTML elemek kinézetének a beállítása
- A böngésző különböző képességeit ezen keresztül használhatjuk, itt a részletes lista
A frontend program futtatása
Amikor beírunk egy url-t a böngészőbe, a böngésző letölti a html kódot. Abban benne vannak a hivatkozások a js és a css kódokra, azok alapján letöltődik a többi kód is. Ezután a böngésző elkezdi feldolgozni a kódokat, a következő lépésekben:
1. DOM (Document Object Model) létrehozása
A DOM a böngészők belső adatszerkezete az oldal reprezentálására. A böngésző beolvassa a html kódot, értelmezi és ebből előállítja a DOM-ot. Ezen keresztül lehet JavaScrittel módosítani az oldal szerkezetét, tartalmát.
2. DOM elemek kinézetének a kiszámolása
Miután létrejött a DOM, a böngésző minden elemhez (ami megjelenhet) megkeresi a hozzá tartozó css szabályokat (css szelektorok alapján). Több szabály is vonatozhat egy elemre, ezeket a böngésző összefésüli és az így kiszámított tulajdonságokkal megjeleníti a képernyőn az elemeket.
3. Renderelés
Kirajzolja a képernyőre weblapnak azokat a részeit aminek látszania kell.
4. Események figyelése
Esemény sokféle lehet pl.: kattintás, időzítő lejár, stb. Amikor érzékeli a böngésző hogy valami történt, lefuttatja a hozzá tartozó JS kodót (ha van ilyen beállítva), ami utána tudja módosítani a DOM-ot.