Η HTML, η CSS και η JavaScript είναι οι τρεις κύριες γλώσσες που χρησιμοποιούνται στην ανάπτυξη front-end. Η HTML είναι μια γλώσσα σήμανσης, ενώ η CSS είναι μια γλώσσα στυλ.
Η JavaScript είναι μια αντικειμενοστραφής γλώσσα προγραμματισμού που χρησιμοποιείται κυρίως για τη δημιουργία της πλευράς πελάτη του web και των εφαρμογών για κινητές συσκευές. Αυτή η δυναμική γλώσσα ανοιχτού κώδικα έχει γίνει μια από τις πιο χρησιμοποιούμενες γλώσσες προγραμματισμού λόγω της ευελιξίας και της ευκολίας κατανόησής της.
Με HTML5 και CSS3, μπορείτε να δημιουργήσετε στατικές ιστοσελίδες. Ωστόσο, για να προσθέσετε διαδραστικότητα σε έναν τέτοιο ιστότοπο, πρέπει να χρησιμοποιήσετε μια γλώσσα προγραμματισμού όπως η JavaScript που κατανοούν τα προγράμματα περιήγησης.
Αυτό το άρθρο θα εξηγήσει γιατί πρέπει να χρησιμοποιήσετε JavaScript με HTML, τις διαφορετικές προσεγγίσεις για την προσθήκη κώδικα JavaScript σε HTML και τις βέλτιστες πρακτικές για το συνδυασμό των δύο γλωσσών.
Πίνακας περιεχομένων
Γιατί είναι ζωτικής σημασίας η χρήση JavaScript σε HTML
- Προσθήκη διαδραστικότητας: Η διαδραστικότητα ανταποκρίνεται στις εισροές/ενέργειες του χρήστη σε πραγματικό χρόνο χωρίς να φορτώνει ξανά το πρόγραμμα περιήγησης. Για παράδειγμα, μπορείτε να έχετε έναν μετρητή που αυξάνεται κατά ένα κάθε φορά που γίνεται κλικ. Ένα άλλο παράδειγμα μπορεί να είναι μια απάντηση που λέει στους χρήστες ότι τα σχόλιά τους έχουν σταλεί κάθε φορά που κάνουν κλικ στο κουμπί υποβολή.
- Επικύρωση από την πλευρά του πελάτη: Μπορείτε να χρησιμοποιήσετε JavaScript για να καταγράψετε τα σωστά δεδομένα σε φόρμες. Για παράδειγμα, μπορείτε να χρησιμοποιήσετε αυτήν τη γλώσσα προγραμματισμού για να επικυρώσετε τις εισαγωγές χρήστη σε μια σελίδα εγγραφής με τη μορφή email, το μήκος του κωδικού πρόσβασης και τον συνδυασμό χαρακτήρων που θα χρησιμοποιήσετε.
- Χειρισμός DOM: Η JavaScript προσφέρει το μοντέλο αντικειμένου εγγράφου (DOM), το οποίο διευκολύνει τη δυναμική αλλαγή των περιεχομένων μιας ιστοσελίδας. Με αυτήν την τεχνολογία σε εφαρμογή, τα περιεχόμενα μιας σελίδας ενημερώνονται αυτόματα με βάση τις εισαγωγές του χρήστη χωρίς να φορτώνεται ξανά η ιστοσελίδα.
- Συμβατότητα μεταξύ προγραμμάτων περιήγησης: Η JavaScript είναι συμβατή με όλα τα σύγχρονα προγράμματα περιήγησης. Οι ιστοσελίδες που δημιουργούνται με χρήση HTML, CSS και JavaScript θα λειτουργούν έτσι τέλεια σε διαφορετικά προγράμματα περιήγησης.
Προαπαιτούμενα
- Βασική κατανόηση του HTML: Κατανοείτε βασικές ετικέτες HTML, μπορείτε να προσθέσετε κουμπιά και να δημιουργήσετε φόρμες χρησιμοποιώντας HTML.
- Βασική κατανόηση του CSS: Καταλαβαίνετε έννοιες CSS όπως επιλογείς αναγνωριστικού, κλάσης και στοιχείων.
- Ένα πρόγραμμα επεξεργασίας κώδικα: Μπορείτε να χρησιμοποιήσετε ένα πρόγραμμα επεξεργασίας κώδικα όπως το VS Code ή το Atom. Μπορείτε επίσης να χρησιμοποιήσετε έναν διαδικτυακό μεταγλωττιστή JavaScript εάν δεν θέλετε να εγκαταστήσετε λογισμικό στο σύστημά σας.
Πώς να χρησιμοποιήσετε JavaScript σε HTML
Μπορείτε να χρησιμοποιήσετε τρεις κύριες προσεγγίσεις για να προσθέσετε κώδικα JavaScript σε HTML. Εξερευνούμε κάθε προσέγγιση και πού ταιριάζει καλύτερα.
#1. Ενσωμάτωση κώδικα μεταξύ της ετικέτας
Αυτή η προσέγγιση σάς επιτρέπει να έχετε κώδικες JavaScript και HTML στο ίδιο αρχείο (αρχείο HTML). Μπορούμε να ξεκινήσουμε δημιουργώντας έναν φάκελο έργου όπου θα δείξουμε πώς λειτουργεί. Μπορείτε να χρησιμοποιήσετε αυτές τις εντολές για να ξεκινήσετε.
mkdir javascript-html-playground cd javascript-html-playground
Δημιουργήστε δύο αρχεία. index.html και style.css
Προσθέστε αυτόν τον κώδικα εκκίνησης στο αρχείο HTML.
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" href="https://wilku.top/how-to-use-javascript-in-html-to-create-interactive-webpages/style.css" type="text/css" /> </head> <body> <div class="form-container"> <form> <label for="name">Name:</label> <input type="text" id="name" /> <br /> <label for="email">Email:</label> <input type="email" id="email" /> <br /> <label for="message">Message:</label> <textarea id="message" name="message" rows="5" cols="30" required ></textarea> <br /> <input type="submit" value="Submit" /> </form> </div> </body> </html>
Προσθέστε αυτόν τον κωδικό εκκίνησης στο αρχείο CSS σας.
.form-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
input[type="text"],
input[type="email"],
textarea {
display: block;
margin-bottom: 10px;
padding: 5px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 8px;
}
input[type="submit"] {
background-color: #4CAF50;
color: white;
padding: 5px 10px;
border: none;
border-radius: 2.5px;
font-size: 8px;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #3e8e41;
}
Όταν αποδοθεί η ιστοσελίδα, θα έχετε κάτι σαν αυτό.
Μπορούμε τώρα να προσθέσουμε έναν απλό κώδικα JavaScript που λέει “υποβλήθηκε” όταν κάνετε κλικ στο κουμπί υποβολής. Ο ανακατασκευασμένος κώδικας HTML με JavaScript θα είναι:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="https://wilku.top/how-to-use-javascript-in-html-to-create-interactive-webpages/style.css" type="text/css" />
</head>
<body>
<div class="form-container">
<form>
<label for="name">Name:</label>
<input type="text" id="name" />
<br />
<label for="email">Email:</label>
<input type="email" id="email" />
<br />
<label for="message">Message:</label>
<textarea
id="message"
name="message"
rows="5"
cols="30"
required
></textarea>
<br />
<input type="submit" value="Submit" onclick="submitted()" />
</form>
</div>
<script>
function submitted() {
alert("submitted");
}
</script>
</body>
</html>
Όταν κάνετε κλικ στο κουμπί υποβολή, θα λάβετε κάτι παρόμοιο με αυτό.
Pros of embedding JavaScript code between <script> … </script> tags
- Fast to implement: Working on the same file can save you time as you can reference your JavaScript code from HTML code from the same file.
- Easy to read code: The presence of <script> tags separates HTML from JavaScript codes, making it easier to read and debug.
Cons of embedding JavaScript code between <script> … </script> tags
- Makes it hard to reuse code: If you have several forms in your app, it means you will create JavaScript code for every form.
- Slows performance: Big code blocks on the HTML document can slow loading speeds.
#2. Inline Code by using JavaScript code directly inside HTML
Instead of enclosing the above JavaScript code in <script> …. </script> tags, you can add it directly to the HTML code. We will use the same HTML code and style sheet (style.css).
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="https://wilku.top/how-to-use-javascript-in-html-to-create-interactive-webpages/style.css" type="text/css" />
</head>
<body>
<div class="form-container">
<form>
<label for="name">Name:</label>
<input type="text" id="name" />
<br />
<label for="email">Email:</label>
<input type="email" id="email" />
<br />
<label for="message">Message:</label>
<textarea
id="message"
name="message"
rows="5"
cols="30"
required
></textarea>
<br />
<input type="submit" value="Submit" onclick="alert('inline submit')" />
</form>
</div>
</body>
</html>
Όταν κάνετε κλικ στην υποβολή, θα εμφανιστεί ένα μικρό παράθυρο στο πρόγραμμα περιήγησής σας με τις λέξεις "εσωτερική υποβολή".
Πλεονεκτήματα της προσθήκης JavaScript ως Inline Code
- Γρήγορη εφαρμογή: Δεν χρειάζεται να μεταβείτε από το ένα έγγραφο στο άλλο για να γράψετε κώδικα HTML και JavaScript.
- Ιδανικό για μια μικρή εφαρμογή: Εάν έχετε μια μικρή εφαρμογή που δεν απαιτεί μεγάλη διαδραστικότητα, η ενσωματωμένη JavaScript είναι μια τέλεια επιλογή.
Μειονεκτήματα της προσθήκης JavaScript ως ενσωματωμένου κώδικα
- Ο κώδικας δεν είναι επαναχρησιμοποιήσιμος: Εάν η εφαρμογή σας έχει πολλές φόρμες, θα δημιουργήσετε κώδικα JavaScript για κάθε φόρμα.
- Επιβραδύνει την απόδοση: Τα μεγάλα μπλοκ κώδικα στο έγγραφο HTML μπορούν να επιβραδύνουν τις ταχύτητες φόρτωσης.
- Αναγνωσιμότητα κώδικα: Καθώς η βάση κώδικα συνεχίζει να αυξάνεται, η αναγνωσιμότητα κώδικα μειώνεται.
#3. Δημιουργία ενός εξωτερικού αρχείου JavaScript
Καθώς η αίτησή σας μεγαλώνει, θα παρατηρήσετε ότι η προσθήκη κώδικα JavaScript απευθείας σε ένα αρχείο HTML δεν είναι καλή ιδέα. Είναι επίσης πιθανό να έχετε ιστοσελίδες με χαμηλές ταχύτητες φόρτωσης όταν έχετε πολύ κώδικα στο αρχείο HTML σας.
Δημιουργήστε ένα νέο αρχείο script.js για να μεταφέρετε τον κώδικα JavaScript.
Εισαγάγετε το αρχείο script.js στο αρχείο HTML.
<head> <script src="https://wilku.top/how-to-use-javascript-in-html-to-create-interactive-webpages/script.js"></script> </head>
Η νέα ενημερωμένη σελίδα HTML θα έχει αυτόν τον κώδικα.
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" href="https://wilku.top/how-to-use-javascript-in-html-to-create-interactive-webpages/style.css" type="text/css" /> <script src="https://wilku.top/how-to-use-javascript-in-html-to-create-interactive-webpages/script.js"></script> </head> <body> <div class="form-container"> <form> <label for="name">Name:</label> <input type="text" id="name" /> <br /> <label for="email">Email:</label> <input type="email" id="email" /> <br /> <label for="message">Message:</label> <textarea id="message" name="message" rows="5" cols="30" required ></textarea> <br /> <input type="submit" value="Submit" /> </form> </div> </body> </html>
Προσθέστε αυτόν τον κώδικα στο αρχείο script.js.
document.addEventListener("DOMContentLoaded", function() {
const form = document.querySelector("form");
form.addEventListener("submit", function(event) {
event.preventDefault();
alert("external JS sheet submit");
});
});
Αυτή η JavaScript κάνει τα εξής.
- Έχουμε ένα πρόγραμμα ακρόασης συμβάντων που περιμένει να ενεργοποιηθεί το συμβάν DOMContentLoaded.
- Μια συνάρτηση επανάκλησης εκτελείται μετά την ενεργοποίηση του συμβάντος DOMContentLoaded.
- Ο κώδικας χρησιμοποιεί το querySelector για να επιλέξει μια φόρμα.
- Χρησιμοποιούμε το event.preventDefault() για να εμποδίσουμε το DOM να επιλέξει την προεπιλεγμένη συμπεριφορά (ανανεώστε τη σελίδα ή πλοηγηθείτε σε μια νέα σελίδα) όταν ενεργοποιείται το συμβάν υποβολής.
- Ένα μήνυμα "υποβολή εξωτερικού φύλλου JS" ενεργοποιείται μόλις ενεργοποιηθεί το συμβάν υποβολής.
JavaScript σε HTML: Βέλτιστες πρακτικές
- Ελαχιστοποίηση μεγεθών αρχείων: Όσο μεγαλύτερο είναι το μέγεθος του αρχείου, τόσο περισσότερος χρόνος χρειάζεται για να φορτωθεί στο πρόγραμμα περιήγησης. Η ελαχιστοποίηση αφαιρεί όλους τους ανεπιθύμητους χαρακτήρες στον πηγαίο κώδικα χωρίς να αλλάξει το νόημα ή την απόδοσή του. Μπορείτε να χρησιμοποιήσετε εργαλεία όπως το Yahoo YUI Compressor και το HTMLMinifier για να δημιουργήσετε μια συμπαγή βάση κώδικα.
- Διατηρήστε τον κώδικά σας οργανωμένο: Αυτό θα σας διευκολύνει στην ανάγνωση και τη συντήρηση. Μπορείτε να χρησιμοποιήσετε επεκτάσεις όπως το Prettier για να οργανώσετε τον κώδικά σας.
- Χρήση εξωτερικών βιβλιοθηκών: Εάν μια βιβλιοθήκη μπορεί να εκτελέσει μια συγκεκριμένη εργασία για την εφαρμογή σας, δεν χρειάζεται να γράψετε τον κώδικα από την αρχή. Ωστόσο, αποφύγετε τη χρήση πολλαπλών βιβλιοθηκών που επιτυγχάνουν τους ίδιους στόχους στο ίδιο έργο.
- Βελτιστοποιήστε την τοποθέτηση JavaScript: Εάν σκοπεύετε να προσθέσετε κώδικα JavaScript στο αρχείο HTML σας, βεβαιωθείτε ότι ακολουθεί τον κώδικα HTML. Τοποθετήστε το JavaScript ανάμεσα σε ετικέτες