Kliensoldali Fejlesztés

2023 tavaszi szemeszter

A tantárgy célja, hogy a hallgatók megfelelő ismereteket szerezzenek a kliensoldali fejlesztés témakörében. Megtanulják a web alapjaként szolgáló HTML leíró nyelvet, kiegészítve a stíluslapokkal CSS, így saját struktúrákat, elrendezéseket képesek kialakítani. Megtanulnak használni külső stíluskönyvtárakat is (pl. Bootstrap, Material UI stb.). Megtanulják a JavaScript kliensoldali nyelv alapvető működését, nyelvi sajátosságait. Megismerkednek a következő fogalmakkal: DOM, Web APIs, events, JSON, jQuery, AJAX, TypeScript, lifecycle, cookie. Megismerkednek a Vue keretrendszer alapjaival, adatkötéssel, CDN felhasználással. Megismerkednek az Angular keretrendszerrel részletesebben.

hivatalos követelmények

Figyelem!

Minden információ a Teams csoportban került kihirdetésre a tárgyat aktuálisan végző hallgatók számára.

GitHub Repo

A tárgy előadásain felhasznált és bemutatott kész kódok, valamint a laborgyakorlatokhoz tartozó workshop feladatok.

megnézem

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.

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.

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.

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)).

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.

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.

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.

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: JS Keretrendszerek, Vue alapok

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 Vue keretrendszer bemutatása (felhasználása vue cli, illetve CDN-en keresztül), strukturális felépítése, vue2 és vue3 közötti különbségek ismertetése. Gyakorlati alkalmazás létrehozása Vue segítségével (adatkötés és API kezelés bemutatása), a vue lifecycle megismerésével. Komplex gyakorlati alkalmazás létrehozása komponens alapú fejlesztéssel.

CDN cli lifecycle vue virtual DOM data binding v-model v-for .vue component computed property

Modul 9: TypeScript, Angular alapok

A tech stack fogalmának megismerése és az elterjedt alternatívák vizsgálata. A TypeScript nyelv megismerése, alapvető példák bemutatása. 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).

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.

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.

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.

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