Kleiner JavaScript Kurs

Ein- und Ausgaben in einem Meldungsfenster

1. Ausgabe 

window.alert("Herzlich Willkommen");

Der Text, oder das Ergebnis einer Formel wird angezeigt; Verknüpfung von Texten mit +

2. Eingabe

var name=window.prompt("Wie heisst du?");

Der eingegebene Text wird der Variablen (hier "name") zugewiesen.

3. Entscheidung

var antwort=window.confirm("weiter?");

Wird OK angeklickt, ist die Variable (hier "antwort") true, bei Abbrechen false.

Ein- und Ausgaben über Elemente auf der HTML - Seite

Meist wird man Ein- und Ausgaben ü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:

  • auf Gross- und Kleinschreibung achten
  • jede Befehlszeile wird mit einem Semikolon ; abgeschlossen
  • Variable (z.B. "a" s.o. oder "Ausgabe" s.u.) müssen bei ihrer ersten Verwendung mit var bzw. (neuer) let deklariert werden z.B.: 
    var a=document.getElementById('meinEingabefeld_a').value;
let Ausgabe=document.getElementById('meinAusgabefeld');
    let ist die neuere und "härter" definiertere Variante. Z.B. führt eine zweite Definition der gleichen Variablen mit let zu einem Fehler.
Ausgabe z.B. mit 
<h4 id="meinAusgabefeld">Fläche a*b =</h4>
Im JavaScript Programm wird der Ausgabegabewert dem Feld mit
var Ausgabe=document.getElementById('meinAusgabefeld');
Ausgabe.innerHTML = "Fläche a*b = " + a*b;
zugewiesen. 
<!DOCTYPE html>
<html lang="de">
    <head>
        <meta charset="utf-8">
        <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="button" value="Berechnen" onclick="Flaechenberechnung();" />
        <br>
         <!-- Ausgabe auf HTML Seite; ID=meinAusgabefeld-->
        <h4 id="meinAusgabefeld">Fläche a*b =</h4>
    </body>
</html>

So könnte es aussehen: JS_Kurs_B03.html

Einige Aufgaben zum Download: Aufgaben

Außer über die id kann man auf HTML Elemente auch über den Tag, die Klasse (class="") oder den Namen (name="") zugreifen.

id

element=document.getElementById("ID-Name");

Tag

element=document.getElementsByTagName("html-Tag");

Class

element=document.getElementsByClassName("Class-Name");

Name

element=document.getElementsByName("Name");