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 Zanke Nizi Datum in čas DOM Array AJAX Knjižnica: - addEventListener() - boolean - NaN - let - innerHTML - const() - disable button - return - this - value() - indexOf() - replace() - details - toString() - upperCase / lowerCase - isArray() - join() - pop() - shift() - push() - splice() - focus() - parseInt() - parseFloat() - toFixed() - isSafeInteger() - sup() - concat() - switch() - abs() - onclick() - ceil() - floor() - min() - max() - random() - getDay() - getMonth() - getFullYear() - getHours() - objekt argumentov - nth-child() - removeChild() - appendChild() - createElement() - window.alert - programski vmesnik - dokument objekta - getElementById() - getElementsByTag() - getElementsByClass() - iskanje s pomočjo css-a - length - isFinite() - isInteger() - isNaN() - toExponential() - toLocaleString() - toPrecision() - valueOf() - min-value() - max-value() - negative_infinity - positive_infinity - prototype - constructor - console.dir - onfocus() - querySelector() - querySelectorAll()

JavaScript knjižnica

Dobrodošli v JavaScript knjižnico, kamor dodajam vse JS sklice. Napreduje počasi, ker dodam (vsaj zaenkrat) samo stvari, ki jih uporabim oziroma se jih naučim. Za laika kot sem sam, je to čisto dovolj, čeprav hočem poznati vse, zato jih bom po vsej verjetnosti tudi dodal. Za vsako metodo posebej, sem dodal opis in primer.

JavaScript Knjižnica

Spletne strani niso edino mesto, kjer lahko uporabljamo JavaScript. Tudi veliko namiznih in strežniških programov uporablja ta programski jezik. Najbolj znan med temi jeziki je, node.js. Najbolj uporabna metoda v JavaScript, je verjetno getElementById(). Uporablja pa se za spremembo elementa oziroma mogoče celo "iskanje" elementa.

Metoda addEventListener() doda oziroma pritrdi dogodek na določen element.

    <button id="btn">addEventListener</button>
    <p id="example"></p>

    <script>
        document.getElementById("btn").addEventListener("click", function ()
        {
            document.getElementById("example").innerHTML = "Hello World!";
            document.getElementById("example").style.backgroundColor = "deepskyblue"
            document.getElementById("example").style.border = "1px solid blue"
            document.getElementById("example").style.borderRadius = "6px"
            document.getElementById("example").style.padding = "10px";
        });
    </script>
            

Za drugi primer sem izbral skupaj z metodama querySelector() in querySelectorAll(), in dodal še eventListener, pa si poglejmo. Primer se seveda nahaja na Trinket, tako da lahko primer spreminjate. Ko kliknemo na element, sprožimo dogodek eventListener, ki nam v bistvu šteje naše klike, ali spremeni barvo itn. Poglejmo si najprej primer v konzoli.

addEventListener
    <!DOCTYPE html>
    <html lang="si">
    <head>
        <meta charset="UTF-8">
        <title>eventListener console</title>
    </head>
    <body>
    <div class="class">Prvi</div>
    <div id="one">Drugi</div>
    <div class="class">Tretji</div>
    <div id="two">Četrti</div>
    <div class="class">Peti</div>
    <script src="el-console.js"></script>
    </body>
    </html>
            
    <!DOCTYPE html>
    <html lang="si">
    <head>
        <meta charset="UTF-8">
        <title>eventListener</title>
    </head>
    <body>
    <div class="class">Prvi</div>
    <div id="one">Drugi</div>
    <div class="class">Tretji</div>
    <div id="two">Četrti</div>
    <div class="class">Peti</div>

    <button onclick="button()">Pritisni</button>
    <script src="event.js"></script>
    </body>
    </html>
            

V programiranju imamo dostikrat potrebo po vrsti podatkov, ki ima lahko samo dve vrednosti, to sta true ali false. Funkcijo Boolean se uporablja ravno za takšne stvari. S funkcijo Boolean lahko ugotovimo, ali je spremenljivka resnična, ali ne.

    <button onclick="boo()">Metoda boolean</button>

    <p id="vecji"></p>
    <p id="enak"></p>
    <p id="ni"></p>
    <p id="manj"></p>

    <script>
        function boo() {
            document.getElementById("vecji").innerHTML = "VEČJI: " + Boolean (10 > 5)
            document.getElementById("vecji").style.padding = "10px"
            document.getElementById("vecji").style.backgroundColor = "yellow"
            document.getElementById("vecji").style.marginTop = "20px"
            document.getElementById("vecji").style.borderRadius = "6px"
            document.getElementById("vecji").style.width = "200px"
            document.getElementById("vecji").style.textAlign = "center"
            document.getElementById("enak").innerHTML = "ENAK " + Boolean (10 === 5)
            document.getElementById("enak").style.padding = "10px"
            document.getElementById("enak").style.backgroundColor = "orange"
            document.getElementById("enak").style.borderRadius = "6px"
            document.getElementById("enak").style.width = "200px"
            document.getElementById("enak").style.textAlign = "center"
            document.getElementById("ni").innerHTML = "NI ENAK " + Boolean (10 !== 5)
            document.getElementById("ni").style.padding = "10px"
            document.getElementById("ni").style.backgroundColor = "greenyellow"
            document.getElementById("ni").style.borderRadius = "6px"
            document.getElementById("ni").style.width = "200px"
            document.getElementById("ni").style.textAlign = "center"
            document.getElementById("manj").innerHTML = "MANJŠI " + Boolean (10 < 5)
            document.getElementById("manj").style.padding = "10px"
            document.getElementById("manj").style.backgroundColor = "skyblue"
            document.getElementById("manj").style.borderRadius = "6px"
            document.getElementById("manj").style.width = "200px"
            document.getElementById("manj").style.textAlign = "center"
        }
    </script>
            
    <p>Rezultate si ogledamo v konzoli brskalnika (<b>F12</b>).</p>

    <script>
        var a = 10;
        var b = 5;
        var c = (a > b); //a večja od b
        var d = (a === b); //a je enako b
        var e = (a !== b); //a ni enako b
        var f = (a < b); //a je manjša od b
        console.log(c);
        console.log(d);
        console.log(e);
        console.log(f);
    </script>
            

Število, ki je deljivo z besedo, je NaN -> Not a Number.

    <p id="Nan"></p>

    <script>
        document.getElementById("Nan").innerHTML = 123 / "beseda";
        document.getElementById("Nan").style.border = "1px solid orangered"
        document.getElementById("Nan").style.borderRadius = "6px"
        document.getElementById("Nan").style.backgroundColor = "orange"
        document.getElementById("Nan").style.padding = "10px"
    </script>
            

Spremenljivka let nam omogoča, da spremenljivke razglasimo, tiste, ki so omejene na obseg stavka ali izraza na katerem se uporablja. Za razliko od spremenljivke var, ki spremenljivko definira globalno ali lokalno, ne glede na obseg bloka čez celotno funkcijo. Tako kot const tudi let ne ustvari lastnosti predmeta, ko je ta razglašen globalno. Za prvi primer bomo uporabili metodo var, kjer spremenljivka znotraj zanke ponovno razglasi spremenljivko zunaj zanke.

V drugem primeru bomo uporabili metodo let, ki pa ne spreminja spremenljivke zunaj zanke. Če se metoda let uporabi za razglasitev spremenljivke v a zanki, bo ta spremenljivka vidna le znotraj zanke.

    <h5>Prvi primer:</h5>
    <p id="let1"></p>

    <script>
        var a = 5;
        for (var a = 0; a < 10; a++) {}
        document.getElementById("let1").innerHTML = a;
        document.getElementById("let1").style.backgroundColor = "yellow"
        document.getElementById("let1").style.border = "1px solid greenyellow"
        document.getElementById("let1").style.borderRadius = "6px"
        document.getElementById("let").style.padding = "10px";
    </script>
            
    <h5>Drugi primer:</h5>
    <p id="let2"></p>

    <script>
        let b = 5;
        for (let b = 0; b < 10; b++) {}
        document.getElementById("let2").innerHTML = b;
        document.getElementById("let2").style.backgroundColor = "orange"
        document.getElementById("let2").style.border = "1px solid orangered"
        document.getElementById("let2").style.borderRadius = "6px"
        document.getElementById("let2").style.padding = "10px";
    </script>
            

Je lastnost za pridobivanje vsebine elementa, in je tudi najlažji način. Uporablja pa se tudi za pridobivanje ali zamenjavo vsebine HTML elementa. Lastnost innerHTML lahko uporabimo za pridobitev ali spremembo kateregakoli HTML elementa, vključno z html in body.

    <h1 id="head">sem GLAVA</h1>
    <p id="paragraph">sem ODSTAVEK</p>

    <button onclick="fun()">Preizkus</button>

    <script>
        function fun() {
            var a = document.getElementById("head").innerHTML
            var b = document.getElementById("paragraph").innerHTML
            document.getElementById("head").innerHTML = a
            document.getElementById("head").style.backgroundColor = "red"
            document.getElementById("head").style.color = "yellow"
            document.getElementById("head").style.border = "1px solid orangered"
            document.getElementById("head").style.borderRadius = "6px"
            document.getElementById("head").style.padding = "10px"
            document.getElementById("head").style.boxShadow = "1px 1px 8px black"
            document.getElementById("paragraph").innerHTML = b
            document.getElementById("paragraph").style.backgroundColor = "#9ffff9"
            document.getElementById("paragraph").style.border = "1px solid blue"
            document.getElementById("paragraph").style.borderRadius = "20%"
            document.getElementById("paragraph").style.padding = "10px"
        }
    </script>
            

Spremenljivke definirane z const() se obnašajo kot let spremenljivke, ki jih ni mogoče porazdeliti. Spremenljivke const() so najbolj uporabne, kadar želimo definirati vrednosti, ki jih ne bomo spreminjali.

    <h5>Prvi primer:</h5>
    <p id="const1"></p>

    <script>
        try {
            const pi = 3.141592653589793;
            pi = 3.14;
        }
        catch (err) {
            document.getElementById("const1").innerHTML = err;
        }
    </script>
            
    <h5>Drugi primer:</h5>
    <p id="const2"></p>

    <script>
        const avto = {type:"Renault", model:"Campus", color:"bele"};
        avto.color = "rdeči";
        avto.lastnik = "Borut";
        document.getElementById("const2").innerHTML =
            "Lastnik avtomobila " + avto.type + " " + avto.model + " v " + avto.color + " barvi " + " je " + avto.lastnik;
    </script>
            

Če v JavaScript želimo onemogočiti gumb, uporabimo funkcijo disable. V prvem primeru si bomo prvi gumb onemogočili z drugim. V drugem primeru bomo onemogočili gumb po prvem kliku.

    <button onclick="disable()">Onemogoči gumb</button>

    <form>
        <input type="button" id="btn1" value="gumb">
    </form><br>

    <script>
        function disable() {
            document.getElementById('btn1').disabled = true;
        }
    </script>
            
    <div id="div">Dobrodošli!</div>
    <button onclick="disable1()" id="btn2">Onemogoči</button>

    <script>
        function disable1() {
            var paragraph = document.createElement("p");
            paragraph.innerHTML = "<br>" + "Dobrodošli v JavaScript programiranju!";
            document.getElementById("div").appendChild(paragraph);
        }

        document.getElementById('btn2').onclick = function () {
            this.disabled = setTimeout(disable1, 1)
        }
    </script>
            

Izjava return ustavi izvajanje funkcije, in vrne vrednost. V prvem primeru bo izjava return v tem primeru 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.

    <h5>Prvi primer:</h5>
    <p id="return1"></p>

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

        document.getElementById("return1").innerHTML = functionReturn1()
    </script>
            
    <h5>Drugi primer:</h5>
    <p id="return2"></p>

    <script>
        function functionReturn2(ime) {
            return "Dobrodošli " + ime;
        }
        document.getElementById("return2").innerHTML = functionReturn2("v JavaScript vadnici.");
    </script>
            

Ključna beseda this se v JavaScript nanaša na predmet, ki mu pripada. Ima različne vrednosti, glede na to, kje se ga uporablja. V tem primeru, bo metoda this predstavljala besedo kot objekt, objekt si lastijo metode. Ker je primer napisan v angleščini, sem moral dodati še eno spremenljivko, da sem sestavil stavek.

    <p id="pr8"></p>

    <script>
        var vreme = {
            beseda1: "Zunaj je ",
            beseda2: " stopinj in dežuje.",
            stevilo: 8,
            stavek : function () {
                return this.beseda1 + this.stevilo + this.beseda2;
            }
        };

        document.getElementById("pr8").innerHTML = vreme.stavek();
    </script>
            
  1. metoda se nanaša na objekt lastnika
  2. sama beseda this se nanaša na globalni objekt
  3. v funkciji se beseda this nanaša na globalni objekt
  4. v funkciji, v strogem načinu je nedefinirano (ang. Undefined)
  5. v dogodku se beseda this, nanaša na element, ki ga je ta dogodek prejel
  6. metodi, kot sta call() in apply() lahko this napotita na katerikoli objekt
  1. pri metodah objektov, se nanaša na lastnika (lastnik je spremenljivka, v našem primeru bo to oseba) te metode
  2. v primeru zgoraj, se nanaša na priimek metode
  3. objekt oseba je lastnik metode priimek

Value (slo. Vrednost), vrne vrednost atributa vrednosti niza (ang. String). Value vsebuje vrednost, ki jo vpišemo v oklepaje (). Ob pritisku na tipko, se bo spremenilo ime v vnosnem polju.

    <input type="text" id="pr9" value="Sončen dan">
    <button onclick="fun3()">Pritisni na gumb</button>

    <script>
        function btn() {
            document.getElementById("example").value = "Deževen dan";
            }
            // sets the default value
            var reset = document.querySelectorAll("input");
            for (var i = 0; i < reset.length; i++) {
                reset[i].value = "Sončen dan";
            }
    </script>
            

Metoda vrne položaj prvega pojava določene vrednosti v nizu. Ta metoda je -1, če niz ne obstaja. Metoda indexOf() temelji na velikih in malih črkah.

Iz stavka, ali besede, ki jo napišemo pod var niz, vpišemo v indexOf() oklepaje, in ob pritisku na gumb, se nam bo izpisalo, na katerem mestu se ta črka nahaja. V primeru, da črka ne obstaja, se nam izpiše -1.

    <p id="indexOf"></p>
    <button onclick="indexOf()" id="btn">Poiščimo črko</button>

    <script>
        function indexOf() {
            var niz = "Pozdravljeni svet, učim se JavaScript in kot začetniku mi gre zelo dobro.";
            var n = niz.indexOf("J"); // enter the letter inside the brackets, that we want to be found
            document.getElementById("indexOf").innerHTML = "Črka, ki jo iščemo je na " + n + " mestu.";
            document.getElementById("indexOf").style.backgroundColor = "deepskyblue"
            document.getElementById("indexOf").style.border = "1px solid blue"
            document.getElementById("indexOf").style.borderRadius = "6px"
            document.getElementById("indexOf").style.padding = "20px"
        }
    </script>
            
1 2 3 4 5 6 7