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

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

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

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

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

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

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

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

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

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

2. NodeJS + EJS

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.