[Α.10 και Α.11] Διεπαφή Εφαρμογής Παγκόσμιου Ιστού (Front-End Programming) ΥΛΙΚΟ ΠΡΟΣ ΜΕΛΕΤΗ

Transcript

1 [Α.10 και Α.11] Διεπαφή Εφαρμογής Παγκόσμιου Ιστού (Front-End Programming) ΥΛΙΚΟ ΠΡΟΣ ΜΕΛΕΤΗ

2 ΠΕΡΙΕΧΟΜΕΝΑ ΕΥΡΕΤΗΡΙΟ (CTRL + κλικ για μετάβαση)

3 [Α.10 και Α.11] Διεπαφή Εφαρμογής Παγκόσμιου Ιστού (Front-End Programming) Στο πλαίσιο των δύο αυτών επιμορφωτικών συναντήσεων θα παρουσιαστούν συνοπτικά σύγχρονες τεχνολογίες και περιβάλλοντα που υποστηρίζουν τον προγραμματισμό διεπαφών για εφαρμογές του Παγκόσμιου Ιστού. Εκπαιδευτικοί Στόχοι Οι αντικειμενικοί στόχοι της ενότητας αυτής είναι: 1) Η ενημέρωση των καθηγητών πληροφορικής για τις νέες τεχνολογίες αναπτυξης DHTML διεπαφών εφαρμογών Παγκόσμιου Ιστού. (α) Cascade Style Sheets (CSS) (β) Javascript (γ) Document Object Model (DOM) 2) Η εξοικείωση των καθηγητών πληροφορικής με τις προαναφερθείσες τεχνολογίες. 3) Η ανάπτυξη δεξιοτήτων προγραμματισμού σχετικών με τις προαναφερθήσες τεχνολογίες. 4) H παρακίνηση των καθηγητών πληροφορικής για περεταίρω μελέτη όσον αφορά στις προαναφερθήσες τεχνολογίες.

4 ΑΠΑΙΤΟΥΜΕΝΗ ΥΠΟΔΟΜΗ - ΟΔΗΓΙΕΣ Η αξιοποίηση του εκπαιδευτικού υλικού στο εργαστήριο ή στο σπίτι προϋποθέτει τα παρακάτω: 1) Στοιχειώδεις γνώσεις HTML. 2) Χρήση Η/Υ με πρόσβαση στο διαδίκτυο. 3) Σχετικά πρόσφατες εκδόσεις φυλλομετρητών σελίδων διαδικτύου (Internet Explorer ή Netscape) με δυνατότητες εκτέλεσης client-side σεναρίων Javascript ή Jscript. ΕΙΣΑΓΩΓΗ στο ΓΝΩΣΤΙΚΟ ΑΝΤΙΚΕΙΜΕΝΟ Στόχος των δύο αυτών ενοτήτων είναι η παρουσίαση σύγχρονων τεχνολογιών προγραμματισμού διεπαφών για εφαρμογές του Παγκόσμιου Ιστού. Ο όρος που χρησιμοποιείται σήμερα για την γενική αναφορά στο σύνολο αυτών των τεχνολογιών είναι Dynamic HTML ή εν συντομία DHTML. Απώτερος σκοπός αυτού του συνόλου τεχνολογιών είναι ο προγραμματισμός διαδραστικών διεπαφών για εφαρμογές του Παγκόσμιου Ιστού χρησιμοποιώντας ένα συνδυασμό των παρακάτω: 1. Μιας στατικής markup γλώσσας κειμένου όπως η HTML. 2. Μιας γλώσσας καθορισμού στυλ παρουσίασης ιστοσελίδων (cascading style sheets, εν συντομία CSS). 3. Μιας client-side γλώσσας περιγραφής σεναρίων (client-side scripting language) όπως η Javascript. 4. Ενός μοντέλου αντικειμένων για ιστοσελίδες κειμένου (HTML Document Object Model, εν συντομία DOM).

5 Γενικά ο τρόπος παρουσίασης και τα περιεχόμενά μιας DHTML ιστοσελίδας μεταβάλλονται δυναμικά αφού αυτή έχει φορτωθεί πλήρως στον browser του χρήστη. Η δυναμική αναπροσαρμογή της ιστοσελίδας γίνεται μέσω της χρήσης client-side σεναρίων και λειτουργιών του DOM, που δίνουν πρόσβαση σε ένα σύνολο από ιδιότητες που χαρακτηρίζουν τον browser και τα επιμέρους συνθετικά της ιστοσελίδας (π.χ. σώμα ιστοσελίδας, φόρμες, πίνακες κλπ.). Πιο συγκεκριμένα, ο browser καθώς και τα επιμέρους συνθετικά στοιχεία της ιστοσελίδας λογίζονται ως αντικείμενα που ανάλογα με το είδους τους ανήκουν σε κάποια συγκεκριμένη κλάση (π.χ. Window, Document, Frame, Table, κλπ.). Σύμφωνα με το DOM κάθε κλάση προσφέρει ένα σύνολο λειτουργιών μέσω του οποίου όπως προαναφέρθηκε δίδεται πρόσβαση στις ιδιότητες των αντικειμένων. Το πώς και το πότε αναπροσαρμόζονται τα αντικείμενα καθορίζεται από ενέργειες του χρήστη από τις οποίες προκύπτουν δεδομένα (π.χ. εισαγωγή δεδομένων σε μια φόρμα ή ένα πίνακα) και γεγονότα (π.χ. πάτημα κουμπιού, μετακίνηση ποντικιού) τα οποία επεξεργάζεται κάποιο client-side σενάριο. Με άλλα λόγια ένα σενάριο μπορούμε είναι ένα πρόγραμμα το οποίο επεξεργάζεται τα δεδομένα και τα γεγονότα που προκύπτουν από τις ενέργειες του χρήστη. Η επεξεργασία αυτή εμπεριέχει την κλήση λειτουργιών στα επιμέρους αντικείμενα που αποτελούν την ιστοσελίδα. Η κατασκευή DHTML διεπαφών για εφαρμογές του Παγκόσμιου Ιστού εν γένει δεν απαιτεί τη χρήση ειδικών εργαλείων. Πιο συγκεκριμένα, η συγγραφή DHTML ιστοσελίδων, CSS στυλ και client-side σεναρίων μπορεί να γίνει χρησιμοποιώντας ένα οποιοδήποτε κειμενογράφο. Παρόλα αυτά υπάρχουν αρκετά εργαλεία που υποβοηθούν την ανάπτυξη των προαναφερθέντων. Πολλά από αυτά τα εργαλεία είναι εμπορικά όπως για παράδειγμα τα Microsoft FrontPage, DreamWeaver. Άλλα πάλι είναι εργαλεία ελεύθερου λογισμικού όπως για παράδειγμα τα NVU, Joomla και JSEclipse. Στη συνέχεια του εγχειριδίου θα γίνεται αναφορά στο εργαλείο NVU.

6 Το παρόν εγχειρίδιο προϋποθέτει βασικές γνώσεις HTML και αποτελείται από τρία επιμέρους κεφάλαια. Στο πρώτο κεφάλαιο αναλύεται το CSS. Στο δεύτερο κεφάλαιο γίνεται αναφορά στις client-side γλώσσες περιγραφής σεναρίων και πιο συγκεκριμένα στην Javascript. Τέλος στο τρίτο κεφάλαιο γίνεται αναφορά στο DOM. 1. C a s c a d e S t y l e S h e e t s - C S S Κεφάλαιο 1o Μορφοποίηση στυλ ιστοσελίδων Ενότητα 1.1. Το πρότυπο CSS Το πρότυπο CSS (Cascading Style Sheets ή Επικαλυπτόμενα Φύλλα Στυλ) τυποποιήθηκε από το W3C προκειμένου να ορίσει θέματα που αφορούν στην παρουσίαση / μορφοποίηση ενός εγγράφου γραμμένο σε γλώσσα σήμανσης υπερκειμένου (markup language). Σύμφωνα με τον ορισμό της W3C ( το CSS είναι ένας μηχανισμός για να προσθέσουμε στυλ σε ένα web έγγραφο. Ειδικότερα, τo CSS χρησιμοποιείται για να βοηθήσει τους συντάκτες και τους αναγνώστες web εγγράφων να ορίσουν με σαφήνεια θέματα που αφορούν σε χρώματα, γραμματοσειρές, στήσιμο (layout), εφέ απεικόνισης, εμφάνιση σε διάφορα μέσα εισόδου / εξόδου και ό,τι σχετίζεται με την παρουσίαση ενός web εγγράφου. Ταυτόχρονα, διαχωρίζει τα θέματα παρουσίασης του περιεχομένου από το ίδιο το περιεχόμενο. Γενικεύοντας, μπορούμε να πούμε πως οι γλώσσες περιγραφής στυλ (το CSS είναι μια από τις πιο δεδομένες) και οι markup γλώσσες (π.χ. HTML, XHTML, XML) συνεργάζονται για να περιγράψουν το περιεχόμενο και την εμφάνιση αντίστοιχα των web εγγράφων. Σήμερα, τo πρότυπο CSS (έκδοση CSS2, 1998) υποστηρίζεται από όλους τους διαδεδομένους φυλλομετρητές (web browsers). Στις επόμενες ενότητες του κεφαλαίου θα αναφερθούμε αναλυτικά στα παρακάτω θέματα: 1. Πλεονεκτήματα χρήσης CSS.

7 2. Χρήση CSS, με έμφαση : στο συντακτικό του στην έννοια της κληρονομικότητας στην εφαρμογή των φύλλων στυλ στην επικάλυψη κανόνων στυλ στην υποστήριξη διαρετικών τύπων μέσων αναπαράστασης 3. CSS ιδιότητες. 4. Υποστήριξη CSS στο εργαλείο NVU. Αν και το πρότυπο CSS εφαρμόζεται σε διάφορες markup γλώσσες, στις παρακάτω ενότητες θα χρησιμοποιήσουμε τη γλώσσα HTML για να αναφερθούμε πιο συγκεκριμένα σε θέματα μορφοποίησης web εγγράφων Πλεονεκτήματα χρήσης CSS Το πρότυπο CSS εισάγει ουσιαστικά οφέλη στον σχεδιασμό web εγγράφων: Διαχωρίζει το περιεχόμενο από την παρουσίαση με αποτέλεσμα να απλοποιείται η διαδικασία σχεδίασης. Κάθε web έγγραφο αποτελείται από δύο ανεξάρτητα μέρη: το περιεχόμενο και το στυλ. Τα δύο αυτά μέρη αναπτύσσονται ανεξάρτητα. Διαθέτοντας ήδη το στυλ που θα εφαρμοστεί σε έναν δικτυακό τόπο, ο συντάκτης της ιστοσελίδας μπορεί να ασχοληθεί αποκλειστικά με την οργάνωση του υλικού. Αντίστροφα, ένα νέο ή ένα τροποποιημένο στυλ μπορεί να συσχετιστεί με το ήδη υπάρχον περιεχόμενο του δικτυακού τόπου, χωρίς να χρειαστεί να ξανασχεδιαστούν οι ιστοσελίδες. Επιτρέπει την επαναχρησιμοποίηση τόσο του στυλ όσο και του περιεχομένου. Παράγει επεκτάσιμους κανόνες μορφοποίησης του στυλ των εγγράφων. Μειώνει την πολυπλοκότητα των παραγόμενων web εγγράφων. Σε σχέση με την ξεπερασμένη πρακτική ορισμού στοιχείων στυλ μέσα από την ίδια τη markup γλώσσα, τυποποιεί με σαφήνεια και ευελιξία τα θέματα που αφορούν στην παρουσίαση του εγγράφου. Επιτρέπει αποτελεσματικό έλεγχο και ευελιξία στην εμφάνιση, μορφοποίηση και στήσιμο των εγγράφων. Επιτρέπει τον έλεγχο της παρουσίασης πολλαπλών εγγράφων από ένα (ή περισσότερα) ανεξάρτητα στυλ. Διευκολύνει την πρόσβαση στο πραγματικό περιεχόμενο των εγγράφων.

8 Επιτρέπει την παρουσίαση του ίδιου περιεχομένου με διαφορετικό τρόπο, ανάλογα με τη φύση της συσκευής του χρήστη (π.χ. οθόνη υπολογιστή, εκτυπωτής, κινητό τηλέφωνο, browser που συνθέτει και εκφωνεί λόγο, συσκευές Braille κλπ). Με αυτό τον τρόπο διαχωρίζει τη σχεδίαση του περιεχομένου από τις συσκευές. Επιτρέπει την παρουσίαση του ίδιου περιεχομένου με διαφορετικό τρόπο, ανάλογα με τις προτιμήσεις του χρήστη. Αποτρέπει τον άσκοπο ορισμό νέων, μη τυποποιημένων HTML ετικετών προκειμένου να αποδώσει συγκεκριμένο στυλ στο περιεχόμενο. Ενότητα 1.2. Χρησιμοποιώντας το CSS Συντακτικό CSS Κάθε CSS κανόνας ορίζει μια συγκεκριμένη άποψη του στυλ ενός ή περισσότερων στοιχείων. O κανόνας περιέχει ζευγάρια από δύο δομικά στοιχεία: τον επιλογέα (selector), δηλαδή ένα προσδιοριστικό (π.χ. ένα HTML tag) που καθορίζει τα στοιχεία εκείνα του web εγγράφου στα οποία εφαρμόζεται ο κανόνας τη δήλωση (declaration), δηλαδή την ιδιότητα (property) και την τιμή (value) του επιλογέα. Στη γενική του μορφή, κάθε CSS κανόνας έχει την μορφή: επιλογέας {ιδιότητα: τιμή;} Επίσης, ένας κανόνας μπορεί να περιλαμβάνει περισσότερες από μια δηλώσεις ή να αναφέρεται σε περισσότερους από έναν επιλογείς. επιλογέας {ιδιότητα1: τιμή1; iδιότητα2: τιμή2} επιλογέας1, επιλογέας2 {ιδιότητα: τιμή} Ο CSS κανόνας του παρακάτω παραδείγματος ορίζει το χρώμα όλων των επικεφαλίδων πρώτου επιπέδου (h1). h1 {color: red} Το πρότυπο CSS ορίζει με σαφήνεια τις ιδιότητες και τις αντίστοιχες τιμές που μπορούν να πάρουν. (βλ. ενότητα 1.3).

9 Σχετικά με το πρώτο συστατικό κάθε κανόνα, ένας επιλογέας προσδιορίζει τα στοιχεία εκείνα που έχουν συγκεκριμένες ιδιότητες και στη γενική περίπτωση μπορεί να είναι ένας συνδυασμός από: Τύπος Ψευδοκλάση (pseudo-class) Ψευδοστοιχείο (pseudo-element) Ας δούμε μερικά παραδείγματα, προκειμένου να γίνει κατανοητή η ευελιξία ορισμού επιλογέων. p {margin-left: 100px;} Στο παράδειγμα αυτό, ο επιλογέας βασίζεται στον τύπο (HTML tag) των στοιχείων. Ο κανόνας εφαρμόζεται σε όλα τα στοιχεία με HTML tag <p> του web εγγράφου ορίζοντας το πλάτος του αριστερού διάκενου..info { color: gray; font-weight: bold;

10 } Στην περίπτωση της ψευδοκλάσης, ο επιλογέας.myclass προσδιορίζει το σύνολο των στοιχείων της κλάσης myclass του web εγγράφου. Έτσι, ο κανόνας με επιλογέα.info θα αλλάξει το χρώμα και το βάρος της γραμματοσειράς για τα στοιχεία <div class= info > και <em class= info > του web εγγράφου. Οι ψευδοκλάσεις χρησιμοποιούνται για να ομαδοποιήσουμε το στυλ ορισμένων στοιχείων του web εγγράφου. Επίσης, το πρότυπο CSS ορίζει κάποιες έτοιμες ψευδοκλάσεις, όπως visited, hover, first-line κλπ (βλ. ενότητα 1.3). #footer {background-color: gray;} Τέλος, ο κανόνας με επιλογέα #footer θα αλλάξει το χρώμα φόντου του στοιχείου <div id= footer >. Στην περίπτωση του ψευδοστοιχείου, ο επιλογέας #id αναφέρεται σε ένα μόνο στοιχείο του web εγγράφου με συγκεκριμένο αναγνωριστικό. Συνδυάζοντας τα παραπάνω δομικά στοιχεία, μπορεί κανείς να ορίσει πιο εξελιγμένους και συγκεκριμένους επιλογείς. Για παράδειγμα: a:visited {text-decoration: underline;} a:hover {background: cyan;} #footer a:link {text-decoration: underline;} em.info {color: red;} Ο πρώτος κανόνας υπογραμμίζει όλους τους συνδέσμους της σελίδας που έχει ήδη επισκεφτεί ο χρήστης. Ο δεύτερος τροποποιεί το χρώμα του φόντου των συνδέσμων όταν ο δείκτης του ποντικιού περνάει πάνω τους. Ο επόμενος κανόνας υπογραμμίζει όλους τους συνδέσμους που βρίσκονται μέσα στην ενότητα με id footer. Τέλος, ο τελευταίος κανόνας αλλάζει το χρώμα των στοιχείων με <em> tag και κλάση info Η έννοια της κληρονομικότητας Κάθε HTML σελίδα μπορεί να απεικονίσει τη δομή της σε μια δεντρική διάταξη, όπου ρίζα του δέντρου είναι το στοιχείο με tag <html>. Διατρέχοντας τη δεντρική δομή από τη ρίζα προς τα φύλλα, μπορεί κανείς να κατέβει από τα στοιχεία «πρόγονοι» στα στοιχεία «απόγονοι».

11 Στο παράδειγμα που ακολουθεί, απεικονίζεται η δεντρική ιεραρχία μιας HTML σελίδας. <html> <title> Client-side web design </TITLE> <body> <h1> Προγραμματισμός web σελίδων</h1> <p>η ενότητα περιλαμβάνει τα παρακάτω κεφάλαια:</p> <ul> <li>css </li> <li>javascript</li> <li>dom</li> </li> </body> </html> Το πρότυπο CSS αξιοποιεί την δεντρική δομή των HTML σελίδων (και γενικότερα των web εγγράφων), μεταφέροντας ιδιότητες του στυλ ενός προγόνου στο υποδέντρο των απογόνων του. Με αυτό τον τρόπο, εισάγεται η έννοια της κληρονομικότητας χαρακτηριστικών του στυλ. Ωστόσο, κάποιες από τις ιδιότητες του CSS δεν κληρονομούνται. Οι πίνακες των CSS ιδιοτήτων της ενότητας 1.3 συμπεριλαμβάνουν αυτή την πληροφορία. Επιστρέφοντας στο παράδειγμα, το φύλλο στυλ που περιέχει τον κανόνα: body: {color: green;} ορίζει όχι μόνο το χρώμα του στοιχείου <body> αλλά και των στοιχείων <h1>, <p>, <ul> και <li>. Αν ωστόσο ο σχεδιαστής της σελίδας θελήσει να διαφοροποιήσει π.χ. το στυλ του στοιχείου <p>, μπορεί να το κάνει εισάγοντας νέο κανόνα στο φύλλο στυλ: p: {color: gray;} Οι κανόνες στυλ που ορίζονται σε συγκεκριμένα στοιχεία υπερισχύουν των κανόνων που κληρονομούνται από τους απογόνους, Αξιοποιώντας αυτό το χαρακτηριστικό, ο σχεδιαστής σχεδιάζει κανόνες στο επίπεδο των «κοινών προγόνων» και δημιουργεί αποδοτικά στυλ για τις σελίδες του.

12 Εφαρμογή των φύλλων στυλ Έχοντας παρουσιάσει τις βασικές έννοιες του προτύπου CSS και το συντακτικό ορισμού των κανόνων του, είναι ώρα να εξετάσουμε τις δυνατότητες εφαρμογής των κανόνων στυλ στα web έγγραφα. Υπάρχουν τρεις τέτοιες μέθοδοι, οι οποίες περιγράφονται στη συνέχεια. Από αυτές, μόνο η τρίτη μέθοδος προχωρά στον πλήρη διαχωρισμό του περιεχομένου από την παρουσίαση του περιεχομένου Μορφοποίηση με ένθετο στυλ Χρησιμοποιώντας την HTML ιδιότητα (attribute) style, ο σχεδιαστής του εγγράφου μπορεί να αποδώσει χαρακτηριστικά στυλ σε ένα μόνο στοιχείο του εγγράφου με κάθε κανόνα. <html> <head> <title>μορφοποίηση με ένθετο στυλ</title> </head>

13 <body style="background-color: gray;"> <p>μορφοποίηση σελίδας</p> </body> </html> Είναι προφανής η δυσκολία σχεδίασης και συντήρησης του στυλ ενός εγγράφου με ένθετο στυλ, ακόμη κι αν πρόκειται για σχετικά μικρά ή απλά έγγραφα Μορφοποίηση με ενσωματωμένο στυλ Χρησιμοποιώντας την HTML ετικέτα (tag) style, ο σχεδιαστής του εγγράφου μπορεί να αποδώσει χαρακτηριστικά στυλ σε ένα έγγραφο. Η ετικέτα <style> τοποθετείται μέσα στην ενότητα <head> </head>.

14 <html> <head> <title>μορφοποίηση με ενσωματωμένο στυλ</title> <style type="text/css"> body {background-color: gray;}

15 h1 {color: blue;} </style> </head> <body> <p>μορφοποίηση σελίδας</p>

16 </body> </html> Οι κανόνες μορφοποίησης μιας σελίδας είναι συγκεντρωμένοι σε ένα σημείο της σελίδας, ωστόσο κάθε σελίδα πρέπει να ορίζει και να διατηρεί το δικό της στυλ. Επίσης, δεν είναι δυνατή η τροποποίηση του στυλ κάποιου συγκεκριμένου στοιχείου για το οποίο υπάρχει σχετικός κανόνας στην ενότητα <style> </style>, εκτός αν χρησιμοποιηθεί ένθετο στυλ για το συγκεκριμένο στοιχείο με τα αντίστοιχα όμως μειονεκτήματα Μορφοποίηση με στυλ που ορίζεται σε εξωτερικό αρχείο Ο ορισμός των κανόνων μορφοποίησης σε εξωτερικό αρχείο φύλλου στυλ (με επέκταση.css) προάγει την αναγνωσιμότητα, επεκτασιμότητα, ευκολία συντήρησης και επαναχρησιμοποίησή τους. Ένα αρχείο φύλλου στυλ μπορεί να μορφοποιήσει πολλά web έγγραφα. Το εξωτερικό αρχείο φύλλου στυλ (π.χ. mystyle.css) συνδέεται με την HTML σελίδα ως εξής: <link rel="stylesheet" type="text/css" href="style.css" />

17 Η παραπάνω γραμμή εισάγεται μέσα στην ενότητα <head> </head> της HTML σελίδας. Με τον ίδιο τρόπο, ο συντάκτης ενός web εγγράφου μπορεί να συνδέσει περισσότερα του ενός αρχεία φύλλου στυλ για να μορφοποιήσει το έγγραφό του. Σε αυτή την περίπτωση, η σύνδεση από το web έγγραφο μοιάζει ως εξής: <link rel="stylesheet" type="text/css" href="basicstyle.css" /> <link rel="alternate stylesheet" type="text/css" href="extrastyle.css" /> Όταν φορτώνεται η σελίδα στον φυλλομετρητή, εφαρμόζεται το στυλ του φύλλου basicstyle. Στη συνέχεια και εφόσον ο φυλλομετρητής το υποστηρίζει, προτείνεται στο χρήστη το εναλλακτικό στυλ του φύλλου extrastyle. Τα εξωτερικά αρχεία φύλλου στυλ επιτρέπουν επίσης στους χρήστες των δικτυακών τόπων να χρησιμοποιήσουν κανόνες στυλ της προτίμησής τους (δικούς τους ή εκ των προτέρων ενσωματωμένους στον φυλλομετρητή) αξιοποιώντας την αντίστοιχη ιδιότητα του φυλλομετρητή. Με αυτό τον τρόπο, δίνεται η δυνατότητα στους χρήστες να παρακάμπτουν ή να τροποποιούν το στυλ του συντάκτη. Για παράδειγμα, ο χρήστης δημιουργεί τοπικά ένα.css αρχείο και ορίζει τις προτιμήσεις του για κάποια θέματα μορφοποίησης, δηλώνοντας με!important ότι αυτές υπερισχύουν από το στυλ που έχει ορίσει ο συντάκτης. h1: {color: white;background: green!important} Τέλος, ο σχεδιαστής ενός φύλλου στυλ μπορεί να ενσωματώσει εξωτερικά φύλλα στυλ στο δικό του ορίζοντας μέσα στο φύλλο στυλ έναν πριν τους κανόνες url("print.css") Επικάλυψη κανόνων στυλ

18 Στην πράξη, οι τρεις μέθοδοι εφαρμογής κανόνων στυλ μπορεί να συνυπάρχουν σε ένα web έγγραφο. Για παράδειγμα, είναι συνηθισμένη πρακτική να χρησιμοποιούνται ενσωματωμένοι κανόνες στυλ ως επέκταση ή τροποποίηση του γενικού στυλ που ορίζεται στους κανόνες του εξωτερικού αρχείου. Είναι προφανές ότι σε ένα τέτοιο περιβάλλον υπάρχει ένας σημαντικός βαθμός επικάλυψης των κανόνων. Προκειμένου το αποτέλεσμα της μορφοποίησης να είναι συγκεκριμένο και κατανοητό, το πρότυπο CSS ορίζει μια αυστηρή προτεραιότητα με κανόνες επίλυσης διαφορών στην εφαρμογή των στυλ που προσομοιάζει τον καταρράκτη (cascade): Αρχικά εφαρμόζονται οι κανόνες που ορίζονται σε εξωτερικό φύλλο στυλ. Ακολουθεί η εφαρμογή των ενσωματωμένων κανόνων στυλ. Σε περίπτωση επικάλυψης, υπερισχύουν έναντι όλων των κανόνων που έχουν ήδη εφαρμοστεί. Οι κανόνες του ένθετου στυλ υπερισχύουν των κανόνων ενσωματωμένου στυλ (και επομένως και των εξωτερικών) και εφαρμόζονται στο επόμενο βήμα. Τέλος, οι κανόνες που μαρκάρονται ως!imporant υπερισχύουν των κανόνων ένθετου στυλ (και επομένως όλων των υπολοίπων) και εφαρμόζονται τελευταίοι. Όπως αναφέρθηκε στην προηγούμενη παράγραφο, ένας κανόνας!important ορισμένος από το χρήστη υπερισχύει όλων των κανόνων του σχεδιαστή, ακόμη κι αν πρόκειται για!important κανόνα του σχεδιαστή. Όταν επιπλέον προκύπτουν διαφορές με κανόνες που προέρχονται από το φυλλομετρητή, το χρήστη και το σχεδιαστή, το μοντέλο «καταρράκτη» του CSS ορίζει τα εξής: Αρχικά εφαρμόζονται οι κανόνες του φυλλομετρητή. Ακολουθούν οι κανόνες του χρήστη. Τέλος, οι κανόνες του σχεδιαστή της σελίδας (με εξαίρεση τους κανόνες!imporant του χρήστη που υπερισχύουν). Θέματα επίλυσης διαφορών στην εφαρμογή των κανόνων προκύπτουν επίσης από τα στυλ που κληρονομούνται. Όπως ήδη αναφέρθηκε, το CSS ορίζει ότι υπερισχύουν οι συγκεκριμένοι κανόνες που ορίζονται για ένα στοιχείο έναντι αυτών που κληρονομούνται από τους «προγόνους» του. Τέλος, σε περίπτωση που προκύψουν διαφορές από συγκρουόμενους κανόνες που προέρχονται από την ίδια πηγή προέλευσης, π.χ. από εξωτερικό φύλλο στυλ, όπως: h1: {color: red;} h1: {color: green;}

19 υπερισχύει ο τελευταίος που αναφέρεται στη λίστα. Το πρότυπο CSS ορίζει ότι η τεχνική επίλυσης διαφορών για την εφαρμογή κανόνων στυλ βασίζεται σε υπολογισμό βαρών για κάθε κανόνα, ώστε να εφαρμόζεται ο «βαρύτερος» όταν ο φυλλομετρητής μορφοποιεί ένα στοιχείο της σελίδας Υποστήριξη διαφορετικών τύπων μέσων αναπαράστασης Μια σημαντική δυνατότητα που προσφέρει το πρότυπο CSS είναι ότι μπορεί να προσδιορίσει διαφορετικό στυλ ανάλογα με το μέσο αναπαράστασης που χρησιμοποιεί ο χρήστης (οθόνη, εκτυπωτής, συσκευή σύνθεσης ομιλίας κλπ). Ενδεικτικά αναφέρονται ορισμένα CSS media types που χρησιμοποιούν οι σχεδιαστές φύλλων CSS: screen, print, handheld, tv, speech, braille, all. Το τελευταίο ομαδοποιεί όλα τα μέσα αναπαράστασης. Κάποιες ιδιότητες στυλ μπορούν να αφορούν συγκεκριμένα μέσα μόνο (π.χ. η ιδιότητα volume αφορά συσκευές σύνθεσης ομιλίας ) ή να απαιτούν διαφορετικές τιμές ανάλογα με το μέσο (π.χ. η απεικόνιση στην οθόνη απαιτεί συνήθως μεγαλύτερες γραμματοσειρές σε σχέση με την εκτύπωση στο χαρτί). κανόνας ορισμένος μέσα στο φύλλο στυλ καθορίζει τα μέσα αναπαράστασης για ένα σύνολο κανόνων στυλ ως print { body {font-size: 10pt;} screen { body {font-size: 12pt;} screen, print { body {line-height: 1.2;} } Για να αξιοποιήσει τους ο σχεδιαστής τροποποιεί αντίστοιχα τον σύνδεσμο του web εγγράφου προς το φύλλο στυλ ως εξής: <link rel="stylesheet" type="text/css" media= print, screen href="style.css" />

20 Ενότητα 1.3. Πίνακες ιδιοτήτων CSS Η ενότητα συνοψίζει σε ομάδες τις πιο βασικές ιδιότητες στυλ, τις αποδεκτές τιμές τους και ένδειξη για το ποιες από αυτές κληρονομούνται στο υποδέντρο των απογόνων, όπως αυτά ορίζονται από το πρότυπο CSS. Επίσης, παρουσιάζει σχετικά παραδείγματα Ιδιότητες γραμματοσειρών Οι ιδιότητες γραμματοσειρών αναφέρονται στην επιλογή της γραμματοσειράς, το μέγεθος της, το πάχος της και τις υπόλοιπες δυνατότητες μορφοποίησης τους. Ιδιότητα Αποδεκτές τιμές Παράδειγμα Κληρονομείται; font-family [font name or type] font-family: Verdana, Times New Roman ; Ναι font-style normal italic font-style:normal; Ναι font-variant normal small-caps font-variant:smallcaps; Ναι font-weight normal bold font-weight:bold; Ναι font-size [ xx-large x-large font-size:medium, large medium 14pt, 1em, 160%; small x-small xxsmall ] [ larger smaller ] percentage length font [ font-style fontvariant fontweight ]? font-size [ / line-height ]? font: bold 12pt Arial; Ναι Ναι

21 font-family Ιδιότητες χρωμάτων και φόντου Οι ιδιότητες χρωμάτων και φόντου αναφέρονται στις επιλογές μορφοποίησης του φόντου ενός εγγράφου. Ιδιότητα Αποδεκτές τιμές Παράδειγμα Κληρονομείται; color color color: red, #FFFF00 Ναι background-color color transparent background-color: yellow url none background-image: url(logo.jpg) Ναι Ναι repeat repeat-x background-repeat: Ναι repeat-y no-repeat no-repeat scroll fixed [ position length ] {1,2} [ top center bottom ] [ left center right ] backgroundimage backgroundrepeat backgroundattachment backgroundattachment: fixed Ναι backgroundposition backgroundposition: bottom Ναι left background transparent color background: silver Ναι url repeat scroll url(logo.jpg) repeaty position Ιδιότητες κειμένου Οι ιδιότητες κειμένου αναφέρονται στις επιλογές μορφοποίησης του κειμένου, όπως στοίχιση, υπογράμμιση κλπ. Ιδιότητα Αποδεκτές τιμές Παράδειγμα Κληρονομείται;

22 letter-spacing normal length letter-spacing:normal Ναι Όχι vertical-align sub super vertical-align:sub Όχι text-transform capitalize uppercase lowercase none text-decoration none underline overline linethrough textdecoration:underline texttransform:capitalize text-align left right center text-align:left justify text-indent length percentage line-height normal number length percentage text-indent:20px line-height:12pt Όχι Όχι Όχι Όχι Ιδιότητες πλαισίου Το CSS ορίζει ένα μοντέλο (box model) για να περιγράψει τα ορθογώνια πλαίσια που δημιουργούνται για κάθε HTML στοιχείο. Η γραφική αναπαράσταση του πλαισίου βοηθά στην κατανόηση των ιδιοτήτων πλαισίου και της σχετικής ορολογίας που χρησιμοποιείται από το CSS για να ορίσει κανόνες μορφοποίησης.

23 Σχήμα 1. Μοντέλο πλαισίου [4] Κάθε πλαίσιο έχει περιεχόμενο (content, π.χ. κείμενο, εικόνα) που προαιρετικά περιστοιχίζεται από μέσα προς τα έξω από ένα γέμισμα (padding), μια μπορντούρα (border) και ένα διαφανές περιθώριο (margin). Ιδιότητα Αποδεκτές τιμές Παράδειγμα Κληρονομείται; margin-top margin-right margin-bottom margin-left length percentage auto length percentage auto length percentage auto length percentage auto margin-top:5px margin-right:5px Όχι Όχι margin-bottom:1em Όχι margin-left:5pt Όχι

24 margin length percentage auto {1,4} margin: 10px 5px 10px 5px Όχι padding-top length percentage padding-top:10% Όχι padding-right padding-bottom padding-left padding border-top-width length percentage padding-right:15px Όχι Όχι length percentage padding-left:10pt; } Όχι length percentage {1,4} padding: 10px 10px Όχι 10px 15px border-left-width border-width length percentage paddingbottom:1.2em thin medium thick border-topwidth:thin length border-right-width thin medium thick border-rightwidth:medium length border-bottomwidth thin medium thick border-bottomwidth:thick length thin medium thick border-leftwidth:15px length thin medium thick border-width: 3px length {1,4} 5px 3px 5px border-right-color Color border-top-color color border-topcolor:navajowhite border-rightcolor:whitesmoke Όχι Όχι Όχι Όχι Όχι Όχι Όχι border-bottom- Color border-bottom- Όχι

25 color color:black border-color color {1,4} border-color: green red white blue; } border-top-style none solid double groove ridge inset outset border-right-style none solid double groove ridge inset outset none solid double groove ridge inset outset border-left-style none solid double groove ridge inset outset border-left-color Color border-leftcolor:#c0c0c0 border-topstyle:solid border-rightstyle:double border-bottomstyle border-bottomstyle:groove border-leftstyle:none Όχι Όχι Όχι Όχι Όχι Όχι border-style none solid double groove border-style:ridge; } Όχι ridge inset outset border-top border-width border-style border-color border-right border-width border-style border-color border-top: medium Όχι outset red border-right: thick inset maroon Όχι

26 border-bottom border-width border-style border-color border-left border-width border-style border-color border border-width border-style border-color border-bottom: 10px ridge gray border-left: 1px groove red border: thin solid blue Όχι Όχι Όχι float none left right float:none Όχι clear none left right both clear:left Όχι Ιδιότητες λίστας Οι ιδιότητες λίστας ορίζουν τις δυνατότητες μορφοποίησης μιας λίστας. Ιδιότητα Αποδεκτές τιμές Παράδειγμα Κληρονομείται; list-style-type disk circle square decimal lower-roman upper-roman lower-alpha list-styletype:decimal, lowerroman Ναι

27 upper-alpha none list-style-position inside outside list-style keyword position url list-style-image url none list-styleimage:url(bullet.gif) list-styleposition:inside list-style: square outside url(bullet.gif) Ναι Ναι Ναι Ιδιότητες τοποθέτησης Οι ιδιότητες τοποθέτησης ορίζουν τις δυνατότητες τοποθέτησης των στοιχείων ενός εγγράφου. Ιδιότητα clip Αποδεκτές τιμές Παράδειγμα Εφαρμόζεται σε shape auto clip:rect(0px 200px Όλα τα στοιχεία Όχι 200px 0px) height length auto height:200px <div>,<span> στοιχεία left length percentage auto left:0px overflow visible overflow:scroll hidden scroll auto position absolute relative Κληρονομείται; Όχι Όλα τα στοιχεία Όχι με position <> static Όλα τα στοιχεία Όχι position:absolute Όλα τα στοιχεία Όχι

28 static top length percentage auto visibility visible hidden inherit width length percentage auto top:0px visibility:visible width:80% Όλα τα στοιχεία Όχι με position <> static Όλα τα στοιχεία Όχι <div>,<span> στοιχεία Όχι z-index auto integer z-index:-1 Όλα τα στοιχεία Όχι με position <> static Ιδιότητες εκτύπωσης Οι ιδιότητες εκτύπωσης ορίζουν τις δυνατότητες εκτύπωσης. Ιδιότητα Αποδεκτές τιμές Παράδειγμα Κληρονομείται; page-breakbefore auto always left page-breakbefore:always right page-break-after auto always left page-breakbefore:auto right Ιδιότητες ψευδοκλάσεων Οι ιδιότητες ψευδοκλάσεων ορίζουν κλάσεις αντικειμένων που χρησιμοποιούνται συχνά στον σχεδιασμό ιστοσελίδων. Ιδιότητα Αποδεκτές τιμές Παράδειγμα Κληρονομείται; Όχι Όχι cursor auto crosshair { cursor:hand; } Ναι

29 active, hover, link, visited first-letter, firstline default hand move e-resize ne-resize nwresize n-resize se-resize swresize s-resize w-resize text wait help any font manipulating declaration a:hover { color:red; } Ναι p:first-letter { float:left;color:blue } Ενότητα 1.4. Υποστήριξη CSS στο εργαλείο NVU To VNU προφέρει βασικές λειτουργίες για την κατασκευή HTML ιστοσελίδων χωρίς να απαιτεί ιδιαίτερες γνώσεις HTML. Πιο συγκεκριμένα, μέσω της κύριας διεπαφής του εργαλείου ο χρήστης έχει την δυνατότητα να αναπτύξει μια ιστοσελίδα εισάγοντας έτοιμα στοιχεία που προσφέρει το εργαλείο όπως φόρμες, κουμπιά, περιοχές κειμένου, checkboxes, Κλπ. Στο σχήμα 2(α) δίνεται ένα παράδειγμα του πως μπορεί ο χρήστης να εισάγει οτιδήποτε HTML στοιχείο θέλει σε μια κενή ιστοσελίδα. Με χρήση του μενού Insert, ή Form μπορεί να εισάγει μια φόρμα, ένα link, μια περιοχή κειμένου, κουμπιά, ή οτιδήποτε άλλο θελήσει. Για οποιοδήποτε στοιχείο επιλέξει ο χρήστης προκύπτει ένα αντίστοιχο μενού στο οποίο ο χρήστης καθορίζει τις ιδιότητες του στοιχείου. Το εργαλείο NVU προσφέρει επίσης μια κονσόλα (CSS Editor) μέσω της οποίας ο χρήστης μπορεί να υλοποιήσει CSS κανόνες και να τους εφαρμόσει σε μια html σελίδα. Η κονσόλα λειτουργεί είτε σε Beginner Mode είτε σε Expert Mode. Η επιλογή ελέγχεται από αντίστοιχο πεδίο ελέγχου. Η διαφορά μεταξύ των δύο τρόπων λειτουργίας είναι ότι η σύνδεση με εξωτερικά αρχεία φύλλου στυλ είναι διαθέσιμη μόνο από το Expert Mode. Διευκρινίζεται ότι η κονσόλα CSS Editor δεν διαχειρίζεται τους ένθετους (inline) κανόνες. Μέσω

30 του CSS Editor δίνεται η δυνατότητα στο χρήστη να απενεργοποιήσει / ενεργοποιήσει την ομάδα των ενσωματωμένων κανόνων ή/και των κανόνων του εξωτερικού φύλλου στυλ επιλέγοντας το πλαίσιο Disabled προκειμένου να ελέγξει τους κανόνες μορφοποίησης που σχεδιάζει. Η δημιουργία ενσωματωμένων κανόνων γίνεται από το κουμπί Style elt. Αντίστοιχα, η σύνδεση με το εξωτερικό αρχείο φύλλου στυλ γίνεται με το κουμπί Link elt.. Και στις δύο περιπτώσεις, ο χρήστης μπορεί να δημιουργεί και να τροποποιεί κανόνες επιλέγοντας από τις διαθέσιμες επιλογές του εργαλείου τις αντίστοιχες CSS ιδιότητες (π.χ. letter-spacing) και δίνοντάς τους κατάλληλες τιμές (π.χ. 1 em). Επιπλέον, δίνεται η δυνατότητα τροποποίησης της σειράς των κανόνων όπως και διαγραφής τους. Στο Σχήμα 2(β) δίνεται ένα παράδειγμα στο οποίο χρησιμοποιούμε τον CSS Editor για να επεξεργαστούμε το στυλ μιας σελίδας, που απεικονίζεται στο αριστερό μέρος. O CSS Editor του παραδείγματος λειτουργεί σε Expert Mode. Όπως φαίνεται στο αριστερό τμήμα της κονσόλας, η συγκεκριμένη html σελίδα περιέχει ενσωματωμένους CSS κανόνες και εξωτερικό αρχείο φύλλου στυλ.

31 (α)

32 (β) Σχήμα 2.

33 2. Client-side γλώσσες περιγραφής σεναρίων - Javascript Κεφάλαιο 2ο Client-side γλώσσες περιγραφής σεναρίων Γενικά τα client-side σενάρια είναι μια κατηγορία προγραμμάτων που εκτελούνται στην πλευρά των χρηστών οι οποίοι επισκέπτονται κάποιο συγκεκριμένο Web site που προσφέρει αυτά τα προγράμματα σε συνδυασμό με τα περιεχόμενα του site (ιστοσελίδες). Η εκτέλεση των σεναρίων γίνεται από ένα πρόγραμμα που καλείται μηχανή εκτέλεσης σεναρίων. Το πρόγραμμα αυτό είναι ενσωματωμένο στο browser του εκάστοτε χρήστη. Ένα client-side σενάριο μπορεί να περιέχεται μέσα σε μια ιστοσελίδα του site. Επίσης είναι δυνατόν ένα client-side σενάριο να περιέχεται σε ένα ξεχωριστό αρχείο στο οποίο να αναφέρεται η ιστοσελίδα. Κατόπιν αιτήσεως του χρήστη στο Web server στον οποίο είναι εγκατεστημένο το site, όλα τα απαραίτητα αρχεία (η ιστοσελίδα που περιέχει ένα ή περισσότερα σενάρια, ή η ιστοσελίδα και τα αρχεία που περιέχουν τα σενάρια στα οποία αναφέρεται αυτή) φορτώνονται στο browser του χρήστη. Τα σενάρια εκτελούνται από τη μηχανή εκτέλεσης σεναρίων που είναι ενσωματωμένη στο browser και τα περιεχόμενα της ιστοσελίδας εμφανίζονται στο χρήστη μαζί με δεδομένα τα οποία πιθανόν προέκυψαν από την εκτέλεση των σεναρίων. Ένας περαιτέρω στόχος των client-side σεναρίων είναι η δυναμική αναπροσαρμογή και επεξεργασία των περιεχομένων της ιστοσελίδας που έχει φορτωθεί στο browser του χρήστη. Η αναπροσαρμογή γίνεται με βάση τα δεδομένα της ιστοσελίδας (που μπορεί να έχουν προκύψει από ένα server-side σενάριο) και ενέργειες του χρήστη από τις οποίες προκύπτουν δεδομένα (π.χ. εισαγωγή δεδομένων σε μια φόρμα ή ένα πίνακα) και γεγονότα (π.χ. πάτημα κουμπιού, μετακίνηση ποντικιού) που επεξεργάζεται ένα client-side σενάριο. Η αναπροσαρμογή της ιστοσελίδας συνήθως γίνεται χωρίς κάποια περαιτέρω επικοινωνία με το Web server στον οποίο είναι εγκαταστημένο το site.

34 Πριν προχωρήσουμε στην πιο αναλυτική παρουσίαση μιας ευρέως διαδεδομένης γλώσσας περιγραφής client-side σεναρίων είναι απαραίτητο να ξεκαθαρίσουμε τη διαφορά μεταξύ client-side και server-side σεναρίων. Εν αντιθέσει με τα client-side σενάρια τα serverside σενάρια εκτελούνται από το Web server στον οποίο είναι εγκατεστημένο το Web site. Στόχος των server-side σεναρίων είναι η δυναμική κατασκευή των περιεχομένων των ιστοσελίδων που κατόπιν φορτώνονται στο browser του χρήστη (π.χ. τα αποτελέσματα μιας αναζήτησης). Η κατασκευή των ιστοσελίδων γίνεται με βάση δεδομένα που είναι αποθηκευμένα στο site (π.χ. κατάλογος βιβλίων) και δεδομένα που (π.χ χαρακτηριστικά του χρήστη, προτιμήσεις, λέξεις κλειδιά για αναζήτηση) έχει αποστείλει προηγουμένως ο χρήστης στο Web server μέσω κάποιας αίτησης που προέκυψε κατά τη διάρκεια της επίσκεψης του χρήστη σε κάποια άλλη ιστοσελίδα του ιδίου site. Kάποιες ευρέως διαδεδομένες γλώσσες περιγραφής server-side σεναρίων που αξίζει να αναφερθούν ενδεικτικά είναι οι PHP, JSP, ASP. Αντίστοιχα ανάμεσα στις πλέον διαδεδομένες γλώσσες περιγραφής client-side σεναρίων ξεχωρίζει η Javascript στην οποία θα επικεντρωθεί το υπόλοιπο αυτού του κεφαλαίου. Πιο συγκεκριμένα, στις επόμενες ενότητες θα αναφερθούμε αναλυτικά στα παρακάτω θέματα: 1. Ορισμός και εκτέλεση σεναρίων Javascript. 2. Δεδομένα και μεταβλητές. 3. Τελεστές. 4. Εντολές συνθήκης. 5. Εντολές επανάληψης. 6. Συναρτήσεις. 7. Έτοιμες συναρτήσεις. 8. Υποστήριξη Javascript στο εργαλείο NVU.

35 Ενότητα 1.1. Ορισμός και εκτέλεση σεναρίων Javascript. Ο ορισμός ενός σεναρίου Javascript μέσα σε μια HTML ιστοσελίδα μπορεί να γίνει ανάμεσα σε ετικέτες <script language = javascript > </script> Γενικά, τα σενάρια εκτελούνται αμέσως μόλις μια ιστοσελίδα φορτωθεί σε ένα browser. Αυτό δεν είναι πάντα επιθυμητό. Σε αρκετές περιπτώσεις θέλουμε ένα σενάριο να εκτελείται όταν φορτωθεί η ιστοσελίδα, ενώ σε άλλες περιπτώσεις επιθυμούμε να εκτελείται όταν ο χρήστης κάνει κάποια ενέργεια (πάτημα κουμπιού, μετακίνηση ποντικιού). Στην πρώτη περίπτωση, τοποθετούμε τα σενάρια στο <body> </body> τμήμα της ιστοσελίδας. Στην δεύτερη περίπτωση τοποθετούμε τα σενάρια στο <head> </head> τμήμα της ιστοσελίδας. Παραδείγματα αυτών των δύο περιπτώσεων δίνονται παρακάτω: Σενάρια στο body. <html> <head> </head> <body> <script language="javascript">... </script> </body>

36 Σενάρια στο head <html> <head> <script language="javascript">... </script> </head> Όπως αναφέρθηκε προηγουμένως, τα σενάρια στο <head> </head> τμήμα της ιστοσελίδας εκτελούνται με βάση τις ενέργειες του χρήστη. Τα σενάρια αντιστοιχούν σε Javascript συναρτήσεις που περιγράφονται στο <head> </head> τμήμα της ιστοσελίδας. Η εκτέλεση των συναρτήσεων αυτών επιτυγχάνεται με τον καθορισμό των γεγονότων που αντιστοιχούν στις ενέργειες του χρήστη που μας ενδιαφέρουν και τη συσχέτιση των γεγονότων αυτών με τις συναρτήσεις που πρέπει να εκτελεστούν. Τα προηγούμενα καθορίζονται ανάμεσα σε ετικέτες HTML στοιχείων της ιστοσελίδας που προσφέρουν τη δυνατότητα στο χρήστη να ενεργήσει και κατά συνέπεια να παράγει ένα γεγονός το οποίο θα έχει ως αποτέλεσμα την εκτέλεση μιας συνάρτησης. Ένα παράδειγμα δίνεται πιο κάτω. Η συνάρτηση myfunction() ορίζεται στο <head> </head> τμήμα της ιστοσελίδας. Στη φόρμα που ακολουθεί συσχετίζεται το πάτημα του κουμπιού της φόρμας με τη συνάρτηση. Αποτέλεσμα των προηγουμένων είναι η εκτέλεση της συνάρτησης όταν ο χρήστης πατήσει το κουμπί της φόρμας.

37 <html> <head> <script language="javascript"> Function myfunction(){ alert("hello"); } </script> </head> <body> <form> <input type="button" onclick="myfunction()" value="call function"> </form> <p> Πατώντας το κουμπί καλείται η συνάρτηση myfunction. </p>

38 </body> </html> Ενότητα 1.2. Δεδομένα και Μεταβλητές. Οι βασικοί τύποι δεδομένων που μπορεί να διαχειριστεί κάποιος μέσω ενός σεναρίου Javascript είναι αριθμητικές τιμές (π.χ. 4, 3.14), αλφαριθμητικά (π.χ. hello world ) και λογικές τιμές true, false. Όσον αφορά στις αριθμητικές τιμές στη Javascript δεν γίνεται διάκριση μεταξύ ακεραίων και πραγματικών. Οι μεταβλητές σε ένα σενάριο Javascript είναι συμβολικά ονόματα με τα οποία μπορεί να γίνει αναφορά σε αριθμητικές τιμές, αλφαριθμητικά και λογικές τιμές. Μια μεταβλητή μπορεί να δηλωθεί χρησιμοποιώντας τη λέξη κλειδί var και το όνομα της μεταβλητής, ή ακόμα και χωρίς τη χρήση της λέξης κλειδί var. var x; var carname; Τιμές στις μεταβλητές αναθέτονται με τον τελεστή ανάθεσης =. x = 7; carname = lucile ; Τιμές μπορούν να ανατεθούν και κατά τη δήλωση των μεταβλητών. Αξίζει να αναφερθεί ότι σε μια μεταβλητή μπορεί να ανατεθούν τιμές οποιουδήποτε τύπου (αριθμητικές, λογικές, αλφαριθμητικά). var y = 19;

39 y = carim ; Στη Javascript υποστηρίζεται επίσης η δυνατότητα ορισμού πινάκων. var mycars = new Array(); mycars[0] = "Saab"; mycars[1] = "Volvo"; mycars[2] = "BMW"; Τέλος ο προσδιοριστής const στη δήλωση μιας μεταβλητής σημαίνει ότι η τιμή της μεταβλητής αυτής δεν επιτρέπεται να αλλάξει κατά τη διάρκεια εκτέλεσης του σεναρίου. Ενότητα 1.3. Τελεστές. Οι βασικοί τελεστές που υποστηρίζει η Javascript συνοψίζονται πιο κάτω. Μπορούν να χωριστούν σε 6 κατηγορίες: 1. Αριθμητικοί τελεστές. 2. Συγκριτικοί τελεστές. 3. Λογικοί τελεστές. 4. Δυαδικοί τελεστές. 5. Ειδικοί τελεστές. Αριθμητικοί τελεστές. Τελεστής Περιγραφή Χρήση

40 + Πρόσθεση δύο αριθμητικών var x = 2; τελεστέων ή συνένωση δύο αλφαριθμητικών. var y = 5; var z; z= x+y; var s = "Hello"+"World"; - Αφαίρεση δύο αριθμητικών z = x-7 τελεστέων. * Πολ/σμος δύο αριθμητικών z = 5*2 τελεστέων. / Διαίρεση δύο αριθμητικών z = y/x τελεστέων. % Υπόλοιπο διαίρεσης δύο z = 7%2 αριθμητικών τελεστέων. ++ Μοναδιαία αύξηση τελεστέου. var x=2; x++; y= ++x; y= x++; -- Μοναδιαία μείωση τελεστέου. x--; --x; Συγκριτικοί τελεστές.

41 Τελεστής Περιγραφή Χρήση = = Ισότητα μεταξύ τελεστέων. 3==8 -> false = == Ισότητα μεταξύ τελεστέων και var x=3; τύπων αυτών των τελεστέων var y="3"; x==y -> true x===y -> false < Μικρότερο. x<y <= Μικρότερο ή ίσο. 5<=x > Μεγαλύτερο. y>4 >= Μεγαλύτερο ή ίσο. x>=y Τελεστές Ανάθεσης Τελεστής Περιγραφή Χρήση = Απλή ανάθεση σε τελεστέο. y = x +3; += Προσθετική αύξηση και x += 4; <=> x = x + 4; ανάθεση σε τελεστέο. -= Αφαιρετική μείωση και x -= 4; <=> x = x - 4; ανάθεση σε τελεστέο. *= Πολλαπλασιαστική αύξηση και x *= 4; <=> x = x * 4; ανάθεση σε τελεστέο. /= Διαιρετική μείωση και ανάθεση x /= 4; <=> x = x / 4; σε τελεστέο..

42 Λογικοί Τελεστές. Τελεστής Περιγραφή Χρήση && Λογική Σύζευξη. (x<3 && y<=5) Λογικό Διάζευξη. (x<3 y<=5)! Λογική Άρνηση.!(x>3) Δυαδικοί Τελεστές. Τελεστής Περιγραφή Χρήση & Δυαδική Σύζευξη. x & y Δυαδική Διάζευξη. x y ^ Δυαδική Αποκλειστική x ^ y Διάζευξη. << Αριστερή Ολίσθηση. x >> 3 >> Δεξιά Ολίσθηση y << 4 Ειδικοί Τελεστές. Τελεστής Περιγραφή Χρήση Συνθήκη? Επιστρέφει Τιμή1 αν ισχύει η συνθήκη x=(y<0)? 5: 10 Τιμή1: ή Τιμή2 αν δεν ισχύει η συνθήκη. Τιμή2 typeof Επιστρέφει τον τύπο της τιμής του var x = hello ; τελεστέου στον οποίο εφαρμόζεται. typeof x; -> string number string

43 boolean Ενότητα 1.4. Εντολές Συνθήκης. Από άποψη συντακτικού, οι εντολές συνθήκης στη Javascript μοιάζουν κατά πολύ με αντίστοιχες εντολές άλλων γλωσσών προγραμματισμού όπως η C, C++ και Java. Γενικά όπως και στις προαναφερθείσες γλώσσες, έχουμε τη δυνατότητα να χρησιμοποιήσουμε εντολές if, if-else και switch. Συνοπτικά στον παρακάτω πίνακα περιγράφονται αυτές οι εντολές και δίδονται σύντομα παραδείγματα χρήσης τους. Εντολή Σύνταξη Χρήση if if (συνθήκη) { /* εντολές */ } if - else if (συνθήκη) { /* εντολές */ } else { /* εντολές */ } if (συνθήκη) { /*εντολές*/ <html> <body> <script language="javascript"> var d = new Date(); var time = d.gethours(); if (time<10) { document.write(

44 }else if(συνθήκη) { /*εντολές*/ }else{ /*εντολές*/ } "<b>good morning</b>"); } else if (time>=10 && time<16) { document.write( "<b>good day</b>"); } else { document.write( switch switch (expression) { "<b>hello World!</b>"); } </script> <p> This example demonstrates the if..else. </p> </body> </html> <html>

45 case τιμήl : /*εντολές*/ break; case τιμή2: /*εντολές */ break;... default : /*εντολές*/ } <body> <script language="javascript"> // You will receive a different // greeting based // on what day it is. var d=new Date(); theday=d.getday(); switch (theday) { case 5: document.write("finally Friday"); break; case 6: document.write("super Saturday"); break;

46 case 0: document.write("sleepy Sunday"); break; default: document.write( "I'm looking forward!"); } </script> </body> </html> Ενότητα 1.5. Εντολές Επανάληψης. Παρόμοια με τις εντολές συνθήκης, οι εντολές επανάληψης της Javascript μοιάζουν με αντίστοιχες εντολές άλλων γλωσσών προγραμματισμού όπως η C, C++ και Java. Γενικά υπάρχουν 3 είδη εντολών επανάληψης, for, while και do-while. Το συντακτικό κάθε μίας από αυτές παρουσιάζεται συνοπτικά στον παρακάτω πίνακα μαζί με σύντομα παραδείγματα χρήσης τους. Εντολή Σύνταξη Χρήση for for ( <html>

47 αρχική ανάθεση μεταβλητής; συνθήκη; αύξηση/μείωση μεταβλητής; <body> <script language="javascript"> var i=0; for (i=0;i<=10;i++) { document.write("the number is " + i); ) { document.write("<br />"); /*εντολές*/ } } </script> </body> </html> while while (συνθήκη) { <html> /*εντολές*/ } <body> <script language="javascript"> var i=0;

48 while (i<=10) { document.write("the number is " + i); document.write("<br />"); i=i+1; } </script> </body> </html> do-while do { <html> /*εντολές*/ } while(συνθήκη) <body> <script language="javascript"> var i=0; do {

49 document.write("the number is " + i); document.write("<br />"); i=i+1; } while (i<0); </script> </body> </html> Ενότητα 1.6. Συναρτήσεις. Μια συνάρτηση ορίζεται χρησιμοποιώντας τη λέξη κλειδί function. Εν συνεχεία ακολουθεί το όνομα της συνάρτησης και εντός παρενθέσεων μια λίστα παραμέτρων των οποίων τα ονόματα χωρίζονται με,. Αν η συνάρτηση δεν δέχεται κάποιες παραμέτρους τότε η λίστα που περιέχεται εντός παρενθέσεων είναι κενή. Τέλος ακολουθεί το μπλοκ εντολών της συνάρτησης εντός αγκίστρων. Ακολουθεί παράδειγμα συνάρτησης. function square(number) { return number * number; } Το μπλοκ εντολών μιας συνάρτησης εκτελείται όταν καλεστεί μια συνάρτηση με συγκεκριμένες τιμές για τις παραμέτρους της. square (5)

50 Μια συνάρτηση μπορεί να είναι αναδρομική, δηλαδή να καλεί τον εαυτό της. function factorial(n) { if ((n == 0) (n == 1)) return 1 else { var result = (n * factorial(n-1) ); return result } } // Μπορεί να καλεστεί όπως φαίνεται πιο κάτω: a=factorial(1) // returns 1 b=factorial(2) // returns 2 c=factorial(3) // returns 6 d=factorial(4) // returns 24 e=factorial(5) // returns 120 Μια συνάρτηση μπορεί να δέχεται σαν παράμετρο μια άλλη συνάρτηση η οποία εν συνεχεία καλείται στο μπλοκ εντολών της πρώτης. function map(f,a) { var result = new Array; for (var i = 0; i!= a.length; i++) result[i] = f(a[i]); return result; } //κλήση της συνάρτησης

51 Ενότητα 1.7. Έτοιμες Συναρτήσεις. map(function(x) {return x * x * x}, [0, 1, 2, 5, 10]); // επιστρέφει [0, 1, 8, 125, 1000]. Στον παρακάτω πίνακα παρουσιάζονται συνοπτικά διάφορες βοηθητικές συναρτήσεις που προσφέρει έτοιμες η Javascript καθώς και παραδείγματα χρήσης τους. Οι συναρτήσεις αυτές αφορούν στα παρακάτω επιμέρους θέματα: 1. Έλεγχος τύπου δεδομένων και μετατροπές από ένα τύπο δεδομένων σε ένα άλλο. 2. Αποτίμηση εκφράσεων. 3. Δημιουργία βοηθητικών παραθύρων. parseint(x, [radix]) Δέχεται σαν παράμετρο ένα αλφαριθμητικό και προσπαθεί να το μετατρέψει σε μια αντίστοιχη ακέραια αριθμητική τιμή. Παραδείγματα. parseint("3 chances") //returns 3 <!--[if!supportlinebreaknewline]--> <!--[endif]--> parseint(" 5 alive") //returns 5 <!--[if!supportlinebreaknewline]--> <!--[endif]--> parseint("i have 3 computers") //returns NaN <!--[if!supportlinebreaknewline]-->

52 <!--[endif]--> parsefloat(x) parseint("17", 8) //returns 15 Δέχεται σαν παράμετρο ένα αλφαριθμητικό και προσπαθεί να το μετατρέψει σε μια αντίστοιχη πραγματική αριθμητική τιμή. Παράδειγμα. isnan(x) eval(s) parsefloat("-3.98 points") //returns Δέχεται σαν παράμετρο ένα αλφαριθμητικό και επιστρέφει false αν το αλφαριθμητικό εκφράζει μια νόμιμη αριθμητική τιμή. Διαφορετικά επιστρέφει true. Δέχεται σαν παράμετρο ένα αλφαριθμητικό το οποίο εκφράζει μια Javascript έκφραση και την αποτιμά. Παράδειγμα. alert(msg) confirm(msg) eval("8+3+1") //returns 12 <!--[if!supportlinebreaknewline]--> <!--[endif]--> Δέχεται σαν παράμετρο ένα αλφαριθμητικό και σαν αποτέλεσμα δημιουργεί ένα βοηθητικό παράθυρο στο οποίο εμφανίζεται το αλφαριθμητικό μαζί με ένα OK κουμπί που αποδεσμεύει το παράθυρο. Δέχεται σαν παράμετρο ένα αλφαριθμητικό και σαν αποτέλεσμα δημιουργεί ένα βοηθητικό παράθυρο στο οποίο εμφανίζεται το αλφαριθμητικό μαζί με

53 ένα OK και ένα Cancel κουμπί. Παράδειγμα. var yourstate= confirm( "Are you sure you are ok?") prompt(msg) if (yourstate) alert("good!") Δέχεται σαν παράμετρο ένα αλφαριθμητικό και σαν αποτέλεσμα δημιουργεί ένα βοηθητικό παράθυρο στο οποίο εμφανίζεται το αλφαριθμητικό μαζί με ένα OK, ένα Cancel κουμπί μια περιοχή στην οποία ο χρήστης μπορεί να εισάγει κείμενο. Παράδειγμα. var thename= prompt("please enter your name") alert(thename) Ενότητα 1.8. Υποστήριξη Javascript στο NVU. Σε ότι έχει να κάνει με τη Javascript το VNU προσφέρει μια κονσόλα μέσω της οποίας ο χρήστης μπορεί να ελέγξει την ορθότητα και να εκτελέσει κώδικα Javascript. Στο Σχήμα 3 δίνεται ένα παράδειγμα στο οποίο χρησιμοποιούμε την κονσόλα για την εκτέλεση της συνάρτησης alert( testing the console ).

54 Σχήμα 3. Χρήση της Javascript κονσόλας.

55 Κεφάλαιο 3ο Document Object Model - DOM Μοντέλο Αντικειμένων Κειμένου (Document Object Model - DOM). Γενικά το Μοντέλο Αντικειμένων Κειμένου (DOM) είναι ένα W3C πρότυπο [17] ανεξάρτητο πλατφόρμας και γλώσσας προγραμματισμού το οποίο έχει ως στόχο την περιγραφή της γενικής δομής σελίδων HTML, κειμένων XML ή κειμένων άλλης μορφής. Στο παρόν κεφάλαιο θα επικεντρωθούμε στην περίπτωση του HTML DOM. Σύμφωνα με το DOM μια ιστοσελίδα αποτελείται από επιμέρους στοιχεία διαφορετικών ειδών (π.χ. φόρμες, κουμπιά, links, κλπ.). Τα επιμέρους αυτά στοιχεία αποτελούν τα αντικείμενα της ιστοσελίδας. Ένα αντικείμενο, ανάλογα με το είδος του, ανήκει σε κάποια συγκεκριμένη DOM κλάση (π.χ. Form, Button, Anchor, κλπ.). Για κάθε κλάση αντικειμένων το DOM ορίζει ένα σύνολο από ιδιότητες που χαρακτηρίζουν τα αντικείμενα της κλάσης (π.χ. όλες οι φόρμες, μέσω της κλάσης Form, χαρακτηρίζονται από ένα πίνακα που περιέχει τα επιμέρους συνθετικά στοιχεία μιας φόρμας, από το όνομα της φόρμας, κλπ.). Ως κατάσταση ενός αντικειμένου ορίζουμε τις τρέχουσες τιμές που έχουν οι ιδιότητες του αντικειμένου κάποια χρονική στιγμή που έπεται τη φόρτωση της ιστοσελίδας στον browser κάποιου χρήστη. Για κάθε κλάση το DOM ορίζει επίσης ένα σύνολο από μεθόδους/λειτουργίες οι οποίες μπορούν να χρησιμοποιηθούν μέσω μιας γλώσσας περιγραφής σεναρίων για την αναπροσαρμογή και επεξεργασία των δεδομένων που περιέχονται στην τρέχουσα κατάσταση των αντικειμένων της ιστοσελίδας (π.χ. η μέθοδος reset() επαναφέρει τα επιμέρους στοιχεία της φόρμας σε μια αρχική κατάσταση, η μέθοδος submit() αποστέλλει τα δεδομένα που έχουν περιγραφεί μέσω των επιμέρους στοιχείων της φόρμας στο Web server στον οποίο είναι εγκατεστημένη η ιστοσελίδα που περιέχει τη φόρμα).

56 Με βάση το DOM, τα αντικείμενα κάποιων κλάσεων (π.χ. αντικείμενα Button) σχετίζονται με συγκεκριμένα γεγονότα (events). Η συσχέτιση αυτή έχει την εξής έννοια: Τα γεγονότα είναι επίσης αντικείμενα. Όταν ένας χρήστης εκτελεί κάποια ενέργεια που εμπλέκει το αντικείμενο μιας ιστοσελίδας (π.χ. πάτημα ενός κουμπιού), ο browser δημιουργεί ένα αντίστοιχο γεγονός (π.χ. onclick event). Η ιστοσελίδα μπορεί να περιέχει κάποιο σενάριο το οποίο συσχετίζεται με τη δημιουργία του γεγονότος (το πως γίνεται αυτή η συσχέτιση το είδαμε στο Κεφάλαιο 2). Αν ισχύει αυτό, τότε το σενάριο θα εκτελεστεί μετά τη δημιουργία του γεγονότος. Συνολικά, με αυτό τον τρόπο μια ιστοσελίδα γίνεται διαδραστική και αντιδρά στις ενέργειες του χρήστη. Τέλος, το DOM ορίζει κλάσεις όπως η Window και η Navigator, οι οποίες καθορίζουν αντίστοιχα τα χαρακτηριστικά και τις μεθόδους των παραθύρων και των browsers μέσω των οποίων οι χρήστες επισκέπτονται Web sites και φορτώνουν σελίδες αυτών των sites. Στη συνέχεια αυτού του κεφαλαίου θα επικεντρωθούμε στις σημαντικότερες κλάσεις αντικειμένων του DOM, και θα αναφερθούμε συνοπτικά στις ιδιότητες, στις μεθόδους, και τα γεγονότα με τα οποία σχετίζεται η κάθε κλάση. Τα περιεχόμενα των ενοτήτων και τα παραδείγματα που παρουσιάζονται έχουν βασιστεί στα [13,14,15,16]. Ενότητα 3.1. Κλάση Window. Γενικά η κλάση Window καθορίζει τις βασικές ιδιότητες των παραθύρων ενός browser στα οποία φορτώνονται οι σελίδες του site που επισκέπτεται κάποιος χρήστης. Επίσης η κλάση αυτή καθορίζει μεθόδους που δίνουν πρόσβαση στις τιμές αυτών των ιδιοτήτων. Η βασικότερη ίσως από αυτές τις ιδιότητες είναι το αντικείμενο document, το οποίο δίνει πρόσβαση στα επιμέρους στοιχεία της ιστοσελίδας που είναι φορτωμένη σε ένα αντικείμενο κλάσης Window (βλέπε Ενότητα 3.2 για τα αντικείμενα κλάσης Document). Άλλες βασικές ιδιότητες των αντικειμένων κλάσης Window αφορούν στο μέγεθος και την θέση που εμφανίζονται τα αντίστοιχα παράθυρα στην οθόνη του χρήστη. Οι τιμές των ιδιοτήτων ενός αντικειμένου Window μπορούν να αλλαχθούν (με χρήση των μεθόδων της κλάσης Window) με την εκτέλεση κάποιου client-side σεναρίου το οποίο περιέχεται σε κάποια ιστοσελίδα που έχει φορτωθεί στο παράθυρο. Συνεπώς η ιστοσελίδα έχει με αυτόν τον τρόπο τη δυνατότητα να αλλάζει τις ιδιότητες του παραθύρου στο οποίο φορτώνεται. Τα σενάρια που περιέχονται στην ιστοσελίδα μπορεί να εκτελεστούν με βάση γεγονότα που προκύπτουν από ενέργειες του χρήστη (π.χ. όταν ο χρήστης κάνει focus στο παράθυρο, όταν ο χρήστης κάνει resize το παράθυρο κλπ.).

57 Στους παρακάτω πίνακες παρουσιάζονται συνοπτικά τα γεγονότα που σχετίζονται με τα αντικείμενα κλάσης Window, οι ιδιότητες αυτών των αντικειμένων και οι μέθοδοι που προσφέρονται. Τέλος δίδονται κάποια σύντομα παραδείγματα χρήσης αντικειμένων κλάσης Window. Σχετικά γεγονότα. Γεγονός onβlur onεrror onfocus onload onresize onunload Περιγραφή Εκτέλεση σεναρίου όταν το παράθυρο χάνει το focus. Εκτέλεση σεναρίου όταν συμβεί κάποιο Javascript σφάλμα. Εκτέλεση σεναρίου όταν το παράθυρο αποκτήσει το focus. Εκτέλεση σεναρίου όταν μια ιστοσελίδα φορτωθεί στο παράθυρο. Εκτέλεση σεναρίου όταν το παράθυρο γίνει resize. Εκτέλεση σεναρίου όταν ο χρήστης μετακινηθεί από μια ιστοσελίδα σε μια άλλη (πριν φορτωθεί η νέα ιστοσελίδα). Βασικές Ιδιότητες. Ιδιότητα Περιγραφή closed True/false ανάλογα με το αν το παράθυρο είναι κλειστό ή όχι. defaultstatus Μήνυμα στο status bar του παραθύρου. document Αναφορά στο τρέχον αντικείμενο document που περιέχεται στο παράθυρο. frames[] Πίνακας αντικειμένων Frame που αποτελούν το παράθυρο. history Αναφορά στο History αντικείμενο του παραθύρου που περιέχει όλα τα URLs στα οποία έχει γίνει επίσκεψη μέσω του παραθύρου length Αριθμός αντικειμένων Frame που περιέχονται στο παράθυρο. location Αναφορά στο Location αντικείμενο το οποίο περιέχει το τρέχον URL στο οποίο έχει γίνει επίσκεψη μέσω του παραθύρου.