8. Ερώτηση Πρακτικής Άσκησης με Απάντηση Βήμα-Βήμα

Ερώτηση: Δημιουργήστε μια απλή ιστοσελίδα (ένα αρχείο HTML), στην οποία θα γράψετε έναν σύντομο κώδικα JavaScript.

  • Ο κώδικας θα πρέπει να εμφανίζει στην οθόνη του χρήστη (μέσα στον browser) το μήνυμα:“Face to Face”

Απάντηση:

<!DOCTYPE html>

<html>

<head>

<meta charset='utf-8'>

<title> Πρότυπο HTML</title>

<script type="text/javascript">

        document.write("Face to Face ");

</script>

</head>

<body>           

</body>

</html>

Προτεινόμενη Λύση ( Απάντηση ) στον code editor:

Αναλυτική Επεξήγηση

  • Δήλωση του Τύπου Εγγράφου (DOCTYPE)
    • Το <!DOCTYPE html> υποδηλώνει ότι χρησιμοποιούμε την HTML5, την πιο σύγχρονη έκδοση της HTML.
  • Βασική Δομή του Αρχείου HTML
    • Το στοιχείο <html> περικλείει ολόκληρο το έγγραφο.
    • Στο <head> προσθέτουμε πληροφορίες όπως η κωδικοποίηση των χαρακτήρων (<meta charset="utf-8">) και ο τίτλος της σελίδας (<title>).
    • Στο <body> τοποθετείται συνήθως το κυρίως περιεχόμενο που βλέπει ο χρήστης.
  • Ενσωμάτωση JavaScript με το <script>
    • Η ετικέτα <script type="text/javascript"> δηλώνει ότι το κείμενο που περιέχει είναι κώδικας JavaScript.
    • Το document.write("Face to Face"); γράφει απευθείας στο έγγραφο το κείμενο “Face to Face”.
  • Τι Είναι το document.write();
    • Η μέθοδος document.write() δέχεται ένα string και το “καταγράφει” (write) μέσα στο HTML έγγραφο.
    • Συνήθως, εάν την καλέσουμε ενώ το έγγραφο φορτώνεται, προσθέτει το κείμενο στο σημείο που βρίσκεται η εντολή.
  • Σημείωση για την Πρακτική Χρήση του document.write()
    • Αν και είναι μια απλή και γρήγορη μέθοδος για την εμφάνιση κειμένου, η χρήση του document.write() σε σύγχρονες εφαρμογές θεωρείται λιγότερο δημοφιλής, επειδή μπορεί να προκαλέσει προβλήματα (όπως η διακοπή της φόρτωσης της σελίδας εάν καλείται μετά το φόρτωμα του DOM).
  • Εναλλακτικά, μπορούμε να τροποποιήσουμε απευθείας στοιχεία του DOM, π.χ. με element.textContent ή innerHTML.

Για παράδειγμα:

html
Copy
<body>
  <div id="myDiv"></div>

  <script>
    document.getElementById("myDiv").textContent = "Face to Face";
  </script>
</body>

Ωστόσο, για τον σκοπό της συγκεκριμένης άσκησης, η χρήση του document.write() είναι αρκετή και λειτουργεί όπως απαιτείται.

Video Απάντηση: Δείτε την παρακάτω video απάντηση για την ερώτηση.

Επόμενο μάθημα / άσκηση  
Question Box: Απαντήσεις στα ερωτήματά σας.

0 Ερωτήματα