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

Μέγεθος: px

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

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

ÏΚάϊν Τοκατλίδης
6 χρόνια πριν
Προβολές:

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

1 ΠΑΝΕΠΙΣΤΗΜΙΟ ΑΙΓΑΙΟΥ Τμήμα Πολιτισμικής Τεχνολογίας & Επικοινωνίας 2 η Εργασία στο μάθημα «Δικτυακά Πολυμέσα Ι»: «Δημιουργία φόρμας για online αίτηση εργασίας με HTML - Javascript» Ημερομηνία παράδοσης: Παρασκευή 21/1/2011 Διδάσκων: Αντώνιος Νείρος (Η εργασία θα γίνει σε ομάδες των 2 ατόμων!!) 1. Απαιτήσεις εργασίας Θα πρέπει να δημιουργήσετε μία εφαρμογή Javascript που θα υλοποιεί μια φόρμα στην οποία θα συμπληρώνει τα στοιχεία του κάποιος που θέλει να εκδηλώσει το ενδιαφέρον του για αναζήτηση εργασίας. Για την ανάπτυξη των ιστοσελίδων του site μπορείτε να χρησιμοποιήσετε κάποιο εργαλείο ανάπτυξης ιστοσελίδων (web authoring tool), όπως το Macromedia Dreamweaver. List/Menu HTML table Check Box List/Menu textfields Radio Group buttons status bar - 1 -

2 Οι βασικές απαιτήσεις της εργασίας είναι: Σχεδιασμός μιας HTML φόρμας όπως φαίνεται στην παραπάνω εικόνα. Η στοίχιση των διαφόρων στοιχείων της φόρμας επιτυγχάνεται σχεδιάζοντας έναν HTML πίνακα με αόρατο περίγραμμα (border = 0). O χρήστης θα επιλέγει από τις τρεις πρώτες λίστες την ημερομηνία από την οποία θα είναι διαθέσιμος για να εργαστεί. o Η πρώτη λίστα (Day) θα περιέχει τις επιλογές: 1, 2,..., 31 o Η δεύτερη λίστα (Month) θα περιέχει τις επιλογές: January, February,..., December o Η τρίτη λίστα (Year) θα περιέχει τις επιλογές: 2001, 2002,..., 2012 o Με το φόρτωμα της σελίδας, στις τρεις λίστες θα εμφανίζονται ως προεπιλεγμένες η τρέχουσα ημέρα, μήνας και χρόνος. Για παράδειγμα, αν η τρέχουσα ημερομηνία είναι η 15/2/2011, στη λίστα Day θα είναι προεπιλεγμένη η τιμή 15, στη λίστα Month η τιμή February και στη λίστα Year η τιμή Το Check Box «Σπουδάζω» θα δηλώνει κατά πόσο ο χρήστης είναι φοιτητής ή όχι o Όταν το check box είναι επιλεγμένο, οι λίστες «Πανεπιστήμιο» και «Τμήμα» θα είναι ενεργοποιημένες (enabled), δηλαδή ο χρήστης θα μπορεί να επιλέγει το Πανεπιστήμιο και το Τμήμα στο οποίο φοιτά. Όταν το check box είναι απο-επιλεγμένο, οι λίστες «Πανεπιστήμιο» και «Τμήμα» θα είναι απενεργοποιημένες (disabled), δηλαδή ο χρήστης δεν θα μπορεί να επιλέγει Πανεπιστήμιο ή Τμήμα. Στη λίστα «Πανεπιστήμιο» θα υπάρχουν (τουλάχιστον) οι επιλογές «Πανεπιστήμιο Αιγαίου» και «Πανεπιστήμιο Αθηνών» o Όταν ο χρήστης επιλέγει την επιλογή «Πανεπιστήμιο Αιγαίου», η λίστα Τμήμα θα γεμίζει με τις επιλογές «Πολιτισμική Τεχνολογία και Επικοινωνία», «Γεωγραφία» και «Κοινωνιολογία». Αντίστοιχα, όταν ο χρήστης επιλέγει την επιλογή «Πανεπιστήμιο Αθηνών», η λίστα Τμήμα θα γεμίζει με τις επιλογές «Πληροφορική», «Φιλολογία» και «Νομική». Στα τρία πεδία κειμένου (textfields) ο χρήστης θα πληκτρολογεί το όνομα, επώνυμο και του o Το πεδίο θα πρέπει να οπωσδήποτε να περιέχει (τουλάχιστον) τους χαρακτήρες «παπάκι» ) και τελεία (. ). Στο Radio Group «Φύλλο» ο χρήστης θα επιλέγει το φύλλο του (άντρας ή γυναίκα). Η προκαθορισμένη λειτουργία κάθε στοιχείου Radio Group είναι ότι επιλέγοντας μία από τις προσφερόμενες επιλογές, οι υπόλοιπες απο-επιλέγονται, π.χ. αν ο χρήστης κάνεις κλικ πάνω στο «Άντρας» θα επιλεχθεί αυτή η επιλογή (θα εμφανιστεί ένας κύκλος) και θα απο-επιλεγεί η επιλογή «Γυναίκα», και αντίστροφα. Το πάτημα του πλήκτρου (Button) «Summary» θα έχει ως αποτέλεσμα να εμφανιστεί ένα alert που θα δείχνει τις επιλογές που έχει κάνει ο χρήστης στη φόρμα. Σε περίπτωση όμως που ο χρήστης δεν έχει πληκτρολογήσει όνομα ή επώνυμο θα εμφανίζεται ένα alert με το αντίστοιχο μήνυμα λάθους. Αντίστοιχα, σε περίπτωση που ο χρήστης έχει πληκτρολογήσει ένα που δεν είναι σωστό, δηλαδή δεν περιέχει (τουλάχιστον) τους χαρακτήρες «παπάκι» ) και τελεία (. ) θα εμφανίζεται alert με το αντίστοιχο μήνυμα λάθους. Τα τρία διαφορετικά μηνύματα - 2 -

Δηλαδή να επιλεχθούν αυτόματα στις πρώτες τρεις λίστες η τρέχουσα ημερομηνία, να επιλεχθεί (checked) το Check Box «Σπουδάζω», στις επόμενες δύο λίστες να επιλεχθούν οι επιλογές «Πανεπιστήμιο Αιγαίου»

3 alert που μπορούν να εμφανιστούν με το πάτημα του πλήκτρου «Summary» φαίνονται στις παρακάτω εικόνες. Το πάτημα του πλήκτρου (Button) «Reset» θα έχει ως αποτέλεσμα να επανέλθει η φόρμα στην προκαθορισμένη της μορφή. Δηλαδή να επιλεχθούν αυτόματα στις πρώτες τρεις λίστες η τρέχουσα ημερομηνία, να επιλεχθεί (checked) το Check Box «Σπουδάζω», στις επόμενες δύο λίστες να επιλεχθούν οι επιλογές «Πανεπιστήμιο Αιγαίου» και «Πολιτισμική Τεχνολογία & Επικοινωνία», Φύλλο «Άντρας» και τέλος να σβηστεί (αν έχει ήδη πληκτρολογηθεί) το περιεχόμενο των textfields «Όνομα», «Επώνυμο» και « ». Ο σύνδεσμος «About us» θα οδηγεί σε μια δεύτερη σελίδα που θα εμφανίζει το ονοματεπώνυμο, τον Α.Μ. και μια φωτογραφία σας. 2. Χρήσιμες Javascript συναρτήσεις για την υλοποίηση της εφαρμογής Για το διάβασμα της τρέχουσας ημερομηνίας και ώρας (ώστε να επιλεγούν οι κατάλληλες επιλογές στις 3 πρώτες λίστες) θα χρησιμοποιήσετε μεθόδους του αντικειμένου Date (βλ. Κεφάλαιο 12 του βιβλίου σας της Javascript). Για να «γεμίσετε» τις λίστες με τις επιλογές τους, από το περιβάλλον του Dreamweaver κάνετε ένα κλικ πάνω στη λίστα, και στη συνέχει πατάτε το πλήκτρο «List Values» στο κάτω μέρος του παραθύρου (του Dreamweaver). Οι επιλογές συμπληρώνονται όπως φαίνεται στην παρακάτω εικόνα - 3 -

Χρήσιμες ιδιότητες / συναρτήσεις για λίστες (list / menu): o Αν η λίστα στην οποία επιλέγεται ο μήνας λέγεται month, τότε η παρακάτω εντολή θα έχει ως αποτέλεσμα να επιλεχθεί η πρώτη επιλογή

4 Χρήσιμες ιδιότητες / συναρτήσεις για λίστες (list / menu): o Αν η λίστα στην οποία επιλέγεται ο μήνας λέγεται month, τότε η παρακάτω εντολή θα έχει ως αποτέλεσμα να επιλεχθεί η πρώτη επιλογή («January») month.selectedindex = 0; o Σε μια λίστα που ονομάζεται list, η παρακάτω εντολή θα εμφανίσει σε ένα alert το πλήθος των επιλογών της: alert (list.length); list.length = 0; o H παρακάτω εντολή θα «αδειάσει» τη λίστα από όλες τις επιλογές της: o Οι δύο παρακάτω εντολές θα προσθέσουν στη λίστα μία νέα επιλογή τη («new choice)»: list.options[i] = new Option("", ""); list.options[i].text = new choice ; o Στη λίστα month, η παρακάτω εντολή θα εμφανίσει σε ένα alert τον 5o μήνα («May»): alert (month.options[4].text) o Στη λίστα month, η παρακάτω εντολή θα εμφανίσει σε ένα alert τον επιλεγμένο μήνα (π.χ. «December»): alert (month.options[month.selectedindex].text) o Tutorials σχετικά με τη χρήση των List/Menu στη Javascript μπορείτε να βρείτε στις διευθύνσεις: Για να εμφανίσετε σε ένα alert κάποιο μήνυμα σε διαφορετικές γραμμές, θα πρέπει (εκεί όπου θέλετε να «αλλάξετε» γραμμή) να χρησιμοποιήσετε το χαρακτήρα \n (new line character). Για παράδειγμα το αποτέλέσμα της εκτέλεσης των παρακάτω εντολών φαίνεται στην ακόλουθη εικόνα: var message = ""; message = message + "First Line"; message = message + "\nsecond Line"; alert (message); - 4 -

5 Αν έχετε ονομάσει το Radio Group sex τότε στις παρακάτω εντολές, το alert θα εμφανιστεί μόνο αν έχει επιλεχθεί η πρώτη επιλογή («Άντρας»): if (sex[0].checked) alert ("Φύλλο: Άντρας"); Όταν ελέγχετε κατά πόσο το πεδίο « » είναι συμπληρωμένο σωστά, θα πρέπει να διατρέξετε έναν-προς-ένα (με ένα for loop) όλους τους χαρακτήρες που πληκτρολόγησε ο χρήστης και να δείτε κατά πόσο σε αυτούς περιέχονται οι χαρακτήρες παπάκι και τελεία. Η παρακάτω συνθήκη θα είναι αληθής μόνο αν ο i-οστός χαρακτήρας του πεδίου είναι το παπάκι. if To for loop που θα υλοποιήσετε για να διατρέξετε τους χαρακτήρες του πεδίου θα εκτελεστεί τόσες φορές, όσοι είναι και οι χαρακτήρες που πληκτρολόγησε ο χρήστης. Για παράδειγμα, η ακόλουθη εντολή θα εμφανίσει σε alert το πλήθος των χαρακτήρων του πεδίου alert (mail.length); Για να ενεργοποιήσετε / απενεργοποιήσετε τις λίστες «Πανεπιστήμιο» και «Τμήμα» με το πάτημα του Check Box «Σπουδάζω» θα χρησιμοποιήσετε την ιδιότητα disabled της λίστας. Αν για παράδειγμα η λίστα «Πανεπιστήμιο» ονομάζεται university τότε οι παρακάτω δύο εντολές θα ενεργοποιήσουν και θα απενεργοποιήσουν αντίστοιχα τη λίστα: university.disabled = false; university.disabled = true; 3. Βαθμολόγηση εργασίας Η εργασία σας θα βαθμολογηθεί με βάση το κατά πόσο ικανοποιεί τις απαιτήσεις και προδιαγραφές που αναλύθηκαν στις προηγούμενες παραγράφους. Σας προτείνεται να παραδώσετε την εργασία ακόμα κι αν δεν λειτουργεί ικανοποιητικά (θα εκτιμηθεί και θα βαθμολογηθεί η προσπάθειά σας). Θα βαθμολογηθεί επιπλέον η συμπερίληψη στο status bar της HTML σελίδα σας ενός μηνύματος που θα αλλάζει περιοδικά, κάθε 1 sec. Αρχικά θα εμφανίζει το μήνυμα: Creator: <Ονοματεπώνυμό σας>, Α.Μ.: <Ο Α.Μ. σας>, μετά από ένα δευτερόλεπτο θα - 5 -

6 εμφανίζει την τρέχουσα ημερομηνία σε μορφή ημέρα/μήνας/χρονιά, π.χ.: Date: 12/1/2010, μετά από ένα δευτερόλεπτο θα εμφανίζει την τρέχουσα ώρα σε μορφή ώρες:λεπτά:δευτερόλεπτα, π.χ.: Time: 15:23:20, κ.ο.κ. Για την αλλαγή του status bar του παραθύρου του browser θα χρησιμοποιήσετε την ιδιότητα status του αντικειμένου window: window.status = Hello ; // Θα αλλάξει το status bar του browser σε Hello Επίσης, για το διάβασμα της τρέχουσας ημερομηνίας και ώρας θα χρησιμοποιήσετε μεθόδους του αντικειμένου Date (βλ. Κεφάλαιο 12 του βιβλίου σας της Javascript). Τέλος, θα συνεκτιμηθούν στη βαθμολογία της εργασίας: Ύπαρξη σχολίων στον Javascript κώδικα Στοίχιση κώδικα (για παράδειγμα, οι εντολές που εκτελούνται όταν ικανοποιείται μια συνθήκη if ή όταν τρέχει ένας βρόγχος for να είναι στοιχισμένες πιο δεξιά και η μία κάτω από την άλλη,) ώστε ο κώδικας να είναι ευανάγνωστος) Η παράδοση της εργασίας είναι υποχρεωτική και προσμετράει σε ποσοστό 15% της συνολικής βαθμολογίας του μαθήματος. 4. Οδηγίες για την παράδοση της εργασίας: Καταληκτική ημερομηνία για την παράδοση της εργασίας είναι η 21/1/2011. Η εργασία θα γίνει σε ομάδες των δύο ατόμων! Η παράδοση θα γίνει ηλεκτρονικά. Θα δημιουργήσετε ένα zip αρχείο που θα περιλαμβάνει όλα τα περιεχόμενα του φακέλου όπου αποθηκεύσετε την εργασία σας. Στον φάκελο θα πρέπει να υπάρχει το HTML αρχείο (στο οποίο περιλαμβάνεται ο Javascript κώδικας) και τυχόν αρχεία γραφικών. Επαληθεύστε ότι το zip αρχείο είναι στη μορφή που πρέπει αποσυμπιέζοντάς το σε κάποιο δικό σας φάκελο (θα πρέπει να αποσυμπιέσει όλα τα αρχεία της εφαρμογής σας, αναπαράγοντας την ιεραρχική του δομή, δηλαδή δημιουργώντας τους ίδιους καταλόγους). Το όνομα του zip αρχείου θα είναι ίδιο με το username σας (π.χ. ct0xxxx_ct0xxxx.zip). Η παράδοση της εργασίας θα πρέπει να γίνει με αποστολή στο διδάσκοντα (aneiros@aegean.gr). Στο θα πρέπει να επισυνάψετε (attachment) το zip αρχείο και το subject του μηνύματος θα πρέπει να είναι της μορφής: <Ονοματεπώνυμο>, Α.Μ.:..., Δικτυακά Πολυμέσα Ι: 2 η εργασία Το αυτό θα πρέπει να το «κοινοποιήσετε» και στον εαυτό σας (cc: ctxxxxxx@ct.aegean.gr; ctxxxxxx@ct.aegean.gr) και να μην το σβήσετε από τη λίστα των αποσταλμένων σας ( Sent Items ). Καλή επιτυχία!!! - 6 -

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

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

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