JavaScript: Pętla while
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 pierwszą z pętli dostępną w języku JavaScript,
a jest to pętla vailwhile, co z angielskiego oznacza po prostu dopóki.
Przejdźmy od razu do kodu i standardowo u góry utworzę sobie zmienną number, do której przypisze wartość
10.
Teraz przejdziemy od razu do zapisania słowa kluczowego while, czyli dopóki i tutaj znowu jak np. w instrukcji if,
podajemy sobie nawiasy okrągłe. To jak już wspominałem, może być np. spacja, jeżeli będziesz wolał to w ten
sposób zapisywać. I teraz co jest ważne?
Otóż w tym miejscu musimy podać warunek, który jeżeli będzie prawdziwy, to ten blok kodu się wykona.
Mógłbyś sobie pomyśleć, że to jest bardzo podobne do instrukcji if, dlatego że, jeżeli to jest prawda to
wykonamy ten blok kodu, który tutaj się znajduje.
Tak, to jest prawda.
Działa to jak instrukcja if, ale będzie ta pętla,
można powiedzieć się obracać albo mówiąc bardziej profesjonalnie iterować.
Instrukcja if raz nam to sprawdzi.
Jeżeli to nie będzie prawda, to tutaj nic się nie wykona. Natomiast taka pętla jak while będzie w nieskończoność
się obracać, jeżeli pewnego warunku nie zdefiniujemy.
Zaraz ci o tym powiem.
Natomiast tutaj chciałbym napisać number większe od zera.
No i teraz jak w przypadku instrukcji if, to wyrażenie zostanie sprawdzone.
Mamy tutaj 10, więc zdajesz sobie sprawę, że tutaj zostanie zwrócone true.
Tak jak bym to wpisał w ten oto sposób.
Natomiast, co jest ważne, w przypadku pętli, to ten warunek będzie sprawdzany za każdą iteracją.
Chciałbym sobie teraz tutaj wpisać conslone.log number, czyli tę liczbę wyświetlić w konsoli przeglądarki. Natomiast
w przypadku if'a, wyświetlilibyśmy to i przeszlibyśmy dalej. Natomiast w przypadku pętli, będziemy znowu
za każdym razem sprawdzać ten warunek.
Więc, jeżeli tutaj było true, wiemy że jest, wyświetlamy console.log
i znowu sprawdzamy czy number jest większa od zera.
Nie zmieniliśmy number, więc on będzie większy od zera.
Znowu wyświetlimy number.
Jeżeli teraz bym to zapisał i odświeżył, to w przeglądarce, to zawiesimy przeglądarkę pętlą, która będzie
szła w nieskończoność, dlatego że za każdym razem number, czyli 10 będzie większy od zera i będziemy w
nieskończoność chcieli wyświetlać taki oto console.log.
Dlatego co jest niezwykle istotne, w przypadku takiej pętli while, musimy coś z tą naszą zmienną zrobić,
aby można było ten warunek, w którymś momencie przerwać.
I teraz co zrobimy?
Otóż napiszemy sobie tutaj number minus minus.
Wiesz, że jest to postdekrementacja.
Czyli będziemy chcieli tutaj zmniejszyć wartość zmiennej number o 1, czyli w następnej iteracji będzie
to 10.
Tutaj na początku będzie true. Wyświetlimy number i zmniejszymy wartość pozostawiając ją na dziewiątce.
Znowu pętla wszystko sobie sprawdzi, a więc czy 9 jest większa od 0.
Zgadza się, więc wyświetl nam 9 i zmniejsz do ośmiu itd.
Więc domyślasz się, że jeżeli dojdziemy do momentu, gdzie number będzie równe 0. 0 nie jest większe od
zera.
Więc ten kod się nie wykona i przejdziemy w to miejsce.
Czyli kolejny kod, który był poniżej nam się tutaj wykona.
Teraz jeżeli to zapiszę, przejdę do przeglądarki, to możesz zobaczyć, że wyświetlił nam się 10, 9, 8, 7
tak, aż do jedynki, dlatego że w kolejnej iteracji, tak jak ci wspominałem zmienna przyjęła wartość 0
i ten warunek już nie został spełniony.
Jak to widzisz, ten warunek, to wyrażenie jest sprawdzane za każdym razem, a nie tylko raz. Tutaj zostaje
podstawiona jakby jego wartość.
Wynik tego wyrażenia na początku, jak wspominałem, jest to true, ale jak widzisz, za każdym razem, jest to
od nowa sprawdzane. W tym miejscu mogłaby być również funkcja albo jeszcze jakieś inne wyrażenie.
Oczywiście mógłbyś tutaj od razu zapisać number minus minus, to o czym już ci mówiłem.
Więc wyświetlilibyśmy sobie 10. Zmniejszyli byśmy tę wartość do dziewięciu
Itd.
Nie musiałbyś tego zapisywać, tak jak ja to zrobiłem, w dwóch linijkach.
Teraz chce ci pokazać kolejną rzecz.
Może ten console.log sobie wykomentuje, aby nam się nie pojawiał w przeglądarce.
Więc jeżeli teraz odświeżę nic się nie pojawia, chociaż ta pętla robi nam te obroty i pokażę ci jeszcze
inny przykład takiej mini gierki, którą możemy sobie stworzyć.
Stworzymy zmienną secretNumber, czyli będzie to taki sekretny numer i ustawimy sobie to na 2.
I teraz pętlą while będziemy chcieli poprosić użytkownika o podanie jakiejś liczby i teraz wybiegam trochę do
przodu. Natomiast mamy w przeglądarce dostępną taką funkcję w języku JavaScript jak prompt.
Ona nie będzie dostępna na przykład w Node.js, ale jest dostępna jako funkcja w obiektowym modelu
dokumentu, czyli w przeglądarce. Ja jeszcze o tym będę w tym kursie mówił.
I tutaj możemy o coś zapytać.
Więc możemy tutaj podać ciąg znaków i będzie to komunikat widoczny dla użytkownika. Napiszemy - Podaj
liczbę.
I co jest ważne w przypadku funkcji to cały ten zapis.
Po tym jak użytkownik, co zaraz zobaczysz, poda nam liczbę, zwróci nam liczbę, którą podał albo np.
undefined,
jeżeli niczego nie poda, więc to zostanie nam tutaj zwrócone i będzie działać dokładnie tak, jak bym tutaj
zapisał sobie np. 2.
Ale to, co nam poda użytkownik, to będzie ciąg znaków, więc tak jak bym zapisał 2 w ten oto sposób. Myślę,
że wiesz o co chodzi.
To co teraz podświetliłem, zwróci nam to co wpisze użytkownik.
No i teraz sobie sprawdzimy.
Jeżeli to, co nam podał
nie jest równe secretNumber.
Zauważ, że celowo nie robię tego w ten oto sposób, bo musiałbym tutaj zapisać 2 tak.
Tak jak ci wspomniałem, to co nam poda użytkownik do funkcji prompt, będzie to string,
więc jeżeli zapisze to w ten sposób, a tutaj mamy number to bez problemu będzie to działać. Jeżeli string
to będzie 2,
a tutaj number jest to 2, to już na pewno wiesz, że to zadziała.
I teraz w pętli while, jak mówiłem, podajemy warunek. Tutaj warunek oznacza,
jeżeli to, co poda użytkownik, nie jest równe 2, to wykonaj to, co się znajduje i będzie to kolejna funkcja
dostępna w przeglądarce, a więc alert.
Nie trafiłeś.
A poniżej, czyli całkiem za tą pętlą, będziemy chcieli zrobić alert.
Brawo.
I teraz, o co chodzi?
Jeżeli użytkownik poda nam np. 3, 3 nie jest równa
secretNumber, czyli dwa, więc wyświetlamy
Nie trafiłeś.
I co?
I ta pętla znowu przejdzie do kolejnej iteracji.
Znowu poprosi użytkownika, czyli wykona tę funkcję o podanie liczby. On ją poda, jeżeli znowu to nie będzie
2, znowu się wyświetli alert,
a więc w nieskończoność, dopóki tej liczby nie trafisz, ale jeżeli poda nam 2, ten warunek będzie
to false.
Dlatego że, będzie 2 równa 2, czyli będzie false, to się nie wykona i przejdziemy za tę pętlę.
A więc po tym bloku kodu wykona się kolejny kod, czyli to co jest tutaj.
Mam nadzieję, że to rozumiesz. Teraz pokażę ci jak to działa.
Odświeżam i właśnie to jest okienko prompt, za pomocą funkcji prompt wywołane.
Czyli ten warunek zostaje sprawdzany.
A skoro użyliśmy tutaj funkcji, to ta funkcja musi się najpierw wykonać.
To co tutaj wpiszemy, zostanie zwrócone w tym miejscu i dopiero zostanie porównane.
Podam sobie 3, tak jak ci wspomniałem po kliknięciu OK.
W tym miejscu zostanie podstawiony string,
3.
Zobaczmy.
Nie trafiłeś, dlatego że 3 nie jest równa 2.
Klikam OK.
Znowu się wyświetla kolejny prompt, bo
Pętla przeszła do kolejnej iteracji. Podam sobie 10, znowu nie trafiłem.
I tak będziemy robić w nieskończoność.
Natomiast, jeżeli podam dwójkę, kliknę OK.
Mamy komunikat.
Brawo.
Z tego powodu, że właśnie 2 tutaj jest równa 2, czyli tutaj mamy false
i ta pętla przestała się wykonywać i wyświetlone zostało dla nas
Brawo! I teraz, podsumowując, pętla while jest dobra właśnie w takich przypadkach, jak tutaj widzimy. Również
może być przydatna w przypadku takim jak tutaj
u góry. Natomiast lepsza będzie pętla do tego pętla for, o której jeszcze powiem, ale w pętli while zawsze musimy zadbać
o to, aby warunek, w którymś z momentów mógł zostać zmieniony.
Czyli, jeżeli tutaj mieliśmy number większa od 0, to musimy sami o to zadbać, aby coś z tą zmienną robić,
aby ona, w którymś momencie, się po prostu zmieniła.
Inaczej będziemy mieli pętle nieskończoną.
Kod
Pętla while · 1 min
var number = 10;
while(number > 0) {
// console.log(number);
number--;
}
var secretNumber = 2;
while(prompt("Podaj liczbę") != secretNumber) {
alert("Nie trafiłeś!");
}
alert("Brawo!");