Иногда необходимо, чтобы переменная, которую программист определил в функции, была доступна по всему сценарию. В других случаях может понадобиться ограничить ее и сделать доступной только для функции, в которой она находится. Понятие доступности переменной известно как область видимости. Переменная, которую могут использовать все сценарии на странице, является глобальной, а переменная, доступная только в пределах своей родительской функции — локальной. Переменные 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) { });