Σε αυτό το άρθρο παρουσιάζουμε παραδείγματα μέσα από τα οποία φαίνονται οι δυνατότητες της javascript. Πως μπορούν να χρησιμοποιηθεί η javascript στην κατασκευή ιστοσελίδων.
Αλλαγή περιεχομένου της HTML χρησιμοποιώντας JavaScript
Η JavaScript μπορεί να αλλάξει το περιεχόμενο της HTML.
Μια συνάρτηση της JavaScript που χρησιμοποιείται πολύ συχνά είναι η getElementById().
Το ακόλουθο παράδειγμα χρησιμοποιεί τη συνάρτηση για να βρει ένα στοιχείο της γλώσσας HTML (δηλαδή ένα HTML element).
Ψάχνει το στοιχείο χρησιμοποιώντας το id=”demo” και αλλάζει το περιεχόμενο του στοιχείου (innerHTML) σε “Hello JavaScript”:
———————————–
<!DOCTYPE html>
<html>
<body>
<h1>What Can JavaScript Do?</h1>
<p id=”demo”>JavaScript can change HTML content.</p>
<button type=”button” onclick=”document.getElementById(‘demo’).innerHTML = ‘Hello JavaScript!'”>Click Me!</button>
</body>
</html>
———————————–
Εδώ βλέπουμε στο browser το αποτέλεσμα της εκτέλεσης του παραπάνω κώδικα HTML πριν να πατήσουμε το button:
Στη συνέχεια βλέπουμε πως αλλάζει το περιεχόμενο όταν πατήσουμε το button:
Αλλαγή χαρακτηριστικών της HTML χρησιμοποιώντας JavaScript
Μπορούμε να χρησιμοποιήσουμε τη JavaScript για να αλλάξουμε τα χαρακτηριστικά στοιχείων της HTML.
Στο ακόλουθο παράδειγμα αλλάζουμε μια εικόνα της HTML (HTML image) αλλάζοντας την το χαρακτηριστικό source του στοιχείου εικόνας html <img>:
———————————–
<!DOCTYPE html>
<html>
<body>
<h1>What Can JavaScript Do?</h1>
<p>JavaScript can change HTML attributes.</p>
<p>In this case JavaScript changes the src (source) attribute of an image.</p>
<button onclick=”document.getElementById(‘myImage’).src=’pic_bulbon.gif'”>Turn on the light</button>
<img id=”myImage” src=”pic_bulboff.gif” style=”width:100px”>
<button onclick=”document.getElementById(‘myImage’).src=’pic_bulboff.gif'”>Turn off the light</button>
</body>
</html>
———————————–
Ακολουθούν δυο εικόνες που δείχνουν το αποτέλεσμα της εκτέλεσης του παραπάνω κώδικα. Η εναλλαγή γίνεται πατώντας τα δυο κουμπιά που βρίσκονται δεξιά και αριστερά της εικόνας. Το αριστερό κουμπί ανάβει τη λάμπα ενώ το δεξί κουμπί σβήνει τη λάμπα.
Αυτή η επιλογή μπορεί να μας είναι πολύ χρήσιμη όταν θέλουμε να φτιάξουμε ένα υποτυπώδες εφέ κατά την κατασκευή μιας ιστοσελίδας. Για παράδειγμα μπορεί να φτιάξουμε animated button ή να φτιάξουμε κάτι που θα απαντά στις ενέργειες του χρήστη.
Με τη JavaScript μπορούμε να αλλάξουμε το CSS
Χρησιμοποιούμε τη JavaScript για να αλλάξουμε το στυλ των στοιχείων της HTML που καθορίζεται από το CSS.
Η αλλαγή του στυλ ενός στοιχείου HTML γίνεται αλλάζοντας ένα στοιχείο CSS όπως στο παράδειγμα που ακολουθεί στο οποίο αλλάζουμε τα χαρακτηριστικά μιας παραγράφου html:
———————————–
<!DOCTYPE html>
<html>
<body>
<h1>What Can JavaScript Do?</h1>
<p id=”demo”>JavaScript can change the style of an HTML element.</p>
<button type=”button” onclick=”document.getElementById(‘demo’).style.fontSize=’35px'”>Click Me!</button>
</body>
</html>
———————————–
Στη συνέχεια βλέπουμε το αποτέλεσμα πριν και μετά το πάτημα του κουμπιού:
Εάν δεν γνωρίζετε καλά τη CSS τότε μπορείτε να εκπαιδευτείτε ξεκινώντας από το άρθρο μας για την εισαγωγή στο CSS.
Η JavaScript μπορεί να κρύψει στοιχεία HTML
Η απόκρυψη στοιχείων της HTML (HTML elements) με τον ακόλουθο τρόπο:
———————————–
<!DOCTYPE html>
<html>
<body>
<h1>What Can JavaScript Do?</h1>
<p id=”demo”>JavaScript can hide HTML elements.</p>
<button type=”button” onclick=”document.getElementById(‘demo’).style.display=’none'”>Click Me!</button>
</body>
</html>
———————————–
Στις επόμενες δυο εικόνες βλέπουμε τι εμφανίζεται στο φυλλομετρητή πριν και μετά το πάτημα του κουμπιού:
Η JavaScript μπορεί να εμφανίσει στοιχεία HTML
Η επανεμφάνιση των κρυμμένων HTML στοιχείων μπορεί να πραγματοποιηθεί ως εξής:
———————————–
<!DOCTYPE html>
<html>
<body>
<h1>What Can JavaScript Do?</h1>
<p>JavaScript can show hidden HTML elements.</p>
<p id=”demo” style=”display:none”>Hello JavaScript!</p>
<button type=”button” onclick=”document.getElementById(‘demo’).style.display=’block'”>Click Me!</button>
</body>
</html>
———————————–
Ακολουθούν εικόνες που δείχνουν το παράδειγμα πριν και μετά το πάτημα του κουμπιού:
Javascript στην κατασκευή ιστοσελίδων
Η γλώσσα javascript χρησιμοποιείται στη κατασκευή των ιστοσελίδων. Η χρήση της javascript επιτρέπει στον κατασκευαστή της ιστοσελίδας να υλοποιήσει όλα όσα του ζητήσει ο πελάτης. Του επιτρέπει να ξεφύγει πέρα από τα όρια της html ή του wordpress ή οποιουδήποτε άλλου Content Management System (CMS). Ουσιαστικά μας επιτρέπει αν δημιουργήσουμε μια ολοκληρωμένη εφαρμογή μέσα στη σελίδα την οποία κατασκευάζουμε. Για παράδειγμα μπορούμε να δημιουργήσουμε ένα ηλεκτρονικό παιγνίδι. Στα επόμενα άρθρα θα έχετε τη δυνατότητα να μάθετε όλες τις δυνατότητες της javascript και πως μπορεί αυτή να ενισχύσει την ιστοσελίδα που κατασκευάζουμε.
