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

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

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.