DruckversionPraxis-Tipps zum Einsatz von JavaScrip
Besser trennen: HTML- und JavaScript-Code nicht vermischen
Ordnung muss sein: JavaScript-Code aus dem HTML-Code heraushalten
Bisher steht der JavaScript-Code mitten zwischen dem HTML-Code. Bei größeren und umfangreichen Projekten ist es sinnvoll, JavaScript- und HTML-Code sauber zu trennen.
Genau so ist es ja bei CSS und HTML auch: Wenn Sie sich mit CSS beschäftigt haben, wissen Sie, dass es unpraktisch ist, dauernd mit Inlinestyles wie <p style="color: red"> </p> zu arbeiten. Besser ist es, die Formatierungen in einer externen CSS-Datei festlegen und die Verknüpfung über Klassen oder ids zu realisieren. Ähnlich unschön wie Inlinestyles in CSS ist bei JavaScript die Verwendung der Inline-Eventhandler onclick oder onsubmit.
JavaScript-Code in den Header-Bereich auslagern und mit "id" selektieren
Deshalb brauchen wir eine andere Methode, Events zu notieren. Sehen wir uns das anhand des Formularbeispiels an.
Die erste Änderung betrifft das form-Starttag. Der Eventhandler onsubmit verschwindet. Dafür erhält das Formular eine id:
<form action="" id="mf">
Jetzt zum JavaScript-Code. Wir wählen das Formularelement aufgrund seine id aus und bestimmen, dass beim submit-Ereignis die Funktion pruefen() aufgerufen werden soll. Das geschieht über folgende Zeile:
document.getElementById("mf").onsubmit=pruefen;pruefen hier ohne runde Klammern: Wenn Sie möchten, dass eine Funktion mit einem bestimmten Ereignis verbunden wird, schreiben Sie den Namen der Funktion ohne runde Klammern. Wenn Sie runde Klammern schreiben, würde die Funktion direkt ausgeführt und nur der Rückgabewert zugewiesen - und das ist hier nicht gewollt.
Jetzt müssen wir aber noch dafür sorgen, dass das Verbinden von Event mit Funktion erst stattfindet, wenn das Dokument geladen ist. Wenn der Browser den Code der Seite von oben nach unten ausführt, würde er versuchen, das Element mit der id="mf" zu finden. Das steht aber weiter unten und ist noch nicht geladen.
Dafür brauchen wir ein weiteres Event: onload, das heißt, nach dem Laden der Seite.
window.onload = function() {
document.getElementById("mf").onsubmit=pruefen;
}Dieser Code bedeutet: Nach dem Laden der Seite soll die angegebene Funktion ausgeführt werden. In dieser Funktion wird das Element mit der id="mf" gesucht und bestimmt, dass bei seinem submit-Ereignis die Funktion pruefen aufgerufen werden soll.
Hier sehen Sie das Beispiel im Gesamtzusammenhang. Die Änderungen gegenüber der ursprünglichen Version sind markiert:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Formularüberprüfung</title>
<script type="text/javascript">
function pruefen() {
var nachname = document.getElementById("nachname");
var ort = document.getElementById("ort");
if (nachname.value == "") {
alert("Bitte geben Sie Ihren Nachnamen an!");
nachname.focus();
return false;
}
if (ort.value == "") {
alert("Bitte geben Sie Ihren Wohnort an!");
ort.focus();
return false;
}
}
window.onload = function() {
document.getElementById("mf").onsubmit=pruefen;
}
</script>
</head>
<body>
<form action="" id="mf">
<label for="nachname">Name: </label><br>
<input type="text" name="nachname" id="nachname" size="20" maxlength="30"><br>
<label for="ort">Wohnort: </label><br>
<input type="text" name="ort" id="ort" size="20" maxlength="30"><br>
<input type="submit">
</form>
</body>
</html>Ein Beispiel können Sie hier testen
.
Alternative: Elemente über ihre Klasse auswählen
getElementById() wählt Elemente aufgrund ihrer id auf und wird im Beispiel viel eingesetzt. Was ebenfalls sehr praktisch wäre, wäre Elemente aufgrund ihres Klassennamens auszuwählen - aber leider gibt es keine standardmäßig definierte Methode, die das erlaubt.
Diese Lücke füllen JavaScript-Bibliotheken, wie beispielsweise jQuery. Wenn Sie den Verweis auf die jQuery-Datei im Kopfbereich Ihres Dokuments einbinden, können Sie in Ihrem JavaScript-Code weitere praktische Befehle verwenden, die Ihnen jQuery zur Verfügung stellt.
Dies ist eine Leseprobe
Möchten Sie den Beitrag komplett lesen? Dann werden Sie Probemitglied und testen Sie akademie.de 14 Tage kostenlos!
Auf JavaScript lernen erfahren Sie mehr über diesen Beitrag und die weiteren Leseproben.
Weitere Informationen finden Sie auf unserer Infoseite zur Mitgliedschaft und in unseren AGB.
Ich bin bereits Mitglied