IGROMANIA.RU
Registration
MoreLess
Популярные за неделю
Популярные за месяц
«Викинг». The Return of the (Vi)king Кино > «Викинг». The Return of the (Vi)king
«300 спартанцев» Зака Снайдера и «Гладиатор» Ридли Скотта успешны и узнаваемы, но ни капли ни историчны. Российский «Викинг» идет другим путем.
Комментариев: 56
Презентация Nintendo Switch. Самое главное об играх для новой консоли Спец > Презентация Nintendo Switch. Самое главное об играх для новой консоли
Nintendo заявила, что в разработке находится более восьмидесяти игр для консоли Switch. Рассказываем о тех, что выйдут в ближайшее время.
Комментариев: 31
«Труп выглядит здоровее». Четвертый сезон «Шерлока» Кино > «Труп выглядит здоровее». Четвертый сезон «Шерлока»
Сценаристы «Шерлока» обещали, что четвертый сезон станет пугающим и шокирующим. Разбираемся, все ли у них получилось.
Комментариев: 30
Выбор имеет значение. Превью Vampyr В разработке > Выбор имеет значение. Превью Vampyr
Смогут ли авторы Remember Me и Life is Strange создать полноценную ролевку с открытым миром? Делайте ваши ставки, господа!
Комментариев: 16
«Press X to Win», или История Quick Time Event Спец > «Press X to Win», или История Quick Time Event
История возникновения и развития ваших нелюбимых всплывающих кнопочек.
Комментариев: 15
Battlefield 1. Фронтовые записки Спец > Battlefield 1. Фронтовые записки
Делимся опытом выживания в сетевом режиме главного боевика про первую мировую.
Комментариев: 8

По вашим многочисленным просьбам мы возвращаемся к теме веб-дизайна. Сегодня мы поговорим о явлении, к которому у большинства интернет-пользователей выработалась стойкая идиосинкразия. Речь о 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><input type="button" value="Click here" onClick="alert('Yo, man')"></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><form><input type="button" value="OK" onclick='sum()'></form>

Пошагово: объявляется функция 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></A>

Вначале идет указание на целевой документ (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 с соответствующей пометкой в теме письма.

Для поклонников серии Yakuza 0 станет еще одной отличной игрой, а для новичков — билетом в мир японской мафии.
Карл Фэйрберн вспомнил, что он снайпер.
Порой привлечь внимание аудитории можно только дельным анонсом. Игры, попавшие в эту номинацию, показывают, как нужно формировать первое впечатление.
Смогут ли авторы Remember Me и Life is Strange создать полноценную ролевку с открытым миром? Делайте ваши ставки, господа!
Комментарии к статьям
Войти и прокомментировать                Войти под логином игромании | Зарегистрироваться
Главные новости
Самые комментируемые статьи за месяц:
Кино > «Викинг». The Return of the (Vi)king
Кино > Ассасины и тамплиеры на большом экране. Фильм «Кредо убийцы»
Спец > Лучший мой подарочек — это Xbox One S!
Спец > Достать геймпад и плакать: игры, берущие за душу: от Ori and the Blind Forest и This War Of Mine до BioShock Infinite и Life is Strange
Спец > Презентация Nintendo Switch. Самое главное об играх для новой консоли
Кино > «Труп выглядит здоровее». Четвертый сезон «Шерлока»
Рецензии > Соборы в небесах. Обзор Space Hulk: Deathwing
Железный цех > В ожидании ZEN. Тестируем игровой компьютер Edelweiss MSI Edition на базе AMD 970
Спец > На скорости 160 км/ч, или Как работают гоночные игры
Прямым текстом > Darksiders: Warmastered Edition — жизнеспособное чудище Франкенштейна
Поиск по сайту Игровые платформы: PC  |   X360  |   XONE  |   PS3  |   PS4  |   Wii  |   Wii U  |   PSP  |   Vita  |   NDS  |   3DS  |   Android  |   iOS
1997-2017 ООО «Игромедиа». Мнение авторов и посетителей сайта может не совпадать с мнением редакции. Полное или частичное воспроизведение материалов сайта и журнала допускается только с согласия редакции. Для прямого контакта с редакцией пишите на основную почту «Игромании.ру».
Пользовательское соглашение

КОММЕРЧЕСКИЕ ССЫЛКИ:
Механизм выбора платформы позволяет отображать на страницах информационного портала материалы, относящиеся строго к выбранным платформам.

Каждый пользователь индивидуально выбирает для себя интересующие его игровые платформы.
 
Rambler's Top100 Яндекс цитирования