JavaScript je skriptovací jazyk, který lze použít při vývoji front-end i back-endu. Pomocí tohoto programovacího jazyka můžete vytvářet obsah, který se dynamicky aktualizuje, animovat obrázky a ovládat multimédia.
JavaScript má stovky frameworků a knihoven a je také nejpoužívanějším programovacím jazykem, podle Statista.
JavaScript má různé operátory vytvořené pro dosažení různých rolí. V tomto článku vysvětlím, co je JavaScript Void (0), jeho význam, případy použití a výhody, potenciální bezpečnostní rizika a jeho alternativy.
Table of Contents
Co je operátor Void (0)?
V našich slovnících slovo void znamená „neplatné“ nebo „zcela prázdné“. Void (0) je operátor, který zkontroluje danou hodnotu a vrátí hodnotu undefined. Funkce je považována za neplatnou, pokud nic nevrací. Operátor void (0) lze použít v mnoha oblastech.
Pokud například kliknete na značku ukotvení, JavaScript se může vrátit jako nedefinovaný. Když se to stane, znamená to, že stránka, na kterou klikáte, nebude obnovena a s touto stránkou se nic nestane.
Důležitost použití operátoru Void a 0 jako operandu
Operátor void můžete použít s jakýmkoli výrazem. V JavaScriptu se však většinou používá s operandem 0. Zde je několik případů použití operátoru Void (0):
Zabránit navigaci
Za normálních okolností, pokud kliknete na odkaz, pravděpodobně vás přesměruje na novou stránku. Můžeme vytvořit projekt, abychom ukázali, jak to funguje. Na svém projektu budu mít dva soubory: index.html a nextPage.html.
Tento kód můžete přidat do různých souborů následovně:
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>
Podívejte se na toto video:
Jak vidíte, kliknutím na tlačítko můžete přejít z „Domů“ na „Další stránku“.
Nyní můžeme představit operátor void (0), který blokuje navigaci. Přidejte tento kód do 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>
Podívejte se na toto video, když stiskneme tlačítko „Klikněte na mě“:
Můžete vidět, že po kliknutí na tlačítko se zobrazí upozornění „Tlačítko kliklo, ale žádná navigace!“ se zobrazí, ale nepřejdeme na další stránku.
Samoobslužné anonymní funkce
Samoobslužná anonymní funkce nebo výraz okamžitě vyvolané funkce (IIFE) je funkce, která je definována a spuštěna po vytvoření. Tyto funkce jsou navrženy tak, aby vytvořily soukromý obor pro proměnné, které zabrání těmto funkcím znečišťovat globální rozsah.
Podívejte se na tento kód:
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);
}();
Jedná se o samospouštěcí funkci, která sčítá všechna čísla od 1 do 10 a zobrazuje výsledky po provedení kódu.
Když kód spustíte, výstup bude: „Součet čísel od 1 do 10 je: 55“.
Jak zkombinovat JavaScript a Void 0
Operátor void není exkluzivní pro JavaScript, protože je dostupný v jiných programovacích jazycích, jako je C a C++. Použití tohoto operátoru se však v jednotlivých jazycích liší. Například void je datový typ v programovacích jazycích C a C++ a ne operátor.
JavaScript používá klíčové slovo ‚void‘ s číselnou nulou. Pomocí operátoru void () můžete zabránit výchozímu chování, jako je přechod prohlížeče na další adresu URL. Toto je dokonalý příklad bloku kódu, který kombinuje JavaScript s operátorem void ().
<a href="https://wilku.top/javascript-void-0-explained-in-just-5-minutes/javascript:void(0);" onclick="myFunction()">Click me</a>
Můžete také použít operátor void () k získání nedefinované primitivní hodnoty. Podívejte se na tento blok kódu:
const result = void(0);const result = void(0);
Když jej spustíte, dostanete nedefinováno.
Jaké jsou výhody Void (0)?
V JavaScriptu používáme operátor void () k vytvoření hodnot „void“ nebo „undefined“. Toto jsou některé z výhod použití tohoto operátora ve vašem kódu:
- Zabránit navigaci: Operátor void(0) můžeme použít v atributu href, pokud chceme prohlížečům zabránit v navigaci na novou stránku, když klikneme na odkaz nebo tlačítko. Tento blok kódu ukazuje, jak to funguje:
<a href="https://wilku.top/javascript-void-0-explained-in-just-5-minutes/javascript:void(0);" onclick="myFunction();">Click me</a>
- Vracet nedefinované hodnoty z funkcí: Jako vývojář můžete použít operátor void () k explicitnímu vrácení nedefinovaných, když chcete konzistenci kódu ve vaší aplikaci. Podívejte se na tento blok kódu:
function myFunction() {
// do something
return void(0);
}
- Vyhněte se ‚undefined‘ přiřazení: Můžete použít void () takovým způsobem, že ‚undefined‘ je ekvivalentní ‚výsledku‘. Můžete jej také použít jako stylistickou volbu. Tento blok kódu ukazuje, jak toho můžete dosáhnout:
let result = void(0);
- Udělejte kód čitelnějším: Čitelnost kódu není něco, co bychom měli ignorovat, zejména při práci s velkými aplikacemi. Void() můžete použít, když chcete explicitně zrušit návratovou hodnotu a dát ostatním vývojářům vědět, že funkce nic nevrátí. Tento blok kódu ukazuje, jak toho můžete dosáhnout:
function myFunction() {
// Do something...
return void(0);
}
Potenciální bezpečnostní rizika neplatnosti (0)
I když je void (0) v JavaScriptu v různých případech užitečné, může se také ukázat jako nebezpečné, pokud se nepoužívá správně. Zde jsou některé z případů, kdy může být void (0) zneužito:
- Chyby zabezpečení vkládání skriptů: Pokud hodnota předaná operátoru void () není dezinfikována a ověřena, existují potenciální rizika útoků vkládání skriptů. Dobrým příkladem je situace, kdy je tato hodnota dynamicky generována na základě vstupu uživatele.
<a href="https://wilku.top/javascript-void-0-explained-in-just-5-minutes/javascript:void(alert("This could be malicious!'));">Click me</a>
Takový blok kódu umožňuje uživatelům vložit škodlivý kód.
- Clickjacking: Útočníci mohou použít operátory void k vytvoření průhledných/neviditelných vrstev na webové stránce. Takoví útočníci pak pomocí těchto vrstev přimějí uživatele ke kliknutí na škodlivé odkazy a tlačítka.
- Lze jej použít k obejití zásad zabezpečení obsahu (CSP): Většina vlastníků webových stránek používá CSP k zabránění útokům typu cross-site scripting (XSS). CSP můžete použít k omezení povahy skriptů a zdrojů, které mají vaše webové stránky načítat. Použití operátoru void () však může být v rozporu s takovými opatřeními, protože načítá i skripty, které nejsou povoleny zásadami zabezpečení obsahu.
Alternativy k neplatnosti (0)
Technologie se neustále mění, stejně jako programování. Někteří lidé považují void (0) za zastaralý operátor. Toto jsou některé z alternativ, které moderní vývojáři používají:
- Použití event.preventDefault(): Event.preventDefault() můžete použít k zabránění akce události. Takové prohlášení může uživatelům zabránit v odeslání formuláře nebo přechodu na další stránku.
Tyto fragmenty kódu ukazují, jak používat event.preventDefault:
#html <a href="#" onclick="event.preventDefault()">My Link</a>
#JavaScript
document.querySelector('a').addEventListener('click', event => event.preventDefault());
- Použijte # jako hodnotu href: Různé stránky v aplikaci jsou propojeny pro snadnou navigaci. Použití # jako href zajišťuje, že uživatelé zůstanou na stejné stránce. Tento přístup můžete použít společně s event.prevetDefault(), abyste zabránili posouvání vaší webové stránky nahoru. Toho můžete dosáhnout takto:
#html <a href="#">My Link</a>
#JavaScript
document.querySelector('a').addEventListener('click', event => {
event.preventDefault();
window.scrollTo(0, 0);
});
- Použít hodnotu null: Místo hodnoty undefined můžete vrátit hodnotu null. Toho můžete dosáhnout takto:
let result = null;
Nejčastější dotazy
Co je JavaScript?
JavaScript je programovací jazyk, který se většinou používá při vývoji front-endu. Tento jazyk se však používá v back-endovém vývoji s frameworky, jako je Node.js. JavaScript se většinou používá s dalšími front-endovými technologiemi, jako jsou CSS a HTML, k přidání interaktivity na webové stránky.
Co je JavaScript Void 0?
JavaScript Void 0 je operátor, který se používá k zamezení výchozí akce. Můžete například použít void (0), abyste zabránili navigaci, když uživatel klikne na odkaz nebo tlačítko. Když se klikne na odkaz z kódu s void (0), prohlížeč se pokusí navigovat, ale výsledky se vyhodnotí jako nedefinované.
Existují alternativy k neplatnosti (0)?
Ano. Většina moderních vývojářů používá ve svém kódu posluchače událostí namísto void (0). Tento přístup usnadňuje manipulaci s různými funkcemi a zabraňuje výchozímu chování ve zdrojových kódech.
Je použití void (0) bezpečné?
Můžete použít void (0), abyste zabránili výchozímu chování a se samospouštěcími funkcemi. Void (0) však může být nebezpečný, pokud jej ve svém kódu vědomě nepoužíváte. Takový operátor může například usnadnit vkládání škodlivého kódu, pokud je aplikován na uživatelské vstupy.
Závěr
JavaScript je velmi široký programovací jazyk a může chvíli trvat, než si osvojíte většinu jeho konceptů.
Naučili jsme se, co je operátor void (0) jeho důležitost a případy použití a jeho alternativy. Nyní také rozumíte tomu, jak kombinovat JavaScript a void(0) potenciální rizika, na která pravděpodobně narazíte, když použijete tento operátor.
Můžete také prozkoumat některá nejlepší běhová prostředí JavaScriptu pro lepší provádění kódu.