Εισαγωγή στην Javascript - Μάθημα #1
Αλλαγή περιεχομένου HTML με JS
ΠΑΡΑΔΕΙΓΜΑ #1.1:
<!DOCTYPE html>
<html>
<body>
<h2>ΠΑΡΑΔΕΙΓΜΑ #1: Τι μπορούμε να κάνουμε με την Javascript:</h2>
<p>Μπορούμε να αλλάξουμε τα περιεχόμενα της ιστοσελίδας.</p>
<p id="change">
Αν πατήσεις το κουμπί θα αλλάξει αυτή η πρόταση.
</p>
<button type="button" onclick='document.getElementById("change").innerHTML =
"Η πρόταση άλλαξε μόλις πάτησες το κουμπί !!!"'>
Πάτησε με!
</button>
</body>
</html>
<html>
<body>
<h2>ΠΑΡΑΔΕΙΓΜΑ #1: Τι μπορούμε να κάνουμε με την Javascript:</h2>
<p>Μπορούμε να αλλάξουμε τα περιεχόμενα της ιστοσελίδας.</p>
<p id="change">
Αν πατήσεις το κουμπί θα αλλάξει αυτή η πρόταση.
</p>
<button type="button" onclick='document.getElementById("change").innerHTML =
"Η πρόταση άλλαξε μόλις πάτησες το κουμπί !!!"'>
Πάτησε με!
</button>
</body>
</html>
Εισάγετε τις εντολές HTML στο γαλάζιο πλαίσιο.
Η ιστοσελίδα που αντιστοιχεί στις εντολές φαίνεται στο λευκό πλαίσιο πιο κάτω:
(Αρχικά δοκιμάστε να μεταφέρετε όλες τις εντολές με ΑΝΤΙΓΡΑΦΗ-ΕΠΙΚΟΛΛΗΣΗ.
Στην συνέχεια μπορείτε να κάνετε αλλαγές και να δοκιμάσετε να αλλάξετε όπως θέλετε
την λειτουργικότητα του κάθε παραδείγματος.)
ΠΑΡΑΔΕΙΓΜΑ #1.2:
<!DOCTYPE html>
<html>
<body>
<h2>ΠΑΡΑΔΕΙΓΜΑ #2: Τι μπορούμε να κάνουμε με την Javascript:</h2>
<p>Μπορούμε να αλλάξουμε τα περιεχόμενα της ιστοσελίδας.</p>
<p id="change">
Αν πατήσεις το κουμπί θα αλλάξει αυτή η πρόταση.
</p>
<button type="button" onclick='document.getElementById("change").innerHTML =
"Πάτησες το κουμπί (Α)."'>
Κουμπί (Α)
</button>
<button type="button" onclick='document.getElementById("change").innerHTML =
"Πάτησες το κουμπί (Β)."'>
Κουμπί (Β)
</button>
<button type="button" onclick='document.getElementById("change").innerHTML =
"Πάτησες το κουμπί (Γ)."'>
Κουμπί (Γ)
</button>
</body>
</html>
<html>
<body>
<h2>ΠΑΡΑΔΕΙΓΜΑ #2: Τι μπορούμε να κάνουμε με την Javascript:</h2>
<p>Μπορούμε να αλλάξουμε τα περιεχόμενα της ιστοσελίδας.</p>
<p id="change">
Αν πατήσεις το κουμπί θα αλλάξει αυτή η πρόταση.
</p>
<button type="button" onclick='document.getElementById("change").innerHTML =
"Πάτησες το κουμπί (Α)."'>
Κουμπί (Α)
</button>
<button type="button" onclick='document.getElementById("change").innerHTML =
"Πάτησες το κουμπί (Β)."'>
Κουμπί (Β)
</button>
<button type="button" onclick='document.getElementById("change").innerHTML =
"Πάτησες το κουμπί (Γ)."'>
Κουμπί (Γ)
</button>
</body>
</html>
ΠΑΡΑΔΕΙΓΜΑ #1.3:
<!DOCTYPE html>
<html>
<body>
<h2>ΠΑΡΑΔΕΙΓΜΑ #3: Τι μπορούμε να κάνουμε με την Javascript:</h2>
<p>Μπορούμε να αλλάξουμε τα περιεχόμενα της ιστοσελίδας.</p>
<p id="change1">
Αν πατήσεις το κουμπί (Α) θα αλλάξει αυτή η πρόταση.
</p>
<p id="change2">
Αν πατήσεις το κουμπί (Β) θα αλλάξει αυτή η πρόταση.
</p>
<p id="change3">
Αν πατήσεις το κουμπί (Γ) θα αλλάξει αυτή η πρόταση.
</p>
<button type="button" onclick='document.getElementById("change1").innerHTML =
"Πάτησες το κουμπί (Α)."'>
Κουμπί (Α)
</button>
<button type="button" onclick='document.getElementById("change2").innerHTML =
"Πάτησες το κουμπί (Β)."'>
Κουμπί (Β)
</button>
<button type="button" onclick='document.getElementById("change3").innerHTML =
"Πάτησες το κουμπί (Γ)."'>
Κουμπί (Γ)
</button>
</body>
</html>
<html>
<body>
<h2>ΠΑΡΑΔΕΙΓΜΑ #3: Τι μπορούμε να κάνουμε με την Javascript:</h2>
<p>Μπορούμε να αλλάξουμε τα περιεχόμενα της ιστοσελίδας.</p>
<p id="change1">
Αν πατήσεις το κουμπί (Α) θα αλλάξει αυτή η πρόταση.
</p>
<p id="change2">
Αν πατήσεις το κουμπί (Β) θα αλλάξει αυτή η πρόταση.
</p>
<p id="change3">
Αν πατήσεις το κουμπί (Γ) θα αλλάξει αυτή η πρόταση.
</p>
<button type="button" onclick='document.getElementById("change1").innerHTML =
"Πάτησες το κουμπί (Α)."'>
Κουμπί (Α)
</button>
<button type="button" onclick='document.getElementById("change2").innerHTML =
"Πάτησες το κουμπί (Β)."'>
Κουμπί (Β)
</button>
<button type="button" onclick='document.getElementById("change3").innerHTML =
"Πάτησες το κουμπί (Γ)."'>
Κουμπί (Γ)
</button>
</body>
</html>
ΑΣΚΗΣΗ #1.1: Προσπαθήστε να μετατρέψετε τα παραπάνω παραδείγματα ώστε η ιστοσελίδα σας να περιέχει 4 κουμπιά με την λειτουργικότητα που φαίνεται στην εικόνα κάτω:
Δεν υπάρχουν σχόλια:
Δημοσίευση σχολίου