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

Эта книга является справочным пособием по языку программирования JavaScript, включая ядро и клиентский JavaScript версии 1.3. JavaScript разработан корпорацией Netscape как межплатформенный объектно-ориентированный язык скриптинга (сценариев) для клиентских и серверных приложений.

JavaScript это разработанный фирмой Netscape межплатформенный объектно-ориентированный язык скриптов (сценариев). В этой книге содержится всё, что Вам нужно знать об использовании ядра языка JavaScript.
Предполагается, что Вы уже имеете базовые знания:
Общее понятие об Internet и World Wide Web (WWW).
Хорошее владение HyperText Markup Language (HTML).
Некоторый опыт программирования в таких языках как C или Visual Basic (не обязательно).

В этой книге описан новый подход к созданию Web-приложений, известный как Ajax. Авторы рассматривают составные части Ajax: JavaScript, CSS, DOM и объект XMLHttpRequest. Кроме того, в книге нашли отражение вопросы управления кодом, взаимодействия клиента и сервера и применения архитектуры "модель-представление-контроллер" на разных уровнях приложения. Читатель также найдет сведения о защите и производительности - важных характеристиках, существенно влияющих на популярность любого продукта. Рассматриваемые вопросы иллюстрируются примерами практического использования Ajax. В приложениях содержится дополнительная информация об инструментальных средствах, о языке JavaScript и библиотеках. Материал книги изложен на высоком уровне и будет полезен специалистам высокой и средней квалификации.

В рамках Ajax объединено несколько дисциплин, поэтому читатели могут прийти к пониманию данной инфраструктуры различными путями.Часть предполагаемой аудитории - это профессиональные разработчики корпоративных систем, имеющие ученые степени в области компьютерных наук, за плечами которых годы продуктивной работы над большими программными продуктами. Их кругозор позволяет выйти за рамки уровня представления классического Web-приложения. Другую группу читателей составляют Web-дизайнеры, которые освоили "новую среду", изучив такие языки, как PHP, VisualBasic, JavaScript и ActionScript. Нельзя также забывать разработчиков приложений, перешедших от настольных систем к Web, и системных администраторов, которых в основном интересуют инструментальные средства управления на базе Web.
Все эти категории читателей объединяет неподдельный интерес к Ajax. При написании книги мы попытались в той или иной мере учесть интересы каждой из этих категорий. Ajax - это объединение различных технологийи, изучая данную инфраструктуру, вам неизбежно придется столкнуться с новыми для себя вопросами. Мы призываем вас расширить свой кругозор и повысить квалификацию. Затраченные усилия окупают себя, а результаты проявляются в различных областях нашей профессиональной деятельности.

В этом статье обсуждаются особенности работы со скриптами JavaScript в PHP. В отличие от PHP, скрипты JavaScript выполняются на машине клиента, в то время как PHP серверный язык программирования. В отличие, от технологии Java или ASP.NET он не имеет в своём составе средств для работы на клиентской стороне. Поэтому для создания эффективных Web-приложений необходимо комбинировать PHP и JavaScript скрипты. Существует две возможности такого взаимодействия: передача переменных из JavaScript в PHP и динамическое формирование скриптов JavaScript средствами PHP.

Передача переменных из JavaScript в PHP

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

Это довольно часто встречающаяся задача, особенно при написании счетчиков посещений и создании "динамического дизайна".

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

Файл index.html

Код

<Script Language="JavaScript">
var height=0;
var width=0;
colorDepth = screen.colorDepth;
if (self.screen)
{
width = screen.width
height = screen.height
}
else if (self.java)
{
var jToolKit = java.awt.Toolkit.getDefaultToolkit();
var scrsize = jToolKit.getScreenSize();
width = scrsize.width;
height = scrsize.height;
}
if (width > 0 && height > 0)
{
// Производим перенаправление на скрипт counter.php, передавая в
// переменной scrsize строку, содержащую значения width,
// height и colorDepth.
window.location.href = "http://localhost/view.php?
width=" + width +
"&height=" + height +
"&color=" + colorDepth;
} else exit();
</Script>

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

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

Файл view.php

PHP - Код

echo "Ширина : ".$_GET['width'];
  echo "Высота : ".$_GET['height'];
  echo "Цветовое <sup>разрешение</sup> : ".$_GET['color'];

Как видно, работа с данными из JavaScript, аналогична работе с данными, отправляющихся методом GET.

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

Все устройства получают входную информацию, выполняют какие-либо операции и выдают результат. Например, телефон во время разговора преобразует звуковую энергию в электрический сигнал и обратно. Двигатель потребляет топливо (пар, расщепление атомных ядер, бензин, мышечные усилия) и преобразует его в энергию. Блендер поглощает ром, лед, лайм и кюрасао и взбалтывает их в коктейль Mai Tai. (Или, если вам хочется чего-то изысканного, сделайте Bellini из шампанского и грушевого сока. Блендер – замечательное универсальное устройство.)

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

Так же, как и любое другое устройство, программное обеспечение предназначено для работы с определенным исходным материалом, например, набором чисел, данными XML-схемы или протоколом. Если программе задать некорректную входную информацию — неподходящую по форме или типу, то существует большая вероятность того, что результат будет непредсказуемым и, возможно, даже катастрофическим. Как говорится: "Мусор заложишь - мусор получишь".

На самом деле для решения всех нетривиальных задач необходимо отделять правильные данные от некорректных и отклонять некорректные данные во избежание ошибок в результатах. Это, конечно же, актуально и для Web-приложений, написанных на языке PHP. Неважно, получены ли входные данные из формы для ввода с клавиатуры или в результате выполнения программного запроса Asynchronous JavaScript + XML (Ajax), прежде чем начать какие-либо вычисления, программа должна проверить входную информацию. Возможно, что числовые значения должны находиться в пределах определенного диапазона чисел или представлять собой только целые числа. Возможно, значение должно соответствовать определенному формату, например, почтового индекса. Например, почтовый индекс в США представляет собой пять цифр плюс дополнительный префикс "Plus 4", состоящий из дефиса и 4 дополнительных цифр. Возможно, другие строки также должны состоять из определенного количества символов, например, две буквы для указания аббревиатуры штата США. Строковые данные доставляют особенно много проблем: PHP-приложение должно быть начеку по отношению к злонамеренным программам-агентам, вложенным в SQL-запросы, код JavaScript или любой другой код, которые способны изменить поведение приложения или обойти защиту.

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

К счастью, анализ на основе сопоставления с шаблоном настолько широко распространен в компьютерных технологиях, что с течением времени (примерно с момента появления UNIX®) были разработаны специальные технологии и, конечно же, механизмы обработки, чтобы облегчить рутинную работу. Регулярное выражение (regex) описывает шаблоны посредством лаконичных и удобочитаемых обозначений. Получив регулярное выражение и данные, механизм regex сообщает, совпадают ли эти данные с шаблоном, и если совпадение было обнаружено, что именно совпало.

Вот небольшой пример использования регулярного выражения, взятый из UNIX-утилиты, работающей в режиме командной строки, которая ищет заданный шаблон в содержимом одного или нескольких текстовых файлов UNIX. Команда grep -i -E '^Bat' ищет последовательность символов beginning-of-line (начало строки), обозначаемое "крышкой", [^]), за которым следуют буквы b, a, и t верхнего или нижнего регистра (ключ -i указывает на то, что при сопоставлении с шаблоном регистр не учитывается, таким образом, например, B и b - тождественны). Следовательно, для файла heroes.txt:

Листинг 1. heroes.txt

Код

Catwoman
Batman
The Tick
Black Cat
Batgirl
Danger Girl
Wonder Woman
Luke Cage
The Punisher
Ant Man
Dead Girl
Aquaman
SCUD
Blackbolt
Martian Manhunter

Вышеупомянутая команда grep выдаст два совпадения:

Batman
Batgirl

Регулярные выражения

PHP предлагает два программных интерфейса регулярных выражений: один -- для интерфейса переносимых операционных систем (POSIX), а второй - для регулярных выражений, совместимых с языком Perl (PCRE). В общем и целом второй интерфейс является более предпочтительным, так как PCRE сам по себе мощнее, чем POSIX, и предоставляет все операторы, используемые в языке Perl. Более подробная информация по обращению к regex-функциям POSIX представлена в документации по языку PHP (см. раздел Ресурсы). В данной статье мы сосредоточим свое внимание на свойствах PCRE.

Регулярные выражения PHP PCRE содержат операторы, позволяющие путем сопоставления находить конкретные символы или другие операторы, определенные местоположения, например, начало и конец строки, начало или конец слова. Регулярные выражения также позволяют описывать альтернативы, которые можно задать альтернативы типа "или"-"или"; повторения фиксированной, изменяемой или неопределенной длины; наборы символов (например, "любая буква от a до m"); и классы, или типы символов (печатаемые символы, знаки препинания). Специальные операторы также разрешают использовать группировку — возможность применить оператор к целой группе других операторов.

В таблице 1 показаны некоторые типичные операторы регулярных выражений. Для создания сложных выражений можно последовательно объединять элементарные операторы из таблицы 1 (и другие).

Таблица 1. Типичные операторы регулярных выражений
Оператор Значение
. (точка) Любой одиночный символ
^ (крышка) Пустая последовательность в начале строки или цепочки
$ (знак доллара) Пустая последовательность в конце строки
A Буква A верхнего регистра
a Буква a нижнего регистра
\d Любая цифра
\D Любой нецифровой символ
\w Любая буква или цифра; синоним - [:alnum:]
[A-E] Любая заглавная буква из A, B, C, D или E
[^A-E] Любой символ, за исключением заглавных букв A, B, C, D или E
X? Найти совпадение по отсутствию или наличию одной заглавной буквы X
X* Ни одной или любое количество заглавных букв X
X+ Одна или несколько заглавных букв X
X{n} Ровно n заглавных букв X
X{n,m} Не менее n и не более m заглавных букв X; если опустить m, то выражение будет искать не менее n заглавных букв X
(abc|def)+ По меньшей мере одно вхождение последовательности abc и def

В следующем примере показано типичное использование регулярного выражения. Например, для web-сайта необходимо, чтобы каждый пользователь регистрировался. Имя пользователя должно начинаться с буквы и содержать от 3 до 10 буквенно-цифровых символов. Для проверки имени пользователя на соответствие ограничениям при отправке данных в приложение можно использовать следующее регулярное выражение: ^[A-Za-z][A-Za-z0-9_]{2,9}$.

Знак "крышка" соответствует началу строки. Первый набор [A-Za-z] соответствует любой букве. Второй набор [A-Za-z0-9_]{2,9} соответствует последовательности, содержащей от 2 до 9 букв, цифр или символов подчеркивания. Знак доллара ($) соответствует концу строки.

На первый взгляд, знак доллара может показаться лишним, однако его использование важно. Если его пропустить, то условиям данного регулярного выражения будет отвечать любая строка, которая начинается с буквы, содержит от 2 до 9 буквенно-цифровых символов и любое количество других символов. Иными словами, если бы не было знака доллара как привязки к концу строки, то подошла бы недопустимо длинная строка с подходящим началом, например, "martin1234-cruft" .

Программирование на языке PHP и регулярные выражения

В PHP есть функции для поиска совпадений в тексте, замены каждого совпадения на другой текст (похоже на операцию "найти и заменить") и поиска совпадений среди элементов списка. Вот эти функции:

* preg_match()
* preg_match_all()
* preg_replace()
* preg_replace_callback()
* preg_grep()
* preg_split()
* preg_last_error()
* preg_quote()

Чтобы показать, как работают эти функции, давайте создадим небольшое PHP-приложение, которое будет просматривать список слов на соответствие определенному шаблону. Слова и регулярные выражения будут вводиться из обычной web-формы, а результаты отображаться в браузере посредством функции simple print_r(). Эта программка пригодится, если возникнет желание проверить или отладить регулярное выражение.

PHP-код показан в листинге 2. Все входные данные берутся из обычной HTML-формы. (Для краткости эту форму и PHP-код, отслеживающий ошибки, опустим.)

Листинг 2. Сравнение текста с шаблоном

PHP - Код

//
    // деление списка, разделенного запятыми на отдельные слова
    //   третий параметр, -1, разрешает неограниченное число совпадений
    //   четвертый параметр, PREG_SPLIT_NO_EMPTY, игнорирует пустые совпадения
    //
    $words = preg_split( '/,/',  $_REQUEST[ 'words' ], -1, PREG_SPLIT_NO_EMPTY );

    //
    // удаление начальных и конечных пробелов каждого элемента
    //
    foreach ( $words as $key => $value ) { 
        $words[ $key ] = trim( $value ); 
    }

    //
    // нахождение слов, соответствующих условиям регулярного выражения
    //
    $matches = preg_grep( "/${_REQUEST[ 'regex' ]}/", $words );

    print_r( $_REQUEST['regex' ] ); 
    echo( '' );
    
    print_r( $words ); 
    echo( '' );
    
    print_r( $matches );
    
    exit;

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

Третий и четвертый аргументы функции preg_split() необязательны, но полезны. Добавьте в третий аргумент число n целого типа, если необходимо вернуть только первые n совпадений, или -1, если необходимо вернуть все совпадения. Если в качестве четвертого аргумента задать идентификатор PREG_SPLIT_NO_EMPTY, то функция preg_split() не будет возвращать пустые результаты.

Затем каждый элемент списка слов, разделенных запятыми, корректируется (убираются начальные и конечные пробелы) с помощью функции trim() и сравнивается с заданным регулярным выражением. Функция preg_grep() существенно упрощает процесс обработки списка: просто укажите в качестве первого аргумента шаблон, а в качестве второго - массив слов для сравнения. Функция возвращает массив совпадений.

Например, если в качестве шаблона задать регулярное выражение ^[A-Za-z][A-Za-z0-9_]{2,9}$ и список слов разной длины, то можно получить результат, показанный в листинге 3.

Листинг 3. Результат работы простого регулярного выражения

Код

^[A-Za-z][A-Za-z0-9_]{2,9}$

Array ( [0] => martin [1] => 1happy [2] => hermanmunster )

Array ( [0] => martin )

Кстати, с помощью дополнительного маркера PREG_GREP_INVERT можно инвертировать операцию preg_grep() и найти элементы, которые не совпадают с шаблоном (аналогично оператору grep -v в командной строке). Заменяя 22 строку на $matches = preg_grep( "/${_REQUEST[ 'regex' ]}/", $words, PREG_GREP_INVERT ) и используя входные данные из листинга 3, мы получим Array ( [1] => 1happy [2] => hermanmunster ).

Разбор строк

Функции preg_split() и preg_grep() очень удобны. Первая из них может разбирать строку на подстроки, если подстроки разделяются определенным шаблоном. Функция preg_grep() позволяет быстро отфильтровать список.

Но что произойдет, если строку нужно разобрать на составные части, используя одно или несколько сложных правил? Например, в США номера телефонов обычно выглядят следующим образом: "(305) 555-1212," "305-555-1212," или "305.555.1212." Если убрать пунктуацию, то количество символов сократится до 10 цифр, что легко можно определить с помощью регулярного выражения \d{10}. Однако код и префикс (каждый из которых состоит из трех цифр) телефонного номера США не могут начинаться с нуля или единицы (так как нуль и единица используются как префиксы для междугородных звонков). Вместо того чтобы разбивать числовую последовательность на отдельные цифры и создавать сложный код, для верификации можно использовать регулярное выражение.

Фрагмент кода позволяющий решить эту задачу, показан в листинге 4.

Листинг 4. Проверка американского телефонного номера

PHP - Код

$punctuation = preg_quote( "().-" );
    $number = preg_replace( "/[$punctuation]/", '', $_REQUEST[ 'number' ] );

    $valid = "/[2-9][0-9]{2}[2-9][0-9]{2}[0-9]{4}/";    
    if ( preg_match( $valid, $number ) == 1 ) {
        echo(  "${_REQUEST[ 'number' ]} is valid" );
    }
        
    exit;

Давайте пройдем по этому коду:

* Как показано в таблице 1, в регулярных выражениях используется ограниченный набор специальных символов, например, квадратные скобки ([ ]) для наименования последовательности. Если надо найти такой символ в тексте, необходимо "выделить" специальный символ в регулярном выражении, поставив перед ним обратный слэш (\). Когда символ выделен, можно задать его посик, как и любого другого символа. Если нужно найти символ точки, например, в полном составном имени хоста, то напишите \.. При желании строку можно подать в функцию preg_quote() которая выполняет автоматическую изоляцию всех специальных символов регулярных выражений, как показано в строке 1. Если поставить echo() $punctuation после первой строки, то вы должны увидеть \(\)\.-.
* В строке 2 из телефонного номера убираются все знаки пунктуации. Функция preg_replace() заменяет все символы из $punctuation — операторы из набора [ ] - пустой строкой, эффективно устраняя такие символы. Возвращаемая новая строка присваивается переменной $number.
* В строке 4 определен шаблон верифицируемого телефонного номера США.
* Строка 5 реализует сопоставление, сравнивая телефонный номер, который теперь состоит только из цифр, с шаблоном. Функция preg_match() возвращает 1, если есть совпадение. Если совпадения нет, функция preg_match() возвращает нулевое значение. Если во время обработки возникла ошибка, то функция возвращает значение False (ложно). Таким образом, чтобы проверить удачное завершение, необходимо посмотреть, было ли возвращено значение 1. В противном случае проверьте итоговое значение функции preg_last_error() (если используется PHP версии 5.2.0 или выше). Если оно не равно нулю, то, возможно, был превышен лимит вычислений, например, разрешенная глубина рекурсии регулярного выражения. Обсуждение констант и ограничений, применяемых в регулярных выражениях PHP, представлено на странице, посвященной функциям регулярных выражений PCRE (см. раздел Ресурсы).

Извлечение данных

Во многих случаях необходимо только получить ответ на вопрос: "Соответствуют ли данные шаблону?" – например, при проверке данных. Однако чаще регулярные выражения используются для подтверждения соответствия и получения информации о совпадении.

Вернемся к примеру с телефонным номером. Пусть при соответствии шаблону нам необходимо сохранить код, префикс и номер линии в отдельных полях базы данных. Регулярные выражения могут запоминать совпадающие с шаблоном данные с помощью оператора capture. Оператор capture обозначается круглыми скобками и может использоваться в любой части регулярного выражения. Операции capture можно делать вложенными для поиска подсегментов в извлеченных сегментах данных. Например, чтобы из 10-значного номера телефона извлечь код города, префикс и номер линии, можно использовать следующую строку:

/([2-9][0-9]{2})([2-9][0-9]{2})([0-9]{4})/


Если входные данные соответствуют шаблону, первые три цифры захватываются первой парой круглых скобок, следующие три цифры - второй парой, а последние 4 цифры - последним оператором. Модификация вызова функции preg_match() возвращает извлеченные данные.

Листинг 5. Возврат извлеченных данных функцией preg_match()

PHP - Код

$valid = "/([2-9][0-9]{2})([2-9][0-9]{2})([0-9]{4})/";    
if ( preg_match( $valid, $number, $matches ) == 1 ) {
    echo(  "${_REQUEST[ 'number' ]} is valid" );
    echo(  "Entire match: ${matches[0]}" );
    echo(  "Area code: ${matches[1]}" );
    echo(  "Prefix: ${matches[2]}" );
    echo(  "Number: ${matches[3]}" );
}

Если в качестве третьего аргумента функции preg_match() указать переменную, например, в нашем коде, $matches, то в качестве ее значения будет выступать список извлеченных результатов. Нулевой элемент списка (с индексом 0) - это все совпадение целиком; первый элемент - совпадение, относящееся к первой паре круглых скобок, и так далее.

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

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

Листинг 6. Код для извлечения городского адреса

PHP - Код

$address = "123 Main, Warsaw, NC, 29876";

$valid = "/((\d+)\s+(\w+)),\s+(\w+),\s+([A-Z]{2}),\s+(\d{5})/";

if ( preg_match( $valid, $address, $matches ) == 1 ) {
    echo(  "Street: ${matches[1]}" );
    echo(  "Street number: ${matches[2]}" );
    echo(  "Street name: ${matches[3]}" );
    echo(  "City: ${matches[4]}" );
    echo(  "State: ${matches[5]}" );
    echo(  "Zip: ${matches[6]}" );
}

Опять все совпадение целиком хранится по индексу 0. А где хранится номер улицы? Если считать слева направо, номер улицы проверяется \d+. Это вторая открывающая круглая скобка слева, следовательно, значением $matches[2] будет 123. В $matches[4] оказывается название города, а в $matches[6] - почтовый индекс.

Продвинутые технологии

Обработка текста – широко распространенная задача, и PHP предоставляет ряд функций, упрощающих выполнение большого числа операций. Обратите внимание на следующее:

* Функция preg_replace() может работать как с одной строкой, так и с массивом строк. Если вызвать preg_replace() для массива строк, замена будет выполнена во всех элементах массива. В этом случае код preg_replace() возвращает массив измененных строк.
* Как и во всех остальных реализациях PCRE, здесь для осуществления замены можно прибегать к сравнению с вложенным шаблоном. Для наглядности давайте рассмотрим проблему стандартизации формата телефонного номера. Заменим все знаки пунктуации точками. Наше решение показано в листинге 7.


Листинг 7. Замена знаков пунктуации точками

PHP - Код

$punctuation = preg_quote( "().-" );
$number = preg_replace( "/[$punctuation]/", '', $_REQUEST[ 'number' ] );
$valid = "/([2-9][0-9]{2})([2-9][0-9]{2})([0-9]{4})/";    

$standard = preg_replace( $valid, "\\1.\\2.\\3", $number ); 
if ( strcmp ($standard, $number) ) {
    echo(  "The standard number is $standard" );
}

Сопоставление с шаблоном и, в случае совпадения, перевод в стандартный телефонный номер выполняется за один шаг.

Как отправить письмо через PHP, используя формы, и как при этом устранить возникающие проблемы с кодировкой? Рассмотрим на простом примере, как отправить вопрос через формы на сайте.

У нас будет 3 поля для ввода:

Ваше имя:

* E-mail:

* Вопрос:

Причем "Ваше имя" не является обязательным параметром.
Для простоты и удобства разместим форму и код прогараммы в одном файле. Важно указать кодировку страницы (windows-1251), чтобы далее не возникало проблем с перекодированием из win в koi (ниже)
Итак, приступим. Начало документа стандартное:

Код:

Код

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Отправка письма</title>
<meta content="text/html;charset=windows-1251" http-equiv="Content-Type">
</head>
<body>

Далее идет 2 логические части:
1 - вывод формы
2 - обработка формы и отправка письма

Вначале идет вывод формы.

Для удобства в начале определяем e-mail через переменную $mailto, на который будет отсылаться письмо из формы.
Далее мы определяем, была ли нажата кнопка "отправить".
В конце формы имеется кнопка "отправить", она имеет аттрибуты name="ok" и value="отправить". После нажатия на нее переменная $ok будет иметь значение "отправить". Если кнопка не нажата, то переменная не определена.
Таким образом, выражение if (empty($ok)) означает буквально "если кнопка отправить не была нажата". Функция empty() возвращает true, если переменная не определена, содержит 0 или пустоту.

Код:

PHP - Код

$mailto="name@server.ru";
if (empty($ok))
{

Далее идет вывод формы, если выполнено предыдущее условие if (empty($ok)).
Переменная $PHP_SELF означает, что обработку формы производит текущий файл, т.е. тот же, на кот. расположена форма.

Код:

Код

<h3>Отправьте вопрос автору сайта</h3>
Поля, отмеченные (*), обязательны для заполнения.
<br><br>
<form action="<?echo $PHP_SELF;" method="post">
<table>
<tr>
<td>Ваше имя:</td>
<td> <input type="text" name="username" size="30" maxlength="20"></td>
</tr>
<tr>
<td>* E-mail:</td>
<td><input type="text" name="mailfrom" size="30" maxlength="50"></td>
</tr>
<tr>
<td>* Вопрос:</td>
<td><textarea cols="50" rows="10" name="question"></textarea></td>
</tr>
</table>
<input type="submit" name="ok" value="отправить">
</form>

В противном случае, т.е. если была нажата кнопка, идет обработка формы и отправка письма
Код:

PHP - Код

}
else
{

Далее идет проверка на корректность заполнения поля "E-mail". Любители ругулярных выражений эту проверку поймут. Для остальных немного поясню:
Подразумевается, что e-mail должен быть такого вида:
слово@слово.слово
При этом слово может состоять из всех букв латинского алфавита и цифр и точка может быть не одна. (например слово@слово.слово.слово)
[a-z,0-9] - означает "любая буква латинского алфавита или цифра"
+ - означает, что [a-z,0-9] может встречаться 1 или более раз.

Если введен неправильный e-mail, то в переменную $error записывается ругательное сообщение.
Код:

PHP - Код

if(!preg_match("/^([a-z,0-9])+@([a-z,0-9])+(.([a-z,0-9])+)+$/", $mailfrom))
    {
    $error = "Не верно заполнено поле: <b>E-mail</b><br>";
    }

Если поле "Вопрос" не заполнили, то к переменно $error добавляем еше одно ругательство:
Код:

PHP - Код

if (empty($question))
    {
        $error .= "Не заполнено поле: <b>Ваш вопрос</b><br>
";
    }

Если переменная $error не пустая, то мы ее выводим на экран и немедленно прекращаем дальнейшую обработку с помощью exit
Код:

PHP - Код

if ($error)
    {
        echo $error;
        echo "<br><a href="Java Scripthistory.go(-1)" class="text">Вернуться назад</a>";
        exit;
    }

Ну а если таки $error осталась пустой и exit не сработал, то можно приступать к отправке письма, т.е. главной цели всего этого мероприятия...
Сформируем тему и тело сообщения:

PHP - Код

$subject="Вопрос от $mailfrom";
$body="Имя:
$username

E-mail:
$mailfrom

Комментарии:
$question";

А теперь самое главное, чтоб потом можно было прочитать письмо "по-русски" :) Функция convert_cyr_string перекодирует строку из win в koi (w-win, k-koi) Это необходимо, т.к. все почтовые клиенты по дефалту принимают письма в koi. А у нас вверху страницы стоит charset=windows-1251, поэтому функция грамотно переводит из win в koi Затем с помощью функции mail отправляется письмо на $mailto, указанный в начале файла.
Код:

PHP - Код

$body=convert_cyr_string (stripslashes($body),w,k);
    $subject=convert_cyr_string (stripslashes($subject),w,k);
    $sucess = mail($mailto, $subject, $body, "From: $email X-Mailer: PHP/" . phpversion());

Ну и самое приятное... Если письмо успешно отправлено, то выводим благодарственную надпись и предлагаем вернуться..
Код:

PHP - Код

if ($sucess)
    {
        echo "Спасибо. Ваш вопрос отправлен.<br><br>";
        echo "<a href="Java Scripthistory.go(-1)" class="text">Вернуться назад</a>";
    }

Стандартный конец..
Код:

Код

}

</body>
</html>

P.S. Как наверно понял читатель, нужно выделить и скопировать все зеленые блоки в один файл по порядку и запустить его на сервере
Весь код является полностью проверенным и рабочим.

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

Ладно, хватит разговоров, давайте перейдем непосредственно к примерам. Для начала самый простой. Создайте новый HTML файл и пропишите в нем следующий код:

Код:

Код

<FORM name=test_form method=post>
<INPUT onclick="test_change ()" type=button value="Нажми на меня">
</FORM>

<SCRIPT language=javascript>
function test_change ()
{
document.all.resultat.innerHTML="Спасибо!";
}
</SCRIPT>

<DIV id=resultat></DIV>

Теперь сохраните файл и откройте его браузером. Вы увидите кнопку с надписью "Нажми на меня". Нажимайте, не бойтесь, баннеры не появятся ?. Что мы видим? Код изменился. Под кнопкой появилась надпись "Спасибо!". Содержание страницы изменилось. Но если вы загляните в файл с кодом, он неизменен. Как такое возможно? Все очень просто. Дело в том, что JS является client-side технологией. Т.е. он исполняется на машине посетителя, а не на сервере. А теперь давайте разберемся с кодом. Итак, с начала ничего нового не видим: форма с кнопкой, при клике на которую исполняется функция “test_change”. Сама функция содержит одну - единую строчку:

Код:

Код

document.all.resultat.innerHTML="Спасибо!";

Это и есть команда JS на вставку. Все что остается добавить это место, куда делать вставку. Место мы обозначили идентификатором "resultat". Идентификатор вы можете изменять вольно по своему усмотрению. Теперь создаем новый слой и связываем его с идентификатором "resultat":

Код:

Код

<DIV id=resultat></DIV>

Ну как, неплохо? Сразу хочу вас обрадовать, динамически можно вставлять не только простой текст, но и HTML теги! А теперь рассмотрим более сложный пример. Создадим калькулятор, который по веденным данным подсчитает вашу месячную зарплату ?. Итак создайте новый HTML файл и наберите следующее:

Код:

Код

<TABLE>
<FORM name=cash_form method=post>

<TR><TD>Оплата, $/час: <TD><INPUT size=10 name=Oplata></td></tr>
<TR><TD>Рабочих часов в день: <TD><INPUT size=10 name=Chasov></td></tr>
<TR><TD>Рабочих дней в месяц: <TD><INPUT size=10 name=Dney></td></tr>

<TR><TD colSpan=2>

<INPUT onclick="getmoney (this.form.Oplata.value,this.form.Chasov.value,this.form.Dney.value)" type=button value="Подсчитать"></td></tr>

</FORM>
</TABLE>

<SCRIPT language=javascript>
function getmoney (dat1,dat2,dat3)
{
month=dat1*dat2*dat3;
document.all.resultat.innerHTML="За месяц Вы заработаете "+month+" $";
}
</SCRIPT>

<DIV id=resultat></DIV>

Сохраняем файл и открываем его браузером. Что мы видим? Три поля для ввода и кнопку с надписью "Подсчитать", при клике на которую запускается функция "getmoney". Она получает введенные значения, вычисляет месячную зарплату и выводит ее в браузере. Введите значения и нажмите кнопку "Подсчитать". Обратите внимание на значение месячной зарплаты. А теперь измените одно или несколько введенных значений и снова нажмите кнопку "Подсчитать". Как вы видите новое значение заменило старое. Очень удобно. А можно, например, выводить новое значение под старым, для этого нужно изменить строчку

Код:

Код

document.all.resultat.innerHTML="За месяц Вы заработаете "+month+" $";

на

Код:

Код

document.all.resultat.innerHTML=document.all.resultat.innerHTML+"За месяц Вы заработаете "+month+" $<br>";

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

Конечно, калькуляторы нужны далеко не каждому сайту. И правильно, не стоит на одном зацикливаться. Подключите свое воображение. Возможность динамически добавлять HTML код открывает воистину огромный потенциал для разработчика. Конечно, меню на таком коде вряд ли сможет превзойти выпадающее меню JS - кликать надоест. А вот для экономии места и для организации пояснений к разным элементам сайта такие возможности JS идеально подходят. Простой пример - страница контактов на сайте компании. Там, как правило, размещена контактная информация компании, дистрибьюторов, представителей, разработчика сайта. Куча адресов, телефонов и e-mail'ов. Так и заблудиться можно. А вот если разместить ссылки "Компания", "Дистрибьюторы", "Представители", "Разработчик", посетитель быстро сориентируется и выберет нужную ссылку. Осталось только написать JS код, который при клике на ссылку выводит под ссылкой соответствующую информацию и убирал ранее выведеную. Многие могут возразить, мол можно сделать просто ссылку на нужный файл и не нужно динамическое изменение текущего. Но, во-первых, возможно посетитель заинтересован не одной ссылкой - ему придется возвращаться, а во-вторых, намного приятнее кликнуть и моментально (!!!) увидеть нужную информацию (загруженную вместе со страницей), чем ожидать загрузку очередной страницы. Давайте я дам простой примерчик, а разработка подобного кода останется вам как домашнее задание для закрепления материала. Итак, код:

Код:

Код

<FORM name=test_form method=post>
<INPUT onclick="test_on_off (1)" type=button value="Включить">
<INPUT onclick="test_on_off (0)" type=button value="Выключить">
</FORM>

<SCRIPT language=javascript>
function test_on_off (dat1)
{
if (dat1==1)
{document.all.resultat.innerHTML="<table border=1><tr><td>Ура! Работает!</td></tr></table>";}
else
{document.all.resultat.innerHTML="";}
}
</SCRIPT>

<DIV id=resultat></DIV>

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

Код:

Код

<FORM name=test_form method=post>
<INPUT onclick="test_change ()" type=button value="ВключитьВыключить">
</FORM>

<SCRIPT language=javascript>
function test_change ()
{
if (document.all.resultat.innerHTML=="")
{document.all.resultat.innerHTML="<table border=1><tr><td>Ура! Работает!</td></tr></table>";}
else
{document.all.resultat.innerHTML="";}
}
</SCRIPT>

<DIV id=resultat></DIV>

Теперь кнопка работает как выключатель: кликнул - включил, еще раз кликнул - выключил, снова кликнул - опять включил...

Если кто чего недопонимает - смело пишите. Ну, а если кому облом код набивать, тоже пишите, вышлю.

В общем теперь вы имеете немалый арсенал средств для сайтостроителя, так что удачной работы!

Как только появляется желание перейти с Windows на другие платформы или на веб-приложения, возникает проблема: там же нет «Фотошопа»! Этот популярный графический пакет благодаря пиратам есть сейчас на большинстве компьютеров в СНГ. И найти альтернативу этой программе сложно. Но как мы используем такую мощную программу? В основном это изменить размеры, подкорректировать яркость, иногда убрать лишние детали, да отправить на е-мейл подружке.
Разве нужен для этого полноценный Photoshop? Конечно же, нет, если только вы не дизайнер-профессионал высокого класса. Поэтому найти аналог будет намного проще. Но искать аналог среди настольных программ скучно и неинтересно. Мы живем в век Web 2.0 и поэтому искать аналоги будем среди веб-приложений. Развитие графических возможностей Flash позволяет получить весьма интересные результаты. Описываемые редакторы не станут полной заменой «Фотошопа», но для небольших фотокоррекций они пригодятся.

72photos


Это скорее не редактор а фотогалерея с возможностью слегка подредактировать сохраненные снимки. Функции рисования здесь нет. Можно наложить эффекты на снимок, подправить цветопередачу, яркость и обрезать лишнее. Также есть размытие/резкость и несколько стандартных фильтров. Все достаточно среднее, ничего выдающегося, но как интересное применение возможностей Flash подойдет. Из полезных особенностей стоит отметить возможность работы с картинками, сохраненными на других фотохостингах, впрочем, из очень небольшого списка.

FotoFlexer


Редактор, обладающий рядом неоспоримых достоинств, но есть и некоторые недостатки.
Это абсолютный лидер по реализованным функциям. Он поддерживает большое количество фотохостингов, с которых можно загрузить фотографии для редактирования, возможна загрузка просто по URL, что позволяет редактировать любую картинку, также есть загрузка картинок с компьютера пользователя. Чтобы сохранять файл, куда вам надо, придется регистрироваться. И просто на компьютер файл не отдадут. Придется выдирать с какой-то файлопомойки. Или регистрироваться. Мелочь, но неприятно.
Огромное количество эффектов и инструментов. Можно рисовать, накладывать эффекты, трансформировать картинку. Есть готовые для добавления графические примитивы, позволяющие создавать фотографии со вставкой лиц друзей. Здесь же можно и рамочки прикрутить и постер оформить. В общем, раздолье для бытового фотографа. Правда подписать фотографии не получится, русский текст программа не понимает.
Есть инструменты и для более серьезной публики. Сложные трансформации, инструменты выделения и перекрашивания, аналогичные привычным инструментам, даже кое-какая поддержка слоев.
Аналогов по функциональности среди онлайн-сервисов на сегодня нет.

Phoenix


Редактор с продуманным интерфейсом. Без регистрации работать отказывается. Зато потом способен открывать файлы не только со своего сервера и компьютера пользователя, но и со сторонних сервисов и по URL. Неплохой набор фильтров и эффектов. Есть полноценное рисование с возможностью русских надписей. Поддерживаются слои. Правда иногда серверная часть дает сбои при сохранении. Да и само приложение могло бы работать побыстрее. В остальном же отличный редактор.

Photoshop Express


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

PicMagick


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

Picnik


Этим редактором пользуются на популярном фотохостинге Flickr в качестве стандартного. Пользоваться этим редактором могут все желающие. Даже без регистрации. Закачать картинки можно с компьютера, из популярного фотохостинга или блога, с любого URL. Редактор понимает не только стандартные web-типы графики, но и большое количество других распространенных форматов. По этому параметру Picnik — абсолютный лидер.
Хорош он и в реализации. Долгий старт приложения компенсируется большим количеством эффектов и инструментов. Несколько уступая FotoFlexer, он опережает остальных конкурентов. Вот только рисования в чистом виде нет. Можно только накладывать готовые графические примитивы. И ввести русский текст нельзя, получаются сплошные вопросительные знаки.
Сохранять полученный результат можно тоже как у себя на компьютере, так и на популярных хостингах. А можно и сразу на е-мейл. Причем в разнообразных форматах.

Pixer.us


Правда это в общем-то и не совсем Flash-редактор. Он написан на Javascript, что уже само по себе интересно. Да и на полноценный редактор сервис не тянет. Вы можете загрузить фотографию со своего компьютера, применить к ней ряд эффектов и сохранить обратно. И все. Работает все достаточно быстренько, но без изысков. Рисования нет. Но как демонстрация возможностей безфлешевых технологий, редактор интересен. К примеру, если сравнивать его с Picmagick, то поединок будет как минимум равным.

Pixlr


Это редактор в чистом виде, без хостинга. Зато есть API, что возможно позволит встраивать редактор в сторонние приложения. Редактор один из семейства клонов фотошопа. Есть русская локализация, чего нет у многих других редакторов. Соответственно, русские надписи делать тоже можно.
Отличная оптимизация работы. Все открывается быстро. Отличный функционал. Есть даже столь любимый Magic Wand. Слои и фильтры тоже на месте, хотя набор инструментов мог бы быть побольше. Впрочем, все основные примочки на месте. Да и интерфейс опять-таки навевает воспоминания о фотошопе. Приятный в работе, продуманный редактор.

Splashup


Очередной гибрид фотохостинга и неплохого редактора. Есть слои, эффекты, полноценное рисование. Русский язык не работает, а вот все остальное на достойном уровне. Можно загрузить свою картинку с компьютера, из интернета (поддержка фотохостингов и прямых URL), отредактировать и сохранить в различных местах.
Очень удобный, приятный интерфейс, отличная скорость работы. Достойный представитель онлайн-редакторов, пытающихся копировать Photoshop.

SUMO Paint


Солидный редактор, близок к настольному приложению как по внешнему виду, так и по функциональному. Правда, оторван от большого интернета. Ни загрузки по URL, ни интеграции с другими сервисами нет. Только аккаунт на собственном сервере и загрузка с компьютера (которая работает не очень уверенно).
Зато функционал впечатляет. Тут нет приевшихся рамочек и цветочков, только серьезные инструменты. Полноценная поддержка слоев, разнообразные эффекты и фильтры. Чем-то напоминает старые версии Photoshop. Очень достойная разработка. И даже поддержка русских шрифтов в наличии. Если поправят проблемы с загрузкой фотографий, будет замечательно.

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

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

а). onmouseout и onmouseover

Для начала наведем курсор на кнопку "Сброс" или "Отправить" и обратим внимание на строку состояния. Вы должны увидеть там надпись с объяснением значения кнопки. Теперь отведите курсор и строка состояния очистится.

Содержимое строки состояния хранится в переменной window.status. Переменная это некоторый объект (можно представить себе ящик), значение которого (содержимое которого) можно изменять. Изменение значения осуществляется операцией присваивания (=), а выглядит она следующим образом:

имя_переменной = "значение"; (какие использовать кавычки: одинарные или двойные значения не имеет)

Поэтому для того, чтобы изменить надпись в строке состояния, нам нужно присвоить переменной window.status нужное нам значение (подсказку к кнопке), а когда курсор будет убран - присвоить пустую строку("").

Вся задача сводится к тому, чтобы определить когда пользователь наводит курсор на кнопку, а когда убирает его. Для этого нужно "сказать" обработчикам этих событий выполнить нужное нам действие. Обработчик события "наведение курсора" - onmouseover, а "отведение курсора" - onmouseout.

Очень многие тэги имеют атрибуты, начинающиеся с on (onclick, onmouseout, onfocus и т. д.). Значение этих атрибутов и есть, задача которую необходимо выполнить соответствующему обработчику. То есть для обработчика onmouseout есть атрибут onmouseout, для onmouseover - onmouseover. И в итоге мы получаем следующее определение кнопок:

Код

<input type="submit value="Готово" onmouseover="window.status='Щелкните для отправки данных'" onmouseout="window.status=''" />
<input type="reset" value="Сброс" onmouseover="window.status='Щелкните для удаления введенного'" onmouseout="window.status=''" />

Как Вы видите, атрибут onmouseover имеет в качестве значения JavaScript-код: window.status='Щелкните для отправки данных', как только курсор достигает кнопки, обработчик события mouseover - onmouseover, смотрит, что хранится в атрибуте onmouseover и выполняет необходимое действие(присвоение значения переменной window.status). Аналогично действует и обработчик события onmouseout: как только курсор уводиться от кнопки (то есть выполняется событие mouseout), то обработчик события - onmouseout выполняет код, содержащийся в атрибуте onmouseout.

То же самое и со второй кнопкой.


б). <a href="Java Scriptfunction()">Function</a>

Теперь щелкните на ссылке и откроется окошко с подсказкой. Но заметьте, что окно небольших размеров и у него нет панели инструментов - такого силами html не сделаешь! В данном примере мы имеем окно размером 300x200, без панелей инструментов, содержащее документ help.html.

Для того чтобы создать такое окошко существует следующий JavaScript-код:

Код

helpWindow = window.open("help.html", "", "toolbar=0,width=300,height=200");

где:

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

- Зачем? Не проще ли указывать просто имя открывающейся страницы, например help.html?
- А если у нас две копии одной и той же страницы? Или две страницы с одинаковым именем(например, в разных папках)? Вот для того, чтобы не перепутать страницы и свободно работать именно с тем окном с которым предполагаешь и сделанно, так чтобы "окно" присваивалось переменной, так как имя переменной можно выбрать любое.

2. window.open(что-то) - это функция. Функции выполняют определенную задачу, в данном случае window.open() открывает новое окно.

3. help.html - это страница, которую нужно открыть.

4. "" - В кавычках должно быть имя окна, но оно нам не пригодится, поэтому там нулевая строка. В следующих кавычках указываются "параметры открываемого окна": оно не должно содержать панели инструментов (toolbar=0) и должно быть шириной 300 пикселей, а высотой - 200 (width=300,height=200, соответственно).

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

Первое решается написанием функции. Как я уже говорил функция выполняет некоторую задача, причем для использования функции достаточно указать ее имя. Можно не только использовать предопределенные(функции, которые имеется в языке и без нас), но и писать их самому. Обычно функции определяются(пишутся) в разделе HEAD документа, в котором используются:

Код

<script type="text/javascript">
function help()
{
helpWindow = window.open("help.html", "", "toolbar=0,width=300,height=200");

}
</script>

"function" значит, что дальше будет написана наша функция; help() - это имя функции (оно будет указываться вместо тела функции (между { и })).

Вторая проблема решается тоже довольно просто. Адрес страницы указывается в атрибуте href, а нам надо выполнить JavaScript код вместо перехода по ссылке:

Код

<a href="Java Scripthelp()">Щелкните на ссылке для получения помощи</a>

"Java Script" означает, что дальше должен идти JavaScript-код, и что он должен выполняться вместо стандартного перехода по ссылке. В данном случае наш JavaScript-код - это созданная нами функция help().


в). onclick

Нам не остается ничего более, как закрыть окно со справкой. Для этого воспользуемся кнопкой "Закрыть". Но нас интересует то, как работает эта кнопка, а имеет она следующий вид:

Код

<input type="button" value="Закрыть" onclick="window.close()">

Дабы закрыть окно мы сделали щелчок(Click) на кнопке "Закрыть", а щелчок это нажатие и отпускание кнопки мыши, причем и то и другое должно быть произведено на одном и том же элементе (например, на кнопке). Кликая, на кнопке мы активируем обработчик события onClick, который выполняет для нас JavaScript-код, прописанный в атрибуте onclick нашей кнопки. Помните мы открывали окно? Мы писали window.open(), а здесь тоже самое только window.close(). window - это текущее окно, а close() - закрыть.

Это одно из наиболее частоупотребляемых событий.


г). onfocus и onblur

Ну что ж будем ближе подбираться к вводу требуемой от нас информации.

Как я уже говорил: элемент получает фокус когда на нем происходит нажатие кнопки мыши, или на него осуществляется переход посредством клавиши табуляции (Tab), а теряет, когда фокус получает другой элемент. Наше поле для ввода получит фокус тогда, когда пользователь решиться ввести информацию. При этом было бы удобно, чтобы текст с подсказкой ("Введите Ваше имя") автоматически выделялся и посетитель мог его удалить одним нажатием на del, а не удалять по одному символу, или выделять текст вручную. Удобство пользователя свято. Итак, для этого мы воспользуемся событием focus. Для выделения текста используется метод select(). То есть атрибутом к полю надо прописать: onfocus="this.select();", this обозначает, что выделение должно происходить именно в этом текстовом поле (а можно прописать путь и к другому, но это не целесообразно).

А теперь попробуйте ничего не изменяя (или все удалив) убрать фокус (например, щелкнув в любом месте окна, или нажав Tab). Это событие blur, я прописал в нем выполнение функции: onblur="check();". Сама же функция имеет следующий вид (в разделе head страницы с формой между <script> и </script>):

Код

function check()
{
var val=document.forms[0].name.value;
if(val == '' || val == 'Введите Ваше имя')
{
alert('Вы не ввели Ваше имя!');
}
}

document.forms[0].name.value - это то, что введено в текстовое поле. document - это текущий документ, forms[0] - первая форма на нашей страницы (отсчет с нуля), name = имя поля (задается атрибутом name (<input name="name">)), а value это и есть нужное нам значение (то, что введенно в текстовое поле, к которому м ы и написали путь). Введенное в поле мы присваиваем переменной val (var значит, что дальше идет имя переменной), чтобы в дальнейшем каждый раз не писать весь путь целиком.

Следующее это оператор if(если). Он выглядит следующим образом:

Код

if (условие)
{
Что делать если условие верно.
}

Мы сравниваем содержание переменной val с пустой строкой ('') и с начальной строкой ('Введите Ваше имя'). Обратите внимание, что сравнение не как в математике(с одним =), а сравниваются двума ==. || - или. Функция alert выводит окно с ошибкой (то, что в скобках - это текст ошибки). То есть:

Код

Если (поле == '' или поле == 'Введите Ваше имя')
то
вывести('Текст ошибки');
окончание

И на всякий случай приведу целиком строку с кодом поля input:

Код

<input name="name" type="text" value="Введите Ваше имя" onfocus="this.select();" onblur="check();" />

д). onreset и onsubmit

Допустим, что пользователь заполнил форму неправильно, и он хочет очистить все поля формы одновременно: для этого он воспользуется стандартной кнопкой reset. Но что если пользователь щелкнет на ней по случайности (рука дрогнет, или в суете спутает с кнопкой submit), а форма была огромная, и он долго мучился ее заполнять..., ему будет грустно, и еще он будет долго материться. Поэтому хорошо бы у него дополнительно спросить: действительно ли он хочет очистить форму.

Вообще событие reset обрабатывается до очистки формы. А чтобы отменить очистку вообще, нам просто напросто надо вернуть обработчику события значение false, то есть прописать в соответствующем атрибуте: "return false;", а чтобы продолжить очистку: "return true;". А теперь вспомним функцию, которая выдает вопрос пользователю на подтверждение чего-либо, эта функция: "confirm('Вопрос?');". При нажатии "Ok", эта функция заменяется на true, а при нажатии "Cancel" на false. То есть все что от нас требуется, это прописать в теге <form> атрибут: onreset="return confirm('Вы действительно хотите сбросить форму?');". Тогда при нажатии "Ok" там на самом деле будет "return true;", и форма будет очищена, а если "Cancel", то "return false;" и очистка формы будет отменена.

Подобным образом действует событие submit, которое возникает при попытке отправить форму. Поскольку в нашем случае форму отправлять никуда не надо, то у меня просто написано: onsubmit="return false;". И сколько бы Вы не щелкали ничего не изменится (разве что Вы JavaScript отключите).

Обычно же обработчик onsubmit используется для верификации формы (то есть проверки на заполнение всех необходимых полей, правильность их заполнения, скажем, проверка по определенному шаблону и т. п.), для этого создается функция, которая выполняет все действия. Функция должна содержать операторы "return true" и "return false", которые позволяют, заменить функцию на true или false, соответственно, в зависимости от результатов проверки (если успешно, то true, если нет false). Но верификация данных это обширная тема, которая не может быть рассмотрена здесь. Один из примеров базовой верификации я привел, когда объяснял событие blur - подобную функцию можно использовать и здесь. Тогда <form> будет содержать атрибут: onsubmit="return function();".

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

Код

<form action="page.cgi" onreset="return confirm('Вы действительно хотите сбросить форму?');" onsubmit="return false;">

е). onmousedown и onmouseup

Еще одна пара событий не нашла достойного места на странице, но я ее реализовал в виде кнопки "Button". Причем это не обычная html-кнопка, она реализована в виде двух картинок. Исходная кнопка хранится в файле с именем npressed.jpg, а нажатая - pressed.jpg. Чтобы достичь эффекта нажатия кнопки нам необходимо, чтобы при при щелчке на ней(this) значение атрибута src (путь к картинке) тега <img> менялось на pressed.jpg, а при отпускании обратно на npressed.jpg. Нажатие кнопки обрабатывает onmousedown, а отпускание - onmouseup, то есть здесь все просто:

Код

<img src="npressed.jpg" onmousedown="this.src='pressed.jpg'" onmouseup="this.src='npressed.jpg'" />

ж). onload, onunload и onabort

Обработчик события onload активируется, когда начинает загружаться графическая часть страницы (все тексты, графика и т.п.). onload является атрибутом тега <body>. Если честно я не вижу сколько бы реального применения этому событию, зато я нашел, что можно сделать с onunload. onunload это тоже атрибут тега <body>. Событие unload происходит когда мы пытаемся покинуть данную страницу (переходим по ссылке на другую, закрываем окно браузера, обновляем страницу и т. д.). Откройте еще раз окошко справки. Допустим, что пользователь прочитал справку, и хочет отправить форму, или уйдет с нашего сайта, но при этом он забыл закрыть это маленькое окошко с подсказкой, мы на выходе закроем его сами. А для этого тег <body> (у начального документа) у нас будет выглядеть следующим образом:

Код

<body onunload="helpWindow.close()">

Вы должны бы помнить, что helpWindow это имя нашего окна (ведь именно этой переменной мы присваивали его открытие: helpWindow = window.open("help.html", "", "toolbar=0,width=300,height=200")), а метод close() закрывает это окно. Некоторые нехорошие люди используют это событие, чтобы когда посетители уходили с его страницы, появлялись какие-либо окна, так называемые pop-up.

onabort - атрибут тега <img>. Когда пользователь отменяет загрузку изображения происходит событие abort. Но отмена загрузки изображения может не входить в наши плане. И в качестве предупреждения у нас может быть написано нечто похожее на

Код

<img src="myimage.jpg" onabort="alert('Изображение до конца не загружено! Это может привести к ошибкам.');" />>

ЗАКЛЮЧЕНИЕ

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

onchange - обработчик события, который активируется, когда Вы изменяете содержимое текстового элемента или текстовой области (<TEXTAREA>) (например, когда Вы вводите или удаляете очередную букву какого-либо текстового поля).

onselect - обработчик события выбора текста. То есть это событие происходит, когда пользователь пытается выделить текст в текстовом элементе или текстовой области.

onerror - обработчик события error, которое возникает при ошибке загрузки документа или изображения (то есть onerror это атрибут тегов <body> и <img>). Оно возникает при синтаксической ошибке JavaScript-кода (но Вы ведь не будете специально делать в нем ошибки), либо ошибкой времени выполнения (например, если Ваш скрипт выполняет какие-либо вычисления и у Вас по ошибке получится так, что некое число будет делиться на ноль, а это недопустимо - это и есть одна из ошибок времени выполнения).

Так же не забывайте, что я привел лишь по одному примеру из десятков возможных на каждое событие. Здесь главное Ваша фантазия и навыки. Например, события mouseout, mouseover, mouseup, mousedown часто используются для создания выпадающих меню и других визуальных эффектов, но это весьма трудный материал, который требует более глубоких знаний, причем не одного JavaScript.

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

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

Файл index.html

Код

<Script Language="JavaScript">
var height=0;
var width=0;
colorDepth = screen.colorDepth;
if (self.screen)
{
width = screen.width
height = screen.height
}
else if (self.java)
{
var jToolKit = java.awt.Toolkit.getDefaultToolkit();
var scrsize = jToolKit.getScreenSize();
width = scrsize.width;
height = scrsize.height;
}
if (width > 0 && height > 0)
{
// Производим перенаправление на скрипт counter.php, передавая в
// переменной scrsize строку, содержащую значения width,
// height и colorDepth.
window.location.href = "http://localhost/view.php?
width=" + width +
"&height=" + height +
"&color=" + colorDepth;
} else exit();
</Script>

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

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

Файл view.php

PHP - Код

echo "Ширина : ".$_GET['width'];
  echo "Высота : ".$_GET['height'];
  echo "Цветовое <sup>разрешение</sup> : ".$_GET['color'];

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

Конечно, многие могут сказать, что поисковики не учитывают мета теги keywords и description, и вовсе незачем голову морочить проблемой подбора ключевых слов, но учитывают или нет, это известно только администраторам поисковых машин. В частности, я недавно проводил эксперимент, в котором участвовало три пары сайтов, на каждой паре сайтов был один и тот же контент, но на одном из сайтов каждой пары были прописаны keywords и description. И что вы думаете, через месяц, все три сайта с keywords и description были выше в выдаче Яндекса, чем их двойники без этих мета тегов. (Примечание: сайты были оптимизированы под абсолютно не конкурентные запросы и не имели бэклинков).

Принцип работы php скрипта, основной задачей которого является “на лету” подбирать к тексту ключевые слова (keywords), заключается в разделении всего текста на слова и занесение их в массив. Из исходного текста сначала удаляются все знаки препинания, затем слова помещаются в массив и каждому слову присваивается число его повторений в тексте. После заполнения массива слова упорядочиваются по количеству повторений, и в качестве результатов берется верхушка массива – 15-25 самых часто употребляемых слов.

А вот и сам исходный код этого php-скрипта для подбора ключевых слов:

PHP - Код


class Counter
{
    var $origin_arr;
    var $modif_arr;
    var $min_word_length = 3;
 
function explode_str_on_words($text)
{
    $search = array ("'ё'",
                     "'<script[^>]*.*?</script>'si",  // Вырезается javascript
                     "'<[&#092;/&#092;!]*?[^<>]*'si",           // Вырезаются html-тэги
                     "'([&#092;r&#092;n])[&#092;s]+'",                 // Вырезается пустое пространство
                     "'&(quot|#34);'i",                 // Замещаются html-элементы
                     "'&(amp|#38);'i",
                     "'&(lt|#60);'i",
                     "'&(gt|#62);'i",
                     "'&(nbsp|#160);'i",
                     "'&(iexcl|#161);'i",
                     "'&(cent|#162);'i",
                     "'&(pound|#163);'i",
                     "'&(copy|#169);'i",
                     "'&#(&#092;d+);'e");
    $replace = array ("е",
                      " ",
                      " ",
                      "&#092;&#092;1 ",
                      "&#092;" ",
                      " ",
                      " ",
                      " ",
                      " ",
                      chr(161),
                      chr(162),
                      chr(163),
                      chr(169),
                      "chr(&#092;&#092;1)");
    $text = preg_replace ($search, $replace, $text);
    $del_symbols = array(",", ".", ";", ":", "&#092;"", "#", "&#092;$", "%", "^",
                         "!", "@", "`", "~", "*", "-", "=", "+", "&#092;&#092;",
                         "|", "/", ">", "<", "(", ")", "&", "?", "?", "&#092;t",
                         "&#092;r", "&#092;n", "{","}","[","]", "'", "“", "”", "•",
                         "как", "для", "что", "или", "это", "этих",
                         "всех", "вас", "они", "оно", "еще", "когда",
                         "где", "эта", "лишь", "уже", "вам", "нет",
                         "если", "надо", "все", "так", "его", "чем",
                         "при", "даже", "мне", "есть", "раз", "два",
                         "0", "1", "2", "3", "4", "5", "6", "7", "8", "9"
                         );
    $text = str_replace($del_symbols, array(" "), $text);
    $text = ereg_replace("( +)", " ", $text);
    $this->origin_arr = explode(" ", trim($text));
    return $this->origin_arr;
}
 
function count_words()
{
    $tmp_arr = array();
    foreach ($this->origin_arr as $val)
    {
        if (strlen($val)>=$this->min_word_length)
        {
            $val = strtolower($val);
            if (array_key_exists($val, $tmp_arr))
            {
                $tmp_arr[$val]++;
            }
            else
            {
                $tmp_arr[$val] = 1;
            }
        }
    }
    arsort ($tmp_arr);
    $this->modif_arr = $tmp_arr;
}
 
function get_keywords($text)
{
    $this->explode_str_on_words($text);
    $this->count_words();
    $arr = array_slice($this->modif_arr, 0, 30);
    $str = "";
    foreach ($arr as $key=>$val)
    {
       $str .= $key . ", ";
    }
    return trim(substr($str, 0, strlen($str)-2));
}
}

Пользоваться данным php классом очень просто, создаете экземпляр класса функцией new а потом вызываете внутреннюю функцию get_keywords(), класса Counter. Вот наглядный пример использования этого класса:

PHP - Код

$word_counter = new Counter();
if (strlen($content)>50000)
{
    $keywords = $word_counter->get_keywords(substr($content, 0, 50000));
}
else
{
    $keywords = $word_counter->get_keywords($content);
}

В переменной $content должен содержатся основной текст страницы, для которой создаются ключевые слова. И еще, полученная строка содержит только ключевые слова, без мета тегов. Скачать данный php класс для подбора ключевых слов в zip архиве вы можете здесь.

Довольно часто встречается мнение, что в подобных статьях слишком много говорится о теории разработки успешных сайтов. Что ж, отбросим теорию и обратимся к проверенным временем методам. Следующая система со 100%-ной вероятностью достичь желаемого положения в Google по широкому кругу запросов. Это те методы, которые я использую постоянно в своей работе. Результаты зависят, как правило, от темы, потенциальной аудитории и уровня конкуренции в нише.

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

A) Начинайте строить содержание сайта. Прежде чем даже выбрать доменное имя для сайта, отметьте для себя следующее - необходимо иметь 100 страниц сайта. Это, причем, только для начала. Это только страницы с реальным содержанием - не списки ссылок, вступительные страницы и что-либо подобное.

B) Доменное имя - легко запоминающееся и осмысленное. Не надо вставлять ключевые слова - вам надо создать брэнд, торговую марку, которые будут легко запоминаться. Времена доменов из ключевых слов прошли. Поучитесь на примере GoTo.com, который недавно стал Overture.com - по моему мнению, это был один из лучших примеров создания брэнда в Интернет, который, кстати, потребовал отбросить целые годы, потраченные на создание другого брэнда.

C) Дизайн сайта - чем проще, тем лучше. Текста должно быть больше, чем тэгов разметки. Страницы должны быть видны в любом броузере - от lynx до IE 6.0 - старайтесь соблюдать стандарт HTML 3.2. Не похоже, чтобы роботы понимали HTML 4.0. Воздерживайтесь от всякого рода тяжестей на странице - Flash, Java, JavaScript - они, как правило, мало помогают сайту, но могут серьезно повредить по целому ряду причин, и нелюбовь поисковиков к ним лишь одна из них.

Стройте сайт структурно понятным. Включайте в имена директорий слова запросов, которые вы хотите “перекрыть”. Можете поступить иначе и все страницы положить в корневую директорию - несмотря на противоположность совета, он неплохо срабатывает на многих поисковиках, и в т.ч. на Google.

Воздержитесь от ненужных ссылок, засоряющих сайт, например, “Best viewed with”, счетчиков, кнопочек, и т.д. Сделайте его простым и профессионально выглядящим. Поучитесь на примере самого Google - простота - вот что хочет посетитель.

Скорость загрузки - это еще не все. Ваш сайт должен отзываться мгновенно. Если после перехода на сайт в броузере ничего не происходит в течение 3-4 секунд - у вас есть проблемы. Это время может меняться в зависимости от местонахождения сервера, но сайт, расположенный в вашей стране, должен отзываться в течение 3-4 секунд. Секундой больше - и вы начинаете терять аудиторию, по 10% примерно за каждую секунду. Между тем, 10% могут быть разницей между успехом и неудачей.

Страницы:

D) Размер страниц - чем меньше, тем лучше. Постарайтесь не превысить 15 кБ. Чем меньше, тем лучше. Постарайтесь не превысить 12 кБ. Чем меньше, тем лучше. Постарайтесь не превысить 10 кБ. Идея понятна? Удержитесь в пределах от 5 до 10 кБ. Да, это сложно сделать - но возможно и это работает. Как для поисковых систем, так и для посетителей.

E) Содержание - сделайте одну страницу с текстом и выкладывайте по 200-250 слов в день. Если вы не знаете, что должно быть на странице - воспользуйтесь сервисом Overture. Полученный список - это ядро вашей страницы, стартовая линия.

F) Частота, положение и т.д. - простой, старомодный стиль здесь наиболее уместен. Включите ключевое слово по разу в title, description, тэге H1, тексте ссылки, жирным шрифтом, курсивом, в начале страницы. Постарайтесь выдерживать частоту употребления ключевого слова в пределах от 5 до 20%. Используйте красивые фразы и проверьте их написание. Поисковые системы все чаще применяют автоматическую корректировку запросов и нет никаких причин этим пренебрегать.

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

Все началось до банального просто - любимый директор сказал "Хочу!". Аргументация была следующей:
* Переводится много бумаги для печати и отправки по факсу (клиентов много, потому отправленные счета сразу выбрасываются: найти нужный документ даже через день - нереально)
* Электронная почта "есть в наши дни у всех и каждого" (то, что сам директор ею не пользуется - другой вопрос :-) )
* Тратится меньше времени персонала (не нужно сидеть и ждать перед факсом, стартовать, "прошло"/"не прошло", ...)
* Легче вести учет когда и что было отправлено.

---

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

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


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

Подбор нужного инструментария

Некоторое время я стараюсь использовать бесплатные программы, а не ломать те, за которые нужно платить деньги. Так что одним из условий (не главным, но в результате выполненным почти на 100%) была бесплатность инструментария.
Понятно, что для получения рисунка на выходе нужен виртуальный принтер, на который можно печатать любой документ. Выходным форматом был выбран tiff как достаточно распространенный, предполагая что его можно будет конвертировать в любой формат, если возникнет необходимость. Были испробованы многие принтеры, встреченные в просторах Internet`а, как бесплатные, так и нет. Большинство из них умеют печатать кроме искомого tiff еще и pdf документы, но не один не удовлетворял условиям передачи в них внешних параметров (важно было указать место сохранения и возможно имя файла для уменьшения коллизий, поскольку работа происходит на сервере терминалов). В конечном итоге выбор пал на AFPL Ghostscript 8.14 for Win32 и драйвер переадресации порта принтера RedMon.
Ghost Script умеет конвертировать данные из ps, eps, pdf в разные форматы (те же ps, eps, pdf, языки принтеров вроде PCL6 от HP, и рисунки). Получать данные он может как из файла, так и из входящего потока (stdin для посвященных). RedMon умеет данные, полученные от драйвера принтера, передавать как входной поток выбранной программе. Кроме того устанавливает несколько системных переменных, одну из которых (%REDMON_USER% - имя пользователя, печатающего документ) мы будем использовать.
Итак - используемый режим связки: установка PS принтера в системе, указание ему виртуального порта RedMon, пересылка исходящего PS потока от принтера на Ghost Script, формирование tif по указанным настройкам.
Настройки для режима работы Ghost Script хранятся в файле одном для всех, потому в схему добавим еще одно звено: RedMon передает данные не Ghost Script, а скрипту WSH, а уже он откорректировав настройки под пользователя, передает дальше поток для Ghost Script. Потому еще одна программа, которая нам нужна: Windows Script 5.6 for Windows. Нужна именно версия 5.6, поскольку во встроенной в Windows 2000 версии 5.1 отсутствует необходимый метод Exec().
Еще возможно нам понадобится компонент для вывода рисунков с прозрачным фоном. Пока приходится использовать Active_BMP, упоминаемый на безвременно почившем hare.ru. Этот компонент умеет отображать прозрачными только 2-х цветные bmp (по крайней мере только с ними у меня получилось добиться прозрачности), но за неимением лучшего... :-) (Если кто знает бесплатный ActiveX компонент для отображения gif с прозрачным слоем - скажите в форум или мыло)
Собственно для отправки почты из командной строки я уже полгода пользуюсь Postie, потому искать ничего нового не пришлось.

Приступим (установка и регистрация программ)

Установка WSH проблем не вызывает (конечно, если вы не попытаетесь установить версию для 9X/NT4 на 2000/XP, как я это сделал, причем осознал это только взявшись за статью - уже месяц сервер живет в этом режиме :-) ): запуск scripten.exe (scr56en.exe), ответы на все вопросы, перезагрузка.
Установка Ghost Script не требует даже перезагрузки. Единственный момент - от пытается по умолчанию установится в каталог %SystemDrive%\gs - я его устанавливал в %SystemDrive%\Tools\gs - так мне удобнее. (ниже в скобках я буду писать свои настройки, с которыми у меня работает живая система).
Для установки RedMon нужно его распаковать в некий каталог (%SystemDrive%\Tools\RedMon) и запустить setup.exe из него. В файлах readme.txt и redmon.hlp находится подробная информация по установке и стандартной настройке redmon.
Регистрация Active_BMP осуществляется распаковкой файлов в каталог (%SystemDrive%\Tools\OLE\ActiveBMP) и запуском из этого каталога "regsvr32 Bmp_1c.ocx".
В дальнейшем каталоги с RedMon и Active_BMP нам не понадобятся, так что про них смело можно забыть (но не удалять совсем с диска :-) ).
Postie устанавливается простым извлечение его в нужный каталог (%SystemDrive%\Tools\Postie).
Теперь нам необходимо настроить принтер. Для этого из папки принтеры выбираем "Добавить". Тип принтера - локальный, отказываемся от автоматического поиска и добавляем порт: тип порта: Redirect Port, имя: RPT1. На следующем шаге выбираем модель PS-принтера (в RedMon рекомендуется Apple LaserWriter II NT или Apple Color LaserWriter 12/600 если вы хотите цветное изображение). Я использовал Apple LaserWriter II NT, т.к. мне нужно было черно-белое изображение. Сразу после этого я переименовал принтер в более соответствующее его функциям название: "Send EMail". Теперь нам необходимо настроить порт. Для этого открываем настройки принтера, ищем страницу "Порты" и жмем кнопку "Конфигурировать порт".
Дальнейшие настройки отличаются от стандартных, описанных в redmon.hlp:

* "Redirect this port to the program:"="cscript.exe" (без кавычек, естественно),
* "Arguments for this programs are:"="Наш\Скрипт\С\Полным\Путем.js" (%SystemDrive%\Tools\gs\PrnUser.js) (в кавычках, если путь содержит пробелы),
* "Output:"="Program handles output"
* "Run:"="Hidden"
* "Run as user" снята (у меня вызывало ошибку, если установлено)
* "Shut down delay:"="300"


Кнопка "Log file" нужна во время отладки всей системы отправки почты, хотя можно оставить запись лога и в рабочем режиме - все равно он перезаписывается, а не накапливается.

Соглашения о настройках

Скрипт, который мы указали в настройках порта, принимает данные с принтера и согласно настройкам, сохраненным из внешней программы (1С или другой), отправляет его по почте как рисунок (в скрипте предусмотрены проверки на корректность значений). Поскольку единственное, что мы можем получить из печатного задания - это имя пользователя (%REDMON_USER%), то с каждым пользователем мы будем работать в его каталоге, при этом одновременная печать 2-х заданий от одного пользователя невозможна. (Если вам удастся передать в скрипт другую информацию из 1С, например: уникальный идентификатор задания или имя файла - сообщите мне). У меня используется самописный компонент SysTools для получения профиля пользователя по его имени. Поскольку он еще только в альфа-версии выкладывать не буду, если кому нужен - вышлю по почте. Итак, предположим, у нас есть каталог, в котором хранятся данные пользователей (%MyProfiles%\User1, %MyProfiles%\User2, ...). К личном каталоге пользователя мы будем создавать подкаталог SendMail для отправки почты.
Временные файлы для работы мы будем хранить во временном каталоге (переменная %TEMP% для системы, поскольку запускаться скрипт будет от имени Local service).
Все остальные настройки и пути к файлам заданы в переменных вначале скрипта - их можно (и нужно) изменить для себя.
Файл, в котором 1С сохраняет настройки называется %UserProfile%\SendMail\mail.ini и имеет следующую структуру: каждая строка - поле=значение, кроме поля BODY, которое обязательно идет последним и может быть растянуто на несколько строк.

Пишем программу

В этом разделе будут показаны и пояснены тексты нескольких модулей, входящих в демонстрационную конфигурацию. Скрипт на языке JavaScript здесь описан не будет, поскольку несоответствует тематике раздела. Надеюсь - комментариев внутри скрипта будет достаточно для пожелавших разобраться в его работе.
Поскольку в 1С не предусмотрена модульная организация программ, то сложные вещи я обычно строю по такой схеме: законченная функциональность - во внешней обработке, параметры в которую передаются через СписокЗначений, и вспомагательная процедура/функция в глобальном модуле, которая этот список заполняет из параметров. Так было сделано и здесь.
Функция запроса параметров отправки почты (кому, от кого, тема и пр.) в глобальном модуле выглядит так:

Код

// ===============================
// Предлагает изменить параметры отправки почты
// Возвращает имя файла настроек или пустую строку при неудаче
Функция глПараметрыОтправкиПочты(Заголовок,Кому,ОтКого,Копия="",
Тема="",Сообщение="",Запретить="", БезФормы=0) Экспорт
Перем Сп, Каталог, ИмяФайла, Т;

// Устанавливаем параметры обработки
Сп=СоздатьОбъект("СписокЗначений");
Сп.Установить("Заголовок",Заголовок);
Сп.Установить("Кому",Кому);
Сп.Установить("ОтКого",ОтКого);
//Сп.Установить("ОтКогоФирма","forget@about.it"); - адрес по умолчанию, если ОтКого не задан
Сп.Установить("Копия",Копия);
Сп.Установить("Тема",Тема);
Сп.Установить("Сообщение",Сообщение);
Сп.Установить("Запретить",Запретить);
Сп.Установить("ТихийРежим",БезФормы);
// Вызываем обработку подтверждения параметров
ОткрытьФормуМодально("Отчет", Сп, КаталогИБ()+"ExtForms\ПараметрыОтправкиПочты.ert");

// Если нажата "Отмена" - выходим
Если ПустоеЗначение(Сп)=1 Тогда Возврат ""; КонецЕсли;

// Считываем возвращенные значения
ОтКого=Строка(Сп.Получить("ОтКого"));
Кому=Строка(Сп.Получить("Кому"));
Копия=Строка(Сп.Получить("Копия"));
Тема=Строка(Сп.Получить("Тема"));
Сообщение=Строка(Сп.Получить("Сообщение"));
Попытка
Каталог=КаталогСистемногоПользователя();
Если ПустаяСтрока(Каталог)=1 Тогда Возврат ""; КонецЕсли; // Неизвестный пользователь

Каталог=Каталог+КаталогПочты;

// Ожидаем завершения предыдущей задачи
Ответ="Повтор";
Пока (ФС.СуществуетФайл(Каталог+ФайлФлага)=1) ИЛИ
(ФС.СуществуетФайл(Каталог+ФайлНастроек)=1) Цикл
ТекстВопроса=ТекущееВремя()+": Ожидается завершение задачи."+
РазделительСтрок+"Автоматический повтор через 5 секунд...";
Ответ=Вопрос(ТекстВопроса, "Повтор+Отмена", 5);
// Возможность прервать ожидание
Если Ответ="Отмена" Тогда Прервать; КонецЕсли;
КонецЦикла;
Если Ответ="Отмена" Тогда
ИмяФайла="";
Иначе
// Записываем параметры в файл
ИмяФайла=Каталог+ФайлНастроек;
Т=СоздатьОбъект("Текст");
Т.ДобавитьСтроку("TO="+ Кому);
Т.ДобавитьСтроку("FROM="+ ОтКого);
Т.ДобавитьСтроку("CC="+ Копия);
Т.ДобавитьСтроку("BCC="+ ОтКого);
Т.ДобавитьСтроку("SUBJ="+ Тема);
Т.ДобавитьСтроку("ORG="+ "Тестовая конфигурация Send E-Mail");
Т.ДобавитьСтроку("BODY="+ Сообщение);
Т.Записать(ИмяФайла);
КонецЕсли;
Исключение
Сообщить(ОписаниеОшибки(),"!!!");
Возврат "";
КонецПопытки;

Возврат ИмяФайла;
КонецФункции

[pagebreak]

В этой функции переданные параметры записываются в список значений, который передается внешней обработке ПараметрыОтправкиПочты.ert в подкаталоге ExtForms каталога базы данных. Запрос параметров имеет вид:



Возвращенные значения записываются в файл, параметры которого (путь, имя, и т.п.) заданы в конце глобального модуля.
В самой обработке ничего интересного нет: чтение параметров из списка, отображение и проверка параметров при нажатии кнопки Отправить. Если не заданы необходимые параметры (ОтКого, Кому) или адреса E-Mail указаны не правильно - будет выдано сообщение и форма не закроется.

Рассмотрим параметры вызова даной функции:

* Заголовок - заголовок формы, на рисунке - синяя надпись "Тестовый документ №3 от 30.04.04";
* Кому, ОтКого, Копия - E-mail или список E-Mail`ов (через ",");
* Тема, Сообщение - соответствующие параметры письма;
* Запретить - какие поля запрещены для редактирования (на рисунке - поле Тема);
* БезФормы - если 1: форма не отображается и при правильных параметрах письмо отправится автоматически.


Следующая функция вызывает эту и если все прошло успешно - вызывает внешнюю обработку для небольшой предподготовки таблицы при печати и отправки ее:

Код

// ======================================
// Запрос параметров, предподготовка таблицы и отправка почты
Функция глОтправитьПоПочтеРисунок(Таб, Знач Заголовок, Знач Кому, Знач ОтКого,
Знач Копия="", Знач Тема="", Знач Сообщение="",
Знач Запретить="", Знач БезФормы=0, Знач Масштаб=0) Экспорт
Перем Сп, Файл;

// Запрашиваем подтверждения параметров
Файл=глПараметрыОтправкиПочты(Заголовок,Кому,ОтКого,
Копия,Тема,Сообщение,Запретить,БезФормы);

Если ПустаяСтрока(Файл)=1 Тогда
Сообщить("Почта не была отправлена","!");
Возврат 0;
КонецЕсли;

// Устанавливаем значения для отправки и инициализируем отправку
Сп=СоздатьОбъект("СписокЗначений");
Сп.Установить("Таблица", Таб);
Сп.Установить("Масштаб", Масштаб);
ОткрытьФормуМодально("Отчет", Сп, КаталогИБ()+"ExtForms\ОтправитьКакРисунок.ert");

СТаб=СимволТабуляции;
глЗаписатьЛог("ОтправитьПоПочтеРисунок", Шаблон(
"ОтКого:[ОтКого]"+СТаб+"Кому:[Кому]"+СТаб+"Копия:[Копия]"+СТаб+"Тема:[Тема]"));
// В этот момент ушло на принтер, но возможно еще не обработалось
Сообщить("Отправляется. Ожидайте копию письма на адрес: "+ОтКого);
Возврат 1;
КонецФункции

Здесь уже большая функциональность перенесена на обработку. Она (обработка) вообще не открывается, только выполняет некоторые действия. Рассмортим параметры:

* Таб - Значение типа "Таблица", которую и будем печатать;
* Заголовок, Кому, ОтКого, Копия, Тема, Сообщение, Запретить, БезФормы - просто передаются в функцию глПараметрыОтправкиПочты и подробно рассмотрены в ней;
* Масштаб - масштаб печати таблицы. Если не задан - автомасштаб по ширине.


В обработке всего 2 процедуры: ПроверитьПараметр для проверки корректности переданных значений и ПриОткрытии, в которой подготавливается и печатается таблица. Выглядит весь модуль обработки так:

Код: (1c)

Код

Перем Принтер;
// ======================================
Функция ПроверитьПараметр(Сп, Назв, ВсеОк, Обязат=1, Умолч="", Тип="")
Зн=Сп.Получить(Назв);
Если (ПустоеЗначение(Зн)=1) Тогда
Если (Обязат=1) Тогда
ВсеОк=0;
Сообщить(Шаблон("Не задан обязательный параметр: '[Назв]'"),"!");
Иначе
Зн=Умолч;
КонецЕсли;
КонецЕсли;
Если ПустаяСтрока(Тип)=0 Тогда
ТипЗн=ТипЗначенияСтр(Зн);
Если НРег(ТипЗн)<>НРег(Тип) Тогда
ВсеОк=0;
Сообщить(Шаблон("Для '[Назв]' не верен тип ('[ТипЗн]'). Ожидаемый тип: '[Тип]'"),"!");
КонецЕсли;
КонецЕсли;

Возврат Зн;
КонецФункции
// ======================================
Процедура ПриОткрытии()
// Проверим корректность вызова
Путь=""; Назв="";
РасположениеФайла(Путь, Назв);
Назв=СтрЗаменить(Назв,".ert","")+": ";
СтатусВозврата(0); // а вообще не нужно открывать!
ВсеОк=1;
Если Форма.МодальныйРежим()=0 Тогда
Сообщить(Назв+"Запустите обработку в модальном режиме!","!");
ВсеОк=0;
КонецЕсли;
Сп=Форма.Параметр;
Если ТипЗначенияСтр(Сп)<>"СписокЗначений" Тогда
Сообщить(Назв+"В качестве параметра необходим СписокЗначений!","!");
ВсеОк=0;
КонецЕсли;
Если ВсеОк=0 Тогда Возврат; КонецЕсли;

Таб=ПроверитьПараметр(Сп, "Таблица", ВсеОк, 1, "", "Таблица");
Масштаб=Число(ПроверитьПараметр(Сп, "Масштаб", ВсеОк, 0, -1));

Если ВсеОк=0 Тогда Возврат; КонецЕсли;
Состояние("Обработка таблицы...");
Таб.Область().ЦветТекста(0); // Все черное, кроме...
// Пробежимся по всем ячейкам и поменяем контроль=авто,
// т.е. красный цвет на отрицательных значениях
// на черный цвет
Для И1=1 По Таб.ВысотаТаблицы() Цикл
Для И2=1 По Таб.ШиринаТаблицы() Цикл
Обл=Таб.Область(И1,И2,И1,И2);
Если Обл.Контроль()=5 Тогда Обл.Контроль(1);
ИначеЕсли Обл.Контроль()=6 Тогда Обл.Контроль(3);
КонецЕсли;
КонецЦикла;
КонецЦикла;
// Чтобы параметры печати не путались с другими - даем им имя
Таб.Опции(,,,,"Как рисунок "+Принтер,,,);
// Только книжная ориентация
Таб.ПараметрыСтраницы(1,,,5,5,5,5,,,,,Принтер);
// Автомасштабирование по ширине, если явно не задан масштаб
Если Масштаб>0 Тогда Таб.ПараметрыСтраницы(,Масштаб,,,,,,,,,,);
Иначе Таб.ПараметрыСтраницы(,,,,,,,,,1,,); КонецЕсли;
// Только 1 экземпляр
Таб.ЭкземпляровНаСтранице(1);
Таб.КоличествоЭкземпляров(1);
// Вперед!
Таб.Напечатать(0);
КонецПроцедуры
Принтер="Send EMail";

Вот практически и все, что касается программы в 1С. Некоторые сервисные функции, которые не были описаны здесь, можно посмотреть в примере конфигурации. Таким образом ничего сложного здесь нет. Больше сложностей вызывает настройка системы для правильной работы. Выглядит отправленный документ приблизительно так:



Замечания в процессе эксплуатации

Сразу скажу - в боевом режиме система работает недолго (с 15.04.2004), но даже за это время были замечены некоторые "особенности" работы:

* Формат tiff оказался не таким уж стандартным. Потому пришлось его заменить на png. Сделать это нужно в двух местах: в суффиксе исходящего файла в скрипте (чтобы Postie правильно поставил его Content-Type:) и в настройках GS (параметр -sDEVICE=pngmono собственно и задает выходной формат файла). Можно заменить и на еще более стандартный jpeg, но при этом сильно вырастет размер файла. К сожалению gif уже не поддерживается в текущей версии GS (как я понял из документации - из-за возможных проблем с лицензированием этого формата). Можно добится поддержки gif, выдрав ее из исходников предыдущих версий и перекомпилировав текущую, но я пока этого не делал. Возникла мысль передавать в настроечном файле (%UserProfile%\SendMail\mail.ini) параметры, как отправлять изображения (jpeg, tif, png; color/mono; ...) и в скрипте динамически менять.
* PostScript шрифты, идущие в поставке GS, не так хорошо "вылизаны", как TrueType. Потому русские буквы выглядят жирнее англиских. Пока жалоб на это не было :-)
* В новой версии Postie у меня почему-то не работает ключ -bcc (ошибки не выдает, но и не отправляет по указанным адресам). Так и не разобрался - пришлось откатится на старую версию (POSTIE Version 4)
* Хотя ломать ничего и не пришлось, но все-таки мы нарушаем лицензию Postie, который "free for personal use". Может кто знает другую программу отправки почты из коммандной строки?

Благодарности

Моему любимому директору - за неуемный ум и новые интересные задания.
Вадиму Ханасюку - за неопубликованную здесь, но полезную компоненту SysInfo (получение каталога профиля пользователя по имени) и помощь в поиске нужного софта.
Всем сотрудникам, которые не мешали работать.

В этой статье приведу пример реализации древовидного меню на JavaScript с помощью PHP.

---

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

Для примера возьмём бесплатный скрипт для отображения древовидного меню Tigra Tree Menu, который поддерживается: MS IE, Netscape на платформах Windows 95/98/ME/2000/XP и Mac OS 8/9/X по адресу http://www.softcomplex.com/products/tigra_tree_menu/

Скачав и распаковав архив, мы увидим 3 яваскриптовых файла:
tree.js (сам скрипт отображения и формирования меню), tree_tpl.js(настройки самого меню и картинок к нему), а также
tree_items.js (сама структура меню), который нам и нужно заменить на PHP скрипт, который возьмёт наши данные из базы.

Создайте таблицу в базе данных:

Код

CREATE TABLE `menu` (
`id` int(11) NOT NULL auto_increment,
`pid` int(11) NOT NULL default '0',
`name` varchar(255) NOT NULL default '',
PRIMARY KEY (`id`)
);

id - идентификатор пункта меню;
pid - принадлежность к ветке меню (если, например, pid = 12, значит, этот пункт является подуровнем пункта, у которого id = 12);
name - название самого пункта меню.

Ну, и заполним немного данными для демонстрации:

Код

INSERT INTO `menu` (`id`, `pid`, `name`) VALUES (1, 0, 'qwwwq');
INSERT INTO `menu` (`id`, `pid`, `name`) VALUES (2, 0, 'qwwwq 2');
INSERT INTO `menu` (`id`, `pid`, `name`) VALUES (11, 8, 'test');
INSERT INTO `menu` (`id`, `pid`, `name`) VALUES (3, 0, 'qwwwq 3');
INSERT INTO `menu` (`id`, `pid`, `name`) VALUES (12, 11, 'test 2');
INSERT INTO `menu` (`id`, `pid`, `name`) VALUES (7, 1, 'eewew 1');
INSERT INTO `menu` (`id`, `pid`, `name`) VALUES (8, 1, 'eewew 2');
INSERT INTO `menu` (`id`, `pid`, `name`) VALUES (9, 1, 'eewew 3');
INSERT INTO `menu` (`id`, `pid`, `name`) VALUES (13, 9, 'test3');

Далее соединимся с базой данных и напишем рекурсивную функцию для формирования такой структуры, как в файле tree_items.js.

Пишем саму функцию:

PHP - Код

function get_tree($parent_id = 0) { 
      global $out; 
      $query = "SELECT * FROM menu WHERE pid = '$parent_id'"; //начинаем с нулевого уровня
      $result = mysql_query($query); 
      while ($row = mysql_fetch_array($result)) { 
            $out .= "['{$row['name']}','data.php?id={$row['id']}&pid={$row['pid']}',\n";
            get_tree($row['id']);  //идём дальше "внутрь" если 
//есть у данного id подуровни
            $out .= "],";
      } 
      return $out;  //возвращаем сформированую структуру. 
//Не хватает только начальной строки и конечной
}

//Соединяемся с базой данных
$link = mysql_connect("hostname", "user", "password") or die(mysql_error());
mysql_select_db("dbname", $link) or die(mysql_error());

//Начинаем с начальной строки
$tree_items = "[ ['HOME', 'index.php',";
//Вызываем функцию для построения меню
$tree_items .= get_tree();
//Заканчиваем структуру конечной строкой
$tree_items .= "] ];"; //Всё, структура для меню получена

Теперь в нужном нам месте выводим сформированное меню:

PHP - Код

print '< script language="JavaScript"
   var TREE_ITEMS = '.$tree_items.'; //оздаём массив и 
//подставляем в него сформированные ранее данные
   new tree (TREE_ITEMS, tree_tpl); //вызываем функцию яваскрипт, 
//которая разберёт нашу структуру и отрисует наше меню
< /script >';

P.S. Для того, чтобы меню работало, не забудьте на странице, сразу после тега < body >, вставить нужные скрипты "Tigra Tree Menu":

Код

< script language="JavaScript" src="путь_к_каталогу_с_скриптами/tree.js" >< /script >
< script language="JavaScript" src="путь_к_каталогу_с_скриптами/tree_tpl.js" >< /script >

Ну вот и всё. Надеюсь, что кому-нибудь это пригодится.