JavaScript to język skryptowy, którego można używać zarówno w programowaniu front-end, jak i back-end. Za pomocą tego języka programowania można tworzyć treści, które będą się dynamicznie aktualizować, animować obrazy i sterować multimediami.
JavaScript ma setki frameworków i bibliotek i jest także najczęściej używanym językiem programowania, według Statisty.
JavaScript ma różnych operatorów stworzonych w celu osiągnięcia różnych ról. W tym artykule wyjaśnię, czym jest JavaScript Void (0), jego znaczenie, przypadki użycia i zalety, potencjalne zagrożenia bezpieczeństwa i jego alternatywy.
Spis treści:
Co to jest operator Void (0)?
W naszych słownikach void oznacza „nieważny” lub „całkowicie pusty”. Void (0) to operator sprawdzający podaną wartość i zwracający wartość niezdefiniowaną. Funkcja jest uważana za nieważną, jeśli nic nie zwraca. Operatora void (0) można używać w wielu obszarach.
Na przykład możesz mieć niezdefiniowany zwrot JavaScript po kliknięciu znacznika zakotwiczenia. Gdy tak się stanie, oznacza to, że klikana strona nie zostanie odświeżona i nic się z nią nie stanie.
Znaczenie używania operatora Void i 0 jako argumentu
Operatora void można używać z dowolnym wyrażeniem. Jednak w JavaScript jest on najczęściej używany z 0 jako argumentem. Oto kilka przypadków użycia operatora Void (0):
Zablokuj nawigację
W normalnych przypadkach kliknięcie łącza prawdopodobnie przeniesie Cię na nową stronę. Możemy stworzyć projekt, aby zademonstrować, jak to działa. W moim projekcie będę miał dwa pliki: indeks.html i nextPage.html.
Możesz dodać ten kod do różnych plików w następujący sposób:
Indeks.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>
Sprawdź ten film:
Jak widać, możesz przejść ze „Strony głównej” do „Następnej strony”, klikając przycisk.
Możemy teraz wprowadzić operator void (0), który blokuje nawigację. Dodaj ten kod do pliku 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>
Obejrzyj ten film po naciśnięciu przycisku „Kliknij mnie”:
Możesz zobaczyć, że po kliknięciu przycisku wyświetli się alert „Kliknięto przycisk, ale nie nawigowano!” pojawia się, ale nie przechodzimy do następnej strony.
Samowykonujące się funkcje anonimowe
Samowykonująca się funkcja anonimowa lub natychmiast wywoływane wyrażenie funkcyjne (IIFE) to funkcja, która jest definiowana i wykonywana po utworzeniu. Funkcje takie mają na celu utworzenie prywatnego zakresu dla zmiennych, co zapobiega zanieczyszczaniu przez te funkcje zasięgu globalnego.
Spójrz na ten kod:
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);
}();
Jest to samowykonująca się funkcja, która dodaje wszystkie liczby od 1 do 10 i wyświetla wyniki po wykonaniu kodu.
Po uruchomieniu kodu wynik będzie następujący: „Suma liczb od 1 do 10 wynosi: 55”.
Jak połączyć JavaScript i Void 0
Operator void nie jest dostępny wyłącznie w JavaScript, ponieważ jest dostępny w innych językach programowania, takich jak C i C++. Jednak użycie tego operatora różni się w zależności od języka. Na przykład void jest typem danych w językach programowania C i C++, a nie operatorem.
JavaScript używa słowa kluczowego „void” z zerem numerycznym. Możesz użyć operatora void (), aby zapobiec domyślnemu zachowaniu, takiemu jak przejście przeglądarki do następnego adresu URL. Jest to doskonały przykład bloku kodu, który łączy JavaScript z operatorem void ().
<a href="https://wilku.top/javascript-void-0-explained-in-just-5-minutes/javascript:void(0);" onclick="myFunction()">Click me</a>
Możesz także użyć operatora void (), aby uzyskać niezdefiniowaną wartość pierwotną. Spójrz na ten blok kodu:
const result = void(0);const result = void(0);
Kiedy go uruchomisz, otrzymasz niezdefiniowany.
Jakie są korzyści Void (0)?
W JavaScript używamy operatora void () do tworzenia wartości „void” lub „niezdefiniowanych”. Oto niektóre korzyści wynikające z użycia tego operatora w kodzie:
- Zapobiegaj nawigacji: Możemy użyć operatora void(0) w atrybucie href, jeśli chcemy uniemożliwić przeglądarkom przejście do nowej strony po kliknięciu łącza lub przycisku. Ten blok kodu ilustruje, jak to działa:
<a href="https://wilku.top/javascript-void-0-explained-in-just-5-minutes/javascript:void(0);" onclick="myFunction();">Click me</a>
- Zwracaj niezdefiniowane wartości z funkcji: Jako programista możesz użyć operatora void (), aby jawnie zwrócić niezdefiniowane wartości, jeśli chcesz zachować spójność kodu w swojej aplikacji. Sprawdź ten blok kodu:
function myFunction() {
// do something
return void(0);
}
- Unikaj przypisania „niezdefiniowanego”: Możesz użyć void () w taki sposób, że „niezdefiniowany” jest równoważny „wynikowi”. Można go również wykorzystać jako wybór stylistyczny. Ten blok kodu pokazuje, jak można to osiągnąć:
let result = void(0);
- Spraw, aby kod był bardziej czytelny: Czytelność kodu nie jest czymś, co powinniśmy ignorować, szczególnie w przypadku dużych aplikacji. Możesz użyć funkcji void(), jeśli chcesz jawnie odrzucić zwracaną wartość i poinformować innych programistów, że funkcja nic nie zwróci. Ten blok kodu pokazuje, jak można to osiągnąć:
function myFunction() {
// Do something...
return void(0);
}
Potencjalne zagrożenia bezpieczeństwa związane z próżnią (0)
Mimo że void (0) jest przydatna w różnych przypadkach w JavaScript, może również okazać się niebezpieczna, jeśli nie zostanie poprawnie użyta. Oto niektóre przypadki, w których void (0) może zostać użyte złośliwie:
- Luki w zabezpieczeniach polegające na wstrzykiwaniu skryptu: Istnieje potencjalne ryzyko ataków polegających na wstrzykiwaniu skryptu, jeśli wartość przekazana do operatora void () nie zostanie oczyszczona i sprawdzona. Dobrym przykładem jest generowanie tej wartości dynamicznie na podstawie danych wejściowych użytkownika.
<a href="https://wilku.top/javascript-void-0-explained-in-just-5-minutes/javascript:void(alert("This could be malicious!'));">Click me</a>
Taki blok kodu umożliwia użytkownikom wstrzykiwanie złośliwego kodu.
- Clickjacking: osoby atakujące mogą używać operatorów void do tworzenia przezroczystych/niewidocznych warstw na stronie internetowej. Tacy napastnicy wykorzystają następnie te warstwy, aby nakłonić użytkowników do kliknięcia złośliwych łączy i przycisków.
- Można go użyć do ominięcia polityki bezpieczeństwa treści (CSP): większość właścicieli witryn korzysta z CSP, aby zapobiec atakom typu cross-site scripting (XSS). Możesz użyć CSP, aby ograniczyć charakter skryptów i zasobów, które powinny ładować Twoje strony internetowe. Jednak użycie operatora void () może powodować konflikt z takimi środkami, ponieważ ładuje nawet skrypty niedozwolone przez politykę bezpieczeństwa treści.
Alternatywy dla void (0)
Technologia ciągle się zmienia, a programowanie także. Niektórzy ludzie uważają void (0) za przestarzały operator. Oto niektóre z alternatyw, z których korzystają współcześni programiści:
- Użyj event.preventDefault(): Możesz użyć event.preventDefault(), aby uniemożliwić wykonanie zdarzenia. Takie oświadczenie może uniemożliwić użytkownikom przesłanie formularza lub przejście do następnej strony.
Poniższe fragmenty kodu pokazują, jak używać event.preventDefault:
#html <a href="#" onclick="event.preventDefault()">My Link</a>
#JavaScript
document.querySelector('a').addEventListener('click', event => event.preventDefault());
- Użyj # jako wartości href: różne strony aplikacji są ze sobą powiązane, co ułatwia nawigację. Użycie # jako href gwarantuje, że użytkownicy pozostaną na tej samej stronie. Możesz użyć tego podejścia razem z event.prevetDefault(), aby zapobiec przewijaniu strony internetowej do góry. Oto jak możesz to osiągnąć:
#html <a href="#">My Link</a>
#JavaScript
document.querySelector('a').addEventListener('click', event => {
event.preventDefault();
window.scrollTo(0, 0);
});
- Użyj wartości null: zamiast wartości niezdefiniowanej możesz zwrócić wartość null. Oto jak możesz to osiągnąć:
let result = null;
Często zadawane pytania
Co to jest JavaScript?
JavaScript to język programowania używany głównie w programowaniu front-end. Jednak język ten jest używany w programowaniu zaplecza z frameworkami takimi jak Node.js. JavaScript jest najczęściej używany z innymi technologiami front-endowymi, takimi jak CSS i HTML, w celu dodania interaktywności do stron internetowych.
Co to jest JavaScript Void 0?
JavaScript Void 0 to operator używany do zapobiegania wykonywaniu domyślnych działań. Na przykład możesz użyć void (0), aby uniemożliwić nawigację, gdy użytkownik kliknie łącze lub przycisk. Po kliknięciu łącza z kodu z wartością void (0) przeglądarka próbuje nawigować, ale wyniki są niezdefiniowane.
Czy istnieją alternatywy dla void (0)?
Tak. Większość współczesnych programistów używa w swoim kodzie detektorów zdarzeń zamiast void (0). Takie podejście ułatwia obsługę różnych funkcji i zapobiega domyślnemu zachowaniu w kodach źródłowych.
Czy używanie void (0) jest bezpieczne?
Możesz użyć void (0), aby zapobiec domyślnemu zachowaniu i samowykonującym się funkcjom. Jednak void (0) może być niebezpieczne, jeśli nie użyjesz go świadomie w swoim kodzie. Na przykład taki operator może ułatwić wstrzykiwanie złośliwego kodu, jeśli zostanie zastosowany do danych wejściowych użytkownika.
Wniosek
JavaScript jest bardzo szerokim językiem programowania i opanowanie większości jego koncepcji może zająć trochę czasu.
Nauczyliśmy, jakie jest znaczenie operatora void (0), jego przypadki użycia i alternatywy. Teraz już wiesz, jak połączyć JavaScript i void(0), co oznacza potencjalne ryzyko, na które możesz natknąć się podczas korzystania z tego operatora.
Możesz także zapoznać się z najlepszymi środowiskami wykonawczymi JavaScript, aby uzyskać lepsze wykonanie kodu.