Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- web:javascript:start [2015/10/15 10:46] – ros
+++ web:javascript:start [2020/10/13 14:25] (aktuell) – Externe Bearbeitung 127.0.0.1
@@ Zeile 18: / Zeile 18: @@
   * Mit dem Strichpunkt '';'' wird der Befehl abgeschlossen.
   * **Achtung:** Der CSS-Selektor und der HTML-Code muss in einfachen Anführungszeichen stehen.
+<WRAP download>
+== jQuery ==
+Für die folgenden Beispiele wird die jQuery-Bibliothek benötigt. Diese kann hier heruntergeladen werden.
+[[http://code.jquery.com/jquery-2.1.4.min.js|jquery-2.1.4.min.js]] (Rechtsklick und **Ziel speichern unter** auswählen)
+</WRAP>
 ===== Einbindung in HTML =====
 Wie bei CSS kann Javascript direkt in eine HTML-Datei eingefügt werden oder in einer separaten Datei gespeichert werden.
+==== In einer eigenen JS-Datei ====
+Häufig wird vordefinierter JavaScript-Code verwendet. Dieser ist als JS-Datei erhältlich und wird in die HTML-Datei eingebunden, indem beim ''[[web:html:script|<script>]]''-Elements der Dateiname als Wert des ''src''-Attributs angegeben wird.
+Mit dem folgenden HTML-Code wird die JavaScript-Datei ''jquery-2.1.4.min.js'' eingebunden:
+<code html>
+<script type="text/javascript" src="jquery-2.1.4.min.js"></script>
+</code>
 ==== Direkt in der HTML-Datei ====
@@ Zeile 31: / Zeile 48: @@
     Inhalt der Website
     <script type="text/javascript">
-      alert("Hallo");
+      $('body').html('<h1>Neuer Inhalt</h1>');
     </script>
   </body>
 </code>
-==== In einer eigenen JS-Datei ====
+===== Auf Ereignisse reagieren =====
-Häufig wird vordefinierter JavaScript-Code verwendet. Dieser ist als JS-Datei erhältlich und wird in die HTML-Datei eingebunden, indem beim ''[[web:html:script|<script>]]''-Elements der Dateiname als Wert des ''src''-Attributs angegeben wird.
+Befehle, die direkt im ''[[web:html:script|<script>]]''-Element stehen, werden sofort ausgeführt. Oft möchte man aber Befehle erst zu einem späteren Zeitpunkt ausführen. Dazu wird eine **Funktion** definiert. Das ist eine Sammlung von Befehlen, die auf Wunsch ausgeführt werden können.
-Mit dem folgenden HTML-Code wird die JavaScript-Datei ''jquery.min.js'' eingebunden:
+Hier wird eine Funktion mit dem Namen ''changeContent'' definiert:
-<code html>
+<code javascript>
-<script type="text/javascript" src="jquery.min.js"></script>
+function changeContent() {
+  $('body').html('<h1>Neuer Inhalt</h1>');
+}
+</code>
+**Achtung:** Ein Funktionsname darf nur aus Gross- und Kleinbuchstaben bestehen.
+Mit dem jQuery-Befehl ''click'' kann nun festgelegt werden, dass die in der Funktion definierten Befehle ausgeführt werden sollen, wenn auf ein bestimmtes Element geklickt wird:
+<code javascript>
+$('h1').click(changeContent);
 </code>
 ===== jQuery-Befehle =====
+==== HTML Ändern ====
 ^ Befehl ^ Beschreibung ^ Beispiel ^
-| ''addClass(class)'' | Fügt den Elementen eine Klasse hinzu | ''addClass('hidden')'' |
+| ''addClass(class)'' | Fügt den Elementen eine Klasse hinzu | ''$('h1').addClass('greentext');'' |
-| ''html(text)'' | Setzt den Inhalt der Elemente | ''html('<h1>Hallo</h1>')'' |
+| ''append(text)'' | Fügt zusätzlichen Inhalt in die Elemente ein | ''$('body').append('<p>Noch was...</p>');'' |
+| ''html(text)'' | Ersetzt den Inhalt der Elemente | ''$('body').html('<h1>Hallo</h1>');'' |
+| ''removeClass(class)'' | Entfernt eine Klasse aus den Elementen  | ''$('h1').removeClass('greentext');'' |
+==== Animationen ====
+^ Befehl ^ Beschreibung ^ Beispiel ^
+| ''hide()'' | Versteckt die Elemente | ''$('.loesung').hide();'' |
+| ''show()'' | Zeigt die Elemente an | ''$('.loesung').show();'' |
+| ''slideDown()'' | Klappt die Elemente nach unten auf | ''$('.loesung').slideDown();'' |
+| ''slideToggle()'' | Klappt die Elemente auf oder zu | ''$('.loesung').slideToggle();'' |
+| ''slideUp()'' | Klappt die Elemente nach oben zu | ''$('.loesung').slideUp();'' |
+| ''toggle()'' | Ändert die Sichtbarkeit | ''$('.loesung').toggle();'' |
+==== Ereignisse ====
+^ Befehl ^ Beschreibung ^ Beispiel ^
+| ''click(funktion)'' | Wenn auf ein Element geklickt wird... | ''$('h1').click(showContent);'' |
+| ''hover(funktion)'' | Wenn der Mauszeiger über ein Element bewegt wird... | ''$('h1').hover(showContent);'' |
+==== Zeitsteuerung ====
+Mit ''setTimeout'' kann festgelegt werden, dass eine Funktion nach einer bestimmten Dauer (in Millisekunden) ausgeführt werden soll:
+<code javascript>
+function doSomething() {
+}
+setTimeout(doSomething, 1000);
+</code>
+Mit ''setInterval'' wird die Funktion immer wieder nach der angegebenen Dauer ausgeführt:
+<code javascript>
+function doSomething() {
+}
+setInterval(doSomething, 1000);
+</code>
+===== Links =====
+  * [[https://api.jquery.com/|jQuery-Referenz]]