Podstawy pracy z DOM w JavaScript

W poprzednich lekcjach uczyliśmy się podstawowych możliwości języka JavaScript. Począwszy od tej lekcji zajmiemy się tym, do czego właściwie JavaScript jest przeznaczony - będziemy zmieniać elementy strony HTML i reagować na działania użytkownika. Nasze skrypty staną się bardziej widowiskowe i użyteczne.

We wszystkich następnych lekcjach twój kod JavaScript powinien być umieszczony poniżej kodu HTML, do którego się odnosi. To znaczy struktura twojego kodu powinna wyglądać następująco:

html<!DOCTYPE html>
<html>
  <head>
    
  </head>
  <body>
    twoje znaczniki html
    
    <script>
      twój kod JavaScript
    </script>
  </body>
</html>

Lub następująco, jeśli piszesz kod JavaScript w oddzielnym pliku:

html<!DOCTYPE html>
<html>
  <head>
    
  </head>
  <body>
    twoje znaczniki html
    
    <script src="index.js"></script>
  </body>
</html>

W dalszej części dla zwięzłości nie będę przytaczał pełnego kodu, a będę po prostu wskazywać, co trzeba pisać w części HTML, a co - w części JavaScript.

Задание 1

Utwórz plik z podaną strukturą kodu.