Datenausgabe mit JavaScript

Das „Window-Alert“ ist eine möglichkeit der Datenausgabe. Es erzeugt ein kleines Dialogfenster auf dem Bildschirm. Es unterbricht den Ablauf eines Programmes bis dieses mit „OK“  oder einer Eingabe bestätigt wird.

				
					 <!DOCTYPE html>
<html>
<body>

<p>Die "Window-Alert"-Ausgabe</p>

<script>
function WindowAlert()
{
    alert("Hallo");
}
</script>

<button class="myButton" type="button" onclick="WindowAlert()">Klick</button>

</body>
</html> 
				
			

Die "Window-Alert"-Ausgabe

Das „window.write“ ist ebenfalls eine Möglichkeit der Datenausgabe. In unserem Beispiel unten wird mit der Funktion ‚window.open()‘ eine neue Seite angelegt und in der Konstanten ‚myWindow‘ gespeichert, anschliessend wird mit ‚document.write(„Hallo“) der String ‚Hallo‘ auf der neue angelegten Seite ausgeben.

				
					 <!DOCTYPE html>
<html>
<body>

<p>Die "document.write"-Ausgabe.</p>

<button class="myButton" type="button" onclick="documentWrite()">Klick</button>

<script>
function documentWrite() {
  const myWindow = window.open();
  myWindow.document.write("Hallo");
}
</script>



</body>
</html> 
				
			

Die "document.write"-Ausgabe.

Um auf ein HTML-Element mit einem  eindeutigen id-Attribut zuzugreifen verwendet Javascript ‚document.getElementById(„…..“) -Methode. Die ‚innerHTML‘ -Eigenschaft definiert den Inhalt der Ausgabe.

				
					 <!DOCTYPE html>
<html>
<body>

<p>Die "inner.HTML"-Ausgabe.</p>

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

<script>
function inner_HTML(){
document.getElementById("demo").innerHTML = 1 + 2;
}
</script>

<button class="myButton" type="button" onclick="inner_HTML()">Klick</button>
</body>
</html> 

				
			

Die "inner.HTML"-Ausgabe.

Um den Javascript-Code zu debuggen wird die Funktion console.log() verwendet. Die Daten werden im Browser unter ‚Entwicklertools‘ angezeigt. Die Ausgabe siehe unten im Bild.

				
					 <!DOCTYPE html>
<html>
<body>

<script>
function console_log(){
console.log("Hallo");
}
</script>
<p>Die "console.log"-Ausgabe.</p>

<button class="myButton" type="button" onclick="console_log()">Klick</button>

</body>
</html> 
				
			

Die "console.log"-Ausgabe.