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

Μέγεθος: 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 --> <!-- your.address@whatever.domain --> <!-- 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= MAILTO:person@internet.mail.address >send </a><br> Εδώ το person@internet.mail.address είναι η ηλεκτρονική διεύθυνση του ατόµου στο οποίο στέλνουµε το µήνυµα και το send είναι το κείµενο πάνω στο οποίο κάνουµε κλικ, για αν εµφανιστεί η φόρµα που θα µας επιτρέψει να το στείλουµε. Πρέπει να προσέξουµε ιδιαίτερα να µην υπάρχει κενό µεταξύ των MAIL και TO, δηλ να είναι µια λέξη (MAILTO) και επίσης µεταξύ του MAILTO και του:. Μπορούµε να στείλουµε περισσότερα µηνύµατα σε περισσότερα από ένα άτοµα απλά χωρίζοντας τις διευθύνσεις τους µε κόµµα, π.χ. <A HREF= MAILTO:1person@internet.mail.address, 2person@internet.mail.address >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= MAILTO:name@any.domain >name@any.domain</a><br> </ADDRESS> Τα στοιχεία αφορούν το όνοµα, τη διεύθυνση, τον αριθµό τηλεφώνου και ίσως και την επωνυµία της εταιρίας. Η τελευταία γραµµή δίνει ένα παράδειγµα της αλληλεπίδρασης µέσα από τον ιστό. Οι χρήστες όχι µόνο µπορούν να δουν τα στοιχεία που προαναφέραµε, αλλά να στείλουν και στο άτοµα που αναφέρεται - αν βέβαια το πρόγραµµα ανάγνωσης που χρησιµοποιούν υποστηρίζει φόρµες για . Κάνοντας λοιπόν κλικ στη name@any.domain µπορούν να επικοινωνήσουν µαζί του. Ένα πρόβληµα που συνήθως προκύπτει είναι να ξεχάσουµε να τοποθετήσουµε στο τέλος κάθε γραµµής ένα <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 , 57 rect , 18 52, 73 poly , , , 90 77, , 86 12, 119 circ , , 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 , 57 ορίζουµε κάποιο σηµείο.. Ένα CERN αρχείο είναι το ακόλουθο : default rect (17, 18) (52, 73) poly (12, 119) (134, 119) (91, 90) (77, 105) (39, 86) (12, 119) circ (99, 21) Εκείνο όµως που πρέπει να αναφέρουµε είναι ότι έχουν αναπτυχθεί πολύ χρήσιµα εργαλεία που επιτρέπουν την δηµιουργία του αρχείου χάρτη εικόνας µε ένα εξαιρετικά απλουστευµένο τρόπο. Τέτοια εργαλεία (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=" 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=' "> </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= " Η γλώσσα 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 == "" form.text2.value.indexof('@', 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". Οι τύποι αυτοί αποτελούν λέξεις κλειδιά για τον browser και δεν πρέπει να προσπαθήσει κανείς να τους δώσει διαφορετικό όνοµα. Η τιµή εµφανίζεται στο χρήστη όπως πιο πάνω κι έτσι µπορεί να έχει οποιοδήποτε όνοµα θέλει να δώσει ο προγραµµατιστής, φτάνει να περιλαµβάνονται µέσα σε quotes. Για παράδειγµα, θεωρείστε το ακόλουθο παράδειγµα: <FORM ACTION="Calendar.asp" METHOD = POST> <P><INPUT TYPE="SUBMIT" VALUE="Click here to submit this information"></p> <P><INPUT TYPE="RESET" VALUE= "Clear this form now!"></p> </FORM> Μπορείτε να δείτε το αποτέλεσµα του πιο πάνω κώδικα. Η γλώσσα VBScript και η τεχνολογία ASP 86

87 Τα παραπάνω µας δίνουν µια αρχική ιδέα για το πως είναι η δοµή µιας HTML φόρµας. Αυτό όµως που πραγµατικά µας ενδιαφέρει περισσότερο είναι ο χώρος στον οποίο ο χρήστης µπορεί να εισαγάγει κάποια δεδοµένα εισόδου. Τέτοιου είδους χώροι καλούνται πεδία - fields - και δηµιουργούνται µε τη χρήση της ετικέτας <INPUT>. Ένα τέτοιο πεδίο αποτελεί και το text box όπως φαίνεται και στο παράδειγµα που ακολουθεί: <FORM ACTION = "Calendar2.asp" METHOD = POST> <P> Please type your name in the space below </P> <P> <INPUT TYPE = "TEXT" NAME = "LastName"> </P> <P> <INPUT TYPE = "SUBMIT" VALUE = "Click here to Submit"> </P> <P> <INPUT TYPE = "RESET" VALUE = "Clear this form now!"> </P> </FORM> Μπορείτε να δείτε το αποτέλεσµα του πιο πάνω κώδικα : Η καινούργια γραµµή κώδικα αποτελείται από δύο χαρακτηριστικά, το TYPE και το NAME. Σε αυτή την περίπτωση δόθηκε η τιµή TYPE = "TEXT" που είναι ένα textbox. Το δεύτερο χαρακτηριστικό, NAME, είναι πιο σηµαντικό: κάθε πεδίο τύπου input πρέπει να έχει αυτό το χαρακτηριστικό. Τα δεδοµένα (που περνά στο πεδίο αυτό ο χρήστης) συνδέονται µε το όνοµα του πεδίου που τα περιέχει. Αυτά τα δεδοµένα θα περάσουν στην ASP σελίδα µε τη βοήθεια του χαρακτηριστικού ACTION. Για παράδειγµα, ας υποθέσουµε ότι έχουµε µια σελίδα που περιέχει µια φόρµα και αυτή η φόρµα αποτελείται από τρία πεδία. Το καθένα ζητά από το χρήστη να παρέχει το µικρό του όνοµα, το πατρικό του και το επώνυµό του, ως ακολούθως: (η φόρµα περιέχει σαφώς και τα κουµπιά Submit και Reset) <P><INPUT TYPE="TEXT" NAME="FirstName"></P> <P><INPUT TYPE="TEXT" NAME="MiddleName"></P> <P><INPUT TYPE="TEXT" NAME="LastName"></P> <P><INPUT TYPE="SUBMIT"></P> <P><INPUT TYPE="RESET"></P> Όταν ο χρήστης πατήσει το κουµπί Submit, καλείται µια δεύτερη σελίδα (συνήθως µια asp σελίδα). Αυτή η σελίδα θα περιέχει την πληροφορία από τα τρία πιο πάνω πεδία σε µορφή όπως Η γλώσσα VBScript και η τεχνολογία ASP 87

88 FirstName="Alexander", MiddleName="the" και LastName="Great". Αν στην ετικέτα INPUT δεν περιλαµβάνονταν το χαρακτηριστικό NAME τότε δε θα υπήρχε τρόπος να ξεχωρίσουµε ποια πληροφορία προέρχεται από το αντίστοιχο πεδίο. Τα πιο πάνω αποτελούν γενικές κατευθυντήριες γραµµές για τη δήλωση µιας φόρµας σε HTML. Πιο κάτω θα δουλέψουµε µε ένα απλό παράδειγµα. Παράδειγµα - Φόρµα για παροχή σύνδεσης µε συγκεκριµένο τµήµα µιας εταιρίας Ο διευθυντής µιας εταιρίας θέλει να καταγράψει όλους τους υπαλλήλους που προτίθενται να πάρουν άδεια κατά τους καλοκαιρινούς µήνες. Κάθε τµήµα της εταιρίας πρέπει να παίρνει άδεια σε διαφορετική βδοµάδα του καλοκαιριού γι' αυτό και πρέπει ο υπάλληλος να δηλώσει το τµήµα στο οποίο εργάζεται. Η πιο κάτω σελίδα υλοποιεί µια φόρµα η οποία ζητά από τον κάθε υπάλληλο που την επισκέπτεται αυτή την πληροφορία. Ακολουθώντας τα παρακάτω βήµατα µπορείτε να δοκιµάσετε το παράδειγµα: Ανοίξτε το συντάκτη σελίδων που προτιµάτε και γράψτε τον ακόλουθο κώδικα: <HTML> <HEAD> <TITLE>Summer Vacation - Get Department Form</TITLE> </HEAD> <BODY> <H1>Summer Vacation Logistics</H1> <H2>Each department will leave at a different week.<br> Please provide the name of your department<br></h2> <FORM ACTION="SummerVacationNotice.asp" METHOD=POST> Please type your department here: <P><INPUT TYPE="TEXT" NAME="Department"></P> <P><INPUT TYPE="SUBMIT" VALUE="Click here to send this information"></p> <P><INPUT TYPE="RESET" VALUE="Reset data"></p> </FORM> </BODY> </HTML> Αποθηκεύστε τη σελίδα δίνοντας της το όνοµα SummerVacationDeptForm.asp ηµιουργήστε µια καινούργια σελίδα η οποία θα περιέχει τον παρακάτω κώδικα: <HTML> <HEAD> <TITLE>Summer Vacation Notice</TITLE> </HEAD> <BODY> <H1>Summer Vacation</H1> <H2>Thank you for registering your department</h2> </BODY> </HTML> Αποθηκεύστε αυτή τη σελίδα µε το όνοµα SummerVacationNotice.asp Ανοίξτε τον browser σας και τρέξτε τη σελίδα SummerVacationDeptForm.asp. Γράψτε ένα όνοµα και πατήστε το κουµπί Click here to send this information. Αυτό το περιστατικό (event) καλεί τη σελίδα SummerVacationNotice.asp. Μπορείτε να δείτε το αποτέλεσµα του πιο πάνω κώδικα Η γλώσσα VBScript και η τεχνολογία ASP 88

89 Προς πληροφόρηση: Σε αυτό το κεφάλαιο όλα τα αρχεία έχουν κατάληξη.asp. Τα αρχεία που περιέχουν τις φόρµες και δεν περικλείεται σ' αυτά ASP κώδικας, µπορούν να έχουν διαφορετική κατάληξη, όπως για παράδειγµα.html ή.htm. Εντούτοις, καθώς ένα site µεγαλώνει σε µέγεθος και πολυπλοκότητα, πολύ πιθανών να είναι απαραίτητη ή τουλάχιστον πολύτιµη η χρήση ASP κώδικα. Άρα, αν εξαρχής δηµιουργηθούν αρχεία µε κατάληξη.asp είναι πολύ πιθανών να αποφύγουµε το πρόβληµα αλλαγής στην κατάληξη των αρχείων σε περίπτωση προσθήκης ASP κώδικα σε αργότερα στάδια. Επεξήγηση του κώδικα Οι πρώτες γραµµές του αρχείου SummerVacationDeptForm.asp αποτελούν τα headers µιας ιστοσελίδας. Στη συνέχεια ακολουθεί η ετικέτα <FORM>. <FORM ACTION="SpringRetreatNotice.asp" METHOD=POST> Μέσα στην ετικέτα ορίζονται τα χαρακτηριστικά ACTION και METHOD. Το πρώτο λέει στον browser ποια σελίδα θα ζητήσει από το server όταν ο χρήστης πατήσει το κουµπί Submit. Το δεύτερο χαρακτηριστικό λέει στον browser πως (µε ποια µέθοδο) να στείλει τα δεδοµένα του χρήστη στον server. Προς πληροφόρηση: Σε αυτό το σηµείο της µελέτης σας είναι προτιµότερο να χρησιµοποιείτε τη µέθοδο POST. Μεταξύ της αρχικής ετικέτας <FORM> και καταληκτικής ετικέτας </FORM> µεσολαβεί µια συµβολοσειρά και τρεις γραµµές µε ετικέτες <INPUT>: Please type your department here: <P><INPUT TYPE="TEXT" NAME="Department"></P> <P><INPUT TYPE="RESET" VALUE="Reset data"></p> <P><INPUT TYPE="SUBMIT" VALUE="Click here to send this information"></p> Η πρώτη γραµµή εκτυπώνει το µήνυµα που θέλει ο προγραµµατιστής να φαίνεται στη σελίδα ώστε να καθοδηγήσει το χρήστη να δώσει τη σωστή πληροφορία µέσα στο textbox. Η δεύτερη γραµµή δηµιουργεί το κουτί (textbox) στο οποίο ο χρήστης θα βάλει την πληροφορία. Προσοχή στα δύο χαρακτηριστικά: TYPE = "TEXT" λέει στον browser ότι ακολουθεί ένα textbox, όχι ένα checkbox ή option buttons. NAME = "Department" είναι το όνοµα που ταυτίζει τα δεδοµένα µε τα περιεχόµενα του textbox. Πάντα πρέπει να χρησιµοποιείται το χαρακτηριστικό ΝΑΜΕ σε µία ετικέτα <INPUT> γιατί διαφορετικά δε θα µπορούν να χρησιµοποιηθούν τα δεδοµένα µέσα σε µια ASP σελίδα. Οι δύο επόµενες γραµµές κώδικα παρέχουν τα κουµπιά Submit και Reset. Με το χαρακτηριστικό VALUE µπορεί ο προγραµµατιστής να δώσει ότι όνοµα θέλει στο κουµπί. Τέλος, η φόρµα κλείνει µε τη χρήση του καταληκτικής ετικέτας </FORM>. Όταν ο χρήστης δει αυτή τη σελίδα, µπορεί να βάλει κάποια πληροφορία µέσα στο textbox. Το κουµπί Reset «καθαρίζει» τα δεδοµένα από τη φόρµα (σ' αυτή την περίπτωση την πληροφορία που βάζει ο χρήστης στο textbox). Αν όµως ο χρήστης πατήσει το κουµπί Click here to send this information, Η γλώσσα VBScript και η τεχνολογία ASP 89

90 αρχικά ο browser λαµβάνει την πληροφορία από το textbox και την αναθέτει στο όνοµα του textbox. Για παράδειγµα αν κάποιος τοποθέτησε στο textbox την πληροφορία "Marketing" τότε θα γινόταν η εξής ανάθεση: Department = "Marketing". Στη συνέχεια ο browser στέλνει τα δεδοµένα στο server, µαζί µε την αίτηση του για τη σελίδα που ονοµάζεται SummerVacationNotice.asp. Όταν ο server λάβει µια.asp σελίδα (όπως είναι η SummerVacationNotice) θα εκτελέσει τον κώδικα, θα παράξει το αποτέλεσµα και θα το στείλει πίσω στον browser για να το εµφανίσει. Προς πληροφόρηση: Στις επόµενες σελίδες του κεφαλαίου θα συζητήσουµε πως µπορούµε να χρησιµοποιήσουµε την πληροφορία που λαµβάνουµε από το χρήστη. Σηµαντικά σηµεία για τις φόρµες: Στην ετικέτα <FORM> πρέπει να οριστούν δύο χαρακτηριστικά: ACTION = "..." και METHOD = "..." Στο χαρακτηριστικό ACTION βάζουµε πάντα την ASP σελίδα που θα χρησιµοποιήσει τα δεδοµένα του χρήστη. Για την ώρα χρησιµοποιείτε τη µέθοδο POST Σε κάθε INPUT πρέπει να ορίζεται το χαρακτηριστικό NAME Κάθε φόρµα πρέπει να έχει το κουµπί Submit Μην ξεχνάτε να κλείνεται τη φόρµα µε τη χρήση του καταληκτικής ετικέτας </FORM> 6.4. Λήψη πληροφοριών από το χρήστη Σε αυτό το κεφάλαιο θα µάθουµε πως να µαζεύουµε τις πληροφορίες από το χρήστη µε τη βοήθεια των φορµών. Οι φόρµες είναι ιδανικές στο να µαζεύουν πληροφορίες από το χρήστη και να τις περνούν στην ASP ζητώντας µια νέα ASP σελίδα. Πως µπορεί όµως η καινούργια ASP σελίδα να χρησιµοποιήσει αυτές τις πληροφορίες; Πρέπει να τοποθετηθούν µέσα σε κάποιο αποθηκευτικό χώρο και µετά να υπάρχει κάποιος τρόπος να χρησιµοποιήσουµε την πληροφορία αυτή µέσα στον ASP κώδικα. Όπως σε κάθε γλώσσα προγραµµατισµού, έτσι και η ASP λύνει αυτό το πρόβληµα µε τη χρήση µεταβλητών (variables) οι οποίες αποθηκεύουν προσωρινά κάποια πληροφορία. Πιο κάτω ακολουθεί ένα παράδειγµα µε χρήση µεταβλητών. Θυµηθείτε από το προηγούµενο κεφάλαιο, το παράδειγµα µε τη φόρµα που ζητά από το χρήστη να δώσει το όνοµα του τµήµατος στο οποίο ανήκει. Αυτό φαίνεται στην τρίτη γραµµή στο πιο κάτω παράδειγµα: <FORM ACTION="SummerVacationNotice.asp" method=post> Please type your department here: <P><INPUT TYPE="Text" NAME="Department"> </P> <INPUT TYPE="Reset" VALUE="Reset data"> <INPUT TYPE="Submit" VALUE="Click here to send this information"> </FORM> Όταν ο χρήστης γράψει το όνοµα του τµήµατος στο οποίο ανήκει και πατήσει το κουµπί Submit, ο browser στέλνει δύο πληροφορίες στον server. Πρώτον ότι ο server πρέπει να πάρει το αρχείο µε όνοµα SummerVacationNotice.asp. εύτερον, είναι µια λίστα µε τα δεδοµένα που ο χρήστης είχε περάσει στα πεδία της προηγούµενης φόρµας. Στη σελίδα SummerVacationNotice.asp µπορούµε να λάβουµε την πληροφορία αυτή µε τον εξής τρόπο: <% Dim strlastname strlastname = Request.Form("Department") %> Επεξήγηση του κώδικα Η πρώτη γραµµή λέει στο server να ξεκινήσει µια παράγραφο µε ASP κώδικα. Η δεύτερη γραµµή δηµιουργεί µια µεταβλητή µε το όνοµα strlastname. Στη συνέχεια, στην τρίτη γραµµή αναθέτουµε στη µεταβλητή αυτή την τιµή που η ASP έχει ζητήσει από το server - η πληροφορία που έχει επιστραφεί από την προηγούµενη φόρµα. Αφού αποθηκευτεί στη µεταβλητή, στη συνέχεια µπορεί να χρησιµοποιηθεί µέσα στον ASP κώδικα όπως ο προγραµµατιστής επιθυµεί. Η γλώσσα VBScript και η τεχνολογία ASP 90

91 Αυτό που πρέπει κανείς να προσέξει είναι η σύνταξη - πρέπει πάντα να αρχίζει µε µια γραµµή στην οποία ορίζεται η µεταβλητή µε τη χρήση της λέξης Dim. Για την ώρα είναι καλύτερα να χρησιµοποιούνται απλά ονόµατα µεταβλητών αποτελούµενα µόνο από γράµµατα, χωρίς αριθµούς ή σύµβολα. Τα ονόµατα των µεταβλητών ΕΝ πρέπει να χωρίζονται µε spaces. Έχοντας ορίσει µια µεταβλητή µε το keyword Dim, µπορούµε να της αναθέσουµε κάποια τιµή. Η γραµµή που αναθέτει τιµή στη µεταβλητή πρέπει να αρχίζει µε το όνοµα της µεταβλητής. Το όνοµα της µεταβλητής ακολουθείται από space και το σύµβολο της ισοδυναµίας (=) και αµέσως µετά ακόµα ένα space. Στο δεξιό µέρος της ισοδυναµίας πρέπει να χρησιµοποιήσουµε τις λέξεις Request.Form, µετά προσθέτουµε την αριστερή παρένθεση, διπλά εισαγωγικά και το όνοµα που έχουµε δώσει στο πεδίο (δηλαδή την τιµή που έχει πάρει το χαρακτηριστικό NAME στο πεδίο τύπου TEXT). Τέλος, κλείνουµε τα εισαγωγικά και προσθέτουµε την αριστερή παρένθεση. Μπορούµε να δηµιουργήσουµε περισσότερες από µια µεταβλητές µε µιας, χρησιµοποιώντας τη λέξη Dim και διαχωρίζοντας τα ονόµατα των µεταβλητών µε κόµµατα: Dim strlastname, strmiddlename, strfirstname Τα πιο κοινά λάθη γίνονται στους τύπους. Αν η ανάθεση σε µια µεταβλητή δε δουλεύει πρέπει να γίνει έλεγχος στα εξής σηµεία: Ορθογραφία του ονόµατος, έτσι όπως έχει δοθεί στην ετικέτα INPUT. Είναι καλή συνήθεια να χρησιµοποιείται η ίδια θέση των γραµµάτων, έτσι όπως έχει οριστεί µέσα στην ετικέτα (κεφαλαία ή µικρά), γιατί σε πολλούς servers η λέξη Home είναι διαφορετική από τη λέξη home ή τη λέξη HOME. Προσοχή στην ορθογραφία των λέξεων Request.Form Για αρχή είναι καλά να ορίζεται απλά ονόµατα µεταβλητών: µόνο γράµµατα, κανένα σύµβολο. Τα ονόµατα των πεδίων πρέπει να περικλείονται µέσα σε διπλά εισαγωγικά κι αυτά µέσα σε παρενθέσεις. Σιγουρευτείτε πως στο αριστερό µέρος της ισοδυναµίας τοποθετείτε το όνοµα της µεταβλητής και στο δεξιό τοποθετείται η πηγή για τα δεδοµένα. Η ανάθεση των µεταβλητών πρέπει να βρίσκεται µεταξύ των ASP συµβόλων (δηλαδή <% και %>) Σιγουρευτείτε πως στη σελίδα που ορίζετε τη φόρµα σας, έχετε προσθέσει το χαρακτηριστικό METHOD = post. Εκτύπωση πληροφοριών Σε αυτή την ενότητα θα µάθουµε πως να εκτυπώνουµε τις πληροφορίες που λήφθηκαν από το χρήστη. Αν θέλουµε οι λέξεις "Hello World" να εµφανίζονται σε µια απλή HTML σελίδα, δεν χρειάζεται καν να προσθέσουµε ετικέτες. Απλά γράφουµε τη συµβολοσειρά. Εντούτοις, αν θέλουµε µια ASP σελίδα να εκτυπώνει αυτή τη συµβολοσειρά, πρέπει να επιβάλουµε στην ASP να δηµιουργήσει µια HTML σελίδα που να περιέχει αυτή την πληροφορία. Αυτό γίνεται µε τη χρήση µιας δήλωσης (statement) ή διαφορετικά µιας εντολής. Αν γράψει κανείς τις λέξεις Hello World σε ASP κώδικα - δηλαδή µεταξύ των <% και %> - η ASP θα ψάξει µέσα στο ευρετήριό της για να βρει την εντολή και λέξη-κλειδί "Hello" κάνοντας χρήση της παραµέτρου "World". Αφού δε θα βρει µια τέτοια εντολή, η ASP θα στείλει ένα µήνυµα λάθους στο αίτηµα του χρήστη. Η τεχνική για να πει κανείς στην ASP να εκτυπώσει τη συµβολοσειρά σε µια HTML σελίδα είναι µε τη χρήση της εντολής Response.Write (βλ. Κεφάλαιο 6: Αντικείµενα της ASP -> Αντικείµενο Response). Η εντολή αυτή σε γενικές γραµµές καλεί το αντικείµενο Response για να εκτυπώσει το µήνυµα που παίρνει ως παράµετρο, στην οθόνη. (Το αντικείµενο Response είναι βασικά η αναπαράσταση της HTML σελίδας που πρόκειται να σταλεί από τον εξυπηρετητή στον αντίστοιχο φυλλοµετρητή που τη ζήτησε). Η σύνταξη είναι πολύ απλή: <% Response.Write "Hello World" %> Όταν η ASP διερµηνεύσει τον πιο πάνω κώδικα, εισαγάγει µέσα στην HTML σελίδα τις λέξεις Hello World, όπως ακριβώς θα τοποθετούσε ο προγραµµατιστής τη συµβολοσειρά Hello World µέσα σε µια κανονική HTML σελίδα. Αυτές οι τεχνικές και τα πιθανά λάθη συνοψίζονται στον πιο κάτω πίνακα: Η γλώσσα VBScript και η τεχνολογία ASP 91

92 Region of code on page: Type in Result in Browser HTML Hello World Hello World ASP Response.Write "Hello World" Hello World ASP Hello World Error Η εντολή Response.Write χρησιµεύει επίσης για να γράψει κανείς ετικέτες HTML σε µια HTML σελίδα. Για παράδειγµα αν θέλει κανείς να γράψει µέσω της ASP µια οριζόντια γραµµή µέσα σε µια σελίδα, µπορεί να χρησιµοποιήσει την εντολή Response.Write ως ακολούθως: <% Response.Write "<HR>" %> Η ASP δουλεύει εξίσου καλά για την τοποθέτηση των περιεχοµένων µιας µεταβλητής µέσα σε HTML κώδικα. Ας υποθέσουµε ότι ζητούµε από το χρήστη, µε τη βοήθεια µιας φόρµας, να δώσει το όνοµα του προϊόντος που τον ενδιαφέρει. Θα µπορούσαµε να γράψουµε το όνοµα του προϊόντος µε τον εξής τρόπο: <% Dim stritem stritem = Request.Form("ItemChoice") Response.Write stritem %> Η πρώτη γραµµή ξεκινά τον ASP κώδικα. Στη συνέχεια δηµιουργείται µια µεταβλητή µε το όνοµα stritem. Η Τρίτη γραµµή λαµβάνει τα δεδοµένα που τοποθέτησε ο χρήστης µέσα στο πεδίο ItemChoise και τα αναθέτει µέσα στη µεταβλητή που δηµιουργήθηκε στην προηγούµενη γραµµή. Αυτή η γραµµή διαθέτει προς χρήση στον ASP κώδικα, τα δεδοµένα που παρείχε ο χρήστης µέσα από µια φόρµα. Η επόµενη γραµµή γράφει τα περιεχόµενα της µεταβλητής stritem στην HTML σελίδα ενώ η τελευταία γραµµή τελειώνει τον ASP κώδικα. Το πιο πάνω κοµµάτι κώδικα έστω κι αν φαίνεται απλό, έχει πολλή χρησιµότητα, γι' αυτό και δεν πρέπει να υποτιµηθεί. Η συµβολοσειρά που λαµβάνεται από το server και εκτυπώνεται ως αποτέλεσµα πάνω στην HTML σελίδα θα διαφέρει ανάλογα µε την προτίµηση του κάθε χρήστη. Ενώ στη στατική HTML σελίδα µπορούµε να στείλουµε ακριβώς την ίδια σελίδα κάθε φορά που ένας επισκέπτης ζητά να τη δει, µε την ASP µπορούµε να προσαρµόσουµε τη σελίδα σύµφωνα µε το τι έχει ανάγκη να δει ο χρήστης. Σηµειώστε πως η σύνταξη της εντολής Response.Write για µεταβλητές, διαφέρει λιγάκι από τη σύνταξη που χρησιµοποιείται για απλό κείµενο (text) ή ετικέτες (tags). Στην εντολή αυτή µια µεταβλητή δεν πρέπει να βρίσκεται µέσα σε διπλά εισαγωγικά (double quotes). Επίσης σηµειώστε ότι είναι πολύ πιθανών να δηµιουργηθούν προβλήµατα αν τοποθετηθεί η πληροφορία του χρήστη απευθείας µέσα στην εντολή Response.Write. Γι' αυτό και είναι προτιµότερο να χρησιµοποιείται µεταβλητή για να κρατά τα δεδοµένα του χρήστη και µετά να καλείται η εντολή Response.Write για να εκτυπώνει τα δεδοµένα που περιέχει η µεταβλητή. Είναι σηµαντικό να έχει κανείς υπόψη του ότι ο ASP κώδικας θα περιέχει επίσης ετικέτες HTML και κείµενο το οποίο θα εκτυπώνεται απευθείας πάνω στη σελίδα. Αυτό σηµαίνει πως υπάρχουν δύο τρόποι εκτύπωσης µιας συµβολοσειράς από χαρακτήρες πάνω στην οθόνη. Μπορεί να προέρχονται είτε απευθείας από τον HTML κώδικα, είτε από τη χρήση εντολών και µεθόδων της ASP, όπως είναι και η εντολή Response.Write. Είναι πιθανών οι δύο πιο πάνω τρόποι να χρησιµοποιούνται µαζί, όπως στο ακόλουθο παράδειγµα: Next week's featured item: <% Dim stritem stritem = Request.Form("ItemChoice") Response.Write stritem %> Στο πιο πάνω παράδειγµα η πρώτη γραµµή στον κώδικα είναι µια απλή, συνηθισµένη γραµµή κώδικα σε HTML, εκτύπωση µιας συµβολοσειράς στην οθόνη. Στη δεύτερη γραµµή αρχίζει η ASP και στην Η γλώσσα VBScript και η τεχνολογία ASP 92

93 τρίτη ορίζεται η µεταβλητή stritem. Στην τέταρτη γραµµή ανατίθεται στη µεταβλητή η πληροφορία που παρείχε ο χρήστης στο πεδίο ItemChoise. Τέλος, στην πέµπτη γραµµή η ASP γράφει τα περιεχόµενα της µεταβλητής στην HTML σελίδα. Αυτή η ανάµιξη της HTML και της ASP µπορεί να γραφτεί και µεταξύ ετικετών. Για παράδειγµα, αν θέλουµε κάποιες λέξεις να εµφανίζονται µε έντονα γράµµατα στην οθόνη (µε τη χρήση των ετικετών <Β> και </Β>) µπορούµε να χρησιµοποιήσουµε τον εξής κώδικα: <P>Message to the World:<P> <P><B> <% Response.Write "Hello World" %> </B></P> Στο πιο πάνω παράδειγµα, η παράγραφος αρχίζει πριν αρχίσει τον ASP κώδικα. Η ASP γράφει τις δύο λέξεις "Hello World" µε έντονα γράµµατα (αφού περικλείονται µέσα στις ετικέτες <Β> και </Β>). Το αποτέλεσµα θα ήταν το ίδιο αν γράφαµε τον ακόλουθο HTML κώδικα: <P>Message to the world:</p> <P><B>Hello World</B></P> Εναλλακτικά, θα µπορούσαµε να έχουµε το ίδιο αποτέλεσµα, γράφοντας τον ακόλουθο ASP κώδικα: <P>Message to the World: <P> <% Response.Write "<B>" Response.Write "Hello World" Response.Write "</B>" %> </P> Ο πιο πάνω κώδικας γράφει στη σελίδα που δηµιουργεί την πρώτη γραµµή µε το µήνυµα. Στην τρίτη γραµµή ξεκινά ο ASP κώδικας και οι επόµενες τρεις γραµµές προσθέτουν κώδικα (τις ετικέτες <B> και </Β>) και τη συµβολοσειρά "Hello World". Η εντολή της ASP Response.Write δεν νοιάζεται αν η παράµετρος που δέχεται είναι µια συµβολοσειρά, µία ετικέτα ή συνδυασµός των δύο. Επίσης, στην ίδια εντολή Response.Write µπορεί να εµφανίζονται µαζί ετικέτες και οποιαδήποτε συµβολοσειρά όπως στο πιο κάτω παράδειγµα: <P> Message to the World: <P> <% Response.Write "<B>Hello World</B>" %> </P> Ας δούµε ακόµα ένα παράδειγµα. Έστω ότι θέλουµε οι δύο λέξεις "Hello World" να εµφανίζονται σε δύο διαφορετικές γραµµές. Αυτό προϋποθέτει τη χρήση της ετικέτας <BR>. Αυτό µπορεί να γίνει µε διάφορους τρόπους, είτε µε τοποθέτησή του µέσα σε ASP κώδικα είτε απευθείας µε χρήση HTML. Στα τρία παραδείγµατα που ακολουθούν προσέξτε τη θέση της ετικέτας <BR>. Παράδειγµα 1: <P> Message to the World: <BR><B> <% Response.Write "Hello World" %> </P> Παράδειγµα 2: <P> Message to the World: <% Response.Write "<BR>" Response.Write "<B>" Response.Write "Hello World" %> Η γλώσσα VBScript και η τεχνολογία ASP 93

94 </P> Παράδειγµα 3: <P> Message to the World: <% Response.Write "<BR><B> Hello World" %> </P> Και τα τρία παραδείγµατα παράγουν το ίδιο αποτέλεσµα. Μπορείτε να δείτε το αποτέλεσµα του πιο πάνω κώδικα Μπορεί να σκεφτείτε πως τα πιο πάνω παραδείγµατα δουλεύουν σωστά αλλά το αποτέλεσµα δεν είναι και τόσο εντυπωσιακό αφού το ίδιο αποτέλεσµα θα µπορούσε να επιτευχθεί κάνοντας χρήση απλής HTML. Εντούτοις, η δύναµη της χρήσης του ASP κώδικα προέρχεται από την ικανότητά του να γράφει τα περιεχόµενα µιας µεταβλητής µέσα στη σελίδα. Για παράδειγµα, αν χρησιµοποιήσουµε µια φόρµα για να πάρουµε τον τρόπο µε τον οποίο ένας χρήστης θέλει να στείλει το µήνυµά του στον κόσµο, µπορούµε να αποθηκεύσουµε αυτή την πληροφορία µέσα σε µια µεταβλητή, έστω strgreeting. Με τη χρήση της εντολής Response.Write µπορούµε µετά να τοποθετήσουµε αυτή την πληροφορία µέσα στη σελίδα. Σε επόµενο κεφάλαιο θα δείτε πως τα περιεχόµενα µιας µεταβλητής µπορούν να χρησιµοποιηθούν για να παρθούν αποφάσεις για το ποια σελίδα θα εκτυπωθεί στον browser του χρήστη. Η σύνταξη για να τοποθετηθούν τα περιεχόµενα µιας µεταβλητής σε µια σελίδα φαίνεται πιο κάτω: <% strgreeting=request.form("greeting") %> <P>Message to the World: <% Response.Write strgreeting %> </P> Προσέξτε ότι στην τρίτη γραµµή δε ζητούµε από την ASP να εκτυπώσει ένα συγκεκριµένο µήνυµα αλλά το µήνυµα που έχει τοποθετήσει ο χρήστης µέσα στο πεδίο Greeting της φόρµας. Ας ολοκληρώσουµε τη συζήτηση µε την εξής συντοµογραφία. Εφόσον η εντολή Response.Write χρησιµοποιείται τόσο συχνά για να τοποθετήσει τα περιεχόµενα µιας µεταβλητής µέσα στη σελίδα, έχει δηµιουργηθεί συντοµογραφία γι' αυτήν. Απλά χρησιµοποιώντας την εντολή <%=strgreeting%> µπορεί κανείς να τοποθετήσει τα περιεχόµενα της µεταβλητής strgreeting µέσα στη σελίδα. Για παράδειγµα, αντί να χρησιµοποιηθεί ο κώδικας: <%strgreeting=request.form("greeting")%> Message to the World: <%Response.Write strgreeting%> χρησιµοποιούµε τη συντοµογραφία όπως πιο κάτω: <%strgreeting=request.form("greeting")%> Message to the World: <%= strgreeting%> Η γλώσσα VBScript και η τεχνολογία ASP 94

95 Προσοχή: Αυτή η τεχνική δε δουλεύει αν χρησιµοποιηθεί µε διαφορετικό τρόπο από τον πιο πάνω. Στο πιο πάνω παράδειγµα, η τέταρτη γραµµή θα αποτύχει: <% strgreeting=request.form("greeting") Response.Write "Message to the World:" =strgreeting %> Εντούτοις θα δουλέψει µια χαρά αν τοποθετηθεί µέσα σε µια γραµµή HTML κώδικα όπως πιο κάτω: <%strgreeting=request.form("greeting")%> Message to the World: <%=strgreeting%> Παράδειγµα - Registration of Department Reply Στο παράδειγµα της φόρµας SummerVacationDeptForm.asp του κεφαλαίου 2, η ετικέτα <FORM> λαµβάνει ως τιµή στο χαρακτηριστικό ACTION τη σελίδα SummerVacationNotice.asp. Εντούτοις η απάντηση που επιστρέφει η σελίδα αυτή δεν ενηµερώνει το χρήστη αν όντως έχει εγγραφεί σωστά στο τµήµα που ανήκει. Απλά στέλνει το µήνυµα "Thank you for registering your department". Στο κεφάλαιο αυτό θα διαµορφωθεί η σελίδα που επιστρέφει ως απάντηση ο server στον browser του χρήστη, έτσι ώστε όχι µόνο να επιβεβαιώνει την εγγραφή του χρήστη στο εν λόγω τµήµα που εργάζεται αλλά και να τον ενηµερώνει σε ποιο τµήµα έχει εγγραφεί. Προς το παρόν η εγγραφή σε µια βάση δεδοµένων της πληροφορίας που λαµβάνεται από το χρήστη δεν εµπίπτει στους στόχους του συγκεκριµένου κεφαλαίου. Στο συγκεκριµένο παράδειγµα θα επικεντρωθούµε στην επιστροφή µηνυµάτων στο χρήστη. Στο συγκεκριµένο παράδειγµα θα πρέπει να αντικατασταθεί ο κώδικας στο αρχείο TSummerVacationNotice.aspT µε τον ακόλουθο: <HTML> <HEAD> <TITLE> Summer Vacation Notice</TITLE> </HEAD> <BODY> <H1>Summer Vacation</H1> <P>Thank you for registering as a member of the <B> <% Dim strdepartment strdepartment = Request.Form("Department") Response.Write strdepartment %> </B> Department.</P> </BODY> </HTML> Το αρχείο πρέπει να σωθεί µε το ίδιο όνοµα, δηλαδή SummerVacationNotice.asp Τώρα, αν τρέξετε τη σελίδα στον browser, η πιο πάνω σελίδα θα επιστραφεί ως αποτέλεσµα και θα περιέχει την πληροφορία που έβαλε ο χρήστης στο textbox της αρχικής σελίδας SummerVacationDeptForm.asp. Μπορείτε να δείτε το αποτέλεσµα του πιο πάνω κώδικα. Η γλώσσα VBScript και η τεχνολογία ASP 95

96 Πως δουλεύει ο κώδικας: Ο πιο πάνω κώδικας αρχίζει µε τα γνωστά headers µιας σελίδας: <HTML> <HEAD> <TITLE>Summer Vacation Notice</TITLE> </HEAD> <BODY> <H1>Summer Vacation</H1> <H2>Thank you for registering as a member of the Στη συνέχεια όµως ξεκινά ο ASP κώδικας µε την ετικέτα <% και η πρώτη δήλωση (statement) δηµιουργεί µια µεταβλητή (variable) µε το όνοµα strdepartment. Μέσα σ' αυτή τη µεταβλητή η ASP θέτει την πληροφορία που στέλνει ο browser και που καθορίζεται από το όνοµα "Department". ( ηλαδή, τοποθετεί όποια πληροφορία έχει τοποθετήσει ο χρήστης στο textbox της φόρµας). Η τρίτη AS δήλωση εκτυπώνει τα περιεχόµενα της µεταβλητής strdepartment στη σελίδα. Στο τέλος, κλείνει ο ASP κώδικας. <% Dim strdepartment strdepartment = Request.Form("Department") Response.Write strdepartment & " Department" %> 6.5. Παραδείγµατα χρήσης των τεχνικών ASP Σε αυτό το κεφάλαιο θα µελετήσουµε κάποια παραδείγµατα που χρησιµοποιούν τις τεχνικές που αναφέρθηκαν στα προηγούµενα κεφάλαια. Είµαστε έτοιµοι να δηµιουργήσουµε κάποια παραδείγµατα κάνοντας χρήση των τεχνικών που έχουν αναφερθεί προηγουµένως. Θα ασχοληθούµε µε δύο περιπτώσεις. Η λύση για καθεµιά απ' αυτές απαιτεί τη δηµιουργία δύο αρχείων. Το πρώτο αποτελεί µια φόρµα και το δεύτερο είναι η απάντηση που θα σταλεί από τον server στον browser του χρήστη, η οποία θα χρησιµοποιεί τα δεδοµένα του χρήστη από την πρώτη φόρµα. Η γλώσσα VBScript και η τεχνολογία ASP 96

97 Ας υποθέσουµε το εξής σενάριο: Έστω ότι θέλετε να εργαστείτε σε µια πολυεθνική εταιρία κατασκευής και πώλησης λογισµικού που έχει πολλά τµήµατα σε διάφορες χώρες, δηλαδή κάθε χώρα φιλοξενεί κι ένα διαφορετικό τµήµα που ασχολείται µε διαφορετικό τοµέα. Εσείς θέλετε να ενηµερωθείτε για τα τµήµατα που υπάρχουν και τι υπηρεσίες προσφέρει το καθένα. Για τους χρήστες που επισκέπτονται την ιστοσελίδα της εταιρίας αυτής, ζητείται να δώσουν το όνοµα της χώρας που τους ενδιαφέρει να πάρουν πληροφορίες. Όταν οι χρήστες περάσει αυτή την πληροφορία, θα παίρνει ως απάντηση µια σελίδα η οποία θα λέει το όνοµα της χώρας που έχει περάσει ο χρήστης ως δεδοµένο εισόδου και δίπλα θα ενηµερώνει το τµήµα το οποίο φιλοξενεί. Ανοίξτε τον συντάκτη σελίδων που προτιµάτε και γράψτε τον ακόλουθο κώδικα: <HTML> <HEAD> <TITLE>Query user for country of preference</title> </HEAD> <BODY> <H1>Entry Form for Country of preference</h1> <FORM ACTION="DepartmentInfo.asp" METHOD=post> <P>Please enter your country of preference</p> <P><INPUT TYPE="text" NAME="Country"></P> <INPUT TYPE="submit" VALUE="Submit Query"> <INPUT TYPE="reset" VALUE="Reset"> </FORM> </BODY> </HTML> Αποθηκεύστε τη σελίδα δίνοντας της το όνοµα GetDeptInfoForm.asp ηµιουργήστε µια καινούργια σελίδα η οποία θα περιέχει τον παρακάτω κώδικα: <HTML> <HEAD> <TITLE>Department Information</TITLE> </HEAD> <BODY> <P>Information on Depertment for the country <B> <% Dim strcountryname strcountryname = Request.Form("Country") Response.Write strcountryname %> </BODY> </HTML> Αποθηκεύστε αυτή τη σελίδα µε το όνοµα DepartmentInfo.asp Ανοίξτε τον browser σας και τρέξτε τη σελίδα GetDeptInfoForm.asp. Γράψτε τη χώρα Italy και πατήσετε το κουµπί submit για να δείτε το αποτέλεσµα Μπορείτε να δείτε το αποτέλεσµα του πιο πάνω κώδικα. Η γλώσσα VBScript και η τεχνολογία ASP 97

98 Επεξήγηση του ASP κώδικα Το πρώτο αρχείο αρχίζει µε τη χρήση συνηθισµένων HTML ετικετών για τον τίτλο και την επικεφαλίδα της σελίδας. Στη συνέχεια ζητά από το χρήστη τη χώρα που ενδιαφέρεται να µάθει πληροφορίες κάνοντας χρήση της HTML φόρµας. Σ' αυτή τη φόρµα δεν υπάρχει κώδικας (η σελίδα µπορούσε να αποθηκευτεί έχοντας την κατάληξη.html). <HTML> <HEAD> <TITLE>Query user for country of residence</title> </HEAD> <BODY> <P>Entry Form for Country of Domicile</P> Ας ρίξουµε µια µατιά στις ετικέτες της φόρµας για να πάρουµε µια ιδέα. Η αρχική ετικέτα <FORM> πρέπει να περιλαµβάνει το χαρακτηριστικό ACTION=filename.asp. Η τιµή γι' αυτό το χαρακτηριστικό πρέπει να είναι το asp αρχείο που πρέπει να ανοίξει όταν ο χρήστης πατήσει το κουµπί submit, σε αυτή την περίπτωση το αρχείο DepartmentInfo.asp. Η επόµενη γραµµή εκτυπώνει ένα σύνολο από λέξεις σε απλό HTML κείµενο µε σκοπό να εξηγήσει στο χρήστη τι να γράψει στο textbox. Στη συνέχεια η φόρµα περιέχει τρία πεδία. Ένα textbox, το οποίο πρέπει να πάρει κάποιο όνοµα για να χρησιµοποιηθεί από τη σελίδα που καλείται από το χαρακτηριστικό ACTION. Το δεύτερο και τρίτο πεδίο είναι κλασσικά κουµπιά µιας φόρµας, το Submit και το Reset. Όταν ο χρήστης πατήσει το κουµπί Submit τότε ο browser µαζεύει όλη την πληροφορία που βρίσκεται στα πεδία της φόρµας ξεχωρίζοντάς τα από το όνοµα του πεδίου από το οποίο πήρε την πληροφορία αυτή. Αυτή η δυάδα πληροφορίας στέλλεται στον server µε το αίτηµα να ανοίξει τη σελίδα που υποδεικνύεται από το χαρακτηριστικό ACTION της ετικέτας <FORM>. <FORM ACTION="TaxRules.asp" METHOD=post> Please enter your country of domicile <INPUT TYPE="text" NAME="Country"></P> <INPUT TYPE="submit" VALUE="Submit Query"> <INPUT TYPE="reset" VALUE="Reset"> </FORM> Όταν ο χρήστης πατά το κουµπί Submit, και ο browser αιτείται της σελίδας που καθορίζεται στο χαρακτηριστικό ACTION, ο server καλεί τη σελίδα αυτή, στην περίπτωσή µας τη σελίδα DepartmentInfo.asp, και ελέγχει κατά πόσο υπάρχει asp κώδικας προς εκτέλεση. Σε αυτή την περίπτωση υπάρχει, έτσι την στέλνει στον διερµηνέα της ASP. <HTML> <HEAD> <TITLE>Tax Rules Entry Form for Country</TITLE> Η γλώσσα VBScript και η τεχνολογία ASP 98

99 </HEAD> <BODY> <P>The tax rules for the country of Η δεύτερη σελίδα περιέχει επίσης τον τίτλο και την επικεφαλίδα της σελίδας, απλό HTML κώδικα. Στη συνέχεια ο διερµηνέας της ASP συναντά το σηµείο <% απ' όπου και αρχίζει να εκτελεί τον asp κώδικα. <% %> Dim strcountrydomicile strcountrydomicile = Request.Form("Country") Response.Write strcountrydomicile </BODY> </HTML> Η πρώτη γραµµή δηµιουργεί µια µεταβλητή, µετά ζητά την πληροφορία που έχει σταλεί από τη φόρµα και έχει το όνοµα Country. Αν το πεδίο περιείχε την πληροφορία "Italy" τότε λαµβάνει τη λέξη αυτή και την αποθηκεύει µέσα στη µεταβλητή strcountry. Στην επόµενη γραµµή χρησιµοποιείται η εντολή Response.Write παίρνοντας ως παράµετρο τη µεταβλητή, η οποία και εκτυπώνει τα περιεχόµενά της στην υπό δηµιουργία σελίδα. Το αποτέλεσµα επιστρέφεται στον server. Ο server προσθέτει κάποιες αναγκαίες πληροφορίες στην απάντηση που θα στείλει στον browser και τελικά την στέλνει µέσω του δικτύου σε αυτόν που εξ' αρχής την είχε ζητήσει. Εναλλακτικές εκδόσεις του κώδικα: Μια εναλλακτική λύση θα ήταν οι λέξεις "The tax rules for the country of from the ASP" να παραχθούν από την ASP καθώς επίσης και το όνοµα της χώρας. Το σώµα του κώδικα θα έµοιαζε ως ακολούθως: <BODY> <% Dim strcountry Response.Write "<P>The tax rules for the country of " strcountry = Request.Form("Country") Response.Write strcountry %> </BODY> Μια βελτίωση στον πιο πάνω κώδικα θα ήταν να αναθέσουν τιµή στα περιεχόµενα της µεταβλητής µια γραµµή πιο πάνω έτσι ώστε να διευθετούσαµε αυτή την "αγγαρεία" από την αρχή. <BODY> <% Dim strcountry strcountry = Request.Form("Country") Response.Write "<P>The tax rules for the country of " Response.Write strcountry %> </BODY> Στο τέλος θα µειώναµε τον κώδικα ακόµα περισσότερο αν µετακινούσαµε το κείµενο έξω, σε HTML µορφή και κάνοντας χρήση της συντοµογραφίας για την εντολή Response.Write, όπως πιο κάτω: <BODY> <% Dim strcountrydomicile strcountrydomicile = Request.Form("Country") %> <P>The tax rules for the country of <%=strcountrydomicile %> </BODY> Με το πιο πάνω παράδειγµα ολοκληρώσαµε το κεφάλαιο µε τα παραδείγµατα, κάνοντας χρήση των βασικών τεχνικών σε ASP. Σκοπός µας ήταν να γίνει αντιληπτό πως καλείται µια asp σελίδα και τι γίνεται µέχρι να εκτυπωθεί στην οθόνη. Η γλώσσα VBScript και η τεχνολογία ASP 99

100 6.6. Αντικείµενα στην ASP Στην ASP υπάρχουν πάρα πολλά αντικείµενα διαθέσιµα προς χρήση για όποιον ασχολείται µε την ανάπτυξη ASP προγραµµάτων. Τίθεται όµως το ερώτηµα: Τι είναι ένα αντικείµενο; Και πως µπορούµε να τα καλέσουµε µέσα από τον ASP κώδικα έτσι ώστε να παρέχουν τη λειτουργικότητα για την οποία έχουν κατασκευαστεί; Ένα αντικείµενο είναι ένα στιγµιότυπο ενός σύνθετου στοιχείου (Component) που διαθέτει µεθόδους (methods) και χαρακτηριστικά (properties). Για το τι είναι ένα Component, απλά θα αναφέρουµε ότι είναι ένα κοµµάτι κώδικα, γραµµένο σε οποιαδήποτε γλώσσα προγραµµατισµού που έχει µεταγλωττιστεί επιτυχώς και το οποίο παρέχει τη δυνατότητα να δηµιουργείς στιγµιότυπά του (αντικείµενα), χρησιµοποιώντας τις µεθόδους και τα χαρακτηριστικά που το απαρτίζουν. Η ASP είναι πολύ πιο ισχυρή αφού, όχι µόνο παρέχει τη δυνατότητα χρήσης των έξι ενσωµατωµένων της αντικειµένων αλλά παρέχει και τη δυνατότητα κλήσης άλλων εφαρµογών ή άλλων components όπως π.χ. τα ADO Components που παρέχουν πρόσβαση σε βάσεις δεδοµένων ή τα CDO Components που χρησιµοποιούνται για αποστολή µηνυµάτων. Πιο κάτω αναφέρονται έξι αντικείµενα της ASP που είναι διαθέσιµα στο χρήστη χωρίς να πρέπει να ορίσει στιγµιότυπο για να χρησιµοποιήσει τις µεθόδους και τα χαρακτηριστικά του, γι' αυτό και ονοµάζονται ενσωµατωµένα. Αυτά είναι: Application ASPError Request Response Server Session Για να τα χρησιµοποιήσει κανείς, πρέπει να ακολουθήσει την εξής σύνταξη: Object.method() Object) (όπου method είναι µια µέθοδος για το αντικείµενο ή Object.Property (όπου property είναι ένα χαρακτηριστικό του αντικειµένου Object) Για παράδειγµα, το αντικείµενο Response διαθέτει τη µέθοδο Write για να εκτυπώσει τα δεδοµένα που δέχεται ως είσοδο στον browser του client. Π.χ. η εντολή <% Response.Write "Hello World!" %> εκτυπώνει στον browser το µήνυµα 'Hello World!'. Έτσι µπορεί κανείς να χρησιµοποιήσει τις µεθόδους και χαρακτηριστικά ενός αντικειµένου µε το να γράψει το όνοµα του αντικειµένου και µετά µια µέθοδο ή χαρακτηριστικό. Η τελεία (.) διαχωρίζει το όνοµα του αντικειµένου από το χαρακτηριστικό ή τη µέθοδο. Στο πιο πάνω παράδειγµα, δεν έχουν χρησιµοποιηθεί οι παρενθέσεις. Αυτό συµβαίνει µόνο γιατί στην VBScript δεν γράφουµε τις παρενθέσεις εκτός από ορισµένες περιπτώσεις. Έτσι η VBScript είναι ίσως ο πιο φυσικός τρόπος να γράψει κανείς ASP σελίδες αλλά και η ευκολότερη απ' όλες τις άλλες γλώσσες. Στα επόµενα κεφάλαια περιγράφονται οι συλλογές (collections), µέθοδοι (methods), χαρακτηριστικά (properties) και περιστατικά (events) του κάθε αντικειµένου ξεχωριστά. Το αντικείµενο Application Το αντικείµενο Application δηµιουργείται όταν ζητηθεί η πρώτη *.asp σελίδα, αφού έχει πρώτα ενεργοποιηθεί ο IIS (Internet Information Server), και παραµένει ενεργό µέχρι ο server κλείσει. Όλες οι µεταβλητές που δηµιουργούνται µε την ενεργοποίηση του αντικειµένου αυτού, είναι ορατές σ όλη την εφαρµογή (δηλ. η εµβέλειά τους είναι καθολική) και αυτό σηµαίνει ότι όλοι οι χρήστες της εφαρµογής µπορούν να έχουν πρόσβαση σ αυτές. Όλες οι *.asp σελίδες που είναι τοποθετηµένες σε ένα ιδεατό κατάλογο (directory) καθώς και σε υποκαταλόγους που ανήκουν στον κυρίως κατάλογο, βρίσκονται κάτω από την εµβέλεια της εφαρµογής. Έτσι, οι µεταβλητές αυτές, (δηλ. αυτές που είναι ορατές στο επίπεδο της εφαρµογής), µοιράζονται από περισσότερους του ενός χρήστες σε µια συγκεκριµένη στιγµή. Συνεπώς, αν δύο χρήστες αιτούνται την ίδια σελίδα από δύο διαφορετικές µηχανές, τότε και οι δύο έχουν πρόσβαση στις ίδιες µεταβλητές που αναφέρονται στη σελίδα αυτή. Η γλώσσα VBScript και η τεχνολογία ASP 100

101 Πιο κάτω ακολουθεί ο τρόπος σύνταξης του αντικειµένου καθώς και όλες οι συλλογές, µέθοδοι και περιστατικά που το απαρτίζουν. Σύνταξη: Application.Method Συλλογές (Collections): Contents: Μια συλλογή από όλα τα στοιχεία που έχουν προστεθεί στο αντικείµενο Application StaticObjects: Συλλογή από όλα τα στοιχεία που έχουν προστεθεί στο αντικείµενο Application µέσω του tag <object> Μέθοδοι (Methods): Contents.Remove: ιαγράφει το συγκεκριµένο στοιχείο από τη συλλογή Applications.Contents. Contents.RemoveAll: ιαγράφει όλα τα στοιχεία από τη συλλογή Applications.Contents. Lock: 'Κλειδώνει' το αντικείµενο έτσι ώστε µόνο ένας χρήστης να µπορεί να αλλάξει τις τιµές των µεταβλητών ανά πάσα στιγµή. UnLock: 'Ξεκλειδώνει' το αντικείµενο, επιτρέποντας σε πολλούς χρήστες να έχουν πρόσβαση σ αυτό. Περιστατικά (Events): Application_OnEnd: Αυτό το event συµβαίνει όταν ο server κλείσει µετά το Session_OnEnd event. Με την εκτέλεση του event, όλες οι µεταβλητές καταστρέφονται. Application_OnStart: Αυτό το event συµβαίνει αφού ξεκινήσει ο server, όταν καλεστεί η πρώτη *.asp σελίδα. Όλες οι µεταβλητές που θα είναι ορατές στο επίπεδο της εφαρµογής, µπορούν να οριστούν σ αυτό το σηµείο. Το αντικείµενο ASPError Το αντικείµενο ASPError δηµιουργείται όταν καλεστεί η µέθοδος ServerGetlastError. Περιλαµβάνει πολλές πληροφορίες αναφορικά µε το τελευταίο λάθος που έγινε κατά την εκτέλεση του script, που περιέχει η σελίδα που ζητήθηκε, από τον server. Είναι ένα καινούργιο αντικείµενο και είναι διαθέσιµο µόνο στον IIS5. Το αντικείµενο περιλαµβάνει µόνο χαρακτηριστικά (properties) αφού κατά κύριο λόγο χρησιµεύει για σκοπούς ενηµέρωσης. Πιο κάτω ακολουθεί ο τρόπος σύνταξης του αντικειµένου καθώς και όλα τα χαρακτηριστικά που το απαρτίζουν. Σύνταξη: ASPError.Property Χαρακτηριστικά (Properties) ASPCode: Είναι µια συµβολοσειρά που περιέχει τον κωδικό του λάθους που παράχθηκε από τον server Number: Είναι ένας ακέραιος αριθµός που περιέχει τον κωδικό του λάθους που επέστρεψε το COM component. (a standard COM error code) Source: Είναι µια συµβολοσειρά (string) η οποία περιέχει το ακριβές σηµείο στον κώδικα ο οποίος προκάλεσε το λάθος, αν αυτός είναι διαθέσιµος. Category: Συµβολοσειρά, η οποία καθορίζει κατά πόσο το λάθος προκλήθηκε από τον IIS, τη γλώσσα σεναρίου (scripting language) ή κάποιο άλλο στοιχείο (component). File: Συµβολοσειρά, που λέει το όνοµα του.asp αρχείου που προκάλεσε το λάθος. Line: Ακέραιος, ο οποίος δείχνει τον αριθµό της γραµµής που προκάλεσε το λάθος. Column: Ακέραιος, ο οποίος δείχνει τη θέση της στήλης µέσα στο.asp αρχείο που προκάλεσε το λάθος. Description: Συµβολοσειρά, σύντοµη περιγραφή του λάθους. ASPDescription: Συµβολοσειρά, λεπτοµερής περιγραφή του λάθους, αν αυτό είναι σχετικό µε την ASP. Η γλώσσα VBScript και η τεχνολογία ASP 101

102 Το αντικείµενο Request Το αντικείµενο Request καθιστά διαθέσιµες όλες τις τιµές των µεταβλητών που ο client περνά στον server κατά τη διάρκεια ενός HTTP request. Οι τιµές αυτές περιλαµβάνουν πληροφορίες για τον browser του client, λεπτοµέρειες για τα cookies (µόνο για το domain του χρήστη), καθώς και κάποια ενδεικτικά για τον client (πχ. αν έχει πρόσβαση µέσω SSL - Secure Socket Layer) και πολλές άλλες πληροφορίες. Πιο κάτω ακολουθεί ο τρόπος σύνταξης του αντικειµένου καθώς και όλες οι συλλογές, χαρακτηριστικά και µέθοδοι που το απαρτίζουν. Σύνταξη: Request.Collection Property Method(variable) Συλλογές (Collections): ClientCertificate: Καθιστά διαθέσιµη µια συλλογή από τιµές (πληροφορίες σχετικές µε το χρήστη) που στέλλονται µέσω του HTTP request στον server. Cookies: Καθιστά διαθέσιµα όλα τα cookies που είναι αποθηκευµένα στον browser του client και αφορούν το συγκεκριµένο domain. Form: Συλλογή όλων των τιµών µιας φόρµας (Form element) σε ένα HTTP αίτηµα. QueryString: Συλλογή των µεταβλητών που είναι αποθηκευµένες σε ένα HTTP query string. Επίσης σε ένα url µπορούν να προστεθούν στο τέλος οι πληροφορίες Όνοµα/Τιµή. Π.χ. η διεύθυνση " περιέχει τη µεταβλητή author µε τιµή 'someone'. ServerVariables: Περιέχει µια συλλογή από προκαθορισµένες µεταβλητές και επιπλέον µια συλλογή των τιµών των HTTP headers που στάλθηκαν από τον browser του client στον server. Χαρακτηριστικά (Properties): TotalBytes: Είναι ένας ακέραιος αριθµός (read-only) ο οποίος δίνει τον συνολικό αριθµό των bytes που στέλνει ο client στον server για κάθε αίτηµα. Μέθοδοι (Methods): BinaryRead: Λαµβάνει τα δεδοµένα που στέλνει ο client στον server σε ακατέργαστη µορφή, ως µέρος του POST request. Όλα αυτά τα δεδοµένα τα αποθηκεύει σε SafeArray. Το αντικείµενο Response Το αντικείµενο Response χρησιµοποιείται για να στείλει δεδοµένα εξόδου πίσω στον browser του client. Περιλαµβάνει όλες τις HTTP µεταβλητές, τα cookies που θα αποθηκευτούν στον browser του client καθώς και άλλες πληροφορίες για τα περιεχόµενα της διεύθυνσης που έχει αιτηθεί. Πιο κάτω ακολουθεί ο τρόπος σύνταξης του αντικειµένου καθώς και όλες οι συλλογές, χαρακτηριστικά και µέθοδοι που το απαρτίζουν. Σύνταξη: Response.Collection Property Method(variable) Συλλογές (Collections): Cookies: Συλλογή που χρησιµοποιείται για να καθορίσει τις τιµές των cookies που θα σταλούν πίσω στον browser του client. Χαρακτηριστικά (Properties): Buffer: Είναι µια µεταβλητή - κατηγόρηµα (boolean value) που δεικνύει κατά πόσο η σελίδα που θα σταλεί ως output στον browser του client έχει αποθηκευτεί ή όχι. Αν το χαρακτηριστικό αυτό (Response.Buffer) έχει πάρει την τιµή true τότε τα δεδοµένα εξόδου της σελίδας δε θα σταλούν στον browser του client µέχρι το script αυτής της σελίδας ολοκληρωθεί. Εξ ορισµού, για τον IIS5, το χαρακτηριστικό αυτό παίρνει τιµή true. Έτσι, αν κάποιος δε θέλει το αποτέλεσµα της σελίδας να αποθηκευτεί, πρέπει να θέσει την τιµή του σε false. CacheControl: Είναι µια συµβολοσειρά που καθορίζει κατά πόσο τα δεδοµένα εξόδου της ASP πρέπει να αποθηκευτούν ή όχι. Αν κάποιος θέλει ο proxy server να αποθηκεύει το output της ASP, τότε πρέπει να θέσει την τιµή του χαρακτηριστικού αυτού σε Public διαφορετικά αν δε θέλει να αποθηκεύονται τα αποτελέσµατα της ASP, πρέπει να θέσει την τιµή του σε Private. Η γλώσσα VBScript και η τεχνολογία ASP 102

103 Charset: Συµβολοσειρά (string), η οποία προσθέτει το όνοµα της σειράς χαρακτήρων που θα χρησιµοποιηθούν από το HTTP-content-type header. ContentType: Συµβολοσειρά (string), η οποία καθορίζει τον τύπο των περιεχοµένων στο HTTP response (HTTP content type). Αν το Response.ContentType δεν έχει καθοριστεί τότε, εξ ορισµού παίρνει την τιµή "text/html". Expires: Ακέραιος, ο οποίος καθορίζει τη διάρκεια του χρόνου 'ζωής' (σε λεπτά) µιας αποθηκευµένης σελίδας. ηλαδή, έστω ένας χρήστης έχει αιτηθεί µιας σελίδας και αυτή έχει αποθηκευτεί στην ιδεατή µνήµη. Όταν ο χρήστης ζητήσει την ίδια σελίδα και η σελίδα αυτή δεν έχει λήξει, µπορεί να την πάρει από την µνήµη χωρίς να χρειάζεται να σταλεί από τον server ξανά. ExpiresAbsolute: Είναι µια ηµεροµηνία και ακριβής χρόνος (date/time) >µετά που η αποθηκευµένη πλέον σελίδα έχει λήξει και δεν είναι πλέον έγκυρη. Π.χ. Response.ExpiresAbsolute = #January 01, :00:00# IsClientConnected: Μεταβλητή - κατηγόρηµα (boolean value) που δείχνει κατά πόσο ο client διατηρεί ακόµα σύνδεση στη συγκεκριµένη σελίδα. Αν το χαρακτηριστικό έχει τιµή false η επεξεργασία του script της συγκεκριµένης σελίδας µπορεί να σταµατήσει µε το κάλεσµα της µεθόδου Response.End. Pics: Συµβολοσειρά η οποία δηµιουργεί επικεφαλίδες PICS και τις προσθέτει στις αντίστοιχες HTTP.Καθορίζει κάποια Pics, πχ. ύπαρξη βίας, sex κλπ στην ιστοσελίδα. (Σηµείωση: Ο όρος αποτελεί ακρώνυµο για το Platform for Internet Content Selection. Με τον όρο αυτό εννοούµε κάποια στατιστικά ποσοστά που έχουν σχεδιαστεί για να βοηθούν τους γονείς και τους καθηγητές να ελέγχουν τα παιδιά, µε το να βλέπουν ενδεικτικά ποια είναι τα περιεχόµενα µιας σελίδας.) Status: Συµβολοσειρά η οποία καθορίζει την κατάσταση στην οποία βρίσκεται ο server. Περιλαµβάνεται στα headers του HTTP response. Αυτή η συµβολοσειρά περιλαµβάνει τρία ψηφία (τριψήφιος κωδικός) και µια σύντοµη επεξήγηση. Π.χ. "404 File Not Found". Μέθοδοι (Methods): AddHeader: Προσθέτει ένα συνηθισµένο HTTP header στο response. Πρέπει να χρησιµοποιηθεί πριν να σταλεί οποιοδήποτε κείµενο (text) ή HTTP στον client. εν αντικαθιστά ένα HTTP header µε το ίδιο όνοµα, για παράδειγµα: Response.AddHeader "AUTHENTICATED", "You are now logged on. AppendToLog: Συµβολοσειρά που προστίθεται στο τέλος του log entry του server για τη συγκεκριµένη σελίδα. Π.χ. Response.AppendToLog "Your custom log message goes here". BinaryWrite: Γράφει τις δεδοµένες πληροφορίες για τη σελίδα στο τρέχον HTTP output, χωρίς να χρησιµοποιεί κάποια συγκεκριµένη σειρά χαρακτήρων (character set). Η µέθοδος αυτή είναι χρήσιµη για να γράφεται η πληροφορία που δεν είναι string, αλλά πχ. binary data που χρειάζεται µια εφαρµογή ή bytes που απαρτίζουν την πληροφορία µια φωτογραφίας. Clear: Σβήνει οποιοδήποτε υπάρχων HTML output από το cache. End: Σταµατά την επεξεργασία του script της τρέχουσας σελίδας και στέλνει τα περιεχόµενα που έχει ήδη τρέξει στον browser του client. Η περαιτέρω επεξεργασία της σελίδας, διακόπτεται. Flush: Στέλνει αµέσως τα αποθηκευµένα δεδοµένα εξόδου στον client. Είναι το αντίθετο της µεθόδου Response.Clear η οποία σβήνει τα αποθηκευµένα δεδοµένα εξόδου. Χρησιµοποιείται για να στέλνει µέρη µεγάλων σελίδων στον client όταν το χαρακτηριστικό Response.Buffer πάρει την τιµή true. Redirect : Κατευθύνει τον browser σε άλλη σελίδα (url). Π.χ. Response.Redirect " Write: Γράφει το string που παίρνει ως παράµετρο στη σελίδα (όπως θα εµφανιστεί στον browser). Π.χ. Response.Write "Hello World!" Το αντικείµενο Server Το αντικείµενο Server δίνει τη δυνατότητα πρόσβασης σε όλες τις µεθόδους και χαρακτηριστικά του server. Πιο κάτω ακολουθεί ο τρόπος σύνταξης του αντικειµένου καθώς και όλα τα χαρακτηριστικά και µέθοδοι που το απαρτίζουν. Σύνταξη: Server.Property Method Η γλώσσα VBScript και η τεχνολογία ASP 103

104 Χαρακτηριστικά (Properties) ScriptTimeout: Ακέραιος ο οποίος καθορίζει το χρόνο σε λεπτά που το script µιας σελίδας µπορεί να τρέξει αφού ο server αποτύχει να το εκτελέσει και επιστρέφει µήνυµα λάθους. Μέθοδοι (Methods) CreateObject: ηµιουργεί ένα στιγµιότυπο (instance) ενός αντικειµένου (component, application ή scripting object). Το στιγµιότυπο αυτό µπορεί να αρχικοποιηθεί µε το να περάσει την τιµή του στη µέθοδο Server.CreateObject, πχ. Server.CreateObject ("ADODB.Recordset"). Execute: Εκτελεί τη σελίδα που αιτήθηκε και επιστρέφει τον έλεγχο στη σελίδα που κάλεσε τη µέθοδο αυτή. Είναι µια πολύ χρήσιµη µέθοδος η οποία µπορεί να χρησιµοποιηθεί για να εκτελέσει το script µιας άλλης.asp σελίδας και αφού εκτελεστεί να επιστραφεί ο έλεγχος στην αρχική σελίδα. GetLastError: Επιστρέφει ένα αντικείµενο ASPError το οποίο µπορεί να χρησιµοποιηθεί για να ληφθούν πληροφορίες που αφορούν το τελευταίο λάθος που προκλήθηκε κατά την εκτέλεση του ASP script. HTMLEncode: Μετατρέπει ένα string σε HTML µορφή. Όλοι οι µη-επιτρεπτοί χαρακτήρες µετατρέπονται στους αντίστοιχους HTML χαρακτήρες, πχ. ο χαρακτήρας "<" µετατρέπεται σε <. MapPath: Συσχετίζει το ιδεατό ή σχετικό µονοπάτι (virtual or relative path) µε ένα µονοπάτι γνωστό στον server. Transfer: Μεταφέρει τον έλεγχο της σελίδας σε άλλη, αυτήν που καθορίζει το url. Αντίθετα από τη µέθοδο Execute, ο έλεγχος δεν επιστρέφεται στη σελίδα που κάλεσε τη µέθοδο Server.Transfer. URLEncode: Μετατρέπει µια συµβολοσειρά που αντιστοιχεί σε ένα url σε URL encoding. Π.χ. Server.URLEncode (" επιστρέφει http%3a%2f%2fwww%2esome%2ecom. Το αντικείµενο Session Το αντικείµενο Session δηµιουργείται αυτόµατα κάθε φορά που ο browser του client έχει πρόσβαση στις σελίδες ενός site. Το αντικείµενο Session είναι συγκεκριµένο για κάθε χρήστη και διαφέρει από χρήστη σε χρήστη. Μπορεί να χρησιµοποιηθεί για να αποθηκεύσει συγκεκριµένες µεταβλητές για κάποιον χρήστη και ο IIS θα διατηρήσει αυτές τις τιµές των µεταβλητών καθώς ο χρήστης πλοηγείται µέσα στις σελίδες του site αυτού. Μπορεί κανείς να δηµιουργήσει και να έχει πρόσβαση τέτοιες µεταβλητές. Μπορεί επίσης να αποθηκεύσει συγκεκριµένες προτιµήσεις ενός χρήστη µέσα σε ένα αντικείµενο Session όπως 'font-size, background-color' και πολλά άλλα. Πιο κάτω ακολουθεί ο τρόπος σύνταξης του αντικειµένου καθώς και όλες οι συλλογές, χαρακτηριστικά, µέθοδοι και περιστατικά που το απαρτίζουν. Σύνταξη: Session.Collection Property Method Συλλογές (Collections) Contents: Περιέχει όλα τα στοιχεία που έχουν προστεθεί στο αντικείµενο Session. Μπορεί κανείς να έχει πρόσβαση στα περιεχόµενα της συλλογής και να ανακτήσει µια λίστα απ' τα στοιχεία ή ένα συγκεκριµένο στοιχείο. Η συλλογή αυτή περιέχει όλα τα Session items εκτός απ' αυτά που δηµιουργήθηκαν χρησιµοποιώντας το στοιχείο <object>. StaticObjects: Περιέχει όλα τα στοιχεία που έχουν δηµιουργηθούν χρησιµοποιώντας το στοιχείο <object>. Όπως και µε τη συλλογή Session.Contents µπορείς να έχεις πρόσβαση στα περιεχόµενα της συλλογής αυτής και να ανακτήσεις συγκεκριµένο στοιχείο απ' αυτήν, ή ολόκληρη τη λίστα των στοιχείων. Χαρακτηριστικά (Properties) CodePage: Ακέραιος ο οποίος καθορίζει τον κωδικό της σελίδας που θα χρησιµοποιηθεί για να εκτυπώσει τα περιεχόµενα της σελίδας στον browser του client, π.χ. ο κωδικός σελίδας 1252 χρησιµοποιείται για τις Αµερικανικές καθώς και τις περισσότερες ευρωπαϊκές γλώσσες, ενώ ο κωδικός 932 χρησιµοποιείται για Ιαπωνικά. LCID: Αποτελεί ακρώνυµο για τις λέξεις Locale Identifier. Είναι µια διεθνής γνωστή συντοµογραφία που µοναδικά καθορίζει µια τοποθεσία, π.χ. LCID 2057 καθορίζει τη βρετανική τοποθεσία. SessionID: Ένας ακέραιος ο οποίος επιστρέφει τον identifier του session για τον συγκεκριµένο φυλλοµετρητή του χρήστη. Η γλώσσα VBScript και η τεχνολογία ASP 104

105 TimeOut: Ένας ακέραιος ο οποίος καθορίζει µια περίοδο αναµονής σε λεπτά. Αν ο client δεν ανανεώσει τη σελίδα ή να αιτηθεί µιας άλλης σελίδας από το site µέσα σ' αυτό το χρονικό διάστηµα, τότε ο server τερµατίζει το τρέχον session. Αν το site δεν έχει καθορίσει κάποιο διάστηµα τότε εξ' ορισµού ο χρόνος αυτός είναι 20 λεπτά. Μέθοδοι (Methods) Abandon: Τερµατίζει το τρέχον αντικείµενο session και ελευθερώνει όλους τους πόρους του. Αυτό σηµαίνει πως αν ο χρήστης αιτηθεί οποιασδήποτε σελίδας µετά το κάλεσµα της µεθόδου Session.Abandon τότε θα δηµιουργηθεί ένα καινούργιο session. Contents.Remove: ιαγράφει το τρέχον αντικείµενο από τη συλλογή Contents. Contents.RemoveAll: Καταστρέφει όλα τα στοιχεία από τη συλλογή Contents. Περιστατικά (Events) Session_OnEnd: Αυτό το event συµβαίνει όταν το session τερµατίζει µε τη µέθοδο Abandon Session_OnStart: Αυτό το event συµβαίνει όταν ξεκινήσει ένα καινούργιο session. Όλα τα ASP objects είναι διαθέσιµα στον χρήστη. Εδώ µπορούν αν καθοριστούν και όλες οι καθολικές µεταβλητές του session. Το αντικείµενο Command Το αντικείµενο Command είναι βασικά σχεδιασµένο για να χειρίζεται εντολές οποιουδήποτε είδους, κυρίως όµως εντολών που απαιτούν παραµέτρους. Όπως και το αντικείµενο Connection, το αντικείµενο Command µπορεί να τρέξει εντολές που επιστρέφουν ένα RecordSet ή όχι. Ως γεγονός, αν η εντολή δε δέχεται παραµέτρους, δεν υπάρχει βασικά κάποιο πρόβληµα αν χρησιµοποιήσει κανείς ένα οποιοδήποτε από τα αντικείµενα Connection, Command ή RecordSet. Πιο κάτω ακολουθεί ο τρόπος χρήσης του αντικειµένου. Επιστροφή RecordSets: Για µια εντολή που επιστρέφει recordset συνήθως χρησιµοποιείται η µέθοδος Execute. Εντούτοις, σε αντίθεση µε το αντικείµενο Connection, δεν καθορίζεις το κείµενο της εντολής που θα εκτελεστεί άµεσα αλλά έµµεσα, µε τη χρήση του χαρακτηριστικού Commandtext. Για παράδειγµα: Set cmdauthors = Server.CreateObject("ADODB.Command") cmdauthors.commandtext = "Authors" Set rsauthors = cmdauthors.execute Αυτός είναι και ο πιο απλός τρόπος να αναγκάσεις το αντικείµενο Command να εκτελέσει µια απλή εντολή που επιστρέφει ένα read-only recordset. Η µέθοδος Execute έχει επίσης κάποιες προαιρετικές παραµέτρους: Argument Descriptions RecordsAffected Parameters Options Μια µεταβλητή η οποία κρατεί τον αριθµό των records που έχουν επηρεαστεί από την εντολή. Ένας πίνακας (array) που κρατεί τις τιµές των παραµέτρων. Τα options της εντολής. Είναι παρόµοιο µε το Options της µεθόδου Open του αντικειµένου Recordset. Το αντικείµενο Connection Το αντικείµενο Connection είναι αυτό που µας παρέχει τη σύνδεση µε µια βάση δεδοµένων, αλλά δε µας παρέχει µόνο αυτή τη λειτουργία. Μπορούµε να χρησιµοποιήσουµε το αντικείµενο Connection για να κρατήσουµε πληροφορίες για τη βάση δεδοµένων, όπως π.χ. τον τύπο της βάσης δεδοµένων και τα χαρακτηριστικά που υποστηρίζει. Επίσης µπορεί κανείς να χρησιµοποιήσει το αντικείµενο Connection για να τρέξει κάποιες εντολές. Αυτές οι εντολές µπορεί να είναι queries (όπως updates, insertions, deletions ή άλλα sql statements), καθώς επίσης και εντολές που επιστρέφουν ένα RecordSet. (Το RecordSet είναι ένα object της Visual Basic που επιστρέφει ένα σύνολο από records ενός table σε µια Η γλώσσα VBScript και η τεχνολογία ASP 105

106 βάση δεδοµένων και µε τη χρήση κάποιων µεθόδων και χαρακτηριστικών που διαθέτει, µπορεί κάποιος να ανακτήσει πληροφορίες για τα records αυτά.) Οι εντολές που τρέχουν µε τη χρήση του αντικειµένου Connection είναι γενικά ερωτήµατα δράσης (action queries) αλλά είναι χρήσιµο να γνωρίζει κανείς ότι µπορεί να επιστρέψει και RecordSets. Πιο κάτω ακολουθεί ο τρόπος χρήσης του αντικειµένου: Για να επιστρέψει ένα αντικείµενο Connection ένα Recordset πρέπει να χρησιµοποιηθεί η µέθοδος Execute. Η σύνταξη της µεθόδου είναι: Connection.Execute CommandText, [RecordsAffected], [Options] Οι παράµετροι είναι: Argument CommandText RecordsAffected Books Descriptions Το κείµενο της εντολής που θα εκτελεστεί. Είναι το ίδιο µε το Source property της µεθόδου Open του αντικειµένου RecordSet. Μια µεταβλητή η οποία κρατεί τον αριθµό των records που έχουν επηρεαστεί από την εντολή Command. Οι επιλογές της εντολής Command, που µπορεί να είναι µια ή περισσότερες από τις σταθερές CommandTypeEnum ή ExecuteOptionEnum. Η µέθοδος Execute προαιρετικά επιστρέφει ένα αντικείµενο RecordSet, που στη συγκεκριµένη περίπτωση αναθέτει κανείς την επιστρεφόµενη τιµή σε µια µεταβλητή. Για παράδειγµα: Set conpubs = Server.CreateObject("ADODB.Connection") conpubs.open strconn '--- o τρόπος που δηµιουργούµε ένα αντικείµενο Connection set rsauthors = conpubs.execute ("Authors") Μπορεί κανείς να διερωτηθεί ποια είναι η διαφορά στο να χρησιµοποιεί τη µέθοδο Execute του αντικειµένου Connection από τη µέθοδο Open του αντικειµένου RecordSet. Μπορεί να µην φαίνεται πως υπάρχει µεγάλη διαφορά, αλλά µε τη µέθοδο Open του αντικειµένου RecordSet έχει κανείς τη δυνατότητα να αλλάξει τον τύπο του cursor του επιστρεφόµενου recordset. Αυτή η δυνατότητα δεν είναι εφικτή για τη µέθοδο Execute του αντικειµένου Connection, έτσι το µόνο που θα µπορεί κανείς να κάνει στο recordset που έχει επιστραφεί από τη µέθοδο είναι πλοήγηση προς-τα-µπροστά (forwardonly) και διάβασµα των δεδοµένων (read-only access). Το αντικείµενο ObjectContext Το αντικείµενο ObjectContext χρησιµοποιείται για να διεκπεραιωθεί ή να αποτύχει µια µεταφορά δεδοµένων. Για να επιτύχει µια *.asp σελίδα ένα transaction, η πρέπει να είναι παρούσα στο script της συγκεκριµένης οθόνης. Πιο κάτω ακολουθεί ο τρόπος σύνταξης του αντικειµένου καθώς και όλες οι µέθοδοι και τα περιστατικά που το απαρτίζουν. Σύνταξη: ObjectContext.Method Μεθόδοι (Methods) SetAbort: Ματαιώνει το transaction το οποίο είχε αρχικοποιηθεί από το ASP script. SetComplete: ηλώνει ότι δεν υπάρχει λόγος που να εµποδίζει το transaction από το να ολοκληρωθεί. Έτσι, αν όλα τα στοιχεία που λαµβάνουν µέρος στο transaction καλούν επίσης τη µέθοδο SetComlete, τότε το transaction, χωρίς αµφιβολία, θα εκτελεστεί. Περιστατικά (Events) OnTransactionAbort: Αυτό το event όταν η µεταφορά δεδοµένων αποτύχει. OnTransactionCommit: Αυτό το event συµβαίνει όταν το µέρος του script που είναι υπεύθυνο για τη µεταφορά δεδοµένων, εκτελείται επιτυχώς. Η γλώσσα VBScript και η τεχνολογία ASP 106

107 ASP scripting objects Τα ASP Scripting Objects δεν εµπίπτουν στον βασικό πυρήνα των ASP objects που έχουν αναφερθεί στο προηγούµενο κεφάλαιο. Τα scripting objects περιλαµβάνουν τα αντικείµενα Dictionary, FileSystem, Drive, Folder και TextStream. Αυτά τα αντικείµενα χειρίζονται τη διασύνδεση µε τον server και µπορούν να αναφέρονται στα χαρακτηριστικά (properties) του server ως επίσης να διαχειρίζονται τη δηµιουργία αρχείων κλπ. Πιο κάτω ακολουθεί ο τρόπος µε τον οποίο χρησιµοποιούνται τα αντικείµενα αυτά. Τα scripting objects αρχικοποιούνται µε τη χρήση του αντικειµένου Server: <% Set objfile = Server.CreateObject("Scripting.FileSystemObject") Set FileText= FileObject.OpenTextFile (MyFile, 1, FALSE, FALSE) Application("MyContents") = FileText.ReadLine %> Αυτό το κοµµάτι κώδικα ανοίγει ένα ήδη υπάρχων αρχείο σε µορφή text, του οποίου το όνοµα και το path είναι αποθηκευµένα στη µεταβλητή "MyFile", και αναθέτει τα περιεχόµενά του σε µια µεταβλητή της εφαρµογής (application variable) που ονοµάζεται "MyContents". Μπορεί επίσης να χρησιµοποιηθεί η µέθοδος CreateTextFile του αντικειµένου για να δηµιουργήσει ένα καινούργιο αρχείο σε µορφή text. Τα Drive και Folder scripting objects παρέχουν πλήρη αναφορά για τα χαρακτηριστικά των drives και των directories που υπάρχουν στον server. Το αντικείµενο Folder επιτρέπει επίσης τη δηµιουργία και τη διαγραφή καταλόγων (directories), στο server µόνο. Πρέπει να δοθεί έµφαση στο γεγονός ότι τα scripting objects ενεργούν µόνο στον server, ποτέ στον client! Τέλος, το αντικείµενο TextStream παρέχει περισσότερες µεθόδους διαχείρισης αρχείων από αυτές που παρέχονται απευθείας από το FileSystemObject, παρόλο που πρέπει πρώτα να χρησιµοποιηθεί η µέθοδος CreateTextFile για ν αρχικοποιηθεί η αναφορά σε ένα συγκεκριµένο αρχείο, όπως φαίνεται στο πιο κάτω παράδειγµα: <% Set objfile = Server.CreateObject("Scripting.FileSystemObject") objfile.createtextfile("myfile.txt") Set objfile2 = objfile.getfile ("MyFile.txt") objfile2.writeline("this is much more refined!" %> Το αντικείµενο TextStream παρέχει ένα αριθµό από µεθόδους για διάβασµα από και γράψιµο προς αρχεία. Παρέχει επίσης χρήσιµα properties όπως το Column, Line, AtEndOfLine και AtEndOfStream για να καθορίσουν τη θέση που βρισκόµαστε µέσα στο αρχείο ASP Cookies Ένα από τα προβλήµατα του δικτύου είναι ότι δε γνωρίζουµε ποιον φιλοξενούµε σε ένα site. Είναι κάποιος καινούργιος επισκέπτης ή τακτικός φιλοξενούµενος ; ε θα ήταν καλύτερο αν για κάθε είδος επισκέπτη εµφανιζόταν στον browser του διαφορετική σελίδα, να τον αντιµετωπίζαµε δηλαδή διαφορετικά; Ίσως να δείχναµε σε ένα καινούργιο επισκέπτη µια σελίδα καλωσορίσµατος και τρόπους πλοήγησης µέσα στο site µας ή να παραλείπαµε τα γνωστά και σταθερά και να δείχναµε ότι καινούργιο έχει προστεθεί στο site µας σε τακτικούς επισκέπτες. Όλα αυτά µπορούµε να τα υλοποιήσουµε µε τη χρήση cookies, γνωρίζοντας έτσι αν ένας επισκέπτης στο site µας είναι καινούργιος ή το έχει επισκεφτεί ξανά. Άρα λοιπόν, πολύ περιληπτικά, ένα cookie χρησιµοποιείται για να αναγνωρίσει ένα χρήστη. Τι είναι ένα cookie: Ένα cookie είναι ένα µικρό αρχείο που το «κρύβει» ένας server µέσα στον browser του χρήστη. Το cookie αυτό χρησιµοποιείται για να αναγνωρίσει τον χρήστη. Κάθε φορά που ο ίδιος browser αιτείται µιας σελίδας, στέλνει και αυτό το αρχείο µαζί. Έτσι ο server αναγνωρίζει το χρήστη. Τα ASP scripts µπορούν και να διαβάσουν τις τιµές ενός cookie, µπορούν όµως και να τις αλλάξουν (ανάθεση τιµών). Ανάθεση τιµών στα Cookies: Για να αναθέσουµε τιµή σε ένα cookie πρέπει να χρησιµοποιήσουµε την εντολή Response.Cookies. Αν το cookie δεν υπάρχει, θα δηµιουργηθεί και θα πάρει την τιµή που έχει καθοριστεί. Η γλώσσα VBScript και η τεχνολογία ASP 107

108 Στο παράδειγµα που ακολουθεί στέλλεται ένα cookie µε όνοµα "username" και τιµή "somename" στον browser. Αυτό το cookie έχει διάρκεια ζωής µόνο για το τρέχον session, δηλαδή µόλις ο χρήστης κλείσει τον browser του η πληροφορία αυτή χάνεται. Η εντολή που ακολουθεί πρέπει να εµφανίζεται πριν τον σηµαντήρα <html>: Response.Cookies("userName")="someName" Αν θέλουµε να αναγνωρίσουµε ένα χρήστη που έχει σταµατήσει και ξαναξεκινήσει τον browser του, πρέπει να χρησιµοποιήσουµε το χαρακτηριστικό Expires του Response.Cookies και να αναθέσει σ αυτό µια ηµεροµηνία στο µέλλον. <% Response.Cookies("userName")="someName" Response.Cookies("userName").Expires="Jan 9, 2010" %> Λήψη τιµών που ανατέθηκε σε ένα cookie: Για να λάβουµε την τιµή ενός cookie πρέπει να χρησιµοποιήσουµε την εντολή Request.Cookies. Στο παράδειγµα που ακολουθεί, θέλουµε να πάρουµε την τιµή του cookie µε όνοµα T"userName"T. Το τι λαµβάνουµε είναι η τιµή TsomeNameT: <% Response.Write(Request.Cookies("userName")) %> Set Cookie Paths: Κάθε cookie βρίσκεται αποθηκευµένο στον browser και περιέχει διάφορες πληροφορίες µεταξύ των οποίων και πληροφορίες για το path στο οποίο είναι αποθηκευµένο. Όταν ο browser αιτείται ενός αρχείου που βρίσκεται στον ίδιο χώρο µε το path που καθορίζεται στο cookie, ο browser στέλνει το cookie στον server. Εξ ορισµού, στο path του cookie ανατίθεται το όνοµα της εφαρµογής που περιέχει το αρχείο που δηµιούργησε το cookie. Αν ένα αρχείο, σε µια εφαρµογή που λέγεται "userapp", δηµιουργεί ένα cookie, τότε κάθε φορά που ο browser του χρήστη λαµβάνει οποιοδήποτε αρχείο από τη συγκεκριµένη εφαρµογή, ο browser στέλνει και το cookie µαζί. Για να καθορίσουµε το path για ένα cookie µπορεί να χρησιµοποιηθεί το χαρακτηριστικό Path του Response.Cookies. Το παράδειγµα που ακολουθεί αναθέτει το path "Sales/Customer/Profiles/" σε ένα cookie που ονοµάζεται "Zip": <% Response.Cookies("Zip")="12" Response.Cookies("Zip").Expires="January 1, 2001" Response.Cookies("Zip").Path="/Sales/Customer/Profiles/" %> Προσοχή: Πρέπει να βεβαιωθείτε ότι όλες οι διευθύνσεις στα *.asp αρχεία έχουν το ίδιο path για να διασφαλιστεί έτσι ότι ο browser θα στείλει τα cookies. Το ακόλουθο παράδειγµα αναθέτει µια τιµή στο path η οποία διασφαλίζει ότι το cookie θα αποσταλεί κάθε φορά που ο browser ζητά ένα αρχείο από το server ανεξάρτητα από την εφαρµογή ή το path: <% Response.Cookies("Zip").Path="/" %> Προσοχή: εν υποστηρίζουν όλοι οι browsers τα cookies. Αν η εφαρµογή συνδέεται µε browsers που δεν υποστηρίζουν τα cookies, τότε δεν µπορούν να χρησιµοποιηθούν. Πρέπει έτσι να γίνει χρήση άλλων µεθόδων έτσι ώστε να περαστούν πληροφορίες από µια σελίδα σε άλλη, µέσα στην εφαρµογή. Εντούτοις το συγκεκριµένο θέµα δεν εµπίπτει µέσα στα πλαίσια του µαθήµατος Components στην ASP Τα Components είναι επαναχρησιµοποιήσιµα κοµµάτια κώδικα. Το µέρος του κώδικα που αποτελεί ένα component, εκτελεί µια απλή ενέργεια (όπως για παράδειγµα διαγραφή ενός record από το database). Τα components είναι προσβάσιµα και από άλλες σελίδες ή ακόµα και άλλες εφαρµογές. Αυτό είναι ένα πολύ ισχυρό χαρακτηριστικό δε χρειάζεται να επαναλαµβάνεται ο ίδιος κώδικας σε διαφορετικές Η γλώσσα VBScript και η τεχνολογία ASP 108

109 σελίδες ή διαφορετικές εφαρµογές. Τα component µπορούν να δηµιουργηθούν σε πολλές γλώσσες προγραµµατισµού όπως για παράδειγµα στη C, C++, Java, Visual Basic κα. Η ASP έχει δηµιουργηθεί µε κάποια ενσωµατωµένα components τα οποία µπορούν να εκτελέσουν συγκεκριµένες ενέργειες. Παρακάτω παρουσιάζονται µερικά από αυτά. AdRotator: ηµιουργεί ένα αντικείµενο AdRotator το οποίο παρουσιάζει στον browser διαφορετική διαφήµιση κάθε φορά που ένας χρήστης µπαίνει σε µια σελίδα ή κάνει refresh. Browser Capabilities: ηµιουργεί ένα αντικείµενο τύπου BrowserType το οποίο δίνει µια περιγραφή των δυνατοτήτων που διαθέτει ο browser του client. Content Rotator: ηµιουργεί ένα αντικείµενο τύπου ContentRotator το οποίο εκτυπώνει µια διαφορετική HTML συµβολοσειρά (HTML content string), κάθε φορά που ένας χρήστης µπαίνει σε µια σελίδα ή κάνει refresh. Content Linking: ηµιουργεί ένα αντικείµενο το οποίο περιέχει ένα σύνολο από διευθύνσεις (urls), και χρησιµοποιείται για να χειρίζεται τα περιεχόµενα µιας σελίδας όπως ένα βιβλίο. Counter: ηµιουργεί ένα αντικείµενο µετρητή (counter object) το οποίο είναι σε θέση να δηµιουργεί, να κρατά, να αυξάνει και να λαµβάνει οποιοδήποτε αριθµό ατοµικών µετρητών. Database Access: ηµιουργεί ActiveX Data Objects (ADO) τα οποία παρέχουν πρόσβαση σε δεδοµένα που είναι αποθηκευµένα µέσα σε µια βάση δεδοµένων. Fil Access: ηµιουργεί ένα FileSystem αντικείµενο το οποίο παρέχει µεθόδους (methods), χαρακτηριστικά (properties) και συλλογές (collections) που χρησιµοποιούνται για πρόσβαση και διαχείρηση του συστήµατος αρχειοθέτησης. MyInfo: ηµιουργεί ένα MyInfo αντικείµενο το οποίο κρατά προσωπικές πληροφορίες. Page Counter: ηµιουργεί ένα αντικείµενο PageCounter το οποίο µετρά και εκτυπώνει τον αριθµό πρσπέλασης µιας ιστοσελίδας. ( ηλαδή πόσες φορές κάποιος οποιοσδήποτε- χρήστης έχει αιτηθεί µιας συγκεκριµένης ιστοσελίδας). Permission Checker: ηµιουργεί ένα PermissionChecker αντικείµενο το οποίο χρησιµοποιεί πρωτόκολλα πιστοποίησης ενός password (password authentication protocols) για να καθορίσει κατά πόσο ένας χρήστης έχει τη δυνατότητα πρόσβασης στα περιεχόµενα ενός αρχείου. Tools: ηµιουργεί ένα Tool αντικείµενο το οποίο παρέχει τη δυνατότητα να προσθέσει κάποιος πολύ εύκολα και πολύ απλά, εξειδικευµένη λειτουργικότητα (sophisticated functionality) στην ιστοσελίδα του. Status: ηµιουργεί ένα αντικείµενο Status το οποίο παρέχει κάποια χαρακτηριστικά που περιέχουν πληροφορίες για την κατάσταση (status) του server. Το status του server είναι διαθέσιµο µόνο στον Personal Web Server για τα Macintosh ιαχείριση Βάσεων εδοµένων στην ASP Στις σελίδες που θα ακολουθήσουν θα µάθουµε πως να κτίσουµε µια βάση δεδοµένων και πως να χρησιµοποιήσουµε την ASP για να έχουµε πρόσβαση στα δεδοµένα της. Οι βάσεις δεδοµένων είναι ένας τρόπος για να αποθηκεύονται και να οργανώνονται δεδοµένα. Τα δεδοµένα που φυλάγονται σε µια βάση δεδοµένων µπορεί να είναι οποιεσδήποτε πληροφορίες θέλει κάποιος να διατηρεί σε ένα αποθηκευτικό χώρο, (όπως για παράδειγµα ονόµατα και διευθύνσεις ατόµων, δεδοµένα από αρχεία και πολλά άλλα) και που θέλει να έχει γρήγορη πρόσβαση σ' αυτές. Οι βάσεις δεδοµένων είναι πλέον τόσο ευρέως διαδεδοµένες που είναι αδιανόητο να µην χρησιµοποιούνται και στο διαδίκτυο. Στις σελίδες που θα ακολουθήσουν θα παρουσιαστεί ένα απλό παράδειγµα µιας βάσης δεδοµένων σε Microsoft Access της οποίας η διαχείρηση θα γίνει µέσω ASP σελίδων. Η δηµιουργία και χρήση µιας βάσης δεδοµένων στο διαδίκτυο είναι τόσο απλή που ο αναγνώστης θα το αντιληφθεί µόλις τελειώσει αυτές τις σελίδες. UΠροϋποθέσεις - ΑπαιτήσειςU: Για τις απαιτήσεις του πιο κάτω παραδείγµατος πρέπει να έχετε Microsoft Access database (οποιαδήποτε έκδοση, 97, ), MDAC 2.0 ή αργότερη έκδοση (η τελευταία έκδοση είναι η MDAC 2.5), είτε PWS 4 ή IIS 4.0, Windows πλατφόρµα κι ένα web browser. Μην ανησυχείτε αν δεν γνωρίζετε κάτι για τα MDAC (Microsoft Data Access Components), µπορείτε να δείτε αν είναι εγκατεστηµένα στον υπολογιστή σας ακολουθώντας τη διαδροµή TStart -> Settings -> Control PanelT. Επιλέξτε το εικονίδιο TODBC 32T. Αν έχετε αυτό το εικονίδιο τότε τα MDAC είναι εγκατεστηµένα στον Η γλώσσα VBScript και η τεχνολογία ASP 109

110 υπολογιστή σας. Αν όµως δεν υπάρχει το εικονίδιο τότε θα πρέπει να τα εγκαταστήσετε από τη σελίδα της Microsoft. Αν τρέχετε τα Windows2000 Professional τότε θα βρείτε το εικονίδιο TData Sources ODBCT στα TAdministrative ToolsT του control panel. Για να εµφανίζουµε τα περιεχόµενα της βάσης δεδοµένων, θα χρησιµοποιήσουµε την τεχνολογία Active Server Pages της Microsoft. Γι' αυτό απαιτείται είτε ο PWS 4 είτε ο IIS 4 (ή νεώτερη έκδοση). Μπορείτε να εγκαταστήσετε έναν απ' αυτούς από τη σελίδα της Microsoft ( δωρεάν. Στις σελίδες που ακολουθούν θα δηµιουργήσουµε µια απλή Tβάση δεδοµένων σε AccessT και θα προσθέσουµε κάποια δεδοµένα σ' αυτήν. Στη συνέχεια θα δηµιουργήσουµε ένα TODBC System TDSN για τη βάση και θα κατασκευάσουµε µια ιστοσελίδα η οποία θα παρουσιάζει τα περιεχόµενα της βάσης. Ότι θα ακολουθήσει είναι αρκετά απλό και πιστεύουµε πως θα µάθετε αρκετά απ' αυτά. Απλά σας συνιστούµε να περάσετε τις σελίδες που ακολουθούν από την αρχή προσεκτικά και να ακολουθείτε τα βήµατα που σας παρουσιάζονται ένα προς ένα έτσι ώστε να µάθετε πως µπορεί κάποιος να έχει πρόσβαση σε µια βάση δεδοµένων από ASP σελίδες. TΚαλή επιτυχία!t U ηµιουργία Βάσης εδοµένων Στο κεφάλαιο αυτό ξεκινούµε µε τη δηµιουργία µιας απλής βάσης δεδοµένων σε Access. Συνιστούµε να ακολουθήσετε τα βήµατα που περιγράφονται έτσι ώστε να µπορείτε να χρησιµοποιήσετε τη βάση δεδοµένων που θα κατασκευαστεί στα παραδείγµατα των κεφαλαίων που ακολουθούν. Για τη δηµιουργία της βάσης δεδοµένων ακολουθούµε τα πιο κάτω βήµατα: Βήµα 1: Ξεκινήστε τη Microsoft Access µε την επιλογή του εικονιδίου 'Microsoft Access' που βρίσκεται στον κατάλογο (directory) Program Files. Start -> Program Files -> Microsoft Access. Βήµα 2: Στο ξεκίνηµα της Microsoft Access εµφανίζεται το default παράθυρο της εφαρµογής. Επιλέξτε cancel για να βγείτε από κάθε παράθυρο που εµφανίζεται στην οθόνη σας. Βήµα 3: Επιλέξτε το κουµπί File -> New από τις επιλογές της Access. Αυτό θα εµφανίσει ένα καινούργιο παράθυρο, το New dialog box. Επιλέξτε το General tab και µετά το εικονίδιο Database. Μετά πατήστε το κουµπί Ok. Βήµα 4: Θα εµφανιστεί το παράθυρο File New Database. Θα πρέπει να δώσετε το όνοµα της βάσης και το χώρο στον οποίο θα αποθηκευτεί. Γράψτε odbc_exmp στο input box File Name και δώστε ένα path για να αποθηκεύσει τη βάση. Για το παράδειγµα που ακολουθεί υποθέτουµε ότι η βάση µε όνοµα odbc_exmp.mdb έχει αποθηκευτεί στο path c:\aspproject\odbc_exmp.mdb. Μετά πατήστε το κουµπί Create. Βήµα 5: Η βάση µε όνοµα odbc_exmp.mdb έχει τώρα δηµιουργηθεί. Είναι όµως άδεια και αυτό που πρέπει να κάνουµε είναι να την επεξεργαστούµε, δηµιουργώντας tables, για να µπορούµε στη συνέχεια να τη χρησιµοποιήσουµε. Σε αυτό το βήµα ανοίγει ένα παράθυρο που ονοµάζεται odbc_exmp: Database στο οποίο εµφανίζονται αρκετές επιλογές στην αριστερή στήλη καθώς και τρεις επιλογές στη δεξιά στήλη. Πατήστε δύο φορές (double click) στην επιλογή Create table in Design View της αριστερής στήλης. Βήµα 6: Αυτό θα εµφανίσει ένα καινούργιο παράθυρο, το Table1 : Table. Στα tables θα κρατούµε όλη την πληροφορία που µας ενδιαφέρει. Μπορούµε να δηµιουργήσουµε πολλά tables σε µια βάση δεδοµένων. Τα tables αποτελούνται από πεδία (fields) ή διαφορετικά στήλες (columns). Όταν γεµίσουµε µε πληροφορία το κάθε πεδίο ενός table, τότε δηµιουργούµε εγγραφές (records) ή διαφορετικά γραµµές (rows). Οι στήλες δέχονται δεδοµένα ενός συγκεκριµένου τύπου. Πρέπει να καθορίσουµε εµείς τον τύπο δεδοµένων µιας στήλης. Στη Microsoft Access η επιλογή Design View που επιλέξαµε στο προηγούµενο βήµα είναι αυτή που µας παρέχει τη δυνατότητα να καθορίσουµε τον αριθµό των στηλών και τον τύπο δεδοµένων της κάθε στήλης. Μετά από τη σύντοµη περιγραφή ενός table γράψετε στις στήλες Field Names και Data Types ότι ακριβώς φαίνεται στην πιο κάτω εικόνα. Προσέξτε ότι µπορείτε να επιλέξετε τα AutoNumber και Text από τις επιλογές του drop down καταλόγου που βρίσκεται σε κάθε γραµµή της στήλης Data Type. ε χρειάζεται να αλλάξετε τις τιµές που εµφανίζονται στα General και Lookup tabs που βρίσκονται κάτω από τον τοµέα Field Properties. Στη συνέχεια πατήστε το κουµπί File -> Save. Θα εµφανιστεί το παράθυρο Save As που θα σας ζητήσει να ονοµάσετε το table που µόλις δηµιουργήσατε. Γράψετε names και µετά πατήστε OK. Η γλώσσα VBScript και η τεχνολογία ASP 110

111 Βήµα 7: Κλείστε το παράθυρο names: table. Θα δείτε το table names ότι έχει προστεθεί στη δεξιά στήλη του παράθυρου odbc_exmp : Database. Πατήστε δύο φορές (double click) στο table names. Η ενέργεια αυτή θα ανοίξει το παράθυρο names: Table που θα δείχνει τρεις στήλες µε τα Field Names που καθορίσαµε στο προηγούµενο βήµα καθώς και µια γραµµή χωρίς δεδοµένα. Θα προσθέσουµε πέντε ονόµατα στο table names. ε χρειάζεται να προσθέσετε πληροφορία στη στήλη id αφού έχει οριστεί ως autonumber και αυτό σηµαίνει ότι αυτόµατα θα αυξάνεται κατά µια µονάδα κάθε φορά που θα προσθέτουµε µια νέα γραµµή (ένα καινούργιο record) µέσα στο table µας. Τώρα προσθέστε τα δεδοµένα (first_name, last_name) όπως φαίνονται στο σχήµα που ακολουθεί. Όπως βλέπετε στη στήλη id η πληροφορία γεµίζει αυτόµατα όταν πάτε να βάλετε πληροφορία στις υπόλοιπες στήλες. Τώρα πατήστε το κουµπί save για να φυλάξετε τα δεδοµένα που προσθέσατε µέσα στο table names. Αυτό ολοκληρώνει τη δηµιουργία της βάσης δεδοµένων odbc_exmp.mdb στην Access. Μέχρι στιγµής έχετε µάθει να δηµιουργείτε tables στην Access, να δηλώνετε τις στήλες του και να προσθέτετε γραµµές σ' αυτό. Έχετε επίσης µάθει να καθορίζετε τον τύπο δεδοµένων κάθε στήλης σε ένα table. Στο επόµενο κεφάλαιο θα εγγράψουµε τη βάση δεδοµένων που έχουµε δηµιουργήσει στο system registry µε το να της αναθέσουµε ένα Data Source Name (DSN). U ηµιουργία Data Source Name (DSN) Το ακρώνυµο DSN σηµαίνει Data Source Name. Ένα data source µπορεί να είναι µια βάση δεδοµένων, ένα spreadsheet, ένα text file κλπ. Αναθέτουµε ένα DSN σε ένα data source έτσι ώστε ανεξάρτητα του είδους του data source και του χώρου στον οποίο είναι αποθηκευµένο να µπορούµε να το χρησιµοποιήσουµε. Μπορούµε να προσθέσουµε, να αλλάξουµε ή να διαγράψουµε records απλά γνωρίζοντας το DSN κάποιου data source. Για να αναθέσουµε ένα DSN στη βάση δεδοµένων odbc_exmp.mdb που έχουµε δηµιουργήσει στο προηγούµενο κεφάλαιο, ακολουθούµε τα πιο κάτω βήµατα: Η γλώσσα VBScript και η τεχνολογία ASP 111

112 Βήµα 1: Ανοίξτε το Control Panel ακολουθώντας το µονοπάτι Start -> Settings -> Control Panel. Πατήστε δύο φορές στο εικονίδιο ODBC 32. Αν τρέχετε σε Windows2000 τότε πατήστε δύο φορές στο εικονίδιο Administrative Tools και µετά δύο φορές στο εικονίδιο Data Sources (ODBC). Αν δεν βρίσκετε τα εικονίδια ODBC 32 ή Data Sources (ODBC) τότε πρέπει να τα εγκαταστήσετε από την ιστοσελίδα της Microsoft. Παρακαλώ ανατρέξετε στην αρχή της ενότητας αυτής. Βήµα 2: Όταν πατήσετε δύο φορές στο εικονίδιο ODBC 32 ή Data Sources (ODBC) των Windows2000 θα εµφανιστεί το παράθυρο ODBC Data Source Administrator. Το παράθυρο αυτό περιλαµβάνει πολλά tabs όπως τα User DSN, System DSN, File DSN και άλλα, όπως φαίνεται στο σχήµα που ακολουθεί: Όσον αφορά την ASP, θα χρησιµοποιηθεί το System DSN. Πατήστε το κουµπί Add. Θα εµφανιστεί ένα παράθυρο όπως φαίνεται στο παρακάτω σχήµα: Βήµα 3: Επιλέξτε το Microsoft Access Driver (*.mdb) από τη λίστα και πατήστε το κουµπί Finish. Βήµα 4: Θα εµφανιστεί ένα καινούργιο παράθυρο, το ODBC Microsoft Access Setup, που ρωτά για το όνοµα καθώς και µια περιγραφή (description) για το νέο data source που θα δηµιουργηθεί. Στο Data Source Name γράψετε odbc_exmp και µετά πατήστε το κουµπί Select. Στη συνέχεια πηγαίνετε στο χώρο όπου έχετε αποθηκεύσει τη βάση δεδοµένων odbc_exmp.mdb που έχουµε δηµιουργήσει προηγουµένως. Αφού βρείτε το χώρο επιλέξτε το όνοµα odbc_exmp.mdb και µετά πατήστε Οk. Το πιο κάτω σχήµα δείχνει το χώρο όπου έχει αποθηκευτεί η βάση odbc_exmp.mdb. Η γλώσσα VBScript και η τεχνολογία ASP 112

113 Με το πάτηµα του κουµπιού Ok επιστέφουµε στο παράθυρο ODBC Data Source Administrator το οποίο έχει διαµορφωθεί όπως φαίνεται στο πιο κάτω σχήµα: Πατήστε το κουµπί OK. Αυτό θα µας επαναφέρει στο αρχικό παράθυρο µε το System DSN tab. Θα δείτε τώρα στη λίστα µε τα System DSN που φαίνεται σε αυτό το παράθυρο ότι έχει προστεθεί το odbc_exmp. Έχετε δηµιουργήσει επιτυχώς ένα System DSN για τη βάση δεδοµένων odbc_exmp.mdb. Σ αυτό το κεφάλαιο µάθατε να δηµιουργείτε DSN για κάποιο data source. Στο επόµενο κεφάλαιο θα δηµιουργήσουµε µια απλή.asp σελίδα στην οποία θα εµφανίσουµε τα περιεχόµενα της βάσης δεδοµένων odbc_exmp.mdb. UΠαρουσίαση δεδοµένων της βάσης µέσα από µια ASP σελίδα Ως εδώ αναθέσει ένα DSN σε µια βάση δεδοµένων. Στο κεφάλαιο αυτό θα παρουσιάσουµε τα δεδοµένα που βάλαµε µέσα στη βάση δεδοµένων µέσα από µια σελίδα, χρησιµοποιώντας την τεχνολογία TActive Server PagesT της Microsoft. Γι' αυτό το σκοπό θα χρησιµοποιήσουµε τη TVBScriptT, µέρος της οποίας έχει παρουσιαστεί στο κεφάλαιο 5. Όπως έχουµε πλέον µάθει, όλη η επεξεργασία της σελίδας γίνεται στον server και το αποτέλεσµα εµφανίζεται στον browser σαν µια συνηθισµένη HTML Η γλώσσα VBScript και η τεχνολογία ASP 113

114 σελίδα. Αυτό το κεφάλαιο καταπιάνεται αποκλειστικά µε το πως η ASP δηµιουργεί σύνδεση µε τη βάση δεδοµένων και πως διαχειρίζεται τα δεδοµένα που βρίσκει σ' αυτήν. Ακολουθήστε τα βήµατα που περιγράφονται πιο κάτω για να εκτυπώσετε τα δεδοµένα της βάσης δεδοµένων µέσα από µια ASP σελίδα. Βήµα 1: Ανοίξτε τον συντάκτη κειµένων που προτιµάτε και αντιγράψετε τον κώδικα που ακολουθεί µέσα σ αυτόν. <% Response.buffer = true %> <html> <head> <title> Database Tutorial</title> </head> <body> <% Dim rs Set rs = Server.CreateObject ("ADODB.Recordset") rs.open "names", "DSN=odbc_exmp" While Not rs.eof Response.Write "ID: "& rs("id") & "<br>" Response.Write "First Name:" & rs("first_name") & "<br>" Response.Write "Last Name:" & rs("last_name") & "<br>" Response.Write"<br>" rs.movenext Wend %> </body> rs.close Set rs = Nothing </html> Βήµα 2: Αφού αντιγράψετε τον κώδικα στον συντάκτη κειµένων που προτιµάτε, φυλάξετε αυτό το αρχείο µε όνοµα odbc_exmp.asp και σώστε το σε όποιο χώρο µπορεί να τρέξει.asp σελίδες ο server που έχετε εγκαταστήσει στον υπολογιστή σας. Συνήθως στον PWS και IIS αυτός ο χώρος βρίσκεται κάτω από το path c:\inetpub\wwwroot. Αφού σώσετε το αρχείο στο σωστό χώρο µπορείτε να το δείτε στον browser σας. Βήµα 3: Ξεκινήστε τον PWS (ή IIS). Στη συνέχεια ανοίξτε τον browser που προτιµάτε και γράψετε το ακόλουθο URL στο address box του browser σας: ΠΡΟΣΟΧΗ: Το πιο πάνω URL θα βρεθεί αν έχετε φυλάξει το αρχείο odbc_exmp.asp στο path c:\inetpub\wwwroot\ (ή όπου κι αν βρίσκεται το wwwroot directory). Αν όµως το έχετε φυλάξει σε ένα temp directory κάτω από το wwwroot directory, για παράδειγµα c:\inetpub\wwwroot\temp\ τότε το URL που θα τοποθετήσετε στο address box του browser σας θα πρέπει να είναι: Αφού βάλετε το σωστό URL πατήστε enter. Αν έχουν ακολουθηθεί σωστά όλα τα βήµατα, τότε στον browser σας θα πρέπει να δείτε µια λίστα από ονόµατα (first names και last names) µαζί µε τα IDs τους. Για την ακρίβεια πρέπει να δείτε το αποτέλεσµα που ακολουθεί: ID: 1 First Name: Michael Last Name: Jordan ID: 2 First Name: Joe Last Name: Lee ID: 3 First Name: Steve Last Name: Black Η γλώσσα VBScript και η τεχνολογία ASP 114

115 ID: 4 First Name: Maria Last Name: Smith ID: 5 First Name: Vicky Last Name: McMillan Σύµφωνα µε τα όσα έχουµε µάθει στις προηγούµενες ενότητες θα πρέπει να καταλαβαίνετε τι σηµαίνει ο πιο πάνω κώδικας. Εντούτοις θα ακολουθήσει µια σύντοµη επεξήγηση για να κατανοήσετε πως εµφανίζεται το αποτέλεσµα που φαίνεται πιο πάνω στον browser σας. Επεξήγηση του ASP κώδικα <%Response.buffer = true %> Η πιο πάνω γραµµή υποδεικνύει στον server ότι τα δεδοµένα που θα παραχθούν από την εκτέλεση της σελίδας, µπορούν να σταλούν στον browser µόνο όταν η εκτέλεση ολοκληρωθεί. Αν θέσουµε την τιµή αυτή σε false αυτό σηµαίνει πως τα περιεχόµενα θα στέλλονται στον browser µόλις αρχίσει και η εκτέλεση της σελίδας. (Αναφερθείτε στο κεφάλαιο 6_5, στο αντικείµενο Response, στο χαρακτηριστικό Buffer). <% Dim rs Set rs = Server.CreateObject ("ADODB.Recordset") Στη συνέχεια ορίσαµε µια µεταβλητή, την rs και την αρχικοποιήσαµε δίνοντάς της την τιµή ADODB.Recordset. (Για το αντικείµενο Server αναφερθείτε στο κεφάλαιο 6_6, στη µέθοδο createobject). Το ADODB.Recordset είναι ένα component που κρατά τα δεδοµένα µιας βάσης δεδοµένων. Αυτό το component έχει τα δικά του χαρακτηριστικά (properties) και µεθόδους (methods), µια από τις οποίες είναι και η Open που χρησιµοποιούµε στη συνέχεια για να συσχετίσει το Recordset που δηµιουργήσαµε στην προηγούµενη γραµµή µε τη βάση δεδοµένων και το DSN της βάσης αυτής. rs.open "names", "DSN=odbc_exmp" Η µέθοδος Open λοιπόν δηµιουργεί τη σύνδεση µε τη βάση δεδοµένων. Λαµβάνει ως παραµέτρους το όνοµα του table, από το οποίο θέλουµε να πάρουµε τα δεδοµένα, και το όνοµα του DSN της συγκεκριµένης βάσης. Όπως έχετε καταλάβει µπορείτε να δηµιουργήσετε τη δική σας βάση δεδοµένων που περιλαµβάνει τα δικά της tables και να χρησιµοποιήσετε τη µέθοδο Open για να έχετε πρόσβαση σε οποιοδήποτε table που εσείς θέλετε, ορίζοντας πρώτα ένα component τύπου Recordset. Αν και η µέθοδος Open µπορεί να δεχθεί περισσότερες από τις δύο παραµέτρους που αναφέρθηκαν πιο πάνω, εντούτοις δε θα αναφερθούµε καθόλου σ' αυτές γιατί εµπίπτει έξω από το στόχο του κεφαλαίου. Στη συνέχεια ακολουθεί ο βρόγχος While (While Loop). Μπορείτε να αναφερθείτε στο κεφάλαιο 5_8 για περισσότερες λεπτοµέρειες. While Not rs.eof... Wend Συνοπτικά, ένα While Loop συνεχίζει να εκτελείτε µέχρι η συνθήκη που το καθορίζει πάρει την τιµή false. Στη συγκεκριµένη περίπτωση η συνθήκη λέει ότι ο βρόγχος while θα εκτελείτε ενόσω υπάρχουν δεδοµένα µέσα στο Recordset. Το EOF (End Of File) είναι ένα από τα χαρακτηριστικά του Recordset που δηλώνει το τέλος στα δεδοµένα που υπάρχουν µέσα σ' αυτό. Εφόσον λοιπόν δεν έχουµε φτάσει στο τέλος του Recordset (NOT rs.eof) οι εντολές που υπάρχουν µέσα στον βρόγχο συνεχίζουν να εκτελούνται. Μέσα στον βρόγχο χρησιµοποιούµε τη µέθοδο Write του αντικειµένου Response. Για περισσότερες λεπτοµέρειες µπορείτε να αναφερθείτε στο κεφάλαιο 6_5. Χρησιµοποιούµε επίσης τη µέθοδο MoveNext του Recordset που, όπως υποδεικνύει και το όνοµά της, µεταφέρετε στο επόµενο record. Τέλος το while loop κλείνει µε τη λέξη Wend. Οι τελευταίες γραµµές κώδικα σε ASP είναι οι εξής: rs.close Set rs = Nothing %> Η µέθοδος Close του Recordset κλείνει τη σύνδεση που είχε ανοίξει µε τη µέθοδο Open στην αρχή και τέλος η ανάθεση του Recordset σε nothing ελευθερώνει τους πόρους που χρησιµοποιούσε το component. Η γλώσσα VBScript και η τεχνολογία ASP 115

116 Έχουµε λοιπόν επιτύχει το σκοπό µας! Να εκτυπώσουµε στον browser µας τα περιεχόµενα της βάσης δεδοµένων που δηµιουργήσαµε, µέσα από µια ASP σελίδα. Εντούτοις, όλα αυτά είναι µόνο η αρχή. Στα κεφάλαια που ακολουθούν, θα µάθουµε πως µπορούµε να ενωθούµε µε µια βάση δεδοµένων χωρίς να έχουµε αναθέσει σ αυτήν ένα DSN. Θα µάθουµε επίσης πως να προσθέσουµε, να τροποποιήσουµε ή να διαγράψουµε κάποια records µιας βάσης δεδοµένων. UΠρόσβαση Βάσης εδοµένων χωρίς τη χρήση DSN Στα προηγούµενα κεφάλαια έχουµε µάθει πως να δηµιουργούµε µια βάση δεδοµένων σε Access και πως µε τη χρήση ενός DSN System file να ενωνόµαστε µ' αυτήν µέσω των ASP σελίδων. Για να δηµιουργηθεί ένα DSN αρχείο πρέπει να έχουµε πλήρη πρόσβαση στο server κι αυτό πολλές φορές είναι δύσκολο όταν το site που δηµιουργούµε φιλοξενείται σε κάποιο server όπου δεν έχουµε πλήρη πρόσβαση (για παράδειγµα, οι σελίδες που δηµιουργούµε για τις ανάγκες αυτής της εργασίας φιλοξενούνται στον server του πανεπιστηµίου όπου δεν έχουµε όλα τα προνόµια για πλήρη πρόσβαση). Έτσι, σ' αυτό το κεφάλαιο θα µάθουµε πως µπορούµε να επιτύχουµε σύνδεση µε µια βάση δεδοµένων χωρίς τη χρήση του DSN αρχείου (DSN-less connection). Όπως έχουν µάλιστα δείξει και κάποιες στατιστικές, µια σύνδεση χωρίς τη χρήση DSN σε µια βάση δεδοµένων κτισµένη σε Access έχει καλύτερη απόδοση (performance)! Μπορεί να αντέξει µέχρι και χρήστες σε ταυτόχρονη σύνδεση µε το site σας χωρίς κανένα πρόβληµα, ενώ µια συνηθισµένη DSN σύνδεση δε θα άντεχε ένα τέτοιο φόρτο εργασίας. Για όλα αυτά τα στατιστικά στοιχεία µπορείτε να αναφερθείτε στη σελίδα Hhttp:// Θα χρησιµοποιηθεί η βάση δεδοµένων που έχουµε δηµιουργήσει. Για να παρουσιάσουµε τα περιεχόµενα της βάσης δεδοµένων µέσα από την ASP σελίδα, θα διαφοροποιήσουµε τον κώδικα που χρησιµοποιήσαµε πιο πάνω ως ακολούθως: <% Response.buffer = true %> <html> <head> <title> Database Tutorial</title> </head> <body> <% Set MyConn = Server.CreateObject("ADODB.Connection") MdbFilePath = Server.MapPath("odbc_exmp.mdb") MyConn.Open "Driver={Microsoft Access Driver (*.mdb)}; DBQ=" & MdbFilePath & ";" SQL_query = "SELECT * FROM names" Set rs = MyConn.Execute(SQL_query) While Not rs.eof Response.Write "ID: " & rs("id") & "<br>" Response.Write "First Name: " & rs("first_name") & "<br>" Response.Write "Last Name: " & rs("last_name") & "<br>" Response.Write "<br>" Wend rs.close MyConn.Close Set rs = Nothing Η γλώσσα VBScript και η τεχνολογία ASP 116

117 %> Set MyConn = Nothing Set SQL_query = Nothing </body> </html> Το πιο πάνω παράδειγµα δε διαφέρει πολύ από το προηγούµενο στο κεφάλαιο 7.4. Το while loop περιλαµβάνει ακριβώς τις ίδιες εντολές. Η µόνη διαφορά είναι πως ορίζουµε ένα καινούργιο component τύπου Connection που το ονοµάζουµε MyConn. Το component αυτό, όπως δηλώνει και το όνοµά του θα ανοίξει σύνδεση µε τη βάση δεδοµένων χρησιµοποιώντας µια από τις µεθόδους του, την Open. Η µέθοδος αυτή δέχεται ως παράµετρο µια συµβολοσειρά (ένα string) που περιλαµβάνει τον τύπο του driver που είναι κτισµένη η βάση δεδοµένων µας καθώς και το µονοπάτι (path) που έχουµε αποθηκεύσει τη βάση µας. Γι' αυτό το σκοπό, για να βρούµε δηλαδή το path στο οποίο έχουµε σώσει τη βάση, χρησιµοποιούµε τη µέθοδο MapPath του αντικειµένου Server. Μπορείτε να αναφερθείτε στο κεφάλαιο 6.6, αντικείµενο Server, µέθοδος MapPath. Στη συνέχεια δηµιουργούµε ένα SQL query το οποίο περνούµε ως παράµετρο στη µέθοδο Execute του component MyConn για να µας επιστρέψει ένα component τύπου Recordset (όπως έχει περιγραφεί πιο πάνω). Ο υπόλοιπος κώδικας είναι ο ίδιος µε τον κώδικα που χρησιµοποιήσαµε στο προηγούµενο κεφάλαιο. Το αποτέλεσµα που θα εµφανιστεί στον browser του χρήστη θα είναι το ίδιο µε αυτό που παρουσιάστηκε στο προηγούµενο κεφάλαιο. Έχουµε λοιπόν µάθει πως να δηµιουργούµε σύνδεση µε µια βάση δεδοµένων χωρίς τη χρήση DSN αρχείου. Στη συνέχεια θα µάθουµε πως µπορούµε να προσθέτουµε, να τροποποιούµε και να διαγράφουµε εγγραφές στη βάση δεδοµένων µέσα από τη σελίδα µας. UΠαρουσίαση Βάσης εδοµένων µέσα από µια ASP σελίδα Στο κεφάλαιο αυτό θα δείξουµε ένα άλλο, δεύτερο τρόπο παρουσίασης των δεδοµένων που έχουµε βάλει µέσα στη βάση odbc_exmp που δηµιουργήσαµε σε προηγούµενο κεφάλαιο. Στο κεφάλαιο αυτό θα παρουσιαστεί ένας δεύτερος τρόπος µε τον οποίο µπορούµε να τοποθετήσουµε τα δεδοµένα µια βάσης δεδοµένων πάνω σε µια ιστοσελίδα. Χρησιµοποιώντας πάντα την ASP για να επιτύχουµε το στόχο µας, το παράδειγµα που ακολουθεί χρησιµοποιεί τα δεδοµένα της βάσης δεδοµένων odbc_exmp που κτίσαµε στο κεφάλαιο 9.2 αυτής της ενότητας. Για να γίνει ο ASP κώδικας πιο ευδιάκριτος, έχει σηµειωθεί µε κόκκινα γράµµατα και βρίσκεται φυσικά πάντα µεταξύ των συµβόλων <% και %>. Πιο κάτω ακολουθεί ο ASP κώδικας: <html> <head><title>list Database</title></head> <body> <% dim conn,rs,x set conn=server.createobject("adodb.connection") conn.provider="microsoft.jet.oledb.4.0" conn.open(server.mappath("odbc_exmp.mdb")) set rs=server.createobject("adodb.recordset") rs.open "SELECT * FROM names", conn %> <h2>list Data From NAMES table In odbc_exmp Database (click on button to edit)</h2> <table border="1" width="100%"> <tr> <% for each x in rs.fields response.write("<th>" & ucase(x.name) & "</th>") next %> </tr> <%do until rs.eof%> <tr> <form method="post" action="db_edit.asp"> <% for each x in rs.fields Η γλώσσα VBScript και η τεχνολογία ASP 117

118 if x.name="id" then %> <td><input type="submit" name="id" value=" <%=x.value%> "></td> <%else%> <td> <%Response.Write(x.value)%> </td> <% end if next %> </form> <%rs.movenext%> </tr> <% loop rs.close set rs=nothing conn.close set conn=nothing %> </table> </body> </html> Μπορείτε να δείτε το αποτέλεσµα του πιο πάνω. Επεξήγηση του ASP κώδικα Ο πιο πάνω κώδικας ξεκινά µε τους συνηθισµένους, αρχικούς σηµαντήρες µιας HTML σελίδας. Στη συνέχεια, αµέσως µετά το σηµαντήρα <body> ξεκινά ο ASP κώδικας. <% dim conn,rs,x set conn=server.createobject("adodb.connection") conn.provider="microsoft.jet.oledb.4.0" conn.open(server.mappath("odbc_exmp.mdb")) set rs=server.createobject("adodb.recordset") rs.open "SELECT * FROM names", conn Η γλώσσα VBScript και η τεχνολογία ASP 118

119 %> Στην πρώτη γραµµή ορίζουµε τρεις µεταβλητές, την conn, την rs και την x. Στη δεύτερη γραµµή δηµιουργούµε ένα στιγµιότυπο (instance) του αντικειµένου Connection. Αυτό το αντικείµενο - component- ανήκει στην 'οµάδα' των ένα ActiveX Data Object Database αντικειµένων της Microsoft (ADODB). Στο χαρακτηριστικό provider του αντικειµένου αυτού αναθέτουµε µια συµβολοσειρά (ένα string) που καθορίζει τον παροχέα της βάσης δεδοµένων που θα χρησιµοποιηθεί. Στην επόµενη γραµµή χρησιµοποιούµε τη µέθοδο Open του αντικειµένου conn (τύπου Connection) για να 'ανοίξουµε' σύνδεση µε τη βάση δεδοµένων για να µπορούµε να πάρουµε τα δεδοµένα που θέλουµε. Στην πέµπτη γραµµή, δηµιουργούµε ένα δεύτερο στιγµιότυπο αυτή τη φορά του αντικειµένου Recordset. To Recordset εν συντοµία είναι ένας 'αποθηκευτικός' χώρος δεδοµένων που λαµβάνουµε από µια βάση δεδοµένων. Χρησιµοποιούµε τη µέθοδο Open του αντικειµένου αυτού περνώντας του ως παραµέτρους µια συµβολοσειρά, που δεν είναι τίποτε άλλο από ένα SQL statement, καθώς και το Connection που δηµιουργήσαµε λίγες γραµµές πιο πάνω. Με αυτές τις πέντε γραµµές κώδικα σε ASP επιτύχαµε σύνδεση µε τη βάση δεδοµένων "odbc_exmp" που δηµιουργήσαµε σε προηγούµενο κεφάλαιο και λήψη δεδοµένων από το table names. Σηµείωση: Για περισσότερες λεπτοµέρειες για το αντικείµενο Server µπορείτε να αναφερθείτε στην ενότητα 6 στο κεφάλαιο 6. Στις επόµενες γραµµές, όπως βλέπετε δηµιουργούµε ένα τυπικό table όπως και στην HTML. Η διαφορά όµως έγκειται στο ότι η πληροφορία που αποτελεί τις γραµµές και στήλες του table είναι δεδοµένα από τη βάση δεδοµένων. Επειδή εµείς έχουµε 'αποθηκεύσει' τα δεδοµένα της βάσης µέσα στο Recordset rs, χρησιµοποιούµε δύο βρόγχους επανάληψης, καθώς και τις µεθόδους και τα χαρακτηριστικά αυτού του αντικειµένου για να γεµίσουµε το table. Πιο κάτω φαίνεται ο πρώτος βρόγχος επανάληψης, το For Loop, που χρησιµοποιούµε για να βάλουµε πληροφορία στα table headers του table. Σύµφωνα µε αυτόν, για κάθε στοιχείο x από όλα τα πεδία του Recordset rs λαµβάνουµε το όνοµά του και το εκτυπώνουµε ως table header ενός HTML table. <table border="1" width="100%"> <tr> <% for each x in rs.fields response.write("<th>" & ucase(x.name) & "</th>") next %> </tr> Στον επόµενο βρόγχο επανάληψης, στο Do Until Loop, ουσιαστικά δηµιουργείται ένα είδος HTML φόρµας που αποτελείται µόνο από ένα κουµπί (button) για κάθε στήλη (column) που αντιστοιχεί στο πεδίο 'id' της βάσης δεδοµένων που χρησιµοποιούµε. Για τις υπόλοιπες στήλες (columns) που αντιστοιχούν στα πεδία 'first_name' και 'last_name' της βάσης δεδοµένων απλά εκτυπώνουµε την τιµή τους. Σηµείωση: Για περισσότερες λεπτοµέρειες για τις Φόρµες στην HTML µπορείτε να αναφερθείτε στην ενότητα 3. Πιο κάτω φαίνεται ο βρόγχος επανάληψης do until...loop. <%do until rs.eof%> <tr> <form method="post" action="db_edit.asp"> <% for each x in rs.fields if x.name="id" then %> <td><input type="submit" name="id" value=" <%=x.value%> "></td> <%else%> <td> <%Response.Write(x.value)%> </td> <% end if next %> Η γλώσσα VBScript και η τεχνολογία ASP 119

120 </form> <%rs.movenext%> </tr> <% loop Τέλος, κλείνουµε τα αντικείµενα conn και rs και ελευθερώνουµε το χώρο µνήµης που κρατούν µε το να τους αναθέτουµε την τιµή nothing, και προσθέτουµε τους καταληκτικούς σηµαντήρες <table>, <body> και <html> όπως φαίνεται πιο κάτω: rs.close set rs=nothing conn.close set conn=nothing %> </table> </body> </html> Πατώντας το κουµπί που δηµιουργείται στην πρώτη στήλη του table, καλείται µια άλλη ASP σελίδα στην οποία µπορείτε να κάνετε αλλαγές για το συγκεκριµένο record που επιλέξατε και να φυλάξετε τις αλλαγές πίσω στη βάση δεδοµένων. Η σελίδα που καλείται θα αναλυθεί στο κεφάλαιο που ακολουθεί. UΑλλαγή των δεδοµένων της βάσης µέσα από µια ASP σελίδα Στο παράδειγµα που θα ακολουθήσει θα δηµιουργήσουµε µια HTML φόρµα της οποίας τα δεδοµένα εισόδου έχουν ληφθεί από το παράδειγµα που παρουσιάστηκε σε προηγούµενο κεφάλαιο. Χρησιµοποιώντας πάντα την ASP και επιλέγοντας τη VBScript ως γλώσσα σεναρίου για να επιτύχουµε το στόχο µας, το παράδειγµα που ακολουθεί χρησιµοποιεί τα δεδοµένα της βάσης δεδοµένων odbc_exmp που κτίσαµε στο κεφάλαιο 9.2 αυτής της ενότητας. Για να γίνει ο ASP κώδικας πιο ευδιάκριτος, έχει σηµειωθεί µε κόκκινα γράµµατα και βρίσκεται φυσικά πάντα µεταξύ των συµβόλων <% και %>. Πιο κάτω ακολουθεί ο ASP κώδικας: <html> <head> <title>edit DataBase</title> </head> <body> <h2>edit Database</h2> <% id=request.form("id") set conn= Server.CreateObject("ADODB.Connection") conn.connectionstring="provider=microsoft.jet.oledb.4.0;data Source=" & _ server.mappath("odbc_exmp.mdb") conn.open set rs = Server.CreateObject("ADODB.Recordset") rs.open "Select * from names where names.[id]=" & id, conn %> <form method="post" action="db_submit.asp"> <input name="id" type="hidden" value= "<%=id%>"> <table> <% for each x in rs.fields if x.name <> "id" then%> <tr> <td><%=x.name%></td> <td><input name="<%=x.name%>" value="<%=x.value%>" size="20"></td> <% end if next Η γλώσσα VBScript και η τεχνολογία ASP 120

121 rs.close set rs=nothing conn.close set conn=nothing %> </tr> </table> <p> <input type="submit" name="action" value="submit Changes"> <input type="submit" name="action" value="delete Record"> </p> </form> </body> </html> Επεξήγηση του ASP κώδικα Η φόρµα που δηµιουργείται στο πιο πάνω παράδειγµα έχει σκοπό να παρουσιάσει τα δεδοµένα ενός συγκεκριµένου record µέσα στη βάση δεδοµένων, το 'id' του οποίου έχει ληφθεί από το πάτηµα του κουµπιού της φόρµας που δηµιουργήσαµε στο παράδειγµα του προηγούµενου κεφαλαίου. Η τιµή του 'id' σ' αυτό το παράδειγµα ανατίθεται σε µια µεταβλητή, την id, όπως φαίνεται στον κώδικα του παραδείγµατος πιο πάνω καθώς και στον κώδικα που ακολουθεί. <% id=request.form("id") Στη συνέχεια, µε τον ίδιο τρόπο που είχαµε 'ανοίξει' σύνδεση µε τη βάση δεδοµένων στο παράδειγµα του προηγούµενου κεφαλαίου, δηµιουργούµε ένα στιγµιότυπο του αντικειµένου Connection µε το οποίο γίνεται η σύνδεση. ηµιουργούµε επίσης ένα στιγµιότυπο του αντικειµένου Recordset, αυτή τη φορά όµως τα δεδοµένα που υπάρχουν µέσα σ' αυτό αφορούν µόνο ένα συγκεκριµένο record µέσα στη βάση δεδοµένων, του οποίου το id είναι αυτό που έχουµε λάβει από τη φόρµα του παραδείγµατος του προηγούµενου κεφαλαίου. Αυτό φαίνεται από το SQL statement που χρησιµοποιούµε για να δηµιουργήσουµε το Recordset. Ο ASP κώδικας που ακολουθεί δείχνει όσα έχουν ειπωθεί πιο πάνω: set conn= Server.CreateObject("ADODB.Connection") conn.connectionstring="provider=microsoft.jet.oledb.4.0;data Source=" & _ server.mappath("odbc_exmp.mdb") conn.open set rs = Server.CreateObject("ADODB.Recordset") rs.open "Select * from names where names.[id]=" & id, conn %> Ακολούθως δηµιουργούµε µια φόρµα η οποία αποτελείται από τόσα input textboxes, όσα και τα πεδία της βάσης δεδοµένων του table names. Αυτό φαίνεται από το For...Next Loop, το οποίο εκτυπώνει το όνοµα του κάθε πεδίου και στο input box την τιµή του πεδίου αυτού. Αποτελείται επίσης και από δύο κουµπιά (buttons), το "Submit Changes" και το "Delete Record". Σύµφωνα µε το χαρακτηριστικό ACTION της φόρµας που δηµιουργούµε θα καλεστεί η σελίδα db_submit.asp της οποίας τη λειτουργία θα εξηγήσουµε στο κεφάλαιο που ακολουθεί. Προς το παρόν, η σελίδα αυτή δίνει τη δυνατότητα στο χρήστη να παρέχει τις αλλαγές που θέλει να κάνει πάνω σε ένα συγκεκριµένο record µέσα στη βάση δεδοµένων µε σκοπό να τις κάνει Submit επιλέγοντας το κουµπί "Submit Changes" ή να διαγράψει το συγκεκριµένο record από τη βάση δεδοµένων επιλέγοντας το κουµπί "Delete Record". Ο κώδικας που ακολουθεί φανερώνει όσα έχουν ειπωθεί: <form method="post" action="db_submit.asp"> <input name="id" type="hidden" value= "<%=id%>"> <table> <% for each x in rs.fields if x.name <> "id" then%> <tr> <td><%=x.name%></td> Η γλώσσα VBScript και η τεχνολογία ASP 121

122 <td><input name="<%=x.name%>" value="<%=x.value%>" size="20"></td> <% end if next rs.close set rs=nothing conn.close set conn=nothing %> </tr> </table> <p> <input type="submit" name="action" value="submit Changes"> <input type="submit" name="action" value="delete Record"> </p> UΤροποποίηση/ ιαγραφή δεδοµένων της βάσης µέσα από µια ASP σελίδα Το παράδειγµα που θα ακολουθήσει είναι καθαρός ASP κώδικας. Η λογική που ακολουθείται σ' αυτό το παράδειγµα λαµβάνει ως δεδοµένα εισόδου τις πληροφορίες που παρείχε ο χρήστης στη φόρµα του παραδείγµατος του προηγούµενου κεφαλαίο και, σύµφωνα µε το αν επέλεξε το κουµπί "Submit Changes" τότε τα δεδοµένα του record τροποποιούνται σύµφωνα µε τα δεδοµένα που έβαλε ο χρήστης στα input textboxes της φόρµας, διαφορετικά αν επέλεξε το κουµπί "Delete Record" τότε τα δεδοµένα διαγράφονται από τη βάση δεδοµένων. Πιο κάτω ακολουθεί ο ASP κώδικας: <html> <head> <title>submit DataBase</title> </head> <body> <h3>submit to Database</h3> <% on error resume next set conn= Server.CreateObject("ADODB.Connection") conn.connectionstring="provider=microsoft.jet.oledb.4.0;data Source=" & _ server.mappath("odbc_exmp.mdb") conn.open if Request.form("action")="Submit Changes" then id=request.form("id") sql="update names SET first_name='" & Request.Form("first_name") & "', " sql=sql & "last_name='" & Request.Form("last_name") & "' " sql=sql & "WHERE names.[id]=" & id conn.execute sql, Recordsaffected database") if err <> 0 then Response.Write("You do not have permission to update this else Response.Write("Record number " & id & " was updated.") end if end if if Request.Form("action")="Delete Record" then id=request.form("id") Η γλώσσα VBScript και η τεχνολογία ASP 122

123 conn.execute "DELETE FROM names WHERE names.[id]=" & id, Recordsaffected database") if err <> 0 then Response.Write("You do not have permission to update this else Response.Write("Record number " & id & " was deleted.") end if end if %> conn.close set conn=nothing </body> </html> Επεξήγηση του ASP κώδικα Όπως και στα προηγούµενα παραδείγµατα, δηµιουργούµε τη σύνδεση µε τη βάση δεδοµένων µε τη βοήθεια της µεθόδου CreateObject του αντικειµένου Server που παρέχει τη δυνατότητα δηµιουργίας ενός στιγµιότυπου του αντικειµένου Connection, όπως φαίνεται πιο κάτω: <% on error resume next set conn= Server.CreateObject("ADODB.Connection") conn.connectionstring="provider=microsoft.jet.oledb.4.0;data Source=" & _ server.mappath("odbc_exmp.mdb") conn.open Η πρώτη γραµµή κώδικα, on error resume next, αναγκάζει το πρόγραµµα να συνεχίσει τη ροή εκτέλεσης της επόµενης σε σειρά εντολής µέσα στον κώδικα που ακολουθεί αυτή τη γραµµή, σε περίπτωση που κάποια εντολή εκτελεστεί λανθασµένα. Στη συνέχεια γίνεται ένας έλεγχος κατά πόσο η δράση που επέλεξε ο χρήστης να εκτελέσει από τη φόρµα του παραδείγµατος στο προηγούµενο κεφάλαιο είναι "Submit Changes" ή "Delete Record". Ανάλογα, και όπως φανερώνουν και τα ονόµατα των δράσεων, είτε θα γίνει "UPDATE", δηλαδή ενηµέρωση της βάσης µε τα καινούργια δεδοµένα που παρείχε ο χρήστης, είτε θα γίνει "DELETE", δηλαδή µόνιµη διαγραφή του συγκεκριµένου record από τη βάση. Στο συγκεκριµένο παράδειγµα γίνεται και κάποιου είδους έλεγχος κατά πόσο ένας χρήστης έχει το δικαίωµα πρόσβασης στα δεδοµένα της βάσης έτσι ώστε να µπορεί να τροποποιεί ή να διαγράφει records. UΠροσθήκη νέων δεδοµένων στη βάση µέσα από µια ASP σελίδα Στο παράδειγµα που θα ακολουθήσει δηµιουργούµε µια HTML φόρµα της οποίας τα δεδοµένα είναι δυναµικά. Με άλλα λόγια η φόρµα αποτελείται από τόσα textboxes όσα τα πεδία(fields ή columns) του table που χρησιµοποιούµε ως δεδοµένο εισόδου. Πιο κάτω ακολουθεί ο ASP κώδικας: <html> <head> <title>add DataBase</title> </head> <body> <% set conn=server.createobject("adodb.connection") conn.provider="microsoft.jet.oledb.4.0" conn.open(server.mappath("odbc_exmp.mdb")) set rs = Server.CreateObject("ADODB.Recordset") rs.open "select * from names", conn Η γλώσσα VBScript και η τεχνολογία ASP 123

124 %> <h2>adding Records</h2> <form method="post" action="db_new.asp"> <table> <% for each x in rs.fields if x.name <> "id" then%> <tr> <td><%=x.name%></td> <td><input name="<%=x.name%>" value="enter your value here"></td> <% end if next %> </table> rs.close set rs=nothing conn.close set conn=nothing </tr> <p><input type="submit" name="action" value="add Record"> </p> </form> </body> </html> Μπορείτε να δείτε το αποτέλεσµα του πιο πάνω κώδικα. Επεξήγηση του ASP κώδικα Όπως και στα προηγούµενα παραδείγµατα, δηµιουργούµε τη σύνδεση µε τη βάση δεδοµένων µε τη βοήθεια της µεθόδου CreateObject του αντικειµένου Server που παρέχει τη δυνατότητα δηµιουργίας ενός στιγµιότυπου του αντικειµένου Connection κι ενός στιγµιότυπου του αντικειµένου Recordset, όπως φαίνεται πιο κάτω: <% set conn=server.createobject("adodb.connection") conn.provider="microsoft.jet.oledb.4.0" conn.open(server.mappath("odbc_exmp.mdb")) set rs = Server.CreateObject("ADODB.Recordset") rs.open "select * from names", conn Η γλώσσα VBScript και η τεχνολογία ASP 124

125 %> Στη συνέχεια δηµιουργούµε µια φόρµα. Η µέθοδος που θα χρησιµοποιήσει ο browser για να στείλει την πληροφορία στο server είναι η POST και καθορίζεται από το χαρακτηριστικό TmethodT της φόρµας. Η σελίδα που θα καλεστεί είναι η db_new.asp και καθορίζεται από το χαρακτηριστικό TactionT της φόρµας. (Για περισσότερες πληροφορίες για τις φόρµες µπορείτε να αναφερθείτε στο κεφάλαιο "Βασικές Τεχνικές ASP" [2.1-5] και "VBScript και Φόρµες" [3.9]). Η φόρµα αποτελείται από τόσα textboxes όσα είναι και τα πεδία του table που χρησιµοποιούµε. Γι' αυτό το λόγο χρησιµοποιούµε το FOR Loop για να διαβάσουµε όλα τα δεδοµένα που µαζέψαµε µέσα στο Recordset από το table names. Πιο κάτω φαίνεται ο κώδικας που εκτελεί όσα αναφέρονται πιο πάνω: <form method="post" action="db_new.asp"> <table> <% for each x in rs.fields if x.name <> "id" then%> <tr> <td><%=x.name%></td> <td><input name="<%=x.name%>" value="enter your value here"></td> <% end if next Τέλος η φόρµα αποτελείται από ένα κουµπί, το "Add Record". Με το πάτηµα του κουµπιού αυτού θα καλεστεί η asp σελίδα για να προστεθεί το καινούργιο record µέσα στη βάση. <p><input type="submit" name="action" value="add Record"> </p> UΚώδικας ASP για προσθήκη νέου record µέσα στη βάση δεδοµένων Το παράδειγµα που ακολουθεί χρησιµοποιεί τα δεδοµένα της φόρµας που δηµιουργήσαµε στο προηγούµενο κεφάλαιο για να προσθέσουµε ένα καινούργιο record µέσα στο table names της βάσης δεδοµένων. Πιο κάτω ακολουθεί ο ASP κώδικας: <html> <head> <title>add Record to DataBase</title> </head> <body> <h2>add Record to Database</h2> <% on error resume next set conn= Server.CreateObject("ADODB.Connection") conn.connectionstring="provider=microsoft.jet.oledb.4.0;data Source=" & _ server.mappath("odbc_exmp.mdb") conn.open fname=request.form("first_name") lname=request.form("last_name") sql="insert INTO names (first_name,last_name) _ VALUES ('" & fname & "', '" & lname & "')" conn.execute sql,recordsaffected if err <> 0 then Response.Write("You do not have permission to update this database") else Response.Write(" " & RecordsAffected & " record added") Η γλώσσα VBScript και η τεχνολογία ASP 125

126 end if %> conn.close set conn=nothing </body> </html> Επεξήγηση του ASP κώδικα Όπως και στα προηγούµενα παραδείγµατα, δηµιουργούµε τη σύνδεση µε τη βάση δεδοµένων µε τη βοήθεια της µεθόδου CreateObject του αντικειµένου Server που παρέχει τη δυνατότητα δηµιουργίας ενός στιγµιότυπου του αντικειµένου Connection, όπως φαίνεται πιο κάτω: <% on error resume next set conn= Server.CreateObject("ADODB.Connection") conn.connectionstring="provider=microsoft.jet.oledb.4.0;data Source=" & _ server.mappath("odbc_exmp.mdb") conn.open Στη συνέχεια καλούµε τη µέθοδο Request.Form µε παραµέτρους τα ονόµατα των πεδίων του table που χρησιµοποιήσαµε. Τα ονόµατα αυτά στη συγκεκριµένη περίπτωση συµβολίζουν τα ονόµατα των textboxes της φόρµας, αφού µε το For Loop που χρησιµοποιήσαµε στο προηγούµενο παράδειγµα, δώσαµε στα textboxes τα ονόµατα των στηλών του table names. Η µέθοδος Request.Form γνωστοποιεί την πληροφορία που έβαλε ο χρήστης µέσα στα πεδία "first_name" και "last_name" της φόρµας. Τα ονόµατα fname και lname είναι µεταβλητές στις οποίες αναθέσαµε την πληροφορία αυτή, και που χρησιµοποιούµε στη συνέχεια µέσα στο SQL query για να προσθέσουµε (µε το INSERT statement) το νέο record µέσα στο table names. Για να εκτελεστεί το query χρησιµοποιούµε τη µέθοδο Execute του αντικειµένου Connection. Πιο κάτω φαίνεται ο κώδικας που εκτελεί όλα αυτά: fname=request.form("first_name") lname=request.form("last_name") sql="insert INTO names (first_name,last_name) _ VALUES ('" & fname & "', '" & lname & "')" conn.execute sql,recordsaffected Η µεταβλητή RecordsAffected, όπως φανερώνει και το όνοµά της, επιστρέφει τον αριθµό των records που επηρεάστηκαν από το query. Τέλος γίνεται κάποιος έλεγχος για να δούµε κατά πόσο υπήρχε λάθος στην εισαγωγή του καινούργιου record µέσα στο table της βάσης δεδοµένων. Η µεταβλητή err είναι δεσµευµένο keyword της Visual Basic κι επιστρέφει ένα αριθµό αν ο κώδικας εκτελεστεί λανθασµένα. Έτσι, αν γίνει κάποιο λάθος κατά τη µεταφορά του νέου record µέσα στη βάση δεδοµένων, τότε εµφανίζεται στον browser ένα µήνυµα λάθους, διαφορετικά εµφανίζεται ένα µήνυµα που λέει πόσα records έχουν προστεθεί. Ο κώδικας που ακολουθεί φανερώνει όσα έχουν ειπωθεί: if err <> 0 then Response.Write("You do not have permission to update this database") else Response.Write(" " & RecordsAffected & " record added") end if Η γλώσσα VBScript και η τεχνολογία ASP 126

127 Η γλώσσα VBScript και η τεχνολογία ASP 127

128 7. Προγραµµατισµός - Java Applets JAVA Applet (µικροεφαρµογή JAVA), είναι ένα πρόγραµµα JAVA το οποίο έχει κατασκευαστεί µε τέτοια µορφή που να µπορεί να καλείται και να εκτελείται από έναν browser του Web. Ουσιαστικά εµπλουτίζει τις στατικές σελίδες HTML µε µεγάλες δυνατότητες διαλογικότητας και εµφάνισης. Αφού είδαµε τις βασικές αρχές της γλώσσας, ας δούµε πως κατασκευάζουµε JAVA applets Ένα πρώτο παράδειγµα συγγραφής java applet. Πληκτρολογούµε το ακόλουθο Applet µε όνοµα HelloAppplet.java : import java.applet.applet; import java.awt.*; public class HelloApplet extends Applet { String name; public void init() { name = getparameter("name") ; if(name == null) name = "Christos"; } public void paint(graphics g) { g.drawstring("hello "+name+"!",10, 30); ) } } και έπειτα το περνάµε από τον javac για να το µεταγλωττίσουµε. Ακολούθως πληκτρολογούµε τον HTML code, µε όνοµα Hello.html, που θα κάνει την κλήση στο Applet: <HTML> <HEAD> <TITLE>Hello World!</TITLE> </HEAD> <BODY> <H2>If you have a Java-enabled browser a greeting will appear below:</h2> <APPLET CODE="HelloApplet.class" WIDTH=200 HEIGHT=100> <PARAM NAME="name" VALUE="Christos"> <H3>Tough luck! Your browser doesn't support Java applets!<h3> </APPLET> </BODY> </HTML> τέλος καλούµε την παραπάνω σελίδα HTML από κάποιον browser. Μετά την παραπάνω ακολουθία θα εµφανιστεί η οθόνη του browser (πρέπει να είναι JAVA enabled) που δείχνει το Σχήµα 2. Προγραµµατισµός - Java Applets 128

129 Σχήµα 2. Παρατηρώντας το HTML πρόγραµµα βλέπουµε ότι: Για να κληθεί το Applet HelloApplet.java, το πρόγραµµα HTML πρέπει να έχει την εξής σύνταξη : <APPLET CODE="HelloApplet.class" WIDTH=200 HEIGHT=100> PARAM NAME="name" VALUE="Christοs"> </APPLET> To tag <APPLET> χρειάζεται να ξέρει: ποιο είναι το bytecode του JAVA προγράµµατος ποιο είναι το µέγεθος του παραθύρου που θα τρέξει το applet στην οθόνη του browser ποιες είναι οι παράµετροι που θα περαστούν στο Applet το µόνο tag που αναγνωρίζεται ανάµεσα στα tags <APPLET>...</APPLET> είναι το <PARAM>, οτιδήποτε άλλο αγνοείται και θεωρείται text από τον browser. Παρατηρώντας το JAVA πρόγραµµα βλέπουµε ότι: εισάγουµε τα πακέτα java.applet.applet και java.awt.* για να έχουµε προσπέλαση στις κλάσεις τους όλο το Applet είναι µία public κλάση που πρέπει να έχει το ίδιο όνοµα µε το όνοµα του αρχείου JAVA, και να έχει δηλωθεί ως υποκλάση της κλάσης Applet. η παραπάνω κλάση έχει µία µέθοδο την init() η οποία ουσιαστικά ασχολείται µε το πέρασµα των παραµέτρων από το HTML πρόγραµµα. Έχει επίσης και την µέθοδο paint που χρησιµοποιεί την drawstring για εκτύπωση σε περιβάλλον windows Μέθοδοι που καλούνται κατά την εκτέλεση applet Οι παραπάνω δύο µέθοδοι (init, paint) είναι µέθοδοι της κλάσης Applet (που έγινε imported στην αρχή του κώδικα JAVA). Στη δήλωση της κλάσης Applet ουσιαστικά δεν διαθέτουν καθόλου κώδικα (κενές). Γι αυτό και εµείς πάντα όταν γράφουµε Applets τις κάνουµε override. Πρέπει υποχρεωτικά να χρησιµοποιούµε αυτές µε τα ονόµατά τους και να τις κάνουµε override, γιατί ένα Applet όταν Προγραµµατισµός - Java Applets 129

Η γλώσσα HTML. Επιμέλεια: Δέγγλερη Σοφία

Η γλώσσα HTML. Επιμέλεια: Δέγγλερη Σοφία Η γλώσσα HTML Επιμέλεια: Δέγγλερη Σοφία Υπερκείμενο Το δομικό χαρακτηριστικό του Παγκόσμιου Ιστού Ένα αρχείο Απλό κείμενο και υπερσύνδεσμοι Υπερσύνδεσμος Μετάβαση σε διάφορα άλλα έγγραφα Αποτελείται από

Διαβάστε περισσότερα

Τεχνολογίες Διαδικτύου (Εξασκηθείτε στην HTML)

Τεχνολογίες Διαδικτύου (Εξασκηθείτε στην HTML) Τεχνολογίες Διαδικτύου (Εξασκηθείτε στην HTML) 1. Δημιουργία μιας απλής σελίδας HTML Ανοίξτε το Notepad ακολουθώντας τη διαδρομή Start All Programs Accessories Notepad Πληκτρολογήστε το ακόλουθο κείμενο:

Διαβάστε περισσότερα

Εισαγωγή στον Παγκόσμιο ιστό και στη γλώσσα Html. Χρ. Ηλιούδης

Εισαγωγή στον Παγκόσμιο ιστό και στη γλώσσα Html. Χρ. Ηλιούδης Εισαγωγή στον Παγκόσμιο ιστό και στη γλώσσα Html Χρ. Ηλιούδης Παγκόσμιος Ιστός (WWW) Ο Παγκόσμιος Ιστός (World Wide Web WWW), ή απλώς Ιστός, βασίζεται στην ιδέα των κατανεμημένων πληροφοριών. Αντί όλες

Διαβάστε περισσότερα

Εισαγωγη στην html. Η δομή μιας ιστοσελίδας (αρχείο html) Η βασική δομή ενός αρχείου html είναι η εξής: <html> <head>

Εισαγωγη στην html. Η δομή μιας ιστοσελίδας (αρχείο html) Η βασική δομή ενός αρχείου html είναι η εξής: <html> <head> Εισαγωγη στην html Ο παγκόσμιος ιστός (αγγ.: World Wide Web ή www) είναι η πιο δημοφιλής υπηρεσία που μας παρέχει το Διαδίκτυο (Internet) και είναι ένα σύστημα διασυνδεδεμένων πληροφοριών (κειμένου, εικόνας,

Διαβάστε περισσότερα

Άσκηση 6 Επαναληπτική Άσκηση HTML

Άσκηση 6 Επαναληπτική Άσκηση HTML Άσκηση 6 Επαναληπτική Άσκηση HTML ΕΤΙΚΕΤΕΣ HTML ΕΤΙΚΕΤΑ ΠΕΡΙΓΡΑΦΗ ΙΔΙΟΤΗΤΕΣ ΙΔΙΟΤΗΤΑ ΤΙΜΗ ΠΕΡΙΓΡΑΦΗ Βασικές Ορίζει τον τύπο του αρχείου Ορίζει ένα αρχείο HTML Ορίζει ένα τίτλο

Διαβάστε περισσότερα

Γαβαλάς αµιανός

Γαβαλάς αµιανός Πανεπιστήµιο Αιγαίου Σχολή Κοινωνικών Επιστηµών Τµήµα Πολιτισµικής Τεχνολογίας Και Επικοινωνίας ικτυακά Πολυµέσα Ι (Β Έτος, 3ο εξ) Εργαστήριο #1ο: Εισαγωγή στην HTML Γαβαλάς αµιανός dgavalas@aegean.gr

Διαβάστε περισσότερα

Πληροφορική Τμήμα Σχεδιασμού & Τεχνολογίας Ξύλου & Επίπλου Αντώνιος Καραγεώργος Ευανθία Τσιλιχρήστου. Μάθημα 5 ο Τεχνολογίες Διαδικτύου: HTML I

Πληροφορική Τμήμα Σχεδιασμού & Τεχνολογίας Ξύλου & Επίπλου Αντώνιος Καραγεώργος Ευανθία Τσιλιχρήστου. Μάθημα 5 ο Τεχνολογίες Διαδικτύου: HTML I Πληροφορική Τμήμα Σχεδιασμού & Τεχνολογίας Ξύλου & Επίπλου Αντώνιος Καραγεώργος Ευανθία Τσιλιχρήστου Μάθημα 5 ο Τεχνολογίες Διαδικτύου: HTML I Διαδικτυακή Εφαρμογή (1/2) Ως διαδικτυακή εφαρμογή μπορούμε

Διαβάστε περισσότερα

Επαναληπτική Άσκηση ΕΤΙΚΕΤΕΣ HTML

Επαναληπτική Άσκηση ΕΤΙΚΕΤΕΣ HTML Επαναληπτική Άσκηση ΕΤΙΚΕΤΕΣ HTML ΕΤΙΚΕΤΑ ΠΕΡΙΓΡΑΦΗ ΙΔΙΟΤΗΤΕΣ ΙΔΙΟΤΗΤΑ ΤΙΜΗ ΠΕΡΙΓΡΑΦΗ Βασικές Ορίζει ένα αρχείο HTML Ορίζει ένα τίτλο για το αρχείο Ορίζει το σώµα της background URL

Διαβάστε περισσότερα

ΑΣΠΑΙΤΕ. ΠΡΑΚΤΙΚΗ ΑΣΚΗΣΗ 4α. Υπερκείμενο και HTML. Ημερομηνία :... Τμήμα :... Ονοματεπώνυμο :...

ΑΣΠΑΙΤΕ. ΠΡΑΚΤΙΚΗ ΑΣΚΗΣΗ 4α. Υπερκείμενο και HTML. Ημερομηνία :... Τμήμα :... Ονοματεπώνυμο :... ΠΡΑΚΤΙΚΗ ΑΣΚΗΣΗ 4α Υπερκείμενο και HTML ΑΣΠΑΙΤΕ Ημερομηνία :... Τμήμα :... Ονοματεπώνυμο :... Η HTML (HyperText Markup Language) είναι η γλώσσα που χρησιμοποιείται για να περιγράψει τη δομή και τη διαμόρφωση

Διαβάστε περισσότερα

Α ΛΥΚΕΙΟΥ - ΕΦΑΡΜΟΓΕΣ ΠΛΗΡΟΦΟΡΙΚΗΣ ΜΑΪΟΣ 2019 ΕΝΔΕΙΚΤΙΚΕΣ ΕΡΩΤΗΣΕΙΣ ΚΑΤΑΝΟΗΣΗΣ

Α ΛΥΚΕΙΟΥ - ΕΦΑΡΜΟΓΕΣ ΠΛΗΡΟΦΟΡΙΚΗΣ ΜΑΪΟΣ 2019 ΕΝΔΕΙΚΤΙΚΕΣ ΕΡΩΤΗΣΕΙΣ ΚΑΤΑΝΟΗΣΗΣ Το υλικό αυτό δίνεται στους μαθητές για τη σωστή μελέτη της διδαχθείσας ύλης του μέρους Β. Πρόκειται για ένα συμπαγή κορμό ερωτήσεων και ασκήσεων οι οποίες καλύφθηκαν κατά τη διάρκεια της έως τώρα σχολικής

Διαβάστε περισσότερα

Σε αυτό το µάθηµα θα ασχοληθούµε µε τη βελτίωση της εµφάνισης ενός ιστοτόπου, αλλά και τον εύκολο χειρισµό όλων των αλλαγών στην εµφάνιση της σελίδας

Σε αυτό το µάθηµα θα ασχοληθούµε µε τη βελτίωση της εµφάνισης ενός ιστοτόπου, αλλά και τον εύκολο χειρισµό όλων των αλλαγών στην εµφάνιση της σελίδας Σε αυτό το µάθηµα θα ασχοληθούµε µε τη βελτίωση της εµφάνισης ενός ιστοτόπου, αλλά και τον εύκολο χειρισµό όλων των αλλαγών στην εµφάνιση της σελίδας µέσω της τεχνολογίας των ιαδοχικών Φύλλων Στυλ (cascading

Διαβάστε περισσότερα

ΒΑΣΙΚΕΣ ΑΡΧΕΣ ΣΧΕΔΙΑΣΜΟΥ ΕΦΑΡΜΟΓΩΝ

ΒΑΣΙΚΕΣ ΑΡΧΕΣ ΣΧΕΔΙΑΣΜΟΥ ΕΦΑΡΜΟΓΩΝ ΒΑΣΙΚΕΣ ΑΡΧΕΣ ΣΧΕΔΙΑΣΜΟΥ ΕΦΑΡΜΟΓΩΝ Βαγγελιώ Καβακλή Τμήμα Πολιτισμικής Τεχνολογίας & Επικοινωνίας 8 Μαρτίου 2001 Hypertext Markup Language (HTML)! Σε μια ιστοσελίδα μπορούν να εμφανίζονται διαφορετικά

Διαβάστε περισσότερα

ΕΙΣΑΓΩΓΗ ΣΤΗΝ HTML ΣΧΟΛΙΚΟ ΒΙΒΛΙΟ ΚΕΦΑΛΑΙΟ 11 Ευάγγελος Χ. Ζιούλας (Καθηγητής Πληροφορικής)

ΕΙΣΑΓΩΓΗ ΣΤΗΝ HTML ΣΧΟΛΙΚΟ ΒΙΒΛΙΟ ΚΕΦΑΛΑΙΟ 11 Ευάγγελος Χ. Ζιούλας (Καθηγητής Πληροφορικής) http://www.zioulas.gr ΕΙΣΑΓΩΓΗ ΣΤΗΝ HTML ΣΧΟΛΙΚΟ ΒΙΒΛΙΟ ΚΕΦΑΛΑΙΟ 11 Ευάγγελος Χ. Ζιούλας (Καθηγητής Πληροφορικής) WEB SERVER Είναι μια εφαρμογή software που αναλαμβάνει την αποστολή μιας ιστοσελίδας σε

Διαβάστε περισσότερα

Κεφάλαιο 11: Εισαγωγή στην HTML. Εφαρμογές Πληροφορικής Κεφ. 11 Καραμαούνας Πολύκαρπος

Κεφάλαιο 11: Εισαγωγή στην HTML. Εφαρμογές Πληροφορικής Κεφ. 11 Καραμαούνας Πολύκαρπος Κεφάλαιο 11: Εισαγωγή στην HTML 1 11.1 Γενική εισαγωγή στην HTML Τι είναι η HTML HyperText Markup Language - Γλώσσα Χαρακτηρισμού Υπερ-Κειμένου είναι η βασική γλώσσα με την οποία πραγματοποιείται η δόμηση

Διαβάστε περισσότερα

Μάθηµα 3 Περ ε ισ ι σότ ό ε τ ρ ε α α γ ια ι α τ η τ η γ λώσ ώ σα α HTML

Μάθηµα 3 Περ ε ισ ι σότ ό ε τ ρ ε α α γ ια ι α τ η τ η γ λώσ ώ σα α HTML Μάθηµα 3 Περισσότερα για τη γλώσσα Περισσότερα για τη γλώσσα HTML Περιεχόµενα Επικεφαλίδες (Headings) Παράγραφοι Λίστες Μορφοποίηση κειµένου Σύνδεσµοι Επικεφαλίδες (Headings) Οι επικεφαλίδες επιτελούν

Διαβάστε περισσότερα

ΠΡΟΓΡΑΜΜΑΤΙΣΤΙΚΑ ΕΡΓΑΛΕΙΑ ΓΙΑ ΤΟ ΔΙΑΔΙΚΤΥΟ

ΠΡΟΓΡΑΜΜΑΤΙΣΤΙΚΑ ΕΡΓΑΛΕΙΑ ΓΙΑ ΤΟ ΔΙΑΔΙΚΤΥΟ ΠΡΟΓΡΑΜΜΑΤΙΣΤΙΚΑ ΕΡΓΑΛΕΙΑ ΓΙΑ ΤΟ ΔΙΑΔΙΚΤΥΟ Κεφάλαιο 2. Το περιβάλλον του παγκόσμιου Ιστού Επιμέλεια: Καραγιάννης Σπύρος Καθηγητής ΠΕ19 Πλεονεκτήματα παγκόσμιου Ιστού Εξυπηρετητής Ιστού & Ιστοσελίδες Κύριες

Διαβάστε περισσότερα

ΕΡΓΑΣΤΗΡΙΟ FRONT PAGE 2

ΕΡΓΑΣΤΗΡΙΟ FRONT PAGE 2 ΕΡΓΑΣΤΗΡΙΟ FRONT PAGE 2 Μάθαµε στο προηγούµενο µάθηµα πώς να δίνουµε ονόµατα στις ιστοσελίδες µας, να βάζουµε χρώµα και γραφικά, ή ακόµα να δηµιουργούµε υπερσυνδέσµους σε κείµενο και εικόνες. Σήµερα µεταξύ

Διαβάστε περισσότερα

Πίνακες HTML. Παναγιώτης Γαλάτης 1ο ΕΠΑΛ Ηρακλείου

Πίνακες HTML. Παναγιώτης Γαλάτης 1ο ΕΠΑΛ Ηρακλείου Πίνακες HTML Παναγιώτης Γαλάτης 1ο ΕΠΑΛ Ηρακλείου Τι είναι Πίνακας Ένας πίνακας στοιχείων αποτελείται από γραμμές και στήλες. Το σημείο τομής μιας γραμμής και μιας στήλης ονομάζεται κελί (cell( cell).

Διαβάστε περισσότερα

<a href="http://www.somepage.com/somepage.html">μετάβαση στο κείμενο</a>.

<a href=http://www.somepage.com/somepage.html>μετάβαση στο κείμενο</a>. HTML Τα αρχεία της HTML έχουν ετικέτες (tags) που ορίζουν τη δομή και τη μορφοποίηση των ιστοσελίδων. Οι περισσότερες HTML ετικέτες τις συναντούμε ως ζεύγη τα οποία ενεργούν στα περιεχόμενα μεταξύ των

Διαβάστε περισσότερα

ΠΡΟΓΡΑΜΜΑΤΙΣΤΙΚΑ ΕΡΓΑΛΕΙΑ ΓΙΑ ΤΟ ΔΙΑΔΙΚΤΥΟ

ΠΡΟΓΡΑΜΜΑΤΙΣΤΙΚΑ ΕΡΓΑΛΕΙΑ ΓΙΑ ΤΟ ΔΙΑΔΙΚΤΥΟ ΠΡΟΓΡΑΜΜΑΤΙΣΤΙΚΑ ΕΡΓΑΛΕΙΑ ΓΙΑ ΤΟ ΔΙΑΔΙΚΤΥΟ Κεφάλαιο 4. Η γλώσσα HTML Επιμέλεια: Καραγιάννης Σπύρος Καθηγητής ΠΕ19 Βασικοί κανόνες σύνταξης HTML ομή σελίδας HTML Μορφοποίηση κειμένου Κατάλογοι Εισαγωγή

Διαβάστε περισσότερα

ΕΘΝΙΚΟ ΜΕΤΣΟΒΙΟ ΠΟΛΥΤΕΧΝΕΙΟ. Σηµειώσεις για τη γλώσσα HTML (HyperText Markup Language)

ΕΘΝΙΚΟ ΜΕΤΣΟΒΙΟ ΠΟΛΥΤΕΧΝΕΙΟ. Σηµειώσεις για τη γλώσσα HTML (HyperText Markup Language) ΕΘΝΙΚΟ ΜΕΤΣΟΒΙΟ ΠΟΛΥΤΕΧΝΕΙΟ ΣΧΟΛΗ ΗΛΕΚΤΡΟΛΟΓΩΝ ΜΗΧΑΝΙΚΩΝ ΚΑΙ ΜΗΧΑΝΙΚΩΝ ΥΠΟΛΟΓΙΣΤΩΝ Σηµειώσεις για τη γλώσσα HTML (HyperText Markup Language) ιδάσκων Αν. Καθηγητής Ι.Σ.Βενιέρης Αθήνα, Ιανουάριος 2003 1

Διαβάστε περισσότερα

ίκτυα - Internet Υπηρεσίες Internet O Παγκόσµιος Ιστός (World Wide Web) Ηλεκτρονική Αλληλογραφία (E-mail) Υπηρεσία FTP (File Transfer Protocol)

ίκτυα - Internet Υπηρεσίες Internet O Παγκόσµιος Ιστός (World Wide Web) Ηλεκτρονική Αλληλογραφία (E-mail) Υπηρεσία FTP (File Transfer Protocol) Ιόνιο Πανεπιστήµιο Τµήµα Αρχειονοµίας-Βιβλιοθηκονοµίας Κέρκυρα ίκτυα - Internet 2 Υπηρεσίες Internet O Παγκόσµιος Ιστός (World Wide Web) ΜηχανέςΑναζήτησηςστοWeb Ηλεκτρονική Αλληλογραφία (E-mail) Υπηρεσία

Διαβάστε περισσότερα

Ετικέτες HTML. <!-->: Τα σχόλια χρησιμοποιούνται για να γράφουμε σημειώσεις μέσα στον

Ετικέτες HTML. <!-->: Τα σχόλια χρησιμοποιούνται για να γράφουμε σημειώσεις μέσα στον Ετικέτες HTML : Τα σχόλια χρησιμοποιούνται για να γράφουμε σημειώσεις μέσα στον πηγαίο κώδικα για να διευκολύνουμε την επεξεργασία και την συντήρηση του αρχείου. Τα σχόλια δεν εμφανίζονται στην οθόνη

Διαβάστε περισσότερα

Πληροφορική Τμήμα Σχεδιασμού & Τεχνολογίας Ξύλου & Επίπλου Αντώνιος Καραγεώργος Ευανθία Τσιλιχρήστου. Μάθημα 6 ο Τεχνολογίες Διαδικτύου: HTML II

Πληροφορική Τμήμα Σχεδιασμού & Τεχνολογίας Ξύλου & Επίπλου Αντώνιος Καραγεώργος Ευανθία Τσιλιχρήστου. Μάθημα 6 ο Τεχνολογίες Διαδικτύου: HTML II Πληροφορική Τμήμα Σχεδιασμού & Τεχνολογίας Ξύλου & Επίπλου Αντώνιος Καραγεώργος Ευανθία Τσιλιχρήστου Μάθημα 6 ο Τεχνολογίες Διαδικτύου: HTML II Εισαγωγή Εικόνων Οι φυλλομετρητές μπορούν να εμφανίσουν ένθετες

Διαβάστε περισσότερα

<HTML> <HEAD> <TITLE> <BODY>

<HTML> <HEAD> <TITLE> <BODY> ΑΣΚΗΣΗ 1 1. Ανοίξτε τον επεξεργαστή ιστοσελίδων 2. Αποθηκεύστε στο X:/mathimata/html/askiseis/ με όνομα askisi1b.html 3. Θα φτιάξουμε μια νέα ιστοσελίδα, χρησιμοποιώντας τις βασικές ετικέτες

Διαβάστε περισσότερα

Ποιες είναι οι κύριες ετικέτες που χρησιμοποιεί η HTML για την περιγραφή της συνολικής δομής μιας ιστοσελίδας;

Ποιες είναι οι κύριες ετικέτες που χρησιμοποιεί η HTML για την περιγραφή της συνολικής δομής μιας ιστοσελίδας; Τι είναι η HTML; Η HTML είναι το ακρωνύμιο των λέξεων HyperText Markup Language, δηλαδή Γλώσσα Χαρακτηρισμού Υπερ Κειμένου και βασίζεται στη γλώσσα SGML, Standard Generalized Markup Language, που είναι

Διαβάστε περισσότερα

Κεφάλαιο 4 HyperText Markup Language - HTML. Προγραμματιστικά εργαλεία για το διαδίκτυο Φίλιππος Κουτσάκας, Πολύγυρος 2013

Κεφάλαιο 4 HyperText Markup Language - HTML. Προγραμματιστικά εργαλεία για το διαδίκτυο Φίλιππος Κουτσάκας, Πολύγυρος 2013 Κεφάλαιο 4 HyperText Markup Language - HTML Προγραμματιστικά εργαλεία για το διαδίκτυο Φίλιππος Κουτσάκας, Πολύγυρος 2013 Τι είναι η HTML; Ένας τρόπος για να πεις στον σελιδομετρητή πώς να αναπαραστήσει

Διαβάστε περισσότερα

Σχολή Κοινωνικών Επιστημών Τμήμα Πολιτισμικής Τεχνολογίας Και Επικοινωνίας

Σχολή Κοινωνικών Επιστημών Τμήμα Πολιτισμικής Τεχνολογίας Και Επικοινωνίας Πανεπιστήμιο Αιγαίου Σχολή Κοινωνικών Επιστημών Τμήμα Πολιτισμικής Τεχνολογίας Και Επικοινωνίας Δικτυακά Πολυμέσα Ι (Β Έτος, 3ο εξ) Διάλεξη #5η: HTML: πίνακες (tables), πλαίσια (frames) Γαβαλάς Δαμιανός

Διαβάστε περισσότερα

χρήστες και υπηρεσίες

χρήστες και υπηρεσίες ιδακτικό υλικό µαθητή χρήστες και υπηρεσίες Από όσα αναφέρθηκαν, γίνεται αντιληπτό ότι όποιος έχει τον κατάλληλο εξοπλισµό και έχει εξασφαλίσει τον τρόπο σύνδεσής του µε το ιαδίκτυο, µπορεί να το χρησιµοποιήσει.

Διαβάστε περισσότερα

Τεχνολογίες Διαδικτύου - Εργαστήριο 1 ο

Τεχνολογίες Διαδικτύου - Εργαστήριο 1 ο Τεχνολογίες Διαδικτύου - Εργαστήριο 1 ο 1. Δημιουργία μιας απλής σελίδας HTML Στον προσωπικό σας κατάλογο δημιουργήστε ένα φάκελο με όνομα HTML. Ανοίξτε το Notepad ακολουθώντας τη διαδρομή (Start All Programs

Διαβάστε περισσότερα

ΕΡΓΑΣΤΗΡΙΑΚΗ ΑΣΚΗΣΗ 2 ΜΕΛΕΤΗ ΚΑΙ ΕΦΑΡΜΟΓΗ ΔΗΜΙΟΥΡΓΙΑΣ HTML ΣΕΛΙΔΩΝ ΣΥΝΔΕΣΜΟΙ

ΕΡΓΑΣΤΗΡΙΑΚΗ ΑΣΚΗΣΗ 2 ΜΕΛΕΤΗ ΚΑΙ ΕΦΑΡΜΟΓΗ ΔΗΜΙΟΥΡΓΙΑΣ HTML ΣΕΛΙΔΩΝ ΣΥΝΔΕΣΜΟΙ ΕΡΓΑΣΤΗΡΙΑΚΗ ΑΣΚΗΣΗ 2 ΜΕΛΕΤΗ ΚΑΙ ΕΦΑΡΜΟΓΗ ΔΗΜΙΟΥΡΓΙΑΣ HTML ΣΕΛΙΔΩΝ ΣΥΝΔΕΣΜΟΙ Στην άσκηση αυτή θα εμπλουτίσουμε την ιστοσελίδα που φτιάξαμε στην προηγούμενη άκηση με πίνακες, συνδέσμους και γραφικά. 1.

Διαβάστε περισσότερα

7.11 Πρωτόκολλα Εφαρµογής. 7.11.2 Βασικές και Προηγµένες Υπηρεσίες ιαδικτύου. Ηλεκτρονικό Ταχυδροµείο. Τεχνολογία ικτύων Επικοινωνιών ΙΙ

7.11 Πρωτόκολλα Εφαρµογής. 7.11.2 Βασικές και Προηγµένες Υπηρεσίες ιαδικτύου. Ηλεκτρονικό Ταχυδροµείο. Τεχνολογία ικτύων Επικοινωνιών ΙΙ Τεχνολογία ικτύων Επικοινωνιών ΙΙ 7.11 Πρωτόκολλα Εφαρµογής 104. Αναφέρετε ονοµαστικά τις πιο χαρακτηριστικές εφαρµογές που υποστηρίζει η τεχνολογία TCP/IP οι οποίες είναι διαθέσιµες στο ιαδίκτυο 1. Ηλεκτρονικό

Διαβάστε περισσότερα

Ref.: SLWS 1 5Copyright 2005 The European Computer Driving Licence Foundation Ltd Σελίδα 1 από 7

Ref.: SLWS 1 5Copyright 2005 The European Computer Driving Licence Foundation Ltd Σελίδα 1 από 7 The European Computer Driving Licence Foundation Ltd Σελίδα 1 από 7 ΣΤΟΧΟΙ ΕΞΕΤΑΣΗΣ Η ενότητα ECDL WebStarter απαιτεί από τον Υποψήφιο να κατανοεί τις κύριες έννοιες της σχεδίασης και δημοσίευσης δικτυακών

Διαβάστε περισσότερα

ΤΕΙ ΚΑΒΑΛΑΣ. Πτυχιακή εργασία ΕΙΣΑΓΩΓΗ. Μιλτιάδης Κακλαμάνης

ΤΕΙ ΚΑΒΑΛΑΣ. Πτυχιακή εργασία ΕΙΣΑΓΩΓΗ. Μιλτιάδης Κακλαμάνης Σελίδα 1από ΤΕΙ ΚΑΒΑΛΑΣ Πτυχιακή εργασία Δικτυακή Εφαρμογή διαχείρισης ηλεκτρονικών εγγράφων υπηρεσίας. ΕΙΣΑΓΩΓΗ Μιλτιάδης Κακλαμάνης Σελίδα 2από Κατάλογος περιεχομένων ΕΙΣΑΓΩΓΗ...1 Σχετιζόμενα πρόσωπα...3

Διαβάστε περισσότερα

Special edition of the Technical Chamber of Greece on Video Conference Services on the Internet, 2000. PIRCH 32 v0.92b

Special edition of the Technical Chamber of Greece on Video Conference Services on the Internet, 2000. PIRCH 32 v0.92b PIRCH 32 v0.92b A.S. DRIGAS Applied Technologies Department NCSR DEMOKRITOS Ag. Paraskevi GREECE dr@imm.demokritos.gr http://imm.demokritos.gr Το Pirch 32 είναι ένα από τα καλύτερα προγράµµατα επικοινωνίας

Διαβάστε περισσότερα

Τι είναι η HTML; Τί είναι οι ετικέτες (tags); Πώς είναι μια ετικέτα (tag);

Τι είναι η HTML; Τί είναι οι ετικέτες (tags); Πώς είναι μια ετικέτα (tag); Τι είναι η HTML; Η HTML είναι το ακρώνυμο από το Hyper Text Markup Language που σημαίνει γλώσσα χαρακτηρισμού υπερκειμένου. Η χρήση μιας γλώσσας χαρακτηρισμού σημαίνει ότι γράφεται πρώτα το κείμενο και

Διαβάστε περισσότερα

ΕΠΛ 001: ΕΙΣΑΓΩΓΗ ΣΤΗΝ ΕΠΙΣΤΗΜΗ ΤΗΣ ΠΛΗΡΟΦΟΡΙΚΗΣ. Δίκτυα Υπολογιστών

ΕΠΛ 001: ΕΙΣΑΓΩΓΗ ΣΤΗΝ ΕΠΙΣΤΗΜΗ ΤΗΣ ΠΛΗΡΟΦΟΡΙΚΗΣ. Δίκτυα Υπολογιστών ΕΠΛ 001: ΕΙΣΑΓΩΓΗ ΣΤΗΝ ΕΠΙΣΤΗΜΗ ΤΗΣ ΠΛΗΡΟΦΟΡΙΚΗΣ Δίκτυα Υπολογιστών Στόχοι 1 Να εξηγήσουμε τι είναι τα δίκτυα υπολογιστών, ποιες είναι οι βασικές κατηγορίες τους και ποιες οι πιο συνηθισμένες τοπολογίες

Διαβάστε περισσότερα

Στόχοι. Υπολογιστικά συστήματα: Στρώματα. Βασικές έννοιες [7]

Στόχοι. Υπολογιστικά συστήματα: Στρώματα. Βασικές έννοιες [7] Στόχοι ΕΠΛ 003: ΕΙΣΑΓΩΓΗ ΣΤΗΝ ΕΠΙΣΤΗΜΗ ΤΗΣ ΠΛΗΡΟΦΟΡΙΚΗΣ 1 Να εξηγήσουμε τι είναι τα δίκτυα υπολογιστών, ποιες είναι οι βασικές κατηγορίες τους και ποιες οι πιο συνηθισμένες τοπολογίες τους. Να περιγράψουμε

Διαβάστε περισσότερα

Γλώσσες Σήµανσης (Markup Languages) Τεχνολογία ιαδικτύου και Ηλεκτρονικό Εµπόριο

Γλώσσες Σήµανσης (Markup Languages) Τεχνολογία ιαδικτύου και Ηλεκτρονικό Εµπόριο Γλώσσες Σήµανσης (Markup Languages) Τεχνολογία ιαδικτύου και Ηλεκτρονικό Εµπόριο 1 Γλώσσες Σήµανσης Γλώσσες σήµανσης: Αρχικά για τον καθορισµό εµφάνισης σελίδων, γραµµατοσειρών. Στη συνέχεια επεκτάθηκαν

Διαβάστε περισσότερα

ΥΠΗΡΕΣΙΑ WEBMAIL ΚΥΠΕΣ

ΥΠΗΡΕΣΙΑ WEBMAIL ΚΥΠΕΣ ΥΠΗΡΕΣΙΑ WEBMAIL ΚΥΠΕΣ Η υπηρεσία διαχείρισης αλληλογραφίας µέσω web (webmail) δίνει την δυνατότητα στους χρήστες να διαχειριστούν την αλληλογραφία τους απ οποιοδήποτε σηµείο βρίσκονται εφόσον υπάρχει

Διαβάστε περισσότερα

Τη φυσική (MAC) διεύθυνση που δίνει ο κατασκευαστής του δικτυακού υλικού στις συσκευές του (π.χ. στις κάρτες δικτύου). Η περιοχή διευθύνσεων που

Τη φυσική (MAC) διεύθυνση που δίνει ο κατασκευαστής του δικτυακού υλικού στις συσκευές του (π.χ. στις κάρτες δικτύου). Η περιοχή διευθύνσεων που 7.7 Πρωτόκολλο ARP 1 ύο είδη διευθύνσεων: MAC - IP Τη φυσική (MAC) διεύθυνση που δίνει ο κατασκευαστής του δικτυακού υλικού στις συσκευές του (π.χ. στις κάρτες δικτύου). Η περιοχή διευθύνσεων που µπορεί

Διαβάστε περισσότερα

Εισαγωγή στην HTML Τα tags της HTML και τα γνωρίσματά τους

Εισαγωγή στην HTML Τα tags της HTML και τα γνωρίσματά τους Εισαγωγή στην HTML Τα tags της HTML και τα γνωρίσματά τους Με την γλώσσα περιγραφής υπερ-κειμένου (HTML) μπορούμε να σχεδιάζουμε ιστοσελίδες. Η HyperText Markup Language βασίζεται στην SGML (Standard Generalized

Διαβάστε περισσότερα

Special edition of the Technical Chamber of Greece on Video Conference Services on the Internet, 2000 INTERNET PHONE

Special edition of the Technical Chamber of Greece on Video Conference Services on the Internet, 2000 INTERNET PHONE INTERNET PHONE A.S. DRIGAS Applied Technologies Department NCSR DEMOKRITOS Ag. Paraskevi GREECE dr@imm.demokritos.gr http://imm.demokritos.gr Το Internet Phone θέτει καινούργια δεδοµένα για την επικοινωνία

Διαβάστε περισσότερα

ΕΓΧΕΙΡΙΔΙΟ ΜΑΘΗΤΗ. της Πλατφόρμας Τηλεκατάρτισης

ΕΓΧΕΙΡΙΔΙΟ ΜΑΘΗΤΗ. της Πλατφόρμας Τηλεκατάρτισης ΕΓΧΕΙΡΙΔΙΟ ΜΑΘΗΤΗ της Πλατφόρμας Τηλεκατάρτισης ΠΕΡΙΕΧΟΜΕΝΑ 1. Εισαγωγή...2 2. Αρχική σελίδα, Εισαγωγή & Περιβάλλον Συστήματος...3 2.1. Αρχική σελίδα εισαγωγής...3 2.2. Εισαγωγή στην Πλατφόρμα Τηλε-κατάρτισης...4

Διαβάστε περισσότερα

Σχεδίαση ιστοσελίδων

Σχεδίαση ιστοσελίδων Τ.Ε.Ι. Δυτικής Ελλάδας Σχολή Διοίκησης και Οικονομίας Τμήμα Διοίκησης Επιχειρήσεων - Πάτρα Σχεδίαση ιστοσελίδων Θεώνη Πιτουρά, Γιάννης Κουτσονίκος Σημειώσεις για το Εργαστήριο «Επιχειρηματικές δικτυακές

Διαβάστε περισσότερα

ΣΧΕΔΙΑΣΜΟΣ ΚΑΙ ΑΝΑΠΤΥΞΗ ΙΣΤΟΤΟΠΩΝ

ΣΧΕΔΙΑΣΜΟΣ ΚΑΙ ΑΝΑΠΤΥΞΗ ΙΣΤΟΤΟΠΩΝ ΣΧΕΔΙΑΣΜΟΣ ΚΑΙ ΑΝΑΠΤΥΞΗ ΙΣΤΟΤΟΠΩΝ 1Τι είναι ο Παγκόσµιος Ιστός; Λόγω της µεγάλης απήχησης του Παγκόσµιου Ιστού πολλές φορές ταυτίζουµε τον Παγκόσµιο Ιστό µε το Διαδίκτυο. Στην πραγµατικότητα αυτή η αντίληψη

Διαβάστε περισσότερα

1. O FrontPage Explorer

1. O FrontPage Explorer 1. O FrontPage Explorer Στο παρελθόν, ο δηµιουργός µιας θέσης Ιστού έπρεπε να παρακολουθεί µόνος του τον τρόπο σύνδεσης των σελίδων του. Με το FrontPage Explorer µπορείτε να δηµιουργείτε ιστούς και να

Διαβάστε περισσότερα

7.11 Πρωτόκολλα εφαρµογής

7.11 Πρωτόκολλα εφαρµογής 7.11 Πρωτόκολλα εφαρµογής Ερωτήσεις 1. Ποιος ο ρόλος των πρωτοκόλλων εφαρµογής και πώς χειρίζονται τις συνδέσεις δικτύου; 2. Γιατί κάθε πρωτόκολλο εφαρµογής ορίζει συγκεκριµένο τρόπο παρουσίασης των δεδοµένων;

Διαβάστε περισσότερα

Hyper Text Markup Language (HTML) που σημαίνει γλώσσα σήμανσης υπερκειμένου.

Hyper Text Markup Language (HTML) που σημαίνει γλώσσα σήμανσης υπερκειμένου. Hyper Text Markup Language (HTML) που σημαίνει γλώσσα σήμανσης υπερκειμένου. 1 η ΑΣΚΗΣΗ Οι HTML σελίδες είναι απλές σελίδες κειμένου και μπορούν να δημιουργηθούν από οποιοδήποτε πρόγραμμα επεξεργασίας

Διαβάστε περισσότερα

Η λίστα <ol> (ordered list)

Η λίστα <ol> (ordered list) Λίστες (lists) Σε πολλά έγγραφα απαιτείται η παρουσίαση ή η καταγραφή στοιχείων σε μορφή λίστας. Για παράδειγμα, μια λίστα από ονόματα ή μια λίστα από προϊόντα. Τα στοιχεία μιας λίστας μπορεί να είναι

Διαβάστε περισσότερα

ΕΠΛ 003: ΕΠΙΣΤΗΜΗ ΤΗΣ ΠΛΗΡΟΦΟΡΙΚΗΣ ΚΑΙ ΠΛΗΡΟΦΟΡΙΚΑ ΣΥΣΤΗΜΑΤΑ

ΕΠΛ 003: ΕΠΙΣΤΗΜΗ ΤΗΣ ΠΛΗΡΟΦΟΡΙΚΗΣ ΚΑΙ ΠΛΗΡΟΦΟΡΙΚΑ ΣΥΣΤΗΜΑΤΑ ΕΠΛ 003: ΕΠΙΣΤΗΜΗ ΤΗΣ ΠΛΗΡΟΦΟΡΙΚΗΣ ΚΑΙ ΠΛΗΡΟΦΟΡΙΚΑ ΣΥΣΤΗΜΑΤΑ Δρ. Κουζαπάς Δημήτριος Πανεπιστήμιο Κύπρου - Τμήμα Πληροφορικής Παγκόσμιος Ιστός Στόχοι 1 Να εξηγήσουμε τι είναι ο Παγκόσμιος Ιστός και πώς

Διαβάστε περισσότερα

11. Η γλώσσα HTML Πίνακες, Λίστες, Φόρμες

11. Η γλώσσα HTML Πίνακες, Λίστες, Φόρμες 11. Η γλώσσα HTML Πίνακες, Λίστες, Φόρμες Σκοπός του Εργαστηρίου: Σκοπός της παρούσας εργαστηριακής άσκησης είναι η εμβάθυνση σε συχνά χρησιμοποιούμενες ετικέτες HTML, όπως οι πίνακες και οι λίστες, καθώς

Διαβάστε περισσότερα

7.6 ιευθυνσιοδότηση. Ερωτήσεις

7.6 ιευθυνσιοδότηση. Ερωτήσεις 7.6 ιευθυνσιοδότηση Ερωτήσεις 1. Να εξηγήσετε τους όρους διεύθυνση, όνοµα και διαδροµή στην τεχνολογία TCP/IP και να εξηγήσετε πώς σχετίζονται αυτοί µεταξύ τους. 2. Τι είναι η φυσική διεύθυνση ή διεύθυνση

Διαβάστε περισσότερα

ΕΙΔΙΚΟΙ ΧΑΡΑΚΤΗΡΕΣ ΧΑΡΑΚΤΗΡΕΣ ΜΕ ΕΙΔΙΚΕΣ ΛΕΙΤΟΥΡΓΙΕΣ. ΠΙΝΑΚΑΣ ΚΩΔΙΚΩΝ ΔΙΑΦΥΓΗΣ Χαρακτήρας Κωδικός διαφυγής Ερμηνεία Συμβόλου & nbsp;

ΕΙΔΙΚΟΙ ΧΑΡΑΚΤΗΡΕΣ ΧΑΡΑΚΤΗΡΕΣ ΜΕ ΕΙΔΙΚΕΣ ΛΕΙΤΟΥΡΓΙΕΣ. ΠΙΝΑΚΑΣ ΚΩΔΙΚΩΝ ΔΙΑΦΥΓΗΣ Χαρακτήρας Κωδικός διαφυγής Ερμηνεία Συμβόλου & nbsp; ΕΙΔΙΚΟΙ ΧΑΡΑΚΤΗΡΕΣ Υπάρχουν ειδικοί χαρακτήρες που δεν μπορούν να απεικονισθούν με απλές πληκτρολογήσεις (πατώντας ένα πλήκτρο ή ένα πλήκτρο και το Shift) αλλά μόνο με πιο περίπλοκους τρόπους (π.χ. πατώντας

Διαβάστε περισσότερα

Εισαγωγή στην πληροφορική

Εισαγωγή στην πληροφορική Τμήμα Μηχανικών Πληροφορικής & Τηλεπικοινωνιών Εισαγωγή στην πληροφορική Ενότητα 5: Εισαγωγή στην HTML (Μέρος Α) Αγγελίδης Παντελής Τμήμα Μηχανικών Πληροφορικής και Τηλεπικοινωνιών Άδειες Χρήσης Το παρόν

Διαβάστε περισσότερα

Ως Διαδίκτυο (Internet) ορίζεται το παγκόσμιο (διεθνές) δίκτυο ηλεκτρονικών υπολογιστών (international network).

Ως Διαδίκτυο (Internet) ορίζεται το παγκόσμιο (διεθνές) δίκτυο ηλεκτρονικών υπολογιστών (international network). ΙΔΡΥΜΑ ΝΕΟΛΑΙΑΣ ΚΑΙ ΔΙΑ ΒΙΟΥ ΜΑΘΗΣΗΣ ΥΠΗΡΕΣΙΕΣ ΔΙΑΔΙΚΤΥΟΥ Καλαμάτα, 2015 Το Διαδίκτυο Ως Διαδίκτυο (Internet) ορίζεται το παγκόσμιο (διεθνές) δίκτυο ηλεκτρονικών υπολογιστών (international network). Πρόκειται

Διαβάστε περισσότερα

ΜΑΘΗΜΑ: Εργαλεία Ανάπτυξης εφαρμογών internet.

ΜΑΘΗΜΑ: Εργαλεία Ανάπτυξης εφαρμογών internet. ΜΑΘΗΜΑ: Εργαλεία Ανάπτυξης εφαρμογών internet. ΩΡΕΣ ΔΙΔΑΣΚΑΛΙΑΣ: ΕΙΔΟΣ ΜΑΘΗΜΑΤΟΣ: Μικτό Γενικός σκοπός είναι να αποκτήσει ο καταρτιζόμενος τις αναγκαίες γνώσεις σχετικά με εργαλεία και τις τεχνικές για

Διαβάστε περισσότερα

Ιόνιο Πανεπιστήµιο Τµήµα Αρχειονοµίας - Βιβλιοθηκονοµίας. Υπηρεσίες Internet. ίκτυα Η/Υ. Επίπεδο Εφαρµογής. Ενότητα θ

Ιόνιο Πανεπιστήµιο Τµήµα Αρχειονοµίας - Βιβλιοθηκονοµίας. Υπηρεσίες Internet. ίκτυα Η/Υ. Επίπεδο Εφαρµογής. Ενότητα θ Ιόνιο Πανεπιστήµιο Τµήµα Αρχειονοµίας - Βιβλιοθηκονοµίας Υπηρεσίες Internet ίκτυα Η/Υ Επίπεδο Εφαρµογής O Παγκόσµιος Ιστός (World Wide Web) Ηλεκτρονική Αλληλογραφία (E-mail) Υπηρεσία FTP (File Transfer

Διαβάστε περισσότερα

ΚΕΦΑΛΑΙΟ Web Services

ΚΕΦΑΛΑΙΟ Web Services ΚΕΦΑΛΑΙΟ Web Services Προϋποθέσεις εγκατάστασης Web Services για το Κεφάλαιο 4.50 1. Κεφάλαιο έκδοση 4.51e build 458 ή νεότερο 2. Internet Information Server (IIS) version 6 ή νεότερος 3. Σε κάποιον υπολογιστή

Διαβάστε περισσότερα

ΠΟΛΥΜΕΣΑ ΣΤΟ ΙΑ ΙΚΤΥΟ

ΠΟΛΥΜΕΣΑ ΣΤΟ ΙΑ ΙΚΤΥΟ ΠΟΛΥΜΕΣΑ ΣΤΟ ΙΑ ΙΚΤΥΟ 1. Εισαγωγή Μετά τη ραγδαία εξάπλωση του ιαδικτύου (Internet) σε όλο τον κόσµο, δηµιουργήθηκε η ανάγκη παροχής πολυµεσικών υπηρεσιών µέσω του ιαδικτύου. Οι βασικές πολυµεσικές υπηρεσίες

Διαβάστε περισσότερα

To λεξικό του Internet

To λεξικό του Internet To λεξικό του Internet A Address: Ο τόπος που βρίσκεται μια πηγή του Internet. Μια e-mail address μπορεί να έχει την εξής μορφή : georgepapado@hotmail.com. Μια web address είναι κάπως έτσι: http://www.in.gr.

Διαβάστε περισσότερα

Blog στο Wordpress. Επιμέλεια: Δέγγλερη Σοφία

Blog στο Wordpress. Επιμέλεια: Δέγγλερη Σοφία Blog στο Wordpress Επιμέλεια: Δέγγλερη Σοφία Περιεχόμενα Μετάβαση στο blog Σύνδεση ως διαχειριστής Πίνακας ελέγχου Εμφάνιση Ρυθμίσεις Άρθρα Σελίδες Πολυμέσα Σύνδεσμοι Widgets Μετάβαση στο blog Πληκτρολογούμε

Διαβάστε περισσότερα

το ιαδίκτυο συνδέει εκατοµµύρια χρήστες αποτελώντας την µεγαλύτερη πηγή πληροφοριών και ανταλλαγής µηνυµάτων στον πλανήτη.

το ιαδίκτυο συνδέει εκατοµµύρια χρήστες αποτελώντας την µεγαλύτερη πηγή πληροφοριών και ανταλλαγής µηνυµάτων στον πλανήτη. το ιαδίκτυο Μέχρι τώρα µάθαµε να εργαζόµαστε σε έναν από τους υπολογιστές του Εργαστηρίου µας. Όµως παρατηρήσαµε ότι οι υπολογιστές αυτοί µπορούν να ανταλλάσσουν στοιχεία, να τυπώνουν όλοι σε έναν εκτυπωτή

Διαβάστε περισσότερα

Περιεχόμενα. Λίγα λόγια από το συγγραφέα... 7

Περιεχόμενα. Λίγα λόγια από το συγγραφέα... 7 Περιεχόμενα Λίγα λόγια από το συγγραφέα... 7 Μέρος 1 1 Βασικοί όροι... 11 2 Βασική δομή κώδικα HTML... 25 3 Μορφοποίηση κειμένου... 39 4 Μορφοποίηση παραγράφων... 51 5 Εισαγωγή εικόνας... 63 6 Λίστες με

Διαβάστε περισσότερα

ΠΑΝΕΠΙΣΤΗΜΙΟ ΙΩΑΝΝΙΝΩΝ ΚΕΝΤΡΟ ΙΑΧΕΙΡΙΣΗΣ ΙΚΤΥΩΝ. Εγχειρίδιο χρήσης των υπηρεσιών τηλεκπαίδευσης του Πανεπιστηµίου Ιωαννίνων. Ασύγχρονη τηλεκπαίδευση

ΠΑΝΕΠΙΣΤΗΜΙΟ ΙΩΑΝΝΙΝΩΝ ΚΕΝΤΡΟ ΙΑΧΕΙΡΙΣΗΣ ΙΚΤΥΩΝ. Εγχειρίδιο χρήσης των υπηρεσιών τηλεκπαίδευσης του Πανεπιστηµίου Ιωαννίνων. Ασύγχρονη τηλεκπαίδευση Εγχειρίδιο χρήσης των υπηρεσιών τηλεκπαίδευσης του Πανεπιστηµίου Ιωαννίνων Ασύγχρονη τηλεκπαίδευση 1 Πίνακας Περιεχοµένων 1. Εισαγωγή...3 ηµιουργία νέου λογαριασµού χρήστη...3 2. Η οθόνη του συστήµατος...4

Διαβάστε περισσότερα

7.5 Πρωτόκολλο IP. Τεχνολογία ικτύων Επικοινωνιών ΙΙ

7.5 Πρωτόκολλο IP. Τεχνολογία ικτύων Επικοινωνιών ΙΙ Τεχνολογία ικτύων Επικοινωνιών ΙΙ 7.5 Πρωτόκολλο IP 38. Τι είναι το πρωτόκολλο ιαδικτύου (Internet Protocol, IP); Είναι το βασικό πρωτόκολλο του επιπέδου δικτύου της τεχνολογίας TCP/IP. Βασίζεται στα αυτοδύναµα

Διαβάστε περισσότερα

Άσκηση 3 -Δηµιουργία ιστοσελίδων µε HTML µέρος 3 ο

Άσκηση 3 -Δηµιουργία ιστοσελίδων µε HTML µέρος 3 ο Άσκηση 3 -Δηµιουργία ιστοσελίδων µε HTML µέρος 3 ο Εικόνες στην HTML Oι εικόνες ορίζονται µε την ετικέτα . Η συγκεκριµένη ετικέτα δεν κλείνει (είναι λάθος το: ) ή µπορούµε να πούµε ότι ανοίγει

Διαβάστε περισσότερα

ΕΠΛ 003: ΕΙΣΑΓΩΓΗ ΣΤΗΝ ΕΠΙΣΤΗΜΗ ΤΗΣ ΠΛΗΡΟΦΟΡΙΚΗΣ. Παγκόσμιος Ιστός

ΕΠΛ 003: ΕΙΣΑΓΩΓΗ ΣΤΗΝ ΕΠΙΣΤΗΜΗ ΤΗΣ ΠΛΗΡΟΦΟΡΙΚΗΣ. Παγκόσμιος Ιστός ΕΠΛ 003: ΕΙΣΑΓΩΓΗ ΣΤΗΝ ΕΠΙΣΤΗΜΗ ΤΗΣ ΠΛΗΡΟΦΟΡΙΚΗΣ Παγκόσμιος Ιστός Στόχοι 1 Να εξηγήσουμε τι είναι ο Παγκόσμιος Ιστός και πώς μπορεί να μας διευκολύνει στις δραστηριότητές μας. Να περιγράψουμε σύντομα την

Διαβάστε περισσότερα

Διαδίκτυο: Ιστορία, Δομή, Υπηρεσίες

Διαδίκτυο: Ιστορία, Δομή, Υπηρεσίες Διαδίκτυο: Ιστορία, Δομή, Υπηρεσίες 1 η Ερώτηση (Ορισμός): Τι είναι το Διαδίκτυο; Διαδίκτυο είναι το παγκόσμιο δίκτυο όλων των επιμέρους δικτύων που έχουν συμφωνήσει σε κοινούς κανόνες επικοινωνίας και

Διαβάστε περισσότερα

Περιεχόμενα Πώς να χρησιμοποιήσετε το βιβλίο... 7 Αντί προλόγου... 9 Κεφάλαιο 1: Κεφάλαιο 2: Κεφάλαιο 3: Κεφάλαιο 4: Κεφάλαιο 5: Πώς να δημιουργήσω το Προφίλ μου και να γίνω μέλος στο Facebook;... 15 Τι

Διαβάστε περισσότερα

7.9 ροµολόγηση. Ερωτήσεις

7.9 ροµολόγηση. Ερωτήσεις 7.9 ροµολόγηση Ερωτήσεις 1. Να δώσετε τον ορισµό της δροµολόγησης; 2. Από τι εξαρτάται η χρονική στιγµή στην οποία λαµβάνονται οι αποφάσεις δροµολόγησης; Να αναφέρετε ποια είναι αυτή στην περίπτωση των

Διαβάστε περισσότερα

Βασίλειος Κοντογιάννης ΠΕ19

Βασίλειος Κοντογιάννης ΠΕ19 Ενότητα3 Επικοινωνία και Διαδίκτυο 11.1 Γενική Εισαγωγή στην HTML Τι είναι η HTML (HyperText Markup Language); Είναι μια γλώσσα σήμανσης (Markup) με την οποία πραγματοποιείται η δόμηση σελίδων του Παγκόσμιου

Διαβάστε περισσότερα

Πλοήγηση www / Με τον Internet Explorer

Πλοήγηση www / Με τον Internet Explorer Πλοήγηση www / Με τον Internet Explorer Περιεχόμενα 1.Eισαγωγή 2.Το περιβάλλον του Internet Explorer 3.Οδηγίες πλοήγησης 4.Αποθήκευση αρχείων 5.Αγαπημένα 6.Ασφαλής σύνδεση 7.Διακομιστής μεσολάβησης 1.Εισαγωγή

Διαβάστε περισσότερα

ΠΕΡΙΕΧΟΜΕΝΑ. Περιγραφή της αρχικής οθόνης κάθε τάξης α. Εικονίδια επιλογής θεµατικών ενοτήτων β. Εικονίδια διαφυγής...

ΠΕΡΙΕΧΟΜΕΝΑ. Περιγραφή της αρχικής οθόνης κάθε τάξης α. Εικονίδια επιλογής θεµατικών ενοτήτων β. Εικονίδια διαφυγής... ΠΕΡΙΕΧΟΜΕΝΑ Α. ΕΚΚΙΝΗΣΗ ΚΛΕΙΣΙΜΟ ΤΗΣ ΕΦΑΡΜΟΓΗΣ.............................. 5 Β. ΒΑΣΙΚΕΣ ΛΕΙΤΟΥΡΓΙΕΣ ΠΡΟΣΒΑΣΙΜΟΤΗΤΑΣ.............................. 6 Γ. ΕΙΣΑΓΩΓΗ ΣΤΗΝ ΥΛΗ ΚΑΘΕ ΤΑΞΗΣ....................................

Διαβάστε περισσότερα

Version X. Οδηγίες χρήσης

Version X. Οδηγίες χρήσης Version 1.0.1.X Οδηγίες χρήσης Πρόλογος Η εφαρµογή CallReceiver σχεδιάστηκε για την υποστήριξη ξενοδοχείων ή επιχειρήσεων, όσον αφορά στις τηλεφωνικές κλήσεις που διαχειρίζεται το τηλεφωνικό κέντρο (Τ/Κ).

Διαβάστε περισσότερα

Αλεξιάδης Γεώργιος (ΠΕ86) -

Αλεξιάδης Γεώργιος (ΠΕ86) - 11.1 Γενική Εισαγωγή στην HTML Τι είναι η HTML; HyperText Markup Language (Γλώσσα Χαρακτηρισμού Υπερ-Κειμένου) Βασίζεται στην SGML (Standard Generalized Markup Language) που είναι ένα πολύ μεγαλύτερο σύστημα

Διαβάστε περισσότερα

ίκτυα υπολογιστών Στόχοι κεφαλαίου ίκτυα

ίκτυα υπολογιστών Στόχοι κεφαλαίου ίκτυα Στόχοι κεφαλαίου ίκτυα υπολογιστών (Κεφαλαιο 15 στο βιβλιο) Περιγραφή των κύριων θεµάτων σχετικά µε τα δίκτυα υπολογιστών Αναφορά στα διάφορα είδη δικτύων Περιγραφή των διαφόρων τοπολογιών των τοπικών

Διαβάστε περισσότερα

ΕΠΛ 012 Εισαγωγή στο Παγκόσμιο Πλέγμα Πληροφοριών

ΕΠΛ 012 Εισαγωγή στο Παγκόσμιο Πλέγμα Πληροφοριών ΕΠΛ 012 Εισαγωγή στο Παγκόσμιο Πλέγμα Πληροφοριών World Wide Web (WWW) Θέματα Επεξεργασία δεδομένων στο Web Δημιουργία απλών σελίδων HTML Περιγραφή κάποιων XHTML στοιχείων (tags) Εξέλιξης του WWW Το WWW

Διαβάστε περισσότερα

Οδηγίες κατασκευής Ιστοσελίδων µε το πρόγραµµα FRONTPAGE 2003

Οδηγίες κατασκευής Ιστοσελίδων µε το πρόγραµµα FRONTPAGE 2003 Οδηγίες κατασκευής Ιστοσελίδων µε το πρόγραµµα FRONTPAGE 2003 Μάθετε σε 10 βήµατα να φτιάχνετε τις δικές σας ιστοσελίδες Βήµα 1ο ΕΕππιιµµέέλλεειιαα:: ΣΣάάββββααςς ΟΟββααδδίίααςς Σε αυτό το βήµα θα χρησιµοποιήσετε

Διαβάστε περισσότερα

2. ΕΙΣΑΓΩΓΗ ΣΤΗΝ HTML ΓΙΩΡΓΟΣ ΓΙΑΝΝΑΚΑΚΗΣ, ΜΑΝΩΛΗΣ ΤΣΙΚΝΑΚΗΣ

2. ΕΙΣΑΓΩΓΗ ΣΤΗΝ HTML ΓΙΩΡΓΟΣ ΓΙΑΝΝΑΚΑΚΗΣ, ΜΑΝΩΛΗΣ ΤΣΙΚΝΑΚΗΣ 2014 2. ΕΙΣΑΓΩΓΗ ΣΤΗΝ HTML ΓΙΩΡΓΟΣ ΓΙΑΝΝΑΚΑΚΗΣ, ΜΑΝΩΛΗΣ ΤΣΙΚΝΑΚΗΣ H HTML είναι μία γλώσσα σήμανσης και αποτελεί την κύρια γλώσσα δημιουργίας ιστοσελίδων του διαδικτύου. Είναι το ακρωνύμιο των λέξεων HyperText

Διαβάστε περισσότερα

1. Εγκατάσταση του NetMeeting

1. Εγκατάσταση του NetMeeting Οδηγίες Εγκατάστασης και Χρήσης του Netmeeting Περιεχόµενα 1. Εγκατάσταση του Netmeeting 2. Το Interface του Netmeeting 3. Κύρια Κουµπιά Netmeeting 4. Πραγµατοποίηση Κλήσεων - Συνδέσεων 5. Το Μενού του

Διαβάστε περισσότερα

Η Γλώσσα Προγραμματισμού του Internet HTML

Η Γλώσσα Προγραμματισμού του Internet HTML Η Γλώσσα Προγραμματισμού του Internet HTML Η HTML και το Internet Κάθε σελίδα που εμφανίζεται στο Internet είναι ένα αρχείο γραμμένο με τη γλώσσα HTML (HyperText Markup Language, Γλώσσα Χαρακτηρισμού Υπερ-Κειμένου),

Διαβάστε περισσότερα

Νέες Τεχνολογίες στην Εκπαίδευση

Νέες Τεχνολογίες στην Εκπαίδευση Σχολή Εφαρμοσμένων Μαθηματικών και Φυσικών Επιστημών Εθνικό Μετσόβιο Πολυτεχνείο Νέες Τεχνολογίες στην Εκπαίδευση Εικόνα, κείμενο και εικόνα Στεφανέας Πέτρος Ζαμαρίας Βασίλης Άδεια Χρήσης Το παρόν εκπαιδευτικό

Διαβάστε περισσότερα

7.3 Πρωτόκολλο TCP. 1. Το TCP πρωτόκολλο παρέχει υπηρεσίες προσανατολισµένες σε σύνδεση. Σ Λ

7.3 Πρωτόκολλο TCP. 1. Το TCP πρωτόκολλο παρέχει υπηρεσίες προσανατολισµένες σε σύνδεση. Σ Λ Ερωτήσεις 7.3 Πρωτόκολλο TCP 1. Τι είναι το τµήµα (segment) στο πρωτόκολλο TCP; Από ποια µέρη αποτελείται; 2. Για ποιο σκοπό χρησιµοποιείται ο Αριθµός ειράς στην επικεφαλίδα ενός segment TCP; 3. την περίπτωση

Διαβάστε περισσότερα

Βαρβάκειο Πρότυπο Γυμνάσιο

Βαρβάκειο Πρότυπο Γυμνάσιο Παραδόσεις & εργαστηριακές ασκήσεις στην HTML Βαρβάκειο Πρότυπο Γυμνάσιο Σχολ. Χρονιά 2016-2017 Θ. Οτζάκογλου Εργαστήρι Πληροφορικής Σχολ. Έτος 2016 2017 Αν και δεν είναι μία ακόμη «γλώσσα προγραμματισμού»,

Διαβάστε περισσότερα

Εργαλεία ανάπτυξης εφαρμογών internet Ι

Εργαλεία ανάπτυξης εφαρμογών internet Ι IEK ΟΑΕΔ ΚΑΛΑΜΑΤΑΣ ΤΕΧΝΙΚΟΣ ΕΦΑΡΜΟΓΩΝ ΠΛΗΟΦΟΡΙΚΗΣ Εργαλεία ανάπτυξης εφαρμογών internet Ι HTML Διδάσκουσα: Κανελλοπούλου Χριστίνα ΠΕ19 Πληροφορικής HTML (HyperText Markup Language) Η γλώσσα που χρησιμοποιείται

Διαβάστε περισσότερα

Πτυχιακή Εργασία. Ηλεκτρονικό εμπόριο & Σημασιολογικός ιστός. Χρησιμοποιείστε για το κείμενο γραμματοσειρά courier 12 με στοίχιση πλήρης

Πτυχιακή Εργασία. Ηλεκτρονικό εμπόριο & Σημασιολογικός ιστός. Χρησιμοποιείστε για το κείμενο γραμματοσειρά courier 12 με στοίχιση πλήρης Πτυχιακή Εργασία Ηλεκτρονικό εμπόριο & Σημασιολογικός ιστός Χρησιμοποιείστε για το κείμενο γραμματοσειρά courier 12 με στοίχιση πλήρης Άσκηση 3 1 Αρίθμηση σελίδων Κάντε διπλό κλικ στην περιοχή της κεφαλίδας

Διαβάστε περισσότερα

Οδηγίες Εικόνα 1 Εικόνα 2

Οδηγίες Εικόνα 1 Εικόνα 2 Οδηγίες Σκοπός αυτού του εγγράφου είναι να σας καθοδηγήσει στην δημιουργία νέων λημμάτων στο Wiki των Ελληνικών Υπηρεσιών Πληροφόρησης που θέλουμε να δημιουργήσουμε. Τα λήμματα που θα δημιουργήσουν όλες

Διαβάστε περισσότερα

Blog στο Wordpress. Επιμέλεια: Δέγγλερη Σοφία

Blog στο Wordpress. Επιμέλεια: Δέγγλερη Σοφία Blog στο Wordpress Επιμέλεια: Δέγγλερη Σοφία Περιεχόμενα Μετάβαση στο blog Σύνδεση ως διαχειριστής Πίνακας ελέγχου Εμφάνιση Ρυθμίσεις Άρθρα Σελίδες Πολυμέσα Σύνδεσμοι Μετάβαση στο blog Πληκτρολογούμε στη

Διαβάστε περισσότερα

Πίνακες. ιδιότητες ετικέτας <tr>

Πίνακες. ιδιότητες ετικέτας <tr> Πίνακες ιδιότητες ετικέτας Ιδιότητα align στοιχίζει κατά την οριζόντια διεύθυνση τα περιεχόμενα μιας γραμμής του πίνακα αριστερά (left), δεξιά (right), στο κέντρο (center), ή με πλήρη στοίχιση (justify)

Διαβάστε περισσότερα

Σταύρος Καουκάκης Ευτύχιος Βαβουράκης

Σταύρος Καουκάκης Ευτύχιος Βαβουράκης ΠΑΝΕΠΙΣΤΗΜΙΟ ΚΡΗΤΗΣ 1 ο ΣΧΟΛΕΙΟ ΚΩΔΙΚΑ «Βασικά Θέματα Προγραμματισμού στην Ανάπτυξη Δυναμικών Διαδικτυακών Εφαρμογών» (Part 1) Σταύρος Καουκάκης Ευτύχιος Βαβουράκης 1 Λίγα Λόγια για το Σχολείο Μονάδες

Διαβάστε περισσότερα

Προγραμματισμός Διαδικτύου

Προγραμματισμός Διαδικτύου Πανεπιστήμιο Δυτικής Μακεδονίας Τμήμα Μηχανικών Πληροφορικής & Τηλεπικοινωνιών Προγραμματισμός Διαδικτύου Δρ. Μηνάς Δασυγένης mdasygenis@uowm.gr Τμήμα της παρουσίασης δημιουργήθηκε από τον κ. Παναγιώτη

Διαβάστε περισσότερα

Το Ηλεκτρονικό Ταχυδροµείο (e-mail) είναι ένα σύστηµα που δίνει την δυνατότητα στον χρήστη να ανταλλάξει µηνύµατα αλλά και αρχεία µε κάποιον άλλο

Το Ηλεκτρονικό Ταχυδροµείο (e-mail) είναι ένα σύστηµα που δίνει την δυνατότητα στον χρήστη να ανταλλάξει µηνύµατα αλλά και αρχεία µε κάποιον άλλο Το Ηλεκτρονικό Ταχυδροµείο (e-mail) είναι ένα σύστηµα που δίνει την δυνατότητα στον χρήστη να ανταλλάξει µηνύµατα αλλά και αρχεία µε κάποιον άλλο χρήστη µέσω υπολογιστή άνετα γρήγορα και φτηνά. Για να

Διαβάστε περισσότερα

Τεχνολογία TCP/IP ΙΑ ΙΚΤΥΩΣΗ- INTERNET. Τεχνολογίες Τηλεκπαίδευσης & Εφαρµογές - Ιούλιος 09 1 http://creativecommons.org/licenses/by-nc-nd/3.

Τεχνολογία TCP/IP ΙΑ ΙΚΤΥΩΣΗ- INTERNET. Τεχνολογίες Τηλεκπαίδευσης & Εφαρµογές - Ιούλιος 09 1 http://creativecommons.org/licenses/by-nc-nd/3. Τεχνολογία TCP/IP ΙΑ ΙΚΤΥΩΣΗ- INTERNET Εφαρµογές - Ιούλιος 09 1 Εισαγωγή στην τεχνολογία TCP/IP Τεχνολογία TCP/IP TCP/IP Πρωτόκολλα TCP/IP ή τεχνολογία TCP/IP ή τεχνολογία ιαδικτύου (Internet)( ιαδίκτυο

Διαβάστε περισσότερα

TEC510 Ανάπτυξη Δικτυακών Τόπων (Ε εξάμηνο) Διδάσκων: Ανδρέας Γιαννακουλόπουλος Επιστημονικός συνεργάτης Εργαστηρίου: Γιώργος Μηλιώτης

TEC510 Ανάπτυξη Δικτυακών Τόπων (Ε εξάμηνο) Διδάσκων: Ανδρέας Γιαννακουλόπουλος Επιστημονικός συνεργάτης Εργαστηρίου: Γιώργος Μηλιώτης TEC510 Ανάπτυξη Δικτυακών Τόπων (Ε εξάμηνο) Διδάσκων: Ανδρέας Γιαννακουλόπουλος Επιστημονικός συνεργάτης Εργαστηρίου: Γιώργος Μηλιώτης Χειμερινό εξάμηνο 2011-2012 Χρηματοδότηση Το παρόν εκπαιδευτικό υλικό

Διαβάστε περισσότερα

Εισαγωγή στην επιστήμη των υπολογιστών. Υλικό Υπολογιστών Κεφάλαιο 6ο ίκτυα υπολογιστών

Εισαγωγή στην επιστήμη των υπολογιστών. Υλικό Υπολογιστών Κεφάλαιο 6ο ίκτυα υπολογιστών Εισαγωγή στην επιστήμη των υπολογιστών Υλικό Υπολογιστών Κεφάλαιο 6ο ίκτυα υπολογιστών 1 ίκτυα μικρά και μεγάλα Ένα δίκτυο υπολογιστών (computer network) είναι ένας συνδυασμός συστημάτων (δηλαδή, υπολογιστών),

Διαβάστε περισσότερα

Δημοσίευση στο Διαδίκτυο

Δημοσίευση στο Διαδίκτυο ΕΣΔ200 Δημιουργία Περιεχομένου ΙI Δημοσίευση στο Διαδίκτυο Περιεχόμενα - Βιβλιογραφία Ενότητας Περιεχόμενα Εισαγωγή Δημοσίευση μιας ταινίας στο παγκόσμιο ιστό Βασικά στοιχεία HTML Τεχνικές δημιουργίας

Διαβάστε περισσότερα

Σχεδίαση και Ανάπτυξη Ιστότοπων

Σχεδίαση και Ανάπτυξη Ιστότοπων Σχεδίαση και Ανάπτυξη Ιστότοπων Ιστορική Εξέλιξη του Παγκόσμιου Ιστού Παρουσίαση 1 η 1 Βελώνης Γεώργιος Καθηγητής Περιεχόμενα Τι είναι το Διαδίκτυο Βασικές Υπηρεσίες Διαδικτύου Προηγμένες Υπηρεσίες Διαδικτύου

Διαβάστε περισσότερα

Υπερσυνδέσεις (hyperlinks)

Υπερσυνδέσεις (hyperlinks) Υπερσυνδέσεις (hyperlinks) Οι υπερσυνδέσεις αποτελούν το δυναμικό στοιχείο σε ένα έγγραφο html. Με τις υπερσυνδέσεις είναι δυνατή, εύκολη και γρήγορη η μετάβαση ή η παραπομπή από ένα αρχείο html (πηγή)

Διαβάστε περισσότερα

TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο)

TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο) TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο) Διδάσκων: Ανδρέας Γιαννακουλόπουλος Επιστημονικός συνεργάτης Εργαστηρίου: Στέλλα Λάμπουρα Εαρινό εξάμηνο Χρηματοδότηση Το παρόν εκπαιδευτικό υλικό έχει αναπτυχθεί

Διαβάστε περισσότερα