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

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

Spremenljivke

Spremenljivke (ang. variables) so zabojniki za shranjevanje podatkov, in so lahko sestavljene iz poljubnih črk. Priporočljivo je, da je spremenljivka vedno napisana brez podčrtajev, in presledkov. Spremenljivke lahko pišemo vse v eni vrstici ločenih z vejico, in nam ni potrebno pisati vsako posebej, v novo vrstico.

Spremenljivke

V teh primerih bodo "a", "b" in "x" imena spremenljivk, katerim bomo določili vrednosti, in na koncu uporabili matematično operacijo (+, -, *, /)

Seštevanje

LASTNOSTI opis
var a, b, x; vpis spremenljivke
a = 13; b = 46; dodelitev vrednosti spremenljivki
x = a + b; izračun vrednosti

    <p id="add"></p>
    <button onclick="funkcija1()">Seštevanje</button>

    <script>
        function funkcijaVsota() {
            var a = 13;
            var b = 46;
            var x = a + b;
            document.getElementById('addVsota').innerHTML = "Rezultat seštevanja je: " + x;
        }
    </script>
                

Odštevanje

LASTNOSTI opis
var a, b, o; vpis spremenljivke
a = 13; b = 46; dodelitev vrednosti spremenljivki
o = b - a; izračun vrednosti

    <button onclick="funkcija2()">Odštevanje</button>
    <p id="sub"></p>

    <script>
        function funkcija2() {
            var a = 13;
            var b = 46;
            var o = b - a;
            document.getElementById('sub').innerHTML = "Rezultat odštevanja je: " + o;
        }
    </script>
                

Množenje

LASTNOSTI opis
var a, b, m; vpis spremenljivke
a = 13; b = 46; dodelitev vrednosti spremenljivki
m = a * b; izračun vrednosti

    <button onclick="funkcija2()">Množenje</button>
    <p id="multi"></p>

    <script>
        function funkcija4() {
            var a = 13;
            var b = 46;
            var m = a * b;
            document.getElementById('multi').innerHTML = "Rezultat množenja je: " + m;
        }
    </script>
                

Deljenje

LASTNOSTI opis
var a, b, d; vpis spremenljivke
a = 25; b = 5; dodelitev vrednosti spremenljivki
d = a / b; izračun vrednosti

    <button onclick="funkcija2()">Deljenje</button>
    <p id="deli"></p>

    <script>
        function funkcija3() {
            var a = 25;
            var b = 5;
            var d = a / b;
            document.getElementById('deli').innerHTML = "Rezultat deljenja je: " + d;
        }
    </script>
                

Izračun

LASTNOSTI opis
var račun1, račun2, izpis; vpis spremenljivke
račun1 = 1299; račun2 = 15439; dodelitev vrednosti spremenljivki
izračun = račun1 + račun2; izračun vrednosti

    <button onclick="funkcija2()">Račun</button>
    <p id="spre"></p>

    <script>
        function funkcija5() {
            var calc1 = 1299;
            var calc2 = 15439;
            var calculation = calc1 + calc2;
            document.getElementById("spre").innerHTML = "Rezultat je: " + calculation;
        }
    </script>
                

Iz zgornjih tabel smo napisali programe, ki nam bodo izračunali matematične vrednosti. Definirali smo spremenljivki, in jih sešteli, odšteli, množili in delili. V primeru račun smo sešteli nize, ki vsebujeta števili oziroma integer. Enako smo uporabili spremenljivki kot pri seštevanju. V primeru smo niza a in b sešteli, in dobili integer.

Vse spremenljivke morajo biti identificirane z edinstvenimi imeni, in se zato imenujejo identifikatorji. To so lahko kratka imena, kot a in b, lahko tudi daljša, kot so starost, priimek itn. Splošna pravila identifikatorjev, si lahko ogledamo v spodnjem seznamu.

  1. imena lahko vsebujejo številke in črke, podčrtaj _ in znak $
  2. imena se morajo začeti s črko
  3. lahko se začnejo tudi z znakom $ ali _
  4. imena so občutljiva na velike in male črke
  5. rezervirana imena, ne morejo biti tudi imena spremenljivk

V JavaScript je znak za enakost = uporabljen kot operater dodelitve, ne pa kot operater v matematiki. V primeru x = x + 5, ki je matematično popoln nesmisel, ima v JavaScript popoln smisel. In sicer dodeljuje vrednost x + 5 do x in rezultat postavi v x, torej se vrednost poveča za 5.

Matematični operater enakosti je v JavaScript zapisan kot ==

Vrste podatkov

Spremenljivke lahko vsebujejo števila, kot je recimo 100, in besedilne vrednosti, kot je Borut. V programiranju se te besede imenujejo nizi (ang. String), števila pa integer. JavaScript lahko obdeluje številne vrste podatkov, ampak zaenkrat bomo ostali pri številkah in nizih. V primeru je številka napisana brez narekovajev, medtem ko so besede z narekovaji.

    <p id="sprem" style="font-size: 22px; background-color: #fff3a0; color: black; padding: 10px 10px"></p>

    <script>
        var stevilka = 3.14;
        var beseda = "Borut";
        var stavek = " je moje ime.";
        document.getElementById("sprem").innerHTML = stevilka + "<br>" + beseda + stavek;
    </script>
                

Ustvarjanje spremenljivk

Če želimo spremenljivko ustvariti, jo moramo poimenovati oziroma razglasiti.

    var Avto
    - če želim dve ali več besed, jih pišem skupaj
    var imeAvta
                

Po imenovanju spremenljivke, spremenljivka nima nobene vrednosti, in jo moramo dodati.

    Avto = "Renault";
                

Spremenljivko lahko dodelimo tudi s pomočjo variable ali var krajše.

    var Avto = "Renault";
                

Sedaj bomo napisali še primer, kjer bomo ustvarili spremenljivko mojAvto, in ji dali ime Renault. Vrednost bomo izpisali s pomočjo id, in metode getElementById().

    <p id="var" style="font-size: 22px; background-color: orange; color: black; padding: 10px 10px"></p>

    <script>
        var mojAvto = "Renault";
        document.getElementById("var").innerHTML = mojAvto;
    </script>
                

Izjave

Kaj pa če imamo možnost uporabiti eno samo izjavo, v kateri deklariramo več spremenljivk. Izpiše nam seveda tisto spremenljivko, katere izjavo vpišemo v innerHTML.

    <p id="spremen" style="font-size: 22px; background-color: yellow; color: black; padding: 10px 10px"></p>

    <script>
        var mojAvto = "Renault", mojeIme = "Borut", zaposlen = "delavec";
        document.getElementById("spremen").innerHTML = zaposlen;
    </script>
                

Nedefinirana vrednost

V računalniških programih se spremenljivke pogosto deklarirajo brez vrednosti. Ker je vrednost nekaj, kar je potrebno izračunati, ali nekaj kar bo šele zagotovljeno kasneje, na primer uporabniški vnos. Takrat bo navedena spremenljivka v takih primerih imela nedefinirano (ang. Undefined) vrednost.

    <p id="undefined" style="font-size: 22px; background-color: #fff3a0; color: black; padding: 10px 10px"></p>

    <script>
        var Vreme;
        document.getElementById("undefined").innerHTML = Vreme;
    </script>
                

Poimenovanje spremenljivk

Če spremenljivko poimenujemo ponovno, ta ne izgubi svoje vrednosti, v primeru bomo ponovno razglasil spremenljivko mojAvto, kjer bo vrednost ostala še vedno Renault.

    <p id="naming" style="font-size: 22px; background-color: lightblue; color: black; padding: 10px 10px"></p>

    <script>
        var myCar = "Renault";
        var myCar;
        document.getElementById("naming").innerHTML = myCar;
    </script>
                

Večvrstne spremenljivke

Tako kot v matematiki, lahko izvajamo več stvari naenkrat s spremenljivkami.

    <p id="multivariate" style="font-size: 22px; background-color: lightsalmon; color: black; padding: 10px 10px"></p>

    <script>
        var a = 54 - 13 + 432 - 2 + 4;
        document.getElementById("multivariate").innerHTML = "Lahko izračunaš na kalkulator! Rezultat je => " + a;
    </script>
                

Enako gre tudi z nizi.

    <p id="vs" style="font-size: 22px; background-color: linen; color: black; padding: 10px 10px"></p>

    <script>
        var a = "Delam" + " s " + "HTML, CSS in JavaScript!";
        document.getElementById("vs").innerHTML = a;
    </script>
                

Oglejmo si še primer, ki nas bo pozdravil med 10:00 in 18:00 uro Dober dan, pred 10:00 Dobro jutro, in po 19:00 Dober večer.


    <button onclick="mojaFunkcija()">Pozdrav primeren času</button>
    <p id="primer"></p>

    <script>
        function mojaFunkcija() {
            var pozdrav;
            var cas = new Date().getHours();
            if (cas < 10) {
                pozdrav = "Dobro jutro!";
            }   else if (cas < 19) {
                pozdrav = "Dober dan!"
            }   else {
                pozdrav = "Dober večer!"
            }
            document.getElementById("primer").style.fontSize = "28px";
            document.getElementById("primer").style.backgroundColor = "yellow";
            document.getElementById("primer").innerHTML = pozdrav;
            document.getElementById("primer").style.padding = "10px";
            document.getElementById("primer").style.borderRadius = "6px";
            document.getElementById("primer").style.border = "1px solid greenyellow";
        }
    </script>