6. Практическое занятие по использованию объектов document и window

 

Задание 1

Разместите на странице текст и три пары кнопок. Первая пара кнопок добавляет и удаляет фон текста, вторая — добавляет и удаляет рамку, третья — меняет размер шрифта.

Внешний вид

Этот параграф может выглядеть по-разному.

Проанализируем задание. Первая кнопка по щелчку должна добавлять фон текста. Мы знаем, что фон текста задаётся CSS-свойством background c указанием кода цвета. Отмена фона производится установкой CSS-свойству background значения none.

Рамка задаётся CSS-свойством border с указанием размера, цвета и стиля. Отмена рамки производится установкой CSS-свойству border значения none.

Размер шрифта задаётся CSS-свойством font-size. Отмена заданного размера производится установкой CSS-свойству fontSize значения medium.

 

 

Задание 2

Разместите на странице картинку и четыре кнопоки. Каждая кнопка заменяет картинку на другую.

Внешний вид:

Проанализируем задание. Кнопка по щелчку должна менять картинку. Мы знаем, что картинка задаётся атрибутом src с указанием пути к файлу с картинкой. В обработчике события нужно с помощью метода getElementById обратиться к атрибуту src и указать путь к файлу с новой картинкой. Все кнопки ведут себя одинаково, только указывают на разные картинки.

 

 

Задание 3

Разместите несколько картинок. При наведении курсора картинка должна увеличиваться, а при уходе курсора — принимать прежний размер.

Внешний вид

Проанализируем задание. Картинка должна реагировать на два разных события: наведение курсора и уход курсора. Изменяться должна сама картинка, а не другой элемент.

При наведении курсора картинка должна увеличиваться. Мы знаем, что размеры картинки задаются атрибутами width и height. Можно задавать только один атрибут, например, width, Тогда высоту картинки браузер вычисляет сам.

При уходе курсора картинка должна принимать прежний размер. Вторая часть скрипта отличается тем, что вместо onmouseover нужно использовать onmouseout, а ширина задаётся исходная.

 

 

Задание 4

Сокрытие и показ информации: отображается список из нескольких пунктов, в конце каждого пункта слово “Подробнее...”, при щелчке на котором открывается дополнительная информация. В конце информации расположено слово “Скрыть”, при щелчке на котором информация скрывается.

Внешний вид

Необходимые инструменты веб-программиста:

• Браузеры. Подробнее...

• HTML-редактор. Подробнее...

• Графический редактор. Подробнее...

 

 

Задание 5

Разместите на странице кнопку и картинку. При каждом нажатии на кнопку картинка должна сдвигаться правее и ниже.

Внешний вид:

Проанализируем задание. Ранее мы выполняли задание увеличения размера картинки путём изменения значений атрибутов ширины и высоты. Перемещать картинку можно лишь в том случае, когда ей задано позиционирование и начальные координаты CSS-свойствами в теге картинки. Например: style="position:relative; left:0px; top:0px;". Обратите внимание, что числовое значение обязательно должно сопровождаться единицей измерения px. Поэтому старые значения координат нельзя считывать из CSS-свойств. Для этого необходимо ввести две переменные, в которых сохранять текущие значения координат картинки. Сдвиг картинки по горизонтали и вертикали реализуется присвоением её CSS-свойствам left и top значений новых расчитанных координат.

Рис. 1 Алгоритм сдвига картинки

Таким образом, скрипт должен выполнять следующий алгоритм:

1. При загрузке страницы создать переменные положения картинки x и y, сохранить в них нулевые начальные значения.

2. По щелчку на кнопке:

   • на основании старого значения x расчитать новое значение и сохранить его в той же переменной;

   • на основании старого значения y расчитать новое значение и сохранить его в той же переменной;

   • присвоить новое значение свойству left;

   • присвоить новое значение свойству top.

Алгоритм — это последовательность действий. Он помогает разложить сложную задачу на несколько более простых заданий. Схема указанного алгоритма приведена на рис. 1. Теперь остаётся реализовать каждое отдельное задание с помощью команд JavaScript.

 

 

Задание 6

Доработайте предыдущий скрипт. При нажатии на кнопку картинка должна непрерывно двигаться вправо вниз.

Внешний вид:

Рис. 2. Алгоритм движения картинки

Проанализируем задание. Перемещение картинки реализуется периодическим изменением её координат. Для этого вам понадобится метод setInterval. Таким образом, в ответ на событие нажатия на кнопку обработчик должен выполнять следующий алгоритм:

1. Задать координаты начального положения картинки x и y, равные нулю.

2. Задать приращения по горизонтали dx и по вертикали dy.

3. Расчитать новые значения координат x и y.

4. Сдвинуть картинку в новое положение.

5. Вернуться к пункту 3.

 

 

Задание 7

Добавьте в предыдущий скрипт кнопку, останавливающую движение картинки.

Для выполнения этого задания вам потребуется метод clearInterval, который должен вызваться по щелчку на кнопке «Остановить».

 

 

Задание 8

Добавьте в предыдущий скрипт возможность пользователю самому задавать направление движения картинки.

Внешний вид

Рис. 3. Алгоритм движения картинки с заданными пользователем приращениями.

В предыдущем алгоритме величины приращения жёстко задавались в программе. Теперь величины приращений пользователь задаёт в текстовых полях ввода. Для того, чтобы извлечь значение текстового поля необходимо обратиться к его атрибуту value, как это мы делали ранее. Таким образом, алгоритм обработчика события щелчка на кнопке должен быть следующим.

1. Задать координаты начального положения картинки x и y, равные нулю.

2. Извлечь значения из текстовых полей и сохранить их в dx и dy.

3. Расчитать новые значения координат x и y.

4. Сдвинуть картинку в новое положение.

5. Если повторение не остановлено, вернуться к пункту 3.

Схема указанного алгоритма приведена на рис. 3.

При реализации указанного алгоритма следует учесть следующую особенность языка JavaScript. Текстовое поле всегда возвращает строку, даже если вы вводите число. Поэтому знак сложения воспринимается JavaScript как конкатенация.

Но нам нужно использовать значение текстового поля как число, так как оно нужно для расчёта новых координат. Для преобразования строки в число из неё вычитают ноль. Пример: dx=document.getElementById('dxCruiser').value-0;

При вычитании строковый операнд преобразуется в число, и теперь переменная dx содержит число, а не строку. Теперь к dx можно успешно прибавлять другие числа.