Στην HTML, ο κώδικας JavaScript εισάγεται μεταξύ των ετικετών <script> και </script>. Αυτή η ετικέτα χρησιμοποιείται για να περικλείσει τον κώδικα JavaScript και να τον δηλώσει ως τμήμα της ιστοσελίδας. Μπορεί να εισαχθεί είτε στο εσωτερικό της ετικέτας <head>, είτε στο εσωτερικό της ετικέτας <body>. Παράδειγμα:
<!DOCTYPE html>
<html>
<head>
<title>Παράδειγμα Ιστοσελίδας</title>
<script>
// Εδώ εισάγουμε τον κώδικα JavaScript
console.log("Γεια σας από τον κώδικα JavaScript!");
</script>
</head>
<body>
<!-- Εδώ είναι το περιεχόμενο της ιστοσελίδας -->
</body>
</html>
Σε αυτό το παράδειγμα, ο κώδικας JavaScript εισάγεται μεταξύ των ετικετών <script> και </script> στο εσωτερικό της ετικέτας <head>. Ο κώδικας console.log() χρησιμοποιείται για να εκτυπώσει ένα μήνυμα στην κονσόλα του περιηγητή.
Αυτό είναι ένα βασικό παράδειγμα για τη χρήση της ετικέτας <script> για την εισαγωγή κώδικα JavaScript σε μια ιστοσελίδα HTML. Μπορείτε να εισάγετε περισσότερο κώδικα JavaScript ανάμεσα στις ετικέτες <script> και </script> για να εκτελείται στην ιστοσελίδα.
Παρακάτω θα σας παρουσιάσω ένα αναλυτικό παράδειγμα χρήσης της ετικέτας <script> για να εισάγετε κώδικα JavaScript σε μια ιστοσελίδα HTML:
<!DOCTYPE html>
<html>
<head>
<title>Παράδειγμα Ιστοσελίδας</title>
<script>
// Δήλωση μιας μεταβλητής και εκχώρηση τιμής
let message = "Γεια σας! Καλώς ήρθατε στην ιστοσελίδα μας.";
// Ορισμός μιας συνάρτησης για εμφάνιση μηνύματος
function showMessage() {
alert(message);
}
// Κλήση της συνάρτησης όταν γίνεται κλικ σε ένα κουμπί
document.getElementById("myButton").onclick = showMessage;
</script>
</head>
<body>
<h1>Καλώς ήρθατε!</h1>
<button id="myButton">Πάτησε με!</button>
</body>
</html>
Σε αυτό το παράδειγμα, ο κώδικας JavaScript εισάγεται μεταξύ των ετικετών <script> και </script> στο εσωτερικό της ετικέτας <head>. Ο κώδικας περιλαμβάνει τρεις σημαντικές λειτουργίες:
- Δηλώνεται μια μεταβλητή
messageκαι της εκχωρείται μια τιμή που περιέχει ένα καλωσοριστικό μήνυμα. - Ορίζεται μια συνάρτηση
showMessage(), η οποία χρησιμοποιεί τηνalert()για να εμφανίσει ένα παράθυρο ειδοποίησης με το περιεχόμενο της μεταβλητήςmessage. - Χρησιμοποιείται η μέθοδος
getElementById()για να επιλέξουμε το κουμπί με το αναγνωριστικό “myButton”. Έπειτα, χρησιμοποιείται η ιδιότηταonclickγια να ορίσουμε τη συνάρτησηshowMessage()ως συνάρτηση που θα καλείται όταν γίνεται κλικ στο κουμπί.
Στο παράδειγμα, όταν ο χρήστης πατάει το κουμπί “Πάτησε με!”, εμφανίζεται ένα παράθυρο ειδοποίησης με το καλωσοριστικό μήνυμα “Γεια σας! Καλώς ήρθατε στην ιστοσελίδα μας.”
Αυτό είναι ένα αναλυτικό παράδειγμα που δείχνει τη χρήση της ετικέτας <script> για την εισαγωγή κώδικα JavaScript σε μια ιστοσελίδα HTML και τον τρόπο με τον οποίο μπορούμε να τον συνδέσουμε με στοιχεία της ιστοσελίδας.
Οι συναρτήσεις στη JavaScript είναι ένα μπλοκ κώδικα που μπορεί να εκτελεστεί όταν “καλείται” (called) για μια συνάρτηση όταν συμβαίνει ένα γεγονός, όπως όταν ο χρήστης κάνει κλικ σε ένα κουμπί.
Για να ορίσετε μια συνάρτηση στη JavaScript, χρησιμοποιείτε τη λέξη-κλειδί function, ακολουθούμενη από το όνομα της συνάρτησης και τις παρενθέσεις (). Εδώ είναι ένα παράδειγμα που ορίζει μια συνάρτηση με το όνομα sayHello:
function sayHello() {
console.log("Γεια σας!");
}
Για να καλέσετε (εκτελέσετε) τη συνάρτηση, απλώς αναφερθείτε στο όνομα της και προσθέστε τις παρενθέσεις (). Εδώ είναι ένα παράδειγμα που καλεί τη συνάρτηση sayHello:
sayHello();
Η συνάρτηση sayHello θα εκτελέσει τον κώδικα μέσα της, ο οποίος σε αυτήν την περίπτωση είναι να εκτυπωθεί το μήνυμα “Γεια σας!” στην κονσόλα.
Τώρα, όσον αφορά τα γεγονότα (events), μπορείτε να συνδέσετε μια συνάρτηση με ένα γεγονός που συμβαίνει σε ένα στοιχείο HTML, όπως ένα κουμπί. Αυτό γίνεται με τη χρήση γεγονοτικών ακροατών (event listeners).
Εδώ είναι ένα παράδειγμα που δείχνει πώς να συνδέσετε μια συνάρτηση με το γεγονός click (κλικ) ενός κουμπιού:
// Ορίζουμε τη συνάρτηση
function buttonClicked() {
console.log("Πατήθηκε το κουμπί!");
}
// Επιλέγουμε το κουμπί με το ID "myButton"
let myButton = document.getElementById("myButton");
// Προσθέτουμε έναν γεγονοτικό ακροατή για το γεγονός click
myButton.addEventListener("click", buttonClicked);
Σε αυτό το παράδειγμα, η συνάρτηση buttonClicked καλείται όταν ο χρήστης κάνει κλικ στο κουμπί με το αναγνωριστικό “myButton”. Ο γεγονοτικός ακροατής addEventListener χρησιμοποιείται για να προσθέσει το γεγονός click ως γεγονοτικό ακροατή στο κουμπί και να συνδέσει τη συνάρτηση buttonClicked με αυτό το γεγονός.
Αυτό είναι ένα παράδειγμα που δείχνει πώς μπορείτε να χρησιμοποιήσετε συναρτήσεις και γεγονοτικούς ακροατές για να ανταποκριθείτε σε γεγονότα σε μια ιστοσελίδα και να εκτελέσετε τον κώδικά σας όταν αυτά συμβαίνουν.
Ο κώδικας JavaScript μπορεί να τοποθετηθεί είτε στο εσωτερικό της ετικέτας <body>, είτε στο εσωτερικό της ετικέτας <head>, είτε και στις δύο τοποθεσίες του HTML έγγραφου.
Εδώ είναι οι δύο συνηθισμένες πρακτικές τοποθέτησης του κώδικα JavaScript:
1. Τοποθέτηση του κώδικα JavaScript στο εσωτερικό της ετικέτας <head>:
<!DOCTYPE html>
<html>
<head>
<title>Παράδειγμα</title>
<script>
// Κώδικας JavaScript εδώ
</script>
</head>
<body>
<!-- Περιεχόμενο της ιστοσελίδας εδώ -->
</body>
</html>
Σε αυτήν την περίπτωση, ο κώδικας JavaScript τοποθετείται εντός της ετικέτας <head>. Αυτό σημαίνει ότι ο κώδικας JavaScript θα φορτωθεί και θα εκτελεστεί πριν από το περιεχόμενο του <body>. Αυτό είναι χρήσιμο όταν ο κώδικας JavaScript χρειάζεται να έχει πρόσβαση σε στοιχεία που βρίσκονται στο <body>.
2. Τοποθέτηση του κώδικα JavaScript στο εσωτερικό της ετικέτας <body>:
<!DOCTYPE html>
<html>
<head>
<title>Παράδειγμα</title>
</head>
<body>
<!-- Περιεχόμενο της ιστοσελίδας εδώ -->
<script>
// Κώδικας JavaScript εδώ
</script>
</body>
</html>
Σε αυτήν την περίπτωση, ο κώδικας JavaScript τοποθετείται εντός της ετικέτας <body>. Αυτό σημαίνει ότι ο κώδικας JavaScript θα φορτωθεί και θα εκτελεστεί μετά το περιεχόμενο του <body>. Αυτό μπορεί να είναι χρήσιμο όταν ο κώδικας JavaScript χρειάζεται να επεξεργαστεί ή να αλληλεπιδράσει με τα στοιχεία της ιστοσελίδας που βρίσκονται στο <body>.
Ανάλογα με τις ανάγκες και τις απαιτήσεις του κώδικα JavaScript και των στοιχείων της ιστοσελίδας, μπορείτε να επιλέξετε την κατάλληλη θέση για να τοποθετήσετε τον κώδικα JavaScript στο έγγραφο HTML.
Παράδειγμα 1: Κώδικας JavaScript στο εσωτερικό της ετικέτας <head>
<!DOCTYPE html>
<html>
<head>
<title>Παράδειγμα</title>
<script>
function sayHello() {
console.log("Γεια σας!");
}
</script>
</head>
<body>
<button onclick="sayHello()">Πάτησε με!</button>
</body>
</html>
Σε αυτό το παράδειγμα, ο κώδικας JavaScript τοποθετείται εντός της ετικέτας <head>. Ορίζουμε μια συνάρτηση sayHello() που εκτυπώνει το μήνυμα “Γεια σας!” στην κονσόλα. Στο <body>, έχουμε ένα κουμπί που καλεί τη συνάρτηση sayHello() όταν γίνεται κλικ. Όταν το κουμπί πατηθεί, θα εμφανιστεί το μήνυμα “Γεια σας!” στην κονσόλα του προγράμματος περιήγησης.
Παράδειγμα 2: Κώδικας JavaScript στο εσωτερικό της ετικέτας <body>
<!DOCTYPE html>
<html>
<head>
<title>Παράδειγμα</title>
</head>
<body>
<h1>Καλώς ήλθατε!</h1>
<script>
function sayHello() {
console.log("Γεια σας!");
}
</script>
<button onclick="sayHello()">Πάτησε με!</button>
</body>
</html>
Σε αυτό το παράδειγμα, ο κώδικας JavaScript τοποθετείται εντός της ετικέτας <body>. Ορίζουμε μια συνάρτηση sayHello() που εκτυπώνει το μήνυμα “Γεια σας!” στην κονσόλα. Μετά τον ορισμό της συνάρτησης, έχουμε ένα κουμπί στο <body> που καλεί τη συνάρτηση sayHello() όταν γίνεται κλικ. Όταν το κουμπί πατηθεί, θα εμφανιστεί το μήνυμα “Γεια σας!” στην κονσόλα του προγράμματος περιήγησης.
Αυτά είναι δύο αναλυτικά παραδείγματα για την τοποθέτηση του κώδικα JavaScript είτε στο εσωτερικό της ετικέτας <head>, είτε στο εσωτερικό της ετικέτας <body>. Μπορείτε να επιλέξετε την κατάλληλη θέση ανάλογα με τις απαιτήσεις του κώδικα σας και τη συμπεριφορά που επιθυμείτε να επιτύχετε στην ιστοσελίδα σας.
Μπορείτε επίσης να τοποθετήσετε τον κώδικα JavaScript σε εξωτερικά αρχεία. Για να το κάνετε αυτό, πρέπει να δημιουργήσετε ένα νέο αρχείο με κατάληξη .js και να τοποθετήσετε τον κώδικα JavaScript μέσα σε αυτό. Για παράδειγμα, δημιουργήστε ένα αρχείο με το όνομα “script.js” και τον παρακάτω κώδικα:
function sayHello() {
console.log("Γεια σας!");
}
Έπειτα, από το αρχείο HTML σας, μπορείτε να συνδέσετε το εξωτερικό αρχείο JavaScript χρησιμοποιώντας την ετικέτα <script> με το ατρίβος “src” για να δείξετε τη διαδρομή προς το αρχείο JavaScript. Εδώ είναι ένα παράδειγμα:
<!DOCTYPE html> <html> <head> <title>Παράδειγμα Ιστοσελίδας</title> <script src="script.js"></script> </head> <body> <!-- Εδώ είναι το περιεχόμενο της ιστοσελίδας --> </body> </html>
Σε αυτό το παράδειγμα, ο κώδικας JavaScript που βρίσκεται στο αρχείο “script.js” εισάγεται στην ιστοσελίδα χρησιμοποιώντας την ετικέτα <script> με το ατρίβος “src” που δείχνει τη διαδρομή προς το αρχείο JavaScript.
Οι εξωτερικοί κώδικας JavaScript αρχεία είναι χρήσιμοι όταν έχετε μεγάλους ή πολύπλοκους κώδικες JavaScript που θέλετε να οργανώσετε ή να χρησιμοποιήσετε σε πολλές ιστοσελίδες. Με την εξωτερική τοποθέτηση του κώδικα JavaScript σε ένα αρχείο, μπορείτε να τον επαναχρησιμοποιήσετε εύκολα και να διατηρήσετε τον κώδικα HTML σας πιο καθαρό και ευανάγνωστο.
Τοποθετώντας τον κώδικα JavaScript σε εξωτερικά αρχεία έχει ορισμένα πλεονεκτήματα:
Απομονώνει το HTML από τον κώδικα, καθιστά το HTML και το JavaScript πιο ευανάγνωστα και ευκολότερα συντηρήσιμα
Τα εξωτερικά αρχεία JavaScript μπορούν να επιταχύνουν τον φόρτωση της σελίδας
Για να προσθέσετε πολλά αρχεία script σε μια σελίδα, χρησιμοποιήστε αρκετές ετικέτες script:
<!DOCTYPE html> <html> <head> <title>Παράδειγμα Ιστοσελίδας</title> <script src="script1.js"></script> <script src="script2.js"></script> <script src="script3.js"></script> </head> <body> <!-- Εδώ είναι το περιεχόμενο της ιστοσελίδας --> </body> </html>
Σε αυτό το παράδειγμα, χρησιμοποιούνται τρεις ετικέτες <script> για να προστεθούν τα αρχεία script στη σελίδα. Τα αρχεία script1.js, script2.js και script3.js είναι εξωτερικά αρχεία JavaScript που περιέχουν τον κώδικα που θέλουμε να εκτελέσουμε.
Αυτή η προσέγγιση βοηθά στο να έχουμε πιο οργανωμένο και καθαρό κώδικα, καθώς χωρίζουμε τον κώδικα JavaScript από το HTML και τον τοποθετούμε σε ξεχωριστά αρχεία. Επίσης, επιτρέπει την επαναχρησιμοποίηση του κώδικα σε πολλές σελίδες.
Επίσης, τα εξωτερικά αρχεία JavaScript μπορούν να μνημονεύονται (cache) από τον περιηγητή, οπότε αν ένα αρχείο JavaScript έχει ήδη φορτωθεί από μια προηγούμενη σελίδα, τότε δεν χρειάζεται να ξανακατέβει από το διακομιστή και μπορεί να φορτωθεί από την προσωρινή μνήμη του περιηγητή. Αυτό μπορεί να επιταχύνει τον χρόνο φόρτωσης της σελίδας και να βελτιώσει την εμπειρία του χρήστη.
Χρησιμοποιώντας αυτήν την προσέγγιση, μπορείτε να οργανώσετε και να διαχειριστείτε καλύτερα τον κώδικά σας και να επιτύχετε μεγαλύτερη αποτελεσματικότητα και επαναχρησιμοποίηση του κώδικα σας.
Ένα εξωτερικό script μπορεί να αναφερθεί με τρεις διαφορετικούς τρόπους:
- Με πλήρη URL (πλήρης διεύθυνση ιστού):
Μπορείτε να αναφέρετε ένα εξωτερικό script χρησιμοποιώντας το πλήρες URL του αρχείου JavaScript. Αυτό συμπεριλαμβάνει το πρωτόκολλο (π.χ. http:// ή https://) και τη διεύθυνση του αρχείου. Παράδειγμα:
<script src="http://example.com/js/myscript.js"></script>
- Με διαδρομή αρχείου (file path):
Μπορείτε να αναφέρετε ένα εξωτερικό script χρησιμοποιώντας τη διαδρομή του αρχείου JavaScript στον τοπικό σας υπολογιστή ή στον διακομιστή σας. Αυτή η διαδρομή μπορεί να είναι απόλυτη (π.χ. /js/myscript.js) ή σχετική (π.χ. js/myscript.js) με την τρέχουσα σελίδα HTML. Παράδειγμα:
<script src="/js/myscript.js"></script>
- Χωρίς καμία διαδρομή:
Εάν το εξωτερικό script βρίσκεται στον ίδιο κατάλογο με το αρχείο HTML, μπορείτε να αναφερθείτε σε αυτό χωρίς καμία διαδρομή. Παράδειγμα:
<script src="myscript.js"></script>
Αυτοί είναι οι τρόποι με τους οποίους μπορείτε να αναφερθείτε σε ένα εξωτερικό script σε μια σελίδα HTML. Επιλέξτε τον τρόπο που ταιριάζει καλύτερα στις ανάγκες σας, ανάλογα με τη διαθεσιμότητα και τη θέση του αρχείου JavaScript.