Πανεπιστήμιο Αιγαίου. Χειμερινό εξάμηνο. Σχολή Κοινωνικών Επιστημών Τμήμα Πολιτισμικής Τεχνολογίας Και Επικοινωνίας

Transcript

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

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

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

4 Συμβάντα και Χειριστές συμβάντων Τι είναι ένα συμβάν (event): Κάτι που λαμβάνει χώρα όταν ο χρήστης (επισκέπτης της σελίδας) εκτελεί μια ενέργεια Παραδείγματα: Κλικ σε ένα πλήκτρο Αλλαγή των περιεχομένων ενός στοιχείου μιας φόρμας Μετακίνησητουδείκτητουποντικιούπάνωαπόένασύνδεσμο(link) Χειριστής συμβάντος (event handler): Μια δεσμευμένη λέξη της Javascript που χρησιμοποιείται για το χειρισμό ενός συμβάντος, όταν αυτό λαμβάνει χώρα Με τους χειριστές συμβάντων εισάγουμε στις σελίδες μας ένα βαθμό διαλογικότητας & διαδραστικότητας (μια σειρά από εντολές εκτελούνται ως αποτέλεσμα μιας ενέργειας του χρήστη)

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

6 HTML forms (φόρμες) ομές της HTML που επιτρέπουν στον χρήστη να εισάγει δεδομένα αλλά και στους «ιδιοκτήτες» ιστοσελίδων να συλλέγουν πληροφορίες από χρήστες που τις επισκέπτονται. Εκτέλεση

7 HTML forms (φόρμες) : πως κατασκευάζονται στον Dreamweaver Κάνω κλικ στο Design view Εισαγωγή στοιχείων: Insert->Form ->Text Field Insert->Form -> Button Πρέπει να αλλάζω τα ονόματα όλων των στοιχείων της φόρμας (από ΗΤML κώδικα ή properties) Tα στοιχεία της φόρμας (textfields) Οι ιδιότητες (properties) του επιλεγμένου στοιχείου

8 Χειριστές συμβάντων σε στοιχεία HTML φόρμες (Ι) <html> <body> Εισαγωγή στην HTML φόρμα ενός πλήκτρου που γράφει Click me <input type="button" value="click me..." onclick="alert('hello!!!');alert('hello again!!!');"> </body> </html> Όταν ο χρήστης κάνει κλικ στο πλήκτρο, ο χειριστής συμβάντος (onclick) θα εμφανίσει δύο alerts (οι επιμέρους εντολές χωρίζονται με ; ) Εκτέλεση

9 Χειριστές συμβάντων σε στοιχεία HTML φόρμες (ΙΙ) <html> <head> <script language="javascript"> 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()

10 ιαθέσιμοι χειριστές συμβάντων (I) Χειριστής συμβάντος onclick onmouseover onmouseout onmousedown onmouseup onload onunload Προκαλείται όταν... ο χρήστης κάνει κλικ σε ένα στοιχείο (πλήκτρο, textfield, σύνδεσμο,...) ο χρήστης τοποθετήσει τον δείκτη (cursor) του ποντικιού πάνω σε ένα στοιχείο ο χρήστης απομακρύνει τον δείκτη του ποντικιού από ένα στοιχείο O χρήστης πατήσει το πλήκτρο του ποντικιού πάνω από ένα στοιχείο O χρήστης απελευθερώσει το πλήκτρο του ποντικιού πάνω από ένα στοιχείο ολοκληρωθεί η «φόρτωση» (άνοιγμα) μιας ιστοσελίδας από τον browser ο χρήστης«φύγει» από την τρέχουσα σελίδα

11 ιαθέσιμοι χειριστές συμβάντων (IΙ) Χειριστής συμβάντος onchange onsubmit Προκαλείται όταν... ο χρήστης αλλάξει τα περιεχόμενα ενός στοιχείου μιας φόρμας (π.χ. πληκτρολογήσει κάτι σε ένα textfield ή επιλέξει άλλη επιλογή σε μια λίστα) ο χρήστης υποβάλλει (στείλει) μια φόρμα onerror onkeydown onkeypress onkeyup onresize συμβεί κάποιο σφάλμα κατά τη φόρτωση της σελίδας ή κάποιας εικόνας ο χρήστης πατήσει ένα πλήκτρο του πληκτρολογίου ο χρήστης πατήσει και απελευθερώσει ένα πλήκτρο του πληκτρολογίου (ή το κρατήσει πατημένο) ο χρήστης απελευθερώσει ένα πλήκτρο του πληκτρολογίου οχρήστηςαλλάξειτομέγεθοςτουπαραθύρου Άλλα: onfocus, onblur, onabort, ondragdrop, onmove, onreset, onselect

12 Συμβάντα 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> Κι αυτό όταν ο δείκτης του ποντικιού απομακρυνθεί Εκτέλεση από το πλήκτρο Εκτέλεση

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

14 Προσπέλαση φορμών (Διάβασμα/αλλαγή δεδομένων σε HTML φόρμες)

15 Javascript κώδικας που διαβάζει δεδομένα από textfields HTML φόρμας Tοποθετείται ανάμεσα στις ετικέτες <head> <script language="javascript"> function display() { 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();"> Εκτέλεση

16 Javascript κώδικας που διαβάζει και γράφει δεδομένα σε textfields HTML φόρμας <script language="javascript"> 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="read and write" onclick="read_write();"> Εκτέλεση

17 Άσκηση: Javascript calculator Υλοποιήστε με Javascript ένα on-line υπολογιστή βασικών μαθηματικών πράξεων Το αποτέλεσμα της πράξης θα εμφανίζεται στο δεξί textfield Προσοχή στη διαίρεση! Εκτέλεση

18 Javascript κώδικας που διαβάζει την κατάσταση ενός checkbox <script language="javascript"> 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"> Εκτέλεση

19 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"> Εκτέλεση

20 Javascript κώδικας που διαβάζει από μια λίστα (ΙΙ) Το fruits.value θα ισούται όχι με το επιλεγμένο κείμενο (π.χ. Βερύκοκα ) αλλά με το αντίστοιχο value (4.5) <script language="javascript"> function display() { alert ("Οφείλεις: " + (fruits.value * kilos.value) + " euro!..."); } </script>

21 Πίνακες ή Διατάξεις (arrays) στη Javascript

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

23 Ορισμός ενός πίνακα var arrayname = new Array (στοιχείο1, στοιχείο2,..., στοιχείοn); var people = new Array( Μάκης, Τάκης, Σάκης ); Όνομα πίνακα Στοιχεία πίνακα Μάκης Τάκης Σάκης Πίνακας people people[0] people[1] people[2] document.write(people[1]); people[2] = people[0]; // Θα τυπώσει Tάκης // Θα «γράψει» Μάκης στηθέσητου Σάκης

24 Παράδειγμα (χωρίς χρήση πινάκων) <script language="javascript"> 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> Αποθήκευση ομοειδών δεδομένων (φοιτητών) σε διαφορετικές μεταβλητές Εκτύπωση κάθε μεταβλητής με ξεχωριστή εντολή

25 Παράδειγμα (με χρήση πινάκων) <script language="javascript"> var students = new Array ("Παπαδάκης", "Χρηστίδου", "Αποστολοπούλου", "Γεωργιάδης"); for (i=0; i < students.length; i++) document.write("<h1>" + students[i] + "</h1>"); </script> Αποθήκευση ομοειδών δεδομένων (φοιτητών) σε πίνακα 4 στοιχείων Το students.length δίνει το πλήθος των στοιχείων του πίνακα students

26 Ορισμός στοιχείων πίνακα κατά την εκτέλεση (έπειτα από τον ορισμό του πίνακα) Τα στοιχεία ενός πίνακα δεν δίνονται απαραίτητα κατά τον ορισμό του πίνακα Ορισμός πίνακα με δέσμευση χώρου 4 στοιχείων: var students = new Array(4); Ορισμός πίνακα με απροσδιόριστο μελλοντικά πλήθος στοιχείων: var students = new Array(); student[0] = Μάκης // Ta στοιχεία δίνονται αργότερα students[1] = Τάκης students[2] = Σάκης document.write( Πλήθος = + students.length); // Θα τυπώσει 3

27 Άσκηση Σας δίνονται τα ονόματα των αγοριών ("Κώστας", "Γιώργος") και των κοριτσιών ("Ειρήνη", "Μαρία", "Χαρά", "Κατερίνα") Γράψτε ένα script που θα τυπώνει όλα τα δυνατά ζευγάρια (δυνατούς συνδυασμούς ανάμεσα σε ένα αγόρι και σε ένα κορίτσι)

28 Άσκηση (λύση) <script language="javascript"> var boys = new Array ("Κώστας", "Γιώργος"); var girls = new Array ("Ειρήνη", "Μαρία", "Χαρά", "Κατερίνα"); for (i=0; i < boys.length; i++) for (j=0; j < girls.length; j++) </script> document.write("<h1>" + boys[i] + " - " + girls[j] + "</h1>");

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

30 Μέθοδοι του αντικειμένου Array (ΙΙ) Μέθοδος shift() unshift() slice() splice() Περιγραφή Αφαιρεί το πρώτο στοιχείο από ένα πίνακα και επιστρέφει το διαγραμμένο στοιχείο Προσθέτει ένα στοιχείο στην αρχή ενός πίνακα και επιστρέφει το νέο μέγεθος του πίνακα Εξάγει ένα συγκεκριμένο τμήμα ενός πίνακα και επιστρέφει το τμήμα αυτό ως ένα νέο πίνακα Διαγράφει στοιχεία από ένα πίνακα ή αντικαθιστά στοιχεία σε ένα πίνακα

31 Μέθοδος concat <script language="javascript"> 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

32 Μέθοδος sort <script language="javascript"> 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 θα είναι ταξινομημένος αλφαβητικά

33 Μέθοδοι pop/push, reverse (I) <head> <script language="javascript"> 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> τμήμα)

34 Μέθοδοι pop/push, reverse (II) <body> <script language="javascript"> var last = students.pop(); document.write("<h1>" + last + "</h1><hr>"); print_array(students); students.push("βασιλείου"); students.reverse(); print_array(students); </script> </body>

35 2η Εργασία: ημερομηνία παράδοσης Παρασκευή 21/01/2011 Εφαρμογή Javascript πουθαυλοποιείμιαφόρμαστην οποία θα συμπληρώνει τα στοιχεία του κάποιος που θέλει να εκδηλώσει το ενδιαφέρον του για αναζήτηση εργασίας. Αναλυτικές οδηγίες από τη σελίδα Εργασίες του site του μαθήματος Εκτέλεση