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: - array metoda - večdimenzionalni array - izpis vseh array-ev - iskalnik v seznamu vrednosti AJAX Knjižnica

Array

Array (seznam/matrika) so posebna spremenljivka, ki lahko vsebuje več vrednosti naenkrat, in ima lastnosti seznama. Če imamo na voljo seznam elementov, bi lahko rekli temu, da imamo seznam imen. String se uporablja za shranjevanje in manipuliranje besedila. V nizu je več znakov, zapisanih znotraj narekovajev.

Array (slo. seznam/matrika)

Če napišemo seznam imen:

    var fruit1 = "Ananas";
    var fruit2 = "Borovnice";
    var fruit3 = "Grozdje";
    var fruit4 = "Pomaranče";
    var fruit5 = "jagode";
        

Bi v Array iz gledalo kot

    var array_fruits = [fruit1, fruit2, fruit3, fruit4, fruit5];
        

Najlažji način shranjevanja je v Array metodi, ki jo lahko napišemo in shranimo pod enim imenom. Do nje pa lahko do stopamo preko številke indeksa. Array se definira z oglatimi oklepaji [] (AltGR + F in AltGR + G). Pri array metodi bomo z enim ukazom izpisali pet imen. Metoda toString() vrne seznam kot niz, ločen z vejico.

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

    <script>
        var sadje = ["Ananas", " Borovnice", " Grozdje", " Pomaranče", " Jagode"];
        document.getElementById("primer").innerHTML = sadje.toString();
        document.getElementById("primer").style.backgroundColor = "orange"
        document.getElementById("primer").style.border = "1px solid orangered"
        document.getElementById("primer").style.borderRadius = "6px"
        document.getElementById("primer").style.padding = "10px"
        document.getElementById("primer").style.display = "inline-block"
    </script>
            

Razlaga: Uporabili smo metodo toString() in še to, preden pozabim. Presledke, in vejice sem dodal sam, zaradi lepšega zgleda, drugače vejice niso pomembne, kot tudi ne nove vrstice. Tudi style je samo za zgled, kot ste opazili že pri prejšnjih primerih.

Array si lahko predstavljamo kot neko drevesno strukturo, v kateri imamo zložene podatke. Array se začne z indeksom 0, če ga posebej ne definiramo, in se nadaljuje, kakršnakoli je pač dolžina same besede. Indekse potem določa Array avtomatsko.

Rezultat v konzoli, pritisni F12!
    <script>
        var seznam = [true, 17, "Array", null];
        console.log(seznam);
    </script>
            

Če si sedaj predstavljamo indekse v tej kodi, ki smo jo spisali so postavljeni kot index0==true, index1==17, index2==Array, in index3==null. Če sedaj želimo do stopati do imena Array, ponovno F12 za konzolo.

    <script>
        var seznam = [true, 17, "Array", null];
        console.log(seznam);
        console.log("Učim se metode " + seznam[2]);
        console.log(seznam.length);
    </script>
    

V konzoli se nam izpiše koliko indeksov Array vsebuje. Ker smo iz seznama izpisanega v konzoli prebrali, da se ime Array nahaja pod indeksom 2, smo samo vpisali v konzolo seznam [2] za izpis.

Da nadaljujemo z izpisom sadja, ki smo začeli najprej, in ga bomo sedaj izpisali v obliki lista oziroma seznama.

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

    <script>
        var sadje = ["Ananas", " Borovnice", " Grozdje", " Pomaranče", " Jagode"];
        var izpis = "";
        /* sedaj bom uporabil števec i=0, kar pomeni da bo štel od nič, pa vse do zadnjega indeksa */
        for (var i = 0; i < sadje.length; i++) {
        izpis += "<li>" + sadje[i] + "</li>";
        }
        document.getElementById("primer").innerHTML = "<ul>" + izpis + "</ul>";
        document.getElementById("primer").style.backgroundColor = "greenyellow"
        document.getElementById("primer").style.border = "1px solid green"
        document.getElementById("primer").style.borderRadius = "6px"
        document.getElementById("primer").style.padding = "10px"
    </script>
            

Vpisali smo pet vrst sadja, ki se nam izpiše kot seznam, in smo, zato uporabili element li (list). Določili smo še spremenljivko i, ki bo štela od nič in vse nadaljnje indekse, ter jih izpisala v seznamu.

Večdimenzionalni Array je matrika, ki vsebuje več nizov. Če želimo ustvariti dvodimenzionalni niz, moramo vsako matriko izpisati v svoj prostor, s pomočjo oglatih oklepajev [ ].

Prvi primer večdimenzionalnega array-a bo predstavljen v konzoli F12, in bo vseboval imena iz sadja, zelenjave in hrane.

    <script>
        var zivila = [
            ["Borovnice", "Jabolka", "Pomaranče", "Breskve", "Hruške"],
            ["Fižol", "Paradižnik", "Peteršilj", "Korenje", "Zelje"],
            ["Svaljki", "Polenta", "Močnik", "Kaša", "Njoki"],
        ];
        console.log(zivila);
    </script>
            

Ko po zagonu programa odpremo konzolo, vidimo tri gnezdene sezname (ang. Array), in vsak ima na voljo po 5 indeksov. Na te indekse lahko kliknemo, in se nam odpre celoten Array. Recimo, da sedaj bi pa hoteli imeti številko indeksa od besede Peteršilj. Če pogledamo vse po vrsti, je sadje index0, zelenjava je index1 in hrana index2. Če v konzolo vtipkamo zivila[1], se nam bo izpisal Array zelenjave. Array odpremo, in vidimo, da je Peteršilj na indeksu 2. Da sedaj dobimo samo Peteršilj, moramo vpisati zivila[1][2].

Če sedaj hočemo izpisati vse sezname, ampak ne v konzoli, moramo uporabiti innerHTML metodo.

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

    <script>
        var zivila = [
        ["Borovnice", " Jabolka", " Pomaranče", " Breskve", " Hruške"],
        ["Fižol", " Paradižnik", " Peteršilj", " Korenje", " Zelje"],
        ["Svaljki", " Polenta", " Močnik", " Kaša", " Njoki"],
        ];

        var izpisi = "";

        for (var i = 0; i < zivila.length; i++) {
        izpisi += "<li>" + zivila[i] + "</li>";
        }

        document.getElementById("primer").innerHTML = "<ul>" + izpisi + "</ul>";
        document.getElementById("primer").style.backgroundColor = "deepskyblue"
        document.getElementById("primer").style.border = "1px solid skyblue"
        document.getElementById("primer").style.borderRadius = "6px"
        document.getElementById("primer").style.padding = "10px"
        document.getElementById("primer").style.display = "inline-block"
    </script>
            

V naslednjem primeru bomo uporabil metodo for() dvakrat. Prva zanka bo izpisala vse sezname, druga pa potem vse elemente.

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

    <script>
        var zivila = [
        ["Borovnice", " Jabolka", " Pomaranče", " Breskve", " Hruške"],
        ["Fižol", " Paradižnik", " Peteršilj", " Korenje", " Zelje"],
        ["Svaljki", " Polenta", " Močnik", " Kaša", " Njoki"],
        ];

        var izpisi = "";

        for (var i = 0; i < zivila.length; i++) {
        for (var j = 0; j < zivila[i].length; j++) {
        izpisi += "<li>" + zivila[i][j] + "</li>";
        }
        }

        document.getElementById("primer").innerHTML = "<ul>" + izpisi + "</ul>";
        document.getElementById("primer").style.backgroundColor = "yellow"
        document.getElementById("primer").style.border = "1px solid greenyellow"
        document.getElementById("primer").style.borderRadius = "6px"
        document.getElementById("primer").style.padding = "10px"
        document.getElementById("primer").style.display = "inline-block"
    </script>
            

Tretji primer prikazuje izpis po kategorijah.

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

    <script>
        var zivila = [
            ["Borovnice", " Jabolka", " Pomaranče", " Breskve", " Hruške"],
            ["Fižol", " Paradižnik", " Peteršilj", " Korenje", " Zelje"],
            ["Svaljki", " Polenta", " Močnik", " Kaša", " Njoki"],
        ];

        var ips = "";

        for (var i = 0; i < zivila.length; i++) {
            if (i == 0) {
                ips += "<strong>SADJE</strong>"
            }   else if (i == 1) {
                ips += "<br><strong>ZELENJAVA</strong>"
            }   else if (i == 2) {
                ips += "<br><strong>HRANA</strong>"
            }
            for (var j = 0; j < zivila[i].length; j++) {
                ips += "<li>" + zivila[i][j] + "</li>";
            }
        }

        document.getElementById("primer").innerHTML = "<ul>" + ips + "</ul>";
        document.getElementById("primer").style.backgroundColor = "red"
        document.getElementById("primer").style.border = "1px solid orangered"
        document.getElementById("primer").style.borderRadius = "6px"
        document.getElementById("primer").style.padding = "10px"
        document.getElementById("primer").style.display = "inline-block"
    </script>
            

Najbolj pogoste metode, ki se uporabljajo v seznamih so join(), pop(), shift(), push(), splice() in isArray(). Z iskalnikom si lahko izboljšamo iskanje na naši spletni strani. Naredimo si tabelo vseh naslovov, si namestimo iskalnik, in karkoli bomo vpisali v ta iskalnik (in se bo nahajalo na spletni strani) bo našel, in nam izpisal. Sedaj, govoriti o nečem je lahko, kaj pa to narediti? Je dovolj enostavno, da si to vsak naredi sam. Sicer je težava, če imaš ogromno naslovov, ampak na koncu se izplača.

Najprej bomo naredil iskalnik, ki se nam bo izpisalo v konzoli F12, in celotno iskanje bo potekalo v konzoli

    <div id="jezik"></div>
    <input id="najdi">
    <button onclick="tipka()">Vse rezultate najdeš v konzoli brskalnika</button>

    <script>
        //če dam presledke med narekovaje, mi ne bo prepoznal besed
        var jezik = ["Python","Java","PHP","JavaScript","C#","C","Visual Basic","Angular","C++","CSS"];
        var vsi = "";
        /*izpis vseh jezikov*/
        vsi += "<ul>";
        for (var i = 0; i < jezik.length; i++) {
            vsi += "<li>" + jezik[i] + "</li>";
        }
        vsi += "<ul>";
        document.getElementById("jezik").innerHTML = vsi;

        function tipka() {
            var search = document.getElementById("najdi").value;
            var vsi = "";
            var prikaz = [];
            var j = 0;

            for (var i = 0; i < jezik.length; i++) {
                var niz = jezik[i].toLowerCase(); //v iskalniku uporabite samo male črke
                var najdi = niz.indexOf(search); //indexOf vrača nazaj index prve pojavitve določene vrednosti
                if (najdi === 0) {
                    console.log(niz);
                }
            }
        }
    </script>
            

Naslednji iskalnik je enak kot zgornji, samo, da nam ne bo potrebno iti v konzolo, ampak enostavno iščemo na spletni strani.

    <div id="iskanje"></div>
    <label for="xy"></label><input id="xy">
    <button onclick="btn()">Najdi programski jezik</button>

    <script>
        //če dam presledke med narekovaje, mi ne bo prepoznal besed
        var jezik = ["Python","Java","PHP","JavaScript","C#","C","Visual Basic","Angular","C++","CSS"];
        var vsi = "";
        /*izpis vseh jezikov*/
        vsi += "<ul>";
        for (var i = 0; i < jezik.length; i++) {
            vsi += "<li>" + jezik[i] + "</li>";
        }
        vsi += "<ul>";
        document.getElementById("iskanje").innerHTML = vsi;

        function btn() {
            var qw = document.getElementById("xy").value;
            var vsi = "";
            var prikaz = [];
            var j = 0;

            for (var i = 0; i < jezik.length; i++) {
                var niz = jezik[i].toLowerCase();
                var najdi = niz.indexOf(qw);
                if (najdi === 0) {
                    prikaz[j] = jezik[i];
                    j++;
                }
            }
            //izpis
            vsi += "<ul>";
            for (var i = 0; i < prikaz.length; i++) {
                vsi += "<li>" + prikaz[i] + "</li>"
            }
            vsi += "<ul>"
            document.getElementById("iskanje").innerHTML = vsi;
        }
    </script>