Εντολή if (εάν)

Η εντολή «if» είναι δομή απόφασης η οποία απαντά στο αν ισχύει ή δεν ισχύει μια συνθήκη μέσα σε αυτήν, έτσι μπορούμε να ελέγχουμε την ροή ενός προγράμματος.

Ας θεωρήσουμε μια ηλιόλουστη ημέρα του χειμώνα πως θέλουμε να βγούμε έξω για βόλτα. Το κριτήριο απόφασης για το αν θα πάρουμε μαζί μας μπουφάν είναι αν η θερμοκρασία είναι κάτω από 20 βαθμούς Κελσίου. Η λέξη «εάν» είναι η λέξη κλειδί στην χρήση της «if». Εάν ισχύει κάτι, τότε κάνε κάτι γι αυτό. Πχ… αν ισχύει ότι ο βαθμός του μαθήματος είναι μεγαλύτερος η ίσος του 5 τότε ο φοιτητής πέρασε το μάθημα. Η σύνταξη της έχει ως εξής:

if(συνθήκη){
 ...εντολές...
}

Όπου «συνθήκη» μπορεί να εισαχθεί κάποιος έλεγχος μέσω των συντελεστών σύγκρισης ή κάποια μεταβλητή Boolean. 

Στο παρακάτω παράδειγμα χρησιμοποιείται εμφωλευμένο script στο συμβάν «onchange» δηλαδή όταν η τιμή του πεδίου αλλάξει. 

Αρχείο: if.html

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8"></meta>
  <title>Δοκιμή της if</title>
 </head>
 <body>
  Εισάγετε εναν βαθμό μαθήματος: <input type='text' name='temp' id='temp' onchange='if(this.value>=5){alert("Πέρασες!");}'>
 </body>
</html>

Το παραπάνω με την χρήση μεθόδων, μπορεί να γραφτεί και ως: 

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8"></meta>
  <title>Δοκιμή της if</title>
  <script type='text/javascript'>
   function check(x){
    if(x>=5){
     alert("Πέρασες!");
    }
   }
  </script>
 </head>
 <body>
  Εισάγετε εναν βαθμό μαθήματος: <input type='text' name='temp' id='temp' onchange='check(this.value);'>
 </body>
</html>

Όταν εισάγουμε μια τιμή από 5 και πάνω στο πεδίο κειμένου τότε θα μας εμφανιστεί το παρακάτω μήνυμα: 

else (αλλιώς)

Το «else» συνήθως χρησιμοποιείται όταν κάποιος θέλει να λάβει υπόψη του όλες τις άλλες περιπτώσεις εκτός από αυτή που ελέγχει εκείνη την στιγμή με το «if». Εκτελείται το μέρος του κώδικα μέσα στην «else» αν η συνθήκη μέσα στην «if» είναι ψευδής Δηλαδή στο παράδειγμα της ηλιόλουστης ημέρας του χειμώνα, θα μπορούσε να συμπεριληφθεί ένα αποτέλεσμα στην περίπτωση που η θερμοκρασία ήταν σε οποιοδήποτε άλλο επίπεδο θερμοκρασίας, πχ. 

Αρχείο: ifelse_jacket.html

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8"></meta>
  <title>Δοκιμή της if-else</title>
 </head>
 <body>
  Εισάγετε την παρούσα θερμοκρασία:
  <input type='text' name='temp' id='temp' onchange='if(this.value<20){alert("Πρέπει να πάρεις μπουφάν!");}else{alert("Δεν χρειάζεται να πάρεις μπουφάν!");}'>
 </body>
</html>

Στο εμφωλευμένο script ο κώδικας ακολουθεί την συνοχή της ίδιας γραμμής, χωρίς να τονίζονται οι διαφορές στα επίπεδα στα οποία μπαίνουμε με αλλαγή γραμμής ή στοίχισης. Αυτό γίνεται καθότι βρισκόμαστε μέσα σε μια ιδιότητα ενός αντικειμένου html και έτσι δεν μπορούμε να χρησιμοποιήσουμε «enter» μέσα σε αυτήν. Το παραπάνω μπορεί να γραφτεί και με την χρήση μεθόδων ως εξής:

Αρχείο: ifelse_jacket_2.html

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8"></meta>
  <title>Δοκιμή της if-else</title>
  <script type='text/javascript'>
   function check_temp(x){
    if(x<20){ //η θερμοκρασία είναι κάτω από 20 ;
     alert("Πρέπει να πάρεις μπουφάν!"); //αν ναι τυπώνεται
    } else { //αν όχι πηγαίνουμε εδώ
     alert("Δεν χρειάζεται να πάρεις μπουφάν!"); // και τυπώνεται αυτό
    }
   }
  </script>
 </head>
 <body>
  Εισάγετε την παρούσα θερμοκρασία:
  <input type='text' name='temp' id='temp' onchange='check_temp(this.value);'>
 </body>
</html>

Με το «else» ο κώδικας μας έγινε λίγο πιο πλήρης και έτσι ότι τιμή και να εισάγουμε μέσα στο πεδίο κειμένου θα μας επιστραφεί μια απάντηση.

Αποτέλεσμα:

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

Συμπεριλαμβάνοντας έτσι το «else», βοηθάμε διευκρινίζοντας το τι γίνεται σε όλες τις άλλες περιπτώσεις, από αυτή που το πρόγραμμα μας θα εκτελούσε ένα ευτυχές σενάριο. Αν το πρόγραμμα μας ήταν να μας υποδεικνύει πότε να πάρουμε μπουφάν με βάση την θερμοκρασία του περιβάλλοντος τότε το να συμπεριλάβουμε το πότε ΔΕΝ χρειάζεται να πάρουμε μπουφάν, είναι προφανώς κάτι που απαιτείται, καθώς ένας απλός χρήστης του προγράμματος δεν θα καταλάβει ότι το πρόγραμμα «λειτουργεί» αν δεν του εμφανίσει τίποτα ως αποτέλεσμα. 

Τι γίνεται όμως όταν θέλουμε να διακρίνουμε αυτή την διαφορά σε περισσότερα μέρη ; 

else if (αλλιώς εάν)

Ας θεωρήσουμε πως μπουφάν φοράμε από τους 15 βαθμούς Κελσίου και κάτω. Από τους 15 έως τους 22 παίρνουμε ζακέτα, και από 22 και πάνω δεν παίρνουμε τίποτα.

Αρχείο: elseif_jacket.html (με εμφωλευμένο script)

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8"></meta>
  <title>Δοκιμή της else-if</title>
 </head>
 <body>
  Εισάγετε την παρούσα θερμοκρασία:
  <input type='text' name='temp' id='temp' onchange='if(this.value<=15){alert("Πρέπει να πάρεις μπουφάν!");}else if(this.value>15 && this.value<22){alert("Πρέπει να πάρεις ζακέτα.");}else if(this.value>=22){alert("Δεν χρειάζεται να πάρεις μπουφάν η ζακέτα.");}'>
 </body>
</html>

Αρχείο: elseif_jacket2.html (ξεχωριστό script)

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8"></meta>
  <title>Δοκιμή της else-if</title>
  <script type='text/javascript'>
   function check_temp(x){
    if(x<=15){
     alert("Πρέπει να πάρεις μπουφάν!");
    }else if(x>15 && x<22){
     alert("Πρέπει να πάρεις ζακέτα.");
    }else if(x>=22){
     alert("Δεν χρειάζεται να πάρεις μπουφάν η ζακέτα.");
    }
   }
  </script>
 </head>
 <body>
  Εισάγετε την παρούσα θερμοκρασία:
  <input type='text' name='temp' id='temp' onchange='check_temp(this.value);'>
 </body>
</html>

Αποτέλεσμα: