Υποενότητα 6.2: Αντικείμενα JavaScript

Prerequisites for this submodule

You have to study the following educational material before starting this submodule:

Arrays

• Definitions
• Accessing an array
• Array methods

Loops

• for loop
• while loop

Εισαγωγή στα Αντικείμενα - Objects

Τι είναι τα Αντικείμενα - Objects;

Όπως μπορείτε να θυμηθείτε από τo προηγούμενο μάθημα,οι  Μεταβλητές - Variables περιγράφονται ως "δοχεία" μιας τιμής - value (συμβολοσειρά, αριθμός, λογική - string, number, boolean).

Όπως μπορείτε να θυμηθείτε, Λίστες - στοιχειοσειρές JavaScript - Arrays χρησιμοποιούνται για την αποθήκευση πολλαπλών τιμών - values σε μια μόνο μεταβλητή - variable.

Με τον ίδιο τρόπο, τα Αντικείμενα - Objects είναι τα ίδια μεταβλητές που δρουν ως δοχεία για πολλαπλές μεταβλητές.

Ο τρόπος ορισμού αντικειμένων είναι:

var myObject = { 
    name:"myName", 
    age:20, 
    job:"myJob" 
};

Οι κανόνες για την παραπάνω σύνταξη είναι:

• Το αντικείμενο περιέχεται μέσα σε αγκύλες curly braces.
• Οι τιμές είναι γραμμένες ως ζεύγη ονόματος : τιμής name : value pairs. Στο παραπάνω παράδειγμα, για την ηλικία αξίας: "myAge", η ηλικία είναι το όνομα και το 20 είναι η τιμή.
• Τα ζεύγη ονόματος : τιμής - name: value καλούνται ιδιότητες properties
• Τα ονόματα και οι τιμές διαχωρίζονται από άνω κάτω τελεία colon
• Κάθε ζεύγος name:value, διαχωρίζεται από τα άλλα με κόμμα -  commas

Προσπέλαση ιδιοτήτων αντικειμένου - Access Object Properties

Ας υποθέσουμε ότι έχουμε το αντικείμενο:

var darkChoco = {
   cacao:"80%",
   milk:"0%", 
   grams:100
 };

var myChoco = "milk";

και θέλουμε να αποκτήσουμε πρόσβαση στις ιδιότητές του. Οι 3 διαφορετικοί τρόποι με τους οποίους μπορούμε να επιτύχουμε αυτό είναι:

1. objectName.property
   
   Παράδειγμα: console.log(darkChoco.milk);
   
   
2. objectName["property"]
   
   Παράδειγμα: console.log(darkChoco["milk"]);
   
   
3. objectName[expression]
   
   Παράδειγμα: console.log(darkChoco[myChoco]);

Σημειώστε ότι ο τρίτος τρόπος, είναι πιθανός μόνο αν η έκφραση μέσα στις αγκύλες [] είναι ισοδύναμη με ένα όνομα ιδιότητας. Σε αυτή την περίπτωση, η μεταβλητή myChoco είναι ισοδύναμη με το όνομα milk.

;Askhsh

1. Ανοίξτε τον επεξεργαστή κώδικα, δημιουργήστε ένα νέο αρχείο και αποθηκεύστε το ως exersice06.2.03.html στον φάκελο "yourNameWEB2JS".
2. Χρησιμοποιώντας τον παραπάνω κώδικα, επεξεργαστείτε το αρχείο. Στον browser θα πρέπει να εμφανίζεται η επόμενη εικόνα:

Λύση:

Δομή επανάληψης - Statement for/in

Για να επαναλάβουμε τις ιδιότητες των αντικειμένων δεν μπορούμε να χρησιμοποιήσουμε τον κλασικό βρόχο for.

Η σύνταξη που επιτρέπει την επανάληψη όλων των ιδιοτήτων ενός αντικειμένου είναι:

for (var key in object)

var μπορεί να πάρει οποιοδήποτε όνομα.

Παράδειγμα:

var darkChoco = {
cacao:"80%",
milk:"0%",
grams:100,
getFullInfo : function () {
        return this.cacao + " " + this.milk + " " + this.grams;
    }
};

Για να επαναλάβουμε αυτό το αντικείμενο θα γράψουμε:

 for (var x in darkChoco) {
console.log ( x + ":" + darkChoco[x] );
} 

Changing, Adding and Deleting properties

Μπορούμε να χειριστούμε οποιαδήποτε ιδιότητα ενός αντικειμένου JavaScript.

Για να αλλάξουμε - change μια ιδιότητα - property, χρησιμοποιούμε τον τελεστή εκχώρησης - assignment operator.

Για παράδειγμα για το αντικείμενο μας:

var darkChoco = { cacao:”80%”, milk:”0%”, grams:100 };

Αν γράψουμε

darkChoco. milk = “10%”;

αλλάζουμε την ιδιότητα από "0%" σε "10%".

Τι νομίζετε ότι θα συμβεί εάν γράψουμε darkChoco["milk"]= "50%" ? Try it in the console.log();

Απάντηση:

Για να προσθέσουμε - add  μια ιδιότητα σε ένα αντικείμενο, γράφουμε απλώς ένα νέο όνομα: ζεύγος τιμών. Για παράδειγμα, εάν ήθελα να προσθέσω την ιδιότητα sugar : "10%" Θα έγραφα:

darkChoco.sugar = "10%"

Επιπλέον, μπορούμε να διαγράψουμε - remove τις ιδιότητες αντικειμένου. Αυτό γίνεται χρησιμοποιώντας τον τελεστή διαγραφής - delete operator.

Pαράδειγμα:

delete darkChoco.milk;

Άσκηση

1. Έχουμε ανεβάσει το αρχείο 62.js στον WEB server. Η URL είναι https://cnc-wp1.ellak.gr/vasilisNameWEB2/JSvasilis/62.js. Αντιγράψτε αυτήν τη διεύθυνση URL και επικολλήστε την στο πρόγραμμα περιήγησής σας για να δείτε τι περιλαμβάνει αυτό το αρχείο.
2. Ανοίξτε τον επεξεργαστή κώδικα, δημιουργήστε ένα νέο αρχείο και αποθηκεύστε το ως exersice06.2.04.html στον φάκελο "yourNameWEB2JS".
3. Προσθέστε έναν σύνδεσμο στο αρχείο js στον κώδικα HTML
4. Χρησιμοποιώντας τη θεωρία που συζητήσαμε εδώ, αλλάξτε, προσθέστε και διαγράψτε τμήματα του αρχείου. Η έξοδος του προγράμματος περιήγησης πρέπει να είναι όπως φαίνεται στην παρακάτω εικόνα:

Λύση:

Μέθοδοι - Methods Αντικειμένων

Οι μέθοδοι είναι οι ενέργειες που μπορούν να εφαρμοστούν σε αντικείμενα.

Όταν μια ιδιότητα ενός αντικειμένου είναι μια συνάρτηση JavaScript, την ονομάζουμε μέθοδο.

Παράδειγμα:

var darkChoco = {
cacao:"80%",
milk:"0%",
grams:100,
getFullInfo : function () {
        return this.cacao + " " + this.milk + " " + this.grams;
    }
};

Στο παραπάνω παράδειγμα, όταν αναφερόμαστε στο getFullInfo, αναφέρουμε τη συνάρτηση ως τιμή αυτής της ιδιότητας.  Ωστόσο, αν γράψουμε getFullInfo ακολουθούμενo από παρένθεση, getFullInfo(), τότε παραπέμπουμε στη μέθοδο αυτού του αντικειμένου.

Για να κατανοήσετε τη διαφορά μεταξύ των δύο, μεταβείτε στην κονσόλα σας και αντιγράψτε τον κώδικα του παραδείγματος. Στη συνέχεια, κάντε δύο δοκιμές. Την πρώτη φορά γράψτε στην κονσόλα darkChoco.getFullInfo; . Τη δεύτερη φορά γράψτε darkChoco.getFullInfo (); Τι πήρατε κάθε φορά;

Answer

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

The this keyword

Στην προηγούμενη σελίδα, είδαμε τη λέξη-κλειδί this tνα χρησιμοποιείται μέσα σε ένα αντικείμενο.

Αλλά τι είναι αυτό το this?

Γενικά, η λέξη-κλειδί this αναφέρεται στο πλαίσιο στο οποίο καλείται η συνάρτηση.

Στο προηγούμενο παράδειγμα μας:

var darkChoco = {
cacao:"80%",
milk:"0%",
grams:100,
getFullInfo : function () {
        return this.cacao + " " + this.milk + " " + this.grams;
    }
};

this αναφέρεται στις τιμές των cacao, milk and grams.

Η σημασία του this αλλάζει, ανάλογα με το πού το χρησιμοποιούμε

Τώρα ανοίξτε την κονσόλα και πληκτρολογήστε : this;

Τι βλέπετε;

Answer

Όταν δεν υπάρχει καμία συνάρτηση σχετική με αυτό και απλά καλούμε, το περιβάλλον αυτής της κλήσης είναι το παγκόσμιο πλαίσιο -  global context. Σε ένα πρόγραμμα περιήγησης στο Web, ΄όπου κανάνας κώδικας javaScript δεν έχει καθοριστεί, έχει το Παράθυρο - Window ως παγκόσμιο αντικείμενο - global object.  Έτσι, σε αυτή την περίπτωση, this αναφέρεται στο αντικείμενο Window.

Μια άλλη πολύ σημαντική χρήση this είναι στις constructor functions. Θα μάθουμε περισσότερα γι' αυτές στο επόμενο  Submodule.