Követelmények

https://nik.uni-obuda.hu/targyleirasok/tantargyak/kliensoldali-fejlesztes/

Tárgy weboldala

https://nik.siposm.hu/kf

Modul-1: HTML és CSS alapok

Kliensoldali fejlesztéssel kapcsolatos tématerületek áttekintése. A leíró nyelvek megismerése (HTML, markdown, Tex). A szerver-kliens alapú kommunikáció folyamata. Alapvető HTML oldal létrehozása és saját stílusokkal történő kiegészítése CSS segítségével. A head elem részletes bemutatása.

  1.01 Bevezető, tárgyismertető
  1.02 Frontend roadmap
  1.03 Leíró nyelvek
  1.04 A HTML leíró nyelv
  1.05 Egyéb leíró nyelvek
  1.06 Szerver-kliens kapcsolat
  1.07 Feladatmegoldás: alap HTML oldalak
  1.08 CSS alapok
  1.09 Feladatmegoldás: CSS alkalmazása
  1.10 A head elem

Kulcsszavak: HTML CSS markdown TeX

Modul-2: HTML és CSS haladó ismeretek

A CSS haladó funkcióinak valamint további HTML elemeknek a megismerése. Oldalstruktúra kialakítása (div, flexbox, grid). Webergonómia, tipográfia, UI és UX alapismeretek. Reszponzív alkalmazás készítésének alapelvei. CSS extra lehetőségek.

  2.01 CSS haladó ismeretek I.
  2.02 HTML további elemek
  2.03 Oldalstruktúra kialakítása
  2.04 CSS haladó ismeretek II.
  2.05 CSS haladó ismeretek III.
  2.06 Webergonómia, tipográfia, UI és UX
  2.07 Reszponzivitás
  2.08 CSS extrák
  2.09 Feladatmegoldás
  2.10 Feladatmegoldás kiegészítő

Kulcsszavak: HTML CSS flexbox div grid box shadow gradient border radius margin padding px em rem

Modul-3: JavaScript alapok, nyelvi sajátosságok

A JavaScript nyelv története, nyelvi sajátosságai (típusok, változótípusok, operátorok, függvények, objektumok és osztályok). A DOM megismerése. DOM elemek lekérdezése és módosítása. Felületi elemek programozása. Stílusok és stíluslapok programozott előállítása. Oldalbetöltés folyamata. Események kezelése.

  3.01 Bevezető
  3.02 JS történelem, nyelvi alapok és sajátosságok
  3.03 Szerver-kliens kommunikáció
  3.04 Feladatmegoldás, fejlesztői környezet bemutatása
  3.05 Típusok, függvények, osztályok és objektumok
  3.06 Feladatmegoldás: objektumok tömbje és annak feldolgozása
  3.07 DOM - document object model
  3.08 DOM manipuláció (olvasás)
  3.09 Feladatmegoldás: DOM elemek lekérése
  3.10 DOM manipuláció (írás)
  3.11 Feladatmegoldás: DOM elemek létrehozása
  3.12 Stílusok programozott elérése
  3.13 Feladatmegoldás: események kezelése

Kulcsszavak: ECMAScript == vs === DOM document object model attribute style classList alert querySelector getElementBy... object class JSON page load render onClick eventHandler high-level prototype-based object-oriented multi-paradigm interpreted just-in-time compiled dynamic single-threaded garbage-collected first-class functions event loop concurrency model

Modul 4: JavaScript középhaladó ismeretek

Haladó eseménykezelés a JavaScript-ben. Események paraméterezése, eseményobjektum, események továbbadása (buborékozás, delegálás), saját események létrehozása. Gyakorlati feladatmegoldások (interaktív to do lista készítése, automatizált képcserélés, rajzolás, felhasználó eltérítése (~erőltetett hirdetés)).

  4.01 Bevezető
  4.02 Haladó eseménykezelés I.
  4.03 Feladat: eseményobjektum
  4.04 Haladó eseménykezelés II., Feladat: események továbbítása
  4.05 Saját események létrehozása
  4.06 Feladat: Automatizált képfrissítő
  4.07 Feladat: Rajzolás
  4.08 Feladat: Felhasználó eltérítése
  4.09 Feladat: To do alkalmazás készítése

Kulcsszavak: createElement addEventListener appendChild querySelector setTimeout setInterval toggle keyPress classList event bubbling event capturing

Modul 5: JavaScript haladó ismeretek I

További JS nyelvi elemek és adatszerkezetek használata. Web APIk és a BOM megismerése. Kódszervezés modulba rendezett file-ok segítségével. Egységbezárás osztályok esetén és a this kulcsszó vonatkozása. Adat helyének meghatározása, illetve az adat leképezése generáláson keresztül. Imperatív és deklaratív felhasználói felület kezelése. Progresszív webalkalmazás (weboldal vs webalkalmazás) fejlesztésének bemutatása, a GD és PE koncepciókon keresztül.

  5.01 Bevezető
  5.02 További JS nyelvi elemek
  5.03 Adatszerkezetek
  5.04 Web API-k (BOM, window)
  5.05 Kódszervezés (modulok használata)
  5.06 Egységbezárás
  5.07 Adattárolás (adat leválasztása, HTML generálás)
  5.08 Imperatív és deklaratív UI kezelés
  5.09 Progresszív weboldal fejlesztés (weboldal vs webalkalmazás)
  5.10 Feladat: Dolgozó kezelő alkalmazás dark-mode támogatással

Kulcsszavak: typeof Date array Map BOM browser object model web APIs window setTimeout setInterval import export module class DOM imperative declarative graceful degradation progressive enhancement dark mode render this

Modul 6: JavaScript haladó ismeretek II

Haladó ismeretek bővítése az alábbi fogalmak megismerésével: callback függvény, promise-ok létrehozása és kezelése, az async-await páros felhasználása. A CORS jelenség bemutatása. Beépített tömb metódusok megismerése és használata. Komplex feladat megoldása backend API hívásokkal (Fetch API-t és Promise-okat felhasználva), melyeken keresztül lehet hallgatókat listázni, új hallgatót felvenni, meglévő hallgatót módosítani.

  6.01 Bevezető
  6.02 Callback
  6.03 Promise
  6.04 Async-await
  6.05 CORS
  6.06 Array methods
  6.07 Feladat: GET API (hallgatók lekérése)
  6.08 Feladat: POST API (hallgató felvitele)
  6.09 Feladat: DELETE API (hallgató törlése)
  6.10 Feladat: Array method felhasználás

Kulcsszavak: fetch GET POST DELETE API postman swagger promise callback async await CORS filter reduce map forEach findIndex sticky navbar

Modul 7: JavaScript haladó ismeretek III

Haladó ismeretek bővítése a JS működési hátterének megismerésével. JS Engine és Runtime fogalmak megismerése és a hozzájuk szorosan kapcsolódó további fogalmak (compilation, interpretation, JIT, AST, event loop, execution context, call stack, scope chain, hositing, TDZ). Valódi párhuzamosságra alkalmas módszer megismerése. Az AJAX technológia és annak jelentőségének megismerése.

  7.01 Bevezető
  7.02 JS engine
  7.03 AST
  7.04 JS runtime, Event loop
  7.05 Execution context, Call stack
  7.06 Scope chain
  7.07 Hoisting, TDZ
  7.08 Web workers
  7.09 AJAX

Kulcsszavak: compilation interpretation JIT just in time compilation AST abstract syntax tree engine runtime event loop execution context call stack callback queue scope chain global scope function scope local scope block scope var let const hoist TDZ temporal dead zone

Modul 8: Programozás TypeScript-ben

A TypeScript nyelv megismerése, alapvető példák bemutatása. Komplexebb, rétegzett alkalmazás készítése TS-ben.

  8.01 Bevezető
  8.0x todo
  8.0x todo
  8.0x todo

Kulcsszavak: todo todo todo

Modul 9: JS keretrendszerek, Angular alapismeretek

A JavaScript keretrendszerek és library közötti különbség bemutatása. A jQuery megismerése, történelmi áttekintése. A JavaScript aktuális helyzete a piacon (state of JS). Template engine-k és a virtual DOM jelentőségének bemutatása a modern keretrendszerek esetén. A tech stack fogalmának megismerése és az elterjedt alternatívák vizsgálata. Angular projekt létrehozására szolgáló opciók megismerése. Angular projekt futtatása, Angular CLI-on keresztül (ng serve), vagy NPM-en keresztül (npm start). Angular alkalmazás fájlstruktúrájának megismerése, valamint az alapvető nyelvi elemek megismerése (ciklus, if, adatkötés, típusosság).

  9.01 Bevezető
  8.02 Framework vs library
  8.03 Template engine
  8.04 Virtual DOM
  8.05 State of JS
  9.02 Tech stack
  9.05 Angular (projekt létrehozás (node, npm))
  9.06 Angular (alkalmazás futtatás (node, ng))
  9.07 Angular alapvető nyelvi elemek megismerése

Kulcsszavak: CDN cli lifecycle vue virtual DOM data binding tech stack JAM MEAN LAMP ng serve npm start node typescript angular

Modul 10: Angular középhaladó ismeretek

To Do alkalmazás készítése Angular segítségével. Adatkötés (tömb, input mezők) és típusok (TypeScript) használata. Keretrendszeri elemek használata: ngFor, click, class és value adatkötése. Fetch API használata.

  10.01 Bevezető
  10.02 Projekt inicializálás
  10.03 Adatbetöltés fetch API-val
  10.04 Elemek megjelenítése
  10.05 Elemek törlése
  10.06 Új elem felvitele
  10.07 Port beállítás

Kulcsszavak: fetch binding [(ngModel)] [value] [class] (click) ngFor FormsModule app.module.ts

Modul 11: Angular haladó ismeretek I

Több komponensből felépülő, User és Comment kezelő CRUD alkalmazás készítése Angular keretrendszerben. Routing felhasználás a navigációban. Komponensek közötti kommunikáció, adattovábbítás. Bootstrap elemek felhasználása.

  11.01 Bevezető
  11.02 Projekt inicializálás
  11.03 Komponensek létrehozása
  11.04 Navigáció és routing beállítása
  11.05 Felhasználók listázása (táblázat)
  11.06 Felhasználók törlése
  11.07 Felhasználók szerkesztése (komponens paraméter átadás)
  11.08 Kommentek listázása (card)
  11.09 Felhasználó keresése (komponens paraméter átadás)
  11.10 Hibaüzenet (feltételes megjelenítés)

Kulcsszavak: component ng g c binding [src] [(ngModel)] (click) httpClient [routerLink] navigateByUrl GET DELETE PUT scss Sass CSS

Modul 12: Angular haladó ismeretek II

Több komponensből felépülő, Teacher és Subject (valamint a köztük található reláció) kezelő CRUD alkalmazás készítése Angular keretrendszerben. Routing felhasználás a navigációban. Auth guard alkalmazása (csak authentikált felhasználók számára elérhető komponensek). Komponensek közötti kommunikáció, adattovábbítás. Angular Material UI és annak komponenseinek felhasználása. Regisztráció és bejelentkezés implementálása JWT token és localstorage segítségével.

  12.01 Bevezető
  12.02 Projekt inicializálás, Angular Material UI telepítés
  12.03 Alap komponensek létrehozása, routing beállítás
  12.04 Routing és navigáció
  12.05 Tárgyak listázása
  12.06 Oktatók listázása
  12.07 Regisztráció
  12.08 Bejelentkezés (JWT token)
  12.09 Route védelem (auth guard)
  12.10 Oktató és tárgy módosítása, törlése
  12.11 Oktató és tárgy létrehozása
  12.12 Oktató és tárgy összerendelése

Kulcsszavak: MUI Material UI auth guard routing login logout JWT localstorage bearer token registration snackbar validation service navigation component ng g c binding [src] [(ngModel)] (click) httpClient [routerLink] PUT POST GET DELETE scss Sass CSS ActivatedRoute filter map