Οι μεταβλητές JavaScript μπορούν να δηλωθούν με 4 τρόπους:
Αυτομάτως
Χρησιμοποιώντας το var
Χρησιμοποιώντας το let
Χρησιμοποιώντας το const
Σε αυτό το πρώτο παράδειγμα, x, y και z είναι μη δηλωμένες μεταβλητές.
Δηλώνονται αυτόματα κατά την πρώτη χρήση:
x = 5;
y = 6;
z = x + y;Δοκιμάστε το μόνοι σας →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>In this example, x, y, and z are undeclared.</p>
<p>They are automatically declared when first used.</p>
<p id="demo"></p>
<script>
x = 5;
y = 6;
z = x + y;
document.getElementById("demo").innerHTML =
"The value of z is: " + z;
</script>
</body>
</html>
Θεωρείται καλή πρακτική προγραμματισμού να δηλώνετε πάντα μεταβλητές πριν από τη χρήση.
Από τα παραδείγματα μπορείτε να μαντέψετε:
Το x αποθηκεύει την τιμή 5
y αποθηκεύει την τιμή 6
Το z αποθηκεύει την τιμή 11
var x = 5;
var y = 6;
var z = x + y;Δοκιμάστε το μόνοι σας →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>In this example, x, y, and z are variables.</p>
<p id="demo"></p>
<script>
var x = 5;
var y = 6;
var z = x + y;
document.getElementById("demo").innerHTML =
"The value of z is: " + z;
</script>
</body>
</html>
Η λέξη-κλειδί var χρησιμοποιήθηκε σε όλο τον κώδικα JavaScript από το 1995 έως το 2015.
Οι λέξεις-κλειδιά let και const προστέθηκαν στο JavaScript το 2015.
Η λέξη-κλειδί var θα πρέπει να χρησιμοποιείται μόνο σε κώδικα που έχει γραφτεί για παλαιότερα προγράμματα περιήγησης.
let x = 5;
let y = 6;
let z = x + y;Δοκιμάστε το μόνοι σας →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>In this example, x, y, and z are variables.</p>
<p id="demo"></p>
<script>
let x = 5;
let y = 6;
let z = x + y;
document.getElementById("demo").innerHTML =
"The value of z is: " + z;
</script>
</body>
</html>
const x = 5;
const y = 6;
const z = x + y;Δοκιμάστε το μόνοι σας →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>In this example, x, y, and z are variables.</p>
<p id="demo"></p>
<script>
const x = 5;
const y = 6;
const z = x + y;
document.getElementById("demo").innerHTML =
"The value of z is: " + z;
</script>
</body>
</html>
const price1 = 5;
const price2 = 6;
let total = price1 + price2;Δοκιμάστε το μόνοι σας →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>In this example, price1, price2, and total are variables.</p>
<p id="demo"></p>
<script>
const price1 = 5;
const price2 = 6;
let total = price1 + price2;
document.getElementById("demo").innerHTML =
"The total is: " + total;
</script>
</body>
</html>
Οι δύο μεταβλητές price1 και price2 δηλώνονται με τη λέξη-κλειδί const.
Αυτές είναι σταθερές τιμές και δεν μπορούν να αλλάξουν.
Η μεταβλητή total δηλώνεται με τη λέξη-κλειδί let.
Η τιμή total μπορεί να αλλάξει.
1. Να δηλώνετε πάντα μεταβλητές
2. Χρησιμοποιείτε πάντα const εάν η τιμή δεν πρέπει να αλλάξει
3. Χρησιμοποιείτε πάντα const εάν ο τύπος δεν πρέπει να αλλάξει (Πίνακες και αντικείμενα)
4. Χρησιμοποιήστε μόνο let εάν δεν μπορείτε να χρησιμοποιήσετε το const
5. Χρησιμοποιήστε μόνο var εάν ΠΡΕΠΕΙ να υποστηρίζετε παλιά προγράμματα περιήγησης.
Όπως και στην άλγεβρα, οι μεταβλητές έχουν τιμές:
let x = 5;
let y = 6;Όπως και στην άλγεβρα, οι μεταβλητές χρησιμοποιούνται στις εκφράσεις:
let z = x + y;Από το παραπάνω παράδειγμα, μπορείτε να μαντέψετε ότι το σύνολο υπολογίζεται σε 11.
Οι μεταβλητές είναι δοχεία για την αποθήκευση τιμών.
Όλες οι μεταβλητές JavaScript πρέπει να είναι ταυτοποιήθηκε με μοναδικά ονόματα.
Αυτά τα μοναδικά ονόματα ονομάζονται αναγνωριστικά.
Τα αναγνωριστικά μπορεί να είναι σύντομα ονόματα (όπως x και y) ή περισσότερα περιγραφικά ονόματα (ηλικία, άθροισμα, συνολικός όγκος).
Οι γενικοί κανόνες για την κατασκευή ονομάτων για μεταβλητές (μοναδικά αναγνωριστικά) είναι:
Τα ονόματα μπορεί να περιέχουν γράμματα, ψηφία, κάτω παύλες και σύμβολα δολαρίου.
Τα ονόματα πρέπει να ξεκινούν με ένα γράμμα.
Τα ονόματα μπορούν επίσης να ξεκινούν με $και _ (αλλά δεν θα τα χρησιμοποιήσουμε σε αυτό το σεμινάριο).
Τα ονόματα κάνουν διάκριση πεζών-κεφαλαίων (y και Y είναι διαφορετικές μεταβλητές).
Οι δεσμευμένες λέξεις (όπως οι λέξεις-κλειδιά JavaScript) δεν μπορούν να χρησιμοποιηθούν ως ονόματα.
Τα αναγνωριστικά JavaScript κάνουν διάκριση πεζών-κεφαλαίων.
Στη JavaScript, το σύμβολο ίσου (=) είναι τελεστής "ανάθεσης" και όχι τελεστής "ίσο με".
Αυτό είναι διαφορετικό από την άλγεβρα. Το παρακάτω δεν έχει νόημα άλγεβρα:
x = x + 5 Στο JavaScript, ωστόσο, είναι απολύτως λογικό: εκχωρεί την τιμή του x + 5 στο Χ.
(Υπολογίζει την τιμή του x + 5 και βάζει το αποτέλεσμα στο x. Η τιμή του x προσαυξάνεται κατά 5.)
Ο τελεστής "ίσο με" είναι γραμμένος όπως == στο JavaScript.
Οι μεταβλητές JavaScript μπορούν να περιέχουν αριθμούς όπως 100 και τιμές κειμένου όπως "John Ελαφίνα".
Στον προγραμματισμό, οι τιμές κειμένου ονομάζονται συμβολοσειρές κειμένου.
Η JavaScript μπορεί να χειριστεί πολλούς τύπους δεδομένων, αλλά προς το παρόν, σκεφτείτε απλώς αριθμούς και συμβολοσειρές.
Οι συμβολοσειρές γράφονται σε διπλά ή μονά εισαγωγικά. Γράφονται αριθμοί χωρίς εισαγωγικά.
Εάν βάλετε έναν αριθμό σε εισαγωγικά, θα αντιμετωπιστεί ως συμβολοσειρά κειμένου.
const pi = 3.14;
let person = "John Doe";
let answer = 'Yes I am!';Δοκιμάστε το μόνοι σας →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>Strings are written with quotes.</p>
<p>Numbers are written without quotes.</p>
<p id="demo"></p>
<script>
const pi = 3.14;
let person = "John Doe";
let answer = 'Yes I am!';
document.getElementById("demo").innerHTML =
pi + "<br>" + person + "<br>" + answer;
</script>
</body>
</html>
Η δημιουργία μιας μεταβλητής σε JavaScript ονομάζεται "δήλωση" μιας μεταβλητής.
Δηλώνετε μια μεταβλητή JavaScript με τη λέξη-κλειδί var ή τη λέξη-κλειδί let:
var carName;let carName;Μετά τη δήλωση, η μεταβλητή δεν έχει τιμή (τεχνικά είναι απροσδιόριστο).
Για να εκχωρήσετε μια τιμή στη μεταβλητή, χρησιμοποιήστε το σύμβολο ίσου:
carName = "Volvo";Μπορείτε επίσης να εκχωρήσετε μια τιμή στη μεταβλητή όταν τη δηλώνετε:
let carName = "Volvo";Στο παρακάτω παράδειγμα, δημιουργούμε μια μεταβλητή που ονομάζεται carName και εκχωρούμε την τιμή "Volvo" σε αυτό.
Στη συνέχεια "εξάγουμε" την τιμή μέσα σε μια παράγραφο HTML με id="demo":
<p id="demo"></p>
<script>
let carName = "Volvo";
document.getElementById("demo").innerHTML = carName;
</script>Δοκιμάστε το μόνοι σας →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>Create a variable, assign a value to it, and display it:</p>
<p id="demo"></p>
<script>
let carName = "Volvo";
document.getElementById("demo").innerHTML = carName;
</script>
</body>
</html>
Είναι μια καλή πρακτική προγραμματισμού να δηλώνετε όλες τις μεταβλητές στην αρχή ενός σεναρίου.
Μπορείτε να δηλώσετε πολλές μεταβλητές σε μία πρόταση.
Ξεκινήστε τη δήλωση με αφήστε και διαχωρίστε τις μεταβλητές με κόμμα:
let person = "John Doe", carName = "Volvo", price = 200;Δοκιμάστε το μόνοι σας →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>You can declare many variables in one statement.</p>
<p id="demo"></p>
<script>
let person = "John Doe", carName = "Volvo", price = 200;
document.getElementById("demo").innerHTML = carName;
</script>
</body>
</html>
Μια δήλωση μπορεί να εκτείνεται σε πολλές γραμμές:
let person = "John Doe",
carName = "Volvo",
price = 200;Δοκιμάστε το μόνοι σας →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>You can declare many variables in one statement.</p>
<p id="demo"></p>
<script>
let person = "John Doe",
carName = "Volvo",
price = 200;
document.getElementById("demo").innerHTML = carName;
</script>
</body>
</html>
Στα προγράμματα υπολογιστών, οι μεταβλητές δηλώνονται συχνά χωρίς τιμή. Η αξία μπορεί να είναι κάτι που πρέπει να υπολογιστεί ή κάτι που θα παρασχεθεί αργότερα, όπως εισαγωγή χρήστη.
Μια μεταβλητή που δηλώνεται χωρίς τιμή θα έχει την τιμή undefined.
Η μεταβλητή carName θα έχει την τιμή undefined μετά την εκτέλεση αυτής της πρότασης:
let carName;Δοκιμάστε το μόνοι σας →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>A variable without a value has the value of:</p>
<p id="demo"></p>
<script>
let carName;
document.getElementById("demo").innerHTML = carName;
</script>
</body>
</html>
Εάν δηλώσετε ξανά μια μεταβλητή JavaScript που έχει δηλωθεί με var, δεν θα χάσει την αξία της.
Η μεταβλητή carName θα εξακολουθεί να έχει την τιμή "Volvo" μετά την εκτέλεση αυτών των εντολών:
var carName = "Volvo";
var carName;Δοκιμάστε το μόνοι σας →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>If you re-declare a JavaScript variable, it will not lose its value.</p>
<p id="demo"></p>
<script>
var carName = "Volvo";
var carName;
document.getElementById("demo").innerHTML = carName;
</script>
</body>
</html>
Δεν μπορείτε να δηλώσετε ξανά μια μεταβλητή που έχει δηλωθεί με let ή const.
Αυτό δεν θα λειτουργήσει:
let carName = "Volvo";
let carName;Όπως και με την άλγεβρα, μπορείτε να κάνετε αριθμητική με μεταβλητές JavaScript, χρησιμοποιώντας τελεστές όπως = και +:
let x = 5 + 2 + 3;Δοκιμάστε το μόνοι σας →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>The result of adding 5 + 2 + 3 is:</p>
<p id="demo"></p>
<script>
let x = 5 + 2 + 3;
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
Μπορείτε επίσης να προσθέσετε συμβολοσειρές, αλλά οι συμβολοσειρές θα ενωθούν:
let x = "John" + " " + "Doe";Δοκιμάστε το μόνοι σας →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>The result of adding "John" + " " + "Doe" is:</p>
<p id="demo"></p>
<script>
let x = "John" + " " + "Doe";
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
Δοκιμάστε επίσης αυτό:
let x = "5" + 2 + 3;Δοκιμάστε το μόνοι σας →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>The result of adding "5" + 2 + 3 is:</p>
<p id="demo"></p>
<script>
let x = "5" + 2 + 3;
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
Εάν βάλετε έναν αριθμό σε εισαγωγικά, οι υπόλοιποι αριθμοί θα αντιμετωπίζονται ως συμβολοσειρές και θα συνδέονται.
Τώρα δοκιμάστε αυτό:
let x = 2 + 3 + "5";Δοκιμάστε το μόνοι σας →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>The result of adding 2 + 3 + "5" is:</p>
<p id="demo"></p>
<script>
let x = 2 + 3 + "5";
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
Εφόσον η JavaScript αντιμετωπίζει ένα σύμβολο δολαρίου ως γράμμα, τα αναγνωριστικά που περιέχουν $είναι έγκυρα ονόματα μεταβλητών:
let $ = "Hello World";
let $$$ = 2;
let $myMoney = 5;Δοκιμάστε το μόνοι σας →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>The dollar sign is treated as a letter in JavaScript names.</p>
<p id="demo"></p>
<script>
let $$$ = 2;
let $myMoney = 5;
document.getElementById("demo").innerHTML = $$$ + $myMoney;
</script>
</body>
</html>
Η χρήση του σήματος του δολαρίου δεν είναι πολύ συνηθισμένη στο JavaScript, αλλά οι επαγγελματίες προγραμματιστές το χρησιμοποιούν συχνά ως ψευδώνυμο για την κύρια συνάρτηση σε μια βιβλιοθήκη JavaScript.
Στη βιβλιοθήκη JavaScript jQuery, για παράδειγμα, η κύρια συνάρτηση Το $ χρησιμοποιείται για την επιλογή στοιχείων HTML. Στο jQuery $ ("p"); σημαίνει "επιλογή όλων των στοιχείων p".
Εφόσον η JavaScript αντιμετωπίζει την υπογράμμιση ως γράμμα, τα αναγνωριστικά που περιέχουν _ είναι έγκυρα ονόματα μεταβλητών:
let _lastName = "Johnson";
let _x = 2;
let _100 = 5;Δοκιμάστε το μόνοι σας →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>The underscore is treated as a letter in JavaScript names.</p>
<p id="demo"></p>
<script>
let _x = 2;
let _100 = 5;
document.getElementById("demo").innerHTML = _x + _100;
</script>
</body>
</html>
Η χρήση της υπογράμμισης δεν είναι πολύ συνηθισμένη στο JavaScript, αλλά μια σύμβαση μεταξύ των επαγγελματιών προγραμματιστών είναι να το χρησιμοποιούν ως ψευδώνυμο για μεταβλητές "ιδιωτικές (κρυφές)".