JavaScript: Losowanie Dużego Lotka
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.
Rozpoczynamy nasz pierwszy praktyczny projekt, w którym wykorzystamy już dużą część tej wiedzy teoretycznej,
którą w tym kursie, mam nadzieję już nabyłeś i będzie to projekt pod tytułem losowanie Dużęgo Lotka, czyli
napiszemy sobie taki program, który nam wylosuje 6 liczb z zakresu od 1 do
49.
Temat ciekawy i pokażę ci jak do niego podejść.
Ja przygotowałem taką prostą stronę, tutaj jest przycisk, po wciśnięciu którego, będę chciał, aby w tym
polu pojawiły się te właśnie liczby.
Chciałbym, abyś od teraz jeżeli do tej pory tego nie robiłeś, pracował razem ze mną, a więc abyś pisał
razem ze mną, to co ja tutaj robię.
Bo w plikach źródłowych znajdziesz oczywiście startowy plik, z którego ja zaczynam, więc możesz krok po
kroku, robić to ze mną, do czego serdecznie cię zachęcam, bo wtedy najlepiej wszystko zrozumiesz.
Kiedyś ktoś powiedział, że nie nauczysz się pływać od czytania o pływaniu czy nie nauczysz jeździć na
rowerze od tego, że będziesz oglądał kogoś, kto jeździ na rowerze, musisz wsiąść i samemu spróbować się
przejechać.
Dokładnie tak samo jest z programowaniem.
Dlatego zachęcam Cię, abyś razem ze mną to robił albo najpierw obejrzał, a potem spróbował również zrobić.
Przejdźmy od razu, bez zbędnego gadania, do kodu.
Chcę Ci pokazać, że mamy przycisk. To jest ten przycisk i mamy tutaj pole.
Jest to output.
Oczywiście to, co wylosujemy będziemy mogli wstawić do dowolnego elementu i już wiesz jak to zrobić poprzez
textContent czy innerHTML.
Natomiast HTML5 przedstawił nam taki nowy element output, który służy do tego, aby w nim właśnie wyświetlać
wyniki jakichś obliczeń, więc semantycznie poprawnie będzie z takiego skorzystać.
Oczywiście będziemy chcieli je pobrać do zmiennych.
Przejdźmy do scripts.js i do tej pory wszystko wpisywaliśmy tutaj prosto,
tak jak widzisz i było to dostępne w przeglądarce, w konsoli, bo o to mi chodziło.
Natomiast pokazałem ci również, że mamy coś takiego jak zakres zmiennych i możemy ograniczać widoczność
zmiennych na zewnątrz.
Co powinniśmy robić w naszych aplikacjach.
Dlatego utworzę sobie całą wywołującą się funkcję anonimową, o której również ci mówiłem, czyli ta funkcja
się sama wywoła i wszystko co w niej wpiszemy, nie będzie na zewnątrz widoczne,
w konsoli przeglądarki czy w innych skryptach, które mogą być załadowane na naszej stronie.
Dlatego tutaj będziemy chcieli tworzyć i na sam początek utworzymy sobie dwie zmienne, czyli pobieramy sobie przycisk
oraz to pole output. Mamy to zapisane, bo po kliknięciu w ten przycisk będziemy chcieli wyświetlić w tym polu wyświetlić
wylosowane liczby.
I teraz musimy się zastanowić, co będzie nam potrzebne.
Otóż będziemy chcieli losować liczby, które będą właśnie losowe, ale z pewnego przedziału.
Co nam może w tym pomóc?
Być może pamiętasz z lekcji o obiekcie math, że mamy tam taką metodę jak random.
I właśnie z niej będziemy chcieli skorzystać, więc najpierw przejdźmy tutaj
i przypomnę ci jak to wyglądało.
Math.random generowało nam losową liczbę w przedziale od 0 0 do 1 0.
Teraz możesz się zastanowić, jak zrobić, abyśmy wylosowali liczbę w przedziale od 1 do 49,
bo tak jest w przypadku Dużego Lotka,
jak możemy to zrobić?
Otóż zróbmy to krok po krokum mamy Math.random.
I co by było gdybyśmy to pomnożyli przez maksymalną liczbę jaką chcemy czyli 49.
Zerknijmy, mamy 25, 41 itd.
Wygląda na razie ok.
Dzięki temu możesz się domyślić, że będziemy losować liczby od 0 do 49.
Bo skoro Math.random może nam zwrócić 0 najmniej, to 0 razy 49 to będzie 0 albo najwięcej można zwrócić
1 kropka 0, czyli po prostu 1, a więc 1 razy 49, to będzie 49.
Więc teraz zastanówmy się jak zrobić tak, abyśmy mogli nie od zera, ale od 1, zacząć to losowanie.
No i jest to również bardzo proste.
Wystarczy się chwilę nad tym zastanowić, jest na to reguła, więc jeżeli chcemy wylosować liczbę od, do
powiedzmy, że 49 to jest do, to możemy to zrobić w następujący sposób, max, czyli 49 chcemy, żeby to było max, odjąć
minimum,
chcemy, żeby minimum, to było 1 czyli od 1 do 49.
Następnie plus minimum, zaraz ci wytłumaczę dlaczego, i teraz kiedy to zapiszemy.
Oczywiście to napisałem minimum, a chodziło mi o 1, więc mieliśmy błąd, wyczyszczę wszystko i teraz będziemy
losować od 1 do 49.
Już tłumaczę, o co chodzi.
Wspomniałem ci, że jeżeli Math.random zwróci 0, to 0 razy 49 to jest 0, a my nie chcemy 0, więc tutaj zrobimy
sobie 49 minus jeden, czyli to jest 48.
Dzięki temu, będziemy mogli wylosować od 0 do 48, ale tutaj dodajemy jedynkę, czyli maksymalnie będzie
49.
Załóżmy, że właśnie Math.random zwróciło 1, 1 razy 48 to jest 48 plus 1 to jest 49.
Natomiast, jeżeli nam wylosuje 0, czyli Math.random to będzie 0, 0 razy 48 to jest 0 plus 1 to jest 1.
Dzięki takiej formule zawsze będziemy losować od 1
do 49,
czyli możemy to zapisać jako Math.ramdom razy maksimum minus minimum plus minimum.
I teraz tworzymy sobie funkcję, która nam w tym pomoże i będziemy mogli sprawdzić jak ona działa.
Jeszcze jedna ważna rzecz jest taka, że chcemy to zaokrąglić, aby to nie było 16 itd.
Tylko, aby to była pełna liczba i możemy to zrobić funkcją Math.round, którą już ci pokazywałem i ona nam
to wszystko zrobi, więc teraz przejdźmy już do napisania takiej funkcji, w tym miejscu nazwiemy ją getRandom
i będziemy chcieli, aby ona przyjmowała minimum i maksimum, czyli nasze 1 oraz 49.
I ona nam będzie zwracać.
Math.round, czyli to co ci mówiłem, tutaj chcemy zaokrąglić, to co nam zwróci,
Math.random razy przed momentem ci to pokazałem, maksimum minus minimum, minus, a w zasadzie plus minimum.
Tak to wygląda.
Tutaj będziemy musieli sobie to od razu przekazać. Natomiast oczywiście musimy jej nadać nazwę getRandom.
I teraz jeżeli będziemy się do niej chcieli odwołać, to ona nam to będzie poprawnie zwracać.
Oplotłem to wszystko funkcją anonimową,
więc niestety tutaj getRandom, dla nas nie jest dostępn, ale pokażę ci jak możemy to tymczasowo zrobić.
Do window się możemy odwołać getRadom, równa się getRandom, czyli do window przypisujemy sobie właściwość
getRandom, która kieruje na tę funkcję, czyli na referencje do niej myślę, że rozumiesz.
I teraz skoro pod windows coś jest dostępne, to również jest dostępne globalnie.
I teraz możemy się odwołać do getRandom. No i przekażemy minimum 1, maksimum 49.
Jak widzisz ta funkcja nam będzie zwracać za każdym razem inną liczbę, czyli już możemy sobie wylosować sześć
naszych liczb.
Jak to zrobić?
Otóż przejdziemy teraz tutaj dalej i stworzymy funkcję, która się będzie nazywała showRandomNumbers,
czyli chcemy te wylosowane liczby pokazać.
Ona będzie się wywoływać wtedy, kiedy wciśniemy ten przycisk, więc możemy do niego przypisać obsługę zdarzenia
btn na przykład onclick.
Możemy w ten sposób showRandomNumbers, w ten sposób, oczywiście. Pamiętaj, że gdybyś tutaj użył takich
nawiasów, to wtedy wywołujemy tę funkcję.
To, co ona zwróci zostaje tu przypisane, a nie o to chodzi, więc tego tutaj być nie może.
I teraz będziemy chcieli w tej funkcji wylosować właśnie sześć takich liczb.
Jak to możemy zrobić?
Najprościej będzie zrobić to pętlą, ale na początku, żebyśmy te liczby gdzieś mogli zapisywać, no to musimy
na nie utworzyć jakieś miejsce.
Idealna do tego będzie tablica.
Nazwiejmy ją numbers i będzie to pusta tablica.
Teraz będę chciał zrobić taką pętlę, która sześć razy się obróci.
Za każdym razem skorzysta z funkcji getRandom, żeby sobie jakąś liczbę pobrać i upchnie ją tutaj.
Myślę, że wiesz jak to zrobić zróbmy sobie pętlę for i musi być mniejsza od sześciu i następnie i plus plus.
Do tej pory na pewno już wiesz, że taka pętla wykona się sześć razy.
Możemy zrobić console.log i, żeby to sprawdzić.
To wszystko się wywoła oczywiście, po wciśnięciu przycisku Losuj liczbę.
Jak widzisz, od zera do pięciu, czyli sześć razy pętla się wykonała.
No i teraz wydawałoby się nic prostszego, utwórzmy zmienną random.
Ona nic na razie nie będzie przechowywać i ma wartość undefined.
No i w tej pętli, żeby za każdym razem nie tworzyć zmiennej to utworzymy ją tutaj.
Będziemy chcieli odwołać się do random i przypisać do niej to, co zwróci nam funkcja, którą wcześniej
przygotowaliśmy czyli getRandom.
Przekażemy jej minimum 1, maksimum 49.
Ona nam coś zwróci z tego przedziału, tutaj i zapiszemy to w random, właśnie w tym miejscu, no i będę chciał
powiedzmy, to wyświetlić, abyśmy mogli zobaczyć jak to wygląda. Losuj
liczby. No i jak widzisz, od razu kilka liczb zostało wylosowanych. Od razu tutaj widać pewien błąd, o którym
chciałem powiedzieć dopiero za moment.
Otóż powtórzyły się liczby 44, tutaj dwukrotnie, a tego nie chcemy.
Zaraz pokażę ci, jak możemy sobie z tym poradzić.
Natomiast skoro już tutaj do random sobie jakąś liczbę wylosowaliśmy, to możemy ją dodać do numbers, teoretycznie,
czyli numbers, jest to tablica, być może pamiętasz, że ma ona metodę push, która na jej koniec doda
to, co jej tu wpiszemy i wpiszemy random.
Moglibyśmy od razu to wszystko wpisać tutaj, również by to zostało dodane.
Ta pętla się przekręci sześć razy i na końcu możemy zrobić console.log numbers i zerknąć jakie tam liczby
się znalazły.
Losuj liczby.
I teraz mamy 6 unikalnych liczb, ale wcześniej liczby się powtórzyły i teraz co możemy zrobić, jeżeli
liczba nam się powtórzy.
Otóż jest na to pewien sposób.
Kiedy wylosujemy jakąś liczbę, to możemy odwołać się do tablicy numbers. Może to zostawię, push, bo będziemy
chcieli tam taką liczbę wstawić i możemy sprawdzić czy taka liczba, już się w niej nie znajduje.
Pamiętasz może, że pokazywałem ci, iż na tablicach mamy taką metodę jak indexOf,
czyli jeżeli napiszemy
if numbers indexOf i podamy tutaj random, czyli powiedzmy dwójka została wylosowana.
Przekażemy to tutaj, to jeżeli w tej tablicy znajduje się dwójka, to tutaj zostanie jej indeks zwrócony.
Ja to pokazywałem, więc możesz do tej lekcji wrócić, a jeżeli dwójki w takiej tablicy nie ma to zostanie
zwrócone minus jeden.
Czyli jeżeli to, co tutaj napisaliśmy nie jest równe,
w ten sposób minus 1, to oznacza, że liczba, którą wylosowaliśmy np. dwójka, czy ona się tutaj nie znajduje.
Więc, jeżeli się tam nie znajduje, to możemy ją tam bez problemu dodać.
Ale jeżeli tam się znajduje.
No właśnie, to co wtedy.
Wtedy wypadałoby wylosować ją jeszcze raz.
Więc, wydawałoby się, że napiszemy else i napiszemy znowu random getRandom.
Ale co, jeśli za drugim razem znowu trafimy na liczbę, która już tam była.
Nie napiszemy przecież trzeciego bloku i tak dalej.
Tutaj musimy być sprytni i skorzystamy z pętli while.
Jeżeli robisz to po kolei ze mną, to jestem przekonany, że wszystko rozumiesz.
Czyli będziemy chcieli tutaj zrobić pętlę while.
To co jest pod spodem zaraz usuniemy i wrócę do lekcji o pętli.
Jeżeli nie pamiętasz jak ona, działa, ale generalnie ona działa tak, że dopóki warunek, który jest tutaj,
jest spełniony, to pętla się będzie wykonywać.
Czyli ja chcę tutaj powiedzieć while, czyli dopóki numbers indexOf random, nie jest równy minus 1,
to chcę wykonywać to, co tutaj się znajduje, a konkretnie będzie to właśnie taki zapis i później dopiero
będę chciał
dodać taką liczbę do tablicy.
I teraz zobacz w jaki sposób nam to działa.
Losujemy sobie liczbę na początku tablica jest pusta i powiedzmy wylosowaliśmy dwójkę. Sprawdzamy teraz tutaj
czy numbers.indexOf
2
Jest równe minus 1.
Jeżeli dwójki tutaj nie ma, to będzie to równe minus 1, czyli ten warunek będzie miał false, a więc
to się nigdy nie wykona i przejdziemy tutaj i tą dwójkę dodamy do tablicy.
Przechodzimy do kolejnej iteracji pętli i co się okazuje. Losujemy liczbę i znowu nam się wylosowała
dwójka.
Sprawdzamy tutaj czy numbers.indexOf 2 równa się minus 1.
Niestety tak nie będzie, bo jeżeli tutaj będzie dwójka, to tutaj indexOf zwróci nam 0, czyli 0 nie
jest równe minus 1.
I wówczas tutaj będzie true, czyli ta pętla wykonuje się tak długo jak tutaj jest true, a więc random, czyli tą
zmienną będziemy chcieli nadpisać jeszcze raz losując.
Załóżmy, że znowu nam się wylosowała dwójka i tutaj mamy tą dwójkę.
Znowu przechodzimy, sprawdzamy to czy dwójka jest już w tablicy.
Okazuje się, że jest, więc jeszcze raz chcemy wylosować i taka pętla while będzie się kilkukrotnie czasami obracać,
do momentu aż wylosuje liczbę, która się nie znajduje w tablicy i wtedy będziemy ją mogli tam dodać.
Teraz sprawdźmy jak to wygląda i za każdym razem te liczby muszą być unikalne.
Natomiast jeżeli się powtórzy jakaś liczba, to będziemy ją mogli tutaj wyświetlić w console.log, abyśmy
wiedzieli, kiedy coś takiego ma miejsce, czyli powtórzyła się.
Możemy napisać w ten sposób, powtórzyła się liczba i dodać random i zobaczmy, jak widzisz liczba 35 się
powtórzyła. Przy kolejnym losowaniu żadna się nie powtórzyła.
Przy kolejnym powtórzyła się dwudziestka.
Gdybyśmy sobie tej pętli nie zrobili, to mielibyśmy dwie dwudziestki.
A ta liczba nie byłaby unikalna.
Jak widzisz mieliśmy 44, 21.
Potem się wylosowała dwudziestka, więc znowu sprawiliśmy, ocho, dwudziestka już tutaj jest, losuje raz jeszcze.
Jeżeli by znowu wylosował dwudziestkę, to byśmy widzieli tutaj jeszcze raz ten komunikat.
Czyli generalnie, po jednej takiej próbie się udaje.
Jak widzisz nie zawsze nam się to pojawia.
Czyli można powiedzieć, że gdybyśmy tak jak wcześniej pokazywałem zrobili else, to by nam to mogło wystarczyć,
ale by nie musiało.
I teraz widzisz jakie jest praktyczne zastosowanie takiej pętli while.
Dzięki temu tutaj w random, w tej tablicy, konkretnie w numbers, to jest tablica.
Mamy unikatowe sześć liczb, z przedziału jaki sobie podaliśmy.
Do tego stworzyliśmy funkcję i możemy tutaj ten przedział zmieniać.
W tym miejscu oraz w tym, bo ta funkcja jest uniwersalna i teraz będę chciał na sam koniec wyświetlić
to wszystko w tym elemencie output, który pobraliśmy i możemy to w bardzo łatwy sposób zrobić, to będzie
widoczne tutaj.
Do takiego elementu nie musimy się odwoływać poprzez textContent, tylko ma on właśnie specjalną właściwość
value, którą Jeśli uzupełnimy, to to się nam tutaj pojawi.
Więc możemy tutaj na samym końcu wpisać po prostu output.value równa się numbers i na tablicy mamy
taką metodę jak join.
Ja ci ją już pokazywałem, czyli taką tablicę z liczbami sześcioma, które tutaj będą. Będziemy chcieli połączyć
poprzez join i chcemy każdy ten element oddzielić przecinkiem oraz spacją.
W ten sposób, czyli to zostanie najpierw wykonane.
Tablica zostanie połączona i zostanie nam zwrócony string, bo oryginalna tablica się nie zmieni i to
zostanie zapisane jako output value.
Odświeżmy raz jeszcze. Klikam Losu liczby i jak widzisz, tutaj liczby totolotka się pojawiły.
Możesz nadać kupon i może okaże się on szczęśliwy.
Kolejnego dnia możesz spróbować wylosować nowe liczby i mamy pewność, że zawsze one będą unikalne.
Chociaż w konsoli, jak widzisz czasami się powtarzają, ale znaleźliśmy na to sposób.
Mam nadzieję, że tą lekcją pokazałem ci już bardzo wiele konstrukcji, o których mówiłem.
Być może zastanawiałeś się, po co nam jest pętla while.
Jak korzystać z pętli for w praktyce i jak widzisz.
Tak właśnie wygląda praktyka, bez tej pętli byśmy sobie tutaj nie poradzili.
Kod
Losowanie Dużego Lotka · 7 min
(function() {
var btn = document.querySelector("#getNumbers"),
output = document.querySelector("#showNumbers");
function getRandom(min, max) {
return Math.round(Math.random() * (max - min) + min);
}
function showRandomNumbers() {
var numbers = [],
random;
for(var i = 0; i < 6; i++) {
random = getRandom(1, 49);
while(numbers.indexOf(random) !== -1) {
random = getRandom(1, 49);
console.log("Powtórzyła się liczba " + random);
}
numbers.push(random);
}
output.value = numbers.join(", ");
}
btn.onclick = showRandomNumbers;
})();getRandom · 6 min
function getRandom(min, max) {
return Math.round(Math.random() * (max - min) + min);
}