Načrtovanje in razvoj spletnih aplikacij

Izpisi na zaslon v JavaScriptu

JavaScript nima vgrajenih funkcij za izpis oziroma prikaz, lahko pa podatke prikaže na različne načine:


window.alert()

Primer uporabe pojavnega okna:

<!DOCTYPE html>
<html>
<head>
  <title>Uporaba pojavnega okna</title>
</head>
<body>
  <p>Uporaba pojavnega okna z JavaScript:</p>
  <button type="button" onclick="window.alert('Uspešno si kliknil gumb!')">Klikni me</button>
</body>
</html

Uporaba pojavnega okna z JavaScript:

document.write()

Primer uporabe izpisa v HTML:

<!DOCTYPE html>
<html>
<head>
  <title>Izpis v HTML</title>
</head>
<body>
  <p>Primer izpisa z JavaScript v HTML:</p>
  <script>document.write("To besedilo se je izpisalo z JavaScript!")</script>
</body>
</html

Primer izpisa z JavaScript v HTML:

V primeru, da uporabimo metodo document.write(), ko se je stran že dokončno naložila, ta izbriše vso preostalo HTML kodo!

Če metodo document.write() uporabimo, ko se je stran že dokončno naložila, le ta izbriše vso preostalo vsebino HTML dokumenta.

Zato metodo document.write() uporabljamo le za testiranje!

 

<!DOCTYPE html>
<html>
<head>
  <title>Izpis v HTML</title>
</head>
<body>
  <p>Primer izpisa z JavaScript v HTML:</p>
  <button type="button" onclick="document.write('Uspešno si kliknil gumb!')">Klikni me</button>
</body>
</html

Primer izpisa z JavaScript v HTML:

innerHTML()

Za dostop do HTML elementa uporabimo JavaScript metodo document.getElementById(id). Pri tem id definira element HTML, lstnost innerHTML pa določa vsebino:

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

Primer izpisa z JavaScript v HTML element:

console.log()

V brskalniku lahko podatke prikažemo v konzolo z metodo console.log(). Konzolo v brskalnikih Chrome, Firefox in Internet Explorerju aktiviramo z F12, v Operi s tipkovno bližnjico Ctrl+Shift+I, v Safariju pa je najprej potrebno omogočiti prikaz orodij za razvijanje, kar storimo v nastavitvah Preferences... v zavihku Advanced, kjer potrdimo polje Show Develop menu in menu bar, zatem pa lahko konzolo prikličemo s tipkovno bljižnico Ctrl+Alt+C. V brskalniku Firefox namesto konzole lahko uporabimo različico, ki je namenjena razvijalcem, Firefox Developer.

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

Primer izpisa z JavaScript v konzolo brskalnika: