Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- web:javascript:start [2015/10/15 11:00] – ros
+++ web:javascript:start [2020/10/13 14:25] (aktuell) – Externe Bearbeitung 127.0.0.1
@@ Zeile 25: / Zeile 25: @@
 [[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 =====
@@ Zeile 33: / Zeile 34: @@
 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.min.js'' eingebunden:
+Mit dem folgenden HTML-Code wird die JavaScript-Datei ''jquery-2.1.4.min.js'' eingebunden:
 <code html>
-<script type="text/javascript" src="jquery.min.js"></script>
+<script type="text/javascript" src="jquery-2.1.4.min.js"></script>
 </code>
@@ Zeile 47: / Zeile 48: @@
     Inhalt der Website
     <script type="text/javascript">
-      alert("Hallo");
+      $('body').html('<h1>Neuer Inhalt</h1>');
     </script>
   </body>
@@ Zeile 54: / Zeile 55: @@
 ===== Auf Ereignisse reagieren =====
+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.
+Hier wird eine Funktion mit dem Namen ''changeContent'' definiert:
+<code javascript>
+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 | ''$('h1').addClass('greentext');'' |
 | ''append(text)'' | Fügt zusätzlichen Inhalt in die Elemente ein | ''$('body').append('<p>Noch was...</p>');'' |
-| ''hide()'' | Versteckt die Elemente | ''$('.loesung').hide();'' |
 | ''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();'' |
@@ Zeile 70: / Zeile 93: @@
 | ''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]]