JavaScript Output

JavaScript biedt geen ingebouwde print- of weergavefuncties.

JavaScript weergaveplannen

JavaScript kan gegevens op verschillende manieren "weergeven":

  • Gebruik window.alert() Schrijf naar een waarschuwingsscherm
  • Gebruik document.write() Schrijf naar HTML-uitvoer
  • Gebruik innerHTML Schrijf naar HTML-element
  • Gebruik console.log(); Schrijf naar de browserconsole

Gebruik innerHTML

Om HTML-elementen te benaderen, kan JavaScript het volgende gebruiken: document.getElementById(id) Methode.

id Eigenschappen definiëren HTML-elementen. De innerHTML-eigenschap definieert de HTML-inhoud:

Voorbeeld

<!DOCTYPE html>
<html>
<body>
<h1>Mijn eerste webpagina</h1>
<p>Mijn eerste paragraaf</p>
<p id="demo"></p>
<script>
 document.getElementById("demo").innerHTML = 5 + 6;
</script>
</body>
</html>

Probeer het zelf

Tip:Het wijzigen van de innerHTML-eigenschap van een HTML-element is een veelgebruikte manier om gegevens in HTML weer te geven.

Gebruik document.write()

Voor testdoeleinden document.write() is gemakkelijk:

Voorbeeld

<!DOCTYPE html>
<html>
<body>
<h1>Mijn eerste webpagina</h1>
<p>Mijn eerste paragraaf</p>
<script>
document.write(5 + 6);
</script>
</body>
</html>

Probeer het zelf

Let op:na de volledige laden van het HTML-document document.write() GebruikVerwijder alle bestaande HTML :

Voorbeeld

<!DOCTYPE html>
<html>
<body>
<h1>Mijn eerste webpagina</h1>
<p>Mijn eerste paragraaf</p>
<button onclick="document.write(5 + 6)">Probeer het zelf</button>
</body>
</html>

Probeer het zelf

Tip:document.write() Methoden zijn alleen voor testdoeleinden.

Gebruik window.alert()

U kunt een waarschuwingsscherm gebruiken om gegevens weer te geven:

Voorbeeld

<!DOCTYPE html>
<html>
<body>
<h1>Mijn eerste webpagina</h1>
<p>Mijn eerste paragraaf</p>
<script>
window.alert(5 + 6);
</script>
</body>
</html>

Probeer het zelf

Gebruik console.log()

In de browser kunt u console.log(); Methoden om gegevens weer te geven.

Activeer de browserconsole via F12 en selecteer "Console" in het menu.

Voorbeeld

<!DOCTYPE html>
<html>
<body>
<h1>Mijn eerste webpagina</h1>
<p>Mijn eerste paragraaf</p>
<script>
console.log(5 + 6);
</script>
</body>
</html>

Probeer het zelf