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>
        .section {
            background-color: white;
            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;
            color: #333333;
        }
        
        #clock {
            color: #333333;
        }
        
        button {
            cursor: pointer;
            padding: 6px 12px;
            background: #0066cc;
            color: #fff;
            border: none;
            border-radius: 4px;
        }
        button:hover {
            background: #004999;
            color: #fff;
        }
        
        #techList {
            color: #333333;
        }
        
        input, select {
            padding: 5px;
            margin-right: 5px;
            color: #333333;
        }
    </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

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.

Orodje	Tip	Opis
Urejevalniki besedila (preprosti)
Beležnica (Notepad)	Urejevalnik	Preprost urejevalnik v vseh OS. Brez poudarjanja sintakse in avtomatskega dopolnjevanja. Primeren za učenje osnov.
Notepad++	Urejevalnik	Brezplačen urejevalnik za Windows s poudarjanjem sintakse, zavihki in iskanjem/zamenjavo. Odličen za hitro urejanje.
Sublime Text	Urejevalnik	Hitri urejevalnik z večkurzorskim urejanjem, paleto ukazov in bogatim ekosistemom vtičnikov. Plačljiv (brezplačen za evalvacijo).
Urejevalniki kode (zmogljivi)
VS Code	Urejevalnik kode	Najpopularnejši brezplačen urejevalnik od Microsofta. IntellSense, vgrajen terminal, Git podpora, tisoči razširitev. Priporočljiv!
Atom	Urejevalnik kode	Odprtokodni urejevalnik od GitHuba. Paketi in teme, vgrajen Git. Arhiviran (ni več v aktivnem razvoju).
Brackets	Urejevalnik kode	Urejevalnik od Adobeja z Live Preview funkcijo. Fokusiran na spletni razvoj. Arhiviran.
Integrirana razvojna okolja (IDE)
PhpStorm	IDE	Profesionalen IDE od JetBrains za PHP, JavaScript, HTML/CSS. Globoko razumevanje kode, refaktoriranje, razhroščevanje. Plačljiv.
WebStorm	IDE	IDE od JetBrains specializiran za JavaScript in TypeScript. Inteligentno dopolnjevanje, testiranje, deploy. Plačljiv.
NetBeans	IDE	Brezplačen odprtokodni IDE za Java, PHP, HTML5 in JavaScript. Podpora za Maven, Gradle in Git.
Eclipse	IDE	Brezplačen odprtokodni IDE, primarno za Javo, z vtičniki za JavaScript in spletni razvoj.
Brskalniška orodja
Chrome DevTools	Brskalnik	Vgrajeno orodje v Chrome (F12). Konzola, razhroščevanje, profiliranje, Network, Elements. Nepogrešljivo!
Firefox Developer Tools	Brskalnik	Vgrajeno orodje v Firefox. Odličen CSS Inspector, Konzola, Network monitor in Performance orodja.

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>

Orodje / Metoda	Tip	Opis
V <head> (brez atributov)	Internal Script	Koda se naloži pred vsebino. Blokira prikaz strani, dokler se ne izvrši. Uporabno samo za definicije funkcij.
V <head> z <script defer>	External/Internal	Priporočeno! Koda se naloži v ozadju, izvrši pa šele, ko je HTML končan. Ne blokira prikaza.
▶ Primer kode
Zgoraj v <body>	Internal Script	Blokira prikaz vsebine pod njim. Redko uporabljeno, ker upočasni nalaganje strani.
Spodaj v <body> (pred </body>)	Internal Script	Zlati standard. HTML je že naložen, elementi so na voljo. Stran se hitro prikaže.
▶ Primer kode
<script src="file.js">	External Script	Najboljše za vzdrževanje in cache. Lahko se uporabi v <head> (z defer) ali na dnu <body>.
<script src="file.js" async>	External Script	Naloži se asinhrono, izvrši takoj, ko je naložen. Uporabno za analitiko, ne za logiko strani.
▶ Primer kode
onclick, onload, itd.	Inline Event	Ne priporočljivo! Meša logiko z dizajnom. Težko vzdrževanje. Uporabi samo za hitre teste.
▶ Primer kode

Hitri pregled: Komentiranje, Pojavno okno in Konzola

Spodnja tabela prikazuje osnovne načine komentiranja kode, vrste pojavnih oken za interakcijo z uporabnikom in metode konzole za razhroščevanje. Primeri v stolpcu "Primer" so pripravljeni za neposredno kopiranje v vašo kodo.

Lastnost/Metoda	Primer	Opis
Komentiranje
`// enovrstični komentar`	`// To je opomba`	Komentar v eni vrstici – brskalnik ga ignorira
`/* večvrstični */`	`/* To je daljši opis, ki sega čez več vrstic */`	Komentar čez več vrstic – uporaben za daljše opise
`/** JSDoc */`	`/** @param {string} ime - Ime uporabnika */`	Dokumentacijski komentar – uporabljajo ga IDE-ji za opis funkcij
▶ Primer kode
Pojavno okno (Dialog)
`alert()`	`alert("Pozdravljeni!");`	Prikaže pojavno okno s sporočilom in gumbom "V redu". Blokira izvajanje do klika.
`confirm()`	`confirm("Ali ste prepričani?");`	Prikaže okno z gumboma "V redu" in "Prekliči". Vrne `true` ali `false`.
`prompt()`	`prompt("Vnesite ime:", "Borut");`	Prikaže okno z vnosnim poljem. Vrne vneseno besedilo ali `null` ob preklicu.
▶ Primer kode
Konzola (console)
`console.log()`	`console.log("Sporočilo");`	Izpiše sporočilo v konzolo (najpogosteje uporabljeno za razhroščevanje)
`console.warn()`	`console.warn("Opozorilo!");`	Izpiše opozorilo (rumeno ozadje v konzoli)
`console.error()`	`console.error("Napaka!");`	Izpiše napako (rdeče ozadje v konzoli)
`console.info()`	`console.info("Informacija");`	Izpiše informativno sporočilo
`console.table()`	`console.table([{a:1}, {a:2}]);`	Izpiše podatke v obliki tabele (idealno za array-e in objekte)
`console.clear()`	`console.clear();`	Počisti konzolo
`console.time()`	`console.time("timer"); ... console.timeEnd("timer");`	Izmeri čas izvajanja kode med time() in timeEnd()
`console.group()`	`console.group("Skupina"); ... console.groupEnd();`	Združi izpise v zložljivo skupino v konzoli
▶ Primer kode

Osnovna Sintaksa

JavaScript ima preprosto sintakso, ki temelji na blokih kode, spremenljivkah in izjavah. Razumevanje osnovne sintakse je ključno za pisanje pravilne kode.

Koncept	Primer	Opis
Spremenljivke
`let`	`let x = 5;`	Deklarira spremenljivko, ki se lahko spremeni
`const`	`const PI = 3.14;`	Deklarira konstanto, ki se ne more spremeniti
`var`	`var old = "stara";`	Stara deklaracija (izogibaj se uporabi)
▶ Primer kode
Tipi podatkov
`String`	`let ime = "Borut";`	Besedilo v narekovajih
`Number`	`let starost = 52;`	Cela ali decimalna števila
`Boolean`	`let jeAktiven = true;`	Logična vrednost (true/false)
`Array`	`let barve = ["rdeča", "modra"];`	Seznam vrednosti
`Object`	`let oseba = {ime: "Borut"};`	Kolekcija ključ-vrednost
▶ Primer kode
Operatorji
`+`	`let vsota = 5 + 3;`	Prištevaj (ali združi stringe)
`- *`	`let razlika = 10 - 4;`	Odvzemi, pomnoži, deli
`===`	`if (x === 5) {...}`	Enako (tudi tip)
`!==`	`if (x !== 5) {...}`	Ni enako
▶ Primer kode

REZULTAT

Zanke (Loops)

Zanke omogočajo ponavljanje kode večkrat. To je ena najmočnejših funkcij programiranja – namesto da pišeš isto kodo 10-krat, jo zapišeš enkrat in jo zanko izvedeš 10-krat.

Zanka	Primer	Opis	Primer kode
For zanka
`for`	`for(let i=0; i<5; i++) {...}`	Osnovna zanka s števcem	▶ Primer kode
While zanka
`while`	`while(pogoj) {...}`	Ponavlja, dokler je pogoj resničen	▶ Primer kode
Do-While zanka
`do...while`	`do {...} while(pogoj);`	Izvede kodo vsaj enkrat, nato preveri pogoj	▶ Primer kode
Zanke za array-e in objekte
`for...of`	`for(let item of array) {...}`	Prenese vrednosti iz array-a	▶ Primer kode
`for...in`	`for(let key in object) {...}`	Prenese ključe iz objekta	▶ Primer kode
Switch Statement
`switch`	`switch(value) { case x: ... }`	Izbere eno izmed mnogih blokov kode za izvajanje	▶ Primer kode