2 η ΕΡΓΑΣΙΑ: ΥΠΟΛΟΓΙΣΜΟΣ ΧΙΛΙΟΜΕΤΡΙΚΩΝ ΑΠΟΣΤΑΣΕΩΝ ΜΕ JAVASCRIPT Ημερομηνία Παράδοσης: Παρασκευή 15/1/2010 (Η εργασία θα γίνει σε ομάδες των 2 ατόμων!!) 1. Απαιτήσεις εργασίας Να δημιουργήσετε μια HTML σελίδα η οποία να περιέχει μία φόρμα που να μοιάζει με αυτή της παρακάτω εικόνας: Για την ανάπτυξη της ιστοσελίδας μπορείτε να χρησιμοποιήσετε κάποιο εργαλείο ανάπτυξης ιστοσελίδων (web authoring tool) όπως το Adobe Dreamweaver ή έναν απλό επεξεργαστή κειμένου (π.χ. Notepad). Για παράδειγμα, η σχεδίαση του πίνακα που περιλαμβάνεται στην HTML φόρμα της παραπάνω εικόνας είναι πολύ εύκολη μέσα από το περιβάλλον του Dremaweaver. Θα πρέπει να αναπτύξετε μια εφαρμογή σε Javascript που θα έχει ως στόχο να υπολογίζει την ευκλείδεια απόσταση ανάμεσα σε δύο πόλεις που επιλέγει ο χρήστης,. Σε περίπτωση που ο χρήστης κάνει κλικ στο πλήκτρο Calculate Distances χωρίς να έχει προηγούμενα επιλέξει την πόλη αφετηρία ή την πόλη προορισμό, θα του δίνεται ένα προειδοποιητικό μήνυμα: -1-
Όταν ο χρήστης κάνει τις επιλογές της πόλης αφετηρία και της πόλης προορισμού και κάνει κλικ στο πλήκτρο Calculate Distances, θα υπολογίζεται και θα εμφανίζεται σε μήνυμα η -ευκλείδεια- απόσταση ανάμεσα στις επιλεγμένες πόλεις. Οι αποστάσεις θα πρέπει να εμφανίζονται στρογγυλοποιημένες στον πλησιέστερο ακέραιο. Έτσι, αν η ευκλείδεια απόσταση ανάμεσα στη Θήβα και τη Λαμία είναι 302,0761 θα εμφανίζεται το μήνυμα: Επίσης, το πάτημα του πλήκτρου Calculate Max Distance θα προκαλεί την εκτέλεση μιας συνάρτησης που θα βρίσκει το ζευγάρι των πόλεων με τη μεγαλύτερη ευκλείδεια απόσταση και θα εμφανίζει σε μήνυμα τα ονόματα των πόλεων αυτών και την απόστασή τους: 2. Οδηγίες για την ανάπτυξη της εφαρμογής Στις δύο λίστες της πόλης αφετηρίας/προορισμού, θα εισαγάγετε τις πόλεις που θα εμφανίζονται με το άνοιγμα της λίστας (labels) και τις αντίστοιχες τιμές (values) οι -2-
οποίες θα περιλαμβάνουν ξανά το όνομα της πόλης και τις καρτεσιανές συντεταγμένες της (τα επιμέρους στοιχεία των values θα διαχωρίζονται από κάποιον χαρακτήρα, π.χ. από μία κάθετο "/"). Ο παρακάτω πίνακας δίνει τα ονόματα των πόλεων με τις αντίστοιχες συντεταγμένες τους (x,y): Πόλη x y Athens 350 50 Thiva 250 100 Halkida 350 125 Lamia 125 375 Volos 375 400 Larisa 610 450 Thessaloniki 200 600 Στο περιβάλλον του Dreamwever, θα εισάγετε στη φόρμα δύο λίστες ( List/Menu ) και για κάθε μία από αυτές θα πατήσετε το πλήκτρο List Values στο παράθυρο Properties στο οποίο θα εισάγετε τις τιμές του παραπάνω πίνακα ως εξής: Υπενθυμίζεται ότι η ευκλείδεια απόσταση μεταξύ δύο σημείων Α και Β με συντεταγμένες (x 1, y 1 ) και (x 2, y 2 ) αντίστοιχα, δίνεται από τον τύπο: d ( x y 2 2 1 x2 ) y1 2 ) Προσοχή!: τα πλήκτρα Calculate Distances και Calculate Max Distance θα πρέπει να είναι τύπου button και όχι τύπου submit, για παράδειγμα: <input type="button" name="button" value="calculate Distances"> 3. Συναρτήσεις της Javascript που θα σας φανούν χρήσιμες Η συνάρτηση split χωρίζει μια συμβολοσειρά αναζητώντας σε αυτή ένα συγκεκριμένο χαρακτήρα (διαχωριστικό) και επιστρέφει τα επιμέρους τμήματα της συμβολοσειράς σε ένα πίνακα (array). Παράδειγμα: var str = "abc/123/bla"; var my_array = str.split("/"); document.write (my_array[0]); // Θα τυπώσει 'abc' -3-
document.write (my_array[1]); // Θα τυπώσει '123' document.write (my_array[2]); // Θα τυπώσει 'bla' Θα χρησιμοποιήσετε τη split για να διαχωρίσετε το όνομα της επιλεγμένης πόλης από τις συντεταγμένες της. Η συνάρτηση parsefloat είναι αντίστοιχη της parseint, δηλαδή μετατρέπει μια συμβολοσειρά στον αντίστοιχο float (δεκαδικό αριθμό): var str_float = "2.5"; var num_float = parsefloat(str_float); document.write(num_float + " * 3 = " + (num_float*3)); // Θα τυπώσει 2.5 * 3 = 7.5 Η συνάρτηση Math.pow υπολογίζει ένα εκθετικό: var n1 = 2; var n2 = 3; var p = Math.pow(n1, n2); document.write("power = " + p); // Θα τυπώσει power = 8 Η συνάρτηση Math.sqrt υπολογίζει την τετραγωνική ρίζα ενός αριθμού: var n = 16; var root = Math.sqrt(n); document.write("root of " + n + " = " + root); // Θα τυπώσει root of 16 = 4 Η συνάρτηση Math.round στρογγυλοποιεί έναν δεκαδικό αριθμό στον πλησιέστερο ακέραιο: var n = 16.7; var round_num = Math.round(n); document.write("rounded: " + round_num); // Θα τυπώσει Rounded: 17 Η συνάρτηση Math.max βρίσκει τον μεγαλύτερο μεταξύ δύο αριθμών: var n1 = 15; var n2 = 22; var max_num = Math.max(n1, n2); document.write("max of " + n1 + " and " + n2 + " is " + max_num); // Θα τυπώσει Max of 15 and 22 is 22 Η ιδιότητα length μιας λίστας επιστρέφει το πλήθος των στοιχείων της. Αν, για παράδειγμα, έχουμε μια λίστα ( List/Menu ) με όνομα mylist και id list_id με 2 στοιχεία (επιλογές): -4-
<select name=" mylist" id=" list_id"> <option value="value1">option 1</option> <option value="value2">option 2</option> </select> τότε το document.getelementbyid('list_id').value θα μου δώσει την τιμή της τρέχουσας επιλογής (το στοιχείο της λίστας που είναι αυτή τη στιγμή επιλεγμένο), το mylist.options[0].value θα ισούται με value1, ενώ το mylist.length θα ισούται με το πλήθος των στοιχείων, δηλαδή 2. Η ιδιότητα length θα σας φανεί χρήσιμη για τον υπολογισμό της μέγιστης απόστασης μεταξύ πόλεων, όπου θα πρέπει να διατρέξετε τα στοιχεία των δύο λιστών (πόλη-αφετηρία/πόλη-προορισμός) για να βρείτε την απόσταση όλων των υπαρκτών ζευγαριών (για να διατρέξετε όλα τα στοιχεία μιας λίστας θα πρέπει να γνωρίζετε το πλήθος τους, κι αυτό σας το δίνει η ιδιότητα length. Αντίστοιχα, 4. Βαθμολόγηση εργασίας Η εργασία σας θα βαθμολογηθεί με βάση το κατά πόσο ικανοποιεί τις απαιτήσεις και προδιαγραφές που αναλύθηκαν στις προηγούμενες παραγράφους. Σας προτείνεται να παραδώσετε την εργασία ακόμα κι αν δεν λειτουργεί ικανοποιητικά (θα εκτιμηθεί και θα βαθμολογηθεί αντίστοιχα η προσπάθειά σας). Θα βαθμολογηθεί επιπλέον η συμπερίληψη στην HTML φόρμα σας και μιας εικόνας (δείτε, για παράδειγμα, την πρώτη την εικόνα της εφαρμογής με τη φωτογραφία του Παρθενώνα). Η εικόνα αυτή δεν θα είναι πάντοτε η ίδια αλλά θα αλλάζει (θα φορτώνεται διαφορετική) κάθε φορά που ο χρήστης περνάει από πάνω της το δείκτη του ποντικιού (όταν δηλαδή παράγεται το onmouseover event). Όταν η προβολή των φωτογραφιών των 7 πόλεων ολοκληρωθεί, στο επόμενο onmouseover event θα φορτώνεται εκ νέου η φωτογραφία που αντιστοιχεί στην πρώτη πόλη, κοκ. Στη σελίδα «Νέα» του μαθήματος σας δίνεται και ένα zip αρχείο που περιλαμβάνει φωτογραφίες των 7 πόλεων. Τέλος, θα συνεκτιμηθούν στη βαθμολογία της εργασίας: Ύπαρξη σχολίων στον Javascript κώδικα Στοίχιση κώδικα (για παράδειγμα, οι εντολές που εκτελούνται όταν ικανοποιείται μια συνθήκη if ή όταν τρέχει ένας βρόγχος for να είναι στοιχισμένες πιο δεξιά και η μία κάτω από την άλλη,) ώστε ο κώδικας να είναι ευανάγνωστος) 5. Οδηγίες για την παράδοση της εργασίας: Καταληκτική ημερομηνία για την παράδοση της εργασίας είναι η 15/1/2010. Η εργασία γίνει σε ομάδες των δύο ατόμων! Η παράδοση θα γίνει ηλεκτρονικά. Θα δημιουργήσετε ένα zip αρχείο που θα περιλαμβάνει όλα τα περιεχόμενα του φακέλου όπου αποθηκεύσετε την εργασία σας. Στον φάκελο θα πρέπει να υπάρχει το HTML αρχείο (στο οποίο περιλαμβάνεται ο Javascript κώδικας) και τυχόν αρχεία γραφικών. Επαληθεύστε ότι το zip αρχείο είναι στη μορφή που πρέπει -5-
αποσυμπιέζοντάς το σε κάποιο δικό σας φάκελο (θα πρέπει να αποσυμπιέσει όλα τα αρχεία της εφαρμογής σας, αναπαράγοντας την ιεραρχική του δομή, δηλαδή δημιουργώντας τους ίδιους καταλόγους). Το όνομα του zip αρχείου θα είναι ίδιο με το username σας (π.χ. ct0xxxx_ct0xxxx.zip). Η παράδοση της εργασίας θα πρέπει να γίνει με αποστολή email στο διδάσκοντα (dgavalas@aegean.gr). Στο email θα πρέπει να επισυνάψετε (attachment) το zip αρχείο και το subject του μηνύματος θα πρέπει να είναι της μορφής: <Ονοματεπώνυμο>, Α.Μ.:..., Δικτυακά Πολυμέσα Ι: 2 η εργασία Το email αυτό θα πρέπει να το «κοινοποιήσετε» και στον εαυτό σας (cc: ctxxxxxx@ct.aegean.gr; ctxxxxxx@ct.aegean.gr) και να μην το σβήσετε από τη λίστα των αποσταλμένων email σας ( Sent Items ). Καλή επιτυχία! -6-