Υποενότητα 6.2: Απλό αρχείο JavaScript

Μεταβλητές. "Prompt" interaction

Τι είναι μια μεταβλητή στη JavaScript;

Μπορείτε να φανταστείτε τις μεταβλητές-variables ως κουτιά.

Variables as boxes

Μπορείτε να δημιουργήσετε μια μεταβλητή και να βάλετε κάτι σε αυτήν.
Ακριβώς όπως έχετε ένα κουτί και βάζετε κάτι σε αυτό.
Μπορείτε να το πάρετε όποτε θέλετε και να το χρησιμοποιήσετε. Αργότερα μπορείτε να βάλετε κάτι άλλο στο κουτί.

Αυτό ακριβώς κάνουμε με τις μεταβλητές. Χρησιμοποιούμε μεταβλητές όλη την ώρα στο JavaScript, σύντομα να εξοικειωθείτε με αυτές.
Οι μεταβλητές συμβολίζονται με “var” ακολουθούμενο από ένα όνομα της επιλογής σας. Το όνομα εξ ορισμού μπορεί να είναι οτιδήποτε θέλετε. Ωστόσο, γενικά, χρησιμοποιούμε ονόματα που περιγράφουν τις ενέργειές μας.
Τα ονόματα δεν μπορούν να αρχίζουν με αριθμό και διαφοροποιούνται από το αν είναι πεζα ή κεφαλαί. Αυτό σημαίνει ότι η var name δεν είναι ίδια με τη var Name.

Παράδειγμα

Θα χρησιμοποιήσουμε τρία πράγματα, μια μεταβλητή και δύο μεθόδους JavaScript.
Οι μέθοδοι JavaScript είναι ενέργειες που μπορούν να εκτελεστούν σε αντικείμενα. Εδώ θα χρησιμοποιήσουμε τη μέθοδο prompt() και τη μέθοδο document.write() .

Με τη μέθοδο prompt() εμφανίζεται ένα πλαίσιο όπου ο χρήστης εισάγει το κείμενό του.
Με τη μέθοδο document.write() μπορούμε να γράψουμε κάτι στο HTML έγγραφο.

Έτσι, σε αυτή την περίπτωση, θα χρησιμοποιήσουμε τη prompt() μαζί με τη document.write() για να καλωσορίσουμε έναν επισκέπτη στη σελίδα μας. Παρατηρήστε ότι χρησιμοποιούμε διπλά εισαγωγικά "" για το κείμενο αλλά όχι για τις μεταβλητές.

<!DOCTYPE html>
<html lang="en">
  <head>
     <title>Example of prompt()</title>
   </head>
   <body>
     <h3> Example of prompt()</h3>
     <script>
         var visitorName;
         visitorName = prompt("What is your name?");
         document.write(" Welcome to my page " +visitorName + "!" );
     </script>
   </body>
</html>

Αντιγράψτε και επικολλήστε τον κώδικα στον επεξεργαστή κώδικα για να δείτε την έξοδο. Αποθηκεύστε το αρχείο στο φάκελο"temporaryFiles". Στη συνέχεια, χρησιμοποιήστε τη "Live preview" στο πρόγραμμα επεξεργασίας ή ανοίξτε το αρχείο (Ctrl+O) στον Chrome.

Περισσότερες πληροφορίες: https://www.w3schools.com/js/js_variables.asp