Uvod v JavaScript

Kaj je JavaScript?

• JavaScript je skriptni jezik.
• Velja za enega najbolj vsestranskih in priljubljenih programskih jezikov.
• Uporablja se za dodajanje interaktivnosti spletnim stranem (npr. odziv na klike, obrazce, animacije).
• Je eno izmed treh osnovnih orodij spleta: HTML, CSS in JavaScript.
• V osnovi je bil namenjen temu, da deluje na strani uporabnika (front-end).
• Široka podpora v vseh sodobnih brskalnikih.
• Z razvojem se je JS iz brskalnikov preselil tudi na strežnike.
• Uveljavil tudi v številnih orodjih za razvoj mobilnih aplikacij.

 alert('Pozdravljen svet!');

Spremenljivke: var, let, const

• var – deklarira spremenljivke s funkcijo ali v globalnem obsegu, omogoča ponovno deklaracijo in posodobitve znotraj istega obsega.

  
  
          function e() {
              var n = "Luka";
              console.log(n);
          }
          e();  //# izpis "Luka"
  
         

• let – deklarira spremenljivke z obsegom bloka, kar omogoča posodobitve, vendar ne ponovne deklaracije znotraj istega bloka

        if (true) {
            let age = 30;
            console.log(age);
        }
        console.log(age) // tale del tule bi vrnil napako

      

• const – deklarira spremenljivke z obsegom bloka, ki jih ni mogoče znova dodeliti po začetni dodelitvi.
  

  Poskusi spremeniti vrednost spremenljivke, deklarirane z const. Kaj se zgodi?

Združevanje besedila in spremenljivk

        let a = 5;
        let b = 8;
        alert('Vsota 5 in 8 je ' + (a + b));
    

Pogojni stavki: if/else

        let starost = 20;
        if (starost >= 18) {
            console.log('Odrasla oseba');
        } else {
            console.log('Mlajši od 18 let');
        }
    

Zanke: for

        for (let i = 1; i <= 3; i++) {
            alert('Zanka: ' + i);
        }

    

Funkcija brez parametrov

        function pozdrav() {
            alert('Živjo!');
        }
        
        pozdrav();

    

Funkcija s parametri

        function sestej(a, b) {
            return a + b;
        }
        alert(sestej(3, 4));

    

Še vemo kaj je DOM?

• DOM (Document Object Model) je predstavitev strukture HTML dokumenta kot drevesa.
• Vsak element (<p>, <div>, <input>) je objekt.
• JavaScript omogoča dostop do teh objektov in njihovo spreminjanje.

Pridobivanje elementov

Primer HTML strukture

        <p id="ena" class="rdece">Prva</p>
        <p class="rdece">Druga</p>
        <input type="text" name="ime">
    

• id
  enolična oznaka elementa
  na strani se lahko pojavi samo enkrat
  uporabljamo ga, ko želimo točno določen element
  


• class
  oznaka, ki jo lahko uporablja več elementov
  uporabno za skupine (npr. vsi rdeči elementi)
  


• name
  uporablja se predvsem v obrazcih
  pomemben pri pošiljanju podatkov (npr. PHP, POST)
  manj se uporablja za manipulacijo z JavaScriptom

Primeri dostopa

        document.getElementById("ena");
        document.getElementsByClassName("rdece");
        document.getElementsByTagName("p");
        document.querySelector(".rdece");
        document.querySelectorAll(".rdece");
    

Dogodki

• onclick – ob kliku na gumb
• onkeyup – ko uporabnik spusti tipko
• onfocus – ko element dobi fokus

Primer

HTML koda

        <input type="text" id="vnosIme" placeholder="Tvoje ime">
        <button onclick="pozdravi()"> Pozdravi me </button>

        <p id="izpis">(Tu se bo prikazalo sporočilo)</p>
     

JavaScript koda

        function pozdravi() {
            let ime = document.getElementById("vnosIme").value;
            document.getElementById("izpis").innerHTML = "Živjo, " + ime + "! Ful si fajn!";
        }
  

(Tu se bo prikazalo sporočilo)