ΕΙΣΑΓΩΓΗ ΣΤΗΝ DHTML
Η εξέλιξη στο Internet είναι ραγδαία σε έναν κυρίως τομέα: την εξάπλωσή του σε ολόκληρο τον πλανήτη, ενώνοντας εκατομμύρια και σύντομα δισεκατομμύρια ανθρώπους. Είναι φυσικό να εξελίσσονται λοιπόν και οι γλώσσες προγραμματισμού που προβάλουν τα δεδομένα του στις δικτυοσελίδες.
Τι είναι DHTML; Αυτή είναι μια δύσκολη ερώτηση αλλά υπάρχει απάντηση. Η πιο βολική απάντηση σε αυτό το ερώτημα είναι ότι η DHTML είναι ο συνδυασμός της HTML και της JavaScript σε μία ενιαία γλώσσα. Όμως κάθε σελίδα που είναι φτιαγμένη με HTML και Javascript μπορούμε να πούμε ότι είναι φτιαγμένη και με DHTML; Όχι φυσικά! Και αυτό γιατί η DHTML δεν είναι μία γλώσσα εργαλείο δημιουργίας διαφόρων script όπως η Javascript αλλά είναι μάλλον μία εμπλουτισμένη HTML που εκμεταλλεύεται πλέον τις δυνατότητες που έχουν οι Browsers τέταρτης γενιάς στην δημιουργία σελίδων. Δυνατότητες που δεν μπορείτε να αντιληφθείτε σερφάροντας σε σελίδες που έχουν κατασκευαστεί με απλή HTML πριν από μερικά χρόνια.
Βλέποντας και την ίδια την λέξη DHTML έχουμε μια καλή εικόνα των προθέσεων των κατασκευαστών της: σημαίνει Dynamic HTML! Το HTML μας θυμίζει ότι ακόμα κι αν έχει προσθέσει πολλά νέα και εντυπωσιακά στοιχεία στην δομή της HTML ο βασικός της κορμός και μέρος της σύνταξής της παραμένει HTML. Το ενδιαφέρον σημείο της είναι το "δυναμικό", και αυτό σημαίνει την δυνατότητα μεταβολής της μορφής της ιστοσελίδας μας αφού αυτή έχει φορτωθεί ήδη στον Browser του χρήστη!
Αν δεν καταλάβατε ακόμα πόσο σημαντικό και χρήσιμο είναι αυτό σκεφτείτε το εξής: ότι για να δείτε μία εικόνα σκοτεινή και την άλλη στιγμή φωτεινή με την HTML ο μόνος τρόπος είναι να ξαναφορτώσετε ολόκληρη τη σελίδα από την αρχή! Ακόμα και η Javascript δεν είναι αποτελεσματική για αυτή τη λειτουργία και μπορεί να σας αφήσει συχνά να κοιτάτε μία μισοκατεστραμένη σελίδα! Αντίθετα η DHTML σας επιτρέπει να αλλάξετε ορισμένα μόνο συστατικά μιας σελίδας, αυτά που θέλετε εσείς, χωρίς να φορτώσει πάλι η σελίδα!
Ένα από τα προβλήματα που ανακύπτουν από την εμφάνιση της DHTML είναι ότι οι δύο βασικοί αντίπαλοι στον χώρο των Browsers, η Microsoft και η Netscape (που ανήκει πλέον στην AOL) δεν συνεργάζονται για την δημιουργία ενός κοινού στάνταρ στον χώρο αλλά προσθέτουν συνεχώς κάποια διαφορετικά στοιχεία στους Browser τους. Αυτό σημαίνει πως οι τελευταίες εκδόσεις των Internet Explorer 5 και Netscape Navigator 4.6 αντιμετωπίζουν κάπως διαφορετικά τον κώδικα της DHTML και έτσι δεν είναι δυνατόν προς το παρόν κάποιος να γράψει έναν κώδικα που να δουλεύει και στους δύο Browsers. To ποιος browser είναι πιο κατάλληλος για να αξιοποιηθεί σαν DHTML εργαλείο είναι προσωπική επιλογή του καθενός ενώ η δική μας συμβουλή σε όποιον θέλει να γράψει σελίδες σε DHTML είναι να φτιάχνει δύο διαφορετικούς κώδικες έναν για κάθε browser και να χρησιμοποιεί μία τεχνική για να ελέγχει ποιον χρησιμοποιεί ο επισκέπτης του και μετά να φορτώνει τον κατάλληλο κώδικα!
Για να δούμε τις διαφορές ας δούμε τον παρακάτω κώδικα για Internet Explorer 4 :
HTML>
<HEAD>
<TITLE>DHTML MOVE FOR IE</TITLE>
</HEAD>
<BODY BACKGROUND="" BGCOLOR="#ffffff" TEXT="#000000" LINK="#0000ff" VLINK="#800080" ALINK="#ff0000">
<div id="moving" style="position:relative">
<img src="1.gif">
</div>
<script>
function moving2(){
if (moving.style.pixelLeft<1000)
moving.style.pixelLeft+=5
moveid2=setTimeout("moving2()",50)
}
function come_back2(){
clearTimeout(moveid2)
moving.style.pixelLeft=0
}
</script>
<form>
<input type="button" value="KINHSH" onClick="moving2()">
<input type="button" value="EPISTROFH" onClick="come_back2()">
</form>
</BODY>
</HTML>
Αν προσπαθήσετε να τρέξετε το πρόγραμμα στον Netscape Navigator θα δείτε ότι η σελίδα θα φορτώσει κανονικά αλλά δεν θα δώσει κίνηση στην εικόνα σας. Ο κώδικας για τον Netscape Navigator 4 είναι:
<html>
<head>
<title>DHTML MOVE FOR NN</title>
</head>
<body text="#000000" bgcolor="#FFFFFF" link="#0000FF" vlink="#800080" alink="#FF0000">
<layer name="NN">
<img SRC="1.gif" >
</layer>
<script>
function moving(){
if (document.NN.left<1100)
document.NN.left+=4
moveid=setTimeout("moving()",50)
}
function come_back(){
clearTimeout(moveid)
document.NN.left=5
}
</script>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<form><input type="button" value="KINHSH" onClick="moving()"><input type="button" value="EPISTROFH" onClick="come_back()"></form>
</body>
</html>
Κοιτώντας τους δύο αυτούς κώδικες έχουμε μερικές σημαντικές παρατηρήσεις:
Πρώτα απ' όλα ότι και στις δύο περιπτώσεις ο κώδικας είναι του ίδιου μεγέθους, 600 bytes! Όμως δύ λέξεις κάνουν όλη την διαφορά στην εφαρμογή και στην φιλοσοφία πίσω από τις δύο αυτές διαφορετικές προσεγγίσεις, Style και Layer. Ειδικότερα:
Στον Netscape Navigator χρησιμοποιείται με αρκετά απλό τρόπο η καινούρια εντολή <layer>. Η δύναμη που προσφέρει έγκειται στο ότι το περιεχόμενό της μπορεί να τοποθετηθεί σε οποιοδήποτε σημείο της σελίδας ανεξάρτητα αν από κάτω υπάρχει κάτι άλλο! Με την ίδια ευκολία μπορείτε να το μετακινήσετε και να ανανεώνετε μόνο το δικό του περιεχόμενο ανεξάρτητα από την υπόλοιπη σελίδα. Όσοι γνωρίζουν τα βασικά από προγραμματισμό video games θα παρομοιάσουν άνετα αυτή την δυνατότητα με την εναλλαγή ή την επικάλυψη screens!
Ο τρόπος με τον οποίο συντάσσεται η εντολή/tag δεν διαφέρει από εκείνο των υπόλοιπων tag της απλής HTML καθιστώντας την έτσι γρήγορη επιλογή για τους γνώστες HTML. Η σύνταξή της είναι
<layer>ΚΕΙΜΕΝΟ</layer>
Όπως βλέπετε όπως οι περισσότερες εντολές της HTML έτσι και η <layer> ανοίγει και κλείνει (κλείνει με την </layer>) αλλά είναι κυρίως μια εντολή περιεχομένου. Δηλαδή μπορείτε να βάλετε μέσα της τα πάντα, από απλό κείμενο μέχρι ολόκληρο table!
Όμως όπως οι περισσότερες σημαντικές εντολές της HTML έτσι και η <layer> χρειάζεται μερικές συμπληρωματικές εντολές/attributes για να δείξει την πραγματική της δύναμη. Με αυτά μπορείτε να το τοποθετήσετε σε όποια συντεταγμένη μέσα στην σελίδα θέλετε, να κάνετε να εμφανίζεται μόνο ένα συγκεκριμένο μέρος του, να του βάλετε background, να το κρύψετε εντελώς κ.α. Ορίστε τα πιο σημαντικά atributes:
id – Το όνομα του layer που χρησιμεύει για να το αναγνωρίζει το script σας
left – Η θέση του layer σε σχέση με τον οριζόντιο άξονα
top – Η θέση του layer σε σχέση με τον κάθετο άξονα
width – Ορίζει το πλάτος του layer σε pixel px ή ποσοστό %
Height – Ορίζει το ύψος του layer σε pixel px ή ποσοστό %
BgColor – Καθορίζει το χρώμα του background του layer
Background – Καθορίζει την εικόνα που θα χρησιμοποιήσετε για background
Src – Ο εξωτερικός HTML κώδικας που περιέχεται στο layer
Για να δημιουργήσετε το δικό σας layer αρκεί να βάλετε αυτά τα attributes στη σειρά. Μπορείτε να πειραματιστείτε άφοβα αλλάζοντας το παρακάτω παράδειγμα:
<HTML>
<HEAD>
<TITLE>CENTERED LAYER <TITLE>
</HEAD>
<BODY BACKGROUND="" BGCOLOR="#ffffff" TEXT="#000000" LINK="#0000ff" VLINK="#800080" ALINK="#ff0000">
<layer id="layer1" left=40% top=100 width=200px height=140px bgColor="gold"><h2>this is my layer</h2></layer>
</BODY>
</HTML>
Στον Internet Explorer η ίδια λειτουργία γίνεται με περισσότερες της μία εντολής. Πολλοί θα βρουν τις δυνατότητες του IE πιο πολλές αλλά σίγουρα και πιο πολύπλοκες. Η λέξη κλειδί εδώ είναι style και οι εντολές της HTML στον ΙΕ μπορούν να υποστηρίζουν styles και να αποκτούν "δυναμικά" χαρακτηριστικά. Ας δούμε τα attributes που μπορεί να πάρει ένα element (ένα στοιχείο δηλαδή δημιουργημένο με τις εντολές του style) :
Backgroundcolo - Το χρώμα του background
Backgroundimage – Καρθορίζει την εικόνα που θα χρησιμοποιηθεί για background
Color – Καθορίζει το χρώμα του element
Position – Καθορίζει την θέση του αντικειμένου σε "απόλυτη" και "σχετική" θέση
PixelWidth – Καθορίζει το πλάτος του element
PixelHeight – καθορίζει το ύψος του element
PixelLeft – Η θέση του element σε σχέση με τον οριζόντιο άξονα.
PixelTop – Η θέση του element σε σκέση με τον κάθετο άξονα.
Όπως και στην περίπτωση του <layer> έτσι και για το style πρέπει να χρησιμοποιήσετε το attribute id για να δώσετε στον browser να καταλάβει το όνομα του style που θα χρησιμοποιήσετε. Για παράδειγμα βάζοντας το id ως εξής:
<span id="text"></span>
μπορείτε ανά πάσα στιγμή να επικαλεστείτε το στυλ με την ακόλουθη σύνταξη:
text.style
Πρέπει να παραδεχτούμε ότι μέσα σε μερικές προτάσεις δεν μπορεί κάποιος να εξηγήσει την DHTML στον Internet Explorer οπότε σας οφείλω ένα τουλάχιστον εύκολο παράδειγμα. Με τον ακόλουθο κώδικα μπορείτε να αλλάξετε το χρώμα του κειμένου όταν το mouse περνάει από πάνω του:
<HTML>
<HEAD>
<TITLE>MAKE ME BLUE</TITLE>
</HEAD>
<BODY BACKGROUND="" BGCOLOR="#ffffff" TEXT="#000000" LINK="#0000ff" VLINK="#800080" ALINK="#ff0000">
<span id="text" onMouseover="text.style.color='blue'"
onMouseout="text.style.color='black'">APLWS PERASE TO MOUSE APO PANW GIA NA GINEI MPLE!</span>
</BODY>
</HTML>
Μπορείτε να πειραματιστείτε με το παραπάνω παράδειγμα και να αλλάξετε τα ονόματα των χρωμάτων κατά βούληση αλλά να θυμάστε ότι δουλεύει μόνο σε Internet Explorer 4 και πάνω!