Webové techológie 2N

O predmete

Predmet Webové technológie je určený pre študentov Košickej akadémie softvérového vývoja, druhý ročník. Predmet poskytuje vedomosti a skúsenosti v práci s Javascript-om, Typescript-om a frameworkom Angular.

Stretnutia

27. Angular - HttpOptions, token v HTTP hlavičke

jar file iconfilms-server.jar github iconhttps://gitlab.kosickaakademia.sk/wt2024/films

Vytvoríme si nový komponent na zobrazovanie zoznamu filmov. Ukážeme si, ako sa vkladá token do HTTP hlavičky. Vytvoríme si servis na získanie filmov zo servera. Vytvoríme si komponent zobrazujúci filmy v tabuľke s pagináciou, usporiadaním a filtráciou na strane servera pomocou signálov a rxResource.

23. Angular - validátory a reaktívne formuláre

pdf iconAngular - deviata časť jar file iconfilms-server.jar github iconhttps://gitlab.kosickaakademia.sk/wt2024/films

Vytvoríme si komponent na registráciu používateľov a zrealizujeme neoverenú registráciu. Ukážeme si zabudované validátory, aj ako ich aktivovať v template-driven formulároch. Predstavíme si alternatívnu formu prepojenia DOM modelu a dát - reaktívne formuláre. Porovnáme ich s template-driven prístupom.

17. Angular - komunikácia komponentov rodič-dieťa, validácia v template-driven formulároch

pdf iconAngular - piata časť jar file iconfilms-server.jar github iconhttps://gitlab.kosickaakademia.sk/wt2024/users-management

Ukážeme si vytvorenie pomocného modelu pre zoznam checkboxov. Predstavíme si niekoľko validačných direktív a validačné hodnoty, ktoré sú použiteľné pre vizualizáciu. Zrealizujeme mazanie používateľa aj s jednoduchým konfirmačným oknom. Vysvetlíme si použitie komunikácie komponentov rodič-dieťa cez @Input a @Output premenné. Použijeme novú metódu životného cyklu ngOnChanges(), ktorá je volaná, keď sa zmenia @Input premenné.

10. Higher-order funkcie v poliach V

pdf iconVybrané súčasti Javascriptu github iconhttps://gitlab.kosickaakademia.sk/wt2024/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' ] },
  ...]

9. Higher-order funkcie v poliach IV

pdf iconVybrané súčasti Javascriptu github iconhttps://gitlab.kosickaakademia.sk/wt2024/countries

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

Úlohy:

  1. 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 km2 zaokrúhlenú na 2 desatiné miesta.
  2. 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
  ...

8. Higher-order funkcie v poliach III

pdf iconVybrané súčasti Javascriptu github iconhttps://gitlab.kosickaakademia.sk/wt2024/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:

  1. 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 }, 
    ...
  ]

7. Higher-order funkcie v poliach II

pdf iconVybrané súčasti Javascriptu github iconhttps://gitlab.kosickaakademia.sk/wt2024/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:

  1. 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'},
    ...
  ]
  2. 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',...],
    ...
  }
  3. 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',...]},
    ...
  ]

6. Higher-order funkcie v poliach

pdf iconVybrané súčasti Javascriptu github iconhttps://gitlab.kosickaakademia.sk/wt2024/countries

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. Vysvetlíme si základné higher-order funkcie v poliach - forEach, filter, map, flat, flatMap, reduce a reduceRight. 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' },
    ...
  ]

5. CSS

github iconZadanie - Transylwahnja2

Samostatne si zopakujte tému CSS, so špeciálnym zameraním na poziciovanie a responzívny dizajn (Flexbox, Grid, @media)

Riešenie nasledovných úloh zašlite cez classrom githubu do piatka 27.septembra 2024. Na stránke má fungovať navigácia na stránky domov, kompostovanie a kompostovanie_galeria a výsledné HTML má byť validné. Pre CSS majú platiť nasledovné vlastnosti:

  1. Hlavný layout: zabezpečte, že šírka obsahu je maximálne 1000px. Pre užšie displaye ako 1000px nech je šírka 100%.
  2. Trojstĺpcový formát zmeňte pre stredne široké displeje na dvojstĺpcový a pre veľmi úzke na jednostĺpcový - pravý panel sa presúva pod hlavnú sekciu a ľavé menu sa schová pod hamburgerové toggle tlačidlo.
  3. Naštýlujte fotogalégiu na adrese http://localhost:8080/kompostovanie_galeria tak, aby obrázky boli umiestnené v rámčekoch s rovnakou veľkosťou, pričom fotky s popiskom majú v rámčeku aj popis. Počet vedľa seba umiestnených fotiek záleží od šírky displeja. V prípade veľmi úzkych displejov (keď už máme iba jednostĺpcový formát stránky) sú obrázky oddelené iba horizontálnou čiarou namiesto rámčeka.
  4. Cez @Media query nastavte pre tlačiareň zneviditeľnenie menu a pravého panela a zmenu farieb na čierne a biele (využite print media simuláciu v prehliadači).
  5. Zabezpečte pre celý web, aby sa žiadne elementy neprekrývali a aby nevytŕčali z hlavného obsahu alebo okna pri všetkých šírkach.

4. EJS

pdf iconNodeJS + EJS github iconZdrojáky z výučby

Zvýrazníme vybranú položku v menu. Vygenerujeme novinky a pagináciu. Dorobíme HTML pre galériu kompostovania.

2. NodeJS + EJS

pdf iconNodeJS + EJS github iconZdrojáky z výučby

Na začiatku si spoločne zladíme HTML zo zadania z minulého stretnutia. Spravíme dynamický web s pomocou EJS: Rozkrájame stránku na hlavičku, pätičku, bočnú navigáciu a hlavný obsah. Zobrazíme správnu podstránku v závislosti od url adresy.