Ανάπτυξη Front-end
Βασικά στοιχεία JavaScript: Προσθήκη διαδραστικότητας στην ιστοσελίδα σας
18 Μαΐου, 2023
Η JavaScript είναι η γλώσσα του Ιστού…
Σε αυτήν την ανάρτηση, θα μιλήσουμε για τον κόσμο της JavaScript, ξεκινώντας με τα βασικά της σύνταξης, των μεταβλητών και των συναρτήσεων. Στη συνέχεια, θα μάθουμε πώς να χρησιμοποιούμε JavaScript για να χειριζόμαστε στοιχεία HTML, να δημιουργούμε δυναμικά εφέ και να προσθέτουμε διαδραστικότητα στις ιστοσελίδες μας. Θα καλύψουμε επίσης ορισμένες βέλτιστες πρακτικές για τη σύνταξη αποτελεσματικού και διατηρήσιμου κώδικα JavaScript.
Ακολουθεί ένα παράδειγμα κώδικα JavaScript που προσθέτει διαδραστικότητα σε μια ιστοσελίδα:
<!DOCTYPE html>
<html>
<head>
<title>My Web Page</title>
<script>
function changeColor() {
var element = document.getElementById("myHeading");
element.style.color = "red";
}
</script>
</head>
<body>
<h1 id="myHeading" onclick="changeColor()">Welcome to my web page!</h1>
<p>This is a paragraph of text.</p>
<button onclick="changeColor()">Change Color</button>
</body>
</html>
Σε αυτό το παράδειγμα, έχουμε ένα βασικό έγγραφο HTML με μια δήλωση DOCTYPE στο επάνω μέρος και μια συμπεριλαμβανόμενη δέσμη ενεργειών JavaScript στην ενότητα κεφαλίδας.
Η συνάρτηση JavaScript, changeColor(), ορίζεται στο σενάριο. Αυτή η συνάρτηση παίρνει το στοιχείο με το αναγνωριστικό “myHeading” χρησιμοποιώντας τη μέθοδο document.getElementById() και στη συνέχεια αλλάζει το χρώμα του κειμένου σε κόκκινο χρησιμοποιώντας την ιδιότητα style.color.
Προσθέσαμε επίσης ένα συμβάν onclick στο στοιχείο h1 που καλεί τη συνάρτηση changeColor() όταν ο χρήστης κάνει κλικ στην επικεφαλίδα.
Προσθέσαμε ένα κουμπί στο κάτω μέρος της σελίδας που καλεί επίσης τη συνάρτηση changeColor() όταν κάνετε κλικ.
Αυτό είναι απλώς ένα βασικό παράδειγμα κώδικα JavaScript, αλλά δείχνει πώς μπορείτε να χρησιμοποιήσετε το JavaScript για να προσθέσετε διαδραστικότητα στην ιστοσελίδα σας. Μπορείτε να προσθέσετε πιο σύνθετες λειτουργίες στη σελίδα σας χρησιμοποιώντας JavaScript, όπως επικύρωση εισόδων φόρμας ή δημιουργία δυναμικού περιεχομένου με βάση τα δεδομένα χρήστη.