Υποενότητα 7.2: Λαμβάνοντας αποφάσεις
| Site: | ΕΛ/ΛΑΚ Moodle |
| Course: | Σχεδιασμός WEB και Παραγωγή Ψηφιακού Περιεχομένου |
| Book: | Υποενότητα 7.2: Λαμβάνοντας αποφάσεις |
| Printed by: | Guest user |
| Date: | Thursday, 25 April 2024, 9:18 AM |
Description
- Συγκριτικοί τελεστές
- Η δομή επιλογής
- Λογικοί τελεστές
Συγκριτικοί τελεστές
Ο παρακάτω πίνακας δείχνει τους τελεστές σύγκρισης - comparison operators που είναι διαθέσιμοι στη JavaScript.
Αυτοί οι τελεστές χρησιμοποιούνται για να ελέγξουν αν νια πρόταση είναι αληθής ή ψευδής.
Για παράδειγμα, μπορούν να χρησιμοποιηθούν για να ελέγξουν εάν οι τιμές δύο μεταβλητών είναι ίσες, ή αν η μια τιμή είναι μεγαλύτερη από την άλλη.
Συνήθως, ανάλογα με το αν το αποτέλεσμα είναι αληθές ή ψευδές, προβαίνουμε σε διαφορετικές ενέργειες.
Operator Description
== equal to
!= not equal
> reater than
< less than
>= greater than or equal to
<= less than or equal toΗ εντολή if
Η εντολή if είναι μια δομή επιλογής - conditional υπό όρους στη JavaScript.
Οι δομές επιλογές είναι ευκόλως κατανοητές αφού έχουν το ίδιο νόημα στη JavaScript με αυτό που έχουν στις φυσικές γλώσσες.
Στην πραγματικότητα λένε: "Αν κάτι είναι αληθές, κάνε τα εξής"
if (expression) {
//this code runs if expression evaluates to true
}Παράδειγμα
Ο παρακάτω κώδικας είναι ένας συνδυασμός της εντολής if με έναν τελεστή.
Αυτό που κάνει είναι ότι παίρνει την τιμή που εισάγει ο χρήστης στο αναδυόμενο παράθυρο prompt , τη μεταβιβάζει στη μεταβλητή-variable myNum και ελέγχει αν αυτός ο αριθμός είναι μικρότερος από 5. Εάν αυτό είναι αληθές, σαν να ήταν ο αριθμός μας 4, τότε πηγαίνει και γράφει αυτό που έχουμε ορίσει στο έγγραφο.
Παρατηρήστε τη σύνταξη: η έκφραση βρίσκεται μέσα στην "παρένθεση "()", και το μπλοκ κώδικα που θέλετε να εκτελέσετε όταν ο έλεγχος έχει αληθές αποτέλεσμα περιβάλλεται από "άγγιστρα" "{}"
<!DOCTYPE html>
<html lang="en">
<head>
<title>The if statement </title>
</head>
<body>
<h3> The if statement</h3>
<script>
var a = 5;
var myNum;
myNum = prompt("Write a number?");
if (myNum < a) {
document.write("You wrote the number " + myNum + ". This number is less than " + a +".")
}
</script>
</body>
</html>Exercise
- Ανοίξτε τον επεξεργαστή κώδικα, δημιουργήστε ένα νέο αρχείο και αποθηκεύστε το ως
exersice07.2.0if.htmlστον φάκελο "Exercises". - Αντιγράψτε τον παραπάνω κώδικα και επικολλήστε τον στο νέο αρχείο.
- Αποθηκεύστε το αρχείο και προεπισκοπήστε το στον επεξεργαστή ή στο πρόγραμμα περιήγησής σας.
- Ελέγξτε τον κώδικα εισάγοντας τους αριθμούς 4,5,6 στο παράθυρο prompt. Τι παρατηρείτε;
Η εντολή else
Αλλιώς- Else είναι μια ακόμα δομή επιλογής που χρησιμοποιείται μετά από μια εντολή if.
Αυτό που λέει στην πραγματικότητα είναι "Αν κάτι είναι αληθινό, πηγαίνετε και κάνετε αυτό, αλλιώς κάνετε κάτι άλλο".
if (expression){
//this code runs if expression evaluates to true
}else{
//this code runs if expression evaluates to false
}Παράδειγμα
Η if else χρησιμοποιείται όταν θέλουμε να κάνουμε μόνο μία δοκιμή. Για παράδειγμα, εδώ δοκιμάζουμε μόνο αν η είσοδός μας είναι μικρότερη από 5.
<!DOCTYPE html>
<html lang="en">
<head>
<title>The if else statement </title>
</head>
<body>
<h3> The if else statement</h3>
<script>
var a = 5;
var myNum;
myNum = prompt("Write a number?");
if (myNum < a) {
document.write("You wrote the number " + myNum + ". This number is less than " + a +".")
} else {
document.write("You wrote the number " + myNum + ". This number is greater than " + a +".")
}
</script>
</body>
</html>Exercise
- Ανοίξτε τον επεξεργαστή κώδικα, δημιουργήστε ένα νέο αρχείο και αποθηκεύστε το ως
exersice07.2.03ifelse.htmlστον φάκελο "Exercises". - Αντιγράψτε τον παραπάνω κώδικα και επικολλήστε τον στο νέο αρχείο.
- Αποθηκεύστε το αρχείο και προεπισκοπήστε το στον επεξεργαστή ή στο πρόγραμμα περιήγησής σας..
- Ελέγξτε τον κώδικα εισάγοντας τους αριθμούς 4,5,6 στο παράθυρο prompt. Τι παρατηρείτε?
Η εντολή else if
Η εντολή else if είναι μια άλλη δομή επιλογής. Αυτή χρησιμοποιείται όταν θέλουμε να κάνουμε περισσότερους από έναν ελέγχους.
Όπως αναμένετε, η εντολή else if είναι πάντα μετά από μια εντολή if.
Μπορείτε να χρησιμοποιήσετε όσες else if χρειάζεστε.
if (expression){
//this code runs if expression evaluates to true
}else if (expression2){
//this code runs if expression2 evaluates to true
}else{
//this code runs if neither are true
}Παράδειγμα
Σε αυτό το παράδειγμα, λέμε: "Εάν ο αριθμός μας είναι μικρότερος από 5 κάνε κάτι, αλλιώς αν είναι ίσο με 5, κάνε κάτι άλλο. Αλλιώς, αν κανένα από τα παραπάνω δεν είναι αληθές, κάνε κάτι διαφορετκό.
<!DOCTYPE html>
<html lang="en">
<head>
<title>The if else if statement </title>
</head>
<body>
<h3> The if else if statement</h3>
<script>
var a = 5;
var myNum;
myNum = prompt("Write a number?");
if (myNum < a) {
document.write("You wrote the number " + myNum + ". This number is less than " + a +".")
} else if (myNum == a) {
document.write("You wrote the number " + myNum + ". This number is equal to " + a +".")
} else {
document.write("You wrote the number " + myNum + ". This number is greater than " + a +".")
}
</script>
</body>
</html>Άσκηση
- Ανοίξτε τον επεξεργαστή κώδικα, δημιουργήστε ένα νέο αρχείο και αποθηκεύστε το ως
exersice07.2.04ifelseif.htmlστον φάκελο "Exercises". - Αντιγράψτε τον παραπάνω κώδικα και επικολλήστε τον στο νέο αρχείο.
- Αποθηκεύστε το αρχείο και προεπισκοπήστε το στον επεξεργαστή ή στο πρόγραμμα περιήγησής σας.
- Ελέγξτε τον κώδικα εισάγοντας τους αριθμούς 4,5,6 στο παράθυρο prompt. Τι παρατηρείτε?
Λογικοί τελεστές
Οι λογικοί τελεστές χρησιμοποιούνται συνήθως μαζί με λογικές τιμές (true / false).
Οι τελεστές είναι πολύ χρήσιμοι όταν θέλουμε να κάνουμε κάτι με βάση την τιμή περισσότερων από μιας μεταβλητών.
Στο παρακάτω παράδειγμα, έχουμε τις μεταβλητές x και y οι οποίες είναι 6 και 3 αντίστοιχα. Το πρώτο console.log είναι:
console.log( (x < 5 && y > 2) );Ο χρησιμοποιούμενος && - and τελςστής λέει ότι αυτό θα ισχύει μόνο και αν ισχύουν και οι δύο ανισότητες 6 <3 και 3> 2. Αλλιώς, αν δεν ισχύει καμία ή μόνο μία από αυτές, επιστρέφει τιμή "Ψευδής".
Εάν αντί για && χρησιμοποιήσαμε τον τελεστή || - or, τότε sτο console.log θα εξάγεται αληθές αν μία από αυτές τις εκφράσεις είναι αληθής ακόμα κι αν η άλλη έκφραση είναι ψευδής.
Τέλος, ο τελεστής ! -not επιστρέφει "αληθές" αν η έκφρασή μας είναι ψευδής. Στην περίπτωση 6 <3, αν χρησιμοποιούμε το! θα έχουμε:! 6 <3. Αυτό στην πραγματικότητα λέει: Εάν το 6 δεν είναι μικρότερο από 3 τότε επίστρεψε true.
Operator Description
&& logical and : returns true if both operands are true
|| logical or : returns true if either operand is true
! logical not : returns false if its single operand can be converted to true; otherwise, returns true.Παράδειγμα
<!DOCTYPE html>
<html lang="en">
<head>
<title>Logical operators </title>
</head>
<body>
<h3> Logical operators </h3>
<script>
var x = 6;
var y = 3;
console.log( (x < 5 && y > 2) );
console.log( (x < 5 || y > 2) );
console.log( !(x < 5 || y > 2) );
</script>
</body>
</html>Άσκηση
- Ανοίξτε τον επεξεργαστή κώδικα, δημιουργήστε ένα νέο αρχείο και αποθηκεύστε το ως
exersice07.2.05logical.htmlστον φάκελο "Exercises". - Αντιγράψτε τον παραπάνω κώδικα και επικολλήστε τον στο νέο αρχείο.
- Αποθηκεύστε το αρχείο και προεπισκοπήστε το στην console.
- Πειραματιστείτε προσθέτοντας νέες εκφράσεις.