Programowanie w JavaScript Rusz głową!

120

Rozdział 3.

Jak działa funkcja

No dobrze, ale jak to właściwie działa?

Najpierw przepiszemy istniejący kod z użyciem funkcji

bark

.

function bark(name, weight) {

if (weight > 20) {

console.log(name + ” szczeka HAU HAU”);

} else {

console.log(name + ” szczeka hau hau”);

}

}

bark(”Burek”, 23);

bark(”Mops”, 13);

bark(”Reksio”, 53);

bark(”Saba”, 17);

O… To jest niezłe…

Cała logika kodu znalazła

się w jednym miejscu.

Teraz cały kod sprowadza się jedynie do

kilku wywołań funkcji bark, do których

przekazywane są imiona i waga psów.

O rany, teraz kod

jest taki prosty!

Nieźle… Teraz kod jest naprawdę znacznie krótszy — będzie także zapewne bardziej czytelny dla

Twojego współpracownika, który — być może — będzie musiał go przeanalizować i wprowadzić

w nim kilka zmian. Udało się także umieścić całą logikę kodu w jednym, wygodnym miejscu.

No dobrze, ale jak to właściwie wszystko do siebie pasuje i działa? Przeanalizujemy działanie tego

kodu krok po kroku.

Przede wszystkim mamy funkcję

A zatem na samym początku kodu została

umieszczona funkcja

bark

. Przeglądarka

odczytuje ten kod, dochodzi do wniosku,

że ma do czynienia z funkcją, a następnie

analizuje instrukcje umieszczone wewnątrz niej.

Przeglądarka wie, że jeszcze nie ma wykonywać

ciała funkcji — poczeka z tym aż do momentu,

gdy funkcja zostanie wywołana w jakimś innym

miejscu kodu.

Można też zauważyć, iż funkcja jest

sparametryzowana, co oznacza, że w momencie

wywoływania trzeba będzie do niej przekazać

imię oraz wagę psa. Dzięki temu funkcję będzie

można wywoływać dla dowolnie wielu psów.

Za każdym razem jej logika będzie operować

na przekazanych danych o psie.

function bark(name, weight) {

if (weight > 20) {

console.log(name + ” szczeka HAU HAU”);

} else {

console.log(name + ” szczeka hau hau”);

}

}

Jeszcze raz, to są parametry;

podczas wywoływania funkcji

są im przypisywane konkretne

wartości.

A wszystko to, co jest

umieszczone wewnątrz funkcji,

nazywamy jej ciałem.

jesteś tutaj

121

Przedstawienie funkcji

A teraz wywołajmy funkcję

Aby wywołać funkcję, należy podać jej nazwę, następnie

nawias otwierający, wszystkie wartości, które chcemy

przekazać do funkcji (rozdzielone przecinkami), a na końcu

nawias zamykający. Wartości umieszczone w nawiasach

nazywamy

argumentami. Dla funkcji

bark

potrzebujemy

dwóch argumentów: imienia psa oraz jego wagi.

A tak wygląda wywołanie funkcji.

function bark(name, weight) {

if (weight > 20) {

console.log(name + “ szczeka HAU HAU”);

} else {

console.log(name + “ szczeka hau hau”);

}

}

bark(”Burek”, 23);

Tutaj przekazujemy do

funkcji dwa argumenty,

nazwę psa oraz jego

wagę.

W momencie wywoływania funkcji bark

argumenty są przypisywane nazwom

parametrów.

A w kodzie funkcji wszędzie

tam, gdzie pojawią się nazwy

parametrów, zostaną użyte

przekazane wartości.

Nazwa naszej funkcji.

”Burek”

23

Po przypisaniu wartości argumentów

nazwom parametrów możemy już wykonać

instrukcje umieszczone w ciele funkcji.

function bark(name, weight) {

if (weight > 20) {

console.log(name + ” szczeka HAU HAU”);

} else {

console.log(name + ” szczeka hau hau”);

}

}

Parametry pełnią w ciele funkcji rolę

zmiennych, którym zostały przypisane

wartości argumentów przekazanych

w wywołaniu funkcji.

Po wywołaniu funkcji jej ciało załatwi

całą resztę

Kiedy już będziemy znali wartości wszystkich

parametrów funkcji — np. że parametr

name

ma

wartość

”Burek”

, a

weight

wartość

23

— będziemy

mogli wykonać ciało funkcji.

Instrukcje umieszczone w ciele funkcji są

wykonywane od góry ku dołowi, dokładnie tak samo

jak każdy inny kod. Jedyna różnica polega na tym,

że parametrom

name

oraz

weight

są przypisywane

wartości przekazane w wywołaniu funkcji.

”Burek”

”Burek”

23

122

Rozdział 3.

Funkcje ćwiczebne

A kiedy funkcja zostanie zakończona

Logika umieszczona wewnątrz funkcji została już wykonana

(a w naszym przypadku przekonamy się, że Burek, pies

ważący 23 kilogramy, szczeka HAU HAU), a funkcja —

zakończona. Kiedy realizacja funkcji zostaje zakończona,

sterowanie jest przekazywane do następnej instrukcji

umieszczonej za wywołaniem

bark

.

function bark(name, weight) {

if (weight > 20) {

console.log(name + ” szczeka HAU HAU”);

} else {

console.log(name + ” szczeka hau hau”);

}

}

bark(”Burek”, 23);

bark(”Mops”, 13);

bark(”Reksio”, 53);

bark(”Saba”, 17);

Kiedy realizacja funkcji zostanie zakończona, przeglądarka

zaczyna wykonywać następną instrukcję, umieszczoną

za jej wywołaniem.

W naszym przypadku ponownie wywołuje tę samą funkcję,

przekazując do niej inne argumenty; a zatem cały proces

rozpoczyna się od początku!

Wykonaliśmy to…

…więc

przechodzimy

do następnej

instrukcji.

Skorzystaj z opcji Narzędzia, by wyświetlić

konsolę JavaScript i zobaczyć komunikat.

"Burek szczeka HAU HAU"

Poniżej przedstawiliśmy kilka kolejnych wywołań funkcji bark. Obok każdego z nich zapisz, jakie,

według Ciebie, powinny być jego wyniki, ewentualnie czy kod spowoduje wystąpienie błędu.

Nie zapomnij sprawdzić wyników na końcu rozdziału.

bark(”Reksio”, 20); _______________________________________________

bark(”Skuter”, -1); _______________________________________________

bark(”Dino”, 0, 0); _______________________________________________

bark(”Fido”, ”20”); _______________________________________________

bark(”Saba”, 10); _______________________________________________

bark(”Agent”, 21); _______________________________________________

Napisz jakie, według

Ciebie, będą wyniki

wyświetlone w oknie

konsoli.

Masz jakieś pomysły

na temat tego, co tu

się stanie?

Zaostrz ołówek

jesteś tutaj

123

Przedstawienie funkcji

Magnesy z kodem

']LDâDMċF\NRG-DYD6FULSW]RVWDâSRFLĐW\QDNDZDâHF]NL

SU]\F]HSLRQ\QDORGyZFHLFDâNRZLFLHZ\PLHV]DQ\&]\

SRWUDILV]SRXNâDGDþJR]SRZURWHPZG]LDâDMċF\SURJUDP

JHQHUXMċF\SU]HGVWDZLRQHSRQLİHMZ\QLNL"=ZUyþXZDJĐ

İHQDORGyZFHPRİHE\þWURFKĐQLHSRWU]HEQHJRNRGX

]DWHP³E\þPRİH³QLHEĐG]LHV]PXVLDâXİ\þZV]\VWNLFK

PDJQHVLNyZ3RUyZQDMVZRMċRGSRZLHGĮ]QDV]ċ

SU]HGVWDZLRQċQDNRĚFXUR]G]LDâX

Konsola JavaScript

Ubierz sweter.

Ubierz t-shirt.

8ELHU]NXUWNÚ

function

,

,

,

}

}

}

{

(

)

whatShallIWear

whatShallIWear(10);

whatShallIWear(30);

whatShallIWear(15);

else {

console.log("Ubierz t-shirt.");

}

else if (temp < 25) {

console.log("Ubierz sweter.");

}

if (temp < 15) {

console.log("Ubierz kurtkÚ.");

}

temp

temperature

Używamy takiego rysunku,

by przedstawić okno konsoli

JavaScript.