42249

Работа с объектом window, анимация. Создание интерактивных Web-страниц с использованием языка сценариев JavaScript

Лабораторная работа

Информатика, кибернетика и программирование

Целью работы является овладение навыками работы с окнами типа window при создании интерактивных Webстраниц с использованием языка сценариев JvScript. Программное обеспечение: операционная система Windows Webбраузер Internet Explorer версии 6. Объект window в JvScript Все Webбраузеры выводят пользователям Webстраницы в окне дисплея. Объект window представляет текущее окно Webбраузера или отдельный фрейм если окно разделено на фреймы.

Русский

2013-10-28

165 KB

20 чел.

 15 -

Лабораторная работа 2-13-14

Работа с объектом window, анимация

1. Цель работы

Целью работы является овладение навыками работы с окнами типа window при создании интерактивных Web-страниц с использованием языка сценариев JavaScript.

2. Состав рабочего места

2.1. Оборудование: IBM-совместимый   персональный компьютер (ПК).

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

3. Краткие теоретические сведения

3.1. Объект window в JavaScript

Все Web-браузеры выводят пользователям Web-страницы в окне дисплея. Любой, элемент, выводимый на экране, также содержится внутри окна. Объект window представляет текущее окно Web-браузера или отдельный фрейм, если окно разделено на фреймы. Этот объект является самым главным объектом Web-браузера и является родительским объектом для всех объектов Web-браузера.

Объект window создается при открытии нового окна в Web-браузере но, в отличие от других объектов DOM,  не имеет соответствующего элемента HTML.

3.1.1. Свойства и методы объекта window

Наборы свойств объекта window отличаются для разных Web-браузеров. Свойства, общие для всех Web-браузеров, представлены в табл. 13.1.

Таблица 13.1. Свойства объекта window, общие для всех Web-браузеров

Свойство

Описание

closed

Возвращает true, если текущее окно закрыто и false в противном случае. Может быть использовано при работе с несколькими окнами.

defaultStatus

Сообщение по умолчанию, отображаемое в строке состояния окна.

length

Возвращает количество фреймов.

location

Возвращает ссылку на объект location документа, загруженного в текущее окно.

name

Возвращает имя окна или фрейма.

opener

Возвращает ссылку на окно, которое открыло текущее окно, например, методом open().

parent

Возвращает ссылку на родительское окно, если текущий объект window представляет собой фрейм. В противном случае возвращается ссылка на само это окно.

screen

Возвращает ссылку на объект screen.

self

Возвращает ссылку на объект window текущего окна.

status

Текст, отображаемый в строке состояния окна Web-браузера.

top

Возвращает ссылку на родительское окно самого верхнего уровня, если текущий объект window представляет собой фрейм. В противном случае возвращается ссылка на само это окно.

window

То же, что и self.

Для определения текущей высоты и ширины окна в Internet Explorer используются свойства document.body.clientHeight и document.body.clientWidth, а в остальных Web-браузерах – свойства объекта window: innerHeight и innerWidth.

Координаты x и y левого верхнего угла текущего окна задаются в Internet Explorer с помощью свойств screenLeft и screenTop объекта window, а в остальных Web-браузерах – с помощью свойств screenX и screenY объекта window.

Рассмотренные ранее методы alert(), confirm() и prompt() на самом деле являются методами объекта window. Другие методы объекта window, общие для всех Web-браузеров, представлены в табл. 13.2.

Таблица 13.2. Методы объекта window, общие для всех Web-браузеров

Метод

Описание

blur()

Удаляет фокус с окна.

clearInterval(таймер)

Останавливает таймер, установленный методом setInterval().

clearTimeout(таймер)

Останавливает таймер, установленный методом setTimeout().

close()

Закрывает текущее окно.

focus()

Переносит фокус на текущее окно.

moveBy(X, Y)

Перемещает окно на Х пикселей вправо и на Y пикселей вниз. Для перемещения влево и вверх задаются отрицательные значения Х и Y.

moveTo(X, Y)

Перемещает окно в точку экрана, заданную координатами Х и Y.

open(адрес, имя-окна, [список-свойств])

Открывает новое окно Web-обозревателя, загружает в него документ, адрес которого передан в первом параметре, и присваивает окну имя, переданное во втором параметре. В третьем параметре может быть передан список свойств окна (их описание приведено в табл. 4.69).  

print()

Выводит содержимое окна на принтер.

resizeBy(X, Y)

Увеличивает окно на Х пикселей по горизонтали и на Y пикселей по вертикали. Для уменьшения окна задаются отрицательные значения Х и Y.

resizeTo(X, Y)

Увеличивает или уменьшает окно до размера, заданного значениями Х и Y.

scrollBy(X, Y)

Прокручивает содержимое окна на Х пикселей вправо и на Y пикселей вниз. Для прокрутки влево и вверх задаются отрицательные значения Х и Y.

scrollTo(X, Y)

Прокручивает содержимое окна в точку, заданную значениями Х и Y.

setInterval(функция-или-выражение, интервал, [список аргументов функции, разделенных запятыми])

Вычисляет значение выражения или вызывает функцию каждый раз по истечении заданного интервала (в миллисекундах). Может передавать в функцию заданные в списке аргументы. Возвращает указатель на объект таймера, который можно использовать в методе clearInterval() для остановки и уничтожения таймера.

setTimeout(функция-или-выражение, интервал, [список аргументов функции, разделенных запятыми])

Вычисляет значение выражения или вызывает функцию по истечении заданного интервала (в миллисекундах), если до этого не был вызван метод clearTimeout(). Может передавать в функцию заданные в списке аргументы. Возвращает указатель на объект таймера, который можно использовать в методе clearTimeout() для остановки и уничтожения таймера.

3.3.2. Открытие нового окна

В табл. 13.3 приводятся общие для всех Web-браузеров свойства окна, передаваемые методу  open().

Таблица 13.3. Общие для всех Web-браузеров свойства окна, передаваемые методу  open()

Свойство окна

Описание

height=высота

Задает высоту создаваемого окна в пикселях.

left=расстояние

Расстояние (в пикселях) от левого края экрана до левого создаваемого окна.

location=yes | no

Включает или отключает отображение панели адреса, включающего строку ввода адреса, у создаваемого окна.

menubar=yes | no

Включает или отключает отображение строки меню у создаваемого окна

resizable=yes | no

Включает или отключает возможность изменения размера создаваемого окна.

scrollbars=yes | no

Включает или отключает отображение полос прокрутки у создаваемого окна.

status=yes | no

Включает или отключает отображение строки состояния у создаваемого окна.

toolbar=yes | no

Включает или отключает отображение панели инструментов у создаваемого окна.

top=расстояние

Расстояние (в пикселях) от верхнего края экрана до верхнего края создаваемого окна.

width=ширина

Задает ширину создаваемого окна в пикселях.

Если значение первого параметра функции open() равно пустой строке, создается новое окно с пустым содержимым. Для того, чтобы задать содержимое нового окна, используются методы open(), write(), writeln() и close() объекта document.

3.3.3. Передача параметров между окнами

Довольно часто возникает задача передачи некоторых параметров от открывающего окна открываемому окну и/или передача параметров из отрываемого окна открывшему его окну. В Internet Explorer для этого можно использовать два метода: showModalDialog и showModelessDialog, которые обеспечивают работу соответственно с модальными и немодальными диалоговыми окнами. Однако остальные Web-браузеры не поддерживает методы  showModalDialog и showModelessDialog и не имеют аналогичных методов.

Обмен параметрами можно выполнить и при открытии нового окна с помощью метода open().

Доступ к параметрам другого окна можно выполнить одним из двух способов:

  •  в Web-странице, открывшей новое окно, доступ к элементам нового окна (для чтения или изменения) можно выполнить, если перед элементом document указать имя нового окна (этот способ не работает в Web-браузере Opera);
  •  в новой  Web-странице доступ к элементам открывшего его окна (для чтения или изменения) можно выполнить, если перед элементом Web-страницы открывшего окна задать свойство opener объекта window  (этот способ работает во всех Web-браузерах).

3.2. Анимация

3.2.1. Модель визуального форматирования CSS

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

3.2.1.1. Свойство display

Каждый элемент в модели визуального форматирования имеет свойство display, которое может иметь следующие основные значения:

  •  block – блочный элемент (элемент в исходном документе, который визуально форматируется в виде некоторой структурной единицы текста, например, абзаца);
  •  inline – строковый  элемент (элемент в исходном документе, который не формирует новых структурных единиц текста, например, выделенный отрывок текста в абзаце или графический объект, импортированный в текст) (значение по умолчанию);
  •  list-item – элемент списка.

Кроме того, элемент может быть удален из потока вывода (значение "none") или элемент может наследовать свойство display из родительского элемента (значение inherit).

3.2.1.2. Свойство position

Свойство position элемента позволяет определить способ его позиционирования на странице. По умолчанию значением этого свойства является static, которое определяет естественный поток отображения элементов страницы в окне Web-браузера.

Если для свойства position элемента задается значение, отличное от static, то положение и размер блоков, порожденных отдельным элементом, в определенных случаях вычисляются относительно некоторой прямоугольной области, называемой контейнером данного элемента и определяемой следующим образом:

  •  контейнер (он называется начальным контейнером), в котором отображается элемент <body>, выбирается Web-браузером.
  •  для любого другого элемента, если он не является абсолютно позиционируемым, контейнер определяется краевой линией информативной области содержания  родительского блока данного элемента.

Значение свойства relative задает смещение элемента относительно его естественного положения в потоке отображения элементов.

При значении absolute элемент удаляется из естественного потока позиционирования, и размещается  на странице произвольным образом (его положение определяется свойствами top, right, bottom и left).

Значение fixed в дополнении к размещению блока в соответствии с моделью абсолютного позиционирования, задает его фиксацию относительно некоторого объекта. Если объект фиксирован относительно окна дисплея, то при прокрутке окна объект будет оставаться в одной и той же позиции, т.е. будет прокручиваться вместе с окном. Данное значение свойства не действует в Web-браузере Internet Explorer.

Значение inherit задает наследование свойства position из родительского элемента.

3.2.1.3. Свойства top, right, bottom и left

Положение блока абсолютно позиционированного блока на экране задается свойствами top, right, bottom и left, которые   определяют смещение соответственно относительно верхней границы блока отображения элемента, относительно правой границы блока отображения элемента, относительно нижней границы блока отображения элемента и относительно левой границы блока отображения элемента.

Смещение задается либо в абсолютных или относительных единицах, либо в виде процента относительно ширины (свойства right и left) или высоты (top и bottom) блока, в котором содержится элемент. Кроме того, в качестве значения свойства может быть задано значение auto (смещение элемента определяется автоматически, в зависимости от его ширины и высоты) или значение inherit (значение свойства берется от родительского элемента).

3.2.1.4. Свойства width и height

Ширина и высота абсолютно позиционированного блока определяются соответственно свойствами width и height. Эти свойства задаются в той же форме, что и свойства положения блока.

3.2.1.5. Свойство z-index

Обычно элемент, появляющийся позже другого в исходном тексте документа HTML, перекрывает ранее отображенные элементы. Свойство z-index задает слой, в котором располагается элемент при отображении. Если слой расположен ближе к пользователю (значение свойства z-index больше), то элемент перекрывает любой другой элемент с меньшим значением слоя, даже если последний и отображается позже.

Если значением свойства z-index является auto, то элемент перекрывает все элементы с таким же значением этого свойства, но его перекрывает любой элемент со значением свойства z-index, отличным от auto.

3.2.2. Визуальные эффекты CSS

Свойства визуальных эффектов позволяют задать способы вывода элементов на экран.

3.2.2.1. Свойство overflow

Свойство overflow определяет поведение элемента, когда размеры его содержимого не соответствуют размерам блока отображения, установленного свойствами top (bottom), left (right), width и height.

По умолчанию (значение visible)  выполняется сжатие или увеличение содержимого элемента таким образом, чтобы он полностью отобразился в заданном блоке (для графического содержимого элемента) или увеличение размеров блока отображения (для текстового содержимого). Если же задано значение hidden, то производится обрезание элемента в соответствии с размерами блока.

Два значения auto и scroll задают вывод полос прокрутки для блока с заданными значениями свойств width и height. Если задано значение auto, то  полосы прокрутки добавляются к блоку отображения только в том случае, если размеры содержимого элемента превосходят размеры блока отображения. При значении scroll полосы прокрутки всегда добавляются к блоку отображения.

Значение inherit свойства задает наследование поведения элемента, определенного в родительском блоке.

3.2.2.2. Свойство clip

Свойство clip позволяет обрезать видимое изображение абсолютно позиционированного элемента. По умолчанию (значение "auto") элемент имеет свой оригинальный размер.

Значение

rect(верхняя-граница правая-граница нижняя-граница левая-граница)

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

Значение inherit определяет наследование свойства clip из родительского элемента.

Свойство clip действует только в Web-браузере Internet ExplorerFirefox, Opera и Netscape это свойство не оказывает никакого действия).

3.2.2.3. Свойство visibility

Свойство visibility управляет отображением элемента. Для этого свойства доступны следующие значения. По умолчанию (значение inherit) значение свойства наследуется от родительского элемента.

Значение hidden скрывает элемент (делает его невидимым) независимо от видимости родительского элемента, а значение visible, наоборот, задает видимость элемента независимо от видимости родительского элемента.

Поведение элемента со свойством visibility, равным hidden, отличается от поведения объекта со свойством display равным none. В последнем случае элемент не только не отображается, но и изымается из потока отображения, и на странице нет пустого блока, соответствующего этому элементу.

3.2.2.4. Свойство cursor

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

Для типа курсора можно определить следующие значения:

  •  default – курсор, используемый на данной платформе по умолчанию (обычно в виде стрелки);
  •  crosshair – курсор в виде перекрестья;
  •  help – курсор наличия справочной информации (обычно в виде вопросительного знака);
  •  text – курсор, используемый при выделении текста (обычно в виде вертикальной линии "|");
  •  wait – курсор, указывающий на занятость программы.

Кроме того, имеется ряд типов курсора, отражающих перемещение границы:

  •  n-resize – курсор, отображающий перемещение верхней границы;
  •  ne-resize – курсор, отображающий перемещение верхней и правой границы;
  •  e-resize – курсор, отображающий перемещение правой границы;
  •  se-resize – курсор, отображающий перемещение правой и нижней границы;
  •  s-resize – курсор, отображающий перемещение нижней границы;
  •  sw-resize – курсор, отображающий перемещение нижней и левой границы;
  •  w-resize – курсор, отображающий перемещение нижней границы;
  •  nw-resize – курсор, отображающий перемещение левой и верхней границы.

Можно задать наследование свойства от родительского элемента (значение inherit).

Можно также определить собственный курсор, задав адрес ресурса, описывающего курсор в значении url("URL") свойства cursor, причем в URL  можно указать несколько значений для курсора, разделенных запятыми. Если файл описания для первого курсора не найден, ищется файл описания для второго курсора и т.д., причем обычно в конце списка ставится одно из предопределенных значений курсора (например, help).

Последняя возможность реализована только в Web-браузере Internet ExplorerFirefox, Opera и Netscape собственный курсор задать нельзя).

3.2.3. Операции с окном

3.2.3.1. Перемещение окна

Чтобы окно, открытое с помощью метода open(), передвигалось по экрану, необходимо изменять его координаты: вертикальную, горизонтальную или сразу обе.

Для окон перемещение выполняется с помощью методов moveTo() и moveBy(). Первый метод перемещает окно в точку с заданными координатами x и y, второй – на заданное расстояние по горизонтали и вертикали.

При использовании методов moveTo() и moveBy() окно перемещается в новую позицию практически мгновенно. Для плавного движения окна используется анимация, в которой эффект движения достигается сменой изображений через небольшие промежутки времени. При правильно выбранных временных интервалах между выводом изображений (кадров) вследствие инерционности зрения движение воспринимается как непрерывное (плавное).

Чтобы того, чтобы управлять величиной временных интервалов между кадрами, а, следовательно, и частотой появления кадров, в JavaScript используются методы управления временными интервалами setInterval(), setTimeout(), clearInterval() и clearTimeout() объекта window. Функции setInterval(), setTimeout() позволяют задать интервал и функцию (или выражение), которая будет выполняться каждый раз по прошествии этого интервала, например:

timer = window.setInterval("moveImage()", 100);

будет запускать функцию moveImage каждые 100 миллисекунд. Если понадобится прервать анимацию, вызывается метод clearInterval(). Он уничтожит данный объект таймера.

window.clearInterval(timer);

Метод setTimeout() просто однократно вызывает функцию или вычисляет выражение по истечении установленного интервала. А метод clearTimeout() уничтожает этот таймер, аналогично методу clearInterval().

Используя методы setInterval(), setTimeout(), clearInterval() и clearTimeout() можно задавать автоматическое перемещение окна по экрану. Однако следует иметь в виду, что это перемещение должно происходить в пределах экрана.  Ширину и высоту экрана дисплея можно получить с помощью свойств screen.width и screen.height. Размер окна, занимаемый Web-страницей можно получить в Internet Explorer с помощью свойств document.body.clientWidth и document.body.clientHeight,  а в остальных Web-браузерах – с помощью свойств innerWidth и innerHeight объекта window.

3.2.3.2. Прокрутка окна

Методы scrollTo() и scrollBy() объекта window в сочетании с методами управления временными интервалами можно использовать для плавной прокрутки содержимого окна. Первый из этих методов прокручивает содержимое окна к заданной точке с координатами x и y, второй – на заданное количество пикселей по вертикали и горизонтали. Значения смещений могут быть как положительными, так и отрицательными, т.е. содержимое окна можно прокручивать и справа налево и слева направо, и а также сверху вниз или снизу вверх.

3.2.3.3. Изменение размеров окна

Изменение размеров окна выполняется с помощью методов resizeTo() и resizeBy() объекта window. Первый метод увеличивает или уменьшает окно до заданных в параметрах ширины и высоты, второй – на заданное количество пикселей в ширину и высоту, например предложение:

window.resizeBy(30, -10);

увеличивает размер окна window на 30 пикселей в ширину и уменьшает на 10 пикселей в высоту. Для плавного изменения размеров окна также используются методы управления временными интервалами

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

if (currentWidth > 500)

 clearInterval(timer);

либо изменить знак параметров приращения окна, например:

dx = 5;

if (currentWidth > 500)

dx = -dx;

3.2.4. Операции с элементами Web-страницы

Методы управления временными интервалами можно также использовать для любого элемента документа HTML для создания различных динамических эффектов: плавного изменения размера текста или изображения, перемещения текста или изображения и т.п.

3.2.4.1. Изменение значения свойства стиля элемента

Задавая для элемента Web-страницы разные значения свойств стилей (например, размера текста, цвета переднего плана или фона и т.д.) можно с помощью методов setInterval(), setTimeout(), clearInterval() и clearTimeout() можно плавно изменять эти свойства.

3.2.4.2. Перемещение элемента и изменение его размера

Для перемещения элемента страницы необходимо, чтобы он был абсолютно позиционирован, т.е. значение свойства стиля position должно быть absolute.

У абсолютно позиционированного элемента можно изменять значения свойств top и left, задающие координаты левого верхнего угла элемента.

Аналогичным образом, изменяя свойства стиля width и height, можно модифицировать размеры абсолютно позиционированных элементов.

3.2.4.3. Покадровая анимация   

Для создания анимации часто используют несколько кадров,  запечатлевших разные фазы движения.

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

3.2.4.4. Перетаскивание и масштабирование элемента

К анимации относят также возможность изменения положения элемента документа HTML, когда курсор мыши перемещает элемент при нажатой левой клавише мыши – перетаскивание элемента или технология drag and drop.

Для реализации перетаскивания элементов необходимо определить эти элементы (или их родителей) как абсолютно позиционированные и задать глобальную переменную для хранения перетаскиваемого элемента (этой переменной присваивается значение null).

При нажатии клавиши мыши над перетаскиваемым элементом (событие mousedown) необходимо выполнить следующие действия:

  •  Определить источник события (в Internet Explorer свойство srcElement объекта event) или мишень (в DOM – свойство target объекта события);
  •  Если была нажата левая кнопка мыши (значение свойства button события равно 1 для Internet Explorer или 0 для DOM) и источник (мишень) события – один из перетаскиваемых элементов (определяемых обычно по значению атрибута id), присвоить элемент глобальной переменной для хранения перетаскиваемого элемента.

При перемещении мыши (событие mousemove), если нажата левая кнопка мыши и существует элемент для перетаскивания, т.е. значение глобальной переменной для хранения перетаскиваемого элемента не равно null, необходимо определить свойства clientX и clientY события event, значением которых являются текущие координаты курсора мыши. Затем необходимо присвоить эти значения свойствам left и top перетаскиваемого элемента и запретить "всплывание" события (чтобы событие не достигло обработчиков событий  элемента, расположенных выше по иерархической лестнице). Это выполняется в Internet Explorer присваиванием значения true свойству cancelBubble объекта event, а в DOM – вызовом метода stopPropagation() для объекта события.  Необходимо также запретить обработку события по умолчанию, которое в противном случае могло бы выполняться сразу после обработки данного события. Для этого в Internet Explorer свойству returnValue  объекта event присваивается значение false, а в DOM – вызывается метод preventDefault() для объекта события.  

При отпускании кнопки мыши  (событие mouseup) необходимо вновь присвоить глобальной переменной для хранения перетаскиваемого элемента значение null.

Можно также изменять размеры абсолютно позиционированных элементов, т.е. выполнять их масштабирование. Для этого, наряду со свойствами left и top элемента необходимо также изменять значения свойств width и height на величины перемещения курсора мыши по вертикали и горизонтали. При этом надо учитывать, что для свойства left перемещение курсора вправо уменьшает ширину элемента, а перемещение влево – увеличивает; для свойства top перемещение курсора вверх увеличивает высоту элемента, а перемещение вниз – уменьшает.

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

Создайте в Internet Explorer интерактивную Web-страницу с использованием языка JavaScript по одному из приведенных ниже вариантов.

Вариант 13-14-01

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

Вариант 13-14-02

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

Вариант 13-14-03

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

Вариант 13-14-04

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

Вариант 13-14-05

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

Вариант 13-14-06

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

Вариант 13-14-07

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

Вариант 13-14-08

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

Вариант 13-14-09

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

Вариант 13-14-10

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

Вариант 13-14-11

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

Вариант 13-14-12

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

Вариант 13-14-13

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

Вариант 13-14-14

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

Вариант 13-14-15

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

Вариант 13-14-16

Создайте Web-страницу, с «пульсирующим изображением». Размер изображения меняется за счет изменения значений атрибутов width и height дескриптора <img>.

Вариант 13-14-17

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

Вариант 13-14-18

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

Вариант 13-14-19

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

Вариант 13-14-20

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

Вариант 13-14-21

Создайте Web-страницу, в которой после одного из абзацев текста задается кнопка "Подробнее". При нажатии на эту кнопку на экран выводится скрытое содержимое абзаца, следующего за текущим абзацем. При повторном нажатии на кнопку абзац удаляется с экрана. Вывод и удаление абзаца выполняется с помощью свойства display.  

Вариант 13-14-22

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

Вариант 13-14-23

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

Вариант 13-14-24

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

Вариант 13-14-25

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

Вариант 13-14-26

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

Вариант 13-14-27

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

Вариант 13-14-28

Создайте Web-страницу, в которой при нажатии кнопки "Увеличить"  размер кнопки постепенно увеличивается (за счет увеличения размера шрифта – свойства font-size до некоторого значения), а затем надпись меняется на "Уменьшить". При повторном нажатии кнопка уменьшается до первоначального значения, и надпись опять изменяется на  "Увеличить".

Вариант 13-14-29

Создайте Web-страницу, выдающую при своем открытии в строке состояния  дату и время своей загрузки в виде "Дата загрузки: число месяц год Время загрузки: час:минута:секунда", а при закрытии страницы – сообщение в виде "Дата окончания работы: число месяц год Время окончания работы: час:минута:секунда".

Вариант 13-14-30

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

5. Содержание отчета

В отчете должен быть представлен тексты файлов, содержащих созданные Web-страницы, а также скриншоты, отображающие вывод Web-страницы на экран.

6. Вопросы для самоконтроля

  1.  Какие основные свойства определены для объекта window? Дайте краткую характеристику каждого свойства.
  2.  Какие основные методы определены для объекта window? Дайте краткую характеристику каждого метода.
  3.  Как можно открыть новое окно в Web-страницы с помощью объекта window? Какие свойства окна можно задать или изменить при открытии нового окна?
  4.  Как можно задать обмен параметрами между новым окном и открывшим его окном?
  5.  Как выводится на экран элемент HTML при различных значениях свойства display в CSS?
  6.  Как задается способ позиционирования элемента HTML на Web-странице с помощью свойства position в CSS?
  7.  Как задается положение и размеры абсолютно позиционированного блока на Web-странице с помощью свойств top, left, bottom, right, width и height в CSS?
  8.  Как задается перекрытие элементов HTML на Web-странице с помощью свойства z-index в CSS?
  9.  Как выводится абсолютно позиционированный элемент при различных значениях свойства overflow в CSS?
  10.  Как задается вывод фрагмента изображения на Web-странице с помощью свойства clip в CSS?
  11.  Как задается видимость изображения на Web-странице с помощью свойства visibility в CSS?
  12.  Как задается тип курсора на Web-странице с помощью свойства cursor в CSS?
  13.  Как задается плавное  перемещение окон по экрану с помощью методов объекта window и свойств CSS?
  14.  Как ограничить перемещение окон и элементов Web-страницы по экрану?
  15.  Как задается плавная  прокрутка содержимого окна с помощью методов объекта window и свойств CSS?
  16.  Как задается плавное изменение размеров окна с помощью методов объекта window и свойств CSS?
  17.  Какие операции с элементами Web-страницы можно выполнять с использованием свойств CSS? Дайте краткое описание каждой операции.
  18.  Как можно изменить  характеристики элемента HTML, переместить элемент по экрану и изменить его размер, используя свойства CSS?
  19.  Как выполняется анимация при использовании массива изображений (кадров)?
  20.  Как выполняется анимация в том случае, когда все кадры  заданы в одном изображении?
  21.  Как выполняется перетаскивание элемента по экрану и изменение размера элемента с помощью средств обработки событий и свойств CSS?


 

А также другие работы, которые могут Вас заинтересовать

21594. ЭЛЕКТРИЧЕСКИЕ СОЕДИНЕНИЯ В РАДИОЭЛЕКТРОННОЙ АППАРАТУРЕ 516.5 KB
  Линии передач ЛП. Электрически длинные линии передачи. Линии электропитания. Виды электрических соединений [2] Линии передач ЛП.
21595. ОСНОВЫ ТЕХНОЛОГИИ ПРОИЗВОДСТВА РАДИОЭЛЕКТРОННОЙ АППАРАТУРЫ 245.5 KB
  Technology of the fabrication of the electronic instruments Тема 10: ОСНОВЫ ТЕХНОЛОГИИ ПРОИЗВОДСТВА РАДИОЭЛЕКТРОННОЙ АППАРАТУРЫ Никогда не известно для чего нужна лишняя деталь пока ее не выбросишь. Содержание: Организация производства радиоэлектронной аппаратуры. Основные понятия технологии производства аппаратуры. Типы производства.
21596. РАЗРАБОТКА ТЕХПРОЦЕССОВ ПРОИЗВОДСТВА РАДИОЭЛЕКТРОННОЙ АППАРАТУРЫ 441.5 KB
  Проектирование техпроцессов сборки и монтажа. Типовые и групповые процессы сборки и монтажа. Техпроцессы сборки и монтажа аппаратуры. Выбор техпроцесса сборки электронного узла.
21597. ПРОЕКТИРОВАНИЕ ПЕЧАТНЫХ ПЛАТ 235.5 KB
  Печатные платы. Общие сведения о печатном монтаже [1 3 4] Печатные платы это элементы конструкции которые состоят из плоских проводников в виде участков металлизированного покрытия размещенных на диэлектрическом основании и обеспечивающих соединение элементов электрической цепи. В зависимости от числа нанесенных печатных проводящих слоев печатные платы разделяются на одно двух и многослойные. Односторонние печатные платы ОПП выполняются на слоистом прессованном или рельефном литом основании без металлизации или с металлизацией...
21598. ТЕХНОЛОГИЧЕСКИЕ ОПЕРАЦИИ ИЗГОТОВЛЕНИЯ ПП 284 KB
  Формирование рисунка печатных плат. Контроль и испытания плат. Отсюда распространенное название таких плат печатные платы ПП. Малогабаритные платы размером до 100 мм размещают на групповой заготовке площадью не менее 005 м2 с расстоянием 510 мм между ними.
21599. ТЕХНОЛОГИЯ ИЗГОТОВЛЕНИЯ ПЕЧАТНЫХ ПЛАТ 252 KB
  Доминирующей в этих условиях является субтрактивная технология особенно с переходом на фольгированные диэлектрики с тонкомерной фольгой 5 и 18 мкм. Сухой пленочный фоторезист СПФ наслаивается на заготовки фольгированного диэлектрика прошедшие операции сверления отверстий и предварительной 57 мкм металлизации медью стенок отверстий и всей поверхности фольги. Для получения изображений используется пленочный фоторезист толщиной 1550 мкм. Фоторезисты толщиной менее 4550 мкм на этих операциях над отверстиями разрушаются.
21600. УСТАНОВКА КОМПОНЕНТОВ НА ПЕЧАТНЫХ ПЛАТАХ 193.5 KB
  Technology of making of the printed boards Тема 15: УСТАНОВКА КОМПОНЕНТОВ НА ПЕЧАТНЫХ ПЛАТАХ Все вещи таковы каков дух того кто ими владеет. Установка компонентов на ПП. Системы подачи компонентов. Операция установки компонентов на печатную плату во многом определяет экономичность и производительность этого процесса.
21601. ПАЙКА И КОНТРОЛЬ ПЕЧАТНЫХ ПЛАТ 212.5 KB
  Пайка волной припоя. Производство печатных плат на заключительной стадии сборочномонтажных операций включает в себя следующие основные этапы: оплавление припоя с помощью печей или в машинах; отмывка плат; выходной контроль; ремонт дефектных плат если он возможен; влагозащита плат; упаковка. При пайке две металлические детали или детали с металлическим покрытием соединяются при помощи припоя третьего металла или сплава. Обеспечить вытеснение флюса с помощью наступающего припоя; 4.
21602. РЕГУЛИРОВКА, КОНТРОЛЬ И ИСПЫТАНИЯ АППАРАТУРЫ 190 KB
  Цели испытаний. Категории испытаний. Программа испытаний. В этой связи существенный объем информации о качестве РЭА получают путем контроля их параметров и проведения испытаний на всех этапах начиная с разработки нормативнотехнической документации и кончая анализом рекламаций и заключений потребителя о качестве готовых изделий.