Προγραμματισμός με βρόχους

Μαθησιακοί Στόχοι

• Ακολουθιακή Εκτέλεση
• Βρόχοι
• Προϋποθέσεις τερματισμού
• Εντολές αποφάσεων

Βήμα 1: Δύο κουκουβάγιες

Συνεχίστε με https://hourofcode.com/vidcard. Διαγράψτε κάθε εργασία που μπορεί να έχετε και ξεκινήστε με αυτόν τον κώδικα:

var owl = graphic("crazyowl.png")
owl.scale = 0.5
owl.x = 100
owl.y = 0

Τώρα βάλτε μια δεύτερη κουκουβάγια στα δεξιά.

1. Ονομάστε τη owl2
2. Ορίστε το owl2.x σε 200.

Βήμα 2: Τέσσερις κουκουβάγιες

Τώρα φτιάξτε τέσσερις κουκουβάγιες.

Βήμα 3: Κουκουβάγιες με φιόγκο

• Εντάξει, αυτό ήταν κουραστικό. Να ένας πολύ καλύτερος τρόπος. Διαγράψτε τα πάντα και αντιγράψτε αυτόν τον κώδικα:

  var n = 100
  while (n <= 300)
  {
    var owl = graphic("crazyowl.png")
    owl.scale = 0.5
    owl.x = n
    owl.y = 0
    n = n + 100
  }
  

• Πόσες κουκουβάγιες βλέπετε;
• Πώς μπορείς να έχεις τέσσερις κουκουβάγιες;
• Πέντε κουκουβάγιες;
• Έξι κουκουβάγιες; (Συμβουλή: Ξεκινήστε νωρίτερα.)
• Γιατί λέγεται while;
• Γιατί είναι ένας «βρόχος»;

Βήμα 4: Ακόμη περισσότερες κουκουβάγιες

• Δεν φαίνεται να υπάρχει χώρος για περισσότερες από έξι κουκουβάγιες. Εκτός...αν πλησιάσουν πιο κοντά.
• 
• Πώς μπορείς να το κάνεις αυτό;
• Μπορούν να πλησιάσουν ακόμη πιο κοντά;
• Προσπαθήστε λοιπόν να τις κάνετε μικρότερες.

Βήμα 5: Κουκουβάγιες και ένα ζωύφιο

• Κουκουβάγιες, κουκουβάγιες, κουκουβάγιες. Αυτό γίνεται βαρετό. Τι θα λέγατε για ένα ζωύφιο αντί για μια κουκουβάγια στην αρχή;



Χρειάζεστε μια διαφορετική δομή για αυτό:

var n = 100
while (n <= 600)
{
  if (type == 1)
  {
    var bug = graphic("ladybug.png")
    bug.scale = 0.5
    bug.x = n
    bug.y = 0
  }
  else
  {
    var owl = graphic("crazyowl.png")
    owl.scale = 0.5
    owl.x = n
    owl.y = 0
  }
  n = n + 100
}

• Τώρα λαμβάνετε ένα σφάλμα όταν η μεταβλητή type είναι 1. Διαφορετικά μια κουκουβάγια.

• Δεν πρόκειται να λειτουργήσει. Δεν έχουμε δηλώσει την μεταβλητή type.

  Προσθέστε αυτήν τη γραμμή στην κορυφή:

  var type = 1

• Τι συμβαίνει;
• Πώς αποκτάς ξανά κουκουβάγιες; Αναθέστε στη μεταβλητή type το 2 για να ζωγραφιστεί ένα ζωύφιο.

Βήμα 6: Εναλλάξ κουκουβάγιες και ζωύφια

Γίνεται δύσκολο. Μπορείτε να αναθέσετε

type = 2

και

type = 1

στα σωστά σημεία ώστε να αλλάζει η μεταβλητή type κάθε φορά σε: 1 2 1 2 1 2 ...;

Βήμα 7: Κάθετες κουκουβάγιες

πιστροφή στις κουκουβάγιες. Σβήσε τα πάντα. Αντιγράψτε τον κώδικα από το Βήμα 4, αλλά τώρα τακτοποιήστε τις κουκουβάγιες κάθετα:

Βήμα 8: Διαγώνιες κουκουβάγιες

και διαγώνια;

Βήμα 9: Κουκουβάγιες σε δύο σειρές

Συμβουλή: Αντιγράψτε ξανά τον κώδικα από το Βήμα 4. Αντιγράψτε τον άλλη μια φορά για να έχετε δύο σειρές. Δυστυχώς τη μία πάνω στην άλλη. Διορθώστε την y στον δεύτερο βρόχο.

Βήμα 10: Πολλές σειρές από κουκουβάγιες

Για τέσσερις σειρές, μπορείτε να αντιγράψετε ξανά και ξανά. Αλλά γιατί να αντιγράψετε όταν έχετε βρόχους; Εδώ είναι ένας βρόχος που κάνει πολλές σειρές. Κάθε σειρά είναι ένας άλλος βρόχος. Ένας εμφωλιασμένος βρόχος!

var m = 0
var n = 0
while (m <= 400)
{
  while (n <= 600)
  {
    var owl = graphic("crazyowl.png")
    owl.scale = 0.5
    owl.x = n
    owl.y = m
    n = n + 100
  }
  n = 0
  m = m + 100
}

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

Βήμα 11: Κουκουβάγιες και σφάλματα σκακιέρας

Βήμα 12: Αναπνεύστε βαθιά και χαλαρώστε

Αυτή ήταν μια γρήγορη εισαγωγή στον προγραμματισμό με βρόχους. Είναι ωραίο που μπορεί κανείς να εξερευνήσει τους βρόχους τόσο όμορφα με την JavaScript.

Τι μάθαμε;

• Ένας βρόχος επαναλαμβάνει τα βήματα που περιέχονται σ' αυτόν.
• Μπορείτε να ελέγξετε πόσες φορές εκτελείται ένας βρόχος.
• Ο προγραμματισμός βρόχων είναι δύσκολος
• Πρέπει να είστε σε θέση να προβλέψετε πολλά βήματα που εκτελούνται γρήγορα
• Σκεφτείτε πρώτα
• Μετά γράψε τον κώδικα
• Στη συνέχεια, εκτελέστε τον κώδικα
• Δούλεψε; Αν όχι, σκεφτείτε και προσπαθήστε ξανά
• Όταν όλα λειτουργούν, δεν είναι υπέροχο να είσαι ο βασιλιάς του κόσμου σου;