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.
Was du benötigst
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.
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.
<head>
<script>
function messageWindow() {
alert("We will show more in Step 2!");
}
</script>
....
</head>
Wähle Datei > Vorschau in Browser. Teste den JavaScript-Code in deinem bevorzugten Webbrowser.
Speichere die Datei, damit deine Änderungen angezeigt werden.
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.
Öffne die Datei step-2-intro-js.html in Dreamweaver. Zeige den Quellcode in der Ansicht „Teilen“ an.
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:
<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>
Wähle Datei > Vorschau in Browser. Teste den JavaScript-Code in deinem bevorzugten Webbrowser.
Speichere die Datei, damit deine Änderungen angezeigt werden.
