Εισηγητής

ΜΙΧΑΛΗΣ ΚΑΣΑΠΟΓΛΟΥ

Κατηγορία

PROGRAMMING

Στο σημερινό δωρεάν μάθημα JavaScript θα δούμε τους διάφορους τρόπους να ελέγχουμε την ροή εκτέλεσης του κώδικα μας. Επειδή έχουμε αρκετή θεωρία να καλύψουμε, θα χωρίσουμε την θεωρία μας σε δύο ενότητες. Σε αυτό το δωρεάν μάθημα JavaScript θα καλύψουμε το πρώτο μέρος.

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

Αυτό πρόκειται να το αλλάξουμε καθώς θα δώσουμε την δυνατότητα στα προγράμματά μας να ελέγχουν τις εισερχόμενες τιμές (ή γενικότερα τις τιμές που παίρνουν οι μεταβλητές) και αντίστοιχα να παίρνουν κάποιες αποφάσεις. Πριν όμως προχωρήσουμε σε αυτή την νέα θεωρία, ας βεβαιωθούμε πως καταλαβαίνουμε την ευρύτερη έννοια του code block.

Ένα block κώδικα θεωρείται εκείνο που μέσα σε άγκιστρα (curly brackets) περιέχει μια ή και περισσότερες γραμμές κώδικα. Για παράδειγμα, ένα πολύ απλό block κώδικα είναι το εξής:

Επίσης επιτρέπεται να έχουμε nested blocks δηλαδή blocks μέσα σε blocks.

Ο τρόπος να ελέγχουμε την ροή εκτέλεσης του κώδικα μας είναι να χρησιμοποιούμε το if, έτσι ώστε με βάση κάποια συνθήκη που θα ορίσουμε, να παίρνει και τις αντίστοιχες αποφάσεις. Η σύνταξη του if statement, όπως ονομάζεται, αποτελείται από τρία μέρη:

• Το if με το οποίο ξεκινάει ο κώδικας
• Αμέσως μετά και μέσα σε παρενθέσεις είναι η συνθήκη που χρησιμοποιείται για την σύγκριση
• Και τέλος το block του κώδικα που θα εκτελεστεί εφόσον η συνθήκη είναι true (δηλαδή αληθεύει). Το block του κώδικα είναι μέσα σε curly brackets.

Η συνθήκη μέσα στην παρένθεση πάντα επιστρέφει Boolean τιμή και μπορεί να περιέχει τους παρακάτω τελεστές:

• Local Operators: !, &&, ||
• Comparison Operators: ===, !==, > κτλ.
• Οποιαδήποτε τιμή ή μεταβλητή που μπορεί να μετατραπεί σε Boolean
• Οποιονδήποτε συνδυασμό των παραπάνω

Αν τώρα, θέλουμε να δώσουμε ακόμα περισσότερο έλεγχο και αρμοδιότητες στο if, και είτε σε true είτε σε false συνθήκες πάντα να εκτελείται ένα προκαθορισμένο αλλά διαφορετικό για κάθε περίπτωση block κώδικα, τότε δεν έχουμε παρά να προσθέσουμε το else σαν δεύτερη επιλογή. Με αυτό το τρόπο είμαστε απόλυτα σίγουροι ότι όποιο και αν είναι το αποτέλεσμα της συνθήκης, το πρόγραμμα μας θα ακολουθήσει μια από τις δύο επιλογές που έχουμε προκαθορίσει.

Το μεγάλο πλεονέκτημα όμως του if/else συνδυασμού δεν είναι μόνο ο έλεγχος της ροής του κώδικα, αλλά και το γεγονός ότι μπορούμε να ελέγξουμε πολλαπλές συνθήκες (με την χρήση πολλαπλών συνδυασμών if/else) και όταν μια από αυτές επαληθευτεί να τρέξει ο κώδικας που ανήκει μόνο σε αυτή την συνθήκη. Τους υπόλοιπους συνδυασμούς if/else, από την στιγμή που επαληθεύτηκε ένας από αυτούς, τους παραλείπει η JavaScript και συνεχίζει με το υπόλοιπο πρόγραμμα. Πριν δούμε ένα παράδειγμα με πολλαπλά if/else ας αναφέρουμε το γεγονός ότι συνήθως κλείνουμε τους συνδυασμούς των if/else με ένα else το οποίο θα ενεργοποιηθεί αν κανένας από τους προηγούμενους συνδυασμούς δεν είναι true. Με αυτό τον τρόπο για ακόμη μια φορά έχουμε τον απόλυτο έλεγχο του αποτελέσματος.

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

Μπορούμε επίσης να έχουμε και if else conditions μέσα σε άλλο if else. Όταν αυτό συμβαίνει το ονομάζουμε nested conditions.

Αν θέλουμε να δούμε ένα πιο πρακτικό παράδειγμα εφαρμόζοντας την θεωρία που έχουμε μάθει μέχρι τώρα, θα μπορούσε να είναι το εξής: θέλουμε κατά την διάρκεια εκτέλεσης της εφαρμογής μας να χρησιμοποιήσουμε μια μεταβλητή αφότου της έχει ανατεθεί κάποια τιμή πρώτα. Ειδάλλως, όπως ήδη έχουμε δει στις αρχικές ενότητες, μια μεταβλητή χωρίς τιμή θα επιστρέψει “undefined”. Το typeof πάντα επιστρέφει string και μπορούμε να συγκρίνουμε αυτό το string με την λέξη “undefined”.

Πριν κλείσουμε το πρώτο μέρος αυτής της δωρεάν ενότητας JavaScript, ας δούμε και ένα εναλλακτικό τρόπο γραφής ενός απλού if/else που ονομάζεται ternary operator.

Αν και είναι πολύ νωρίς για να δούμε web εφαρμογές, μπορείτε να δείτε στο παρακάτω παράδειγμα πως χρησιμοποιούμε το if/else statement σε ένα μενού επιλογών.

ΕΙΣΗΓΗΤΗΣ

Μιχάλης Κασάπογλου

Ο Μιχάλης Κασάπογλου, είναι ένας από τους πιο έμπειρους τεχνικούς εκπαιδευτές στον χώρο του προγραμματισμού με πάνω από 20 χρόνια εμπειρία. Έχει εργαστεί σαν IT Operations Manager, Senior Programmer, και Training Team Leader ενώ κατέχει και αρκετές πιστοποιήσεις που καλύπτουν ένα μεγάλο φάσμα τεχνολογιών στο προγραμματισμό, σε βάσεις δεδομένων και cloud. Στον ελεύθερο του χρόνο διατηρεί ένα τεχνολογικό blog στο οποίο θα βρείτε αρκετά δωρεάν μαθήματα προγραμματισμού για αρχάριους.