JavaScript: Losowanie Dużego Lotka
od Podstaw
9 godz. 20 min · JavaScript · Full-stack i Programowanie
Piotr PalarzWeb DeveloperCzego się nauczysz
- Najważniejsze konstrukcje jezyka JavaScript
- Obiektowy Model Dokumentu i DOM API
- JSON i Ajax
- Nowości z EcmaScript 6
- Praca z npm i snowpack
- 5 praktycznych projektów
Moc języka JavaScript
JavaScript to język programowania, który napędza niemal wszystkie strony internetowe. Dopełnia on technologie HTML i CSS, za pomocą których tworzymy strukturę i wygląd dokumentu. Co jednak w sytuacji, gdy chcemy po kliknięciu w wybrany przycisk wyświetlić powiększone zdjęcie lub wczytać dodatkowe dane z serwera? To właśnie w takich sytuacjach przydaje się język JavaScript i tzw. DOM API, dostępne w przeglądarce. Jak się przekonasz, możliwości nowoczesnych przeglądarek w połączeniu z tym językiem są naprawdę ogromne.
Najważniejsze konstrukcje języka
Język JavaScript może być używany nie tylko na stronach internetowych. Z tego powodu, w kursie omówimy najpierw najważniejsze konstrukcje tego języka, które są niezależne od platformy uruchomieniowej. Dzięki temu zbudujesz fundamenty niezbędne do tego, by wykorzystać ten język np. w środowisku Node.js. Krok po kroku omówimy sposoby tworzenia zmiennych, dostępne typy danych i operatory. Następnie zobaczysz jak tworzyć tablice i obiekty, z jakich instrukcji warunkowych i pętli możesz korzystać, a także jak tworzyć własne funkcje. Przekazywana wiedza uwzględniać będzie nowości, które pojawiły się w języku wraz z rewolucyjnym standardem EcmaScript 6 (ES6).
Obiektowy Model Dokumentu
Sam język JavaScript to nie wszystko, by tchnąć ducha w strony internetowe. Z tego powodu, przeglądarki internetowe udostępniają tzw. DOM API. To interfejs, który z użyciem języka JavaScript pozwala na manipulację treścią i wyglądem strony. W kursie bardzo dokładnie omówimy czym jest Obiektowy Model Dokumentu, a także jak z nim pracować. Zobaczysz jak tworzyć nowe elementy HTML i wstawiać je na stronę, jak modyfikować ich treść, atrybuty, style czy klasy CSS. Poznasz sposoby na odczytywanie położenia elementu na stronie i jego wymiarów, które będą niezbędne w wielu sytuacjach. Dowiesz się także, jak przypisywać obsługę zdarzeń w przeglądarce, by np. wywołać własną funkcję, gdy ktoś kliknie w wybrany przez Ciebie przycisk.
JSON i Ajax
JSON to popularny format wymiany danych, a Ajax to potoczna nazwa dla asynchronicznych zapytań HTTP, które wysyłać możemy z poziomu kodu JavaScript. Dziś niemal każda strona internetowa wykorzystuje te technologie. W niektórych przypadkach jako dopełnienie podstawowej funkcjonalności witryny, a w innych jako główny motor napędzający stronę. Jeśli kiedykolwiek widziałeś, jak na stronie internetowej jakaś treść "doczytuje" się np. podczas przewijania - widziałeś w praktyce Ajax. W jednym z rozdziałów kursu zobaczysz, jak pracować z tym formatem, a także jak wysyłać wspomniane zapytania do serwera.
npm i bundlery kodu
Choć kurs który masz przed sobą, jest kursem dla początkujących, to aby zrozumieć jak działa język JavaScript i jak z nim się współcześnie pracuje, omówimy dwa ważne tematy - zarządzanie zależnościami i bundlowanie kodu. Dowiesz się czym jest npm i jak z jego pomocą pobierać paczki gotowego kodu z internetu, a także jak sprawić, by bez trudnu dołączać je do własnego kodu. W tym celu skorzystamy z narzędzia snowpack, które pozwoli nam także na optymalizację kodu przed jego wypuszczeniem w świat. Na tym etapie omówimy również jak działają moduły ESM, pozwalające dzielić kod na mniejsze części.
5 praktycznych projektów
Kurs podzielony został na możliwie krótkie lekcje, do których w każdej chwili możesz wrócić. Jeśli zatem zapomnisz jak odczytywać wymiary elementu na stronie, szybko odnajdziesz odpowiednią lekcję. Czym jednak była by sama teoria i proste przykłady, bez pokazania, jak połączyć je w całość i wykorzystać w praktyce? Dobra wiadomość jest taka, że w kursie stworzymy aż 5 praktycznych projektów, wykorzystujących zdobytą wcześniej wiedzę. Najpierw napiszemy program losujący Dużego Lotka, następnie dynamiczny pasek postępu przeczytania artykułu, dymek pojawiający się nad elementem po najechaniu na niego myszą, wygenerujemy tabelkę w użytkownikami na podstawie danych JSON, a na koniec tworzymy prosty odtwarzacz wideo, z możliwością pauzowania i przewijania filmu.
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 nie jest wymagana, ale zalecana jest podstawowa wiedza z zakresu samego programowania (czym są zmienne, pętle, funkcje itd.). 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 i zacząć korzystać z nowoczesnych frameworków.
W tej lekcji wykonamy ciekawy, praktyczny
projekt w języku JavaScript, a będzie to losowanie Dużego lotka.
Czyli generalnie chcemy stworzyć taki kod, taki
program, który będzie nam za każdym razem losował 6 liczb w przedziale od 1 do 49.
I teraz wypisałem tutaj założenia jakie musi spełnić nasz program,
czyli w zasadzie będziemy chcieli po kolei sobie
przez to przejść, aby stworzyć taki działający program.
Będzie to
jak widzisz znajdź sposób na generowanie losowej liczby,
kiedy to już będziemy mogli zrobić, to będziemy chcieli się zastanowić jak
stworzyć funkcję, która będzie losować liczby, ale z podanego przedziału, czyli
nie całkiem losową, ale z takiego przedziału jak podamy.
Następnie będziemy chcieli stworzyć
funkcję, która na bazie tego co już mamy będzie losować 6 liczb z przedziału 1 - 49,
będziemy chcieli te liczby wyświetlić i na koniec również zadbać o to, aby w trakcie
takiego jednego losowania dwa razy nie wylosowała się ta sama liczba.
Więc zacznijmy od punktu pierwszego.
W jaki sposób możemy w języku JavaScript generować losowe liczby?
Możemy to zrobić i pokażę Ci to w konsoli
z użyciem takiego globalnego obiektu Math, który zawiera funkcję random.
Za każdym razem jak tą metodę sobie wywołamy, to nam będzie zwracać jakąś
losową liczbę i na tym będziemy chcieli się oprzeć.
Co ważne, random zwraca nam losową liczbę z
przedziału 0.0 do 1.0, czyli tu nigdy nie zwróci dwójki itd.
Ale oczywiście to jest wartość typu
number, więc możemy sobie to odpowiednio pomnożyć.
No i teraz jaka będzie formuła na to, skoro już ten pierwszy punkt można
powiedzieć, że mamy załatwiony, bo znaleźliśmy sposób jak generować losowe
liczby, to teraz jak możemy generować losowe liczby z podanego przedziału.
Pokażę Ci tutaj taką specjalną formułę jak
to zrobić i omówimy jak ona działa, bo chciałbym, żebyś ją po prostu rozumiał.
Nie jest ona bardzo skomplikowana, ale
myślę, że w konsoli uda się ją fajnie pokazać.
A zatem jeżeli Math.random zwraca nam
losową liczbę z przedziału 0.0 do 1.0, czyli tak naprawdę od zera do jednego,
to w jakiś sposób możemy tutaj powiedzieć, że my chcemy losować np.
liczby od 5 do 10.
Nie chcemy innej liczby, tylko takie między 5 a 10.
Robimy tutaj taką formułę, która wygląda w ten sposób Math.random pomnożymy sobie
przez największą liczbę, jaką chcemy wylosować, powiedzmy 10,
od tego odejmiemy najmniejszą, jaką chcemy wylosować, np.
5 i do tego dodamy jeszcze raz najmniejszą, jaką chcemy wylosować.
Wiem, że to się wydaje skomplikowane, zaraz to wytłumaczę.
Zauważ, że teraz jak losujemy to za każdym
razem będą to liczby z przedziału właśnie od 5 do 10.
Tutaj inna liczba się nie pojawi.
Natomiast dlaczego tak to działa.
Skoro tutaj mamy 10 minus 5 to tak naprawdę jest jak byśmy tutaj
podstawili piątkę, a więc Math.random razy 5.
Najpierw się tym zajmijmy.
Co będzie jeżeli za każdym razem będziemy robić Math.random razy 5.
Skoro Math.random jak wspomniałem może nam zwrócić 0, to 0 razy 5 to jest 0,
ale może nam też zwrócić jedynkę, więc 1 razy 5 to jest 5.
Oczywiście może również zwrócić liczby pomiędzy.
Ale skoro takim zapisem jak zrobiłem
wyżej, tak naprawdę możemy otrzymać wyłącznie liczby od zera, bo 0 razy 5 to
będzie 0, a maksymalna 1 razy 5 to będzie 5.
Czyli w ten sposób stworzyliśmy sobie,
można powiedzieć, kod, który generuje liczby od zera do pięciu.
Więc jak sprawić, żeby tutaj były liczby od 5 do 10?
Otóż okazuje się, że właśnie do tego wystarczy dodać 5, bo co się wtedy stanie?
Jeżeli byśmy z Math.random mieli zwrócone 0, to 0
razy 5 zwróci nam 0, ale jeżeli do tego dodamy piątkę, to będziemy mieli liczbę 5.
Czyli tak naprawdę nigdy nie będziemy mieli liczb mniejszych niż 5.
A o to nam chodziło tutaj, żeby generować od 5.
Bo jeżeli Math.random nam zwróci np.
03, pomnożymy to razy, 5 wyjdzie nam 1,5
to jest mniejsza od piątki, od której chcieliśmy zacząć,
ale jeżeli do tego dodamy 5, zauważ, że dokładnie tak się stanie.
Będziemy tutaj mieli 6,5. Czyli nigdy
nie będzie dzięki takiemu zapisowi liczby mniejszej niż 5.
A zatem ten pierwszy warunek jest spełniony.
Chcemy losować liczby od pięciu.
Teraz pytanie w jaki sposób będzie tutaj
spełniony ten warunek, że liczba nigdy nie będzie większa od 10?
Otóż wyobraź sobie, co się stanie, jeżeli Math.random zwróci nam 1.
To jest maksymalna liczba, jaką może zwrócić.
Jeżeli zrobimy 1 razy 5 i do tego dodamy 5, to będzie to 10, czyli
dzięki temu nigdy nie będzie tutaj liczby większej od 10.
A zatem mam nadzieję, że ta formuła ma dla
Ciebie sens. Jeżeli w ten sposób ją będziemy zapisywać.
A więc Math.random razy
liczba, do której chcemy losować, minus liczba, od której chcemy losować, czyli
dolny próg przedziału plus jeszcze raz ten dolny próg.
W ten sposób jeżeli chcielibyśmy losować liczby np.
od powiedzmy 10 do 100, to tutaj byśmy
musieli wpisać 100, tutaj 10 i tutaj również 10.
Teraz będą to takie liczby.
Natomiast my chcemy losować liczby całkowite
a zatem jak taką liczbę, która została wylosowana, zamienić na liczbę całkowitą?
Okazuje się, że taką liczbę wystarczy
wstawić do specjalnej metody, która nazywa się Match.round
i jak ją tutaj wstawimy, to nam zwróci po prostu 68.
Jak widzisz tak dokładnie będzie wyglądać.
Czyli chcemy taki kod jak tutaj mamy wstawić jeszcze do Mat.round.
Jeżeli na tym etapie to rozumiesz,
mam nadzieję, że tak, to przechodzimy do napisania własnej funkcji.
Jeżeli nie, przewiń sobie kilka minut i jeszcze raz
spróbuj to wszystko zrozumieć.
Starałem się to bardzo dokładnie wytłumaczyć.
Zatem jeżeli teraz przejdziemy do kodu
i będziemy chcieli sobie stworzyć taką funkcję, która nam będzie losować liczby z
podanego przedziału, to ja tę funkcję nazwę getRandom
i będziemy chcieli móc jej dynamicznie przekazywać parametry min i max.
Czyli właśnie np.
od pięciu do dziesięciu, albo w naszym przypadku od 1 do 49.
To będzie dokładnie to co w konsoli pokazałem, czyli to 100 i10 to będzie min.
Tutaj też min.
a 100 to będzie max.
I teraz ta funkcja będzie po prostu
zwracać Math.round, czyli zaokrąglić chcemy to, co zostanie tutaj wyliczone
a tu będziemy chcieli zrobić dokładnie to co w konsoli czyli Math.random razy
i w nawiasach będziemy chcieli odjąć max minus min i do tego jeszcze dodać min.
To jest dokładnie to samo co w konsoli,
tylko tu będzie dynamicznie podstawione przez te parametry.
Zatem jeżeli teraz tę funkcję sobie tutaj wywołamy getRandom i podamy tak jak
mówiłem 5 i 10 zawsze będziemy tutaj mieli liczbę pomiędzy 5 a 10. No i my będziemy
chcieli podawać tutaj liczby pomiędzy 1 i 49.
W ten sposób to będzie wyglądać.
Przejdźmy zatem do kolejnego punktu. Będzie to
Stwórz funkcję, która wylosuje 6 liczb z przedziału 1 - 49.
Więc tę funkcję nazwiemy np.
getRandomNumbers,
ona będzie tak wyglądać
i będziemy chcieli teraz po prostu 6 razy wykonać sobie funkcję getRandom
a więc stworzymy sobie pętlę, no i jak 6 razy
wykonamy, to ta funkcja nam 6 razy zwróci jakąś liczbę.
A zatem te liczby gdzieś musimy przechowywać.
W tym celu utworzymy sobie tablicę, bo jest to świetne miejsce do przechowywania wielu
wartości i będziemy chcieli stworzyć pętlę, która się wykona 6 razy.
A więc w tej funkcji tworzymy pętlę
w najprostszy możliwy sposób stworzyli byśmy pętlę for,
już Ci to w tym kursie pokazywałem i
będziemy chcieli iterować tak długo jak i jest mniejsze od 6 bo zaczynamy od zera,
pamiętaj i zwiększamy wartość i. W razie czego wróć do lekcji o pętlach.
Ta pętla po prostu kod, który tutaj podam wykona 6 razy.
A zatem będę chciał tutaj sobie za każdym razem tworzyć taką stałą jak random.
Tutaj wywołam funkcję getRandom
i przekażę jej 1, 49, bo chcemy tutaj po prostu wylosować jedną liczbę z takiego
przedziału, tą liczbę zapisać w stałej random i następnie wstawić do numbers.
Czyli wstawimy to do numbers za pomocą metody push.
Nie musielibyśmy nawet tutaj tworzyć tej
zmiennej, to getRandom można też od razu tutaj podać.
Będzie to działać dokładnie tak samo. Czyli dodaliśmy sobie to tutaj i na końcu
będziemy chcieli całą tablicę numbers zwrócić z tej funkcji.
Czyli ta funkcja wylosuje nam 6 liczb. A
więc można powiedzieć, że punkt trzeci będziemy mieli gotowy.
Teraz będziemy te liczby chcieli
wyświetlić, a więc po wywołaniu tej funkcji otrzymamy tablicę
zatem zapiszmy sobie ją w stałej numbers wywołujemy getRandomNumbers,
wiemy, że ta funkcja zwróci nam tablicę z
sześcioma liczbami, więc możemy sobie w konsoli podejrzeć co jest w numbers.
I jest to taka oto tablica i teraz jak możemy ją wyświetlić?
Otóż na tablicach jest taka metoda jak
join, której możemy przekazać na czym chcemy połączyć elementy tablicy.
Jeżeli tutaj podam przecinek i spację
to zauważ w ten sposób otrzymamy string, który nam łączy wszystkie te elementy
tablicy. Więc jest to bardzo przydatna metoda.
Zatem punkt czwarty wyświetl wylosowane
liczby możemy zrealizować w taki sposób console.log
i tutaj sobie zrobimy taki Template
String, gdzie napiszemy wylosowane liczby to
i tutaj po prostu zrobimy numbers.join i połączymy je na przecinku i spacji.
OK, zobaczmy.
No i za każdym odświeżeniem strony będziemy mieli inne wylosowane liczby.
Natomiast tutaj może się zdarzyć taka
sytuacja, że dwa razy wylosujemy identyczną liczbę.
No i dlaczego tak się dzieje?
Otóż ta pętla się wykona tylko 6 razy.
Za każdym razem będzie to 6 razy, więc
może się okazać, że getRandom przy pierwszym wykonaniu zwróci np.
dwójkę,
tą dwójkę wstawimy do tablicy numbers no i obracamy się kolejny raz w pętli i może
być tak, że znowu wylosuje dwójkę i znowu dwójkę dodamy do tej tablicy.
A my chcemy mieć tutaj 6 unikatowych liczb.
Jak zatem możemy rozwiązać ten problem, czyli zrealizować punkt piąty?
Dodaj mechanizm, który nie pozwoli wylosować drugi raz tej samej liczby.
Otóż musimy skorzystać z pętli
w pętli. A więc w pętli for
będziemy chcieli stworzyć pętlę while.
I to się może wydawać skomplikowane, ale
jest jak najbardziej możliwe i pożądane w tym momencie.
I pokażę Ci teraz jak to zrobić.
Czyli na początek zamiast tutaj tworzyć
stałą random, to będę chciał utworzyć zmienną, która się nazywa random.
Ona nie musi nic przechowywać. I teraz tutaj będziemy chcieli do tej
właśnie zmiennej przypisać wylosowaną liczbę.
Natomiast to będziemy chcieli zrealizować później.
Tutaj jeszcze wstawimy pewien kod.
Więc wyobraźmy sobie co się dzieje.
Losujemy sobie jakąś liczbę przy pierwszej iteracji i tutaj nie ma żadnych liczb.
Powiedzmy, że wylosowałem dwójkę
i teraz chciałbym sprawdzić, czy w tej tablicy już jest dwójka.
Jeżeli jest, to chcę jeszcze raz wylosować
inną liczbę, natomiast jeżeli jej nie ma, po prostu chcę ją dodać.
Więc w tym miejscu świetnym rozwiązaniem będzie pętla while,
która będzie się wykonywać tak długo, jak podany tutaj warunek będzie prawdziwy.
A więc chcę tutaj powiedzieć while, czyli tak długo jak w tablicy numbers znajduje
się wylosowana właśnie liczba losuj nową liczbę.
Więc jak możemy spytać czy w tablicy
numbers jest wylosowana powiedzmy dwójka, która byłaby tutaj podstawiona?
Otóż możemy się odwołać do tej tablicy numbers i ona ma metodę includes
i możemy tam przekazać to czego szukamy, czyli właśnie wylosowaną liczbę.
Cały ten zapis zwróci nam true lub false.
Czyli właśnie jeżeli do while zostanie
zwrócone false, to ta pętla w ogóle się nie wykona.
Co chcemy w tej pętli zrobić?
Otóż to co powiedziałem, czyli jeszcze raz nadpisać tą zmienną random,
czyli jeszcze raz po prostu wylosować liczbę z przedziału 1, 49 i przy
okazji dodamy sobie console.log, żeby wiedzieć, że tutaj się ten kod wykonał.
Napiszemy powtórzyła się liczba i zinterpoluje tutaj random.
Więc prześledźmy sobie co tutaj się w tym momencie dzieje.
Wchodzimy do tej pętli,
tablica jest pusta.
Wylosowaliśmy powiedzmy dwójkę, czyli pod
random jest dwójka i wykonujemy pętla while.
Mówimy tak długo, jak w tej tablicy znajduje się dwójka, losuj
jeszcze raz. Wiemy, że tam dwójki nie ma.
Cały ten zapis zwróci nam false.
To while się w ogóle nie wykona, tak jakby go tutaj nie było.
Czyli dwójkę dodajemy sobie do tej tablicy.
Przechodzimy do kolejnej iteracji pętli for
I co się dzieje?
Nadpisujemy tą zmienną random, w której była dwójka, losując kolejną liczbę.
Może się wylosuje 3, może 5,
ale wyobraźmy sobie, że znowu się wylosowała dwójka. Więc co tutaj
sprawdźmy? Czy w tablicy numbers jest już dwójka.
Tak, to nam zwróci true.
A zatem chcemy jeszcze raz
wykonać losowanie. I teraz getRandom zwróci nam tutaj np. trójkę,
znowu się wykona ten warunek, no i wiemy, że tu będzie
wtedy false, przejdziemy do dodania tej liczby.
Natomiast gdyby znowu się wylosowała dwójka, tak się może zdarzyć, że powiedzmy
trzy razy z rzędu zostanie wylosowana dwójka,
no to skoro dwójka już w tej tablicy jest, to zostanie zamieniona na true
i jeszcze raz będziemy losować.
A więc ta pętla while tutaj gwarantuje nam
to, że tak długo jak będzie wylosowana liczba, która już się znajduje w tej
tablicy, to będziemy wykonywać ten kod jeszcze raz i jeszcze raz i jeszcze raz.
Zazwyczaj będzie tak, że on się ani raz
nie wykona albo wykona się tylko raz, ale teoretycznie może się wykonać bardzo wiele
razy do momentu, aż będziemy mieli liczbę, która się nie powtarza.
I dopiero wtedy wyskakujemy z tej pętli wchodząc tutaj.
A na tym etapie pod zmienną random
będziemy mieli już liczbę, która na pewno się nie powtórzyła
i to ją chcemy dodać do tej tablicy.
I dopiero kiedy te dwie pętle można
powiedzieć się zakończą, zwracamy numbers.
Dzięki temu teraz jak będziemy odświeżać,
mamy unikatowe liczby, ale za którymś razem zobaczymy
tutaj powtórzyła się liczba np.
35.
Czyli dzięki tej pętli while nie mamy w tej tablicy
tutaj jak widzisz dwa razy trzydziestki
piątki, a w innym wypadku tak by się dokładnie stało.
Przy okazji tutaj dodajmy jeszcze a.
No i w zasadzie to jest wszystko.
Jak widzisz, kod nie jest zbyt długi, ale należy go dobrze zrozumieć, więc w razie
czego jeszcze raz sobie obejrzyj tę lekcję i spróbuj wszystko zrobić razem ze mną.
Mam nadzieję, że na tym etapie uda Ci się zrozumieć, co tutaj się dzieje,
no i dzięki temu zyskasz jakąś nową wiedzę z zakresu języka JavaScript.