В мире компьютерных игр
WWW.TEKCT.RU
Содержание
Предыдущий раздел |

4.6. Примеры сценариев

Использование простого сценария для элемента HTML

Для того чтобы использовать сценарии, вовсе не обязательно писать длинные программы. Текст простого сценария можно поместить внутри начального тега элемента. Здесь необходимо указать атрибуты событий, чтобы запрограммировать реакцию элемента на внешнее воздействие.
Основным средством программирования служит конструкция this — объект, обозначающий текущий элемент.
Например, чтобы запрограммировать изменение цвет элемента в зависимости от положения указателя мыши, достаточно одной команды для каждого события:
<H1 onMouseOver="this.style.color='green' "
onmouseout="this.style.color='black' ">Текст заголовка</H1>
При необходимости, для одного атрибута события можно использовать несколько команд JavaScript, но тогда их надо отделять друг от друга точкой с запятой. Можно также использовать условные операторы и, соответственно, фигурные скобки для разграничения необходимых блоков команд.
Если изменение цвета заголовка выполняет декоративную функцию, то управление свойствами гиперссылки необходимо для того, чтобы дать подсказку пользователю. Допустим, нас не устраивает традиционный вид ссылки с подчеркнутым текстом. Тогда можно легко изменить вид надписи. В примере, приведенном ниже, для текста ссылки выбран синий цвет (color: blue), полужирное начертание (font-weight: bold), но отменено подчеркивание (text-decoration: none). При размещении указателя мыши над ссылкой цвет текста меняется на красный:
<A style="color: blue; font-weight: bold; text-decoration: none"
href="URL" onmouseover="this.style.color='red' "
onmouseout="this.style.color='blue' " >Текст ссылки</A>

Отображение времени

Часы в текстовом формате

В программе, реализующей часы, необходимо использовать get-функции для получения текущего времени и метода setTimeout() для периодического вызова функции. Если требуется получить цифры большого размера, это можно сделать при помощи кнопки (элемент INPUT) и ее свойства CSS font-size. Скрипты лучше всего работают именно с элементами форм. Ниже приведен код, реализующий такие часы. Вид часов показан на рис. 4.6.
<HTML>
<HEAD>
<STYLE type="text/css">
input.clo {background-color: goldenrod; color: yellow; font-size: 20pt }
</STYLE>
<SCRIPT language="javascript">
flag = false;
function clock1(){
t = new Date();
hh = t.getHours();
mm = t.getMinutes();
if (hh < 10) hh = "0" + hh;
if (mm < 10) mm = "0" + mm;
if (flag) {
flag = false;
document.forma.s2.value = hh + ":" + mm;
}
else {
flag = true;
document.forma.s2.value = hh + "." + mm;
}
setTimeout("clock1()",1000);
}
</SCRIPT>
</HEAD>
<BODY onLoad="clock1()">
<FORM name="forma">
<INPUT type="button" value="00:00" name="s2" class="clo">
</FORM>
</BODY>
</HTML>

Рис. 4.6. Часы в текстовом формате

Часы в графическом формате

Преимущество часов, использующих изображения цифр заключается в широких возможностях для дизайна, недостаток — в необходимости предварительной загрузки ряда изображений. Ниже приведен код, в котором предварительная загрузка осуществляется с использованием объектных переменных d0 — d9, dd (двоеточие) и de (пробел). В данном случае необходимо выделить десятки и единицы минут и часов. Для выполнения этих математических операций задействован метод floor() и оператор получения остатка от деления %. Изображения удобно поместить внутрь таблицы. Рамку ее можно скрыть или показать в зависимости от целей дизайна. Для замены изображений элементы IMG должны иметь атрибуты name. В остальном, программа работает так же, как и предыдущая. Примеры цифр и вида часов показаны на рис. 4.7.
<HTML>
<HEAD>
<SCRIPT language="javascript">
d0=new Image(); d0.src="d0.gif";
d1=new Image(); d1.src="d1.gif";
d2=new Image(); d2.src="d2.gif";
d3=new Image(); d3.src="d3.gif";
d4=new Image(); d4.src="d4.gif";
d5=new Image(); d5.src="d5.gif";
d6=new Image(); d6.src="d6.gif";
d7=new Image(); d7.src="d7.gif";
d8=new Image(); d8.src="d8.gif";
d9=new Image(); d9.src="d9.gif";
dd=new Image(); dd.src="dd.gif";
de=new Image(); de.src="de.gif";
flag = false;
function clock2(){
t = new Date();
hh = t.getHours();
mm = t.getMinutes();
if (hh < 10) {
document.p1.src = d0.src;
document.p1.src = eval("d" + hh + ".src");
}
else {
hh1 = Math.floor(hh/10);
document.h1.src = eval("d" + hh1 + ".src");
hh1 = hh % 10;
document.h2.src = eval("d" + hh1 + ".src");
}
if (mm < 10) {
document.m1.src = d0.src;
document.m2.src = eval("d" + mm + ".src");
}
else {
mm1 = Math.floor(mm/10);
document.m1.src = eval("d" + mm1 + ".src");
mm1 = mm % 10;
document.m2.src = eval("d" + mm1 + ".src");
}
if (flag) {
flag = false;
document.p1.src = de.src;
}
else {
flag = true;
document.p1.src = dd.src;
}
setTimeout("clock2()",1000);
}
</SCRIPT>
</HEAD>
<BODY onLoad="clock2()">
<TABLE>
<TR>
<TD><IMG src="d0.gif" width=30 height=40 name=h1></TD>
<TD><IMG src="d0.gif" width=30 height=40 name=h2></TD>
<TD><IMG src="dd.gif" width=30 height=40 name=p1></TD>
<TD><IMG src="d0.gif" width=30 height=40 name=m1></TD>
<TD><IMG src="d0.gif" width=30 height=40 name=m2></TD>
</TD>
</TABLE>
</BODY>
</HTML>
 

Рис. 4.7. Заготовки цифр и часы в графическом формате

Замена изображения после наведения указателя мыши

Один из самых часто используемых скриптов — замена одного рисунка другим в тот момент, когда над рисунком появляется указатель мыши. Таким способом можно изменять вид надписи (текст или фон), вводить изображения нажатой и отпущенной кнопки (в меню), создавать всевозможные визуальные эффекты, «оживляющие» страницу. Ниже приведен код, который содержит меню из двух кнопок (рис. 4.8).
<HTML>
<HEAD>
<TITLE>Заголовок</TITLE>
<SCRIPT language="javascript">
// Первая кнопка
IMAGE1off = new Image;
IMAGE1off.src = "button01.gif";
IMAGE1on = new Image;
IMAGE1on.src = "button01p.gif";
// Вторая кнопка
IMAGE2off = new Image;
IMAGE2off.src = "button02.gif";
IMAGE2on = new Image;
IMAGE2on.src = "button02p.gif";
</SCRIPT>
</HEAD>
<BODY>
<TABLE border=0 cellspacing=0 cellpadding=0>
<TR><TD>
<A href="index.htm" onMouseOver="document.IMAGE1.src = IMAGE1on.src ;"
onMouseOut="document.IMAGE1.src = IMAGE1off.src ;">
<IMG src="button01.gif" name="IMAGE1" alt="НА ГЛАВНУЮ"
border=0 width=170 height=42></A></TD>
<TR><TD>
<A href="okomp.htm" onMouseOver="document.IMAGE2.src = IMAGE2on.src ;"
onMouseOut="document.IMAGE2.src = IMAGE2off.src ;">
<IMG src="button02.gif" name="IMAGE2" alt="О КОМПАНИИ"
border=0 width=170 height=42></A></TD>
</TABLE>
</BODY>
</HTML>

Рис. 4.8. Графическое меню на Web-странице

Для того чтобы заменить один рисунок другим, надо изменить свойство src графического объекта (ссылку на файл). Для первой кнопки создаются две объектные переменные IMAGE1on и IMAGE1off типа Image. Они обеспечивают предварительную загрузку изображений. Для них определяются необходимые графические файлы:
button01.gif — исходное изображение кнопки (когда указатель убран);
button01p.gif — изображения нажатой кнопки.
Изображения второй кнопки определяются аналогично.
Изменить свойство элемента рисунка можно с помощью объекта document и имени соответствующего элемента IMG.
Обратите внимание, что имена файлов, указанных для атрибута src первого рисунка и для переменной IMAGE1off совпадают. Но они могут и отличаться. Тогда у кнопки будут три вида: после загрузки страницы, после наведения мыши и после снятия указателя мыши. Иными словами, для каждой кнопки можно определить три рисунка, что позволит получить дополнительный визуальный эффект.

Замена изображения после щелчка мышью

Следующий скрипт позволяет заменить один рисунок другим после щелчка мышью. Для подсказки элемент IMG снабжен указателем мыши как у гиперссылки (это сделано с помощью элемента A без атрибута href). Идентификатор элемента IMG обязательно указывается при помощи атрибута name. Оба рисунка должны иметь одинаковый размер.
<HTML>
<HEAD>
<SCRIPT language="javascript">
n = 2;
function Risunok(){
if (n == 1) {
n = 2;
document.ris001.src = "risunok1.jpg";
}
else {
n = 1;
document.ris001.src = "risunok2.jpg";
}
}
</SCRIPT>
</HEAD>
<BODY>
<CENTER>
Щелкните на рисунке для его замены<BR>
<A name="a1" onClick="Risunok()"><IMG name="ris001" src="risunok1.jpg"
width="200" height="100" border=0></A>
</CENTER>
</BODY>
</HTML>

Динамические эффекты

Движение цветных квадратиков

Задача: обеспечить движение цветных квадратиков в горизонтальном или вертикальном направлении (рис. 4.9). При создании динамических эффектов средствами JavaScript приходится сталкиваться с различными ограничениями. Известно, что свойство backgroundColor позволяет изменить цвет фона элемента, но это свойство применимо не для всех элементов. Его можно применить для рисунка IMG, помещенного внутрь ячейки таблицы TD. Для получения квадратика размером 10x10 пикселов необходим рисунок такого же размера формата GIF со всеми прозрачными точками. Файл такого рисунка занимает 50 байт, и практически не влияет на время загрузки страницы.

Рис. 4.9. Простой динамический эффект — движение цветных квадратиков

Скрипт начинает работать в теле страницы (во время загрузки) и вначале определяет ширину окна. Для разных типов броузеров используются разные свойства (width для Netscape и body.scrollWidth для Microsoft Internet Explorer). Для учета полей из значения ширины окна вычитается 40 пикселов, эту величину можно изменить. Затем с помощью цикла в тело таблицы записывается необходимое количество ячеек, в которых находятся элементы IMG с одним и тем же рисунком e10.gif. В таблице с указанными атрибутами рисунки будут стоять вплотную друг к другу, поэтому ширина ячейки будет равна ширине рисунка. Выражение для метода write должно быть составлено так, чтобы в ячейке таблицы находился только элемент IMG, и не было пробелов. Каждый рисунок имеет имя, построенное по принципу tabi (где i — целое число). Массив mas хранит числа, которые определяют цвет определенного элемента (для простоты количество элементов массива создается на один больше, чем количество элементов IMG).
Алгоритм движения задается путем изменения значений элементов массива (в данном примере реализовано «движение вправо»), и при необходимости может быть изменен. Переменная m необходима для того, чтобы задавать цвет каждого четвертого квадратика, ее максимальное значение тоже можно изменять.
Данный код можно модифицировать. Во-первых, изменив выводимый код таблицы, строку можно превратить в столбец. Во-вторых, можно задать динамическое изменение цвета квадратиков (например, с помощью генератора случайных чисел). В-третьих, можно отказаться от таблицы и расставить элементы IMG в разных местах Web-страницы и добиться появления и исчезновения цветных квадратиков, расположенных хаотично.
Код можно доработать, обеспечив случайный выбор значения индекса i (для выбора элемента, цвет которого в данный момент нужно изменить) при помощи команды
i = Math.floor(Math.random() * n);
Но в этом случае также необходимо, чтобы соответствующие квадратики были «погашены» через некоторый промежуток времени.
Код Web-страницы:
<HTML>
<HEAD>
<TITLE>Полоса</title>
<SCRIPT language="javascript">
function color1(){
mas[0] = (m == 0) ? 1 : 0;
for (i=0; i < n; i++) {
s = (mas[i] == 0) ? "white" : "red";
eval('document.tab' + i + '.style.backgroundColor = s');
}
for (i=n; i > 0 ; i--) {
mas[i] = mas[i - 1];
}
mas[0] = 0;
if (m > 2) {
m = 0;
}
else {
m = m + 1;
}
setTimeout("color1()", 200);
}
</SCRIPT>
</HEAD>
<BODY>
<H1 align=center>Заголовок</H1>
<SCRIPT language="javascript">
<!--
sw = 800;
app = navigator.appName;
if (app == "Netscape") {
sw = document.width;
}
if (app == "Microsoft Internet Explorer") {
sw = document.body.scrollWidth;
}
n = parseInt((sw - 40)/10);
mas = new Array(n);
m = 0;
document.write("<CENTER><TABLE border=0 cellspacing=0 cellpadding=0><TR>");
for (i=0; i < n; i++) {
document.write("<TD><IMG src='e10.gif' name=tab" + i + "></TD>");
mas[i] = 0;
}
document.write("</TR></TABLE></CENTER>");
color1();
-->
</SCRIPT>
</BODY>
</HTML>

Эффект пульсации

Этот визуальный эффект основан на способности броузеров масштабировать рисунок при изменении его свойств width и height. С помощью скрипта размеры рисунка плавно уменьшаются до определенного значения (rmin) а потом начинают увеличиваться до значения rmax. Для того чтобы данные на странице не сдвигались, рисунок помещен в ячейку таблицы с заданной шириной и высотой, а также с горизонтальным и вертикальным выравниванием. В реальной задаче элемент IMG можно поместить внутрь элемента A, создав графическую ссылку.
В секцию HEAD нужно поместить программную часть:
<SCRIPT language="javascript">
rmin = 60; // минимальный размер
rmax = 100; // максимальный размер
x = 100; // ширина
y = 100; // высота
flag = false; // уменьшение
function puls(){
if (x >= rmax) {
flag = false;
}
if (x <= rmin) {
flag = true;
}
if (flag){
x++;
y++;
}
else {
x--;
y--;
}
document.images.ris01.style.width = x;
document.images.ris01.style.height = y;
setTimeout("puls()", 50);
}
</SCRIPT>
Функцию puls необходимо запускать по событию onLoad или по специальной команде.
В секцию BODY необходимо поместить HTML-код:
<TABLE border=0 cellpadding=0>
<TR><TD width=100 height=100 align=center
valign=middle><IMG name="ris01" src="risunok1.gif"
width=100 height=100 ></TD></TR>
</TABLE>

Плавное изменение цвета заголовка

Нетрудно с помощью программы изменить цвет заголовка, но для решения задач дизайна может потребоваться плавное изменение оттенков одного цвета. В данном примере заголовок (H1) меняет цвет от черного до красного и обратно. Скрипт работает в броузерах, поддерживающих коллекцию элементов all (для элемента H1 можно определить атрибут id, но не name).
Минимальное значение оттенка красного цвета принято 16, чтобы при конвертации в шестнадцатеричный формат сразу получить двухразрядное число (10). Это упрощает код, а оттенок #100000 является практически черным.
Функцию можно запускать по событию onLoad.
Код Web-страницы:
<HTML>
<HEAD>
<META http-equiv="Content-Type"
content="text/html; charset=windows-1251">
<TITLE>Цвет заголовка</TITLE>
<SCRIPT language="javascript">
xx = 16; // цвет
flag = true; // осветление
function zag(){
if (xx <= 16) flag = true;
if (xx >= 255) flag = false;
xx = (flag) ? xx + 1 : xx - 1;
s = "#" + xx.toString(16) + "0000";
document.all("h01").style.color = s;
setTimeout("zag()", 8);
}
</SCRIPT>
</HEAD>
<BODY onLoad="zag()">
<H1 align="center" id="h01"
color="#100000">Заголовок</H1>
</BODY>
</HTML>

Автоматическая прокрутка в отдельном окне

После загрузки страницы сайта можно открыть небольшое окно с вертикальной прокруткой текста или рисунков. Это простой динамический эффект.
На основной странице должна находиться команда открытия окна, например:
<SCRIPT language="javascript">
win1 = window.open("text1.htm", "okno1",
"toolbar=0,location=0,directories=0,status=0,menubar=0,
scrollbars=0,resizable=0,copyhistory=0,
width=200,height=200");
</SCRIPT>
В этом случае необходимая информация помещается в Web-страницу text1.htm. В ней же должна запускаться функция прокрутки после окончания загрузки. Код этой страницы может быть таким:
<HTML>
<HEAD>
<META http-equiv="Content-Type"
content="text/html; charset=windows-1251">
<TITLE>Заголовок окна</TITLE>
<SCRIPT language="javascript">
function scrollup() {
window.scrollBy(1,1);
setTimeout("scrollup()", 75);
}
</SCRIPT>
</HEAD>
<BODY onLoad="scrollup()">
<P align=justify>
Текст, который надо прокручивать
</P>
</BODY>
</HTML>
Скорость прокрутки определяется вторым аргументом метода setTimeout. Через некоторое время движение текста вверх прекращается, но пользователь может запустить прокрутку снова, выбрав из контекстного меню окна команду Обновить (Reload).

Диалог с пользователем

Гиперссылки с комментариями

Данный пример разработан для броузеров Internet Explorer. Web-страница, текст которой приведен ниже, содержит четыре гиперссылки в виде рисунков. После наведения мыши на один из рисунков появляется текстовый комментарий (рис. 4.10).

Рис. 4.10. Гиперссылки-рисунки с комментариями

Ниже приведен код такой Web-страницы.
<HTML>
<HEAD>
<TITLE>Ссылки с комментариями</TITLE>
<SCRIPT language="javascript">
com = new Array(5);
com[1] = "Переход на страницу 1";
com[2] = "Переход на страницу 2";
com[3] = "Переход третью страницу";
com[4] = "Переход на страницу 4";
// Указатель мыши установлен
function Show_Text(i){
Element1 = window.event.srcElement;
Text1 = document.all("Par1");
if (Element1.tagName == "IMG") {
Element1.style.borderColor = "red";
Text1.innerText = com[i];
Text1.style.color="maroon";
}
}
// Указатель мыши убран
function Clear_Text() {
Element1 = window.event.srcElement ;
Text1 = document.all("Par1") ;
if (Element1.tagName == "IMG"){
Element1.style.borderColor = "blue" ;
Text1.innerText = "Установите указатель мыши на рисунок";
Text1.style.color="navy"
}
}
</SCRIPT>
</HEAD>
<BODY bgcolor="white" text="navy">
<TABLE align=center border=1 cellspacing=0 cellpadding=4>
<TR>
<TD><A href="page1.htm"
onMouseOver="Show_Text(1)" onMouseOut="Clear_Text()">
<IMG src="giper1.gif" name=img1 border=1 ></A></TD>
<TD><A href="page1.htm"
onMouseOver="Show_Text(2)" onMouseOut="Clear_Text()">
<IMG src="giper2.gif" name=img1 border=1 ></A></TD>
<TD><A href="page1.htm"
onMouseOver="Show_Text(3)" onMouseOut="Clear_Text()">
<IMG src="giper3.gif" name=img1 border=1 ></A></TD>
<TD><A href="page1.htm"
onMouseOver="Show_Text(4)" onMouseOut="Clear_Text()">
<IMG src="giper4.gif" name=img1 border=1 ></A></TD>
</TABLE>
<P id="Par1" align=center>
Установите указатель мыши на рисунок</P>
</BODY>
</HTML>
Абзац, в который выводится текст комментария, должен находиться вне таблицы, чтобы не изменялось положение последней.
Когда указатель мыши попадает в область рисунка, выполняется функция Show_Text(i). C ее помощью можно вывести новый текст на страницу и изменить цвет рамки вокруг рисунка.
Для определения типа элемента, в котором зафиксировано событие, создается объектная переменная Element1. В тексте программы используются специфические для броузеров Microsoft конструкции:
event — объект, содержащий информацию о событиях;
srcElement — свойство, определяющее элемент, в котором произошло событие;
tagName — свойство, определяющее имя тега элемента;
innerText — метод для заполнения элемента текстом.
Переменная Text1 связана с определенным абзацем (элементом P) при помощи атрибута id, задающего имя элемента.
С помощью свойства tagName проверяется, действительно ли событие связано с элементом IMG. Таким образом, сценарий будет выполняться для всех рисунков, находящихся внутри элементов A с определенными атрибутами onMouseOut. С помощью конструкции style.color для текста задается новый цвет, а с помощью конструкции style.borderColor изменяется цвет рамки вокруг рисунка. С помощью свойства innerText задается новый текст абзаца.
Функция Clear_Text(), которая выполняется, когда указатель мыши покидает область заголовка, работает примерно так же, но параметр ей не передается.

Управление содержимым формы

Ниже приведен пример страницы с двумя кнопками, которые управляют содержимым элемента TEXTAREA. На рис. 4.11 показан пример формы после нажатия кнопки Заменить текст.

Рис. 4.11. Форма с элементом TEXTAREA

На этой странице создана форма с именем forma1 и с элементами, выровненными при помощи таблицы. Элемент TEXTAREA имеет конечный тег для отделения текста, находящегося в области прокрутки. Для изменения его содержимого используется свойство value. Ширину этого элемента (атрибут cols) следует подобрать достаточно большой, чтобы в верхней ячейке таблицы не оставалось свободного места (такая форма выглядит лучше). При загрузке страницы выполняется функция DoFirst(), что позволяет ввести в редактируемую область текст по умолчанию.
Для кнопок (элементов INPUT) определены события «щелчок мышью» onClick. Первая кнопка записывает в текстовую область содержимое переменной stroka. Вторая кнопка удаляет весь текст из элемента.
Код Web-страницы:
<HTML>
<HEAD>
<TITLE>Форма</TITLE>
</HEAD>
<SCRIPT language="javascript">
stroka = "Новый текст элемента";
function DoFirst(){
document.forma1.text1.value = "Текст по умолчанию";
}
</SCRIPT>
<BODY onLoad=DoFirst()>
<FORM name="forma1">
<TABLE border=1 cellspacing=0 cellpadding=4>
<TR><TD colspan=2>
<TEXTAREA name="text1" rows=5 cols=40></TEXTAREA>
</TD></TR>
<TR><TD align=center valign=middle>
<INPUT type=button value="Заменить текст"
onClick="document.forma1.text1.value=stroka">
</TD>
<TD align=center valign=middle>
<INPUT type=button value="Стереть текст"
onClick="document.forma1.text1.value=' '">
</TD></TR>
</TABLE>
</FORM>
</BODY>
</HTML>

Подсчет количества введенных символов

В некоторых случаях требуется ограничить число введенных в форму символов (например, на досках объявлений). Данный пример показывает, как можно организовать подсчет числа введенных знаков в элементе TEXTAREA. Для вывода количества знаков используется текстовая строка с атрибутом запрета редактирования (readonly). Подсчет выполняется с помощью функции, запускаемой по событию onChange (т.е. когда пользователь перейдет на другое поле, нажмет клавишу Enter или щелкнет мышью вне поля). Число символов хранит переменная n, которая определена вне функции, поэтому ее можно анализировать в других функциях (например, в функции, связанной кнопкой отправки данных). Вид окна показан на рис. 4.12.
Код Web-страницы:
<HTML>
<HEAD>
<META http-equiv="Content-Type"
content="text/html; charset=windows-1251">
<TITLE>Подсчет символов</TITLE>
<SCRIPT language="javascript">
n = 0;
function count_sym() {
x = document.forma.ta1.value;
n = x.length;
document.forma.txt1.value = n;
}
</SCRIPT>
</HEAD>
<BODY>
<FORM name="forma">
<TEXTAREA rows="10" name="ta1" cols="30"
onChange="count_sym()">
</TEXTAREA><BR>
Знаков: <INPUT type="text" name="txt1" size="10" readonly>
</FORM>
</BODY>
</HTML>

Рис. 4.12. Подсчет числа символов в форме

Добавление адреса в «Избранное»

Для того чтобы предложить пользователю добавить адрес текущей Web-страницы в папку «Избранное», на странице надо поместить гиперссылку:
<A href="javascript:window.external.AddFavorite(location.href, document.title);">
Добавить в Избранное</A>

Команда «Сделать страницу стартовой»

Для того чтобы предложить пользователю сделать текущую Web-страницу (в данном примере index.htm) стартовой (изменить настройки броузера), на странице надо поместить гиперссылку:
<A href="index.htm" onClick="this.style.behavior=
'url(#default#homepage)'; this.setHomePage('http://index.htm');
return false">Сделать стартовой</A>

Использование генератора случайных чисел

При помощи метода random можно разнообразить вид Web-страницы, создавая у пользователя впечатления ее регулярного обновления. В данном примере для страницы случайным образом выбирается один из трех цветов фона, один из трех рисунков и одна из трех «дежурных» фраз. Комбинации даже такого небольшого числа объектов дают 27 различных вариантов. На самом же деле на Web-странице можно изменять очень многие параметры и использовать более широкий выбор.
Все необходимые данные хранятся в массивах. Переменные rn, bn и fn получают значения наибольших индексов массивов, поэтому в код страницы можно добавлять новые элементы массивов (или удалять ненужные). Переменная i необходима для хранения случайного числа, которое определяет выбранный элемент массива. Поскольку случайный выбор происходит в момент загрузки страницы, удобно использовать метод write для создания нужных элементов. Но часть Web-страницы может быть создана при помощи обычного кода HTML.
Возможности для модификации подобного документа практически безграничны.
Код Web-страницы:
<HTML>
<HEAD>
<META http-equiv="Content-Type"
content="text/html; charset=windows-1251">
<TITLE>Разнообразие</TITLE>
<SCRIPT language="javascript">
ris = new Array(); // рисунки
bgr = new Array(); // цвета фона
fraza = new Array(); // фразы
ris[0] = "risunok1.gif";
ris[1] = "risunok2.gif";
ris[2] = "risunok3.gif";
bgr[0] = "aliceblue";
bgr[1] = "honeydew";
bgr[2] = "linen";
fraza[0] = "Приветствуем вас на нашем сайте!";
fraza[1] = "Только первоклассные товары!";
fraza[2] = "Станьте нашим покупателем!";
// значения старших индексов
rn = ris.length - 1;
bn = bgr.length - 1;
fn = fraza.length -1;
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT language="javascript">
i = Math.round(Math.random()*rn);
document.bgColor = bgr[i];
i = Math.round(Math.random()*fn);
document.write("<P>" + fraza[i] + "</P>");
document.write("<H1 align=center>Заголовок</H1>");
i = Math.round(Math.random()*rn);
document.write("<IMG src=\"" + ris[i]+ "\" width=100 height=100 >");
</SCRIPT>
</BODY>
</HTML>

Электронная почта

Скрытая ссылка на электронный почтовый ящик

Если на Web-странице помещается адрес электронной почты, его можно скрыть от программ, собирающих адреса для спам-листов. Делается это с помощью несложного кода (в данном примере используется адрес imya@domen.ru):
<SCRIPT language="JavaScript">
<!--
at = "@"
nm1 = "imya";
dm1 = "domen";
zm1 = "ru";
document.write('Электронная почта ');
document.write('<A href=\"mailto:' + nm1 + at + dm1 + '.' + zm1 + '\">');
document.write(nm1 + at + dm1 + '.' + zm1 + '</A>');
-->
</SCRIPT>
Данный код целесообразно модифицировать, сохраняя принцип работы, чтобы программы-роботы не «настраивались» на него.

Отправка сообщения с Web-страницы

На Web-страницах часто помещают формы для отправки данных по электронной почте (рис. 4.13).

Рис. 4.13. Форма для отправки почтового сообщения

Ниже приведен пример кода, позволяющего отправлять текстовые сообщения. С помощью кода JavaScript указывается адрес, тема письма и (при необходимости) дополнительный адрес для отправки копии. Элемент SCRIPT можно поместить в секции HEAD.
<SCRIPT language="javascript">
at = "@"
nm1 = "nam"; //первый адрес
nm2 = "nam2" // второй адрес
dm1 = "domen"; // сервер
zm1 = "ru"; // домен
tema = "Сообщение"; // тема письма
function otprav(){
if (document.mform.mtext1.value == "") {
alert("Вы ничего не ввели!");
}
else {
s = "mailto:" + nm1 + at + dm1 + "." + zm1;
s += "?subject=" + tema;
if (nm2.length > 0) {
s += "&cc=" + nm2 + at + dm1 + "." + zm1;
}
parent.location = s; // отправка почты
}
}
</SCRIPT>
<FORM name="mform">
Вы можете отправить нам сообщение:<BR>
<TEXTAREA name="mtext1" rows=5 cols=50>
</textarea><BR><BR>
<INPUT type="reset" value="Очистить">&nbsp;
<INPUT type="button" value="Отправить"
onClick="otprav()">
</FORM>

Калькулятор

Данный калькулятор позволяет вводить выражения для вычислений (с учетом синтаксиса JavaScript, который близок аналогичным правилам обычной математики), что обеспечивает большую наглядность по сравнению с использованием калькулятора с обычными кнопками.
В примере использованы три регистра (рис. 4.14), которым соответствуют переменные a, b и c, и их тоже можно указывать в выражениях. Для того чтобы исключить неопределенность при их вычислении, созданы три кнопки, запускающие разные функции для вычисления соответствующего выражения.
Конструкция with (Math) необходима для использования в выражениях стандартных математических функций.

Рис. 4.14. Калькулятор

Все поля формы открыты для редактирования, поэтому пользователь может записать число (в графу «Результат») для некоторой переменной, чтобы использовать эту величину как константу. Если поле выражения пусто, значение результата остается неизменным и после нажатия кнопки.
При создании инструкции для пользователя можно также напомнить, что число-результат можно выделить мышью и скопировать в буфер обмена.
Код Web-страницы:
<HTML>
<HEAD>
<TITLE>Калькулятор</TITLE>
<SCRIPT language="javascript">
function calc1() {
b = Number(document.forma.r2.value);
c = Number(document.forma.r3.value);
x = document.forma.v1.value;
if (x.length > 0) {
with (Math) {
document.forma.r1.value = eval(x);
}
}
}
function calc2() {
a = Number(document.forma.r1.value);
c = Number(document.forma.r3.value);
x = document.forma.v2.value;
if (x.length > 0) {
with (Math) {
document.forma.r2.value = eval(x);
}
}
}
function calc3() {
a = Number(document.forma.r1.value);
b = Number(document.forma.r2.value);
x = document.forma.v3.value;
if (x.length > 0) {
with (Math) {
document.forma.r3.value = eval(x);
}
}
}
</SCRIPT>
</HEAD>
<BODY>
<FORM name="forma">
<TABLE border=0>
<TR>
<TR><TD>
<TD align=center><b>Выражение</b>
<TD>&nbsp;
<TD align=center><b>Значение</b></TR>
<TR><TD><BIG>a:</BIG>
<TD><INPUT type="text" size="50" name="v1">
<TD><INPUT type="button" value=" = " onClick="calc1()">
<TD><INPUT type="text" size="20" name="r1"></TR>
<TR><TD><BIG>b:</BIG>
<TD><INPUT type="text" size="50" name="v2">
<TD><INPUT type="button" value=" = " onClick="calc2()">
<TD><INPUT type="text" size="20" name="r2"></TR>
<TR><TD><BIG>c:</BIG>
<TD><INPUT type="text" size="50" name="v3">
<TD><INPUT type="button" value=" = " onClick="calc3()">
<TD><INPUT type="text" size="20" name="r3"></TR>
</TABLE>
</BODY>
</HTML>

Слайдшоу

Если нужно продемонстрировать пользователю большое количество рисунков, это можно сделать с помощью специального «плеера». Будем считать, что вначале показываются уменьшенные копии рисунков (в данном примере 280x180 пикселов), но пользователь может при желании открыть копию рисунка большего размера.
Если дизайн страницы имеет значение, в первую очередь необходимо подготовить изображения кнопок. Здесь они имеют размер 43x20 и 20x20 пикселов. Полезно предусмотреть изображения недоступных кнопок (что даст пользователю больше подсказок и доведет уровень разработки до профессионального). Изображение недоступной кнопки легко получить в графическом редакторе (например, Photoshop), если сделать изображение черно-белым, а потом уменьшить контрастность на 50%. В данном случае имена файлов кнопок совпадают с именами соответствующих элементов IMG, а буква «n» обозначает изображение недоступной кнопки (рис. 4.15).

Рис. 4.15. Изображения кнопок

Назначение кнопок:
k0 — переход к первому рисунку;
k1 — переход к предыдущему рисунку;
k2 — запуск слайдшоу;
k3 — переход к следующему рисунку;
k4 — переход к последнему рисунку;
k5 — остановка слайдшоу;
k6 — открытие дополнительного окна с увеличенной копией рисунка.
В коде Web-страницы необходимо указать имена файлов всех рисунков и подписи к ним. В данном примере длина каждой подписи не должна превышать 25 символов, чтобы не изменялись размеры рамки таблицы. Необходимо указать и количество рисунков (переменная kolich). При необходимости можно изменить период смены слайдов (переменная pauza).
Индексы всех массивов (см. комментарии в листинге) начинаются с 1 для упрощения кода.
Назначение всех функций можно понять по комментариям в их тексте.
При обработке каждой команды пользователя должна вызываться функция knopki(), чтобы изображения кнопок отражали реальную ситуацию. Если кнопка не может быть использована, ее изображение должно оставаться серым (рис. 4.16).

Рис. 4.16. Плеер для показа слайдшоу

Поле «vs», в котором показывается общее количество рисунков, не имеет рамки и не может редактироваться, поэтому его текст легко совместить с другим текстом.
Для поля «nom», показывающего номер рисунка, запрограммировано событие onChange, поэтому пользователь может перейти к определенному рисунку, задав его номер.
Для того чтобы пользователь мог открыть любое количество дополнительных окон, необходимо формировать уникальное имя каждого окна (это делается с помощью переменной ok), а объектные переменные со ссылками на окна — хранить в массиве (win).
Если передать в окно только рисунок, броузер автоматически изменит его размеры. Чтобы увидеть рисунок в масштабе 1:1, в окно необходимо вывести код простейшей Web-страницы (методом document.write). В элементе IMG этой страницы не нужно указывать атрибуты width и height (большие рисунки могут иметь разные размеры). Для окна тоже не обязательно указывать ширину и высоту, но необходимо разрешить изменение размеров окна (параметр resizable) и прокрутку (параметр scrollbars).
Приведенный ниже код можно при необходимости модифицировать. Для того чтобы не делать его слишком большим, в нем не предусмотрена предварительная загрузка изображений кнопок. Если при работе в Интернете возникают задержки при смене статуса кнопки, можно создать дополнительные объектные переменные. Например, для кнопки «k0» код может быть таким:
kz0 = new Image;
kz0.src = "k0.gif";
Тогда, к примеру, команда
document.images.k0.src = "k0.gif";
может быть заменена командой
document.images.k0.src = kz0.src;
Код Web-страницы с плеером:
<HTML>
<HEAD>
<META http-equiv="Content-Type"
content="text/html; charset=windows-1251">
<TITLE>Слайдшоу</TITLE>
<SCRIPT language="JavaScript">
ris = new Array(); // маленькие рисунки
bris = new Array(); // большие рисунки
nad = new Array(); // названия рисунков
img = new Array(); // объекты-рисунки
win = new Array(); // дополнительные окна
ok = 0; // номер дополнительного окна
nomer = 1; // номер рисунка
flag = 0; // 1 - показ слайдшоу
pauza = 2000; // время показа рисунка (мс)
// массив имен рисунков
ris[1] = "ris01.jpg";
ris[2] = "ris02.jpg";
ris[3] = "ris03.jpg";
ris[4] = "ris04.jpg";
ris[5] = "ris05.jpg";
// массив имен больших рисунков
bris[1] = "bris01.jpg";
bris[2] = ""; // может не быть
bris[3] = "bris03.jpg";
bris[4] = "bris04.jpg";
bris[5] = "";
// массив надписей
// длина надписи не больше 25 знаков
nad[1] = "Лошади";
nad[2] = "Второй рисунок";
nad[3] = "В горах";
nad[4] = "На пляже";
nad[5] = "В магазине";
kolich = 5; // количество слайдов
// предварительная загрузка рисунков
for (i = 1; i <= kolich; i++){
img[i] = new Image();
img[i].src = ris[i];
}
//
function nazad(){
// предыдущий рисунок
if (nomer > 1){
nomer--;
document.images.risunok.src = img[nomer].src;
}
knopki()
}
//
function pered(){
// следующий рисунок
if (nomer < kolich){
nomer++;
document.images.risunok.src = img[nomer].src;
}
knopki();
}
//
function risn(n){
// показ рисунка по номеру
if (n >= 1 || n <= kolich){
nomer = n;
document.images.risunok.src = img[nomer].src;
}
knopki();
}
//
function knopki(){
// вывод изображений кнопок
document.forma.nadp.value = "\"" + nad[nomer] + "\"";
document.forma.nom.value = nomer;
document.forma.vs.value = kolich;
if (nomer == 1) {
document.images.k0.src = "k0n.gif";
document.images.k1.src = "k1n.gif";
document.images.k3.src = "k3.gif";
document.images.k4.src = "k4.gif";
}
if (nomer > 1 && nomer < kolich && kolich > 2) {
document.images.k0.src = "k0.gif";
document.images.k1.src = "k1.gif";
document.images.k3.src = "k3.gif";
document.images.k4.src = "k4.gif";
}
if (nomer == kolich) {
document.images.k0.src = "k0.gif";
document.images.k1.src = "k1.gif";
document.images.k3.src = "k3n.gif";
document.images.k4.src = "k4n.gif";
}
if (kolich < 2) {
document.images.k0.src = "k0n.gif";
document.images.k1.src = "k1n.gif";
document.images.k2.src = "k2n.gif";
document.images.k3.src = "k3n.gif";
document.images.k4.src = "k4n.gif";
}
if (kolich >= 2) {
document.images.k2.src = (flag == 0) ? "k2.gif" : "k5.gif";
}
if (bris[nomer].length > 0) {
document.images.k6.src = "k6.gif";
}
else {
document.images.k6.src = "k6n.gif";
}
}
//
function show(){
// смена рисунков
if (flag == 1 && kolich > 1) {
if (nomer == kolich) {
nomer = 0;
}
nomer++;
risn(nomer);
tid = setTimeout("show()", pauza);
}
}
//
function startstop() {
// запуск и остановка слайдшоу
if (flag == 0 && kolich > 1) {
flag = 1;
show();
}
else {
flag = 0;
clearTimeout(tid);
knopki();
}
}
//
function wind(n) {
// показ рисунка в окне
if (bris[n].length > 0){
win[ok] = window.open("", "window"+ok, "scrollbars,resizable");
win[ok].document.write("<HTML><HEAD><TITLE>" + nad[n] + "</TITLE></HEAD>");
win[ok].document.write("<BODY><IMG src=\"" + bris[n] + "\"></BODY></HTML>");
ok++;
}
}
</SCRIPT>
</HEAD>
<BODY onLoad="knopki()">
<FORM name="forma">
<TABLE align="center" border="1"
cellpadding="2" cellspacing=0>
<TR><TD colspan=5>Всего рисунков
<INPUT type="text" size=5 name="vs"
style="border-width: 0" readonly></TD>
<TD align=right valign=middle>
<A name="a6" onClick="wind(nomer)"><IMG src="k6.gif"
width=20 height=20 name="k6"
alt="Увеличить" border=0 ></A></TD>
</TR>
<TR><TD colspan=5 align=right>
<INPUT type="text" size=25 readonly name="nadp"
style="border-width: 0">
№ <INPUT type="text" size=2 name="nom"
onChange="risn(this.value)">
</TD><TD rowspan=3>&nbsp;</TD></TR>
<TR><TD colspan=5 align="center">
<IMG src="ris01.jpg" width="240" height="180"
name="risunok">
</TD></TR>
<TR>
<TD align="center" valign=middle>
<A name="a0" onClick="risn(1)"><IMG src="k0.gif"
width=43 height=20 name="k0"
alt="Первый" border=0 ></A></TD>
<TD align="center" valign=middle>
<A name="a1" onClick="nazad()"><IMG src="k1.gif"
width=43 height=20 name="k1"
alt="Предыдущий" border=0 ></A></TD>
<TD align="center" valign=middle>
<A name="a2" onClick="startstop()"><IMG src="k2.gif"
width=43 height=20 name="k2"
alt="Слайдшоу" border=0 ></A></TD>
<TD align="center" valign=middle>
<A name="a3" onClick="pered()"><IMG src="k3.gif"
width=43 height=20 name="k3"
alt="Следующий" border=0 ></A></TD>
<TD align="center" valign=middle>
<A name="a4" onClick="risn(kolich)"><IMG src="k4.gif"
width=43 height=20 name="k4"
alt="Последний" border=0 ></A></TD>
</TR>
</TABLE>
</FORM>
</BODY>
</HTML>


Предыдущий раздел |

© TEKCT.RU, А. Гончаров, 2007-2022

Рейтинг@Mail.ru