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.
Was du benötigst
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.
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.
<head>
<script>
function messageWindow() {
alert("We will show more in Step 2!");
}
</script>
....
</head>
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.
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.
Öffnen Sie die Datei step-2-intro-js.html in Dreamweaver, und zeigen Sie den Quellcode in der Ansicht „Teilen“ an.
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:
<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>
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.
