Przekazywanie parametrów do funkcji

pytanie zadane 19 lipca 2016 w JavaScript przez Madar Obywatel (1,560 p.)

Witam
Od jakiegoś czasu uczę się JavaScript. Na swojej drodze napotkałem dość duży problem, mianowicie mam problem ze zrozumieniem oraz przeznaczeniem przekazywania parametrów do funkcji. Od wczoraj nad tym ślęczę, dziś w pracy nie dawalo mi to spokoju. Miałem nadzieję, że dziś po pracy załapię o co chodzi, ale juz nie wiem gdzie szukać. Obejrzałem kilka tutoriali, każdy był dla mnie niestety niewystarczająco zrozumiały.
Czy ktoś z umiejętnościami dydaktycznymi byłby w stanie mi wytłumaczyć "łopatologicznie" na czym polega cały "myk" z przekazywaniem parametrów, kiedy ich używać i dlaczego ważne jest, aby je stosować?

Pozdrawiam i liczę na pomoc :)

komentarz 19 lipca 2016 przez ScriptyChris Mędrzec (190,190 p.)

Oglądałeś ten odcinek kursu (zwłaszcza od 10:20)?

https://www.youtube.com/watch?v=HHplT1A4_A4

Jeszcze to (najlepiej cały rozdział o funkcjach): http://eloquentjavascript.net/03_functions.html#h_tqLFw/oazr

komentarz 19 lipca 2016 przez Madar Obywatel (1,560 p.)

Tak oglądałem, ale nadal nie jestem pewien, czy rozumiem

komentarz 19 lipca 2016 przez itcloud Gaduła (3,380 p.)

Nie podałęś kodu, więc nie wiem dokładnie do czego się odnieść.

Tak ogólnie: funkcja to jakis tam przepis na coś. Wiec żeby coś otrzymać, jakiś wynik, musisz podać do funkcji jakieś dane wejściowe. Możesz, ale nie musisz.

function myFunction(p1, p2) {
    return p1 * p2;              // funkcja zwróci wynik mnożenia
}

http://www.w3schools.com/js/js_functions.asp

komentarz 19 lipca 2016 przez Madar Obywatel (1,560 p.)

Dla przykładu znalazłem taki przykład:

<html>
<head lang="pl">
<script language="JavaScript">

</script>
</head>
<body>
Wpisz swoje imię:
<form>
  <input type="text" name="name" onBlur="getname(this.value)" value="">
</form>
</body>
</html>

funkcja przekazuje jako parametr str, potem podczas wywołania nie odnosi sie do str, tylko do this.value, dlaczego tak ? Zupełnie nie rozumiem podejścia, nawet filmik pana Mirosława Zelenta mi tego nie rozjaśnił. Utknąłem w czarnym punkcie i nie potrafie tego przeskoczyć :(

komentarz 19 lipca 2016 przez Programista3 Gaduła (3,390 p.)

Przy wywołaniu do funkcji przekazujesz this.value (wartość inputa). Do funkcji zostanie przekazana ta wartość, wewnątrz funkcji ta wartość będzie pod zmienną str.

Przy wywołaniu podajesz jakąś zmienną której wartość ma zostać przekazana do funkcji, wewnątrz funkcji nazwa parametru może być dowolna, może być zupełnie nie związana z nazwą zmiennej którą przekazujesz, do tej nazwy zostanie przypisana wartość zmiennej którą przekazałeś do funkcji.

komentarz 19 lipca 2016 przez NaviFox Dyskutant (8,950 p.)
edycja 19 lipca 2016 przez NaviFox

DO funkcji getname() przekazywana jest wartość "this.value", która jest jakimś tam wierszem znaków.

W tym momencie kodu <"getname(this.value)"> wywoływana jest funkcja czyli:

function getname(str) {
alert("Hi, "+ str+"!");
}

która jako parametr posiada zmienną, którą ktoś sobie tam nazwał "str" po to by podkreślić znaczenie tej zmiennej odnoszącej się do wiersza znaków czyli "string" czyli "this.value", typ zmiennej jest interpretowany dla tego nie ma typu wartości przed nazwą zmiennej str. Następnie sama funkcja już w bloku czyli między nawiasami { } wywołuje kolejną funkcję czyli alert("Hi, "+ str+"!");, która dostaje wartości, łańcuch znaków "Hi, " + (zmienną str czyli nasz parametr str odnoszący się do wartości "this.value" przekazanej wcześniej w wywołaniu <getname(this.value)>) + znak "!". Funkcja alert() zwraca wartość połączonych wierszy czyli "Hi, "+str(this.value(jakiś wiersz uprzednio wpisany bądź pobrany))+"!" na przykład "Hi, prościej wytłumaczyć nie potrafię!" :) gdzie "prościej wytłumaczyć nie potrafię" to wartość this.value przekazana do funkcji jako zinterpretowany typ str czyli string.

4 odpowiedzi

odpowiedź 19 lipca 2016 przez itcloud Gaduła (3,380 p.)

odpowiedź 19 lipca 2016 przez CodeExpert Obywatel (1,360 p.)

Przekazywanie parametru do funkcji to dawanie jej dodatkowych informacji do wykonania jakiejs operacji, np. jak chcesz obliczyć pole kwadratu to podajesz jej w parametrze długość boku. Ona wtedy korzysta z tego parametru potrzebnego do obliczenia wyniku. Stosowanie parametrów funkcji znacznie ułatwia prace z kodem dlatego jest dobrą praktyką w programowaniu. Poza tym parametry przydają się również w programowaniu obiektowym. Można w ten sposób łatwo zdefiniować właściwości i metody obiektów tworzonych na podstawie klasy do której przekazaliśmy parametry. Ale jak się uczysz to predzej czy pozniej na to trafisz.

komentarz 19 lipca 2016 przez Madar Obywatel (1,560 p.)

Obiektowość to bardziej zaawansowany dział w programowaniu, najpierw chcę dobrze zrozumieć podstawy, żeby iść dalej. Chyba, że się mylę, to możesz mi doradzić :)

komentarz 19 lipca 2016 przez CodeExpert Obywatel (1,360 p.)

Obiektowość nie jest czym strasznie zaawansowanym. Jeżeli nauczysz się obiektowego podejścia do programowania będziesz miał łatwiej ze zrozumieniem tych bardziej zaawansowanych rzeczy. JavaScript jest ogólnie rzecz biorąc językiem obiektowym i dobrą podstawą do dalszej nauki programowania obiektowego.

odpowiedź 19 lipca 2016 przez ormu16 Gaduła (4,980 p.)

Przekazywanie parametru do funkcji polega na przekazywaniu jej kopi zmiennej. Skoro uczysz się już "jakiś czas" javascriptu to być może zauważyłeś, iż zmienne mają swój zasięg. Widać to na tym przykładzie:

var a = 10;
function funkcja() {
  var b = 5;
}
console.log(b);

Zobacz co się stanie gdy spróbujesz wykonać ten fragment kodu. Zmienna b nie została utworzona, gdyż próbujesz uzyskać do niej dostęp poza funkcja.

Teraz coś bardziej praktycznego. Załóżmy, że chcesz stworzyć funkcję obliczająca wynik mnożenia. Będzie to wyglądać w ten sposób:

function mnozenie(a, b) {
  return a*b;
}
var czynnik1 = 2;
var czynnik2 = 3;
var wynik = ????

I co teraz? W jakiś sposób funkcja musi wiedzieć, które liczby chcesz pomnożyć. Dlatego trzeba przekazać jej w postaci parametrów dwa czynniki:

var wynik = mnozenie(czynnik1, czynnik2);

teraz funkcja mnozenie może uzyskać dostęp do wartości zmiennych czynnik1 i czynnik2 pod postacią a i b. Przez to można używać jej wielokrotnie, bo przyznasz że było by to nie możliwe gdybyśmy zapisali to w ten sposób:

function mnozenie() {
  return czynnik1*czynnik2;
}

Teraz programista musi pamiętać jak nazwać zmienne, aby funkcja zadziała. W dodatku musi je zainicjować w przestrzeni globalnej co nie jest dobrym rozwiązaniem. Mimo, że moje umiejętności dydaktyczne nie są za dobre, to mam nadzieję, że pomogłem. Jeżeli czegoś nie rozumiesz, możesz do mnie napisać.