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

JavaScript JavaScript načini Sintaksa - primer Integer - primer String - dogodki - onkeydown - onmouse.. - definicija sintakse - identifikacija spremenljivk Spremenljivke Števila Objekti Funkcije Pogoji Zanke Nizi Datum in čas DOM Array AJAX Knjižnica

Sintaksa

Sintaksa je niz pravil kako so podatki zgrajeni. Ogledali si bomo, kako so zgrajene spremenljivke, funkcije, objekti, števila in dogodki, kar sintaksa sploh predstavlja. V spodnji tabeli si lahko ogledamo dogodke, ki nekaj naredijo oziroma se nekaj zgodi na spletni strani. Za nekaj primerov bo potrebno vključevati konzolo F12, in sicer iz razloga, da se jo privadimo, in ker nam konzola nudi ogromno podatkov, tako za popravljanje, kot tudi vpogled v delovanje.

Sintaksa

V našem primeru, je spremenljivka število 29.45, in ko se nam stran naloži, se nam ta številka izpiše. V tem primeru je spremenljivka tipa integer (slo. celo število), ki smo ga vpisali v innerHTML, kjer lahko uporabljamo tudi matematične operatorje.

    <p id="integer"></p>

    <script>
        document.getElementById("integer").innerHTML = '29.45'
        document.getElementById("integer").style.padding = "10px"
        document.getElementById("integer").style.backgroundColor = "red"
        document.getElementById("integer").style.color = "yellow"
        document.getElementById("integer").style.borderRadius = "6px"
    </script>
            

Spremenljivka, v naslednjem primeru niz (ang. string), in se vnos izpiše, ko se stran naloži.

    <p id="string"></p>

    <script>
        document.getElementById("string").innerHTML = "Dobrodošli v JavaScript vadnici.."
        document.getElementById("string").style.padding = "10px"
        document.getElementById("string").style.backgroundColor = "greenyellow"
        document.getElementById("string").style.borderRadius = "6px"
        document.getElementById("string").style.color = "black"
    </script>
            

HTML dogodki se sprožijo, ko se na spletni strani zgodi neka "stvar". Te "stvari" so lahko:

  1. nalaganje strani se zaključi
  2. polje za vnos (ang. Input) je bilo spremenjeno
  3. klik na gumb

Ko se ti dogodki zgodijo, želimo, da se izvede neka funkcija, in to dosežemo z JavaScript. Ogledali si bomo tri najbolj pogoste primere, ki se uporabljajo za dogodke (ang. Event), to so onclick, onmouseover in onkeydown.

Dogodek onclick se uporablja za sprožitev funkcije, ko kliknemo na gumb. Dogodek onmouseover demonstrira razliko med onmouseover, onmousecenter in onmousemove. Dogodek onkeydown uporablja metodo addEventListener() da doda keydown dogodek v HTML element.

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

    <script>
        function mojaFunkcija() {
            document.getElementById("primer").innerHTML = "Zdravo svet!"
        }
    </script>
            

V polje vpiši črko, da vidiš spremembo barve ob vpisu.

    <form id="primer1">
        <label for="primer2"></label><input id="primer2">
    </form>

    <script>
        document.getElementById("primer1").addEventListener("keydown", barva);

        function barva() {
            document.getElementById("example2").style.backgroundColor = "yellow"
            document.getElementById("example2").style.color = "red"
            document.getElementById("example2").style.boxShadow = "0 4px 8px rgba(0, 0, 0, 0.4)"
        }
    </script>
            
  1. dogodek onmousemove se zgodi, ko se z miško pomikam čez <div> element
  2. dogodek onmousecenter se zgodi samo kadar element <div> zapustimo, in se vrnemo nazaj
  3. dogodek onmouseover se zgodi, ko se z miškinim kazalcem premikamo znotraj <div> elementa
    <div onmouseover="mouseover()" class="background">
    <p id="over">onmouseover: Hover!</p>
    </div>

    <div onmouseenter="mousecenter()" class="background">
      <p id="center">onmousecenter: Hover!</p>
    </div>

    <div onmousemove="mousemove()" class="background">
      <p id="move">onmousemove: Hover!</p>
    </div>

    <script>
      var a = 0;
      var b = 0;
      var c = 0;

      function mouseover() {
          document.getElementById("over").innerHTML = a+=1;
      }

      function mousecenter() {
          document.getElementById("center").innerHTML = b+=1;
      }

      function mousemove() {
          document.getElementById("move").innerHTML = c+=1;
      }
    </script>
            

Pritisni F12 za prikaz konzole.

    <script>
        //seštevanje
        var a = 10;
        var b = 5;
        var c = a + b;
        console.log("Seštevanje dveh spremenljivk, a = 10 in b = 5. Vsota teh dveh števil je: " + c);
    </script>

    <script>
        //odštevanje
        var a = 25;
        var b = 15;
        var c = a - b;
        console.log("Odštevanje dveh spremenljivk, a = 25 in b = 15. Vsota teh dveh števil je: " + c);
    </script>

    <script>
        //množenje
        var a = 5;
        var b = 5;
        var c = a * b;
        console.log("Množenje dveh spremenljivk, a = 5 in b = 5. Vsota teh dveh števil je: " + c);
    </script>

    <script>
        //deljenje
        var a = 25;
        var b = 5;
        var c = a / b;
        console.log("Deljenje dveh spremenljivk, a = 25 in b = 5. Vsota teh dveh števil je: " + c);
    </script>

    <script>
        //deljenje
        var a = 25;
        var b = 5;
        var c = 14;
        var d = c / b;
        console.log("Ostanek pri deljenju dveh spremenljivk, b = 5 in c = 14. Vsota teh dveh števil je: " + d);
    </script>

    <script>
        //prištevek
        var a = 10;
        a++;
        var b = a;
        console.log("Spremenljivki a = 10, prišteje vrednost ena: " + b);
    </script>

    <script>
        //prištevek
        var a = 10;
        a--;
        var b = a;
        console.log("Spremenljivki a = 10, odšteje vrednost ena: " + b);
    </script>
    

Sintaksa je niz pravil, in pod ta pravila spadajo tudi operatorji.

OPERATORJI OPIS
+ seštevanje
- odštevanje
* množenje
/ deljenje
% odstotek, ki vrne stanje pri deljenju
** potenciranje
++ poveča vrednost spremenljivke za 1
-- zmanjša vrednost spremenljivke za 1

V JavaScript lahko uporabimo metodo CamelCase, ki je namenjena pisanju kode. Uporabljajo se različni načini pisanja kode. To je lahko pisano z vezniki, pomeni tvoje-ime, tvoj-priimek, tvoja-starost itn. Lahko je napisano s podčrtaji, kot recimo tvoje_ime, tvoj_priimek, tvoja_starost itn. Lahko ga uporabimo z velikimi črkami, kot na primer TvojeIme, TvojPriimek, TvojaStarost, ali malimi tvojeIme, tvojPriimek, tvojaStarost itn. JavaScript uporablja nabor znakov Unicode, ki zajema vse znake, ločila in simbole na svetu.

Vse JavaScript spremenljivke morajo biti identificirane z imeni, in se imenujemo identifikatorji. To so lahko kratka imena ("a" ali "b"), lahko tudi daljša ("test" ali "content"). V spodnjem seznamu so opisana splošna pravila teh identifikatorjev.

  1. imena lahko vsebujejo številke, črke, podčrtaje ali znak dolar ($ == shift + 4)
  2. imena se morajo začeti s črko
  3. lahko se začnejo tudi z $ ali podčrtajem (_)
  4. imena so občutljiva na velike in male črke
  5. rezervirana imena, NE morejo biti tudi imena spremenljivk
  6. operater, je enako "=" je v JavaScript zapisan kot ==
    <p id="primer1"></p>
    <p id="primer2"></p>
    <p id="primer3"></p>
    <p id="primer4"></p>
    <p id="primer5"></p>
    <p id="primer6"></p>
    <p id="primer7"></p>
    <p id="primer8"></p>

    <script>
        document.getElementById("primer1").innerHTML = "Z JavaScript smo izpisali celo število, ki je => " + 14.7
        document.getElementById("primer1").style.color = "red"
        document.getElementById("primer1").style.fontWeight = "bold"

        document.getElementById('primer2').innerHTML = "Z JavaScript se izpiše lahko tudi string => " + "To je niz v JavaScript";
        document.getElementById("primer2").style.color = "deepskyblue"

        document.getElementById('primer3').innerHTML = "Seštevanje v JavaScript => " + (25+234)
        document.getElementById("primer3").style.color = "green"

        document.getElementById('primer4').innerHTML = "Odštevanje v JavaScript => " + (250-234)
        document.getElementById("primer4").style.color = "blue"

        document.getElementById('primer5').innerHTML = "Množenje v JavaScript => " + (25*17)
        document.getElementById("primer5").style.color = "green"

        document.getElementById('primer6').innerHTML = "Deljenje v JavaScript => " + (25/5);
        document.getElementById('primer6').style.color = "orangered";

        var a = 25; //celo število
        var c = 83;
        d = a + c;
        var b = 'beseda'; //niz
        document.getElementById('primer7').innerHTML = "Seštevanje spremenljivk a and c => " + d;
        document.getElementById("primer7").style.color = "blue";
        document.getElementById('primer8').innerHTML = "Spremenljivka b samo izpiše niz => " + b;
    </script>