29.08.2022 Views

JavaScript - podręcznik

Niniejszy podręcznik stanowi element innowacji społecznej HEAR_IT, która powstała w ramach Inkubatora Włączenia Społecznego.

Niniejszy podręcznik stanowi element innowacji społecznej HEAR_IT, która powstała w ramach Inkubatora Włączenia Społecznego.

SHOW MORE
SHOW LESS

Create successful ePaper yourself

Turn your PDF publications into a flip-book with our unique Google optimized e-Paper software.

Żywa pagina<br />

<strong>podręcznik</strong> hearIT<br />

JAVASCRIPT<br />

niech kod będzie z Tobą!<br />

1


Żywa pagina<br />

Wydawca: Bartosz Kosiński – Far Beyond Business<br />

Licencja: Creative Commons BY-SA<br />

ISBN: 978-83-63278-74-8<br />

Autor: Bartosz Kosiński<br />

Opracowanie graficzne, skład i korekta: Piotr Kulig<br />

HEAR_IT: www.hearit.pl<br />

2


Żywa pagina<br />

Niniejsza publikacja stanowi część innowacji społecznej HEAR_<br />

IT opracowanej przez Stowarzyszenie Edukacji Pozaformalnej<br />

„Meritum”.<br />

Innowacja uzyskała wsparcie finansowe w ramach projektu Inkubator<br />

Włączenia Społecznego, który realizowany jest przez<br />

Regionalny Ośrodek Polityki Społecznej w Krakowie, Fundację<br />

Rozwoju Demokracji Lokalnej im. Jerzego Regulskiego oraz<br />

Uniwersytet Jagielloński w Krakowie.<br />

Projekt wdrażany w ramach IV Osi Priorytetowej Programu<br />

Operacyjnego Wiedza Edukacja Rozwój (Działanie 4.1: Innowacje<br />

społeczne), na zlecenie Ministerstwa Rozwoju, finansowany<br />

jest ze środków Unii Europejskiej w ramach Europejskiego Funduszu<br />

Społecznego. Projekt jest realizowany od 1 października<br />

2020 r. do 30 września 2023 r. w całej Polsce. Wartość projektu<br />

wynosi 5 855 993,00 zł.<br />

3


Żywa pagina<br />

Podręcznik hearIT – <strong>JavaScript</strong><br />

Wprowadzenie 6<br />

Pierwsze kroki w HTML 9<br />

Wprowadzenie w CSS 18<br />

Selektory 20<br />

Jak dodać styl do naszej strony? 23<br />

<strong>JavaScript</strong> – z czym to się je? 25<br />

Pierwszy program w <strong>JavaScript</strong> 27<br />

Różne rodzaje zmiennych 33<br />

Zmienne 37<br />

Praca z tablicami 56<br />

Jak pracować z obiektami 61<br />

Instrukcje warunkowe w <strong>JavaScript</strong> 66<br />

Różne rodzaje pętli 73<br />

Parę słów o funkcjach 79<br />

Podsumowanie 89<br />

4


5<br />

Żywa pagina


Wprowadzenie<br />

Wprowadzenie<br />

Praca nad stronami internetowymi jest ciekawym, ale też wymagającym<br />

zadaniem. Wymaga zaangażowania odpowiedniej<br />

liczby ekspertów z różnych dziedzin: grafików komputerowych,<br />

twórców treści, specjalistów od organizowania strony internetowej,<br />

ale także programistów.<br />

Strony internetowe tworzone są w języku znaczników HTML,<br />

który nie jest językiem programowania, ale przede wszystkim<br />

sposobem organizowania treści na stronie. Fundamenty każdej<br />

strony internetowej tworzone są właśnie w HTML. Przeglądarka<br />

internetowa – np. Edge, Firefox, Chrome – analizuje<br />

HTML strony i na tej podstawie tworzy jej wizualną, przyjemną<br />

dla oka wersję, z którą mamy styczność, gdy przeglądamy internet.<br />

W pierwszym rozdziale tego <strong>podręcznik</strong>a dowiesz się,<br />

w jaki sposób działa HTML oraz jak stworzyć swoją pierwszą,<br />

najprostszą stronę internetową.<br />

6<br />

Powrót do spisu treści


Wprowadzenie<br />

Każdy ma swój styl! Niektórzy ubierają się na czarno, inni używają<br />

szminki o określonym kolorze, słuchają określonego gatunku<br />

muzyki. Wykorzystujemy różne środki, by podkreślić to,<br />

jak wyglądamy. Budujemy dzięki temu sposób, w jaki będziemy<br />

przez innych odbierani. Podobnie jest ze stronami internetowymi.<br />

Strony internetowe wykorzystują style CSS, dzięki którym<br />

organizowany jest sposób, w jaki różne elementy na stronie<br />

będą prezentowane wizualnie. Style CSS określają między<br />

innymi, jak będzie prezentować się na stronie dany akapit, jak<br />

będzie wyglądało hiperłącze. Style CSS mogą określać rodzaj<br />

wykorzystanego fontu 1 , kolor i wielkość tekstu, obramowania<br />

w tabeli itd. Stylami CSS zajmiemy się w drugim rozdziale<br />

tego <strong>podręcznik</strong>a.<br />

W trzecim rozdziale dowiemy się, czym jest język <strong>JavaScript</strong><br />

i do czego służy. Na ten moment warto zapamiętać, że możemy<br />

używać tego języka programowania do tworzenia różnych interaktywnych<br />

elementów na stronie internetowej. W kolejnych<br />

rozdziałach poznamy kolejne, coraz bardziej zaawansowane<br />

1 W branży IT częściej używa się określenia font niż czcionka.<br />

Pierwotnie czcionkami były metalowe prostopadłościany z wypukłymi<br />

znakami na jednej ze ścianek. Czcionki układano tak, aby tworzyły<br />

tekst, pokrywano tuszem i odciskano na papierze, w ten sposób<br />

składając np. książkę. Kiedy tradycyjne maszyny drukarskie wyszły<br />

z użycia, wyparte przez druk cyfrowy, zaprzestano stosowania tradycyjnych<br />

czcionek, zastępując je fontem. Font jest to więc zestaw<br />

czcionek zdygitalizowany w formie elektronicznej. Można powiedzieć,<br />

że to rodzaj oprogramowania, które umożliwia wyświetlanie<br />

kroju pisma na ekranie urządzeń elektronicznych, jak monitor, laptop<br />

czy smartfon.<br />

7<br />

Powrót do spisu treści


Wprowadzenie<br />

elementy języka <strong>JavaScript</strong>, takie jak zmienne, tablice, obiekty,<br />

instrukcje warunkowe oraz pętle. Język <strong>JavaScript</strong> jest dobrym<br />

językiem do rozpoczęcia swojej przygody z programowaniem.<br />

Nie jest to trudny język i pozwala na stosunkowo łatwe zapamiętanie<br />

podstawowych pojęć i zależności, które występują<br />

w podobnej formie w praktycznie wszystkich pozostałych językach<br />

programowania. Do dzieła więc!<br />

8<br />

Powrót do spisu treści


Pierwsze kroki w HTML<br />

Pierwsze kroki w HTML<br />

<strong>JavaScript</strong> jest dość unikatowym językiem programowania.<br />

Jego wyjątkowość objawia się m.in. w tym, że nie jest to język,<br />

który jest w stanie działać samodzielnie. <strong>JavaScript</strong> jest interpretowany<br />

przez przeglądarki internetowe i łączony w jedną<br />

całość ze stronami internetowymi, w obrębie których funkcjonuje.<br />

Same strony internetowe natomiast tworzone są na<br />

podstawie tzw. języka znaczników – HTML oraz stylów CSS.<br />

Język znaczników, którego podstawy poznacie, pozwala na<br />

tworzenie struktury stron internetowych i wypełniania ich odpowiednio<br />

uporządkowaną treścią. Style CSS wpływają natomiast<br />

na wizualny aspekt strony internetowej, wpływają na to,<br />

w jaki sposób odpowiednie elementy strony wyglądają oraz<br />

jak się zachowują (np. po najechaniu na nie kursorem myszki).<br />

Tym samym style CSS w bardzo ograniczonym stopniu wpływają<br />

na interaktywny charakter strony internetowej, jednak<br />

9<br />

Powrót do spisu treści


Pierwsze kroki w HTML<br />

do wykonania bardziej zaawansowanych interakcji trzeba już<br />

wykorzystać dodatkowe narzędzia – w tym przede wszystkim<br />

język programowania <strong>JavaScript</strong>.<br />

Język znaczników<br />

HTML (z angielskiego HyperText Markup Language) nie jest<br />

językiem programowania ale tzw. językiem znaczników. Zbudowany<br />

jest ze słów kluczy, umieszczonych pomiędzy znakami<br />

< i >.<br />

Słowo klucz umieszczone pomiędzy tymi znakami: < i > nosi<br />

właśnie nazwę znacznika, np.:<br />

<br />

Znaczniki mogą działać samodzielnie, wywołując określony<br />

efekt, np.<br />

<br />

spowoduje przejście tekstu do kolejnej linijki.<br />

Większość znaczników działa jednak w parach:<br />

Tutaj jest jakiś tekst<br />

Zauważcie, że w tym przykładzie pojawiły się dwa znaczniki:<br />

, a pod spodem bardzo podobny znacznik, ale z dodatkowym<br />

ukośnikiem – .<br />

10<br />

Powrót do spisu treści


Pierwsze kroki w HTML<br />

W takiej sytuacji pierwszy znacznik otwiera, a drugi zamyka<br />

obszar, w którym działają te znaczniki.<br />

Taki zapis oznacza, że znaczniki te wpływają na wszystko, co<br />

znajduje się między nimi. Znaczniki powodują, że każdy<br />

tekst, który znajdzie się między nimi zostanie pogrubiony.<br />

Struktura strony internetowej<br />

Każda strona internetowa ma pewną podstawową, powtarzalną<br />

strukturę, która wygląda następująco:<br />

<br />

<br />

<br />

<br />

<br />

<br />

Znaczniki oraz stanowią pierwszy i ostatni<br />

znacznik na każdej stronie internetowej. Oznaczają one po<br />

prostu, że wszystko, co znajduje się pomiędzy nimi, stanowi<br />

zamkniętą strukturę pojedynczej strony internetowej. To trochę<br />

tak jak w książce, w której mamy okładkę z przodu i z tyłu,<br />

wszystko co znajduje się pomiędzy nimi stanowi właściwą<br />

treść książki.<br />

11<br />

Powrót do spisu treści


Pierwsze kroki w HTML<br />

Uwaga, dobrą praktyką przy tworzeniu stron internetowych jest<br />

dodanie jeszcze jednego znacznika przed otwarciem pierwszego<br />

. Chodzi mianowicie o . Jest to jednoznaczna<br />

deklaracja do przeglądarek internetowych, że mają<br />

do czynienie z plikiem, w którym znajduje się strona internetowa<br />

opisana w hipertekstowym języku znaczników – czyli właśnie<br />

w HTML.<br />

Do pierwszego znacznika bardzo często dopisuje się<br />

także informację, w jakim języku napisana jest strona internetowa.<br />

Zapis taki wygląda następująco:<br />

<br />

W ten sposób przeglądarka będzie mogła dopasować preferencje<br />

językowe, ale także w odpowiedni sposób podstawić<br />

fonty alternatywne.<br />

Kolejne dwa znaczniki i wyznaczają fragment<br />

strony, w której znajdują się informacje organizacyjne strony<br />

internetowej. Informacje zawarte w części head w większości<br />

przypadków nie są bezpośrednio wyświetlane w przeglądarce<br />

internetowej, ale wpływają na to, jak strona jest wyszukiwana,<br />

interpretowana przez przeglądarkę, jak się zachowuje w określonych<br />

sytuacjach. Co może się znaleźć w tej części, tzn. pomiędzy<br />

a ?<br />

12<br />

Powrót do spisu treści


Pierwsze kroki w HTML<br />

1. i – pomiędzy tymi znacznikami można<br />

wstawić fragment kodu <strong>JavaScript</strong>, który uruchomi się<br />

w momencie załadowania strony.<br />

2. i – pozwalają na określenie wyglądu poszczególnych<br />

elementów strony zgodnie z zasadą stylów<br />

kaskadowych CSS, które zostaną dokładniej opisane w kolejnym<br />

rozdziale.<br />

3. i – pozwalają wprowadzić tytuł strony,<br />

który w niektórych przeglądarkach wyświetlany jest w górnej<br />

części okna. Tytuł strony też do pewnego stopnia wpływa<br />

na to, w jaki sposób strona może być wyszukana w przeglądarce<br />

internetowej.<br />

W części znajdować się będą wszystkie elementy, które<br />

mają być widoczne na stronie internetowej.<br />

Jeśli wpiszemy tutaj jakikolwiek tekst (nawet bez znaczników),<br />

to i tak będzie on widoczny na stronie internetowej. Za pomocą<br />

różnych znaczników wpływać będziemy na to, jak tekst<br />

będzie wyglądać, jak będzie uporządkowany oraz dokąd nasza<br />

strona będzie mogła nas przenieść (za pomocą tzw. hiperłączy).<br />

Znaczników takich jest bardzo dużo i w tym <strong>podręcznik</strong>u<br />

przedstawimy jedynie skromny ich wycinek. Ale nie martw się!<br />

W internecie znajdziesz naprawdę bardzo dużo dodatkowych<br />

materiałów na ten temat!<br />

13<br />

Powrót do spisu treści


Pierwsze kroki w HTML<br />

… – te znaczniki będą wydzielać paragraf/akapit, czyli<br />

jeden zamknięty blok tekstu. W ten sposób, podobnie jak w edytorze<br />

tekstu, możemy oddzielać od siebie fragmenty tekstu.<br />

– znacznik ten spowoduje przejście do kolejnej linijki. Możemy<br />

dzięki temu wymusić przeniesienie tekstu do kolejnego<br />

wersu, albo wykorzystując podwójne obok siebie<br />

zrobić większy odstęp pomiędzy poszczególnymi elementami<br />

na stronie.<br />

… – ten znacznik spowoduje, że tekst umieszczony<br />

pomiędzy początkiem a końcem znacznika będzie pogrubiony.<br />

Podobnie będą działały znaczniki – do pisania kursywą,<br />

czyli pochylania tekstu oraz do podkreślania tekstu.<br />

Link do strony –<br />

ten znacznik umożliwi dodanie linku do tekstu na stronie. Gdy<br />

klikniemy lewym przyciskiem na ten link (inaczej hiperłącze), to<br />

zostaniemy przeniesieni na nową stronę internetową, podstronę<br />

lub wybrany fragment strony.<br />

– ten znacznik wstawi poziomą linię w miejscu, w którym<br />

zostanie wstawiony.<br />

… – Division, czyli sekcja, to wybrany, większy<br />

fragment strony, np. artykuł złożony z kilku akapitów. Dzięki<br />

sekcjom możemy w łatwiejszy sposób organizować różne elementy<br />

na stronie.<br />

14<br />

Powrót do spisu treści


Pierwsze kroki w HTML<br />

… – w ten sposób możemy budować strukturę strony/artykułu,<br />

wykorzystując nagłówki. to nagłówek najwyższego<br />

poziomu. Później możemy dodawać podtytuły ,<br />

, , do . Odpowiednie używanie nagłówków<br />

jest bardzo ważne przy tworzeniu strony. Nie tylko ze względu<br />

na kwestie estetyczne, ale także dlatego, że korzystają z nich<br />

tzw. audiodeskryptory. Dzięki nim osoby niewidome lub niedowidzące<br />

mogę się łatwiej odnaleźć na stronie internetowej.<br />

Identyfikatory i klasy<br />

Każdy znacznik możemy dodatkowo przypisać do określonych<br />

klas i nadać im wybrany identyfikator. Identyfikator to unikatowa<br />

nazwa, dzięki któremu możemy łatwo odnaleźć dany element<br />

w kodzie strony. Identyfikatorów używać będziemy także<br />

w CSS i <strong>JavaScript</strong>, żeby zmienić wygląd albo dostać się do<br />

wybranego fragmentu strony. Identyfikatory nadajemy przez<br />

słowo-klucz „id”.<br />

Dodatkowo każdy znacznik możemy też przypisać do wybranej<br />

klasy, może to być np. klasa – „czarnetlo”. Wszystkie elementy<br />

tej klasy możemy tak opisać w CSS, by miały one tło nie białe,<br />

ale czarne. Na pracę z identyfikatorami i klasami przyjdzie jeszcze<br />

pora, ale póki co ważne jest, byś wiedział/a, że takie coś<br />

istnieje i jak wygląda w kodzie html:<br />

Nagłówek<br />

15<br />

Powrót do spisu treści


Pierwsze kroki w HTML<br />

<br />

W ten sposób znacznik o treści Nagłówek został przypisany<br />

do klasy „stronaglowna” – może to być klasa, która przypisana<br />

jest do wszystkich elementów na stronie głównej, przez co<br />

będą one wyglądać inaczej, niż podobne elementy na podstronach.<br />

Id „pierwszynaglowek” pozwala nam odnieść się do tego<br />

konkretnego elementu na stronie. Przydałby się jakiś przykład,<br />

prawda?<br />

Załóżmy, że mamy jakąś szkołę. Uczniowie w szkole przypisani<br />

są do różnych klas. Jeśli ktoś jest z klasy 4C, to w danym dniu<br />

ma określony plan zajęć. Plan zajęć jest taki sam dla każdej osoby<br />

z tej klasy bez względu na płeć czy nazwisko. Każda osoba<br />

przypisana do danej klasy ma pojawić się na określonej lekcji<br />

w określonym czasie. Ale oprócz tego, że osoby mogą być<br />

przypisane do klasy, to mają one też swoje unikatowe imiona<br />

(czyli identyfikatory). I w ten sposób nauczyciel może wywołać<br />

do odpowiedzi konkretną osobę z danej klasy. Powie np. „Gosia<br />

do odpowiedzi” i w efekcie Gosia zrobi bardzo smutną minę.<br />

W praktycznie każdej przeglądarce internetowej można podejrzeć<br />

tzw. źródło strony. Spróbuj teraz wejść na dowolną stronę<br />

internetową, a następnie kliknąć w dowolnym miejscu i wybrać<br />

opcję: „wyświetl źródło strony”. Zobaczysz wtedy, jak wygląda<br />

ta strona napisana w kombinacji HTML, CSS i <strong>JavaScript</strong>. Na<br />

16<br />

Powrót do spisu treści


Pierwsze kroki w HTML<br />

pewno będzie to bardzo skomplikowany zapis i wielu elementów<br />

nie będziesz jeszcze znać. Nic nie szkodzi! Przyjdzie i na to<br />

czas. Póki co spróbuj przejrzeć stronę od początku do końca<br />

i poszukaj na niej elementów, które już poznałeś/aś. Spróbuj<br />

zidentyfikować znane Ci już atrybuty i przypomnieć sobie, do<br />

czego służą.<br />

Do tworzenia strony w HTML nie są potrzebne żadne skomplikowane<br />

programy. Wystarczy zwykły Notatnik. Możesz spróbować<br />

napisać najprostszą stronę HTML, a jedyne co musisz<br />

zrobić, to zapisać gotowy plik z rozszerzeniem html, a następnie<br />

uruchomić go w dowolnej przeglądarce internetowej.<br />

17<br />

Powrót do spisu treści


Pierwsze kroki w CSS<br />

Wprowadzenie w CSS<br />

CSS (z angielskiego – Cascading Style Sheets) jest językiem,<br />

który opisuje to, w jaki sposób różne rzeczy wyglądają na stronie<br />

internetowej. Może wpływać na kolory tekstu lub tła, układ,<br />

fonty itd. CSS, podobnie jak HTML, nie jest językiem programowania.<br />

Współpracuje on z HTML, aby w łatwiejszy sposób<br />

organizować to, jak prezentuje się nasza strona internetowa.<br />

Reguły CSS<br />

CSS składa się z listy tzw. reguł. Reguły określają, jak ma wyglądać<br />

i zachowywać się wybrany fragment strony.<br />

Reguły zapisujemy następująco:<br />

p {<br />

color: red;<br />

}<br />

18<br />

Powrót do spisu treści


Pierwsze kroki w CSS<br />

Selektor<br />

Jest to element HTML, którego dotyczy wybrana reguła. W powyższym<br />

przykładzie jest to , a więc ta reguła będzie dotyczyła<br />

tego, jak mają wyglądać wszystkie akapity na stronie.<br />

Deklaracja<br />

To pojedyncza właściwość, w naszym przykładzie to color:<br />

red. Takich reguł może być dużo więcej w ramach jednego selektora.<br />

Odnosić się mogą do wybranego fontu, jego koloru,<br />

wielkości, układu, ale także np. do koloru tła. Wszystkie reguły<br />

wpisane do deklaracji działają łącznie i opisują, jak ma wyglądać<br />

dany fragment strony.<br />

Wartość<br />

Wartość, jaka ma być nadana wskazanej właściwości (właściwość<br />

i wartość oddzielamy dwukropkiem). Wartość może być<br />

dowolna, w naszym wypadku jest to kolor czerwony – red, ale<br />

równie dobrze może to być: black, yellow, green, blue…<br />

Nawiasy klamrowe<br />

Zbiór deklaracji dotyczących danego elementu w regule musi<br />

zostać umieszczona w nawiasach klamrowych { }.<br />

Średniki<br />

Każda kolejna deklaracja musi kończyć się średnikiem (;).<br />

19<br />

Powrót do spisu treści


Pierwsze kroki w CSS<br />

Dwukropki<br />

Dwukropek w deklaracji oddziela właściwość od wartości (:).<br />

Właściwość znajduje się po lewej stronie dwukropka, wartość<br />

po prawej.<br />

Jeśli większa liczba elementów strony ma wyglądać podobnie,<br />

to możemy wprowadzić uproszczony zapis. Przecinki pozwalają<br />

nam dopasować ten sam zestaw reguł do większej liczby<br />

selektorów. Poniżej jest tego przykład:<br />

p, h2, h3 {<br />

color: blue;<br />

}<br />

W praktyce reguły składają się najczęściej z więcej niż jednej<br />

deklaracji:<br />

p {<br />

color: black;<br />

margin-bottom: 4px;<br />

width: 40px;<br />

}<br />

Selektory<br />

Selektor wskazuje na element lub grupę elementów, których<br />

dotyczy dana reguła. Powyżej selektorami były wybrane znaczniki<br />

HTML, takie jak np.: , , . Ale istnieje jeszcze<br />

więcej sposobów, by odnieść się tylko i wyłącznie do wybranych<br />

elementów strony.<br />

20<br />

Powrót do spisu treści


Pierwsze kroki w CSS<br />

Selektor identyfikatora<br />

Wybiera element o podanym identyfikatorze. W poprzednim<br />

rozdziale powiedzieliśmy już sobie, że każdy element strony<br />

może mieć nadany identyfikator. Selektor identyfikatora oznaczamy<br />

symbolem #<br />

Jeśli więc mamy na stronie akapit zidentyfikowany jako main:<br />

to jest główny akapit na stronie <br />

To w CSS możemy się do niego odnieść następująco:<br />

#main {<br />

font-family: verdana;<br />

font-size: 20px;<br />

}<br />

p {<br />

font-family: arial;<br />

font-size: 18px;<br />

}<br />

W tej sytuacji tekst w paragrafie (lub innym fragmencie strony)<br />

o identyfikatorze main będzie zapisany czcionką Verdana<br />

i będzie miał wielkość 20px. Wszystkie pozostałe akapity <br />

bez identyfikatora main będą pisane czcionką Arial o wielkości<br />

18px.<br />

21<br />

Powrót do spisu treści


Pierwsze kroki w CSS<br />

Selektor klasy<br />

Wskazuje na elementy, które zawierają podaną klasę i wybieramy<br />

je ze znakiem kropki.<br />

.klasa4b odpowiada wszystkim elementom przypisanym do<br />

danej klasy, np.:<br />

...<br />

....<br />

…<br />

Jeśli w CSS wpiszemy następujący fragment kodu:<br />

.klasa4b{<br />

text-align: center;<br />

color: red;<br />

}<br />

To elementy tej klasy będą miały kolor czerwony i będą wyśrodkowane<br />

na stronie.<br />

Powyższa lista selektorów nie jest kompletna, ale na tym etapie<br />

powinna być wystarczająca!


Pierwsze kroki w CSS<br />

Text-align: center; – wyśrodkowanie tekstu<br />

Text-align: left; – wyrównanie tekstu do lewej strony<br />

Background-color: Blue; – ustawienie koloru tła na niebieski<br />

Color: Black; – ustawienie koloru wybranego elementu, np.<br />

tekstu na czarny<br />

Border-style: solid; – ustawienie ciągłego obramowania wokół<br />

elementu<br />

Margin-top: 100px; – ustawienie marginesu górnego danego<br />

elementu na 100px<br />

Text-decoration-line: underline; – dodanie podkreślenia<br />

pod tekstem<br />

Jak dodać style do naszej strony?<br />

Jest na to kilka sposobów. Tutaj podamy tylko dwa najprostsze.<br />

Style lokalne – inline<br />

Aby użyć deklaracji bezpośrednio w elemencie HTML należy<br />

wykorzystać atrybut style, który wpisujemy w ramach znacznika,<br />

tak jak na przykładzie poniżej:<br />

Tutaj znajdować<br />

się będzie nasz akapit, który pisany będzie<br />

czerwonym kolorem i będzie pogrubiony<br />

23<br />

Powrót do spisu treści


Pierwsze kroki w CSS<br />

Wewnętrzny arkusz stylów<br />

Do dołączenia arkusza stylów do dokumentu HTML można<br />

użyć dedykowanego tagu , który umieścić powinniśmy<br />

w części HEAD strony internetowej. Pisaliśmy o takiej możliwości<br />

już w poprzednim rozdziale. Wewnątrz tego znacznika należy<br />

umieścić reguły CSS, tj. selektory i deklaracje ujęte w nawiasach<br />

klamrowych.<br />

<br />

<br />

.p {<br />

color: red;<br />

font-weight: bold;<br />

}<br />

<br />

Domyślne style przeglądarek<br />

Jeżeli nie dodamy własnych stylów do naszej strony internetowej,<br />

to przeglądarki i tak wyświetlą je w domyślny sposób. Póki<br />

nie stworzymy dla danego elementu własnego nowego stylu,<br />

to będzie on wyświetlany w sposób domyślny dla przeglądarek<br />

internetowych.<br />

24<br />

Powrót do spisu treści


<strong>JavaScript</strong> – z czym to się je?<br />

<strong>JavaScript</strong> – z czym to się je?<br />

Być może nie znasz jeszcze pojęcia <strong>JavaScript</strong>, ale jeśli korzystasz<br />

z internetu i wchodzisz na różne strony internetowe, to<br />

jest niemal pewne, że miałeś/aś już z nim kontakt. <strong>JavaScript</strong><br />

jest bardzo popularnym językiem programowania, który jest<br />

wykorzystywany na wielu stronach internetowych. <strong>JavaScript</strong><br />

należy do tzw. FrontEndowych języków programowania. Oznacza<br />

to, że jego główną rolą jest wpływanie na to, jak strona<br />

internetowa zachowuje się w kontakcie z jej użytkownikiem.<br />

Jak zachowują się przyciski, co dzieje się w momencie poruszania<br />

się po ekranie kursorem myszki, jak wpływają na siebie<br />

poszczególne wizualne elementy strony.<br />

Jakie możliwości ma <strong>JavaScript</strong>? Oto jedynie kilka przykładów:<br />

• pozwala odtwarzać muzykę,<br />

• pozwala tworzyć różnego rodzaju efekty wizualne, w tym animacje,<br />

25<br />

Powrót do spisu treści


<strong>JavaScript</strong> – z czym to się je?<br />

• pozwala na modyfikowanie wyglądu i treści stron internetowych,<br />

np. po to by dopasować je do indywidualnych potrzeb<br />

użytkownika,<br />

• pozwala tworzyć bardziej zaawansowane aplikacje (w tym<br />

gry komputerowe), które będą uruchamiane przez przeglądarki<br />

internetowe (często bez konieczności instalowania<br />

tych gier na naszym komputerze).<br />

Dlaczego warto uczyć się języka <strong>JavaScript</strong>? Ponieważ jest to<br />

język programowania, który ma naprawdę olbrzymie możliwości,<br />

a jednocześnie należy do najłatwiejszych języków do nauki.<br />

Można więc albo zostać ekspertem od <strong>JavaScript</strong>, albo zacząć<br />

swoją naukę programowania od tego języka, po to by później<br />

spróbować swoich sił z kolejnymi, bardziej rozbudowanymi językami.<br />

Wybór należy do Ciebie!<br />

Co ważne, zarówno do pisania programów w <strong>JavaScript</strong> oraz<br />

do ich testowania nie trzeba przygotowywać i instalować żadnych<br />

dodatkowych programów (np. kompilatorów). Wystarczy<br />

nam do tego przeglądarka internetowa (np. Chrome, Firefox,<br />

Safari, Edge). Przeglądarki te posiadają wbudowany interpretator<br />

<strong>JavaScript</strong>, a więc mogą samodzielnie odczytać każdy<br />

program napisany w tym języku.<br />

26<br />

Powrót do spisu treści


<strong>JavaScript</strong> – z czym to się je?<br />

Pierwszy program w <strong>JavaScript</strong><br />

Obecnie bardzo popularną przeglądarką jest Google Chrome,<br />

chciałbym w związku z tym na przykładzie tej właśnie przeglądarki<br />

opisać, w jaki sposób można w prosty sposób napisać<br />

swoje pierwsze programy w tym języku.<br />

Jeśli jeszcze nie masz tej przeglądarki, to wejdź na stronę internetową:<br />

www.google.com/chrome/ gdzie będziesz mógł/<br />

mogła ją bezpłatnie pobrać i zainstalować.<br />

W ramach tego <strong>podręcznik</strong>a będziemy pisali stosunkowo proste<br />

programy, nie ma w związku z tym potrzeby instalowania<br />

żadnych dodatkowych programów, będziemy wykorzystywali<br />

do tego tzw. konsolę w przeglądarce internetowej.<br />

Po uruchomieniu przeglądarki Google Chrome wpisz w pasku<br />

adresu:<br />

about:blank<br />

Uruchomi się wtedy pusta strona internetowa. Aby otworzyć<br />

konsolę:<br />

1. Jeśli masz system Windows lub Linux przytrzymaj wciśnięte<br />

klawisze CTRL i SHIFT oraz naciśnij J.<br />

2. Jeśli masz system Mac OS przytrzymaj klawisze COMMAND<br />

i OPTION i naciśnij J.<br />

27<br />

Powrót do spisu treści


<strong>JavaScript</strong> – z czym to się je?<br />

Pasek adresu: miejsce, w którym wpisujemy adresy stron internetowych.<br />

Musimy wpisać adres strony i nacisnąć klawisz EN-<br />

TER. W naszym przypadku powinniśmy w tym miejscu wpisać:<br />

about:blank<br />

Konsola <strong>JavaScript</strong>: W tym miejscu będziemy pisali nasze programy<br />

Programy konsoli będziemy wpisywali w ostatniej linijce. Poszczególne<br />

linijki rozpoczynają się znakiem „ > ” – oznacza on,<br />

że w tej linijce pojawił się kod programu wpisany przez nas.<br />

Możemy wpisać np. 3+6 i nacisnąć klawisz ENTER. W kolejnej<br />

linijce pojawi się wynik tego działania. Zwróć uwagę, że linijka<br />

z wynikiem działania, czyli informacją zwrotną programu, za-<br />

28<br />

Powrót do spisu treści


<strong>JavaScript</strong> – z czym to się je?<br />

czyna się w inny sposób, zamiast „ > ” zaczyna się od symbolu<br />


<strong>JavaScript</strong> – z czym to się je?<br />

ma zdecydowanie więcej niż tę pojedynczą linijkę), to naciśnięcie<br />

zbyt wcześnie przycisku ENTER oznaczałoby, że uruchomiony<br />

zostanie tylko fragment programu i nie będzie on działał<br />

tak jak należy. Aby przejść do pisania nowej linijki kodu, ale<br />

jeszcze bez uruchomienia programu, powinniśmy przytrzymać<br />

klawisz SHIFT i dopiero wtedy nacisnąć przycisk ENTER.<br />

Spróbuj teraz wpisać w konsoli trochę bardziej skomplikowany<br />

program, pamiętając o stosowaniu kombinacji SHIFT+ENTER.<br />

/*<br />

To jest prosty program, który będzie dodawał dwie<br />

liczby 20 i 15, a następnie wyświetli wynik dodawania<br />

zarówno w konsoli (polecenie: console.log), jak<br />

i w nowym oknie przeglądarki (alert).<br />

*/<br />

let a=20; // jeśli chcesz sprawdzić wynik dodawania innych<br />

liczb<br />

let b=15; // zawsze możesz je podmienić w tym miejscu<br />

console.log(a + “+” + b + “=” + (a+b));<br />

alert(a + „+” + b + „=” + (a+b));<br />

Pamiętaj, że <strong>JavaScript</strong>, podobnie jak każdy inny język programowania,<br />

jest bardzo dokładny. Każdy, nawet najmniejszy błąd<br />

30<br />

Powrót do spisu treści


<strong>JavaScript</strong> – z czym to się je?<br />

(w tym nawet najprostsza literówka) może spowodować, że<br />

program w ogóle się nie uruchomi albo będzie działał w sposób<br />

błędny.<br />

Składnia<br />

Jeszcze jest za wcześnie, by wyjaśniać, jak dokładnie działa ten<br />

program (na to przyjdzie czas trochę później), ale można już<br />

zobaczyć, jak działa składnia w tym języku. Składnia to reguły<br />

stosowane w danym języku programowania. Zwróć proszę<br />

uwagę na średniki „;”, które kończą poszczególne linijki. Okrągłe<br />

nawiasy „(„ i „)”, w obrębie których wykonywane są odpowiednie<br />

działania dla wybranych poleceń. Różne znaki takie jak<br />

klamry „{” i „}”, znaki plus „+”, równa się „=” będą miały swoją<br />

określoną rolę i bardzo ważne jest nauczenie się i zrozumienie,<br />

w jakich okolicznościach i w jakim celu będziemy stosować<br />

odpowiednie znaki. Bez tego niestety nie da się tworzyć programu<br />

w żadnym języku programowania. Komputery są pod<br />

tym względem bardzo mało wyrozumiałe. Składnia musi być<br />

bardzo precyzyjna.<br />

Komentarze<br />

W przedstawionym przykładzie programu pojawiły się także<br />

tzw. komentarze. Komentarze są to fragmenty programu, które<br />

nie są uruchamiane i interpretowane przez komputer. Najczęściej<br />

są to informacje przekazywane pomiędzy programistami, tak by<br />

31<br />

Powrót do spisu treści


<strong>JavaScript</strong> – z czym to się je?<br />

łatwiej było im zrozumieć, jak dokładnie działa wybrany fragment<br />

kodu. Dobrą praktyką jest przekazywanie w komentarzach<br />

w miarę dokładnych instrukcji, nigdy nie wiadomo, kto jeszcze<br />

w przyszłości będzie korzystał z naszego kodu programu!<br />

Poniższy zapis oznacza, że wszystko co jest między symbolami<br />

„/*” oraz „*/” jest komentarzem, a więc tekstem, który nie ma<br />

żadnego wpływu na działanie programu:<br />

/*<br />

To jest prosty program, który będzie dodawał dwie<br />

liczby 20 i 15, a następnie wyświetli wynik dodawania<br />

zarówno w konsoli, jak i w oknie alert przeglądarki.<br />

*/<br />

Natomiast zapis z użyciem dwóch prawych ukośników: //, np.<br />

// jeśli chcesz sprawdzić wynik dodawania innych liczb<br />

// zawsze możesz je podmienić w tym miejscu<br />

oznacza, że wszystko co znajduje się na prawo od tych symboli,<br />

ale tylko w tej samej linijce, będzie ignorowane przez interpretator.<br />

32<br />

Powrót do spisu treści


Różne rodzaje zmiennych<br />

Różne rodzaje zmiennych<br />

Kluczowym elementem działania każdego programu jest praca<br />

na zmiennych i typach danych. Nie inaczej jest w JavaSript.<br />

W <strong>JavaScript</strong>, podobnie jak w większości innych języków programowania,<br />

możemy wyróżnić 3 rodzaje typów danych:<br />

a. Liczby;<br />

b. Tekst (inaczej nazywany łańcuchem znaków – czyli z ang.<br />

String);<br />

c. Wartości logiczne (często nazywane Boolean od nazwiska<br />

angielskiego matematyka George Boolena).<br />

Dane liczbowe<br />

Ten typ danych odnosi się do liczb. Dane liczbowe mogą zawierać<br />

informacje dotyczące cen wybranego produktu, wieku,<br />

wzrostu, odległości. Liczba w <strong>JavaScript</strong> będzie wyglądała następująco:<br />

14;<br />

33<br />

Powrót do spisu treści


Różne rodzaje zmiennych<br />

Dane tekstowe<br />

Czyli łańcuchy znaków. Dane tekstowe dotyczą tekstów. Pojedynczy<br />

łańcuch znaków znajduje się w <strong>JavaScript</strong> zawsze pomiędzy<br />

dwoma znakami cudzysłowu:<br />

”To jest pojedynczy łańcuch znaków, zaczyna się i kończy<br />

znakiem cudzysłowu”<br />

Dane logiczne<br />

Inaczej nazywane danymi Boolean. Dane logiczne mogą przyjąć<br />

jedną z dwóch wartości: Prawdę (True) lub Fałsz (False).<br />

Dane takie mogą np. potwierdzić, czy ktoś wprowadził prawidłowy<br />

PIN, chcąc skorzystać z bankomatu. Dane logiczne w <strong>JavaScript</strong><br />

mogą wyglądać następująco:<br />

false;<br />

W zależności od rodzaju danych, można na nich wykonać różne<br />

operacje, a inne operacje będą niemożliwe. Dane liczbowe możemy<br />

do siebie dodawać lub je mnożyć. W przypadku Danych<br />

tekstowych możemy sprawdzić, z ilu znaków składa się tekst,<br />

połączyć ze sobą dwa strumienie tekstu w jeden albo wyciąć<br />

wybrany fragment tekstu (np. 3 ostatnie znaki). Dane logiczne<br />

służą do sprawdzenia, czy np. dwie wartości porównywane ze<br />

sobą są prawdziwe. Poniżej znajduje się kilka przykładów pracy<br />

z różnego rodzaju danymi, które w kolejnej części rozdziału<br />

będziemy omawiali bardziej szczegółowo:<br />

34<br />

Powrót do spisu treści


Różne rodzaje zmiennych<br />

10*100;<br />

1000<br />

”Bartek to moje imię! Prawda że ładne”.slice(0, 6);<br />

”Bartek”<br />

true || false<br />

true;<br />

Działamy na liczbach!<br />

Na liczbach możemy wykonywać wszystkie działania matematyczne,<br />

trochę tak jakbyśmy pracowali na zaawansowanym kalkulatorze.<br />

Podstawowe działania matematyczne wykonujemy<br />

z wykorzystaniem tzw. operatorów, są to:<br />

+ – dodawanie<br />

- – odejmowanie<br />

* – mnożenie<br />

/ – dzielenie<br />

Używając konsoli <strong>JavaScript</strong>, możemy wykonać wiele prostych<br />

i bardzo skomplikowanych obliczeń matematycznych, jeśli wpiszemy:<br />

12*10;<br />

Uzyskamy wynik:<br />

120<br />

Możemy jednak tworzyć obliczenia bardziej rozbudowane –<br />

35<br />

Powrót do spisu treści


Różne rodzaje zmiennych<br />

złożone z 3 lub więcej liczb – i posługując się różnymi operatorami:<br />

10+5-3;<br />

12<br />

Pamiętajcie jednak, że wykonując operacje matematyczne, <strong>JavaScript</strong><br />

będzie bazował na podstawowych zasadach matematycznych<br />

dotyczących kolejności działań. Oznacza to, że obliczenia<br />

będą wykonywane od lewej do prawej, ale w pierwszej<br />

kolejności wykonywane będą operacje w nawiasach, później<br />

mnożenie i dzielenie i dopiero w dalszej kolejności dodawanie<br />

i odejmowanie. W związku z tym wynikiem operacji:<br />

12+20-5*12+120/3<br />

Będzie:<br />

12<br />

Spróbujmy przełożyć to na jakiś życiowy problem. Załóżmy że<br />

mamy samochód, w którym musimy wymienić 4 koła i za wymianę<br />

każdego musimy zapłacić 100zł. Jeśli od razu dojdziemy<br />

do tego, że mamy 4 koła, i chcielibyśmy sprawdzić koszt usługi,<br />

wszystko powinno się obliczyć prawidłowo:<br />

4*100;<br />

400<br />

Ale gdybyśmy chcieli się upewnić, że liczba kół jest prawidło-<br />

36<br />

Powrót do spisu treści


Różne rodzaje zmiennych<br />

wa i na początku je policzyć, wtedy sprawa robi się już bardziej<br />

skomplikowana:<br />

1+1+1+1*100;<br />

103<br />

Wynik wygląda w ten sposób, ponieważ program najpierw wykonuje<br />

operację mnożenia, a więc mnoży 1*100 co daje wynik<br />

100. Później dopiero zaczyna dodawać to, co pozostało, czyli:<br />

1+1+1+100, co daje wynik 103. Jeśli chcemy, aby to działanie zostało<br />

wykonane prawidłowo, musimy wykorzystać okrągłe nawiasy,<br />

które mogą wymusić pierwszeństwo wykonywania pewnych<br />

operacji:<br />

(1+1+1+1)*100;<br />

400<br />

Zmienne<br />

W <strong>JavaScript</strong>, analogicznie do innych języków programowania,<br />

możemy tworzyć tzw. zmienne (ang. Variables). Zmienna<br />

to rodzaj magazynu – walizki, w której możemy przechowywać<br />

różne wartości. Musimy jednak pamiętać, że takie podstawowe<br />

zmienne mogą przechowywać w danym momencie wyłącznie<br />

jedną wartość. Gdy chcemy w zmiennej umieścić nową wartość,<br />

stara jest automatycznie z niej wyrzucana. To trochę tak<br />

jak przy jedzeniu. Kiedy jemy obiad, to naraz wkładamy do<br />

ust jeden kęs potrawy. Zanim weźmiemy kolejny kęs, musimy<br />

37<br />

Powrót do spisu treści


Różne rodzaje zmiennych<br />

zrobić na niego miejsce, czyli pogryźć i przełknąć poprzedni.<br />

W realnym życiu możemy tę zasadę trochę nagiąć, zapychając<br />

się kilkoma kęsami naraz, ale nie jest to ani kulturalne, ani zdrowe,<br />

ani bezpieczne. <strong>JavaScript</strong> stosuje się jednak do tej zasady<br />

dużo bardziej konkretnie. Jedna wartość przypisana w jednym<br />

momencie do jednej zmiennej – i koniec, kropka!<br />

Utworzenie zmiennej w <strong>JavaScript</strong> wymaga użycia słowa kluczowego<br />

(z ang. key-word). W ramach tego <strong>podręcznik</strong>a będziemy<br />

uczyli się różnych słów kluczowych. Każde z nich ma<br />

swoją konkretną rolę i działanie. To jest trochę jak z zaklęciami<br />

magicznymi, jako czarodzieje musimy użyć jednego konkretnego<br />

zaklęcia, aby uzyskać oczekiwany efekt. Ale są zaklęcia, które<br />

mogą być do siebie bardzo podobne. Do utworzenia zmiennych<br />

w <strong>JavaScript</strong> możemy użyć kilku różnych słów kluczy:<br />

var<br />

const<br />

let<br />

var tworzy tzw. zmienną globalną, która może być wykorzystywana<br />

w całym oknie strony, na którym została uruchomiona.<br />

Kiedyś użycie var było powszechne i w bardzo wielu <strong>podręcznik</strong>ach<br />

znajdziecie właśnie tę deklarację. Pamiętajcie, że dzisiaj<br />

użycie var jest uważane za przestarzałe, a przez niektórych<br />

wręcz jako błędne! Dlatego starajcie się zapomnieć w ogóle<br />

38<br />

Powrót do spisu treści


Różne rodzaje zmiennych<br />

o tym słowie kluczu. W tym <strong>podręcznik</strong>u pojawia się ono tylko<br />

dlatego, by Was przed nim przestrzec


Różne rodzaje zmiennych<br />

Możemy jednak od razu przy tworzeniu zmiennej przypisać do<br />

niej konkretną wartość, np.:<br />

let mojaDrugaZmienna = 2;<br />

Gdy wpiszemy w konsoli:<br />

mojaDrugaZmienna;<br />

wyświetlona zostanie wartość<br />

2<br />

Na utworzonych zmiennych możemy wykonywać różne operacje.<br />

Wróćmy na chwilę do naszego zakładu wymieniającego<br />

opony i spróbujmy rozpisać te operacje na zmiennych:<br />

let liczbaOpon = 1+1+1+1;<br />

let cenaWymiany = 100;<br />

liczbaOpon * cenaWymiany;<br />

400<br />

W pierwszej kolejności tworzymy zmienną liczbaOpon i przypisujemy<br />

do niej wartość będącą wynikiem operacji matematycznej<br />

1+1+1+1, co ostatecznie daje 4. Zmienna cenaWymiany<br />

od razu ma przypisaną wartość 100. Tym samym, kiedy dochodzi<br />

już do operacji na zmiennych: liczbaOpon * cenaWymiany,<br />

to mnożone są już przetworzone wartości, czyli 4 i 100.<br />

Nazwy zmiennych<br />

Trzeba zachować dużą ostrożność przy nadawaniu nazw<br />

zmiennym, ponieważ <strong>JavaScript</strong> jest pod tym względem bar-<br />

40<br />

Powrót do spisu treści


Różne rodzaje zmiennych<br />

dzo wrażliwy. Trzeba pamiętać, że przy nazwie zmiennej ma<br />

znaczenie to, czy użyjemy małej czy dużej litery. Jeśli zadeklarujemy<br />

zmienną:<br />

let malaLitera;<br />

a odwołując się do tej zmiennej wpiszemy:<br />

malalitera;<br />

to pojawi się komunikat błędu, informujący, że interpretator nie<br />

potrafi rozpoznać takiej zmiennej:<br />

ReferenceError: malalitera is not defined<br />

Tworząc zmienne powinniśmy unikać:<br />

1. Polskich znaków<br />

2. Spacji<br />

3. Słów kluczy używanych w <strong>JavaScript</strong> (nie można np. utworzyć<br />

zmiennej let o nazwie const, otrzymamy wtedy błąd:<br />

const is disallowed as a lexically bound name)<br />

4. Podkreślenia _, znaku dolara $, a także znaków specjalnych,<br />

jak np. #, ? itp.<br />

Przyjętą praktyką tworzenia nazw zmiennych jest tzw. camel<br />

case (przez podobieństwo takiej składni do garbów wielbłąda).<br />

W camel case tworzymy nazwy zmiennych, przyjmując zasadę,<br />

że jeśli nazwa zmiennej składa się z kilku słów, to pierwsze<br />

słowo zaczynamy od małej litery, a każdego kolejnego nie<br />

oddzielamy spacjami, ale zaczynamy od wielkiej litery. Poniżej<br />

41<br />

Powrót do spisu treści


Różne rodzaje zmiennych<br />

znajduje się kilka przykładów:<br />

let mojaZmienna<br />

let liczbaRozdzialowWKsiazce<br />

let aOtoKolejnaZmiennaJest<br />

let silnaMocWTejZmiennejJest<br />

Tworzenie nowych zmiennych ze starych<br />

Zmienne możemy także tworzyć wykorzystując już istniejące<br />

zmienne. Poniżej przedstawię przykład zliczający liczbę członków<br />

rodziny. W pierwszej zmiennej: liczbaDzieci znajdzie się<br />

informacja liczbowa o liczbie dzieci w rodzinie. W zmiennej<br />

liczbaDoroslych będzie natomiast informacja o liczbie dorosłych<br />

członków rodziny. Zmienna calaRodzina zawierać będzie<br />

42<br />

Powrót do spisu treści


Różne rodzaje zmiennych<br />

sumę dzieci i osób dorosłych.<br />

let liczbaDzieci = 3;<br />

let liczbaDoroslych = 2;<br />

let calaRodzina = liczbaDzieci + liczbaDoroslych;<br />

calaRodzina;<br />

5<br />

Inkrementacja i dekrementacja<br />

Powyższe pojęcia dotyczą skrótowych operacji matematycznych<br />

i choć same nazwy mogą na początku przerażać, to akurat<br />

działanie tych dwóch pojęć jest bardzo proste. Inkrementacja<br />

powoduje, że wartość danej zmiennej liczbowej zostanie<br />

zwiększona o jeden.<br />

Wywołanie inkrementacji ma miejsce poprzez poprzedzenie<br />

nazwy zmiennej znakami ++<br />

Jeśli więc w naszym przykładzie rodzina powiększy się o jedno<br />

dziecko, to możemy zaktualizować jej wartość, wykorzystując<br />

inkrementacje:<br />

++liczbaDzieci;<br />

4<br />

Dekrementacja w naszym przykładzie będzie miała bardziej<br />

przykry charakter. Załóżmy, że jeden z dorosłych członków<br />

rodziny zmarł. W takiej sytuacji trzeba skorygować wartość<br />

43<br />

Powrót do spisu treści


Różne rodzaje zmiennych<br />

zmiennej liczbaDoroslych, odejmując od niej 1. Dekrementacje<br />

zapisujemy jako --, np.:<br />

--liczbaDoroslych;<br />

1<br />

Interpretator zwraca w naszych przykładach wartości zmiennych<br />

po zmniejszeniu lub zwiększeniu ich o jeden. Znaki ++ i --<br />

można umieścić także po nazwie zmiennej. Wtedy też zostanie<br />

wykonane działanie zmniejszenia/zwiększenia o 1 wartości<br />

zmiennej, ale różnica będzie taka, że w konsoli pojawi się zwrócona<br />

wartość zmiennej jeszcze sprzed tego działania. Poniżej<br />

prosty przykład:<br />

let liczymySobie = 0;<br />

liczymySobie++;<br />

0<br />

liczymySobie++;<br />

1<br />

liczymySobie;<br />

2<br />

Szybka zmiana wartości zmiennej liczbowej<br />

Jest kilka sposobów na zmianę wartości zmiennej. Stwórzmy<br />

teraz zmienną cenaChleba i od razu przypiszmy jej wartość 10:<br />

let cenaChleba = 10;<br />

44<br />

Powrót do spisu treści


Różne rodzaje zmiennych<br />

Jeśli chcemy zmniejszyć wartość tej zmiennej o 1 możemy użyć<br />

wyjaśnionej już dekrementacji:<br />

--cenaChleba;<br />

9<br />

Jeśli cena chleba podskoczy nagle o 4 zł możemy podnieść<br />

wartość zmiennej o 4 w następujący sposób:<br />

cenaChleba = cenaChleba + 4;<br />

W ten sposób możemy powiedzieć, że nową ceną chleba jest<br />

stara cena chleba, do której musimy dodać 4.<br />

Sam zapis<br />

cenaChleba = 4;<br />

spowodowałby, że wartość zmiennej byłaby zmieniona o 4.<br />

Jest jednak alternatywny zapis umożliwiający szybkie dodawanie,<br />

odejmowanie, mnożenie lub dzielenie zmiennych. Możemy<br />

zastosować następujące kombinacje operatorów:<br />

+=<br />

-=<br />

*=<br />

/=<br />

Jeśli stworzymy zmienną<br />

let osczednosciWPortfelu = 100;<br />

45<br />

Powrót do spisu treści


Różne rodzaje zmiennych<br />

a następnie wpiszemy<br />

oszczednosciWPortfelu += 75;<br />

spowoduje to szybkie dodanie liczby 75 do wartości zmiennej<br />

i po wpisaniu:<br />

osczednosciWPortfelu;<br />

uzyskamy wynik:<br />

175<br />

Zmienne tekstowe<br />

Tak jak już ustaliliśmy wcześniej, zmienne mogą przechowywać<br />

również łańcuchy znaków (po angielsku: strings). Przykładowa<br />

zmienna tego typu może zawierać np. imię i nazwisko:<br />

let fullName = ”Bartosz Kosa”<br />

Tekst musimy zawsze wpisać pomiędzy dwoma cudzysłowami.<br />

Trzeba natomiast uważać, by przez przypadek nie wpisać liczby<br />

w cudzysłowie, bo wtedy liczba ta będzie interpretowana<br />

jako ciąg znaków, np.:<br />

let zdecydowanieLiczba = 5;<br />

let liczbaCzyTekst = ”5”;<br />

jeśli spróbujemy wykonać operacje na poszczególnych zmiennych<br />

otrzymamy następujące rezultaty:<br />

zdecydowanieLiczba + zdecydowanieLiczba;<br />

10<br />

liczbaCzyTekst + liczbaCzyTekst;<br />

”55”<br />

46<br />

Powrót do spisu treści


Różne rodzaje zmiennych<br />

W pierwszym przypadku wykonaliśmy proste działanie matematyczne,<br />

do 5 dodaliśmy 5. W drugim przypadku, z powodu<br />

tego, że zmienna liczbaCzyTekst jest tekstem, piątki zostały potraktowane<br />

jako teksty, a nie liczby, i połączone ze sobą w dwa<br />

ciągi znaków, co w efekcie dało dłuższy ciąg znaków: ”55”.<br />

Operacje na zmiennych tekstowych<br />

Wiemy więc już, że zmienne tekstowe możemy ze sobą łączyć<br />

i robimy to za pomocą znaku +<br />

Jeśli chcielibyśmy połączyć ze sobą osobne zmienne imie i nazwisko<br />

w jeden ciąg znaków, musielibyśmy wykonać następujące<br />

operacje:<br />

Let imie = ”Bartosz”;<br />

Let nazwisko = ”Kosa”;<br />

Imie + nazwisko;<br />

”BartoszKosa”<br />

Zwróć uwagę, że ciągi znaków zostały połączone dokładnie<br />

jeden po drugim. Co zrobić, aby pomiędzy imieniem i nazwiskiem<br />

pojawiła się spacja? Możemy dodać między nimi jeszcze<br />

jeden ciąg znaków, który będzie składał się tylko i wyłącznie<br />

ze spacji:<br />

Imie + ” ” + nazwisko;<br />

”Bartosz Kosa”<br />

47<br />

Powrót do spisu treści


Różne rodzaje zmiennych<br />

Na zmiennych tekstowych możemy wykonywać wiele innych<br />

operacji. Za pomocą metody .length możemy sprawdzić, z ilu<br />

znaków składa się dany ciąg:<br />

”znakowciag”.length;<br />

10<br />

lub<br />

let fullName = ”Ala OdKota”<br />

fullName.length;<br />

10<br />

Zwróć uwagę, że pojedyncza spacja (podobnie jak inne znaki<br />

specjalne) będzie liczona jako jeden znak!<br />

Możemy również stosunkowo łatwo pobrać wybraną literę<br />

z ciągu znaków, służą do tego kwadratowe nawiasy. Musisz pamiętać,<br />

że <strong>JavaScript</strong> zaczyna liczyć od 0, a nie od 1. Więc aby<br />

pobrać pierwszą literę ciągu znaków musisz poprosić o 0, gdyż<br />

1 zwróci dopiero drugi znak:<br />

Kwiat[1];<br />

”w”<br />

Tulipan[0];<br />

”T”<br />

Mak[2];<br />

”k”<br />

48<br />

Powrót do spisu treści


Różne rodzaje zmiennych<br />

Metody to specjalne, bardziej zaawansowana operacje, które<br />

można wykonać np. na tekście. Przykładem może być metoda<br />

slice(), która pozwoli nam wyciąć fragment tekstu z dłuższego<br />

fragmentu.<br />

”nie dam sie pociac”.slice(4, 18);<br />

”dam sie pociac’’<br />

Poszczególne liczby w tej metodzie oznaczają przedział, pomiędzy<br />

którymi tekst ma zostać zachowany, liczby 4 i 18 oznaczają,<br />

że wycięty z całości ma być fragment zaczynający się od<br />

4 znaku, a kończący na znaku 18.<br />

Instrukcja:<br />

”nie dam sie pociac”.slice(4, 11);<br />

da nam wynik:<br />

”dam się”<br />

Użycie metody slice() tylko z jedną liczbą spowoduje, że wycięty<br />

zostanie cały fragment od wskazanego znaku do końca<br />

łańcucha:<br />

”1. Bartosz Kosa”.slice(3);<br />

”Bartosz Kosa’’<br />

Inne popularne metody to .toUpperCase() oraz .toLowerCase(),<br />

które pozwalają zamienić wszystkie litery w ciągu na małe<br />

lub duże litery np.:<br />

49<br />

Powrót do spisu treści


Różne rodzaje zmiennych<br />

”Bartosz Kosa”.toUpperCase();<br />

”BARTOSZ KOSA”<br />

Jak pracować na zmiennych logicznych?<br />

Ostatnim typem zmiennych będą zmienne logiczne. Jak już<br />

wspomnieliśmy wcześniej, mogą one przyjmować tylko dwie<br />

wartości: Prawda (true) albo Fałsz (false). Również te wartości<br />

możemy ze sobą łączyć i będziemy wykorzystywali do tego<br />

jeden z 3 operatorów:<br />

&& – iloczyn logiczny<br />

|| – suma logiczna<br />

! – negacja logiczna<br />

Iloczyn logiczny (czyli &&) pozwala nam sprawdzić, czy wszystkie<br />

porównywane wartości logiczne są prawdziwe. Jeśli przynajmniej<br />

jeden z warunków będzie fałszywy, to wtedy całkowity<br />

wynik również będzie fałszywy. Zasady działania iloczynu<br />

logicznego możesz zobaczyć na poniższej tabeli:<br />

Warunek nr 1 Warunek nr 2 Wynik<br />

true true true<br />

true false false<br />

false true false<br />

false false false<br />

50<br />

Powrót do spisu treści


Różne rodzaje zmiennych<br />

Załóżmy, że ktoś chciałby się dowiedzieć, czy otrzyma prawo<br />

jazdy. Iloczyn logiczny doskonale się do tego nadaje. Żeby uzyskać<br />

prawo jazdy nie wystarczy zdać egzaminu teoretycznego,<br />

trzeba także zdać egzamin praktyczny!<br />

let egzaminTeoretyczny = true;<br />

let egzaminPraktyczny = false;<br />

let czyMamPrawko = egzaminTeoretyczny && egzaminPraktyczny;<br />

czyMamPrawko;<br />

false<br />

Suma logiczna zachowuje się czasami podobnie do iloczynu<br />

logicznego, ale tylko czasami! W przypadku sumy logicznej co<br />

najmniej jeden z warunków musi być prawdziwy, by wynik logiczny<br />

też był prawdziwy. Przyjrzyj się proszę poniższej tabeli<br />

i zobacz, czy będzie się różniła od poprzedniej!<br />

Warunek nr 1 Warunek nr 2 Wynik<br />

true true true<br />

true false true<br />

false true true<br />

false false false<br />

Czyli suma logiczna będzie fałszywa tylko wtedy, gdy wszystkie<br />

sprawdzane warunki też będą fałszywe. Załóżmy, że wybra-<br />

51<br />

Powrót do spisu treści


Różne rodzaje zmiennych<br />

łeś się do restauracji. Możesz zamówić kilka rzeczy z menu –<br />

zupy, drugie dania i desery. Żeby sobie podjeść, nie musisz<br />

koniecznie wybierać wszystkich rzeczy z menu, wystarczy, że<br />

zamówisz sobie jakąś jedną wybraną pozycję na „mały głód”.<br />

Jedyna sytuacja, gdy wyjdziesz z restauracji głodny/a to gdy<br />

nie zamówisz sobie kompletnie nic!<br />

let zupa = false;<br />

let drugieDanie = true;<br />

let deser = true;<br />

let czyPojadles = zupa || drugieDanie || deser;<br />

czyPojadles;<br />

true<br />

Zwróć uwagę, że w ostatnim przykładzie pojawiły się aż trzy<br />

warunki, które ze sobą zestawiliśmy. Liczba takich warunków<br />

jest dowolna, możemy równie dobrze uwzględnić 2, 3 a nawet<br />

30 i więcej warunków. Trzeba tylko uważać, by się nie pogubić.<br />

Ostatnią operacją logiczną jest negacja logiczna. Jest też najprostszym<br />

rodzajem takiej operacji. Używamy jej wpisując wykrzyknik<br />

przed wartością logiczną i zmienia ona wartość warunku<br />

z true na false i z false na true.<br />

let padaDeszcz = true;<br />

padaDeszcz;<br />

52<br />

Powrót do spisu treści


Różne rodzaje zmiennych<br />

true<br />

!padaDeszcz;<br />

false<br />

Wartości logiczne mogą być również używane w przypadku<br />

porównywania ze sobą różnych wartości (w sytuacjach, gdy<br />

możemy udzielić prostej odpowiedzi – tak lub nie). Możemy np.<br />

porównywać ze sobą wartości liczbowe:<br />

< - mniejsze niż<br />

= – większe lub równe<br />

> – większe niż<br />

== – równe<br />

!= – nierówne<br />

Jeżeli w konsoli wpiszemy<br />

3>4;<br />

uzyskamy odpowiedź<br />

false<br />

Możemy sprawdzić też, czy dwie wartości są dokładnie takie<br />

same, ale uwaga, wtedy musimy obok siebie postawić<br />

aż 3 znaki =<br />

3===3;<br />

true<br />

53<br />

Powrót do spisu treści


Różne rodzaje zmiennych<br />

W <strong>JavaScript</strong> będziemy czasami musieli używać także podwójnego<br />

==. Czym podwójny znak różni się od potrójnego?<br />

Potrójny sprawdza bardzo dokładnie, czy obie porównywane<br />

wartości mają tę samą wartość oraz ten sam typ (liczby, teksty,<br />

wartości logiczne). Tylko jeśli wszystko się zgadza, otrzymujemy<br />

wynik true. Przy podwójnym == interpretator będzie dodatkowo<br />

sprawdzał, czy wartości przekonwertowane będą do<br />

siebie pasowały. Ciąg znaków ”4” będzie zamieniany na cyfrę<br />

4, wartość logiczna true na cyfrę 1, a wartość logiczna false na<br />

0. Poniżej kilka przykładów i różnic między nimi<br />

5==”5”;<br />

true<br />

5===”5”<br />

false<br />

1===true;<br />

false<br />

1==true;<br />

true<br />

Na koniec naszego przeglądu zmiennych warto jeszcze wprowadzić<br />

rozróżnienie pomiędzy undefined oraz null. Obie oznaczają,<br />

że w zmiennej nic się nie znajduje, ale nie są one do końca<br />

tym samym. Undefined to wartość zmiennej, do której nie<br />

zdążyliśmy jeszcze nic przypisać. Null natomiast możemy przypisać<br />

do zmiennej jako wartość, która oznacza, że zmienna jest<br />

54<br />

Powrót do spisu treści


Różne rodzaje zmiennych<br />

po prostu pusta. Warto wiedzieć, że jest takie rozróżnienie, będzie<br />

to przydatne przy tworzeniu bardziej rozbudowanych programów.<br />

55<br />

Powrót do spisu treści


Praca z tablicami<br />

Praca z tablicami<br />

Mamy już za sobą rozdział o zmiennych. Był on dość długi, ale<br />

zmienne są fundamentalną częścią każdego programu i warto<br />

je dokładnie poznać. Teraz przyszła pora na pracę z tablicami,<br />

które są w dużym stopniu powiązane z poznanymi już zmiennymi.<br />

Klasyczna zmienna, jak już zostało powiedziane, pozwala<br />

przechowywać maksymalnie jedną wartość naraz. Tablice stanowią<br />

pewien zbiór powiązanych ze sobą wartości i jako takie<br />

pozwalają przechowywać w zasadzie dowolną liczbę powiązanych<br />

ze sobą wartości.<br />

Chcielibyśmy np. stworzyć tablicę, która zawierać będzie<br />

wszystkie dni tygodnia. Skoro wiemy już, jak tworzyć zmienne,<br />

to tworzenie tablicy nie powinno już stanowić problemu. Poniżej<br />

znajduje się przykład takiej właśnie tablicy:<br />

let dniTygodnia = [”poniedziałek”, ‘’wtorek’’, ”środa”,<br />

”czwartek”, ”piątek”, ”sobota”, ”niedziela”];<br />

56<br />

Powrót do spisu treści


Praca z tablicami<br />

Dzięki takiej tablicy nie musimy robić osobnej zmiennej dla każdego<br />

jej elementu – w tym wypadku dni tygodnia. Żeby wybrać<br />

określoną pozycję tablicy wystarczy, że odwołamy się do jej<br />

nazwy oraz dodatkowo w kwadratowych nawiasach podamy<br />

numer indeksu, czyli pozycji na tablicy, gdzie znajduje się poszukiwany<br />

przez nas element. Pamiętaj tylko, że numer indeksu<br />

zaczynamy od 0 a nie od jedynki. Poniżej kilka przykładów wywołania<br />

elementów tablicy:<br />

dniTygodnia[0];<br />

”poniedziałek”<br />

dniTygodnia[2];<br />

”środa”<br />

dniTygodnia[6];<br />

”niedziela”<br />

dniTygodnia[7];<br />

undefined<br />

W ostatnim przykładzie pojawił się zapis undefined. Związane<br />

to jest z tym, że pod tym indeksem na tablicy nie znajduje się<br />

jeszcze w tym momencie żadna przypisana wartość.<br />

Jeśli chcemy zmienić wartość dowolnego elementu tablicy, wystarczy<br />

się do niego odwołać i zmienić wartość, wykorzystując,<br />

podobnie jak przy zmiennych, znak =<br />

dniTygodnia[4] = ”Piątek! Piąteczek! Piątunio”;<br />

57<br />

Powrót do spisu treści


Praca z tablicami<br />

W taki sam sposób możemy dodawać również nowe elementy<br />

do tablicy, wpisując numer indeksu, który jeszcze w tym momencie<br />

nie jest przypisany do żadnej wartości:<br />

dniTygodnia[7] = ”ósmy dzień tygodnia, którego nie<br />

ma, ale w sumie czemu go nie stworzyć? Mielibyśmy<br />

dłuższy weekend!”;<br />

Poznaliśmy w tym miejscu tablicę prostą, ale istnieją jeszcze<br />

tzw. tablice wewnętrzne. Są to takie tablice w tablicach. Załóżmy,<br />

że mamy klasę złożoną z 3 uczniów i każde z nich ma<br />

jakąś średnią na koniec klasy, na której podstawie dostał/a lub<br />

nie dostał/a czerwonego paska na świadectwie, możemy zbudować<br />

na tej podstawie tablicę z 3 tablicami wewnętrznymi dla<br />

każdego z uczniów:<br />

let klasa3B = [[”Tomek”, 4.9, true], [”Basia”, 4.46,<br />

false], [”Ala”, 5.0, true]];<br />

Jeśli wpiszemy teraz nazwę tablicy z pojedynczym indeksem,<br />

uzyskamy dostęp do pełnej zawartości tego indeksu, który<br />

obecnie składa się z trzech wartości – jednej tekstowej, jednej<br />

liczbowej i jednej logicznej (różne wartości można mieszać<br />

w ramach jednej tablicy).<br />

Jeśli wpiszemy<br />

Klasa3B[1];<br />

to uzyskamy odpowiedź:<br />

58<br />

Powrót do spisu treści


Praca z tablicami<br />

”Basia”, 4.46, false<br />

Jeśli chcielibyśmy uzyskać tylko pojedynczą wartość z tablicy<br />

wewnętrznej, to musimy użyć podobnego zapisu z dodatkowym<br />

nawiasem kwadratowym. Pierwszy nawias odnosić się będzie<br />

do indeksu w tablicy głównej, a drugi do indeksu w tablicy<br />

wewnętrznej. Chcemy zobaczyć, czy Tomek dostał czerwony<br />

pasek? Informacje o Tomku znajdują się w głównej tablicy pod<br />

indeksem nr 0. Natomiast informacje, czy dostał czerwony pasek<br />

znajdują się w tablicy wewnętrznej pod indeksem ostatnim,<br />

czyli 2. Żeby uzyskać taką informację musimy więc wpisać:<br />

Klasa3B[0][2];<br />

true;<br />

True – czyli prawda! Tomek dostał czerwony pasek! Brawo Tomku!<br />

Praca z tablicami<br />

Podobnie jak w przypadku zmiennych, także na tablicach można<br />

wykonywać różne operacje. Przykładowo .length. Pozwala<br />

sprawdzić, z ilu elementów składa się w tym momencie tablica:<br />

Let bestSFMovies = [”Star Wars”, ”Matrix”, ”Alien”];<br />

bestSFMovies.length;<br />

3<br />

Wiemy już, że indeksy zaczynają się od 0, więc ostatni element<br />

w tablicy z trzema elementami będzie miał indeks 2.<br />

Warto o tym pamiętać, bo jeśli będziemy chcieli odtworzyć<br />

59<br />

Powrót do spisu treści


Praca z tablicami<br />

ostatni element tablicy, powinniśmy użyć następującej instrukcji:<br />

bestSFMovies[bestSFMovies.length – 1];<br />

”Alien”<br />

Jak działa ta instrukcja? Chcemy w kwadratowym nawiasie zapytać,<br />

co znajduje się w danym indeksie tablicy. Ale tym razem<br />

nie wpisujemy dokładnej liczbowej wartości indeksu tylko pozyskujemy<br />

za pomocą instrukcji bestSFMovies.length informację,<br />

z ilu elementów składa się ta tablica. Ta wartość to 3, więc<br />

biorąc pod uwagę zasady działania indeksów, musimy od tej<br />

liczby odjąć 1, żeby dowiedzieć się, co znajduje się w ostatniej<br />

pozycji w tablicy.<br />

60<br />

Powrót do spisu treści


Jak pracować z obiektami<br />

Jak pracować z obiektami<br />

W sposób bardzo uproszczony możemy powiedzieć, że w <strong>JavaScript</strong><br />

obiekty są trochę bardziej rozbudowanymi tablicami.<br />

Tablica jest bardziej rozbudowaną zmienną, która posiada wiele<br />

elementów. Obiekt natomiast jest zmienną, która posiada<br />

różne cechy (nazywane właściwościami). Obiekty będziemy<br />

wykorzystywali najczęściej, żeby przedstawić jakiś element posiadający<br />

wiele cech. Poniżej znajduje się przykład zadeklarowania<br />

takiego obiektu:<br />

let polska = {<br />

”kontynent”: ”Europa”,<br />

”NATO”: true,<br />

”EU”: true,<br />

”waluta”: ”PLN”,<br />

”stolica”: ”Warszawa”,<br />

”ludność”: 38000000<br />

};<br />

61<br />

Powrót do spisu treści


Jak pracować z obiektami<br />

Na tym przykładzie stworzyliśmy zmienną o nazwie polska<br />

i przypisaliśmy do niej obiekt złożony z 6 par klucz–wartość.<br />

Zauważ, że tworząc obiekt wykorzystać musieliśmy nawiasy<br />

klamrowe, a nie jak w przypadku tablicy kwadratowe. Stworzyliśmy<br />

cały obiekt od razu, przypisując do wszystkich kluczy<br />

w obiekcie konkretne wartości, takie jak Europa, PLN, Warszawa.<br />

Struktura tworzenia obiektu jest stosunkowo prosta. Wszystkie<br />

klucze umieścić musimy w klamrach { }. Klucz musi być zawsze<br />

ciągiem tekstu, dlatego umieszczamy go w cudzysłowie. Jeśli<br />

nazwa klucza składa się z pojedynczego słowa, będziemy<br />

mogli zrezygnować z cudzysłowu, gdyż <strong>JavaScript</strong> i tak będzie<br />

pamiętać, że nazwa klucza musi być strumieniem tekstu.<br />

Przy nazwach złożonych z kilku słów cudzysłów będzie natomiast<br />

konieczny. Poniżej przykład zmiennej z różnymi wersjami<br />

deklarowania kluczy. Wszystkie są prawidłowe, ale aby się nie<br />

pomylić, póki co rekomenduje, by przy kluczach zawsze używać<br />

cudzysłowu.<br />

let zwierzTajemny = {<br />

”liczba lap” : 4,<br />

kolor : ”czarny”,<br />

”nazwa” : ”obibok”<br />

}<br />

62<br />

Powrót do spisu treści


Jak pracować z obiektami<br />

Po kluczu musimy dać dwukropek, który będzie oddzielał klucz<br />

od jego wartości. Wartości mogą być różne, tak jak w przypadku<br />

prostej zmiennej, i w zależności czy będą to wartości liczbowe<br />

i logiczne, czy tekstowe, powinniśmy umieścić wartość<br />

w cudzysłowie lub bez niego. Poszczególne klucze oddzielamy<br />

przecinkami. W powyższych przykładach stworzyliśmy obiekt,<br />

umieszczając poszczególne klucze w nowych linijkach, co uważane<br />

jest powszechnie za dobrą praktykę, ponieważ taki zapis<br />

ułatwia czytanie obiektu. Nic nie stoi jednak na przeszkodzie,<br />

by zadeklarować obiekt w pojedynczej linii:<br />

let obiekt = {klucz1:”jeden”, klucz2: 45, klucz3:true};<br />

Wybieranie konkretnej wartości z obiektu<br />

Wybieranie wartości z obiektu przebiega podobnie jak w przypadku<br />

tablic. Różnica polega na tym, że w kwadratowych nawiasach<br />

nie podajemy liczby – indeksu – pod którym znajduje<br />

się dany element, ale podajemy łańcuch znaków, który dany<br />

element identyfikuje, np.:<br />

zwierzTajemny [”nazwa”];<br />

”obibok”<br />

Tak jak pisałem wcześniej, nie zawsze trzeba łańcuch znaków<br />

umieszczać w cudzysłowie, zwłaszcza jeśli składa się on z pojedynczego<br />

słowa – ciągu znaków bez spacji. Wtedy zamiast<br />

63<br />

Powrót do spisu treści


Jak pracować z obiektami<br />

kwadratowych nawiasów możemy użyć kropki, aby otrzymać<br />

dokładnie taki sam efekt:<br />

obiekt.klucz2;<br />

45<br />

Istnieje jeszcze specjalna metoda pod nazwą Object.keys(),<br />

dzięki której możemy szybko sprawdzić, jaka jest pełna lista<br />

wszystkich kluczy w obiekcie.<br />

let pralka = {model: ”Pralka2000+”, dataProdukcji:<br />

2002, cena: 3000};<br />

Object.keys(pralka);<br />

[”model”, ”dataProdukcji”, ”cena”]<br />

Tworzenie obiektów krok po kroku<br />

Możemy deklarować zmienne bez przypisanej wartości, puste<br />

tablice i tak samo możemy także tworzyć puste obiekty. Użyjemy<br />

do tego klamer, pomiędzy którymi nic się nie będzie znajdować:<br />

let pustyObiekt = {};<br />

Żeby do obiektu dodać wartości przypisane do łańcuchów<br />

znaków możemy użyć następujących poleceń:<br />

pustyObiekt[”wartosc1”] = ”slowoJeden”;<br />

pustyObiekt[”wartosc2”] = 45;<br />

pustyObiekt[”wartosc3”] = ”Oto jest slowo”;<br />

64<br />

Powrót do spisu treści


Jak pracować z obiektami<br />

pustyObiekt;<br />

{ wartosc1: ”slowoJeden”, wartosc2: 45, wartosc3:<br />

”Oto jest slowo”}<br />

Na samym początku stworzyliśmy więc całkowicie pusty obiekt,<br />

do którego następnie dodawaliśmy kolejne 3 wartości przypisane<br />

do kolejnych kluczy: wartosc1, wartosc2 i wartosc3.<br />

Podobnie jak wcześniej, jeśli nazwa klucza jest pojedynczym<br />

ciągiem słów (bez spacji), to możemy tworzyć nowe obiekty za<br />

pomocą tzw. Notacji kropkowej, np.:<br />

pustyObiekt.wartosc4 = ”nowa wartosc”;<br />

65<br />

Powrót do spisu treści


Instrukcje warunkowe w <strong>JavaScript</strong><br />

Instrukcje warunkowe<br />

w <strong>JavaScript</strong><br />

Instrukcje warunkowe (ang. conditional) należą do jednych<br />

z najważniejszych konstrukcji w programowaniu. Ich głównym<br />

zadaniem jest uruchomienie określonych fragmentów programu<br />

w zależności, czy spełniony jest określony warunek. Gdy<br />

szykujecie się, żeby wyjść z domu, na pewno sprawdzacie przez<br />

okno, czy pada deszcz. Jeśli tak, to przed wyjściem z domu<br />

bierzecie parasol, w innym wypadku wychodzicie bez parasola,<br />

mając nadzieję, że przez cały dzień będzie świecić słońce.<br />

Gdybyśmy chcieli przyrównać to działanie do języków programowania,<br />

to wyglądałoby ono mniej więcej tak:<br />

Jeśli ”Pada deszcz” == Prawda<br />

to ”Weź parasolkę”<br />

W innym przypadku<br />

”Nie bierz parasolki”<br />

66<br />

Powrót do spisu treści


Instrukcje warunkowe w <strong>JavaScript</strong><br />

W <strong>JavaScript</strong> istnieje kilka rodzajów instrukcji warunkowych,<br />

my poznamy w ramach tego <strong>podręcznik</strong>a 3:<br />

If<br />

If…else<br />

Oraz<br />

Switch<br />

Instrukcje IF<br />

Jest to prostsza wersja instrukcji warunkowej, wykorzystujemy<br />

ją wtedy, kiedy chcemy wywołać określone działanie za każdym<br />

razem, gdy spełniony jest określony warunek. Konstrukcja<br />

instrukcji if wygląda następująco:<br />

if(warunek) reakcja;<br />

np.<br />

If (prawda==true) {<br />

console.log(”ta informacja będzie wyświetlona tylko,<br />

jeśli dany warunek jest spełniony”);<br />

}<br />

Poniżej znajduje się przykład pełnej instrukcji warunkowej, która<br />

sprawdzi, czy dana osoba pochodzi z Krakowa:<br />

Let osoba = {imie: ”Bartek”, miasto: ”Kraków”};<br />

console.log(”Cześć” + osoba.imie);<br />

If (osoba.miasto == ”Kraków”) {<br />

console.log(”Kraków to ładne miasto”);<br />

67<br />

Powrót do spisu treści


Instrukcje warunkowe w <strong>JavaScript</strong><br />

}<br />

W ten sposób za każdym razem na konsoli wyświetlona zostanie<br />

informacja powitalna, np. „Cześć Bartek”. Ale informacja, że<br />

„Kraków to ładne miasto” zostanie wyświetlona tylko w przypadku,<br />

gdy wartość klucza miasto w obiekcie będzie równe<br />

”Kraków”. W poniższym przypadku w związku z tym zostanie<br />

wyświetlona tylko informacja powitalna „Cześć Kasia”:<br />

Let osoba2 = {imie: ”Kasia”, miasto: ”Warszawa”};<br />

console.log(”Cześć” + osoba2.imie);<br />

If (osoba2.miasto == ”Kraków”) {<br />

console.log(”Kraków to ładne miasto”);<br />

}<br />

Instrukcja IF…ELSE<br />

Instrukcja IF…ELSE jest trochę bardziej rozbudowaną instrukcją<br />

IF. Różnica polega na tym, że w prostej instrukcji IF sprawdzamy,<br />

czy spełniony jest warunek. Jeśli jest spełniony to realizujemy<br />

wskazany fragment kodu, jeśli nie, to instrukcja w całości<br />

jest po prostu pomijana. W instrukcji IF…ELSE sprawdzamy, czy<br />

spełniony jest ten warunek, ale po części ELSE wskazujemy na<br />

alternatywny fragment kodu, który realizowany jest wtedy, gdy<br />

nie jest spełniony wskazany warunek.<br />

Składnia instrukcji IF…ELSE wygląda następująco:<br />

if (warunek) {<br />

68<br />

Powrót do spisu treści


Instrukcje warunkowe w <strong>JavaScript</strong><br />

instrukcje, które wykonujemy, gdy warunek jest<br />

spełniony<br />

} else {<br />

instrukcje, które wykonujemy, gdy warunek nie jest<br />

spełniony<br />

}<br />

Poniżej znajduje się przykład prostego algorytmu<br />

z instrukcją if…else<br />

let x = 1;<br />

if (x==1) {<br />

alert(„ponieważ x=1 to pojawia się to okienko<br />

ostrzegawcze”);<br />

} else {<br />

alert(”ponieważ z jakiegoś powodu x nie jest równe<br />

1, to pojawia się to okienko ostrzegawcze”);<br />

}<br />

Instrukcja SWITCH<br />

Podstawowe instrukcje IF oraz IF…ELSE nie są takie trudne,<br />

prawda? Im lepiej będziesz poznawał <strong>JavaScript</strong>, tym więcej<br />

podobnych instrukcji jeszcze poznasz. Ale w tym momencie<br />

ważne jest, żebyś poznał jeszcze jedną instrukcję – tzw. Switch.<br />

Switch (przełącznik) jest takim trochę połączeniem kilku instrukcji<br />

IF. Wyobraź sobie, że idziesz do sklepu z lodami i masz<br />

do wyboru pięć smaków. W zależności od tego, który z tych 5<br />

69<br />

Powrót do spisu treści


Instrukcje warunkowe w <strong>JavaScript</strong><br />

smaków wybierzesz, to obsługująca Cię osoba musi sięgnąć do<br />

wybranego zbiornika, żeby nałożyć gałkę. Wybór odpowiedniego<br />

pojemnika i wybranie z niego lodów o określonym smaku<br />

jest osobną instrukcją i w takim sklepie z lodami musimy mieć<br />

5 różnych instrukcji, z których ekspedientka będzie korzystać.<br />

Powiesz „wanilia”, to sięgnie ręką do pojemnika nr 3, powiesz<br />

„czekolada”, to sięgnie do pojemnika nr 5. Tak działa Switch.<br />

Sprawdza jaką wartość ma wyrażenie i uruchamia fragment<br />

kodu dla przypadku (tzw. Case), który jest równy wartości tego<br />

wyrażenia. Poniżej znajduje się przykład instrukcji Switch:<br />

let x = 1;<br />

switch (x) {<br />

case 1:<br />

alert(“x=1”);<br />

break;<br />

case 2:<br />

alert(“x=2”);<br />

break;<br />

default:<br />

alert(„Ile jest równe x...?!? nie wiem!”);<br />

}<br />

Zwróć uwagę, że na samym początku instrukcji użyliśmy słowa<br />

switch, a później w okrągłym nawiasie wpisaliśmy nazwę zmiennej,<br />

którą chcemy sprawdzać – mogą to być również działania,<br />

70<br />

Powrót do spisu treści


Instrukcje warunkowe w <strong>JavaScript</strong><br />

nie musi to być wyłącznie zmienna (np. (x+3)). Każdy badany<br />

przypadek zaczynamy od słowa „case”, a później wpisujemy<br />

wartość, którą chcemy sprawdzić (w naszym przypadku 1 i 2).<br />

Specjalny przypadek o nazwie ”default” uruchamiany będzie<br />

wtedy, gdy żaden z przypadków nie będzie zgodny z wartością<br />

naszej zmiennej. Użycie słowa „break” pod koniec instrukcji dla<br />

każdego przypadku powoduje, że nie ma potrzeby badać już<br />

innych przypadków, bo znaleźliśmy już ten który nam pasuje,<br />

więc możemy przejść do końca instrukcji switch. Ilość casów<br />

może być dowolna.<br />

Zobaczmy inny przykład, tym razem powiązany z obsługą<br />

przejścia dla pieszych:<br />

let kolor = ”zielony”;<br />

switch (kolor) {<br />

case ”zielony”:<br />

alert(„Możesz iść, sygnalizator świetlny świeci<br />

się na kolor zielony”);<br />

break;<br />

case ”czerwony”:<br />

alert(“STÓÓÓÓÓÓÓÓÓÓÓJ!!!”);<br />

break;<br />

case ”żółty”:<br />

alert(„Kolor żółty, przygotuj się ale nie wchodź na<br />

drogę póki nie zaświeci się kolor zielony”);<br />

71<br />

Powrót do spisu treści


Instrukcje warunkowe w <strong>JavaScript</strong><br />

break;<br />

default:<br />

alert(„nie świeci się ani zielony, ani czerwony,<br />

ani żółty. Być może sygnalizacja jest zepsuta. Zachowaj<br />

szczególną ostrożność!”);<br />

}<br />

Podstawowa struktura instrukcji switch wygląda<br />

więc następująco:<br />

switch (wyrażenie, np. zmienna) {<br />

case wartość 1:<br />

Instrukcja realizowana, gdy wartość zmiennej ==<br />

wartości 1;<br />

break;<br />

case wartość 2:<br />

Instrukcja realizowana, gdy wartość zmiennej ==<br />

wartości 2;<br />

break;<br />

case wartość 3:<br />

Instrukcja realizowana, gdy wartość zmiennej ==<br />

wartości 3;<br />

break;<br />

default:<br />

instrukcja wykonywana, gdy wartość zmiennej nie jest<br />

równa ani wartości 1, ani 2 ani 3<br />

}<br />

72<br />

Powrót do spisu treści


Różne rodzaje pętli<br />

Różne rodzaje pętli<br />

Pętle stanowią obok warunków kolejny kluczowy element programowania.<br />

Powodują one, że dany fragment kodu będzie<br />

powtarzał się tak długo, aż nie zostanie spełniony określony<br />

warunek. To trochę jak podczas jedzenia zupy. Mamy jeden warunek,<br />

który powtarza się w kółko: nabieramy na łyżkę trochę<br />

zupy, wkładamy ją do ust, i połykamy pyszną miksturę. Robimy<br />

to tak długo, aż zupa znajduje się w talerzu, później przerywamy<br />

jedzenie i przechodzimy do kolejnej instrukcji – na przykład<br />

jedzenia drugiego dania.<br />

W ramach tego <strong>podręcznik</strong>a poznamy dwa rodzaje pętli:<br />

1. Pętla While<br />

2. Pętla For<br />

Pętla While<br />

Jest to pętla, która powoduje, że instrukcje w niej zawarte po-<br />

73<br />

Powrót do spisu treści


Różne rodzaje pętli<br />

wtarzane są tak długo, aż nie spełniony zostanie określony warunek.<br />

Podstawowa struktura tej pętli wygląda następująco:<br />

while (warunek){<br />

kod pętli<br />

np.<br />

while (i


Różne rodzaje pętli<br />

zupy...”. Moglibyśmy dokładnie ten sam efekt uzyskać bez użycia<br />

pętli, ale wtedy zapis byłby trochę dłuższy i wyglądał następująco:<br />

console.log(„Nie, nie, nie – nie chcę zupy...”);<br />

console.log(„Nie, nie, nie – nie chcę zupy...”);<br />

console.log(„Nie, nie, nie – nie chcę zupy...”);<br />

console.log(„Nie, nie, nie – nie chcę zupy...”);<br />

console.log(„Nie, nie, nie – nie chcę zupy...”);<br />

console.log(„Nie, nie, nie – nie chcę zupy...”);<br />

console.log(„Nie, nie, nie – nie chcę zupy...”);<br />

console.log(„Nie, nie, nie – nie chcę zupy...”);<br />

console.log(„Nie, nie, nie – nie chcę zupy...”);<br />

console.log(„Nie, nie, nie – nie chcę zupy...”);<br />

console.log(„Nie, nie, nie – nie chcę zupy...”);<br />

console.log(„Nie, nie, nie – nie chcę zupy...”);<br />

console.log(„Nie, nie, nie – nie chcę zupy...”);<br />

console.log(„Nie, nie, nie – nie chcę zupy...”);<br />

console.log(„Nie, nie, nie – nie chcę zupy...”);<br />

console.log(„Nie, nie, nie – nie chcę zupy...”);<br />

console.log(„Nie, nie, nie – nie chcę zupy...”);<br />

console.log(„Nie, nie, nie – nie chcę zupy...”);<br />

console.log(„Nie, nie, nie – nie chcę zupy...”);<br />

console.log(„Nie, nie, nie – nie chcę zupy...”);<br />

75<br />

Powrót do spisu treści


Różne rodzaje pętli<br />

Łatwo sobie wyobrazić, jak rozbudowany stałby się program,<br />

gdybyśmy chcieli ten napis powtórzyć np. 100 razy. W przypadku<br />

pętli while wystarczy, że zmienimy jedną cyfrę w kodzie:<br />

let i = 1;<br />

while (i


Różne rodzaje pętli<br />

licznika) {<br />

Instrukcja do wykonania w pętli<br />

}<br />

Poniżej znajduje się przykład tego typu pętli:<br />

for (let i=0; i


Różne rodzaje pętli<br />

To jest 6 raz, jak pętla się uruchomiła<br />

To jest 7 raz, jak pętla się uruchomiła<br />

To jest 8 raz, jak pętla się uruchomiła<br />

To jest 9 raz, jak pętla się uruchomiła<br />

Co zrobić, by licznik działał od 1 do 10, a nie – tak jak w tym<br />

przykładzie – od 0 do 9?<br />

Poniżej znajduje się kod z małą modyfikacją:<br />

for (let i=1; i


Parę słów o funkcjach<br />

Parę słów o funkcjach<br />

Funkcje w programowaniu możemy w uproszczeniu określić<br />

jako programy w programie. Wykonują one określone działania<br />

i mają częściowo samodzielny charakter. Dlaczego częściowo<br />

samodzielny? Ponieważ nie mogą one działać same, bez<br />

uwzględnienia ich w ramach większego programu, ale z drugiej<br />

strony pojedyncza funkcja może być wykorzystana wielokrotnie<br />

w ramach danego programu, możemy ją wywoływać, odwoływać<br />

się do niej w dowolnym momencie. Z drugiej strony<br />

pojedynczą funkcję możemy stosunkowo łatwo skopiować, zaadaptować<br />

i wykorzystać także w innym programie, w związku<br />

z czym pozwalają one na przyspieszenie pracy nad tworzeniem<br />

nowego kodu.<br />

Przykład z życia – Funkcja sosCzosnkowyJestFajny()<br />

Wyobraźmy sobie, że robimy pierogi i chcielibyśmy do nich<br />

stworzyć też sos czosnkowy. Sos będzie właśnie naszą funkcją.<br />

79<br />

Powrót do spisu treści


Parę słów o funkcjach<br />

Taki sos czosnkowy sam w sobie nie jest pełnoprawnym posiłkiem,<br />

ale możemy w nim pomaczać pierogi w trakcie posiłku,<br />

by trochę uatrakcyjnić ich smak. Jedząc obiad, możemy wielokrotnie<br />

maczać w nim kolejne pierogi, za każdym razem powodując,<br />

że kolejny kęs pieroga z sosem czosnkowym będzie<br />

miał bardziej wyrazisty smak. Jeśli zostanie nam trochę sosu,<br />

spokojnie możemy wykorzystać go do poprawy smaku także<br />

innych posiłków.<br />

Funkcje pozwalają także na łatwiejsze zorientowanie się w kodzie<br />

programu. Pewne czynności, zwłaszcza takie, które są<br />

wielokrotnie powtarzane w toku programu, możemy zakodować<br />

w ramach funkcji. Cały program będzie miał wtedy czytelniejszą,<br />

prostszą strukturę.<br />

To nie jest nasz początek przygody z funkcjami. Pewne funkcje<br />

są na stałe dostępne w ramach tzw. bibliotek w <strong>JavaScript</strong>.<br />

Oznacza to, że nie musimy tych funkcji tworzyć od zera, wystarczy<br />

że znamy ich nazwę i wiemy, jaki będzie rezultat wywołania<br />

tych funkcji. Takie gotowe funkcje to np.: math.floor, alert,<br />

promt, confirm czy random. W tym rozdziale nauczymy się, jak<br />

tworzyć nowe funkcje od początku.<br />

Jak zbudowana jest funkcja?<br />

Budowa funkcji jest trochę podobna to budowy pętli, którą poznaliśmy<br />

we wcześniejszych rozdziałach.<br />

80<br />

Powrót do spisu treści


Parę słów o funkcjach<br />

function nazwaFunkcji() {<br />


Parę słów o funkcjach<br />

zmienną. Akurat ta funkcja jest dość krótka i mało praktyczna<br />

w normalnym programowaniu, ale ostatecznie dzięki niej na<br />

pewno nie zapomnimy, jaki jest najlepszy film pod słońcem!!!<br />

Wywołanie funkcji to po prostu wykonanie kodu, który znajduje<br />

się w treści funkcji. Wywołanie funkcji wymaga wpisania<br />

nazwy zmiennej, do której nasza funkcja jest przypisana, ale<br />

dodatkowo musimy dodać nawiasy, tak jak pokazujemy na poniższym<br />

przykładzie:<br />

> najlepszyFilmPodSloncem();<br />

Gwiezdne Wojny<br />

< undefined<br />

Gdy wywołamy funkcję najlepszyFilmPodSloncem pojawi się<br />

w konsoli tekst – Gwiezdne Wojny, co związane jest z tym, że<br />

nasza funkcja składa się tak naprawdę z jednej tylko instrukcji –<br />

console.log(”Gwiezdne Wojny”);<br />

Zauważcie jednak, że po słowach „Gwiezdne Wojny” pojawiła<br />

się jeszcze trzecia linijka ze słowem undefined. Chodzi o to, że<br />

niektóre funkcje zwracają jakieś wartości. Funkcja dodawania<br />

dwóch liczb zwróci np. wynik tego działania matematycznego.<br />

Akurat nasza pierwsza funkcja nie zwraca żadnych wartości,<br />

a jedynie wykonuje instrukcje zapisane w jej treści. Dlatego właśnie<br />

w trzeciej linijce nie zostały wyświetlone żadne wartości,<br />

ale w ich miejscu pojawiło się słowo undefined, które oznacza<br />

82<br />

Powrót do spisu treści


Parę słów o funkcjach<br />

po prostu, że funkcja nie zwraca żadnych wartości. Zwracana<br />

przez funkcję wartość może być później wykorzystana w dalszej<br />

części programu. Pamiętajcie, że aby funkcja zwróciła jakąś<br />

wartość, w jej treści powinna się pojawić konkretne słowo<br />

kluczowe – return. Bez niego, funkcja będzie działała i będzie<br />

wykonywała wszystkie instrukcje wskazane w treści funkcji, ale<br />

wykonywanie instrukcji to nie to samo co zwracanie wartości.<br />

Argumenty w funkcji<br />

Nasza pierwsza funkcja była bardzo prosta i za każdym razem<br />

robiła dokładnie to samo. Warto natomiast wiedzieć, że do<br />

funkcji możemy dodać argumenty, dzięki czemu funkcja będzie<br />

działała na różne sposoby, w zależności od tego, jaki wprowadzony<br />

zostanie w danym momencie argument.<br />

Function nazwaFunkcji(argument) {


Parę słów o funkcjach<br />

Wpisanie następnie w konsoli wywołania: sayHi(”Bartek”)<br />

spowoduje, że na konsoli pojawi się:<br />

Bartek! Miło mi Cię poznać<br />

< undefined<br />

Informacja undefined pojawi się również przy tej funkcji, ponieważ<br />

podobnie jak w poprzedniej, wykonuje ona pewne instrukcje,<br />

ale nie zwraca nadal żadnych wartości. Argument, który<br />

ma wartość tekstową (string), powinien zostać zapisany w nawiasie<br />

oraz koniecznie w cudzysłowach. Argumenty liczbowe<br />

będziemy wpisywali natomiast bez cudzysłowów. Przy każdym<br />

wywołaniu funkcji dana wartość argumentu będzie połączona<br />

do ciągu tekstu i wyświetlana na konsoli. Możemy wywoływać<br />

tę samą funkcję z różnymi wartościami argumentu, a wtedy<br />

ostateczna treść wyświetlanego tekstu zależeć będzie od tego,<br />

jaki argument wprowadzimy w trakcie wywoływania funkcji.<br />

Argumenty mogą mieć, jak już wspomnieliśmy, również wartość<br />

liczbową. Mogą określać np. ile razy jakaś czynność w ramach<br />

funkcji ma być wywołana. Przyjrzyj się poniższemu przykładowi:<br />

let ramPamPam = function(powtorz) {<br />

}<br />

}<br />

for (let i = 0; i < powtorz; i++) {<br />

console.log(i + “. Ram Pam Pam”);<br />

84<br />

Powrót do spisu treści


Parę słów o funkcjach<br />

Po wywołaniu tej funkcji z atrybutem 5: ramPamPam(5), na konsoli<br />

powinny pojawić się następujące wyniki:<br />

0. Ram Pam Pam<br />

1. Ram Pam Pam<br />

2. Ram Pam Pam<br />

3. Ram Pam Pam<br />

4. Ram Pam Pam<br />

W zależności od tego, jaką wartość liczbową wprowadzimy<br />

w tym wypadku jako atrybut, tyle razy powtórzy się linijka tekstu<br />

piosenki „Ram Pam Pam”.<br />

Do funkcji możemy wprowadzić jednak także większą liczbę<br />

argumentów. W takiej sytuacji w deklaracji funkcji powinniśmy<br />

poszczególne argumenty oddzielić od siebie przecinkami.<br />

function nazwaFunkcji(argument1, argument2) {<br />

console.log(”Tutaj znajduje się pierwszy argument:<br />

” + argument1);<br />

console.log(”Tutaj znajduje się drugi argument: ” +<br />

argument2);<br />

}<br />

85<br />

Powrót do spisu treści


Parę słów o funkcjach<br />

Poniżej znajduje się przykład funkcje z dwoma argumentami:<br />

let smileOrNot = function (ileRazy, jakaMina) {<br />

for (let i = 0; i < ileRazy; i++) {<br />

console.log(i + ‘’ ‘’ +jakaMina);<br />

}<br />

};<br />

W ramach wywołania niniejszej funkcji możemy napisać np.:<br />

smileOrNot(4, ”:)”); aby uzyskać efekt:<br />

0 :)<br />

1 :)<br />

2 :)<br />

3 :)<br />

albo<br />

smileOrNot(7, „:-(„);<br />

0 :-(<br />

1 :-(<br />

2 :-(<br />

3 :-(<br />

4 :-(<br />

5 :-(<br />

6 :-(<br />

86<br />

Powrót do spisu treści


Parę słów o funkcjach<br />

Zwracanie wartości z funkcji<br />

Do tej pory pracowaliśmy z funkcjami które nie zwracały żadnej<br />

dodatkowej wartości. Wykonywały one pewne operacje, ale<br />

efekt działania funkcji kończył się z chwilą jej wykonania. Często<br />

będziemy jednak oczekiwali od funkcji wykonania operacji,<br />

np. obliczeń, które możemy wykorzystać w innych częściach<br />

algorytmu. Wartością zwracaną nazywany takie dane, które<br />

funkcja zwraca na koniec swojego działania. Wartość zwracaną<br />

funkcji możemy przypisać do wybranej zmiennej, dodać do tablicy<br />

albo wykorzystać w innej funkcji.<br />

Funkcja Math.floor() służy do zaokrąglania liczb do liczb całkowitych<br />

w dół, natomiast Math.random() – do generowania losowej<br />

liczby między 0 a 1. Zobacz proszę przykład poniżej:<br />

Math.floor(Math.random() * 10);<br />

Jest to przykład tzw. funkcji zagnieżdżonych, tzn. zwrócona<br />

wartość – wynik działania jednej funkcji jest jednocześnie<br />

atrybutem dla drugiej funkcji. Jak po kolei będzie to działało?<br />

Funkcja Math.random() wygeneruje liczbę między 0 a 1, np.<br />

0,67. Następnie zostanie ona pomnożona przez 10, czyli w tym<br />

przykładzie uzyskamy 6,70. Następnie funkcja Math.floor() zaokrągli<br />

liczbę 6,70 do liczby całkowitej w dół, a więc uzyskamy<br />

liczbę 6 jako wynik finalny.<br />

87<br />

Powrót do spisu treści


Parę słów o funkcjach<br />

Spróbujmy stworzyć teraz samodzielnie funkcję, która zwróci<br />

jakąś wartość. Będzie to funkcja zmniejszająca wartość podanej<br />

liczby o 2.<br />

let odejmijDwa = function (liczba) {<br />

};<br />

return liczba – 2;<br />

Do zwrócenia wartości z funkcji używamy słowa kluczowego<br />

return. Po tym słowie powinna być wstawiona wartość, która<br />

ma być zwrócona. W tym przypadku po słowie return znajduje<br />

się atrybut „liczba”, na którym wykonujemy jeszcze operację<br />

matematyczną – odejmujemy liczbę 2.<br />

Jeśli w związku z tym wywołamy tą funkcję z atrybutem 4:<br />

odejmijDwa(4);<br />

Dostaniemy wynik:<br />

2<br />

Jeśli wpiszemy:<br />

odejmijDwa(12);<br />

otrzymamy wynik:<br />

10<br />

88<br />

Powrót do spisu treści


Żywa pagina<br />

Podsumowanie<br />

<strong>JavaScript</strong> to język programowania, z którym mamy kontakt<br />

praktycznie w każdym momencie, gdy korzystamy z internetu.<br />

Małe programy pisane w tym języku znajdują się praktycznie<br />

na każdej stronie internetowej.<br />

Ale chyba nie jest on tak trudny, prawda? W ramach <strong>podręcznik</strong>a<br />

chcieliśmy pokazać Ci, jak ten język działa i jak rozpocząć<br />

z nim pracę. Mamy nadzieję, że udało nam się przybliżyć choć<br />

trochę <strong>JavaScript</strong>.<br />

Teraz jednak wszystko już zależy od Ciebie!<br />

Spodobał Ci się <strong>JavaScript</strong> i chcesz poznać go lepiej? Na stronie<br />

HearIT znajdziesz linki do wielu kursów i materiałów edukacyjnych,<br />

dzięki którym poznasz ten język dużo lepiej!<br />

Pierwsze kroki, te najtrudniejsze, masz już za sobą! Nie ma się<br />

co bać, tylko trzeba dalej programować!<br />

Powodzenia!<br />

89<br />

Powrót do spisu treści


Żywa pagina<br />

90

Hooray! Your file is uploaded and ready to be published.

Saved successfully!

Ooh no, something went wrong!