*** WEB Star *** Журнал для настоящих web-мастеров.
Web-дизайн и не только... Заходи на Коврик TrigGer'a и ты узаешь о нем все!!!
Линия WEB Star
Общая информация
Главная
Авторам
Сотрудничество
Ссылки
Анонсы
WEB-design
WEB фокусы
Как изменить цвет скролл-бара Internet Explorer 5.5 и выше
Java Script'ы
Ссылка со стрелкой
Извращаемся над линкой <mailto> или облегчаем жизнь юзерам
Programming
Философия WEB

*** WEB Star *** #1 WEB фокусы

Java Script

Автор: Стрельников Антон
Источник: http://wmzsponsorwmr.boom.ru

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

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

Программа на языке JavaScript встраивается внутрь HTML-файла и загружается из Интернета вместе с ним. Чаще всего программа помещается внутрь тега <HEAD>.

Полное руководство по языку JavaScript можно приобрести в специализированных книжных магазинах, либо бесплатно скопировать из интернета.

И так преступим к изучению (детальному):

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

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

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

Структурно программа на языке JavaScript строится по модульному принципу с использованием процедур. Процедура представляет собой высилительный блок, который вызывается обработчиком событий.

Все процедуры помещаются в контейнер <SCRIPT>...</SCRIPT>. Для того, чтобы броузеры, не поддерживающие язык JavaScript не выводили на экран текст программы он помечается как блок комменатриев (ремарок).

Бегущая строка в статусной области окна броузера может быть легко создана с помощью простой JavaScript программы.

Вот код этой простой программы:

<SCRIPT LANGUAGE="JavaScript">
<!--
var scrollCounter = 0;
var scrollText = "*** Эта фраза будет пробегать в статусной строке ***";
var scrollDelay = 30;

var i = 0;
while (i ++ < 140)
scrollText = " " + scrollText;

function Scroller()
{
window.status = scrollText.substring(scrollCounter++,
scrollText.length);
if (scrollCounter == scrollText.length)
scrollCounter = 0;
setTimeout("Scroller()", scrollDelay);
}

Scroller();
//-->
</SCRIPT>

Текст вы можете заменить на свой. Меняя значения переменных, можно менять скорость движения текста, интервал между появлениями бегущей строки. Обратите внимание, что процедура вызывается событием ONLOAD, т.е. после загрузки странице в броузере.

Очень красиво, когда картинки-кнопки при попадении на них курсора мышки меняет свой вид - окрашивается, приподнимается и тому подобное. Простая JavaScript - прграмма поможет вам реализовать свой эффект. Программа воспринимает положение мышки над картинкой и загружает на её место другую картинку. Когда мышка "уходит" с картинки, вновь загружается первоначальная картинка. Вот код этой программы:

<SCRIPT LANGUAGE="JavaScript">
<!--
k1on = new Image();
k1on.src = "k1b.gif";
k1off = new Image();
k1off.src = "k1.gif";

k2on = new Image();
k2on.src = "k2b.gif";
k2off = new Image();
k2off.src = "k2.gif";

k3on = new Image();
k3on.src = "k3b.gif";
k3off = new Image();
k3off.src = "k3.gif";

function img_on(imgName) {
imgOn = eval(imgName + "on.src");
document [imgName].src = imgOn;
}

function img_off(imgName) {
imgOff = eval(imgName + "off.src");
document [imgName].src = imgOff;
}
//-->
</SCRIPT>

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

<script language="JavaScript">
<!--
function showTime() {
var timeNow = new Date();
var hours = timeNow.getHours();
var minutes = timeNow.getMinutes();
var seconds = timeNow.getSeconds();
var timeString = "";

timeString += ((hours < 10) ? "0" : "") + hours;
timeString += ((minutes < 10) ? ":0" : ":") + minutes;
timeString += ((seconds < 10) ? ":0" : ":") + seconds;

document.htmlClock.timeField.value = timeString;
timerID = setTimeout('showTime()', 1000);
}
//-->
</script>

Подсчитать сумму чисел введенных в поля формы очень легко. Надо только не забывать о том, что переменные в JavaScript универсальны и склонны воспринимать надписи в строках ввода, как последовательности символов.Для перевода из символьной формы в числовую используется функция PARSEFLOAD. Вот что ва нужно поставить на страницу, чтобы на ней появились часики:
<SCRIPT LANGUAGE="JavaScript">
<!--
var summa = 0;

function rezultat() {
summa = parseFloat(document.forms[0].price1.value);
summa = summa + parseFloat(document.forms[0].price2.value);
summa = summa + parseFloat(document.forms[0].price3.value);

document.forms[0].stoimost.value = summa;
}
//-->
</SCRIPT>

</HEAD>
<BODY>

<FORM>
<CENTER>
<INPUT name="price1" type="text" size=8 value="0">
<BR>
<INPUT name="price2" type="text" size=8 value="0">
<BR>
<INPUT name="price3" type="text" size=8 value="0">
<BR>
<INPUT name="rez" type="button" value="S U M M A" onClick="rezultat()">
<BR>
<INPUT name="stoimost" type="text" size=8 value="0">
</CENTER>
</FORM>

Вот пожалуй и все, что нужно знать, для того чтобы делать всякие штучки. До свидания.

© Copyright Алекс aka TrigGer & x-graphic studio
© Все права защищены.

Перепечатка материалов разрешается, только после письменного разрешения автора (e-mail). При перепечатке любого материала с журнала видимая ссылка на источник www.kovrik.hut.ru и все имена, ссылки авторов обязательны.