Podstawy Programowania: Tworzenie funkcji

0:00W tej lekcji utworzymy pierwszą w tym kursie funkcję i zobaczysz jak te funkcje

0:06działają w tej oraz kolejnych lekcjach i jak mogą pomóc ci łącząc tą wiedzę, którą

0:11już teraz masz tworzyć bardziej rozbudowane programy.

0:15Na początek będziemy chcieli utworzyć funkcję, którą nazwiemy sayHello.

0:19Robimy to tak, że piszemy function i

0:21podajemy jej nazwę i ta nazwa może być taka sama jak nazwa zmiennych tzn.

0:27nie może się zaczynać od np.

0:29liczb itd, czyli to jest tak samo jak przypadku

0:31zmiennych. Więc Ty ustalasz jak chcesz nazwać funkcję.

0:35Więc nazwiemy ją sayHello w ten sposób, następnie podajemy nawiasy okrągłe,

0:40tutaj w tych nawiasach coś się będzie

0:41mogło znajdować ale o tym w kolejnych lekcjach

0:44i potem podajemy taki oto blok kodu.

0:46I to oznacza, że to co zawrzemy w funkcji

0:49podobnie jak było w przypadku instrukcji warunkowych czy np.

0:52pętli to będzie tzw.

0:53ciało tej funkcji czyli body

0:56i innymi słowy będzie tutaj kod, który się

0:58wykona kiedy wywołamy tę funkcję ale o tym za moment.

1:01Więc tutaj możemy wpisać wszystko co do tej pory robiliśmy np.

1:04instrukcje warunkowe if, tutaj mogą być pętle itd.

1:08Każdy kod jaki do tej pory pisaliśmy może

1:10się znaleźć wewnątrz funkcji. Więc zapiszemy sobie tutaj console.log i napiszemy Hello,

1:16w ten sposób. Zapisze to i zauważ, że nasz program bo on

1:20się tutaj wykonuje za każdym razem jak zapiszemy plik,

1:22nic nam nie pokazał.

1:24Nie ma natomiast również błędów bo tutaj wszystko jest w porządku.

1:26Utworzyliśmy funkcję, którą nazwaliśmy

1:29sayHello, ona jeżeli byśmy ją wywołali zrobi console.log Hello

1:33ale do tej pory nigdzie jej nie wywołaliśmy. I teraz mając funkcję możemy

1:38ją wywołać w dowolnym miejscu więc napiszmy sobie tutaj sayHello odwołujemy

1:43się do niej po nazwie tak samo jak do zmiennej,

1:46natomiast gdybym zrobił tylko tyle to

1:48odwołałem się do tej funkcji ale jej nie wywołałem.

1:51Gdybyśmy zrobili console.log(sayHello),

1:54zobacz, to tak naprawdę tutaj nam pokaże taki ciąg function: sayHello.

1:58Oznacza to, że my tutaj przekazaliśmy tylko

2:00referencje do tej funkcji i to samo w sobie niewiele nam daje. Ale jeżeli na

2:05takiej funkcji, która tutaj w tym momencie wygląda trochę jak zmienna prawda

2:08nazwaliśmy sobie ją tak jak chcieliśmy, tutaj się do niej odwołujemy, jeżeli postawimy parę

2:14nawiasów okrągłych, czyli dokładnie to samo co robimy zauważ przy console.log

2:18to też jest jakaś funkcja to log wewnątrz obiektu console

2:22więc jeżeli się tutaj odwołamy do tego sayHello, zapisze, teraz zobaczymy Hello.

2:26Czyli w tym momencie w naszym programie

2:28gdzie wywołaliśmy funkcję, wykonał się cały kod jaki się w niej znajduje

2:32i tu oczywiście może być znacznie więcej tego kodu.

2:35Natomiast to co jest w super w przypadku

2:37funkcji to są dwie rzeczy. Po pierwsze to, że możemy grupować jakiś kod i później w

2:42odpowiednim momencie go wywoływać a druga rzecz to to, że będziemy mogli przekazywać

2:46tu pewne parametry ale o tym powiemy w lekcji kolejnej.

2:49Zauważ, że zaletą tego, że mamy funkcję jest to, że możemy ją

2:53wywoływać wielokrotnie. Możemy tutaj napisać sayHello znowu

2:57jak ją wywołam drugi raz to będziemy mieli dwa razy tutaj Hello.

3:00No i znowu tutaj może być bardzo wiele

3:02różnej logiki ale dzięki temu, że jest to funkcja będziemy mogli ją wywoływać tyle

3:06razy ile chcemy i w takich momentach i miejscach gdzie chcemy.

3:09Moglibyśmy nawet tutaj utworzyć teraz pętlę i w pętli np.

3:12100 razy wywołać tę funkcję,

3:14nie ma problemu a tylko w jednym miejscu

3:16musielibyśmy zdefiniować co ta funkcja robi.

3:19Jest jeszcze drugi sposób na to żeby

3:21przypisywać funkcje czy żeby tworzyć funkcje w języku JavaScript.

3:26Tak nie musi być w innych językach programowania więc na to zwróć uwagę.

3:29Ale jeśli chodzi o język JavaScript to

3:31możemy utworzyć również zmienną lub stałą tak jak to robiliśmy do tej pory np.

3:35const sayHello

3:37i mówiłem Ci, że tutaj po prawej

3:39stronie jak tworzymy zmienne czy stałe w języku JavaScript możemy przypisać każdą

3:43wartość jaka jest dostępna w języku JavaScript.

3:45Więc to może być ciąg znaków, może być

3:47dwójka, może być tablica ale również może to być funkcja.

3:51Wtedy nie podajemy nazwy tej funkcji chociaż też można to zrobić ale to są

3:56bardzo specyficzne przypadki do czego mogłoby się to przydać

3:58i nie będziemy się teraz w nie zgłębiać

4:01ale zauważ, że wtedy możemy w ten sposób zapisać funkcje.

4:04Nie musimy podawać jej nazwy. Tutaj mi

4:06podkreśla przy tym sayHello bo nie możemy nazwać tak stałej czy zmiennej jeżeli w

4:10tej przestrzeni mamy już funkcję, która tak samo się nazywa. No bo nie wiadomo by było do

4:15czego się później to odwołuje gdybyśmy powiedzieli sayHello. Więc nazwiemy to sayHello2

4:19wtedy jest to zupełnie inna nazwa i nie koliduje i przypisujemy funkcję,

4:24tak jak wspomniałem tu już nie trzeba

4:25wtedy podawać jej nazwy. W tej funkcji możemy zrobić console.log np.

4:30cześć, w ten sposób, zapisuje to

4:33i dokładnie tak samo będę mógł się do niej odwołać czyli sayHello2

4:37to jest stała, która kieruje na funkcję a skoro kieruje na funkcję to znaczy, że mogę

4:43ją wywołać. I jeżeli zapisze zobaczymy tutaj cześć.

4:48To tyle jeżeli chodzi o podstawy tworzenia

4:50funkcji w kolejnych lekcjach będziemy się skupiać na tym do czego te funkcje mogą

4:53nam się przydać i jak możemy je jeszcze rozbudować.