JavaScript er et scriptsprog, der kan bruges i både front-end og back-end udvikling. Med dette programmeringssprog kan du oprette indhold, der opdateres dynamisk, animere billeder og styre multimedier.
JavaScript har hundredvis af rammer og biblioteker og er også det mest brugte programmeringssprog, ifølge Statista.
JavaScript har forskellige operatører oprettet for at opnå forskellige roller. I denne artikel vil jeg forklare, hvad JavaScript Void (0) er, dets vigtighed, dets use cases og fordele, potentielle sikkerhedsrisici og dets alternativer.
Indholdsfortegnelse
Hvad er Void (0) operatoren?
I vores ordbøger betyder void ‘ikke gyldig’ eller ‘helt tom’. Void (0) er en operator, der kontrollerer en given værdi og returnerer udefineret. En funktion betragtes som ugyldig, hvis den ikke returnerer noget. Void (0) operatoren kan bruges i mange områder.
For eksempel kan du få JavaScript til at returnere udefineret, når du klikker på et ankertag. Når det sker, betyder det, at den side, du klikker på, ikke bliver opdateret, og der sker ikke noget med den side.
Vigtigheden af at bruge Void-operatoren og 0 som operand
Du kan bruge void-operatoren med ethvert udtryk. Men i JavaScript bruges det mest med 0 som operand. Her er nogle eksempler på brug af Void (0) operatoren:
Forhindre navigation
Ved normale lejligheder, hvis du klikker på et link, vil det sandsynligvis føre dig til en ny side. Vi kan lave et projekt for at demonstrere, hvordan det fungerer. Jeg vil have to filer på mit projekt: index.html og nextPage.html.
Du kan tilføje denne kode til forskellige filer som følger:
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>
Tjek denne video ud:
Som du kan se, kan du navigere fra ‘Hjem’ til ‘Næste side’ ved at klikke på knappen.
Vi kan nu introducere void (0) operatoren, der blokerer navigation. Tilføj denne kode til 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>
Tjek denne video ud, når vi trykker på knappen “Klik mig”:
Du kan se, at efter at have klikket på knappen, denne advarsel, “Knappen klikkede, men ingen navigation!” vises, men vi navigerer ikke til næste side.
Selvudførende anonyme funktioner
En selvudførende anonym funktion eller umiddelbart påkaldt funktionsudtryk (IIFE) er en funktion, der defineres og udføres efter oprettelsen. Sådanne funktioner er designet til at skabe et privat omfang for variabler, der forhindrer disse funktioner i at forurene det globale omfang.
Tag et kig på denne kode:
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);
}();
Dette er en selvudførende funktion, der tilføjer alle tallene fra 1-10 og viser resultaterne, når koden er udført.
Når du kører koden, vil outputtet være: “Summen af tal fra 1 til 10 er: 55”.
Sådan kombineres JavaScript og Void 0
Void-operatoren er ikke eksklusiv for JavaScript, da den er tilgængelig på andre programmeringssprog som C og C++. Brugen af denne operatør varierer dog fra et sprog til et andet. For eksempel er void en datatype i programmeringssprogene C og C++ og ikke en operatør.
JavaScript bruger søgeordet ‘void’ med det numeriske nul. Du kan bruge void-operatoren () til at forhindre standardadfærd, såsom at browseren navigerer til den næste URL. Dette er et perfekt eksempel på en kodeblok, der kombinerer JavaScript med operatoren void ().
<a href="https://wilku.top/javascript-void-0-explained-in-just-5-minutes/javascript:void(0);" onclick="myFunction()">Click me</a>
Du kan også bruge void () operatoren til at opnå en udefineret primitiv værdi. Tag et kig på denne kodeblok:
const result = void(0);const result = void(0);
Når du kører det, bliver du udefineret.
Hvad er Void (0) fordele?
I JavaScript bruger vi void ()-operatoren til at oprette “void” eller “udefinerede” værdier. Dette er nogle af fordelene ved at bruge denne operatør i din kode:
- Forhindre navigation: Vi kan bruge void(0) Operator i href-attributten, hvis vi vil forhindre browsere i at navigere til en ny side, når vi klikker på et link eller en knap. Denne kodeblok illustrerer, hvordan det fungerer:
<a href="https://wilku.top/javascript-void-0-explained-in-just-5-minutes/javascript:void(0);" onclick="myFunction();">Click me</a>
- Returner udefinerede værdier fra funktioner: Som udvikler kan du bruge void-operatoren () til eksplicit at returnere udefineret, når du ønsker kodekonsistens i din applikation. Tjek denne kodeblok:
function myFunction() {
// do something
return void(0);
}
- Undgå ‘undefined’ tildeling: Du kan bruge void () på en sådan måde, at ‘undefined’ svarer til ‘resultatet’. Du kan også bruge det som et stilistisk valg. Denne kodeblok viser, hvordan du kan opnå dette:
let result = void(0);
- Gør kode mere læsbar: Kodelæsbarhed er ikke noget, vi bør ignorere, især når vi har at gøre med store applikationer. Du kan bruge void(), når du eksplicit vil kassere returværdien og gøre det kendt for andre udviklere, at funktionen ikke vil returnere noget. Denne kodeblok viser, hvordan du kan opnå dette:
function myFunction() {
// Do something...
return void(0);
}
Potentielle sikkerhedsrisici for ugyldighed (0)
Selvom void (0) er nyttig i forskellige tilfælde i JavaScript, kan det også vise sig at være farligt, hvis det ikke bruges korrekt. Dette er nogle af de tilfælde, hvor void (0) kan blive brugt ondsindet:
- Script-indsprøjtningssårbarheder: Der er potentielle risici for script-injektionsangreb, hvis værdien, der sendes til void ()-operatøren ikke renses og valideres. Et godt eksempel er, når denne værdi genereres dynamisk baseret på brugerens input.
<a href="https://wilku.top/javascript-void-0-explained-in-just-5-minutes/javascript:void(alert("This could be malicious!'));">Click me</a>
En sådan kodeblok giver brugerne mulighed for at injicere ondsindet kode.
- Clickjacking: Angribere kan bruge void-operatorer til at skabe gennemsigtige/usynlige lag over en webside. Sådanne angribere vil derefter bruge disse lag til at narre brugere til at klikke på ondsindede links og knapper.
- Kan bruges til at omgå Content Security Policy (CSP): De fleste webstedsejere bruger CSP til at forhindre cross-site scripting (XSS) angreb. Du kan bruge CSP til at begrænse arten af scripts og ressourcer, som dine websider skal indlæse. Brugen af void ()-operatøren kan dog være i konflikt med sådanne foranstaltninger, da den indlæser selv de scripts, der ikke er tilladt af indholdssikkerhedspolitikken.
Alternativer til annullering (0)
Teknologien bliver ved med at ændre sig, og det samme gør programmering. Nogle mennesker ser void (0) som en forældet operatør. Dette er nogle af de alternativer, som moderne udviklere bruger:
- Brug event.preventDefault(): Du kan bruge event.preventDefault() til at forhindre handlingen af en begivenhed i at ske. En sådan erklæring kan forhindre brugere i at indsende en formular eller navigere til næste side.
Disse kodestykker viser, hvordan du bruger event.preventDefault:
#html <a href="#" onclick="event.preventDefault()">My Link</a>
#JavaScript
document.querySelector('a').addEventListener('click', event => event.preventDefault());
- Brug # som href-værdien: Forskellige sider i en applikation er forbundet med hinanden for nem navigation. Brug af # som href sikrer, at brugerne forbliver på samme side. Du kan bruge denne tilgang sammen med event.prevetDefault() for at forhindre din webside i at rulle til toppen. Sådan kan du opnå dette:
#html <a href="#">My Link</a>
#JavaScript
document.querySelector('a').addEventListener('click', event => {
event.preventDefault();
window.scrollTo(0, 0);
});
- Brug null: Du kan returnere en nulværdi i stedet for udefineret. Sådan kan du opnå dette:
let result = null;
Ofte stillede spørgsmål
Hvad er JavaScript?
JavaScript er et programmeringssprog, der oftest bruges i frontend-udvikling. Dette sprog bliver dog brugt i backend-udvikling med rammer såsom Node.js. JavaScript bruges for det meste sammen med andre frontend-teknologier som CSS og HTML for at tilføje interaktivitet til websider.
Hvad er JavaScript Void 0?
JavaScript Void 0 er en operator, der bruges til at forhindre standardhandling i at ske. For eksempel kan du bruge void (0) til at forhindre navigation, når en bruger klikker på et link eller en knap. Når der klikkes på et link fra en kode med void (0), forsøger browseren at navigere, men resultaterne evalueres til udefinerede.
Er der alternativer til void (0)?
Ja. De fleste moderne udviklere bruger begivenhedslyttere i stedet for void (0) i deres kode. Denne tilgang gør det nemt at håndtere forskellige funktioner og forhindre standardadfærd i kildekoder.
Er det sikkert at bruge void (0)?
Du kan bruge void (0) for at forhindre standardadfærd og med selvudførende funktioner. Dog kan void (0) være farligt, hvis du ikke bruger det bevidst i din kode. For eksempel kan en sådan operatør gøre det nemt at injicere ondsindet kode, hvis den anvendes på brugerinput.
Konklusion
JavaScript er et meget bredt programmeringssprog, og du kan tage tid, før du mestrer de fleste af dets koncepter.
Vi har lært, hvad void (0)-operatoren er dens betydning og brugstilfælde, og dens alternativer. Du forstår også nu, hvordan du kombinerer JavaScript og annullerer(0) de potentielle risici, du sandsynligvis vil støde på, når du bruger denne operatør.
Du kan også udforske nogle af de bedste JavaScript Runtime-miljøer for bedre kodeudførelse.