JavaScript Razredi: Uporaba razreda

V tem poglavju gremo čez praktično uporabo razredov: kako nastaviti lastnosti v konstruktorju, klicati metode instanc, uporabiti statične metode kot “utility”, definirati getter in setter ter skriti podatke z zasebnimi polji (#).
PRIMER
<!DOCTYPE html>
<html lang="sl">
<head>
    <meta charset="UTF-8">
    <title>Uporaba razreda – konstruktor, metode, static, getter/setter, zasebna polja</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    
    <style>
        body {
            font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
            padding: 20px;
            line-height: 1.45;
        }
        .primer {
            border: 1px solid #ccc;
            border-radius: 8px;
            padding: 15px;
            margin-bottom: 25px;
        }
        .primer h2 { 
            margin-top: 0; 
        }
        .izpis {
            margin-top: 10px;
            white-space: pre-wrap;
            line-height: 1.5;
        }
        code {
            padding: 1px 6px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
    </style>
</head>
<body>
    <div class="primer" id="primer1">
        <h2>Primer 1 – konstruktor in lastnosti</h2>
        <p>Koda: <code>class Oseba { constructor(ime, priimek) { this.ime = 
        ime; this.priimek = priimek; } }</code></p>
        <div class="izpis" id="izpis1"></div>
    </div>
    
    <div class="primer" id="primer2">
        <h2>Primer 2 – metoda instance</h2>
        <p>Koda: <code>polnoIme() { return (this.ime + " " + this.priimek).trim(); }</code></p>
        <div class="izpis" id="izpis2"></div>
    </div>
    
    <div class="primer" id="primer3">
        <h2>Primer 3 – statična metoda</h2>
        <p>Koda: <code>static izNiza(niz) { const [ime, priimek] = niz.split(" "); 
        return new Oseba(ime, priimek); }</code></p>
        <div class="izpis" id="izpis3"></div>
    </div>
    
    <div class="primer" id="primer4">
        <h2>Primer 4 – getter in setter</h2>
        <p>Koda: <code>get polnoIme() { ... } set polnoIme(v) { ... }</code></p>
        <div class="izpis" id="izpis4"></div>
    </div>
    
    <div class="primer" id="primer5">
        <h2>Primer 5 – zasebno polje (#)</h2>
        <p>Koda: <code>#geslo; preveriGeslo(vnos) { return this.#geslo === vnos; }</code></p>
        <div class="izpis" id="izpis5"></div>
    </div>

    <script>
    // Primer 1
    {
        class Oseba {
            constructor(ime, priimek) {
                this.ime = ime ?? "";
                this.priimek = priimek ?? "";
                this.aktivna = true;
            }
        }
        
        const a = new Oseba("Ana", "Kranjc");
        a.aktivna = false; // sprememba lastnosti po ustvarjanju
        
        document.getElementById("izpis1").textContent = "Ustvarjena oseba: " + JSON.stringify(a);
    }
        
    // Primer 2
    {
        class Oseba {
            constructor(ime, priimek) {
                this.ime = ime ?? "";
                this.priimek = priimek ?? "";
            }
            polnoIme() {
                return (this.ime + " " + this.priimek).trim();
            }
            spremeniPriimek(novi) {
                this.priimek = novi ?? this.priimek;
            }
        }
        
        const b = new Oseba("Borut", "Bukovnik");
        const pred = b.polnoIme();
        b.spremeniPriimek("Programer");
        const po = b.polnoIme();
        document.getElementById("izpis2").textContent = "Pred spremembo: " + pred + "\n" + "Po spremembi:  " + po;
    }
        
    // Primer 3
    {
        class Oseba {
            constructor(ime, priimek) {
                this.ime = ime ?? "";
                this.priimek = priimek ?? "";
            }
            static izNiza(niz) {
                const [ime = "", priimek = ""] = (niz ?? "").split(" ");
                return new Oseba(ime, priimek);
            }
        }
        
        const c = Oseba.izNiza("Maja Novak");
        document.getElementById("izpis3").textContent = "Ustvarjeno s statično metodo: " + JSON.stringify(c);
    }
        
    // Primer 4
    {
        class Oseba {
            constructor(ime, priimek) {
                this.ime = ime ?? "";
                this.priimek = priimek ?? "";
            }
            get polnoIme() {
                return (this.ime + " " + this.priimek).trim();
            }
            set polnoIme(vrednost) {
                const deli = (vrednost ?? "").trim().split(/\s+/);
                this.ime = deli[0] ?? this.ime;
                this.priimek = deli.slice(1).join(" ") || this.priimek;
            }
        }
        
        const d = new Oseba("Eva", "K.");
        const pred = d.polnoIme;
        d.polnoIme = "Eva Kralj";
        const po = d.polnoIme;
        document.getElementById("izpis4").textContent = 
            "Getter (pred): " + pred + "\n" + "Setter -> Getter (po): " + po;
    }
        
    // Primer 5
    {
        class Uporabnik {
            #geslo; // zasebno polje – dostopno samo znotraj razreda
            constructor(uporabniskoIme, geslo) {
                this.uporabniskoIme = uporabniskoIme ?? "";
                this.#geslo = geslo ?? "";
            }
            preveriGeslo(vnos) {
                return this.#geslo === (vnos ?? "");
            }
            spremeniGeslo(staro, novo) {
                if (this.preveriGeslo(staro)) {
                    this.#geslo = novo ?? this.#geslo;
                    return true;
                }
                return false;
            }
        }
        
        const u = new Uporabnik("borut", "skrivnost");
        let izhod = "";
        izhod += "Pravilno geslo? " + u.preveriGeslo("skrivnost") + "\n";
        izhod += "Poskus dostopa do zasebnega polja (u.#geslo) povzroči napako – v tem primeru ga ne kličemo.\n";
        izhod += "Sprememba gesla: " + (u.spremeniGeslo("skrivnost", "novoGeslo") ? "OK" : "NAPAKA") + "\n";
        izhod += "Preveri novo geslo: " + u.preveriGeslo("novoGeslo");
        document.getElementById("izpis5").textContent = izhod;
    }
    </script>
</body>
</html>
REZULTAT