JavaScript Πού να

Πίνακας περιεχομένων

Η ετικέτα <script>

Σε HTML, ο κώδικας JavaScript εισάγεται μεταξύ των ετικετών <script> και </script>.

Παράδειγμα

<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript in Body</h2>

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

<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>

</body>
</html>

Τα παλιά παραδείγματα JavaScript ενδέχεται να χρησιμοποιούν ένα χαρακτηριστικό τύπου: <script; type="text/javascript">.
Το χαρακτηριστικό type δεν απαιτείται. Η JavaScript είναι η προεπιλεγμένη γλώσσα σεναρίου σε HTML.

Λειτουργίες JavaScript και συμβάντα

Μια συνάρτηση JavaScript είναι ένα μπλοκ κώδικα JavaScript, που μπορεί να εκτελεστεί όταν "κληθεί".

Για παράδειγμα, μια συνάρτηση μπορεί να κληθεί όταν συμβαίνει ένα συμβάν, όπως όταν ο χρήστης κάνει κλικ σε ένα κουμπί.

Θα μάθετε πολύ περισσότερα για τις λειτουργίες και τα συμβάντα σε επόμενα κεφάλαια.

JavaScript σε <head> ή <body>

Μπορείτε να τοποθετήσετε οποιοδήποτε αριθμό σεναρίων σε ένα έγγραφο HTML.

Τα σενάρια μπορούν να τοποθετηθούν στην ενότητα <body> ή στην ενότητα <head> μιας σελίδας HTML, ή και στα δύο.

JavaScript στο <head>

Σε αυτό το παράδειγμα, μια JavaScript συνάρτηση τοποθετείται στην ενότητα <head> μιας σελίδας HTML.

Η λειτουργία καλείται (καλείται) όταν πατηθεί ένα κουμπί:

Παράδειγμα

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</head>
<body>
<h2>Demo JavaScript in Head</h2>

<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try 
it</button>
</body>
</html>

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</head>
<body>

<h2>Demo JavaScript in Head</h2>

<p id="demo">A Paragraph.</p>

<button type="button" onclick="myFunction()">Try it</button>

</body>
</html>

JavaScript στο <body>

Σε αυτό το παράδειγμα, μια συνάρτηση JavaScript τοποθετείται στην ενότητα <body> μιας σελίδας HTML.

Η λειτουργία καλείται (καλείται) όταν πατηθεί ένα κουμπί:

Παράδειγμα

<!DOCTYPE html>
<html>
<body>

<h2>Demo JavaScript in Body</h2>

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

  <button type="button" onclick="myFunction()">Try 
it</button>
 
<script>
function myFunction() {
    document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
 
</body>
</html>

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<body>

<h2>Demo JavaScript in Body</h2>

<p id="demo">A Paragraph.</p>

<button type="button" onclick="myFunction()">Try it</button>

<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>

</body>
</html>

Η τοποθέτηση σεναρίων στο κάτω μέρος του στοιχείου <body> βελτιώνει την εμφάνιση ταχύτητα, επειδή η ερμηνεία σεναρίου επιβραδύνει την εμφάνιση.

Εξωτερική JavaScript

Τα σενάρια μπορούν επίσης να τοποθετηθούν σε εξωτερικά αρχεία:

Εξωτερικό αρχείο: myScript.js

function myFunction() {
  document.getElementById("demo").innerHTML = "Paragraph changed.";
}

Τα εξωτερικά σενάρια είναι πρακτικά όταν ο ίδιος κώδικας χρησιμοποιείται σε πολλές διαφορετικές ιστοσελίδες.

Τα αρχεία JavaScript έχουν την επέκταση αρχείου .js.

Για να χρησιμοποιήσετε ένα εξωτερικό σενάριο, βάλτε το όνομα του αρχείου σεναρίου στο χαρακτηριστικό src (source) του μια ετικέτα <script>:

Παράδειγμα

<script src="myScript.js"></script>

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<body>

<h2>Demo External JavaScript</h2>

<p id="demo">A Paragraph.</p>

<button type="button" onclick="myFunction()">Try it</button>

<p>This example links to "myScript.js".</p>
<p>(myFunction is stored in "myScript.js")</p>

<script src="myScript.js"></script>

</body>
</html>

Μπορείτε να τοποθετήσετε μια εξωτερική αναφορά σεναρίου στο <head> ή στο <body> όπως θέλετε.

Το σενάριο θα συμπεριφέρεται σαν να βρισκόταν ακριβώς εκεί που βρίσκεται η ετικέτα <script>.

Τα εξωτερικά σενάρια δεν μπορούν να περιέχουν ετικέτες <script>.

Εξωτερικά πλεονεκτήματα JavaScript

Η τοποθέτηση σεναρίων σε εξωτερικά αρχεία έχει ορισμένα πλεονεκτήματα:

Διαχωρίζει HTML και κώδικα
Κάνει την HTML και τη JavaScript πιο εύκολη στην ανάγνωση και τη συντήρηση
Τα αποθηκευμένα αρχεία JavaScript μπορούν να επιταχύνουν τη φόρτωση σελίδων

Για να προσθέσετε πολλά αρχεία σεναρίου σε μια σελίδα - χρησιμοποιήστε πολλές ετικέτες σεναρίου:

Παράδειγμα

<script src="myScript1.js"></script>
<script src="myScript2.js"></script>

Εξωτερικές αναφορές

Ένα εξωτερικό σενάριο μπορεί να γίνει αναφορά με 3 διαφορετικούς τρόπους:

Με πλήρη διεύθυνση URL (πλήρης διεύθυνση ιστού)
Με διαδρομή αρχείου (όπως /js/)
Χωρίς κανένα μονοπάτι

Αυτό το παράδειγμα χρησιμοποιεί μια πλήρη διεύθυνση URL για σύνδεση στο myScript.js:

Παράδειγμα

<script src="https://www.w3schools.com/js/myScript.js"></script>

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<body>

<h2>External JavaScript</h2>

<p id="demo">A Paragraph.</p>

<button type="button" onclick="myFunction()">Click Me</button>

<p>This example uses a full web URL to link to "myScript.js".</p>
<p>(myFunction is stored in "myScript.js")</p>

<script src="https://www.w3schools.com/js/myScript.js"></script>

</body>
</html>

Αυτό το παράδειγμα χρησιμοποιεί μια διαδρομή αρχείου για σύνδεση στο myScript.js:

Παράδειγμα

<script src="/js/myScript.js"></script>

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<body>

<h2>External JavaScript</h2>

<p id="demo">A Paragraph.</p>

<button type="button" onclick="myFunction()">Try it</button>

<p>This example uses a file path to link to "myScript.js".</p>
<p>(myFunction is stored in "myScript.js")</p>

<script src="/js/myScript.js"></script>

</body>
</html>

Αυτό το παράδειγμα δεν χρησιμοποιεί διαδρομή για σύνδεση στο myScript.js:

Παράδειγμα

<script src="myScript.js"></script>

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<body>

<h2>Demo External JavaScript</h2>

<p id="demo">A Paragraph.</p>

<button type="button" onclick="myFunction()">Try it</button>

<p>This example links to "myScript.js".</p>
<p>(myFunction is stored in "myScript.js")</p>

<script src="myScript.js"></script>

</body>
</html>

Μπορείτε να διαβάσετε περισσότερα για τις διαδρομές αρχείων στο κεφάλαιο HTML Διαδρομές αρχείων.