Εισαγωγή στην Javascript - Μάθημα #3
Αλλαγή της μορφοποίησης (CSS) στοιχείων HTML με JS
ΠΑΡΑΔΕΙΓΜΑ #3.1:
<!DOCTYPE html>
<html>
<body id="change3">
<h2>Τι μπορεί να κάνει η JAVASCRIPT:</h2>
<p>H JavaScript μπορεί να αλλάξει το στυλ ενός στοιχείου HTML:</p>
<p id="change1">Αν πατηθεί το παρακάτω κουμπί θα μεγαλώσουν τα γράμματα αυτής της παραγράφου.</p>
<button type="button" onclick="document.getElementById('change1').style.fontSize='35px'">
Άλλαξε το μέγεθος!
</button>
<p id="change2">Αν πατηθούν τα παρακάτω κουμπιά θα αλλάξουν χρώμα τα γράμματα αυτής της παραγράφου και θα σχεδιαστεί ένα πλαίσιο.</p>
<button type="button" onclick="document.getElementById('change2').style.color='red'">
Άλλαξε το χρώμα!
</button>
<button type="button" onclick="document.getElementById('change2').style.border='5px solid blue'">
Βάλε πλαίσιο!
</button>
<p>Αν πατηθεί το παρακάτω κουμπί θα αλλάξει το χρώμα φόντου όλης της ιστοσελίδας.</p>
<button type="button" onclick="document.getElementById('change3').style.background='lime'">
Άλλαξε το χρώμα!
</button>
</body>
</html>
<html>
<body id="change3">
<h2>Τι μπορεί να κάνει η JAVASCRIPT:</h2>
<p>H JavaScript μπορεί να αλλάξει το στυλ ενός στοιχείου HTML:</p>
<p id="change1">Αν πατηθεί το παρακάτω κουμπί θα μεγαλώσουν τα γράμματα αυτής της παραγράφου.</p>
<button type="button" onclick="document.getElementById('change1').style.fontSize='35px'">
Άλλαξε το μέγεθος!
</button>
<p id="change2">Αν πατηθούν τα παρακάτω κουμπιά θα αλλάξουν χρώμα τα γράμματα αυτής της παραγράφου και θα σχεδιαστεί ένα πλαίσιο.</p>
<button type="button" onclick="document.getElementById('change2').style.color='red'">
Άλλαξε το χρώμα!
</button>
<button type="button" onclick="document.getElementById('change2').style.border='5px solid blue'">
Βάλε πλαίσιο!
</button>
<p>Αν πατηθεί το παρακάτω κουμπί θα αλλάξει το χρώμα φόντου όλης της ιστοσελίδας.</p>
<button type="button" onclick="document.getElementById('change3').style.background='lime'">
Άλλαξε το χρώμα!
</button>
</body>
</html>
Εισάγετε τις εντολές HTML στο γαλάζιο πλαίσιο.
Η ιστοσελίδα που αντιστοιχεί στις εντολές φαίνεται στο λευκό πλαίσιο πιο κάτω:
(Αρχικά δοκιμάστε να μεταφέρετε όλες τις εντολές με ΑΝΤΙΓΡΑΦΗ-ΕΠΙΚΟΛΛΗΣΗ.
Στην συνέχεια μπορείτε να κάνετε αλλαγές και να δοκιμάσετε να αλλάξετε όπως θέλετε
την λειτουργικότητα του κάθε παραδείγματος.)
Στο παρακάτω παράδειγμα με το πάτημα του κουμπιού αλλάζει η μορφοποίηση ολόκληρης της παραγράφου:
ΠΑΡΑΔΕΙΓΜΑ #3.2:
<!DOCTYPE html>
<html>
<body>
<h2>Τι μπορεί να κάνει η JAVASCRIPT:</h2>
<p>Πατήστε το παρακάτω κουμπί για να αλλάξει η μορφοποίηση της παραγράφου που ακολουθεί:</p>
<button type="button" onclick="
document.getElementById('change').style.background='red';
document.getElementById('change').style.border='5px solid blue';
document.getElementById('change').style.color='white';
document.getElementById('change').style.margin='50px';
document.getElementById('change').style.padding='10px';
">
Άλλαξε την μορφοποίηση!
</button>
<p id="change">"Ο σκοπός ενός φυλλομετρητή είναι να διαβάζει τα έγγραφα HTML και να τα συνθέσει σε σελίδες που μπορεί κανείς να διαβάσει ή να ακούσει. Ο browser δεν εμφανίζει τις ετικέτες HTML, αλλά τις χρησιμοποιεί για να παρουσιάσει το περιεχόμενο της σελίδας.".</p>
</body>
</html>
<html>
<body>
<h2>Τι μπορεί να κάνει η JAVASCRIPT:</h2>
<p>Πατήστε το παρακάτω κουμπί για να αλλάξει η μορφοποίηση της παραγράφου που ακολουθεί:</p>
<button type="button" onclick="
document.getElementById('change').style.background='red';
document.getElementById('change').style.border='5px solid blue';
document.getElementById('change').style.color='white';
document.getElementById('change').style.margin='50px';
document.getElementById('change').style.padding='10px';
">
Άλλαξε την μορφοποίηση!
</button>
<p id="change">"Ο σκοπός ενός φυλλομετρητή είναι να διαβάζει τα έγγραφα HTML και να τα συνθέσει σε σελίδες που μπορεί κανείς να διαβάσει ή να ακούσει. Ο browser δεν εμφανίζει τις ετικέτες HTML, αλλά τις χρησιμοποιεί για να παρουσιάσει το περιεχόμενο της σελίδας.".</p>
</body>
</html>
ΑΣΚΗΣΗ #3.1: Δοκιμάστε να τροποποιήσετε το παράδειγμα #2 για να αλλάξετε την μορφοποίηση της παραγράφου όπως επιθυμείτε εσείς, με 2 διαφορετικές μορφοποιήσεις.
Η Javascript είναι μια γλώσσα προγραμματισμού που μπορεί να εμπλουτίσει μια ιστοσελίδα HTML με δυνατότητες αλληλεπίδρασης με τον χρήστη. Αυτή είναι και η πιο συνηθισμένη χρήση της JavaScript οπότε μπορούμε να αναφερόμαστε σε δυναμικές ιστοσελίδες ή δυναμική HTML σε αντίθεση με τις στατικές ιστοσελίδες (στατική HTML) που απλά εμφανίζεται το περιεχόμενο τους χωρίς να παρέχουν δυνατότητες αλληλεπίδρασης με τον χρήστη.
Δεν υπάρχουν σχόλια:
Δημοσίευση σχολίου