öffentlich
Redaktion Druckversion

JavaScript lernen - schnell und praktisch

Die Möglichkeiten von JavaScript: Dynamik für Ihre Webseiten

JavaScript ist eine Skriptsprache, die im Browser des Surfers ausgeführt wird. Und das bedeutet: Mit JavaScript können Sie direkt und unmittelbar auf Aktionen des Benutzers reagieren - beispielsweise Meldungen ausgeben, Inhalte anders darstellen, Elemente ein- oder ausblenden etc.

Da JavaScript aber im Browser des Surfers ausgeführt wird, kann es auch abgeschaltet werden - darauf kommen wir dann noch ausführlicher zu sprechen.

Die meisten großen Webseiten setzen auf JavaScript, hier einmal eine kleine Liste mit zufällig herausgegriffenen Beispielen:

  • Pop-ups bei akademie.de: Bei akademie.de wird JavaScript für Pop-up-Fenster eingesetzt. Wenn Sie beispielsweise auf ein Bild klicken, so wird dieses in einem eigenen Fenster vergrößert angezeigt.

    Pop-up bei akademie.de

  • Formularüberprüfung bei Ebay: Wer sich bei Ebay neu registriert, muss ein Formular ausfüllen und dort seinen Namen, seine Telefonnummer etc. eintragen. Die Formularfelder werden direkt nach dem Eintragen überprüft. Steht beispielsweise im Formularfeld für die Telefonnummer ein Buchstabe, so erhalten Sie sofort eine Meldung, dass die Telefonnummer nicht das richtige Format hat.

  • Tabs bei web.de: Wenn Sie zu web.de surfen, so sehen Sie an zentraler Stelle Tabs. Bei einem Klick auf einen Tab wechselt der dazugehörige untere Bereich: Am Anfang wird die Suche angezeigt, mit einem Klick kommen Sie zum Freemail-Log-in oder auch zur Online-Videothek. JavaScript sorgt dafür, dass die gerade nicht benötigten Inhalte ausgeblendet und bei Klick angezeigt werden.

    Tabs bei web.de

  • Alle Content-Management-Systeme verwenden einen Editor, der das Eingeben und Formatieren von Text erlaubt und das Einfügen von Bildern ermöglicht. Auch diese Editoren basieren auf JavaScript - sonst würde die Word-ähnliche Bedienung nicht funktionieren.

    CKEditor erlaubt das Eingeben und Formatieren von Text und Bildern

  • Schöne Bilderpräsentation: Sicher kennen Sie auch den Lightbox-Effekt, der heute häufig eingesetzt wird, um ein kleines Vorschaubildchen vergrößert darzustellen: Bei Klick auf das kleine Bild wird es vergrößert angezeigt und gleichzeitig der Hintergrund der Webseite verdunkelt.

    Lightbox zur Darstellung von vergrößerten Bildern

    Zum Auszuprobieren finden Sie eine Realisierung des Lightbox-Effekts beispielsweise unter http://leandrovieira.com/projects/jquery/lightbox/. Klicken Sie auf die kleinen Bildchen, um den Effekt zu sehen.

  • Mehr Effekte ...: Neben dem Lightbox-Effekt gibt es viele, viele andere "Hingucker", die über JavaScript realisiert sind - wie Slider (beispielsweise unter http://cssglobe.com/lab/easyslider1.5/02.html), Diashows und vieles vieles mehr.

  • JavaScript für Anwendungen, z.B. Google Maps: Außerdem existieren Anwendungen, die ohne JavaScript überhaupt nicht denkbar sind - wie beispielsweise Google Maps (http://maps.google.de/). Sicher kennen Sie diese intuitive Bedienung, dass Sie Karten direkt durch "Anfassen" verschieben können, direkt zoomen können und das alles, ohne dass die Seite neu lädt.

Übrigens ...

ist die Technik hinter Google Maps komplexer als die bisher vorgestellten Beispiele, da neben JavaScript hierfür auch noch eine serverseitige Technik involviert ist wie beispielsweise PHP, ASP oder Ähnliches. Das Zusammenspiel von JavaScript mit solchen serverseitigen Techniken wird AJAX genannt.

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