Μέχρι τώρα, χρησιμοποιώντας HTML, δημιουργούσαμε την εμφάνιση της ιστοσελίδας, χωρίς όμως να μπορούμε να κάνουμε προγραμματισμό, όπως εκχώρηση τιμών σε μεταβλητές, αριθμητικές ή λογικές πράξεις.
Με τη Javascript μπορούμε να κάνουμε και προγραμματισμό στην ιστοσελίδα, αφού είναι μία γλώσσα προγραμματισμού για ιστοσελίδες.
Ας πάρουμε το παράδειγμα ενός μαγαζιού που πουλάει πουκάμισα, παντελόνια και μπουφάν.
Θέλουμε να εκχωρήσουμε τις τιμές του κάθε προϊόντος σε μεταβλητές (π.χ. pa για πανταλόνι, m για μπουφάν και pou για πουκάμισο.)
Στη συνέχεια, θέλουμε να εφαρμόσουμε ΦΠΑ 24% στις πιο πάνω τιμές, ώστε να βρεθεί η τελική τιμή των προϊόντων.
Καταρχήν, δηλώνονται οι μεταβλητές όπως παρακάτω:
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<!-- Δήλωση μεταβλητών-->
<script>
var pa = 50;
var pou= 30;
var m= 60;
<!-- Υπολογισμός τελικής τιμής παντελονιών-->
var pafinal= pa+pa*0.24
<!-- Εμφάνιση αποτελέσματος στην οθόνη -->
document.getElementById("demo").innerHTML =
"Τελική τιμή παντελονιών " + pafinal ;
</script>
</body>
</html>
Παρατηρήστε ότι η Javascript βγάζει μηνύματα χρησιμοποιώντας τη συνάρτηση:
document.getElementById("demo").innerHTML =
"Τελική τιμή παντελονιών " + pafinal ;
Όπως ίσως προσέξατε, πριν το <script> ορίστηκε μία παράγραφος με id="demo", η οποία είναι κενή, δεν έχει μέσα περιεχόμενο.
Η συνάρτηση getElementById("demo"), ψάχνει να βρει ποιο στοιχείο της HTML έχει id="demo" και αλλάζει το περιεχόμενό του (innerHTML) σε: "Τελική τιμή παντελονιών " + pafinal έχει υπολογιστεί παραπάνω και είναι η τελική τιμή του παντελονιού συν ΦΠΑ 24%
όπου pafinal = pa+pa*24
Τα σύμβολα των πράξεων στη Javascript Είναι: +, - , * , / ,** (ύψωση σε δύναμη), % υπόλοιπο διαίρεσης.
Με τη Javascript μπορούμε να κάνουμε και προγραμματισμό στην ιστοσελίδα, αφού είναι μία γλώσσα προγραμματισμού για ιστοσελίδες.
Ας πάρουμε το παράδειγμα ενός μαγαζιού που πουλάει πουκάμισα, παντελόνια και μπουφάν.
Θέλουμε να εκχωρήσουμε τις τιμές του κάθε προϊόντος σε μεταβλητές (π.χ. pa για πανταλόνι, m για μπουφάν και pou για πουκάμισο.)
Στη συνέχεια, θέλουμε να εφαρμόσουμε ΦΠΑ 24% στις πιο πάνω τιμές, ώστε να βρεθεί η τελική τιμή των προϊόντων.
Καταρχήν, δηλώνονται οι μεταβλητές όπως παρακάτω:
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<!-- Δήλωση μεταβλητών-->
<script>
var pa = 50;
var pou= 30;
var m= 60;
<!-- Υπολογισμός τελικής τιμής παντελονιών-->
var pafinal= pa+pa*0.24
<!-- Εμφάνιση αποτελέσματος στην οθόνη -->
document.getElementById("demo").innerHTML =
"Τελική τιμή παντελονιών " + pafinal ;
</script>
</body>
</html>
Παρατηρήστε ότι η Javascript βγάζει μηνύματα χρησιμοποιώντας τη συνάρτηση:
document.getElementById("demo").innerHTML =
"Τελική τιμή παντελονιών " + pafinal ;
Όπως ίσως προσέξατε, πριν το <script> ορίστηκε μία παράγραφος με id="demo", η οποία είναι κενή, δεν έχει μέσα περιεχόμενο.
Η συνάρτηση getElementById("demo"), ψάχνει να βρει ποιο στοιχείο της HTML έχει id="demo" και αλλάζει το περιεχόμενό του (innerHTML) σε: "Τελική τιμή παντελονιών " + pafinal έχει υπολογιστεί παραπάνω και είναι η τελική τιμή του παντελονιού συν ΦΠΑ 24%
όπου pafinal = pa+pa*24
Τα σύμβολα των πράξεων στη Javascript Είναι: +, - , * , / ,** (ύψωση σε δύναμη), % υπόλοιπο διαίρεσης.
Παράδειγμα : Το 23 γίνεται :2**3 και 5%2 =1
Ασκήσεις
1. Φτιάξτε ένα πρόγραμμα που να έχει μία αρχική τιμή ενός προϊόντος και να κάνει έκπτωση 30%.
Να εμφανίζει στην ιστοσελίδα την αρχική τιμή, το ποσό της έκπτωσης και την τελική τιμή, με κατάλληλα μηνύματα.
2. Φτιάξτε ένα πρόγραμμα που θα έχει ένα προφορικό βαθμό κι ένα γραπτό. Ο τελικός βαθμός θα προκύπτει από το 30% του προφορικού και το 70% του γραπτού. Να εμφανίζονται με κατάλληλα μηνύματα οι αρχικοί βαθμοί, οι προσαρμοσμένοι βαθμοί και ο τελικός βαθμός.
Να εμφανίζει στην ιστοσελίδα την αρχική τιμή, το ποσό της έκπτωσης και την τελική τιμή, με κατάλληλα μηνύματα.
2. Φτιάξτε ένα πρόγραμμα που θα έχει ένα προφορικό βαθμό κι ένα γραπτό. Ο τελικός βαθμός θα προκύπτει από το 30% του προφορικού και το 70% του γραπτού. Να εμφανίζονται με κατάλληλα μηνύματα οι αρχικοί βαθμοί, οι προσαρμοσμένοι βαθμοί και ο τελικός βαθμός.
Δεν υπάρχουν σχόλια:
Δημοσίευση σχολίου
Σημείωση: Μόνο ένα μέλος αυτού του ιστολογίου μπορεί να αναρτήσει σχόλιο.