Cześć!

(naciśnij spację, żeby kontynuować)

Pętle i tablice

Grafika zapożyczona z serwisu 3dno.pl

Pętle

W dzisiejszym ćwiczeniu poznamy pętle.

Pętle, podobnie jak instrukcja warunkowa "if", należą do podstawowych konstrukcji w językach programowania.

Pętle pozwalają na wykonanie danej czynności kilka razy (bez potrzeby kopiowania i wklejania kodu)

Przykład?

Wyobraźmy sobie, że mamy plik 200 kartek do skserowania na starej, biurowej maszynie, która obsłuży tylko jedną stronę naraz.

Grafika zapożyczona z serwisu kaizenprint.co.uk

Przykład

Chętnie zlecilibyśmy to zadanie praktykantowi, bo mamy ciekawsze rzeczy do roboty.

Zakładając, że praktykant nigdy nie widział wcześniej ksero na oczy i zrobi tylko to, o co go wyraźnie poprosimy na piśmie, jak możemy przekazać mu co jest do zrobienia?

Zróbmy to ćwiczenie razem

Pewnie wyszło nam coś takiego:


1. Otwórz wieko kserokopiarki.
2. Weź pierwszą kartkę ze stosu.
3. Włóż kartkę do kserokopiarki zadrukowaną stroną do dołu.
4. Zamknij wieko.
5. Naciśnij przycisk kopiowania.
6. Otwórz wieko
7. Wyjmij kartkę z kserokopiarki i odłóż ją na stertę obok
   (zadrukowaną stroną do dołu)
8. Weź drugą kartkę ze stosu.
9. Włóż kartkę do kserokopiarki zadrukowaną stroną do dołu.
10. (...)

Nie chcemy chyba rozpisywać szczegółowych instrukcji dla każdej kartki z osobna?

Spróbujmy to usprawnić!

Widzimy, że sporo instrukcji się powtarza. Możemy połączyć te instrukcje we wspólny blok i udzielić instrukcji ile razy go trzeba wykonać.

Jak zapiszemy instrukcje dla naszego praktykanta?


1. Otwórz wieko kserokopiarki.
2. Weź pierwszą kartkę ze stosu.
3. Włóż kartkę do kserokopiarki zadrukowaną stroną do dołu.
4. Zamknij wieko.
5. Naciśnij przycisk kopiowania.
6. Powtórz dla kartek o numerach od 2 do 200:
    6.1. Otwórz wieko
    6.2. Wyjmij kartkę z kserokopiarki i odłóż ją na stertę obok
         (zadrukowaną stroną do dołu)
    6.3. Weź kartkę o aktualnym numerze ze stosu.
    6.4. Włóż kartkę do kserokopiarki zadrukowaną stroną do dołu.
    6.5. Zamknij wieko
    6.6. Naciśnij przycisk kopiowania
7. (Kiedy zrobimy to wszystko dla dwusetnej kartki)
   Otwórz wieko kserokopiarki
8. Wyjmij kartkę z kserokopiarki i odłóż ją na stertę obok
   (zadrukowaną stroną do dołu)
9. Wyjmij plik skserowanych kartek z szuflady na dole kserokopiarki.
10. Zabierz oba stosy kartek i przynieś do mojego biura.

Instrukcja 6. w naszym schemacie to właśnie pętla

Składają się nam na nią cztery elementy:

  • Warunki początkowe - od czego zaczynamy. Nasza pętla w przykładzie powyżej zaczyna się od drugiej kartki.
  • Warunek trwania pętli - kiedy mamy przestać. Tutaj kończymy kserować po dwusetnej kartce.
  • Instrukcje do wykonania w pętli - wszystko co jest zawarte podpunktach 6.x.
  • Instrukcja przejścia do następnego kroku. Tutaj za każdym razem kiedy wykonamy instrukcje pętli, zwiększamy numer aktualnej kartki o jeden. Gdyby z jakiegoś powodu trzeba było skserować tylko nieparzyste strony, zwiększałybyśmy ten numer o 2.

Jakieś pytania?

Jeżeli rozumiemy już jak działają pętle, możemy przejść dalej.

Ale...

Żeby nasze ćwiczenie miało sens, najpierw musimy się dowiedzieć trochę o tablicach.

Tablice

Tablice to po prostu zmienne, które mogą przechowywać wiele wartości.

Zmienna

Jak pamiętamy z naszego warsztatu, zmienna to taki schowek, do którego możemy włożyć jakąś wartość.

Grafika z serwisu lernpfadprismen.wordpress.com

Tablica

Więc tablica to taki zbiór schowków, z numerkami. Do każdego z nich też można włożyć jakąś wartość.

Grafika z serwisu maxpixel.freegreatpicture.com

Po co to?

Żeby w ładny sposób przechowywać wiele podobnych danych

Przykład: Jeżeli mamy 10 użytkowników na stronie, to znacznie łatwiej przechować ich imiona w jednej tablicy niż w 10 oddzielnych zmiennych.

Jak to wygląda?

Przypomnijmy sobie najpierw jak definiujemy zmienne:

var name = "Kasia";

A tak wygląda tablica:

var names = ["Kasia", "Basia", "Asia"];

Lub tak:

var names = [
  "Kasia",
  "Basia",
  "Asia"
];

Jak odczytać wartość z tablicy?

Żeby odczytać wartość zmiennej wystarczy użyć jej nazwy. Na przykład, tak wypiszemy w konsoli pozdrowienia dla osoby ktorej imię zapisaliśmy w `name`;

console.log( "Hej " + name + "!" );

Podobnie, żeby odczytać element z tablicy, potrzebujemy użyć jej nazwy i numeru elementu:

console.log( "Hej " + names[1] + "!" );

Uwaga! Dziwne numerowanie ;)

W tablicach zaczynamy numerować od wartości 0:

var names = [
  "Kasia", // To jest wartość o numerze 0
  "Basia", // To jest wartość o numerze 1
  "Asia"   // To jest wartość o numerze 2
];

Do maszyn!

Zdjęcie w domenie publicznej. Autorem jest Tech. Sgt. Keith Brown

Spróbujcie utworzyć tablicę w konsoli

  • Otwórzcie przeglądarkę Chrome
  • Otwórzcie narzędzia programistyczne
    (F12 lub Cmd+Opt+I)
  • Zobaczcie, czy możecie utworzyć tablicę names jak z poprzednich slajdów, ale z 5 imionami.
  • Spróbujcie wypisać kolejne elementy tej tablicy do konsoli, używając funkcji console.log.

Udało się?

Pewnie wyszło wam coś takiego?

var names = ["Michał", "Jaromir", "Gracjan", "Hipolit", "Maksym"];

console.log(names[0]);
console.log(names[1]);
console.log(names[2]);
console.log(names[3]);
console.log(names[4]);

A co jeśli...

Będziemy mieli 100 użytkowników?
Jak wypisać imiona wszystkich?

Nie ma sensu robić tego ręcznie, prawda?

Co nam pomoże?

Pętle!

(nareszcie)

Pętle

Jest kilka rodzajów pętli.
Ale dziś skupimy się na jednej - pętli for.

Jest to najczęściej używana pętla.

Anatomia pętli for

Pamiętacie nasz przykład z praktykantem?

for (var i=0; i<10; i++) {...}
  • słowo kluczowe for
  • warunek początkowy -tworzenie zmiennej
    (pętla potrzebuje informacji o samej sobie)
  • warunek trwania pętli
    (kiedy mamy przestać)
  • instrukcja przejścia do następnego kroku
    (jaka ma być wartość zmiennej w następnym cyklu)
  • instrukcje do wykonania w pętli
    (w klamrach)

Porównajcie do instrukcji warunkowej if

if

if (warunek) {
  // wykonaj ten kod jeżeli warunek jest prawdziwy
}

for

for (var i=0; i<10; i++) {
  // wykonaj ten kod tak długo jak warunek trwania pętli jest prawdziwy
}

Spróbujcie wpisać w konsolę następujący kod:

for (var i=0; i<5; i++) { console.log(i) }

Co wyszło?

0
1
2
3
4

A dlaczego?

Ćwiczenie

Grafika zapożyczona z serwisu pixabay.com

Ćwiczenie

Wykorzystując zdobytą dziś wiedzę:

  • Utwórzcie tablicę z 6 imionami
  • Wypiszcie, używając pętli, wszystkie imiona

Prawdopodobnie wyszło Wam coś takiego:

var names = ["Ala", "Ela", "Ola", "Ula", "Ila", "Yla"];

for (var i=0; i<6; i++) {
  console.log(names[i]);
}

Problem z takim rozwiązaniem

Nasze rozwiązanie działa tylko dla tablicy z 6 imionami.

Co jeżeli będzie ich mniej lub więcej?

"length" na ratunek!

Każda tablica ma właściwość length

length zawiera zawsze aktualną liczbę elementów w tablicy

names.length // wypisze liczbę elementów

Wracamy do ćwiczenia

Rozwiążcie poprzednie zadanie tak, żeby działało dla dowolnej liczby imion w tablicy names

Zgadza się?

var names = ["Ala", "Ela", "Ola", "Ula", "Ila", "Yla"];

for (var i=0; i<names.length; i++) {
  console.log(names[i]);
}

Sukces!

Grafika zapożyczona z serwisu tinybuddha.com

Wykorzystajmy to w praktyce

Grafika zapożyczona z serwisu giphy.com

Stąd możemy pobrać paczkę z kodem źródłowym.

W pliku exercise1.html mamy zapisaną tablicę obrazkow. Będziemy chcieli dodać te obrazki na stronie przy użyciu kodu JavaScript.

Funkcja, która tworzy obrazek o podanym adresie i go dodaje na stronie, jest już gotowa. Naszym zadaniem będzie odpowiednio wywołać ją w pętli.

Otwórzmy plik exercise1.html w przeglądarce

Zobaczmy kod

Otwórzcie plik exercise1.html w edytorze

Nasz kod

<body>
  <section id="section1">
    <img src="img/1.jpg" />
  </section>

    <script>
      var section = document.querySelector("#section1");
      function dodajObrazek (url) {
        var img = document.createElement("img");
        img.src = url;
        section.appendChild(img);
      }

      var photos = ['img/2.jpg','img/3.jpg','img/4.jpg','img/5.jpg',
                    'img/6.jpg','img/7.jpg','img/8.jpg','img/9.jpg',
                    'img/10.jpg','img/11.jpg','img/12.jpg'];
      
      // a tutaj miejsce na Wasz skrypt ;-)

    </script>
</body>

Zadanie

Korzystając z funkcji dodajObrazek, dodaj wszystkie obrazki z tablicy na stronie.

Powodzenia!

Grafika zapożyczona z serwisu giphy.com

Udało się?


  for (var i = 0; i < photos.length; i++) {
    dodajObrazek(photos[i]);
  }
  

Wielki sukces!

Grafika zapożyczona z serwisu giphy.com

Dzięki za wspólnie spędzony czas i do zobaczenia!