Lernen Sie, wie Sie mit JavaScript und jQuery interaktive Funktionen zu Web-Seiten hinzufügen.
intro-javascript_1408x792

JavaScript ist eine Skriptsprache und ein offener Webstandard, der von allen gängigen Webbrowsern unterstützt wird. Damit können Sie 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. Laden Sie die Projektdateien herunter, um die im Tutorial beschriebenen Arbeitsschritte nachzuvollziehen.

Vorbereitung

Laden Sie die Projektdateien herunter, und extrahieren Sie sie. Öffnen Sie die Datei step-1-intro-js.html in Dreamweaver, und zeigen Sie den Quellcode in der Ansicht „Teilen“ an.

Projektdateien herunterladen und extrahieren
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 definieren Sie mithilfe von JavaScript die Funktion, d. h. die Aktion, die ausgeführt wird. Anschließend definieren Sie das Ereignis, das die Aktion auslöst. Ein Ereignis – z. B. das Klicken auf eine Schaltfläche oder das Verlassen eines Felds mit der Tabulatortaste – „sagt“ der zugehörigen Funktion, wann sie ausgeführt werden soll.

Fügen Sie den Alert innerhalb von SCRIPT-Tags im HEAD-Abschnitt ein, und nennen Sie ihn „messageWindow“. Weisen Sie anschließend der Schaltfläche unten auf der Seite das Ereignis „onClick“ zu, damit der Alert angezeigt wird, sobald ein Anwender auf die Schaltfläche klickt.

HTML im HEAD-Abschnitt

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

Alert definieren
Alert definieren

Ereignis „onClick“ für die Schaltfläche

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

Ereignis definieren
Ereignis definieren

Änderungen in einem Browser prüfen

Wählen Sie Datei > Vorschau in Browser, und testen Sie den JavaScript-Code in Ihrem bevorzugten Webbrowser.

Speichern Sie die Datei, damit Ihre Änderungen angezeigt werden.

JavaScript-Code im Browser testen
JavaScript-Code im Browser testen

Einführung in jQuery

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

Sie können auch eigene jQuery-Skripte zu einer Seite hinzufügen. Unter jqueryui.com finden Sie weitere interaktive Funktionen, Widgets und Effekte, die Sie zu Ihren Web-Seiten hinzufügen können.

jQuery verwenden
Auf jQuery-Widgets zugreifen

Zweite Übungsdatei öffnen

Öffnen Sie die Datei step-2-intro-js.html in Dreamweaver, und zeigen Sie den Quellcode in der Ansicht „Teilen“ an.

Zweite Übungsdatei öffnen
Zweite Übungsdatei öffnen

jQuery-Animation hinzufügen

Um eine Vorstellung von der Arbeit mit jQuery zu bekommen, fügen Sie nun eine jQuery-Funktion zu Ihrer Web-Seite hinzu, mit der Sie einen Inhaltsabschnitt der Seite aus- und einblenden. Sie können jQuery selbst herunterladen und installieren. Oder Sie referenzieren 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.

Schreiben Sie den Pfad zur Bibliothek in SCRIPT-Tags innerhalb des HEAD-Abschnitts, um sie in Ihre Seite einzubinden:

jQuery-Funktion hinzufügen
jQuery-Funktion hinzufügen

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

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

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

SCRIPT-Tags verwenden
SCRIPT-Tags verwenden

Änderungen in einem Browser prüfen

Wählen Sie Datei > Vorschau in Browser, und testen Sie den JavaScript-Code in Ihrem bevorzugten Webbrowser.

Speichern Sie die Datei, damit Ihre Änderungen angezeigt werden.

Änderungen in einem Browser überprüfen
Änderungen in einem Browser überprüfen
Datei speichern, um Änderungen anzuzeigen
Datei speichern, um Änderungen anzuzeigen
04/13/2018
War diese Seite hilfreich?