JavaScript — это язык сценариев, который можно использовать как во внешней, так и в внутренней разработке. С помощью этого языка программирования вы можете создавать динамически обновляемый контент, анимировать изображения и управлять мультимедиа.
JavaScript имеет сотни фреймворков и библиотек, а также является наиболее часто используемым языком программирования. по данным Статисты.
В JavaScript есть различные операторы, созданные для выполнения разных ролей. В этой статье я объясню, что такое JavaScript Void (0), его важность, варианты использования и преимущества, потенциальные риски безопасности и его альтернативы.
Оглавление
Что такое оператор Void (0)?
В наших словарях void означает «недопустимый» или «совершенно пустой». Void (0) — оператор, который проверяет заданное значение и возвращает неопределенное значение. Функция считается недействительной, если она ничего не возвращает. Оператор void (0) можно использовать во многих областях.
Например, вы можете заставить JavaScript возвращать неопределенное значение при нажатии на тег привязки. Когда это произойдет, это означает, что страница, на которую вы нажимаете, не будет обновлена, и с этой страницей ничего не произойдет.
Важность использования оператора Void и 0 в качестве операнда
Вы можете использовать оператор void с любым выражением. Однако в JavaScript он чаще всего используется с операндом 0. Вот некоторые варианты использования оператора Void (0):
Запретить навигацию
В обычных случаях, если вы нажмете на ссылку, вы, скорее всего, перейдете на новую страницу. Мы можем создать проект, чтобы продемонстрировать, как это работает. В моем проекте будет два файла: index.html и nextPage.html.
Вы можете добавить этот код в разные файлы следующим образом:
Индекс.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Home Page</title> </head> <body> <h1>Welcome to the Home Page</h1> <a href="https://wilku.top/javascript-void-0-explained-in-just-5-minutes/nextPage.html">Go to Next Page (No void operator)</a> <script src="script.js"></script> </body> </html> nextPage.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Next Page</title> </head> <body> <h1>You are on the Next Page</h1> <a href="index.html">Go back to Home Page (No void operator)</a> <script src="script.js"></script> </body> </html>
Посмотрите это видео:
Как видите, вы можете перейти от «Домой» к «Следующей странице», нажав кнопку.
Теперь мы можем ввести оператор void (0), который блокирует навигацию. Добавьте этот код в index.html:
<!-- With void operator -->
<a href="https://wilku.top/javascript-void-0-explained-in-just-5-minutes/javascript:void(0);" onclick="doSomething()">Click me</a>
<script>
function doSomething() {
alert("Button clicked, but no navigation!");
}
</script><!-- With void operator -->
<a href="https://wilku.top/javascript-void-0-explained-in-just-5-minutes/javascript:void(0);" onclick="doSomething()">Click me</a>
<script>
function doSomething() {
alert("Button clicked, but no navigation!");
}
</script>
Посмотрите это видео, когда мы нажмем кнопку «Нажмите на меня»:
Вы можете видеть, что после нажатия кнопки появляется предупреждение: «Кнопка нажата, но навигации нет!» появляется, но мы не переходим на следующую страницу.
Самовыполняющиеся анонимные функции
Самовыполняющаяся анонимная функция или немедленно вызываемое функциональное выражение (IIFE) — это функция, которая определяется и выполняется после создания. Такие функции предназначены для создания частной области для переменных, которая предотвращает загрязнение этими функциями глобальной области.
Взгляните на этот код:
void function() {
// Function to calculate the sum of numbers from 1 to n
const calculateSum = () => {
let sum = 0;
for (let i = 1; i <= 10; i++) {
sum += i;
}
return sum;
};
// Call the function and log the result to the console
const result = calculateSum();
console.log("The sum of numbers from 1 to 10 is:", result);
}();
Это самовыполняющаяся функция, которая складывает все числа от 1 до 10 и отображает результаты после выполнения кода.
Когда вы запустите код, на выходе будет: «Сумма чисел от 1 до 10 равна: 55».
Как объединить JavaScript и Void 0
Оператор void не является эксклюзивной функцией JavaScript, поскольку он доступен и в других языках программирования, таких как C и C++. Однако использование этого оператора варьируется от одного языка к другому. Например, void — это тип данных в языках программирования C и C++, а не оператор.
JavaScript использует ключевое слово «void» с числовым нулем. Вы можете использовать оператор void(), чтобы предотвратить поведение по умолчанию, например переход браузера к следующему URL-адресу. Это прекрасный пример блока кода, сочетающего JavaScript с оператором void().
<a href="https://wilku.top/javascript-void-0-explained-in-just-5-minutes/javascript:void(0);" onclick="myFunction()">Click me</a>
Вы также можете использовать оператор void() для получения неопределенного примитивного значения. Взгляните на этот блок кода:
const result = void(0);const result = void(0);
Когда вы запустите его, вы получите неопределенное значение.
Каковы преимущества Void (0)?
В JavaScript мы используем оператор void() для создания значений «void» или «undef». Вот некоторые преимущества использования этого оператора в вашем коде:
- Запретить навигацию. Мы можем использовать оператор void(0) в атрибуте href, если хотим запретить браузерам переход на новую страницу при нажатии на ссылку или кнопку. Этот блок кода иллюстрирует, как это работает:
<a href="https://wilku.top/javascript-void-0-explained-in-just-5-minutes/javascript:void(0);" onclick="myFunction();">Click me</a>
- Возвращайте неопределенные значения из функций. Как разработчик, вы можете использовать оператор void() для явного возврата неопределенного значения, если вам нужна согласованность кода в вашем приложении. Посмотрите этот блок кода:
function myFunction() {
// do something
return void(0);
}
- Избегайте присвоения «неопределено». Вы можете использовать void() таким образом, чтобы «неопределенное» было эквивалентно «результату». Вы также можете использовать его как стилистический выбор. Этот блок кода показывает, как этого можно добиться:
let result = void(0);
- Сделайте код более читабельным. Читабельность кода — это не то, что мы должны игнорировать, особенно при работе с большими приложениями. Вы можете использовать void(), если хотите явно отбросить возвращаемое значение и сообщить другим разработчикам, что функция ничего не вернет. Этот блок кода показывает, как этого можно добиться:
function myFunction() {
// Do something...
return void(0);
}
Потенциальные угрозы безопасности Void (0)
Несмотря на то, что void (0) полезен в различных случаях в JavaScript, он также может оказаться опасным, если его неправильно использовать. Вот некоторые случаи, когда void (0) может использоваться злонамеренно:
- Уязвимости внедрения сценариев. Существуют потенциальные риски атак путем внедрения сценариев, если значение, переданное оператору void (), не очищено и не проверено. Хорошим примером является случай, когда это значение генерируется динамически на основе ввода пользователя.
<a href="https://wilku.top/javascript-void-0-explained-in-just-5-minutes/javascript:void(alert("This could be malicious!'));">Click me</a>
Такой блок кода позволяет пользователям внедрять вредоносный код.
- Кликджекинг: злоумышленники могут использовать операторы void для создания прозрачных/невидимых слоев на веб-странице. Такие злоумышленники затем будут использовать эти слои, чтобы обманом заставить пользователей нажимать на вредоносные ссылки и кнопки.
- Может использоваться для обхода политики безопасности контента (CSP). Большинство владельцев веб-сайтов используют CSP для предотвращения атак с использованием межсайтовых сценариев (XSS). Вы можете использовать CSP, чтобы ограничить характер сценариев и ресурсов, которые должны загружать ваши веб-страницы. Однако использование оператора void() может конфликтовать с такими мерами, поскольку загружает даже те скрипты, которые не разрешены политикой безопасности контента.
Альтернативы void (0)
Технологии постоянно меняются, как и программирование. Некоторые люди считают void (0) устаревшим оператором. Вот некоторые из альтернатив, которые используют современные разработчики:
- Используйте event.preventDefault(): вы можете использовать event.preventDefault(), чтобы предотвратить действие события. Такое заявление может помешать пользователям отправить форму или перейти на следующую страницу.
Эти фрагменты кода показывают, как использовать event.preventDefault:
#html <a href="#" onclick="event.preventDefault()">My Link</a>
#JavaScript
document.querySelector('a').addEventListener('click', event => event.preventDefault());
- Используйте # в качестве значения href: разные страницы приложения связаны между собой для упрощения навигации. Использование # в качестве href гарантирует, что пользователи останутся на той же странице. Вы можете использовать этот подход вместе с event.prevetDefault(), чтобы предотвратить прокрутку вашей веб-страницы вверх. Вот как вы можете этого добиться:
#html <a href="#">My Link</a>
#JavaScript
document.querySelector('a').addEventListener('click', event => {
event.preventDefault();
window.scrollTo(0, 0);
});
- Использовать значение null: вы можете вернуть значение null вместо неопределенного. Вот как вы можете этого добиться:
let result = null;
Часто задаваемые вопросы
Что такое JavaScript?
JavaScript — это язык программирования, который чаще всего используется во фронтенд-разработке. Однако этот язык используется при внутренней разработке с использованием таких фреймворков, как Node.js. JavaScript в основном используется с другими интерфейсными технологиями, такими как CSS и HTML, для добавления интерактивности веб-страницам.
Что такое JavaScript Void 0?
JavaScript Void 0 — это оператор, который используется для предотвращения выполнения действий по умолчанию. Например, вы можете использовать void (0), чтобы запретить навигацию, когда пользователь нажимает ссылку или кнопку. При нажатии на ссылку из кода с void (0) браузер пытается перейти, но результаты оцениваются как неопределенные.
Есть ли альтернативы void (0)?
Да. Большинство современных разработчиков используют в своем коде прослушиватели событий вместо void (0). Такой подход упрощает обработку различных функций и предотвращает поведение по умолчанию в исходных кодах.
Безопасно ли использование void (0)?
Вы можете использовать void (0) для предотвращения поведения по умолчанию и для самовыполняющихся функций. Однако void (0) может быть опасен, если вы не используете его в своем коде сознательно. Например, такой оператор может облегчить внедрение вредоносного кода, если применить его к пользовательскому вводу.
Заключение
JavaScript — очень широкий язык программирования, и вам может потребоваться время, чтобы освоить большинство его концепций.
Мы рассказали, что такое оператор void (0), его важность, варианты использования и его альтернативы. Теперь вы также понимаете, как комбинировать JavaScript и void(0) и потенциальные риски, с которыми вы, вероятно, столкнетесь при использовании этого оператора.
Вы также можете изучить некоторые лучшие среды выполнения JavaScript для лучшего выполнения кода.