Web3-24: 04.11. JavaScript funkcije

1. Šta su JavaScript funkcije?

Funkcije su blokovi koda koji izvršavaju određeni zadatak. Korisne su za zadatke koje treba često ponavljati, jer se ista funkcija može pozvati više puta.

Napomena: Funkcija se ne izvršava pri učitavanju stranice, već samo kada se pozove (mada može da se pozove i pre nego što se deklariše - hoisting)

Postoje dve vrste funkcija: one koje su već ugrađene u JS (primitivne) funkcije i korisničke funkcije (one koje sami definišemo).

U nastavku je primer jedne korisničke funkcije koja ne radi ništa:

  function funkcija(){
     document.write("Ova funkcija ne radi ništa");
  }
// napomena: funkcija write će pregaziti sve što ste imali i napisati na stranicu to što je u zagradama - proverite u Inspect-u

Zadatak 1: Kreirati web stranicu sa skriptom u kojoj se nalazi ova funkcija. Na stranicu postaviti dugme i na klik dugmeta treba da se pozove ova funkcija.

rešenje sa časa

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button onclick="neRadiNista()">Ne radi ništa</button>

    <script>
        function neRadiNista() {
            document.write('Ova <br>funkcija <br> ne radi ništa<br> <a href="index.html">povratak na početnu</a>')
        }
    </script>
</body>
</html>

2. Ugrađene funkcije - one koje već postoje

To su one funkcije koje već postoje u JS - ne moramo ih definisati već ih samo pozovemo kada nam zatrebaju.

Već smo pominjali tri takve funkcije u lekciji: Iskačući (popup) prozori

U nastavku su primeri (iza dugmića) za funkcije alert, confirm i prompt

funkcija alert, ... funkcija confirm, ... i ... funkcija prompt ..

Primer koji sadrži funkciju alert:

<html>
  <head>
    <title>Funkcija alert</title>
  </head>
  <body>
    <script>
    alert("Ovo je JavaScript");
    </script>
  </body>
</html>

Pokretanjem ovog dokumenta aktiviraće se iskačući prozor sa porukom JavaScript.

Primer koji sadrži funkciju confirm:

<html>
  <head>
    <title>Funkcija confirm</title>
  </head>
  <body>
    <script>
      var izaberi=confirm("Prihvatate li da nastavite dalji rad?");
    </script>
  </body>
</html>

Pozivanjem ovog dokumenta aktiviraće se iskačući prozor sa porukom Prihvatate li uslove privatnosti?.

Primer koji sadrži funkciju prompt:

<html>
  <head>
    <title>Funkcija prompt</title>
  </head>
  <body>
    <script>
      var ime=prompt("Unesite svoje ime:");
    </script>
  </body>
</html>

Pokretanjem ovog dokumenta aktiviraće se iskačući prozor sa porukom Unesite svoje ime:. Iskačući prozor sadrži tekstualno polje u koje je omogućen unos podataka. Ukoliko korisnik odabere dugme "OK" funkcija prosleđuje vrednost koja je uneta u tekstualno polje, a ako je odabrano dugme "Cancel" povratna vrednost će biti "null". Konkretno, u navedenom primeru, povratna vrednost funkcije se upisuje u promenljivu ime.

..a ono što je malčice novo je funkcija write ...

Primer koji sadrži funkciju write:

<html>
  <head>
    <title>Funkcija write</title>
  </head>
  <body>
    <script>
      document.write("Dobar dan!");
    </script>
  </body>
</html>

Pokretanjem ovog dokumenta u internet pretraživač će da se upiše tekst Dobar dan!.

Sem ovih, ima još dosta ugrađenih funkcija, .... , a neke od njih ćemo vežbati u daljem radu, ....(link ka spisku ugrađenih funkcija je postavljen na dnu strane)

Zadatak 2: Kreirati dodatne web stranice, u kojima će se koristiti ove funkcije (kao u primerima)...

pogledajte deo zadatka sa časa

<script>
        let poruka = "stranica je učitana";

        function paranBroj(broj) {
            if (broj % 2 == 0) {
                return "PARAN";
            } else {
                return "NEPARAN";
            }
        }

        function proveraParnosti() {
            let x = prompt("Unesite jedan broj:");
            alert("Uneseni broj je ... " + paranBroj(x));
        }
    </script>

    <hr>
    <button onclick="alert(poruka)">Prikaži poruku</button>
    <button onclick="proveraParnosti()">Unesi neki broj i proveri je li paran ili ne</button>

Ako se malo bolje zagledate u programski kod primetićete da ne radi baš najbolje: prilikom učitavanja celog broja sve radi kako treba, ali ako se učita bilo šta drugo, kao odgovor se dobije da je "neparan"?! Pogledajte if : ako je broj paran na izlaz šalje string: "PARAN", a za bilo šta drugo na izlaz šalje "NEPARAN". Čak i ako korisnik odluči da ne unese broj već slovo ili celu rečenicu, izlaz će biti "NEPARAN" .... A ako se traži rešenje u JavaScriptu - to je NaN (Not-a-Number) ....

JavaScript će pokušati da konvertuje to što ste dobili u broj, a ako ne uspe, daje mu vrednost NaN. Operacija % sa NaN je uvek NaN !

Zbog toga bi u ovom zadatku trebalo prvo proveriti je li paran, pa je li neparan, a za sve ostalo postaviti neku drugu poruku .....

3. Korisničke funkcije - one koje sami definišemo:

Kako se funkcije definišu?

Kada želimo da definišemo neku novu funkciju, prvo se navodi ključna reč function pa se posle razmaka postavlja ime nove funkcije sa običnim zagradama i na kraju idu vitičaste zagrade

U okviru običnih zagrada mogu, ali i ne moraju, da stoje parametri (dodatne informacije koje koristi funkcija).
U okviru vitičastih zagrada se nalazi telo funkcije, odnosno, sve one naredbe koje funkcija treba da izvrši
return naredba je opciona - dodaje se samo kada želimo da se pozivom funkcije vrati neka vrednost

function imeFunkcije(parametri) {
  // Blok koda koji se izvršava kada se funkcija pozove
}

imeFunkcije: Naziv funkcije koji se koristi za pozivanje funkcije.
parametri: Opcioni ulazni podaci koje funkcija koristi.
Blok koda: Izvršni deo funkcije koji obavlja određeni zadatak - izvršava se kad god se funkcija pozove.
- ( malo detaljnije o ovome možete pogledati iza ovog dugmeta )

Ključna reč function obavezna !

Naziv funkcije je takođe obavezan deo funkcije, kako bismo kasnije mogli da je pozivamo. Naziv je često kratak opis onoga što funkcija izvršava. Na primer, funkcija koja računa kvadratni koren nekog broja imaće npr naziv "kvadratniKoren".

U okviru običnih zagrada mogu, ali i ne moraju, da stoje ulazni parametri (nisu obavezni). Kada se funkcija pozove, tada se unutar malih zagrada navode parametri koji se prosleđuju. Te parametre funkcija nakon toga koristi kao lokalne promenljive. Ako se funkciji prilikom poziva ne proslede svi ulazni parametri, oni koji nisu prosleđeni imaće vrednost undefined.
Interesantno je i to da je u o ovom jeziku moguće i da prilikom definisanja funkcije ne navedemo argumente, a da ih prilikom poziva funkcije unesemo.

U okviru vitičastih zagrada se nalazi telo funkcije - naredbe koje funkcija izvršava. (I telo bi moglo da bude izostavljeno, ali tada funkcija ne bi imala smisla.)
U telu funkcije mogu se definisati nove promenljive i pozivati postojeće funkcije. Promenljive koje se definišu u telu funkcije su lokalne ( "žive" samo u toku rada funkcije i ne vide se van nje)

Funkcija se poziva navođenjem njenog imena i prosleđivanjem neophodnih parametara.

Da bi se funkcija izvršila, treba da se POZOVE (može se pozvati neograničen broj puta, a ponekad čak i pre nego što je definisana)

Primeri funkcija koje ne vraćaju nikakvu vrednost:

(bez parametara) (sa parametrima)

1.1 Primer funkcije bez parametara:

function pozdrav() {
    console.log("Pozdrav svima !");
}

pozdrav(); // Poziva funkciju u ispisuje "Pozdrav svima !" u konzoli

1.2 Primer funkcije sa jednim parametrom (i bez povratne vrednosti):

 function pozdrav(ime) {
  console.log("Zdravo, " + ime + "!");
 }

pozdrav("Marko");

U ovom primeru funkcija pozdrav prima jedan parametar (ime) i koristi ga da ispiše poruku dobrodošlice.

Izlaz:

Zdravo, Marko!

Zadatak 3: Na početnoj stranici (iz zadatka 1) postaviti još jedno dugme. Klikom na dugme treba da se od korisnika traži da unese ime (prompt), a onda treba da se ispiše poruka u kojoj se sem pozdravnog teksta nalazi i uneseno ime - u iskačući prozor ili u liniju ispod dugmeta na istoj stranici.

4. Povratna vrednost funkcije

Funkcija može vratiti vrednost - ako se koristi ključna reč return. Ova vrednost se koristi kada funkciju želite da pozovete i dobijete rezultat iz nje.

Primeri funkcija sa povratnom vrednošću i ...

bez parametara .... ili ..... sa parametrima .... ili ..... sa parametrima koji imaju podrazumevane vrednosti

Primeri funkcije koja ima povratnu vrednost a nema ulazne parametre:

function petica(){
    return 5;
}

Funkcija petica() nema ulaznih parametara, ali ima povratnu vrednost. Svaki put kada se pozove ova funkcija, ona će vratiti broj 5.

Primer funkcije sa povratnom vrednošću i jednim parametrom:

  function trostrukiBroj(x){
      return 3*x;
  }

Funkcija trostrukiBroj(x) očekuje da joj se prilikom poziva obezbedi jedan ulazni parametar (broj x), a potom ona treba da vrati trostruku vrednost tog broja. Ukoliko se ne prosledi ulazni argument, ova funkcija će da vrati vrednost "NaN"(not a number - nije unet broj).

Primer funkcije sa povratnom vrednošću i dva parametra:

  function saberi(a, b) {
    return a + b;
  } 

  let rezultat = saberi(5, 10);
  console.log(rezultat); // ispisuje 15

Izlaz:

Primer funkcije sa povratnom vrednošću i tri parametra: Funkcija zbir3(a,b,c) ima tri ulazna parametra, a potom računa zbir unetih brojeva.

   function zbir3(a,b,c){
       return a+b+c;
   }

Ukoliko neki od parametara pri pozivu funkcije zbir3(a,b,c) ne bude unet, povratna vrednost funkcije će biti "NaN".

Funkcija sa podrazumevanim vrednostima parametara

U JavaScript-u, moguće je zadati podrazumevane vrednosti za parametre koji nisu prosleđeni funkciji.

function pozdravSaImenom(ime = "gost") {
    // ... ovde radite vašu verziju pozdrava ili npr
    console.log(`Zdravo, ${ime}!`);
}

pozdravSaImenom("Ana"); // Ispisuje "Zdravo, Ana!"
pozdravSaImenom();       // Ispisuje "Zdravo, gost!"

U ovom primeru, ako se funkciji pozdravSaImenom ne prosledi ime, koristiće se podrazumevana vrednost "gost".

U okviru funkcije možemo i definisati nove promenljive, ako i kada nam zatrebaju. Ukoliko promenljive definišemo sa ključnom reči var, one će biti vidljive samo u okviru funkcije, a ukoliko ih definišemo bez ključne reči, moći ćemo da ih koristimo i nakon završetka rada funkcije. (Ovo se ne preporučuje! Podsetimo se od ranije: ako ne navedete ni var ni let prilikom pominjanja neke promenljive, ta promenljiva će biti globalna!)

   function zbir2(a,b){ 
     var zbir=a+b;
     return zbir;
   }

Funkcija zbir2(a,b) ima dva ulazna parametra, a u telu funkcije je definisana nova promenljiva "zbir", koja računa zbir ulaznih parametara. Nakon toga, funkcija vraća vrednost koja je sačuvana u promenljivoj zbir.

Program kada naiđe na naredbu return odmah izlazi iz funkcije, tj. ukoliko u funkciji stoji neka naredba nakon naredbe return, onda ta naredba nikada neće biti izvršena.

Primer gde se to može lepo videti:

   function zbir2a(a,b){
      var zbir=a+b;
      return zbir;
      alert("Ovo se nikada nece izvršiti");
   }

Zadatak 4: Na dosadašnju stranicu dodati red dugmića različitih boja - za svaki od primera u ovom delu. Na klik dugmeta od korisnika treba tražiti da unese ulazne parametre (prompt - ako treba), a onda treba da se u iskačućem prozoru (alert) ispiše poruka sa rezultatom.

pogledajte deo zadatka sa časa

    <script>
        function petica() {
            return 5;
            alert("ova poruka se nikada neće prikazati");
        }

        function trostrukiBroj(x) {
            return 3 * x;
        }

        function saberi(a, b) {
            return a + b;
        }

        function zbir3(a, b, c) {
            return a + b + c;
        }
    </script>
    <hr>
    <button onclick="alert(petica())">Prikaži rezultat poziva funkcije "petica()"</button>
  
    <button onclick="alert(trostrukiBroj(5))">trostruka petica</button>
    <button onclick="alert(saberi(5,15))">saberi(5 + 15)</button>

    <button onclick="alert(zbir3(5,15,55))">Zbir3(5 + 15 + 55)</button>

    <button onclick="alert(saberi(5,15,55))">saberi(5 + 15 + 55)</button>

    <button onclick="alert(zbir3(5,15))">Zbir3(5 + 15 )</button>

Ako se malo bolje zagledate u programski kod primetićete da ne radi baš najbolje: prva 4 dugmeta rade sve kako treba, ali za poslednja dva rezultati nisu na prvi pogled jasni.

Ako funkcija treba da primi dva parametra, a prosledi joj se veći broj parametara - jednostavno neće uzeti u razmatranje višak. Zbog toga je rezultat saberi(5,15,55) na kraju 20 - uzima u razmatranje samo prva dva parametra.

Ako funkciji ne pošaljete dovoljan broj parametara, one koje niste poslali računa kao undefined. Pozivom funkcije Zbir(5,15) poslata su dva parametra, ali ne i treći ! - i zbog toga se kao rezultat aritmetičke operacije brojeva sa nečim što nije definisano na kraju dobije NaN !

Sem funkcija koje se definišu korišćenjem ključne reči function, postoje:

anonimne funkcije (bez imena)
streličaste (arrow) funkcije
rekurzivne funkcije ...... (ovo je rađeno iz predmeta Programiranje - princip je isti)
konstruktor funkcije ..... (ovo zasad nećemo raditi)
funkcije kao metode objekata (koristićemo ih kada budemo radili sa objektima)
samopozivajuće funkcije .......(ovo zasad nećemo raditi - možda kasnije ako učenici izraze želju)
callback funkcije ....... (Funkcije koje se prosleđuju kao argumenti drugim funkcijama i izvršavaju se unutar tih funkcija, obično nakon što se određena radnja završi. Biće rađeno u kasnijim lekcijama.)

Za sledeći čas je predviđeno upoznavanje sa događajima. Zbog toga je u nastavku postavljeno da se učenici samo informativno upoznaju sa anonimnim funkcijama i sa funkcijama strelicama - biće nam potrebno u daljem radu.

Pročitati kod kuće:

5. Anonimne funkcije (funkcije koje nemaju ime - koriste se kao izraz)

Anonimne funkcije u JavaScript-u su funkcije koje nemaju svoje ime. Obično se koriste kada vam funkcija treba samo jednom, ili kada želite da funkciju prosledite kao argument, bez potrebe da je definišete posebno.

Anonimna funkcija se može dodeliti nekoj promenljivoj, koja se nakon toga koristi kao funkcija.

Primer 1:

const mnozi = function (a, b) {
  return a * b;
};

console.log(mnozi(4, 5)); // Ispisuje 20

Ovo je funkcija koja se dodeljuje promenljivoj mnozi i može se pozvati kao bilo koja druga funkcija.

Primer 2:

let pozdrav = function(ime) {
   console.log("Zdravo, " + ime + "!");
};

pozdrav("Ana");

6. Arrow funkcije (ovo je novo - za ES6)

Arrow funkcije su kraći način pisanja anonimnih funkcija. Koriste sintaksu =>. Naići ćete i na prevod: funkcije strelice ili streličaste funkcije ?!

Primer:

let saberi = (a, b) => a + b;

console.log(saberi(5, 3));  // ispisuje 8

Funkcije strelice su kraći način za definisanje funkcija i često se koriste u modernom JavaScript-u.

7. Zadaci za vežbu: Napisati funkciju ...

zbirKvadrata(a, b) koja prima dva broja a i b i vraća zbir njihovih kvadrata.
najveciBroj(a, b, c) koja prima tri broja i vraća najveći od njih.
jeParan(broj) koja prima jedan broj i vraća true ako je broj paran, a false ako je neparan.

8. LINKOVI za dodatni rad kod kuće

Proučiti kod kuće (poželjno za sve učenike) Škola koda | Funkcije u JavaScriptu (obavezno pogledati i video)
Link ka listi svih ugrađenih funkcija (sa primerima): https://www.w3schools.com/jsref/
...

Povratak na vrh strane

Last modified: Monday, 4 November 2024, 6:18 PM