Εισαγωγή στην Javascript - Μάθημα #2
Αλλαγή ιδιοτήτων (attributes) HTML με JS
Οι εικόνες που θα χρησιμοποιήσουμε είναι οι εξής:
Οι εικόνες αυτές αντιστοιχούν στις διευθύνσεις URL:
Η λειτουργία του παρακάτω παραδείγματος είναι να φαίνεται πως με το πάτημα του κατάλληλου κουμπιού θα ανάβει ή θα σβήνει ο λαμπτήρας:
ΠΑΡΑΔΕΙΓΜΑ #2.1:
<!DOCTYPE html>
<html>
<body style="background-color: black; color:lime;">
<h2>Τι μπορεί να κάνει η JAVASCRIPT:</h2>
<p>Με την JavaScript μπορούμε να αλλάξουμε τις τιμές των ιδιοτήτων HTML.</p>
<p>Σε αυτό το παράδειγμα η JavaScript αλλάζει την τιμή της ιδιότητας src (source) σε εικόνες.</p>
<p>ΠΡΟΣΟΜΟΙΩΣΗ ΛΑΜΠΑΣ (ΑΝΑΜΜΑ_ΣΒΗΣΙΜΟ):</p>
<button onclick="document.getElementById('myImage').src=
'https://i.ibb.co/7RgGSgj/bulb-on.jpg'">
Άναψε το φως
</button>
<img id="myImage" src="https://i.ibb.co/zxkh09s/bulb-off.jpg" style="width:200px">
<button onclick="document.getElementById('myImage').src=
'https://i.ibb.co/zxkh09s/bulb-off.jpg'">
Σβήσε το φως
</button>
</body>
</html>
<html>
<body style="background-color: black; color:lime;">
<h2>Τι μπορεί να κάνει η JAVASCRIPT:</h2>
<p>Με την JavaScript μπορούμε να αλλάξουμε τις τιμές των ιδιοτήτων HTML.</p>
<p>Σε αυτό το παράδειγμα η JavaScript αλλάζει την τιμή της ιδιότητας src (source) σε εικόνες.</p>
<p>ΠΡΟΣΟΜΟΙΩΣΗ ΛΑΜΠΑΣ (ΑΝΑΜΜΑ_ΣΒΗΣΙΜΟ):</p>
<button onclick="document.getElementById('myImage').src=
'https://i.ibb.co/7RgGSgj/bulb-on.jpg'">
Άναψε το φως
</button>
<img id="myImage" src="https://i.ibb.co/zxkh09s/bulb-off.jpg" style="width:200px">
<button onclick="document.getElementById('myImage').src=
'https://i.ibb.co/zxkh09s/bulb-off.jpg'">
Σβήσε το φως
</button>
</body>
</html>
Εισάγετε τις εντολές HTML στο γαλάζιο πλαίσιο.
Η ιστοσελίδα που αντιστοιχεί στις εντολές φαίνεται στο λευκό πλαίσιο πιο κάτω:
(Αρχικά δοκιμάστε να μεταφέρετε όλες τις εντολές με ΑΝΤΙΓΡΑΦΗ-ΕΠΙΚΟΛΛΗΣΗ.
Στην συνέχεια μπορείτε να κάνετε αλλαγές και να δοκιμάσετε να αλλάξετε όπως θέλετε
την λειτουργικότητα του κάθε παραδείγματος.)
Στο παρακάτω παράδειγμα θα χρησιμοποιηθούν οι εικόνες:
ΠΑΡΑΔΕΙΓΜΑ #2.2:
<!DOCTYPE html>
<html>
<body style="background-color: white; color: darkred;">
<h2>Τι μπορεί να κάνει η JAVASCRIPT:</h2>
<p>Με την JavaScript μπορούμε να αλλάξουμε τις τιμές των ιδιοτήτων HTML.</p>
<p>Σε αυτό το παράδειγμα η JavaScript αλλάζει την τιμή της ιδιότητας src (source) σε εικόνες.</p>
<p>ΠΡΟΣΟΜΟΙΩΣΗ ΦΩΤΕΙΝΟΥ ΣΗΜΑΤΟΔΟΤΗ:</p>
<button onclick="document.getElementById('myImage').src=
'https://i.ibb.co/025YJbM/trafficlight-GREEN.jpg'">
Πράσινο φως
</button>
<img id="myImage" src="https://i.ibb.co/gyYwWbC/trafficlight-OFF.jpg" style="width:100px">
<button onclick="document.getElementById('myImage').src=
'https://i.ibb.co/gyYwWbC/trafficlight-OFF.jpg'">
Σβήσε τα όλα
</button>
</body>
</html>
<html>
<body style="background-color: white; color: darkred;">
<h2>Τι μπορεί να κάνει η JAVASCRIPT:</h2>
<p>Με την JavaScript μπορούμε να αλλάξουμε τις τιμές των ιδιοτήτων HTML.</p>
<p>Σε αυτό το παράδειγμα η JavaScript αλλάζει την τιμή της ιδιότητας src (source) σε εικόνες.</p>
<p>ΠΡΟΣΟΜΟΙΩΣΗ ΦΩΤΕΙΝΟΥ ΣΗΜΑΤΟΔΟΤΗ:</p>
<button onclick="document.getElementById('myImage').src=
'https://i.ibb.co/025YJbM/trafficlight-GREEN.jpg'">
Πράσινο φως
</button>
<img id="myImage" src="https://i.ibb.co/gyYwWbC/trafficlight-OFF.jpg" style="width:100px">
<button onclick="document.getElementById('myImage').src=
'https://i.ibb.co/gyYwWbC/trafficlight-OFF.jpg'">
Σβήσε τα όλα
</button>
</body>
</html>
ΑΣΚΗΣΗ #2.1: Προσπαθήστε να τροποποιήσετε το παράδειγμα #1 ώστε να προστεθεί και δεύτερος λαμπτήρας δίπλα στον πρώτο. Οι δύο λαμπτήρες θα πρέπει να ανάβουν και να σβήνουν ταυτόχρονα.
ΑΣΚΗΣΗ #2.2: Προσπαθήστε να συμπληρώσετε το παράδειγμα #2 ώστε η ιστοσελίδα σας να περιέχει 4 κουμπιά που να αντιστοιχούν στις 4 καταστάσεις ενός φωτεινού σηματοδότη: ΣΒΗΣΤΟΣ - ΠΡΑΣΙΝΟ - ΚΙΤΡΙΝΟ - ΚΟΚΚΙΝΟ
ΠΡΟΣΟΜΟΙΩΣΗ ΦΩΤΕΙΝΟΥ ΣΗΜΑΤΟΔΟΤΗ:
ΑΣΚΗΣΗ #2.3: Χρησιμοποιήστε 4 λάμπες για να πετύχετε το παρακάτω αποτέλεσμα:
ΠΡΟΣΟΜΟΙΩΣΗ ΛΑΜΠΑΣ (ΑΝΑΜΜΑ_ΣΒΗΣΙΜΟ):
Δεν υπάρχουν σχόλια:
Δημοσίευση σχολίου