öffentlich
Redaktion Druckversion

JavaScript lernen - schnell und praktisch

Praxis-Tipps zum Einsatz von JavaScript

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 testenAnzeigen.

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.

Mitglied werden, Vorteile nutzen!

  • Sie können alles lesen und herunterladen: Beiträge, PDF-Dateien und Zusatzdateien (Checklisten, Vorlagen, Musterbriefe, Excel-Rechner u.v.a.m.)
  • Unsere Autoren beantworten Ihre Fragen

Inhalt

Downloads zu diesem Beitrag

Weitere Downloads

Über die Autorin:

bild117864

Dr. Florence Maurice bietet Dienstleistungen im Webpublishing in Form von Fachtexten und Trainings (auch maßgeschneiderte Inhouse-Schulungen). Außerdem programmiert sie Webseiten. Ihre Themen: HTML, ...

Newsletter abonnieren