Иногда необходимо, чтобы переменная, которую программист определил в функции, была доступна по всему сценарию. В других случаях может понадобиться ограничить ее и сделать доступной только для функции, в которой она находится. Понятие доступности переменной известно как область видимости. Переменная, которую могут использовать все сценарии на странице, является глобальной, а переменная, доступная только в пределах своей родительской функции — локальной. Переменные JavaScript используют функции для управления областью видимости. Если переменная определена вне функции, она станет доступной для всех сценариев, иначе говоря — глобальной. Когда вы определяете переменную внутри функции и хотите, чтобы она использовалась только ею, можно пометить эту переменную как локальную, добавив ключевое слово var перед ее именем.

var foo = "значение";

Чтобы превратить переменную, указанную в функции, в глобальную, мы опускаем ключевое слово var и просто определяем переменную:

var foo = "значение";

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

function double (num) {

total = num + num;

return total;

}

var total = 10;

var number = double (20);

alert (total); // Уведомление 40.

Можно ожидать, что, поскольку переменной total специально присвоили значение 10, функция alert(total) в конце сценария отобразит число 10. Но поскольку мы не ограничили область видимости переменной total в функции с помощью ключевого слова var, ее область видимости фактически будет глобальной. Поэтому несмотря на то, что переменной total задано значение 10, следующий за ней оператор запускает функцию и захватывает значение переменной total, указанной в ней. Без ключевого слова var переменная «просачивается» в глобальную область видимости.

Как уже стало понятно, проблема с глобальными переменными в том, что они будут общими для всех сценариев на странице. Чем больше переменных, просачивающихся в глобальную область видимости, тем больше шансов, что произойдет «столкновение», в котором переменная, указанная в другом месте (даже в другом сценарии) совпадет с одной из ваших. Это может привести к тому, что переменные будут случайно переопределены с неожиданными значениями, которые станут причиной ошибок в сценарии.

Помните, что не всегда возможно контролировать весь используемый код. Часто страницы содержат код, написанный третьими лицами, например:

  • Сценарии для визуализации рекламы;
  • Сценарии отслеживания пользователей и анализа;
  • Кнопки «поделиться» социальных медиа.

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

Объект браузера в JavaScript

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

В JavaScript браузер известен как объект window. Окно браузера имеет ряд свойств и методов, которые мы можем использовать для взаимодействия с ним. В самом деле, фактически функция alert() является одним из стандартных методов объектов браузера.

События

JavaScript имеет доступ к объектам на странице и в окне браузера, но знаете ли вы, что он также «прислушивается», когда происходят определенные события? Событие — это действие, которое можно обнаружить с помощью JavaScript, например когда загружается документ или пользователь щелкает мышью по элементу или просто наводит на него курсор. Язык HTML 4.0 позволил привязать сценарий к событиям на странице, будь то события, инициированные пользователем, самим браузером или другие сценарии. Это называется привязка событий.

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

Свойство/Метод — Описание:

  • onblur — элемент потерял фокус;
  • onchange — меняется содержимое поля веб-формы;
  • onclick — осуществлен щелчок мышью по объекту;
  • onerror — при загрузке документа или изображения возникает ошибка;
  • onfocus — элемент оказывается в фокусе;
  • onkeydown — нажата клавиша на клавиатуре;
  • onkeypress — клавиша на клавиатуре нажата или удерживается;
  • onkeyup — клавиша на клавиатуре отпущена;
  • onload — завершена загрузка страницы или изображения.

Существует три распространенных метода применения обработчика событий к элементам на страницах:

  • В качестве атрибутов HTML;
  • В качестве метода, связанного с элементом;
  • С помощью метода addEventListener.

В примерах двух последних подходов используется объект window. Любые события, присоединенные к window, применяются ко всему документу. Во всех этих случаях мы также используем событие onclick.

Как атрибут HTML

Функцию, которую необходимо запустить, можно указать в атрибуте в разметке, как показано в следующем примере.

/* Функция myFunction будет запускаться, когда пользователь щелкнет мышью по любому элементу в разделе body */

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

Как метод

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

window.onclick = myFunction; /* Функция myFunction будет запускаться, когда пользователь щелкнет мышью по любому элементу в окне браузера */

Также можно использовать анонимную функцию вместо предопределенной

window.onclick = function() {

/* Любой размещенный здесь код будет запускаться когда пользователь щелкнет мышью по любому элементу в окне браузера */

};

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

window.onclick = myFunction;

window.onclick = myOtherFunction;

В приведенном выше примере второе привязанное событие отменяет первое, поэтому, когда пользователь щелкнет мышью в окне браузера, запустится только функция myOtherFunction. Ссылка на функцию myFunction отбрасывается.

С помощью метода addEventListener

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

window.addEventListener("click", myFunction);

Обратите внимание, что в этом синтаксисе мы опускаем предлог «on» в имени обработчика событий. Как и в предыдущем методе, AddEventListener можно использовать также и с анонимными функциями,

window.addEventListener("click", function(e) {

});