JavaScript este un limbaj de scripting care poate fi folosit atât în dezvoltarea front-end, cât și în back-end. Cu acest limbaj de programare, puteți crea conținut care se actualizează dinamic, puteți anima imagini și controlați multimedia.
JavaScript are sute de cadre și biblioteci și este, de asemenea, cel mai folosit limbaj de programare, potrivit Statistica.
JavaScript are diferiți operatori creați pentru a îndeplini diferite roluri. În acest articol, voi explica ce este JavaScript Void (0), importanța sa, cazurile și beneficiile sale de utilizare, potențialele riscuri de securitate și alternativele sale.
Cuprins
Ce este operatorul Void (0)?
În dicționarele noastre, void înseamnă „nu este valabil” sau „complet gol”. Void (0) este un operator care verifică o valoare dată și returnează nedefinit. O funcție este considerată nulă dacă nu returnează nimic. Operatorul void (0) poate fi utilizat în multe zone.
De exemplu, puteți avea JavaScript returnat nedefinit când faceți clic pe o etichetă de ancorare. Când se întâmplă acest lucru, înseamnă că pagina pe care faceți clic nu va fi reîmprospătată și nu se va întâmpla nimic cu pagina respectivă.
Importanța utilizării operatorului Void și 0 ca operand
Puteți utiliza operatorul void cu orice expresie. Cu toate acestea, în JavaScript, este folosit în mare parte cu 0 ca operand. Iată câteva cazuri de utilizare ale operatorului Void (0):
Preveniți navigarea
În ocazii normale, dacă faceți clic pe un link, probabil că vă va duce la o pagină nouă. Putem crea un proiect pentru a demonstra cum funcționează. Voi avea două fișiere pe proiectul meu: index.html și nextPage.html.
Puteți adăuga acest cod la diferite fișiere, după cum urmează:
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>
Urmăriți acest videoclip:
După cum puteți vedea, puteți naviga de la „Acasă” la „Pagina următoare” făcând clic pe butonul.
Acum putem introduce operatorul void (0) care blochează navigarea. Adăugați acest cod la 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>
Urmăriți acest videoclip când apăsăm butonul „Clic pe mine”:
Puteți vedea că, după ce faceți clic pe butonul, această alertă, „Button clicked, but no navigation!” apare, dar nu navigăm la pagina următoare.
Funcții anonime auto-executive
O funcție anonimă care se execută automat sau o expresie de funcție invocată imediat (IIFE) este o funcție care este definită și executată după creare. Astfel de funcții sunt concepute pentru a crea un domeniu privat pentru variabile care împiedică aceste funcții să polueze domeniul global.
Aruncă o privire la acest cod:
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);
}();
Aceasta este o funcție care se execută automat, care adaugă toate numerele de la 1 la 10 și afișează rezultatele odată ce codul este executat.
Când rulați codul, rezultatul va fi: „Suma numerelor de la 1 la 10 este: 55”.
Cum să combinați JavaScript și Void 0
Operatorul void nu este exclusiv JavaScript, deoarece este disponibil în alte limbaje de programare precum C și C++. Cu toate acestea, utilizarea acestui operator variază de la o limbă la alta. De exemplu, void este un tip de date în limbajele de programare C și C++ și nu un operator.
JavaScript folosește cuvântul cheie „void” cu zero numeric. Puteți utiliza operatorul void () pentru a preveni comportamentul implicit, cum ar fi navigarea browserului la următoarea adresă URL. Acesta este un exemplu perfect de bloc de cod care combină JavaScript cu operatorul void ().
<a href="https://wilku.top/javascript-void-0-explained-in-just-5-minutes/javascript:void(0);" onclick="myFunction()">Click me</a>
De asemenea, puteți utiliza operatorul void () pentru a obține o valoare primitivă nedefinită. Aruncă o privire la acest bloc de cod:
const result = void(0);const result = void(0);
Când îl rulați, veți deveni nedefinit.
Ce sunt beneficiile Void (0)?
În JavaScript, folosim operatorul void () pentru a crea valori „void” sau „nedefinite”. Acestea sunt câteva dintre beneficiile utilizării acestui operator în codul dvs.:
- Împiedicați navigarea: putem folosi operatorul void(0) din atributul href dacă dorim să împiedicăm browserele să navigheze la o pagină nouă atunci când facem clic pe un link sau un buton. Acest bloc de cod ilustrează cum funcționează:
<a href="https://wilku.top/javascript-void-0-explained-in-just-5-minutes/javascript:void(0);" onclick="myFunction();">Click me</a>
- Returnează valori nedefinite din funcții: în calitate de dezvoltator, puteți utiliza operatorul void () pentru a returna în mod explicit nedefinit atunci când doriți coerența codului în aplicația dvs. Verificați acest bloc de cod:
function myFunction() {
// do something
return void(0);
}
- Evitați atribuirea „nedefinită”: puteți utiliza void () în așa fel încât „nedefinit” să fie echivalent cu „rezultatul”. Îl poți folosi și ca alegere stilistică. Acest bloc de cod arată cum puteți realiza acest lucru:
let result = void(0);
- Faceți codul mai lizibil: Lizibilitatea codului nu este ceva pe care ar trebui să-l ignorăm, mai ales când avem de-a face cu aplicații mari. Puteți utiliza void() atunci când doriți să renunțați în mod explicit la valoarea returnată și să faceți cunoscut altor dezvoltatori că funcția nu va returna nimic. Acest bloc de cod arată cum puteți realiza acest lucru:
function myFunction() {
// Do something...
return void(0);
}
Riscuri potențiale de securitate ale nulității (0)
Chiar dacă void (0) este util în diferite cazuri în JavaScript, se poate dovedi și periculos dacă nu este utilizat corect. Acestea sunt câteva dintre cazurile în care void (0) ar putea fi folosit cu răutate:
- Vulnerabilitati de injectare de script: Există riscuri potențiale de atacuri de injectare de script dacă valoarea transmisă operatorului void () nu este dezinfectată și validată. Un bun exemplu este atunci când această valoare este generată dinamic pe baza intrării utilizatorului.
<a href="https://wilku.top/javascript-void-0-explained-in-just-5-minutes/javascript:void(alert("This could be malicious!'));">Click me</a>
Un astfel de bloc de cod permite utilizatorilor să injecteze cod rău intenționat.
- Clickjacking: Atacatorii pot folosi operatori void pentru a crea straturi transparente/invizibile pe o pagină web. Astfel de atacatori vor folosi apoi aceste straturi pentru a păcăli utilizatorii să facă clic pe linkuri și butoane rău intenționate.
- Poate fi folosit pentru a ocoli Politica de securitate a conținutului (CSP): Majoritatea proprietarilor de site-uri folosesc CSP pentru a preveni atacurile de tip cross-site scripting (XSS). Puteți utiliza CSP pentru a restricționa natura scripturilor și a resurselor pe care paginile dvs. web ar trebui să le încarce. Cu toate acestea, utilizarea operatorului void () poate intra în conflict cu astfel de măsuri, deoarece încarcă chiar și scripturile nepermise de politica de securitate a conținutului.
Alternative la void (0)
Tehnologia continuă să se schimbe, la fel și programarea. Unii oameni văd void (0) ca un operator învechit. Acestea sunt câteva dintre alternativele pe care le folosesc dezvoltatorii moderni:
- Utilizați event.preventDefault(): Puteți utiliza event.preventDefault() pentru a preveni acțiunea unui eveniment. O astfel de declarație poate împiedica utilizatorii să trimită un formular sau să navigheze la pagina următoare.
Aceste fragmente de cod arată cum să utilizați event.preventDefault:
#html <a href="#" onclick="event.preventDefault()">My Link</a>
#JavaScript
document.querySelector('a').addEventListener('click', event => event.preventDefault());
- Utilizați # ca valoare href: diferite pagini dintr-o aplicație sunt interconectate pentru o navigare ușoară. Utilizarea # ca href asigură că utilizatorii rămân pe aceeași pagină. Puteți utiliza această abordare împreună cu event.prevetDefault() pentru a preveni derularea paginii dvs. web în partea de sus. Iată cum puteți realiza acest lucru:
#html <a href="#">My Link</a>
#JavaScript
document.querySelector('a').addEventListener('click', event => {
event.preventDefault();
window.scrollTo(0, 0);
});
- Utilizați null: puteți returna o valoare nulă în loc de nedefinită. Iată cum puteți realiza acest lucru:
let result = null;
Întrebări frecvente
Ce este JavaScript?
JavaScript este un limbaj de programare utilizat în principal în dezvoltarea front-end. Cu toate acestea, acest limbaj este folosit în dezvoltarea back-end cu cadre precum Node.js. JavaScript este folosit mai ales cu alte tehnologii front-end, cum ar fi CSS și HTML, pentru a adăuga interactivitate paginilor web.
Ce este JavaScript Void 0?
JavaScript Void 0 este un operator care este utilizat pentru a preveni acțiunea implicită. De exemplu, puteți utiliza void (0) pentru a împiedica navigarea atunci când un utilizator face clic pe un link sau un buton. Când se face clic pe un link dintr-un cod cu void (0), browserul încearcă să navigheze, dar rezultatele sunt evaluate ca nedefinite.
Există alternative la void (0)?
Da. Majoritatea dezvoltatorilor moderni folosesc ascultători de evenimente în loc de void (0) în codul lor. Această abordare facilitează gestionarea diferitelor funcții și împiedică comportamentul implicit în codurile sursă.
Este sigură utilizarea void (0)?
Puteți utiliza void (0) pentru a preveni comportamentul implicit și cu funcții care se execută automat. Cu toate acestea, void (0) poate fi periculos dacă nu îl utilizați în mod conștient în codul dvs. De exemplu, un astfel de operator poate facilita injectarea de cod rău intenționat dacă este aplicat intrărilor utilizatorilor.
Concluzie
JavaScript este un limbaj de programare foarte larg și este posibil să aveți nevoie de timp înainte de a stăpâni majoritatea conceptelor sale.
Am învățat care este operatorul void (0) importanța și cazurile de utilizare și alternativele sale. De asemenea, acum înțelegeți cum să combinați JavaScript și void(0) potențialele riscuri pe care probabil le veți întâlni atunci când utilizați acest operator.
De asemenea, puteți explora unele dintre cele mai bune medii JavaScript Runtime pentru o mai bună execuție a codului.