Lastnosti in Metode JavaScript Niza: length

Lastnost length je zelo uporabna za določanje dolžine nizov in seznamov. Pri nizih vrne število znakov, pri seznamih pa število elementov. Ta lastnost je pogosto uporabljena v zankah, preverjanju pogojev in pri manipulaciji podatkov.

PRIMER

<!DOCTYPE html>
<html lang="sl">
<head>
    <meta charset="UTF-8">
    <title>length</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    
    <style>
        .demo-container {
            border: 1px solid magenta;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 15px;
        }
        .result {
            color: #2196F3;
            font-weight: bold;
            margin: 10px 0;
        }
        .code-example {
            padding: 10px;
            border-radius: 4px;
            font-family: monospace;
            margin: 10px 0;
        }
        .length-value {
            font-size: 1.2em;
            color: #4CAF50;
        }
        .practical-example {
            margin-top: 10px;
            padding: 10px;
            border-radius: 4px;
        }
    </style>
</head>
<body>
    <div class="demo-container">
        <h3>Dolžina niza</h3>
        <div class="code-example">const niz = "Dobrodošli v JavaScript vadnico!";</div>
        <div id="nizPrimer"></div>
        <div class="practical-example">
            <strong>Praktična uporaba:</strong>
            <div class="code-example">
// Preverjanje dolžine gesla
if (geslo.length < 8) {
    console.log("Geslo mora biti dolgo vsaj 8 znakov!");
}
            </div>
        </div>
    </div>

    <div class="demo-container">
        <h3>Dolžina seznama</h3>
        <div class="code-example">const sadje = ["Jabolka", "Hruške", "Jagode", "Borovnice", "Banane"];</div>
        <div id="seznamPrimer"></div>
        <div class="practical-example">
            <strong>Praktična uporaba:</strong>
            <div class="code-example">
// Izpis zadnjega elementa seznama
const zadnjiElement = sadje[sadje.length - 1];
// Preverjanje ali je seznam prazen
if (sadje.length === 0) {
    console.log("Seznam je prazen!");
}
            </div>
        </div>
    </div>

    <div class="demo-container">
        <h3>Dolžina objekta</h3>
        <div class="code-example">const objekt = { ime: "Janez", priimek: "Novak", starost: 30 };</div>
        <div id="objektPrimer"></div>
        <div class="practical-example">
            <strong>Praktična uporaba:</strong>
            <div class="code-example">
// Štetje lastnosti objekta
const steviloLastnosti = Object.keys(objekt).length;
            </div>
        </div>
    </div>

<script>
    // Primer z nizom
    const niz = "Dobrodošli v JavaScript vadnico!";
    document.getElementById("nizPrimer").innerHTML = `
        <div class="result">
            Niz vsebuje <span class="length-value">${niz.length}</span> znakov
        </div>
        <div class="code-example">// Dostop do znakov: niz[0] do niz[${niz.length-1}]</div>
        <div class="result">
            Prvi znak: "${niz[0]}", Zadnji znak: "${niz[niz.length-1]}"
        </div>
    `;

    // Primer s seznamom
    const sadje = ["Jabolka", "Hruške", "Jagode", "Borovnice", "Banane"];
    document.getElementById("seznamPrimer").innerHTML = `
        <div class="result">
            Seznam vsebuje <span class="length-value">${sadje.length}</span> elementov
        </div>
        <div class="code-example">// Dostop do elementov: sadje[0] do sadje[${sadje.length-1}]</div>
        <div class="result">
            Prvi element: "${sadje[0]}", Zadnji element: "${sadje[sadje.length-1]}"
        </div>
    `;

    // Primer z objektom
    const objekt = { ime: "Janez", priimek: "Novak", starost: 30 };
    const steviloLastnosti = Object.keys(objekt).length;
    document.getElementById("objektPrimer").innerHTML = `
        <div class="result">
            Objekt vsebuje <span class="length-value">${steviloLastnosti}</span> lastnosti
        </div>
        <div class="code-example">// Lastnosti objekta: ${Object.keys(objekt).join(", ")}</div>
    `;
</script>
</body>
</html>

REZULTAT