Πώς χρησιμοποιείται το Dynamic HTML (DHTML) για τη δημιουργία διαδραστικών σελίδων

click fraud protection

Το Dynamic HTML δεν είναι πραγματικά μια νέα προδιαγραφή HTML, αλλά ένας διαφορετικός τρόπος εξέτασης και ελέγχου των τυπικών κωδικών και εντολών HTML.

Όταν σκέφτεστε δυναμική HTML, πρέπει να θυμάστε τις ιδιότητες του τυπικού HTML, ειδικά ότι μόλις φορτωθεί μια σελίδα από το διακομιστή, δεν θα αλλάξει έως ότου έρθει ένα άλλο αίτημα στον διακομιστή. Το δυναμικό HTML σάς δίνει περισσότερο έλεγχο στα στοιχεία HTML και σας επιτρέπει να αλλάξετε ανά πάσα στιγμή, χωρίς να επιστρέψετε στον διακομιστή Web.

Υπάρχουν τέσσερα μέρη στο DHTML:

  • Μοντέλο αντικειμένου εγγράφου (DOM) (ορισμός)
  • Σενάρια
  • Διαδοχικά φύλλα στυλ (CSS)
  • XHTML

ΝΟΜ

Το DOM είναι αυτό που σας επιτρέπει να έχετε πρόσβαση σε οποιοδήποτε μέρος της ιστοσελίδας σας για να το αλλάξετε με DHTML. Κάθε τμήμα μιας ιστοσελίδας καθορίζεται από το DOM και χρησιμοποιώντας τις συνεπείς συμβάσεις ονομασίας του μπορείτε να έχετε πρόσβαση σε αυτά και να αλλάξετε τις ιδιότητές τους.

Σενάρια

Τα σενάρια που γράφονται είτε σε JavaScript είτε σε ActiveX είναι οι δύο πιο κοινές γλώσσες σεναρίου που χρησιμοποιούνται για την ενεργοποίηση του DHTML. Χρησιμοποιείτε μια γλώσσα δέσμης ενεργειών για τον έλεγχο των αντικειμένων που καθορίζονται στο DOM.

instagram viewer

Διαδοχικά φύλλα στυλ

Το CSS χρησιμοποιείται στο DHTML για τον έλεγχο της εμφάνισης και της αίσθησης της ιστοσελίδας. Τα φύλλα στυλ καθορίζουν τα χρώματα και τις γραμματοσειρές του κειμένου, τα χρώματα και τις εικόνες φόντου και την τοποθέτηση αντικειμένων στη σελίδα. Χρησιμοποιώντας scripting και το DOM, μπορείτε να αλλάξετε το στυλ των διαφόρων στοιχείων.

XHTML

Το XHTML ή το HTML 4.x χρησιμοποιείται για τη δημιουργία της ίδιας της σελίδας και τη δημιουργία των στοιχείων για το CSS και το ΝΟΜ να εργαστούν για. Δεν υπάρχει τίποτα το ιδιαίτερο για το XHTML για DHTML - αλλά το έγκυρο XHTML είναι ακόμη πιο σημαντικό, καθώς υπάρχουν περισσότερα πράγματα που λειτουργούν από αυτό απλώς από το πρόγραμμα περιήγησης.

Χαρακτηριστικά του DHTML

Υπάρχουν τέσσερα κύρια χαρακτηριστικά του DHTML:

  1. Αλλαγή των ετικετών και των ιδιοτήτων
  2. Θέση σε πραγματικό χρόνο
  3. Δυναμικές γραμματοσειρές (Netscape Communicator)
  4. Δέσμευση δεδομένων (Internet Explorer)

Αλλαγή των ετικετών και των ιδιοτήτων

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

Θέση σε πραγματικό χρόνο

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

Δυναμικές γραμματοσειρές

Αυτό είναι ένα χαρακτηριστικό μόνο Netscape. Το Netscape το ανέπτυξε για να ξεπεράσει το πρόβλημα που είχαν οι σχεδιαστές με το να μην γνωρίζουν ποιες γραμματοσειρές θα ήταν στο σύστημα ενός αναγνώστη. Με δυναμικές γραμματοσειρές, οι γραμματοσειρές κωδικοποιούνται και λαμβάνονται με τη σελίδα, έτσι ώστε η σελίδα να φαίνεται πάντα με τον τρόπο που ο σχεδιαστής ήθελε. Μπορείτε επίσης να χρησιμοποιήσετε γραμματοσειρές ασφαλείς στον ιστό.

Δεσμευτική δεδομένων

Αυτή είναι μια δυνατότητα μόνο για IE. Η Microsoft το ανέπτυξε για να επιτρέπει ευκολότερη πρόσβαση βάσεις δεδομένων από ιστότοπους. Είναι πολύ παρόμοιο με τη χρήση CGI για πρόσβαση σε μια βάση δεδομένων, αλλά χρησιμοποιεί ένα στοιχείο ελέγχου ActiveX για να λειτουργήσει. Αυτή η δυνατότητα είναι πολύ προηγμένη και δύσκολη στη χρήση για τον αρχικό συγγραφέα DHTML.

instagram story viewer