04. Έξοδος (output) της JavaScript

JS Output


Δυνατότητες εξόδου της JavaScript

Η JavaScript μπορεί να “εμφανίσει” τα δεδομένα με διάφορους τρόπους:

  • Γράφοντας σε ένα στοιχείο HTML, χρησιμοποιώντας innerHTML.
  • Γράφοντας στην έξοδο HTML χρησιμοποιώντας document.write().
  • Γράφοντας σε ένα κουτί ειδοποίησης, χρησιμοποιώντας window.alert().
  • Γράφοντας στην κονσόλα του προγράμματος περιήγησης, χρησιμοποιώντας το console.log().

Χρησιμοποιώντας το innerHTML

Για να αποκτήσετε πρόσβαση σε ένα στοιχείο HTML, η JavaScript μπορεί να χρησιμοποιήσει τη μέθοδο document.getElementById(id).

Το χαρακτηριστικό id καθορίζει το στοιχείο HTML. Η ιδιότητα  innerHTML ορίζει το περιεχόμενο HTML:

Παράδειγμα

<!DOCTYPE html>
<html>
<body>

<h1>Η πρώτη μου Ιστοσελίδα</h1>
<p>Η πρώτη μου παράγραφος</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = 5 + 6;
</script>

</body>
</html>

Δοκιμάστε το »

Η αλλαγή της ιδιότητας innerHTML ενός στοιχείου HTML είναι ένας κοινός τρόπος προβολής δεδομένων σε HTML.


Χρησιμοποιώντας document.write()

Για λόγους δοκιμών, είναι εύχρηστο το document.write():

Παράδειγμα

<!DOCTYPE html>
<html>
<body>

<h1>Η πρώτη μου Ιστοσελίδα</h1>
<p>Η πρώτη μου παράγραφος</p>

<script>
document.write(5 + 6);
</script>

</body>
</html>

Δοκιμάστε το »

Χρησιμοποιώντας το document.write() μετά την φόρτωση ενός εγγράφου HTML, θα διαγραφούν όλα τα υπάρχοντα HTML :

Παράδειγμα

<!DOCTYPE html>
<html>
<body>

<h1>Η πρώτη μου Ιστοσελίδα</h1>
<p>Η πρώτη μου παράγραφος</p>

<button type="button" onclick="document.write(5 + 6)">Try it</button>

</body>
</html>

Δοκιμάστε το »

Η μέθοδος document.write() θα πρέπει να χρησιμοποιείται μόνο για έλεγχο.


Χρησιμοποιώντας window.alert()

Μπορείτε να χρησιμοποιείτε ένα πλαίσιο ειδοποίησης (alert box) για την εμφάνιση δεδομένων:

Παράδειγμα

<!DOCTYPE html>
<html>
<body>

<h1>Η πρώτη μου Ιστοσελίδα</h1>
<p>Η πρώτη μου παράγραφος</p>

<script>
window.alert(5 + 6);
</script>

</body>
</html>

Δοκιμάστε το »


Χρησιμοποιώντας το console.log()

Για σκοπούς εντοπισμού σφαλμάτων, μπορείτε να χρησιμοποιήσετε τη μέθοδο console.log() για την εμφάνιση δεδομένων.

Θα μάθετε περισσότερα σχετικά με τα σφάλματα σε ένα επόμενο κεφάλαιο.

Παράδειγμα

<!DOCTYPE html>
<html>
<body>

<script>
console.log(5 + 6);
</script>

</body>
</html>

Δοκιμάστε το »


Days
Hours
Minutes

04. Έξοδος (output) της JavaScript

Κοινοποίηση

Share on facebook
Share on twitter

Ακολουθήστε μας

Αρέσει σε %d bloggers: