Lerne, wie du mit JavaScript und jQuery interaktive Funktionen zu Web-Seiten hinzufügen kannst.
Illustration mit einem Mann im Smoking, der an einem Konzertflügel sitzt, aus dem bunte, abstrakte Formen strömen

JavaScript ist eine Skriptsprache und ein offener Webstandard, der von allen gängigen Webbrowsern unterstützt wird. Damit kannst du Web-Seiten um interaktive Elemente und zusätzliche Funktionen ergänzen. jQuery ist eine JavaScript-Bibliothek, die das Hinzufügen von UI-Elementen, Effekten und Animationen zu Web-Seiten vereinfacht. Lade die Projektdateien herunter, um die im Tutorial beschriebenen Arbeitsschritte nachzuvollziehen.

Vorbereitung.

Lade die Projektdateien herunter. Extrahiere und speichere sie. Öffne die Datei step-1-intro-js.html in Dreamweaver. Zeige den Quellcode in der Ansicht „Teilen“ an.

Eine Datei wurde in Dreamweaver geöffnet. Der Quell-Code wird in der Ansicht „Teilen“ angezeigt.
Projektdateien herunterladen und extrahieren

JavaScript-Alerts.

Die ALERT-Methode ist ein guter Anfang, wenn man sich mit den Grundlagen der JavaScript-Programmierung vertraut machen möchte. Ein Alert ist eine Meldung in einem Dialogfeld. Zuerst definierst du mithilfe von JavaScript die Funktion, d. h. die Aktion, die ausgeführt wird. Anschließend definierst du das Ereignis, das die Aktion auslöst. Ein Ereignis – z. B. das Klicken auf einen Button oder das Verlassen eines Felds mit der Tabulatortaste – „sagt“ der zugehörigen Funktion, wann sie ausgeführt werden soll.

Füge den Alert innerhalb von SCRIPT-Tags im HEAD-Abschnitt ein. Nenne ihn „messageWindow“. Weise anschließend dem Button unten auf der Seite das Ereignis „onClick“ zu, damit der Alert angezeigt wird, sobald ein User den Button anklickt.

HTML im HEAD-Abschnitt.

<head>
<script>
function messageWindow() {
  alert("We will show more in Step 2!");
}
</script>
....
</head>

Eine Alert-Funktion wurde in JavaScript definiert.
Alert definieren

Ereignis „onClick“ für den Button.

<div id="moreBtn" onClick="messageWindow()">
SHOW MORE
</div

Ein Ereignis „onClick“ wurde definiert.
Ereignis definieren

Änderungen in einem Browser prüfen.

Wähle Datei > Vorschau in Browser. Teste den JavaScript-Code in deinem bevorzugten Webbrowser.

Speichere die Datei, damit deine Änderungen angezeigt werden.

Über „Datei > Vorschau in Browser“ lässt sich der JavaScript-Code im bevorzugten Webbrowser testen.
JavaScript-Code im Browser testen

Einführung in jQuery.

jQuery ist eine JavaScript-Bibliothek mit vordefinierten Funktionen, mit denen du Interaktivität, Animationen und andere Effekte zu einer Seite hinzuzufügen kannst, ohne viel JavaScript-Code verfassen zu müssen. In Dreamweaver findest du jQuery-Widgets in der Entwurfsansicht im Bedienfeld „Einfügen“ unter „jQuery UI“ oder „jQuery Mobile“.

Du kannst auch eigene jQuery-Skripte zu einer Seite hinzufügen. Unter jqueryui.com findest du weitere interaktive Funktionen, Widgets und Effekte, die du zu deinen Web-Seiten hinzufügen kannst.

jQuery-Widgets sind unter „Einfügen > jQuery UI“ verfügbar.
Auf jQuery-Widgets zugreifen

Zweite Übungsdatei öffnen.

Öffne die Datei step-2-intro-js.html in Dreamweaver. Zeige den Quellcode in der Ansicht „Teilen“ an.

Eine Datei wurde in Dreamweaver geöffnet. Der Quell-Code wird in der Ansicht „Teilen“ angezeigt.
Zweite Übungsdatei öffnen

Eine jQuery-Animation hinzufügen.

Um eine Vorstellung von der Arbeit mit jQuery zu bekommen, fügst du nun eine jQuery-Funktion zu deiner Web-Seite hinzu, mit der du einen Inhaltsabschnitt der Seite aus- und einblendest. Du kannst jQuery selbst herunterladen und installieren. Oder du referenzierst die jQuery-Bibliothek, die von Google oder Microsoft gehostet wird. In diesem Beispiel wird die von Google gehostete Bibliothek verwendet. Die Bibliothek lässt sich schnell einbinden, ohne dass man viele Dateien verwalten muss, wie dies bei einer eigenständigen Installation der Fall ist.

Schreibe den Pfad zur Bibliothek in SCRIPT-Tags innerhalb des HEAD-Abschnitts, um sie in deine Seite einzubinden:

Code wird hinzugefügt, um die jQuery-Bibliothek zu referenzieren, die von Google gehostet wird.
jQuery-Funktion hinzufügen

<script src=
"http://ajax.googleapis.com/ajax/
libs/jquery/1.11.2/jquery.min.js"
>
</script>

Füge dann die Funktion „slideToggle“ hinzu, um den Textabschnitt auf der Seite ein- und ausblenden zu lassen, wenn der User auf den Button klickt. Im nachstehenden Code ist der Button, über den der User die Funktion „slideToggle“ auslöst, durch die ID „#moreBtn“ gekennzeichnet. „#content3“ ist die ID des DIV-Elements, das mit Klick auf den Button ein- und ausgeblendet wird.

<script>
  $(document).ready(function(){
    $("#moreBtn").click(function(){
    $("#content3").slideToggle("slow")
    });
  });
</script>

Die Funktionen „jQuery“ und „slideToggle“ wurden zwischen SCRIPT-Tags hinzugefügt.
SCRIPT-Tags verwenden

Änderungen in einem Browser prüfen.

Wähle Datei > Vorschau in Browser. Teste den JavaScript-Code in deinem bevorzugten Webbrowser.

Speichere die Datei, damit deine Änderungen angezeigt werden.

Über „Datei > Vorschau in Browser“ lässt sich der JavaScript-Code im bevorzugten Webbrowser testen.
Änderungen in einem Browser überprüfen
Die Datei wird gespeichert, damit die Änderungen angezeigt werden.
Datei speichern, um Änderungen anzuzeigen
10/19/2021
War diese Seite hilfreich?