Με ποιούς τρόπους μπορεί η γλώσσα JavaScript να εμφανίσει περιεχόμενο στην οθόνη;
Η γλώσσα JavaScript έχει τη δυνατότητα να εμφανίσει αποτελέσματα με τους παρακάτω διαφορετικούς τρόπους:
Έχει τη δυνατότητα να γράψει σε ένα πλαίσιο μηνύματος alert box χρησιμοποιώντας την εντολή window.alert().
Έχει τη δυνατότητα να γράψει στη σελίδα HTML χρησιμοποιώντας την εντολή document.write().
Έχει τη δυνατότητα να γράψει σε ένα στοιχείο της HTML χρησιμοποιώντας την εντολή innerHTML.
Έχει τη δυνατότητα να γράψει στην κονσόλα του φυλομετρητή χρησιμοποιώντας την εντολή console.log().
Στη συνέχεια παρουσιάζουμε αυτούς τους τρόπους.
Χρήση της εντολής window.alert()
Μπορούμε να χρησιμοποιήσουμε ένα πλαίσιο μηνύματος alert box για να παρουσιάσουμε τα δεδομένα:
———————————-
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<script>
window.alert(5 + 6);
</script>
</body>
</html>
———————————-
Το αποτέλεσμα φαίνεται στην παρακάτω εικόνα:
Όπως παρατηρούμε, το αποτέλεσμα δεν εμφανίζεται μέσα στη σελίδα του browser, αλλά σε πλαίσιο μηνύματος.
Χρήση της εντολής document.write()
Μπορούμε να χρησιμοποιήσουμε την εντολή document.write() για να εμφανίσουμε δεδομένα σε μια ιστοσελίδα:
———————————-
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<script>
document.write(5 + 6);
</script>
</body>
</html>
———————————-
Μπορούμε να δουμε το αποτέλεσμα της εκτέλεσης του παραπάνω:
Αυτή η εντολή, η document.write(), χρησιμοποιείται συνήθως όταν θέλουμε να κάνουμε κάποιον έλεγχο στα δεδομένα που εμφανίζει η javascript.
Εάν χρησιμοποιήσουμε την εντολή document.write() όταν το έγγραφο html έχει ολοκληρώσει την εμφάνιση στο φυλλομετρητή, τότε η εντολή document.write() θα σβήσει όλα τα δεδομένα από την οθόνη του φυλλομετρητή.
Αυτό φαίνεται στο παράδειγμα που ακολουθεί:
———————————-
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<button type=”button” onclick=”document.write(5 + 6)”>Try it</button>
</body>
</html>
———————————-
Όπως θα δούμε αν ανοίξουμε το παραπάνω αρχείο σε ένα φυλλομετρητή, τότε πρώτα θα δούμε αυτό το αποτέλεσμα:
Όταν πατήσουμε το button τότε θα σβηστούν όλα τα δεδομένα και το αποτέλεσμα φαίνεται εδώ:
Χρήση της innerHTML
Όταν θέλουμε να προσπελάσουμε ένα συγκεκριμένο στοιχείο html τότε μπορούμε να χρησιμοποιήσουμε την εντολή document.getElementById(id).
Το html χαρακτηριστικό id attribute προσδιορίζει το στοιχείο html. Η ιδιότητα innerHTML καθορίζει το περιεχόμενο του στοιχείου HTML
———————————-
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My First Paragraph</p>
<p id=”demo”></p>
<script>
document.getElementById(“demo”).innerHTML = 5 + 6;
</script>
</body>
</html>
———————————-
Για να παρουσιάσουμε δεδομένα σε μια σελίδα html στις περισσότερες περιπτώσεις η χρήση της innerHTML αποτελεί την ιδανικότερη επιλογή.
Χρήση της console.log()
Μπορούμε να χρησιμοποιήσουμε την console.log() για να παρουσιάσουμε δεδομένα στο φυλλομετρητή όπως φαίνεται στο παράδειγμα που ακολουθεί:
———————————-
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<script>
console.log(5 + 6);
</script>
</body>
</html>
———————————-
Παρουσίαση δεδομένων στην κατασκευή ιστοσελίδων
Όταν κατασκευάζουμε μια ιστοσελίδα τότε η παρουσίαση των δεδομένων δεν είναι απαραίτητο να γίνεται μόνο μέσω της HTML. Η χρήση της javascript για την παρουσίαση δεδομένων στην κατασκευή ιστοσελίδων είναι απαραίτητη στην περίπτωση που θέλουμε δυναμική παρουσίαση δεδομένων. Δυναμική παρουσίαση δεδομένων μπορεί να απαιτηθεί εάν θέλουμε να αλλάζουν τα δεδομένα με κάποιες ενέργειες του χρήστη όπως για παράδεειγμα το πάτημα ενός κουμπιού. Επίσης στην κατασκευή ιστοσλίδων πολύ συνηθισμένη είναι η ανάγκη να παρουσιάζουμε δεδομένα που τα φορτώνουμε παρασκηνιακά, χωρίς να πρέπει να αλλάξει η σελίδα που έχει ήδη φορτωθεί.
Παρουσίαση δεδομένων στην προώθηση ιστοσελίδων
Πρέπει όμως να προσέξουμε ώστε η παρουσίαση των δεδομένων μέσω της javascript να μην επηρεάσει αρνητικά την προώθηση της ιστοσελίδας. Ένας γενικός κανόνας στην προώθηση ιστοσελίδων είναι οτι δεν πρέπει να δίνουμε άλλο περιεχόμενο στο χρήστη και άλλο στις μηχανές αναζήτησης. Πολλοί μπορεί να μπουν στον πειρασμό να αλλάξουν τα δεδομένα που βλέπει ο χρήστης ή η μηχανή αναζήτησης νομίζοντας οτι έτσι θα βοηθήσουν τη σελίδα τους να ανέβει ψηλότερα. Όμως καλό είναι να μη μπαίνουμε σε αυτή τη διαδικασία διότι πλέον το google δεν αστειεύεται και είναι πιθανό να επιβάλει ποινή. Δηλαδή να έχει αρνητικό αντίκτυπο στην προώθηση της ιστοσελίδας. Για να αποφύγουμε τέτοιους κινδύνους είναι καλό να αναθέτουμε την προώθηση της ιστοσελίδας μας σε μια εταιρεία με μεγάλη εμπειρία στο θέμα. Κορυφαία εταιρεία στην προώθηση ιστοσελίδων είναι η dreamweaver.gr.
