Úlohy

  • Vytvorte projekt s názvom cv19
  • 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

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 2

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: