Izpisi na zaslon v JavaScriptu

JavaScript nima ene same “ukazne” funkcije za izpis, temveč lahko podatke prikaže na več različnih načinov. Izbira načina je odvisna od tega, komu je izpis namenjen: uporabniku v dokumentu, uporabniku v pogovornem oknu ali razvijalcu v razvojni konzoli.

Primerjave

`window.alert()`

Metoda window.alert() prikaže pogovorno okno z obvestilom. Tak način je primeren za preproste učne primere ali kratka opozorila, ni pa najboljša izbira za sodobne uporabniške vmesnike.

<!DOCTYPE html>
<html>
<head>
  <title>Uporaba pogovornega okna</title>
</head>
<body>
  <p>Uporaba pogovornega okna z JavaScript:</p>
  <button type="button" onclick="window.alert('Gumb je bil kliknjen!')">Klikni me</button>
</body>
</html>

Uporaba pogovornega okna z JavaScript:

`textContent`

Če želimo v element zapisati navadno besedilo, je pogosto najprimernejša lastnost textContent. Ta vsebino obravnava kot besedilo in ne kot oznake HTML.

<!DOCTYPE html>
<html>
<head>
  <title>Izpis z lastnostjo textContent</title>
</head>
<body>
  <p>Primer izpisa v element:</p>
  <p id="primer"></p>
  <script>
    document.getElementById("primer").textContent = "To besedilo se je izpisalo z JavaScript.";
  </script>
</body>
</html>

Primer izpisa v element:

`innerHTML`

Lastnost innerHTML uporabimo, kadar želimo v element vstaviti vsebino, ki vsebuje tudi oznake HTML. Zato je uporabna, kadar želimo ustvariti bolj oblikovan izpis.

<!DOCTYPE html>
<html>
<head>
  <title>Izpis z lastnostjo innerHTML</title>
</head>
<body>
  <p>Primer izpisa v element:</p>
  <p id="primerHtml"></p>
  <script>
    document.getElementById("primerHtml").innerHTML = "<strong>To besedilo</strong> vsebuje tudi oznake HTML.";
  </script>
</body>
</html>

Primer izpisa v element:

Pomni: Pri izpisu v dokument najprej razmisli, ali želiš vstaviti navadno besedilo ali kodo HTML. Za navadno besedilo je praviloma primernejši textContent, za oznake HTML pa innerHTML.

Pozor: Lastnost innerHTML obravnava vsebino kot kodo HTML. Če vanjo vstavljamo nepregledane ali nezanesljive podatke, lahko to povzroči varnostne težave, na primer napade vrste XSS.

`console.log()`

Metoda console.log() izpiše podatke v razvojno konzolo brskalnika. Ta način je zelo uporaben pri razhroščevanju, preverjanju vrednosti spremenljivk in spremljanju izvajanja programa.

<!DOCTYPE html>
<html>
<head>
  <title>Izpis v konzolo brskalnika</title>
</head>
<body>
  <p>Primer izpisa v konzolo:</p>
  <script>
    console.log("To besedilo se je izpisalo v konzolo.");
  </script>
</body>
</html>

Primer izpisa v konzolo brskalnika:

`document.write()`

Metoda document.write() je danes zastarela in je v sodobni kodi praviloma ne uporabljamo. Še vedno jo lahko srečamo v starejših primerih, vendar ni primerna kot priporočeni način izpisa.

<script>
document.write("To je starejši način izpisa.");
</script>

Pozor: Če metodo document.write() uporabimo po tem, ko je dokument že naložen, lahko prepiše obstoječo vsebino strani. Zato je v sodobni praksi ne priporočamo.

Priporočila

Za navadno besedilo v elementih praviloma uporabljaj textContent.
innerHTML uporabljaj takrat, ko res želiš vstaviti oznake HTML.
console.log() uporabljaj za razhroščevanje in preverjanje poteka izvajanja programa.
window.alert() uporabljaj le za preprosta obvestila ali učne primere.
Metode document.write() v sodobni kodi ne uporabljaj kot priporočene rešitve.

Pomni: Za uporabniški vmesnik je običajno najprimernejši izpis v element dokumenta, za razhroščevanje pa izpis v konzolo z metodo console.log().

Zanimivost: Console API je standardiziran posebej, ECMAScript 2025 pa je aktualna letna izdaja standarda jezika.

Nazaj

Naprej