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 Pogoji: - condition if() - condition else if() - condition else - continue() - break - return Zanke Nizi Datum in čas DOM Array AJAX Knjižnica

Pogoji

Pogoji so navodila, ki jih izvrši spletni brskalnik. Vsak pogoj brskalniku sporoča, naj znotraj HTML elementa z id, napiše nek string (niz, besedilo). JavaScript pogoji se uporabljajo za izvajanje različnih dejanj, ki temeljijo na različnih pogojih, zato jih tudi imenujemo pogojni stavki. Ko želimo, da se nam določena dejanja izvajajo na različne načine, uporabimo pogoje.

Določi blok kode, ki se izvrši, če je pogoj resničen.

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

    <script>
        if (new Date().getHours() < 18) {
            document.getElementById("primer").innerHTML = "Dober dan";
            document.getElementById("primer").style.backgroundColor = "yellow"
            document.getElementById("primer").style.border = "1px solid yellowgreen"
            document.getElementById("primer").style.borderRadius = "6px"
            document.getElementById("primer").style.padding = "10px"
        }
    </script>

    OPOMBA: Če je ura pred 18:00 bo program prikazal izpis, v nasprotnem primeru ne prikaže ničesar!
            

Določimo kaj naj nov pogoj izvrši, če je prejšnji ali prvi napačen.

    <button onclick="funkcijaIfElse()">Sporočilo!</button>
    <p id="primer"></p>
    <script>
        function funkcijaIfElse() {
            var hour = new Date().getHours();
            var pozdrav;
            if (hour < 18) {
                pozdrav = "Dober dan!";
            }   else {
                pozdrav = "Dober večer!";
            }
            document.getElementById("primer").innerHTML = pozdrav;
            document.getElementById("primer").style.backgroundColor = "#25cff2"
            document.getElementById("primer").style.border = "1px solid deepskyblue"
            document.getElementById("primer").style.borderRadius = "6px"
            document.getElementById("primer").style.padding = "10px"
        }
    </script>
            

Če uporabimo pogoj if() za določitev zanke, kar bi lahko prevedli "če" - je tako, stori to itd. Tudi pogoj if else() lahko uporabimo za neko zanko, in bi bil prevod "če" (if) ni tako "potem" naredi to (if else). To nas pripelje do else kar bi lahko prevedel kot, "če nič od tega ni dobro, potem uporabi tretjo možnost". Ogledali si bomo enostaven in priljubljen prikaz časa, ki se izpiše glede na čas (kot smo že naredili s pogoji if() in if else().

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

    <script>
        var sporocilo;
        var cas = new Date().getHours();
        if (cas < 10) {
            sporocilo = "Dobro jutro";
        }   else if (cas < 18) {
            sporocilo = "Dober dan";
        }   else {
            sporocilo = "Dober večer";
        }
        document.getElementById("primer").innerHTML = sporocilo;
        document.getElementById("primer").style.backgroundColor = "#25cff2"
        document.getElementById("primer").style.border = "1px solid deepskyblue"
        document.getElementById("primer").style.borderRadius = "6px"
        document.getElementById("primer").style.padding = "10px"
    </script>
            

Kot že ime pove samo, je continue() "nadaljuj s kodo" v kateri nekaj manjka, manjkajoči del izpusti, ter nadaljuje s kodo naprej ko lahko. Napisali bomo tri primere, od čisto navadnega, do uporabe if in for zanke.

    <p id="primer"></p>
    <button onclick="funkcijaCon()">Prvič</button>

    <script>
        function funkcijaCon() {
            var doc = "";
            var a = 0;
            while (a < 5) {
                a++;
                if (a === 3) { /* pomeni naj šteje do 3, izpusti 3, in nadaljuje s kodo */
                    continue;
                }
                doc += "Število je: " + a + "<br>";
            }
            document.getElementById("primer").innerHTML = doc;
            document.getElementById("primer").style.border = "1px solid deepskyblue"
            document.getElementById("primer").style.borderRadius = "6px"
            document.getElementById("primer").style.backgroundColor = "lightblue"
            document.getElementById("primer").style.padding = "10px"
        }
    </script>
            

V drugem primeru bo program začel šteti od številke 1 naprej, številke 3, 6, 8, 10, 13, 15, 18 in 19 bodo izpuščene. V kodi je napisano, da ko pride program do številke 3 prekine program, in gre naprej z naslednjo številko ki je vpisana, v našem primeru je to številka 4, in tako naprej z ostalimi številkami.

    <p id="primer"></p>
    <button onclick="funkcijaCon()">Drugič</button>

    <script>
        function funkcijaCon() {
            var dan = "";
            var a = 0;
            for (a = 1; a < 20; a++) {
                if (a === 3 || a === 6 || a === 8 || a === 10 || a === 13 || a === 15 || a === 18 || a === 19) continue;
                document.getElementById("primer").innerHTML += a + " ";
                document.getElementById("primer").style.border = "1px solid deepskyblue"
                document.getElementById("primer").style.borderRadius = "6px"
                document.getElementById("primer").style.backgroundColor = "lightblue"
                document.getElementById("primer").style.padding = "10px"
            }
        }
    </script>
            

Pogoj break() prekine zanko. Če break() uporabimo v zanki, se bo zanka prekinila, če pa break() uporabimo v switch metodi, bo izjava break kompletno ustavilo proces. Kar bo v bistvu ustavilo tudi druge funkcije, in metode v kodi sami. Pogoj break() se lahko uporabi samo v zanki ali switch metodi.

    <p id="primer"></p>
    <button onclick="funkcijaBreak()">GUMB</button>

    <script>
        function funkcijaBreak() {
            var doc = "";
            var a = 0;
            while (a < 10) {
                doc += "Številka je: " + a + "<br>";
                a++;
                if (a === 6) {
                    break;
                }
            }
            document.getElementById("primer").innerHTML = doc;
            document.getElementById("primer").style.border = "1px solid green"
            document.getElementById("primer").style.borderRadius = "6px"
            document.getElementById("primer").style.backgroundColor = "greenyellow"
            document.getElementById("primer").style.padding = "10px"
        }
    </script>
            

Izjava return ustavi izvajanje funkcije, in vrne vrednost. V prvem primeru bo izjava return vrnila naključno število. Kadarkoli osvežimo spletno stran se bo izpisala nova naključna številka. Če bi dali namesto random atributa Pi bi nam izpisal število Pi. V drugem primeru, pa bomo uporabili kar string.

    <p id="primer1"></p>

    <script>
        function Vrni() {
            return Math.random()
        }

        document.getElementById("primer1").innerHTML = Vrni()
        document.getElementById("primer1").style.display = 'block'
        document.getElementById("primer1").style.backgroundColor = 'red'
        document.getElementById("primer1").style.color = 'blue'
        document.getElementById("primer1").style.boxShadow = '0 4px 8px rgba(0, 0, 0, 0.4)'
        document.getElementById("primer1").style.borderRadius = '8px'
        document.getElementById("primer1").style.padding = '14px'
    </script>

    <p id="primer2"></p>

    <script>
        function Niz(ime) {
            return "Dobrodošli " + ime + " ";
        }
        document.getElementById("primer2").innerHTML = Niz("v JavaScript vadnici.");
        document.getElementById("primer2").style.display = 'block'
        document.getElementById("primer2").style.backgroundColor = 'blue'
        document.getElementById("primer2").style.color = 'yellow'
        document.getElementById("primer2").style.boxShadow = '0 4px 8px rgba(0, 0, 0, 0.4)'
        document.getElementById("primer2").style.borderRadius = '8px'
        document.getElementById("primer2").style.padding = '14px'
    </script>