JavaScript:void(0) в веб-разработке – что это и зачем нужно

Для кого эта статья:

• Веб-разработчики, стремящиеся повысить свои навыки и понимание современных практик JavaScript
• Студенты и начинающие специалисты в области программирования, желающие разобраться в деталях работы JavaScript

• UX-дизайнеры и исследователи, интересующиеся вопросами доступности и пользовательского опыта в веб-разработке

  Если вы когда-либо копались в коде старых веб-сайтов или наткнулись на загадочную конструкцию javascript:void(0) в атрибуте href, вы не одиноки в своем замешательстве. Эта маленькая, но загадочная строка кода – как тот странный дальний родственник на семейном празднике: все знают, что он существует, но мало кто понимает, зачем он нужен и как с ним правильно общаться. 🕵️‍♂️ Давайте вместе разберемся, что скрывается за этими причудливыми символами и почему вы можете встретить их даже в 2023 году.

Понимание javascript:void(0) и альтернативных подходов – это лишь малая часть навыков современного веб-разработчика. Хотите уверенно разбираться во всех тонкостях JavaScript? Обучение веб-разработке от Skypro даст вам глубокое понимание не только базовых конструкций, но и современных практик, помогая избегать устаревших подходов. Вы научитесь писать чистый, семантически верный код, который соответствует актуальным стандартам веб-разработки.

Что такое

Конструкция javascript:void(0) – это своеобразная хитрость, которая использовалась (и порой до сих пор используется) веб-разработчиками для создания ссылок, которые выполняют JavaScript-код без обновления страницы. В основе всего этого лежит псевдо-протокол javascript:, который сообщает браузеру, что необходимо интерпретировать содержимое после двоеточия как JavaScript-код.

Давайте разберем по частям:

• javascript: — это псевдо-протокол, указывающий браузеру выполнить код как JavaScript
• void — оператор JavaScript, который оценивает выражение и возвращает undefined
• (0) — аргумент для оператора void, где 0 — простое значение, не имеющее побочных эффектов

Когда браузер обрабатывает href="javascript:void(0)", он выполняет JavaScript-выражение void(0), которое всегда возвращает undefined. Поскольку никакого URL для перехода не предоставлено, браузер остается на текущей странице. Это позволяет прикрепить обработчик события onclick к элементу <a>, не вызывая перезагрузку страницы после выполнения JavaScript-кода.

Алексей Петров, ведущий фронтенд-разработчик

Помню, как в 2010 году мне поручили переделать корпоративный сайт крупного банка. Открыв код, я увидел сотни ссылок с javascript:void(0). Меню, кнопки, интерактивные элементы — всё было реализовано через эту конструкцию. Когда я спросил предыдущего разработчика о причинах, он ответил: "Так работает, и не трогай".

Решив разобраться, я потратил неделю на изучение всех этих случаев и перевод кода на современные практики с использованием preventDefault(). Результат удивил всех: сайт стал работать быстрее, перестал "глючить" в некоторых браузерах, а SEO-показатели улучшились, так как поисковые системы стали правильно индексировать ссылки. Этот опыт показал мне, насколько важно понимать, что скрывается за кодом, который мы используем, а не просто копировать решения из прошлого.

Вот простой пример использования javascript:void(0):

<a href="javascript:void(0)" onclick="alert('Клик без перехода!');">Нажми меня</a>

В этом примере при клике по ссылке выполняется функция alert(), но переход по ссылке не происходит, потому что выражение void(0) возвращает undefined.

Стоит отметить, что эта конструкция возникла в эпоху, когда обработка событий JavaScript и понимание DOM были в зачаточном состоянии. Разработчики искали способы добавить интерактивность на веб-страницы, не перезагружая их полностью. 🕰️

Синтаксис операции void в JavaScript

Оператор void в JavaScript не так уж часто встречается в повседневном программировании, но понимание его работы проливает свет на механику javascript:void(0). По сути, void — это унарный оператор, который принимает один операнд (выражение) и всегда возвращает undefined, независимо от того, что это за выражение.

Синтаксис оператора void выглядит следующим образом:

void выражение

Или, в более формальном виде:

void(выражение)

Обе формы эквивалентны с точки зрения JavaScript. Выражение вычисляется, но его результат отбрасывается, и вместо него всегда возвращается undefined.

Важно понимать: оператор void не предотвращает выполнение выражения. Если в выражении есть побочные эффекты (например, изменение переменных или вызов функций), они всё равно произойдут. Вот несколько примеров:

• void 0 — просто возвращает undefined
• void(2 + 2) — вычисляет 2 + 2 (получает 4), но возвращает undefined
• void console.log("Привет") — выводит "Привет" в консоль, но возвращает undefined

Зачем использовать void? Есть несколько исторических и практических причин:

1. Получение значения undefined в старом JavaScript (до ES5)
2. Вызов функций в выражениях, где не нужно возвращаемое значение
3. В ссылках для предотвращения навигации (наш случай с javascript:void(0))
4. Использование в стрелочных функциях для неявного возврата undefined

Интересно, что в ранних версиях JavaScript undefined был переменной, а не ключевым словом, и теоретически его значение можно было изменить (🤦‍♂️). В таких случаях void 0 гарантировал получение настоящего undefined.

// В очень старом JavaScript это было возможно:
undefined = "Теперь я строка";
console.log(undefined); // "Теперь я строка"
console.log(void 0); // По-прежнему undefined

В современном JavaScript такое переопределение невозможно в строгом режиме, но привычка использовать void 0 для получения гарантированного undefined у некоторых разработчиков осталась.

Использование

Наиболее распространенный случай использования javascript:void(0) — это помещение его в атрибут href элемента <a>. Давайте рассмотрим типичные сценарии использования и разберемся, почему эта практика была так популярна. 🔍

Вот несколько примеров использования javascript:void(0) в HTML:

1. Базовый вариант — ссылка, которая выполняет JavaScript без перехода:

<a href="javascript:void(0)" onclick="doSomething()">Выполнить действие</a>

2. В навигационных меню — для родительских пунктов с выпадающим подменю:

<a href="javascript:void(0)" onclick="toggleSubmenu('products')">Продукты ▼</a>

3. В формах — для кнопок отправки с предварительной валидацией:

<a href="javascript:void(0)" onclick="validateAndSubmit()">Отправить</a>

4. В табах и аккордеонах — для переключения между секциями:

<a href="javascript:void(0)" onclick="showTab('tab2')">Вкладка 2</a>

Почему разработчики использовали (и продолжают использовать) javascript:void(0)? Основная причина — предотвращение стандартного поведения ссылки, которая по умолчанию пытается перейти по указанному URL. Когда вы используете javascript:void(0), браузер выполняет JavaScript, но никуда не переходит, поскольку void(0) не возвращает действительный URL.

Исторически сложилось несколько альтернатив, но все они имеют недостатки:

• <a href="#" onclick="doSomething()"> — приводит к прокрутке страницы в начало
• <a href="##" onclick="doSomething()"> — может вызвать странное поведение в некоторых браузерах
• <a onclick="doSomething()"> — без href теряется стилизация как ссылки и возможность фокусировки

В контексте HTML важно понимать, что javascript:void(0) работает, потому что протокол javascript: интерпретируется браузером особым образом. Когда браузер видит этот протокол в href, он выполняет следующий за ним код как JavaScript, а не пытается загрузить новую страницу.

Мария Соколова, UX-исследователь

В одном из проектов мы проводили юзабилити-тестирование сайта финансовой организации, где почти все интерактивные элементы были реализованы через javascript:void(0). Результаты нас шокировали! Пользователи с нарушениями зрения, использующие скринридеры, полностью теряли возможность навигации, поскольку их устройства не могли корректно интерпретировать эти ссылки.

Еще хуже обстояли дела с SEO – Google практически не индексировал важные разделы сайта, поскольку не мог следовать по таким ссылкам. После редизайна и замены всех javascript:void(0) на семантически корректные элементы с правильной обработкой событий, показатели доступности выросли на 65%, а органический трафик увеличился почти втрое за три месяца. Это был наглядный урок того, как технические решения напрямую влияют на пользовательский опыт и бизнес-показатели.

Проблемы и недостатки применения

Несмотря на свою популярность в прошлом, использование javascript:void(0) сопряжено с рядом существенных проблем, которые делают этот подход нежелательным в современной веб-разработке. Понимание этих недостатков поможет вам принять более обоснованные решения при создании интерактивных элементов. ⚠️

Вот основные проблемы использования javascript:void(0):

1. Проблемы доступности (accessibility) — скринридеры и другие вспомогательные технологии могут неправильно интерпретировать ссылки с javascript:void(0), что создает барьеры для пользователей с ограниченными возможностями
2. SEO-недружелюбность — поисковые системы не могут следовать по таким ссылкам, что может негативно влиять на индексацию сайта
3. Нарушение семантики HTML — элемент <a> предназначен для навигации между страницами, а не для выполнения произвольных действий
4. Проблемы с безопасностью — использование протокола javascript: может создавать векторы для атак XSS (Cross-Site Scripting)
5. Отключенный JavaScript — если пользователь отключил JavaScript в браузере, ссылки с javascript:void(0) полностью перестают работать
6. Проблемы с UX — невозможность открыть ссылку в новой вкладке или сохранить её

Помимо этих проблем, использование javascript:void(0) считается устаревшей практикой, которая противоречит современным стандартам разработки и рекомендациям WCAG (Web Content Accessibility Guidelines).

Многие браузеры и инструменты разработчика выдают предупреждения при обнаружении такого кода, а некоторые компании включают отказ от javascript:void(0) в свои руководства по стилю кода. 🚫

Показательный пример проблемы: представьте пользователя со скринридером, который слышит "ссылка" для элемента с javascript:void(0), пытается активировать её стандартными методами, но ничего не происходит, поскольку требуется именно клик мышью для срабатывания обработчика onclick.

Современные альтернативы и лучшие практики

Современная веб-разработка предлагает множество более элегантных и правильных альтернатив использованию javascript:void(0). Эти подходы не только решают проблемы, описанные ранее, но и делают код более чистым, поддерживаемым и соответствующим стандартам. 🚀

Вот наиболее рекомендуемые альтернативы:

1. Использование preventDefault() с обработчиками событий:

<a href="#" onclick="event.preventDefault(); doSomething();">Действие</a>

Или лучше с отдельным скриптом:

document.querySelector('#myLink').addEventListener('click', function(e) {
e.preventDefault();
doSomething();
});

2. Использование подходящих HTML-элементов в соответствии с их семантическим значением:

<button type="button" onclick="doSomething()">Действие</button>

3. Для навигационных меню с выпадающими списками:

<nav>
<button aria-expanded="false" aria-controls="submenu">Меню</button>
<ul id="submenu" hidden>...</ul>
</nav>

4. Для табов — использование WAI-ARIA ролей:

<div role="tablist">
<button role="tab" aria-selected="true">Вкладка 1</button>
<button role="tab">Вкладка 2</button>
</div>

Ключевые принципы, которыми следует руководствоваться:

• Семантическая корректность — используйте HTML-элементы по их прямому назначению
• Разделение контента и поведения — JavaScript должен добавляться через отдельные файлы, а не в атрибутах HTML
• Доступность — используйте ARIA-атрибуты и следуйте рекомендациям WCAG
• Прогрессивное улучшение — убедитесь, что основная функциональность работает даже без JavaScript

Сравнение подходов:

Особо отмечу, что современные фреймворки (React, Vue, Angular) имеют свои механизмы для обработки событий, которые делают использование javascript:void(0) полностью избыточным. Например, в React:

function MyComponent() {
const handleClick = (e) => {
e.preventDefault();
// Ваш код
};

return <a href="#" onClick={handleClick}>Действие</a>;
}

Для тех, кто все еще поддерживает старый код с javascript:void(0), хорошей стратегией будет постепенная миграция на современные подходы при очередном рефакторинге или обновлении сайта.

Рассмотрев все аспекты javascript:void(0), становится очевидно, что это реликт прошлого, который выполнил свою историческую миссию, но уступил место более совершенным решениям. Как разработчики, мы должны стремиться не просто к работающему коду, но к коду, который соответствует современным стандартам доступности, безопасности и производительности. Правильные альтернативы не только улучшают пользовательский опыт, но и делают наши приложения более устойчивыми и готовыми к будущему. Выбирая между "так делали раньше" и "так следует делать", всегда стоит инвестировать время в изучение лучших практик — они окупаются сторицей в долгосрочной перспективе.