Добавил:
Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:
лабы / Lab7 / ИТСлаб7.doc
Скачиваний:
15
Добавлен:
16.04.2013
Размер:
489.47 Кб
Скачать

5. Пример html-документа с java-скриптами

Существует богатое разнообразие java-скриптов, ограничиваемое лишь возможностями, предоставляемыми браузерами, и фантазией web-программистов. Следующие примеры скриптов, вставленные в одну html-страницу, демонстрируют основные приёмы программирования на JavaScript.

<HTML>

<HEAD>

<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=Windows-1251">

<!-- Скрипт к примеру 1 -->

<SCRIPT LANGUAGE="JavaScript">

<!-- // Здесь комментарий не мешает исполнению скрипта

// Используем стандартный класс Array для задания массива картинок

img_arr = new Array(9)

img_arr[0] = 'Images1/eyes_lu.gif'

img_arr[1] = 'Images1/eyes_u.gif'

img_arr[2] = 'Images1/eyes_ru.gif'

img_arr[3] = 'Images1/eyes_l.gif'

img_arr[4] = 'Images1/eyes_.gif'

img_arr[5] = 'Images1/eyes_r.gif'

img_arr[6] = 'Images1/eyes_ld.gif'

img_arr[7] = 'Images1/eyes_d.gif'

img_arr[8] = 'Images1/eyes_rd.gif'

// Функция, обновляющая картинку

function myShowImage(id) { document.center_image.src = img_arr[id]; }

// Функция, генерирующая периферийную ячейку таблицы

function WriteRef(id)

{

// Определим в ячейке таблицы якорь - гиперссылку без URL

document.write('<TD><A OnMouseOver="myShowImage('+id+');">');

document.write('<IMG border=0 src=Images/1x1.gif width=150 height=150>');

document.write('</A></TD>');

}

// Функция, генерирующая центральную ячейку таблицы

function WriteRef1()

{

// Определим в ячейке таблицы якорь - гиперссылку без URL

document.write('<TD><A OnMouseOver="myShowImage(4);">');

document.write('<IMG name="center_image" border=0 ');

document.write('src=Images1/eyes_.gif width=150 height=150>');

document.write('</A></TD>');

}

//-->

</SCRIPT>

</HEAD>

<BODY OnLoad="Snow()"> <!-- Это нужно для запуска примера 3 -->

<SCRIPT>

<!--

/* Данный скрипт будет выполнен в данном месте html-страницы при её загрузке */

document.write("<H2>Пример 1. Слежение за курсором мыши</H2>");

//-->

</SCRIPT>

<!-- "Быстрое" рисование таблицы -->

<TABLE border=1>

<TR> <SCRIPT> WriteRef(0); WriteRef(1); WriteRef(2); </SCRIPT> </TR>

<TR> <SCRIPT> WriteRef(3); WriteRef1(); WriteRef(5); </SCRIPT> </TR>

<TR> <SCRIPT> WriteRef(6); WriteRef(7); WriteRef(8); </SCRIPT> </TR>

</TABLE>

<H2>Пример 2. Изменение размера картинки по щелчку мыши</H2>

<SCRIPT>

var is_clicked = 0

function myOnClick()

{

if (is_clicked)

{

is_clicked = 0

document.clickable_image.width = 26

document.clickable_image.height = 38

}

else

{

is_clicked = 1

document.clickable_image.width = 256

document.clickable_image.height = 384

}

}

</SCRIPT>

<IMG name="clickable_image" src=Images/balloon.jpg

width=26 height=38 OnClick="myOnClick()" alt="Щёлкни меня">

<H2>Пример 3. Анимация по загрузке html-страницы</H2>

<FONT color=#С0С0FF>Посмотрите на падающий снег...</FONT>

<SCRIPT>

// Определимся с браузером (не самый удачный способ, но здесь сойдёт)

var ie4up = (document.all) ? 1 : 0; // Internet Explorer

// Параметры снежинок

var number = 20; // число снежинок

var speed = 20; // скорость падения (зависит также от числа снежинок)

var snowflake = "Images1/snow.gif"; // изображение снежинки

var dx, xp, yp; // координаты и позиции снежинок

var am, stx, sty; // амплитуда и шаг смещения

var i // счётчик итераций цикла

var doc_width = 800, doc_height = 600; // размер экрана

// Узнаем размер клиентской области окна

// При увеличении размера html-страницы снег будет падать не по всей её длине

if (ie4up)

{

doc_width = document.body.clientWidth;

doc_height = document.body.clientHeight;

}

// Инициируем снежинки

dx = new Array();

xp = new Array();

yp = new Array();

am = new Array();

stx = new Array();

sty = new Array();

for (i=0; i<number; i++)

{

// Разбросаем снежинки по экрану

dx[i] = 0; // аргумент функции sin

xp[i] = Math.random()*(doc_width-50); // позиция

yp[i] = Math.random()*doc_height;

am[i] = Math.random()*20; // амплитуда синуса

stx[i] = 0.02 + Math.random()/10; // шаг смещения

sty[i] = 0.7 + Math.random();

// Напишем HTML-текст, чтобы браузер создал изображения снежинок

if (ie4up)

{

// Для Internet Explorer вставим теги <DIV>

document.write('<div id="dot'+ i +'" style="POSITION: ');

document.write('absolute; Z-INDEX: '+ i +'; VISIBILITY: ');

document.write('visible; TOP: 15px; LEFT: 15px;">');

document.write('<img src='+ snowflake +' border=0></div>');

}

}

// Анимация для Internet Explorer и Opera

function snowIE()

{

for (i=0; i<number; i++)

{

yp[i] += sty[i];

if (yp[i] > doc_height-50)

{

xp[i] = Math.random()*(doc_width-am[i]-30);

yp[i] = 0;

stx[i] = 0.02 + Math.random()/10;

sty[i] = 0.7 + Math.random();

}

dx[i] += stx[i];

document.all["dot"+i].style.pixelTop = yp[i];

document.all["dot"+i].style.pixelLeft = xp[i] + am[i]*Math.sin(dx[i]);

}

// Попросим браузер повторить вызов данной функции спустя время speed

// События от таймера помещаются в очередь. Если браузер не будет успевать

// их обрабатывать то начнётся торможение снежинок

setTimeout("snowIE()", speed);

}

// Собственно обработчик события OnLoad

function Snow() { if (ie4up) snowIE(); }

</SCRIPT>

</BODY>

</HTML>

Тут вы можете оставить комментарий к выбранному абзацу или сообщить об ошибке.

Оставленные комментарии видны всем.