- •Часть I. Основы разработки web-документов средствами языка разметки гипертекста html
- •1.1 Создание Web-документов на языке html
- •1.1.1 Структура html-документа
- •1.1.2 Функциональные блочные элементы. Флаги
- •1.1.3 Списки
- •1.1.4 Таблицы
- •1.1.5 Комментарии
- •1.2 Форматирование текста
- •1.2.1 Гиперссылки
- •1.2.2 Подготовка и использование графических файлов
- •Часть 2. Создание интерактивных Веб - страниц и динамической графики при помощи языка JavaScript
- •2.1 Элементы языка JavaScript
- •Часть 4. «Создание динамических графиков»
Часть 4. «Создание динамических графиков»
В этом разделе рассмотрена программа для создания приближающегося рисунка. Рисунок после наведения на него указателя курсора начинает приближаться. Для этого используется функция gpict( ). Код программы для функции gpict( ) приведен ниже на Листинге 7.
Листинг 7 Код программы для функции gpict ( )
var d=document
var w=100
function gpict()
{
if (w<300)
{w=w+10
d.mypict.width = w
setTimeout("gpict()",500)
}
}
Функция gpict() это функция, создаваемая пользователем. Она использует стандартную функцию setTimeout("gpict()",500). При помощи функции setTimeout("gpict()",500) производится повторный вызов функции gpict() через каждые 500 миллисекунд (число 500 можно заменить на другое значение). При каждом повторном вызове функции ширина рисунка w увеличивается на 10. В данной программе начальная ширина w=100. Увеличение происходит до заданного значения. В данном примере это 300. Этим достигается эффект приближения рисунка. При достижении конечного значения процесс приближения прекращается. В сценарии также используется стандартная функция onMouseOver="gpict()". При наведении указателя курсора на рисунок осуществляется вызов функции gpict() . Полностью код программы приведен на Листинге8.
Листинг8 Код программы для создания приближающегося
изображения
<HTML>
<HEAD>
<TITLE> Увеличивающееся изображение </TITLE>
<script>
<!--//
var d=document
var w=100
function gpict()
{
if (w<300)
{w=w+10
d.mypict.width = w
setTimeout("gpict()",500)
}
}
//-->
</script>
</Head>
<BODY>
<h4> При наведении курсора на изображение оно приближается </h4>
<img src="p1.jpg" name=mypict width=100 onMouseOver="gpict()">
</Body>
</HTML>
В листинге используется имя рисунка p1.jpg. В программе рисунку присваивается имя mypict.
Задание 12 . «Создание динамических графиков в Веб- документе»
Цель задания: Научиться создавать динамический рисунок в Веб – документе.
Задание:
Составить код программы для включения в Веб – документ динамического рисунка.
Выполнение:
1. Открыть Блокнот, выполняя команды Пуск ► Программы ► Стандартные ► Блокнот.
2. Набрать код программы в соответствии с Листингом 4.2.
3. Выбрать и поместить в свою папку рисунок с расширением .jpg или .gif. Для этого выполняются команды Пуск ► Поиск. В окне Результаты поиска выбираем Файлы и папки и в диалоговое окно вводим *.jpg или *.gif. Нажимаем кнопку Найти. В правом разделе диалогового окна появляется перечень рисунков с заданным расширением. Выбираем один из рисунков и помещаем его в свою папку.
4.В программе заменить p1.jpg на имя и расширение выбранного рисунка.
5. Сохранить программу в своей папке с расширением .txt, присвоив файлу имя JS5. В окошке Тип файла выбрать Текстовый файл (*.txt).
6. Сохранить программу в своей папке с расширением .htm, присвоив файлу имя JS5. В окошке Тип файла выбрать Все файлы.
7. Вызвать программу на выполнение, дважды щелкнув левой клавишей мыши на значке с именем JS5.htm. Проверить наличие эффекта приближающегося изображения. Процесс приближения возникает при наведении указателя курсора на рисунок.