1. Απαιτήσεις εργασίας

HTML
DOWNLOAD

Μέγεθος: px

Εμφάνιση ξεκινά από τη σελίδα:

Download "1. Απαιτήσεις εργασίας"

Σταύρος Σαμαράς
9 χρόνια πριν
Προβολές:

1 ΠΑΝΕΠΙΣΤΗΜΙΟ ΑΙΓΑΙΟΥ Τμήμα Πολιτισμικής Τεχνολογίας & Επικοινωνίας 2 η Εργασία στο μάθημα «Δικτυακά Πολυμέσα Ι»: «Δημιουργία φόρμας για καταχώρηση στοιχείων με HTML - Javascript» Ημερομηνία παράδοσης: Τρίτη 20/1/2009 Διδάσκων: Δ. Γαβαλάς (Η εργασία θα παραδοθεί σε ομάδες των δύο ατόμων!!) 1. Απαιτήσεις εργασίας Θα πρέπει να δημιουργήσετε μία εφαρμογή Javascript που θα υλοποιεί μια φόρμα την οποία θα συμπληρώνουν τα στοιχεία τους χρήστες που θέλουν να καταχωρήσουν στοιχεία τους. Το Javascript σενάριο θα έχει ως στόχο να επικυρώνει τα στοιχεία των χρηστών (να πραγματοποιεί δηλαδή ορισμένους ελέγχους σε αυτά). Για την ανάπτυξη των ιστοσελίδων του site μπορείτε να χρησιμοποιήσετε κάποιο εργαλείο ανάπτυξης ιστοσελίδων (web authoring tool), όπως το Macromedia Dreamweaver. Σας δίνεται ένα τέτοιο απλό σενάριο Javascript, το οποίο μπορείτε να χρησιμοποιήσετε ως βάση ώστε να το επεκτείνετε, στη διεύθυνση: Το απλό αυτό σενάριο πραγματοποιεί (στη φόρμα που φαίνεται στην παραπάνω εικόνα) τους ακόλουθους ελέγχους: - 1 -

Απαιτήσεις εργασίας Θα πρέπει να δημιουργήσετε μία εφαρμογή Javascript που θα υλοποιεί μια φόρμα την οποία θα συμπληρώνουν τα στοιχεία τους χρήστες που θέλουν να καταχωρήσουν στοιχεία τους.

2 Όλα τα πεδία κειμένου (textfields) έχουν συμπληρωθεί Το πεδίο περιέχει τουλάχιστον τους και. Το πεδίο τηλέφωνο περιέχει αποκλειστικά αριθμητικούς χαρακτήρες. HTML table checkboxes textarea textfields button status bar Το απλό αυτό σενάριο θα πρέπει να επεκταθεί ώστε στη φόρμα που φαίνεται στην παραπάνω εικόνα να πραγματοποιηθούν οι παρακάτω έλεγχοι: Τα πεδία κειμένου ονοματεπώνυμο και θα πρέπει να είναι υποχρεωτικά συμπληρωμένα Έλεγχοι εγκυρότητας o Το θα πρέπει να περιλαμβάνει το o Το θα πρέπει να περιλαμβάνει το χαρακτήρα. o Το πρέπει να περιλαμβάνει μόνο λατινικούς χαρακτήρες (κεφαλαίους ή πεζούς) o Ο δεν θα πρέπει να είναι ο πρώτος ή ο τελευταίος του o Ο χαρακτήρας. δεν θα πρέπει να είναι ο πρώτος ή ο τελευταίος του o Ο θα πρέπει να εμφανίζεται μία μόνο φορά o Οι και. δεν πρέπει να είναι συνεχόμενοι o Ο χαρακτήρας. θα πρέπει να εμφανίζεται τουλάχιστον μία φορά, σε απόσταση τουλάχιστον δύο χαρακτήρων μετά το χαρακτήρα '@' (να παρεμβάλλεται δηλαδή τουλάχιστον ένας χαρακτήρας ανάμεσά τους) o Το δεν θα πρέπει να περιλαμβάνει κενά (spaces) Έλεγχοι εγκυρότητας τηλεφώνου και αριθμού fax: o Οι επιτρεπτοί χαρακτήρες είναι: αριθμητικά ψηφία κενά (spaces) - 2 -

πεδία κειμένου ονοματεπώνυμο και email θα πρέπει να είναι υποχρεωτικά συμπληρωμένα Έλεγχοι εγκυρότητας Email: o Το email θα πρέπει να περιλαμβάνει το χαρακτήρα @ o Το email θα πρέπει να περιλαμβάνει

3 μέχρι μία άνω παύλα ( - ) Επίσης, θα γίνονται οι παρακάτω έλεγχοι: o Όταν είναι τσεκαρισμένο το checkbox Ταχυδρομείο, θα πρέπει να είναι συμπληρωμένη και η Διεύθυνση: o Όταν είναι τσεκαρισμένο το checkbox Τηλ., θα πρέπει να είναι συμπληρωμένο και το πεδίο κειμένου Τηλ.: o Όταν είναι τσεκαρισμένο το checkbox FAX, θα πρέπει να είναι συμπληρωμένο και το πεδίο κειμένου FAX: Οι έλεγχοι που περιγράφηκαν παραπάνω θα γίνονται με το πάτημα ( onclick ) του πλήκτρου Αποστολή. Αν τα στοιχεία του χρήστη «περάσουν» όλους τους ελέγχους θα δίνεται μήνυμα (alarm) επιβεβαίωσης, διαφορετικά μήνυμα που θα επεξηγεί το λάθος, όπως φαίνεται στις δύο παρακάτω εικόνες. Ο σύνδεσμος «About us» θα οδηγεί σε μια δεύτερη σελίδα που θα εμφανίζει το ονοματεπώνυμο, τον Α.Μ. και μια φωτογραφία σας. Η στοίχιση των διαφόρων στοιχείων της HTML φόρμας επιτυγχάνεται σχεδιάζοντας έναν HTML πίνακα με αόρατο περίγραμμα (border = 0). Υπενθυμίζεται ότι για την εμφάνιση ελληνικών χαρακτήρων σε μια html σελίδα, πρέπει να ενσωματώσετε την παρακάτω γραμμή κώδικα μέσα στο <head></head> τμήμα της σελίδας: <meta http-equiv="content-type" content="text/html; charset=utf-8" /> Επίσης όλα τα στοιχεία της φόρμας σας (textfields, checkboxes, button, κλπ) πρέπει να βρίσκονται τοποθετημένα ανάμεσα στις ετικέτες <form>. Έτσι, για μια φόρμα που έχετε ονομάσει myform και ενσωματώνει ένα textfield που ονομάζεται <form name="myform"> <input type="text" name=" "> - 3 -

: o Όταν είναι τσεκαρισμένο το checkbox FAX, θα πρέπει να είναι συμπληρωμένο και το πεδίο κειμένου FAX: Οι έλεγχοι που περιγράφηκαν παραπάνω θα γίνονται με το πάτημα ( onclick ) του πλήκτρου Αποστολή.

4 </form> ο παρακάτω Javascript κώδικας θα εμφανίσει το περιεχόμενο που ο χρήστης έχει πληκτρολογήσει σε πεδίο alert(document.myform. .value); 2. Χρήσιμες Javascript συναρτήσεις για την υλοποίηση της εφαρμογής Το παρακάτω alert θα εμφανιστεί μόνο αν ο χαρακτήρας char ανήκει στους κεφαλαίους λατινικούς χαρακτήρες: if (char>='a' && char<='z') alert ( Κεφαλαίος λατινικός χαρακτήρας! ); Οι παρακάτω συναρτήσεις ( indexof, substring, κλπ) θα σας φανούν χρήσιμες για να κάνετε τους ελέγχους κατά πόσο μια συμβολοσειρά περιέχει ένα χαρακτήρα, αν παρεμβάλλεται κενό μεταξύ δύο χαρακτήρων μιας συμβολοσειράς, κλπ. var str = ; var str_length = str.length; /* θα ισχύει str_length = 10 (καθώς η συμβολοσειρά str περιλαμβάνει 10 χαρακτήρες */ var exists = str.indexof( 2 ); /* μετά από αυτή την κλήση, exists = 1 (o χαρακτήρας 2 βρέθηκε στη 2 η θέση του str) */ exists = str.indexof( 9 ); /* μετά από αυτή την κλήση, exists = -1 (o χαρακτήρας 9 δεν βρέθηκε μέσα στο str) */ exists = str.indexof( 1, 4); /* ψάχνει το 1 μετά από την 4 η θέση του str, οπότε exists = 7 (o πρώτος επόμενος χαρακτήρας 1 βρέθηκε στη 7 η θέση του str) */ var small_str = str.substring(0,3); /* απομονώνει τη συμβολοσειρά από την πρώτη ως την 4 η θέση, οπότε: small_str = 1234 */ 3. Βαθμολόγηση εργασίας Η εργασία σας θα βαθμολογηθεί με βάση το κατά πόσο ικανοποιεί τις απαιτήσεις και προδιαγραφές που αναλύθηκαν στις προηγούμενες παραγράφους. Σας προτείνεται να παραδώσετε την εργασία ακόμα κι αν δεν λειτουργεί ικανοποιητικά (θα εκτιμηθεί και θα βαθμολογηθεί η προσπάθειά σας). Θα βαθμολογηθεί επιπλέον η συμπερίληψη στο status bar της HTML σελίδα σας ενός μηνύματος που θα αλλάζει περιοδικά, κάθε 1 sec. Θα εμφανίζει την τρέχουσα ώρα σε μορφή ώρες:λεπτά:δευτερόλεπτα, π.χ.: Time: 15:23:20 (κάθε ένα sec θα δείχνει τη νέα ώρα) Για την αλλαγή του status bar του παραθύρου του browser θα χρησιμοποιήσετε την ιδιότητα status του αντικειμένου window: window.status = Hello ; // Θα αλλάξει το status bar του browser σε Hello Επίσης, για το διάβασμα της τρέχουσας ημερομηνίας και ώρας θα χρησιμοποιήσετε μεθόδους του αντικειμένου Date (βλ. Κεφάλαιο 12 του βιβλίου σας της Javascript)

5 Τέλος, θα συνεκτιμηθούν στη βαθμολογία της εργασίας: Ύπαρξη σχολίων στον Javascript κώδικα Στοίχιση κώδικα (για παράδειγμα, οι εντολές που εκτελούνται όταν ικανοποιείται μια συνθήκη if ή όταν τρέχει ένας βρόγχος for να είναι στοιχισμένες πιο δεξιά και η μία κάτω από την άλλη,) ώστε ο κώδικας να είναι ευανάγνωστος) Η παράδοση της εργασίας είναι υποχρεωτική και προσμετράει σε ποσοστό 15% της συνολικής βαθμολογίας του μαθήματος. Σε περίπτωση που γίνουν αντιληπτά κρούσματα αντιγραφών, όσοι έχουν συμμετάσχει σε αυτή θα βαθμολογηθούν αρνητικά. 4. Οδηγίες για την παράδοση της εργασίας: Καταληκτική ημερομηνία για την παράδοση της εργασίας είναι η 20/1/2009. Η εργασία θα γίνει σε ομάδες των δύο ατόμων (το μέγιστο)! Η παράδοση θα γίνει ηλεκτρονικά. Θα δημιουργήσετε ένα zip αρχείο που θα περιλαμβάνει όλα τα περιεχόμενα του φακέλου όπου αποθηκεύσετε την εργασία σας. Στον φάκελο θα πρέπει να υπάρχει το HTML αρχείο (στο οποίο περιλαμβάνεται ο Javascript κώδικας) και τυχόν αρχεία γραφικών. Επαληθεύστε ότι το zip αρχείο είναι στη μορφή που πρέπει αποσυμπιέζοντάς το σε κάποιο δικό σας φάκελο (θα πρέπει να αποσυμπιέσει όλα τα αρχεία της εφαρμογής σας, αναπαράγοντας την ιεραρχική του δομή, δηλαδή δημιουργώντας τους ίδιους καταλόγους). Το όνομα του zip αρχείου θα είναι ίδιο με τα username σας, χωρισμένα με underscore ( _ ) (π.χ. ct07011_ct07129.zip). Η παράδοση της εργασίας θα πρέπει να γίνει με αποστολή στο διδάσκοντα (dgavalas@aegean.gr). Στο θα πρέπει να επισυνάψετε (attachment) το zip αρχείο και το subject του μηνύματος θα πρέπει να είναι της μορφής: <Ονοματεπώνυμο1>, Α.Μ_2.:..., <Ονοματεπώνυμο_2>, Α.Μ_2.:..., Δικτυακά Πολυμέσα Ι: 2 η εργασία Το αυτό θα πρέπει να το «κοινοποιήσετε» και στον εαυτό σας (cc: ctxxxxxx@ct.aegean.gr; ctxxxxx@ct.agean.gr) και να μην το σβήσετε από τη λίστα των αποσταλμένων σας ( Sent Items ). Καλή επιτυχία! - 5 -

συνολικής βαθμολογίας του μαθήματος. Σε περίπτωση που γίνουν αντιληπτά κρούσματα αντιγραφών, όσοι έχουν συμμετάσχει σε αυτή θα βαθμολογηθούν αρνητικά. 4.

Σχετικά έγγραφα

1. Απαιτήσεις εργασίας

1. Απαιτήσεις εργασίας ΠΑΝΕΠΙΣΤΗΜΙΟ ΑΙΓΑΙΟΥ Τμήμα Πολιτισμικής Τεχνολογίας & Επικοινωνίας 2 η Εργασία στο μάθημα «Δικτυακά Πολυμέσα Ι»: «Δημιουργία φόρμας για online αίτηση εργασίας με HTML - Javascript» Ημερομηνία παράδοσης: