Ανάπτυξη εφαρµογών για τον Παγκόσµιο Ιστό

Μέγεθος: px
Εμφάνιση ξεκινά από τη σελίδα:

Download "Ανάπτυξη εφαρµογών για τον Παγκόσµιο Ιστό"

Transcript

1 Ανάπτυξη εφαρµογών για τον Παγκόσµιο Ιστό Επιµέλεια: Πατερίτσας Χρήστος Βαρλάµης Ηρακλής

2 TU1.UT TU ιαδίκτυο TU2.UT TUΕισαγωγή TU3.UT TUΜεθοδολογία TU4.UT TUΤεχνολογίες TU5.UT TUJavaScriptUT Περιεχόµενα TU1.1.UT TUΗ και παγκόσµιος ιστόςut... 5 δοµή και οι υπηρεσίες του ιαδικτύουut... 5 TU1.2.UT TUΠαγκόσµιος ΙστόςUT... 7 στην HTMLUT... 9 TU2.1.UT TUΕτικέτεςUT TU2.2.UT TUΗ δοµή ενός HTML αρχείουut TU2.3.UT TUΟι σηµαντικότερες ετικέτες της HTMLUT TU2.4.UT TUΠίνακες (Tables)UT TU2.5.UT TUΧάρτες εικόνας (Image-maps)UT TU2.6.UT TUΦόρµες (Forms)UT TU ηµιουργία ΦορµώνUT TUΠεδία ΦόρµαςUT TUΕπεξεργασία στοιχείων φόρµαςut TU2.7.UT TUΠλαίσια (Frames)UT TU ηµιουργία ΠλαισίωνUT TUΕισαγωγή Εγγράφων σε ΠλαίσιαUT ΣχεδίασηςUT TU3.1.UT TUΕισαγωγήUT TU3.2.UT TUΜια απλή προσέγγισηut TUα) Καθορισµός των στόχωνut TUβ) Κατανόηση των αναγκών του χρήστη.ut TUγ) Καθορισµός της επιτυχίαςut TUδ) Σχεδιασµός της δοµήςut TUε) Πραγµατοποίηση της δοµήςut TUστ) Συλλογή κριτικήςut TUζ) Προσαρµογή στις νέες καταστάσεις και τις απαιτήσεις του χρήστηut TU3.3.UT TUΤρία παραδείγµατα δόµησηςut TU3.4.UT TUΟ TU1) Η ακολουθιακή δοµήut TU2) Η ιεραρχική δοµήut TU3) Η δοµή πλέγµατοςut ανθρώπινος παράγοντας στo σχεδιασµούut διαδικτύουut TU4.1.UT TUΑρχιτεκτονική εφαρµογών του ΠΙUT TU4.2.UT TUΣτατικές τεχνολογίες - HTMLUT TU4.3.UT TUΓλώσσες σεναρίων Scripting languagesut TU4.4.UT TUΓλώσσες προγραµµατισµούut TU4.5.UT TUServer side scriptingut TU4.6.UT TUClient vs Server SideUT TU5.1.UT TUΑπαιτήσεις της JavaScriptUT TU5.2.UT TUNon-JavaScript browsersut TU5.3.UT TUEvents - ΓεγονόταUT... 43

3 TU5.4.UT TUFunctions - ΣυναρτήσειςUT TU5.5.UT TUΙεραρχία JavaScriptUT TU5.6.UT TUFramesUT TU ηµιουργώντας framesut TUFrames και JavaScriptUT TUNavigation barsut TU5.7.UT TUΠαράθυραUT TU ηµιουργώντας παράθυραut TU ηµιουργώντας δυναµικά έγγραφαut TU5.8.UT TUΤο statusbarut TU5.9.UT TUTimeoutsUT TU5.10.UT TUBuilt In αντικείµεναut TUΤο αντικείµενο DateUT TUΤο αντικείµενο ArrayUT TUΤο αντικείµενο MathUT TUΤο αντικείµενο ImageUT TU5.11.UT TUΦόρµεςUT TUΕξετάζοντας την φόρµαut TUΣτέλνοντας µια φόρµαut TUΠώς να κάνετε focus σε ένα συγκεκριµένο αντικείµενοut TU5.12.UT TUΓεγονότα του JavaScript 1.2UT TUΝέα γεγονόταut TU5.13.UT TUΤο αντικείµενο EventUT TUΚαταλαβαίνοντας τα EventsUT VBScript και η τεχνολογία ASPUT TU6.1.UT TUΤι είναι η ASPUT TU6.UT TUΗ γλώσσα TUΠως τρέχει µια ASP σελίδαut TU6.2.UT TUΕισαγωγή στη VBScriptUT TUΤύποι εδοµένων στη VBScriptUT TUΜεταβλητές στη VBScriptUT TUΣταθερές στη VBScriptUT TU ιαδικασίες στη VBScriptUT TUΠροτάσεις Συνθήκης κι Επανάληψης στη VBScriptUT TUΒρόγχοι Επανάληψης στη VBScriptUT TU6.3.UT TUΒασικές τεχνικές ASPUT TUΛήψη πληροφορίας από το χρήστηut TUΠαράδειγµα - Φόρµα για παροχή σύνδεσης µε συγκεκριµένο τµήµα µιας εταιρίαςut TUΕπεξήγηση του κώδικαut TU6.4.UT TUΛήψη πληροφοριών από το χρήστηut TUΕπεξήγηση του κώδικαut TUΕκτύπωση πληροφοριώνut TUΠαράδειγµα - Registration of Department ReplyUT TU6.5.UT TUΠαραδείγµατα χρήσης των τεχνικών ASPUT TUΕπεξήγηση του ASP κώδικαut TU6.6.UT TUΑντικείµενα στην ASPUT TUΤο αντικείµενο ApplicationUT TUΤο αντικείµενο ASPErrorUT

4 TU7.UT TUΠρογραµµατισµός TU8.UT TUΠηγέςUT... Ανάπτυξη εφαρµογών για τον Παγκόσµιο Ιστό TUΤο αντικείµενο RequestUT TUΤο αντικείµενο ResponseUT TUΤο αντικείµενο ServerUT TUΤο αντικείµενο SessionUT TUΤο αντικείµενο CommandUT TUΤο αντικείµενο ConnectionUT TUΤο αντικείµενο ObjectContextUT TUASP scripting objectsut TU6.7.UT TUASP CookiesUT TU6.8.UT TUComponents στην ASPUT TU6.9.UT TU ιαχείριση Βάσεων εδοµένων στην ASPUT Java AppletsUT TU7.1.UT TUΈνα πρώτο παράδειγµα συγγραφής java applet.ut TU7.2.UT TUΜέθοδοι που καλούνται κατά την εκτέλεση appletut TU7.3.UT TUApplets µε γραφικά - κείµενοut TU7.4.UT TUΕικόνες και ήχοιut TU7.5.UT TU ιαλογικότηταut TU7.6.UT TUI/O και δίκτυαut TU7.7.UT TUΕξαιρέσειςUT TU7.8.UT TUΠολυνηµατισµός (multi-threading)ut

5 1. ιαδίκτυο και παγκόσµιος ιστός 1.1. Η δοµή και οι υπηρεσίες του ιαδικτύου Το διαδίκτυο είναι µια συλλογή από τοπικά, εθνικά και διεθνή δίκτυα υπολογιστών. Οι υπολογιστές που συνδέονται στα δίκτυα αυτά ανταλλάσσουν δεδοµένα και κατανέµουν διάφορες λειτουργίες. Ο βασικός κορµός του ιαδικτύου (Internet Backbone) ελέγχεται και συντηρείται από εταιρίες τηλεπικοινωνιών και παρέχει ταχύτατες συνδέσεις µεταξύ των διαφόρων περιοχών του πλανήτη. Εταιρίες τηλεπικοινωνιών, πανεπιστήµια και άλλοι οργανισµοί προσφέρουν τις επιµέρους τοπικές συνδέσεις και διασφαλίζουν τη συνεχή και ασφαλή διακίνηση επικοινωνιών µεταξύ των κόµβων του ιαδικτύου. Η βασική δοµή του δικτύου παραµένει γενικά σταθερή, πολύ συχνά όµως προστίθενται και αφαιρούνται κόµβοι σε τοπικό επίπεδο. Οι εταιρίες παροχής υπηρεσιών ιαδικτύου (Internet Service Providers - ISPs) είναι αυτές που παρέχουν πρόσβαση σε εταιρίες, οργανισµούς και ιδιώτες. Παρέχουν όλο τον τηλεπικοινωνιακό εξοπλισµό που απαιτείται για τη σύνδεση του υπολογιστή µε το backbone. Εκτός από τη σύνδεση προσφέρουν και ένα σύνολο προσωπικών υπηρεσιών (µε χρήση User ID και password), όπως λογαριασµό , χώρο για δηµοσίευση πληροφορίας κλπ. Οι τρόποι µε τους οποίες επιτυγχάνεται η σύνδεση ενός προσωπικού υπολογιστή µε το ιαδίκτυο είναι πολλοί και ποικίλουν σε κόστος, ταχύτητα σύνδεσης και µονιµότητα: Τηλεφωνική σύνδεση (dial-up) µε modem (56K). Ο βασικότερος τρόπος σύνδεσης αλλά και ο πιο αργός. Καλωδιακά modems. Απαιτούν κάρτα δικτύου και καλωδιακό modem. ίνουν συνεχή σύνδεση ταχύτερη της dialup. Σύνδεση ISDN (Integrated Services Digital Network) µε ταχύτητες διπλάσιες της τηλεφωνικής σύνδεσης (64K, 128K) Σύνδεση DSL (Digital Subscriber Line). Πολλαπλάσιες ταχύτητες από dial-up και ISDN. Συνεχής σύνδεση και πιο ακριβή. Ασύρµατη σύνδεση (Wireless Network). Γρήγορη και ευέλικτη σύνδεση, απαιτεί οπτική επαφή µε κάποιον άλλο κόµβο του ιαδικτύου, ιδανική για ίκτυα εντός πόλης, όπου οι αποστάσεις µεταξύ των κόµβων είναι µικρές. ορυφορική σύνδεση (DSS - Digital Satellite Service). Απαραίτητα συστατικά για την εύρυθµη λειτουργία αυτού του παγκόσµια κατανεµηµένου δικτύου υπολογιστών είναι: Ένα σύστηµα διευθυνσιοδότησης των κόµβων του δικτύου. Τη λύση στο πρόβληµα αυτό δίνει η διεύθυνση IP, ένας αριθµός µοναδικός για κάθε υπολογιστή που βρίσκεται ανά πάσα στιγµή συνδεδεµένος στο Internet. Το σύστηµα αριθµοδότησης είναι ιεραρχικό, έτσι ώστε πρώτα να εντοπίζεται το ευρύτερο υποδίκτυο (συχνά σε εθνικό επίπεδο) και στη συνέχεια το τοπικό υποδίκτυο και ο κάθε υπολογιστής σε αυτό. Ακόµα και υπολογιστές που δεν ιαδίκτυο και παγκόσµιος ιστός 5

6 βρίσκονται συνεχώς συνδεδεµένοι στο διαδίκτυο αποκτούν κάποια προσωρινή IP διεύθυνση όσο συνδέονται σε αυτό έτσι ώστε να µπορούν να εντοπίζονται από τους υπόλοιπους κόµβους. Ένα αυστηρά καθορισµένο πρωτόκολλο επικοινωνίας που θα εξασφαλίζει την ορθή µετάδοση της πληροφορίας από την πηγή στον προορισµό. Το πρωτόκολλο TCP/IP (Transfer Control Protocol/ Internet Protocol) έχει αναλάβει να εξασφαλίσει τη σωστή µετάδοση της πληροφορίας. Το πρωτόκολλο αναλαµβάνει την τµηµατική µετάδοση της πληροφορίας (σε στοιχειώδη τµήµατα: πακέτα - packets) από τον αποστολέα στον παραλήπτη µέσα από διάφορους κόµβους του ιαδικτύου. Χρησιµοποιεί συχνά διαφορετικά µονοπάτια ώστε να εξασφαλίσει ταχύτητα στη µετάδοση και ανθεκτικότητα σε προβλήµατα του δικτύου (διακοπές στη συνδεσµολογία, πληρότητα καναλιών µετάδοσης κλπ) και διαθέτει µηχανισµούς ελέγχου ορθότητας της πληροφορίας που µεταδόθηκε και δυνατότητα επαναµετάδοσής της. Τέλος αναλαµβάνει τη σύνθεση της πληροφορίας και ενηµερώνει τον αποστολέα για την επιτυχή µετάδοσή της. Ένα σύστηµα καθορισµού της δροµολόγησης της πληροφορίας στο σωστό προσδιορισµό. Ένα σύνολο από συσκευές δροµολόγησης της πληροφορίας (δροµολογητές - Routers) αναλαµβάνει να καθορίσει την κίνηση των πακέτων πληροφοριών προς το σωστό προορισµό. U ροµολόγηση πληροφορίας Μια IP διεύθυνση είναι ένας αριθµός 32-bit, που αποτελείται από 4 επιµέρους αριθµούς των 8-bit µε εύρος τιµών από 0 έως και 255 (28). Παράδειγµα: Το TCP κόβει τα δεδοµένα σε µικρά πακέτα (< 1500 χαρακτήρες). Κάθε πακέτο εισάγεται σε ένα διαφορετικό φάκελο Internet Protocol (IP). Κάθε φάκελος περιέχει τη διεύθυνση του παραλήπτη και έχει την ίδια επικεφαλίδα µε αυτούς που περιέχουν τα υπόλοιπα πακέτα. Ένας router δέχεται τα πακέτα και καθορίζει τον καλύτερο τρόπο για να τα στείλει στον τελικό παραλήπτη. Μετά από επισκέψεις σε πολλούς routers, τα πακέτα φτάνουν στον προορισµό τους. Μόλις φτάσουν στον προορισµό τους, το TCP ελέγχει την ακεραιότητα των δεδοµένων ως προς την επικεφαλίδα κάθε πακέτου. Αν ένα πακέτο δεν έχει έρθει ακέραιο, το TCP στέλνει µια αίτηση για να µεταδοθεί ξανά το πακέτο Υπηρεσίες του ιαδικτύου Ορισµένες από τις υπηρεσίες που προσφέρονται στους χρήστες του ιαδικτύου είναι και οι εξής: Μεταφορά αρχείων (File Transfer). Μια από τις βασικότερες υπηρεσίες του διαδικτύου, πάνω στην οποία στηρίχθηκαν πολλές µεταγενέστερες υπηρεσίες. Υπηρεσίες ενηµέρωσης (Νewsgroups, Usenet). Η πρώτη υπηρεσία του διαδικτύου και ένας από τους βασικούς λόγους για τους οποίους βρήκε απήχηση στην επιστηµονική κοινότητα. ιαδίκτυο και παγκόσµιος ιστός 6

7 Ηλεκτρονική αλληλογραφία ( ). Η βασικότερη υπηρεσία ασύγχρονης επικοινωνίας που έχει καθιερωθεί παγκόσµια και έχει αντικαταστήσει σε µεγάλο βαθµό την κλασική αλληλογραφία λόγω του χαµηλού κόστους και της αµεσότητας που προσφέρει. Άµεση αποστολή µηνυµάτων (Instant messaging). Μία υπηρεσία σύγχρονης επικοινωνίας η οποία όταν συνδυάζεται µε άλλες µικροσυσκευές δίνει πολύ ενδιαφέρουσες εφαρµογές τηλεµατικής και αυτοµατισµού συσκευών. Οµάδες συνοµιλίας, διασκέψεις (Chat Groups). Μια ακόµη υπηρεσία σύγχρονης αµφίδροµης επικοινωνίας για περισσότερους από ένα ταυτόχρονους χρήστες. Η υπηρεσία αναβαθµίστηκε σηµαντικά µε τις νέες δυνατότητες µετάδοσης πολυµεσικών δεδοµένων σε πραγµατικό χρόνο. Τηλεφωνία µέσω διαδικτύου (Internet Telephony). Οι πρόσφατες αναβαθµίσεις κυρίως στη δικτυακή υποδοµή του backbone (οπτικές ίνες κλπ) έδωσαν µεγάλες ταχύτητες µετάδοσης δεδοµένων και επέτρεψαν τη µετάδοση πολυµεσικών δεδοµένων (ήχου, βίντεο) µεγάλου όγκου. Στα πλαίσια αυτά πολλές εταιρίες τηλεφωνίας προτίµησαν την µετάδοση ήχου πάνω από το διαδίκτυο (ψηφιοποίηση και µετάδοση µε τη µορφή πακέτων) ανατρέποντας τη λογική της δόµησης του Internet πάνω από τις τηλεφωνικές γραµµές. Ραδιόφωνο, Τηλεόραση (Internet radio, video on demand). ύο από τις πιο απαιτητικές υπηρεσίες σε πόρους δικτύου, που εµφανίστηκαν τα τελευταία χρόνια και κερδίζουν συνεχώς έδαφος. Ηλεκτρονικό εµπόριο (E-commerce). Η προώθηση και εµπορία ειδών µέσα από το διαδίκτυο είναι σχετικά πρόσφατη στο διαδίκτυο. Αποτέλεσε παρόλα αυτά τη µεγαλύτερη διαφήµιση και αύξησε σηµαντικά το επενδυτικό κεφάλαιο και το ενδιαφέρον του κόσµου για το διαδίκτυο και τις υπηρεσίες του. Παγκόσµιος Ιστός (World wide web). Ο πολιορκητικός κριός του ιαδικτύου. Η υπηρεσία που έκανε το διαδίκτυο προσιτό στο ευρύ κοινό, ολοκληρώνοντας όλες τις προηγούµενες υπηρεσίες σε µια πολύ φιλική διεπαφή. Ταυτόχρονα αποτελεί τη βάση για την επέκταση του ιαδικτύου και σε άλλες συσκευές και δίκτυα (κινητή τηλεφωνία, τραπεζικά δίκτυα) και την ενοποιηµένη παροχή υπηρεσιών Παγκόσµιος Ιστός Χωρίς αµφιβολία, η πιο ενδιαφέρουσα υπηρεσία που προσφέρεται στο ιαδίκτυο είναι ο παγκόσµιος ιστός (World Wide Web ή WWW). Ο ιστός αναπτύχθηκε το 1989 στο Ευρωπαϊκό Εργαστήριο Φυσικής Σωµατιδίων (European Particle Physics Laboratory CERN), στην Ελβετία από τον Tim Berners-Lee και παρέχει στους χρήστες του µια γραφική διεπαφή σε περιεχόµενα του ιαδικτύου. Έδωσε µια πιο προσιτή µορφή στο Internet, προσέγγισε ανθρώπους από όλα τα κοινωνικά στρώµατα και όλα τα γνωστικά πεδία καθώς δεν απαιτούσε εξειδικευµένες γνώσεις υπολογιστών και ταυτόχρονα προσέφερε εύκολη πρόσβαση σε πληθώρα υπηρεσιών του διαδικτύου. Θα µπορούσε κανείς να παροµοιάσει τον ιστό µε µια παγκόσµια βιβλιοθήκη µε άµεση και ελεύθερη χρονικά πρόσβαση στην οποία µπορεί οποιοσδήποτε να προσθέσει νέα βιβλία στα ράφια της και να διαβάσει τα ήδη υπάρχοντα. Παρόλα αυτά ο Παγκόσµιος Ιστός δεν περιορίζεται µόνο σε υπηρεσίες πληροφόρησης αλλά ενσωµατώνει όλες τις υπηρεσίες ψυχαγωγίας, επικοινωνίας, εξυπηρέτησης καθηµερινών αναγκών που προσφέρει το διαδίκτυο. Όσο αφορά πάντως στις υπηρεσίες πληροφόρησης, ο ιστός αποτελεί την οµαδοποίηση, κατά κάποιο τρόπο, όλων εκείνων των αρχείων του κόσµου που α) είναι προσβάσιµα µέσα από το Internet, β) είναι ηλεκτρονικά συνδεδεµένα µεταξύ τους, συνήθως µέσω των ετικετών (tags) της HTML ( HyperText Markup Language, Γλώσσα Προσδιορισµού Υπερκειµένου) και γ) που µπορεί κάποιος να τα δει, να τα επεξεργαστεί ή και να τα κατεβάσει στον Η/Υ µε τη βοήθεια ενός ειδικού προγράµµατος, του αναγνώστη (browser), που τρέχει στον υπολογιστή του. Τα προγράµµατα ανάγνωσης του ιστού (Web browsers) Για να δει κάποιος µια σελίδα στον ιστό χρειάζεται µια ειδική εφαρµογή που ονοµάζεται αναγνώστης ή φυλλοµετρητής (browser). Ο αναγνώστης πρακτικά εκτελείται στον Η/Υ του χρήστη, και του δίνει τη δυνατότητα να ζητήσει πληροφορίες από τις πηγές του ιστού να τις δει και να τις διαχειριστεί στον υπολογιστή του. Με τη βοήθειά του µεταφράζονται τα αρχεία του ιστού (ιστο-σελίδες), µέσα από αυτόν γίνεται πλοήγηση στους διάφορους κόµβους που διαθέτουν πληροφορίες και εµφανίζονται τα αποτελέσµατα. Στην πραγµατικότητα, όταν ένας χρήστης επιλέγει ένα θερµό σηµείο (hot spot) σε µια σελίδα, το πρόγραµµα ανάγνωσης κάνει µια κλήση αίτησης στον σχετικό εξυπηρετητή (server). Στη ιαδίκτυο και παγκόσµιος ιστός 7

8 συνέχεια ο εξυπηρετητής δέχεται την αίτηση του προγράµµατος ανάγνωσης, την επεξεργάζεται και στέλνει τα αποτελέσµατα στο πρόγραµµα ανάγνωσης για να τα µεταφράσει. Τελικά, ο χρήστης βλέπει τα µεταφρασµένα αρχεία. Στα πρώτα χρόνια ύπαρξης του Web ο browser Mosaic που ανέπτυξε η NCSA στο πανεπιστήµιο του Illinois είχε καταφέρει να συνδέσει άµεσα το όνοµά του µε το Web. Σήµερα, οι περισσότεροι χρήστες - αν όχι όλοι - χρησιµοποιούν προγράµµατα ανάγνωσης που µπορούν να εµφανίσουν γραφικά ή, όπως αλλιώς ονοµάζονται, γραφικά προγράµµατα ανάγνωσης. Τέτοια είναι o Internet Explorer που αναπτύχθηκε από τη Microsoft, το open source προϊόν Mozilla το Netscape Navigator που αναπτύχθηκε από τη Netscape Communications για περιβάλλοντα εργασίας Macintosh, Windows και X- Windows, και ο MacWeb από την TradeWave Corporation για περιβάλλον Macintosh. ιαδίκτυο και παγκόσµιος ιστός 8

9 2. Εισαγωγή στην HTML Η HTML (Hypertext MarkUp Language) αποτελεί την γλώσσα κειµένου που χρησιµοποιήθηκε από την αρχή του Web για τη δηµιουργία ιστοσελίδων (Web Pages). Είναι µια δηλωτική γλώσσα µε ιεραρχική δοµή και όχι πολύ αυστηρό συντακτικό, ώστε να επιτρέπει σε χρήστες χωρίς µεγάλη εξειδίκευση να µπορούν εύκολα να µορφοποιούν την πληροφορία που θέλουν να διαθέσουν. Έχει τις ρίζες στην SGML (Standardized General Markup Language) της οποίας και είναι υποσύνολο Σχεδιάστηκε για να καθορίσει τη µορφή εµφάνισης και εν µέρει τη λογική οργάνωση ενός αρχείου κειµένου. Ένα ιδιαίτερο χαρακτηριστικό της είναι ότι δεν περιλαµβάνει όλη την πληροφορία σε ένα µόνο αρχείο αλλά την κατανέµει σε πολλά διασυνδεδεµένα αρχεία (υπερκείµενα) και επιτρέπει στο χρήστη την επιλεκτική ανάγνωσή τους µε παρέµβαση πάνω στους συνδέσµους. Η HTML δεν αποτελεί έναν Παίρνεις Αυτό Που Βλέπεις (What You See Is What You Get, WYSIWYG) επεξεργαστή κειµένου όπως το Word. Αντίθετα χρησιµοποιείται για την δηµιουργία κειµένου του οποίου τµήµατα µαρκάρονται σαν λογικές ενότητες, δηλαδή τίτλους, παραγράφους, λίστες κ.α. και των οποίων η µετάφραση πραγµατοποιείται από το πρόγραµµα ανάγνωσης (web browser) που χρησιµοποιούµε. Αυτό το µοντέλο ανάπτυξης σελίδων είναι ιδιαίτερα ευέλικτο καθώς επιτρέπει σε προγράµµατα ανάγνωσης διαφορετικών δυνατοτήτων και χαρακτηριστικών να αναγνωρίζουν τα ίδια HTML αρχεία. Αναλυτικότερα, όταν κάποιος χρήστης βλέπει µια σελίδα, τότε το πρόγραµµα ανάγνωσης παίρνοντας ένα αντίγραφο του αρχείου που περιέχει αυτή τη σελίδα, µεταφράζει τις ετικέτες της HTML και εµφανίζει τα αποτελέσµατα στην οθόνη του χρήστη. Ένα απλό παράδειγµα HTML αρχείου φαίνεται παρακάτω : <HTML> <HEAD> <TITLE> This is the title of the document </TITLE> </HEAD> <BODY> <H1> This is a heading </H1> This is a <STRONG> sample </STRONG> document. The contents are simple examples of the use of HTML<EM> TAGS</EM>. <P>Here is, for example, an unordered list : <UL> <LI> First item of the list, </LI> <LI> Second list item</li> <LI> Third list item that goes on and on and on to I indicate that the lists can wrap right around the page and still be nicely formatted by the browsers. </LI> <LI> The final item of the list. </LI> </UL> <P> You can also have ordered lists (the items are numbered) and description lists. <HR> <P> And you can draw horizontal lines, which are useful for dividing sections. </BODY> </HTML> Το παραπάνω έγγραφο θα εµφανιζόταν σε έναν web browser όπως φαίνεται παρακάτω. Μεθοδολογία Σχεδίασης 9

10 This is a heading This is a sample document. The contents are simple examples of the use of HTML TAGS. Here is, for example, an unordered list : First item of the list, Second list item Third list item that goes on and on and on to I indicate that the lists can wrap right around the page and still be nicely formatted by the browsers. The final item of the list. You can also have ordered lists (the items are numbered) and description lists. And you can draw horizontal lines, which are useful for dividing sections. Εύκολα µπορεί να διακρίνει κάποιος ότι µια ιστοσελίδα είναι ένα απλό αρχείο κειµένου. Έτσι, δεν χρειάζεται ένα ειδικό επεξεργαστή κειµένου ή κάποιον πολύπλοκο HTML επεξεργαστή κειµένου για να δηµιουργηθεί. Αρκεί ένας απλός επεξεργαστής κειµένου όπως το Notepad των Windows. Βέβαια, µετά την ραγδαία ανάπτυξη του ιστού, υπάρχουν πάρα πολλοί εύχρηστοι (ή όχι) επεξεργαστές κειµένου για HTML µερικοί από τους οποίους είναι το FrontPage, το DreamWeaver και πάρα πολλοί ακόµα. Φυσικά, ο καθένας πρέπει να σκεφτεί τι ακριβώς θέλει να δηµιουργήσει, τι απαιτήσεις έχει η εφαρµογή του έτσι ώστε να διαλέξει και τα κατάλληλα εργαλεία (στην περίπτωσή µας τον καλύτερο γι αυτόν HTML επεξεργαστή κειµένου ή ακόµα και έναν απλό, κοινό επεξεργαστή κειµένου) Ετικέτες Η διαφορά ανάµεσα σε ένα απλό αρχείο κειµένου και ένα αρχείο HTML είναι οι ετικέτες (tags) που χρησιµοποιεί η HTML. Οι ετικέτες είναι το τµήµα εκείνο του κειµένου που περικλείεται από τα σύµβολα µικρότερο ( < ) και µεγαλύτερο ( > ) και την εντολή µέσα στα σύµβολα αυτά που λέει στο πρόγραµµα ανάγνωσης τι σηµαίνει κάθε κοµµάτι του κειµένου. Έτσι, για παράδειγµα η ετικέτα <H1> δηλώνει την αρχή µιας επικεφαλίδας µεγέθους 1, ενώ το </H1> δηλώνει το τέλος του κειµένου (το slash / δηλώνει το τέλος µιας ετικέτας) που µεταφράζεται σαν επικεφαλίδα µε µέγεθος 1. Οπότε το <H1> This is a heading </H1> µαρκάρει τη συµβολοσειρά This is a heading σαν επικεφαλίδα επιπέδου 1 (υπάρχουν έξι δυνατά µεγέθη επικεφαλίδας, από το H1 µέχρι το H6). Η συµβολοσειρά This is a heading ονοµάζεται περιεχόµενο (content) του HTML αρχείου, περιεχόµενο είναι δηλαδή το κείµενο που παρεµβάλλεται µεταξύ δυο ετικέτες. Τα ονόµατα των περισσοτέρων ετικετών είναι απολύτως λογικά καθώς προκύπτουν από τα φυσικά ονόµατα τους. Έτσι, το <P> δηλώνει µια παράγραφο (paragraph στα αγγλικά), ενώ το <H1> µία επικεφαλίδα µεγέθους 1 (heading στα αγγλικά). Θα πρέπει να γίνει κατανοητό ότι τα προγράµµατα ανάγνωσης δεν εµφανίζουν τις ετικέτες (έτσι ένας χρήστης δεν µπορεί να τα δει παρά µόνο αν ανοίξει το HTML αρχείο ή αν ανοίξει από το µενού View ενός προγράµµατος ανάγνωσης την επιλογή Document Source), αλλά τα αποτελέσµατα τους, όπως για παράδειγµα το µέγεθος της γραµµατοσειράς ή τη διαµόρφωση του κειµένου. Κάποιες ετικέτες πρέπει να χρησιµοποιούνται σαν ζευγάρια, να δηλώνουν δηλαδή την αρχή και το τέλος του κειµένου που διαµορφώνουν (π.χ. οι ετικέτες <H1>, </H1>), ενώ άλλα δεν χρειάζεται να χρησιµοποιούνται έτσι (π.χ. η ετικέτα <P>). Επιπλέον, κάποιες φορές κάποιες ετικέτες λαµβάνουν προσδιοριστικά, τα οποία λειτουργούν σαν µεταβλητές και συνήθως προσδίδουν τιµές που καθορίζουν ειδικά χαρακτηριστικά (attributes) για την ετικέτα Η δοµή ενός HTML αρχείου H HTML είναι µια δοµηµένη γλώσσα. Περιλαµβάνει κανόνες σχετικά µε το που µπορούν τοποθετηθούν οι ετικέτες και που όχι µέσα στο HTML αρχείο. Η βασική δοµή ενός HTML αρχείου περιλαµβάνει την επικεφαλίδα και το σώµα : <HTML> Μεθοδολογία Σχεδίασης 10

11 <HEAD> <TITLE> This is a title </TITLE> </HEAD> <BODY> Εδώ παρεµβάλλονται το περιεχόµενο το οποίο πρέπει να εµφανίζεται από web browser καθώς και οι ετικέτες της HTML οι οποίες είναι οι εντολές που αναγνωρίζει ο web browser. </BODY> </HTML> 2.3. Οι σηµαντικότερες ετικέτες της HTML HTML ( <HTML>...</HTML> ) Η σηµαντικότερη ετικέτα είναι η HTML καθώς είναι αυτή που περικλείει όλα τα υπόλοιπα και ολόκληρο βέβαια το κείµενο. ηλώνει ότι το κείµενο που περιβάλλει είναι ένα HTML αρχείο και πέρα από αυτό δίνει τη δυνατότητα στο πρόγραµµα ανάγνωσης να διακρίνει µεταξύ των διαφορετικών εκδόσεων της HTML. Μπορεί να περιλαµβάνει µόνο τις ετικέτες HEAD και BODY. HEAD και TITLE ( <HEAD>...</HEAD> και <TITLE>...</TITLE> ) Η ετικέτα που βρίσκεται κάτω από το HTML ονοµάζεται HEAD. Περιλαµβάνει πληροφορίες που αφορούν το κείµενο, αλλά δε εµφανίζονται σαν µέρος του κειµένου από το πρόγραµµα ανάγνωσης. Μια από αυτές τις πληροφορίες είναι η ετικέτα TITLE. Η TITLE εµφανίζεται στην οθόνη του χρήστη ξεχωριστά από το υπόλοιπο κείµενο και συνήθως σε µια περιορισµένη περιοχή, όπως είναι ένα παράθυρο (title bar) ή µια µόνο γραµµή στην κορυφή του κειµένου. Αν οι πληροφορίες που περιέχει είναι περισσότερες από τον προκαθορισµένο χώρο, τότε απλώς δεν θα εµφανιστούν όλες. Η TITLE πρέπει να περιγράφει το κείµενο, αφού συνήθως χρησιµοποιείται σαν αναφορά για τις θέσεις (sites) που έχει κάποιος επισκεφτεί - πρέπει να είναι δυνατό να µαντέψουµε το περιεχόµενο µιας θέσης από το TITLE. BODY ( <BODY>...</BODY> ) Μέσα σε αυτή την ετικέτα περιλαµβάνεται όλο το κείµενο και ότι άλλο πρόκειται να εµφανιστεί από το πρόγραµµα ανάγνωσης. Τυπικά, το BODY δεν µπορεί να περιέχει άµεσα κείµενο, αλλά θα περιέχει άλλες ετικέτες οι οποίες µε τη σειρά τους θα περιέχουν κείµενο. Αυτό γιατί το BODY δηλώνει αυτό είναι το σώµα του αρχείου και δεν δίνει καµία επιπλέον εξήγηση σε ότι περιέχεται σε αυτό. Με άλλα λόγια, οι υπόλοιπες ετικέτες που περιλαµβάνονται µέσα του θα οργανώσουν το κείµενο και θα προσδιορίσουν κάθε φορά τη σηµασία και τη διαµόρφωσή του. Θα πρέπει να αναφέρουµε ότι τα περιεχόµενα των BODY και HEAD χρησιµοποιούνται αποκλειστικά και µόνο από το καθένα : έτσι οι ετικέτες που περιέχονται µέσα στο BODY δεν µπορούν να υπάρξουν µέσα στο HEAD και αντίστροφα (συνεπώς είναι προκαθορισµένες οι ετικέτες που µπορούν να συµπεριληφθούν στο BODY ή στο HEAD). Επιπλέον, µε τη χρήση κάποιον συγκεκριµένων προσδιοριστικών µπορούµε να ορίσουµε το χρώµα του φόντου και του κειµένου. Έτσι, έχουµε : <BODY BGCOLOR= #rrggbb TEXT= #rrggbb LINK= #rrggbb VLINK= #rrggbb ALINK= #rrggbb > Τα προσδιοριστικά που φαίνονται µέσα στο BODY δηλώνουν : BGCOLOR, το φόντο δηλαδή την περιοχή πίσω από το κείµενο. TEXT, όλο το περιεχόµενο του BODY, δηλαδή το κείµενο και οτιδήποτε άλλο εκτός από τους συνδέσµους. LINK, κείµενο που ενεργοποιεί σύνδεσµο, που δεν τον έχουµε ακόµα επισκεφτεί, αυτοί έχουν προκαθορισµένο χρώµα το µπλε. VLINK, κείµενο που ενεργοποιεί σύνδεσµο τον οποίο έχουµε επισκεφτεί και το χρώµα του προκαθορισµένα είναι µοβ. Μεθοδολογία Σχεδίασης 11

12 ALINK, κείµενο που σηµατοδοτεί σύνδεσµο ο οποίος είναι ενεργός τη δεδοµένη στιγµή της σύνδεσης και έχει προκαθορισµένο χρώµα το κόκκινο. Τα χρώµατα τα ορίζουµε σε δεκαεξαδικούς αριθµούς., έτσι το rr δηλώνει το κόκκινο, το gg το πράσινο και το bb το µπλε. Για παράδειγµα, για να έχουµε σκούρο µπλε φόντο, κίτρινο κείµενο, σκούρο πράσινο του συνδέσµους που δεν έχουµε επισκεφτεί, φωτεινό κόκκινο τους συνδέσµους που έχουµε επισκεφτεί και ανοιχτό πράσινο τους ενεργούς συνδέσµους γράφουµε : <BODY BGCOLOR= #OOOOCC TEXT= #FFFFOO LINK= #OODDOO VLINK= #FFOOOO ALINK= #OOFFOO > Με την HTML έχουµε τη δυνατότητα εκτός από διαφορετικό χρώµα στο φόντο της σελίδας, να βάλουµε κάποια εικόνα που να επαναλαµβάνεται σαν ταπετσαρία. Έτσι, γράφοντας : <BODY BGCOLOR= graphic.gif TEXT= #rrggbb LINK= #rrggbb VLINK= #rrggbb ALINK= #rrggbb > εµφανίζεται στο φόντο η εικόνα που έχουµε ορίζει στο BGCOLOR επαναλαµβανόµενη. Φυσικά, η τεχνική αυτή θέλει ιδιαίτερη προσοχή καθώς µπορεί να δηµιουργήσουµε εικόνες µε τις οποίες είναι δύσκολο να διαβάσουµε το κείµενο. Επίσης, µεγάλες εικόνες δυσχεραίνουν την εµφάνιση της σελίδας, ειδικά αν το εύρος ζώνης είναι περιορισµένο, όπως συµβαίνει τις περισσότερες φορές. Γι αυτό είναι προτιµότερο να επιλέγουµε απλές εικόνας και ένα χρώµα που να είναι ευανάγνωστο σε σχέση µε αυτή. Πρέπει τέλος να τονίσουµε ότι τα προσδιοριστικά αυτά αποτελούν τµήµα του BODY. Για να είναι ενεργή η χρήση τους πρέπει να τοποθετηθούν µέσα στο κανονικό BODY και όχι µέσα σε µια δεύτερη ετικέτα. Μπλοκ αναγνώρισης (identification block) Το µπλοκ αναγνώρισης απευθύνεται σε χρήστες που δηµιουργούνε HTML αρχεία. Εδώ χρησιµοποιούνται ετικέτες σχολίων, που δεν εµφανίζονται από το πρόγραµµα ανάγνωσης σαν µέρος του κειµένου. Το µπλοκ αναγνώρισης είναι ιδιαίτερα σηµαντικό σε µεγάλα αρχεία που στη δηµιουργία τους έχουν συµβάλλει περισσότεροι από ένας. Κάποιος που είδε µια ενδιαφέρουσα web θέση µπορεί απλά µέσα από την επιλογή View Document Source του προγράµµατος ανάγνωσης, να δει τον κώδικα της HTML και µαζί µε αυτόν και την ταυτότητα ή τις ταυτότητες των δηµιουργών. Συνεπώς αν η ετικέτα <!-- this is a comment-- > δηλώνει ότι το κείµενο που εµπεριέχει είναι σχόλιο, τότε µπορούµε να έχουµε : <! > <!-- AUTHOR : your name goes here --> <! > <!-- CREATED : date page created --> <!-- MODIFIED : date page last changed --> <!-- FILE : filename.htm --> <!-- PURPOSE : what this page provides --> <! > Προφανώς, δεν αποτελεί σύµπτωση το γεγονός ότι το µπλοκ αναγνώρισης λειτουργεί µε τον ίδιο τρόπο όπως και οι επικεφαλίδες σε οποιοδήποτε άλλο κώδικα αρχείου. Μια θέση ιστού αποτελεί εφαρµογή λογισµικού και έτσι πρέπει να έχει όλα τα χαρακτηριστικά µιας τέτοιας εφαρµογής. P ( <P> ) Η ετικέτα <P> δηλώνει την αρχή µιας παραγράφου και µπορεί να βρίσκεται οπουδήποτε µέσα σε µια γραµµή ενός αρχείου HTML. Για παράδειγµα : the WWW. <P> This document is... και the WWW. <P> This document is... θα εµφανιστούν µε την ίδια µορφή από το πρόγραµµα ανάγνωσης. Κάποιος θα παρατηρήσει ότι δεν υπάρχει </P>, δηλαδή ότι δεν υπάρχει ετικέτα τέλους (ending tag) που θα καθορίζει το τέλος της παραγράφου. Στην HTML η ετικέτα τέλους ειδικά για την <P> είναι προαιρετική. Ο κανόνας αναφέρει ότι µία παράγραφος τελειώνει µε το επόµενο <P> ή µε την οποιοδήποτε επόµενη ετικέτα. Εκτός από τη χρήση που προαναφέραµε, η ετικέτα αυτή µπορεί να χρησιµοποιηθεί και για να Μεθοδολογία Σχεδίασης 12

13 µορφοποιήσει ένα αρχείο που περιέχει γραφικά ή κουµπιά, να ξεχωρίσει δηλαδή το κείµενο από τα γραφικά και τα γραφικά µεταξύ τους. <Br> ( <Br> ) Η ετικέτα <Br> δηλώνει ένα τερµατισµό γραµµής (line break). <Hr> Η ετικέτα <Hr> τοποθετεί µια οριζόντια γραµµή κατά µήκος της σελίδας. Μπορεί να χρησιµοποιηθεί επίσης και για να χωρίσει µια σελίδα σε διαφορετικές περιοχές, ανάλογα µε το περιεχόµενο της κάθε µιας. Μπορεί να πάρει τα παρακάτω προσδιοριστικά : <HR WIDTH=75% SIZE=3 ALIGN=LEFT> Το µήκος (WIDTH) µπορεί να καθοριστεί µε δυο τρόπους : ο ένας αναφέρεται σε ποσοστό επί τοις εκατό του µήκους της οθόνης και ο άλλος είναι σε εικονοστοιχεία (pixels). Έτσι, καθορίζοντας WIDTH=50% θα πάρουµε µια ευθεία γραµµή µε µήκος ίσο µε το µισό του παράθυρου, ενώ µε WIDTH=200 θα πάρουµε µια ευθεία µε µήκος ίσο µε 200 εικονοστοιχεία. Το µέγεθος (SIZE) ορίζεται σε εικονοστοιχεία και το προκαθορισµένο µήκος ποικίλει ανάλογα µε το πρόγραµµα ανάγνωσης (µπορεί να είναι 2 ή 3 εικονοστοιχεία). Το κεντράρισµα (ALIGN) έχει τη σηµασία της στοίχισης της ευθείας στο κέντρο (CENTER), δεξιά (RIGHT) ή αριστερά (LEFT). Στο παράδειγµα, έχουµε µία οριζόντια γραµµή που έχει το προκαθορισµένο µέγεθος (3), µήκος ίσο µε το 75% της οθόνης και είναι στοιχισµένη στο κέντρο. Βέβαια, θα πρέπει να ληφθεί υπόψη ότι δεν υποστηρίζουν όλα τα προγράµµατα ανάγνωσης τα προσδιοριστικά αυτά και σε αυτές τις περιπτώσεις θα εµφανίσουν µια ευθεία γραµµή στο προκαθορισµένο της µέγεθος και σε µήκος ίσο µε το παράθυρο. <PRE>...</PRE> Το πρόγραµµα ανάγνωσης εµφανίζει ότι περικλείεται µέσα στην ετικέτα <PRE>...</PRE> όπως ακριβώς το έχουµε γράψει. Έτσι, π.χ. το κείµενο που ακολουθεί θα εµφανιστεί στην οθόνη του χρήστη όπως ακριβώς το έχουµε γράψει : <PRE> This text will appear formatted just like this. </PRE> Με την ετικέτα αυτή µπορούµε να ξεπεράσουµε δύο προβλήµατα : να ελέγξουµε την εµφάνιση του κειµένου και να εµποδίσουµε το πρόγραµµα ανάγνωσης να εµφανίσει το κείµενο µε διαφορετική µορφή από αυτή που εµείς επιθυµούµε. Παρόλο που ακούγονται σαν να λέµε το ίδιο πράγµα µε δυο διαφορετικούς τρόπους, στην πραγµατικότητα πρόκειται για δυο διαφορετικές κατηγορίες προβληµάτων. Έτσι, σχετικά µε το πρώτο πρόβληµα µπορούµε να χρησιµοποιήσουµε το <PRE> για να εµφανίσουµε κείµενο όπως εµείς το θέλουµε. Αυτό σηµαίνει ότι µπορεί να θέλουµε το κείµενο να εµφανιστεί στη µέση της γραµµής ή στο τέλος της. Όταν χρησιµοποιούµε έναν επεξεργαστή κειµένου µπορούµε απλά να προσθέσουµε κενά µε τον στηλοθέτη (tab) και να ρυθµίσουµε τη θέση του κειµένου. Τα προγράµµατα ανάγνωσης όµως αγνοούν τους στηλοθέτες ή τους µεταφράζουν µε τρόπους που δεν περιµένουµε. Όσον αφορά στο δεύτερο πρόβληµα υπάρχουν περιπτώσεις στις οποίες τα δεδοµένα δεν θέλουµε εµφανίζονται ως µια ακολουθία, π.χ. µια αναφορά από µια βάση δεδοµένων. Επικεφαλίδες (Headings) Οι επικεφαλίδες επιτελούν τον ίδιο σκοπό πως και σε ένα βιβλίο : καθοδηγούν τον αναγνώστη - εδώ το χρήστη - δείχνοντάς του τη δοµή της σελίδας αλλά και των σελίδων που έπονται. Επίσης δηλώνουν Μεθοδολογία Σχεδίασης 13

14 την ιεραρχία που υπάρχει µεταξύ των διαφορετικών περιοχών ενός κειµένου. Αν συνδυάσει κάποιος τις επικεφαλίδες µε γραφικά κουµπιά, θα καταφέρει να κάνει την πλοήγηση µέσα στις σελίδες του πολύ εύκολη υπόθεση για τους χρήστες. Οι επικεφαλίδες είναι έξι µεγεθών : <H1> Heading level one </H1> <H2> Heading level two </H2> <H3> Heading level three </H3> <H4> Heading level four </H4> <H5> Heading level five </H5> <H6> Heading level six </H6> Το µεγαλύτερο µέγεθος επικεφαλίδας είναι <H1> και το µικρότερο <H6>. Ανάµεσα στις ετικέτες προσθέτουµε το κείµενο που θέλουµε να µορφοποιηθεί µε το αντίστοιχο µέγεθος επικεφαλίδας. Μέγεθος γραµµατοσειράς (<Font size=... >) Τα προγράµµατα ανάγνωσης µας δίνουν τη δυνατότητα να έχουµε µια ποικιλία στο µέγεθος που θα ορίσουµε τη γραµµατοσειρά του κειµένου. Έτσι, µπορούµε να έχουµε µια λέξη ή και έναν χαρακτήρα σε διαφορετικό µέγεθος από τους υπόλοιπους. Το προκαθορισµένο µέγεθος είναι 3 και η κλίµακα κυµαίνεται από 1 ως και 7. Αν δεν αλλάξουµε το µέγεθος τότε εξακολουθεί να ισχύει το τελευταίο που είχαµε ορίσει. Είναι : <Font size=1> This is text at a size of 1. <Font size=2> This is text at a size of 2. <Font size=3> This is text at a size of 3. <Font size=4> This is text at a size of 4. <Font size=5> This is text at a size of 5. <Font size=6> This is text at a size of 6. <Font size=7> This is text at a size of 7. <Font size=3> Η παρακάτω µορφή είναι αυτή µε την οποία θα εµφανιστεί σε πρόγραµµα ανάγνωσης: This is text at a size of 1. This is text at a size of 2. This is text at a size of 3. This is text at a size of 4. This is text at a size of 5. This is text at a size of 6. This is text at a size of 7. Βλέπουµε ότι στο τέλος επανερχόµαστε στο καθορισµένο µέγεθος (ή και σε όποιο επιθυµούσαµε), ώστε να µη συνεχίσουµε µε το 7 µέγεθος. Τύποι χαρακτήρων (Character styles) Η HTML παρέχει αρκετούς τρόπους µορφοποίησης ενός κειµένου. Μπορούµε να γράψουµε σε italics, bold κ.α. Έτσι, έχουµε : <STRONG>...</STRONG> και <B>...</B> που µορφοποιούν το ενδιάµεσο κείµενο ή χαρακτήρα σε bold. <EM>...</EM> και <I>...</I> που µορφοποιούν το κείµενο σε italics. Πρέπει και πάλι να αναφέρουµε ότι δεν εµφανίζουν όλα τα προγράµµατα ανάγνωσης το κείµενο µε την ίδια µορφοποίηση, γι αυτό πρέπει να γνωρίζουµε από πριν τι υποστηρίζει κάποιο πρόγραµµα ανάγνωσης ή ακόµα καλύτερα να ελέγξουµε το αρχείο µας σε περισσότερα από ένα, ώστε να δούµε τις διαφορές που υπάρχουν. Εικόνες (Pictures) Ένα µεγάλο µέρος της δηµοτικότητας του ιστού οφείλεται στο γεγονός ότι επιτρέπει την εµφάνιση γραφικών, αλλά και την επεξεργασία τους µε οποιονδήποτε τρόπο. Μικρές εικόνες µπορούν να Μεθοδολογία Σχεδίασης 14

15 χρησιµοποιηθούν σαν εικονίδια και να αποτελέσουν πολύ εύχρηστα κουµπιά πλοήγησης σε µια εκτενή θέση του ιστού µε αρκετές σελίδες. Όλα τα προγράµµατα ανάγνωσης που υποστηρίζουν γραφικά µπορούν να εµφανίσουν αρχεία εικόνας σε GIF µορφή, ενώ µερικά από αυτά εµφανίζουν και JPEG γραφικά. Έτσι, µπορούµε να έχουµε : α) απλά γραφικά µε <IMG SRC= mypicture.gif ALT= [text] > Εδώ, το mypicture.gif δηλώνει την URL της εικόνας και το text θα εµφανιστεί στην οθόνη των χρηστών που έχουν προγράµµατα ανάγνωσης που δεν υποστηρίζουν γραφικά, β) κείµενο στο οποίο δίπλα να υπάρχει ευθυγραµµισµένο γραφικό (που βέβαια σχετίζεται µε το κείµενο). Η ευθυγράµµιση γίνεται µε το προσδιοριστικό ALIGN. Φυσικά, οι τιµές που δέχεται το ALIGN ποικίλουν µεταξύ των προγραµµάτων ανάγνωσης, γι αυτό κάποιος που σχεδιάζει σελίδες πρέπει να το έχει υπόψη του. Έχουµε : <IMG SRC= picture.gif ALT= [text] ALIGN=position> Το position δηλώνει τη θέση την οποία θα λάβει η εικόνα µέσα στη σελίδα σε σχέση πάντα µε το κείµενο και µπορεί να πάρει τις τιµές : LEFT, RIGHT, TOP, MIDDLE ή BOTTOM. Τα περισσότερα προγράµµατα ανάγνωσης υποστηρίζουν τις τιµές TOP, MIDDLE και BOTTOM, ενώ αν δεν χρησιµοποιηθεί το ALIGN το πρόγραµµα ανάγνωσης θα χρησιµοποιήσει αυτόµατα το BOTTOM, και γ) γραφικό που αποτελεί σύνδεσµο για εικόνα ή οτιδήποτε άλλο, το οποίο µπορεί να είναι ήχος, animation ή video clip. Εδώ έχουµε : <A HREF= picture.gif > <IMG SRC= iconfile.gif ALT= [text] > </A> Το picture.gif είναι η URL της εικόνας, του ήχου του animation ή του video clip που θα εµφανιστεί όταν ο χρήστης κάνει κλικ πάνω στο εικονίδιο που έχει URL την iconfile.gif και το text θα εµφανιστεί σε αυτούς που έχουν προγράµµατα ανάγνωσης που δεν υποστηρίζουν γραφικά. Σύνδεσµοι (Links) Οι σύνδεσµοι αποτελούν ένα από τα πιο βασικά συστατικά της HTML. Αναφέραµε προηγουµένως γενικά πώς λειτουργούν και πώς το πρόγραµµα ανάγνωσης µεταφράζει έναν σύνδεσµο. Οι περιοχές σε µια οθόνη του προγράµµατος ανάγνωσης που περιέχουν συνδέσµους ονοµάζονται θερµές (hot) και το κείµενο που αντιστοιχεί σε ένα σύνδεσµο συνήθως εµφανίζεται υπογραµµισµένο ή µε διαφορετικό, πιο έντονο χρώµα. Όπως είπαµε και προηγούµενα, οι σύνδεσµοι αποτελούνται από δύο µέρη : αυτό που βλέπουν οι χρήστες και κάνοντας κλικ πάνω σε αυτό ενεργοποιούν το σύνδεσµο (µπορεί να είναι κείµενο, εικονίδιο, κείµενο και εικονίδιο) και η URL, η διεύθυνση δηλαδή στην οποία θα κατευθυνθεί το πρόγραµµα ανάγνωσης σαν αποτέλεσµα της ενεργοποίησης του συνδέσµου (όλα αυτά µπορεί να ακούγονται βαρετά, καθώς σε γενικές γραµµές έχουν προαναφερθεί, αλλά είναι απαραίτητα για την κατανόηση αυτών που θα ακολουθήσουν). Έτσι, έχουµε : α) Σύνδεσµο-κείµενο. Πρόκειται για το βασικό σύνδεσµο υπερκειµένου. ηµιουργεί θερµό κείµενο στο οποίο κάνουν κλικ οι χρήστες για να µεταφερθούν σε άλλη διεύθυνση ή να ενεργοποιήσουν άλλες ενέργειες. Η HTML που πρέπει να συµπεριληφθεί είναι : <A HREF= whereto.htm > text that triggers this link </A> Το whereto.htm είναι η URL στην οποία θα κατευθυνθεί ο χρήστης όταν κάνει κλικ στο text that triggers this link β) Σύνδεσµο-εικονίδιο. Στην περίπτωση αυτή ο χρήστης δεν κάνει κλικ πάνω σε κείµενο, αλλά σε εικονίδιο : <A HREF= whereto.htm > <IMG SRC= icon.gif ALT= [icon] > </A> Ο χρήστης θα κατευθυνθεί στην whereto.htm και η icon.gif είναι η URL στην οποία βρίσκεται αποθηκευµένο το εικονίδιο. Το ALT= [icon] είναι ιδιαίτερα χρήσιµο για όσους έχουν - ακόµα - προγράµµατα ανάγνωσης που υποστηρίζουν µόνο κείµενο. Γι αυτούς θα εµφανιστεί µόνο η λέξη icon. γ) Σύνδεσµο-εικονίδιο και κείµενο. Εδώ ο χρήστης µπορεί να κάνει κλικ είτε πάνω στο εικονίδιο είτε στο κείµενο που το συνοδεύει : <A HREF= whereto.htm > <IMG SRC= icon.gif ALT= [icon] > text label </A> Ισχύουν όσα είπαµε στο β) συν του ότι ο χρήστης µπορεί να κάνει κλικ και στο κείµενο text label για να κατευθυνθεί στην whereto.htm. Μεθοδολογία Σχεδίασης 15

16 (Θα πρέπει να σηµειώσουµε ότι όταν λέµε σύνδεσµο-κείµενο δεν εννοούµε κάποια µακροσκελή αναφορά. Πρόκειται απλά για µια δυο λέξεις που δίνουν στο χρήστη να καταλάβει περί τίνος πρόκειται και που, περίπου, θα κατευθυνθεί). δ) Σύνδεσµο µε εξωτερικό αντικείµενο. Στην περίπτωση αυτή ο χρήστης έχει τη δυνατότητα να δει µια εικόνα ή να ακούσει από ένα αρχείο ήχου, τα οποία δεν µπορούν να εµφανιστούν ή να ακουστούν µέσα από το πρόγραµµα ανάγνωσης. Αρκεί να συµπεριλάβουµε τα παρακάτω : <A HREF= filename.ext ><IMG SRC= icon.gif ALT= [icon] >label</a> (format, nnk) Το filename.ext είναι η URL στην οποία βρίσκεται το αρχείο ήχου ή εικόνας, το icon.gif είναι η URL του εικονιδίου στο οποίο θα κάνουν κλικ οι χρήστες και το icon είναι ο σύνδεσµος που θα δουν οι χρήστες που δεν έχουν γραφικό πρόγραµµα ανάγνωσης. Βλέπουµε όµως εδώ και δύο νέα στοιχεία : τα format, nnk. Όσον αφορά στο πρώτο δίνουµε το format του αρχείου και στο δεύτερο το µέγεθος του αρχείου. Αυτά τα τελευταία στοιχεία είναι ιδιαίτερα σηµαντικά για τους χρήστες, καθώς θέλουν να τα γνωρίζουν πριν εµφανίσουν το σχετικό αρχείο - να ξέρουν δηλαδή το είδος του αρχείου (το format δηλαδή) και το µέγεθός του, για να γνωρίζουν πόσο περίπου πρέπει να περιµένουν µέχρι να εµφανιστεί στην οθόνη τους ή αν είναι πολύ µεγάλο να µην το κατεβάσουν. ε) Σύνδεσµος που µας επιτρέπει να στείλουµε . Μπορούµε να στείλουµε µέσα από µια σελίδα του ιστού. Απλώς εισάγοντας κάποιες εντολές HTML ανοίγει µια φόρµα στη οποία γράφουµε το µήνυµα. Έτσι, έχουµε : <A HREF= >send </a><br> Εδώ το είναι η ηλεκτρονική διεύθυνση του ατόµου στο οποίο στέλνουµε το µήνυµα και το send είναι το κείµενο πάνω στο οποίο κάνουµε κλικ, για αν εµφανιστεί η φόρµα που θα µας επιτρέψει να το στείλουµε. Πρέπει να προσέξουµε ιδιαίτερα να µην υπάρχει κενό µεταξύ των MAIL και TO, δηλ να είναι µια λέξη (MAILTO) και επίσης µεταξύ του MAILTO και του:. Μπορούµε να στείλουµε περισσότερα µηνύµατα σε περισσότερα από ένα άτοµα απλά χωρίζοντας τις διευθύνσεις τους µε κόµµα, π.χ. <A HREF= >send </a><br>. Μπλοκ διεύθυνσης Το µπλοκ διεύθυνσης (address block) παρέχει πληροφορίες οι οποίες δίνουν τη δυνατότητα στους χρήστες µιας σελίδας ή µιας ολόκληρης θέσης στον ιστό να έρθουν σε επαφή µε αυτόν ή αυτούς που δηµιούργησαν τη σελίδα, να τους επαινέσουν ή να εκφράσουν τις παρατηρήσεις και τα σχόλιά τους. Μέσα από το µπλοκ διεύθυνσης µπορεί να εφαρµοστεί η επανατροφοδότηση, δηλαδή η προσαρµογή του στις επιταγές και τις ανάγκες των χρηστών που ίσως δεν είχε προβλέψει. Συνήθως χρησιµοποιείται µόνο στις home pages και όχι σε όλες τις σελίδες. Τις περισσότερες φορές το άτοµο που εµφανίζεται στην ετικέτα <ADDRESS> δεν είναι αυτό που δηµιούργησε τον κόµβο του ιστού, αλλά αυτός που το προωθεί ή ο συντηρητής του (ο web master). Έχουµε : <ADDRESS> your name<br> your organization<br> street address<br> city, state of province, postal code<br> phone number(s)<br> <A HREF= </ADDRESS> Τα στοιχεία αφορούν το όνοµα, τη διεύθυνση, τον αριθµό τηλεφώνου και ίσως και την επωνυµία της εταιρίας. Η τελευταία γραµµή δίνει ένα παράδειγµα της αλληλεπίδρασης µέσα από τον ιστό. Οι χρήστες όχι µόνο µπορούν να δουν τα στοιχεία που προαναφέραµε, αλλά να στείλουν και στο άτοµα που αναφέρεται - αν βέβαια το πρόγραµµα ανάγνωσης που χρησιµοποιούν υποστηρίζει φόρµες για . Κάνοντας λοιπόν κλικ στη µπορούν να επικοινωνήσουν µαζί του. Ένα πρόβληµα που συνήθως προκύπτει είναι να ξεχάσουµε να τοποθετήσουµε στο τέλος κάθε γραµµής ένα <BR> και σε αυτή την περίπτωση όλα τα στοιχεία εµφανίζονται σε µια ενιαία σειρά. Προσοχή λοιπόν. Μεθοδολογία Σχεδίασης 16

17 Λίστες (Lists) Η HTML δίνει τη δυνατότητα δηµιουργίας λίστας, έτσι ώστε να είναι δυνατή η πιο άρτια δόµηση ενός κειµένου, ειδικά όταν έχουµε να κάνουµε µε εκτενές κείµενο. Έτσι, έχουµε : α) Μη-αριθµηµένη λίστα (Unordered list ή bullet list). Αυτή η λίστα εµφανίζει τα στοιχεία της µε βούλες (bullets). Είναι η ιδανική αναπαράσταση στοιχείων που δεν χαρακτηρίζονται από κάποια ιεραρχία ή ακολουθία. Είναι : <UL> <LI>first item</li> <LI>second item</li> <LI>third item</li> </UL> Τα στοιχεία της λίστας, που εµφανίζονται µέσω των ετικετών <LI>, τοποθετούνται ανάµεσα στην αρχική ετικέτα <UL> και την τελική </UL>. β) Μη-αριθµηµένη λίστα δυο επιπέδων (Bullet list, two level). Έχουµε τη δυνατότητα να δηµιουργήσουµε λίστα δυο επιπέδων, αν τα δεδοµένα µας το απαιτούν, απλά µε το να φωλιάσουµε τη µία λίστα µέσα στη άλλη : <UL> <LI>first item </LI> <UL> <LI>first sub-item </LI> <LI>second sub-item </LI> <LI>third sub-item </LI> </UL> <LI>second item</li> <UL> <LI>first sub-item </LI> <LI>second sub-item </LI> <LI>third sub-item </LI> </UL> <LI>third item </LI> <UL> <LI>first sub-item </LI> <LI>second sub-item </LI> <LI>third sub-item </LI> </UL> </UL> Βλέπουµε ότι τα στοιχεία που προσδιορίζουν αυτό το είδος λίστας είναι το ίδια µε αυτά του προηγούµενου. Αυτές οι λίστες είναι πολύ καλές αν έχουν δεδοµένα των οποίων η δοµή είναι πολύπλοκη, αλλά θέλουν µεγάλη προσοχή για να µην ξεχάσουµε κάποια ετικέτα (θα µας εµφανίζονται άλλα αντί άλλων). γ) Μη-αριθµηµένη λίστα µε πολύπλοκα στοιχεία (Bullet list, complex items). Συνήθως αυτό το είδος λίστας χρησιµοποιείται όταν θέλουµε να δώσουµε ιδιαίτερη έµφαση σε κάποια από τα στοιχεία. Πρόκειται για καλή οργάνωση όταν έχουµε στοιχεία που είναι σύνθετα για µια απλή µη-αριθµηµένη λίστα, αλλά πολύ απλά για µια λίστα ορισµού (θα δούµε παρακάτω τι είναι). Έτσι, έχουµε : <UL> <LI><STRONG>short phrase.</strong>more details on that item.</li> <LI><STRONG>short phrase.</strong>more details on that item.</li> <LI><STRONG>short phrase.</strong>more details on that item.</li> <LI><STRONG>short phrase.</strong>more details on that item.</li> </UL> Εδώ το short phrase είναι η φράση που θέλουµε να τονίσουµε και το more details on that item είναι το κείµενο που εµφανίζεται κανονικά και που περιλαµβάνει τις περισσότερες πληροφορίες. Αν δε θέλουµε η έµφαση που θα δώσουµε να είναι έντονη, µπορούµε αντί για την ετικέτα <STRONG> να χρησιµοποιήσουµε την <I>, να εµφανίσουµε δηλαδή τη φράση που θέλουµε να τονίσουµε σε italics. δ) Αριθµηµένη λίστα (Numbered list ή ordered list). Μεθοδολογία Σχεδίασης 17

18 Με τη λίστα αυτή δηµιουργούµε κατευθείαν µια λίστα από αριθµηµένα στοιχεία. Είναι ιδιαίτερα χρήσιµη όταν έχουµε στοιχεία που έχουν λογική ακολουθία ή είναι αριθµηµένα. <OL> <LI>first item</li> <LI>second item</li> <LI>third item</li> <LI>fourth item</li> </OL> Τα στοιχεία της λίστας εµφανίζονται από τις ετικέτες <LI> και τοποθετούνται µεταξύ των <OL> και </OL>. Το πρόβληµα που προκύπτει κάποιες φορές έχει να κάνει µε το ότι οι αριθµοί δεν εµφανίζονται σύµφωνα µε τη λογική τους ακολουθία (π.χ. το πρώτο στοιχείο δεν εµφανίζεται µε τον αριθµό 1). Στην περίπτωση αυτή πρέπει να ελέγξουµε αν υπάρχει ή αν έχουµε ξεχάσει την ετικέτα </OL>. ε) Αριθµηµένη λίστα, δύο επιπέδων (Numbered list, two level). Όπως και στη µη-αριθµηµένη λίστα, έτσι και εδώ µπορούµε να δηµιουργήσουµε λίστα που να δοµείται σε δύο επίπεδα. Είναι : <OL> <LI>first item</li> <OL> <LI>first sub-item</li> <LI>second sub-item</li> <LI>third sub-item</li> </OL> <LI>second item</li> <OL> <LI>first sub-item</li> <LI>second sub-item</li> <LI>third sub-item</li> </OL> <LI>third item</li> <OL> <LI>first sub-item</li> <LI>second sub-item</li> <LI>third sub-item</li> </OL> </OL> Εδώ πρέπει να αναφέρουµε ότι µπορεί να γίνει συνδυασµός αυτών των ειδών λίστας. Το µόνο που χρειάζεται είναι φαντασία και φυσικά προσοχή να µην ξεχάσουµε κάποια ετικέτα ή να µην βάλουµε κάποια σε µη-κατάλληλη θέση. Μπορούµε δηλαδή να έχουµε : <OL> <LI>first numbered item</li> <LI>second numbered item</li> <UL> <LI>bullet item one</li> <LI>bullet item two</li> </UL> <LI>third numbered item</li> </OL> στ) Λίστα ορισµού (Definition list). Χρησιµοποιούµε τη λίστα ορισµού όταν θέλουµε να ορίσουµε την έννοια µιας σειράς δεδοµένων. Είναι ιδιαίτερα χρήσιµη όταν έχουµε να κάνουµε µε ορισµό λεξιλογίου (γλωσσάριο), σύντοµα βιογραφικά ατόµων και ίσως συνδέσµους προς άλλους κόµβους του ιστού, τα οποία θα ακολουθούνται από µια µικρή περιγραφή τους. Μπορούµε ακόµα να θέσουµε τον ορισµό σαν µια µικρή επικεφαλίδα µιας σύντοµης, επεξηγηµατικής παραγράφου κάποιας έννοιας. Είναι : <DL> <DT>first item</dt> <DD>its definition</dd> <DT>second item</dt> <DD>its definition</dd> <DT>third item</dt> Μεθοδολογία Σχεδίασης 18

19 <DD>its definition</dd> </DL> Η ετικέτα <DT> δηλώνει τον ορισµό του κάθε όρου και η <DD> την εξήγηση του όρου. Μενού. Με τα µενού οι χρήστες έχουν τη δυνατότητα επιλογής κάποιων αντικειµένων από µια δεδοµένη ακολουθία. Με τα µενού οι δηµιουργοί των σελίδων προσπαθούν, κατά κάποιο τρόπο, να καθοδηγήσουν τους χρήστες τους σε πληροφορίες που δίνονται µέσα από συγκεκριµένα µονοπάτια. Το βασικό συστατικό στοιχείο ενός µενού είναι ο σύνδεσµος, είτε πρόκειται για κείµενο που ενεργοποιεί το σύνδεσµο, είτε για εικονίδιο, είτε και για τα δύο. α) Μενού κάθετου κειµένου (Vertical text menu). Το µενού κάθετου κειµένου δίνει στους χρήστες µια σειρά από λέξεις ή φράσεις που αναπτύσσονται κάθετα και από τις οποίες πρέπει αυτός να επιλέξει. Ο χρήστης κάνοντας κλικ πάνω σε ένα αντικείµενο µπορεί να οδηγηθεί σε µια διαφορετική σελίδα ή σε µια άλλη ενέργεια (π.χ. να δει µια εικόνα ή να ακούσει ένα αρχείο ήχου). Το µενού αυτό έχει τη µορφή : <P>Phrase or sentence introducing to the menu :</P> <UL> <LI><A HREF= option1.htm >first option</a></li> <LI><A HREF= option2.htm >second option</a></li> <LI><A HREF= option3.htm >third option</a></li> <LI><A HREF= option4.htm >fourth option</a></li> <LI><A HREF= option5.htm >fifth option</a></li> </UL> Βλέπουµε λοιπόν ότι δηµιουργούµε το µενού κάθετου κειµένου µε τη χρήση ενός συνδέσµου που ενεργοποιείται από κείµενο και είναι οργανωµένος ως στοιχείο µια µη-αριθµηµένης λίστας. Το Phrase or sentence introducing to the menu : που βρίσκεται ανάµεσα στις ετικέτες <P> και </P> είναι η εξήγηση του τι περιλαµβάνει το µενού και ουσιαστικά µας εισάγει στα αντικείµενά του. Το option1.htm δηλώνει την URL της σελίδας ή της ενέργειας στην οποία θα κατευθυνθεί ο χρήστης αν επιλέξει την πρώτη φράση µέσα από το κείµενο first option, το ίδιο φυσικά ισχύει και για τις υπόλοιπες επιλογές. Αν δε θέλουµε να εµφανιστούν οι βούλες, σαν αποτέλεσµα της µη-αριθµηµένης λίστας, µπορούµε απλώς να γράψουµε : <P>Phrase or sentence introducing to the menu :</P> <UL> <A HREF= option1.htm >first option</a><br> <A HREF= option2.htm >second option</a><br> <A HREF= option3.htm >third option</a><br> <A HREF= option4.htm >fourth option</a><br> <A HREF= option5.htm >fifth option</a><br> </UL> δηλαδή να παραλείψουµε τις ετικέτες <LI> και απλώς να προσθέσουµε τις <BR>, έτσι ώστε να µην εµφανίζονται όλες οι επιλογές στοιβαγµένες σε µια σειρά. β) Μενού οριζόντιου κειµένου. Το µενού αυτό δίνει στους χρήστες µια οριζόντια λίστα επιλογών. Είναι το ίδιο µε το προηγούµενο µε τη µόνη διαφορά ότι οι επιλογές είναι οργανωµένες σε οριζόντια διάταξη. Έτσι, έχουµε : <P>Phrase or sentence introducing to the menu :</P> [<A HREF= option1.htm >first option</a>] [<A HREF= option2.htm >second option</a>] [<A HREF= option3.htm >third option</a>] [<A HREF= option4.htm >fourth option</a>] [<A HREF= option5.htm >fifth option</a>] Τα στοιχεία που αποτελούν το µενού είναι τα ίδια µε τα προηγούµενα. Εδώ όµως δεν έχουµε <BR> στο τέλος κάθε επιλογής, έτσι ώστε όλες να εµφανίζονται οριζόντια σε µια γραµµή. Για να ξεχωρίζουν οι επιλογές µεταξύ τους τοποθετούµε το χαρακτήρα [ ή µπορούµε να βάλουµε και τον \. γ) Μενού εικονιδίων (Icon menu). Μεθοδολογία Σχεδίασης 19

20 Στην περίπτωση αυτή έχουµε ένα µενού εικονιδίων, δηλαδή η επιλογή µας ενεργοποιείται κάνοντας κλικ πάνω σε ένα εικονίδιο. Το µενού αυτό δίνει µια γραφική προσέγγιση επιλογής ενεργειών και αντικειµένων. Έχουµε λοιπόν : <P>Phrase or sentence introducing to the menu :</P> <A HREF= option1.htm ><IMG SRC= icon1.gif ALT= [icon1] ></A> <A HREF= option2.htm > <IMG SRC= icon2.gif ALT= [icon2] ></A> <A HREF= option3.htm > <IMG SRC= icon3.gif ALT= [icon3] ></A> <A HREF= option4.htm > <IMG SRC= icon4.gif ALT= [icon4] ></A> <A HREF= option5.htm > <IMG SRC= icon5.gif ALT= [icon5] ></A> Στην περίπτωση αυτή έχουµε και πάλι την εισαγωγική πρόταση προς το µενού Phrase or sentence introducing to the menu :. Το option1.htm δηλώνει την URL στην οποία θα κατευθυνθεί ο χρηστής κάνοντας κλικ στο πρώτο εικονίδιο, το icon1.gif είναι η URL στην οποία βρίσκεται το εικονίδιο και icon1 δηλώνει το τι θα δουν οι χρήστες που χρησιµοποιούν µη-γραφικά προγράµµατα ανάγνωσης. δ) Μενού εικονιδίου και κειµένου (Text-and-icon menu). Το µενού εικονιδίου και κειµένου συνδυάζει τρία στοιχεία : - µια µη-αριθµηµένη λίστα που δηµιουργεί µια κάθετη λίστα επιλογών - εικονίδια-επιλογές που µπορούν να ενεργοποιηθούν και να οδηγήσουν σε κάποια άλλη σελίδα ή ενέργεια και - µια περιγραφή, σε κείµενο, κάθε επιλογής η οποία µπορεί επίσης να ενεργοποιηθεί. <P>Phrase or sentence introducing to the menu :</P> <UL> <LI> <A HREF= option1.htm > <IMG SRC= icon1.gif ALT= [icon1] >first option</a> <LI> <A HREF= option2.htm > <IMG SRC= icon2.gif ALT= [icon2] >second option</a> <LI> <A HREF= option3.htm > <IMG SRC= icon3.gif ALT= [icon3] >third option</a> <LI> <A HREF= option4.htm > <IMG SRC= icon4.gif ALT= [icon4] >fourth option</a> <LI> <A HREF= option5.htm > <IMG SRC= icon5.gif ALT= [icon5] >fifth option</a> </UL> Όπως µπορεί κάποιος να διακρίνει η περίπτωση αυτή είναι ένας συνδυασµός όλων των προηγούµενων. Έτσι, έχουµε την εισαγωγική πρόταση Phrase or sentence introducing to the menu :, την νέα URL option1.htm στην οποία θα κατευθυνθεί ο χρήστης κάνοντας κλικ είτε στη φράση first option είτε στο εικονίδιο που βρίσκεται στην URL icon1.gif και το icon1 αντιπροσωπεύει την πρώτη επιλογή στους µηγραφικά προγράµµατα ανάγνωσης. Αν δε θέλουµε να εµφανιστούν βούλες µπορούµε απλά να παραλείψουµε τις ετικέτες <LI> και να προσθέσουµε τις <BR> στο τέλος κάθε επιλογής, δηλαδή : <P>Phrase or sentence introducing to the menu :</P> <UL> <A HREF= option1.htm > <IMG SRC= icon1.gif ALT= [icon1] >first option</a><br> <A HREF= option2.htm > <IMG SRC= icon2.gif ALT= [icon2] >second option</a><br> </UL> 2.4. Πίνακες (Tables) Η βασική δοµή ενός πίνακα είναι τρεις στήλες (column) και δύο γραµµές (row). Από τη στιγµή βέβαια που κάποιος έχει κατανοήσει τη δοµή αυτή είναι πολύ εύκολη οποιαδήποτε διαφοροποίηση επιθυµεί να πραγµατοποιήσει, προσθέτοντας ή αφαιρώντας στήλες ή γραµµές. Η HTML που απαιτείται µπορεί να φανεί στην αρχή λίγο πολύπλοκη, αλλά στην πραγµατικότητα δεν είναι τόσο δύσκολο όσο φαίνεται : Μεθοδολογία Σχεδίασης 20

21 <TABLE BORDER> <CAPTION ALIGN=TOP>Caption for the table</caption> <TR> <!----- starts a row --> <TD>Content of Cell 1A</TD> <TD>Content of Cell 1B</TD> <TD>Content of Cell 1C</TD> </TR> <!----- ends a row --> <TR> <TD>Content of Cell 2A</TD> <TD>Content of Cell 2B</TD> <TD>Content of Cell 2C</TD> </TR> </TABLE> <! ends the table --> (σηµείωση : ό,τι βρίσκεται ανάµεσα σε <! ---this is a comment --> αποτελεί σχόλιο και δεν µεταφράζεται από το πρόγραµµα ανάγνωσης). UΒασικά δοµικά στοιχεία ενός πίνακα <TABLE> Ένας πίνακας ορίζεται από οτιδήποτε υπάρχει ανάµεσα στις ετικέτες <TABLE> και </TABLE>. Μέσα στην ετικέτα <TABLE> µπορούµε να τοποθετήσουµε προσδιοριστικά που ελέγχουν την εµφάνιση όλου του πίνακα, όπως π.χ. να προσθέσουµε περίγραµµα γύρω από τον πίνακα : <TABLE BORDER>. <CAPTION> Με την ετικέτα <CAPTION>, που είναι προαιρετικό και µπορεί να παραληφθεί, προσθέτουµε τίτλο στον πίνακα, στην περίπτωσή µας ο τίτλος θα είναι : Caption for the table, ότι βρίσκεται δηλαδή µεταξύ των <CAPTION> και <CAPTION>. Στην αρχική ετικέτα µπορούµε να συµπεριλάβουµε και το προσδιοριστικό ALIGN που λαµβάνει τις τιµές top και bottom και ορίζει ανάλογα τη θέση στην οποία θα τοποθετηθεί ο τίτλος του πίνακα. <TR> Κάθε γραµµή του πίνακα εµφανίζεται ανάµεσα στις ετικέτες <TR> και </TR>. <TD> Το περιεχόµενο κάθε κελιού µιας γραµµής του πίνακα περικλείεται από τις ετικέτες <TD> και </TD>. Για παράδειγµα, η πρώτη σειρά του πίνακα περιλαµβάνει τα παρακάτω τρία κελιά : <TR> <!----- starts a row --> <TD>Content of Cell 1A</TD> <TD>Content of Cell 1B</TD> <TD>Content of Cell 1C</TD> </TR> <!----- ends a row --> Μπορεί να παρατηρήσει κανείς ότι οι ετικέτες <TD> και </TD> εµφανίζονται µόνο ανάµεσα στα <TR> και </TR>. UΕπιπλέον στοιχεία µορφοποίησης πίνακα Μπορούν να χρησιµοποιηθούν µε όλες ή ορισµένες από τις προηγούµενες ετικέτες. Συγκεκριµένα : WIDTH = ακέραιος ποσοστό% - HEIGHT = ακέραιος ποσοστό%, καθορίζουν τις διαστάσεις,το πλάτος και το ύψος σε εικονοστοιχεία (pixels) ή σε κάποιο ποσοστό σε σχέση µε την µέγιστη διαθέσιµη διάσταση, της γραµµής, της στήλης, του κελιού ή και ολόκληρου του πίνακα, ανάλογα µε την ετικέτα στην οποία περιέχονται. BORDER = ακέραιος, καθορίζει το µέγεθος του περιθωρίου γύρω από τον πίνακα και γύρω από κάθε κελί.. Το BORDER δέχεται σαν όρισµα εικονοστοιχεία (pixels). Συντάσσεται µε την ετικέτα < TABLE >. CELLSPACING = ακέραιος, εκφράζει σε εικονοστοιχεία το διάστηµα που χωρίζει τα κελιά µεταξύ τους. CELLPADDING = ακέραιος, εκφράζει σε εικονοστοιχεία τον κενό περιβάλλοντα χώρο µέσα σε ένα κελί. Συντάσσεται µε την ετικέτα < TABLE >. COLSPAN = N, επεκτείνει το πλάτος ενός κελιού κατά N κελιά. Μεθοδολογία Σχεδίασης 21

22 ROWSPAN = N, επεκτείνει το ύψος ενός κελιού κατά Ν γραµµές. Χρησιµοποιούµε αυτά τα δύο προσδιοριστικά για να δηµιουργήσουµε κελιά που έχουν πολλαπλάσιο ύψος ή πλάτος από τα υπόλοιπα, µέσα στις ετικέτες < TH > και < TD >. NOWRAP, απενεργοποιεί την αυτόµατη αναδίπλωση των λέξεων σε ένα κελί αν το κείµενο υπερβαίνει τις διαστάσεις του. Συντάσσεται µε τις ετικέτες < TH > και < TD >. ΠΑΡΑ ΕΙΓΜΑ <TABLE WIDTH="100%" BORDER=1 CELLPADDING=5> <CAPTION ALIGN=TOP> Ηµερολόγιο Πράξεων </CAPTION> <TR> <TH BGCOLOR="#D0D0D0" WIDTH="60%" ALIGN=LEFT>ΛΟΓΑΡΙΑΣΜΟΣ</TH> <TH BGCOLOR="#A0A0A0" WIDTH="20%" ALIGN=CENTER> ΧΡΕΩΣΗ </TH> <TH BGCOLOR="#A0A0A0" WIDTH="20%" ALIGN=CENTER> ΠΙΣΤΩΣΗ </TH> </TR> <TR> <TD>1.Ταµείο</TD> <TD ALIGN=CENTER>400</TD> <TD ALIGN=CENTER> - </TD> </TR> <TR> <TD>1.Κατατεθηµένο Κεφάλαιο</TD> <TD ALIGN=CENTER> - </TD> <TD ALIGN=CENTER>400</TD> </TR> <TR> <TD>2.Ταµείο</TD> <TD ALIGN=CENTER>100</TD> <TD ALIGN=CENTER> - </TD> </TR> <TR> <TD>2. άνεια Πληρωτέα</TD> <TD ALIGN=CENTER> - </TD> <TD ALIGN=CENTER>100</TD> </TR> <TR> <TD>3.Απόθεµα</TD> <TD ALIGN=CENTER>150</TD> <TD ALIGN=CENTER> - </TD> </TR> <TR> <TD>3.Ταµείο</TD> <TD ALIGN=CENTER> - </TD> <TD ALIGN=CENTER>150</TD> </TR> <TR BGCOLOR="#D0D0D0"> <TD>ΣΥΝΟΛΟ ΕΝΕΡΓΗΤΙΚΟΥ</TD> <TD ALIGN=CENTER COLSPAN=2>650</TD> </TR> <TR BGCOLOR="#D0D0D0"> <TD>ΣΥΝΟΛΟ ΠΑΘΗΤΙΚΟΥ</TD> <TD ALIGN=CENTER COLSPAN=2>650</TD> </TR> </TABLE> 2.5. Χάρτες εικόνας (Image-maps) Έστω ότι κάποιος θέλει να συµπεριλάβει στη σελίδα ενός οργανισµού µια φωτογραφία µε όλα τα στελέχη, έτσι ώστε κάνοντας κλικ πάνω σε κάθε µεµονωµένη φωτογραφία να εµφανίζεται το βιογραφικό του καθενός ή άλλα χρήσιµα στοιχεία. Κάποιος άλλος επίσης µπορεί να θέλει να προσθέσει το χάρτη της Ελλάδας - ίσως σε έναν κόµβο ιστού του ΕΟΤ που παρουσιάζει τη χώρα µας - και κάνοντας ο χρήστης κλικ πάνω σε κάθε περιοχή ή γενικά σε κάθε νοµό να λαµβάνει πληροφορίες της Μεθοδολογία Σχεδίασης 22

23 περιοχής που επέλεξε. Το εργαλείο που επιτρέπει αυτού του είδους τις εφαρµογές ονοµάζονται χάρτες εικόνας ή γραφικοί χάρτες. Οι χάρτες εικόνας εµφανίζονται στον ιστό όπως όλες οι εικόνες µε τη διαφορά ότι περιέχουν θερµά σηµεία. Τα θερµά σηµεία λειτουργούν σα σύνδεσµοι. Όταν ένας χρήστης κάνει κλικ πάνω σε ένα θερµό σηµείο του χάρτη εικόνας τότε το πρόγραµµα ανάγνωσης στέλνει στον εξυπηρετητή τις συντεταγµένες του σηµείου αυτού µαζί µε το πρόγραµµα του χάρτη εικόνας. Στη συνέχεια, ο εξυπηρετητής ξεκινά την εκτέλεση του προγράµµατος του χάρτη εικόνας και αυτό συµβουλεύεται το αρχείο του χάρτη εικόνας για να βρει που θα κατευθυνθεί. Τελικά, το πρόγραµµα του χάρτη εικόνας δίνει στον εξυπηρετητή τη νέα URL στην οποία θα κατευθυνθεί και αυτός εµφανίζει τη σελίδα ή οτιδήποτε άλλο υπάρχει στη νέα διεύθυνση (η URL που δίνει το πρόγραµµα του χάρτη εικόνας στον εξυπηρετητή είναι αυτή που αντιστοιχεί στο θερµό σηµείο πάνω στο οποίο έκανε κλικ ο χρήστης και το οποίο υπάρχει αποθηκευµένο στο αρχείο του εικονοχάρτη). Οι εικονοχάρτες που αναφέραµε παραπάνω είναι προσανατολισµένα στον εξυπηρετητή (server-side). Είναι αυτοί που χρησιµοποιούνται περισσότερο στην πράξη και προϋποθέτουν την επικοινωνία µε έναν εξυπηρετητή ιστού για την επεξεργασία των συντεταγµένων και την κλήση των URL. Οι χάρτες εικόνας που είναι προσανατολισµένοι στον πελάτη (client-side image-maps) αφορούν νεότερες εξελίξεις της HTML. Εδώ η επεξεργασία γίνεται εσωτερικά από τον πελάτη, δηλαδή το πρόγραµµα ανάγνωσης, και όχι από το εξυπηρετητή πράγµα που επιτρέπει τη χρήση τους σε τοπικά HTML αρχεία ή σε αρχεία προσβάσιµα µέσω άλλων πρωτοκόλλων. Η διαφορά µεταξύ των δύο, όσον αφορά στη σύνταξη της HTML, είναι ότι στην πρώτη περίπτωση χρησιµοποιούµε την ετικέτα ISMAP, ενώ στη δεύτερη την USEMAP. Η όλη διαδικασία δηµιουργίας ενός χάρτη εικόνας είναι η ακόλουθη : 1) δηµιουργία της εικόνας 2) δηµιουργία του αρχείου που καθορίζει τα θερµά σηµεία πάνω στην εικόνα (το αρχείο αυτό ονοµάζεται map file) 3) καθορισµός του που βρίσκονται η εικόνα, το πρόγραµµα και το αρχείο του χάρτη εικόνας έτσι ώστε να επεξεργαστούν και 4) εγκατάσταση αυτών στον εξυπηρετητή. Ας δούµε όµως τα πράγµατα µε τη σειρά : 1) ηµιουργία της εικόνας Η δηµιουργία ή η επιλογή της εικόνας αποτελεί τµήµα του σχεδιασµού των γραφικών για την ανάπτυξη µιας θέσης ιστού. Καταρχήν, να πούµε ότι η εικόνα πρέπει να είναι σε GIF µορφή. Την εικόνα µπορείτε να τη σχεδιάσετε µόνοι σας µε ένα από τα πολλά και ιδιαίτερα εύχρηστα προγράµµατα όπως είναι το Photoshop, το Paintshop ή ακόµα και το CorelDraw. Ένας εύκολος τρόπος βέβαια είναι να την κατεβάσετε από το Internet, αν φυσικά βρείτε κάτι που σας ενδιαφέρει και έχει σχέση µε τη σελίδα που θέλετε να σχεδιάσετε ή να τη σαρώσετε. 2) ηµιουργία του αρχείου του εικονοχάρτη Από τη στιγµή που έχετε δηµιουργήσει την εικόνα πρέπει να καταγράψετε κατά κάποιο τρόπο τις διαφορετικές της περιοχές που σχετίζονται µε κάποιες URL. Αυτό θα γίνει µε την περιγραφή κάθε περιοχής από τις συντεταγµένες της και τη σύνδεση των συντεταγµένων αυτών µε την αντίστοιχη URL. Οι συντεταγµένες όλων των θερµών σηµείων της εικόνας µε τις αντίστοιχες URLs αποθηκεύονται σε ένα αρχείο που ονοµάζεται αρχείο εικονοχάρτη (map file). Μια περιοχή που χαρακτηρίζεται σαν θερµή µπορεί να είναι πολύγωνο, κύκλος, ορθογώνιο, σηµείο ή κύκλος. Επίσης, κάθε περιοχή της εικόνας που δεν αποτελεί θερµή συνδέεται µε κάποια προκαθορισµένη (default) URL. Τα αρχεία των εικονοχαρτών διακρίνονται σε NCSA και σε CERN. Ένα NCSA αρχείο είναι το ακόλουθο : default point 74, 57 rect 17, 18 52, 73 poly 12, , , 90 77, , 86 12, 119 circ 99, , 60 Μεθοδολογία Σχεδίασης 23

24 Η αντιστοιχία µεταξύ σχηµάτων και ονοµασίας είναι : point είναι το σηµείο, rect είναι το ορθογώνιο, poly είναι το πολύγωνο και circ είναι ο κύκλος. Η file2.htm, file3.htm και file4.htm είναι η νέα URL στην οποία θα κατευθυνθεί ο χρήστης κάνοντας κλικ σε ένα από τα τέσσερα σχήµατα. Οι συντεταγµένες για κάθε σχήµα είναι : για το σηµείο x, y, για το πολύγωνο x1, y1 x2, y2 x3, y3..., για το ορθογώνιο αριστερά, πάνω κορυφή δεξιά, κάτω µέρος και για τον κύκλο x, y ακτίνα. Η default ορίζει µια URL που καλείται σε περίπτωση που ο χρήστης κάνει κλικ σε µια περιοχή έξω από αυτές που έχουν οριστεί και περιγράφονται στο αρχείο του χάρτη εικόνας. Με την point 74, 57 ορίζουµε κάποιο σηµείο.. Ένα CERN αρχείο είναι το ακόλουθο : default rect (17, 18) (52, 73) poly (12, 119) (134, 119) (91, 90) (77, 105) (39, 86) (12, 119) circ (99, 21) 138 Εκείνο όµως που πρέπει να αναφέρουµε είναι ότι έχουν αναπτυχθεί πολύ χρήσιµα εργαλεία που επιτρέπουν την δηµιουργία του αρχείου χάρτη εικόνας µε ένα εξαιρετικά απλουστευµένο τρόπο. Τέτοια εργαλεία (map-making εργαλεία) είναι το Mapedit, το WebMap κ.α. 3) Καθορισµός της θέσης των αρχείων Το αρχείο χάρτη εικόνας που είναι προσανατολισµένο στον εξυπηρετητή αναφέρεται στη HTML µε : <A HREF= > <IMG SRC= image.gif ISMAP> </A> Το τµήµα δηλώνει ότι το πρόγραµµα του χάρτη εικόνας imagemap βρίσκεται στον κατάλογο cgi-bin κάτω από τον κατάλογο ρίζα (root directory) του εξυπηρετητή. Η δήλωση dir/subdir/filename.map είναι το µονοπάτι για το αρχείο του χάρτη εικόνας για αυτό το συγκεκριµένο χάρτη εικόνας, ενώ το image.gif είναι το αρχείο που περιέχει το αρχείο εικόνας GIF. Τo ISMAP δηλώνει στο πρόγραµµα ανάγνωσης ότι πρόκειται για αρχείο εικονοχάρτη προσανατολισµένο στον εξυπηρετητή. Η διαφορά µεταξύ των δύο αρχείων χάρτη εικόνας (δηλαδή του εξυπηρετητή και του πελάτη) δεν είναι µόνο το ότι στην πρώτη περίπτωση χρησιµοποιούµε την ετικέτα ISMAP και στη δεύτερη την USEMAP, όπως αναφέραµε προηγουµένως. Επιπλέον, θα πρέπει να ορίσουµε κάποιες ετικέτες µέσα στο αρχείο της HTML, έτσι ώστε το πρόγραµµα ανάγνωσης να µπορέσει να µεταφράσει το αρχείο του χάρτη εικόνας που είναι προσανατολισµένο στον πελάτη. Έτσι όσον αφορά το αρχείο του πελάτη πρέπει να έχουµε : <MAP NAME= filename > <AREA SHAPE= shape COORDS= x,y,z,w HREF= whatever.html > </MAP> <IMG SRC= path/image.gif USEMAP= filename > Εδώ µε την ετικέτα <MAP> δηλώνουµε στο πρόγραµµα ανάγνωσης της περιοχές της εικόνας που αποτελούν σύνδεσµο. Έτσι, στο προσδιοριστικό NAME δίνουµε το όνοµα του αρχείου χάρτη εικόνας που θα επεξεργαστεί το πρόγραµµα ανάγνωσης, στην δική µας περίπτωση είναι το filename (προσοχή : δεν χρησιµοποιούµε την κατάληξη του αρχείου, πρέπει όµως να είναι µορφής GIF ή JPEG). Μια θερµή περιοχή της εικόνας ορίζεται µέσα στην ετικέτα <MAP> µε τη χρήση της ετικέτας <AREA> που λαµβάνει τα προσδιοριστικά : SHAPE, ορίζεται το σχήµα της θερµής περιοχής. Προς το παρόν η µόνη τιµή που µπορεί να λάβει είναι αυτή του ορθογώνιου, δηλαδή SHAPE= rect. COORDS, ορίζονται οι συντεταγµένες του σχήµατος, χρησιµοποιώντας ως µονάδα µέτρησης το εικονοστοιχείο. Εφόσον το µόνο σχήµα που επιτρέπεται ως τώρα είναι το ορθογώνιο ορίζουµε τις συντεταγµένες ως εξής : αριστερά, άνω, δεξιά, κάτω. Μεθοδολογία Σχεδίασης 24

25 HREF, λαµβάνει ως τιµή την URL που θα κληθεί όταν ο χρήστης κάνει κλικ στην δεδοµένη θερµή περιοχή. Εδώ µπορούµε να δώσουµε όλο το µονοπάτι προς το αρχείο που θα κληθεί. Το path/image.gif δηλώνει το µονοπάτι προς το αρχείο εικόνας που θα χρησιµοποιηθεί και το filename δηλώνει το όνοµα του αρχείου του χάρτη εικόνας (εδώ µπορούµε να έχουµε ολόκληρα τα µονοπάτια προς αυτά τα αρχεία) 4) Εγκατάσταση των αρχείων Το τελικό στάδιο είναι η εγκατάσταση όλων των αρχείων στον εξυπηρετητή. Γενικά, το GIF αρχείο και το HTML αρχείο αποθηκεύονται στον ίδιο υποκατάλογο που είναι και τα υπόλοιπα αρχεία για τις άλλες σελίδες. Το αρχείο του χάρτη µπορεί να πάει στον ίδιο υποκατάλογο ή σε έναν command υποκατάλογο, ανάλογα µε τις συνθήκες εγκατάστασης του εξυπηρετητή Φόρµες (Forms) Σε ένα έγγραφο HTML µπορούµε να εισάγουµε φόρµες (forms) εισαγωγής στοιχείων οι οποίες µετά την συµπλήρωσή τους στέλνουν τα δεδοµένα τους σε άλλες τοποθεσίες στο WWW για συλλογή ή επεξεργασία. Στο κεφάλαιο αυτό περιγράφονται όλες οι φόρµες παρέχει η HTML. ηµιουργία Φορµών Η δηµιουργία φόρµας σε έγγραφο HTML γίνεται µε την χρήση της διπλής ετικέτας < FORM > - < /FORM > Τα προσδιοριστικά της ετικέτας < FORM > είναι τα παρακάτω : - ACTION = " URL ", καθορίζει το URL που θα µεταφερθούν τα στοιχεία µετά την συµπλήρωση της φόρµας. Το προσδιοριστικό ACTION µπορεί να περιέχει είτε απλώς µία διεύθυνση ή να παραπέµπει σε κάποιον εξυπηρετητή (server) µέσω ενός CGI script το οποίο χειρίζεται τα αποστελλόµενα στοιχεία. - METHOD = GET POST, καθορίζει την µέθοδο µε την οποία θα χειριστούν τα δεδοµένα από το URL που περιέχει το προσδιοριστικό ACTION. Πιο συγκεκριµένα : METHOD = GET : Χρησιµοποιείται όταν τα δεδοµένα της φόρµας δεν απαιτούν κάποια άλλη εξωτερική επεξεργασία. METHOD = POST : Η µέθοδος αυτή χρησιµοποιείται όταν τα δεδοµένα της φόρµας χρειάζονται κάποια εξωτερική επεξεργασία ή παρέχουν κάποιες χρήσιµες πληροφορίες οι οποίες ενηµερώνουν το URL που τα δέχεται. - NAME = " Συµβολικό όνοµα " Η ετικέτα < FORM > περιέχει κυρίως πληροφορίες για την αποστολή των εισαγοµένων στην φόρµα δεδοµένων χωρίς να καθορίζει τον γραφικό τύπο ή το είδος της φόρµας που θέλουµε να εισάγουµε και να χρησιµοποιήσουµε. Για τον σκοπό αυτό µέσα στην ετικέτα < FORM > χρησιµοποιούνται οι ετικέτες < INPUT >, < SELECT > και < TEXTAREA > οι οποίες εισάγουν και µορφοποιούν φόρµες µε διαφορετικές δυνατότητες και χρήσεις όπως περιγράφονται στις επόµενες παραγράφους. Πεδία Φόρµας < INPUT > Η ετικέτα < INPUT > καθορίζει την εισαγωγή των περισσότερων από τις διαφορετικές φόρµες που διαθέτει η HTML Τα προσδιοριστικά της ετικέτας < INPUT > είναι τα παρακάτω : - TYPE = " button submit reset radio checkbox text password hidden ", καθορίζει την εµφάνιση αλλά και την χρήση της φόρµας που εισάγουµε Πιο αναλυτικά : TYPE = " button " Εµφανίζει στην οθόνη ένα πλήκτρο TYPE = " submit " Εµφανίζει ένα πλήκτρο το οποίο όταν πατηθεί αποστέλλει τα δεδοµένα της φόρµας στην οποία περιέχεται εκεί που περιγράφει το προσδιοριστικό ACTION Μεθοδολογία Σχεδίασης 25

26 TYPE = " reset " Εµφανίζει ένα πλήκτρο το οποίο όταν πατηθεί ακυρώνει και σβήνει όλες τις υπάρχουσες εγγραφές του χρήστη από την φόρµα TYPE = " radio " Εµφανίζει στην οθόνη µία µικρή κυκλική περιοχή στην οποία όταν πατήσουµε εµφανίζεται µία µικρή τελεία, ενδεικτικό ότι έχει επιλεχθεί. Χρησιµοποιούµε αυτό το είδος φόρµας όταν θέλουµε να συντάξουµε πολλαπλές επιλογές οι οποίες όµως είναι αλληλοαποκλειόµενες δηλαδή η επιλογή µίας αυτοµάτως αναιρεί την επιλογή της προηγούµενης. TYPE = " checkbox " Εµφανίζει στην οθόνη µία µικρή τετράγωνη περιοχή στην οποία όταν πατήσουµε εµφανίζεται ένα γραφικό "ν" ενδεικτικό ότι έχει επιλεχθεί. Χρησιµοποιούµε αυτό το είδος της φόρµας όταν θέλουµε να συντάξουµε πολλαπλές επιλογές χωρίς να είναι αλληλοαποκλειόµενες TYPE = " text " Εµφανίζει στην οθόνη µία γραµµή εισαγωγής κειµένου η οποία µπορεί να δεχθεί ή ήδη περιέχει κείµενο. TYPE = " password " Εµφανίζει στην οθόνη µία γραµµή εισαγωγής κειµένου αλλά οι χαρακτήρες του κειµένου το οποίο περιέχει ή δέχεται εµφανίζονται σαν αστερίσκοι (*). Χρησιµοποιείται όταν θέλουµε να εισάγουµε κείµενο χωρίς να είναι εµφανές. TYPE = " hidden " εν εµφανίζει τίποτα στην οθόνη. Χρησιµοποιείται για πέρασµα τιµών οι οποίες δεν καθορίζονται από αυτόν που συµπληρώνει την φόρµα. - VALUE = " αλφαριθµητικό ", περιέχει µία συµβολική τιµή (αλφαριθµητικό) η οποία εκφράζει είτε τα δεδοµένα που εισάγονται σε κάθε τύπο φόρµας είτε κάποια τιµή η οποία θα αποσταλεί µαζί µε τα υπόλοιπα δεδοµένα όταν ο χρήστης πατήσει το πλήκτρο submit. Χρησιµοποιείται επίσης και για να καθορίσει την αρχική τιµή σε κάποιες από τις παραπάνω φόρµες Πιο συγκεκριµένα : Όταν συντάσσεται µε τα προσδιοριστικά TYPE=button, TYPE=submit και TYPE=reset καθορίζουν το κείµενο που εµφανίζεται στην επιφάνεια του πλήκτρου. Όταν συντάσσεται µε τα προσδιοριστικά TYPE=text και TYPE=password καθορίζουν το κείµενο που περιέχει η εµφανιζόµενη γραµµή εισαγωγής κειµένου. - NAME = " Συµβολικό όνοµα ", χρησιµοποιείται για να καθορίσει το συµβολικό όνοµα της φόρµας επειδή τα δεδοµένα αποστέλλονται στον παραλήπτη µε την µορφή ζεύγους ' NAME = VALUE ', ώστε να γνωρίζουµε σε ποια φόρµα ανταποκρίνεται κάθε τιµή. Επίσης χρησιµοποιείται όταν η σελίδα περιέχει ένθετο κώδικα σαν αναγνωριστική µεταβλητή της φόρµας. Το όρισµα της είναι ένα αλφαριθµητικό. - SIZE = ακέραιος - MAXLENGTH = ακέραιος, µαζί µε τα προσδιοριστικά TYPE=text και TYPE=password µπορούµε να χρησιµοποιήσουµε τα προσδιοριστικά SIZE και MAXLENGTH. Η SIZE καθορίζει το µέγεθος του πεδίου εισαγωγής κειµένου, σε χαρακτήρες Αν δεν καθοριστεί τότε είναι είκοσι χαρακτήρες. Η MAXLENGTH καθορίζει την µέγιστη πρόταση, σε χαρακτήρες, που µπορούµε να εισάγουµε. Αν δεν καθοριστεί τότε είναι άπειροι χαρακτήρες. - CHECKED, συντάσσεται µε τα προσδιοριστικά TYPE=checkbox και TYPE=radio και εµφανίζει τις αντίστοιχες φόρµες προεπιλεγµένες. - DISABLED, εµφανίζει την αντίστοιχη φόρµα απενεργοποιηµένη και απαγορεύει από τον χρήστη να εισάγει ή µεταβάλλει τα δεδοµένα της. - READONLY, µοιάζει µε την προηγούµενη δηλαδή δεν επιτρέπει στον χρήστη την µεταβολή των δεδοµένων της αντίστοιχης φόρµας αλλά του επιτρέπει να εστιάσει, και να χρησιµοποιήσει λειτουργίες όπως αντιγραφή (copy) στα δεδοµένα της. ΠΑΡΑ ΕΙΓΜΑΤΑ Χρήση της ετικέτας INPUT για την δηµιουργία φόρµας <FORM NAME="FillInForm" > Fill in the following form. User Name (8 characters) <INPUT TYPE="TEXT" SIZE=10 MAXLENGTH=8 NAME="LogIn" > Password (8 characters) <INPUT TYPE="PASSWORD" SIZE=10 MAXLENGTH=8 NAME="Password" > <HR> Connection Μεθοδολογία Σχεδίασης 26

27 <INPUT TYPE="RADIO" VALUE=1 NAME="contype" CHECKED> PPP <INPUT TYPE="RADIO" VALUE=2 NAME="contype"> Theseas <INPUT TYPE="RADIO" VALUE=3 NAME="contype"> Phgasos <INPUT TYPE="RADIO" VALUE=4 NAME="contype"> Icaros <INPUT TYPE="CHECKBOX" VALUE="TRUE" NAME="savepass"> Save your Password<HR> <INPUT TYPE="SUBMIT" VALUE="Submit" > <INPUT TYPE="RESET" VALUE="Reset" > </FORM > < SELECT > Όταν σε µία φόρµα θέλουµε να εισάγουµε ένα κατάλογο πολλαπλών αλληλοαποκλειόµενων ή όχι επιλογών χρησιµοποιούµε την διπλή ετικέτα < SELECT > - < /SELECT > Η φόρµα που εισάγεται µε την ετικέτα < SELECT > έχει την µορφή λίστας της οποίας µόνο το επιλεγµένο στοιχείο είναι εµφανές, ενώ µόνο όταν πατήσουµε πάνω της µπορούµε να δούµε όλες τις δυνατές επιλογές της. Χρησιµοποιούµε συχνά τέτοιου είδους φόρµα αντί πολλαπλών φορµών τύπου < INPUT TYPE=" radio " > ή < INPUT TYPE=" checkbox ". Τα προσδιοριστικά της ετικέτας < SELECT > είναι : - NAME = " Συµβολικό όνοµα " Όπως και στο < INPUT NAME =... > - DISABLED, όπως και στο < INPUT DIASABLED... > - MULTIPLE, χρησιµοποιείται για να επιτρέψει την επιλογή παραπάνω από ενός στοιχείου της λίστας. - SIZE = " ακέραιος ", καθορίζει πόσα από τα στοιχεία της λίστας θα είναι εµφανή. Η προκαθορισµένη τιµή της είναι ένα. Για να εισάγουµε ένα στοιχείο στην λίστα των επιλογών µίας φόρµας < SELECT > χρησιµοποιούµε την απλή ετικέτα < OPTION > ακολουθούµενη από το κείµενο της επιλογής. Τα προσδιοριστικά της ετικέτας < OPTION > είναι : - NAME = " Συµβολικό όνοµα ", όπως και στο < INPUT NAME =... > - VALUE = " αλφαριθµητικό ", όπως και στο < INPUT VALUE =... > - SELECTED, καθορίζει πιο στοιχείο της λίστας θα εµφανιστεί προεπιλεγµένο. ΠΑΡΑ ΕΙΓΜΑ Χρήση της φόρµας < SELECT > < FORM NAME="Favourites" > My favourite car is: < SELECT NAME="car" SIZE=1 > < OPTION VALUE=1 SELECTED > Ferrari < OPTION VALUE=2 > Lamborghini < OPTION VALUE=3 > Porsche < OPTION VALUE=4 > Mercedes < OPTION VALUE=5 > BMW < OPTION VALUE=6 > Aston Martin < OPTION VALUE=7 > Alfa Romeo < /SELECT > < BR > and my favourite sport is: < SELECT NAME="sport" SIZE=1 > < OPTION VALUE=1 SELECTED > Football < OPTION VALUE=2 > Basketball < OPTION VALUE=3 > Volleyball < OPTION VALUE=4 > Water Polo < OPTION VALUE=5 > Ping Pong < /SELECT > < /FORM > Μεθοδολογία Σχεδίασης 27

28 < TEXTAREA > Όταν σε µία φόρµα θέλουµε να εισάγουµε κείµενο το οποίο είναι µεγαλύτερο από µία γραµµή, που µας επιτρέπει η φόρµα < INPUT TYPE=" text " >, χρησιµοποιούµε την διπλή ετικέτα < TEXTAREA > - < /TEXTAREA > Η ετικέτα < TEXTAREA > εµφανίζει στη οθόνη ένα παράθυρο εισαγωγής κειµένου. Το κείµενο που βρίσκεται σε µία τέτοια φόρµα έχει την εµφάνιση προδιαµορφωµένου µε την ετικέτα < PRE > κειµένου Τα προσδιοριστικά της ετικέτας < TEXTAREA > είναι : - COLS = ακέραιος - ROWS = ακέραιος, καθορίζουν τις διαστάσεις του παραθύρου εισαγωγής κειµένου. Το COLS καθορίζει το πλάτος και το όρισµά της είναι αριθµός χαρακτήρων ενώ το ROWS καθορίζει το ύψος και το όρισµά της είναι αριθµός γραµµών. - NAME = " Συµβολικό όνοµα ", όπως και στο < INPUT NAME =... > - DISABLED, όπως και στο < INPUT DIASABLED... > - READONLY, όπως και στο < INPUT READONLY... > ΠΑΡΑ ΕΙΓΜΑ Εισαγωγή κειµένου σε φόρµα < ΤΕΧΤΑΡΕΑ > < FORM NAME="HTMLPage" > Fill in your comments in the following area < TEXTAREA NAME="source" COLS=40 ROWS=14 > Insert your comment here < /TEXTAREA > < /FORM > Επεξεργασία στοιχείων φόρµας Ο έλεγχος της ορθότητας των στοιχείων µιας φόρµας, η επεξεργασία των στοιχείων που αποστέλλουν οι χρήστες και η διαχείρισή τους (π.χ. αποθήκευση, αποστολή µε ) κλπ. είναι διαδικασίες που δεν µπορούν να εκτελεσθούν µε τη χρήση µόνο της HTML. Τα όρια της γλώσσας φτάνουν µέχρι τη δηµιουργία στατικών σελίδων, που δεν έχουν τη δυνατότητα ούτε να αντιλαµβάνονται κινήσεις των χρηστών (ενεργές) ούτε να προσαρµόζουν τη συµπεριφορά και το περιεχόµενό τους ανάλογα µε τα δεδοµένα που δέχονται (δυναµικές). Για το λόγο αυτό έχουν αναπτυχθεί επεκτάσεις της γλώσσας όπως η Dynamic HTML (κυρίως για ανίχνευση γεγονότων όπως κίνηση του ποντικιού, κλικ κλπ) και επιπλέον γλώσσες σεναρίων (scripting languages) που µε την προσθήκη κώδικα στον υπάρχοντα HTML κώδικα επιτυγχάνουν τα παραπάνω. Τέτοιες γλώσσες είναι οι γλώσσες JavaScript της Netscape και η VBScript της Microsoft Πλαίσια (Frames) ηµιουργία Πλαισίων Η HTML µας δίνει την δυνατότητα να απεικονίσουµε ταυτόχρονα σε µία σελίδα πολλά διαφορετικά έγγραφα. Αυτό επιτυγχάνεται διαµερίζοντας µία σελίδα σε ξεχωριστές περιοχές, παράθυρα ( πλαίσια, Frames). και εισάγοντας σε αυτά ισάριθµα HTML κείµενα. Για να δηµιουργήσουµε πλαίσια σε µία σελίδα χρησιµοποιούµε την διπλή ετικέτα < FRAMESET > - < /FRAMESET > στην θέση της ετικέτας < BODY >. Τα προσδιοριστικά της ετικέτας < FRAMESET > είναι οι παρακάτω : - ROWS = " ακέραιος ποσοστό% * ", χρησιµοποιείται για να χωρίσει την οθόνη σε οριζόντιες περιοχές. Οι τιµές που δέχεται είναι είτε εκφρασµένες σε εικονοστοιχεία (pixels), είτε σε ποσοστό από το µέγιστο διαθέσιµο ύψος της οθόνης και ορίζουν το ύψος καθεµίας οριζόντιας περιοχής. Μεθοδολογία Σχεδίασης 28

29 Πολλές φορές χρησιµοποιείται και ο αστερίσκος (*), που δηλώνει σαν ύψος το υπόλοιπο διαθέσιµο ύψος της οθόνης. π.χ. : < FRAMESET ROWS="30%,30%,40%" > Χωρίζει την οθόνη του Browser σε τρεις οριζόντιες περιοχές που έχουν ύψος 30%,30% και40% από το ύψος της παραθύρου του browser αντίστοιχα. < FRAMESET ROWS="20%,*,*" > ηµιουργεί τρεις οριζόντιες περιοχές όπου η πρώτη έχει ύψος 20% και οι άλλες δύο 40% ( ίδιο ύψος ) σε σχέση µε το ύψος του παραθύρου του browser. - COLS = " ακέραιος ποσοστό% * ", χρησιµοποιείται για να χωρίσει την οθόνη σε κάθετες περιοχές. Η σύνταξή της είναι παρόµοια µε την σύνταξη του ROWS, και οι τιµές που δέχεται καθορίζουν το πλάτος της κάθετης περιοχής. π.χ. : < FRAMESET COLS="200,400,*" > ηµιουργεί τρεις κάθετες περιοχές από τις οποίες οι δύο πρώτες έχουν πλάτη 200, 400 εικονοστοιχεία ενώ η τρίτη έχει πλάτος ίσο µε τα υπόλοιπα διαθέσιµα εικονοστοιχεία της οθόνης. - BORDER = ακέραιος - BORDERCOLOR = "#RRGGBB", καθορίζουν το µέγεθος και το χρώµα του περιθωρίου που δηµιουργεί ο Browser γύρω από κάθε πλαίσιο. Το BORDER δέχεται σαν όρισµα της εικονοστοιχεία (pixels), ενώ το BORDERCOLOR δέχεται σαν όρισµα ένα χρώµα σε µορφή RGB. Για να είναι ορθή συντακτικά η ετικέτα < FRAMESET > πρέπει να περιέχει τουλάχιστον ένα από τα προσδιοριστικά ROWS ή COLS και ποτέ και τα δύο µαζί. Η εισαγωγή των σελίδων σε κάθε ένα από τα πλαίσια που δηµιουργεί µία ετικέτα < FRAMESET > γίνεται µε την χρήση της απλής ετικέτας < FRAME > που θα εξετάσουµε στη συνέχεια. Επειδή σε έγγραφα HTML που περιέχουν πλαίσια χρησιµοποιείται η ετικέτα < FRAMESET > στην θέση της ετικέτας < BODY >, το έγγραφο δεν µπορεί να περιέχει κείµενο. Οι µόνες αποδεκτές ετικέτες ανάµεσα στην διπλή ετικέτα < FRAMESET > είναι µόνο η ετικέτα < FRAME > ή επίσης η ετικέτα < FRAMESET > στην περίπτωση που θέλουµε να διαιρέσουµε µία οριζόντια περιοχή σε άλλες κάθετες ή το αντίστροφο και να δηµιουργήσουµε ταυτόχρονα οριζόντια και κάθετα παράθυρα. Επειδή Browsers παλαιοτέρων εκδόσεων δεν υποστηρίζουν Frames, η HTML παρέχει την διπλή ετικέτα < ΝΟFRAMES > - < /ΝΟFRAMES > µέσα στην οποία µπορούµε να εισάγουµε κάποιο εναλλακτικό κείµενο (συνήθως κάποιο µήνυµα που ενηµερώνει το χρήστη ότι ο Browser που χρησιµοποιεί δεν υποστηρίζει παράθυρα). ΠΑΡΑ ΕΙΓΜΑΤΑ Τυπική σύνταξη αρχείου HTML που περιέχει πλαίσια. < HTML > < HEAD > < TITLE > Τίτλος Αρχείου < /TITLE > < /HEAD > < FRAMESET ROWS="..." COLS="..." > < FRAME... > < FRAME... >... < FRAME... > [ < FRAMESET ROWS="..." COLS="..." < FRAME... > < FRAME... >... < /FRAMESET > ] Μεθοδολογία Σχεδίασης 29

30 ... < FRAME... > < /FRAMESET > < NOFRAMES >... < /NOFRAMES > < /HTML > Εισαγωγή Εγγράφων σε Πλαίσια Μία σελίδα που είναι χωρισµένη σε πλαίσια εισάγει σε κάθε πλαίσιο της µία διαφορετική ιστοσελίδα. Η εισαγωγή σελίδων σε πλαίσια γίνεται µε την χρήση της ετικέτας < FRAME >. Η ετικέτα < FRAME > συντάσσεται µέσα στην ετικέτα < FRAMESET > και τα προσδιοριστικά που µπορεί να δεχθεί είναι οι παρακάτω : - SRC = " [ διεύθυνση ] όνοµα αρχείου URL ", καθορίζει την διεύθυνση (Source) και το όνοµα του αρχείου HTML που θέλουµε να εισάγουµε. Το προσδιοριστικό SRC είναι το µόνο υποχρεωτικό προσδιοριστικό της ετικέτας < FRAME > και απαιτείται για την ορθή σύνταξή της. Όλα τα επόµενα είναι προαιρετικά. - NAME = " Συµβολικό όνοµα ", χαρακτηρίζει µε κάποιο συµβολικό όνοµα (αλφαριθµητικό) κάθε πλαίσιο στην κύρια σελίδα. Χρησιµοποιείται σε συνδυασµό µε την παράµετρο TARGET της ετικέτας < A HREF > για να καθορίζουµε σε πιο από τα πλαίσια απευθύνεται κάποιος σύνδεσµος. - MARGINWIDTH = ακέραιος - MARGINHEIGHT = ακέραιος, καθορίζουν σε εικονοστοιχεία (pixels) την απόσταση που θα εµφανίζεται το κείµενο σε σχέση µε τα περιθώρια κάθε πλαισίου. Συγκεκριµένα το MARGINWIDTH καθορίζει τη απόσταση από τα πλευρικά περιθώρια ενώ το MARGINHEIGHT από το πάνω και κάτω περιθώριο. - SCROLLING = yes no auto, συνήθως το µέγεθος µίας σελίδας που εισάγεται σε ένα πλαίσιο είναι µεγαλύτερη σε διαστάσεις από αυτό, γεγονός που αναγκάζει τον Browser να εµφανίζει µπάρες κύλισης (scrolling bars) για να γίνει δυνατή η ανάγνωση όλου του εγγράφου. Το προσδιοριστικό SCROLLING καθορίζει την εµφάνιση των πλευρικών µπάρων κύλισης σε ένα πλαίσιο. Πιο συγκεκριµένα : SCROLLING = yes : Οι µπάρες κύλισης εµφανίζονται οπωσδήποτε (έστω και ανενεργές). SCROLLING = no : Οι µπάρες κύλισης δεν εµφανίζονται καθόλου. SCROLLING = auto : Οι µπάρες κύλισης εµφανίζονται µόνο όταν είναι αναγκαίο (προκαθορισµένη τιµή). - NORESIZE, όταν χρησιµοποιείται απαγορεύει την µεταβολή του µεγέθους του πλαισίου από τον χρήστη. ΠΑΡΑ ΕΙΓΜΑΤΑ Σελίδα µε τρία οριζόντια πλαίσια < HTML > < FRAMESET ROWS="30%,40%,*" BORDER=2 > < FRAME SRC="../Examples/eb1.html" SCROLLING=YES > < FRAME SRC="../Examples/eb2.html" > < FRAME SRC="../Examples/eb3.html" NORESIZE > < /FRAMESET > < /HTML > Σελίδα µε τρία κάθετα πλαίσια < HTML > < FRAMESET COLS="*,50%,*" BORDER=4 > < FRAME SRC="../Examples/eb1.html" MARGINWIDTH=10 > < FRAME SRC="../Examples/eb2.html" SCROLLING=YES > < FRAME SRC="../Examples/eb3.html" NORESIZE > < /FRAMESET > < /HTML > Σελίδα µε οριζόντια και κάθετα πλαίσια < HTML > < FRAMESET ROWS="*,*,40%" BORDER=4 > Μεθοδολογία Σχεδίασης 30

31 < FRAME SRC="../Examples/eb.html" > < FRAME SRC="../Examples/eb.html" > < FRAMESET COLS="*,*,*,*" BORDER=2 > < FRAME SRC="../Examples/eb.html" MARGINWIDTH=10 > < FRAME SRC="../Examples/eb.html" SCROLLING=YES > < FRAME SRC="../Examples/eb.html" NORESIZE > < FRAME SRC="../Examples/eb.html" SCROLLING=AUTO > < /FRAMESET > < /FRAMESET > < /HTML > Μεθοδολογία Σχεδίασης 31

32 3. Μεθοδολογία Σχεδίασης 3.1. Εισαγωγή Η αντίληψη που αναπτύσσουν οι χρήστες µετά την επίσκεψή τους σε µια θέση ιστού σχετικά µε τη δοµή και την οργάνωσή του έχει τις περισσότερες φορές άµεση σχέση µε την ιδέα που είχε ο δηµιουργός του όταν το σχεδίαζε. Η δύναµη του ιστού αντλείται ακριβώς από την πληθώρα των συνδέσµων µιας σελίδας και την αλληλεπίδραση που αυτοί παρέχουν στο χρήστη. εδοµένου όµως ότι κάθε φορά µόνο ένα τµήµα του κόµβου ιστού είναι ορατή από το χρήστη, η σελίδα που έχει ανοιγµένη, βλέποντάς τη και τους συνδέσµους που του παρέχει ασυνείδητα αρχίζει να δηµιουργεί στο µυαλό του ένα γενικό σχήµα της θέσης αυτής, µε σκοπό να µπορέσει κατά κάποιο τρόπο να προβλέψει το στόχο και τη δοµή του. Συνεπώς, οι περισσότεροι δηµιουργοί σελίδων θα προτιµούσαν οι χρήστες να έχουν στο µυαλό τους ένα δοµηµένο σχέδιο της θέσης που έχουν αναπτύξει παρά µια άναρχη οµαδοποίηση σελίδων. Αυτό βέβαια εξαρτάται από το πώς έχουν αυτοί την έχουν δοµήσει. Εποµένως, η καλά δοµηµένη σύνδεση των σελίδων είναι ιδιαίτερα σηµαντική και αφορά την αποτελεσµατικότητα και τη λειτουργικότητα ενός κόµβου. Άρα, η όλη δόµηση των σελίδων ενός κόµβου σε λογικές ενότητες και περιοχές, που ονοµάζονται συστοιχίες ιστού (web clusters), είναι πρωταρχική όσον αφορά το σχεδιασµό του. Καταρχήν, γιατί οι σύνδεσµοι καθορίζουν τα µονοπάτια που ακολουθούν οι χρήστες για την πλοήγησή τους µέσα σε µια σελίδα Εδώ την έννοια πλοήγηση τη χρησιµοποιούµε µε την ευρύτερή της έννοια και εννοούµε κατέβασµα αρχείων, συµπλήρωση φόρµας και γενικά ότι παρέχει ένας κόµβος ιστού στους χρήστες του. Επίσης, η πλοήγηση µε τη σειρά της καθορίζει τις σχέσεις που υφίστανται µεταξύ των σελίδων. Για παράδειγµα, ένας σύνδεσµος καλεί µια λίστα, γιατί η λίστα αυτή σχετίζεται µε το θέµα στο οποίο αναφέρεται ο σύνδεσµος. Τέλος, οι σχέσεις ανάµεσα στις σελίδες ορίζουν και το περιεχόµενο των σελίδων, άρα και ολόκληρου του κόµβου. Έτσι, οι χρήστες θα καταλάβουν και θα κατανοήσουν το περιεχόµενο του κόµβου βασιζόµενοι στην αντίληψη που θα αναπτύξουν µετά την πλοήγησή τους µέσα σε αυτό. Γενικά, θα µπορούσαµε να πούµε ότι η δοµή των συνδέσµων σαν σύνολο δηµιουργεί και το νόηµα που θέλουµε να δώσουµε στη θέση και άρα και το νόηµα που θέλουµε να εκλάβουν οι χρήστες. Συνεπώς, αν κάποιος δε δείξει την πρέπουσα σηµασία στον καθορισµό της δόµηση των σελίδων, τότε τα αποτελέσµατα δε θα είναι και ιδιαίτερα ευνοϊκά. Αντίθετα, αν συστοιχίες ενός κόµβου σχεδιαστούν µε ιδιαίτερη προσοχή, τότε η επιτυχία είναι σχεδόν σίγουρη και η πλοήγηση των χρηστών µέσα στον κόµβο θα γίνεται µε ευχαρίστηση. Αν κάποιος νοµίζει ότι όλα αυτά είναι υπερβολικά τότε δεν έχει παρά να σκεφτεί ότι οι σηµερινές σελίδες του ιστού που έχουν µόνο κείµενο (text-based) αρχίζουν σιγά-σιγά να αποτελούν παρελθόν. Η συνεχώς αυξανόµενη χρήση των τρισδιάστατων γραφικών και της εικονικής πραγµατικότητας θα έχει σαν αποτέλεσµα µετά από κάποια χρόνια να δηµιουργούµε ολόκληρους κόσµους ιστού και όχι απλά σελίδες. Εποµένως, αν η οργάνωση των λίγων σελίδων θέλει ιδιαίτερη προσοχή, τότε τι θα απαιτεί ο σχεδιασµός ενός κόσµου ιστού; 3.2. Μια απλή προσέγγιση Όπως προκύπτει από τα παραπάνω είναι µάλλον επιτακτική η ανάγκη δόµησης ενός κόµβου κατά συστοιχίες, πριν την παρουσίαση του στον κόσµο του Internet. Βέβαια είναι πάρα πολλοί εκείνοι που δηµιουργούν πράγµατι όµορφες σελίδες χωρίς πρώτα να έχουν καθορίσει τους στόχους τους, χωρίς να ξέρουν γιατί έφτιαξαν τις συγκεκριµένες σελίδες. - πιθανόν ούτε και οι χρήστες των σελίδων αυτών δεν µπορούν να το αντιληφθούν. Εµείς όµως θα ακολουθήσουµε τον ασφαλή δρόµο, σύµφωνα µε τον οποίο πρέπει να γίνει : α) καθορισµός των στόχων β) κατανόηση των αναγκών του χρήστη γ) καθορισµός της επιτυχίας δ) σχεδιασµός της δοµής ε) πραγµατοποίηση της δοµής στ) συλλογή κριτικής και Μεθοδολογία Σχεδίασης 32

33 ζ) προσαρµογή στις νέες καταστάσεις και τις απαιτήσεις του χρήστη. Ας δούµε όµως τα πράγµατα µε τη σειρά : α) Καθορισµός των στόχων Ο καθορισµός των στόχων, δηλαδή η γνώση του τι προσπαθεί κάποιος να πετύχει αποτελεί το σηµαντικότερο βήµα στο σχεδιασµό ή την επιλογή µιας συγκεκριµένης δοµής - πρέπει να ξέρεις που θα πας, έτσι ώστε να χρησιµοποιήσεις και τον κατάλληλο χάρτη. Για παράδειγµα, οι περισσότεροι οργανισµοί και επιχειρήσεις στοχεύουν ότι µε την παρουσία τους στον ιστό θα επιτύχουν: συλλογή πληροφοριών και ερευνητικών θεµάτων δήλωση της παρουσίας τους στην αγορά και/ή γενικότερη έκθεση στο διεθνή, ίσως χώρο αλληλεπίδραση µε µέλη, εργαζοµένους και πελάτες online παραγγελία και παράδοση αγαθών, υπηρεσιών και πληροφοριών. Αυτό το µέρος ίσως να είναι και ποιο δύσκολο από όλα που θα ακολουθήσουν. Όµως, µπορεί να επιτευχθεί απαντώντας στις ερωτήσεις : γιατί δηµιουργείς αυτόν τον κόµβο; από ποιους θέλεις να χρησιµοποιείται; τι θέλεις να πετύχεις µέσα από τον κόµβο; β) Κατανόηση των αναγκών του χρήστη. Από τη στιγµή που έχουν καθοριστεί οι στόχοι σχετικά µε την ανάπτυξη του κόµβου, είναι αναγκαίος ο επιµέρους καθορισµός των χρηστών στους οποίους απευθύνεται. Αν δεν ξέρεις σε ποιους απευθύνεσαι πώς θα καλύψεις τις ανάγκες τους; Είναι ιδιαίτερα σηµαντική η οριοθέτηση των αναγκών των χρηστών όπως αυτή προκύπτει από γενικές πληροφορίες, αποτελέσµατα ή οτιδήποτε άλλο. Αν δε δοθεί σηµασία στις ανάγκες αυτές, τότε δε ασχοληθούν ιδιαίτερα µε τη θέση ιστού και το πιθανότερο είναι να µην την επισκεφτούν ξανά. Μερικές ερωτήσεις που θα προσφέρουν βοήθεια είναι : Ποίοι είναι οι χρήστες στους οποίους απευθύνεσαι και ποιους άλλους θέλεις να προσελκύσεις:; Τι ζητούν αυτοί οι χρήστες; Γιατί συνδέονται µε τη σελίδα σου; Πόσο συχνά θέλεις να επισκέπτονται τις σελίδες σου; Θέλεις να έχεις ένα προκαθορισµένο ή τυχαίο κοινό ; γ) Καθορισµός της επιτυχίας Το επόµενο βήµα είναι ο προσδιορισµός της επιτυχίας µε βάση κάποια προκαθορισµένα, επιθυµητά αποτελέσµατα. Αυτό θα επιτευχθεί µε το συνδυασµό των στόχων που έχουµε θέσει και τις απαιτήσεις που έχουµε ορίσει για τους χρήστες. Βασιζόµενοι, δηλαδή στα δυο προηγούµενα βήµατα καθορίζουµε έναν αριθµό από σενάρια που περιγράφουν µια επιτυχηµένη επίσκεψη στο site µας από έναν τυπικό χρήστη. Με βάση τα σενάρια αυτά προσδιορίζουµε και την αποτυχία ή την επιτυχία της δηµιουργίας µας. Βέβαια, η ουσία είναι να κατασκευάσουµε σενάρια όσο το δυνατό κοντά στην πραγµατικότητα. δ) Σχεδιασµός της δοµής Ερχόµαστε τώρα σε ένα από τα πιο σηµαντικά θέµατα της ανάπτυξης ενός κόµβου. Η όλη δοµή - και η εµφάνιση βέβαια - είναι που θα προσελκύσει τους χρήστες. Η δοµή που θα επιλέξουµε πρέπει να είναι άµεσα συνυφασµένη µε τους στόχους που έχουµε θέσει. Παρακάτω θα παρουσιάσουµε τρεις διαφορετικές κατηγορίες δοµής, οι οποίες βέβαια µπορούν να συνδυαστούν µεταξύ τους για την ανάπτυξη µιας νέας που θα καλύπτει πιθανόν καλύτερα τους στόχους. ε) Πραγµατοποίηση της δοµής Το βήµα αυτό αφορά καθαρά το επίπεδο της εφαρµογής. Από τη στιγµή που είναι όλα συγκεντρωµένα και ορισµένα το µόνο που µένει είναι η δηµιουργία του κόµβου. Μεθοδολογία Σχεδίασης 33

34 στ) Συλλογή κριτικής Πέρα από την ανάπτυξη µιας θέσης, άσχετα από το αν αυτή είναι επιτυχηµένη ή όχι, χρειάζεται ζύγισµα των αποτελεσµάτων και, ίσως, διόρθωση ή απλά µια αναζωογόνηση. Στο σηµείο αυτό θα συγκρίνουµε τα πραγµατικά πλέον αποτελέσµατα µε τα σενάρια που είχαµε αναπτύξει. Θα δούµε πόσο προσεγγίσαµε την πραγµατικότητα και τους στόχους που είχαµε θέσει. Αυτό µπορεί να πραγµατοποιηθεί και από τα mail που λαµβάνουµε από τους χρήστες µας - αρκεί βέβαια να µπορούµε να ανταποκριθούµε εγκαίρως. ζ) Προσαρµογή στις νέες καταστάσεις και τις απαιτήσεις του χρήστη Ένα επιπλέον καλό που έχει ο ιστός έχει να κάνει µε τη δυνατότητα γρήγορης αλλαγής, η οποία µπορεί να επιτευχθεί και πολύ εύκολα και σύντοµα. Έτσι, αν διαπιστώσουµε πως κάτι έχει αλλάξει έχουµε τη δυνατότητα να προσαρµοστούµε στις νέες καταστάσεις. Το άσχηµο είναι ότι αυτή η, σχεδόν συνεχής, αλλαγή είναι απαίτηση των χρηστών και περιµένουν άµεσα αποτελέσµατα. Γι αυτό, αν θέλουµε να κρατήσουµε τους χρήστες ενεργούς, χρειάζεται συντονισµένη δουλειά, ώστε να υπάρξει άµεση ανταπόκριση στις απαιτήσεις τους Τρία παραδείγµατα δόµησης Στο σηµείο αυτό θα παρουσιάσουµε τρία ενδεικτικά παραδείγµατα δόµησης ενός κόµβου. Τα παραδείγµατα αυτά αφορούν τρεις διαφορετικούς τύπους οργάνωσης συστοιχιών. Πρόκειται για : 1) Η ακολουθιακή δοµή (sequential). 2) Η ιεραρχική δοµή (hierarchical). 3) Η δοµή πλέγµατος (grid). Αυτά τα γενικές δοµές µπορεί να φανούν ιδιαίτερα χρήσιµες, ειδικά αν κάποιος πρόκειται να κάνει την πρώτη του εµφάνιση στο χώρο του ιστού και δεν ξέρει από που να ξεκινήσει. Έχοντας στο µυαλό του όλα όσα είπαµε προηγουµένως και υιοθετώντας ένα από τα επόµενα σχήµατα οργάνωσης, ή ακόµα και κάνοντας µια σύνθεση αυτών θα προκύψει ένα πολύ καλά δοµηµένο κόµβο. Συνεπώς, έχουµε : 1) Η ακολουθιακή δοµή Μια ιδιαίτερα δηµοφιλής δοµή είναι αυτή στην οποία οι συστοιχίες είναι ακολουθιακά δοµηµένες. Η δοµή αυτή έχει ένα προκαθορισµένο µονοπάτι. Συνήθως προσδιορίζεται από ένα σύνολο σελίδων και έναν αριθµό συνδέσµων - που οδηγούν σε επόµενες και προηγούµενες σελίδες. Οι σύνδεσµοι αυτοί καθοδηγούν το χρήστη σε µια συγκεκριµένη ακολουθία σελίδων οι οποίες καλύπτουν ένα δεδοµένο θέµα. Μπορεί επίσης να υπάρξουν και παράλληλες πλοηγήσεις σε άλλα αντικείµενα ή σε ήχο, video, animation. Η οργάνωση αυτή συναντάται πολύ συχνά και χρησιµοποιείται πολύ από τους δηµιουργούς σελίδων, γιατί στην ουσία ακολουθεί δοµή βιβλίου στο οποίο κατά κάποιο τρόπο γυρίζουµε τις σελίδες του. Η πιο άµεση εφαρµογή της δοµής αυτής είναι όταν πρέπει να ελέγξουµε ή να καθοδηγήσουµε την ακολουθία της πληροφορίας σε σχέση µε το χρήστη. Όταν, δηλαδή γνωρίζουµε εκ των προτέρων την ακολουθία των σελίδων και θέλουµε να προσανατολίσουµε το χρήστη. Κάποιες από τις καλύτερες χρήσης της οργάνωσης αυτής είναι : Περιγραφή διαδικασιών. Ξεναγοί χώρων. Ηλεκτρονική διδασκαλία (tutorials). Περιγραφή επίκαιρων και µε προκαθορισµένο τέλος ακολουθιακών γεγονότων. Από ορισµού µια ακολουθιακή δοµή έχει µια αρχή, ένα τέλος και επιπλέον σηµεία ενδιάµεσα. Σχετικά µε έναν ακολουθιακό κόµβο κάποιες λοξοδροµήσεις, ίσως παρέχουν ένα ενδιαφέρον στοιχείο στην πλοήγηση, αν φυσικά είναι σχετικές µε το όλο περιεχόµενο. Θα υπάρχει µια σελίδα εκκίνησης, που θα παρέχει το καλωσόρισµα και πέρα από αυτό θα προσδιορίζει µε τρόπο σαφή την γενική ιδέα του θέµατος του κόµβου, αλλά και θα καθοδηγεί το χρήστη πως να συνεχίσει. Φυσικά, θα έχουµε και τις Μεθοδολογία Σχεδίασης 34

35 επιµέρους σελίδες που θα εµφανίζουν, θα περιγράφουν ή θα καλύπτουν ένα συγκεκριµένο θέµα, σε σχέση πάντα µε το γενικό. Πέρα από αυτές τις σελίδες θα υπάρχουν και άλλες υποσελίδες, που καλύπτουν µικρότερης εµβέλειας θέµατα. Τέλος, θα υπάρχει η τελική σελίδα που ανακεφαλαιώνει και εκτιµά όλο το θέµα που κάλυψε ο κόµβος. Τις περισσότερες φορές η τελική σελίδα περιλαµβάνει και συνδέσµους που οδηγούν στις προηγούµενες σελίδες ή σε όλους σχετικούς κόµβους. Η δηµιουργία µιας τέτοιας συστοιχίας και συνεπώς και θέσης ιστού δεν είναι δύσκολη υπόθεση. Το δύσκολο είναι η διατήρηση της ακολουθιακότητας και των συνδέσµων µετά από κάποια αλλαγή στις απαιτήσεις των χρηστών. 2) Η ιεραρχική δοµή Μία επίσης οικεία δόµηση στους χρήστες αποτελεί αυτή στην οποία οι συστοιχίες είναι ιεραρχικά δεµένες µεταξύ τους. Η οργάνωση αυτή συνήθως ασχολείται µε σελίδες που συνδέονται µεταξύ τους µε προκαθορισµένα µονοπάτια και έχουν ένα κοινό σηµείο αναφοράς, µια αρχική σελίδα που µπορεί να είναι και η home page. Όπως µπορεί να διαπιστώσει κάποιος αυτό το σχήµα οργάνωσης µπορεί να χρησιµοποιηθεί από τις περισσότερες επιχειρηµατικές εφαρµογές, καθώς είναι ιδιαίτερα ευέλικτο και απλό. Παρέχει συνδέσµους που κατευθύνονται προς από την αρχική σελίδα και προς τα κάτω, µπορεί κάποιος να θεωρήσει ότι οι σύνδεσµοι αυτοί δηµιουργούν σχέσεις παππού - γονιού - πατέρα (σαν ένα αντικειµενοστραφές µοντέλο). Αυτή η µορφή οργάνωσης ενδείκνυται όταν έχουµε πληροφορίες που κατηγοριοποιούνται σε ενότητες ή όταν περιπλέκονται σε πολλά επίπεδα. Αν υπάρχει εµφανής ή υπονοούµενη ιεραρχία, αυτή η δοµή είναι η πλέον κατάλληλη. Εναλλακτικά, αν δεν µπορεί κάποιος να διαλέξει ή να σχεδιάσει τη δοµή του κόµβου τότε καλό είναι να δοκιµάσει αυτή. Γενικά µπορεί να χρησιµοποιηθεί για: Μια σειρά οδηγών χώρων που όλοι έχουν κοινό σηµείο αφετηρίας. Ένα είδος οργανογράµµατος που περιλαµβάνει πληροφορίες σχετικά µε αρµοδιότητες, περιοχές δραστηριοτήτων κ.α. Η ανάπτυξη της οργάνωσης αυτής είναι απλή, αφού ακολουθεί τη δενδρική δοµή που χρησιµοποιείται για όλα τα είδη των πληροφοριών. Τα κλαδιά του δένδρου, δηλαδή οι πληροφορίες, δεν είναι απαραίτητο να έχουν µια καθορισµένη ακολουθία, αν και κάποιος µπορεί σίγουρα να προσθέσει κουµπιά πλοήγησης (τότε όµως θα αναφερόµαστε µάλλον στη δικτυωτή δοµή). Γενικά, πάντως η δοµή αυτή θα έχει µια αρχική σελίδα, που όπως είπαµε µπορεί να είναι και η home page, η οποία θα αποτελεί και τον προσδιορισµό της επιχείρησης ή του οργανισµού µέσα στον ιστό και θα παρέχει στους χρήστες έναν κατάλογο µε τα θέµατα που µπορεί να επεξεργαστεί µέσα από τον κόµβο. Καθένα από αυτά τα θέµατα θα περιλαµβάνει και τη δική του σελίδα που θα αναφέρει, θα περιγράφει και γενικά θα παρέχει πληροφορίες. Η σελίδα του κάθε θέµατος θα συνδέεται µε επιµέρους σελίδες που θα δίνουν µια πιο επισταµένη ανάλυση. Η ανάπτυξη και η διατήρηση ενός τέτοιου κόµβου δεν αποτελεί ιδιαίτερα δύσκολη υπόθεση. Το δύσκολο είναι η καταγραφή και η συνεχής ενηµέρωση όλων των υποσελίδων, που το πιθανότερο είναι να αυξάνονται πολύ γρήγορα. 3) Η δοµή πλέγµατος Η οργάνωση µιας συστοιχίας σελίδων σε πλέγµα είναι από τις πιο πολύπλοκες, αλλά ταυτόχρονα είναι και από αυτές που παρέχουν στους χρήστες τη µεγαλύτερη ευχέρεια πλοήγησης µέσα στη θέση ιστού. Πρέπει να πούµε ότι υπάρχουν σχετικά λίγες πιθανές χρήσεις του δικτυωτού τρόπου οργάνωσης συστοιχιών. Γενικά, κάθε συλλογή θεµάτων της οποίας τα επιµέρους στοιχεία παρουσιάζουν έντονη αλληλεξάρτηση και σχέση, είναι υποψήφια για µια τέτοια οργάνωση. Έτσι, σε µορφή πλέγµατος µπορούν να οργανωθούν : Ένας χάρτης ή κάποιο άλλο γραφικό που λειτουργεί ως µενού πλοήγησης, δηλαδή κάθε χάρτης εικόνας. Πληροφορίες που από τη φύση τους είναι δισδιάστατες, π.χ. στατιστικά ή οικονοµικά στοιχεία που εµφανίζονται σε δύο άξονες. Τεχνικές πληροφορίες που παρουσιάζονται καλύτερα σε σύνθετους πίνακες, όπως είναι επιλογές προϊόντων ή διαγράµµατα τεχνικών χαρακτηριστικών. Μεθοδολογία Σχεδίασης 35

36 Εκµάθηση παιχνιδιών ή άλλων διαδικασιών που δεν ακολουθούν µια συγκεκριµένη ακολουθία βηµάτων. Η οργάνωση αυτή αντενδείκνυται εντελώς για οτιδήποτε πρέπει να παρουσιαστεί σε µια συγκεκριµένη ακολουθία βηµάτων. Η δοµή του πλέγµατος είναι κατά κάποιο τρόπο µοναδική, καθώς περιλαµβάνει συνδέσµους όχι µόνο µεταξύ σελίδων που ανήκουν στο ίδιο υποθέµα, αλλά και διαγώνιους συνδέσµους (όπως φαίνεται και από το σχήµα) µεταξύ των σελίδων. Κάθε σελίδα παρουσιάζει κάποιο δεδοµένο θέµα, αλλά συνδέεται και µε τις γύρω από αυτή σελίδες, εφόσον φυσικά σχετίζονται µεταξύ τους. εν υπάρχει κάποιος συγκεκριµένος τρόπος ανάπτυξης της δικτυωτής δοµής, καθώς εδώ ο δηµιουργός (web author) πρέπει να δώσει το δικό του στίγµα δηµιουργίας. Το βασικό είναι ότι πρώτα πρέπει να σχεδιαστεί η δοµή µε το χέρι και µετά να αρχίσει η κωδικοποίηση σε HTML, καθώς παρουσιάζει ιδιαίτερη πολυπλοκότητα και είναι πιθανή η περίπτωση λάθους Ο ανθρώπινος παράγοντας στo σχεδιασµού Κάποιος µπορεί να θεωρήσει ότι ο σχεδιασµός ενός κόµβου ιστού, και γενικότερα ενός αρχείου υπερκειµένου αντιµετωπίζεται κάτω από δυο οπτικές γωνίες : σαν προκαθορισµένες σχεδιαστικές τεχνικές που έχουν σκοπό την παραγωγή του σχεδίου και παρατηρήσεις και επισηµάνσεις πάνω στη διαδικασία που ο καθένας εκλαµβάνει και φέρνει εις πέρας µια διαδικασία σχεδιασµού. Τα περισσότερα εργαλεία και πακέτα που χρησιµοποιούνται για σχεδιασµό επικεντρώνονται κυρίως στην πρώτη διάσταση, προτείνοντας µια επίσηµη τεχνική για κάθε δεδοµένη περιοχή εφαρµογών. Κάτω από αυτή την άποψη, µια τεχνική σχεδιασµού είναι κάτι σαν συνταγή που κατευθύνει, µέσα από καθορισµένα βήµατα, στην ολοκλήρωση ενός στόχου. Όµως η έκταση των εφαρµογών υπερκειµένου είναι τόσο µεγάλη, που µία γενική τεχνική δεν µπορεί να εφαρµοστεί σε όλες. Από την άλλη πλευρά, οι σχεδιαστές άσχετα από την τεχνική που ακολουθούν, όλοι τείνουν να ακολουθούν τις προσωπικές τους απόψεις σχετικά µε την εφαρµογή που αναπτύσσουν. Έτσι, µπορούµε να πούµε ότι το να σχεδιάσει κάποιος τη δοµή και τη µορφή ενός κόµβου δεν είναι κάτι που γίνεται ακολουθώντας µια προκαθορισµένη τεχνική βηµάτων. Αντίθετα, πρόκειται για µια ανθρώπινη διαδικασία που κινείται ανάµεσα σε εγκεφαλικές διεργασίες και προκαθορισµένα βήµατα, είναι δηλαδή µια πολύπλοκη διαδικασία. Συνεπώς, µπορούµε να πούµε ότι οι χρυσοί κανόνες προσφέρουν βοήθεια, αλλά είναι απαραίτητη και η ανθρώπινη παρέµβαση πάνω σε αυτούς, έτσι ώστε να έχουµε επιτυχή αποτελέσµατα. Μεθοδολογία Σχεδίασης 36

37 4. Τεχνολογίες διαδικτύου Όλες οι διεργασίες στον Παγκόσµιο Ιστό βασίζονται στο µοντέλο πελάτη εξυπηρετητή, σύµφωνα µε το οποίο οι χρήστες του Ιστού αποστέλλουν τις αιτήσεις τους σε κάποιο web-server και αυτός µε τη σειρά του επεξεργάζεται την αίτηση, δηµιουργεί µια απάντηση και τη στέλνει πίσω στον κάθε χρήστη. Στατική και δυναµική πληροφορία Σε περίπτωση που οι χρήστες ζητούν µια απλή HTML σελίδα, τότε ο server απλά στέλνει το περιεχόµενο της σελίδας στους χρήστες. Αν όµως πρόκειται για πιο σύνθετες περιπτώσεις, για παράδειγµα µια φόρµα µε στοιχεία που πρέπει να καταχωρηθούν, τότε ο web-server δέχεται τα στοιχεία, τα διαχειρίζεται κατάλληλα, και στη συνέχεια απαντά. Η διαδικασία επεξεργασίας των στοιχείων µπορεί να περιλαµβάνει έλεγχο για την ορθότητα των στοιχείων, αποθήκευση σε αρχείο ή σε βάση δεδοµένων, αποστολή τους µε σε κάποια διεύθυνση, δηµιουργία µιας απάντησης για το χρήστη κ.ά. Web και Βάσεις εδοµένων Καθώς όλο και πιο συχνά πολλά από τα δεδοµένα που δηµοσιεύονται στον Ιστό βρίσκονται σε Β, είναι απαραίτητο οι ιστοσελίδες να µπορούν να αντλούν στοιχεία από τις Β µε αυτόµατο τρόπο και να τις παρουσιάζουν στο χρήστες, χωρίς να χρειάζεται ο διαχειριστής να επεµβαίνει σε κάθε περίπτωση. Τα πλεονεκτήµατα από τη χρήση Β είναι πολλαπλά: ιατήρηση πληροφορίας που αυξάνει συνεχώς π.χ. τα στοιχεία των χρηστών ενός Web site. Οργάνωση πληροφορίας σε κατηγορίες π.χ. τα προϊόντα µιας εταιρίας µπορούν να ταξινοµηθούν ανάλογα µε τον τύπο τους. Εξαγωγή κανόνων και πληροφοριών από τα οργανωµένα δεδοµένα π.χ. από τα στατιστικά των χρηστών ενός site µπορούµε να εξάγουµε πληροφορία για το κοινό στο οποίο απευθύνεται και ανάλογα να τροποποιήσουµε τις πληροφορίες που παρουσιάζει. Ευκολία στην αναζήτηση πληροφοριών π.χ. σε ένα ηλεκτρονικό βιβλιοπωλείο. ηµιουργία "δυναµικών" sites που προσαρµόζουν τη µορφή τους π.χ. ανάλογα µε το profile του χρήστη Αρχιτεκτονική εφαρµογών του ΠΙ Στις µέρες µας έχει επικρατήσει πλέον το µοντέλο ανάπτυξης εφαρµογών ιστού που εµφανίζουν δυναµικό περιεχόµενο από Βάσεις εδοµένων και ταυτόχρονα διαθέτουν ενεργά χαρακτηριστικά ώστε να µπορούν να αντιλαµβάνονται τις κινήσεις των χρηστών και να προσαρµόζουν τα περιεχόµενα σε αυτές. Για το σκοπό η αρχιτεκτονική πελάτη-εξυπηρετητή έχει αναλυθεί σε επιµέρους επίπεδα σε καθένα από τα οποία γίνεται επεξεργασία της πληροφορίας µε χρήση των κατάλληλων τεχνολογιών. Σε κάθε περίπτωση ο φόρτος επεξεργασίας µοιράζεται ανάλογα µεταξύ του server και του client. Από την ανάλυση αυτή έχουν προκύψει οι εξής αρχιτεκτονικές: Αρχιτεκτονική 2-επιπέδων Μια εφαρµογή που τρέχει στον client συνδέεται απευθείας µε τη Β που βρίσκεται στο server. Στην περίπτωση αυτή ο φόρτος µεταφέρεται όλος στον client και η µόνη επιβάρυνση στο server οφείλεται στις αποθηκευµένες στη Β διεργασίες. Τεχνολογίες διαδικτύου 37

38 Database Server Εφαρµογή στον Client Driver Driver Database Server Αρχιτεκτονική 3-επιπέδων Η εφαρµογή που τρέχει στον server συνδέεται µε τη Β και αναλαµβάνει όλη την επεξεργασία των δεδοµένων και την εξυπηρέτηση του client. Αν όλη η επεξεργασία γίνεται στον server τότε έχουµε την περίπτωση του αδύναµου πελάτη (thin-client) που κάνει απλά επισκόπηση των πληροφοριών που του στέλνει ο server. Στην περίπτωση αυτή περιλαµβάνονται όλες οι browsers που χρησιµοποιούνται από τα κινητά τηλέφωνα και άλλες συσκευές µικρής υπολογιστικής ικανότητας (palmtops, κλπ). Driver Database Server Εφαρµογή στον Client Εφαρµογή στο Server Driver Database Server Αρχιτεκτονική πολλών επιπέδων Ο φόρτος της εφαρµογής διαµοιράζεται σε περισσότερους από ένα web-servers που προσφέρουν εξειδικευµένες υπηρεσίες, επικοινωνούν µεταξύ τους και ανταλλάσσουν αποτελέσµατα ώστε να εξυπηρετήσουν τους clients. Είναι η πιο σύγχρονη τάση στις αρχιτεκτονικές ιστού καθώς αντί οι οργανισµοί να παράγουν µόνοι τους τις υπηρεσίες που χρειάζονται, προτιµούν να τις «αγοράζουν» από τρίτους που έχουν την απαραίτητη τεχνογνωσία και τις διαθέτουν ως υπηρεσίες ιστού (web services). Με τον τρόπο αυτό η εξυπηρέτηση της αίτησης ενός χρήστη µπορεί να περιλαµβάνει τη χρήση υπηρεσιών από περισσότερους από έναν παροχείς και συνεπώς θα κοστολογείται ανάλογα. Τεχνολογίες διαδικτύου 38

39 Αν περιοριστούµε στην πιο διαδεδοµένη αρχιτεκτονική, αυτή των τριών επιπέδων, η οποία µπορεί να αναπτυχθεί εύκολα από ένα οργανισµό χωρίς τη χρήση εξωτερικών υπηρεσιών, έχουµε τα ακόλουθα τµήµατα που πρέπει να αναπτυχθούν: Η διεπαφή µε το χρήστη. Η βάση δεδοµένων. Η εφαρµογή που θα συνδέει τα δύο προηγούµενα. Καθώς η σχεδίαση και υλοποίηση της Β µιας εφαρµογής είναι µια ολόκληρη θεµατική ενότητα, θα περιοριστούµε στη συνέχεια στην ανάλυση των τεχνολογιών που υπάρχουν για την ανάπτυξη της διεπαφής µε το χρήστη και της εφαρµογής. Θα δούµε ότι δεν υπάρχει σαφής διαχωριστική γραµµή ανάµεσα στις δύο δραστηριότητες καθώς οι ίδιες τεχνολογίες µπορούν να χρησιµοποιηθούν µε διαφοροποιήσεις- και στη µεριά του client και στη µεριά του server. Στην συνέχεια θα ακολουθήσει µια επισκόπηση των τεχνολογιών που χρησιµοποιούνται για την ανάπτυξη εφαρµογών στον Παγκόσµιο Ιστό Στατικές τεχνολογίες - HTML Όπως αναφέρθηκε και στα προηγούµενα κεφάλαια η HTML είναι η ιδανική λύση για την ανάπτυξη ιστοσελίδων µε στατικό περιεχόµενο. Όπως φάνηκε όµως, η HTML δεν επαρκεί για να χειριστεί τα περιεχόµενα των σελίδων και τις αντιδράσεις των χρηστών µε πιο δυναµικό τρόπο. Η προσπάθειες για επέκταση των δυνατοτήτων της HTML ξεκίνησαν από τις ίδιες τις εταιρίες που κατασκεύαζαν του browsers έτσι ώστε να κάνουν πιο ελκυστικό το περιβάλλον του ιστού για τους χρήστες. Για το σκοπό αυτό αναπτύχθηκαν γλώσσες όπως η Dynamic HTML που πρόσθεσαν κάποια ενεργά χαρακτηριστικά στις σελίδες. Με την ενσωµάτωση εντολών DHTML στον κώδικα µιας HTML σελίδας οι browsers µπορούν πλέον να ανιχνεύουν την κίνηση του ποντικιού πάνω από µια εικόνα ή από κάποιο τµήµα κειµένου, τα κλικ του ποντικιού κλπ και να δηµιουργούν τα κατάλληλα εφέ κίνησης. Εκτός όµως από την ανάγκη για ανίχνευση γεγονότων και είναι απαραίτητη και η πιο σύνθετη επεξεργασία δεδοµένων όπως ο έλεγχος των στοιχείων που δίνει ο χρήστης σε µια φόρµα, οι υπολογισµοί, η αποθήκευση αποτελεσµάτων και η άντληση στοιχείων από µια πηγή δεδοµένων Γλώσσες σεναρίων Scripting languages Οι γλώσσες σεναρίων αναπτύχθηκαν και αυτές από τις εταιρίες που φτιάχνουν web browsers µε σκοπό να επεκτείνουν την HTML. Οι δύο γλώσσες σεναρίων που επικράτησαν είναι η JavaScript της Netscape και η VBScript της Microsoft. Και οι δύο έχουν αντιγράψει πολλά χαρακτηριστικά αντικειµενοστραφών γλωσσών προγραµµατισµού χωρίς όµως να τις πλησιάσουν σε δυνατότητες, πληρότητα και πολυπλοκότητα. Και οι δύο γλώσσες περιλαµβάνουν ένα σύνολο εντολών δοµηµένων σε ένα αντικειµενοστραφές µοντέλο που περιστρέφεται γύρω από δύο βασικά αντικείµενα: το έγγραφο και το browser και από ένα συµπληρωµατικό αντικείµενο: το γεγονός (event) που είναι υπεύθυνο για την πυροδότηση των εντολών. Καθώς δεν είναι γλώσσες προγραµµατισµού αλλά γλώσσες σεναρίου, ο κώδικάς τους γράφεται απευθείας στον HTML κώδικα µέσα σε προκαθορισµένες ετικέτες ώστε να µπορεί να τον διακρίνει ο browser. Σύµφωνα µε την αρχική τους σχεδίαση ο κώδικας δεν µεταγλωττίζεται αλλά εκτελείται απευθείας από τον browser. Σε πιο πρόσφατες εκδόσεις τους οι γλώσσες σεναρίου έχουν εµπλουτιστεί σε δυνατότητες και ενδέχεται να εκτελούνται και εκτός browser και συγκεκριµένα στο server Γλώσσες προγραµµατισµού Με τη χρήση ορισµένων από τις πιο γνωστές γλώσσες προγραµµατισµού µπορούµε να δηµιουργήσουµε προγράµµατα, να τα µεταγλωττίσουµε και στη συνέχεια να τα χρησιµοποιήσουµε στις σελίδες µας, καλώντας τα µέσα στον κώδικα HTML. Σε αντίθεση µε τις γλώσσες σεναρίου δεν έχουµε των κώδικα µέσα στην HTML παρά µόνο µια κλήση στο µεταγλωττισµένο πρόγραµµα. Έχουν αναπτυχθεί αρκετές πλατφόρµες ανάπτυξης και διάθεσης τέτοιων εφαρµογών, ενώ οι δύο επικρατέστερες είναι: το.net της Microsoft και η Java της Sun. Στην περίπτωση του.νετ η ανάπτυξη γίνεται συνήθως σε Visual Basic ή C# και η διάθεση µε τη µορφή components, ενώ στη Java η διάθεση είναι είτε µε τη µορφή applets είτε µε τη µορφή servlets (applications). Τεχνολογίες διαδικτύου 39

40 Τα components και τα applets είναι µεταγλωττισµένα προγράµµατα που καλούνται µέσα από τον HTML κώδικα ως «µαύρα κουτιά» µε συγκεκριµένες διαστάσεις και σε καθορισµένη θέση και εκτελούν συγκεκριµένες διαδικασίες. Οι δυνατότητές τους είναι πολύ περισσότερες από αυτές που επιτυγχάνουµε µε τις γλώσσες σεναρίων: µπορούν να µιλήσουν µε Β, να αποθηκεύσουν πληροφορίες σε αρχεία στο server ή στον υπολογιστή του χρήστη, να επικοινωνήσουν µε άλλες εφαρµογές ή υπηρεσίες ιστού κλπ. Απαιτούν ισχυρό υπολογιστή στην µεριά του client για να είναι αποδοτικές καθώς µεγάλο µέρος της επεξεργασίας µεταφέρεται στον client. Στην περίπτωση που θέλουµε να µεταφέρουµε το φόρτο στο server απαλλάσσοντας πλήρως τον client, οι ίδιες πλατφόρµες προσφέρουν εναλλακτικά τις λύσεις των servlets και server side components αντίστοιχα. Όλος ο κώδικας της εφαρµογής βρίσκεται στα µεταγλωττισµένα προγράµµατα στο server και αρκεί µια κλήση των προγραµµάτων αυτών από το browser µε τις κατάλληλες παραµέτρους, ώστε να ξεκινήσει η λειτουργία τους και να σταλούν στον client τα αποτελέσµατα Server side scripting Για να διευκολύνουν και τους χρήστες των scripting γλωσσών, οι πλατφόρµες αυτές έδωσαν µια ακόµη διάσταση στους web servers. Οι web servers πλέον υποστηρίζουν την εκτέλεση script κώδικα στη µεριά τους, απαλλάσσοντας έτσι τον client από το φόρτο επεξεργασίας αλλά και όσους αναπτύσσουν web εφαρµογές από την πολυπλοκότητα µιας γλώσσας προγραµµατισµού. Έτσι η πλατφόρµα.net δηµιούργησε τις Active Server Pages που είναι ουσιαστικά HTML σελίδες µε κώδικα VBScript και η Java τις Java Server Pages, επίσης HTML σελίδες µε προσθήκη κώδικα JavaScript που όµως εκτελούνται στο server και στις δύο περιπτώσεις. Η επιλογή της γλώσσας στην οποία θα γραφτεί το server-side script εξαρτάται από τον web server και το τι υποστηρίζει. Οι ASPs απαιτούν web server της Microsoft IIS, ενώ οι JSPs τρέχουν σε αρκετούς web servers (Apache Tomcat, Microsoft IIS κλπ). Μια εναλλακτική και αρκετά διαδεδοµένη λύση (open source) είναι η χρήση του Apache Tomcat και της γλώσσας PHP, συχνά σε συνδυασµό µε την open source Β mysql Client vs Server Side Στο σηµείο αυτό πρέπει να τονίσουµε το βασικό χαρακτηριστικό των εφαρµογών ιστού είναι ότι µπορούν να εκτελούνται είτε στον browser είτε στο server ορίζοντας διαφορετικές τεχνολογίες µε διαφορετικές δυνατότητες σε κάθε περίπτωση. Client Side Processing Οι ιστοσελίδες µπορεί να περιέχουν: HTML markup, JavaScript ή VBScript, Java applets, Αντικείµενα ActiveX Οι browsers είναι σε θέση να αναγνωρίζουν τα ενεργά αυτά στοιχεία - προγράµµατα και να τα εκτελούν. Τεχνολογίες διαδικτύου 40

41 Όπως αναφέρθηκε, στην περίπτωση του client-side scripting, ο κώδικας είτε είναι JavaScript είτε VBScript ενσωµατώνεται στην HTML σελίδα και εκτελείται στο browser. Οι δυνατότητες που δίνει αυτή η µορφή scripting περιορίζονται στην ανίχνευση γεγονότων (event detection), στον έλεγχο ορθότητας τιµών (validation) και στην εκτέλεση υπολογισµών(calculation). Οι συνηθέστεροι τρόποι χρήσης του µοντέλου αυτού είναι: η αντίδραση σε γεγονότα που προκαλούν οι χρήστες (πατήµατα κουµπιών, κίνηση ποντικιού κλπ) και στα χαρακτηριστικά των χρηστών (browser που χρησιµοποιεί, ανίχνευση τοποθεσίας χρήστη και ώρας ή εποχής πρόσβασης κλπ), ο έλεγχος ορθότητας των στοιχείων της φόρµας πριν αυτά αποσταλούν στο server (form validation), η παραγωγή µηνυµάτων για τους χρήστες. Server Side Processing Στην περίπτωση αυτή το περιεχόµενο των ιστοσελίδων δεν είναι προκαθορισµένο, αλλά προκύπτει δυναµικά µε βάση λειτουργίες του web server. Οι λειτουργίες αυτές καθορίζονται από τις ενεργές σελίδες οι οποίες περιέχουν HTML αλλά και στοιχεία που παράγονται κατά την κλήση (on-the-fly). Μια σύγκριση των δύο προσεγγίσεων µπορεί να συνοψιστεί στα εξής: Server Side προσεγγίσεις : Κατάλληλες για δυναµικό περιεχόµενο Μεγάλες δυνατότητες επεξεργασίας ανάλογα µε την ισχύ του Server υνατότητα ελέγχου clients µέσω χρήση ελάχιστου συνόλου κοινών δυνατοτήτων και ευρέως υποστηριζόµενων χαρακτηριστικών των browsers Επιθυµητές για δυναµική / παραµετρική εµφάνιση περιεχοµένου. Ακόµα όταν η επεξεργασία είναι απαραίτητο να γίνει στο server (π.χ. απαιτείται επικοινωνία µε Β..) Επίσης όταν η έµφαση είναι στην επεξεργασία και ο client αρκεί να εµφανίσει µόνο το αποτέλεσµα. Client Side προσεγγίσεις Αρκετά ταχύτερες λόγω τοπικής εκτέλεσης Μεγάλες δυνατότητες και ευελιξία Οικονοµικότερες δεν απαιτούνται εξυπηρετητές µε δυνατότητες εκτέλεσης Server Pages JSP, ASP κλπ. Πρόβληµα: Εξάρτηση από τις δυνατότητες του εκάστοτε client ιδιαίτερα αναφορικά µε εκτέλεση πολύπλοκων εφαρµογών Επιθυµητές όταν πολύπλοκες λειτουργίες πρέπει να εκτελούνται στους Clients (π.χ. Παιχνίδια) Ακόµα όταν η επεξεργασία παραµέτρων στο Server αποτελεί επιβάρυνση (π.χ. Περιπτώσεις άµεσου ελέγχου των δεδοµένων που δίνει ο χρήστης) Επίσης, στην περίπτωση του Client Side Scripting, η πιο ευρέως χρησιµοποιούµενη τεχνολογία είναι αυτή του προγραµµατισµού σε JavaScript καθώς υποστηρίζεται από την πλειοψηφία των browsers. Αντίθετα η VBScript χρησιµοποιείται κυρίως σε Server Side εφαρµογές και σε συνδυασµό µε άλλες τεχνολογίες και προϊόντα της Microsoft (π.χ. ASP, Microsoft SQL Server). Τεχνολογίες διαδικτύου 41

42 5. JavaScript H JavaScript είναι µια scripting γλώσσα, η οποία αναπτύχθηκε από τη Netscape για να επεκτείνει τις δυνατότητες της HTML και αρχικά λειτουργούσε µόνο στο browser της εταιρίας. Στη συνέχεια υποστηρίχθηκέ και από τους υπόλοιπους browsers οι οποίοι πρόσθεσαν τις δικές τους επεµβάσεις στη γλώσσα (JScript της Microsoft για Internet Explorer). Με τη JavaScript µπορείς εύκολα να αναπτύξεις µια interactive σελίδα (µια σελίδα δηλαδή που αλληλεπιδρά στον εαυτό της). Η εισαγωγή αυτή δείχνει τι µπορεί να γίνει µέσω της JavaScript - και πιο σηµαντικό πώς µπορεί να γίνει. Να τονίσουµε ότι παρά την οµοιότητα του ονόµατος η JavaScript δεν έχει καµία σχέση µε τη Java τόσο όσο αφορά τη λειτουργικότητα και τη δοµή όσο αφορά και το δηµιουργό (η Java είναι δηµιούργηµα της Sun) Απαιτήσεις της JavaScript Τι χρειάζεται ώστε να τρέξουν scripts γραµµένα σε JavaScript; Ένας browser που υποστηρίζει JavaScript - παραδείγµατος χάριν το Netscape Navigator (από την έκδοση 2.0) ή ο Microsoft Internet Explorer (MSIE). Σχεδόν όλοι οι browsers πλέον υποστηρίζουν τη JavaScript µε αποτέλεσµα, πολλοί χρήστες να χρησιµοποιούν scripts γραµµένα σε JavaScript στις ιστοσελίδες τους. Εισάγοντας JavaScript σε µια HTML σελίδα Ο κώδικας JavaScript εισάγεται απευθείας στην HTML σελίδα. Για να δείτε πώς αυτό δουλεύει, θα κοιτάξουµε ένα απλό παράδειγµα: <html> <body> <br> Αυτό είναι ένα απλό κανονικό HTML έγγραφο. <br> <script language="javascript"> document.write("αυτό είναι JavaScript!") </script> <br> Ξανά σε HTML. </body> </html> Από πρώτη µατιά φαίνεται σαν ένα κανονικό HTML έγγραφο. Το µόνο καινούργιο µέρος είναι το: <script language="javascript"> document.write("αυτό είναι JavaScript!") </script> Αυτό λέγεται JavaScript. Για να δείτε αυτό το script να δουλεύει, σώστε τον πάνω κώδικα σαν ένα απλό HTML έγγραφο και ανοίξτε το σε ένα JavaScript-enabled browser. Εδώ είναι το αποτέλεσµα που δηµιουργείται από το αρχείο (αν χρησιµοποιείτε έναν JavaScript-enabled browser πρέπει να δείτε 3 γραµµές αµέσως πιο κάτω σαν αποτέλεσµα): Αυτό είναι ένα απλό κανονικό HTML έγγραφο. Αυτό είναι JavaScript! Ξανά σε HTML. Οτιδήποτε µεταξύ <script> και </script> µεταφράζεται σαν JavaScript κώδικας. Εδώ βλέπετε την χρήση του document.write() - µία από τις πιο σηµαντικές εντολές στη JavaScript προγραµµατισµό. document.write() χρησιµοποιείται για να γράψουµε κάτι στο πραγµατικό έγγραφο (σε αυτή τη περίπτωση, το HTML έγγραφο). Έτσι το µικρό µας JavaScript πρόγραµµα γράφει Αυτό είναι JavaScript! στο HTML έγγραφο. Η γλώσσα JavaScript 42

43 5.2. Non-JavaScript browsers Πώς φαίνεται η σελίδα µας όταν ο browser δεν καταλαβαίνει JavaScript; Ένας non-javascript browser δεν ξέρει τι σηµαίνει <script>. Αγνοεί το <script> και βγάζει όλο τον ακόλουθο κώδικα λες και είναι κανονικό κείµενο. Αυτό σηµαίνει ότι ο χρήστης θα δει τον JavaScript κώδικα µέσα στο HTML έγγραφο. Αυτό βεβαίως δεν ήταν ο σκοπός µας. Υπάρχει τρόπος για να κρύψουµε τον JavaScript κώδικα από παλιούς browsers. Θα χρησιµοποιήσουµε τα HTML comments <!-- -->. Ο νέος µας κώδικας θα δείχνει ως εξής: <html> <body> <br> Αυτό είναι ένα απλό κανονικό HTML έγγραφο. <br> <script language="javascript"> <!-- Κρύβουµε τον κώδικα document.write("αυτό είναι JavaScript!") // --> </script> <br> Ξανά σε HTML. </body> </html> Το αποτέλεσµα σε ένα non-javascript browser θα είναι το εξής: Αυτό είναι ένα απλό κανονικό HTML έγγραφο. Ξανά σε HTML. Χωρίς τα HTML-comments το αποτέλεσµα σε ένα non-javascript browser θα ήταν: Αυτό είναι ένα απλό κανονικό HTML έγγραφο. document.write("αυτό είναι JavaScript!") Ξανά σε HTML. Σηµειώστε ότι δεν µπορείτε να κρύψετε τον JavaScript κώδικα τελείως. Αυτό που κάνουµε εδώ είναι να εµποδίσουµε το λάθος αποτέλεσµα του κώδικα σε παλιούς browsers - αλλά ο χρήστης µπορεί να δει τον κώδικα επιλέγοντας την λειτουργία 'View document source' του browser που χρησιµοποιεί. ΕΝ υπάρχει τρόπος να εµποδίσουµε κάποιον από το να δει τον πηγαίο κώδικα (µε σκοπό να µη δει πώς γίνεται κάτι) Events - Γεγονότα Τα γεγονότα (Events) και οι χειριστές γεγονότων (event handlers) είναι ένα πολύ σηµαντικό µέρος στον JavaScript προγραµµατισµό. Τα Events προκαλούνται από τις πράξεις του χρήστη. Αν ο χρήστης πατήσει ένα κουµπί, τότε συµβαίνει ένα Click-event. Αν ο δείκτης του mouse κινηθεί πάνω από µια διεύθυνση (link), τότε συµβαίνει ένα MouseOver-event. Υπάρχουν πολλά διαφορετικά events. Θέλουµε το JavaScript πρόγραµµά µας να αντιδρά σε συγκεκριµένα events. Αυτό µπορεί να γίνει µε την βοήθεια των event-handlers (χειριστές γεγονότων). Ένα κουµπί µπορεί να εµφανίζει ένα pop-up παράθυρο όταν πατιέται. Αυτό σηµαίνει ότι το pop-up παράθυρο πρέπει να εµφανιστεί σαν απάντηση στο Click-event. Ο event-handler που χρειαζόµαστε λέγεται onclick. Αυτός λέει στον υπολογιστή τι να Η γλώσσα JavaScript 43

44 γίνει όταν συµβεί το ανάλογο event. Ο επόµενος κώδικας δείχνει ένα απλό παράδειγµα του eventhandler onclick: <form> <input type="button" value="πάτησε µε" onclick="alert('καληµέρα')"> </form> Υπάρχουν πολλά νέα πράγµατα σε αυτόν τον κώδικα - γι' αυτό ας τα δούµε βήµα- βήµα. Μπορείτε να δείτε ότι σχεδιάζουµε µία φόρµα µε ένα κουµπί (αυτό γίνεται µε HTML). Το νέο µέρος είναι onclick="alert('καληµέρα')" µέσα στο <input>. Όπως είπαµε ήδη, αυτό καθορίζει τι θα συµβεί όταν το κουµπί πατηθεί. Έτσι αν ένα Click-event συµβεί, ο υπολογιστής θα εκτελέσει το alert('καληµέρα'). Αυτό είναι JavaScript κώδικας (Σηµειώστε ότι δεν χρησιµοποιούµε το <script> σε αυτή τη περίπτωση). Η εντολή alert() σου επιτρέπει να δηµιουργείς popup παράθυρα. Μέσα στη παρένθεση πρέπει να βάλετε το κείµενο του pop-up παραθύρου. Σε αυτή τη περίπτωση είναι 'Καληµέρα'. Έτσι το script δηµιουργεί ένα παράθυρο µε το κείµενο 'Καληµέρα' όταν ο χρήστης πατήσει το κουµπί. Ένα πράγµα που µπερδεύει λίγο: Στην εντολή document.write() χρησιµοποιήσαµε δύο άνω τελείες " και στο συνδυασµό alert() χρησιµοποιήσαµε µία άνω τελεία ' - γιατί; Βασικά µπορούµε να χρησιµοποιήσουµε και τα δύο. Όµως στο τελευταίο παράδειγµα γράψαµε onclick="alert('καληµέρα')" - βλέπετε ότι χρησιµοποιούνται και τα δύο σύµβολα. Αν γράφαµε onclick="alert("καληµέρα")" ο υπολογιστής θα µπερδευόταν µιας και δεν είναι εµφανές ποιο µέρος ανήκει στο onclick event-handler και ποίο όχι. Γι' αυτό πρέπει να εναλλαχθούν οι δύο µε µία άνω τελεία σε αυτή τη περίπτωση. εν έχει σηµασία µε ποια σειρά θα χρησιµοποιηθούν τα δύο σύµβολα. Αυτό σηµαίνει ότι θα µπορούσα επίσης να γράψω onclick='alert("καληµέρα")' και να έχω το ίδιο αποτέλεσµα. Υπάρχουν πολλοί διαφορετικοί event-handlers που µπορούν να χρησιµοποιηθούν. Θα µάθετε µερικούς καθώς προχωράτε - µα όχι όλους. Απευθυνθείτε σε συγκεκριµένα έγγραφα αν θέλετε να ξέρετε όλους τους event-handlers που υπάρχουν. Αν χρησιµοποιείτε το Netscape Navigator το popup παράθυρο θα περιέχει το κείµενο JavaScript alert στο caption Bar (στο πάνω πάνω αριστερά µέρος του παραθύρου). Αυτός είναι περιορισµός ασφαλείας. Μπορείτε να δηµιουργήσετε ένα παρόµοιο popup παράθυρο µε την εντολή prompt(). Αυτό το παράθυρο δέχεται και τιµή που καθορίζει ο χρήστης για να χρησιµοποιηθεί αργότερα απ' το script. Π.χ. µπορεί αν χρησιµοποιηθεί σε ένα script που µιµείται ένα σύστηµα προστασίας και να ρωτά για ένα συγκεκριµένο password. Το κείµενο στο popup παράθυρο δείχνει ότι το παράθυρο έρχεται από τον browser και όχι από το Operating system. Μιας και το Caption Bar είναι περιορισµός ασφαλείας, δεν µπορεί να αλλάξει Functions - Συναρτήσεις Χρησιµοποιούµε συναρτήσεις (functions) στα περισσότερα scripts. Οι συναρτήσεις (functions) είναι ένας τρόπος για να ενσωµατώνουµε πολλές εντολές µαζί. Το ακόλουθο script βγάζει τρεις φορές το ίδιο κείµενο: <html> <script language="javascript"> <!-- Κρύβουµε τον πηγαίο κώδικα document.write("καλωσήρθατε στη σελίδα!<br>"); document.write("αυτό είναι JavaScript!<br>"); document.write("καλωσήρθατε στη σελίδα!<br>"); document.write("αυτό είναι JavaScript!<br>"); document.write("καλωσήρθατε στη σελίδα!<br>"); document.write("αυτό είναι JavaScript!<br>"); // --> </script> </html> Η γλώσσα JavaScript 44

45 Αυτό θα γράψει το κείµενο Καλωσήρθατε στη σελίδα! 3 φορές Αυτό είναι JavaScript! Κοιτάχτε τον πηγαίο κώδικα - γράφοντας τον κώδικα τρεις φορές βγάζει το σωστό αποτέλεσµα. Για µεγαλύτερη αποτελεσµατικότητα θα µπορούσαµε να χρησιµοποιήσουµε τον ακόλουθο κώδικα: <html> <script language="javascript"> <!-- hide function myfunction() { document.write("καλωσήρθατε στη σελίδα!<br>"); document.write("αυτό είναι JavaScript!<br>"); } myfunction(); myfunction(); myfunction(); // --> </script> </html> Σε αυτό το script προσδιορίζουµε µία function. Αυτό γίνεται από τις γραµµές: function myfunction() { document.write("καλωσήρθατε στη σελίδα!<br>"); document.write("αυτό είναι JavaScript!<br>"); } Οι εντολές µέσα στα { } ανήκουν στην λειτουργία myfunction() που δηµιούργησα. Αυτό σηµαίνει ότι τα δύο document.write() ενοποιούνται, γίνονται ο ορισµός της function και µπορούν να εκτελεστούν αν καλέσουµε την ανάλογη function. Στο παράδειγµά µας, έχουµε τρεις κλίσεις του function myfuction. Βλέπετε ότι γράφουµε τρεις φορές myfunction() ακριβώς κάτω από τον ορισµό της function. Αυτό σηµαίνει ότι το περιεχόµενο της function εκτελείται τρεις φορές. Αυτό είναι ένα πολύ εύκολο παράδειγµα µιας function. Ίσως αναρωτιέστε γιατί οι functions είναι τόσο σηµαντικές. Καθώς διαβάζετε αυτή την εισαγωγή θα συνειδητοποιήσετε τα πλεονεκτήµατα µιας function. Ειδικά η ρύθµιση µεταβλητών κάνει τα scripts πιο εύκαµπτα - θα καταλάβετε τι είναι αυτό αργότερα. Οι functions µπορούν επίσης να χρησιµοποιηθούν σε συνδυασµό µε event-handlers. Κοιτάξτε το παρακάτω παράδειγµα: <html> <head> <script language="javascript"> <!-- Κρύβουµε τον κώδικα function calculation() { var x= 12; var y= 5; var result= x + y; alert(result); } // --> </script> Η γλώσσα JavaScript 45

46 </head> <body> <form> <input type="button" value="calculate" onclick="calculation()"> </form> </body> </html> Το κουµπί καλεί την function calculation(). Η function αυτή κάνει συγκεκριµένους υπολογισµούς. Για αυτό χρησιµοποιούµε τις µεταβλητές x, y και result. Μπορούµε να καθορίσουµε την τιµή της µεταβλητής χρησιµοποιώντας την εντολή var. Οι µεταβλητές µπορούν να χρησιµοποιηθούν για να αποθηκεύσουν διαφορετικού είδους τιµές - όπως νούµερα, κείµενο, κλπ. Η γραµµή var result= x + y; λέει στον browser να δηµιουργήσει µια µεταβλητή result και να αποθηκεύσει σ' αυτή το αποτέλεσµα της πράξης x + y (δηλαδή ). Μετά από αυτό, η µεταβλητή result παίρνει την τιµή 17. Η εντολή alert(result) είναι σε αυτή την περίπτωση ίδια µε την εντολή alert(17). Αυτό σηµαίνει ότι το αποτέλεσµα είναι ένα popup παράθυρο µε την τιµή 17 πάνω του Ιεραρχία JavaScript Η JavaScript οργανώνει όλα τα στοιχεία µιας web σελίδας σε µια ιεραρχία. Κάθε στοιχείο της σελίδας θεωρείται αντικείµενο. Κάθε αντικείµενο έχει τις δικές του ιδιότητες (properties) και µεθόδους (methods). Με τη βοήθεια του JavaScript µπορούµε εύκολα να διαχειριστούµε τα αντικείµενα αφού πρώτα καταλάβουµε πως αντιλαµβάνεται η JavaScript ένα έγγραφο HTML. Ο ακόλουθος κώδικας είναι µια απλή HTML σελίδα. Θα το χρησιµοποιήσουµε ως παράδειγµα για να δείξουµε την ιεραρχική δοµή των ιστοσελίδων και το µοντέλο διαχείρισής τους από την HTML. <html> <head> <title>my homepage </head> <body bgcolor=#ffffff> <center> <img src="home.gif" name="pic1" width=200 height=100> </center> <p> <form name="myform"> Name: <input type="text" name="name" value=""><br> <input type="text" name=" " value=""><br><br> <input type="button" value="push me" name="mybutton" onclick="alert('yo')"> </form> <p> <center> <img src="ruler.gif" name="pic4" width=300 height=15> <p> <a href="http://www.uni.gr/~my/"> My homepage</a> </center> </body> </html> Η γλώσσα JavaScript 46

47 Έχουµε δύο εικόνες, ένα link και µία φόρµα µε δύο πεδία κειµένου και ένα κουµπί. Από πλευράς JavaScript το παράθυρο του browser βλέπεται σαν ένα αντικείµενο, εν ονόµατι window. Το αντικείµενο windows περιέχει συγκεκριµένα στοιχεία, όπως η StatusBar. Μέσα στο παράθυρο, µπορούµε να φορτώσουµε ένα HTML έγγραφο (ή άλλου τύπου αρχείου - προς το παρόν, θα περιοριστούµε σε HTML αρχεία). Αυτή η σελίδα είναι το αντικείµενο document. Αυτό σηµαίνει ότι το αντικείµενο document αναπαριστά το HTML έγγραφο το οποίο βλέπει ο χρήστης εκείνη τη στιγµή. Το document είναι ένα πολύ σηµαντικό αντικείµενο στη JavaScript - θα χρησιµοποιείται συχνά. Οι ιδιότητες (properties) του document είναι για παράδειγµα το χρώµα του φόντου. Αλλά το πιο σηµαντικό είναι ότι όλα τα αντικείµενα HTML είναι ιδιότητες του document. Αντικείµενα είναι για παράδειγµα τα links, ή οι φόρµες. Η παρακάτω εικόνα παρουσιάζει την ιεραρχία του HTML εγγράφου που δείξαµε παραπάνω: Θέλουµε να µπορούµε να πάρουµε πληροφορίες για τα διάφορα αντικείµενα και να τα διαχειριστούµε. Γι' αυτό πρέπει να ξέρουµε πώς να έχουµε πρόσβαση στα διάφορα αντικείµενα. Για να απευθυνθούµε στην πρώτη εικόνα (image) πρέπει να ξεκινήσουµε απ' την αρχή. Το πρώτο αντικείµενο λέγεται document. Η πρώτη εικόνα της σελίδας αντιπροσωπεύεται από το images[0]. Αυτό σηµαίνει ότι µπορούµε να έχουµε πρόσβαση στην εικόνα τυπώνοντας document.images[0]. Αν για παράδειγµα θέλετε να ξέρετε τι τιµή έχει το πρώτο πεδίο κειµένου, πρέπει να σκεφτείτε ποια διαδροµή µας δίνει πρόσβαση σε αυτό το πεδίο κειµένου. Ξανά αρχίζουµε από το πάνω µέρος της ιεραρχίας. Ακολουθήστε το "µονοπάτι" που φτάνει στο elements[0] - βάλτε όλα τα ονόµατα που συναντάτε στη διάρκεια του µονοπατιού µαζί. Αυτό σηµαίνει ότι έχετε πρόσβαση στο πρώτο πεδίο κειµένου µε: document.forms[0].elements[0] Αλλά τώρα πώς θα ξέρουµε το εισαχθέν κείµενο; Για να µάθουµε τις ιδιότητες και τις µεθόδους ενός Η γλώσσα JavaScript 47

48 αντικειµένου, πρέπει να διαβάσουµε την ανάλογη JavaScript reference. Εδώ βλέπετε ότι ένα πεδίο κειµένου έχει και την ιδιότητα value. Η ιδιότητα αυτή αντιπροσωπεύει το κείµενο (την τιµή του πεδίου). Τώρα µπορείτε να διαβάσετε το κείµενο που εισήγαγε ο χρήστης: name= document.forms[0].elements[0].value; Η τιµή του κειµένου αποθηκεύεται στη µεταβλητή name. Μπορούµε τώρα να δουλέψουµε µε αυτή τη µεταβλητή. Για παράδειγµα, µπορούµε να δηµιουργήσουµε ένα popup παράθυρο alert("hi " + name). Αν η τιµή είναι 'Stefan' η εντολή alert("hi " + name) θα ανοίξει ένα popup παράθυρο µε το κείµενο 'Hi Stefan' Αν έχετε ιδιαίτερα µεγάλες σελίδες το να απευθύνεστε στα αντικείµενα µε αριθµούς µπορεί να σας µπερδέψει αρκετά - π.χ. document.forms[3].elements[17] ή µήπως ήταν document.forms[2].elements[18]; Για να αποφύγετε αυτό το πρόβληµα µπορείτε να ονοµάσετε τα διάφορα αντικείµενα. Ακολουθεί ένα τέτοιο παράδειγµα: <form name="myform"> Name: <input type="text" name="name" value=""><br>... Αυτό σηµαίνει ότι το forms[0] λέγεται επίσης myform. Αντί για elements[0] µπορούµε να χρησιµοποιήσουµε το name (όπως προσδιορίζει η ιδιότητα ΝΑΜΕ="" στο <input>). Έτσι αντί να γράφουµε name= document.forms[0].elements[0].value; µπορούµε να γράψουµε name= document.myform.name.value; Αυτό το κάνει πολύ πιο εύκολο - ειδικά όταν έχουµε µεγάλες σελίδες µε πολλά αντικείµενα. (Σηµειώστε ότι το αν τα γράµµατα είναι µικρά ή κεφαλαία έχει σηµασία - αυτό σηµαίνει ότι δεν µπορείτε να γράψετε myform αντί για myform). Πολλές ιδιότητες των αντικειµένων δεν περιορίζονται στην δυνατότητα να τις "διαβάζεις". Μπορείς κάλλιστα να ρυθµίσεις τις τιµές τους. Για παράδειγµα µπορείτε να γράψετε ένα νέο κείµενο το πεδίο κειµένου. Κοιτάχτε το παρακάτω παράδειγµα: Ιδού ο κώδικας του παραδείγµατος - το ενδιαφέρον κοµµάτι είναι µέσα στην ιδιότητα onclick-property στο δεύτερο <input>: <form name="myform"> <input type="text" name="input" value="μπλα, µπλα"> <input type="button" value="write" onclick= "document.myform.input.value= 'Καληµέρα!'; "> εν µπορώ να περιγράψω κάθε λεπτοµέρεια εδώ. Γίνεται όµως πολύ καθαρότερο αν προσπαθήσετε να καταλάβετε την ιεραρχία µε τη βοήθεια µιας JavaScript reference. Έχω γράψει εδώ ένα µικρό παράδειγµα. Εδώ µπορείτε να δείτε τη χρήση διάφορων αντικειµένων. Προσπαθήστε να καταλάβετε το script µε τη βοήθεια µιας reference. Πρώτα ας δούµε τον πηγαίο κώδικα: <html> <head> <title>objects</title> <script language="javascript"> <!-- hide function first() { // δηµιουργεί ένα popup παράθυρο µε το // κείµενο που έχει εισαχθεί στο πεδίο κειµένου alert("η τιµή του πεδίου κειµένου είναι: " + document.myform.mytext.value); } function second() { // Το function κοιτάζει το Check Box var mystring= "The checkbox is "; Η γλώσσα JavaScript 48

49 // Είναι το CheckBox τικαρισµένο ή όχι? if (document.myform.mycheckbox.checked) mystring+= "επιλεγµένο" else mystring+= "µη επιλεγµένο"; // output string alert(mystring); } // --> </script> </head> <body bgcolor=lightblue> <form name="myform"> <input type="text" name="mytext" value="μπλα, µπλα"> <input type="button" name="button1" value="κουµπί 1" onclick="first()"> <br> <input type="checkbox" name="mycheckbox" CHECKED> <input type="button" name="button2" value="κουµπί 2" onclick="second()"> </form> <p><br><br> <script language="javascript"> <!-- hide document.write("το χρώµα στο φόντο είναι: "); document.write(document.bgcolor + "<br>"); document.write("το κείµενο στο κουµπί 2 είναι:"); document.write(document.myform.button2.value); // --> </script> </body> </html> Το αντικείµενο location Εκτός από τα αντικείµενα window και document υπάρχει άλλο ένα σηµαντικό αντικείµενο: το location. Αυτό το αντικείµενο αντιπροσωπεύει την διεύθυνση του HTML εγγράφου που απεικονίζεται. Έτσι αν φορτώσατε την σελίδα τότε η τιµή του location.href είναι ίδια µε την πάνω διεύθυνση. Ακόµα πιο σηµαντικό είναι ότι µπορείτε να βάλετε νέες τιµές στο location.href. Αυτό το κουµπί, παραδείγµατος χάριν, ανοίγει ένα άλλο έγγραφο σε αυτό το παράθυρο: <form> <input type=button value="yahoo" onclick="location.href='http://www.yahoo.com'; "> </form> Η γλώσσα JavaScript 49

50 5.6. Frames ηµιουργώντας frames Μια ερώτηση που εµφανίζεται αρκετά συχνά είναι πώς µπορούν frames και JavaScript να συνεργαστούν. Πρώτα, θέλω να εξηγήσω τι είναι τα frames και σε τι χρησιµεύουν. Μετά απ' αυτό, θα δούµε πώς µπορούµε να συνδυάσουµε frames και JavaScript. Το παράθυρο του browser µπορεί να χωριστεί σε πολλά frames. Αυτό σηµαίνει ότι frame είναι µια τετράγωνη περιοχή µέσα σε ένα παράθυρο του browser. Κάθε frame δείχνει το δικό του έγγραφο (τις περισσότερες φορές HTML έγγραφα). Έτσι µπορείτε για παράδειγµα, να δηµιουργήσετε δυο frames. Στο πρώτο να φορτώσετε τη σελίδα της Netscape και στο δεύτερο τη σελίδα της Microsoft. Παρόλο που η δηµιουργία frames είναι υπόθεση της HTML, θέλω να περιγράψω µερικά βασικά πράγµατα. Για να δηµιουργήσουµε frames, χρειαζόµαστε δύο εντολές: <frameset> και <frame>. Ένα έγγραφο µε δύο frames µπορεί να δείχνει ως εξής: <html> <frameset rows="50%,50%"> <frame src="page1.htm" name="frame1"> <frame src="page2.htm" name="frame2"> </frameset> </html> Αυτό θα παράγει δύο frames. Μπορείτε να δείτε ότι χρησιµοποιούνται οι ιδιότητες rows στην εντολή <frameset>. Αυτό σηµαίνει ότι τα δύο frames είναι το ένα πάνω στο άλλο. Το πάνω frame απεικονίζει την σελίδα page1.htm και το κάτω τη σελίδα page2.htm Αν θέλετε να έχετε στήλες (columns) αντί για σειρές (rows), πρέπει να γράψετε cols αντί για rows στην εντολή <frameset>. Το "50%,50%" δείχνει πόσο µεγάλα θα είναι τα δύο έγγραφα. Μπορείτε επίσης να γράψετε "50%,*" αν δεν θέλετε να υπολογίσετε πόσο µεγάλο πρέπει να είναι το δεύτερο παράθυρο για να φτάσει το 100%. Μπορείτε επίσης να γράψετε το µέγεθος σε pixels, αν παραλείψετε το σύµβολο %. Κάθε frame παίρνει τη δικιά του name ιδιότητα στην εντολή <frame>. Αυτό θα µας βοηθήσει να έχουµε πρόσβαση στα frames µέσω JavaScript. Μπορείτε να έχετε πολλά <frameset> το ένα να φωλιάζεται µέσα στο άλλο. <frameset cols="50%,50%"> <frameset rows="50%,50%"> <frame src="cell.htm"> <frame src="cell.htm"> </frameset> <frameset rows="33%,33%,33%"> <frame src="cell.htm"> <frame src="cell.htm"> <frame src="cell.htm"> </frameset> </frameset> Μπορείτε να ρυθµίσετε το µέγεθος της διαχωριστικής γραµµής, αλλάζοντας την τιµή της ιδιότητας borderστο <frameset>. border=0 σηµαίνει ότι δεν θέλετε να υπάρχει διαχωριστική γραµµή. Frames και JavaScript Τώρα θέλουµε να ρίξουµε µια µατιά στο πώς η JavaScript 'βλέπει' τα frames σε ένα παράθυρο του browser. Γι' αυτό θα δηµιουργήσουµε δύο frames, όπως στο πρώτο παράδειγµα, του πρώτου µέρους. Έχουµε δει πως η JavaScript ταξινοµεί όλα τα στοιχεία του παραθύρου σε µια ιεραρχική σειρά. Το ίδιο γίνεται και µε τα frames. Η επόµενη εικόνα δείχνει την ιεραρχία του πρώτου παραδείγµατος: Η γλώσσα JavaScript 50

51 Στο πάνω µέρος της ιεραρχίας έχουµε το window. Το παράθυρο αυτό είναι χωρισµένο σε δύο frames. Το παράθυρο είναι ο γονέας (στην αγγλική γλώσσα parent) σε αυτή την ιεραρχία και τα δύο frames είναι τα παιδιά (children). ώσαµε στα δύο frames τα ονόµατα frame1 και frame2. µε τη βοήθεια των δύο ονοµάτων µπορούµε να ανταλλάσσουµε πληροφορίες µεταξύ των δύο frames. Ένα script πιθανώς θα πρέπει να λύσει το εξής πρόβληµα: ο χρήστης διαλέγει ένα link στο ένα frame - αλλά ο συγγραφέας θέλει η σελίδα να εµφανιστεί στο δεύτερο frame, κι όχι στο πρώτο. Αυτό µπορεί να χρησιµοποιηθεί για σελίδες Menu (εν ονόµατι MenuBars ή NavigationBars) όπου το ένα frame µένει συνέχεια το ίδιο και προσφέρει πολλά διαφορετικά links, για την περιπλάνηση µέσα στην σελίδα του συγγραφέα. Πρέπει να κοιτάξουµε τρεις περιπτώσεις: 1) Το parent window/frame αποκτά πρόσβαση στο child frame 2) Το child frame αποκτά πρόσβαση στο parent window/frame 3) Το child frame αποκτά πρόσβαση στο άλλο child frame Από την πλευρά του παραθύρου τα δύο frames λέγονται frame1 κει frame2. Μπορείτε να δείτε στην πάνω εικόνα ότι υπάρχει απ' ευθείας σχέση µεταξύ parent window και κάθε frame. Έτσι αν έχουµε ένα script στο parent window - αυτό σηµαίνει στην σελίδα που δηµιουργεί τα frames - και θέλουµε να έχουµε πρόσβαση στα frames, µπορούµε να χρησιµοποιήσουµε απλώς το όνοµα του frame. Για παράδειγµα, µπορείτε να γράψετε: frame2.document.write("ένα µήνυµα απ' το πατέρα παράθυρο."); Μερικές φορές χρειάζεστε να έχετε πρόσβαση στο parent window από ένα frame. Αυτό χρειάζεται π.χ. αν θέλουµε να σβήσουµε τα frames. Σβήνοντας τα frames, σηµαίνει να φορτωθεί µια νέα σελίδα στη θέση της σελίδας που δηµιούργησε τα frames. Αυτό είναι στην περίπτωσή µας το parent window. Μπορούµε να έχουµε πρόσβαση στο parent window (ή parent frame) από τα child frames µε το αντικείµενο parent. Για να φορτώσουµε ένα νέο document, πρέπει να δώσουµε νέα τιµή στο location.href. Εφόσον θέλουµε να διώξουµε τα frames, πρέπει να χρησιµοποιήσουµε το αντικείµενο location του parent window. Εφόσον το κάθε frame µπορεί να φορτώσει την δικιά του σελίδα έχουµε διαφορετικό αντικείµενο location για κάθε frame. Μπορούµε να φορτώσουµε νέα σελίδα στο parent window µε την εντολή: parent.location.href= "http://..."; Η γλώσσα JavaScript 51

52 Πολύ συχνά θα χρειαστείτε να έχετε πρόσβαση σε ένα child frame από ένα άλλο child frame. Πώς µπορείτε να γράψετε κάτι από το πρώτο frame στο δεύτερο frame - αυτό σηµαίνει ποια εντολή πρέπει να χρησιµοποιήσετε στο κείµενο page1.htm; Στην εικόνα, βλέπετε ότι δεν υπάρχει απ' ευθείας σύνδεση µεταξύ των δύο frames. Αυτό σηµαίνει ότι δεν µπορούµε απλώς να καλέσουµε frame2 από το frame1 µιας και αυτό το frame δεν ξέρει τίποτα για την ύπαρξη του άλλου frame. Για το parent window το δεύτερο frame λέγεται frame2 και το parent window λέγεται parent για το πρώτο frame. Γι' αυτό πρέπει να γράψουµε τα εξής για να αποκτήσουµε πρόσβαση στο αντικείµενο document του δεύτερου frame: parent.frame2.document.write("γειά, το frame1 επιφέρει αυτές τις αλλαγές."); Navigation bars Ας κοιτάξουµε ένα navigationbar. Θα έχουµε αρκετά links σε ένα frame. Αν ο χρήστης διαλέξει ένα απ' αυτά τα links, η σελίδα δεν θα εµφανιστεί στο ίδιο frame - θα εµφανιστεί στο άλλο frame. Αρχίζοντας, χρειαζόµαστε ένα script το οποίο δηµιουργεί τα frames. Αυτό το έγγραφο µοιάζει µε το πρώτο παράδειγµα: frames3.htm <html> <frameset rows="80%,20%"> <frame src="start.htm" name="main"> <frame src="menu.htm" name="menu"> </frameset> </html> Η σελίδα start.htm είναι η σελίδα που θα δείχνει το main frame στην αρχή. εν υπάρχουν ιδιαίτερες απαιτήσεις γι' αυτή τη σελίδα. Η επόµενη σελίδα είναι το frame menu (menu.htm): <html> <head> <script language="javascript"> <!-- hide function load(url) { parent.main.location.href= url; Η γλώσσα JavaScript 52

53 } // --> </script> </head> <body> <a href="javascript:load('first.htm')">πρώτο link</a> <a href="second.htm" target="main"> εύτερο link</a> <a href="third.htm" target="_top">τρίτο link</a> </body> </html> Πάνω µπορείτε να δείτε τρεις διαφορετικούς τρόπους για να φορτώσετε µια σελίδα στο frame main. Το πρώτο link χρησιµοποιεί τη function load(). Κοιτάξτε πώς καλείται αυτή η function: <a href="javascript:load('first.htm')">first</a> Μπορείτε να δείτε ότι µπορούµε να αφήσουµε τον browser να εκτελέσει το κώδικα JavaScript αντί για να φορτώσει άλλη σελίδα - απλώς πρέπει να χρησιµοποιήσουµε την παράµετρο JavaScript: στην ιδιότητα href. Μπορείτε να δείτε πως γράφω 'first.htm' µέσα στη παρένθεση. Η τιµή αυτή περνά στην function load(). Η function load() έχει ρυθµιστεί ως: function load(url) { parent.main.location.href= url; } Το url µέσα στην παρένθεση σηµαίνει ότι η τιµή 'first1.htm' αποθηκεύεται στη µεταβλητή url. Μέσα στη function load() µπορούµε τώρα να χρησιµοποιήσουµε την µεταβλητή. Θα δούµε πιο αναλυτικά παραδείγµατα αυτής της ιδιότητας των µεταβλητών και των functions αργότερα. Το δεύτερο link χρησιµοποιεί την ιδιότητα target. Αυτό, στην πραγµατικότητα δεν είναι JavaScript. Είναι ενέργεια της HTML. Βλέπετε ότι πρέπει να καθορίσουµε το όνοµα του frame. Σηµειώστε ότι δεν πρέπει να βάλουµε parent πριν απ' το όνοµα του frame. Αυτό µπορεί να σας µπερδέψει λίγο. Ο λόγος γι' αυτό είναι ότι το target είναι HTML και όχι JavaScript. Το τρίτο link δείχνει πώς να βγάλουµε τα frames χρησιµοποιώντας την ιδιότητα target. Αν θέλετε να βγάλετε τα frames µε την function load() πρέπει απλώς να γράψετε parent.location.href= url µέσα στο function. Ποιο τρόπο πρέπει να διαλέξετε; Αυτό εξαρτάται απ' το script και τι θέλετε να κάνετε. Η ιδιότητα target είναι πολύ απλή στη χρήση. Μπορείτε να τη χρησιµοποιήσετε αν θέλετε να φορτώσετε άλλη σελίδα σε κάποιο frame. Η λύση JavaScript (όπως το πρώτο link) χρησιµοποιείται συνήθως όταν θέλουµε να κάνουµε πολλά πράγµατα σαν απάντηση στο πάτηµα του link. Ένα συνηθισµένο πρόβληµα είναι να φορτώσετε δύο σελίδες σε δύο διαφορετικά frames. Παρόλο που µπορείτε να το λύσετε αυτό χρησιµοποιώντας την ιδιότητα target, χρησιµοποιώντας JavaScript functions είναι πιο άµεσο. Ας πούµε ότι έχετε τρία frames, µε ονόµατα frame1,frame2 και frame3. Ο χρήστης πατά ένα link στο frame1. Τότε θέλετε να φορτώσετε δύο διαφορετικές σελίδες στα δύο άλλα frames. Μπορείτε, παραδείγµατος χάριν, να χρησιµοποιήσετε την επόµενη function: function loadtwo() { parent.frame1.location.href= "first.htm"; parent.frame2.location.href= "second.htm"; } Αν θέλετε να διατηρήσετε την function πιο εύκαµπτη, µπορείτε να χρησιµοποιήσετε variable passing. Η function θα δείχνει ως εξής: function loadtwo(url1, url2) { parent.frame1.location.href= url1; parent.frame2.location.href= url2; } Μπορείτε να καλείτε αυτή τη function γράφοντας loadtwo("first.htm", "second.htm") ή loadtwo("third.htm", "forth.htm"). Χρησιµοποιώντας Variable passing κάνει τη function πιο εύκαµπτη. Μπορείτε να τη χρησιµοποιήσετε ξανά και ξανά µε διαφορετικό περιεχόµενο. Η γλώσσα JavaScript 53

54 5.7. Παράθυρα ηµιουργώντας παράθυρα Ανοίγοντας νέα παράθυρα είναι µια σπουδαία λειτουργία του JavaScript. Μπορείτε να φορτώσετε ένα νέο έγγραφο (για παράδειγµα ένα έγγραφο HTML) σε ένα νέο παράθυρο ή να δηµιουργήσετε νέα έγγραφα (on-the-fly). Πρώτα, θα ρίξουµε µια µατιά στο πώς δηµιουργούµε ένα νέο παράθυρο, φορτώνουµε µια HTML σελίδα σε αυτό το παράθυρο και µετά το κλείνουµε. Το ακόλουθο script ανοίγει ένα νέο παράθυρο και φορτώνει µια σελίδα: <html> <head> <script language="javascript"> <!-- hide function openwin() { mywin= open("bla.htm"); } // --> </script> </head> <body> <form> <input type="button" value="άνοιγµα νέου παραθύρου" onclick="openwin()" > </form> </body> </html> Η σελίδα bla.htm εµφανίζεται στο νέο παράθυρο χρησιµοποιώντας την method open(). Μπορείτε να τροποποιήσετε τη µορφή του νέου παραθύρου. Για παράδειγµα, µπορείτε να αποφασίσετε αν θα έχει statusbar, toolbar ή menubar. Εκτός αυτού, µπορείτε να ρυθµίσετε το µέγεθος του παραθύρου. Το ακόλουθο script ανοίγει ένα νέο παράθυρο το οποίο έχει µέγεθος 400x300. Το παράθυρο δεν θα 'χει statusbar, toolbar ή menubar. <html> <head> <script language="javascript"> <!-- hide function openwin2() { mywin= open("bla.htm", "displaywindow", "width=400,height=300,status=no, toolbar=no,menubar=no"); } // --> </script> </head> <body> <form> <input type="button" value="άνοιγµα νέου παραθύρου" onclick="openwin2()"> </form> </body> </html> Μπορείτε να δείτε ότι µπορούµε να προσδιορίσουµε τις παραµέτρους γράφοντας "width=400,height=300,status=no,toolbar=no,menubar=no". Σηµειώστε ότι δεν πρέπει να υπάρχουν κενά (spaces) στο κείµενο αυτό! Εδώ είναι µια λίστα µε τις παραµέτρους που µπορεί να έχει ένα παράθυρο: directories yes no height αριθµός pixels Η γλώσσα JavaScript 54

55 location menubar resizable scrollbars status toolbar width yes no yes no yes no yes no yes no yes no αριθµός pixels Νέες παράµετροι έχουν προστεθεί στη JavaScript 1.2 (π.χ. Netscape Navigator 4.0). εν µπορείτε να χρησιµοποιήσετε αυτές τις παραµέτρους στο Netscape 2.x ή 3.x ή Microsoft Internet Explorer 3.x εφόσον αυτοί οι browsers δεν καταλαβαίνουν JavaScript 1.2. Εδώ απεικονίζονται οι νέες παράµετροι: alwayslowered yes no alwaysraised dependent hotkeys innerwidth innerheight outerwidth outerheight screenx screeny titlebar z-lock yes no yes no yes no αριθµός pixels (αντικαθιστά το width) αριθµός pixels (αντικαθιστά το height) αριθµός pixels αριθµός pixels θέση σε pixels θέση σε pixels yes no yes no Μπορείτε να βρείτε την εξήγηση των νέων παραµέτρων σε κάποιο οδηγό για JavaScript 1.2. Στο µέλλον, θα παρουσιάσω παραδείγµατα και τις εξηγήσεις των παραµέτρων. Με την βοήθεια αυτών των παραµέτρων µπορούµε να προσδιορίσουµε σε ποια θέση θα ανοίξει το παράθυρο. εν µπορείτε να το κάνετε αυτό σε παλιές εκδόσεις της JavaScript. Το όνοµα του παραθύρου Όπως είδατε χρησιµοποιήσαµε τρεις παραµέτρους για να ανοίξουµε το παράθυρο: mywin= open("bla.htm", "displaywindow", "width=400,height=300,status=no, toolbar=no,menubar=no"); Γιατί είναι η δεύτερη παράµετρος (displaywindow); Αυτό είναι το όνοµα του παραθύρου. Είχαµε δει πώς να χρησιµοποιούµε την ιδιότητα target πρωτύτερα. Αν ξέρετε το όνοµα ενός παραθύρου, µπορείτε να φορτώσετε µια νέα σελίδα σε αυτό, γράφοντας <a href="bla.html" target="displaywindow"> Εδώ χρειάζεστε το όνοµα του παραθύρου (αν το παράθυρο δεν υπάρχει, ένα νέο παράθυρο θα δηµιουργηθεί µε αυτό τον κώδικα). Σηµείωση: το mywin ΕΝ είναι το όνοµα του παραθύρου. Μπορείτε απλώς να έχετε πρόσβαση σε αυτό το παράθυρο, µέσω της µεταβλητής. Επειδή είναι µια απλή µεταβλητή, είναι ισχύουσα µόνο µέσα στο script στο οποίο έχει προσδιορισθεί. Το όνοµα του παραθύρου (εδώ displaywindow) είναι ένα µοναδικό όνοµα το οποίο µπορεί να χρησιµοποιηθεί από όλα τα ανοιχτά παράθυρα. Η γλώσσα JavaScript 55

56 Κλείνοντας παράθυρα Μπορείτε να κλείσετε παράθυρα χρησιµοποιώντας JavaScript. Γι' αυτό χρειάζεστε την µέθοδο close(). Ας ανοίξουµε ένα νέο παράθυρο όπως πριν. Σε αυτό το παράθυρο θα φορτώσουµε την ακόλουθη σελίδα: <html> <script language="javascript"> <!-- hide function closeit() { close(); } // --> </script> <center> <form> <input type=button value="κλείστε αυτό το παράθυρο" onclick="closeit()"> </form> </center> </html> Αν πατήσετε το κουµπί στο νέο παράθυρο, το παράθυρο θα κλείσει. Οι µέθοδοι open() και close() ανήκουν στο αντικείµενο window. Κανονικά, πρέπει να γράψουµε window.open() και window.close() αντί για open() και close(). Αυτό είναι αλήθεια - Αλλά το αντικείµενο window είναι µια εξαίρεση. εν χρειάζεται να γράψετε window αν θέλετε να καλέσετε µια method του αντικείµενου window (αυτό συµβαίνει µόνο σε αυτό το αντικείµενο). ηµιουργώντας δυναµικά έγγραφα Ερχόµαστε τώρα σε µια έξυπνη λειτουργία του JavaScript - η δηµιουργία εγγράφων on-the-fly. Αυτό σηµαίνει ότι µπορείτε να αφήσετε τη JavaScript κώδικα να δηµιουργήσει µια νέα HTML σελίδα. Επιπλέον, µπορείτε να δηµιουργήσετε άλλα έγγραφα - όπως VRML-scenes, κλπ.. Μπορείτε να δηµιουργήσετε τα έγγραφα αυτά, σε νέα παράθυρα ή σε frames. Πρώτα πρέπει να δηµιουργήσουµε µια απλή HTML σελίδα, η οποία θα εµφανίζεται στο νέο παράθυρο. Εδώ είναι ένα script που θα πρέπει να του ρίξουµε µια µατιά. <html> <head> <script language="javascript"> <!-- hide function openwin3() { mywin= open("", "displaywindow", "width=500,height=400,status=yes, toolbar=yes,menubar=yes"); // Άνοιγµα του εγγράφου για παραπέρα µετατροπή mywin.document.open(); // ηµιουργία εγγράφου mywin.document.write("<html><head><title>dynamic"); mywin.document.write("</title></head><body>"); mywin.document.write("<center><font size=+3>"); mywin.document.write("αυτό το HTML έγγραφο δηµιουργήθηκε "); mywin.document.write("µε χρήση της JavaScript!"); mywin.document.write("</font></center>"); mywin.document.write("</body></html>"); // Κλείσιµο του εγγράφου - (όχι του παραθύρου) mywin.document.close(); } Η γλώσσα JavaScript 56

57 // --> </script> </head> <body> <form> <input type=button value="dynamic" onclick="openwin3()"> </form> </body> </html> Ας κοιτάξουµε την function winopen3(). Αρχικά βλέπουµε ότι ανοίγουµε ένα νέο παράθυρο. Όπως βλέπετε η πρώτη παράµετρος έχει κενή τιµή "" - αυτό σηµαίνει ότι δεν καθορίζουµε ένα URL. Ο browser δεν πρέπει απλώς να φορτώσει ένα έγγραφο - η JavaScript θα δηµιουργήσει ένα καινούργιο έγγραφο. Προσδιορίζουµε την µεταβλητή mywin. Με τη βοήθεια αυτής της µεταβλητής, µπορούµε να έχουµε πρόσβαση στο νέο παράθυρο. Σηµειώστε ότι δεν µπορούµε να χρησιµοποιήσουµε το όνοµα του παραθύρου (displaywindow) για αυτή τη λειτουργία. Εφόσον ανοίξουµε το παράθυρο, πρέπει να ανοίξουµε το έγγραφο. Αυτό γίνεται ως εξής: // Άνοιγµα εγγράφου για παραπέρα µετατροπή mywin.document.open(); Καλούµε την µέθοδο open() του αντικειµένου document - αυτή είναι διαφορετική µέθοδος από την open() του αντικείµενου window! Αυτή η εντολή δεν ανοίγει ένα νέο παράθυρο - ετοιµάζει το έγγραφο για µορφοποίηση. Πρέπει να βάλουµε mywin πριν από document.open() για να έχουµε πρόσβαση στο παράθυρο. Οι επόµενες γραµµές δηµιουργούν το έγγραφο, χρησιµοποιώντας την µέθοδο document.write(): // ηµιουργία εγγράφου mywin.document.write("<html><head><title>dynamic"); mywin.document.write("</title></head><body>"); mywin.document.write("<center><font size=+3>"); mywin.document.write("αυτό το HTML έγγραφο δηµιουργήθηκε "); mywin.document.write("µε χρήση JavaScript!"); mywin.document.write("</font></center>"); mywin.document.write("</body></html>"); Μπορείτε να δείτε τις κανονικές HTML εντολές του εγγράφου. ηµιουργούµε έναν HTML κώδικα! Μπορείτε να γράψετε οποιαδήποτε HTML εντολή. Μετά την µετατροπή πρέπει να κλείσουµε το έγγραφο. Ο επόµενος κώδικας το κάνει αυτό: // Κλείσιµο του εγγράφου - (όχι του παραθύρου!) mywin.document.close(); Όπως είπα πριν, µπορούµε να δηµιουργήσουµε on-the-fly έγγραφα και να τα εµφανίσουµε σε frame. Αν, π.χ. έχετε δύο frames µε τα ονόµατα frame1 και frame2 και θέλετε να δηµιουργήσετε ένα νέο έγγραφο στο frame2, µπορείτε να γράψετε τα ακόλουθα στο frame1: parent.frame2.document.open(); parent.frame2.document.write("html κώδικας"); parent.frame2.document.close(); 5.8. Το statusbar Τα JavaScript προγράµµατα µπορούν να γράψουν κείµενο στο statusbar - statusbar είναι η µπάρα στο κάτω µέρος του browser. Το µόνο που πρέπει να κάνετε είναι να ρυθµίσετε την τιµή window.status. Το επόµενο παράδειγµα δείχνει δύο κουµπιά, τα οποία χρησιµοποιούνται για να γράψουν κείµενο στο statusbar και για να το σβήσουνε. Το script δείχνει ως εξής: <html> <head> <script language="javascript"> <!-- hide function statbar(txt) { Η γλώσσα JavaScript 57

58 window.status = txt; } // --> </script> </head> <body> <form> <input type="button" name="look" value="γράψε!" onclick="statbar(' Hi from the statusbar!');"> <input type="button" name="erase" value="σβήσε!" onclick="statbar('');"> </form> </body> </html> ηµιουργούµε µια φόρµα µε δύο κουµπιά. Και τα δύο κουµπιά καλούν την function statbar(). Βλέπετε ότι το κάλεσµα της function, που δηµιουργείται στο Write! δείχνει ως εξής: statbar('γεια! Εγώ είµαι το statusbar!'); Μέσα στην παρένθεση ρυθµίζουµε την τιµή 'Γεια! Εγώ είµαι το statusbar!' Αυτό σηµαίνει ότι η τιµή εισάγεται στο function statbar(). Μπορείτε να δείτε ότι έχουµε ρυθµίσει την function statbar() ως εξής: function statbar(txt) { window.status = txt; } Το καινούργιο είναι το txt µέσα στη παρένθεση του function. Αυτό σηµαίνει ότι η τιµή που βάλαµε στο function αποθηκεύεται στη µεταβλητή txt. ίνοντας µεταβλητές στα functions είναι ένας συνήθης τρόπος για να κάνουµε τα functions πιο εύκαµπτα. Μπορείτε να περάσετε πολλές µεταβλητές στα functions - Απλώς πρέπει να τις διαχωρίσετε µε κόµµατα. Η τιµή txt φαίνεται στο statusbar, χάρη στη γραµµή window.status = txt. Το να σβηστεί το κείµενο από το statusbar είναι εφικτό αν καθορίζουµε µια κενή τιµή στο window.status. Το να δείχνουµε κείµενο στο statusbar µπορεί εύκολα να χρησιµοποιηθεί σε συνδυασµό µε τα links. Αντί να δείχνει το URL του link µπορείτε να το κάνετε να εξηγεί τι περιέχει η σελίδα που ακολουθεί. Ο κώδικας γι' αυτό το παράδειγµα είναι ο εξής: <a href="./dontclck.htm" onmouseover="window.status='don\'t click me!'; return true;" onmouseout="window.status='';">link</a> Εδώ χρησιµοποιούµε τα onmouseover και onmouseout για να ξέρουµε πότε ο δείκτης του mouseκινείται πάνω από το link. Η χρήση του return true µέσα στο event onmouseover σηµαίνει ότι ο browser δεν θα εκτελέσει τον δικό του κώδικα σαν απάντηση στο event MouseOver. Κανονικά ο browser δείχνει το URL του link στο statusbar. Αν δεν χρησιµοποιήσουµε το return true, ο browser θα γράψει στο statusbar αµέσως µόλις ο δικός µας κώδικας έχει εκτελεστεί - αυτό σηµαίνει ότι θα έγραφε πάνω στο δικό µας κείµενο και, ως αποτέλεσµα, ο χρήστης δεν θα µπορούσε να το διαβάσει. Γενικά µπορούµε να εµποδίσουµε τις ενέργειες του browser, χρησιµοποιώντας το return true στον eventhandler. onmouseout. Αν θέλουµε να γράψουµε το Don't click me όπως στο παράδειγµα - καθώς καθορίζουµε την τιµή του onmouseover event-handler, χρησιµοποιούµε άνω τελείες. Αλλά η λέξη Don't χρησιµοποιεί και αυτή άνω τελεία! Ο browser µπερδεύεται αν απλώς γράψετε 'Don't...'. Για να λύσουµε αυτό το πρόβληµα, απλώς γράφουµε την κάθετο backslash \, πριν απ' την άνω τελεία - που σηµαίνει ότι η άνω τελεία ανήκει στη τιµή (µπορείτε να κάνετε το ίδιο µε τις δύο άνω τελείες ") Timeouts Με την βοήθεια των timeouts (ή αλλιώς timer, χρονόµετρα) µπορείτε να διατάξετε τον υπολογιστή να εκτελέσει τον κώδικα, εφόσον περάσει καθορισµένος χρόνος. Έχω δηµιουργήσει ένα κουµπί - αν το πατήσετε, ένα παράθυρο θα εµφανιστεί µετά από 3 δευτερόλεπτα: Ο κώδικας αυτής της περίπτωσης είναι: Η γλώσσα JavaScript 58

59 <script language="javascript"> <!-- hide function timer() { settimeout("alert('τέλος χρόνου!')", 3000); } // --> </script>... <form> <input type="button" value="timer" onclick="timer()"> </form> Το settimeout() είναι method του αντικείµενου window. Καθορίζει ένα timeout - νοµίζω ότι αυτό το έχετε καταλάβει ως τώρα. Η πρώτη τιµή είναι ο JavaScript κώδικας που πρέπει να εκτελεστεί µετά από τον καθορισµένο χρόνο. Στη περίπτωσή µας, η τιµή αυτή είναι "alert('τέλος χρόνου!')". Σηµειώστε ότι ο κώδικας πρέπει να είναι µέσα σε άνω τελείες. Η δεύτερη τιµή λέει στον υπολογιστή πότε ο κώδικας θα εκτελεστεί. Πρέπει να καθορίσετε τον χρόνο σε milliseconds (3000 milliseconds = 3 δευτερόλεπτα). Scroller Τώρα που ξέρετε πώς να γράψετε στο statusbar και πώς δουλεύουν τα timeouts, θα ρίξουµε µια µατιά στους scrollers (κινούµενο κείµενο στο statusbar). Οι scrollers χρησιµοποιούνται συχνά στο Internet. Θα δούµε πώς να προγραµµατίσουµε έναν απλό scroller. Εκτός αυτού, θα σκεφτούµε πιθανές βελτιώσεις του scroller. Οι Scrollers µπορούν να εισαχθούν εύκολα. Ας δούµε πώς θα δηµιουργήσουµε το κινούµενο κείµενο στο statusbar. Πρέπει να γράψουµε ένα κείµενο στο statusbar. Μετά από µια χρονική περίοδο, πρέπει να γράψουµε το ίδιο κείµενο στο statusbar - αλλά πρέπει να το µετακινήσουµε σε πιο αριστερή θέση. Αν το επαναλαµβάνουµε αυτό ξανά και ξανά, ο χρήστης θα βλέπει αν τέλει το κινούµενο κείµενο. Πρέπει να σκεφτούµε πώς θα καθορίσουµε ποιο µέρος του κειµένου θα εµφανιστεί, µιας και το όλο κείµενο είναι κανονικά µεγαλύτερο του statusbar. Αυτό το κουµπί θα εµφανίζει ένα παράθυρο και θα δείξει τον scroller: Ο κώδικας είναι ο ακόλουθος - έχω προσθέσει σχόλια: <html> <head> <script language="javascript"> <!-- hide // Καθορισµός του κειµένου var scrtxt = "This is JavaScript! " + "This is JavaScript! " + "This is JavaScript!"; var length = scrtxt.length; var width = 100; var pos = -(width + 2); function scroll() { // Εµφάνιση του κειµένου στη δεξιά θέση και καθορισµός του timeout // Μετακίνηση της θέσης ένα βήµα µακρύτερα pos++; // Υπολογισµός του µέρους του κειµένου που θα εµφανιστεί var scroller = ""; if (pos == length) { pos = -(width + 2); Η γλώσσα JavaScript 59

60 } // Αν το κείµενο δεν έχει φτάσει την αριστερή πλευρά ακόµα, πρέπει // να εισάγουµε κενά - αλλιώς πρέπει να κόψουµε το πρώτο µέρος // του κειµένου (το οποίο µετακινήθηκε στην αριστερή πλευρά) if (pos < 0) { for (var i = 1; i <= Math.abs(pos); i++) { scroller = scroller + " ";} scroller = scroller + scrtxt.substring(0,width i+1); } else { scroller = scroller + scrtxt.substring(pos,width+pos); } } // Εισαγωγή του κειµένου στο statusbar window.status = scroller; // Κάλεσµα της function µετά από 100 milliseconds settimeout("scroll()", 100); // --> </script> </head> <body onload="scroll()"> Η HTML σελίδα µπαίνει εδώ. </body> </html> Το κύριο µέρος του scroll() χρειάζεται για τον υπολογισµό του ποιου µέρους του κειµένου θα εµφανιστεί. εν εξηγώ τον κώδικα µε λεπτοµέρειες - απλώς πρέπει να καταλάβετε γενικά πώς ενεργεί αυτός ο scroller. Για να αρχίσουµε τον scroller χρησιµοποιούµε το onload event-handler της εντολής <body>. Αυτό σηµαίνει ότι η function scroll() µπαίνει σε λειτουργία, εφόσον έχει φορτωθεί το έγγραφο. Καλούµε την function scroll() µε την ιδιότητα onload. Το πρώτο βήµα του scroller υπολογίζεται και εµφανίζεται. Στο τέλος της function scroll() καθορίζουµε ένα timeout. Αυτό κάνει την function scroll() να εκτελεστεί ξανά µετά από 100 milliseconds. Το κείµενο µετακινείται ένα βήµα µπροστά και ένα άλλο timeout καθορίζεται. Αυτό συνεχίζεται για πάντα. Οι Scrollers χρησιµοποιούνται συχνά στο Internet. Υπάρχει ο "κίνδυνος" ότι µπορεί να γίνουν γρήγορα µη δηµοφιλείς. Πρέπει να παραδεχτώ ότι δεν µου αρέσουν τόσο πολύ. Ειδικά ενοχλητικό σε πολλές σελίδες είναι ότι το URL δεν µπορεί να εµφανιστεί όταν µετακινούµε το δείκτη πάνω από link. Αυτό µπορεί να αποφευχθεί, αν σταµατούµε τον scroller όταν ένα MouseOver event συµβαίνει - µπορείτε να το ξεκινάτε ξανά µε το onmouseout. Αν θέλετε να έχετε ένα scroller, προσπαθήστε να µη χρησιµοποιήσετε τον απλό scroller - προσπαθήστε να προσθέσετε µερικά εφέ. Ίσως, ένα µέρος του κειµένου να έρχεται από τα αριστερά, και ένα άλλο απ' τα δεξιά - όταν συναντούνται στη µέση να σταµατάνε για µερικά δευτερόλεπτα. Με µερική φαντασία, µπορείτε να βρείτε εναλλακτικές λύσεις Built In αντικείµενα Το αντικείµενο Date Η JavaScript διαθέτει µερικά έτοιµα αντικείµενα όπως για παράδειγµα, τα αντικείµενα Date, Array και Math. Υπάρχουν πολλά άλλα αντικείµενα - απευθυνθείτε σε έγγραφα της Netscape για πλήρη λίστα αντικειµένων. Θα ρίξουµε µια µατιά στο αντικείµενο Date, πρώτα. Όπως φαίνεται απ' το όνοµα, το αντικείµενο αυτό έχει να κάνει µε το χρόνο και την ηµεροµηνία. Παραδείγµατος χάριν, µπορείτε να υπολογίσετε πόσες µέρες µένουν ως τα επόµενα Χριστούγεννα, µε τη βοήθεια αυτού του αντικειµένου. Ή να προσθέσετε τη πραγµατική ώρα, στο έγγραφο HTML. Γι' αυτό λοιπόν, ας ξεκινήσουµε µε ένα Η γλώσσα JavaScript 60

61 παράδειγµα που δείχνει την ώρα. Πρώτα πρέπει να δηµιουργήσουµε το νέο αντικείµενο Date. Γι' αυτό το λόγο χρησιµοποιούµε την εντολή new. Κοιτάξτε αυτή τη γραµµή κώδικα: today= new Date() Αυτό δηµιουργεί ένα νέο αντικείµενο Date, που ονοµάζεται today. Αν δεν καθορίσετε µια νέα ηµεροµηνία ή ώρα όταν δηµιουργείτε το νέο αντικείµενο Date η πραγµατική ώρα και ηµεροµηνία χρησιµοποιείται. Αυτό σηµαίνει ότι µετά την εκτέλεση του today= new Date() το νέο αντικείµενο today αντιπροσωπεύει την ηµεροµηνία και ώρα που εκτελέστηκε ο κώδικας αυτός. Το αντικείµενο Date αναφέρεται σε µερικές methods που µπορούν να χρησιµοποιηθούν µε το αντικείµενο today. Αυτές είναι π.χ. gethours(), sethours(), getminutes(), setminutes(), getmonth(), setmonth(), κ.λ.π. Μπορείτε να βρείτε πλήρη στοιχεία σε έγγραφα της Netscape. Σηµειώστε ότι το αντικείµενο Date αντιπροσωπεύει µια καθορισµένη ηµεροµηνία και ώρα. εν είναι είδος ρολογιού που αλλάζει την ώρα κάθε δευτερόλεπτο, ή λεπτό. Για να πάρουµε νέο ηµεροµηνία και ώρα, χρησιµοποιούµε µια άλλη µέθοδο (αυτή είναι η Date() method, που καλείται απ' το new, όταν καθορίζουµε ένα νέο Date αντικείµενο): today= new Date(1997, 0, 1, 17, 35, 23) Αυτό θα δηµιουργήσει ένα Date αντικείµενο, που αντικαθιστά την 1η Ιανουαρίου 1997, και ώρα 17:35 και 23 δευτερόλεπτα. Έτσι ρυθµίζετε την ηµεροµηνία και ώρα: Date(year, month, day, hours, minutes, seconds) Σηµειώστε ότι πρέπει να χρησιµοποιήσετε 0 για τον Ιανουάριο - και όχι 1, όπως πιθανώς νοµίζατε. Το 1 σηµαίνει Φεβρουάριο, το 2 Μάρτιο, κ.ο.κ. Τώρα θα γράψουµε ένα script το οποίο δείχνει την ηµεροµηνία και ώρα. Το αποτέλεσµα θα δείχνει ως εξής: Ο κώδικας είναι ο εξής: <script language="javascript"> <!-- hide now= new Date(); document.write("time: " + now.gethours() + ":" + now.getminutes() + "<br>"); document.write("date: "+(now.getmonth()+1)+"/"+ now.getdate() + "/" + ( now.getyear())); // --> </script> Εδώ χρησιµοποιούµε methods, όπως gethours() για να δείξουµε την ώρα και ηµεροµηνία που έχει καθοριστεί στο αντικείµενο Date τώρα. Όπως βλέπετε προσθέτουµε 1900 στο χρόνο. Η method getyear() επιστρέφει ως αποτέλεσµα τα χρόνια που πέρασαν απ' το Αυτό σηµαίνει ότι αν η χρονιά είναι 1997 θα επιστρέψει την τιµή 97, αν ο χρόνος είναι 2010 θα επιστρέψει την τιµή όχι 10! Αν προσθέσουµε 1900, δεν θα έχουµε το χρόνο 2000 πρόβληµα. Θυµηθείτε ότι πρέπει να αυξήσουµε κατά ένα τον αριθµό που λαµβάνουµε απ' τη µέθοδο getmonth(). Το script δεν ελέγχει αν ο αριθµός των λεπτών είναι µικρότερος από 10. Αυτό σηµαίνει ότι θα πάρετε αποτέλεσµα: 14:3, που στη πραγµατικότητα σηµαίνει 14:03. Θα δούµε στο επόµενο script πώς να λύσουµε αυτό το πρόβληµα. Τώρα θα κοιτάξουµε το script που δείχνει ένα ρολόι εν λειτουργία: Ώρα: Ηµεροµηνία: Εδώ είναι ο κώδικας: <html> <head> <script Language="JavaScript"> Η γλώσσα JavaScript 61

62 <!-- Κρύβουµε τον κώδικα από παλιούς browsers var timestr, datestr; function clock() { now= new Date(); // time hours= now.gethours(); minutes= now.getminutes(); seconds= now.getseconds(); timestr= "" + hours; timestr+= ((minutes < 10)? ":0" : ":") + minutes; timestr+= ((seconds < 10)? ":0" : ":") + seconds; document.clock.time.value = timestr; // date date= now.getdate(); month= now.getmonth()+1; year= now.getyear(); datestr= "" + month; datestr+= ((date < 10)? "/0" : "/") + date; datestr+= "/" + year; document.clock.date.value = datestr; Timer= settimeout("clock()",1000); } // --> </script> </head> <body onload="clock()"> <form name="clock"> Ώρα: <input type="text" name="time" size="8" value=""><br> Ηµεροµηνία: <input type="text" name="date" size="8" value=""> </form> </body> </html> Χρησιµοποιούµε την µέθοδο settimeout() για να ρυθµίζουµε την ώρα και ηµεροµηνία κάθε δευτερόλεπτο. Γι' αυτό δηµιουργούµε κάθε δευτερόλεπτο ένα νέο Date µε την πραγµατική ώρα. Μπορείτε να δείτε ότι η function clock() καλείτε στο onload event-handler στην HTML εντολή <body>. Στο κύριο µέρος του εγγράφου µας έχουµε δύο πεδία κειµένου. Η function clock() γράφει την ώρα και ηµεροµηνία στα δύο στοιχεία της φόρµας, µε το σωστό τύπο. Μπορείτε να δείτε ότι χρησιµοποιούµε δύο µεταβλητές timestr και datestr γι' αυτό το σκοπό. Έχω αναφέρει πριν ότι υπάρχει πρόβληµα όταν τα λεπτά λιγότερα απ' το 10 - αυτό το script λύνει αυτό το πρόβληµα, µε την παρακάτω γραµµή στο κώδικα: timestr+= ((minutes < 10)? ":0" : ":") + minutes; Εδώ, ο αριθµός των λεπτών προσθέτεται στην µεταβλητή timestr. Αν τα λεπτά είναι λιγότερα από 10, πρέπει να προσθέσουµε ένα 0. Αυτή η γραµµή του κώδικα µπορεί να φαίνεται λίγο παράξενη σε σας. Μπορείτε επίσης, να γράψετε κάτι σαν το ακόλουθο, που θα σας φανεί πιο οικείο: if (minutes < 10) timestr+= ":0" + minutes else timestr+= ":" + minutes; Το αντικείµενο Array Τα arrays είναι σηµαντικά. Σκεφτείτε ένα παράδειγµα, όπου πρέπει να αποθηκεύσετε 100 διαφορετικά ονόµατα. Πώς θα το κάνετε αυτό στη JavaScript? Μπορείτε να δηµιουργήσετε 100 µεταβλητές και να τους εισάγετε τα 100 ονόµατα. Αυτό, όµως είναι πολύπλοκο. Τα Arrays µπορείτε να τα δείτε σαν µεταβλητές ενωµένες µεταξύ τους. Μπορείτε να έχετε πρόσβαση σ' αυτές µέσω του ονόµατος και ενός αριθµού. Ας πούµε ότι το όνοµα του array είναι names. Τότε, έχουµε πρόσβαση στο πρώτο όνοµα γράφοντας names[0]. Το δεύτερο όνοµα λέγεται name[1] κ.ο.κ. Η γλώσσα JavaScript 62

63 Από τη JavaScript 1.1 (Netscape Navigator 3.0), µπορείτε να χρησιµοποιήσετε το αντικείµενο Array. Μπορείτε να δηµιουργήσετε ένα νέο array γράφοντας myarray= new Array(). Τώρα, µπορείτε να εισάγετε τις τιµές στο array: myarray[0]= 17; myarray[1]= "Stefan"; myarray[2]= "Koch"; Τα JavaScript arrays είναι πολύ εύκαµπτα. εν είναι ανάγκη να ασχολείστε µε το µέγεθος του array - το µέγεθός του ρυθµίζεται αυτόµατα. Αν γράψετε myarray[99]= "xyz", το µέγεθος του array παίρνει 100 στοιχεία (ένα JavaScript array µπορεί µόνο να µεγαλώσει - δεν έχει τη δυνατότητα να µικρύνει. Γι' αυτό κρατήστε τα arrays όσο το δυνατόν µικρότερα). εν έχει σηµασία αν αποθηκεύετε αριθµούς, κείµενο ή άλλα αντικείµενα σε ένα array. εν αναφέροµαι µε λεπτοµέρεια για τα arrays σε αυτό το σηµείο, αλλά θα δείτε πόσο χρήσιµα µπορούν να γίνουν τα arrays. Σίγουρα, τα πράγµατα γίνονται πιο ξεκάθαρα κοιτώντας ένα παράδειγµα. Το αποτέλεσµα του επόµενου παραδείγµατος είναι: Πρώτη τιµή εύτερη τιµή Τρίτη τιµή Ο κώδικας είναι ο ακόλουθος: <script language="javascript"> <!-- hide myarray= new Array(); myarray[0]= "Πρώτη τιµή"; myarray[1]= " εύτερη τιµή"; myarray[2]= "Τρίτη τιµή"; for (var i= 0; i< 3; i++) { document.write(myarray[i] + "<br>"); } // --> </script> Πρώτα, δηµιουργούµε ένα array, µε την ονοµασία myarray. Τότε, εισάγουµε τρεις διαφορετικές τιµές σε αυτό. Μετά απ' αυτό δηµιουργούµε ένα loop. Αυτό το loop εκτελεί την εντολή document.write(myarray[i] + "<br>"); τρεις φορές. Η µεταβλητή i µετρά από το 0 ως το 2 µε αυτό το for-loop. Μπορείτε να δείτε ότι χρησιµοποιούµε το myarray[i] µέσα στο for-loop. Καθώς το i παίρνει τις τιµές από το 0 ως το 2, παίρνουµε τρεις document.write() κλήσεις. Θα µπορούσαµε επίσης να το γράψουµε ως εξής: document.write(myarray[0] + "<br>"); document.write(myarray[1] + "<br>"); document.write(myarray[2] + "<br>"); Το αντικείµενο Math Αν χρειάζεστε να κάνετε µαθηµατικούς υπολογισµούς, θα βρείτε µερικές methods στο αντικείµενο Math, το οποίο µπορεί να σας βοηθήσει εν συνεχεία. Υπάρχει, π.χ. µία method για ηµίτονα, η sin(). Θα βρείτε πλήρη στοιχεία σε έγγραφα της Netscape. Θέλω να σας δείξω τη µέθοδο random(). Αν έχετε διαβάσει την πρώτη έκδοση αυτού του tutorial, ξέρετε ότι υπήρχαν προβλήµατα µε τη method random(). ηµιουργήσαµε µια function που µας άφηνε να δηµιουργούµε τυχαίους αριθµούς. εν τη χρειαζόµαστε πια, αφού η random() method τώρα δουλεύει σε όλες τις πλατφόρµες. Αν καλέσετε τη Math.random(), θα πάρετε ένα τυχαίο αριθµό από 0 έως 1. Η γλώσσα JavaScript 63

64 Το αντικείµενο Image Εικόνες σε µια σελίδα Τώρα, θα ρίξουµε µια µατιά στο αντικείµενο Image το οποίο δηµιουργήθηκε στη JavaScript 1.1 (δηλαδή απ' τη δηµιουργία του Netscape Navigator 3.0). Με τη βοήθεια του αντικειµένου αυτού, µπορείτε να αλλάξετε τις εικόνες σε µια σελίδα. Αυτό σας επιτρέπει, π.χ. να δηµιουργήσετε animations. Σηµειώστε ότι οι χρήστες παλιών browsers (όπως Netscape Navigator 2.0 ή Microsoft Internet Explorer χρησιµοποιούν JavaScript 1.0) δεν µπορούν να τρέξουν τα scripts που βρίσκονται σε αυτό το µέρος - ή τουλάχιστον δεν µπορούν να δηµιουργήσουν το όλο εφέ. Πρώτα, να δούµε πώς οι εικόνες σε µια σελίδα µπορούν να χρησιµοποιηθούν µέσω JavaScript. Όλες οι εικόνες παρουσιάζονται µέσω ενός array. Αυτό το array λέγεται images. Είναι ιδιότητα του αντικείµενου document. Κάθε εικόνα παίρνει ένα αριθµό. Η πρώτη εικόνα παίρνει τον αριθµό 0, η δεύτερη τον αριθµό 1 κ.ο.κ. Έτσι, έχουµε πρόσβαση στην πρώτη εικόνα γράφοντας document.images[0]. Κάθε εικόνα σε ένα HTML έγγραφο θεωρείται σαν αντικείµενο Image. Ένα αντικείµενο Image έχει καθορισµένες ιδιότητες που µπορούν να χρησιµοποιηθούν µέσω JavaScript. Μπορείτε παραδείγµατος χάριν να ξέρετε το µέγεθος της εικόνας χάρη στις ιδιότητες width και height. Το document.images[0].width σας δίνει το πλάτος (σε pixel) της πρώτης εικόνας στη σελίδα. Ειδικά αν έχετε πολλές εικόνες σε µια σελίδα είναι δύσκολο να θυµάστε τον αριθµό της κάθε εικόνας. ίνοντας ονόµατα στην κάθε εικόνα λύνουµε το πρόβληµα. Για την εικόνα: <img src="img.gif" name="myimage" width=100 height=100> µπορείτε να έχετε πρόσβαση σε αυτή γράφοντας document.myimage ή document.images["myimage"]. Φορτώνοντας νέες εικόνες Παρόλο που είναι καλό να ξέρουµε πώς να πάρουµε το µέγεθος της εικόνας, αυτό δεν είναι αυτό που βασικά θέλουµε να ξέρουµε. Θέλουµε να αλλάζουµε τις εικόνες σε µια σελίδα. Γι' αυτό το σκοπό χρησιµοποιούµε την ιδιότητα src. Όπως και στο <img> η ιδιότητα src καθορίζει την εικόνα που δείχνεται. Με τη JavaScript 1.1 µπορείτε να ρυθµίσετε νέες διευθύνσεις σε µια ήδη φορτωµένη εικόνα της σελίδας. Το αποτέλεσµα θα είναι ότι η νέα εικόνα θα φορτώσει στη θέση της παλιάς. Κοιτάξτε το παρακάτω παράδειγµα: <img src="./img1.gif" name="myimage" width=100 height=100> Η εικόνα img1.gif φορτώνεται και παίρνει το όνοµα myimage. Η ακόλουθη γραµµή κώδικα αντικαταστεί τη img1.gif µε τη νέα εικόνα img2.gif: document.myimage.src= "img2.gif"; Η νέα εικόνα έχει το ίδιο µέγεθος µε την παλιά. εν µπορείτε να αλλάξετε το µέγεθος της περιοχής που βρίσκεται η εικόνα. Φορτώνοντας τις εικόνες από πριν Ένα µειονέκτηµα είναι ότι η εικόνα φορτώνει αφού έχει τεθεί η νέα τιµή της ιδιότητας src. Εφόσον η εικόνα δεν έχει φορτωθεί από πριν, παίρνει κάποιο καιρό µέχρι να φορτωθεί απ' το Internet. Σε µερικές περιπτώσεις δεν υπάρχει πρόβληµα - αλλά συχνά αυτές οι καθυστερήσεις δεν είναι αποδεκτές. Τι µπορούµε να κάνουµε γι' αυτό; Να φορτώσουµε τις εικόνες από πριν είναι η λύση. Γι' αυτό το σκοπό πρέπει να δηµιουργήσουµε ένα νέο Image αντικείµενο. Κοιτάξτε αυτές τις γραµµές κώδικα: hiddenimg= new Image(); hiddenimg.src= "img3.gif"; Η πρώτη γραµµή δηµιουργεί το αντικείµενο Image. Η δεύτερη γραµµή καθορίζει την εικόνα η οποία θα καλείται µέσω του hiddenimg. Έχουµε ήδη δει ότι όταν θέτουµε νέα τιµή στην ιδιότητα src αναγκάζεται ο browser να φορτώσει την νέα εικόνα. Έτσι η εικόνα img2.gif φορτώνει όταν η δεύτερη γραµµή του κώδικα φορτώνει. Όπως υπονοεί το όνοµα hiddenimg, η εικόνα δεν δείχνεται εφόσον ο browser τελειώσει το φόρτωµά της. Απλώς κρατείται στην µνήµη (ή καλύτερα στο cache) για να χρησιµοποιηθεί αργότερα. Για να δείξουµε την εικόνα, µπορούµε να γράψουµε: Η γλώσσα JavaScript 64

65 document.myimage.src= hiddenimg.src; Τώρα η εικόνα έρχεται απ το cache και δείχνεται αµέσως. Έχουµε καταφέρει να φορτώσουµε από πριν την εικόνα. Φυσικά ο browser πρέπει να έχει τελειώσει µε το να φορτώνει τις εικόνες, ώστε να µπορούµε να τις δούµε χωρίς καθυστέρηση. Έτσι, αν έχετε πολλές εικόνες θα υπάρχει καθυστέρηση έτσι κι αλλιώς, επειδή ο browser είναι απασχοληµένος κατεβάζοντας όλες τις άλλες εικόνες. Πρέπει πάντα να σκέφτεστε την ταχύτητα του Internet - το κατέβασµα των εικόνων δεν γίνεται γρηγορότερο µε αυτή τη µέθοδο. Προσπαθούµε µόνο να φορτώσουµε τις εικόνες από πριν - έτσι ο χρήστης θα τις δει από πριν. Αυτό κάνει την όλη διαδικασία πιο εύκολη. Αλλάζοντας εικόνες σύµφωνα µε την ενέργεια του χρήστη Μπορείτε να δηµιουργήσετε ωραία εφέ µε την αλλαγή εικόνων ως απάντηση σε ορισµένα events. Μπορείτε, π.χ. να αλλάζετε την εικόνα όταν ο δείκτης του mouse είναι πάνω από µια συγκεκριµένη περιοχή. οκιµάστε το ακόλουθο παράδειγµα µετακινώντας το δείκτη πάνω απ τις εικόνες (θα πάρετε µήνυµα λάθους αν έχετε JavaScript 1.0 browser - θα δούµε πως να το αποφεύγουµε αυτό σύντοµα): Ο πηγαίος κώδικας είναι ο εξής: <a href="#" onmouseover="document.myimage2.src='img2.gif'" onmouseout="document.myimage2.src='img1.gif'"> <img src="./img1.gif" name="myimage2;" width=160 height=50 border=0></a> Αυτός ο κώδικας δηµιουργεί κάποια προβλήµατα: Ο χρήστης µπορεί να µη χρησιµοποιεί JavaScript 1.1 browser. Η δεύτερη εικόνα δεν φορτώνεται από πριν. Πρέπει να ξαναγράψουµε τον κώδικα για κάθε εικόνα στη σελίδα. Θέλουµε ένα script το οποίο να µπορεί να χρησιµοποιηθεί και σε άλλες σελίδες χωρίς µεγάλες αλλαγές. Τώρα θα κοιτάξουµε ένα script που λύνει όλα αυτά τα προβλήµατα. To script παίρνει πιο πολύ ώρα να γραφεί - αλλά όταν έχει γραφεί, δεν χρειάζεται να ασχοληθείτε ξανά µαζί του. Υπάρχουν δύο απαιτήσεις για να κρατήσουν το script εύκαµπτο: Μη καθορισµένος αριθµός εικόνων - δεν έχει σηµασία αν είναι 10 ή 100 εικόνες. Μη καθορισµένη σειρά των εικόνων - θα πρέπει να είναι εφικτή η αλλαγή των εικόνων σε οποιαδήποτε θέση. Ιδού ο κώδικας µε σχόλια: <html> <head> <script language="javascript"> <!-- hide // ok, έχουµε JavaScript browser var browserok = false; var pics; // --> </script> <script language="javascript1.1"> <!-- hide // JavaScript 1.1 browser - ωραία! browserok = true; pics = new Array(); // --> </script> <script language="javascript"> <!-- hide var objcount = 0; // αριθµός των εικόνων στην σελίδα function preload(name, first, second) { // φόρτωµα των εικόνων από πριν σε array if (browserok) { Η γλώσσα JavaScript 65

66 pics[objcount] = new Array(3); pics[objcount][0] = new Image(); pics[objcount][0].src = first; pics[objcount][1] = new Image(); pics[objcount][1].src = second; pics[objcount][2] = name; objcount++; } } function on(name){ if (browserok) { for (i = 0; i < objcount; i++) { if (document.images[pics[i][2]]!= null) if (name!= pics[i][2]) { // set back all other pictures document.images[pics[i][2]].src = pics[i][0].src; } else { // απεικόνιση της εικόνας στη θέση του δείκτη document.images[pics[i][2]].src = pics[i][1].src; } } } } function off(){ if (browserok) { for (i = 0; i < objcount; i++) { // θέτουµε πίσω όλες τις εικόνες if (document.images[pics[i][2]]!= null) document.images[pics[i][2]].src = pics[i][0].src; } } } // Φόρτωµα των εικόνων από πριν - πρέπει να καθοριστεί // ποιες εικόνες θα φορτωθούν από πριν και σε ποιο Image // αντικείµενο θα ανήκουν (αυτό είναι το πρώτο argument). preload("link1", "img1f.gif", "img1t.gif"); preload("link2", "img2f.gif", "img2t.gif"); preload("link3", "img3f.gif", "img3t.gif"); // --> </script> <head> <body> <a href="./link1.htm" onmouseover="on('link1')" onmouseout="off()"> <img name="link1" src="./link1f.gif" width="140" height="50" border="0"></a> <a href="./link2.htm" onmouseover="on('link2')" onmouseout="off()"> <img name="link2" src="./link2f.gif" width="140" height="50" border="0"></a> <a href="./link3.htm" onmouseover="on('link3')" onmouseout="off()"> <img name="link3" src="./link3f.gif" width="140" height="50" border="0"></a> </body> </html> Η γλώσσα JavaScript 66

67 Αυτό το script βάζει όλες τις εικόνες στο array pics. Η preload() function η οποία καλείται στην αρχή χτίζει αυτό το array. Μπορείτε να δείτε ότι καλούµε την preload() function ως εξής: preload("link1", "img1f.gif", "img1t.gif"); Αυτό σηµαίνει ότι το script θα πρέπει να φορτώσει τις δυο εικόνες img1f.gif και img1t.gif. Η πρώτη εικόνα είναι η εικόνα η οποία θα εµφανίζεται όταν ο δείκτης του ποντικιού δεν είναι µέσα στη περιοχή της εικόνας. Όταν ο χρήστης θα µετακινήσει το δείκτη πάνω απ' την εικόνα, η δεύτερη εικόνα θα εµφανιστεί. Με τη πρώτη παράµετρο "img1" όταν καλούµε την preload() function καθορίζουµε σε ποιο αντικείµενο Image στη σελίδα θα ανήκουν οι δυο εικόνες. Αν κοιτάξετε στο κύριο µέρος του εγγράφου, θα δείτε µια εικόνα µε το όνοµα img1. Χρησιµοποιούµε το όνοµα της εικόνας (και όχι τον αριθµό της) για να µπορούµε να αλλάξουµε την σειρά των εικόνων χωρίς να αλλάζουµε το script. Οι δύο functions on() και off() καλούνται απ' τους event-handlers onmouseover και onmouseout. Επειδή οι εικόνες δεν µπορούν να αντιδράσουν στα MouseOver και MouseOut, βάλαµε ένα link γύρω απ' τις εικόνες. Όπως βλέπετε, η on() function βάζει πίσω όλες τις άλλες εικόνες. Αυτό είναι αναγκαίο γιατί µπορεί να είναι πολλές εικόνες highlighted (το event MouseOut δεν συµβαίνει, π.χ. όταν ο χρήστης µετακινήσει το δείκτη απ' την εικόνα κατ' ευθείαν έξω απ' το παράθυρο). Οι εικόνες είναι σίγουρα ένας ωραίος τρόπος για να εµπλουτίσουµε τις σελίδες. Το αντικείµενο Image σας αφήνει να δηµιουργήσετε πολύ ωραία εφέ. Αλλά σηµειώστε ότι όχι όλες οι εικόνες και τα JavaScript προγράµµατα κάνουν ωραίες τις σελίδες. Αν ρίξετε µια µατιά σε πολλές σελίδες, θα δείτε ότι χρησιµοποιούνται τέτοιες τεχνικές µε πάρα πολύ άσχηµο τρόπο. εν είναι η ποσότητα των εικόνων που κάνει τη σελίδα ωραία - είναι η ποιότητα. Είναι ιδιαίτερα ενοχλητικό να περιµένεις να κατεβούν 50 kb κακών γραφικών. Αν θυµηθείτε αυτό όταν φτιάχνετε JavaScript, οι επισκέπτες/ πελάτες είναι πιο πιθανό να ξαναδούν τη σελίδα Φόρµες Εξετάζοντας την φόρµα Οι φόρµες χρησιµοποιούνται συχνά στο Internet. Η φόρµα στέλνεται συνήθως µέσω του server ή µέσω ταχυδροµείου σε ένα συγκεκριµένο λογαριασµό. Μα πώς µπορούµε να είµαστε σίγουροι ότι ο χρήστης συµπλήρωσε σωστά τα πεδία της φόρµας? Με τη βοήθεια του JavaScript, η φόρµα µπορεί εύκολα να ελεγχθεί πριν σταλθεί. Πρώτα, θέλω να σας δείξω πώς µπορούµε να εξετάσουµε µια φόρµα. Μετά, θα ρίξουµε µια µατιά στo να στέλνουµε πληροφορίες µέσω Internet. Πρώτα απ 'όλα, θέλουµε να δηµιουργήσουµε ένα script. Η HTML θα περιέχει δύο πεδία κειµένου. Ο χρήστης θα γράφει το όνοµά του στο πρώτο και την διεύθυνση του στο δεύτερο. Μπορείτε να εισάγετε οτιδήποτε στα πεδία κειµένου και να πατήσετε το κουµπί. Επίσης, προσπαθήστε να µη βάλετε τίποτα και να πατήσετε το κουµπί. Το όνοµά σας: Η διεύθυνση σας: Όσον αφορά το πρώτο πεδίο κειµένου, θα λάβετε ένα µήνυµα λάθους, αν δεν γράψετε τίποτα. Κάθε άλλη τιµή του πεδίου θεωρείται σωστή. Φυσικά, αυτό δεν εµποδίζει τον χρήστη απ' το να γράψει ένα ψεύτικο όνοµα. Ο browser δέχεται ακόµα και αριθµούς. Αν θέλετε λοιπόν να βάλετε την τιµή '17' θα πάρετε αποτέλεσµα 'Γεια 17!'. Γι' αυτό λοιπόν, αυτός δεν είναι ο καλύτερος έλεγχος. Η δεύτερη φόρµα είναι πιο έξυπνα φτιαγµένη. Προσπαθήστε να βάλετε ένα απλό κείµενο - το όνοµά σας για παράδειγµα. εν θα δουλέψει (εκτός αν έχετε στο όνοµά σας...). Αυτό το κριτήριο για να δεχθεί την τιµή σαν κανονική διεύθυνση είναι Ένα θα κάνει την δουλειά - αλλά αυτό δεν έχει και πολύ νόηµα. Κάθε Internet διεύθυνση έτσι φαίνεται σωστό να ελέγχουµε εδώ. Πώς δείχνει το script γι' αυτά τα δύο πεδία κειµένου και την εξέτασή τους? Ιδού ο κώδικας: <html> <head> <script language="javascript"> <!-- Hide function test1(form) { Η γλώσσα JavaScript 67

68 if (form.text1.value == "") alert("παρακαλώ, εισάγετε µια τιµή!") else { alert("γεια "+form.text1.value+"! Όλα ok!"); } } function test2(form) { if (form.text2.value == "" 0) == -1) alert("το δεν είναι σωστά γραµµένο!"); else alert("ok!"); } // --> </script> </head> <body> <form name="first"> Enter your name:<br> <input type="text" name="text1"> <input type="button" name="button1" value=" οκιµή πεδίου" onclick="test1(this.form)"> <P> Enter your address:<br> <input type="text" name="text2"> <input type="button" name="button2" value=" οκιµή πεδίου" onclick="test2(this.form)"> </body> </html> Πρώτα πρέπει να ρίξουµε µια µατιά στον HTML κώδικα στο κύριο µέρος. ηµιουργούµε δύο πεδία κειµένου και δύο κουµπιά. Τα κουµπιά καλούν τις functions test1(...) και test2(...), ανάλογα µε ποιο κουµπί πατιέται. Περνάµε την τιµή this.form στις functions για να µπορούµε να καθορίσουµε τα σωστά πεδία στις functions αργότερα. Η function test1(form) δοκιµάζει αν το πεδίο είναι κενό. Αυτό γίνεται γράφοντας if (form.text1.value == "").... Το 'form' είναι η µεταβλητή που λαµβάνει την τιµή 'this.form' όταν καλείται η function. Μπορούµε να πάρουµε την τιµή του πεδίου κειµένου χρησιµοποιώντας το 'value' σε συνδυασµό µε το form.text1. Για να κοιτάξουµε αν η τιµή είναι κενή, την συγκρίνουµε µε "". Αν η τιµή είναι ίση µε "", τότε δεν υπάρχει τιµή. Ο χρήστης θα πάρει το µήνυµα λάθους. Αν η τιµή δεν ισούται µε "", τότε ο χρήστης θα λάβει ok. Το πρόβληµα εδώ είναι ότι ο χρήστης µπορεί να εισάγει µόνο κενά. Αυτό θα βλέπεται σαν σωστή τιµή! Αν θέλετε, µπορείτε να ελέγχετε γι' αυτές τις πιθανότητες και να τις αποκλείετε. Πιστεύω ότι θα 'ναι εύκολο µε τις πληροφορίες που δίνονται εδώ. Τώρα, πρέπει να κοιτάξουµε στη function test2(form). Αυτή η function συγκρίνει ξανά την τιµή µε το "", για να δει αν έχει εισαχθεί τιµή ή όχι. Αλλά έχουµε προσθέσει κάτι στο if. Το λέγεται OR operator. Το if ελέγχει αν το πρώτο ή το δεύτερο κριτήριο σύγκρισης είναι σωστό. Αν τουλάχιστον το ένα απ' τα δύο είναι σωστό, η όλη if εντολή είναι σωστή και το ακόλουθο κείµενο θα εκτελεστεί. Αυτό σηµαίνει ότι θα πάρετε ένα µήνυµα λάθους αν η τιµή είναι κενή ή δεν στο κείµενο. Το δεύτερο operation στην εντολή if κοιτάζει αν στη τιµή. Ελέγχοντας για συγκεκριµένους χαρακτήρες Μερικές φορές θέλετε να περιορίσετε τη φόρµα σε συγκεκριµένους χαρακτήρες ή αριθµούς. Σκεφτείτε ένα τηλεφωνικό αριθµό - η τιµή θα έπρεπε να έχει µόνο αριθµούς (υπολογίζουµε ότι ο αριθµός δεν περιέχει άλλους χαρακτήρες).θα µπορούσαµε να ελέγξουµε αν το κείµενο είναι µόνο αριθµοί. Αλλά πολλοί άνθρωποι χρησιµοποιούν άλλους χαρακτήρες στους αριθµούς - π.χ.: , 01234/56789 ή (µε κενό, δηλαδή, ενδιάµεσα). Ο χρήστης δεν πρέπει να αναγκαστεί να µην χρησιµοποιήσει αυτά τα σύµβολα. Έτσι πρέπει να επεκτείνουµε το script να ελέγχει για ψηφία και σύµβολα. Το παράδειγµα από κάτω κάνει αυτή τη δουλειά. Telephone: Η γλώσσα JavaScript 68

69 Bottom of Form Ιδού ο πηγαίος κώδικας: <html> <head> <script language="javascript"> <!-- hide function check(input) { var ok = true; for (var i = 0; i < input.length; i++) { var chr = input.charat(i); var found = false; for (var j = 1; j < check.length; j++) { if (chr == check[j]) found = true; } if (!found) ok = false; } return ok; } function test(input) { if (!check(input, "1", "2", "3", "4", "5", "6", "7", "8", "9", "0", "/", "-", " ")) { alert("input not ok."); } else { alert("input ok!"); } } // --> </script> </head> <body> <form> Telephone: <input type="text" name="telephone" value=""> <input type="button" value="έλεγχος" onclick="test(this.form.telephone.value)"> </form> </body> </html> Η function test() προσδιορίζει ποιοι χαρακτήρες επιτρέπονται. Στέλνοντας µια φόρµα Ποιοι διαφορετικοί τρόποι υπάρχουν για να στείλεις µία φόρµα; Ο απλός τρόπος είναι η αποστολή της φόρµας µέσω . Αυτή τη µέθοδο θα την αναλύσουµε σ' αυτό το σηµείο. Αν θέλετε τη φόρµα να τη χειριστεί ο server, χρειάζεστε να χρησιµοποιήσετε CGI (Common Gateway Interface). Αυτό επιτρέπει την διαχείριση της φόρµας αυτόµατα. Ο server µπορεί να δηµιουργήσει για παράδειγµα, µια database από τις φόρµες που παραλήφθηκαν απ' τους πελάτες. Άλλο παράδειγµα είναι οι index-pages όπως το Yahoo. Έχουν µια φόρµα για να ψάχνουν στην database. Ο χρήστης παίρνει απάντηση γρήγορα, όταν πατηθεί το κουµπί submit. εν είναι ανάγκη να περιµένει µέχρι οι άνθρωποι που συντηρούν τον server να διαβάσουν την φόρµα και να κοιτάξουν για την πληροφορία. Αυτή η δουλειά γίνεται αυτόµατα απ' το server. Το JavaScript δεν µπορεί να κάνει τέτοια πράγµατα. εν µπορείτε να δηµιουργήσετε guestbooks µε τη JavaScript, γιατί η JavaScript δεν είναι ικανό να γράψει ένα αρχείο στον server. Αυτό µπορεί να γίνει µόνο µέσω CGI. Φυσικά, µπορείτε να δηµιουργήσετε ένα guestbook µέσω . Αλλά θα πρέπει να βάζετε τις τιµές µόνοι σας. Αυτό είναι εντάξει αν δεν περιµένετε 1000 γράµµατα την ηµέρα. Το script είναι µόνο HTML. Έτσι, η JavaScript δεν χρειάζεται εδώ! Μόνο, αν χρειασθείτε να ελέγξετε τις τιµές των πεδίων θα χρειαστεί η JavaScript. Η γλώσσα JavaScript 69

70 <form method=post enctype="text/plain"> Σας αρέσει αυτή η σελίδα? <input name="choice" type="radio" value="1"> καθόλου.<br> <input name="choice" type="radio" value="2" CHECKED> Σπατάληµα χρόνου είναι.<br> <input name="choice" type="radio" value="3">η χειρότερη σελίδα που έχω δει.<br> <input name="submit" type="submit" value="αποστολή"> </form> Η ιδιότητα enctype="text/plain" χρησιµοποιείται για να στείλει απλό κείµενο, κι όχι µέρη κώδικα. Αυτό κάνει την ανάγνωση του γράµµατος πιο εύκολη. Αν θέλετε να ελέγξετε την φόρµα πριν σταλθεί, µπορείτε να χρησιµοποιήσετε το onsubmit eventhandler. Μπορείτε να βάλετε αυτόν τον event-handler στην εντολή <form>. Ο κώδικας θα δείχνει ως εξής: function validate() { // Έλεγχος της φόρµας //... if (inputok) return true else return false; }... <form... onsubmit="return validate()">... Με αυτό τον κώδικα, η φόρµα δεν στέλνεται, αν έχει γίνει κάποιο λάθος. Πώς να κάνετε focus σε ένα συγκεκριµένο αντικείµενο Με τη βοήθεια της µεθόδου focus(), µπορείτε να κάνετε την φόρµα σας πιο φιλική ως προς τον χρήστη. Μπορείτε να καθορίσετε ποιο στοιχείο της φόρµας είναι εστιασµένη στην αρχή. Ή µπορείτε να πείτε στον browser να εστιάσει στο πεδίο της φόρµας που είχε λάθος τιµή. Αυτό σηµαίνει ότι ο browser θα τοποθετήσει τον κέρσορα στο στοιχείο της φόρµας, έτσι ο χρήστης δεν είναι ανάγκη να κάνει click στο πεδίο πριν εισάγει τιµή Το ακόλουθο script θα κάνει την δουλειά αυτή: function setfocus() { document.first.text1.focus(); } bla bla bla Αυτό το script θα εστίαζε το πρώτο πεδίο κειµένου χάρις στο script που έδειξα πάνω. Πρέπει να καθορίσετε το όνοµα της φόρµας - που εδώ λέγεται first - και το όνοµα του κάθε στοιχείου - εδώ text1. Αν θέλετε να εστιάσετε αυτό το στοιχείο της φόρµας όταν φορτώνεται η σελίδα, µπορείτε να θέσετε την ιδιότητα onload στην εντολή <body>. Αυτό θα έδειχνε ως εξής: <body onload="setfocus()"> Μπορούµε επίσης να µεγαλώσουµε το κώδικα ως εξής: function setfocus() { document.first.text1.focus(); document.first.text1.select(); } Η γλώσσα JavaScript 70

71 5.12. Γεγονότα του JavaScript 1.2 Νέα γεγονότα Τα ακόλουθα events υποστηρίζονται στη JavaScript 1.2: Abort Focus MouseOut Submit Blur KeyDown MouseOver Unload Click KeyPress MouseUp Change KeyUp Move DblClick Load Reset DragDrop MouseDown Resize Error MouseMove Select Μπορείτε να δείτε ότι καινούργια events έχουν εισαχθεί. Θα κοιτάξουµε µερικά απ' αυτά σε αυτή την ενότητα. Πρώτα ας κοιτάξουµε το Resize. Με τη βοήθεια αυτού του event ξέρουµε πότε ο χρήστης αλλάζει το µέγεθος του παραθύρου. Το ακόλουθο script δείχνει αυτό: <html> <head> <script language="javascript"> window.onresize= message; function message() { alert("το παράθυρο έχει αλλάξει µέγεθος!"); } </script> </head> <body> Παρακαλώ, αλλάξτε το µέγεθος του παραθύρου. </body> </html> Με τη γραµµή window.onresize= message; ρυθµίζουµε τον event-handler. Αυτό σηµαίνει ότι η function message() καλείται όταν το παράθυρο αλλάζει µέγεθος. Αν, για παράδειγµα, έχετε ένα κουµπί, µπορείτε να ρυθµίσετε το event-handler ως εξής: <form name="myform"> <input type="button" name="mybutton" onclick=" alert('κάποιος µε πάτησε!')"> </form> Αλλά µπορείτε και να γράψετε το εξής: <form name="myform"> <input type="button" name="mybutton"> </form>... <script language="javascript> document.myform.mybutton.onclick= message; function message() { alert('κάποιος µε πάτησε!'); } </script> Η γλώσσα JavaScript 71

72 Μπορεί να βρίσκετε την δεύτερη περίπτωση πιο πολύπλοκη. Γιατί λοιπόν την χρησιµοποιούµε στο πρώτο script? Το πρόβληµα είναι ότι το αντικείµενο window δεν καθορίζεται µέσω µιας HTML εντολής - έτσι, πρέπει να χρησιµοποιήσουµε τον δεύτερο τρόπο. ύο σηµαντικά πράγµατα: Πρώτον, δεν πρέπει να γράψετε window.onresize - δηλαδή, πρέπει να χρησιµοποιήσετε µικρά γράµµατα, όχι κεφαλαία. εύτερον, δεν πρέπει να γράψετε παρένθεση µετά το message. Αν γράψετε window.onresize= message() ο browser µεταφράζει το message() σαν κάλεσµα function. Αλλά, σε αυτή τη περίπτωση δεν θέλουµε να καλέσουµε την function απ' ευθείας - θέλουµε απλώς να ρυθµίσουµε το event-handler Το αντικείµενο Event Ένα νέο αντικείµενο, το Event έχει προστεθεί στη JavaScript 1.2. Περιλαµβάνει properties τα οποία περιγράφουν γεγονότα. Κάθε φορά που ένα event συµβαίνει, το αντικείµενο Event περνά στο event handler. Αν χρησιµοποιείτε Netscape Navigator 4.x, ένα µήνυµα θα εµφανιστεί µε τις συντεταγµένες του ποντικιού και πατήσετε πάνω στην εικόνα, όταν συνέβηκε το event: Ιδού και ο πηγαίος κώδικας: <layer> <a href="#" onclick="alert('x: ' + event.x + ' y: ' + event.y); return false;"> <img src="./davinci.jpg" width=209 height=264 border=0></a> </layer> Μπορείτε να δείτε ότι χρησιµοποιώ τον event handler onclick µέσα στη <a> εντολή, όπως θα κάναµε και µε παλιότερες JavaScript εκδόσεις. Αυτό που είναι καινούργιο είναι ότι χρησιµοποιούµε το event.x και το event.y για τη δηµιουργία της τιµής του παραθύρου. Το αντικείµενο Event είναι αυτό που χρειαζόµαστε για να ξέρουµε την θέση του mouse πάνω στην εικόνα. Έβαλα τα πάντα µέσα σε ένα <layer>. Έτσι θα πάρουµε τις συντεταγµένες σε σχέση µε το layer, δηλαδή την εικόνα. ιαφορετικά θα παίρναµε τις συντεταγµένες του ποντικιού πάνω στο παράθυρο. (Το return false; χρησιµοποιείται ώστε ο browser να µην πάει στην διεύθυνση.) Το αντικείµενο Event έχει τις ακόλουθες ιδιότητες (θα δούµε κάποιες απ' αυτές στα ακόλουθα παραδείγµατα): Ιδιότητα Περιγραφή Data Array µε URLs των dropped αντικειµένων όταν ένα DragDrop event συµβαίνει. layerx layery modifiers pagex pagey Οριζόντια θέση του ποντικιού σε pixel πάνω σε layer. Σε συνδυασµό µε το Resize event, αυτή η ιδιότητα παρουσιάζει το µήκος του παραθύρου. Κάθετη θέση του ποντικιού σε pixel πάνω σε layer. Σε συνδυασµό µε το Resize event, αυτή η ιδιότητα παρουσιάζει το ύψος του παραθύρου. Μεταβλητή που δείχνει την κατάσταση των πλήκτρων αλλαγής (Shift, Caps Lock, Alt, κ.λ.π.) - παίρνει τις τιµές ALT_MASK, CONTROL_MASK, META_MASK, SHIFT_MASK. Οριζόντια θέση του ποντικιού σε pixel πάνω στο παράθυρο. Κάθετη θέση του ποντικιού σε pixel πάνω στο παράθυρο. screenx screeny target type which x y Οριζόντια θέση του ποντικιού σε in pixel πάνω στην οθόνη. Κάθετη θέση του ποντικιού σε pixel πάνω στην οθόνη. Μεταβλητή που αντιπροσωπεύει το event στο οποίο στάλθηκε. µεταβλητή που παρουσιάζει τον τύπο του event. ASCII τιµή του πλήκτρου που πατήθηκε, ή του πλήκτρου του ποντικιού. Συνώνυµο µε το layerx Συνώνυµο µε το layery Η γλώσσα JavaScript 72

73 Καταλαβαίνοντας τα Events Μια σηµαντική λειτουργία είναι η "φυλάκιση" του event (δηλαδή να καταλαβαίνουµε πότε ένα γεγονός συµβαίνει και να ενεργούµε ανάλογα). Αν κάποιος για παράδειγµα πατήσει ένα κουµπί, το onclick event handler του κουµπιού αυτού καλείται. Με τη βοήθεια της "φυλάκισης" του event µπορείτε να έχετε ως αποτέλεσµα το παράθυρο, έγγραφο ή layer να φυλακίζει το event πριν το χειριστεί το ίδιο το κουµπί. Έτσι το παράθυρο, έγγραφο ή layer µπορεί να χειριστεί το γεγονός πριν φτάσει στο στόχο του (το κουµπί). Ας κοιτάξουµε το επόµενο παράδειγµα, για να δούµε πώς αυτό χρησιµεύει: <html> <head> <script language="javascript"> window.captureevents(event.click); window.onclick= handle; function handle(e) { alert("το παράθυρο φυλάκισε το γεγονός!"); return true; // δηλ. ακολουθία του link } </script> </head> <body> <a href="test.htm">πατήστε αυτό το link</a> </body> </html> Μπορείτε να δείτε ότι δεν θέτουµε ένα event handler µέσα στο <a>. Απεναντίας, χρησιµοποιούµε το window.captureevents(event.click); για να φυλακίσουµε το Click event µέσω του αντικειµένου window. Κανονικά το window δεν ξέρει για το Click event. Αλλά, µε το να φυλακίσουµε το event µπορούµε να το µεταθέσουµε στο window. Σηµειώστε τη γραφή του Event.CLICK. Το CLICK πρέπει να γραφεί µε κεφαλαία. Αν θέλετε να φυλακίσετε πολλά γεγονότα, πρέπει να τα διαχωρίσετε µε - παράδειγµα: window.captureevents(event.click Event.MOVE); Μπορείτε να δείτε ότι χρησιµοποιούµε το return true; µέσα στη function handle() την οποία ρυθµίσαµε σαν event handling function. Αυτό σηµαίνει ότι ο browser θα ακολουθήσει το link µετά την εκτέλεση της handle() function. Αν γράψετε return false;, όλες οι ακόλουθες ενέργειες παραλείπονται. Αν ορίσετε ένα onclick event handler µέσα στο <a> θα δείτε ότι αυτός ο event handler δεν καλείται. Αυτό είναι φανερό, µιας και το window φυλάκισε το event πριν φτάσει το link. Αν ορίσετε τη handle() function ως εξής function handle(e) { alert("το παράθυρο φυλάκισε το γεγονός!"); window.routeevent(e); return true; } ο υπολογιστής κοιτάζει αν υπάρχουν άλλοι event handlers καθορισµένοι απ' αυτό το αντικείµενο. Η µεταβλητή e είναι το αντικείµενο Event το οποίο προσπελάζεται όταν εκτελείται η function. Μπορείτε επίσης να στείλετε ένα event απ' ευθείας σε ένα συγκεκριµένο αντικείµενο. Γι' αυτό µπορούµε να χρησιµοποιήσουµε τη µέθοδο handleevent(). Αυτό θα δείχνει ως εξής: <html> <script language="javascript"> window.captureevents(event.click); window.onclick= handle; function handle(e) { document.links[1].handleevent(e); } </script> Η γλώσσα JavaScript 73

74 <a href="test.htm">πατήστε αυτό το link</a><br> <a href="test.htm" onclick="alert('event handler στο δεύτερο link!');"> εύτερο link</a> </html> Όλα τα Click events στέλνονται στο δεύτερο link - ακόµα κι αν δεν πατήσετε απ' ευθείας στα links! Το ακόλουθο script δείχνει ότι το script µπορεί να αντιδράσει σε πατήµατα των πλήκτρων. Απλώς πατήστε ένα κουµπί για να δείτε τη λειτουργία εν δράση. <html> <script language="javascript"> window.captureevents(event.keypress); window.onkeypress= pressed; function pressed(e) { alert("ένα κουµπί πατήθηκε! Η ASCII τιµή του: " + e.which); } </script> </html> Η γλώσσα JavaScript 74

75 6. Η γλώσσα VBScript και η τεχνολογία ASP 6.1. Τι είναι η ASP Η γλώσσα ASP (Active Server Pages) είναι µια γλώσσα σεναρίου (scripting language) που κατασκευάστηκε από την Microsoft µε σκοπό τη δηµιουργία δυναµικών και διαλογικών ιστοσελίδων. Μια ASP σελίδα είναι ουσιαστικά µια HTML σελίδα που περιέχει ειδικές εντολές (scripts) οι οποίες εκτελούνται στον κεντρικό εξυπηρετητή του δικτύου πριν σταλούν οι πληροφορίες που θα παραχθούν στον browser του χρήστη για να τις δει. Όταν ένας χρήστης αιτηθεί µιας ASP σελίδας µέσω του browser του, το αίτηµα αυτό αποστέλλεται στον Web Server, ο οποίος εντοπίζει το αρχείο που περιέχει την ASP σελίδα, το επεξεργάζεται από την αρχή µέχρι το τέλος κι εκτελεί οποιεσδήποτε εντολές σεναρίου βρει κατά την επεξεργασία του. Στη συνέχεια παράγει τον ανάλογο HTML κώδικα ο οποίος στέλλεται πίσω στον browser του χρήστη σε µορφή HTML σελίδας. Πως τρέχει µια ASP σελίδα Ο καλύτερος τρόπος για να καταλάβει κανείς πως δουλεύουν οι ASP σελίδες είναι να συγκρίνει µια ASP σελίδα µε µια συνηθισµένη HTML σελίδα. Πιο κάτω ακολουθούν δύο σενάρια που αφορούν, το πρώτο το αίτηµα µιας τυπικής HTML σελίδας και το δεύτερο το αίτηµα µιας ASP σελίδας. Σκεφτείτε πως ζητάτε να δείτε στον φυλλοµετρητή σας (browser) µια τυπική HTML σελίδα που βρίσκεται αποθηκευµένη στη διεύθυνση Τότε συµβαίνουν τα εξής βήµατα: 1. Γράφετε τη διεύθυνση στο χώρο παροχής διευθύνσεων (address bar) του φυλλοµετρητή σας. 2. Ο φυλλοµετρητής στέλνει ένα αίτηµα στον εξυπηρετητή του δικτύου (Web Server) για τη συγκεκριµένη σελίδα. 3. Ο εξυπηρετητής λαµβάνει το αίτηµα, αναζητά το αρχείο που αφορά τη συγκεκριµένη σελίδα από το δίσκο (ή τη µνήµη) και τη στέλνει πίσω στο φυλλοµετρητή. Αυτό είναι ένα σχετικά απλό σενάριο. Ο Web Server απλά ικανοποιεί το αίτηµα του χρήστη µε το να παίρνει την αίτηση για µια σελίδα, να εντοπίζει το αρχείο στο οποίο έχει φυλαχτεί και να το στέλνει πίσω στον browser. Υπάρχει όµως ένα επιπλέον, αλλά πολύ σηµαντικό βήµα, το οποίο σχετίζεται µε την αίτηση των AS σελίδων. Οι ASP σελίδες καταλήγουν σε.asp. Ας υποθέσουµε ότι ζητάτε να δείτε µια ASP σελίδα (την index.asp) που βρίσκεται στη διεύθυνση Τότε συµβαίνουν τα εξής βήµατα: 1. Γράφετε τη διεύθυνση στο address bar του browser σας. 2. Ο browser στέλνει ένα αίτηµα στον Web Server για τη σελίδα 3. Web Server εντοπίζει και λαµβάνει τη σελίδα από το δίσκο (ή από τη µνήµη) 4. Στη συνέχεια ο server επεξεργάζεται τη σελίδα από την αρχή µέχρι το τέλος και αν βρει κάποιο script το εκτελεί. 5. Η HTML σελίδα η οποία λαµβάνεται όταν πλέον εκτελεστούν τα script που περιέχονται στην ASP σελίδα, αποστέλλεται στον browser. Το επιπλέον βήµα είναι το βήµα 4. Όταν αιτηθεί µια ASP σελίδα, όλα τα scripts που υπάρχουν σ' αυτήν εκτελούνται µε τη σειρά που συναντούνται από τον server. Προσέξτε όµως ότι στον browser τελικά αποστέλλεται µια συνηθισµένη HTML σελίδα. ηλαδή, ο χρήστης βλέπει τελικά µια κανονική HTML σελίδα. Όπως φαίνεται λοιπόν από τα πιο πάνω σενάρια ο χρήστης δακτυλογραφεί µια διεύθυνση µιας ιστοσελίδας και ο browser στέλνει ένα αίτηµα για τη σελίδα στον web server. Ο web server λαµβάνει το αίτηµα αυτό, εντοπίζει το αρχείο στη µνήµη ή στο δίσκο του, εκτελεί τις εντολές σεναρίου αν το αρχείο αφορά µια ASP σελίδα, και µεταδίδει το HTML αρχείο που εντοπίστηκε ή δηµιουργήθηκε πίσω στον browser. Ο browser µε τη σειρά του, µεταφράζει το HTML αρχείο και εµφανίζει το αποτέλεσµα στην οθόνη. Η διαφορά µιας HTML σελίδας από µια ASP σελίδα είναι ότι τα αποτελέσµατα της πρώτης είναι στατικά καθώς τα δεδοµένα της σελίδας δεν αλλάζουν. Αντίθετα οι ASP σελίδες είναι δυναµικές. ηλαδή όταν ένας browser αιτείται ενός.asp αρχείου από τον web server, ο διερµηνέας της ASP Η γλώσσα VBScript και η τεχνολογία ASP 75

76 διαβάζει το αρχείο από την αρχή ως το τέλος και εκτελεί οποιεσδήποτε εντολές σεναρίου συναντήσει, στέλλοντας στο τέλος το παραγόµενο HTML αρχείο στον browser. Αυτό σηµαίνει πως από την ίδια ASP σελίδα παράγεται διαφορετικό αποτέλεσµα κάθε φορά που ζητείται Εισαγωγή στη VBScript Η VBScript, που ανήκει στην έκδοση της Microsoft για Visual Basic Scripting, είναι µια τροποποιηµένη έκδοση της Visual Basic. Αν και δεν προσφέρει τη λειτουργικότητα που παρέχει η Visual Basic, εντούτοις παρέχει µια δυναµική, εύκολη προς µάθηση γλώσσα προγραµµατισµού που µπορεί να χρησιµοποιηθεί για να προσδώσει αλληλεπίδραση στις ιστοσελίδες µας. Αν κάποιος έχει ήδη γνώση σε Visual Basic ή Visual Basic for Applications (VBA), θα µπορέσει εύκολα να δουλέψει µε τη VBScript και θα µπορέσει άµεσα να αποδώσει. Αν όµως δεν έχει προηγούµενη πείρα σε άλλες εκδόσεις της Visual Basic, αυτό δεν αποτελεί µειονέκτηµα αφού η VBScript είναι πολύ εύκολη στη µάθηση, ακόµα και για αρχάριους προγραµµατιστές. Ο λόγος που αναφερόµαστε σε VBScript είναι ότι αποτελεί την κατ' εξοχήν γλώσσα προγραµµατισµού που χρησιµοποιείται για τη δηµιουργία ASP σελίδων. Η VBScript σε άλλες εφαρµογές και φυλλοµετρητές (browsers): Ως developer, µπορεί κανείς να χρησιµοποιήσει στα προϊόντα του τη VBScript χωρίς κανένα κόστος. Η Microsoft παρέχει δυαδικές υλοποιήσεις (binary implementations) της VBScript για τα 32-bit Windows API, τα 16-bit Windows API και τα Macintosh. Επίσης η VBScript µπορεί να χρησιµοποιηθεί σε όλους τους Web browsers. Μπορεί επίσης να αποτελέσει την κύρια γλώσσα σεναρίου για πολλές άλλες εφαρµογές. Τύποι εδοµένων στη VBScript Σε αυτό το κεφάλαιο θα µάθουµε για τους τύπους δεδοµένων στην VBScript (VBScript Data Types) Η VBScript παρέχει µόνο ένα τύπο δεδοµένων που καλείται Variant (µεταβλητή). Μια µεταβλητή είναι ένας ειδικός τύπος δεδοµένων που µπορεί να περιέχει διαφορετικά είδη πληροφορίας, ανάλογα µε το πως χρησιµοποιείται. Επειδή η Μεταβλητή είναι ο µοναδικός τύπος δεδοµένων στη VBScript, είναι επίσης και ο µόνος τύπος δεδοµένων που επιστρέφεται από όλες τις συναρτήσεις της. Στην πιο απλή της µορφή µια Μεταβλητή περιέχει είτε αριθµητική πληροφορία είτε µια συµβολοσειρά (string). Η Variant συµπεριφέρεται ως αριθµός όταν χρησιµοποιείται σε αριθµητικά συµφραζόµενα και ως string όταν χρησιµοποιείται σε συµφραζόµενα συµβολοσειρών. ηλαδή, αν κάποιος δουλεύει µε δεδοµένα που µοιάζουν όπως οι αριθµοί, η VBScript υποθέτει ότι είναι η Μεταβλητή είναι ένας αριθµός και εφαρµόζει ότι είναι κατάλληλο για αριθµούς. Με τον ίδιο τρόπο αν κάποιος δουλεύει µε δεδοµένα που µοιάζουν µε strings, τότε η VBScript τους συµπεριφέρεται µε ανάλογο τρόπο. Είναι πιθανών να µετατρέψεις τη συµπεριφορά ενός αριθµού σε string µε το να τους συµπεριλάβεις µέσα σε εισαγωγικά ("0"). Πέραν της απλής κατηγοριοποίησης σε αριθµούς και strings, µια Μεταβλητή µπορεί να διακριθεί σε υποκατηγορίες που αφορούν τη φύση της πληροφορίας που διατηρεί. Για παράδειγµα, µια αριθµητική Μεταβλητή µπορεί να κρατά πληροφορία που να αναπαριστά µια ηµεροµηνία ή ώρα. Όταν οι µεταβλητές που ανήκουν σε µια υποκατηγορία χρησιµοποιηθούν µαζί µε άλλες µεταβλητές της ίδιας υποκατηγορίας, το αποτέλεσµα θα είναι αντίστοιχο της υποκατηγορίας αυτής (δηλαδή ηµεροµηνία, ώρα, κλπ.). Υπάρχει επίσης µια µεγάλη ποικιλία Μεταβλητών που ' κρατούν' αριθµητική πληροφορία και διαφέρουν σε µέγεθος (από Boolean τιµές µέχρι τεράστιους floating-point αριθµούς). Αυτές οι διαφορετικές κατηγορίες που µπορεί να κρατά µια Μεταβλητή καλούνται υποκατηγορίες (subtypes). Τις περισσότερες φορές µπορούµε απλά να τοποθετήσουµε εµείς την πληροφορία που θα θέλαµε να περιλαµβάνει µια Μεταβλητή και αυτή θα συµπεριφερθεί µε τον πιο κατάλληλο τρόπο που της αναλογεί. Ο πιο κάτω πίνακας περιλαµβάνει όλες τις υποκατηγορίες που µπορεί να πάρει µια Μεταβλητή. Subtype Description Η Μεταβλητή δεν έχει αρχικοποιηθεί. Η τιµή της είναι 0 αν είναι αριθµός ή έχει Empty µήκος 0 αν είναι string (""). Null H Μεταβλητή, σκόπιµα, δεν περιέχει έγκυρα δεδοµένα. Boolean Περιέχει τις τιµές True ή False. Byte Περιέχει ένα ακέραιο στο διάστηµα 0 µέχρι 255. Integer Περιέχει ένα ακέραιο στο διάστηµα -32,768 µέχρι 32,767. Η γλώσσα VBScript και η τεχνολογία ASP 76

77 Currency -922,337,203,685, µέχρι 922,337,203,685, Long Ακέραιος στο διάστηµα -2,147,483,648 µέχρι 2,147,483,647. Single Double Περιέχει µονής ακρίβειας, floating-point αριθµό στο διάστηµα E38 µέχρι E-45 για αρνητικές τιµές και E-45 µέχρι E38 για θετικές τιµές. Περιέχει διπλής ακρίβειας, floating-point αριθµό στο διάστηµα E308 µέχρι E-324 για αρνητικές τιµές και E-324 µέχρι E308 για θετικές τιµές. Περιέχει ένα αριθµό που αντιπροσωπεύει µια ηµεροµηνία µεταξύ 1η Date (Time) Ιανουαρίου, 100 µέχρι 31 εκεµβρίου, Περιέχει ένα µεταβλητού µεγέθους string που µπορεί να είναι περίπου δύο String δισεκατοµµυρίων χαρακτήρων σε µέγεθος. Object Περιέχει ένα αντικείµενο. Error Περιέχει ένα κωδικό λάθους. (error number) Επίσης µπορεί κανείς να χρησιµοποιήσει συναρτήσεις που µετατρέπουν από µια υποκατηγορία σε άλλη. Επιπλέον, η συνάρτηση VarType επιστρέφει πληροφορία για το πως τα δεδοµένα έχουν αποθηκευτεί µέσα σε µια Μεταβλητή. Στο κεφάλαιο που ακολουθεί θα µάθουµε πως να δηλώνουµε µεταβλητές (variables) στη VBScript. Μεταβλητές στη VBScript Σε αυτό το κεφάλαιο θα µάθουµε πως δηλώνουµε µεταβλητές στη VBScript, πως τους αναθέτουµε τιµές, ποια είναι η εµβέλεια και η διάρκεια ζωής τους. Μια µεταβλητή είναι ένας εύχρηστος χώρος για να αποθηκεύεται πληροφορία που µπορεί να αλλάξει κατά τη διάρκεια εκτέλεσης ενός προγράµµατος γραµµένο σε VBScript και αναφέρεται βασικά σε χώρους αποθήκευσης στον υπολογιστή. Για παράδειγµα, µπορεί κάποιος να δηµιουργήσει µια Μεταβλητή, ονοµάζοντάς την ClickCount, η οποία είναι υπεύθυνη για να αποθηκεύει τον αριθµό που ένας χρήστης κάνει 'click' σε ένα αντικείµενο µιας συγκεκριµένης ιστοσελίδας. εν είναι σηµαντικό το που ακριβώς αποθηκεύεται αυτή η µεταβλητή. Σηµαντικό όµως είναι το γεγονός ότι µόνο µε το όνοµα της µεταβλητής µπορεί να αναφερθεί κανείς για να δει ή να αλλάξει τα περιεχόµενά της. ήλωση Μεταβλητών (Variable Declaration): Ορίζεις µεταβλητές κάνοντας χρήση των Dim, Public ή Private statement. Για παράδειγµα: Dim DegreesFahrenheit Μπορείς επίσης να ορίσεις πολλές µεταβλητές διαχωρίζοντάς τις µε ένα κόµµα. Για παράδειγµα: Dim Top, Bottom, Left, Right Επιπλέον, µπορεί να ορίσεις µια µεταβλητή έµµεσα, µε το να χρησιµοποιήσεις το όνοµά της µέσα στο script. Αυτό φυσικά δεν είναι καλός τρόπος προγραµµατισµού γιατί αν γράψεις λάθος ορθογραφικά τη µεταβλητή σε ένα - δυο µέρη µέσα στο πρόγραµµα αυτό πιθανώς να προκαλέσει απρόσµενες συνέπειες όταν τρέξει το script. Γι' αυτό το λόγο χρησιµοποιείται το statement Option Explicit το οποίο απαιτεί ότι δηλώνεις άµεσα όλες τις µεταβλητές που θα χρησιµοποιηθούν. Το statement αυτό θα πρέπει να είναι το πρώτο statement µέσα στο script. Περιορισµοί στην ονοµασία (Naming Restrictions): Τα ονόµατα των µεταβλητών ακολουθούν κάποιους τυπικούς κανόνες. Το όνοµα µιας µεταβλητής: Πρέπει να αρχίζει µε αλφαβητικούς χαρακτήρες. εν µπορεί να εµπεριέχει τελεία εν µπορεί να υπερβαίνει τους 255 χαρακτήρες Πρέπει να είναι µοναδικός στην εµβέλεια στην οποία έχει οριστεί. Εµβέλεια και διάρκεια ζωής µιας µεταβλητής: Η εµβέλεια µιας µεταβλητής καθορίζεται από το που ακριβώς δηλώνεται. Όταν δηλώσεις µια µεταβλητή µέσα σε µια διαδικασία, µόνο ο κώδικας µέσα σ' αυτή τη διαδικασία µπορεί να έχει πρόσβαση σ' αυτήν ή να αλλάξει την τιµή της. Έχει τοπική εµβέλεια και είναι µια µεταβλητή ορισµένη σε επίπεδο διαδικασίας (procedure-level variable). Αν ορίσεις µια µεταβλητή έξω από την εµβέλεια µιας διαδικασίας τότε αυτή είναι 'ορατή' σε όλες τις διαδικασίες που Η γλώσσα VBScript και η τεχνολογία ASP 77

78 ορίστηκαν στο script και όλες έχουν πρόσβαση σ' αυτήν. Αυτή η µεταβλητή έχει καθολική εµβέλεια (script-level scope) και καλείται script-level variable. Η διάρκεια ζωής µιας µεταβλητής εξαρτάται από το πόσο υπάρχει µέσα στο script. Η διάρκεια ζωής µιας script-level µεταβλητής εκτείνεται από τη στιγµή δήλωσής της µέχρι τη στιγµή που το script σταµατά να τρέχει. Σε µια µεταβλητή υπάρχει µόνο όσο εκτελείται ο κώδικας της συγκεκριµένης διαδικασίας στην οποία ανήκει. Όταν η διαδικασία τελειώσει, η µεταβλητή καταστρέφεται. Οι τοπικές µεταβλητές είναι ιδανικές ως προσωρινός χώρος αποθήκευσης κατά τη διάρκεια εκτέλεσης µιας διαδικασίας. Μπορεί κανείς να ορίσει τοπικές µεταβλητές µε το ίδιο όνοµα σε διάφορες διαδικασίες γιατί καθεµιά αναγνωρίζεται µέσα στην εµβέλεια της διαδικασίας που είναι ορισµένη. Επίσης, αν µια τοπική µεταβλητή έχει το ίδιο όνοµα µε µια καθολική µεταβλητή τότε µέσα στη διαδικασία χρησιµοποιείται η τοπική και όχι η καθολική µεταβλητή. Ανάθεση τιµών στις µεταβλητές: Στις µεταβλητές ανατίθενται κάποιες τιµές έτσι ώστε δηµιουργούν µια έκφραση ως ακολούθως: η µεταβλητή είναι στο αριστερό µέρος της έκφρασης και η τιµή που θέλει κανείς να αναθέσει σ' αυτήν βρίσκεται στο δεξιό µέρος της έκφρασης. Για παράδειγµα: B = 200 Βαθµωτές µεταβλητές (Scalar Variables) και Μεταβλητές Πινάκων (Array Variables): Τις περισσότερες φορές, ένας προγραµµατιστής θέλει να αναθέσει µια µόνο τιµή στη µεταβλητή που δηλώνει. Η µεταβλητή που περιέχει µια µόνο τιµή ονοµάζεται βαθµωτή µεταβλητή (scalar variable). Άλλες φορές είναι πιο βολικό να αναθέσουµε περισσότερες από µια τιµή σε µια µεταβλητή οι οποίες σχετίζονται µεταξύ τους. Η µεταβλητή αυτή ονοµάζεται array variable. Οι µεταβλητές αυτές καθώς και οι βαθµωτές µεταβλητές δηλώνονται µε τον ίδιο τρόπο εκτός από το ότι η δήλωση µιας µεταβλητής τύπου array χρησιµοποιεί παρενθέσεις ( ) µετά τη δήλωση του ονόµατος της µεταβλητής. Στο παράδειγµα που ακολουθεί, ορίζεται ένας µονοδιάστατος πίνακας που περιέχει 11 στοιχεία: Dim A(10) Παρόλο που ο αριθµός που είναι στην παρένθεση είναι το 10, όλοι οι πίνακες στη VBScript είναι zerobased, δηλαδή αρχίζουν µε το στοιχείο µηδέν (0), έτσι αυτός ο πίνακας περιέχει 11 στοιχεία. Σε ένα πίνακα που ο δείκτης αρχίζει από το µηδέν, ο αριθµός των στοιχείων του είναι πάντα ο αριθµός που δείχνει στην παρένθεση συν ένα. Αυτό το είδος του πίνακα καλείται σταθερού µεγέθους (fixed-size) πίνακας. Η ανάθεση δεδοµένων σε κάθε στοιχείο του πίνακα γίνεται µε χρήση ενός δείκτη πάνω στο κάθε στοιχείο του. Αρχίζοντας από το µηδέν και τελειώνοντας στο 10, µπορούµε να ορίσουµε δεδοµένα στα στοιχεία του πίνακα ως ακολούθως: A(0) = 256 A(1) = 324 A(2) = A(10) = 55 Με παρόµοιο τρόπο µπορούµε να ανακτήσουµε τα δεδοµένα από ένα στοιχείο του πίνακα χρησιµοποιώντας τον ίδιο δείκτη και αναθέτοντας την τιµή που παίρνουµε σε µια µεταβλητή του ιδίου τύπου µε το στοιχείο του πίνακα. Για παράδειγµα :... SomeVariable = A(8)... Οι πίνακες µπορούν να έχουν πολλές διαστάσεις (υπάρχει περιορισµός µέχρι 60 διαστάσεις), αν και περισσότεροι προγραµµατιστές αντιλαµβάνονται µέχρι τη χρήση τριών ή το πολύ τεσσάρων διαστάσεων. Μπορεί κανείς να δηλώσει πολλές διαστάσεις διαχωρίζοντας το µέγεθος κάθε διάστασης µε κόµµα και τοποθετώντας όλα τα µεγέθη µέσα σε παρενθέσεις. Στο παράδειγµα που ακολουθεί η µεταβλητή MyTable είναι ένας δισδιάστατος πίνακας που αποτελείται από 6 γραµµές και 11 στήλες: Dim MyTable(5, 10) Σε ένα δισδιάστατο πίνακα, ο πρώτος αριθµός συµβολίζει τον αριθµό των γραµµών του πίνακα ενώ ο δεύτερος τον αριθµό των στηλών του. Μπορεί επίσης να δηλωθεί ένας πίνακας του οποίου το µέγεθος να αλλάζει κατά τη διάρκεια εκτέλεσης του script. Ο πίνακας αυτός καλείται δυναµικός (dynamic array). Ο πίνακας αρχικά δηλώνεται µέσα σε µια διαδικασία χρησιµοποιώντας τη δεσµευµένη λέξη Dim ή τη δεσµευµένη λέξη ReDim. Εντούτοις, για ένα δυναµικό πίνακα δεν ορίζεται ούτε µέγεθος ούτε αριθµός διαστάσεων µέσα στις παρενθέσεις. Για παράδειγµα: Dim MyArray() Η γλώσσα VBScript και η τεχνολογία ASP 78

79 ReDim AnotherArray() Για να χρησιµοποιήσεις ένα δυναµικό πίνακα, πρέπει ακολούθως να χρησιµοποιηθεί η δεσµευµένη λέξη ReDim για να καθοριστεί σαφώς ο αριθµός των διαστάσεων και το µέγεθος καθεµιάς. Στο πιο κάτω παράδειγµα, το ReDim θέτει στο δυναµικό πίνακα αρχικό µέγεθος 25. Ακολουθεί ξανά ένα ReDim statement που δίνει στον πίνακα µέγεθος 30, αλλά χρησιµοποιεί τη λέξη κλειδί Preserve για να διατηρήσει τα περιεχόµενα του πίνακα καθώς αυτός αλλάζει µέγεθος. ReDim MyArray(25)... ReDim Preserve MyArray(30) εν υπάρχει όριο στο πόσες φορές θα αποφασίσει κανείς να αλλάξει το µέγεθος ενός δυναµικού πίνακα. Αν όµως κάποιος θελήσει να τον κάνει µικρότερο, τότε θα χαθούν οι πληροφορίες στα στοιχεία που αποκόβονται µε τη σµίκρυνση. Σταθερές στη VBScript Σε αυτό το κεφάλαιο θα µάθουµε για τις σταθερές στην VBScript (VBScript Constants) Μια σταθερά έχει ένα όνοµα µε κάποια σηµασία και παίρνει τη θέση ενός αριθµού ή ενός string που TποτέT δεν αλλάζει τιµή. Η VBScript καθορίζει ένα αριθµό ενσωµατωµένων σταθερών, όπως για παράδειγµα σταθερές για χρώµατα (Color Constants), σταθερές για ηµεροµηνίες και ώρες (Date and Time Constants), σταθερές για µορφοποίηση ηµεροµηνιών (Date Format Constants) και πολλές άλλες κατηγορίες. Για να δηµιουργήσει κανείς σταθερές στη VBScript πρέπει να χρησιµοποιήσει τη δεσµευµένη λέξη Const. Χρησιµοποιώντας το Cons statement µπορεί κανείς να δηµιουργήσει σταθερές τύπου string ή αριθµητικές σταθερές. Για παράδειγµα: Const MyString = "This is my string." Const MyAge = 22 Αξιοσηµείωτο είναι το γεγονός ότι τα literal string παρεµβάλλονται µεταξύ εισαγωγικών (" "). Τα εισαγωγικά είναι ο πιο εµφανής τρόπος να διαχωριστούν οι συµβολοσειρές από τις αριθµητικές τιµές. Η αναπαράσταση µιας ηµεροµηνίας καθώς και ώρας παρεµβάλλεται µεταξύ των συµβόλων #.Για παράδειγµα: Const BirthDate = #7-9-79# Θα ήταν καλό ένας προγραµµατιστής να υιοθετήσει ένα συγκεκριµένο τρόπο ονοµασίας έτσι ώστε να µπορεί εύκολα να ξεχωρίζει τις σταθερές από τις µεταβλητές. Αυτό εµποδίζει την προσπάθεια να ανατεθεί κάποια τιµή σε µια σταθερά τη στιγµή που τρέχει το script. Για παράδειγµα θα ήταν καλό να χρησιµοποιείται κάποιο πρόθεµα µπροστά από τις µεταβλητές (πχ. v_variablename) ή/και στις σταθερές (πχ. c_constantname), ή θα µπορούσε επίσης όλες οι σταθερές να γράφονταν µε κεφαλαία γράµµατα. Η διαφοροποίηση των σταθερών από τις µεταβλητές µειώνει την περίπτωση σύγχυσης τους, ιδίως σε µεγάλα και σύνθετα scripts. ιαδικασίες στη VBScript Σε αυτό το κεφάλαιο θα µάθουµε πως ορίζουµε διαδικασίες (procedures) και συναρτήσεις (functions) στην VBScript. ιαδικασίες στην VBScript: Υπάρχουν δύο είδη διαδικασιών στη VBScript, οι TSubT διαδικασίες και οι TFunctionT διαδικασίες. Sub Procedures: Μια Sub διαδικασία είναι µια ακολουθία εντολών στη VBScript (που ορίζονται µεταξύ των statements TSubT και TEnd SubT οι οποίες παράγουν ένα αποτέλεσµα αλλά δεν επιστρέφουν κάποια τιµή. Μια TSubT διαδικασία µπορεί να δεχτεί κάποια δεδοµένα εισόδου (σταθερές, µεταβλητές ή εκφράσεις που τις περνά η διαδικασία που την καλεί). Αν η Sub διαδικασία δεν δέχεται παραµέτρους, τότε το statement Sub πρέπει να περιλαµβάνει ένα κενό ζεύγος παρενθέσεων (). Η ακόλουθη TSubT διαδικασία χρησιµοποιεί δύο ενσωµατωµένες συναρτήσεις της VBScript, την MsgBox και την InputBox, για να ζητήσει από το χρήστη κάποια πληροφορία. Στη συνέχεια εκτυπώνει το αποτέλεσµα ενός υπολογισµού που κάνει βασιζόµενη στην πληροφορία αυτή. Ο υπολογισµός εκτελείται από µια Function διαδικασία, την Celcius(input_variable), που δηµιουργήθηκε επίσης στη VBScript. Η Function διαδικασία ακολουθεί παρακάτω. Sub ConvertTemp() temp = InputBox("Please enter the temperature in degrees F.",1) MsgBox "The temperature is " & Celsius(temp) & "degrees C." Η γλώσσα VBScript και η τεχνολογία ASP 79

80 End Sub Function Procedures: Μια διαδικασία-συνάρτηση που ορίζεται ως TFunctionT αποτελείται από µια ακολουθία εντολών στη VBScript που βρίσκονται µεταξύ των statements Function και End Function. Μοιάζει δηλαδή µε µια Sub διαδικασία αλλά ως επιπλέον επιστρέφει και κάποια τιµή ως δεδοµένο εξόδου. Μια διαδικασία-συνάρτηση µπορεί επίσης να δεχτεί κάποια δεδοµένα εισόδου (σταθερές, µεταβλητές ή εκφράσεις που τις περνά η διαδικασία που την καλεί). Αν η συνάρτηση δε δέχεται παραµέτρους τότε το Function statement πρέπει να περιλαµβάνει ένα ζεύγος άδειων παρενθέσεων. Μια συνάρτηση επιστρέφει µια τιµή µε το να περάσουµε στο όνοµά της µια τιµή σε ένα ή και περισσότερα µέσα στην ίδια τη συνάρτηση. Τα δεδοµένα εξόδου της συνάρτησης είναι πάντα του τύπου Variant. Στο ακόλουθο παράδειγµα, η διαδικασία-συνάρτηση Celsius υπολογίζει τους βαθµούς Κελσίου έχοντας ως δεδοµένο εισόδου τους αντίστοιχους βαθµούς Fahrenheit. Όταν η διαδικασία καλείται από τη Sub διαδικασία ConvertTemp, µια µεταβλητή που κρατά την τιµή για το δεδοµένο εισόδου της συνάρτησης, περνιέται σ αυτήν. Το αποτέλεσµα του υπολογισµού επιστρέφεται στη διαδικασία που την έχει καλέσει και αυτή µε τη σειρά της την εκτυπώνει µέσα σε ένα message box. Sub ConvertTemp() temp = InputBox("Please enter the temperature in degrees F.",1) MsgBox "The temperature is " & Celsius(temp) & "degrees C." End Sub Function Celsius(fDegrees) Celsius = (fdegrees - 32) * 5 / 9 End Function Πέρασµα δεδοµένων στις διαδικασίες κι Επιστροφή Τιµών: Κάθε δεδοµένο εισόδου που περνά στις διαδικασίες έχει τη µορφή ενός argument. Τα Arguments εξυπηρετούν ως αποθηκευτικοί χώροι για τα δεδοµένα που θέλουµε να περάσουµε σε µια διαδικασία. Μπορούµε να δώσουµε έγκυρα ονόµατα στα arguments (όπως µια έγκυρη ονοµασία µεταβλητής). Όταν δηµιουργούµε µια διαδικασία Sub ή µια συνάρτηση Function, πρέπει να τοποθετούνται απαραίτητα οι παρενθέσεις µετά το όνοµα της διαδικασίας. Τα οποιαδήποτε arguments τοποθετούνται µέσα στις παρενθέσεις και διαχωρίζονται µε κόµµα. Για παράδειγµα, στο argument fdegrees στο πιο κάτω παράδειγµα τοποθετείται η τιµή που θα περάσει ως παράµετρος στη διαδικασία Celsius για να υποστεί τη µετατροπή. Function Celsius(fDegrees) Celsius = (fdegrees - 32) * 5 / 9 End Function Για να ληφθούν δεδοµένα από µια διαδικασία πρέπει να χρησιµοποιηθεί η διαδικασία-συνάρτηση Function, αφού µόνο αυτή επιστρέφει ως δεδοµένο εξόδου κάποια τιµή (η διαδικασία Sub δεν επιστρέφει δεδοµένα εξόδου). Προτάσεις Συνθήκης κι Επανάληψης στη VBScript Σε αυτό το κεφάλαιο θα µάθουµε πως να χρησιµοποιούµε τις προτάσεις συνθήκης και τις προτάσεις επανάληψης µέσω της VBScript. Μπορεί κανείς να ελέγξει τη ροή του script χρησιµοποιώντας προτάσεις συνθήκης (conditional statements) και προτάσεις επανάληψης (looping statements). Με τη χρήση conditional statements, µπορεί κάποιος να γράψει κώδικα σε VBScript που να αποφασίζει αλλά και να επαναλαµβάνει κάποια actions. Οι ακόλουθες προτάσεις συνθήκης (conditional statements) είναι διαθέσιµες στη VBScript: If...Then...Else statement Select Case statement Παίρνοντας αποφάσεις µε το If...Then...Else: Το statement If...Then...Else χρησιµοποιείται για να καθορίσει κατά πόσο µια συνθήκη είναι αληθής ή ψευδής και, ανάλογα µε το αποτέλεσµα, να καθορίσει κατά πόσο µία ή περισσότερες εκφράσεις θα εκτελεστούν. Συνήθως, η συνθήκη είναι µια έκφραση που χρησιµοποιεί ένα τελεστή σύγκρισης για να συγκρίνει µια τιµή ή µια µεταβλητή µε µια άλλη. Το If...Then...Else statement µπορεί να φωλιάζεται (nested) σε όσα επίπεδα επιθυµεί ο προγραµµατιστής. Αν η συνθήκη είναι αληθής: Για να τρέξει ένα statement όταν µια συνθήκη ευσταθεί,(είναι True), τότε είναι πιο σωστό να χρησιµοποιηθεί η σύνταξη του if...then...else σε µια γραµµή. Πιο κάτω ακολουθεί ένα παράδειγµα που χρησιµοποιεί αυτή τη σύνταξη (the single-linesyntax). Το συγκεκριµένο παράδειγµα παραλείπει τη λέξη κλειδί Else. Η γλώσσα VBScript και η τεχνολογία ASP 80

81 Sub FixDate() Dim mydate mydate = 7/9/79# If mydate < Now Then mydate = Now End Sub Για να τρέξουν ΠΕΡΙΣΣΟΤΕΡΕΣ από µια συνθήκες, τότε πρέπει να χρησιµοποιηθεί η σύνταξη του if...then...else statement σε πολλές γραµµές (multiple-line or block syntax). Αυτή η σύνταξη περιλαµβάνει το statement End If, όπως φαίνεται στο πιο κάτω παράδειγµα: Sub AlertUser(value) If value = 0 Then AlertLabel.ForeColor = vbred AlertLabel.Font.Bold = True AlertLabel.Font.Italic = True End If End Sub Εκτέλεση ενός µπλοκ κώδικα όταν η συνθήκη ευσταθεί (True) και όταν η συνθήκη δεν ευσταθεί (False): Μπορεί κανείς να χρησιµοποιήσει ένα If...Then...Else statement για να καθορίσει δύο blocks από statements: ένα για να τρέξει όταν η συνθήκη παίρνει τιµή True και το άλλο όταν η συνθήκη παίρνει την τιµή False. Sub AlertUser(value) If value = 0 Then AlertLabel.ForeColor = vbred AlertLabel.Font.Bold = True AlertLabel.Font.Italic = True Else AlertLabel.Forecolor = vbblack AlertLabel.Font.Bold = False AlertLabel.Font.Italic = False End If End Sub Παίρνοντας απόφαση µεταξύ εναλλακτικών περιπτώσεων: Μια µεταβλητή στο If...Then...Else statement µας επιτρέπει να επιλέξουµε µεταξύ πολλών εναλλακτικών περιπτώσεων. Προσθέτοντας το ElseIf clause επεκτείνει κανείς τη λειτουργικότητα του I...Then...Else statement έτσι ώστε να έχει περισσότερο έλεγχο στο πρόγραµµα σε περίπτωση διαφορετικών πιθανοτήτων. Για παράδειγµα: Sub ReportValue(value) If value = 0 Then MsgBox value ElseIf value = 1 Then MsgBox value ElseIf value = 2 then Msgbox value Else Msgbox "Value out of range!" End If Μπορεί κάποιος να προσθέσει όσα ElseIf clauses θελήσει όταν έχει πολλές εναλλακτικές επιλογές. Εντούτοις, η εκτεταµένη χρήση του ElseIf πολλές φορές επιβαρύνει το πρόγραµµα. Ένας καλύτερος τρόπος να επιλέξεις µεταξύ πολλών εναλλακτικών πιθανοτήτων είναι το Select Case statement. Παίρνοντας αποφάσεις µε το Select Case: Η δοµή του Select Case παρέχει ένα εναλλακτικό τρόπο για να εκφράσουµε το If...Then...ElseIf statement. Το Select Case statement παρέχει την δυνατότητα µε το If...The...Else statement, αλλά κάνει τον κώδικα πιο αποδοτικό και πιο ευανάγνωστο. Η δοµή του Select Case δουλεύει µόνο µε µια έκφραση η οποία εκτιµείται µόνο µια φορά, στην αρχή της δοµής. Το αποτέλεσµα της έκφρασης στη συνέχεια συγκρίνεται µε τις τιµές κάθε Case που υπάρχει στη δοµή. Αν ταιριάζει µε κάποια απ' αυτές τότε το block των statements που σχετίζονται µε το συγκεκριµένο Case εκτελείται, όπως στο παράδειγµα που ακολουθεί: Select Case Document.Form1.CardType.Options(SelectedIndex).Text Case "MasterCard" DisplayMCLogo ValidateMCAccount Case"Visa" DisplayVisaLogo Η γλώσσα VBScript και η τεχνολογία ASP 81

82 ValidateVisaAccount Case "American Express" DisplayAMEXCOLogo ValidateAMEXCOAccount Case Else DisplayUnknownImage PromptAgain End Select Προσέξτε ότι η δοµή του Select Case εκτελεί µια έκφραση µόνο µια φορά στην αρχή της δοµής. Αντίθετα, η δοµή του If...Then...ElseIf µπορεί να εκτελέσει διαφορετικές εκφράσεις για κάθε ElseIf statement. Η δοµή του If...Then...ElseIf µπορεί να αντικατασταθεί µε τη δοµή ενός Select Case µόνο αν κάθε ElseIf statement εκτελεί την ίδια έκφραση. Αν οι εκφράσεις δίνουν διαφορετικό αποτέλεσµα κάθε φορά που εκτελούνται, τότε πρέπει να χρησιµοποιηθεί η δοµή του If...Then...ElseIf. Βρόγχοι Επανάληψης στη VBScript Σε αυτό το κεφάλαιο θα µάθουµε πως να χρησιµοποιούµε τους βρόγχους επανάληψης µέσω της VBScript. Ένας βρόγχος επανάληψης σου επιτρέπει να τρέξεις ένα σύνολο από statements πολλές φορές. Κάποιοι βρόγχοι επαναλαµβάνουν κάποια statements µέχρι µια συνθήκη να πάρει την τιµή False. Άλλες επαναλαµβάνουν κάποια statements µέχρι η συνθήκη να γίνει αληθής (δηλ. να πάρει την τιµή True). Υπάρχουν και κάποιοι βρόγχοι που εκτελούν κάποια statements για ένα συγκεκριµένο αριθµό επαναλήψεων. Οι ακόλουθοι βρόγχοι επανάληψης είναι διαθέσιµοι στη VBScript: Do...Loop: ο βρόγχος επαναλαµβάνεται µέχρι η συνθήκη να γίνει True (αληθής). While...Wend: ο βρόγχος επαναλαµβάνεται µέχρι η συνθήκη να γίνει True (αληθής). For...Next: Χρησιµοποιεί ένα µετρητή για να εκτελέσει τα statements που ακολουθούν ένα συγκεκριµένο αριθµό επαναλήψεων. For Each...Next: Επαναλαµβάνει ένα σύνολο από statements για κάθε στοιχείο της συλλογής ή κάθε στοιχείο ενός πίνακα (array). Μπορεί κανείς να χρησιµοποιήσει τα statements Do...Loop για να τρέξει ένα µπλοκ από εντολές για ένα ακαθόριστο αριθµό επαναλήψεων. Τα statements επαναλαµβάνονται είτε όταν η συνθήκη είναι αληθής ή µέχρι να γίνει αληθής. Ο καλύτερος τρόπος είναι να χρησιµοποιήσει κανείς τη λέξη-κλειδί While για να ελέγξει τη συνθήκη σε ένα Do...Loop statement. Ο έλεγχος µπορεί να γίνει πριν αρχίσει ο βρόγχος (όπως φαίνεται στο παράδειγµα ChkFirstWhile που ακολουθεί) ή µπορεί να γίνει µετά την πρώτη εκτέλεση του βρόγχου (όπως φαίνεται στο παράδειγµα ChkLastWhile που ακολουθεί). Στη διαδικασία ChkFirstWhile, αν στη µεταβλητή mynum ανατεθεί η τιµή 9 αντί για 20, τότε τα statements µέσα στον βρόγχο δε θα εκτελεστούν ποτέ. Στην ChkLastWhile, τα statements µέσα στον βρόγχο θα εκτελεστούν µόνο µια φορά γιατί η συνθήκη είναι ήδη False. Sub ChkFirstWhile() Dim counter, mynum counter = 0 mynum = 20 Do While mynum > 10 mynum = mynum - 1 counter = counter + 1 Loop MsgBox "The loop made " & counter & "repetitions." End Sub Sub ChkLastWhile() Dim counter, mynum counter = 0 mynum = 9 Η γλώσσα VBScript και η τεχνολογία ASP 82

83 Do mynum = mynum - 1 counter = counter + 1 Loop While mynum > 10 MsgBox "The loop made " & counter & "repetitions." End Sub Υπάρχουν δύο τρόποι για να χρησιµοποιήσει κανείς τη λέξη-κλειδί Until για έλεγχο σε ένα Do...Loop statement. Ο ένας είναι πριν να εκτελεστεί ο βρόγχος (όπως στο παράδειγµα ChkFirstUntil που ακολουθεί), και ο άλλος µετά που θα εκτελεστεί τουλάχιστον µια φορά (όπως φαίνεται στο παράδειγµα ChkLastUntil που ακολουθεί). Όσο η συνθήκη είναι ψευδής, ο βρόγχος εξακολουθεί να εκτελείται. Sub ChkFirstUntil() Dim counter, mynum counter = 0 mynum = 20 Do Until mynum = 10 mynum = mynum - 1 counter = counter + 1 Loop MsgBox "The loop made " & counter & "repetitions." End Sub Sub ChkLastUntil() Dim counter, mynum counter = 0 mynum = 1 Do mynum = mynum + 1 counter = counter + 1 Loop Until mynum = 10 MsgBox "The loop made " & counter & "repetitions." End Sub Έξοδος από ένα Do...Loop Statement µέσα από το Loop: Μπορείς να βγεις από ένα βρόγχο Do...Loop µε τη χρήση του Exit Do statement. Επειδή θέλουµε να βγούµε από το βρόγχο επανάληψης µόνο σε συγκεκριµένες περιπτώσεις έτσι ώστε να αποφύγουµε ένα άπειρο βρόγχο, χρησιµοποιούµε το Exit Do statement σε ένα µπλοκ κώδικα που χρησιµοποιεί If...Then...Else statement και η συνθήκη είναι αληθής. Αν η συνθήκη του if...then...else statement είναι ψευδής, ο βρόγχος συνεχίζει να εκτελείται κανονικά. Στο πιο κάτω παράδειγµα, η µεταβλητή mynum παίρνει µια τιµή που δηµιουργεί ένα βρόγχο άπειρης διάρκειας. Το If...Then...Else statement ελέγχει κατά πόσο η συνθήκη ευσταθεί έτσι ώστε να αποτρέψει την άπειρη επανάληψή του. Sub ExitExample() ] Dim counter, mynum counter = 0 mynum = 9 Do Until mynum = 10 mynum = mynum - 1 counter = counter + 1 If mynum < 10 Then Exit Do Loop MsgBox "The loop made " & counter & "repetitions." Η γλώσσα VBScript και η τεχνολογία ASP 83

84 End Sub Το While...Wend statement παρέχεται στη VBScript γι' αυτούς που γνωρίζουν τη χρήση του. Παρόλα αυτά, επειδή δεν είναι ιδιαίτερα λειτουργικό, συνιστάται καλύτερα η χρήση του Do...Loop. Μπορεί κανείς να χρησιµοποιήσει τα For...Next statements για να τρέξει ένα µπλοκ από εντολές ένα συγκεκριµένο αριθµό επαναλήψεων. Χρησιµοποιείται ένας µετρητής του οποίου η τιµή αυξάνεται ή µειώνεται µε κάθε επανάληψη του βρόγχου. Το ακόλουθο παράδειγµα καλεί µια διαδικασία, την MyProc, να εκτελεστεί 50 φορές. Το For statement καθορίζει τη µεταβλητή-µετρητή x καθώς και την αρχική και τελική τιµή του. Το Next statement αυξάνει την τιµή της µεταβλητής-µετρητή κατά µια µονάδα. Sub DoMyProc50Times() Dim x For x = 1 To 50 MyProc Next End Sub Με τη χρήση του Step keyword, µπορεί κανείς να αυξήσει ή να µειώσει την τιµή του µετρητή όσο επιθυµεί. Στο ακόλουθο παράδειγµα η µεταβλητή-µετρητής j αυξάνεται ανά σε κάθε επανάληψη. Όταν ο βρόγχος τερµατίσει, το τελικό αποτέλεσµα (total) είναι το άθροισµα των αριθµών 2, 4, 6, 8, and 10. Sub TwosTotal() Dim j, total For j = 2 To 10 Step 2 total = total + j Next MsgBox "The total is " & total End Sub Για να µειωθεί η τιµή του µετρητή, χρησιµοποιούµε µια αρνητική τιµή. Πρέπει να καθοριστεί µια τελική τιµή µικρότερη από την αρχική. Στο παράδειγµα που ακολουθεί ο µετρητής mynum µειώνεται κατά 2 σε κάθε επανάληψη του βρόγχου. Όταν ο βρόγχος τερµατίσει το τελικό αποτέλεσµα θα είναι το άθροισµα των αριθµών 16, 14, 12, 10, 8, 6, 4, and 2. Sub NewTotal() Dim mynum, total For mynum = 16 To 2 Step -2 total = total + mynum Next MsgBox "The total is " & total End Sub Μπορείς να βγεις από το For Next statement πριν ο µετρητής φτάσει στην τελική του τιµή, χρησιµοποιώντας το Exit For statement. Επειδή θέλουµε να βγούµε από το βρόγχο επανάληψης µόνο σε συγκεκριµένες περιπτώσεις, όπως για παράδειγµα σε περίπτωση λάθους, πρέπει να χρησιµοποιείται το Exit For statement σε ένα µπλοκ κώδικα που χρησιµοποιεί If...Then...Else statement και η συνθήκη είναι αληθής. Αν η συνθήκη εξακολουθεί να είναι ψευδής, ο βρόγχος εκτελείται κανονικά. Using For Each...Next Ο βρόγχος For Each...Next είναι παρόµοιος µε τον βρόγχο For...Next. Αντί να επαναλαµβάνονται κάποια statements ένα συγκεκριµένο αριθµό επαναλήψεων, ο βρόγχος For Each...Next επαναλαµβάνει ένα σύνολο από statements για κάθε στοιχείο µέσα σε µια συλλογή από αντικείµενα (of objects) ή κάθε στοιχείο ενός πίνακα (array). Αυτό είναι πολύ βοηθητικό αν δεν είναι γνωστός ο αριθµός των στοιχείων µέσα στη συλλογή. Η γλώσσα VBScript και η τεχνολογία ASP 84

85 6.3. Βασικές τεχνικές ASP Πριν ξεκινήσει κανείς να µαθαίνει ένα αντικείµενο, είτε αυτό είναι µάθηµα ή µια ξένη γλώσσα ή ακόµα ένας χορός, είναι σηµαντικό να µάθει πρώτα κάποιες βασικές τεχνικές ή απλά βήµατα, χωρίς πολλές λεπτοµέρειες. Αυτή η προσέγγιση θα ακολουθηθεί στη συνέχεια. Στα κεφάλαια που ακολουθούν ο αναγνώστης θα είναι σε θέση να γνωρίσει τη σύνταξη και τις τεχνικές της ASP, ξεκινώντας από τρεις βασικές τεχνικές. Σ' αυτές παραλείπεται η θεωρία και οι λεπτοµέρειες σε µεγάλο βαθµό. Σκοπός είναι, µε το τέλος του κεφαλαίου αυτού, ο αναγνώστης να γνωρίζει πως: να δηµιουργήσει µια ASP σελίδα που να ρωτά το χρήστη µια ερώτηση και να επιστρέφει την απάντηση σε άλλη. να φυλάσσει τις πληροφορίες που παρέχει ο χρήστης να χρησιµοποιήσει ASP κώδικα για να γράψει µια γραµµή κείµενο και να την εκτυπώσει πίσω στον χρήστη. Λήψη πληροφορίας από το χρήστη Σκεφτείτε τις εξής ρεαλιστικές περιπτώσεις που συµβαίνουν σε µια εταιρία: Ζητούµε από το χρήστη να µας πει τι προϊόν ενδιαφέρεται να αγοράσει και στη συνέχεια η ASP δηµιουργεί µια σελίδα σύµφωνα µε τα ενδιαφέροντά του Θέλουµε να ζητήσουµε από ένα επισκέπτη µιας σελίδας να δηλώσει αν είναι µέλος της εταιρίας. Αν είναι, τότε να µπορεί να δει το ηµερολόγιο της εταιρίας. Αν όχι, τότε του ζητείται να γεµίσει µια φόρµα για να γίνει µέλος. Έχουµε µια σελίδα που χρησιµοποιεί προχωρηµένες τεχνικές HTML (όπως για παράδειγµα το formatting) η οποία δεν εκτυπώνεται καλά σε κάποιους browsers. Η εταιρία θα ήθελε να γνωρίζει τι browser χρησιµοποιεί ο επισκέπτης για να µπορεί να του στείλει µια σελίδα µε πληροφορίες µε το κατάλληλο formatting του browser.... Σε κάθε περίπτωση θέλουµε να εκτελεστεί µια δράση πριν να σταλεί µια σελίδα. Πρέπει είτε να αποφασιστεί ποια σελίδα θα σταλεί ή να δηµιουργηθεί µια άλλη που να εξυπηρετεί το ανάλογο αίτηµα. Για να παρθεί µια τέτοια απόφαση πρέπει ο χρήστης να δώσει πρώτα κάποιες πληροφορίες. Στην πρώτη περίπτωση πρέπει να γνωρίζουµε τι προϊόν ενδιαφέρεται ο χρήστης να αγοράσει. Στη δεύτερη περίπτωση πρέπει να γνωρίζουµε ο χρήστης είναι µέλος ή όχι, κλπ. Στη γλώσσα του προγραµµατισµού η πληροφορία αυτή αποτελεί τα δεδοµένα εισόδου για την επίλυση του προβλήµατος. Έτσι και η ASP χρειάζεται να πάρει αυτά τα δεδοµένα εισόδου από το χρήστη για να πάρει τις αποφάσεις που θα αποτελέσουν τη λύση στο πρόβληµα. Ας υποθέσουµε ότι έχουµε δηµιουργήσει ένα site το οποίο περιλαµβάνει µια σελίδα 'Page 1' η οποία ζητά από το χρήστη αν θέλει πληροφορίες. Το θέµα είναι: πως λαµβάνουµε αυτού του είδους την πληροφορία από τη σελίδα 'Page 1' σε ένα connectionless σύστηµα; Η πιο απλή τεχνική είναι η χρήση φορµών, ένα χαρακτηριστικό γνώρισµα της HTML. Οι φόρµες παρέχουν τέσσερις ευκολίες: 1. Η ετικέτα (tag) <FORM> ζητά από το χρήστη κάποια πληροφορία και παρέχει τον ανάλογο χώρο (που καλείται πεδίο - field) στο οποίο θα δοθεί η απάντηση. 2. Η φόρµα έχει ένα κουµπί (button), που λέγεται συνήθως Submit, µε το οποίο στέλλεται η πληροφορία στον server. 3. Με το πάτηµα του κουµπιού υπάρχει εντολή για να ανοίξει µια καινούργια σελίδα (συνήθως σε µια ASP σελίδα). 4. Επίσης, µε το πάτηµα του κουµπιού η πληροφορίες που παρείχε ο χρήστης στα πεδία (fields) µεταφέρονται για να χρησιµοποιηθούν από τον ASP κώδικα της νέας σελίδας που δηµιουργείται. Ο κύριος λόγος που χρησιµοποιούµε φόρµες είναι για να παρέχουµε ένα µέσο στο χρήστη να στέλνει δεδοµένα εισόδου στο server, που θα αποτελέσουν και την απαραίτητη πληροφορία για να παρθούν οι σωστές αποφάσεις στην ASP. Χρήση Φορµών µε σκοπό τη λήψη πληροφορίας από το χρήστη: Στο παράδειγµα που ακολουθεί ορίζεται η πιο απλή δοµή µιας φόρµας (στη συνέχεια θα ορίσουµε τα πεδία - fields - για τα δεδοµένα εισόδου). Η φόρµα αρχίζει και τελειώνει µε τη χρήση της ετικέτας <FORM>: Η γλώσσα VBScript και η τεχνολογία ASP 85

86 <P>Please fill in the following form :</P> <FORM ACTION = "Calendar.asp" METHOD = POST> </FORM> Η αρχική ετικέτα <FORM> έχει δύο χαρακτηριστικά. Το πρώτο, ACTION, φανερώνει το όνοµα του ASP αρχείου που πρέπει να ανοίξει στη συνέχεια και που είναι αυτό που θα χρησιµοποιήσει τις πληροφορίες που λαµβάνονται από τη φόρµα. Το δεύτερο χαρακτηριστικό, METHOD, καθορίζει ποιες από τις δύο µεθόδους (post ή get) θα χρησιµοποιήσει ο browser για να στείλει την πληροφορία στο server. Στα κεφάλαια που ακολουθούν θα χρησιµοποιηθεί η µέθοδος POST. Το χαρακτηριστικό ACTION της ετικέτας <FORM> λέει στον browser ποια σελίδα πρόκειται να ανοίξει όταν πατηθεί το κουµπί Submit. Αφού ο χρήστης κάνει submit τα δεδοµένα, ο browser αυτόµατα ζητά αυτό το αρχείο. Το όνοµα του αρχείου πρέπει να περιλαµβάνεται σε διπλά εισαγωγικά (double quotes). Ανάµεσα στις ετικέτες <FORM> συνήθως τοποθετούνται τουλάχιστον άλλες τρεις ετικέτες. Οι δύο απ' αυτούς είναι τα κουµπιά Submit και Reset. Οι ετικέτες τους είναι παρόµοιες: <P>A simple FORM example with buttons :</P> <FORM ACTION = "Calendar.asp" METHOD = POST> <P> <INPUT TYPE = "SUBMIT" VALUE = "Submit"> </P> <P> <INPUT TYPE = "RESET" VALUE = "Reset"> </P> </FORM> Μπορείτε να δείτε το αποτέλεσµα του πιο πάνω κώδικα Τα κουµπιά submit και reset έχουν συνήθως δύο χαρακτηριστικά. Το πρώτο καθορίζει τον τύπο του κουµπιού και το δεύτερο την τιµή του. Προσοχή: Οι τιµές και των δύο χαρακτηριστικών πρέπει να περικλείονται από διπλά εισαγωγικά. Ο τύπος τους πρέπει να είναι είτε "SUBMIT" είτε "RESET". Οι τύπο&io