Первый урок

Способ №2

Сейчас мы будем делать фотоальбом другим методом. Но, чтобы жизнь вам раем не казалась, сегодня вам придется поднапрячь мозги, потому как сейчас мы будем делать фотоальбом с помощью языка программирования Java Script. Что, испугались? Это хорошо… Когда человек чего-то пугается, силы его мобилизуется а, значит, и эффект будет максимальным.

Итак, почему именно Java Script? Можно же создать фотоальбом и без него? Конечно можно, Можно с помощью фреймов и/или таблиц. Но мы до них еще не дошли. Как дойдем, обязательно сделаем то, что хочется. А вот чем мне нравится этот Java Script, так это тем, что один и тот же скрипт можно использовать сколь угодно раз, немного подправляя данные.

Подберите для этого урока несколько изображений. Они должны уже быть полностью оптимизированы для web. Переименуйте их следующим образом

Foto1.jpg, Foto2.jpg, Foto3.jpg, Foto4.jpg, Foto5.jpg и Foto6.jpg.

Размер всех фотографий - 400х300.

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

Рассмотрим по частям то, что мы напишем в нашем блокноте:

Думаю, с этой строчкой Вам все понятно. По умолчанию будет загружено изображение Foto01.jpg, шириной 400, высотой 300

Это у нас будет загружена форма, имя (name), которой - form1, состоящая из двух кнопок (button), текст на которых (input type) будет на одной - "назад", а на другой - "вперед". При нажатии на соответствующую кнопку, (это называется событие onClick) будет выполняться либо сценарий функции dem(0), либо сценарий функции dem(1).

Все вроде просто пока, да? Дальше пойдет немного сложнее. Сейчас мы будем рассматривать, как выполнить этот сценарий на языке Java Script.

Все следующие сценарии записываются между тэгами <head> и </head>.

Сначала запишем язык, который мы будем использовать:

< script language = "JavaScript">

Затем загрузим предварительно все наши изображения: для этого сначала создадим массив (Array) для наших изображений, элементы которого создаются вызовом new Image(). Обратите внимание, что нумерация элементов массивов начинается с нуля (и так почти во всех языках программирования), i-ый элемент указывается путем добавления после имени переменной [i]. Не ошибитесь! Особо указывается, что каждое изображение создается с помощью оператора new, то есть раннее эта переменная не описана. Всего изображений у меня - шесть, от Foto1.jpg до Foto6.jpg, следовательно получится шесть элементов в массиве:

Далее каждому порядковому imgslide подставляем свое изображение:

imgslide[0].src = " Foto1.jpg"

imgslide[1].src = " Foto2.jpg"

imgslide[2].src = " Foto3.jpg"

imgslide[3].src = " Foto4.jpg"

imgslide[4].src = " Foto5.jpg"

imgslide[5].src = " Foto6.jpg"

Далее в бой идет сценарий, отвечающий за смену изображений dem(n), где n - номер изображения (от 0 до 5), так как у меня, если вы не забыли, 6 фоток с кошками. Дадим описание этому сценарию (функции):

function dem(n)

{ if (n==1)

{ numimg++

if (numimg==6) numimg=0;

} else

{numimg-- if (numimg== -1)

numimg=5;}document.images[0].src=imgslide[numimg].src}

document - это структура, которая содержит информацию о параметрах страницы. Мы видим его в виде страницы в окне браузера с кнопками, картинками, и т.д. Посмотрим, что именно происходит в вышеописанной функции. Алгоритм таков: функции передается параметр n, отвечающий за то, какая кнопка нажата - назад или вперед. Если вперед, то n - 1, в противном случае 0.

Осуществляем проверку на равенство с 1 (в Javascript проверка на равенство содержит не одно, а два знака "="). Если 1, т.е. была нажата кнопка вперед, то увеличиваем индекс, который мы задали переменной numimg, на 1 (numimg++). Аналогично делаем в случае, если n равно 0 - уменьшаем на 1 (numimg--). Обязательно надо делать проверку на границы. Ведь у нас нет картинок с индексами 6 или -1.

После этого мы присваиваем "источнику" рисунка (источник - имя файла на диске, хранящего изображение) в нашем документе под номером 0 (у нас только одно изображение на странице) источник изображения с только что вычисленным индексом numimg в созданном нами массиве рисунков imgslide.

Ну, вот вроде и все страсти-мордасти. Если вы все равно ничего не поняли, не огорчайтесь. Пишите все как есть у меня, только подставляйте свои изображения со своими именами, учитывая их количество. Добавляя или уменьшая количество строк. Вот и все.

Так что привожу полный текст нашего слайд-шоу, который я назвал slide.html:

__________________________________________________________________

<html>
<head>
<title>Слайд-шоу</title>

<script language = "JavaScript">

numimg=0
imgslide=new Array ()

imgslide[0]=new Image ()
imgslide[1]=new Image ()
imgslide[2]=new Image ()
imgslide[3]=new Image ()
imgslide[4]=new Image ()
imgslide[5]=new Image ()

imgslide[0].src ="Foto1.jpg"
imgslide[1].src ="Foto2.jpg"
imgslide[2].src ="Foto3.jpg"
imgslide[3].src ="Foto4.jpg"
imgslide[4].src ="Foto5.jpg"
imgslide[5].src ="Foto6.jpg"

function dem(n)

{
if (n==1)
{ numimg++
if (numimg==6)
numimg=0;
}
else
{numimg--
if (numimg== -1)
numimg=5;
} document.images [0].src=imgslide [numimg].src }

</script>
</head>

<body>

<h1>Мои фотки</h1>

<img src = "Foto1.jpg" width="400" height="300">

<form name=form1>
<input type=button value=Назад onClick="dem(0)">
<input type=button value=Вперед onClick="dem(1)">
</form>

</body>
</html>
_____________________________________________________________________________

Обратите внимание, что файл slide.html лежит в одной папочке со всеми нашими фотографиями. Если же фотография лежат в отдельной папке, то и код нужно прописать не просто "Foto1.ipg", например, а "название папки/Foto1.jpg".

Ну что получилось, осилили? Со скриптом гораздо легче. Но что произойдет если фотографий будет больше 30, а этот скрипт будет не очень функциональный. Давайте посмотрим на наш код:

numimg = 0

imgslide=new Array ()

imgslide[0] = new Image ()

imgslide[1] = new Image ()

imgslide[2] = new Image ()

imgslide[3] = new Image ()

imgslide[4] = new Image ()

imgslide[5] = new Image ()

imgslide[0].src = " Foto1.jpg"

imgslide[1].src = " Foto2.jpg"

imgslide[2].src = " Foto3.jpg"

imgslide[3].src = " Foto4.jpg"

imgslide[4].src = " Foto5.jpg"

imgslide[5].src = " Foto6.jpg"

Заметили повторяющийся код, вот эта строчка

imgslide[цифра] = new Image ()

imgslide[0].src = " Foto1.jpg"

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

Вот эти строки:

1) var i;

2) for (i = 0; i <= 5; i++)

3) {imgslide[i]=new Image ()

4) imgslide[i].src ="Foto"+i+".jpg" }

Что же это значит

var — ключевое слово для объявления переменной (по-английски variable). У нас будет она одна i.

For (начало; областьдействия; шаг) -это цикл

{код}

Начало: здесь задаётся начальное условие, при котором оператор включается. (В данном случае с нуля)

Область действия: границы, в которых выполняется код. (В данном случае меньше или равно 5)

Шаг: способ продвижения цикла от начального к конечному условию. (В данном случае шаг равняется единице)

В третьей и четвёртой строке в место фиксированных цифр пишем нашу переменную i которая меняется от 0 до 5 а можно сделать и до 20 и 30, вот только код увеличиться не на 40 и 60 строчек соответственно а всего на один два символа. Во второй строке вместо пяти поставьте нужное вам число.

Вот и всё открываем и любуемся нашим творением.

Создаём простой фотоальбом на JavaScript

УРОК 5 /