Υπολογιστές

Εισαγωγή στη δυναμική HTML - DHTML

Οκτώβριος 2022

Εισαγωγή στη δυναμική HTML - DHTML


Ακριβώς τι είναι το Δυναμικό HTML; Πρώτον, δεν είναι μια γλώσσα προγραμματισμού με την καθαρότερη έννοια. Το DHTML είναι ένας συνδυασμός τριών πραγμάτων. Φύλλα στυλ Cascading, JavaScript και DOM. Το CSS χρησιμοποιείται για τον έλεγχο της εμφάνισης και τοποθέτησης τμημάτων μιας ιστοσελίδας. Το JavaScript είναι μια γλώσσα δέσμης ενεργειών από την πλευρά του πελάτη που προκαλεί την εμφάνιση της ιστοσελίδας. Το DOM είναι το προσχέδιο της ιστοσελίδας. Ας υποθέσουμε ότι θέλετε να χρησιμοποιήσετε το DHTML για να προσθέσετε ένα chaser στο δρομέα του ποντικιού. Αυτή είναι μια μικρή εικόνα που ακολουθεί το δρομέα του ποντικιού σας πάνω στην ιστοσελίδα.

DOM

Χρειαζόμαστε έναν τρόπο να πούμε πότε ο κέρσορας του ποντικιού μετακινείται. Μπορούμε να το κάνουμε αυτό με το Μοντέλο αντικειμένων εγγράφου ή το DOM, το οποίο είναι μια μέθοδος ονοματοδοσίας όλων σε μια ιστοσελίδα ακριβώς όπως ένα σχέδιο ονομάζει κάθε τμήμα ενός σπιτιού. Για παράδειγμα, αν θέλετε να μάθετε πότε κάποιος ανοίγει (μετακινήστε) το παράθυρο στην κουζίνα του σπιτιού σας, θα λέγατε σπίτι. Το DOM document.onmousemove λειτουργεί με τον ίδιο τρόπο για να εντοπίσει την κίνηση του ποντικιού.

CSS

Προκειμένου η εικόνα του chaser να ακολουθήσει τον κέρσορα του ποντικιού γύρω από την ιστοσελίδα, πρέπει να επανατοποθετήσουμε την εικόνα του chaser κάθε φορά που μετακινείται το ποντίκι. Θα χρησιμοποιήσουμε τη δυνατότητα τοποθέτησης των Φύλλων Στυλ Cascading για να το κάνετε αυτό. Θα χρησιμοποιήσουμε το CSS για να πούμε στο πρόγραμμα περιήγησης να διατηρεί πάντα την εικόνα του chaser σε κάποια απόσταση από τον δρομέα του ποντικιού. Επομένως, όταν το ποντίκι κινείται, θα το κάνει και ο chaser.

JavaScript

Θέλουμε την εικόνα του chaser να μετακινηθεί μόνο όταν το ποντίκι μετακινείται, πρέπει να το προγραμματίσουμε στην ιστοσελίδα. Μπορούμε να χρησιμοποιήσουμε μια γλώσσα δέσμης ενεργειών, μια μικρή γλώσσα προγραμματισμού, για να πούμε στο πρόγραμμα περιήγησης ιστού πώς να ανταποκρίνεται όταν συμβαίνει κάτι (όταν συμβεί κάποιο συμβάν) στην ιστοσελίδα. Θα χρησιμοποιήσουμε το JavaScript για να το κάνουμε αυτό. Στο παράδειγμά μας, το συμβάν είναι η κίνηση του δρομέα του ποντικιού (onmousemove). Έτσι, θα προγραμματίσουμε το πρόγραμμα περιήγησης στο Web να ανταποκριθεί στο event onmousemove επανατοποθετώντας την εικόνα του chaser σύμφωνα με τις οδηγίες του CSS.

Σημείωση προσοχής

Μπορείτε να χρησιμοποιήσετε το DHTML για να κάνετε μερικά δροσερά πράγματα στις ιστοσελίδες σας που μπορεί να είναι πολύ διασκεδαστικό για εσάς και τους αναγνώστες σας. Ωστόσο, πρέπει να έχετε κατά νου ότι κάθε πρόγραμμα περιήγησης ιστού είναι διαφορετικό και το δροσερό αποτέλεσμα που προγραμματίζετε μπορεί να λειτουργήσει διαφορετικά ή και καθόλου σε ορισμένα προγράμματα περιήγησης ιστού. Για παράδειγμα, ο chaser του ποντικιού δεν θα λειτουργήσει στο πρόγραμμα περιήγησης Firefox.




Δωρεάν δημιουργία ιστοσελίδας-(Εισαγωγή στο wordpress 1o Μάθημα) (Οκτώβριος 2022)



Άρθρο Tags: Εισαγωγή στη δυναμική HTML - DHTML, HTML, τι είναι το DHTML, τι είναι το Dynamic HTML, τι είναι το JavaScript, τι είναι το DOM, τι είναι το CSS, τι είναι τα Cascading Style Sheets, πώς λειτουργεί το DHTML