JavaScript — це мова сценаріїв, яку можна використовувати як для зовнішньої, так і для внутрішньої розробки. За допомогою цієї мови програмування ви можете створювати вміст, який динамічно оновлюється, анімувати зображення та керувати мультимедіа.
JavaScript має сотні фреймворків і бібліотек, а також є найбільш використовуваною мовою програмування, за даними Statista.
У JavaScript є різні оператори, створені для виконання різних ролей. У цій статті я поясню, що таке JavaScript Void (0), його важливість, варіанти використання та переваги, потенційні ризики безпеки та його альтернативи.
Що таке оператор Void (0)?
У наших словниках void означає «недійсний» або «повністю порожній». Void (0) — це оператор, який перевіряє задане значення та повертає undefined. Функція вважається недійсною, якщо вона нічого не повертає. Оператор void (0) можна використовувати в багатьох сферах.
Наприклад, JavaScript може повертати невизначене значення, коли ви натискаєте тег прив’язки. Коли це станеться, це означає, що сторінка, яку ви натискаєте, не оновлюватиметься, і з нею нічого не станеться.
Важливість використання оператора Void і 0 як операнда
Оператор void можна використовувати з будь-яким виразом. Однак у JavaScript він здебільшого використовується з 0 як операнд. Ось кілька випадків використання оператора Void (0):
Заборонити навігацію
У звичайних випадках, якщо ви натиснете посилання, воно, ймовірно, переведе вас на нову сторінку. Ми можемо створити проект, щоб продемонструвати, як він працює. У моєму проекті буде два файли: index.html і nextPage.html.
Ви можете додати цей код до різних файлів наступним чином:
Index.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);
Коли ви запустите його, ви отримаєте undefined.
Які переваги Void (0)?
У JavaScript ми використовуємо оператор void (), щоб створити значення «void» або «undefined». Ось деякі з переваг використання цього оператора у вашому коді:
- Заборонити навігацію: ми можемо використовувати оператор 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);
}
- Уникайте призначення ‘undefined’: Ви можете використовувати void () таким чином, що ‘undefined’ буде еквівалентним ‘result’. Ви також можете використовувати його як стильовий вибір. Цей блок коду показує, як можна досягти цього:
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 замість undefined. Ось як ви можете досягти цього:
let result = null;
поширені запитання
Що таке JavaScript?
JavaScript — це мова програмування, яка в основному використовується у розробці інтерфейсу. Однак ця мова використовується у внутрішній розробці з фреймворками, такими як Node.js. JavaScript здебільшого використовується з іншими зовнішніми технологіями, такими як CSS і HTML, щоб додати інтерактивність веб-сторінок.
Що таке JavaScript Void 0?
JavaScript Void 0 — це оператор, який використовується для запобігання дії за замовчуванням. Наприклад, ви можете використовувати void (0), щоб запобігти навігації, коли користувач натискає посилання або кнопку. Коли натискається посилання з коду з void (0), браузер намагається перейти, але результат оцінюється як undefined.
Чи існують альтернативи void (0)?
Так. Більшість сучасних розробників використовують слухачі подій замість void (0) у своєму коді. Цей підхід полегшує обробку різних функцій і запобігає поведінці за замовчуванням у вихідних кодах.
Чи безпечно використовувати void (0)?
Ви можете використовувати void (0), щоб запобігти поведінці за замовчуванням і для самовиконуваних функцій. Однак void (0) може бути небезпечним, якщо ви не використовуєте його свідомо у своєму коді. Наприклад, такий оператор може полегшити впровадження шкідливого коду, якщо його застосувати до введених користувачем даних.
Висновок
JavaScript — це дуже широка мова програмування, і вам може знадобитися деякий час, перш ніж ви освоїте більшість її концепцій.
Ми навчили, що таке оператор void (0), його важливість і випадки використання, а також його альтернативи. Тепер ви також розумієте, як поєднати JavaScript і void(0) потенційні ризики, з якими ви можете зіткнутися, коли використовуєте цей оператор.
Ви також можете дослідити деякі найкращі середовища виконання JavaScript для кращого виконання коду.