A JavaScript egy szkriptnyelv, amely előtér- és háttérfejlesztésben egyaránt használható. Ezzel a programozási nyelvvel dinamikusan frissülő tartalmat hozhat létre, képeket animálhat és multimédiát vezérelhet.
A JavaScript több száz keretrendszerrel és könyvtárral rendelkezik, és egyben a leggyakrabban használt programozási nyelv, a Statista szerint.
A JavaScript különféle operátorokkal rendelkezik, amelyek különböző szerepek elérésére szolgálnak. Ebben a cikkben elmagyarázom, mi az a JavaScript Void (0), fontosságát, használati eseteit és előnyeit, a lehetséges biztonsági kockázatokat és alternatíváit.
Tartalomjegyzék
Mi a Void (0) operátor?
Szótárainkban a void azt jelenti, hogy „nem érvényes” vagy „teljesen üres”. A Void (0) egy operátor, amely ellenőrzi egy adott értéket, és nem definiált értéket ad vissza. Egy függvény érvénytelennek minősül, ha nem ad vissza semmit. A void (0) operátor sok területen használható.
Például beállíthatja, hogy a JavaScript definiálatlanul térjen vissza, amikor egy horgonycímkére kattint. Ha ez megtörténik, az azt jelenti, hogy a rákattintott oldal nem frissül, és semmi sem történik azzal az oldallal.
A Void operátor és a 0 operandusként való használatának fontossága
A void operátort bármilyen kifejezéssel használhatja. A JavaScriptben azonban többnyire 0-val használják operandusként. Íme néhány eset a Void (0) operátor használatára:
A navigáció megakadályozása
Normál esetben, ha rákattint egy linkre, az valószínűleg egy új oldalra vezet. Létrehozhatunk egy projektet, amely bemutatja, hogyan működik. Két fájl lesz a projektemben: index.html és nextPage.html.
Ezt a kódot a következőképpen adhatja hozzá különböző fájlokhoz:
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>
Nézd meg ezt a videót:
Amint látja, a gombra kattintva navigálhat a „Kezdőlap”-ról a „Következő oldalra”.
Most bevezethetjük a navigációt blokkoló void (0) operátort. Adja hozzá ezt a kódot az index.html-hez:
<!-- 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>
Nézze meg ezt a videót, amikor megnyomja a „Kattintson” gombot:
Láthatja, hogy a gombra kattintás után ez a figyelmeztetés: „A gomb kattintott, de nincs navigáció!” megjelenik, de nem navigálunk a következő oldalra.
Önvégrehajtó névtelen funkciók
Az önvégrehajtó névtelen függvény vagy azonnal meghívott függvénykifejezés (IIFE) olyan függvény, amelyet a létrehozás után határoznak meg és hajtanak végre. Az ilyen függvények célja, hogy privát hatókört hozzanak létre a változókhoz, amelyek megakadályozzák, hogy ezek a függvények szennyezzék a globális hatókört.
Vessen egy pillantást erre a kódra:
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);
}();
Ez egy önvégrehajtó funkció, amely összeadja az összes számot 1-től 10-ig, és a kód végrehajtása után megjeleníti az eredményeket.
A kód futtatásakor a kimenet a következő lesz: „A számok összege 1-től 10-ig: 55”.
A JavaScript és a Void 0 kombinálása
A void operátor nem kizárólagos a JavaScript számára, mivel más programozási nyelveken is elérhető, mint például a C és a C++. Ennek az operátornak a használata azonban nyelvenként eltérő. Például a void egy adattípus a C és C++ programozási nyelvekben, és nem operátor.
A JavaScript a ‘void’ kulcsszót numerikus nullával együtt használja. A void () operátor használatával megakadályozhatja az alapértelmezett viselkedést, például a böngészőt a következő URL-re navigálásra. Ez egy tökéletes példa egy kódblokkra, amely a JavaScriptet a void () operátorral kombinálja.
<a href="https://wilku.top/javascript-void-0-explained-in-just-5-minutes/javascript:void(0);" onclick="myFunction()">Click me</a>
Használhatja a void () operátort is, hogy meghatározatlan primitív értéket kapjon. Vessen egy pillantást erre a kódblokkra:
const result = void(0);const result = void(0);
Amikor futtatod, undefined lesz.
Mik a Void (0) előnyei?
A JavaScriptben a void () operátort használjuk „void” vagy „undefined” értékek létrehozására. Íme néhány előnye annak, ha ezt az operátort használja a kódban:
- Navigáció megakadályozása: A href attribútumban használhatjuk a void(0) Operatort, ha meg akarjuk akadályozni, hogy a böngészők egy hivatkozásra vagy gombra kattintva új oldalra navigáljanak. Ez a kódblokk bemutatja, hogyan működik:
<a href="https://wilku.top/javascript-void-0-explained-in-just-5-minutes/javascript:void(0);" onclick="myFunction();">Click me</a>
- Nem definiált értékek visszaadása függvényekből: Fejlesztőként használhatja a void () operátort, hogy kifejezetten undefined-et adjon vissza, ha kódkonzisztenciát szeretne az alkalmazásban. Nézze meg ezt a kódblokkot:
function myFunction() {
// do something
return void(0);
}
- Kerülje az „undefined” hozzárendelést: A void () karaktert úgy használhatja, hogy az „undefined” egyenértékű az „eredménnyel”. Stiláris választásként is használhatod. Ez a kódblokk megmutatja, hogyan érheti el ezt:
let result = void(0);
- Tegye olvashatóbbá a kódot: A kódolvashatóságot nem szabad figyelmen kívül hagynunk, különösen, ha nagy alkalmazásokkal foglalkozunk. Használhatja a void()-t, ha kifejezetten el szeretné vetni a visszatérési értéket, és tudatni szeretné más fejlesztőkkel, hogy a függvény nem ad vissza semmit. Ez a kódblokk megmutatja, hogyan érheti el ezt:
function myFunction() {
// Do something...
return void(0);
}
Az érvénytelenség lehetséges biztonsági kockázatai (0)
Annak ellenére, hogy a void (0) különféle esetekben hasznos a JavaScriptben, veszélyes is lehet, ha nem megfelelően használják. Íme néhány olyan eset, amikor a void (0) rosszindulatú felhasználásra kerülhet:
- Parancsfájl-befecskendezési sebezhetőségek: A parancsfájl-injektálás támadásainak kockázata fennáll, ha a void () operátornak átadott érték nincs megtisztítva és érvényesítve. Jó példa erre, amikor ez az érték dinamikusan jön létre a felhasználói bevitel alapján.
<a href="https://wilku.top/javascript-void-0-explained-in-just-5-minutes/javascript:void(alert("This could be malicious!'));">Click me</a>
Egy ilyen kódblokk lehetővé teszi a felhasználók számára, hogy rosszindulatú kódot adjanak be.
- Clickjacking: A támadók void operátorokat használhatnak átlátszó/láthatatlan rétegek létrehozására egy weboldalon. Az ilyen támadók ezután ezeket a rétegeket arra használják, hogy rávegyék a felhasználókat, hogy rosszindulatú hivatkozásokra és gombokra kattintsanak.
- Használható a tartalombiztonsági házirend (CSP) megkerülésére: A legtöbb webhely-tulajdonos CSP-t használ a webhelyek közötti parancsfájlok (XSS) támadásainak megakadályozására. A CSP segítségével korlátozhatja a weboldalain betölthető szkriptek és erőforrások jellegét. A void () operátor használata azonban ütközhet az ilyen intézkedésekkel, mivel még a tartalombiztonsági szabályzat által nem engedélyezett szkripteket is betölti.
Az érvénytelenítés alternatívái (0)
A technológia folyamatosan változik, és a programozás is. Vannak, akik a void (0)-t elavult operátornak tekintik. Íme néhány a modern fejlesztők által használt alternatívák közül:
- Az event.preventDefault(): Az event.preventDefault() segítségével megakadályozhatja, hogy egy esemény megtörténjen. Egy ilyen nyilatkozat megakadályozhatja, hogy a felhasználók űrlapot küldjenek be, vagy a következő oldalra lépjenek.
Ezek a kódrészletek az event.preventDefault használatát mutatják be:
#html <a href="#" onclick="event.preventDefault()">My Link</a>
#JavaScript
document.querySelector('a').addEventListener('click', event => event.preventDefault());
- Használja a #-t href értékként: Az alkalmazás különböző oldalai összekapcsolódnak az egyszerű navigáció érdekében. A # jel használata a href-ként biztosítja, hogy a felhasználók ugyanazon az oldalon maradjanak. Ezt a megközelítést az event.prevetDefault() paraméterrel együtt használhatja, hogy megakadályozza, hogy a weboldal a tetejére görgessen. Ezt így érheti el:
#html <a href="#">My Link</a>
#JavaScript
document.querySelector('a').addEventListener('click', event => {
event.preventDefault();
window.scrollTo(0, 0);
});
- Null használata: A meghatározatlan helyett null értéket adhat vissza. Ezt így érheti el:
let result = null;
GYIK
Mi az a JavaScript?
A JavaScript egy programozási nyelv, amelyet leggyakrabban front-end fejlesztésben használnak. Ezt a nyelvet azonban a háttérfejlesztés során használják olyan keretrendszerekkel, mint a Node.js. A JavaScriptet többnyire más előtér-technológiákkal, például a CSS-sel és a HTML-lel használják, hogy interaktivitást adjon a weboldalaknak.
Mi az a JavaScript Void 0?
A JavaScript Void 0 egy olyan operátor, amely az alapértelmezett műveletek megakadályozására szolgál. Például a void (0) használatával megakadályozhatja a navigációt, amikor a felhasználó egy hivatkozásra vagy gombra kattint. Ha egy érvénytelen kódot (0) tartalmazó hivatkozásra kattintanak, a böngésző megpróbál navigálni, de az eredményeket nem definiáltra értékeli.
Vannak alternatívák az érvénytelenség (0) helyett?
Igen. A legtöbb modern fejlesztő eseményfigyelőket használ kódjában a void (0) helyett. Ez a megközelítés megkönnyíti a különféle funkciók kezelését és megakadályozza az alapértelmezett viselkedést a forráskódokban.
Biztonságos a void (0) használata?
A void (0) használatával megakadályozhatja az alapértelmezett viselkedést és az önvégrehajtó függvényeket. A void (0) azonban veszélyes lehet, ha nem használod tudatosan a kódodban. Például egy ilyen operátor megkönnyítheti a rosszindulatú kód beszúrását, ha alkalmazza a felhasználói bemenetekre.
Következtetés
A JavaScript egy nagyon tág programozási nyelv, és időbe telhet, mire elsajátítja a legtöbb koncepcióját.
Megtanítottuk, hogy mi a void (0) operátor fontossága és használati esetei, valamint alternatívái. Most már azt is megérti, hogyan lehet kombinálni a JavaScriptet és a void(0)-t a potenciális kockázatokkal, amelyekkel valószínűleg találkozni fog, ha ezt az operátort használja.
A jobb kódvégrehajtás érdekében felfedezhet néhány legjobb JavaScript futási környezetet is.