lab_3
.pdfДля коллекций предусмотрено свойство length, хранящее количество элементов в коллекции. В качестве примера рассмотрим, как получить доступ к элементам следующего HTMLдокумента.
Пример. HTML-документ, к элементам которого нужно получить доступ
<HTML>
<HEAD>
<TITLE> Заголовок документа </TITLE> </HEAD>
<BODY>
<H1 id = “main_part”> Главный заголовок документа </H1> <Р id = “part1”> Текста документа... </P>
</BODY>
</HTML>
Если осуществлять доступ к элементам документа при помощи коллекции all с использованием номеров, то доступ ко всем элементам документа будет выглядеть следующим образом:
var elements=[]; //Массив, в который скопируем ссылки на объекты страницы var i;
for (i=0; i<document.all.length; i++) elements[i] = document.all(i);
В данном примере в коллекции all содержится шесть элементов (HTML, HEAD, TITLE, BODY, H1, P), поэтому массив elements после выполнения приведенного фрагмента программы должен содержать шесть элементов.
Если бы доступ к элементам коллекции осуществлялся по имени HTML-элементов, то можно было бы получить объекты, описывающие заголовок и абзац, следующим образом:
var h = document.all("main_part"); var p = document.all(“part1”);
Возможно также прямое обращение к поименованным элементам документа. При использовании этого способа предыдущий фрагмент программы будет выглядеть следующим образом:
var h = main_part; var p = part1;
11
3. Примеры сценариев
3.1 Использование условного оператора
Напишем сценарий, в процессе работы которого, происходит увеличение изображения (эффект приближения) при наведении курсора мыши на изображение.
Как было изучено ранее, в HTML можно задать размер вставляемого изображения. Если заданные размеры больше или меньше оригинала, то браузер автоматически подгонит оригинал под эти размеры. Пусть имеется картинка (tig.jpg), ширина которой в оригинале 300px. Зададим так, что изначально на странице картинка имеет ширину 100px, а при наведении на нее курсора, она увеличивалась до 300px.
Html-код страницы:
<html>
<head>
<title>javascript if</title>
<script type="text/javascript" src="script.js"></script> </head>
<body>
<img src="images/tig.jpg" name="tigr" width="100" onMouseOver="bigPict()">
</body>
</html>
Создадим функцию, создающую данное приближение. При создании функции воспользуемся стандартной функцией JavaScript setTimeout, которая вызывает пользовательскую функцию с заданным промежутком времени:
function bigPict(){
var w=document.tigr.width; if (w<300){
document.tigr.width=w+5;
document.tigr.src="images/tig.jpg" setTimeout("bigPict()", 500)
}
}
Созданная функция проверяет ширину картинки (width) и, если она меньше 300px, то увеличивает эту ширину на 5px. Функция setTimeout вызывает функцию bigPict каждые полсекунды, благодаря чему размер картинки будет увеличиваться до заданных размеров.
3.2 Изменение картинки
Изменение происходит при попадании курсора мыши в область картинки и при выходе курсора из нее. В данном примере для этого используется массив объектов Image и свойства объектов-картинок name и src. Для обработки события попадания курсора мыши в область картинки используется атрибут onMouseMove, а при выходе курсора из нее onMouseOut.
Массив Image содержит 4 элемента – по два на каждую картинку: первая картинка имеет имя «search» и для работы с ней используются два графических файла «search.gif» (вид картинки при входе на нее) и «searchON.gif» (вид картинки при выходе из нее). Соответственно для второй картинки: name = "ex" и два файла: «ex.gif», «exON.gif».
<html>
<head>
<title> Смена картинок </title> <Script language="JavaScript"> <!--
// Массив картинок (пример - для двух):
Images = new Array(new Image,new Image,new Image,new Image);
// Кэширование картинок (загрузка заранее), для мгновенной смены изображений:
Images[0].src="search.gif"; Images[0].name="search"; Images[1].src="searchON.gif";
12
Images[2].src="ex.gif"; Images[2].name="ex";
Images[3].src="exON.gif";
function imageON(Name) { //фукнция смены изображений при наведении мыши for (i=0; i<Images.length; i+=2) {
if (Images[i].name == Name) {document.images[Name].src=Images[i+1].src;}
}
}
function imageOFF(Name) { //функция смена изображения при отведении мыши for (i=0; i<Images.length; i+=2) {
if (Images[i].name == Name) {document.images[Name].src=Images[i].src;}
}
}
//--> </Script > </head>
<body bgcolor=#DCDCDC> <p align="center">
<img name="search" onmousemove="imageON(this.name)" onmouseout="imageOFF(this.name)" src="search.gif">
</p>
<p align="center">
<img name="ex" onmousemove="imageON(this.name)" onmouseout="imageOFF(this.name)" src="ex.gif">
</p>
</body>
</html>
Если исходные картинки имеют разный размер, то при смене картинки будет происходить некрасивое мигание (то картинка больше, то меньше). Для отображения всех картинок в одинаковых размерах необходимо задать значения атрибутов width и height тега <IMG> при размещении каждой картинки.
3.3Слайд-шоу и баннеры
Впредыдущем примере изменение происходило при попадании курсора мыши в область картинки и при выходе курсора из нее. В данном примере это организовано в цикле для двух картинок с использованием метода setTimeout.
<html>
<head> <title>Слайд-шоу</title> <script language="JavaScript"> i=0;
img_a=new Array(); img_a[0]=new Image(); img_a[1]=new Image(); img_a[0].src="logo.gif"; img_a[1].src="lgcit.gif";
function img_b()
{
document.images[0].src=img_a[i].src; i++;
if(i>1) i=0; setTimeout("img_b()", 2000);
}
</script>
</head>
<body bgcolor="#DCDCDC" onLoad="img_b()"> <img src="logo.gif">
13
</body>
</html>
Поясним данный пример.
Как видно, в начале скрипта создается массив из двух элементов – картинок, составляющих слайд-шоу: в нулевой элемент вносится URL-адрес картинки «logo.gif», в первый элемент - URLадрес картинки «lgcit.gif».
Затем создается функция img_b():
document.images[0].src=img_a[i].src – все картинки, размещенные на страничке (или в документе), составляют коллекцию картинок images. Соответственно каждая из картинок имеет свой порядковый номер, начинающийся с 0. Нумерация картинок происходит сверху вниз слева на право. Следовательно, строка document.images[0].src=img_a[i].src обозначает, что слайд-шоу будет располагаться в нулевой картинке документа (или для нас первой картинке на страничке). Далее прописаны строки, в которых собственно и происходит перебор картинок массива, составляющих слайд-шоу, через заданные 2000 мс.
Вызов функции img_b(), организующей слайд-шоу, происходит после загрузки странички.
Для этого |
в теге <body> |
используется |
обработчик |
события |
onLoad, т.е. |
|
<body bgcolor="#DCDCDC" onLoad=img_b()>. |
|
|
|
|
||
По аналогии с примером п.4.1 для отображения картинок одного размера нужно задать |
||||||
значения атрибутов width и heigh тега <IMG> при |
размещении |
картинки, |
т.е. в скрипте |
|||
необходимо |
вместо |
строки |
<img |
src="logo.gif"> |
записать |
|
<img src="logo.gif" width=200 |
height=200>. |
|
|
|
|
|
Данный метод широко используется для создания баннеров или целых слайд-шоу. Слайд-шоу - это приложение, которое показывает фотографии в установленных режимах,
например, друг за другом с паузой в несколько секунд. Фотографии обычно одной тематики, такие как подборка кадров из одного фильма, фотосессия популярного певца или актера, серия фотографий городов, стран, мировых достопремечательностей или просто веселых животных.
Для разработки слайд-шоу можно воспользоваться специальными программами (например, "Quick Slide Show" - http://www.narand.com/ru/qss/details), а можно написать программный код на JavaScript, который отображает последовательность картинок через заданный интервал времени, как это представлено выше.
Баннер – это рекламный блок, при щелчке по которому посетитель переходит на рекламируемый сайт. Баннеры размещают на web-страницах, для привлечения посетителей (потенциальных клиентов) на свой сайт или для продвижения бренда. В настоящее время баннеры очень активно используются в Интернете, их по праву можно считать одним из главных инструментов для проведения эффективной рекламной кампании.
Виды баннеров
Самый первый баннер появился в сети в 1994 году. За свою недолгую историю у баннеров появилось множество разновидностей и технологий на которых они основывались. Ниже приведем несколько основных видов баннеров:
•JPG баннер – один из первых разновидностей баннера появившихся в Интернете, представляет из себя статическое изображение. На данный момент считается устаревшим и не может соперничать со своими более современными собратьями.
•GIF баннер – следующая ступень эволюции баннеров. Представляет собой анимированный графический элемент созданный из набора статичных изображений (кадров). Обычно состоит из 3-5 кадров.
•Flash баннер – самая современная технология, позволяющая создавать самые эффектные анимированные баннеры. Предоставляет обширные возможности для реализации дизайнерских идей.
•Пиксельные баннеры – обособленный вид баннеров. Если при создании JPG, GIF и Flash баннеров в большинстве случаев используются фотоизображения, что негативно сказывается на весе, пиксельные баннеры создаются путем прорисовки дизайнером каждого пикселя (пиксель
14
– мельчайшая точка или элемент изображения) вручную. Такая технология, позволяет создать красочную анимацию при минимальном весе баннера.
3.4 Переливающиеся цветами ссылки
Привлечь внимание посетителей к ссылкам на веб-странице можно с помощью эффекта динамического изменения цвета. Суть задач состоит в том, чтобы случайным образом выбирать и устанавливать цвет ссылок. В следующем примере множества цветов, из которых происходит выбор, различаются для уже использованных и еще не использованных ссылок. Эти множества цветов задаются в виде массивов. В функции colorchange() происходит генерация двух случайных чисел в диапазоне размера массивов цветов, данные числа присваиваются соответственно в переменные link и vlink. Затем из массивов цветов выбираются элементы с индексами link и vlink, данные цвета присваиваются соответственно коллекции непосещенных и посещенных ссылок. Для реализации мигания ссылок производят вызов функции colorchange() через 100 мс.
<html>
<head>
<title> Мигающие ссылки </title> <script>
aclrlink = new Array() //массив цветов неисп.ссылок aclrlink[0] = 'yellow'
aclrlink[1] = '#80ff80' aclrlink[2] = '#ffff80' aclrlink[3] = '#408000'
aclrvlink = new Array() |
//массив цветов исп.ссылок |
||
aclrvlink[0] = 'blue' |
|
||
aclrvlink[1] = 'purple' |
|
||
aclrvlink[2] |
= |
'black' |
|
aclrvlink[3] |
= |
'red' |
|
function colorchange(){
link = Math.round((aclrlink.length+0.1)*Math.random()) vlink = Math.round((aclrvlink.length+0.1)*Math.random()) document.linkColor=aclrlink[link] document.vlinkColor=aclrvlink[vlink]
}
setInterval("colorchange()", 100) |
//изменение цвета через 100 мс |
</script> |
|
</head> |
|
<body>
<B>
<a href= dhtml_1.htvl> Ссылка 1 </a> <br>
<a href= dhtml_2.html> Ссылка 2 </a> <br>
<a href= dhtml_115.html> Ссылка 3 </a> <br>
</B>
</body>
</html>
Практическое задание.
Для работы можно воспользоваться файлами, созданными в предыдущих лабораторных работах.
Используя теоретическую часть, отобразите в Вашем документе все выше изложенные скрипты и методы:
1)реализуйте на любой страничке скрипт изменения картинок при наведении на них курсора мыши;
15
2)реализуйте слайд-шоу (не менее 10 слайдов в каждом) в двух разных местах странички;
3)разработайте на страничке баннер – ссылку на другую страничку или другой сайт;
4)модифицируйте скрипт про переливающиеся цветами ссылки так, чтобы смена цвета происходила у каждой ссылки отдельно (рекомендация – необходимо обратиться к каждой ссылке в коллекции ссылок отдельно, например, по ее номеру, и произвести настройку цвета (color), используя метод style);
5)совместите несколько эффектов на одной страничке (рекомендация – в onLoad можно вызвать несколько функций, перечислив их через точку запятую);
6)реализуйте страничку, содержащую минимум 4 разных html-элемента (например, параграф, рисунок, ссылка, список и т.п.), которая динамически формируется при помощи скрипта (используя метод write);
7)реализуйте скрипт – обработчик нажатия на какой-нибудь текстовый блок документа (используя функцию alert);
8)реализуйте скрипт увеличения картинки и модифицируйте его так, чтобы картинка при выходе курсора мыши принимала исходные значения;
9)на своих страничках реализуйте скрипт, аналогичный скрипту про вывод прогноза погоды;
10)оформите отчет, в котором перечислите, объясните назначение и приведите примеры использования всех изученных возможностей создания DHTML.
Контрольные вопросы к лабораторной работе 3
1)Что такое DHTML?
2)Для чего используется язык программирования JavaScript?
3)Опишите правила формирования имени переменной в JavaScript.
4)Какой тег используется для размещения сценария в документе?
5)Опишите средства, используемые для отладки сценария.
6)Опишите варианты исполнения сценария.
7)Как Вы думаете, чем отличается выполнение сценария, помещенного в голове документа, от сценария, вызываемого обработчиком события onLoad?
8)Опишите алгоритм смены картинки при наведении на нее курсора мыши.
9)Что такое слайд-шоу?
10)Опишите алгоритм слайд-шоу.
11)Что такое баннер? Какие виды баннеров Вы знаете?
12)Опишите механизм создания баннера.
13)Как совместить в документе несколько сценариев?
14)Опишите алгоритм эффекта приближения.
15)Опишите операторы цикла.
Рекомендация:
Для более подробного изучения HTML, CSS и JavaScript можно использовать информацию различных источников Интернет. Например,
http://htmlbook.ru/ http://css.manual.ru/ http://html.manual.ru/ http://www.site-do.ru/js/js.php
16