Εισαγωγή στην Javascript - Μάθημα #4
Μεταβλητές: είσοδος / έξοδος σε HTML με JS
Στο παρακάτω παράδειγμα χρησιμοποιούνται δύο πλαίσια εισαγωγής στα οποία ζητείται να εισαχθούν το όνομα και το επώνυμο του χρήστη και με το πάτημα του πρώτου κουμπιού εμφανίζεται το ονοματεπώνυμο του χρήστη. Με το πάτημα του δεύτερου κουμπιού γίνεται καθαρισμός των πεδίων.
Οι 2 μεταβλητές που χρησιμοποιούνται για να αποθηκεύσουν το όνομα και το επώνυμο ορίζονται με την χρήση της δεσμευμένης λέξης var.
ΠΑΡΑΔΕΙΓΜΑ #4.1:
<!DOCTYPE html>
<html>
<body>
<p>Δώσε το όνομα και το επώνυμο σου στα παρακάτω πλαίσια εισαγωγής:</p>
Όνομα: <input type="text" id="input1"> <br>
Επώνυμο: <input type="text" id="input2"> <br><br>
<p>Πάτησε το παρακάτω κουμπί για να εμφανιστεί το ονοματεπώνυμό σου:</p>
<button type="button" onclick='
var inval1 = document.getElementById("input1").value;
var inval2 = document.getElementById("input2").value;
document.getElementById("output").innerHTML = inval1 + " " +inval2;
'>
Εμφάνισε ονοματεπώνυμο!
</button>
<p>Το ονοματεπώνυμό σου εμφανίζεται παρακάτω:</p>
<p id="output" style="font-size:25px"></p>
<button type="button" onclick='
document.getElementById("input1").value ="";
document.getElementById("input2").value ="";
document.getElementById("output").innerHTML ="";
'>
Καθαρισμός
</button>
</body>
</html>
<html>
<body>
<p>Δώσε το όνομα και το επώνυμο σου στα παρακάτω πλαίσια εισαγωγής:</p>
Όνομα: <input type="text" id="input1"> <br>
Επώνυμο: <input type="text" id="input2"> <br><br>
<p>Πάτησε το παρακάτω κουμπί για να εμφανιστεί το ονοματεπώνυμό σου:</p>
<button type="button" onclick='
var inval1 = document.getElementById("input1").value;
var inval2 = document.getElementById("input2").value;
document.getElementById("output").innerHTML = inval1 + " " +inval2;
'>
Εμφάνισε ονοματεπώνυμο!
</button>
<p>Το ονοματεπώνυμό σου εμφανίζεται παρακάτω:</p>
<p id="output" style="font-size:25px"></p>
<button type="button" onclick='
document.getElementById("input1").value ="";
document.getElementById("input2").value ="";
document.getElementById("output").innerHTML ="";
'>
Καθαρισμός
</button>
</body>
</html>
Εισάγετε τις εντολές HTML στο γαλάζιο πλαίσιο.
Η ιστοσελίδα που αντιστοιχεί στις εντολές φαίνεται στο λευκό πλαίσιο πιο κάτω:
(Αρχικά δοκιμάστε να μεταφέρετε όλες τις εντολές με ΑΝΤΙΓΡΑΦΗ-ΕΠΙΚΟΛΛΗΣΗ.
Στην συνέχεια μπορείτε να κάνετε αλλαγές και να δοκιμάσετε να αλλάξετε όπως θέλετε
την λειτουργικότητα του κάθε παραδείγματος.)
Στο παρακάτω παράδειγμα γίνεται η προσομοίωση μιας αριθμομηχανής:
ΠΑΡΑΔΕΙΓΜΑ #4.2:
<!DOCTYPE html>
<html>
<body>
<h2>Τι μπορεί να κάνει η JAVASCRIPT:</h2>
<h3>Προσομοίωση αριθμομηχανής</h3>
<p>Εισάγετε δύο αριθμούς στα πλαίσια εισαγωγής:</p>
Αριθμός #1: <input type="number" id="input1"> <br>
Αριθμός #2: <input type="number" id="input2"> <br><br>
<button type="button" onclick='
var inval1 = document.getElementById("input1").value;
var inval2 = document.getElementById("input2").value;
var result = Number(inval1) + Number(inval2);
document.getElementById("output").innerHTML = result;
'>
(+)
</button>
<button type="button" onclick='
var inval1 = document.getElementById("input1").value;
var inval2 = document.getElementById("input2").value;
var result = Number(inval1) - Number(inval2);
document.getElementById("output").innerHTML = result;
'>
(-)
</button>
<button type="button" onclick='
var inval1 = document.getElementById("input1").value;
var inval2 = document.getElementById("input2").value;
var result = Number(inval1) * Number(inval2);
document.getElementById("output").innerHTML = result;
'>
(x)
</button>
<button type="button" onclick='
var inval1 = document.getElementById("input1").value;
var inval2 = document.getElementById("input2").value;
var result = Number(inval1) / Number(inval2);
document.getElementById("output").innerHTML = result;
'>
(:)
</button>
<button type="button" onclick='
document.getElementById("input1").value="";
document.getElementById("input2").value="";
document.getElementById("output").innerHTML = "";
'>
(C)
</button>
<p>Το αποτέλεσμα είναι:</p>
<p id="output" style="font-size:25px"></p>
</body>
</html>
<html>
<body>
<h2>Τι μπορεί να κάνει η JAVASCRIPT:</h2>
<h3>Προσομοίωση αριθμομηχανής</h3>
<p>Εισάγετε δύο αριθμούς στα πλαίσια εισαγωγής:</p>
Αριθμός #1: <input type="number" id="input1"> <br>
Αριθμός #2: <input type="number" id="input2"> <br><br>
<button type="button" onclick='
var inval1 = document.getElementById("input1").value;
var inval2 = document.getElementById("input2").value;
var result = Number(inval1) + Number(inval2);
document.getElementById("output").innerHTML = result;
'>
(+)
</button>
<button type="button" onclick='
var inval1 = document.getElementById("input1").value;
var inval2 = document.getElementById("input2").value;
var result = Number(inval1) - Number(inval2);
document.getElementById("output").innerHTML = result;
'>
(-)
</button>
<button type="button" onclick='
var inval1 = document.getElementById("input1").value;
var inval2 = document.getElementById("input2").value;
var result = Number(inval1) * Number(inval2);
document.getElementById("output").innerHTML = result;
'>
(x)
</button>
<button type="button" onclick='
var inval1 = document.getElementById("input1").value;
var inval2 = document.getElementById("input2").value;
var result = Number(inval1) / Number(inval2);
document.getElementById("output").innerHTML = result;
'>
(:)
</button>
<button type="button" onclick='
document.getElementById("input1").value="";
document.getElementById("input2").value="";
document.getElementById("output").innerHTML = "";
'>
(C)
</button>
<p>Το αποτέλεσμα είναι:</p>
<p id="output" style="font-size:25px"></p>
</body>
</html>
ΑΣΚΗΣΗ #4.1: Δοκιμάστε να τροποποιήσετε το παράδειγμα #1 για να εισάγεται και να τυπώνεται εκτός από το ονοματεπώνυμο, η διεύθυνση και το τηλέφωνο.
Δώσε το όνομα και το επώνυμο σου στα παρακάτω πλαίσια εισαγωγής:
Όνομα:Επώνυμο:
Κινητό:
Πάτησε το παρακάτω κουμπί για να εμφανιστεί το ονοματεπώνυμό σου:
Το ονοματεπώνυμό σου εμφανίζεται παρακάτω:
ΑΣΚΗΣΗ #4.2: Δοκιμάστε να τροποποιήσετε το παράδειγμα #2 για να εισάγεται ένας αριθμός και και να τυπώνεται το τετράγωνο και η τετραγωνική ρίζα του. Θα χρειαστείτε:
Math.pow(x, y) επιστρέφει την δύναμη x υψωμένο στο yMath.sqrt(x) επιστρέφει την τετραγωνική ρίζα του x
Δεν υπάρχουν σχόλια:
Δημοσίευση σχολίου