Έξοδοι αποτελεσμάτων

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

Alert

Τo alert είναι μια εντολή με την οποία μπορούμε να παρουσιάσουμε αναδυόμενα παράθυρα στον χρήστη με μόνο περιεχόμενο απλό κείμενο. Η δομή του είναι απλή, ένα απλό αναδυόμενο παράθυρο με ένα κουμπί ΟΚ στο κέντρο, το οποίο μόλις ο χρήστης το πιέσει το αναδυόμενο παράθυρο κλείνει. Η εκτέλεση της εντολής αυτής είναι σύγχρονη, όταν δηλαδή το script μας φτάσει σε αυτήν, περιμένει το «οκ» του χρήστη προκειμένου να συνεχίσει την εκτέλεση του υπόλοιπου script.

alert("Αυτό είναι ένα μήνυμα");

Όπου «Αυτό είναι ένα μήνυμα» εισάγουμε το μήνυμα μας. Επίσης η alert μπορεί να δεχθεί και μεταβλητές μαζί με αλφαριθμητικά κείμενα για να εμφανίσει σε αναδυόμενα παράθυρα πχ:

var num = 10; 
alert("Αυτό είναι ένα μήνυμα με αριθμό: "+num);

Οι παραπάνω δυο εντολές θα μας εμφανίσουν στο αναδυόμενο παράθυρο το παρακάτω αποτέλεσμα:

Το πρώτο alert:

Το δεύτερο:

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

Prompt

Το prompt είναι μια εντολή αναδυόμενου παραθύρου, λίγο πιο διαφορετική από το alert. Το prompt δεν εμφανίζει απλά ένα μήνυμα αλφαριθμητικού κειμένου, αλλά ταυτόχρονα μαζί με αυτό εμφανίζει επίσης ένα πεδίο κειμένου έτσι ώστε να μπορέσει ο χρήστης να εισάγει μία τιμή μέσα σε αυτό. Eπίσης διαθέτει δυο κουμπιά διαχείρισης, ένα «ΟΚ» και ένα «Ακύρωση». Η τιμή που θα εισαχθεί μέσα στο πεδίο κειμένου αντιστοιχείται αυτόματα σε μια μεταβλητή που ορίζουμε εμείς μέσα στον κώδικα. Παρόμοια με την alert έτσι και η prompt είναι μια σύγχρονη μορφή εμφάνισης αναδυόμενου παραθύρου όπου, όταν φτάνει η εκτέλεση του script σε αυτή την εντολή τότε ο φυλλομετρητής περιμένει μέχρι ο χρήστης να πιέσει ένα από τα δυο διαθέσιμα κουμπιά για να προχωρήσει παρακάτω. Αν ο χρήστης πιέσει το «ΟΚ», η τιμή που έχει γραφτεί μέσα στο πεδίο κειμένου αμέσως αναθέτεται ως τιμή στην αντίστοιχη μεταβλητή που έχουμε ορίσει. Αν ο χρήστης πιέσει το «Ακύρωση» τότε η μεταβλητή παίρνει την τιμή «null» και το πρόγραμμα προχωράει παρακάτω. Η εντολή αυτή παίρνει δυο ορίσματα ως είσοδο για την εκτέλεση της, το πρώτο είναι το κείμενο-μήνυμα που θα εμφανίζεται ως ετικέτα για το πεδίο κειμένου, και το δεύτερο είναι μια προεπιλεγμένη τιμή μέσα στο πεδίο κειμένου:

var num = prompt("Εισάγετε έναν αριθμό:",45);

Αυτό θα μας δώσει το παρακάτω αποτέλεσμα:

Παρόμοια με την alert έτσι κι εδώ μέσα στις παραμέτρους της εντολής μπορούμε να χρησιμοποιήσουμε μεταβλητές πχ: 

var min = 30;
var max = 70;
var num = prompt("Εισάγετε έναν αριθμό, μεταξύ "+min+" και "+max+":",45);

Αποτέλεσμα:

Console

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

Στον firefox: 

Αν ακολουθήσουμε σωστά την διαδικασίαα θα μας εμφανίσει το εξής παράθυρο: 

Σε αυτό το παράθυρο είναι το σημείο στο οποίο θα βλέπουμε τα αποτελέσματα των εντολών μας. Κάτω αριστερά υπάρχει ένα διπλό γαλάζιο εισαγωγικό βελάκι στο οποίο εάν θέλουμε μπορούμε να γράψουμε μια εντολή javascript και πατώντας enter να την εκτελέσουμε άμεσα εκείνη την στιγμή:

console.log(μήνυμα)

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

Συμπεριλαμβάνοντας απλά τις μεταβλητές με τον τελεστή «+» στα αλφαριθμητικά πχ: 

var num=10;
console.log("Το αποτέλεσμα ειναι: "+num);

Το οποίο μας δίνει ως αποτέλεσμα: 

Με την χρήση ειδικών χαρακτήρων: 

var num=10;
console.log("Το αποτέλεσμα ειναι: %i",num);

Αποτέλεσμα:

Το «%i» σημαίνει πως στο σημείο στο οποίο βρίσκεται μέσα στο μήνυμα θα τυπωθεί το περιεχόμενο της μεταβλητής num. Αν είχαμε περισσότερα «%i» τότε θα τυπώνονταν οι μεταβλητές με την σειρά στην οποία τα «%i» βρίσκονταν μέσα στο μήνυμα.

console.debug(μήνυμα)

Παρόμοια ακριβώς με την console.log τυπώνει ένα μήνυμα το οποίο υπάρχει πλαισιωμένο στις παρενθέσεις της εντολής. Η διαφορά με το console.log είναι ότι περιλαμβάνεται στην τύπωση του αποτελέσματος και hyperlink με το σημείο ακριβώς στον κώδικα από όπου καλέστηκε η εντολή.

var num=10;
console.debug("Το αποτέλεσμα ειναι: "+num);

Αποτέλεσμα:

console.info(μήνυμα)

Παρόμοια με την console.log και την console.debug μόνο που υπάρχει διαφορετικό είδος μορφοποίησης και εκτός αυτού θεωρείται το μήνυμα ως πληροφορία της εκτέλεσης του script. Διαθέτει κι αυτό hyperlink.

var num=30;
console.warn("Το ποσό καταχωρήθηκε: "+num);

Αποτέλεσμα:

console.warn(μήνυμα)

Παρόμοια με την console.info, διαθέτει όμως διαφορετική μορφοποίηση και διαφορετική κατηγοριοποίηση. Κατηγοριοποιείται στις προειδοποιήσεις.

var num=30;
console.warn("Το ποσό καταχωρήθηκε: "+num);

Αποτέλεσμα:

console.error(μήνυμα)

Παρόμοια με την console.warn, διαθέτει όμως διαφορετική μορφοποίηση και κατηγοριοποιείται στις ειδοποιήσεις σφαλμάτων.

var num=60;
console.error("Σφάλμα! Ο αριθμός δεν ειναι σωστός: "+num);

Αποτέλεσμα:

console.assert(έλεγχος, μήνυμα, αντικείμενα)

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

var num=70;
console.assert(num==100,"Το num δεν ειναι 100!",num);

Αποτέλεσμα:

console.clear()

Εντολή μέσω τις οποίας «καθαρίζεται» η κονσόλα, διαγράφεται δηλαδή ότι έχει γραφτεί σε αυτήν. Δοκιμάσαμε το «console.clear()» σε firefox αλλά δεν λειτούργησε, αντ’ αυτού λειτούργησε το «clear();».

clear();

Αποτέλεσμα:

console.dir(αντικείμενο), console.dirxml(αντικείμενο)

Παρέχεται η τύπωση ιδιοτήτων ενός αντικειμένου το οποίο έχουμε εισάγει μέσα στις παρενθέσεις. Το document.documentElement αναφέρεται στην ίδια την ιστοσελίδα ως αντικείμενο. Διαλέξαμε για την δοκιμή μας το site της google και εκτελέσαμε την εντολή μας μέσα από την κονσόλα:

console.dir(document.documentElement);

Αποτέλεσμα:

console.group(όνομα)

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

console.group("group1");
console.log("Αποτέλεσμα 1");
console.log("Αποτέλεσμα 2");
console.log("Αποτέλεσμα 3");
console.groupEnd();

Αποτέλεσμα:

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

console.groupCollapsed(όνομα)

Παρόμοια χρησιμοποιείται και η console.groupCollapsed μόνο που τα αποτελέσματα δεν φαίνονται άμεσα στο χρήστη αλλά είναι εκκολαπτόμενα κάνοντας κλικ πάνω στον τίτλο που θα εισάγουμε ως όρισμα στο groupCollapsed.

console.groupCollapsed("Ομαδοποιημένα 2");
console.log("Αποτέλεσμα 100");
console.log("Αποτέλεσμα 2000");
console.log("Αποτέλεσμα 30000");
console.groupEnd();

Στον firefox δεν λειτούργησε όπως θα περιμέναμε, ωστόσο μια δοκιμή στον Google Chrome μας έπεισε για την λειτουργικότητα του: 

console.time, console.timeEnd

Μία χρήσιμη ακόμη εντολή εξαγωγής αποτελεσμάτων είναι και η time μέσω της οποίας μπορούμε να χρονομετρήσουμε τον χρόνο εκτέλεσης κάποιων γραμμών κώδικα καθώς αυτοί θα εκτελούνται. Η console.time() παίρνει ένα όρισμα μέσα στις παρενθέσεις της όπου είναι το όνομα του μετρητή, αυτό το όνομα θα το χρησιμοποιήσουμε αργότερα όταν θέλουμε να σταματήσουμε τον μετρητή με το console.timeEnd(). Μπορούμε να έχουμε πολλούς ταυτόχρονους χρονομετρητές στο ίδιο πρόγραμμα και να τους ξεκινάμε και να τους σταματάμε με την αντίστοιχη ετικέτα τους. Όταν ένας χρονομετρητής τελειώσει εμφανίζει την ετικέτα του και τον χρόνο εκτέλεσης σε miliseconds. Πχ: 

console.time("Χρόνος εκτέλεσης");
console.log("Δοκιμαστικό μήνυμα");
console.timeEnd("Χρόνος εκτέλεσης");

Αποτέλεσμα:

console.profile(), console.profileEnd()

Το profile είναι μια εντολή μέσω της οποίας μπορούμε να αντλήσουμε δεδομένα σχετικά με το τι συνέβη κατά την διάρκεια που το είχαμε ενεργό. Χρησιμοποιούμε το console.profile στο σημείο που θέλουμε να ξεκινήσει η διαδικασία καταγραφής και το console.profileEnd στο σημείο που θέλουμε να τελειώσει. Ανάμεσα σε αυτά τα δυο θα πρέπει να υπάρχει εκτελέσιμος κώδικας. Μόλις φθάσει στο profileEnd τα αποτελέσματα θα εμφανιστούν στην καρτέλα «profiler» της κονσόλας:

console.profile();
alert("Μήνυμα");
console.profileEnd();

Αποτέλεσμα:

console.count

Η εντολή αυτή μας προσφέρει την δυνατότητα να μετράει όλες τις φορές που εμείς θα την καλέσουμε, είναι κάτι σαν ελεγχόμενος μετρητής μέσα στον κώδικα. Παρόμοια με άλλες εντολές της κονσόλας είναι δυνατό να δημιουργήσουμε μετρητές με αντίστοιχες ετικέτες:

console.count("Μετρητής 1");
console.count("Μετρητής 2");
console.count("Μετρητής 2");

Αποτέλεσμα:

console.table

Μας παρέχει την δυνατότητα να προβάλουμε αποτελέσματα σε μορφή πίνακα. Η διαδικασία είναι πολύπλοκη. Δεν λειτουργεί σε firefox γι αυτό παρακάτω το αποτέλεσμα είναι σε Google Chrome. Για να λειτουργήσει το console.table θα πρέπει να του εισάγουμε μια παράμετρο η οποία να έχει την μορφή αντικειμένου, ένα εύκολο και απλό παράδειγμα είναι το παρακάτω:

function Person(firstName, lastName, age){ //αντικείμενο Person
 this.firstName = firstName; //ιδιότητα firstName
 this.lastName = lastName; //ιδιότητα lastName
 this.age = age; //ιδιότητα age
} 
var family = {}; //οικογένεια
 family.mother = new Person("Ειρήνη", "Νικολακοπούλου", 32); //μητέρα
 family.father = new Person("Ιωάννης", "Νικολακόπουλος", 33); //πατέρας
 family.daughter = new Person("Μαρία", "Νικολακοπούλου", 5); //κόρη
 family.son = new Person("Κωνσταντίνος", "Νικολακόπουλος", 8); //γιος
console.table(family);

Αποτέλεσμα:

Document.write

Η μέθοδος αυτή είναι μια ξεχωριστή λειτουργία σε σχέση με όλες όσες είδαμε. Η alert είναι άμεση και σύγχρονη μέθοδος εξαγωγής αποτελεσμάτων, ενώ η console.log είναι έμμεση , ασύγχρονη η οποία δεν προορίζεται για τον χρήστη. Καμία από τις παραπάνω όμως δεν επιδρά στο περιεχόμενο μιας ιστοσελίδας. Αυτό ακριβώς επιτυγχάνει η Document.write η οποία είναι μια μέθοδος εξαγωγής αποτελεσμάτων , άμεση, ασύγχρονη, μεταβάλλοντας το περιεχόμενο της τρέχουσας ιστοσελίδας.

Η document.write πρωτοεισάχθηκε στον browser Netscape 2 πριν ακόμη καλά καλά επινοηθεί το DOM, και ήταν ο μοναδικός τρόπος για να εξάγει κάποιος αποτελέσματα σε μια ιστοσελίδα από εκτέλεση javascript. Τώρα πλέον δεν χρησιμοποιείται καθώς έχει αντικατασταθεί από άλλες εντολές. Η λειτουργία της είναι να «γράφει» στο έγγραφο html ότι εισάγουμε μέσα της ως παράμετρο. Αν δεν χρησιμοποιήσουμε σωστά την εντολή αυτή είναι πιθανό να διαγραφούν τμήματα της ιστοσελίδας που χρησιμοποιούμε εκείνη την στιγμή.

Αν η write χρησιμοποιηθεί μέσα σε κώδικα javascript καθώς η σελίδα αυτή φορτώνεται τότε το κάθε σημείο στο οποίο βρίσκεται η write θα τυπωθεί και το αντίστοιχο μήνυμα που έχουμε ορίσει. Αν προσπαθήσουμε αφότου φορτωθεί η σελίδα να γράψουμε κάτι μέσα σε αυτήν με το document.write τότε το πιο πιθανό είναι να διαγραφεί όλο το περιεχόμενο της σελίδας και ύστερα να εισαχθεί το νέο που έχουμε εισάγει ως παράμετρο στην document.write. Πολλοί browsers πλέον δεν επιτρέπουν αυτού του είδους αλληλεπίδραση εντολών javascript με τις ιστοσελίδες. Η write λοιπόν λειτουργεί ΜΟΝΟΝ κατά την διάρκεια φόρτωσης (διερμηνείας) της ιστοσελίδας και όχι μετά.

Συντάσσεται γράφοντας «document.write», και αμέσως μετά μέσα σε παρενθέσεις ένα αλφαριθμητικό που θέλουμε να «γράψουμε» πχ «document.write("ΚΑΛΗΜΕΡΑ");». Αυτό το τοποθετούμε μέσα στον κώδικα μας στο σημείο ακριβώς που θέλουμε να εμφανιστεί, κλεισμένο σε «script» tags. Πχ:

Αρχείο: document.write.html

<!DOCTYPE HTML>
<html>
 <head>
  <title>Δοκιμή της write</title>
  <meta charset='utf-8'/>
  <script>
   var a = 3;
  </script>
 </head>
 <body>
  <h1><script>document.write("Τίτλος "+(a+1));</script></h1>
  <h1><script>document.write("Τίτλος "+(a+2));</script></h1>
  <h1><script>document.write("Τίτλος "+(a+3));</script></h1>
 </body>
</html>

Αποτέλεσμα:

Εάν θέλετε να τυπώσετε αποτελέσματα μέσα στην ιστοσελίδα επηρεάζοντας μόνο συγκεκριμένα μέρη της, τότε δοκιμάστε μια από τις μεθόδους, που περιγράφονται στην ενότητα 2.2. Αν πάλι απλά θέλετε να φορτώνεται το αποτέλεσμα μαζί με την σελίδα τότε η document.write είναι η κατάλληλη επιλογή. 

Ωστόσο υπάρχει μια έξυπνη χρήση της document.write έτσι ώστε να εξυπηρετήσει με κάποιον τρόπο τα σύγχρονα δεδομένα. Μπορεί να χρησιμοποιηθεί έτσι ώστε να δημιουργηθεί μια εξολοκλήρου νέα σελίδα για προβολή σε αναδυόμενο παράθυρο. Ακολουθείτε μια πιο περίπλοκη διαδικασία αλλά αξίζει τον κόπο να την δούμε:

Αρχείο: write.popup.html

<!DOCTYPE HTML>
<html>
 <head>
  <title>Δοκιμή της write σε popup</title>
  <meta charset='utf-8'/>
  <script>
   function msg(){
    var name = document.getElementsByName("fname")[0].value;
    var site="<html><head><meta charset='utf-8'/></head><body><h1>Γειά σου "+name+"</h1></body></html>";
    var popupWindow = window.open("","","menubar=0,scrollbars=0");
    popupWindow.document.write(site);
    popupWindow.document.close();
   }
  </script>
 </head>
 <body>
 Συμπλήρωσε το όνομα σου: <input type='text' name='fname' id='fname'/> και 
 <input type='button' value='κάνε κλίκ' onclick='msg();'/>
 </body>
</html>

Αποτέλεσμα:

Για να μπορέσουμε να χρησιμοποιήσουμε αυτή την δυνατότητα θα πρέπει να συμπεριλάβουμε στον κώδικα μας την εντολή «window.open» και την εντολή «document.close()».

Η window.open ανοίγει ένα νέο παράθυρο το οποίο είναι διαχειρίσιμο αν το αποθηκεύσουμε προσωρινά σε κάποια μεταβλητή στην συγκεκριμένη περίπτωση χρησιμοποιούμε την «popupWindow», ύστερα με την «document.write» γράφουμε μέσα σε αυτό, και κλείνουμε το έγγραφο δηλαδή ότι τελειώσαμε το γράψιμο με την εντολή «document.close()». Η εντολή «document.getElementsByName» είναι μια εντολή επιλογής αντικειμένων html και επεξηγείται αναλυτικά στην ενότητα επιλογής αντικειμένων.