Zukunftstag – jQuery, coole Moves fürs Web – Javascript, der Motor des Internets
Zukunftstag – jQuery, coole Moves fürs Web – Javascript, der Motor des Internets
0 0
jQuery
On Github subugoe-zukunftstag / jQuery
Zukunftstag
jQuery, coole Moves fürs Web
Javascript, der Motor des Internets
Mit JavaScript können sich die (Web)Seiten verändern während man sie anschaut.
JavaScript schreibt man innerhalb des<script></script> Tags.Funktionen einbinden
Meist benutzt man eine sogenannte Library - eine Sammlung von Funktionen in einer Datei. Wenn man diese Datei in die eigene Webseite einbindet, kann man deren Funktionen nutzen.jQuery Einbinden
jQuery ist eine der populärsten JavaScript-Libraries. Nachdem man die jQuery-Datei aus dem Internet heruntergeladen hat kann man sie im Header seiner Webseite einbinden.<script src="jquery.min.js "></script>Das Wichtigste beim Programmieren
Computer sind total pingelig!!! Leerzeichen an der falschen Stelle oder ein Groß- statt eines Kleinbuchstaben kann das Programm kaputt machen.
Ein guter Teil der Zeit beim Programmieren geht mit Debugging drauf.
Das Handwerkzeugs von jQuery (und den meisten anderen Sprachen)
- Werte können in Variablen gespeichert und verändert werden
- Mit Schleifen können Aktionen mehrfach ausgeführt werden
- Es können entweder/oder Abfragen gemacht werden
- Es gibt vordefinierte Funktionen
- Mehrere verschiedene Aktionen können in Funktionen zusammengefasst werden
Aufgabe
- Um die folgenden Beispiele auszuprobieren, ruft das
Entwicklerwerkzeug eures Browsers auf
- Entweder im Menü (Tools - Entwicklerwerkzeuge)
- Oder mit Strg+Shift+C
- Wählt dann die Console zur Interaktion mit der Webseite aus
Vordefinierte Funktionen
(zum Ausprobieren )
alert("Hallo Welt");
1+3;
Variable (zum Ausprobieren)
var ergebnis = 3;alert(ergebnis);
ergebnis = 5;alert(ergebnis);
Schleife (zum Ausprobieren)
for (var i = 0; i < 3; i++) { alert("Hallo, ich mache alles mehrfach");}
Abfrage (zum Ausprobieren)
var ergebnis = 1;if (ergebnis == 1) { alert("Stimmt!");} else { alert("Stimmt nicht!");}
Funktion (zum Ausprobieren)
var sagsMir = function () { var ergebnis = 1+3; alert("Ich sage " + ergebnis);}
sagsMir();
jQuery
Stellt eine ganze Reihe nützlicher Funktionen zur Verfügung
Vor allem zum Verändern von Seitenelementen
Spezielle jQuery Funktionen
$("p").css("background-color","blue");
$("p").html("hallo Leute");
$("p").append("
Und hier kommt noch mehr Text
");
Ausführen nachdem alle Elemente geladen sind
$(document).ready(function() {
// Das hier wird getan nachdem die Seite geladen ist
});
Ausprobieren
- Öffne deine Datei
- Importiere jQuery <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js" />
- Schreibe eigenen Code<script> $(document).ready(function() { // Hier kommt dein Code hin }); </script>