034.1 Μάθημα 1

Πιστοποιητικό:

Web Development Essentials

Έκδοση:

1.0

Θέμα:

034 Προγραμματισμός με JavaScript

Σκοπός:

034.1 Εκτέλεση και Σύνταξη JavaScript

Μάθημα:

1 απο 1

Εισαγωγή

Οι ιστοσελίδες αναπτύσσονται χρησιμοποιώντας τρεις τυπικές τεχνολογίες: HTML, CSS και JavaScript. Η JavaScript είναι μια γλώσσα προγραμματισμού που επιτρέπει στο πρόγραμμα περιήγησης να ενημερώνει δυναμικά το περιεχόμενο του ιστότοπου. Η JavaScript εκτελείται συνήθως από το ίδιο πρόγραμμα περιήγησης που χρησιμοποιείται για την προβολή μιας ιστοσελίδας. Αυτό σημαίνει ότι, όπως το CSS και το HTML, η ακριβής συμπεριφορά οποιουδήποτε κώδικα που γράφετε μπορεί να διαφέρει μεταξύ των προγραμμάτων περιήγησης. Αλλά τα περισσότερα κοινά προγράμματα περιήγησης συμμορφώνονται με το ECMAScript specification. Αυτό είναι ένα πρότυπο που ενοποιεί τη χρήση JavaScript στο Web και θα αποτελέσει τη βάση για το μάθημα, μαζί με την HTML5 specification, η οποία καθορίζει το πώς χρειάζεται η JavaScript να τοποθετηθεί σε μια ιστοσελίδα για να την εκτελέσει ένα πρόγραμμα περιήγησης.

Εκτέλεση JavaScript στο Πρόγραμμα Περιήγησης

Για να εκτελέσει JavaScript, το πρόγραμμα περιήγησης πρέπει να λάβει τον κώδικα είτε απευθείας, ως μέρος του HTML που συνθέτει την ιστοσελίδα, είτε ως διεύθυνση URL που υποδεικνύει μια τοποθεσία για την εκτέλεση ενός script.

Το ακόλουθο παράδειγμα δείχνει πώς να συμπεριλάβετε κώδικα απευθείας στο HTML αρχείο:

<html>
  <head>
  </head>
  <body>
    <h1>Website Headline</h1>
    <p>Content</p>

    <script>
      console.log('test');
    </script>

  </body>
</html>

Ο κώδικας περιλαμβάνεται μεταξύ των tags <script> και </script>. Όλα όσα περιλαμβάνονται σε αυτά τα tags θα εκτελεστούν απευθείας από το πρόγραμμα περιήγησης κατά τη φόρτωση της σελίδας.

Η θέση του element <script> μέσα στη σελίδα υπαγορεύει το πότε θα εκτελεστεί. Ένα HTML έγγραφο αναλύεται από πάνω προς τα κάτω, με το πρόγραμμα περιήγησης να αποφασίζει πότε θα εμφανιστούν τα elements στην οθόνη. Στο παράδειγμα που μόλις παρουσιάστηκε, τα tags <h1> και <p> του ιστότοπου αναλύονται και πιθανότατα εμφανίζονται πριν από την εκτέλεση του script. Εάν ο κώδικας JavaScript εντός του tag <script> χρειαζόταν πολύ χρόνο για να εκτελεστεί, η σελίδα θα εξακολουθούσε να εμφανίζεται χωρίς πρόβλημα. Εάν, ωστόσο, το script είχε τοποθετηθεί πάνω από τα άλλα tags, ο επισκέπτης της ιστοσελίδας θα έπρεπε να περιμένει μέχρι να ολοκληρωθεί η εκτέλεση του script πριν δει τη σελίδα. Για αυτόν τον λόγο, τα tags <script> τοποθετούνται συνήθως σε ένα από τα δύο μέρη:

Στο τέλος του HTML body, έτσι ώστε το script να είναι το τελευταίο πράγμα που εκτελείται. Κάντε το αυτό όταν ο κώδικας προσθέτει κάτι στη σελίδα που δεν θα ήταν χρήσιμο χωρίς το περιεχόμενο. Ένα παράδειγμα θα ήταν η προσθήκη λειτουργικότητας σε ένα κουμπί, καθώς το κουμπί πρέπει να υπάρχει για να έχει νόημα η λειτουργικότητα.
Μέσα στο element <head> του HTML. Αυτό διασφαλίζει ότι το script εκτελείται πριν από την ανάλυση του HTML body. Εάν θέλετε να αλλάξετε τη συμπεριφορά φόρτωσης της σελίδας ή έχετε κάτι που πρέπει να εκτελεστεί ενώ η σελίδα δεν είναι ακόμα πλήρως φορτωμένη, μπορείτε να βάλετε το script εδώ. Επίσης, εάν έχετε πολλά scripts που εξαρτώνται από ένα συγκεκριμένο script, μπορείτε να βάλετε αυτό το κοινό script στο head του εγγράφου για να βεβαιωθείτε ότι έχει εκτελεστεί πριν από άλλα scripts.

Για διάφορους λόγους, συμπεριλαμβανομένης της δυνατότητας διαχείρισης, είναι χρήσιμο να τοποθετείτε τον κώδικα JavaScript σε ξεχωριστά αρχεία που υπάρχουν εκτός του HTML κώδικά σας. Τα εξωτερικά αρχεία JavaScript περιλαμβάνονται χρησιμοποιώντας ένα <script> tag με ένα src attribute, ως εξής:

<html>
  <head>
    <script src="/button-interaction.js"></script>
  </head>
  <body>
  </body>
</html>

Το src tag λέει στο πρόγραμμα περιήγησης την τοποθεσία του source, δηλαδή το αρχείο που περιέχει τον κώδικα JavaScript. Η τοποθεσία μπορεί να είναι ένα αρχείο στον ίδιο server, όπως στο παραπάνω παράδειγμα, ή οποιαδήποτε διεύθυνση URL προσβάσιμη στον ιστό, όπως https://www.lpi.org/example.js. Η τιμή του attribute src ακολουθεί την ίδια σύμβαση με την εισαγωγή αρχείων CSS ή εικόνας, καθώς μπορεί να είναι σχετική ή απόλυτη. Μόλις συναντήσει ένα script tag με το attribute src, το πρόγραμμα περιήγησης θα προσπαθήσει στη συνέχεια να αποκτήσει το source αρχείο χρησιμοποιώντας ένα HTTP GET request, επομένως τα εξωτερικά αρχεία πρέπει να είναι προσβάσιμα.

Όταν χρησιμοποιείτε το attribute src, οποιοσδήποτε κώδικας ή κείμενο τοποθετείται μεταξύ των tags <script>…</script> αγνοείται, σύμφωνα με την προδιαγραφή HTML.

<html>
  <head>
    <script src="/button-interaction.js">
      console.log("test"); // <-- This is ignored
    </script>
  </head>
  <body>
  </body>
</html>

Υπάρχουν και άλλα attributes που μπορείτε να προσθέσετε στο tag script για να προσδιορίσετε περαιτέρω τον τρόπο λήψης των αρχείων από το πρόγραμμα περιήγησης και τον τρόπο χειρισμού τους στη συνέχεια. Η ακόλουθη λίστα περιγράφει λεπτομερώς τα πιο σημαντικά attributes:

async

Μπορεί να χρησιμοποιηθεί σε script tags και δίνει οδηγίες στο πρόγραμμα περιήγησης να ανακτήσει το script στο παρασκήνιο, ώστε να μην μπλοκάρει τη διαδικασία φόρτωσης της σελίδας. Η φόρτωση της σελίδας θα διακοπεί και πάλι, αφού το πρόγραμμα περιήγησης λάβει το script, επειδή το πρόγραμμα περιήγησης πρέπει να το αναλύσει, κάτι που γίνεται αμέσως μόλις ληφθεί πλήρως το script. Αυτό το attribute είναι Boolean, επομένως γράφοντας το tag ως <script async src="/script.js"></script> είναι επαρκής και δεν χρειάζεται να δοθεί τιμή.

defer

Παρόμοια με το async, αυτό δίνει εντολή στο πρόγραμμα περιήγησης να μην εμποδίζει τη διαδικασία φόρτωσης της σελίδας κατά την ανάκτηση του script. Αντί για αυτό, το πρόγραμμα περιήγησης θα αναβάλει την ανάλυση του script. Το πρόγραμμα περιήγησης θα περιμένει μέχρι να αναλυθεί ολόκληρο το HTML έγγραφο και μόνο τότε θα αναλύσει το script, προτού ανακοινώσει ότι το έγγραφο έπρεπε να φορτωθεί πλήρως. Όπως το async, το defer είναι ένα Boolean attribute και χρησιμοποιείται με τον ίδιο τρόπο. Δεδομένου ότι το defer υπονοεί async, δεν είναι χρήσιμο να χρησιμοποιήσετε και τα δύο tags μαζί.

Note

Όταν μια σελίδα αναλύεται πλήρως, το πρόγραμμα περιήγησης υποδεικνύει ότι είναι έτοιμη να εμφανιστεί ενεργοποιώντας ένα event DOMContentLoaded, όταν ο επισκέπτης θα μπορεί να δει το έγγραφο. Έτσι, η JavaScript που περιλαμβάνεται σε ένα <head> event έχει πάντα την ευκαιρία να ενεργήσει στη σελίδα προτού αυτή εμφανιστεί, ακόμα κι αν συμπεριλάβετε το defer attribute.

type

Υποδηλώνει τον τύπο του script που πρέπει να περιμένει το πρόγραμμα περιήγησης εντός του tag. Η προεπιλογή είναι JavaScript (type="application/javascript"), επομένως αυτό το attribute δεν είναι απαραίτητο όταν περιλαμβάνεται κώδικας JavaScript ή όταν δείχνει προς ένα JavaScript resource με το tag src. Γενικά, όλοι οι MIME τύποι μπορούν να καθοριστούν, αλλά μόνο τα scripts που δηλώνονται ως JavaScript θα εκτελούνται από το πρόγραμμα περιήγησης. Υπάρχουν δύο ρεαλιστικές περιπτώσεις χρήσης για αυτό το attribute: λέγοντας στο πρόγραμμα περιήγησης να μην εκτελέσει το script ορίζοντας το type σε μια αυθαίρετη τιμή όπως template ή other ή λέγοντας στο πρόγραμμα περιήγησης ότι το script είναι ένα ES6 module. Δεν καλύπτουμε ES6 modules σε αυτό το μάθημα.

Warning

Όταν πολλαπλά scripts έχουν το attribute async, θα εκτελούνται με τη σειρά που ολοκληρώνεται η λήψη τους, και οχι με τη σειρά των script tags στο έγγραφο. Το defer attribute, από την άλλη πλευρά, διατηρεί τη σειρά των script tags.

Κονσόλα Προγράμματος Περιήγησης

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

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

Chrome: Ctrl+Shift+J (Cmd+Option+J on Mac)
Firefox: Ctrl+Shift+K (Cmd+Option+K on Mac)
Safari: Ctrl+Shift+? (Cmd+Option+? on Mac)

Μπορείτε επίσης να κάνετε δεξί κλικ σε μια ιστοσελίδα και να επιλέξετε την επιλογή “Inspect” ή “Inspect Element” για να ανοίξετε τον inspector, που είναι ένα άλλο εργαλείο του προγράμματος περιήγησης. Όταν ανοίξει ο inspector, θα εμφανιστεί ένας νέος πίνακας. Σε αυτό το πλαίσιο, μπορείτε να επιλέξετε την καρτέλα “Console”, η οποία θα εμφανίσει την κονσόλα του προγράμματος περιήγησης.

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

JavaScript Statements

Τώρα που ξέρουμε πώς να ξεκινήσουμε την εκτέλεση ενός script, θα καλύψουμε τα βασικά για το πώς εκτελείται πραγματικά ένα script. Ένα JavaScript script, είναι μια συλλογή από statements και blocks. Ένα παράδειγμα ενός statement είναι το console.log('test'). Αυτή η εντολή λέει στο πρόγραμμα περιήγησης να κάνει output τη λέξη test στην κονσόλα του προγράμματος περιήγησης.

Κάθε statement στη JavaScript τερματίζεται με ένα ερωτηματικό (;). Αυτό λέει στο πρόγραμμα περιήγησης ότι το statement έχει ολοκληρωθεί και μπορεί να ξεκινήσει ένα νέο. Εξετάστε το ακόλουθο script:

var message = "test"; console.log(message);

Έχουμε γράψει δύο statements. Κάθε statement τερματίζεται είτε με ερωτηματικό είτε με το τέλος του script. Για λόγους αναγνωσιμότητας, μπορούμε να βάλουμε τα statements σε ξεχωριστές γραμμές. Με αυτόν τον τρόπο, το script θα μπορούσε επίσης να γραφτεί ως:

var message = "test";
console.log(message);

Αυτό είναι δυνατό επειδή αγνoείται όλος ο κενός χώρος [whitespace] μεταξύ των statements, όπως ένα διάστημα, μια νέα γραμμή ή ένα tab. Κενός χώρος μπορεί επίσης συχνά να τοποθετηθεί μεταξύ μεμονωμένων λέξεων-κλειδιών σε statements, αλλά αυτό θα εξηγηθεί περαιτέρω σε ένα προσεχές μάθημα. Τα statements μπορεί επίσης να είναι άδεια ή να αποτελούνται μόνο από κενό χώρο.

Εάν ένα statement δεν είναι έγκυρο επειδή δεν έχει τερματιστεί με ερωτηματικό, το ECMAScript επιχειρεί να εισαγάγει αυτόματα τα σωστά ερωτηματικά, με βάση ένα σύνθετο σύνολο κανόνων. Ο πιο σημαντικός κανόνας είναι: Εάν ένα μη έγκυρο statement αποτελείται από δύο έγκυρα statements που χωρίζονται από μια νέα γραμμή, εισάγετε ένα ερωτηματικό στη νέα γραμμή. Για παράδειγμα, ο ακόλουθος κώδικας δεν αποτελεί έγκυρο statement:

console.log("hello")
console.log("world")

Αλλά ένα σύγχρονο πρόγραμμα περιήγησης θα το εκτελέσει αυτόματα σαν να ήταν γραμμένο με τα σωστά ερωτηματικά:

console.log("hello");
console.log("world");

Έτσι, είναι δυνατή η παράλειψη ερωτηματικών σε ορισμένες περιπτώσεις. Ωστόσο, καθώς οι κανόνες για την αυτόματη εισαγωγή ερωτηματικών είναι περίπλοκοι, σας συμβουλεύουμε πάντα να τερματίζετε σωστά τα statements σας για να αποφύγετε ανεπιθύμητα σφάλματα.

JavaScript Commenting

Τα μεγάλα scripts μπορεί να γίνουν αρκετά περίπλοκα. Μπορεί να θέλετε να σχολιάσετε [comment] αυτό που γράφετε, για να κάνετε το script πιο ευανάγνωστο για άλλους ανθρώπους ή για τον εαυτόν σας στο μέλλον. Εναλλακτικά, μπορεί να θέλετε να συμπεριλάβετε μετα-πληροφορίες στο script, όπως πληροφορίες πνευματικών δικαιωμάτων ή πληροφορίες σχετικά με το πότε γράφτηκε το script και γιατί.

Για να καταστεί δυνατή η συμπερίληψη τέτοιων μετα-πληροφοριών, η JavaScript υποστηρίζει comments. Ένας προγραμματιστής μπορεί να συμπεριλάβει ειδικούς χαρακτήρες σε ένα script που υποδηλώνουν ορισμένα μέρη του ως σχόλιο, το οποίο θα παραλειφθεί κατά την εκτέλεση. Το παρακάτω είναι μια πολύ σχολιασμένη έκδοση του script που είδαμε νωρίτερα.

/*
 This script was written by the author of this lesson in May, 2020.
 It has exactly the same effect as the previous script, but includes comments.
*/

// First, we define a message.
var message = "test";

console.log(message); // Then, we output the message to the console.

Τα comments δεν είναι statements και δεν χρειάζεται να τερματίζονται με ερωτηματικό. Αντίθετα, ακολουθούν τους δικούς τους κανόνες τερματισμού, ανάλογα με τον τρόπο που γράφεται το σχόλιο. Υπάρχουν δύο τρόποι για να γράψετε σχόλια σε JavaScript:

Σχόλιο πολλαπλών γραμμών

Χρησιμοποιήστε τα /* και */ για να σηματοδοτήσετε την αρχή και το τέλος ενός σχολίου πολλών γραμμών. Τα πάντα μετά το /* αγνοούνται, μέχρι τη πρώτη εμφάνιση του */. Αυτό το είδος σχολίου χρησιμοποιείται γενικά για να εκτείνεται σε πολλές γραμμές, αλλά μπορεί επίσης να χρησιμοποιηθεί για μεμονωμένες γραμμές ή ακόμη και μέσα σε μια γραμμή, όπως:

console.log(/* what we want to log: */ "hello world")

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

Σχόλιο μονής γραμμής: Χρησιμοποιήστε το // (δύο κάθετες προς τα εμπρός) για να κάνετε comment out μια γραμμή. Όλα μετά τη διπλή κάθετο στην ίδια γραμμή αγνοούνται. Στο παράδειγμα που παρουσιάστηκε νωρίτερα, αυτό το μοτίβο χρησιμοποιείται για πρώτη φορά για να σχολιάσει μια ολόκληρη γραμμή. Μετά το console.log(message); statement, χρησιμοποιείται για να γράψει ένα σχόλιο στην υπόλοιπη γραμμή.

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

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

// We temporarily want to use a different message
// var message = "test";
var message = "something else";

Καθοδηγούμενες Ασκήσεις

Δημιουργήστε μια μεταβλητή που ονομάζεται ColorName και εκχωρήστε σε αυτήν την τιμή RED.

Ποια από τα παρακάτω scripts είναι έγκυρα;

console.log("hello") console.log("world");

console.log("hello"); console.log("world");

// console.log("hello") console.log("world");

console.log("hello"); console.log("world") //;

console.log("hello"); /* console.log("world") */

Ασκήσεις Εξερεύνησης

Πόσα JavaScript statements μπορούν να γραφτούν σε μία και μόνο γραμμή χωρίς να χρησιμοποιηθεί ερωτηματικό;
Δημιουργήστε δύο μεταβλητές με τα ονόματα x και y και μετά εκτυπώστε το άθροισμά τους στην κονσόλα.

Σύνοψη

Σε αυτό το μάθημα μάθαμε διαφορετικούς τρόπους εκτέλεσης JavaScript και πώς να τροποποιήσουμε τη συμπεριφορά φόρτωσης ενός script. Μάθαμε επίσης τις βασικές έννοιες της σύνθεσης και του σχολιασμού ενός script και μάθαμε να χρησιμοποιούμε την εντολή console.log().

HTML κώδικας που χρησιμοποιήθηκε σε αυτό το μάθημα:

<script>: Το tag script μπορεί να χρησιμοποιηθεί για να συμπεριλάβει JavaScript απευθείας ή με το καθορίζοντας ένα αρχείο με το attribute src. Τροποποιήστε τον τρόπο φόρτωσης του script με τα async και defer attributes.

Έννοιες της JavaScript τις οποίες γνωρίσαμε σε αυτό το μάθημα:

;: Το ερωτηματικό χρησιμοποιείται για τον διαχωρισμό των statements. Τα ερωτηματικά μπορούν μερικές φορές — αλλά δεν πρέπει — να παραληφθούν.
//, /*…*/: Ο σχολιασμός μπορεί να χρησιμοποιηθεί για να προσθέσετε σχόλια ή μετα-πληροφορίες σε ένα script αρχείο ή για να αποτρέψετε την εκτέλεση statements.
console.log("text"): Η εντολή console.log() μπορεί να χρησιμοποιηθεί για το να κάνετε output κείμενο, στην κονσόλα του προγράμματος περιήγησης.

Απαντήσεις στις Καθοδηγούμενες Ασκήσεις

Δημιουργήστε μια μεταβλητή που ονομάζεται ColorName και εκχωρήστε σε αυτήν την τιμή RED.
```
var ColorName = "RED";
```

Ποια από τα παρακάτω scripts είναι έγκυρα;

console.log("hello") console.log("world");

Μη έγκυρο: Η πρώτη εντολή console.log() δεν έχει τερματιστεί σωστά και η γραμμή στο σύνολό της δεν σχηματίζει έγκυρο statement.

console.log("hello"); console.log("world");

Έγκυρο: Κάθε statement τερματίζεται σωστά.

// console.log("hello") console.log("world");

Έγκυρο: Ολόκληρος ο κώδικας αγνοείται επειδή είναι σχόλιο.

console.log("hello"); console.log("world") //;

Μη έγκυρο: Στο τελευταίο statement λείπει ένα ερωτηματικό. Το ερωτηματικό στο τέλος αγνοείται επειδή είναι σχόλιο.

console.log("hello"); /* console.log("world") */

Έγκυρο: Ένα έγκυρο statement ακολουθείται από σχολιασμένο κώδικα, ο οποίος αγνοείται.

Απαντήσεις στις Ασκήσεις Εξερεύνησης

Πόσα JavaScript statements μπορούν να γραφτούν σε μία και μόνο γραμμή χωρίς να χρησιμοποιηθεί ερωτηματικό;

Εάν βρισκόμαστε στο τέλος ενός script, μπορούμε να γράψουμε ένα statement και θα τερματιστεί απο το τέλος του αρχείου. Διαφορετικά, δεν μπορείτε να γράψετε ένα statement χωρίς ερωτηματικό με τη σύνταξη που μάθατε μέχρι τώρα.
Δημιουργήστε δύο μεταβλητές με τα ονόματα x και y και μετά εκτυπώστε το άθροισμά τους στην κονσόλα.
```
var x = 5;
var y = 10;
console.log(x+y);
```