- •Лабораторная работа № 7 Использование языка JavaScript при разработке html-документов
- •1. Теоретические сведения
- •2. Краткие сведения о языке JavaScript
- •2.1. Типы данных
- •2.2. Литералы
- •2.3. Операторы
- •2.4. Функции
- •2.5. Классы и объекты
- •2.6. Массивы
- •3. Объекты, методы, свойства и функции JavaScript
- •3.1. Объектная модель
- •3.2. Описание свойств, функций, объектов, методов и событий
- •4. Внедрение java-скриптов в html-документ
- •5. Пример html-документа с java-скриптами
- •Лабораторное задание и порядок его выполнения
- •Требования к отчету
- •Варианты заданий
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>