Print bookPrint book

Υποενότητα 7.3: Εφαρμογές των δομών επιλογής

Site: ΕΛ/ΛΑΚ Moodle
Course: Σχεδιασμός WEB και Παραγωγή Ψηφιακού Περιεχομένου
Book: Υποενότητα 7.3: Εφαρμογές των δομών επιλογής
Printed by: Guest user
Date: Sunday, 24 November 2024, 12:14 AM

Description

  • Confirm interaction
  • Εμφωλευμένες δομές επιλογές
  • Μετατροπέας θερμοκρασίας

Table of contents

Η confirm interaction

confirm είναι μια μέθοδος JavaScript που εμφανίζει ένα πλαίσιο μηνύματος μαζί με ένα κουμπί OK και και ένα  Cancel.

Confirm interaction

Όταν ο χρήστης κάνει κλικ Ok η JavaScript επιστρέφει true, ενώ αν κάνει κλικ στην επιλογή Cancel επιστρέφει  false.

Έτσι, αυτή η έτοιμη μέθοδος μας δίνει τη δυνατότητα να ενεργοποιήσουμε διαφορετικές ενέργειες με βάση την επιλογή του χρήστη. 

Στον παρακάτω κώδικα η λογική είναι: Έχουμε μια μεταβλητή που περιέχει τη μέθοδο confirm. Σύμφωνα με την είσοδο του χρήστη, αν αυτή η μεταβλητή γίνει  true, ακολουθεί μια δέσμη ενεργειών, αλλιώς ακολουθεί μια άλλη.

Παρατηρήστε ότι εδώ χρησιμοποιούμε τη σύνταξη if (likeBananas). Αυτή είναι ισοδύναμο με τη if (likeBananas==true)

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>The confirm interaction </title>
  </head>
  <body>
    <h3> The confirm interaction</h3>
    <script>
          var likeBananas;
          /*We're using confirm() to prompt the user for a boolean value*/
          likeBananas = confirm("Do you like bananas? ([OK] for yes, [Cancel] for no)");
          /*On next line we check the value and ... */
          if (likeBananas) {
                  /*on next line write some output if the value was true*/
                  document.write("You like Bananas!")
          } else {
                  /*on next line write some output if the value was false*/
                  document.write("You don't like babanas!")
          }
          /*The code outside the curly braces of the if else statement will always run.*/
          console.log ("Whether or not you had bananas, have a good day!");
    </script>
  </body>
</html>

Άσκηση

  1. Ανοίξτε τον επεξεργαστή κώδικα, δημιουργήστε ένα νέο αρχείο και αποθηκεύστε το ως exersice07.3.01.html στον φάκελο "Exercises".
  2. Αντιγράψτε τον παραπάνω κώδικα και επικολλήστε τον στο νέο αρχείο.
  3. Αποθηκεύστε το αρχείο. Πειραματιστείτε με την αλλαγή των τιμών των μεταβλητών.

Εμφωλευμένες δομές επιλογής

Οι εμφωλευμένες δομές επιλογής είναι δομές επιλογής που περικλείονται μέσα σε άλλες.

if (expression1){
    /*this code runs if expression1 evaluates to true*/
    if (expression2){
        /*this code only runs if both expression1 and expression2 evaluate to true*/
    }
} else {
    /*this code runs if neither are true*/
}
Παράδειγμα

Στο παρακάτω παράδειγμα, εμφωλεύουμε δομή επιλογής σε άλλη για να ζητήσουμε περισσότερες πληροφορίες από τον χρήστη.

Η λογική του παρακάτω κώδικα είναι: αν στον χρήστη αρέσουν οι μπανάνες τότε εμφανίζεται ένα μήνυμα, αλλιώς ρωτιέται για το αγαπημένο του φρούτο. Αν ο χρήστης προτιμά τα μήλα τότε εμφανίζεται κατάλληλο μήνυμα, αλλιώς αν δεν του αρέσουν οι μπανάνες και προτιμά άλλα φρούτα από τα μήλα, εμφανίζεται διαφορετικό μήνυμα. 

<!DOCTYPE html>
<html lang="en">
  <head>
     <title>Nested contitionals </title>
  </head>
   <body>
     <h3> Nested contitionals</h3>
     <script>
         var likeBananas;
         var favoritFruit;
         likeBananas = confirm("Do you like bananas? ([OK] for yes, [Cancel] for no)");
         if (likeBananas) {
                 document.write("You like Bananas!")
         } else {
                 favoritFruit = prompt("What is your favorite fruit")
 
                 if (favoritFruit == "apples") {
                         document.write("You like apples! Me too!")
                 }else {
                         document.write("You like " + favoritFruit + "! I prefer apples!")
                 }
 
         }
         console.log ("All fruits are good!");
     </script>
   </body>
</html>

Exercise

  1. Ανοίξτε τον επεξεργαστή κώδικα, δημιουργήστε ένα νέο αρχείο και αποθηκεύστε το ως exersice07.3.02.html στον φάκελο "Exercises".
  2. Αντιγράψτε τον παραπάνω κώδικα και επικολλήστε τον στο νέο αρχείο.
  3. Αποθηκεύστε το αρχείο. Πειραματιστείτε με την αλλαγή των τιμών των μεταβλητών.

Μετατροπέας θερμοκρασίας

Άσκηση

  1. Ανοίξτε τον επεξεργαστή κώδικα, δημιουργήστε ένα νέο αρχείο και αποθηκεύστε το ως exersice07.3.03.html στον φάκελο "Exercises".
  2. Αντιγράψτε τον ακόλουθο κώδικα και επικολλήστε τον στο νέο αρχείο.
  3. Επεξεργαστείτε το αρχείο. Στον browser θα πρέπει να εμφανίζεται η επόμενη εικόνα:

Temperature converter

Κώδικας:

Λύση:

var convertFtoC = document.getElementById("degF");
convertFtoC.onchange = function(){ /*onchange means that every time the value in the input box changes, 
    this function will run*/
    var degreesF = document.getElementById("degF").value; /* this is the value from the form field*/
    if (isNaN(degreesF)) { /* Here we check if the input is a number*/
        document.getElementById("degCOut").innerHTML = "I can't convert to" 
    } else {
        var degreesC = (degreesF-32)*(5/9); /* you will set this to the results of your conversion*/
        document.getElementById("degCOut").innerHTML = degreesC;
    }
}