Συμβάντα (events) και χειριστές συμβάντων (event handlers) στη Javascript

Transcript

1 Πανεπιστήμιο Αιγαίου Σχολή Κοινωνικών Επιστημών Τμήμα Πολιτισμικής Τεχνολογίας Και Επικοινωνίας Δικτυακά Πολυμέσα Ι (Β Έτος, 3ο εξ) Διάλεξη #9η: Javascript: Συμβάντα και Χειριστές Συμβάντων, Προσπέλαση φορμών (Διάβασμα/αλλαγή δεδομένων σε HTML φόρμες), πίνακες (arrays) Γαβαλάς Δαμιανός Χειμερινό εξάμηνο Συμβάντα (events) και χειριστές συμβάντων (event handlers) στη Javascript 1

2 Πως γράφαμε Javascript κώδικα μέχρι τώρα Μέχρι τώρα γράφαμε κώδικα Javascript ο οποίος εκτελούνταν χωρίς την παρέμβαση του χρήστη Ο χρήστης μπορούσε να εισάγει πληροφορία (μέσα από window.prompt παράθυρα) αλλά δεν μπορούσε να ορίσει ΠΟΤΕ θα εκτελεστεί ο κώδικας Ο κώδικας τοποθετούνταν ανάμεσα σε ετικέτες <script> Ο κώδικας που εκτελούνταν με το «φόρτωμα» του HTML αρχείου τοποθετούνταν στο <body> </body> τμήμα του HTML αρχείου Στο <head> </head> τμήμα του αρχείου τοποθετούσαμε Javascript συναρτήσεις (functions) που «καλούνταν» από τον κυρίως κώδικα που βρίσκονταν στο <body> </body> τμήμα Θα μάθουμε πως μπορούμε να γράψουμε Javascript κώδικα που θα εκτελείται μετά από ενέργεια του χρήστη Συμβάντα και Χειριστές συμβάντων Τι είναι ένα συμβάν (event): Κάτι που λαμβάνει χώρα όταν ο χρήστης (επισκέπτης της σελίδας) εκτελεί μια ενέργεια Παραδείγματα: Κλικ σε ένα πλήκτρο Αλλαγή των περιεχομένων ενός στοιχείου μιας φόρμας Μετακίνηση του δείκτη του ποντικιού πάνω από ένα σύνδεσμο (link) Χειριστής συμβάντος (event handler): Μια δεσμευμένη λέξη της Javascript που χρησιμοποιείται για το χειρισμό ενός συμβάντος, όταν αυτό λαμβάνει χώρα Με τους χειριστές συμβάντων εισάγουμε στις σελίδες μας ένα βαθμό διαλογικότητας & διαδραστικότητας (μια σειρά από εντολές εκτελούνται ως αποτέλεσμα μιας ενέργειας του χρήστη) 2

3 Που τοποθετούνται οι χειριστές συμβάντων Σε στοιχεία φορμών Σε ετικέτες δημιουργία συνδέσμων (<a>) Στην αρχική ετικέτα του HTML εγγράφου (<BODY>) HTML forms (φόρμες) Δομές της HTML που επιτρέπει στον χρήστη να εισάγει δεδομένα αλλά και στους «ιδιοκτήτες» ιστοσελίδων να συλλέγουν πληροφορίες από χρήστες που τις επισκέπτονται. 3

4 HTML forms (φόρμες) : πως κατασκευάζονται στον Dreamweaver Κάνω κλικ στο Design view Εισαγωγή στοιχείων: Insert->Form ->Text Field Insert->Form -> Button Πρέπει να αλλάζω τα ονόματα όλων των στοιχείων της φόρμας (από ΗΤML κώδικα ή properties) Οι ιδιότητες (properties) του επιλεγμένου στοιχείου Tα στοιχεία της φόρμας (textfields) Χειριστές συμβάντων σε στοιχεία HTML φόρμες (Ι) <html> <body> <input type="button" value="click me..." onclick="alert('hello!!!');alert('hello again!!!');"> </body> </html> Όταν ο χρήστης κάνει κλικ στο πλήκτρο, ο χειριστής συμβάντος (onclick) θα εμφανίσει δύο alerts (οι επιμέρους εντολές χωρίζονται με ; ) Εισαγωγή στην HTML φόρμα ενός πλήκτρου που γράφει Click me 4

5 Χειριστές συμβάντων σε στοιχεία HTML φόρμες (ΙΙ) <html> <head> function first() { alert("thanks for the click"); } function second() { alert("boooooooooooom!!!"); } </script> </head> <body> <input type="button" value="click me..." onclick="first();"> <input type="button" value="don't click me..." onclick="second();"> </body> </html> O κώδικας των συναρτήσεων γράφεται ανάμεσα στο <head> </head> τμήμα του εγγράφου Όταν πατηθεί αυτό το πλήκτρο, θα εκτελεστεί η συνάρτηση first() Όταν πατηθεί αυτό το πλήκτρο, θα εκτελεστεί η συνάρτηση second() Διαθέσιμοι χειριστές συμβάντων (I) Χειριστής συμβάντος onclick onmouseover onmouseout onmousedown onmouseup onload onunload Προκαλείται όταν... ο χρήστης κάνει κλικ σε ένα στοιχείο (πλήκτρο, textfield, σύνδεσμο,...) ο χρήστης τοποθετήσει τον δείκτη (cursor) του ποντικιού πάνω σε ένα στοιχείο ο χρήστης απομακρύνει τον δείκτη του ποντικιού από ένα στοιχείο O χρήστης πατήσει το πλήκτρο του ποντικιού πάνω από ένα στοιχείο O χρήστης απελευθερώσει το πλήκτρο του ποντικιού πάνω από ένα στοιχείο ολοκληρωθεί η «φόρτωση» (άνοιγμα) μιας ιστοσελίδας από τον browser ο χρήστης «φύγει» από την τρέχουσα σελίδα 5

6 Διαθέσιμοι χειριστές συμβάντων (IΙ) Χειριστής συμβάντος onchange onsubmit onerror onkeydown onkeypress onkeyup onresize Προκαλείται όταν... ο χρήστης αλλάξει τα περιεχόμενα ενός στοιχείου μιας φόρμας (π.χ. πληκτρολογήσει κάτι σε ένα textfield ή επιλέξει άλλη επιλογή σε μια λίστα) ο χρήστης υποβάλλει (στείλει) μια φόρμα συμβεί κάποιο σφάλμα κατά τη φόρτωση της σελίδας ή κάποιας εικόνας ο χρήστης πατήσει ένα πλήκτρο του πληκτρολογίου ο χρήστης πατήσει και απελευθερώσει ένα πλήκτρο του πληκτρολογίου (ή το κρατήσει πατημένο) ο χρήστης απελευθερώσει ένα πλήκτρο του πληκτρολογίου ο χρήστης αλλάξει το μέγεθος του παραθύρου Άλλα: onfocus, onblur, onabort, ondragdrop, onmove, onreset, onselect Συμβάντα onmouseover/onmouseout Αυτό το alert θα εμφανιστεί όταν ο δείκτης του ποντικιού περάσει πάνω από το πλήκτρο <input type="button" value="click me..." onmouseover="alert('cursor over the button!');" onmouseout="alert('cursor out of button!');"> Κι αυτό όταν ο δείκτης του ποντικιού <a href=" απομακρυνθεί από το πλήκτρο onmouseover="alert('cursor over the link!');" onmouseout="alert('cursor out of link!');"> University of Aegean</a> 6

7 Συμβάντα onload/onunload Αυτό το alert θα εμφανιστεί μόλις ολοκληρωθεί το φόρτωμα της σελίδας Κι αυτό όταν ο χρήστης πατήσει το link και «φύγουμε» από τη σελίδα <body onload="alert('μόλις τελείωσα το φόρτωμα!');" onunload="alert('να μας ξανάρθεις!');"> <a href=" onmouseover="alert('πάω να πατήσω το link!');">university of Aegean</a> </body> Προσπέλαση φορμών (Διάβασμα/αλλαγή δεδομένων σε HTML φόρμες) 7

8 Javascript κώδικας που διαβάζει δεδομένα από textfields HTML φόρμας function display() { Tοποθετείται ανάμεσα στις ετικέτες <head> alert Name: " + name.value + ", " + .value); } </script> Insert your name: <input name="name" type="text"> Insert your <input name=" " type="text"> <input type="button" value="display" onclick="display();"> Javascript κώδικας που διαβάζει και γράφει δεδομένα σε textfields HTML φόρμας function read_write() { name2.value = "You typed: " + name1.value; } </script> Tοποθετείται ανάμεσα στις ετικέτες <head> Insert your name: <input name="name1" type="text"> Insert your <input name="name2" type="text"> <input type="button" value="display" onclick="read_write();"> 8

9 Άσκηση: Javascript calculator Υλοποιήστε με Javascript ένα on-line υπολογιστή βασικών μαθηματικών πράξεων Το αποτέλεσμα της πράξης θα εμφανίζεται στο δεξί textfield Προσοχή στη διαίρεση! Javascript κώδικας που διαβάζει την κατάσταση ενός checkbox function check() { if (student.checked) alert ("Είσαι φοιτητής!..."); else alert("δεν είσαι φοιτητής!..."); } </script> <p>είσαι φοιτητής; <input name="student" type="checkbox" value="checkbox" checked> <input type="button" onclick="check();" value="check answer"> 9

10 Javascript κώδικας που διαβάζει από μια λίστα (Ι) Τι θέλεις να αγοράσεις; <select name="fruits"> <option value="7.2">σύκα</option> <option value="4.5">βερύκοκα</option> <option value="5.6">μήλα</option> </select> Πόσα κιλά; <input name="kilos" type="text"> <input type="button" onclick="display();" value="cost"> Javascript κώδικας που διαβάζει από μια λίστα (ΙΙ) Το fruits.value θα ισούται όχι με το επιλεγμένο κείμενο (π.χ. Βερύκοκα ) αλλά με το αντίστοιχο value (4.5) function display() { alert ("Οφείλεις: " + (fruits.value * kilos.value) + " euro!..."); } </script> 10

11 Πίνακες ή Διατάξεις (arrays) στη Javascript Τι είναι οι πίνακες (arrays) Ένας πίνακας είναι μια δομή που επιτρέπει την αποθήκευση δεδομένων με παρόμοιους τύπους που επιτρέπει την εύκολη προσπέλαση αυτών των δεδομένων μελλοντικά από το script Η πρόσβαση σε ένα στοιχείο ενός πίνακα συνήθως επιτυγχάνεται μέσω ενός αριθμητικού δείκτη Γιατί είναι χρήσιμοι οι πίνακες: χρησιμοποιώντας τον αριθμητικό δείκτη ώστε να «δείχνει» κάθε φορά στο επόμενο στοιχείο του πίνακα, μπορούμε να «διατρέξουμε» τον πίνακα με ένα βρόγχο, διαβάζοντας ή μεταβάλλοντας τα στοιχεία του 11

12 Ορισμός ενός πίνακα var arrayname = new Array (στοιχείο1, στοιχείο2,..., στοιχείοn); var people = new Array( Μάκης, Τάκης, Σάκης ); Όνομα πίνακα Στοιχεία πίνακα Μάκης Τάκης Σάκης Πίνακας people people[0] people[1] people[2] document.write(people[1]); // Θα τυπώσει Tάκης people[2] = people[0]; // Θα «γράψει» Μάκης στη θέση του Σάκης Παράδειγμα (χωρίς χρήση πινάκων) Αποθήκευση ομοειδών δεδομένων (φοιτητών) σε διαφορετικές μεταβλητές var student1 = "Παπαδάκης"; var student2 = "Χρηστίδου"; var student3 = "Αποστολοπούλου"; var student4 = "Γεωργιάδης"; document.write("<h1>" + student1 + "</h1>"); document.write("<h1>" + student2 + "</h1>"); document.write("<h1>" + student3 + "</h1>"); document.write("<h1>" + student4 + "</h1>"); </script> Εκτύπωση κάθε μεταβλητής με ξεχωριστή εντολή 12

13 Παράδειγμα (με χρήση πινάκων) Αποθήκευση ομοειδών δεδομένων (φοιτητών) σε πίνακα 4 στοιχείων var students = new Array ("Παπαδάκης", "Χρηστίδου", "Αποστολοπούλου", "Γεωργιάδης"); for (i=0; i < students.length; i++) document.write("<h1>" + students[i] + "</h1>"); </script> Το students.length δίνει το πλήθος των στοιχείων του πίνακα students Ορισμός στοιχείων πίνακα κατά την εκτέλεση (έπειτα από τον ορισμό του πίνακα) Τα στοιχεία ενός πίνακα δεν δίνονται απαραίτητα κατά τον ορισμό του πίνακα Ορισμός πίνακα με δέσμευση χώρου 4 στοιχείων: var students = new Array(4); Ορισμός πίνακα με απροσδιόριστο μελλοντικά πλήθος στοιχείων: var students = new Array(); student[0] = Μάκης // Ta στοιχεία δίνονται αργότερα students[1] = Τάκης students[2] = Σάκης document.write( Πλήθος = + students.length); // Θα τυπώσει 3 13

14 Άσκηση Σας δίνονται τα ονόματα των αγοριών ("Κώστας", "Γιώργος") και των κοριτσιών ("Ειρήνη", "Μαρία", "Χαρά", "Κατερίνα") Γράψτε ένα script που θα τυπώνει όλα τα δυνατά ζευγάρια (δυνατούς συνδυασμούς ανάμεσα σε ένα αγόρι και σε ένα κορίτσι) Άσκηση (λύση) var boys = new Array ("Κώστας", "Γιώργος"); var girls = new Array ("Ειρήνη", "Μαρία", "Χαρά", "Κατερίνα"); for (i=0; i < boys.length; i++) for (j=0; j < girls.length; j++) document.write("<h1>" + boys[i] + " - " + girls[j] + "</h1>"); </script> 14

15 Μέθοδοι του αντικειμένου Array (Ι) Μέθοδος concat() join() sort() reverse() pop() push() Περιγραφή Συνενώνει τα στοιχεία 2 ή περισσότερων πινάκων σε ένα νέο πίνακα Δημιουργεί μια συμβολοσειρά που περιέχει όλα τα στοιχεία ενός πίνακα, χωρίζοντάς τα με ένα διαχωριστικό Ταξινομεί αλφαβητικά τα στοιχεία ενός πίνακα Αντιστρέφει τη σειρά των στοιχείων ενός πίνακα (το πρώτο τελευταίο, το δεύτερο προ-τελευταίο, κοκ) Αφαιρεί το τελευταίο στοιχείο από ένα πίνακα και επιστρέφει το διαγραμμένο στοιχείο Προσθέτει ένα στοιχείο στο τέλος ενός πίνακα και επιστρέφει το νέο μέγεθος του πίνακα Μέθοδοι του αντικειμένου Array (ΙΙ) Μέθοδος shift() unshift() slice() splice() Περιγραφή Αφαιρεί το πρώτο στοιχείο από ένα πίνακα και επιστρέφει το διαγραμμένο στοιχείο Προσθέτει ένα στοιχείο στην αρχή ενός πίνακα και επιστρέφει το νέο μέγεθος του πίνακα Εξάγει ένα συγκεκριμένο τμήμα ενός πίνακα και επιστρέφει το τμήμα αυτό ως ένα νέο πίνακα Διαγράφει στοιχεία από ένα πίνακα ή αντικαθιστά στοιχεία σε ένα πίνακα 15

16 Μέθοδος concat var class_a = new Array ("Κώστας", "Κλειώ"); var class_b = new Array ("Δημήτρης", "Ιωάννα", "Χαρά", "Κατερίνα"); var class_c = new Array ("Γιάννης", "Μαρία"); var everybody = class_a.concat(class_b, class_c); for (i=0; i < everybody.length; i++) document.write("<h1>" + everybody[i] + "</h1>"); </script> Συνενώνει τα στοιχεία των πινάκων class_a, class_b και class_c, αποθηκεύοντάς τα στον πίνακα everybody Μέθοδος sort var messages = new Array(); messages[0] = "What????"; messages[1] = "Beautiful day!!!"; messages[2] = "Hello!!!"; messages.sort(); for (i=0; i<messages.length; i++) document.write("<h1>" + messages[i] + "</h1>"); </script> Μετά την εκτέλεση αυτής της εντολής, ο πίνακας messages θα είναι ταξινομημένος αλφαβητικά 16

17 Μέθοδοι pop/push, reverse (I) <head> var students = new Array ("Παπαδάκης", "Χρηστίδου", "Αποστολοπούλου"); function print_array (pinakas) { for (i=0; i < pinakas.length; i++) document.write("<h1>" + pinakas[i] + "</h1>"); document.write("<hr>"); } </script> </head> Επειδή το array students ορίζεται μέσα στο <head> τμήμα, θα είναι προσβάσιμο από όλο το έγγραφο (και από scripts που είναι στο <body> τμήμα) Μέθοδοι pop/push, reverse (II) <body> var last = students.pop(); document.write("<h1>" + last + "</h1><hr>"); print_array(students); students.push("βασιλείου"); students.reverse(); print_array(students); </script> </body> 17

18 Εργασία ακαδ. έτους On-line calculator που πραγματοποιεί βασικές αριθμητικές πράξεις Εργασία ακαδ. έτους Φόρμας για online αίτηση εργασίας με HTML - Javascript 18

19 2η Εργασία: ημερομηνία παράδοσης Δευτέρα 15/1/2010 Εφαρμογή Javascript που υπολογίζει την Ευκλείδια απόσταση μεταξύ δύο πόλεων Φωτογραφίες πόλεων που αλλάζουν με το πέρασα του δείκτη του ποντικιού (mouseover) Αναλυτικές οδηγίες από τη σελίδα Εργασίες του site του μαθήματος 19