Εισαγωγή
JavaScript δεν χρειάζεται συστάσεις. Είναι μία από τις πιο δημοφιλείς γλώσσες προγραμματισμού για την ανάπτυξη ιστού. Λειτουργεί παρόμοια με το HTML και CSS. Όλες αυτές οι γλώσσες βοηθούν στη σχεδίαση και την ανάπτυξη διαδικτυακών εφαρμογών και προγραμμάτων.
Πώς είναι λοιπόν χρήσιμη η JavaScript συγκεκριμένα; Με τη βοήθεια της JavaScript, μπορείτε να κάνετε τις διαδικτυακές εφαρμογές και τις ιστοσελίδες σας αρκετά διαδραστικές. Δεν υπάρχει περιθώριο για εφησυχασμό στη σύγχρονη εποχή. Πρέπει να τραβήξετε την προσοχή των θεατών σας στα πρώτα δευτερόλεπτα και να τους κρατήσετε αφοσιωμένους. Δεν υπάρχει αμφιβολία ότι ένας ενδιαφέρων και responsive σχεδιασμός ιστοσελίδων είναι ένας από τους καλύτερους τρόπους για να το πετύχετε αυτό. Ευτυχώς, οι περισσότεροι περιηγητές υποστηρίζουν τη JavaScript. Μπορεί να εκτελεστεί στον περιηγητή σας με τη βοήθεια ορισμένων ενσωματωμένων μηχανών.
Προσθήκη JavaScript σε HTML
Αν θέλετε να χρησιμοποιήσετε αρχεία JavaScript για τη διαδικτυακή σας εφαρμογή, πρέπει να τα εκτελέσετε παράλληλα με τη σήμανση HTML. Υπάρχουν δύο τρόποι με τους οποίους μπορείτε να προσθέσετε JavaScript σε HTML. Μια προσέγγιση είναι να το κάνετε inline (ενσωματωμένα) μέσα σε ένα έγγραφο HTML. Ο άλλος τρόπος είναι να το προσθέσετε ως ξεχωριστό αρχείο. Αυτό το αρχείο θα ληφθεί μαζί με το έγγραφο HTML.
Σε αυτόν τον οδηγό, θα εξερευνήσουμε λεπτομερώς πώς μπορείτε να προσθέσετε JavaScript σε HTML χρησιμοποιώντας αυτές τις δύο μεθόδους.
Πώς να προσθέσετε JavaScript σε έγγραφα HTML Inline
Αρχικά, θα δούμε πώς μπορείτε να προσθέσετε JavaScript σε ένα έγγραφο HTML inline. Για να το κάνετε αυτό, πρέπει να χρησιμοποιήσετε την ειδική ετικέτα HTML. Αυτή είναι η <script>. Αυτή η ετικέτα περιβάλλει τον κώδικα JavaScript. Μπορείτε να τοποθετήσετε την ετικέτα οπουδήποτε σε ολόκληρη τη σήμανση HTML. Το πού θα την τοποθετήσετε εξαρτάται από το πότε θέλετε να φορτώνεται η JavaScript.
Για παράδειγμα, μπορείτε να την τοποθετήσετε στην ενότητα <head>, στην ενότητα <body> ή ακόμα και μετά την ετικέτα κλεισίματος </body>. Αν θέλετε να κρατήσετε τη JavaScript μακριά από το κύριο περιεχόμενο του κώδικα HTML, είναι προτιμότερο να βάλετε την ετικέτα στην ενότητα <head>. Αυτή θα περιέχει τον κώδικα JavaScript. Από την άλλη πλευρά, μπορεί να θέλετε ο κώδικας JavaScript να εκτελείται μέσα στη διάταξη της ιστοσελίδας σας. Σε αυτή την περίπτωση, θα πρέπει να τοποθετήσετε την ετικέτα στην ενότητα <body>. Αυτό θα το κάνετε αν, ας πούμε, χρησιμοποιείτε το document.write για τη δημιουργία περιεχομένου.
Ένας καλύτερος τρόπος για να το κατανοήσετε αυτό θα ήταν μέσω ενός παραδείγματος με κώδικα. Σκεφτείτε το ακόλουθο έγγραφο HTML το οποίο είναι κενό. Ο τίτλος του προγράμματος περιήγησης αυτού του εγγράφου είναι Today’s Date:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Today's Date</title> </head> <body> </body> </html> |
Όπως μπορείτε να δείτε, δεν υπάρχει κανένα ίχνος JavaScript εδώ. Το έγγραφο περιέχει μόνο τη σήμανση HTML μέχρι στιγμής. Τώρα, θα θέλαμε να προσθέσουμε λίγο κώδικα JavaScript inline για να φορτώνεται και να εκτελείται ταυτόχρονα. Σκεφτείτε το ακόλουθο κομμάτι κώδικα JavaScript:
|
1 2 |
let d = new Date(); alert("Η σημερινή ημερομηνία είναι " + d); |
Σύμφωνα με τον παραπάνω κώδικα, επιτρέπουμε στην ιστοσελίδα μας να εμφανίζει μια ειδοποίηση με τη σημερινή ημερομηνία. Έτσι, ανεξάρτητα από το πότε ο επισκέπτης ανοίγει τον ιστότοπο, η σελίδα θα εμφανίζει την τρέχουσα ημερομηνία.
Τώρα, για να προσθέσετε αυτό το κομμάτι κώδικα JavaScript στο έγγραφο HTML, θα χρησιμοποιήσουμε την ετικέτα <script>. Πρώτα απ' όλα, πρέπει να προσθέσετε τον κώδικα JavaScript ανάμεσα στις ετικέτες <head>. Αυτό λέει στην ιστοσελίδα ότι ο συγκεκριμένος κώδικας πρέπει να φορτωθεί πριν από το υπόλοιπο περιεχόμενο της σελίδας. Μπορείτε να προσθέσετε τον κώδικα κάτω από τις ετικέτες <title>. Δείτε πώς μπορείτε να το κάνετε αυτό:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Η σημερινή ημερομηνία</title> <script> let d = new Date(); alert("Η σημερινή ημερομηνία είναι " + d); </script> </head> <body> </body> </html> |
Ο κώδικας JavaScript έχει πλέον προστεθεί. Η ιστοσελίδα σας θα εκτελέσει και θα φορτώσει αυτό το σενάριο πριν από το υπόλοιπο μέρος της σελίδας. Όταν ξεκινήσετε τον ιστότοπό σας, θα λάβετε μια ειδοποίηση με την τρέχουσα ημερομηνία, κάπως έτσι:
Αυτός είναι ο τρόπος με τον οποίο θα προσθέτατε τον κώδικα στην ενότητα <head> του εγγράφου HTML. Η εναλλακτική λύση θα ήταν να προσθέσετε το σενάριο είτε μέσα είτε έξω από τις ετικέτες <body>. Όπως θα δείτε στο παρακάτω παράδειγμα, θα προσθέσουμε το κομμάτι του κώδικα μετά την ενότητα <head>:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Η σημερινή ημερομηνία</title> </head> <body> <script> let d = new Date(); document.body.innerHTML = "<h1>Η σημερινή ημερομηνία είναι " + d + "</h1>" </script> </body> </html> |
Ως αποτέλεσμα αυτής της τροποποίησης, θα δείτε κάτι σαν αυτό κατά την επαναφόρτωση της σελίδας:
Πώς να προσθέσετε JavaScript σε HTML με ένα ξεχωριστό αρχείο JavaScript
Τα μικρά σενάρια JavaScript λειτουργούν καλά με αρχεία HTML. Αυτό συμβαίνει επειδή εκτελούνται εξ ολοκλήρου σε μία σελίδα ή λιγότερο. Εάν εργάζεστε με μεγαλύτερα σενάρια που καταλαμβάνουν πολλές σελίδες, το αρχείο μπορεί να γίνει πολύ δύσκολο στην κατανόηση. Γι' αυτό ίσως χρειαστεί να το προσθέσετε ως ξεχωριστό αρχείο JavaScript. Το αρχείο θα φορτώνεται ταυτόχρονα με το έγγραφο HTML.
Σε αυτήν την ενότητα, θα συζητήσουμε πώς μπορείτε να προσθέσετε JavaScript σε HTML χρησιμοποιώντας ένα ξεχωριστό αρχείο. Ο κώδικας συνήθως στεγάζεται σε ένα ή περισσότερα αρχεία .js. Το έγγραφο HTML θα αναφέρεται σε αυτά τα αρχεία όπως σε οποιοδήποτε άλλο εξωτερικό στοιχείο. Οι λόγοι για τους οποίους μπορεί να θέλετε να χρησιμοποιήσετε ένα εντελώς ξεχωριστό αρχείο JavaScript είναι πολλοί. Κυρίως, κάνει τον κώδικα πολύ πιο εύκολο στην ανάγνωση και την κατανόηση. Για να μην αναφέρουμε ότι τα ξεχωριστά αρχεία επιτρέπουν στις αποθηκευμένες στη μνήμη cache σελίδες να φορτώνουν γρήγορα και είναι επίσης σχετικά πιο εύκολο να συντηρηθούν.
Για να επωφεληθείτε από αυτά τα πλεονεκτήματα, πρέπει να γνωρίζετε πώς να συνδέσετε αυτά τα δύο μεταξύ τους - το αρχείο JavaScript και το έγγραφο HTML. Για να σας βοηθήσουμε να κατανοήσετε, θα πάρουμε το παράδειγμα ενός μικρού έργου ιστού. Αυτό το υποτιθέμενο έργο περιέχει ένα κύριο index.html στη ρίζα, το style.css στον κατάλογο css/ και το script.js στον κατάλογο js/. Ορίστε το μικρό μας έργο:
|
1 2 3 4 5 6 7 8 9 10 11 |
project/ ├── css/ | └── style.css ├── js/ | └── script.js └── index.html |
Για τη σήμανση HTML, θα χρησιμοποιήσουμε το έγγραφο που χρησιμοποιήσαμε προηγουμένως:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Η σημερινή ημερομηνία</title> </head> <body> </body> </html> |
Τώρα που έχουμε τα δύο έγγραφά μας, μπορούμε να ξεκινήσουμε να τα συνδέουμε. Πρέπει να προσθέσουμε τον κώδικα JavaScript που αφορά την ημερομηνία στο αρχείο script.js. Θα τον προσθέσετε ως επικεφαλίδα <h1> ως εξής:
|
1 2 |
let d = new Date(); document.body.innerHTML = "<h1>Η σημερινή ημερομηνία είναι " + d + "</h1>" |
Για να συνδέσετε τον κώδικα με το έγγραφο HTML, θα προσθέσετε μια αναφορά στο σενάριο. Η αναφορά θα πρέπει να βρίσκεται είτε μέσα είτε κάτω από την ενότητα <body> του προτύπου HTML. Ορίστε ο κώδικας που θα χρησιμοποιήσετε εδώ:
|
1 |
<script src="js/script.js"></script> |
Όπως μπορείτε να δείτε, χρησιμοποιούμε την ετικέτα <script>. Η ετικέτα υποδεικνύει το αρχείο script.js που βρίσκεται στον κατάλογο js/ του έργου. Ορίστε πώς θα εμφανίζεται ο κώδικας στο έγγραφο HTML:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Η σημερινή ημερομηνία</title> </head> <body> </body> <script src="js/script.js"></script> </html> |
Αν θέλετε, μπορείτε να κάνετε κάποιες στυλιστικές τροποποιήσεις για να ομορφύνετε τη σελίδα σας. Για παράδειγμα, ας προσθέσουμε λίγο χρώμα φόντου στην επικεφαλίδα <h1>. Θα κάνουμε αυτή την επεξεργασία στο αρχείο style.css:
|
1 2 3 4 5 6 7 8 |
body { background-color: #0080ff; } h1 { color: #fff; font-family: Arial, Helvetica, sans-serif; } |
Εφόσον η επεξεργασία πρόκειται να εμφανιστεί στην επικεφαλίδα, θα την αναφέρουμε στην ενότητα <head> του εγγράφου HTML. Ορίστε πώς θα κάνετε την αναφορά σε αυτό το αρχείο CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Η σημερινή ημερομηνία</title> <link rel="stylesheet" href="css/style.css"> </head> <body> </body> <script src="js/script.js"></script> </html> |
Τώρα που κάναμε τις απαιτούμενες αναφορές, μπορείτε να δείτε τις αλλαγές. Φορτώστε το index.html στο πρόγραμμα περιήγησής σας και θα δείτε μια σελίδα σαν αυτή:
Αν θέλετε να ενημερώσετε τον κώδικα, μπορείτε να επεξεργαστείτε όλες τις σελίδες σας από μία μόνο τοποθεσία. Αυτό καθιστά τη συντήρηση των ιστοσελίδων πολύ εύκολη. Αυτό είναι το πλεονέκτημα της χρήσης ενός ξεχωριστού αρχείου για τα σενάρια JavaScript σας.
Συμπέρασμα
Ελπίζουμε ότι αυτός ο οδηγός σάς βοήθησε να μάθετε περισσότερα σχετικά με τη διαδικασία προσθήκης JavaScript σε HTML. Καλύψαμε πώς να το κάνετε αυτό ενσωματωμένα (inline) σε ένα έγγραφο HTML, καθώς και πώς να το προσθέσετε ως αρχείο .js. Τώρα που γνωρίζετε τα βασικά, μπορείτε να κάνετε πολλά περισσότερα με τη JavaScript σε HTML.
Ορίστε μερικοί πόροι από το ιστολόγιό μας που θα σας βοηθήσουν να αξιοποιήσετε περαιτέρω τη JavaScript:
- Αν δημιουργείτε τη δική σας διαδικτυακή εφαρμογή, ρίξτε μια ματιά στον οδηγό μας για το πώς να επιλέξετε την καλύτερη ρύθμιση διακομιστή.
- Αν θέλετε να μάθετε πώς να δημιουργήσετε ένα ιστολόγιο με το Ghost, ρίξτε μια ματιά σε αυτόν τον οδηγό.
- Ρίξτε μια ματιά σε αυτόν τον οδηγό για να μάθετε πώς να εγκαταστήσετε το Node.js σε Ubuntu 18.04.
Καλό προγραμματισμό!
Σχόλια
Δεν υπάρχουν σχόλια ακόμα. Γράψτε το πρώτο.