ικτυακά Πολυμέσα Ι (Β Έτος, 3ο εξ) ιάλεξη #8η: Javascript: Τεχνικές εντοπισμού/διόρθωσης λαθών, τελεστές, δομές ελέγχου, βρόχοι επανάληψης

Transcript

1 Πανεπιστήμιο Αιγαίου Σχολή Κοινωνικών Επιστημών Τμήμα Πολιτισμικής Τεχνολογίας Και Επικοινωνίας ικτυακά Πολυμέσα Ι (Β Έτος, 3ο εξ) ιάλεξη #8η: Javascript: Τεχνικές εντοπισμού/διόρθωσης λαθών, τελεστές, δομές ελέγχου, βρόχοι επανάληψης Χειμερινό εξάμηνο

2 Τεχνικές εντοπισμού & διόρθωσης λαθών στη Javascript

3 Τεχνικές εντοπισμού λαθών (debugging) στη Javascript (I)

4 Τεχνικές εντοπισμού λαθών (debugging) στη Javascript (II) Κατηγορίες λαθών: Συντακτικά λάθη Λογικά λάθη Στις περισσότερες γλώσσες προγραμματισμού τα συντακτικά λάθη εντοπίζονται κατά τη μεταγλώττιση (compilation) H Javascript είναι script γλώσσα, άρα ο κώδικας δεν μεταγλωττίζεται Τυχόν συντακτικά λάθη αναφέρονται από τους browsers που εκτελούν το Javascript κώδικα, που ωστόσο δεν είναι σχεδιασμένοι για να αναφέρουν λάθη (οι περιγραφές λαθών δεν είναι πάντοτε ιδιαίτερα βοηθητικές)

5 Τεχνικές εντοπισμού λαθών (debugging) στη Javascript (IΙI) Τεχνικές για πιο γρήγορη / αποδοτική αποσφαλμάτωση: Γράφουμε τον κώδικα τμηματικά ελέγχοντας κάθε φορά την ορθή λειτουργία των νέων τμημάτων κώδικα Εξασφαλίζοντας ότι ο κώδικας που έχουμε ήδη γράψει τρέχει σωστά, συνεχίζουμε παρακάτω Απομονώνουμε σε σχόλια ένα τμήμα του κώδικα (ώστε να μην εκτελείται) και ελέγχουμε την ορθότητα του υπολοίπου κώδικα. Αν ο υπόλοιπος κώδικας είναι σωστός, απομονώνουμε σε σχόλια ένα όλο και μικρότερο τμήμα ώστε σιγά-σιγά να εντοπίσουμε την προβληματική γραμμή κώδικα που προκαλεί σφάλμα Χρησιμοποιούμε μηνύματα (π.χ. για να δούμε την τρέχουσα τιμή μεταβλητών), μέσω alerts

6 Οι τελεστές της Javascript

7 Τελεστές (operators) Tι είναι οι τελεστές: σύμβολα που εκτελούν έναν υπολογισμό, μία σύγκριση ή μια άλλη πράξη με μία, δύο ή περισσότερες τιμές Εώς τώρα γνωρίσαμε τους τελεστές εκχώρησης (=) και πρόσθεσης (+) Τύποι τελεστών: Μαθηματικοί τελεστές Τελεστές εκχώρησης Τελεστές σύγκρισης Λογικοί τελεστές Bitwise τελεστές

8 Μαθηματικοί τελεστές Τελεστής Σύμβολο Λειτουργία Πρόσθεση + Προσθέτει τιμές: 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. π.χ. αν var a = 7; Τότε η εντολή a++ ή ++α θα αυξήσει την τιμή του a κατά 1 (ισοδυναμεί με α = α + 1) -- Μειώνει την τιμή μεταβλητής κατά 1: α-- ή --α Άρνηση - Αντιστρέφει το πρόσημο, π.χ. α=-5 ή α=-(-10)

9 Χρήση τελεστών αύξησης (++) και μείωσης (--) Χρήση τελεστή αύξησης πριν τον τελεστέο: 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 Η ίδια φιλοσοφία εφαρμόζεται και στους τελεστές μείωσης (--)

10 Τελεστές εκχώρησης τιμής Τελεστής Σύμβολο Λειτουργία Εκχώρηση τιμής Πρόσθεση και εκχώρηση Αφαίρεση και εκχώρηση Πολλα/σμός και εκχώρηση ιαίρεση και εκχώρηση Υπόλοιπο και εκχώρηση = Εκχωρείται η τιμή της μεταβλητής που βρίσκεται στα δεξιά του τελεστή στη μεταβλητή που βρίσκεται αριστερά του: var a = b; += Προσθέτει την τιμή που βρίσκεται στα δεξιά του τελεστή στην τρέχουσα τιμή της μεταβλητής που βρίσκεται αριστερά του και εκχωρεί το αποτέλεσμα στη μεταβλητή αυτή, π.χ: α=7; a+=5; (ισοδυναμεί με α = α + 5, δηλαδή α=12) -= α=7; a -= 5; *= α=7; a *= 5; /= α=15; a /= 3; %= α=10; a %= 3; α = 2 α = 35 α = 5 α = 1

11 Τελεστές σύγκρισης Τελεστής Σύμβολο Λειτουργία Ίσο == Επιστρέφει true αν οι τιμές εκατέρωθεν του τελεστή είναι ίσες, διαφορετικά false Άνισο, διάφορο Μεγαλύτερο από Μικρότερο από Μεγαλύτερο ήίσο Μικρότερο ή ίσο!= Επιστρέφει true αν οι τιμές εκατέρωθεν του τελεστή είναι άνισες, διαφορετικά false > Επιστρέφει true ανητιμήαριστεράείναι μεγαλύτερη της τιμής δεξιά του τελεστή < Επιστρέφει true ανητιμήαριστεράείναι μικρότερη της τιμής δεξιά του τελεστή >= Επιστρέφει true ανητιμήαριστεράείναι μεγαλύτερη ή ίση της τιμής δεξιά του τελεστή <= Επιστρέφει true ανητιμήαριστεράείναι μικρότερη ή ίση της τιμής δεξιά του τελεστή

12 Παραδείγματα με τελεστές σύγκρισης Σύγκριση Επιστρεφόμενη τιμή Σύγκριση (4+2)==(11-5) true (6+1) >= 7 (5-1)!= (6-2) false -1 > 0 Επιστρεφόμενη τιμή true false ab c == abc false Q > q false ( ab + cd ) == ( abc + d ) true quit > Quit true ( ab + cd )!= ( ab + cd ) false A <= a true a = 5; (++a) >= 6 true a = 5; (a--) < 5 false a = 5; a += 2; (a++) == 8 false a = 5; a *= 2; a >= 10 true

13 Λογικοί τελεστές Τελεστής Σύμβολο Λειτουργία AND && Σύζευξη (λογικό και ). Επιστρέφει true αν οι εκφράσεις που βρίσκονται εκατέρωθεν του τελεστήείναικαιοι ΥΟtrue. Σε οποιαδήποτε άλλη περίπτωση επιστρέφει false OR ιάζευξη (λογικό ή ). Επιστρέφει true ΜΙΑ ΜΟΝΟ ή και οι δύο εκφράσεις που βρίσκονται εκατέρωθεν του τελεστή είναι true. Επιστρέφει false μόνο αν και οι δύο εκφράσεις είναι false NOT! Άρνηση. Επιστρέφει true αν η έκφραση που βρίσκεται δεξιά του τελεστή είναι false, διαφορετικά επιστρέφει false

14 Παραδείγματα με λογικούς τελεστές Σύγκριση Επιστρεφόμενη τιμή Σύγκριση Επιστρεφόμενη τιμή (5!=6 ) && (7 == 8-1) true! ((6+1) >= 7) false! ((5!=6 ) && (7 == 8-1)) false! (! ((6+1) >= 7)) true (1==1)&& (2 == 2) true ( Q > q ) (1 <= 5) true ((1 == 1 ) && (2 == 3)) (5 > 4) true (1!=1)&& (2!= 2) false a = 5;! ((a++) >= 6) true! (3 == 3) false

15 ομές ελέγχου στη Javascript: if και switch

16 ομές ελέγχου (if statement) if (συνθήκη 1) { <Εντολές που εκτελούνται αν ικανοποιείται η συνθήκη 1> } else if (συνθήκη 2) { <Εντολές που εκτελούνται αν ικανοποιείται η συνθήκη 2> } else if } else { } <Εντολές που εκτελούνται αν δεν ικανοποιείται καμία από τις παραπάνω συνθήκες>

17 Απλός έλεγχος με δομή 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>

18 Πολλαπλοί έλεγχοι με δομή If <script aaaa language="javascript"> </script> 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) else document.write("<h1>είμαι ενήλικος</h1>"); document.write("<h1>είμαι ηλικιωμένος</h1>");

19 Φωλιασμένοι (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>

20 Σύνθετοι έλεγχοι (Ι) ίσεκτα θεωρούνται τα έτη που πληρούν τις εξής δύο προϋποθέσεις: ιαιρούνται ακριβώς με το 4 Είτε ΕΝ διαιρούνται ακριβώς με το 100 είτε διαιρούνται ακριβώς με το 400 Γράψτε ένα πρόγραμμα Javascript στο οποίο αρχικά ο χρήστης πληκτρολογεί ένα έτος (μέσω ενός prompt) και στη συνέχεια το έτος αυτό περνιέται ως παράμετρος σε μία συνάρτηση (function) που επιστρέφει true αν το έτος είναι δίσεκτο, διαφορετικά false Εκτέλεση

21 Σύνθετοι έλεγχοι (IΙ) <script language="javascript"> function leap (y) { if ((y % 4 == 0) && ((y % 100!= 0) (y % 400 == 0))) return true; else return false; } </script> <script language="javascript"> var y = window.prompt(" ώσε ένα έτος:", ""); var year = parseint(y); if (leap (year) == true) document.write("<h1>το έτος " + year + " είναι δίσεκτο</h1>"); else document.write("<h1>το έτος " + year + " δεν είναι δίσεκτο</h1>"); </script>

22 Πολλαπλοί έλεγχοι με τη δομή 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> Εκτέλεση

23 Βρόγχοι (loops): for, while, do.. while

24 Βρόγχοι Τι είναι; ομές που επιτρέπουν την επαναληπτική εκτέλεση μιας ομάδας εντολών για κάποιες φορές Γιατί είναι χρήσιμοι; Επιτρέπουν να επαναλάβουμε την εκτέλεση κάποιων γραμμών κώδικα που διαφορετικά θα έπρεπε να γράψουμε κατ επανάληψη Χρησιμοποιώντας βρόγχους μπορούμε εύκολα να αλλάξουμε το πλήθος των επαναλήψεων του κώδικα

25 Βρόγχος for ομή βρόγχου: for (Αρχική τιμή σε μεταβητή; Συνθήκη που πρέπει να ικανοποιείται για να συνεχίσει η εκτέλεση του βρόγχου; Εντολή που εκτελείται σε κάθε επανάληψη) Παράδειγμα: Ημεταβλητήi ονομάζεται μετρητής (counter) for (i=0; i<10; i++) document.write ( Σήμερα είναι Παρασκευή ); ιαφορετικά θα το γράφαμε 10 φορές: document.write ( Σήμερα είναι Παρασκευή ); document.write ( Σήμερα είναι Παρασκευή ); document.write ( Σήμερα είναι Παρασκευή );... document.write ( Σήμερα είναι Παρασκευή );

26 Τιμωρία!!! Γράψτε για τιμωρία 1000 φορές: «εν θα ξαναπειράξωτοδιπλανό μου!» <script language="javascript"> for (i=1; i<=1000; i++) document.write ("<h1>" + i + ": εν θα ξαναπειράξω το διπλανό μου!</h1>"); </script>

27 Άρτιοι Περιττοί (με 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>");

28 O βρόγχος while Ένας βρόγχος while ελέγχει μια συνθήκη και όσο αυτή ικανοποιείται εκτελεί μια ομάδα εντολών (οι εντολές αυτές μπορεί και να μην εκτελεσθούν ποτέ) Χρησιμοποιείται (αντί για το for) όταν δεν ξέρουμε εκ των προτέρων πόσες επαναλήψεις θέλουμε while (συνθήκη) { <εντολές που εκτελούνται όσο ικανοποιείται η συνθήκη> } Αρχικοποίηση counter var counter = 1; while (counter < 10) { document.write("<h1>counter = " + counter + "</h1>"); counter++; Συνθήκη που πρέπει να ικανοποιείται για να εκτελείται ο βρόγχος Ο counter αυξάνεται, διαφορετικά o βρόγχος δεν θα τελειώσει ποτέ!

29 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++; Εκτέλεση

30 O βρόγχος do while Ένας βρόγχος που χρησιμοποιείται αντί του while για να εξασφαλίσουμε ότι οι εντολές θα εκτελεσθούν τουλάχιστον μία φορά do { <εντολές που εκτελούνται όσο ικανοποιείται η συνθήκη> } while (συνθήκη) var counter = 1; do { document.write("<h1>counter = " + counter + "</h1>"); counter++; } while (counter < 10)

31 O βρόγχος do while: Παράδειγμα Ο χρήστης θα δίνει (από ένα παράθυρο prompt) αριθμούς οι οποίοι θα τυπώνονται. Αυτό θα επαναλαμβάνεται μέχρι ο χρήστης να δώσει ένα αρνητικό αριθμό var counter = 0; var number; do { counter++; number = parseint(window.prompt(" ώσε ένα αριθμό. Αρνητικό για να σταματήσεις!", "")); document.write("<h1>" + counter + ": Πληκτρολόγησες " + number + "</h1>"); } while (number > 0) Εκτέλεση