Использование Javascript для обработки событий и изменения содержимого HTML-страницы

Лабораторная работа N4. Использование Javascript для обработки событий и изменения содержимого HTML-страницы

Цель работы: Создать HTML-страницу в соответствии с поставленными требованиями. Добавить ее на свой сайт.

Порядок выполнения работы:

1.                 Создайте страницу, которая выглядит так же, как страница, приведенная на рис. 1. Размеры синего прямоугольника - 500x350 пикселей, желтого - 500x150 пикселей. Изображение солнца, которое необходимо вставить на страницу, находится в файле sun.gif,, прилагаемом к лабораторной работе. При загрузке веб-страницы необходимо сгенерировать два случайных числа в диапазоне 1..100 (в данном примере это 41 и 64) и вывести их в синем прямоугольнике в виде вопроса “Сколько будет 41+64?”.

Рис. 1. Внешний вид страницы после загрузки

2.                 Для генерации случайных чисел в заданном диапазоне используйте следующую функцию javascript (добавьте ее в свою HTML-страницу):

function getRandomInt(min, max) 

  {

    return Math.floor(Math.random() * (max - min + 1) + min);  }

 При генерации первого и второго числа, запомните их сумму в какой-то переменной. Назовите ее, например, otvet.

3.                 При нажатии на кнопку «Проверить» (событие onClick), сравните введенное пользователем в строке ввода число и содержимое переменной otvet. Если они совпадают (пользователь правильно ответил на вопрос), то поменяйте цвет нижнего прямоугольника на светло-зеленый и выведите туда надпись «Последний ответ - правильный!». Иначе выведите надпись «Последний ответ - неправильный!» и измените цвет нижнего прямоугольника на красный.

 Подсчитывайте общее число правильных и неправильных ответов пользователя (заведите две переменные verno и neverno). После каждого нажатия «Проверить» выведите в нижнем прямоугольнике также число правильных и неправильных ответов.  Сгенерируйте новое задание и выведите его в верхнем прямоугольнике (рис. 2).

Рис. 2. Окно браузера после очередного нажатия на кнопку

 Используйте для текста шрифт Tahoma с размером large. Выравнивайте текст по центру прямоугольников.

3.                 Каждый раз при наведении мышки (событие onmouseover) на изображение солнца оно (солнце) должно перемещаться  в новое случайное место веб-страницы (см. рис. 3).

Рис. 3. Изменение положение рисунка солнца при наведении на его курсора мыши

4.                 Добавьте ссылку на HTML-страницу с лабораторной работой со своей главной страницы сайта

          В       процессе     выполнения         работы       Вам   понадобится        функция document.getElementById(), 

                    Чтобы для найденного элемента s поменять свойство стиля, нужно написать

u.style.имя_свойства = новое_значение_свойства.

                       Чтобы для найденного элемента s поменять HTML-текст, нужно написать 

u. innerHTML = новый_текст.