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

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.