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

Ερώτηση: Δημιουργήστε μια απλή ιστοσελίδα (ένα αρχείο HTML) στην οποία, χρησιμοποιώντας JavaScript, θα εμφανίζετε την περιοχή καταγωγής σας (π.χ. «Καλαμάτα»).

Απάντηση:

<!DOCTYPE html>

<html>

<head>

<meta charset='utf-8'>

<title> Καταγωγή</title>

<script type="text/javascript">

document.write ("Καλαμάτα")

</script>

</head>

<body>

</body>

</html>

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

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

  • Δήλωση Δομής Εγγράφου (DOCTYPE)
    • Το <!DOCTYPE html> δηλώνει ότι το αρχείο είναι έγγραφο HTML5.
  • Στοιχεία <html>, <head>, <body>
    • Το <html> είναι η ρίζα του εγγράφου και περικλείει όλο το περιεχόμενο.
    • Στο <head> δηλώνουμε μεταδεδομένα, όπως την κωδικοποίηση χαρακτήρων (<meta charset="utf-8">) και τον τίτλο της σελίδας (<title>).
    • Στο <body> βρίσκεται συνήθως το περιεχόμενο που βλέπει ο χρήστης.
  • Ενσωμάτωση JavaScript με <script>
    • Το <script type="text/javascript"> δηλώνει ότι μέσα στα tags ακολουθεί κώδικας JavaScript.
    • Το document.write("Καλαμάτα") “γράφει” απευθείας κείμενο στο σημείο που βρίσκεται μέσα στο έγγραφο.
  • Εναλλακτική Εμφάνιση Περιεχομένου
    • Σε πιο σύνθετες σελίδες, συχνά προτιμούμε να εκμεταλλευόμαστε το DOM (Document Object Model) για να ενημερώνουμε συγκεκριμένα στοιχεία της σελίδας. Για παράδειγμα, θα μπορούσατε να γράψετε:
html
Copy
<body>
  <h1 id="origin"></h1>
  <script>
    document.getElementById("origin").textContent = "Καλαμάτα";
  </script>
</body>
    • Έτσι το κείμενο θα εμφανίζεται μέσα σε μια ετικέτα <h1> αντί να «χάνεται» μέσα στο έγγραφο.
  • Έλεγχος
    • Ανοίγοντας το αρχείο HTML σε έναν φυλλομετρητή (browser), θα εμφανιστεί το κείμενο “Καλαμάτα” (ή όποια περιοχή εσείς επιλέξετε) στην οθόνη.


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

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

0 Ερωτήματα