jsOutput.html

<!-- 
  [Author] Gotsinas Antonios

  [Βασικό Παράδειγμα προγράμματος σε javascript]

  [Description] 

    Σε αυτό το παράδειγμα χρησιμοποιούμε HTML και CSS για να διαμορφώσουμε μία virtual οθόνη
    μέσα σε μία σελίδα html στην οποία θα εμφανίζουμε τα αποτελέσματα της εκτέλεσης ενός προγράμματος
    javascript. Το πρόγραμμα javascript εμφανίζει απλά ένα μήνυμα στην οθόνη που υλοποιήσαμε. Το ίδιο
    μήνυμα εμφανίζεται και στον Console του περιηγητή. Για να δούμε το Console στον περιηγητή πατάμε 
    δεξί κλικ μέσα στο παράθυρο του περιηγητή και επιλέγουμε Inspect από το αναδυόμενο μενού που εμφανίζεται.
    Έπειτα επιλέγουμε την ετικέτα console για να δούμε τα μηνύματα εκεί.
   
-->
<!DOCTYPE html>
<html>
    <head>
        <title>Javascript SSOC</title>
    </head>
<body>

 <!-- Δημιουργώ μία δική μου οθόνη με κώδικα html και την μορφοποιώ με css
         έτσι ώστε να εμφανίζω τα αποτελέσματα των παραδειγμάτων μου σε αυτήν.-->
<h2>Οθόνη αποτελεσμάτων JavaScript</h2>
<div style = "border: 2px solid black; width: 500px; height: 500px; padding: 10px;">
<!--Σε αυτή την οθόνη χρησιμοποιώ ένα στοιχείο παραγράφου και του δίνω id = othoni  για να 
    εμφανίζω σε αυτό το id το αποτέλεσμα της εκτέλεσης του προγράμματος javascript-->
<p id = "othoni"></p>
</div>

<!-- Πρόγραμμα javascript που εμφανίζει στην οθόνη που φτιάξαμε ένα απλό μήνυμα καλωσορίσματος,
     ενώ εμφανίζει το ίδιο μήνυμα και στο Console του περιηγητή που χρησιμοποιούμε-->
<script>
    // εμφάνισε το μήνυμα στην οθόνη που φτιάξαμε
    document.getElementById("othoni").innerHTML = "Hello World Αυτό είναι το πρώτο μου πρόγραμμα σε JavaScript, πατήστε, inspect στον φυλλομετρητή και μεταβείτε στην ετικέτα Console για να δείτε το ίδιο μήνυμα και εκεί";
    // εμφάνισε το μήνυμα στο Console του περιηγητή
    console.log("Hello World Αυτό είναι το πρώτο μου πρόγραμμα σε JavaScript!");
</script>

</body>
</html> 