Содержание


Знакомство с языком JavaScript

Часть 2. События, cookie-файлы и таймеры

Comments

Серия контента:

Этот контент является частью # из серии # статей: Знакомство с языком JavaScript

Следите за выходом новых статей этой серии.

Этот контент является частью серии:Знакомство с языком JavaScript

Следите за выходом новых статей этой серии.

В первой статье "Знакомство с языком JavaScript. Часть 1: Основы" рассматривалась фундаментальная функциональность JavaScript, начиная с создания тегов script, использования комментариев, подключения JS-файлов к HTML-документам, объявления переменных и функций и использования операторов и массивов, условных выражений и циклов. Эта статья продолжает знакомить читателей с базовыми принципами 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.


Ресурсы для скачивания


Похожие темы


Комментарии

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

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