Javascript - Διαμόρφωση συμπεριφοράς στοιχείων HTML

Javascript – Διαμόρφωση συμπεριφοράς στοιχείων HTML

Για τη διαμόρφωση συμπεριφοράς στοιχείων HTML πρέπει να χρησιμοποιήσουμε τη Javascript. Η Javascript είναι μια γλώσσα προγραμματισμού που χρησιμοποιείται για να αλλάζουμε δυναμικά το περιεχόμενο μιας ιστοσελίδας. Επίσης χρησιμοποιείται για να αξιοποιήσουμε δεδομένα που καταχωρεί ο χρήστης.

Στη Javascript χρησιμοποιούμε κυρίως συναρτήσεις (functions) και γεγονότα (events).

Μπορούμε να προσθέσουμε Javascript στο αρχείο της HTML με τους εξής τρόπους:

Εσωτερικό-Internal στο <head>
Εσωτερικό-Internal στο <body>
Εξωτερικό-External

Εσωτερικό – Internal στο <head>

Ο πρώτος τρόπος είναι να να γράψουμε τον κώδικα της Javascript στο head της HTML, τοποθετώντας τον κώδικα μας ανάμεσα στις ετικέτες της HTML <script> και </script>.

Παράδειγμα

<!DOCTYPE html>
<html>
  <head>
    <script>
      function myFunction() {
        document.getElementById("demo").innerHTML = "Η Παράγραφος άλλαξε.";
      }
    </script>
  </head>
  <body>
    <h1>Η Ιστοσελίδα μου</h1>
    <p id="demo">Αυτή είναι μία Παράγραφος.</p>
    <button type="button" onclick="myFunction()">Πάτησε το</button>
  </body>
</html>

Εσωτερικό – Internal στο <body>

Ο δεύτερος τρόπος είναι να να γράψουμε τον κώδικα της Javascript στο body της HTML, τοποθετώντας και πάλι τον κώδικα μας ανάμεσα στις ετικέτες της HTML <script> και </script>.

Παράδειγμα

<!DOCTYPE html>
<html>
  <body> 
    <h1>Η Ιστοσελίδα μου</h1>
    <p id="demo">Αυτή είναι μία Παράγραφος.</p>
    <button type="button" onclick="myFunction()">Πάτησε το</button>
    <script>
      function myFunction() {
        document.getElementById("demo").innerHTML = "Η Παράγραφος άλλαξε.";
      }
    </script>
  </body>
</html>

Στους δύο πρώτους τρόπους που είδαμε, ο ένας δεν αποκλείει τον άλλον. Δηλαδή μπορούμε να έχουμε scripts της Javascript και στο head και στο body.

Εξωτερικό – External

Ο τρίτος τρόπος είναι να να χρησιμοποιήσουμε ένα εξωτερικό αρχείο Javascript. Για να συνδέσουμε το αρχείο της Javascript με αυτό της HTML τοποθετούμε το path (μονοπάτι) για το φάκελο στον οποίο βρίσκεται το αρχείο της Javascript, ανάμεσα στις ετικέτες <script> και </script>. Αυτό μπορεί να τοποθετηθεί ή στο head ή στο body. Ένα αρχείο Javascript έχει την επέκταση αρχείου .js.

Παράδειγμα στο head

<!DOCTYPE html>
<html>
  <head> 
    <script src="myScript.js"></script>
  </head>
  <body>
  </body>
</html>

Παράδειγμα στο body

<!DOCTYPE html>
<html>
  <head> 
  </head>
  <body> 
    <script src="myScript.js"></script>
  </body>
</html>

Παράδειγμα αρχείου Javascript

function myFunction() { 
  document.getElementById("demo").innerHTML = "Η Παράγραφος άλλαξε.";
}

Javascript – Διαμόρφωση συμπεριφοράς στοιχείων HTML