По вашим многочисленным просьбам мы возвращаемся к теме веб-дизайна. Сегодня мы поговорим о явлении, к которому у большинства интернет-пользователей выработалась стойкая идиосинкразия. Речь о JavaScript. Увы, в большинстве случаев стереотипы относительно этого языка обоснованы: стараниями «дизайнеров», пишущих розовым по желтому, пользователи не отзываются о JavaScript иначе как в непечатных выражениях. При этом сам язык крайне удобен, гибок и позволяет реализовывать множество идей, воплотить которые в жизнь при помощи HTML практически невозможно.

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

Script. Java Script

Язык JavaScript был создан фимой Netscape , и, несмотря на сходство названия, он практически не имеет ничего общего с детищем компании Sun — языком Java. Java была взята за основу при разработке JavaScript, но конечный продукт мало чем походил на родителя. Для получения статуса «язык программирования» JavaScript не хватает реализации таких мелочей, как наследование, инкапсуляция и полиморфизм. Не стоит в ужасе перелистывать страницу — этих кошмаров здесь нет! JavaScript — это тесно интегрированный c HTML язык управления сценариями отображения HTML-документа. Он обладает очень широкими возможностями, и, на наш взгляд, именно из-за этого снискал такую нехорошую славу. Но для изучения он достаточно легок — именно из-за отсутствия излишних наворотов.

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

< body onload=‘alert(“Yo, man!”)’>

Итак: внутри тэга < body> вставлен обработчик события onload , реализующий вызов события сразу после загрузки страницы. В данном случае он вызывает функцию Alert. Посмотрите на скрипт в действии, просто вставив его в HTML-файл. А о событиях мы упомянем чуть ниже.

Но стандартно все же используют тэги < script> и < /script>, записывая сценарий между ними. Эти парные тэги могут быть вставлены в любом месте HTML-документа, но внутри этих тэгов нельзя использовать стандартные HTML-тэги, за исключением комментариев. В таком случае вызов необходимого действия (функции) происходит похожим образом:

< body onload=’function (myfunction)'>

Где myfunction — название ранее описанной функции.

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

function myFunc(параметры) {тело функции} вызов функции.

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

Обработчики

Плавно переходим к обработчикам. События являются элементами, привносящими интерактивность, и инициируются действиями пользователя. В момент наведения курсора на ссылку инициируется событие MouseOver , а в момент нажатия — Click и тут же MouseDown. Заставить скрипт реагировать на события можно при помощи обработчиков этих самых событий. Чаще всего название обработчика формируется так: on+название события. Например onClick, onMouseOver. Простейший пример:

< form>

Здесь был использован стандартный компонент формы — кнопка с обработчиком события. Попробуйте поэкспериментировать с обработчиками событий ( onMouseOver , onMouseDown , onMouseOut ). Небольшое пояснение я приведу относительно синтаксиса в последнем скрипте: мы использовали два различных типа кавычек, чтобы ограничить имя функции и простого текста. Если бы использовались одинаковые кавычки, то интерпретатор (обработчик скрипта) не смог бы разобраться, какая часть относится к событию, а какая нет. Если необходимо использовать только одни кавычки, то их форма не играет роли.

Переменные

В следующем примере за исключением функций и обработки событий мы коснемся типичной для всех языков программирования темы — переменных. Переменные можно сначала описать (объявить), а потом применять либо сразу применять, не утруждая себя их описанием. Объявление переменной выглядит следующим образом: var name , где var — от слова variable — зарезервированное слово для обозначения переменной, а name — имя переменной. Негласным правилом считается присваивание разным переменным разных имен — меньше будет ошибок. Итак…

< script language=“JavaScript”>

function sum() {

var a =2;

var b =3;

var itogo =a+b;

alert(itogo); }

< /script>

Пошагово: объявляется функция sum() — здесь пустые скобки, потому что у функции нет дополнительных параметров, но скобки обязательны. Потом идет блок описания переменных; а присваивается значение 2 , а переменной b, соответственно, 3. Затем следующая переменная itogo (именем переменной может быть любое сочетание букв и цифр) описывается как математическое действие a+b , и броузер помещает в эту переменную результат вычислений. И в заключение функции идет вызов выпадающего окна alert. Чтобы скрипт заработал, надо включить функцию, вызвать ее. И вызов привязан к событию onClick. При нажатии на кнопку Sum выводится результат вычислений, хранимый в переменной itogo.

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

< A HREF=“where.htm”

onMouseOver=“document.manual.src=‘button_ov.jpg’; return true”

onMouseDown=“document.manual.src=‘button_dn.jpg’; return true”

onMouseOut=“document.manual.src=‘button.jpg’; return true” >

< IMG SRC=“button.jpg” NAME=“where” BORDER=0>

Вначале идет указание на целевой документ ( where.htm ), затем вопреки порядку строк (мы уже говорили, что браузер сначала читает весь документ, а потом работает с ним) загружается картинка button.jpg , ей присваивается имя where , ну и не стоит забывать указать отсутствие рамочки ( border=0 ). Теперь обрабатывается интерактивная часть: при наведении на изображение кнопки ( button.jpg ) происходит событие MouseOver и включается соответствующий обработчик, загружающий картинку button_ov.jpg. При нажатии на кнопку срабатывает onMouseDown , загружающий следующую картинку button_dn.jpg. И в конце концов указывается возврат в исходное состояние, когда курсор покидает границы изображения ( onMouseOut ).

Стой, кто идет?!

Мы подошли к заключительной и самой интересной части статьи — созданию парольной защиты на каком-либо HTML-документе сайта. Увы, регистрацию силами JavaScript создать невозможно. Самое слабое место языка — невозможность чтения-записи в файл. За исключением, разве что, cookie. Но «печенье» чаще всего отключают (и правильно делают!), да и размер их редко когда выходит за 16 Кб.

Как обычно происходит санкционированный вход в защищенный документ? Перво-наперво глазам пользователя предстает запрос на ввод пароля… В JavaScript это будет выглядеть как строка var name = prompt(“Enter your User Password:”, “”). Любой запрос JavaScript — это переменная prompt… Но не будем торопиться и рассмотрим общую структуру защищенного документа (все внимание на схему).

Все не так уж сложно. Давайте разберемся. В первом блоке (блок переменных) мы объявляем три переменные: таблицу символов (таблицей она названа чисто условно — это так называемая Alphanumeric table. В ней записываются числа и буквы)

var c1=“abcdefghijklmnopqrstuvwxyz”;

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

var c2=“c1.substring(12,13)+c1.substring(0,1)+c1.substring(13,14)+c1.substring(8,9)+ c1.substring(0,1)”

Здесь зашифровано слово Mania. Чтобы взять определенный символ, надо сосчитать, какой он по счету в Alphanumeric table, и записать substring , указав номер символа до него и, через запятую, его номер в ряду. Буква b записывается как c1.substring(1,2) , где с1 — имя переменной, содержащей таблицу символов, substring указывает на то, откуда надо считывать данные, а про числа рассказано в предыдущем предложении.

Теперь указываем адрес, куда надо перейти, если пароль верный. Каждый символ в адресе можно зашифровать! Для этого только надо расширить Alphanumeric table, включив туда двоеточие, использовать большие буквы и спецсимволы.

c3=“http://www.yoursite.ru/index.html”;

Теперь оформляем запрос. Введенные данные записываются в переменную prompt :

var name = prompt(“Enter your User Password:”, “”)

Далее идет проверка на соответствие введенных данных с истинным паролем (он хранится в переменной c2 ). Все, что стоит в следующем листинге после //, — комментарий, его вводить в программу не надо.

if (name == c2) { // name равно ли паролю?

confirm(“Access granted. Click [ OK ] to proceed.”); //если да, то жмите OK

location.href=c3; } //и идем по указанному адресу (указан в переменной c3)

else { //если нет, то

alert(“ACCESS DENIED! Password '”+name+“’ is incorrect!”); //выскакивает окошко

history.back(); } //и идем на предыдущую страницу.

* * *

Настоятельно рекомендуем зашифровать полученный файл программой HTMLEncryptor. И как дополнительную меру безопасности — поставить любой текст в статусную строку. Это единственный случай, когда такое действие оправдано: никто не успеет разглядеть, куда ведет ссылка из переменной c3. Более усовершенствованную версию скрипта вы сможете найти на компакте, равно как и небольшую подборку наиболее интересных JavaScript’ов.

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