Kleiner JavaScript Kurs

Ein- und Ausgaben

In den ersten Beispielen haben wir schon die Ausgabe in einem eigenen Fenster alert() kennen gelernt.
Meist wird man Ein- und Ausgaben aber über HTML Elemente vornehmen:

Eingabe z.B. mit <input type="text" id="meinEingabefeld_a" /> Wichtig: jedes Element, dass über JavaScript angesprochen werden soll, benötigt eine id ! Im JavaScript Programm wird der Eingabewert des Feldes mit
var a=document.getElementById('meinEingabefeld_a').value; der Variablen a zugewiesen. Achtung:
Ausgabe z.B. mit <h3 id="meinAusgabefeld">Fläche a*b =</h3> Im JavaScript Programm wird der Ausgabegabewert dem Feld mit
var Ausgabe=document.getElementById('meinAusgabefeld'); Ausgabe.innerHTML = "Fläche a*b = " + a*b; zugewiesen.
<html> <head> <title>JavaScript Kurs; Ein- und Ausgaben</title> <script type="text/javascript"> function Flaechenberechnung(){ var a=document.getElementById('meinEingabefeld_a').value; var b=document.getElementById('meinEingabefeld_b').value; var Ausgabe=document.getElementById('meinAusgabefeld'); Ausgabe.innerHTML = "Fläche a*b = " + a*b; } </script> </head> <body> <h1>JavaScript Kurs; Ein- und Ausgaben</h1> <h2>Berechnung der Fläche eines Rechtecks mit den Seiten a und b; Fläche=a*b</h2> <!-- Eingabefelder auf HTML Seite; ID=meinEingabefeld_a und ID=meinEingabefeld_b --> Seite a: <input type="text" id="meinEingabefeld_a" /> Seite b: <input type="text" id="meinEingabefeld_b" /> <!-- Schaltfläche auf HTML Seite; onclick Ereignis startet JavaScript --> <input type="submit" value="Berechnen" onclick="Flaechenberechnung();" /> <br> <!-- Ausgabe auf HTML Seite; ID=meinAusgabefeld--> <h3 id="meinAusgabefeld">Fläche a*b =</h3> </body> </html>

So könnte es aussehen: JS_Kurs_B03.html