Κεφάλαιο 3

Το Μοντέλο Αντικειμένων της Δυναμικής HTML ( DHTML )


Το Μοντέλο Αντικειμένων της Δυναμικής HTML ( DHTML )

Το γεγονός ότι η DHTML έχει κάτι που καλείται Μοντέλο Αντικειμένων (Object Model) μπορεί αρχικά να ακούγεται λίγο εντυπωσιακό αλλά στην πραγματικότητα είναι αρκετά απλό. Η χρήση του μοντέλου αντικειμένων σημαίνει ότι κοιτάμε σε κάτι που είμαστε αρκετά συνηθισμένοι και άνετοι με έναν νέο και πιο δυναμικό τρόπο.
Τι είναι το μοντέλο αντικειμένων (Object Model); Είναι το αποτέλεσμα που προκύπτει αν διασπάσετε κάτι σε αντικείμενα. Σαν απόδειξη, αν έπρεπε να προσομοιώσετε όλα τα κομμάτια ενός αυτοκινήτου μέσω αντικειμένων (το αντικείμενο της μηχανής, το αντικείμενο της μετάδοσης κτλ.) θα είχατε ένα αυτοκίνητο μοντέλου αντικειμένων για την προσομείωση.
Το μοντέλο αντικειμένων της DHTML εφαρμόζει την ίδια διαδικασία στον web browser και στις σελίδες HTML που αυτός περιέχει. Το μοντέλο αντικειμένων της DHTML καθιστά δυνατή την πρόσβαση σε στοιχεία του browser, όπως η ιστορία του, καθώς και σε θέματα της σελίδας που πρόσφατα είδαμε, όπως τα HTML στοιχεία που υλοποιούν την συγκεκριμένη σελίδα.
Παρότι τα παραπάνω αποτελούν μια θετική εξέλιξη, υπάρχει η ανησυχία ότι το μοντέλο αντικειμένων που χρησιμοποιείται από τη Microsoft δεν θα είναι το ίδιο με άλλους φυλλομετρητές. Ένα από τα πιο δύσκολα θέματα εργασίας με τον Παγκόσμιο Ιστό (WWW) είναι η φαινομενική ατελείωτη απόκλιση προτύπων για την υλοποίηση διαφόρων ζητημάτων. Το WWW Consortium (W3C) προσπαθεί να εξασφαλίσει ότι αυτό δεν θα συμβεί με το μοντέλο αντικειμένων δημιουργώντας ένα πρότυπο - μοντέλο αντικειμένων- που καλείται W3C Document Object Model. Η Microsoft έχει καταστήσει σαφές ότι σκοπεύει να ακολουθήσει το συγκεκριμένο πρότυπο.

Βλέποντας έγγραφα HTML ως συλλογή (collection) από αντικείμενα

Ακόμη και ένα απλό έγγραφο HTML θα αποτελείται από δύο τμήματα : Το μοντέλο αντικειμένων της DHTML παρουσιάζει την HTML σελίδα και τον browser σαν μια μεγάλη συλλογή από αντικείμενα. Με αυτόν τον τρόπο μπορείτε να έχετε πρόσβαση σε κάθε τμήμα της σελίδας που επιθυμείτε εισβάλλοντας στην συλλογή των αντικειμένων και ανακτώντας το τμήμα που θέλετε.
Σαν παράδειγμα το μοντέλο αντικειμένων της DHTML περιέχει ένα αντικείμενο που ονομάζεται body που επιτρέπει στους συγγραφείς σεναρίων να έχουν απ’ευθείας πρόσβαση στα στοιχεία του σώματος (BODY) του εγγράφου. Επίσης περιέχει ένα αντικείμενο που ονομάζεται location που επιτρέπει προγραμματιστές σεναρίωννα βρίσκουν πληροφορίες σχετικά με την σελίδα που έχουν δει πρόσφατα όπως το URL της ή το πρωτόκολλο που χρησιμοποιήθηκε.

Ανεξαρτησία Γλώσσας Στο Μοντέλο Αντικειμένων της DHTML

Το μοντέλο αντικειμένων είναι ένας σίγουρος τρόπος για να διασπάσουμε πολύπλοκα δεδομένα σε εύχρηστα κομμάτια, αλλά στο παρελθόν το μοντέλο αντικειμένων ήταν στενά συνδεδεμένο με μια συγκεκριμένη γλώσσα προγραμματισμού.
Ένα από τα μεγάλα μειονεκτήματα ενός μοντέλου αντικειμένων όπως είναι το Microsoft Office Object Model είναι η σύνδεση με μια συγκεκριμένη γλώσσα προγραμματισμού, που σ’αυτήν την περίπτωση είναι η Visual Basic for Applications. Γι’αυτό δεν μπορούν να χρησιμοποιηθούν άλλες γλώσσες όπως Pascal , C, C++ ή Java.
Αυτό δημιουργεί προβλήματα για δύο λόγους. Πρώτα ένα διαφορετικό μοντέλο αντικειμένων πρέπει να κατασκευαστεί για κάθε γλώσσα , που στην ουσία είναι η δημιουργία από την αρχή του ίδιου ακριβώς πράγματος. Δεύτερον, ένα μοντέλο αντικειμένων που εξαρτάται από τη γλώσσα προγραμματισμού δίνει περισσότερη βάση στη γλώσσα που χρησιμοποιείται και όχι στο ίδιο το ερευνητικό έργο.
Το μοντέλο αντικειμένων της DHTML προσπαθεί να αποτρέψει το συγκεκριμένο πρόβλημα με την μερική ανεξαρτησία από τις γλώσσες. Μπορείτε να έχετε πρόσβαση του μοντέλου αντικειμένων μεVBscript όπως και με Java script. Με λίγη περισσότερη εργασία έχουμε την ίδια χρήση από C++ ή από Java.
Η παραπάνω ανεξαρτησία είναι ένας σημαντικός συντελεστής για την επιτυχία γιατί δεν αναγκάζει τους κατασκευαστές να πάρουν τη δύσκολη απόφαση επιλέγοντας μία μόνο γλώσσα για την ανάπτυξη της DHTML.

Δημιουργώντας με τον Netscape

Αν είσαστε συνηθισμένοι στη χρήση Java script στον Netscape Navigator για τον προγραμματισμό με φόρμες το μοντέλο αντικειμένων της DHTML θα σας φανεί πολύ οικείο. Αρχικά, η Microsoft ενσωμάτωσε το μοντέλο αντικειμένων του Netscape με ελάχιστες προσθήκες στον Internet Explorer 3.0. Με τον Internet Explorer 4.0 η Microsoft επέκτεινε το μοντέλο αντικειμένων του Netscape ώστε να καλύψει κάθε πιθανό στη σύλληψη θέμα για τον browser και τα HTML έγγραφά του.
Από τον Netscape Navigator 2.0 και άνω έχετε τη δυνατότητα πρόσβασης σε φόρμες και στοιχεία του με μια άμεση σύνταξη. Αν για παράδειγμα είχατε μια φόρμα με την ονομασία entry και ένα πεδίο κειμένου με το όνομα user, θα μπορούσατε να έχετε πρόσβαση στην τιμή του συγκεκριμένου πεδίου με την παρακάτω συγκεκριμένη σύνταξη :

document.entry.user.value

Το τρέχον URL που το αντιστοιχεί στο παράθυρο του browser περιέχεται σε ένα στοιχείο που ονομάζεται location μέσα στο αντικείμενο window.
Κατά τον ίδιο τρόπο, ολόκληρο το σώμα του εγγράφου της HTML, περιλαμβάνεται σε μια συλλογή από αντικείμενα με την ονομασία all, το οποίο εμπεριέχεται στο αντικείμενο document, που βρίσκεται μέσα στο αντικείμενο window:

window.document.all

Κατανοώντας το Μοντέλο Αντικειμένων της DHTML

Τώρα που έχετε αποκτήσει μια σχετική ιδέα του τι είναι ένα μοντέλο αντικειμένων και πως αυτό μπορεί να χρησιμοποιηθεί μπορείτε να δείτε τις λεπτομέρειες του μοντέλου αντικειμένων που η Microsoft έχει υλοποιήσει για την DHTML μέσα στον Internet Explorer 4.0.
Το πρώτο σημείο που πρέπει να προσεχθεί στην ιεραρχία είναι ότι όλα τα αντικείμενα περιέχονται στο αντικείμενο window. Γι’αυτό το λόγο αν θέλετε να φτάσετε στο κείμενο που περιέχεται στο τρέχον παράθυρο θα χρησιμοποιήσετε το αντικείμενο document που βρίσκεται στο αντικείμενο window.
Το δεύτερο σημαντικό στοιχείο που πρέπει να προσεχθεί αναφορικά με την ιεραρχία είναι ότι εκτός από τα οικεία σε εμάς αντικείμενα υπάρχουν και άλλα στοιχεία γνωστά ως συλλογές (collection) που θα συζητηθούν παρακάτω.

Συλλογή (collection)

Μια συλλογή είναι ένα σύνολο στοιχείων τοποθετημένα μαζί από το μοντέλο αντικειμένων της DHTML. Ένα τυπικό έγγραφο HTML είναι μια συλλογή από συνδέσμους, φόρμες και άλλα στοιχεία όπως είναι οι φωτογραφίες. Μπορείτε να σκεφτείτε τη συλλογή σαν ένα περίβλημα γύρω από ένα μεγάλο αριθμό αντικειμένων. Η συλλογή δεν χρησιμοποιείται αυτή καθ’αυτή αλλά σαν μέσο πρόσβασης στα αντικείμενα που περιέχει. Επίσης η συλλογή χρησιμοποιείται για να κατηγοριοποιεί όμοια στοιχεία. Αυτό σας δίνει τη δυνατότητα να προσεγγίζετε στοιχεία που είναι παρεμφερή μεταξύ τους σε μια σελίδα γρήγορα και εύκολα.

Προσπελαύνοντας μια Συλλογή Στοιχείων

Επειδή οι συλλογές χρησιμεύουν για ομαδοποίηση στοιχείων, είναι σκόπιμο να έχετε τρόπους για να προσεγγίσετε αυτά τα στοιχεία από τη συλλογή. Μπορείτε να πάρετε τα στοιχεία από όλες τις συλλογές της DHTML με τις τρεις μεθόδους που περιγράφονται στον παρακάτω πίνακα :
 
Μέθοδος ΠρόσβασηςΣυλλογής
Περιγραφή
Item(αλφαριθμητικό) Επιστρέφει όλα τα στοιχεία της συλλογής με το συγκεκριμένο όνομα ή id.
Item(αριθμός) Επιστρέφει το στοιχείο της συλλογής στη θέση που καθορίζεται από το όρισμα.
Tags(όνομα του tag) Επιστρέφει μια συλλογή που περιλαμβάνει μόνο τη συγκεκριμένη ετικέτα (tag).

Η μέθοδος item (αλφαριθμητικό) επιτρέπει πρόσβαση σε στοιχεία της συλλογής προσδιορίζοντας το όνομα ή το id του στοιχείου. Για παράδειγμα ας υποθέσουμε ότι ένα στοιχείο υπάρχει σ’ένα έγγραφο HTML με την ονομασία «my Element». Αυτό το στοιχείο μπορεί να επιστραφεί χρησιμοποιώντας τη μέθοδο item() με το όνομα του στοιχείου myElement σαν όρισμα όπως φαίνεται στην παρακάτω γραμμή :

document.all.item(«myElement»)

Προσοχή

Αν περισσότερα από ένα στοιχεία ταιριάζουν με το όνομα ή το id (αναγνωριστής) που δόθηκε στη μέθοδο item() τότε δημιουργείται μια συλλογή που περιέχει όλα τα στοιχεία που ικανοποιούν τα κριτήρια. Σ’αυτή τη περίπτωση αυτό που επιστρέφει η μέθοδος item() δεν είναι ένα στοιχείο αλλά ουσιαστικά μια συλλογή. Χρησιμοποιώντας μια από τις μεθόδους της συλλογής όπως η item(), θα ανακτήσετε τα στοιχεία από τη συγκεκριμένη συλλογή.
Ο δεύτερος τρόπος ανάκτησης ενός στοιχείου από μια συλλογή είναι η χρήση ενός αριθμού σαν όρισμα για τη μέθοδο item() υποθέτοντας ότι ξέρετε ακριβώς που είναι το στοιχείο στη συλλογή. Το πρώτο στοιχείο της συλλογής document.all είναι το HTML στοιχείο. Συνεπώς αποκτάτε πρόσβαση στο HTML στοιχείο με τον παρακάτω κώδικα :

document.all.item(0)

Όπως και σε ένα πίνακα, το πρώτο στοιχείο μιας συλλογής προσδιορίζεται στη θέση 0. Αυτό είναι σημαντικό, γιατί πολύ συχνά δημιουργείται σύγχυση καθώς προσπαθώντας να το προσπελάσετε δίνεται σαν όρισμα η θέση 1.
Η μέθοδος tag() κάνει δυνατή την ανάκτηση όλων των στοιχείων της συλλογής που χρησιμοποιούν τη συγκεκριμένη ετικέτα. Η τιμή που επιστρέφεται είναι μια συλλογή που περιέχει όλα τα συγκεκριμένα στοιχεία. Αν υποθέσουμε ότι θέλετε να αποκτήσετε μια συλλογή από όλα τα στοιχεία του εγγράφου που χρησιμοποιούν την <P> ετικέτα θα χρησιμοποιήσετε τον παρακάτω κώδικα :

document.all.tags(«P»)

Επιστρέφοντας το Μήκος μιας Συλλογής

Οι συλλογές έχουν μόνο μία ιδιότητα την length. Αυτή η ιδιότητα σας επιτρέπει να γνωρίζετε πόσα στοιχεία περιέχονται στη συλλογή. Το παρακάτω παράδειγμα μετράει τον αριθμό των παραγράφων σε ένα HTML έγγραφο :

01. <HTML>
02. <HEAD>
03. <TITLE>
04. Παράδειγμα Πρώτο
05. </TITLE>
06. </HEAD>
07. <BODY>
08. <P> Αυτό το παράδειγμα παρουσιάζει συλλογές στην DHTML
09. <P> Υπάρχουν 4 παράγραφοι σ’αυτό το έγγραφο
10. <P> Χρησιμοποιούμε την tags() μέθοδο για να επιστρέψουμε μια συλλογή
11. <P>Χρησιμοποιούμε την ιδιότητα Length για να μετρήσουμε τις παραγράφους
12. <SCRIPT language= «JavaScript»>
13. var prgaphs = document.all.tags («P»)
14. var numpgraps = pgraphs.lenght;
15. alert (numpgraps + « total paragraphs » );
16. </SCRIPT>
17. </BODY>
18.</HTML>

Το πρώτο σημείο του παραδείγματος που πρέπει να δώσετε ιδιαίτερη σημασία είναι ότι το κυρίως σώμα του εγγράφου περιέχει τέσσερις ετικέτες <P>. Συνεπώς το document.all περιέχει τέσσερις παραγράφους.
Η tag() μέθοδος της document.all συλλογής καθορίζει μια υποσυλλογή που περιέχει όλες τις <P> ετικέτες. Η συλλογή που περιέχει τις <P> ετικέτες προσδιορίζεται με την μεταβλητή pgraphs όπως φαίνεται στον κώδικα που ακολουθεί:

var pgraphs = document.all.tags(«P»)

Το νούμερο των <P> ετικετών στην συλλογή ετικετών <P> καθορίζεται χρησιμοποιώντας την ιδιότητα length της συλλογής στην 14η γραμμή. Επειδή αυτή η συλλογή περιέχει όλες τις ετικέτες του εγγράφου που είναι τύπου <P>, το μέγεθος της συλλογής είναι ο αριθμός των παραγράφων στο έγγραφο :

var numpgraphs =pgrahs.lenght;

Τέλος η συνάρτηση alert() στην 15η γραμμή καλείται για να δείξει τον αριθμό των παραγράφων στο έγγραφο το οποίο σ’αυτή την περίπτωση είναι τέσσερα :

alert (numpgrahs + « total paragrahs»)

Στοιχεία (Elements)

Τα στοιχεία που επιστέφονται από τις συλλογές της DHTML είναι τα ίδια με τα στοιχεία της HTML με τη μόνη διαφορά ότι τώρα είναι αντικείμενα τα οποία μπορούμε να χειριστούμε και από τα οποία μπορούμε να πάρουμε πληροφορίες.
Αν και ακούγεται περίεργο στην πραγματικότητα διακατέχεται από κάποια λογική. Για παράδειγμα, κάθε στοιχείο σε μια συλλογή ορίζεται από ένα καθορισμένο τύπο ετικέτας. Επομένως είναι απολύτως λογικό να κάνουμε ένα στοιχείο ένα αντικείμενο με ιδιότητα που περιέχει το όνομα της ετικέτας του.
Κατά τον ίδιο τρόπο, συνεπάγεται ότι ένα στοιχείο αντικείμενο θα πρέπει να γνωρίζει το δικό του είδος ID ή CSS. Το στοιχείο αντικείμενο καλύπτει όλες αυτές τις πληροφορίες για τον χρήστη και δημιουργείται για κάθε HTML στοιχείο του εγγράφου.
Αν τοποθετήσουμε ένα στοιχείο <H1> στο HTML έγγραφο σας, ένα αντίστοιχο αντικείμενο θα δημιουργηθεί στην ιεραρχία των αντικειμένων. Αυτό το αντικείμενο είναι γνωστό ως ετικέτα στοιχείου αντικειμένου. Αυτή η διάκριση μπορεί να είναι λίγο συγκεχυμένη. Αυτό που πρέπει να θυμόσαστε είναι ότι το στοιχείο που τοποθετήσατε στο έγγραφο και το αντίστοιχο στοιχείο αντικείμενο είναι ακριβώς το ίδιο πράγμα. Η διαφορά είναι ότι το στοιχείο αντικείμενο είναι ανοικτό σε επιδράσεις διαμέσου του μοντέλου αντικειμένων της DHTML. Όπως κάθε αντικείμενο έτσικαι τα στοιχεία αντικείμενα έχουν μεθόδους και ιδιότητες.

Ιδιότητες στοιχείων

Όλα τα HTML στοιχεία στο μοντέλο αντικειμένωντης DHTML έχουν ένα σταθερό σύνολο από ιδιότητες που σχετίζονται με αυτά και είναι ανεξάρτητα από τον τύπο τους. Αυτή η τυποποίηση σημαίνει ότι μπορείτε να γράψετε συναρτήσεις που εξαρτώνται σ’ένα βασικό σύνολο από ιδιότητες χωρίς να ανησυχείτε σχετικά με τον τύπο των HTML στοιχείων που προσεγγίζετε. Οι βασικές ιδιότητες που φαίνονται στον παρακάτω πίνακα μπορούν να περιλαμβάνουν οποιαδήποτε έγκυρη τύπου μεταβλητή, όπως αλφαριθμητικό, σταθερά, λογική τιμή 0 ή1 (Boolean), ή ακόμη και ένα αντικείμενο.
 
 
Ιδιότητα  Περιγραφή
Document Το έγγραφο που περιέχει το στοιχείο
Id Το id (αναγνωριστής) του στοιχείου
Left Η θέση του στοιχείου σε σχέση με την αριστερή μεριά του παραθύρου
Top Η θέση του στοιχείου σε σχέση με το ύψος του παραθύρου
Tagname Το όνομα της ετικέτας.
Style Ένα αντικείμενο που περιέχει το είδος του στοιχείου
ParenElement Το στοιχείο που περιέχει το συγκεκριμένο στοιχείο
ClassName Επιστρέφει τη τάξη που καθορίζεται γι’αυτό το στοιχείο

Το παράδειγμα που ακολουθεί παρουσιάζει μερικές από τις βασικές ιδιότητες στην πράξη:

01. <HTML>
02. <HEAD>
03. <TITLE>
04.Παράδειγμα Δεύτερο
05. </TITLE>
06. </HEAD>
07. <BODY>
08.
09.<P id=para left=100 top=100>
10.Βασικές ιδιότητες στοιχείων στην JavaScript
11.
12. <SCRIPT language = «JavaScript»>
13. var pgraph = document.all.tags(«P»).item(0);
14. document.write(«<Pid> : » + pgrah.id);
15. document.write(«<Ptagname> : » + pgraph.tagName );
16. document.write(« <Ptop> :» + pgraph.top);
17. document.write(«<Pleft> : » + pgraph.left );
18. </SCRIPT>
19.
20. </BODY>
21. </HTML>

Μέθοδοι Στοιχείων

Παράλληλα με τις ιδιότητες των στοιχείων υπάρχουν μέθοδοι που όλα τα στοιχεία εγγυημένα έχουν. Δύο σημαντικές μέθοδοι για κάθε στοιχείο αντικείμενο είναι: contains() και η scrollIntoView().
Η μέθοδος contains() χρησιμοποιείται με στοιχεία HTML που μπορούν να περιλαμβάνουν άλλα στοιχεία HTML όπως τα <DIV> και <SPAN>. Αυτή η μέθοδος παρέχει ένα γρήγορο και βολικό τρόπο για να προσδιορίσετε του τι περιέχεται και τι όχι σε ένα HTML στοιχείο. Η μέθοδος contains() καλείται με όρισμα το προς αναζήτηση αντικείμενο.

element.contains.(searchElement)

Η μέθοδος contains() επιστρέφει μια λογική τιμή 0 ή 1 που υποδεικνύει αν το στοιχείο που αναζητήθηκε περιλαμβάνεται στο στοιχείο που έχει καθοριστεί για αναζήτηση. Η μέθοδος contains() επιστέφει true(1) αν το στοιχείο βρεθεί και false(0) διαφορετικά.
Η δεύτερη σημαντική μέθοδος είναι η scrollIntoView(). Η μέθοδος αυτή ελέγχει αν το στοιχείο που καλείται είναι ορατό στο τμήμα του παραθύρου από το χρήστη. Η scrollIntoView() δέχεται σαν όρισμα μια λογική τιμή 0 ή 1 (boolean) που καθορίζει αν το στοιχείο ολισθαίνει στη πρώτη γραμμή της οθόνης (αν το όρισμα αληθεύει ) ή στην τελευταία γραμμή (αν το όρισμα είναι ψευδές).
Η παρακάτω δήλωση θα ολισθαίνει το στοιχείο στη πρώτη γραμμή της οθόνης:

element.scroll.IntoView.(true)

Αντικείμενα και Συλλογές

Το αντικείμενο window
Το αντικείμενο location
Το αντικείμενο history
Η συλλογή frames
Το αντικείμενο screen
Το αντικείμενο navigator
Το αντικείμενο event
Το αντικείμενο document
Το αντικείμενο selection
Το αντικείμενο body
Η συλλογή all
Η συλλογή anchors
Η συλλογή applets
Η συλλογή forms
Η συλλογή images
Η συλλογή links
Η συλλογή frames
Η συλλογή script
Η συλλογή embeds
Η συλλογή plugins
Η συλλογή filters
Η συλλογή styleSheets

Το αντικείμενο window

Το αντικείμενο window περιλαμβάνει: στοιχεία, πλαίσια, φωτογραφίες, την ιστορία του browser και σχεδόν οτιδήποτε πιθανόν θα χρειαστεί να προσβάσετε διαμέσου του browser. Μια ταξινόμηση των πιο σημαντικών συλλογών, μεθόδων και ιδιοτήτων που είναι διαθέσιμα στο αντικείμενο window φαίνονται στον παρακάτω πίνακα :
 
 
Συλλογές Πλαίσια
Μέθοδοι item, navigate, blur, focus, alert, confirm, prompt, setTimeout, clearInterval, setInterval, showHelp, execScript, clearTimeout, close, open, scroll, showModalDialog
Ιδιότητες Document, location, history, navigator, event, visual, client, closed, 

DefaultStatus, dialogArguments, dialogHeight, dialogLeft, dialoTop, dialogWidth, lenght, name, offscreenBuffering, opener, parent, returnValue, screen, self, status, top, window 

Γεγονότα Onfocus, onload, onunload, onblur, onhelp, onerror, onbeforeunload, onresize,onscroll

 
Το αντικείμενο location
Το αντικείμενο location περιλαμβάνει όλες τις πληροφορίες σχετικά με τη θέση του παραθύρου που βλέπετε προσωρινά όπως το πρωτόκολλο και το κανάλι καθώς και μια μέθοδο για την επαναφόρτωση (reload) της σελίδας.
Οι πιο σημαντικές ιδιότητες του αντικειμένου location είναι οι εξής:

href - Η ιδιότητα href είναι ολόκληρο το URL της τρέχουσας σελίδας. Αυτό είναι ισοδύναμο με την πληκτρολόγηση της URL στο κουτί διευθύνσεων του Internet Explorer. Για παράδειγμα για να μπούμε στην επίσημη σελίδα του Πανεπιστημίου Μακεδονίας, από την τρέχουσα σελίδα, θα γράψουμε location.href=«http://www.uom.gr»;.

protocol - Το πρωτόκολλο είναι μια μέθοδος που ο browser χρησιμοποιεί για να ανακτήσει το URL. Για τις περισσότερες σελίδες του Web το πρωτόκολλο είναι http. Άλλα κοινά πρωτόκολλα είναι file: και ftp:.

host - Το hostname είναι το όνομα του εξυπηρετητή περιφερειακών συστημάτων που η τρέχουσα URL έχει εντοπιστεί. Για τη σελίδα του Πανεπιστημίου Μακεδονίας αυτό είναι www.Uom.gr. Αν υπάρχει ένα κανάλι που καθορίζεται στην URL (όπως «www.Uom.gr:8888») αυτό συμπεριλαμβάνεται.

hostname - Το όνομα του εξυπηρετητή στον οποίο η τρέχουσα URL έχει εντοπιστεί. Σε αντίθεση με την ιδιότητα host, το port δεν περιλαμβάνεται ακόμη και αν προσδιορίζεται.

hash - Η ιδιότητα hash περιλαμβάνει το τμήμα του URL που ακολουθεί τον χαρακτήρα (‘#’) αν αυτός υπάρχει.

searh - Η ιδιότητα search περιλαμβάνει το τμήμα της URL που ακολουθεί τον χαρακτήρα (‘?’) αν αυτός υπάρχει.

Το αντικείμενο location περιλαμβάνει δύο μεθόδους :

reload - Η μέθοδος reload() δεν δέχεται ορίσματα και απλώς ξαναφορτώνει την υπάρχουσα-τρέχουσα σελίδα. Η συμπεριφορά είναι ακριβώς η ίδια με την ενεργοποίηση του Reload κουμπιού σ’ένα browser.

replace(URL) - Η μέθοδος replace(URL) δέχεται ένα μόνο όρισμα -μία URL. Κάνει το browser να αλλάξει την τρέχουσα σελίδα με το όρισμα URL που καθορίζεται.

Το αντικείμενο history

Το αντικείμενο history περιλαμβάνει όλες τις URL που ο χρήστης έχει επισκεφθεί κατά τη διάρκεια μιας περιόδου - η περίοδος καθορίζεται κάθε φορά που ξεκινά ο browser.
Μια ιδιότητα που υποστηρίζεται από το αντικείμενο history είναι η length. Η ιδιότητα length καθορίζει τον αριθμό των URLs που περιλαμβάνονται στο τρέχων αντικείμενο history.
Το αντικείμενο history έχει επίσης τρεις μεθόδους: back(), forward() και go().
Καμία από τις μεθόδους back() και forward() δεν δέχεται ορίσματα. Η μέθοδος back() είναι πανομοιότυπη με τη χρήση του κουμπιού Back στο παράθυρο του browser. Πανομοιότυπα η forward() είναι ταυτόσημη με τη χρήση του κουμπιού Forward του browser. Γι’αυτό για να πάμε πίσω κατά μια URL χρησιμοποιείτε τον παρακάτω κώδικα :

window.history.back() ή history.back()

επειδή το αντικείμενο window είναι η αρχικά προκαθορισμένη τιμή όταν γράφετε σενάριο.
Η μέθοδος go() κάνει δυνατή τη πρόσβαση σε μια συγκεκριμένη θέση- από το σύνολο που ο χρήστης έχει επισκεφθεί κατά τη διάρκεια μιας περιόδου -δίνοντας ένα όρισμα που καθορίζει πού θέλετε να πάτε. Τη μέθοδο go() μπορείτε να την καλέσετε με δύο τρόπους. Ο πρώτος τρόπος είναι να δώσετε ένα μερικό μέρος URL για να βρεθείτε σ'αυτή. Αν για παράδειγμα, γνωρίζατε ότι είχατε επισκεφθεί τη θέση του PdPLab και θέλατε να την ξαναδείτε θα καλούσατε την go() μέθοδο με τον ακόλουθο τρόπο :

window.history.go(«http://pdplab.it.uom.gr/pdp/ »);

ή

history.go(«http://pdplab.it.uom.gr/pdp/»);

Ας σημειώσουμε ότι δεν χρειάζεται να είναι ολόκληρη η URL αλλά ένα κομμάτι από αυτή.
Ο δεύτερος τρόπος για να χρησιμοποιήσετε τη μέθοδο go() είναι να καθορίσετε τον αριθμό που αντιστοιχεί στην τοποθεσία της λίστας – η λίστα καθορίζεται από το σύνολο των θέσεων που ο χρήστης έχει επισκεφθεί κατά τη διάρκεια μιας περιόδου. Για να βρεθείτε στην πρώτη θέση της λίστας θα κάνετε τα παρακάτω :

window.history.go(1)

ή

history.go(1);

Προσοχή

Είναι σημαντικό να γνωρίζετε ότι η πρώτη θέση στην λίστα καθορίζεται με το 1, σε αντίθεση με τις συλλογές και τους πίνακες που είναι 0.

Η συλλογή frames

Η συλλογή frames περιλαμβάνει όλα τα πλαίσια παραθύρων που περιλαμβάνονται στο τρέχον παράθυρο που προβάλλεται από τον browser. Για παράδειγμα αν θελήσετε να ανακτήσετε το όνομα του πρώτου πλαισίου στο τρέχον παράδειγμα θα χρησιμοποιήσετε τον παρακάτω κώδικα :

window.document.frames(0).name;
Το αντικείμενο screen

Όταν σχεδιάζετε ύλη για το δίκτυο ένα συχνό φαινόμενο είναι να μην γνωρίζετε τις δυνατότητες και το μέγεθος της οθόνης στην οποία θα επιδειχθεί το περιεχόμενο. Το αντικείμενο screen σας επιτρέπει αυτού του είδους τις πληροφορίες. Οι παρακάτω ιδιότητες είναι διαθέσιμες σε εσάς:

height - Το ύψος της οθόνης σε εικονοστοιχεία.

widht - Το εύρος της οθόνης σε εικονοστοιχεία.

colorDepth - Περιέχει τον αριθμό των bits των χρωμάτων ανά εικονοστοιχεία για την οθόνη

bufferDepth - Καθορίζει αν υπάρχει η όχι ένα offscreenbasket.

updateInterval - Καθορίζει πόσο συχνά, σε χιλιοστά του δευτερολέπτου, ανανεώνεται η εικόνα (της οθόνης).

Το αντικείμενο navigator

Το αντικείμενο navigator καθιστά δυνατή τη πρόσβαση σε πληροφορίες σχετικά με το πρόγραμμα του browser. Είναι σημαντικό να γνωρίζετε τις δυνατότητες του browser ώστε να αποφασίσετε ποιόν θα χρησιμοποιήσετε για μια συγκεκριμένη εφαρμογή. Για παράδειγμα ο Netscape Communicator δεν υποστηρίζει μεγάλο αριθμό συναρτήσεων σε αντίθεση με τον Internet Explorer 4.0. Αν προσπαθήσετε να χρησιμοποιήσετε τις συναρτήσεις θα δημιουργηθούν λάθη.

Το αντικείμενο navigator υποστηρίζει τέσσερις βασικές ιδιότητες :

appName - Επιστρέφει το όνομα του browser που επεξεργάζεται το σενάριο και συντάσσεται με τον ακόλουθο τρόπο:

navigator.appName
Στην περίπτωση του Internet Explorer η appName επιστρέφει την τιμή «Microsoft Internet Explorer»

appVersion - Επιστρέφει τον αριθμό έκδοσης του browser και συντάσσεται με τον παρακάτω τρόπο:

navigator.appVersion

Στην περίπτωση του Internet Explorer 4.0 επιστρέφει «4.0 (compatible;MSIE 4.0 ;Windows 95)».

AppCodeName - Προσφέρει το κωδικό όνομα της εφαρμογής για συμβατικούς κυρίως λόγους ώστε να δείξει ότι ο browser είναι συμβατός με τον Netscape Navigator που ήταν ο κύριος browser για πολλά χρόνια. Η τιμή που επιστρέφεται από τον Internet Explorer 4.0 είναι «Mozilla» που είναι το κωδικό όνομα για Netscape’s φυλλομετρητές.

cookieEnabled - Τα cookies απλώς αποθηκεύουν πληροφορίες στο μηχάνημα σας ώστε να προσαρμόσουν απαιτήσεις για μελλοντικές επισκέψεις σε συγκεκριμένο εξυπηρετητή δικτύου. Έχοντας αποτελέσει αντικείμενο συζήτησης για το πιθανό ρίσκο με τα cookies πολλοί browsers επιτρέπουν να τα απενεργοποιούμε. Η ιδιότητα cookieEnabled σας επιτρέπει να γνωρίζετε πότε cookies έχουν απενεργοποιηθεί.

JavaEnabled - Επιστρέφει true αν το JavaVirtual Machine είναι διαθέσιμο στον υπολογιστή διαφορετικά false.

Το αντικείμενο event

Το αντικείμενο event καθιστά δυνατές πληροφορίες σχετικά με το τρέχον γεγονός που επεξεργάζεται. Το event είναι ο τρόπος του browser για να μας πει ότι ο χρήστης αλληλεπιδρά μ’αυτόν.

Οι παρακάτω ιδιότητες είναι διαθέσιμες στο αντικείμενο event :

altkey - True αν το Alt πλήκτρο πατήθηκε όταν γεγονός ξεκίνησε false διαφορετικά.

button - Καθορίζει το πλήκτρο του ποντικιού που πατήθηκε: 0 αν κανένα πλήκτρο δεν πατήθηκε, 1 αν το αριστερό κουμπί πατήθηκε, 2 αν ήταν το δεξί και 4 αν πατήθηκε το μεσαίο κουμπί.

clientX - Η Χ θέση του ποντικιού σχετικά με την client περιοχή του παραθύρου.

clientY - Η Χ θέση του ποντικιού σχετικά με την client περιοχή του παραθύρου

crtkey - True αν το Control πλήκτρο πατήθηκε όταν γεγονός ξεκίνησε false διαφορετικά.

fromElement - Το τελευταίο στοιχείο πάνω από το οποίο βρισκόταν το ποντίκι προτού βρεθεί στο συγκεκριμένο.

keycode - Ο κωδικός του πλήκτρου που πατήθηκε όταν το γεγονός ξεκίνησε.

reason - Η τρέχουσα κατάσταση του αντικειμένου μεταφοράς δεδομένων. Μπορεί να είναι μια από τις παρακάτω καταστάσεις: 0 αν τα δεδομένα μεταφέρθηκαν σωστά, 1 αν η μεταφορά δεδομένων απορρίφθηκε και 2 αν υπήρξε κάποιο λάθος στη μεταφορά δεδομένων.

returnValue - Η επιστρεφόμενη τιμή από το γεγονός.

screenX - Η X θέση του ποντικιού σχετικά με το μέγεθος της οθόνης και όχι με το παράθυρο του browser.

screenY - Η Y θέση του ποντικιού σχετικά με το μέγεθος της οθόνης και όχι με το παράθυρο του browser.

shiftKey - Η κατάσταση του πλήκτρου Shift όταν πυροδοτήθηκε το γεγονός. True αν είχε πατηθεί, false διαφορετικά.

scrElement - Το στοιχείο που αρχικά πυροδότησε το γεγονός που τώρα διαχειρίζεται.

Το αντικείμενο document

Περιέχει όλες τις πληροφορίες που μπορείτε να χρειαστείτε σχετικά με το έγγραφο που ο browser δείχνει προσωρινά. Το αντικείμενο document μπορείτε να το προσπελάσετε με δύο τρόπους. Ο πρώτος και πιο σωστός είναι να το προσεγγίσετε διαμέσου του αντικειμένου window - θυμηθείτε ότι το αντικείμενο document περιέχεται στο αντικείμενο window. Γι’αυτό για να προσεγγίσετε την all συλλογή του αντικειμένου object θα ακολουθήσετε την παρακάτω σύνταξη :

window.document.all

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

document.all

Η συνάρτηση που θα χρησιμοποιήσετε είναι περισσότερο θέμα προτίμησης. Αν θέλετε να είσαστε όσο το δυνατό πιο συγκεκριμένοι θα χρησιμοποιήσετε window.document.all διαφορετικά document.all.
 
 
   
Συλλογές anchors, links, forms, applets, frames, images, scripts, embeds, plugins
Μεθόδοι close, open, write, writeln, rangeFormText, rangeFormElement, execCommand, queryCommandEnabled, queryCommandText, elementFromPoint, queryCommandSupported, queryCommandState, queryCommandIndeterm, createElement
Ιδιότητες alinkColor, linkColor, vlinkColor, mimeType, title, bgColor, link, vLink, aLink, cookie, lastModified, charset, location, referrer, fgColor, activeElement, strReadyState, domain, URL, filesize, fileCreatedDate, fileModifiedDate, fileUpdatedDate
Γεγονότα onclick, onmouseover, ondblclick, onkeypress, onmousedown, onmousemove, onmouseup, onkeydown, onkeyup, onmouseout, onreadystatechange, onhelp, onbeforeupdate, onafterupdate

Το αντικείμενο document έχει μια σπουδαία συλλογή από χρήσιμες πληροφορίες σχετικά με το έγγραφο και οι οποίες παρουσιάζονται μέσω των ιδιοτήτων του αντικειμένου document. Η παρακάτω λίστα παρουσιάζει μερικές από τις πιο σημαντικές ιδιότητες :

linkColor - Η ιδιότητα αυτή δίνει το χρώμα με το οποίο οι σταθεροί σύνδεσμοι φαίνονται στην οθόνη. Αυτή η τιμή δίνεται σαν μια δεκαεξαδική RGB τιμή προηγούμενη από ένα σύμβολο ‘ # ’. Το αρχικώς προκαθορισμένο (default) χρώμα είναι συνήθως το #00000FF που είναι η δεκαεξαδική τιμή για το μπλε.

vlinkColor - Το χρώμα στο οποίο εμφανίζονται οι επισκεπτόμενοι σύνδεσμοι (links). Και αυτή η τιμή δίνεται σαν μια δεκαεξαδική RGB τιμή. Η αρχική προκαθορισμένη τιμή είναι #FF0000 που είναι η δεκαεξαδική τιμή για το κόκκινο.

alinkColor - Το χρώμα στο οποίο οι σύνδεσμοι εμφανίζονται αφού το ποντίκι ακουμπήσει σ’αυτό και προτού αφεθεί. Η τιμή δίνεται πάλι σε δεκαεξαδική μορφή. Η αρχικώς προκαθορισμένη τιμή είναι επίσης η #FF0000.

activeElement - Το στοιχείο που προσωρινά είναι ενεργό.

URL - Μετατρέπει ολόκληρη την URL σε αλφαριθμητικό.

title - Η ιδιότητα title είναι απλά το όνομα που δίνεται στο έγγραφο μέσα στην ετικέτα <TITLE> της HTML .

bgcolor - Η ιδιότητα αυτή καθορίζει το χρώμα που θα έχει το φόντο του εγγράφου.Το αρχικά προκαθορισμένο χρώμα είναι το άσπρο (#FFFFFF)

cookie - Η ιδιότητα cookie αποθηκεύει την τιμή του cookie για την τρέχουσα σελίδα. Σε μία τυπική σελίδα HTML χωρίς cookie η τιμή είναι κενή. Η ιδιότητα αυτή μπορεί να χρησιμοποιηθεί και για τη δημιουργία cookie στην τρέχουσα σελίδα.

lastModified - Η ιδιότητα αυτή δίνει την ημερομηνία και τη χρονική στιγμή που το έγγραφο τροποποιήθηκε τελευταία φορά. Για παράδειγμα, αν η τελευταία τροποποίηση του αρχείου έγινε στις 16 Ιουνίου 1997 στις 11: 24 π.μ., η τιμή της ιδιότητας θα είναι «06/16/97 11:24:00».

charset - Αποτελεί ένα σύνολο χαρακτήρων με το οποίο το έγγραφο κωδικοποιείται. Για φυλλομετρητές που χρησιμοποιούν την αγγλική γλώσσα η τιμή θα είναι «iso-8859-1».

location - Η ιδιότητα αυτή απλώς δίνει την URL που περιλαμβάνει το συγκκριμένο έγγραφο. Για παράδειγμα αν βλέπατε τις χρήσιμες πληροφορίες για τουςφοιτητές του Πανεπιστημίο στην uom.gr η συγκεκριμένη τιμή θα είναι « http://www.uom.gr/greek/stu_info/index.html ».

referrer - Το URL της σελίδας που είδατε πριν από τη συγκεκριμένη. Αν είδατε την κυρίως σελίδα της Microsoft πρωτού δείτε αυτή του Internet Explorer η τιμή θα είναι «www.microsoft.com». Αν δεν υπάρχει τέτοια σελίδα τότε η τιμή της ιδιότητας θα είναι κενή.

strReadyState - Η συγκεκριμένη ιδιότητα επιτρέπει στους χρήστες να γνωρίζουν πότε μια σελίδα έχει φορτωθεί ολοκληρωτικά.Μπορεί να πάρει τέσσερις τιμές. Η πρώτη είναι η «unitialized» που δηλώνει ότι το έγγραφο ξεκινά να φορτώνεται. Κατά τη διάρκεια της διαδικασίας (φορτώματος) η τιμή αλλάζει σε «loading». Όταν μεγάλο μέρος του εγγράφου μπορεί να χρησιμοποιηθεί, για παράδειγμα όταν μπορείτε να επιλέξετε συνδέσμους προτού φορτωθούν οι φωτογραφίες, η τιμή αλλάζει σε «interactive». Τέλος όταν η διαδικασία φορτώματος του εγγράφου έχει τελειώσει η strReadyState μετατρέπεται σε «complete».

domain - Η ιδιότητα domain παρέχει το όνομα domain του εξυπηρετητή δικτύου που παρέχει το έγγραφο. Στο παράδειγμα του εξυπηρετητή δικτύου του Πανεπιστημίου Μακεδονίας η τιμή θα είναι «www.uom.gr». Αν δεν φορτώσετε το έγγραφο από έναν εξυπηρετητή δικτύου η τιμή θα είναι κενή.

filesize - Η συγκεκριμένη ιδιότητα δίνει το μέγεθος του εγγράφου σε bytes.

fileCreatedDate - Η ιδιότητα αυτή παρέχει την ημέρα δημιουργίας του αρχείου. Σε αντίθεση με την ιδιότητα lastModified η fileCreatedDate παρουσιάζει λεπτομερώς την ημερομηνία. Μια ενδεικτική ημερομηνία - τιμή θα είναι «Monday, June 17,1999».

fileModifiedDate - Η ιδιότητα δίνει την ημέρα τελευταίας τροποποίησης του αρχείου. Μοιάζει αρκετά με την ιδιότητα lastModified εκτός του ότι δεν δίνει την ώρα της τελευταίας τροποποίησης του αρχείου.

fileUpdateDate - Με μία πρώτη ματιά η ιδιότητα fileUpdateDate φαίνεται ίδια με την fileModifiedDate. Η ιδιότητα fileUpdateDate παρέχει την ημερομηνία που ξαναφορτώσαμε το αρχείο, από τον απομακρυσμένο εξυπηρετητή, στον τοπικό browser.

Το αντικείμενο selection

Όπως ένας επεξεργαστής κειμένου έτσι και ο Internet Explorer σας δίνει τη δυνατότητα να επιλέξετε μέρος του εγγράφου. Αυτό γίνεται κρατώντας το πλήκτρο του ποντικιού και σέρνοντας το δείκτη πάνω από το κείμενο που θέλετε να επιλέξετε.
Πληροφορίες σχετικά με το κείμενο που έχετε επιλέξει με το ποντίκι είναι διαθέσιμες με το αντικείμενο selection. Αυτό μπορεί να φανεί χρήσιμο αν θελήσετε να δράσετε πάνω στην επιλογή του χρήστη όπως αλλαγή φόντου ή υπερτονισμός.
Το αντικείμενο selection έχει μια ιδιότητα την type που καθορίζει τον τύπο της επιλογής. Μπορεί να πάρει δύο τιμές: 0 αν δεν υπάρχει σημείο εισαγωγής της επιλογής, 1 διαφορετικά

Το αντικείμενο selection έχει τρεις μεθόδους ως εξής:

clear - Αδειάζει τα περιεχόμενα της επιλογής

createRange - Δημιουργεί ένα πεδίο κειμένου πάνω από την επιλογή.

empty - Απενεργοποιεί την τρέχουσα επιλογή.

Το αντικείμενο body

Το αντικείμενο body περιέχει πληροφορίες σχετικά με τα HTML στοιχεία που υλοποιούν το ορατό κομμάτι του εγγράφου HTML στο τρέχων παράθυρο του browser. Το αντικείμενο body αντιστοιχεί με το στοιχείο BODY στο έγγραφο HTML.

Ακολουθούν οι ιδιότητες που περιλαμβάνονται στο αντικείμενο body:

acceskey - Ο επιταχυντής (accelarator) για το σώμα (body).

background - Η φωτογραφία στο φόντο του σώματος (body).

bgcolor - Το χρώμα του φόντου του σώματος (body).

bgproperties - Οι ιδιότητες της φωτογραφίας στο φόντο, όπως αν η φωτογραφία ολισθαίνει στη σελίδα.

bottomMargin - Το κάτω περιθώριο σε εικονοστοιχεία για το σώμα της σελίδας.

className - Το CSS όνομα της σελίδας που σχετίζεται με το σώμα της σελίδας.

clientHeight - Το ύψος του σώματος σε εικονοστοιχεία.

clientWidht - Το εύρος του σώματος σε εικονοστοιχεία.

id - Ο αναγνωριστής CSS για το σώμα.

innerHTML - Ο κώδικας HTML μεταξύ της αρχικής και της τελικής ετικέτας του σώματος.

innerText - Ο HTML κώδικας μεταξύ της αρχικής και τελικής ετικέτας του σώματος απεικονιζόμενος καθαρά σαν κείμενο.

isTextEdit - Κατά πόσο μπορούμε ή όχι να διορθώσουμε το κείμενο. True αν μπορούμε false διαφορετικά.

lang- Ο ISO κώδικας για τη γλώσσα που χρησιμοποιείται.

leftMargin - Το αριστερό περιθώριο για ολόκληρη τη σελίδα αναπαριστάμενο σε εικονοστοιχεία.

offsetHeight - Το ύψος του σώματος σε εικονοστοιχεία.

offsetLeft - Η αριστερή θέση του σώματος σε εικονοστοιχεία.

offsetTop - Η ανώτατη θέση του σώματος σε εικονοστοιχεία.

offsetWidth - Το εύρος του σώματος σε εικονοστοιχεία.

rightMargin - Το δεξί περιθώριο ολόκληρης της σελίδας σε εικονοστοιχεία.

scroll - Πότε η μπάρα ολίσθησης είναι ενεργή ή ανενεργή. Αν είναι ενεργή «yes» διαφορετικά «no».

scrollLeft - Το σύνολο των εικονοστοιχείων μεταξύ του αριστερού άκρου του σώματος και του αριστερού άκρου που είναι ορατό για το χρήστη (την τρέχουσα χρονική στιγμή).

scrollTop - Το σύνολο των εικονοστοιχείων μεταξύ του ανώτατου άκρου του σώματος και του αριστερού άκρου.

scrollWidht - Το ύψος του σώματος που ολισθαίνει σε εικονοστοιχεία, συμπεριλαμβανομένων και των περιεχομένων που δεν είναι ορατά.

tagName - Η ετικέτα για το τρέχον αντικείμενο.

Ακολουθούν οι μέθοδοι που περιλαμβάνονται στο αντικείμενο object:

blur - Προκαλεί στο αντικείμενο object απώλεια εστίασης για το ποντίκι και το πληκτρολόγιο.

click - Προσομοιώνει το πάτημα του κουμπιού του ποντικιού από το χρήστη.

contains - Επιστρέφει true αν το στοιχείο που περνά σαν όρισμα περιέχεται στο σώμα, false διαφορετικά.

createTextRange - Δημιουργεί πεδίο κειμένου μέσα στο σώμα.

focus - Προκαλεί την απόκτηση εστίασης - του σώματος - για το ποντίκι και το πληκτρολόγιο.

getAttribute - Επιστρέφει την τιμή του χαρακτηριστικού που έχει περαστεί σαν όρισμα.

RemoveAtrribute - Μετακινεί, το χαρακτηριστικό που έχει περάσει σαν όρισμα, από το σώμα.

Η συλλογή all

Η συλλογή all ίσως είναι το πιο σημαντικό τμήμα του αντικειμένου object. Ο πιο ευθύς τρόπος για να χρησιμοποιήσετε την συλλογή all γίνεται αν αποκτήσετε πρόσβαση σ’ ένα στοιχείο του εγγράφου διαμέσου του id. Ας υποθέσουμε ότι έχετε την παρακάτω ετικέτα στο HTML έγγραφο σας.

< P id«=mainPara style =»font-weight : italic « Dynamic HTML »>

Αποκτάτε πρόσβαση στο στοιχείο διαμέσου της συλλογής all χρησιμοποιώντας το id της ετικέτας :

var elem =document.all(«mainPara»)

Για να πιστοποιήσετε ότι έχετε επιλέξει το σωστό αντικείμενο μπορείτε να χρησιμοποιήσετε μια λογική έκφραση μέσα σε μια δήλωση if.

If (mainPara = = elem)

{
document.write(«Selected correct element»);

}

Αν θέλετε να προσεγγίσετε τα στοιχεία της σελίδας με έναν πιο γενικό τρόπο μπορείτε να το κάνετε επιλέγοντας τα στοιχεία διαμέσου της μεθόδου tags( ) της συλλογής. Ο ακόλουθος κώδικας:

var allH1= document.all.tags(«H1»);

θα επιστρέψει μια συλλογή που περιλαμβάνει όλα τα επιθυμητά <H1> στοιχεία στο έγγραφο.

Πολλά στοιχεία θα παρουσιάζονται στο αντικείμενο document.all ακόμη και αν δεν τα έχετε αναφέρει λεπτομερώς στο έγγραφο της HTML. Αυτά είναι γνωστά ως συνεπαγόμενα (Implied) στοιχεία :

HTML – Τα HTML στοιχεία συνήθως καθορίζονται από την ετικέτα <HTML> στην κορυφή του εγγράφου και περιλαμβάνουν τα υπόλοιπα από τα στοιχεία καθορίζοντας ότι είναι HTML.

HEAD - Το στοιχείο HEAD καθορίζεται από την ετικέτα <HEAD> στην κορυφή του εγγράφου και περιλαμβάνει οποιοδήποτε στοιχείο που δεν θα είναι τμήμα του ορατού BODY τμήματος του εγγράφου.

BODY - Το στοιχείο BODY είναι το κύριο τμήμα του εγγράφου HTML και καθορίζεται από την ετικέτα BODY.

TBODY- Το στοιχείο TBODY είναι το σημείο όπου μπορείτε να βρείτε τα περιεχόμενα πινάκων. Σε αντίθεση με τα τρία προηγούμενα συνεπαγόμενα στοιχεία που ρητά αναγνωρίζονται από τους περισσότερους συγγραφείς HTML ,το στοιχείο TBODY πρέπει να θυμόσαστε ότι είναι συνεπαγόμενο.

Η συλλογή anchors

Η συλλογή anchors περιλαμβάνει όλα τα στοιχεία που περιέχουν μια ετικέτα <Α>. Συνήθως χρησιμοποιούνται σε έγγραφα για να καθορίσουν υπερσυνδέσμους, όπως στο παρακάτω παράδειγμα :

<A HREF =''http://www.microsoft.com''>The Microsoft Site</A>

Η συλλογή applets

Από το όνομα θα περιμέναμε να περιλαμβάνει θέματα και συγκεκριμένα Java θέματα. Σε αντίθεση η συλλογή applets περιλαμβάνει αυτό που η Microsoft ορίζει ως όλα τα αντικείμενα μέσα στο έγγραφο. Τα αντικείμενα που περιέχονται στη συλλογή applets περιλαμβάνουν τα εξής :

applets - Στοιχεία με την ετικέτα <APPLET>
embed - Στοιχεία με την ετικέτα <EMBED>

images - Όλες οι εικόνες του εγγράφου που συνήθως καθορίζονται με την ετικέτα <IMG>

objects -Οποιοδήποτε στοιχείο που χρησιμοποιεί την ετικέτα <OBJECT>

Η συλλογή forms

Η συλλογή forms περιλαμβάνει όλες τις φόρμες που παρουσιάζονται στο έγγραφο. Η φόρμα καθορίζεται σαν ένα έγγραφο που χρησιμοποιεί την ετικέτα FORM HTML. Η δυναμική HTML κάνει δυνατό τη τοποθέτηση συστήματος διασύνδεσης με το χρήστη εξωτερικά από μια φόρμα.

Η συλλογή images

Η συλλογή images περιλαμβάνει όλες τις φωτογραφίες του εγγράφου. Η εικόνα καθορίζεται σαν ένα στοιχείο που χρησιμοποιεί την ετικέτα IMG HTML. Φωτογραφίες που δημιουργούνται χωρίς την ετικέτα IMG HTML, όπως αυτές από Java applet ActiveXControl δεν θα παρουσιάζονται σ’αυτή τη συλλογή.

Η συλλογή links

Η συλλογή links περιλαμβάνει όλους τους υπερσυνδέσμους στο έγγραφο. Η συλλογή περιλαμβάνει όλα τα στοιχεία της συλλογής anchors καθώς και τα στοιχεία που χρησιμοποιούν την ετικέτα <AREA>.

Η συλλογή frames

Η συλλογή frames περιλαμβάνει όλα τα πλαίσια του εγγράφου. Σαν πλαίσια θεωρούνται τα παράθυρα της HTML γι’αυτό αυτή η συλλογή περιλαμβάνει window αντικείμενα αντί για πραγματικά πλαίσια στοιχεία- αντικείμενα.

Η συλλογή script

Η συλλογή script περιλαμβάνει όλα τα σενάρια του εγγράφου. Τα σενάρια απεικονίζονται και μπορούν να ανακτηθούν-σωθούν ως κείμενο.

Η συλλογή embeds

Η συγκεκριμένη συλλογή περιέχει όλα τα εμπεδωμένα περιεχόμενα του κειμένου. Τα plugin είναι προγράμματα που έχουν συνενωθεί στον browser για να αυξήσουν την λειτουργικότητα του.

Η συλλογή plugins

Ένας διαφορετικός τρόπος ονομασίας για την embeds συλλογή.

Η συλλογή filters

Η συλλογή filters περιλαμβάνει όλα τα DHTML Multimedia Filters για το έγγραφο. Ένα φίλτρο καθιστά δυνατή την τροποποίηση του ορατού θέματος κάθε στοιχείου κατά τη διάρκεια της λειτουργίας.

Η συλλογή styleSheets

Η συλλογή styleSheets περιλαμβάνει όλα τα στυλ των φύλλων του εγγράφου.
 

Αρχική Σελίδα Περιεχόμενα DHTML Κεφάλαιο 4 Κεφάλαιο 2