Ένα αντικείμενο στην καθημερινή μας ζωή είναι κάτι το οποίο έχει μια υλική υπόσταση, με κάποια συγκεκριμένα χαρακτηριστικά αλλά επίσης και κάποιες λειτουργίες. Ένα αυτοκίνητο για παράδειγμα ως χαρακτηριστικά έχει το μοντέλο του, το έτος παρασκευής του, την μέγιστη ταχύτητα του, τα κυβικά εκατοστά της μηχανής του, και ως λειτουργίες έχει την εκκίνηση του, την χρήση του κινητήρα, την αλλαγή ταχύτητας κ.α.
Κάπως έτσι χρησιμοποιούνται και τα αντικείμενα σε κάθε γλώσσα προγραμματισμού. Παρόμοια λογική ακολουθεί και η javascript. Τα αντικείμενα είναι μεταβλητές στις οποίες μέσα σε αυτές έχει οριστεί ότι είναι απαραίτητο για την λειτουργία του εκάστοτε αντικειμένου. Το συντακτικό για την δημιουργία αντικειμένου έχει ως εξής:
var όνομα_αντικειμένου = {
ιδιότητα_1: τιμή,
ιδιότητα_2: τιμή,
λειτουργία_1: function(παράμετρος_1, παράμετρος_2){
...κώδικας που εκτελείται...
return τιμή;
},
λειτουργία_2: function(){
...κώδικας που εκτελείται...
return τιμή;
}
}
- Χρησιμοποιούμε την λέξη «var» για να ορίσουμε το αντικείμενο μας.
- Ακολουθεί η ονομασία του τηρώντας τους κανόνες ονομασίας μεταβλητών (λατινικοί χαρακτήρες κλπ).
- Ύστερα αρχικοποιούμε το αντικείμενο με «=» ίσον.
- Στην συνέχεια ένα ζεύγος αγκύλων περικλείει τις ιδιότητες (άλλοτε και χαρακτηριστικά) και τις λειτουργίες του αντικειμένου μας.
- Κάθε χαρακτηριστικό ή λειτουργία αναγράφεται με λατινικούς χαρακτήρες και ύστερα ακολουθούν άνω κάτω τελείες. Μετά τις τελείες ακολουθεί ένας ορισμός τιμής ή λειτουργίας
- Συνήθως αναγράφονται πρώτα οι ιδιότητες, οπότε και τους δίνουμε τιμές. Κάθε ιδιότητα μετά από το πέρας της δήλωσης τους, τις χωρίζουμε με κόμμα έτσι ώστε να προχωρήσουμε στην επόμενη.
- Όταν φθάσουμε σε λειτουργίες, ακολουθούμε την ίδια λογική ονομασίας αλλά αντί για κάποια τιμή αναγράφουμε την λέξη «function» ύστερα ένα ζεύγος παρενθέσεων – αν θέλουμε παραμέτρους τις ορίζουμε – και ύστερα ένα ζεύγος αγκύλων όπου θα πλαισιωθεί ο κώδικας της λειτουργίας – μεθόδου του αντικειμένου.
- Τέλος κλείνοντας την αγκύλη μιας λειτουργίας, πάντα συμπεριλαμβάνουμε και κόμμα αν έχουμε σκοπό να προσθέσουμε και άλλα στοιχεία αλλιώς αν πρόκειται για το τελευταίο στοιχείο, τότε απλά κλείνουμε με αγκύλη.
Ας δούμε ένα παράδειγμα αντικειμένου με βάση την παραπάνω περιγραφή του αυτοκινήτου:
var car = {
model: 10,
maxspeed: 300,
gear:0,
cc:1000,
started:false,
startEngine: function(){
this.started = true;
},
changeGear: function(g){
this.gear=g;
}
}
Ας δούμε την αντιστοίχηση:
- Ιδιότητα Μοντέλο: model
- Ιδιότητα Μέγιστη ταχύτητα: maxspeed
- Ιδιότητα Τρέχουσα ταχύτητα: gear
- Ιδιότητα Κυβικά εκατοστά: cc
- Ιδιότητα Ενεργό: started
- Λειτουργία Εκκίνηση κινητήρα: startEngine
- Λειτουργία Αλλαγή ταχύτητας: changeGear
Με όλο τον παραπάνω κώδικα έχουμε κατασκευάσει ένα αντικείμενο με όνομα car και ιδιότητες-λειτουργίες όλες τις παραπάνω. Πως όμως τις χρησιμοποιούμε στον κώδικα μας ; Πολύ απλά χρησιμοποιούμε το όνομα του αντικειμένου ως προσδιοριστή και ύστερα όποια ιδιότητα η λειτουργία θέλουμε χωρισμένη με τελεία από το όνομα του αντικειμένου, πχ:
Ιδιότητα-λειτουργία | Τρόπος κλήσης |
---|---|
model | car.model |
maxspeed | car.maxspeed |
startEngine | car.startEngine() |
changeGear | car.changeGear(4) |
Αρχείο: fcar.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Αυτοκίνητο</title>
<script type='text/javascript'>
var car = {
model: 10,
maxspeed: 300,
gear:0,
cc:1000,
started:false,
startEngine: function(){
this.started = true;
},
changeGear: function(g){
this.gear=g;
}
}
</script>
</head>
<body>
<input type='button' value='Πάτησε εδώ!' onclick='alert("Το αυτοκίνητο είναι:\n Μοντέλο:"+car.model+"\n Μέγιστη ταχύτητα:"+car.maxspeed+"\n Κυβικά εκατοστά:"+car.cc);'/>
</body>
</html>
Αποτέλεσμα: