Отправляет email-рассылки с помощью сервиса Sendsay

Программирование на JavaScript

  Все выпуски  

Программирование на JavaScript Выпуск № 35


Информационный Канал Subscribe.Ru

Программирование на JavaScript

Выпуск      : 35
Подписчиков : 13545
Cайт        : SoftMaker.com.ru
Архив       : Программирование на JavaScript (архив)
В этом выпуске
От автора

Здравствуйте уважаемые подписчики !

Как всегда, рад приветствовать вас на страницах этой рассылки.

Напоминаю, что, как обычно, вы можете отправить свои пожелания (замечания, предложения, сообщения об ошибках) по поводу рассылки и сайта по этому адресу.

Если вы хотите создать и вести какой либо раздел в этой рассылке, либо опубликовать здесь статью, интересный скрипт, или участвовать в формировании ее содержимого - также пишите мне.

И, как всегда, вы можете задать свои вопросы по JavaScript - программированию на сайте в форуме. Или обсудить их в дискуссионном листе Скрипты для сайта.

С уважением, Вахтуров Виктор.

P.S. Очень возможно, что с июня (так как настает долгожданное лето) рассылка уйдет в отпуск. Но ненадолго. Скоро рассылка возобновит свой выход. И, я надеюсь, материал в ней будет еще более интересным и качественным. Пользуясь освободившимся временем, планируется создать новый полноценный сайт - качественный контент-проект, посвященный разработке программного обеспечения (как прикладного ПО, так и web-разработке), составной частью которого будет являться также данная рассылка.

Java Script solutions

В этом выпуске будут рассмотрены 2 скрипта.

Первый - скрипт, создающий на web-странице анимацию в виде летящих звезд. Выглядит это достаточно эффектно (я даже сам удивился, когда все заработало). Скрипт был написан специально для данного выпуска, поэтому вы, уважаемые подписчики - первые, кто сможет его увидеть и испытать в действии.

Второй скрипт - это переработанный и дополненный вариант скрипта создания кратковременной анимационной "заставки" на странице web-сайта, с которой осуществляется редирект на другую страницу (скрипт №2 из выпуска № 34 (прошлого)). Теперь он полностью настраиваемый. Настраивается цветовая схема, задержка перед редиректом, величина таймаута таймера, число элементов индикатора. Также в скрипт добавлен и механизм самого редиректа (в прошлом выпуске для сокращения количества программного кода, второй пример был опубликован в сокращенном варианте - только код анимации без кода подсчета времени и осуществления перехода со страницы).

Итак...

Летящие звезды.

Этот скрипт, как было сказано, создает на странице анимацию в виде летящих звезд.

Звезды представляют собой элементы DIV квадратной формы, перемещяющиеся по событию таймера. Размер, величина единичного перемещения по горизонтали (скорость), цвет элементов выбираются случайным образом. В настройках скрипта можно задать минимальный и максимальный размер звезд, минимальную и максимальную скорость, количество звезд на странице.

Скрипт был опробован в браузерах: Internet Explorer 6.0, Mozilla 1.2b, Netscape Navigator 7.0 и Opera 7.0. Работает везде. Везде, кроме Opera, работает отлично. В Опере - несколько "тормозит". Видимо, рендеринг в этом браузере специально задерживается на какое то время после изменений на странице. Впрочем, опера всегда отличалась особой позицией в вопросах отображения контента (особенно в вопросах интерпритации спецификации CSS2) и свойственными только ей глюками при поддержании топологии страниц.

Ниже приведен код скрипта, уже внедренный в html-документ. Вам достаточно полностью скопировать содержимое нижеприведенного блока в файл чтобы немедленно испытать скрипт на работоспособность.

<html>
<head>

<style>
<!--

html, body
{
   position         :   relative;

   margin           :   0px;
   padding          :   0px;

   width            :   100%;
   height           :   100%;
}

body
{
   overflow         :   hidden;
   background-color :   black;
}

a
{
   color            :   green;
   text-decoration  :   none;
}

a:hover
{
   text-decoration  :   underline;
}

/* -- */

table.c
{
   width            :   100%;
   height           :   100%;
   border           :   none;
}

table.c td
{
   text-align       :   center;
   font             :   14px "Courier New", Courier;
}

-->
</style>

<script language="JavaScript">

<!--

// Code by Victor V. Vakchturov (http://softmaker.com.ru)

// Настройки

var nStarCount  = 128; // Количество звезд
var nMinSpeed   = 1;   // Минимальная скорость
var nMaxSpeed   = 5;   // Максимальная скорость
var nMinSize    = 1;   // Минимальный размер "звезд"
var nMaxSize    = 3;   // Максимальный размер "звезд"

// --

var arrPos  = new Array
(
   new Array(nStarCount), // координата по X
   new Array(nStarCount), // координата по Y
   new Array(nStarCount), // сам объект
   new Array(nStarCount)  // скорость
);

var nWidth  = screen.width;
var nHeight = screen.height;

function N2ByteHexStr(n)
{
   var str = (n & 0x0000FF).toString(16);

   if(str.length < 2)
      str = '0' + str;

   return str;
}

function RGB_Str(r, g, b)
{
   return '#' +
          N2ByteHexStr(r) +
          N2ByteHexStr(g) +
          N2ByteHexStr(b);
}

function UpdateStarPos(i)
{
   var e = arrPos[2][i];

   e.style.top  = arrPos[1][i].toString(10) + "px";
   e.style.left = arrPos[0][i].toString(10) + "px";
}

function ResetStar(i, x)
{
   var e = arrPos[2][i];

   if(x < 0)
      x = Math.round(Math.random() * nWidth);

   arrPos[0][i] = x;
   arrPos[1][i] = Math.round(Math.random() * nHeight);
   arrPos[3][i] = Math.round(Math.random() * (nMaxSpeed -
                             nMinSpeed)) + nMinSpeed;

   e.style.backgroundColor = RGB_Str
                             (Math.round(Math.random() * 0xFF),
                              Math.round(Math.random() * 0xFF),
                              Math.round(Math.random() * 0xFF));

   var nSize = Math.round(Math.random() * (nMaxSize -
                          nMinSize)) + nMinSize;

   e.style.width = nSize.toString(10) + "px";
   e.style.height = e.style.width;

   UpdateStarPos(i);
}

function MoveStars()
{
   for(var i = 0; i < nStarCount; i++)
   {
      arrPos[0][i] += arrPos[3][i];

      if(arrPos[0][i] < 0)
         ResetStar(i, nWidth);
      else if(arrPos[0][i] > nWidth)
         ResetStar(i, 0);
      else
         UpdateStarPos(i);
   }
}

function GenerateStars()
{
   var d = document;
   var b = d.body;

   for(var i = 0; i < nStarCount; i++)
   {
      arrPos[2][i] = d.createElement("div");

      var e = arrPos[2][i];

      b.appendChild(e);

      e.style.overflow = "hidden";
      e.style.position = "absolute";

      ResetStar(i, -1);
   }

   window.setInterval("MoveStars()", 30);
}

// -->

</script>

</head>

<body onselectstart="return false">

   <table class="c">
      <tr>
         <td valign="middle"><a
           href="http://softmaker.com.ru"
           alt="Исходники, статьи по программированию, скрипты"
           title="Исходники, статьи по программированию, скрипты"
           >SoftMaker.com.ru</a></td>
      </tr>
   </table>

   <script>
   <!--
      GenerateStars();
   // -->
   </script>

</body>
</html>

Сначала опишу назначение глобальных переменных, используемых в скрипте.

Пять из них позволяют конфигурировать скрипт по своему желанию.

nStarCount - задает количество генерируемых "звезд" в документе.

nMinSpeed - задает минимальное значение диапазона величин перемещения каждого элемента-звезды на кажном шаге создания очередного кадра анимации.

nMaxSpeed - задает максимальное значение диапазона величин перемещения каждого элемента-звезды на кажном шаге создания очередного кадра анимации.

nMinSize - задает минимальное значение возможных размеров звезд.

nMaxSize - задает максимальное значение возможных размеров звезд.

Остальные - просто глобальные данные.

arrPos - двумерный массив (размерность [nStarCount][4]). Каждый столбец содержит набор данных об одном элементе-звезде.
Первая строка массива - X-координаты объектов.
Вторая строка массива - Y-координаты объектов.
Третья строка массива - ссылки на сами объекты (элементы DIV в дереве документа, передставляющие "звезды").
Четвертая строка массива - текущая скорость "звезды" - значение величины перемещения конкретного элемента на кажном шаге создания анимации.

В переменных nWidth и nHeight сохраняется ширина и высота экрана (в пикселах).

Теперь рассмотрим принцип работы скрипта. Он достаточно прост.
На первом этапе в документе генерируются nStarCount элементов DIV. Для каждого такого элемента задается абсолютное позиционирование, случайные координаты (по X в диапазоне [0 - nWidth], по Y в диапазоне [0 - nHeight]), а также случайный цвет фона. Ссылка на каждый элемент заносится в массив arrPos. Также в этот массив заносятся соответствующие значения координат и случайное значение скорости перемещения объекта из диапазона [nMinSpeed - nMaxSpeed].

Далее устанавливается таймер.
В функции-обработчике события таймера происходит изменение координаты X всех объектов-звезд. Для каждого объекта осуществляется проверка на предмет выхода его за границы допустимой области (при выходе за пределы, для элемента задаются новые координаты, скорость и цвет). Размеры этой области соответствуют размерам экрана, сохраненных в переменных nWidth и nHeight. Таким образом, все "звезды" перемещаются в области, которая обычно больше размеров окна браузера и обычно часть звезд не видна. Это сделано из соображений упрощения алгоритма и увеличения быстродействия (можно изменять размеры окна браузера как угодно и при этом не возникнет необходимости в динамическом изменении количества движущихся элементов на странице, не возникнет эффекта неравномерного заполнения страницы "звездами"). Можно даже перевести браузер в режим full screen - все будет нормально. Правда, при этом не учитывается ситуация с возможным изменением разрешения монитора в большую сторону.

--- * ---

Теперь я опишу назначение функций и некоторые аспекты реализации скрипта.

Функция
N2ByteHexStr(n)

Конвертирует переданное ей число в строку, являющуюся шестнадцатиричным представленим младших 8-и разрядов этого числа. То есть, если, например, передать в функцию число 6699 (dec), то будет возвращена строка '2B'. Если передать число 266 (dec) - возвратится строка '0A'.

Функция RGB_Str(r, g, b)

Возвращает строку в формате представления цвета в HTML. То есть строку вида: '#RRGGBB', где RR - числовое значение красной (GG - зеленой, а BB - синей) составляющей цвета, записанное в виде шестнадцатиричного числа.
Функция использует N2ByteHexStr для конвертации параметров r, g, b в шестнадцатиричное представление, осуществляет конкатенацию значений и добавляет префикс '#'.

Функция UpdateStarPos(i).

Выполняет обновление позиции i-го элемента DIV, присваивая свойствам top и left объекта соответствующие значения из массива arrPos.

Функция ResetStar(i, x).

Для i-го элемента DIV осуществляет генерацию и установку новых значений координат X, Y, а также цвета и размера. Обратите внимание, что в функцию передается параметр x - требуемое значение координаты объекта. Если оно меньше 0, то в функции генерируется случайное значение из диапазона [0 - nWidth]. Таким образом данная функция используется в двух случаях - при начальной генерации всего набора объектов (функция GenerateStars, где для объектов генерируется случайная X-координата) и в случае установки новых свойств для одного объекта при выходе его за пределы допустимой области (функция MoveStars - здесь задается конкретное значение X-координаты - либо 0, либо nWidth).

Функция MoveStars().

Производит изменение координат всех объектов-звезд на величину их "скорости" (для i-го объекта эта величина хранится в элементе arrPos[3][i]), проверяет допустимость X-координат объектов и при необходимости при помощи ResetStar устанавливает новые свойства "звезды", перемещая ее при этом на границу области, в которой движутся звезды. Именно эта функция создает очередной кадр анимации, являясь обработчиком событий таймера.

Функция GenerateStars().

Эта функция выполняет генерацию набора элементов DIV, установку значений их свойств, заполнение массива arrPos (фактически генерируются сами "звезды" и производится их установка на начальные позиции). Затем устанавливается таймер, обработчиком событий которого является функция MoveStars.

Таким образом для запуска скрипта на странице просто производится вызов GenerateStars:

   <script>
   <!--
      GenerateStars();
   // -->
   </script>

--- * ---

Конфигурирование скрипта производится с помощью уже рассмотренных переменных: nStarCount, nMinSpeed, nMaxSpeed, nMinSize, nMaxSize. Значения, присвоенные этим переменным в коде скрипта, приведенном выше, показались мне наиболее оптимальными. Однако, с ними можно смело экспериментировать. При этом, однако, следует учесть, что, например, чрезмерное увеличение количества "звезд" (значениея nStarCount) может привести к 100%-ной загрузке процессора и замедлению анимации. Нежелательно также делать nMinSize отрицательным или нулевым, а nMaxSize слишком большим.

Отдельно поясню про nMinSpeed и nMaxSpeed. Их значения могут быть как положительными (движение звезд слева направо), так и отрицательными (справа налево). Но ! Значения должны бить одного знака и в диапазон значений, задаваемых этими переменными не должен попадать 0. Если, например задать nMinSpeed = -5, а nMaxSpeed = 5, то будем наблюдать картину движения "звезд" в разных направлениях (часть - слева направо, часть - справа налево). Часть звезд же будет неподвижна (значение их скорости = 0). Постепенно количество таких звезд будет увеличиваться, пока все "звезды" не замрут на месте. Не стоит также задавать большие абсолютные значения nMinSpeed и nMaxSpeed.

--- * ---

Анимация с редиректом (переделано и дополнено).

Как говорилось выше, далее будет приведен переработанный и дополненный вариант скрипта "анимационной заставки с редиректом" из прошлого выпуска (№ 34). По сравнению с прошлой версией, в него добавлены новые настройки (спасибо Егору Шумову за внесенные предложения по модификации скрипта - с них все и началось), а также механизм редиректа. Соответственно, немного усложнилась реализация (добавилась пара новых функций). Таким образом, здесь не будет описываться снова весь скрипт, будут описаны только изменения.

<html>
<head>

<style>

body
{
   position         :   absolute;
   margin           :   0px;
   padding          :   0px;
   width            :   100%;
   height           :   100%;
   overflow         :   hidden;
   color            :   black;
   background-color :   white;
   font-family      :   "Courier New", Courier;
}

table.c
{
   position         :   relative;
   width            :   100%;
   height           :   100%;
   border           :   none;
   font-size        :   10pt;
}

#progr_tbl
{
   height           :   12px;
   border           :   none;
}

#progr_tbl td
{
   width            :   20px;
}

</style>

<script language="JavaScript">

<!--

// code by Vicktor V. Vakchturov
// change by Shumov Egor (pixmaster на ukr d o t net)
// change by Vicktor V. Vakchturov

// Настройки

// Цветовая схема №1
var nFirstColor     = RGB(0x99, 0xCC, 0xFF);
var nLastColor      = RGB(0x33, 0x66, 0x99);

// Цветовая схема №2
// var nFirstColor  = RGB(0xCC, 0xFF, 0x99);
// var nLastColor   = RGB(0x66, 0x99, 0x33);

// Цветовая схема №3
// var nFirstColor  = RGB(0xFF, 0x99, 0xCC);
// var nLastColor   = RGB(0x99, 0x33, 0x66);

// Задержка перед редиректом (в миллисекундах)
var nPageTimeout    = 5000;

// Величина таймаута таймера
var nTimerTimeout   = 70;

// Число элементов индикатора
var nProgressItemCount = 9;

// Адрес страницы, на которую будет совершен редирект
var strNewLocation  = 'http://softmaker.com.ru';

// --

function RGB(r, g, b)
{
   return ((r & 0x0000FF) |
          ((g & 0x0000FF) << 8) |
          ((b & 0x0000FF) << 16));
}

function N2ByteHexStr(n)
{
   var str = (n & 0x0000FF).toString(16);

   if(str.length < 2)
      str = '0' + str;

   return str;
}

function RGB_Str(r, g, b)
{
   return '#' +
          N2ByteHexStr(r) +
          N2ByteHexStr(g) +
          N2ByteHexStr(b);
}

function GetRValue(rgb)
{
   return rgb & 0x0000FF;
}

function GetGValue(rgb)
{
   return (rgb >> 8) & 0x0000FF;
}

function GetBValue(rgb)
{
   return (rgb >> 16) & 0x0000FF;
}

// Текущее время
var dt = new Date();

var nTimerID   = 0;
var objElementS   = null;

function ChangeProgress()
{
   var dd = new Date();
   var millisec = ((((dd.getMinutes() - dt.getMinutes()) * 3600) +
                   (dd.getSeconds() - dt.getSeconds())) * 1000) +
                   (dd.getMilliseconds() - dt.getMilliseconds());

   if(millisec > nPageTimeout)
   {
      millisec = nPageTimeout;
      window.clearInterval(nTimerID);
      top.location = strNewLocation;
   }

   var d = document;

   if(objElementS != null)
      objElementS.innerText = Math.round((nPageTimeout -
                              millisec) / 1000 + 0.4);

   // изменение состояния индикатора

   var lastcolor = document.getElementById('clr_td_' +
                   (nProgressItemCount - 1).toString(10)).bgColor;

   for(i = nProgressItemCount - 1; i > 0; i--)
   {
      document.getElementById('clr_td_' +
                              i.toString(10)).bgColor =
                              document.getElementById('clr_td_' +
                              (i - 1).toString(10)).bgColor;
   }

   document.getElementById('clr_td_0').bgColor = lastcolor;
}

function GenerateAndStartProgress()
{
   var r = GetRValue(nFirstColor);
   var g = GetGValue(nFirstColor);
   var b = GetBValue(nFirstColor);

   var dr = Math.ceil((GetRValue(nLastColor) - r) /
                      (nProgressItemCount - 1) * 2);

   var dg = Math.ceil((GetGValue(nLastColor) - g) /
                      (nProgressItemCount - 1) * 2);

   var db = Math.ceil((GetBValue(nLastColor) - b) /
                      (nProgressItemCount - 1) * 2);

   var d = document;

   d.write('<table id="progr_tbl" cellpadding="0" ' +
         'cellspacing="2"><tr>');

   for(i = 0; i < nProgressItemCount; i++)
   {
      d.write('<td bgcolor="' + RGB_Str(r, g, b) +
            '" id="clr_td_' + i.toString(10) + '"></td>');

      if(i == Math.ceil(nProgressItemCount / 2))
      {
         dr *= -1;
         dg *= -1;
         db *= -1;
      }

      r += dr;
      g += dg;
      b += db;
   }

   d.write('</tr></table>');

   objElementS = d.getElementById('progress_time');

   nTimerID = window.setInterval("ChangeProgress()",
                                 nTimerTimeout);
}

// -->
</script>

</head>

<body onselectstart="return false">

   <table class="c">
   <tr>
      <td>
      <center>
         Переход на другую страницу<br><br>
            <script>
               GenerateAndStartProgress();
            </script>
         <br>Нажмите <a href="http://softmaker.com.ru">сюда</a>,
             если браузер<br>не переходит автоматически.<br>
      </center>
      </td>
   </tr>
   </table>

</body>
</html>


Как можно видеть, в приведенном выше коде присутствует пара функций, уже описанных в предыдущем скрипте. Это функции: N2ByteHexStr и RGB_Str. Они полностью идентичны описанным выше.

Также добавлены функции:

Функция RGB(r, g, b).

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

Функция GetRValue(rgb).

Возвращает числовое значение красной составляющей цвета, данные которого, представленные в формате 8:8:8 RGB-модели, передаются в качестве параметра в функцию (данные такого формата возвращаются вышеописанной функцией RGB).

Функция GetGValue(rgb).

Возвращает числовое значение зеленой составляющей цвета, данные которого, представленные в формате 8:8:8 RGB-модели, передаются в качестве параметра в функцию (данные такого формата возвращаются вышеописанной функцией RGB).

Функция GetBValue(rgb).

Возвращает числовое значение синей составляющей цвета, данные которого, представленные в формате 8:8:8 RGB-модели, передаются в качестве параметра в функцию (данные такого формата возвращаются вышеописанной функцией RGB).

--- * ---

Теперь необходимо немного рассказать о настройках скрипта.

Переменные nFirstColor и nLastColor позволяют задавать начальный и конечный цвет градиента индикатора. Таким образом для индикатора прогресса можно задать свою цветовую схему (в коде скрипта приведено несколько наборов значений этих переменных - достаточно снять комментарии с соответствующих строк, чтобы изменить цветовое оформление анимационной заставки). Значение этим переменным можно присваиваивать с помощью функции RGB.

nPageTimeout - задает задержку (в миллисекундах) перед редиректом на другую страницу.

nTimerTimeout - интервал таймера (в миллисекундах), который запускается в функции GenerateAndStartProgress.

nProgressItemCount - число прямоугольных элементов индикатора прогресса.

strNewLocation - адрес страницы, на которую будет совершен переход через время, задаваемое переменной nPageTimeout.

--- * ---

Код двух основных функций скрипта: ChangeProgress и GenerateAndStartProgress также был изменен.

В функции ChangeProgress добавлен код для подсчета времени, оставшегося до перехода на другую страницу и, собственно совершения самого перехода.

Функция GenerateAndStartProgress теперь генерирует индикатор прогресса с учетом значений переменных nFirstColor и nLastColor и nProgressItemCount, используя функции GetRValue, GetGValue, GetBValue для разложения значений nFirstColor и nLastColor на цветовые составляющие и функцию RGB_Str для синтеза значения атрибута цвета фона очередного элемента индикатора прогресса. Генерируется индикатор с nProgressItemCount элементами.
Функция также запускает таймер с интералом nTimerTimeout миллисекунд.

--- * ---

На этом, пожалуй, стоит закончить сегодняшний выпуск. Желаю всем подписчикам всего доброго.

Автор выпуска: Вахтуров Виктор.

Книги по C/C++
JavaScript в примерах
JavaScript в примерах

Автор: Аллен Вайк, Ричард Вагнер

Книга "JavaScript в примерах" представляет собой краткое введение в основы программирования на языке JavaScript, который предназначен для создания интерактивных Web-страниц.

Подробно рассматривается синтаксис базового набора языка, отличительные особенности существующих версий и специфика реализации языка в различных браузерах. Краткий, тем не менее, полный справочник по базовым языковым объектам позволяет без труда разобраться в объектно-ориентированной идеологии, положенной в основу JavaScript. После изучения книги читатель сможет создавать интерактивные Web-страницы и приступать к созданию полноценных коммерческих Web-сайтов.

Материалы, используемые в книге, можно получить на сайте издательства по адресу www.diasoft.kiev.ua.

Для студентов, программистови широкого круга пользователей Internet.

Страница книги на Озоне
JavaScript. Основы
JavaScript. Основы

Автор: Пауль Уилтон

JavaScript - язык Сети, поддерживаемый всеми основными броузерами. Он позволяет создавать интерактивные и динамические страницы, повышающие качество сайта. Основное внимание в книге уделяется программированию клиентских сценариев. В то же время JavaScript весьма популярен и как язык сценариев серверного окружения, и этой теме посвящены последние главы.

От читателя не требуется предварительное знание какого-либо языка программирования - все фундаментальные понятия раскрываются по мере изложения материала. После обсуждения сути языка JavaScript речь пойдет о более сложных вещах: динамическом HTML (DHTML), cookies, технике отладки и программировании серверных сценариев с помощью ASP. К концу книги читатель овладеет искусством программирования на языке JavaScript и сможет создавать вполне профессиональные динамические веб-страницы.

Эта книга предназначена для любого, кто хочет изучить JavaScript-либо для приобретения навыков программирования, либо с целью применения полученных знаний для создания мощных веб-приложений. Все, что вам надо, чтобы приступить к делу, это знание основ HTML, текстовый редактор и броузер.

Какие темы рассматриваются в книге?

  • Фундаментальные понятия программирования;
  • Полное практическое руководство по JavaScript;
  • Создание переносимых сценариев, в том числе под Netscape Navigator 6;
  • Создание cookies и работа с ними;
  • Добавляемые модули и элементы ActiveX;
  • Динамический HTML (DHTML);
  • Создание сценариев в соответствии со стандартом W3C DOM;
  • Серверные сценарии по технологии ASP

Страница книги на Озоне
Всего доброго. До встречи в следующем номере.

Subscribe.Ru
Поддержка подписчиков
Другие рассылки этой тематики
Другие рассылки этого автора
Подписан адрес:
Код этой рассылки: comp.soft.prog.javascript
Отписаться
Вспомнить пароль

В избранное