JavaScript Vadnica

JavaScript je močan in vsestranski programski jezik, ki predstavlja enega od temeljev moderne spletne tehnologije. Čeprav si ime deli z Javo, sta jezika popolnoma neodvisna in različna. JavaScript omogoča ustvarjanje dinamičnih, interaktivnih spletnih strani z možnostjo manipulacije HTML elementov, upravljanja dogodkov in izvajanja kompleksnih operacij v brskalniku. Poleg spletnega razvoja (front-end) se JavaScript uporablja tudi za strežniške aplikacije (back-end) preko platforme Node.js. Ena najpogosteje uporabljenih metod je getElementById(), ki omogoča dinamično spreminjanje vsebine HTML elementov.

PRIMER

<!DOCTYPE html>
<html lang="sl">
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            line-height: 1.6;
        }
        
        .section {
            border: 1px solid #ddd;
            max-width: 100%;
            padding: 15px;
            margin-bottom: 20px;
            border-radius: 6px;
        }
        
        .section h3 {
            margin-top: 0;
            color: #0066cc;
        }
        
        .output {
            margin-top: 10px;
        }
        
        button {
            cursor: pointer;
            padding: 6px 12px;
            background: #0066cc;
            color: #fff;
            border: none;
            border-radius: 4px;
        }
        button:hover {
            background: #004999;
            color: #fff;
        }
        
        input, select {
            padding: 5px;
            margin-right: 5px;
        }
    </style>
</head>
<body>
    <!-- Klikni gumb – prikaži ikono, sporočilo in animacijo -->
    <div class="section" id="section1">
        <h3>Interakcija z gumbom (onclick)</h3>
        <button id="magicBtn">Pritisni me!</button>
        <div class="output" id="magicMsg"></div>
    </div>
    
    <!-- Trenutni datum in ura (osveževanje vsako sekundo) -->
    <div class="section" id="section2">
        <h3>Trenutni datum in čas</h3>
        <p><span id="clock"></span></p>
    </div>
    
    <!-- Pretvorba besedila v velike črke (funkcija) -->
    <div class="section" id="section3">
        <h3>Pretvori besedilo v VELIKE črke</h3>
        <input type="text" id="txtInput" placeholder="npr. hello world">
        <button id="txtConvert">Pretvori</button>
        <p class="output" id="txtResult"></p>
    </div>
    
    <!-- Seznam (array) + zanka (loop) – dinamičen seznam -->
    <div class="section" id="section4">
        <h3>Dinamičen seznam (Array + for‑loop)</h3>
        <button id="showList">Pokaži seznam tehnologij</button>
        <ul id="techList"></ul>
    </div>
    
    <!-- Shranjevanje v LocalStorage -->
    <div class="section" id="section5">
        <h3>Shrani opombo (LocalStorage)</h3>
        <input type="text" id="noteInput" placeholder="Napiši kratko opombo">
        <button id="saveNote">Shrani</button>
        <button id="clearNote">Počisti</button>
        <p class="output" id="savedNote"></p>
    </div>
    
    <!-- Simuliran fetch – pridobivanje podatkov (async/await) -->
    <div class="section" id="section6">
        <h3>Pridobivanje podatkov (fetch simuliran)</h3>
        <button id="loadData">Naloži “uporabnike”</button>
        <pre class="output" id="dataOutput"></pre>
    </div>
    
    <script>
        /* GUMB – onclick, ikona, sporočilo, preprosta animacija */
        document.getElementById('magicBtn').addEventListener('click', () => {
            const msg = document.getElementById('magicMsg');
            // Prikažemo sporočilo
            msg.textContent = 'Dobrodošli v moji JavaScript vadnici!';
        });
        
        /* DATUM IN ČAS – osvežujemo vsako sekundo */
        function updateClock() {
            const now = new Date();
            const formatted = now.toLocaleDateString('sl-SI') + ' ' + now.toLocaleTimeString('sl-SI');
            document.getElementById('clock').textContent = formatted;
        }
        setInterval(updateClock, 1000);
        updateClock(); // takoj ob nalaganju
        
        /* FUNKCIJA – pretvori v veliko črko */
        function toUpper(str) {
            return str.toUpperCase();
        }
        document.getElementById('txtConvert').addEventListener('click', () => {
            const src = document.getElementById('txtInput').value;
            document.getElementById('txtResult').textContent = toUpper(src);
        });
        
        /* ARRAY + FOR‑LOOP – dinamičen seznam */
        const technologies = ['HTML', 'CSS', 'JavaScript', 'React', 'Node.js'];
        document.getElementById('showList').addEventListener('click', () => {
            const ul = document.getElementById('techList');
            ul.innerHTML = ''; // počistimo prejšnji izpis
            for (let i = 0; i < technologies.length; i++) {
                const li = document.createElement('li');
                li.textContent = `${i + 1}. ${technologies[i]}`;
                ul.appendChild(li);
            }
        });
        
        /* LOCALSTORAGE – shranjevanje preprostega zapisa */
        const NOTE_KEY = 'myNote';
        
        function upodobitevNote() {
            const saved = localStorage.getItem(NOTE_KEY);
            const out = document.getElementById('savedNote');
            out.textContent = saved ? `Shranjeno: ${saved}` : 'Ni shranjenih opomb.';
        }
        document.getElementById('saveNote').addEventListener('click', () => {
            const txt = document.getElementById('noteInput').value.trim();
            if (txt) {
                localStorage.setItem(NOTE_KEY, txt);
                upodobitevNote();
            }
        });
        document.getElementById('clearNote').addEventListener('click', () => {
            localStorage.removeItem(NOTE_KEY);
            upodobitevNote();
        });
        upodobitevNote();
        
        /* ASYNC FETCH (simuliran) – pridobivanje podatkov */
        async function fakeFetchUsers() {
            // Simuliramo mrežni zakasnitev s setTimeout
            return new Promise(resolve => {
                setTimeout(() => {
                    resolve([
                        { id: 1, ime: 'Ana', starost: 22 },
                        { id: 2, ime: 'Boris', starost: 27 },
                        { id: 3, ime: 'Cvetka', starost: 19 }
                    ]);
                }, 800);
            });
        }
        document.getElementById('loadData').addEventListener('click', async () => {
            const out = document.getElementById('dataOutput');
            out.textContent = 'Nalagam podatke …';
            try {
                const users = await fakeFetchUsers();
                out.textContent = JSON.stringify(users, null, 2);
            } catch (e) {
                out.textContent = 'Napaka pri nalaganju podatkov.';
                console.error(e);
            }
        });
    </script>
</body>
</html>

REZULTAT

Komentiranje	V JavaScript lahko uporabimo komentarje, ki so vidni samo nam.	Glej primer
Pojavno okno	Pojavno okno je nekakšno polje z opozorilom, ki se odpre, ko pride do napake.	Glej primer
Konzola brskalnika	Če želimo pregledati ali videti HTML dokument, je to najlažje narediti v samem brskalniku.	Glej primer

JavaScript Orodje za delo

JavaScript je nepogrešljiv del sodobnega spleta in eden najpomembnejših programskih jezikov za spletni razvoj. Kot visokonivojski programski jezik omogoča razvoj tako na strani odjemalca (front-end) kot na strani strežnika (back-end). Z JavaScript lahko ustvarjamo dinamične spletne aplikacije, upravljamo uporabniško izkušnjo in razvijamo kompleksne spletne rešitve. Za učinkovit razvoj uporabljamo moderna razvojna orodja kot so PHPStorm, Visual Studio Code ali preprosto beležnico - izbira je odvisna od vaših potreb in preference.

Razvojno okolje lahko izbiramo med številnimi možnostmi, od naprednih IDE-jev kot so WebStorm, NetBeans in Eclipse, do preprostejših urejevalnikov kot je Notepad++. Integrirana razvojna okolja (IDE) nudijo celovito podporo pri razvoju s funkcijami kot so inteligentno dokončanje kode, razhroščevanje v realnem času in integracija s sistemi za verzioniranje. Medtem ko so urejevalniki kode (Code Editors) lažji in hitrejši, vendar jih lahko z razširitvami nadgradimo v zmogljiva razvojna orodja. IDE tipično vključuje urejevalnik kode, prevajalnik/tolmač in razhroščevalnik v enem paketu, kar omogoča učinkovit razvoj kompleksnih aplikacij.

Beležnica	Je urejevalnik besedila in je prisoten v vseh operacijskih sistemih.	Glej primer
PHPStorm	Urejevalnik dejansko dobi našo kodo in globoko razume njeno strukturo ter podpira vse funkcije jezika JavaScript, PHP, itn.	Glej primer
VisualStudio Code	Kot urejevalnik kode nima vgrajenih orodij in funkcij testiranja, vendar pa je te funkcije mogoče namestiti z vtičniki.	Glej primer

Kako delati z JavaScript?

JavaScript je zmogljiv programski jezik, ki spletnemu mestu lahko doda interaktivnost, je vsestranski in prijazen začetnikom. Ko pridobimo izkušnje bomo lahko ustvarjali igre, izdelovali 2D in 3D animacije, obsežne aplikacije, ki temeljijo na bazi podatkov in še veliko več. Sam JavaScript je kompakten, a zelo prilagodljiv, ker je prilagojen za odklep ogromno funkcij. Te funkcije so programski vmesnik (API - Application Programming Interface), dinamično ustvarjanje spletnih strani, zbiranje in upravljanje video toka iz uporabnikove spletne kamere ali generiranje 3D grafike in zvočnih vzorcev. Na voljo nam je ogromna knjižnica tretjih oseb, ki jih lahko uporabimo za HTML, za pospešitev dela gradnje spletnih mest in aplikacij. V HTML je JavaScript koda vstavljena med oznaki <script> in </script>


<script>
    document.getElementById("imeSpremenljivke").innerHTML = "Dobrodošli v JavaScript vadnici!";
</script>

Stari primeri lahko uporabljajo atribut tipa <script type="text/javascript">, ki ni več potreben. JavaScript je privzeti skriptni jezik v HTML. JavaScript funkcija je blok kode, ki se lahko izvede, ko je poklicana (ko pritisnemo na gumb). V HTML dokument lahko postavimo poljubno število skriptov. Skripte lahko postavimo v <body> ali v razdelek <head> HTML strani ali v oboje.

<body>	V tem primeru je funkcija postavljena v razdelek <body> strani HTML.	Glej primer
<head>	V tem primeru je funkcija postavljena v razdelek <head> strani HTML.	Glej primer
Skupaj	V tem primeru je funkcija postavljena tako v razdelek <body>, kot tudi v razdelek <head> strani HTML.	Glej primer
Zunanja datoteka	JavaScript koda je shranjena v ločeni .js datoteki in vključena preko src atributa.	Glej primer

JavaScript Sintaksa

JavaScript sintaksa predstavlja temeljna pravila za pisanje programske kode v JavaScript-u. Poznamo dve glavni vrsti vrednosti: fiksne vrednosti (literali) in spremenljive vrednosti (spremenljivke). Za deklaracijo spremenljivk uporabljamo moderne ključne besede let in const, medtem ko je var starejši način. Vrednosti spremenljivkam dodeljujemo z operatorjem dodelitve (=).

Literali	Fiksne vrednosti v kodi, kot so številke ali besedilo. So nespremenljive vrednosti, ki jih zapišemo neposredno v kodo.	Glej primer
Spremenljivke	Zabojniki za shranjevanje podatkov, katerih vrednost lahko spreminjamo med izvajanjem programa.	Glej primer

JavaScript ponuja bogat nabor operatorjev za različne operacije: aritmetične operatorje (+ - * /) za matematične izračune, operatorje primerjanja (== === != !== > < >= <=) za primerjave vrednosti, logične operatorje (&& || !) za logične operacije ter operator dodelitve (=) za določanje vrednosti spremenljivkam.

Operator	Opis
+	Seštevanje
-	Odštevanje
*	Množenje
**	Potenciranje
/	Delitev
%	Preostanek deljenja
++	Povečanje
--	Zmanjšanje

Operatorji	JavaScript uporablja aritmetične operatorje (+ - * /) za izračun vrednosti.	Glej primer

JavaScript program je sestavljen iz izrazov, ki so kombinacije vrednosti, spremenljivk in operatorjev. Vsak izraz se ovrednoti v določeno vrednost. Za boljšo berljivost kode uporabljamo komentarje, ki jih lahko zapišemo na dva načina: z dvojnimi poševnicami (//) za enovrstične komentarje ali med znakoma /* in */ za večvrstične komentarje. Pri poimenovanju spremenljivk, funkcij in drugih identifikatorjev v JavaScript-u veljajo naslednja pravila:

Ime se mora začeti s črko (a-z, A-Z), podčrtajem (_) ali znakom za dolar ($)
Nadaljnji znaki so lahko črke, številke, podčrtaji ali znak za dolar
JavaScript je občutljiv na velikost črk (case-sensitive)
Priporočena je uporaba camelCase zapisa (npr. mojaSpremenljivka, steviloUporabnikov)
Izogibati se moramo uporabi rezerviranih besed

Za konsistentno in berljivo kodo je priporočljiva uporaba spodnjega camelCase zapisa (imeSpremenljivke) za spremenljivke in funkcije ter zgornjega CamelCase (ImePriimek) za razrede.

JavaScript Izjave

JavaScript aplikacije so sestavljene iz stavkov (statements) z ustrezno sintakso. En stavek lahko obsega več vrstic, prav tako lahko v eni vrstici zapišemo več stavkov, če jih ločimo s podpičjem. JavaScript izjave so sestavljene iz vrednosti, operatorjev, izrazov, ključnih besed in komentarjev. Poznamo več vrst izjav, med najpomembnejše sodijo deklaracijske izjave za spremenljivke, funkcije in razrede. Te izjave se začnejo s ključno besedo, ki ji sledi identifikator (ime). JavaScript programi so sestavljeni iz več izjav, ki se izvajajo zaporedno - ena za drugo v vrstnem redu zapisa. Te izjave skupaj tvorijo JavaScript kodo. Za ločevanje izjav uporabljamo podpičje (;), ki ga dodamo na konec vsake izvršljive izjave. To omogoča jasno strukturo kode in preprečuje morebitne napake pri izvajanju.

Izjave	JavaScript izjave se izvajajo zaporedno, od zgoraj navzdol, v enakem vrstnem redu kot so zapisane v kodi.	Glej primer
Podpičje	Podpičje (;) je obvezen ločilni znak med JavaScript izjavami in omogoča jasno strukturo kode.	Glej primer
Prazen prostor	JavaScript interpretator ignorira odvečne presledke in prazne vrstice, kar omogoča lepše oblikovanje kode.	Glej primer
Dolžina vrstice in prelomi vrstic	Priporočena dolžina vrstice je do 80 znakov. Daljše izjave lahko prelomimo v več vrstic za boljšo berljivost.	Glej primer
Bloki kode	Bloki kode so skupine izjav, združenih z zavitimi oklepaji {..}. Uporabljajo se v funkcijah, zankah in pogojnih stavkih.	Glej primer