Основы работы с DOM в JavaScript

В предыдущих уроках мы изучали базовые возможности языка JavaScript. Начиная с данного урока мы займемся тем, для чего собственно JavaScript и предназначен - мы будем изменять элементы HTML страницы и реагировать на действия пользователя. Наши скрипты станут более зрелищными и полезными.

Во всех следующих уроках ваш JavaScript код должен быть размещен ниже HTML кода, к которому он обращается. To есть структура вашего кода должна выглядеть следующим образом:

html<!DOCTYPE html>
<html>
  <head>
    
  </head>
  <body>
    ваши html теги
    
    <script>
      ваш JavaScript код
    </script>
  </body>
</html>

Либо следующим образом, если вы пишите JavaScript код в отдельном файле:

html<!DOCTYPE html>
<html>
  <head>
    
  </head>
  <body>
    ваши html теги
    
    <script src="index.js"></script>
  </body>
</html>

В дальнейшем для краткости я не буду приводить полный код, а буду просто указывать, что нужно писать в HTML части, а что - в JavaScript части.

Задание 1

Сделайте файл с указанной структурой кода.