a =
b =
???
In HTML gibt es verschiedene Elemente, um Formulare zu erzeugen. Die wichtigsten sind:
Typ | Aussehen | Code | Funktionsweise |
---|---|---|---|
Text | <input type="text">
| Ein Feld zum Eingeben von Text. | |
Number | <input type="number">
| Ein Feld zum Eingeben von ganzen Zahlen. | |
Password | <input type="password">
| Ein Feld zum Eingeben eines Passworts. | |
Date | <input type="date">
| Ein Feld zum Eingeben eines Datums. | |
Color | <input type="color">
| Ein Feld zum Eingeben einer Farbe. | |
Checkbox | Ja? | <input type="checkbox"> Ja?
| Ein Feld zum Ankreuzen. |
Radio | Option 1 Option 2 | <input type="radio" name="auswaehlen"> Option 1 <input type="radio" name="auswaehlen"> Option 2 | Ein Feld, um eine von mehreren Optionen auszuwählen. |
Button | <button>Tu was!</button> | Ein Knopf, der u.a. mit JavaScript programmiert werden kann. |
<html> <head> <title>Formular1</title> </head> <body> <p> Mein Name ist <input type="text">. </p> <p> Ich bin geboren am <input type="date"> und ich bin <input type="number"> Jahre alt. </p> <p> Meine Password für WTKEdu ist <input type="password">. </p> <p> Meine Lieblingsfarbe ist <input type="color">. </p> <p> <input type="checkbox"> Ich mag Spaghetti Bolognese. </p> <p> <input type="radio" name="fussball"> Ich spiele gerne Fußball.<br/> <input type="radio" name="fussball"> Ich hasse Fußball.<br/> <input type="radio" name="fussball"> Fußball ist mir egal. </p> </body> </html>
Natürlich bringt uns dieses Formular erst mal gar nichts, da wir die Daten bis jetzt noch nicht verarbeiten können. Hier kommt JavaScript ins Spiel.
Buttons können verschiedene Aktionen ausführen, wie z.B. die +-*/
-Buttons oben im Taschenrechner.
Hierzu muss man dem Button sagen, welche Aktion er ausführen soll, wenn er angeklickt wird:
<button onclick="tuWasTolles()">Text des Buttons</button>
Anschließend muss man im JavaScript-Bereich nur noch eine Funktion mit dem gleichen Namen definieren:
<script> function tuWasTolles() { alert("Hallo, Welt!"); } </script>
Das sieht dann am Ende so aus:
- Erstellt eine neue HTML-Datei buttons.html und füllt sie mit dem HTML-Grundgerüst.
- Erstellt danach das folgende Formular:
<html> <head> <title>Formular1</title> </head> <body> <p><button onclick="begruessung()">Begrüßung</button></p> <p><button onclick="mottoDesTages()">Motto des Tages</button></p> <p><button onclick="antwortAufAlles()">Antwort auf alles</button></p> <script> function begruessung() { alert("Hallo!"); } function mottoDesTages() { alert("Brote sind verglichen mit Bananen grüner als nachts!"); } function antwortAufAlles() { alert("42"); } </script> </body> </html>
Jetzt wird es spannend. Was, wenn wir Formulare und Buttons miteinander in Verbindung bringen möchten? Ich möchte z.B. ein Programm schreiben, das mein Alter berechnet, wenn ich mein Geburtsjahr eingebe.
Das fertige Programm könnte z.B. so funktionieren:
Mein Geburtsjahr ist .
Gute Frage...
Das Formular dazu könnte z.B. so aussehen:
Mein Geburtsjahr ist <input type="number" id="geburtsjahr">. <button onclick="wieAlt()">Wie alt bin ich?</button>
Wie ihr eben gelernt habt, müsste der JavaScript-Code dann mindestens so aussehen:
<script> function wieAlt() { alert("Keine Ahnung..."); } </script>
Nun gilt es noch, den Code mit Leben zu füllen, da er noch nicht funktioniert. Wie ihr vielleicht schon bemerkt habt, hat das Eingabefeld im Formular ein ID-Attribut. Hiermit können wir den eigegebenen Text auslesen:
let alterAlsText = document.getElementById('geburtsjahr').value; debugger;
Wenn ihr das eingebt und die Seite mit dem Inspektor öffnet, bekommt ihr folgendes angezeigt: Wie ihr seht, ist das noch keine Zahl, sondern eine Zeichenkette. Diese müssen wir zuerst in eine Zahl verwandeln, bevor wir das Alter ausrechnen können:
let alterAlsText = document.getElementById('geburtsjahr').value; let alterAlsZahl = parseInt(alterAlsText); let alter = 2021 - alterAlsZahl; debugger;
Auch diesen Code könnt ihr einmal mit dem Inspektor begutachten: Ihr seht, dass alterAlsZahl
nun eine Zahl ist (die Gänsefüßchen fehlen), und dass das Alter korrekt ausgerechnet wurde. Nun müssen wir das Ergebnis nur noch anzeigen, und fertig ist unser erstes JavaScript-Programm:
alert("Du feierst dieses Jahr deinen " + alter + ". Geburtstag!");
Schön wäre es noch, wenn das Ergebnis nicht als Dialog angezeigt werden würde, sondern als Text unterhalb des Buttons. Fügt folgenden HTML-Code nach dem Button ein:
<p id="alter">Gute Frage...</p>
Auch hier ist es wieder wichtig, dass das Element ein id
-Attribut bekommen hat. Auf dieses können wir wieder mit JavaScript zugreifen. Ersetze den alert(…)
-Aufruf mit folgendem Code:
document.getElementById('alter').innerText = "Du feierst dieses Jahr deinen " + alter + ". Geburtstag!";
Und fertig ist unser Programm.
- Erstellt eine neue HTML-Datei formular2.html und füllt sie mit dem HTML-Grundgerüst.
-
- Das erste Eingabefeld soll die ID
zahlA
haben, das zweite die IDzahlB
. - Die Buttons sollen die Funktionen
addieren()
,subtrahieren()
,multiplizieren()
bzw.dividieren()
aufrufen. - Der Absatz mit den Fragezeichen soll die ID
ergebnis
haben.
- Programmiert die Funktionen für die vier Buttons jeweils so:
- Sie lesen die Texte aus den beiden Eingabefeldern aus.
- Sie konvertieren die Zeichenketten jeweils mit
parseInt(…)
in eine Zahl. - Sie berechnen das jeweilige Ergebnis (Addition, Subtraktion, Multiplikation und Division).
- Sie geben das Ergebnis aus.
<html> <head> <title>Formular1</title> </head> <body> <p>a = <input type="number" id="zahlA" value="1" /></p> <p>b = <input type="number" id="zahlB" value="2" /></p> <p> <button onclick="addieren()">+</button> <button onclick="subtrahieren()">-</button> <button onclick="multiplizieren()">*</button> <button onclick="dividieren()">/</button> </p> <p id="ergebnis">???</p> <script> function addieren () { let a = parseInt(document.getElementById('zahlA').value); let b = parseInt(document.getElementById('zahlB').value); let c = a + b; document.getElementById('ergebnis').innerText = 'a + b = ' + c; } function subtrahieren () { let a = parseInt(document.getElementById('zahlA').value); let b = parseInt(document.getElementById('zahlB').value); let c = a - b; document.getElementById('ergebnis').innerText = 'a - b = ' + c; } function multiplizieren () { let a = parseInt(document.getElementById('zahlA').value); let b = parseInt(document.getElementById('zahlB').value); let c = a * b; document.getElementById('ergebnis').innerText = 'a * b = ' + c; } function dividieren () { let a = parseInt(document.getElementById('zahlA').value); let b = parseInt(document.getElementById('zahlB').value); let c = a / b; document.getElementById('ergebnis').innerText = 'a / b = ' + c; } </script> </body> </html>
- Schreibe ein Programm zur Umrechnung zwischen Euro und Dollar:
- Schreibe ein Programm zur Umrechnung zwischen Temperaturen in °C, °K und °F.
- Schreibe ein Programm zur Berechnung des BMI.
Euro-Dollar
<html> <head> <title>Euro -> Dollar</title> </head> <body> <p>Euro: <input type="number" id="euro"></p> <p><button onclick="umrechnen()">Umrechnen</button></p> <p id="ergebnis"></p> <script> function umrechnen() { let euro = parseInt(document.getElementById('euro').value); let dollar = euro * 1.213; document.getElementById('ergebnis').innerText = euro + '€ = ' + dollar + '$'; } </script> </body> </html>
Celsius-Fahrenheit-Kelvin
<html> <head> <title>Celsius -> Kelvin, Fahrenheit</title> </head> <body> <p>°C: <input type="number" id="celsius"></p> <p><button onclick="umrechnen()">Umrechnen</button></p> <p id="ergebnis"></p> <script> function umrechnen() { let celsius = parseInt(document.getElementById('celsius').value); let kelvin = celsius + 273.15; let fahrenheit = celsius * 1.8 + 32; document.getElementById('ergebnis').innerText = celsius + '°C = ' + kelvin + '°K = ' + fahrenheit + '°F'; } </script> </body> </html>
BMI
<html> <head> <title>BMI</title> </head> <body> <p>Größe in cm: <input type="number" id="groesse"></p> <p>Gewicht in kg: <input type="number" id="gewicht"></p> <p><button onclick="umrechnen()">Umrechnen</button></p> <p id="ergebnis"></p> <script> function umrechnen() { let groesse = parseInt(document.getElementById('groesse').value); let gewicht = parseInt(document.getElementById('gewicht').value); let groesseInM = groesse / 100; let bmi = gewicht / (groesseInM * groesseInM); document.getElementById('ergebnis').innerText = 'Dein BMI ist ' + bmi; } </script> </body> </html>