Úlohy

  • Vytvorte projekt s názvom cv17
  • Vytvorte index.html
  • Vytvorte skript ku každej úlohe zvlášť s pomenovaním „script1.js“, „script2.js“ …
  • Tieto skripty načítavajte po jednom do Vášho index.html dokumentu podľa toho, ktorú úlohu práve robíte. Napr. ak ste sa dostali už na druhú úlohu, tak v dokumente index.html bude načítaný iba script2.js.

Úloha 1 – Prihlasovanie

Napíšte kód, ktorý vás požiada o prihlásenie za použitia funkcie prompt.

Navštevník je vyzvaný, aby zadal meno a potom heslo.

Keď zadá meno, ktoré

  • sa rovná „Admin“, tak požiada o heslo
  • sa rovná hocičomu inému, tak vypíše „Neoprávnený vstup“

Heslo sa kontroluje nasledovne:

  • Ak sa heslo rovná „TheMaster“, potom sa zobrazí „Welcome!“,
  • Ak zadá akýkoľvek iný reťazec, tak sa zobrazí „Chybné heslo“,
  • Pre prázdny reťazec alebo zrušený vstup, zobrazí „Zrušené“.

Úloha 2 – posledná hodnota while cyklu

Čo je posledná hodnota, ktorú cyklus vypíše a prečo?

let i = 3;

while (i) {
  alert( i-- );
}

Úloha 3 – z for na while

Prepíšte nasledovný for cyklus na while:

for (let i = 0; i < 3; i++) {
  alert( `number ${i}!` );
}

Úloha 4 – opakuj, kým vstup nie je správny

Napíšte cyklus, ktorý vyzve na zadanie čísla väčšieho ako 100. Ak návštevník zadá iné číslo – požiadajte ich o opätovné zadanie.

Cyklus musí požiadať o číslo, až kým návštevník nezadá číslo väčšie ako 100 alebo nezruší vstup / zadá prázdny riadok.

Tu môžeme predpokladať, že návštevník zadáva iba čísla. V tejto úlohe nie je potrebné implementovať špeciálne spracovanie pre nečíselný vstup.

Úloha 5 – Nepárne čísla

Napíšte cyklus, ktorý bude vypisovať iba nepárne čísla od 0 po n, kde n je celé číslo, ktoré na začiatku zadá používateľ.

Úloha 6 – mocnenie

Vypýtajte si od užívateľa dve čísla. Prvé číslo bude predstavovať základ a druhé číslo bude predstavovať mocninu. Vypočítajte umocnené číslo a vypíšte ho. Následne je užívateľ vyzvaný, aby sa rozhodol, ci chce danú operáciu opakovať. Ak zadá slovo „áno“, tak sa celá séria zopakuje. Ak nie, vypíše hlášku, „Koniec programu“. Ošetrite vstupy.

Úloha 7 – prevody

Napíšte program, ktorý dá užívateľovi možnosť previesť Fahrenheity na Celzia a kila na libry.

  • Ak zadá číslo 1, tak bude prevádzať teplotu,
  • ak číslo 2, tak bude prevádzať váhu.

Po zvolení teploty

  • ak zadá číslo 1, tak si zvolí možnosť previesť Fahrenheit na Celzius
  • ak zadá číslo 2, tak Celzius na Fahrenheit.

Po zvolení váhy

  • ak zadá číslo 1, tak prevádza kilo na libru
  • ak zadá číslo 2, tak prevádza libru na kilo

Po zvolení si prevodu je užívateľ vyzvaný, aby zadal hodnotu, ktorá bude prevedená. Hodnotu preveďte a vypíšte.

Úloha 8

Pre stránku:

<html>
<body>
  <div>Users:</div>
  <ul>
    <li>John</li>
    <li>Pete</li>
  </ul>
</body>
</html>

Akým spôsobom vieme získať element pre:

  • div
  • ul
  • li (s obsahom Pete)

Úloha 9

Napíšte kód, ktorý vyfarbí všetky bunky v tabuľke na červeno, ktoré predstavujú diagonálu. Pre zafarbenie bunky použite:

// td je referencia / premenná, kde je uožená bunka z tabuľky
td.style.backgroundColor = 'red';

Kód stránky je nasledujúci:

<!DOCTYPE HTML>
<html>
<head>
  <style>
    table {
      border-collapse: collapse;
    }

    td {
      border: 1px solid black;
      padding: 3px 5px;
    }
  </style>
</head>

<body>
  <table>
    <tr>
      <td>1:1</td>
      <td>2:1</td>
      <td>3:1</td>
      <td>4:1</td>
      <td>5:1</td>
    </tr>
    <tr>
      <td>1:2</td>
      <td>2:2</td>
      <td>3:2</td>
      <td>4:2</td>
      <td>5:2</td>
    </tr>
    <tr>
      <td>1:3</td>
      <td>2:3</td>
      <td>3:3</td>
      <td>4:3</td>
      <td>5:3</td>
    </tr>
    <tr>
      <td>1:4</td>
      <td>2:4</td>
      <td>3:4</td>
      <td>4:4</td>
      <td>5:4</td>
    </tr>
    <tr>
      <td>1:5</td>
      <td>2:5</td>
      <td>3:5</td>
      <td>4:5</td>
      <td>5:5</td>
    </tr>
  </table>
  <script>
    let table = document.body.firstElementChild;

    // tvoj kód
  </script>
</body>
</html>

Výsledná tabuľka po aplikovaní javascriptu bude vyzerať približne nasledovne:

Úloha 10

  • Vytvorte index.html a skopírujte HTML štruktúru zostránky
  • Vytvorte skript ktorý bude robiť nasledovné:
    • Používateľ je vyzvaný, aby zadal slovo (funkcionalita je uz implementovana)
    • Toto slovo sa následne všade v zozname, kde sa vyskytuje vyfarbí na červeno a pozadie bude žlté
    • Používateľ má možnosť, aby zadal ďalšie slovo a proces sa opakuje.
  • V rámci procesu prihliadajte na nasledovné:
    • Pred každým novým vyhľadávaním zmeňte pozadie a farbu textu na predvolené

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Vyhladavanie</title>
</head>
<body>
    <div>
        <input type="text" id="myInput" placeholder="Slovo">
        <button onclick="hladaj();">Vyhladat</button>
    </div>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>javaScript</li>
        <li>php</li>
        <li>java</li>
        <li>CSS</li>
        <li>python</li>
        <li>C++</li>
        <li>CSS</li>
        <li>XML</li>
        <li>json</li>
        <li>.NET</li>
        <li>javaScript</li>
        <li>Matlab</li>
        <li>HTML</li>
        <li>java</li>
        <li>CSS</li>
    </ul>

    <script src="./script.js"></script>
</body>
</html>

javaScript

let word,
    myInput = document.getElementById('myInput');

function hladaj(){
    word = myInput.value;

    // TODO:
}