Знакомство с языком JavaScript: Часть 2. События, cookie-файлы и таймеры

Язык JavaScript завоевал огромную популярность и сегодня является одним из наиболее используемых языков в Интернете. Он может использоваться на различных платформах и Web-браузерах и ни в чем не уступает серверным языкам программирования. Для него имеется множество отличных библиотек, но иногда они настолько "далеки" от исходного языка, что начинающим программистам не хватает знания основ JavaScript. Эта статья, вторая в серии, продолжает знакомство с основными возможностями JavaScript: событиями, выражениями try … catch, использованием cookie-файлов и таймеров.

Крис Хэдлок, Web-разработчик/дизайнер, Studio Sedition

Фото Криса ХэдлокаКрис Хэдлок (Kris Hadlock) занимается разработкой и Web-дизайном по контрактам с 1996 года. Работал над проектами для таких компаний, как SPIN Magazine, IKEA, United Airlines, JP Morgan Chase, GoDaddy Software и Fire Mountain Gems. Автор книг Ajax for Web Application Developers (издательство Sams) и The ActionScript Migration Guide (издательство New Riders), а также журналист и писатель, публиковавшийся на многочисленных Web-сайтах и в журналах по дизайну, в том числе Peachpit.com, InformIT.com и Practical Web Design. Крис – основатель студии Web-дизайна и разработки программного обеспечения www.studiosedition.com, специализирующейся в области синтеза формы и функциональности.



13.04.2012

В первой статье "Знакомство с языком JavaScript. Часть 1: Основы" рассматривалась фундаментальная функциональность JavaScript, начиная с создания тегов script, использования комментариев, подключения JS-файлов к HTML-документам, объявления переменных и функций и использования операторов и массивов, условных выражений и циклов. Эта статья продолжает знакомить читателей с базовыми принципами JavaScript, чтобы помочь новичкам понять основы языка. Базовые принципы, представленные в этой статье, помогут лучше понять, какие библиотеки и когда стоит использовать, и, возможно, пригодятся при разработке собственных библиотек. По ходу статьи приводятся примеры кода, объясняющие аспекты функционирования JavaScript.

Наработка навыков использования JavaScript

Эта статья является частью курса по развитию навыков использования JavaScript. Дополнительную информацию можно найти в полном руководстве по JavaScript.

События

В JavaScript события являются "катализатором" для добавления любых интерактивных возможностей на Web-страницу. С каждым HTML-элементом связаны события, которые можно использовать для активации JS-кода. Например, для поля ввода доступен целый ряд событий. Событие focus может активировать JS-код, когда пользователь устанавливает в поле курсор мыши или переводит на него фокус клавишей табуляции; событие blur может активировать JS-код, когда пользователь выводит курсор из поля или перемещает фокус в другое место клавишей табуляции. Фактически к возникновению события можно привязать любой код. Например, событие blur можно использовать для запуска кода, который проверяет корректность введенных в поле данных, и, если данные некорректны, выдает пользователю сообщение об ошибке.

В следующем примере кода события focus и blur используются для отображения в поле ввода текста по умолчанию:

<input type="text" name="email" value="введите адрес email" 
   onfocus="this.value = '';" onblur="if(this.value == '') 
   this.value = 'введите адрес email';" />

В этом примере у текстового поля есть значение по умолчанию, поэтому при просмотре в Web-браузере в поле будет отображаться строка "введите адрес email". Когда пользователь устанавливает курсор в это поле или перемещает в него фокус, возникает событие focus, и первоначальный текст удаляется, а вместо него выводится пустая строка. Если же пользователь покидает это поле, то с помощью события blur возвращается первоначальный текст или остается текст, введенный пользователем.

C каждым HTML-элементом ассоциируются определенные события. В таблице 1 приведен список наиболее часто используемых HTML-элементов и связанных с ними событий.

Таблица 1. Стандартные элементы и связанные с ними события
ЭлементСобытия
bodyonload, onunload
inputonfocus, onblur, onchange, onkeydown, onkeypress, onkeyup
formonsubmit
imgonmouseover, onmouseout, onclick

try...catch и throw

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

Обработка ошибок с помощью try...catch

catch-фрагмент также включает в себя параметр по умолчанию, содержащий объект error (ошибка). В этом объекте находится существенная информация об ошибке, возникшей в try-фрагменте. У объекта error есть два свойства: message (сообщение) и line (строка). В message находится текст с информацией о возникшей ошибке, а в line – номер строки, на которой возникла ошибка. В листинге 1 приведен пример try – catch блока, в котором объект error используется для вывода сообщения и номера строки. Конечно, эта информация имеет смысл только при отладке, но иногда эти свойства могут дать пользователю информацию об ошибке независимо от того, сможет Web-браузер обработать ошибку или нет.

Листинг 1. Использование объекта error в try...catch блоке для отладки ошибки
try
{
      // попытка выполнения кода приводит к возникновению ошибки
}
catch(err)
{
   var txt = err.message +'\n';
   txt += err.line;
   alert(txt);
}

Создание исключительных ситуаций с помощью throw

Схема try … catch предоставляет отличные возможности для обработки ошибок, но с помощью выражения throw можно достичь ещё большего. Это выражение позволяет создавать исключительные ситуации для ошибок в зависимости от определенных условий, что обеспечивает отличную возможность создавать более "дружественные" сообщения об ошибках, точные и понятные пользователям. В листинге 2 показано, как использовать throw для создания исключительной ситуации в зависимости от условия в try-фрагменте try … catch блока.

Листинг 2. Использование throw для создания исключительной ситуации
<script type="text/javascript">
var x=prompt("К какому стилю музыки принадлежат Led Zeppelin?","");
try
{ 
   if(x != 'rock and roll')
   {
   throw "Err1";
   }
}
catch(er)
{
   if(er=="Err1")
   {
   alert("К сожалению, вы не правы.");
   }
}
</script>

Необходимо помнить, что слова try, catch и throw должны писаться в нижнем регистре: при использовании верхнего регистра возникнет ошибка JavaScript.


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

Окно для вывода информации

Первоначальное название окон данного типа – alert box, т.е. окно для вывода предупреждений, но зачастую эти окна используются для вывода ошибок или другой важной информации, а не только для предупреждений. Сегодня alert-окна часто применяются при отладке JS-кода, а вот практика использовать их по "прямому" назначению считается устаревшей. При использовании Web-браузера Mozilla Firefox, Apple Safari или Google Chrome для отладки можно использовать файл console.log. По сути дела alert-окна применяются в тех случаях, когда другие приемы не помогли. Создавать alert-окна очень просто: достаточно вызвать функцию alert и передать ей аргумент, после этого будет открыто окно, содержащее переданный текст. Например, можно вывести строку или значение переменной, передав её в качестве аргумента; подобный прием обычно используется в ходе отладки JS-сценариев. Ниже приведен простой пример использования функции alert для создания alert-окна:

alert("здесь может быть переменная или строка");

Окно для подтверждения действий

Окна данного типа (confirm boxes) используются для подтверждения выбора, сделанного пользователем при работе с Web-сайтом. Например, при разработке Web-приложения, в котором пользователь может удалить свою учетную запись, стоит попросить пользователя подтвердить свой выбор, прежде чем он сможет продолжить отправку запроса.

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

if(confirm("нажмите для продолжения работы"))
{
    alert('вы нажали OK');
}
else
{
    alert('вы нажали Отмена');
}

Окно для ввода информации

Когда необходимо быстро задать пользователю вопрос и получить от него ответ, можно воспользоваться окном для ввода информации (prompt box). Сегодня Web-программисты в основном используют специально оформленные всплывающие окна. Тем не менее окна для ввода информации по-прежнему используются, особенно в процессе отладки. Для открытия подобных окон используется функция prompt, которая принимает на вход два параметра. Первый параметр – это строка с вопросом или выражением, требующим ответа от пользователя; второй параметр – это строка с первоначальным значением для текстового поля, имеющегося в окне. Первоначальное значение можно не указывать, также его можно изменить по ходу выполнения сценария. Ниже показан пример функции prompt, которая задает вопрос пользователю, и функции alert, которая выводит результат, полученный из функции prompt.

var response=prompt("назовите свою любимую группу?","Led Zeppelin");
if (response!=null && response!="")
{
   alert("response: "+ response);
}

Использование cookie-файлов

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

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

document.cookie =
  'cookiename=cookievalue; expires=Sat, 3 Nov 2001 12:30:10 UTC; path=/'

Первый фрагмент строки сохраняется в cookie в виде пары имя–значение: cookiename=cookievalue. Эта последовательность отделяется точкой с запятой (;) от второй части. Вторая часть строки содержит дату окончания срока годности в необходимом формате и отделяется точкой запятой от третьей, последней части, в которой содержится путь.

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

alert(document.cookie);

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

Листинг 3. Функция для получения значения cookie
function getCookie(c_name)
{
var i,x,y;
var cookieArray = document.cookie.split(";");
for (i=0;i<cookieArray.length;i++)
{
  x = cookieArray[i].substr(0,cookieArray[i].indexOf("="));
  y = cookieArray[i].substr(cookieArray[i].indexOf("=")+1);
  x = x.replace(/^\s+|\s+$/g,"");
  if(x == c_name)
  {
	  return unescape(y);
	  }
	}
}
alert(getCookie('cookiename'));

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


Работа с таймерами

В JavaScript имеется несколько функций, позволяющих выполнять определенные действия по расписанию. К этим функциям относятся:

  • setInterval
  • clearInterval
  • setTimeout
  • clearTimeout

Функция setInterval

В некоторых ситуациях необходимо несколько раз последовательно выполнить один и тот же сценарий без участия пользователя. Функция setInterval позволяет с легкостью сделать это. На вход этой функции подаются два обязательных параметра и один необязательный. В первом аргументе code содержится код, который необходимо выполнить несколько раз; во втором аргументе milliseconds задается интервал в миллисекундах между двумя последовательными вызовами исполняемого JS-кода. Третий, необязательный, параметр argument - это аргумент, который будет передан функции, вызываемой через параметр code. Имейте в виду, что длительность интервала между вызовами устанавливается в миллисекундах. Поэтому, если необходимо вызывать код каждую секунду, следует использовать значение 1000 (1000 миллисекунд = 1 секунде). В таблице 2 приведен список параметров функции setInterval.

Таблица 2. Параметры, которые можно использовать при вызове функции setInterval
ПараметрОбязательный или НеобязательныйОписание
codeОбязательныйJS-код, который будет выполняться функцией setInterval; это может быть фрагмент кода или вызов метода.
millisecondsОбязательныйДлительность интервала (в миллисекундах) между последовательными вызовами кода.
argumentНеобязательныйПолезный параметр, использующийся для передачи аргумента в функцию, которая содержится в параметре code.

Ниже представлен пример использования функции setInterval для вызова другой функции каждые 10 секунд с передачей ей аргумента. Значение аргумента затем может быть считано внутри исполняемой функции. Аргумент может быть переменной, объектом или простой строкой.

setInterval(myFunction, 10000, 'sample');
function myFunction(myArg)
{
   alert('значение аргумента, переданного в функцию myFunction: '+ myArg);
}

Для прерывания серийного выполнения тоже существует функция.

Функция clearInterval

Для остановки выполнения используется функция clearInterval. Однако при запуске серии необходимо указать имя переменной, чтобы потом использовать её в качестве параметра при вызове clearInterval. В следующем примере показано, как использовать при вызове функции clearInterval переменную, значение которой было установлено ранее при вызове функции setInterval.

var myInterval = setInterval(myFunction, 10000, 'sample');
function myFunction(myArg)
{
   alert('значение аргумента, переданного в функцию myFunction: '+ myArg);
   clearInterval(myInterval);
}

Как видно, в примере объявляется переменная myInterval, которой присваивается значение, возвращенное функцией setInterval. Затем эту переменную можно использовать при ссылке на функцию setInterval и изменить её или остановить серийное выполнение с помощью функции clearInterval. В представленном примере функция myFunction выполняется только один раз, так как уже при её первом вызове вызывается функция clearInterval и аннулирует серийное выполнение.

Функция setTimeout

Функция setTimeout похожа на функцию setInterval тем, что она исполняет код или другую функцию в зависимости от определенных временных условий. Параметры этой функции также совпадают с параметрами функции setInterval (см. таблицу 2). Основное отличие функции setTimeout заключается в том, что функция выполняется только один раз, а не серийно. Ниже показано, как с помощью функции setTimeout организовать вызов другой функции через 10 секунд.

setTimeout(myFunction, 10000, 'sample');
function myFunction(myArg)
{
   alert('значение аргумента, переданного в функцию myFunction: '+ myArg);
}

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

Функция clearTimeout

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

var myTimeout = setTimeout(myFunction, 10000, 'sample');
function myFunction(myArg)
{
   alert('значение аргумента, переданного в функцию myFunction: '+ myArg);
   clearTimeout(myTimeout);
}

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


Заключение

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

Ресурсы

Научиться

Получить продукты и технологии

  • После изучения основ языка JavaScript можно перейти к изучению библиотеки jQuery library, использование которой позволяет ускорить процесс разработки.
  • Dojo Toolkit – это модульная JS-библиотека с открытым кодом, полезная при разработке мультиплатформенных приложений и Web-сайтов на основе JavaScript и Ajax.

Комментарии

developerWorks: Войти

Обязательные поля отмечены звездочкой (*).


Нужен IBM ID?
Забыли Ваш IBM ID?


Забыли Ваш пароль?
Изменить пароль

Нажимая Отправить, Вы принимаете Условия использования developerWorks.

 


Профиль создается, когда вы первый раз заходите в developerWorks. Информация в вашем профиле (имя, страна / регион, название компании) отображается для всех пользователей и будет сопровождать любой опубликованный вами контент пока вы специально не укажите скрыть название вашей компании. Вы можете обновить ваш IBM аккаунт в любое время.

Вся введенная информация защищена.

Выберите имя, которое будет отображаться на экране



При первом входе в developerWorks для Вас будет создан профиль и Вам нужно будет выбрать Отображаемое имя. Оно будет выводиться рядом с контентом, опубликованным Вами в developerWorks.

Отображаемое имя должно иметь длину от 3 символов до 31 символа. Ваше Имя в системе должно быть уникальным. В качестве имени по соображениям приватности нельзя использовать контактный e-mail.

Обязательные поля отмечены звездочкой (*).

(Отображаемое имя должно иметь длину от 3 символов до 31 символа.)

Нажимая Отправить, Вы принимаете Условия использования developerWorks.

 


Вся введенная информация защищена.


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=40
Zone=Web-архитектура, SOA и web-сервисы
ArticleID=810156
ArticleTitle=Знакомство с языком JavaScript: Часть 2. События, cookie-файлы и таймеры
publish-date=04132012