Výstup JavaScriptu

Obsah

    Zobrazit obsah

Možnosti zobrazení JavaScriptu

JavaScript může „zobrazovat“ data různými způsoby:

  • Zápis do prvku HTML pomocí innerHTML.

  • Zápis do výstupu HTML pomocí document.write().

  • Zápis do pole upozornění pomocí window.alert().

  • Zápis do konzole prohlížeče pomocí console.log().

Pomocí vnitřního HTML

Pro přístup k prvku HTML může JavaScript použít metodu document.getElementById(id).

Atribut id definuje prvek HTML. Vlastnost innerHTML definuje obsah HTML:

Příklad

<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>
 <p>My First Paragraph</p>
    
<p id="demo"></p>

<script>
 document.getElementById("demo").innerHTML = 5 + 6;
    </script>

</body>
</html>

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>

<h2>My First Web Page</h2>
<p>My First Paragraph.</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = 5 + 6;
</script>

</body>
</html>

Změna vlastnosti innerHTML prvku HTML je běžný způsob zobrazení dat v HTML.

Pomocí document.write()

Pro účely testování je vhodné použít document.write():

Příklad

<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
 <p>My first paragraph.</p>
 
<script>
document.write(5 + 6);
</script>

</body>
</html>

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>

<h2>My First Web Page</h2>
<p>My first paragraph.</p>

<p>Never call document.write after the document has finished loading.
It will overwrite the whole document.</p>

<script>
document.write(5 + 6);
</script>

</body>
</html>

Použití document.write() po načtení dokumentu HTML smaže veškerý existující kód HTML:

Příklad

<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>
 <p>My first paragraph.</p>

<button type="button" onclick="document.write(5 + 6)">Try it</button>

</body>
</html>

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>

<h2>My First Web Page</h2>
<p>My first paragraph.</p>

<button type="button" onclick="document.write(5 + 6)">Try it</button>

</body>
</html>

Metoda document.write() by se měla používat pouze pro testování.

Pomocí window.alert()

K zobrazení údajů můžete použít výstražné pole:

Příklad

<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>
<p>My first paragraph.</p>
 
<script>
window.alert(5 + 6);
</script>

</body>
</html>

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>

<h2>My First Web Page</h2>
<p>My first paragraph.</p>

<script>
window.alert(5 + 6);
</script>

</body>
</html>

Klíčové slovo window můžete přeskočit.

V JavaScriptu je objekt okna objektem globálního rozsahu. To znamená, že proměnné, vlastnosti a metody standardně patří do objektu okna. To také znamená, že zadání klíčového slova window je nepovinné:

Příklad

<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>
<p>My first paragraph.</p>
 
<script>
alert(5 + 6);
</script>

</body>
</html>

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>

<h2>My First Web Page</h2>
<p>My first paragraph.</p>

<script>
alert(5 + 6);
</script>

</body>
</html>

Pomocí console.log()

Pro účely ladění můžete zavolat metodu console.log() v prohlížeči pro zobrazení dat.

Více o ladění se dozvíte v další kapitole.

Příklad

<!DOCTYPE html>
<html>
<body>
 
<script>
console.log(5 + 6);
</script>

</body>
</html>

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>

<h2>Activate Debugging</h2>

<p>F12 on your keyboard will activate debugging.</p>
<p>Then select "Console" in the debugger menu.</p>
<p>Then click Run again.</p>

<script>
console.log(5 + 6);
</script>

</body>
</html>

JavaScript tisk

JavaScript nemá žádný objekt tisku ani metody tisku.

Z JavaScriptu nemáte přístup k výstupním zařízením.

Jedinou výjimkou je, že můžete volat metodu window.print() v prohlížeč vytiskne obsah aktuálního okna.

Příklad

<!DOCTYPE html>
<html>
<body>

<button onclick="window.print()">Print this page</button>

</body>
</html>

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>

<h2>The window.print() Method</h2>

<p>Click the button to print the current page.</p>

<button onclick="window.print()">Print this page</button>

</body>
</html>