Webové techológie 2N

15. Angular - Material SnackBar. univerzálne spracovanie HTTP chýb

5. november 2025

Angular - tretia časť Angular - štvrtá časť films-server.jar https://gitlab.kosickaakademia.sk/wt-2n-2025-26/users-management

Vytvoríme si službu na vypisovanie informačných a chybových správ cez Matrerial Snackbar. Napíšeme si univerzálnu ochytávaciu metódu na HTTP chyby.

14. Angular - Prihlasovanie

3. november 2025

Angular - tretia časť films-server.jar https://gitlab.kosickaakademia.sk/wt-2n-2025-26/users-management

Dokončíme prihlasovanie.

13. Angular - router, ng-model

27. október 2025

Angular - druhá časť Angular - tretia časť films-server.jar https://gitlab.kosickaakademia.sk/wt-2n-2025-26/users-management

Nastavíme základný router aj s presmerovaním a odchytením všetkých zlých URL adries. Vytvoríme si komponent na prihlasovanie a spracujeme prihlásenie v službe.

12. Angular - Material knižnica, router, Material table

22. október 2025

Angular - druhá časť films-server.jar https://gitlab.kosickaakademia.sk/wt-2n-2025-26/users-management

Ukážeme si na príklade tabuľky používateľov použitie Material knižnice a to rovno cez komponent mat-table s jednoduchými stĺpcami mat-text-column. Na zobrazenie in0ho komponentu použijeme router.

11. Angular - servisy, komunikácia so serverom, Observable

20. október 2025

Angular - druhá časť films-server.jar https://gitlab.kosickaakademia.sk/wt-2n-2025-26/users-management

Vytvoríme si service a napojíme sa na REST server. Pohráme sa so spracovaním rôznych druhov HTTP odpovedí.

Server spustíme v konzole, ak máme nainštalovanú javu aspoň vo verzii 17, príkazom: java -jar films-server.jar

10. Angular - komponenty

15. október 2025

Angular - prvá časť Angular - druhá časť https://gitlab.kosickaakademia.sk/wt-2n-2025-26/users-management

Porozprávame si o entitách a princípe MVC v komponentoch, vytvoríme si službu na správu zoznamu používateľov.

9. Angular - vytvorenie projektu, komponenty

13. október 2025

Angular - prvá časť https://gitlab.kosickaakademia.sk/wt-2n-2025-26/users-management

Vytvoríme si Angular projekt, vysvetlíme si základnú štruktúru, vytvoríme si nový komponent a vypíšeme hodnoty signálnych premenných.

8. Higher-order funkcie v poliach VII

8. október 2025

Vybrané súčasti Javascriptu https://gitlab.kosickaakademia.sk/wt-2n-2025-26/countries

Budeme pracovať s JSON dokumentmi získanými z adresy https://swapi.dev/ podľa úloh uvedených nižšie.

Úlohy:

5. Vráťte mená všetkých postáv spolu s ich živočíšnym druhom v tvare:

   [ { name: 'Luke Skywalker', specimen: [] },
   { name: 'C-3PO', specimen: [ 'Droid' ] },
   { name: 'R2-D2', specimen: [ 'Droid' ] },
   { name: 'Darth Vader', specimen: [] },... ]

6. Vráťte pre každú planétu, aké postavy tam žijú v tvare:

   [ { planet: 'Tatooine',
       people: [ {'name':'Luke Skywalker','url':'https://swapi.dev/api/people/1/'},
                 {'name':'C-3PO','url':'https://swapi.dev/api/people/2/'},
                 {'name':'Darth Vader','url':'https://swapi.dev/api/people/4/'},
                 ...]},
     { planet: 'Alderaan', 
       people: [ {"name":"Leia Organa","url":"https://swapi.dev/api/people/5/"},
                 {"name":"Bail Prestor Organa","url":"https://swapi.dev/api/people/68/"},
                 {"name":"Raymus Antilles","url":"https://swapi.dev/api/people/81/"}
                 ...] },
     { planet: 'Yavin IV', 
       people: [] },...]

7. Vráťte pre každú planétu, aké živočíšne druhy na nej poznáme v tvare:

   [ { planet: 'Tatooine', species: [ 'Droid' ] },
     { planet: 'Alderaan', species: [ 'Human' ] },
     { planet: 'Yavin IV', species: [] },
     ...
     { planet: 'Naboo', species: [ 'Droid', 'Gungan', 'Human' ] },
     ...]

7. Higher-order funkcie v poliach VI

6. október 2025

Vybrané súčasti Javascriptu https://gitlab.kosickaakademia.sk/wt-2n-2025-26/countries

Budeme pracovať s JSON dokumentmi získanými z adresy https://swapi.dev/ podľa úloh uvedených nižšie.

Úlohy:

1. Vráťte mená všetkých postáv v tvare:

   [ 'Luke Skywalker', 'C-3PO', 'R2-D2', 'Darth Vader',... ]

2. Vráťte mená všetkých postáv usporiadané podľa mena:

   [ 'Ackbar', 'Adi Gallia', 'Anakin Skywalker', 'Arvel Crynyd', 'Ayla Secura',... ]

3. Vypíšte mená všetkých postáv usporiadané podľa "priezviska":

   [ 'Ackbar', 'Mas Amedda', 'Padmé Amidala', 'Wedge Antilles', 'Raymus Antilles',... ]

4. Vráťte mená všetkých postáv filmu Impérium vracia úder zoradené podľa dĺžky celého mena od najkratších. V rámci rovnakých dĺžok nech sú usporiadané ako reťazce (podľa mena):

   [ 'Yoda', 'Bossk', 'C-3PO', 'IG-88', 'Lobot', 'R2-D2', 'Han Solo', ... ]

5. Vráťte mená všetkých postáv spolu s ich živočíšnym druhom v tvare:

   [ { name: 'Luke Skywalker', specimen: [] },
   { name: 'C-3PO', specimen: [ 'Droid' ] },
   { name: 'R2-D2', specimen: [ 'Droid' ] },
   { name: 'Darth Vader', specimen: [] },... ]

6. Vráťte pre každú planétu, aké postavy tam žijú v tvare:

   [ { planet: 'Tatooine',
       people: [ {'name':'Luke Skywalker','url':'https://swapi.dev/api/people/1/'},
                 {'name':'C-3PO','url':'https://swapi.dev/api/people/2/'},
                 {'name':'Darth Vader','url':'https://swapi.dev/api/people/4/'},
                 ...]},
     { planet: 'Alderaan', 
       people: [ {"name":"Leia Organa","url":"https://swapi.dev/api/people/5/"},
                 {"name":"Bail Prestor Organa","url":"https://swapi.dev/api/people/68/"},
                 {"name":"Raymus Antilles","url":"https://swapi.dev/api/people/81/"}
                 ...] },
     { planet: 'Yavin IV', 
       people: [] },...]

7. Vráťte pre každú planétu, aké živočíšne druhy na nej poznáme v tvare:

   [ { planet: 'Tatooine', species: [ 'Droid' ] },
     { planet: 'Alderaan', species: [ 'Human' ] },
     { planet: 'Yavin IV', species: [] },
     ...
     { planet: 'Naboo', species: [ 'Droid', 'Gungan', 'Human' ] },
     ...]

6. Higher-order funkcie v poliach V

1. október 2025

Vybrané súčasti Javascriptu https://gitlab.kosickaakademia.sk/wt-2n-2025-26/countries

Budeme pracovať s JSON dokumentom countries.json podľa úloh uvedených nižšie.

Úlohy:

9. Postupne vytvorte nasledovné funkcie a zreťazte ich cez pipe alebo flow:
   1. Vytvorte funkciu languageToCountArray, ktorá vráti pre každý výskyt jazyka objekt s názvom jazyka a počtom obyvateľov krajiny, kde ste tento jazyk našli.
   2. Vytvorte funkciu languageToCountObject, ktorá vezme výsledok predošlej metódy a vráti objekt, kde vlastnosti sú jazyky a hodnoty sú súčty počtov obyvateľov pre jednotlivé jazyky.

        {
          Pashto: 27657145,
          Uzbek: 59233545,
          Turkmen: 32408265,
          Swedish: 15415580,
          ...}

   3. Vytvorte funkciu arrayOfLanguages, ktorá vezme výsledok predošlej metódy a vráti pole, v ktorom pre každý jazyk máme objekt s názvom jazyka a počtom obyvateľov, ktorý týmto jazykom rozprávajú (predpokladáme, že každý obyvateľ, ktorý žije v krajine, kde sa používa, túto reč ovláda).

        [
          { language: 'Pashto', count: 27657145 },
          { language: 'Uzbek', count: 59233545 },
          { language: 'Turkmen', count: 32408265 },
        ...]

   4. Vytvorte funkciu sortArray, ktorá vezme výsledok predošlej metódy a usporiada ho od najväčších po najmenšie počty.
   5. Vytvorte funkciu topTen, ktorá vezme výsledok predošlej metódy a vráti pole iba prvých 10 objektov z pôvodného poľa.
   6. Vytvorte funkciu humanReadable, ktorá vezme výsledok predošlej metódy a vráti podobné pole, ale počty sú uvedené ako reťazce v tvare napr. "1.414 mld", teda číslo v miliardách zaokrúhlené na milióny a s pridaným reťazcom " mld".
   7. Vytvorte funkciu toString, ktorá vezme výsledok predošlej metódy a vráti reťazec obsahujúci výslednú tabuľku najpoužívanejších 10 jazykov aj s počtom ľudí teda:

        English: 2.655 mld
        Chinese: 1.414 mld
        Hindi: 1.296 mld
        ...

5. Higher-order funkcie v poliach IV

24. september 2025

Vybrané súčasti Javascriptu https://gitlab.kosickaakademia.sk/wt-2n-2025-26/countries

Povieme si ako reťaziť funkcie prostredníctvom rúry. Budeme pracovať s JSON dokumentom countries.json, podľa úloh uvedených nižšie.

Úlohy:

7. Vráťte pre každú menu, ktorá sa používa aspoň v 5 krajinách, krajiny, v ktorých sa ňou platí a ich počet. Výsledkom je usporiadané pole od najmenej používaných po najviac používané meny, teda:

     [ { currency: 'New Zealand dollar',
         countries: [ 'Cook Islands', 'New Zealand', 'Niue', 'Pitcairn', 'Tokelau' ],
         count: 5 },
       { currency: 'Central African CFA franc',
         countries: ['Cameroon', 'Central African Republic', 'Chad', 'Congo', 'Equatorial Guinea', 'Gabon'],
         count: 6 }, 
       ...
     ]

8. Vypíšte prvých 10 najhustejšie obývaných krajín - pre každú krajinu jej názov a hustotu obyvateľstva v počte ľudí na km² zaokrúhlenú na 2 desatiné miesta.
9. Domáce zadanie (dobrovoľné): Postupne vytvorte nasledovné funkcie a zreťazte ich cez pipe alebo flow:
   1. Vytvorte funkciu languageToCountArray, ktorá vráti pre každý výskyt jazyka objekt s názvom jazyka a počtom obyvateľov krajiny, kde ste tento jazyk našli.
   2. Vytvorte funkciu languageToCountObject, ktorá vezme výsledok predošlej metódy a vráti objekt, kde vlastnosti sú jazyky a hodnoty sú súčty počtov obyvateľov pre jednotlivé jazyky.

        {
          Pashto: 27657145,
          Uzbek: 59233545,
          Turkmen: 32408265,
          Swedish: 15415580,
          ...}

   3. Vytvorte funkciu arrayOfLanguages, ktorá vezme výsledok predošlej metódy a vráti pole, v ktorom pre každý jazyk máme objekt s názvom jazyka a počtom obyvateľov, ktorý týmto jazykom rozprávajú (predpokladáme, že každý obyvateľ, ktorý žije v krajine, kde sa používa, túto reč ovláda).

        [
          { language: 'Pashto', count: 27657145 },
          { language: 'Uzbek', count: 59233545 },
          { language: 'Turkmen', count: 32408265 },
        ...]

   4. Vytvorte funkciu sortArray, ktorá vezme výsledok predošlej metódy a usporiada ho od najväčších po najmenšie počty.
   5. Vytvorte funkciu topTen, ktorá vezme výsledok predošlej metódy a vráti pole iba prvých 10 objektov z pôvodného poľa.
   6. Vytvorte funkciu humanReadable, ktorá vezme výsledok predošlej metódy a vráti podobné pole, ale počty sú uvedené ako reťazce v tvare napr. "1.414 mld", teda číslo v miliardách zaokrúhlené na milióny a s pridaným reťazcom " mld".
   7. Vytvorte funkciu toString, ktorá vezme výsledok predošlej metódy a vráti reťazec obsahujúci výslednú tabuľku najpoužívanejších 10 jazykov aj s počtom ľudí teda:

        English: 2.655 mld
        Chinese: 1.414 mld
        Hindi: 1.296 mld
        ...

4. Higher-order funkcie v poliach III

22. september 2025

Vybrané súčasti Javascriptu https://gitlab.kosickaakademia.sk/wt-2n-2025-26/countries

Povieme si ako reťaziť funkcie prostredníctvom rúry. Budeme pracovať s JSON dokumentom countries.json, podľa úloh uvedených nižšie.

Úlohy:

5. Vráťte objekt, kde vlastnosti sú jazyky z Južnej Ameriky a ich hodnotami polia krajín z Južnej Ameriky, v ktorých sa nimi hovorí, teda:

     {
       Spanish: ['Argentina', 'Bolivia (Plurinational State of)', 'Chile',...],
       Portuguese: [ 'Brazil' ],
       English: [ 'Falkland Islands (Malvinas)', 'Guyana',...],
       ...
     }

6. Vráťte pole objektov s dvoma vlastnosťami, jazyk z Južnej Ameriky a krajiny z Južnej Ameriky, v ktorých sa ním hovorí, teda:

     [ { language: 'Spanish', countries: ['Argentina', 'Bolivia (Plurinational State of)', 'Chile',...]},
       { language: 'Portuguese', countries: [ 'Brazil' ]},
       { language: 'English', countries: [ 'Falkland Islands (Malvinas)', 'Guyana',...]},
       ...
     ]

7. Vráťte pre každú menu, ktorá sa používa aspoň v 5 krajinách, krajiny, v ktorých sa ňou platí a ich počet. Výsledkom je usporiadané pole od najmenej používaných po najviac používané meny, teda:

     [ { currency: 'New Zealand dollar',
         countries: [ 'Cook Islands', 'New Zealand', 'Niue', 'Pitcairn', 'Tokelau' ],
         count: 5 },
       { currency: 'Central African CFA franc',
         countries: ['Cameroon', 'Central African Republic', 'Chad', 'Congo', 'Equatorial Guinea', 'Gabon'],
         count: 6 }, 
       ...
     ]

3. Higher-order funkcie v poliach II

17. september 2025

Vybrané súčasti Javascriptu https://gitlab.kosickaakademia.sk/wt-2n-2025-26/countries

Vysvetlíme si ďalšie higher-order funkcie v poliach - flat, flatMap, reduce a reduceRight. Budeme pracovať s JSON dokumentom countries.json, podľa úloh uvedených nižšie.

Úlohy:

4. Vráťte pole všetkých jazykov, ktoré sa používajú Južnej Amerike bez duplicít, teda:

     [ { iso639_1: 'es', iso639_2: 'spa', name: 'Spanish', nativeName: 'Español' },
       { iso639_1: 'gn', iso639_2: 'grn', name: 'Guaraní', nativeName: "Avañe'ẽ" },
       { iso639_1: 'ay', iso639_2: 'aym', name: 'Aymara', nativeName: 'aymar aru'},
       ...
     ]

5. Vráťte objekt, kde vlastnosti sú jazyky z Južnej Ameriky a ich hodnotami polia krajín z Južnej Ameriky, v ktorých sa nimi hovorí, teda:

     {
       Spanish: ['Argentina', 'Bolivia (Plurinational State of)', 'Chile',...],
       Portuguese: [ 'Brazil' ],
       English: [ 'Falkland Islands (Malvinas)', 'Guyana',...],
       ...
     }

2. Higher-order funkcie v poliach

10. september 2025

Vybrané súčasti Javascriptu https://gitlab.kosickaakademia.sk/wt-2n-2025-26/countries

Vysvetlíme si základné higher-order funkcie v poliach - forEach, filter, map, flat, flatMap, reduce a reduceRight. Skúsime si nejaký Typescriptový súbor stranskriptovať a spustiť. Ak stihneme, budeme pracovať s JSON dokumentom countries.json podľa úloh uvedených nižšie.

Úlohy:

1. Vráťte pole s názvami všetkých krajín.
2. Vráťte pole s názvami európskych krajín.
3. Vráťte pole objektov s vlastnosťami name a area, popisujúce krajiny s počtom obyvateľov nad 100 miliónov, teda:

     [ { name: 'Bangladesh', area: '147570 km2' },
       { name: 'Brazil', area: '8515767 km2' },
       { name: 'China', area: '9640011 km2' },
       ...
     ]

1. Špecifiká Javascriptu

8. september 2025

Vybrané súčasti Javascriptu

Prejdeme si také súčasti jazyka JavaScript, ktoré sa v Jave nenachádzajú - globálne vs. lokálne premenné a konštanty, template strings, pravdivé a nepravdivé výrazy, rôzna práca s objektami a poľami, object destructuring, spread operátor, klasické vs. arrow funkcie a použitie this v nich.