//

Для того, что бы спрятать e-mail от спам-роботов размещают внутри секции документа код JavaScript. С помощью тега script объявляют, что в документ встроен код JavaScript. Функция JavaScript получает четыре параметра: первую часть e-mail-адреса до @, домен почтового сервера, зону домена, текст гиперссылки. Последний параметр необязателен, и, если он не задан, для ссылки используется текст "e-mail". В финале JavaScript печатает ("document.write()") на странице гиперссылку с адресом электронной почты.

С радостью отвечу на все вопросы.

Пишите на мой maillink("e-teach","mail","ru");.

© 2005 maillink("e-teach","mail","ru","Прохоров Виктор Сергеевич");

Рис.6. Страница сайта, содержащая ссылку на электронный адрес.

Рис.6. Форма для электронного письма, которая открывается, если щелкнуть ссылку на электронный адрес.

6. ПРОВЕРКА ПОЛЕЙ ФОРМЫ

ТЕХНОЛОГИЯ: Java Script

ПОДДЕРЖКА: все распространенные браузеры с поддержкой Java Script.

Часто на web-сайте размещают форму для отправки сообщений на e-mail:

E-mail отправителя:

Текст письма:

Отправить" />

Она состоит из полей ввода e-mail, текста и кнопки отправки данных серверному скрипту mail.php. Для формы и полей данных в атрибутах id и name указаны уникальные имена, которыми оперируют из JavaScript. С помощью события документа (action) onsubmit, возникающего при отправке формы, вызывают функцию JavaScript:

function checkmailform()

{

if ( (document.forms.mailer.mailsender.value == null) || (document.forms.mailer.mailsender.value.length < 7) )

{

alert("Заполните поле: E-mail отправителя");

document.forms.mailer.mailsender.focus();

return false;

}

if (! (/\w+@\w+\.[a-z]{2,4}/.test(document.forms.mailer.mailsender.value)) )

{

alert("Введите правильный e-mail адрес");

document.forms.mailer.mailsender.focus();

return false;

}

if ( (document.forms.mailer.mailtext.value == null) || (document.forms.mailer.mailtext.value.length < 10) )

{

alert("Заполните поле: Текст письма");

document.forms.mailer.mailtext.focus();

return false;

}

return true;

}

Функция делает три проверки:

● введен ли текст в поле «E-mail» и не меньше ли он 7 символов;

● является ли адрес правильным e-mail-адресом;

● введен ли текст сообщения и не меньше ли он 10 символов.

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

Листинг 6_form_check - Проверка полей формы для отправки сообщений на e-mail.

//

E-mail отправителя:

Текст письма:

Отправить" />

Рис.7. Отображение формы для отправки сообщений на e-mail.

Рис.8. Сообщение о неправильно введенном адресе электронной почты (пропущена собака).

7. ПОВЫШЕНИЕ УДОБСТВА РАБОТЫ С ФОРМАМИ

ТЕХНОЛОГИЯ: Java Script

ПОДДЕРЖКА: все распространенные браузеры с поддержкой Java Script.

Форма поискового запроса размещена на каждой странице современного сайта. Не всегда дизайнер может выделить для нее достаточно места, и тогда приходится разъяснять назначение формы текстом внутри нее. Это допустимое решение, но трудно осуществимое. Чтобы отправить поисковый запрос, пользователю приходится кликнуть внутри формы мышью, выделить объяснительный текст, удалить его уже с клавиатуры, вписать свой поисковый запрос и нажать кнопку поиска или «Enter».

Простой код на JavaScript избавляет посетителя от этих многочисленных действий:

Поиск" onfocus='this.value = "";' />

Эта форма передает запрос серверному скрипту search.php. Форма состоит из текстового поля для ввода запроса и кнопки отправки данных на сервер. Фраза «Поиск», вписанная в текстовое поле, задана атрибутом value. С помощью события документа onfocus запускают код на JavaScript. Можно использовать событие onclick, срабатывающее при клике на элементе, но оно менее универсально. В любом случае событие запускает программный код. В этот раз код не вынесен в отдельную функцию, а записан в качестве значения this.value = "" и фактически означает «установить значение текущего (this) поля равным пустоте».

События обеспечивают большой простор для деятельности, например, есть форма, мимо которой посетитель не должен пройти:

Поиск" onmouseover='this.value = ""; this.focus();' />

Используя onmouseover='this.value = ""; this.focus();', можно поймать курсор мыши, очистить форму ввода и переместить в нее курсор. Событие onmouseover срабатывает при прохождении курсора мыши над объектом, a this.focus() активизирует текущий объект.

Листинг 7_input_reset - Формы поискового запроса.

Поиск" onfocus='this.value = "";' />

Поиск" onmouseover='this.value = ""; this.focus();' />

Рис.9. Формы поискового запроса – выбирайте лучшую!

8. ВЫПАДАЮЩЕЕ МЕНЮ

ТЕХНОЛОГИЯ: Java Script, CSS

ПОДДЕРЖКА: все распространенные браузеры с поддержкой Java Script и W3C DOM (IE5 и старше, Mozilla, Opera)

Если на сайте много ссылок в меню, необходимо сделать его ниспадающим:

Информация

Новости

Учебные планы

Пчеловодство

Об авторе

Учебные дисциплины

Схемотехника

Теория информации

Надежность, эргономика, качество АСОИУ

Интернет-технологии

Первый блок ссылок имеет уникальное имя navbodyl, второй — navbody2. Для каждого раздела при наведении мыши на элемент и уходе мыши с элемента вызывается функция JavaScript.

CSS-оформление минимально:

<style type="text/css">

.navhead { font-weight: bold; background-color: #ccc; }

#navbody1, #navbody2 { visibility: hidden; }

Для navbodyl и navbody2 указано свойство visibility: hidden;. При этом JS получает номер блока и меняет его атрибут видимости:

//

При наведении мыши на блок активизируется функция menushow(menunum). Menunum — переменная, хранящая строку с номером меню. Функция выбирает элемент страницы, имя складывается из navbody и номера (menunum). Далее для элемента задается свойство visibility: visible. Функция menuhide() срабатывает, когда курсор мыши покидает область меню.

Листинг 8_menu – Выпадающее меню.

<html xmlns="http://www.w3.org/1999/xhtml">

//

<div class="navhead">Информацияdiv>