Υποενότητα 8.2: Επαναληπτικές δομές

Site: ΕΛ/ΛΑΚ Moodle
Course: Σχεδιασμός WEB και Παραγωγή Ψηφιακού Περιεχομένου
Book: Υποενότητα 8.2: Επαναληπτικές δομές
Printed by: Guest user
Date: Tuesday, 23 April 2024, 2:31 PM

Description

  • επαναληπτική δομή «για» - for loop
  • επαναληπτική δομή «όσο» - while loop

Table of contents

for loop

Ο βρόχος "για" - For loop είναι το πιο συνηθισμένο looping στη JavaScript. Συνήθως, τον χρησιμοποιούμε όταν γνωρίζουμε τον αριθμό των επαναλήψεων που χρειαζόμαστε: έναν σταθερό αριθμό ή το μήκος μιας δομής δεδομένων.

Ο βρόχος "για" έχει την ακόλουθη σύνταξη:

for (initial expression; test to run; increment) {
code block to be executed
}
Παράδειγμα 1
/*let's count from 1 to 5*/
for (var index = 1; index <= 5; index++){
console.log(index);
}

Σε αυτό το παράδειγμα, ορίσαμε τις τρεις εκφράσεις στον βρόχο for.

  • η αρχική έκφραση - initial expression: αυτή εκτελείται μία φορά πριν τρέξει ο  βρόχος και τυπικά ορίζει την αρχική συνθήκη για τον μετρητή: στην περίπτωση αυτή, ο δείκτης είναι ίσος με 1
  • ο έλεγχος πριν από κάθε επανάληψη: αν το αποτέλεσμα του ελέγχου είναι αληθές, ο βρόχος θα συνεχίσει
  • εκτελείται μετά από κάθε επανάληψη του βρόχου. Σε αυτή την περίπτωση, έχουμε αύξηση του δείκτη στην επόμενη τιμή.

Tip: Αντιγράψτε το παραπάνω κομμάτι κώδικα και επικολλήστε το απευθείας στην κονσόλα, για να δείτε πώς λειτουργεί.

Παράδειγμα 2

Σε αυτό το παράδειγμα, δημιουργούμε μια λίστα από χρώματα και χρησιμοποιούμε τον βρόχο για να διατρέξουμε τη λίστα  και να εξάγουμε τα στοιχεία της στην κονσόλα.

/* remember that arrays start at zero
so we will loop from 0 to the length of the array*/
var color = ["red", "green", "blue"];
for (var i = 0; i < color.length; i++){
console.log(color[i]);
}

Tip: Αντιγράψτε το παραπάνω κομμάτι κώδικα και επικολλήστε το απευθείας στην κονσόλα, για να δείτε πώς λειτουργεί.

Περισσότερες πληροφορίες: https://www.w3schools.com/js/js_loop_for.asp

Άσκηση

¨Δημιουργήστε μια επαναληπτική δομή "για" στους ακεραίους από το 1 έως το 100 και γράψτε στην κονσόλα καθένα από τους περιττούς αριθμούς.

Λύση:

for(var j = 0; j < 100; j++ ){
  if (j % 2 == 1){
      console.log(j)
  };
};

while loop

Χρησιμοποιούμε τον βρόχο "όσο" - while loop όταν δεν ξέρουμε πόσες φορές θέλουμε να τρέξει.

Ο βρόχος while έχει την ακόλουθη σύνταξη:

while (condition) {
code block to be executed
}

Ο while loop, εκετελείται όσο ο έλεγχος -  condition είναι true.

Παράδειγμα 1
/* add consectuive integers until we get to 100*/
var i = 0, sum = 0;
while(sum <= 100){
    /*here we increment i, then add it to sum*/
    i = i + 1;
    sum = sum + i;
}
/*the loop exits when sum reaches or exceeds 100*/
console.log("We added up to "+i+" to get to 100");

Αυτό το παράδειγμα χρησιμοποιεί έναν βρόχο while για να προσθέσει διαδοχικούς ακέραιους αριθμούς έως ότου το άθροισμα εξισωθεί ή υπερβεί το 100. Όσο ο έλεγχος έχει αληθές αποτέλεσμα αυξάνεται η μεταβλητή  i κατά 1 και προστίθεται στο άθροισμα. Ο βρόχος while λειτουργεί καλά εδώ, αφού δεν γνωρίζουμε πόσες φορές θα τρέπει να τρέξει ο βρόχος.

Tip: Αντιγράψτε το παραπάνω κομμάτι κώδικα και επικολλήστε το απευθείας στην κονσόλα, για να δείτε πώς λειτουργεί.

Παράδειγμα 2

Η μέθοδος  string.indexOf("e", x) μας δίνει τη θέση του πρώτου "e" στη συμβολοσειρά -  string αρχίζοντας την αναζήτηση από τη θέση x.

Η μέθοδος επιστρέφει -1 όταν δεν υπάρχει το επιζητούμενο στοιχείο.

/*we're going to count the 'e' characters in a string s:*/
var s = "everything is gonna be ok!";
/* let's suppose that 'e' doesn't exist. */
var count = 0, position = -1; finished = false;
while (!finished){
  /* We use the "position+1" to continue searching for 'e' from where we were left*/
  position = s.indexOf('e', position+1);
  console.log(position);
  if (position != -1){ /*'e' is found*/
    count++;
  }
  else {
    finished = true; /*'e' is not found, so finished becomes true*/
  }
}
console.log("there are "+count+" 'e's in the string" );

Tip: Αντιγράψτε το παραπάνω κομμάτι κώδικα και επικολλήστε το απευθείας στην κονσόλα, για να δείτε πώς λειτουργεί.

Περισσότερες πληροφορίες: https://www.w3schools.com/js/js_loop_while.asp

Άσκηση

Προσθέσε διαδχικούς περιττούς αιθμούς μέχρι το άθροισμα τους να εξισωθεί ή υπερβεί το 1000. Ποιος είναι ο τελευταίος αριθμος που προστέθηκε;

Λύση:

var j = 0;
var sum = 0;
while (sum < 1000) {
  j = j + 1;
  if (j % 2 == 1){
      sum = sum + j;
  };
};
console.log(j)