Webové techológie 1N

O predmete

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

Stretnutia

51. Typescript - Higher-order funkcie v poliach

pdf iconVybrané súčasti Javascriptu github iconZdrojáky z výučby

Pokračujeme zo Star Wars úlohami.

Úlohy:

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

50. Typescript - Higher-order funkcie v poliach

pdf iconVybrané súčasti Javascriptu github iconZdrojáky z výučby

Pokračujeme zo Star Wars úlohami.

Úlohy:

  1. Vráťte mená všetkých postáv usporiadané podľa mena:
    [ 'Ackbar', 'Adi Gallia', 'Anakin Skywalker', 'Arvel Crynyd', 'Ayla Secura',... ]
  2. Vypíšte mená všetkých postáv usporiadané podľa "priezviska": 
    [ 'Ackbar', 'Mas Amedda', 'Padmé Amidala', 'Wedge Antilles', 'Raymus Antilles',... ]
  3. 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', ... ]
  4. 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: [] },... ]

48. Typescript - Higher-order funkcie v poliach

pdf iconVybrané súčasti Javascriptu github iconZdrojáky z výučby

Pokračujeme s higher-order funkciami v poliach.

Úlohy:

  1. 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. 
      [
   {"langName":"Pashto","population":27657145},
   {"langName":"Uzbek","population":27657145},
   {"langName":"Turkmen","population":27657145},
   {"langName":"Swedish","population":28875},
   ...]
    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
  ...

47. Typescript - Higher-order funkcie v poliach

pdf iconVybrané súčasti Javascriptu github iconZdrojáky z výučby

Pokračujeme s higher-order funkciami v poliach.

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

46. Typescript - Higher-order funkcie v poliach

pdf iconVybrané súčasti Javascriptu github iconZdrojáky z výučby

Pokračujeme s higher-order funkciami v poliach. Povieme si ako reťaziť funkcie prostredníctvom rúry.

Úlohy:

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

45. Typescript - Higher-order funkcie v poliach

pdf iconVybrané súčasti Javascriptu github iconZdrojáky z výučby

Pokračujeme s higher-order funkciami v poliach - flat, flatMap, reduce a reduceRight.

Úlohy:

  1. Vráťte pole s názvami európskych krajín.
  2. 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' },
    ...
  ]
  3. 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'},
    ...
  ]

44. Typescript - Higher-order funkcie v poliach

pdf iconVybrané súčasti Javascriptu github iconZdrojáky z výučby

Porovnáme si klasické a arrow funkcie a použitie this v nich. Vysvetlíme si základné higher-order funkcie v poliach - forEach, filter, map. 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.

43. CSS, Javascript - clip-path, scroll, vybrané súčasti Javascriptu

pdf iconVybrané súčasti Javascriptu github iconZdrojáky z výučby

Dokončíme si rozprávanie o CSS pre tento rok krátkou ukážkou použitia clip-path v kombinácii so skrolovaním. Potom sa začneme baviť hlbšie o jazyku Javascript. 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

38. CSS - responzívne tabuľky, formuláre s validáciou

github iconZdrojáky z výučby

Dnes sa budeme venovať naprv použitiu pseudoelemenov pri tvorbe responzívnej tabuľky a potom prejdeme na štýlovanie formulárov, vrátanie štýlovania validity aj s hláškami na spätnú väzbu. Využijeme pri tom významne CSS premenné.

34. CSS - Grid layout

pdf iconweby-css-12-grid.pdf github icon16. zadanie - Grid github iconZdrojáky z výučby

Na začiatok dorobíme animovanú galériu a potom si ukážeme veľkého "konkurenta" Flexboxu na nastavovanie rozmiestnenia obsahu a to Grid layout. Zadanie je iba na precvičovanie počas hodiny, nie ako domáca úloha.

33. CSS - @container queries

pdf iconweby-css-11-media-queries.pdf github iconZdrojáky z výučby

Dorobíme si responzívny navbar, pričom si precvičíme aj flexbox a javascript. Ukážeme si nastavovanie responzivity na základe veľkosti kontajnerov. Začneme animovanú galériu.

32. CSS - @media queries

pdf iconweby-css-11-media-queries.pdf github iconZdrojáky z výučby

Dokončíme projekt s rotačnou stránkou. Porozprávame sa o responzivite stránok. Ukážeme si klasické @media dopyty podľa vlastností max-width a min-width, ale aj modernejšie možnosti @media dopytov.

31. CSS - Zmena tried v DOM cez Javascript

pdf iconweby-css-10-js.pdf github iconZdrojáky z výučby

Ukážeme si, ako cez Javascript meniť triedy elementom v DOM modeli. Spravíme si projekt s rotačnou stránkou.

29. CSS - Flexbox IV

github iconZdrojáky z výučby

Spoločne si doklepneme návrh stránky z minula a zahráme sa so žabkami.

19. CSS - Projekt Hrnčiar

pdf iconweby-css-05-selektory.pdf github iconZdrojáky z výučby

Dokončíme projekt stránky tvorcu keramiky. Začneme rozprávanie o súdoreneckých spojkách v selektoroch a atribútových selektoroch.

18. CSS - Projekt Hrnčiar

github icon9. zadanie - Hrnčiar github iconZdrojáky z výučby

Dnes dáme novým veciam na chvíľu pokoj. Budeme spoločne vytvárať trochu komplexnejšiu webstránku pre tvorcu keramiky.

17. CSS - box model 2

pdf iconweby-css-04-box_model.pdf github iconZdrojáky z výučby

Prejdeme si náš projekt vizitka a porozprávame o ďalších vlastnostiach súvisiacich s box modelom - tieňovaní, rámčekoch outline, flexibilných veľkostiach a ako sa vysporiadať s obsahom, ktorý do bloku nevojde.

16. CSS - box model

pdf iconweby-css-04-box_model.pdf github icon8. zadanie - Vizitka github iconZdrojáky z výučby

Porozprávame asi najdôležitejšiu súčasť CSS a to je box model. Predstavíme si jeho hlavné súčasti content, padding, border a margin. Pri ich nastavovaní nemôžeme vynechať okrem absolútnych aj relatívne veľkosti týchto vlastností a ich kombináciu. Povieme si o tom, ako tieto vlastnosti fungujú pre inline, inline-block a block elementy aj ako medzi nimi prepínať cez vlastnosť display. Na záver si povieme o zaobľovaní rámčekov.

13. CSS - fonty, texty

pdf iconweby-css-02-fonty-texty.pdf github iconZdrojáky z výučby

Budeme sa venovať nastavovaniu vlastností fontov - family, size, weight, style, align. Nastavíme si medzery v písme, výšku písma. Povieme si ako použiť externé fonty z Google fonts. Dnes domáca nebude, užite si prázdniny.

7. HTML - Špeciálne znaky a tagy, funkčné elementy

pdf iconweby-html-04.pdf github iconZdrojáky z výučby

Povieme si o tom, ako sa vkladajú do HTML špeciálne znaky cez HTML Entity. Z rýchlika si predstavíme niekoľko nesémantických elementov ako <meter>, <progress>, <details>, <dialog>, <pre>, <template>, <iframe>, <video> a podobne. Dnes domáca nebude.

6. HTML - formuláre II

pdf iconweby-html-03.pdf github icon3. zadanie - Dotazník github iconZdrojáky z výučby

Prejdeme si formulárové elementy - input typy text, password, number, email, color, ale aj elementy textarea, select, radio, checkbox, range a fieldset. Zadanie treba vypracovať do nedele 5.10.2025 18:00.

3. Commit a push do git úložiska. Editovanie HTML.

github icon1. zadanie - Vlk dravý github iconZdrojáky z výučby

Dokončíme si skúšanie práce s gitom s našim prvým zadaním aj so zdrojákmi z výučby. Ukážeme si ako efektívne pracovať s Visual Studio Code.

1. Nastavenie prostredia

github icon1. zadanie - Vlk dravý

Rozbeháme si prostredie - nainštalujeme si Git, Visual Studio Code, vytvoríme si kontá na Githube a vytvoríme si svoj repozitár prvého zadania v classroom.github.com.