Лабораторна робота № 13 Робота з об'єктом window, анімація

1. Мета роботи

Метою роботи є оволодіння навичками роботи з вікнами типу window при створенні інтерактивних Web- сторінок з використанням мови сценаріїв JavaScript.

2. Склад робочого місця

2.1. Устаткування: IBM- сумісний персональний комп'ютер(ПК).

2.2. Програмне забезпечення: операційна система Windows, Web- браузер Internet Explorer версії 6.0 і вище.

3. Підготовка до лабораторної роботи

Для підготовки до виконання лабораторної роботи необхідно повторити наступні розділи (дивись електронний конспект лекцій по розділу 4 «Технології програмування»).

4. Порядок виконання роботи

Створіть в Internet Explorer інтерактивну Web- сторінку з використанням мови JavaScript по одному з приведених нижче варіантів.

Варіант 13-01

Создайте Web-страницу с «мигающим» заголовком (элементом <h1>). Текст заголовка – "Начинаем работу".

Варіант 13-02

Создайте Web-страницу с бегущей строкой заголовка. Строка заголовка (элемент <h1>) передвигается от правой границы экрана и устанавливается в середине строки. Текст заголовка – "Динамический HTML".

Варіант 13-03

Создайте Web-страницу с заголовком (элементом <h1>), циклически изменяющим цвет: красный, зеленый и синий. Текст заголовка – "Динамические стили".

Варіант 13-04

Создайте Web-страницу, открывающую новую Web-страницу в центре экрана с постепенно увеличивающимися размерами от 200200 пикселей до размера полного экрана.

Варіант 13-05

Создайте Web-страницу, в которой при щелчке мышью над сокращениями в тексте страницы (не менее трех сокращений) в строке состояния выводится расшифровка сокращения (сокращения выделяются зеленым цветом, жирным шрифтом и подчеркиванием). Пример: сокращение HTML, расшифровка – HyperText Markup Language (Гипертекстовый язык разметки).

Варіант 13-06

Создайте Web-страницу, открывающую новую Web-страницу, которая имеет высоту, равную высоте экрана и постепенно разворачивается от ширины 100 пикселей до полной ширины экрана.

Варіант 13-07

Создайте Web-страницу со счетчиком времени просмотра этой страницы (в минутах и секундах) в текстовом поле черным цветом с заголовком "Время просмотра" в начале странице. Счетчик обновляется каждую секунду. Если время просмотра превышает 30 секунд, время просмотра выводится красным цветом.

Варіант 13-08

Создайте Web-страницу, в которой при нажатии кнопки с надписью "Ввод имени и фамилии" открывается новое окно, содержащее (в форме) две текстовые строки для ввода фамилии и имени и кнопку "OK", при нажатии на которую в качестве возвращаемого значения задается строка, содержащее введенные фамилию и имя, а затем окно закрывается. Задание возвращаемого значения и закрытие окна производится в функции, вызываемой в атрибуте onClick для кнопки "OK". В вызывающем окне после закрытия вывод полученных значений выполняется в текстовых полях.

Варіант 13-09

Создайте Web-страницу с текстовым полем с заголовком "Интервал" в начале страницы, отсчитывающим минуты и секунды в виде: минуты:секунды. Запуск таймера производится при нажатии кнопки "Старт", останов и вывод результата – при нажатии кнопки "Стоп". Запуск и останов таймера производится при выполнении соответствующих функций, вызываемых в атрибутах onClick для кнопок "Старт" и "Стоп". Для запуска таймера используйте метод setTimeout(), для останова – метод clearTimeout().

Варіант 13-10

Создайте Web-страницу, в которой при нажатии кнопки с надписью "Вопрос 1" открывается новое окно, содержащее вопрос и три возможных ответа на него, а также три кнопки "Ответ 1", "Ответ 2" и "Ответ 3". После этого, выполняется проверка, правилен ли ответ на вопрос, и, в качестве возвращаемого значения задается с При нажатии на одну из кнопок в качестве возвращаемого значения в вызывающее окно задается значение "неправильный" или "правильный". Задание возвращаемого значения и закрытие окна производится в функциях, вызываемой в атрибутах onClick для каждой из кнопок. В вызывающем окне вывод полученного из диалогового окна номера вопроса выполняется в текстовом окне с заголовком "Ответ".

Варіант 13-11

Создайте Web-страницу, в которой при щелчке мышью по заголовку его цвет постепенно меняется с красного на синий (красная компонента уменьшается с максимального значения до 0, а синяя компонента увеличивается с нуля до максимального значения). При повторном щелчке цвет заголовка постепенно меняется с синего на красный. Текст заголовка – "Изменение цвета элемента".

Варіант 13-12

Создайте Web-страницу, в которой при нажатии кнопки с надписью "Выбор изображения" открывается новое окно, содержащее (в форме) список изображений (элементы <select>) для выбора изображения, а также кнопку "OK", при нажатии на которую в качестве возвращаемого значения задается URL выбранного изображения. Задание возвращаемого значения и закрытие окна производится в функции, вызываемой в атрибуте onClick для кнопки "OK". В вызывающем окне выбранное изображение выводится на экран с помощью изменения значения атрибута src элемента <img>. Первоначально в Web-странице выводится первое изображение из списка.

Варіант 13-13

Создайте Web-страницу, в которой при щелчке мышью по любому абзацу для его содержимого задается желтый фон, текст выводится жирным шрифтом, а цвет текста меняется с черного на красный. При повторном щелчке стили абзаца восстанавливаются: фон меняется на фон по умолчанию (белый), текст выводится нежирным ширифтом черного цвета.

Варіант 13-14

Создайте Web-страницу, в которой небольшое изображение (размером до 100100 пикселей) перемещается по экрану по сторонам квадрата 300300 пикселей.

Варіант 13-15

Создайте Web-страницу, в которой строка заголовка (элемент <h1>) появляется по одному символу на левой границе экрана, затем этот символ постепенно перемещается слева направо до своей позиции в заголовке. Текст заголовка – "Плавающий заголовок".

5. Питання для самоконтролю

Які основні властивості визначені для об'єкту window? Дайте коротку характеристику кожної властивості.

Які основні методи визначені для об'єкту window? Дайте коротку характеристику кожного методу.

Як можна відкрити нове вікно в Web- сторінки за допомогою об'єкту window? Які властивості вікна можна задати або змінити при відкритті нового вікна?

Як можна задати обмін параметрами між новим вікном і вікном, що відкрило його?

Як виводиться на екран елемент HTML при різних значеннях властивості display в CSS?

Як задається спосіб позициониро¬вания елементу HTML на Web- сторінці за допомогою властивості position в CSS?

Як задається положення і розміри блоку, що абсолютно позиціонується, на Web- сторінці за допомогою властивостей top, left, bottom, right, width і height в CSS?

Як задається перекриття елементів HTML на Web- сторінці за допомогою властивості z - index в CSS?

Як виводиться елемент, що абсолютно позиціонується, при різних значеннях властивості overflow в CSS?