Πανεπιστήμιο Αιγαίου Σχολή Κοινωνικών Επιστημών Τμήμα Πολιτισμικής Τεχνολογίας Και Επικοινωνίας ικτυακά Πολυμέσα Ι (Β Έτος, 3ο εξ) ιάλεξη #8η: Javascript: Τεχνικές εντοπισμού/διόρθωσης λαθών, τελεστές, δομές ελέγχου, βρόχοι επανάληψης Γαβαλάς Δαμιανός dgavalas@aegean.gr Χειμερινό εξάμηνο Τεχνικές εντοπισμού & διόρθωσης λαθών στη Javascript 1
Τεχνικές εντοπισμού λαθών (debugging) στη Javascript (I) Τεχνικές εντοπισμού λαθών (debugging) στη Javascript (II) Κατηγορίες λαθών: Συντακτικά λάθη Λογικά λάθη Στις περισσότερες γλώσσες προγραμματισμού τα συντακτικά λάθη εντοπίζονται κατά τη μεταγλώττιση (compilation) H Javascript είναι script γλώσσα, άρα ο κώδικας δεν μεταγλωττίζεται Τυχόν συντακτικά λάθη αναφέρονται από τους browsers που εκτελούν το Javascript κώδικα, που ωστόσο δεν είναι σχεδιασμένοι για να αναφέρουν λάθη (οι περιγραφές λαθών δεν είναι πάντοτε ιδιαίτερα βοηθητικές) 2
Τεχνικές εντοπισμού λαθών (debugging) στη Javascript (IΙI) Τεχνικές για πιο γρήγορη / αποδοτική αποσφαλμάτωση: Γράφουμε τον κώδικα τμηματικά ελέγχοντας κάθε φορά την ορθή λειτουργία των νέων τμημάτων κώδικα Εξασφαλίζοντας ότι ο κώδικας που έχουμε ήδη γράψει τρέχει σωστά, συνεχίζουμε παρακάτω Απομονώνουμε σε σχόλια ένα τμήμα του κώδικα (ώστε να μην εκτελείται) και ελέγχουμε την ορθότητα του υπολοίπου κώδικα. Αν ο υπόλοιπος κώδικας είναι σωστός, απομονώνουμε σε σχόλια ένα όλο και μικρότερο τμήμα ώστε σιγά-σιγά να εντοπίσουμε την προβληματική γραμμή κώδικα που προκαλεί σφάλμα Χρησιμοποιούμε μηνύματα (π.χ. γιαναδούμετην τρέχουσα τιμή μεταβλητών), μέσω alerts Οι τελεστές της Javascript 3
Τελεστές (operators) Tι είναιοιτελεστές: σύμβολα που εκτελούν έναν υπολογισμό, μία σύγκριση ή μια άλλη πράξη με μία, δύο ή περισσότερες τιμές Εώς τώρα γνωρίσαμε τους τελεστές εκχώρησης (=) και πρόσθεσης (+) Τύποι τελεστών: Μαθηματικοί τελεστές Τελεστές εκχώρησης Τελεστές σύγκρισης Λογικοί τελεστές Bitwise τελεστές Μαθηματικοί τελεστές Τελεστής Πρόσθεση Αφαίρεση Πολλα/σμός ιαίρεση Υπόλοιπο διαίρεσης Αύξηση κατά ένα Μείωση κατά ένα Άρνηση Σύμβολο + - * / % ++ -- - Λειτουργία Προσθέτει τιμές: var sum = a + b + c; Αφαιρεί τιμές: var result = a b; Πολλα/ζει τιμές: var product = a * b * c; ιαιρεί τιμές: var result = a / b; To result μπορεί να είναι δεκαδικός (float), χρειάζεται προηγούμενος έλεγχος ότι b 0. ίνει το υπόλοιπο διαίρεσης, π.χ. var result = 10 % 3; Το result θα εξισωθεί με 1. Αυξάνει την τιμή μιας μεταβλητής κατά 1. π.χ. αν var a = 7; Τότε η εντολή a++ ή ++α θα αυξήσει την τιμή του a κατά 1 (ισοδυναμεί με α = α + 1) Μειώνει την τιμή μεταβλητής κατά 1: α-- ή α Αντιστρέφει το πρόσημο, π.χ. α=-5 ή α=-(-10) 4
Χρήση τελεστών αύξησης (++) και μείωσης (--) Χρήση τελεστή αύξησης πριν τον τελεστέο: var num = 2; var result = ++num; Επειδή ο τελεστής αύξησης (++) τοποθετήθηκε πριν τον τελεστέο (num), ο num θα αυξηθεί πρώτα κατά ένα και στη συνέχεια θα εκχωρηθεί νέα τιμή στη μεταβλητή result, δηλαδή τελικά: num=3, result=3 Χρήση τελεστή αύξησης μετά τον τελεστέο: var num = 2; var result = num++; Επειδή ο τελεστής αύξησης (++) τοποθετήθηκε μετά τον τελεστέο (num), η τιμήτουnum θα εκχωρηθεί πρώτα στη μεταβλητή result και στη συνέχεια ο num θα αυξηθεί κατά ένα, δηλαδή τελικά: result=2, num=3 Ηίδια φιλοσοφία εφαρμόζεται και στους τελεστές μείωσης (--) Τελεστές εκχώρησης τιμής Τελεστής Εκχώρηση τιμής Πρόσθεση και εκχώρηση Αφαίρεση και εκχώρηση Πολλα/σμός και εκχώρηση ιαίρεση και εκχώρηση Υπόλοιπο και εκχώρηση Σύμβολο = += -= *= /= %= Εκχωρείται η τιμή της μεταβλητής που βρίσκεται στα δεξιά του τελεστή στη μεταβλητή που βρίσκεται αριστερά του: var a = b; Προσθέτει την τιμή που βρίσκεται στα δεξιά του τελεστή στην τρέχουσα τιμή της μεταβλητής που βρίσκεται αριστερά του και εκχωρεί το αποτέλεσμα στη μεταβλητή αυτή, π.χ: α=7; a+=5; (ισοδυναμεί με α = α + 5, δηλαδή α=12) α=7; a -= 5; α = 2 α=7; a *= 5; α=15; a /= 3; α=10; a %= 3; Λειτουργία α = 35 α = 5 α = 1 5
Τελεστές σύγκρισης Τελεστής Ίσο Άνισο, διάφορο Μεγαλύτερο από Μικρότερο από Μεγαλύτερο ήίσο Μικρότερο ή ίσο Σύμβολο ==!= > < >= <= Λειτουργία Επιστρέφει αν οι τιμές εκατέρωθεν του τελεστή είναι ίσες, διαφορετικά Επιστρέφει αν οι τιμές εκατέρωθεν του τελεστή είναι άνισες, διαφορετικά Επιστρέφει αν η τιμή αριστερά είναι μεγαλύτερη της τιμής δεξιά του τελεστή Επιστρέφει αν η τιμή αριστερά είναι μικρότερη της τιμής δεξιά του τελεστή Επιστρέφει αν η τιμή αριστερά είναι μεγαλύτερη ή ίση της τιμής δεξιά του τελεστή Επιστρέφει αν η τιμή αριστερά είναι μικρότερη ή ίση της τιμής δεξιά του τελεστή Παραδείγματα με τελεστές σύγκρισης Σύγκριση (4+2)==(11-5) Επιστρεφόμενη τιμή Σύγκριση (6+1) >= 7 Επιστρεφόμενη τιμή (5-1)!= (6-2) -1 > 0 ab c == abc Q > q ( ab + cd ) == ( abc + d ) quit > Quit ( ab + cd )!= ( ab + cd ) A <= a a = 5; (++a) >= 6 a = 5; a += 2; (a++) == 8 a = 5; (a--) < 5 a = 5; a *= 2; a >= 10 6
Λογικοί τελεστές Τελεστής AND OR NOT Σύμβολο &&! Λειτουργία Σύζευξη (λογικό και ). Επιστρέφει αν οι εκφράσεις που βρίσκονται εκατέρωθεν του τελεστή είναι ΚΑΙ ΟΙ ΥΟ. Σε οποιαδήποτε άλλη περίπτωση επιστρέφει ιάζευξη (λογικό ή ). Επιστρέφει ΜΙΑ ΜΟΝΟ ή και οι δύο εκφράσεις που βρίσκονται εκατέρωθεν του τελεστή είναι. Επιστρέφει μόνο αν και οι δύο εκφράσεις είναι Άρνηση. Επιστρέφει αν η έκφραση που βρίσκεται δεξιά του τελεστή είναι, διαφορετικά επιστρέφει Παραδείγματα με λογικούς τελεστές Σύγκριση (5!=6 ) && (7 == 8-1)! ((5!=6 ) && (7 == 8-1)) (1==1)&& (2 == 2) ((1 == 1 ) && (2 == 3)) (5 > 4) a = 5;! ((a++) >= 6) Επιστρεφόμενη τιμή Σύγκριση! ((6+1) >= 7)! (! ((6+1) >= 7)) ( Q > q ) (1 <= 5) (1!=1)&& (2!= 2)! (3 == 3) Επιστρεφόμενη τιμή 7
ομές ελέγχου στη Javascript: if και switch ομές ελέγχου (if statement) if (συνθήκη 1) { <Εντολές που εκτελούνται αν ικανοποιείται η συνθήκη 1> } else if (συνθήκη 2) { <Εντολές που εκτελούνται αν ικανοποιείται η συνθήκη 2> } else if...... } else { <Εντολές που εκτελούνται αν δεν ικανοποιείται καμία από τις παραπάνω συνθήκες> } 8
Απλός έλεγχος με δομή If <html> aaaa <head> <title>ages</title> <script language="javascript"> function process_age(number) { if (number <= 25) return Είμαι νέος"; else return Είμαι γέρος"; } </script> </head> <body> <script language="javascript"> var age1 = 22; var age2 = 35; document.write("<h1>" + process_age(age1) + "</h1>"); document.write("<hr>"); document.write("<h1>" + process_age(age2) + "</h1>"); </script> </body> </html> Πολλαπλοί έλεγχοι με δομή If <script aaaa language="javascript"> var age = 55; if (age <= 15) document.write("<h1>είμαι παιδί</h1>"); else if (age > 15 && age <=18) document.write("<h1>είμαι έφηβος</h1>"); else if (age > 18 && age <=60) document.write("<h1>είμαι ενήλικος</h1>"); else document.write("<h1>είμαι ηλικιωμένος</h1>"); </script> 9
Φωλιασμένοι (nested) έλεγχοι Μπορείτε να κάνετε τους ίδιους <script aaaa language="javascript"> ελέγχους χωρίς διπλό if; function process_age(a, s) { (χρησιμοποιώντας τον τελεστή &&) if (a < 18) { if (s == "male") return "Είμαι ανήλικος"; else return "Είμαι ανήλικη"; } else { if (s == "male") return "Είμαι ενήλικος"; else return "Είμαι ενήλικη"; } } </script> <script language="javascript"> var age1 = 22; var sex1 = "male"; var age2 = 17; var sex2 = "female"; document.write("<h1>" + process_age(age1, sex1) + "</h1>"); document.write("<hr>"); document.write("<h1>" + process_age(age2, sex2) + "</h1>"); </script> Σύνθετοι έλεγχοι (Ι) ίσεκτα θεωρούνται τα έτη που πληρούν τις εξής δύο προϋποθέσεις: ιαιρούνται ακριβώς με το 4 Είτε ΕΝ διαιρούνται ακριβώς με το 100 είτε διαιρούνται ακριβώς με το 400 Γράψτε ένα πρόγραμμα Javascript στο οποίο αρχικά ο χρήστης πληκτρολογεί ένα έτος (μέσω ενός prompt) και στη συνέχεια το έτος αυτό περνιέται ως παράμετρος σε μία συνάρτηση (function) που επιστρέφει αν το έτος είναι δίσεκτο, διαφορετικά Εκτέλεση 10
Σύνθετοι έλεγχοι (IΙ) <script language="javascript"> function leap (y) { if ((y % 4 == 0) && ((y % 100!= 0) (y % 400 == 0))) return ; else return ; } </script> <script language="javascript"> var y = window.prompt(" ώσε ένα έτος:", ""); var year = parseint(y); if (leap (year) == ) document.write("<h1>το έτος " + year + " είναι δίσεκτο</h1>"); else document.write("<h1>το έτος " + year + " δεν είναι δίσεκτο</h1>"); </script> Πολλαπλοί έλεγχοι με τη δομή switch <html> <head> <title>name day!</title> <script language="javascript"> function name_day (name) { switch (name) { case "Γιάννης" : alert ("Γιορτάζεις στις 7 Ιανουαρίου!"); break; case "Κατερίνα" : alert ("Γιορτάζεις στις 25 Νοεμβρίου!"); break; default: alert (" εν ξέρω πότε γιορτάζεις!"); } } </script> </head> <body> <script language="javascript"> var n = window.prompt("γράψε το όνομά σου:", ""); name_day (n); </script> </body> </html> Εκτέλεση 11
Βρόγχοι (loops): for, while, do.. while Βρόγχοι Τι είναι; ομές που επιτρέπουν την επαναληπτική εκτέλεση μιας ομάδας εντολών για κάποιες φορές Γιατί είναι χρήσιμοι; Επιτρέπουν να επαναλάβουμε την εκτέλεση κάποιων γραμμών κώδικα που διαφορετικά θα έπρεπε να γράψουμε κατ επανάληψη Χρησιμοποιώντας βρόγχους μπορούμε εύκολα να αλλάξουμε το πλήθος των επαναλήψεων του κώδικα 12
Βρόγχος for ομή βρόγχου: for (Αρχική τιμή σε μεταβητή; Συνθήκη που πρέπει να ικανοποιείται για να συνεχίσει η εκτέλεση του βρόγχου; Εντολή που εκτελείται σε κάθε επανάληψη) Παράδειγμα: Ημεταβλητήi ονομάζεται μετρητής (counter) for (i=0; i<10; i++) document.write ( Το πολύ το νάνι-νάνι κάνει το παιδί χαϊβάνι ); ιαφορετικάθατογράφαμε10 φορές: document.write ( Το πολύ το νάνι-νάνι κάνει το παιδί χαϊβάνι ); document.write ( Το πολύ το νάνι-νάνι κάνει το παιδί χαϊβάνι ); document.write ( Το πολύ το νάνι-νάνι κάνει το παιδί χαϊβάνι );... document.write ( Το πολύ το νάνι-νάνι κάνει το παιδί χαϊβάνι ); Τιμωρία!!! Γράψτε για τιμωρία 1000 φορές: «εν θα ξαναπειράξω το διπλανό μου!» <script language="javascript"> for (i=1; i<=1000; i++) document.write ("<h1>" + i + ": εν θα ξαναπειράξω το διπλανό μου!</h1>"); </script> 13
Άρτιοι Περιττοί (με for loop) Τυπώστε τους αριθμούς 0 ως 1000 (αυξάνοντας κάθε φορά κατά 3), τυπώνοντας δίπλα ένα μήνυμα κατά πόσο είναιάρτιοιήπεριττοί for (i=0; i<=1000; i=i+3) if (i % 2 == 0) document.write ("<h1>" + i + ": είναι άρτιος</h1>"); else document.write ("<h1>" + i + ": είναι περιττός</h1>"); O βρόγχος while Ένας βρόγχος while ελέγχει μια συνθήκη και όσο αυτή ικανοποιείται εκτελεί μια ομάδα εντολών (οι εντολές αυτές μπορεί και να μην εκτελεσθούν ποτέ) Χρησιμοποιείται (αντί για το for) όταν δεν ξέρουμε εκ των προτέρων πόσες επαναλήψεις θέλουμε while (συνθήκη) { <εντολές που εκτελούνται όσο ικανοποιείται η συνθήκη> } Αρχικοποίηση counter var counter = 1; while (counter < 10) { document.write("<h1>counter = " + counter + "</h1>"); counter++; } Συνθήκη που πρέπει να ικανοποιείται για να εκτελείται ο βρόγχος Ο counter αυξάνεται, διαφορετικά o βρόγχος δεν θα τελειώσει ποτέ! 14
O βρόγχος while: Παράδειγμα Ο χρήστης θα δίνει (από ένα παράθυρο prompt) ένα αριθμό: πόσα είναι τα πέταλα της μαργαρίτας και θα τυπώνεται τόσες φορές (εναλλάξ) το «Μ αγαπά ε μ αγαπά» var n = window.prompt("πόσα είναι τα πέταλα της μαργαρίτας;", "") var number = parseint(n); var counter = 0; while (counter < number) { if (counter % 2 == 0) document.write("<h1>μ' αγαπά!</h1>"); else document.write("<h1> εν μ' αγαπά!</h1>"); counter++; Εκτέλεση O βρόγχος do while Ένας βρόγχος που χρησιμοποιείται αντί του while για να εξασφαλίσουμε ότι οι εντολές θα εκτελεσθούν τουλάχιστον μία φορά do { <εντολές που εκτελούνται όσο ικανοποιείται η συνθήκη> } while (συνθήκη) var counter = 1; do { document.write("<h1>counter = " + counter + "</h1>"); counter++; } while (counter < 10) 15
O βρόγχος do while: Παράδειγμα Ο χρήστης θα δίνει (από ένα παράθυρο prompt) αριθμούς οι οποίοι θα τυπώνονται. Αυτό θα επαναλαμβάνεται μέχρι ο χρήστηςναδώσειένααρνητικό αριθμό var counter = 0; var number; do { counter++; number = parseint(window.prompt(" ώσε ένα αριθμό. Αρνητικό για να σταματήσεις!", "")); document.write("<h1>" + counter + ": Πληκτρολόγησες " + number + "</h1>"); } while (number > 0) Εκτέλεση 16