Примеры, примеры, примеры...

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

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

Эта глава посвящена следующим темам:

  • как добавить на Web-страницу дату последнего изменения;
  • как добавить простые часы;
  • как добавить обратный счетчик;
  • проверка простой формы;
  • создание прокруток;
  • создание движущихся сообщений в строке состояния;
  • управление cookies.

Пример 1. Дата последнего изменения Web-страницы

Пример. Из всех сценариев, приведенных в данной главе, этот наиболее простой и короткий. Если посетители вашего Web-сайта будут знать, когда в последний раз изменялась страница, то они смогут решить, стоит ли вообще ее читать.

<html>
<head>
<title>Простая страница</title>
</head>
<body>
<script language="JavaScript">
<!-- Маскируемся!
document.write("Последнее изменение страницы: " + document.lastModified)
// Снимаем маскировку. -->
</script>
</body>
</html>

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


Рис. 15.1. Дата и время последнего изменения

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

Усовершенствование сценария

Изменить сценарий невозможно.

Пример 2. Часы

Пример. Часы - излюбленное средство многих разработчиков, желающих сделать свою Web-страницу более динамичной. В данном примере (пригодном как для браузера Internet Explorer, так и для Netscape Navigator) время указывается в окне ввода. Результат представлен на рис. 15.2.

<html>
<head>
<title>Простая страница</title>
<script language="JavaScript">
<!-- Маскируемся!
function gettime()
{
var date = new Date();
var hr = date.getHours();
var m = date.getMinutes();
var s = date.getSeconds();
var ampm = "AM";
if (hr > 11)
{
ampm = "PM";
}
if (hr > 12)
{
hr -= 12;
}
if (m < 10)
{
m = "0" + m;
}
if (s < 10)
{
s = "0" + s;
}
document.clockform.clock.value = hr + ":" + m + ":" + s + " " + ampm;
setTimeout("gettime()",100)
}
// Снимаем маскировку. -->
</script>
</head>
<body onLoad="gettime()">
<form name="clockform">
<input type="text" name="clock">
</form>
</body>
</html>

Усовершенствование сценария

Пример. Если удалить из сценария несколько строк (все упоминания о AM и РМ и оператор if, в котором из показаний часов после полудня отнимается 12), вы получите армейские часы с 24-часовым циферблатом (см. рис. 15.3).

<html>
<head>
<title>Простая страница</title>
<script language="JavaScript">
<!-- Маскируемся!
function gettime()
{
var date = new Date();
var hr = date.getHours();
var m = date.getMinutes();
var s = date.getSeconds();
if (m < 10)
{
m = "0" + m;
}
if (s < 10)
{
s = "0" + s;
}
document.clockform.clock.value = hr + ":" + m + ":" + s;
setTimeout("gettime()",100)
}
// Снимаем маскировку. -->
</script>
</head>
<body onLoad="gettime()">
<form name="clockform">
<input type="text" name="clock">
</form>
</body>
</html>


Рис. 15.2. Часы на Web-странице


Рис. 15.3. Армейские часы на Web-странице

Пример 3. Обратный счетчик

Пример. Счетчик удобен в тех случаях, когда вы хотите указать промежуток времени, оставшийся до изменения страницы или изображения, если у вас предусмотрено, допустим, регулярное обновление изображений. Обновление страницы производится с помощью соответствующего метатэга (он ставится после тэга <title>). Результат представлен на рис, 15.4.

<html>
<head>
<title>Простая страница</title>
<meta http-equiv="refresh" content="30">
<script language="JavaScript">
<!-- Маскируемся!
var x = 30;
var у = 1;
function startClock()
{
x = x - y;
document.forml.clock.value = x;
timerID=setTimeout("startClock()",1000);
}
// Снимаем маскировку. -->
</script>
</head>
<body onLoad="startClock()">
<form name="forml">
<input type="text" name="clock">
</form>
</body>
</html>


Рис. 15.4. Действующий обратный счетчик

Усовершенствование сценария

Счетчик можно слегка подправить. Возможно также изменение начального показания счетчика (значение переменной х) или интервала (значение переменной у).

Пример 4. Проверка формы

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

Пример. Здесь будет проверяться одно поле ввода, в котором требуется указать некоторые сведения. Если поле остается пустым, сценарий откажется подтвердить ввод информации и потребует ввести текст (см. рис. 15.5).

<html>
<head>
<title>Простая страница</title>
<script language="JavaScript">
<!-- Маскируемся!
function sendMe()
{
return confirm("Хотите продолжить ввод информации?");
}
function chkForm()
{
if (forml.inpl.value == "")
{
alert("Пожалуйста, введите текст");
forml.inpl.focus();
return false;
}
}
// Снимаем маскировку. -->
</script>
</head>
<body>
<form name="forml" method="POST" action="someCGI.cgi" onSubmit="return sendMe()">
<p><input type="text" name="inp1">
<input type="submit" value="Подтверждение" onClick="return chkForm()">
<input type="reset" value="ОТМЕНА"></p>
</form>
</body>
</html>

Подобный сценарий не позволит пользователю отправить незаполненную форму. К тому же благодаря методу focus () курсор возвращается обратно в поле ввода.

Усовершенствование сценария

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

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


Рис. 15.5. Поле ввода осталось незаполненным

<html>
<head>
<title>Простая страница</title>
<script language="JavaScript">
<!-- Маскируемся!
function sendMe ()
{
return confirm("Хотите продолжить ввод информации?")
}
function chkForm()
{
if (forml.passl.value != forml.pass2.value)
{
alert("Пожалуйста, введите пароль заново");
forml.passl.value = "";
forml.pass2.value = "";
forml.passl.focus();
return false;
}
}
// Снимаем маскировку. -->
</script>
</head>
<body>
<form name="forml" method="POST" action="someCGI.cgi" onSubmit="return sendMe()">
<р>Введите пароль: <input type="password" name="passl"><br>Повторите ввод пароля: <input type="password" name="pass2"><br><input type="submit" value="Подтверждение" onClick="return chkForm()">
<input type="reset" value="0тмена"></р>
</form>
</body>
</html>


Рис. 15.6. Два пароля должны совпасть

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

Пример 5. Прокрутка

Прокруткой (rollover) называется замена одного изображения другим при наведении на него курсора. Часто этот эффект применяется к изображениям с функциями гиперссылок, но это вовсе не обязательно.

Пример. Ниже приводится пример выполнения прокрутки:

<html>
<head>
<title>Простая страница</title>
<script language="JavaScript">
<!-- Маскируемся!
if (document.images)
{
imgl = new Image;
img2 = new Image;
imgl.src = "imgl.gif";
img2.src = "img2.gif";
}
else
{
imgl.src = "";
img2.src = "";
document.imgSwap = "";
}
// Снимаем маскировку. -->
</script>
</head>
<body>
<a href="moveon.htm" onMouseover="document.imgSwap.src = img2.src" onMouseout=" document.imgSwap.src = imgl. src ">
<img src="imgl.gif" name="imgSwap" border="0">
</a>
</body>
</html>

Смысл оператора if состоит в том, чтобы исключить браузеры, поддерживающие язык JavaScript, в которых неизвестен элемент document.images. Этот прием не позволяет использовать сценарий в браузерах, не поддерживающих, по меньшей мере, JavaScript 1.1, — в этих случаях сценарий не станет выполняться. На рис, 15.7 показан результат использования прокрутки.

Усовершенствование сценария

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

Пример 6. Сообщение в строке состояния

Еще один распространенный эффект JavaScript — движущееся сообщение в строке состояния браузера. Это отличный способ предоставить пользователю некоторое количество информации, исключив применение окон сообщений. Хотя строка состояния коротка и не слишком заметна, ее использование все же достаточно эффективно.


Рис. 15.7. Прокрутка в действии

Пример. Далее приводится простой пример размещения информации в строке состояния, когда пользователь наводит курсор на изображение с гиперссылкой:

<html>
<head>
<title>Простая страница</title>
<script language="JavaScript">
<!-- Маскируемся!
function addMsg()
{
window.status="Пример изображения";
return true;
}
// Снимаем маскировку. -->
</script>
</head>
<body>
<a href="moveon.htm" onMouseover="window.status="Пример изображения";return true" onMouseout="window.status="";return true">
<img src="imgl.gif" border="0">
</a>
</body>
</html>

Если навести курсор на изображение или гиперссылку, в строке состояния браузера появляется сообщение (см. рис. 15.8).


Рис. 15.8. Сообщение в строке состояния

Примечание Выражение return true требуется для выполнения сценария.

Усовершенствование сценария

Пример. Одно из самых популярных усовершенствований данного сценария - вывод не статичного, а движущегося сообщения. Ниже дан пример такого эффекта (см. рис. 15.9).

<html>
<head>
<title>Простая страница</title>
<script language="JavaScript">
<!-- Маскируемся!
var msg = "Спасибо, что посетили нашу Web-страницу! ... ";
function scrollMsg()
{
window.status = msg;
msg = msg.substring(1,msg.length) + msg.substring(0,1);
setTimeout("scrollMsg()",150);
}
// Снимаем маскировку. -->
</script>
</head>
<body onLoad="scrollMsg()">
</body>
</html>


Рис. 15.9. Движущееся сообщение в строке состояния

В данном сценарии JavaScript определяющим является выражение:

msg = msg.substring(1,msg.length) + msg.substring(0,1);

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

Итак, рассмотрим составляющие равенства:

  • msg - текущая строка;
  • msg.substring (1,msg.length) - часть строки без первого символа (поскольку нумерация символов начинается с нуля);
  • msg.substring (0,1) - первый символ строки, который перемещается в конец фразы msg.substring (1,msg.length).

То есть на каждом этапе выполнения сценария (определяемом выражением setTimeout("scrollMsg()",150), которое стоит в следующей строке) процесс повторяется - первая буква перемещается в конец фразы. Сценарий запускается снова через каждые 150 мс. Это произвольное значение, и вы можете его изменить.

Дальнейшее усовершенствование сценария

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

Пример. В настоящем примере используется 45 символов, то есть следует остановиться, перебрав все символы от нулевого до сорок четвертого.

<html>
<head>
<title>Простая страница</title>
<script language="JavaScript">
<!-- Маскируемся!
var counter = 0
var msg = "Спасибо, что посетили нашу Web-страницу! ... ";
function scrollMsg()
{
if (counter < 44)
{
window.status = msg;
msg = msg.substring(1,msg.length) + msg.substring(0,1);
setTimeout("scrollMsg()",150);
counter += 1
}
else
{
window.status = "" ;
}
}
// Снимаем маскировку. -->
</script>
</head>
<body onLoad="scrollMsg()">
</body>
</html>

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

Пример 7. Управление cookies

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

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

Примечание Отдельные фрагменты информации, содержащиеся в cookie, назваются кусками (crumbs).

JavaScript предоставляет вам много возможностей, реализуемых с помощью cookies. Вы можете запоминать имена и пароли ваших посетителей, их предпочтения и многое другое.

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

<html>
<head>
<title>Страница 1</title>
<script language="JavaScript">
<!-- Маскируемся!
// Снимаем маскировку. -->
</script>
</head>
<body>
<form name="forml">
<р>Имя пользователя: <input type="text" name="userl"><br>
<a href ="page2.htm">Продолжить. . .</а></р>
</form>
</body>
</html>

Для создания cookie прежде всего требуется создать новый объект Date под названием expireAt, который будет использоваться для запоминания даты в течение трех месяцев после активизации cookie:

<html>
<head>
<title>Страница 1</title>
<script language="JavaScript">
<!-- Маскируемся!
expireAt = new Date;
expireAt.setMonth(expireAt.getMonth() + 3);
// Снимаем маскировку. -->
</script>
</head>
<body>
<form name="forml">
<р>Имя пользователя: <input type="text" name="userl"><br>
<a href ="page2.htm">Продолжить. . .</а></р>
</form>
</body>
</html>

Затем создается «пустая» переменная с названием username:

<html>
<head>
<title>Страница 1</title>
<script language="JavaScript">
<!-- Маскируемся!
expireAt = new Date;
expireAt.setMonth(expireAt.getMonth() + 3);
username = "";
// Снимаем маскировку. -->
</script>
</head>
<body>
<form name="forml">
<р>Имя пользователя: <input type="text" name="userl"><br>
<a href="page2.htm">Продолжить. . .</a></р>
</form>
</body>
</html>

Потом пишется функция, создающая cookie. Она включает в себя две строки:

<html>
<head>
<title>Страница l</title>
<script language="JavaScript">
<!-- Маскируемся!
expireAt = new Date;
expireAt.setMonth(expireAt.getMonth() + 3);
username = "";
function makeCookie()
{
username = document.forml.userl.value
document.cookie = "name=" + username + ";expires=" + expireAt.toGMTString()
}
// Снимаем маскировку. -->
</script>
</head>
<body>
<form name="forml">
<р>Имя пользователя: <input type="text" name="userl"><br>
<a href ="page2.htm">Продолжить. . .</а></р>
</form>
</body>
</html>

В первой строке функция считывает содержимое поля ввода, а во второй создает cookie. Cookie состоит из двух частей. В первой части ("name=" + username) берется значение переменной username и объединяется с выбранной псевдопеременной. (Это не совсем переменная - она больше напоминает название, присваиваемое какой-либо величине.) В результате образуется значение (в данном случае выбрано name). Убедитесь, что в созданной строке нет лишних пробелов; в противном случае результат может быть не совсем таким, как вы ожидаете. Во второй части (";expires=" + expireAt.toGMTString()) устанавливается, когда должен истечь срок действия cookie. Это три месяца после даты создания. Время должно указываться в формате GMT (среднее время по Гринвичу), поэтому применяется метод expireAt.toGMTString().

Последнее, что нужно сделать, - воспользоваться событием onClick (щелчок по гиперссылке) для вызова функции makeCookie():

<html>
<head>
<title>Страница l</title>
<script language="JavaScript">
<!-- Маскируемся!
expireAt = new Date;
expireAt.setMonth(expireAt.getMonth() + 3);
username = "";
function makeCookie()
{
username = document.forml.user1.value
document.cookie = "name=" + username + ";expires=" + expireAt.toGMTString()
}
// Снимаем маскировку. -->
</script>
</head>
<body>
<form name="forml">
<р>Имя пользователя: <input type="text" name="userl"><br>
<a href="page2.htm" onClick="makeCookie()">Продолжить...</a></p>
</form>
</body>
</html>

Теперь страница завершена. Далее следует создать вторую страницу (под названием page2.htm), в которой будет считываться содержимое cookie.

<html>
<head>
<title>Страница 2</title>
<script language="JavaScript">
<!-- Маскируемся!
function fillIn()
{
if (document.cookie != "")
{
cookieCrumb = document.cookie.split("=")[1];
document.forml.readl.value = cookieCrumb;
}
else
{
document.forml.readl.value = "Cookie нет!";
}
}
// Снимаем маскировку. -->
</script>
</head>
<body onLoad="fillIn()">
<form name="forml">
<р>Имя, которое вы ввели ранее: <input type="text"
name="readl"></p>
</form>
</body>
</html>

Функция fillIn() вызывается событием onLoad при загрузке страницы. Оператор if проверяет, не является ли cookie пустым (то есть не отсутствует ли он для данной страницы). В этом случае в поле ввода появляется сообщение "Cookie нет!". Если cookie имеется, то следующий оператор разделяет cookie-строку по знаку равенства, и вторая часть (помеченная как [1], поскольку первая определяется как [0]) присваивается переменной cookieCrumb. Этот фрагмент информации и передается для отображения в поле ввода.

Сохранив обе страницы, попробуйте выполнить пример. Откройте первую страницу и что-нибудь впишите в поле ввода (см. рис. 15.10).

Затем, щелкнув по гиперссылке в нижней части страницы, перейдите ко второй странице. Вы увидите, что содержимое cookie отобразилось в поле ввода (см. рис. 15.11).


Рис. 15.10. Текст, набранный в поле ввода


Рис. 15.11. Содержимое cookies помещено в поле ввода второй страницы

Усовершенствование сценария

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

Пример. В данном случае используется функция, удаляющая cookie путем изменения его конечной даты на дату, соответствующую одному месяцу до текущей системной даты:

<html>
<head>
<title>Простая страница</title>
<script language="JavaScript">
<!-- Маскируемся!
expireAt = new Date;
expireAt.setMonth(expireAt.getMonth() - 1);
if (document.cookie != "")
{
if (confirm("Вы действительно хотите удалить cookie для данного Web-сайта?"));
{
crumbs = document.cookie.split("; ");
{
for(i=0; i < crumbs.length; i++)
{
crumbName = crumbs[i].split("=")[0];
document.cookie = crumbName + ";expires=" + expireAt.toGMTString();
}
}
}
// Снимаем маскировку. -->
</script>
</head>
<body>
</body>
</html>

Этот способ удаления cookies хорош тем, что дает пользователю возможность изменить решение (см. рис. 15.12). Кроме того, он также позволяет убрать с помощью свойства length все cookies, созданные на вашем сайте для данного пользователя.

Вы можете проверить, удалены ли cookies с вашего компьютера, загрузив вторую страницу данного примера (page2.htm). На рис. 15.13 показано, что cookies отсутствуют.


Рис. 15.12. Возможность выбора, следует ли продолжать удаление cookies


Рис. 15.13. После удаления cookies не используются

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

Желаем успехов!

Кэти и Эдриан.



[ Назад ] [ Вверх ] [ Далее ] 
Hosted by uCoz