Beide Seiten der vorigen RevisionVorhergehende ÜberarbeitungNächste Überarbeitung | Vorhergehende Überarbeitung |
web:javascript:start [2015/10/15 10:59] – ros | web:javascript:start [2020/10/13 14:25] (aktuell) – Externe Bearbeitung 127.0.0.1 |
---|
Für die folgenden Beispiele wird die jQuery-Bibliothek benötigt. Diese kann hier heruntergeladen werden. | 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]] | [[http://code.jquery.com/jquery-2.1.4.min.js|jquery-2.1.4.min.js]] (Rechtsklick und **Ziel speichern unter** auswählen) |
</WRAP> | </WRAP> |
| |
===== Einbindung in HTML ===== | ===== Einbindung in HTML ===== |
| |
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. | 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> | <code html> |
<script type="text/javascript" src="jquery.min.js"></script> | <script type="text/javascript" src="jquery-2.1.4.min.js"></script> |
</code> | </code> |
| |
Inhalt der Website | Inhalt der Website |
<script type="text/javascript"> | <script type="text/javascript"> |
alert("Hallo"); | $('body').html('<h1>Neuer Inhalt</h1>'); |
</script> | </script> |
</body> | </body> |
===== Auf Ereignisse reagieren ===== | ===== 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 ===== | ===== jQuery-Befehle ===== |
| |
| ==== HTML Ändern ==== |
| |
^ Befehl ^ Beschreibung ^ Beispiel ^ | ^ Befehl ^ Beschreibung ^ Beispiel ^ |
| ''addClass(class)'' | Fügt den Elementen eine Klasse hinzu | ''$('h1').addClass('greentext');'' | | | ''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>');'' | | | ''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>');'' | | | ''html(text)'' | Ersetzt den Inhalt der Elemente | ''$('body').html('<h1>Hallo</h1>');'' | |
| ''removeClass(class)'' | Entfernt eine Klasse aus den Elementen | ''$('h1').removeClass('greentext');'' | | | ''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();'' | | | ''show()'' | Zeigt die Elemente an | ''$('.loesung').show();'' | |
| ''slideDown()'' | Klappt die Elemente nach unten auf | ''$('.loesung').slideDown();'' | | | ''slideDown()'' | Klappt die Elemente nach unten auf | ''$('.loesung').slideDown();'' | |
| ''toggle()'' | Ändert die Sichtbarkeit | ''$('.loesung').toggle();'' | | | ''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]] |
| |