Добавил:
ivanov666
Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз:
Предмет:
Файл:Web-технологии. Ч.1. Учебное пособие (курс лекций)
.pdf
Исходный код этого примера выглядит следующим образом:
<a href="#"
onMouseOver="document.myImage2.src='img2.gif'"
onMouseOut="document.myImage2.src='img1.gif'">
<img src="img1.gif" name="myImage2" width=160 height=50 border=0></a>
При этом могут возникнуть следующие проблемы:
пользователь пользуется браузером, не имеющим поддерж-
ки JavaScript 1.1.
второе изображение не было загружено.
для этого мы должны писать новые команды для каждого
изображения на web-странице.
мы хотели бы иметь такой скрипт, который можно было бы
использовать во многих web-страницах вновь и вновь, и без боль-
ших переделок.
Теперь мы рассмотрим полный вариант скрипта, который мог
бы решить эти проблемы. Чтобы этот скрипт сохранял свою гибкость, следует соблюдать два условия:
не оговаривается количество изображений – не должно
иметь значения, сколько их используется, 10 или 100
не оговоривается порядок следования изображений – должна
существовать возможность изменять этот порядок без изменения
самого кода
Рассмотрим скрипт:
<html>
<head>
<script language="JavaScript">
<!-- hide
var browserOK = false;
var pics;
// -->
</script>
<script language="JavaScript1.1">
<!-- hide
browserOK = true;
pics = new Array();
141
// -->
</script>
<script language="JavaScript">
<!-- hide
var objCount = 0; // количество изображений на web-странице
function preload(name, first, second) {
// предварительна\я загрузка изображений и размещение их в мас-
сиве
if (browserOK) {
pics[objCount] = new Array(3);
pics[objCount][0] = new Image();
pics[objCount][0].src = first;
pics[objCount][1] = new Image();
pics[objCount][1].src = second;
pics[objCount][2] = name;
objCount++;
}
}
function on(name){
if (browserOK) {
for (i = 0; i < objCount; i++) {
if (document.images[pics[i][2]] != null)
if (name != pics[i][2]) {
// вернуть в исходное систо\яние все другие изображени\я
document.images[pics[i][2]].src = pics[i][0].src;
} else {
// показывать вторую картинку, поскольку курсор пересекает дан-
ное изображение
document.images[pics[i][2]].src = pics[i][1].src;
}
}
}
}
function off(){
if (browserOK) {
for (i = 0; i < objCount; i++) {
// вернуть в исходное систо\яние все изображени\я
if (document.images[pics[i][2]] != null)
142
document.images[pics[i][2]].src = pics[i][0].src;
}
}
}
// заранее загружаемые изображени\я – необходимо здесь указать
// изображени\я, которые нужно загрузить заранее, а также объект
Image,
// к которому они относ\ятс\я (первый аргумент). Именно эту
часть
// нужно корректировать, если необходимо использовать скрипт
// применительно к другим изображени\ям (конечно это не осво-
бождает
// Вас от об\язанности подредактировать в документе также и раз-
дел body)
preload("link1", "img1f.gif", "img1t.gif");
preload("link2", "img2f.gif", "img2t.gif");
preload("link3", "img3f.gif", "img3t.gif");
// -->
</script>
<head>
<body>
<a href="link1.htm" onMouseOver="on('link1')"
onMouseOut="off()">
<img name="link1" src="link1f.gif"
width="140" height="50" border="0"></a>
<a href="link2.htm" onMouseOver="on('link2')"
onMouseOut="off()">
<img name="link2" src="link2f.gif"
width="140" height="50" border="0"></a>
<a href="link3.htm" onMouseOver="on('link3')"
onMouseOut="off()">
<img name="link3" src="link3f.gif"
width="140" height="50" border="0"></a>
</body>
</html>
Данный скрипт помещает все изображения в массив pics. Создает этот массив функция preload(), которая вызвается в самом
начале. Вызов функции preload() выглядит просто как:
143
preload("link1", "img1f.gif", "img1t.gif");
Это означает, что скрипт должен загрузить с сервера два
изображения: img1f.gif и img1t.gif. Первое из них – это та картинка,
которая будет представлена, пока курсор мыши не попадает в область изображение. Когда же пользователь помещает курсор мыши
на изображение, то появляется вторая картинка. При вызове функции preload() в качестве первого аргумента мы указываем слово
"link1" и тем самым задаем на web-странице объект Image, которому и будут принадлежать оба предварительно загруженных
изображения. Если посмотретье в нашем примере в раздел <body>,
то обнаруживается изображение с тем же именем link1. Мы пользуем не порядковый номер, а именно имя изображения для того,
чтобы иметь возможность переставлять изображения на webстранице, не переписывая при этом сам скрипт. Обе функции on()
и off() вызываются посредством программ обработки событий
onMouseOver и onMouseOut. Поскольку сам элемент image не может отслеживать события MouseOver и MouseOut, то мы обязаны
сделать на этих изображениях еще и ссылки.
Можно видеть, что функция on() возвращает все изображения,
кроме указанного, в исходное состояние. Делать это необходимо
потому, что в противном случае выделеными могут оказаться сразу несколько изображений (дело в том, что событие MouseOut не
будет зарегистрировано, если пользователь переместит курсор с
изображения сразу за пределы окна).
Изображения – без сомнения могучее средство уличшения
web-страницы. Объект Image дает возможность создавать действительно сложные эффекты. Однако заметим, что не всякое изображение или программа JavaScript способно улучшить страницу. Не
количество изображений делает web-страницу привлекательной,
а их качество.
Выводы. В результате изучения материала данной лекции по-
лучены представления о назначении массива elements, объекта
form, массива forms. Изучены объект image и массив images,
а также способы загрузки новых изображений.
Вопросы для самопроверки
1. Назначение массива elements?
144
2. Назначение объекта form и массив forms?
3. Использование массива forms.
4. Назначение объекта image и массив images.
5. Какие способы загрузки новых изображений существуют?
6. Что такое упреждающая загрузка изображения.
Литература: 7, 8.
145
Лекционный курс является своевременным, так как посвящен
актуальным проблемам использования интернет технологий. Лекционный курс состоит из девяти лекций и излагает современные
подходы в технологиях web разработок.
Пособие охватывает вопросы создания web-сайтов с использованием современных средств разработки, основные способы обмена данными в интернет, язык разметки гипертекста HTML, язык
создания сценариев JavaScript, широко использованы и проанализированы современные подходы в web-технологиях. Рассматриваются вопросы разработки web-сайтов и их реализация в заданной
инструментальной среде.
В учебном пособии приводятся теоретико-практический материал, примеры, сопровождающиеся иллюстрациями.
146
1. Web-технологии. Кемерово: КемГУКИ, 2014. 104 с.
2. Брокшмидт К. Введение в разработку приложений для
Windows 8 с использованием HTML, CSS и JavaScript. 2-е изд.,
испр. М.: Национальный Открытый Университет «ИНТУИТ»,
2016. 460 с.
3. Брокшмидт К. Пользовательский интерфейс приложений
для Windows 8, созданных с использованием HTML, CSS и
JavaScript. 2-е изд., исправ. М.: Национальный Открытый Университет «ИНТУИТ», 2016. 396 с.
4. Информационные Web-технологии / Ю. Ю. Громов, О. Г. Иванова, Н. Г. Шахов, В. Г. Однолько: учебное пособие Электронный
ресурс: Тамбовский государственный технический университет,
ЭБС АСВ. Тамбов, 2014. 96 c.
5. Крис Миллз. Введение в HTML5: учебное пособие. М.: Интернет-Университет Информационных Технологий (ИНТУИТ),
2016. 133 с.
6. Савельев А. О. HTML5. Основы клиентской разработки /
А. О. Савельев; А. А. Алексеев. 2-е изд., испр. М.: Национальный
Открытый Университет «ИНТУИТ», 2016. 272 с.
7. Бибо Б. JQUERY: подробное руководство по продвинутому
JavaScript / Бер Бибо, Иегуда Кац; [пер. с англ. А. Киселева]. 2-е
изд. СПб.: Символ-Плюс; М.: [б.и.], 2011. 612 с.: ил.; 24.
8. Вейнер П. Java и JavaScript / П. Вейнер; перев. М Кузьмин.
М.: Лори, 2006. 242 с.: ил.
147
Введение . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
1. Основные сведения об Интернет . . . . . . . . . . . . . . . . .
2. Основные сведения о языке HTML. Основы
создания web-страниц . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
3. HTML. Гиперссылки. Внедрение изображений . . . . .
4. HTML. Таблицы. Формы в HTML . . . . . . . . . . . . . . . .
5. Технология CSS. Проектирование структуры
web-сайта . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
6. Внедрение объектов JavaScript в HTML-документ.
Базовые конструкции языка JavaScript . . . . . . . . . . . . . . . . . .
7. Основы объектно-ориентированного
программирования в JavaScript. Потомки объектов
JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
8. Основы объектно-ориентированного
программирования в JavaScript. Потомки объектов
JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
9. Работа с формами в JavaScript. Работа
с изображениями на web-странице . . . . . . . . . . . . . . . . . . . . .
Заключение . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Литература . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
3
4
21
35
43
65
83
99
110
128
146
147
148
Учебное издание
Говорова Светлана Владимировна
WEB-ТЕХНОЛОГИИ
УЧЕБНОЕ ПОСОБИЕ
(КУРС ЛЕКЦИЙ)
Часть 1
Издается в авторской редакции
Компьютерная верстка Н. Неговора
_________________________________________________________
Подписано в печать 12.07.2019
Формат 60х84 1/16 Усл. п. л. 8,66 Уч.-изд. л. 7,13
Бумага офсетная Заказ 50 Тираж 20 экз.
_________________________________________________________
Отпечатано в издательско-полиграфическом комплексе
ФГАОУ ВО «Северо-Кавказский федеральный университет»
355029 г. Ставрополь, пр-т Кулакова, 2
149
Соседние файлы в предмете [НЕСОРТИРОВАННОЕ]