Napiszcie pętlę for, która wypisze liczby parzyste od 2 do 10.
W pętli while zapomnieliście i++ w ciele pętli. Co się stanie?
Skąd wiecie, kiedy sięgnąć po for, a kiedy po while?
Część 1 · Powtórka
Cztery narzędzia sterujące: mapa tematu
if / else(lekcja 07) jedna decyzja - albo prawda, albo fałsz, jedna z dwóch gałęzi
switch(lekcja 08) wiele gałęzi case dla jednej zmiennej naraz
for / while(lekcja 09) powtarzaj, dopóki warunek prawdziwy - sprawdzany PRZED ciałem
do...while (dziś) powtarzaj, warunek sprawdzany PO ciele - minimum jeden raz
Część 2 · Pętla do...while
do...while - warunek na wyjściu
W for i while warunek stoi PRZED ciałem - może się nigdy nie wykonać. W do...while ciało stoi NAD warunkiem: „najpierw robi, potem pyta”. Warunek sprawdzany jest dopiero na końcu, więc ciało wykona się co najmniej raz.
let i = 1;
do {
console.log(`5 x ${i} = ${5 * i}`);
i++;
} while (i <= 10);
MDN: Learn_web_development/Core/Scripting/Loops (sekcja „do...while”: „the code inside a do...while loop is always executed at least once. That's because the condition comes after the code inside the loop”)
Część 3 · do...while a while
Różnica dokładnie tu: warunek fałszywy od razu
while - warunek fałszywy od startu
let i = 100;
while (i <= 10) {
console.log(i);
i++;
}
// nic się nie wypisze
do...while - ten sam warunek
let j = 100;
do {
console.log(j);
j++;
} while (j <= 10);
// wypisze raz: 100
Ten sam warunek i <= 10, ten sam start 100. while nie wykona ciała ani razu - warunek jest fałszywy od razu. do...while wykona ciało raz, bo sprawdza warunek dopiero PO wykonaniu. To jedyna różnica między tymi pętlami.
MDN: Learn_web_development/Core/Scripting/Loops (do...while zawsze co najmniej raz)
Część 4 · break
break - awaryjne wyjście z pętli
const numbers = [4, 9, 15, 22, 30, 7];
let firstEven;
for (let i = 0; i < numbers.length; i++) {
if (numbers[i] % 2 === 0) {
firstEven = numbers[i];
break;
}
}
console.log(`Pierwsza parzysta: ${firstEven}`);
MDN: Learn_web_development/Core/Scripting/Loops (sekcja „Exiting loops with break”: „a break statement will immediately exit the loop and make the browser move on to any code that follows it”)
Część 5 · continue
continue - pomijamy jeden przebieg
for (let i = 1; i <= 10; i++) {
if (i % 2 === 0) {
continue;
}
console.log(i);
}
// wypisuje tylko liczby nieparzyste: 1 3 5 7 9
Ciekawostka z MDN: continue nie zadziała, jeśli schowacie je do osobnej funkcji zapisanej w środku pętli, nawet gdy ta funkcja fizycznie leży w ciele pętli. continue nie potrafi „przeskoczyć” przez granicę funkcji, musi stać bezpośrednio w pętli - inaczej JavaScript zgłasza błąd składni.
MDN: Learn_web_development/Core/Scripting/Loops (sekcja „Skipping iterations with continue”: „instead of breaking out of the loop entirely, it skips to the next iteration of the loop”) · ciekawostka: MDN, Statements/continue, sekcja Description: „A continue statement, with or without a following label, cannot be used at the top level of a script, module, function's body, or static initialization block, even when the function or class is further contained within a loop.” · developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/continue
Egzamin EE.09 / E.14
Tak pytają na egzaminie
1. Dany jest kod w języku JavaScript:
var x=1, i=0;
do{ x*=3; i++; } while(x!=27);
Pętla zostanie wykonana
2 razy.
3 razy.
26 razy.
27 razy.
2. Która odpowiedź poprawnie opisuje działanie funkcji?
function readName(){
var name=null;
do{
name=prompt("podaj imie: ");
if(name.length<3) alert("wprowadzony tekst jest niepoprawny");
}while(name.length<3);
}
Pętla wykona się tylko raz.
Funkcja posiada pętlę powtarzającą się 3 razy.
Tekst będzie wczytywany do momentu podania liczby większej niż 3.
Wczytywanie tekstu zakończy się, gdy tekst będzie się składał przynajmniej z 3 znaków.
CKE, E.14, styczeń 2018, zadanie 37 · CKE, E.14, wrzesień 2014, zadanie 36 (bank pytań, przedmiot strony, temat javascript)
Ćwiczenie przy komputerze · 20 minut
Ćwiczenie: do...while i break
Otwórz script.js z poprzednich lekcji (w folderze swojego projektu).
Napisz pętlę do...while, która pyta prompt("Podaj liczbę:") o liczbę, aż użytkownik poda liczbę większą od 0 (pamiętaj: prompt() zwraca tekst - zamień na liczbę przez Number(...)).
Pod spodem dodaj tablicę liczb (co najmniej 6 elementów) i pętlę for, która za pomocą break zatrzymuje się na pierwszym elemencie większym niż 10; wypisz go w konsoli.
Sprawdź w konsoli (F12 → Console), że do...while pyta ponownie po błędnej odpowiedzi, a break zatrzymuje pętlę na pierwszym trafieniu.
Dla chętnych w domu: zmień tablicę tak, żeby żaden element nie był większy od 10, i sprawdź, co wypisze konsola.
Na koniec
Sprawdź się
Czym różni się do...while od while, gdy warunek jest fałszywy od samego początku?
Co robi break w pętli, a co continue?
Macie pętlę for szukającą liczby w tablicy. Jak zatrzymać ją, gdy już znajdziecie szukaną wartość?
Na następnej lekcji: tablice w JavaScript.
Poza szkołą
A jak to wygląda w produkcji?
Na lekcji
W produkcji
Status
for z break szukające pierwszego dopasowania w tablicy
Array.prototype.find() zwraca pierwszy pasujący element w jednej linii, bez ręcznego licznika i break.
zastępowane
do...while
Rzadko w kodzie produkcyjnym - warunek na końcu łatwo przeoczyć, większość zespołów woli while z flagą albo pętlę z break.
unikane
continue pomijające przebieg
ESLint, reguła no-continue: „makes code less testable, less readable and less maintainable” - poleca odwrócony if zamiast.