NA VRH
DOMOV HTML CSS JavaScript jQuery AngularJS PHP MySQL Python C# Sass WordPress
glave/headings

JavaScript JavaScript načini Sintaksa Spremenljivke Števila Objekti Funkcije: - definicija funkcije Pogoji Zanke Nizi Datum in čas DOM Array AJAX Knjižnica

Funkcije

Funkcije v JavaScript so definirane s funkcijsko ključno besedo, ki ji sledita ime in oklepaj (). Imena funkcij lahko vsebujejo črke, številke, podčrtaje in znak $, pravila so enaka kot za spremenljivke. V oklepajih so lahko imena, ki jih moramo ločevati z vejico. Koda, ki se naj bi izvršila kot funkcija, je vpisana zunaj zavitih oklepajev {}.

Funkcije
    function ime(primer1, primer2, primer3) {
        //se vpiše koda
    }
        
  1. parametri funkcije so napisani znotraj oklepajev () v definiciji funkcije
  2. argumenti funkcije so vrednosti funkcije, ko je ta poklicana
  3. znotraj funkcije se parametri obnašajo kot lokalne spremenljivke

Poziv se izvede, ko je funkcija poklicana, to je običajno ko se zgodi nek dogodek. Lahko je to klik na gumb, lahko jo pokliče sama JavaScript, ali pa se zažene samodejno. Izjava return se izvede ko doseže izjavo, če je bila ta poklicana iz kode same. Funkcija običajno sama izračuna vrednost.

    <p id="primer"></p>

    <script>
        var a = mojaFunkcija(77, 13);
        document.getElementById("example").innerHTML = a
        document.getElementById("example").style.padding = '10px'
        document.getElementById("example").style.fontSize = '24px'
        document.getElementById("example").style.backgroundColor = 'yellow'
        document.getElementById("example").style.display = 'block'
        document.getElementById("example").style.borderRadius = '12px'
        document.getElementById("example").style.boxShadow = '0 12px 24px rgba(0, 0, 0, 0.12)'

        function mojaFunkcija(a, b) {
            return a * b;
        }
    </script>
            

Funkcije so uporabne iz razloga, ker lahko kodo uporabimo večkrat. Lahko jo uporabimo z drugimi argumenti, in s tem dobimo drugačne rezultate. Poglejmo si primer, ki fahrenheit spremeni v Celzije.

    <p id="primer"></p>

    <script>
        function mojaFunkcija(f) {
            return (5/9) * (f-32);
        }
        document.getElementById("tmp").innerHTML = mojaFunkcija(77);
        document.getElementById("example").style.padding = '10px'
        document.getElementById("example").style.fontSize = '24px'
        document.getElementById("example").style.backgroundColor = 'orange'
        document.getElementById("example").style.display = 'block'
        document.getElementById("example").style.borderRadius = '12px'
        document.getElementById("example").style.boxShadow = '0 12px 24px rgba(0, 0, 0, 0.12)'
    </script>
            

V primeru smo uporabili 77 fahrenheit, in nam je pretvoril v 25 Celzija, pretvornik je izjava return.

Definicija funkcije ne določa vrste podatkov za parametre, in ne izvaja preverjanja za posredovane argumente, kakor jih tudi ne preverja. Če se funkcija, kateri manjkajo parametri, pokliče, JavaScript nastavi na nedefinirano (undefined) vrednost.

    <p id="primer"></p>

    <script>
        function mojaFunkcija(x, y) {
            if (y === undefined) {
                y = 13;
            }
            return x * y;
        }
        document.getElementById("primer").innerHTML = mojaFunkcija(4); //številka v oklepaju predstavlja x
        document.getElementById("primer").style.display = 'block'
        document.getElementById("primer").style.color = 'yellow'
        document.getElementById("primer").style.backgroundColor = 'blue'
        document.getElementById("primer").style.padding = '14px'
        document.getElementById("primer").style.boxShadow = '0 32px 14px rgba(0, 0, 0, 0.12), 0 32px 14px rgba(0, 0, 0, 0.12)'
        document.getElementById("primer").style.borderBottomLeftRadius = '25%'
        document.getElementById("primer").style.borderTopRightRadius = '25%'
        document.getElementById("primer").style.borderTopLeftRadius = '12px'
    </script>
            

Spremenljivka, ki ponavlja lastnosti parametra se imenuje [var( variable)], objekt ki se bo ponavljal, pa se imenuje objekt. Parameter varname določi ime spremenljivke. Imena spremenljivk lahko vsebujejo črke, številke, podčrtaje in znak $. Imena spremenljivk se morajo začeti s črko, lahko pa tudi z znakom $. Lahko so velike ali male črke, samo to sta dve različni spremenljivki (Avto je ena spremenljivka, avto pa druga). Rezerviranih besed ne moremo uporabljati.

Parameter value določi vrednost spremenljivke. Spremenljivka brez vrednosti, pa bo imela nedefinirano (ang. Undefined) vrednost.

Naslednji primer bo prikazal preprosto vsoto števil a in b. Izračun se bo pojavil ob pritisku na tipko.

    <p id="primer"></p>
    <button onclick="mojaFunkcija()">Pritisni tipko</button>

    <script>
        function mojaFunkcija() {
            var a = 77;
            var b = 13;
            document.getElementById("primer").innerHTML = a + b;
            document.getElementById("primer").style.backgroundColor = "deepskyblue";
            document.getElementById("primer").style.padding = "10px";
            document.getElementById("primer").style.borderRadius = "6px";
        }
    </script>
            

Naslednji primer, ki ga bomo napisali je isti kot zgornji, samo da bomo uporabil niz (string).

    <p id="primer"></p>
    <button onclick="mojaFunkcija()">Pritisni tipko!</button>

    <script>
        function mojaFunkcija() {
            var a = "Dobrodošli v ";
            var b = 100;
            var c = "mojo JavaScript vadnico, ";
            var d = "kjer lahko najdete, več kot ";
            var e = " primerov."
            document.getElementById("primer").innerHTML = a + c + d + b + e;
            document.getElementById("primer").style.backgroundColor = "yellow";
            document.getElementById("primer").style.padding = "10px";
            document.getElementById("primer").style.borderRadius = "6px";
        }
    </script>
            

V naslednjem primeru bomo naredili zanko, in kot je napisano v kodi, bo štela od 0 do 5, torej se bodo izpisale številke od 0 do 4.

    <p id="primer"></p>
    <button onclick="mojaFunkcija()">Pritisni tipko</button>

    <script>
        function mojaFunkcija() {
            var fun = "";
            var a;
            for (a = 0; a < 5; a++) {
                fun += "Število je: " + a + "<br>";
            }
            document.getElementById("primer").innerHTML = fun;
            document.getElementById("primer").style.backgroundColor = "orange";
            document.getElementById("primer").style.padding = "10px";
            document.getElementById("primer").style.borderRadius = "6px";
        }
    </script>
            

Primer nam bo samo izpisal pozdrav, kot je Zdravo svet!

    <p id="primer"></p>

    <script>
        //funkcija brez parametrov, ki izpiše besedilo
        function mojaFunkcija() {
            document.getElementById("primer").innerHTML = "Zdravo svet!";
            document.getElementById("primer").style.backgroundColor = "greenyellow";
            document.getElementById("primer").style.padding = "10px";
            document.getElementById("primer").style.borderRadius = "6px";
        }
        mojaFunkcija()
    </script>
            

V tem primeru bomo dodali gumb, kateri se bo sprožil ob kliku, in nam poslal sporočilo.

    <p id="primer"></p>
    <button onclick="mojaFunkcija()">Pritisni za izpis!</button>

    <script>
        function mojaFunkcija() {
            document.getElementById("primer").innerHTML = "Zdravo svet!";
            document.getElementById("primer").style.backgroundColor = "yellow";
            document.getElementById("primer").style.padding = "10px";
            document.getElementById("primer").style.borderRadius = "6px";
        }
    </script>
            

Funkcija bo izpisala sporočilo, in hkrati določila vhodni parameter.

    <p id="primer"></p>

    <script>
        //parametri se pišejo na enak način, kot se definirajo spremenljivke
        function mojaFunkcija(besedilo, primeri) {
            document.getElementById("primer").innerHTML = "Dobrodošli v mojo <strong>" + besedilo + "</strong>
                vadnico " + "kjer boste našli več kot " + "<strong>" + primeri + "</strong> primerov!"
        }
        mojaFunkcija("JavaScript", 100) /* za izpis imena in starosti, vpišemo lahko v zgornjo vrstico kode pod funkcijo, če pa
            zgoraj pustimo prazno, pa vpišemo v spodnji del */
    </script>
            

Dodali bom parameter stopinje, in določili kdaj naj se ta parameter zažene.

    <p id="primer"></p>

    <script>
        function mojaFunkcija(qw, xy) {
            xy = (xy < 101) ? "veliko" : "ne tako veliko";
            document.getElementById("primer").innerHTML = "Dobrodošli v mojo <strong>" + qw + "</strong> vadnico, " + "kjer boste našli"
                + "<strong>" + xy + "</strong> primerov!"
            document.getElementById("example").style.display = 'block'
            document.getElementById("example").style.padding = '10px'
            document.getElementById("example").style.boxShadow = '0 4px 8px rgba(0, 0, 0, 0.6)'
            document.getElementById("example").style.backgroundColor = 'greenyellow'
        }
        mojaFunkcija("JavaScript", 100) //če bi vpisal številko manjšo od 100, bi dobil izpis "ne tako veliko"
    </script>