JavaScript: Przerywanie lub kontynuacja pętli
od Podstaw
10 godz. 55 min · JavaScript · Full-stack i Programowanie
Piotr PalarzWeb DeveloperCzego się nauczysz
- Wstep do programowania oraz najwazniejsze konstrukcje jezyka
- Liczne “smaczki” zwiazane z kazda z konstrukcji
- Obiektowy Model Dokumentu i DOM API
- Wyszukiwanie elementów na stronie
- Tworzenie nowych, praca z ich trescia, atrybutami, stylami CSS
- Odczytywanie wspólrzednych polozenia elementu i jego wymiarów
- Obsluga zdarzen i debugowanie kodu
- Praktyczne projekty
- I wiele, wiele wiecej!
Witaj w kursie JavaScript od Podstaw!
Jeśli poznałeś już wymienione wyżej technologie, to zapewne zdajesz sobie sprawę z ich ograniczeń. Za pomocą języka HTML tworzymy bowiem strukturę dokumentu, dodajemy treść tekstową, obrazy czy wideo. Aby jednak strona internetowa wyglądała perfekcyjnie, korzystamy z arkuszy stylów CSS, które pozwalają nam opisać wygląd wszystkich elementów HTML, ustawić wielkość tekstu czy dodać tło strony. No właśnie, ale gdzie tutaj interakcyjność?Zapewne już wiesz, że język CSS oferuje tzw. pseudoklasy, które pozwalają nam np. przypisać zmianę koloru elementu po najechaniu na niego kursorem myszy. I to tak naprawdę wszystko, na co możemy zareagować. A co gdybyśmy chcieli po wciśnięciu jakiegoś przycisku wysunąć ukryty panel, sprawdzić poprawność wypełnianego właśnie formularza lub pobrać dane z serwera i wyświetlić je na stronie bez przeładowywania witryny? Dobra wiadomość jest taka, że to wszystko jest możliwe z użyciem języka JavaScript, który “rozumie” każda przeglądarka internetowa.Choć język JavaScript powstał jako język skryptowy na potrzeby stron internetowych, to już dawno temu “wyszedł” z przeglądarek internetowych i może być używany tak naprawdę gdziekolwiek. W kursie, który masz przed sobą, poznasz język JavaScript jako niezależny język programowania, a dopiero później dowiesz się, jak wykorzystywać go do wzbogacania stron internetowych. Dzięki postawieniu grubej linii pomiędzy samym językiem, a Obiektowym Modelem Dokumentu dostępnym w przeglądarkach internetowych, będziesz nie tylko bardzo dobrze rozumiał sam język, ale w przyszłości wykorzystasz go do innych zastosowań.Na początku omówimy ciekawą historię języka JavaScript, a chwilę później rozpoczniemy poznawanie najważniejszych jego konstrukcji. I tak dowiesz się czym są zmienne, jakie typy danych dostępne są w tym języku, czym są liczne operatory, instrukcje warunkowe, pętle, tablice, obiekty i funkcje. Wszystkie te zagadnienia są bardzo podobne w innych językach programowania, dlatego kurs ten jest również świetnym wstępem do programowania w ogóle. Każda z przedstawianych konstrukcji języka jest bardzo dokładnie tłumaczona z myślą osobach początkujących. Nie zmienia to jednak faktu, że nawet osoby znające już podstawy języka JavaScript znajdą tutaj coś dla siebie, gdyż na każdym etapie przedstawiane są również liczne ciekawostki odnośnie danej konstrukcji.Kiedy zrozumiesz już jak działa język JavaScript, przejdziemy do drugiej połowy kursu, gdzie dokładnie omówimy Obiektowy Model Dokumentu, dostępny w przeglądarkach internetowych. Zobaczysz jak przeglądarka tworzy z kodu HTML drzewo dokumentu, jak reprezentowane są poszczególne jego węzły, a także jak język JavaScript potrafi z tym “wewnętrznym światem” współpracować. Dowiesz się jak wyszukiwać na stronie interesujących nas elementów HTML, a także jak tworzyć nowe elementy, przypisywać im treść i wstawiać je na stronę. Popracujemy również z atrybutami elementów, ich klasami i wreszcie ze stylami CSS, abyśmy mogli wpływać dynamicznie na wygląd naszej strony.Zobaczysz również, jak możemy w dowolnym momencie odczytać współrzędne położenia elementu na stronie, a także jego wysokość czy szerokość. Tę wiedzę wykorzystamy później w praktycznym przykładzie.Jeden z rozdziałów kursu poświęcony został zdarzeniom, a więc możliwości reagowania na zachowania użytkownika. Dzięki temu zobaczysz, jak możemy przypisać np. zdarzenie kliknięcia do wybranego elementu, a kiedy zostanie on kliknięty, wykona się przygotowany przez nas kod. Poznasz kilka różnych sposobów na przypisywanie oraz usuwanie zdarzeń, a także dowiesz się czym jest tzw. “bubbling” oraz “capturing” czy jak zablokować domyślną akcję przeglądarki.Przy pisaniu jakiegokolwiek kodu, zawsze pojawiają się błędy, dlatego i tutaj Twoje wątpliwości nie pozostaną bez odpowiedzi. Poznasz wszystkie typu błędów, które mogą się pojawić podczas wykonywania naszego kodu, a także wiele sposobów ich wykrycia i wyeliminowania.W kursie nie brakuje oczywiście praktycznych przykładów, które celowo zostały ułożone tak, aby wykorzystać w nich jak najwięcej zdobytej wcześniej wiedzy. Nie zostaniesz więc sam z poczuciem, że co prawda rozumiesz jak działa dana konstrukcja, ale nie masz pomysłu, kiedy z niej skorzystać. Na początek wykonamy praktyczny projekt losowania liczb z wybranego przedziału tak, aby nie mogły się powtórzyć. Już przy tym projekcie poznasz wiele ciekawych technik i sztuczek.Następnie przejdziemy do nieco bardziej zaawansowanego przykładu i napiszemy skrypt, który pozwoli nam sortować dane w tabeli po wybranych kolumnach, kiedy któraś z nich zostanie kliknięta. Zobaczysz jak sortować dane zarówno malejąco jak i rosnąco, a także jak zmieniać kolejność elementów HTML na stronie.W kolejnym projekcie zajmiemy się walidacją danych wpisywanych do formularza, by ten nie mógł zostać wysłany do serwera tak długo, jak zawiera jakiekolwiek błędy. Zobaczysz tutaj zdarzenia związane z polami formularza, a także sposoby na pobieranie z nich wartości i sprawdzanie czy są one poprawne. Zadbamy także o wrażenia użytkownika i wyświetlimy na stronie stosowne błędy, a także podświetlimy źle uzupełnione pola na czerwono.W przedostatnim projekcie wstawimy na stronę przycisk, który będzie się pojawiał po przewinięciu strony w dół, a znikał po odwrotnej akcji. Co jednak ciekawe, po jego kliknięciu, strona zostanie automatycznie, płynnie przewinięta do samej góry.W ostatnim projekcie stworzymy bardzo efektowny dymek z podpowiedzią, który będzie się pojawiał nad elementem po najechaniu na niego kursorem myszy. Wykorzystamy tutaj mnóstwo ciekawych technik. Dowiesz się również jak swój kod przygotować w taki sposób, abyś mógł go udostępnić innym osobom, by w łatwy sposób skorzystały z przygotowanego Tooltipa na swoich stronach.Kurs kończy się sekcją Tips & Tricks, w której znajdziesz 10 krótkich lekcji. W każdej z nich została omówiona jedna sztuczka. Każda z nich pozwoli Ci jeszcze lepiej zrozumieć język JavaScript, ale przede wszystkim zaoszczędzić czas i kilka linijek często niepotrzebnego kodu.Podsumowując, kurs ten jest nie tylko wprowadzeniem do samego języka JavaScript, ale także do Obiektowego Modelu Dokumentu. Dzięki wyraźnemu rozdzieleniu tych dwóch zagadnień, będziesz mógł w przyszłości wykorzystać język JavaScript także do innych zastosowań, poza przeglądarką internetową.
Kurs JavaScript od Podstaw to między innymi:
- Wstęp do programowania
- Najważniejsze konstrukcje języka
- Liczne “smaczki” związane z każdą z konstrukcji
- Obiektowy Model Dokumentu i DOM API
- Wyszukiwanie elementów na stronie
- Tworzenie nowych, praca z ich treścią, atrybutami, stylami CSS
- Odczytywanie współrzędnych położenia elementu i jego wymiarów
- Obsługa zdarzeń
- Debugowanie kodu
- Praktyczne projekty
- I wiele, wiele więcej!
Dla kogo jest ten kurs?
Kurs ten jest dla wszystkich osób, które znają już podstawy HTML i CSS i chciałyby przejść poziom wyżej i dodać do swoich stron dynamiczności. Żadna wcześniejsza wiedza z zakresu JavaScript czy programowania nie jest wymagana, gdyż wszystkie konstrukcje są starannie tłumaczone. Materiał ten będzie również świetnym odświeżeniem i usystematyzowaniem wiedzy dla osób, które już z tym językiem miały do czynienia. Po przerobieniu tego kursu będziesz gotowy, by poznawać język JavaScript dalej, z kursem JavaScript w Praktyce, który powstał jako dopełnienie tego kursu i porusza nieco bardziej zaawansowane tematy, na które tutaj zabrakło już czasu.
W tej lekcji poznasz dwie ostatnie rzeczy związane z pętlami, które są również bardzo istotne.
Mianowicie przerywanie lub kontynuację pętli. Przejdziemy od razu do kodu i będę chciał stworzyć pętlę,
która pozwoli nam wyświetlić wszystkie liczby parzyste od 0 do 20.
Bardzo łatwo możemy to zrobić.
Zrobimy to za pomocą pętli for.
Jak już wiesz, na początku, zmienną np. i ustawimy na wartość początkową.
Dla nas będzie to 0. Następnie warunek, który będzie sprawdzany, a więc czy i jest mniejsze lub równe 20
i na końcu
i++.
Teraz już wiesz, że gdybyśmy tutaj wpisali console.log i, to wyświetlimy wszystkie liczby od 0 do 20.
Natomiast ja chciałbym wyświetlić tylko liczby parzyste. Dlatego musimy tutaj skorzystać z instrukcji
warunkowej if. Napiszemy If I na początku będzie to 0, modulo, czyli operator, który już znasz z dwóch, równa
się 0.
To nam zadziała, ale aby było bardziej czytelne, możemy tutaj dodatkową parę nawiasów zastosować. Tutaj sobie zrobić np.
miejsce.
Czyli jeżeli i podzielone przez 2 będzie miało resztę z dzielenia 0, to wiemy, że jest to liczba parzysta
np. 2 dzielone przez 2 to jest 1 i reszta z dzielenia jest to 0. Wiemy, że jest to liczba parzysta.
Tutaj możemy to zapisać, jak już mówiłem ci przy instrukcjach warunkowych, w ten sposób czyli bez nawiasów
klamrowych.
Jeżeli będzie to jedna linijka poniżej. Natomiast ja sobie to obejmę nawiasami klamrowymi,
w ten oto sposób i teraz gdybyśmy tutaj przeszli, to widzisz że mamy tylko liczby parzyste 0, 2, 4, 6 itd.
Włącznie z dwudziestką.
Nic nadzwyczajnego w tym momencie.
Natomiast zauważ, że tutaj objęliśmy ten blok kodu właśnie takimi nawiasami klamrowymi.
Teraz wyobraź sobie, że chcielibyśmy wyświetlić liczby nieparzyste, a więc moglibyśmy tutaj zrobić zaprzeczenie.
W ten oto sposób i powinni się wyświetlić liczby nieparzyste i dokładnie tak się stało.
Natomiast chciałbym zrobić rzecz inną, aby pokazać ci jak działa kontynuacja pętli.
Dlatego to co tutaj, mamy będę chciał sobie skopiować, a to wykomentuje tutaj i przejdziemy niżej i teraz, aby
wyświetlić liczby nieparzyste będziemy sprawdzać ten warunek, czyli jeżeli liczba jest parzystą to i
nie wyświetlamy. Tutaj chcemy wyświetlić liczbę, a tutaj chcielibyśmy przejść do kolejnej iteracji pętli.
I teraz jak to zrobić? Właśnie tutaj skorzystamy ze słowa kluczowego continue, czyli kontynuuj.
To słowo wygląda w następujący sposób, czyli tutaj sprawdzimy, jeżeli ta liczba i jest parzysta, to kontynuuj.
Zobaczysz, że ten kod się nie wykona.
Teraz jeżeli odświeżę, znowu mamy tylko liczby nieparzyste.
Dlatego właśnie, że kiedy użyjemy słowa continue,
to wszystko co jest poniżej, nie jest w ogóle wykonywane, ale przechodzimy do kolejnej iteracji pętli.
Może to tutaj nie jest najlepszy przykład i myślisz sobie po co korzystać z continue, skoro mogliśmy
tak jak pokazałem, przed momentem, to zaprzeczyć.
Natomiast często jest tak, że mamy jakiś zupełnie inny kod, mamy dużo kodu, który musiałby zostać objęty
jakimś blokiem else np. tutaj mamy if, mielibyśmy else.
I tutaj mogłoby być dużo kodu.
I teraz, aby niepotrzebnie nie obejmować tego kodu takimi oto blokami, to możemy bez else ten kod poprostu
zapisać.
Poniżej tak jak consol log.
I tutaj na dół moglibyśmy mieć jeszcze wiele linijek kodu, a na samej górze sprawdzamy pewien warunek.
Jeżeli ten warunek jest prawdziwy albo nieprawdziwy zależy jak to zrobimy w if'ie, to możemy powiedzieć
kontynuuj pętlę, czyli czasami są takie sytuacje, gdzie już na samym początku wiemy, nie ten kod, który
jest poniżej
w takim konkretnym przypadku nie wykona się, jest niepotrzebny, więc przejdź do kolejnej iteracji. Raz
jeszcze to sprawdź.
Jeżeli teraz warunek się sprawdzi, to nie wykona się continue, a więc kod poniżej się wykona, czyli zapamiętaj
z tego, że continue nam zatrzymuje pętlę w tym miejscu. Kod poniżej się nie wykona, ale przechodzimy do
kolejnej iteracji.
Teraz kolejną rzecz, którą chciałbym ci pokazać.
Jest to zatrzymywanie w ogóle działania pętli. Kod, który tutaj mamy znowu wykomentuje, aby nam się nic nie
wyświetlało w konsoli przeglądarki i utworze teraz tutaj dwie zmienne.
Pierwsza z nich jest to tablica. Mam nadzieję, że już wiesz jak działają tablice, jeżeli nie to wróć do
tej lekcji
po rozdziale o tablicach. Mamy tutaj różne liczby w tej tablicy i zauważ, że utworzyłem kolejną zmienną
containsZero równa się false.
Ta zmienna mówi nam czy ta tablica zawiera liczbę 0.
Napisaliśmy false, a więc fałsz, czyli ta tablica nie zawiera liczby 0.
Oczywiście w tym momencie nie wiemy.
Ale napisałem false i teraz będę chciał stworzyć kolejną pętlę.
Będzie to pętla for, która będzie iterować po tej tablicy numbers. Jak iterować po tablicach pokazuje
właśnie w rozdziale o tablicach, dlatego teraz już tego nie będę tłumaczył.
Stworzymy tutaj i równa się zero, i musi być mniejsza od ilości elementów tablicy, a więc od numbers.length.
Również o tym mówiłem w rozdziale o tablicach i następnie i++, a więc przelecimy sobie przez wszystkie
elementy tablicy i teraz będziemy chcieli poprzez console.log wyświetlić numbers.
I jeżeli teraz bym przeszedł do przeglądarki. Odświeżył.
To się wszystkie te elementy tablicy, możesz tutaj zobaczyć, wyświetlają.
Natomiast teraz chcielibyśmy sprawdzić czy taka tablica zawiera wartość 0.
Możemy w JavaScript'cie na tablicach zrobić to zupełnie inaczej, ale aby pokazać ci jak działa przerywanie
pętli, to zrobię to w taki oto sposób. Będziemy chcieli sobie tutaj sprawdzić if numbers i, czyli aktualny
indeks na początku będzie to 2, 3, 6 itd, równa się 0.
W ten sposób. Jeżeli tak, to będziemy chcieli do tej zmiennej containsZero zapisać true, bo wiemy że znaleźliśmy
0.
Na początku 2 czy jest równa 0?
Nie.
Więc to się nie wykona, 3 nie.
Ale jak dojdziemy do 0, sprawdzimy czy 0 jest równe 0, zgadza się.
A więc w tej tablicy 0 się znajduje, dlatego chcemy do zmiennej containsZero przypisać wartość true, czyli 0 tam
się znajduje i co chcemy zrobić? Chcemy zakończyć działanie całej tej pętli.
No bo skoro znaleźliśmy 0, to nie ma potrzeby sprawdzać znowu czy 52 jest równe 0, 11
i tutaj jeszcze wiele innych elementów mogłoby się znajdować i do tego właśnie skorzystamy ze słowa
kluczowego, które pozwala nam przerywać pętlę.
A jest to
break. Widziałeś już przypadku instrukcji warunkowej switch.
I tutaj również działa to podobnie i teraz jeżeli zapiszemy break, to oczywiście kod, który byłby poniżej
w ogóle się nie wykona, a więc działa to podobnie jak continue w tym miejscu tylko, że continue jak
wspominałem, przerywa działanie kodu w tym miejscu i przechodzi do kolejnej iteracji, a break zatrzymuje
nam całą pętlę, czyli te dwa elementy w ogóle nie zostaną pobrane
i ta pętla nie zostanie przeiterowana do samego końca.
Jeżeli teraz to odświeżę. Tutaj nam się to wyświetla, jak widzisz, doszliśmy do zera, a więc ten console.log
się wyświetlił. Czy 0 jest równe 0, zgadza się. Przerwaliśmy pętle, i 52 oraz 11 się w ogóle nie wykonało.
I teraz jeżeli się odwołam w konsoli do containsZero.
Mamy tutaj taką zmienną, to ma ona wartość true, bo znaleźliśmy 0
w całej naszej tablicy.
Gdyby tutaj zera nie było, to możesz zobaczyć że przestraszymy przez całą tablicę i containsZero będzie
miało wartość false,
w ten oto sposób. Wrócę tutaj do zera i polecam ci, Jeżeli potrzebujesz, abyś jeszcze poeksperymentował z
tym przykładem.
Zapamiętaj tylko tyle, że continue przeskakuje do kolejnej iteracji pętli i przerywa to, co jest poniżej,
a break kończy całkowicie działanie pętli.
I co jest bardzo istotne w przypadku pętli while czy do while, które ci pokazywałem, również możesz z break
skorzystać i również pęta wtedy zostanie zakończona.
Kod
Przerywanie lub kontynuacja pętli · 1 min
// for(var i = 0; i <= 20; i++) {
// if( (i % 2) === 0 ) {
// console.log(i);
// }
// }
// for(var i = 0; i <= 20; i++) {
// if( (i % 2) === 0 ) {
// continue;
// }
// console.log(i);
// }
var numbers = [2, 3, 6, 20, 0, 52, 11],
containsZero = false;
for(var i = 0; i < numbers.length; i++) {
console.log(numbers[i]);
if(numbers[i] === 0) {
containsZero = true;
break;
}
}