Ο κόσμος της JavaScript

Η JavaScript είναι μια γλώσσα προγραμματισμού που χρησιμοποιείται κυρίως για εισαγωγή διαδραστικότητας στις ιστοσελίδες μας. Είναι όμως αρκετά ιδιαίτερη στον τρόπο με τον οποίο λειτουργεί, με κανόνες που πιθανώς δεν συμβαδίζουν με άλλες γλώσσες τις οποίες να έχετε συναντήσει (π.χ. Java ή C).

Σε αυτό τον οδηγό θα δούμε τα βασικά στοιχεία της JavaScript και θα κατανοήσουμε καλύτερα τα κομμάτια τα οποία την κάνουν να ξεχωρίζει από άλλες γλώσσες.

Περιεχόμενα

Εισαγωγή
Μεταβλητές
Τύποι Δεδομένων
Αντικείμενα
Πίνακες
Συναρτήσεις
Αντικειμενοστραφής Προγραμματισμός
DOM

Χρήσιμες Πηγές

Μελλοντικά θα προστεθούν και άλλα κεφάλαια στον οδηγό.

Closure
Ασύγχρονος Προγραμματισμός
Μέθοδοι Πίνακα
...

Εισαγωγή

Φταίει η JavaScript;

Στην πορεία σου γράφοντας κώδικα σε JavaScript, πολλές φορές θα συναντήσεις καταστάσεις που θα σε κάνουν να αναρωτηθείς αν φταίει η δομή της γλώσσας για λάθη που σταματούν τον κώδικα σου απο το να εκτελεστεί. Θα σκεφτείς οτι είναι κακογραμμένη και οτι δεν βγάζει κανένα νόημα ο τρόπος με τον οποίο δουλεύει. Αυτό είναι κάτι που συμβαίνει σε όλους τους προγραμματιστές, ακόμα και σε αυτούς που έχουν χρόνια εμπειρίας.

Είναι μια γλώσσα που έχει πολλές παραδοχές και περίπλοκες λειτουργίες, οι οποίες μπορεί να σε μπερδέψουν αν δεν τις κατανοήσεις σωστά. Αυτό όμως δεν σημαίνει ότι η JavaScript είναι κακή γλώσσα, απλά πρέπει να μάθεις να την χρησιμοποιείς σωστά.

Οπότε μην κατηγορείς την γλώσσα για τα λάθη που θα εμφανίζονται στον κώδικα σου. Η JavaScript είναι μια γλώσσα που ναι μεν είναι εύκολο να τη μάθεις, αλλά δύσκολο να τη μάθεις σωστά. Αυτό σημαίνει ότι μπορείς να γράψεις κώδικα που να λειτουργεί, αλλά να μην είναι καλός κώδικας.

Σαν προγραμματιστές έχουμε την ευθύνη να γνωρίζουμε τα εργαλεία που επιλέγουμε και να τα χρησιμοποιούμε σωστά.

Spec & Manuals

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

Specification

Το πρότυπο της JavaScript είναι καθορισμένο από τον οργανισμό ECMA International. Άλλα παραδείγματα προτύπων που ίσως έχεις ακούσει είναι τα ISO, IETF, W3C κλπ.

Όταν αναφερόμαστε στο πρότυπο της JavaScript, αναφερόμαστε στο ECMA-262 ή αλλιώς ECMAScript / ES. Με όποιον συμβολισμό και αν το αναφέρουμε, εννοούμε το ίδιο πράγμα.

Χρησιμοποιώντας έναν αριθμό στο τέλος του προτύπου, μπορούμε να δούμε την έκδοση της JavaScript που χρησιμοποιούμε. Για παράδειγμα, η έκδοση του 2015 είναι γνωστή ως ECMAScript 6 ή ES6. Η έκδοση του 2016 είναι γνωστή ως ECMAScript 7 ή ES7 και ούτω καθεξής. Μπορείς να βρεις την τελευταία Stable έκδοση του προτύπου εδώ https://tc39.es/ecma262/.

Καταλαβαίνεις λοιπόν ότι αυτό το πρότυπο καθορίζει τη συμπεριφορά της γλώσσας και τις νέες λειτουργίες που προστίθενται σε κάθε νέα έκδοση. Είναι λοιπόν η καλύτερη πηγή για να μάθεις τον τρόπο με τον οποίο λειτουργεί η JavaScript, ακόμα και σε αλγοριθμικό επίπεδο behind the scenes.

MDN Web Docs

Πέρα απο το specification, ένα πολύ καλό manual για την JavaScript είναι το MDN Web Docs. Εκεί θα βρεις πληροφορίες και παραδείγματα που χρειάζεσαι για να μάθεις καλύτερα τη γλώσσα.

Compiled ή Interpreted;

Η JavaScript θεωρείται συνήθως ως interpreted γλώσσα, ενώ είναι στην πραγματικότητα μια Just-In-Time compiled γλώσσα. Οι σύγχρονες JavaScript engines (π.χ. V8 engine) χρησιμοποιούν έναν JIT μεταγλωττιστή (compiler) για τη βελτιστοποίηση του κώδικα πριν την εκτέλεση. Αυτός ο μεταγλωττιστής επιτρέπει στην JavaScript να εκτελείται πολύ πιο γρήγορα και με αποτελεσματικό τρόπο σε σχέση με τις παραδοσιακές interpreted γλώσσες.

Ο κώδικας JavaScript αναλύεται πριν από την εκτέλεση και μετατρέπεται στην πραγματικότητα σε δυαδική μορφή (κώδικας μηχανής που εκτελείται απευθείας από το hardware του υπολογιστή).

Έτσι, η απάντηση στην ερώτηση "Η JavaScript είναι compiled ή interpreted γλώσσα;" είναι λίγο και από τα δύο. Είναι interpreted σε παλαιότερα προγράμματα περιήγησης, αλλά στα σύγχρονα προγράμματα περιήγησης, γίνεται compile με τη βοήθεια ενός JIT compiler.

Μεταβλητές

Οι μεταβλητές είναι οι βασικές μονάδες αποθήκευσης πληροφορίας σε ένα πρόγραμμα. Μια μεταβλητή είναι ένα όνομα (label) που αναφέρεται σε μια τιμή.

Δήλωση Μεταβλητών

Στην JavaScript, οι μεταβλητές δηλώνονται με την εντολή var. Μπορούμε να δηλώσουμε μια μεταβλητή χωρίς να της αναθέσουμε τιμή, αλλά αυτό σημαίνει ότι η τιμή της μεταβλητής θα είναι undefined.

var x;                  // Δήλωση μεταβλητής
console.log(x);         // undefined

Ανάθεση Τιμής

Μια μεταβλητή μπορεί να περιέχει οποιαδήποτε τιμή, όπως αριθμούς, αλφαριθμητικά, boolean, κλπ.

var x = 5;              // Ταυτόχρονη δήλωση και ανάθεση αριθμητικής τιμής
var y = "Hello";        // Αλφαριθμητική τιμή
var z = true;           // Boolean τιμή

console.log(x);         // 5
console.log(y);         // "Hello"
console.log(z);         // true

Εμβέλεια

Η εμβέλεια μιας μεταβλητής αναφέρεται στο πόσο μακριά από το σημείο δήλωσης της μπορεί να χρησιμοποιηθεί. Οι μεταβλητές μπορεί να έχουν είτε τοπική (local) εμβέλεια, είτε καθολική (global) εμβέλεια.

var

Οι μεταβλητές που δηλώνονται με το με το λεκτικό var έχουν είτε global εμβέλεια, είτε εμβέλεια στα πλαίσια μιας συνάρτησης, ανάλογα με το σημείο δήλωσης τους.

var x = 5;              // Global μεταβλητή

function myFunction() {
  var y = 10;           // Local μεταβλητή
  console.log(x);       // 5
  console.log(y);       // 10
}

console.log(x);         // 5
console.log(y);         // ReferenceError: y is not defined

Note

Αν μια μεταβλητή var δηλώνεται μέσα σε ένα code block (π.χ. μέσα σε ένα if statement), τότε η εμβέλεια της μεταβλητής δεν περιορίζεται στο block αυτό, αλλά είναι η συνάρτηση στην οποία ανήκει το code block. Αν το code block δεν ανήκει σε κάποια συνάρτηση, τότε η μεταβλητή έχει global εμβέλεια.

if (true) {
  var x = 5;            // Η x έχει global εμβέλεια
}

function myFunction() {
    if (true) {
        var y = 10;     // Η y έχει local εμβέλεια στην myFunction
    }
}

console.log(x);         // 5
console.log(y);         // ReferenceError: y is not defined

let

Η εντολή let εισήχθη στην ES6 και χρησιμοποιείται για τη δήλωση μεταβλητών με block scope. Αυτό σημαίνει ότι οι μεταβλητές που δηλώνονται με το λεκτικό let έχουν εμβέλεια μόνο στο block στο οποίο δηλώνονται.

let x = 5;              // Global μεταβλητή

function myFunction() {
    let y = 10;         // Local μεταβλητή στην myFunction
    console.log(x);     // 5
    console.log(y);     // 10

    for (let i = 0; i < 5; i++) {
        console.log(i); // Local μεταβλητή i μέσα στο for loop
    }

    console.log(i);     // ReferenceError: i is not defined
}

console.log(x);         // 5
console.log(y);         // ReferenceError: y is not defined

Επίσης μια μεταβλητή που δηλώνεται με το λεκτικό let δεν μπορεί να ξαναδηλωθεί μέσα στο ίδιο block, κάτι το οποίο είναι δυνατό με το λεκτικό var.

let x = 5;
let x = 10;             // SyntaxError: Identifier 'x' has already been declared

const

Η εντολή const χρησιμοποιείται για τη δήλωση μεταβλητών με block scope, οι οποίες δεν μπορούν να αλλάξουν τιμή μετά την αρχική ανάθεση.

const x = 5;            // Η x είναι μια σταθερά

x = 10;                 // TypeError: Assignment to constant variable

Όπως και με το let, μια μεταβλητή που δηλώνεται με το λεκτικό const δεν μπορεί να ξαναδηλωθεί μέσα στο ίδιο block.

const x = 5;
const x = 10;           // SyntaxError: Identifier 'x' has already been declared

Μια μεταβλητή που δηλώνεται με το λεκτικό const πρέπει να αρχικοποιηθεί με μια τιμή.

const x;                // SyntaxError: Missing initializer in const declaration

Το λεκτικό const είναι λίγο παραπλανητικό. Στην ουσία δεν ορίζει μία σταθερή τιμή, αλλά μια σταθερή αναφορά σε μια τιμή.

Αυτό σημαίνει οτι ΔΕΝ μπορούμε να:

Εκχωρήσουμε ξανά μια constant τιμή
Εκχωρήσουμε ξανά ένα constant πίνακα
Εκχωρήσουμε ξανά ένα constant αντικειμένο

Αλλά μπορούμε να:

Αλλάξουμε τα στοιχεία ενός constant πίνακα
Αλλάξουμε τις ιδιότητες ενός constant αντικειμένου

Tip

Με την εισαγωγή των let και const στην ES6, η χρήση του var έχει μειωθεί σημαντικά. Συνιστάται να χρησιμοποιείς let για μεταβλητές που μπορεί να αλλάξουν τιμή και const για σταθερές.

Τύποι Δεδομένων

H JavaScript είναι μια γλώσσα δυναμικού τύπου, που σημαίνει οτι στις μεταβλητές εισάγουμε δεδομένα χωρίς να χρειάζεται να δηλώσουμε τον τύπο τους. Μια μεταβλητή μπορεί να περιέχει δεδομένα διαφορετικού τύπου κατά τη διάρκεια της εκτέλεσης του προγράμματος.

Για παράδειγμα:

let x = 5;              // Η τιμή της x είναι τύπου Number
x = "Hello";            // Η τιμή της x τώρα είναι τύπου String

typeof

Για να μάθουμε τον τύπο μιας τιμής μπορούμε να χρησιμοποιήσουμε τον operator typeof. Αυτή η εντολή επιστρέφει τον τύπο της τιμής σε μορφή string.

const x = 5;
console.log(typeof x); // "number"

Primitive Types

Η JavaScript έχει κάποιους προκαθορισμένους τύπους δεδομένων, οι οποίοι ονομάζονται Primitive Data Types. Αυτοί οι τύποι είναι οι εξής:

Number

Ο τύπος Number χρησιμοποιείται για αριθμητικές τιμές. Μπορεί να είναι ακέραιος αριθμός ή δεκαδικός αριθμός. Στην JavaScript δεν υπάρχει διαφορά μεταξύ αυτών των δύο τύπων.

const x = 5;            // Ακέραιος αριθμός
const y = 5.5;          // Δεκαδικός αριθμός

console.log(typeof x);  // "number"
console.log(typeof y);  // Επίσης "number"

Δύο ειδικές τιμές που μπορούν να αντιστοιχιστούν στον τύπο Number είναι το Infinity και το NaN.

Το Infinity χρησιμοποιείται όταν ένας αριθμός υπερβαίνει το μέγιστο επιτρεπτό όριο.

const x = 1 / 0;
console.log(x);         // Infinity

const y = -1 / 0;
console.log(y);         // -Infinity

console.log(typeof x);  // "number"
console.log(typeof y);  // Επίσης "number"

Το NaN (Not-a-Number) χρησιμοποιείται όταν μια αριθμητική πράξη δεν μπορεί να εκτελεστεί (Invalid Number). Καλή πρακτική είναι να ελέγχουμε αν μια τιμή είναι NaN πριν την χρησιμοποιήσουμε.

const x = 100 / "Apple";
console.log(x);         // NaN

console.log(typeof(x)); // "number"

Caution

Το NaN είναι η μόνη τιμή στην JavaScript που δεν είναι ίση με τον εαυτό της. Αυτό σημαίνει ότι αν χρησιμοποιήσουμε τον τελεστή === για να συγκρίνουμε μια τιμή με το NaN, το αποτέλεσμα θα είναι false. Δηλαδή NaN === NaN επιστρέφει false.

Για να ελέγξουμε αν μια τιμή δεν είναι αριθμός ή δεν μπορεί να μετατραπεί σε αριθμό (περισσότερα στο κεφάλαιο "Αλλαγή Τύπου"), μπορούμε να χρησιμοποιήσουμε την συνάρτηση isNaN().

const x = 100 / "Apple";
 
isNaN(x);               // true

Παρατηρούμε οτι η συνάρτηση isNaN() επιστρέφει false αν η τιμή είναι αριθμός σε μορφή String. Αυτό γίνεται γιατί η συνάρτηση isNaN() προσπαθεί πρώτα να μετατρέψει την τιμή σε αριθμό πριν επιστρέψει κάποιο αποτέλεσμα.

const x = "100";

isNaN(x);               // false

Μπορούμε επίσης να χρησιμοποιήσουμε την συνάρτηση Number.isNaN() για να ελέγξουμε αν μια τιμή είναι αμιγώς NaN.

const x = "bar" / "foo";
const y = NaN;

Number.isNaN(x);        // true
Number.isNaN(y);        // true

String

Ο τύπος String χρησιμοποιείται για αλφαριθμητικές τιμές. Μπορεί να περιέχει οποιοδήποτε κείμενο μέσα σε εισαγωγικά.

const x = "Hello World!";
console.log(typeof x);  // "string"

Μπορούμε να χρησιμοποιήσουμε είτε μονά είτε διπλά εισαγωγικά για να δηλώσουμε μια τιμή τύπου String.

const x = 'Hello World!';
const y = "Hello World!";

Αν θέλουμε να χρησιμοποιήσουμε εισαγωγικά μέσα σε μια τιμή τύπου String, μπορούμε να χρησιμοποιήσουμε τον χαρακτήρα \ για να δηλώσουμε ότι το εισαγωγικό δεν είναι το τέλος της τιμής.

const x = "He said \"Hello\"";
console.log(x);         // He said "Hello"

Boolean

Ο τύπος Boolean χρησιμοποιείται για τις τιμές true και false.

const x = true;
const y = false;

console.log(typeof x);  // "boolean"
console.log(typeof y);  // Επίσης "boolean"

Undefined

Η τιμή undefined χρησιμοποιείται όταν μια μεταβλητή δεν έχει αρχικοποιηθεί.

var x;
console.log(x);         // undefined
console.log(typeof x);  // "undefined"

const y = undefined;
console.log(y);         // undefined

const arr = [1, 2, 3];
console.log(arr[3]);    // undefined

function foo() {
  return;
}

console.log(foo());     // undefined

Null

Η τιμή null χρησιμοποιείται όταν θέλουμε να δηλώσουμε ότι μια μεταβλητή δεν περιέχει τίποτα.

const x = null;
console.log(x);         // null
console.log(typeof x);  // "object"  (???)

Warning

Η τιμή null επιστρέφει "object" όταν χρησιμοποιήσουμε τον operator typeof. Αυτό είναι ένα bug στην JavaScript που υπάρχει απο τις πρώτες κιόλας εκδόσεις της γλώσσας. Αυτό το bug διατηρείται μέχρι και σημερα για λόγους συμβατότητας με παλαιότερες εκδόσεις της γλώσσας.

BigInt

Ο τύπος BigInt χρησιμοποιείται για ακέραιους αριθμούς με μεγάλη ακρίβεια. Μπορούμε να δηλώσουμε μια τιμή τέτοιου τύπου προσθέτοντας τον χαρακτήρα n στο τέλος της τιμής.

const x = 237n;
console.log(x);         // 237n
console.log(typeof x);  // "bigint"

Symbol

Ο τύπος Symbol χρησιμοποιείται για τη δημιουργία μοναδικών τιμών. Ένα Symbol δεν μπορεί να συγκριθεί με άλλες τιμές.

const x = Symbol("Hello");
console.log(x);         // Symbol(Hello)
console.log(typeof x);  // "symbol"

const y = Symbol("Hello");
console.log(x === y);   // false

const z = Symbol("World");
console.log(x === z);   // false

Objects

Ο τύπος Object χρησιμοποιείται για τη δημιουργία αντικειμένων. Ένα αντικείμενο είναι μια συλλογή από ζεύγη κλειδιών-τιμών.

const person = {
  name: "John",
  age: 30,
  city: "New York"
};

console.log(person);        // { name: "John", age: 30, city: "New York" }
console.log(typeof person); // "object"

Σε αυτή τη κατηγορία ανήκουν επίσης οι Πίνακες (Arrays) και οι Συναρτήσεις (Functions), τα οποία θα μελετήσουμε σε επόμενα κεφάλαια. Περισσότερα για τα αντικείμενα στο κεφάλαιο "Αντικείμενα".

Αλλαγή Τύπου

Όπως είπαμε στην αρχή, η JavaScript είναι μια γλώσσα δυναμικού τύπου, που σημαίνει ότι μια μεταβλητή μπορεί να περιέχει δεδομένα διαφορετικού τύπου κατά τη διάρκεια της εκτέλεσης του προγράμματος.

Υπάρχουν δύο τρόποι για να αλλάξει ο τύπος μιας τιμής:

Type Conversion (Type Casting)
Type Coercion (Implicit Type Conversion)

Type Conversion

Η Type Conversion είναι η εξαναγκασμένη αλλαγή τύπου μιας τιμής από τον προγραμματιστή. Αυτό γίνεται με τη χρήση των εντολών Number(), String(), Boolean().

Number()

Η συνάρτηση Number() μετατρέπει μια τιμή σε αριθμό.

const x = "10";
console.log(Number(x)); // 10

Αν η τιμή δεν μπορεί να μετατραπεί σε αριθμό, τότε η συνάρτηση επιστρέφει την τιμή NaN.

const x = "Hello";
console.log(Number(x)); // NaN

String()

Η συνάρτηση String() μετατρέπει μια τιμή σε αλφαριθμητικό.

const x = 10;
console.log(String(x)); // "10"

Boolean()

Η συνάρτηση Boolean() μετατρέπει μια τιμή σε boolean.

Οι εξής τιμές μετατρέπονται σε false:

false
0
"" (κενό string)
null
undefined
NaN

Οποιαδήποτε άλλη τιμή μετατρέπεται σε true.

const x = 0;
console.log(Boolean(x)); // false

const y = "Hello";
console.log(Boolean(y)); // true

Type Coercion

Η Type Coercion είναι η αυτόματη αλλαγή τύπου μιας τιμής από την JavaScript. Αυτό συμβαίνει όταν δύο τιμές διαφορετικών τύπων συγκρίνονται μεταξύ τους.

Για παράδειγμα, όταν μια αριθμητική τιμή συγκρίνεται με μια αλφαριθμητική τιμή, η αλφαριθμητική τιμή μετατρέπεται σε αριθμό.

const x = 10;
const y = "10";

console.log(x == y);    // true

Στο παραπάνω παράδειγμα, η τιμή της μεταβλητής y μετατρέπεται σε αριθμό πριν γίνει η σύγκριση.

Συνένωση Τύπων

Όταν συνενώνουμε δύο αλφαριθμητικές τιμές με τον τελεστή +, τότε οι τιμές μετατρέπονται σε αλφαριθμητικές.

const x = "Hello";
const y = "World";

console.log(x + y);     // "HelloWorld"

Αν η μία τιμή είναι αριθμός, τότε η αλλη τιμή μετατρέπεται σε αριθμό.

const x = 10;
const y = "20";

console.log(x + y);     // 30

Αν οι δύο τιμές είναι αριθμοί, τότε γίνεται αριθμητική πρόσθεση.

const x = 10;
const y = 20;

console.log(x + y);     // 30

Truthy & Falsy

Στην JavaScript, υπάρχουν οι εξής τιμές που ερμηνεύονται ως false:

false
0
"" (κενό string)
null
undefined
NaN

Οποιαδήποτε άλλη τιμή ερμηνεύεται ως true.

const x = 0;

if (x) {
  console.log("Truthy");
} else {
  console.log("Falsy"); // Εκτυπώνει "Falsy"
}

Χαλαρή Ισότητα

Η χαλαρή ισότητα (Loose Equality) είναι μια σύγκριση μεταξύ δύο τιμών χωρίς να λαμβάνεται υπόψη ο τύπος τους. Αυτό σημαίνει ότι οι τιμές με διαφορετικούς τύπους μπορούν να είναι ίσες.

Ο τελεστής για τη χαλαρή ισότητα είναι το ==.

const x = 10;
const y = "10";

if (x == y) {
  console.log("Equal"); // Εκτυπώνει "Equal"
}

Αυστηρή Ισότητα

Η αυστηρή ισότητα (Strict Equality) είναι μια σύγκριση μεταξύ δύο τιμών λαμβάνοντας υπόψη και τον τύπο τους. Αυτό σημαίνει ότι οι τιμές με διαφορετικούς τύπους δεν μπορούν να είναι ίσες.

Ο τελεστής για την αυστηρή ισότητα είναι το ===.

const x = 10;
const y = "10";

if (x === y) {
  console.log("Equal");
} else {
  console.log("Not Equal"); // Εκτυπώνει "Not Equal"
}

Αντικείμενα

Τα αντικείμενα είναι μια συλλογή από ζεύγη κλειδιών-τιμών. Τα κλειδιά είναι strings και οι τιμές μπορούν να είναι οποιουδήποτε τύπου δεδομένων.

Ο τρόπος αναπαράστασης των αντικειμένων στη JavaScript καθιερώθηκε ώς ο πιο δημοφιλής τρόπος αναπαράστασης δεδομένων. Αυτός ο τρόπος αναπαράστασης είναι γνωστός ως JSON (JavaScript Object Notation). Το JSON είναι ένα απλό και εύκολο στην κατανόηση σύνταξη για την ανταλλαγή δεδομένων μεταξύ εφαρμογών.

Δημιουργία Αντικειμένου

Για να δημιουργήσουμε ένα αντικείμενο, χρησιμοποιούμε τις αγκύλες {}.

const person = {
  name: "John",
  age: 30,
  city: "New York"
};

Το παραπάνω αντικείμενο έχει τρία κλειδιά: name, age και city. Κάθε κλειδί αντιστοιχίζεται σε μια τιμή.

Εναλλακτικός τρόπος δημιουργίας αντικειμένου είναι με τη χρήση της μεθόδου Object().

const person = new Object();
person.name = "John";           // person = { name: "John" }
person.age = 30;                // person = { name: "John", age: 30 }
person.city = "New York";       // person = { name: "John", age: 30, city: "New York" }

Πρόσβαση σε Ιδιότητες

Για να αποκτήσουμε πρόσβαση σε μια ιδιότητα ενός αντικειμένου, χρησιμοποιούμε τον τελεστή . ή τις αγκύλες [].

const person = {
  name: "John",
  age: 30,
  city: "New York"
};

console.log(person.name);       // "John"
console.log(person["age"]);     // 30

Αν η ιδιότητα που προσπαθούμε να αποκτήσουμε πρόσβαση δεν υπάρχει, τότε η τιμή που επιστρέφεται είναι undefined.

console.log(person.city);       // "New York"
console.log(person["job"]);     // undefined

Προσθήκη Ιδιοτήτων

Για να προσθέσουμε μια ιδιότητα σε ένα αντικείμενο, χρησιμοποιούμε τον τελεστή . ή τις αγκύλες [] ακολουθούμενο από το όνομα της ιδιότητας και την τιμή της.

const person = {
  name: "John",
  age: 30,
  city: "New York"
};

person.job = "Developer";
person["salary"] = 50000;

console.log(person);    // { name: "John", age: 30, city: "New York", job: "Developer", salary: 50000 }

Διαγραφή Ιδιοτήτων

Για να διαγράψουμε μια ιδιότητα από ένα αντικείμενο, χρησιμοποιούμε την εντολή delete.

const person = {
  name: "John",
  age: 30,
  city: "New York"
};

delete person.city;

console.log(person);    // { name: "John", age: 30 }

Αλλαγή Ιδιοτήτων

Για να αλλάξουμε την τιμή μιας ιδιότητας ενός αντικειμένου, απλά προσπελαύνουμε την ιδιότητα και την αντικαθιστούμε με μια νέα τιμή.

const person = {
  name: "John",
  age: 30,
  city: "New York"
};

person.age = 35;
person["city"] = "Los Angeles";

console.log(person);    // { name: "John", age: 35, city: "Los Angeles" }

Εμφώλευση Αντικειμένων

Μπορούμε να ενσωματώσουμε ένα αντικείμενο μέσα σε ένα άλλο αντικείμενο, δημιουργώντας έτσι ένα σύνθετο αντικείμενο.

Αυτή η διαδικασία ονομάζεται εμφώλευση αντικειμένων.

const person = {
  name: "John",
  age: 30,
  city: "New York"
};

const job = {
  title: "Developer",
  salary: 50000
};

person.job = job;

console.log(person);    // { name: "John", age: 30, city: "New York", job: { title: "Developer", salary: 50000 } }

Πίνακες

Οι πίνακες είναι μια συλλογή από τιμές, οι οποίες αποθηκεύονται σε μια μεταβλητή. Οι τιμές αυτές μπορούν να είναι οποιουδήποτε τύπου δεδομένων.

Για να δηλώσουμε έναν πίνακα, χρησιμοποιούμε τα αγκύλες [].

const fruits = ["Apple", "Banana", "Orange"];

Οι τιμές ενός πίνακα μπορούν να αλλάξουν κατά τη διάρκεια της εκτέλεσης του προγράμματος. Αυτό σημαίνει ότι μπορούμε να προσθέσουμε, να αφαιρέσουμε ή να αλλάξουμε τις τιμές του πίνακα.

Επίσης οι τιμές ενός πίνακα μπορούν να είναι οποιουδήποτε τύπου δεδομένων.

const arr = [10, "Hello", true, null, undefined];

Πρόσβαση σε Στοιχεία

Για να αποκτήσουμε πρόσβαση σε ένα στοιχείο ενός πίνακα, χρησιμοποιούμε τον αριθμό της θέσης του στοιχείου μέσα στις αγκύλες [].

Οι θέσεις των στοιχείων ενός πίνακα ξεκινούν από το 0.

const fruits = ["Apple", "Banana", "Orange"];

console.log(fruits[0]); // "Apple"
console.log(fruits[1]); // "Banana"
console.log(fruits[2]); // "Orange"

Note

Αν προσπαθήσουμε να αποκτήσουμε πρόσβαση σε μια θέση που δεν υπάρχει, τότε η τιμή που επιστρέφεται είναι undefined.

console.log(fruits[3]); // undefined

Μήκος Πίνακα

Για να μάθουμε το μήκος ενός πίνακα, χρησιμοποιούμε την ιδιότητα length.

const fruits = ["Apple", "Banana", "Orange"];

console.log(fruits.length); // 3

Προσθήκη Στοιχείων

Για να προσθέσουμε ένα στοιχείο στο τέλος ενός πίνακα, χρησιμοποιούμε τη μέθοδο push().

const fruits = ["Apple", "Banana", "Orange"];

fruits.push("Strawberry");

console.log(fruits); // ["Apple", "Banana", "Orange", "Strawberry"]

Αφαίρεση Στοιχείων

Για να αφαιρέσουμε το τελευταίο στοιχείο ενός πίνακα, χρησιμοποιούμε τη μέθοδο pop().

const fruits = ["Apple", "Banana", "Orange"];

fruits.pop();

console.log(fruits); // ["Apple", "Banana"]

Για να αφαιρέσουμε το πρώτο στοιχείο ενός πίνακα, χρησιμοποιούμε τη μέθοδο shift().

const fruits = ["Apple", "Banana", "Orange"];

fruits.shift();

console.log(fruits); // ["Banana", "Orange"]

Οι Πίνακες είναι Αντικείμενα

Στην JavaScript, οι πίνακες είναι αντικείμενα. Αυτό σημαίνει ότι μπορούμε να προσθέσουμε ιδιότητες και μεθόδους σε έναν πίνακα.

const fruits = ["Apple", "Banana", "Orange"];

fruits.color = "Red";           // Προσθήκη ιδιότητας

console.log(fruits.color);      // "Red"

fruits.sayHello = function() {  // Προσθήκη μεθόδου
  console.log("Hello!");
};

fruits.sayHello();              // "Hello!"

for (let item in fruits) {      // Εμφάνιση όλων των ιδιοτήτων (κλειδιών) του πίνακα
  console.log(item);            // "0", "1", "2", "color", "sayHello"
}

Συναρτήσεις

Δήλωση Συνάρτησης

Για να δηλώσουμε μια συνάρτηση στην JavaScript, χρησιμοποιούμε τη λέξη-κλειδί function.

function myFunction() {
  console.log("Hello World!");
}

Η συνάρτηση αυτή μπορεί να κληθεί με το όνομά της.

myFunction();           // "Hello World!"

Οι Συναρτήσεις είναι Αντικείμενα

Στην JavaScript, οι συναρτήσεις είναι αντικείμενα. Αυτό σημαίνει ότι μπορούμε να προσθέσουμε ιδιότητες και μεθόδους σε μια συνάρτηση.

function myFunction() {
  console.log("Hello World!");
}

myFunction.color = "Red";           // Προσθήκη ιδιότητας

console.log(myFunction.color);      // "Red"

myFunction.sayHello = function() {  // Προσθήκη μεθόδου
  console.log("Hello!");
};

myFunction.sayHello();              // "Hello!"

for (let item in myFunction) {      // Εμφάνιση όλων των ιδιοτήτων (κλειδιών) της συνάρτησης
  console.log(item);                // "color", "sayHello"
}

Ανώνυμες Συναρτήσεις

Μπορούμε επίσης να αναθέσουμε τη συνάρτηση σε μια μεταβλητή. Σε αυτήν τη περίπτωση, η κλήση της συνάρτησης γίνεται με το όνομα της μεταβλητής. Οι συναρτήσεις που αναθέτουμε σε μεταβλητές ονομάζονται Ανώνυμες Συναρτήσεις.

const myFunction = function() {
  console.log("Hello World!");
};

myFunction();           // "Hello World!"

Η ανάθεση συνάρτησης σε μεταβλητή μας επιτρέπει επίσης να περάσουμε τη συνάρτηση ως όρισμα σε μια άλλη συνάρτηση.

function sayHello(callbackFunction) {
  callback();
}

sayHello(myFunction);   // "Hello World!"

Οι συναρτήσεις που δίνονται ώς όρισμα σε μια άλλη συνάρτηση συχνά ονομάζονται Συναρτήσεις Επανάκλησης (Callback Functions).

Συναρτήσεις Υψηλότερης Τάξης

Οι συναρτήσεις που δέχονται μια άλλη συνάρτηση ως όρισμα ή επιστρέφουν μια συνάρτηση, ονομάζονται Συναρτήσεις Υψηλότερης Τάξης (Higher-Order Functions).

Ένα παράδειγμα συνάρτησης υψηλότερης τάξης είναι η filter(), η οποία δέχεται μια συνάρτηση ως όρισμα και επιστρέφει ένα νέο πίνακα με τα στοιχεία που πληρούν τη συνθήκη που ορίζεται στη συνάρτηση. Η filter() είναι μια από τις πολλές ενσωματωμένες συναρτήσεις για πίνακες στη JavaScript.

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const evenNumbers = numbers.filter(function(number) {
  return number % 2 === 0;
});

console.log(evenNumbers);   // [2, 4, 6, 8, 10]

Arrow Functions

Οι Arrow Functions είναι μια συντομευμένη σύνταξη για τη δημιουργία συναρτήσεων στη JavaScript. Είναι συνήθως πιο σύντομες από τις συναρτήσεις που δηλώνονται με τη λέξη-κλειδί function. Οι Arrow Functions εισήχθησαν στην JavaScript με την ES6.

Όλοι οι παρακάτω ορισμοί συναρτήσεων είναι ισοδύναμοι.

function addOne(input) { return input + 1; }
// ή
const addOne = function(input) { return input + 1; };
// ή
const addOne = (input) => { return input + 1; };
// ή
const addOne = (input) => input + 1;
// ή
const addOne = input => input + 1;

Αν η συνάρτηση δέχεται όρισμα, τότε δεν χρειάζεται να χρησιμοποιήσουμε παρενθέσεις, όπως στο τελευταίο παράδειγμα.

const myFunction = name => {
  console.log(`Hello ${name}!`);
};

myFunction("John");   // "Hello John!"

Αντικειμενοστραφής Προγραμματισμός

Ο Αντικειμενοστραφής Προγραμματισμός (Object-Oriented Programming - OOP) είναι μια μεθοδολογία προγραμματισμοϋ, η οποία βασίζεται στην αναπαράσταση εννοιών ως αντικείμενα. Στην JavaScript, όπως είδαμε, τα αντικείμενα είναι συλλογές από ιδιότητες και μεθόδους.

Οι βασικές αρχές του Αντικειμενοστραφής Προγραμματισμοϋ είναι:

Κλάσεις (Classes): Ορίζουν τη δομή ενός αντικειμένου.
Αντικείμενα (Objects): Είναι συγκεκριμένα στιγμιότυπα μιας κλάσης.
Ιδιότητες (Properties): Χαρακτηρίζουν τα χαρακτηριστικά ενός αντικειμένου.
Μέθοδοι (Methods): Είναι συναρτήσεις που ανήκουν σε ένα αντικείμενο.

This Keyword

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

Στον παρακάτω κώδικα, το this αναφέρεται στο αντικείμενο person.

const person = {
  name: "John",
  age: 30,
  city: "New York",
  sayHello: function() {
    console.log(`Hello, my name is ${this.name}`);
  }
};

person.sayHello();    // "Hello, my name is John"

Αν καλέσουμε τη μέθοδο sayHello() χωρίς το this, τότε το name δεν θα αναφέρεται στο όνομα του αντικειμένου person, αλλά σε μια μεταβλητή με το όνομα name.

const person = {
  name: "John",
  age: 30,
  city: "New York",
  sayHello: function() {
    console.log(`Hello, my name is ${name}`);
  }
};

person.sayHello();    // "Hello, my name is "

Κλάσεις

Στην JavaScript χρησιμοποιούμε τις συναρτήσεις για να ορίσουμε μια κλάση. Οι συναρτήσεις αυτές ονομάζονται Συναρτήσεις Κατασκευής (Constructor Functions). Η κλάση αυτή ορίζει τις ιδιότητες και τις μεθόδους που θα έχουν τα αντικείμενα που δημιουργοϋνται από αυτήν. Συνηθισμένη πρακτική είναι η ονομασία των κλάσεων με κεφαλαίο πρώτο γράμμα.

function Person(name, age) {
  this.name = name;
  this.age = age;
}

const john = new Person("John", 30);

Στο παραπάνω παράδειγμα, η συνάρτηση Person είναι μια κλάση που ορίζει τις ιδιότητες name και age. Το αντικείμενο john δημιουργείται από την κλάση Person με τις τιμές "John" και 30.

Για να προσθέσουμε μια μέθοδο σε μια κλάση, χρησιμοποιούμε το πεδίο πρωτοτύπου (prototype) της κλάσης.

Prototype

Στην JavaScript, όλα τα αντικείμενα έχουν ένα πεδίο πρωτοτύπου (prototype), το οποίο είναι ένα αντικείμενο από το οποίο κληρονομούνται ιδιότητες και μέθοδοι. Καθώς το πεδίο πρωτοτύπου είναι ένα αντικείμενο, αυτό σημαίνει ότι και αυτό έχει ένα πεδίο πρωτοτύπου, το οποίο μπορεί να έχει ένα άλλο πεδίο πρωτοτύπου και ούτω καθεξής. Αυτό ονομάζεται Αλυσίδα Πρωτοτύπων (Prototype Chain).

Μπορούμε να προσπελάσουμε το πεδίο πρωτοτύπου ενός αντικειμένου με την ιδιότητα __proto__.

const person = {
  name: "John",
  age: 30,
  city: "New York"
};

console.log(person.__proto__);   // { constructor: f Object(), __defineGetter__: f, __defineSetter__: f, ... }

Όταν καλούμε μια ιδιότητα ενός αντικειμένου, η JavaScript πρώτα ψάχνει την ιδιότητα στο ίδιο το αντικείμενο. Αν δεν βρει την ιδιότητα, τότε ψάχνει στο πεδίο πρωτοτύπου του αντικειμένου.

Στο παρακάτω παράδειγμα, η συνάρτηση sayHello() δεν ορίζεται στο αντικείμενο john, αλλά στο πεδίο πρωτοτύπου της κλάσης Person. Αυτό σημαίνει ότι όλα τα αντικείμενα που δημιουργοϋνται από την κλάση Person θα έχουν πρόσβαση στη μέθοδο sayHello().

function Person(name, age) {
  this.name = name;
  this.age = age;
}

Person.prototype.sayHello = function() {
  console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
};

const john = new Person("John", 30);
john.sayHello();        // "Hello, my name is John and I am 30 years old."

Κληρονομικότητα

Η κληρονομικότητα είναι η ικανότητα μιας κλάσης να κληρονομήσει ιδιότητες και μεθόδους από μια άλλη κλάση. Στην JavaScript, η κληρονομικότητα επιτυγχάνεται μέσω του πεδίου πρωτοτύπου.

Στο παρακάτω παράδειγμα, η κλάση Developer κληρονομεί τις ιδιότητες και τις μεθόδους της κλάσης Person.

function Person(name, age) {
  this.name = name;
  this.age = age;
}

Person.prototype.sayHello = function() {
  console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
};

function Developer(name, age, language) {
  Person.call(this, name, age);
  this.language = language;
}

Developer.prototype = Object.create(Person.prototype);
Developer.prototype.constructor = Developer;

Developer.prototype.sayLanguage = function() {
  console.log(`I am a developer and I code in ${this.language}.`);
};

const john = new Developer("John", 30, "JavaScript");

john.sayHello();        // "Hello, my name is John and I am 30 years old."
john.sayLanguage();     // "I am a developer and I code in JavaScript."

Με την χρήση της μεθόδου call(), καλούμε τον κατασκευαστή της κλάσης Person με το this της κλάσης Developer. Αυτό είναι απαραίτητο για να μπορέσουμε να περάσουμε τις τιμές name και age στην κλάση Person.

Η μέθοδος Object.create() δημιουργεί ένα νέο αντικείμενο με το πεδίο πρωτοτύπου του αντικειμένου που περνάμε ως όρισμα. Στην περίπτωσή μας, δημιουργοϋμε ένα νέο αντικείμενο με το πεδίο πρωτοτύπου της κλάσης Person.

Τέλος, ορίζουμε την ιδιότητα constructor του πεδίου πρωτοτύπου της κλάσης Developer ώστε να δείχνει πάλι στην κλάση Developer.

Class Keyword

Η λέξη-κλειδί class εισήχθηκε στην JavaScript με την ES6 για να διευκολύνει τη δημιουργία κλάσεων. Η σύνταξη της class είναι πιο συντομευμένη από τη χρήση των συναρτήσεων κατασκευής. Η class δημιουργεί μια συνάρτηση κατασκευής, η οποία ονομάζεται constructor.

Δεν έχει καμία διαφορά στην ουσία με τη χρήση των συναρτήσεων κατασκευής και του πεδίου πρωτοτύπου. Η class είναι απλά μια συντομευμένη μορφή για τη δημιουργία κλάσεων. Σην κοινότητα της JavaScript συχνά το ονομάζουν σαν syntactic sugar.

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  sayHello() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  }
}

// Κληρονομικότητα
class Developer extends Person {
  constructor(name, age, language) {
    super(name, age);
    this.language = language;
  }

  sayLanguage() {
    console.log(`I am a developer and I code in ${this.language}.`);
  }
}

const john = new Developer("John", 30, "JavaScript");

john.sayHello();        // "Hello, my name is John and I am 30 years old."
john.sayLanguage();     // "I am a developer and I code in JavaScript."

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

Η μέθοδος super() καλεί τον κατασκευαστή της γονικής κλάσης με το this της κλάσης Developer. Αυτό είναι απαραίτητο για να μπορέσουμε να περάσουμε τις τιμές name και age στην κλάση Person.

DOM

Το Document Object Model (DOM) είναι ένα αντικειμενοστραφές μοντέλο (γραμμένο σε C++) που αναπαριστά το έγγραφο HTML ως δέντρο αντικειμένων (nodes). Το DOM επιτρέπει στους προγραμματιστές να αλλάξουν το περιεχόμενο, τη δομή και το στυλ στα elements της σελίδας HTML.

Επιλογή Στοιχείων

Επιλέγοντας ένα στοιχείο απο το DOM, μας επιστρέφεται στην JavaScript ένα αντικείμενο. Αυτό το αντικείμενο έχει πολλές μεθόδους και ιδιότητες που μας επιτρέπουν να αλλάξουμε το περιεχόμενο, τη δομή και το στυλ του.

Για να επιλέξουμε ένα στοιχείο στο DOM, μπορούμε να χρησιμοποιήσουμε τις παρακάτω μεθόδους:

getElementById(): Επιστρέφει το στοιχείο που έχει το συγκεκριμένο id.

// <div id="myElement">Hello World!</div>

const element = document.getElementById("myElement");

getElementsByClassName(): Επιστρέφει ένα σύνολο στοιχείων που έχουν τη συγκεκριμένη κλάση. Το αποτέλεσμα είναι ένα HTMLCollection. Αυτό είναι πρακτικά ένας πίνακας που περιέχει όλα τα στοιχεία που έχουν τη συγκεκριμένη κλάση. Τα στοιχεία στο HTMLCollection μπορούν να προσπελαστούν με τη χρήση της θέσης τους στον πίνακα.

// <div class="myClass">First Element</div>
// <div class="myClass">Second Element</div>

const elements = document.getElementsByClassName("myClass");

console.log(elements[0]);   // <div class="myClass">First Element</div>

getElementsByTagName(): Επιστρέφει ένα σύνολο στοιχείων που έχουν το συγκεκριμένο tag name. Το αποτέλεσμα είναι ένα πάλι ένα HTMLCollection.

// <div>First Element</div>
// <div>Second Element</div>

const elements = document.getElementsByTagName("div");

console.log(elements[0]);   // <div>First Element</div>

querySelector(): Επιστρέφει το πρώτο στοιχείο που ταιριάζει με το συγκεκριμένο selector. Αν δεν υπάρχει κανένα στοιχείο που ταιριάζει με τον selector, τότε επιστρέφεται null.

// <div id="myElement">Hello World!</div>

const element = document.querySelector("#myElement");

Caution

Προσοχή όταν χρησιμοποιείτε το querySelector(), ο selector πρέπει να είναι σε μορφή CSS. Αυτό σημαίνει ότι πρέπει να χρησιμοποιήσετε το # για να επιλέξετε ένα στοιχείο με βάση το id ή την . για να επιλέξετε ένα στοιχείο με βάση την κλάση.

querySelectorAll(): Επιστρέφει όλα τα στοιχεία που ταιριάζουν με το συγκεκριμένο selector. Το αποτέλεσμα είναι ένα NodeList. Το NodeList είναι παρόμοιο με το HTMLCollection, αλλά δεν είναι πίνακας. Τα στοιχεία στο NodeList μπορούν να προσπελαστούν με τη χρήση της μεθόδου forEach().

// <div class="myClass">First Element</div>
// <div class="myClass">Second Element</div>

const elements = document.querySelectorAll(".myClass");

elements.forEach(element => {
  console.log(element);  // <div class="myClass">First Element</div>
});

Αλλαγή Περιεχομένου

Έστω οτι έχουμε το ακόλουθο html αρχείο:

<div id="myList">
  This is my <b>links collection</b>:
  <ul>
    <li><a href="https://katabetian.dev">Andreas <b>Karabetian</b> </a></li>
    <li><a href="https://ds.unipi.gr">Welcome to <b>DS Unipi!</b></a></li>
    <li style="display: none;">Hidden Link</li>
  </ul>
</div>

Για να αλλάξουμε το περιεχόμενο ενός στοιχείου στο DOM, μπορούμε να χρησιμοποιήσουμε τις παρακάτω μεθόδους:

innerHTML: Χρησιμοποιείται για να πάρει ή να ορίσει το HTML περιεχόμενο ενός στοιχείου.

Caution

Προσοχή: Η χρήση του innerHTML μπορεί να οδηγήσει σε security vulnerabilities. Αν το HTML περιεχόμενο που περνάτε στο innerHTML προέρχεται από χρήστη, τότε πρέπει να είστε προσεκτικοί.

const element = document.getElementById("myList");

console.log(element.innerHTML);  

// Returns the whole HTML content of the element:

// This is my <b>links collection</b>: 
// <ul> 
//  <li><a href="https://katabetian.dev">Andreas <b>Karabetian</b> </a></li> 
//  <li><a href="https://ds.unipi.gr">Welcome to <b>DS Unipi!</b></a></li> 
//  <li style="display: none;">Hidden Link</li>
// </ul>

innerText: Χρησιμοποιείται για να πάρει ή να ορίσει το κείμενο ενός στοιχείου. Η διαφορά με το innerHTML είναι ότι το innerText αγνοεί το HTML περιεχόμενο.

const element = document.getElementById("myList");

console.log(element.innerText);

// Returns the text content of the element:

// This is my links collection:
// Andreas Karabetian
// Welcome to DS Unipi!

textContent: Χρησιμοποιείται για να πάρει ή να ορίσει το κείμενο ενός στοιχείου. Η διαφορά με το innerText είναι ότι το textContent επιστρέφει όλο το κείμενο, συμπεριλαμβανομένων των κειμένων που είναι κρυμμένα με CSS.

const element = document.getElementById("myElement");

console.log(element.textContent);

// Returns the text content of the element:

// This is my links collection:
// Andreas Karabetian
// Welcome to DS Unipi!
// Hidden Link

Αλλαγή Στυλ

Για να αλλάξουμε το στυλ ενός στοιχείου στο DOM, μπορούμε να χρησιμοποιήσουμε την ιδιότητα style. Η ιδιότητα style είναι ένα αντικείμενο που περιέχει όλα τα CSS attributes ενός στοιχείου.

// <div id="myElement">Hello World!</div>

const element = document.getElementById("myElement");

element.style.color = "red";
element.style.fontSize = "24px";

Μπορούμε επίσης να χρησιμοποιήσουμε τη μέθοδο setAttribute() για να ορίσουμε τα CSS attributes ενός στοιχείου.

// <div id="myElement">Hello World!</div>

const element = document.getElementById("myElement");

element.setAttribute("style", "color: red; font-size: 24px;");

Δημιουργία Στοιχείων

Για να δημιουργήσουμε ένα στοιχείο στο DOM, μπορούμε να χρησιμοποιήσουμε τις παρακάτω μεθόδους:

createElement(): Δημιουργεί ένα νέο στοιχείο με το συγκεκριμένο tag name.

const element = document.createElement("div");

createTextNode(): Δημιουργεί ένα νέο κείμενο.

const text = document.createTextNode("Hello World!");

Για να προσθέσουμε το στοιχείο στο DOM, μπορούμε να χρησιμοποιήσουμε τις παρακάτω μεθόδους:

appendChild(): Προσθέτει ένα στοιχείο ως τελευταίο παιδί ενός άλλου στοιχείου.

// <div id="parentElement"></div>

const parentElement = document.getElementById("parentElement");

const element = document.createElement("div");

parentElement.appendChild(element);

insertBefore(): Προσθέτει ένα στοιχείο πριν από ένα άλλο στοιχείο.

// <div id="parentElement"></div>

const parentElement = document.getElementById("parentElement");

const element = document.createElement("div");

parentElement.insertBefore(element, parentElement.firstChild);

Αφαίρεση Στοιχείων

Για να αφαιρέσουμε ένα στοιχείο από το DOM, μπορούμε να χρησιμοποιήσουμε τις παρακάτω μεθόδους:

removeChild(): Αφαιρεί ένα στοιχείο από το DOM.

// <div id="parentElement">

const parentElement = document.getElementById("parentElement");

const element = document.createElement("div");

parentElement.appendChild(element);

parentElement.removeChild(element);

remove(): Αφαιρεί το στοιχείο από το DOM.

// <div id="parentElement">

const parentElement = document.getElementById("parentElement");

const element = document.createElement("div");

parentElement.appendChild(element);

element.remove();

Event Listeners

Για να προσθέσουμε ένα event σε ένα στοιχείο στο DOM, μπορούμε να χρησιμοποιήσουμε τη μέθοδο addEventListener(). Η addEventListener() παίρνει δύο ορίσματα: το όνομα του event και τη συνάρτηση που θα εκτελεστεί όταν συμβεί το event.

Ορισμένα από τα πιο συνηθισμένα events είναι:

Mouse Events: click, dblclick, mousedown, mouseup, contextmenu, mouseout, mousewheel, mouseover
Touch Events: touchstart, touchend, touchmove, touchcancel
Keyboard Events: keydown, keyup, keypress
Form Events: focus, blur, change, submit
Window Events: resize, scroll, load, unload, hashchange

// <button id="myButton">Click Me!</button>

const button = document.getElementById("myButton");

button.addEventListener("click", function() {
  console.log("Button Clicked!");
});

Το παραπάνω παράδειγμα προσθέτει ένα event listener στο κουμπί. Όταν το κουμπί πατηθεί, τότε εκτελείται η συνάρτηση που είναι περασμένη ως δεύτερο όρισμα στη μέθοδο addEventListener().

Μπορούμε επίσης να χρησιμοποιήσουμε τη μέθοδο removeEventListener() για να αφαιρέσουμε ένα event από ένα στοιχείο.

// <button id="myButton">Click Me!</button>

const button = document.getElementById("myButton");

function handleClick() {
  console.log("Button Clicked!");
}

button.addEventListener("click", handleClick);

button.removeEventListener("click", handleClick);

Name		Name	Last commit message	Last commit date
Latest commit History 18 Commits
README.md		README.md

adreaskar/javascript.gr

Folders and files

Latest commit

History

Repository files navigation

Ο κόσμος της JavaScript

Περιεχόμενα

Εισαγωγή

Φταίει η JavaScript;

Spec & Manuals

Specification

MDN Web Docs

Compiled ή Interpreted;

Μεταβλητές

Δήλωση Μεταβλητών

Ανάθεση Τιμής

Εμβέλεια

var

let

const

Τύποι Δεδομένων

typeof

Primitive Types

Number

String

Boolean

Undefined

Null

BigInt

Symbol

Objects

Αλλαγή Τύπου

Type Conversion

Number()

String()

Boolean()

Type Coercion

Συνένωση Τύπων

Truthy & Falsy

Χαλαρή Ισότητα

Αυστηρή Ισότητα

Αντικείμενα

Δημιουργία Αντικειμένου

Πρόσβαση σε Ιδιότητες

Προσθήκη Ιδιοτήτων

Διαγραφή Ιδιοτήτων

Αλλαγή Ιδιοτήτων

Εμφώλευση Αντικειμένων

Πίνακες

Πρόσβαση σε Στοιχεία

Μήκος Πίνακα

Προσθήκη Στοιχείων

Αφαίρεση Στοιχείων

Οι Πίνακες είναι Αντικείμενα

Συναρτήσεις

Δήλωση Συνάρτησης

Οι Συναρτήσεις είναι Αντικείμενα

Ανώνυμες Συναρτήσεις

Συναρτήσεις Υψηλότερης Τάξης

Arrow Functions

Αντικειμενοστραφής Προγραμματισμός

This Keyword

Κλάσεις

Prototype

Κληρονομικότητα

Class Keyword

DOM

Επιλογή Στοιχείων

Αλλαγή Περιεχομένου

Αλλαγή Στυλ

Δημιουργία Στοιχείων

Αφαίρεση Στοιχείων

Event Listeners

Χρήσιμες Πηγές

About

Topics

Resources

Stars

Watchers

Forks