4. diel - Využitie umelej inteligencie pri štúdiu programovania Nové

V minulej lekcii, Textové reťazce v JavaScripte, sme si ukázali, ako pracovať s textovými reťazcami, vysvetlili sme si použitie rôznych typov úvodzoviek a špeciálne znaky.

V tomto tutoriále sa naučíme využívať AI pri štúdiu programovania. Ukážeme si, ako pomocou umelej inteligencie lepšie pochopiť zložité koncepty a zrýchliť riešenie úloh, na ktorých bežne trávime veľa času.

Využitie AI pri štúdiu programovania

Učenie sa programovania môže byť občas náročné. Budeme sa stretávať s množstvom nových konceptov a nezvyčajných problémov. Dnešná doba nám však poskytuje AI nástroje, ktoré nám prácu aj štúdium veľmi uľahčia. Stačí sa ich naučiť správne používať. Nerozumieme nejakej téme? ChatGPT nám danú problematiku na základe našich otázok znovu vysvetlí a pomôže nám si danú tému osvojiť. Narazili sme na problém v nejakej úlohe? Nástroj Canvas ju s nami rozoberie av prípade potreby odporučí ďalší postup, opraví chyby a podobne. Strávili sme hodinu lúštením nášho kódu a nakoniec sme zistili, že celý problém zapríčinila chýbajúca zátvorka? Nie sme prví ani poslední – toto je skutočne viac ako bežné. Keď si osvojíme používanie AI nástrojov, bude riešenie podobných problémov otázkou niekoľkých sekúnd.

AI je nápomocná v mnohých ďalších oblastiach. Ako ju správne využívať, sa učíme v kurzoch Umelá inteligencia.

Potrebuješ poradiť? ChatGPT ti pomôže rýchlejšie ako lektor

Skvelým parťákom, a to nielen pri štúdiu, pre nás bude najmä ChatGPT. Zrozumiteľne nám vysvetlí zložitejšiu látku, prediskutuje s nami náročnejšie koncepty a dokáže navrhnúť aj riešenie technických problémov v našom počítači. Pre študentov našich rekvalifikačných kurzov sú samozrejme k dispozícii konzultácie s lektormi.

Vo väčšine prípadov však môžeme náš problém či otázku vyriešiť pomocou ChatGPT oveľa rýchlejšie a rovnako efektívne ako s lektorom.

ChatGPT je k dispozícii prostredníctvom mobilnej aplikácie alebo online na adrese chatgpt.com. V riešení problémov vie byť naozaj vynaliezavý a opýtať sa ho môžeme prakticky na čokoľvek:

Prompt pre ChatGPT - Základné konštrukcie jazyka JavaScript - Základné konštrukcie jazyka JavaScript

Pri komunikácii s chatbotom sa dozvieme množstvo zaujímavých informácií a pochopíme aj zložité koncepty, ktorých je v programovaní mnoho:

Odpoveď ChatGPT na zadaný prompt - Základné konštrukcie jazyka JavaScript - Základné konštrukcie jazyka JavaScript

Môžeme sa napríklad opýtať na látku, ktorá nám nie je jasná a ktorú by sme potrebovali dovysvetliť:

Vysvetli, na čo slúži v JavaScripte metóda constructor().

Odpoveď od ChatGPT
V JavaScripte metóda constructor() slúži ako špeciálna metóda triedy, ktorá sa automaticky volá pri vytvorení novej inštancie triedy. Jej hlavný účel je inicializácia objektu - teda nastavenie východiskových hodnôt vlastností objektu, prípadne vykonanie iných potrebných operácií pri jeho vzniku.
📌 Hlavné vlastnosti metódy constructor()
- Meno metódy musí byť presne constructor (nedá sa použiť iné).
- Môže prijímať parametre, ktoré potom slúžia na nastavenie vlastností objektu.
- V jednej triede môže byť iba jeden constructor().
- Pokiaľ žiadny constructor() výslovne nedefinuješ, JavaScript vytvorí východiskový konštruktor automaticky (bez parametrov).
🔧 Príklad použitia:
```
class Osoba {
  constructor(jmeno, vek) {
    this.jmeno = jmeno;
    this.vek = vek;
  }

  pozdrav() {
    console.log(`Ahoj, jmenuji se ${this.jmeno} a je mi ${this.vek} let.`);
  }
}

const clovek = new Osoba('Karel', 30);
clovek.pozdrav(); // Ahoj, jmenuji se Karel a je mi 30 let.
```
V tomto príklade:
- constructor(jmeno, vek) prijíma hodnoty pri vytváraní novej inštancie Osoba.
- Tieto hodnoty sa ukladajú ako vlastnosti inštancie pomocou this.jmeno a this.vek.
🧠 Tipy a poznámky:
- V dedičnosti sa často používa kľúčové slovo super() vo vnútri constructor() na volanie konštruktora nadradenej triedy.
- constructor() nie je volaný znovu pri opätovnom volaní metódy alebo zmene objektu – iba pri jeho vytvorení (new).
Chceš aj ukážku s dedičnosťou alebo s použitím super() ?

Ďalej sa môžeme tiež opýtať na praktické využitie určitého konceptu, napríklad dedičnosti:

Vysvetli, čo je dedičnosť v JavaScripte, na čo sa používa v praxi a uveď jednoduchý príklad s kódom.

Odpoveď od ChatGPT
🔍 Čo je dedičnosť v JavaScripte
Dedičnosť je základný princíp objektovo orientovaného programovania (OOP), ktorý umožňuje vytvárať nové objekty na základe existujúcich. Inými slovami – objekt (alebo trieda) môže „zdediť“ vlastnosti a metódy iného objektu (alebo triedy).
V JavaScripte je dedičnosť realizovaná pomocou:
- prototype-based inheritance (predtým štandardný prístup)
- class-based syntax (zavedená v ECMAScript 2015 – ES6)
🎯 Na čo sa používa v praxi
Dedičnosť sa v praxi používa, keď:
- Potrebujeme zdieľať spoločné správanie medzi viacerými objektmi (napr. metóda speak() pre rôzne typy zvierat).
- Chceme zjednodušiť a sprehľadniť kód – odstránime duplicitu.
- Staviame hierarchiu objektov – napr. Osoba → Zaměstnanec → Manažer.
🧪 Jednoduchý príklad s kódom
Ukážeme si dedičnosť pomocou ES6 tried:
```
// Nadřazená třída
class Osoba {
  constructor(jmeno) {
    this.jmeno = jmeno;
  }

  pozdrav() {
    console.log(`Ahoj, jmenuji se ${this.jmeno}.`);
  }
}

// Podtřída, která dědí z Osoba
class Student extends Osoba {
  constructor(jmeno, obor) {
    super(jmeno); // Volá konstruktor nadřazené třídy
    this.obor = obor;
  }

  studuj() {
    console.log(`${this.jmeno} studuje obor ${this.obor}.`);
  }
}

// Použití
const student1 = new Student("Anna", "Informatika");

student1.pozdrav();  // Ahoj, jmenuji se Anna.
student1.studuj();   // Anna studuje obor Informatika.
```
✅ Zhrnutie
- Dedičnosť umožňuje znovupoužitie kódu a vytváranie hierarchických štruktúr.
- JavaScript od ES6 podporuje triednu syntax pomocou class, extends, super.
- Pomáha organizovať kód, zvyšuje jeho prehľadnosť a znižuje duplicitu.
Ak chceš príklad s prototype-based prístupom alebo zložitejšiu hierarchiu (napr. viac úrovní alebo prepisovanie metód), daj vedieť!

Kvalita odpovede závisí predovšetkým na našom dotaze, tzv. promptu. Ako správne štruktúrovať prompt, sa učíme v lekcii Vytvárame efektívne prompty pre excelentné výstupy.

Nefunguje ti kód? Vyskúšaj nástroj ChatGPT Canvas

Pri práci s ChatGPT je možné využiť rozšírenie Canvas, ktoré ponúka okrem iného aj rozhranie pre interaktívnu prácu s kódom. Na rozdiel od bežného chatovacieho okna umožňuje organizovať odpovede a návrhy kódu do blokov, čo je ideálne pre zložitejšie úlohy, ako je návrh architektúry aplikácie alebo ladenie rozsiahlejších projektov. Vďaka vizuálnemu usporiadaniu je možné lepšie sledovať jednotlivé kroky návrhu, experimentovať s rôznymi prístupmi a ľahko sa vracať k predchádzajúcim verziám riešenia. Nástroj spustíme tlačidlom Canvas v menu ChatGPT, ktoré sa nám otvorí po kliknutí na tri bodky v chatovacom okne:

Zapnutie Canvasu v ChatGPT - Základné konštrukcie jazyka JavaScript - Základné konštrukcie jazyka JavaScript

Teraz chatbotu odovzdáme náš kód a začneme na ňom pracovať:

let jmeno = prompt("Zadej své jméno:");

if (jmeno.length <= 3 && jmeno.length >= 10) {
    document.write("Normální jméno");
} else {
    document.write("Máš moc krátké nebo moc dlouhé jméno!");
}

Nástroj nám v kóde vyhľadá a opraví chyby:

Editácia kódu v Canvase - Základné konštrukcie jazyka JavaScript - Základné konštrukcie jazyka JavaScript

Pri správne zadanom prompte môžeme v našom kóde jednoducho doplniť chýbajúcu funkcionalitu:

Pridaj do kódu validáciu vstupu. Chcem, aby nešlo zadať prázdne meno.

.<>

Editácia kódu v Canvase – doplnenie funkcionality - Základné konštrukcie jazyka JavaScript - Základné konštrukcie jazyka JavaScript

GitHub Copilot – Pomocník priamo v tvojom IDE

GitHub Copilot je AI asistent vyvinutý spoločnosťami GitHub a OpenAI. V aktuálnej verzii Visual Studio Code je už súčasťou integrovaného vývojového prostredia. Ak používate staršiu verziu, je nutné buď Visual Studio Code aktualizovať, alebo Copilota nainštalovať ručne prostredníctvom ponuky Extensions na bočnom paneli. Tu stačí vyhľadať doplnok GitHub Copilot a spustiť jeho inštaláciu. Pre používanie Copilota je nevyhnutné prihlásiť sa k svojmu GitHub účtu.

V prípade, že účet na GitHube ešte nemáme, založíme si ho podľa postupu v lekcii Lekcia 31 - Verzovací nástroj Git a Visual Studio Code.

Práca s GitHub Copilotom

Akonáhle je Copilot aktívny, začne v reálnom čase generovať návrhy na doplnenie kódu. Pokiaľ začneme písať metódu, Copilot sa pokúsi navrhnúť jej logiku. Pri práci s triedami alebo cyklami dokáže generovať celé bloky kódu. Vie sa dokonca učiť z nášho štýlu kódovania a prispôsobiť mu svoje návrhy. Navrhovaný kód potvrdíme stlačením klávesu Tab:

Návrh doplnenia kódu v GitHub Copilote - Základné konštrukcie jazyka JavaScript - Základné konštrukcie jazyka JavaScript

Okrem automatického doplňovania kódu ponúka GitHub Copilot aj chatovacie rozhranie, ktoré umožňuje klásť otázky, získavať vysvetlenie ku kódu alebo generovať celé bloky kódu na základe zadania. Malé chatovacie okno sa nám otvorí priamo v kóde po stlačení klávesovej skratky Ctrl + i:

Prompt na vytvorenie funkcie na riešenie kvadratických rovníc - Základné konštrukcie jazyka JavaScript - Základné konštrukcie jazyka JavaScript

Prípadne je chat dostupný po kliknutí na ikonu Toggle Chat v hornom paneli. Do otvoreného okna môžeme zadať prompt, napríklad na vygenerovanie triedy s funkciou na výpočet kvadratickej rovnice:

Po odoslaní promptu nám GitHub Copilot poskytne hotový kód, ktorý je možné pomocou tlačidiel nad výstupom buď skopírovať, alebo rovno vložiť do otvoreného súboru:

Vloženie kódu do triedy - Základné konštrukcie jazyka JavaScript - Základné konštrukcie jazyka JavaScript

Pomocou asistenta môžeme tiež pracovať s aktuálne otvoreným súborom. Napríklad zadať prompt pre nájdenie chýb v našom kóde:

Chatovacie rozhranie v GitHub Copilote – oprava kódu - Základné konštrukcie jazyka JavaScript - Základné konštrukcie jazyka JavaScript

Claude Artifacts

Chatbotov, ako je ChatGPT, je k dispozícii viac. Medzi ďalšie obľúbené patrí Claude. Podobne ako ChatGPT ho môžeme využiť ako pomocníka pri nasledujúcich úkonoch:

programovanie – generovanie a oprava kódu, návrhy algoritmov, vysvetlenie zložitých konceptov,
písanie a editácia textu – pomoc s tvorbou dokumentov, článkov alebo e-mailov,
analýza a zhrnutie informácií – rýchle spracovanie veľkého množstva textu a jeho prevedenie do stručnej a zrozumiteľnej podoby,
asistencia pri rozhodovaní – pomoc s logickým myslením, plánovaním projektov a brainstormingom.

Princíp používania je podobný ako u ChatGPT:

Ukážkový prompt Claude - Základné konštrukcie jazyka JavaScript - Základné konštrukcie jazyka JavaScript

Artifacts sú potom špeciálne výstupy, ktoré Claude generuje oddelene od hlavného chatu, aby boli prehľadné a ľahko dostupné. Nejedná sa o plnohodnotný editor, ale skôr o spôsob, ako štruktúrovane uchovať kód, dokumenty alebo vizualizácie bez straty v dlhom priebehu konverzácie. Keď si napríklad necháme vygenerovať kód, Claude ho automaticky uloží ako Artifact. Môžeme ho potom kedykoľvek otvoriť, zdieľať alebo ďalej rozšíriť. Týmto spôsobom máme dôležité informácie vždy na dosah, bez nutnosti sa k nim zložito vracať.

AI nástroje dokážu výrazne pomôcť pri štúdiu programovania - uľahčujú pochopenie ťažké látky a riešenie náročných úloh. Po dohode so zamestnávateľom ich možno uplatniť aj v praxi, kde môžu šetriť čas a zvyšovať produktivitu. Preto je dôležité sa s nimi naučiť efektívne pracovať a využívať ich potenciál naplno.

V budúcej lekcii, Podmienky v JavaScripte, sa pozrieme na podmienky, vďaka ktorým naše aplikácie začnú byť zase o niečo zaujímavejšie