JavaScript -uitvoer
JavaScript-weergavemogelijkheden
JavaScript kan gegevens op verschillende manieren "weergeven":
- Schrijven in een HTML-element, met behulp van
innerHTML. - Schrijven naar de HTML-uitvoer met
document.write(). - Schrijven in een waarschuwingsvenster met
window.alert(). - Schrijven in de browserconsole met
console.log().
InnerHTML gebruiken
Om toegang te krijgen tot een HTML-element, kan JavaScript de document.getElementById(id)methode gebruiken.
Het idattribuut definieert het HTML-element. De innerHTML eigenschap definieert de HTML-inhoud:
Voorbeeld
<!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>
Het wijzigen van de eigenschap innerHTML van een HTML-element is een gebruikelijke manier om gegevens in HTML weer te geven.
Document.write() gebruiken
Voor testdoeleinden is het handig om te gebruiken document.write():
Voorbeeld
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<script>
document.write(5 + 6);
</script>
</body>
</html>
Als u document.write() gebruikt nadat een HTML-document is geladen, wordt alle bestaande HTML verwijderd :
Voorbeeld
<!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>
De methode document.write() mag alleen worden gebruikt voor testen.
Window.alert() gebruiken
U kunt een waarschuwingsvenster gebruiken om gegevens weer te geven:
Voorbeeld
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<script>
window.alert(5 + 6);
</script>
</body>
</html>
windowU kunt het trefwoord overslaan .
In JavaScript is het vensterobject het globale bereikobject, wat betekent dat variabelen, eigenschappen en methoden standaard bij het vensterobject horen. Dit betekent ook dat het opgeven van het windowtrefwoord optioneel is:
Voorbeeld
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<script>
alert(5 + 6);
</script>
</body>
</html>
console.log() gebruiken
Voor foutopsporingsdoeleinden kunt u de console.log()methode in de browser aanroepen om gegevens weer te geven.
In een later hoofdstuk leert u meer over debuggen.
Voorbeeld
<!DOCTYPE html>
<html>
<body>
<script>
console.log(5 + 6);
</script>
</body>
</html>
JavaScript afdrukken
JavaScript heeft geen printobject of printmethodes.
U hebt geen toegang tot uitvoerapparaten vanuit JavaScript.
De enige uitzondering is dat je de window.print()methode in de browser kunt aanroepen om de inhoud van het huidige venster af te drukken.
Voorbeeld
<!DOCTYPE html>
<html>
<body>
<button onclick="window.print()">Print this page</button>
</body>
</html>