Κέντρο ΠΛΗΝΕΤ Ν. Φλώρινας - Τα Αντικείμενα (Objects) της JavaScript

ΚΕΝΤΡΟ ΠΛΗ.ΝΕ.Τ. Ν. ΦΛΩΡΙΝΑΣ

Τα Αντικείμενα (Objects) της JavaScript

Η JavaScript είναι μια αντικειμενοστραφής γλώσσα (object-oriented language), που σημαίνει ότι στην καρδιά της περιέχει ένα προκαθορισμένο σύνολο αντικειμένων τα οποία συσχετίζονται με τα διάφορα συστατικά (components) μιας HTML σελίδας. Για να μπορέσουμε να δούμε ή να διαχειριστούμε την κατάσταση ενός αντικειμένου απαιτείται η χρήση των ιδιοτήτων (properties) και των μεθόδων (methods). Σε κάθε αντικείμενο θα γίνεται αναφορά των ιδιοτήτων (properties), των μεθόδων (methods) και των χειριστηρίων συμβάντος (event handlers) που συσχετίζονται μ' αυτό.

anchors - Είναι ένα κομμάτι κειμένου που μπορεί να είναι ο στόχος (target) ενός συνδέσμου υπερκειμένου (hypertext link). Είναι ένα read-only αντικείμενο που ορίζεται στην HTML με τα tags <A>. Για να βρούμε πόσα anchors υπάρχουν σ' ένα έγγραφο (document), μπορούμε να χρησιμοποιήσουμε την ιδιότητα length.

document.anchors.length

Αποτελεί αντικείμενο (ιδιότητα) του αντικειμένου document και σχετική μέθοδος είναι η anchor.

button - Είναι ένα αντικείμενο που αποτελεί στοιχείο (element) μιας φόρμας, πρέπει να ορίζεται μέσα σ' ένα <form> tag και μπορεί να χρησιμοποιηθεί για να εκτελεσθεί μια ενέργεια (action). Αποτελεί αντικείμενο (ιδιότητα) του αντικειμένου form. Σχετικές ιδιότητες είναι η name και η value, σχετική μέθοδος είναι η click και σχετικό χειριστήριο συμβάντος είναι το onClick.

checkbox - Είναι ένα στοιχείο φόρμας (form element) που ο χρήστης έχει τη δυνατότητα να το κάνει ενεργό ή όχι (on ή off) κάνοντας κλικ πάνω του και το οποίο πρέπει να ορίζεται μέσα σ' ένα <form> tag. Χρησιμοποιώντας το αντικείμενο checkbox, μπορούμε να δούμε αν το κουτί είναι επιλεγμένο (checked) καθώς και να βρούμε το όνομα (name) και την τιμή του (value). Αποτελεί αντικείμενο (ιδιότητα) του αντικειμένου form. Σχετικές ιδιότητες είναι οι checked, defaultChecked, name και value, σχετική μέθοδος είναι η click και σχετικό χειριστήριο συμβάντος είναι το onClick.

Date - Αντικαθιστά έναν κανονικό τύπο ημερομηνίας (date type). Αν και δεν έχει καθόλου ιδιότητες (properties), διαθέτει πολλές μεθόδους (methods). Οι μέθοδοι για να λαμβάνουμε και να ορίζουμε πληροφορίες για την ημερομηνία και την ώρα χωρίζονται σε τέσσερις κατηγορίες : set, get, to και parse/UTC. Εκτός από τις ημέρες του μήνα, όλες οι άλλες αριθμητικές εκφράσεις ημερομηνιών ξεκινούν από το 0. Οι μήνες ξεκινούν από το 0 (Ιανουάριος) έως και το 11 (Δεκέμβριος). Σχετικές μέθοδοι είναι οι getDate, getDay, getHours,getMinutes, getMonth, getSeconds, getTime,getTimezoneOffset, getYear, parse, setDate,setHours, setMinutes, setMonth, setSeconds,setTime, setYear, toGMTString, toLocaleString και toString.

document - Είναι ένα αντικείμενο που δημιουργείται από τον φυλλομετρητή (Navigator) όταν φορτώνεται μια ιστοσελίδα και το οποίο περιέχει πληροφορίες για το τρέχον έγγραφο, όπως είναι ο τίτλος του (title), το χρώμα φόντου (background color) και οι φόρμες (forms) που περιέχει. Αυτές οι ιδιότητες ορίζονται μέσα στα <body> tags. Περιέχει επίσης μεθόδους για την εμφάνιση HTML κειμένου στον χρήστη. Μπορούμε να έχουμε πρόσβαση στα αντικείμενα anchors, forms και links ενός εγγράφου χρησιμοποιώντας τους πίνακες (arrays) anchors, forms και links του αντικειμένου document. Αυτοί οι πίνακες περιέχουν από μία καταχώρηση για το κάθε anchor, form ή link που υπάρχει σ' ένα έγγραφο (document). Αποτελεί και ιδιότητα του αντικειμένουwindow και σχετικές ιδιότητες είναι οι alinkColor, anchors, bgColor, cookie, fgColor, forms, lastModified, linkColor, links, location, referrer, title και vlinkColor. Σχετικές μέθοδοι είναι οι clear, close, open,write και writeln. Σχετικά χειριστήρια συμβάντος είναι το onLoad και το onUnload.

elements - Είναι ένας πίνακας (array) από στοιχεία φόρμας (formelements), τα οποία μπορούν να περιέχουν άλλα αντικείμενα, όπως πλήκτρα εντολών (buttons), πλαίσια ελέγχου (check boxes), πλήκτρα επιλογής (radio buttons), πλαίσια κειμένου (text) και περιοχές κειμένου (text area). Μπορούμε να αναφερθούμε στα στοιχεία (elements) μιας φόρμας με τον αριθμό σειράς τους (index), ως εξής :

formName.elements[index]

Τα στοιχεία μιας φόρμας μπορούν επίσης να προσπελασθούν με το όνομά τους. Για παράδειγμα, ένα στοιχείο password έχει όνομα newPassword και είναι το δεύτερο στοιχείο μιας φόρμας σε μια HTML σελίδα. Μπορούμε να αναφερθούμε στην τιμή του με τρεις τρόπους :

formName.elements[1].value formName.elements["newPassword"].value formName.newPassword.value

Αποτελεί ιδιότητα του αντικειμένου form και σχετική ιδιότητα είναι η length.

form - Αποτελεί ιδιότητα του αντικειμένου document.Η κάθε φόρμα σ' ένα έγγραφο (document) αποτελεί ένα ξεχωριστό αντικείμενο (object) στο οποίο μπορούμε να αναφερθούμε μέσω του αντικειμένου form. Το αντικείμενο form είναι ένας πίνακας (array) που δημιουργείται καθώς ορίζονται οι φόρμες (forms) μέσω των HTML tags. Αν η πρώτη φόρμα σ' ένα έγγραφο ονομασθεί orderForm, τότε θα μπορούμε να αναφερόμαστε σ' αυτήν ως document.orderForm ή και ως document.forms[0]. Αποτελεί ιδιότητα του αντικειμένου document και σχετικές ιδιότητες είναι οι action, elements, encoding, forms, method, name και target. Σχετική μέθοδος είναι η submit και σχετικό χειριστήριο συμβάντος είναι το onSubmit.

frame - Είναι ένα παράθυρο (window) που περιέχει έγγραφα της HTML τα οποία είναι ανεξάρτητα μεταξύ τους. Τα πλαίσια (frames) μπορεί να δείχνουν σε διαφορετικά URLs και μπορούν να αποτελούν στόχο (target) από άλλα πλαίσια, όπου όλα μαζί βρίσκονται στο ίδιο παράθυρο. Το κάθε πλαίσιο (frame) αποτελεί ένα αντικείμενο παραθύρου (window object) που ορίζεται με το <frameset> tag. Η ιστοσελίδα ορίζεται από ένα πατρικό (parent) HTML έγγραφο (document). Όλα τα έγγραφα (subdocuments) των πλαισίων είναι παιδιά (children) του γονικού εγγράφου (parent). Αν ένα πλαίσιο περιέχει ορισμούς για τις ιδιότητες (attributes) SRC και NAME, τότε το πλαίσιο μπορεί να αναγνωρισθείχρησιμοποιώντας το γονικό αντικείμενο (parent object) ως parent.frameName ή parent.frames[index]. Αποτελεί ιδιότητα του αντικειμένου window και σχετικές ιδιότητες είναι οι defaultStatus, frames, parent, self, status, top και window. Σχετικές μέθοδοι είναι οι setTimeout και clearTimeout.

hidden - Είναι ένα αντικείμενο κειμένου (text object) που δεν εμφανίζεται (είναι κρυφό) σε μια HTML φόρμα. Τα κρυφά αντικείμενα (hidden objects) μπορούν να χρησιμοποιηθούν μαζί με τα cookies για να μεταβιβάζονται ζευγάρια ονόματος/τιμής (name/value pairs) για την επικοινωνία client/server. Αποτελεί ιδιότητα του αντικειμένου form και σχετικές ιδιότητες είναι οι cookie, defaultValue, name και value.

history - Αυτό το αντικείμενο προέρχεται από το μενού Go και περιέχει πληροφορίες σύνδεσης URL για τις ιστοσελίδες που έχουμε επισκεφθεί νωρίτερα. Αποτελεί ιδιότητα του αντικειμένου document και σχετική ιδιότητα είναι η length. Σχετικές μέθοδοι είναι οι back, forward και go.

link - Το αντικείμενο αυτό εκτός από το ότι παρέχει πληροφορίες για τους υπάρχοντες συνδέσμους υπερκειμένου (hypertext links), μπορούμε επίσης να το χρησιμοποιήσουμε για να δημιουργήσουμε καινούργιους συνδέσμους (links). Αποτελεί ιδιότητα του αντικειμένου document. Σχετικές ιδιότητες είναι οι hash, host, hostname, href, length, pathname, port, protocol, search και target, σχετική μέθοδος είναι η link και σχετικά χειριστήρια συμβάντος είναι τα onClick και onMouseOver.

location - Το αντικείμενο αυτό περιέχει πλήρεις πληροφορίες URL για το τρέχον έγγραφο (document), ενώ η κάθε ιδιότητά του αναφέρεταο σ' ένα διαφορετικό κομμάτι του URL. Αποτελεί ιδιότητα του αντικειμένου document. Σχετικές ιδιότητες είναι οι hash, host, hostname, href, location, pathname, port, protocol, search και target.

Math - Το αντικείμενο αυτό περιέχει ιδιότητες για μαθηματικές σταθερές (constants) και μεθόδους (methods), που χρησιμοποιούνται σε συναρτήσεις. Για παράδειγμα, για να μπορούμε να έχουμε την τιμή του π σε μια εξίσωση, μπορούμε να χρησιμοποιήσουμε την εξής έκφραση :

Math.PI

Περιέχονται οι στάνταρτ τριγωνομετρικές, λογαριθμικές και εκθετικές συναρτήσεις και όλα τα ορίσματα των τριγωνομετρικών συναρτήσεων χρησιμοποιούν ακτίνια (radians). Σχετικές ιδιότητες είναι οι E, LN10, LN2, PI, SQRT1_2, SQRT2 και σχετικές μέθοδοι είναι οι abs, acos, asin, atan, ceil, cos, exp, floor, log, max, min, pow, random, round, sin, sqrt και tan.

navigator - Το αντικείμενο αυτό περιέχει πληροφορίες για την τρέχουσα έκδοση του φυλλομετρητή (navigator) που χρησιμοποιεί ο πελάτης (client). Σχετικές ιδιότητες είναι οι appName, appCodeName, appVersion και userAgent.

option - Είναι αντικείμενα που δημιουργούνται μέσα στα <form> tags της HTML και παριστάνουν πλήκτρα επιλογής (option buttons). Από ένα σύνολο πλήκτρων επιλογής που ανήκουν στην ίδια λίστα, ο χρήστης μπορεί να επιλέξει μόνο ένα. Όταν δημιουργείται, λαμβάνει τη μορφή document.formName.radioName[index], όπου το index είναι ένας αριθμός που παριστάνει το κάθε πλήκτρο επιλογής και η αρίθμηση ξεκινάει από το 0. Αποτελεί ιδιότητα του αντικειμένου form. Σχετικές ιδιότητες είναι οι checked, defaultChecked, index, length, name και value, σχετική μέθοδος είναι η click και σχετικό χειριστήριο συμβάντος είναι το onClick.

password - Είναι ειδικά πεδία κειμένου (text fields) της HTML και το κείμενο που καταχωρείται από τον χρήστη είναι κρυμμένο συνήθως με *. Πρέπει να ορισθεί μ' ένα <form> tag της HTML. Αποτελεί ιδιότητα του αντικεικένου form, σχετικές ιδιότητες είναι οι defaultValue, name και value και σχετικές μέθοδοι είναι οι focus, blur και select.

reset - Είναι ένα πλήκτρο εντολής που επαναφέρει (resets) τα περιεχόμενα όλων των αντικειμένων μιας φόρμαςστις προκαθορισμένες τους τιμές (default values). Ένα αντικείμενο reset πρέπει να δημιουργείται μέσα σ' ένα <form> tag. Αποτελεί ιδιότητα του αντικειμένου form.Σχετικές ιδιότητες είναι οι name και value, σχετική μέθοδος είναι η click και σχετικό χειριστήριο συμβάντος είναι το onClick.

select - Είναι μια λίστα επιλογής (selection list) ή λίστα κύλισης (scrolling list) σε μια HTML φόρμα. Μια λίστα επιλογή δίνει τη δυνατότητα στον χρήστη να επιλέξει ένα στοιχείο από μια λίστα, ενώ μια λίστα κύλισης δίνει τη δυνατότητα επιλογής ενός ή περισσοτέρων στοιχείων από μια λίστα. Αποτελεί ιδιότητα του αντικειμένου form.Σχετικές ιδιότητες είναι οι length, name, options και selectedIndex, σχετικές μέθοδοιείναι οι blur και focus καισχετικά χειριστήρια συμβάντος είναι τα onBlur, onChange και onFocus. Για την ιδιότητα options του αντικειμένου select, σχετικά είναι και τα defaultSelected, index, selected, text και value.

string - Είναι μια σειρά από χαρακτήρες (characters) που ορίζεται με διπλά ή απλά εισαγωγικά, όπως για παράδειγμα :

myCity = "Florina"

Η παραπάνω εντολή επιστρέφει ένα αντικείμενο string με όνομα myDog και με τιμή "Florina". Μπορούμε να χρησιμοποιήσουμε μεθόδους που να επιστρέφουν ένα κομμάτι του string, όπως για παράδειγμα η μέθοδος myCity.toUpperCase() που επιστρέφει την τιμή "FLORINA". Περιέχει επίσης μεθόδους που επιστρέφουν HTML παραλλαγές του string, όπως σε μορφή bold και italics.Σχετική ιδιότητα είναι η length και σχετικές μέθοδοι είναι οι anchor, big, blink, bold, charAt, fixed, fontcolor, fontsize, indexOf, italics, lastIndexOf, link, small, strike, sub, substring, sup, toLowerCase και toUpperCase.

submit - Είναι ένα ειδικό πλήκτρο εντολής (command button) που προκαλεί την υποβολή (submission) της φόρμας στο πρόγραμμα που καθορίζεται από την ιδιότητα action της φόρμας. Δημιουργείται μέσα σ' ένα tag <form> της HTML. Αποτελεί ιδιότητα του αντικειμένου form.Σχετικές ιδιότητες είναι οι name και value, σχετική μέθοδος είναι η click και σχετικό χειριστήριο συμβάντος είναι το onClick.

text - Είναι ένα πεδίο καταχώρισης κειμένου (input field) μίας γραμμής σε μια HTML φόρμα το οποίο δέχεται χαρακτήρες ή και αριθμούς. Τα αντικείμενα text μπορούν να αποκτήσουν και καινούργιες τιμές. Αποτελεί ιδιότητα του αντικειμένου form.Σχετικές ιδιότητες είναι οι defaultValue, name και value, σχετικές μέθοδοι είναι οι focus, blur και select και σχετικά χειριστήρια συμβάντος είναι τα onBlur, onChange, onFocus, onSelect.

textarea - Είναι παρόμοιο μ' ένα πεδίο κειμένου (text object), με τη διαφορά ότι μπορεί να περιέχει πολλές γραμμές. Αποτελεί ιδιότητα του αντικειμένου form.Σχετικές ιδιότητες είναι οι defaultValue, name και value, σχετικές μέθοδοι είναι οι focus, blur και select και σχετικά χειριστήρια συμβάντος είναι τα onBlur, onChange, onFocus και onSelect.

window - Δημιουργείται από τον φυλλομετρητή (Navigator) όταν φορτώνεται μια σελίδα. Αποτελεί το αντικείμενο ανωτέρου επιπέδου (top-level object) για τα αντικείμενα document, location και history. Επειδή είναι το προκαθορισμένο αντικείμενο, δεν χρειάζεται να αναφέρουμε το όνομα του παραθύρου (window) όταν αναφερόμαστε στα αντικείμενά του, στις ιδιότητές του ή στις μεθόδους του. Για παράδειγμα, οι επόμενες δύο γραμμές επιφέρουν το ίδιο αποτέλεσμα, δηλ. την εμφάνιση ενός μηνύματος στη γραμμή κατάστασης (status line) :

status("Hallo from Florina!") window.status("Hallo from Florina")

Μπορούμε να ανοίξουμε ένα καινούργιο παράθυρο με τη μέθοδο open :

aNewWindow = window.open("URL", "Window_Name", ["windowFeatures"])

Μπορούμε να χρησιμοποιήσουμε τη μεταβλητή για το όνομα του παραθύρου ώστε να μπορούμε να αναφερόμαστε στις ιδιότητες και τις μεθόδους του παραθύρου.

Επιστροφή