§ 23. Элементы JavaScript для создания веб-страниц

Упражнения

 

1. Создайте веб-страницу, на которой реализуйте проверку знания геральдических символов Беларуси (например, изображений гербов областных центров). Оформите страницу так, как показано в образце. Поместите на страницу изображение и форму с тестом, текстовым полем и кнопкой. При вводе в текстовое поле ответа на вопрос, подтверждение его правильности должно появляться в диалоговом окне. Выполнить задание вам помогут фрагменты кода, в которых нужно заполнить пропуски в соответствии с комментариями (обозначены красным).

HTML:

<body>

  <div   >

    <form  >

      <p>У какого областного центра Беларуси такой герб?

      </p>

      <input >

      <!-- текстовое поле -->

      <input   >

      <!-- кнопка с обработчиком события -->

    </form>

  </div>

</body>

JS:

// объявите массив с названиями областных центров            

var numb = Math.floor(Math.random() * 6 + 1);

/* numb хранит номер изображения, который соответствует части имени файла */

      var im =  ;

// сформируйте имя файла изображения (номер + расширение)

var insert = "<img class = \"pic\" src = \"" + im + "\">";

document.write(insert);

function  имя функции {

        if (условие совпадения ответа с названием города)

          // вывод в диалоговое окно

      }

CSS: расположите рисунок и форму по центру страницы.

Образец:

2. Создайте веб-страницу, описывающую одну из достопримечательностей Беларуси. Оформите веб-страницу так, как показано в образце. На странице должен быть один скрытый блок. Для оформления используйте соответствующие изображения. Для этого:

  1. Добавьте теги, необходимые для корректного отображения веб-страницы в браузере. Добавьте заголовок страницы (тег <title>), в котором укажите название документа и фамилию автора, например:
    Гервяты: работа Янковского Яна.
  2. Примените стилевое описание для заголовка документа (тег <h1>). Справа от заголовка добавьте рисунок gray.gif, который будет ссылкой на сайт vandrouka.by. При наведении мыши рисунок должен меняться на active.gif.
  3. Выделите абзацы в тексте с помощью тэга <p>.
  4. Все оформление должно быть сделано с помощью стилевых описаний в файле z2.css, а скрипты сохранены в файле z2.js.
  5. Замените верхние кавычки на «ёлочки» (используйте спецсимволы).
  6. Замените везде, где нужно, обычные пробелы на неразрывные, и знаки «минус» — на тире; сделайте так, чтобы тире не отрывались от предыдущих слов (используйте спецсимволы тире и неразрывного пробела).
  7. Сделайте плавающий блок, содержащий фото с подписью. Подпись должна быть набрана шрифтом без засечек (sans-serif), курсивом, размер 80% от размера шрифта основного текста, внешних отступов (margin) нет.
  8. Оформите скрытый блок, включающий текст, описывающий какой-либо фрагмент достопримечательности. Присвойте этому блоку имя (id), установите следующее оформление: цвет фона #eeeeff; рамка синяя, сплошная, толщиной 1px; отступы по бокам 10px.
  9. В скрытый блок добавьте вложенный плавающий блок, содержащий фото фрагмента достопримечательности с подписью. Оформление подписи должно быть такое же, как и для плавающего блока в видимом блоке (пункт 7).
  10. Создайте обработчик событий к  тексту «католическая церковь Святой Троицы», реализующий отображение скрытого блока на странице по щелчку по этому тексту.
  11. Поместите в скрытый блок текстовую ссылку (или кнопку) с текстом «Свернуть», которая при щелчке скрывает блок.
  12. Внизу страницы добавьте форму с текстом (вопросом о достопримечательности), текстовым полем для ввода ответа и кнопкой Ответить. Выделите вопрос жирным, применив стилевое описание. Сделайте так, чтобы после щелчка по кнопке в диалоговом окне в зависимости от ответа выводилось сообщение Правильно или Неправильно.
  13. *Примените к блочным элементам технологию Flexbox. (изучите самостоятельно — https://tproger.ru/translations/how-css-flexbox-works/ ).  Измените размеры окна браузера. Убедитесь, что верстка адаптивна. 

3. 

Полная версия (развернутый вид):