Η JavaScript είναι μια γλώσσα δέσμης ενεργειών που μπορεί να χρησιμοποιηθεί τόσο στην ανάπτυξη front-end όσο και σε back-end. Με αυτήν τη γλώσσα προγραμματισμού, μπορείτε να δημιουργήσετε περιεχόμενο που ενημερώνεται δυναμικά, να ζωντανεύει εικόνες και να ελέγχετε τα πολυμέσα.
Η JavaScript έχει εκατοντάδες πλαίσια και βιβλιοθήκες και είναι επίσης η πιο χρησιμοποιούμενη γλώσσα προγραμματισμού, σύμφωνα με το Statista.
Η JavaScript έχει διάφορους τελεστές που έχουν δημιουργηθεί για την επίτευξη διαφορετικών ρόλων. Σε αυτό το άρθρο, θα εξηγήσω τι είναι το JavaScript Void (0), τη σημασία του, τις περιπτώσεις χρήσης και τα οφέλη του, τους πιθανούς κινδύνους ασφαλείας και τις εναλλακτικές του.
Πίνακας περιεχομένων
Τι είναι ο τελεστής Void (0);
Στα λεξικά μας, void σημαίνει «μη έγκυρο» ή «εντελώς κενό». Το Void (0) είναι ένας τελεστής που ελέγχει μια δεδομένη τιμή και επιστρέφει απροσδιόριστη. Μια συνάρτηση θεωρείται άκυρη εάν δεν επιστρέφει τίποτα. Ο χειριστής void (0) μπορεί να χρησιμοποιηθεί σε πολλές περιοχές.
Για παράδειγμα, μπορείτε να έχετε απροσδιόριστη επιστροφή JavaScript όταν κάνετε κλικ σε μια ετικέτα αγκύρωσης. Όταν συμβεί αυτό, σημαίνει ότι η σελίδα στην οποία κάνετε κλικ δεν θα ανανεωθεί και δεν θα συμβεί τίποτα σε αυτήν τη σελίδα.
Σημασία χρήσης του τελεστή Void και του 0 ως τελεστή
Μπορείτε να χρησιμοποιήσετε τον τελεστή κενού με οποιαδήποτε έκφραση. Ωστόσο, στη JavaScript, χρησιμοποιείται κυρίως με 0 ως τελεστή. Ακολουθούν ορισμένες περιπτώσεις χρήσης του τελεστή Void (0):
Αποτρέψτε την πλοήγηση
Σε κανονικές περιπτώσεις, εάν κάνετε κλικ σε έναν σύνδεσμο, πιθανότατα θα σας μεταφέρει σε μια νέα σελίδα. Μπορούμε να δημιουργήσουμε ένα έργο για να δείξουμε πώς λειτουργεί. Θα έχω δύο αρχεία στο έργο μου: index.html και nextPage.html.
Μπορείτε να προσθέσετε αυτόν τον κώδικα σε διαφορετικά αρχεία ως εξής:
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>
Δείτε αυτό το βίντεο:
Όπως μπορείτε να δείτε, μπορείτε να πλοηγηθείτε από την «Αρχική» στην «Επόμενη σελίδα» κάνοντας κλικ στο κουμπί.
Μπορούμε τώρα να εισαγάγουμε τον τελεστή void (0) που εμποδίζει την πλοήγηση. Προσθέστε αυτόν τον κώδικα στο 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>
Δείτε αυτό το βίντεο όταν πατήσουμε το κουμπί “Κάντε κλικ με”:
Μπορείτε να δείτε ότι αφού κάνετε κλικ στο κουμπί, αυτή η ειδοποίηση, “Έγινε κλικ στο κουμπί, αλλά όχι πλοήγηση!” εμφανίζεται, αλλά δεν μεταβαίνουμε στην επόμενη σελίδα.
Αυτοεκτελούμενες ανώνυμες συναρτήσεις
Μια αυτοεκτελούμενη ανώνυμη συνάρτηση ή μια έκφραση συνάρτησης με άμεση κλήση (IIFE) είναι μια συνάρτηση που ορίζεται και εκτελείται μετά τη δημιουργία. Τέτοιες λειτουργίες έχουν σχεδιαστεί για να δημιουργούν ένα ιδιωτικό πεδίο για μεταβλητές που εμποδίζουν αυτές τις λειτουργίες να μολύνουν το παγκόσμιο εύρος.
Ρίξτε μια ματιά σε αυτόν τον κωδικό:
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);
}();
Αυτή είναι μια αυτο-εκτελούμενη συνάρτηση που προσθέτει όλους τους αριθμούς από το 1-10 και εμφανίζει τα αποτελέσματα μόλις εκτελεστεί ο κώδικας.
Όταν εκτελείτε τον κωδικό, η έξοδος θα είναι: “Το άθροισμα των αριθμών από το 1 έως το 10 είναι: 55”.
Πώς να συνδυάσετε JavaScript και Void 0
Ο τελεστής κενού δεν είναι αποκλειστικός στο JavaScript, καθώς είναι διαθέσιμος σε άλλες γλώσσες προγραμματισμού όπως η C και η C++. Ωστόσο, η χρήση αυτού του τελεστή διαφέρει από τη μια γλώσσα στην άλλη. Για παράδειγμα, το void είναι ένας τύπος δεδομένων στις γλώσσες προγραμματισμού C και C++ και όχι τελεστής.
Η JavaScript χρησιμοποιεί τη λέξη-κλειδί «κενό» με το αριθμητικό μηδέν. Μπορείτε να χρησιμοποιήσετε τον τελεστή void () για να αποτρέψετε την προεπιλεγμένη συμπεριφορά, όπως η πλοήγηση του προγράμματος περιήγησης στην επόμενη διεύθυνση URL. Αυτό είναι ένα τέλειο παράδειγμα μπλοκ κώδικα που συνδυάζει JavaScript με τον τελεστή void ().
<a href="https://wilku.top/javascript-void-0-explained-in-just-5-minutes/javascript:void(0);" onclick="myFunction()">Click me</a>
Μπορείτε επίσης να χρησιμοποιήσετε τον τελεστή void () για να αποκτήσετε μια απροσδιόριστη αρχική τιμή. Ρίξτε μια ματιά σε αυτό το μπλοκ κώδικα:
const result = void(0);const result = void(0);
Όταν το εκτελέσετε, θα γίνετε απροσδιόριστος.
Τι είναι τα οφέλη του Void (0);
Στο JavaScript, χρησιμοποιούμε τον τελεστή void () για να δημιουργήσουμε τιμές “void” ή “undefined”. Αυτά είναι μερικά από τα οφέλη της χρήσης αυτού του τελεστή στον κώδικά σας:
- Αποτροπή πλοήγησης: Μπορούμε να χρησιμοποιήσουμε τον χειριστή void(0) στο χαρακτηριστικό href εάν θέλουμε να εμποδίσουμε τα προγράμματα περιήγησης να πλοηγηθούν σε μια νέα σελίδα όταν κάνουμε κλικ σε έναν σύνδεσμο ή ένα κουμπί. Αυτό το μπλοκ κώδικα δείχνει πώς λειτουργεί:
<a href="https://wilku.top/javascript-void-0-explained-in-just-5-minutes/javascript:void(0);" onclick="myFunction();">Click me</a>
- Επιστροφή ακαθόριστων τιμών από συναρτήσεις: Ως προγραμματιστής, μπορείτε να χρησιμοποιήσετε τον τελεστή void () για να επιστρέψετε ρητά απροσδιόριστες όταν θέλετε συνοχή κώδικα στην εφαρμογή σας. Ελέγξτε αυτό το μπλοκ κωδικών:
function myFunction() {
// do something
return void(0);
}
- Αποφύγετε την ανάθεση «απροσδιόριστου»: Μπορείτε να χρησιμοποιήσετε το void () με τέτοιο τρόπο ώστε το «απροσδιόριστο» να είναι ισοδύναμο με το «αποτέλεσμα». Μπορείτε να το χρησιμοποιήσετε και ως στυλιστική επιλογή. Αυτό το μπλοκ κώδικα δείχνει πώς μπορείτε να το πετύχετε αυτό:
let result = void(0);
- Κάντε τον κώδικα πιο ευανάγνωστο: Η αναγνωσιμότητα κώδικα δεν είναι κάτι που πρέπει να αγνοήσουμε, ειδικά όταν έχουμε να κάνουμε με μεγάλες εφαρμογές. Μπορείτε να χρησιμοποιήσετε τη void() όταν θέλετε να απορρίψετε ρητά την τιμή επιστροφής και να γνωστοποιήσετε σε άλλους προγραμματιστές ότι η συνάρτηση δεν θα επιστρέψει τίποτα. Αυτό το μπλοκ κώδικα δείχνει πώς μπορείτε να το πετύχετε αυτό:
function myFunction() {
// Do something...
return void(0);
}
Πιθανοί κίνδυνοι ασφάλειας του Void (0)
Παρόλο που το void (0) είναι χρήσιμο σε διάφορες περιπτώσεις στο JavaScript, μπορεί επίσης να αποδειχθεί επικίνδυνο εάν δεν χρησιμοποιηθεί σωστά. Αυτές είναι μερικές από τις περιπτώσεις όπου το void (0) μπορεί να χρησιμοποιηθεί κακόβουλα:
- Ευπάθειες εισαγωγής σεναρίου: Υπάρχουν πιθανοί κίνδυνοι επιθέσεων ένεσης σεναρίου, εάν η τιμή που μεταβιβάστηκε στον χειριστή void () δεν απολυμανθεί και επικυρωθεί. Ένα καλό παράδειγμα είναι όταν αυτή η τιμή δημιουργείται δυναμικά με βάση την είσοδο του χρήστη.
<a href="https://wilku.top/javascript-void-0-explained-in-just-5-minutes/javascript:void(alert("This could be malicious!'));">Click me</a>
Ένα τέτοιο μπλοκ κώδικα επιτρέπει στους χρήστες να εισάγουν κακόβουλο κώδικα.
- Clickjacking: Οι εισβολείς μπορούν να χρησιμοποιήσουν κενούς τελεστές για να δημιουργήσουν διαφανή/αόρατα επίπεδα σε μια ιστοσελίδα. Τέτοιοι εισβολείς θα χρησιμοποιήσουν στη συνέχεια αυτά τα επίπεδα για να εξαπατήσουν τους χρήστες να κάνουν κλικ σε κακόβουλους συνδέσμους και κουμπιά.
- Μπορεί να χρησιμοποιηθεί για την παράκαμψη της Πολιτικής Ασφάλειας Περιεχομένου (CSP): Οι περισσότεροι ιδιοκτήτες ιστότοπων χρησιμοποιούν CSP για να αποτρέψουν επιθέσεις μεταξύ δέσμης ενεργειών (XSS). Μπορείτε να χρησιμοποιήσετε το CSP για να περιορίσετε τη φύση των σεναρίων και των πόρων που θα πρέπει να φορτώσουν οι ιστοσελίδες σας. Ωστόσο, η χρήση του τελεστή void () μπορεί να έρχεται σε σύγκρουση με τέτοια μέτρα, καθώς φορτώνει ακόμη και τα σενάρια που δεν επιτρέπονται από την πολιτική ασφάλειας περιεχομένου.
Εναλλακτικές για το άκυρο (0)
Η τεχνολογία αλλάζει συνεχώς, όπως και ο προγραμματισμός. Μερικοί άνθρωποι βλέπουν το void (0) ως ξεπερασμένο τελεστή. Αυτές είναι μερικές από τις εναλλακτικές που χρησιμοποιούν οι σύγχρονοι προγραμματιστές:
- Use event.preventDefault(): Μπορείτε να χρησιμοποιήσετε το event.preventDefault() για να αποτρέψετε την πραγματοποίηση της ενέργειας ενός συμβάντος. Μια τέτοια δήλωση μπορεί να εμποδίσει τους χρήστες να υποβάλουν μια φόρμα ή να πλοηγηθούν στην επόμενη σελίδα.
Αυτά τα αποσπάσματα κώδικα δείχνουν πώς να χρησιμοποιήσετε το event.preventDefault:
#html <a href="#" onclick="event.preventDefault()">My Link</a>
#JavaScript
document.querySelector('a').addEventListener('click', event => event.preventDefault());
- Χρησιμοποιήστε το # ως την τιμή href: Διαφορετικές σελίδες σε μια εφαρμογή συνδέονται μεταξύ τους για εύκολη πλοήγηση. Η χρήση του # ως href διασφαλίζει ότι οι χρήστες παραμένουν στην ίδια σελίδα. Μπορείτε να χρησιμοποιήσετε αυτήν την προσέγγιση μαζί με την event.prevetDefault() για να αποτρέψετε την κύλιση της ιστοσελίδας σας στην κορυφή. Έτσι μπορείτε να το πετύχετε:
#html <a href="#">My Link</a>
#JavaScript
document.querySelector('a').addEventListener('click', event => {
event.preventDefault();
window.scrollTo(0, 0);
});
- Χρήση null: Μπορείτε να επιστρέψετε μια μηδενική τιμή αντί για μη καθορισμένη. Έτσι μπορείτε να το πετύχετε:
let result = null;
Συχνές ερωτήσεις
Τι είναι η JavaScript;
Η JavaScript είναι μια γλώσσα προγραμματισμού που χρησιμοποιείται κυρίως στην ανάπτυξη front-end. Ωστόσο, αυτή η γλώσσα χρησιμοποιείται στην ανάπτυξη back-end με πλαίσια όπως το Node.js. Η JavaScript χρησιμοποιείται κυρίως με άλλες τεχνολογίες διεπαφής όπως CSS και HTML για να προσθέσει διαδραστικότητα σε ιστοσελίδες.
Τι είναι το JavaScript Void 0;
Το JavaScript Void 0 είναι ένας τελεστής που χρησιμοποιείται για να αποτρέψει την προεπιλεγμένη ενέργεια. Για παράδειγμα, μπορείτε να χρησιμοποιήσετε το void (0) για να αποτρέψετε την πλοήγηση όταν ένας χρήστης κάνει κλικ σε έναν σύνδεσμο ή ένα κουμπί. Όταν γίνεται κλικ σε έναν σύνδεσμο από έναν κωδικό με κενό (0), το πρόγραμμα περιήγησης επιχειρεί να πλοηγηθεί, αλλά τα αποτελέσματα αξιολογούνται ως απροσδιόριστα.
Υπάρχουν εναλλακτικές λύσεις για το void (0);
Ναί. Οι περισσότεροι σύγχρονοι προγραμματιστές χρησιμοποιούν προγράμματα ακρόασης συμβάντων αντί για void (0) στον κώδικά τους. Αυτή η προσέγγιση διευκολύνει τον χειρισμό διαφόρων λειτουργιών και αποτρέπει την προεπιλεγμένη συμπεριφορά στους πηγαίους κώδικες.
Είναι ασφαλής η χρήση του void (0);
Μπορείτε να χρησιμοποιήσετε το void (0) για να αποτρέψετε την προεπιλεγμένη συμπεριφορά και με λειτουργίες αυτόματης εκτέλεσης. Ωστόσο, το void (0) μπορεί να είναι επικίνδυνο εάν δεν το χρησιμοποιήσετε συνειδητά στον κώδικά σας. Για παράδειγμα, ένας τέτοιος χειριστής μπορεί να διευκολύνει την εισαγωγή κακόβουλου κώδικα εάν εφαρμοστεί στις εισόδους του χρήστη.
συμπέρασμα
Η JavaScript είναι μια πολύ ευρεία γλώσσα προγραμματισμού και μπορεί να χρειαστείτε χρόνο για να κατακτήσετε τις περισσότερες έννοιές της.
Έχουμε διδάξει ποια είναι η σημασία του τελεστή κενού (0) και οι περιπτώσεις χρήσης και οι εναλλακτικές του. Τώρα καταλαβαίνετε επίσης πώς να συνδυάσετε JavaScript και να ακυρώσετε(0) τους πιθανούς κινδύνους που είναι πιθανό να αντιμετωπίσετε όταν χρησιμοποιείτε αυτόν τον τελεστή.
Μπορείτε επίσης να εξερευνήσετε μερικά καλύτερα περιβάλλοντα χρόνου εκτέλεσης JavaScript για καλύτερη εκτέλεση κώδικα.