Βίντεο: Μαθημα Javascript - 1 - Εισαγωγή Aloykatos PC Tech 2024
Από τον John Paul Mueller
Το JavaScript χρησιμοποιεί αντικείμενα εκτενώς. Γνωρίζοντας ποια αντικείμενα πρέπει να χρησιμοποιήσετε και πότε είναι σημαντικά μέρη της εργασίας με το JavaScript. Γνωρίζοντας τον Browser, τον κύριο τύπο αντικειμένου εγγράφου (DOM) και τα αντικείμενα HTML DOM, μπορείτε να δημιουργήσετε ένα σημαντικό μέρος κάθε τυποποιημένης εφαρμογής (και πολλών απλών εφαρμογών). Αυτά είναι τα πιο συχνά χρησιμοποιούμενα αντικείμενα JavaScript, ώστε να τα κρατάτε στα χέρια σας.
Τρόπος χρήσης αντικειμένων προγράμματος περιήγησης JavaScript για τη διαχείριση του περιβάλλοντος εφαρμογών
Τα αντικείμενα του προγράμματος περιήγησης JavaScript επιτρέπουν την αναζήτηση και αλλαγή του περιβάλλοντος εφαρμογής. Γνωρίζοντας πού έχει πάει ο χρήστης, όπου βρίσκεται ο χρήστης και πού μπορείτε να πάρετε τον χρήστη, μπορείτε να ελέγξετε αποτελεσματικά τη ροή εφαρμογών. Φυσικά, είναι σημαντικό να γνωρίζετε ποια οθόνη μεγέθους έχει ο χρήστης, ώστε να μπορείτε να παρουσιάζετε δεδομένα με τρόπο που να αντικατοπτρίζει τη φυσικότητα της συσκευής του χρήστη.
Ο παρακάτω πίνακας περιγράφει κάποιες από τις πιο ενδιαφέρουσες επιλογές προγράμματος περιήγησης JavaScript.
| Αντικείμενο | Περιγραφή |
|---|---|
| ιστορικό | Παρέχει τα μέσα για την εξέταση και τη μετακίνηση μεταξύ των αποθηκευμένων URL
στο ιστορικό του προγράμματος περιήγησης. Μπορείτε να δείτε μια πλήρη λίστα με τις μεθόδους και τις ιδιότητες που σχετίζονται με αυτό το αντικείμενο στη διεύθυνση www. w3schools. com / jsref / obj_history. ασπίδα. |
| τοποθεσία | Περιέχει πληροφορίες σχετικά με την τρέχουσα διεύθυνση URL. Αυτό το αντικείμενο επίσης
παρέχει τα μέσα για την εκτέλεση εργασιών όπως φόρτωση νέας σελίδας ή επαναφόρτωση της τρέχουσας σελίδας. Μπορείτε να δείτε μια πλήρη λίστα με τις μεθόδους και τις ιδιότητες που σχετίζονται με αυτό το αντικείμενο στη διεύθυνση www. w3schools. com / jsref / obj_location. ασπίδα. |
| πλοηγός | Περιέχει πληροφορίες σχετικά με το τρέχον πρόγραμμα περιήγησης. Για παράδειγμα,
μπορείτε να προσδιορίσετε τον τύπο του προγράμματος περιήγησης και εάν το πρόγραμμα περιήγησης έχει ενεργοποιημένα τα cookies. Μπορείτε να δείτε μια πλήρη λίστα με τις μεθόδους και τις ιδιότητες που σχετίζονται με αυτό το αντικείμενο στη διεύθυνση www. w3schools. com / jsref / obj_navigator. ασπίδα. |
| οθόνη | Καθορίζει τα φυσικά χαρακτηριστικά της συσκευής που χρησιμοποιείται για την εμφάνιση της σελίδας , συμπεριλαμβανομένου του ύψους, του πλάτους και του βάθους χρώματος της σελίδας.
Μπορείτε να δείτε μια πλήρη λίστα με τις μεθόδους και τις ιδιότητες που σχετίζονται με αυτό το αντικείμενο στο www. w3schools. com / jsref / obj_screen. ασπίδα. |
| παράθυρο | Παρέχει πρόσβαση στο παράθυρο του προγράμματος περιήγησης έτσι ώστε να μπορείτε να εκτελέσετε
εργασίες όπως η εμφάνιση πλαισίων μηνυμάτων. Όταν εργάζεστε με σελίδες που περιέχουν πλαίσια, το πρόγραμμα περιήγησης δημιουργεί ένα παράθυρο για ολόκληρο το έγγραφο HTML και ένα άλλο παράθυρο για κάθε πλαίσιο.Μπορείτε να δείτε μια πλήρη λίστα με τις μεθόδους και τις ιδιότητες που σχετίζονται με αυτό το αντικείμενο στη διεύθυνση www. w3schools. com / jsref / obj_window. ασπίδα. |
Τρόπος χρήσης των αντικειμένων κεντρικού DOM για τη διαχείριση περιεχομένου εφαρμογής
Ο στόχος οποιασδήποτε εφαρμογής JavaScript είναι η διαχείριση περιεχομένου. Αυτό σημαίνει την προσθήκη, τη διαγραφή και την επεξεργασία του εγγράφου HTML που περιέχει τα διάφορα στοιχεία που δομούν και υποστηρίζουν το περιεχόμενο. Αυτά τα αντικείμενα παρέχουν πρόσβαση σε όλες τις λεπτομέρειες του εγγράφου σε σχέση με το περιεχόμενο.
| Αντικείμενο | Περιγραφή |
|---|---|
| Attr | Παρέχει πρόσβαση σε μεμονωμένα χαρακτηριστικά μέσα στο έγγραφο.
Μπορείτε να δείτε μια πλήρη λίστα με τις μεθόδους και τις ιδιότητες που σχετίζονται με αυτό το αντικείμενο στο www. w3schools. com / jsref / dom_obj_attr. ασπίδα. |
| έγγραφο | Παρέχει πρόσβαση σε όλο το έγγραφο. Μπορείτε να χρησιμοποιήσετε αυτό το αντικείμενο
για να αποκτήσετε πρόσβαση σε οποιοδήποτε τμήμα του εγγράφου. Επιπλέον, αυτό το αντικείμενο επιτρέπει να προβάλλετε πληροφορίες απευθείας στη σελίδα και να εκτελέσετε άλλες εργασίες που σχετίζονται με το περιβάλλον εργασίας χρήστη. Μπορείτε να δείτε μια πλήρη λίστα με τις μεθόδους και τις ιδιότητες που σχετίζονται με αυτό το αντικείμενο στη διεύθυνση www. w3schools. com / jsref / dom_obj_core_document. ασπίδα. |
| Στοιχείο | Περιέχει ένα ξεχωριστό στοιχείο εγγράφου οποιουδήποτε τύπου που υποστηρίζεται
ως XML. Αυτό το αντικείμενο παρέχει πρόσβαση σε ιδιότητες μέσω του αντικειμένου Attr και ιδιοτήτων μέσω του αντικειμένου Node. Μπορείτε να δείτε μια πλήρη λίστα με τις μεθόδους και τις ιδιότητες που σχετίζονται με αυτό το αντικείμενο στη διεύθυνση www. w3schools. com / jsref / dom_obj_element. ασπίδα. |
| Εκδηλώσεις | Υποστηρίζει πρόσβαση σε υπάρχοντα συμβάντα και δημιουργία νέων.
Μπορείτε να δείτε μια πλήρη λίστα με τις μεθόδους και τις ιδιότητες που σχετίζονται με αυτό το αντικείμενο στο www. w3schools. com / jsref / dom_obj_event. ασπίδα. |
| HTMLElement | Περιέχει ένα ξεχωριστό στοιχείο εγγράφου HTML, όπως μια παράγραφο
ή ένα στοιχείο ελέγχου. Χρησιμοποιήστε τα αντικείμενα Element και Node για να αποκτήσετε πρόσβαση σε χαρακτηριστικά και ιδιότητες στοιχείου . Μπορείτε να δείτε μια πλήρη λίστα με τις μεθόδους και τις ιδιότητες που σχετίζονται με αυτό το αντικείμενο στη διεύθυνση www. w3schools. com / jsref / dom_obj_all. ασπίδα. |
| Κόμβος | Ορίζει τα στοιχεία κάθε δεδομένου κόμβου, το οποίο μπορεί να περιλαμβάνει
το έγγραφο ως σύνολο, ένα στοιχείο μέσα στο έγγραφο και ένα χαρακτηριστικό που παρέχεται ως στοιχείο ενός στοιχείου, κειμένου και σχολίων. Μπορείτε να δείτε μια πλήρη λίστα με τις μεθόδους και τις ιδιότητες που σχετίζονται με αυτό το αντικείμενο στο www. w3schools. com / jsref / dom_obj_node. ασπίδα. |
| NodeFilter | Καθορίζει ποιοι κόμβοι εμφανίζονται ως μέρος ενός NodeIterator που χρησιμοποιείται για να διασχίσει τη λίστα των κόμβων
μέσα σε ένα έγγραφο. Μπορείτε να δείτε μια πλήρη λίστα με τις μεθόδους και τις ιδιότητες που σχετίζονται με αυτό το αντικείμενο στη διεύθυνση // developer. mozilla. org / en-US / docs / DOM / NodeFilter. |
| NodeIterator | Παρέχει μια μέθοδο για την απόκτηση μιας λίστας κόμβων μέσα σε ένα έγγραφο
. Η μετακίνηση της λίστας των κόμβων μπορεί να σας βοηθήσει να εντοπίσετε συγκεκριμένους κόμβους και να αλληλεπιδράσετε με αυτούς. Για παράδειγμα, ίσως βρείτε όλους τους κόμβους tag και προσθέστε ένα ειδικό χαρακτηριστικό σε αυτές. Μπορείτε να δείτε μια πλήρη λίστα με τις μεθόδους και τις ιδιότητες που σχετίζονται με αυτό το αντικείμενο στη διεύθυνση // developer.mozilla. org / en-US / docs / DOM / NodeIterator. |
| NodeList | Περιέχει μια ταξινομημένη λίστα όλων των κόμβων του εγγράφου
ή σε μια συγκεκριμένη περιοχή του εγγράφου. Μπορείτε να δείτε μια πλήρη λίστα των μεθόδων και ιδιοτήτων που σχετίζονται με αυτό το αντικείμενο στο www. w3schools. com / jsref / dom_obj_nodelist. ασπίδα. |
| NamedNodeMap | Περιέχει μια μη ταξινομημένη λίστα όλων των κόμβων μέσα στο έγγραφο
ή σε μια συγκεκριμένη περιοχή του εγγράφου. Μπορείτε να δείτε μια πλήρη λίστα των μεθόδων και ιδιοτήτων που σχετίζονται με αυτό το αντικείμενο στο www. w3schools. com / jsref / dom_obj_namednodemap. ασπίδα. |
Χρήση αντικειμένων HTML DOM για διαχείριση δομής
Η οργάνωση των πληροφοριών που βλέπει ο χρήστης στην οθόνη σε συνεκτική παρουσίαση χρησιμοποιώντας το JavaScript είναι σημαντική. Ο χρήστης θα πρέπει να δει τη δομή του εγγράφου HTML, αλλά η δομή θα πρέπει να υποστηρίζει το περιεχόμενο - δεν πρέπει να δίνει προσοχή στον εαυτό του. Όταν εργάζεστε με μια σελίδα, η δομή περιλαμβάνει όλα από πίνακες σε στοιχεία ελέγχου που χρησιμοποιούνται για να αλληλεπιδράσουν και να διαχειρίζονται το περιεχόμενο που ο χρήστης ενδιαφέρεται περισσότερο να δει. Τα παρακάτω αντικείμενα HTML DOM σας βοηθούν να εκτελέσετε αυτήν την εργασία όταν εργάζεστε με το JavaScript.
| Αντικείμενο | Περιγραφή |
|---|---|
| Έγγραφο | Παρέχει πρόσβαση σε όλα τα στοιχεία ολόκληρης της σελίδας. Κάθε σελίδα
που φορτώνεται σε ένα πρόγραμμα περιήγησης γίνεται αντικείμενο αντικειμένου που έχετε πρόσβαση χρησιμοποιώντας τη λέξη-κλειδί εγγράφου. Μπορείτε να δείτε μια πλήρη λίστα των μεθόδων και ιδιοτήτων που σχετίζονται με αυτό το αντικείμενο στη διεύθυνση www. w3schools. com / jsref / dom_obj_document. ασπίδα. |
| Συμβάν | Επιτρέπει την αλληλεπίδραση με τα συμβάντα και τους διαχειριστές συμβάντων
που σχετίζονται με μια σελίδα. Κάθε τύπος στοιχείου έχει συγκεκριμένα συμβάντα που σχετίζονται με αυτόν, όπως το συμβάν κλικ που σχετίζεται με το αντικείμενο Button. Μπορείτε να δείτε μια πλήρη λίστα των μεθόδων και ιδιοτήτων που σχετίζονται με αυτό το αντικείμενο στο www. w3schools. com / jsref / dom_obj_event. ασπίδα. |
| HTMLElement | Παρέχει μια βασική κλάση από την οποία παράγονται όλα τα στοιχεία HTML.
Αυτή η βασική κλάση ορίζει τις ιδιότητες και τις μεθόδους που παρέχουν όλα τα στοιχεία HTML . Μπορείτε να δείτε μια πλήρη λίστα με τις μεθόδους και τις ιδιότητες που σχετίζονται με αυτό το αντικείμενο στη διεύθυνση www. w3schools. com / jsref / dom_obj_all. ασπίδα. |
| Άγκυρα | Αντιπροσωπεύει μια υπερ-σύνδεση HTML. Μπορείτε να δείτε μια πλήρη λίστα με
τις μεθόδους και τις ιδιότητες που σχετίζονται με αυτό το αντικείμενο στη διεύθυνση www. w3schools. com / jsref / dom_obj_anchor. ασπίδα. |
| Περιοχή | Ορίζει την περιοχή μέσα σε έναν χάρτη εικόνας HTML που χρησιμοποιείται για τη δημιουργία
περιοχών με δυνατότητα κλικ για ένα γραφικό στοιχείο. Μπορείτε να δείτε μια πλήρη λίστα των μεθόδων και ιδιοτήτων που σχετίζονται με αυτό το αντικείμενο στο www. w3schools. com / jsref / dom_obj_area. ασπίδα. |
| Βάση | Καθορίζει την προεπιλεγμένη διεύθυνση ή έναν προεπιλεγμένο στόχο για όλους τους συνδέσμους
σε μια σελίδα. Μπορείτε να δείτε μια πλήρη λίστα με τις μεθόδους και τις ιδιότητες που σχετίζονται με αυτό το αντικείμενο στη διεύθυνση www. w3schools. com / jsref / dom_obj_base. ασπίδα. |
| Σώμα | Αντιπροσωπεύει το τμήμα
της ετικέτας μιας σελίδας, συμπεριλαμβανομένων όλων των στοιχείων που περιέχονται στην ετικέτα . Μπορείτε να δείτε μια πλήρη λίστα των μεθόδων και ιδιοτήτων που σχετίζονται με αυτό το αντικείμενο στη διεύθυνση www.w3schools. com / jsref / dom_obj_body. ασπίδα. |
| Πλήκτρο | Αντιπροσωπεύει ένα κουμπί σε μια σελίδα. Αυτό το αντικείμενο σχετίζεται ειδικά με την ετικέτα
και όχι με τη φόρμα της ετικέτας. Μπορείτε να δείτε μια πλήρη λίστα των μεθόδων και ιδιοτήτων που σχετίζονται με αυτό το αντικείμενο στη διεύθυνση www. w3schools. com / jsref / dom_obj_pushbutton. ασπίδα. Μορφή |
| Υποδηλώνει μια φόρμα και περιλαμβάνει όλα τα στοιχεία της φόρμας | . Μπορείτε να δείτε μια πλήρη λίστα των μεθόδων και ιδιοτήτων
που σχετίζονται με αυτό το αντικείμενο στη διεύθυνση www. w3schools. com / jsref / dom_obj_form. ασπίδα. Πλαίσιο και IFrame |
| Αντιπροσωπεύει ένα πλαίσιο (την ετικέτα | ) ή ένα ενσωματωμένο πλαίσιο (την ετικέτα) και όλα τα στοιχεία εντός |